/* Signal scope: an oscilloscope whose knob sums harmonics into a square wave, zooms into one pulse,
   and lets that pulse become a screen. Built only from the site's tokens: --surface, --sunk, --line,
   --fg, --muted, --accent, --r, --f-body, --f-mono, plus the pastel fills of the previous hero drawing. */
.sg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.sg-scope{position:relative;aspect-ratio:16/10;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) - 4px);overflow:hidden;container-type:inline-size}
.sg-scope canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sg-ro{position:absolute;left:12px;right:12px;display:flex;justify-content:space-between;gap:8px;pointer-events:none;
  font:400 clamp(9px,1.7cqw,11.5px)/1.2 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.sg-ro.top{top:10px}.sg-ro.bot{bottom:10px}
.sg-ro .sg-ch{color:var(--accent)}
.sg-ro .sg-terms{text-transform:none} /* f, 3f, 5f are frequencies; keep them lowercase */

.sg-ui{position:absolute;left:18%;right:18%;top:15%;bottom:15%;pointer-events:none}
.sg-ui > *{position:absolute;opacity:0;transform:translateY(5px) scale(.97);transition:opacity .35s ease, transform .35s ease}
.sg-ui > .on{opacity:1;transform:none}
.sg-ui .sg-bg{inset:2px;background:var(--surface);transform:none}
.sg-ui .sg-dots{left:4.5%;top:5.5%;display:flex;gap:1.1cqw}
.sg-ui .sg-dots i{width:1.4cqw;height:1.4cqw;border-radius:50%;display:block}
.sg-ui .sg-dots i:nth-child(1){background:#ffc9df}
.sg-ui .sg-dots i:nth-child(2){background:#ffe89a}
.sg-ui .sg-dots i:nth-child(3){background:#d9ccff}
.sg-ui .sg-rule{left:2px;right:2px;top:14%;height:1px;background:var(--line)}
.sg-ui .sg-side{left:4.5%;top:21%;width:18%;bottom:6%;border-radius:1.4cqw;background:#ece6ff}
.sg-ui .sg-side::before,.sg-ui .sg-side::after{content:"";position:absolute;left:14%;height:.9cqw;border-radius:1cqw;background:var(--line)}
.sg-ui .sg-side::before{top:9%;width:66%}.sg-ui .sg-side::after{top:17%;width:50%}
.sg-ui .sg-ttl{left:29%;top:22%;width:38%;height:2.2cqw;border-radius:2cqw;background:var(--fg)}
.sg-ui .sg-l1{left:29%;top:33%;width:62%;height:1.1cqw;border-radius:1cqw;background:var(--line)}
.sg-ui .sg-l2{left:29%;top:39%;width:50%;height:1.1cqw;border-radius:1cqw;background:var(--line)}
.sg-ui .sg-c1{left:29%;top:48%;width:31%;height:26%;border-radius:1.4cqw;background:#fff4c7;border:1px solid var(--ab-ink-line,#c9cdd6)}
.sg-ui .sg-c2{left:63%;top:48%;width:31%;height:26%;border-radius:1.4cqw;background:var(--surface);border:1px solid var(--ab-ink-line,#c9cdd6)}
.sg-ui .sg-btn{left:29%;top:81%;width:25%;height:9%;border-radius:999px;background:var(--accent)}
.sg-ui .sg-cur{left:50%;top:84%;width:3.2cqw}
.sg-ui .sg-cur path{fill:#e5398f;stroke:var(--surface)}

.sg-strip{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:18px;padding:14px 6px 4px} /* knob on the right */
.sg-dial{position:relative;width:104px;height:104px;flex:none;touch-action:none;user-select:none;cursor:grab}
.sg-dial:active{cursor:grabbing}
.sg-dial svg{position:absolute;inset:0;overflow:visible}
.sg-dial text{font:400 8.5px var(--f-mono);fill:var(--muted);letter-spacing:.04em}
.sg-dial line{stroke:var(--ab-ink-line,#c9cdd6)}
.sg-dial .sg-arc{stroke:var(--accent);fill:none;stroke-width:2.5;stroke-linecap:round}
.sg-knob{position:absolute;inset:20px;border-radius:50%;background:var(--surface);border:1.5px solid var(--fg);cursor:grab}
.sg-knob:active{cursor:grabbing}
.sg-knob:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.sg-knob .sg-notch{position:absolute;left:50%;top:5px;width:3px;height:14px;margin-left:-1.5px;border-radius:2px;background:var(--accent)}
.sg-meta{display:grid;gap:6px;min-width:0}
.sg-meta .sg-hint{font:400 12px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.sg-meta .sg-btns{display:flex;gap:16px}
.sg-meta button{font:400 12px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--fg);background:none;border:0;padding:2px 0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ab-ink-line,#c9cdd6)}
.sg-meta button:hover{text-decoration-color:var(--accent)}
.sg-meta button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.sg-ui > *{transition:none}}