.rsc-card{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--rsc-radius, 16px)}.rsc-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;opacity:var(--rsc-opacity, 0);transition:opacity var(--rsc-duration, .3s) ease;background:radial-gradient(var(--rsc-size, 300px) circle at var(--rsc-x, 50%) var(--rsc-y, 50%),var(--rsc-color, rgba(255, 255, 255, .2)),transparent 80%)}.rsc-border-glow:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;padding:1px;border-radius:inherit;pointer-events:none;opacity:var(--rsc-opacity, 0);transition:opacity var(--rsc-duration, .3s) ease;background:radial-gradient(var(--rsc-size, 300px) circle at var(--rsc-x, 50%) var(--rsc-y, 50%),var(--rsc-color, rgba(255, 255, 255, .5)),transparent 70%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.rsc-content{position:relative;z-index:3}@media (prefers-reduced-motion: reduce){.rsc-overlay,.rsc-border-glow:before{transition:none}}:root{color-scheme:dark;--bg: #0a0a0f;--panel: #101017;--panel-2: #16161f;--line: #232330;--line-2: #34344a;--text: #e5e7eb;--dim: #8b8b99;--faint: #6b6b7d;--accent: #a78bfa;--accent-soft: rgba(167, 139, 250, .16);--mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.page{max-width:1120px;margin:0 auto;padding:44px 24px 72px}.hero{text-align:center;margin-bottom:24px}.hero h1{font-size:32px;margin:0 0 12px;font-family:var(--mono);letter-spacing:-.02em;background:linear-gradient(90deg,#a78bfa,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{color:var(--dim);max-width:60ch;margin:0 auto;line-height:1.6}.install{margin-top:18px}.install code{font-family:var(--mono);font-size:13px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px 14px;display:inline-block}.playground{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"stage code" "controls controls";gap:16px;align-items:start}.stage{grid-area:stage}.code{grid-area:code}.controls{grid-area:controls;margin-top:8px}.stage,.code{position:sticky;top:16px;z-index:3}.stage:before,.code:before{content:"";position:absolute;top:-16px;right:-8px;bottom:-8px;left:-8px;background:var(--bg);z-index:-1}@media (max-width: 880px){.playground{grid-template-columns:1fr;grid-template-areas:"stage" "controls" "code"}.stage{top:0}.stage:before{top:-10px;right:-24px;bottom:-8px;left:-24px}.stage-card{min-height:160px;padding:22px 20px}.code{position:static}.code:before{display:none}}.stage-card{background:var(--panel-2);border:1px solid var(--line);padding:34px 30px;min-height:232px;display:flex;flex-direction:column;justify-content:center;gap:10px}.stage-card h3{margin:0;font-size:18px;font-weight:600}.stage-note{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.9;color:var(--accent);white-space:pre-wrap;word-break:break-word}.controls,.code{background:var(--panel);border:1px solid var(--line);border-radius:10px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line)}.panel-head h2{margin:0;font-size:12.5px;font-weight:600;color:var(--dim)}.head-actions{display:flex;gap:6px}.ghost{background:var(--panel-2);border:1px solid var(--line);color:var(--dim);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer}.ghost:hover:not(:disabled){color:var(--text);border-color:var(--line-2)}.ghost:disabled{opacity:.35;cursor:default}.ghost.on{background:var(--accent-soft);border-color:var(--accent);color:#ded3ff;box-shadow:0 0 12px #a78bfa38}.presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}.preset{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:var(--text);cursor:pointer;text-align:left;transition:box-shadow .12s ease,border-color .12s ease}.preset:hover{border-color:var(--line-2)}.preset strong{font-size:13px;font-weight:600}.preset span{font-size:11px;color:var(--faint)}.preset.on{background:var(--accent-soft);border-color:var(--accent);box-shadow:0 0 0 1px #a78bfa59,0 0 18px #a78bfa38}.preset.on strong{color:#ded3ff}.preset.on span{color:var(--accent)}.preset:active{transform:translateY(1px)}.group{padding:16px 16px 4px;border-bottom:1px solid var(--line)}.group:last-child{border-bottom:none;padding-bottom:16px}.group-title{margin:0 0 12px;font-size:11px;font-weight:600;color:var(--faint);letter-spacing:.04em}.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}.control{background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:12px 13px}.control.is-changed{border-color:#a78bfa80;box-shadow:inset 2px 0 0 var(--accent)}.control-head{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}.control-head label{font-family:var(--mono);font-size:13px}.control-head .value{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--dim)}.control.is-changed .control-head label,.control.is-changed .control-head .value{color:var(--accent)}.reset{background:none;border:none;color:var(--accent);font-size:14px;line-height:1;padding:2px 4px;cursor:pointer;border-radius:4px}.reset:disabled{opacity:0;pointer-events:none}.help{margin:9px 0 0;font-size:11.5px;line-height:1.5;color:var(--faint)}.opts{display:flex;gap:4px}.opt{position:relative;flex:1;background:#10101a;border:1px solid var(--line);border-radius:6px;padding:7px 4px;color:var(--dim);font-family:var(--mono);font-size:12px;cursor:pointer;transition:box-shadow .12s ease,border-color .12s ease,color .12s ease}.opt:hover{color:var(--text);border-color:var(--line-2)}.opt.on{background:var(--accent-soft);border-color:var(--accent);color:#ded3ff;font-weight:600;box-shadow:0 0 0 1px #a78bfa66,0 0 16px #a78bfa47}.opt:active{transform:translateY(1px)}.dot{position:absolute;left:50%;bottom:3px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:currentColor;opacity:.55}input[type=range]{width:100%;margin-top:10px;accent-color:var(--accent);cursor:pointer}.text-input{width:100%;margin-top:8px;background:#10101a;border:1px solid var(--line);border-radius:6px;padding:7px 10px;color:var(--text);font-family:var(--mono);font-size:12px}.swatches{display:flex;gap:5px}.swatch{flex:1;height:28px;border-radius:6px;border:1px solid var(--line);cursor:pointer;padding:0;transition:box-shadow .12s ease,border-color .12s ease}.swatch.on{border-color:#fff;box-shadow:0 0 0 2px #a78bfa73,0 0 16px #a78bfa59}.swatch:active{transform:translateY(1px)}.code pre{margin:0;padding:14px 18px;overflow:auto;max-height:232px;font-family:var(--mono);font-size:13px;line-height:1.7;white-space:pre}.code .tag{color:#7dd3fc}.code .attr{color:var(--dim)}.code .attr.lit{color:var(--accent);font-weight:600}.code .muted{color:#56566a}footer{text-align:center;margin-top:44px}footer a{color:var(--dim);text-decoration:none;font-size:14px}footer a:hover{color:var(--text)}@media (prefers-reduced-motion: reduce){.opt,.preset,.swatch{transition:none}.opt:active,.preset:active,.swatch:active{transform:none}}