/* «Soviet Liquid Glass»: 80% modern premium UI, 20% Soviet code. Warm paper, frosted glass, condensed uppercase display type,
   constructivist geometry (circle, diagonal, triangle, orbit) only inside images, red as a 5–8% accent. Icons: Tabler outline. */
:root {
  --skel:rgba(20,20,20,.065);   /* the loading skeleton: a flat shape, a centred bar, a bar on every line of text */
  --skel-bar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='6' fill='%23141414' fill-opacity='.065'/%3E%3C/svg%3E") center / 100% 60% no-repeat;
  --skel-lines:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='20%25' width='100%25' height='60%25' rx='5' fill='%23141414' fill-opacity='.065'/%3E%3C/svg%3E") 0 0 / 100% 1lh repeat-y;
  --bg:#F3F1EC; --bg2:#EBE9E4; --paper:#E4E0D8;
  --text:#111111; --text2:#676767; --text3:#9C9993; --icon:#6B6964;
  --red:#E33127; --red-hover:#C9251E; --red-soft:rgba(227,49,39,.10); --red-ring:rgba(227,49,39,.55);
  --line:rgba(17,17,17,.08); --hover:rgba(17,17,17,.05);
  --glass:rgba(255,255,255,.42); --glass-el:rgba(255,255,255,.60); --glass-dark:rgba(17,17,17,.78); --glass-border:rgba(255,255,255,.2);
  --blur:blur(28px) saturate(130%); --blur-el:blur(40px) saturate(130%);
  --glass-float:rgba(249,248,245,.68); --blur-float:blur(40px) saturate(110%);   /* glass over the covers: see-through, calm */
  --rim:inset 0 0 14px rgba(255,255,255,.5);   /* the light edge of the glass, feathered inward instead of a crisp line */
  --sh-sm:0 1px 2px rgba(20,20,20,.04), 0 4px 14px rgba(20,20,20,.05);
  --sh-md:0 2px 6px rgba(20,20,20,.04), 0 12px 40px rgba(20,20,20,.06);
  --sh-lg:0 4px 14px rgba(20,20,20,.06), 0 24px 70px rgba(20,20,20,.12);
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px;
  --ease:cubic-bezier(.22,.8,.25,1); --fast:140ms; --base:220ms; --slow:400ms; --pill:300ms;   /* --pill: a sliding thumb */
  --ui:"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --display:"Cormorant", "Times New Roman", serif;
  --nav:0px;   /* height of the sticky bar on phones */
  --lh-top:33px;   /* the list toolbar sticks here: on the agent button's line, its pills as tall as that button */
}
/* Apple-style continuous corners («squircles») where the browser supports corner-shape, plain rounding elsewhere.
   A squircle looks smaller than a circle arc of the same radius, so the radii grow a little. Capsules and circles stay as they are. */
