:root{font-family:Segoe UI,Microsoft YaHei,sans-serif;color:#f1e8e0;background:#292438;font-synthesis:none;--accent:#efcba6;--muted:#ac9ead;--line:#d8c6d03b}*{box-sizing:border-box}body{margin:0;overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none}[hidden]{display:none!important}#room,canvas{display:block;width:100vw;height:100dvh}canvas{touch-action:none;outline:none;cursor:grab}canvas:active{cursor:grabbing}button{font:inherit;color:inherit;border:0;background:transparent;cursor:pointer;border-radius:8px}button:hover{background:#ffffff0c}button:focus-visible,[role=slider]:focus-visible{outline:1px solid var(--accent);outline-offset:4px}.clock-panel{position:fixed;right:24px;top:24px;width:256px;padding:18px 18px 12px;background:#201b2bd6;border:1px solid #eedeea16;border-radius:16px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 28px #130e2118}.clock-row{display:flex;align-items:center;justify-content:space-between;padding:0 7px 5px}#clock{font-size:32px;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-.035em;line-height:1.25}#pause{width:32px;height:32px;display:grid;place-items:center;color:var(--muted)}#pause:hover{color:var(--accent)}#pause svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.time-axis{display:flex;gap:9px;align-items:center}.key{width:24px;height:32px;flex:none;font-size:12px;color:var(--muted);padding:0;touch-action:none}.key.active{color:var(--accent);background:#efcba612}#timeline{position:relative;flex:1;height:32px;cursor:pointer;touch-action:none;border-radius:4px}.rail{position:absolute;left:0;right:0;top:15px;height:2px;background:var(--line);border-radius:2px;pointer-events:none}.time-point{position:absolute;top:14px;width:4px;height:4px;transform:translate(-50%);border-radius:50%;background:#ae9cae;pointer-events:none}.time-point.active{background:var(--accent)}#time-thumb{position:absolute;top:13px;left:0;width:6px;height:6px;transform:translate(-50%);border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #efcba610;pointer-events:none}#timeline:hover #time-thumb{box-shadow:0 0 0 3px #efcba615}#load-status{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);font-size:13px;background:#201b2bd6;padding:14px 20px;border-radius:12px;max-width:80vw}@media(max-width:500px){.clock-panel{right:12px;top:12px;width:236px;padding:14px 14px 9px}}@media(pointer:coarse){.clock-panel{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:212px;padding:10px 12px 6px}#clock{font-size:26px}.key,#pause{min-height:36px}canvas{cursor:default}}#game-viewport{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;contain:strict;visibility:hidden}body.entered #game-viewport{visibility:visible}#game-stage{position:absolute;top:50%;left:50%;width:var(--game-width,100vw);height:var(--game-height,100dvh);transform:translate(-50%,-50%);overflow:hidden;background:#292438}#room,canvas{width:100%;height:100%}.rotated #game-stage{transform:translate(-50%,-50%) rotate(90deg)}.clock-panel{position:absolute}.studio-home{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));z-index:20;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#201b2bd6;color:#e8d5c2;border:1px solid #eedeea16}.studio-home svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#load-status{position:absolute}.studio-home:focus-visible{outline:1px solid var(--accent);outline-offset:3px}#entry-gate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 40%,#514259,#292438 75%);padding:24px}.entry-moon{width:72px;height:72px;fill:none;stroke:#efcba6;stroke-width:1.5}#entry-gate h1{font-size:26px;letter-spacing:.22em;font-weight:400;margin:28px 0 10px}.entry-subtitle{font-size:10px;letter-spacing:.3em;color:#b9a8ba}#enter-room{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:44px;border:1px solid #efcba62b;border-radius:32px;background:#efcba6;color:#302435;min-width:190px;min-height:52px;padding:12px 26px;font-size:16px}#enter-room svg{width:15px;height:15px;fill:currentColor}#enter-room:hover{background:#ffdbb5}#enter-room:disabled{opacity:.5;cursor:wait}#entry-status{font-size:12px;color:#c6b8c9;margin:18px 0 0;min-height:18px}