@import "https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Spectral:ital,wght@0,400;0,600;1,400&display=swap";:root{--demo-bg-deep:#0f0d0c;--demo-bg-elevated:#1a1715;--demo-ink:#e9e2d8;--demo-ink-muted:#9a9188;--demo-accent:#e07a3a;--demo-accent-soft:#e07a3a2e;--demo-line:#e9e2d81f;--demo-glow:#e07a3a59;--font-ui:"Sora", system-ui, sans-serif;--font-body:"Spectral", "Georgia", serif}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{min-block-size:100vh;font-family:var(--font-ui);color:var(--demo-ink);background-color:var(--demo-bg-deep);background-image:radial-gradient(120% 80% at 10% -20%,#e07a3a24,#0000 55%),radial-gradient(90% 60% at 100% 30%,#785ac814,#0000 50%),radial-gradient(70% 50% at 50% 100%,#3c788c1a,#0000 45%);margin:0;font-size:.9375rem;line-height:1.55}body:before{content:"";pointer-events:none;opacity:.045;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}.demo-wrap{isolation:isolate;z-index:1;max-inline-size:73.75rem;margin:0 auto;padding-block:2.5rem 4rem;padding-inline:1.5rem}.demo-back{letter-spacing:.04em;text-transform:uppercase;color:var(--demo-accent);align-items:center;gap:.35rem;margin-block-end:1.75rem;font-size:.82rem;font-weight:600;text-decoration:none;transition:color .2s,transform .2s;display:inline-flex}.demo-back:hover{color:#f0a070;transform:translate(-.1875rem)}.demo-back:focus-visible{outline:2px solid var(--demo-accent);outline-offset:.25rem}.demo-kicker{letter-spacing:.22em;text-transform:uppercase;color:var(--demo-accent);margin:0 0 .6rem;font-size:.75rem;font-weight:600}.demo-title{font-family:var(--font-ui);letter-spacing:-.03em;max-inline-size:22ch;margin:0 0 .75rem;font-size:clamp(1.85rem,4vw,2.65rem);font-weight:700;line-height:1.12}.demo-lede{max-inline-size:52ch;color:var(--demo-ink-muted);margin:0 0 2rem;font-size:1.02rem;line-height:1.65}.demo-lede a,.demo-foot a{color:var(--demo-accent);border-bottom:1px solid var(--demo-accent-soft);text-decoration:none;transition:color .2s,border-color .2s}.demo-lede a:hover,.demo-foot a:hover{color:#f0a070;border-bottom-color:#f0a07073}.demo-lede a:focus-visible,.demo-foot a:focus-visible{outline:2px solid var(--demo-accent);outline-offset:2px;border-bottom-color:#0000}.demo-status{min-block-size:1.5rem;color:var(--demo-ink-muted);margin-block-end:1.25rem;font-size:.88rem}.demo-runtime-notice{color:#e9e2d8db;letter-spacing:.01em;background:linear-gradient(90deg,#e07a3a1a,#ffffff08 18%),#ffffff08;border:1px solid #e07a3a2e;border-radius:.625rem;margin:-.35rem 0 1.1rem;padding-block:.7rem;padding-inline:.9rem;font-size:.8rem;line-height:1.5;box-shadow:inset 0 1px #ffffff08,0 8px 20px #0000001f}.demo-status[data-state=error]{color:#f08080}.demo-grid-host{min-block-size:20rem;inline-size:100%;margin-block-end:2.5rem;display:block;position:relative}.demo-grid-shell{overflow-inline:clip;min-inline-size:0}.demo-grid-shell[data-row-active=true]{inline-size:max-content;min-inline-size:100%;max-inline-size:none;overflow:visible}.demo-grid-host--rows{scrollbar-gutter:stable both-edges;min-block-size:min(56vh,32.5rem);padding-block-end:.25rem}.demo-grid-host--reference{min-block-size:21.25rem}.demo-tile-img{background:var(--demo-bg-elevated);box-shadow:0 1px 0 var(--demo-line), 0 12px 40px #00000059;border-radius:.375rem;margin:0;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;overflow:hidden}.demo-tile-img:hover{box-shadow:0 0 0 1px var(--demo-accent-soft), 0 20px 50px #00000073, 0 0 60px var(--demo-glow);transform:translateY(-4px)scale(1.01)}.demo-tile-img img{vertical-align:middle;block-size:auto;inline-size:100%;display:block}.demo-tile-img figcaption{color:var(--demo-ink-muted);padding-block:.65rem .85rem;padding-inline:.85rem;font-size:.72rem;line-height:1.4}.demo-tile-img figcaption a{color:var(--demo-accent);border-bottom:1px solid var(--demo-accent-soft);text-decoration:none;transition:color .2s,border-color .2s}.demo-tile-img figcaption a:hover{color:#f0a070;border-bottom-color:#f0a07073}.demo-tile-img figcaption a:focus-visible{outline:2px solid var(--demo-accent);outline-offset:2px;border-bottom-color:#0000}.demo-tile-text{background:var(--demo-bg-elevated);border:1px solid var(--demo-line);font-family:var(--font-body);color:var(--demo-ink);border-radius:.375rem;margin:0;padding-block:1.1rem 1.25rem;padding-inline:1.15rem;font-size:1rem;line-height:1.62;transition:border-color .25s,box-shadow .25s;overflow:hidden;box-shadow:0 8px 28px #00000047}.demo-tile-text:hover{border-color:var(--demo-accent-soft);box-shadow:0 12px 36px #00000059, 0 0 40px var(--demo-glow)}.demo-card{background:var(--demo-bg-elevated);border:1px solid var(--demo-line);border-radius:.5rem;margin:0;transition:transform .3s,box-shadow .3s;overflow:hidden;box-shadow:0 10px 36px #00000052}.demo-card:hover{box-shadow:0 16px 48px #0006, 0 0 50px var(--demo-glow);transform:translateY(-3px)}.demo-card-media{aspect-ratio:16/10;object-fit:cover;background:#111;block-size:auto;inline-size:100%;display:block}.demo-card-body{font-family:var(--font-body);color:var(--demo-ink);padding-block:1rem 1.15rem;padding-inline:1.1rem;font-size:.95rem;line-height:1.58}.demo-card--text-only .demo-card-body{padding-block-start:1.15rem}.demo-row-card{background:var(--demo-bg-elevated);border:1px solid var(--demo-line);border-radius:.625rem;gap:.7rem;margin:0;padding-block:.95rem 1rem;padding-inline:1rem;display:grid;overflow:hidden;box-shadow:0 10px 36px #00000052}.demo-row-card--image,.demo-row-card--rich{gap:0;padding:0}.demo-row-card-media{object-fit:cover;background:#111;block-size:8.25rem;inline-size:100%;display:block}.demo-row-card--image figcaption,.demo-row-card--rich .demo-row-card-kicker,.demo-row-card--rich .demo-row-card-copy{padding-inline:1rem}.demo-row-card--image figcaption{gap:.3rem;padding-block:.85rem 1rem;display:grid}.demo-row-card--rich .demo-row-card-kicker{padding-block-start:.85rem}.demo-row-card--rich .demo-row-card-copy{padding-block-end:1rem}.demo-row-card-kicker{letter-spacing:.14em;text-transform:uppercase;color:var(--demo-accent);margin:0;font-size:.68rem;font-weight:700}.demo-row-card-copy{font-family:var(--font-body);color:var(--demo-ink);margin:0;font-size:.96rem;line-height:1.5}.demo-switcher-tabs{flex-wrap:wrap;gap:.8rem;margin-block-end:1.35rem;display:flex}.demo-switcher-tab{color:var(--demo-ink);font:inherit;cursor:pointer;background:#ffffff08;border:1px solid #e9e2d82e;border-radius:.875rem;padding-block:.8rem;padding-inline:1.45rem;font-size:1.05rem;font-weight:600;transition:border-color .2s,background-color .2s,transform .2s}.demo-switcher-tab.is-active,.demo-switcher-tab:hover{border-color:var(--demo-accent-soft);background:#ffffff0f}.demo-switcher-tab:focus-visible{outline:2px solid var(--demo-accent);outline-offset:3px}.demo-switcher-desc{max-inline-size:62ch;color:var(--demo-ink-muted);margin:0 0 1rem;font-size:1rem;line-height:1.55}.demo-switcher-desc strong{color:var(--demo-ink)}.demo-switcher-badges{flex-wrap:wrap;gap:.8rem;margin-block-end:1.35rem;display:flex}.demo-switcher-badge{color:var(--demo-ink-muted);border:1px solid #e9e2d81f;border-radius:999px;padding-block:.35rem;padding-inline:.9rem;font-family:ui-monospace,SFMono-Regular,SF Mono,Consolas,monospace;font-size:.8rem}.demo-switcher-card{background:var(--switcher-bg,#f1efe8);color:var(--switcher-ink,#444441);font-family:var(--font-ui);border-radius:1rem;justify-content:center;align-items:center;margin:0;font-size:clamp(1.7rem,3vw,2.6rem);font-weight:600;transition:left .35s cubic-bezier(.4,0,.2,1),top .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1),height .35s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 8px 24px #00000038}.demo-foot{border-block-start:1px solid var(--demo-line);color:var(--demo-ink-muted);margin-block-start:2rem;padding-block-start:1.5rem;font-size:.8rem;line-height:1.6}.demo-foot a{color:var(--demo-accent);text-underline-offset:.1875rem;text-decoration:underline}.demo-hub-hero{text-align:center;max-inline-size:40rem;margin:0 auto 2.65rem;padding-block:2.75rem 2rem;padding-inline:0}.demo-hub-hero .demo-title{max-inline-size:none}.demo-hub-hero .demo-lede{margin-inline:auto}.demo-hub-grid{grid-template-columns:repeat(auto-fill,minmax(16.25rem,1fr));gap:1.25rem;display:grid}.demo-hub-grid+.demo-foot{margin-block-start:2.65rem;padding-block-start:2rem}@keyframes demo-hub-rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.demo-hub-card{background:var(--demo-bg-elevated);border:1px solid var(--demo-line);color:inherit;border-radius:.625rem;flex-direction:column;padding-block:1.35rem 1.5rem;padding-inline:1.4rem;text-decoration:none;transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .25s,box-shadow .3s;animation:.7s cubic-bezier(.22,1,.36,1) backwards demo-hub-rise;display:flex;box-shadow:0 8px 32px #00000040}.demo-hub-card:first-child{animation-delay:40ms}.demo-hub-card:nth-child(2){animation-delay:.1s}.demo-hub-card:nth-child(3){animation-delay:.16s}.demo-hub-card:nth-child(4){animation-delay:.22s}.demo-hub-card:nth-child(5){animation-delay:.28s}.demo-hub-card:hover{border-color:var(--demo-accent-soft);box-shadow:0 20px 50px #00000061, 0 0 48px var(--demo-glow);transform:translateY(-6px)}.demo-hub-card:focus-visible{outline:2px solid var(--demo-accent);outline-offset:3px}.demo-hub-card h2{font-family:var(--font-ui);letter-spacing:-.02em;color:var(--demo-ink);margin:0 0 .5rem;font-size:1.05rem;font-weight:700}.demo-hub-card p{color:var(--demo-ink-muted);flex:1;margin:0;font-size:.86rem;line-height:1.55}.demo-hub-meta{letter-spacing:.14em;text-transform:uppercase;color:var(--demo-accent);margin-block-start:1rem;font-size:.7rem;font-weight:600}.demo-playground-shell{align-items:start;gap:1.35rem;margin-block-end:2.5rem;display:grid}.demo-playground-toolbar{gap:1rem;margin-block-end:1.35rem;display:grid}.demo-toolbar-card{border:1px solid var(--demo-line);background:linear-gradient(#1a1715f5,#14110ff0);border-radius:.75rem;padding-block:1rem;padding-inline:1.05rem;box-shadow:0 10px 34px #00000047,inset 0 1px #ffffff08}.demo-toolbar-card--summary{gap:.75rem;display:grid}.demo-toolbar-meta{gap:.35rem;display:grid}.demo-panel{border:1px solid var(--demo-line);background:linear-gradient(#1a1715f5,#14110ff0);border-radius:.75rem;padding-block:1.2rem 1.25rem;padding-inline:1.1rem;box-shadow:0 10px 34px #00000047,inset 0 1px #ffffff08}.demo-panel-head h2{letter-spacing:-.02em;margin:0 0 .35rem;font-size:1rem}.demo-panel-head p,.demo-panel-note{color:var(--demo-ink-muted);margin:0;font-size:.8rem;line-height:1.55}.demo-control-grid{gap:.9rem;margin-block-start:1rem;display:grid}.demo-control{background:#ffffff05;border:1px solid #e9e2d814;border-radius:.625rem;gap:.5rem;padding-block:.8rem;padding-inline:.85rem;display:grid}.demo-control--toolbar{background:0 0;border:0;padding:0}.demo-control-top{grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;display:grid}.demo-control-title{letter-spacing:.01em;font-size:.84rem;font-weight:600}.demo-control-meta{color:var(--demo-ink-muted);font-size:.74rem;line-height:1.45}.demo-control-meta--hidden{display:none}.demo-control-meta code,.demo-panel-note code{color:var(--demo-accent);font-family:ui-monospace,SFMono-Regular,SF Mono,Consolas,monospace;font-size:.95em}.demo-control output{color:var(--demo-accent);font-size:.76rem}.demo-control input[type=checkbox]{block-size:1rem;inline-size:1rem;accent-color:var(--demo-accent)}.demo-control input[type=range]{inline-size:100%;accent-color:var(--demo-accent)}.demo-control select{border:1px solid var(--demo-line);inline-size:100%;color:var(--demo-ink);font:inherit;background:#0f0d0ce0;border-radius:.5rem;padding-block:.65rem;padding-inline:.7rem}.demo-control input:disabled,.demo-control select:disabled{opacity:.45}.demo-code-chip{color:var(--demo-ink);white-space:normal;overflow-wrap:anywhere;background:#0f0d0ce0;border:1px solid #e9e2d814;border-radius:.625rem;padding-block:.85rem;padding-inline:.95rem;font-size:.75rem;line-height:1.6;display:block}.demo-preview{overflow-inline:hidden;min-inline-size:0}@media (width>=56.25rem){.demo-playground-toolbar{grid-template-columns:minmax(15rem,18.75rem) minmax(0,1fr);align-items:start}.demo-playground-shell{grid-template-columns:minmax(18.125rem,21.25rem) minmax(0,1fr)}.demo-panel{position:sticky;inset-block-start:1.5rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.demo-hub-card{opacity:1;animation:none;transform:none}}