:root{--bg: #04050c;--fg: #eaf0ff;--muted: rgba(206, 220, 255, .62);--faint: rgba(206, 220, 255, .36);--accent: #8fb6ff;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);font-family:system-ui,-apple-system,Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic,Meiryo,sans-serif;color:var(--fg)}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;width:100%;overflow:hidden;background:var(--bg);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}#app{position:fixed;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}#stage{position:absolute;inset:0;width:100%;height:100%;display:block}#ui{position:absolute;inset:0;pointer-events:none}.intro{pointer-events:auto}.readout{position:absolute;top:calc(var(--safe-t) + 14px);left:calc(var(--safe-l) + 16px);pointer-events:none;opacity:0;transition:opacity .6s ease}.readout.show{opacity:1}.readout .exp{font-variant-numeric:tabular-nums;font-size:clamp(20px,5.4vw,30px);font-weight:300;line-height:1;white-space:nowrap;text-shadow:0 2px 18px rgba(0,0,0,.6)}.readout .exp b{font-weight:500}.readout .exp sup{font-size:.5em;position:relative;top:-.72em;margin:0 .04em;font-weight:400}.readout .name{margin-top:5px;font-size:12px;color:var(--muted);letter-spacing:.04em;min-height:1.2em;line-break:strict}.readout .lt{margin-top:3px;font-size:11px;color:#cedcff80;letter-spacing:.05em;font-variant-numeric:tabular-nums;min-height:1.2em}.hint{line-break:strict;text-wrap:balance}.earth-marker{position:absolute;width:22px;height:22px;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .6s ease}.earth-marker.show{opacity:.9}.earth-marker .ring{width:22px;height:22px;border:1.5px solid rgba(170,198,255,.5);border-radius:50%;box-shadow:0 0 10px #8fb6ff59;position:relative}.earth-marker .tag{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:5px;font-size:11px;letter-spacing:.08em;color:var(--fg);text-shadow:0 1px 8px rgba(0,0,0,.9);white-space:nowrap}.sky{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(to bottom,#7eb2ec99,#6098dc6b 26%,#3e70be29 46%,#14285a0a 62%,#0000 74%)}.marker-toggle{position:absolute;top:calc(var(--safe-t) + 14px);right:calc(var(--safe-r) + 14px);pointer-events:auto;display:flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:999px;border:1px solid rgba(150,180,255,.2);background:#0c102280;color:var(--muted);font-size:11.5px;letter-spacing:.05em;cursor:pointer;font-family:inherit;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .6s ease,color .2s ease,background .2s ease}.marker-toggle.show{opacity:1}.marker-toggle:hover{background:#141a3299;color:var(--fg)}.marker-toggle.off{color:var(--faint)}.marker-toggle .dot{width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;position:relative;box-shadow:0 0 6px #8fb6ff66}.marker-toggle.off .dot{box-shadow:none}.marker-toggle.off .dot:after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1.5px;background:currentColor;transform:translate(-50%) rotate(45deg)}.caption-toggle{position:absolute;top:calc(var(--safe-t) + 54px);right:calc(var(--safe-r) + 14px);pointer-events:auto;padding:7px 13px;border-radius:999px;border:1px solid rgba(150,180,255,.2);background:#0c102280;color:var(--muted);font-size:11.5px;letter-spacing:.08em;cursor:pointer;font-family:inherit;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .6s ease,color .2s ease,background .2s ease}.caption-toggle.show{opacity:1}.caption-toggle:hover{background:#141a3299;color:var(--fg)}.caption-toggle.off{color:var(--faint);text-decoration:line-through}.sound-toggle{position:absolute;top:calc(var(--safe-t) + 98px);right:calc(var(--safe-r) + 14px);pointer-events:auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:15px;line-height:1;border:1px solid rgba(150,180,255,.2);background:#0c102280;cursor:pointer;font-family:inherit;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .6s ease,background .2s ease}.sound-toggle.show{opacity:1}.sound-toggle:hover{background:#141a3299}.sound-toggle.off{opacity:.55}.pick-label{position:absolute;transform:translate(-50%,-135%);background:#0c1022d1;border:1px solid rgba(150,180,255,.2);border-radius:11px;padding:6px 13px;font-size:13.5px;letter-spacing:.04em;color:var(--fg);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s ease,transform .3s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 22px #00000073}.pick-label.show{opacity:1;transform:translate(-50%,-155%)}.caption{position:absolute;left:50%;bottom:calc(var(--safe-b) + 112px);transform:translate(-50%,8px);width:min(88vw,560px);text-align:center;opacity:0;transition:opacity .6s ease,transform .6s ease;pointer-events:none}.caption.show{opacity:1;transform:translate(-50%)}.caption .c-main{font-size:clamp(15px,4.2vw,20px);font-weight:400;line-height:1.6;letter-spacing:.02em;text-shadow:0 2px 20px rgba(0,0,0,.9);text-wrap:balance;line-break:strict;word-break:auto-phrase;overflow-wrap:break-word}.scalebar{position:absolute;left:50%;bottom:calc(var(--safe-b) + 26px);transform:translate(-50%);width:min(92vw,620px);padding:0 4px;opacity:0;transition:opacity .6s ease;pointer-events:none}.scalebar.show{opacity:1;pointer-events:auto}.scalebar .row{display:flex;align-items:center;gap:12px}.scalebar .play{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid rgba(160,190,255,.35);background:#8fb6ff1f;color:var(--fg);font-size:15px;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px);transition:background .2s ease}.scalebar .play:hover{background:#8fb6ff38}.scalebar .play.home{font-size:18px;padding-bottom:2px}.scalebar .track-wrap{flex:1 1 auto}.scalebar .track{position:relative;height:30px;cursor:pointer;touch-action:none}.scalebar .rail{position:absolute;top:50%;left:0;right:0;height:3px;transform:translateY(-50%);border-radius:3px;background:linear-gradient(90deg,#7896ff47,#9696ff66,#78c8ff47)}.scalebar .fill{position:absolute;top:50%;left:0;height:3px;transform:translateY(-50%);border-radius:3px;background:linear-gradient(90deg,rgba(150,190,255,.5),var(--accent));box-shadow:0 0 10px #8fb6ff80}.scalebar .knob{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#fff,var(--accent) 70%);box-shadow:0 0 14px #8fb6ffbf,0 1px 3px #0009}.scalebar .ticks{position:relative;height:14px;margin-top:1px}.scalebar .tick{position:absolute;transform:translate(-50%);font-size:9.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap;top:0}.scalebar .tick i{position:absolute;left:50%;top:-3px;width:1px;height:4px;background:var(--faint)}.hint{position:absolute;left:50%;bottom:calc(var(--safe-b) + 74px);transform:translate(-50%);font-size:12px;color:var(--faint);letter-spacing:.05em;text-align:center;opacity:0;transition:opacity .8s ease;pointer-events:none}.hint.show{opacity:1}.intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:8px;background:radial-gradient(120% 90% at 50% 42%,#10122c26,#04050ce6 72%);transition:opacity 1s ease;z-index:10}.intro.hide{opacity:0;pointer-events:none}.intro .kicker{font-size:12px;letter-spacing:.4em;color:var(--accent);text-transform:uppercase;padding-left:.4em}.intro h1{margin:6px 0 2px;font-size:clamp(30px,9.5vw,62px);font-weight:200;letter-spacing:.03em;line-height:1.05;background:linear-gradient(180deg,#fff,#9fb8ff 88%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 6px 60px rgba(120,150,255,.25)}.intro .lead{font-size:13.5px;color:var(--muted);letter-spacing:.06em;line-height:1.85;max-width:30em;text-wrap:balance;line-break:strict}.intro .start{margin-top:26px;padding:13px 34px;border:1px solid rgba(160,190,255,.4);border-radius:999px;background:#8fb6ff1a;color:var(--fg);font-size:15px;letter-spacing:.14em;cursor:pointer;font-family:inherit;backdrop-filter:blur(6px);transition:background .25s ease,transform .25s ease,box-shadow .25s ease}.intro .start:hover{background:#8fb6ff33;box-shadow:0 0 30px #8fb6ff4d;transform:translateY(-1px)}.intro .credit{position:absolute;bottom:calc(var(--safe-b) + 14px);font-size:10.5px;color:var(--faint);letter-spacing:.08em;display:flex;flex-direction:column;align-items:center;gap:5px}.intro .credit .made{color:var(--muted)}.intro .credit a{color:var(--accent);text-decoration:none;pointer-events:auto}.intro .credit a:hover{text-decoration:underline}.boot #stage{opacity:0;animation:fadein 1.6s ease forwards}@keyframes fadein{to{opacity:1}}
