.demo{max-width:680px;margin:0 auto;padding:0 24px 96px}.intro{text-align:center;padding:72px 0 40px}.intro h1{letter-spacing:-.035em;margin:0;font-size:44px;font-weight:600;line-height:1.1}.tagline{color:var(--muted);margin:10px 0 28px;font-size:17px}.actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.hero-card{text-align:left;margin-top:40px}.hero-card .stage{min-height:150px;padding:36px 32px;font-size:22px}.status{min-height:1.6em;margin:12px 0 0}.toc{flex-wrap:wrap;justify-content:center;gap:18px;margin:8px 0;font-size:13px;display:flex}.toc a{text-decoration:none}.toc a:hover{color:var(--ink)}.spec{padding-top:64px;scroll-margin-top:16px}.spec h2{gap:12px;margin:0 0 4px;font-size:15px;font-weight:600;display:flex}.spec h2 span{font:400 13px var(--mono);color:var(--muted);padding-top:1px}.spec>p{color:var(--muted);margin:0 0 18px}.bar b{color:var(--ink);font-weight:500}.out{border-top:1px solid var(--rule);border-bottom:0;justify-content:flex-start;min-height:38px}.out .layer{color:var(--ink);align-items:center;gap:6px;display:inline-flex}.next{text-align:center;margin:72px 0 0}.next .btn{text-decoration:none;display:inline-block}@media (width<=520px){.demo{padding:0 16px 72px}.intro{padding-top:40px}.intro h1{font-size:36px}.hero-card .stage{padding:24px 20px;font-size:19px}}