html,body{background:#000!important;color:#fff}:root{color-scheme:dark;--text: #f4f4f5;--muted: #d4d4d8;--faint: #71717a;--line: rgba(255, 255, 255, .12);--glass: rgba(12, 12, 14, .78);--ok: #86efac}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;background:#000}::selection{background:#a78bfa59;color:#fff}.sky{position:fixed;inset:0;pointer-events:none;background:radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.55) 50%,transparent 52%),radial-gradient(1px 1px at 28% 68%,rgba(255,255,255,.35) 50%,transparent 52%),radial-gradient(1.4px 1.4px at 72% 18%,rgba(196,181,253,.7) 50%,transparent 52%),radial-gradient(1px 1px at 84% 74%,rgba(255,255,255,.4) 50%,transparent 52%),radial-gradient(1px 1px at 46% 40%,rgba(255,255,255,.28) 50%,transparent 52%),radial-gradient(1px 1px at 63% 86%,rgba(255,255,255,.3) 50%,transparent 52%),radial-gradient(ellipse 70% 50% at 50% 42%,rgba(88,28,135,.28),transparent 70%),linear-gradient(to bottom,#0a0a0c,#120e16 48%,#050506)}.col{position:relative;z-index:1;min-height:100vh;max-width:520px;margin:0 auto;padding:32px 24px 18vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-shadow:0 1px 14px rgba(0,0,0,.55)}.logo{width:58px;height:58px;margin:0 0 18px;filter:drop-shadow(0 8px 24px rgba(167,139,250,.35))}h1{margin:0 0 12px;font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.01em}.lede{margin:0 0 28px;max-width:36rem;color:var(--muted);font-size:14px;line-height:1.55}.widget{position:relative;width:100%;max-width:360px;min-height:78px;padding:14px 14px 28px;border-radius:12px;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-align:left;box-shadow:0 18px 50px #00000059}.go{display:flex;align-items:center;gap:12px;width:calc(100% - 36px);min-height:44px;padding:0;border:0;background:transparent;color:var(--text);font:inherit;font-size:15px;text-align:left;cursor:pointer}.go:focus-visible{outline:2px solid rgba(167,139,250,.8);outline-offset:4px;border-radius:6px}.widget[data-state=busy] .go,.widget[data-state=ok] .go{cursor:default}.tick{flex:none;width:26px;height:26px;border-radius:4px;border:2px solid #a1a1aa;background:#18181b;position:relative}.widget[data-state=busy] .tick{border-color:transparent;border-top-color:#e4e4e7;border-right-color:#e4e4e7;border-radius:50%;animation:spin .7s linear infinite}.widget[data-state=ok] .tick{border-color:var(--ok);background:#86efac1f}.widget[data-state=ok] .tick:after{content:"";position:absolute;left:7px;top:3px;width:6px;height:12px;border:solid var(--ok);border-width:0 2px 2px 0;transform:rotate(45deg)}.widget[data-state=err] .tick{border-color:#fca5a5}.lab{line-height:1.3}.mark{position:absolute;right:14px;top:18px;width:28px;height:28px;opacity:.9}.fine{font-size:11px}.widget .fine{position:absolute;right:14px;bottom:8px;display:flex;gap:10px}a{color:var(--faint);text-decoration:none}a:hover{color:var(--muted)}.note{margin:16px 0 0;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--glass);font-size:14px}.foot{position:fixed;left:0;right:0;bottom:0;z-index:1;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center;padding:14px 18px 18px;color:var(--faint);font-size:12px}.by b{font-weight:650;color:#a1a1aa}@keyframes spin{to{transform:rotate(360deg)}}.puzzle{padding-bottom:16px}.step{margin:0 0 8px;color:var(--faint);font-size:13px}.prompt{margin:0 0 12px;padding:10px 12px;border-radius:10px;border:1px solid rgba(245,210,90,.45);background:#f5d25a14;color:#f5d76e;font-size:14px;line-height:1.4;font-weight:650}.stage{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#20182a;touch-action:manipulation}#board{display:block;width:100%;height:auto;cursor:pointer}.slidebox{margin-top:14px}.track{position:relative;width:min(100%,280px);margin:0 auto;touch-action:none;cursor:ew-resize;user-select:none}#trackimg{display:block;width:100%;height:auto;pointer-events:none}.knob{position:absolute;top:16.67%;height:66.67%;width:5%;border-radius:4px;background:#fff;box-shadow:0 0 0 2px #111;transform:translate(-50%);pointer-events:none}.puzzle .lab{min-height:1.2em;margin:10px 0 0;font-size:13px;color:var(--muted)}.widget[data-state=err] .lab{color:#fca5a5}.widget[data-state=ok] .lab{color:var(--ok)}
