*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111;color:#fff}
body{font-family:Inter,system-ui,sans-serif}#scene,.shade,#stars{position:fixed;inset:0;width:100%;height:100%}
#scene{background:center/cover;transform:scale(1.03);transition:opacity 1s;animation:drift 24s ease-in-out infinite alternate}
.shade{background:linear-gradient(#0003,#0000 45%,#0007);pointer-events:none}#stars{pointer-events:none;opacity:0}.night #stars{opacity:.55}
header{position:fixed;z-index:5;top:0;left:0;right:0;padding:34px 40px;display:flex;justify-content:space-between}
.brand{display:flex;gap:24px;align-items:center;font-size:13px;letter-spacing:.38em;text-shadow:0 2px 12px #000}.brand b{width:34px;height:1px;background:#fffc}
nav{display:flex;gap:24px}nav button{border:0;background:none;color:#fffc;cursor:pointer;min-width:50px;font-size:27px;text-shadow:0 2px 10px #000}
nav small{display:block;font-size:10px;letter-spacing:.12em;margin-top:7px}nav button.on{color:#fff;transform:translateY(-2px)}
main{position:fixed;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 20px}
.eyebrow{font-size:10px;letter-spacing:.32em;text-transform:uppercase;opacity:.65}h1{font:400 clamp(39px,4.1vw,68px)/1.05 Georgia,serif;letter-spacing:-.025em;margin:14px 0 0;text-shadow:0 3px 25px #0008}
#clock{font-size:clamp(25px,2.4vw,38px);font-weight:300;letter-spacing:.26em;margin:34px 0 20px}main i{width:min(340px,60vw);height:1px;background:#fff5}
.stay{font-size:11px;letter-spacing:.38em}.visit{position:fixed;z-index:4;left:34px;bottom:31px;padding:16px 22px;border:1px solid #fff2;background:#05070870;backdrop-filter:blur(10px);border-radius:6px;font-size:10px;letter-spacing:.16em}
.visit strong{display:block;font-size:17px;font-weight:300;letter-spacing:.22em;margin:9px 0 0 20px}.quote{position:fixed;z-index:4;right:38px;bottom:33px;text-align:right;font:italic 12px/1.9 Georgia,serif;letter-spacing:.08em;text-shadow:0 2px 12px #000}
.quote i{display:inline-block;width:35px;height:1px;background:#fffa}#next{position:fixed;z-index:6;right:38px;top:132px;width:38px;height:38px;border-radius:50%;border:1px solid #fff4;background:#0003;color:#fff;font-size:19px;cursor:pointer}
#toast{position:fixed;z-index:10;left:50%;bottom:110px;transform:translate(-50%,15px);opacity:0;padding:9px 14px;border-radius:20px;background:#0008;backdrop-filter:blur(10px);font-size:11px;letter-spacing:.1em;transition:.4s}#toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes drift{to{transform:scale(1.06) translate(.3%,-.2%)}}@media(max-width:720px){header{padding:24px 19px}.brand{font-size:10px;gap:12px}.brand b{width:20px}nav{gap:6px}nav button{min-width:33px;font-size:21px}nav small{display:none}
main{padding-bottom:145px}h1{font-size:clamp(38px,11vw,54px)}.eyebrow{display:none}#clock{font-size:22px}.visit{left:18px;bottom:20px;padding:12px}.quote{right:18px;bottom:22px;font-size:10px;max-width:42vw}#next{right:20px;top:80px}}

.madeby{font-size:10px;letter-spacing:.12em;text-transform:none;color:#ffffffa8}.madeby b{font-weight:500;color:#ffffffe8}
.mixer-toggle{position:fixed;z-index:7;right:38px;top:180px;width:40px;height:40px;border-radius:50%;border:1px solid #fff4;background:#0004;color:#fff;font-size:18px;cursor:pointer;backdrop-filter:blur(10px)}
.mixer{position:fixed;z-index:8;right:38px;top:230px;width:330px;max-height:calc(100vh - 260px);overflow:auto;padding:16px 17px 15px;border:1px solid #fff3;border-radius:10px;background:#050708d4;backdrop-filter:blur(18px);box-shadow:0 14px 45px #0007;opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:.22s}
.mixer.open{opacity:1;transform:none;pointer-events:auto}.mixer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:9px;letter-spacing:.25em;color:#fffd}
.mixer-head button{border:0;background:none;color:#fff;font-size:20px;cursor:pointer}
.transport{display:flex;gap:12px;align-items:center;padding:11px 0 14px;border-bottom:1px solid #fff2}.master-play{width:44px;height:44px;flex:0 0 44px;border-radius:50%;border:1px solid #fff5;background:#ffffff14;color:#fff;font-size:16px;cursor:pointer}
.timer-box{min-width:0;flex:1}.timer-options{display:flex;gap:4px;flex-wrap:wrap}.timer-options button{border:1px solid #fff2;background:#ffffff08;color:#fffb;border-radius:12px;padding:4px 7px;font-size:8px;cursor:pointer}.timer-options button.selected{background:#ffffff22;border-color:#fff6;color:#fff}
#countdown{margin-top:6px;font-size:9px;color:#fffa;font-variant-numeric:tabular-nums}
.sound-section{padding-top:13px}.section-title{font-size:8px;letter-spacing:.22em;color:#ffffff82;margin-bottom:8px}.sound-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sound-pick{min-height:32px;border:1px solid #fff2;background:#ffffff08;color:#fffc;border-radius:7px;padding:7px 8px;font-size:10px;text-align:left;cursor:pointer;transition:.15s}.sound-pick.on{background:#ffffff20;border-color:#fff6;color:#fff}.sound-pick:hover{background:#ffffff16}
.active-title{margin-top:17px;padding-top:13px;border-top:1px solid #fff2}.empty-mix{font-size:9px;color:#ffffff65;padding:6px 0}
.mix-row{display:grid;grid-template-columns:86px 1fr 25px;gap:8px;align-items:center;padding:7px 0}.mix-row label{font-size:9px;color:#fffd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mix-row output{font-size:8px;text-align:right;color:#fffa;font-variant-numeric:tabular-nums}.mix-row input{width:100%;height:2px;accent-color:white;cursor:pointer}
@media(max-width:720px){.mixer-toggle{right:20px;top:126px}.mixer{right:18px;top:174px;width:min(330px,calc(100vw - 36px));max-height:calc(100vh - 195px)}}

/* v9 Living Scenes */
.madeby{font-size:13px!important;letter-spacing:.11em!important;color:#ffffffe0!important;text-shadow:0 1px 4px #000,0 2px 12px #000c}
.madeby b{font-size:14px;font-weight:600!important;color:#fff!important;text-shadow:0 1px 5px #000,0 2px 14px #000d}

#sceneFx{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#sceneFx>div{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
#sceneFx .on{opacity:1}

/* Ortam: sıcak iç mekân ışığı. Screen blend yalnız parlak bölgeleri nazikçe yükseltir. */
.fx-light{background:
 radial-gradient(ellipse at 62% 38%,rgba(255,203,116,.23),transparent 28%),
 radial-gradient(ellipse at 32% 48%,rgba(255,184,92,.12),transparent 34%),
 linear-gradient(rgba(255,184,91,.055),rgba(255,155,70,.035));
 mix-blend-mode:screen;filter:saturate(1.08)}

/* Yağmur: ince diyagonal çizgiler iki hız katmanıyla hareket eder. */
.fx-rain{background-image:
 repeating-linear-gradient(104deg,transparent 0 18px,rgba(220,235,255,.16) 19px,transparent 20px 42px),
 repeating-linear-gradient(103deg,transparent 0 39px,rgba(230,242,255,.09) 40px,transparent 41px 73px);
 background-size:180px 260px,240px 330px;animation:rainMove .85s linear infinite}
@keyframes rainMove{to{background-position:-36px 260px,-24px 330px}}

/* Rüzgâr: çok seyrek, yumuşak parçacıklar. */
.fx-wind i{position:absolute;width:34px;height:2px;border-radius:50%;background:linear-gradient(90deg,transparent,#ffffff45,transparent);left:-50px;animation:windPass 7s linear infinite}
.fx-wind i:nth-child(1){top:18%;animation-delay:-1s}.fx-wind i:nth-child(2){top:31%;animation-delay:-4s;animation-duration:9s}.fx-wind i:nth-child(3){top:47%;animation-delay:-6s}.fx-wind i:nth-child(4){top:62%;animation-delay:-2s;animation-duration:10s}.fx-wind i:nth-child(5){top:74%;animation-delay:-7s;animation-duration:8s}.fx-wind i:nth-child(6){top:85%;animation-delay:-3s;animation-duration:11s}
@keyframes windPass{0%{transform:translateX(-5vw) translateY(0) rotate(-3deg);opacity:0}15%{opacity:.5}80%{opacity:.25}100%{transform:translateX(112vw) translateY(-28px) rotate(4deg);opacity:0}}

/* Dalgalar: alt bölümde sakin ışık yansıması. */
.fx-waves{top:48%!important;background:
 repeating-radial-gradient(ellipse at 50% 100%,transparent 0 16px,rgba(220,240,255,.09) 18px,transparent 21px 44px);
 filter:blur(1px);animation:waveGlow 5.5s ease-in-out infinite alternate}
@keyframes waveGlow{from{transform:translateX(-1.5%) scaleX(1.02);opacity:.28}to{transform:translateX(1.5%) scaleX(.99);opacity:.62}}

/* Ateş: alt köşelerden çok hafif sıcak titreşim. */
.fx-fire{background:
 radial-gradient(ellipse at 25% 100%,rgba(255,112,31,.24),transparent 38%),
 radial-gradient(ellipse at 76% 100%,rgba(255,173,60,.12),transparent 30%);
 mix-blend-mode:screen;animation:fireFlicker 2.2s ease-in-out infinite alternate}
@keyframes fireFlicker{0%{filter:brightness(.85);transform:scale(1)}35%{filter:brightness(1.08);transform:scale(1.005)}70%{filter:brightness(.94)}100%{filter:brightness(1.13);transform:scale(1.01)}}

@media(prefers-reduced-motion:reduce){.fx-rain,.fx-waves,.fx-fire,.fx-wind i{animation:none!important}}

/* v11 — Camp video; navigation appearance intentionally remains v9 */
.camp-video{
 position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
 opacity:0;visibility:hidden;pointer-events:none;transition:opacity .65s ease;
 background:#090705
}
body.camp-active .camp-video{opacity:1;visibility:visible}
body.camp-active #scene{opacity:0!important}
body.camp-active #sceneFx{opacity:0!important}
body.camp-active #campMode{color:#fff;transform:translateY(-2px)}
.madeby,.madeby b{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}

/* v12.2 runtime hardening */
.camp-video{z-index:2!important}
body.camp-active .shade{opacity:0}
body:not([data-scene-type]) nav button[data-s]{display:none}
body[data-scene-type="ambient"] nav button[data-s]:not([data-s="ambient"]),
body[data-scene-type="rain"] nav button[data-s]:not([data-s="rain"]),
body[data-scene-type="wind"] nav button[data-s]:not([data-s="wind"]),
body[data-scene-type="waves"] nav button[data-s]:not([data-s="waves"]),
body[data-scene-type="train"] nav button[data-s]:not([data-s="train"]){display:none!important}


/* v13 — office lamps: light comes from the bulb itself, not a full-scene tint */
.bulb-layer{
 position:fixed;
 inset:0;
 z-index:1;
 pointer-events:none;
 opacity:0;
 transition:opacity .45s ease;
}
.bulb-layer.on{opacity:1}
.photo-bulb{
 --lamp-scale:1;
 position:absolute;
 width:calc(9px * var(--lamp-scale));
 height:calc(9px * var(--lamp-scale));
 transform:translate(-50%,-50%);
 border-radius:50%;
 background:rgba(255,250,220,.98);
 box-shadow:
  0 0 calc(5px * var(--lamp-scale)) rgba(255,255,235,1),
  0 0 calc(16px * var(--lamp-scale)) rgba(255,220,145,.96),
  0 0 calc(42px * var(--lamp-scale)) rgba(255,178,75,.72),
  0 0 calc(90px * var(--lamp-scale)) rgba(255,145,48,.34),
  0 0 calc(160px * var(--lamp-scale)) rgba(255,128,35,.14);
 filter:brightness(1.18);
}
.photo-bulb::after{
 content:"";
 position:absolute;
 left:50%;top:50%;
 width:calc(70px * var(--lamp-scale));
 height:calc(70px * var(--lamp-scale));
 transform:translate(-50%,-50%);
 border-radius:50%;
 background:radial-gradient(circle,rgba(255,205,115,.30),rgba(255,165,65,.10) 45%,transparent 72%);
}
body.camp-active .bulb-layer{opacity:0!important}

/* v14 — exact ON/OFF scene crossfade */
.office-on-layer{
 position:fixed;
 inset:0;
 z-index:-4;
 background-position:center;
 background-size:cover;
 background-repeat:no-repeat;
 opacity:0;
 transform:scale(1.035);
 transition:opacity 1.15s cubic-bezier(.4,0,.2,1);
 pointer-events:none;
}
.office-on-layer.on{opacity:1}
body.camp-active .office-on-layer{opacity:0!important}

/* v14.1 — deterministic background stacking */
#scene{
 z-index:0!important;
}
.office-on-layer{
 z-index:1!important;
}
#campVideo,.camp-video{
 z-index:2!important;
}
.shade{
 z-index:3!important;
 pointer-events:none;
}
main,nav,.clock,.madeby,.sound-picker,.mixer,.mixer-toggle,.toast{
 position:relative;
 z-index:4;
}

/* v14.2 — light switch: instant OFF/ON, no visual fade */
.office-on-layer{
 transition:none!important;
}

/* v15 — Living Scene: Forest Rain */
.forest-rain-video{
 position:fixed;
 inset:0;
 width:100%;
 height:100%;
 object-fit:cover;
 object-position:center;
 z-index:1;
 opacity:0;
 pointer-events:none;
}
.forest-rain-video.on{opacity:1}
body.camp-active .forest-rain-video{opacity:0!important}
.office-on-layer{z-index:1!important}
#campVideo,.camp-video{z-index:2!important}

/* v15.1 — restore Sound/Mixer UI above all Living Scene layers */
#mixerToggle{
 display:flex!important;
 visibility:visible!important;
 opacity:1!important;
 position:fixed!important;
 right:18px!important;
 bottom:18px!important;
 z-index:10020!important;
 pointer-events:auto!important;
}
#mixer{
 position:fixed!important;
 right:18px!important;
 bottom:70px!important;
 z-index:10021!important;
 pointer-events:auto!important;
}
#mixer:not(.open){display:none!important}
#mixer.open{display:block!important}
body.camp-active #mixerToggle,
body.camp-active #mixer{
 z-index:10021!important;
}

/* v15.2 — mixer button alignment + single-handler panel */
#mixerToggle{
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 box-sizing:border-box!important;
 width:42px!important;
 height:42px!important;
 padding:0!important;
 margin:0!important;
 right:20px!important;
 bottom:20px!important;
 top:auto!important;
 position:fixed!important;
 font-family:Arial,sans-serif!important;
 font-size:21px!important;
 font-weight:400!important;
 line-height:1!important;
 text-align:center!important;
 text-indent:0!important;
 z-index:10020!important;
}
#mixer{
 right:20px!important;
 bottom:72px!important;
 top:auto!important;
 position:fixed!important;
 z-index:10021!important;
}
#mixer.open{
 display:block!important;
 opacity:1!important;
 transform:none!important;
 pointer-events:auto!important;
 visibility:visible!important;
}
#mixer:not(.open){
 display:none!important;
}

/* v15.3 — Focus control under scene refresh */
#mixerToggle{
 left:18px!important;
 right:auto!important;
 top:70px!important;
 bottom:auto!important;
 width:auto!important;
 min-width:104px!important;
 height:38px!important;
 padding:0 13px!important;
 display:flex!important;
 align-items:center!important;
 justify-content:flex-start!important;
 gap:8px!important;
 border-radius:19px!important;
 font-size:14px!important;
 line-height:1!important;
 white-space:nowrap!important;
}
#mixerToggle .focus-note{
 display:inline-flex;
 width:18px;
 height:18px;
 align-items:center;
 justify-content:center;
 font-size:18px;
 line-height:1;
}
#mixerToggle .focus-label{
 display:inline-block;
 font-size:12px;
 letter-spacing:.03em;
 line-height:1;
}
#mixer{
 left:18px!important;
 right:auto!important;
 top:116px!important;
 bottom:auto!important;
}
@media (max-width:640px){
 #mixerToggle{
  left:12px!important;
  top:64px!important;
 }
 #mixer{
  left:12px!important;
  top:108px!important;
  max-width:calc(100vw - 24px)!important;
 }
}

/* v15.4 — Odaklan directly under Sahneyi Yenile */
#mixerToggle{
 left:auto!important;
 right:18px!important;
 top:70px!important;
 bottom:auto!important;
}
#mixer{
 left:auto!important;
 right:18px!important;
 top:116px!important;
 bottom:auto!important;
}
@media (max-width:640px){
 #mixerToggle{
  left:auto!important;
  right:12px!important;
  top:64px!important;
 }
 #mixer{
  left:auto!important;
  right:12px!important;
  top:108px!important;
 }
}

/* v15.5 — Odaklan below the complete top-right scene controls */
#mixerToggle{
 left:auto!important;
 right:18px!important;
 top:166px!important;
 bottom:auto!important;
 z-index:10020!important;
}
#mixer{
 left:auto!important;
 right:18px!important;
 top:212px!important;
 bottom:auto!important;
 z-index:10021!important;
}
@media (max-width:640px){
 #mixerToggle{
  left:auto!important;
  right:12px!important;
  top:154px!important;
 }
 #mixer{
  left:auto!important;
  right:12px!important;
  top:198px!important;
  max-width:calc(100vw - 24px)!important;
 }
}

