@font-face{font-family:Inter;src:url('../fonts/web/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/web/Inter-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/web/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/web/IBMPlexMono-Regular.woff2') format('woff2'),url('../fonts/web/IBMPlexMono-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:100%;scroll-behavior:auto}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--c-type-body-font-family),Arial,sans-serif;font-size:var(--c-type-body-font-size);font-weight:var(--c-type-body-font-weight);line-height:var(--c-type-body-line-height);letter-spacing:var(--c-type-body-letter-spacing);overflow-wrap:anywhere}
/* Buttons, links, fields, selects, chips and status labels come from kits/cosmik/components/controls.css.
   The rules below style specimen-only parts: tabs, menu items, layout and state demonstrations. */
button,input,a{font:inherit}
button:not(.c-button,.c-chip,.c-segmented__option),input:not(.c-input){border-radius:var(--c-layout-radius)}
a{color:var(--c-link);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--c-link-hover);text-decoration-thickness:2px}
a:active{color:var(--c-link-active)}
:focus-visible,.force-focus{outline:var(--c-layout-focus-width) solid var(--c-focus);outline-offset:var(--c-layout-focus-offset)}
button:focus:not(:focus-visible){outline:none}
button.force-focus{outline:var(--c-layout-focus-width) solid var(--c-focus);outline-offset:var(--c-layout-focus-offset)}
button:not(.c-button,.c-chip,.c-segmented__option){font-family:var(--c-type-control-font-family),Arial,sans-serif;font-size:var(--c-type-control-font-size);font-weight:var(--c-type-control-font-weight);line-height:var(--c-type-control-line-height);letter-spacing:var(--c-type-control-letter-spacing);min-height:var(--c-layout-control-min);min-width:var(--c-layout-control-min);padding:.5rem 1rem;cursor:pointer;transition:background-color var(--c-motion-duration) var(--c-motion-easing),color var(--c-motion-duration) var(--c-motion-easing)}
/* Static demonstrations of states a pointer would otherwise have to produce. */
.c-button--primary.force-hover{background:var(--c-action-primary-hover);border-color:var(--c-action-primary-hover)}
.c-button--primary.force-active{background:var(--c-action-primary-active);border-color:var(--c-action-primary-active)}
.loading-mark{display:inline-block;width:.625rem;height:.625rem;background:currentColor;margin-right:.5rem;vertical-align:baseline;animation:quiet-pulse 1.1s ease-in-out infinite alternate}
@keyframes quiet-pulse{from{opacity:1}to{opacity:.45}}

.wrap{width:100%;max-width:calc(var(--c-layout-max-content) + 2 * var(--c-layout-gutter));margin:auto;padding-left:min(var(--c-layout-gutter),6vw);padding-right:min(var(--c-layout-gutter),6vw)}
h1,h2,h3,p{margin:0}
h1{font-family:var(--c-type-display-font-family),serif;font-size:var(--c-type-display-font-size);font-weight:var(--c-type-display-font-weight);line-height:var(--c-type-display-line-height);letter-spacing:var(--c-type-display-letter-spacing);max-width:20ch;margin-top:1rem;margin-bottom:1.5rem}
h2{font-family:var(--c-type-section-font-family),serif;font-size:var(--c-type-section-font-size);font-weight:var(--c-type-section-font-weight);line-height:var(--c-type-section-line-height);letter-spacing:var(--c-type-section-letter-spacing)}
h3{font-family:var(--c-type-card-font-family),serif;font-size:var(--c-type-card-font-size);font-weight:var(--c-type-card-font-weight);line-height:var(--c-type-card-line-height);letter-spacing:var(--c-type-card-letter-spacing)}
p{max-width:var(--c-layout-line)}
.mono,.eyebrow,.specimen-label{font-family:var(--c-type-label-font-family),monospace;font-weight:var(--c-type-label-font-weight);font-size:var(--c-type-label-font-size);line-height:var(--c-type-label-line-height)}
.eyebrow,.specimen-label{text-transform:var(--c-type-label-text-transform);letter-spacing:var(--c-type-label-letter-spacing)}
.muted,.specimen-label{color:var(--c-muted)}
.reference-note{margin-top:1rem;color:var(--c-muted)}
.theme-section{background:var(--c-bg);color:var(--c-text);padding:3rem 0}
.theme-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:2rem}
.theme-heading h2{margin-top:.5rem}
.mode-label{font-family:'IBM Plex Mono',monospace;font-size:.875rem;line-height:1.5;color:var(--c-muted);border:1px solid var(--c-border);border-radius:var(--c-layout-radius);padding:.5rem 1rem;white-space:normal;overflow-wrap:anywhere;min-width:0}
.demo-panel{min-width:0;background:var(--c-surface);padding:2rem;border-radius:var(--c-layout-radius)}
.panel-heading{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.state-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-bottom:2rem}
.state{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.state button{width:100%}
.size-row{border-top:1px solid var(--c-divider);margin-top:1.5rem;padding-top:1.5rem;display:flex;align-items:stretch;gap:1.5rem 2rem;flex-wrap:wrap}
.size-row .state{gap:1rem;justify-content:space-between}.size-row .state button{width:auto}
.dense-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem;margin-bottom:1.5rem}.dense-fields .helper{grid-column:1/-1;margin-top:-.75rem}
.action-row{border-top:1px solid var(--c-divider);padding-top:1.5rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.demo-result{margin-top:1rem;color:var(--c-muted);min-height:1.55em}
.component-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:1.5rem}
.field-panel h3{margin-bottom:1.5rem}
.field{margin-bottom:1.5rem}
.field label{display:block;font-weight:500;font-size:.9375rem;line-height:1.4;margin-bottom:.5rem}
.chip-field{margin-bottom:1rem}
.chip-label{font-weight:500;font-size:.9375rem;line-height:1.4;margin-bottom:.5rem}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}
.helper{color:var(--c-muted);margin-top:.5rem;font-size:1.0625rem;line-height:1.55}
.error{color:var(--c-text);margin-top:.5rem;font-size:1.0625rem;line-height:1.55}
.error-symbol{font-family:'IBM Plex Mono',monospace;font-size:.875rem;line-height:1.5}
.check-label{position:relative;display:flex;align-items:center;gap:.5rem;min-height:2.75rem;width:fit-content;cursor:pointer;font-size:.9375rem;font-weight:500;line-height:1.4}
.check-label input{appearance:none;width:1.25rem;height:1.25rem;min-width:1.25rem;margin:0;border:1px solid var(--c-border);border-radius:var(--c-layout-radius);background:var(--c-input-bg);cursor:pointer}
.check-label input:checked{background:var(--c-selected);border-color:var(--c-selected)}
.check-label input:checked::after{content:'✓';display:block;text-align:center;color:var(--c-on-selected);font-size:.9375rem;font-weight:600;line-height:1.125rem}
.sample-card{min-width:0;background:var(--c-surface);padding:2rem;border-radius:var(--c-layout-radius);display:flex;flex-direction:column}
.sample-card .eyebrow{color:var(--c-muted);margin-bottom:1.5rem}
.sample-card h3{margin-bottom:1rem}
.sample-card p{margin-bottom:1.5rem}
.sample-card .c-status{margin-bottom:1.5rem}
.sample-detail{border-top:1px solid var(--c-divider);padding-top:1.5rem;margin-top:auto}
.sample-detail .mono{color:var(--c-muted);margin-bottom:.5rem}
.rules{padding-top:3rem;padding-bottom:4rem}
.rules h2{margin-bottom:1.5rem}
.rules-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-bottom:2rem}
.rules-grid h3{margin-bottom:1rem}
.code-sample{font-family:'IBM Plex Mono',monospace;font-size:.875rem;line-height:1.5;letter-spacing:0;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--c-surface);color:var(--c-text);padding:1.5rem;border:1px solid var(--c-border);border-radius:var(--c-layout-radius);margin:0}
.footer{border-top:1px solid var(--c-divider);padding-top:2rem;padding-bottom:2rem;color:var(--c-muted);font-size:.875rem;font-family:'IBM Plex Mono',monospace;line-height:1.5}
.skip-link{position:absolute;top:.5rem;left:1.5rem;transform:translateY(-180%);padding:.5rem 1rem;background:var(--c-action-primary);color:var(--c-action-primary-fg);z-index:10;min-height:2.75rem;display:flex;align-items:center}
.skip-link:focus{transform:translateY(0)}
@media(max-width:720px){h1{font-family:var(--c-type-display-small-font-family),serif;font-size:var(--c-type-display-small-font-size);font-weight:var(--c-type-display-small-font-weight);line-height:var(--c-type-display-small-line-height)}.theme-heading{gap:1rem}.mode-label{padding:.5rem}.demo-panel,.sample-card{padding:1.5rem}.state-grid{grid-template-columns:1fr}.component-grid,.rules-grid{grid-template-columns:1fr}.panel-heading{align-items:flex-start;flex-direction:column;gap:.5rem}.dense-fields{grid-template-columns:1fr}.theme-section{padding:2rem 0}.rules-grid{gap:2rem}}
@media(max-width:380px){.state-grid{grid-template-columns:1fr}.theme-heading{flex-direction:column}.action-row{align-items:flex-start;flex-direction:column}.action-row button{width:100%}}
@media print{.reference-index,.skip-link{display:none}.theme-section,.demo-panel,.sample-card{break-inside:avoid}.theme-section{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* Shared interaction examples: family roles fall back to the monochrome baseline. */
.interaction-panel{margin-top:1.5rem}
.interaction-panel>h3{margin-bottom:1.5rem}
.tab-list{display:flex;flex-wrap:wrap;gap:.5rem;border-bottom:1px solid var(--c-border);margin-bottom:1.5rem}
[role="tab"]{background:transparent;color:var(--c-muted);border:0;border-radius:0;border-bottom:3px solid transparent}
[role="tab"][aria-selected="true"]{color:var(--c-text);border-bottom-color:var(--c-accent,var(--c-text));font-weight:600}
[role="tabpanel"]>p{margin-bottom:1rem}
.menu-example{margin-top:1rem;max-width:24rem}
.button-danger{color:var(--c-status-error-fg,var(--c-status-fg));background:var(--c-status-error-bg,var(--c-status-bg));border:1px solid var(--c-status-error-border,var(--c-status-border))}
.button-danger:hover{text-decoration:underline;text-underline-offset:.2em}
dialog{max-width:min(32rem,calc(100% - 2rem));max-height:calc(100% - 2rem);overflow:auto;padding:1.5rem;border:1px solid var(--c-border);border-radius:var(--c-layout-radius);color:var(--c-text);background:var(--c-elevation-3-surface,var(--c-raised));box-shadow:var(--c-elevation-3-shadow,none)}
dialog::backdrop{background:var(--c-scrim)}
dialog h3,dialog p{margin-bottom:1rem}
.dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:1rem}
.status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.5rem}
.status-example{padding:1rem;border:1px solid var(--status-border);border-radius:var(--c-layout-radius);background:var(--status-bg);color:var(--status-fg);min-width:0}
.status-example p{margin-top:.5rem}
.status-error{--status-fg:var(--c-status-error-fg,var(--c-status-fg));--status-bg:var(--c-status-error-bg,var(--c-status-bg));--status-border:var(--c-status-error-border,var(--c-status-border))}
.status-warning{--status-fg:var(--c-status-warning-fg,var(--c-status-fg));--status-bg:var(--c-status-warning-bg,var(--c-status-bg));--status-border:var(--c-status-warning-border,var(--c-status-border))}
.status-success{--status-fg:var(--c-status-success-fg,var(--c-status-fg));--status-bg:var(--c-status-success-bg,var(--c-status-bg));--status-border:var(--c-status-success-border,var(--c-status-border))}
.status-info{--status-fg:var(--c-status-info-fg,var(--c-status-fg));--status-bg:var(--c-status-info-bg,var(--c-status-bg));--status-border:var(--c-status-info-border,var(--c-status-border))}
.elevation-sample{background:var(--c-elevation-1-surface,var(--c-raised));box-shadow:var(--c-elevation-1-shadow,none);border:1px solid var(--c-border);border-radius:var(--c-layout-radius);padding:1rem;margin-top:1.5rem}
@media(max-width:720px){.status-grid{grid-template-columns:1fr}.demo-panel,.sample-card{padding:min(1.5rem,6vw)}}

