@import"https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600&family=Work+Sans:wght@300;500&display=swap";:root{color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--bg-0: #0b0d10;--bg-1: #111621;--bg-2: #1a2030;--panel: rgba(17, 22, 33, .78);--line: rgba(255, 255, 255, .08);--accent: #f7b955;--accent-strong: #ff7a59;--text: #e8edf2;--muted: #a5b0c4}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;background:radial-gradient(circle at top,#1f2937 0%,var(--bg-0) 45%) fixed;color:var(--text);font-family:Work Sans,sans-serif}body:before{content:"";position:fixed;inset:-20% -10% auto;height:60vh;background:radial-gradient(circle at 20% 20%,rgba(247,185,85,.12),transparent 55%);pointer-events:none;z-index:-1}#root,.app-shell{min-height:100vh}.home{--home-footer-height: 132px;display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem 1.5rem calc(var(--home-footer-height) + 1rem + env(safe-area-inset-bottom,0px));min-height:100vh;height:100vh;overflow-y:auto}.home__container{width:100%;max-width:1100px;margin:0 auto;display:grid;gap:1.5rem}.home__header{display:grid;gap:.6rem}.home__header-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}.home__header-text{display:grid;gap:.6rem}.home__cta{display:none;gap:.6rem;align-items:flex-end}.home__cta-actions{display:flex;gap:.6rem;justify-content:flex-end}.home__eyebrow{text-transform:uppercase;letter-spacing:.3em;font-size:.75rem;color:var(--muted)}.home__title{font-family:Oxanium,sans-serif;font-size:2rem;line-height:1.1}.home__subtitle{color:var(--muted);font-size:1rem}.home__profile{display:grid;gap:.5rem;max-width:360px}.home__layout,.home__column{display:grid;gap:1rem}.home__card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:1.25rem;display:grid;gap:.75rem}.home__leaderboard{list-style:none;display:grid;gap:.5rem}.home__leaderboard-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:.6rem;font-family:Oxanium,sans-serif;font-size:.95rem}.home__leaderboard-rank{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.2em}.home__leaderboard-name{color:var(--text)}.home__leaderboard-score{color:var(--accent)}.home__card-title{margin:0;font-family:Oxanium,sans-serif;font-size:1.1rem}.home__label{font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}.home__input{padding:.75rem 1rem;border-radius:12px;border:1px solid var(--line);background:#0c0f16d9;color:var(--text);font-family:Work Sans,sans-serif}.home__note{color:var(--muted);font-size:.95rem}.home__notice{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.75rem 1rem;border-radius:12px;border:1px solid var(--line);background:#0c0f16bf}.home__credit{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}.home__credit a{color:var(--accent);text-decoration:none}.home__credit a:hover{text-decoration:underline}.home__stat{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}.home__stat-label{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.18em}.home__stat-value{font-family:Oxanium,sans-serif;font-size:1.05rem}.home__progress-bar{height:8px;border-radius:999px;background:#ffffff14;overflow:hidden}.home__progress-fill{height:100%;background:var(--accent);width:0%;transition:width .16s ease}.home__mastery{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:.35rem}.home__mastery-segment{height:24px;border-radius:10px;display:grid;place-items:center;font-size:.75rem;color:var(--muted);background:#ffffff14;border:1px solid transparent}.home__mastery-segment.is-active{background:#ffc8782e;color:var(--text);border-color:#ffc87866}.home__loadout-row{display:flex;align-items:center;gap:.6rem;justify-content:space-between;flex-wrap:wrap}.home__swatch{width:18px;height:18px;border-radius:50%;border:1px solid var(--line)}.home__card-actions{display:flex;flex-wrap:wrap;gap:.6rem}.home__footer{position:fixed;left:0;right:0;bottom:0;padding:.75rem 1.2rem calc(.9rem + env(safe-area-inset-bottom,0px));display:grid;gap:.6rem;background:#0b0d10f5;border-top:1px solid var(--line);z-index:4}.home__play{width:100%}.home__footer-actions{display:flex;gap:.6rem;justify-content:space-between}.home__footer-actions .btn{flex:1;padding:.55rem 1rem;font-size:.9rem}.btn{appearance:none;border:1px solid transparent;border-radius:999px;padding:.8rem 1.6rem;font-size:1rem;font-family:Oxanium,sans-serif;letter-spacing:.04em;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.btn--xl{padding:1rem 2.4rem;font-size:1.2rem}.btn--primary{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#0b0d10;box-shadow:0 10px 20px #f7b95540}.btn--ghost{background:transparent;border-color:#f7b95566;color:var(--text)}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.btn:not(:disabled):hover{transform:translateY(-2px)}.modal-backdrop{position:fixed;inset:0;background:#080a0ebf;display:grid;place-items:center;z-index:20}.modal{width:min(90vw,420px);padding:1.5rem;border-radius:18px;background:var(--bg-1);border:1px solid var(--line)}.audio-page{min-height:100vh;display:flex;flex-direction:column;gap:1rem;padding:1.5rem}.audio-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1rem;display:grid;gap:.75rem}.audio-seek{width:100%}.audio-bar{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.2rem;border-radius:16px;background:var(--panel);border:1px solid var(--line)}.audio-time{font-variant-numeric:tabular-nums;color:var(--muted)}.playground,.preview-page{position:relative;min-height:100vh;overflow:hidden}.game-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.playground__hud{position:relative;z-index:2;padding:1.5rem;display:grid;gap:.6rem;max-width:480px}.playground__stage{display:flex;align-items:center;gap:.6rem}.preview-hud{position:relative;z-index:2;padding:1.5rem;display:grid;gap:.6rem;max-width:420px}.preset-hud{position:absolute;inset:auto 0 0;z-index:2;padding:1rem 1.2rem 1.5rem;display:grid;gap:.6rem;background:linear-gradient(180deg,#0b0d1000,#0b0d10c7 60%);max-height:70vh;overflow-y:auto;overscroll-behavior:contain}.preset-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:.9rem 1rem;display:grid;gap:.35rem}.preset-label{margin:0;text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;color:var(--muted)}.preset-meta{margin:0;font-family:Oxanium,sans-serif;font-size:1rem}.preset-meta--row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.preset-locked{color:#ff8a65;font-size:.85rem}.preset-swatch{width:18px;height:18px;border-radius:50%;border:1px solid var(--line);box-shadow:0 0 12px #fff3}.preset-hint{margin:0;color:var(--muted);font-size:.8rem}.preset-lock{margin:0;color:#ff8a65;font-size:.85rem}.preset-actions{display:flex;flex-wrap:wrap;gap:.6rem}.preset-mode{display:flex;gap:.6rem;flex-wrap:wrap}.preset-mode__btn.is-active{border-color:var(--accent);color:var(--accent)}.preset-section{display:grid;gap:.5rem}.preset-section__title{margin:0;text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--muted)}.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.preset-tile{border:1px solid var(--line);background:#0c0f16d9;border-radius:14px;padding:.8rem;display:grid;gap:.35rem;color:var(--text);text-align:left}.preset-tile.is-selected{border-color:var(--accent);box-shadow:0 0 0 1px #ffc87840}.preset-tile.is-locked{opacity:.6}.preset-tile__label{font-family:Oxanium,sans-serif;font-size:.95rem}.preset-tile__lock{font-size:.75rem;color:#ff8a65}.preset-color-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.5rem}.preset-color{border-radius:999px;border:1px solid var(--line);height:30px;position:relative}.preset-color.is-selected{box-shadow:0 0 0 2px #ffffff59}.preset-color.is-locked{opacity:.5}.preset-color__lock{position:absolute;inset:0;display:grid;place-items:center;font-size:.6rem;color:#0b0d10;text-shadow:0 1px 3px rgba(0,0,0,.4)}@media(min-width:900px){.preset-hud{inset:auto auto 1.5rem 1.5rem;max-width:420px;max-height:80vh}}@media(max-width:520px){.preset-color-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.run-page{position:relative;min-height:100vh;overflow:hidden}.run-hud{position:absolute;inset:auto 0 0;display:grid;gap:.6rem;padding:1rem 1.5rem 1.5rem;background:linear-gradient(180deg,#0b0d1000,#0b0d10bf 60%);z-index:3}.run-hud__row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.run-hud__actions{flex-wrap:wrap;justify-content:flex-start}.run-label{color:var(--muted);text-transform:uppercase;font-size:.75rem;letter-spacing:.18em}.run-value{font-family:Oxanium,sans-serif;font-size:1.1rem}.run-stage-swatch{display:inline-block;width:12px;height:12px;border-radius:50%;margin-left:.5rem;border:1px solid var(--line)}.run-status{font-family:Oxanium,sans-serif;font-size:1.2rem;color:var(--accent)}.run-note{color:var(--muted);font-size:.9rem}.run-modal-actions{margin-top:1rem;display:flex;gap:.75rem;flex-wrap:wrap}.run-audio-gate{position:absolute;inset:0;display:grid;place-items:center;background:#080a0e8c;z-index:4}.run-audio-gate__card{background:#0c0f16eb;border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.4rem;display:grid;gap:.8rem;text-align:center}.stage-flash{position:absolute;top:18%;left:50%;transform:translate(-50%);padding:.6rem 1.4rem;border-radius:999px;background:#0c0f16e6;border:1px solid var(--line);color:var(--text);font-family:Oxanium,sans-serif;letter-spacing:.2em;text-transform:uppercase;z-index:4;animation:stageFlash .6s ease}@keyframes stageFlash{0%{opacity:0;transform:translate(-50%) translateY(8px)}20%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-6px)}}.debug-panel{position:absolute;top:1rem;right:1rem;z-index:4;background:#0a0c10d9;border:1px solid var(--line);border-radius:12px;padding:.75rem 1rem;font-size:.85rem;color:var(--text);display:grid;gap:.35rem;width:min(90vw,260px)}.results{position:absolute;inset:0;display:grid;place-items:center;background:#080a0ecc;z-index:5}.results__card{width:min(90vw,420px);background:var(--bg-1);border:1px solid var(--line);border-radius:18px;padding:1.5rem;display:grid;gap:1rem}.results__lines{display:grid;gap:.75rem}.results__line{display:flex;justify-content:space-between;color:var(--text)}.results__total{font-size:1.2rem}.results__actions{display:flex;gap:.75rem;flex-wrap:wrap}.leaderboard-page{min-height:100vh;padding:1.5rem;display:grid;gap:1.5rem}.leaderboard-list{list-style:none;display:grid;gap:.6rem}.leaderboard-item{display:grid;grid-template-columns:40px 1fr auto auto;gap:.75rem;padding:.75rem 1rem;background:var(--panel);border:1px solid var(--line);border-radius:12px}.leaderboard-item.is-highlight{border-color:#f7b95599;box-shadow:0 0 0 1px #f7b9554d}.leaderboard-rank{color:var(--muted)}.leaderboard-score{font-family:Oxanium,sans-serif}.leaderboard-date{color:var(--muted)}.leaderboard-empty{padding:1rem;color:var(--muted)}.settings-page,.offline-page{min-height:100vh;padding:1.5rem;display:grid;gap:1.5rem}.settings-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1rem;display:grid;gap:1rem}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:1rem}.settings-row input[type=checkbox]{transform:scale(1.2)}.settings-row select{background:#0c0f16d9;border:1px solid var(--line);color:var(--text);padding:.4rem .6rem;border-radius:8px}.settings-note{color:var(--muted);font-size:.9rem}.project-monitor-page{min-height:100vh;padding:1.5rem;display:grid;gap:1.5rem}.project-monitor-grid{display:grid;gap:1rem}.project-monitor-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1rem;display:grid;gap:.8rem}.project-monitor-heading{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}.project-monitor-title{font-family:Oxanium,sans-serif;font-size:1.1rem}.project-monitor-summary{font-size:.85rem;color:var(--muted)}.project-monitor-list{list-style:none;display:grid;gap:.6rem}.project-monitor-story{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem}.project-monitor-code{font-family:Oxanium,sans-serif;font-size:.85rem;letter-spacing:.08em;padding:.2rem .6rem;border-radius:999px;background:#f7b9551f;border:1px solid rgba(247,185,85,.2);color:var(--accent)}.project-monitor-label{color:var(--text);font-size:.95rem}.project-monitor-status{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;padding:.2rem .5rem;border-radius:999px;border:1px solid var(--line)}.project-monitor-status--done{color:var(--accent);border-color:#f7b95566;background:#f7b9551f}.project-monitor-status--todo{color:var(--muted);background:#ffffff0a}.orientation-gate{position:fixed;inset:0;background:#080a0ee6;display:grid;place-items:center;z-index:999}.orientation-gate__card{background:var(--bg-1);border:1px solid var(--line);border-radius:16px;padding:1.5rem;max-width:320px;text-align:center;color:var(--text)}@media(min-width:720px){.project-monitor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1100px){.project-monitor-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:900px)and (orientation:portrait){.btn{padding:1rem 1.8rem;font-size:1.05rem}.run-hud{gap:.4rem;padding:.8rem 1.1rem 1.1rem}.run-hud__row{font-size:.9rem}}@media(min-width:900px)and (orientation:landscape){.run-hud{inset:1.5rem 1.5rem auto auto;width:300px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}.run-hud__actions{flex-direction:column;align-items:stretch}}@media(max-width:900px)and (orientation:landscape){.run-hud{inset:auto 0 0;padding:.7rem 1rem;background:linear-gradient(180deg,#0b0d1000,#0b0d10a6 60%)}}@media(min-width:900px){.home{--home-footer-height: 0px;align-items:start;gap:2rem;padding:2.5rem 3rem;height:auto;overflow-y:visible}.home__header{gap:.9rem}.home__title{font-size:2.6rem}.home__layout{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start;gap:1.5rem}.home__cta{display:grid;min-width:220px}.home__footer{display:none}}@media(max-width:520px){.home__mastery{grid-template-columns:repeat(5,minmax(0,1fr))}}