:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--page-bg:#f8fafc;--page-text:#1e293b;--border:#e2e8f0;--surface:#fff;--surface-muted:#f1f5f9;--surface-elevated:#f8fafc;--control-bg:#f1f5f9;--control-bg-hover:#e2e8f0;--control-border:#cbd5e1;--control-text:#1e293b;--accent:#3b82f6;--accent-hover:#2563eb;--danger:#dc2626;--danger-hover:#b91c1c;--note-bg:#fefce8;--note-border:#eab308;--note-text:#854d0e;--code-bg:#e2e8f0;--config-bg:#f0fdf4;--config-text:#047857;--checker-light:#e2e8f0;--checker-dark:#cbd5e1}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--page-bg:#0f1117;--page-text:#e2e8f0;--border:#2d3748;--surface:#141927;--surface-muted:#1a1f2e;--surface-elevated:#11161f;--control-bg:#2d3748;--control-bg-hover:#3d4a60;--control-border:#4a5568;--control-text:#e2e8f0;--note-bg:#1a1a0a;--note-border:#4a3f00;--note-text:#c8b84a;--code-bg:#2d3748;--config-bg:#11161f;--config-text:#9ad0bf;--checker-light:#334155;--checker-dark:#1e293b}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--page-bg:#0f1117;--page-text:#e2e8f0;--border:#2d3748;--surface:#141927;--surface-muted:#1a1f2e;--surface-elevated:#11161f;--control-bg:#2d3748;--control-bg-hover:#3d4a60;--control-border:#4a5568;--control-text:#e2e8f0;--note-bg:#1a1a0a;--note-border:#4a3f00;--note-text:#c8b84a;--code-bg:#2d3748;--config-bg:#11161f;--config-text:#9ad0bf;--checker-light:#334155;--checker-dark:#1e293b}}body{background:var(--page-bg);max-width:980px;color:var(--page-text);margin:2rem auto;padding:0 1rem;font-family:system-ui,sans-serif;line-height:1.5}.topbar{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 1.5rem;padding-bottom:.75rem;display:flex}.topbar a{color:var(--control-text);border:1px solid var(--control-border);background:var(--control-bg);border-radius:6px;padding:.4rem .8rem;font-size:.9rem;text-decoration:none}.topbar a:hover{background:var(--control-bg-hover)}.topbar a.active{background:var(--accent);border-color:var(--accent);color:#fff}.theme-toggle{min-width:4.5rem;margin-left:auto;font-size:.9rem}.controls{flex-wrap:wrap;align-items:center;gap:.75rem;margin:1rem 0 .75rem;display:flex}.playback-controls{gap:.75rem;margin:0 0 1.25rem;display:flex}.playback-controls button{min-width:7rem;padding:.65rem 1.5rem;font-size:1rem;font-weight:600}.playback-controls #start{background:var(--accent);border-color:var(--accent);color:#fff}.playback-controls #start:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.playback-controls #stop{background:var(--danger);border-color:var(--danger);color:#fff}.playback-controls #stop:hover{background:var(--danger-hover);border-color:var(--danger-hover)}.progress-control{grid-template-columns:auto minmax(180px,1fr) 3rem;align-items:center;gap:.75rem;margin:1rem 0 1.5rem;display:grid}.section-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin:1.5rem 0 .75rem;display:flex}.section-head h2{margin:0;font-size:1.1rem}.section-head .progress-control{margin:0}.spinner-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.prefab-grid{grid-template-columns:minmax(0,1fr)}.prefab-grid .stage{height:680px;min-height:680px}.spinner-card{border:1px solid var(--border);background:var(--surface);border-radius:8px;overflow:hidden}.spinner-card h2{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:.5rem;margin:0;padding:.75rem 1rem;font-size:1rem;display:flex}.card-playback{flex-shrink:0;gap:.35rem;display:flex}.card-playback button{padding:.25rem .55rem;font-size:.8rem;font-weight:600}.card-playback .card-start{background:var(--accent);border-color:var(--accent);color:#fff}.card-playback .card-start:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.card-playback .card-stop{background:var(--danger);border-color:var(--danger);color:#fff}.card-playback .card-stop:hover{background:var(--danger-hover);border-color:var(--danger-hover)}select{background:var(--control-bg);color:var(--control-text);border:1px solid var(--control-border);font:inherit;border-radius:6px;padding:.2rem .4rem;font-size:.85rem}.stage{background:var(--surface-muted);justify-content:center;align-items:center;height:340px;min-height:340px;font-size:1.25rem;display:flex}.stage-hint{color:var(--control-text);opacity:.6;letter-spacing:.02em;font-size:.95rem}.stage.checker-stage{background-color:var(--checker-light);background-image:conic-gradient(var(--checker-dark) 25%, var(--checker-light) 0 50%, var(--checker-dark) 0 75%, var(--checker-light) 0);background-size:32px 32px}.transparency-controls{border-bottom:1px solid var(--border);background:var(--surface-elevated);gap:.5rem;padding:.65rem 1rem;display:grid}.transparency-controls label{grid-template-columns:4rem minmax(0,1fr) 3rem;gap:.65rem;display:grid}.transparency-controls output{text-align:right;font-variant-numeric:tabular-nums}label{align-items:center;gap:.4rem;display:inline-flex}button{cursor:pointer;background:var(--control-bg);color:var(--control-text);border:1px solid var(--control-border);border-radius:6px;padding:.4rem .8rem}button:hover{background:var(--control-bg-hover)}.note{background:var(--note-bg);border:1px solid var(--note-border);color:var(--note-text);border-radius:8px;padding:.75rem 1rem;font-size:.9rem}code{background:var(--code-bg);border-radius:4px;padding:.1rem .3rem}.showcase-title{margin:2rem 0 .5rem;font-size:1.2rem}.card-control{border-bottom:1px solid var(--border);padding:.5rem 1rem;font-size:.85rem}.spinner-card .config{color:var(--config-text);background:var(--config-bg);border-top:1px solid var(--border);white-space:pre-wrap;margin:0;padding:.6rem .85rem;font-size:.72rem;line-height:1.45;overflow-x:auto}.card-progress{border-bottom:1px solid var(--border);align-items:center;gap:.75rem;padding:.6rem 1rem;font-size:.85rem;display:flex}.card-progress input[type=range]{flex:1}.card-progress output{text-align:right;font-variant-numeric:tabular-nums;min-width:3rem}.card-story{color:var(--muted,inherit);opacity:.85;border-top:1px solid var(--border);margin:0;padding:.6rem 1rem;font-size:.82rem}@media (width<=700px){.spinner-grid,.progress-control{grid-template-columns:1fr}.theme-toggle{margin-left:0}.prefab-grid .stage{height:520px;min-height:520px}}.demo-stage{flex-direction:column;gap:.75rem;padding:1rem}.demo-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;font-size:.95rem;display:flex}.demo-stage p{color:var(--control-text);margin:0}select{color:var(--control-text);background:var(--control-bg);border:1px solid var(--control-border);border-radius:6px;padding:.4rem .6rem}.stage:empty:before{content:attr(data-hint);color:var(--control-text);opacity:.6;letter-spacing:.02em;font-size:.95rem}.demo-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;width:100%;display:grid}.demo-columns figure{flex-direction:column;justify-content:flex-end;height:230px;margin:0;display:flex}.demo-columns figcaption{text-align:center;color:var(--control-text);opacity:.75;margin-top:.4rem;font-size:.8rem}