/* Host layout only. Controls, card material, fade and dialog behavior come from the package. */
*{box-sizing:border-box}html{background:#f6f6f6;scroll-behavior:smooth}body{margin:0}body.tw-scope{min-height:100dvh;margin:0;padding:0 var(--tw-space-page-gutter);background:var(--tw-case);color:var(--tw-ink);font:14px/1.5 var(--tw-glass-font-ui)}button,input,select,textarea{font:inherit}a{color:inherit;text-underline-offset:4px}h1,h2,h3,p{margin-top:0}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--tw-accent);outline-offset:4px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link{position:absolute;left:16px;top:12px;z-index:100;padding:var(--tw-space-component-gap);background:var(--tw-ink);color:var(--tw-plate)}.skip-link:not(:focus){clip-path:inset(100%)}
.site-head,main,.site-footer{max-width:872px;margin-inline:auto}.site-head h1{margin:0;font:inherit}.site-head{height:88px;display:flex;align-items:center;justify-content:space-between;gap:var(--tw-space-section-gap)}.brand{display:flex;align-items:center;gap:10px;font:400 30px/1 var(--tw-glass-font-display);letter-spacing:-.6px;text-decoration:none}.brand i{width:18px;height:18px;border-radius:4px;background:repeating-linear-gradient(0deg,transparent 0 2px,var(--tw-accent) 2px 3px),repeating-linear-gradient(90deg,transparent 0 2px,var(--tw-accent) 2px 3px)}.site-head .tw-button{font-size:16px}.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--tw-space-section-gap);margin:var(--tw-space-control-padding-compact) 0 var(--tw-space-section-gap)}.catalog-toolbar>p{margin:0;font-size:13px;color:var(--tw-muted)}.catalog-search{position:relative;display:block;min-width:0;width:290px}.catalog-search input{width:100%;min-height:44px;border:0;border-radius:999px;background:var(--tw-plate);color:var(--tw-ink);padding:10px 38px 10px 18px;font:14px var(--tw-glass-font-ui)}.catalog-search>span:last-child{position:absolute;right:15px;top:9px;font:23px var(--tw-glass-font-ui);pointer-events:none}.catalog-search input::-webkit-search-cancel-button{margin-right:var(--tw-space-control-gap)}
.card-stack{min-width:0;margin:0 4px 12px}.catalog-card{scroll-margin-top:24px}.catalog-card-heading{margin:0;font-weight:400}.catalog-card-heading .tw-section-card{min-height:132px;align-items:flex-start;padding:22px 32px 50px}.catalog-card-heading .tw-section-card__content{gap:8px;width:78%}.catalog-card-heading .tw-section-card__label{font-size:37px;letter-spacing:-.8px}.catalog-card-heading .tw-section-card__caption{font-size:12px;letter-spacing:0}.catalog-card-heading .tw-section-card__marker{top:30px;right:28px;margin:0}.catalog-panel{border-radius:0 0 var(--tw-stack-radius) var(--tw-stack-radius);padding:0 32px calc(var(--tw-space-section-gap) + var(--tw-stack-overlap));position:relative}.catalog-panel::before{content:"";position:absolute;left:32px;right:32px;top:-15px;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--tw-glass-ink) 13%,transparent),transparent 85%)}.example-picker{min-width:0;max-width:100%;margin:var(--tw-space-control-gap) 0 calc(var(--tw-space-section-gap) + var(--tw-space-label-gap))}.example-picker .tw-tabs{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}.example-picker .tw-tab{min-width:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere;font-size:16px}.close-card{margin-top:var(--tw-space-component-padding)}.catalog-empty{padding:40px calc(var(--tw-space-component-padding) + var(--tw-space-label-gap));text-align:center}.catalog-empty p{font:28px var(--tw-glass-font-display)}
.specimen{min-width:0;scroll-margin-top:var(--tw-space-component-padding)}.spec-head{margin:0 0 var(--tw-space-section-gap)}.spec-head h3{font:400 29px/1.1 var(--tw-glass-font-display);letter-spacing:-.5px;margin:0 0 10px}.spec-head p{font:13px/1.6 var(--tw-glass-font-ui);color:var(--tw-muted);max-width:630px;margin:0}.spec-body{display:flex;flex-direction:column;align-items:stretch;gap:var(--tw-space-section-gap);min-width:0;color:var(--tw-ink)}.sample-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--tw-space-component-gap)}.sample-caption,.hint,.status{font:12px/1.6 var(--tw-glass-font-ui);color:var(--tw-muted);margin:0}.spec-body>.tw-knob{align-self:center;margin-block:10px}.spec-body>.tw-field{max-width:440px}.example-settings,.component-docs{font:13px/1.5 var(--tw-glass-font-ui)}.example-settings[open]>:not(summary){margin-top:var(--tw-space-component-padding)}.component-docs{margin-top:var(--tw-space-control-padding-compact)}.component-docs pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.6 var(--tw-glass-font-ui);background:var(--tw-plate);padding:calc(var(--tw-space-component-padding) + var(--tw-space-label-gap));border-radius:16px;margin:0 0 var(--tw-space-component-gap)}.props{display:flex;flex-wrap:wrap;gap:var(--tw-space-component-padding);align-items:end}.props label{display:grid;gap:6px;flex:1;min-width:140px;font:12px var(--tw-glass-font-ui)}.props .check{display:flex;align-items:center;min-height:44px;min-width:120px}.props .check input{width:18px;height:18px;accent-color:var(--tw-accent)}.props input[type=range]{width:100%;min-height:44px;accent-color:var(--tw-accent)}.props input[type=color]{width:64px;height:44px}.props output{font:12px var(--tw-glass-font-ui)}.card-preview{max-width:480px;width:100%;margin:var(--tw-space-component-gap) auto}.visual-canvas{display:block;width:100%;height:250px;image-rendering:pixelated;border-radius:16px;background:var(--tw-window-surface)}#knob-faces .tw-knob-faces{grid-template-columns:repeat(auto-fill,minmax(95px,1fr))}#knob-faces .tw-knob-face-study{border:0}.section-cards-demo{display:grid;grid-template-columns:1fr 1fr;gap:var(--tw-space-component-gap)}
/* One visible theme workbench drives every example. Neutral catalog shell stays quiet. */
.theme-jump{font:16px var(--tw-glass-font-display);text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.theme-section{scroll-margin-top:20px;margin:4px 4px 40px;padding:28px 32px 16px;border-radius:28px;background:var(--tw-glass);color:var(--tw-glass-ink);box-shadow:inset 0 1px 0 var(--tw-glass-light),0 8px 28px -22px var(--tw-glass-ink)}
.theme-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.theme-heading h2{font:400 37px/1.1 var(--tw-glass-font-display);letter-spacing:-.8px;margin:0}.theme-kicker{font:12px var(--tw-glass-font-ui);margin:0 0 8px;color:var(--tw-glass-muted)}.theme-heading>p{font:12px/1.6 var(--tw-glass-font-ui);color:var(--tw-glass-muted);margin:0;text-align:right}.theme-main-controls{display:grid;grid-template-columns:1fr 1fr;gap:16px}.theme-main-controls .tw-field{min-width:0}.theme-main-controls .tw-field>span{font:12px var(--tw-glass-font-ui);color:var(--tw-glass-muted)}.theme-main-controls select{width:100%;min-width:0}.theme-section .swatches{grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin:20px 0 12px}.theme-section .swatch.tw-button{min-width:0;min-height:32px;box-shadow:none}.theme-details>summary{font-size:13px}.theme-section .appearance-body{padding-bottom:12px}.theme-section .tw-field{color:var(--tw-glass-ink)}
@media(max-width:480px){.theme-section{padding:22px 20px 12px;margin:0 0 28px;border-radius:26px}.theme-heading{align-items:flex-start;margin-bottom:18px;gap:12px}.theme-heading h2{font-size:32px}.theme-heading>p{font-size:11px;max-width:155px}.theme-main-controls{gap:12px}.theme-section .swatches{gap:8px}.theme-section .swatch.tw-button{min-height:32px}}
.appearance-body{margin-top:var(--tw-space-section-gap)}.appearance-body h2{font:24px var(--tw-glass-font-display);font-weight:400;margin:calc(var(--tw-space-section-gap) + var(--tw-space-label-gap)) 0 var(--tw-space-control-gap)}.appearance-presets{display:flex;gap:var(--tw-space-control-gap);flex-wrap:wrap}.control-label{display:block;margin:calc(var(--tw-space-component-padding) + var(--tw-space-label-gap)) 0 var(--tw-space-control-gap);font-size:12px}.tint-toggle{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:14px}.tint-color-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--tw-space-component-gap)}.tint-color-label input{width:68px;height:44px;border:0;background:transparent}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--tw-space-control-gap);margin:var(--tw-space-component-padding) 0}.swatch.tw-button{display:flex;min-height:44px;padding:0;overflow:hidden;border-radius:10px}.swatch i{flex:1;align-self:stretch}.swatch[aria-pressed=true]{outline:2px solid var(--tw-accent);outline-offset:3px}.contrast{font-size:12px;color:var(--tw-muted);margin:var(--tw-space-component-padding) 0}.contrast[data-pass=false]{color:var(--tw-warning)}.appearance-body details>summary{min-height:44px;cursor:pointer;align-content:center}.color-controls{display:grid;grid-template-columns:1fr 1fr;gap:var(--tw-space-control-gap);padding:var(--tw-space-component-gap) 0}.color-control{display:flex;gap:var(--tw-space-control-gap);align-items:center;font-size:11px;min-width:0}.color-control input{width:44px;height:44px;flex:none;padding:0;border:0}.editor-actions{display:flex;gap:var(--tw-space-control-gap);flex-wrap:wrap;margin:calc(var(--tw-space-component-padding) + var(--tw-space-label-gap)) 0 var(--tw-space-component-gap)}
/* Real example layouts. No enclosing frames or extra chrome. */
.frost-demo,.fade-demo{position:relative;isolation:isolate;width:100%;min-height:230px;overflow:hidden;border-radius:18px}.fade-demo{padding:var(--tw-space-page-gutter-wide);background:repeating-linear-gradient(115deg,var(--tw-accent-light) 0 28px,var(--tw-plate) 28px 57px,var(--tw-accent) 57px 78px)}.fade-demo[data-frost=false]>.tw-glass-plate__canvas{display:none}.fade-kicker{display:block;font:12px var(--tw-glass-font-ui);color:var(--tw-glass-ink)}.fade-demo strong{display:block;width:max-content;max-width:100%;font:40px/1.1 var(--tw-glass-font-display);color:var(--tw-glass-ink);overflow-wrap:anywhere;margin:var(--tw-space-component-gap) 0 var(--tw-space-section-gap)}.native-controls-demo{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:start;gap:var(--tw-space-section-gap)}.native-controls-demo>.tw-control-field{max-width:100%}.interaction-actions{position:relative}.interaction-actions .tw-menu{position:absolute;top:100%;left:0;z-index:5;display:grid;gap:var(--tw-space-control-gap);min-width:180px}.spacing-scale{display:flex;gap:var(--tw-space-component-padding);flex-wrap:wrap}.spacing-step{display:grid;gap:6px;align-content:end;font:11px var(--tw-glass-font-ui)}.spacing-step i{display:block;height:24px;background:var(--tw-accent);border-radius:2px}.spacing-controls{display:flex;gap:var(--tw-space-component-padding);align-items:end;flex-wrap:wrap}.spacing-controls>label{flex:1;min-width:160px}.spacing-controls input{min-height:44px}.spacing-probe{display:flex;flex-direction:column;align-items:flex-start;gap:var(--tw-space-component-gap)}.spacing-probe .tw-card{width:100%}.spacing-probe strong{font:24px var(--tw-glass-font-display)}.spacing-roles{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--tw-space-control-gap);font:12px var(--tw-glass-font-ui)}.spacing-roles dt{overflow-wrap:anywhere}.spacing-roles dd{margin:0}
/* The material workbench is an example inside Materials. */
.workbench-bar{display:flex;gap:var(--tw-space-control-gap);flex-wrap:wrap}.glass-field-stage{position:relative;isolation:isolate;height:350px;background:var(--tw-window-surface);overflow:hidden;border-radius:18px}.glass-field-stage>canvas{display:block;position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}.field-kicker,.field-caption{position:absolute;left:14px;right:14px;display:flex;justify-content:space-between;gap:10px;pointer-events:none;z-index:1;font:10px var(--tw-glass-font-ui);color:var(--tw-window-ink,var(--tw-glass))}.field-kicker{top:14px}.field-caption{bottom:12px;font-size:9px}.field-kicker span,.field-caption span{background:var(--tw-window-surface);padding:5px 7px;border-radius:4px}.field-heading{position:absolute;left:20px;top:60px;margin:0;background:var(--tw-window-surface);color:var(--tw-window-ink,var(--tw-glass));padding:var(--tw-space-control-gap);font:30px/1 var(--tw-glass-font-display);border-radius:8px}.field-readout{position:absolute;left:36%;top:18%;width:28%;height:56%;display:flex;align-items:center;justify-content:center}.field-readout-inset{width:78%;min-height:140px;background:var(--tw-glass);color:var(--tw-glass-ink);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 6px;gap:13px}.field-readout-inset>span{font:9px var(--tw-glass-font-ui);text-align:center}.field-readout output{font:70px/.9 var(--tw-glass-font-display);letter-spacing:-2px}.field-readout small{font-size:24px}.glass-material-modes{position:absolute;left:30%;top:80%;width:40%;height:14%;display:flex;padding:5px;gap:var(--tw-space-control-padding-compact);align-items:stretch}.glass-material-modes .tw-glass-button{flex:1;min-width:0}.glass-control-deck{display:grid;grid-template-columns:1fr 1fr;gap:var(--tw-space-section-gap);align-items:start}.glass-control-deck>div,.glass-control-deck>label{margin:0;width:auto;min-width:0}.deck-intro{grid-column:1/-1}.glass-control-deck .tw-knob{align-content:center;gap:var(--tw-space-control-gap)}.glass-control-deck .tw-knob__face{margin:var(--tw-space-control-gap) 0;transform:scale(1.25)}.deck-texture{display:flex;flex-direction:column;gap:calc(var(--tw-space-component-padding) + var(--tw-space-label-gap))}.deck-texture .tw-fader{min-width:0}.deck-texture .tw-fader>span{display:flex;justify-content:space-between;font-size:12px}.deck-texture .tw-fader__input{width:100%}.deck-scene{display:flex;flex-direction:column;gap:var(--tw-space-component-padding)}.workbench-note{font:12px/1.5 var(--tw-glass-font-ui);color:var(--tw-muted)}
.site-docs{margin-top:var(--tw-space-section-gap)}.site-docs>summary{font-size:13px}.site-docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--tw-space-section-gap);padding-top:var(--tw-space-component-padding)}.site-docs h2,.site-docs h3{font:25px var(--tw-glass-font-display);font-weight:400}.site-docs p{font:13px/1.6 var(--tw-glass-font-ui);color:var(--tw-muted)}.site-docs code{display:block;overflow-wrap:anywhere;font:12px/1.6 var(--tw-glass-font-ui)}.site-footer{display:flex;justify-content:space-between;gap:var(--tw-space-component-padding);padding:var(--tw-space-section-gap) 0 var(--tw-space-page-gutter-wide);font:11px var(--tw-glass-font-ui);color:var(--tw-muted)}.site-footer a{text-decoration:none}.tw-scope :is(pre,code,kbd,samp){font-variant-numeric:tabular-nums}

