:root{color-scheme:dark;--ink:#f4f8fc;--muted:#c4d3df;--line:rgba(227,239,251,.27);font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#283e50}
body{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,canvas:focus-visible{outline:2px solid #eef8ff;outline-offset:5px}
button:disabled{cursor:default}
button,canvas{touch-action:manipulation}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#experience{position:relative;isolation:isolate;width:100%;height:100%;height:100dvh;overflow:hidden;overflow:clip;background:radial-gradient(ellipse at 9% 30%,#617b92,transparent 65%),linear-gradient(150deg,#304858,#263c51 64%,#182d3e)}
#mist{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none;cursor:grab}
#mist:active{cursor:grabbing}
.light-wash{position:absolute;inset:0;pointer-events:none;background:linear-gradient(175deg,#0a1c2b30,transparent 30%,transparent 74%,#0f203030);z-index:1}
.heading{position:absolute;left:max(7%,calc(env(safe-area-inset-left) + 20px));top:max(42px,calc(env(safe-area-inset-top) + 18px));z-index:2;pointer-events:none}
.heading h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(30px,3.5vw,48px);font-weight:400;letter-spacing:-.025em;line-height:1.2;margin:0 0 12px;text-shadow:0 2px 24px #233c5266}
.heading p{margin:0;color:#d3e0ec;font-size:15px;font-weight:300;line-height:1.6}
.top-controls{position:absolute;right:max(6%,calc(env(safe-area-inset-right) + 16px));top:max(43px,calc(env(safe-area-inset-top) + 18px));z-index:3;display:flex;gap:10px}
.icon-button{border:1px solid transparent;background:#273c5038;border-radius:50%;width:46px;height:46px;display:grid;place-items:center;transition:background .25s}
.icon-button:hover{background:#dbecfb1f}
.icon-button[aria-pressed=true]{background:#deeefa21;border-color:var(--line)}
.sound-on,.play-icon{display:none}
#sound[aria-pressed=true] .sound-on,#pause[aria-pressed=true] .play-icon{display:block}
#sound[aria-pressed=true] .sound-off,#pause[aria-pressed=true] .pause-icon{display:none}
.product{position:absolute;right:-72px;bottom:-90px;width:112px;margin:0;pointer-events:auto;z-index:2}
.product[aria-hidden=true]{visibility:hidden}
.bottle{height:clamp(250px,35vh,340px);width:88px;position:relative;margin:auto;overflow:hidden;transform:rotate(-35deg);transform-origin:50% 100%}
.bottle img{height:113.5%;width:auto;max-width:none;position:absolute;top:-6.7%;left:50%;transform:translateX(-50%);user-select:none}
.bottle #nozzle,.bottle #bottle-base{position:absolute;width:0;height:0;left:50%}
.bottle #nozzle{top:6px}
.bottle #bottle-base{bottom:0}
.product figcaption{display:none}
.controls{position:absolute;z-index:3;bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));left:max(7%,calc(env(safe-area-inset-left) + 20px));width:336px;text-align:left;display:flex;align-items:stretch;gap:8px}
.mode-picker{padding:5px;display:flex;border:1px solid #eaf4ff4d;border-radius:40px;background:#4d667e59;box-shadow:0 8px 30px #142c4219;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);flex:1;min-width:0}
.mode-picker button{position:relative;width:50%;min-height:46px;border:0;border-radius:30px;background:transparent;font-size:16px;transition:color .3s,background .3s,box-shadow .3s}
.mode-picker button[aria-pressed=true]{color:#263f53;background:linear-gradient(120deg,#e9f4fff0,#c4d9eddf);box-shadow:inset 0 1px 2px #fff,0 2px 12px #19304526}
.mode-picker button:not([aria-pressed=true]):hover{background:#d5e8fb12}
.spray-button{flex:0 0 110px;border:1px solid #eaf4ff4d;border-radius:40px;background:#4d667e59;min-height:46px;padding:0 5px;font-size:14px;white-space:nowrap;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.spray-button:hover{background:#66809770}
.spray-button[aria-pressed=true]{background:#dbeaf2e8;color:#263f53}
.gesture-hint{position:absolute;left:34%;top:44%;z-index:2;pointer-events:none;display:flex;align-items:center;gap:12px;font-size:14px;color:#d7e4ef;opacity:0;transition:opacity 1.4s}
.gesture-hint.visible{opacity:.85}
.gesture-hint span{height:28px;width:28px;border:1px solid #e8f3ff88;border-radius:50%;box-shadow:0 0 0 6px #d7e8fc0a}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.no-script{position:absolute;inset:45% 10% auto;text-align:center}
@media(max-width:700px){
 .heading{left:max(22px,calc(env(safe-area-inset-left) + 14px));top:max(31px,calc(env(safe-area-inset-top) + 16px));max-width:calc(100% - 124px)}
 .heading h1{font-size:31px;margin-bottom:9px}
 .heading p{font-size:13px;max-width:220px}
 .top-controls{right:max(14px,env(safe-area-inset-right));top:max(27px,calc(env(safe-area-inset-top) + 12px));gap:0}
 .icon-button{width:44px;height:44px}
 .icon-button svg{width:21px;height:21px}
 .product{right:-66px;bottom:-68px;width:84px}
 .bottle{height:clamp(190px,29vh,245px);width:68px}
 .controls{left:max(22px,calc(env(safe-area-inset-left) + 14px));bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px));width:218px}
 .mode-picker{padding:4px}
 .spray-button{flex-basis:94px;font-size:13px}
 .mode-picker button{min-height:46px;font-size:14px}
 .gesture-hint{left:17%;top:43%;font-size:13px}
}
@media(max-width:370px){
 .heading{left:16px;max-width:calc(100% - 114px)}
 .heading h1{font-size:28px}
 .heading p{font-size:12px;max-width:188px}
 .top-controls{right:10px}
 .product{right:-50px;bottom:-58px;width:74px}
 .bottle{height:190px;width:54px}
 .controls{left:16px;width:202px}
 .mode-picker button{font-size:13px}
}
@media(max-height:500px) and (orientation:landscape){
 .heading{top:max(20px,env(safe-area-inset-top));left:max(30px,env(safe-area-inset-left));max-width:calc(100% - 170px)}
 .heading h1{font-size:28px;margin-bottom:5px}
 .top-controls{top:20px}
 .product{right:-66px;bottom:-60px}
 .bottle{height:210px;width:62px}
 .controls{bottom:max(14px,env(safe-area-inset-bottom));left:max(30px,env(safe-area-inset-left));width:260px}
 .mode-picker button{min-height:44px;font-size:14px}
 .gesture-hint{top:44%}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}