@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500&display=swap');
:root{color-scheme:dark;--gold:#e4c69d;--serif:'Noto Serif SC',Georgia,serif}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:#121c29;color:#ece4d6;font:16px/1.8 system-ui,sans-serif}a{color:var(--gold);text-decoration:none}header,main,footer{max-width:1450px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:27px 5%;border-bottom:1px solid #fff2}.brand{font:29px Georgia,serif}header>a:last-child{font-size:14px}main{padding:30px 5% 0}.intro{margin-bottom:25px}.eyebrow{font-size:12px;letter-spacing:.16em;color:#c3ae90}h1{font:400 clamp(32px,3.5vw,48px)/1.5 var(--serif);margin:0}.intro>p:last-child{color:#a7b4c2;font-size:14px}.intro br{display:none}.drive{border:1px solid #e3c39125;border-radius:15px;overflow:hidden;background:#1b2735}.car-scene{position:relative;isolation:isolate;aspect-ratio:16/9;overflow:hidden;touch-action:none;overscroll-behavior:contain}.car-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.outside{transform:scale(var(--road-scale,1)) translateX(var(--road-pan,0%));transform-origin:50% 42%;will-change:transform}.interior{clip-path:polygon(0 0,20% 0,21% 52%,100% 59%,100% 100%,0 100%)}#coldAir{position:absolute;inset:0;background:linear-gradient(105deg,#c3dbec25,transparent 40%);opacity:var(--window-open,.7);pointer-events:none;transition:opacity .3s}.warmth{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 110%,#b7583738,transparent 70%);opacity:0;pointer-events:none;transition:opacity 1.5s}.scarf-on .warmth{opacity:1}.entry-shade{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% 75%,#07111d11,#07111dbb);pointer-events:none;transition:opacity 1s}.awaiting .entry-shade{opacity:1}button{font:inherit;cursor:pointer;color:var(--gold);border:1px solid #e1c28e55;background:#e1c28e0c;border-radius:25px;min-height:44px;padding:9px 16px}button:focus-visible,a:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.spot{position:absolute;z-index:5;width:46px;height:46px;transform:translate(-50%,-50%);padding:0;border:0;background:none;touch-action:none}.spot>span{width:28px;height:28px;display:grid;place-items:center;margin:auto;border:1px solid #f5d9afbb;border-radius:50%;font-size:0;box-shadow:0 0 0 5px #f5d9af12;background:#1d2a3422}.spot.guided>span{animation:pulse 2s ease-in-out infinite}.radio-spot{left:60%;top:75%}.awaiting .radio-spot>span{font-size:23px;width:48px;height:48px;background:var(--gold);color:#263240}.scarf-spot{left:89%;top:86%}.fog-spot{left:50%;top:35%}.drive-spot{left:25%;top:79%}.drive-spot>span,.window-spot>span{font-size:30px;border:0;box-shadow:none;text-shadow:0 2px 10px #000;animation:upCue 1.8s infinite}.window-spot{left:8%;top:52%}.scarf-prop{position:absolute;left:70%;top:67%;width:35%;height:32%;padding:0;border:0;border-radius:0;background:none;z-index:7;transform:translate(-50%,-50%);touch-action:none;filter:drop-shadow(0 10px 10px #0008);transition:opacity .6s}.scarf-prop img{width:100%;height:100%;object-fit:contain;pointer-events:none}.scarf-prop.wearing{left:50%!important;top:104%!important;width:80%;height:45%;transition:top .7s,left .7s,width .7s}#windshield{position:absolute;left:13%;top:7%;width:75%;height:55%;z-index:4;touch-action:none;cursor:crosshair;clip-path:polygon(8% 0,90% 0,100% 100%,0 100%)}.below{padding:0 22px 18px}#driveLine{font:16px/1.9 var(--serif);min-height:78px;text-align:center;padding:23px 5px 10px;margin:0;color:#e2d3bb}.step-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.controls{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:17px}.controls button{font-size:13px;min-height:38px;padding:5px 11px}#unsentForm{max-width:600px;margin:10px auto 15px}label{display:block;margin:10px 0;font-size:14px}textarea{width:100%;background:#111d2b;color:#eee3d4;border:1px solid #c7a97a66;border-radius:9px;font:16px/1.8 system-ui,sans-serif;padding:13px;resize:vertical}#unsentForm>button{margin:12px 8px 0 0}.fine{font-size:13px;color:#9baaba}#ending{padding:12px 0 18px}#unsentNote{font:18px/1.9 var(--serif);max-width:680px;margin:10px auto 22px;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere}footer{padding:24px 0;display:flex;justify-content:space-between;gap:20px;color:#95a5b6;font-size:12px}.intro,.car-scene,.car-scene *,#driveLine,.step-actions,.controls{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.car-scene img{-webkit-user-drag:none}textarea{-webkit-user-select:text;user-select:text}.controls button,.step-actions button{touch-action:manipulation}@keyframes pulse{50%{box-shadow:0 0 0 10px #f5d9af10,0 0 25px #f5d9af66;opacity:.6}}@keyframes upCue{50%{transform:translateY(-7px)}}@media(max-width:750px){header{padding:20px}.brand{font-size:25px}main{padding:25px 14px 0}.eyebrow{font-size:11px;letter-spacing:.1em}.below{padding:0 15px 15px}#driveLine{font-size:15px;min-height:92px}.controls{justify-content:center}.controls button{font-size:12px}footer{display:block}footer>span{display:block;margin-bottom:8px}.scarf-prop{width:42%;height:38%}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.side-glass{position:absolute;left:0;bottom:40%;width:13%;height:calc((1 - var(--window-open,.7))*60%);background:linear-gradient(120deg,#d9eaff33,#8bacd012);border-top:1px solid #dbeeff55;pointer-events:none;transition:height .1s}.mirror{clip-path:polygon(48% 0,74% 0,74% 17%,48% 17%)}

#steeringWheel{position:absolute;left:5.5%;top:49%;width:40%;height:71%;object-fit:contain;z-index:3;transform:rotate(var(--steer-angle,0deg));transform-origin:50% 50%;pointer-events:none;filter:brightness(.68) sepia(.12);transition:transform .13s ease-out}
.drive-spot{left:25.5%;top:82%;width:35%;height:55%;border-radius:50%;z-index:5;cursor:grab}.drive-spot:active{cursor:grabbing}.drive-spot>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#lightTrails{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;clip-path:polygon(20% 0,100% 0,100% 59%,21% 52%)}
.car-scene.moving .outside{filter:brightness(1.08) saturate(1.12)}.outside{transition:filter .3s}.car-scene.moving #coldAir{opacity:calc(var(--window-open,.7)*.8)}

/* Independent exterior and cabin layers: scenery advances behind the glass. */
.outside{transform-origin:43% 42%;transform:scale(var(--road-scale,1)) translateX(var(--road-pan,0%));transition:transform .07s linear,filter .3s}
.car-scene .interior{clip-path:none;transform:translateY(var(--cabin-bob,0px)) rotate(var(--cabin-roll,0deg));transform-origin:50% 85%;transition:transform .12s ease-out}
#steeringWheel{transform:translateY(var(--cabin-bob,0px)) rotate(calc(var(--steer-angle,0deg) + var(--cabin-roll,0deg)));transition:transform .12s ease-out}
#lightTrails{clip-path:none}.car-scene.moving .outside{filter:brightness(1.05) saturate(1.08)}

#phoneOnSeat{position:absolute;inset:auto;left:70%;top:75%;width:8%;height:21%;object-fit:contain;transform:rotate(-18deg);z-index:3;pointer-events:none;filter:drop-shadow(0 0 12px #8abbe64d)}.phone-spot{left:74%;top:85%}
.phone-overlay{position:fixed;inset:0;z-index:100;background:#060d16b8;backdrop-filter:blur(7px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;overflow:auto;overscroll-behavior:contain}.phone-object{position:relative;width:min(330px,80vw);aspect-ratio:1/1.92;flex-shrink:0;filter:drop-shadow(0 20px 35px #0009)}.phone-object>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;-webkit-user-drag:none}.phone-screen{position:absolute;left:10%;right:10%;top:11%;bottom:10%;display:flex;flex-direction:column;overflow:auto;color:#e0e8ed;background:#101923;border-radius:7px;padding:6px 9px}.phone-top{display:flex;align-items:center;gap:7px;border-bottom:1px solid #fff2;padding-bottom:8px}.phone-top>span{font-size:14px}.phone-top button{min-width:36px;min-height:38px;padding:0;font-size:27px;border:0}.phone-context{color:#8d9fae;font-size:13px;margin:15px 0}.phone-screen label{font-size:14px;margin-top:0}.phone-screen textarea{font-size:16px;min-height:115px;padding:10px;background:#192735;line-height:1.6}.phone-screen button{font-size:14px;line-height:1.5;border-radius:12px;padding:9px 10px;width:100%;margin-top:9px}.phone-screen .phone-primary{background:#8eadb6;color:#132029;border:0}.phone-screen .phone-link{border:0;background:none;color:#aebbc7;font-size:13px}.phone-disclosure{font-size:11px;color:#8795a1;margin-top:auto;padding-top:12px;line-height:1.7}.sms-bubble{font-size:16px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;background:#354e57;border-radius:15px 15px 4px 15px;padding:12px;margin:8px 0 12px;max-height:150px;overflow:auto}#phoneReceipt{font-size:12px;color:#95abb7;text-align:right}#phoneMood{font:15px/1.8 var(--serif);text-align:center;max-width:420px;color:#dacbb7;margin:0}.phone-overlay>p,.phone-top{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.phone-screen textarea{-webkit-user-select:text;user-select:text;touch-action:auto}.phone-overlay button{touch-action:manipulation}@media(max-height:740px){.phone-overlay{justify-content:flex-start}.phone-object{width:min(295px,80vw)}}
/* The route advances through separate street blocks beneath the same cabin. */
.car-scene{overflow:clip}
.car-scene .outside,.car-scene .outside-next{transform-origin:43% 41%;will-change:transform,opacity;transition:none}
.car-scene .outside-next{opacity:0;pointer-events:none}
.headlight-beam{position:absolute;inset:38% 0 0;pointer-events:none;background:radial-gradient(ellipse at 46% 94%,#fff0c222,transparent 64%);mix-blend-mode:screen;opacity:.65}
#lightTrails{z-index:0}.car-scene .interior{z-index:1}
.passing-glow{position:absolute;inset:62% 0 0;z-index:2;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse at 12% 15%,rgba(var(--light-color,255,196,103),.7),transparent 63%),linear-gradient(100deg,transparent 35%,rgba(var(--light-color,255,196,103),.4));opacity:var(--passing-light,0)}
.car-scene .warmth,.car-scene #coldAir,.car-scene .side-glass{z-index:2}
.car-scene .entry-shade{z-index:3}
.car-scene .interior,#steeringWheel{transition:transform .06s linear}
#cruiseDrive[aria-pressed="true"]{background:#e1c28e25;border-color:#e1c28e99}
@media(prefers-reduced-motion:reduce){.outside,.outside-next{will-change:auto}.passing-glow{display:none}}
.car-scene.moving .outside-next{filter:brightness(1.05) saturate(1.08)}
.step-actions:has(#cruiseDrive){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px;margin-inline:auto}
@media(max-width:520px){.step-actions:has(#cruiseDrive){grid-template-columns:1fr}}
/* Turn the rim around its hub; the indicator stays upright. */
#steeringWheel{filter:brightness(.82) sepia(.08);transition:transform .035s linear}
.drive-spot>span{font-size:25px;color:#f3d5a5;background:#15202cc9;border:1px solid #e4c69d66;border-radius:50%;width:36px;height:36px;animation:none!important;transition:opacity .15s}
.car-scene.steering .drive-spot>span{opacity:0}
.drive-spot:active{cursor:grabbing}