:root{color-scheme:light;font-family:IBM Plex Sans,Segoe UI,sans-serif;line-height:1.5;color:#1a1a1a;background:radial-gradient(ellipse at 20% 0%,#e8f0ff 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,#fff0e8 0%,transparent 45%),#f7f7f5}*{box-sizing:border-box}body{margin:0}.page{max-width:960px;margin:0 auto;padding:2rem 1.25rem 4rem}.hero h1{font-family:"IBM Plex Serif",Georgia,serif;font-size:clamp(2rem,5vw,3rem);margin:0 0 .5rem}.hero p{margin:0 0 1.5rem;max-width:40rem;color:#444}.nav-demos{display:flex;gap:1rem;margin-bottom:1.5rem}.nav-demos a{color:#0b57d0}.panel{display:grid;gap:1rem;margin-bottom:1.5rem}.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}button{font:inherit;padding:.45rem .85rem;border:1px solid #ccc;border-radius:6px;background:#fff;cursor:pointer}button:hover{border-color:#888}.radio-group{border:1px solid #ddd;border-radius:8px;padding:.75rem 1rem;margin:0}.radio-group legend{padding:0 .35rem;font-size:.85rem;color:#555}.radio{display:inline-flex;align-items:center;gap:.35rem;margin-right:.75rem}.stage{position:relative;min-height:280px;border:1px dashed #bbb;border-radius:12px;background:#fff9}.marker{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:#0b57d0;color:#fff;font-size:.75rem;display:grid;place-items:center}.demo-button{position:absolute;right:1.5rem;bottom:1.5rem}