:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--font-display:"Sora", "Avenir Next", "Segoe UI", sans-serif;--font-body:"Manrope", "Avenir Next", "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "SFMono-Regular", monospace;--radius-sm:.75rem;--radius-md:1rem;--radius-lg:1.5rem;--radius-xl:2rem;font-family:var(--font-body);color:oklch(24% .03 278);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:oklch(96% .018 73)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{min-width:320px;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}.demo-page{color:oklch(24% .03 278);background:radial-gradient(circle at 0 0,oklab(93% .0482963 .012941/.74) 0,#0000 34%),radial-gradient(circle at 88% 14%,oklab(91% .0321394 -.0383022/.76) 0,#0000 28%),linear-gradient(oklch(97% .014 80) 0%,oklch(93% .022 265) 100%);min-height:100vh;position:relative;overflow:hidden}.demo-page.theme-dark{color:oklch(93% .018 285);background:radial-gradient(circle at 0 0,oklab(34% .025811 -.0368618/.28) 0,#0000 30%),radial-gradient(circle at 90% 16%,oklab(42% -.0169047 -.0362523/.28) 0,#0000 26%),linear-gradient(oklch(18% .022 278) 0%,oklch(14% .02 280) 100%)}.demo-orb{filter:blur(80px);opacity:.55;pointer-events:none;border-radius:999px;position:absolute}.demo-orb--one{background:oklab(88% .0787846 -.0138918/.64);width:18rem;height:18rem;top:-7rem;left:-5rem}.demo-orb--two{background:oklab(83% -.0205212 -.0563816/.56);width:16rem;height:16rem;bottom:8rem;right:-2rem}.demo-shell{z-index:1;width:min(1380px,100%);margin:0 auto;padding:clamp(20px,3vw,40px);position:relative}.hero-panel{grid-template-columns:minmax(0,1.2fr) auto;align-items:end;gap:24px;margin-bottom:clamp(20px,3vw,32px);display:grid}.hero-copy{gap:14px;max-width:52rem;display:grid}.hero-kicker,.section-heading span{letter-spacing:.16em;text-transform:uppercase;font-size:.73rem;font-weight:800}.hero-kicker{color:oklch(48% .05 300)}.hero-copy h1{max-width:14ch;font-family:var(--font-display);letter-spacing:-.06em;text-wrap:balance;margin:0;font-size:clamp(3.2rem,7vw,6.6rem);font-weight:700;line-height:.96}.hero-copy p{max-width:42rem;color:color-mix(in oklab, currentColor 72%, transparent);text-wrap:pretty;margin:0;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.65}.hero-actions{justify-items:start;gap:12px;display:grid}.ghost-button,.segmented-grid button{appearance:none;border:1px solid #0000;transition:transform .18s cubic-bezier(.22,1,.36,1),scale .18s cubic-bezier(.22,1,.36,1),background-color .18s cubic-bezier(.22,1,.36,1),border-color .18s cubic-bezier(.22,1,.36,1),color .18s cubic-bezier(.22,1,.36,1)}.ghost-button:active,.segmented-grid button:active{scale:.96}.ghost-button{border-color:color-mix(in oklab, currentColor 12%, transparent);color:inherit;background:oklab(98% .00173648 .00984808/.74);border-radius:999px;padding:.9rem 1.15rem}.ghost-button:hover,.segmented-grid button:hover{transform:translateY(-1px)}.hero-note{border-radius:var(--radius-md);background:color-mix(in oklab, currentColor 5%, transparent);color:color-mix(in oklab, currentColor 74%, transparent);padding:.85rem 1rem}.studio-grid{grid-template-columns:minmax(280px,340px) minmax(0,1fr);grid-template-areas:"controls preview";align-items:start;gap:clamp(18px,2vw,28px);display:grid}.control-column,.preview-frame,.info-panel{background:oklab(99% .00086824 .00492404/.7);box-shadow:0 0 0 1px #0000000f,0 1px 2px -1px #0000000f,0 2px 4px #0000000a,0 28px 70px #31265b14}.control-column{border-radius:var(--radius-xl);grid-area:controls;gap:18px;padding:clamp(18px,2.2vw,24px);display:grid;position:sticky;top:20px}.control-section,.control-stack,.code-card{margin:0}.control-section{gap:12px;display:grid}.section-heading{gap:4px;display:grid}.section-heading span{color:color-mix(in oklab, currentColor 50%, transparent)}.section-heading strong{font-size:1rem;font-weight:700}.segmented-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.segmented-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.segmented-grid button{border-radius:var(--radius-md);background:color-mix(in oklab, currentColor 4%, transparent);color:inherit;padding:.95rem .6rem;font-weight:600}.segmented-grid button.is-active{color:oklch(98% .008 80);background:oklch(28% .04 282)}.control-stack{gap:10px;display:grid}.toggle-row{border-radius:var(--radius-md);background:color-mix(in oklab, currentColor 4.5%, transparent);grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:14px;padding:.95rem 1rem;display:grid;position:relative}.toggle-row span{gap:4px;display:grid}.toggle-row strong{font-size:.98rem}.toggle-row small{color:color-mix(in oklab, currentColor 66%, transparent);text-wrap:pretty;line-height:1.5}.toggle-row input{accent-color:oklch(48% .1 282);block-size:1.1rem;inline-size:1.1rem;margin-top:.15rem}.control-section--range{padding-top:4px}.range-shell{border-radius:var(--radius-md);background:color-mix(in oklab, currentColor 4.5%, transparent);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:.85rem 1rem;display:grid}.range-shell output{text-align:right;font-variant-numeric:tabular-nums;min-width:3.2ch;font-weight:700}.range-shell input[type=range]{appearance:none;background:color-mix(in oklab, currentColor 18%, transparent);cursor:pointer;border-radius:999px;outline:none;width:100%;height:6px}.range-shell input[type=range]::-webkit-slider-thumb{appearance:none;background:currentColor;border:2px solid oklch(98% .01 80);border-radius:999px;width:18px;height:18px;transition:transform .18s cubic-bezier(.22,1,.36,1);box-shadow:0 2px 6px #0000002e}.range-shell input[type=range]::-moz-range-thumb{background:currentColor;border:2px solid oklch(98% .01 80);border-radius:999px;width:18px;height:18px;transition:transform .18s cubic-bezier(.22,1,.36,1);box-shadow:0 2px 6px #0000002e}.range-shell input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.08)}.range-shell input[type=range]:focus::-webkit-slider-thumb{transform:scale(1.08)}.range-shell input[type=range]:hover::-moz-range-thumb{transform:scale(1.08)}.range-shell input[type=range]:focus::-moz-range-thumb{transform:scale(1.08)}.code-card-wrap{position:relative}.code-copy{z-index:2;border-radius:var(--radius-md);color:oklch(92% .015 285);cursor:pointer;background:oklab(22% 1.19249e-10 -.01/.8);border:1px solid oklab(98% .00173648 .00984808/.2);align-items:center;gap:6px;padding:.45rem .65rem;font-size:.78rem;font-weight:600;transition:background-color .18s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1),scale .18s cubic-bezier(.22,1,.36,1);display:inline-flex;position:absolute;top:10px;right:10px}.code-copy:after{content:"";width:40px;height:40px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.code-copy:hover{background:oklab(28% 1.19249e-10 -.01/.9);transform:translateY(-1px)}.code-copy:active{scale:.96}.code-card{border-radius:var(--radius-lg);color:oklch(92% .015 285);font-family:var(--font-mono);background:oklab(16% 1.19249e-10 -.01/.92);padding:2.4rem 1.05rem 1rem;font-size:.86rem;line-height:1.65;overflow:auto}.preview-column{grid-area:preview;min-width:0}.preview-frame{border-radius:var(--radius-xl);padding:clamp(10px,1.5vw,16px)}.preview-background{border-radius:var(--radius-md);width:100%;min-height:min(76vh,860px);overflow:hidden;box-shadow:inset 0 1px #ffffff3d,0 26px 70px #1f174324}.preview-card{align-content:end;gap:clamp(18px,2vw,28px);min-height:min(76vh,860px);padding:clamp(22px,3vw,38px);display:grid}.preview-card h2{max-width:12ch;font-family:var(--font-display);letter-spacing:-.05em;color:#fffffff2;margin:0;font-size:clamp(3rem,6vw,6rem);font-weight:700;line-height:.96}.demo-footer{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;margin-top:clamp(18px,2vw,28px);display:grid}.info-panel{border-radius:var(--radius-xl);gap:12px;padding:16px;display:grid}.info-card{border-radius:var(--radius-md);background:color-mix(in oklab, currentColor 4.5%, transparent);gap:10px;padding:1rem 1.05rem;display:grid}.info-card code,.info-card a{color:inherit;word-break:break-word;font-size:.98rem;font-weight:700;line-height:1.5}.info-card code{font-family:var(--font-mono)}.info-card a{text-decoration:none}.info-card a:hover{text-decoration:underline}.info-card small{color:color-mix(in oklab, currentColor 68%, transparent);text-wrap:pretty;line-height:1.55}.info-actions{gap:12px;display:grid}.info-action{border:1px solid color-mix(in oklab, currentColor 12%, transparent);min-height:44px;color:inherit;background:oklab(98% .00173648 .00984808/.74);border-radius:999px;justify-content:center;align-items:center;padding:.9rem 1.2rem;font-weight:700;text-decoration:none;transition:transform .18s cubic-bezier(.22,1,.36,1),scale .18s cubic-bezier(.22,1,.36,1),background-color .18s cubic-bezier(.22,1,.36,1),border-color .18s cubic-bezier(.22,1,.36,1),color .18s cubic-bezier(.22,1,.36,1);display:inline-flex}.info-action:hover{transform:translateY(-1px)}.info-action:active{scale:.96}.info-action--ghost{background:color-mix(in oklab, currentColor 5%, transparent)}.theme-dark .control-column,.theme-dark .preview-frame,.theme-dark .info-panel{background:oklab(20% .0020876 -.014854/.88);box-shadow:0 0 0 1px #ffffff14,0 30px 80px #00000038}.theme-dark .hero-kicker{color:oklch(82% .07 318)}.theme-dark .ghost-button,.theme-dark .segmented-grid button,.theme-dark .toggle-row,.theme-dark .range-shell,.theme-dark .hero-note{background:color-mix(in oklab, currentColor 7%, transparent)}.theme-dark .segmented-grid button.is-active{color:oklch(18% .02 278);background:oklch(90% .03 90)}.theme-dark .code-card{color:oklch(94% .018 285);background:oklab(10% 1.19249e-10 -.01/.96)}.theme-dark .range-shell input[type=range]{background:color-mix(in oklab, currentColor 22%, transparent)}.theme-dark .range-shell input[type=range]::-webkit-slider-thumb{border-color:oklch(20% .01 278)}.theme-dark .range-shell input[type=range]::-moz-range-thumb{border-color:oklch(20% .01 278)}@media (width<=1240px){.studio-grid{grid-template-columns:minmax(280px,340px) minmax(0,1fr);grid-template-areas:"controls preview"}.control-column{position:static}}@media (width<=860px){.studio-grid{grid-template-columns:1fr;grid-template-areas:"preview""controls"}.demo-footer{grid-template-columns:1fr}.hero-panel{grid-template-columns:1fr;align-items:start}.hero-copy h1{max-width:14ch}}@media (width<=640px){.demo-shell{padding:16px}.preview-background,.preview-card{min-height:520px}.preview-card h2{max-width:12ch}.info-actions{grid-template-columns:1fr}.info-action{width:100%}.segmented-grid button{padding:.85rem .4rem;font-size:.9rem}}@keyframes fadeInUp{0%{opacity:0;filter:blur(4px);transform:translateY(12px)}to{opacity:1;filter:blur();transform:translateY(0)}}.hero-panel{animation:.4s ease-out both fadeInUp}.control-column{animation:.4s ease-out .1s both fadeInUp}.preview-column{animation:.4s ease-out .2s both fadeInUp}.demo-footer{animation:.4s ease-out .3s both fadeInUp}