/* Composition uses the selected kit; timings are resolved by its motion policy. */
.preview-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;max-width:48rem;margin-top:2rem}
.preview-controls .field{margin:0;max-width:none}
.preview-controls label{font-size:var(--c-type-ui-font-size)}
.helper,.reference-note{font-size:var(--c-type-ui-font-size);line-height:1.5}
.action-menu button{font-family:var(--c-type-ui-font-family);font-size:var(--c-type-ui-font-size);line-height:var(--c-type-ui-line-height);min-height:var(--c-layout-control-dense);padding:.375rem .75rem}
button:not(.c-button,.c-chip,.c-segmented__option){transition-property:background-color,color,border-color;transition-duration:var(--c-motion-duration);transition-timing-function:var(--c-motion-easing)}
.action-menu{position:fixed;z-index:20;display:flex;flex-direction:column;gap:.25rem;width:18rem;max-width:calc(100vw - 2rem);max-height:calc(100dvh - 2rem);overflow:auto;scroll-padding:.5rem;padding:.5rem;margin:0;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--c-radius-md);box-shadow:var(--c-elevation-2-shadow,none)}
.action-menu button{text-align:left;border-color:transparent;background:transparent;color:var(--c-text);scroll-margin:.5rem}
.action-menu button:hover,.action-menu button:focus-visible{background:var(--c-raised)}
.action-menu .button-danger{color:var(--c-status-error-fg,var(--c-text))}
.menu-example>button{display:inline-flex;align-items:center;justify-content:space-between;gap:1rem}
.motion-surface{--surface-start:translateY(-.25rem) scale(.98);opacity:0;transform:var(--surface-start);transition:opacity var(--c-motion-duration) var(--c-motion-easing),transform var(--c-motion-duration) var(--c-motion-easing);transform-origin:top left}
.motion-surface[data-phase="open"]{opacity:1;transform:none}
.motion-surface[data-phase="closing"]{transition-duration:calc(var(--c-motion-duration) * .7);transition-timing-function:ease-in;pointer-events:none}
dialog.motion-surface{--surface-start:translateY(.5rem) scale(.99);transform-origin:center;max-width:min(32rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);scroll-padding:1rem}
dialog::backdrop{background:var(--c-scrim)}
.disclosure-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--c-motion-duration) var(--c-motion-easing),opacity var(--c-motion-duration) var(--c-motion-easing)}
.disclosure-body[data-phase="open"]{grid-template-rows:1fr;opacity:1}
.disclosure-body>div{min-height:0;overflow:hidden}
.disclosure-content{padding:.75rem .25rem .25rem}
.disclosure-content a{display:inline-block;margin-top:.75rem}
.disclosure-body[data-phase="open"]>div{overflow:clip;overflow-clip-margin:.25rem}
.motion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:1.5rem}
.motion-grid h3{font-family:var(--c-type-ui-font-family);font-size:var(--c-type-ui-font-size);font-weight:600}
.motion-grid .helper{margin-bottom:1rem}
.motion-grid .demo-panel{padding:1.5rem}
.tooltip{position:fixed;z-index:30;max-width:min(18rem,calc(100vw - 2rem));padding:.5rem .75rem;border:1px solid var(--c-border);border-radius:var(--c-radius-md);background:var(--c-surface);color:var(--c-text);font-size:var(--c-type-ui-small-font-size);line-height:1.5}
.completion-result{margin-top:1rem;padding:.75rem;border-radius:var(--c-radius-sm);border:1px solid var(--c-divider);font-size:var(--c-type-ui-font-size);color:var(--c-muted)}
.completion-cue{animation:ready-cue calc(var(--c-motion-duration) * 4) var(--c-motion-easing) 1}
@keyframes ready-cue{0%,100%{background:transparent;border-color:var(--c-divider)}35%{background:var(--c-raised);border-color:var(--c-border)}}
.loading-mark.motion-paused{animation:none}
@media(pointer:coarse){.action-menu button{min-height:var(--c-layout-control-min);min-width:var(--c-layout-control-min)}}
@media(max-width:720px){.preview-controls,.motion-grid{grid-template-columns:1fr}.motion-grid .demo-panel{padding:min(1.5rem,6vw)}}
@media(forced-colors:active){.button-danger,.action-menu,.tooltip,.demo-panel,.sample-card,.status-example{border:1px solid ButtonText}.check-label input{appearance:auto}.check-label input:checked::after{content:none}.loading-mark{background:CanvasText}.completion-cue{animation:none}}

