:root{color-scheme:light;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;background:#fff;color:#111}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overscroll-behavior:none}
body{background:#fff;transition:background .35s linear;overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;touch-action:none;-webkit-user-select:none;user-select:none}
[hidden]{display:none!important}
#scene{position:relative;height:100svh;min-height:240px;display:grid;place-items:center}
#vape{position:relative;z-index:1;top:6svh;width:min(54vw,230px,30svh);aspect-ratio:176/324;border:0;padding:0;background:none;cursor:pointer;outline:none;transform-origin:50% 78%;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
#vape-control{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;clip-path:polygon(15% 0,65% 0,68% 17%,74% 21%,95% 21%,100% 26%,100% 95%,93% 100%,7% 100%,0 95%,0 26%,5% 21%,10% 21%,13% 17%)}
#device{position:absolute;inset:0;display:block;overflow:hidden;transition:filter .45s linear}
#vape-image{position:absolute;width:227.2727%;height:auto;max-width:none;left:-63.6364%;top:-14.1975%;pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none}
#vape:has(#vape-control:focus-visible){outline:1px dashed #aaa;outline-offset:18px;border-radius:28px}
#vape.inhaling{transform:translate(12px,-9px) rotate(24deg) scale(.97)}
#vape.inhaling #device{animation:inhale .14s linear infinite alternate}
#vape.overheating #device{animation:shiver .09s linear infinite alternate}
#effects{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
body.ended{background:#000;color-scheme:dark}
#ending{position:fixed;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:24px 20px max(24px,env(safe-area-inset-bottom));background:#000;color:#f4f4f0}
#skull{margin:0;font:700 clamp(14px,4vw,23px)/1.05 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;white-space:pre;user-select:none;animation:reveal 1.8s ease-in-out both}
h1{margin:0;max-width:100%;font-size:clamp(46px,12vw,112px);font-weight:900;line-height:.96;letter-spacing:-.075em;text-transform:uppercase;text-align:center;color:#ff241c;outline:none;animation:reveal 4.5s ease-in-out .65s both}
#reset{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;padding:0;margin-top:10px;background:transparent;color:#888;cursor:pointer;touch-action:manipulation;transition:color .15s,transform .15s}
#reset:hover,#reset:focus-visible{color:#fff}
#reset:focus-visible{outline:1px solid #777;outline-offset:4px}
#reset:active{transform:rotate(-35deg)}
.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}
@keyframes inhale{from{translate:-.35px 0}to{translate:.35px .6px}}
@keyframes shiver{from{translate:-1.4px .6px;rotate:-.7deg}to{translate:1.4px -.6px;rotate:.7deg}}
@keyframes reveal{from{opacity:0}to{opacity:1}}
@media(max-height:500px) and (orientation:landscape){#ending{gap:12px}#skull{font-size:11px}h1{font-size:45px}#reset{margin:0}}
@media(prefers-reduced-motion:reduce){body,#vape,#device,#reset{transition:none}#vape.inhaling #device,#vape.overheating #device,#skull,h1{animation:none}}