:root{--bg: #0b0b0f;--fg: #f4f4f6;--fg-dim: rgba(244, 244, 246, .55);--fg-faint: rgba(244, 244, 246, .12);--panel-bg: rgba(20, 20, 26, .92);--panel-border: rgba(255, 255, 255, .08);--accent: #ffffff;--safe-top: env(safe-area-inset-top, 0);--safe-bottom: env(safe-area-inset-bottom, 0)}@media (prefers-color-scheme: light){:root{--bg: #fafafa;--fg: #14141a;--fg-dim: rgba(20, 20, 26, .55);--fg-faint: rgba(20, 20, 26, .12);--panel-bg: rgba(255, 255, 255, .94);--panel-border: rgba(0, 0, 0, .08);--accent: #14141a}}:root[data-theme=light]{--bg: #fafafa;--fg: #14141a;--fg-dim: rgba(20, 20, 26, .55);--fg-faint: rgba(20, 20, 26, .12);--panel-bg: rgba(255, 255, 255, .94);--panel-border: rgba(0, 0, 0, .08);--accent: #14141a}:root[data-theme=dark]{--bg: #0b0b0f;--fg: #f4f4f6;--fg-dim: rgba(244, 244, 246, .55);--fg-faint: rgba(244, 244, 246, .12);--panel-bg: rgba(20, 20, 26, .92);--panel-border: rgba(255, 255, 255, .08);--accent: #ffffff}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;width:100%;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;overflow:hidden}body{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#surface{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.hint{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;font-size:1rem;letter-spacing:.01em;color:var(--fg-dim);pointer-events:none;text-align:center;transition:opacity .4s ease;font-weight:400}.hint.hidden{opacity:0}.icon-btn{position:fixed;top:calc(env(safe-area-inset-top,0) + 12px);right:calc(env(safe-area-inset-right,0) + 12px);width:44px;height:44px;display:grid;place-items:center;background:transparent;color:var(--fg-dim);border:1px solid transparent;border-radius:50%;cursor:pointer;transition:color .2s ease,background .2s ease,border-color .2s ease;-webkit-tap-highlight-color:transparent;z-index:10}.icon-btn:hover,.icon-btn:focus-visible{color:var(--fg);background:var(--fg-faint);outline:none}.icon-btn.small{position:static;width:32px;height:32px}.pill-btn{position:fixed;bottom:calc(env(safe-area-inset-bottom,0) + 24px);left:50%;transform:translate(-50%);padding:12px 28px;background:var(--accent);color:var(--bg);border:none;border-radius:999px;font-size:1rem;font-weight:600;font-family:inherit;letter-spacing:.01em;cursor:pointer;z-index:5;box-shadow:0 6px 24px #00000040;transition:transform .15s ease,opacity .2s ease}.pill-btn:active{transform:translate(-50%) scale(.97)}.pill-btn[hidden]{display:none}.pill-btn.ghost{background:transparent;color:var(--fg-dim);box-shadow:none;font-weight:400;pointer-events:none}.reveal-overlay{position:fixed;bottom:calc(env(safe-area-inset-bottom,0) + 24px);left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:6;pointer-events:none}.reveal-overlay[hidden]{display:none}.reveal-note{margin:0;padding:8px 18px;font-size:.92rem;font-weight:500;letter-spacing:.01em;color:var(--fg);background:var(--panel-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--panel-border);border-radius:999px;text-align:center;box-shadow:0 4px 18px #0000002e}#reveal-reset-btn{pointer-events:auto}.panel{position:fixed;top:0;right:0;bottom:0;width:min(380px,100%);background:var(--panel-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-left:1px solid var(--panel-border);transform:translate(100%);transition:transform .28s cubic-bezier(.32,.72,.24,1);z-index:20;display:flex;flex-direction:column;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);overflow:hidden}.panel.open{transform:translate(0)}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--panel-border)}.panel-header h2{margin:0;font-size:1.1rem;font-weight:600}.panel-body{flex:1;overflow-y:auto;padding:12px 20px 24px;-webkit-overflow-scrolling:touch}.backdrop{position:fixed;inset:0;background:#00000059;z-index:15;opacity:0;pointer-events:none;transition:opacity .25s ease}.backdrop.show{opacity:1;pointer-events:auto}.setting{padding:14px 0;border-bottom:1px solid var(--panel-border)}.setting:last-child{border-bottom:none}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.setting-label{font-size:.95rem;font-weight:500}.setting-hint{font-size:.8rem;color:var(--fg-dim);margin-top:4px}.seg{display:inline-flex;background:var(--fg-faint);border-radius:8px;padding:2px;gap:2px;flex-wrap:wrap}.seg button{background:transparent;border:none;color:var(--fg-dim);font-family:inherit;font-size:.85rem;padding:6px 10px;border-radius:6px;cursor:pointer;transition:background .15s ease,color .15s ease;font-weight:500}.seg button.active{background:var(--accent);color:var(--bg)}.toggle{position:relative;width:44px;height:26px;flex-shrink:0}.toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.toggle .track{position:absolute;inset:0;background:var(--fg-faint);border-radius:999px;transition:background .2s ease}.toggle .thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--fg);transition:transform .2s ease}.toggle input:checked~.track{background:var(--accent)}.toggle input:checked~.thumb{transform:translate(18px);background:var(--bg)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--fg-faint);border-radius:999px;outline:none;margin-top:8px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}.range-value{font-size:.8rem;color:var(--fg-dim);font-variant-numeric:tabular-nums;min-width:40px;text-align:right}.footer-note{font-size:.75rem;color:var(--fg-dim);text-align:center;padding:16px 0 4px;letter-spacing:.02em}@media (max-width: 480px){.panel{width:100%;border-left:none}}
