*{box-sizing:border-box}:root{--panel: rgba(70, 22, 0, .3);--seg: rgba(60, 18, 0, .28);--on-text: #9a3a00;--card: rgba(80, 26, 0, .86);--bg: #ff8c1a}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg)}body{font:13px/1.2 Inter,Segoe UI,system-ui,-apple-system,sans-serif;color:#fff6ec;-webkit-font-smoothing:antialiased;user-select:none}#scene{position:fixed;inset:0;width:100vw;height:100vh;display:block}body.idle{cursor:none}body.idle #ui,body.idle #brand{opacity:0;pointer-events:none;transform:translate(-50%,12px)}body.idle #brand{transform:none}#brand{position:fixed;top:18px;left:22px;font-size:15px;letter-spacing:.02em;font-weight:400;color:#fff6ece6;text-shadow:0 1px 12px rgba(120,40,0,.35);transition:opacity .8s ease}#brand b{font-weight:700}#ui{position:fixed;left:50%;bottom:22px;transform:translate(-50%);max-width:calc(100vw - 24px);display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 14px;background:var(--panel);border:1px solid rgba(255,225,195,.22);border-radius:20px;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 10px 40px #5a1e0040;transition:opacity .8s ease,transform .8s ease}#groups{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px}.group{display:flex;flex-direction:column;gap:5px;align-items:center}.group[hidden]{display:none}.group .label{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#ffeedcb3}.seg{display:flex;gap:2px;padding:3px;background:var(--seg);border-radius:999px}.seg button{border:0;background:transparent;color:inherit;font:inherit;padding:6px 11px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s;white-space:nowrap}.seg button:hover{background:#ffebd729}.seg button.on{background:#fff6ecf2;color:var(--on-text);font-weight:600}.seg.swatches button{width:26px;height:26px;padding:0;border:2px solid transparent}.seg.swatches button.on{border-color:#fff6ec}.controls{display:flex;align-items:center;gap:6px}button.icon{width:34px;height:34px;border-radius:50%;border:0;background:var(--seg);color:inherit;cursor:pointer;display:grid;place-items:center;transition:background .25s}button.icon:hover{background:#ffebd733}button.icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.i-play,.i-off{display:none}body.paused .i-play,body.muted .i-off{display:block}body.paused .i-pause,body.muted .i-on{display:none}.vol{display:flex;align-items:center;gap:6px;padding-right:6px}#volume{width:96px;accent-color:#fff6ec;cursor:pointer}#sound-note{font-size:11px;color:#ffeedcb8;min-height:0}#sound-note:empty{display:none}button.icon[hidden]{display:none}#btn-flash.off{opacity:.45}#btn-flash.off svg{stroke-dasharray:3 3}#warn{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:20px;background:#320f0073;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}#warn[hidden]{display:none}#warn .card{max-width:420px;padding:22px 24px;border-radius:20px;background:var(--card);border:1px solid rgba(255,225,195,.25);box-shadow:0 20px 60px #280a0066}#warn h2{margin:0 0 10px;font-size:18px;font-weight:650}#warn p{margin:0 0 14px;font-size:14px;line-height:1.5;color:#fff0e1e0}#warn .remember{display:flex;gap:8px;align-items:center;font-size:13px;margin-bottom:16px;cursor:pointer}#warn .remember input{accent-color:#ff8c1a}#warn .btns{display:flex;flex-wrap:wrap;gap:8px}#warn .btns button{border:1px solid rgba(255,225,195,.3);background:#ffebd71f;color:inherit;font:inherit;font-size:13px;padding:9px 14px;border-radius:999px;cursor:pointer}#warn .btns button.primary{background:#fff6ec;color:var(--on-text);font-weight:650;border-color:transparent}#warn .btns button.ghost{border-color:transparent;background:transparent}body.warning #ui,body.warning #brand{opacity:0;pointer-events:none}#toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px 18px;border-radius:999px;background:#46160059;backdrop-filter:blur(12px);font-size:14px;opacity:0;pointer-events:none;transition:opacity .5s}#toast.show{opacity:1}#test-banner{position:fixed;top:0;left:0;right:0;padding:8px 12px;font:12px monospace;background:#222;color:#0f0;z-index:9;white-space:pre-wrap}@media (max-width: 640px){#ui{bottom:10px;padding:10px}.seg button{padding:5px 8px;font-size:12px}}body.zoomed #scene{cursor:grab}body.dragging #scene{cursor:grabbing}body.idle #scene{cursor:none}#brand .tag{display:block;margin-top:3px;font-size:11px;font-weight:400;letter-spacing:.04em;opacity:.75}#about{position:fixed;inset:0;z-index:4;display:grid;place-items:center;padding:20px;background:#0f050066;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}#about[hidden]{display:none}.about-card{position:relative;width:min(640px,100%);max-height:min(82vh,780px);display:flex;flex-direction:column;overflow:hidden;border-radius:24px;user-select:text;background:var(--card);border:1px solid rgba(255,225,195,.16);box-shadow:0 30px 80px #0f040080;color:#fff4e8e6}.about-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px 28px;border-bottom:1px solid rgba(255,225,195,.1)}.about-label{font-size:10px;text-transform:uppercase;letter-spacing:.16em;opacity:.6}.about-body{overflow-y:auto;padding:22px 28px 28px;font-size:14.5px;line-height:1.65;scrollbar-width:thin;scrollbar-color:rgba(255,225,195,.25) transparent;-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}.about-body h1{font-size:23px;line-height:1.25;font-weight:650;margin:0 0 12px;color:#fff6ec;letter-spacing:-.01em}.about-body .lead{margin:0 0 10px;color:#fff4e8d1}.about-body h2{margin:28px 0 10px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:#ffeedc99}.about-body ul{list-style:none;margin:0;padding:0}.about-body .uses{display:grid;grid-template-columns:1fr 1fr;gap:8px}.about-body .uses li{padding:10px 12px;border-radius:12px;font-size:13.5px;line-height:1.4;background:#ffebd712;border:1px solid rgba(255,225,195,.1)}.about-body .rows li{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:7px 0;font-size:13.5px;line-height:1.5}.about-body .rows li+li{border-top:1px solid rgba(255,225,195,.08)}.about-body .rows b{font-weight:600;color:#fff6ec}.about-body .keys{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;opacity:.85}.about-body kbd{display:inline-block;min-width:22px;padding:1px 6px;margin-right:5px;text-align:center;font:600 11.5px/18px inherit;border-radius:6px;background:#ffebd724;border:1px solid rgba(255,225,195,.2)}.about-body details{border-radius:12px;background:#ffebd70f;margin-bottom:6px}.about-body summary{list-style:none;cursor:pointer;padding:11px 40px 11px 14px;position:relative;font-size:13.5px;font-weight:600;color:#fff6ec}.about-body summary::-webkit-details-marker{display:none}.about-body summary:after{content:"+";position:absolute;right:15px;top:9px;font-size:17px;opacity:.6;transition:transform .25s}.about-body details[open] summary:after{transform:rotate(45deg)}.about-body details p{margin:0;padding:0 14px 12px;font-size:13.5px;color:#fff4e8cc}.about-body .more{display:flex;flex-wrap:wrap;gap:6px}.about-body .more a{color:inherit;text-decoration:none;font-size:13px;padding:6px 12px;border-radius:999px;background:#ffebd714;border:1px solid rgba(255,225,195,.14);transition:background .2s}.about-body .more a:hover{background:#ffebd733}.about-body .more a[aria-current]{background:#fff6ec;color:var(--on-text);font-weight:600;border-color:transparent}@media (max-width: 560px){.about-body{padding:18px 20px 24px}.about-body .uses{grid-template-columns:1fr}.about-body .rows li{grid-template-columns:1fr;gap:0}}body.about-open #ui,body.about-open #brand{opacity:0;pointer-events:none}button.icon.active{background:#fff6eceb;color:var(--on-text)}body.og #ui,body.og #toast{display:none}#widget{position:fixed;right:22px;bottom:22px;width:42px;height:42px;display:none;background:var(--panel);border:1px solid rgba(255,225,195,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:opacity .8s ease}body.collapsed #widget{display:grid}body.collapsed #ui,body.collapsed #brand{display:none}body.idle #widget{opacity:0;pointer-events:none}.about-body .credits li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:5px 0;font-size:12.5px;line-height:1.45;opacity:.85}.about-body .credits a{color:inherit}@media (max-width: 560px){.about-body .credits li{grid-template-columns:1fr;gap:0}}#ui{flex-direction:row;gap:0;padding:6px 8px;border-radius:999px;max-width:calc(100vw - 16px)}#dock{display:flex;align-items:center;gap:4px}#dock .sep{width:1px;height:22px;margin:0 4px;background:#ffe1c333}.dock-item{position:relative}.dock-item[hidden]{display:none}.dock-btn{position:relative;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:inherit;background:transparent;transition:background .2s,transform .2s}.dock-btn:hover,.dock-item.open>.dock-btn{background:#ffebd729}.dock-btn:active{transform:scale(.94)}.dock-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.dock-btn .swatch{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 2px #fff6ecd9}.dock-btn.active{background:#fff6eceb;color:var(--on-text)}.dock-btn .badge{position:absolute;right:2px;bottom:2px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;font:700 9px/15px inherit;text-align:center;background:#fff6ec;color:var(--on-text)}.dock-btn .badge:empty{display:none}#btn-mute .pulse{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:#fff6ec;display:none}body.needs-sound #btn-mute .pulse{display:block;animation:pulse 1.6s ease-out infinite}#btn-flash.off svg{stroke-dasharray:3 3;opacity:.55}.pop{position:absolute;bottom:100%;left:50%;transform:translate(-50%,6px);padding:10px;margin-bottom:12px;min-width:max-content;background:var(--card);border:1px solid rgba(255,225,195,.18);border-radius:18px;box-shadow:0 14px 40px #14050059;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s}.pop:after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}@media (hover: hover){.dock-item:hover>.pop{opacity:1;visibility:visible;transform:translate(-50%)}}.dock-item.open>.pop{opacity:1;visibility:visible;transform:translate(-50%)}.pop-title{font-size:10px;text-transform:uppercase;letter-spacing:.14em;opacity:.6;margin:0 2px 8px}.pop .group{display:flex;gap:4px}.pop .group .opt-btn{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;padding:8px 4px 6px;border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;font-size:11px;cursor:pointer;transition:background .2s}.pop .group .opt-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.pop .group .opt-btn:hover{background:#ffebd71f}.pop .group .opt-btn.on{background:#fff6ecf2;color:var(--on-text);font-weight:600}.pop .group.swatches .opt-btn{width:30px;height:30px;padding:0;border-radius:50%;border:2px solid transparent}.pop .group.swatches .opt-btn.on{border-color:#fff6ec}#volume{width:150px;display:block}#sound-note{margin-top:6px}.pop-more{left:auto;right:-8px;transform:translateY(6px)}@media (hover: hover){#di-more:hover>.pop{transform:translate(0)}}#di-more.open>.pop{transform:translate(0)}.opt-inline{margin-bottom:10px}.opt-inline .label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.14em;opacity:.6;margin:0 2px 6px}.pop-row{display:flex;gap:4px}#widget-mute{position:fixed;right:72px;bottom:22px;width:42px;height:42px;display:none;background:var(--panel);border:1px solid rgba(255,225,195,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:opacity .8s ease}body.collapsed #widget-mute{display:grid}body.idle #widget-mute{opacity:0;pointer-events:none}#hint{position:fixed;top:18px;right:20px;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;border-radius:999px;font-size:12.5px;background:var(--panel);border:1px solid rgba(255,225,195,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .8s ease,transform .8s ease}#hint.show{opacity:1;transform:none}#hint .ring{position:relative;width:10px;height:10px;border-radius:50%;background:#fff6ec}#hint .ring:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #fff6ec;animation:pulse 1.8s ease-out infinite}@keyframes pulse{0%{transform:scale(.5);opacity:.9}to{transform:scale(1.8);opacity:0}}body.og #hint{display:none}@media (max-width: 640px){.dock-btn{width:38px;height:38px}.pop .group .opt-btn{width:54px;font-size:10px}.pop{max-width:calc(100vw - 20px)}.pop .group{flex-wrap:wrap;justify-content:center}}.pop .group{flex-direction:row;align-items:stretch}.pop .group.seg{display:inline-flex;flex-direction:row;gap:2px;padding:3px;background:var(--seg);border-radius:999px}.dock-btn[hidden]{display:none}.dock-item:has(>.dock-btn[hidden]){display:none}#music-seg{margin-bottom:4px}#music-seg button{border:0;background:transparent;color:inherit;font:inherit;font-size:12.5px;padding:6px 12px;border-radius:999px;cursor:pointer}#music-seg button.on{background:#fff6ecf2;color:var(--on-text);font-weight:600}#btn-mute.music-on:after{content:"\b6 A";position:absolute;top:3px;right:4px;font-size:11px;line-height:1}#btn-info{position:fixed;top:16px;right:18px;width:38px;height:38px;border-radius:50%;z-index:3;display:grid;place-items:center;cursor:pointer;color:#fff6ec;background:var(--panel);border:1px solid rgba(255,225,195,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:opacity .8s ease,background .2s}#btn-info:hover{background:#ffebd733}#btn-info svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}body.idle #btn-info,body.about-open #btn-info,body.og #btn-info{opacity:0;pointer-events:none}#hint{right:66px}#about{padding:0;place-items:stretch;background:#0f050038;backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1)}#about .about-card{width:100%;max-height:none;height:100%;border-radius:0;border:0;box-shadow:none;background:linear-gradient(#1e0a0047,#1e0a0080)}#about .about-head{justify-content:flex-end;padding:16px 18px;border:0;position:absolute;top:0;right:0;z-index:1}#about .about-label{display:none}#about .about-body{width:min(720px,100%);margin:0 auto;padding:70px 28px 80px;font-size:15.5px;height:100%}#about .about-body h1{font-size:26px;margin-top:8px}.welcome{margin:0 0 40px;padding:28px 30px;border-radius:24px;text-align:center;background:#fff0e11a;border:1px solid rgba(255,225,195,.18)}.welcome p{margin:0 auto 12px;max-width:540px;color:#fff4e8e6}.welcome .hello{font-size:22px;font-weight:650;color:#fff6ec;margin-bottom:14px;letter-spacing:-.01em}.welcome .coffee{display:inline-flex;align-items:center;gap:9px;margin:8px 0 16px;padding:12px 22px;border-radius:999px;background:#fff6ec;color:var(--on-text);font-weight:650;font-size:15px;text-decoration:none;box-shadow:0 8px 24px #1e080040;transition:transform .2s,box-shadow .2s}.welcome .coffee:hover{transform:translateY(-2px);box-shadow:0 12px 30px #1e08004d}.welcome .coffee svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.welcome .sig{margin:0;font-size:14px;opacity:.8}.welcome .sig span{font-style:italic}@media (max-width: 560px){.welcome{padding:22px 18px}#about .about-body{padding:64px 18px 60px}}@media (max-width: 640px){#ui{bottom:10px;padding:4px 5px;max-width:calc(100vw - 12px)}#dock{gap:0}#dock .sep{display:none}.dock-btn{width:34px;height:34px}.dock-btn svg{width:19px;height:19px}.dock-btn .swatch{width:16px;height:16px}.dock-item{position:static}.pop,.pop-more{position:fixed;left:8px;right:8px;bottom:62px;margin:0;min-width:0;max-width:none;transform:translateY(6px);max-height:60vh;overflow-y:auto}.dock-item.open>.pop,#di-more.open>.pop{transform:none}.pop .group{flex-wrap:wrap;justify-content:center}.pop .group .opt-btn{width:60px}.pop-title,.opt-inline{text-align:center}.pop-row{flex-wrap:wrap;justify-content:center}#volume{width:100%}#music-seg{display:flex;justify-content:center}#brand .tag{display:none}#hint{top:62px;right:12px;font-size:11.5px}#btn-info{top:12px;right:12px}#widget{right:12px;bottom:12px}#widget-mute{right:62px;bottom:12px}}@media (max-width: 640px){#ui{width:max-content}.pop,.pop-more{position:absolute;left:50%;right:auto;bottom:100%;margin-bottom:10px;width:calc(100vw - 16px);transform:translate(-50%,6px)}.dock-item.open>.pop,#di-more.open>.pop{transform:translate(-50%)}}@media (hover: none){#ui{bottom:10px;padding:4px 5px;max-width:calc(100vw - 12px);width:max-content}#dock{gap:0}#dock .sep{display:none}.dock-btn{width:38px;height:38px}.dock-item{position:static}.pop,.pop-more{position:absolute;left:50%;right:auto;bottom:100%;margin-bottom:10px;width:min(560px,calc(100vw - 16px));min-width:0;max-height:70vh;overflow-y:auto;transform:translate(-50%,6px)}.dock-item.open>.pop,#di-more.open>.pop{transform:translate(-50%)}.pop .group,.pop-row{flex-wrap:wrap;justify-content:center}.pop-title,.opt-inline{text-align:center}#volume{width:100%}}#ui{bottom:calc(10px + env(safe-area-inset-bottom))}#widget,#widget-mute{bottom:calc(12px + env(safe-area-inset-bottom))}#btn-info{top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right))}#brand{top:calc(16px + env(safe-area-inset-top));left:calc(20px + env(safe-area-inset-left))}@media (min-width: 641px) and (hover: hover){#ui{bottom:calc(22px + env(safe-area-inset-bottom))}}html,body{height:100%;height:100dvh}#scene{position:fixed;inset:0;width:100%;height:100%}#brand{display:flex;align-items:center;gap:9px}#brand .logo{width:34px;height:34px;color:#fff6ec;flex:none;filter:drop-shadow(0 1px 6px rgba(90,30,0,.3))}#brand .words{display:flex;flex-direction:column}#brand .word{font-size:16px;letter-spacing:.01em;line-height:1.1}#brand .tag{margin-top:2px}.welcome-logo{width:92px;height:92px;margin:0 auto 10px;color:#fff6ec}.welcome-logo .logo{width:100%;height:100%}@media (max-width: 640px){#brand .logo{width:30px;height:30px}#brand .word{font-size:15px}}body.shot #brand,body.shot #btn-info,body.shot #hint{display:none}#stamp{position:fixed;right:2.2vmin;bottom:2vmin;display:flex;align-items:center;gap:1vmin;color:#fff6ec;opacity:.78;font:500 1.75vmin/1 Segoe UI,system-ui,sans-serif;letter-spacing:.02em;filter:drop-shadow(0 .15vmin .8vmin rgba(60,20,0,.35))}#stamp .logo{width:4.2vmin;height:4.2vmin}