:root { --kd-bg:#111018; --kd-panel:#201c2c; --kd-text:#f8f5ff; --kd-muted:#d7cfe4; --kd-accent:#f3b53f; --kd-focus:#fff; }
.kd-demo-main { max-width: 1120px; margin: 0 auto; padding: clamp(2rem,5vw,5rem) 1.25rem; background:var(--kd-bg); color:var(--kd-text); }
.kd-demo-main section { margin:0 0 3rem; }.kd-demo-main h1 { font-size:clamp(2.5rem,7vw,5rem); line-height:1.02; margin:.2rem 0 1rem; }.kd-demo-main h2 { font-size:clamp(1.45rem,3vw,2.2rem); }.kd-demo-main h3 { font-size:1.2rem; }.kd-demo-main p,.kd-demo-main li { line-height:1.65; }.kd-demo-main a,.kd-demo-footer a { color:var(--kd-accent); text-underline-offset:.18em; }.kd-hero { padding:clamp(2rem,7vw,6rem) 0; }.kd-eyebrow { color:var(--kd-accent); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.kd-lead { max-width:48rem; font-size:clamp(1.15rem,2.5vw,1.5rem); }.kd-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.kd-grid article,.kd-panel { background:var(--kd-panel); border-radius:.7rem; padding:1.5rem; }.kd-button { display:inline-block; border:2px solid var(--kd-accent); border-radius:.35rem; background:var(--kd-accent); color:#17120a !important; font-weight:700; padding:.8rem 1.1rem; text-decoration:none; }.kd-demo-main input,.kd-demo-main textarea { box-sizing:border-box; display:block; width:100%; max-width:42rem; border:2px solid #c9bfd9; border-radius:.25rem; font:inherit; padding:.65rem; }.kd-demo-main label { display:block; font-weight:700; margin-bottom:.3rem; }.kd-demo-main :focus-visible,.kd-skip-link:focus { outline:3px solid var(--kd-focus); outline-offset:3px; }.kd-skip-link { background:#fff; color:#111; left:1rem; padding:.7rem 1rem; position:absolute; top:-5rem; z-index:9999; }.kd-skip-link:focus { top:1rem; }.kd-demo-footer { background:#0c0b10; color:var(--kd-muted); margin:0; padding:2rem max(1.25rem,calc((100vw - 1120px)/2)); }.kd-demo-footer p { margin:.4rem 0; }
@media (max-width: 700px) { .kd-grid { grid-template-columns:1fr; } }