@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#0c1018;--panel:#141a25;--line:#293140;--muted:#8791a4;--text:#eef2f8;--mint:#b9f881;--mint-dark:#102310}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0,#18202c 0,transparent 45%),var(--bg);color:var(--text);font-family:'DM Sans',Segoe UI,sans-serif;font-size:14px}button,input,select{font:inherit}button,select,input[type=range],input[type=checkbox]{cursor:pointer}button{color:inherit}button:disabled{opacity:.38;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--mint);outline-offset:3px}button{transition:background .15s,transform .15s}button:active:not(:disabled){transform:translateY(1px)}a{color:var(--mint)}.topbar{height:82px;padding:0 40px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:700;color:var(--text)}.brand-icon{background:var(--mint);width:34px;height:34px;display:inline-grid;place-items:center;border-radius:8px;color:#18271b;font-size:24px;font-weight:700;box-shadow:inset 0 -3px 0 #91c563}.brand-tag{font-family:'DM Sans',sans-serif;font-size:9px;color:var(--muted);letter-spacing:1.6px;margin-left:4px}.top-caption{margin-left:auto;font-size:12px;color:var(--muted);padding-right:24px;border-right:1px solid var(--line)}.ghost,.text-button,.icon-btn,.tool{border:0;background:transparent}.ghost{padding:10px 12px;font-size:12px;color:#cad1dd}.ghost span{margin-left:14px}.ghost:hover,.icon-btn:hover,.tool:hover{background:#252e3b}.primary,.secondary{border:1px solid transparent;border-radius:7px;font-size:13px;font-weight:700;padding:13px 18px;display:inline-flex;justify-content:center;align-items:center;gap:10px}.primary{background:var(--mint);color:#172517;box-shadow:inset 0 -2px 0 #98cc6a}.primary:hover{background:#ceff9f}.secondary{background:#252e3c;border-color:#374253;color:#e8edf4}.secondary:hover{background:#303b4b}.full{width:100%}.full span{margin-left:auto;font-weight:400;opacity:.65;font-size:11px}main{max-width:1680px;margin:auto;padding:35px 38px 20px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.eyebrow{font-size:10px;letter-spacing:1.9px;color:var(--mint);font-weight:700;margin:0 0 11px;display:flex;align-items:center;gap:8px}.live-dot{height:6px;width:6px;background:var(--mint);border-radius:50%;display:inline-block;box-shadow:0 0 0 4px #b9f8810c}.intro h1{font-family:'Space Grotesk',sans-serif;letter-spacing:-1.5px;font-size:36px;margin:0 0 9px;font-weight:600}.intro h1 span{color:#9ba6b7}.subtitle{margin:0;font-size:13px;color:#929caf}.workspace{display:grid;grid-template-columns:268px minmax(0,1fr);gap:22px;align-items:start}.sidebar{display:flex;flex-direction:column;gap:15px}.panel{background:linear-gradient(130deg,#171e2a,#131a24);border:1px solid var(--line);border-radius:11px}.sidebar .panel{padding:18px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.section-heading h2{margin:0;font-size:10px;color:#69768a;font-weight:500;letter-spacing:.5px;display:flex;align-items:center;gap:9px}.section-heading h2 span{font-size:12px;font-weight:650;color:#e6eaf1;letter-spacing:0}.tiny-badge{font-size:8px;letter-spacing:1.3px;border:1px solid #344332;background:#20302266;padding:3px 5px;color:#a6c598;border-radius:3px}.dropzone{width:100%;min-height:146px;border:1px dashed #3c4a58;border-radius:7px;background:#111922;color:var(--text);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px}.dropzone:hover,.dropzone.dragging{border-color:var(--mint);background:#1c2a24}.upload-icon{color:var(--mint);font-size:29px;line-height:1;margin-bottom:4px}.dropzone strong{font-size:12px;font-weight:600}.dropzone>span:not(.upload-icon){font-size:9px;color:var(--muted)}.dropzone .browse{color:var(--mint)!important;margin-top:2px}.source-info{display:flex;gap:9px;align-items:center;border:1px solid #2d3847;padding:10px 9px;border-radius:7px;margin-top:12px;background:#111824;min-width:0}.source-info>div{min-width:0;flex:1}.source-info strong{font-size:11px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.source-info span:not(.file-note){font-size:9px;color:#8291a4;display:block;margin-top:3px}.file-note{font-size:20px;color:var(--mint)}.source-info .icon-btn{min-width:23px;width:23px;font-size:20px;padding:0}.text-button{padding:0;color:#9aa7bb;font-size:11px;text-align:left}.text-button:hover{color:var(--mint)}.import-panel>.text-button{margin-top:14px;width:100%;display:flex;justify-content:space-between}.local-note{text-align:center;color:#7e8d9f;font-size:9px;margin:15px 0 0}.presets{display:flex;gap:3px;background:#0c131e;padding:4px;border:1px solid #293444;border-radius:7px;margin-bottom:20px}.presets button{border:0;background:transparent;color:#8996ab;font-size:11px;flex:1;border-radius:4px;padding:7px 0}.presets button.active{background:#344234;color:var(--mint);box-shadow:0 0 0 1px #526d42 inset}.control-label{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;margin:15px 0 10px;color:#c4cddb}.control-label output{color:var(--mint);font-size:10px;font-variant-numeric:tabular-nums}input[type=range]{accent-color:var(--mint);width:100%;height:3px;margin:0}.range-captions{display:flex;justify-content:space-between;font-size:8px;color:#6f7e93;margin:9px 0 18px}select{width:100%;border:1px solid #344052;background:#111925;color:#ced7e5;border-radius:5px;padding:9px 8px;font-size:11px}.hint{font-size:9px;line-height:1.55;color:#79879b;margin:8px 0 4px}.two-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px}.checkbox{display:flex;align-items:center;gap:7px;font-size:10px;color:#a4afc0;cursor:pointer}.checkbox input,.instrument-toggles input{accent-color:var(--mint);margin:0}.sidebar .checkbox{margin-top:17px}.instrument-toggles{display:flex;gap:10px;margin:16px 0}.instrument-toggles label{display:flex;align-items:center;gap:4px;font-size:9px;color:#b3bdca}.instrument-toggles img{width:17px;height:17px;image-rendering:pixelated;border-radius:2px}.instrument-toggles input{width:11px;height:11px}.export-panel{padding:18px 18px 15px;background:#121b1a;border:1px solid #2b3c31;border-radius:11px}.export-panel .secondary{margin-top:8px;background:transparent;border-color:#35443b}.export-panel>p{margin:13px 0 0;font-size:9px;color:#7e9185;text-align:center}.export-panel>p strong{color:#adc7ad;font-weight:400}.editor{overflow:hidden;min-width:0}.editor-heading{display:flex;justify-content:space-between;align-items:center;padding:24px 23px 22px}.editor-eyebrow{font-size:9px;font-weight:650;letter-spacing:1.5px;color:#7a8ba3;display:flex;align-items:center;gap:10px}.editor-eyebrow span{font-size:8px;letter-spacing:1px;padding:3px 5px;background:#2b3144;border:1px solid #444d63;border-radius:3px;color:#c0c9df}.editor-heading h2{font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:500;letter-spacing:-.6px;margin:7px 0 0;max-width:500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ready-badge{border:1px solid #364c34;background:#24342675;display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:5px;color:#b9d6b0;font-size:10px}.ready-badge .live-dot{width:4px;height:4px}.transport{padding:12px 23px;display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#111823}.transport-group{display:flex;align-items:center;gap:11px}.icon-btn{height:28px;min-width:28px;display:inline-grid;place-items:center;border-radius:4px;color:#a2aec1;font-size:18px;padding:3px}.play-btn{height:34px;width:38px;background:var(--mint);color:#1e2f18;border:0;border-radius:5px;font-size:14px}.play-btn:hover{background:#ceffa3}.timecode{display:flex;gap:8px;color:#67788e;font-size:11px;font-variant-numeric:tabular-nums;margin-left:5px;white-space:nowrap}.timecode strong{color:#d6dfed;font-weight:500}.tempo-group{margin-left:auto;gap:8px}.tempo-group label{font-size:9px;letter-spacing:.8px;color:#8492a7}.tempo-group input[type=number]{width:49px;border:1px solid #344051;background:#1b2432;border-radius:4px;padding:6px 4px;text-align:center;font-size:11px;color:#e2e8f2;-moz-appearance:textfield}.tempo-group input[type=number]::-webkit-inner-spin-button{display:none}.tempo-group input[type=range]{width:55px}.transport-divider{height:17px;width:1px;background:#334052;display:inline-block;margin:0 4px}.compact{font-size:10px;padding:7px;border:1px solid #303c50;border-radius:4px;white-space:nowrap}.edit-tools{display:flex;align-items:center;gap:14px;padding:11px 15px;background:#182130}.tool-group{display:flex;align-items:center;gap:4px}.tool{border-radius:4px;padding:6px 8px;font-size:14px;color:#8f9db1;display:flex;align-items:center;gap:6px}.tool span{font-size:10px}.tool.active{background:#364632;color:var(--mint);box-shadow:inset 0 0 0 1px #53634a}.palette{display:flex;gap:5px;margin-left:auto}.palette select{font-size:10px;padding:6px;width:92px;background:#131c29}.zoom-group{display:flex;gap:2px;align-items:center;font-size:9px;color:#98a6bb;white-space:nowrap}.zoom-group .icon-btn{font-size:14px;width:23px;min-width:23px;height:23px}.grid-wrap{position:relative;background:#0b1019;overflow:hidden;padding:0 12px}.grid-wrap canvas{display:block;width:100%;touch-action:pan-y;outline-offset:-2px}.grid-scroll{height:14px;overflow-x:scroll;overflow-y:hidden;margin:0 12px;background:#0e1520;scrollbar-color:#526148 #1a2430;scrollbar-width:thin}.grid-scroll>div{height:1px}.grid-caption{padding:10px 18px;display:flex;justify-content:space-between;font-size:9px;color:#6f7e95;gap:12px}.key-cap{display:inline-block;padding:0 3px;border:1px solid #394759;border-radius:3px;color:#a3adc0}.overview-section{margin:11px 20px 0}.overview-label{display:flex;justify-content:space-between;align-items:center;color:#687b93;font-size:8px;letter-spacing:1px;margin-bottom:10px}.overview-label .checkbox{letter-spacing:0;font-size:9px}.overview-section canvas{width:100%;height:50px;background:#0e1621;border:1px solid #2a3646;border-radius:5px;display:block;cursor:crosshair}.overview-times{display:flex;justify-content:space-between;font-size:8px;color:#63758d;margin:7px 0 15px}.editor-footer{border-top:1px solid #293545;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:9px;color:#8190a5}.editor-footer strong{color:#c2ccda;font-weight:500;margin-right:3px}.stat-dot{height:5px;width:5px;display:inline-block;border-radius:50%;margin-right:5px;margin-left:10px}.stat-dot:first-child{margin-left:0}.piano-dot{background:#e2e7ee}.bass-dot{background:#91cf79}.snare-dot{background:#e5b76a}.paging{display:flex;align-items:center;gap:4px;white-space:nowrap;font-variant-numeric:tabular-nums}.paging .icon-btn{height:24px;width:22px;min-width:22px}.arrangement-info{border-top:1px solid #2b3b30;background:#1d2c2355;padding:12px 20px;display:flex;align-items:center;gap:10px;color:#b3d0a9;font-size:10px}.arrangement-info>span{font-size:16px;color:var(--mint)}.arrangement-info p{margin:0;line-height:1.5}.empty-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#101724e8;gap:10px}.empty-overlay span{color:var(--muted);font-size:12px}footer{padding-top:22px;display:flex;justify-content:space-between;color:#53637a;font-size:10px}footer .text-button{font-size:10px;color:#6e8098}dialog{background:#18212d;border:1px solid #3c4a5a;border-radius:14px;max-width:580px;width:calc(100% - 32px);padding:32px;color:#c3ccda;line-height:1.7;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#050912bd;backdrop-filter:blur(5px)}dialog h2{font-family:'Space Grotesk',sans-serif;font-size:27px;letter-spacing:-.8px;color:#edf4ee;margin:8px 0 20px}dialog ol{padding-left:21px}dialog li{margin:13px 0;font-size:13px}dialog p{font-size:13px}.dialog-close{position:absolute;right:15px;top:12px;font-size:16px}.dialog-note{font-size:10px;border-top:1px solid #354153;padding-top:16px;color:#899ab0}.progress-overlay{position:fixed;inset:0;background:#070c15cf;backdrop-filter:blur(7px);z-index:100;display:grid;place-items:center}.progress-card{width:min(430px,calc(100% - 32px));background:#192330;border:1px solid #3a4859;border-radius:15px;padding:32px;box-shadow:0 30px 80px #0006}.progress-card>.brand-icon{margin-bottom:25px}.progress-card h2{font-family:'Space Grotesk',sans-serif;font-size:24px;letter-spacing:-.7px;margin:15px 0 25px}.progress-track{height:5px;background:#303b48;border-radius:4px;overflow:hidden}.progress-track div{height:100%;width:0;background:var(--mint);transition:width .15s}.progress-bottom{display:flex;justify-content:space-between;margin-top:12px;color:var(--mint);font-size:11px}.progress-card>p:last-child{font-size:11px;color:#8496ad;line-height:1.7;margin:24px 0 0}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,10px);background:#d2f7b4;color:#1b2d18;box-shadow:0 6px 30px #0008;border-radius:7px;padding:13px 20px;z-index:200;font-size:12px;max-width:calc(100vw - 40px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}.small{font-size:9px}body.file-drag::after{content:'Drop your audio to start transcribing';position:fixed;inset:10px;border:2px dashed var(--mint);border-radius:12px;background:#101e16ed;color:var(--mint);display:grid;place-items:center;font-size:22px;z-index:99;pointer-events:none}@media(min-width:1500px){.workspace{grid-template-columns:290px minmax(0,1fr)}.sidebar .panel{padding:20px}.intro h1{font-size:41px}.topbar{padding:0 max(40px,calc((100vw - 1600px)/2))}}@media(max-width:1100px){main{padding:26px 20px}.topbar{padding:0 22px}.workspace{grid-template-columns:235px minmax(0,1fr);gap:15px}.sidebar .panel{padding:14px}.transport{padding:12px;gap:10px}.transport-group{gap:6px}.tempo-group{gap:5px}.timecode{gap:5px}.palette select{width:76px}.edit-tools{gap:4px;padding:10px}.top-caption{display:none}.ghost#helpBtn{margin-left:auto}.compareBtn{display:none}.grid-caption>span:last-child{display:none}.intro h1{font-size:31px}.editor-footer{flex-wrap:wrap}.instrument-toggles{gap:5px}.transport-divider{margin:0 2px}}@media(max-width:820px){.intro{align-items:flex-start;gap:18px;margin-bottom:22px}.intro h1{font-size:28px}.intro h1 span{display:block}.intro>.primary{white-space:nowrap;margin-top:22px;padding:11px 13px}.workspace{display:flex;flex-direction:column}.editor{width:100%;order:0}.sidebar{width:100%;display:grid;grid-template-columns:1fr 1fr;order:1;gap:14px}.export-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}.export-panel .section-heading{grid-column:1/-1;margin-bottom:0}.export-panel .secondary{margin:0}.export-panel>p{grid-column:1/-1;margin:0}.editor-heading{padding:20px 17px}.editor-heading h2{max-width:300px}.transport{gap:10px}.tempo-group{margin-left:auto}.transport #compareBtn{font-size:9px}.edit-tools{padding:10px 12px}.palette{margin-left:auto}.zoom-group{margin-left:8px}.grid-caption{font-size:8px}footer{padding-bottom:10px}.subtitle{font-size:11px}.topbar{height:65px}.brand{font-size:21px}}@media(max-width:520px){main{padding:24px 12px}.topbar{padding:0 14px}.brand-tag{display:none}.topbar .ghost{font-size:11px}.intro{gap:8px}.intro h1{font-size:25px;letter-spacing:-1px}.intro>.primary{font-size:10px;padding:10px}.eyebrow{font-size:8px;letter-spacing:1.3px}.sidebar{grid-template-columns:1fr}.export-panel{grid-template-columns:1fr}.export-panel .section-heading,.export-panel>p{grid-column:auto}.editor-heading{padding:16px 12px}.editor-heading h2{font-size:20px;max-width:220px}.ready-badge{font-size:8px;padding:6px}.transport{padding:10px;flex-wrap:wrap}.tempo-group{gap:6px}.transport #compareBtn{margin-left:auto}.tempo-group input[type=range]{width:35px}.timecode{font-size:10px}.transport-group{gap:3px}.edit-tools{gap:5px;padding:8px}.tool{padding:6px;font-size:13px}.tool span{display:none}.palette select{width:70px;font-size:9px}.tool-group .transport-divider{display:none}.zoom-group{margin-left:0}.zoom-group .icon-btn{width:18px;min-width:18px}.grid-wrap{padding:0 5px}.grid-scroll{margin:0 5px}.editor-footer{padding:8px 10px;font-size:8px}.stat-dot{margin-left:6px}.overview-section{margin:10px 12px 0}.arrangement-info{padding:10px 12px;font-size:9px}.source-info strong{max-width:220px}.sidebar .panel{padding:18px}.instrument-toggles{gap:17px}.source-info .icon-btn{margin-left:auto}.dialog-note{font-size:9px}dialog{padding:26px}.paging{margin-left:auto}}