/* The native modal remains in the top layer until both surface and scrim exit. */
dialog.motion-surface::backdrop{opacity:0;transition:opacity var(--c-motion-duration) var(--c-motion-easing)}
dialog.motion-surface[data-phase="open"]::backdrop{opacity:1}
dialog.motion-surface[data-phase="closing"]::backdrop{transition-duration:calc(var(--c-motion-duration) * .7);transition-timing-function:ease-in}
@starting-style{dialog.motion-surface[data-phase="open"]::backdrop{opacity:0}}
@media(max-width:720px){dialog.motion-surface{padding:min(1.5rem,5vw)}.dialog-actions{flex-direction:column;align-items:stretch;gap:.75rem}.dialog-actions button{width:100%}}
@media(forced-colors:active){[role="tab"]{border-bottom-width:0;padding-bottom:calc(.5rem + 3px)}[role="tab"][aria-selected="true"]{border-bottom-width:3px;padding-bottom:.5rem}}

.reference-intro{padding-top:2rem;padding-bottom:2rem;border-bottom:1px solid var(--c-divider)}
.reference-intro h1{font-family:var(--c-type-section-font-family);font-size:var(--c-type-section-font-size);font-weight:var(--c-type-section-font-weight);line-height:var(--c-type-section-line-height);letter-spacing:var(--c-type-section-letter-spacing);margin:.5rem 0 1rem;max-width:none}
.reference-index{display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin-top:1rem;font-size:var(--c-type-ui-font-size)}
.reference-index a{display:inline-flex;align-items:center;min-height:var(--c-layout-control-min)}