/* v15.6 — requested order:
   Kamp Modu
   Sahneyi Yenile
   Odaklan
*/
#campMode{
 order:1!important;
}
#next{
 order:2!important;
}
#mixerToggle{
 left:auto!important;
 right:18px!important;
 top:122px!important;
 bottom:auto!important;
 z-index:10020!important;
}
#mixer{
 left:auto!important;
 right:18px!important;
 top:168px!important;
 bottom:auto!important;
 z-index:10021!important;
}
@media (max-width:640px){
 #mixerToggle{
  left:auto!important;
  right:12px!important;
  top:116px!important;
 }
 #mixer{
  left:auto!important;
  right:12px!important;
  top:160px!important;
 }
}

/* v15.7 — Odaklan clearly below Sahneyi Yenile */
#mixerToggle{
 left:auto!important;
 right:18px!important;
 top:188px!important;
 bottom:auto!important;
 z-index:10020!important;
}
#mixer{
 left:auto!important;
 right:18px!important;
 top:234px!important;
 bottom:auto!important;
 z-index:10021!important;
}
@media (max-width:640px){
 #mixerToggle{
  left:auto!important;
  right:12px!important;
  top:180px!important;
 }
 #mixer{
  left:auto!important;
  right:12px!important;
  top:224px!important;
 }
}

