/* «Анатомия эссе» — one stylesheet. Light theme first, dark from prefers-color-scheme.
   Visual language: an annotated manuscript — hairline rules, margin notes, quiet slips. No shadows, no gradients. */

@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(fonts/literata-cyrillic-opsz-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(fonts/literata-latin-opsz-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(fonts/literata-cyrillic-opsz-italic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(fonts/literata-latin-opsz-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light dark;
  --paper: #F6F2EA; --paper-2: #EFE9DD; --card: #FCFAF6; --line: #DED5C6; --line-strong: #CBBFAB;
  --ink: #1E2B37; --body: #47525E; --muted: #636D78;
  --accent: #B04E26; --on-accent: #F6F2EA; --focus: #2A6DAA;
  /* chart marks — validated with dataviz/validate_palette.js (light, surface #F6F2EA) */
  --c1: #B04E26; --c2: #2A6DAA; --c-dim: #B7BFC7; --track: #E9E2D5;
  --o1: #8EAED3; --o2: #5A88BE; --o3: #24599A;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151C23; --paper-2: #1A232C; --card: #1C252E; --line: #2C3843; --line-strong: #3C4A57;
    --ink: #ECE5D8; --body: #C3CDD6; --muted: #94A2AE;
    --accent: #EE9C72; --on-accent: #151C23; --focus: #8FB8E2;
    /* validated with --mode dark, surface #151C23 */
    --c1: #D27A4E; --c2: #4F8AC9; --c-dim: #4C5A67; --track: #232D37;
    --o1: #2E5B8A; --o2: #4F8AC9; --o3: #93BDE8;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 var(--sans);
  font-kerning: normal; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; text-wrap: balance; }
p, ul, ol, dl, figure { margin: 0; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
main:focus { outline: none; }
.icon { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.15em; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: 0.6rem 1rem; background: var(--ink);
  color: var(--paper); border-radius: var(--radius); }
.skip:focus { top: 1rem; }
[hidden] { display: none !important; }

.wrap { max-width: 76rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }

/* ---------- header & footer */
.site-head { border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; gap: 0.5rem 1.5rem; min-height: 4rem; flex-wrap: wrap; }
.brand { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.nav { display: flex; gap: 1.5rem; margin-left: auto; }
.nav a { padding-block: 0.6rem; color: var(--body); text-decoration: none; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.auth { display: flex; align-items: center; gap: 0.9rem; font-size: 0.9375rem; color: var(--muted); }
.auth a { color: var(--ink); }
.auth .who { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 40rem) {
  .head-row { padding-block: 0.6rem; }
  .nav { order: 3; width: 100%; margin-left: 0; gap: 1.25rem; }
  .auth { margin-left: auto; }
  .auth .who { display: none; }
}
.site-foot { border-top: 1px solid var(--line); margin-top: 2rem; }
.foot-row { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; padding-block: 1.75rem 2.5rem; font-size: 0.9375rem; color: var(--body); }
.foot-note { flex-basis: 100%; color: var(--muted); font-size: 0.875rem; }

/* ---------- shared bits */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 1.1rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--ink);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--ink); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; border-color: var(--line-strong); }
.btn-solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-link { justify-self: start; padding: 0; border: 0; background: none; color: var(--body); font: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer; }
.btn-link:hover { color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.section-title { font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.page-head { display: grid; gap: 0.75rem; padding-block: clamp(2rem, 5vw, 3.5rem) 1.75rem; }
.page-head h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }
.lede { max-width: 40rem; font-size: 1.1875rem; color: var(--body); }

/* ---------- home */
.hero { display: grid; gap: 2rem; padding-block: clamp(3rem, 9vw, 7.5rem) clamp(2.5rem, 6vw, 5rem); }
.hero-title { max-width: 15ch; font-size: clamp(2.6rem, 1.3rem + 5.4vw, 5.75rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.025em; }
.hero-note { display: grid; gap: 1.5rem; max-width: 34rem; font-size: 1.1875rem; color: var(--body); }
@media (min-width: 62rem) {
  .hero { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); column-gap: 4rem; align-items: end; }
  .hero-note { padding: 0 0 0.75rem 1.5rem; border-left: 1px solid var(--line-strong); }
}
.facts { padding-block: 0.5rem 3rem; }
.facts .section-title { margin-bottom: 0.75rem; }
.facts-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.fact { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline;
  padding-block: 1.25rem; border-bottom: 1px solid var(--line); text-decoration: none; }
.fact-num { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--accent); }
.fact-text { max-width: 44rem; font-size: 1.1875rem; color: var(--ink); }
.fact:hover .fact-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (min-width: 62rem) { .fact { grid-template-columns: 9rem minmax(0, 1fr); } }
.materials { padding-block: 1rem 3rem; }
.materials .section-title { margin-bottom: 0.75rem; }
.mat-list { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.mat-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; }
.mat-list a { font-weight: 600; }
.mat-list span { color: var(--muted); }

/* ---------- findings */
.findings { display: grid; column-gap: 3.5rem; padding-bottom: 3rem; }
.toc { display: none; }
.toc ol, .toc-mobile ol { list-style: none; padding: 0; display: grid; gap: 0.15rem; }
.toc a, .toc-mobile a { display: block; padding: 0.3rem 0 0.3rem 0.9rem; border-left: 2px solid transparent; color: var(--body); text-decoration: none; }
.toc a:hover, .toc-mobile a:hover { color: var(--ink); border-left-color: var(--line-strong); }
.toc-mobile { justify-self: start; }
.toc-mobile summary { cursor: pointer; font-weight: 600; color: var(--body); }
.toc-mobile ol { margin-top: 0.6rem; border-left: 1px solid var(--line); }
@media (min-width: 80rem) {
  .findings { grid-template-columns: 11rem minmax(0, 1fr); }
  .findings > .page-head { grid-column: 1 / -1; }
  .toc { display: block; position: sticky; top: 1.5rem; align-self: start; padding-top: 2.5rem; font-size: 0.9375rem; }
  .toc ol { border-left: 1px solid var(--line); }
  .toc a { margin-left: -1px; }
  .toc-mobile { display: none; }
}
.chapter { display: grid; gap: 1.5rem 3rem; padding-block: 2.5rem; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.chapter-main { display: grid; gap: 1rem; max-width: 42rem; align-content: start; }
.chapter h2, .tips h2 { font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.25rem); line-height: 1.15; }
.chapter-main > p:not(.kicker) { font-size: 1.125rem; color: var(--body); }
.kicker { font-size: 0.9375rem; font-weight: 600; color: var(--accent); }
.chapter-margin { display: grid; gap: 1rem; max-width: 42rem; align-content: start; }
@media (min-width: 62rem) {
  .chapter { grid-template-columns: minmax(0, 1fr) 16.5rem; }
  .chapter-margin { padding-top: 2.6rem; }
}
.example, .quote { display: grid; gap: 0.55rem; padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: 4px; font-size: 0.9375rem; }
.ex-head { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.875rem; color: var(--muted); }
.ex-score { white-space: nowrap; font-weight: 600; color: var(--accent); }
.ex-text { color: var(--ink); }
.ex-link { justify-self: start; font-weight: 600; }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-style: italic; line-height: 1.35; color: var(--ink); }
.quote blockquote p::before { content: "«"; }
.quote blockquote p::after { content: "»"; }
.quote figcaption { display: grid; gap: 0.45rem; }
.source { font-size: 0.875rem; color: var(--muted); }
.tips { display: grid; gap: 1.75rem; padding-block: 2.5rem; border-top: 1px solid var(--line); }
.tips-group h3 { margin-bottom: 0.9rem; font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.tips-group dl { display: grid; gap: 1.1rem 2.5rem; max-width: 60rem; }
@media (min-width: 48rem) { .tips-group dl { grid-template-columns: 1fr 1fr; } }
.tips-group dt { font-weight: 600; }
.tips-group dd, .limits dd { margin: 0.2rem 0 0; color: var(--body); }
.more { border-top: 1px solid var(--line); }
.more details { border-bottom: 1px solid var(--line); }
.more summary { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; font-weight: 600; cursor: pointer; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "+"; font-weight: 400; color: var(--muted); }
.more details[open] summary::after { content: "−"; }
.more-body { display: grid; gap: 0.75rem; max-width: 42rem; padding-bottom: 1.25rem; color: var(--body); }
.limits dt { font-weight: 600; color: var(--ink); }
.more-link { padding-block: 1.25rem; color: var(--body); }

/* ---------- charts: values always printed; bars are spans sized by w-N classes */
.chart { display: grid; gap: 0.8rem; margin-top: 0.5rem; }
.bars, .groups { display: grid; gap: 0.65rem; }
.groups { gap: 1rem; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "bar bar"; gap: 0.3rem 0.75rem; align-items: baseline; }
.bar-label { font-size: 0.9375rem; color: var(--ink); }
.bar-note { margin-left: 0.5rem; font-size: 0.875rem; color: var(--muted); }
.bar-value { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-track { position: relative; display: block; height: 0.625rem; background: var(--track); border-radius: 2px; }
.bar-row > .bar-label { grid-area: label; }
.bar-row > .bar-value { grid-area: value; }
.bar-row > .bar-track { grid-area: bar; }
.bar-fill { display: block; height: 100%; background: var(--c-dim); border-radius: 2px; }
.is-hi .bar-fill { background: var(--c1); }
.is-hi .bar-label { font-weight: 600; }
.bar-avg { position: absolute; top: -0.2rem; bottom: -0.2rem; width: 2px; margin-left: -1px; background: var(--ink); opacity: 0.6; }
.chart-key { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--body); }
.key-avg { width: 2px; height: 0.95rem; background: var(--ink); opacity: 0.6; }
.chart figcaption { max-width: 40rem; font-size: 0.875rem; color: var(--muted); }
.chart-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.875rem; color: var(--body); }
.chart-legend li { display: flex; align-items: center; gap: 0.45rem; }
.key { width: 0.8rem; height: 0.8rem; border-radius: 2px; background: var(--c-dim); }
.s1 { background: var(--c1); } .s2 { background: var(--c2); }
.o1 { background: var(--o1); } .o2 { background: var(--o2); } .o3 { background: var(--o3); }
.group-row { display: grid; gap: 0.35rem; }
.gbars { display: grid; gap: 0.2rem; }
.gbar { display: grid; grid-template-columns: minmax(0, 1fr) 4.25rem; gap: 0.75rem; align-items: center; }
.gbar .bar-track { height: 0.5rem; }
.gbar .bar-value { font-size: 0.875rem; font-weight: 400; text-align: right; }
@media (min-width: 48rem) {
  .bar-row { grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr) 4.5rem; grid-template-areas: "label bar value"; align-items: center; }
  .bar-value { text-align: right; }
  .bar-note { display: block; margin-left: 0; }
  .group-row { grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); gap: 0.75rem; align-items: center; }
  .group-row .bar-note { display: block; }
}

