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