@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
:root{--paper:#F7F6F1;--ink:#111418;--muted:#5A5F66;--red:#C8321E;font-family:'BIZ UDPGothic','Hiragino Sans','Yu Gothic UI',sans-serif;font-size:14px;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0;background-color:var(--paper);background-image:linear-gradient(rgba(17,20,24,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(17,20,24,.12) 1px,transparent 1px),linear-gradient(rgba(17,20,24,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(17,20,24,.06) 1px,transparent 1px);background-size:40px 40px,40px 40px,8px 8px,8px 8px}
.mono,input[type=number],input[type=range],output,pre,.scale-labels{font-family:'IBM Plex Mono',monospace;font-weight:400;font-variant-numeric:tabular-nums}button,input,select{font:inherit;color:inherit}button,.file{background:var(--paper);border:1px solid var(--ink);border-radius:1px;min-height:44px;padding:10px 13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px}button:hover,.file:hover{text-decoration:underline;text-underline-offset:4px}button:disabled,button[aria-disabled=true]{color:var(--muted);cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,pre:focus-visible{outline:2px solid var(--ink);outline-offset:3px}button.primary{background:var(--red);border-color:var(--red);color:var(--paper);font-weight:600}button.primary[aria-disabled=true]{background:var(--paper);color:var(--red)}button.primary:hover{outline:1px solid var(--red);outline-offset:3px;text-decoration:none}strong,h1,h2,h3{font-weight:600}h1,h2,h3,p{margin-top:0}h2{font-size:15px}h3{font-size:14px}p{line-height:1.75}.muted{color:var(--muted);font-size:12px}a{color:var(--ink);text-underline-offset:4px}.page-header{margin:0 24px;min-height:68px;border-bottom:1px solid var(--ink);display:flex;align-items:center;gap:20px;background:var(--paper);font-size:13px}.brand{font-size:20px;font-weight:600;text-decoration:none}.header-rule{height:22px;border-left:1px solid var(--ink)}.page-header>button{margin-left:auto}.drawing{max-width:1800px;padding:28px 24px 24px;margin:auto}.drawing-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.sheet-number{font-size:12px;color:var(--muted);margin-bottom:8px}h1{font-size:30px;font-weight:500;margin:0}.drawing-heading>p{font-size:13px;color:var(--muted);margin:0}.workbench{display:grid;grid-template-columns:232px minmax(0,1fr);gap:32px;align-items:start}.bom-panel{background:var(--paper);border:1px solid var(--ink);padding:0}.panel-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 14px;border-bottom:1px solid var(--ink);font-size:12px}.panel-caption h2{margin:0}#capacity{color:var(--red);font-size:13px}.bom-panel details>summary{font-size:13px;border-bottom:1px solid var(--ink);padding:13px 12px;font-weight:600}.bom-table{width:100%;border-collapse:collapse}.bom-table th{font-size:12px;font-weight:400;color:var(--muted);text-align:left;padding:8px 12px;border-bottom:1px solid var(--muted)}.bom-table td{padding:0;border-bottom:1px solid var(--muted)}.bom-table tr:last-child td{border-bottom:0}.bom-table button{border:0;display:grid;grid-template-columns:24px 34px minmax(0,1fr);width:100%;gap:4px 8px;min-height:72px;padding:12px;text-align:left;justify-content:start}.bom-table button .symbol{grid-row:1/3;grid-column:2;align-self:center}.bom-table button .item-number{grid-row:1/3;align-self:center;color:var(--muted);font-size:12px}.bom-table button strong{font-size:13px;grid-column:3}.bom-table button .muted{grid-column:3;font-size:12px;line-height:1.5}.bom-table .template-row button{grid-template-columns:24px minmax(0,1fr)}.bom-table .template-row button strong,.bom-table .template-row button .muted{grid-column:2}.bom-panel .bom-note{font-size:12px;color:var(--muted);margin:0;padding:12px;border-top:1px solid var(--muted)}.symbol svg{display:block;width:100%;height:auto}.symbol .axis{stroke:var(--muted);stroke-width:1}.editor{min-width:0}.diagram-toolbar{display:flex;align-items:center;gap:16px;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);padding:12px 0;background:var(--paper)}.diagram-toolbar h2{margin:0}.diagram-toolbar #count{font-size:12px;color:var(--muted)}.history-actions{display:flex;gap:8px;margin-left:auto}.history-actions button{min-height:36px;padding:7px 10px;font-size:12px}.diagram{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:24px;min-height:280px;padding:32px 0 16px}.wires{position:absolute;inset:0;overflow:visible;width:100%;height:100%;pointer-events:none;stroke:var(--ink);color:var(--ink);stroke-width:1.25;fill:none}.wire-draw{stroke-dasharray:2000;animation:wire-in 200ms linear}.terminal{background:var(--paper);position:relative;z-index:1;text-align:center;align-self:start;font-size:12px;margin-top:90px}.terminal-symbol{display:block;height:26px}.terminal svg{display:block;width:34px;height:28px}#terminalOut{grid-column:2;justify-self:end;display:flex;align-items:center;gap:4px;margin:0}#chain{display:flex;align-items:start;gap:32px 28px;flex-wrap:wrap;position:relative;min-width:0;min-height:220px}.effect{flex:1 1 208px;max-width:260px;min-width:208px;background:var(--paper);border:1px solid var(--ink);border-radius:1px;position:relative;z-index:1;padding:12px;scroll-margin:24px 0 90px}.effect.is-selected{outline:1px solid var(--red);outline-offset:5px}.effect.is-off{border-style:dashed}.effect:focus{outline:1px solid var(--red);outline-offset:5px}.effect-head{display:flex;align-items:center;gap:8px;min-height:30px}.effect-head h3{font-size:14px;margin:0;line-height:1.4;min-width:0;overflow-wrap:anywhere}.effect-head .toggle{flex-shrink:0;margin-left:auto}.block-number{font-size:12px;color:var(--muted)}.effect-symbol{width:90px;height:54px;margin:14px auto 10px}.toggle{padding:0 6px;min-height:36px;min-width:80px;border:0;font-size:12px}.toggle svg{width:49px;height:28px}.toggle-label{font-family:'IBM Plex Mono',monospace}.block-actions{display:flex;align-items:center;gap:4px;justify-content:flex-end;border-bottom:1px solid var(--muted);padding-bottom:10px;margin-bottom:8px}.block-actions button{padding:0;min-width:32px;min-height:32px}.drag-handle{margin-right:auto;cursor:grab;color:var(--muted)}.control{display:grid;grid-template-rows:26px 88px 52px;justify-items:center;align-items:center;min-width:0;gap:0;padding:6px 0 8px}.controls-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.controls-grid>.control:last-child:nth-child(odd){grid-column:1/-1}.control>label{font-size:12px;color:var(--muted);text-align:center;min-height:22px}.knob{position:relative;width:82px;height:82px}.knob svg{display:block;width:82px;height:82px}.knob input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ns-resize;touch-action:none}.knob:focus-within{outline:1px solid var(--ink);outline-offset:-2px}.parameter-value{display:flex;justify-content:center;align-items:center;gap:4px;max-width:100%;min-width:0;min-height:52px;padding:8px 2px 0;font-size:13px}.parameter-value input[type=number]{font-size:13px;border:0;border-bottom:1px solid var(--muted);width:67px;min-width:0;min-height:44px;background:var(--paper);text-align:right;appearance:textfield;border-radius:0;padding:3px}.parameter-value input::-webkit-inner-spin-button,.parameter-value input::-webkit-outer-spin-button{appearance:none;margin:0}.dimension{border-top:1px solid var(--muted);position:relative;display:flex;align-items:center;padding:8px 2px 0;margin-top:0}.dimension:before,.dimension:after{content:'';position:absolute;top:-5px;height:9px;border-left:1px solid var(--muted)}.dimension:before{left:0}.dimension:after{right:0}.dimension-arrow{color:var(--muted);font-size:12px}.effect-spec{border-top:1px solid var(--muted);margin-top:8px}.effect-spec summary{font-size:12px;color:var(--muted);min-height:32px;padding:8px 0}.effect-spec p{font-size:12px;margin:0 0 8px;color:var(--muted)}.port{position:absolute;width:6px;height:6px;border:1px solid var(--ink);border-radius:50%;top:103px;background:var(--paper)}.port-in{left:-4px}.port-out{right:-4px}.empty{align-self:center;border:1px dashed var(--muted);width:100%;min-height:176px;background:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:26px;text-align:center}.empty strong{font-size:16px;font-weight:500}.empty p{font-size:12px;color:var(--muted);margin:10px 0 0}.diagram-bottom{border-top:1px solid var(--muted);display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;margin-bottom:28px}.diagram-bottom p{font-size:12px;color:var(--muted);margin:0}.lower-drawing{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,42%);gap:32px;align-items:start}.audition,.title-block{border:1px solid var(--ink);background:var(--paper);min-width:0}.audition{padding:0 16px 16px}.audition>.panel-caption{margin:0 -16px 16px}.trial-lead{font-size:13px}.audio-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.file{position:relative;overflow:hidden}.file input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.file:focus-within{outline:2px solid var(--ink);outline-offset:3px}.file:has(input:disabled){color:var(--muted);cursor:default}audio{display:none}.transport{display:flex;align-items:center;gap:8px;margin:14px 0}.transport input{min-width:0;width:100%;accent-color:var(--ink);height:44px;background:var(--paper)}.transport output{font-size:12px;white-space:nowrap}.check{display:flex;align-items:center;min-height:44px;font-size:13px;gap:8px}.check input{appearance:none;width:18px;height:18px;border:1px solid var(--ink);background:var(--paper);border-radius:0}.check input:checked{background:var(--ink)}.scale-heading{display:flex;justify-content:space-between;gap:8px;margin:18px 0 4px;font-size:12px}#peakScale{display:block;width:100%;overflow:visible}.scale-base,.scale-ticks{stroke:var(--muted);stroke-width:1;fill:none}#peakFill{fill:var(--ink)}#clipFill{fill:var(--red)}.zero-line{stroke:var(--red);stroke-width:1.5}.scale-labels{font-size:12px;fill:var(--muted);text-anchor:middle}.scale-labels text:first-child{text-anchor:start}.scale-labels text:last-child{text-anchor:end}.clipped{color:var(--red)}.title-table{width:100%;border-collapse:collapse;table-layout:fixed}.title-table th,.title-table td{border-bottom:1px solid var(--ink);padding:8px 12px;text-align:left;font-size:13px;vertical-align:top}.title-table th{border-right:1px solid var(--ink);width:74px;font-weight:400;color:var(--muted);padding-top:17px}.title-table td{height:44px}.title-table td.mono{padding-top:14px}.title-table input{background:var(--paper);border:1px solid var(--paper);border-bottom-color:var(--muted);border-radius:0;width:100%;min-height:38px;padding:5px 0;font-size:14px}.title-table input[aria-invalid=true]{border:1px solid var(--red);padding:5px}.title-block>p,.title-block>button,.title-block>details,.project-files{margin:12px;width:calc(100% - 24px)}.title-block>p{font-size:12px}.wide{width:100%}.title-block>.primary{font-size:14px}.error{color:var(--red);font-size:12px;line-height:1.7;overflow-wrap:anywhere;margin:6px 0 0}.error:empty{margin:0}.title-table td:has(.error:not(:empty)){border-right:1px solid var(--red)}summary{min-height:44px;padding:12px 0;cursor:pointer;font-size:13px}pre{border:1px solid var(--ink);padding:12px;font-size:12px;line-height:1.6;max-height:320px;overflow:auto;background:var(--paper);color:var(--ink)}.project-files{border-top:1px solid var(--ink);padding-top:12px}.project-files h3{font-size:13px;margin-bottom:8px}.project-files button,.project-files .file{padding:8px;font-size:12px}.import{border-top:1px solid var(--ink);font-size:12px}.import p{font-size:12px}.sheet-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink);padding:8px 12px;gap:20px}.sheet{padding:0;background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:1px;max-height:min(90dvh,var(--visual-height,90dvh));overflow-y:auto;overscroll-behavior:contain;width:min(540px,calc(100% - 32px))}.sheet::backdrop,dialog::backdrop{background:var(--paper)}.sheet .title-block,.sheet .bom-panel{border:0}#guide{background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:1px;max-width:520px;width:calc(100% - 32px);padding:24px}#guide h2{font-weight:500;font-size:20px}#guide p{font-size:14px}.mobile-bar{display:none}footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted);border-top:1px solid var(--muted);padding-top:14px;margin-top:36px;background:var(--paper)}footer a{color:var(--muted)}#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--paper);color:var(--ink);font-size:13px;max-width:calc(100% - 24px);pointer-events:none;z-index:20}#toast:not(:empty){border:1px solid var(--ink);padding:12px 16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes wire-in{from{stroke-dashoffset:2000}to{stroke-dashoffset:0}}
@media(max-width:1100px) and (min-width:651px){.workbench{grid-template-columns:200px minmax(0,1fr);gap:24px}.lower-drawing{grid-template-columns:1fr}.effect{max-width:280px}.page-header{gap:12px}.page-header>span:not(.mono):not(.header-rule){font-size:12px}}
@media(max-width:650px){.page-header{margin:0 16px;gap:10px;min-height:60px;flex-wrap:wrap}.brand{font-size:17px}.page-header>.header-rule,.page-header>span:not(.mono){display:none}.page-header button{min-height:36px;padding:6px 10px;font-size:12px}.page-header .mono{font-size:12px}.drawing{padding:22px 16px calc(100px + env(safe-area-inset-bottom))}.drawing-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-bottom:24px;align-items:start}.drawing-heading h1{font-size:clamp(22px,6vw,26px)}.drawing-heading>p{font-size:12px;max-width:112px;margin-top:2px}.sheet-number{font-size:12px}.workbench{display:block}#bomSlot,#exportSlot{display:none}.diagram-toolbar{flex-wrap:wrap;gap:8px}.diagram-toolbar h2{font-size:14px}.diagram-toolbar #count{margin-left:auto}.history-actions{width:100%;margin:4px 0 0}.history-actions button{min-height:44px}.diagram{display:flex;flex-direction:column;align-items:center;gap:28px;padding:22px 0}.terminal{margin:0;display:flex;align-items:center;gap:6px}.terminal svg{width:40px;height:30px}#terminalOut{margin:0}#chain{width:100%;display:flex;flex-direction:column;gap:32px;min-height:180px}.effect{width:100%;max-width:none;min-width:0;padding:16px;flex:none}.effect-head h3{font-size:16px}.effect-symbol{width:100px;height:60px;margin:12px auto}.block-actions button{min-width:44px;min-height:44px}.toggle{min-height:44px}.controls-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}.controls-grid>.control:last-child:nth-child(odd){grid-column:1/-1}.control>label{font-size:13px;line-height:1.4}.parameter-value input[type=number]{font-size:16px;min-height:44px;width:62px}.knob,.knob svg{width:88px;height:88px}.port-in{top:-4px;left:calc(50% - 3px)}.port-out{top:auto;bottom:-4px;left:calc(50% - 3px);right:auto}.effect-spec summary{min-height:44px}.empty{min-height:180px;padding:18px}.empty strong{font-size:15px}.diagram-bottom{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:24px}.diagram-bottom button{width:100%}.diagram-bottom p{font-size:12px}.lower-drawing{display:block}.audition{padding:0 14px 14px}.audition>.panel-caption{margin:0 -14px 14px}.audio-actions button,.audio-actions .file{font-size:12px;padding:8px}.mobile-bar{display:flex;position:fixed;inset:auto 0 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--ink);background:var(--paper);z-index:10}.mobile-bar button{width:100%;min-height:48px}.sheet{position:fixed;inset:auto 0 0;width:100%;max-width:none;max-height:min(calc(100dvh - 16px),var(--visual-height,90dvh));bottom:var(--keyboard-offset,0px);margin:0;border:1px solid var(--ink);border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}.sheet .bom-table button{min-height:70px}.sheet .title-block>.primary{min-height:48px}.sheet .sheet-heading{position:sticky;top:0;background:var(--paper);z-index:2}#toast{bottom:calc(82px + env(safe-area-inset-bottom))}footer{flex-direction:column;line-height:1.6;margin-top:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.drag-handle{order:-1;touch-action:none}
.transport button{flex:0 0 auto;min-width:56px;white-space:nowrap}.transport input[type=range]{appearance:none;flex:1;width:0;height:44px;outline-offset:0}.transport input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--ink)}.transport input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:16px;margin-top:-7px;border:1px solid var(--ink);border-radius:1px;background:var(--paper)}.transport input[type=range]::-moz-range-track{height:1px;background:var(--ink)}.transport input[type=range]::-moz-range-thumb{width:12px;height:16px;border:1px solid var(--ink);border-radius:1px;background:var(--paper)}
.scale-labels{display:none}.scale-numbers{position:relative;height:22px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted)}.scale-numbers span{position:absolute;transform:translateX(-50%)}.scale-numbers span:nth-child(1){left:2%;transform:none}.scale-numbers span:nth-child(2){left:19.455%}.scale-numbers span:nth-child(3){left:36.91%}.scale-numbers span:nth-child(4){left:54.363%}.scale-numbers span:nth-child(5){left:71.818%}.scale-numbers span:nth-child(6){left:89.273%}.scale-numbers span:nth-child(7){right:2%;transform:none}
@media(max-width:650px){.diagram>.terminal{align-self:center}}