/* Toolbars and segmented controls come from controls.css; this only lays out the examples. */
.toolbar-row{border-top:1px solid var(--c-divider);margin-top:1.5rem;padding-top:1.5rem;display:flex;align-items:stretch;gap:1.5rem 2rem;flex-wrap:wrap}
.toolbar-row .state{gap:1rem}.toolbar-row .c-button:not(.c-button--icon){width:auto}
.toolbar-row .helper{flex-basis:100%;margin-top:0}
.c-button--icon svg{width:1.125rem;height:1.125rem}

/* Glass controls come from controls.css. The stages stand in for busy content
   (a canvas, media): their raw colours are content, not interface roles. Glass
   keeps the theme's tone over all of them, so each theme shows its glass over
   light content, dark content and busy content that spans both, with saturated
   colours, fine stripes and a checker. */
.glass-row{border-top:1px solid var(--c-divider);margin-top:1.5rem;padding-top:1.5rem;display:flex;flex-direction:column;gap:1rem}
.glass-row .helper{margin-top:0}
.glass-stage{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:1rem 1.5rem;border-radius:var(--c-radius-md);min-height:12rem}
.glass-stage--light{background:
    linear-gradient(90deg,#FFFFFF 0 14%,#F2E8D5 14% 28%,#FFD54F 28% 42%,#9AD0FF 42% 56%,#F4A6B8 56% 70%,#C8E6C9 70% 84%,#BDBDBD 84%) top/100% 34% no-repeat,
    repeating-linear-gradient(90deg,#999999 0 1px,#FFFFFF 1px 2px) center/100% 33% no-repeat,
    repeating-conic-gradient(#AAAAAA 0 25%,#FFFFFF 0 50%) bottom left/16px 16px}
.glass-stage--dark{background:
    linear-gradient(90deg,#000000 0 14%,#1F1F1F 14% 28%,#E0301E 28% 42%,#2563EB 42% 56%,#3A0D4D 56% 70%,#0F3D2A 70% 84%,#6E6E6E 84%) top/100% 34% no-repeat,
    repeating-linear-gradient(90deg,#000000 0 1px,#555555 1px 2px) center/100% 33% no-repeat,
    repeating-conic-gradient(#000000 0 25%,#444444 0 50%) bottom left/16px 16px}
/* Busy content: the full range side by side, as a lit scene moves under glass. */
.glass-stage--busy{background:
    linear-gradient(90deg,#FFFFFF 0 12%,#000000 12% 24%,#FFFF00 24% 36%,#0000FF 36% 48%,#00FF00 48% 60%,#FF00FF 60% 72%,#FF0000 72% 84%,#00FFFF 84%) top/100% 34% no-repeat,
    repeating-linear-gradient(90deg,#000000 0 3px,#FFFFFF 3px 6px) center/100% 33% no-repeat,
    repeating-conic-gradient(#000000 0 25%,#FFFFFF 0 50%) bottom left/24px 24px}
/* Spread the controls over all three kinds of content: blocks, stripes, checker. */
.glass-stage>:nth-child(3n+1){align-self:flex-start}.glass-stage>:nth-child(3n){align-self:flex-end}
.glass-hint{padding:.5rem .75rem;font-size:var(--c-type-ui-font-size);line-height:var(--c-type-ui-line-height)}
.glass-hint p{max-width:none}