.demo-page{overflow:clip}.demo-hero{grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:64px;padding-block:96px 72px;display:grid}.demo-hero h1{max-width:760px;margin-top:24px;font-size:clamp(48px,7vw,94px);line-height:.98}.demo-hero__note{color:var(--muted);align-self:end;padding-bottom:8px;line-height:1.75}.demo-hero__note p{max-width:380px;margin:0 0 18px}.demo-hero__note span{color:var(--ink);font:600 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;display:block}.demo-workbench{grid-template-columns:minmax(280px,440px) minmax(0,1fr);align-items:start;gap:clamp(40px,9vw,140px);padding-bottom:112px;display:grid}.demo-workbench__preview{position:sticky;top:92px}.demo-preview__label{color:var(--muted);font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;justify-content:space-between;margin-bottom:14px;display:flex}.demo-cover-frame{max-width:420px;box-shadow:var(--shadow-float);margin:0 auto}.demo-workbench__caption{gap:6px;padding:18px 4px 0;display:grid}.demo-workbench__caption strong{font:500 25px/1.1 var(--display)}.demo-workbench__caption span{color:var(--muted);font-size:13px}.demo-workbench__controls{padding-top:12px}.demo-control-block{border-top:1px solid var(--line);padding:26px 0 32px}.demo-control-block--last{border-bottom:1px solid var(--line)}.demo-control-block__label{color:var(--muted);font:600 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin:0 0 18px}.demo-family-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;display:grid}.demo-family{border:1px solid var(--line);border-radius:var(--radius-s);min-height:72px;color:var(--ink);text-align:left;cursor:pointer;transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);background:0 0;gap:5px;padding:12px 10px;display:grid}.demo-family:hover{border-color:var(--ink);transform:translateY(-2px)}.demo-family[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--paper)}.demo-family span{font:500 23px/1 var(--display)}.demo-family small{color:var(--muted);font-size:10px;line-height:1.2}.demo-family[aria-pressed=true] small{color:var(--on-dark-muted)}.demo-colors{flex-wrap:wrap;gap:12px;display:flex}.demo-color{border-radius:var(--radius-full);color:var(--ink);cursor:pointer;background:0 0;border:1px solid #0000;grid-template-columns:22px auto;align-items:center;gap:8px;padding:7px 12px 7px 7px;display:grid}.demo-color:hover,.demo-color[aria-pressed=true]{border-color:var(--line-strong)}.demo-color i{border-radius:50%;width:22px;height:22px;box-shadow:inset 0 0 0 1px #00000026}.demo-color span{font-size:12px}.demo-full-toggle{border:0;border-top:1px solid var(--line);width:100%;color:var(--ink);text-align:left;cursor:pointer;background:0 0;justify-content:space-between;align-items:center;padding:18px 0;display:flex}.demo-full-toggle span{gap:5px;display:grid}.demo-full-toggle strong{font:500 21px/1.15 var(--display)}.demo-full-toggle small{color:var(--muted);font-size:12px}.demo-full-toggle i{border:1px solid var(--line-strong);width:32px;height:32px;font:300 24px/1 var(--sans);border-radius:50%;place-items:center;font-style:normal;display:grid}.demo-actions{flex-wrap:wrap;gap:10px;padding-top:12px;display:flex}.demo-actions .button-primary,.demo-actions .button-ghost{justify-content:center;align-items:center;min-height:48px;display:inline-flex}.demo-full{border-top:1px solid var(--line);grid-template-columns:minmax(220px,.55fr) minmax(280px,1fr);gap:clamp(40px,9vw,140px);padding-block:96px 128px;display:grid}.demo-full__intro{align-self:start;position:sticky;top:92px}.demo-full__intro h2{margin:18px 0;font-size:clamp(34px,4vw,58px);line-height:1}.demo-full__intro>p:last-child{max-width:360px;color:var(--muted);line-height:1.75}.demo-full__frame{border:1px solid var(--line);min-width:0;box-shadow:var(--shadow-card);overflow:hidden}@media (max-width:760px){.demo-hero{grid-template-columns:1fr;gap:28px;padding-block:64px 48px}.demo-hero h1{font-size:clamp(44px,13vw,66px)}.demo-workbench{grid-template-columns:1fr;gap:54px;padding-bottom:72px}.demo-workbench__preview,.demo-full__intro{position:static}.demo-cover-frame{max-width:min(100%,360px)}.demo-family-grid{grid-template-columns:repeat(5,minmax(54px,1fr))}.demo-family{min-height:62px;padding:9px 7px}.demo-family span{font-size:20px}.demo-family small{text-overflow:ellipsis;white-space:nowrap;font-size:9px;overflow:hidden}.demo-full{grid-template-columns:1fr;gap:32px;padding-block:64px 80px}}