@font-face{font-family:Fraunces;src:url('assets/fraunces-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Fraunces;src:url('assets/fraunces-900.woff2') format('woff2');font-weight:900;font-display:swap}
:root{--ink:#263b34;--paper:#f3eddd;--teal:#30594b;--mint:#79d99f;--gold:#e5b665;--page:#edf0eb;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--page);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,a,select,input{-webkit-tap-highlight-color:transparent}button,select{min-height:44px;border:1px solid #b1beb4;border-radius:6px;background:#fafbf8;color:var(--ink)}button{padding:10px 14px;cursor:pointer;font-size:13px;font-weight:600}button:hover{border-color:#365c4a;background:#fff}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #a66b16;outline-offset:4px}button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fff9eb}a{color:inherit;text-underline-offset:4px}.page-header,main,footer{max-width:1780px;margin:auto;padding-left:32px;padding-right:32px}.page-header{height:72px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #cbd4cc}.brand{font:600 22px Fraunces,Georgia,serif;text-decoration:none}.brand span{font:13px Arial,sans-serif;color:#68756d;margin-left:8px}.jump-link{font-size:13px}.intro{display:flex;align-items:end;justify-content:space-between;gap:30px;padding:37px 0 27px}.intro h1{font:600 clamp(30px,3vw,46px)/1.1 Fraunces,Georgia,serif;margin:0 0 12px;letter-spacing:-1px}.intro p{font-size:15px;line-height:1.5;margin:0;max-width:720px;color:#58685e}.intro .study-status{font-size:12px;white-space:nowrap;text-align:right;color:#6b796e;line-height:1.6}.review-tools{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid #cbd4cc;border-bottom:1px solid #cbd4cc}.scene-picker{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;white-space:nowrap}.scene-picker select{padding:9px 32px 9px 12px;max-width:230px}.tool-buttons{display:flex;flex-wrap:wrap;gap:8px}.interaction-hint{font-size:12px;color:#657268;margin:14px 0 24px;line-height:1.5}.comparison{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start}.direction{min-width:0}.direction-heading{display:flex;align-items:center;gap:9px;margin:0 0 9px}.letter{width:29px;height:29px;border:1px solid #84998a;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}.direction h2{font:600 21px/1.15 Fraunces,Georgia,serif;margin:0}.direction-description{min-height:39px;font-size:13px;line-height:1.45;color:#617166;margin:0 0 16px;max-width:340px}.phone{position:relative;width:100%;aspect-ratio:390 / 844;overflow:hidden;background:#bdd9dc;border-radius:16px;box-shadow:0 6px 26px #203c3221,0 0 0 1px #72857855;isolation:isolate;max-width:390px;margin-inline:auto}.screen{position:absolute;width:390px;height:844px;transform:scale(var(--scale,1));transform-origin:top left;overflow:hidden;font:14px/1.45 Arial,sans-serif;color:#fff9eb;background:#bdd9dc}.world{position:absolute;inset:-10px;width:410px;height:864px;object-fit:cover;transform-origin:center;will-change:transform}.world-shade{position:absolute;inset:0;background:#13231b12;pointer-events:none;transition:background .35s}.night-mode .world{filter:brightness(.44) saturate(.65)}.night-mode .world-shade{background:#12232d30}.city-top{position:absolute;left:12px;right:12px;top:12px;display:flex;gap:12px;align-items:start;color:#233b34;z-index:3}.objective-demo{font-size:12px;line-height:1.4;display:flex;gap:8px;max-width:219px;background:#f3edddd9;padding:8px 10px;border-left:2px solid #30594b}.objective-demo span{height:17px;width:17px;border:1px solid #708475;flex:none}.money-demo{margin-left:auto;min-width:124px;background:#f3eddd;padding:8px 10px;text-align:right;border-radius:0 0 5px 5px;border-top:2px solid #30594b;box-shadow:0 4px 10px #182c2220}.money-demo small{font-size:10px;display:block}.money-demo strong{display:block;font-size:20px;line-height:1.6}.money-demo em{font-style:normal;font-size:10px;color:#67746c}.radio-demo{position:absolute;right:18px;top:108px;color:#496256;font-size:16px;letter-spacing:12px;z-index:3}.city-nav{position:absolute;bottom:23px;left:12px;right:12px;display:flex;gap:4px;height:44px;z-index:4;color:#405348}.city-nav span{background:#e6e9dc;border:1px solid #929f91;border-radius:5px;display:grid;place-items:center;flex:1;font-size:11px;box-shadow:0 2px 0 #62786b}.city-nav .nav-arrow{flex:0 0 39px;font-size:17px}.city-nav .nav-race{background:#30594b;color:#fff9eb}.city-nav .nav-garage{font-size:10px;color:#66756c}.actor-anchor{position:absolute;left:25px;bottom:121px;width:230px;height:363px;z-index:1;pointer-events:none;transform-origin:bottom center}.actor-parallax{width:100%;height:100%;will-change:transform}.actor-art{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 2px 1px #16332921)}.dialogue-anchor{position:absolute;left:13px;right:13px;bottom:102px;z-index:2;transform-origin:center bottom}.dialogue-motion{will-change:transform}.dialogue-glass{background:rgba(18,23,22,.84);padding:18px 17px 19px;border:1px solid #a7bcb438;border-left:4px solid var(--mint);border-radius:7px;box-shadow:0 12px 25px #142c2730;color:#fff9eb;position:relative}.speaker{font:600 27px/1.12 Fraunces,Georgia,serif;margin:0 0 10px;color:var(--mint);letter-spacing:-.25px}.dialogue-copy{font-size:max(14.5px,calc(13px / var(--scale,1)));line-height:1.5;margin:0 0 18px;min-height:87px;overflow-wrap:break-word}.dialogue-buttons{display:flex;gap:8px}.dialogue-buttons button{font-size:max(14px,calc(13px / var(--scale,1)));min-height:max(46px,calc(44px / var(--scale,1)));line-height:1.2;flex:1;background:#30594b;border:1px solid #608875;color:#fff9eb;font-weight:700;border-radius:5px;box-shadow:0 3px 0 #16362b;opacity:1}.dialogue-buttons button:hover{background:#3b6a58}.dialogue-buttons button:active{box-shadow:none;translate:0 2px}.dialogue-buttons button.secondary{background:#f3eddd;border-color:#dad7c4;color:#263b34;box-shadow:0 3px 0 #9aab9b}.direction-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:16px 0 0;font-size:12px;color:#5d7062}.direction-meta span{max-width:210px;line-height:1.5}.direction-meta button{flex:none}.variant-b .actor-anchor{height:433px;width:258px;left:-9px;bottom:104px}.variant-b .dialogue-anchor{left:77px;right:13px;bottom:100px}.variant-b .dialogue-glass{background:rgba(10,14,13,.74);border-left-color:#67dc87;padding:19px 17px 20px}.variant-b .speaker{color:#67dc87;font-family:Arial,sans-serif;font-size:26px;font-weight:700}.variant-b .dialogue-copy{min-height:109px}.variant-c .actor-anchor{height:477px;width:284px;left:74px;bottom:123px}.variant-c .dialogue-glass{background:linear-gradient(rgba(12,19,17,.72),rgba(12,19,17,.88));border-left-color:#9bd6b5;padding:19px 20px 21px}.variant-c .speaker{font-size:30px;color:#9bd6b5}.variant-d .actor-anchor{height:451px;width:274px;left:13px;bottom:145px}.variant-d .dialogue-glass{background:rgba(12,17,15,.70);padding:18px 19px 18px;border-left-color:#86d4b5}.variant-d .dialogue-copy{margin-bottom:0}.variant-d .dialogue-anchor{bottom:98px}.variant-d .dialogue-buttons{margin-top:12px;position:relative}.variant-d .speaker{color:#86d4b5}.variant-d .money-demo,.variant-d .objective-demo{background:#101d17b3;color:#fff9eb;border-color:#86d4b5}.variant-d .money-demo em{color:#d8e3d8}.variant-d .radio-demo{color:#dfe7df}.rook-scene .speaker{color:#e5b665}.rook-scene .dialogue-glass{border-left-color:#e5b665}.rook-scene .actor-anchor{width:260px}.rook-scene .dialogue-copy{min-height:109px}.baseline-img{display:none;width:100%;height:100%;position:absolute;inset:0;z-index:10}.show-baseline .baseline-img{display:block}.show-baseline .dialogue-buttons{visibility:hidden}.comparison.is-focused{grid-template-columns:minmax(0,450px);justify-content:center}.comparison.is-focused .direction:not(.focused){display:none}.comparison.is-focused .direction-description{max-width:none;min-height:0}.comparison.is-focused .direction-heading{justify-content:center}.comparison.is-focused .direction-description{text-align:center}.entering .actor-anchor{animation:actor-arrive .48s cubic-bezier(.22,.82,.25,1.12) both}.entering .dialogue-anchor{animation:panel-arrive .38s .08s cubic-bezier(.2,.8,.25,1) both}@keyframes actor-arrive{from{translate:-340px 24px;opacity:0}to{translate:0 0;opacity:1}}@keyframes panel-arrive{from{translate:0 70px;opacity:0}to{translate:0 0;opacity:1}}.still .actor-anchor,.still .dialogue-anchor{animation:none}.fuel-study{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin:78px auto 60px;padding:50px clamp(0px,5vw,90px);border-top:1px solid #c3d0c5;max-width:1280px}.small-label{font-size:13px;color:#5b7565}.fuel-copy h2{font:600 clamp(34px,4vw,54px)/1.04 Fraunces,Georgia,serif;letter-spacing:-1.4px;margin:17px 0 25px}.fuel-copy p{font-size:16px;line-height:1.6;max-width:480px;color:#506758}.fuel-copy strong{color:#233b34}.fuel-actions{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 26px}.solid-review{background:#30594b;border-color:#30594b;color:#fff9eb}.solid-review:hover{background:#234b3d;color:#fff9eb}.fuel-slider{display:grid;grid-template-columns:1fr auto;gap:9px;font-size:13px;max-width:390px}.fuel-slider input{grid-column:1 / -1;grid-row:2;width:100%;accent-color:#9d6d28;min-height:30px;cursor:pointer}.fuel-slider output{font-variant-numeric:tabular-nums}.fuel-copy .fuel-status{font-size:13px;min-height:40px;color:#365b45;margin-top:18px}.fuel-copy .prototype-note{font-size:12px;color:#6a7a6d;border-top:1px solid #c6d0c6;padding-top:17px;max-width:380px}.fuel-phone-wrap{max-width:390px;width:100%;margin:auto}.fuel-world{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.fuel-fade{position:absolute;inset:0;background:#a7b5b0;opacity:0;z-index:3;pointer-events:none}.race-hud{position:absolute;left:12px;right:12px;top:14px;padding:12px 15px 13px;background:#f3eddd;color:#263e35;border-radius:7px;border:1px solid #acb7a6;box-shadow:0 6px 15px #294e3825;z-index:2}.race-heading{display:flex;justify-content:space-between;font-size:11px;color:#5b7161;border-bottom:1px solid #bec7b7;padding-bottom:9px}.race-instruments{display:flex;justify-content:space-between;align-items:center;padding-top:10px}.speed{display:flex;align-items:baseline;gap:7px}.speed strong{font-size:51px;line-height:1;letter-spacing:-2px}.speed span{font-size:10px;font-weight:600}.fuel-instrument{width:106px}.fuel-title{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;margin-bottom:5px}.fuel-title svg{width:20px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}.fuel-meter{height:12px;border:1px solid #849785;background:#cbd2c1;border-radius:3px;overflow:hidden;padding:2px}.fuel-fill{height:100%;width:62%;background:#457963;transform-origin:left;border-radius:1px}.fuel-ends{display:flex;justify-content:space-between;font-size:9px;margin-top:3px;color:#697b6d}.road-distance{display:flex;justify-content:space-between;font-size:11px;margin-top:9px;color:#526a5b}.race-controls-demo{position:absolute;bottom:25px;left:12px;right:12px;display:grid;grid-template-columns:1fr 1fr 2.1fr;gap:8px;color:#30594b;z-index:2}.race-controls-demo>span{height:51px;background:#f3eddd;border:1px solid #9ba791;border-radius:6px;box-shadow:0 3px 0 #576d5b;display:flex;align-items:center;justify-content:center;font-size:24px}.race-controls-demo .boost-demo{font-size:13px;font-weight:700;gap:17px;background:#e5b665;color:#493817;box-shadow:0 3px 0 #91713d}.boost-demo small{font-size:10px;font-weight:400}.going-home{position:absolute;top:48%;left:0;right:0;text-align:center;color:#fff9eb;z-index:4;font:600 22px/1.3 Fraunces,Georgia,serif;letter-spacing:.3px;text-shadow:0 2px 4px #223f35,0 0 16px #122a20;opacity:0;pointer-events:none}.home-trail{margin-left:3px}.home-note{position:absolute;bottom:110px;width:100%;text-align:center;color:#fff9eb;text-shadow:0 1px 4px #163628;font-size:14px;opacity:0;z-index:4}.reference-notes{border-top:1px solid #c3d0c5;padding:25px 0 30px}.reference-notes summary{cursor:pointer;font:600 20px Fraunces,Georgia,serif;min-height:40px}.reference-content{display:grid;grid-template-columns:minmax(0,2fr) minmax(190px,1fr);gap:36px;padding-top:20px;max-width:1080px}.reference-content h3{font-size:16px}.reference-content p{font-size:14px;line-height:1.65;max-width:670px;color:#576f5e}.reference-content figure{margin:0;max-width:270px;justify-self:center}.reference-content img{width:100%;max-height:370px;object-fit:contain;background:#d5e1dc;border:1px solid #bdcbbf}.reference-content figcaption{font-size:12px;color:#5c7061;margin-top:10px}.source-note{grid-column:1/-1;padding-top:16px;border-top:1px solid #c3d0c5}.source-note p{font-size:12px;max-width:1000px}footer{font-size:12px;padding-top:20px;padding-bottom:35px;color:#657769;border-top:1px solid #cbd4cc}
@media(min-width:1500px){.comparison{gap:32px}.direction-description{min-height:38px}}
@media(max-width:1150px){.comparison{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 28px;max-width:850px;margin-inline:auto}.review-tools{align-items:flex-start;flex-direction:column}.direction-heading,.direction-description,.direction-meta{max-width:390px;margin-left:auto;margin-right:auto}.fuel-study{gap:40px;padding-inline:0}.intro{align-items:start}.intro h1{font-size:36px}}
@media(max-width:620px){.page-header,main,footer{padding-left:18px;padding-right:18px}.page-header{height:62px}.brand{font-size:19px}.brand span{display:none}.jump-link{font-size:12px}.intro{display:block;padding-top:28px}.intro h1{font-size:33px}.intro p{font-size:14px}.intro .study-status{text-align:left;margin-top:12px;font-size:11px}.review-tools{gap:12px;padding:12px 0}.scene-picker{width:100%;justify-content:space-between}.scene-picker select{max-width:220px;min-width:0;flex:1}.tool-buttons{display:grid;grid-template-columns:1fr 1fr;width:100%}.tool-buttons button{padding:9px;font-size:12px}.comparison{grid-template-columns:minmax(0,1fr);gap:38px;max-width:390px}.direction h2{font-size:23px}.direction-description{min-height:0}.fuel-study{grid-template-columns:1fr;gap:28px;margin:45px auto 30px;padding-top:33px}.fuel-copy h2{font-size:38px}.fuel-copy p{font-size:14px}.fuel-copy .prototype-note{max-width:none}.fuel-phone-wrap{max-width:360px}.reference-content{grid-template-columns:1fr}.reference-content figure{max-width:220px}.reference-content h3{margin-top:0}.source-note{grid-column:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.entering .actor-anchor,.entering .dialogue-anchor{animation:none}.world-shade{transition:none}}

/* Five button treatments share the selected B layout and its exact motion. */
.comparison{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1280px;margin-inline:auto;gap:40px 28px}
.direction-heading,.direction-description,.direction-meta{max-width:390px;margin-left:auto;margin-right:auto}
.direction-description{min-height:39px}
.comparison:not(.is-focused) .phone{aspect-ratio:390 / 564}
.comparison:not(.is-focused) .screen{top:calc(-280px * var(--scale,1))}
.comparison.is-focused{grid-template-columns:minmax(0,450px)}
.button-option{--character-accent:#67dc87;--character-edge:#789682;--character-muted:#52695a;--character-fill:#102219;--face:#0b110d;--button-edge:#52695a}
.button-option .letter{width:33px;height:33px;background:#263b34;border-color:#263b34;color:#f3eddd;font-size:12px}
.button-option .speaker{color:var(--character-accent)}
.button-option .dialogue-glass{border-left-color:var(--character-accent)}
.button-option .dialogue-buttons{gap:7px;align-items:stretch}
.button-option .dialogue-buttons .ink-button{
  position:relative;isolation:isolate;flex:1.65;min-width:0;
  min-height:max(57px,calc(46px / var(--scale,1)));padding:13px 15px 16px;
  background:transparent;border:0;border-radius:3px;box-shadow:none;
  color:#fff9eb;font:700 max(16px,calc(14px / var(--scale,1)))/1.2 Arial,Helvetica,sans-serif;
  transform-origin:center;transition:translate .1s;
}
.button-option .dialogue-buttons .ink-button.secondary{
  --face:#090f0c;--button-edge:#46554b;
  flex:1;background:transparent;border:0;box-shadow:none;color:#ece7db;
  font-size:max(15px,calc(13px / var(--scale,1)));
}
.button-ink{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1}
.button-ink path{stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;fill:none}
.button-ink .ink-shadow{fill:#060907;stroke:#060907;stroke-width:1}
.button-ink .ink-fill{fill:var(--face);stroke:var(--button-edge);stroke-width:1.15}
.button-label{position:relative;display:block;text-wrap:balance}
.option-1{--face:var(--character-fill);--button-edge:var(--character-muted)}
.option-1 .ink-fill{stroke-width:1.2}
.option-2{--face:#101713;--button-edge:var(--character-edge)}
.option-2 .ink-shadow{display:none}
.option-2 .ink-fill{stroke-width:1}
.option-3{--face:#0b110d;--button-edge:#060b08}
.option-3 .ink-fill{stroke-width:1.8}
.option-3 .ink-shadow{display:none}
.edge-mark{stroke:var(--character-edge);stroke-width:.7}
.dry-mark{stroke:var(--character-muted);stroke-width:.55}
.option-4{--face:#111713;--button-edge:#060b08}
.option-4 .ink-shadow{display:none}
.option-4 .dialogue-buttons .ink-button{font-family:Fraunces,Georgia,serif;font-weight:600}
.option-4 .edge-mark{stroke-width:.75}
.frame-mark{stroke:var(--character-muted);stroke-width:.65}
.option-5{--face:#0b100d;--button-edge:#060907}
.option-5 .ink-fill{stroke-width:2}
.option-5 .ink-shadow{display:none}
.option-5 .edge-mark{stroke:var(--character-muted);stroke-width:.9}
.charcoal-mark{stroke:var(--character-muted);stroke-width:.65}
.secondary .edge-mark,.secondary .frame-mark{stroke:#68756b}
.secondary .dry-mark,.secondary .charcoal-mark{stroke:#3e4d42}
.button-option .dialogue-buttons .ink-button:hover{background:transparent;translate:0 -1px}
.button-option .dialogue-buttons .ink-button:hover .ink-fill{stroke:var(--character-edge)}
.button-option .dialogue-buttons .ink-button:active{translate:0 2px;box-shadow:none}
.button-option .dialogue-buttons .ink-button:focus-visible{outline:2px solid var(--character-accent);outline-offset:4px}
/* B3/B5 keep their rough shapes in plain ink, without colored edge highlights. */
.button-option:is(.option-3,.option-5) .button-ink :is(.ink-fill,.edge-mark,.dry-mark,.charcoal-mark){stroke:#070707}
.button-option:is(.option-3,.option-5) .dialogue-buttons .ink-button:hover .ink-fill{stroke:#070707}
.button-option:is(.option-3,.option-5) .dialogue-buttons .ink-button:focus-visible{outline-color:#fff9eb}
@media(min-width:1700px){.comparison{grid-template-columns:repeat(5,minmax(0,1fr));max-width:1720px;gap:24px}.direction-description{min-height:57px}}
@media(max-width:1150px){.comparison{grid-template-columns:repeat(2,minmax(0,1fr));max-width:850px}}
@media(max-width:620px){.comparison{grid-template-columns:minmax(0,1fr);max-width:390px}.direction-description{min-height:0}}
@media(prefers-reduced-motion:reduce){.button-option .dialogue-buttons .ink-button{transition:none}}

.button-review{position:relative}
.option-switcher{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 0;background:var(--page);border-bottom:1px solid #b4c3b7;margin-top:10px}
.option-switcher>strong{font-size:13px;white-space:nowrap}
.option-choices{display:flex;flex-wrap:wrap;gap:7px;flex:1}
.option-choices button{white-space:nowrap;min-height:46px}
.option-choices button span{font-weight:400;margin-left:4px}
.option-choices button[aria-pressed=true]{box-shadow:inset 0 -3px 0 #152f23}
.comparison.is-focused .direction-description{min-height:38px}
.button-review .direction{scroll-margin-top:95px}
@media(max-width:620px){
  .option-switcher{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 0}
  .option-switcher>strong{grid-column:1;grid-row:1}
  #compare-all{grid-column:2;grid-row:1;padding:8px 12px}
  .option-choices{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
  .option-choices button{padding:8px;font-size:14px}
  .option-choices button span{display:none}
  .button-review .direction{scroll-margin-top:140px}
}
