.sp-canvas{display:block;width:100%;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}
[data-demo=spring-tuner] .sp-canvas{cursor:default;touch-action:auto}
.sp-sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem;margin-bottom:.9rem}
.sp-sliders label{display:grid;grid-template-columns:1fr auto;gap:.25rem .5rem;align-items:center}
.sp-sliders input{grid-column:1/-1;width:100%;accent-color:var(--redline)}
.sp-sliders output{color:var(--muted);font-variant-numeric:tabular-nums}
.sp-play{display:flex;align-items:center;gap:.75rem;margin-top:.75rem}
.sp-track{position:relative;flex:1;height:16px;border-bottom:1px dashed var(--rule)}
.sp-track i{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--fg)}
.sp-track::after{content:"";position:absolute;left:calc((100% - 16px) * .55);top:0;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--redline);box-sizing:border-box}
.demo-readout.sp-code{margin-top:.35rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;overflow-wrap:anywhere}
@media (max-width:480px){.sp-sliders{grid-template-columns:minmax(0,1fr)}}