*{box-sizing:border-box}body{margin:0;background:var(--qf-background);color:var(--qf-text-primary);font:var(--qf-type-body-size)/var(--qf-type-body-line-height) var(--qf-font)}a{color:inherit;text-underline-offset:4px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:var(--qf-focus-width) solid var(--qf-focus);outline-offset:var(--qf-focus-offset)}h1,h2,h3,p{margin:0}button,select{border-radius:0}.skip-link{position:fixed;inset:8px auto auto 8px;transform:translateY(-150%);background:var(--qf-layer);padding:var(--qf-spacing-16);z-index:100}.skip-link:focus{transform:none}.alpha-dot{display:inline-block;width:6px;height:6px;background:var(--qf-color-sage-500);border-radius:50%;margin-inline-end:5px}.catalog-main>main{padding:56px var(--qf-spacing-48);max-width:1600px;width:100%;margin-inline:auto;outline:none}.eyebrow{font-size:var(--qf-type-body-size);text-transform:uppercase;letter-spacing:1.4px;color:var(--qf-text-secondary);margin-block-end:var(--qf-spacing-20)}.page-heading{display:flex;gap:var(--qf-spacing-24);justify-content:space-between;align-items:start}.page-heading h1{font-size:var(--qf-type-section-heading-size);font-weight:400;letter-spacing:-1.6px;line-height:1.05}.page-heading .count{font-size:var(--qf-type-body-size);letter-spacing:0;color:var(--qf-text-muted);vertical-align:top;margin-inline-start:var(--qf-spacing-12)}.page-intro{max-width:710px;font-size:var(--qf-type-component-title-size);font-weight:300;line-height:1.55;color:var(--qf-text-secondary);margin-block:var(--qf-spacing-24) var(--qf-spacing-32)}.source-note{font-size:var(--qf-type-body-size);color:var(--qf-text-muted)}.source-note a{color:var(--qf-interactive)}.catalog-toolbar{display:flex;gap:var(--qf-spacing-24);align-items:center;justify-content:space-between;border-block:1px solid var(--qf-border-subtle);padding-block:var(--qf-spacing-20);margin-block:var(--qf-spacing-40) var(--qf-spacing-32)}.catalog-search{position:relative;flex:1;max-width:420px}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--qf-spacing-32) var(--qf-spacing-24)}.component-card{position:relative;border:1px solid var(--qf-border-subtle);background:var(--qf-layer);min-width:0;transition:border-color .15s}.component-card:hover{border-color:var(--qf-interactive)}.card-preview{height:190px;overflow:hidden;background:var(--qf-background-subtle);border-block-end:1px solid var(--qf-border-subtle);position:relative}.card-preview>.qf{position:absolute;left:50%;top:50%;width:800px;max-height:520px;overflow:hidden;padding:var(--qf-spacing-24);transform:translate(-50%,-50%) scale(.34);transform-origin:center}.empty-state{padding:var(--qf-spacing-64) 0;color:var(--qf-text-secondary)}.empty-state[hidden]{display:none}.back-link{font-size:var(--qf-type-body-size);color:var(--qf-text-secondary);display:inline-block;margin-block-end:var(--qf-spacing-32)}.badge{display:inline-flex;font-size:var(--qf-type-body-size);padding:5px 10px;background:var(--qf-color-sage-100);color:var(--qf-color-sage-800);white-space:nowrap}.detail-toolbar{display:flex;align-items:end;flex-wrap:wrap;gap:var(--qf-spacing-24);margin-block:var(--qf-spacing-40) var(--qf-spacing-20);padding-block:var(--qf-spacing-20);border-block:1px solid var(--qf-border-subtle)}.segment{display:flex;border:1px solid var(--qf-border-subtle)}.segment button{border:0;background:transparent;padding:var(--qf-spacing-8) var(--qf-spacing-16);min-height:40px;color:var(--qf-text-secondary)}.segment [aria-pressed=true]{background:var(--qf-interactive);color:var(--qf-layer)}.preview-stage{background:var(--qf-background-subtle);border:1px solid var(--qf-border-subtle);padding:var(--qf-spacing-24);overflow:auto;max-width:100%;min-height:200px}.preview-stage > .qf{padding:var(--qf-spacing-32);min-height:170px;max-width:none;width:100%;margin:auto}.preview-stage > .qf.preview-full{padding:0}.preview-stage > .qf.width-mobile{width:375px}.preview-stage > .qf.width-tablet{width:768px}.preview-stage > .qf.width-desktop{width:1200px}.preview-stage > .qf[dir=rtl]{text-align:start}.preview-caption{font-size:var(--qf-type-body-size);color:var(--qf-text-muted);margin-block-start:var(--qf-spacing-12)}.detail-docs{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--qf-spacing-48);margin-block-start:var(--qf-spacing-48)}.doc-section{margin-block-end:var(--qf-spacing-32)}.doc-section h2{font-size:var(--qf-type-component-title-size);font-weight:500;margin-block-end:var(--qf-spacing-16)}.doc-section h3{font-size:var(--qf-type-body-size);margin-block:var(--qf-spacing-24) var(--qf-spacing-12)}.doc-section p,.doc-section li{font-size:var(--qf-type-body-size);color:var(--qf-text-paragraph);line-height:1.7}.doc-section ul{padding-inline-start:var(--qf-spacing-20)}.doc-section a{color:var(--qf-interactive)}.doc-section dl{font-size:var(--qf-type-body-size)}.doc-section dt{color:var(--qf-text-muted);font-size:var(--qf-type-body-size);text-transform:uppercase;letter-spacing:.8px;margin-block-start:var(--qf-spacing-24)}.doc-section dd{margin:6px 0 0}.code-box{background:var(--qf-background-subtle);border:1px solid var(--qf-border-subtle);padding:var(--qf-spacing-20);margin-block-start:var(--qf-spacing-24)}.code-box summary{cursor:pointer;font-size:var(--qf-type-body-size)}.code-box pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:500px;overflow:auto;font:var(--qf-type-body-size)/1.7 ui-monospace,monospace;margin-block:var(--qf-spacing-16)}.copy-button{background:var(--qf-layer);border:1px solid var(--qf-border-subtle);padding:var(--qf-spacing-8) var(--qf-spacing-16);font-size:var(--qf-type-body-size);min-height:40px}.code-bar{display:flex;justify-content:space-between;align-items:center;margin-block-end:var(--qf-spacing-16);gap:var(--qf-spacing-16)}.code-bar span{font-size:var(--qf-type-body-size);color:var(--qf-text-muted)}.status-line{min-height:24px;font-size:var(--qf-type-body-size);color:var(--qf-interactive);margin-block-start:var(--qf-spacing-12)}.scope-stats{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--qf-border-subtle);margin-block:var(--qf-spacing-40)}.scope-stats>div{padding:var(--qf-spacing-24);border-inline-end:1px solid var(--qf-border-subtle)}.scope-stats>div:last-child{border:0}.scope-stats strong{font-size:var(--qf-type-section-heading-size);font-weight:300;display:block}.scope-stats span{font-size:var(--qf-type-body-size);color:var(--qf-text-secondary)}.scope-table{width:100%;border-collapse:collapse;font-size:var(--qf-type-body-size);margin-block:var(--qf-spacing-24)}.scope-table :is(td,th){padding:14px var(--qf-spacing-16);text-align:start;border-block-end:1px solid var(--qf-border-subtle);vertical-align:top}.scope-table th{font-weight:500;background:var(--qf-background-subtle)}.table-scroll{overflow:auto}.scope-table a{color:var(--qf-interactive)}.notice{padding:var(--qf-spacing-24);border-inline-start:3px solid var(--qf-color-sage-500);background:var(--qf-background-subtle);font-size:var(--qf-type-body-size);line-height:1.6;margin-block:var(--qf-spacing-24);max-width:900px}.guide{max-width:900px}.guide>h2{font-size:var(--qf-type-component-title-size);font-weight:500;margin-block:var(--qf-spacing-40) var(--qf-spacing-20)}.guide>p{color:var(--qf-text-secondary);line-height:1.75}.guide ol{padding-inline-start:var(--qf-spacing-24)}.guide li{padding-block:var(--qf-spacing-8);color:var(--qf-text-paragraph)}
@media(max-width:1180px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-main>main{padding:var(--qf-spacing-40) var(--qf-spacing-32)}.card-preview>.qf{transform:translate(-50%,-50%) scale(.37)}.detail-docs{grid-template-columns:1fr;gap:0}}
@media(max-width:760px){.catalog-main>main{padding:var(--qf-spacing-32) var(--qf-spacing-20)}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--qf-spacing-20) var(--qf-spacing-12)}.card-preview{height:140px}.card-preview>.qf{transform:translate(-50%,-50%) scale(.25)}.page-intro{font-size:var(--qf-type-body-size)}.catalog-toolbar{flex-wrap:wrap;gap:var(--qf-spacing-16);margin-block:28px}.catalog-search{max-width:none;flex-basis:100%}.preview-stage{padding:var(--qf-spacing-12)}.preview-stage > .qf{padding:var(--qf-spacing-20)}.scope-stats>div{padding:var(--qf-spacing-16) 10px}.scope-stats strong{font-size:var(--qf-type-component-title-size)}}
@media(max-width:430px){.catalog-grid{grid-template-columns:1fr}.card-preview{height:180px}.card-preview>.qf{transform:translate(-50%,-50%) scale(.39)}.page-heading h1{font-size:var(--qf-type-section-heading-size)}.detail-toolbar{gap:var(--qf-spacing-16)}.segment button{padding:var(--qf-spacing-8) var(--qf-spacing-12)}.scope-stats{grid-template-columns:1fr}.scope-stats>div{border:0;border-block-end:1px solid var(--qf-border-subtle)}.scope-stats strong{display:inline-block;margin-inline-end:var(--qf-spacing-12)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.card-preview>.qf>:is(.qf-button,.qf-link,.qf-view-switcher){display:flex;width:max-content;margin-inline:auto}/* Catalog typography: 16px utility/body,20px headings,40px page title. */
.card-meta{flex-wrap:wrap;gap:var(--qf-spacing-8);letter-spacing:0;text-transform:none}.eyebrow{letter-spacing:.6px}.page-intro{font-size:var(--qf-type-component-title-size);font-weight:400}.doc-section code,.guide code,.code-box code{font-size:inherit}.catalog-main :is(.control,.catalog-toolbar)>select{padding-inline-start:var(--qf-spacing-16)}.segment button{min-height:48px}.qf-icon{width:20px;height:20px;display:inline-block;vertical-align:middle;fill:currentColor;flex:none}.back-link{display:inline-flex;align-items:center;gap:var(--qf-spacing-8)}/* Catalog chrome uses the shared body and title roles. */
body{font-size:var(--qf-type-body-size);line-height:var(--qf-type-body-line-height)}.catalog-main>main{padding:var(--qf-spacing-section-gap) var(--qf-spacing-page-gutter)}.catalog-grid{gap:var(--qf-spacing-grid-gap)}.doc-section h2,.guide>h2{font-size:var(--qf-type-component-title-size);line-height:var(--qf-type-component-title-line-height)}.page-heading h1{font-size:var(--qf-type-section-heading-size);line-height:var(--qf-type-section-heading-line-height);letter-spacing:var(--qf-type-section-heading-tracking)}/* Start building: role-based guidance and practical setup. */
.start-content{max-width:1040px;min-width:0}.start-lead{font-size:var(--qf-type-body-size);color:var(--qf-text-secondary);max-width:760px}.start-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--qf-spacing-grid-gap)}.start-section>h2{font-size:var(--qf-type-component-title-size);line-height:var(--qf-type-component-title-line-height);font-weight:500}.start-content .qf-icon{width:20px;height:20px;fill:currentColor}.start-section{margin-block-start:var(--qf-spacing-section-gap);padding-block-start:var(--qf-spacing-24);border-block-start:1px solid var(--qf-border-subtle)}.start-section>h2{margin-block-end:var(--qf-spacing-16)}.start-section h3{font-size:var(--qf-type-body-size);font-weight:500;margin-block:var(--qf-spacing-24) var(--qf-spacing-12)}.start-section>p{max-width:800px;color:var(--qf-text-paragraph)}.start-section>p+p{margin-block-start:var(--qf-spacing-16)}.start-section ul{padding-inline-start:var(--qf-spacing-24)}.start-section li{padding-block:var(--qf-spacing-8)}.start-layer-list{margin-block-start:var(--qf-spacing-24);border-block-start:1px solid var(--qf-border-subtle)}.start-layer-list>a{display:grid;grid-template-columns:minmax(160px,1fr) 2fr;gap:var(--qf-spacing-grid-gap);padding-block:var(--qf-spacing-20);border-block-end:1px solid var(--qf-border-subtle);text-decoration:none}.start-layer-list strong{font-weight:500}.start-layer-list span{color:var(--qf-text-paragraph)}.start-layer-list>a:hover strong{text-decoration:underline}.start-resource-list{display:grid;margin-block-start:var(--qf-spacing-24)}.start-resource-list>a{display:flex;align-items:center;justify-content:space-between;gap:var(--qf-spacing-16);padding-block:var(--qf-spacing-16);border-block-end:1px solid var(--qf-border-subtle);min-height:48px}.start-resource-list>a>span{flex-shrink:0;color:var(--qf-text-secondary)}.start-content .scope-table code{overflow-wrap:anywhere}.start-content .code-box{margin-block:var(--qf-spacing-24);max-width:100%}.start-content .code-box pre{max-height:none}
@media(max-width:700px){.start-paths{grid-template-columns:1fr}.start-layer-list>a{grid-template-columns:1fr;gap:var(--qf-spacing-8)}}/* Catalog pages use the reusable header with the compact catalog type hierarchy. */
.qf.catalog-page-header{background:transparent;min-width:0;margin-block-end:var(--qf-spacing-32)}.catalog-page-header .qf-page-header-title{font-size:var(--qf-type-section-heading-size);line-height:var(--qf-type-section-heading-line-height);letter-spacing:var(--qf-type-section-heading-tracking)}.catalog-page-header .qf-page-header-description{font-size:var(--qf-type-component-title-size);line-height:1.5}.catalog-page-header .qf-page-header-status{margin-inline-start:auto}.catalog-page-header .qf-breadcrumb{font-size:var(--qf-type-body-size)}

