:root{--book-width:67.5rem;--book-shell-width:90rem;--book-sidebar-width:15rem;--book-gutter:clamp(1rem, 3vw, 2rem);--book-header-height:var(--phi-2)}*{box-sizing:border-box}html{scroll-padding-block-start:calc(var(--book-header-height) + 1rem)}body[data-layout=specimen-book]{background:var(--background);min-inline-size:20rem;color:var(--foreground);font-family:var(--font-content);font-size:var(--font-size-body);line-height:var(--lh-body);margin:0}body[data-layout=specimen-book] button,body[data-layout=specimen-book] input{font:inherit}body[data-layout=specimen-book] :where(a,button,input,summary):focus-visible{outline:2px solid var(--ring);outline-offset:3px}.skip-link{z-index:100;padding:var(--phi-neg2) var(--phi-neg1);border-radius:var(--radius);background:var(--foreground);color:var(--background);font-size:var(--font-size-small);transform:translateY(calc(-100% - var(--phi-neg1)));text-decoration:none;position:fixed;inset-block-start:var(--phi-neg1);inset-inline-start:var(--phi-neg1)}.skip-link:focus{transform:translateY(0)}.book{inline-size:min(100%, var(--book-width));padding-inline:var(--book-gutter);margin-inline:auto;container:book/inline-size}.book-shell{grid-template-columns:var(--book-sidebar-width) minmax(0, 1fr);gap:var(--phi-1);inline-size:min(100%, var(--book-shell-width));padding-inline:var(--book-gutter);margin-inline:auto;display:grid}.book-shell>.book{inline-size:100%;min-inline-size:0;margin-inline:0;padding-inline:0}.design-system-sidebar{block-size:calc(100dvh - var(--book-header-height));border-inline-end:1px solid var(--border);scrollbar-width:thin;align-self:start;position:sticky;inset-block-start:var(--book-header-height);overflow-y:auto}.sidebar-toggle{display:none}.sidebar-panel{padding:var(--phi-1) var(--phi-0) var(--phi-2) 0}.sidebar-search{z-index:1;background:var(--background);padding-block-end:var(--phi-0);display:block;position:sticky;inset-block-start:0}.sidebar-search>span{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.sidebar-search input{min-block-size:2.5rem;inline-size:100%;padding-inline:var(--phi-neg1);border:1px solid var(--border);border-radius:var(--radius);background:var(--background);color:var(--foreground);font-size:var(--font-size-caption)}.sidebar-search input::placeholder{color:var(--muted-foreground)}.sidebar-navigation :where(ul,li){margin:0;padding:0;list-style:none}.sidebar-root-list{margin-block-end:var(--phi-0)!important}.sidebar-page+.sidebar-page{margin-block-start:var(--phi-neg3)}.sidebar-page-row{grid-template-columns:minmax(0,1fr) 2.25rem;align-items:center;display:grid}.sidebar-page-row:has(.sidebar-link-root:only-child){grid-template-columns:1fr}.sidebar-page[data-current-category=true]>.sidebar-page-row .sidebar-link-root:not([aria-current=page]){color:var(--foreground);font-weight:500}.sidebar-disclosure{border-radius:calc(var(--radius) - .2rem);block-size:2.25rem;inline-size:2.25rem;color:var(--muted-foreground);cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:grid}.sidebar-disclosure:hover{background:var(--secondary);color:var(--foreground)}.sidebar-disclosure>span{line-height:1;transition:transform .18s}.sidebar-disclosure[aria-expanded=true]>span{transform:rotate(90deg)}.sidebar-page-sections{padding:var(--phi-neg2) 0 var(--phi-0) var(--phi-neg1)}.sidebar-page-sections[hidden]{display:none}.sidebar-group+.sidebar-group{margin-block-start:var(--phi-0)}.sidebar-group h2{margin:0 0 var(--phi-neg3);font-family:var(--font-content);font-size:var(--font-size-small);font-weight:600}.sidebar-group h2 a{min-block-size:2.25rem;color:var(--foreground);align-items:center;text-decoration:none;display:inline-flex}.sidebar-group h2 a:hover{color:var(--link)}.sidebar-context-group{border-block-start:1px solid var(--border);padding-block-start:var(--phi-0)}.sidebar-link{align-items:center;gap:var(--phi-neg2);min-block-size:2.25rem;padding:var(--phi-neg3) var(--phi-neg1);border-radius:calc(var(--radius) - .2rem);color:var(--muted-foreground);font-size:var(--font-size-small);text-decoration:none;display:flex}.sidebar-link>span{background:var(--border);border-radius:50%;flex:none;block-size:.3rem;inline-size:.3rem}.sidebar-link:hover{background:var(--secondary);color:var(--foreground)}.sidebar-link[aria-current=page]{color:var(--link);background:0 0;font-weight:600}.sidebar-link[aria-current=page]>span{background:var(--link)}.sidebar-link-root{font-weight:500}.sidebar-empty{margin:var(--phi-0) 0 0;color:var(--muted-foreground);font-size:var(--font-size-caption)}.book{padding-block:var(--phi-2) var(--phi-4)}.book-intro{scroll-margin-block-start:calc(var(--book-header-height) + 1rem)}.book-title{max-inline-size:44rem;font-size:clamp(2rem, 1.5rem + 2vw, var(--font-size-display));font-weight:var(--font-weight-page-title);letter-spacing:-.025em;line-height:var(--lh-tight);margin:0}.book-lead{max-inline-size:50rem;margin-block:var(--phi-neg1) 0;color:var(--muted-foreground)}.scope-note{gap:var(--phi-neg1);padding:var(--phi-0);border:1px solid var(--border);border-radius:var(--radius);background:var(--card);grid-template-columns:auto 1fr;align-items:start;margin-block-start:var(--phi-1);display:grid}.scope-note strong{color:var(--link)}.spec{margin-block-start:var(--phi-3);scroll-margin-block-start:calc(var(--book-header-height) + 1rem)}.spec>h2{margin:0 0 var(--phi-1);border-block-end:1px solid var(--border);font-size:var(--font-size-title2);font-weight:var(--font-weight-section);line-height:var(--lh-tight);padding-block-end:var(--phi-neg1)}.spec-item{margin-block-end:var(--phi-2);scroll-margin-block-start:calc(var(--book-header-height) + 1rem)}.spec-item>h3{margin:0 0 var(--phi-neg3);font-size:var(--font-size-title3);font-weight:var(--font-weight-subsection);line-height:var(--lh-tight)}.src{margin:0 0 var(--phi-0);color:var(--muted-foreground);font-size:var(--font-size-small)}code,pre{font-family:var(--font-mono)}.src code{font-size:.9em}.demo{padding:var(--phi-1);border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}.source-row{align-items:center;gap:var(--phi-neg2);margin:var(--phi-neg1) 0 0;color:var(--muted-foreground);font-size:var(--font-size-caption);flex-wrap:wrap;display:flex}.source-row strong{font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;font-size:.68rem}.source-row code{border-radius:calc(var(--radius) - .25rem);background:var(--muted);overflow-wrap:anywhere;max-inline-size:100%;padding:.15rem .35rem}.source-row a{max-inline-size:100%;color:inherit;transition:color var(--duration-fast) var(--ease-out);align-items:center;gap:.2rem;text-decoration:none;display:inline-flex}.source-row a:hover{color:var(--link)}.source-row a:hover code{text-underline-offset:.2em;text-decoration:underline}.source-row a:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:calc(var(--radius) - .25rem)}.source-row a svg{flex:none}.design-system-directory{gap:var(--phi-0);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.design-system-directory .spec-page-link{place-content:start normal;block-size:100%;display:grid}.design-system-directory .spec-page-link strong{font-size:var(--font-size-title3)}.design-system-directory .spec-page-link>span{color:var(--muted-foreground);font-size:var(--font-size-small)}.spec-page-link{justify-content:space-between;align-items:center;gap:var(--phi-0);padding:var(--phi-0);border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--foreground);text-decoration:none;transition:border-color .18s,color .18s;display:flex}.spec-page-link:hover{border-color:var(--link);color:var(--link)}.swatches{gap:var(--phi-0);grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));display:grid}.swatch{align-content:start;min-inline-size:0;display:grid}.swatch-color{block-size:3.5rem;border:1px solid var(--border);border-radius:calc(var(--radius) - .125rem);background:var(--swatch);margin-block-end:var(--phi-neg2)}.swatch strong{font-size:var(--font-size-small);font-weight:500}.swatch code,.swatch span{color:var(--muted-foreground);text-overflow:ellipsis;white-space:nowrap;font-size:.68rem;overflow:hidden}.swatch code{font-family:var(--font-mono)}.type-row{gap:var(--phi-1);min-inline-size:0;padding-block:var(--phi-neg1);border-block-end:1px solid var(--border);grid-template-columns:minmax(0,1fr) minmax(14rem,20rem);align-items:baseline;display:grid}.type-row:first-child{padding-block-start:0}.type-row:last-child{border:0;padding-block-end:0}.type-row>div{line-height:var(--lh-tight);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.type-row dl,.type-row dl>div{margin:0}.type-row dl>div{gap:var(--phi-neg2);color:var(--muted-foreground);font-size:var(--font-size-caption);grid-template-columns:3.5rem 1fr;display:grid}.type-row dd{margin:0}.spacing-list{gap:var(--phi-neg1);display:grid}.spacing-row{gap:var(--phi-0);color:var(--muted-foreground);font-size:var(--font-size-caption);grid-template-columns:3.5rem minmax(0,1fr) 7rem 4.5rem;align-items:center;display:grid}.spacing-bar{inline-size:min(100%, calc(var(--space) * 5));background:var(--link);border-radius:999px;block-size:.75rem;min-inline-size:.2rem}.grid-table{margin-block-start:var(--phi-1)}.radius-grid{gap:var(--phi-0);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.radius-grid>div{justify-items:center;gap:var(--phi-neg2);display:grid}.radius-sample{border:1px solid var(--border);background:var(--secondary);block-size:5rem;inline-size:6rem}.radius-sm{border-radius:calc(var(--radius) - 4px)}.radius-md{border-radius:calc(var(--radius) - 2px)}.radius-lg{border-radius:var(--radius)}.radius-full{border-radius:9999px}.radius-grid strong{font-size:var(--font-size-small)}.radius-grid code{color:var(--muted-foreground);font-size:.68rem}.component-demo{gap:var(--phi-1);display:grid}.button-row{gap:var(--phi-0);flex-wrap:wrap;align-items:center;display:flex}.tag-interaction{gap:var(--phi-0);border-block-start:1px solid var(--border);padding-block-start:var(--phi-0);display:grid}.tag-interaction h4,.tag-interaction p{margin:0}.tag-interaction h4{font-size:var(--font-size-body);font-weight:var(--font-weight-label)}.tag-interaction p{color:var(--muted-foreground);font-size:var(--font-size-small);margin-block-start:var(--phi-neg3)}.tag-interaction-preview{padding:var(--phi-0);border-radius:calc(var(--radius) - .125rem);background:var(--secondary)}.code-sample{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);margin-block-start:var(--phi-neg1);overflow:hidden}.code-sample pre{padding:var(--phi-0);margin:0;font-size:.78rem;line-height:1.7;overflow-x:auto}.input-grid{gap:var(--phi-0);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.input-grid label{gap:var(--phi-neg2);display:grid}.input-grid label>span{font-size:var(--font-size-small);font-weight:500}.card-demo{background:var(--secondary);place-items:center;display:grid}.specimen-card{inline-size:min(100%,34rem)}.specimen-card p{color:var(--muted-foreground);font-size:var(--font-size-small);margin:0}.page-demo{padding:0 0 var(--phi-1);background:var(--secondary)}.page-demo>:first-child{background:var(--background)}.post-card-wrap{padding-inline:var(--phi-1)}.table-scroll{overflow-x:auto}table.map{border-collapse:collapse;inline-size:100%;font-size:var(--font-size-small)}table.map :where(th,td){padding:var(--phi-neg1) var(--phi-0);border-block-end:1px solid var(--border);text-align:start;vertical-align:top}table.map tr:last-child td{border-block-end:0}table.map th{color:var(--muted-foreground);font-weight:500}.rule-list{margin:0 0 var(--phi-0);padding-inline-start:var(--phi-1);list-style:outside}ol.rule-list{list-style:decimal}.rule-list li+li{margin-block-start:var(--phi-neg2)}.rule-list>li>strong{color:var(--foreground);font-weight:var(--font-weight-label)}.rule-list ul{margin:var(--phi-neg3) 0 0;padding-inline-start:var(--phi-1);list-style:circle}.rule-list ul li+li{margin-block-start:var(--phi-neg3)}.foundation-pair{gap:var(--phi-1);display:grid}.shadow-specimen{gap:var(--phi-0);border-block-start:1px solid var(--border);grid-template-columns:6rem 1fr;align-items:center;padding-block-start:var(--phi-1);display:grid}.shadow-specimen>span{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);block-size:5rem;inline-size:6rem;box-shadow:var(--shadow-overlay);display:block}.shadow-specimen>div{gap:var(--phi-neg3);display:grid}.shadow-specimen :where(code,small){color:var(--muted-foreground);font-size:var(--font-size-caption)}.layout-stack{gap:var(--phi-neg2);display:grid}.layout-bar{justify-content:space-between;align-items:center;gap:var(--phi-0);min-block-size:3rem;padding:var(--phi-neg1) var(--phi-0);border:1px solid var(--border);border-radius:calc(var(--radius) - .125rem);background:var(--secondary);font-size:var(--font-size-small);display:flex}.layout-bar span{color:var(--muted-foreground);text-align:end}.layout-main{background:radial-gradient(circle at 85% 50%, color-mix(in srgb, var(--foreground) 8%, transparent) 0 2.5rem, transparent 2.6rem), var(--card);min-block-size:7rem}.width-stack{align-items:start}.width-wide{inline-size:100%}.width-narrow{inline-size:66.7%}.width-overlay{inline-size:45%}.grid-composition{gap:var(--phi-neg1);grid-template-columns:repeat(12,minmax(0,1fr));display:grid}.grid-region{align-content:center;gap:var(--phi-neg3);min-block-size:5rem;padding:var(--phi-0);border:1px solid var(--border);border-radius:calc(var(--radius) - .125rem);background:var(--card);font-size:var(--font-size-small);display:grid}.grid-region span{color:var(--muted-foreground);font-size:var(--font-size-caption)}.grid-region-header{grid-column:1/-1}.grid-region-main{grid-column:span 9;min-block-size:8rem}.grid-region-aside{background:var(--secondary);grid-column:span 3}.emphasis-demo{gap:var(--phi-neg1);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.emphasis-level{min-inline-size:0;padding:var(--phi-0);border-inline-start:1px solid var(--border)}.emphasis-level strong,.emphasis-level span{display:block}.emphasis-level span{color:var(--muted-foreground);font-size:var(--font-size-caption);margin-block-start:var(--phi-neg3)}.emphasis-page strong{font-size:var(--font-size-title2)}.emphasis-section{border-inline-start:2px solid var(--link)}.emphasis-section strong{font-size:var(--font-size-title3)}.state-grid{gap:var(--phi-neg1);grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));display:grid}.interactive-state,.async-state{place-content:center;justify-items:center;gap:var(--phi-neg3);min-block-size:6rem;padding:var(--phi-neg1);border:1px solid var(--border);border-radius:calc(var(--radius) - .125rem);background:var(--card);font-size:var(--font-size-small);text-align:center;display:grid}.interactive-state span,.async-state small{color:var(--muted-foreground);font-size:var(--font-size-caption)}.state-hover{background:var(--accent);color:var(--accent-foreground)}.state-focus{outline:2px solid var(--ring);outline-offset:2px}.state-disabled{opacity:.5}.state-invalid{border-color:var(--destructive)}.async-state>span:first-child:not(.spinner){color:var(--link);font-family:var(--font-mono);font-size:var(--font-size-title2)}.spinner{border:2px solid var(--border);border-block-start-color:var(--link);border-radius:50%;block-size:1.25rem;inline-size:1.25rem;animation:.8s linear infinite specimen-spin}@keyframes specimen-spin{to{transform:rotate(1turn)}}.selection-demo{gap:var(--phi-neg1);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.selection-demo>*{min-block-size:3.5rem;padding:var(--phi-neg1);border:1px solid var(--border);border-radius:calc(var(--radius) - .125rem);color:var(--muted-foreground);font-size:var(--font-size-small);place-items:center;text-decoration:none;display:grid}.selection-demo [aria-current=page]{color:var(--link);font-weight:600}.selection-demo [aria-current=location]{color:var(--foreground);font-weight:500}.selection-demo [aria-selected=true]{background:var(--accent);color:var(--accent-foreground)}.input-grid-complete{align-items:end}.inline-primitives{align-items:center;gap:var(--phi-0);min-block-size:2.25rem;display:flex}.text-link-specimen{color:var(--link);text-underline-offset:.2rem;text-decoration:underline}.inline-primitives kbd,.nav-demo kbd,.command-demo kbd{border:1px solid var(--border);border-radius:calc(var(--radius) - .25rem);color:var(--muted-foreground);font-family:var(--font-mono);font-size:var(--font-size-caption);padding:.15rem .35rem}.site-header-demo{justify-content:space-between;align-items:center;gap:var(--phi-0);background:color-mix(in srgb, var(--background) 95%, transparent);backdrop-filter:blur(12px);min-block-size:4rem;display:flex}.site-brand-demo{align-items:center;gap:var(--phi-neg1);color:var(--foreground);flex:none;font-weight:700;text-decoration:none;display:flex}.site-brand-demo img{block-size:2rem;inline-size:auto}.nav-demo{justify-content:end;align-items:center;gap:var(--phi-neg3);flex-wrap:wrap;display:flex}.nav-demo a,.nav-demo button{min-block-size:2.25rem;padding-inline:var(--phi-neg1);border-radius:calc(var(--radius) - .125rem);color:var(--muted-foreground);font-size:var(--font-size-small);background:0 0;border:0;align-items:center;text-decoration:none;display:inline-flex}.nav-demo a:hover,.nav-demo button:hover{background:var(--accent);color:var(--accent-foreground)}.nav-demo a.is-active{color:var(--link);font-weight:600}.command-demo{gap:0;padding:0;display:grid}.command-search{gap:var(--phi-neg1);padding:var(--phi-neg1) var(--phi-0);border-block-end:1px solid var(--border);grid-template-columns:auto 1fr auto;align-items:center;display:grid}.command-results{gap:var(--phi-neg3);padding:var(--phi-neg1);display:grid}.command-option{padding:var(--phi-neg1) var(--phi-0);border-radius:calc(var(--radius) - .125rem);font-size:var(--font-size-small)}.command-option.is-selected{background:var(--accent);color:var(--accent-foreground)}.command-option small{color:var(--muted-foreground);margin-block-start:var(--phi-neg3);display:block}.demo-instruction{padding:var(--phi-neg1) var(--phi-0);border-block-start:1px solid var(--border);color:var(--muted-foreground);font-size:var(--font-size-caption);margin:0}.navigation-actions-demo{gap:var(--phi-1);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.navigation-actions-demo>div{justify-content:space-between;align-items:center;gap:var(--phi-0);min-block-size:5rem;padding:var(--phi-neg1) var(--phi-0);border:1px solid var(--border);border-radius:calc(var(--radius) - .125rem);display:flex}.navigation-actions-demo>div>span{font-size:var(--font-size-small);font-weight:500}.navigation-actions-demo button{block-size:2.5rem;inline-size:2.5rem;color:var(--foreground);cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;display:grid}.navigation-actions-demo button:hover{background:var(--muted)}.navigation-actions-demo dl{border-block-start:1px solid var(--border);grid-column:1/-1;margin:0}.navigation-actions-demo dl>div{gap:var(--phi-0);padding-block:var(--phi-neg1);border-block-end:1px solid var(--border);font-size:var(--font-size-small);grid-template-columns:10rem 1fr;display:grid}.navigation-actions-demo dd{color:var(--muted-foreground);margin:0}.toc-specimen{gap:var(--phi-1);grid-template-columns:minmax(15rem,18rem) 1fr;display:grid}.toc-specimen>.toc-specimen-summary{align-content:start;gap:var(--phi-neg1) var(--phi-0);padding:var(--phi-0);border-inline-start:1px solid var(--border);font-size:var(--font-size-small);grid-template-columns:auto 1fr;display:grid}.toc-specimen>.toc-specimen-summary span{color:var(--muted-foreground)}.scrapbox-specimen{max-inline-size:24rem}.article-prose{max-inline-size:45rem}.article-prose h2{margin:var(--phi-1) 0 var(--phi-0);border-block-end:1px solid var(--border);font-size:var(--font-size-title2);font-weight:var(--font-weight-section);line-height:var(--lh-tight);padding-block-end:var(--phi-neg1)}.article-prose h2:first-child{margin-block-start:0}.article-prose h3{margin:var(--phi-1) 0 var(--phi-neg1);font-size:var(--font-size-title3);font-weight:var(--font-weight-subsection);line-height:var(--lh-tight)}.article-prose p{line-height:var(--lh-body)}.article-prose a{color:var(--link);text-underline-offset:.2rem}.article-prose :not(pre)>code{background:var(--muted);border-radius:.25rem;padding:.125rem .375rem;font-size:.875em}.article-prose pre{padding:var(--phi-0);border-radius:var(--radius);background:var(--secondary);font-size:var(--font-size-small);line-height:1.6;overflow-x:auto}.article-prose blockquote{margin:var(--phi-0) 0;border-inline-start:4px solid var(--border);color:var(--muted-foreground);padding-inline-start:var(--phi-0)}.article-prose table{border-collapse:collapse;inline-size:100%;font-size:var(--font-size-small)}.article-prose :where(th,td){padding:var(--phi-neg2) var(--phi-neg1);border:1px solid var(--border);text-align:start}.article-prose th{background:var(--muted)}.callout-grid{gap:var(--phi-neg1);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.callout-grid [data-callout]{margin:0}.link-card-specimens{gap:var(--phi-0);display:grid;container-type:inline-size}.link-card-specimens .rlc-container{margin:0}.code-image-grid{gap:var(--phi-1);grid-template-columns:minmax(0,1.5fr) minmax(12rem,1fr);align-items:start;display:grid}.code-sample-inline,.code-image-grid figure{margin:0}.code-image-grid img{border:1px solid var(--border);border-radius:var(--radius);block-size:auto;inline-size:100%;display:block}.code-image-grid figcaption{color:var(--muted-foreground);font-size:var(--font-size-caption);margin-block-start:var(--phi-neg2)}.page-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}.wire{gap:var(--phi-neg2);min-block-size:8rem;padding:var(--phi-0);display:grid}.wire>div:not(.wire-title,.wire-line,.wire-card){gap:var(--phi-neg2);display:grid}.wire-line{background:var(--border);border-radius:999px;block-size:.45rem}.wire-short{inline-size:45%}.wire-medium{inline-size:70%}.wire-title{border-radius:calc(var(--radius) - .25rem);background:var(--foreground);opacity:.8;block-size:1.2rem;inline-size:62%}.wire-card{border:1px solid var(--border);border-radius:calc(var(--radius) - .125rem);min-block-size:2.25rem}.wire-two-col{gap:var(--phi-neg1);grid-template-columns:minmax(0,1fr) 4rem;display:grid}.responsive-summary{border-block:1px solid var(--border);grid-template-columns:repeat(3,minmax(0,1fr));margin-block-start:var(--phi-neg1);display:grid}.responsive-summary>div{gap:var(--phi-neg3);padding:var(--phi-0);border-inline-end:1px solid var(--border);display:grid}.responsive-summary>div:last-child{border-inline-end:0}.responsive-summary strong{font-size:var(--font-size-small);font-weight:var(--font-weight-label)}.responsive-summary span{color:var(--muted-foreground);font-size:var(--font-size-small)}.motion-grid{gap:var(--phi-0);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.motion-grid>div{justify-items:center;gap:var(--phi-neg2);text-align:center;min-inline-size:0;display:grid}.motion-grid small{color:var(--muted-foreground);font-size:var(--font-size-caption)}.motion-sample{border:1px solid var(--border);border-radius:var(--radius);background:var(--secondary);block-size:3rem;inline-size:5rem;color:var(--foreground);font-size:var(--font-size-caption);place-items:center;display:grid}.motion-page{animation:2.4s ease-out infinite specimen-rise}.motion-tag{animation:4s ease-in-out infinite specimen-float}.motion-image{animation:2.4s ease-in-out infinite specimen-opacity}@keyframes specimen-rise{0%,55%,to{opacity:1;transform:translateY(0)}70%{opacity:0;transform:translateY(.5rem)}}@keyframes specimen-float{0%,to{transform:translateY(0)}50%{transform:translateY(-.375rem)}}@keyframes specimen-opacity{0%,30%{opacity:.25}60%,to{opacity:1}}.book-footer{border-block-start:1px solid var(--border);color:var(--muted-foreground);font-size:var(--font-size-caption);justify-content:space-between;align-items:center;margin-block-start:var(--phi-3);padding-block-start:var(--phi-1);display:flex}.book-footer a{color:var(--link);text-underline-offset:.2rem}@media (width<=56rem){.book-shell{display:block}.design-system-sidebar{z-index:15;block-size:auto;background:var(--background);border-inline-end:0;padding-block-start:var(--phi-neg1);position:sticky;inset-block-start:calc(var(--book-header-height) + var(--phi-neg2));overflow:visible}.sidebar-toggle{min-block-size:2.75rem;inline-size:100%;padding-inline:var(--phi-0);border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--foreground);font-size:var(--font-size-small);cursor:pointer;justify-content:space-between;align-items:center;font-weight:500;display:flex}.sidebar-toggle-mark{color:var(--muted-foreground);font-family:var(--font-mono)}.design-system-sidebar[data-open=true] .sidebar-toggle-mark{transform:rotate(180deg)}.sidebar-panel{max-block-size:min(65dvh,32rem);padding:var(--phi-0);border:1px solid var(--border);border-radius:var(--radius);background:var(--background);margin-block-start:var(--phi-neg2);display:none;overflow-y:auto}.design-system-sidebar[data-open=true] .sidebar-panel{display:block}.sidebar-search{padding-block-start:0;inset-block-start:calc(-1 * var(--phi-0))}.sidebar-link{min-block-size:2.75rem}.sidebar-page-row{grid-template-columns:minmax(0,1fr) 2.75rem}.sidebar-disclosure{block-size:2.75rem;inline-size:2.75rem}}@media (width<=47.999rem){.scope-note,.type-row,.design-system-directory{grid-template-columns:1fr}.type-row{gap:var(--phi-neg2)}.spacing-row{grid-template-columns:2.75rem minmax(0,1fr)}.spacing-row>:nth-child(n+3){display:none}.radius-grid,.input-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-region-main,.grid-region-aside{grid-column:1/-1}.emphasis-demo,.callout-grid,.navigation-actions-demo,.code-image-grid{grid-template-columns:1fr}.selection-demo,.responsive-summary,.motion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.responsive-summary>div:nth-child(2){border-inline-end:0}.responsive-summary>div:last-child{border-block-start:1px solid var(--border);grid-column:1/-1}.toc-specimen{grid-template-columns:1fr}}@media (width<=32rem){.book{padding-block-start:var(--phi-1)}}@container book (width<40.5rem){.site-header-demo{align-items:start}.nav-demo a:not(.is-active),.nav-demo button{display:none}}@container book (width<36rem){.width-narrow,.width-overlay{inline-size:100%}}@container book (width<29rem){.selection-demo{grid-template-columns:1fr}}@container book (width<27.5rem){.motion-grid{grid-template-columns:1fr}table.map :where(th,td){min-inline-size:8rem}}@container book (width<25.5rem){.layout-bar{flex-direction:column;align-items:start}.layout-bar span{text-align:start}}@container book (width<24.5rem){.responsive-summary{grid-template-columns:1fr}.responsive-summary>div{border-inline-end:0;border-block-end:1px solid var(--border)}.responsive-summary>div:last-child{border-block:0;grid-column:auto}}@container book (width<24rem){.input-grid{grid-template-columns:1fr}}@container book (width<16.5rem){.radius-grid{grid-template-columns:1fr}.radius-grid>div{grid-template-columns:6rem 1fr;place-items:center start}.radius-grid code{grid-column:2}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.spec-page-link,.sidebar-disclosure>span{transition-duration:0s}.spinner,.motion-page,.motion-tag,.motion-image{animation:none}}.shell-anatomy{padding:var(--phi-1);border-radius:calc(var(--radius) - .125rem);background:var(--secondary);grid-template-columns:auto minmax(0,1fr) auto;display:grid}.shell-margin{padding-inline:var(--phi-neg2);border-inline:1px dashed color-mix(in srgb, var(--link) 45%, transparent);color:var(--muted-foreground);font-family:var(--font-mono);font-size:var(--font-size-caption);place-items:center;display:grid}.shell-inner{gap:var(--phi-neg1);padding-inline:var(--phi-0);display:grid}.shell-container{min-block-size:3.5rem;padding:var(--phi-neg1);border:1px solid color-mix(in srgb, var(--link) 45%, transparent);border-radius:calc(var(--radius) - .25rem);background:color-mix(in srgb, var(--link) 10%, var(--background));color:var(--link);font-size:var(--font-size-caption);text-align:center;place-items:center;display:grid}.shell-part{gap:var(--phi-neg2);padding:var(--phi-0);border:1px dashed var(--border);border-radius:calc(var(--radius) - .25rem);background:var(--background);display:grid}.shell-part span{color:var(--muted-foreground);font-size:var(--font-size-small)}@container book (width<24rem){.shell-anatomy{padding:var(--phi-0)}.shell-margin{padding-block:var(--phi-neg3);border-block:1px dashed color-mix(in srgb, var(--link) 45%, transparent);writing-mode:vertical-rl;border-inline:0;padding-inline:0}.shell-inner{padding-inline:var(--phi-neg1)}}.kuri-specimen{align-items:flex-end;gap:var(--phi-2);flex-wrap:wrap;display:flex}.kuri-specimen figure{justify-items:center;gap:var(--phi-neg1);border-block-end:1px solid var(--foreground);margin:0;padding-block-end:var(--phi-neg2);display:grid}.kuri-specimen figcaption{color:var(--muted-foreground);font-family:var(--font-mono);font-size:var(--font-size-caption)}.site-brand-demo img{object-fit:cover;border-radius:50%;block-size:2rem;inline-size:2rem}.motion-group-heading{margin:var(--phi-2) 0 var(--phi-neg2);border-block-start:1px solid var(--border);font-size:var(--font-size-body);font-weight:var(--font-weight-label);padding-block-start:var(--phi-0)}.motion-heading{margin:var(--phi-1) 0 var(--phi-neg1);font-size:var(--font-size-small);font-weight:var(--font-weight-label)}.curve-grid{gap:var(--phi-0);grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));display:grid}.curve-card{gap:var(--phi-neg2);padding:var(--phi-neg1);border:1px solid var(--border);border-radius:var(--radius);margin:0;display:grid}.curve-plot{block-size:auto;inline-size:100%;overflow:visible}.curve-frame{fill:none;stroke:var(--border)}.curve-guide{stroke:var(--border);stroke-dasharray:2 3}.curve-handle{stroke:var(--muted-foreground);stroke-width:.8px}.curve-line{fill:none;stroke:var(--brand);stroke-linecap:round;stroke-width:2.5px}.curve-card figcaption{font-size:var(--font-size-caption);gap:.15rem;display:grid}.curve-card small{color:var(--muted-foreground)}.curve-value{color:var(--muted-foreground);word-break:break-all}.curve-track{border-block-end:1px solid var(--foreground);block-size:.75rem;position:relative}.curve-dot{background:var(--foreground);border-radius:50%;block-size:.625rem;inline-size:.625rem;position:absolute;inset-block-end:1px;inset-inline-start:0}.curve-play{border:1px solid var(--border);background:var(--card);color:var(--foreground);cursor:pointer;font-size:var(--font-size-caption);border-radius:999px;justify-self:start;padding:.2rem .6rem}.curve-play:hover{border-color:var(--foreground)}.duration-list{gap:var(--phi-neg2);display:grid}.duration-row{align-items:center;gap:var(--phi-neg1);font-size:var(--font-size-caption);grid-template-columns:13rem minmax(0,1fr) 4rem;display:grid}.duration-row small{color:var(--muted-foreground);grid-column:1/-1}.duration-bar{block-size:.375rem;inline-size:calc(var(--duration-ratio,0) * 100%);background:var(--brand);border-radius:999px;min-inline-size:2px}.kuri-stage{align-items:flex-end;gap:var(--phi-1);flex-wrap:wrap;display:flex}.kuri-stage__ground{padding-inline:var(--phi-2);border-block-end:1px solid var(--foreground)}.kuri-stage__controls{gap:var(--phi-neg2);flex-wrap:wrap;display:flex}.kuri-stage__controls button{border:1px solid var(--border);background:var(--card);color:var(--foreground);cursor:pointer;font-size:var(--font-size-small);border-radius:999px;padding:.3rem .8rem}.kuri-stage__controls button:hover{border-color:var(--foreground)}