/* Template controls stay usable as the library grows. */
.preset-tools{display:grid;gap:8px;padding:12px;border-bottom:1px solid var(--ink)}.preset-tools label{font-size:12px;color:var(--muted)}.preset-tools select{min-height:44px;width:100%;min-width:0;border:1px solid var(--ink);background:var(--paper);border-radius:1px;padding:8px;font-size:14px}.preset-tools p{margin:0;line-height:1.6}.diagram-add-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;flex-shrink:0}.preview-mode{font-size:13px;border-left:2px solid var(--ink);padding:8px 10px;margin:12px 0;line-height:1.6}.bom-table tr[hidden]{display:none}
@media(max-width:650px){.preset-tools select{font-size:16px}.diagram-add-actions{display:grid;grid-template-columns:1fr;width:100%}}
/* Demo choices are lazy-loaded; long credits and filenames wrap on phones. */
.demo-picker{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:14px 0}.demo-picker label{font-size:13px}.demo-picker select{width:100%;min-width:0;min-height:44px;border:1px solid var(--ink);border-radius:1px;background:var(--paper);padding:8px;font-size:14px}.demo-credits{font-size:12px;line-height:1.7;overflow-wrap:anywhere}.demo-credits p{font-size:12px;margin:0 0 8px}.demo-credits ul{padding-left:20px}#audioName{overflow-wrap:anywhere}.audition .audio-actions>*{max-width:100%}body:has(dialog[open]){overflow:hidden}
@media(max-width:650px){.title-table input,.demo-picker select{font-size:16px}.sheet input[type=number]{font-size:16px}.diagram #terminalIn,.diagram #terminalOut{display:block;width:40px;height:30px;gap:0}.diagram>.terminal>.mono{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%)}.diagram>.terminal .terminal-symbol svg{transform:rotate(90deg)}.control>label{max-width:100%}.title-table td,.title-table th{padding-left:10px;padding-right:10px}.title-table th{width:68px}.sheet .sheet-heading{gap:12px}.sheet .sheet-heading>span{min-width:0}.sheet .sheet-heading>button{flex-shrink:0}}
