:root{font-family:Space Grotesk,Avenir Next,sans-serif;color:#e2e8f0;background:radial-gradient(circle at 5% 0%,rgba(14,116,144,.24),transparent 30%),radial-gradient(circle at 90% 10%,rgba(20,184,166,.17),transparent 35%),#060b16}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:#dbe7ff;background:inherit}.demo-page{max-width:1200px;margin:0 auto;padding:2.7rem 1rem 3rem}h1{margin:0;font-size:clamp(2rem,4vw,2.7rem);letter-spacing:.01em}.demo-grid{margin-top:1.5rem;display:grid;gap:1.2rem}.demo-hero p{margin:.75rem 0 0;max-width:860px;color:#9eb2d5;line-height:1.45}.demo-badges{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.45rem}.demo-badge{border-radius:999px;border:1px solid rgba(125,211,252,.27);background:#071023cc;padding:.35rem .72rem;font-size:.76rem;color:#c7d7f5}.demo-usage{margin-top:1rem;border:1px solid rgba(148,163,184,.22);border-radius:14px;background:linear-gradient(140deg,#08142bd9,#070e1ceb);padding:.9rem 1rem}.demo-usage h2{margin:0;font-size:1rem;color:#f8fafc}.demo-usage ol{margin:.55rem 0 0;padding-left:1.1rem;display:grid;gap:.2rem;color:#9eb2d5;font-size:.9rem}.demo-row{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:1rem;border:1px solid rgba(148,163,184,.2);border-radius:14px;background:linear-gradient(125deg,#061022e6,#080e1df5),#ffffff08;padding:1rem 1rem 1.15rem;box-shadow:inset 0 1px #e0e7ff05}.demo-preview-pane{display:grid;gap:.85rem}.demo-title-row{display:flex;align-items:center;justify-content:space-between;gap:.7rem}.demo-panel-header h2{margin:0;font-size:1.1rem;color:#f8fafc}.demo-panel-header code{border:1px solid rgba(125,211,252,.24);border-radius:999px;background:#0284c724;color:#7dd3fc;padding:.18rem .6rem;font-family:IBM Plex Mono,SFMono-Regular,Menlo,monospace;font-size:.72rem;white-space:nowrap}.demo-panel-header p{margin:.3rem 0 0;color:#8ea6ca;font-size:.94rem}.demo-preview{min-height:140px;display:grid;align-items:center}.demo-card{margin:0;border:1px solid rgba(148,163,184,.2);border-radius:14px;padding:1.2rem;min-height:110px;background:linear-gradient(155deg,#122039f2,#091122f7);color:#e2e8f0;font-weight:600}.demo-controls-pane{display:grid;align-content:start;gap:.65rem}.demo-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.55rem}.demo-control{display:grid;gap:.3rem;font-size:.85rem;font-weight:600;color:#c8d6f1}.demo-control input{width:100%;border-radius:10px;border:1px solid rgba(148,163,184,.28);background:#0a152af2;color:#f8fafc;padding:.45rem .6rem}.demo-control input[type=color]{min-height:2.2rem;padding:.2rem .3rem}.demo-control input:focus-visible{outline:2px solid rgba(56,189,248,.6);outline-offset:1px}.demo-control-toggle{display:flex;align-items:center;justify-content:space-between}.demo-control-toggle input{width:auto}.demo-reset{height:40px;margin-top:.1rem;border:1px solid rgba(125,211,252,.35);border-radius:10px;background:linear-gradient(180deg,#0e749059,#082f4973);color:#eaf6ff;padding:.55rem .75rem;font-weight:600;cursor:pointer}.demo-dev-notes{margin-top:.35rem;border-radius:12px;border:1px solid rgba(148,163,184,.24);background:#071225d1;padding:.8rem}.demo-dev-notes h3{margin:0;font-size:.94rem;color:#f8fafc}.demo-dev-notes pre{margin:.7rem 0 0;overflow-x:auto;border-radius:10px;border:1px solid rgba(125,211,252,.18);background:#020617;color:#dbeafe;padding:.7rem}.demo-dev-notes code{font-family:IBM Plex Mono,SFMono-Regular,Menlo,monospace;font-size:.75rem;line-height:1.45}@media(max-width:900px){.demo-row{grid-template-columns:1fr}}