*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--text-body)/1.5 var(--font-body)}h1,h2,h3,p{margin:0}button,input{font:inherit}button,a{color:inherit}a{text-decoration-thickness:1px;text-underline-offset:4px}button{border-radius:var(--radius);cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:4px}[hidden]{display:none!important}.wrap{max-width:1500px;margin:auto;padding:0 var(--page-margin)}header{padding:24px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.wordmark{font:400 40px/1 var(--font-title);text-decoration:none;white-space:nowrap}.wordmark span{color:var(--accent);margin-left:6px}.meta{font-size:12px;letter-spacing:.08em}.intro{padding:72px 0 48px;display:grid;grid-template-columns:2fr 1fr;gap:64px}.eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.intro h1{font:400 clamp(64px,8vw,112px)/.94 var(--font-title);margin:24px 0}.intro p:last-child{max-width:600px;color:var(--muted)}.intro aside{padding-top:48px;font-size:14px;color:var(--muted)}.section{padding:48px 0;border-top:1px solid var(--line)}.section-heading{display:grid;grid-template-columns:1fr 2fr;gap:24px;align-items:start;margin-bottom:32px}.section h2{font:400 var(--title-section)/1 var(--font-title)}.section-heading p{max-width:560px;color:var(--muted);font-size:14px}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.swatch{height:180px;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--c);color:var(--t);border:1px solid var(--line)}.swatch b{font-size:20px;font-weight:500}.swatch span{font-size:14px}.secondary-colors{display:flex;gap:32px;flex-wrap:wrap;font-size:14px;margin-top:24px}.type-line{display:flex;justify-content:space-between;gap:24px;padding:20px 0;border-top:1px solid var(--line);align-items:baseline}.type-line span:last-child{font-size:12px;color:var(--muted);white-space:nowrap}.display-sample{font:400 clamp(58px,6vw,96px)/1 var(--font-title)}.section-sample{font:400 52px/1 var(--font-title)}.body-sample{font-size:16px;max-width:630px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:48px}.controls h3,.logos h3{font-size:14px;font-weight:600;margin-bottom:20px}.button-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.primary,.secondary,.state-hover{min-height:48px;padding:12px 18px;display:inline-flex;align-items:center;gap:20px;border:1px solid transparent;background:var(--accent);color:var(--on-accent);transition:background var(--motion-control) var(--ease)}.primary:hover,.state-hover{background:var(--ink)}.secondary{background:transparent;color:var(--ink);border-color:var(--muted)}.secondary:hover{border-color:var(--ink)}.button-row svg{width:20px;height:20px}.icon-example{width:24px;height:24px;color:inherit}.sizes{display:flex;gap:8px;margin:20px 0}.sizes button{min-height:44px;min-width:44px;border:1px solid var(--muted);background:transparent}.sizes button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.sizes button:disabled{color:var(--muted);text-decoration:line-through;background:var(--stage)}label{display:block;font-size:14px;margin-bottom:8px}input{width:100%;max-width:430px;min-height:48px;padding:12px;border:1px solid var(--muted);background:var(--paper);color:var(--ink);border-radius:0}input[aria-invalid=true]{border-color:var(--danger)}.hint{font-size:14px;color:var(--muted);margin-top:10px}.error{font-size:14px;color:var(--danger);margin-top:10px}.success{font-size:14px;color:var(--success);margin-top:16px}.icon-row{display:flex;gap:28px;flex-wrap:wrap}.icon-row figure{margin:0;width:125px}.icon-row figcaption{font-size:12px;color:var(--muted);margin-top:14px}.logos{display:grid;grid-template-columns:1fr 1fr;gap:24px}.logo-panel{padding:32px;border:1px solid var(--line);min-height:165px}.logo-panel.dark{background:var(--ink);color:var(--paper)}.logo-big{font:400 80px/1 var(--font-title)}.logo-big span{margin-left:6px;color:var(--accent)}.logo-panel.dark span{color:var(--paper)}.grid-demo{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;min-height:110px}.grid-demo div{background:var(--stage);display:grid;place-items:center;font-size:14px}.motion-box{padding:32px;background:var(--stage);display:flex;justify-content:space-between;align-items:center;gap:32px}.motion-target{max-width:260px;background:var(--paper);padding:24px;font:400 32px/1 var(--font-title)}footer{padding:32px 0;font-size:14px;color:var(--muted)}@media(max-width:699px){header{align-items:flex-start;gap:16px}.wordmark{font-size:32px}.meta{max-width:150px;font-size:10px}.intro{padding:40px 0;display:block}.intro aside{padding-top:24px}.intro h1{font-size:76px}.section{padding:32px 0}.section-heading{display:block}.section-heading p{margin-top:20px}.palette{grid-template-columns:1fr 1fr;gap:12px}.swatch{height:145px;padding:14px}.swatch b{font-size:17px}.secondary-colors{gap:16px}.type-line{display:block}.type-line span:last-child{display:block;margin-top:14px}.display-sample{font-size:58px}.section-sample{font-size:42px}.controls,.logos{grid-template-columns:1fr;gap:32px}.logo-big{font-size:64px}.logo-panel{padding:24px}.grid-demo{grid-template-columns:repeat(4,1fr);gap:16px}.grid-demo div:nth-child(n+5){display:none}.motion-box{padding:24px;display:block}.motion-box button{margin-top:24px}.icon-row{gap:24px}.icon-row figure{width:130px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}