:root{font-family:Consolas,Liberation Mono,Menlo,monospace;color:#101010;background:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-size:16px;font-weight:400;color-scheme:light}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.42}button,input,textarea{border-radius:1px}button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #111;outline-offset:4px}button:hover:not(:disabled){background:#eee}button,input,textarea{-webkit-tap-highlight-color:transparent}input,textarea{background:#fff;border:1px solid #555}input::placeholder,textarea::placeholder{color:#a2a2a2}button{background:#fff}svg{display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sheet{border:2px solid #151515;margin:10px;min-height:calc(100svh - 20px);display:flex;flex-direction:column;max-width:1800px}.sheet-header{display:grid;grid-template-columns:minmax(325px,1fr) auto;grid-template-areas:"brand transport" "metadata status";gap:18px 24px;padding:18px 26px 27px}.brand{grid-area:brand}.brand h1{font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:clamp(54px,5.3vw,80px);letter-spacing:-5px;line-height:1;margin:0 0 6px;transform:scaleX(1.04);transform-origin:left}.brand p{font-size:14px;letter-spacing:4.2px;margin:0;white-space:nowrap}.transport{grid-area:transport;display:flex;align-items:flex-start;gap:12px;padding-top:3px}.sheet-button{height:58px;border:1.5px solid #111;display:inline-flex;align-items:center;justify-content:center;gap:15px;padding:0 20px;white-space:nowrap;font-size:16px;font-weight:500}.icon{height:23px;width:23px;flex-shrink:0}.transport-button{min-width:119px}.transport-button.playing{background:#e5e5e5;opacity:1}.save-button{background:#202020;color:#fff;min-width:143px;margin-left:15px}.save-button:hover:not(:disabled){background:#393939}.copy-button{min-width:174px}.bpm-control{display:flex;align-items:center;gap:12px;height:58px;margin-left:6px}.bpm-control input{width:88px;height:58px;padding:8px 11px;font-size:22px;border:1.5px solid #111}.metadata{grid-area:metadata;display:grid;grid-template-columns:1.15fr 1fr;gap:25px;width:100%;max-width:900px}.metadata label{display:flex;flex-wrap:wrap;align-content:start;column-gap:7px;font-size:16px}.optional{font-size:14px;font-weight:400;color:#444}.metadata input{display:block;width:100%;height:45px;padding:8px 14px;margin-top:4px;font-size:21px}.save-status{grid-area:status;display:flex;align-items:flex-start;justify-content:flex-end;gap:10px 20px;flex-wrap:wrap;align-content:start;padding-top:2px;font-size:14px;max-width:560px;justify-self:end}.status{display:flex;align-items:center;gap:11px;min-height:33px;white-space:nowrap}.status i{width:11px;height:11px;border:1px solid #777;border-radius:50%;background:#fff}.status.is-saved{color:#126044}.status.is-saved i{background:#126044;border-color:#126044}.public-link{width:280px;max-width:100%;height:34px;border-color:#ddd;padding:5px 11px;font-size:13px;color:#555}.save-status small{width:100%;text-align:right;color:#555;font-size:12px}.message{margin:0 26px 18px;border:1px solid #111;padding:12px 15px;font-size:14px;line-height:1.5;background:#f4f4f4}.conflict-actions{display:flex;gap:24px;flex-wrap:wrap;margin-top:10px}.text-button{padding:4px 0;background:none;border:0;border-bottom:1px solid #222;font-size:12px}.editor{border:0;padding:0;margin:0;min-width:0;flex:1;display:flex;flex-direction:column}.sequencer-section{display:flex;gap:18px;padding:0 23px 38px;align-items:stretch}.grid-scroll{flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;padding:2px}.sequencer{border-collapse:collapse;table-layout:fixed;width:100%;min-width:1080px;border:2px solid #111}.parameter-column{width:108px}.sequencer th,.sequencer td{border:1px solid #151515;padding:0;height:68px;vertical-align:middle;text-align:center;font-weight:400}.sequencer thead th{height:51px;font-size:17px}.sequencer th:first-child{text-align:left;padding-left:13px;font-family:Arial,Helvetica,sans-serif;font-size:18px;font-weight:600}.sequencer thead th:first-child{font-size:17px;font-weight:500}.sequencer tbody th span{font-size:16px;line-height:1.7}.sequencer .note-row td{height:74px;font-size:22px}.sequencer .current{background:#e0e0e0}.drag-control{cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:44px}.drag-control:hover{background:#f1f1f1}.current .drag-control:hover{background:#d5d5d5}.drag-control:focus-visible{outline-offset:-5px}.octave-normal{font-size:29px;line-height:1}.octave-arrow{font-family:Arial,Helvetica,sans-serif;font-size:36px;line-height:1}.type-symbol{font-size:29px;line-height:1}.check-target{display:flex;align-items:center;justify-content:center;height:100%;width:100%;cursor:pointer;position:relative;min-height:44px}.check-target:hover{background:#eee}.check-target input{position:absolute;opacity:0;width:100%;height:100%;top:0;right:0;bottom:0;left:0;margin:0;cursor:pointer}.sheet-checkbox{width:22px;height:22px;border:1.4px solid #111;display:flex;align-items:center;justify-content:center;font-family:Arial,Helvetica,sans-serif;font-size:23px;line-height:1;font-weight:400;pointer-events:none}.check-target input:checked+.sheet-checkbox{background:#111;color:#fff;border:0;width:28px;height:29px}.check-target input:focus-visible+.sheet-checkbox{outline:2px solid #111;outline-offset:5px}.grid-legend{flex:0 0 82px;display:flex;flex-direction:column;justify-content:space-between;font-size:13px;line-height:1.45;padding:16px 0 27px}.symbol-legend{display:flex;flex-direction:column;gap:14px;white-space:nowrap}.symbol-legend b{font-size:22px;font-weight:400;vertical-align:middle}.gesture-legend p{margin:0 0 18px}.gesture-legend p:last-child{margin:0}.lower-sheet{border-top:2px solid #111;display:grid;grid-template-columns:minmax(0,1.95fr) minmax(310px,1fr);padding:22px 27px;gap:24px;flex:1;align-content:start;min-height:245px}.sound-controls{display:flex;min-width:0;align-self:start}.waveform{border-right:1px solid #999;padding-right:21px;flex:0 0 198px}.waveform h2{font-family:Arial,Helvetica,sans-serif;font-size:19px;font-weight:700;margin:0 0 32px;line-height:1.4}.wave-options{display:flex;gap:10px}.wave-choice{display:flex;flex-direction:column;align-items:center;gap:9px;font-size:14px}.wave-button{width:84px;height:80px;border:1.5px solid #111;padding:11px 10px}.wave-button.selected{background:#dedede;box-shadow:inset 0 0 0 2px #fff}.wave-button svg{width:100%;height:100%;fill:none;stroke:#111;stroke-width:2.9;stroke-linecap:square;stroke-linejoin:miter}.knobs{display:flex;flex:1;min-width:0;justify-content:space-around;gap:12px;padding-left:18px}.knob-control{display:flex;flex-direction:column;align-items:center;min-width:0;flex:1}.knob-label{font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:600;white-space:nowrap;line-height:27px}.knob-drag{width:min(100%,110px);height:auto;aspect-ratio:1;min-height:0;margin-top:21px;border-radius:50%}.knob-drag:hover{background:none}.knob{width:100%;height:auto;overflow:visible;fill:none;stroke:#111;stroke-width:1.5}.knob-outer{fill:#fff;stroke-width:3.5}.knob-inner{fill:#efefef;stroke:none}.knob-pointer{stroke-width:6;stroke-linecap:butt}.knob-value{font-size:14px;margin-top:7px}.notes{border-left:1px solid #999;padding-left:24px;display:flex;flex-direction:column;min-width:0}.notes label{margin-bottom:10px;line-height:1.4}.notes strong{font-family:Arial,Helvetica,sans-serif;font-size:20px}.notes textarea{width:100%;min-height:143px;resize:vertical;padding:12px 15px;font-size:16px;line-height:1.55}.character-count{font-size:13px;color:#444;text-align:right;margin-top:7px}.sheet-footer{border-top:2px solid #111;display:flex;justify-content:space-between;gap:20px;padding:28px 28px 25px;align-items:center;color:#4c4c4c;font-size:14px}.sheet-footer>div{display:flex;gap:25px;align-items:center;flex-wrap:wrap}.sheet-footer strong{font-size:18px;letter-spacing:-1px;color:#111;font-weight:600}.sheet-footer>span{text-align:right;font-size:13px}@media(min-width:1820px){.sheet{margin-left:auto;margin-right:auto}}@media(max-width:1350px){.sheet-header{grid-template-columns:1fr;grid-template-areas:"brand" "transport" "metadata" "status";gap:19px}.brand h1{font-size:67px}.transport{justify-content:flex-start}.save-status{justify-self:start;justify-content:flex-start;max-width:none}.save-status small{text-align:left;width:auto;align-self:center}.metadata{max-width:none}.lower-sheet{grid-template-columns:minmax(0,1fr);gap:24px}.notes{border-left:0;border-top:1px solid #999;padding:20px 0 0}.notes textarea{min-height:110px}.sound-controls{max-width:1050px;width:100%}.knobs{gap:22px}.sequencer-section{padding-bottom:27px}.sheet-footer{padding:22px 26px}}@media(min-width:1351px)and (max-width:1480px){.sheet-header{grid-template-columns:300px 1fr;padding-left:23px;padding-right:23px;column-gap:14px}.metadata{grid-column:1/3;max-width:830px;padding-top:14px}.transport{gap:9px;justify-self:end}.sheet-button{padding:0 14px;gap:10px}.transport-button{min-width:107px}.copy-button{min-width:155px}.save-button{min-width:125px;margin-left:7px}.save-status{grid-column:2;grid-row:2;padding-left:550px;min-width:0}.public-link{width:260px}.lower-sheet{grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:17px;padding-left:23px;padding-right:23px}.waveform{flex-basis:170px;padding-right:14px}.wave-button{width:70px;height:74px}.knobs{gap:8px;padding-left:12px}.knob-label{font-size:14px}.notes{padding-left:17px}.notes .optional{font-size:12px}}@media(max-width:850px){.sheet{margin:7px;min-height:calc(100svh - 14px)}.sheet-header{padding:19px 17px 23px}.brand h1{font-size:60px;letter-spacing:-4px}.brand p{font-size:12px;letter-spacing:3.5px}.transport{flex-wrap:wrap;gap:10px}.sheet-button{height:48px;padding:0 15px;min-width:0;font-size:14px;gap:11px}.bpm-control,.bpm-control input{height:48px}.bpm-control{margin:0;font-size:14px;gap:8px}.bpm-control input{font-size:19px;width:78px}.save-button{margin-left:0}.metadata{gap:17px}.metadata input{font-size:18px;height:42px}.sequencer-section{padding:0 14px 23px;flex-direction:column;gap:10px}.grid-legend{flex:auto;flex-direction:row;justify-content:space-between;padding:0 4px;gap:15px;font-size:12px}.symbol-legend{flex-direction:row;gap:16px}.gesture-legend{display:flex;gap:20px;align-items:center}.gesture-legend p{margin:0}.gesture-legend br{display:none}.lower-sheet{padding:20px 18px}.waveform{flex-basis:150px;padding-right:14px}.waveform h2{font-size:16px;margin-bottom:23px}.wave-options{gap:8px}.wave-button{width:60px;height:67px;padding:7px}.wave-choice{font-size:12px}.knobs{gap:10px;padding-left:12px}.knob-label{font-size:12px}.knob-drag{margin-top:13px}.knob-value{font-size:12px}.sheet-footer{padding:20px 18px;font-size:12px}.sheet-footer>div{gap:13px}.sheet-footer>span{font-size:11px;max-width:190px}.message{margin-left:18px;margin-right:18px}}@media(max-width:580px){.metadata{grid-template-columns:1fr;gap:13px}.metadata label{font-size:14px}.transport{gap:9px}.transport-button{flex:1}.bpm-control{flex:1;justify-content:flex-end}.save-button,.copy-button{flex:1}.save-status{font-size:12px;gap:7px;justify-content:space-between;width:100%}.public-link{width:100%;font-size:12px}.save-status small{font-size:11px}.grid-legend{flex-wrap:wrap}.gesture-legend{gap:12px}.sound-controls{flex-direction:column;gap:23px}.waveform{border:0;flex:auto;padding:0;display:flex;align-items:center;gap:20px}.waveform h2{margin:0;font-size:17px}.wave-options{gap:14px}.wave-choice{flex-direction:row;gap:7px}.wave-button{width:57px;height:53px}.wave-choice span{font-size:11px}.knobs{padding:0;gap:9px}.knob-label{font-size:10px;font-weight:700}.knob-drag{margin-top:7px}.knob-value{font-size:12px}.notes label{display:flex;flex-wrap:wrap;gap:5px}.notes .optional{font-size:12px;align-self:center}.notes textarea{font-size:15px;min-height:150px}.sheet-footer{flex-wrap:wrap;gap:14px}.sheet-footer>span{max-width:none;text-align:left;font-size:10px}.sheet-footer>div{font-size:11px}.sheet-footer strong{font-size:16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}@media(min-width:1351px){.metadata{grid-column:1/-1;grid-row:2;width:62%;max-width:920px;padding-top:0}.save-status{grid-column:2;grid-row:2;padding-left:0;margin-top:-28px;width:440px;max-width:100%}.brand h1{font-size:76px}.brand p{letter-spacing:3.8px}}@media(max-width:580px){.transport{display:grid;grid-template-columns:1fr 1fr 1.15fr;width:100%}.transport-button{width:100%;padding:0 8px;gap:8px}.bpm-control{justify-content:flex-end;min-width:0;gap:6px;font-size:12px}.bpm-control input{min-width:0;width:64px;padding:6px}.save-button{grid-column:1/2;padding:0 8px;gap:8px}.save-button:has(span:not(:empty)){min-width:0}.copy-button{grid-column:2/4;min-width:0}.save-button .icon{width:18px}.save-button span{font-size:12px;white-space:normal}.knob-label{font-size:12px}.knobs{gap:6px}}@media(max-width:580px){.knobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px 12px}.knob-label{font-size:14px}.knob-drag{width:86px;margin-top:7px}.knob-value{font-size:13px}}@media(min-width:1100px){#root{display:grid;min-height:100svh;place-items:center;padding:32px}.sheet{width:calc(100vw - 20px);max-width:1800px;margin:0;zoom:.70710678}}@media(min-width:1100px){.brand p{font-size:18px;letter-spacing:3px}.sheet-button,.bpm-control,.metadata label{font-size:20px}.sheet-button{gap:11px;padding-left:16px;padding-right:16px}.optional,.notes .optional,.save-status,.save-status small,.public-link,.grid-legend,.wave-choice,.knob-value,.character-count,.sheet-footer,.sheet-footer>span,.text-button{font-size:18px}.message,.notes textarea{font-size:20px}.metadata input{font-size:23px}.grid-legend{flex-basis:145px}.sequencer thead th,.sequencer thead th:first-child,.sequencer th:first-child{font-size:21px}.sequencer tbody th span{font-size:19px}.parameter-column{width:124px}.sequencer .note-row td{font-size:25px}.knob-label{font-size:20px}.knobs{gap:8px}.notes strong,.waveform h2{font-size:23px}.public-link{width:350px}.sheet-footer>div{gap:20px}.sheet-footer strong{font-size:22px}}@media(min-width:1351px)and (max-width:1480px){.sheet-header{grid-template-columns:265px 1fr}.sheet-button{padding-left:11px;padding-right:11px;gap:8px}.save-button{margin-left:0}.brand h1{font-size:70px}.brand p{font-size:17px;letter-spacing:2px}.lower-sheet{grid-template-columns:minmax(0,2.5fr) minmax(300px,1fr)}.knob-label{font-size:19px}}.transfer-notice{margin:0 26px 20px;padding:14px 16px;border:1px solid #888;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:18px;line-height:1.5}.transfer-notice button,.transfer-page button{border:1px solid #111;padding:10px 15px;font:inherit}.transfer-notice p{margin:0}.transfer-page{width:min(620px,calc(100vw - 40px));border:2px solid;padding:32px;margin:40px auto;font-size:17px;line-height:1.6}.transfer-page h1{font:700 28px Arial,sans-serif}@media(max-width:580px){.transfer-notice{font-size:14px;margin:0 18px 18px}}.sheet.transfer-page{zoom:1;min-height:0;max-width:620px}