@media(max-width:600px){body.tw-scope{padding:0 var(--tw-space-component-padding)}.site-head{height:70px}.brand{font-size:27px}.catalog-toolbar{margin:0 0 18px}.catalog-toolbar>p{display:none}.catalog-search{width:100%}.card-stack{margin-inline:0}.catalog-card{scroll-margin-top:16px}.catalog-card-heading .tw-section-card{min-height:116px;padding:18px 22px 44px}.catalog-card-heading .tw-section-card__label{font-size:31px}.catalog-card-heading .tw-section-card__caption{font-size:11px}.catalog-card-heading .tw-section-card__content{gap:6px;width:80%}.catalog-card-heading .tw-section-card__marker{right:18px;top:24px;width:32px;height:32px}.catalog-card-heading .tw-section-card__marker::before{left:10px;top:15px}.catalog-card-heading .tw-section-card__marker::after{right:10px;top:15px}.catalog-panel{border-radius:0 0 var(--tw-stack-radius) var(--tw-stack-radius);padding:0 22px 54px}.catalog-panel::before{left:22px;right:22px}.example-picker{margin:var(--tw-space-control-gap) 0 var(--tw-space-section-gap);gap:10px}.example-picker select{min-width:0;flex:1}.spec-head h3{font-size:26px}.spec-head p{font-size:12px}.spec-body{gap:calc(var(--tw-space-component-padding) + var(--tw-space-label-gap))}.section-cards-demo{grid-template-columns:1fr}.color-controls,.site-docs-grid{grid-template-columns:1fr}.appearance-sheet{padding:calc(var(--tw-space-component-padding) + var(--tw-space-label-gap))}.visual-canvas{height:200px}.fade-demo{padding:var(--tw-space-section-gap)}.fade-demo strong{font-size:34px}.glass-field-stage{height:320px}.field-heading{font-size:22px;left:12px;top:48px;max-width:100px}.field-kicker{font-size:7px;left:8px;right:8px}.field-caption{font-size:7px;left:8px;right:8px}.field-caption span:nth-child(2){display:none}.field-readout-inset{width:84%;min-height:125px;padding:var(--tw-space-component-gap) var(--tw-space-control-padding-compact)}.field-readout-inset>span{font-size:7px}.field-readout-inset>span:last-child{display:none}.field-readout output{font-size:52px}.field-readout small{font-size:20px}.glass-material-modes{padding:var(--tw-space-control-padding-compact);gap:3px}.glass-material-modes .tw-glass-button{padding-inline:var(--tw-space-control-gap)}.deck-texture,.deck-scene{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(forced-colors:active){.catalog-card[data-open=true]{border:1px solid CanvasText}.glass-field-stage canvas{visibility:hidden}.glass-field-stage,.field-readout-inset,.field-heading,.field-kicker span,.field-caption span{background:Canvas;color:CanvasText}.swatch[aria-pressed=true]{outline:2px solid Highlight}}

/* Light/dark changes the semantic canvas, never an inversion filter. */
html[data-tw-mode="dark"]{background:#171717;color-scheme:dark}html[data-tw-mode="light"]{color-scheme:light}
.theme-mode-row{display:flex;align-items:end;gap:20px;margin-top:16px}.theme-mode-row .tw-field{flex:1;max-width:240px;min-width:0}.theme-mode-row .tw-field>span{font:12px var(--tw-glass-font-ui);color:var(--tw-glass-muted)}.theme-mode-row select{width:100%;min-height:44px}.theme-mode-row p{flex:1;margin:0 0 12px;font:12px/1.5 var(--tw-glass-font-ui);color:var(--tw-glass-muted)}
@media(max-width:480px){.theme-mode-row{gap:12px}.theme-mode-row .tw-field{max-width:50%}.theme-mode-row p{font-size:11px}}

.theme-motion{flex:1;min-height:44px;gap:10px;margin:0;padding-bottom:1px}.theme-motion>span{font:12px/1.4 var(--tw-glass-font-ui)}

.catalog-search>span:last-child{top:12px;display:flex}.theme-jump>span{display:flex}.close-card,#export{display:inline-flex;align-items:center;gap:8px}#carousel-prev,#carousel-next,.tw-rocker button{display:inline-flex;align-items:center;justify-content:center}

/* The real carousel uses the selected shared numbered steps, not local markers. */
.catalog-carousel{container:catalog-carousel / inline-size;display:grid;gap:12px;width:100%;max-width:390px;min-width:0}
.catalog-carousel .catalog-carousel__viewport{display:block;width:100%;max-width:none;min-width:0;overflow:hidden;border-radius:var(--tw-surface-radius,12px)}
.catalog-carousel__track{display:flex;user-select:none;-webkit-user-select:none;transition:transform 180ms ease-out}
.catalog-carousel__track.dragging{transition:none;user-select:none}
.catalog-carousel__slide{flex:0 0 100%;min-width:0;min-height:112px}
.catalog-carousel__slide strong{font:24px/1.1 var(--tw-glass-font-display)}
.catalog-carousel__navigation{display:flex;align-items:center;justify-content:space-between;gap:4px}
.catalog-carousel__navigation>.tw-button{min-width:44px;padding:8px}
.catalog-carousel__navigation .tw-carousel-indicators{flex-wrap:nowrap;gap:0}
.catalog-carousel #carousel-count{text-align:center;margin:0}
@container catalog-carousel (max-width:235px){.catalog-carousel__navigation{display:grid;grid-template-columns:1fr 1fr}.catalog-carousel__navigation .tw-carousel-indicators{grid-column:1/-1;grid-row:1}.catalog-carousel__navigation>.tw-button:last-child{justify-self:end}}
@media(prefers-reduced-motion:reduce){.catalog-carousel__track{transition:none}}

.image-toggle-examples{display:flex;flex-wrap:wrap;align-items:start;gap:var(--tw-space-component-gap)}
.image-toggle-examples>div{min-width:0;max-width:100%}