:root{color:#101522;background:radial-gradient(circle at top left,rgba(245,158,11,.18),transparent 24%),radial-gradient(circle at bottom right,rgba(14,165,233,.18),transparent 28%),#f6efe3;font-family:Space Grotesk,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh}.demo-shell{width:min(1280px,calc(100vw - 32px));margin:0 auto;padding:36px 0 56px}.demo-hero{margin-bottom:24px;padding:28px;border:1px solid rgba(16,21,34,.08);border-radius:28px;background:#ffffffbd;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 60px #10152214}.demo-hero h1{margin:0 0 10px;font-size:clamp(32px,5vw,56px);line-height:.95;letter-spacing:-.04em}.demo-hero p{max-width:720px;margin:0;color:#101522b8;font-family:IBM Plex Sans,Segoe UI,sans-serif}.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.demo-card{border-radius:24px;border:1px solid rgba(16,21,34,.08);background:#fffc;box-shadow:0 18px 40px #1015220f;overflow:hidden}.demo-card header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid rgba(16,21,34,.08)}.demo-card h2{margin:0;font-size:18px}.demo-chip{padding:6px 10px;border-radius:999px;background:#101522;color:#fff;font-size:12px;font-family:IBM Plex Mono,monospace}.demo-pane{padding:18px}.demo-textarea{width:100%;min-height:320px;resize:vertical;padding:16px;border:1px solid rgba(16,21,34,.12);border-radius:18px;font:14px/1.6 IBM Plex Mono,monospace;color:#101522;background:#fffcf6}.demo-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:18px 0}.demo-button,.demo-select{border:1px solid rgba(16,21,34,.12);border-radius:999px;background:#fff;color:#101522;font:600 14px/1 IBM Plex Sans,Segoe UI,sans-serif}.demo-button{padding:12px 18px;cursor:pointer}.demo-button:hover{transform:translateY(-1px)}.demo-select{padding:12px 16px}.demo-output{min-height:420px;padding:18px;background:linear-gradient(180deg,#ffffffb8,#fffbf5f5)}.demo-stats{display:flex;gap:10px;margin-top:12px;font:13px/1.4 IBM Plex Mono,monospace;color:#101522b8}.demo-stats span{padding:8px 10px;border-radius:999px;background:#1015220f}@media(max-width:960px){.demo-grid{grid-template-columns:1fr}.demo-shell{width:min(100vw - 20px,1280px);padding-top:16px}.demo-hero{padding:22px}}