/* v15.9 — Camp Mode */
body.camp-active #next{
 display:none!important;
}
.camp-sound-hidden{
 display:none!important;
}

/* v15.13 recovery: preserve known-good desktop positions */
#mixerToggle{right:18px!important;left:auto!important;top:188px!important}
#mixer{right:18px!important;left:auto!important;top:234px!important}
.living-scene-video{
 position:fixed;inset:0;width:100%;height:100%;object-fit:cover;
 z-index:1;opacity:0;visibility:hidden;pointer-events:none
}
.living-scene-video.on{opacity:1;visibility:visible}
body.camp-active .living-scene-video{opacity:0!important;visibility:hidden!important}

@media(max-width:720px){
 h1{font-size:clamp(34px,10vw,48px);line-height:1.05}
 #clock{font-size:clamp(19px,5.5vw,24px)}
 nav button{min-width:40px;min-height:42px;touch-action:manipulation}
 nav small{display:none}
 #next{right:12px!important;top:76px!important}
 #mixerToggle{right:12px!important;left:auto!important;top:180px!important}
 #mixer{left:12px!important;right:12px!important;top:224px!important;width:auto!important;
        max-width:none!important;max-height:calc(100vh - 240px)!important;overflow:auto!important}
 .sound-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* v15.14 — mobile controls under "İstediğin kadar kal" */
