/* Fonts are loaded from Google Fonts in HTML head. Self-hosted font files are not bundled. */
:root{
  /* brand blue */
  --blue-50:#EAF0FF; --blue-100:#D6E2FF; --blue-200:#AEC4FF;
  --blue-400:#4E79F0; --blue-500:#2E5BEA; --blue-600:#1E50E0; --blue-700:#1A44C2; --blue-800:#16389E;
  /* hero navy gradient */
  --hero-from:#0B1B40; --hero-to:#1D4FD7; --navy-900:#0B1B40;
  /* ink / text */
  --ink:#0E1B2E; --ink-2:#1C2B40; --slate:#5B6B82; --slate-2:#8595AB; --slate-3:#AEB9CA;
  /* surfaces */
  --bg:#FFFFFF; --bg-alt:#F4F6FA; --bg-alt-2:#EEF2F8; --line:#E5EAF1; --line-2:#D9E0EA;
  /* gold accent */
  --gold-400:#F0B24A; --gold-500:#E8A33D; --gold-600:#D8902A;
  /* chip tints */
  --chip-blue-bg:#EAF0FF;   --chip-blue-fg:#2E5BEA;
  --chip-teal-bg:#E1F4ED;   --chip-teal-fg:#1F9E73;
  --chip-amber-bg:#FCEFD9;  --chip-amber-fg:#D8902A;
  --chip-violet-bg:#EFE9FB; --chip-violet-fg:#7C5CFC;
  --success:#16A34A; --success-soft:#DCFCE7; --success-line:#BBF7D0;
  --warning:#D8902A; --warning-soft:#FFF7ED; --warning-line:#FED7AA;
  --danger:#DC2626; --danger-soft:#FEF2F2; --danger-line:#FECACA;
  /* radii */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  /* shadows (blue-tinted, soft) */
  --shadow-xs:0 1px 2px rgba(14,27,46,.05);
  --shadow-sm:0 2px 8px rgba(14,27,46,.06);
  --shadow-md:0 10px 30px rgba(14,27,46,.07);
  --shadow-lg:0 24px 60px rgba(14,27,46,.10);
  /* accent (action) */
  --accent:var(--blue-600); --accent-hover:var(--blue-700); --accent-soft:var(--blue-50);
  --accent-ring:rgba(30,80,224,.20);
  /* type */
  --font-sans:'Golos Text', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display:'Unbounded', 'Golos Text', 'Segoe UI', sans-serif;
  --mono:'SFMono-Regular', ui-monospace, 'Cascadia Code', Consolas, monospace;
  /* layout */
  --topbar-h:64px; --brand-w:300px; --sidebar-w:320px; --rail-w:288px; --read-w:760px;
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{font-family:var(--font-sans); color:var(--ink); background:var(--bg-alt);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.6}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-hover)}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
::selection{background:var(--accent-soft)}
.scroll::-webkit-scrollbar{width:9px; height:9px}
.scroll::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px; border:2px solid var(--bg)}
.scroll::-webkit-scrollbar-thumb:hover{background:var(--slate-3)}

/* eyebrow: gold dash + uppercase blue label */
.eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:700;
  letter-spacing:.10em; text-transform:uppercase; color:var(--blue-600)}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--gold-500); border-radius:2px}

.brand{display:flex; align-items:center; gap:10px; color:#fff}
.brand .logo{width:30px; height:30px; border-radius:8px; flex:0 0 30px;
  background:linear-gradient(135deg,var(--blue-500),var(--hero-to)); box-shadow:var(--shadow-sm)}
.brand .bn{display:flex; flex-direction:column; line-height:1.05}
.brand .bn b{font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.01em}
.brand .bn span{font-size:10.5px; color:#9fb0cc; letter-spacing:.04em; text-transform:uppercase}

/* ==========================================================================
   СОСТОЯНИЕ A — Каталог
   ========================================================================== */
.catalog-body{background:var(--bg)}
.cat-topbar{position:sticky; top:0; z-index:30; height:var(--topbar-h); display:flex; align-items:center;
  gap:14px; padding:0 24px; background:var(--ink)}
.cat-topbar .crumb{color:#9fb0cc; font-size:13px; margin-left:6px}
.cat-topbar .crumb b{color:#fff; font-weight:600}
.cat-topbar .spacer{flex:1}

.layout-catalog{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:calc(100vh - var(--topbar-h))}
.courses-nav{border-right:1px solid var(--line); background:var(--bg); padding:22px 16px;
  position:sticky; top:var(--topbar-h); height:calc(100vh - var(--topbar-h)); overflow:auto}
.courses-nav .label{font-size:11px; letter-spacing:.10em; text-transform:uppercase; color:var(--slate-2);
  font-weight:700; margin:2px 10px 12px}
.courses-nav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px}
.courses-nav a{display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:var(--r-md);
  color:var(--ink-2); font-weight:500; font-size:14.5px}
.courses-nav a:hover{background:var(--bg-alt)}
.courses-nav a .chip{width:30px; height:30px; border-radius:9px; flex:0 0 30px; display:grid; place-items:center;
  background:var(--chip-blue-bg); color:var(--chip-blue-fg)}
.courses-nav a .chip svg{width:17px; height:17px}
.courses-nav a .ttl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.catalog-main{padding:46px 40px 90px; max-width:1100px}
.catalog-hero{margin-bottom:34px}
.catalog-hero .eyebrow{margin-bottom:16px}
.catalog-hero h1{font-family:var(--font-display); font-weight:800; font-size:42px; line-height:1.08;
  letter-spacing:-.01em; margin:0 0 12px}
.catalog-hero p{color:var(--slate); max-width:62ch; margin:0; font-size:18px; line-height:1.55}
.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:18px}
.card-course{display:block; border:1px solid var(--line); border-radius:var(--r-xl); padding:22px;
  background:var(--bg); box-shadow:var(--shadow-sm); color:inherit; transition:border-color .15s, transform .15s, box-shadow .15s}
.card-course:hover{border-color:var(--blue-200); transform:translateY(-3px); box-shadow:var(--shadow-md)}
.card-course .ctop{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.card-course .cchip{width:46px; height:46px; border-radius:var(--r-md); flex:0 0 46px; display:grid; place-items:center;
  background:var(--chip-blue-bg); color:var(--chip-blue-fg)}
.card-course .cchip svg{width:24px; height:24px}
.card-course h3{font-family:var(--font-display); font-weight:700; font-size:19px; line-height:1.22; margin:0}
.card-course p{margin:0 0 16px; color:var(--slate); font-size:14.5px; line-height:1.5}
.card-course .meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12.5px}
.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--r-pill);
  background:var(--bg-alt); border:1px solid var(--line); color:var(--slate)}