/* Application layout only. Controls, cards and copy behavior are library components. */
.qf.detail-toolbar,.qf.catalog-search,.qf.catalog-code,.qf.catalog-download,.qf.start-card{background:transparent;min-width:0}
.detail-toolbar{gap:var(--qf-spacing-field-gap)}
.detail-toolbar>.qf-field{flex:1 1 13rem;min-width:0}
.detail-toolbar>.catalog-switch{flex:0 1 auto;min-width:0;display:grid;gap:var(--qf-spacing-12)}
.catalog-switch>span{font-size:var(--qf-type-label-size);font-weight:var(--qf-type-label-weight);line-height:var(--qf-type-label-line-height)}
.catalog-toolbar{align-items:end}
.catalog-toolbar #result-count{padding-block-end:var(--qf-spacing-12)}
.catalog-search{flex:1;max-width:28rem}
.component-card{display:flex;flex-direction:column}.component-card[hidden]{display:none}
.catalog-card-content{flex:1;display:flex;min-width:0}
.catalog-card-content>.qf-tile{flex:1;border:0;position:static}
.catalog-card-content>.qf-tile::after{content:'';position:absolute;inset:0}
.component-card:focus-within{outline:var(--qf-focus-width) solid var(--qf-focus);outline-offset:var(--qf-focus-offset)}
.start-card>.qf-tile{height:100%}
.catalog-code{margin-block:var(--qf-spacing-stack-gap)}
.catalog-code>h2{font-size:var(--qf-type-component-title-size);margin-block-end:var(--qf-spacing-16)}
.catalog-code details{margin-block-start:var(--qf-spacing-16)}
.catalog-code details>.qf-code-snippet{margin-block-start:var(--qf-spacing-16)}
.catalog-code .qf-code-snippet pre{max-block-size:32rem;white-space:pre-wrap;overflow-wrap:anywhere}
.catalog-download{display:flex;flex:0 0 12rem}
@media(max-width:700px){.catalog-search{max-width:none;flex-basis:100%}}

.catalog-main :is(code,pre):not(.type-role-sample){font-family:var(--qf-mono);font-size:var(--qf-code-size);font-weight:400;line-height:1.6}
.start-settings-table td:nth-child(2){min-inline-size:23ch}
.start-settings-table code{white-space:nowrap;overflow-wrap:normal;word-break:normal}

.catalog-home-header .qf-page-header-title{font-size:var(--qf-type-display-size);line-height:var(--qf-type-display-line-height);letter-spacing:var(--qf-type-display-tracking);font-weight:var(--qf-type-page-heading-weight);max-inline-size:15ch}
.catalog-home-header .qf-page-header-description{font-size:var(--qf-type-section-heading-size);line-height:var(--qf-type-section-heading-line-height);font-weight:var(--qf-type-standfirst-weight);max-inline-size:27ch;margin-block-start:var(--qf-spacing-24)}
.catalog-home-header{padding-block:var(--qf-spacing-24) var(--qf-spacing-32)}