@media (max-width:720px){
  #next{
    position:fixed!important;
    left:12px!important;
    right:auto!important;
    top:auto!important;
    bottom:calc(94px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    border-radius:0!important;
    font-size:0!important;
    line-height:1!important;
    opacity:.78;
  }
  #next::after{
    content:"Sahneyi Yenile";
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.92);
    white-space:nowrap;
  }

  #mixerToggle{
    position:fixed!important;
    left:12px!important;
    right:auto!important;
    top:auto!important;
    bottom:calc(66px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    border-radius:0!important;
    font-size:0!important;
    line-height:1!important;
    opacity:.78;
  }
  #mixerToggle::after{
    content:"Odaklan";
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.92);
    white-space:nowrap;
  }

  /* Panel opens above the new bottom-left Odaklan link. */
  #mixer{
    left:12px!important;
    right:12px!important;
    top:auto!important;
    bottom:calc(104px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    max-height:58vh!important;
    overflow:auto!important;
  }

  /* Camp Mode still hides scene refresh. */
  body.camp-active #next{display:none!important}
}

/* v15.15 — center mobile controls under "İstediğin kadar kal" */
@media (max-width:720px){
  /* Keep Sahneyi Yenile as its original icon; cancel v15.14 text replacement. */
  #next{
    left:calc(12px + 24vw)!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    bottom:calc(91px + env(safe-area-inset-bottom))!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.18)!important;
    background:rgba(8,12,16,.34)!important;
    box-shadow:none!important;
    border-radius:50%!important;
    font-size:22px!important;
    line-height:40px!important;
    opacity:.9;
  }
  #next::after{content:none!important}

  /* Odaklan centered on the same axis, directly below the icon. */
  #mixerToggle{
    left:calc(12px + 24vw)!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    bottom:calc(66px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    border-radius:0!important;
    font-size:0!important;
    line-height:1!important;
    opacity:.82;
  }
  #mixerToggle::after{
    content:"Odaklan"!important;
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.92);
    white-space:nowrap;
  }

  body.camp-active #next{display:none!important}
}


/* v15.16 — mobile controls follow the central content flow */
@media (max-width:720px){
  main{
    padding-bottom:80px;
  }
  .stay{
    margin-bottom:14px;
  }
  #next{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    flex:0 0 40px;
    margin:0 0 8px!important;
  }
  #mixerToggle{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    flex:0 0 auto;
    margin:0!important;
  }
  body.camp-active #next{display:none!important}
}


/* v15.17 — mobile flow order fix */
@media (max-width:720px){
  /* v15.6 had given #next order:2; reset both controls so DOM order wins:
     stay -> refresh -> focus */
  #next{order:initial!important;}
  #mixerToggle{order:initial!important;}
}


/* v15.20 — use the real Odaklan label on mobile; prevent legacy duplicate pseudo text */
@media (max-width:720px){
  #mixerToggle::after{content:none!important;}
  #mixerToggle .focus-note,#mixerToggle .focus-label{
    display:inline!important;
    font-size:10px!important;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.92);
    white-space:nowrap;
  }
  #mixerToggle .focus-note{margin-right:4px;}
}


/* v15.22 — Journey icon + mobile Focus note sizing */
.journey-control .journey-icon{
  width:29px;
  height:29px;
  display:block;
  margin:0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media(max-width:720px){
  .journey-control .journey-icon{width:23px;height:23px;}
  #mixerToggle .focus-note{
    font-size:15px!important;
    line-height:10px!important;
    vertical-align:-1px;
    margin-right:5px!important;
    letter-spacing:0!important;
  }
  #mixerToggle .focus-label{font-size:10px!important;}
}

/* v15.23 — mobile Focus is icon-only, matched to Refresh visual size */
@media(max-width:720px){
  #mixerToggle .focus-label{display:none!important;}
  #mixerToggle .focus-note{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    margin:0!important;
    font-size:19px!important;
    line-height:1!important;
    letter-spacing:0!important;
    vertical-align:0!important;
  }
}


/* v15.24 — circular mobile Focus icon + matching line icons for Fog/Waves */
.scene-line-control .scene-line-icon{
  width:29px;
  height:29px;
  display:block;
  margin:0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media(max-width:720px){
  .scene-line-control .scene-line-icon{width:23px;height:23px;}
  #mixerToggle{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.18)!important;
    background:rgba(8,12,16,.34)!important;
    border-radius:50%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    opacity:.9;
  }
  #mixerToggle .focus-note{
    width:auto!important;
    height:auto!important;
    font-size:22px!important;
    line-height:1!important;
    transform:translateY(-1px);
  }
}

