@font-face{font-family:"Chivo";src:url(/fonts/Chivo.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url(/fonts/ChivoMono.woff2) format("woff2");font-weight:100 900;font-display:swap}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#171717}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:"Chivo",system-ui,sans-serif;color:#111;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:none;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
svg{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus{outline:none}
:focus-visible{outline:2px solid #2f6bff;outline-offset:3px}

#app{position:fixed;inset:0;overflow:hidden}
.scene{position:absolute;inset:0;overflow:hidden;background:#d9d8d4}
.backdrop{position:absolute;top:-25%;left:-150%;width:400%;height:150%;background:#e7e5e1 url(/marble.webp) 0 0/auto 100% repeat-x;will-change:transform;transform-origin:50% 50%}
.backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#ffffff1f 0%,#00000000 45%,#0000002e 100%)}
.stage{position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(0,var(--stage-y,0px)) scale(var(--k,1));transition:transform 1.25s cubic-bezier(0.54,0.09,0.17,1)}
.track{position:absolute;left:0;top:0;height:0;will-change:transform}
.track.anim{transition:transform .6s cubic-bezier(0.27,0.12,0,1)}
.slide{position:absolute;top:0;width:341px;height:755px;margin:-377.5px 0 0 -170.5px;transition:transform 1s cubic-bezier(0.54,0.09,0.17,1),filter 1s ease;transform-origin:50% 60%}

/* ---------- box ---------- */
.box{position:absolute;inset:0;cursor:grab;transition:transform 300ms cubic-bezier(.33,0,0,1)}
.slide.current .box{transform:translateY(-7px)}
.box:active{cursor:grabbing}
.box .shadow{position:absolute;left:2px;right:2px;top:43px;bottom:1px;border-radius:10px;box-shadow:0px 26px 25px 0px #00000063,0px 29px 70px 0px #00000063;transition:opacity .6s ease}
.sleeve{position:absolute;inset:0;transition:transform 800ms linear(0 0%,0.0071 1.2456%,0.0252 2.4911%,0.0971 5.3381%,0.5941 18.5053%,0.712 22.242%,0.8078 25.9786%,0.8877 30.0712%,0.9483 34.5196%,0.9893 39.3238%,1.0027 41.8149%,1.013 44.6619%,1.0183 46.9751%,1.0212 49.1103%,1.0228 51.6014%,1.0228 54.4484%,1.0205 58.7189%,1.0093 71.5302%,1.0042 79.3594%,1.0009 88.6121%,0.9996 100%)}
.lid{position:absolute;left:0;right:0;top:0;height:46px}
.lid svg{width:100%;height:100%}
.body{position:absolute;left:0;right:0;top:43px;bottom:0;border-radius:4px 4px 10px 10px;background:linear-gradient(180deg,#f6f5f2 0%,#efeeea 100%);overflow:hidden}
.band{position:absolute;left:0;right:0;bottom:0;height:461px;background:var(--c);border-radius:0 0 10px 10px}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(#ffffff2b 0%,#00000000 40%,#00000012 100%);border-radius:inherit}
.bname{position:absolute;left:0;right:0;top:19px;text-align:center;font:200 14px/1 "Chivo Mono",monospace;color:var(--bt,#fff);letter-spacing:.02em}
.bline{position:absolute;left:50%;top:58px;width:150px;height:300px;margin-left:-75px;opacity:.95}
.bline *{fill:none;stroke:var(--bt,#fff);stroke-width:1.2;vector-effect:non-scaling-stroke}
.bspec{position:absolute;left:22px;right:22px;bottom:20px;display:flex;justify-content:space-between;font:300 9.5px/1.3 "Chivo Mono",monospace;color:var(--bt,#ffffffd9);text-transform:uppercase;letter-spacing:.06em}
.bmark{position:absolute;left:22px;top:24px;right:22px}
.bmark b{display:block;font:700 15px/1.1 "Chivo",sans-serif;color:#151515;letter-spacing:-.01em}
.bmark i{display:block;margin-top:6px;font:300 10px/1.35 "Chivo Mono",monospace;color:#00000080;font-style:normal;letter-spacing:.02em}
.bmodel{position:absolute;right:22px;top:24px;font:400 10px/1 "Chivo Mono",monospace;color:#0000007a;letter-spacing:.06em}
.bface{position:absolute;right:22px;top:182px;width:38px;height:38px}
.bbars{position:absolute;left:22px;right:22px;top:206px;height:56px;display:flex;align-items:flex-end;gap:5px}
.bbars span{flex:1;height:100%;background:#151515;border-radius:.5px}
.shading{position:absolute;left:1px;right:1px;top:43px;bottom:0;border-radius:4px 4px 10px 10px;pointer-events:none;background:linear-gradient(90deg,#ffffff38 0%,#ffffff00 18%,#00000000 70%,#00000021 100%),linear-gradient(180deg,#00000000 70%,#0000000f 100%)}

/* ---------- device ---------- */
.devroot{position:absolute;inset:0}
.dwrap{position:absolute;left:50%;top:50%;width:422px;height:var(--H,840px);margin-left:-211px;margin-top:calc(var(--H,840px) / -2);transform:translateY(40px) scale(calc(var(--ds,1) * .96));opacity:0;pointer-events:none;transition:opacity .35s ease .08s,transform 1.1s cubic-bezier(0.12,0.18,0,1.02) .05s}
.is-open .slide.current .dwrap{opacity:1;pointer-events:auto;transform:scale(var(--ds,1))}
.device{position:absolute;inset:0;border-radius:56px;background:linear-gradient(to bottom,#00000000 0%,#00000012 100%),var(--case);box-shadow:0px 80px 150px 0px #00000080,0px 19px 60px 0px #0000004d,0px 30px 40px -10px #00000080}
.device::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 1px 1px #ffffff1f inset,0px -3px 8px 0px #00000042 inset;pointer-events:none}

.wheel{position:absolute;right:-13px;top:58px;width:26px;height:244px;border-radius:8px;background:repeating-linear-gradient(180deg,#1b1b1b 0 3px,#3a3a3a 3px 4px,#111 4px 6px);box-shadow:1px 0px 1px 0px #ffffff63 inset,7px 0px 18px -5px #00000085;overflow:hidden}
.wheel::after{content:"";position:absolute;inset:0;background:linear-gradient(#000000 0%,#00000000 20%,#00000000 66%,#000000 100%);opacity:.8}
.wheel input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ns-resize;writing-mode:vertical-lr;direction:rtl}
.wheel .ridges{position:absolute;left:0;right:0;top:0;height:200%;background:inherit;transform:translateY(var(--wy,0px))}

.screenblock{position:absolute;left:0;right:0;top:0;height:var(--SH,317px);background:#000;border-radius:56px 56px 10px 10px;z-index:1}
.crt{container-type:size;position:absolute;left:18px;right:18px;top:18px;bottom:14px;border-radius:40px 40px 6px 6px;background:#050505;overflow:hidden;box-shadow:0px 0px 15px 0px #00000080 inset;filter:brightness(var(--bri,1))}
.crt::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(180deg,#ffffff06 0 1px,#00000000 1px 3px),radial-gradient(ellipse at 50% 40%,#00000000 55%,#000000a6 100%)}
.crt::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;background:linear-gradient(160deg,#ffffff14 0%,#ffffff00 28%),linear-gradient(#ffffff05 50%,#0000001c 100%);box-shadow:0 0 0px 1px #ffffff12 inset}
.scr{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.is-on .scr{opacity:1}
.is-on .crt{animation:crtOn .9s cubic-bezier(.2,.7,.2,1)}
@keyframes crtOn{0%{filter:brightness(2.4) contrast(.6);transform:scaleY(.02)}35%{transform:scaleY(1);filter:brightness(1.6) contrast(.8)}100%{filter:brightness(var(--bri,1)) contrast(1);transform:none}}
.status{position:absolute;left:24px;right:24px;top:16px;height:20px;display:flex;align-items:center;gap:8px;color:#8d8d8d;font:400 12px/1 "Chivo Mono",monospace;z-index:3}
.status .menu{width:26px;height:26px;margin:-3px 0 0 -4px;display:grid;place-items:center;color:#9a9a9a;pointer-events:auto}
.status .menu svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
.status .grow{flex:1}
.status .bat{width:22px;height:11px;border:1.2px solid currentColor;border-radius:3px;position:relative;margin-right:2px}
.status .bat::before{content:"";position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:var(--bat,70%);background:currentColor;border-radius:1px}
.status .bat::after{content:"";position:absolute;right:-4px;top:2.5px;width:2px;height:4px;background:currentColor;border-radius:0 1px 1px 0}
canvas.face{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.boot{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:2;opacity:0;pointer-events:none}
.boot.show{opacity:1}
.boot h3{font:800 38px/1 "Chivo",sans-serif;color:#fff;letter-spacing:-.035em}
.boot h3 .o{display:inline-block;position:relative}
.boot p{margin-top:12px;font:300 13px/1.2 "Chivo Mono",monospace;color:#bdbdbd}
.boot small{display:block;margin-top:26px;font:300 10px/1 "Chivo Mono",monospace;color:#6d6d6d;letter-spacing:.08em;text-transform:uppercase}
.boot .ch{opacity:0}
.boot.show .ch{animation:chIn 250ms steps(5,jump-end) forwards;animation-delay:calc(.6s + var(--i) * 70ms)}
.boot.show h3{animation:bootIn .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes chIn{to{opacity:1}}
@keyframes bootIn{0%{opacity:0;filter:blur(6px);transform:scale(.96)}100%{opacity:1;filter:none;transform:none}}

.msg{position:absolute;left:24px;right:24px;top:46px;bottom:18px;z-index:3;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .25s ease}
.msg.show{opacity:1;pointer-events:auto}
.msg .tag{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;font:500 10px/1 "Chivo Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--hue-c)}
.msg .tag i{font-style:normal;color:#6f6f6f}
.msg .title{margin-top:12px;max-width:58%;font:700 27px/1.02 "Chivo",sans-serif;color:#fff;letter-spacing:-.025em}
.msg .text{margin-top:10px;max-width:58%;font:300 13px/1.42 "Chivo Mono",monospace;color:#d4d4d4}
.msg .text span{opacity:0;animation:wIn 300ms ease forwards;animation-delay:calc(var(--d,250ms) + var(--i) * var(--step,55ms))}
@keyframes wIn{to{opacity:1}}
.msg .go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px 0 12px;border-radius:999px;background:#ffffff14;box-shadow:0 0 0 1px #ffffff26 inset;font:500 12px/1 "Chivo Mono",monospace;color:#fff;text-decoration:none;opacity:0;transition:background .2s ease}
.msg.show .go{animation:wIn .4s ease forwards;animation-delay:.55s}
.msg .go:hover{background:#ffffff26}
.msg .go svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}
.msg .go[hidden]{display:none}

.list{position:absolute;left:0;right:0;top:44px;bottom:0;z-index:4;padding:4px 24px 18px;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .2s ease;touch-action:pan-y;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.list::-webkit-scrollbar{display:none}
.list.show{opacity:1;pointer-events:auto}
.list h4{margin:12px 0 4px;font:500 10px/1 "Chivo Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--hue-c)}
.list a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid #ffffff14;text-decoration:none;color:#ececec;font:400 14px/1.2 "Chivo",sans-serif}
.list a em{font:300 11px/1 "Chivo Mono",monospace;color:#7a7a7a;font-style:normal;white-space:nowrap}
.list a:hover{color:#fff}
.list a:hover em{color:var(--hue-c)}

.toast{position:absolute;left:50%;top:44px;z-index:4;transform:translate(-50%,-8px);height:26px;padding:0 12px;border-radius:999px;background:#ffffff1a;box-shadow:0 0 0 1px #ffffff21 inset;display:flex;align-items:center;gap:6px;font:400 11px/1 "Chivo Mono",monospace;color:#cfcfcf;white-space:nowrap;opacity:0;transition:all 250ms cubic-bezier(.1,.1,0,1)}
.toast b{font-weight:500;color:#fff}
.toast.show{opacity:1;transform:translate(-50%,0)}

.lyrics{position:absolute;left:24px;right:24px;bottom:18px;z-index:3;text-align:center;font:300 13px/1.4 "Chivo Mono",monospace;color:#e6e6e6;opacity:0;transition:opacity .3s}
.lyrics.show{opacity:1}

@container (max-height:250px){.msg{top:40px;bottom:12px}.msg .title{font-size:22px;margin-top:8px}.msg .text{font-size:12px;line-height:1.36;margin-top:6px}.msg .go{height:26px;font-size:11px}.boot h3{font-size:30px}.toast{top:40px}}
@container (max-width:340px){.msg .title{max-width:60%}.msg .text{max-width:60%}}
/* panels */
.panels{position:absolute;left:0;right:0;top:var(--SH,317px);height:108px;background:#0f0f0f;display:flex;gap:2px;padding:2px 0;z-index:1}
.key{position:relative;flex:1;height:104px}
.key .cap{position:absolute;inset:0;border-radius:4px;background:linear-gradient(#ffffff42 0%,#00000000 50%,#0000003d 100%),var(--key);box-shadow:0 -3px 2px #00000029 inset,0 1px #ffffff78 inset;transition:transform 150ms cubic-bezier(0,.38,0,1.01),filter 150ms;display:grid;place-items:center}
.key .dimple{width:50px;height:50px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(#00000017 0%,#00000026 100%);box-shadow:0px 2px 0px 0px #00000020 inset,0px 2px 0px 0px #ffffff21,0px 1px 0px 0px #ffffff87}
.key svg{width:24px;height:24px;fill:none;stroke:#2b2b2b;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.key:active .cap,.key.down .cap{transform:translateY(2px) scale(.985);filter:brightness(.96)}
.key.lit .cap::after{content:"";position:absolute;top:9px;right:9px;width:5px;height:5px;border-radius:9px;background:var(--hue-c);box-shadow:0 0 6px var(--hue-c)}
.key .lab{position:absolute;left:0;right:0;bottom:9px;text-align:center;font:500 8.5px/1 "Chivo Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#00000066;pointer-events:none}
.panels .key:first-child .cap{border-bottom-left-radius:4px}

/* lower body */
.lower{position:absolute;left:0;right:0;top:calc(var(--SH,317px) + 108px);bottom:0;border-radius:0 0 56px 56px}
.hue{position:absolute;left:15px;right:15px;top:16px;height:78px}
.hue .scale{display:flex;justify-content:space-between;font:400 9px/1 "Chivo Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.hue .slot{position:relative;margin-top:12px;height:46px;border-radius:12px;background:linear-gradient(#0000001f 0%,#00000000 50%,#ffffff4f 100%);box-shadow:0px 4px 3px 0px #0000008f inset,0px 1px 0px 0px #ffffff6e}
.hue .rail{position:absolute;left:18px;right:18px;top:15px;height:16px;border-radius:3px;background:linear-gradient(90deg,hsl(0 90% 62%),hsl(60 90% 62%),hsl(120 90% 55%),hsl(180 90% 55%),hsl(240 90% 66%),hsl(300 90% 62%),hsl(356 90% 62%));box-shadow:0 1px 2px #00000059 inset;opacity:.92}
.hue .thumb{position:absolute;top:7px;left:calc(18px + var(--hp,0.5) * (100% - 36px) - 32px);width:64px;height:32px;border-radius:5px;background:linear-gradient(#ffffff24 0%,#00000024 100%),#141414;box-shadow:0px 4px 6px 0px #00000099,0px 3px 8px 0px #0000002b,0px 1px 0px 1px #ffffff2e inset;pointer-events:none}
.hue .thumb::after{content:"";position:absolute;left:50%;top:7px;bottom:7px;width:2px;margin-left:-1px;background:#ffffff40;border-radius:2px}
.hue input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;touch-action:none}

.dial{position:absolute;left:50%;top:calc(var(--cy,226px) - 108px);width:216px;height:216px;margin-left:-108px;transform:scale(var(--dz,1))}
.dial .well{position:absolute;inset:-20px;border-radius:999px;background:linear-gradient(#ffffff2e 0%,#00000000 30%,#0000001c 70%,#0000001f 100%),var(--case);box-shadow:0px 0px 5px 3px #00000040 inset,0px 1px 0px 0px #ffffff8a}
.dial .dots i{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:9px;background:#0000004d;transform:rotate(var(--a)) translateY(-119px);transition:background .2s}
.dial .dots i.on{background:var(--hue-c);box-shadow:0 0 5px var(--hue-c)}
.dial .knob{position:absolute;inset:6px;border-radius:999px;background:repeating-conic-gradient(from 0deg,#0000 0deg 3deg,#0000001f 3deg 6deg),linear-gradient(to bottom right,#ffffff17 0%,#0000003d 100%),var(--key);box-shadow:0px 10px 10px 4px #00000040,0px 7px 10px 0px #0000003d,0 1px 0 0 #ffffffa3 inset;transform:rotate(var(--rot,0deg));transition:transform 300ms cubic-bezier(.33,0,0,1)}
.dial .face{position:absolute;inset:16px;border-radius:999px;background:linear-gradient(to right,#ffffff1c 0%,#0000002e 50%,#ffffff17 100%),linear-gradient(#0000000f,#ffffff1f),var(--key);box-shadow:0px -1px 1px 1px #00000026 inset,0 1px 1px #ffffff9e}
.dial .tick{position:absolute;left:50%;top:22px;width:4px;height:26px;margin-left:-2px;border-radius:4px;background:#1a1a1a;box-shadow:0 1px 0 #ffffff80}
.dial input{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);opacity:0;cursor:grab;border-radius:999px;touch-action:none}
.dial .dlab{display:none;position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);font:400 9px/1 "Chivo Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap}

.music{position:absolute;right:22px;top:calc(var(--cy,226px) - 130px);width:62px;height:62px}
.music .ring{position:absolute;inset:-7px;border-radius:999px;box-shadow:0px 0px 5px 3px #00000033 inset,0px 1px 0px 0px #ffffff8a}
.music .cap{position:absolute;inset:0;border-radius:999px;background:linear-gradient(#ffffff3d 0%,#00000000 20%,#00000000 80%,#0000001a 100%),var(--key);box-shadow:0px 5px 5px 2px #00000040,0px 2px 5px 0px #0000003d,0 1px 0 #ffffffa3 inset;display:grid;place-items:center;transition:transform 150ms cubic-bezier(0,.38,0,1.01)}
.music svg{width:22px;height:22px;fill:none;stroke:#2b2b2b;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.music:active .cap,.music.down .cap{transform:translateY(2px)}
.music.on .cap::after{content:"";position:absolute;top:8px;right:8px;width:5px;height:5px;border-radius:9px;background:var(--hue-c);box-shadow:0 0 6px var(--hue-c)}
.grille{position:absolute;left:34px;top:calc(var(--cy,226px) - 118px);width:50px;display:grid;grid-template-columns:repeat(5,6px);gap:5px}
.grille i{width:6px;height:6px;border-radius:9px;background:#00000057;box-shadow:0 1px 0 #ffffff8c}
.pills{position:absolute;left:30px;right:30px;bottom:34px;display:flex;justify-content:space-between}
.pillbtn{position:relative;width:76px;height:24px}
.pillbtn .cap{position:absolute;inset:0;border-radius:999px;background:linear-gradient(#ffffff42 0%,#00000000 50%,#0000003d 100%),var(--pc,#f2f2f2);box-shadow:0px 3px 3px 2px #00000040,0px 2px 3px 0px #0000003d,0 1px #ffffff78 inset;transition:transform 150ms cubic-bezier(0,.38,0,1.01)}
.pillbtn::before{content:"";position:absolute;inset:-5px;border-radius:999px;box-shadow:0px 1px 0px 1px #0000004f inset,0px 1px 0px 0px #ffffff61}
.pillbtn:active .cap{transform:translateY(2px)}
.pillbtn .plab{position:absolute;left:0;right:0;top:34px;text-align:center;font:400 9px/1 "Chivo Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.power{--pc:#e5432f}
.power .led{position:absolute;right:-16px;top:8px;width:7px;height:7px;border-radius:9px;background:#00000033;box-shadow:0 1px 0 #ffffff80}
.is-on .power .led{background:#7dff8a;box-shadow:0 0 6px #7dff8a,0 0 1px #000}
.is-open.is-off .power .cap{animation:nudge 2.4s ease-in-out 1.6s infinite}
@keyframes nudge{0%,70%,100%{box-shadow:0px 3px 3px 2px #00000040,0px 2px 3px 0px #0000003d,0 1px #ffffff78 inset}80%{box-shadow:0 0 0 6px #e5432f33,0px 3px 3px 2px #00000040,0 1px #ffffff78 inset}}
.sound.muted .cap{filter:brightness(.82)}
.engrave{position:absolute;left:0;right:0;bottom:15px;text-align:center;font:500 9px/1 "Chivo Mono",monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);opacity:.8}

/* neighbours when open */
.is-open .slide:not(.current){filter:brightness(.92)}
.is-open .slide.prev{transform:translateX(-14%) rotate(-2deg)}
.is-open .slide.next{transform:translateX(14%) rotate(2deg)}
.is-open .slide.current .sleeve{transform:translateY(calc(-100vh / var(--k, 1) - 820px))}
.is-open .slide.current .box{cursor:default}
.is-open .slide.current .box .shadow{opacity:0}

.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,#00000000 50%,#00000026 66%,#0000004d 75%,#000000cc 100%);opacity:0;transition:opacity 1000ms cubic-bezier(0.42,0,0.58,1)}
.is-open.is-off .vignette{opacity:.55}
.is-open.is-on .vignette{opacity:.25}

/* chrome: nav + hints */
.topnav{position:absolute;left:16px;right:16px;top:16px;display:flex;gap:8px;z-index:10;pointer-events:none}
.topnav .spacer{flex:1}
.pill{pointer-events:auto;height:39px;padding:0 25px;border-radius:999px;background:#ffffffbf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:600 14px/1 "Chivo",sans-serif;color:#000;display:inline-flex;align-items:center;gap:6px;box-shadow:0px 1px 7px 0px #0000002e;transition:transform 200ms cubic-bezier(.33,0,0,1),background .2s}
.pill:hover{background:#fffffff0}
.pill:active{transform:scale(.96)}
.pill svg{width:16px;height:16px;fill:none;stroke:#000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.back{padding:0 18px 0 13px;opacity:0;transform:translateX(-22px);pointer-events:none;transition:opacity .3s ease,transform 300ms cubic-bezier(.33,0,0,1)}
.is-open .back{opacity:1;transform:none;pointer-events:auto}
.hints{position:absolute;left:50%;bottom:0;width:500px;max-width:100%;height:83px;transform:translateX(-50%);z-index:9;pointer-events:none}
.hints-in{position:absolute;inset:0;border-radius:12px 12px 0 0;background:#ffffffbf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;justify-content:center;align-items:center;gap:56px;transition:transform 700ms cubic-bezier(0.12,0.18,0,1.02)}
.hint{display:flex;flex-direction:column;gap:5px}
.hint .h-t{display:flex;align-items:center;gap:6px;font:600 14px/1.2 "Chivo",sans-serif;color:#000}
.hint .h-t svg{width:18px;height:18px;fill:none;stroke:#000;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hint .h-s{font:300 14px/1.2 "Chivo",sans-serif;color:#000;padding-left:24px}
.h-open{display:none}
.is-open .h-intro{display:none}
.is-open .h-open{display:flex}
.is-open.is-on .hints-in,.is-open.is-mobile .hints-in{transform:translateY(110%)}

.fadein{position:absolute;inset:0;background:#000;z-index:50;pointer-events:none;animation:fadeOut 1000ms cubic-bezier(0.42,0,0.58,1) .15s forwards}
@keyframes fadeOut{to{opacity:0;visibility:hidden}}

/* dialogs */
.dialog{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:#0000002e;animation:blurIn .35s ease forwards}
.dialog[hidden]{display:none}
@keyframes blurIn{from{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);background:#00000000}to{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#0000002e}}
.dialog-card{position:relative;width:min(560px,100%);max-height:calc(100dvh - 40px);overflow:auto;border-radius:20px;background:#f7f7f5;padding:30px 30px 28px;box-shadow:0px 5px 30px 0px #00000052,0px 30px 60px 0px #00000040;animation:cardIn .5s cubic-bezier(0.12,0.18,0,1.02) both;touch-action:pan-y;user-select:text;-webkit-user-select:text;scrollbar-width:none}
.dialog-card.small{width:min(440px,100%)}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.dialog .x{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:#0000000d}
.dialog .x:hover{background:#0000001a}
.dialog .x svg{width:16px;height:16px;stroke:#000;stroke-width:2;fill:none;stroke-linecap:round}
.eyebrow{font:500 11px/1 "Chivo Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#00000080}
.dialog h2{margin-top:12px;font:700 30px/1.05 "Chivo",sans-serif;letter-spacing:-.03em;color:#0d0d0d;max-width:90%}
.lede{margin-top:12px;font:400 15px/1.5 "Chivo",sans-serif;color:#3a3a3a;max-width:44ch}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px}
.lbl{margin-top:18px;font:500 10px/1 "Chivo Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#00000073}
.cols .lbl{margin-top:0}
.links{list-style:none;margin-top:8px}
.links a{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #00000014;text-decoration:none;font:500 14px/1.25 "Chivo",sans-serif;color:#111}
.links a em{font:300 11px/1.25 "Chivo Mono",monospace;color:#00000073;font-style:normal;white-space:nowrap}
.links a:hover em{color:#000}
.links.row{display:flex;flex-wrap:wrap;gap:8px}
.links.row a{border:0;padding:0 14px;height:34px;align-items:center;border-radius:999px;background:#0000000b}
.links.row a:hover{background:#00000017}
.mailrow{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.btn{height:44px;padding:0 20px;border-radius:999px;display:inline-flex;align-items:center;font:600 14px/1 "Chivo",sans-serif;background:#0000000d;color:#000;text-decoration:none}
.btn:hover{background:#00000017}
.btn.dark{background:#111;color:#fff}
.btn.dark:hover{background:#000}
.mailaddr{margin-top:14px;font:400 12px/1 "Chivo Mono",monospace;color:#00000080}
.nojs{position:fixed;inset:0;display:grid;place-content:center;text-align:center;background:#eee;padding:24px}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .topnav{left:12px;right:12px;top:12px;top:calc(12px + env(safe-area-inset-top))}
  .pill{height:34px;padding:0 15px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
  .back{padding:0 13px 0 9px}
  .hints{width:100%;height:auto}
  .hints-in{position:relative;padding:16px 12px calc(16px + env(safe-area-inset-bottom));gap:26px}
  .hint .h-t,.hint .h-s{font-size:13px}
  .hint .h-s{padding-left:24px}
  .dialog{align-items:end;padding:0}
  .dialog-card,.dialog-card.small{width:100%;border-radius:20px 20px 0 0;padding:26px 22px calc(26px + env(safe-area-inset-bottom));max-height:88dvh}
  .dialog h2{font-size:26px}
  .cols{grid-template-columns:1fr;gap:18px}
  .is-mobile .device{border-radius:0 0 46px 46px;box-shadow:none}
  .is-mobile .screenblock{border-radius:0 0 10px 10px}
  .is-mobile .crt{top:calc(var(--safe,0px) + 58px);border-radius:28px 28px 6px 6px}
  .is-mobile .wheel{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}