:root{font-family:Inter,sans-serif;color:#f5f5f2;background:#171717;font-synthesis:none;--mint:#2ee9a8;--muted:#92948f;--line:#ffffff14;--panel:#1e1f1e}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select,input[type=range]{cursor:pointer}button{color:inherit;border:1px solid var(--line);background:#ffffff05;border-radius:6px;transition:background .15s,border-color .15s,transform .15s}button:hover{background:#ffffff0c;border-color:#ffffff38}button:active{transform:translateY(1px)}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--mint);outline-offset:4px}a{color:inherit;text-decoration:none}select{background:#242624;color:#f5f5f2;border:1px solid #ffffff14;border-radius:5px;padding:8px 24px 8px 10px;font-size:12px;max-width:100%}input[type=range]{accent-color:var(--mint);height:4px;width:100%;margin:10px 0}input[type=checkbox]{accent-color:var(--mint)}header{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4.2%}.brand{display:flex;gap:12px;align-items:center;font-family:Unbounded,sans-serif;font-size:16px;font-weight:800}.brand img{width:42px;height:42px;object-fit:contain;animation:brand-breathe 5s ease-in-out infinite}.brand-sub{display:block;font:9px JetBrains Mono,monospace;letter-spacing:1.5px;margin-top:5px;color:var(--muted)}@keyframes brand-breathe{50%{transform:scale(.92) rotate(-4deg);filter:drop-shadow(0 0 9px #2ee9a860)}}.header-note,.eyebrow,.tiny,.section-no,.session-meta,.compact,.tempo>label,.range-field>span,.grid-footer,.scope-bottom,.live-badge,.chord>span,.chord-dots,.keyboard-wrap p,footer,#octave{font-family:JetBrains Mono,monospace}.header-note{font-size:10px;letter-spacing:1.5px;color:#afb3ab;display:flex;align-items:center;gap:10px}.header-note i{height:5px;width:5px;border-radius:50%;background:var(--mint)}.round{width:32px;height:32px;display:inline-grid;place-items:center;font-size:17px;flex-shrink:0}main{max-width:1510px;margin:auto;padding:42px 4.2% 0}.intro{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:30px}.eyebrow{font-size:9px;letter-spacing:1.6px;color:var(--mint);margin:0 0 13px}h1{font:800 clamp(26px,3.05vw,47px)/1.2 Unbounded,sans-serif;letter-spacing:-1.9px;margin:0}h1 span{color:var(--mint)}.lede{font-size:12px;color:#a8aaa5;margin:12px 0 0}.session-meta{text-align:right;font-size:8px;letter-spacing:1px;display:grid;gap:8px;color:var(--muted)}#session-name{font:500 13px Inter;color:#dadcd6}.transport{display:flex;align-items:center;gap:20px;background:#212321;border:1px solid #ffffff16;padding:17px 20px;border-radius:10px;margin-bottom:22px;box-shadow:0 8px 35px #0001}.primary{background:var(--mint);border-color:var(--mint);color:#101d17;display:flex;gap:13px;align-items:center;padding:13px 17px;min-height:48px;font-weight:700;font-size:13px}.primary:hover{background:#67f1c0;border-color:#67f1c0}.primary kbd{font:8px JetBrains Mono;opacity:.65;border:1px solid #122d2440;padding:4px;border-radius:3px}.record{display:flex;gap:7px;align-items:center;padding:12px 3px;border:0;background:none;font-size:11px;min-width:75px}.record>span{color:#fd808b;font-size:15px}.record b{font-weight:500}.recording>span{animation:rec 1s infinite}@keyframes rec{50%{opacity:.2}}.tempo>label,.compact{font-size:8px;letter-spacing:1px;color:var(--muted)}.tempo>div{display:flex;align-items:center;gap:5px}.tempo input{width:57px;background:transparent;border:0;color:#f5f5f2;font:600 27px Space Grotesk;padding:0;appearance:textfield}.tempo input::-webkit-inner-spin-button{display:none}.tempo span{font:9px JetBrains Mono;color:var(--muted)}#tap{font:8px JetBrains Mono;padding:4px;margin-left:5px}.transport-divider{height:36px;border-left:1px solid var(--line)}.compact{display:grid;gap:6px}.compact select{padding:4px 16px 4px 0;border:0;background:transparent;min-width:65px;font:600 12px Inter}.small{padding:9px;font-size:10px}.master{flex:1;min-width:90px;max-width:160px;margin-left:auto}.range-field{display:block}.range-field>span{display:flex;justify-content:space-between;gap:8px;font-size:8px;letter-spacing:.7px;color:var(--muted)}.range-field output{color:#d9ddd7}.studio-layout{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:20px}.workspace,aside{display:flex;flex-direction:column;gap:20px;min-width:0}.panel{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:23px;min-width:0}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}.panel-head>div{display:flex;align-items:center;gap:11px}h2{font:600 14px Space Grotesk,sans-serif;margin:0;letter-spacing:-.15px}.section-no{font-size:9px;color:#777f76}.tiny{font-size:8px;color:var(--muted);letter-spacing:.7px}.preset select{background:#ffffff04;font-size:10px;max-width:180px}.chords{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.chord{border:1px solid #ffffff15;border-radius:7px;padding:16px 15px;background:linear-gradient(140deg,#ffffff04,transparent);transition:border-color .15s,background .15s}.chord>span{font-size:8px;letter-spacing:.7px;color:var(--muted)}.chord select{display:block;padding:9px 0;font:500 32px Space Grotesk;border:0;background:transparent;width:100%;color:#d7dfd7}.chord select option{background:#242624;font-size:17px}.chord-dots{font-size:6px;letter-spacing:5px;color:#464e48;margin-top:9px}.chord.is-playing{background:#2ee9a80c;border-color:#2ee9a88c}.chord.is-playing select,.chord.is-playing .chord-dots{color:var(--mint)}.harmony-bottom{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:18px}.inline-field{display:flex;align-items:center;gap:9px;font-size:10px;color:var(--muted)}.inline-field select{font-size:10px;background:transparent;padding:6px 10px}.text-button{border:0;padding:5px 0;font-size:10px;color:#b0b5ad;background:none;white-space:nowrap}.text-button:hover{color:var(--mint);background:none}.actions{gap:15px!important}.actions select{font-size:10px;padding:5px 8px}.grid-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#3a5547 transparent;padding-bottom:3px}.sequencer,.piano-roll{min-width:560px}.drum-row,.step-numbers,.melody-row{display:grid;grid-template-columns:104px repeat(16,minmax(0,1fr));gap:5px;align-items:center}.step-numbers{margin-bottom:9px}.step-numbers span{text-align:center;font:8px JetBrains Mono;color:#5c645c}.step-numbers .strong{color:#b8beb5}.drum-row{margin-top:7px}.track-name{display:flex;align-items:center;gap:9px;background:none;border:0;text-align:left;font-size:10px;padding:0;white-space:nowrap;height:30px}.drum-icon{font:16px Space Grotesk;color:#858f86;width:18px}.step{height:29px;border-radius:3px;background:#2b2e2a;border:1px solid #ffffff03;padding:0}.step:nth-child(4n+2){background:#333830}.step.on{background:#29946e;border-color:#2ee9a82b}.step.on.accent{background:var(--mint);border-color:var(--mint);box-shadow:inset 0 -3px #0d946844}.step.is-playing{box-shadow:0 0 0 1px #a8f9d8;background:#536356}.step.on.is-playing{background:#a5ffd8}.grid-footer{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:18px;color:#858d81;font-size:7px;letter-spacing:.25px}.grid-footer>label{white-space:nowrap;font-family:Inter;font-size:9px;display:flex;align-items:center;gap:5px}.grid-footer .range-field{width:128px;flex-shrink:0;display:block}.melody-row{grid-template-columns:34px repeat(16,minmax(0,1fr));gap:4px;margin-bottom:4px}.melody-row>span{font:9px JetBrains Mono;color:#a1ac9c}.note-cell{height:19px;border-radius:2px;border:1px solid #ffffff04;background:#292d27;padding:0}.note-cell.beat-start{background:#31372d}.note-cell.on{background:#c9d5b8;border-color:#d8e6c7;box-shadow:inset 0 -3px #879b7220}.note-cell.is-playing{box-shadow:inset 0 0 0 1px #2ee9a888}.note-cell.on.is-playing{background:var(--mint)}.scope-panel{padding:20px 20px 14px;background:radial-gradient(ellipse at 50% 100%,#2ee9a806,transparent),#1b1e1b}.scope-panel .panel-head{margin-bottom:10px}.scope-panel .eyebrow{font-size:8px;margin:0}.live-badge{font-size:7px;color:#9ca495}#scope{height:97px;width:100%;display:block}.scope-bottom{display:flex;justify-content:space-between;align-items:center;font-size:7px;color:#798671;margin-top:11px}#position{font:500 23px Space Grotesk;color:#d3ddcd}.variations{padding:20px}.variations .panel-head{margin-bottom:15px}.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.slots button{height:42px;font:600 17px Space Grotesk;position:relative}.selected{color:var(--mint)!important;background:#2ee9a810!important;border-color:#2ee9a854!important}.slots i{position:absolute;bottom:5px;left:calc(50% - 1.5px);width:3px;height:3px;border-radius:50%;background:transparent}.slots .filled i{background:var(--mint)}.variations p{font-size:10px;line-height:1.7;color:var(--muted);margin:13px 0 0}.effects{padding:20px}.effects .panel-head{margin-bottom:16px}#xy{height:140px;border:1px solid #2ee9a823;border-radius:5px;position:relative;touch-action:none;cursor:crosshair;overflow:hidden;background:linear-gradient(#2ee9a805 1px,transparent 1px),linear-gradient(90deg,#2ee9a805 1px,transparent 1px),radial-gradient(ellipse at 70% 30%,#2ee9a815,transparent);background-size:25% 25%,25% 25%,100% 100%;margin-bottom:18px}#xy>span{position:absolute;font:7px JetBrains Mono;letter-spacing:.6px;color:#8a9a82;pointer-events:none}.xy-top{top:10px;left:calc(50% - 24px)}.xy-bottom{bottom:9px;left:calc(50% - 38px)}.xy-left{left:10px;top:50%}.xy-right{right:10px;top:50%}#xy-dot{position:absolute;transform:translate(-50%,-50%);width:15px;height:15px;background:var(--mint);border:4px solid #c5ffe2;border-radius:50%;box-shadow:0 0 25px #2ee9a87a;pointer-events:none}.effects .range-field{margin-top:12px}.mixer{padding:20px}.mixer .panel-head{margin-bottom:18px}.mix-row{display:grid;grid-template-columns:56px 1fr 23px 23px;gap:8px;align-items:center;margin-top:9px;font-size:10px}.mix-row button{width:23px;height:23px;font:9px JetBrains Mono;padding:0}.mix-row input{margin:0}.playroom{margin-top:20px;padding-bottom:16px}.playroom .panel-head{margin-bottom:18px}.instruments{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:25px}#keyboard{display:flex;height:125px;gap:3px}.piano-key{flex:1;min-width:0;position:relative;background:#e7e9df;border:1px solid #eef1e7;color:#222c23;border-radius:3px 3px 5px 5px;box-shadow:inset 0 -6px #c2c8b9;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 0 13px;gap:7px;touch-action:manipulation}.piano-key:nth-child(2n){background:#dce1d5}.piano-key:hover{background:#c3f7d9}.piano-key.pressed{background:var(--mint);transform:translateY(3px);box-shadow:inset 0 -2px #239f75}.piano-key>span{font:10px Space Grotesk;font-weight:600}.piano-key kbd{font:8px JetBrains Mono;color:#768270}.keyboard-wrap p{font-size:8px;color:#8a9384;margin:12px 0 0}.pads{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:8px;padding-bottom:22px}.pad{border:1px solid #485340;background:linear-gradient(#31392b,#283025);display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:9px;border-radius:5px}.pad kbd{font:8px JetBrains Mono;color:#88997c}.pad span{font-size:9px}.pressed,.pad:active{background:#2ee9a840!important;border-color:var(--mint)!important}#octave{font-size:8px;color:var(--muted);min-width:65px;text-align:center}.session-tools{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0 36px}.session-tools>div{display:flex;gap:10px;flex-wrap:wrap}.session-tools button{font-size:10px;padding:10px 13px}.export-button{color:var(--mint);border-color:#2ee9a843;background:#2ee9a808}footer{border-top:1px solid var(--line);padding:25px 0;display:flex;justify-content:space-between;gap:20px;font-size:7px;letter-spacing:.6px;color:#6f7869}footer a{font-family:Inter;letter-spacing:0;font-size:9px}footer b{display:inline-block;color:var(--mint);font-weight:500;transition:letter-spacing .3s}footer a:hover b{letter-spacing:1px}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#daf8e8;color:#173c29;font-size:12px;padding:14px 22px;border:1px solid #2ee9a8;border-radius:8px;box-shadow:0 10px 40px #0005;transition:.2s;z-index:30;max-width:calc(100% - 30px);text-align:center;line-height:1.5}#toast.show{opacity:1;transform:translate(-50%)}dialog{background:#20241f;color:#f5f5f2;border:1px solid #455442;border-radius:12px;padding:34px;max-width:550px;width:calc(100% - 28px)}dialog::backdrop{background:#080e09b8;backdrop-filter:blur(7px)}dialog h2{font:700 25px Space Grotesk;margin:18px 0}dialog ol{padding-left:20px;font-size:12px;line-height:1.9;color:#bac5b3}dialog li{margin:10px 0}dialog>p:last-child{font-size:11px;color:#8fa384;line-height:1.7}#close-help{position:absolute;right:15px;top:15px}@media(min-width:1450px){.studio-layout{grid-template-columns:minmax(0,1fr) 315px}.panel{padding:26px}.step{height:34px}.note-cell{height:23px}.chord{padding:20px 18px}.chord select{font-size:38px}}@media(max-width:1100px){main{padding:30px 3% 0}.transport{gap:13px;padding:14px}.primary{padding:12px}.primary kbd,.small span{display:none}.studio-layout{grid-template-columns:minmax(0,1fr) 250px;gap:15px}.panel{padding:18px}.workspace,aside{gap:15px}.harmony-bottom,.grid-footer{flex-wrap:wrap}.grid-footer>span{flex-basis:100%}.chord{padding:13px 10px}.chord>span{font-size:7px}.chord select{font-size:27px}.instruments{grid-template-columns:minmax(0,1fr) 210px}.panel-head{gap:8px}h2{font-size:13px}.tiny{font-size:7px}}@media(max-width:820px){.header-note{display:none}header{height:70px}.intro{margin-bottom:22px}.session-meta{display:none}.transport{flex-wrap:wrap;gap:15px;position:relative}.transport-divider{display:none}.master{min-width:90px;max-width:none}.studio-layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:15px}.scope-panel{order:0}.variations{order:1}.effects{order:2}.mixer{order:3}.grid-footer>span{flex-basis:auto}.panel-head{margin-bottom:17px}.instruments{grid-template-columns:1fr}.pads{grid-template-columns:repeat(6,1fr);grid-template-rows:65px;padding-bottom:0}.playroom .tiny{display:none}.playroom .actions{gap:7px!important}footer>span:last-child{display:none}.sequencer,.piano-roll{min-width:570px}.chord>span{font-size:8px}}@media(max-width:480px){header{padding:0 18px}main{padding:28px 14px 0}.brand{font-size:14px}.brand img{width:35px;height:35px}h1{font-size:28px;letter-spacing:-1.3px}.lede{font-size:11px}.intro .eyebrow{font-size:8px}.transport{gap:12px;padding:13px}.primary{flex:1;justify-content:center}.tempo{margin-left:auto}.tempo input{width:47px;font-size:24px}.record{min-width:66px;font-size:10px}.compact{min-width:60px}.compact select{font-size:11px}.master{flex:1;min-width:67px}.small{padding:6px}.transport #panic{width:26px;height:26px}.panel{padding:17px 13px}.panel-head{flex-wrap:wrap}.section-no{font-size:8px}h2{font-size:13px}.chords{gap:7px}.chord{padding:12px 8px}.chord>span{font-size:6px;letter-spacing:0}.chord select{font-size:25px;padding:8px 0}.chord-dots{letter-spacing:3px;font-size:5px}.harmony-bottom{gap:10px}.inline-field{gap:5px;font-size:9px}.inline-field select{font-size:9px;padding:5px}.harmony-bottom .text-button{margin-left:auto}.grid-footer{font-size:6px;gap:10px}.grid-footer>span{flex-basis:100%}.grid-footer .range-field{width:120px;margin-left:auto}.melody-panel .actions{width:100%;justify-content:flex-end;gap:18px!important}.beat-panel .actions{gap:12px!important}aside{gap:12px}.scope-panel,.variations,.effects,.mixer{padding:15px 12px}aside h2{font-size:12px}aside .panel-head .tiny{display:none}.scope-panel .panel-head{gap:6px}.scope-panel .eyebrow,.live-badge{font-size:6px}#scope{height:85px}.scope-bottom{font-size:5px;gap:4px}#position{font-size:19px}.slots{gap:5px}.slots button{height:36px}.variations p{font-size:9px;line-height:1.5;margin-top:9px}.effects,#xy{grid-column:auto}#xy{height:130px}.xy-left,.xy-right{font-size:5px!important}.xy-left{left:5px}.xy-right{right:5px}.effects .range-field>span{font-size:6px}.mixer .panel-head{margin-bottom:15px}.mix-row{grid-template-columns:1fr 21px 21px;gap:7px;margin-top:12px}.mix-row>span{grid-column:1/-1;font-size:9px}.mix-row input{grid-column:1}.mix-row button{width:21px;height:21px}.playroom .panel-head{gap:10px}.playroom .actions{margin-left:auto}#octave{min-width:55px;font-size:7px}.playroom .round{width:25px;height:25px}.keyboard-wrap{overflow-x:auto}#keyboard{min-width:470px;height:110px}.keyboard-wrap p{font-size:7px;line-height:1.7}.pads{gap:6px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,58px)}.pad{padding:8px}.session-tools{align-items:flex-start;gap:14px;flex-direction:column;padding-bottom:25px}.session-tools>div:last-child{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.session-tools button{font-size:9px;padding:10px 7px}footer{gap:10px;flex-direction:column;font-size:6px;align-items:center;padding-bottom:23px}footer a{font-size:9px}dialog{padding:28px 24px}dialog h2{font-size:22px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}