/* v15.33 — Pomodoro timer + break placement */
.pomodoro-option{white-space:nowrap}
.pomodoro-break{display:none;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 2px 14px #000c}
#pomodoroBreakDesk.show{display:block;margin-top:8px;font-size:12px;letter-spacing:.12em;padding:7px 12px;border:1px solid #ffffff2b;border-radius:18px;background:#05070845;backdrop-filter:blur(8px)}
#pomodoroBreakMobile{display:none}
@media(max-width:720px){
 #pomodoroBreakDesk{display:none!important}
 .visit{min-width:196px;text-align:center}
 .visit-label{display:block}
 .visit strong{margin:9px 0 0!important;text-align:center}
 #pomodoroBreakMobile.show{display:flex;position:fixed;z-index:6;left:50vw;bottom:92px;transform:translateX(-50%);align-items:center;justify-content:center;width:max-content;max-width:calc(100vw - 36px);margin:0;padding:7px 12px;border-bottom:1px solid #ffffff20;font-size:11px;letter-spacing:.09em;text-align:center;white-space:nowrap}
}


/* v15.34 — temporary Pomodoro test controls */
.pomodoro-test-tools{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.pomodoro-test-tools button{border:1px dashed #ffffff35;background:#ffffff08;color:#fffc;border-radius:12px;padding:5px 8px;font-size:8px;cursor:pointer;transition:.18s}
.pomodoro-test-tools button:hover{background:#ffffff18;border-color:#ffffff70;color:#fff}
@media(max-width:720px){.pomodoro-test-tools{gap:4px}.pomodoro-test-tools button{font-size:8px;padding:5px 7px}}


/* v16.0 — Driving Mode entry */
nav .drive-mode-link{border:0;background:none;color:#fffc;cursor:pointer;min-width:62px;text-decoration:none;text-align:center;text-shadow:0 2px 10px #000;display:block}
.drive-mode-link .drive-mode-icon{width:29px;height:29px;display:block;margin:0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.drive-mode-link small{display:block;font-size:10px;letter-spacing:.12em;margin-top:7px;white-space:nowrap}
.drive-mode-link:hover,.drive-mode-link:focus-visible{color:#fff;transform:translateY(-2px);outline:none}
@media(max-width:720px){nav .drive-mode-link{min-width:40px;min-height:42px}.drive-mode-link .drive-mode-icon{width:23px;height:23px}.drive-mode-link small{display:none}}

/* v16.0 — Driving page: keep the production mixer/timer UI, replace only the scene. */
body.drive-page #scene,body.drive-page #stars,body.drive-page #sceneFx,body.drive-page .office-on-layer,
body.drive-page .forest-rain-video,body.drive-page .living-scene-video,body.drive-page .camp-video{display:none!important}
body.drive-page main{pointer-events:none;z-index:6!important}
body.drive-page #pomodoroBreakDesk{pointer-events:none}
body.drive-page .visit,body.drive-page .quote{display:none!important}
body.drive-page header{z-index:20}
body.drive-page nav button[data-s],body.drive-page #campMode{display:none!important}
body.drive-page #driveMode{color:#fff;transform:translateY(-2px)}
body.drive-page .shade{z-index:3;background:linear-gradient(#00000012,#0000 45%,#00000038)}
body.drive-page #mixerToggle,body.drive-page #mixer{z-index:10020!important}
body.drive-page #mixer{z-index:10021!important}
#driveCanvas{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.drive-vignette{position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 46%,transparent 55%,rgba(23,38,29,.10) 100%)}
.drive-hud{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:7;display:flex;gap:8px;align-items:center;padding:9px 12px;border:1px solid #ffffff45;border-radius:16px;background:#17251f88;backdrop-filter:blur(10px);color:#fff}
.drive-hud button{border:0;border-radius:11px;padding:8px 11px;font-weight:650;background:#f4f5ee;color:#21372c;cursor:pointer}
.drive-cluster{position:fixed;left:18px;bottom:max(18px,env(safe-area-inset-bottom));z-index:7;display:flex;align-items:flex-end;gap:14px}
.speedometer{position:relative;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 50% 58%,#26302c 0 47%,#151b18 48% 62%,#0b0f0d 63% 100%);border:2px solid #ffffff55;box-shadow:0 10px 30px #0007,inset 0 0 0 5px #ffffff10;color:#fff;pointer-events:none}
.speedometer:before{content:'';position:absolute;inset:10px;border-radius:50%;border:1px solid #ffffff24;background:repeating-conic-gradient(from 225deg,#ffffffbb 0deg 1deg,transparent 1deg 15deg);clip-path:polygon(0 0,100% 0,100% 86%,50% 54%,0 86%)}
.speedometer .needle{position:absolute;left:50%;top:50%;width:4px;height:53px;border-radius:4px;background:#e55b43;transform-origin:50% 100%;transform:translate(-50%,-100%) rotate(-112.5deg);transition:transform .9s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 6px #0008}
.speedometer .hub{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;background:#ddd;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #202722}
.speedometer .readout{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);min-width:68px;text-align:center;font:700 22px/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.speedometer .unit{display:block;margin-top:5px;font:600 9px/1 system-ui,sans-serif;letter-spacing:.12em;opacity:.65}.speedometer .mark{position:absolute;font:600 9px/1 system-ui,sans-serif;opacity:.65}.speedometer .m0{left:20px;bottom:36px}.speedometer .m60{left:66px;top:17px}.speedometer .m100{right:16px;top:53px}.speedometer .m120{right:20px;bottom:36px}
.pedal-control{display:flex;align-items:center;gap:8px;padding-bottom:12px}.pedal-btn{width:46px;height:56px;padding:0;border:1px solid #ffffff28;border-radius:14px;display:grid;place-items:center;position:relative;background:rgba(5,8,7,.78);box-shadow:0 8px 22px #0008,inset 0 0 0 1px #0008;backdrop-filter:blur(5px);cursor:pointer}.pedal-btn:focus-visible{outline:2px solid #ffffffaa;outline-offset:3px}.pedal-icon{width:27px;height:42px;transform:rotate(-7deg);display:block;filter:drop-shadow(0 1px 2px #000)}.pedal-icon svg{display:block;width:100%;height:100%;overflow:visible}.pedal-icon path,.pedal-icon line{fill:none;stroke:#fff;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}.pedal-btn:hover{background:rgba(10,14,12,.92);border-color:#ffffff45}.throttle-bars{display:flex;gap:3px;align-items:flex-end;height:31px}.throttle-bar{width:5px;border-radius:3px;background:#ffffff2d;box-shadow:inset 0 0 0 1px #ffffff20;transition:background .32s ease,box-shadow .32s ease,transform .32s ease}.throttle-bar:nth-child(1){height:10px}.throttle-bar:nth-child(2){height:19px}.throttle-bar:nth-child(3){height:28px}.throttle-bar.on{background:#55e77c;box-shadow:0 0 8px #55e77c88,inset 0 0 0 1px #baffc8;transform:scaleY(1.04)}
@media(max-width:720px){body.drive-page header{padding:24px 19px}.drive-cluster{left:10px;bottom:10px;gap:9px}.speedometer{width:118px;height:118px}.speedometer .needle{height:41px}.speedometer .readout{font-size:18px;bottom:19px}.speedometer .m0{left:14px;bottom:28px}.speedometer .m60{left:52px;top:13px}.speedometer .m100{right:10px;top:41px}.speedometer .m120{right:14px;bottom:28px}.pedal-control{gap:6px;padding-bottom:8px}.pedal-btn{width:40px;height:50px;border-radius:12px}.pedal-icon{width:24px;height:38px}.throttle-bars{height:27px}.throttle-bar{width:4px}.throttle-bar:nth-child(1){height:9px}.throttle-bar:nth-child(2){height:16px}.throttle-bar:nth-child(3){height:24px}.drive-hud{bottom:18px}.drive-hud button{padding:7px 9px;font-size:12px}}

/* v16.01 — Driving integration fixes */
/* The focus/mixer trigger is intentionally kept on the driving page. */
body.drive-page main > #mixerToggle{
 display:flex!important;
 visibility:visible!important;
 opacity:1!important;
 pointer-events:auto!important;
}
/* Keep the rest of the normal landing-page centre content hidden. */
body.drive-page main > .eyebrow,
body.drive-page main > h1,
body.drive-page main > #clock,
body.drive-page main > i,
body.drive-page main > .stay,
body.drive-page main > #next{display:none!important}

/* Normalize the new steering link to the same native button box used by scene controls. */
nav .drive-mode-link{
 box-sizing:border-box;
 padding:2px 6px;
 line-height:normal;
 align-self:flex-start;
}
/* The rain glyph is a text symbol, so pin its line box to the same visual row as the SVG controls. */
nav button[data-s="rain"]{line-height:1.15}

/* v16.02 — Driving page: stable audio shell + centre identity/HUD */
body.drive-page main{
 pointer-events:none;
 z-index:6!important;
}
/* Match the production landing-page title/clock typography and placement. */
body.drive-page main > h1,
body.drive-page main > #clock{
 display:block!important;
}
body.drive-page main > .eyebrow,
body.drive-page main > i,
body.drive-page main > .stay,
body.drive-page main > #next{display:none!important}
body.drive-page main > h1{margin:14px 0 0}
body.drive-page main > #clock{margin:34px 0 20px}
/* Mixer remains independently clickable above the passive centre copy. */
body.drive-page main > #mixerToggle{pointer-events:auto!important}

.drive-hud{
 min-height:52px;
 padding:7px 10px;
 gap:11px;
 border-radius:18px;
}
.drive-hud button{
 width:38px;height:38px;padding:0;
 display:grid;place-items:center;
 font-size:16px;line-height:1;
}
.drive-visit{display:flex;align-items:center;gap:10px;padding-right:4px;white-space:nowrap}
.drive-visit span{font-size:9px;letter-spacing:.10em;color:#ffffffb8}
.drive-visit strong{font-size:14px;font-weight:400;letter-spacing:.16em;font-variant-numeric:tabular-nums;color:#fff}
@media(max-width:720px){
 body.drive-page main{padding-bottom:145px}
 body.drive-page main > h1{font-size:clamp(34px,10vw,48px);line-height:1.05}
 body.drive-page main > #clock{font-size:clamp(19px,5.5vw,24px)}
 .drive-hud{bottom:14px;gap:8px;padding:6px 8px}
 .drive-hud button{width:34px;height:34px;font-size:14px}
 .drive-visit{gap:7px}
 .drive-visit span{display:none}
 .drive-visit strong{font-size:12px;letter-spacing:.12em}
}

/* v16.03 — mobile driving cluster: keep gas pedal visible inside portrait viewport */
@media(max-width:720px){
 body.drive-page .drive-cluster{
  left:10px!important;
  right:auto!important;
  bottom:max(12px,env(safe-area-inset-bottom))!important;
  width:188px!important;
  display:flex!important;
  align-items:flex-end!important;
  gap:7px!important;
  overflow:visible!important;
  z-index:10010!important;
 }
 body.drive-page .speedometer{flex:0 0 108px!important;width:108px!important;height:108px!important}
 body.drive-page .speedometer .needle{height:37px!important}
 body.drive-page .speedometer .readout{font-size:17px!important;bottom:17px!important}
 body.drive-page .speedometer .m0{left:13px!important;bottom:25px!important}
 body.drive-page .speedometer .m60{left:47px!important;top:12px!important}
 body.drive-page .speedometer .m100{right:9px!important;top:37px!important}
 body.drive-page .speedometer .m120{right:12px!important;bottom:25px!important}
 body.drive-page .pedal-control{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  flex:0 0 auto!important;
  align-items:center!important;
  gap:5px!important;
  padding:0 0 7px 0!important;
  position:relative!important;
  z-index:10011!important;
 }
 body.drive-page .pedal-btn{display:grid!important;visibility:visible!important;opacity:1!important;width:39px!important;height:49px!important;flex:0 0 39px!important}
 body.drive-page .pedal-icon{display:block!important;visibility:visible!important;opacity:1!important;width:23px!important;height:37px!important}
 body.drive-page .throttle-bars{display:flex!important;visibility:visible!important;opacity:1!important;flex:0 0 17px!important}
}

/* v16.04 — mobile: reserve the left side for gauge + pedal; stack pause/time at right */
@media(max-width:720px){
 body.drive-page .drive-cluster{
  left:10px!important;
  right:auto!important;
  bottom:max(12px,env(safe-area-inset-bottom))!important;
  width:auto!important;
  gap:10px!important;
 }
 body.drive-page .speedometer{
  flex:0 0 108px!important;
  width:108px!important;
  height:108px!important;
 }
 body.drive-page .pedal-control{
  flex:0 0 62px!important;
  gap:5px!important;
  padding-bottom:7px!important;
 }
 body.drive-page .drive-hud{
  left:auto!important;
  right:12px!important;
  bottom:max(14px,env(safe-area-inset-bottom))!important;
  transform:none!important;
  width:auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  gap:7px!important;
  padding:7px!important;
  border-radius:16px!important;
 }
 body.drive-page .drive-hud button{
  width:36px!important;
  height:36px!important;
  flex:0 0 36px!important;
 }
 body.drive-page .drive-visit{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  gap:4px!important;
  padding:0 2px 2px!important;
  text-align:right!important;
 }
 body.drive-page .drive-visit span{
  display:block!important;
  max-width:92px!important;
  white-space:normal!important;
  font-size:7px!important;
  line-height:1.25!important;
  letter-spacing:.08em!important;
  text-transform:none!important;
 }
 body.drive-page .drive-visit strong{
  font-size:11px!important;
  letter-spacing:.10em!important;
  white-space:nowrap!important;
 }
}

/* v16.05 — mobile HUD polish + top navigation vertical alignment */
/* Treat the steering link as the same control box as the native nav buttons. */
header nav{align-items:flex-start}
header nav > button,
header nav > .drive-mode-link{
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:flex-start;
 vertical-align:top;
}
header nav > .drive-mode-link{
 min-width:50px;
 min-height:0;
 padding:0;
 margin:0;
 line-height:normal;
}
.drive-mode-icon,.journey-icon{display:block}

@media(max-width:720px){
 header nav > .drive-mode-link{min-width:40px;min-height:42px}
 body.drive-page .drive-hud{
  align-items:center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:0!important;
 }
 body.drive-page .drive-hud button{
  align-self:center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#fff!important;
  padding:0!important;
  text-shadow:0 2px 10px #000;
 }
 body.drive-page .drive-visit{
  align-items:center!important;
  text-align:center!important;
  padding:0!important;
 }
 body.drive-page .drive-visit span{
  text-align:center!important;
 }
}

/* v16.06 — mobile optical alignment for Driving Mode steering icon.
   Keep the nav item box aligned with the native scene/camp buttons;
   only move the steering glyph inside its box. */
@media(max-width:720px){
  nav .drive-mode-link{
    height:42px!important;
    min-height:42px!important;
    padding:0!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    position:relative!important;
    line-height:1!important;
  }
  .drive-mode-link .drive-mode-icon{
    width:23px!important;
    height:23px!important;
    margin:0!important;
    position:relative!important;
    top:7px!important;
    transform:none!important;
  }
}

/* v16.08 — mobile Driving Mode nav alignment.
   Match the native scene/camp button box; no glyph-level offsets. */
@media(max-width:720px){
  header nav > .drive-mode-link{
    box-sizing:border-box!important;
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:42px!important;
    min-height:42px!important;
    flex:0 0 40px!important;
    padding:2px 6px!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    line-height:normal!important;
    transform:none!important;
  }
  header nav > .drive-mode-link .drive-mode-icon{
    width:23px!important;
    height:23px!important;
    margin:0 auto!important;
    position:static!important;
    top:auto!important;
    left:auto!important;
    transform:none!important;
  }
}


/* v16.09 — structural nav fix.
   Driving Mode is now a native nav <button>, exactly like Journey/Camp.
   This removes anchor/flex baseline differences instead of compensating with offsets. */
#driveMode.drive-mode-button{
  border:0!important;
  background:none!important;
  color:#fffc!important;
  cursor:pointer!important;
  min-width:50px!important;
  padding:0!important;
  margin:0!important;
  font-size:27px!important;
  text-shadow:0 2px 10px #000!important;
}
#driveMode .drive-mode-icon{
  width:27px!important;
  height:27px!important;
  display:inline-block!important;
  vertical-align:middle!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  position:static!important;
  transform:none!important;
  margin:0!important;
}
#driveMode small{display:block;font-size:10px;letter-spacing:.12em;margin-top:7px}
@media(max-width:720px){
  #driveMode.drive-mode-button{
    width:auto!important;
    min-width:40px!important;
    max-width:none!important;
    height:auto!important;
    min-height:42px!important;
    flex:0 1 auto!important;
    padding:0!important;
    margin:0!important;
    display:inline-block!important;
    line-height:normal!important;
    transform:none!important;
  }
  #driveMode .drive-mode-icon{
    width:24px!important;
    height:24px!important;
    display:inline-block!important;
    vertical-align:middle!important;
    position:static!important;
    top:auto!important;
    left:auto!important;
    transform:none!important;
    margin:0!important;
  }
  #driveMode small{display:none!important}
}

/* v16.10 — authoritative mobile nav alignment.
   Do not offset the steering SVG. Make Driving Mode use the exact same
   flex box/padding rules as the native scene and Camp buttons. */
@media(max-width:720px){
  header nav > #driveMode.drive-mode-button{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:auto!important;
    min-width:40px!important;
    max-width:none!important;
    height:auto!important;
    min-height:42px!important;
    flex:0 1 auto!important;
    padding:2px 6px!important;
    margin:0!important;
    line-height:normal!important;
    text-align:center!important;
    transform:none!important;
  }
  header nav > #driveMode .drive-mode-icon{
    box-sizing:content-box!important;
    width:24px!important;
    height:24px!important;
    display:block!important;
    position:static!important;
    margin:0!important;
    padding:0!important;
    top:auto!important;
    left:auto!important;
    transform:none!important;
    vertical-align:baseline!important;
  }
}


/* v17.0 — Car Wash Mode */
#washMode.wash-mode-button,#washHome.wash-mode-button{border:0;background:none;color:#fffc;cursor:pointer;min-width:50px;padding:0;margin:0;font-size:27px;text-shadow:0 2px 10px #000}
.wash-mode-icon{width:27px;height:27px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#washMode small,#washHome small{display:block;font-size:10px;letter-spacing:.12em;margin-top:7px}
.carwash-page{background:#000;overflow:hidden}.carwash-page #scene,.carwash-page #stars{display:none}
#carwashStage{position:fixed;inset:0;overflow:hidden;background:#000;z-index:0}
#carwashPlayer{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-width:177.7778vh;min-height:100vh;transform:translate(-50%,-50%);pointer-events:none}
.carwash-shade{z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.24),rgba(0,0,0,.03) 30%,rgba(0,0,0,.04) 68%,rgba(0,0,0,.30))}
.carwash-page header,.carwash-page main,.carwash-page .visit,.carwash-page .quote,.carwash-page .mixer{z-index:5}
.carwash-main h1{white-space:nowrap}.carwash-next{position:absolute}
.carwash-header nav{justify-content:flex-end}
@media(max-width:720px){
 #carwashPlayer{width:100vw;height:177.7778vw;min-width:56.25vh;min-height:100vh}
 #washMode.wash-mode-button,#washHome.wash-mode-button{width:auto;min-width:40px;min-height:42px;padding:2px 6px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:normal}
 #washMode .wash-mode-icon,#washHome .wash-mode-icon{width:24px;height:24px;display:block;margin:0}
 #washMode small,#washHome small{display:none!important}
 .carwash-main h1{white-space:normal}
}

/* v17.01 — Car Wash desktop control stack: refresh + pause, Focus below */
@media(min-width:721px){
  .carwash-page .carwash-controls{
    position:fixed!important;
    right:18px!important;
    top:122px!important;
    z-index:10020!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:8px!important;
    pointer-events:auto!important;
  }
  .carwash-page .carwash-video-row{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
  }
  .carwash-page .carwash-next,
  .carwash-page .carwash-pause{
    position:static!important;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid rgba(255,255,255,.25)!important;
    border-radius:50%!important;
    background:rgba(8,12,16,.34)!important;
    color:#fff!important;
    font:400 21px/1 Arial,sans-serif!important;
    text-shadow:0 2px 10px #000!important;
    box-shadow:none!important;
    backdrop-filter:blur(10px)!important;
    cursor:pointer!important;
    opacity:.92!important;
  }
  .carwash-page .carwash-next:hover,
  .carwash-page .carwash-pause:hover{background:rgba(8,12,16,.52)!important;opacity:1!important}
  .carwash-page .carwash-pause span{display:block;transform:translateY(-1px);font-size:17px;letter-spacing:-2px}
  .carwash-page .carwash-controls > #mixerToggle{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    margin:0!important;
  }
  .carwash-page #mixer{
    right:18px!important;
    left:auto!important;
    top:220px!important;
    bottom:auto!important;
  }
}
/* Keep the existing mobile Car Wash layout untouched. */
@media(max-width:720px){
  .carwash-page .carwash-controls{display:contents!important}
  .carwash-page .carwash-pause{display:none!important}
}

/* v17.02 — Car Wash home navigation: real link, always clickable */
.carwash-header{z-index:10050!important;pointer-events:none}
.carwash-header nav{pointer-events:auto!important}
#washHome.wash-mode-button{
  text-decoration:none!important;
  pointer-events:auto!important;
  position:relative!important;
  z-index:10051!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}


/* v17.03 — Car Wash mobile: Sound + Refresh as matching icon controls on one row */
@media(max-width:720px){
  .carwash-page .carwash-controls{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    position:static!important;
    width:auto!important;
    margin:0!important;
  }
  .carwash-page .carwash-video-row{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    order:2!important;
  }
  .carwash-page .carwash-controls > #mixerToggle{
    order:1!important;
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    margin:0!important;
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.18)!important;
    background:rgba(8,12,16,.34)!important;
    border-radius:50%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:0!important;
    opacity:.9!important;
  }
  .carwash-page .carwash-controls > #mixerToggle::after{content:none!important}
  .carwash-page .carwash-controls > #mixerToggle .focus-label{display:none!important}
  .carwash-page .carwash-controls > #mixerToggle .focus-note{
    display:block!important;
    margin:0!important;
    font-size:22px!important;
    line-height:1!important;
    transform:translateY(-1px)!important;
  }
  .carwash-page .carwash-next{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    margin:0!important;
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.18)!important;
    background:rgba(8,12,16,.34)!important;
    border-radius:50%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#fff!important;
    font:400 21px/1 Arial,sans-serif!important;
    opacity:.9!important;
    box-shadow:none!important;
    backdrop-filter:blur(10px)!important;
  }
  .carwash-page .carwash-pause{display:none!important}
}

/* v17.03 — Desktop Camp Mode follows Journey / Drive / Wash nav geometry */
.camp-mode-icon{
  width:27px;
  height:27px;
  display:block;
  margin:0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media(min-width:721px){
  header nav > #campMode.camp-mode-button{
    min-width:50px!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    line-height:normal!important;
    transform:none;
    color:#fffc;
  }
  header nav > #campMode .camp-mode-icon{
    width:27px!important;
    height:27px!important;
    margin:0 auto!important;
  }
  header nav > #campMode small{
    display:block!important;
    margin-top:7px!important;
    font-size:10px!important;
    letter-spacing:.12em!important;
    line-height:normal!important;
    color:inherit!important;
  }
  body.camp-active header nav > #campMode.camp-mode-button{
    color:#fff!important;
    transform:translateY(-2px)!important;
  }
}
@media(max-width:720px){
  #campMode .camp-mode-icon{width:23px;height:23px}
}

