.sandbox{border:1px solid color-mix(in oklab, var(--muted) 30%, transparent);border-radius:1rem;padding:.875rem}@media (width>=640px){.sandbox{padding:1.5rem}}.sandbox-head{justify-content:space-between;align-items:flex-start;gap:.75rem;display:flex}.sandbox-head>div{min-width:0}.sandbox-title{font-size:.95rem;font-weight:600}@media (width>=640px){.sandbox-title{font-size:1rem}}.sandbox-formula{color:var(--muted);margin-top:.25rem;font-size:.7rem;line-height:1.45;display:none}@media (width>=640px){.sandbox-formula{font-size:.75rem;line-height:1.5;display:block}}.sandbox-reset{text-transform:uppercase;letter-spacing:.2em;color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;border:none;flex:none;padding:0;font-size:11px;transition:color .15s}.sandbox-reset:hover{color:var(--accent)}.sandbox-plotbox{background:color-mix(in oklab, var(--muted) 8%, transparent);border-radius:.75rem;margin-top:.75rem;padding:.375rem}@media (width>=640px){.sandbox-plotbox{margin-top:1rem;padding:.5rem}}.sandbox-split{grid-template-columns:1fr;gap:.75rem;display:grid}@media (width>=640px){.sandbox-split{grid-template-columns:1fr 1fr}}.sandbox-canvas{width:100%;aspect-ratio:var(--sb-aspect,16 / 9);max-width:640px;margin:0 auto;display:block}.sandbox-split .sandbox-canvas{max-width:none}.sandbox-knobs{grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.6rem .75rem;margin-top:.75rem;font-family:ui-monospace,monospace;font-size:.85rem;display:grid}@media (width>=640px){.sandbox-knobs{gap:.75rem 1rem;margin-top:1rem;font-size:.875rem}}.sandbox-knob{flex-direction:column;gap:.375rem;min-width:0;display:flex}.sandbox-knob-head{justify-content:space-between;align-items:baseline;gap:.5rem;min-width:0;display:flex}.sandbox-knob-head>span:first-child{min-width:0}.sandbox-knob-head>span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums;flex:none}.sandbox-knob-value{color:var(--accent)}.sandbox-knob input[type=range]{accent-color:var(--accent);box-sizing:border-box;width:100%;min-width:0}.sandbox-metrics{border-top:1px dashed color-mix(in oklab, var(--muted) 25%, transparent);grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:.4rem .5rem;margin-top:.75rem;padding-top:.5rem;font-family:ui-monospace,monospace;font-size:.68rem;display:grid}@media (width>=640px){.sandbox-metrics{border-top:none;gap:.5rem .75rem;margin-top:1.25rem;padding-top:0;font-size:.75rem}}.sandbox-metric{flex-direction:column;gap:.1rem;display:flex}.sandbox-metric-label{color:var(--muted)}.sandbox-try{color:var(--muted);margin-top:1.25rem;font-size:.75rem;line-height:1.7}.sandbox-try summary{cursor:pointer;color:var(--fg);list-style:none}.sandbox-try summary::-webkit-details-marker{display:none}.sandbox-try summary:before{content:"▸ ";color:var(--muted);font-size:.7rem;transition:transform .15s;display:inline-block}.sandbox-try[open] summary:before{transform:rotate(90deg)}.sandbox-try ul{flex-direction:column;gap:.25rem;margin-top:.5rem;margin-left:1rem;list-style:outside;display:flex}.sandbox-btn{text-transform:uppercase;letter-spacing:.15em;color:var(--fg);background:color-mix(in oklab, var(--accent) 12%, transparent);border:1px solid color-mix(in oklab, var(--accent) 40%, transparent);cursor:pointer;border-radius:.5rem;padding:.375rem .75rem;font-family:ui-monospace,monospace;font-size:.75rem;transition:background .15s,border-color .15s}.sandbox-btn:hover{background:color-mix(in oklab, var(--accent) 22%, transparent);border-color:var(--accent)}.sandbox-btn:active{transform:translateY(1px)}.scrub{font-variant-numeric:tabular-nums;color:var(--accent);-webkit-user-select:none;user-select:none;cursor:ew-resize;border-bottom:1px dashed color-mix(in oklab, var(--accent) 50%, transparent);padding:0 .1em;font-family:ui-monospace,monospace;line-height:1.2;display:inline-block}.scrub[data-armed=true]{background:color-mix(in oklab, var(--accent) 12%, transparent);touch-action:none;border-bottom-style:solid}.scrub[data-armed=true]:after{content:" ↔";color:var(--muted);font-size:.85em}.sandbox-canvas{touch-action:pan-y}.sandbox-canvas[data-interactive=true]{touch-action:none}.status-pill{letter-spacing:.15em;text-transform:uppercase;border-radius:999px;padding:2px 6px;font-family:ui-monospace,monospace;font-size:10px;display:inline-block}.status-live{border:1px solid color-mix(in oklab, var(--accent) 60%, transparent);color:var(--accent)}.status-wip{border:1px dashed color-mix(in oklab, var(--muted) 70%, transparent);color:var(--muted)}
