.shell,.nav-shell { width: min(100%,var(--content)); margin: auto; padding-inline: var(--gutter); }
.header { border-bottom: var(--line) solid var(--border); }
.nav-shell { min-height: 76px; display: flex; align-items: center; gap: var(--space-8); }
.wordmark { color: var(--text); text-decoration: none; font-weight: var(--weight-bold); font-size: var(--fs-lg); white-space: nowrap; letter-spacing: var(--tracking-title); }
.version { color: var(--muted); font-weight: var(--weight-normal); }
nav { display: flex; gap: var(--space-6); margin-left: auto; }
nav a,.text-link,footer a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
nav a:hover,.text-link:hover,footer a:hover { color: var(--accent); }
.theme-switcher,.segmented { display: flex; gap: var(--space-1); padding: var(--space-1); background: var(--surface-hover); border-radius: var(--radius-sm); width: fit-content; }
.theme-switcher button,.segmented button { min-height: 44px; padding: var(--space-2) var(--space-3); color: var(--muted); border: 0; background: var(--transparent); border-radius: var(--radius-xs); }
.theme-switcher button[aria-pressed="true"],.segmented button[aria-pressed="true"],.segmented button[aria-selected="true"] { background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-control); }
.intro { text-align: center; padding: var(--space-12) var(--space-0) var(--space-16); }
.intro h1 { font-size: clamp(38px,4.5vw,58px); line-height: 1.05; font-weight: 650; }
.intro h1 span { color: var(--muted); }
.intro p { color: var(--muted); margin: var(--space-5) auto var(--space-6); }
.intro .row { justify-content: center; gap: var(--space-6); }
h2 { font-size: clamp(26px,2.5vw,34px); font-weight: 600; }
h3 { font-size: var(--fs-lg); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-6); }
.section-heading p { color: var(--muted); margin-top: var(--space-3); max-width: 60ch; }
.demo-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--space-8) var(--space-5); }
.demo-card { grid-column: span 2; min-width: 0; }
.demo-card.wide { grid-column: span 3; }
.demo-surface { min-height: 360px; border: var(--line) solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--surface); display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); }
.surface-heading { display: flex; justify-content: space-between; align-items: center; color: var(--muted); margin-bottom: var(--space-2); }
.demo-index { font-family: var(--font-code); }
.demo-caption { padding: var(--space-5) var(--space-1) var(--space-0); }
.demo-caption p { color: var(--muted); margin-top: var(--space-2); line-height: 1.5; }
.action-main { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.action-main h3 { font-size: var(--fs-xl); }
.input-line { display: flex; gap: var(--space-2); }
.input-line input { min-width: 0; }
.surface-footer { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--muted); }
.surface-footer span:last-child { white-space: nowrap; }
.sample-card { background: var(--surface-raised); padding: var(--space-5); display: grid; gap: var(--space-3); }
.sample-card p { color: var(--muted); }
.sample-card .row { justify-content: space-between; }
.sample-card .button { justify-self: start; }
.file-icon { font: 28px Georgia,serif; color: var(--accent); }
.badge { font-size: var(--fs-sm); background: var(--surface-hover); }
.avatar-preview { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-0); }
.large-avatar { width: 80px; height: 80px; font-size: var(--fs-xl); background: var(--action); color: var(--on-action); }
.large-avatar[data-shape="soft"] { border-radius: var(--radius-md); }
.large-avatar[data-shape="square"] { border-radius: var(--space-0); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
label { display: grid; gap: var(--space-2); }
.table { font-size: var(--fs-md); }
.table td,.table th { padding: var(--space-3) var(--space-2); }
.table td:first-child { overflow-wrap: anywhere; }
.table th { color: var(--muted); font-weight: var(--weight-medium); }
.counter-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
.stat-card { border: 0; padding: var(--space-4); background: var(--surface-raised); }
.stat-card strong { font-size: 68px; line-height: 1.3; font-weight: 500; }
.counter-layout .stack { gap: var(--space-3); }
.counter-layout .button { padding-inline: var(--space-3); }
.compact-empty { padding: var(--space-0); gap: var(--space-2); text-align: center; justify-items: center; background: var(--transparent); }
.empty-icon { font-size: 34px; color: var(--muted); }
.compact-empty p { color: var(--muted); }
.feedback-buttons { justify-content: center; gap: var(--space-2); }
.feedback-buttons .button { padding-inline: var(--space-3); }
.mini-window { align-self: center; width: 160px; height: 100px; padding: var(--space-3); border: var(--line) solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); }
.mini-window span { display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--border); }
.mini-window div { margin-top: var(--space-3); height: 44px; width: 80%; margin-inline: auto; border: var(--line) solid var(--border); border-radius: var(--radius-xs); background: var(--surface-hover); }
.state-preview { display: grid; place-items: center; min-height: 100px; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-raised); }
.state-preview > :is(.sheet,.modal,.toast) { position: static; margin: 0; padding: var(--space-4); box-shadow: none; }
.state-preview > * { max-width: 100%; }
.registry-section { margin-top: var(--space-16); padding-block: var(--space-12); border-top: var(--line) solid var(--border); }
.component-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-3); }
.registry-item { min-height: 56px; padding: var(--space-3) var(--space-4); text-align: left; color: var(--text); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-sm); text-transform: capitalize; }
.registry-item:hover { background: var(--surface-hover); border-color: var(--muted); }
.library-section { padding-block: var(--space-10) var(--space-12); }
.toolbar { display: flex; justify-content: space-between; align-items: end; gap: var(--space-5); }
.search { flex: 1; max-width: 420px; }
#count { margin-block: var(--space-5); color: var(--muted); }
.gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-5); }
.gallery:empty { display: none; }
.template-card { display: grid; gap: var(--space-4); }
.catalogue-empty { padding: var(--space-6); border: var(--line) dashed var(--border); }
.catalogue-empty p { color: var(--muted); margin-top: var(--space-2); }
.theme-notes { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding-block: var(--space-12); border-top: var(--line) solid var(--border); }
.theme-notes p { margin-top: var(--space-4); max-width: 40ch; color: var(--muted); }
.token-samples { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.token-samples span { display: grid; gap: var(--space-2); }
.swatch { display: block; width: 52px; height: 40px; border: var(--line) solid var(--border); border-radius: var(--radius-xs); }
.bg-swatch { background: var(--bg); }.surface-swatch { background: var(--surface); }.text-swatch { background: var(--text); }.action-swatch { background: var(--action); }
footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-6); border-top: var(--line) solid var(--border); color: var(--muted); }
.toast-region { position: fixed; right: var(--gutter); bottom: var(--space-6); z-index: var(--z-overlay); max-width: calc(100vw - 32px); }
.toast-region .toast { display: flex; align-items: center; gap: var(--space-4); }
.sheet-handle { width: 44px; height: 4px; border-radius: var(--radius-sm); background: var(--muted); margin: auto; }
.local-import { padding: var(--space-5); background: var(--surface); margin-bottom: var(--space-5); }
input[type="file"] { max-width: 100%; }
@media(max-width:900px) { .nav-shell { gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-3); }.nav-shell nav { order: 3; width: 100%; justify-content: center; }.theme-switcher { margin-left: auto; }.demo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.demo-card,.demo-card.wide { grid-column: span 1; }.demo-surface { min-height: 390px; }.action-main { flex-wrap: wrap; }.counter-layout { grid-template-columns: 1fr; gap: var(--space-3); }.stat-card strong { font-size: 46px; }.theme-notes { flex-wrap: wrap; }.component-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }.toolbar { flex-wrap: wrap; }.search { max-width: none; min-width: 240px; } }
@media(max-width:600px) { .nav-shell { justify-content: center; gap: var(--space-2); }.wordmark { width: 100%; text-align: center; }.theme-switcher { margin: auto; }.nav-shell nav { gap: var(--space-5); }.intro { padding-block: var(--space-8) var(--space-12); }.intro h1 { font-size: 38px; }.desktop-break { display: none; }.intro .row { flex-direction: column; gap: var(--space-2); }.section-heading { display: grid; gap: var(--space-2); }.demo-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-8); }.demo-surface { height: auto; min-height: 0; padding: var(--space-5); }.demo-caption { padding-top: var(--space-4); }.action-main { gap: var(--space-3); }.surface-footer { font-size: var(--fs-sm); }.component-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }.counter-layout { grid-template-columns: 1fr 1fr; }.counter-layout .row { gap: var(--space-2); }.counter-layout .button { padding-inline: var(--space-2); }.stat-card { padding: var(--space-2); }.field-pair { gap: var(--space-3); }.table { font-size: var(--fs-sm); }.theme-notes { display: grid; gap: var(--space-6); }.theme-notes .button { justify-self: start; }.token-samples { grid-template-columns: repeat(4,1fr); font-size: var(--fs-sm); }.gallery { grid-template-columns: 1fr; }footer { flex-wrap: wrap; } }
.template-card > div:last-child { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.template-preview { display:block; width:100%; height:220px; border:var(--line) solid var(--border); border-radius:var(--radius-sm); background:var(--bg); }
@media (max-width:600px) { .template-preview { height:260px; } }