:root{--paper:#f4efe4;--card:#fbf8f1;--ink:#1c1a17;--muted:#5a5347;--rule:#d9d0bd;--accent:#8c2f39;--serif:"Newsreader", Georgia, "Times New Roman", serif;--sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;font-family:var(--sans);color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{background:var(--paper);margin:0}a{color:var(--ink)}a:hover{color:var(--accent)}button,input,select{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.landing{max-width:1040px;margin:0 auto;padding:56px 16px 80px}.landing header{border-bottom:4px double var(--ink);margin-bottom:32px;padding-bottom:20px}.landing h1{font:700 clamp(40px, 8vw, 72px) / 1 var(--serif);letter-spacing:-.02em;margin:0 0 10px}.landing header p{max-width:58ch;font:19px/1.5 var(--serif);color:var(--muted);margin:0}.demo-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:0;padding:0;list-style:none;display:grid}.demo-card{border:1px solid var(--ink);background:var(--card);height:100%;color:inherit;padding:24px;text-decoration:none;transition:transform .15s,box-shadow .15s;display:block}.demo-card:hover{color:inherit;box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}.demo-card h2{font:600 28px/1.1 var(--serif);letter-spacing:-.01em;margin:0 0 8px}.demo-card p{font:17px/1.5 var(--serif);color:var(--muted);margin:0 0 18px}.tags{flex-wrap:wrap;gap:6px;display:flex}.tags span{border:1px solid var(--rule);font:12px var(--mono);color:var(--muted);padding:2px 8px}.demo-shell{flex-direction:column;height:100dvh;display:flex}.demo-shell nav{border-bottom:4px double var(--ink);align-items:baseline;gap:16px;padding:10px 24px;font-size:14px;display:flex}.demo-shell nav strong{font:700 24px var(--serif);letter-spacing:-.01em}.demo-shell nav button{cursor:pointer;background:0 0;border:0;min-height:32px;margin-left:auto;padding:0;font-size:14px;text-decoration:underline}.loading{font:italic 18px var(--serif);color:var(--muted);padding:24px}.intro{border:1px solid var(--ink);background:var(--paper);width:min(540px,100vw - 32px);max-height:calc(100dvh - 32px);color:var(--ink);box-shadow:8px 8px 0 var(--ink);border-radius:0;padding:0;overflow-y:auto}.intro::backdrop{background:#1c1a178c}.intro-body{padding:32px 32px 0}.intro h2:focus{outline:none}.intro-actions{background:linear-gradient(to bottom, transparent, var(--paper) 16px);padding:16px 0 28px;position:sticky;bottom:0}.intro-kicker{font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}.intro h2{border-bottom:4px double var(--ink);font:700 36px/1.05 var(--serif);letter-spacing:-.015em;margin:0 0 14px;padding-bottom:14px}.intro-lead{font:600 22px/1.3 var(--serif);text-wrap:balance;margin:0 0 16px}.intro ul{font:17px/1.45 var(--serif);gap:12px;margin:0 0 8px;padding:0;list-style:none;display:grid}.intro li{border-top:1px solid var(--rule);padding-top:12px}.intro b{font-weight:700}.intro button{background:var(--ink);min-height:44px;color:var(--paper);font:600 14px var(--sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:0;padding:0 22px}@media (width<=800px){.intro-body{padding:24px 20px 0}.intro h2{font-size:30px}.intro-lead{font-size:19px}.intro ul{gap:10px;font-size:16px}.demo-shell nav{padding:8px 16px}.demo-shell nav strong{font-size:18px}}