/* ---------- library */
.lib-layout { display: grid; gap: 1.25rem 3rem; padding-bottom: 3rem; }
.filters { display: grid; gap: 0.9rem; align-content: start; }
.search { position: relative; display: block; }
.search .icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input { width: 100%; min-height: 2.75rem; padding: 0.55rem 0.9rem 0.55rem 2.4rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--card); color: var(--ink); font: inherit; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.btn-filters { justify-self: start; }
.filter-count { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding-inline: 0.35rem; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: 0.8125rem; }
/* phones: the filters are a bottom sheet over a backdrop (library.js makes the rest inert) */
.filter-panel { display: none; }
.filter-panel.is-open { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: grid; gap: 0.9rem; max-height: 86vh;
  overflow-y: auto; overscroll-behavior: contain; padding: 0 1rem calc(1.25rem + env(safe-area-inset-bottom));
  background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0;
  box-shadow: 0 -16px 40px -16px rgb(30 43 55 / 0.35); }
.sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.9rem 0 0.6rem; background: var(--card); border-bottom: 1px solid var(--line); }
.sheet-title { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.sheet-backdrop { position: fixed; inset: 0; z-index: 45; background: rgb(21 28 35 / 0.45); }
body.sheet-open { overflow: hidden; }
@media (min-width: 62rem) {
  .lib-layout { grid-template-columns: 16.5rem minmax(0, 1fr); align-items: start; }
  .filters { position: sticky; top: 1rem; }
  .btn-filters { display: none; }
  .filter-panel, .filter-panel.is-open { position: static; display: grid; gap: 0.9rem; max-height: none; overflow: visible;
    padding: 0; background: none; border: 0; box-shadow: none; }
  .sheet-head, .sheet-backdrop { display: none !important; }
}
.field { position: relative; display: grid; gap: 0.3rem; font-size: 0.875rem; color: var(--muted); }
.field label { justify-self: start; cursor: pointer; }
.field select { min-height: 2.5rem; padding: 0.35rem 2rem 0.35rem 0.7rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23808a94' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 0.7rem;
  color: var(--ink); font: inherit; font-size: 0.9375rem; -webkit-appearance: none; appearance: none; }
/* styled dropdowns (menu.js): a select-only combobox over the hidden native select */
.menu-button { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 2.5rem;
  padding: 0.35rem 0.6rem 0.35rem 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card);
  color: var(--ink); font: inherit; font-size: 0.9375rem; text-align: left; cursor: pointer; }