@supports (corner-shape: superellipse(1.6)) {
  :root { --r-xs:10px; --r-sm:14px; --r-md:21px; --r-lg:28px; --r-xl:38px; }
  .side, .kinds, .kinds .thumb, .form, .filters, .tcard, .tpage, .book .cover, .thumbc, .trow, .agentbar, .plancard, .donate, .apps, .device, .device img,
  .menu, .chat, .panel, .msg.user, .tform, .pcard img, .thumb img, #stage img { corner-shape:superellipse(1.6); }
  .kinds { border-radius:17px; } .kinds .thumb { border-radius:14px; }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* a chosen item's icon gives a small jump: a subject, Тарифы / Поддержать, the agent */
@keyframes iconpop { 35% { transform:scale(.78) rotate(-10deg); } 70% { transform:scale(1.16) rotate(4deg); } }
.sb-row[aria-current=true] .ti, .navlink[aria-current=page] .ti, .mbar a[aria-current=page] .ti, body.chat-open .chatBtn .ti { animation:iconpop .55s var(--ease); }
/* things come in rising a little: covers scrolled into view, the plans and donation tabs (app.js does the same for titles, results, pages) */
@keyframes rise { from { opacity:0; translate:0 14px; } }
/* a pressed button, pill or card sinks a little; each lists scale in its own transition */
:is(.chip, .seg button, .kinds button, .sb-row, .filters button.frow, .suggest button, .capsule button, .navlink, .ibtn, .tsend, .qnav button):active:not(:disabled) { scale:.96; }
.book:active .cover, .tcard:active, .pcard:active img { scale:.98; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }
[hidden] { display:none !important; }
.i18n body { visibility:hidden; }   /* until the page is translated (app.js) */
body { margin:0; overflow-x:clip;  /* rotated art must never scroll the page sideways; clip keeps the menu sticky */
       font:400 14px/1.45 var(--ui); letter-spacing:-.006em; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
button, input, textarea { font:inherit; color:inherit; letter-spacing:inherit; }
button { background:none; border:0; padding:0; cursor:pointer; text-align:inherit; }
button:disabled { cursor:default; }
a { color:var(--text); text-decoration:underline; text-decoration-color:rgba(17,17,17,.25); text-underline-offset:3px; }
::selection { background:rgba(227,49,39,.16); }
:focus-visible { outline:2px solid var(--red-ring); outline-offset:3px; }
.ti { font-size:18px; line-height:1; }
/* type: Inter for the interface, Cormorant (a book serif) for headings */
.micro { font:500 13px/1.3 var(--ui); color:var(--text2); }   /* small labels as written: no caps, no letter-spacing */
.display { margin:0; font:600 clamp(44px, 4.4vw, 76px)/.98 var(--display); letter-spacing:-.02em; overflow-wrap:break-word; }
.display.long { font-size:clamp(38px, 3.6vw, 60px); }
.display2 { margin:0; font:600 clamp(26px, 2.3vw, 34px)/1 var(--display); letter-spacing:-.015em; }
.display3 { margin:0; font:600 22px/1.1 var(--display); }
.lead { margin:0; max-width:720px; color:var(--text2); font-size:16px; line-height:1.5; }
.secondary { color:var(--text2); }
.count { color:var(--text2); font-size:13px; font-variant-numeric:tabular-nums; }
.spacer { flex:1; }
mark { background:rgba(17,17,17,.08); color:inherit; font-weight:600; border-radius:3px; padding:0 2px; }

/* glass: standard, elevated, dark (dark only for the main action) */
.glass { background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-border); box-shadow:var(--rim), var(--sh-md); }
.glass-el { background:var(--glass-el); -webkit-backdrop-filter:var(--blur-el); backdrop-filter:var(--blur-el); border:1px solid var(--glass-border); box-shadow:var(--rim), var(--sh-lg); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px; border-radius:999px; font-weight:600; text-decoration:none; white-space:nowrap;
       transition:background var(--base) var(--ease), transform var(--fast) var(--ease); }
.btn.dark { background:var(--glass-dark); color:#fff; -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--sh-sm); }
.btn.dark:hover { background:#111; }
.btn.glass:hover { background:rgba(255,255,255,.75); }
.btn:active { transform:scale(.98); }
.btn[disabled], .btn[aria-disabled=true] { opacity:.45; pointer-events:none; }

/* ── layout: one vertical glass menu (brand, sections, agent, subjects, filters, plans) + content ── */
.layout { display:grid; grid-template-columns:288px minmax(0, 1fr); gap:28px; max-width:1660px; margin:0 auto; padding:16px 24px 48px; }
.side { position:sticky; top:16px; align-self:start; display:flex; flex-direction:column; height:calc(100vh - 32px); overflow:hidden; border-radius:var(--r-lg); }
.sideHead { display:flex; flex-direction:column; gap:22px; padding:26px 10px 14px; }
.sideScroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:16px 10px; scrollbar-width:thin; scrollbar-color:rgba(17,17,17,.15) transparent;
              -webkit-mask-image:linear-gradient(transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image:linear-gradient(transparent, #000 14px, #000 calc(100% - 14px), transparent); }   /* no frame: rows fade at the edges instead of being cut */
.brand { display:flex; align-items:center; gap:10px; padding:0 10px; text-decoration:none; }
.scope { padding:6px 10px 0; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* always one line: the menu below never moves */
.sideHead .brand { justify-content:center; } .sideHead .scope { text-align:center; }
.brand span { font:600 22px/1 var(--display); white-space:nowrap; }   /* the logo is the name alone */
/* sections: a segmented slider — the name, and under it a quiet line «icon + number of books»; the white thumb slides to the chosen one */
.kinds { position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); padding:3px; border-radius:14px; background:rgba(17,17,17,.045); }
.kinds .thumb { position:absolute; top:3px; bottom:3px; left:3px; width:calc((100% - 6px) / 3); border-radius:11px; background:#fff; box-shadow:var(--sh-sm);
                transform:translateX(calc(var(--i, 0) * 100%)); transition:transform var(--pill) var(--ease), opacity var(--base); }
.kinds button { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; padding:7px 0 6px;
                color:var(--text2); font-size:12px; font-weight:500; white-space:nowrap; transition:color var(--base), scale var(--fast) var(--ease); }
.kinds .meta { display:flex; align-items:center; gap:4px; color:var(--text3); font-size:10.5px; font-weight:400; line-height:1.2; font-variant-numeric:tabular-nums; }
.kinds .meta .ti { font-size:12.5px; color:var(--icon); }   /* one icon colour in every state */
.kinds button:hover, .kinds button[aria-current=true] { color:var(--text); }
.plans-view .kinds .thumb { opacity:0; }
.plans-view .kinds button[aria-current=true] { color:var(--text2); font-weight:500; }
/* top right, floating over the page: plans, donation and the agent (on phones they live in the top bar) */
.topbar { position:fixed; top:33px; right:max(24px, (100vw - 1660px) / 2 + 24px); z-index:30; display:flex; align-items:center; gap:8px; pointer-events:none; }
.topbar > * { pointer-events:auto; }   /* the bar's own box lets clicks through: once scrolled, the stuck toolbar lies under the faded links */
.toplinks { display:flex; align-items:center; gap:4px; transition:opacity var(--base) var(--ease); }
body.scrolled .toplinks { opacity:0; pointer-events:none; }   /* frameless, they would lie on the books: they step aside while the page is scrolled */
.navlink { position:relative; display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 11px; color:var(--text2); font-weight:500; text-decoration:none; white-space:nowrap; transition:color var(--fast), scale var(--fast) var(--ease); }
.navlink .ti { color:var(--icon); }
.navlink:hover { color:var(--text); }
.navlink[aria-current=page] { color:var(--text); font-weight:600; }
.toplinks { position:relative; }
.navdot { position:absolute; left:0; bottom:-3px; width:6px; height:6px; border-radius:50%; background:var(--red); opacity:0; pointer-events:none; transition:opacity var(--fast); }   /* 9px under the name; hops between the links: app.js */
.topAgent { transition:opacity var(--base) var(--ease), transform var(--base) var(--ease), background var(--base); }
body.chat-open .topAgent { opacity:0; transform:scale(.92); pointer-events:none; }   /* the chat is open: its button steps away */
.chatBtn .ti { transition:rotate var(--slow) var(--ease), scale var(--slow) var(--ease); }
@media (hover:hover) { .chatBtn:hover .ti { rotate:18deg; scale:1.12; } }   /* the agent's sparkles turn */
a.ibtn { text-decoration:none; }
/* collapsible groups: subjects, filters */
.grp + .grp { margin-top:24px; }
#subjects { display:flex; flex-direction:column; gap:2px; }
.grp summary { display:flex; align-items:center; padding:6px 12px 10px; font-size:13px; font-weight:600; list-style:none; cursor:pointer; }
.grp summary::-webkit-details-marker { display:none; }
.grp summary .ti { margin-left:auto; font-size:14px; transition:transform var(--base) var(--ease); }
.grp:not([open]) summary .ti { transform:rotate(-90deg); }
.sb-row { display:flex; align-items:center; gap:11px; width:100%; min-height:38px; padding:6px 14px 6px 12px; border-radius:999px; text-align:left; font-size:14px; line-height:18px;
          transition:background var(--fast) var(--ease), box-shadow var(--fast) var(--ease), scale var(--fast) var(--ease); }
.sb-row .ti { flex:none; width:20px; font-size:18px; text-align:center; color:var(--icon); }  /* one icon colour in every state */
.sb-row .n { flex:none; margin-left:auto; padding-left:8px; color:var(--text2); font-size:12px; font-variant-numeric:tabular-nums; }
a.sb-row { color:inherit; text-decoration:none; }   /* rows that are links look like the others */
.sb-row:hover { background:rgba(255,255,255,.5); }
.sb-row[aria-current=true] { background:rgba(255,255,255,.92); box-shadow:var(--sh-sm); font-weight:600; }

/* ── hero: micro label, huge title, search pill, examples ── */
.hero { padding:96px 0 4px; }   /* clear air under the top-right buttons */
.heroText { display:flex; flex-direction:column; align-items:center; gap:16px; max-width:680px; margin:0 auto; text-align:center; }   /* centred in the content column */
.search { display:flex; align-items:center; gap:12px; width:100%; height:52px; padding:0 0 0 2px; border-bottom:1px solid rgba(17,17,17,.16); position:relative; }   /* no frame: a hairline under the field */
.search > .ti { font-size:18px; color:var(--text2); }
.search input { flex:1; min-width:0; height:100%; border:0; outline:none; background:none; font-size:15px; }
.search input::placeholder { color:#8F8C86; font-weight:400; }
.search::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--text); scale:0 1; transition:scale var(--slow) var(--ease); }
.search:focus-within::after { scale:1; }   /* focus: the line grows from the middle */
.search input:focus-visible { outline:none; }
/* the field's clear button: a cross in the search icon's grey instead of the browser's blue one */
input[type=search]::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; width:16px; height:16px; cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676767' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat; }
.examples { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:4px 0; color:var(--text3); font-size:12.5px;
             line-height:18px; height:18px; overflow:hidden; align-content:center; align-content:safe center; }   /* a fixed line (two on phones): another set of examples never moves the page; one too long keeps its first line */
.examples button { line-height:inherit; color:var(--text2); transition:color var(--fast); }
.examples button:first-of-type { margin-left:10px; }
.examples button + button::before { content:"·"; margin:0 10px; color:var(--text3); }
.examples button:hover { color:var(--text); }

/* chips: 42px pills (sort and grouping above the list) */
.chip { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:999px; font-weight:500; white-space:nowrap;
        background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-border); box-shadow:var(--rim), var(--sh-sm);
        transition:background var(--base) var(--ease), color var(--base) var(--ease), scale var(--fast) var(--ease); }
.chip:hover { background:rgba(255,255,255,.75); }
.chip .ti { font-size:16px; color:var(--text2); }
.chip .v { max-width:200px; overflow:hidden; text-overflow:ellipsis; }
/* filters in the menu: rows like the subjects, label on the left, value on the right; a set filter = 10% red */
.filters { display:flex; flex-direction:column; gap:2px; padding:6px; border-radius:var(--r-md);   /* the one light frame in the menu */
           background:rgba(255,255,255,.42); border:1px solid var(--glass-border); box-shadow:var(--rim), 0 1px 2px rgba(20,20,20,.03); }
.filters .frow { width:100%; min-height:38px; padding:6px 14px 6px 12px; border-radius:999px; font-size:14px; text-align:left; cursor:pointer;
                transition:background var(--fast) var(--ease), scale var(--fast) var(--ease); }
.filters .frow + .frow::before { display:none; }
.filters .frow > .ti { flex:none; width:20px; font-size:18px; text-align:center; color:var(--icon); }
.filters .k { flex:none; white-space:nowrap; }   /* the name keeps its line and its width */
.filters .v { flex:1; min-width:0; overflow:hidden; color:var(--text2); text-align:right; text-overflow:ellipsis; white-space:nowrap; }   /* a long value shortens with «…» */
.filters .frow > .ti-selector { width:auto; font-size:14px; color:var(--text3); }
.filters button.frow:hover, .filters .years:hover { background:rgba(255,255,255,.5); }
.filters .frow.on { background:var(--red-soft); }
/* a set filter clears on its own: its chevron gives way to a × (Delete or Backspace on the row does the same) */
.filters .frow > .fclear { display:none; width:auto; margin:-6px -8px -6px 0; padding:6px; border-radius:50%; font-size:14px; color:var(--red-hover); cursor:pointer; transition:background var(--fast); }
.filters .frow > .fclear:hover { background:rgba(227,49,39,.12); }
.filters .frow.on > .ti-selector { display:none; } .filters .frow.on > .fclear { display:block; }
.filters .frow.on .v, .filters .years.on input { color:var(--red-hover); font-weight:600; }
.filters .years { cursor:text; }
.filters .years .k { flex:1; }   /* the years stay at the right, as the other values */
.filters .years input { width:44px; padding:0; border:0; outline:none; background:none; color:var(--text2); text-align:center; font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.filters .years input::-webkit-inner-spin-button { -webkit-appearance:none; }
.filters .years input::placeholder { color:var(--text3); }
.linkbtn { margin:8px 12px 4px; color:var(--text2); font-size:13px; text-decoration:underline; text-decoration-color:rgba(17,17,17,.25); text-underline-offset:3px; }
.linkbtn:hover { color:var(--red-hover); }
#reset { display:block; margin:10px auto 4px; }   /* under the filters, in the middle */
.mbar, .mbar .mfilter { display:none; }   /* the filter capsule: phones only */
:root { --cb:42px; }   /* a button inside a glass capsule; the capsule adds 4px all round and its 1px edge */

.sechead { display:flex; justify-content:center; align-items:baseline; gap:10px; margin:36px 0 14px; }
/* list head: no title — the number of books, then sorting, grouping and the view; one row from the left edge */
.listhead { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:10px; margin:44px 0 28px; }
.listhead { position:sticky; top:var(--lh-top); z-index:20; }   /* the toolbar stays while the books scroll under it */
.listhead .chip, .listhead .seg { height:40px; }   /* the «ИИ-Агент» button's height (the count: its own rule below) */
.listhead #count { display:inline-flex; align-items:center; height:40px; margin:0 6px 0 -14px; padding:0 14px; border-radius:999px; border:1px solid transparent; font-size:14px; font-variant-numeric:tabular-nums;
                   transition:background var(--base), border-color var(--base), box-shadow var(--base); }
body.lh-stuck #count { border-color:var(--glass-border); box-shadow:var(--rim), var(--sh-sm); }
/* floating over the covers: frosted almost opaque, so their colours don't bleed through and the text stays readable */
body.lh-stuck #count, body.lh-stuck .listhead .chip, body.lh-stuck .listhead .seg, body.scrolled .topAgent {
  background:var(--glass-float); -webkit-backdrop-filter:var(--blur-float); backdrop-filter:var(--blur-float); }
body.lh-stuck .listhead .chip:hover, body.scrolled .topAgent:hover { background:#fff; }
.seg { position:relative; isolation:isolate; display:inline-flex; gap:2px; height:36px; padding:3px; border-radius:999px; background:rgba(17,17,17,.045); }   /* flat track, white thumb — like the sections slider */
.seg button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:36px; padding:0 10px; border-radius:999px; color:var(--text2); font-weight:500;
              transition:background var(--base) var(--ease), color var(--base), scale var(--fast) var(--ease); }
.seg button:hover { color:var(--text); }
.seg button[aria-pressed=true], .seg button[aria-selected=true] { background:#fff; color:var(--text); box-shadow:var(--sh-sm); }
/* the white thumb slides from one choice to the next, as in the sections slider (app.js puts it under the chosen button) */
.sthumb { position:absolute; left:0; top:0; z-index:-1; border-radius:999px; background:#fff; box-shadow:var(--sh-sm); pointer-events:none; }
.sthumb.on { transition:translate var(--pill) var(--ease), width var(--pill) var(--ease); }
.seg:has(.sthumb.on) button[aria-pressed=true], .seg:has(.sthumb.on) button[aria-selected=true] { background:none; box-shadow:none; }

/* book cards: calm covers */
.gridv { display:grid; grid-template-columns:repeat(auto-fill, minmax(124px, 1fr)); gap:36px 22px; align-content:start; }   /* compact covers, plenty of air */
.book { display:flex; flex-direction:column; text-align:center; border-radius:var(--r-sm); color:inherit; text-decoration:none; }
.book .cover { position:relative; aspect-ratio:2/3; border-radius:var(--r-sm); overflow:hidden; background:var(--paper);
               box-shadow:0 1px 2px rgba(20,20,20,.08), 0 10px 26px rgba(20,20,20,.08); transition:transform var(--base) var(--ease), box-shadow var(--base) var(--ease), scale var(--fast) var(--ease); }
.book:hover .cover { transform:translateY(-3px) scale(1.005); box-shadow:0 2px 4px rgba(20,20,20,.08), 0 18px 40px rgba(20,20,20,.14); }
.book.below { opacity:0; }   /* off screen until it scrolls in, then it rises (app.js) */
.book.rise { animation:rise .6s var(--ease) backwards; }
.cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cover .ph { position:absolute; inset:0; display:grid; place-items:center; color:var(--text3); }
.cover .ph .ti { font-size:34px; }
.book .t { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:11px; font-weight:600; font-size:12.5px; line-height:1.3; }
.book .m { margin-top:4px; color:var(--text2); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.book .m b, .yr { color:var(--text); font-weight:600; }
/* the topic search's skeleton (app.js): six result cards while /api/topic answers */
.tsk { display:flex; gap:16px; padding:12px; pointer-events:none; animation:skel 1.1s ease-in-out infinite alternate; }
.tsk b, .tsk s { display:block; height:9px; border-radius:6px; background:var(--skel); }
.tsk b { flex:none; width:104px; height:auto; aspect-ratio:3/4; border-radius:var(--r-xs); }
.tsk span { flex:1; } .tsk s { width:94%; margin-top:8px; } .tsk s:first-child { width:30%; height:7px; margin-top:4px; }
.tsk s:nth-child(2) { width:72%; height:14px; margin:10px 0 6px; } .tsk s:last-child { width:52%; }
/* loading: from the first paint until app.js has drawn the catalog (a script in <head> sets the class, so a page read without scripts stays
   plain). Nothing moves: every element keeps its place and size and only its words are hidden, while it stands as a soft shape — headings,
   labels, links and rows as rounded bars, one per line; buttons, the search, the menu's blocks and the covers in their own outline —
   breathing like the topic cards. The covers and the subject rows are placeholders built like the real ones (index.html, build_pages).
   For another language the words wait hidden (.i18n) and the skeleton shows all the same */
.loading :is(.brand span, #scopeLabel, .sideScroll summary, #largeTitle, .examples, .toplinks .navlink, .sb-row.sk, .book.sk .t, .book.sk .m,
             .kinds, .filters, .search, .listhead #count, .listhead .chip, .listhead .seg, .topAgent, .mbar .ibtn, .mfilter, .book.sk .cover) {
  visibility:visible; color:transparent !important; border-color:transparent !important; box-shadow:none !important; text-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; pointer-events:none; animation:skel 1.1s ease-in-out infinite alternate; }
.loading :is(.brand span, #scopeLabel, #largeTitle, .examples, .book.sk .t, .book.sk .m) { background:var(--skel-lines) !important; }
.loading :is(.sideScroll summary, .toplinks .navlink, .sb-row.sk) { background:var(--skel-bar) !important; }
.loading :is(.kinds, .filters, .search, .listhead #count, .listhead .chip, .listhead .seg, .topAgent, .mbar .ibtn, .mfilter, .book.sk .cover) { background:var(--skel) !important; }
.loading :is(.brand span, #scopeLabel, .sideScroll summary, #largeTitle, .examples, .toplinks .navlink, .sb-row.sk, .book.sk .t, .book.sk .m,
             .kinds, .filters, .search, .listhead #count, .listhead .chip, .listhead .seg, .topAgent, .mbar .ibtn, .mfilter) *, .loading .search::after { visibility:hidden; }
.loading :is(#scopeLabel, .sideScroll summary) { width:fit-content; }   /* the bar as wide as the words (they stay where they were: centred, at the start) */
.loading #scopeLabel { margin-inline:auto; }
.loading .search { border-radius:999px; }
#grid:has(> .book:not(.sk)) > .sk { display:none; }   /* a static page came with its own covers */
@keyframes skel { from { opacity:.4; } }
.gridv > .section { grid-column:1/-1; display:flex; justify-content:center; align-items:baseline; gap:10px; margin:20px 0 -10px; }
.gridv > .section:first-child { margin-top:0; }
/* books taken from a second site to fill gaps */
.addedBadge { position:absolute; left:8px; top:8px; z-index:2; display:inline-flex; align-items:center; gap:4px; padding:3px 9px 3px 6px; border-radius:999px;
              background:var(--glass-dark); color:#fff; font-size:11px; font-weight:600; line-height:16px; -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); }
.addedBadge .ti { font-size:13px; }
.addedBadge.inline { position:static; vertical-align:1px; margin-right:6px; background:var(--hover); color:var(--text2); -webkit-backdrop-filter:none; backdrop-filter:none; }   /* in the list: a quiet tag */
/* list view: no frame — rows lie on the paper, one line each, hairlines start at the title; the row under the pointer gets a soft highlight */
.table { margin:0 -14px 24px; container-type:inline-size; }   /* rows reach 14px past the column, so their text lines up with the toolbar and the covers */
.trow { position:relative; display:grid; grid-template-columns:32px minmax(0, 3fr) minmax(0, 1.4fr) minmax(0, 1.1fr) 70px 52px minmax(0, 1fr) 80px;
        align-items:center; gap:14px; min-height:56px; width:100%; padding:6px 14px; border-radius:var(--r-sm); text-align:left; transition:background var(--fast); }
@container (max-width:860px) {   /* a narrow column: the publisher and the edition step out, the rest keep their room (phones: app.css below) */
  .trow { grid-template-columns:32px minmax(0, 3fr) minmax(0, 1.4fr) minmax(0, 1.1fr) 70px 52px; } .trow > :nth-child(n+7) { display:none; } }
.trow + .trow::before { content:""; position:absolute; top:0; left:60px; right:14px; border-top:1px solid var(--line); }
.trow.item:hover { background:rgba(255,255,255,.6); }
.trow.item:hover::before, .trow.item:hover + .trow::before { opacity:0; }   /* the highlight takes the place of the lines around it */
.trow > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trow .tt { font-weight:500; }
.trow .c2 { color:var(--text2); font-size:13px; }
.trow .num-c { text-align:right; font-variant-numeric:tabular-nums; }
.trow .yr { font-weight:500; }
.thumbc { position:relative; width:32px; height:48px; border-radius:4px; overflow:hidden; background:var(--paper); box-shadow:0 1px 2px rgba(20,20,20,.12); }
.thumbc .ph .ti { font-size:14px; }
.thead { min-height:40px; border-radius:0; font:500 12px/1 var(--ui); color:var(--text2); }   /* scrolls away with the list */
.thead button { display:inline-flex; align-items:center; gap:4px; font:inherit; letter-spacing:inherit; text-transform:inherit; }
.thead button:hover, .thead .on { color:var(--text); }
.thead .ti { font-size:13px; }
.gtitle { display:flex; justify-content:center; align-items:baseline; gap:10px; margin:10px 2px 12px; }

/* topic search: where a topic is taught, one page per textbook */
.tophead { display:flex; flex-direction:column; align-items:center; gap:10px; margin:36px 0 16px; text-align:center; }
.agentbar { display:flex; align-items:center; gap:18px; margin:0 0 8px; padding:16px 16px 16px 22px; border-radius:var(--r-lg); }
.agentbar > .ti { font-size:26px; color:var(--red); }
.agentbar .txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.agentbar .txt b { font-size:15px; font-weight:600; }
.agentbar .txt span { color:var(--text2); font-size:13px; }
.plan { flex:none; padding:5px 10px; border-radius:999px; border:1px solid var(--line); font:600 12px/1 var(--ui); color:var(--text2); }
.tgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:16px; }
.tcard { position:relative; display:flex; gap:16px; padding:12px; border-radius:var(--r-lg); text-align:left; transition:background var(--base), scale var(--fast) var(--ease); }   /* no frame: the page and the text lie on the paper */
.tcard:hover { background:rgba(255,255,255,.6); }
.tpage { position:relative; flex:none; width:104px; aspect-ratio:3/4; border-radius:var(--r-xs); overflow:hidden; background:var(--paper); box-shadow:0 1px 3px rgba(20,20,20,.14); }
.tpage img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.tpage .pg { position:absolute; left:6px; bottom:6px; padding:3px 8px; border-radius:999px; background:var(--glass-dark); color:#fff; font-size:11px; font-weight:600; line-height:1.2; }
.tbody { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; padding-top:2px; }
.tbody .micro { font-size:12px; }
.th, .tsn, .tbook { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.th { -webkit-line-clamp:2; font-size:15px; font-weight:600; line-height:1.28; }
.tsn { -webkit-line-clamp:3; color:var(--text2); font-size:13px; line-height:1.42; }
.tbook { -webkit-line-clamp:2; margin-top:auto; color:var(--text2); font-size:12px; line-height:1.35; }

/* app banner, plans, donation */
.apps { position:relative; display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); align-items:center; gap:28px; margin:56px 0 0; padding:40px 44px; border-radius:var(--r-xl); overflow:hidden; }
.appsText { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.appsText p { margin:0; max-width:460px; color:var(--text2); font-size:15px; }
.platforms { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.pf { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 16px; border-radius:999px; background:rgba(255,255,255,.6); border:1px solid var(--line); font-size:13px; font-weight:600; }
.pf .tag { padding:2px 8px; font-size:11px; }   /* the same «скоро» chip as everywhere, a size smaller inside a pill */
.appsText > .tag { align-self:flex-start; }
.appsArt { position:relative; height:240px; }
.appsArt .sun { position:absolute; right:8%; top:-4%; width:42%; max-width:170px; aspect-ratio:1; border-radius:50%; background:var(--red); }
.appsArt .orbit { position:absolute; left:0; right:0; top:16%; height:78%; border:1.5px solid rgba(17,17,17,.45); border-radius:50%; transform:rotate(-12deg); }
.device { position:absolute; z-index:1; bottom:0; padding:7px; background:#141414; box-shadow:var(--sh-lg); }
.device img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; filter:grayscale(1) contrast(1.05); background:#ddd; }
.tablet { left:10%; width:170px; height:226px; border-radius:20px; transform:rotate(-4deg); }
.tablet img { border-radius:13px; }
.phone { left:calc(10% + 150px); z-index:2; width:96px; height:196px; padding:5px; border-radius:22px; transform:rotate(5deg); }
.phone img { border-radius:17px; }
.pagehero { display:flex; flex-direction:column; align-items:center; gap:16px; padding:96px 0 8px; text-align:center; }
.plangrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:18px; max-width:880px; margin:36px auto 14px; }
.plancard { position:relative; display:flex; flex-direction:column; gap:18px; padding:28px; border-radius:var(--r-lg); }
.plancard .num { font:600 13px/1 var(--ui); color:var(--text2); }
.price { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; }
.price b { font:600 clamp(44px, 4vw, 60px)/.9 var(--display); letter-spacing:-.02em; white-space:nowrap; }
.price span { color:var(--text2); }
.plancard ul { display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; }
.plancard li { display:flex; gap:10px; line-height:1.4; }
.plancard li .ti { flex:none; margin-top:1px; }
.plancard .btn { margin-top:auto; }
.fine { color:var(--text2); font-size:12px; }
.donate { position:relative; display:grid; grid-template-columns:240px minmax(0, 1fr); align-items:center; gap:40px; margin:36px 0 0; padding:40px 44px; border-radius:var(--r-xl);
          overflow:hidden; }
.donateArt { position:relative; height:220px; }
.donateArt .heart { position:absolute; left:14%; top:14%; width:72%; overflow:visible; }
/* the heart is put together from figures — a square on its corner and two circles; where they overlap the red deepens,
   and when the page opens they fly in and meet */
.donateArt .heart * { fill:var(--red); mix-blend-mode:multiply; transform-box:fill-box; transform-origin:center; animation:.9s var(--ease) both; }
.donateArt .hsq { animation-name:hsqIn; }
.donateArt .hl { animation-name:hlIn; animation-delay:.12s; }
.donateArt .hr { animation-name:hrIn; animation-delay:.22s; }
@keyframes hsqIn { from { opacity:0; translate:0 26px; rotate:-45deg; } }
@keyframes hlIn { from { opacity:0; translate:-36px -14px; } }
@keyframes hrIn { from { opacity:0; translate:36px -14px; } }
.donateArt .orbit { position:absolute; inset:18% -4% 8%; border:1.5px solid rgba(17,17,17,.45); border-radius:50%; transform:rotate(-20deg); }
.donate .body { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.donate p { margin:0; max-width:560px; color:var(--text2); font-size:15px; }
.donate .row { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
main { display:flex; flex-direction:column; min-width:0; min-height:calc(100vh - 84px); }   /* the footer sits at the bottom even on the short home page */
#catalog, #plans, #donatePage, #profilePage, #aboutPage { padding-bottom:72px; }
#plans, #donatePage, #profilePage, #signupPage, #aboutPage { animation:rise var(--slow) var(--ease); }   /* Тарифы, Поддержать: the tab comes in rising */
.foot { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:auto; padding:18px 0 2px; border-top:1px solid var(--line); color:var(--text2); font-size:12.5px; text-align:center; }   /* centred: the line about the library, the links under it, the owl peeking in the middle */
.foot b { color:var(--text); font-weight:600; }
.flinks { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 20px; }
.foot a { color:var(--text2); text-decoration:none; }
.foot a:hover { color:var(--text); }
/* back to the top: a glass button in the bottom-right corner once the page has scrolled a screen; near the end it rides above
   the footer and its mascot */
button.toTop { position:fixed; right:max(24px, env(safe-area-inset-right)); bottom:calc(24px + env(safe-area-inset-bottom)); z-index:50; display:grid; place-items:center;
         width:calc(var(--cb) + 10px); height:calc(var(--cb) + 10px); border-radius:50%; color:var(--text); background:var(--glass-float); -webkit-backdrop-filter:var(--blur-float); backdrop-filter:var(--blur-float);
         border:1px solid var(--glass-border); box-shadow:var(--rim), var(--sh-md); opacity:0; translate:0 12px; pointer-events:none;
         transition:opacity var(--base) var(--ease), translate var(--base) var(--ease), background var(--fast), scale var(--fast) var(--ease); }
body.far .toTop { opacity:1; translate:0 0; pointer-events:auto; }
body.chat-open .toTop { opacity:0; pointer-events:none; }
.toTop:hover { background:#fff; }
.toTop:active { scale:.94; }
.toTop .ti { font-size:20px; }
@media (max-width:640px) { .toTop { right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); } }
.credit { white-space:nowrap; }   /* one piece with the line about the library */
/* «придумано людьми, собрано нейросетью»: the last word now and then turns — through falling code — into «агентами»
   in the Matrix's green (a deeper green than the film's, so it reads on paper), with the agents' dark glasses, and back */
.morph { display:inline-block; white-space:nowrap; vertical-align:bottom; }
.morph.matrix { color:#1FAE4F; font:500 12.5px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-shadow:0 0 1px rgba(31,174,79,.5), 0 0 8px rgba(34,197,94,.5); }
.shades { display:inline-block; margin-left:5px; font-size:15px; vertical-align:-2px; color:#1FAE4F; filter:drop-shadow(0 0 3px rgba(34,197,94,.7));
          opacity:0; scale:.5; transition:opacity var(--base), scale var(--base) var(--ease); }
.credit.agents .shades { opacity:1; scale:1; }
/* the footer's easter egg: the mascot peeks over the line; a tap and it says something */
.peek { position:absolute; right:0; left:0; bottom:100%; margin:0 auto; width:48px; height:30px; overflow:hidden; cursor:pointer; }
.peek .mascot { width:48px; height:48px; translate:0 3px; transition:translate var(--base) var(--ease); }
.peek:hover .mascot { translate:0 -1px; }
.say { position:absolute; right:0; left:0; bottom:calc(100% + 40px); z-index:5; width:max-content; max-width:270px; margin:0 auto; padding:10px 14px; border-radius:16px; background:#fff; box-shadow:var(--sh-md);
       color:var(--text); font-size:13px; line-height:1.45; animation:rise var(--base) var(--ease); }
.say .five { display:inline-grid; place-items:center; width:26px; height:26px; margin-left:6px; vertical-align:-7px; border:2px solid var(--red); border-radius:50%;
             color:var(--red); font:700 16px/1 var(--display); font-variant-numeric:lining-nums; rotate:-12deg; }   /* a teacher's «5» in red ink */

/* menus */
.menu { position:fixed; z-index:100; min-width:220px; max-width:340px; max-height:min(440px, 70vh); overflow:auto; padding:6px; border-radius:var(--r-md); animation:pop var(--fast) var(--ease);
        background:var(--glass-float); -webkit-backdrop-filter:var(--blur-float); backdrop-filter:var(--blur-float); }   /* opens over covers too */
@keyframes pop { from { opacity:0; transform:translateY(-4px) scale(.98); } }
.menu button { display:flex; align-items:center; gap:8px; width:100%; min-height:34px; padding:0 14px 0 10px; border-radius:999px; text-align:left; white-space:nowrap; }
.menu button .ti { width:16px; font-size:15px; color:var(--red); visibility:hidden; }
.menu button[aria-checked=true] { font-weight:600; }
.menu button[aria-checked=true] .ti { visibility:visible; }
.menu button:hover, .menu button:focus-visible { background:var(--hover); outline:none; }
.menu hr { margin:6px 10px; border:0; border-top:1px solid var(--line); }
.menu .mhead { padding:8px 12px 4px; color:var(--text2); font-size:12px; }   /* a section's name in the phone bar's filter */
/* in the phone and tablet sheet a list opens in place, under its row — no menu over the menu */
.menu.inline { position:static; z-index:auto; min-width:0; max-width:none; max-height:none; margin:2px 0 6px; padding:4px; background:rgba(255,255,255,.55);
               -webkit-backdrop-filter:none; backdrop-filter:none; border:1px solid var(--glass-border); box-shadow:var(--rim); }

/* chat: the topic-search agent and the teacher, one elevated glass panel */
.chat { position:fixed; top:14px; right:14px; bottom:14px; z-index:80; width:min(460px, calc(100vw - 28px)); display:flex; flex-direction:column; overflow:hidden;
        border-radius:var(--r-xl); animation:slidein var(--slow) var(--ease); background:var(--glass-float); -webkit-backdrop-filter:var(--blur-float); backdrop-filter:var(--blur-float); }   /* floats over the covers */
@keyframes slidein { from { opacity:0; transform:translateX(24px); } }
.chead { display:flex; align-items:center; gap:4px; padding:14px 14px 10px; }
.chat .seg { height:calc(var(--cb) + 10px); padding:5px; gap:4px; }   /* as tall as the bars' capsules, the thumb 5px in, like their buttons */
.chat .seg button { height:var(--cb); padding:0 16px; }
.chead .ibtn { width:var(--cb); height:var(--cb); }
@media (min-width:1024px) {   /* desktop: the chat's head in the size of the catalog's toolbar pills and «ИИ-Агент» — 40 */
  .chat .seg { height:40px; padding:3px; gap:2px; } .chat .seg button { height:34px; padding:0 14px; } .chead .ibtn { width:40px; height:40px; }
}
.ibtn { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:var(--text2); transition:background var(--fast), color var(--fast), scale var(--fast) var(--ease); }
.ibtn:hover { background:var(--hover); color:var(--text); }
/* hints for icon-only buttons: their label in a small dark capsule under the button (above it at the bottom of a screen), after a short pause */
.tip { position:relative; }
.tip::after { content:attr(aria-label); position:absolute; top:calc(100% + 6px); left:50%; z-index:120; translate:-50% 0; padding:5px 10px; border-radius:999px;
              background:var(--glass-dark); color:#fff; font:500 12px/1.2 var(--ui); letter-spacing:0; text-transform:none; white-space:nowrap;
              -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); opacity:0; pointer-events:none; transition:opacity var(--fast); }
.tip.up::after { top:auto; bottom:calc(100% + 6px); }
.tip.end::after { left:auto; right:0; translate:0 0; }
@media (hover:hover) { .tip:hover::after { opacity:1; transition-delay:.45s; } }
.tip:focus-visible::after { opacity:1; }
#tHist[aria-pressed=true] { background:#fff; color:var(--text); box-shadow:var(--sh-sm); }
/* chat history: past conversations by day */
.hist { display:flex; flex-direction:column; gap:2px; }
.hist > .micro { margin:2px 8px 4px; }
.hday { margin:14px 12px 4px; color:var(--text2); font:600 12px/1.2 var(--ui); }
.hitem { display:flex; align-items:center; border-radius:999px; transition:background var(--fast); }
.hitem:hover, .hitem.cur { background:rgba(255,255,255,.7); }
.hopen { flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:9px 6px 9px 12px; text-align:left; }
.hopen .ti { flex:none; color:var(--icon); }
.hopen .ht { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hitem.cur .ht { font-weight:600; }
.hopen .hm { flex:none; color:var(--text3); font-size:12px; font-variant-numeric:tabular-nums; }
.hdel { flex:none; width:32px; height:32px; margin-right:4px; opacity:0; }
.hitem:hover .hdel, .hdel:focus-visible { opacity:1; }
@media (hover:none) { .hdel { opacity:1; } }
.hempty { margin:6px 8px; line-height:1.5; }
.tlog { flex:1; overflow:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:16px; padding:8px 18px 18px; }
.bot { display:flex; flex-direction:column; gap:10px; }
.msg { max-width:100%; line-height:1.5; overflow-wrap:anywhere; }
.msg.user { align-self:flex-end; max-width:88%; padding:10px 14px; border-radius:18px 18px 6px 18px; background:#fff; box-shadow:var(--sh-sm); white-space:pre-wrap; }
.msg p { margin:0 0 8px; } .msg p:last-child { margin-bottom:0; }
.msg h4 { margin:12px 0 6px; font-size:15px; }
.msg ul, .msg ol { margin:0 0 8px; padding-left:20px; }
.msg code { padding:1px 5px; border-radius:5px; background:var(--hover); font:12.5px ui-monospace, SFMono-Regular, monospace; }
.msg a[href^="#book="] { padding:1px 7px; border-radius:7px; background:rgba(255,255,255,.75); box-shadow:inset 0 0 0 1px var(--line); text-decoration:none; white-space:nowrap; }
.msg a[href^="#book="]:hover { background:#fff; }
.err { color:var(--red-hover); }
.tstatus { display:flex; flex-direction:column; gap:3px; color:var(--text2); font-size:12px; }
.tstatus span::before { content:""; display:inline-block; width:5px; height:5px; margin:0 8px 2px 2px; border-radius:50%; background:var(--text3); }
.tstatus .live::before { background:var(--red); animation:blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity:.25; } }
.tintro { display:flex; flex-direction:column; gap:12px; padding-top:4px; color:var(--text2); line-height:1.5; }
.tintro p { margin:0; }
.suggest { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.suggest button { min-height:var(--cb); padding:8px 16px; border-radius:999px; background:rgba(255,255,255,.7); border:1px solid var(--line); color:var(--text); text-align:left; transition:background var(--fast), scale var(--fast) var(--ease); }
.suggest button:hover { background:#fff; }
.tlist { display:flex; flex-direction:column; gap:10px; }
.tlist .tcard { gap:12px; padding:10px; border-radius:var(--r-md); background:rgba(255,255,255,.55); border:1px solid var(--glass-border); box-shadow:var(--rim), var(--sh-sm); }
.tlist .tpage { width:72px; }
.tlist .th { font-size:14px; }
.tlist .tsn { -webkit-line-clamp:2; }
.pstrip { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:thin; }
.pcard { flex:none; display:flex; flex-direction:column; gap:4px; width:132px; color:var(--text); text-decoration:none; font-size:12px; line-height:1.3; }
.pcard img { width:100%; aspect-ratio:3/4; margin-bottom:4px; object-fit:cover; object-position:top; border-radius:10px; background:var(--paper); box-shadow:var(--sh-sm); transition:transform var(--base) var(--ease), scale var(--fast) var(--ease); }
.pcard:hover img { transform:translateY(-2px); }
.pcard b { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:600; }
.pcard span { color:var(--text2); }
.tform { display:flex; align-items:flex-end; gap:8px; margin:0 14px 14px; padding:4px 4px 4px 18px; border-radius:26px; background:rgba(255,255,255,.82); border:1px solid var(--glass-border); box-shadow:var(--sh-sm);
         transition:background var(--base) var(--ease), border-color var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.tform:focus-within { background:#fff; border-color:rgba(17,17,17,.12); box-shadow:0 1px 2px rgba(20,20,20,.04), 0 12px 32px rgba(20,20,20,.10); }   /* focus: the field turns white and lifts a little — a soft shadow, no coloured ring */
.tform textarea { flex:1; min-width:0; max-height:160px; padding:calc((var(--cb) - 1.45em) / 2) 0; border:0; outline:none; resize:none; background:none; line-height:1.45; }
.tsend { flex:none; display:grid; place-items:center; width:var(--cb); height:var(--cb); border-radius:50%; background:var(--glass-dark); color:#fff;
         transition:background var(--base) var(--ease), color var(--base) var(--ease), scale var(--fast) var(--ease); }
.tsend:hover { background:#111; }
/* like the search button: quiet while the field is empty (the stop button of a running answer stays dark); on hover the arrow flies up and comes back from below */
.tform:has(textarea:placeholder-shown) .tsend:has(.ti-arrow-up) { background:rgba(17,17,17,.06); color:var(--text2); }
.tform:has(textarea:placeholder-shown) .tsend:has(.ti-arrow-up):hover { background:rgba(17,17,17,.1); }
@keyframes passup { 45% { translate:0 -10px; opacity:0; } 55% { translate:0 10px; opacity:0; } }
@media (hover:hover) { .tsend:hover .ti-arrow-up { animation:passup .6s var(--ease); } }

/* the cookie note: a small glass card in the corner; the mascot sits on its edge with a cookie */
.cookie { position:fixed; left:24px; bottom:24px; z-index:75; display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:min(340px, calc(100vw - 32px));
          padding:22px 22px 20px; border-radius:var(--r-lg); background:var(--glass-float); -webkit-backdrop-filter:var(--blur-float); backdrop-filter:var(--blur-float);
          border:1px solid var(--glass-border); box-shadow:var(--rim), var(--sh-lg); animation:rise var(--slow) var(--ease) backwards; }
.cookie b { padding-right:96px; font:600 22px/1.1 var(--display); }   /* clear of the owl */
.cookie p { margin:0 0 6px; color:var(--text2); font-size:13px; line-height:1.5; }
.btn.plain { background:none; border:0; box-shadow:none; color:var(--text2); transition:color var(--fast); }   /* «Отказаться»: no frame, just the word */
.btn.plain:hover { color:var(--text); }
.cookie.declined .bird { rotate:-9deg; }   /* «Отказаться»: the mascot hangs its head, then the card goes */
.cookie .mascot { position:absolute; right:18px; top:-74px; animation:owlin .7s .2s var(--ease) backwards; }
@keyframes owlin { from { opacity:0; translate:0 18px; scale:.9; } }
.cookie:hover .bird { rotate:-7deg; }   /* the mascot tilts its head */
.cookie.bitten .bitemark { scale:1; }   /* «Угощусь»: a bite out of the cookie, then the card goes */
.cookie:is(.bitten, .declined) { opacity:0; translate:0 14px; pointer-events:none; transition:opacity var(--base) .5s, translate var(--base) .5s var(--ease); }

/* ── reader: warm light room, glass capsules over the page ── */
#reader { position:fixed; inset:0; z-index:60; display:none; background:#E7E4DD; }
#reader.open { display:block; }
.rtop { position:absolute; top:calc(14px + env(safe-area-inset-top)); left:max(14px, env(safe-area-inset-left)); right:max(14px, env(safe-area-inset-right)); z-index:3; display:flex; align-items:center; gap:10px;
        transition:opacity var(--base), transform var(--base) var(--ease); }
.rtitle { flex:1; min-width:0; text-align:center; font-weight:600; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.capsule { display:flex; flex:none; align-items:center; gap:4px; padding:4px; border-radius:999px; }   /* the same 4px all round and between the buttons */
.capsule button { display:inline-flex; align-items:center; gap:6px; height:var(--cb); padding:0 13px; border-radius:999px; font-weight:500; transition:background var(--fast), scale var(--fast) var(--ease); }
.capsule button:hover { background:var(--hover); }
.capsule button[aria-pressed=true] { background:#fff; box-shadow:var(--sh-sm); }
.rbottom, .qnav, .zoomBar { position:absolute; left:50%; transform:translateX(-50%); z-index:3; display:flex; align-items:center; border-radius:999px;
                  transition:opacity var(--base), transform var(--base) var(--ease); }
.rbottom { bottom:calc(16px + env(safe-area-inset-bottom)); gap:14px; height:calc(var(--cb) + 10px); padding:0 20px; }   /* as tall as the bar's buttons */
.qnav, .zoomBar { bottom:calc(var(--cb) + 38px + env(safe-area-inset-bottom)); gap:4px; height:44px; padding:0 4px; white-space:nowrap; }
.qnav span { max-width:52vw; padding:0 6px; overflow:hidden; text-overflow:ellipsis; font-weight:500; }
.qnav button, .zoomBar button { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; transition:background var(--fast), scale var(--fast) var(--ease); }
.qnav button:hover, .zoomBar button:hover { background:var(--hover); }
.qnav button:disabled, .zoomBar button:disabled { opacity:.3; }
#reader.immersive .rtop { opacity:0; transform:translateY(-130%); pointer-events:none; }
#reader.immersive .rbottom, #reader.immersive .qnav, #reader.immersive .zoomBar { opacity:0; transform:translate(-50%, 160%); pointer-events:none; }
/* zoom: − 100% + over the slider, like the topic's pages (and over them when there is a topic); the stage leaves room for it */
.zoomBar span { min-width:52px; text-align:center; font-weight:500; font-variant-numeric:tabular-nums; }
#reader.has-q .zoomBar { bottom:calc(var(--cb) + 94px + env(safe-area-inset-bottom)); }
#reader.grid-view .zoomBar { display:none; }
#stage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:76px 24px 140px;
         user-select:none; touch-action:pan-y; transition:right var(--slow) var(--ease); }
#reader.has-q #stage { padding-bottom:188px; }
#reader.panel-open #stage { right:376px; }
/* zoomed (app.js): the page is laid out bigger and the stage scrolls it; auto margins centre it while it is smaller, and never clip it */
#stage.zoomed { justify-content:flex-start; align-items:flex-start; overflow:auto; touch-action:pan-x pan-y; cursor:grab; scrollbar-width:none; }
#stage.zoomed::-webkit-scrollbar { display:none; }
#stage.zoomed img { flex:none; margin:auto; max-width:none; max-height:none; }
#stage.grabbing { cursor:grabbing; }
#stage img { max-width:100%; max-height:100%; object-fit:contain; border-radius:3px; box-shadow:0 2px 6px rgba(20,20,20,.12), 0 24px 60px rgba(20,20,20,.18); }
.slider { -webkit-appearance:none; appearance:none; width:min(44vw, 380px); height:4px; border-radius:2px; cursor:pointer;
          background:linear-gradient(to right, #111 var(--p, 0%), rgba(17,17,17,.14) var(--p, 0%)); }
.slider::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(20,20,20,.25), 0 0 0 1px rgba(20,20,20,.06); }
.slider::-moz-range-thumb { width:24px; height:24px; border:0; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(20,20,20,.25); }
#pno { min-width:72px; text-align:right; font-variant-numeric:tabular-nums; font-weight:500; color:var(--text2); }
.panel { position:absolute; top:74px; right:14px; bottom:14px; z-index:2; width:360px; overflow:auto; padding:8px 12px 18px; border-radius:var(--r-lg); }
.panel h2 { margin:14px 6px; }
.panel .micro { margin:20px 6px 8px; }
.form { margin:0 0 14px; border-radius:var(--r-md); background:rgba(255,255,255,.6); border:1px solid var(--glass-border); box-shadow:var(--rim); }
.frow { position:relative; display:flex; align-items:center; gap:10px; min-height:42px; padding:8px 14px; color:var(--text); text-decoration:none; }
.frow + .frow::before { content:""; position:absolute; top:0; left:14px; right:14px; border-top:1px solid var(--line); }
.frow > span:first-child { flex:1; min-width:0; }
.panel .frow .v { max-width:60%; margin-left:auto; overflow:hidden; color:var(--text2); text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.panel button.frow { width:100%; text-align:left; }
.panel button.frow:hover, .panel a.frow:hover { background:rgba(255,255,255,.7); }
.panel .frow.toc { align-items:flex-start; }
.panel .frow.toc > span:first-child { flex:none; }   /* page number keeps its width; the headings take the rest */
.panel .frow.toc > span:last-child { flex:1; min-width:0; }
.panel .pg { min-width:28px; color:var(--text2); font-variant-numeric:tabular-nums; }
.panel .frow.cur { background:#fff; }
.panel .frow.cur .pg { color:var(--red-hover); font-weight:700; }
.panel .ch { font-weight:700; }
.panel .ocr { margin:0; padding:12px 14px; white-space:pre-wrap; font-size:13px; line-height:1.55; }
.search2 { display:flex; align-items:center; gap:8px; height:42px; margin:0 0 12px; padding:0 14px; border-radius:999px; background:rgba(255,255,255,.75); border:1px solid var(--line); color:var(--text2); }
.search2 input { flex:1; min-width:0; border:0; outline:none; background:none; color:var(--text); }
#pages { position:absolute; inset:0; z-index:1; display:none; overflow:auto; padding:80px 28px 90px; background:#E7E4DD;
         grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:24px 16px; align-content:start; }
#reader.grid-view #pages { display:grid; }
.thumb { display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--text2); font-size:11px; }
.thumb img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:6px; background:var(--paper); box-shadow:var(--sh-sm); }
.thumb.qhit img { box-shadow:0 0 0 2px rgba(227,49,39,.45), var(--sh-sm); }   /* pages that mention the topic */
.thumb.cur img { outline:2px solid var(--red); outline-offset:3px; }
.thumb.cur { color:var(--text); font-weight:600; }

@media (max-width:1020px) { .apps, .donate { grid-template-columns:1fr; } .donateArt { display:none; }
  .donate .body { align-items:center; text-align:center; } .donate .row { flex-direction:column; justify-content:center; } }   /* without the picture the card is centred */
/* phones: Apple-first; the vertical menu becomes a sheet behind the menu button */
/* tablets and phones: a bar on top, the menu becomes a sheet behind the menu button */
@media (max-width:1023px) {
  :root { --nav:calc(var(--cb) + 38px + env(safe-area-inset-top)); --lh-top:calc(var(--nav) + 8px); }   /* 14px above and below a capsule-sized button, like the reader's bar */
  .mbar { position:sticky; top:0; z-index:40; display:flex; justify-content:space-between; align-items:center; height:var(--nav);
          padding:env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
          isolation:isolate; }
  /* edge blur: the page under the bar is blurred most at the very top and clears towards the bar's lower edge — no line, no slab */
  .mbar::before { content:""; position:absolute; inset:0 0 -28px; z-index:-1; pointer-events:none;
                  background:linear-gradient(rgba(243,241,236,.82), rgba(243,241,236,.45) 62%, rgba(243,241,236,0));
                  -webkit-backdrop-filter:blur(16px) saturate(110%); backdrop-filter:blur(16px) saturate(110%);
                  -webkit-mask-image:linear-gradient(#000 50%, transparent); mask-image:linear-gradient(#000 50%, transparent); }
  .mside { display:flex; align-items:center; gap:2px; } .mside.end { justify-content:flex-end; }   /* equal sides: the name stays in the middle */
  /* the bar: the menu and the agent, round glass buttons (on phones the list's filter between them); the plans, the donation and the rest live in the menu sheet */
  .mbar .ibtn, .mfilter { width:calc(var(--cb) + 10px); height:calc(var(--cb) + 10px); color:var(--text); background:var(--glass-float); -webkit-backdrop-filter:var(--blur-float); backdrop-filter:var(--blur-float);
                border:1px solid var(--glass-border); box-shadow:var(--rim), var(--sh-sm); }
  .mbar .ibtn:hover { background:#fff; }
  .mbar .lbl, .rtop .lbl { display:none; }   /* both bars: icons in true circles, the same on phones and tablets */
  .mbar .ibtn:has(.lbl) { width:auto; aspect-ratio:1; padding:0; justify-content:center; }
  .rtop .capsule button { aspect-ratio:1; padding:0; justify-content:center; }
  .topbar { display:none; }
  .layout { display:block; padding:6px max(24px, env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
  .side { position:fixed; top:calc(14px + env(safe-area-inset-top)); left:max(14px, env(safe-area-inset-left)); bottom:calc(14px + env(safe-area-inset-bottom)); z-index:70;
          width:min(320px, calc(100vw - 40px)); height:auto; align-self:stretch;   /* fill between top and bottom: the desktop's align-self:start would size the sheet to its content */
          background:var(--glass-el); -webkit-backdrop-filter:var(--blur-el); backdrop-filter:var(--blur-el); border:1px solid var(--glass-border); box-shadow:var(--rim), var(--sh-lg); border-radius:var(--r-lg);
          transform:translateX(calc(-100% - 24px)); transition:transform var(--slow) var(--ease); }
  .side.open { transform:none; }
  .hero, .pagehero { min-height:0; padding-top:32px; }
  .display { font-size:clamp(44px, 7vw, 60px); } .display.long { font-size:clamp(36px, 5.5vw, 48px); }
  .search { height:56px; } .search input { font-size:16px; }
  .gridv { grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); gap:32px 18px; }
  .plangrid { grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); }
  .panel { width:340px; } #reader.panel-open #stage { right:354px; }
  .rtitle { display:none; } .rtop { justify-content:space-between; }   /* no title squeezed to a sliver between the capsules */
  .sb-row, .filters .frow { min-height:var(--cb); }   /* the sheet's rows as tall as the bars' buttons */
  #grid { margin-top:40px; }   /* the list toolbar moved into the bar: the covers keep their distance from the search */
  .kinds button { padding:9px 0 8px; }
}
/* tablets: the list toolbar sits in the bar between the menu and the agent, each control its own glass pill of the bar's height */
@media (min-width:641px) and (max-width:1023px) {
  .listhead { position:fixed; top:calc(14px + env(safe-area-inset-top)); left:50%; z-index:41; translate:-50% 0; width:max-content; flex-wrap:nowrap; gap:8px; margin:0; }   /* its own width, never squeezed to half the screen */
  .listhead #count, .listhead .chip, .listhead .seg { height:calc(var(--cb) + 10px); background:var(--glass-float); -webkit-backdrop-filter:var(--blur-float); backdrop-filter:var(--blur-float);
    border:1px solid var(--glass-border); box-shadow:var(--rim), var(--sh-sm); }
  .listhead #count { margin:0; padding:0 16px; white-space:nowrap; }   /* «1007 книг» on one line */
  .listhead .chip { padding:0 16px; }
  .listhead .chip:hover { background:#fff; }
  .listhead .seg { gap:4px; padding:4px; } .listhead .seg button { height:var(--cb); min-width:var(--cb); padding:0; }   /* like the reader's capsule */
}
@media (min-width:700px) and (max-width:1023px) {   /* tablets: the reader's four buttons are an icon and a name */
  .rtop [role=group] .lbl { display:inline; } .rtop [role=group] button { aspect-ratio:auto; padding:0 14px 0 12px; }
}
@media (min-width:641px) and (max-width:719px) {   /* narrow tablets: the toolbar a little tighter, so it fits between the circles */
  .listhead { gap:6px; } .listhead #count, .listhead .chip { padding:0 13px; }
}
/* phones */
@media (max-width:640px) {
  .layout { padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
  .hero, .pagehero { padding-top:14px; }
  .heroText { gap:16px; }
  .display { font-size:clamp(36px, 10vw, 48px); } .display.long { font-size:clamp(30px, 8vw, 40px); }
  .search { height:50px; }
  .sechead, .listhead, .tophead { margin-top:36px; }
  .examples { gap:4px 14px; height:40px; } .examples button + button::before { content:none; } .examples button:first-of-type { margin-left:0; }
  .gridv { grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:26px 14px; }
  /* the list toolbar lives in the bar: one capsule between the menu and the agent, as wide as the reader's four buttons */
  .listhead { display:none; }
  .mbar .mfilter { display:flex; width:auto; }
  .capsule.mfilter button { width:calc(var(--cb) * 4 + 12px); aspect-ratio:auto; justify-content:center; gap:8px; font-variant-numeric:tabular-nums; }   /* icon and count in the middle */
  .mfilter button[aria-expanded=true] { background:#fff; box-shadow:var(--sh-sm); }
  body.plans-view .mbar .mfilter { display:none; }
  .tgrid { grid-template-columns:1fr; } .tpage, .tsk b { width:84px; }
  .agentbar { flex-wrap:wrap; padding:18px; } .agentbar > .ti { display:none; } .agentbar .plan { order:-1; } .agentbar .txt { flex-basis:100%; } .agentbar .btn { width:100%; }
  .trow { grid-template-columns:32px 1fr 44px; } .trow > .opt { display:none; }
  .apps, .donate { padding:26px 22px; border-radius:var(--r-lg); }
  .appsArt { height:210px; }
  .plangrid { grid-template-columns:1fr; }
  .cookie { left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom)); width:auto; }
  /* phones: one inset (12px) for the chat's head, messages, offer and input; the head fits with round buttons never squeezed */
  .chead { padding:12px 12px 8px; gap:2px; } .chat .seg button { padding:0 10px; }
  .tlog { padding:8px 12px 12px; } .chat .offer { margin:0 12px 12px; } .tform { margin:0 12px 12px; }
  .chat { top:calc(8px + env(safe-area-inset-top)); left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom)); width:auto; border-radius:var(--r-lg); }
  .rbottom .slider { width:52vw; }
  #stage { padding:72px 10px 140px; } #reader.has-q #stage { padding-bottom:188px; } #reader.panel-open .zoomBar { display:none; }
  .panel { left:14px; width:auto; bottom:84px; } #reader.has-q .panel { bottom:132px; } #reader.panel-open #stage { right:0; }
}
@media (max-width:380px) { .chat .seg .ti { display:none; } }   /* the narrowest phones: the chat's modes by name only */
/* touch screens of any size: fingers need bigger targets; 16px fields keep iPhone from zooming in */
@media (pointer: coarse) {
  .chip, .seg { height:40px; } .seg button { min-width:42px; }
  .sb-row, .filters .frow { min-height:44px; }
  .filters .years input { height:32px; font-size:16px; }
  :root { --cb:44px; }
  .ibtn { width:44px; height:44px; }
  .brand { min-height:44px; }
  .tform textarea, .search2 input { font-size:16px; }
  /* the page slider: a 24px touch strip around the 4px track, a bigger thumb */
  .slider { height:24px; padding:10px 0; background-clip:content-box; }
  .slider::-webkit-slider-thumb { width:28px; height:28px; }
  .slider::-moz-range-thumb { width:28px; height:28px; }
}
@media (max-width:359px) { :root { --cb:38px; } .chat .seg button { padding:0 8px; } }   /* the narrowest phones (320px): the bars' three places and the chat's head fit with air */

/* SEO text of the pages: quiet, centred, after the books */
.seo { max-width:680px; margin:56px auto 0; color:var(--text3); font-size:12.5px; line-height:1.6; text-align:center; }   /* compact and light: small quiet type */
.seo h2 { margin:0 0 10px; color:var(--text2); font:600 20px/1.2 var(--display); }
.seo p { margin:0 0 8px; }
.seo .links { margin:18px 0 0; line-height:2; }   /* each group one flowing line: its name, then the links as plain words */
.seo .links .micro { margin-right:4px; color:var(--text2); font-size:12.5px; line-height:inherit; }
.seo .links .micro:not(:first-child)::before { content:"\A"; white-space:pre; }
.seo .links a { display:inline-block; margin:0 6px; color:var(--text3); text-decoration:none; transition:color var(--fast); }   /* whole words per link, the line breaks between them */
.seo a { color:var(--text2); text-decoration-color:rgba(17,17,17,.2); }
.seo a:hover { color:var(--text); }
.seo :is(dl, ul) { text-align:left; }
.seo dl { display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; margin:0 0 14px; }
.seo dt { color:var(--text3); }
.seo dd { margin:0; color:var(--text); }

/* ── the mascot: an eagle-owl in a mortarboard (black, red, paper; amber eyes) ── */
.mascot { width:92px; height:92px; overflow:visible; }
.mascot .bird { transform-origin:60px 114px; transition:rotate var(--slow) var(--ease); }
.mascot .eyes { transform-box:fill-box; transform-origin:center; animation:owlblink 4.6s 1.4s infinite; }
@keyframes owlblink { 0%, 93%, 100% { scale:1 1; } 96% { scale:1 .08; } }
.mascot .cap { transform-box:fill-box; transform-origin:center; }
.toss .mascot .cap { animation:toss 1.1s .25s var(--ease); }   /* a purchase: the cap flies up */
@keyframes toss { 45% { translate:0 -40px; rotate:-24deg; } 70% { translate:0 -40px; rotate:12deg; } }
.mascot .bitemark { transform-box:fill-box; transform-origin:center; scale:0; transition:scale .22s var(--ease); }

/* ── the book count changes like Apple's numeric text: digits slide and blur ── */
:is(#count, .mfilter) .dg { position:relative; display:inline-block; width:1ch; text-align:center; }
:is(#count, .mfilter) .dg .out { position:absolute; inset:0; }

/* ── account: the profile button, sign-in, the profile page, the checkout ── */
.ava { display:inline-grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; overflow:hidden; object-fit:cover;
       background:var(--paper); color:var(--text2); font:600 10.5px/1 var(--ui); }
.ava.big { width:104px; height:104px; font-size:34px; box-shadow:var(--sh-md); }
.navlink.me { gap:8px; }
/* the language switch opens a list: a small caret says so, and turns over while the list is open */
.navlink .caret { margin-left:-3px; font-size:13px; color:var(--text3); transition:rotate var(--fast) var(--ease); }
.sb-row .caret { width:auto; margin-left:auto; font-size:13px; color:var(--text3); transition:rotate var(--fast) var(--ease); }
[aria-expanded=true] > .caret { rotate:180deg; }
.sideFoot { display:none; padding:8px 10px 12px; border-top:1px solid var(--line); }
@media (max-width:1023px) { .sideFoot { display:block; } }   /* phones and tablets: the language (and on phones the profile) live at the foot of the menu */
.field { position:relative; display:flex; flex-direction:column; gap:6px; text-align:left; }
.field > span { padding-left:4px; color:var(--text2); font-size:13px; font-weight:500; }
.field input { width:100%; height:48px; padding:0 16px; border-radius:14px; border:1px solid rgba(17,17,17,.1); background:rgba(255,255,255,.8); font-size:15px; outline:none;
               transition:border-color var(--base) var(--ease), box-shadow var(--base) var(--ease), background var(--base) var(--ease); }
.field input:focus { background:#fff; border-color:rgba(17,17,17,.22); box-shadow:0 6px 20px rgba(20,20,20,.06); }
.field .eye { position:absolute; right:5px; bottom:5px; }
.btn.wide { width:100%; height:48px; }
p.err { margin:0; font-size:13px; }   /* form errors; .err gives the colour */
#signupPage { padding:150px 0 72px; }
.auth { position:relative; display:flex; flex-direction:column; align-items:center; gap:18px; width:min(420px, 100%); margin:0 auto; padding:40px 2px 22px; border-radius:var(--r-xl); text-align:center; }
.auth .mascot { position:absolute; top:-80px; left:50%; translate:-50% 0; width:104px; height:104px; }
.seg.authseg { height:calc(var(--cb) + 10px); padding:5px; gap:4px; }   /* as tall as the bars' capsules: 52 */
.authseg button { height:var(--cb); padding:0 18px; }
@media (min-width:1024px) { .seg.authseg { height:40px; padding:3px; gap:2px; } .authseg button { height:34px; padding:0 16px; } }   /* desktop: 40, as the toolbar and the chat's head */
.authform { display:flex; flex-direction:column; gap:12px; width:100%; }
.authform .fine { margin:2px 0 0; text-align:center; }
.prof { gap:12px; }
.avaEdit { position:relative; border-radius:50%; cursor:pointer; }
.avaEdit > .ti { position:absolute; right:0; bottom:0; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--glass-dark); color:#fff; font-size:17px; box-shadow:var(--sh-sm); }
.prof .lead { margin-top:-6px; }
.profcol { display:flex; flex-direction:column; gap:44px; width:min(620px, 100%); margin:36px auto 0; }
.psec { display:flex; flex-direction:column; gap:14px; }
.psec > h2 { padding-left:4px; }
.pform { display:flex; flex-direction:column; gap:12px; }
.prow { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
#logout { align-self:center; }
.subgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
.subcard { position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 22px; border-radius:var(--r-lg); text-align:center; }   /* centred, like the page heads */
.subcard .prow, .subcard .price { justify-content:center; }
.subcard .price + .btn { margin-top:10px; }   /* air between the price and «Оформить» */
.subcard p { margin:0; color:var(--text2); }
.subcard .price b { font-size:40px; }
.subcard .mascot { position:absolute; left:50%; top:-70px; translate:-50% 0; width:84px; height:84px; }
.subcard:has(.mascot) { margin-top:56px; padding-top:32px; }   /* room for the mascot on the card's edge */
.subcard.sad .bird { rotate:-9deg; }   /* cancelling: the mascot hangs its head */
.paydlg { width:min(460px, calc(100vw - 24px)); max-width:none; max-height:none; padding:0; border:0; overflow:visible; color:var(--text);
          border-radius:var(--r-xl); background:var(--glass-float); -webkit-backdrop-filter:var(--blur-float); backdrop-filter:var(--blur-float); box-shadow:var(--rim), var(--sh-lg); }
.paydlg[open] { animation:rise var(--slow) var(--ease); }
.paydlg::backdrop { background:rgba(17,17,17,.2); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.paybox { display:flex; flex-direction:column; gap:14px; max-height:calc(100dvh - 24px); overflow:auto; padding:20px 20px 16px; }
.payhead { display:flex; align-items:center; justify-content:space-between; padding-left:4px; }
.payplan { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0; padding:13px 16px; border-radius:var(--r-md); background:rgba(255,255,255,.55); }
.payplan span { color:var(--text2); }
.methods { display:flex; flex-direction:column; gap:8px; }
.method { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-md); background:rgba(255,255,255,.5); border:1px solid rgba(17,17,17,.06); cursor:pointer;
          transition:background var(--fast), border-color var(--fast), box-shadow var(--fast); }
.method:hover { background:rgba(255,255,255,.8); }
.method:has(input:checked) { background:#fff; border-color:rgba(17,17,17,.16); box-shadow:var(--sh-sm); }
.method input { flex:none; width:18px; height:18px; margin:0; border-radius:50%; border:1.5px solid rgba(17,17,17,.28); appearance:none; transition:border var(--fast); }
.method input:checked { border:5.5px solid var(--text); }
.method > .ti { font-size:22px; }
.method span { display:flex; flex-direction:column; gap:1px; }
.method small { color:var(--text2); font-size:12.5px; }
.cardf { display:flex; flex-direction:column; gap:10px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ccbrand { position:absolute; right:14px; bottom:15px; color:var(--text2); font-size:12px; }   /* the card's brand, read from its number */
.paybox .fine { margin:0; text-align:center; }
.paydone { position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:70px 28px 28px; text-align:center; }
.paydone p { margin:0 0 8px; color:var(--text2); }
.paydone .mascot { position:absolute; top:-58px; left:50%; translate:-50% 0; width:116px; height:116px; }
/* the chat without a plan: the mascot offers one */
.offer { display:flex; align-items:center; gap:12px; margin:0 14px 12px; padding:12px; border-radius:var(--r-lg); background:rgba(255,255,255,.62); border:1px solid var(--glass-border); box-shadow:var(--rim); }
.offer .mascot { flex:none; width:40px; height:40px; }
.otext { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; line-height:1.3; }
.otext b { font-size:13.5px; font-weight:600; }
.otext span { color:var(--text2); font-size:12px; }
.offer .btn { flex:none; height:var(--cb); padding:0 18px; }
.paywall { flex-direction:row; align-items:flex-start; gap:10px; }
/* the chat before launch: the mascot and «скоро», in the middle of the panel */
.soonCard { display:flex; flex-direction:column; align-items:center; gap:12px; margin:auto 0; padding:24px 12px; text-align:center; }
.soonCard .mascot { width:96px; height:96px; }
.soonCard p { max-width:320px; margin:0; color:var(--text2); line-height:1.5; }
.soonCard .btn { margin-top:6px; }
.paywall .mascot { flex:none; width:44px; height:44px; }
@media (max-width:640px) { #signupPage { padding-top:110px; } }


/* ── «О проекте»: the library's news as a feed; a red badge counts the posts a reader hasn't seen ── */
.nicon { position:relative; display:inline-grid; place-items:center; }
.newsBadge { position:absolute; top:-7px; right:-9px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--red); color:#fff;
             font:700 10px/16px var(--ui); text-align:center; font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px var(--bg); pointer-events:none; }
#menuBtn { position:relative; }
#menuBtn .newsBadge { top:-3px; right:-3px; }
.feed { display:flex; flex-direction:column; width:min(680px, 100%); margin:28px auto 0; }   /* no cards: posts lie on the paper, hairlines between them */
.post { display:flex; flex-direction:column; gap:8px; padding:26px 4px 28px; }
.post + .post { border-top:1px solid var(--line); }
.post .meta { display:flex; align-items:center; gap:10px; color:var(--text2); font-size:13px; }
.post.unread .meta::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--red); }   /* not seen yet */
.tag { padding:3px 10px; border-radius:999px; background:var(--hover); color:var(--text2); font-size:12px; font-weight:600; }
.tag.soon { background:var(--red-soft); color:var(--red-hover); }
/* before launch: «Скоро» on what does not open yet — the paid plan, the «ИИ-Агент» button, the topic page's agent bar */
.plancard .soonTag, .donate .soonTag { position:absolute; top:22px; right:22px; z-index:1; }
.topAgent .tag { margin-left:2px; padding:2px 8px; font-size:11px; }
.plan.soon { border-color:transparent; background:var(--red-soft); color:var(--red-hover); }
.post p { margin:0; color:var(--text2); font-size:15px; line-height:1.65; }
.post p b { color:var(--text); font-weight:600; }   /* the lead-in of a paragraph: the eye finds each item */
.post p + p { margin-top:4px; }
@media (max-width:640px) { .post { padding:22px 2px 24px; } }

/* ── view transitions: opening a book and closing it (app.js, the hashchange handler) ──
   the catalog steps back while the cover grows into the page; closing, the page shrinks back into its cover and the catalog
   comes forward. On phones and tablets the bar's glass stays where it is and only what is on it changes: ☰ turns into ←,
   the filter gives way to the reader's four buttons, ✦ does not move at all. */
::view-transition-group(*) { animation-duration:.5s; animation-timing-function:cubic-bezier(.22,.8,.25,1); }
::view-transition-old(root), ::view-transition-new(root), ::view-transition-old(navl-i), ::view-transition-new(navl-i) { mix-blend-mode:normal; }
::view-transition-old(hero), ::view-transition-new(hero) { height:100%; object-fit:cover; }   /* the cover and the page fill the growing frame, never squeezed */
html[data-vt=open]::view-transition-old(root) { animation:.5s cubic-bezier(.22,.8,.25,1) both vtBack; }
html[data-vt=open]::view-transition-new(root) { animation:.32s ease both vtShow; }
html[data-vt=close]::view-transition-old(root) { animation:.28s ease both vtHide; }
html[data-vt=close]::view-transition-new(root) { animation:.5s cubic-bezier(.22,.8,.25,1) both vtFront; }
::view-transition-old(navl-i) { animation:.28s ease both vtIconOut; }
::view-transition-new(navl-i) { animation:.42s .06s cubic-bezier(.22,.8,.25,1) both vtIconIn; }
html[data-vt=open]::view-transition-new(rbot) { animation:.45s .1s cubic-bezier(.22,.8,.25,1) both vtRise; }
html[data-vt=close]::view-transition-old(rbot) { animation:.25s ease both vtSink; }
@keyframes vtBack { to { opacity:0; scale:.94; } }
@keyframes vtFront { from { opacity:0; scale:.94; } }
@keyframes vtShow { from { opacity:0; } }
@keyframes vtHide { to { opacity:0; } }
@keyframes vtIconOut { to { opacity:0; rotate:-90deg; scale:.6; filter:blur(3px); } }
@keyframes vtIconIn { from { opacity:0; rotate:90deg; scale:.6; filter:blur(3px); } }
/* what sits on the middle capsule: the filter blurs away, the reader's four buttons come up one after another (and back) */
::view-transition-old(navm-a), ::view-transition-old(navm-1), ::view-transition-old(navm-2), ::view-transition-old(navm-3), ::view-transition-old(navm-4) { animation:.22s ease both vtDrop; }
::view-transition-new(navm-a), ::view-transition-new(navm-1), ::view-transition-new(navm-2), ::view-transition-new(navm-3), ::view-transition-new(navm-4) { animation:.42s .08s cubic-bezier(.22,.8,.25,1) both vtPop; }
::view-transition-new(navm-2) { animation-delay:.12s; } ::view-transition-new(navm-3) { animation-delay:.16s; } ::view-transition-new(navm-4) { animation-delay:.2s; }
@keyframes vtDrop { to { opacity:0; scale:.6; filter:blur(4px); } }
@keyframes vtPop { from { opacity:0; scale:.6; filter:blur(4px); } }
@keyframes vtRise { from { opacity:0; translate:0 28px; } }
@keyframes vtSink { to { opacity:0; translate:0 28px; } }
#reader.open .rbottom { view-transition-name:rbot; }
@media (max-width:1023px) {   /* the bar over the catalog and the reader's bar are the same three places */
  body:not(:has(#reader.open)) .listhead { view-transition-name:lhead; }
  body:not(:has(#reader.open)) #menuBtn, #reader.open .rtop > .capsule:first-child { view-transition-name:navl; }
  body:not(:has(#reader.open)) #menuBtn .ti, #reader.open #close .ti { view-transition-name:navl-i; }
  body:not(:has(#reader.open)) .mbar .mfilter, #reader.open .rtop > [role=group] { view-transition-name:navm; }
  body:not(:has(#reader.open)) .mbar .mfilter button { view-transition-name:navm-a; }
  #reader.open .rtop > [role=group] > :nth-child(1) { view-transition-name:navm-1; } #reader.open .rtop > [role=group] > :nth-child(2) { view-transition-name:navm-2; }
  #reader.open .rtop > [role=group] > :nth-child(3) { view-transition-name:navm-3; } #reader.open .rtop > [role=group] > :nth-child(4) { view-transition-name:navm-4; }
  body:not(:has(#reader.open)) .mbar .chatBtn, #reader.open .rtop > .capsule:last-child { view-transition-name:navr; }
}