:root{--ink:#eaf6ff;--accent:#39d0ff;--accent-soft:#7fe0ff;--panel:#0a1a289e;--panel-line:#78d2ff59}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;background:#0a1a2f;font-family:Pretendard,system-ui,-apple-system,Apple SD Gothic Neo,sans-serif;overflow:hidden}#app{position:fixed;inset:0}#app canvas{display:block}.hud{pointer-events:none;z-index:10;position:fixed;inset:0}.hud .glass{background:var(--panel);border:1px solid var(--panel-line);-webkit-backdrop-filter:blur(10px)saturate(1.1);border-radius:14px;box-shadow:0 10px 40px #00000059,inset 0 1px #ffffff0f}.progress{top:max(18px, env(safe-area-inset-top));align-items:center;gap:10px;padding:9px 14px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.progress .dot{background:#b4dcf547;border-radius:50%;width:9px;height:9px;transition:all .4s}.progress .dot.done{background:var(--accent-soft)}.progress .dot.active{background:var(--accent);box-shadow:0 0 12px var(--accent);transform:scale(1.5)}.stage{top:max(16px, env(safe-area-inset-top));left:max(16px, env(safe-area-inset-left));min-width:190px;padding:12px 18px;position:absolute}.stage .kicker{letter-spacing:3px;color:var(--accent);text-transform:uppercase;opacity:.9;font-size:11px}.stage .title{margin-top:3px;font-size:24px;font-weight:700;line-height:1.1}.stage .en{color:#9fc4dc;letter-spacing:1px;margin-top:2px;font-size:12px}.vrnote{top:max(16px, env(safe-area-inset-top));right:max(16px, env(safe-area-inset-right));color:#a7cadf;align-items:center;gap:8px;padding:10px 14px;font-size:12px;display:flex;position:absolute}.vrnote .glyph{background:#e8b53a;border-radius:50%;width:8px;height:8px;box-shadow:0 0 8px #e8b53a}.audiobtn{top:max(60px, calc(env(safe-area-inset-top) + 48px));right:max(16px, env(safe-area-inset-right));pointer-events:auto;border:1px solid var(--panel-line);width:42px;height:42px;color:var(--ink);cursor:pointer;border-radius:50%;place-items:center;font-size:18px;line-height:1;transition:transform .15s,opacity .2s;display:grid;position:absolute}.audiobtn:hover{transform:scale(1.08)}.audiobtn.off{opacity:.55}.caption{left:50%;bottom:max(96px, calc(env(safe-area-inset-bottom) + 92px));text-align:center;opacity:0;text-shadow:0 2px 12px #00000080;width:min(760px,100vw - 40px);padding:16px 22px;font-size:17px;line-height:1.55;transition:opacity .6s;position:absolute;transform:translate(-50%)}.caption.show{opacity:1}.advance{right:max(20px, env(safe-area-inset-right));bottom:max(28px, calc(env(safe-area-inset-bottom) + 22px));pointer-events:auto;color:#04121d;background:linear-gradient(180deg, var(--accent-soft), var(--accent));cursor:pointer;letter-spacing:.5px;opacity:0;border:none;border-radius:40px;padding:15px 26px;font-size:16px;font-weight:700;transition:transform .15s,box-shadow .2s,opacity .3s;position:absolute;transform:translateY(0);box-shadow:0 8px 26px #39d0ff66}.advance.show{opacity:1}.advance:hover{transform:translateY(-2px);box-shadow:0 12px 32px #39d0ff8c}.advance:active{transform:translateY(1px)}.advance.replay{background:linear-gradient(#cfe1ec,#9fb8c8)}.wsicta{left:50%;bottom:max(150px, calc(env(safe-area-inset-bottom) + 146px));color:#04121d;background:linear-gradient(180deg, var(--accent-soft), var(--accent));cursor:pointer;letter-spacing:.3px;opacity:0;pointer-events:none;border:none;border-radius:40px;padding:14px 30px;font-size:16px;font-weight:800;transition:opacity .4s,transform .15s,box-shadow .2s;position:absolute;transform:translate(-50%);box-shadow:0 10px 30px #39d0ff80}.wsicta.show{opacity:1;pointer-events:auto}.wsicta:hover{transform:translate(-50%)translateY(-2px);box-shadow:0 14px 38px #39d0ff9e}.wsi-overlay{z-index:50;opacity:0;pointer-events:none;background:#0a1622;flex-direction:column;transition:opacity .4s;display:flex;position:fixed;inset:0}.wsi-overlay.show{opacity:1;pointer-events:auto}.wsi-bar{background:var(--panel);border-bottom:1px solid var(--panel-line);flex:none;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;display:flex}.wsi-title{color:var(--ink);font-size:15px;font-weight:700}.wsi-close{color:#04121d;background:linear-gradient(180deg, var(--accent-soft), var(--accent));cursor:pointer;border:none;border-radius:30px;flex:none;padding:9px 18px;font-size:14px;font-weight:700}.wsi-frame{background:#fff;border:none;flex:auto;width:100%}.intro{pointer-events:auto;text-align:center;background:radial-gradient(circle at 50% 40%,#0a1e328c,#050e1ae6);flex-direction:column;justify-content:center;align-items:center;gap:26px;transition:opacity .8s;display:flex;position:absolute;inset:0}.intro.hide{opacity:0;pointer-events:none}.intro h1{letter-spacing:-1px;background:linear-gradient(180deg, #fff, var(--accent-soft));color:#0000;filter:drop-shadow(0 4px 24px #39d0ff59);-webkit-background-clip:text;background-clip:text;font-size:clamp(40px,8vw,74px);font-weight:800}.intro .lead{color:#bcd8ec;max-width:560px;padding:0 20px;font-size:clamp(15px,3.4vw,19px);line-height:1.7}.intro .start{pointer-events:auto;color:#04121d;background:linear-gradient(180deg, var(--accent-soft), var(--accent));cursor:pointer;border:none;border-radius:46px;margin-top:6px;padding:18px 46px;font-size:19px;font-weight:700;transition:transform .15s;box-shadow:0 10px 34px #39d0ff73}.intro .start:hover{transform:scale(1.04)}.intro .meta{color:#7fa3ba;letter-spacing:1px;font-size:12px}.intro .credit{color:#5f7d92;letter-spacing:.5px;opacity:.85;margin-top:2px;font-size:10px}.loading{color:#8fc8e6;letter-spacing:2px;z-index:20;background:#0a1a2f;justify-content:center;align-items:center;font-size:15px;transition:opacity .5s;display:flex;position:absolute;inset:0}.loading.hide{opacity:0;pointer-events:none}@media (max-width:560px){.vrnote{display:none}.audiobtn{top:max(14px, env(safe-area-inset-top));width:38px;height:38px;font-size:16px}.progress{top:auto;bottom:max(24px, calc(env(safe-area-inset-bottom) + 20px));padding:7px 11px;left:20px;transform:none}.stage{min-width:150px;padding:10px 14px}.stage .title{font-size:20px}.caption{bottom:max(88px, calc(env(safe-area-inset-bottom) + 84px));font-size:15px}.advance{padding:13px 20px;font-size:14px}.vrnote{padding:8px 10px;font-size:11px}}