:root {
    --bg: #11151f; --panel: #1a1f2d; --panel2: #141926;
    --ink: #e4e9f2; --ink-dim: #8d97ad; --line: #2b3242;
    --accent: #b9c8ec; --on-accent: #11151f; --good: #7dcf92;
    --font-display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    color-scheme: dark;
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --bg: #e9edf2; --panel: #f6f8fb; --panel2: #eef1f6;
      --ink: #1d2433; --ink-dim: #5d6880; --line: #c7cfdb;
      --accent: #2e3a6b; --on-accent: #f6f8fb; --good: #2f7a45;
      color-scheme: light;
    }
  }
  * { box-sizing: border-box; }
  /* display:flex у .row перебивает атрибут hidden — без этого
     правила скрытые блоки всё равно показываются */
  [hidden] { display: none !important; }
  html, body { margin: 0; }
  body {
    background: var(--bg); color: var(--ink);
    font-family: var(--font-display); font-size: 15px; line-height: 1.45;
    -webkit-text-size-adjust: 100%;
  }
  .wrap {
    max-width: 1180px; margin: 0 auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-block: 18px 30px;
    display: flex; flex-direction: column; gap: 13px;
  }
  header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
  h1 { font-size: clamp(19px, 3.2vw, 25px); font-weight: 600; letter-spacing: -0.015em; margin: 0; }
  .uname { color: var(--ink-dim); font-size: 15px; }
  .tag {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em;
    border: 1px solid var(--line); border-radius: 3px; padding: 2px 7px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  /* имя игрока стоит плашкой в шапке, рядом с «в прямом эфире»:
     оно придумывается само и правится прямо там */
  /* 19 знаков — длиннейшее имя героя («Stella Calloway») плюс запас:
     на 15 хвост фамилии обрезался */
  .tag.who { flex: 0 0 auto; width: 19ch; min-width: 0; background: var(--panel);
             color: var(--ink); line-height: 1.25; text-overflow: ellipsis; }
  .tag.who:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  .tag.live { border-color: #3f7d4f; color: var(--good); }
  .tag.off { border-color: #7d3f3f; color: #e08a8a; }
  .tag.rec { border-color: #8a6a2a; color: #e8a24a; }
  .tag.lord { font-weight: 600; }
  .tag.lord b { font-weight: 600; }
  .lede { color: var(--ink-dim); font-size: 13.5px; max-width: 72ch; margin: 0; }
  /* вводный текст и панель заселения стоят в одну строку: справа от текста */
  /* левая колонка ростом с панель заселения: показания прижаты к её низу,
     и нижние края текста и панели сходятся (правка 08.11) */
  .intro { display: grid; grid-template-columns: 1fr; gap: 13px; align-items: stretch; }
  .ledes { display: flex; flex-direction: column; gap: 9px; }
  .ledes .readout { margin-top: auto; margin-bottom: 0; }   /* низ в низ с панелью */
  @media (min-width: 980px) { .intro { grid-template-columns: minmax(0, 1fr) 430px; } }

  .board { display: flex; gap: 8px; align-items: stretch; }
  .board .aq { flex: 1 1 auto; min-width: 0; }
  .zoomcol {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 4px 0;
  }
  .zoomcol input[type="range"] {
    writing-mode: vertical-lr; direction: rtl;
    -webkit-appearance: slider-vertical;
    width: 22px; flex: 1 1 auto; min-height: 90px; margin: 0;
  }
  .zoomcol .tag { font-size: 11px; padding: 2px 5px; white-space: nowrap; }
  .zoomcol #follow { font-size: 11px; padding: 3px 6px; }
  /* кого камера ведёт прямо сейчас */
  .who-follow { display: flex; align-items: center; gap: 4px; font-size: 10px;
                letter-spacing: 0; max-width: 92px; }
  .who-follow i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
  .who-follow b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
  button.chip.tiny { font-size: 11px; padding: 3px 7px; }
  button.zbtn {
    font-family: var(--font-mono); font-size: 16px; line-height: 1;
    width: 30px; height: 28px; padding: 0; flex: none;
  }
  .aq {
    border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
    background: var(--panel2); line-height: 0;
    /* рамка всегда одного размера: масштаб меняет не её, а то, что внутри */
    aspect-ratio: 320 / 180; width: 100%;
  }
  canvas.world { width: 100%; height: 100%; display: block; }
  .aq { cursor: grab; }
  .aq.zoomed.drag { cursor: grabbing; }

  .readout {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 1px; background: var(--line); border: 1px solid var(--line);
    border-radius: 6px; overflow: hidden;
  }
  .st { background: var(--panel); padding: 7px 9px; min-width: 0; }
  .st dt { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.03em;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
           text-transform: uppercase; color: var(--ink-dim); margin: 0; }
  .st dd { margin: 2px 0 0; font-family: var(--font-mono); font-size: 15px; font-weight: 500;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
           font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .st dd.sm { font-size: 13px; line-height: 1.5; padding-block: 3px; }
  .st dd.tight { font-size: 13px; }

  .cols { display: grid; grid-template-columns: 1fr; gap: 13px; }
  @media (min-width: 900px) { .cols { grid-template-columns: 1fr 1fr; } }

  .box { background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
         padding: 12px; min-width: 0; }
  .box h2 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
            text-transform: uppercase; color: var(--ink-dim); margin: 0 0 9px; font-weight: 500; }

  .dot { width: 10px; height: 10px; border-radius: 2px; flex: none; align-self: center; }
  /* Карточки колоний под статистикой. Сетка с одинаковыми кубиками и
     ФИКСИРОВАННЫМИ колонками внутри: от длины имени и от того, сколько
     цифр в числе, ширина карточки и вёрстка не едут */
  /* бегущая строка колоний: одна строка вместо сетки карточек —
     постоянно открытыми они не нужны, а места занимали много (08.11) */
  .legend { overflow: hidden; margin: 0 0 10px; }
  .tick { display: flex; gap: 6px; width: max-content; will-change: transform; }
  .legend .lg {
    display: flex; flex: none; align-items: center; gap: 7px;
    border: 1px solid var(--line); border-radius: 6px;
    background: var(--panel); padding: 5px 8px; font-size: 12px; line-height: 1.2;
    font-variant-numeric: tabular-nums;
  }
  .legend .sw { width: 11px; height: 11px; border-radius: 2px; }
  .legend .lgn { font-weight: 600; white-space: nowrap; }
  .legend .lgp, .legend .lga, .legend .lgd {
    font-family: var(--font-mono); text-align: right; white-space: nowrap;
  }
  .legend .lgp { opacity: .75; }
  .legend .lga { opacity: .55; }
  .legend .lgd { font-size: 11px; }
  .legend .lgd.up { color: var(--good); }
  .legend .lgd.down { color: #e07a7a; }
  .legend .lgd.flat { opacity: .3; }
  .legend .lg.lord { border-color: currentColor; }
  .legend .lg.more { display: flex; justify-content: center; color: var(--ink-dim); }

  .tblwrap { overflow-x: auto; }
  table.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
  table.tbl th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
                 text-transform: uppercase; color: var(--ink-dim); font-weight: 500;
                 text-align: left; padding: 0 10px 7px 0; white-space: nowrap;
                 border-bottom: 1px solid var(--line); }
  table.tbl td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
  table.tbl tr:last-child td { border-bottom: 0; }
  table.tbl .n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  table.tbl .out { color: var(--ink-dim); font-size: 12.5px; }
  table.tbl tr.now td { background: color-mix(in srgb, var(--accent) 9%, transparent); }
  table.tbl tr.now td:first-child { font-weight: 600; }
  table.tbl td.best { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

  button {
    font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--ink);
    background: transparent; border: 1px solid var(--line); border-radius: 4px;
    padding: 6px 10px; cursor: pointer;
  }
  button:hover:not(:disabled) { border-color: var(--accent); }
  button:disabled { opacity: .45; cursor: default; }
  button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  button.bit { font-family: var(--font-mono); width: 26px; padding: 4px 0; text-align: center; }
  button.chip { font-size: 12.5px; padding: 5px 9px; }
  button.chip i { font-style: normal; font-family: var(--font-mono); font-size: 10px;
                  color: var(--ink-dim); margin-left: 5px; }
  button.chip.on i { color: var(--on-accent); opacity: .72; }
  button.go { background: var(--accent); border-color: var(--accent); color: var(--on-accent);
              padding: 7px 16px; font-size: 13.5px; }
  button.tiny { font-size: 11px; padding: 2px 6px; }

  .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 9px; }
  .row:last-child { margin-bottom: 0; }
  .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.09em;
         text-transform: uppercase; color: var(--ink-dim); }
  input[type="text"], input[type="password"] {
    font-family: var(--font-mono); font-size: 13px; color: var(--ink);
    background: var(--panel2); border: 1px solid var(--line); border-radius: 4px;
    padding: 6px 9px; min-width: 0; flex: 1 1 130px;
  }
  input[type="range"] { accent-color: var(--accent); flex: 1 1 110px; min-width: 90px; }
  .note { font-size: 12.5px; color: var(--ink-dim); margin: 9px 0 0; }
  .msg { font-size: 13px; margin: 9px 0 0; min-height: 1.4em; }
  .msg.ok { color: var(--good); }
  .msg.err { color: #e08a8a; }

  .editor { --pad: 208px; display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
  .pad {
    display: grid; grid-template-columns: repeat(16, 1fr); gap: 1px;
    width: var(--pad); height: var(--pad); flex: none; background: var(--line);
    border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
    touch-action: none; user-select: none;
  }
  .pad span { background: var(--panel2); cursor: crosshair; }
  .pad span.on { background: var(--accent); }
  /* кнопки фигур стоят колонкой справа от сетки — там всё равно пусто,
     а снизу они занимали целую строку */
  /* колонка ростом точно с сетку: «Заселить арену» садится на её нижний край,
     а зазоры между кнопками разбираются сами (--pad задан в .editor) */
  .shapes { display: flex; flex-direction: column; gap: 4px;
            height: var(--pad); flex: 1 1 auto; min-width: 0; }
  /* кнопки делят высоту сетки поровну — тогда нижний край «Заселить арену»
     ложится ровно на нижний край сетки при любом шрифте */
  .shapes > button { flex: 1 1 0; min-height: 0; padding-block: 0; }
  .shapes .lbl { margin-bottom: 1px; }
  .shapes button.chip, .shapes button.go { width: 100%; text-align: center; }
  /* «Заселить арену» живёт в той же колонке, но отбита от списка фигур */
  .shapes button.go { margin-top: 2px; }
  .ed-side { margin-top: 10px; }
  /* имя колонии живёт в шапке панели: оно генерится само, и целой строки
     под сеткой для него было жалко */
  .boxhead { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; }
  .boxhead h2 { margin: 0; flex: none; }
  /* имя колонии тянется до правого края карточки */
  .boxhead { justify-content: space-between; }
  .boxhead input { flex: 1 1 auto; min-width: 0; }
  footer { color: var(--ink-dim); font-size: 12.5px; }
  code { font-family: var(--font-mono); font-size: 12px; background: var(--panel2);
         border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; }

  /* ================= дизайн-система Pixel Arena =================
     Токены — из системы «Pixel Arena» (цвет, кегли, шаги, радиусы, свечение).
     Правила идут ПОСЛЕ стилей аквариума, поэтому переопределяют их токены,
     а сам аквариум на film-movie.ru остаётся в прежних цветах.
     Старые имена (--bg, --panel, --accent) оставлены псевдонимами: стили
     аквариума читают их и получают те же значения — один источник на всё. */
  :root, :root[data-theme="dark"] {
    /* поверхности, текст, линии */
    --surface-000: #0b0d12; --surface-100: #11151d; --surface-200: #151b25;
    --ink: #eef2f8; --ink-dim: #8994a6; --on-accent: #06110d;
    --line: #263041; --line-live: #3f7d4f; --line-rec: #8a6a2a; --line-off: #7d3f3f;
    /* неон: mint несёт живое, остальные четыре — смысловые */
    --mint: #35e6a8; --mint-underline: #35e6a859;
    --cyan: #22d3ee; --violet: #8b5cf6; --magenta: #f472d6;
    --amber: #e8a24a; --coral: #e08a8a;
    /* шаги отступов и радиусы */
    --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 9px;
    --space-5: 12px; --space-6: 13px; --space-7: 18px; --space-8: 28px;
    --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px;
    /* свечение: только на живом и активном, никогда под текстом */
    --glow-mint: 0 0 18px rgba(53,230,168,0.35);
    --glow-mint-soft: 0 0 10px rgba(53,230,168,0.22);
    --glow-violet: 0 0 18px rgba(139,92,246,0.35);
    --glow-amber: 0 0 18px rgba(232,162,74,0.32);
    --glow-coral: 0 0 18px rgba(224,138,138,0.32);
    --ring-mint: 0 0 0 2px #35e6a8;
    --panel-lift: inset 0 1px 0 rgba(238,242,248,0.05);
    /* псевдонимы для стилей аквариума */
    --bg: var(--surface-000); --panel: var(--surface-200); --panel2: var(--surface-100);
    --accent: var(--mint); --good: var(--mint);
    --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-head: "Rajdhani", "Space Grotesk", ui-sans-serif, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    color-scheme: dark;
  }
  /* Сайт тёмный всегда: светлая тема системы его не перекрашивает.
     Светлый блок аквариума бьёт селектором :root:not([data-theme="dark"]),
     он специфичнее нашего :root — поэтому перебиваем его тем же селектором. */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --ink: #eef2f8; --ink-dim: #8994a6; --line: #263041;
      --bg: var(--surface-000); --panel: var(--surface-200); --panel2: var(--surface-100);
      --accent: var(--mint); --good: var(--mint); --on-accent: #06110d;
      color-scheme: dark;
    }
  }
  body { background: var(--bg); color: var(--ink); }

  /* -------- верхняя полоса -------- */
  .strip {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-5);
    font-family: var(--font-head); font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim);
    border-bottom: 1px solid var(--line); padding-bottom: var(--space-4);
  }
  .strip .r { color: var(--mint); }


  /* -------- знак бренда в шапке: тот же, что на обложке системы -------- */
  .brandrow { display: flex; align-items: center; justify-content: center;
              gap: 18px; flex-wrap: wrap; }
  .brandart { height: 54px; width: auto; max-width: 300px; flex: none; display: block; }
  .brandart .b-lg { rx: var(--radius-lg); }
  .brandart .b-sm { rx: var(--radius-sm); }
  .brandart .b-px { rx: var(--radius-xs); }
  .brandart .b-mint { fill: var(--mint); }
  .brandart .b-cyan { fill: var(--cyan); }
  .brandart .b-violet { fill: var(--violet); }
  .brandart .b-magenta { fill: var(--magenta); }
  .brandart .b-amber { fill: var(--amber); }
  .brandart .b-coral { fill: var(--coral); }
  .brandart .b-panel { fill: var(--surface-200); }
  .brandart .b-ground { fill: var(--surface-000); }
  /* на телефоне знак уводит логотип на вторую строку — там он лишний */
  @media (max-width: 640px) { .brandart { display: none; } }

  /* -------- логотип и навигация -------- */
  .wordmark {
    font-family: var(--font-head); font-weight: 700; font-size: clamp(26px, 5vw, 40px);
    letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
    color: var(--ink); line-height: 1; display: block; text-align: center;
  }
  .wordmark i { font-style: normal; color: var(--mint); }
  .tagline {
    font-family: var(--font-head); font-size: 11px; font-weight: 600;
    letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-dim);
    text-align: center; margin: var(--space-2) 0 0;
  }
  nav.top {
    display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); justify-content: center;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: var(--space-4) 0; margin-top: var(--space-5);
  }
  nav.top a {
    font-family: var(--font-head); font-size: 13px; font-weight: 600;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-dim);
    text-decoration: none; padding: var(--space-2) 10px; border-radius: var(--radius-sm);
  }
  nav.top a:hover { color: var(--ink); }
  /* активный раздел — единственное постоянное свечение в каркасе */
  nav.top a[aria-current="page"] { color: var(--mint); box-shadow: var(--glow-mint-soft); }

  /* -------- заголовки и статьи -------- */
  h1, article h1 {
    font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.01em; line-height: 1.04;
    font-size: clamp(26px, 5vw, 42px); margin: 0 0 var(--space-5);
  }
  header h1 { font-size: clamp(24px, 4.4vw, 34px); }
  article h2 {
    font-family: var(--font-head); font-weight: 700; letter-spacing: 0.02em;
    font-size: clamp(19px, 2.8vw, 24px); margin: var(--space-8) 0 var(--space-4);
    line-height: 1.15;
  }
  article h3 { font-family: var(--font-head); font-weight: 700; font-size: 17px;
                margin: var(--space-7) 0 var(--space-3); }
  article { max-width: 78ch; }
  article p { margin: 0 0 11px; font-size: 15px; line-height: 1.55; }
  article p.lede, .lede { color: var(--ink-dim); font-size: 16px; line-height: 1.5; }
  article ul, article ol { margin: 0 0 var(--space-5); padding-left: 22px; font-size: 15px;
                           line-height: 1.55; }
  article li { margin: 0 0 var(--space-3); }
  article a { color: var(--mint); text-decoration-color: var(--mint-underline);
              text-underline-offset: 2px; }
  article a:hover { text-decoration-color: var(--mint); }
  /* внешние источники — cyan: по цвету видно, что ссылка уводит с сайта */
  article a[href^="http"] { color: var(--cyan); text-decoration-color: rgba(34,211,238,.35); }
  article a[href^="http"]:hover { text-decoration-color: var(--cyan); }
  article .mono { font-family: var(--font-mono); font-size: 13px;
                  font-variant-numeric: tabular-nums; color: var(--mint); }
  .crumbs { font-family: var(--font-head); font-size: 11.5px; font-weight: 600;
            letter-spacing: 0.14em; text-transform: uppercase;
            color: var(--ink-dim); margin: 0 0 10px; }
  .crumbs a { color: var(--ink-dim); text-decoration: none; }
  .crumbs a:hover { color: var(--mint); }

  /* -------- мелкие заголовки блоков: мятные капсом -------- */
  .goal h3, .box h2, .seealso h2, .st dt, .lbl {
    font-family: var(--font-head); font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--mint);
  }
  .goal h3, .box h2, .seealso h2 { font-size: 12px; }
  .st dt, .lbl { font-size: 11px; color: var(--ink-dim); }
  .goal { border-left-color: var(--mint); }

  /* -------- кнопки и ссылка-призыв -------- */
  .cta {
    display: inline-block; background: var(--mint); border: 1px solid var(--mint);
    color: var(--on-accent); border-radius: var(--radius-sm); padding: 10px var(--space-7);
    font-family: var(--font-head); font-size: 14px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
    margin: var(--space-3) 0 var(--space-7);
  }
  /* свечение означает «курсор здесь», а не «нажми меня»: в покое его нет */
  .cta:hover { filter: none; box-shadow: var(--glow-mint); }
  button.go { font-family: var(--font-head); font-weight: 700; letter-spacing: 0.08em;
              text-transform: uppercase; }
  button:hover { border-color: var(--mint); color: var(--mint); }

  /* -------- фокус виден на всём, а не только на кнопках -------- */
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, [tabindex]:focus-visible {
    outline: none; box-shadow: var(--ring-mint); border-radius: var(--radius-sm);
  }

  /* -------- состояния: цвет повторяет слово, но не заменяет его -------- */
  .tag.live { border-color: var(--line-live); color: var(--mint);
              box-shadow: var(--glow-mint-soft); }
  .tag.rec { border-color: var(--line-rec); color: var(--amber); }
  .tag.off { border-color: var(--line-off); color: var(--coral); }
  .tally.rec b, .crown { color: var(--amber); }
  .mine.dead { border-left-color: var(--coral); }
  .mine.lording { border-left-color: var(--amber); box-shadow: var(--glow-amber); }
  .msg.err { color: var(--coral); }

  /* -------- поле арены: продолжение фона страницы, светится пока идёт -------- */
  .aq { background: var(--surface-000); border-radius: var(--radius-lg);
        box-shadow: var(--glow-mint); }

  /* -------- карточки: рамка и блик по кромке, тени под блоком нет -------- */
  .box, .seealso, .tally, .readout .st { box-shadow: var(--panel-lift); }
  .box, .readout { border-radius: var(--radius-lg); }

  /* -------- таблица законов -------- */
  table.rules { border-collapse: collapse; width: 100%; font-size: 14px; }
  table.rules th { font-family: var(--font-head); font-size: 11px; letter-spacing: 0.14em;
                   text-transform: uppercase; color: var(--mint); font-weight: 600;
                   text-align: left; padding: 7px var(--space-4);
                   border-bottom: 1px solid var(--line); }
  table.rules td { padding: 8px var(--space-4); border-bottom: 1px solid var(--line);
                   vertical-align: top; }
  table.rules td.m { font-family: var(--font-mono); font-size: 13px; white-space: nowrap;
                     color: var(--mint); font-variant-numeric: tabular-nums; }
  table.rules tr:last-child td { border-bottom: 0; }

  .seealso { border: 1px solid var(--line); border-left: 3px solid var(--mint);
             border-radius: var(--radius-md); background: var(--panel);
             padding: var(--space-5) 15px; margin: 20px 0 0; }
  .seealso ul { margin: 0; padding-left: 18px; font-size: 14px; }
  footer { font-size: 13px; }