:root{--ink:#fffaf2;--glass:#14182861;--glass-strong:#1418289e;--line:#ffffff38;--accent:#ffd8a0;color:var(--ink);font-family:system-ui,-apple-system,Apple SD Gothic Neo,Noto Sans KR,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;background:#0b1026;height:100%;margin:0;overflow:hidden}#scene{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}#ui>*{position:fixed}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:.6em 1.4em}button.primary{background:var(--ink);color:#1d2238;border-color:#0000;padding:.75em 2.4em;font-size:1.05rem;font-weight:600}button.ghost.small{padding:.35em .8em;font-size:.85rem}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.intro{inset:auto 16px max(48px, env(safe-area-inset-bottom)) 16px;text-align:center;opacity:0;pointer-events:none;text-shadow:0 1px 12px #00000073;transition:opacity .8s}.intro.show{opacity:1;pointer-events:auto}.intro h1{letter-spacing:.06em;margin:0 0 .3em;font-size:clamp(2.4rem,9vw,3.6rem);font-weight:300}.lead{opacity:.9;margin:0 0 .8em}.who{opacity:.85;margin:0 0 .8em;font-size:.9rem}.who b{color:var(--accent);font-weight:600}.hud{pointer-events:none;opacity:0;transition:opacity 1s;inset:0}.hud.show{opacity:1}.hud-top{top:max(14px, env(safe-area-inset-top));justify-content:space-between;align-items:center;display:flex;position:absolute;left:16px;right:16px}.hud-top>*{pointer-events:auto}.chip{font:inherit;color:inherit;cursor:pointer;background:var(--glass);-webkit-backdrop-filter:blur(8px);border:0;border-radius:999px;padding:.35em .9em;font-size:.82rem}button.icon{width:2.4rem;height:2.4rem;padding:0;font-size:1.1rem}.status{left:50%;bottom:max(20px, env(safe-area-inset-bottom));background:var(--glass);-webkit-backdrop-filter:blur(8px);white-space:nowrap;background-image:linear-gradient(var(--accent), var(--accent));background-position:0 100%;background-repeat:no-repeat;background-size:calc(var(--p,0) * 100%) 2px;border-radius:999px;margin:0;padding:.4em 1em;font-size:.85rem;position:absolute;transform:translate(-50%)}.hint{text-align:center;opacity:0;text-shadow:0 1px 10px #00000080;margin:0;transition:opacity 1.2s;position:absolute;top:42%;left:0;right:0}.hint.show{opacity:.9}.panel{top:calc(max(14px, env(safe-area-inset-top)) + 3rem);background:var(--glass-strong);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;flex-direction:column;gap:.9rem;width:min(320px,100vw - 32px);max-height:calc(100dvh - 6rem);padding:1rem 1.1rem;display:none;right:16px;overflow-y:auto}.panel.open{display:flex}.panel h2{margin:0;font-size:1rem;font-weight:600}.panel .label{opacity:.8;font-size:.85rem}.row{justify-content:space-between;align-items:center;gap:1rem;display:flex}.row input[type=checkbox]{width:1.2rem;height:1.2rem;accent-color:var(--accent)}.time input[type=range]{width:100%;accent-color:var(--accent);margin:.6rem 0}.clock-label{font-variant-numeric:tabular-nums;opacity:.85}.presets{flex-wrap:wrap;gap:.4rem;display:flex}.themes{flex-direction:column;gap:.5rem;display:flex}button.theme{padding:.45em 1em;font-size:.9rem}button.theme[aria-pressed=true]{background:var(--ink);color:#1d2238}button{transition:transform .12s,background-color .2s}button:active{transform:scale(.94)}button.reroll .spin{margin-right:.3em;display:inline-block}button.reroll.done{animation:.6s reroll-flash}button.reroll.done .spin{animation:.6s reroll-spin}.chip.done,.me-name.done{animation:.9s name-glow}@keyframes reroll-spin{to{transform:rotate(360deg)}}@keyframes reroll-flash{0%,35%{background:var(--accent);color:#1d2238}}@keyframes name-glow{0%{color:#1d2238;background:var(--accent)}}@media (prefers-reduced-motion:reduce){button.reroll.done .spin{animation:none}}.fade{opacity:0;pointer-events:none;background:#05070f;transition:opacity .7s;inset:0}.fade.on{opacity:1}.hud-buttons{align-items:center;gap:.5rem;display:flex}button.view{padding:.5em 1em;font-size:.85rem}.intro{inset:calc(max(14px, env(safe-area-inset-top)) + 3.2rem) 16px auto 16px;pointer-events:none!important}.how{opacity:.9;margin:0;font-size:.88rem;line-height:1.6}.how b{color:var(--accent)}.status{display:none}.status.show{display:block}button.action{left:50%;bottom:calc(max(20px, env(safe-area-inset-bottom)) + 3rem);pointer-events:auto;display:none;position:absolute;transform:translate(-50%);box-shadow:0 0 24px #ffd8a099}button.action.show{display:block}.joy{left:24px;bottom:max(28px, env(safe-area-inset-bottom));border:1px solid var(--line);pointer-events:none;opacity:.55;background:#14182838;border-radius:50%;width:120px;height:120px;position:fixed}.joy.active{opacity:.9}.joy-knob{background:#fffaf2bf;border-radius:50%;width:44px;height:44px;position:absolute;top:38px;left:38px}.me-name{color:var(--accent,#ffd9a0);font-weight:600}.presets .note{opacity:.7;align-self:center;font-size:.75rem}button.fire.done{animation:.6s reroll-flash}.keys{left:16px;bottom:max(20px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(6px);opacity:.8;pointer-events:none;background:#14182847;border-radius:14px;flex-direction:column;gap:.35rem;padding:.6rem .75rem;font-size:.78rem;display:flex;position:absolute}.keys .key-row{align-items:center;gap:.6rem;display:flex}.keys .key-row[hidden]{display:none}.keys .pad{grid-template-rows:repeat(2,1.6rem);grid-template-columns:repeat(3,1.6rem);gap:.2rem;display:grid}.keys .pad kbd:first-child{grid-area:1/2}.keys .pad kbd:nth-child(2){grid-area:2/1}.keys .pad kbd:nth-child(3){grid-area:2/2}.keys .pad kbd:nth-child(4){grid-area:2/3}.keys kbd{font:inherit;border:1px solid var(--line);background:#ffffff14;border-bottom-width:2px;border-radius:6px;place-items:center;min-width:1.6rem;height:1.6rem;padding:0 .35rem;font-size:.72rem;font-weight:600;transition:background-color .12s,color .12s;display:grid}.keys kbd.wide{min-width:3.4rem}.keys kbd.on{background:var(--accent);color:#1d2238}.keys .what{opacity:.9}.keys .mouse{opacity:.7;margin:.1rem 0 0;font-size:.72rem}@media (max-width:700px),(max-height:520px){.keys{display:none}}