:root{color:#172422;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--surface:#fff;--surface-soft:#f9fbf6;--line:#dce4dd;--text:#172422;--muted:#64716d;--green:#16846f;--green-soft:#e5f5ee;--gas:#d78928;--gas-soft:#fff3dc;--coral:#d35f52;--blue:#1d78a6;--shadow:0 18px 48px #1f302a14;background:#f5f7f3;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;margin:0}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.topbar{z-index:10;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#f5f7f3eb;border-bottom:1px solid #dce4dddb;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:12px 20px;display:grid;position:sticky;top:0}.brand,.topbar nav,.mode-chip,.panel-title,.preset-list button,.option-head,.chart-head,.mini-title,.thesis-grid,.principle-steps,.section-heading{align-items:center;display:flex}.brand{gap:10px}.brand span{color:#11221f;background:#fff;border:1px solid #1b2d29;border-radius:7px;place-items:center;width:36px;height:36px;font-size:.78rem;font-weight:900;display:grid}.brand strong{letter-spacing:0;font-size:.9rem}.topbar nav{border:1px solid var(--line);background:#fff;border-radius:8px;justify-content:center;gap:4px;padding:4px}.topbar a{color:#4c5b57;border-radius:6px;padding:8px 14px;font-size:.78rem;font-weight:850;text-decoration:none}.topbar a:hover{color:var(--text);background:#eef5ee}.mode-chip{border:1px solid var(--line);color:#40514d;background:#fff;border-radius:8px;justify-self:end;min-height:36px;padding:0 14px;font-size:.78rem;font-weight:850}.hero-grid{grid-template:540px/minmax(0,1fr);min-height:430px;padding:18px 20px 0;display:grid;position:relative}.hero-copy,.hero-media,.panel,.principle-band,.photo-card{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);border-radius:8px}.hero-copy{z-index:2;width:min(720px,100%);min-height:0;box-shadow:none;background:0 0;border:0;grid-area:1/1;align-content:end;padding:42px;display:grid;position:relative}.hero-copy h1{color:#fff;letter-spacing:0;text-shadow:0 12px 34px #070f0d75;max-width:650px;margin:0;font-size:4.75rem;line-height:.95}.hero-copy p{color:#ffffffeb;text-shadow:0 10px 26px #070f0d80;max-width:600px;margin:18px 0 0;font-size:1.08rem;line-height:1.55}.thesis-grid{flex-wrap:wrap;gap:8px;margin-top:24px}.thesis-grid span{color:#1d322d;background:#ffffffd6;border:1px solid #ffffff85;border-radius:7px;padding:8px 10px;font-size:.78rem;font-weight:850}.hero-media{grid-area:1/1;height:100%;min-height:0;margin:0;position:relative;overflow:hidden}.hero-media:after{content:"";pointer-events:none;background:linear-gradient(90deg,#081512a8,#08151247 44%,#0815120a),linear-gradient(#08151200 42%,#08151273);position:absolute;inset:0}.hero-media img{object-fit:cover;width:100%;height:100%;display:block}.hero-media.product-media img{object-fit:contain;background:#f2f4f1}.hero-media figcaption{z-index:2;color:#263632;background:#ffffffe6;border:1px solid #ffffffc7;border-radius:8px;gap:3px;max-width:min(460px,100% - 32px);padding:12px 14px;display:grid;position:absolute;inset:16px 16px auto auto;box-shadow:0 12px 26px #131e1b29}.hero-media figcaption strong{font-size:.92rem}.hero-media figcaption span{color:#60706c;font-size:.8rem;line-height:1.35}.workspace{grid-template-columns:minmax(280px,340px) minmax(440px,1fr) minmax(300px,390px);gap:18px;padding:18px 20px;display:grid}.panel{min-width:0;padding:18px}.panel-title{color:var(--green);gap:10px;margin-bottom:16px}.panel-title.wide{align-items:flex-start}.panel-title h2,.principle-band h2,.section-heading h2{color:#142521;letter-spacing:0;margin:0;font-size:1.1rem;line-height:1.15}.panel-title p,.principle-band p,.section-heading p{color:var(--muted);margin:4px 0 0;font-size:.8rem;line-height:1.4}.preset-list{gap:8px;display:grid}.preset-list button{border:1px solid var(--line);color:#263b36;background:#fff;border-radius:7px;gap:8px;min-height:38px;padding:0 11px;font-size:.82rem;font-weight:850}.preset-list button.active,.preset-list button:hover{background:var(--green-soft);color:#0f5949;border-color:#9dc9b7}.preset-copy{border-left:3px solid var(--green);color:#475955;background:#f6faf6;margin:14px 0 18px;padding:12px;font-size:.82rem;line-height:1.45}.slider-list{gap:14px;display:grid}.slider-row{gap:7px;display:grid}.slider-label{color:#22342f;justify-content:space-between;align-items:baseline;gap:12px;font-size:.84rem;font-weight:850;display:flex}.slider-label strong{border:1px solid var(--line);text-align:right;background:#f8faf8;border-radius:6px;min-width:38px;padding:3px 7px;font-size:.76rem}.slider-row input{appearance:none;background:linear-gradient(90deg,currentColor,#e2e8e3);border-radius:999px;width:100%;height:8px}.slider-row input::-webkit-slider-thumb{appearance:none;background:#fff;border:2px solid;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 8px #2233312e}.slider-row input::-moz-range-thumb{background:#fff;border:2px solid;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 8px #2233312e}.slider-row small{color:#73827e;font-size:.72rem;line-height:1.35}.winner-chip{white-space:nowrap;border-radius:7px;margin-left:auto;padding:7px 10px;font-size:.76rem;font-weight:900}.winner-chip.electric{background:var(--green-soft);color:#115f4f;border:1px solid #a8d1bd}.winner-chip.gasoline{background:var(--gas-soft);color:#7b4a11;border:1px solid #e5bf83}.score-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.option-card{border:1px solid var(--line);background:#fbfdfb;border-radius:8px;gap:12px;padding:14px;display:grid}.option-card.electric{background:#f2faf6;border-color:#c7e1d5}.option-card.gasoline{background:#fff9ec;border-color:#ead3a8}.option-head{justify-content:space-between;gap:14px}.option-head div{gap:4px;display:grid}.option-head span{color:#63736f;font-size:.76rem;font-weight:900}.option-head strong{color:#12231f;font-size:2.2rem;line-height:1}.option-card.electric .option-head svg{color:var(--green)}.option-card.gasoline .option-head svg{color:var(--gas)}.score-bar{background:#e3e9e4;border-radius:999px;height:10px;overflow:hidden}.score-bar i{border-radius:inherit;background:currentColor;height:100%;display:block}.option-card.electric .score-bar{color:var(--green)}.option-card.gasoline .score-bar{color:var(--gas)}.option-card dl{gap:7px;margin:0;display:grid}.option-card dl div{border-bottom:1px solid #d3ddd6cc;justify-content:space-between;gap:12px;padding-bottom:7px;display:flex}.option-card dt,.option-card dd{color:#5d6d69;margin:0;font-size:.76rem;font-weight:850}.option-card dd{color:#152723}.option-card p{color:#4c5e59;margin:0;font-size:.78rem;line-height:1.42}.delta-band{background:#fbfdfb;border:1px solid #d5e1d9;border-radius:8px;grid-template-columns:auto auto 1fr;align-items:center;gap:10px;margin:14px 0;padding:12px;display:grid}.delta-band span{color:#5b6b67;font-size:.8rem;font-weight:900}.delta-band strong{color:var(--green);font-size:1.35rem}.delta-band p{color:#455652;margin:0;font-size:.82rem;line-height:1.35}.journey-chart{border:1px solid var(--line);background:#fff;border-radius:8px;gap:10px;padding:14px;display:grid}.chart-head{color:#20342f;justify-content:space-between;gap:12px;font-size:.82rem;font-weight:900}.chart-head div{color:#63716d;align-items:center;gap:7px;font-size:.72rem;display:flex}.electric-dot,.gas-dot{border-radius:50%;width:9px;height:9px}.electric-dot{background:var(--green)}.gas-dot{background:var(--gas)}.journey-chart svg{width:100%;height:220px;overflow:visible}.zero-line{stroke:#dbe4dd;stroke-dasharray:5 5}.electric-line,.gas-line{fill:none;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round}.electric-line{stroke:var(--green)}.gas-line{stroke:var(--gas)}.electric-circle,.gas-circle{fill:#fff;stroke-width:3px}.electric-circle{stroke:var(--green)}.gas-circle{stroke:var(--gas)}.chart-labels{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.chart-labels span{color:#65736f;text-align:center;font-size:.68rem;font-weight:850}.roby-box{background:#f7fbf8;border:1px solid #cfe0d7;border-radius:8px;margin-top:14px;padding:14px}.mini-title{color:#24413e;gap:8px;font-size:.84rem;font-weight:900}.roby-box p{color:#40524e;margin:10px 0 0;font-size:.86rem;line-height:1.55}.ladder-wrap{border:1px solid var(--line);background:var(--surface-soft);border-radius:8px;min-height:500px;padding:12px 8px 12px 10px;position:relative;overflow:hidden}.ladder-track{--axis-left:120px;--marker-start:22px;height:100%;min-height:474px;margin-left:var(--axis-left);border-left:3px solid #253a35;position:relative}.ladder-rung{background:#cbd8d0;width:26px;height:1px;position:absolute;left:-13px}.anchor-tick{background:#253a35;width:24px;height:2px;position:absolute;left:-28px;transform:translateY(-50%)}.anchor-label,.component-chip{position:absolute;transform:translateY(-50%)}.anchor-label{left:calc(var(--axis-left) * -1);width:calc(var(--axis-left) - 12px);color:#64736f;pointer-events:none;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:5px;font-size:.66rem;line-height:1.05;display:grid}.anchor-label span{text-align:right;font-variant-numeric:tabular-nums}.anchor-label strong{text-overflow:ellipsis;white-space:nowrap;font-weight:850;overflow:hidden}.component-chip{left:var(--marker-start);z-index:2;min-height:24px;max-width:calc(100% - var(--marker-start) - 4px);color:#243b38;background:#fff;border:1px solid;border-radius:999px;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:7px;padding:3px 7px;font-size:.66rem;font-weight:850;display:grid;box-shadow:0 4px 14px #20302d17}.component-chip b{border-radius:50%;width:8px;height:8px}.component-chip span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.component-chip em{color:#57706a;font-size:.62rem;font-style:normal}.principle-band{grid-template-columns:minmax(260px,.9fr) minmax(420px,1.1fr);gap:22px;margin:0 20px 18px;padding:22px;display:grid}.principle-band h2{font-size:1.45rem}.principle-band p{max-width:650px;font-size:.95rem}.principle-steps{align-items:stretch;gap:10px}.principle-steps div{border:1px solid var(--line);background:#fbfdfb;border-radius:8px;align-content:start;gap:8px;min-width:0;padding:14px;display:grid}.principle-steps svg{color:var(--green)}.principle-steps strong{color:#1b322d;font-size:.9rem}.principle-steps span{color:#5b6c68;font-size:.78rem;line-height:1.42}.photo-section{padding:0 20px 24px}.section-heading{justify-content:space-between;gap:18px;margin-bottom:12px}.section-heading p{text-align:right;max-width:640px}.photo-grid{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.photo-card{overflow:hidden}.photo-card img{aspect-ratio:16/10;object-fit:cover;width:100%;display:block}.photo-card div{padding:14px}.photo-card h3{color:#192b27;margin:0;font-size:.96rem}.photo-card p{color:#5a6b66;margin:8px 0 0;font-size:.8rem;line-height:1.45}button:focus-visible,a:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #16846f47}@media (width<=1250px){.workspace{grid-template-columns:320px 1fr}.ladder-panel{grid-column:1/-1}.ladder-wrap{min-height:430px}.ladder-track{min-height:404px}}@media (width<=920px){.topbar{grid-template-columns:1fr;align-items:stretch;position:static}.topbar nav{justify-content:space-between;overflow-x:auto}.mode-chip{justify-content:center;justify-self:stretch}.hero-grid,.workspace,.principle-band,.score-grid{grid-template-columns:1fr}.workspace{padding-inline:12px}.hero-grid{grid-template-rows:460px;min-height:390px;padding-inline:12px}.hero-copy{padding:28px}.hero-copy h1{font-size:3.4rem}.principle-band{margin-inline:12px}.principle-steps,.section-heading{flex-direction:column}.section-heading{align-items:flex-start}.section-heading p{text-align:left}.photo-section{padding-inline:12px}.photo-grid{grid-template-columns:1fr 1fr}}@media (width<=560px){.hero-copy,.panel,.principle-band{padding:14px}.hero-grid{grid-template-rows:430px;min-height:430px}.hero-copy h1{font-size:2.75rem}.hero-copy p{font-size:.98rem}.panel-title.wide{display:grid}.winner-chip{width:fit-content;margin-left:0}.delta-band{grid-template-columns:1fr}.chart-head{flex-direction:column;align-items:flex-start}.chart-labels span{font-size:.58rem}.ladder-wrap{min-height:520px}.ladder-track{--axis-left:118px;min-height:494px}.component-chip{font-size:.6rem}.component-chip em{display:none}.photo-grid{grid-template-columns:1fr}}