.pill.level{color:var(--accent); background:var(--accent-soft); border-color:var(--blue-100)}
.pill.fmt{color:var(--chip-teal-fg); background:var(--chip-teal-bg); border-color:#c6eadd}
.pill.stale{color:#C8392F; background:#FCEAEA; border-color:#f3cdca}

/* ==========================================================================
   СОСТОЯНИЕ B — Постраничный ридер (1 глава = 1 страница)
   ========================================================================== */
.app{display:grid; grid-template-columns:var(--brand-w) 1fr; grid-template-rows:var(--topbar-h) 1fr;
  grid-template-areas:"brand top" "side main"; height:100vh; overflow:hidden}
.app[data-collapsed="true"]{--brand-w:96px}

.brandbar{grid-area:brand; display:flex; align-items:center; gap:12px; padding:0 18px;
  background:var(--ink); border-right:1px solid rgba(255,255,255,.06); overflow:hidden}
.app[data-collapsed="true"] .brand .bn{display:none}
.collapse-btn{margin-left:auto; width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:none; color:#cfe; transition:background .15s}
.collapse-btn:hover{background:rgba(255,255,255,.16)}
.collapse-btn svg{width:17px; height:17px}

.topbar{grid-area:top; display:flex; align-items:center; gap:18px; padding:0 24px; background:var(--bg);
  border-bottom:1px solid var(--line); z-index:20}
.crumbs{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--slate-2); min-width:0}
.crumbs .sep{color:var(--slate-3)}
.crumbs b{color:var(--ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar-search{margin-left:auto; position:relative; width:300px}
.topbar-search input{width:100%; height:40px; padding:0 14px 0 40px; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--bg-alt); font:inherit; font-size:14px; color:var(--ink); outline:none;
  transition:border-color .15s, background .15s, box-shadow .15s}
.topbar-search input::placeholder{color:var(--slate-3)}
.topbar-search input:focus{background:var(--bg); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring)}
.topbar-search .s-ic{position:absolute; left:13px; top:11px; width:18px; height:18px; color:var(--slate-3); pointer-events:none}
.topbar-search .results{position:absolute; top:46px; left:0; right:0; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg); overflow:hidden; z-index:50; display:none}
.topbar-search .results.open{display:block}
.topbar-search .results button{display:block; width:100%; text-align:left; padding:10px 14px; border:none; background:none;
  font:inherit; font-size:13.5px; color:var(--ink)}
.topbar-search .results button:hover{background:var(--accent-soft); color:var(--accent)}
.topbar-search .results .empty{padding:14px; color:var(--slate-3); font-size:13px}

.ring-wrap{display:flex; align-items:center; gap:10px; padding-left:4px}
.ring{position:relative; width:38px; height:38px}
.ring svg{transform:rotate(-90deg)}
.ring .ring-bg{stroke:var(--line)}
.ring .ring-fg{stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset .5s ease}
.ring .ring-txt{position:absolute; inset:0; display:grid; place-items:center; font-size:10px; font-weight:700; color:var(--ink)}
.ring-label{font-size:12px; color:var(--slate-2); line-height:1.25}
.ring-label b{display:block; color:var(--ink); font-size:13px}

/* sidebar — список глав */
.sidebar{grid-area:side; background:var(--bg); border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden}
.course-head{padding:20px 20px 16px; border-bottom:1px solid var(--line); flex-shrink:0}
.course-head .pill{margin-bottom:12px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.course-head h2{font-family:var(--font-display); font-weight:800; font-size:20px; line-height:1.16;
  letter-spacing:-.01em; margin:0 0 4px; color:var(--ink)}
.course-head .sub{font-size:13px; color:var(--slate); margin-bottom:16px}
.prog-row{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--slate-2); margin-bottom:7px}
.prog-row b{color:var(--ink); font-weight:700}
.prog-track{height:7px; background:var(--bg-alt-2); border-radius:99px; overflow:hidden}
.prog-fill{height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .5s ease}
.app[data-collapsed="true"] .course-head{display:none}

.outline{flex:1; overflow-y:auto; padding:10px 12px 40px; list-style:none; margin:0}
.outline li{margin:1px 0}
.ch{display:flex; align-items:flex-start; gap:11px; width:100%; text-align:left; padding:9px 10px;
  border:none; background:none; border-radius:var(--r-sm); color:var(--slate); transition:background .12s, transform .12s; position:relative; line-height:1.3}
.ch:hover{background:var(--bg-alt)}
.ch.active{background:var(--accent-soft)}
.ch.active::before{content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px; border-radius:99px; background:var(--accent)}
.ch .check{flex-shrink:0; width:20px; height:20px; border-radius:99px; margin-top:1px; border:1.5px solid var(--line-2);
  display:grid; place-items:center; color:transparent; transition:all .15s; background:var(--bg); font-size:11px; font-weight:700}
.ch.done .check{background:var(--accent); border-color:var(--accent); color:#fff}
.ch .cb{min-width:0; flex:1}
.ch .ct{font-size:13.5px; color:var(--ink); font-weight:500}
.ch.active .ct{color:var(--accent); font-weight:600}
.ch.done .ct{color:var(--slate-2)}
.ch .cm{font-size:11.5px; color:var(--slate-3); margin-top:1px; display:flex; gap:6px; align-items:center; white-space:nowrap}

/* Compact sidebar: progress rail instead of checkbox-looking empty circles. */
.app[data-collapsed="true"] .brandbar{justify-content:center; padding:0 10px; gap:8px}
.app[data-collapsed="true"] .brand{gap:0}
.app[data-collapsed="true"] .collapse-btn{margin-left:0; flex:0 0 30px}
.app[data-collapsed="true"] .outline{padding:14px 0 40px; display:flex; flex-direction:column; align-items:center; gap:8px}
.app[data-collapsed="true"] .outline li{width:100%; margin:0}
.app[data-collapsed="true"] .ch{width:58px; height:54px; margin:0 auto; padding:0; align-items:center; justify-content:center; gap:0; border-radius:16px}
.app[data-collapsed="true"] .ch:hover{background:var(--bg-alt); transform:translateY(-1px)}
.app[data-collapsed="true"] .ch.active{background:var(--accent-soft)}
.app[data-collapsed="true"] .ch.active::before{left:5px; top:10px; bottom:10px}
.app[data-collapsed="true"] .ch .cb{display:none}
.app[data-collapsed="true"] .ch .check{width:34px; height:34px; margin:0; border-radius:12px; background:var(--bg-alt); border-color:var(--line-2); color:var(--slate-2); font-family:var(--font-display); font-size:10.5px; line-height:1}
.app[data-collapsed="true"] .ch .check svg{display:none; width:14px; height:14px}
.app[data-collapsed="true"] .ch .check::before{content:attr(data-step); font-weight:700; letter-spacing:.02em}
.app[data-collapsed="true"] .ch.active .check{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 8px 18px rgba(30,80,224,.22)}
.app[data-collapsed="true"] .ch.done .check{background:var(--accent); border-color:var(--accent); color:#fff}
.app[data-collapsed="true"] .ch.done .check::before{display:none}
.app[data-collapsed="true"] .ch.done .check svg{display:block}

/* main reading area */
.main{grid-area:main; overflow-y:auto; background:var(--bg-alt)}
.main-inner{display:grid; gap:36px; padding:0 0 90px; grid-template-columns:minmax(0,1fr) var(--rail-w);
  max-width:1240px; margin:0 auto}
.article{min-width:0}

/* per-chapter hero (инфографика-заставка главы) */
.lesson-hero{margin:0 0 36px; padding:48px 48px 40px; background:linear-gradient(135deg,var(--hero-from),var(--hero-to));
  color:#fff; position:relative; overflow:hidden}
.lesson-hero::after{content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%;
  border:2px solid rgba(255,255,255,.10); box-shadow:0 0 0 40px rgba(255,255,255,.04), 0 0 0 90px rgba(255,255,255,.03)}
.lesson-hero .lh-kicker{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-400); margin-bottom:14px; display:flex; align-items:center; gap:10px}
.lesson-hero .lh-kicker::before{content:""; width:24px; height:2px; background:var(--gold-400); border-radius:2px}
.lesson-hero h1{font-family:var(--font-display); font-weight:800; font-size:38px; line-height:1.1;
  letter-spacing:-.015em; margin:0 0 16px; max-width:720px; position:relative}
.lesson-hero .lh-meta{display:flex; flex-wrap:wrap; gap:18px; font-size:14px; color:#cfe0ff; position:relative}
.lesson-hero .lh-meta span{display:flex; align-items:center; gap:7px}

.article-pad{padding:0 48px}

/* prose */
.prose{font-size:16px; line-height:1.72; color:var(--slate); max-width:var(--read-w)}
.prose > * + *{margin-top:16px}
.prose p{margin:0}
.prose strong{color:var(--ink); font-weight:600}
.prose h1{font-family:var(--font-display); font-weight:800; font-size:30px; line-height:1.14; color:var(--ink);
  letter-spacing:-.01em; margin:30px 0 6px}
.prose h2{font-family:var(--font-display); font-weight:700; font-size:21px; line-height:1.25; color:var(--ink);
  margin:32px 0 4px; letter-spacing:-.005em; scroll-margin-top:24px}
.prose h3{font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.3; color:var(--ink-2); margin:22px 0 4px}
.prose ul,.prose ol{margin:0; padding-left:22px}
.prose li{margin:5px 0}
.prose li::marker{color:var(--accent)}
.prose code{font-family:var(--mono); font-size:.88em; background:var(--bg-alt-2); color:var(--ink-2);
  padding:2px 6px; border-radius:6px}

/* phase badge */
.phase-badge{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:5px 12px; border-radius:var(--r-pill); margin:0 0 4px;
  background:var(--accent-soft); color:var(--accent)}

/* таблицы (исходные <table> учебника) */
.prose table{width:100%; border-collapse:separate; border-spacing:0; font-size:14px; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; margin:4px 0}
.prose thead th{background:var(--bg-alt); color:var(--ink); text-align:left; font-weight:700; padding:12px 16px;
  border-bottom:1px solid var(--line); font-size:13px}
.prose tbody td{padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--slate)}
.prose tbody tr:last-child td{border-bottom:none}
.prose tbody tr:nth-child(even) td{background:#fbfcfe}
.prose tbody td:first-child{color:var(--ink); font-weight:500}

/* code-block (исходные блоки учебника) */
.code-block{background:var(--ink); color:#d7e3f7; padding:18px 20px; border-radius:var(--r-lg);
  font-family:var(--mono); font-size:13px; line-height:1.65; overflow-x:auto; white-space:pre; margin:2px 0;
  box-shadow:var(--shadow-md)}

/* callouts (исходные .callout/.callout-* учебника, перекрашены в гамму АМСУ) */
.callout{padding:16px 18px; border-radius:var(--r-lg); border:1px solid var(--cl-bd,var(--line));
  background:var(--cl-bg,var(--bg-alt)); font-size:15px; line-height:1.6; color:var(--ink-2); position:relative;
  border-left:4px solid var(--cl-fg,var(--accent))}
.callout strong:first-child{color:var(--cl-fg,var(--accent)); font-weight:700}
.callout{--cl-bg:var(--chip-blue-bg); --cl-fg:var(--chip-blue-fg); --cl-bd:#d4e0ff}
.callout-gold{--cl-bg:var(--chip-amber-bg); --cl-fg:var(--chip-amber-fg); --cl-bd:#f2deb8}
.callout-green{--cl-bg:#E6F6EC; --cl-fg:#1F8A4C; --cl-bd:#c6e9d2}
.callout-pink{--cl-bg:#FBE9F3; --cl-fg:#C13E84; --cl-bd:#f3cfe2}
.callout-red{--cl-bg:#FCEAEA; --cl-fg:#C8392F; --cl-bd:#f3cdca}
.callout-purple{--cl-bg:var(--chip-violet-bg); --cl-fg:var(--chip-violet-fg); --cl-bd:#e2d8f8}

.stale-banner{display:flex; gap:10px; align-items:flex-start; background:#FCEAEA; border:1px solid #f3cdca;
  color:#C8392F; padding:13px 16px; border-radius:var(--r-lg); margin:0 0 18px; font-size:14px}

/* footer: complete + pager */
.lesson-foot{padding:0 48px; max-width:calc(var(--read-w) + 0px)}
.complete-bar{display:flex; align-items:center; gap:16px; padding:18px 22px; border-radius:var(--r-xl);
  background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow-sm); margin:40px 0 24px}
.complete-bar .cb-txt{font-size:14px; color:var(--slate)}
.complete-bar .cb-txt b{display:block; color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:16px}
.complete-bar .cb-actions{margin-left:auto}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600; font-size:14.5px;
  border-radius:var(--r-md); border:1px solid transparent; padding:12px 20px; transition:all .15s; white-space:nowrap}
.btn svg{width:18px; height:18px}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 12px 26px var(--accent-ring)}
.btn-primary:hover{background:var(--accent-hover); transform:translateY(-1px)}
.btn-done{background:var(--chip-teal-bg); color:var(--chip-teal-fg); border-color:#c6eadd; box-shadow:none}

.prevnext{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 48px; max-width:1240px}
.pn{display:flex; flex-direction:column; gap:4px; padding:16px 18px; text-align:left; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-lg); transition:all .15s; min-width:0; color:inherit}
.pn:hover{border-color:var(--accent); background:var(--accent-soft)}
.pn.disabled{opacity:.4; pointer-events:none}
.pn .pn-dir{font-size:12px; color:var(--slate-2)}
.pn.next{text-align:right; align-items:flex-end}
.pn .pn-title{font-weight:600; font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}

/* right rail */
.rail{display:flex; flex-direction:column; gap:18px; position:sticky; top:0; align-self:start; padding:40px 24px 0 0}
.card{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-xl); padding:18px; box-shadow:var(--shadow-sm)}
.card h4{font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--slate-2); margin:0 0 14px; display:flex; align-items:center; gap:8px}
.card h4 svg{width:15px; height:15px; color:var(--accent)}
.minitoc{list-style:none; margin:0; padding:0}
.minitoc a{display:block; font-size:13.5px; color:var(--slate); padding:6px 0 6px 14px; border-left:2px solid var(--line); transition:all .12s}
.minitoc a:hover{color:var(--accent); border-color:var(--accent)}
.minitoc a.active{color:var(--accent); border-color:var(--accent); font-weight:600}
.meta-list{list-style:none; margin:0; padding:0; font-size:13px}
.meta-list li{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line-2)}
.meta-list li:last-child{border-bottom:none}
.meta-list .k{color:var(--slate-2)}
.meta-list .v{color:var(--ink); font-weight:600; text-align:right}

/* material offline download */
.material-download{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line-2);
}
.material-download__link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(11,95,255,.18);
  background:linear-gradient(135deg, rgba(11,95,255,.08), rgba(240,178,74,.10));
  color:var(--ink);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.material-download__link:hover{
  transform:translateY(-1px);
  border-color:rgba(11,95,255,.34);
  box-shadow:var(--shadow-sm);
}
.material-download__icon{
  width:38px;
  height:38px;
  min-width:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#fff;
}
.material-download__icon svg{
  width:19px;
  height:19px;
}
.material-download__text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.material-download__text b{
  font-size:13.5px;
  line-height:1.25;
  color:var(--ink);
}
.material-download__text small{
  font-size:12px;
  line-height:1.25;
  color:var(--slate-2);
}

/* mobile course materials: visible when the right rail is hidden */
.course-materials-mobile{
  display:none;
  max-width:var(--read-w);
  margin:-8px 48px 28px;
}

.course-materials-mobile:empty{
  display:none !important;
}

.course-material-card{
  border:1px solid rgba(11,95,255,.16);
  border-radius:var(--r-xl);
  background:
    radial-gradient(circle at 100% 0%, rgba(11,95,255,.08), transparent 38%),
    linear-gradient(180deg,#fff,var(--bg-alt));
  box-shadow:var(--shadow-sm);
  padding:16px;
}

.course-material-card__head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.course-material-card__icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:var(--accent-soft);
  color:var(--accent);
}

.course-material-card__icon svg{
  width:20px;
  height:20px;
}

.course-material-card__title{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:2px;
}

.course-material-card__title b{
  font-family:var(--font-display);
  font-size:15px;
  line-height:1.25;
  color:var(--ink);
}

.course-material-card__title small{
  font-size:13px;
  color:var(--slate-2);
}

.course-material-card__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 14px;
  border-radius:16px;
  color:#fff;
  background:var(--accent);
  text-decoration:none;
  box-shadow:0 12px 26px var(--accent-ring);
}

.course-material-card__link:hover{
  color:#fff;
  background:var(--accent-hover);
  transform:translateY(-1px);
}

.course-material-card__link span:first-child{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.course-material-card__link b{
  font-size:14px;
  line-height:1.25;
}

.course-material-card__link small{
  font-size:12px;
  line-height:1.25;
  opacity:.82;
}

.course-material-card__arrow{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.16);
  font-weight:800;
}

@media (max-width:1080px){
  .course-materials-mobile:not(:empty){
    display:block;
  }
}

@media (max-width:860px){
  .course-materials-mobile{
    margin:-8px 18px 24px;
  }

  .course-material-card{
    padding:15px;
    border-radius:20px;
  }

  .course-material-card__link{
    min-height:52px;
  }
}

/* mobile */
.icon-btn{width:40px; height:40px; border-radius:var(--r-md); display:none; place-items:center; background:var(--bg-alt);
  border:1px solid var(--line); color:var(--slate)}
.icon-btn svg{width:19px; height:19px}
.scrim{display:none}

@media (max-width:1080px){
  .main-inner{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
}
@media (max-width:860px){
  .layout-catalog{grid-template-columns:1fr}
  .courses-nav{position:static; height:auto; border-right:none; border-bottom:1px solid var(--line)}
  .catalog-main{padding:28px 18px 70px}
  .catalog-hero h1{font-size:30px}
  .app{grid-template-columns:1fr; grid-template-rows:var(--topbar-h) 1fr; grid-template-areas:"top" "main"}
  .brandbar{display:none}
  .sidebar{position:fixed; top:0; left:0; bottom:0; width:min(86vw,340px); z-index:60; transform:translateX(-100%);
    transition:transform .28s ease; box-shadow:var(--shadow-lg)}
  .app[data-mobile-open="true"] .sidebar{transform:translateX(0)}
  .scrim{display:block; position:fixed; inset:0; background:rgba(11,27,64,.45); z-index:55; opacity:0; pointer-events:none; transition:opacity .25s}
  .app[data-mobile-open="true"] .scrim{opacity:1; pointer-events:auto}
  .icon-btn{display:grid}
  .topbar{padding:0 14px; gap:12px}
  .crumbs{display:none}
  .topbar-search{width:auto; flex:1; margin-left:0}
  .lesson-hero{margin:0 0 26px; padding:34px 18px 28px}
  .lesson-hero h1{font-size:27px}
  .article-pad,.lesson-foot,.prevnext{padding:0 18px}
  .prevnext{grid-template-columns:1fr}
  .main-inner{padding-bottom:70px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto !important; transition:none !important}}

/* фирменный логотип в брендбаре */
.brand .logo{background:url('../img/amsu-logo.png') center/contain no-repeat;border-radius:7px}

/* Patch: mobile compact reset */

@media (max-width:860px){
  .app[data-collapsed="true"] .course-head{display:block}
  .app[data-collapsed="true"] .outline{display:block; padding:10px 12px 40px}
  .app[data-collapsed="true"] .outline li{width:auto; margin:1px 0}
  .app[data-collapsed="true"] .ch{width:100%; height:auto; margin:0; padding:9px 10px; align-items:flex-start; justify-content:flex-start; gap:11px; border-radius:var(--r-sm)}
  .app[data-collapsed="true"] .ch .cb{display:block}
  .app[data-collapsed="true"] .ch .check{width:20px; height:20px; border-radius:99px; margin-top:1px; background:var(--bg); color:transparent; box-shadow:none}
  .app[data-collapsed="true"] .ch .check::before{content:""}
  .app[data-collapsed="true"] .ch.done .check svg{display:block}
}


/* ==========================================================================
   Agentic AI full course components
   Source-aligned blocks from Agentic_AI_Student_Handbook_AMSU_full_ru_v3.html
   ========================================================================== */
:root{
  --course-purple:#7C3AED;
  --course-teal:#0891B2;
  --course-pink:#DB2777;
  --course-orange:#F97316;
  --course-green:#16A34A;
  --course-red:#DC2626;
  --course-blue2:#1F4E79;
  --course-glossary-nav-bg:#EEF2FF;
  --course-glossary-nav-fg:#1D4ED8;
  --course-glossary-card-bg:#F8FAFC;
  --course-code-bg:#0B1220;
  --course-code-fg:#E2E8F0;
}

.prose .lead{font-size:18px;color:#334155;margin-bottom:18px}
.prose .small{font-size:13px}
.prose .muted{color:var(--slate)}
.prose .wide{overflow-x:auto;margin:18px 0}
.prose .wide table{min-width:700px}
.prose pre{background:var(--course-code-bg);color:var(--course-code-fg);border-radius:14px;padding:18px 20px;overflow:auto;font-size:13px;line-height:1.55;margin:18px 0}
.prose code,.prose .inline-code{font-family:var(--mono)}
.prose .inline-code{background:#EEF2FF;border:1px solid #C7D2FE;border-radius:6px;padding:1px 5px;color:#1D4ED8}

/* Plain text examples: not terminal blocks */
.prose pre code{background:transparent;border:0;padding:0;border-radius:0;color:inherit;font-size:inherit}
.prose pre.code-block-text{background:#FFFFFF;color:var(--ink-2);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow-xs);white-space:pre-wrap}
.prose pre.code-block-text code{font-family:var(--font-sans);font-size:15.5px;line-height:1.65;white-space:pre-wrap;color:inherit}
.prose pre.code-block-text:hover{border-color:var(--blue-200);box-shadow:var(--shadow-sm)}

.prose .phase-strip{display:flex;gap:8px;flex-wrap:wrap;margin:5px 0 16px}
.prose .phase-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-weight:800;color:var(--slate);background:#fff}
.prose .phase-dot.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.prose .phase-label{display:inline-block;color:var(--course-blue2);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.06em;margin-bottom:6px}

.prose .callout{margin:18px 0}
.prose .callout-title{display:block;font-weight:800;color:#0F172A;margin-bottom:5px}
.prose .callout.term{--cl-bg:#FAF5FF;--cl-fg:var(--course-purple);--cl-bd:#E9D5FF}
.prose .callout.analogy{--cl-bg:#FFFBEB;--cl-fg:var(--gold-600);--cl-bd:#FDE68A}
.prose .callout.summary{--cl-bg:#ECFEFF;--cl-fg:var(--course-teal);--cl-bd:#BAE6FD}
.prose .callout.exercise{--cl-bg:#FFF7ED;--cl-fg:var(--course-orange);--cl-bd:#FED7AA}
.prose .callout.fact{--cl-bg:#FDF2F8;--cl-fg:var(--course-pink);--cl-bd:#FBCFE8}
.prose .callout.prereq{--cl-bg:#F0FDF4;--cl-fg:var(--course-green);--cl-bd:#BBF7D0}
.prose .callout.mistake{--cl-bg:#FEF2F2;--cl-fg:var(--course-red);--cl-bd:#FECACA}
.prose .callout .callout-title{color:var(--cl-fg,var(--accent))}

.prose .diagram{border:1px dashed #CBD5E1;border-radius:18px;background:#F8FAFC;padding:18px;margin:18px 0}
.prose .react-flow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.prose .react-box{min-width:130px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;font-weight:800}
.prose .arrow{color:var(--accent);font-weight:900}

.prose .glossary-nav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.prose .glossary-nav a{text-decoration:none;background:var(--course-glossary-nav-bg);color:var(--course-glossary-nav-fg);border-radius:999px;padding:6px 10px;font-weight:800;font-size:12px;transition:transform .15s, box-shadow .15s, background .15s}
.prose .glossary-nav a:hover{background:#DBEAFE;box-shadow:var(--shadow-xs);transform:translateY(-1px)}
.prose .glossary-letter{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);color:var(--course-blue2);font-family:var(--font-display);font-size:22px}
.prose .glossary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 12px}
.prose .term-card{background:var(--course-glossary-card-bg);border:1px solid var(--line);border-radius:14px;padding:13px 14px;color:var(--ink-2);line-height:1.55}
.prose .term-card strong{display:block;margin-bottom:4px;color:var(--ink);font-weight:800}

@media(max-width:900px){
  .prose .glossary-grid{grid-template-columns:1fr}
  .prose .wide table{min-width:640px}
}


/* ==========================================================================
   Agentic AI source import additions — verified v3 source
   ========================================================================== */
.prose .pills{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 20px}
.prose .pill{display:inline-flex;align-items:center;gap:7px;border:1px solid #D6E2FF;background:#EEF4FF;color:var(--accent);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;letter-spacing:.01em}
.prose .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.prose .hero-pdf{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border:1px solid #FDE68A;background:#FFFBEB;color:#92400E;border-radius:14px;padding:10px 14px;font-weight:800;box-shadow:var(--shadow-xs)}
.prose .hero-pdf:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.prose .source-card{border:1px solid var(--line);background:#FFFFFF;border-radius:18px;padding:18px 20px;box-shadow:var(--shadow-xs);margin:18px 0}
.prose .source-card strong{color:var(--ink)}
.prose .source-card em{color:var(--slate)}
.prose .card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow-xs);margin:18px 0}
.prose .hero-source-note{font-size:14px;color:var(--slate);line-height:1.65}
.prose .phase-strip .step-circle,
.prose .step-circle{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;border:1px solid var(--line);font-weight:800;color:var(--slate);background:#fff;margin:0 3px 6px 0}
.prose .step-circle.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.prose .brand-pdf-icon{display:none}
.prose .footer{border-top:1px solid var(--line);margin-top:24px;padding-top:18px;color:var(--slate);font-size:14px}
.prose .copy{color:var(--slate);font-size:13px;line-height:1.6}



/* Prompt and memory examples */
.prose .prompt-examples,
.prose .memory-examples{display:grid;gap:12px;margin:24px 0 30px}
.prose .prompt-examples h3,
.prose .memory-examples h4{margin:0 0 4px;font-family:var(--font-display);font-weight:800;color:var(--ink);line-height:1.35}
.prose .memory-examples h4{font-size:18px}
.prose .prompt-card,
.prose .memory-record{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:#FFFFFF;box-shadow:var(--shadow-xs);padding:17px 19px 17px 22px;overflow:hidden}
.prose .prompt-card::before,
.prose .memory-record::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:999px;background:var(--accent)}
.prose .prompt-card--good::before,
.prose .memory-record--good::before{background:var(--success)}
.prose .prompt-card--bad::before{background:var(--warning)}
.prose .memory-record--bad::before{background:var(--danger)}
.prose .prompt-card__label,
.prose .memory-record__badge,
.prose .memory-record__type{display:inline-flex;align-items:center;width:max-content;border-radius:var(--r-pill);padding:5px 10px;font-size:12px;font-weight:800;line-height:1;letter-spacing:.02em}
.prose .prompt-card__label,
.prose .memory-record__badge{margin-bottom:10px}
.prose .prompt-card--good .prompt-card__label,
.prose .memory-record--good .memory-record__badge{background:var(--success-soft);border:1px solid var(--success-line);color:#166534}
.prose .prompt-card--bad .prompt-card__label{background:var(--warning-soft);border:1px solid var(--warning-line);color:#92400E}
.prose .memory-record--bad .memory-record__badge{background:var(--danger-soft);border:1px solid var(--danger-line);color:#991B1B}
.prose .memory-record__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.prose .memory-record__head .memory-record__badge{margin-bottom:0}
.prose .memory-record__type{background:var(--bg-alt);border:1px solid var(--line);color:var(--slate);font-size:11px}
.prose .prompt-card p,
.prose .memory-record p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.65}
.prose .memory-record__why,
.prose .prompt-examples__note{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:14px;line-height:1.55;color:var(--slate)}
.prose .memory-record__why strong{color:var(--ink);font-weight:800}
.prose .prompt-examples__note{margin-bottom:0}
.prose .prompt-card:hover,
.prose .memory-record:hover{border-color:var(--blue-200);box-shadow:var(--shadow-sm)}

/* ==========================================================================
   Odysseus course components
   ========================================================================== */
.prose .course-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0}
.prose .stat-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow-xs)}
.prose .stat-card b{display:block;font-family:var(--font-display);font-size:24px;line-height:1;color:var(--accent);margin-bottom:6px}
.prose .stat-card span{font-size:13px;color:var(--slate);font-weight:700}
.prose .course-index{display:grid;grid-template-columns:1fr;gap:10px;counter-reset:course;margin:22px 0 0;padding:0;list-style:none}
.prose .course-index li{margin:0;padding:0}
.prose .course-index a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px 16px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-xs);transition:transform .15s, box-shadow .15s, border-color .15s}
.prose .course-index a:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--accent)}
.prose .course-index strong{font-weight:800}
.prose .course-index span{font-size:12px;font-weight:700;color:var(--slate-2);white-space:nowrap}
.prose .table-wrap{overflow-x:auto;margin:16px 0;border-radius:var(--r-lg)}
.prose .table-wrap table{min-width:620px;margin:0}
.prose .odysseus-map .react-box{min-width:120px}
.prose blockquote{margin:18px 0;padding:16px 18px;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:var(--r-lg);color:var(--ink-2)}
.prose .code-block-native{border:1px solid rgba(255,255,255,.08)}
@media(max-width:900px){
  .prose .course-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prose .course-index a{grid-template-columns:1fr}
  .prose .course-index span{white-space:normal}
}


@media(max-width:768px){
  .prose .prompt-card,
  .prose .memory-record{padding:15px 16px 15px 18px;border-radius:16px}
  .prose .memory-record__head{align-items:flex-start;flex-direction:column;gap:8px}
  .prose .prompt-card p,
  .prose .memory-record p{font-size:15px}
  .prose pre.code-block-text{padding:14px 16px}
}




/* ==========================================================================
   Codex course components
   ========================================================================== */
.prose .course-contents{
  margin:18px 0 26px;
  padding:0;
  counter-reset:course-contents;
  list-style:none;
  display:grid;
  gap:8px;
}
.prose .course-contents li{
  margin:0;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow-xs);
}
.prose .course-contents li:not(.contents-part){
  counter-increment:course-contents;
}
.prose .course-contents li:not(.contents-part)::before{
  content:counter(course-contents, decimal-leading-zero);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:24px;
  margin-right:10px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-family:var(--font-display);
  font-size:11px;
  font-weight:800;
}
.prose .course-contents a{
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
}
.prose .course-contents a:hover{color:var(--accent)}
.prose .course-contents .contents-part{
  margin-top:10px;
  background:linear-gradient(135deg,var(--hero-from),var(--hero-to));
  color:#fff;
  border-color:transparent;
}
.prose .course-contents .contents-part strong{
  color:#fff;
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:.03em;
}
.prose .task-list-item{
  list-style:none;
  margin-left:-22px;
}
.prose .task-list-item input[type="checkbox"]{
  width:17px;
  height:17px;
  margin-right:8px;
  vertical-align:-3px;
  accent-color:var(--accent);
}
.prose pre .language-text,
.prose pre code.language-text{
  white-space:pre-wrap;
}
.prose code.language-toml,
.prose code.language-yaml,
.prose code.language-bash,
.prose code.language-markdown{
  font-family:var(--mono);
}


/* ==========================================================================
   Mobile UX patch: course home link + safe completion button
   ========================================================================== */

.course-portal-nav{
  padding:0 16px 12px;
  border-bottom:1px solid var(--line);
  background:var(--bg);
}

.course-home-link{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fff,var(--bg-alt));
  color:var(--ink);
  box-shadow:var(--shadow-xs);
  transition:border-color .15s, box-shadow .15s, transform .15s, background .15s;
}

.course-home-link:hover{
  color:var(--ink);
  border-color:var(--blue-200);
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}

.course-home-link__icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--accent-soft);
  color:var(--accent);
}

.course-home-link__icon svg{
  width:18px;
  height:18px;
}

.course-home-link__text{
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

.course-home-link__text b{
  font-weight:800;
  font-size:14px;
  color:var(--ink);
}

.course-home-link__text small{
  margin-top:3px;
  font-size:12px;
  color:var(--slate);
}

/* compact desktop: keep the home link useful, not text-heavy */
.app[data-collapsed="true"] .course-portal-nav{
  padding:12px 0;
  display:flex;
  justify-content:center;
}

.app[data-collapsed="true"] .course-home-link{
  width:54px;
  height:54px;
  padding:0;
  justify-content:center;
  border-radius:16px;
}

.app[data-collapsed="true"] .course-home-link__icon{
  width:34px;
  height:34px;
}

.app[data-collapsed="true"] .course-home-link__text{
  display:none;
}

/* mobile: full drawer entry */
@media (max-width:860px){
  .course-portal-nav{
    padding:0 12px 12px;
    border-bottom:1px solid var(--line);
  }

  .course-home-link{
    min-height:56px;
  }

  .app[data-collapsed="true"] .course-portal-nav{
    display:block;
    padding:0 12px 12px;
  }

  .app[data-collapsed="true"] .course-home-link{
    width:100%;
    height:auto;
    padding:11px 12px;
    justify-content:flex-start;
  }

  .app[data-collapsed="true"] .course-home-link__text{
    display:flex;
  }

  /* Fix: completion CTA must stay inside the content column on mobile */
  .complete-bar{
    align-items:stretch;
    flex-direction:column;
    gap:14px;
    padding:16px;
    margin:28px 0 18px;
    overflow:hidden;
  }

  .complete-bar .cb-actions{
    margin-left:0;
    width:100%;
  }

  .complete-bar .btn{
    width:100%;
    min-height:48px;
    white-space:normal;
    text-align:center;
    line-height:1.25;
    padding:12px 14px;
    box-shadow:none;
  }

  .complete-bar .cb-txt{
    min-width:0;
  }

  .complete-bar .cb-txt b{
    overflow-wrap:anywhere;
  }
}

@media (max-width:480px){
  .topbar{
    gap:9px;
  }

  .topbar-search{
    min-width:0;
  }

  .topbar-search input{
    font-size:14px;
  }

  .ring-wrap{
    flex:0 0 auto;
  }

  .ring-label{
    font-size:12px;
    line-height:1.15;
  }

  .ring-label b{
    font-size:13px;
  }

  .article-card{
    border-radius:20px;
  }

  .complete-bar .btn{
    font-size:14px;
  }
}

/* 404 Page */
.error-body{
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 12%, rgba(30,80,224,.14), transparent 34%),
    radial-gradient(circle at 10% 82%, rgba(240,178,74,.10), transparent 30%),
    var(--bg-alt);
}

.error-topbar{
  border-bottom:1px solid var(--line);
}

.amsu-404{
  min-height:calc(100vh - var(--topbar-h));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 24px;
  text-align:center;
  font-family:var(--font-sans);
}

.amsu-404__inner{
  width:min(100%, 640px);
  position:relative;
}

.amsu-404__inner::before{
  content:"";
  position:absolute;
  inset:-44px -32px auto;
  height:220px;
  background:
    radial-gradient(circle at 50% 50%, rgba(30,80,224,.10), transparent 62%),
    radial-gradient(circle at 50% 50%, transparent 34%, rgba(30,80,224,.10) 35%, transparent 36%);
  border-radius:999px;
  z-index:-1;
}

.amsu-404__code{
  font-family:var(--font-display);
  font-size:clamp(6rem, 15vw, 10rem);
  font-weight:800;
  line-height:1;
  margin-bottom:8px;
  display:inline-block;
  background:linear-gradient(135deg, var(--blue-700) 0%, #93c5fd 50%, var(--blue-600) 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:amsu404shimmer 4s ease-in-out infinite;
}

@keyframes amsu404shimmer{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.amsu-404__icon{
  width:64px;
  height:64px;
  margin:0 auto 20px;
  background:var(--accent-soft);
  border:1px solid var(--blue-100);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  box-shadow:var(--shadow-sm);
}

.amsu-404__icon svg{
  width:28px;
  height:28px;
}

.amsu-404__title{
  font-family:var(--font-display);
  font-size:clamp(1.4rem, 3vw, 1.85rem);
  font-weight:700;
  color:var(--ink);
  margin:0 0 12px;
  line-height:1.25;
}

.amsu-404__text{
  max-width:560px;
  margin:0 auto 32px;
  font-size:1.05rem;
  color:var(--slate);
  line-height:1.65;
}

.amsu-404__actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:40px;
}

.amsu-404__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:14px 24px;
  border-radius:12px;
  font-family:var(--font-sans);
  font-size:.92rem;
  font-weight:700;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.amsu-404__btn svg{
  width:18px;
  height:18px;
}

.amsu-404__btn--primary{
  background:var(--accent);
  color:#fff !important;
  box-shadow:0 14px 30px rgba(30,80,224,.22);
}

.amsu-404__btn--primary:hover{
  background:var(--accent-hover);
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 18px 38px rgba(30,80,224,.28);
}

.amsu-404__btn--outline{
  background:var(--bg);
  color:var(--accent) !important;
  border:1px solid var(--line);
  box-shadow:var(--shadow-xs);
}

.amsu-404__btn--outline:hover{
  border-color:var(--blue-200);
  background:var(--accent-soft);
  color:var(--accent-hover) !important;
  transform:translateY(-1px);
}

.amsu-404__links{
  padding-top:32px;
  border-top:1px solid var(--line);
}

.amsu-404__links-title{
  margin-bottom:16px;
  font-size:.75rem;
  font-weight:800;
  color:var(--slate-2);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.amsu-404__links-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.amsu-404__link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.74);
  text-decoration:none;
  color:var(--ink);
  font-size:.9rem;
  font-weight:700;
  text-align:left;
  box-shadow:var(--shadow-xs);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.amsu-404__link:hover{
  border-color:var(--blue-200);
  background:#fff;
  color:var(--accent) !important;
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

.amsu-404__link-icon{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:10px;
  background:var(--bg-alt);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--slate-2);
  transition:background .2s ease, color .2s ease;
}

.amsu-404__link:hover .amsu-404__link-icon{
  background:var(--accent-soft);
  color:var(--accent);
}

.amsu-404__link-icon svg{
  width:16px;
  height:16px;
}

@media (max-width:640px){
  .error-topbar .crumb{
    display:none;
  }

  .amsu-404{
    align-items:flex-start;
    padding:42px 20px 36px;
  }

  .amsu-404__actions{
    flex-direction:column;
    margin-bottom:32px;
  }

  .amsu-404__btn{
    width:100%;
  }

  .amsu-404__links-grid{
    grid-template-columns:1fr;
  }

  .amsu-404__text{
    font-size:1rem;
  }
}



/* ==========================================================================
   Catalog categories + course SVG icons
   ========================================================================== */
.category-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 28px;
}
.category-tab{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--bg);
  color:var(--ink);
  box-shadow:var(--shadow-xs);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.category-tab:hover{
  transform:translateY(-1px);
  border-color:var(--blue-200);
  box-shadow:var(--shadow-sm);
  background:var(--accent-soft);
}
.category-tab__icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  overflow:hidden;
}
.category-tab__icon img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.category-tab span:last-child{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.category-tab b{
  font-size:13px;
  line-height:1.15;
  color:var(--ink);
}
.category-tab small{
  font-size:11px;
  line-height:1.15;
  color:var(--slate-2);
}

.catalog-sections{
  display:flex;
  flex-direction:column;
  gap:38px;
}
.category-section{
  scroll-margin-top:calc(var(--topbar-h) + 16px);
}
.category-section__head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:0 0 16px;
}
.category-section__icon{
  width:52px;
  height:52px;
  flex:0 0 52px;
  border-radius:18px;
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow:var(--shadow-xs);
}
.category-section__icon img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.category-section__head h2{
  margin:0 0 5px;
  font-family:var(--font-display);
  font-size:22px;
  line-height:1.2;
  color:var(--ink);
}
.category-section__head p{
  margin:0;
  max-width:62ch;
  color:var(--slate);
  font-size:14.5px;
  line-height:1.5;
}

/* group headings in catalog left navigation */
.courses-nav > ul{
  gap:16px;
}
.courses-nav-group{
  margin:0;
}
.courses-nav-group > ul{
  margin:7px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  list-style:none;
}
.courses-nav-cat{
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 10px;
  font-size:11px;
  line-height:1.25;
  font-weight:800;
  color:var(--slate-2);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.courses-nav-cat__icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:8px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.courses-nav-cat__icon img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* icon wrappers use real SVG assets */
.chip,
.cchip{
  overflow:hidden;
}
.chip img,
.cchip img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.card-course .ctop{
  align-items:flex-start;
}
.card-course .ctext{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.course-cat-label{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  background:var(--bg-alt);
  border:1px solid var(--line);
  color:var(--slate);
  font-size:11.5px;
  font-weight:700;
  line-height:1.1;
}

/* course sidebar identity */
.course-head-brand{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 14px;
}
.course-head-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:16px;
  overflow:hidden;
  display:grid;
  place-items:center;
  box-shadow:var(--shadow-xs);
}
.course-head-icon img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.course-head-brand__text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.course-head-brand__text span{
  color:var(--slate-2);
  font-size:11px;
  font-weight:800;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.06em;
}

@media (max-width:860px){
  .category-tabs{
    gap:8px;
    margin-bottom:22px;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:2px;
  }
  .category-tab{
    min-width:210px;
  }
  .category-section__head{
    gap:12px;
  }
  .category-section__icon{
    width:44px;
    height:44px;
    flex-basis:44px;
    border-radius:16px;
  }
  .category-section__head h2{
    font-size:18px;
  }
}


/* ==========================================================================
   Mobile catalog layout fix
   Prevent desktop sidebar/card widths from creating horizontal scroll on phones.
   ========================================================================== */
html,
body,
.catalog-body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.layout-catalog,
.catalog-main,
.catalog-sections,
.category-section,
.cards,
.card-course{
  min-width:0;
  max-width:100%;
}

.catalog-main{
  width:100%;
  overflow:hidden;
}

.card-course h3,
.category-section__head h2,
.catalog-hero h1,
.catalog-hero p,
.card-course p{
  overflow-wrap:break-word;
  word-break:normal;
}

.card-course .ctop,
.card-course .ctext,
.category-section__head > div,
.category-tab span:last-child,
.courses-nav a,
.courses-nav a .ttl,
.courses-nav-cat span{
  min-width:0;
}

.courses-nav a .ttl{
  max-width:100%;
}

@media (max-width:860px){
  .catalog-body{
    background:var(--bg-alt);
  }

  .cat-topbar{
    height:64px;
    padding:0 18px;
    gap:12px;
  }

  .cat-topbar .brand{
    min-width:0;
    flex:0 1 auto;
  }

  .cat-topbar .brand .logo{
    width:34px;
    height:34px;
    flex-basis:34px;
  }

  .cat-topbar .brand .bn{
    min-width:0;
  }

  .cat-topbar .brand .bn b{
    font-size:15px;
    white-space:nowrap;
  }

  .cat-topbar .brand .bn span{
    font-size:10px;
  }

  .cat-topbar .crumb{
    display:none;
  }

  .layout-catalog{
    display:block;
    min-height:calc(100vh - var(--topbar-h));
  }

  /*
    На mobile левый каталог-дубль скрывается.
    Выбор курса остаётся доступен через категории и карточки в основной области,
    а курс-ридер сохраняет свой drawer через кнопку меню.
  */
  .courses-nav{
    display:none;
  }

  .catalog-main{
    padding:34px 18px 64px;
    max-width:none;
    width:100%;
  }

  .catalog-hero{
    margin-bottom:26px;
  }

  .catalog-hero .eyebrow{
    margin-bottom:12px;
  }

  .catalog-hero h1{
    font-size:clamp(30px, 9.2vw, 42px);
    line-height:1.08;
    letter-spacing:-.03em;
  }

  .catalog-hero p{
    font-size:18px;
    line-height:1.55;
    max-width:100%;
  }

  .category-tabs{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 2px 4px;
    margin:0 0 30px;
  }

  .category-tabs::-webkit-scrollbar{
    display:none;
  }

  .category-tab{
    flex:0 0 min(82vw, 310px);
    min-width:0;
    max-width:min(82vw, 310px);
    padding:12px;
  }

  .category-tab b{
    white-space:normal;
    overflow-wrap:break-word;
  }

  .catalog-sections{
    gap:34px;
  }

  .category-section__head{
    align-items:flex-start;
  }

  .category-section__head p{
    max-width:100%;
  }

  .cards{
    grid-template-columns:1fr;
    gap:16px;
  }

  .card-course{
    padding:20px;
    border-radius:22px;
  }

  .card-course .ctop{
    gap:14px;
  }

  .card-course .cchip{
    width:48px;
    height:48px;
    flex-basis:48px;
    border-radius:16px;
  }

  .card-course h3{
    font-size:22px;
    line-height:1.18;
  }

  .course-cat-label{
    width:auto;
    max-width:100%;
    align-self:flex-start;
  }

  .card-course p{
    font-size:16px;
    line-height:1.55;
  }

  .card-course .meta{
    gap:8px;
  }
}

@media (max-width:420px){
  .cat-topbar{
    padding:0 14px;
  }

  .cat-topbar .brand .bn b{
    font-size:14px;
  }

  .catalog-main{
    padding:30px 16px 58px;
  }

  .catalog-hero h1{
    font-size:30px;
  }

  .catalog-hero p{
    font-size:17px;
  }

  .category-section__icon{
    width:42px;
    height:42px;
    flex-basis:42px;
  }

  .category-section__head h2{
    font-size:20px;
  }

  .card-course{
    padding:18px;
  }

  .card-course h3{
    font-size:20px;
  }

  .card-course .cchip{
    width:44px;
    height:44px;
    flex-basis:44px;
  }
}


/* ==========================================================================
   Catalog filters + mobile sidebar drawer restore
   ========================================================================== */

.cat-nav-toggle{
  display:none;
  align-items:center;
  gap:8px;
  height:40px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-family:var(--font-sans);
  font-weight:700;
  cursor:pointer;
}
.cat-nav-toggle svg{
  width:20px;
  height:20px;
  flex:0 0 20px;
}

.catalog-filters{
  margin:0 0 30px;
  display:grid;
  gap:16px;
}
.catalog-search{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--bg);
  box-shadow:var(--shadow-xs);
  color:var(--slate-2);
}
.catalog-search svg{
  width:20px;
  height:20px;
  flex:0 0 20px;
}
.catalog-search input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font:600 15px/1.2 var(--font-sans);
}
.catalog-search input::placeholder{
  color:var(--slate-2);
}
.catalog-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.catalog-select{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--bg);
  box-shadow:var(--shadow-xs);
}
.catalog-select span{
  color:var(--slate-2);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.catalog-select select{
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font:700 14px/1.2 var(--font-sans);
  cursor:pointer;
}
.category-tabs{
  margin:0;
}
.category-tab{
  border:1px solid var(--line);
  cursor:pointer;
  font:inherit;
  text-align:left;
}
.category-tab.is-active{
  background:var(--accent-soft);
  border-color:var(--blue-200);
  box-shadow:var(--shadow-sm);
}
.category-tab__icon--all{
  background:var(--bg-alt);
  color:var(--accent);
}
.category-tab__icon--all svg{
  width:18px;
  height:18px;
}
.catalog-sections{
  display:flex;
  flex-direction:column;
  gap:40px;
}
.catalog-empty{
  width:min(100%, 560px);
  padding:28px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--bg);
  box-shadow:var(--shadow-xs);
}
.catalog-empty h2{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:24px;
  line-height:1.2;
}
.catalog-empty p{
  margin:0 0 18px;
  color:var(--slate);
}

.catalog-scrim{
  display:none;
}

@media (max-width:860px){
  .cat-nav-toggle{
    display:inline-flex;
    flex:0 0 auto;
  }

  .cat-nav-toggle span{
    display:none;
  }

  .cat-topbar{
    position:sticky;
    top:0;
    z-index:70;
  }

  .layout-catalog{
    display:block;
  }

  /*
    Mobile: боковой список курсов не дублируется в потоке страницы.
    Он становится скрывающимся drawer и открывается кнопкой «Курсы» в шапке.
  */
  .catalog-body .courses-nav{
    display:block;
    position:fixed;
    left:0;
    top:64px;
    bottom:0;
    width:min(88vw, 360px);
    height:calc(100dvh - 64px);
    z-index:60;
    padding:22px 16px 34px;
    border-right:1px solid var(--line);
    border-bottom:0;
    background:var(--bg);
    box-shadow:var(--shadow-lg);
    transform:translateX(-104%);
    transition:transform .25s ease;
    overflow:auto;
    overscroll-behavior:contain;
  }

  .catalog-body[data-catalog-nav-open="true"] .courses-nav{
    transform:translateX(0);
  }

  .catalog-scrim{
    position:fixed;
    inset:64px 0 0;
    z-index:55;
    display:block;
    background:rgba(11,27,64,.42);
    backdrop-filter:blur(2px);
  }

  .catalog-scrim[hidden]{
    display:none !important;
  }

  .catalog-body[data-catalog-nav-open="true"]{
    overflow:hidden;
  }

  .catalog-filters{
    gap:14px;
    margin-bottom:28px;
  }

  .catalog-filter-row{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .catalog-select{
    width:100%;
    justify-content:space-between;
  }

  .catalog-select select{
    min-width:0;
    max-width:62%;
  }

  .catalog-main{
    overflow:hidden;
  }

  .catalog-sections{
    gap:34px;
  }

  .category-section .cards{
    grid-template-columns:1fr;
  }

  .category-tab{
    min-width:220px;
  }
}

@media (max-width:420px){
  .catalog-search{
    min-height:50px;
    border-radius:16px;
  }

  .catalog-select{
    min-height:42px;
  }

  .category-tab{
    min-width:210px;
  }
}


/* ==========================================================================
   Catalog filter refinements: category dropdown + type filter
   ========================================================================== */

.catalog-filter-row{
  align-items:stretch;
}

.catalog-select--category{
  min-width:min(100%, 360px);
}

.catalog-select--category select{
  min-width:220px;
}

@media (min-width:861px){
  .catalog-filter-row{
    display:flex;
    align-items:center;
  }

  .catalog-select{
    flex:0 1 auto;
  }

  .catalog-select--category{
    flex:0 1 420px;
  }
}

@media (max-width:860px){
  .catalog-select--category,
  .catalog-select--category select{
    width:100%;
    min-width:0;
  }

  .catalog-select select{
    max-width:100%;
  }
}

/* ==========================================================================
   Course sidebar: long Codex chapter titles must wrap inside menu width
   ========================================================================== */

.ch .cb{
  min-width:0;
  max-width:100%;
  overflow:hidden;
}

.ch .ct{
  display:block;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}

.ch .cm{
  max-width:100%;
  overflow-wrap:anywhere;
  white-space:normal;
}

.course-head h2,
.course-head .sub,
.course-head-brand__text{
  max-width:100%;
  overflow-wrap:anywhere;
}

@media (max-width:900px){
  .sidebar .ch{
    align-items:flex-start;
  }

  .sidebar .ch .ct{
    font-size:14px;
    line-height:1.28;
  }
}


/* ==========================================================================
   Codex course: official reference screenshots
   ========================================================================== */

.course-screenshot-set{
  margin:28px 0 34px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(239,246,255,.72), rgba(255,255,255,.92));
  box-shadow:var(--shadow-sm);
}

.course-screenshot-set__head{
  margin-bottom:18px;
}

.course-screenshot-set__head h3{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:20px;
  line-height:1.25;
  color:var(--ink);
}

.course-screenshot-set__head p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}

.course-screenshot-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.course-screenshot{
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--card);
  box-shadow:0 12px 30px rgba(15,23,42,.08);
}

.course-screenshot a{
  color:inherit;
  text-decoration:none;
}

.course-screenshot img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  background:#0f172a;
  border-bottom:1px solid var(--line);
}

.course-screenshot figcaption{
  display:grid;
  gap:8px;
  padding:14px 16px 16px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.course-screenshot figcaption b{
  color:var(--ink);
  font-size:14px;
  line-height:1.35;
}

.course-screenshot figcaption a{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}

@media (max-width:860px){
  .course-screenshot-set{
    padding:16px;
    border-radius:20px;
  }

  .course-screenshot-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .course-screenshot img{
    aspect-ratio:16/11;
  }
}


/* ==========================================================================
   Glossary interactions: tooltip + external glossary opening
   ========================================================================== */
.prose a.glossary-link{
  position:relative;
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  font-weight:700;
  cursor:help;
}
.prose a.glossary-link:hover,
.prose a.glossary-link:focus-visible{
  color:var(--accent-strong);
  border-bottom-style:solid;
  outline:none;
}
.prose a.glossary-link::after{
  content:"↗";
  display:inline-block;
  margin-left:3px;
  font-size:.72em;
  line-height:1;
  opacity:.65;
  transform:translateY(-1px);
}
.glossary-tooltip{
  position:fixed;
  z-index:9999;
  padding:13px 15px 14px;
  border:1px solid rgba(214,226,255,.95);
  border-radius:16px;
  background:rgba(255,255,255,.98);
  box-shadow:0 18px 55px rgba(11,27,64,.18);
  color:var(--ink-2);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.5;
  pointer-events:none;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .14s ease, transform .14s ease;
}
.glossary-tooltip.open{
  opacity:1;
  transform:translateY(0);
}
.glossary-tooltip b{
  display:block;
  margin:0 0 5px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:13px;
  line-height:1.35;
}
.glossary-tooltip span{
  display:block;
  color:var(--slate);
}
.prose .term-card:target{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(46,91,234,.12), var(--shadow-sm);
}
@media(max-width:860px){
  .glossary-tooltip{display:none}
  .prose a.glossary-link{cursor:pointer}
}