:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#100e18;--surface:#1c1830eb;--surface-2:#2a2448;--line:#ffffff1a;--text:#f6f3ff;--muted:#b7adc9;--melody:#ff4f93;--drums:#ffb020;--bass:#3ee0c5;--chords:#9b8cff;--lime:#d6ff4a;--danger:#ff4d6d;--shadow:0 18px 50px #00000047;color:var(--text);background:var(--bg);font-family:Outfit,Avenir Next,Segoe UI,sans-serif;font-size:16px;line-height:1.4}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(900px 420px at 8% -10%, #ff4f9338, transparent 55%), radial-gradient(800px 480px at 100% 0%, #9b8cff33, transparent 50%), radial-gradient(700px 420px at 80% 110%, #3ee0c51f, transparent 45%), var(--bg);min-height:100dvh}body:before{content:"";pointer-events:none;background-image:radial-gradient(#ffffff0b 1px,#0000 1px);background-size:22px 22px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000 0%,#0000 85%);mask-image:linear-gradient(#000 0%,#0000 85%)}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}:focus-visible{outline:2px solid var(--lime);outline-offset:2px}::selection{background:#ff4f9359}.app{width:min(1180px,100% - 20px);padding:14px 0 calc(18px + env(safe-area-inset-bottom));gap:14px;margin:0 auto;display:grid}.topbar,.card,.dock,.howto{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:22px}.topbar{z-index:8;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);gap:12px;padding:12px 14px;display:grid;position:sticky;top:8px}.brand-row,.transport-row,.toolbar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.brand{align-items:center;gap:10px;margin-right:auto;display:flex}.brand svg{width:42px;height:42px;display:block}.brand strong{letter-spacing:-.04em;font-size:1.25rem;display:block}.brand span,.fine,.field span,.hint-inline{color:var(--muted)}.brand span{font-size:.82rem}.transport-row{justify-content:space-between}.transport-actions,.export-actions,.button-row,.chips,.seg{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.now-chord{text-align:center;letter-spacing:-.03em;min-width:4.5rem;color:var(--chords);font-weight:800}.toolbar{align-items:flex-end}.field{flex-direction:column;gap:4px;min-width:0;display:flex}.field span{letter-spacing:.04em;text-transform:uppercase;font-size:.75rem;font-weight:700}.field input[type=range]{width:128px;accent-color:var(--melody)}.field.master input{accent-color:var(--lime)}input[type=number],select{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;min-height:44px;padding:8px 10px}input[type=number]{width:4.6rem}.btn,.seg button,.chips button{border:1px solid var(--line);background:var(--surface-2);touch-action:manipulation;border-radius:999px;min-height:44px;padding:0 14px;font-weight:700}.btn-play{background:var(--lime);color:#172000;border-color:#0000}.btn-play.is-on{background:#fff}.btn-primary{background:linear-gradient(120deg, var(--melody), var(--chords));color:#fff;border-color:#0000}.btn-record{background:radial-gradient(circle at 35% 30%, #ff8aa9, var(--danger));color:#fff;border-color:#0000;min-width:132px}.btn-record.is-on{animation:1.2s ease-out infinite pulse}.seg button.is-on,.chips button.is-on{color:#1a1020;border-color:#0000}.chips button[data-style=pop].is-on{background:var(--melody)}.chips button[data-style=hiphop].is-on{background:var(--drums)}.chips button[data-style=lofi].is-on{background:var(--bass)}.chips button[data-style=rock].is-on{background:#ff7a45}.chips button[data-style=edm].is-on{background:var(--chords)}.seg button.is-on{color:#1a1020;background:#fff}.howto{padding:4px 16px 12px}.howto summary{cursor:pointer;align-items:center;min-height:44px;font-weight:800;display:flex}.howto ol{margin:0 0 8px;padding-left:1.2rem}.howto li+li{margin-top:4px}.howto kbd{border:1px solid var(--line);background:#120f1e;border-radius:6px;min-width:1.2em;padding:0 5px;font-family:inherit;font-size:.85em;display:inline-block}.studio{grid-template-columns:minmax(0,1fr) minmax(280px,360px);align-items:start;gap:14px;display:grid}.tracks,.perform{gap:12px;display:grid}.track,.panel{border:1px solid var(--line);background:#121020b8;border-radius:18px;padding:10px}.track.is-recording{border-color:#ff4d6dcc;box-shadow:0 0 0 1px #ff4d6d59}.track-head{align-items:center;gap:8px;display:flex}.swatch{background:var(--track);border-radius:99px;flex:none;width:12px;height:36px}.track[data-track=melody]{--track:var(--melody)}.track[data-track=drums]{--track:var(--drums)}.track[data-track=bass]{--track:var(--bass)}.track[data-track=chords]{--track:var(--chords)}.track-title{gap:2px;margin-right:auto;display:grid}.track-title strong{letter-spacing:-.03em}.track-title select{min-height:36px;padding:4px 8px}.icon-btn{border-radius:10px;min-height:36px;padding:0 10px}.icon-btn.is-on{background:var(--track);color:#1a1020;border-color:#0000}.vol{color:var(--muted);align-items:center;gap:8px;margin:8px 0;font-size:.8rem;font-weight:700;display:flex}.vol input{accent-color:var(--track);flex:1}.lane{background:linear-gradient(90deg,#ffffff29 1px,#0000 1px),linear-gradient(90deg,#ffffff0d 1px,#0000 1px),#161226;background-size:calc(100% / var(--bars)) 100%, calc(100% / (var(--bars) * 4)) 100%, auto;border-radius:12px;height:92px;position:relative;overflow:hidden}.track[data-track=drums] .lane{height:112px}.lane-notes,.playhead{position:absolute;inset:0}.playhead{opacity:0;pointer-events:none;z-index:3;background:#fff;width:2px;inset:0 auto 0 0;box-shadow:0 0 10px #fff}.lane.is-playing .playhead{opacity:1}.note,.pip{background:var(--track);color:#1a1020;border-radius:7px;align-items:center;height:18px;padding:0 4px;font-size:10px;font-weight:800;display:flex;position:absolute;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff47,0 4px 10px #0000002e}.pip{justify-content:center;width:12px;height:16px;padding:0;transform:translate(-50%)}.row-label,.bar-no{z-index:2;color:#ffffff73;pointer-events:none;font-size:10px;font-weight:800;position:absolute}.bar-no{top:3px}.chord-name{color:var(--chords);top:16px}.empty{color:var(--muted);text-align:center;place-items:center;margin:0;padding:8px;font-size:.85rem;display:grid;position:absolute;inset:0}.panel h2{letter-spacing:-.03em;margin:0 0 6px;font-size:1rem}.panel p{margin:0 0 10px}.pitch{letter-spacing:-.06em;min-height:1em;font-size:clamp(2.6rem,8vw,4rem);font-weight:800;line-height:.9}.pitch.is-count{color:var(--lime)}.meter{background:#120f1e;border-radius:99px;height:10px;margin:8px 0;overflow:hidden}.meter>div{background:linear-gradient(90deg, var(--bass), var(--lime));transform-origin:0;width:0;height:100%}.check{align-items:center;gap:8px;min-height:44px;display:flex}.status{min-height:1.4em;font-weight:700}.midi-line{min-height:1.2em}.dock{z-index:7;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:12px;padding:12px;display:grid;position:sticky;bottom:0}.pads{grid-template-columns:1fr 1fr;gap:8px;display:grid}.pad{color:#1a1020;touch-action:none;-webkit-user-select:none;user-select:none;border:0;border-radius:16px;flex-direction:column;justify-content:space-between;align-items:flex-start;min-height:74px;padding:10px 12px;font-weight:800;display:flex}.pad small{opacity:.7;font-weight:700}.pad[data-drum=kick]{background:#ff6b93}.pad[data-drum=snare]{background:var(--drums)}.pad[data-drum=hat]{background:var(--bass)}.pad[data-drum=clap]{background:var(--chords);color:#fff}.pad.is-down,.pad.is-lit{filter:brightness(1.25);transform:translateY(1px)}.piano-wrap{gap:8px;min-width:0;display:grid}.piano-tools{justify-content:space-between;align-items:center;gap:8px;display:flex}.piano-tools strong{letter-spacing:-.03em}.piano{--whites:14;touch-action:none;-webkit-user-select:none;user-select:none;background:#d9d3ea;border-radius:12px;height:148px;position:relative;overflow:hidden}.white-key,.black-key{touch-action:none;border:0;padding:0;position:relative}.white-key{color:#65597a;background:linear-gradient(#fff,#efeaf8);border-right:1px solid #c9c1da;border-radius:0 0 8px 8px;flex-direction:column;flex:1;justify-content:flex-end;align-items:center;height:100%;padding-bottom:6px;font-size:11px;font-weight:800;display:flex}.piano-row{height:100%;display:flex}.black-key{width:calc(100% / var(--whites) * .64);height:62%;top:0;left:calc(100% / var(--whites) * var(--after));z-index:2;color:#d9d3ea;background:linear-gradient(#3a3550,#171422);border-radius:0 0 6px 6px;font-size:10px;font-weight:800;position:absolute;transform:translate(-50%)}.white-key.in-scale{box-shadow:inset 0 6px 0 var(--melody)}.black-key.in-scale{box-shadow:inset 0 -6px 0 var(--melody)}.white-key.is-down,.white-key.is-lit{background:linear-gradient(#ffe1ee,#ffb3cc)}.black-key.is-down,.black-key.is-lit{background:var(--melody);color:#1a1020}.key-legend{color:var(--muted);font-size:.75rem}.gate{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0806108c;place-items:center;padding:22px;display:grid;position:fixed;inset:0}.gate[hidden]{display:none!important}.gate-card{background:var(--surface);border:1px solid var(--line);text-align:center;width:min(440px,100%);box-shadow:var(--shadow);border-radius:28px;padding:28px 22px}.gate-card svg{width:72px;height:72px}.gate-card h1{letter-spacing:-.06em;margin:8px 0 4px;font-size:2.4rem}.gate-card .btn{width:100%;min-height:54px;margin-top:8px;font-size:1.1rem}@keyframes pulse{0%{box-shadow:0 0 #ff4d6d8c}to{box-shadow:0 0 0 14px #ff4d6d00}}@media (max-width:980px){.studio{grid-template-columns:1fr}.topbar{position:static}.dock{grid-template-columns:1fr}.pads{grid-template-columns:repeat(4,1fr)}.pad{min-height:58px;padding:8px}.piano{height:112px}.key-legend,.header-export{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}