@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Chivo+Mono:wght@400;500&display=swap";:root{--sans:"DM Sans",system-ui,sans-serif;--mono:"Chivo Mono",ui-monospace,monospace;--text-2:#565b52;--faint:#a3a69c;--track:.08em;--r-xs:4px;--r-s:8px;--r-m:12px;--r-l:18px;--r-pill:999px;font-family:var(--sans);color:#232522;background:#f0eee9;font-synthesis:none;color-scheme:light;--cloud:#f0eee9;--ink:#232522;--muted:#676a62;--line:#d5d6ce;--glass:#ffffff45}*{box-sizing:border-box}body{margin:0;min-width:340px;background:radial-gradient(ellipse at 55% 30%,#ffffff80,transparent 60%);min-height:100vh}button,input,select{font:inherit}button{color:inherit;cursor:pointer;border:1px solid var(--line);background:transparent;padding:12px 16px;border-radius:var(--r-s);transition:background .15s,box-shadow .15s}button:hover:not(:disabled){background:#ffffff78;border-color:#bfc2b8}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--text-2);outline-offset:4px}button:disabled{opacity:.4;cursor:not-allowed}input,select{accent-color:var(--ink)}input[type=range]{width:100%;height:14px;margin:8px 0 0;cursor:pointer}button.primary{background:var(--ink);color:var(--cloud);border-color:var(--ink)}button.primary:hover{background:#3b3e38}a{color:inherit;text-underline-offset:3px}header{max-width:1600px;margin:auto;height:103px;padding:0 44px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.brand{font-weight:600;font-size:30px;letter-spacing:-1.8px;text-decoration:none;display:flex;align-items:center}.brand>span{font-weight:400;margin:0 3px;color:#7d8377}.brand-tag{font:10px var(--mono);letter-spacing:var(--track);font-style:normal;margin-left:24px;color:var(--muted)}.header-actions{display:flex;gap:12px;align-items:center}.quiet{font-size:12px;border-color:transparent;padding:12px}.room-toggle{display:flex;align-items:center;gap:12px;border-radius:var(--r-pill);font-size:12px;background:var(--glass);box-shadow:inset 0 1px #ffffffba,0 4px 14px #3c443508}.count{border-left:1px solid var(--line);padding-left:12px;font:11px var(--mono);color:var(--muted)}.local-dot{height:5px;width:5px;background:#474d42;border-radius:50%}.workspace{max-width:1512px;min-height:660px;height:calc(100vh - 210px);max-height:920px;margin:0 auto;display:grid;grid-template-columns:215px minmax(0,1fr) 176px;gap:32px;padding:32px 0 20px;position:relative}.sound-panel{padding-top:8px}.panel-caption{display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:.12em;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:16px}h1{font-size:19px;line-height:1.4;letter-spacing:-.6px;font-weight:500;margin:20px 0 28px}.sound-controls{display:flex;flex-direction:column;gap:0}.sound-controls label,.range-field label,.octave>span,.tempo>label{font:10px var(--mono);letter-spacing:var(--track);display:flex;justify-content:space-between;color:var(--text-2)}.sound-controls select{width:100%;padding:12px 8px;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink);font-size:13px;margin:8px 0 20px}.select-pair{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px}.range-field{margin:0 0 24px}.range-field output{letter-spacing:0;color:var(--muted)}.octave{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.octave>div{display:flex;align-items:center;gap:16px}.octave button{width:29px;height:29px;padding:0;border-radius:50%;font-size:18px}.octave output{font:12px var(--mono)}.volume{padding-top:20px;border-top:1px solid var(--line);margin-bottom:8px}.panic{display:flex;justify-content:space-between;align-items:center;padding-left:0;padding-right:0;color:var(--muted);font-size:11px}kbd{font:10px var(--mono);padding:3px 5px;color:var(--muted)}.control-note{font-size:11px;color:var(--muted);line-height:1.6;margin-top:12px}.instrument-area{min-width:0;display:flex;flex-direction:column;position:relative;padding:0 5px}.instrument-top{display:flex;justify-content:space-between;align-items:center;gap:16px}.micro{font:10px var(--mono);letter-spacing:var(--track);color:var(--muted)}.instrument-tabs{display:flex;border-radius:var(--r-pill);background:#ffffff40;border:1px solid #ffffffb0;padding:4px;gap:3px;box-shadow:0 5px 20px #30352b06}.instrument-tabs button{font-size:12px;border:0;padding:8px 16px;border-radius:var(--r-pill)}.instrument-tabs button.selected{background:var(--ink);color:var(--cloud);box-shadow:inset 0 1px #ffffff24,0 2px 5px #00000015}.instrument-title{margin:28px 0 0;z-index:1;pointer-events:none}.instrument-title h2{font-size:clamp(27px,3vw,43px);font-weight:400;letter-spacing:-1.7px;margin:0}.instrument-title p{font-size:13px;color:var(--muted);margin:8px 0}.stage{position:absolute;inset:72px -65px 130px -40px;touch-action:none}.stage canvas{display:block;width:100%;height:100%}.stage.unavailable{display:grid;place-items:center;color:var(--muted);font-size:14px}.playing-readout{display:flex;justify-content:space-between;align-items:center;margin-top:auto;border-top:1px solid var(--line);padding:16px 0 12px;z-index:1}.playing-readout>span:first-child{font:14px var(--mono)}.playing-readout>span:last-child{font:10px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.play-controls{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;z-index:1}.play-controls button{display:flex;justify-content:space-between;align-items:center;gap:5px;min-height:49px;padding:12px;font-size:12px;background:#ffffff40;border:1px solid #ffffffa0;box-shadow:inset 0 1px #fff,0 3px 8px #353d3009;touch-action:none;-webkit-user-select:none;user-select:none}.play-controls button.pressed{background:#292d27;color:#f0eee9;transform:translateY(2px);box-shadow:inset 0 2px 5px #00000030}.play-controls button.pressed kbd{color:#d2d6ca}.play-controls.keys{grid-template-columns:repeat(13,minmax(0,1fr));gap:4px}.play-controls.keys button{flex-direction:column;justify-content:space-between;padding:12px 4px;min-height:64px}.play-controls .black-key{background:#30342e;color:#f0eee9;border-color:#292d27;box-shadow:inset 0 1px #ffffff40}.play-controls .black-key kbd{color:#c8ccbf}.play-controls .black-key.pressed{background:#646d5e}.play-controls.drums{grid-template-columns:repeat(8,minmax(0,1fr))}.play-controls.drums button{flex-direction:column;padding:8px 4px;font-size:10px;min-height:58px}.keyboard-hint{font-size:11px;text-align:center;color:var(--muted);margin:12px 0 0}.right-rail{padding-top:0;display:flex;justify-content:flex-end;align-items:flex-start}.record-toggle{font-size:12px;display:flex;align-items:center;gap:8px;border-radius:var(--r-pill);background:var(--glass);box-shadow:inset 0 1px #fff,0 4px 15px #353d3008;padding:12px 16px}.record-dot{width:6px;height:6px;background:var(--ink);border-radius:50%}.recording .record-dot{box-shadow:0 0 0 4px #23252225}.recording{background:#353b32!important;color:#fff!important}.recording .record-dot{background:#fff}.drawer{position:absolute;right:0;top:88px;width:326px;max-height:calc(100% - 100px);overflow:auto;z-index:10;padding:24px;border-radius:var(--r-l);border:1px solid #ffffffc0;background:#f0eee9e8;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 1px #fff,0 20px 70px #2429231a}.drawer-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.drawer-heading h2{font-size:29px;font-weight:400;letter-spacing:-1px;margin:8px 0 0}.close{border:0;width:32px;height:32px;padding:0;background:#ffffff80;border-radius:50%;font-size:22px;color:var(--muted)}[hidden]{display:none!important}.tempo{display:flex;align-items:center;justify-content:space-between;padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid var(--line)}.tempo input{width:74px;background:transparent;border:0;font:25px var(--mono);color:var(--ink)}.tempo span{font:10px var(--mono);color:var(--muted)}.transport{display:grid;grid-template-columns:1fr 1fr;gap:8px}.transport button{font-size:12px;padding:12px 8px}.drawer-status{font-size:12px;line-height:1.5;min-height:36px;color:var(--muted);margin:16px 0}.sequence{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.step{padding:0;min-height:42px;font:10px var(--mono);color:var(--muted);background:var(--glass)}.step.current{outline:2px solid #858f7d;outline-offset:2px}.sequence-meta{display:flex;justify-content:space-between;font:10px var(--mono);color:var(--muted);margin-top:12px}.tiny{font-size:11px;line-height:1.65;color:var(--muted);margin:20px 0 0}.room-description{font-size:14px;color:var(--text-2);line-height:1.65}.room-slots{margin:24px 0}.room-slot{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding:20px 0;color:var(--muted)}.room-slot.occupied{color:var(--ink)}.slot-number{font:15px var(--mono)}.room-slot>div{flex:1}.room-slot strong{font-size:12px;font-weight:500;display:block}.room-slot small{display:block;font-size:10px;margin-top:5px;color:var(--muted)}.status-bar{max-width:1512px;margin:0 auto;padding:20px 0;display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);font-size:12px;color:var(--text-2)}.status-prefix{font:10px var(--mono);border:1px solid var(--line);border-radius:var(--r-xs);padding:4px 8px;letter-spacing:var(--track)}.session-caption{margin-left:auto;font:10px var(--mono);letter-spacing:.08em;color:var(--muted)}footer{max-width:1512px;margin:auto;padding:3px 0 24px;display:flex;gap:36px}details{max-width:820px}summary{cursor:pointer;list-style:none;font-size:11px;color:var(--muted)}details p{font-size:13px;line-height:1.8;color:var(--text-2)}footer>.micro{font-size:9px;white-space:nowrap}@media(max-width:1600px){.workspace,.status-bar,footer{margin-left:44px;margin-right:44px}.workspace{gap:28px;grid-template-columns:195px minmax(0,1fr) 168px}.play-controls button{padding:12px 8px}}@media(max-width:1150px){header{padding:0 28px}.workspace,.status-bar,footer{margin-left:28px;margin-right:28px}.workspace{grid-template-columns:175px minmax(0,1fr) 144px;gap:20px;min-height:680px}.brand-tag{display:none}.record-toggle{padding:12px}.instrument-top{align-items:flex-start;flex-direction:column;gap:16px}.instrument-title{margin-top:20px}.instrument-tabs button{padding:8px 12px}.stage{inset:142px -50px 142px -25px}.play-controls button{flex-direction:column;gap:4px;padding:8px 4px}.play-controls.drums{grid-template-columns:repeat(4,minmax(0,1fr))}.instrument-area:has(.drums) .stage{bottom:215px}.session-caption{display:none}footer>.micro{display:none}.sound-controls .range-field{margin-bottom:20px}h1{font-size:18px}}@media(max-width:760px){header{height:83px;padding:0 20px}.brand{font-size:25px}.header-actions{gap:5px}.quiet{font-size:11px;padding:8px}.room-toggle{font-size:11px;padding:8px 12px;gap:8px}.count{padding-left:8px;font-size:10px}.local-dot{display:none}.workspace{margin:0 20px;display:flex;flex-direction:column;padding-top:24px;height:auto;min-height:0;gap:0}.sound-panel{order:2;padding:0;margin-top:24px}.sound-panel h1,.panel-caption,.control-note{display:none}.sound-controls{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;background:var(--glass);border:1px solid white;border-radius:var(--r-m);padding:20px}.sound-controls>label{grid-column:1/-1}.sound-controls>select{grid-column:1/-1;margin:-8px 0 0}.select-pair{grid-column:1/-1}.sound-controls select{margin-bottom:0}.range-field{margin:0!important}.octave{margin:0}.volume{padding-top:0;border:0}.panic{grid-column:1/-1}.instrument-area{order:1;padding:0;min-height:530px}.instrument-top{flex-direction:row;align-items:center;gap:8px;padding-right:0}.instrument-top>.micro{font-size:9px}.instrument-tabs button{font-size:11px;padding:8px 12px}.instrument-title{margin-top:32px}.instrument-title h2{font-size:29px}.instrument-title p{font-size:12px}.stage{inset:130px -18px 128px}.playing-readout{padding-top:12px}.play-controls{gap:5px}.play-controls button{font-size:11px;min-height:48px}.play-controls.keys{gap:3px}.play-controls.keys button{font-size:9px;min-height:59px}.play-controls.keys kbd{font-size:8px;padding:0}.play-controls.drums{grid-template-columns:repeat(4,minmax(0,1fr))}.instrument-area:has(.drums){min-height:595px}.instrument-area:has(.drums) .stage{bottom:195px}.right-rail{position:absolute;right:0;top:95px;z-index:2}.record-toggle{font-size:11px;padding:8px 12px}.drawer{position:fixed;right:12px;top:94px;bottom:auto;width:min(326px,calc(100vw - 24px));max-height:calc(100dvh - 110px);padding:24px}.status-bar{margin:24px 20px 0;align-items:flex-start;font-size:11px;line-height:1.6}.status-prefix{font-size:8px}footer{margin:0 20px;padding-bottom:24px}.keyboard-hint{font-size:10px}summary{font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(min-width:761px){.workspace{min-height:720px}}.stage:before{content:"";position:absolute;inset:10% 4%;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 66%,#cecfc316,transparent 68%);border-radius:40%}.workspace{isolation:isolate}.workspace:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%237d8178' opacity='.18' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}@media(min-width:1151px){.stage{inset:145px 0 135px}}.local-dot.live{background:var(--ink);animation:live 2.4s ease-in-out infinite}@keyframes live{0%,to{box-shadow:0 0 0 2px #2325221f}50%{box-shadow:0 0 0 5px #23252208}}.field-label{display:block;font:10px var(--mono);letter-spacing:.08em;color:var(--muted);margin:24px 0 8px}.text-field{width:100%;min-width:0;border:1px solid var(--line);border-radius:var(--r-s);background:#ffffff80;padding:12px;font-size:14px;color:var(--ink)}.text-field::placeholder{color:var(--faint)}.room-wide{width:100%;font-size:12px;margin-top:16px}.join-row>div{display:flex;gap:8px}.join-row button{font-size:12px;flex:none}.code-field{font-family:var(--mono);letter-spacing:.2em}.room-code{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-bottom:4px}.room-code strong{display:block;font:500 30px var(--mono);letter-spacing:var(--track);margin-top:8px;-webkit-user-select:all;user-select:all}.room-code button{font-size:11px;padding:8px 12px;flex:none}.room-slot .slot-volume{height:10px;margin:12px 0 0}.slot-activity{flex:none;width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .12s,transform .12s}.room-slot.occupied .slot-activity{background:#b4b7ac}.room-slot.active .slot-activity{background:var(--ink);transform:scale(1.6)}.play-controls kbd,.keyboard-hint kbd{border:1px solid color-mix(in srgb,currentColor 32%,transparent);border-radius:var(--r-xs);min-width:1.9em;line-height:1.25;text-align:center;box-shadow:0 1px color-mix(in srgb,currentColor 16%,transparent)}.keyboard-hint kbd{font-size:9px;padding:1px 4px;margin:0 1px}@media(max-width:760px){.play-controls.keys kbd{padding:0 2px;min-width:0}}.octave-piano{margin-bottom:20px}.octave-piano-head{display:flex;justify-content:space-between;align-items:baseline;font:10px var(--mono);letter-spacing:var(--track);color:var(--text-2)}.octave-piano-head output{font-size:11px;color:var(--ink);letter-spacing:.02em}.piano-map{display:block;width:100%;height:auto;margin-top:12px;cursor:pointer;touch-action:none;border-radius:var(--r-xs)}.piano-map:focus-visible{outline:2px solid var(--text-2);outline-offset:4px}.piano-map .pw{fill:#e4e3dc;stroke:#c3c4bb;stroke-width:.6;transition:fill .15s}.piano-map .pb{fill:#9a9d95;transition:fill .15s}.piano-map .pw.in{fill:#fffefb}.piano-map .pb.in{fill:var(--ink)}.piano-map .piano-frame{fill:none;stroke:var(--ink);stroke-width:1.4;pointer-events:none;transition:x .18s ease,width .18s ease}:root{--k-drums:#2b2d29;--k-chords:#5b6b56;--k-keys:#8a7656}.drawer.loop-drawer{width:min(396px,calc(100vw - 24px))}.bank-head{display:flex;justify-content:space-between;margin:0 0 8px}.loop-bank{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.bank-slot{height:32px;padding:0;border-radius:var(--r-s);display:grid;place-items:center;font:500 11px var(--mono);color:var(--cloud);border:1px solid transparent}.bank-slot.kind-drums,.chip.kind-drums b,.arr-cell.kind-drums{background:var(--k-drums)}.bank-slot.kind-chords,.chip.kind-chords b,.arr-cell.kind-chords{background:var(--k-chords)}.bank-slot.kind-keys,.chip.kind-keys b,.arr-cell.kind-keys{background:var(--k-keys)}.bank-slot.kind-drums:hover,.bank-slot.kind-chords:hover,.bank-slot.kind-keys:hover{filter:brightness(1.2)}.bank-slot.selected{outline:2px solid var(--ink);outline-offset:2px}.bank-slot.add{background:transparent;color:var(--ink);border:1px dashed #aeb0a6;font-size:16px}.bank-slot.empty{border:1px dashed #dddcd4}.loop-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:20px 0 12px}.loop-title strong{font-size:18px;font-weight:500;letter-spacing:-.4px}.metronome{font-size:11px;padding:8px 12px;border-radius:var(--r-pill)}.metronome.on{background:var(--ink);color:var(--cloud);border-color:var(--ink)}.loop-editor.empty p{margin:0;padding:16px;border:1px dashed var(--line);border-radius:var(--r-m);font-size:12px;line-height:1.6;color:var(--muted)}.roll{display:grid;grid-template-columns:36px repeat(16,minmax(0,1fr));gap:2px;max-height:250px;overflow-y:auto;overscroll-behavior:contain}.roll-label{display:flex;align-items:center;overflow:hidden;white-space:nowrap;font:10px var(--mono);color:var(--muted)}.roll-label.sharp{color:var(--faint)}.roll-num{height:14px;font:10px var(--mono);color:var(--muted)}.cell{height:17px;padding:0;border:0;border-radius:3px;background:#ffffff80;box-shadow:inset 0 0 0 1px #e1e1da;transition:none}.cell.beat{box-shadow:inset 0 0 0 1px #cfd0c6}.cell.sharp{background:#ebeae4}.loop-editor .cell:hover:not(:disabled){background:#fff}.kind-drums .cell.on,.kind-drums .cell.on:hover{background:var(--k-drums)}.kind-keys .cell.on,.kind-keys .cell.on:hover{background:var(--k-keys);border-radius:0}.kind-keys .cell.on.start{border-radius:3px 0 0 3px}.cell.chord{height:34px}.kind-chords .cell.on,.kind-chords .cell.on:hover{background:var(--k-chords);border-radius:0}.cell.chord.start{position:relative;z-index:1;overflow:visible;border-radius:4px 0 0 4px;padding-left:5px;text-align:left;white-space:nowrap;color:#fff;font:500 11px var(--sans)}.cell.current{box-shadow:inset 0 0 0 1.5px var(--ink)}.cell.on.current{filter:brightness(1.45)}.loop-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px}.loop-actions button{font-size:11px;padding:8px 4px}.arranging .stage,.arranging .playing-readout,.arranging .play-controls,.arranging .keyboard-hint{display:none}.builder{display:flex;flex-direction:column;gap:20px;margin-top:28px;min-width:0;z-index:1}.builder-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.builder-bar>button{font-size:12px}.bar-choice,.arr-bpm{display:flex;align-items:center;gap:5px}.bar-choice .micro,.arr-bpm .micro{margin-right:4px}.bar-choice button{padding:8px 12px;border-radius:var(--r-pill);font:11px var(--mono)}.bar-choice button.selected{background:var(--ink);color:var(--cloud);border-color:var(--ink)}.arr-bpm input{width:62px;padding:8px;border:1px solid var(--line);border-radius:var(--r-s);background:#ffffff80;font:13px var(--mono);color:var(--ink)}#arr-export{margin-left:auto}.palette{display:flex;flex-wrap:wrap;gap:8px}.chip{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:var(--r-pill);font-size:11px;background:#ffffff60}.chip b{display:grid;place-items:center;min-width:28px;height:22px;padding:0 5px;border-radius:var(--r-m);color:var(--cloud);font:500 10px var(--mono)}.chip.selected{background:#fff;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.chip.eraser b{background:transparent;color:var(--ink);border:1px dashed #9fa297;font-size:13px}.palette-empty{margin:0;padding:16px;border:1px dashed var(--line);border-radius:var(--r-m);font-size:13px;line-height:1.6;color:var(--muted)}.palette-empty .link{padding:0;border:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px}.arrangement-scroll{overflow-x:auto;padding-bottom:8px}.arrangement{display:grid;grid-template-columns:148px repeat(var(--bars),minmax(36px,1fr));gap:4px;align-items:stretch}.bar-num{padding-left:4px;font:10px var(--mono);color:var(--muted)}.bar-num.current{color:var(--ink);font-weight:500}.lane-head{display:flex;flex-direction:column;justify-content:center;gap:8px;padding-right:12px;font-size:12px}.lane-head.muted{color:var(--muted)}.lane-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.lane-mute{padding:3px 8px;border-radius:var(--r-xs);font:10px var(--mono)}.lane-mute[aria-pressed=true]{background:var(--ink);color:var(--cloud);border-color:var(--ink)}.lane-head input[type=range]{height:10px;margin:0}.arr-cell{height:52px;padding:0;border:1px dashed #cdcec5;border-radius:var(--r-s);background:#ffffff38;font:500 11px var(--mono);color:var(--cloud);touch-action:none;-webkit-user-select:none;user-select:none;transition:none}.arr-cell.filled{border:0}.arr-cell.filled:hover{filter:brightness(1.2)}.arr-cell.muted.filled{opacity:.35}.arr-cell.current{box-shadow:0 0 0 2px var(--ink)}.arr-cell.current:not(.filled){background:#ffffffb0}.builder-hint{margin:0;font-size:11px;line-height:1.6;color:var(--muted)}@media(max-width:760px){.instrument-top>.micro{display:none}.instrument-tabs{flex-wrap:wrap}.builder{margin-top:20px}.arrangement{grid-template-columns:112px repeat(var(--bars),minmax(34px,1fr))}.arr-cell{height:44px}#arr-export{margin-left:0}}.instrument-area.arranging{flex-shrink:0}.play-controls.keys button.off-scale>span{opacity:.42}.play-controls.keys button.off-scale kbd{opacity:.6}.play-controls.keys button.tonic{box-shadow:inset 0 -3px 0 var(--ink),0 3px 8px #353d3009}.play-controls.keys button.black-key.tonic{box-shadow:inset 0 -3px 0 var(--cloud)}.brand{font-weight:400}.brand b{font-weight:700}.studio-toggle{display:flex;align-items:center;gap:8px;border-radius:var(--r-pill);font-size:12px;padding:12px 16px;background:var(--glass);box-shadow:inset 0 1px #ffffffba,0 4px 14px #3c443508}.studio-toggle:before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;box-sizing:border-box}.studio-toggle[aria-pressed=true]{background:var(--ink);color:var(--cloud);border-color:var(--ink)}.studio-toggle[aria-pressed=true]:before{background:currentColor}.studio-toggle:hover:not([aria-pressed=true]){background:#ffffff90}@media(max-width:760px){.studio-toggle{font-size:11px;padding:8px 12px;gap:8px}}.studio-toggle:disabled{opacity:1;cursor:default;color:var(--muted)}.studio-toggle:disabled:before{opacity:.5}.soon{font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:var(--r-m);padding:2px 8px;color:var(--muted)}.presence{position:absolute;right:4px;top:78px;z-index:3;display:flex;gap:12px;pointer-events:auto}.peer-item{display:flex;align-items:center;gap:8px}.peer-info{display:flex;flex-direction:column;align-items:flex-end;gap:4px;opacity:.5;transition:opacity .6s}.peer-item.live .peer-info{opacity:1;transition:opacity .08s}.peer-info b{font:500 12px var(--mono);color:var(--ink);min-height:16px}.peer-info small{font:10px var(--mono);letter-spacing:var(--track);color:var(--muted);white-space:nowrap}.peer{--c:#b4b7ac;position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#f7f6f2cc;border:1px solid var(--line);box-shadow:0 2px 8px #2a2c2910;transition:border-color .5s,box-shadow .5s;cursor:default}.peer b{font:600 12px var(--sans);color:var(--ink);letter-spacing:-.2px}.peer.lit{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent),0 2px 8px #2a2c2910;transition:border-color .08s,box-shadow .08s}.peer .ring{position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--c);pointer-events:none;animation:peer-ripple 1.2s cubic-bezier(.22,.61,.36,1) forwards}@keyframes peer-ripple{0%{transform:scale(1);opacity:.85}to{transform:scale(2.5);opacity:0}}@media(prefers-reduced-motion:reduce){.peer .ring{display:none}}@media(max-width:1150px){.presence{top:4px;right:120px}}@media(max-width:760px){.presence{top:118px;right:0}}.right-rail{gap:8px}.looper-toggle .loop-icon{font-size:14px;line-height:1}.looper-toggle.active{box-shadow:inset 0 0 0 1px var(--ink),0 4px 15px #353d3008}.looper-toggle.active .loop-icon{display:inline-block;animation:loop-turn 2.4s linear infinite}@keyframes loop-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.looper-toggle.active .loop-icon{animation:none}}.stage{margin-bottom:var(--dock,0px)}.looper-dock{margin-top:auto;position:relative;z-index:2;padding:16px;border-radius:var(--r-l);border:1px solid #ffffffc0;background:#f0eee9e8;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 1px #fff,0 20px 70px #2429231a}.looper-dock:not([hidden])~.playing-readout{margin-top:16px}.dock-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}.dock-title{display:flex;flex-direction:column;gap:4px;margin-right:auto}#looper-cycle{white-space:nowrap;color:var(--ink)}.dock-beat{display:flex;align-items:baseline;gap:4px;font-family:var(--mono);font-variant-numeric:tabular-nums}.dock-beat b{font-size:28px;font-weight:500;line-height:1;min-width:20px;text-align:right}.dock-beat small{font-size:10px;letter-spacing:var(--track);color:var(--muted);white-space:nowrap}.dock-divs{display:flex;align-items:center;gap:8px}.dock-divs select{padding:8px;font-size:12px;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink)}.dock-head .metronome{margin:0}#looper-record{font-size:12px;padding:8px 16px;border-radius:var(--r-pill);white-space:nowrap}#looper-record.recording{background:#353b32;border-color:#353b32}#looper-record.armed{background:none;color:var(--ink);border:1px dashed var(--ink)}.timeline{--label:176px;--actions:148px;--gap:12px;position:relative}.tl-row{display:grid;grid-template-columns:var(--label) minmax(0,1fr) var(--actions);gap:var(--gap);align-items:center}.tl-ruler{display:grid;grid-template-columns:repeat(var(--cells,4),minmax(0,1fr));height:24px;padding-bottom:4px}.tl-ruler span{display:flex;align-items:center;padding-left:4px;font:10px var(--mono);color:var(--faint);border-left:1px solid var(--line);border-radius:0 var(--r-xs) var(--r-xs) 0;transition:background .08s}.tl-ruler span.cycle{color:var(--ink);border-left:2px solid var(--muted)}.tl-ruler span.now{background:var(--ink);color:var(--cloud)}.timeline:not(.on) .tl-ruler-row,.timeline:not(.on) .tl-head{display:none}.tl-head{position:absolute;z-index:1;top:0;bottom:0;width:2px;margin-left:-1px;border-radius:1px;background:var(--ink);pointer-events:none;left:calc(var(--label) + var(--gap) + var(--p,0)*(100% - var(--label) - var(--actions) - 2*var(--gap)))}.tl-lanes{max-height:220px;overflow-y:auto;overscroll-behavior:contain}.looper-row{border-top:1px solid var(--line);padding:8px 0}.looper-row.muted .tl-track,.looper-row.muted .tl-label{opacity:.45}.tl-label{display:flex;align-items:center;gap:8px;min-width:0}.tl-label>div{flex:1;min-width:0}.looper-row strong{display:block;font-size:12px;font-weight:500}.looper-row small{display:block;font-size:10px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tl-track{position:relative;height:32px;border:1px solid var(--line);border-radius:var(--r-s);background-color:#ffffff80;overflow:hidden;background-image:linear-gradient(90deg,var(--muted) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:calc(100% / var(--cycles,1)) 100%,calc(100% / var(--cells,4)) 100%;background-position:-1px 0}.tl-track i{position:absolute;top:8px;bottom:8px;width:4px;margin-left:-2px;border-radius:2px}.tl-track.editable i{cursor:grab;touch-action:none;transition:transform .12s,box-shadow .12s}.tl-track.editable i:before{content:"";position:absolute;inset:-8px -6px}.tl-track.editable i:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.tl-track.editable i.held{cursor:grabbing;transform:scaleY(1.25);box-shadow:0 0 0 2px var(--cloud),0 0 0 3px var(--ink);z-index:1}.loupe{position:absolute;z-index:6;width:320px;height:80px;border-radius:var(--r-m);background:var(--cloud);border:1px solid #ffffffc0;box-shadow:inset 0 1px #fff,0 12px 40px #2429232e,0 0 0 1px var(--line);overflow:hidden;pointer-events:none;transform-origin:50% 100%;animation:loupe-in .14s ease-out}@keyframes loupe-in{0%{opacity:0;transform:scale(.92) translateY(6px)}}.loupe.below{transform-origin:50% 0}.loupe i{position:absolute;bottom:12px}.lp-grid{top:28px;width:1px;background:color-mix(in srgb,var(--line) 70%,transparent)}.lp-grid.half{background:var(--line)}.lp-grid.beat{top:20px;background:var(--muted)}.lp-grid.beat:before{content:attr(data-beat);position:absolute;top:-16px;left:4px;font:10px var(--mono);color:var(--muted)}.lp-grid.on{background:var(--ink);width:2px;margin-left:-1px}.lp-other{top:40px;width:3px;margin-left:-1px;border-radius:2px;background:var(--faint)}.lp-ghost{top:32px;width:8px;margin-left:-4px;border-radius:4px;border:1px dashed;opacity:.7}.lp-note{top:30px;bottom:10px;width:8px;margin-left:-4px;border-radius:4px;box-shadow:0 0 0 2px var(--cloud),0 4px 10px #00000030}.lp-read{position:absolute;top:6px;right:8px;font:10px var(--mono);letter-spacing:var(--track);color:var(--ink)}@media(prefers-reduced-motion:reduce){.loupe{animation:none}}.tl-track b{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--ink) 14%,transparent)}.tl-actions{display:flex;gap:4px;justify-content:flex-end}.looper-row button{font-size:11px;padding:8px 12px}.looper-row button[aria-pressed=true]{background:var(--ink);color:var(--cloud);border-color:var(--ink)}.looper-row button:disabled{color:var(--faint);cursor:default}.looper-swatch{width:10px;height:10px;border-radius:50%;flex:none;transition:background .15s,box-shadow .4s}.looper-row.sounding .looper-swatch{box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 10%,transparent)}.looper-now{flex:none;min-width:32px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.looper-row .looper-now b{font:500 12px var(--mono);color:var(--ink);min-height:16px}.looper-row .looper-now small{font:10px var(--mono);letter-spacing:var(--track);color:var(--muted);margin:0;white-space:nowrap}.tl-empty{margin:4px 0 0}.looper-dock .drawer-status{min-height:0;margin:12px 0 0}.tl-cliprow{position:relative;z-index:2;padding:0 0 8px}.tl-cliprow .clip{position:relative;height:32px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--cloud);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.clip i{position:absolute;top:8px;bottom:8px;width:2px;margin-left:-1px;border-radius:1px}.clip b{position:absolute;top:0;bottom:0;width:1px;background:#2325223d}.clip-window{position:absolute;top:0;bottom:0;border-left:2px solid var(--ink);border-right:2px solid var(--ink);box-shadow:0 0 0 999px #f0eee9c2;cursor:grab}.clip.dragging .clip-window{cursor:grabbing}.clip-window span{position:absolute;top:0;bottom:0;width:12px;max-width:40%;cursor:ew-resize}.clip-window span[data-edge=from]{left:-2px}.clip-window span[data-edge=to]{right:-2px}.clip.locked{opacity:.55}.clip.locked .clip-window{border-color:var(--muted);cursor:default}.clip.locked span{cursor:default}@media(max-width:1150px){.timeline{--label:136px;--actions:128px;--gap:8px}.dock-divs .micro{display:none}}@media(max-width:760px){.workspace{max-height:none}.instrument-area:has(>.looper-dock:not([hidden])) .stage{visibility:hidden}.looper-dock{padding:12px}.dock-head{flex-wrap:wrap;padding-right:40px}.looper-dock .close{position:absolute;top:12px;right:12px}.timeline{--label:92px;--actions:80px}.looper-now{display:none}.tl-actions{flex-direction:column;align-items:stretch}}.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}@media(min-width:761px){.workspace{height:auto;min-height:clamp(720px,calc(100vh - 210px),920px)}}.panel-caption{margin-bottom:24px}footer details{max-width:640px}details p{font-size:13px;line-height:1.7;color:var(--text-2);margin:12px 0 0}details p:first-of-type{font-size:15px;color:var(--ink)}.room-toggle,.studio-toggle,.count{white-space:nowrap}@media(max-width:760px){.header-actions .count{display:none}}.sound-panel .instrument-tabs{display:flex;margin:0 0 24px}.sound-panel .instrument-tabs button{flex:1;min-width:0;padding:8px 4px;text-align:center}@media(max-width:760px){.sound-panel{display:contents}.sound-panel .instrument-tabs{order:0;margin:0 0 4px}.instrument-area{order:1}.sound-controls{order:2;margin-top:24px}}@media(min-width:761px)and (max-width:1150px){.sound-panel .instrument-tabs button{font-size:11px;padding:8px 2px}}.brand-row{display:flex;align-items:center;min-width:0}.lang{position:relative;margin-left:4px}.lang-toggle{display:flex;align-items:center;gap:6px;padding:6px 8px;border-color:transparent;border-radius:var(--r-s)}.lang-toggle:hover:not(:disabled){border-color:var(--line)}.flag{display:block;width:20px;height:14px;border-radius:3px;box-shadow:0 0 0 1px #2325221f;flex:none}.chevron{width:8px;height:5px;fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}.lang-toggle[aria-expanded=true] .chevron{transform:rotate(180deg)}.lang-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:30;display:flex;flex-direction:column;gap:4px;min-width:168px;padding:8px;border:1px solid #ffffffc0;border-radius:var(--r-m);background:#f0eee9f0;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 1px #fff,0 16px 48px #2429231f}.lang-menu button{display:flex;align-items:center;gap:12px;padding:8px 12px;border-color:transparent;font-size:13px;text-align:left}.lang-menu button[aria-checked=true]{background:#ffffffb0;border-color:var(--line)}@media(max-width:760px){.studio-toggle:disabled{display:none}.lang{margin-left:0}.lang-toggle{padding:6px}}.right-rail{flex-direction:column;align-items:flex-end}.controller{margin:auto 0;width:100%;display:grid;grid-template-rows:auto 1fr;gap:12px;padding:12px;border-radius:var(--r-l);background:var(--glass);border:1px solid #ffffffb0;box-shadow:inset 0 1px #fff,0 4px 15px #353d3008}.controller>.joystick,.controller>.fxpad{grid-area:2/1}.controller>[hidden]{display:flex!important;visibility:hidden}.ctl-tabs{display:flex;border-radius:var(--r-pill);background:#ffffff40;border:1px solid #ffffffb0;padding:4px;gap:4px}.ctl-tabs button{flex:1;font:10px var(--mono);letter-spacing:var(--track);text-transform:uppercase;border:0;background:none;padding:8px 0;border-radius:var(--r-pill)}.ctl-tabs button:hover:not(:disabled,.selected){background:#ffffff80}.ctl-tabs button.selected{background:var(--ink);color:var(--cloud)}.ctl-tabs button:disabled{color:var(--faint);cursor:default}.joystick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.joy-base{--d:128px;position:relative;width:var(--d);height:var(--d);border-radius:50%;background:#ffffff40;border:1px solid #ffffffb0;box-shadow:inset 0 2px 8px #353d3014,0 4px 8px #353d3009;touch-action:none;cursor:grab}.joy-base.dragging{cursor:grabbing}.joy-tick{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--faint);transform:rotate(var(--a)) translateY(calc(var(--d)*-.42))}.joy-knob{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px;border-radius:50%;background:var(--ink);box-shadow:inset 0 1px #ffffff30,0 4px 12px #00000030;transition:transform .16s cubic-bezier(.3,1.5,.5,1);pointer-events:none}.joy-base.dragging .joy-knob{transition:none}.joy-label,.pad-label{min-height:16px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font:10px var(--mono);letter-spacing:var(--track);color:var(--muted)}.joystick.active .joy-label,.fxpad.active .pad-label{color:var(--ink)}.fxpad{display:flex;flex-direction:column;gap:12px}.pad-area{position:relative;width:100%;aspect-ratio:1;border-radius:var(--r-m);background:#ffffff40;border:1px solid #ffffffb0;box-shadow:inset 0 2px 8px #353d3014;touch-action:none;cursor:crosshair;overflow:hidden;background-image:linear-gradient(color-mix(in srgb,var(--line) 50%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 50%,transparent) 1px,transparent 1px);background-size:25% 25%;background-position:-1px -1px}.pad-dot{position:absolute;width:20px;height:20px;margin:-10px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 6px color-mix(in srgb,var(--ink) 8%,transparent);opacity:0;transition:opacity .12s;pointer-events:none}.fxpad.active .pad-dot{opacity:1}.pad-ax{position:absolute;font:10px var(--mono);color:var(--muted);pointer-events:none}.pad-x{right:8px;bottom:4px}.pad-y{left:8px;top:4px}.fxpad select{width:100%;padding:8px;font-size:12px;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink)}.pad-hold{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2);cursor:pointer}.pad-hold input{margin:0;width:16px;height:16px;accent-color:var(--ink)}@media(max-width:1150px){.controller{padding:8px;gap:8px}.joy-base{--d:104px}.fxpad,.joystick{gap:8px}.fxpad select{font-size:11px;padding:8px 4px}}@media(max-width:760px){.controller{display:none}}.mic-fab{position:fixed;right:20px;bottom:20px;z-index:30;width:48px;height:48px;padding:0;display:grid;place-items:center;border-radius:50%;background:var(--glass);border:1px solid #ffffffc0;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 1px #fff,0 8px 24px #2429231f,0 0 0 calc(var(--level,0)*8px) color-mix(in srgb,var(--ink) 14%,transparent);transition:box-shadow .08s}.mic-fab svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}.mic-fab.on{background:var(--ink)}.mic-fab.on svg{stroke:var(--cloud)}.mic-fab.denied svg{stroke:var(--faint)}.mic-card{position:fixed;right:20px;bottom:80px;z-index:30;width:min(288px,calc(100vw - 40px));display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--r-l);border:1px solid #ffffffc0;background:#f0eee9f2;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 1px #fff,0 20px 70px #2429232a}.mic-head{display:flex;align-items:center;justify-content:space-between}.mic-card select{width:100%;padding:8px;font-size:12px;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink)}.mic-switch{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2);cursor:pointer}.mic-switch input{margin:0;width:16px;height:16px;accent-color:var(--ink)}.mic-meter{height:4px;border-radius:var(--r-pill);background:var(--line);overflow:hidden;margin-bottom:4px}.mic-meter i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform .05s}.mic-effects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-bottom:4px}.mic-effects button{font-size:11px;padding:8px 4px;border-radius:var(--r-s)}.mic-effects button[aria-pressed=true]{background:var(--ink);color:var(--cloud);border-color:var(--ink)}#mic-note{margin:4px 0 0;color:var(--muted)}@media(max-width:760px){.mic-fab{right:16px;bottom:16px}.mic-card{right:16px;bottom:76px}}.speaker-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.speaker-icon .x,[data-v="0"] .speaker-icon .w1,[data-v="0"] .speaker-icon .w2,[data-v="1"] .speaker-icon .w2{display:none}[data-v="0"] .speaker-icon .x{display:inline}.volume-row{display:flex;align-items:center;gap:8px;margin-top:8px}.volume-row input[type=range]{margin:0}.speaker{flex:none;width:24px;height:24px;margin-left:-4px;padding:0;display:grid;place-items:center;border:0;background:none;border-radius:var(--r-xs);color:var(--text-2)}.speaker:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}.volume-note{display:block;margin-top:8px;font-size:10px;line-height:1.4;color:var(--muted)}.loop-vol{flex:none;width:24px;height:24px;margin:-7px;display:grid;place-items:center;border-radius:50%;cursor:ns-resize;touch-action:none;color:var(--ink);outline:none}.loop-vol>*{grid-area:1/1}.loop-vol .looper-swatch{transition:background .15s,box-shadow .4s,opacity .12s,transform .12s}.loop-vol .speaker-icon{opacity:0;transform:scale(.6);transition:opacity .12s,transform .12s}.loop-vol:hover .looper-swatch,.loop-vol:focus-visible .looper-swatch,.loop-vol.held .looper-swatch{opacity:0;transform:scale(.4)}.loop-vol:hover .speaker-icon,.loop-vol:focus-visible .speaker-icon,.loop-vol.held .speaker-icon{opacity:1;transform:none}.loop-vol:focus-visible{box-shadow:0 0 0 2px var(--ink)}.loop-vol.held{background:color-mix(in srgb,var(--ink) 8%,transparent)}.lv{font-family:var(--mono)}.fader{position:fixed;z-index:40;width:56px;padding:8px 0 16px;display:flex;flex-direction:column;align-items:center;border-radius:var(--r-l);background:var(--cloud);border:1px solid #ffffffc0;box-shadow:inset 0 1px #fff,0 12px 40px #2429232e,0 0 0 1px var(--line);pointer-events:none;transform-origin:50% 100%;animation:loupe-in .14s ease-out}.fader b{font:500 11px/14px var(--mono);color:var(--ink)}.fader small{font:10px/14px var(--mono);color:var(--muted);white-space:nowrap}.fader span{position:relative;width:6px;height:120px;margin-top:8px;border-radius:var(--r-pill);background:var(--line)}.fd-fill{position:absolute;left:0;right:0;bottom:0;height:calc(var(--v)*100%);border-radius:inherit;background:var(--ink)}.fd-unity{position:absolute;left:-6px;right:-6px;bottom:calc(var(--unity)*100%);height:1px;background:var(--muted)}.fader.unity .fd-unity{height:2px;margin-bottom:-.5px;background:var(--ink)}.fd-thumb{position:absolute;left:50%;bottom:calc(var(--v)*100%);width:16px;height:16px;border-radius:50%;background:#fff;border:1.5px solid var(--ink);transform:translate(-50%,50%);box-shadow:0 2px 6px #24292333}@media(prefers-reduced-motion:reduce){.fader{animation:none}}.coffee-icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.apoio-toggle{display:flex;align-items:center;gap:8px;border-radius:var(--r-pill);font-size:12px;padding:12px 16px;background:var(--ink);color:var(--cloud);border-color:var(--ink);box-shadow:0 4px 14px #3c443518}.apoio-toggle:hover:not(:disabled){background:#3b3e38;border-color:#3b3e38}@media(max-width:760px){.apoio-toggle{padding:8px}.apoio-toggle span{display:none}}.apoio{width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #ffffffc0;border-radius:var(--r-l);background:var(--cloud);color:var(--ink);box-shadow:inset 0 1px #fff,0 20px 70px #2429232a}.apoio::backdrop{background:#2325223d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.apoio-body{padding:24px}.apoio form{margin:0}.apoio-kofi{display:flex;align-items:center;gap:8px;margin-top:20px;padding:12px 16px;border-radius:var(--r-pill);background:var(--ink);color:var(--cloud);text-decoration:none;font-size:13px}.apoio-kofi:hover{background:#3b3e38}.apoio-kofi:focus-visible{outline:2px solid var(--text-2);outline-offset:4px}.apoio-kofi small{margin-left:auto;font:10px var(--mono);letter-spacing:var(--track);text-transform:uppercase;color:#d2d6ca}.apoio-pix{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}.apoio-pix img{display:block;width:176px;height:176px;margin:4px auto 0;border:1px solid var(--line);border-radius:var(--r-s)}.apoio-pix .tiny{margin:4px 0 12px;text-align:center}.apoio-pix b{font-weight:500;color:var(--ink)}.pix-copy{display:flex;gap:8px}.pix-copy input{font:11px var(--mono);padding:8px 12px}.pix-copy button{font-size:12px;padding:8px 16px}.feedback-link{flex:none;align-self:flex-start;font-size:11px;color:var(--muted);text-decoration:none}.feedback-link:hover{color:var(--ink);text-decoration:underline}.feedback-link:focus-visible{outline:2px solid var(--text-2);outline-offset:4px}@media(max-width:760px){.feedback-link{font-size:10px}}.tour{position:fixed;z-index:50;width:min(300px,calc(100vw - 32px));padding:20px;border-radius:var(--r-l);background:var(--ink);color:var(--cloud);box-shadow:0 20px 60px #2429233a}.tour .micro{color:#c8ccbf}.tour h2{font-size:20px;font-weight:500;letter-spacing:-.5px;margin:8px 0}.tour p{font-size:13px;line-height:1.6;margin:0 0 16px;color:#d2d6ca}.tour-actions{display:flex;justify-content:flex-end;gap:8px}.tour-actions button{font-size:12px;padding:8px 16px;border-radius:var(--r-pill)}.tour button:focus-visible{outline-color:var(--cloud)}#tour-skip{border-color:transparent;color:#c8ccbf}#tour-skip:hover{background:#ffffff14}#tour-next{background:var(--cloud);color:var(--ink);border-color:var(--cloud)}#tour-next:hover{background:#fff}.tour-target{outline:2px solid var(--ink);outline-offset:6px}.copyright{flex:none;align-self:flex-start;font-size:11px;color:var(--muted)}@media(max-width:760px){footer{flex-wrap:wrap;gap:12px 24px}.copyright{font-size:10px;flex-basis:100%}}.tl-row>.tl-label{padding-left:8px}.tl-row>.tl-actions{padding-right:8px}.looper-row.editing{background:color-mix(in srgb,var(--ink) 5%,var(--cloud));border-radius:var(--r-s) var(--r-s) 0 0}.tl-editrow{background:color-mix(in srgb,var(--ink) 5%,var(--cloud));border-radius:0 0 var(--r-s) var(--r-s);padding:4px 8px 12px 26px;margin-bottom:8px}.tl-editrow .loop-edit{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px}.loop-edit p{flex:1 1 280px;max-width:64ch;margin:0;font-size:12px;line-height:1.5;color:var(--text-2)}.loop-edit div{display:flex;flex-wrap:wrap;gap:4px}.loop-edit button{min-height:32px;padding:4px 12px;font-size:12px}.sound-panel.editing-loop .panel-caption{color:var(--ink)}.tl-track.editable i:focus{outline:2px solid var(--ink);outline-offset:2px}.note-trash{position:absolute;z-index:7;width:36px;height:36px;margin-left:-18px;border-radius:50%;display:grid;place-items:center;background:var(--cloud);border:1px solid var(--line);color:var(--text-2);box-shadow:0 8px 24px #2429232e;pointer-events:none;transition:transform .12s,background .12s,color .12s;animation:loupe-in .14s ease-out}.note-trash.hot{background:var(--ink);border-color:var(--ink);color:var(--cloud);animation:trash-wiggle .32s ease-in-out infinite}@keyframes trash-wiggle{0%,to{transform:scale(1.15) rotate(0)}25%{transform:scale(1.15) rotate(-9deg)}75%{transform:scale(1.15) rotate(9deg)}}.loupe.dim{opacity:.35}@media(min-width:761px){.sound-panel{position:relative;z-index:0;align-self:start}.sound-panel:before{content:"";position:absolute;z-index:-1;inset:-4px -12px -12px;border:2px solid var(--ink);border-radius:var(--r-l);background:var(--glass);box-shadow:0 4px 15px #353d3008;pointer-events:none;opacity:0;transition:opacity .25s ease}.sound-panel.editing-loop:before{opacity:1}}.sound-panel.editing-loop .control-note{margin-bottom:0}.edit-tag{position:absolute;z-index:3;left:50%;top:42%;transform:translate(-50%,-50%) scale(.96);opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility 0s .25s;padding:8px 16px;border-radius:var(--r-pill);background:var(--ink);color:var(--cloud);font:500 11px var(--mono);letter-spacing:var(--track);text-transform:uppercase;white-space:nowrap;pointer-events:none}body.editing-loop .edit-tag{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition:opacity .25s ease,transform .25s ease}.stage,.play-controls,.keyboard-hint,.playing-readout{transition:opacity .25s ease,filter .25s ease}.controller,.looper-dock{transition:border-color .25s ease,box-shadow .25s ease}body.editing-loop .stage,body.editing-loop .play-controls,body.editing-loop .keyboard-hint,body.editing-loop .playing-readout{opacity:.25;filter:grayscale(1);pointer-events:none}.looper-row,#looper-arm,#looper-record{transition:opacity .25s ease,filter .25s ease}body.editing-loop .looper-row:not(.editing){opacity:.45}body.editing-loop #looper-arm,body.editing-loop #looper-record{opacity:.25;filter:grayscale(1)}body.editing-loop .looper-row.editing,body.editing-loop .tl-editrow{background:color-mix(in srgb,var(--ink) 9%,var(--cloud))}body.editing-loop .controller,body.editing-loop .looper-dock{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink),0 4px 15px #353d3008}@media(prefers-reduced-motion:reduce){.looper-row,#looper-arm,#looper-record,.stage,.play-controls,.keyboard-hint,.playing-readout,.controller,.looper-dock,.sound-panel:before,.edit-tag,body.editing-loop .edit-tag{transition:none}}.gpu-note{position:fixed;left:50%;bottom:16px;transform:translate(-50%);z-index:30;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);margin:0;padding:8px 8px 8px 16px;border-radius:var(--r-m);background:var(--ink);color:var(--cloud);font-size:12px;line-height:1.5;box-shadow:0 10px 30px #2429232a}.gpu-note button{flex:none;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:#ffffff1f;color:var(--cloud);font-size:16px;line-height:1}.gpu-note button:hover:not(:disabled){background:#fff3}.gpu-note button:focus-visible{outline-color:var(--cloud)}