@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../media/af21ab248943f479-s.0z23a3hpu8ttr.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../media/4ae66b896b591e96-s.02aqyp7acl16b.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../media/21ca8f3f56c22ca2-s.p.14a9xpaqsbppk.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Archivo Fallback;src:local(Arial);ascent-override:88.96%;descent-override:21.28%;line-gap-override:0.0%;size-adjust:98.7%}.b8sx-q_className{font-family:Archivo,Archivo Fallback;font-style:normal}.b8sx-q_variable{--font-archivo:"Archivo", "Archivo Fallback"}
*,:before,:after{box-sizing:border-box;border:0 solid;margin:0;padding:0}h1,h2{font-size:inherit;font-weight:inherit}button,input,select{font:inherit;color:inherit;background:0 0}svg,canvas{vertical-align:middle;display:block}:root{--ground:#0d0d0d;--panel:#161616;--line:#262626;--text:#f2f1ec;--muted:#9a9a94;--ink:#0d0d0d;--rec:#ff4a3d;--head:232px;--ease:cubic-bezier(.16, 1, .3, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html,body{background:var(--ground);height:100%;color:var(--text);font-family:var(--font-archivo), system-ui, sans-serif;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;caret-color:#f26b1d;scrollbar-color:#333 transparent}::selection{color:var(--ink);background:#f26b1d}:focus-visible{outline:2px solid var(--text);outline-offset:2px}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}.studio{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.wordmark,.head-name,.big-name,.clip-label,.empty,.rec,.gen-title,.prompt p,.ruler-corner{text-transform:uppercase;font-stretch:62%}.transport{background:var(--panel);border-bottom:1px solid var(--line);flex:none;align-items:center;gap:8px 16px;min-height:56px;padding:8px 16px 8px 0;display:flex}.wordmark{width:var(--head);letter-spacing:.01em;white-space:nowrap;flex:none;padding-left:16px;font-size:26px;font-weight:900;line-height:1}.wordmark span{background:var(--text);color:var(--ink);margin-right:3px;padding:0 5px 0 6px}.transport-group{flex:none;align-items:center;gap:6px;display:flex}.t-btn{width:36px;height:36px;color:var(--text);background:#222;place-items:center;display:grid}.t-btn:hover:not(:disabled){background:#2e2e2e}.t-btn.play{background:var(--text);color:var(--ink)}.position{border:1px solid var(--line);background:var(--ground);text-align:center;white-space:nowrap;min-width:72px;margin-left:6px;padding:7px 10px;font-size:15px;font-weight:600}.transport-fields{flex:none;align-items:center;gap:16px;min-width:0;display:flex}.field{flex:none;align-items:center;gap:8px;min-width:0;display:flex}.harmony-field{max-width:100%}.harmony-value{white-space:normal;min-width:0;margin-left:0}.field span{white-space:nowrap;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:600}.field input,.field select{background:var(--ground);border:1px solid var(--line);height:34px;color:var(--text);padding:0 8px;font-size:15px;font-weight:600}.field select{text-overflow:ellipsis;min-width:0}.field input{width:64px}.file-group{flex:none;align-items:center;gap:6px;margin-left:auto;display:flex}.export{white-space:nowrap;border:1px solid #3a3a3a;flex:none;align-items:center;gap:8px;height:36px;padding:0 14px;font-size:14px;font-weight:600;display:inline-flex}.export:hover:not(:disabled){border-color:var(--text)}.ruler-row{grid-template-columns:var(--head) 1fr;background:var(--panel);border-bottom:1px solid var(--line);flex:none;height:28px;display:grid}.ruler-corner{white-space:nowrap;border-right:1px solid var(--line);color:var(--muted);padding-left:16px;font-size:14px;font-weight:800;line-height:27px;overflow:hidden}.ruler{position:relative}.ruler span{color:var(--muted);border-left:1px solid #3a3a3a;padding-left:6px;font-size:12px;font-weight:600;line-height:27px;position:absolute;top:0;bottom:0}.t-btn.learn{letter-spacing:.06em;text-transform:uppercase;width:auto;padding:0 10px;font-size:12px;font-weight:700}.note-label{white-space:nowrap;color:var(--flood);padding-left:3px;font-size:10px;font-weight:700;line-height:1;display:block;position:relative;top:50%;overflow:hidden;transform:translateY(-50%)}.rows{min-height:0;transition:grid-template-rows .52s var(--ease);flex:1;align-content:start;display:grid;position:relative;overflow:hidden}.row{--bar:#2a2a2a;--beat:#1a1a1a;grid-template-columns:var(--head) 1fr;border-bottom:1px solid var(--line);min-height:0;display:grid;overflow:hidden}.row .lane{transition:opacity .32s}.head{background:var(--flood);min-width:0;color:var(--ink);border-right:1px solid #0000004d;align-items:center;gap:10px;padding:0 12px 0 16px;display:flex}.head :focus-visible{outline-color:var(--ink)}.head-name{white-space:nowrap;letter-spacing:.01em;text-align:left;min-width:0;padding:6px 0;font-size:24px;font-weight:900;line-height:1;overflow:hidden}.head-name:hover:not(:disabled){text-underline-offset:4px;text-decoration:underline;text-decoration-thickness:3px}.head-name:disabled,.lane:disabled{opacity:1;cursor:default}.ms{gap:4px;margin-left:auto;display:flex}.ms button{border:1.5px solid var(--ink);width:24px;height:24px;color:var(--ink);font-size:11px;font-weight:800;position:relative}.ms button[aria-pressed=true]{background:var(--ink);color:var(--flood)}.ms button:after{content:attr(aria-label);z-index:2;background:var(--ink);color:var(--flood);white-space:nowrap;pointer-events:none;opacity:0;padding:4px 6px;font-size:11px;font-weight:600;position:absolute;top:50%;right:calc(100% + 4px);transform:translateY(-50%)}.ms button:hover:after,.ms button:focus-visible:after{opacity:1}.lane{text-align:left;background-color:var(--ground);background-image:repeating-linear-gradient(90deg, var(--bar) 0 1px, transparent 1px 12.5%), repeating-linear-gradient(90deg, var(--beat) 0 1px, transparent 1px 3.125%);width:100%;height:100%;padding:0;display:block;position:relative}button.lane:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--flood)}button.lane:hover:not(:disabled) .empty{text-underline-offset:5px;text-decoration:underline;text-decoration-thickness:3px}button.lane:focus-visible{outline-offset:-2px}.clip{background:var(--flood);position:absolute;top:6px;bottom:6px;overflow:hidden}.clip-label{white-space:nowrap;letter-spacing:.02em;color:var(--ink);font-size:14px;font-weight:800;line-height:1;position:absolute;top:5px;left:8px;right:8px;overflow:hidden}.clip.sample{box-shadow:inset 0 0 0 1.5px var(--flood);background:0 0}.clip.sample .clip-label{color:var(--flood)}.clip.sample .note{background:var(--flood);box-shadow:inset -1px 0 0 var(--ground)}.clip-notes{position:absolute;top:24px;bottom:5px}.note{background:var(--ink);min-width:2px;min-height:5px;box-shadow:inset -1px 0 0 var(--flood);position:absolute}.empty{letter-spacing:.01em;color:var(--flood);font-size:26px;font-weight:900;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.row.collapsed .lane{opacity:.45}.row.collapsed:hover .lane{opacity:.8}.row.collapsed .head-name{font-size:16px}.row.collapsed .clip{top:4px;bottom:4px}.row.collapsed .clip-notes{top:3px;bottom:3px}.row.zoomed{--bar:#0000004d;--beat:#0000001a;color:var(--ink);z-index:1;position:relative;box-shadow:0 18px 40px #00000073}.row.zoomed :focus-visible{outline-color:var(--ink)}.row.zoomed .head{background:var(--flood);border-right:1px solid #0000004d;flex-direction:column;align-items:stretch;gap:0;padding:14px 16px 16px;overflow-y:auto}.row.zoomed .head>*{flex-shrink:0}.back{align-self:flex-start;align-items:center;gap:6px;padding:4px 0;font-size:13px;font-weight:700;display:inline-flex}.back:hover:not(:disabled){text-underline-offset:3px;text-decoration:underline}.row.zoomed .head{container-type:inline-size}.big-name{letter-spacing:-.005em;margin:18px 0 0;font-size:min(84px,20cqw);font-weight:900;line-height:1}.hint{max-width:22ch;margin:12px 0 0;font-size:14px;font-weight:500;line-height:1.35}.sound-field{min-width:0;margin-top:14px}.sound-field label{letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;font-size:11px;font-weight:700;display:block}.sound-field select{border:1.5px solid var(--ink);background:var(--flood);width:100%;min-width:0;height:34px;color:var(--ink);font:inherit;border-radius:0;padding:0 6px;font-size:12px;font-weight:600}.note-settings{grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;display:grid}.note-settings label{letter-spacing:.02em;min-width:0;margin:0}.note-settings label span{margin-bottom:4px;display:block}.settings-feedback{min-height:3.6em;margin:6px 0 0;font-size:11px;line-height:1.2}@container (max-width:130px){.note-settings{grid-template-columns:1fr;gap:6px}.settings-feedback{min-height:6em}}.notes-area.copying{cursor:crosshair;overflow:hidden}.copy-rect{z-index:3;border:2px solid var(--ink);pointer-events:none;background:#f2f1ec33;position:absolute}.copy-group{cursor:grab;pointer-events:auto}.note.copy-selected{outline:2px solid var(--text);outline-offset:-2px;opacity:1}.notes-area.editable.on .note.copy-selected{cursor:grab}.note.copy-ghost{z-index:4;opacity:.45;outline:2px dashed var(--ink);outline-offset:-2px;pointer-events:none}.copy-feedback{z-index:5;background:var(--flood);pointer-events:none;width:fit-content;max-width:calc(100% - 16px);margin:0;font-size:12px;line-height:1.25;position:absolute;bottom:6px;left:8px;right:8px}.copy-feedback:empty{display:none}.sound-feedback{overflow-wrap:anywhere;margin:6px 0 0;font-size:12px;line-height:1.35}.sound-credits{color:inherit;margin-top:6px;font-size:11px;text-decoration:underline;display:inline-block}.sound-feedback p{margin:0}.sound-retry{margin-top:6px;font-weight:700;text-decoration:underline}.sound-notice{color:var(--text);background:var(--panel);margin:0;padding:6px 16px;font-size:12px;line-height:1.35}.rec-controls{flex-direction:column;gap:8px;margin-top:auto;display:flex}.rec{background:var(--ink);height:46px;color:var(--text);letter-spacing:.03em;white-space:nowrap;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-size:20px;font-weight:800;display:inline-flex;overflow:hidden}.rec svg{color:var(--rec)}.rec.on{background:var(--text);color:var(--ink)}.rec.on svg{color:var(--ink)}.ghost-btn{border:1.5px solid var(--ink);height:34px;color:var(--ink);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding:0 14px;font-size:12px;font-weight:700;overflow:hidden}.ghost-btn:hover:not(:disabled){background:var(--ink);color:var(--flood)}.part-actions{gap:8px;display:flex}.part-actions .ghost-btn{flex:1;min-width:0;height:30px;padding:0 6px;font-size:11px}.status{align-items:center;gap:8px;margin:4px 0 0;font-size:13px;font-weight:700;display:flex}.mark{border:2px solid var(--ink);flex:none;width:10px;height:10px}.mark.live{background:var(--ink);animation:1s steps(2,jump-none) infinite pulse}.lane.flood{background-color:var(--flood);container-type:inline-size}.lane.flood>.pitch-labels,.lane.flood>.notes-area,.lane.flood>.spec-wrap{position:absolute;inset:14px 0}.pitch-labels{--row:calc(100% / var(--rows));pointer-events:none;background:repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 1px), #00000014 calc(var(--row) - 1px) var(--row))}.pitch-labels span{color:var(--ink);border-bottom:1px solid #00000029;align-items:center;padding-left:8px;font-size:11px;font-weight:700;display:flex;position:absolute;left:0;right:0}.pitch-labels span.selected{background:#00000014}.pitch-labels span.selected b{text-underline-offset:3px;text-decoration:underline}.pitch-labels b{z-index:1;background:var(--flood);white-space:nowrap;padding:1px 3px;line-height:1;position:relative}.lane.labeled .pitch-labels b{z-index:auto}.lane.flood .note{box-shadow:inset -1px 0 0 var(--flood)}.note.set{animation:set-in .38s var(--ease) var(--d) both}.spec-wrap{transition:opacity .7s}.spec-wrap.dim{opacity:.35}.spec-wrap.ghost{opacity:.16}.spectrogram{width:100%;height:100%;display:block}.generating{pointer-events:none;z-index:2;flex-direction:column;justify-content:flex-end;padding:0 12px 28px 6%;display:flex;position:absolute;inset:0;overflow:hidden}.gen-title{text-transform:uppercase;margin:0;font-size:clamp(28px,8cqw,6rem);font-weight:900;font-stretch:62%;line-height:.82}.gen-stage{margin:14px 0 0;font-size:clamp(13px,2.4cqw,17px);font-weight:600}.sweep{background:var(--ink);width:2px;animation:1.6s linear forwards sweep,.3s 1.6s forwards fade;position:absolute;top:0;bottom:0}.prompt{text-align:center;pointer-events:none;z-index:2;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:0 12px;display:flex;position:absolute;inset:0}.prompt p{text-wrap:balance;margin:0;font-size:clamp(24px,9cqw,96px);font-weight:900;line-height:.85}.prompt>span{font-size:14px;font-weight:500}.prompt.error{pointer-events:auto}.prompt.error p{max-width:20ch;font-size:clamp(20px,5cqw,44px);line-height:.95}.prompt-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:10px;display:flex}.playhead-track{top:0;bottom:0;left:var(--head);pointer-events:none;z-index:2;position:absolute;right:0}.playhead{background:var(--text);width:2px;margin-left:-1px;position:absolute;top:0;bottom:0;left:0;box-shadow:0 0 0 1px #0006}.lane-chords{pointer-events:none;height:14px;color:var(--ink);margin:0;padding:0;list-style:none;position:absolute;inset:0 0 auto}.lane-chords li{white-space:nowrap;max-width:12.5%;height:14px;padding:0 5px;font-size:10px;font-weight:600;line-height:14px;position:absolute;top:0;overflow:hidden}.lane-chords b{font-size:11px;font-weight:800}.lane-chords li.now{background:var(--ink);color:var(--flood)}.lane-chords.stamp li{animation:stamp .26s var(--ease) var(--d) both}.theory{gap:4px;margin:12px 0 0;display:grid}.theory div{flex-wrap:wrap;align-items:baseline;column-gap:8px;display:flex}.theory dt{letter-spacing:.08em;text-transform:uppercase;min-width:34px;font-size:11px;font-weight:700}.theory dd{margin:0;font-size:14px;font-weight:800}.live-pitch{z-index:2;color:var(--ink);pointer-events:none;justify-items:end;gap:2px;display:grid;position:absolute;top:22px;right:16px}.live-pitch b{font-size:40px;font-weight:900;line-height:.9}.live-pitch>span{font-size:12px;font-weight:700}.tune{border-bottom:1.5px solid var(--ink);background:linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat;width:120px;height:10px;margin-top:4px;position:relative}.needle{background:var(--ink);width:4px;margin-left:-2px;transition:left 80ms linear;position:absolute;top:0;bottom:0}.help{background:var(--panel);width:min(440px,100vw - 32px);max-height:calc(100dvh - 32px);color:var(--text);border:1px solid var(--line);margin:auto;padding:20px;overflow-y:auto}.help::backdrop{background:#0009}.help h2{text-transform:uppercase;margin-bottom:14px;font-size:28px;font-weight:900;font-stretch:62%;line-height:1}.help dl{gap:6px;display:grid}.help dl div{justify-content:space-between;gap:16px;font-size:14px;display:flex}.help dd{color:var(--muted);text-align:right}.help kbd{font:inherit;white-space:nowrap;font-weight:700}.help p{color:var(--muted);margin:14px 0;font-size:13px;line-height:1.4}.help .ghost-btn{border-color:var(--text);color:var(--text)}.help .ghost-btn:hover{background:var(--text);color:var(--ink)}.theory .ghost-btn{width:100%;min-width:0;padding:0 8px}.theory-dialog[open]{flex-direction:column;display:flex;overflow:hidden}.theory-dialog .theory-key{color:var(--text);flex:none;margin:-6px 0 14px;font-size:13px;font-weight:800}.theory-dialog .theory-output{overscroll-behavior:contain;scrollbar-gutter:stable;border:1px solid var(--line);background:var(--ground);flex:auto;min-height:140px;max-height:min(58vh,460px);padding:12px 14px;overflow-y:auto}.theory-dialog .theory-output:focus-visible{outline-offset:0}.theory-dialog .theory-status{color:var(--muted);margin:0;font-size:14px;line-height:1.45}.theory-dialog .theory-status p{margin:0 0 10px}.theory-dialog .theory-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-size:14px;line-height:1.55}.theory-dialog .theory-caveat{border-top:1px solid var(--line);color:var(--muted);flex:none;margin:14px 0;padding-top:12px;font-size:11px;line-height:1.4}.theory-dialog>.ghost-btn{flex:none}.notes-area.editable.on{cursor:crosshair;touch-action:none}.notes-area.editable.on .note{cursor:grab}.note.background{opacity:.65}.notes-area.editable.on .note.background{cursor:default}.notes-area.editable .note.dragging{cursor:grabbing;opacity:.7}.note-edge{cursor:ew-resize;width:min(10px,25%);position:absolute;top:0;bottom:0;right:0}.note-edge.start{left:0;right:auto}.notes-area.editable.on .note:hover .note-edge,.notes-area.editable .note.dragging .note-edge{background:color-mix(in srgb, var(--flood) 45%, transparent)}.lane.flood .note:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.note.raw{opacity:.6}.note.snap{transition:left .7s var(--ease), top .7s var(--ease), width .7s var(--ease), opacity .4s ease}.note.snap.gone{animation:.4s forwards fade}.generating .gen-title{transform-origin:0 100%;animation:stamp .26s var(--ease) both}@keyframes stamp{0%{opacity:0;transform:scale(1.15)}}@keyframes set-in{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes sweep{0%{left:0}to{left:var(--end,100%)}}@keyframes fade{to{opacity:0}}@keyframes pulse{50%{opacity:.2}}@media (max-width:1680px){.harmony-value{display:none}}@media (max-width:1540px){.field{flex-direction:column;align-items:stretch;gap:3px}.field span{font-size:10px;line-height:1}.field input,.field select{height:30px}}@media (max-width:1280px){.export .lbl{display:none}.export{padding:0 10px}}@media (max-width:1180px){.wordmark{width:auto}.transport-group .position{display:none}.transport{gap:8px 10px}.transport-fields{gap:10px}.wordmark{font-size:20px}}@media (max-width:1060px){.transport{flex-wrap:wrap;padding:8px 12px}.wordmark{padding-left:0}.transport-fields{order:2}.file-group{order:3}}@media (max-width:480px){.file-group{order:1;gap:4px}.file-group .t-btn{width:32px}.file-group .t-btn[aria-label=Keyboard\ shortcuts]{display:none}.transport-group{flex:100%;order:2}.transport-fields{flex:100%;order:3}.transport-fields .field:not(:first-child){flex:auto}.t-btn.learn{padding:0 8px}.transport-fields{gap:6px}.field input,.field select{padding:0 4px;font-size:14px}.field input{width:52px}}@container (max-width:560px){.lane-chords li span{display:none}.live-pitch b{font-size:28px}.tune{width:80px}}@media (max-width:720px){:root{--head:104px}.wordmark{font-size:18px}.ms{display:none}.theory div{display:grid}.head{gap:6px;padding:0 8px 0 10px}.head-name{font-size:18px}.row.zoomed .head{padding:10px}.big-name{margin-top:10px}.hint{display:none}.rec{gap:4px;height:40px;padding:0 4px;font-size:13px}.rec svg{flex:none;width:12px;height:12px}.rec-controls .rec-label{white-space:normal;min-width:0;line-height:1.1}.part-actions{flex-direction:column}.part-actions .ghost-btn{flex:none}.ghost-btn{padding:0 6px;font-size:10px}.ruler-corner{padding-left:10px;font-size:12px}.ruler span{padding-left:3px;font-size:10px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}.sweep,.needle{display:none}}