: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}.demo-eyebrow{display:inline-block;margin-bottom:.6rem;color:#7dd3fc;font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}h1{margin:0;max-width:900px;font-size:clamp(2.3rem,5vw,4rem);letter-spacing:.01em;line-height:.98}.demo-grid{margin-top:1.5rem;display:grid;gap:1.2rem}.demo-hero p{margin:.75rem 0 0;max-width:780px;color:#9eb2d5;line-height:1.55;font-size:1.04rem}.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}.featured-grid{margin-top:1.4rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.featured-panel{display:grid;gap:1rem;border:1px solid rgba(148,163,184,.2);border-radius:20px;padding:1rem;background:linear-gradient(145deg,#071123f5,#060c18eb),#ffffff0a;box-shadow:inset 0 1px #e0e7ff0a,0 24px 60px #0208173d}.featured-copy{display:grid;gap:.45rem}.featured-eyebrow{color:#8fd8ff;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.featured-copy h2{margin:0;font-size:1.18rem;line-height:1.1;color:#f8fafc}.featured-copy p{margin:0;color:#9ab0d1;font-size:.92rem;line-height:1.5}.featured-copy code{justify-self:start;margin-top:.15rem;border:1px solid rgba(125,211,252,.24);border-radius:999px;background:#0284c71f;color:#7dd3fc;padding:.2rem .6rem;font-family:IBM Plex Mono,SFMono-Regular,Menlo,monospace;font-size:.72rem}.featured-preview{min-height:220px;display:grid;align-items:end}.featured-card{width:100%;min-height:206px;border-radius:18px;padding:1rem;text-align:left;position:relative}.featured-card strong,.featured-card span{position:relative;z-index:1;display:block}.featured-card strong{font-size:1.05rem;line-height:1.15}.featured-card span:last-child{max-width:24ch;margin-top:.45rem;color:#e2e8f0d1;line-height:1.45;font-size:.9rem}.featured-card-kicker{margin-bottom:.8rem;color:#bfdbfeeb;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.featured-card-gradient{border:0;background:radial-gradient(circle at 0% 0%,rgba(245,158,11,.12),transparent 32%),linear-gradient(160deg,#0b1220fa,#070e1cfa);color:#f8fafc;box-shadow:inset 0 1px #ffffff0a;overflow:visible}.featured-card-glass{border:1px solid rgba(125,211,252,.18);background:radial-gradient(circle at 90% 6%,rgba(147,197,253,.18),transparent 18%),linear-gradient(152deg,#0f172af0,#172554d6);color:#eff6ff;overflow:hidden}.featured-card-spotlight{border:1px solid rgba(129,140,248,.28);background:linear-gradient(145deg,#040a1afa,#0a1024f5),radial-gradient(circle at 85% 18%,rgba(45,212,191,.16),transparent 26%);color:#eff6ff;box-shadow:inset 0 1px #ffffff0f,0 18px 40px #02081747;overflow:hidden}.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-card-content{position:relative;z-index:1;display:inline-block;text-shadow:0 2px 12px rgba(2,6,23,.42)}.demo-card-spotlight{min-height:136px;display:flex;align-items:flex-start;justify-content:flex-start;padding:1.05rem 1.2rem;font-size:1rem;font-weight:700;letter-spacing:.015em;text-shadow:0 3px 16px rgba(3,6,23,.85)}.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,.demo-control select{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 select: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){.featured-grid,.demo-row{grid-template-columns:1fr}}