.menu-button:hover, .menu-button[aria-expanded="true"] { border-color: var(--ink); }
.menu-button.is-set { border-color: var(--accent); }
.menu-button.is-set .menu-value { font-weight: 600; }
.menu-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-chevron { color: var(--muted); }
.menu-button[aria-expanded="true"] .menu-chevron { transform: rotate(180deg); }
.menu-list { position: absolute; z-index: 30; top: calc(100% + 0.3rem); left: 0; min-width: 100%; width: max-content;
  max-width: min(23rem, calc(100vw - 2rem)); max-height: min(21rem, 60vh); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 0.3rem; list-style: none; background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: 0 14px 32px -16px rgb(30 43 55 / 0.35); }
.menu-list.is-up { top: auto; bottom: calc(100% + 0.3rem); }
.menu-option { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.6rem;
  border-radius: 4px; font-size: 0.9375rem; color: var(--ink); cursor: pointer; }
.menu-option.is-active { background: var(--paper-2); }
.menu-option[aria-selected="true"] { font-weight: 600; color: var(--accent); }
.menu-count { flex: none; font-size: 0.8125rem; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { .menu-list { box-shadow: 0 14px 32px -12px rgb(0 0 0 / 0.6); } }
@media (prefers-reduced-motion: no-preference) { .menu-chevron { transition: transform 120ms ease; } }
@media (forced-colors: active) { .menu-option.is-active { outline: 2px solid Highlight; } }
.checks { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.check { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9375rem; cursor: pointer; }
.check input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--accent); }
.filter-help { font-size: 0.875rem; color: var(--muted); }
.lib-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.count { font-size: 0.9375rem; color: var(--body); }
.slips { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.slip { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; border-bottom: 1px solid var(--line); }
.slip-link { display: grid; gap: 0.3rem; padding-block: 1.1rem; color: inherit; text-decoration: none; }
.slip-title { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.slip-link:hover .slip-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.slip-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: 0.875rem; color: var(--muted); }
.strong-mark { font-weight: 600; color: var(--accent); }
.slip-gist { max-width: 46rem; color: var(--body); }
.slip-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.25rem; }
.tag { padding: 0.05rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.8125rem; color: var(--body); }
.star { display: grid; place-items: center; align-self: start; width: 2.75rem; height: 2.75rem; margin-top: 0.75rem; padding: 0;
  border: 0; border-radius: var(--radius); background: none; color: var(--muted); cursor: pointer; }
