:root{--bg:#0f1115;--panel:#171a21;--panel-2:#1f232c;--line:#2a2f3a;--text:#e8eaf0;--muted:#9aa1b2;--accent:#ff4fa3;--accent-2:#8b5cf6;--pad:#232836;--pad-hover:#2c3344;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{min-height:100vh;margin:0}a{color:inherit}kbd{border:1px solid var(--line);color:var(--muted);background:#0006;border-radius:4px;padding:.1em .4em;font:600 .72em ui-monospace,SFMono-Regular,Menlo,monospace}.app{max-width:1100px;margin:0 auto;padding:0 16px 32px}.topbar{justify-content:space-between;align-items:center;padding:14px 0;display:flex}.brand img{display:block}footer{color:var(--muted);text-align:center;margin-top:48px;font-size:.85rem}.btn{border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:inherit;cursor:pointer;border-radius:10px;align-items:center;gap:8px;padding:8px 14px;text-decoration:none;display:inline-flex}.btn:hover{background:var(--pad-hover)}.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));border:0;font-weight:600}.btn.ghost{background:0 0}.btn.sm{padding:2px 10px}.hero{padding:28px 0 8px}.hero h1{margin:0 0 8px;font-size:clamp(1.8rem,4vw,2.8rem)}.hero p{color:var(--muted);max-width:560px;margin:0 0 18px;line-height:1.5}.home h2{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:32px 0 14px;font-size:1.1rem;font-weight:600}.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;height:100%;text-decoration:none;transition:transform .12s,border-color .12s;display:block;overflow:hidden}.card:hover{border-color:var(--accent);transform:translateY(-2px)}.card img{aspect-ratio:16/9;object-fit:cover;background:#000;width:100%;display:block}.card-body{padding:10px 12px 12px}.card-title{margin-bottom:8px;font-size:.95rem;font-weight:600;line-height:1.3}.chips,.scale-notes{flex-wrap:wrap;gap:6px;display:flex}.chip{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:2px 8px;font-size:.75rem}.chip.root{color:#fff;border-color:var(--accent)}.stage{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start;gap:16px;display:grid}.stage:not(:has(.video)){grid-template-columns:1fr}.video{aspect-ratio:16/9;border:1px solid var(--line);background:#000;border-radius:14px;position:relative;overflow:hidden}.yt,.yt>*,.video iframe{width:100%;height:100%;position:absolute;inset:0}.info h1{margin:0 0 12px;font-size:1.35rem;line-height:1.3}.info .btn{margin-top:14px}.controls{background:var(--panel);border:1px solid var(--line);border-radius:14px;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:18px 0 14px;padding:12px 14px;display:flex}.controls label,.octave{color:var(--muted);align-items:center;gap:8px;font-size:.9rem;display:flex}.controls select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);font:inherit;border-radius:8px;padding:6px 8px}.controls input[type=range]{accent-color:var(--accent);width:110px}.octave b{color:var(--text);text-align:center;min-width:1ch}.unlock{border:1px dashed var(--accent);width:100%;color:var(--text);font:inherit;cursor:pointer;background:#ff4fa31a;border-radius:12px;margin-bottom:12px;padding:12px}.hint{color:var(--muted);font-size:.85rem;line-height:1.8}.pad{-webkit-user-select:none;user-select:none;gap:8px;display:grid}.pad-row{grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;display:grid}.pad-row:nth-child(2){padding-left:2%}.pad-row:nth-child(3){padding-left:4%}.pad-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:1px solid var(--line);background:var(--pad);min-height:72px;color:var(--text);font:inherit;cursor:pointer;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:6px;transition:background 80ms,transform 80ms;display:flex}.pad-btn:hover{background:var(--pad-hover)}.pad-btn .note{font-size:1.05rem;font-weight:700}.pad-btn.root{border-color:#ff4fa388;box-shadow:inset 0 0 0 1px #ff4fa333}.pad-btn.on{background:linear-gradient(135deg, var(--accent), var(--accent-2));transform:scale(.96)}.recent{min-height:1.5em;color:var(--muted);overflow-wrap:anywhere;margin:14px 0 0;font:600 .95rem ui-monospace,Menlo,monospace}@media (width<=760px){.stage{grid-template-columns:1fr}.pad-row,.pad{gap:4px}.pad-row:nth-child(n){padding-left:0}.pad-btn{border-radius:8px;gap:2px;min-height:58px}.pad-btn .note{font-size:.8rem}.pad-btn kbd{display:none}}.brand{letter-spacing:-.02em;align-items:center;gap:10px;font-size:1.4rem;font-weight:800;text-decoration:none;display:inline-flex}.brand .dot{background:linear-gradient(135deg, var(--accent), var(--accent-2));border-radius:7px;width:22px;height:22px;box-shadow:0 0 18px #ff4fa366}.pad-btn{-webkit-touch-callout:none;transition:background 50ms,transform 50ms}.pad-btn:active{transform:scale(.97)}@media (hover:none){.pad-btn:hover{background:var(--pad)}}.hint.inline{font-size:.8rem;line-height:1.3}.crash{border:1px dashed var(--accent);background:#ff4fa31a;border-radius:12px;margin:12px 0;padding:16px}.video .crash{text-align:center;place-content:center;margin:0;display:grid;position:absolute;inset:0}html,body{overscroll-behavior:none}.topnav{gap:8px;display:flex}.btn.active{border-color:var(--accent)}.hero-actions{flex-wrap:wrap;gap:10px;display:flex}.field{align-items:center;gap:4px;display:flex}.infotip{display:inline-flex;position:relative}.infotip-btn{border:1px solid var(--line);background:var(--panel-2);width:20px;height:20px;color:var(--muted);cursor:pointer;border-radius:50%;place-items:center;padding:0;font:700 .72rem/1 inherit;display:grid}.infotip-btn:hover,.infotip-btn[aria-expanded=true]{color:#fff;border-color:var(--accent)}.popover{z-index:20;border:1px solid var(--accent);width:min(280px,80vw);color:var(--text);text-align:left;background:#11141b;border-radius:12px;gap:8px;padding:12px 14px;font-size:.85rem;line-height:1.45;display:grid;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);box-shadow:0 10px 30px #000a}.popover a{color:var(--accent);font-weight:600;text-decoration:none}.hint .infotip{vertical-align:middle}.hint .popover{left:0;transform:none}.guide-row{flex-wrap:wrap;align-items:center;gap:6px 10px;margin:-4px 0 14px;font-size:.85rem;display:flex}.muted{color:var(--muted)}.small{font-size:.8rem}.chip-btn{cursor:pointer;font:inherit;font-size:.78rem}.chip-btn:hover{color:#fff}.chip.active{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;border-color:#0000}.chip.strong{color:var(--text)}.filters{gap:12px;margin:28px 0 16px;display:grid}.filter-row{flex-wrap:wrap;align-items:center;gap:10px 16px;display:flex}.filter-row input[type=search],.filter-row select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);font:inherit;border-radius:8px;padding:7px 10px}.filter-row input[type=search]{flex:220px}.filter-row label{color:var(--muted);align-items:center;gap:8px;font-size:.9rem;display:flex}.card-sub{color:var(--muted);margin:-4px 0 8px;font-size:.78rem}.credits{margin-top:18px}.help{max-width:820px;line-height:1.6}.help h1{margin:12px 0 8px}.help h2{border-top:1px solid var(--line);margin-top:36px;padding-top:8px;scroll-margin-top:12px}.help section{scroll-margin-top:12px}.help li{margin:4px 0}.toc{flex-wrap:wrap;gap:8px;margin:8px 0 4px;display:flex}.toc a{border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:4px 10px;font-size:.85rem;text-decoration:none}.toc a:hover{color:#fff;border-color:var(--accent)}.fit{background:var(--panel);border:1px solid var(--line);border-radius:12px;gap:6px;margin:12px 0;padding:12px 14px;display:grid}.scales-table{border-collapse:collapse;width:100%;font-size:.88rem}.scales-table th,.scales-table td{text-align:left;border-bottom:1px solid var(--line);vertical-align:top;padding:8px}.scales-table th{color:var(--muted);font-weight:600}.mono{white-space:nowrap;font-family:ui-monospace,Menlo,monospace}.help dt{margin-top:12px;font-weight:700}.help dd{color:var(--muted);margin:4px 0 0}@media (width<=760px){.scales-table thead{display:none}.scales-table tr{border-bottom:1px solid var(--line);grid-template-columns:1fr auto;padding:8px 0;display:grid}.scales-table td{border:0;padding:2px 0}.scales-table td:nth-child(3),.scales-table td:nth-child(4){color:var(--muted);grid-column:1/-1}}.ad-slot{contain:strict;border-radius:10px;width:100%;height:90px;margin:24px 0 0;display:block;overflow:hidden}@media (width<=760px){.ad-slot{height:100px}}.ad-placeholder{border:1px dashed var(--line);color:var(--muted);place-items:center;font-size:.8rem;display:grid}.mode-toggle{align-items:center;gap:6px;margin:10px 0;display:flex}.surface-wrap{background:var(--bg,#0f1117);flex-direction:column;gap:6px;margin:8px 0;display:flex}.surface-bar{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.surface-bar label{color:var(--muted);align-items:center;gap:6px;display:flex}.surface{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;border:1px solid #ffffff14;border-radius:12px;width:100%;height:clamp(300px,62dvh,560px);display:block}@media (orientation:landscape) and (height<=500px){.surface{height:78dvh}}.surface-wrap.expanded{z-index:50;padding:8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));margin:0;position:fixed;inset:0}.surface-wrap.expanded .surface{flex:1;height:auto;min-height:0}.surface-wrap:fullscreen{padding:8px}.galaxy{z-index:0;pointer-events:none;position:fixed;inset:0}.galaxy canvas{width:100%;height:100%;display:block}.galaxy.off{display:none}.galaxy.hosted{z-index:0;position:absolute}main.jam{z-index:1;position:relative}.fx-top{z-index:60;pointer-events:none;place-items:center;display:grid;position:fixed;inset:0}.fx-top.hosted{position:absolute}.fx-banner{opacity:0;text-align:center;background:linear-gradient(90deg,#ffe066,#ff4fa3,#8b5cf6,#38bdf8);color:#0000;filter:drop-shadow(0 4px 18px #ff4fa399);-webkit-background-clip:text;background-clip:text;padding:0 12px;font:900 clamp(28px,7vw,64px)/1.1 Inter,system-ui,sans-serif}.fx-banner.show{animation:1.8s ease-out fx-banner}@keyframes fx-banner{0%{opacity:0;transform:scale(.4)}15%{opacity:1;transform:scale(1.12)}30%{transform:scale(1)}80%{opacity:1}to{opacity:0;transform:translateY(-30px)}}@media (prefers-reduced-motion:reduce){.fx-banner.show{animation:1.8s fx-fade}@keyframes fx-fade{0%,to{opacity:0}20%,80%{opacity:1}}}.play-head{flex-wrap:wrap;align-items:center;gap:10px 16px;margin:10px 0 4px;display:flex}.fx-hud{white-space:nowrap;background:#141622bf;border:1px solid #ffffff14;border-radius:999px;align-items:center;gap:10px;padding:4px 12px;font-size:.95rem;font-weight:800;display:inline-flex}.fx-score{color:#ffe066;min-width:5ch}.fx-level{color:#c4b5fd}.fx-combo{color:#ff8cc6}.fx-best{color:var(--muted);font-size:.8rem;font-weight:600}.fx-energy{background:#ffffff1a;border-radius:4px;width:60px;height:8px;overflow:hidden}.fx-energy i{background:linear-gradient(90deg,#38bdf8,#ff4fa3,#ffe066);width:0;height:100%;transition:width .15s;display:block}.surface-wrap{background:0 0;position:relative}.surface-wrap>:not(.galaxy):not(.fx-top){z-index:1;position:relative}.surface-wrap:not(.expanded) .surface-bar .fx-hud{display:none}.surface-wrap.expanded{background:#080a14}.pad-btn{background:#232836b8}@media (hover:none){.pad-btn:hover{background:#232836b8}}.tempo{align-items:center;gap:8px;display:flex}.recorder{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.rec-btn{align-items:center;gap:6px;display:inline-flex}.rec-btn.recording{color:#fecaca;border-color:#ef4444}.rec-dot{background:#ef4444;border-radius:50%;width:10px;height:10px;animation:1s infinite rec-blink}.rec-dot.idle{opacity:.8;animation:none}@keyframes rec-blink{50%{opacity:.25}}.rec-result{flex-wrap:wrap;align-items:center;gap:8px;width:100%;display:flex}.rec-preview{max-width:min(100%,420px);max-height:240px}.fx-pop{color:#fff;white-space:nowrap;text-shadow:0 2px 6px #000,0 0 12px #8b5cf6cc;font:800 15px Inter,system-ui,sans-serif;animation:1.3s ease-out forwards fx-pop;position:absolute;transform:translate(-50%,-100%)}.fx-pop.big{color:#ffe066;font-size:20px}@keyframes fx-pop{0%{opacity:0;margin-top:10px}15%{opacity:1}to{opacity:0;margin-top:-40px}}@media (prefers-reduced-motion:reduce){.fx-pop{animation-name:fx-fade}}.section-title{margin:26px 0 12px;font-size:1.25rem}.band-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}.band-art{aspect-ratio:16/8;background:radial-gradient(circle at 30% 30%,#8b5cf6aa,#0000 60%),radial-gradient(circle at 70% 70%,#ff4fa3aa,#0000 60%),#141826;place-items:center;font-size:2.6rem;display:grid}.band-art.band-blues,.band-art.band-slowblues{background:radial-gradient(circle at 30% 30%,#3b82f6aa,#0000 60%),radial-gradient(circle at 75% 70%,#8b5cf6aa,#0000 60%),#10162a}.band-art.band-funk,.band-art.band-country{background:radial-gradient(circle at 30% 30%,#f59e0baa,#0000 60%),radial-gradient(circle at 70% 70%,#ff4fa3aa,#0000 60%),#1d1520}.band-art.band-reggae,.band-art.band-lofi{background:radial-gradient(circle at 30% 30%,#22c55eaa,#0000 60%),radial-gradient(circle at 70% 70%,#38bdf8aa,#0000 60%),#0f1c1a}.band-art.band-metal,.band-art.band-rock{background:radial-gradient(circle at 30% 30%,#ef4444aa,#0000 60%),radial-gradient(circle at 70% 70%,#f97316aa,#0000 60%),#1c1010}.band-slot{border:1px solid var(--line);border-radius:14px;padding:14px;aspect-ratio:auto!important;background:var(--panel)!important;height:auto!important;overflow:visible!important}.band{flex-direction:column;gap:12px;display:flex}.band-top{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.band-play{padding:10px 18px;font-size:1.05rem}.band-play.on{background:linear-gradient(135deg,#ef4444,#f97316)}.band-chord{flex-wrap:wrap;flex:1;align-items:center;gap:8px 12px;min-width:220px;display:flex}.band-chord .now{color:#fff;min-width:3ch;font-size:2.2rem;font-weight:900}.band-chord .arrow{color:var(--muted)}.band-chord .next{color:#c4b5fd;min-width:3ch;font-size:1.3rem;font-weight:700}.band-chord .beats{gap:5px;display:inline-flex}.band-chord .beats i{background:#ffffff26;border-radius:50%;width:10px;height:10px}.band-chord .beats i.on{background:#ff4fa3;box-shadow:0 0 10px #ff4fa3}.band-chord .beats i:first-child.on{background:#ffe066;box-shadow:0 0 10px #ffe066}.bar-track{background:#ffffff14;border-radius:3px;flex-basis:100%;height:6px;overflow:hidden}.bar-track i{transform-origin:0;background:linear-gradient(90deg,#38bdf8,#ff4fa3);height:100%;display:block;transform:scaleX(0)}.band-row{color:var(--muted);flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:.9rem;display:flex}.band-row label{align-items:center;gap:6px;display:flex}.band-row .seg{gap:4px;display:inline-flex}.pad-btn.chord-tone{box-shadow:inset 0 0 0 2px #38bdf8aa,0 0 14px #38bdf855}.solo-badge{color:#fff;background:linear-gradient(90deg,#f59e0b,#ff4fa3);border-radius:999px;padding:2px 10px;font-size:.85rem;font-weight:800;animation:1.2s infinite rec-blink}.recordings{max-width:900px;margin:0 auto;padding:16px}.takes{gap:10px;padding:0;list-style:none;display:grid}.take{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;gap:8px;padding:12px;display:grid}.take-head{gap:2px;display:grid}.take-head form{gap:6px;display:flex}.take-head input{font:inherit;color:inherit;background:#111;border:1px solid #555;border-radius:6px;flex:1;padding:4px 8px}.take-actions{flex-wrap:wrap;gap:6px;display:flex}.btn.danger{border-color:#a33}.storage .meter{vertical-align:middle;background:#ffffff1f;border-radius:4px;width:120px;height:8px;margin:0 8px;display:inline-block;overflow:hidden}.storage .meter i{background:#6cf;height:100%;display:block}.toast{background:#1d3b2a;border:1px solid #3c8;border-radius:8px;padding:6px 12px;animation:.3s ease-out toastIn}.toast a{color:#8fd;font-weight:600}@keyframes toastIn{0%{opacity:0;transform:translateY(6px)}}