/* Approved first-screen composition */
.lede { padding-top:28px }
.lede__head { display:flex; flex-direction:column; align-items:center; text-align:center }
.eyebrow-pill {
  margin:0; display:inline-flex; align-items:center; gap:9px; min-height:28px;
  padding:3px 14px; font-family:var(--f-mono); font-size:12.5px;
  color:var(--c-muted); background:var(--c-panel); border-radius:var(--r-pill);
}
.eyebrow-pill__dot { width:7px; height:7px; border-radius:var(--r-round); background:var(--c-accent); flex-shrink:0 }
.lede__title { margin:18px 0 0; font-size:var(--size-h1); font-weight:var(--weight-normal); line-height:1.1; letter-spacing:-.02em }
.lede__line { display:block }
.lede__em { font-style:normal; color:var(--c-accent) }
.lede__actions { margin-top:24px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px 30px }
.lede__desc { margin:20px 0 0; max-width:820px; font-size:16px; line-height:1.5; color:var(--c-muted) }
.lede__desc strong { color:var(--c-text); font-weight:var(--weight-medium) }
.osrow { margin:16px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 36px }
.osrow__link { display:inline-flex; align-items:center; gap:8px; min-height:22px; font-size:14px; color:var(--c-muted); text-decoration:none }
.osrow__link svg { width:18px; height:18px; flex-shrink:0; color:var(--c-text) }
.osrow__link:hover { color:var(--c-text) }
.rig { margin-top:28px; height:392px; display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:20px }
.rig > * { min-width:0 }
.rig__canvas { position:relative; margin:0; background:var(--c-sage); color:var(--c-text); border-radius:var(--r-container); overflow:hidden }
.rig__geo { position:absolute; inset:0; width:100%; height:100%; display:block }
.geo-ring,.geo-lattice { fill:none; stroke:var(--c-ink); stroke-width:1 }
.geo-link { fill:none; stroke:var(--c-ink); stroke-width:1; stroke-dasharray:3 5 }
.geo-node { fill:var(--c-sage); stroke:var(--c-ink); stroke-width:1 }
.win {
  position:absolute; left:48px; top:40px; width:560px;
  background:var(--c-ui); color:var(--c-ui-text); border:1px solid var(--c-ui-line);
  border-radius:var(--r-window); box-shadow:var(--shadow-window); font-family:var(--f-body); line-height:1.5;
}
.win__bar { position:relative; height:38px; display:flex; align-items:center; padding:0 14px; border-bottom:1px solid var(--c-ui-line) }
.win__dots { display:flex; gap:6px; flex-shrink:0 }
.win__dots i { display:block; width:9px; height:9px; border-radius:var(--r-round); background:var(--c-ui-dot) }
.win__title { position:absolute; left:0; right:0; text-align:center; font-size:12.5px; color:var(--c-ui-muted); letter-spacing:.01em }
.win__tabs { display:flex; flex-wrap:wrap; gap:2px; padding:6px 14px 0; border-bottom:1px solid var(--c-ui-line) }
.win__tab { padding:7px 10px 8px; font-size:12px; color:var(--c-ui-muted); border-bottom:1px solid var(--c-clear); margin-bottom:-1px }
.win__tab.is-on { color:var(--c-ui-text); border-bottom-color:var(--c-ui-text) }
.win__rows { margin:0; padding:6px 20px }
.win__row { display:grid; grid-template-columns:150px minmax(0,1fr); align-items:center; min-height:42px; border-bottom:1px solid var(--c-ui-line) }
.win__row:last-child { border-bottom:0 }
.win__row dt { font-size:13px; color:var(--c-ui-text) }
.win__row dd { margin:0; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:10px }
.win__field { min-width:76px; padding:4px 10px; font-family:var(--f-mono); font-size:12.5px; color:var(--c-ui-text); background:var(--c-ui-field); border:1px solid var(--c-ui-line); border-radius:var(--r-field) }
.win__hint { font-family:var(--f-mono); font-size:11.5px; color:var(--c-ui-muted) }
.tgl { position:relative; display:inline-block; width:30px; height:17px; flex-shrink:0; border-radius:var(--r-pill); background:var(--c-ui-seg) }
.tgl i { position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:var(--r-round); background:var(--c-ui-muted) }
.tgl.is-on { background:var(--c-accent) }
.tgl.is-on i { transform:translateX(13px); background:var(--c-on-dark) }
.tgl-state { font-size:12px; color:var(--c-ui-muted) }
.seg { display:inline-flex; flex-wrap:wrap; padding:2px; background:var(--c-ui-field); color:var(--c-ui-text); border:1px solid var(--c-ui-line); border-radius:var(--r-segment) }
.seg__opt { padding:4px 10px; font-size:12px; color:var(--c-ui-muted); border-radius:var(--r-option); white-space:nowrap }
.seg__opt.is-on { background:var(--c-ui-seg); color:var(--c-ui-text) }
.seg--mono .seg__opt { font-family:var(--f-mono); font-size:11.5px }
.win__foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 20px 16px; border-top:1px solid var(--c-ui-line) }
.win__btn { padding:6px 18px; font-size:12px; color:var(--c-ui-text); border:1px solid var(--c-ui-line); border-radius:var(--r-field) }
.win__btn--pri { background:var(--c-ui-text); color:var(--c-ui); border-color:var(--c-ui-text) }
.rig__pick { display:flex; padding:20px; background:var(--c-panel-2); color:var(--c-text); border-radius:var(--r-container) }
.pickcard { flex:1; min-width:0; display:flex; flex-direction:column; padding:24px 26px; background:var(--c-bg); color:var(--c-text); border-radius:var(--r-card) }
.pickcard__title { margin:0; font-weight:var(--weight-normal); font-size:20px; line-height:1.3; letter-spacing:-.01em }
.pickcard__list { margin:14px 0 0; padding:0; list-style:none }
.pickrow { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; column-gap:16px; padding:14px 0; border-top:1px solid var(--c-border) }
.pickrow__mark { width:36px; height:36px; display:block }
.pickrow__mark * { fill:none; stroke:var(--c-ink); stroke-width:1 }
.pickrow__os { display:block; font-size:12.5px; color:var(--c-muted); line-height:18px }
.pickrow__to { display:block; margin-top:3px; font-size:18px; line-height:24px; letter-spacing:-.01em }
.pickrow__arrow { color:var(--c-muted); margin-right:4px }
.pickrow__core { font-size:13px; color:var(--c-muted); letter-spacing:0 }
.pickcard__more { margin-top:auto; align-self:flex-start; font-size:14.5px }
.dl-entry { margin-top:52px; padding-bottom:96px }
.dl-entry__panel { padding:64px 72px; background:var(--c-panel); color:var(--c-text); border-radius:var(--r-container) }
.dl-entry__title { margin:0; font-size:36px; line-height:1.15; letter-spacing:-.02em }
.dl-entry__text { margin:16px 0 0; max-width:620px; color:var(--c-muted) }
.dl-entry__go { display:inline-block; margin-top:24px }

