/* Smooth cross-fade between pages in browsers that support view transitions. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* =========================================================
   OMT WORKING GROUP — design system and components
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #eef2f8;
  --text: #19212d;
  --text-muted: #556072;
  --border: #e1e6ee;
  --border-strong: #c9d1de;
  --navy: #0d1b3e;
  --navy-2: #172a5a;
  --primary: #067a55;
  --primary-hover: #05603f;
  --primary-soft: #e2f4ec;
  --on-primary: #ffffff;
  --success: #0b7a4b;
  --success-soft: #e3f4ec;
  --warning: #8a5300;
  --warning-soft: #fcf1de;
  --danger: #b42318;
  --danger-soft: #fdeceb;
  --info: #155e75;
  --info-soft: #e1f2f7;
  --neutral-soft: #edf0f4;
  --focus: #0a8f86;
  --shadow-sm: 0 1px 2px rgba(15, 42, 74, .06);
  --shadow-md: 0 6px 20px rgba(15, 42, 74, .08);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --header-h: 64px;
  --maxw: 1200px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --brand-text: #2d3a4f;
  --brand-rule: #1b2f5f;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d141f;
    --surface: #131c2a;
    --surface-2: #1a2536;
    --text: #e8edf5;
    --text-muted: #9fabbd;
    --border: #253247;
    --border-strong: #34445e;
    --navy: #0a1530;
    --navy-2: #132552;
    --primary: #3fd19c;
    --primary-hover: #6ee0b6;
    --primary-soft: #12352b;
    --on-primary: #0b1424;
    --success: #4cc99a;
    --success-soft: #12342a;
    --warning: #f0b45c;
    --warning-soft: #3a2a12;
    --danger: #ff8a80;
    --danger-soft: #3d1a19;
    --info: #67c7e0;
    --info-soft: #11303a;
    --neutral-soft: #1e293a;
    --focus: #5fd6cf;
    --brand-text: #c9d4e4;
    --brand-rule: #3a5288;
    --shadow-sm: none;
    --shadow-md: 0 6px 20px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; color: var(--text); letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); font-weight: 750; }
h3 { font-size: 1.125rem; font-weight: 700; }
p { margin: 0 0 1em; }
code, kbd, pre { font-family: var(--mono); font-size: .92em; }
code { background: var(--surface-2); padding: .1em .35em; border-radius: 5px; }
kbd { border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 .35em; background: var(--surface); }
pre { background: var(--surface-2); padding: 14px 16px; border-radius: var(--radius-sm); overflow-x: auto; border: 1px solid var(--border); }
pre code { background: none; padding: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--primary-soft); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: 12px; z-index: 200; background: var(--surface); color: var(--text); padding: 8px 14px; border-radius: var(--radius-sm); transform: translateY(-200%); }
.skip-link:focus { transform: none; box-shadow: var(--shadow-md); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .container { padding: 0 24px; } }
.section { padding: 56px 0; }
.section--tight { padding: 32px 0; }
.section--alt { background: var(--surface); border-block: 1px solid var(--border); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.section-head p { color: var(--text-muted); margin: 0; max-width: 60ch; }
.section-head h2 { margin-bottom: 6px; }
.eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.page-head { padding: 40px 0 24px; }
.page-head p { color: var(--text-muted); max-width: 65ch; font-size: 1.05rem; }
.grid { display: grid; gap: 20px; }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.grid--cats { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.stack > * + * { margin-top: 12px; }
.muted { color: var(--text-muted); }
.small { font-size: .875rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-weight: 650; font-size: .95rem; line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn--ghost { background: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.btn--ai { background: var(--navy); color: #fff; }
.btn--ai:hover { background: var(--navy-2); color: #fff; }
.btn--sm { min-height: 36px; padding: 0 12px; font-size: .875rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; position: relative;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 22px; height: 22px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex: none; }
.brand__mark { width: 50px; height: 39px; flex: none; }
.brand__word { display: flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.05; padding-left: 10px; border-left: 2px solid var(--brand-rule); font-weight: 800; font-size: .66rem; letter-spacing: .03em; text-transform: uppercase; color: var(--brand-text); }
.brand__word span { display: block; white-space: nowrap; }
.brand--full .brand__mark { width: 84px; height: 66px; }
.brand--full .brand__word { font-size: .95rem; gap: 3px; padding-left: 14px; }
.nav { display: none; margin-left: 12px; }
.nav ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
.nav a { display: block; padding: 8px 11px; border-radius: 8px; text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: .93rem; white-space: nowrap; }
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--primary); background: var(--primary-soft); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.fav-count { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: var(--on-primary); font-size: .7rem; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.fav-count[hidden] { display: none; }
.header-ai { display: none; }
@media (min-width: 1200px) {
  .nav { display: block; }
  .menu-toggle { display: none; }
  .header-ai { display: inline-flex; }
}
@media (max-width: 439px) { .site-header .brand__word { display: none; } }

/* Header search panel */
.header-search { position: absolute; inset: var(--header-h) 0 auto 0; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); padding: 14px 0; }
.header-search[hidden] { display: none; }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer[hidden] { display: none; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(8, 15, 28, .45); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; box-shadow: var(--shadow-md); animation: slideIn .2s ease-out; }
@keyframes slideIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.drawer nav ul { list-style: none; margin: 0; padding: 0; }
.drawer nav a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--text); font-weight: 600; }
.drawer nav a:hover { background: var(--surface-2); }
.drawer nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); }

/* ---------- Search field ---------- */
.search { display: flex; gap: 8px; align-items: stretch; width: 100%; }
.search__field { position: relative; flex: 1; min-width: 0; }
.search__field svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-muted); pointer-events: none; }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 14px; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px;
}
.input:focus, .select:focus, .textarea:focus { outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); border-color: var(--focus); }
.search__field .input { padding-left: 44px; }
.search--lg .input { min-height: 56px; font-size: 1.05rem; border-radius: 14px; }
.search--lg .btn { min-height: 56px; border-radius: 14px; padding: 0 22px; }
.textarea { resize: vertical; min-height: 120px; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
label { font-weight: 600; font-size: .92rem; }
.field { display: grid; gap: 6px; }
@media (max-width: 520px) {
  .search--stack { flex-wrap: wrap; }
  .search--stack .search__field { flex-basis: 100%; }
  .search--stack .btn { flex: 1; }
}

/* ---------- Chips & badges ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: .88rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--omt { background: var(--primary-soft); color: var(--primary); }
.badge--open { background: var(--success-soft); color: var(--success); }
.badge--official { background: var(--info-soft); color: var(--info); }
.badge--paid { background: var(--warning-soft); color: var(--warning); }
.badge--info { background: var(--neutral-soft); color: var(--text-muted); }
.badge--demo { background: var(--warning-soft); color: var(--warning); }
.badge--live { background: var(--success-soft); color: var(--success); }
.tag { display: inline-block; font-size: .78rem; padding: 2px 9px; border-radius: 6px; background: var(--surface-2); color: var(--text-muted); text-decoration: none; }
a.tag:hover { color: var(--primary); }

/* ---------- Hero ---------- */
.hero { padding: 56px 0 48px; background: radial-gradient(1200px 380px at 50% -40px, var(--primary-soft), transparent 70%); }
.hero__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.hero h1 { margin-bottom: 14px; }
.hero h1 span { color: var(--primary); }
.hero__lead { font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); color: var(--text-muted); max-width: 62ch; margin: 0 auto 28px; }
.hero__search { max-width: 720px; margin: 0 auto; }
.hero__ai-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: .9rem; color: var(--text-muted); }
.hero__ai-toggle input { width: 18px; height: 18px; accent-color: var(--primary); }
.hero__suggest { margin-top: 22px; }
.hero__suggest .chips { justify-content: center; }
.hero__cta { margin-top: 26px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- Category cards ---------- */
.cat-card {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cat-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); color: var(--text); transform: translateY(-1px); }
.cat-card__icon { flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .95rem; }
.cat-card__icon svg { width: 22px; height: 22px; }
.cat-card h3 { font-size: 1rem; margin: 2px 0 2px; }
.cat-card p { font-size: .86rem; color: var(--text-muted); margin: 0; line-height: 1.45; }

