:root{color-scheme:dark;--bg:#0b1113;--panel:#111a1d;--edge:#263436;--muted:#8d9d9e;--text:#e1ece8;--mint:#92dbbc;--amber:#dfb976;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button,input[type=range]{touch-action:manipulation}button{cursor:pointer}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--mint);outline-offset:5px}main{max-width:1240px;margin:0 auto;padding:38px 40px 24px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.brand{display:flex;align-items:center;gap:15px}.brand-icon{color:var(--mint);font-size:49px;line-height:1;width:45px}h1{font-size:23px;font-weight:550;letter-spacing:.22em;margin:0}header p{margin:5px 0 0;font:12px var(--mono);letter-spacing:.14em;color:var(--muted)}.edition{display:flex;align-items:center;gap:12px;font:12px var(--mono);letter-spacing:.08em;color:var(--muted)}.status-led{width:6px;height:6px;border-radius:50%;background:#6d8080}.status-led.active{background:var(--mint);box-shadow:0 0 12px #92dbbc60}.instrument{border:1px solid var(--edge);border-radius:12px;overflow:hidden;background:var(--panel);box-shadow:0 18px 80px #0003}.transport{min-height:100px;padding:22px 27px;display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--edge)}.transport-actions{display:flex;gap:12px;align-items:center}.play{border:0;border-radius:6px;background:var(--mint);color:#12241d;display:flex;align-items:center;justify-content:center;gap:12px;font-size:15px;font-weight:650;height:49px;min-width:152px;padding:0 16px}.play:hover{background:#b3f0d3}.play svg{fill:currentColor;width:20px;height:20px}.icon-button{border:1px solid #344346;border-radius:6px;background:transparent;width:44px;height:44px;display:grid;place-items:center;color:var(--muted)}.icon-button:hover{color:var(--text);border-color:#78918b}.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.track-info{display:flex;flex-direction:column;gap:5px;font:12px var(--mono);white-space:nowrap;color:var(--muted)}.track-info strong{font-size:14px;font-weight:500;color:var(--text);letter-spacing:.08em}.track-info b{font-weight:400;padding:0 5px}.tempo{margin-left:auto;border-left:1px solid var(--edge);padding-left:30px}.tempo>span,.master>span{font:12px var(--mono);letter-spacing:.08em;color:var(--muted)}.tempo div{display:flex;gap:7px;align-items:baseline;margin-top:2px}.tempo input{background:none;color:var(--text);border:0;width:58px;font:23px var(--mono);padding:0;appearance:textfield;-moz-appearance:textfield}.tempo input::-webkit-inner-spin-button{appearance:none}.tempo div span{font:12px var(--mono);color:var(--muted)}.master{width:134px}.master>span{display:flex;justify-content:space-between;margin-bottom:12px}output{color:var(--text);font-family:var(--mono);font-size:13px;letter-spacing:0}input[type=range]{display:block;width:100%;height:16px;margin:0;appearance:none;background:transparent;cursor:pointer;accent-color:var(--mint)}input[type=range]::-webkit-slider-runnable-track{height:3px;background:#384846;border-radius:5px}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:17px;margin-top:-7px;background:var(--mint);border-radius:2px;box-shadow:0 0 0 4px #92dbbc09}input[type=range]::-moz-range-track{height:3px;background:#384846}input[type=range]::-moz-range-thumb{border:0;width:12px;height:17px;background:var(--mint);border-radius:2px}.scope-panel{height:322px;background:radial-gradient(ellipse at 50% 120%,#16302c88,transparent 65%),#0c1517;position:relative;overflow:hidden}.scope-top{position:absolute;left:27px;right:27px;top:23px;display:flex;justify-content:space-between;pointer-events:none;z-index:1}.scope-top>span:first-child{display:flex;flex-direction:column;gap:6px}.tiny-label{font:12px var(--mono);letter-spacing:.12em;color:#819995}.scope-top strong{font-size:20px;font-weight:450;letter-spacing:.015em}.position{text-align:right;display:flex;flex-direction:column;gap:4px}.position strong{font:20px var(--mono)}.position span{font:12px var(--mono);letter-spacing:.06em;color:#8baba2}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.scope-bottom{position:absolute;bottom:18px;left:27px;right:27px;display:flex;justify-content:space-between;gap:12px;pointer-events:none;color:#8eaca4;font:12px var(--mono);letter-spacing:.05em}.canvas-dot{display:inline-block;width:5px;height:5px;background:var(--mint);border-radius:50%;margin-right:7px}.divider{margin:0 12px;color:#44635c}.arrangement{height:39px;display:flex;position:relative;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);background:#131f21}.segment{display:grid;place-items:center;font:12px var(--mono);letter-spacing:.1em;color:#95aba7;min-width:0;border-right:1px solid #30413f;z-index:1}.segment:last-child{border:0}#songProgress{position:absolute;inset:0 auto 0 0;background:#92dbbc19;border-right:1px solid var(--mint);width:0;transition:width .15s linear}.lower{display:grid;grid-template-columns:minmax(0,1fr) 265px}.mixer{padding:25px 27px 28px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px}h2{font:12px var(--mono);letter-spacing:.12em;margin:0;font-weight:500}.section-title>span{font:12px var(--mono);letter-spacing:.07em;color:var(--muted)}.channels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}.channel{min-width:0;--color:var(--mint)}.channel button{display:flex;justify-content:space-between;align-items:center;gap:5px;width:100%;border:0;background:none;padding:0 0 12px;color:var(--text);font-size:14px;text-align:left}.channel button::after{content:'';width:6px;height:6px;background:var(--color);border-radius:50%;flex-shrink:0}.channel.muted{opacity:.38}.channel.muted button::after{background:#82908d}.voice-type{font:12px var(--mono);color:var(--muted);letter-spacing:.02em;display:block;min-height:33px}.meter{height:58px;display:flex;align-items:flex-end;gap:3px;margin:5px 0 21px}.meter i{height:100%;background:linear-gradient(to top,#34534b,var(--color));width:100%;transform:scaleY(.045);transform-origin:bottom;opacity:.7;transition:transform .09s}.meter i:nth-child(2){opacity:.45}.channel input[type=range]::-webkit-slider-thumb{background:var(--color);width:12px;height:16px}.channel output{display:block;color:var(--muted);font-size:12px;margin-top:12px}.effects{border-left:1px solid var(--edge);padding:25px 27px 25px;background:#152021}.effects .section-title{margin-bottom:22px}.effect{margin-bottom:22px}.effect:last-child{margin-bottom:0}.effect label{display:flex;justify-content:space-between;font-size:14px;margin-bottom:12px}.endpoints{display:flex;justify-content:space-between;font:12px var(--mono);letter-spacing:.06em;color:#8a9d97;margin-top:5px}footer{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:21px;color:#91a39e;font:12px var(--mono);letter-spacing:.05em}footer>span:last-child{font:13px system-ui;letter-spacing:0}.footer-mark{color:var(--mint);margin-right:12px}#error{color:#ffc393;font-size:14px}button:disabled{opacity:.5;cursor:wait}
@media(min-width:1400px){main{padding-top:60px}.scope-panel{height:365px}}
@media(max-width:1000px){main{padding:26px 24px}.transport{gap:20px}.tempo{padding-left:20px}.master{width:100px}.channels{gap:13px}.lower{grid-template-columns:minmax(0,1fr) 240px}.mixer{padding:24px 22px}.effects{padding:24px 22px}.channel button{font-size:13px}.voice-type{font-size:12px}}
@media(max-width:780px){main{padding:23px 18px}.edition{font-size:12px}h1{font-size:20px}header p{font-size:12px}.transport{padding:20px;flex-wrap:wrap;gap:20px}.transport-actions{flex:1}.track-info{align-items:flex-end}.tempo{margin:0;padding:0;border:0;display:flex;gap:12px;align-items:center}.tempo div{margin:0}.master{width:140px;margin-left:auto}.master>span{margin-bottom:6px}.lower{grid-template-columns:1fr}.effects{border-left:0;border-top:1px solid var(--edge);display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.effects .section-title{grid-column:1/-1;margin:0}.effect{margin:0}.channels{gap:22px}.scope-panel{height:300px}.scope-top{left:20px;right:20px}.scope-bottom{left:20px;right:20px}.segment{font-size:12px;letter-spacing:0}.scope-bottom{font-size:12px}.scope-top strong{font-size:19px}footer>span:first-child{font-size:12px}}
@media(max-width:480px){main{padding:21px 12px}header{margin:0 4px 22px}.brand{gap:12px}.brand-icon{font-size:39px;width:32px}h1{font-size:18px;letter-spacing:.17em}header p{font-size:12px;letter-spacing:.12em}.edition{font-size:12px;gap:6px}.transport{padding:16px;gap:17px}.play{min-width:127px;height:45px;font-size:14px}.transport-actions{gap:12px}.icon-button{width:36px;height:39px}.track-info{font-size:12px}.track-info strong{font-size:12px}.tempo>span{font-size:12px}.tempo input{font-size:21px;width:52px}.master{width:132px}.scope-panel{height:283px}.scope-top{top:18px;left:16px;right:16px}.scope-bottom{left:16px;right:16px;bottom:15px;font-size:12px}.desktop-hint{display:none}.divider{margin:0 4px}.segment{font-size:12px}.arrangement{height:32px}.channels{grid-template-columns:repeat(3,1fr);gap:24px}.mixer{padding:23px 20px}.section-title{margin-bottom:20px}.channel button{font-size:15px}.voice-type{min-height:18px;font-size:12px}.meter{height:34px;margin:5px 0 14px}.channel output{margin-top:12px}.effects{padding:22px 20px;gap:18px}.effect label{font-size:13px;flex-direction:column;gap:4px}.effect output{font-size:12px}.endpoints{font-size:12px}.endpoints span:last-child{display:none}footer{margin:18px 4px;align-items:flex-start;flex-direction:column;gap:12px}.tiny-label{font-size:12px}}
@media(prefers-reduced-motion:reduce){#songProgress,.meter i{transition:none}}

@media(max-width:480px){.edition{display:none}.segment span{display:none}.segment::after{content:"";width:3px;height:3px;border-radius:50%;background:#739489}.scope-bottom{font-size:12px;flex-wrap:wrap;gap:5px}.scope-bottom>span:last-child{font-size:12px}.endpoints{font-size:12px}.effects{column-gap:14px}.effect label{font-size:14px}.brand p{font-size:12px;letter-spacing:.025em}.voice-type{font-size:12px}.channels{column-gap:17px}.section-title>span{font-size:12px;letter-spacing:0}.scope-top .position span{font-size:12px}}