:root{color-scheme:dark;--bg: #07080d;--panel: rgba(18, 24, 36, .62);--panel-border: rgba(120, 160, 200, .18);--fg: #eef2f7;--fg-dim: #8a97a8;--accent: #22d3ee;--accent-2: #a855f7;--hot: #f43f5e;--glow: 0 0 28px rgba(34, 211, 238, .3);--radius: 16px;--font-display: "Space Grotesk", system-ui, sans-serif;--font-body: "Noto Sans JP", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%}body{font-family:var(--font-body);color:var(--fg);background:radial-gradient(1200px 800px at 22% 8%,#1d2b46 0%,transparent 55%),radial-gradient(1000px 700px at 88% 95%,#2a1840 0%,transparent 60%),var(--bg);overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(120,160,200,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,200,.06) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 50% 35%,black 25%,transparent 78%);mask-image:radial-gradient(circle at 50% 35%,black 25%,transparent 78%);pointer-events:none;z-index:0;animation:drift 24s linear infinite}@keyframes drift{to{background-position:46px 46px}}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}#app{position:relative;z-index:1;min-height:100%;display:grid;place-items:center;padding:24px 18px}#app:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:3;box-shadow:inset 0 0 240px 50px #0000008c}.screen{width:min(980px,100%);animation:fadein .24s ease both}@keyframes fadein{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.stack{display:flex;flex-direction:column;gap:16px;align-items:center}.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding-top:4vh}.logo-wrap{position:relative}.logo{font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,13vw,7rem);line-height:.95;letter-spacing:.04em;background:linear-gradient(110deg,#ffffff 0%,var(--accent) 35%,var(--accent-2) 60%,#ffffff 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 28px rgba(34,211,238,.35));animation:shimmer 6s linear infinite,pulseGlow 3.6s ease-in-out infinite}@keyframes shimmer{to{background-position:220% center}}@keyframes pulseGlow{50%{filter:drop-shadow(0 0 44px rgba(168,85,247,.5))}}.logo-sub{color:var(--fg-dim);letter-spacing:.42em;font-size:clamp(.6rem,2.4vw,.9rem);margin-top:6px}.lead{color:#cfd8e3;max-width:640px;line-height:1.8;font-size:clamp(.92rem,2.6vw,1.05rem)}.cta-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}.foot{color:var(--fg-dim);font-size:.78rem;letter-spacing:.14em;margin-top:26px}.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:720px}.chip{padding:.4rem .85rem;border:1px solid var(--panel-border);border-radius:999px;font-size:.85rem;background:#12182480}.btn{font-family:var(--font-display);letter-spacing:.06em;font-size:1rem;color:var(--fg);background:linear-gradient(180deg,#22d3ee38,#a855f71f);border:1px solid rgba(34,211,238,.5);border-radius:999px;padding:.85rem 2rem;cursor:pointer;transition:transform .13s ease,box-shadow .13s ease,border-color .13s ease}.btn:hover{transform:translateY(-2px);box-shadow:var(--glow);border-color:var(--accent)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}.btn-xl{font-size:1.3rem;padding:1.05rem 3rem}.btn.ghost{background:transparent;border-color:var(--panel-border);color:var(--fg-dim)}.btn.ghost:hover{color:var(--fg);border-color:var(--accent)}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 10px 44px #0006}.section-title{font-family:var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);font-size:.82rem;text-align:center}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}.hint{color:var(--fg-dim);font-size:.88rem;text-align:center;line-height:1.7}.track-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;width:100%}.track-card{padding:20px;text-align:left;cursor:pointer;transition:transform .13s ease,border-color .13s ease,box-shadow .13s ease}.track-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--glow)}.track-card .name{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.04em}.track-card .meta{margin-top:8px;color:var(--fg-dim);font-size:.9rem}.diff-easy .name{color:#4ade80}.diff-mid .name{color:var(--accent)}.diff-hard .name{color:var(--hot)}.stage{position:relative;width:min(980px,100%);aspect-ratio:16 / 9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--panel-border);background:#000;box-shadow:0 12px 60px #0000008c}.stage video,.stage canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.stage video{transform:scaleX(-1)}.big-score{font-family:var(--font-display);font-size:clamp(2.8rem,11vw,5.5rem);letter-spacing:.03em;text-align:center;text-shadow:var(--glow)}.rank{font-family:var(--font-display);font-weight:700;font-size:clamp(4rem,18vw,8rem);line-height:1;text-align:center}.rank-S{color:#fde047;filter:drop-shadow(0 0 24px rgba(253,224,71,.5))}.rank-A{color:var(--accent);filter:drop-shadow(0 0 22px rgba(34,211,238,.5))}.rank-B{color:#4ade80}.rank-C{color:var(--fg-dim)}.rank-D{color:var(--hot)}.scores-table{width:100%;border-collapse:collapse;font-size:.95rem}.scores-table th,.scores-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--panel-border)}.scores-table th{color:var(--fg-dim);font-weight:500;letter-spacing:.08em;font-size:.78rem;text-transform:uppercase}input.text,textarea.text{font-family:var(--font-body);background:#00000059;border:1px solid var(--panel-border);border-radius:10px;color:var(--fg);padding:.7rem 1rem;font-size:1rem;outline:none;transition:border-color .13s ease}input.text:focus,textarea.text:focus{border-color:var(--accent)}@media(max-width:640px){#app{padding:16px 12px}.stage{aspect-ratio:3 / 4}.cta-row,.btn-xl{width:100%}.track-grid{grid-template-columns:1fr}}