/* Tabs: progressive enhancement leaves all panels readable without scripts. */
.tabs { min-width:0 }
.tabs__list { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:28px; padding:6px; border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text) }
.tabs__tab {
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 20px;
  border:1px solid var(--c-clear); border-radius:var(--r-pill);
  font-size:15px; background:var(--c-clear); color:var(--c-muted); text-align:left;
}
.tabs__tab[aria-selected="true"] { background:var(--c-bg); color:var(--c-text) }
.tabs__tab:hover { color:var(--c-text) }
.tabs__panel { min-width:0; scroll-margin-top:24px }
.tabs:not(.is-enhanced) .tabs__panel + .tabs__panel { margin-top:24px }
.feature-tabs { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:48px }
.feature-tabs .tabs__list { display:flex; flex-direction:column; align-self:start; gap:0; padding:0; margin:0; border-radius:0; background:var(--c-bg); color:var(--c-text) }
.feature-tabs .tabs__tab { position:relative; display:block; width:100%; padding:22px 24px; border:0; border-bottom:1px solid var(--c-border); border-radius:0; background:var(--c-bg); color:var(--c-text) }
.feature-tabs .tabs__tab[aria-selected="true"]::before { content:""; position:absolute; left:0; top:18px; bottom:18px; width:2px; background:var(--c-accent) }
.tabs__label { display:block; font-size:22px; line-height:1.4; font-weight:var(--weight-normal) }
.tabs__note { display:block; margin-top:7px; font-size:15px; color:var(--c-muted); line-height:1.6 }
.feature-tabs .tabs__panel { grid-column:2; grid-row:1; padding:40px; background:var(--c-panel); color:var(--c-text); border-radius:var(--r-panel) }
.feature-tabs:not(.is-enhanced) .tabs__panel { grid-row:auto }
.feature-tabs .tabs__panel p { margin-top:28px; font-size:16px; line-height:1.9 }
.feature-art { display:block; width:200px; height:200px; margin:0 auto 28px; fill:none; stroke:var(--c-ink); stroke-width:1 }
.toc {
  position:sticky; top:16px; z-index:10; display:flex; flex-wrap:wrap; gap:6px 10px;
  padding:12px; margin-bottom:36px; max-width:100%; border:1px solid var(--c-border);
  background:var(--c-bg); color:var(--c-text); border-radius:var(--r-card);
}
.toc a { display:block; padding:8px 12px; font-size:14px; text-decoration:none; border-radius:var(--r-pill) }
.toc a:hover,.toc a[aria-current="location"] { background:var(--c-panel); color:var(--c-text) }
.faq-item { border-bottom:1px solid var(--c-border) }
.faq-item summary { position:relative; list-style:none; cursor:pointer; padding:24px 40px 24px 0; font-size:18px; line-height:1.5 }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:4px; top:23px; color:var(--c-muted); font-size:22px }
.faq-item[open] summary::after { content:"−" }
.faq-item__body { padding-bottom:24px; max-width:800px; color:var(--c-muted) }
.faq-item__body p:last-child { margin-bottom:0 }
.term-card { padding:28px; background:var(--c-panel); color:var(--c-text); border-radius:var(--r-card) }
.term-card__category { font-size:13px; color:var(--c-muted) }
.term-card h3 { margin:10px 0 14px }
.term-card p { margin-bottom:0; color:var(--c-muted) }
.download-card { padding:32px; border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); border:1px solid var(--c-border) }
.download-card--featured { background:var(--c-panel); color:var(--c-text); border-color:var(--c-panel) }
.download-card__head { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:24px }
.download-card__head > div { min-width:0 }
.download-card__icon { width:56px; height:56px; flex-shrink:0 }
.download-card__title { margin:0; font-size:26px }
.download-card__meta { margin:4px 0 0; font-size:14px; color:var(--c-muted) }
.download-card__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px }
.download-card__detail { margin-top:24px; padding-top:20px; border-top:1px solid var(--c-border); font-size:14px; color:var(--c-muted) }
.badge,.tag {
  display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:4px 10px;
  border-radius:var(--r-pill); background:var(--c-panel-2); color:var(--c-text);
  font-size:12px; line-height:1.5; overflow-wrap:anywhere; white-space:normal;
}
.badge--first { background:var(--c-ui); color:var(--c-on-dark) }
.badge--recommended { background:var(--c-panel-2); color:var(--c-text); border:1px solid var(--c-muted) }
.badge--retired { background:var(--c-panel); color:var(--c-muted); border:1px dashed var(--c-muted) }
.tag-row { display:flex; flex-wrap:wrap; justify-content:center; gap:8px }
.article-card { display:flex; flex-direction:column; padding:28px; background:var(--c-panel); color:var(--c-text); border-radius:var(--r-card) }
.article-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:13px; color:var(--c-muted); margin-bottom:24px }
.article-card h3 { font-size:22px; line-height:1.5; margin-bottom:16px }
.article-card h3 a { text-decoration:none }
.article-card h3 a:hover { text-decoration:underline; text-decoration-color:var(--c-accent) }
.article-card p { color:var(--c-muted); font-size:15px }
.article-card__more { margin-top:auto; align-self:start }
.callout {
  margin:28px 0; padding:24px 28px; border-left:2px solid var(--c-accent);
  background:var(--c-panel); color:var(--c-text); border-radius:0 var(--r-card) var(--r-card) 0;
}
.callout p:last-child { margin-bottom:0 }
.callout__title { display:block; margin-bottom:10px; font-weight:var(--weight-medium) }
.callout--warning { border-left-color:var(--c-warn) }
.callout--error { border-left-color:var(--c-error) }
.callout--success { border-left-color:var(--c-success) }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; -webkit-overflow-scrolling:touch; border:1px solid var(--c-border); border-radius:var(--r-card) }
.data-table { width:100%; border-collapse:collapse; text-align:left; font-size:15px }
.data-table th,.data-table td,.prose table th,.prose table td {
  min-width:7em; padding:16px 20px; vertical-align:top; border-bottom:1px solid var(--c-border);
  overflow-wrap:normal; word-break:normal;
}
.data-table th,.prose table th { background:var(--c-panel); color:var(--c-text); font-weight:var(--weight-medium) }
.data-table td,.prose table td { background:var(--c-bg); color:var(--c-text) }
.data-table tr:last-child td { border-bottom:0 }
.prose table {
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  max-width:100%; min-width:0; border-collapse:collapse; margin-block:28px;
}
.prose table code,.data-table code { overflow-wrap:anywhere }
.article-download { margin-top:48px; padding:32px; border-radius:var(--r-panel); background:var(--c-panel); color:var(--c-text) }
.article-download h2 { margin:0 0 16px; font-size:26px }
.article-download p { color:var(--c-muted) }
.dl-fab {
  position:fixed; right:24px; bottom:20px; z-index:20;
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 18px;
  font-size:14px; line-height:1.5; color:var(--c-text); text-decoration:none;
  background:var(--c-bg); border:1px solid var(--c-border); border-radius:var(--r-pill);
  box-shadow:var(--shadow-fab); transition:border-color var(--duration) var(--ease);
}
.dl-fab svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.dl-fab:hover { border-color:var(--c-accent) }
.geometry-band { position:relative; height:220px; border-radius:var(--r-container); background:var(--c-panel); color:var(--c-text); margin-block:48px }
.geometry-band svg { width:100%; height:100%; display:block; fill:none; stroke:var(--c-ink); stroke-width:1 }