/* v17.04 — authoritative mobile main-nav alignment for Wash + Camp.
   Match the proven v16.10 Driving Mode control geometry; no positional nudges. */
@media(max-width:720px){
  header nav > #washMode.wash-mode-button,
  header nav > #campMode.camp-mode-button{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:auto!important;
    min-width:40px!important;
    max-width:none!important;
    height:auto!important;
    min-height:42px!important;
    flex:0 1 auto!important;
    padding:2px 6px!important;
    margin:0!important;
    line-height:normal!important;
    text-align:center!important;
    transform:none!important;
  }
  header nav > #washMode .wash-mode-icon,
  header nav > #campMode .camp-mode-icon{
    box-sizing:content-box!important;
    width:24px!important;
    height:24px!important;
    display:block!important;
    position:static!important;
    margin:0!important;
    padding:0!important;
    top:auto!important;
    left:auto!important;
    transform:none!important;
    vertical-align:baseline!important;
  }
  header nav > #washMode small,
  header nav > #campMode small{display:none!important}
  body.camp-active header nav > #campMode.camp-mode-button{
    color:#fff!important;
    transform:none!important;
  }
}


/* v17.05 — Office Ambient control: unified monoline desk-lamp icon */
.ambient-lamp-control .ambient-lamp-icon{
  width:27px;
  height:27px;
  display:block;
  margin:0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media(min-width:721px){
  header nav > .ambient-lamp-control{
    min-width:50px!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    line-height:normal!important;
  }
  header nav > .ambient-lamp-control .ambient-lamp-icon{
    width:27px!important;
    height:27px!important;
    margin:0 auto!important;
  }
  header nav > .ambient-lamp-control small{
    display:block!important;
    margin-top:7px!important;
    font-size:10px!important;
    letter-spacing:.12em!important;
    line-height:normal!important;
  }
}
@media(max-width:720px){
  header nav > .ambient-lamp-control{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:auto!important;
    min-width:40px!important;
    max-width:none!important;
    height:auto!important;
    min-height:42px!important;
    flex:0 1 auto!important;
    padding:2px 6px!important;
    margin:0!important;
    line-height:normal!important;
    text-align:center!important;
    transform:none!important;
  }
  header nav > .ambient-lamp-control .ambient-lamp-icon{
    box-sizing:content-box!important;
    width:24px!important;
    height:24px!important;
    display:block!important;
    position:static!important;
    margin:0!important;
    padding:0!important;
    top:auto!important;
    left:auto!important;
    transform:none!important;
  }
  header nav > .ambient-lamp-control small{display:none!important}
  header nav > .ambient-lamp-control.on{transform:none!important}
}