:root{--ink:#f4ecdc;--glass:#1c1e1a94;--line:#f4ecdc38;--gold:#d9b56a;color:var(--ink);font-family:Pretendard,Apple SD Gothic Neo,Malgun Gothic,sans-serif}*{box-sizing:border-box}html,body{background:#1d221c;height:100%;margin:0;overflow:hidden}#scene{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}#scene.can-rub{cursor:grab}#scene.rubbing{cursor:grabbing}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.top{padding:max(16px, env(safe-area-inset-top)) 20px 0;pointer-events:none;align-items:center;gap:12px;display:flex;position:fixed;top:0;left:0;right:0}.top>*{pointer-events:auto}.top h1{letter-spacing:.3em;text-shadow:0 1px 8px #00000080;flex:1;margin:0;font-size:18px;font-weight:600}#back:not([hidden])+h1{flex:1}.pill{background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;padding:9px 16px;font-size:14px}#hotspots{pointer-events:none;position:fixed;inset:0}.hotspot{pointer-events:auto;white-space:nowrap;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:7px 14px;font-size:13px;transition:opacity .3s;position:absolute;top:0;left:0;transform:translate(-50%,-100%)}.hotspot:after{content:"";background:var(--line);width:1px;height:7px;position:absolute;bottom:-7px;left:50%}body.focused #hotspots{opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}.panel{left:50%;bottom:max(20px, env(safe-area-inset-bottom));text-align:center;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:22px;width:min(460px,100% - 32px);padding:16px 18px;position:fixed;transform:translate(-50%)}#guide{margin:0 0 12px;font-size:15px;line-height:1.5}.actions{justify-content:center;gap:10px;display:flex}.action{border:1px solid var(--line);-webkit-user-select:none;user-select:none;touch-action:none;background:#f4ecdc14;border-radius:14px;flex:1;max-width:200px;padding:12px 14px}.action.primary{background:#d9b56a38;border-color:#d9b56a8c}.action:disabled{opacity:.45;cursor:default}.toast{opacity:0;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;white-space:nowrap;border-radius:999px;padding:10px 20px;transition:opacity .5s,transform .5s;position:fixed;top:76px;left:50%;transform:translate(-50%,-8px)}.toast.show{opacity:1;transform:translate(-50%)}.fallback{text-align:center;background:radial-gradient(circle at 50% 30%,#3b4636,#1d221c);place-content:center;gap:8px;padding:24px;display:grid;position:fixed;inset:0}.fallback[hidden]{display:none}.fallback .action{margin:12px auto 0}@media (prefers-reduced-motion:reduce){*{transition:none!important}}.clock{letter-spacing:.05em;opacity:.8;margin-left:6px;font-size:12px;font-weight:400}.presence{font-size:13px}#peers{pointer-events:none;position:fixed;inset:0}.peer-name{white-space:nowrap;border:1px solid var(--line);opacity:0;background:#1c1e1a80;border-radius:999px;padding:3px 9px;font-size:11px;transition:opacity .3s;position:absolute;top:0;left:0}body.focused #peers{visibility:hidden}.actions{flex-wrap:wrap}body.breathing .top,body.breathing .panel,body.breathing #hotspots,body.breathing #peers,body.breathing .credits{opacity:0;pointer-events:none;transition:opacity 1.2s}.breath{pointer-events:none;text-align:center;place-content:center;justify-items:center;gap:14px;display:grid;position:fixed;inset:0}.breath[hidden]{display:none}.breath-circle{background:radial-gradient(circle,#ffecc459,#ffecc40d 70%);border:1px solid #ffecc480;border-radius:50%;width:180px;height:180px;transition:transform .2s linear;transform:scale(.55)}.breath p{letter-spacing:.2em;text-shadow:0 1px 10px #00000080;margin:0;font-size:18px}.breath small{opacity:.6}.modal{z-index:20;background:#0a0c0a73;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal[hidden]{display:none}.modal-box{border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#22241feb;border-radius:20px;width:min(380px,100%);padding:20px}.modal-box h2{margin:0 0 6px;font-size:18px}.modal-box .hint{opacity:.75;margin:0 0 12px;font-size:13px;line-height:1.5}.modal-box textarea{resize:none;border:1px solid var(--line);width:100%;color:var(--ink);font:inherit;background:#f4ecdc0f;border-radius:12px;padding:10px}.swatches{gap:10px;margin:12px 0 2px;display:flex}.swatches[hidden]{display:none}.swatch{border:2px solid #0000;border-radius:50%;width:30px;height:30px}.swatch.on{border-color:var(--gold)}.modal-box .actions{margin-top:14px}.credits{opacity:.65;max-width:min(420px,80vw);font-size:11px;position:fixed;bottom:8px;left:12px}.credits summary{cursor:pointer}.credits p{background:var(--glass);border-radius:8px;margin:4px 0;padding:6px 8px}.credits a{color:var(--gold)}@media (width<=600px){.credits{top:58px;bottom:auto}}.joy{border:1px solid var(--line);touch-action:none;z-index:5;background:#1c1e1a52;border-radius:50%;place-items:center;width:120px;height:120px;display:none;position:fixed;bottom:150px;left:22px}.joy .knob{pointer-events:none;background:#f4ecdc8c;border:1px solid #fff9;border-radius:50%;width:50px;height:50px}@media (pointer:coarse){.joy{display:grid}}body.focused .joy,body.breathing .joy{display:none}.panel{width:auto;max-width:min(520px,100% - 24px);bottom:max(12px, env(safe-area-inset-bottom));border-radius:16px;padding:7px 8px}#guide{opacity:.85;margin:0 4px 6px;font-size:12px;line-height:1.35}.actions{flex-wrap:nowrap;gap:6px}.action{white-space:nowrap;border-radius:10px;flex:0 auto;max-width:none;padding:7px 12px;font-size:13px}@media (width<=420px){.actions{flex-wrap:wrap}.action{padding:7px 10px;font-size:12.5px}}.joy{bottom:110px}.panel{width:max-content}@media (width<=600px){.panel{width:calc(100% - 20px);max-width:none;padding:6px}#guide{white-space:nowrap;text-overflow:ellipsis;margin-bottom:5px;font-size:11.5px;overflow:hidden}.actions{flex-wrap:wrap;gap:5px}.action{flex:auto;padding:7px 8px;font-size:12.5px}.joy{width:104px;height:104px;bottom:125px}}