.gallery-shell{grid-template-columns:224px minmax(0,1fr);min-block-size:100dvh;display:grid}.gallery-index{block-size:100dvh;padding:var(--space-8) var(--space-4) var(--space-6);color:var(--color-on-inverse);flex-direction:column;align-self:start;display:flex;position:sticky;inset-block-start:0}.wordmark{align-items:center;gap:var(--space-3);inline-size:fit-content;margin:0 var(--space-2) var(--space-12);font-size:var(--text-lg);letter-spacing:-.035em;font-weight:600;text-decoration:none;display:flex}.wordmark-suffix{color:var(--color-inverse-muted);font-size:var(--text-base);letter-spacing:0;font-weight:400}.brand-mark{border:6px solid;border-radius:50%;flex:none;block-size:24px;inline-size:24px}.index-heading{margin:0 var(--space-3) var(--space-3);color:var(--color-inverse-muted);letter-spacing:.1em;font-size:10px;font-weight:500}.index-current{align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-neutral-700);border-radius:var(--radius-control);background:linear-gradient(var(--color-neutral-800), var(--color-neutral-900));font-weight:500;display:flex;box-shadow:inset 0 1px #ffffff0d}.index-count{color:var(--color-inverse-muted);font-size:var(--text-xs);margin-inline-start:auto}.gallery-page-nav{gap:var(--space-1);display:grid}.index-page-link{align-items:center;gap:var(--space-3);min-block-size:44px;padding:var(--space-3);border-radius:var(--radius-control);color:var(--color-inverse-muted);font-size:var(--text-base);border:1px solid #0000;text-decoration:none;display:flex}.index-page-link:hover{color:var(--color-on-inverse);background:var(--color-inverse-hover)}.index-page-link.index-current{border-color:var(--color-neutral-700);color:var(--color-on-inverse)}.index-links{padding:var(--space-2) 0;margin:0;list-style:none}.index-links a{align-items:center;gap:var(--space-3);min-block-size:40px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-control);color:var(--color-inverse-muted);font-size:var(--text-sm);transition:color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);text-decoration:none;display:flex}.index-links a:hover{background:var(--color-inverse-hover);color:var(--color-on-inverse)}.index-number{inline-size:18px;font-family:var(--font-mono);flex:none;font-size:10px}.index-footer{align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-2) 0;border-block-start:1px solid var(--color-neutral-800);font-size:var(--text-xs);margin-block-start:auto;display:flex}.index-footer-note{color:var(--color-inverse-muted);margin-block-start:var(--space-1);font-size:10px}.gallery-workspace{min-inline-size:0;margin:var(--space-2) var(--space-2) var(--space-2) 0;border-radius:var(--radius-workspace);background:var(--color-surface)}.gallery-workspace:focus{outline-offset:-6px}.workspace-header{justify-content:space-between;align-items:center;gap:var(--space-4);min-block-size:72px;padding:var(--space-4) var(--space-6);border-block-end:1px solid var(--color-line);display:flex}.breadcrumb{align-items:center;gap:var(--space-3);color:var(--color-ink-secondary);font-size:var(--text-sm);flex-wrap:wrap;display:flex}.breadcrumb-divider{color:var(--color-ink-muted)}.guide-link{align-items:center;gap:var(--space-2);white-space:nowrap;min-block-size:36px;font-size:var(--text-sm);text-decoration:none;display:flex}.guide-link:hover{text-decoration:underline}.gallery-content{padding-block:var(--space-10) var(--space-12)}.eyebrow{color:var(--color-ink-secondary);letter-spacing:.12em;font-size:10px;font-weight:600}.baseline-tag{align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border:1px solid var(--color-line);border-radius:var(--radius-pill);color:var(--color-ink-secondary);font-size:11px;display:inline-flex}.baseline-tag>span{background:var(--color-success);border-radius:50%;block-size:6px;inline-size:6px}.page-heading h1{margin-block:var(--space-4) var(--space-3);font-size:var(--text-2xl);line-height:var(--text-2xl--line-height);letter-spacing:var(--tracking-heading);font-weight:600}.page-description{color:var(--color-ink-secondary);font-size:var(--text-md);line-height:1.7}.foundation-meta{margin-block-start:var(--space-6)}.foundation-meta>span{padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:var(--color-canvas);color:var(--color-ink-secondary);font-size:11px;display:inline-block}.foundation-section{scroll-margin-block-start:var(--space-6)}.section-heading{justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;margin-block-end:var(--space-4);display:flex}.section-heading>div{align-items:center;gap:var(--space-3);display:flex}.section-number{color:var(--color-ink-muted);font-family:var(--font-mono);font-size:11px}.section-heading h2{font-size:var(--text-md);letter-spacing:-.015em;font-weight:600}.section-note{color:var(--color-ink-muted);font-size:var(--text-xs)}.specimen-panel{border:1px solid var(--color-line);border-radius:var(--radius-panel);background:var(--color-surface);box-shadow:var(--shadow-subtle);overflow:clip}.panel-heading{padding:var(--space-5) var(--space-5) 0}.specimen-panel h3{font-size:var(--text-base);font-weight:600}.panel-heading p,.type-intro p,.focus-panel p,.layout-toolbar p{color:var(--color-ink-secondary);font-size:var(--text-sm);margin-block-start:var(--space-1)}.neutral-palette{gap:var(--space-3);padding:var(--space-5);grid-template-columns:repeat(7,minmax(0,1fr));display:grid}.color-chip{border-radius:var(--radius-control);border:1px solid #0b0b0d14;block-size:80px}.sample-label{margin-block:var(--space-3) 2px;font-size:11px;font-weight:500}.color-sample code{color:var(--color-ink-secondary);font-size:10px}.semantic-list{gap:var(--space-3);padding:var(--space-4) var(--space-5);border-block-start:1px solid var(--color-line);background:var(--color-canvas);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.semantic-list>div{column-gap:var(--space-2);grid-template-columns:10px 1fr;align-items:center;row-gap:2px;font-size:11px;display:grid}.semantic-list code{color:var(--color-ink-secondary);grid-column:2;font-size:10px}.role-dot{border:1px solid var(--color-control);border-radius:3px;block-size:10px;inline-size:10px}.status-palette{gap:var(--space-3);grid-template-columns:repeat(4,minmax(0,1fr));margin-block-start:var(--space-3);display:grid}.status-sample{align-items:start;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-control);color:var(--status-color);background:var(--status-bg);display:flex}.status-sample p{font-size:var(--text-xs);font-weight:600}.status-sample div>span{margin-block-start:2px;font-size:10px;display:block}.status-symbol{margin-block-start:1px}.annotation{color:var(--color-ink-secondary);font-size:var(--text-xs);margin-block-start:var(--space-3);line-height:1.7}.annotation code{color:var(--color-ink);font-size:11px}.type-intro{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-block-end:1px solid var(--color-line);display:flex}.type-alphabet{color:var(--color-ink);letter-spacing:-.06em;font-size:44px;font-weight:500;line-height:1.2}.type-row{align-items:center;gap:var(--space-6);min-block-size:68px;margin-inline:var(--space-5);padding-block:var(--space-3);grid-template-columns:190px minmax(0,1fr);display:grid}.type-row+.type-row{border-block-start:1px solid var(--color-line)}.type-metadata{flex-direction:column;gap:2px;display:flex}.type-metadata code{font-size:11px}.type-metadata span{color:var(--color-ink-secondary);font-size:11px}.mono-specimen{justify-content:space-between;gap:var(--space-2) var(--space-4);padding:var(--space-4) var(--space-5);border-block-start:1px solid var(--color-line);background:var(--color-canvas);flex-wrap:wrap;font-size:11px;display:flex}.space-scale{gap:var(--space-2) var(--space-12);padding:var(--space-5);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.space-row{align-items:center;gap:var(--space-3);grid-template-columns:72px minmax(0,1fr) 34px;min-block-size:28px;display:grid}.space-row code{font-size:11px}.space-row>span{color:var(--color-ink-secondary);font-family:var(--font-mono);text-align:end;font-size:10px}.space-track{padding-block:var(--space-2);border-inline-start:1px solid var(--color-line)}.space-track>div{background:var(--color-neutral-800);border-radius:0 3px 3px 0;block-size:8px}.spacing-guidance{justify-content:space-between;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-block-start:1px solid var(--color-line);background:var(--color-canvas);color:var(--color-ink-secondary);flex-wrap:wrap;font-size:10px;display:flex}.spacing-guidance strong{color:var(--color-ink);margin-block-end:2px;font-size:11px;font-weight:500;display:block}.shape-grid{gap:var(--space-4);grid-template-columns:1.15fr 1fr;display:grid}.radius-samples,.elevation-samples{justify-content:space-between;gap:var(--space-3);padding:var(--space-6) var(--space-5) var(--space-5);display:flex}.radius-samples>div,.elevation-samples>div{align-items:center;gap:var(--space-1);flex-direction:column;min-inline-size:0;display:flex}.radius-shape{block-size:44px;inline-size:44px;border:1px solid var(--color-control);background:var(--color-surface-subtle);margin-block-end:var(--space-2)}.radius-samples code,.elevation-samples code{font-size:10px}.radius-samples span{color:var(--color-ink-secondary);font-size:10px}.elevation-shape{block-size:44px;inline-size:64px;border:1px solid var(--color-line);border-radius:var(--radius-control);background:var(--color-surface);margin-block-end:var(--space-2)}.focus-panel{align-items:center;gap:var(--space-6);padding:var(--space-5);grid-template-columns:1fr 1.4fr;display:grid}.focus-panel .keyboard-hint{color:var(--color-ink-secondary);font-size:var(--text-xs);margin-block-start:var(--space-4)}kbd{padding:2px var(--space-1);border:1px solid var(--color-control);background:var(--color-surface);font-family:var(--font-mono);border-radius:4px;font-size:10px}.focus-specimens{border:1px solid var(--color-line);border-radius:var(--radius-control);grid-template-columns:repeat(2,minmax(0,1fr));display:grid;overflow:clip}.focus-light,.focus-dark{padding:var(--space-8) var(--space-4);justify-content:center;align-items:center;display:flex}.focus-dark{color:var(--color-on-inverse);background:var(--color-inverse)}.focus-example{justify-content:center;align-items:center;gap:var(--space-2);min-block-size:36px;padding:var(--space-2) var(--space-3);border:1px solid var(--color-control);border-radius:var(--radius-control);box-shadow:0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-focus);font-size:11px;text-decoration:none;display:flex}.focus-dark .focus-example{box-shadow:0 0 0 3px var(--color-inverse), 0 0 0 5px var(--color-on-inverse)}.focus-example:hover{text-decoration:underline}.motion-tokens{gap:var(--space-4);padding:var(--space-5);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.motion-tokens>div{gap:var(--space-1);flex-direction:column;display:flex}.motion-label{font-size:var(--text-xs);font-weight:500}.motion-tokens strong{font-size:var(--text-xl);letter-spacing:var(--tracking-heading);font-weight:500}.motion-tokens div>span:last-child{color:var(--color-ink-secondary);font-size:11px}.gallery-action{--press-border:var(--color-control);--press-background:var(--color-surface);--press-shadow:var(--shadow-subtle);justify-content:center;align-items:center;gap:var(--space-3);min-block-size:var(--target-comfortable);padding:var(--space-2) var(--space-3);border:1px solid var(--press-border);border-radius:var(--radius-control);background:var(--press-background);box-shadow:var(--press-shadow);font-size:var(--text-xs);flex:none;display:flex}.gallery-action:hover{--press-background:var(--color-surface-subtle)}.gallery-action.ui-press{box-shadow:none;background:0 0;border-color:#0000}.panel-footnote{justify-content:space-between;gap:var(--space-2);padding:var(--space-4) var(--space-5);color:var(--color-ink-secondary);flex-wrap:wrap;font-size:11px;display:flex}.layout-toolbar{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-5);flex-wrap:wrap;display:flex}.gap-control{align-items:center;gap:var(--space-2);color:var(--color-ink-secondary);font-size:var(--text-xs);display:flex}.gap-control select{min-block-size:var(--target-comfortable);padding:var(--space-2);border:1px solid var(--color-control);border-radius:var(--radius-control);color:var(--color-ink);background:var(--color-surface)}.layout-stage{padding:var(--space-6) var(--space-5);border-block:1px solid var(--color-line);background:var(--color-canvas)}.container-demo{padding-block:var(--space-4);border:1px dashed var(--color-control);border-radius:var(--radius-control);background:var(--color-surface)}.container-caption{justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-block-end:var(--space-4);font-size:11px;display:flex}.container-caption>span{font-weight:600}.container-caption code{color:var(--color-ink-secondary);font-size:10px}.layout-block{justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-canvas);flex:120px;display:flex}.stack-demo>.layout-block{flex:initial}.layout-block>span:last-child{color:var(--color-ink-secondary);font-size:10px}.block-line{border-radius:var(--radius-pill);background:var(--color-neutral-300);block-size:6px;inline-size:40px}.block-line-long{inline-size:80px}.block-line-short{inline-size:56px}.code-sample{padding:var(--space-4) var(--space-5);background:var(--color-surface)}.code-sample code{color:var(--color-ink-secondary);white-space:pre-wrap;font-size:11px;line-height:1.8;display:block}.usage-notes{gap:var(--space-4) var(--space-8);border-block-start:1px solid var(--color-line);grid-template-columns:1fr auto;padding-block-start:var(--space-6);scroll-margin-block-start:var(--space-6);display:grid}.usage-notes h2{font-size:var(--text-base);font-weight:600}.usage-notes p{max-inline-size:56ch;color:var(--color-ink-secondary);font-size:var(--text-xs);margin-block-start:var(--space-2)}.usage-paths{justify-content:center;gap:var(--space-2);color:var(--color-ink-secondary);flex-direction:column;font-size:10px;display:flex}.usage-notes>.annotation{grid-column:1/-1}.workspace-footer{justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-6);border-block-start:1px solid var(--color-line);color:var(--color-ink-secondary);font-size:11px;display:flex}.workspace-footer>span:first-child{color:var(--color-ink);font-weight:600}@media (width<70rem){.gallery-shell{grid-template-columns:200px minmax(0,1fr)}.shape-grid,.focus-panel{grid-template-columns:1fr}.type-row{gap:var(--space-4);grid-template-columns:150px minmax(0,1fr)}.status-palette,.semantic-list{grid-template-columns:repeat(2,minmax(0,1fr))}.space-scale{gap:var(--space-2) var(--space-5)}.usage-notes{grid-template-columns:1fr}}@media (width<50rem){.gallery-shell{grid-template-columns:minmax(0,1fr)}.gallery-index{block-size:auto;padding:var(--space-5) var(--space-4) var(--space-3);position:static}.wordmark{margin:0 var(--space-2) var(--space-5)}.index-heading,.index-current,.index-footer{display:none}.gallery-page-nav{gap:var(--space-2);flex-wrap:wrap;margin-block-end:var(--space-3);display:flex}.gallery-page-nav .index-current{display:flex}.index-page-link{padding:var(--space-2);font-size:var(--text-xs);flex:1}.index-links{gap:var(--space-1);grid-template-columns:repeat(3,minmax(0,1fr));padding:0;display:grid}.index-links a{min-block-size:36px;padding:var(--space-2);gap:var(--space-2);font-size:11px}.index-number{inline-size:auto}.gallery-workspace{margin:0 var(--space-2) var(--space-2)}.workspace-header{padding:var(--space-4);min-block-size:64px}.breadcrumb{gap:var(--space-2);font-size:11px}.guide-link{gap:var(--space-1);font-size:11px}}@media (width<35rem){.gallery-content{padding-block-start:var(--space-6)}.page-heading h1{font-size:var(--text-xl)}.page-description{font-size:var(--text-base)}.desktop-break,.section-note{display:none}.neutral-palette{gap:var(--space-4) var(--space-2);padding:var(--space-4);grid-template-columns:repeat(4,minmax(0,1fr))}.color-chip{block-size:56px}.semantic-list{padding:var(--space-4)}.type-row{gap:var(--space-2);padding-block:var(--space-4);grid-template-columns:minmax(0,1fr)}.type-metadata{justify-content:space-between;gap:var(--space-2);flex-flow:wrap}.type-row>p{font-size:min(8vw, var(--text-2xl))}.space-scale{grid-template-columns:minmax(0,1fr)}.radius-samples{gap:var(--space-2);padding-inline:var(--space-4)}.radius-shape{block-size:32px;inline-size:32px}.radius-samples code{font-size:9px}.focus-panel{padding:var(--space-4)}.focus-specimens{grid-template-columns:minmax(0,1fr)}.motion-tokens{gap:var(--space-3);padding:var(--space-4)}.motion-tokens strong{font-size:var(--text-lg)}.motion-tokens div>span:last-child{font-size:10px}.layout-stage{padding:var(--space-4)}.layout-block{flex-basis:100%}.index-links{grid-template-columns:repeat(2,minmax(0,1fr))}.baseline-tag{font-size:10px}}@media (forced-colors:active){.index-current,.color-chip,.status-sample,.focus-example,.radius-shape,.elevation-shape,.layout-block,.gallery-action{border:1px solid canvastext}.focus-example{outline:var(--focus-width) solid Highlight;outline-offset:var(--focus-offset)}.role-dot,.brand-mark{border-color:canvastext}}