.analytics-sandbox{display:flex;flex-direction:column;gap:var(--space-4);padding-block:var(--space-4) var(--space-5)}.sandbox-header{display:flex;flex-direction:column;gap:var(--space-2);padding-bottom:var(--space-3)}.sandbox-header h1{font-size:clamp(2.25rem,3vw,3rem);letter-spacing:.08em;text-transform:uppercase;margin:0}.supertitle{font-size:var(--text-14);letter-spacing:.16em;text-transform:uppercase;color:var(--color-muted);margin:0}.intro{max-width:72ch}.sandbox-meta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:0;padding:0}.sandbox-meta div{display:grid;gap:var(--space-1)}.sandbox-meta dt{font-size:var(--text-12);letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);margin:0}.sandbox-meta dd{margin:0;font-size:var(--text-16)}.sandbox-grid{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}.sandbox-panel,.sandbox-console,.sandbox-snippet,.sandbox-appendix{display:flex;flex-direction:column;gap:var(--space-3)}.sandbox-panel h2,.sandbox-console h2,.sandbox-snippet h2,.sandbox-appendix h2{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:.06em;text-transform:uppercase;margin:0}.sandbox-panel>p,.sandbox-console>p,.sandbox-snippet>p,.sandbox-appendix>p{margin:0;color:var(--color-muted)}.sandbox-card,.sandbox-callout{border:1px solid var(--border-soft);border-radius:var(--radius-2);background:var(--surface-raised);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);box-shadow:0 12px 28px #1818180f}.sandbox-card header{display:flex;flex-direction:column;gap:var(--space-1)}.sandbox-card h3{margin:0;text-transform:uppercase;letter-spacing:.08em}.sandbox-card__tag{font-size:var(--text-12);letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);margin:0}.sandbox-card__meta{display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin:0}.sandbox-card__meta div{display:grid;gap:.25rem}.sandbox-card__meta dt{font-size:var(--text-12);text-transform:uppercase;letter-spacing:.08em;color:var(--color-muted);margin:0}.sandbox-card__meta dd{margin:0;font-family:var(--font-mono);font-size:var(--text-14)}.sandbox-action,.sandbox-link{align-self:flex-start;padding:var(--space-1) var(--space-2);border:1px solid var(--color-text);border-radius:var(--radius-2);background:transparent;color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-14);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background var(--transition-base),color var(--transition-base)}.sandbox-action:hover,.sandbox-action:focus-visible,.sandbox-link:hover,.sandbox-link:focus-visible{background:var(--color-text);color:var(--color-bg)}.sandbox-form{display:flex;flex-direction:column;gap:var(--space-2)}.sandbox-form label{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;font-size:var(--text-12)}.sandbox-form input,.sandbox-form select,.sandbox-form textarea{padding:var(--space-1);border:1px solid var(--border-soft);border-radius:var(--radius-1);font-size:var(--text-16);font-family:var(--font-sans);background:var(--surface-raised)}.sandbox-console{position:sticky;top:clamp(1.5rem,4vw,3rem);align-self:flex-start;border:1px solid var(--border-soft);border-radius:var(--radius-2);background:var(--surface-panel);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);box-shadow:var(--shadow-soft)}.sandbox-console__toolbar{display:flex;flex-wrap:wrap;gap:var(--space-1);align-items:center}.console-control{border:1px solid var(--border-soft);border-radius:var(--radius-1);background:var(--surface-raised);color:var(--color-text);font-family:var(--font-mono);font-size:var(--text-12);letter-spacing:.12em;text-transform:uppercase;padding:var(--space-1) var(--space-2);cursor:pointer;transition:background var(--transition-base),color var(--transition-base),border-color var(--transition-base)}.console-control:hover,.console-control:focus-visible{background:var(--color-text);color:var(--color-bg);border-color:var(--color-text)}.console-control[disabled]{opacity:.45;cursor:not-allowed}.console-stream{display:grid;gap:var(--space-2);margin:0;padding-block:var(--space-2);border-top:1px solid var(--border-faint);max-height:calc(100vh - clamp(6rem,18vw,12rem));overflow-y:auto}.console-empty{margin:0;color:var(--color-muted);font-size:var(--text-14)}.console-entry{display:grid;gap:var(--space-1);padding:var(--space-2);border:1px solid var(--border-faint);border-radius:var(--radius-2);background:var(--surface-raised);box-shadow:0 8px 18px #1818180a}.console-entry+.console-entry{margin-top:var(--space-1)}.console-entry--highlight{border-left:3px solid var(--color-accent);background:color-mix(in srgb,var(--color-accent) 8%,var(--surface-raised))}.console-entry--notice{border-left:3px solid var(--mix-accent-rule-60);background:color-mix(in srgb,var(--color-accent) 6%,var(--surface-panel))}.console-entry__meta{display:flex;flex-wrap:wrap;gap:var(--space-1);align-items:center;font-size:var(--text-12);color:var(--color-muted)}.console-entry__tag{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;font-size:var(--text-12);padding:0 var(--space-1);border-radius:var(--radius-1);background:var(--surface-tint);color:var(--color-text)}.console-entry__label{font-family:var(--font-mono);font-size:var(--text-12);text-transform:uppercase;letter-spacing:.12em;color:var(--color-muted)}.console-entry__value{margin:0;font-family:var(--font-mono);font-size:var(--text-14);word-break:break-word}.console-entry__duration{font-size:var(--text-12);color:var(--color-muted)}.sandbox-snippet pre,.sandbox-appendix pre{margin:0;padding:var(--space-2);background:var(--surface-panel);border-radius:var(--radius-1);overflow-x:auto}.sandbox-appendix-list{margin:0;padding-left:var(--space-3);display:grid;gap:var(--space-1)}.sandbox-appendix-list strong{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:var(--text-12)}@media (max-width: 62rem){.sandbox-grid{grid-template-columns:1fr}.sandbox-console{position:static;box-shadow:none}.console-stream{max-height:none}}@media (max-width: 40rem){.analytics-sandbox{gap:var(--space-3)}.sandbox-card,.sandbox-callout{padding:var(--space-2)}}
