:root{color-scheme:dark;--cream:#f1e6cc;--muted:#b8c5c2;--accent:#df9c6d}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#14252e;color:var(--cream);font-family:Arial,Helvetica,sans-serif}body{overscroll-behavior:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible{outline:2px solid #f5ca8c;outline-offset:5px}button{border:0}button:hover{filter:brightness(1.12)}[hidden]{display:none!important}#world{position:fixed;inset:0;width:100%;height:100%;touch-action:none}.topbar{position:fixed;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:calc(25px + env(safe-area-inset-top)) max(30px,env(safe-area-inset-right)) 20px max(30px,env(safe-area-inset-left));pointer-events:none}.topbar>*{pointer-events:auto}.wordmark{font-size:18px;letter-spacing:-1px;font-weight:900;text-decoration:none;color:var(--cream)}.wordmark span{font:9px monospace;letter-spacing:1px;margin-left:8px;color:#d4dbce}.top-actions{display:flex;gap:10px;align-items:center}.top-actions button{background:#14252e80;border:1px solid #d8dece40;border-radius:30px;height:36px;min-width:36px;padding:0 11px;backdrop-filter:blur(8px);font:9px monospace;letter-spacing:1px}#fullscreen,#pause{font:20px Arial;padding:0 8px}.screen{position:fixed;inset:0;z-index:2;overflow-y:auto;padding:130px 8vw 50px;background:linear-gradient(90deg,#14252eeb 0%,#14252e99 35%,transparent 75%)}.menu-copy{max-width:430px}.eyebrow{font:10px monospace;letter-spacing:2px;color:var(--muted)}h1{font-size:clamp(68px,7.7vw,116px);font-weight:500;letter-spacing:-.07em;line-height:.88;margin:35px 0 25px}h1 em{font-family:Georgia,serif;font-weight:400;color:#efc89a}h1 .title-dot{color:#d97952}.tagline{font-size:18px;letter-spacing:-.4px;margin:0 0 14px}.description{font-size:13px;color:#b9c6c6;line-height:1.8;margin:0 0 30px}.primary{background:#eedcc0;color:#22343a;padding:18px 24px;display:flex;justify-content:space-between;width:100%;font-size:11px;letter-spacing:1px;min-height:54px}.primary>span{font-size:19px;line-height:14px}.mode-row{display:flex;gap:8px;margin-top:10px}.mode-row button{flex:1;background:#1e3943bb;border:1px solid #a3b0a04a;padding:13px 8px;font-size:11px}.menu-bottom{display:flex;gap:12px;border-top:1px solid #b3c2b02e;margin-top:28px;padding-top:18px}.menu-bottom button{background:transparent;text-align:left;font-size:11px;flex:1;padding:4px 0}.menu-bottom button span{display:block;font:9px monospace;margin-top:8px;color:#b6c4be}#help-open{flex:0 0 28px;text-align:center;border:1px solid #b3c2b052;border-radius:50%;height:28px}.record{font:9px monospace;letter-spacing:1px;color:#9fb2b2;margin-top:24px}.menu-side{position:absolute;right:35px;top:30%;display:flex;flex-direction:column;align-items:center;gap:24px;font:9px monospace;writing-mode:vertical-rl;letter-spacing:3px}.side-rule{height:100px;width:1px;background:#a7bfb450}#hud{position:fixed;z-index:2;top:calc(95px + env(safe-area-inset-top));left:30px;right:30px;pointer-events:none}.hud-line{display:flex;align-items:center;gap:25px;font:11px monospace;text-shadow:0 2px 5px #000}.hud-line strong{margin-left:auto;font-size:20px;font-weight:400}.progress-track{height:2px;background:#cce2d638;margin-top:12px}#progress{height:100%;width:0;background:#f0d2a0;transition:width .1s linear}#phase-label{font:10px monospace;letter-spacing:2px;margin-top:16px;text-shadow:0 2px 4px #000}#tap-hint{position:fixed;z-index:2;bottom:calc(120px + env(safe-area-inset-bottom));left:20px;right:20px;text-align:center;font:9px monospace;letter-spacing:1px;pointer-events:none;color:#e6ddc4}#hint-text{background:#14252ebf;padding:10px 12px;display:inline-block;max-width:100%;border-radius:4px}.switch-button{position:fixed;z-index:3;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#152e38d9;backdrop-filter:blur(12px);border:1px solid #cee1c16b;min-width:260px;padding:17px 28px 12px;border-radius:60px;font:11px monospace;letter-spacing:1px;touch-action:manipulation}.switch-button>span{font-size:20px;margin-left:14px;vertical-align:middle}.switch-button small{display:block;font-size:7px;letter-spacing:2px;margin-top:5px;opacity:.6}.overlay{position:fixed;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;background:#0b1c28b8;backdrop-filter:blur(13px);padding:25px;overflow-y:auto}.panel{width:100%;max-width:500px;background:#192f39f5;border:1px solid #a4b9ac4a;padding:38px;box-shadow:0 30px 150px #07101855;max-height:calc(100dvh - 50px);overflow-y:auto}.panel h2{font:normal 44px/.98 Georgia,serif;letter-spacing:-2px;margin:20px 0 24px}.panel p{font-size:13px;line-height:1.8;color:#bdceca}.panel .secondary{width:100%;background:transparent;border:1px solid #b3c6b34a;padding:14px;margin-top:10px;font-size:11px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;border-block:1px solid #b3c6b32e;padding:20px 0;margin:20px 0}.stats b{display:block;font:26px Georgia,serif;color:#f2d7af}.stats span{font:8px monospace;display:block;margin-top:7px;color:#a5b9b9}.level-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}.level-grid button{background:#264450;border:1px solid #91b5aa40;padding:15px 10px;text-align:left;font-size:12px;min-height:74px}.level-grid small{display:block;font:9px monospace;opacity:.65;margin-top:7px}.level-grid b{font:10px monospace;color:#f1cea1;display:block;margin-bottom:7px}.look-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.look-grid button{background:#264450;border:1px solid #91b5aa40;padding:16px 10px;font-size:12px}.look-grid button.selected{border-color:#efd4ac}.look-grid i{display:block;width:25px;height:35px;border-radius:9px 9px 3px 3px;margin:0 auto 12px;box-shadow:0 0 20px #ffffff16}.look-grid small{display:block;font:9px monospace;color:#c1cfbc;margin-top:8px}.help-step{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid #b3c6b32e}.help-step b{color:#f1cea1;font:25px Georgia}.help-step p{margin:0}.help-step strong{color:#f3e5c9}.panel-footer{font:9px/1.6 monospace!important;color:#95b0ae!important}#toast{position:fixed;z-index:20;bottom:calc(25px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#e9d8bb;color:#20343d;padding:12px 20px;font-size:11px;opacity:0;pointer-events:none;transition:opacity .2s;text-align:center;max-width:90%;width:max-content}#toast.visible{opacity:1}noscript{position:fixed;inset:30%;z-index:20;background:#14252e;padding:30px}@media(max-width:600px){.topbar{padding:calc(18px + env(safe-area-inset-top)) 20px 10px}.wordmark{font-size:16px}.wordmark span{font-size:8px}.top-actions{gap:6px}.top-actions button{font-size:8px;padding:0 9px;height:32px;min-width:32px}.screen{padding:110px 26px 30px;background:linear-gradient(90deg,#14252edb, #14252e75 70%,#14252e20)}h1{font-size:82px;margin-top:28px}.menu-copy{max-width:350px}.menu-side{display:none}.description{margin-bottom:24px}.menu-bottom{margin-top:20px}.record{font-size:8px}.tagline{font-size:16px}.panel{padding:28px 23px}.panel h2{font-size:38px}#hud{left:20px;right:20px;top:calc(80px + env(safe-area-inset-top))}.hud-line{font-size:9px;gap:12px}.hud-line strong{font-size:18px}#tap-hint{font-size:8px;bottom:calc(110px + env(safe-area-inset-bottom))}}@media(max-height:660px) and (min-width:600px){.screen{padding-top:85px;padding-bottom:15px}h1{font-size:64px;margin:20px 0}.description{margin-bottom:14px}.menu-copy{max-width:370px}.menu-bottom{margin-top:15px;padding-top:12px}.record{margin-top:12px}.primary{padding:14px 20px;min-height:45px}.mode-row button{padding:10px}.menu-side{top:20%}}@media(max-width:600px) and (max-height:720px){.screen{padding-top:88px}h1{font-size:68px;margin:22px 0 18px}.description{font-size:12px;margin-bottom:18px}.menu-bottom{margin-top:16px;padding-top:12px}.record{margin-top:15px}.primary{padding:15px 20px}.mode-row button{padding:11px 6px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}