:root {
  --ink:        #07141A;
  --ink-raised: #0C1F27;
  --ink-deep:   #040C10;

  --bone:       #E2EDEE;
  --bone-dim:   #93AAB0;
  --bone-faint: #5A747B;

  --surf:       #45D1C4;
  --surf-lit:   #93F0E5;
  --surf-text:  #03211E;
  --glow:       #4C9BFF;
  --glow-lit:   #8CC2FF;
  --glow-text:  #021431;
  --abyss:      #2F6BE0;

  /* Свечение глубины - по умолчанию; .cold переключает раздел на мелководье. */
  --accent:      var(--glow);
  --accent-lit:  var(--glow-lit);
  --accent-text: var(--glow-text);
  --accent-glow: rgba(140,194,255,0.08);

  --flesh:      #8E3B4A;
  --moss:       #6B7A5A;

  --edge:       #13303A;
  --edge-lit:   #1E4450;

  --display: 'Alegreya', 'Iowan Old Style', Georgia, serif;
  --body:    'Golos Text', 'Segoe UI', system-ui, sans-serif;

  --measure: 62ch;
  --gutter: clamp(1rem, 4vw, 3rem);

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --step-2:  clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.3rem, 1.7rem + 2.6vw, 4rem);
  --step-4:  clamp(3rem, 1.8rem + 5.5vw, 7rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scrollbar-gutter: stable; }
html, body { margin: 0; }
body { background: var(--ink); color: var(--bone); font-family: var(--body); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; }
html[data-lang="en"] [data-only="ru"], html[data-lang="ru"] [data-only="en"] { display: none; }
[hidden] { display: none !important; }
a { color: var(--surf-lit); text-underline-offset: 0.2em; }
a:hover { color: var(--bone); }
:focus-visible { outline: 2px solid var(--surf-lit); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.08; margin: 0; text-wrap: balance; }

