/* Shared look of the demo pages. Not needed in your own project. */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;min-height:100vh;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#e9ebf5;background:#07080d;line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(60% 50% at 15% 0%,rgba(124,92,255,.22),transparent 70%),radial-gradient(50% 45% at 100% 30%,rgba(34,211,238,.16),transparent 70%)}
.demo-wrap{max-width:1040px;margin:0 auto;padding:44px 20px 72px}
.demo-kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8f94ad;margin:0 0 10px}
h1{font-size:clamp(30px,6vw,56px);line-height:1.05;margin:0 0 14px;letter-spacing:-.02em}
h2{font-size:clamp(22px,3.4vw,32px);margin:0 0 10px;letter-spacing:-.01em}
p{color:#b3b8cf;margin:0 0 16px}
.grad{background:linear-gradient(100deg,#a996ff,#3ad6f0 55%,#7cf7b5);-webkit-background-clip:text;background-clip:text;color:transparent}
.panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:26px}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;background:rgba(255,255,255,.08);border-radius:6px;padding:.15em .45em;color:#d7d2ff}
.hint{font-size:13px;color:#8f94ad}