/* Algorithmics source: this stylesheet belongs to the reusable scaffold or its named study. */
/* Shared shell for every adjustable sketch. Artwork-specific CSS stays beside its study. */
:root{--control-dock-width:245px;--control-dock-gap:40px}
#controls{position:sticky;top:18px;align-self:start}
.workspace,.work{display:grid;grid-template-columns:var(--control-dock-width) minmax(0,1fr);gap:var(--control-dock-gap);align-items:start}
/* Standard parameter dock: every study uses these controls unless an artwork needs a documented extension. */
#controls,#controls *{font-family:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Monaco,monospace;font-size:12px}
#controls fieldset{margin:0;padding:16px;border:1px solid var(--line);background:var(--panel)}
#controls legend{padding:0 7px;letter-spacing:.08em;text-transform:uppercase}
#controls label{display:flex;justify-content:space-between;gap:8px;margin:16px 0 6px;color:var(--ink)}
#controls label:first-of-type{margin-top:0}
#controls label span,#controls output{color:var(--muted)}
#controls select,#controls input[type="number"]{display:block;width:100%;padding:8px;border:1px solid var(--line);border-radius:0;background:var(--panel);color:var(--ink)}
#controls input[type="range"]{display:block;width:100%;margin:5px 0;accent-color:var(--ink)}
#controls .note{margin:16px 0 8px;color:var(--muted);line-height:1.55}
#controls button{display:block;width:100%;margin-top:8px;padding:9px 8px;border:1px solid var(--ink);border-radius:0;background:var(--ink);color:var(--page);cursor:pointer}
#controls button.secondary{background:var(--panel);color:var(--ink);border-color:var(--line)}
#controls button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:800px){#controls{position:static}.workspace,.work{grid-template-columns:1fr}}