/* Preview-only furniture, kept external to the static document. */
.specimen { padding-top:64px; padding-bottom:64px }
.specimen__title { margin-bottom:32px; font-size:32px }
.swatch-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.swatch { margin:0; min-width:0; border:1px solid var(--c-border); border-radius:var(--r-window); overflow:hidden }
.swatch__paint { height:72px }
.swatch figcaption { padding:12px; font-family:var(--f-mono); font-size:12px; overflow-wrap:anywhere; background:var(--c-bg); color:var(--c-text) }
.swatch--bg { background:var(--c-bg) }
.swatch--panel { background:var(--c-panel) }
.swatch--panel2 { background:var(--c-panel-2) }
.swatch--border { background:var(--c-border) }
.swatch--accent { background:var(--c-accent) }
.swatch--accent-dark { background:var(--c-accent-dark) }
.swatch--text { background:var(--c-text) }
.swatch--muted { background:var(--c-muted) }
.swatch--success { background:var(--c-success) }
.swatch--warn { background:var(--c-warn) }
.swatch--error { background:var(--c-error) }
.swatch--sage { background:var(--c-sage) }
.swatch--ink { background:var(--c-ink) }
.swatch--ui { background:var(--c-ui) }
.swatch--ui-line { background:var(--c-ui-line) }
.swatch--ui-field { background:var(--c-ui-field) }
.swatch--ui-seg { background:var(--c-ui-seg) }
.swatch--ui-dot { background:var(--c-ui-dot) }
.swatch--ui-text { background:var(--c-ui-text) }
.swatch--ui-muted { background:var(--c-ui-muted) }
.swatch--on-dark { background:var(--c-on-dark) }
.type-display { font-family:var(--f-display); font-size:var(--size-h1); line-height:1.12; font-weight:var(--weight-normal) }
.type-mono { font-family:var(--f-mono); font-size:14px }
.button-samples { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-block:24px }
@media (max-width:1180px) {
  .rig { grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) }
  .win { left:32px; max-width:calc(100% - 64px) }
  .pickcard { padding:24px 20px }
  .pickrow { column-gap:12px }
}
@media (max-width:1023px) {
  .rig { height:auto; grid-template-columns:minmax(0,1fr) }
  .rig__canvas { padding:32px 32px 0 }
  .win { position:relative; left:auto; top:auto; width:100%; max-width:560px; margin-bottom:-38px }
  .dl-entry__panel { padding:48px 32px }
  .feature-tabs { gap:24px; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) }
  .feature-tabs .tabs__panel { padding:28px }
}
@media (max-width:640px) {
  .lede { padding-top:20px }
  .lede__actions { gap:16px 22px }
  .osrow { gap:14px 24px }
  .rig__canvas { padding:22px 16px 0 }
  .win__rows { padding:4px 14px }
  .win__row { grid-template-columns:minmax(0,1fr); min-height:0; row-gap:7px; padding:10px 0 }
  .win__row dt { font-size:12.5px }
  .seg__opt { font-size:11.5px; padding:4px 8px }
  .win__tab { font-size:11.5px; padding:7px 8px 8px }
  .win__foot { padding:10px 14px 14px }
  .rig__pick { padding:14px }
  .pickcard { padding:20px }
  .pickcard__more { margin-top:16px }
  .dl-entry__title { font-size:28px }
  .dl-entry__panel { padding:32px 24px }
  .dl-fab { right:16px; bottom:max(16px,env(safe-area-inset-bottom)) }
  .download-card { padding:24px }
  .callout { padding:20px }
  .swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .feature-tabs { display:grid; grid-template-columns:minmax(0,1fr); gap:0 }
  .feature-tabs .tabs__list { display:contents }
  .feature-tabs .tabs__tab { grid-column:1; padding:22px 16px }
  .feature-tabs .tabs__tab:nth-child(1) { grid-row:1 }
  .feature-tabs .tabs__tab:nth-child(2) { grid-row:3 }
  .feature-tabs .tabs__tab:nth-child(3) { grid-row:5 }
  .feature-tabs .tabs__tab:nth-child(4) { grid-row:7 }
  .feature-tabs .tabs__panel { grid-column:1; padding:24px; margin-block:0 16px }
  .feature-tabs .tabs__panel:nth-of-type(1) { grid-row:2 }
  .feature-tabs .tabs__panel:nth-of-type(2) { grid-row:4 }
  .feature-tabs .tabs__panel:nth-of-type(3) { grid-row:6 }
  .feature-tabs .tabs__panel:nth-of-type(4) { grid-row:8 }
  .feature-art { float:right; width:96px; height:96px; margin:0 0 16px 16px }
  .feature-tabs .tabs__panel p { margin-top:0 }
  .feature-tabs .tabs__panel::after { content:""; display:block; clear:both }
  .toc { position:static }
  .geometry-band { height:160px }
}