@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap";:root{--bg:#0a0a0b;--surface:#141416;--surface-raised:#1c1c1f;--surface-overlay:#232327;--border:#2a2a2e;--border-strong:#3a3a40;--text-primary:#f2f2f0;--text-secondary:#b4b4bb;--text-muted:#8a8a90;--text-disabled:#5a5a60;--green:#26c281;--green-hover:#35d492;--green-active:#1da96f;--green-dim:#1a7d54;--green-bg:#26c2811f;--green-bg-strong:#26c28138;--on-green:#04130c;--red:#f0465c;--red-hover:#ff5b70;--red-active:#d4394e;--red-dim:#9e2f3d;--red-bg:#f0465c1f;--red-bg-strong:#f0465c38;--on-red:#1a0508;--amber:#e8a33d;--amber-hover:#f2b355;--amber-bg:#e8a33d1f;--on-amber:#1a1206;--accent:var(--green);--focus:var(--green);--font-display:"Space Grotesk", system-ui, sans-serif;--font-body:"Inter", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace;--text-h1:22px;--text-h2:20px;--text-h3:16px;--text-body:14px;--text-sm:13px;--text-xs:11px;--data-xl:28px;--data-lg:22px;--data-md:16px;--data-sm:13px;--leading-tight:1.2;--leading-normal:1.5;--leading-relaxed:1.6;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--radius-sm:4px;--radius:6px;--radius-lg:10px;--ease:cubic-bezier(.2, 0, 0, 1);--ease-overshoot:cubic-bezier(.34, 1.56, .64, 1);--transition-fast:.12s var(--ease);--transition:.16s var(--ease)}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{background:var(--bg);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;margin:0}h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:var(--leading-tight);letter-spacing:-.01em;margin:0}h1{font-size:var(--text-h1)}h2{font-size:var(--text-h2)}h3{font-size:var(--text-h3)}p{line-height:var(--leading-relaxed)}.app-main{--text-h1:25px;--text-h2:23px;--text-h3:18px;--text-body:16px;--text-sm:15px;--text-xs:12px;--data-xl:32px;--data-lg:25px;--data-md:18px;--data-sm:15px;--space-1:5px;--space-2:9px;--space-3:14px;--space-4:18px;--space-5:27px;--space-6:36px;--space-7:54px;font-size:var(--text-body)}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}button{font-family:var(--font-body);font-size:var(--text-body);cursor:pointer}.btn{background:var(--green);color:var(--on-green);border:1px solid var(--green);border-radius:var(--radius);padding:var(--space-2) var(--space-5);font-weight:600;font-size:var(--text-body);transition:background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast)}.btn:hover:not(:disabled){background:var(--green-hover);border-color:var(--green-hover)}.btn:active:not(:disabled){background:var(--green-active);border-color:var(--green-active);transform:translateY(1px)}.btn:disabled{border-color:var(--border);color:var(--text-disabled);cursor:not-allowed;background:0 0}.btn-danger{background:var(--red);color:var(--on-red);border:1px solid var(--red);border-radius:var(--radius);padding:var(--space-2) var(--space-5);font-weight:600;font-size:var(--text-body);transition:background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast)}.btn-danger:hover:not(:disabled){background:var(--red-hover);border-color:var(--red-hover)}.btn-danger:active:not(:disabled){background:var(--red-active);border-color:var(--red-active);transform:translateY(1px)}.btn-danger:disabled{border-color:var(--border);color:var(--text-disabled);cursor:not-allowed;background:0 0}.btn-secondary{color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-2) var(--space-4);font-weight:500;font-size:var(--text-body);transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);background:0 0}.btn-secondary:hover:not(:disabled){background:var(--surface-overlay);border-color:var(--border-strong)}.btn-secondary:active:not(:disabled){background:var(--surface-raised)}.btn-secondary:disabled{color:var(--text-disabled);border-color:var(--border);cursor:not-allowed}.btn-secondary.is-active{border-color:var(--green);background:var(--green-bg)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5)}.panel{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3)}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.text-green{color:var(--green)}.text-red{color:var(--red)}.text-amber{color:var(--amber)}.label{font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-weight:500}input,select{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);padding:var(--space-2) var(--space-3);font-family:var(--font-body);font-size:var(--text-body);transition:border-color var(--transition-fast), background var(--transition-fast)}input:hover:not(:disabled),select:hover:not(:disabled){border-color:var(--border-strong)}input:focus,select:focus{border-color:var(--green);outline:none}input:disabled,select:disabled{color:var(--text-disabled);background:var(--surface);cursor:not-allowed}input[type=checkbox]{accent-color:var(--green);cursor:pointer;width:15px;height:15px}input[type=range]{accent-color:var(--green);cursor:pointer;background:0 0;border:none;height:18px;padding:0}input[type=range]:disabled{accent-color:var(--text-disabled);cursor:not-allowed}*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-strong);border:2px solid var(--bg);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--text-disabled)}.app-shell{width:94%;max-width:min(90vw,1100px);padding:var(--space-5) var(--space-4) var(--space-7);z-index:1;margin:0 auto;position:relative}.app-shell--wide{max-width:min(94vw,1400px)}.app-header{margin-bottom:var(--space-5);padding-bottom:var(--space-4);justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.app-logo{width:auto;height:48px;display:block}.design-stats{text-align:right;flex-shrink:0}.battle-grid{gap:var(--space-5);margin-bottom:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.transport-bar{gap:var(--space-3);margin-top:var(--space-4);padding:var(--space-3);background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;align-items:center;display:flex}.transport-bar button{white-space:nowrap}.playback-actions{text-align:right;margin-top:var(--space-3)}.mode-points{padding-left:var(--space-4)}.tour{z-index:150;pointer-events:none;animation:tour-fade .24s var(--ease) both;position:absolute;top:0;left:0}.tour-dim{position:absolute;top:0;left:0}.tour-dim path{fill:#050506b8;pointer-events:auto}.tour-ring{border-radius:var(--radius-lg);outline:1px solid var(--border-strong);pointer-events:none;position:absolute}.tour-ring--action{outline:2px solid var(--green);animation:tour-pulse 1.6s var(--ease) infinite}.tour-card{width:min(360px,100vw - 32px);padding:var(--space-4) var(--space-4) var(--space-3);background:var(--surface-raised);border:1px solid var(--border-strong);border-top:2px solid var(--green);border-radius:var(--radius-lg);pointer-events:none;opacity:0;transition:opacity .26s var(--ease), transform .26s var(--ease);font-size:15px;position:absolute;transform:translateY(8px);box-shadow:0 16px 48px #0000008c}.tour-card.is-shown{pointer-events:auto;opacity:1;transform:none}.tour-card h3{margin:var(--space-1) 0 var(--space-2);font-size:18px}.tour-card p{color:var(--text-secondary);margin:0;line-height:1.55}.tour-progress{font-size:var(--text-xs);color:var(--text-muted);letter-spacing:.06em}.tour-action{margin-top:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius);background:var(--green-bg);border:1px solid var(--green-dim);color:var(--green);font-size:14px;font-weight:600}.tour-action:before{content:"→ "}.tour-footer{justify-content:space-between;align-items:center;gap:var(--space-3);margin-top:var(--space-4);display:flex}.tour-nav{gap:var(--space-2);margin-left:auto;display:flex}.tour-nav .btn,.tour-nav .btn-secondary{padding:var(--space-2) var(--space-4)}.tour-skip{padding:var(--space-1) 0;color:var(--text-muted);text-underline-offset:3px;background:0 0;border:none;font-size:13px;text-decoration:underline}.tour-skip:hover{color:var(--text-secondary)}@media (width<=640px){.tour-card{padding:var(--space-3);font-size:14px}.tour-card h3{margin-bottom:var(--space-1);font-size:16px}.tour-card p{line-height:1.45}.tour-action{margin-top:var(--space-2);font-size:13px}.tour-footer{margin-top:var(--space-3)}}@keyframes tour-fade{0%{opacity:0}to{opacity:1}}@keyframes tour-pulse{0%,to{outline-offset:0;outline-color:var(--green)}50%{outline-offset:5px;outline-color:#26c28159}}.menu-links{justify-content:center;gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap;display:flex}@keyframes value-flash{0%{color:var(--green)}to{color:inherit}}@keyframes pulse-dim{0%,to{opacity:1}50%{opacity:.45}}.pulse{animation:pulse-dim 1.4s var(--ease) infinite}@keyframes sweep-in{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes plate-in-left{0%{opacity:0;transform:translate(-52px)}to{opacity:1;transform:translate(0)}}@keyframes plate-in-right{0%{opacity:0;transform:translate(52px)}to{opacity:1;transform:translate(0)}}@keyframes vs-pop{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}@keyframes pill-drop{0%{opacity:0;transform:translateY(-26px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}@keyframes pill-slam{0%{opacity:0;transform:scale(1.6)translateY(-14px)}45%{opacity:1;transform:scale(.94)translateY(2px)}70%{transform:scale(1.04)translateY(-1px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes rise-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes flash-out{0%{opacity:.24}to{opacity:0}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (width<=640px){.app-shell,.app-shell--wide{width:100%;max-width:none;padding:var(--space-3) 20px var(--space-6)}.app-header{margin-bottom:var(--space-4);flex-wrap:nowrap;padding-bottom:0}.app-logo{height:34px}.app-header>h1{flex-shrink:0}.guest-chip{display:none}.app-main{--space-4:14px;--space-5:18px;--space-6:24px;--space-7:32px}.card{padding:var(--space-5)}.card .card{padding:var(--space-3)}.mode-points{padding-left:1.3em}.design-stats{text-align:left;align-items:baseline;column-gap:var(--space-3);flex-wrap:wrap;display:flex}.battle-grid{gap:var(--space-3);grid-template-columns:minmax(0,1fr)}.transport-bar{bottom:var(--space-2);z-index:5;gap:var(--space-2);padding:var(--space-2);flex-wrap:nowrap;position:sticky;box-shadow:0 6px 24px #0009}.transport-bar button{padding-left:var(--space-3);padding-right:var(--space-3)}.transport-bar select{padding-left:var(--space-2);padding-right:var(--space-1)}.playback-actions .btn{width:100%;padding-top:var(--space-3);padding-bottom:var(--space-3)}}@media (pointer:coarse){input:not([type=checkbox]):not([type=range]),select{font-size:16px!important}}