/* Gallery composition uses public tokens and caller-owned classes only. */
body { margin: 0; }
button, input, select, textarea { font: inherit; }
.gallery { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); color: var(--text); }
.gallery a { color: var(--accent-text); }
.gallery button { cursor: pointer; }
.gallery button:disabled { cursor: default; }
.gallery :is(.skip-link, .wordmark, .explorer-home, .explorer-entry, .collection-card, .back-link, .icon-tile, .gallery-footer a, .context-surface):focus-visible { outline: var(--focus-width) solid var(--focus-color, var(--accent-text)); outline-offset: var(--focus-gap); }
.skip-link { position: fixed; inset-block-start: -5rem; inset-inline-start: 1rem; padding: var(--space-3); background: var(--surface); z-index: var(--z-toast); }
.skip-link:focus { inset-block-start: 1rem; }
.gallery-topbar { flex: none; min-height: 5rem; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); background: var(--surface); }
.wordmark { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--text) !important; }
.wordmark strong { font-size: var(--text-xl); letter-spacing: -.04em; }
.wordmark strong span { color: var(--text-muted); font-weight: var(--font-weight-normal); }
.brand-mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-contrast); font-family: Literata, Georgia, serif; font-size: var(--text-xl); font-style: italic; }
.edition { padding-inline-start: var(--space-4); margin-inline-start: var(--space-2); border-inline-start: 1px solid var(--border); font-size: var(--text-xs); letter-spacing: .16em; color: var(--text-muted); }
.topbar-actions { display: flex; align-items: center; gap: var(--space-4); }
.gallery-layout { flex: 1; min-height: 0; width: 100%; display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); max-width: 110rem; margin-inline: auto; }
.explorer { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--space-6) var(--space-4); border-inline-end: 1px solid var(--border); }
.explorer-home, .explorer-entry { background: transparent; border: 0; color: var(--text-muted); text-align: start; width: 100%; border-radius: var(--radius-md); }
.explorer-home { display: flex; align-items: center; gap: var(--space-2); margin-block: var(--space-5); padding: var(--space-3); font-weight: var(--font-weight-medium); }
.explorer-home span { margin-inline-start: auto; font-size: var(--text-xs); }
.explorer-entry { padding: var(--space-2) var(--space-3); min-height: var(--control-height); }
.explorer-entry:hover, .explorer-home:hover { background: var(--surface-hover); color: var(--text); }
.explorer [aria-current="page"] { color: var(--accent-text); background: var(--accent-subtle); font-weight: var(--font-weight-semibold); }
.explorer-group { margin-block: var(--space-5); }
.explorer-group h2 { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); margin: 0 var(--space-3) var(--space-2); }
.explorer-footer { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-4) var(--space-3); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-xs); }
.gallery-content { min-height: 0; overflow: auto; scrollbar-gutter: stable; overscroll-behavior: contain; min-width: 0; padding: var(--space-7) clamp(1.25rem, 4vw, 4.5rem) var(--space-5); }
.gallery-content:focus { outline: none; } /* Programmatic skip/navigation target; interactive descendants retain focus. */
.hero { position: relative; isolation: isolate; min-height: 23rem; padding-block: var(--space-5) var(--space-7); border-bottom: 1px solid var(--border); overflow: hidden; }
.eyebrow { display: block; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: .14em; color: var(--accent-text); text-transform: uppercase; }
.hero h1 { font-family: Literata, Georgia, serif; font-size: clamp(2.7rem, 4.8vw, 5rem); letter-spacing: -.065em; font-weight: 450; line-height: 1.15; margin-block: var(--space-5); position: relative; z-index: 1; }
.hero h1 em { font-weight: inherit; color: var(--accent-text); }
.hero p { max-width: 27rem; color: var(--text-muted); font-size: var(--text-lg); line-height: 1.7; position: relative; z-index: 1; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); position: relative; z-index: 1; }
.hero-actions > span { font-size: var(--text-xs); color: var(--text-muted); }
.hero-swatch { position: absolute; inset-inline-end: 1rem; inset-block-start: 4rem; width: 18rem; height: 18rem; z-index: 0; }
.swatch-orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--border); background: radial-gradient(ellipse at 65% 28%, var(--accent-subtle), transparent 70%); }
.swatch-orbit::after { content: ''; position: absolute; inset: 1.3rem; border: 1px solid var(--border); border-radius: inherit; }
.swatch-stack { display: flex; align-items: center; justify-content: center; height: 100%; transform: rotate(-12deg); }
.swatch-stack span { width: 5rem; height: 9rem; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); box-shadow: var(--shadow-2); background: var(--surface); margin-inline-start: -1.25rem; }
.swatch-stack span:nth-child(2) { background: var(--accent); transform: translateY(-.8rem); }
.swatch-stack span:nth-child(3) { background: var(--accent-subtle); }
.swatch-label { position: absolute; inset-block-end: -1.5rem; width: 100%; text-align: center; font-size: var(--text-xs); color: var(--text-muted); letter-spacing: .08em; }
.section-heading { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; margin-block: var(--space-6) var(--space-5); }
.section-heading h2 { font-size: var(--text-xl); font-weight: var(--font-weight-medium); margin: 0; letter-spacing: -.025em; }
.section-heading > span { color: var(--text-muted); font-size: var(--text-sm); }
.collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-4); }
.collection-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-align: start; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease); min-width: 0; }
.collection-card:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.collection-category { font-size: var(--text-xs); color: var(--accent-text); letter-spacing: .08em; text-transform: uppercase; }
.collection-card > strong { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); letter-spacing: -.025em; }
.collection-description { color: var(--text-muted); line-height: 1.6; }
.collection-meta { display: flex; justify-content: space-between; align-items: end; gap: var(--space-2); margin-block-start: auto; padding-block-start: var(--space-3); color: var(--text-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.collection-meta svg { flex-shrink: 0; color: var(--accent-text); }
.gallery-footer { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-block-start: var(--space-7); padding-block: var(--space-5); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-muted); }
.gallery-footer a { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; text-decoration: none; }
.example-heading { margin-block-end: var(--space-6); }
.back-link { display: flex; align-items: center; gap: var(--space-2); background: transparent; color: var(--text-muted); border: 0; padding: var(--space-2) 0; margin-block-end: var(--space-6); }
.title-with-info { display: flex; align-items: center; gap: var(--space-3); }
.example-heading h1 { margin-block: var(--space-3); font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: -.05em; font-weight: var(--font-weight-medium); }
.component-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.component-tags code { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); color: var(--text-muted); font-size: var(--text-xs); }
.example-stage { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-5); }
.example-footnote { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); margin-block: var(--space-4); font-size: var(--text-xs); }
.specimen { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.specimen-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); align-items: end; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); }
.playground { padding: var(--space-5) 0; }
.action-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.action-row small { font-size: var(--text-xs); }
.field-grid, .reading-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.result { display: block; padding: var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }
.color-preview { align-self: center; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); }
.feedback-stack { display: flex; flex-direction: column; gap: var(--space-5); }
.tone-row { display: grid; grid-template-columns: 5rem 1rem minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.context-surface { padding: var(--space-7) var(--space-5); text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-sunken); margin-block-start: var(--space-5); }
.mini-shell { height: 34rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); position: relative; }
.mini-bottom { display: block; padding: var(--space-3); }
.layout-demo { display: flex; flex-direction: column; gap: var(--space-5); }
.layout-block { display: grid; place-items: center; flex: 1; padding: var(--space-3); border: 1px dashed var(--accent); border-radius: var(--radius-md); background: var(--accent-subtle); color: var(--accent-text); min-width: 0; overflow-wrap: anywhere; }
.reading-sample { --kg-markdown-speech: var(--accent-text); min-width: 0; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.grid-tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-5); }
.image-example { max-width: 42rem; width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.icon-selection { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); min-height: 5rem; padding: var(--space-4); border-bottom: 1px solid var(--border); color: var(--accent-text); }
.icon-selection code { overflow-wrap: anywhere; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr)); gap: var(--space-2); }
.icon-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4) var(--space-2); min-height: 6.5rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); }
.icon-tile span { font-size: var(--text-xs); overflow-wrap: anywhere; max-width: 100%; }
.icon-tile:hover, .icon-tile[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text); background: var(--accent-subtle); }
.type-specimen { padding: var(--space-6); background: var(--bg); border-radius: var(--radius-lg); }
.type-display { font-family: var(--kg-markdown-font); font-size: clamp(1.8rem, 3vw, 3.2rem); line-height: var(--leading-tight); letter-spacing: -.035em; margin-block: var(--space-5); }
.ui-type-scale { display: flex; flex-direction: column; gap: var(--space-4); }
.ui-type-scale code { display: inline-block; min-width: 8rem; font-size: var(--text-xs); color: var(--text-muted); }
.font-specimens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-4); }
.font-specimens > div { display: flex; flex-direction: column; gap: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); }
.font-specimens strong { font-size: var(--text-xl); font-weight: 400; }
.theme-intro { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-5); }
.theme-fields { display: flex; flex-direction: column; gap: var(--space-5); }
.theme-section { display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--space-4); }
@media (min-width: 1200px) { .gallery--editing .gallery-layout { width: calc(100% - 24rem); margin-inline-end: 24rem; } }
@media (min-width: 1500px) { .hero-swatch { inset-inline-end: 6%; } }
@media (max-width: 1200px) { .hero-swatch { width: 13rem; height: 13rem; opacity: .35; inset-inline-end: 0; } }
@media (max-width: 900px) { .gallery-layout { grid-template-columns: 12.5rem minmax(0, 1fr); } .hero-swatch { display: none; } .field-grid, .reading-editor { grid-template-columns: minmax(0, 1fr); } .gallery-content { padding-inline: var(--space-5); } .edition { display: none; } }
@media (max-width: 640px) {
    .gallery-topbar { padding: var(--space-3) var(--space-4); min-height: 4rem; }
    .topbar-actions > .kg-badge { display: none; } /* Documented Badge root; header metadata only. */
    .gallery-layout { display: flex; flex-direction: column; }
    .explorer { flex: none; max-height: min(15rem, 30dvh); border-inline-end: 0; border-bottom: 1px solid var(--border); padding: var(--space-4); }
    .explorer nav { display: flex; gap: var(--space-3); overflow-x: auto; max-height: 7rem; padding-block-end: var(--space-2); }
    .explorer-group { min-width: 10rem; margin-block: var(--space-2); }
    .explorer-home { margin-block: var(--space-3); }
    .explorer-footer { display: none; }
    .gallery-content { flex: 1; padding: var(--space-5) var(--space-4); }
    .hero { min-height: auto; padding-block: var(--space-4) var(--space-6); }
    .hero h1 { font-size: 3rem; }
    .hero p { font-size: var(--text-base); }
    .hero-actions { align-items: start; flex-direction: column; }
    .example-stage { padding: var(--space-4); }
    .tone-row { grid-template-columns: 5rem minmax(0, 1fr); }
    .tone-row > :last-child { grid-column: 1 / -1; }
    .type-specimen { padding: var(--space-4); }
    .mini-shell { height: 30rem; }
}
@media (prefers-reduced-motion: reduce) { .collection-card { transition: none; } }
:where([data-kg-reduced-motion]) .collection-card { transition: none; }

.reconnect-preview { display: block; width: 100%; height: 23rem; border: 0; border-radius: var(--radius-md); }

.navigation-playground { display: flex; flex-direction: column; gap: var(--space-5); }
.navigation-preview { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr); height: 27rem; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.navigation-rail, .navigation-sections { min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: var(--space-4); }
.navigation-rail { border-inline-end: 1px solid var(--border); background: var(--surface-sunken); }
.example-quicklinks { margin-block-start: var(--space-5); }
.navigation-section { min-height: 22rem; padding-block: var(--space-3); }
.shell-section { min-height: 28rem; }
@media (max-width: 640px) {
    .navigation-preview { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 10rem) minmax(0, 1fr); height: 32rem; }
    .navigation-rail { border-inline-end: 0; border-bottom: 1px solid var(--border); }
}