.page.svelte-333ath{padding:var(--space-xl);max-width:1500px}.back.svelte-333ath{display:inline-flex;align-items:center;gap:6px;margin-bottom:var(--space-md);color:var(--color-text-muted);font-size:.8125rem}.back.svelte-333ath:hover{color:var(--color-accent)}.hero.svelte-333ath{display:flex;justify-content:space-between;gap:var(--space-md);align-items:flex-start;margin-bottom:var(--space-lg)}.eyebrow.svelte-333ath{margin:0 0 6px;color:var(--color-accent);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}h1.svelte-333ath{margin:0 0 var(--space-xs);font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.04em}h2.svelte-333ath{margin:0;font-size:1rem}h3.svelte-333ath{margin:var(--space-sm) 0 var(--space-xs);font-size:.8125rem;color:var(--color-text-muted)}.meta.svelte-333ath{display:flex;flex-wrap:wrap;gap:6px}.meta.svelte-333ath span:where(.svelte-333ath),.meta.svelte-333ath a:where(.svelte-333ath){padding:3px 8px;border-radius:999px;background:var(--color-bg-raised);color:var(--color-text-muted);font-size:.75rem}.meta.svelte-333ath a:where(.svelte-333ath):hover{color:var(--color-accent)}.hero-actions.svelte-333ath{display:flex;gap:var(--space-xs);flex-wrap:wrap}.btn.svelte-333ath,.mini.svelte-333ath,.play.svelte-333ath{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--color-border);background:var(--color-bg-raised);color:var(--color-text-muted);border-radius:var(--radius-md);cursor:pointer}.btn.svelte-333ath{height:36px;padding:0 var(--space-sm);font-size:.8125rem}.mini.svelte-333ath{height:28px;padding:0 8px;font-size:.71875rem}.play.svelte-333ath{width:100%;height:38px;margin-bottom:var(--space-sm);color:var(--color-text)}.btn.svelte-333ath:hover,.mini.svelte-333ath:hover,.play.svelte-333ath:hover{border-color:var(--color-accent);color:var(--color-text)}.layout.svelte-333ath{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-lg);align-items:start}.preview-panel.svelte-333ath,.controls.svelte-333ath,.code-section.svelte-333ath,.related.svelte-333ath{background:var(--color-bg-raised);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-md)}.note.svelte-333ath,.muted.svelte-333ath{color:var(--color-text-muted);font-size:.8125rem;line-height:1.5}.note.svelte-333ath{margin:var(--space-sm) 0 0}.control-header.svelte-333ath{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}.field.svelte-333ath{display:grid;gap:7px;margin-bottom:var(--space-sm);color:var(--color-text-muted);font-size:.75rem}.field.svelte-333ath span:where(.svelte-333ath){display:flex;justify-content:space-between;gap:var(--space-xs);align-items:baseline}.field.svelte-333ath b:where(.svelte-333ath){color:var(--color-text);font-weight:500}.field.svelte-333ath small:where(.svelte-333ath){color:var(--color-text-dim)}.field.disabled.svelte-333ath{opacity:.45}input[type=range].svelte-333ath{width:100%;accent-color:var(--color-accent)}.toggle.svelte-333ath{display:flex;gap:8px;align-items:center;margin:var(--space-sm) 0;color:var(--color-text-muted);font-size:.8125rem}code.svelte-333ath{font-family:var(--font-mono)}.code-section.svelte-333ath{margin-top:var(--space-lg)}.code-section.svelte-333ath h2:where(.svelte-333ath),.related.svelte-333ath h2:where(.svelte-333ath){margin-bottom:var(--space-sm)}pre.svelte-333ath{margin:0;max-height:540px;overflow:auto;padding:var(--space-md);border-radius:var(--radius-md);background:#080a12;border:1px solid rgba(255,255,255,.06);color:#c4d7ff;font-size:.75rem;line-height:1.55;white-space:pre-wrap}.related.svelte-333ath{margin-top:var(--space-lg)}.related-list.svelte-333ath{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-xs)}.related-list.svelte-333ath a:where(.svelte-333ath){display:grid;gap:3px;padding:var(--space-sm);border-radius:var(--radius-md);background:var(--color-bg-overlay);color:var(--color-text)}.related-list.svelte-333ath a:where(.svelte-333ath):hover{color:var(--color-accent)}.related-list.svelte-333ath span:where(.svelte-333ath){color:var(--color-text-muted);font-size:.75rem}@media(max-width:980px){.page.svelte-333ath{padding:var(--space-md)}.hero.svelte-333ath,.layout.svelte-333ath{display:grid;grid-template-columns:1fr}}