:root{color-scheme:light;--paper:#f2f2eb;--panel:#fbfcf8;--ink:#2a2e29;--muted:#5d6658;--line:#dedfd5;--green:#596c48;--red:#cf443b}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.6 'Segoe UI','Malgun Gothic',sans-serif}button,input,select{font:inherit;accent-color:var(--green)}button,a,input,select{touch-action:manipulation}button,select{background:var(--panel);color:var(--ink);border:1px solid #cdd1c4;border-radius:6px;padding:9px 12px}button{cursor:pointer;font-weight:600}button:hover{background:#e9ecdf}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #347fa0;outline-offset:3px}::selection{background:#eed6c7}a{color:inherit;text-underline-offset:3px}header{padding:19px 28px;display:flex;align-items:center;gap:18px;background:var(--panel);border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-size:19px;font-weight:750;letter-spacing:-.03em}.divider{color:#a2a996}h1{font-size:17px;margin:0;font-weight:600}.editor{margin-left:auto;font-size:13px}main{max-width:1420px;margin:auto;display:grid;grid-template-columns:260px minmax(0,1fr);min-height:calc(100vh - 145px)}aside{padding:26px 22px;background:var(--panel);border-right:1px solid var(--line)}h2{font-size:16px;letter-spacing:-.02em;margin:0 0 8px}.intro{font-size:13px;color:var(--muted);margin:0 0 26px}fieldset{border:0;border-top:1px solid var(--line);margin:0 0 24px;padding:16px 0 0}legend{padding:0 8px 0 0;font-weight:650;font-size:13px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.actions button{font-size:13px}.actions button[aria-pressed=true]{color:#fff;background:var(--green);border-color:var(--green)}label{display:block;font-size:13px;margin:0 0 12px}select{display:block;width:100%;margin-top:5px}input[type=range]{width:100%;margin:0 0 16px;cursor:pointer}input[type=color]{display:block;width:100%;height:34px;background:transparent;border:1px solid var(--line);border-radius:5px;margin-top:5px;padding:3px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}output{font-variant-numeric:tabular-nums}label output{float:right;color:var(--muted)}.hint{font-size:11px;color:var(--muted);margin:0}.workspace{padding:26px 30px 20px;min-width:0}.stage-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;gap:10px}.stage-heading h2{font-size:21px;margin:0}.stage-heading span{font-size:12px;color:var(--muted)}.canvas-wrap{position:relative;background:white;box-shadow:0 8px 24px #3138240c}canvas{display:block;width:100%;aspect-ratio:8/5}.canvas-note{position:absolute;left:16px;top:12px;font-size:11px;background:#ffffffdf;padding:3px 7px;color:#4b5346;border-radius:3px}.transport{display:flex;align-items:center;gap:10px;margin:20px 0 12px}.primary{background:var(--ink);border-color:var(--ink);color:white}.primary:hover{background:#434d3c}.loop{display:flex;align-items:center;gap:4px;margin:0 0 0 5px;white-space:nowrap}.transport output{margin-left:auto;font-size:12px;white-space:nowrap}.workspace #seek{margin:0}.ruler{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:28px}.export{border-top:1px solid var(--line);padding-top:22px;display:flex;align-items:center;gap:16px;justify-content:space-between}.export p{font-size:12px;color:var(--muted);margin:0}.export-buttons{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}#status{font-size:12px;color:var(--muted);min-height:20px;margin-bottom:0}footer{border-top:1px solid var(--line);padding:18px 28px;display:flex;justify-content:space-between;gap:25px;font-size:12px;color:var(--muted)}details{max-width:780px}summary{cursor:pointer;color:var(--ink)}footer>span{white-space:nowrap}::-webkit-scrollbar{width:9px}::-webkit-scrollbar-thumb{background:#c3c9b9;border:2px solid var(--panel);border-radius:8px}@media(min-width:1200px){.canvas-wrap{max-height:62vh;aspect-ratio:8/5;margin:auto;width:auto}canvas{height:100%;width:100%}}@media(max-width:800px){header{padding:16px;gap:10px}.brand{font-size:15px}h1{font-size:14px}.editor{font-size:11px}main{display:flex;flex-direction:column}.workspace{order:-1;padding:20px 16px}aside{border-right:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;padding:24px 16px}aside>h2{grid-column:1/-1}.intro{grid-column:1/-1;margin:0 0 12px}fieldset{margin:0}.export{display:block}.export-buttons{margin-top:14px}.stage-heading span{font-size:10px}.transport{gap:7px}.transport button{padding:8px}.loop{font-size:12px}footer{padding:18px 16px;display:block}footer>span{display:block;margin-top:12px}.ruler{margin-bottom:20px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}