@font-face{font-family:Inter;src:url(assets/inter.woff2) format('woff2');font-weight:100 900;font-display:swap}@font-face{font-family:Grotesk;src:url(assets/grotesk.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{font-family:Inter,Arial,sans-serif;color:#eff2e9;background:#101210;color-scheme:dark;--lime:#d0f590;--muted:#8e998b;--edge:#2d342c;--panel:#181c18}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button,select{color:inherit}button{transition:background .15s,transform .15s}button:disabled{opacity:.35;cursor:default}button:hover:not(:disabled){filter:brightness(1.2)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:3px}a{color:inherit;text-decoration:none}button{border:0}input[type=range]{accent-color:var(--lime);width:100%;height:20px;cursor:pointer}input[type=checkbox]{accent-color:var(--lime)}select{border:1px solid var(--edge);border-radius:8px;background:#20271f;padding:10px 28px 10px 12px;max-width:100%;font-size:12px}input:not([type]){color:inherit}header,main,footer{max-width:1600px;margin:auto;padding-left:clamp(18px,4vw,64px);padding-right:clamp(18px,4vw,64px)}header{height:90px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--edge)}.brand{font-family:Grotesk,Inter,sans-serif;font-size:32px;font-weight:700;letter-spacing:-1.5px}.brand>span,.credit strong span{color:var(--lime)}.brand small{font:9px Inter,sans-serif;letter-spacing:1.4px;margin-left:18px;color:var(--muted)}.header-right{display:flex;align-items:center;gap:30px}.local-badge,.file-bar{font-size:11px;color:var(--muted)}i{display:inline-block;background:var(--lime);width:5px;height:5px;border-radius:50%;margin-right:7px}.button,.icon-button{height:38px;border:1px solid var(--edge);border-radius:8px;background:#1b211b;padding:0 15px;font-size:12px;white-space:nowrap}.icon-button{width:38px;padding:0;font-size:20px}.intro{padding:42px 0 34px;display:flex;align-items:center;justify-content:space-between}.eyebrow{display:block;font-size:9px;font-weight:500;letter-spacing:1.8px;color:var(--muted)}h1,h2{font-family:Grotesk,Inter,sans-serif;font-weight:500}h1{font-size:clamp(36px,4.2vw,62px);line-height:1.06;letter-spacing:-2.8px;margin:15px 0}h1 span{color:var(--lime)}.intro p{color:var(--muted);font-size:13px}.intro-art{position:relative;width:245px;height:120px;display:flex;align-items:center;justify-content:flex-end}.intro-art div{position:absolute;width:100px;height:100px;border:1px solid #6a7b4d;border-radius:50%;left:0;transform:rotate(-30deg) scaleX(.68)}.intro-art div:nth-child(2){left:24px;border-color:#a9c779}.intro-art div:nth-child(3){left:48px;border-color:var(--lime)}.intro-art span{font-size:8px;line-height:1.8;letter-spacing:1.5px;color:var(--muted)}.project-bar{display:flex;justify-content:space-between;align-items:center;padding:17px 0 21px;gap:20px}.project-bar input{background:none;border:0;padding:8px 0 0;font-weight:500;font-size:17px;max-width:260px}.project-actions{display:flex;gap:7px;align-items:center}.project-actions>span{color:var(--muted);font-size:10px;margin-right:12px}#project-count{color:var(--lime);margin-left:7px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px;align-items:start}.panel{background:var(--panel);border:1px solid var(--edge);border-radius:16px}.editor{overflow:hidden}.section-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:25px 26px 20px}h2{font-size:22px;letter-spacing:-.7px;margin:9px 0 0}.bank-bar{display:flex;align-items:center;justify-content:space-between;padding:0 26px 22px;gap:15px}.banks{display:flex;gap:7px}.banks button{height:34px;width:40px;border-radius:7px;background:#242c23;color:var(--muted);font-weight:600;font-size:12px}.banks button[aria-pressed=true]{background:var(--lime);color:#27331d}.banks button.sounding{box-shadow:0 0 0 2px #fff}.bank-tools{display:flex;gap:15px}.text-button{font-size:11px;background:none;color:#b2beaa;padding:6px 0}.tabs{display:flex;gap:24px;border-bottom:1px solid var(--edge);padding:0 26px}.tabs button{padding:12px 0 15px;background:none;color:var(--muted);border-bottom:2px solid transparent;font-size:12px}.tabs button[aria-selected=true]{color:var(--lime);border-color:var(--lime)}.tab-panel{padding:23px 26px 20px;min-height:432px}[hidden]{display:none!important}.step-ruler,.track{display:grid;grid-template-columns:106px minmax(0,1fr);gap:12px}.step-ruler{margin-bottom:10px}.step-ruler>span{font-size:8px;letter-spacing:1px;color:var(--muted)}.step-ruler>div,.pads{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:5px}.step-ruler>div span{font-size:8px;text-align:center;color:#667361}.track{align-items:center;margin-bottom:10px}.track-label{display:flex;align-items:center;gap:6px}.track-name{font-size:11px;color:var(--track);background:none;padding:6px 0;min-width:64px;text-align:left}.track-name:before{content:'';display:inline-block;width:5px;height:5px;background:var(--track);border-radius:50%;margin-right:7px}.solo{font-size:8px;background:#242b23;border:1px solid var(--edge);border-radius:4px;width:21px;height:23px;color:#8b9884}.solo[aria-pressed=true]{background:var(--track);color:#192015}.track.muted .pads{opacity:.24}.track-name[aria-pressed=true]{text-decoration:line-through;opacity:.5}.pad{position:relative;height:32px;border-radius:5px;border:1px solid #343e31;background:#252d23;padding:0}.pad:nth-child(4n+1){border-left-color:#596c4b}.pad[aria-pressed=true]{background:var(--track);border-color:var(--track);opacity:var(--velocity,1)}.pad[aria-pressed=true]:after{content:'';height:3px;border-radius:2px;background:#0004;position:absolute;bottom:3px;left:4px;right:4px}.pad.current,.piano-note.current{outline:1px solid #f1ffe9;outline-offset:2px}.hint{display:flex;justify-content:space-between;gap:12px;font-size:9px;line-height:1.7;color:var(--muted);margin:16px 0 0}.master{padding:21px;grid-column:2;grid-row:1/3}.master-top{display:flex;justify-content:space-between;align-items:center}.master-top .eyebrow{font-size:8px}#live-label{font-size:8px;color:var(--muted)}.scope{position:relative;height:185px;display:grid;place-items:center}.scope canvas{position:absolute;inset:0;width:100%;height:100%}.scope>div{text-align:center;position:relative;pointer-events:none}#clock{display:block;font-family:Grotesk,sans-serif;font-size:43px;letter-spacing:-2px}.scope small{display:block;font-size:7px;letter-spacing:1px;color:var(--muted);margin-top:7px}.transport{display:flex;gap:8px}.play{height:46px;border-radius:8px;background:var(--lime);color:#26331c;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:600;flex:1}.transport>.icon-button{height:46px;width:40px;font-size:14px}.play kbd{font-size:7px;font-weight:400;opacity:.5}.play-mode{display:flex;gap:3px;align-items:center;margin:14px 0 22px;font-size:9px}.play-mode button{padding:7px 8px;border-radius:5px;background:transparent;color:var(--muted);font-size:10px}.play-mode button[aria-pressed=true]{background:#2b3526;color:var(--lime)}.play-mode label{margin-left:auto;display:flex;align-items:center;color:var(--muted)}.slider-label{display:flex;justify-content:space-between;flex-wrap:wrap;font-size:11px;color:var(--muted);gap:10px}.slider-label strong{font-size:10px;color:#d6dfce;font-weight:500}.slider-label input{margin:0}.tempo-tools{display:flex;justify-content:space-between;margin:4px 0 22px}.tempo-tools button{font-size:9px}.tempo-tools button[aria-pressed=true]{color:var(--lime)}.export-box{border-top:1px solid var(--edge);margin-top:22px;padding-top:22px}.export-box>div{display:flex;justify-content:space-between;align-items:center}.export-box .eyebrow{font-size:8px}#duration{font-size:11px;color:var(--lime)}.export-length{font-size:10px;color:var(--muted);display:block;margin:17px 0 12px}.export-length select{width:100%;display:block;margin-top:8px}.export{height:44px;width:100%;border:1px solid #78955a;background:#d0f5800c;border-radius:8px;color:var(--lime);font-size:12px;display:flex;align-items:center;justify-content:space-between;padding:0 14px}.export-box small{display:block;text-align:center;font-size:8px;color:var(--muted);margin-top:11px}.arranger{grid-column:1;padding-bottom:20px}.arranger .section-top{padding-bottom:12px}.repeat-label{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:10px}.arranger-info{padding:0 26px;display:flex;justify-content:space-between;align-items:center;gap:15px}.arranger-info p{font-size:11px;color:var(--muted);margin:0 0 18px}#song-length{white-space:nowrap;font-size:10px;color:var(--lime);margin-bottom:18px}.arrangement{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;padding:0 26px}.song-block{border:1px solid #3b4932;background:#24301d;border-radius:8px;padding:8px;position:relative}.song-block.sounding{outline:2px solid var(--lime);outline-offset:2px}.song-block>span{font-size:8px;color:#778c65;display:block}.song-block select{border:0;background:none;color:var(--lime);font-size:20px;font-weight:600;padding:6px 0;width:100%}.block-actions{display:flex;justify-content:space-between;gap:3px}.block-actions button{font-size:11px;padding:2px;background:none;color:#9ab085}.arranger-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 26px 0}.add-pattern{display:flex;align-items:center;gap:7px}.add-pattern>span{font-size:8px;color:var(--muted);letter-spacing:1px;margin-right:7px}.add-pattern button{font-size:11px;height:28px;width:28px;border:1px dashed #526545;color:#b5caa3;background:none;border-radius:5px}.arranger>.hint{padding:0 26px;font-size:8px}.melody-tools{display:flex;align-items:flex-end;gap:12px;margin-bottom:18px}.melody-tools label,.sound-options label{display:flex;flex-direction:column;gap:7px;font-size:10px;color:var(--muted)}.melody-tools select{font-size:11px;padding:8px}.melody-tools .button{margin-left:auto;font-size:10px}.piano{display:grid;gap:4px}.piano-row{display:grid;grid-template-columns:42px repeat(16,minmax(0,1fr));gap:4px}.piano-row>span{font-size:9px;color:var(--muted);align-self:center}.piano-note{height:30px;border-radius:3px;background:#232b24;border:1px solid #354132}.piano-note:nth-child(4n+2){border-left-color:#6a775f}.piano-note[aria-pressed=true]{background:#adb8f0;border-color:#adb8f0}.channels{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.channel{padding:12px 7px;border:1px solid var(--edge);border-radius:8px;min-width:0;text-align:center;background:#1e251d}.channel h3{font-size:10px;color:var(--track);margin:0 0 15px}.channel label{font-size:8px;color:var(--muted);display:block;margin-bottom:16px}.channel input[type=range]{accent-color:var(--track);display:block;margin:10px 0;width:100%}.channel output{font-size:10px;color:#c1cfb8}.channel .channel-buttons{display:flex;justify-content:center;gap:5px}.channel button{padding:7px;background:#303a2a;color:var(--muted);border-radius:4px;font-size:10px}.channel button[aria-pressed=true]{color:#1a2417;background:var(--track)}.effect-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.effect{padding:18px 13px;border:1px solid var(--edge);border-radius:10px;background:#1e251c}.effect-icon{display:block;font-size:32px;color:var(--lime);margin-bottom:16px}.effect strong{font-family:Grotesk,sans-serif;font-size:18px;font-weight:500}.effect p{font-size:10px;color:var(--muted);line-height:1.6;min-height:32px}.effect output{font-size:11px;display:block;margin-top:10px;color:var(--lime)}.sound-options{display:flex;gap:24px;align-items:center;margin-top:25px}.sound-options label.check{display:flex;flex-direction:row;align-items:center}.file-bar{display:flex;align-items:center;justify-content:space-between;margin:25px 0 38px;gap:16px}.file-bar>div{display:flex;gap:22px}footer{border-top:1px solid var(--edge);min-height:110px;display:flex;align-items:center;justify-content:space-between;gap:20px}footer .brand{font-size:25px}footer>span{font-size:8px;color:var(--muted);letter-spacing:1.6px}.credit{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px}.credit strong{font-family:Grotesk,sans-serif;font-size:24px;letter-spacing:-1px;color:#f1f5ec}dialog{background:var(--panel);border:1px solid #46543b;color:inherit;border-radius:16px;width:min(520px,90vw);padding:25px}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{margin:0}dialog p{font-size:12px;color:var(--muted)}.saved-project{display:flex;gap:10px;padding:14px 0;border-bottom:1px solid var(--edge);align-items:center}.saved-project>span{flex:1;overflow-wrap:anywhere;font-size:13px}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:var(--lime);color:#223217;border-radius:9px;padding:14px 20px;max-width:90vw;text-align:center;font-size:12px;z-index:50;box-shadow:0 10px 50px #0006;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,0)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1450px){.pad{height:36px}.tab-panel{min-height:465px}.scope{height:220px}}@media(max-width:1150px){.workspace{grid-template-columns:minmax(0,1fr) 260px}.section-top,.tab-panel{padding-left:18px;padding-right:18px}.bank-bar,.tabs{padding-left:18px;padding-right:18px}.step-ruler,.track{grid-template-columns:87px 1fr;gap:7px}.track-name{min-width:57px;font-size:10px}.pads,.step-ruler>div{gap:4px}.bank-tools{gap:10px}.section-top h2{font-size:19px}.preset-wrap select{max-width:170px;font-size:10px}.channels{grid-template-columns:repeat(4,1fr)}.effect-grid{grid-template-columns:repeat(2,1fr)}.arrangement{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.workspace{grid-template-columns:1fr}.master{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:18px 25px}.master-top{grid-column:1/3}.scope{grid-row:2/5;height:190px}.transport,.play-mode,.slider-label,.tempo-tools{margin:0}.play-mode{margin-top:-8px}.tempo-tools{grid-column:2}.master>.slider-label:last-of-type{grid-column:1;grid-row:5}.export-box{grid-column:1/3;margin:0;padding-top:17px;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}.export-box>div{grid-column:1}.export-length{grid-column:1;grid-row:2/4;margin:0}.export-box .export{grid-column:2;grid-row:2}.export-box small{grid-column:2;margin:0}.arranger{grid-row:3}.tab-panel{min-height:430px}.intro-art{transform:scale(.8);transform-origin:right}.project-actions>span{display:none}.channels{grid-template-columns:repeat(8,1fr)}.effect-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){header{height:72px}.brand{font-size:28px}.brand small,.local-badge,.intro-art{display:none}.intro{padding:30px 0 20px}h1{font-size:39px;letter-spacing:-1.8px}.intro p{font-size:11px}.eyebrow{font-size:8px}.project-bar{align-items:flex-start;flex-direction:column;gap:14px;padding-top:10px}.project-actions{width:100%}.project-actions #save{margin-left:auto}.section-top{align-items:flex-start;flex-direction:column;gap:14px;padding-top:20px}.section-top h2{font-size:22px}.preset-wrap,.preset-wrap select{width:100%;max-width:none}.bank-bar{align-items:flex-start;flex-direction:column;gap:13px;padding-bottom:10px}.bank-tools{justify-content:space-between;width:100%}.tabs{gap:24px}.tabs button{font-size:11px}.tab-panel{padding:17px 13px;min-height:0}.track,.step-ruler{grid-template-columns:77px 1fr;gap:7px}.track-name{font-size:9px;min-width:51px}.solo{width:18px;height:21px}.track-label{gap:3px}.pads{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}.pad{height:27px}.track{margin-bottom:12px}.step-ruler{display:none}.hint{font-size:8px;flex-wrap:wrap}.hint>span:last-child{display:none}.master{padding:18px;gap:14px}.master .scope{height:170px}.scope #clock{font-size:32px}.scope small{font-size:6px}.play{font-size:10px}.play kbd{display:none}.transport .icon-button{width:30px}.play-mode{flex-wrap:wrap;gap:0}.play-mode label{margin:0}.play-mode button{font-size:9px}.master .eyebrow{font-size:7px}.export-box{gap:9px 14px}.export-box small{font-size:7px}.arranger .section-top{flex-direction:row;align-items:center;padding:20px 18px 12px}.arranger h2{font-size:19px}.repeat-label{font-size:8px;gap:5px}.repeat-label select{padding:8px}.arranger-info{padding:0 18px;align-items:flex-start}.arranger-info p{font-size:10px;line-height:1.5}.arrangement{padding:0 18px;gap:6px}.arranger-bottom{padding:16px 18px 0;flex-wrap:wrap}.arranger>.hint{padding:0 18px}.channels{grid-template-columns:repeat(4,1fr)}.effect-grid{grid-template-columns:repeat(2,1fr)}.effect{padding:15px}.sound-options{gap:12px}.melody-tools{flex-wrap:wrap;gap:10px}.melody-tools .button{margin-left:0;width:100%}.melody-tools label{flex:1}.piano{min-width:560px}.grid-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#46543b transparent}.file-bar{flex-direction:column;align-items:flex-start;font-size:9px;margin-bottom:25px}footer{min-height:100px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px;gap:15px}footer>span{display:none}.credit{font-size:9px}.credit strong{font-size:22px}.sound-options select{max-width:180px}.export-length select{font-size:10px}.export{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

@media(max-width:380px){.sound-options{flex-wrap:wrap}.tabs{gap:19px}.arranger .section-top{flex-wrap:wrap}.master{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.play-mode button{padding:7px 5px}}
.panel{min-width:0}@media(max-width:900px){.workspace{grid-template-columns:minmax(0,1fr)}}@media(max-width:380px){.tabs{gap:15px}.export-box{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.export-box>div{gap:5px}.export-box .eyebrow{letter-spacing:1px}.arranger-info{flex-wrap:wrap;gap:0}.arranger-info p{margin-bottom:8px}.project-actions .button{padding:0 11px}.sound-options{max-width:100%}}