/* Sandbox-only styles. Reuse the lesson palette and type tokens. */
.sandbox-wrap { --wrap: 1240px; }
.sandbox-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:24px 0; }
.sandbox-heading h1 { font-size:clamp(28px,4vw,42px); line-height:1.2; margin:8px 0; }
.sandbox-heading p { margin:0; max-width:64ch; }
.sandbox-heading > a { flex-shrink:0; font-size:13px; }
.sandbox-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:30px 0; }
.sandbox-card { border:2px solid var(--rule-strong); background:var(--surface); box-shadow:5px 5px 0 var(--sunk); border-radius:12px; padding:28px; text-decoration:none; }
.sandbox-card h2 { margin:16px 0 10px; }
.sandbox-card p { color:var(--text); margin:0; }
.sandbox-card:hover { transform:translateY(-2px); }
.sandbox-storage { border:1px solid var(--rule); border-radius:8px; padding:14px; background:var(--surface); margin-bottom:24px; }
.sandbox-save-row { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin:4px 0 12px; }
.sandbox-save-row label { display:flex; flex-direction:column; font:12px var(--mono); gap:5px; flex:1 1 170px; max-width:250px; }
.sandbox-wrap input,.sandbox-wrap select,.sandbox-wrap textarea { font:inherit; min-width:0; color:var(--ink); background:var(--surface); border:1px solid var(--rule); border-radius:5px; padding:8px; }
.sandbox-save-row select { flex:1 1 210px; max-width:330px; }
.sandbox-storage details { font-size:13px; }
.sandbox-storage summary { cursor:pointer; padding:5px 0; color:var(--ink); }
.sandbox-storage details[open] summary { margin-bottom:10px; }
.sandbox-save-status,.sandbox-note { font-size:13px; margin:8px 0 0; }
.sandbox-save-status[data-error] { color:var(--bad); }
#sandbox-share-link { width:100%; font:11px var(--mono); }
[data-sandbox-root] { min-width:0; }
.sandbox-wrap [hidden] { display:none !important; }
.sandbox-wrap .btn { min-height:38px; }
@media(max-width:640px) {
  .sandbox-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .sandbox-cards { grid-template-columns:1fr; }
  .sandbox-storage { padding:10px; }
  .sandbox-save-row { align-items:stretch; }
  .sandbox-save-row label { max-width:none; flex-basis:100%; }
  .sandbox-save-row select { max-width:none; flex-basis:100%; }
  .sandbox-save-row .btn { flex:1 1 140px; }
}
@media(prefers-reduced-motion:reduce) {
  .sandbox-wrap *, .sandbox-wrap *::before,.sandbox-wrap *::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}