.design-shell{grid-template-columns:180px minmax(0,1fr);gap:3rem;padding-block:4rem 5rem;display:grid}.design-shell aside{align-self:start;position:sticky;top:8rem}.design-nav{gap:.25rem;display:grid}.design-nav a{min-height:44px;color:var(--muted);border-radius:10px;padding:.6rem .75rem;font-size:.875rem}.design-nav a[aria-current]{color:var(--text);background:var(--tint)}.design-nav a:hover{color:var(--text)}.design-download{text-underline-offset:4px;color:var(--muted);margin-top:1rem;padding-block:1rem;font-size:.75rem;text-decoration:underline;display:inline-flex}.design-content{min-width:0}.chapter-head{border-bottom:1px solid var(--line);padding-bottom:3rem}.chapter-head h1{font-size:var(--type-h1);margin-top:1.25rem;line-height:1.05}.chapter-head>p:last-child{color:var(--muted);max-width:42rem;margin-top:1.5rem}.specimen-section{margin-top:3.5rem}.specimen-section>h2{font-size:1.8rem}.specimen-description{max-width:44rem;color:var(--muted);margin-top:.75rem}.specimen{border:1px solid var(--line);border-radius:14px;min-width:0;margin-top:1.5rem;padding:2rem}.specimen p{max-width:44rem}.specimen p+p{margin-top:1rem}.specimen code{overflow-wrap:anywhere;font-size:.8125rem}.specimen-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;display:grid}.specimen-grid>*{min-width:0}.specimen-plate{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:2rem}.specimen-plate p{color:var(--muted);font-size:.875rem}.specimen-label{color:var(--muted);margin-bottom:1rem;font-size:.75rem}.chapter-next{border-top:1px solid var(--line);margin-top:4rem;padding-top:2rem}.chapter-next>a{font-size:2rem;font-family:var(--font-display);justify-content:space-between;align-items:center;gap:1rem;margin-top:.5rem;display:flex}.chapter-list{margin-top:2rem}.chapter-list>a{border-bottom:1px solid var(--line);grid-template-columns:44px 1fr 40px;align-items:center;gap:1.5rem;padding:1.5rem 0;display:grid}.chapter-list h2{font-size:1.7rem}.chapter-list p{color:var(--muted);font-size:.875rem}.chapter-list>a:hover h2{color:var(--accent-ink)}.brand-stage{border-radius:14px;grid-template-columns:1fr 1fr;min-height:330px;margin-top:2rem;display:grid;overflow:hidden}.brand-stage>div{background:var(--page);color:var(--text);border:1px solid var(--line);justify-content:center;align-items:center;display:flex}.brand-stage svg{width:auto;height:180px}.brand-sizes{flex-wrap:wrap;align-items:end;gap:2rem;display:flex}.brand-sizes figure{justify-items:center;gap:1rem;display:grid}.brand-sizes figcaption{color:var(--muted);font-size:.75rem}.brand-clearspace{border:1px dashed var(--field);max-width:100%;padding:38px;display:inline-flex}.brand-clearspace svg{width:116px;max-width:100%;height:auto}.download-list{flex-wrap:wrap;gap:1rem;margin-top:1.5rem;display:flex}.download-list a{text-underline-offset:4px;align-items:center;min-height:44px;font-size:.875rem;text-decoration:underline;display:inline-flex}.copy-control{flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.75rem;display:inline-flex}.copy-button{border:1px solid var(--line);min-height:44px;color:var(--text);border-radius:10px;align-items:center;gap:.5rem;padding:.5rem .75rem;display:inline-flex}.copy-button:hover{background:var(--tint)}.copy-status{color:var(--muted);font-size:.7rem}.code-example{border-top:1px solid var(--line);margin-top:1.5rem;padding-top:1rem}.code-example pre{padding:1rem 0;font-size:.8125rem;line-height:1.7;overflow:auto}.control-row{flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.control-row label,.control-label{gap:.5rem;font-size:.8125rem;display:grid}.design-input{border:1px solid var(--field);background:var(--surface);color:var(--text);border-radius:10px;width:100%;min-width:0;max-width:100%;min-height:44px;padding:.65rem .75rem;font-size:1rem}.design-input:disabled{opacity:.6}.token-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.token{border-bottom:1px solid var(--line);grid-template-columns:52px 1fr;align-items:start;gap:1rem;padding:1rem 0;display:grid}.token-swatch{border:1px solid var(--field);border-radius:10px;height:52px}.token code{display:block}.token p{color:var(--muted);margin-block:.25rem .5rem;font-size:.75rem}.token .copy-button{padding:.25rem .5rem}.contrast-preview{border:1px solid var(--line);border-radius:10px;flex-direction:column;justify-content:center;min-height:180px;padding:2rem;display:flex}.contrast-preview strong{font-family:var(--font-display);font-size:2rem;line-height:1.2}.contrast-result{flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1rem;display:flex}.contrast-result output{font-size:2.25rem;font-family:var(--font-display)}.contrast-result p{font-size:.875rem}.type-sample{border-bottom:1px solid var(--line);overflow-wrap:anywhere;padding:2rem 0}.type-sample>p:first-child{margin-bottom:1rem}.type-edit{resize:vertical;width:100%}.type-controls{grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1rem;display:grid}.type-controls input[type=range]{width:100%;min-height:32px}.motion-toolbar{flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem;display:flex}.motion-stage{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.motion-lane{border:1px solid var(--line);background:var(--surface);min-height:300px;padding:1rem 1rem 6rem;position:relative;overflow:hidden}.motion-lane>p{color:var(--muted);margin-bottom:3rem;font-size:.75rem}.motion-card{background:var(--accent);color:var(--on-accent);border-radius:14px;align-items:center;gap:1rem;min-height:100px;padding:1rem;display:flex}.motion-card svg{width:auto;height:48px}.motion-card span{font-size:.875rem}.motion-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:2rem;display:grid}.motion-controls input[type=range]{width:100%;min-height:36px}.motion-controls label{gap:.5rem;font-size:.875rem;display:grid}.motion-json{font-family:var(--font-mono);resize:vertical;width:100%;min-height:170px;font-size:.75rem}.motion-status{color:var(--muted);min-height:1.5rem;margin-top:1rem;font-size:.8125rem}@media (max-width:1000px){.design-shell{grid-template-columns:140px minmax(0,1fr);gap:2rem}.token-grid{grid-template-columns:1fr}}@media (max-width:768px){.design-shell{grid-template-columns:1fr;gap:2rem;padding-top:1.5rem}.design-shell aside{position:static}.design-shell aside>p,.design-download{display:none}.design-nav{flex-wrap:wrap;gap:.25rem;display:flex}.design-nav a{padding:.5rem .65rem}.specimen{padding:1.25rem}.specimen-grid{grid-template-columns:minmax(0,1fr)}.chapter-head{padding-bottom:2rem}.brand-stage{min-height:230px}.brand-stage svg{height:130px}.chapter-list>a{grid-template-columns:28px 1fr 24px;gap:.75rem}.motion-stage{grid-template-columns:1fr}.motion-lane{min-height:190px}.motion-lane>p{margin-bottom:2rem}.motion-controls,.type-controls{grid-template-columns:1fr}}.demo-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.demo-tabs{border:1px solid var(--line);border-radius:12px;gap:4px;padding:4px;display:flex}.demo-tabs button{border-radius:10px;min-height:40px;padding:.4rem 1rem;font-size:.8125rem}.demo-tabs [aria-selected=true]{background:var(--tint);color:var(--text)}.demo-theme{color:var(--muted);align-items:center;gap:.75rem;font-size:.75rem;display:flex}.demo-theme select{background:var(--surface);color:var(--text);border:1px solid var(--field);border-radius:10px;min-height:44px;padding:.5rem}.demo-surface{background:var(--page);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:2rem}.demo-note{color:var(--muted);margin-top:1rem;font-size:.75rem}.semantic-preview{border:1px solid var(--line);background:var(--page);color:var(--text);border-radius:14px;margin-block:2rem;padding:2rem}.semantic-preview>p{color:var(--muted);margin:.75rem 0 1.5rem}.pair-presets{flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem;display:flex}.pair-presets button{border:1px solid var(--line);border-radius:10px;min-height:44px;padding:.4rem .75rem;font-size:.75rem}.pair-presets button[aria-pressed=true]{background:var(--tint);border-color:var(--field)}@media (max-width:768px){.demo-surface,.semantic-preview{padding:1.25rem}}.motion-view{background:var(--page);padding-block:.5rem;container-type:inline-size}.motion-view[data-view=isolated] .motion-lane:first-child{display:none}.motion-view[data-view=isolated] .motion-stage{grid-template-columns:1fr}.motion-card{width:calc(100% - 80px);max-width:280px}.motion-card span{min-width:0}@container (max-width:620px){.motion-stage{grid-template-columns:1fr}}@media (max-width:768px){.motion-view:not([data-view=comparison]){z-index:10;border-bottom:1px solid var(--line);position:sticky;top:76px}.motion-view[data-view=responsive] .motion-lane:first-child{display:none}.motion-lane{min-height:168px;padding:1rem 1rem 5.25rem}.motion-lane>p{margin-bottom:.75rem}.motion-card{justify-content:center;width:56px;min-height:56px;padding:8px}.motion-card svg{flex-shrink:0;height:40px}.motion-card span{display:none}.motion-view .motion-toolbar{margin-top:.75rem;margin-bottom:.25rem}}.copy-fallback{overflow-wrap:anywhere;white-space:pre-wrap;-webkit-user-select:all;user-select:all;max-width:100%;display:block}.brand-application-header{border:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;margin-bottom:1.5rem;padding:1.5rem;display:flex}.brand-social-card{border:1px solid var(--line);width:100%;height:auto}.design-content{border:1px solid var(--line);background:var(--surface);border-radius:22px;padding:40px}.design-shell aside{padding:20px 0}.chapter-head h1{letter-spacing:-.045em;font-size:clamp(2.4rem,4vw,3.8rem)}.chapter-head .label{color:var(--accent-ink)}.specimen{background:var(--page)}.chapter-list>a{border-radius:10px;padding-inline:12px}.chapter-list>a:hover{background:var(--page)}@media (max-width:1000px){.design-content{padding:28px}}@media (max-width:768px){.design-content{border-radius:16px;padding:24px 18px}.design-shell aside{padding:0}.design-shell{padding-top:28px}.motion-view:not([data-view=comparison]){top:88px}}.font-study{padding:0}.font-comparison{grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:20px;display:grid}.font-candidate{border:1px solid var(--line);overflow-wrap:anywhere;border-radius:12px;padding:24px;font-size:.875rem}.showcase-compact,.showcase-compact .showcase-navigation{margin-top:16px}.showcase-lab-preview{background:var(--page);padding-top:8px}@media (max-width:768px){.showcase-compact .showcase-caption{display:none}.showcase-compact .showcase-tabs{display:flex}.showcase-compact .showcase-tabs button{padding-inline:.4rem;font-size:.6875rem}.showcase-lab-preview{z-index:15;border-bottom:1px solid var(--line);padding-block:10px;position:sticky;top:90px}.showcase-lab-preview>.motion-toolbar{gap:8px;margin-bottom:8px}.showcase-lab-preview>.motion-toolbar .button{min-height:40px;padding:8px 12px}}.showcase-lab-status{color:var(--muted);min-height:24px;margin-top:16px;font-size:.8125rem}@media (max-height:650px){.showcase-lab-preview{position:static}}.pattern-index{border-top:1px solid var(--line);margin-top:4rem;padding-top:2rem}.pattern-index>p{margin-bottom:1.5rem}.pattern-list{gap:0;margin-top:1rem;list-style:none;display:grid}.pattern-list li+li{border-top:1px solid var(--line)}.pattern-list a{padding:1.5rem 0;display:block}.pattern-list a:hover h3{color:var(--accent-ink)}.pattern-list h3{margin-block:.5rem;font-size:1.25rem}.pattern-list p,.pattern-list code{color:var(--muted);font-size:.8125rem}.pattern-list code{overflow-wrap:anywhere;margin-top:.75rem;display:block}.site-preview{border:1px solid var(--field);background:var(--page);border-radius:12px;width:100%;height:580px;display:block}.pattern-guidance>div+div{border-top:1px solid var(--line);margin-top:1.5rem;padding-top:1.5rem}.pattern-guidance dt{margin-bottom:.5rem;font-weight:650}.pattern-guidance dd{color:var(--muted)}.spacing-reference{gap:1rem;margin-block:1.5rem;display:grid}.spacing-reference>div{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:center;gap:1rem;font-size:.8125rem;display:grid}.spacing-reference span{background:var(--accent-ink);max-width:100%;height:8px;display:block}.brand-orbit-reference{max-width:400px;margin:1.5rem auto}@media (max-width:768px){.spacing-reference>div{grid-template-columns:minmax(0,1fr);gap:.375rem}.site-preview{width:calc(100vw - 40px);height:480px;margin-inline:calc(50% - 50vw + 20px)}}.social-crop{max-width:100%;margin-inline:auto}.social-crop[data-crop=square]{aspect-ratio:1;width:min(100%,400px);overflow:hidden}.social-crop[data-crop=square] img{object-fit:cover;width:100%;height:100%}.social-crop[data-crop=small]{width:min(100%,320px)}.social-preview button[aria-pressed=true]{background:var(--tint);border-color:var(--accent-ink)}