#gate { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: var(--gutter); background: var(--ink-deep); }
#gate .panel { max-width: 30rem; display: grid; gap: 1.1rem; text-align: center; }
#gate p { margin: 0; color: var(--bone-dim); }
#gate .mark { font-family: var(--display); font-size: var(--step-3); font-weight: 800; color: var(--bone); }
html[data-gate="ok"] #gate { display: none; }
html:not([data-gate="ok"]) .shell { display: none; }
.gate-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.btn { display: inline-block; padding: 0.7em 1.2em; border: 1px solid var(--edge-lit); border-radius: 3px; background: none; color: var(--bone); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn-main { background: var(--surf); border-color: var(--surf); color: var(--surf-text); }

.top { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; padding: 0.7rem var(--gutter); background: var(--ink-deep); border-bottom: 1px solid var(--edge); }
.brand { font-family: var(--display); font-size: var(--step-1); font-weight: 800; color: var(--bone); text-decoration: none; }
.brand span { color: var(--surf-lit); font-weight: 700; }
.search { position: relative; flex: 1 1 14rem; max-width: 26rem; }
.search input { width: 100%; padding: 0.45em 0.7em; border: 1px solid var(--edge-lit); border-radius: 3px; background: var(--ink-raised); color: var(--bone); font: inherit; font-size: var(--step--1); }
#results { position: absolute; top: 100%; left: 0; right: 0; margin: 0.3rem 0 0; padding: 0.3rem; list-style: none; background: var(--ink-raised); border: 1px solid var(--edge-lit); border-radius: 3px; max-height: 60vh; overflow: auto; }
#results a { display: block; padding: 0.4em 0.5em; text-decoration: none; color: var(--bone); }
#results a:hover { background: var(--edge); }
#results small { display: block; color: var(--bone-dim); }
#results p { margin: 0; padding: 0.4em 0.5em; color: var(--bone-dim); }
.back { margin-left: auto; font-size: var(--step--1); }
.langs { display: flex; gap: 0.25rem; }
.langs button { padding: 0.25em 0.5em; border: 1px solid transparent; border-radius: 3px; background: none; color: var(--bone-dim); font: inherit; font-size: var(--step--1); cursor: pointer; }
.langs button[aria-current="true"] { border-color: var(--edge-lit); color: var(--bone); }

.columns { display: grid; gap: 2rem; max-width: 76rem; margin-inline: auto; padding: 2rem var(--gutter) 4rem; }
@media (min-width: 58rem) { .columns { grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; } .side { position: sticky; top: 5rem; align-self: start; max-height: calc(100vh - 6rem); overflow: auto; } }
.side { font-size: var(--step--1); }
.side p { margin: 0.6rem 0 0; }
.side > :first-child { margin-top: 0; }
.nav-head { font-weight: 600; color: var(--bone); }
.nav-off { color: var(--bone-faint); }
.side ul { margin: 0; padding: 0; list-style: none; }
.side a { display: block; padding: 0.15em 0 0.15em 0.7em; border-left: 2px solid var(--edge); color: var(--bone-dim); text-decoration: none; }
.side a:hover { color: var(--bone); }
.side a[aria-current="page"] { border-left-color: var(--surf); color: var(--surf-lit); }
@media (max-width: 57.99rem) { .side { padding-bottom: 1rem; border-bottom: 1px solid var(--edge); } }

.article { display: grid; gap: 1rem; min-width: 0; align-content: start; }
.article > div[data-only] { max-width: var(--measure); }
.article > div[data-only] details + details { margin-top: -0.4rem; }
.wide { display: grid; gap: 1rem; min-width: 0; }
.article > div[data-only] { display: grid; gap: 1rem; min-width: 0; }
html[data-lang="en"] .article > div[data-only="ru"], html[data-lang="ru"] .article > div[data-only="en"] { display: none; }
.article h1 { font-size: var(--step-3); }
.article h2 { margin-top: 1rem; font-size: var(--step-2); }
.article h3 { margin-top: 0.5rem; font-size: var(--step-1); }
.article p, .article ul, .article ol { margin: 0; }
.article ul, .article ol { padding-left: 1.3rem; display: grid; gap: 0.35rem; }
.article code { padding: 0.1em 0.3em; border-radius: 3px; background: var(--ink-raised); font-size: 0.9em; overflow-wrap: anywhere; }
.lead { color: var(--bone-dim); font-size: var(--step-1); line-height: 1.35; }
.note { padding: 0.8rem 1rem; border-left: 3px solid var(--surf); border-radius: 3px; background: var(--ink-raised); }
.note p { margin: 0; }
.note strong { display: block; margin-bottom: 0.2rem; }
.table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
th, td { padding: 0.5em 0.7em; border-bottom: 1px solid var(--edge); text-align: left; vertical-align: top; }
th { color: var(--bone-dim); font-weight: 600; }

.cards { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.card { display: grid; gap: 0.2rem; align-content: start; padding: 1rem; border: 1px solid var(--edge); border-radius: 3px; background: var(--ink-raised); color: var(--bone); text-decoration: none; }
a.card:hover { border-color: var(--surf); color: var(--bone); }
.card b { font-family: var(--display); font-size: var(--step-1); }
.card small { color: var(--bone-dim); }
.card.off { opacity: 0.55; }

.side .nav-head a { padding: 0; border: 0; color: var(--bone); }
.preyfind { max-width: 20rem; padding: 0.45em 0.7em; border: 1px solid var(--edge-lit); border-radius: 3px; background: var(--ink-raised); color: var(--bone); font: inherit; font-size: var(--step--1); }
#preytable tr[hidden] { display: none; }
#preytable th button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
#preytable th button:hover { color: var(--bone); }
.pager { display: flex; justify-content: space-between; gap: 1rem; }
.steps { display: flex; gap: 0.5rem; }
.backlink { justify-self: start; padding: 0.3em 0.8em; border: 1px solid var(--edge-lit); border-radius: 3px; font-size: var(--step--1); text-decoration: none; }
.article details { border: 1px solid var(--edge); border-radius: 3px; background: var(--ink-raised); }
.article details summary { padding: 0.7rem 1rem; font-weight: 600; cursor: pointer; }
.article details[open] summary { border-bottom: 1px solid var(--edge); }
.article details p { padding: 0.7rem 1rem; }
.nav-group { margin-top: 0.6rem; }
.nav-group summary { color: var(--bone); font-weight: 600; cursor: pointer; }
.nav-group summary:hover { color: var(--surf-lit); }
.nav-group ul { margin-top: 0.3rem; }
.filters { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.filters button { padding: 0.3em 0.7em; border: 1px solid var(--edge-lit); border-radius: 3px; background: none; color: var(--bone-dim); font: inherit; font-size: var(--step--1); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--surf); border-color: var(--surf); color: var(--surf-text); }
.mobs { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.mob { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem; align-content: start; min-width: 0; padding: 0.7rem; border: 1px solid var(--edge); border-radius: 3px; background: var(--ink-raised); color: var(--bone); text-decoration: none; }
a.mob:hover { border-color: var(--surf); color: var(--bone); }
.mob b { font-family: var(--display); font-size: var(--step-1); line-height: 1.1; }
.mob small { color: var(--bone-dim); }
.shot { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 0.5rem; overflow: hidden; border: 1px solid var(--edge-lit); border-radius: 3px; background: var(--ink-deep); color: var(--bone-faint); font-size: var(--step--1); text-align: center; }
.shot img { position: absolute; inset: 0.4rem; width: calc(100% - 0.8rem); height: calc(100% - 0.8rem); object-fit: contain; display: block; }
.mobgroup { display: grid; gap: 0.8rem; margin-top: 1rem; }
.mobgroup h2 { font-size: var(--step-2); }
.mobpage { display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .mobpage { grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; } }
@media (max-width: 45.99rem) { .mobpage > .info { order: -1; } }
.mobtext { display: grid; gap: 1rem; min-width: 0; }
.mobtext > div[data-only] { display: grid; gap: 1rem; }
html[data-lang="en"] .mobtext > div[data-only="ru"], html[data-lang="ru"] .mobtext > div[data-only="en"] { display: none; }
.info { padding: 0.8rem; border: 1px solid var(--edge); border-radius: 3px; background: var(--ink-raised); font-size: var(--step--1); }
.info dl { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; margin: 0; }
.info dt { color: var(--bone-dim); }
.info dd { margin: 0; text-align: right; font-weight: 600; }