.star:hover { color: var(--ink); background: var(--paper-2); }
.star .icon { width: 1.25rem; height: 1.25rem; }
.star[aria-pressed="true"] { color: var(--accent); }
.star[aria-pressed="true"] path { fill: currentColor; }
.load-more { padding-top: 1.25rem; }
.notice { display: grid; justify-items: start; gap: 0.75rem; padding-block: 1.5rem; color: var(--body); }

/* ---------- one essay */
.essay { padding-bottom: 3rem; }
.essay-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; padding-block: 1.25rem; font-size: 0.9375rem; }
.essay-grid + .essay-nav { margin-top: 2rem; border-top: 1px solid var(--line); }
.essay-nav a { display: inline-flex; align-items: center; gap: 0.45rem; padding-block: 0.45rem; color: var(--body); text-decoration: none; }
.essay-nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.essay-head { display: grid; gap: 0.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.essay-head h1 { max-width: 30ch; font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.015em; }
.essay-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-size: 0.9375rem; color: var(--muted); }
.badge { font-weight: 600; color: var(--accent); }
.essay-grid { display: grid; gap: 2rem 3.5rem; padding-top: 1.75rem; }
@media (min-width: 62rem) { .essay-grid { grid-template-columns: minmax(0, 1fr) 17.5rem; } }
.essay-main { display: grid; gap: 1.5rem; max-width: 42rem; align-content: start; }
.essay-gist { font-family: var(--serif); font-size: 1.375rem; line-height: 1.45; color: var(--ink); }
.essay h2 { margin-bottom: 0.4rem; font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.essay-main p { color: var(--body); }
.essay-side { display: grid; gap: 1.75rem; align-content: start; }
.traits { display: grid; gap: 0.7rem; }
.traits dt { font-size: 0.8125rem; color: var(--muted); }
.traits dd { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.15rem 0 0; }
.chip { display: inline-block; padding: 0.1rem 0.6rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card);
  font-size: 0.875rem; color: var(--ink); text-decoration: none; }