/* ---------- Resource cards ---------- */
.card {
  position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.card__cover { aspect-ratio: 16 / 10; background: var(--surface-2); border-bottom: 1px solid var(--border); overflow: hidden; }
.card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: .78rem; color: var(--text-muted); }
.card__title { font-size: 1.02rem; margin: 0; line-height: 1.3; }
.card__title a { color: var(--text); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__title a:hover { color: var(--primary); }
.card__author { font-size: .86rem; color: var(--text-muted); margin: 0; }
.card__desc { font-size: .88rem; color: var(--text-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.card__formats { font-size: .78rem; color: var(--text-muted); font-weight: 600; }
.fav-btn {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.fav-btn svg { width: 20px; height: 20px; }
.fav-btn:hover { color: var(--danger); }
.fav-btn[aria-pressed="true"] { color: var(--danger); }
.fav-btn[aria-pressed="true"] svg path { fill: currentColor; }

/* List view */
.grid--list { grid-template-columns: 1fr; gap: 12px; }
.grid--list .card { flex-direction: row; }
.grid--list .card__cover { flex: none; width: 140px; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--border); }
.grid--list .card__desc { -webkit-line-clamp: 2; }
@media (max-width: 520px) { .grid--list .card__cover { width: 96px; } .grid--list .card__desc { display: none; } }

/* ---------- Generated covers ---------- */
.cover { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 14px; background: var(--cover-bg, #334155); color: #fff; position: relative; }
.cover--book .cover__book {
  height: 100%; aspect-ratio: 2 / 3; max-width: 70%; border-radius: 3px 8px 8px 3px; background: var(--cover-fg, #1e293b);
  box-shadow: inset 6px 0 0 rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.25); padding: 10% 9% 8% 14%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
}
.cover__title { font-weight: 800; font-size: clamp(.62rem, 2.4cqw, .9rem); line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.cover__author { font-size: .6rem; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cover__rule { width: 34%; height: 3px; background: rgba(255,255,255,.55); border-radius: 2px; margin: 6px 0; }
.card__cover { container-type: inline-size; }
.cover--doc .cover__page { height: 100%; aspect-ratio: 3 / 4; background: #fff; border-radius: 4px; box-shadow: 0 8px 18px rgba(0,0,0,.22); padding: 12% 10%; display: flex; flex-direction: column; gap: 7%; }
.cover__line { height: 6%; background: #d8dee8; border-radius: 2px; }
.cover__line--h { background: var(--cover-fg); width: 60%; height: 9%; }
.cover__line--s { width: 70%; }
.cover--sheet .cover__grid { width: 86%; height: 92%; background: #fff; border-radius: 4px; box-shadow: 0 8px 18px rgba(0,0,0,.22); display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(6, 1fr); overflow: hidden; }
.cover__grid span { border-right: 1px solid #e3e8ef; border-bottom: 1px solid #e3e8ef; }
.cover__grid span.h { background: var(--cover-fg); }
.cover__grid span.v { background: color-mix(in srgb, var(--cover-fg) 18%, #fff); }
.cover--slide .cover__slide { width: 88%; aspect-ratio: 16 / 9; background: #fff; border-radius: 5px; box-shadow: 0 8px 18px rgba(0,0,0,.22); position: relative; overflow: hidden; padding: 7% 8%; color: #1e293b; display: flex; flex-direction: column; justify-content: center; }
.cover__slide::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 7%; background: var(--cover-fg); }
.cover__slide b { font-size: clamp(.6rem, 2.6cqw, .95rem); line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cover__slide i { display: block; width: 45%; height: 5px; margin-top: 8%; background: color-mix(in srgb, var(--cover-fg) 40%, #fff); border-radius: 2px; }
.cover--web .cover__win { width: 88%; height: 88%; background: #fff; border-radius: 6px; box-shadow: 0 8px 18px rgba(0,0,0,.22); overflow: hidden; display: flex; flex-direction: column; color: #1e293b; }
.cover__bar { height: 16%; background: #eef1f5; display: flex; align-items: center; gap: 4px; padding-left: 6%; }
.cover__bar i { width: 6px; height: 6px; border-radius: 50%; background: #c3cad5; }
.cover__win b { padding: 8% 8% 0; font-size: clamp(.58rem, 2.3cqw, .85rem); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cover__win .cover__line { margin: 6% 8% 0; height: 6%; }
.cover__label { position: absolute; left: 10px; bottom: 8px; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: rgba(0,0,0,.28); padding: 2px 7px; border-radius: 4px; }

/* ---------- Office spotlight ---------- */
.office-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.office-tile { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); }
.office-tile:hover { border-color: var(--app); box-shadow: var(--shadow-md); color: var(--text); }
.office-tile__badge { width: 44px; height: 44px; border-radius: 10px; background: var(--app); color: #fff; display: grid; place-items: center; font-weight: 850; font-size: 1.1rem; }
.office-tile h3 { margin: 0; font-size: 1.05rem; }
.office-tile p { margin: 0; font-size: .87rem; color: var(--text-muted); }
.office-tile ul { margin: 0; padding-left: 18px; font-size: .85rem; color: var(--text-muted); }
.disclaimer { font-size: .82rem; color: var(--text-muted); border-left: 3px solid var(--border-strong); padding-left: 12px; margin-top: 20px; }

/* ---------- AI promo ---------- */
.ai-promo { background: var(--navy); color: #e7f3ef; border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 48px); display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .ai-promo { grid-template-columns: 1fr 1fr; } }
.ai-promo h2 { color: #fff; }
.ai-promo p { color: #c5d3e3; }
.ai-promo .eyebrow { color: #5fd6c4; }
.ai-promo ul { padding-left: 18px; color: #c5d3e3; }
.mock-chat { background: #08122b; border: 1px solid #22355f; border-radius: var(--radius); padding: 16px; display: grid; gap: 10px; font-size: .92rem; }
.mock-chat__msg { padding: 10px 14px; border-radius: 12px; max-width: 88%; }
.mock-chat__msg--user { background: #067a55; color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.mock-chat__msg--ai { background: #172a52; color: #e7f3ef; border-bottom-left-radius: 4px; }
.mock-chat__caption { font-size: .75rem; color: #8fa3c0; text-align: center; }

/* ---------- Library ---------- */
.library { display: grid; gap: 24px; padding-bottom: 56px; }
@media (min-width: 960px) { .library { grid-template-columns: 260px 1fr; align-items: start; } }
.filters { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.filters > summary { list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::after { content: "+"; font-size: 1.3rem; color: var(--text-muted); }
.filters[open] > summary::after { content: "−"; }
.filters__body { padding: 0 16px 16px; display: grid; gap: 18px; }
@media (min-width: 960px) {
  .filters { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; }
  .filters > summary { cursor: default; pointer-events: none; }
  .filters > summary::after { display: none; }
}
.filter-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.filter-group legend { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 8px; padding: 0; }
.check { display: flex; align-items: center; gap: 10px; min-height: 34px; font-weight: 500; font-size: .92rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.check span.count { margin-left: auto; color: var(--text-muted); font-size: .8rem; }
.check:has(input:not(:checked)):has(.count:is([data-zero])) { opacity: .55; }
.toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar__left { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar .select { width: auto; min-width: 170px; }
.view-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; }
.view-toggle button { border: 0; background: var(--surface); color: var(--text-muted); width: 44px; height: 42px; display: grid; place-items: center; cursor: pointer; }
.view-toggle button[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); }
.view-toggle svg { width: 18px; height: 18px; }
.active-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.load-more { display: flex; justify-content: center; margin-top: 28px; }

/* ---------- States ---------- */
.state { text-align: center; padding: 48px 20px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.state h3 { margin-bottom: 6px; }
.state p { color: var(--text-muted); max-width: 52ch; margin: 0 auto 16px; }
.state .chips { justify-content: center; }
.state--error { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-soft); }
.skeleton { border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; min-height: 300px; border: 1px solid var(--border); }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.notice { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-size: .92rem; }
.notice svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--primary); }
.notice--warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.notice--warning svg { color: var(--warning); }
.notice p { margin: 0; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 150; background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 10px; box-shadow: var(--shadow-md); font-weight: 600; font-size: .92rem; max-width: calc(100vw - 32px); }
.toast[hidden] { display: none; }

/* ---------- Resource detail ---------- */
.breadcrumb { font-size: .875rem; color: var(--text-muted); padding-top: 24px; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--border-strong); }
.breadcrumb a { color: var(--text-muted); }
.detail { display: grid; gap: 32px; padding: 24px 0 48px; }
@media (min-width: 900px) { .detail { grid-template-columns: 320px 1fr; align-items: start; } }
.detail__cover { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4 / 5; container-type: inline-size; }
@media (max-width: 899px) { .detail__cover { max-width: 320px; aspect-ratio: 16 / 11; } }
.detail__actions { display: grid; gap: 10px; margin-top: 16px; }
.detail h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); }
.detail__byline { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 14px; }
.meta-table { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 18px 0; }
.meta-table th, .meta-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.meta-table th { width: 34%; color: var(--text-muted); font-weight: 600; }
.access-box { padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); margin: 18px 0; }
.access-box h2 { font-size: 1rem; margin-bottom: 6px; }
.access-box p { margin: 0; font-size: .93rem; color: var(--text-muted); }
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.3rem; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .35em; }
.prose .note { font-size: .9rem; color: var(--text-muted); border-left: 3px solid var(--border-strong); padding-left: 12px; }
.guide-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(18px, 3vw, 32px); margin-top: 24px; }
.table-wrap { overflow-x: auto; margin: 1em 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: .9rem; min-width: 420px; }
.table-wrap th, .table-wrap td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.table-wrap thead th { background: var(--surface-2); }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Office page ---------- */
.app-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.app-tabs a { flex: none; }
.app-section { padding: 36px 0; border-top: 1px solid var(--border); }
.app-section__head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.app-section__topics { color: var(--text-muted); font-size: .92rem; margin-bottom: 20px; }

/* ---------- Assistant ---------- */
.assistant { display: grid; gap: 20px; padding: 24px 0 40px; }
@media (min-width: 1000px) { .assistant { grid-template-columns: 1fr 300px; align-items: start; } }
.chat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; height: min(78vh, 780px); min-height: 480px; overflow: hidden; }
.chat__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.chat__title { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.chat__title img { width: 38px; height: 30px; }
.chat__log { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
.msg { max-width: min(88%, 680px); padding: 12px 15px; border-radius: 16px; font-size: .95rem; overflow-wrap: anywhere; }
.msg p:last-child { margin-bottom: 0; }
.msg ul, .msg ol { padding-left: 1.2em; margin: .4em 0 .8em; }
.msg pre { font-size: .85rem; }
.msg--user { align-self: flex-end; background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 5px; }
.msg--user code { background: rgba(255,255,255,.18); }
.msg--ai { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 5px; }
.msg--error { align-self: flex-start; background: var(--danger-soft); color: var(--danger); }
.msg__label { display: flex; gap: 6px; align-items: center; font-size: .72rem; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.msg__recs { display: grid; gap: 8px; margin-top: 10px; }
.rec { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: .88rem; }
.rec__top { display: flex; gap: 8px; justify-content: space-between; align-items: start; flex-wrap: wrap; }
.rec a { font-weight: 700; text-decoration: none; }
.rec a:hover { text-decoration: underline; }
.rec__why { color: var(--text-muted); }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: blink 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.typing em { font-style: normal; font-size: .8rem; color: var(--text-muted); margin-left: 6px; align-self: center; }
.caret { display: inline-block; width: .5em; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--primary); border-radius: 2px; animation: caret 1s steps(2) infinite; }
.is-streaming .msg__body > p:last-of-type:nth-last-child(2) { display: inline; }
@keyframes caret { 50% { opacity: 0; } }
.msg__followups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip--ask { font-size: .82rem; min-height: 34px; text-align: left; background: var(--surface); }
.chat__form .btn.is-stop { background: var(--text); border-color: var(--text); color: var(--surface); }
.msg--ai { animation: msg-in .18s ease-out; }
@keyframes msg-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .caret, .msg--ai { animation: none; } }
.chat__suggest { padding: 0 16px 10px; }
.chat__suggest .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.chat__suggest .chip { flex: none; white-space: nowrap; }
.chat__form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); align-items: flex-end; }
.chat__form .textarea { min-height: 48px; max-height: 160px; resize: none; }
.chat__form .btn { min-height: 48px; }
.chat__hint { font-size: .75rem; color: var(--text-muted); padding: 0 16px 10px; margin: 0; }
.side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.side-card h2 { font-size: 1rem; }
.side-card ul { padding-left: 1.1em; margin: 0; font-size: .9rem; color: var(--text-muted); }
.side-card li { margin-bottom: 6px; }
.context-pill { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 10px 16px 0; border-radius: 10px; background: var(--primary-soft); font-size: .85rem; }
.context-pill button { margin-left: auto; }

/* ---------- Content pages ---------- */
.content { max-width: 760px; padding-bottom: 56px; }
.content h2 { margin-top: 1.6em; font-size: 1.35rem; }
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: grid; gap: 14px; }
.value-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin: 20px 0; }
.value { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.value h3 { font-size: 1rem; margin-bottom: 4px; }
.value p { margin: 0; font-size: .9rem; color: var(--text-muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #c5d3e3; padding: 48px 0 24px; margin-top: auto; }
.site-footer a { color: #e7f3ef; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.footer-brand { grid-column: 1 / -1; max-width: 420px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); } .footer-brand { grid-column: auto; } }
.footer-brand .brand__word { color: #e7f3ef; border-color: #3a5288; }
.footer-brand p { font-size: .9rem; margin-top: 14px; }
.site-footer h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: #5fd6c4; margin-bottom: 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .92rem; }
.footer-bottom { border-top: 1px solid #22355f; margin-top: 36px; padding-top: 18px; font-size: .82rem; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.footer-bottom p { margin: 0; }

body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* ---------- Small-screen refinements ---------- */
@media (max-width: 639px) {
  /* Home rows scroll sideways instead of stacking eight full-width cards. */
  .grid--rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .grid--rail > * { scroll-snap-align: start; }
  .grid--cats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-card { flex-direction: column; gap: 8px; padding: 12px; }
  .cat-card p { display: none; }
  .cat-card h3 { font-size: .9rem; }
  .section { padding: 40px 0; }
}

/* ---------- Dark hero ---------- */
.hero--dark { position: relative; isolation: isolate; overflow: hidden; background: #0b1736; color: #e7f3ef; padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 7vw, 80px); }
.hero--dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 75%); }
.hero--dark::after { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(520px 320px at 12% 8%, rgba(11,191,163,.35), transparent 70%), radial-gradient(480px 320px at 90% 18%, rgba(52,180,194,.28), transparent 70%), radial-gradient(700px 300px at 50% 115%, rgba(8,162,116,.30), transparent 70%); }
.hero--dark h1 { color: #fff; letter-spacing: -.025em; }
.hero--dark h1 span { background: linear-gradient(92deg, #3fe0b0 10%, #34b4c2 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero--dark .hero__lead { color: #c5d3e3; }
.hero__pill { display: inline-block; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: #6ee7c3; background: rgba(63,224,176,.10); border: 1px solid rgba(63,224,176,.32); }
.hero--dark .search .input { border-color: transparent; box-shadow: 0 14px 40px rgba(0,0,0,.35); color: #19212d; background: #fff; }
.hero--dark .search__field svg { color: #556072; }
.hero--dark .search .btn--primary { background: linear-gradient(135deg, #0bbfa3, #078c5c); color: #fff; box-shadow: 0 14px 40px rgba(8,162,116,.35); }
.hero--dark .search .btn--primary:hover { filter: brightness(1.08); }
.hero--dark .hero__ai-toggle { color: #c5d3e3; }
.hero--dark .hero__ai-toggle input { accent-color: #3fe0b0; }
.hero--dark .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #e7f3ef; }
.hero--dark .chip:hover { border-color: #3fe0b0; color: #fff; background: rgba(63,224,176,.12); }
.btn--light { background: #fff; color: #0b1736; }
.btn--light:hover { background: #e2f4ec; color: #0b1736; }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn--outline-light:hover { border-color: #3fe0b0; color: #fff; }
.hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 40px auto 0; max-width: 720px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; overflow: hidden; }
.hero__stats div { background: rgba(11,23,54,.85); padding: 16px 10px; display: flex; flex-direction: column-reverse; gap: 2px; }
.hero__stats dd { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 850; color: #fff; line-height: 1.1; }
.hero__stats dt { font-size: .78rem; color: #9fb0c8; }
@media (max-width: 600px) { .hero__stats { grid-template-columns: repeat(2, 1fr); } }

/* Livelier cards and sections */
.card { transition: border-color .15s, box-shadow .2s, transform .2s; }
.card:hover { transform: translateY(-3px); }
.section-head h2 { position: relative; }
.eyebrow { color: var(--primary); }
.office-tile { transition: border-color .15s, box-shadow .2s, transform .2s; }
.office-tile:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .card:hover, .office-tile:hover, .cat-card:hover { transform: none; } }

/* =========================================================
   Mobile app layout (phones, < 768px). Desktop is unchanged.
   ========================================================= */
@media (min-width: 768px) { .m-only { display: none !important; } }
.tabbar, .sheet-backdrop { display: none; }
.cover__poster { display: none; }
.cover__photo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: calc(100% - 28px); aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px 8px 8px 3px; box-shadow: 0 8px 18px rgba(0,0,0,.3); background: #fff; }
.cover.has-photo .cover__book, .cover.has-photo .cover__label { visibility: hidden; }

@media (max-width: 767px) {
  :root { --tabbar-h: 68px; --radius: 16px; }
  .d-only { display: none !important; }
  body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

  /* Header blends into the page like an app bar */
  .site-header { background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom-color: transparent; }
  #fav-link, .header-ai { display: none; }
  .page-head { padding: 20px 0 12px; }
  .page-head h1 { font-size: 1.65rem; }
  .page-head p { font-size: .95rem; margin-bottom: 14px; }
  body[data-page="library"] .page-head > p { display: none; }
  .section { padding: 32px 0; }

  /* ---------- Bottom tab bar ---------- */
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--border); box-shadow: 0 -6px 24px rgba(13, 27, 62, .06);
  }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--tabbar-h); text-decoration: none; color: var(--text-muted); font-size: .68rem; font-weight: 650; }
  .tabbar a svg { width: 23px; height: 23px; }
  .tabbar a[aria-current="page"] { color: var(--primary); }
  .tabbar__item[aria-current="page"]::before { content: ""; position: absolute; top: 6px; width: 34px; height: 3px; border-radius: 3px; background: var(--primary); }
  .tabbar__item[aria-current="page"] svg { stroke-width: 2.4; }
  .tabbar__fab { justify-content: flex-end !important; padding-bottom: 9px; }
  .tabbar__fab-btn { display: grid; place-items: center; width: 58px; height: 58px; margin-top: -26px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #0bbfa3, #067a55); box-shadow: 0 10px 24px rgba(6, 122, 85, .40), 0 0 0 5px var(--bg); }
  .tabbar__fab-btn svg { width: 26px !important; height: 26px !important; }
  .tabbar__count { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e5484d; color: #fff; font-size: .62rem; display: grid; place-items: center; }
  .tabbar__count[hidden] { display: none; }

  /* ---------- Book-style poster covers ---------- */
  .cover__poster {
    display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; position: absolute; inset: 0; padding: 12px; overflow: hidden; text-align: left;
    background:
      radial-gradient(120% 70% at 100% 0%, rgba(255,255,255,.22), transparent 55%),
      radial-gradient(90% 60% at 0% 100%, rgba(0,0,0,.28), transparent 60%),
      linear-gradient(160deg, var(--cover-bg, #334155), color-mix(in srgb, var(--cover-bg, #334155) 55%, #071022));
    color: #fff;
  }
  .cover__poster::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: rgba(0,0,0,.18); box-shadow: 1px 0 0 rgba(255,255,255,.15); }
  .cover__poster::after { content: ""; position: absolute; right: -28%; top: -14%; width: 75%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,255,255,.16); }
  .poster__mark { position: absolute; right: 10px; top: 34px; font-size: 3.4rem; font-weight: 900; line-height: 1; color: rgba(255,255,255,.2); }
  .poster__kind { font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
  .poster__title { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(.85rem, 9cqw, 1.15rem); line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
  .poster__author { font-size: .62rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cover > :not(.cover__poster):not(.cover__photo) { display: none; }
  .cover__photo { inset: 0 !important; left: 0 !important; top: 0 !important; transform: none !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; border-radius: 0 !important; box-shadow: none !important; }
  .cover.has-photo .cover__poster { display: none; }
  .poster__app { width: 30px; height: 30px; margin-bottom: 6px; padding: 3px; border-radius: 9px; background: rgba(255,255,255,.95); box-shadow: 0 4px 10px rgba(0,0,0,.2); }
  .cover { padding: 0; }

  /* ---------- Cards become book tiles (white card, cover, chip, heart) ---------- */
  .grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card { padding: 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(13, 27, 62, .06); }
  .card:hover { transform: none; box-shadow: 0 6px 18px rgba(13, 27, 62, .06); }
  .card__cover { aspect-ratio: 3 / 4; border: 0; border-radius: 12px; overflow: hidden; position: relative; }
  .card__body { padding: 9px 4px 3px; gap: 2px; }
  .card__meta { position: absolute; top: 15px; left: 15px; z-index: 1; }
  .card__meta > span:not(.badge) { display: none; }
  .card__meta .badge { background: rgba(255,255,255,.95); box-shadow: 0 2px 6px rgba(0,0,0,.14); font-size: .6rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; }
  .card__title { font-size: .84rem; font-weight: 750; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card__author { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card__desc, .card__foot { display: none; }
  .fav-btn { width: 30px; height: 30px; top: 14px; right: 14px; border: 0; background: rgba(255,255,255,.95); }
  .fav-btn svg { width: 16px; height: 16px; }
  .grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--list .card { flex-direction: column; }
  .grid--list .card__cover { width: auto; aspect-ratio: 3 / 4; border-right: 0; }
  .view-toggle { display: none; }

  /* Library screen: search first, tabs, grid (no big title) */
  body[data-page="library"] .page-head { padding-top: 12px; }
  body[data-page="library"] .page-head h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
  body[data-page="library"] .toolbar .select { display: none; }
  body[data-page="library"] .toolbar { margin: 4px 0 10px; }

  /* Horizontal rails */
  .grid--rail, .m-rail { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 41%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 14px; scroll-padding-inline: 16px; scrollbar-width: none; }
  .grid--rail::-webkit-scrollbar, .m-rail::-webkit-scrollbar, .m-tabs::-webkit-scrollbar, .m-banner::-webkit-scrollbar { display: none; }
  .grid--rail > *, .m-rail > * { scroll-snap-align: start; }
  .m-rail .m-more, .grid--rail .m-more { align-self: start; }
  .m-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 3 / 4; border-radius: 14px; border: 1.5px dashed var(--border-strong); color: var(--primary); font-weight: 700; font-size: .85rem; text-decoration: none; text-align: center; padding: 10px; }
  .m-more svg { width: 22px; height: 22px; }

  /* ---------- Mobile home ---------- */
  .m-home { padding: 8px 0 24px; }
  .m-greet { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 14px; }
  .m-greet__hi { margin: 0; font-size: .85rem; color: var(--text-muted); font-weight: 600; }
  .m-greet__title { font-size: 1.45rem; font-weight: 850; margin: 2px 0 0; letter-spacing: -.02em; }
  .m-search { position: relative; display: flex; align-items: center; height: 54px; padding: 0 6px 0 46px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(13, 27, 62, .06); }
  .m-search > svg { position: absolute; left: 17px; width: 20px; height: 20px; color: var(--text-muted); }
  .m-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; color: var(--text); outline: none; }
  .m-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
  .m-search__btn, .search__filter { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; color: #fff; background: linear-gradient(135deg, #0bbfa3, #067a55); cursor: pointer; }
  .m-search__btn svg, .search__filter svg { width: 20px; height: 20px; }

  .m-banner { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 18px -16px 0; padding: 0 16px; scroll-padding-inline: 16px; scrollbar-width: none; }
  .m-banner__slide {
    flex: 0 0 100%; scroll-snap-align: start; position: relative; display: flex; align-items: center; gap: 12px; min-height: 172px; padding: 18px 16px 18px 18px; border-radius: 22px; overflow: hidden; text-decoration: none; color: #fff;
    background: radial-gradient(260px 160px at 0% 0%, rgba(11,191,163,.55), transparent 70%), radial-gradient(260px 200px at 100% 100%, rgba(52,180,194,.35), transparent 70%), #0b1736;
  }
  .m-banner__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .m-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: .7rem; font-weight: 700; }
  .m-banner__text strong { font-size: 1.15rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .m-banner__by { font-size: .78rem; color: #c5d3e3; }
  .m-banner__more { display: inline-flex; align-items: center; gap: 2px; font-size: .8rem; font-weight: 700; color: #6ee7c3; }
  .m-banner__cover { flex: none; position: relative; width: 98px; aspect-ratio: 3 / 4.3; border-radius: 10px; overflow: hidden; transform: rotate(4deg); box-shadow: 0 14px 28px rgba(0,0,0,.45); container-type: inline-size; }
  .m-dots { display: flex; justify-content: center; gap: 6px; margin: 10px 0 4px; }
  .m-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--border-strong); transition: width .2s, background .2s; }
  .m-dots i.on { width: 20px; background: var(--primary); }

  .m-tabs { display: flex; gap: 20px; overflow-x: auto; margin: 14px -16px 12px; padding: 0 16px; border-bottom: 1px solid var(--border); scrollbar-width: none; }
  .m-tabs button { flex: none; position: relative; padding: 10px 0 11px; border: 0; background: none; font: inherit; font-size: .9rem; font-weight: 650; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
  .m-tabs button[aria-selected="true"] { color: var(--text); font-weight: 800; }
  .m-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }

  .m-head { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 0 12px; }
  .m-head h2 { font-size: 1.12rem; margin: 0; }
  .m-head a { font-size: .85rem; font-weight: 700; text-decoration: none; }

  .m-list { display: grid; gap: 10px; }
  .m-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); box-shadow: 0 4px 14px rgba(13, 27, 62, .05); }
  .m-row__cover { position: relative; flex: none; width: 58px; aspect-ratio: 3 / 4; border-radius: 9px; overflow: hidden; container-type: inline-size; }
  .m-row__cover .poster__title { font-size: .55rem; -webkit-line-clamp: 3; }
  .m-row__cover .poster__kind, .m-row__cover .poster__author, .m-row__cover .poster__mark { display: none; }
  .m-row__cover .cover__poster { padding: 6px; }
  .m-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
  .m-row__tag { display: inline-flex; align-items: center; gap: 4px; font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--primary); }
  .m-row__body strong { font-size: .92rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .m-row__by { font-size: .76rem; color: var(--text-muted); }
  .m-row__go { color: var(--text-muted); }
  .m-row__go svg { width: 20px; height: 20px; }

  .m-apps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .m-apps a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--text); font-size: .7rem; font-weight: 650; }
  .m-apps span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-apps b { display: grid; place-items: center; width: min(54px, 100%); aspect-ratio: 1; border-radius: 17px; background: var(--app); color: #fff; font-size: 1.3rem; box-shadow: 0 8px 18px color-mix(in srgb, var(--app) 35%, transparent); }

  .m-tracks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
  .m-tracks a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--text); font-size: .7rem; font-weight: 650; text-align: center; }
  .m-tracks b { display: grid; place-items: center; width: min(54px, 100%); aspect-ratio: 1; border-radius: 17px; background: var(--app); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--app) 35%, transparent); }
  .m-tracks b svg { width: 46%; height: 46%; }
  .m-tracks span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-ai { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 16px; border-radius: 20px; text-decoration: none; color: #e7f3ef; background: radial-gradient(240px 140px at 100% 0%, rgba(11,191,163,.45), transparent 70%), #0b1736; }
  .m-ai__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #0bbfa3, #067a55); color: #fff; }
  .m-ai__icon svg { width: 24px; height: 24px; }
  .m-ai > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: .84rem; color: #c5d3e3; }
  .m-ai strong { color: #fff; font-size: 1rem; }

  /* ---------- Library ---------- */
  .page-head .search--lg { flex-wrap: nowrap; position: relative; height: 54px; padding: 0 6px 0 0; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(13, 27, 62, .06); align-items: center; }
  .page-head .search--lg .search__field { flex: 1; }
  .page-head .search--lg .input { min-height: 52px; border: 0; background: transparent; border-radius: 999px; box-shadow: none; outline: none; }
  .page-head .search--lg .btn--primary { display: none; }
  .page-head .search--lg:focus-within { border-color: var(--focus); }
  .page-head .m-tabs { margin-bottom: 0; }
  .library { padding-top: 6px; }
  .toolbar { margin-bottom: 10px; }
  .toolbar .select { min-width: 0; min-height: 38px; font-size: .85rem; border-radius: 999px; }
  #result-count { font-size: .85rem; margin: 0; }
  .active-filters .chip { min-height: 32px; font-size: .8rem; }

  /* Filters become a bottom sheet */
  .filters { position: fixed; left: 0; right: 0; bottom: 0; z-index: 130; max-height: 82vh; overflow-y: auto; border-radius: 22px 22px 0 0; border: 0; box-shadow: 0 -12px 40px rgba(0,0,0,.25); padding-bottom: env(safe-area-inset-bottom); }
  .filters:not([open]) { display: none; }
  .filters > summary { pointer-events: none; justify-content: center; padding-top: 18px; }
  .filters > summary::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--border-strong); }
  .filters > summary::after { display: none; }
  .filters__actions { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 0 4px; background: var(--surface); }
  .sheet-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 125; background: rgba(8, 15, 28, .45); }
  body.sheet-open { overflow: hidden; }
  .notice { flex-direction: column; }

  /* ---------- Resource details ---------- */
  .breadcrumb { padding-top: 12px; font-size: .78rem; }
  .breadcrumb li:not(:first-child):not(:last-child) { display: none; }
  .detail { gap: 20px; padding-top: 14px; }
  .detail__cover { width: 58%; max-width: 230px; margin: 0 auto; aspect-ratio: 3 / 4.2; border: 0; border-radius: 16px; box-shadow: 0 18px 40px rgba(13, 27, 62, .28); position: relative; }
  .detail__actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .detail__actions > * { flex: 1 1 40%; }
  .detail__actions > :first-child { flex-basis: 100%; }
  .detail__actions .btn { min-height: 48px; border-radius: 14px; white-space: normal; text-align: center; line-height: 1.2; }
  .detail h1 { font-size: 1.55rem; }
  .meta-table th, .meta-table td { padding: 9px 6px; font-size: .86rem; }
  .guide-wrap { border-radius: 18px; }

  /* ---------- Assistant ---------- */
  body[data-page="assistant"] .page-head { padding: 0; }
  body[data-page="assistant"] .page-head p { display: none; }
  body[data-page="assistant"] .page-head h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
  body[data-page="assistant"] .site-footer { display: none; }
  .assistant { padding: 8px 0 0; }
  .assistant aside { display: none; }
  .chat { height: calc(100dvh - var(--header-h) - var(--tabbar-h) - env(safe-area-inset-bottom) - 16px); min-height: 380px; border-radius: 20px; }
  .chat__head { flex-wrap: nowrap; padding: 10px 12px; }
  .chat__head .btn { padding: 0 8px; font-size: .78rem; white-space: nowrap; }
  .chat__title { gap: 8px; font-size: .95rem; }
  .chat__hint { display: none; }
  .msg { max-width: 92%; font-size: .93rem; }

  /* ---------- Office / presentations ---------- */
  .app-section { padding: 26px 0; }
  .app-section__head .office-tile__badge { width: 40px; height: 40px; }
  .app-section h2 { font-size: 1.25rem; }

  /* ---------- Footer: compact ---------- */
  .site-footer { padding: 32px 0 20px; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
  .footer-brand { grid-column: 1 / -1; }
  .brand--full .brand__mark { width: 64px; height: 50px; }
  .brand--full .brand__word { font-size: .8rem; }
  .site-footer ul { font-size: .82rem; gap: 6px; }
  .footer-bottom { font-size: .74rem; }
}

@media (max-width: 767px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card__meta .badge, :root:not([data-theme="light"]) .fav-btn { background: rgba(19, 28, 42, .92); }
}

/* Office file-type icons */
.office-tile__icon { width: 52px; height: 52px; }
.cat-card__app { flex: none; width: 42px; height: 42px; }
@media (max-width: 767px) {
  .m-apps b { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 6px 16px rgba(13, 27, 62, .08); }
  .m-apps b img { width: 72%; height: 72%; }
  .app-section__head .office-tile__icon { width: 44px; height: 44px; }
}

/* =========================================================
   Library on tablets and desktops: same look as the mobile reference
   (search first, underlined tabs, a grid of white book cards).
   ========================================================= */
@media (min-width: 768px) {
  body[data-page="library"] .page-head { padding-bottom: 8px; }
  body[data-page="library"] .page-head h1 { font-size: 2rem; margin-bottom: 4px; }
  body[data-page="library"] .page-head > p { margin-bottom: 16px; }
  body[data-page="library"] .search--lg { height: 60px; padding: 0 6px 0 0; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(13, 27, 62, .07); align-items: center; }
  body[data-page="library"] .search--lg .input { border: 0; background: transparent; box-shadow: none; outline: none; min-height: 58px; border-radius: 999px; }
  body[data-page="library"] .search--lg:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
  body[data-page="library"] .search--lg .btn--primary { min-height: 48px; border-radius: 999px; padding: 0 24px; }

  .lib-tabs { display: flex; gap: 26px; overflow-x: auto; margin: 18px 0 0; padding: 0; border-bottom: 1px solid var(--border); scrollbar-width: none; }
  .lib-tabs::-webkit-scrollbar { display: none; }
  .lib-tabs button { flex: none; position: relative; padding: 12px 0 13px; border: 0; background: none; font: inherit; font-size: .95rem; font-weight: 650; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
  .lib-tabs button:hover { color: var(--text); }
  .lib-tabs button[aria-selected="true"] { color: var(--text); font-weight: 800; }
  .lib-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }

  /* Book cards */
  body:is([data-page="library"], [data-page="home"]) .grid--cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
  body:is([data-page="library"], [data-page="home"]) .card { padding: 10px; border-radius: 20px; box-shadow: 0 6px 18px rgba(13, 27, 62, .06); }
  body:is([data-page="library"], [data-page="home"]) .card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(13, 27, 62, .12); }
  body:is([data-page="library"], [data-page="home"]) .card__cover { aspect-ratio: 3 / 4; border: 0; border-radius: 14px; position: relative; container-type: inline-size; }
  body:is([data-page="library"], [data-page="home"]) .card__cover .cover { padding: 0; }
  body:is([data-page="library"], [data-page="home"]) .card__cover .cover > :not(.cover__poster):not(.cover__photo) { display: none; }
  body:is([data-page="library"], [data-page="home"]) .card__cover .cover__poster { display: flex; }
  body:is([data-page="library"], [data-page="home"]) .card__cover .cover.has-photo .cover__poster { display: none; }
  body:is([data-page="library"], [data-page="home"]) .card__cover .cover__photo { inset: 0; left: 0; top: 0; transform: none; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
  body:is([data-page="library"], [data-page="home"]) .card__body { padding: 12px 4px 4px; gap: 3px; }
  body:is([data-page="library"], [data-page="home"]) .card__meta { position: absolute; top: 18px; left: 18px; z-index: 1; }
  body:is([data-page="library"], [data-page="home"]) .card__meta > span:not(.badge) { display: none; }
  body:is([data-page="library"], [data-page="home"]) .card__meta .badge { background: rgba(255,255,255,.95); box-shadow: 0 2px 6px rgba(0,0,0,.14); font-size: .64rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
  body:is([data-page="library"], [data-page="home"]) .card__title { font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body:is([data-page="library"], [data-page="home"]) .card__author { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:is([data-page="library"], [data-page="home"]) .card__desc, body:is([data-page="library"], [data-page="home"]) .card__foot { display: none; }
  body:is([data-page="library"], [data-page="home"]) .fav-btn { top: 18px; right: 18px; width: 34px; height: 34px; border: 0; background: rgba(255,255,255,.95); }
  body:is([data-page="library"], [data-page="home"]) .grid--list .card { flex-direction: row; align-items: center; gap: 14px; }
  body:is([data-page="library"], [data-page="home"]) .grid--list .card__cover { width: 96px; flex: none; }
  body:is([data-page="library"], [data-page="home"]) .grid--list .card__desc { display: -webkit-box; }
}

@media (min-width: 768px) {
  body:is([data-page="library"], [data-page="home"]) .cover__poster {
    display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; position: absolute; inset: 0; padding: 12px; overflow: hidden; text-align: left;
    background:
      radial-gradient(120% 70% at 100% 0%, rgba(255,255,255,.22), transparent 55%),
      radial-gradient(90% 60% at 0% 100%, rgba(0,0,0,.28), transparent 60%),
      linear-gradient(160deg, var(--cover-bg, #334155), color-mix(in srgb, var(--cover-bg, #334155) 55%, #071022));
    color: #fff;
  }
  body:is([data-page="library"], [data-page="home"]) .cover__poster::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: rgba(0,0,0,.18); box-shadow: 1px 0 0 rgba(255,255,255,.15); }
  body:is([data-page="library"], [data-page="home"]) .cover__poster::after { content: ""; position: absolute; right: -28%; top: -14%; width: 75%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,255,255,.16); }
  body:is([data-page="library"], [data-page="home"]) .poster__mark { position: absolute; right: 10px; top: 34px; font-size: 3.4rem; font-weight: 900; line-height: 1; color: rgba(255,255,255,.2); }
  body:is([data-page="library"], [data-page="home"]) .poster__kind { font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
  body:is([data-page="library"], [data-page="home"]) .poster__title { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(.85rem, 9cqw, 1.15rem); line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
  body:is([data-page="library"], [data-page="home"]) .poster__author { font-size: .62rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 768px) {
  body:is([data-page="library"], [data-page="home"]) .poster__app { width: 30px; height: 30px; margin-bottom: 6px; padding: 3px; border-radius: 9px; background: rgba(255,255,255,.95); box-shadow: 0 4px 10px rgba(0,0,0,.2); }
}

/* External book results */
.ext-rec { display: flex; gap: 12px; align-items: flex-start; }
.ext-rec__cover { flex: none; width: 46px; height: 66px; object-fit: cover; border-radius: 4px; box-shadow: 0 3px 8px rgba(0,0,0,.18); background: var(--surface-2); }
.ext-rec__body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ext-rec__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.rec__added { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; color: var(--primary); }
#ol-search { white-space: normal; text-align: left; line-height: 1.25; padding-block: 8px; height: auto; }

/* =========================================================
   Publisher edition: paper and ink, a book serif for headings,
   IBM Plex for text and metadata. Loaded last so it restyles
   everything above without touching the layout rules.
   ========================================================= */
@font-face { font-family: "Source Serif 4"; src: url("../assets/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../assets/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../assets/fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../assets/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --bg: #f4f1ea;
  --surface: #fffdf9;
  --surface-2: #ebe6db;
  --text: #1c1b18;
  --text-muted: #5e594f;
  --border: #ddd6c8;
  --border-strong: #c3baa8;
  --navy: #17181c;
  --navy-2: #26282e;
  --primary: #0d6b4f;
  --primary-hover: #0a5440;
  --primary-soft: #e1ede6;
  --accent: #b5401b;
  --success: #1f6b3a;
  --success-soft: #e3eedf;
  --info: #22527a;
  --info-soft: #e3ebf2;
  --warning: #8a4b06;
  --warning-soft: #f6ead6;
  --neutral-soft: #ebe6db;
  --focus: #0d6b4f;
  --shadow-sm: 0 1px 0 rgba(28, 27, 24, .06);
  --shadow-md: 0 10px 30px -12px rgba(28, 27, 24, .25);
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --brand-text: #2b2a26;
  --brand-rule: #1c1b18;
  --ink: #17181c;
  --paper: #f4f1ea;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131412;
    --surface: #1b1c19;
    --surface-2: #24251f;
    --text: #ece8de;
    --text-muted: #a8a294;
    --border: #2f302a;
    --border-strong: #45463d;
    --navy: #0d0e0c;
    --navy-2: #1d1e1a;
    --primary: #5cc79c;
    --primary-hover: #84d9b5;
    --primary-soft: #183229;
    --on-primary: #0f1411;
    --accent: #f08a5d;
    --success: #7bcf92;
    --success-soft: #1a2e20;
    --info: #8ab8e0;
    --info-soft: #172634;
    --warning: #e8b062;
    --warning-soft: #33260f;
    --neutral-soft: #24251f;
    --focus: #5cc79c;
    --brand-text: #d9d4c8;
    --brand-rule: #d9d4c8;
    --ink: #0d0e0c;
    --paper: #131412;
  }
}

body { font-family: var(--font); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern"; }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.018em; font-optical-sizing: auto; }
h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem); line-height: 1.05; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.15rem); line-height: 1.12; }
h3 { font-weight: 600; letter-spacing: -.005em; }
::selection { background: #f2d9a6; color: #1c1b18; }
a { text-decoration-thickness: 1px; }
code { border-radius: 3px; }

/* Small mono labels: a kicker above headings, eyebrows, metadata */
.kicker, .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.kicker::before, .eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }

/* Buttons: square-ish, flat, confident */
.btn { border-radius: 4px; font-weight: 600; letter-spacing: .005em; }
.btn--lg { min-height: 52px; padding: 0 24px; font-size: 1rem; }
.btn--ai { background: var(--ink); }
.btn--ai:hover { background: var(--navy-2); }
.btn--secondary { background: transparent; border-color: var(--text); color: var(--text); }
.btn--secondary:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; color: var(--ink); }
.icon-btn { border-radius: 4px; }
.input, .select, .textarea { border-radius: 4px; background: var(--surface); }
.search--lg .input, .search--lg .btn { border-radius: 4px; }
.chip { border-radius: 4px; font-weight: 500; background: transparent; }
.chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.badge { border-radius: 3px; font-family: var(--mono); font-weight: 500; font-size: .68rem; letter-spacing: .02em; padding: 1px 7px; }
.badge::before { border-radius: 1px; }
.tag { border-radius: 3px; font-family: var(--mono); font-size: .72rem; }

/* Header: a printed masthead, not a glass bar */
.site-header { background: var(--bg); backdrop-filter: none; border-bottom: 1px solid var(--text); }
.brand__word { font-family: var(--font); font-weight: 700; letter-spacing: .06em; }
.nav a { border-radius: 0; font-weight: 500; color: var(--text); padding: 8px 10px; }
.nav a:hover { background: none; text-decoration: underline; text-underline-offset: 6px; }
.nav a[aria-current="page"] { background: none; color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.header-search { box-shadow: none; border-bottom: 1px solid var(--text); background: var(--bg); }
.drawer__panel { background: var(--bg); border-left: 1px solid var(--text); box-shadow: none; }
.drawer nav a { border-radius: 0; border-bottom: 1px solid var(--border); font-family: var(--serif); font-size: 1.15rem; font-weight: 500; }
.drawer nav a[aria-current="page"] { background: none; color: var(--accent); }

/* Sections */
.section--alt { background: var(--surface); }
.section-head { border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 28px; }
.section-head p { font-size: .98rem; }

/* Cards: a book on a table, not a floating tile */
.card { border-radius: var(--radius); box-shadow: none; }
.card:hover { transform: none; box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card__title { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; letter-spacing: -.005em; }
.card__meta { font-family: var(--mono); font-size: .7rem; letter-spacing: .02em; }
.cat-card { border-radius: var(--radius); }
.cat-card:hover { transform: none; border-color: var(--text); box-shadow: none; }
.cat-card h3 { font-family: var(--serif); font-size: 1.1rem; }
.cat-card__icon { border-radius: 4px; }
.office-tile { border-radius: var(--radius); }
.office-tile:hover { transform: none; box-shadow: none; }
.office-tile h3 { font-family: var(--serif); font-size: 1.15rem; }
.fav-btn { border-radius: 4px; box-shadow: none; }
.state, .notice, .access-box, .side-card, .form-card, .value, .filters, .guide-wrap { border-radius: var(--radius); }
.skeleton { border-radius: var(--radius); }
.cover__photo { border-radius: 2px 4px 4px 2px; }
.meta-table th { font-family: var(--mono); font-size: .76rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.detail h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); }
.detail__byline { font-family: var(--serif); font-style: italic; font-size: 1.15rem; }
.detail__cover { border-radius: var(--radius); background: var(--surface-2); }
.breadcrumb { font-family: var(--mono); font-size: .76rem; }
.page-head h1 { margin-bottom: 10px; }
.filter-group legend { font-family: var(--mono); font-weight: 500; font-size: .72rem; }
.view-toggle { border-radius: 4px; }
.toast { border-radius: 4px; }

/* AI promo and chat */
.ai-promo { background: var(--ink); border-radius: var(--radius-lg); }
.ai-promo .eyebrow { color: #e9a07c; }
.mock-chat { background: #0d0e0c; border-color: #2f302a; border-radius: var(--radius); font-family: var(--mono); font-size: .84rem; }
.mock-chat__msg { border-radius: 4px; }
.mock-chat__msg--user { background: #2b3a33; }
.mock-chat__msg--ai { background: #1d1e1a; }
.chat { border-radius: var(--radius-lg); }
.msg { border-radius: 8px; }
.msg--user { border-bottom-right-radius: 2px; }
.msg--ai { border-bottom-left-radius: 2px; }
.msg__label { font-family: var(--mono); font-weight: 500; }
.rec { border-radius: 4px; }
.rec a { font-family: var(--serif); font-size: 1rem; }
.context-pill { border-radius: 4px; }

/* Footer: the colophon */
.site-footer { background: var(--ink); color: #b9b4a8; }
.site-footer a { color: #ece8de; }
.site-footer h2 { font-family: var(--mono); font-weight: 500; font-size: .72rem; color: #e9a07c; letter-spacing: .12em; }
.footer-brand .brand__word { color: #ece8de; border-color: #ece8de; }
.footer-bottom { border-top-color: #2f302a; }

/* ---------- Library home: the desk ---------- */
.desk { overflow: hidden; border-bottom: 1px solid var(--text); padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 56px); }
.desk__inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .desk__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.desk h1 { margin-bottom: 16px; max-width: 14ch; }
.desk__lead { font-size: 1.12rem; color: var(--text-muted); max-width: 54ch; margin-bottom: 24px; }
.desk__search { max-width: 640px; }
.desk .hero__ai-toggle { justify-content: flex-start; }
.desk__try { margin: 16px 0 0; color: var(--text-muted); font-size: .95rem; }
.desk__try a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); }
.desk__try a:hover { text-decoration-color: var(--accent); }
.desk__stats { display: flex; gap: 0; margin: 32px 0 0; border-top: 1px solid var(--border); }
.desk__stats div { display: flex; flex-direction: column-reverse; padding: 14px 28px 0 0; margin-right: 28px; border-right: 1px solid var(--border); }
.desk__stats div:last-child { border-right: 0; }
.desk__stats dd { margin: 0; font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1; }
.desk__stats dt { font-family: var(--mono); font-size: .72rem; color: var(--text-muted); margin-top: 6px; }
.desk__books { position: relative; height: 380px; display: none; }
@media (min-width: 1000px) { .desk__books { display: block; } }
.desk__books img { position: absolute; width: min(210px, 36%); height: auto; border-radius: 2px 4px 4px 2px; box-shadow: 0 30px 50px -24px rgba(28, 27, 24, .55), 0 2px 4px rgba(28, 27, 24, .15); }
.desk__books img:nth-child(1) { left: 2%; top: 46px; transform: rotate(-6deg); }
.desk__books img:nth-child(2) { left: 30%; top: 0; z-index: 2; }
.desk__books img:nth-child(3) { left: 58%; top: 52px; transform: rotate(5deg); }

/* ---------- Mobile app layer: same paper and ink ---------- */
@media (max-width: 767px) {
  :root { --radius: 8px; }
  .site-header { border-bottom: 1px solid var(--border); }
  .tabbar { background: var(--bg); backdrop-filter: none; border-top: 1px solid var(--text); box-shadow: none; }
  .tabbar a { font-weight: 500; }
  .tabbar a[aria-current="page"] { color: var(--text); }
  .tabbar__item[aria-current="page"]::before { background: var(--accent); border-radius: 0; height: 2px; top: 0; width: 28px; }
  .tabbar__fab-btn { background: var(--ink); box-shadow: 0 0 0 5px var(--bg); border-radius: 50%; }
  .card { border-radius: 8px; box-shadow: none; padding: 6px; }
  .card:hover { box-shadow: none; }
  .card__cover { border-radius: 4px; }
  .card__title { font-size: .92rem; }
  .card__meta .badge { border-radius: 2px; text-transform: none; font-size: .6rem; letter-spacing: 0; }
  .fav-btn { border-radius: 4px; }
  .m-greet__hi { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
  .m-greet__title { font-family: var(--serif); font-weight: 600; font-size: 1.75rem; letter-spacing: -.02em; line-height: 1.1; }
  .m-search { border-radius: 4px; box-shadow: none; border-color: var(--text); }
  .m-search__btn, .search__filter { border-radius: 4px; background: var(--ink); }
  .m-banner__slide { border-radius: 8px; background: var(--ink); }
  .m-banner__text strong { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; }
  .m-pill { border-radius: 2px; font-family: var(--mono); font-weight: 500; background: transparent; border: 1px solid rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .08em; font-size: .62rem; }
  .m-banner__more { color: #e9a07c; }
  .m-banner__cover { border-radius: 2px 4px 4px 2px; transform: rotate(3deg); }
  .m-dots i.on { background: var(--text); }
  .m-tabs button[aria-selected="true"]::after { background: var(--accent); height: 2px; border-radius: 0; }
  .m-head { border-top: 1px solid var(--text); padding-top: 10px; }
  .m-head h2 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
  .m-head a { font-family: var(--mono); font-size: .74rem; font-weight: 500; color: var(--text); }
  .m-row { border-radius: 6px; box-shadow: none; }
  .m-row__cover { border-radius: 2px 4px 4px 2px; }
  .m-row__tag { font-family: var(--mono); font-weight: 500; color: var(--accent); }
  .m-row__body strong { font-family: var(--serif); font-weight: 600; font-size: 1rem; }
  .m-tracks b, .m-apps b { border-radius: 8px; box-shadow: none; }
  .m-ai { border-radius: 8px; background: var(--ink); }
  .m-ai__icon { border-radius: 6px; background: var(--primary); }
  .m-more { border-radius: 6px; color: var(--text); }
  .page-head .search--lg, body[data-page="library"] .search--lg { border-radius: 4px; box-shadow: none; border-color: var(--text); }
  .filters { border-radius: 10px 10px 0 0; }
  .detail__cover { border-radius: 2px 6px 6px 2px; }
  .detail__actions .btn { border-radius: 4px; }
  .chat { border-radius: 8px; }
}
@media (min-width: 768px) {
  body[data-page="library"] .search--lg { border-radius: 4px; box-shadow: none; border-color: var(--text); }
  body[data-page="library"] .search--lg .input, body[data-page="library"] .search--lg .btn--primary { border-radius: 4px; }
  body:is([data-page="library"], [data-page="home"]) .card { border-radius: 6px; box-shadow: none; padding: 8px; }
  body:is([data-page="library"], [data-page="home"]) .card:hover { transform: none; box-shadow: var(--shadow-md); }
  body:is([data-page="library"], [data-page="home"]) .card__cover { border-radius: 3px; }
  body:is([data-page="library"], [data-page="home"]) .card__meta .badge { text-transform: none; letter-spacing: 0; font-size: .64rem; border-radius: 2px; }
  body:is([data-page="library"], [data-page="home"]) .fav-btn { border-radius: 4px; }
  .lib-tabs button[aria-selected="true"]::after { background: var(--accent); height: 2px; border-radius: 0; }
  .lib-tabs { border-bottom-color: var(--text); }
}
/* Drawn posters: flat cloth-bound look instead of glossy gradients */
.cover__poster, body:is([data-page="library"], [data-page="home"]) .cover__poster { background: linear-gradient(90deg, rgba(0,0,0,.16) 0 6px, transparent 6px), var(--cover-bg, #334155) !important; }
.cover__poster::after, body:is([data-page="library"], [data-page="home"]) .cover__poster::after { border-radius: 0 !important; border: 0 !important; width: auto !important; right: 12px !important; left: 18px !important; top: 14px !important; height: 1px !important; aspect-ratio: auto !important; background: rgba(255,255,255,.35); }
.poster__title, body:is([data-page="library"], [data-page="home"]) .poster__title { font-family: var(--serif) !important; font-weight: 600 !important; }
.poster__kind, body:is([data-page="library"], [data-page="home"]) .poster__kind { font-family: var(--mono); font-weight: 500 !important; }
.poster__mark { display: none !important; }

/* =========================================================
   Front page: one full screen, no scrolling.
   Ink background, a lit shelf of real covers, warm paper type.
   ========================================================= */
/* Same paper, ink and green as the rest of the site (and its dark mode). */
.lp { --ink-0: var(--bg); --paper-0: var(--text); --paper-dim: var(--text-muted); --ember: var(--accent); --ember-2: #d9822b; --line: color-mix(in srgb, var(--text) 14%, transparent);
  height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); color: var(--text); }
.stage { position: relative; isolation: isolate; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden;
  background:
    radial-gradient(55% 65% at 78% 58%, color-mix(in srgb, #d9822b 16%, transparent), transparent 70%),
    radial-gradient(40% 50% at 8% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%),
    var(--bg); }
/* Film grain and a faint ruled-paper grid */
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 20%, transparent 80%); }
.stage::after { content: ""; position: absolute; inset: -50%; z-index: 3; pointer-events: none; opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } }

.stage__top { display: flex; align-items: center; gap: 28px; padding: 18px clamp(16px, 4vw, 56px); }
.lp .brand__word { color: var(--brand-text); border-color: var(--brand-rule); }
.stage__nav { display: none; gap: 26px; margin-left: auto; }
.stage__nav a { position: relative; color: var(--paper-dim); text-decoration: none; font-size: .92rem; font-weight: 500; transition: color .2s; }
.stage__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--ember); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.stage__nav a:hover { color: var(--paper-0); }
.stage__nav a:hover::after { transform: none; }
.stage__enter { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--text); border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 600; font-size: .88rem; transition: border-color .2s, background .2s; }
.stage__enter svg { width: 16px; height: 16px; transition: transform .2s; }
.stage__enter:hover { color: var(--bg); background: var(--text); border-color: var(--text); }
.stage__enter:hover svg { transform: translateX(3px); }
@media (min-width: 900px) { .stage__nav { display: flex; } .stage__enter { margin-left: 8px; } }
@media (max-width: 439px) { .lp .brand__word { display: none; } }

.stage__main { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: 0 clamp(16px, 4vw, 56px); }
@media (min-width: 1000px) { .stage__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: none; align-items: center; gap: 40px; } }
.stage__copy { align-self: center; max-width: 640px; }
.stage__kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(12px, 2.4vh, 26px); font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-dim); animation: rise .8s .05s both; }
.stage__kicker span { padding: 3px 8px; border: 1px solid var(--ember); color: var(--ember); letter-spacing: .1em; }
.lp h1 { margin: 0 0 clamp(14px, 2.6vh, 28px); color: var(--paper-0); font-family: var(--serif); font-weight: 500; font-size: clamp(2.7rem, 1rem + 6.4vw, 7.4rem); line-height: .9; letter-spacing: -.045em; max-width: 9.5ch; animation: rise .9s .12s both; }
.lp h1 em { display: inline-block; font-style: italic; font-weight: 400; letter-spacing: -.03em; background: linear-gradient(100deg, var(--accent) 0%, var(--ember-2) 55%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.stage__lead { margin: 0 0 clamp(18px, 3.4vh, 34px); max-width: 44ch; color: var(--paper-dim); font-size: clamp(1rem, .9rem + .45vw, 1.22rem); line-height: 1.55; animation: rise .9s .22s both; }
.stage__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; animation: rise .9s .3s both; }
.stage__cta { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 0 26px; height: 56px; border-radius: 999px; overflow: hidden; isolation: isolate; text-decoration: none; font-weight: 600; font-size: 1.02rem; color: var(--on-primary); background: var(--primary); box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--primary) 90%, transparent); transition: box-shadow .3s, transform .2s; }
.stage__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--primary-hover), color-mix(in srgb, var(--primary) 70%, #000)); transform: translateX(-101%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.stage__cta svg { width: 20px; height: 20px; transition: transform .25s; }
.stage__cta:hover { color: var(--on-primary); box-shadow: 0 24px 44px -18px color-mix(in srgb, var(--primary) 100%, transparent); }
.stage__cta:hover::before { transform: none; }
.stage__cta:hover svg { transform: translateX(4px); }
.stage__cta:active { transform: scale(.98); }
.stage__browse { color: var(--text); font-weight: 500; text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat, linear-gradient(var(--border-strong), var(--border-strong)) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .3s; }
.stage__browse:hover { color: var(--text); background-size: 100% 1px, 100% 1px; }
.stage__facts { display: flex; gap: clamp(18px, 3vw, 40px); margin: clamp(22px, 4.4vh, 48px) 0 0; padding-top: clamp(14px, 2.4vh, 22px); border-top: 1px solid var(--text); animation: rise .9s .38s both; }
.stage__facts div { display: flex; flex-direction: column; }
.stage__facts dd { margin: 0; font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 500; line-height: 1; color: var(--paper-0); }
.stage__facts dt { margin-top: 6px; font-family: var(--mono); font-size: .68rem; color: var(--paper-dim); letter-spacing: .02em; }

/* The shelf: two planks of real covers, sized by the column so nothing overflows */
.stage__shelf { position: relative; min-height: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: clamp(22px, 4.5vh, 44px); perspective: 1400px; padding-bottom: 14px; }
.stage__light { position: absolute; left: 50%; top: 0; width: 115%; height: 100%; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, #e9a45a 30%, transparent), transparent); filter: blur(12px); pointer-events: none; animation: glow 6s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .65; } to { opacity: 1; } }
.stage__row { position: relative; transform: rotateY(-9deg) rotateX(3deg); transform-style: preserve-3d; }
.stage__row:nth-of-type(odd) { transform: rotateY(-9deg) rotateX(3deg) translateX(3%); }
.stage__books { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: clamp(8px, 1vw, 14px); padding: 0 4%; }
.stage__book { --tilt: 0deg; display: block; transform-origin: bottom center; transform: rotate(var(--tilt)); animation: book-in 1s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(.35s + var(--i) * 70ms); transition: transform .35s cubic-bezier(.2, .9, .25, 1), filter .35s; }
.stage__book:nth-child(2) { width: 94%; justify-self: center; }
.stage__book:nth-child(3) { --tilt: -3deg; }
.stage__book:nth-child(4) { width: 92%; }
.stage__book img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4.15; object-fit: cover; border-radius: 2px 4px 4px 2px; box-shadow: inset 5px 0 0 rgba(0, 0, 0, .22), inset 6px 0 0 rgba(255, 255, 255, .1), 0 26px 34px -18px rgba(28, 27, 24, .75); }
.stage__books:hover .stage__book { filter: saturate(.55) brightness(.85); opacity: .75; }
.stage__books .stage__book:hover { filter: none; transform: translateY(-16px) rotate(var(--tilt)) scale(1.05); }
.stage__plank { position: relative; height: 13px; margin: 0 -2%; background: linear-gradient(#4a3726, #2b2017 70%, #1d150f); border-radius: 2px; box-shadow: 0 24px 30px -14px rgba(28, 27, 24, .6), inset 0 1px 0 rgba(246, 201, 143, .35); animation: rise 1s .3s both; }
@keyframes book-in { from { opacity: 0; transform: translateY(60px) rotate(var(--tilt)); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.stage__kicker i { font-style: normal; opacity: .5; }
@media (min-width: 1000px) { .stage__row { width: min(100%, calc((100dvh - 250px) * 1.32)); margin-inline: auto; } }

/* Bottom strip: a slow marquee of sources */
.stage__foot { display: flex; align-items: center; gap: 24px; padding: 14px clamp(16px, 4vw, 56px) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--text); background: var(--bg); }
.marquee { flex: 1; min-width: 0; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee ul { flex: none; display: flex; gap: 40px; margin: 0; padding: 0 40px 0 0; list-style: none; animation: marquee 38s linear infinite; }
.marquee li { font-family: var(--serif); font-size: 1rem; font-style: italic; color: var(--paper-dim); white-space: nowrap; }
.marquee li::before { content: "✳"; font-style: normal; margin-right: 40px; color: var(--ember); opacity: .7; font-size: .8em; }
@keyframes marquee { to { transform: translateX(-100%); } }
.stage__legal { flex: none; margin: 0; font-family: var(--mono); font-size: .68rem; color: var(--text-muted); }
.stage__legal a { color: var(--paper-dim); text-decoration: none; }
.stage__legal a:hover { color: var(--text); }

/* Phones and short screens: keep everything on one screen */
@media (max-width: 999px) {
  .stage__copy { max-width: none; }
  .stage__row, .stage__row:nth-of-type(odd) { transform: none; }
  .stage__row + .stage__row { display: none; }
  .stage__shelf { justify-content: flex-end; padding-bottom: 10px; }
  .stage__row { max-width: 560px; margin-inline: auto; width: 100%; }
}
/* Phones and tablets: one big fanned stack that fills the space under the button */
@media (max-width: 999px) {
  .stage__shelf { justify-content: flex-end; padding: 8px 0 18px; }
  .stage__light + .stage__row { height: 100%; max-width: 640px; display: flex; flex-direction: column; justify-content: flex-end; }
  .stage__light + .stage__row .stage__books { position: relative; flex: 1; min-height: 0; display: block; padding: 0; container-type: size; }
  .stage__light + .stage__row .stage__book { --w: min(46%, calc((100% - 0px) * .46)); position: absolute; bottom: 0; left: 50%; width: auto; height: min(100cqh, 58cqw, 360px); margin: 0; transform-origin: 50% 100%; transform: translateX(var(--x)) rotate(var(--tilt)); animation-name: fan-in; }
  .stage__light + .stage__row .stage__book img { height: 100%; width: auto; aspect-ratio: 3 / 4.15; }
  .stage__light + .stage__row .stage__book:nth-child(1) { --x: -118%; --tilt: -14deg; z-index: 1; height: min(84cqh, 49cqw, 300px); }
  .stage__light + .stage__row .stage__book:nth-child(2) { --x: -82%; --tilt: -6deg; z-index: 3; height: min(94cqh, 54cqw, 330px); }
  .stage__light + .stage__row .stage__book:nth-child(3) { --x: -22%; --tilt: 5deg; z-index: 4; height: min(100cqh, 58cqw, 360px); }
  .stage__light + .stage__row .stage__book:nth-child(4) { --x: 18%; --tilt: 14deg; z-index: 2; height: min(86cqh, 50cqw, 306px); }
  .stage__light + .stage__row .stage__plank { margin: 0 -4%; }
  .stage__books:hover .stage__book { filter: none; opacity: 1; }
  .stage__light + .stage__row .stage__books .stage__book:hover { transform: translateX(var(--x)) translateY(-14px) rotate(var(--tilt)); }
  .stage__light { top: auto; bottom: 0; height: 75%; }
}
@keyframes fan-in { from { opacity: 0; transform: translateX(-50%) translateY(40px) rotate(0deg); } }
@media (max-width: 640px) {
  .stage__facts { display: none; }
  .stage__legal { display: none; }
  .stage__kicker { flex-wrap: wrap; row-gap: 6px; font-size: .64rem; letter-spacing: .1em; gap: 8px; }
  .stage__cta { height: 52px; }
  .stage__lead { font-size: 1rem; }
}
@media (max-height: 820px) and (min-width: 1000px) { .stage__facts { display: none; } }
@media (max-height: 600px) { .stage__lead { display: none; } .stage__kicker { display: none; } }
@media (max-width: 380px) { .stage__browse { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .stage::after, .stage__light, .marquee ul { animation: none; }
  .stage__book, .stage__kicker, .lp h1, .stage__lead, .stage__actions, .stage__facts, .stage__plank { animation: none; }
}
/* A real cover sits on plain paper, like a product photo, not on a coloured panel. */
.cover.has-photo { background: var(--surface-2); }
.cover.has-photo .cover__photo { box-shadow: 0 14px 22px -12px rgba(28, 27, 24, .55); }
/* Short phones (Safari with its toolbars showing): give the room to the books */
@media (max-width: 640px) and (max-height: 760px) {
  .stage__lead, .stage__kicker { display: none; }
  .lp h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); margin-bottom: 18px; }
}

/* =========================================================
   OMT AI: a standalone, full-screen chat app in the spirit of
   ChatGPT and Claude: a dark chat-history rail, a paper reading
   column, rich answers (code, tables, diagrams, charts, drawings)
   and a composer that rides on top of the on-screen keyboard.
   ========================================================= */
html:has(body.ai-app), body.ai-app { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.ai-app { display: block; min-height: 0; background: var(--bg); }
.ai { --side-w: 0px; --rail: #15161a; --rail-2: #1f2127; --rail-text: #d9d4c7; --rail-muted: #8d897f;
  position: fixed; left: 0; right: 0; top: var(--app-top, 0); height: var(--app-h, 100dvh);
  display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); background: var(--bg); transition: grid-template-columns .28s cubic-bezier(.2, .9, .25, 1); }
@media (min-width: 1024px) { .ai.side-open { --side-w: 272px; } }

/* ---------- Chat-history rail ---------- */
.ai__side { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom)); background: var(--rail); color: var(--rail-text); }
.ai__side > * { min-width: 252px; }
.ai__side-top { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 6px; }
.ai__brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.ai__brand em { font-style: italic; font-weight: 400; color: #e9a45a; }
.ai__icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; flex: none; }
.ai__icon-btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.ai__icon-btn svg { width: 20px; height: 20px; }
.ai__new-chat { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 1px solid #34363e; border-radius: 12px; background: var(--rail-2); color: #fff; font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; }
.ai__new-chat:hover { background: #2a2c33; border-color: #4a4c55; }
.ai__new-chat svg { width: 17px; height: 17px; }
.ai__new-chat kbd { margin-left: auto; font-family: var(--mono); font-size: .64rem; color: var(--rail-muted); background: none; border: 0; }
@media (pointer: coarse) { .ai__new-chat kbd { display: none; } }
.ai__find { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; background: #1b1c21; color: var(--rail-muted); }
.ai__find svg { width: 16px; height: 16px; flex: none; }
.ai__find input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #fff; font: inherit; font-size: .88rem; }
.ai__find input::placeholder { color: var(--rail-muted); }
.ai__history { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; scrollbar-color: #3a3c44 transparent; }
.ai__history section + section { margin-top: 14px; }
.ai__history h2 { margin: 6px 8px; font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--rail-muted); }
.ai__history ul { list-style: none; margin: 0; padding: 0; }
.ai__history li { position: relative; display: flex; align-items: center; border-radius: 9px; }
.ai__history li:hover, .ai__history li.is-active { background: var(--rail-2); }
.ai__history li.is-active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: #e9a45a; }
.ai__chat { flex: 1; min-width: 0; padding: 9px 36px 9px 12px; border: 0; background: none; color: var(--rail-text); font: inherit; font-size: .88rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.ai__history li.is-active .ai__chat { color: #fff; }
.ai__del { position: absolute; right: 4px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--rail-muted); cursor: pointer; opacity: 0; }
.ai__history li:hover .ai__del, .ai__del:focus-visible { opacity: 1; }
.ai__del:hover { color: #ff8a7a; background: #2c2e35; }
@media (pointer: coarse) { .ai__del { opacity: .7; } }
.ai__empty { margin: 18px 8px; font-size: .85rem; color: var(--rail-muted); }
.ai__side-foot { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid #2a2c33; font-size: .84rem; }
.ai__side-foot a, .ai__side-foot button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--rail-text); font: inherit; text-decoration: none; text-align: left; cursor: pointer; }
.ai__side-foot a:hover, .ai__side-foot button:hover { background: var(--rail-2); color: #fff; }
.ai__side-foot svg { width: 17px; height: 17px; }
.ai__side-foot p { margin: 4px 10px 0; font-size: .72rem; color: var(--rail-muted); }
.ai__scrim { display: none; }
@media (max-width: 1023px) {
  .ai__side { position: fixed; z-index: 30; inset: 0 auto 0 0; width: min(86vw, 320px); transform: translateX(-102%); transition: transform .3s cubic-bezier(.2, .9, .25, 1); box-shadow: 20px 0 60px -20px rgba(0, 0, 0, .5); }
  .ai__side > * { min-width: 0; }
  .ai.side-open .ai__side { transform: none; }
  .ai__scrim { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(10, 10, 12, .45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
  .ai__scrim[hidden] { display: none; }
}

/* ---------- Main column ---------- */
.ai__main { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); position: relative;
  --col: 780px; --gut: max(16px, calc((100% - var(--col)) / 2));
  background: radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, #d9822b 8%, transparent), transparent 70%), var(--bg); }
.ai__bar { grid-row: 1; display: flex; align-items: center; gap: 6px; padding: calc(8px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); z-index: 2; }
.ai__bar .ai__icon-btn { color: var(--text); }
.ai.side-open .ai__bar #side-open { display: none; }
@media (max-width: 1023px) { .ai.side-open .ai__bar #side-open { display: grid; } }
.ai__back { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--text); flex: none; }
.ai__back:hover { background: var(--surface-2); color: var(--text); }
.ai__back svg { width: 21px; height: 21px; }
@media (min-width: 1024px) { .ai__back { display: none; } }
.ai__id { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 4px; }
.ai__id > div { min-width: 0; }
.ai__title { margin: 0; font-family: var(--serif); font-size: 1.08rem; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.ai__mode { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .64rem; letter-spacing: .04em; color: var(--text-muted); }
.ai__mode::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.ai__mode--live::before { background: #2fb87a; box-shadow: 0 0 0 3px color-mix(in srgb, #2fb87a 22%, transparent); animation: pulse 2s ease-in-out infinite; }
.ai__mode--demo::before { background: #d9a13b; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, #2fb87a 0%, transparent); } }
.ai__actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ai__link { padding: 8px 10px; color: var(--text-muted); text-decoration: none; font-size: .9rem; font-weight: 500; }
.ai__link:hover { color: var(--text); }
.ai__new { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.ai__new:hover { border-color: var(--text); }
.ai__new svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .ai__link { display: none; } .ai__new span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .ai__new { width: 40px; padding: 0; justify-content: center; } }
.ai__context { grid-row: 2; }
.ai__context:empty { display: none; }
.ai__context .context-pill { margin: 10px var(--gut) 0; }

/* ---------- Conversation ---------- */
.ai__log { grid-row: 3; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 28px var(--gut) 36px; display: flex; flex-direction: column; gap: 26px; scroll-padding-bottom: 24px; }
.ai__log:focus { outline: none; }
.ai .msg { max-width: 100%; font-size: 1rem; line-height: 1.7; position: relative; }
.ai .msg--ai { align-self: stretch; background: none; padding: 0 0 0 44px; border-radius: 0; animation: msg-in .22s ease-out; }
.ai .msg--ai::before, .ai .typing::before { content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--ink) url("../assets/logo-mark.svg") center / 21px no-repeat; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4); }
.ai .msg--ai .msg__label { margin: 3px 0 6px; font-family: var(--serif); font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
.ai .msg--user { max-width: min(84%, 620px); align-self: flex-end; padding: 0; background: none; color: inherit; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ai .msg--user .msg__text { padding: 11px 17px; border-radius: 22px 22px 6px 22px; background: var(--ink); color: #f1ece1; }
.ai .msg--user .msg__text p { margin: 0 0 .5em; } .ai .msg--user .msg__text p:last-child { margin: 0; }
.ai .msg--user code { background: rgba(255, 255, 255, .14); color: inherit; }
.ai .msg--error { align-self: stretch; margin-left: 44px; border-radius: 12px; padding: 12px 16px; }
.ai .typing { position: relative; align-self: flex-start; padding: 4px 0 0 44px; min-height: 30px; background: none; }
.ai .typing em { font-family: var(--mono); font-size: .76rem; }

/* Rich answer content */
.msg__body > :first-child { margin-top: 0; }
.msg__body p { margin: 0 0 .85em; }
.msg__body h3, .msg__body h4, .msg__body h5 { font-family: var(--serif); letter-spacing: -.01em; line-height: 1.25; margin: 1.3em 0 .45em; }
.msg__body h3 { font-size: 1.3rem; } .msg__body h4 { font-size: 1.1rem; } .msg__body h5 { font-size: 1rem; }
.msg__body ul, .msg__body ol { padding-left: 1.4em; margin: .3em 0 .95em; }
.msg__body li { margin: .25em 0; } .msg__body li::marker { color: var(--text-muted); }
.msg__body li > ul, .msg__body li > ol { margin: .2em 0; }
.msg__body strong { font-weight: 650; }
.msg__body a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.msg__body hr { border: 0; border-top: 1px solid var(--border); margin: 1.4em 0; }
.msg__body blockquote { margin: 1em 0; padding: 10px 16px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 0 10px 10px 0; }
.msg__body blockquote p:last-child { margin: 0; }
.msg__body :not(pre) > code { padding: .12em .38em; border-radius: 5px; background: color-mix(in srgb, var(--text) 8%, transparent); font-family: var(--mono); font-size: .86em; }
.msg__body > pre, .msg__body .code pre, .viz pre { margin: 0 0 1em; padding: 14px 16px; overflow-x: auto; border-radius: 12px; background: #1b1d23; color: #e6e1d6; font-family: var(--mono); font-size: .84rem; line-height: 1.6; tab-size: 2; }
.msg__body .code { margin: .4em 0 1.1em; border-radius: 12px; overflow: hidden; background: #1b1d23; box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .6); }
.msg__body .code pre { margin: 0; border-radius: 0; background: none; }
.code__bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 14px; background: #24262e; color: #a39f95; font-family: var(--mono); font-size: .72rem; }
.code__copy { padding: 4px 10px; border: 0; border-radius: 6px; background: transparent; color: #d4cfc4; font: inherit; cursor: pointer; }
.code__copy:hover { background: #31343d; color: #fff; }
.code__copy.is-done { color: #7ad6a6; }
.tok-kw { color: #f08d6a; } .tok-str { color: #a8d58b; } .tok-num { color: #f2c46d; } .tok-com { color: #7d7a72; font-style: italic; }
.tok-fn { color: #82b8f5; } .tok-type { color: #e8b4f0; } .tok-key { color: #7fd3e0; } .tok-var { color: #f2c46d; }
.msg__body .table { margin: .5em 0 1.1em; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.msg__body table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.5; }
.msg__body th, .msg__body td { padding: 9px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.msg__body th { font-weight: 650; background: var(--surface-2); white-space: nowrap; }
.msg__body tr:last-child td { border-bottom: 0; }
.msg__body tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }

/* Illustrations */
.viz { position: relative; margin: .6em 0 1.2em; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); --c-bg: var(--surface); color: var(--text); }
.viz__wait { display: flex; align-items: center; gap: 10px; min-height: 120px; justify-content: center; font-family: var(--mono); font-size: .78rem; color: var(--text-muted); }
.viz__wait::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.viz__art { display: flex; justify-content: center; cursor: zoom-in; overflow-x: auto; }
.viz__art svg, .viz__art img { max-width: 100%; height: auto; max-height: 520px; }
.viz__art img { border-radius: 8px; }
.viz__tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s; }
.viz:hover .viz__tools, .viz:focus-within .viz__tools { opacity: 1; }
@media (pointer: coarse) { .viz__tools { opacity: 1; } }
.viz__tools button { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 1rem; cursor: pointer; }
.viz__tools button:hover { border-color: var(--text); }
.viz.is-broken figcaption { margin-bottom: 8px; font-size: .85rem; color: var(--text-muted); }
.chart { width: 100%; font-family: var(--font); }
.chart .c-title { font-size: 17px; font-weight: 600; fill: currentColor; font-family: var(--serif); }
.chart .c-label { font-size: 13px; fill: currentColor; }
.chart .c-muted { font-size: 12px; fill: currentColor; opacity: .62; }
.chart .c-total { font-size: 22px; font-weight: 600; fill: currentColor; }
.chart .c-grid { stroke: currentColor; opacity: .1; }
.chart .c-axis { stroke: currentColor; opacity: .35; }
.chart rect, .chart path, .chart circle { transition: opacity .15s; }
.chart rect:hover, .chart path:hover { opacity: .8; }
.viz-dialog { width: min(96vw, 1200px); max-height: 92vh; padding: 28px; border: 0; border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .6); --c-bg: var(--surface); }
.viz-dialog::backdrop { background: rgba(10, 10, 12, .6); backdrop-filter: blur(3px); }
.viz-dialog__art { display: flex; justify-content: center; }
.viz-dialog__art svg, .viz-dialog__art img { width: 100%; height: auto; max-height: 80vh; }
.viz-dialog__close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 1.4rem; cursor: pointer; }

/* Book cards under an answer */
.ai .msg__recs { margin-top: 16px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.ai .rec { display: flex; gap: 12px; align-items: flex-start; border-radius: 12px; padding: 12px; background: var(--surface); transition: border-color .2s, transform .2s; }
.ai .rec:hover { border-color: var(--text); transform: translateY(-2px); }
.rec__cover { flex: none; width: 44px; height: 60px; object-fit: cover; border-radius: 2px 4px 4px 2px; box-shadow: inset 3px 0 0 rgba(0, 0, 0, .12), 0 6px 12px -6px rgba(0, 0, 0, .5); }
.rec__main { min-width: 0; flex: 1; }

/* Per-message tools */
.msg__tools { display: flex; gap: 2px; margin-top: 4px; margin-left: -8px; opacity: 0; transition: opacity .2s; }
.msg:hover .msg__tools, .msg:focus-within .msg__tools, .msg--ai:last-of-type .msg__tools { opacity: 1; }
@media (pointer: coarse) { .msg--ai .msg__tools { opacity: 1; } .msg--user .msg__tools { display: none; } }
.msg__tools button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text-muted); cursor: pointer; }
.msg__tools button:hover { background: var(--surface-2); color: var(--text); }
.msg__tools button.is-done { color: var(--primary); }
.msg__tools--user { margin: 0; }
.ai .msg__followups { margin-top: 12px; }
.ai .chip--ask { border-radius: 999px; background: var(--surface); text-align: left; }
.ai .chip--ask::before { content: "↳"; margin-right: 6px; color: var(--accent); }
.msg__status { margin-top: 8px; font-family: var(--mono); font-size: .76rem; color: var(--text-muted); }
.msg__status::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); vertical-align: -1px; animation: spin .8s linear infinite; }
.msg__atts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.att { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att svg { flex: none; color: var(--accent); }
.att--img { width: 120px; height: 120px; padding: 0; object-fit: cover; border-radius: 14px; }
.msg.is-editing { width: 100%; max-width: 100%; }
.msg__edit { width: 100%; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--text); border-radius: 16px; background: var(--surface); }
.msg__edit textarea { width: 100%; min-height: 70px; border: 0; outline: none; resize: vertical; background: none; color: var(--text); font: inherit; font-size: 16px; line-height: 1.5; }
.msg__edit > div { display: flex; justify-content: flex-end; gap: 8px; }

/* Welcome */
.ai.is-empty .ai__log { justify-content: center; }
.ai .msg--welcome { display: none; }
.ai.is-empty .msg--welcome { display: block; text-align: center; margin: auto 0; padding: 12px 0; animation: rise .7s both; color: var(--text-muted); }
.msg--welcome .msg__mark { display: block; width: 60px; height: auto; margin: 0 auto 16px; filter: drop-shadow(0 14px 18px rgba(28, 27, 24, .25)); }
.welcome__kicker { margin: 0 0 6px; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.msg--welcome h2 { margin: 0 0 12px; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; color: var(--text); }
.msg--welcome h2 em { font-style: italic; font-weight: 400; background: linear-gradient(100deg, var(--accent), #d9822b 60%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .05em; }
.msg--welcome > p:not(.welcome__kicker) { max-width: 50ch; margin: 0 auto; font-size: 1.02rem; }
.starters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 28px auto 0; max-width: 720px; text-align: left; }
.starter { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; animation: rise .6s both; animation-delay: calc(.15s + var(--i) * .05s); }
.starter:hover { border-color: var(--text); transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(28, 27, 24, .5); }
.starter strong { font-size: .94rem; font-weight: 600; }
.starter span { font-size: .82rem; color: var(--text-muted); line-height: 1.35; }
@media (max-width: 720px) { .starters { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; } .starter:nth-child(n+5) { display: none; } .starter { padding: 12px 13px; } }

/* ---------- Dock and composer ---------- */
.ai__dock { grid-row: 4; position: relative; padding: 0 var(--gut) calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 26px); }
.ai__jump { position: absolute; left: 50%; top: -52px; width: 38px; height: 38px; margin-left: -19px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .4); }
.ai__jump[hidden] { display: none; }
.ai__jump svg { width: 18px; height: 18px; }
.ai__suggest .chips { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 2px 0 10px; scrollbar-width: none; }
.ai__suggest .chips:empty { display: none; }
.ai__suggest .chips::-webkit-scrollbar { display: none; }
.ai__suggest .chip { flex: none; white-space: nowrap; border-radius: 999px; background: var(--surface); font-size: .86rem; }
.ai__composer { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--border-strong); border-radius: 26px; background: var(--surface); box-shadow: 0 12px 34px -18px rgba(28, 27, 24, .4); transition: border-color .2s, box-shadow .2s; }
.ai__composer:focus-within { border-color: var(--text); box-shadow: 0 16px 40px -18px rgba(28, 27, 24, .5); }
.ai__row { display: flex; align-items: flex-end; gap: 4px; }
.ai__attach { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text-muted); cursor: pointer; position: relative; }
.ai__attach:hover, .ai__attach:focus-within { background: var(--surface-2); color: var(--text); }
.ai__attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ai__attach svg { width: 21px; height: 21px; }
.ai__composer textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 220px; padding: 11px 4px; border: 0; outline: none; resize: none; background: transparent; color: var(--text); font: inherit; font-size: 16px; line-height: 1.45; }
.ai__composer textarea::placeholder { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai__send { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--text); color: var(--bg); cursor: pointer; transition: transform .15s, background .2s, opacity .2s; }
.ai__composer:has(textarea:placeholder-shown):not(:has(.pend)) .ai__send:not(.is-stop) { opacity: .35; }
.ai__send:hover { background: var(--primary); color: #fff; }
.ai__send:active { transform: scale(.92); }
.ai__send svg { width: 20px; height: 20px; }
.ai__send.is-stop { background: var(--accent); color: #fff; opacity: 1; }
.ai__files { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 6px 0; }
.ai__files[hidden] { display: none; }
.pend { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; padding: 5px 6px 5px 5px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); font-size: .8rem; }
.pend img { width: 38px; height: 38px; object-fit: cover; border-radius: 8px; }
.pend > svg { margin: 0 2px 0 6px; color: var(--accent); }
.pend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pend button { flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; font-size: 1rem; line-height: 1; }
.ai__hint { margin: 8px 0 0; text-align: center; font-size: .72rem; color: var(--text-muted); }
.ai__toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); z-index: 50; transform: translateX(-50%); max-width: min(92vw, 420px); padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #f1ece1; font-size: .88rem; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .5); animation: rise .25s both; }
.ai__drop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(4px); pointer-events: none; }
.ai__drop[hidden] { display: none; }
.ai__drop p { padding: 28px 40px; border: 2px dashed var(--accent); border-radius: 20px; background: var(--surface); font-family: var(--serif); font-size: 1.3rem; }
@media (max-width: 640px) { .ai__hint { display: none; } .ai__dock { padding-top: 4px; } .ai__log { padding-top: 20px; gap: 22px; } .ai .msg--ai { padding-left: 0; padding-top: 38px; } .ai .msg--ai::before { width: 26px; height: 26px; background-size: 18px; } .ai .msg--ai .msg__label { position: absolute; top: 0; left: 36px; margin: 2px 0 0; } .ai .msg--error { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .ai__mode--live::before, .ai.is-empty .msg--welcome, .starter, .ai .msg--ai { animation: none; } .ai, .ai__side { transition: none; } }

/* =========================================================
   Library home, louder: spotlight, serif-italic accent,
   pill search, fanned covers, a contents-style track list.
   ========================================================= */
body[data-page="home"] .desk { position: relative; isolation: isolate;
  background: radial-gradient(50% 70% at 82% 50%, color-mix(in srgb, #d9822b 15%, transparent), transparent 70%), radial-gradient(40% 60% at 0% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 70%); }
body[data-page="home"] .desk::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 90% at 70% 40%, #000 20%, transparent 75%); }
body[data-page="home"] .desk h1 { font-size: clamp(2.6rem, 1.2rem + 4.4vw, 5.2rem); line-height: .95; letter-spacing: -.04em; font-weight: 500; max-width: 11ch; animation: rise .8s .05s both; }
body[data-page="home"] .desk h1 em, .m-greet__title em { font-style: italic; font-weight: 400; background: linear-gradient(100deg, var(--accent), #d9822b 60%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .05em; }
body[data-page="home"] .desk__lead { animation: rise .8s .12s both; }
body[data-page="home"] .desk__search { animation: rise .8s .18s both; }
body[data-page="home"] .desk .search--lg { height: 64px; padding: 6px; border: 1px solid var(--text); border-radius: 999px; background: var(--surface); box-shadow: 0 16px 40px -22px rgba(28, 27, 24, .45); align-items: center; }
body[data-page="home"] .desk .search--lg:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent), 0 16px 40px -22px rgba(28, 27, 24, .45); }
body[data-page="home"] .desk .search--lg .input { min-height: 52px; border: 0; background: transparent; outline: none; box-shadow: none; border-radius: 999px; font-size: 1.05rem; }
body[data-page="home"] .desk .search--lg .btn { min-height: 52px; border-radius: 999px; padding: 0 26px; }
@media (max-width: 520px) { body[data-page="home"] .desk .search--lg { height: auto; border-radius: 22px; } }
body[data-page="home"] .desk__try a { font-family: var(--serif); font-style: italic; font-size: 1.05em; }
body[data-page="home"] .desk__stats dd { font-size: 2.4rem; font-weight: 500; }
.desk__glow { position: absolute; left: 50%; top: 50%; width: 120%; height: 120%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, color-mix(in srgb, #e9a45a 28%, transparent), transparent); filter: blur(10px); pointer-events: none; }
body[data-page="home"] .desk__books img { animation: book-in .9s cubic-bezier(.2, .9, .25, 1) both; transition: transform .35s cubic-bezier(.2, .9, .25, 1), box-shadow .35s; }
body[data-page="home"] .desk__books img:nth-of-type(1) { --tilt: -7deg; animation-delay: .25s; }
body[data-page="home"] .desk__books img:nth-of-type(2) { --tilt: 0deg; animation-delay: .35s; }
body[data-page="home"] .desk__books img:nth-of-type(3) { --tilt: 6deg; animation-delay: .45s; }
body[data-page="home"] .desk__books img:nth-of-type(1) { transform: rotate(-7deg); }
body[data-page="home"] .desk__books img:nth-of-type(3) { transform: rotate(6deg); }
body[data-page="home"] .desk__books:hover img { transform: rotate(var(--tilt)) translateY(-4px); }
body[data-page="home"] .desk__books img:hover { transform: rotate(var(--tilt)) translateY(-16px) scale(1.04); z-index: 5; box-shadow: 0 40px 60px -28px rgba(28, 27, 24, .7); }

/* Tracks as a table of contents */
@media (min-width: 640px) {
  body[data-page="home"] .grid--cats { counter-reset: track; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-top: 1px solid var(--text); }
  body[data-page="home"] .cat-card { counter-increment: track; align-items: baseline; gap: 18px; padding: 18px 4px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; position: relative; }
  body[data-page="home"] .cat-card::before { content: counter(track, decimal-leading-zero); flex: none; width: 2em; font-family: var(--mono); font-size: .78rem; color: var(--text-muted); }
  body[data-page="home"] .cat-card::after { content: "→"; position: absolute; right: 4px; top: 18px; color: var(--accent); opacity: 0; transform: translateX(-8px); transition: opacity .2s, transform .2s; }
  body[data-page="home"] .cat-card:hover::after { opacity: 1; transform: none; }
  body[data-page="home"] .cat-card__icon, body[data-page="home"] .cat-card__app { display: none; }
  body[data-page="home"] .cat-card h3 { font-size: 1.35rem; font-weight: 500; margin: 0 0 2px; transition: color .2s; }
  body[data-page="home"] .cat-card:hover h3 { color: var(--accent); }
  body[data-page="home"] .cat-card p { font-size: .9rem; }
}

/* Featured shelf: real-cover tiles that lift */
@media (min-width: 768px) {
  body[data-page="home"] .grid--cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  body[data-page="home"] .card { transition: transform .3s cubic-bezier(.2, .9, .25, 1), box-shadow .3s; }
  body[data-page="home"] .card:hover { transform: translateY(-6px); box-shadow: 0 30px 40px -26px rgba(28, 27, 24, .55); }
}
body[data-page="home"] .ai-promo { position: relative; overflow: hidden; }
body[data-page="home"] .ai-promo::after { content: ""; position: absolute; right: -10%; top: -40%; width: 60%; height: 120%; background: radial-gradient(closest-side, rgba(233, 164, 90, .22), transparent); pointer-events: none; }
body[data-page="home"] .ai-promo h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: -.03em; }
@media (prefers-reduced-motion: reduce) { body[data-page="home"] .desk h1, body[data-page="home"] .desk__lead, body[data-page="home"] .desk__search, body[data-page="home"] .desk__books img { animation: none; } }

/* =========================================================
   Home: themed shelves. Classic numbered sections, each a
   horizontal carousel of real covers.
   ========================================================= */
.shelf-sec { position: relative; padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 60px); border-top: 1px solid var(--text); overflow: hidden; }
.shelf-sec:nth-child(even) { background: var(--surface); }
.shelf-sec::before { content: ""; position: absolute; right: -10%; top: -30%; width: 55%; height: 120%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--shelf-glow, #d9822b) 12%, transparent), transparent); }
.shelf-sec--canva { --shelf-glow: #00a3b4; }
.shelf-sec--linux { --shelf-glow: #6b7280; }
.shelf-sec--security { --shelf-glow: #b42318; }
.shelf-sec--success { --shelf-glow: #c58b1c; }
.shelf-sec__head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 32px); }
.shelf-sec__text { max-width: 640px; }
.shelf-sec__text h2 { margin: 0 0 8px; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); line-height: 1.05; letter-spacing: -.025em; font-weight: 500; }
.shelf-sec__text > p:last-child { margin: 0; color: var(--text-muted); font-size: 1rem; max-width: 56ch; }
.shelf-sec__no { color: var(--text-muted); margin-right: 4px; }
.shelf-sec__nav { display: flex; align-items: center; gap: 8px; }
.shelf-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--text); border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.shelf-btn svg { width: 20px; height: 20px; }
.shelf-btn[data-dir="-1"] svg { transform: rotate(180deg); }
.shelf-btn:hover:not(:disabled) { background: var(--text); color: var(--bg); }
.shelf-btn:disabled { opacity: .25; cursor: default; }
.shelf-sec__all { margin-left: 8px; font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 5px; white-space: nowrap; }
.shelf-sec__all:hover { color: var(--accent); text-decoration-color: var(--accent); }

.shelf-rail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(140px, 15vw, 188px); gap: clamp(16px, 2vw, 28px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 18px 2px 8px; margin: -18px -2px 0; scrollbar-width: none; }
.shelf-rail::-webkit-scrollbar { display: none; }
.shelf-rail:focus-visible { outline-offset: 6px; }
.book { scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); }
.book__cover { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 2px 5px 5px 2px; overflow: hidden; background: var(--surface-2);
  box-shadow: inset 4px 0 0 rgba(0, 0, 0, .18), 0 20px 26px -18px rgba(28, 27, 24, .6), 0 1px 2px rgba(28, 27, 24, .15);
  transition: transform .35s cubic-bezier(.2, .9, .25, 1), box-shadow .35s; }
.book__cover img { width: 100%; height: 100%; object-fit: cover; }
.book__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, .14), transparent 30%, transparent 70%, rgba(0, 0, 0, .08)); pointer-events: none; }
.book:hover .book__cover { transform: translateY(-8px) rotate(-1deg); box-shadow: inset 4px 0 0 rgba(0, 0, 0, .18), 0 34px 40px -22px rgba(28, 27, 24, .7); }
.book:hover .book__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.book__poster { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 14px 12px 40px 18px; color: #fff;
  background: linear-gradient(90deg, rgba(0, 0, 0, .18) 0 6px, transparent 6px), radial-gradient(120% 60% at 100% 0%, rgba(255, 255, 255, .2), transparent 60%), var(--c); }
.book__poster::before { content: ""; position: absolute; left: 18px; right: 12px; top: 16px; height: 1px; background: rgba(255, 255, 255, .45); }
.book__poster small { position: absolute; top: 24px; left: 18px; right: 12px; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.book__poster b { font-family: var(--serif); font-weight: 600; font-size: clamp(.95rem, .8rem + .5vw, 1.15rem); line-height: 1.12; }
.book__poster i { font-style: normal; font-size: .68rem; opacity: .85; }
.book__tag { position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: 2px 7px; border-radius: 2px; font-family: var(--mono); font-size: .6rem; letter-spacing: .04em; color: var(--text); background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.book__tag--open, .book__tag--official { color: var(--success); }
.book__title { margin-top: 8px; font-family: var(--serif); font-weight: 600; font-size: .98rem; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book__by { font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) {
  .shelf-sec { padding: 30px 0 26px; }
  .shelf-sec__head { margin-bottom: 14px; }
  .shelf-sec__text h2 { font-size: 1.55rem; }
  .shelf-sec__text > p:last-child { font-size: .9rem; }
  .shelf-btn { display: none; }
  .shelf-sec__nav { position: absolute; right: 0; top: 0; }
  .shelf-sec__all { margin: 0; }
  .shelf-rail { grid-auto-columns: 38%; gap: 14px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { .book:hover .book__cover { transform: none; } }
.m-ai-wrap { padding-bottom: 28px; }

/* Shelf spotlight: the first item is a wide "our pick" card */
.shelf-sec__count { margin-left: 6px; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-muted); letter-spacing: .02em; text-transform: none; font-size: .66rem; }
.lead { scroll-snap-align: start; grid-column: span 2; display: grid; grid-template-columns: 46% 1fr; gap: 18px; align-self: start; padding: 14px; border: 1px solid var(--text); border-radius: 8px; background: var(--surface); text-decoration: none; color: var(--text); box-shadow: 0 24px 40px -30px rgba(28, 27, 24, .6); transition: transform .35s cubic-bezier(.2, .9, .25, 1), box-shadow .35s; }
.shelf-sec:nth-child(even) .lead { background: var(--bg); }
.lead:hover { transform: translateY(-6px); box-shadow: 0 36px 50px -30px rgba(28, 27, 24, .7); }
.lead__cover { width: 100%; }
.lead .book__tag { position: static; box-shadow: none; border: 1px solid currentColor; background: none; }
.lead__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 4px 4px 2px 0; }
.lead__pick { align-self: flex-start; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bg); background: var(--accent); padding: 3px 8px; border-radius: 2px; }
.lead__title { margin-top: 6px; font-family: var(--serif); font-weight: 600; font-size: clamp(1.15rem, .95rem + .7vw, 1.5rem); line-height: 1.1; letter-spacing: -.01em; }
.lead__by { font-family: var(--serif); font-style: italic; color: var(--text-muted); font-size: .92rem; }
.lead__desc { font-size: .86rem; line-height: 1.5; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.lead__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lead__go { font-weight: 600; font-size: .86rem; color: var(--primary); }
.lead:hover .lead__go { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .lead { grid-column: span 2; grid-template-columns: 44% 1fr; gap: 12px; padding: 10px; }
  .lead__desc { -webkit-line-clamp: 4; font-size: .8rem; }
  .lead__title { font-size: 1.08rem; }
  .lead__foot .book__tag { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lead:hover { transform: none; } }
@media (max-width: 767px) { .shelf-sec__count { display: none; } }

/* =========================================================
   Library: "the stacks" header, a shelf of category spines,
   and a bookshop-style cover wall.
   ========================================================= */
body[data-page="library"] main { overflow-x: clip; }
body[data-page="library"] .stacks { position: relative; isolation: isolate; padding: 44px 0 0; }
body[data-page="library"] .stacks::before { content: ""; position: absolute; inset: 0 -50vw; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 80% at 85% 30%, color-mix(in srgb, #d9822b 16%, transparent), transparent 70%), radial-gradient(30% 60% at 0% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%); }
.stacks__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.stacks__kicker { margin: 0 0 18px; font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stacks__kicker span { padding: 3px 8px; border: 1px solid currentColor; border-radius: 2px; color: var(--accent); margin-right: 6px; }
.stacks__kicker b { color: var(--text); font-weight: 600; }
.stacks__kicker i { font-style: normal; opacity: .5; padding: 0 2px; }
.stacks__free { font-size: inherit; display: inline-flex; gap: 6px; align-items: center; }
body[data-page="library"] .stacks h1 { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
  font-size: clamp(2.5rem, 1.2rem + 4vw, 4.8rem); line-height: .95; letter-spacing: -.04em; font-weight: 500; margin: 0 0 16px; max-width: 12ch; animation: rise .8s .05s both; }
body[data-page="library"] .stacks h1 em { font-style: italic; font-weight: 400; background: linear-gradient(100deg, var(--accent), #d9822b 60%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.stacks__lead { color: var(--text-muted); font-size: 1.08rem; max-width: 52ch; margin: 0 0 24px; animation: rise .8s .12s both; }
body[data-page="library"] .stacks .search--lg { height: 64px; padding: 6px; border: 1px solid var(--text); border-radius: 999px; background: var(--surface); box-shadow: 0 16px 40px -22px rgba(28, 27, 24, .45); align-items: center; animation: rise .8s .18s both; }
body[data-page="library"] .stacks .search--lg:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent), 0 16px 40px -22px rgba(28, 27, 24, .45); }
body[data-page="library"] .stacks .search--lg .input { min-height: 52px; border: 0; background: transparent; outline: none; box-shadow: none; border-radius: 999px; font-size: 1.05rem; }
body[data-page="library"] .stacks .search--lg .btn--primary { min-height: 52px; border-radius: 999px; padding: 0 26px; }

/* A loose pile of real covers */
.stacks__pile { position: relative; height: 360px; }
.stacks__pile a { position: absolute; top: 50%; left: 50%; width: 38%; max-width: 168px; aspect-ratio: 3 / 4;
  --x: calc((var(--i) - 2) * 52%); --r: calc((var(--i) - 2) * 7deg); --y: calc(abs(var(--i) - 2) * 7%);
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); z-index: calc(10 - abs(var(--i) - 2));
  animation: pile-in .9s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(.2s + var(--i) * .07s);
  transition: transform .35s cubic-bezier(.2, .9, .25, 1); }
.stacks__pile a:hover { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) - 14%)) rotate(var(--r)) scale(1.05); z-index: 20; }
.stacks__pile img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px 4px 4px 2px; box-shadow: inset 4px 0 0 rgba(0,0,0,.12), 0 28px 44px -22px rgba(28, 27, 24, .6), 0 2px 6px rgba(28, 27, 24, .18); background: var(--surface-2); }
@keyframes pile-in { from { opacity: 0; transform: translate(-50%, -20%) rotate(0deg); } }

/* Category spines on a plank */
.spines { position: relative; margin: 36px 0 6px; }
.spines__row { display: flex; align-items: flex-end; gap: 6px; height: 210px; overflow-x: auto; overflow-y: hidden; padding: 16px 2px 0; scrollbar-width: none; scroll-snap-type: x proximity; }
.spines__row::-webkit-scrollbar { display: none; }
.spines__plank { height: 10px; margin-top: -1px; border-radius: 1px; background: linear-gradient(#8b6a45, #6b4f31); box-shadow: 0 10px 18px -10px rgba(28, 27, 24, .6); }
.spine { flex: none; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px;
  width: 54px; height: var(--h, 92%); padding: 10px 0 9px; border: 0; border-radius: 3px 3px 0 0; cursor: pointer; color: #fff; font: inherit;
  background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(255,255,255,.1) 18%, transparent 40%, rgba(0,0,0,.18)), var(--c);
  box-shadow: inset 0 6px 0 rgba(255,255,255,.14), inset 0 -10px 0 rgba(0,0,0,.14);
  transition: transform .28s cubic-bezier(.2, .9, .25, 1), filter .2s; }
.spine:nth-child(3n) { width: 60px; } .spine:nth-child(4n+1) { width: 50px; }
.spine:hover { transform: translateY(-8px); }
.spine:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.spine[aria-pressed="true"] { transform: translateY(-14px); filter: saturate(1.15); }
.spine[aria-pressed="true"]::after { content: ""; position: absolute; left: 50%; bottom: -24px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateX(-50%); }
.spine[data-zero] { opacity: .35; }
.spine__code { font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .08em; padding: 2px 4px; border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5); }
.spine__label { flex: 1; min-height: 0; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--serif); font-size: .9rem; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spine__n { font-family: var(--mono); font-size: .66rem; opacity: .85; }
body[data-page="library"] .stacks .m-tabs { margin-top: 18px; }

/* Cover wall */
@media (min-width: 768px) {
  body[data-page="library"] .grid--cards:not(.grid--list) { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 28px 20px; }
  body[data-page="library"] .grid--cards:not(.grid--list) .card { padding: 0; border: 0; background: none; transition: transform .3s cubic-bezier(.2, .9, .25, 1); }
  body[data-page="library"] .grid--cards:not(.grid--list) .card:hover { transform: translateY(-6px); box-shadow: none; }
  body[data-page="library"] .grid--cards:not(.grid--list) .card__cover { border-radius: 2px 4px 4px 2px; box-shadow: inset 4px 0 0 rgba(0,0,0,.1), 0 18px 30px -20px rgba(28, 27, 24, .55), 0 1px 3px rgba(28, 27, 24, .15); transition: box-shadow .3s; }
  body[data-page="library"] .grid--cards:not(.grid--list) .card:hover .card__cover { box-shadow: inset 4px 0 0 rgba(0,0,0,.1), 0 34px 44px -24px rgba(28, 27, 24, .7), 0 1px 3px rgba(28, 27, 24, .15); }
  body[data-page="library"] .grid--cards:not(.grid--list) .card__meta { top: 10px; left: 10px; }
  body[data-page="library"] .grid--cards:not(.grid--list) .fav-btn { top: 10px; right: 10px; opacity: 0; transition: opacity .2s; }
  body[data-page="library"] .grid--cards:not(.grid--list) .card:is(:hover, :focus-within) .fav-btn, body[data-page="library"] .fav-btn[aria-pressed="true"] { opacity: 1; }
  body[data-page="library"] .grid--cards:not(.grid--list) .card__body { padding: 12px 2px 0; }
  body[data-page="library"] .grid--cards:not(.grid--list) .card__title { font-family: var(--serif); font-size: 1rem; font-weight: 600; }
}
body[data-page="library"] .toolbar { border-top: 1px solid var(--text); padding-top: 14px; }
body[data-page="library"] #result-count { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
body[data-page="library"] .load-more .btn { min-width: 220px; border-radius: 999px; border-color: var(--text); }

@media (max-width: 959px) { .stacks__grid { grid-template-columns: minmax(0, 1fr); } .stacks__pile { display: none; } }
@media (max-width: 767px) {
  body[data-page="library"] .stacks { padding-top: 14px; }
  body[data-page="library"] .stacks h1 { font-size: 2.3rem; margin-bottom: 14px; }
  .stacks__kicker { font-size: .66rem; margin-bottom: 12px; }
  .stacks__lead { display: none; }
  body[data-page="library"] .stacks .search--lg { height: 56px; padding: 4px; animation: none; }
  body[data-page="library"] .stacks .search--lg .input { min-height: 46px; font-size: 1rem; }
  .spines { margin: 20px -16px 0; }
  .spines__row { height: 168px; padding: 14px 16px 0; gap: 5px; scroll-padding: 0 16px; }
  .stacks__free { display: none; }
  .spines__plank { margin: -1px 0 0; border-radius: 0; }
  .spine { width: 46px; } .spine:nth-child(3n) { width: 50px; } .spine:nth-child(4n+1) { width: 42px; }
  .spine__label { font-size: .72rem; }
  body[data-page="library"] .toolbar { border-top: 0; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .stacks__pile a, body[data-page="library"] .stacks h1, .stacks__lead, body[data-page="library"] .stacks .search--lg { animation: none; } .spine { transition: none; } }
.ai__side .ai__brand, .ai__side .ai__brand:hover { color: #fff; }
.viz__art svg.chart { max-width: 640px; }
.viz__art > svg[aria-roledescription] { min-width: min(560px, 100%); }
@media (max-width: 640px) { .viz__art { justify-content: flex-start; } .viz__art > svg[aria-roledescription] { min-width: 540px; max-height: none; } }
@media (prefers-color-scheme: dark) {
  .ai .msg--user .msg__text { background: #2a2c33; color: #f1ece1; }
  .ai__send { background: #f1ece1; color: #15161a; }
}