a.chip:hover { border-color: var(--ink); }
.scores { display: grid; gap: 0.5rem; }
.score { display: grid; grid-template-columns: 6.75rem auto 1fr; align-items: center; gap: 0.6rem; font-size: 0.875rem; }
.pips { display: flex; gap: 3px; }
.pip { width: 1rem; height: 0.5rem; border-radius: 2px; background: var(--track); }
.pip.on { background: var(--c2); }
.score-sum { padding-top: 0.25rem; font-weight: 600; }
.original { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.fulltext { display: grid; gap: 1rem; margin-top: 1rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.fulltext .prompt { padding-left: 1rem; border-left: 2px solid var(--line-strong); font-size: 0.9375rem; color: var(--muted); }
.reading, .commentary, .fulltext .prompt { overflow-wrap: anywhere; }
.reading { display: grid; gap: 1em; max-width: 65ch; font-family: var(--serif); font-size: 1.25rem; line-height: 1.7; color: var(--ink); }
.reading p { color: var(--ink); }
.reading h3, .commentary-text h3 { margin-top: 0.4em; font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.reading hr { width: 30%; margin: 0.5em 0; border: 0; border-top: 1px solid var(--line-strong); }
.commentary-text { display: grid; gap: 0.75em; }
.commentary { display: grid; gap: 0.6rem; padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: 4px; font-size: 0.9375rem; color: var(--body); }
.commentary h3 { font-family: var(--sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.locked { display: grid; justify-items: start; gap: 0.75rem; padding: 1.25rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--body); }
.fine { font-size: 0.875rem; color: var(--muted); }

.not-found { padding-bottom: 4rem; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (forced-colors: active) { .bar-fill, .key, .pip.on, .bar-avg { background: CanvasText; forced-color-adjust: none; } }

/* ---------- bar geometry (generated: w-0…w-100 width, l-0…l-100 left) */
.w-0{width:0%} .w-1{width:1%} .w-2{width:2%} .w-3{width:3%} .w-4{width:4%} .w-5{width:5%} .w-6{width:6%} .w-7{width:7%} .w-8{width:8%} .w-9{width:9%}
.w-10{width:10%} .w-11{width:11%} .w-12{width:12%} .w-13{width:13%} .w-14{width:14%} .w-15{width:15%} .w-16{width:16%} .w-17{width:17%} .w-18{width:18%} .w-19{width:19%}
.w-20{width:20%} .w-21{width:21%} .w-22{width:22%} .w-23{width:23%} .w-24{width:24%} .w-25{width:25%} .w-26{width:26%} .w-27{width:27%} .w-28{width:28%} .w-29{width:29%}
.w-30{width:30%} .w-31{width:31%} .w-32{width:32%} .w-33{width:33%} .w-34{width:34%} .w-35{width:35%} .w-36{width:36%} .w-37{width:37%} .w-38{width:38%} .w-39{width:39%}
.w-40{width:40%} .w-41{width:41%} .w-42{width:42%} .w-43{width:43%} .w-44{width:44%} .w-45{width:45%} .w-46{width:46%} .w-47{width:47%} .w-48{width:48%} .w-49{width:49%}
.w-50{width:50%} .w-51{width:51%} .w-52{width:52%} .w-53{width:53%} .w-54{width:54%} .w-55{width:55%} .w-56{width:56%} .w-57{width:57%} .w-58{width:58%} .w-59{width:59%}
.w-60{width:60%} .w-61{width:61%} .w-62{width:62%} .w-63{width:63%} .w-64{width:64%} .w-65{width:65%} .w-66{width:66%} .w-67{width:67%} .w-68{width:68%} .w-69{width:69%}
.w-70{width:70%} .w-71{width:71%} .w-72{width:72%} .w-73{width:73%} .w-74{width:74%} .w-75{width:75%} .w-76{width:76%} .w-77{width:77%} .w-78{width:78%} .w-79{width:79%}
.w-80{width:80%} .w-81{width:81%} .w-82{width:82%} .w-83{width:83%} .w-84{width:84%} .w-85{width:85%} .w-86{width:86%} .w-87{width:87%} .w-88{width:88%} .w-89{width:89%}
.w-90{width:90%} .w-91{width:91%} .w-92{width:92%} .w-93{width:93%} .w-94{width:94%} .w-95{width:95%} .w-96{width:96%} .w-97{width:97%} .w-98{width:98%} .w-99{width:99%}
.w-100{width:100%}
.l-0{left:0%} .l-1{left:1%} .l-2{left:2%} .l-3{left:3%} .l-4{left:4%} .l-5{left:5%} .l-6{left:6%} .l-7{left:7%} .l-8{left:8%} .l-9{left:9%}
.l-10{left:10%} .l-11{left:11%} .l-12{left:12%} .l-13{left:13%} .l-14{left:14%} .l-15{left:15%} .l-16{left:16%} .l-17{left:17%} .l-18{left:18%} .l-19{left:19%}
.l-20{left:20%} .l-21{left:21%} .l-22{left:22%} .l-23{left:23%} .l-24{left:24%} .l-25{left:25%} .l-26{left:26%} .l-27{left:27%} .l-28{left:28%} .l-29{left:29%}
.l-30{left:30%} .l-31{left:31%} .l-32{left:32%} .l-33{left:33%} .l-34{left:34%} .l-35{left:35%} .l-36{left:36%} .l-37{left:37%} .l-38{left:38%} .l-39{left:39%}
.l-40{left:40%} .l-41{left:41%} .l-42{left:42%} .l-43{left:43%} .l-44{left:44%} .l-45{left:45%} .l-46{left:46%} .l-47{left:47%} .l-48{left:48%} .l-49{left:49%}
.l-50{left:50%} .l-51{left:51%} .l-52{left:52%} .l-53{left:53%} .l-54{left:54%} .l-55{left:55%} .l-56{left:56%} .l-57{left:57%} .l-58{left:58%} .l-59{left:59%}
.l-60{left:60%} .l-61{left:61%} .l-62{left:62%} .l-63{left:63%} .l-64{left:64%} .l-65{left:65%} .l-66{left:66%} .l-67{left:67%} .l-68{left:68%} .l-69{left:69%}
.l-70{left:70%} .l-71{left:71%} .l-72{left:72%} .l-73{left:73%} .l-74{left:74%} .l-75{left:75%} .l-76{left:76%} .l-77{left:77%} .l-78{left:78%} .l-79{left:79%}
.l-80{left:80%} .l-81{left:81%} .l-82{left:82%} .l-83{left:83%} .l-84{left:84%} .l-85{left:85%} .l-86{left:86%} .l-87{left:87%} .l-88{left:88%} .l-89{left:89%}
.l-90{left:90%} .l-91{left:91%} .l-92{left:92%} .l-93{left:93%} .l-94{left:94%} .l-95{left:95%} .l-96{left:96%} .l-97{left:97%} .l-98{left:98%} .l-99{left:99%}
.l-100{left:100%}