/* Локальные шрифты полной L1: копии claude/shared/fonts и Bitter (OFL) из panda-buket v4. */
/* Локальные шрифты: копии из deploy/www/fonts, yoga-jaya v4 (PT Sans Narrow), ppc-ip v6 (Caveat). */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plexmono-400-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plexmono-400-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plexmono-500-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plexmono-500-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/cormorant-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/cormorant-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/cormorant-it-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/cormorant-it-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/caveat-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/caveat-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Bitter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Bitter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --paper:#EFE3CD;
  --paper-lt:#F6EEDD;
  --paper2:#E5D5B7;
  --parch:#EADBBE;
  --card:#F8F1E2;
  --sheet:#FBF6EA;
  --ink:#33251A;
  --ink2:#5B4734;
  --rust:#983823;
  --brass:#9C7A35;
  --leaf:#55703F;
  --night:#1C1510;
  --night2:#2A2019;
  --moon:#EFE3CD;
  --moon2:#C9B796;
  --amber:#E2B064;
  --display:'Cormorant Garamond',Georgia,serif;
  --text:'Bitter',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --hand:'Caveat',cursive;
  --sans:'Manrope',system-ui,sans-serif;
  --gut:clamp(16px,4vw,64px);
  --wrap:1180px;
  --col:680px;
  --line:rgba(51,37,26,.35);
  --line2:rgba(51,37,26,.18);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html[data-motion=off] {
  scroll-behavior: auto;
}

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.64;
  overflow-x: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

p a, li a, td a {
  color: var(--rust);
}

p a:hover, li a:hover {
  text-decoration-thickness: 2px;
}

img {
  max-width: 100%;
}

picture {
  display: contents;
}

picture > source {
  display: none;
}

/* LQIP: крошечная копия под картинкой, пока грузится настоящая; размеры заданы width/height — вёрстка не прыгает */
html.js img[data-lq] {
  background-image: var(--lq);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-origin: content-box;
}

html.js .trap img[data-lq] {
  background-size: cover;
  background-position: 70% 50%;
}

html.js .legend img[data-lq], html.js .species .medal img[data-lq], html.js .key img[data-lq] {
  background-size: contain;
  background-position: center;
}

strong {
  font-weight: 650;
}

code {
  font-family: var(--mono);
  font-size: 0.84em;
  background: rgba(51, 37, 26, 0.07);
  padding: 0.08em 0.35em;
  border-radius: 3px;
}

:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 3px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mono {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.4;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 20;
  background: var(--ink);
  color: var(--sheet);
  padding: 10px 14px;
  font: 500 14px/1 var(--sans);
}

.skip:focus {
  top: 12px;
}

section[id], h2[id], h3[id], div[id] {
  scroll-margin-top: 24px;
}

/* ---------- заголовки ---------- */
h1, h2, h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: inherit;
}

h1 {
  font-size: clamp(38px, 3.9vw, 60px);
  line-height: 1.04;
  margin: 18px 0 22px;
}

h2 {
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1.06;
  margin: 0 0 30px;
  max-width: 22ch;
  text-wrap: balance;
}

h3 {
  font-size: clamp(27px, 2.4vw, 34px);
  line-height: 1.12;
  margin: 56px 0 18px;
  text-wrap: balance;
}

.prose p {
  margin: 0 0 22px;
}

.prose {
  max-width: var(--col);
}

p, li, td, th, figcaption, dd {
  text-wrap: pretty;
}

h1, h2, h3 {
  hyphens: manual;
}

.nw {
  white-space: nowrap;
}

.prose ul, .prose ol {
  margin: 0 0 24px;
  padding: 0;
}

/* ---------- верх ---------- */
.top {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px var(--gut);
  border-bottom: 1px solid var(--line);
}

.top img {
  height: 30px;
  width: auto;
  display: block;
}

.top-meta {
  display: flex;
  align-items: center;
  gap: 6px 28px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 11.5px;
  color: var(--ink2);
}

.top-meta p {
  margin: 0;
}

.crumbs a {
  color: var(--ink2);
}

/* ---------- таблица I: обложка ---------- */
.hero {
  position: relative;
  height: max(56.25vw, 760px);
  max-height: 1000px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
}

.hero .plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-in {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 680px;
  padding: 7vw 16px 0;
}

.tab {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  color: var(--rust);
}

.tab::before, .tab::after {
  content: "";
  width: 46px;
  border-top: 1px solid currentColor;
}

.hero .lead {
  margin: 0 auto;
  font-size: 18.5px;
  line-height: 1.6;
  max-width: 580px;
  color: var(--ink2);
}

.orn {
  display: block;
  margin: 22px auto 0;
  width: 140px;
  height: 14px;
}

/* ---------- титульный лист ---------- */
.title {
  padding: 84px 0 92px;
  background: var(--paper-lt);
  border-bottom: 1px solid var(--line);
  position: relative;
}

.title::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--line2);
  pointer-events: none;
}

.title-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}

.title .intro {
  font-size: 21px;
  line-height: 1.6;
  margin: 0;
}

.title .intro::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 600;
  font-size: 88px;
  line-height: 0.8;
  margin: 8px 12px 0 0;
  color: var(--rust);
}

.toc {
  background: var(--sheet);
  border: 1px solid var(--line);
  padding: 30px 32px 26px;
  box-shadow: 0 22px 40px -30px rgba(51, 37, 26, 0.7);
}

.toc p {
  margin: 0 0 14px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px dotted var(--line);
  padding: 7px 0;
  font-size: 17px;
  line-height: 1.35;
}

.toc li a {
  text-decoration: none;
  flex: 1;
}

.toc li a:hover {
  color: var(--rust);
  text-decoration: underline;
}

.toc li .mono {
  color: var(--rust);
  flex: none;
  width: 34px;
  font-size: 11.5px;
}

/* ---------- общий вид таблиц ---------- */
.plate-sec {
  position: relative;
  padding: 112px 0 108px;
}

.plate-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 40px;
}

.plate-head .mono {
  color: var(--rust);
  flex: none;
}

.plate-head .mono:last-child {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 75%;
  overflow-wrap: break-word;
}

.plate-head .rule {
  min-width: 24px;
}

.plate-head .rule {
  flex: 1;
  border-top: 1px solid rgba(51, 37, 26, 0.5);
  position: relative;
  top: -4px;
}

.plate-head .rule::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--ink);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  font: 600 15px/1.2 var(--sans);
  letter-spacing: 0.02em;
  color: #fbf6ea;
  background: var(--ink);
  padding: 16px 22px;
  border-radius: 40px;
  border: 1px solid var(--ink);
}

.btn:hover {
  background: var(--rust);
  border-color: var(--rust);
}

.btn .seal {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #c9573f, var(--rust) 60%, #5b1e12);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.cta-line {
  margin: 28px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink2);
}

.cta-line .btn {
  margin: 0 0 12px;
}

.cta-line strong {
  color: var(--ink);
}

.gravure {
  display: block;
  width: 100%;
  height: auto;
}

.pin {
  position: absolute;
  left: 50%;
  top: 36%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e8cf8f, var(--brass) 60%, #5e471c);
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35);
}

/* ---------- таблица II: о действии ---------- */
.read-grid {
  display: grid;
  grid-template-columns: 230px minmax(0, var(--col)) 1fr;
  gap: 48px;
  align-items: start;
}

.specimen {
  position: sticky;
  top: 40px;
  text-align: center;
  z-index: 2;
}

.specimen .box {
  position: relative;
  background: var(--card);
  border: 1px solid rgba(51, 37, 26, 0.45);
  box-shadow: inset 0 0 0 6px var(--card), inset 0 0 0 7px rgba(51, 37, 26, 0.25), 0 14px 28px -18px rgba(51, 37, 26, 0.6);
  padding: 26px 16px 18px;
}

.specimen img {
  width: 100%;
  height: auto;
  display: block;
}

.label {
  display: inline-block;
  margin-top: 14px;
  background: var(--sheet);
  border: 1px solid rgba(51, 37, 26, 0.5);
  padding: 6px 12px 7px;
  font: 400 12px/1.35 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.label b {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
}

.dropcap > p:first-of-type::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 600;
  font-size: 84px;
  line-height: 0.8;
  margin: 8px 12px 0 0;
  color: var(--rust);
}

.phrase {
  display: block;
  margin: 8px 0 6px;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid rgba(51, 37, 26, 0.5);
  border-left: 4px solid var(--rust);
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
}

.notes {
  position: relative;
  height: 100%;
  min-height: 640px;
}

.note {
  position: absolute;
  left: 0;
  font-family: var(--hand);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.1;
  color: var(--rust);
  transform: rotate(-3deg);
  max-width: 220px;
  margin: 0;
}

.note svg {
  display: block;
  width: 70px;
  height: 34px;
  margin-bottom: 2px;
}

.notes .note:nth-child(1) {
  top: 150px;
}

.notes .note:nth-child(2) {
  top: 400px;
  color: var(--leaf);
  transform: rotate(2deg);
}

.notes .note:nth-child(3) {
  top: 640px;
}

.sprig {
  position: absolute;
  left: max(0px, 50% - 760px);
  bottom: -70px;
  width: 190px;
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}

/* ---------- таблица III: полевая съёмка ---------- */
.field {
  background: var(--paper);
}

.case-intro {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.mount {
  margin: 0;
  position: relative;
  background: var(--sheet);
  padding: 18px 18px 0;
  border: 1px solid rgba(51, 37, 26, 0.4);
  box-shadow: 0 26px 40px -26px rgba(51, 37, 26, 0.8);
}

.mount .ph {
  position: relative;
  display: block;
}

.mount img {
  display: block;
  width: 100%;
  height: auto;
}

.mount .ph::before, .mount .ph::after, .mount .c3, .mount .c4 {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  z-index: 1;
  opacity: 0.82;
}

.mount .ph::before {
  left: -6px;
  top: -6px;
}

.mount .ph::after {
  right: -6px;
  top: -6px;
  transform: rotate(90deg);
}

.mount .c3 {
  right: -6px;
  bottom: -6px;
  transform: rotate(180deg);
}

.mount .c4 {
  left: -6px;
  bottom: -6px;
  transform: rotate(270deg);
}

.mount figcaption {
  padding: 14px 4px 18px;
  font-size: 16.5px;
  line-height: 1.5;
  font-style: italic;
}

.mount figcaption .mono {
  display: block;
  color: var(--rust);
  margin-bottom: 6px;
  font-style: normal;
}

.mount.tilt {
  transform: rotate(1.2deg);
}

.mount .zoom {
  display: block;
  width: fit-content;
  margin-top: 6px;
  font: 400 12px/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--rust);
  padding: 8px 0;
  min-height: 44px;
}

.mount.wide figcaption .zoom {
  grid-column: 2;
  margin-top: 0;
}

.mount.wide {
  padding: 22px 22px 0;
}

.mount.wide figcaption {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 28px;
  padding: 20px 6px 24px;
  font-size: 18px;
}

.mount.wide figcaption .mono {
  margin: 3px 0 0;
}

.doing {
  display: grid;
  grid-template-columns: minmax(0, var(--col)) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  margin-bottom: 56px;
}

.doing h3 {
  margin-top: 96px;
}

.legend {
  list-style: none;
  margin: 150px 0 0;
  padding: 0;
  border-top: 1px solid rgba(51, 37, 26, 0.5);
}

.legend li {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line2);
  font-size: 17px;
  line-height: 1.3;
}

.legend img, .legend .gl {
  width: 52px;
  height: 46px;
  object-fit: contain;
  display: grid;
  place-items: center;
}

.legend .gl {
  font: 600 22px/1 var(--sans);
  color: var(--paper);
}

.legend .gl span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #c43a2a;
}

.legend .gl.sq span {
  border-radius: 3px;
  background: var(--ink);
  font-size: 18px;
}

.legend b {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 21px;
}

.legend small {
  display: block;
  font: 400 11.5px/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink2);
}

.legend-cap {
  margin: 10px 0 0;
  font: 400 11.5px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rust);
}

/* витрина */
.vitrine-row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  margin-top: 80px;
  align-items: stretch;
}

.vitrine-lead {
  grid-column: 1/-1;
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 0 0 -30px;
}

.vitrine-lead p {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.1;
}

.vitrine-lead .mono {
  color: var(--rust);
}

.vitrine {
  position: relative;
  height: 360px;
  border: 12px solid #6b4b2e;
  border-image: linear-gradient(135deg, #7d5a37, #4f3520) 1;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.35) 41%, rgba(255, 255, 255, 0.05) 60%), #efe6d4;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(51, 37, 26, 0.25);
}

.vitrine .web {
  position: absolute;
  left: -24px;
  top: -24px;
  width: 230px;
  height: auto;
  pointer-events: none;
  opacity: 0.75;
}

.vitrine .hint {
  position: absolute;
  left: 18px;
  bottom: 14px;
  right: 18px;
  margin: 0;
  font: 400 12px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink2);
}

.vitrine .hint .nojs {
  display: none;
}

html:not(.js) .vitrine .hint .js-only {
  display: none;
}

html:not(.js) .vitrine .hint .nojs {
  display: inline;
}

.fly {
  position: absolute;
  width: 118px;
  height: 118px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: crosshair;
}

.fly img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.fly:focus-visible {
  outline: 2px dashed var(--rust);
  outline-offset: -6px;
  border-radius: 50%;
}

.fly[hidden] {
  display: none;
}

.fly:nth-of-type(1) {
  left: 6%;
  top: 12%;
}

.fly:nth-of-type(2) {
  left: 40%;
  top: 40%;
}

.fly:nth-of-type(3) {
  left: 70%;
  top: 8%;
}

.board {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid rgba(51, 37, 26, 0.5);
  padding: 22px 22px 18px;
}

.board p.t {
  margin: 0 0 4px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
}

.board p {
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink2);
}

.slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: auto;
}

.slot {
  position: relative;
  aspect-ratio: 0.82;
  border: 1px dashed rgba(51, 37, 26, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 4px;
  text-align: center;
  font: 400 10.5px/1.25 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink2);
}

.slot img {
  position: absolute;
  left: 8%;
  top: 6%;
  width: 84%;
  height: auto;
  display: none;
}

.slot.full {
  border-style: solid;
  background: var(--sheet);
}

.slot.full img {
  display: block;
}

.slot.full::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 30%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e8cf8f, var(--brass) 60%, #5e471c);
}

.board-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font: 400 12px/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.board-foot button {
  appearance: none;
  border: 0;
  background: none;
  color: var(--rust);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 10px 0;
  min-height: 44px;
}

html:not(.js) .board-foot {
  display: none;
}

.levels {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  margin-top: 96px;
}

.levels .mount {
  margin-top: 8px;
}

/* четыре полевых наблюдения */
.decisions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
  counter-reset: dec;
}

.decisions li {
  position: relative;
  counter-increment: dec;
  background: var(--sheet);
  border: 1px solid var(--line);
  padding: 30px 30px 26px 30px;
  font-size: 17.5px;
  line-height: 1.6;
  box-shadow: 0 18px 30px -26px rgba(51, 37, 26, 0.8);
}

.decisions li:nth-child(2) {
  transform: translateY(28px);
}

.decisions li:nth-child(4) {
  transform: translateY(28px);
}

.decisions li::before {
  content: counter(dec, upper-roman);
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 46px;
  line-height: 1;
  color: var(--rust);
  margin-bottom: 10px;
}

.decisions li::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 20px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e8cf8f, var(--brass) 60%, #5e471c);
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
}

.decisions strong {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 25px;
  line-height: 1.15;
  margin-bottom: 8px;
}

.stamp {
  max-width: var(--col);
  margin: 72px 0 0;
  padding: 16px 20px;
  border: 2px solid var(--rust);
  color: var(--rust);
  font-size: 16.5px;
  line-height: 1.55;
  transform: rotate(-0.6deg);
  background: rgba(251, 246, 234, 0.6);
}

.stamp::before {
  content: "Пометка редакции";
  display: block;
  font: 400 11.5px/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.finale {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  margin-top: 8px;
}

.finale {
  grid-template-areas: "ff fa" "ff fb";
  grid-template-rows: auto 1fr;
}

.finale .fa {
  grid-area: fa;
}

.finale .fb {
  grid-area: fb;
}

.finale .ff {
  grid-area: ff;
}

.finale .prose p:first-child {
  margin-top: 0;
}

/* ---------- таблица IV: определитель механик ---------- */
.cabinet {
  background: var(--paper2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 18px 30px -24px rgba(51, 37, 26, 0.55);
}

.mech-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 56px;
  align-items: end;
  margin-bottom: 40px;
}

.mech-head .prose p:last-child {
  margin-bottom: 0;
}

.mech-head .aside {
  font-family: var(--hand);
  font-size: 27px;
  line-height: 1.15;
  color: var(--rust);
  transform: rotate(-2deg);
  margin: 0 0 6px;
}

.key {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--card);
  border: 1px solid rgba(51, 37, 26, 0.5);
  box-shadow: 0 26px 40px -30px rgba(51, 37, 26, 0.8);
}

.key caption {
  caption-side: top;
  text-align: left;
  font: 400 12px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink2);
  padding: 0 0 12px;
}

.key thead th {
  font: 400 11.5px/1.35 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
  text-align: left;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(51, 37, 26, 0.5);
  background: var(--sheet);
}

.key thead th:first-child {
  width: 25%;
}

.key thead th:nth-child(2) {
  width: 31%;
}

.key tbody tr {
  border-bottom: 1px solid var(--line);
}

.key tbody tr:nth-child(even) {
  background: rgba(229, 213, 183, 0.38);
}

.key tbody th {
  text-align: left;
  padding: 18px 18px;
  vertical-align: top;
}

.key tbody th .sp {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  align-items: center;
}

.key tbody th img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  display: block;
  background: var(--sheet);
  border: 1px solid var(--line2);
  border-radius: 50%;
  padding: 6px;
}

.key tbody th span.n {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 25px;
  line-height: 1.1;
}

.key tbody th small {
  display: block;
  font: 400 11px/1.3 var(--mono);
  letter-spacing: 0.08em;
  color: var(--rust);
  text-transform: uppercase;
  margin-bottom: 4px;
  font-style: normal;
}

.key td {
  padding: 18px 18px;
  vertical-align: top;
  font-size: 16.5px;
  line-height: 1.5;
}

.key td:last-child {
  color: var(--ink2);
}

.backpack {
  display: grid;
  grid-template-columns: 160px minmax(0, var(--col));
  gap: 32px;
  align-items: start;
  margin: 56px 0 0;
}

.backpack .mono {
  color: var(--rust);
  text-align: right;
  border-top: 1px solid var(--rust);
  padding-top: 8px;
}

.backpack p {
  margin: 0;
}

/* ---------- таблица V: картотека, дневник, размещение ---------- */
.cab-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: end;
  margin-bottom: 40px;
}

.cab-head img {
  width: 100%;
  height: auto;
  display: block;
  transform: rotate(-8deg);
  margin-bottom: -30px;
}

.cards {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.cards thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.cards tbody {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.cards tr {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--card);
  border: 1px solid rgba(51, 37, 26, 0.5);
  padding: 0 22px 46px;
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(51, 37, 26, 0.13) 31px 32px);
  background-position: 0 70px;
  box-shadow: 0 18px 30px -22px rgba(51, 37, 26, 0.7);
}

.cards tr::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--rust);
}

.cards tr::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--paper2);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.35);
}

.cards th, .cards td {
  display: block;
  text-align: left;
  padding: 0;
}

.cards tbody th {
  padding: 26px 0 18px;
  border-bottom: 1px solid rgba(51, 37, 26, 0.5);
  margin-bottom: 12px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 29px;
  line-height: 1.08;
}

.cards th small {
  display: block;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--rust);
  font-style: normal;
  margin-bottom: 10px;
}

.cards td {
  font-size: 16.5px;
  line-height: 1.5;
  padding: 6px 0 14px;
}

.cards td::before {
  content: attr(data-label);
  display: block;
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink2);
  margin-bottom: 4px;
}

.cards td:last-child {
  margin-top: auto;
  border-top: 1px dashed rgba(51, 37, 26, 0.5);
  padding-top: 14px;
}

.cards td:last-child::before {
  color: var(--rust);
}

.journal {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
  margin-top: 104px;
}

.journal .nb {
  position: sticky;
  top: 40px;
}

.steps-intro {
  margin: 0 0 30px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(25px, 2.2vw, 30px);
  line-height: 1.2;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0 0 0 34px;
  border-left: 1px solid rgba(51, 37, 26, 0.45);
  counter-reset: st;
}

.steps li {
  position: relative;
  counter-increment: st;
  padding: 0 0 30px;
  font-size: 17.5px;
  line-height: 1.6;
}

.steps li:last-child {
  padding-bottom: 0;
}

.steps li::before {
  content: counter(st);
  position: absolute;
  left: -56px;
  top: -4px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sheet);
  border: 1px solid rgba(51, 37, 26, 0.55);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  color: var(--rust);
}

.steps strong {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
}

.embed {
  margin-top: 110px;
}

.embed-in {
  display: grid;
  grid-template-columns: minmax(0, var(--col)) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.embed-in .aside {
  margin: 62px 0 0;
  font-family: var(--hand);
  font-size: 26px;
  line-height: 1.15;
  color: var(--leaf);
  transform: rotate(-2deg);
}

.labels3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin: 20px 0 40px;
}

.lab {
  position: relative;
  background: var(--sheet);
  border: 1px solid rgba(51, 37, 26, 0.5);
  padding: 44px 24px 22px;
  font-size: 16.5px;
  line-height: 1.6;
}

.lab::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  width: 44%;
  margin-left: -22%;
  height: 22px;
  background: var(--paper2);
  border: 1px solid rgba(51, 37, 26, 0.4);
  border-top: 0;
  border-radius: 0 0 22px 22px;
}

.lab .mono {
  display: block;
  color: var(--rust);
  margin-bottom: 10px;
}

.lab p {
  margin: 0;
}

.check {
  max-width: var(--col);
  padding: 22px 26px;
  border: 1px dashed rgba(51, 37, 26, 0.6);
  background: rgba(251, 246, 234, 0.55);
}

.check .mono {
  display: block;
  color: var(--rust);
  margin-bottom: 8px;
}

.check p {
  margin: 0;
}

/* ---------- таблица VI: весы ---------- */
.scales {
  background: var(--paper-lt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.order-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}

.order-grid .scale {
  position: sticky;
  top: 40px;
  margin: 0;
}

.order-grid .scale figcaption {
  margin-top: 10px;
  font: 400 11.5px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink2);
  text-align: center;
}

.weights {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}

.weights li {
  position: relative;
  padding: 16px 0 16px 64px;
  border-top: 1px solid var(--line);
  font-size: 17.5px;
  line-height: 1.55;
}

.weights li:last-child {
  border-bottom: 1px solid var(--line);
}

.weights li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 20px;
  width: 34px;
  height: 30px;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(90deg, #7b5b25, #d6b56d 35%, #a7843c 60%, #6a4c1c);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.18);
}

.weights li::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 13px;
  width: 12px;
  height: 9px;
  border-radius: 6px 6px 0 0;
  background: #8d6c2c;
}

.weights strong {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 23px;
}

.example {
  margin: 8px 0 22px;
  padding: 16px 20px 18px;
  background: var(--card);
  border-left: 3px solid var(--leaf);
  background-image: repeating-linear-gradient(180deg, transparent 0 33px, rgba(51, 37, 26, 0.14) 33px 34px);
}

.example small {
  display: block;
  font: 400 11.5px/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: 6px;
}

.example .q {
  margin: 0;
  font-family: var(--hand);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.26;
}

/* ---------- таблицы VII–IX: наблюдения, мимикрия, три вида ---------- */
.quiet .q-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--col)) 1fr;
  gap: 48px;
  align-items: start;
}

.quiet .q-grid > .prose {
  grid-column: 2;
}

.quiet .margin {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  text-align: right;
  margin-top: 120px;
}

.quiet .margin p {
  margin: 0 0 26px;
  font-family: var(--hand);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  color: var(--rust);
  transform: rotate(-2deg);
}

.quiet .margin p:nth-child(2) {
  color: var(--leaf);
  transform: rotate(1.5deg);
}

.quiet .dust {
  grid-column: 3;
  grid-row: 1;
  width: 150px;
  height: auto;
  margin-top: 150px;
  transform: rotate(-8deg);
}

.quiet h2 {
  max-width: none;
}

.mimic {
  background: var(--parch);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.mimic-plate {
  position: relative;
  max-width: 900px;
  margin: 0 auto 64px;
}

.mimic-plate .tagl, .mimic-plate .tagr {
  position: absolute;
  bottom: 4%;
  font-family: var(--hand);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.05;
  color: var(--rust);
}

.mimic-plate .tagl {
  left: 8%;
  transform: rotate(-3deg);
}

.mimic-plate .tagr {
  right: 6%;
  color: var(--leaf);
  transform: rotate(2deg);
  text-align: right;
}

.mimic-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--col)) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.mimic-grid {
  grid-template-areas: "ma mw" "mb mw";
}

.mimic-grid .ma {
  grid-area: ma;
}

.mimic-grid .mb {
  grid-area: mb;
}

.mimic-grid .warn {
  grid-area: mw;
  align-self: start;
  background: var(--sheet);
  border: 1px solid rgba(51, 37, 26, 0.5);
  border-top: 4px solid var(--rust);
  padding: 24px 26px;
  font-size: 17.5px;
  line-height: 1.6;
  position: sticky;
  top: 40px;
}

.mimic-grid .warn .mono {
  display: block;
  color: var(--rust);
  margin-bottom: 8px;
}

.mimic-grid .warn p {
  margin: 0;
}

.species {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.species li {
  position: relative;
  background: var(--sheet);
  border: 1px solid rgba(51, 37, 26, 0.5);
  padding: 34px 20px 18px;
  text-align: center;
}

.species li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e8cf8f, var(--brass) 60%, #5e471c);
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
}

.species b {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 27px;
  line-height: 1.1;
}

.species small {
  display: block;
  margin-top: 6px;
  font: 400 11.5px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink2);
}

.species .medal {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid rgba(51, 37, 26, 0.45);
  box-shadow: inset 0 0 0 5px var(--sheet), inset 0 0 0 6px rgba(51, 37, 26, 0.2);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.species .medal img {
  width: 74%;
  height: 74%;
  object-fit: contain;
  display: block;
}

.species .medal.seal img {
  width: 86%;
  height: 86%;
  object-fit: cover;
  border-radius: 50%;
}

.loyal-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--col)) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.excerpt {
  margin: 4px 0 26px;
  background: var(--card);
  border: 1px solid rgba(51, 37, 26, 0.5);
  padding: 26px 28px 22px;
  position: relative;
  font-size: 17.5px;
  line-height: 1.6;
  box-shadow: 0 18px 30px -26px rgba(51, 37, 26, 0.8);
}

.excerpt::before {
  content: "Выписка";
  position: absolute;
  top: -11px;
  left: 22px;
  background: var(--rust);
  color: var(--sheet);
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 8px;
}

.excerpt p {
  margin: 0;
}

.loyal-grid .watch {
  width: 100%;
  max-width: 300px;
  margin: 40px auto 0;
  display: block;
}

.loyal-grid .ask {
  margin: 22px 0 0;
  font-family: var(--hand);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.15;
  color: var(--rust);
  transform: rotate(-1.5deg);
  text-align: center;
}

/* ---------- таблица X: ночная ловля ---------- */
.night {
  background: var(--night);
  color: var(--moon);
  padding-top: 0;
  border-top: 1px solid #000;
}

.night::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -90px;
  height: 90px;
  background: linear-gradient(180deg, rgba(28, 21, 16, 0), var(--night));
  pointer-events: none;
}

.night .plate-head .mono {
  color: var(--amber);
}

.night .plate-head .rule {
  border-color: rgba(239, 227, 205, 0.4);
}

.night .plate-head .rule::after {
  background: var(--amber);
}

.night a {
  color: var(--amber);
}

.trap {
  position: relative;
  height: min(62vw, 720px);
  min-height: 520px;
  overflow: hidden;
  margin-bottom: 56px;
}

.trap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

.trap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(28, 21, 16, 0.92) 0, rgba(28, 21, 16, 0.7) 34%, rgba(28, 21, 16, 0) 58%), linear-gradient(0deg, var(--night) 0, rgba(28, 21, 16, 0) 26%);
}

.trap .glow {
  position: absolute;
  right: 21%;
  top: 44%;
  width: 340px;
  height: 340px;
  margin: -170px -170px 0 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 140, 0.32), rgba(255, 214, 140, 0) 65%);
  z-index: 1;
  pointer-events: none;
}

.trap-in {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 40px;
}

.trap-in .plate-head {
  margin-bottom: 28px;
  max-width: 560px;
}

.trap-in .plate-head .mono:last-child {
  background: var(--night);
  padding: 4px 8px;
  margin-right: 0;
  box-shadow: 0 0 18px 10px var(--night);
}

.trap-in h2 {
  color: var(--moon);
  max-width: 16ch;
}

.trap-in .prose {
  max-width: 560px;
}

.trap-in .prose p {
  font-size: 18.5px;
}

.trap-in strong {
  color: #fff4dd;
}

.chain {
  display: none;
  margin: 0 0 64px;
  position: relative;
}

html.js .chain {
  display: block;
}

.chain-q {
  margin: 0 0 18px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.15;
  color: var(--moon);
}

.chain ol {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  position: relative;
}

.chain ol::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 31px;
  border-top: 1px dashed rgba(239, 227, 205, 0.55);
}

.chain li {
  text-align: center;
  position: relative;
}

.chain ol button {
  appearance: none;
  background: none;
  border: 0;
  color: var(--moon);
  cursor: pointer;
  padding: 0 6px 8px;
  font: 500 15.5px/1.35 var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
}

.chain ol button i {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(239, 227, 205, 0.55);
  background: var(--night2);
  display: grid;
  place-items: center;
  font: 400 13px/1 var(--mono);
  color: var(--amber);
  font-style: normal;
  transition: background 0.3s, box-shadow 0.3s;
}

.chain ol button:hover i, .chain ol button[aria-pressed=true] i {
  background: #4a3520;
  box-shadow: 0 0 0 6px rgba(226, 176, 100, 0.15), 0 0 34px 6px rgba(226, 176, 100, 0.35);
  color: #fff4dd;
}

.chain ol button[aria-pressed=true] {
  color: #fff4dd;
}

.chain .mothmark {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 56px;
  height: 56px;
  pointer-events: none;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 0.7s cubic-bezier(0.3, 0.8, 0.3, 1);
  filter: invert(1) sepia(0.5) brightness(1.2);
  visibility: hidden;
}

.chain.picked .mothmark {
  visibility: visible;
}

.chain-out {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(239, 227, 205, 0.25);
}

.chain-out output {
  flex: 1;
  font-size: 17px;
  line-height: 1.5;
  color: var(--moon2);
}

.chain-out output b {
  color: #fff4dd;
  font-weight: 600;
}

.chain-out button {
  width: auto;
  appearance: none;
  border: 0;
  background: none;
  color: var(--amber);
  font: 400 12px/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
  padding: 10px 0;
  min-height: 44px;
  flex: none;
}

.ledger {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 56px;
}

.ledger caption {
  caption-side: top;
  text-align: left;
  font: 400 12px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--moon2);
  padding: 0 0 14px;
}

.ledger th, .ledger td {
  text-align: left;
  vertical-align: top;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(239, 227, 205, 0.2);
  font-size: 16.5px;
  line-height: 1.5;
}

.ledger thead th {
  font: 400 11.5px/1.35 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  border-bottom: 1px solid rgba(239, 227, 205, 0.55);
}

.ledger tbody th {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 23px;
  line-height: 1.15;
  color: #fff4dd;
  width: 24%;
}

.ledger tbody td:last-child {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
  color: var(--moon);
  width: 30%;
}

.ledger tbody tr {
  transition: background 0.3s;
}

.ledger tbody tr.lit {
  background: rgba(226, 176, 100, 0.14);
  box-shadow: inset 3px 0 0 var(--amber);
}

.night .prose p {
  color: var(--moon);
}

.night-text {
  display: grid;
  grid-template-columns: minmax(0, var(--col)) minmax(0, 1fr);
  gap: 72px;
}

.night-text .lantern-note {
  font-family: var(--hand);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  color: var(--amber);
  transform: rotate(-2deg);
  margin-top: 20px;
}

.dawn {
  margin-top: 72px;
  background: var(--paper-lt);
  color: var(--ink);
  padding: 52px clamp(22px, 5vw, 72px) 34px;
  border: 1px solid #000;
  box-shadow: 0 40px 70px -40px #000;
  position: relative;
}

.dawn::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--line2);
  pointer-events: none;
}

.dawn h3 {
  margin-top: 0;
}

.dawn a {
  color: var(--rust);
}

.dawn .prose p {
  color: var(--ink);
}

.dawn-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--col)) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.dawn-grid .rule-note {
  font-family: var(--hand);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  color: var(--rust);
  transform: rotate(-2deg);
  margin-top: 80px;
}

/* ---------- таблица XI: журнал повреждений ---------- */
.damage-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px;
  align-items: center;
  margin-bottom: 44px;
}

.damage-head h2 {
  margin-bottom: 12px;
}

/* в исходной гравюре угол крышки срезан краем кадра — растворяем правый край в бумаге, пока нет перегенерации */
.damage-head img {
  -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent 99%);
  mask-image: linear-gradient(90deg, #000 84%, transparent 99%);
}

.damage-head p {
  margin: 0;
  font-size: 17px;
  color: var(--ink2);
}

.damage {
  width: 100%;
  border-collapse: collapse;
  counter-reset: dm;
  background: var(--sheet);
  border: 1px solid rgba(51, 37, 26, 0.5);
  box-shadow: 0 26px 40px -30px rgba(51, 37, 26, 0.8);
  background-image: linear-gradient(90deg, transparent 58px, rgba(152, 56, 35, 0.35) 58px 59px, transparent 59px);
}

.damage thead th {
  font: 400 11.5px/1.35 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
  text-align: left;
  padding: 16px 18px;
  border-bottom: 2px solid rgba(51, 37, 26, 0.55);
}

.damage thead th:first-child {
  padding-left: 78px;
  width: 31%;
}

.damage tbody tr {
  counter-increment: dm;
  border-bottom: 1px solid var(--line);
}

.damage tbody th {
  position: relative;
  text-align: left;
  padding: 18px 18px 18px 78px;
  vertical-align: top;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 23px;
  line-height: 1.15;
}

.damage tbody th::before {
  content: counter(dm, upper-roman);
  position: absolute;
  left: 0;
  width: 58px;
  text-align: center;
  top: 21px;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--rust);
  font-style: normal;
}

.damage td {
  padding: 18px;
  vertical-align: top;
  font-size: 16.5px;
  line-height: 1.5;
}

.damage td:last-child {
  background: rgba(85, 112, 63, 0.07);
}

/* ---------- таблица XII: вопросы ---------- */
.faq {
  background: var(--parch);
  border-top: 1px solid var(--line);
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}

.faq-grid > .faq-side {
  align-self: stretch;
}

.qindex {
  position: sticky;
  top: 30px;
  background: var(--sheet);
  border: 1px solid var(--line);
  padding: 22px 24px;
}

.qindex .mono {
  display: block;
  color: var(--rust);
  margin-bottom: 8px;
}

.qindex ol {
  margin: 0;
  padding: 0 0 0 22px;
  font-size: 15.5px;
  line-height: 1.4;
}

.qindex li {
  padding: 5px 0;
}

.qindex a {
  text-decoration: none;
}

.qindex a:hover {
  color: var(--rust);
  text-decoration: underline;
}

.answers {
  counter-reset: qa;
}

.qa {
  counter-increment: qa;
  position: relative;
  padding: 0 0 34px 0;
  margin: 0 0 34px;
  border-bottom: 1px solid var(--line);
}

.qa:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.qa h3 {
  margin: 0 0 12px;
  padding-left: 66px;
  font-size: clamp(25px, 2.2vw, 30px);
  position: relative;
}

.qa h3::before {
  content: counter(qa);
  position: absolute;
  left: 0;
  top: -2px;
  width: 46px;
  height: 46px;
  border: 1px solid var(--rust);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 400 14px/1 var(--mono);
  color: var(--rust);
  font-style: normal;
  background: var(--sheet);
}

.qa p {
  margin: 0;
  padding-left: 66px;
  font-size: 17.5px;
  line-height: 1.62;
}

/* ---------- таблица XIII: письмо ---------- */
.letter {
  padding-bottom: 120px;
}

.letter-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}

.letter-img {
  position: sticky;
  top: 80px;
  margin-top: 40px;
}

.letter-img img {
  width: 100%;
  height: auto;
  display: block;
}

.sheet {
  background: var(--sheet);
  border: 1px solid rgba(51, 37, 26, 0.4);
  padding: 48px clamp(22px, 4vw, 56px) 44px;
  box-shadow: 0 30px 50px -34px rgba(51, 37, 26, 0.8);
  position: relative;
}

.sheet::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--line2);
  pointer-events: none;
}

.sheet .salute {
  display: block;
  margin: 0 0 18px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.12;
}

.sheet p {
  margin: 0 0 20px;
}

.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.crumbs li {
  display: flex;
  align-items: center;
}

.crumbs li + li::before {
  content: "›";
  margin: 0 8px 0 4px;
  color: var(--rust);
}

.crumbs a {
  text-decoration: none;
  display: inline-block;
  padding: 12px 0;
}

.crumbs a:hover {
  color: var(--rust);
  text-decoration: underline;
}

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px var(--gut);
  border-top: 1px solid var(--line);
}

.foot img {
  height: 30px;
  width: auto;
  display: block;
}

.foot .mono {
  color: var(--ink2);
}

.foot .published {
  margin: 0;
  font-size: 11.5px;
}

.foot .mono a {
  color: var(--rust);
  text-decoration: none;
  display: inline-block;
  padding: 12px 0;
}

.foot .mono a:hover {
  text-decoration: underline;
}

/* ---------- закладка «содержание» и паук ---------- */
.bookmark {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 6;
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--sheet);
  color: var(--ink);
  border: 1px solid rgba(51, 37, 26, 0.55);
  padding: 9px 14px;
  border-radius: 24px;
  text-decoration: none;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px -12px rgba(51, 37, 26, 0.7);
  min-height: 44px;
}

.bookmark b {
  color: var(--rust);
  font-weight: 500;
}

html.js.bm-on .bookmark {
  display: inline-flex;
}

/* паук и нить — один узел .sw: качаются вместе вокруг точки крепления; вход и уход — сдвигом за верхний край */
.silk {
  position: fixed;
  top: 0;
  right: max(14px, (100vw - var(--wrap)) / 2 - 104px);
  width: 84px;
  z-index: 5;
  pointer-events: none;
  display: none;
  transform: translateY(calc(-100% - 60px));
  transition: transform 1s cubic-bezier(0.3, 0.7, 0.3, 1);
}

@media (min-width: 1360px) {
  html.js .silk {
    display: block;
  }
}
html.silk-on .silk {
  transform: none;
}

.silk .sw {
  transform-origin: 50% 0;
}

.silk i {
  display: block;
  width: 1px;
  margin: 0 auto;
  background: rgba(51, 37, 26, 0.6);
  height: var(--len, 180px);
  transition: height 0.25s linear;
}

.silk img {
  display: block;
  width: 84px;
  height: auto;
  margin: -47px 0 0 0;
}

/* ---------- движение ---------- */
/* движение: с JS решает переключатель (по умолчанию — системная настройка), без JS — только системная настройка */
html[data-motion=on] .hero .plate {
  animation: settle 2.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html[data-motion=on] .fly {
  animation: var(--path) var(--dur, 9s) ease-in-out infinite;
}

html[data-motion=on] .fly img {
  animation: flap 0.16s ease-in-out infinite alternate;
}

html[data-motion=on] .silk .sw {
  animation: swing 4.5s ease-in-out infinite;
}

html[data-motion=on] .slot.full img {
  animation: pinIn 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
}

html[data-motion=on] .trap .glow {
  animation: flicker 3.2s ease-in-out infinite;
}

html[data-motion=on] .chain.picked .mothmark {
  animation: hover 1.6s ease-in-out infinite;
}

html[data-motion=on] .rise.on {
  animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.js) .hero .plate {
    animation: settle 2.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  html:not(.js) .fly {
    animation: var(--path) var(--dur, 9s) ease-in-out infinite;
  }
  html:not(.js) .fly img {
    animation: flap 0.16s ease-in-out infinite alternate;
  }
  html:not(.js) .slot.full img {
    animation: pinIn 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
  }
  html:not(.js) .trap .glow {
    animation: flicker 3.2s ease-in-out infinite;
  }
  html:not(.js) .chain.picked .mothmark {
    animation: hover 1.6s ease-in-out infinite;
  }
}
@keyframes settle {
  from {
    transform: scale(1.05);
  }
  to {
    transform: none;
  }
}
@keyframes flap {
  to {
    transform: scaleX(0.72);
  }
}
@keyframes swing {
  0%, 100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}
@keyframes sway {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
@keyframes pinIn {
  from {
    transform: scale(1.5) rotate(-20deg);
  }
  to {
    transform: none;
  }
}
@keyframes rise {
  from {
    translate: 0 34px;
  }
  to {
    translate: 0 0;
  }
}
@keyframes flicker {
  0%, 100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.08);
  }
  55% {
    transform: scale(0.95);
  }
  80% {
    transform: scale(1.04);
  }
}
@keyframes hover {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}
@keyframes p1 {
  0%, 100% {
    transform: translate(0, 0) rotate(-8deg);
  }
  25% {
    transform: translate(160px, 60px) rotate(12deg);
  }
  50% {
    transform: translate(260px, -10px) rotate(-4deg);
  }
  75% {
    transform: translate(90px, 120px) rotate(16deg);
  }
}
@keyframes p2 {
  0%, 100% {
    transform: translate(0, 0) rotate(6deg);
  }
  30% {
    transform: translate(-140px, -70px) rotate(-14deg);
  }
  60% {
    transform: translate(120px, -40px) rotate(10deg);
  }
  80% {
    transform: translate(40px, 30px) rotate(-6deg);
  }
}
@keyframes p3 {
  0%, 100% {
    transform: translate(0, 0) rotate(-4deg);
  }
  20% {
    transform: translate(-120px, 110px) rotate(10deg);
  }
  55% {
    transform: translate(-260px, 40px) rotate(-12deg);
  }
  80% {
    transform: translate(-60px, 150px) rotate(6deg);
  }
}
html[data-motion=off] *, html[data-motion=off] *::before, html[data-motion=off] *::after {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=on]) *, html:not([data-motion=on]) *::before, html:not([data-motion=on]) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* ---------- узкие ---------- */
@media (max-width: 1100px) {
  .read-grid {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 36px;
  }
  .notes {
    display: none;
  }
  .quiet .q-grid {
    grid-template-columns: minmax(0, 1fr) 140px;
  }
  .quiet .q-grid > .prose {
    grid-column: 1;
  }
  .quiet .margin {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    margin-top: 140px;
  }
  .quiet .dust {
    display: none;
  }
  .key thead th:first-child {
    width: 28%;
  }
}
@media (max-width: 960px) {
  .doing, .levels, .case-intro, .finale, .journal, .embed-in, .mimic-grid, .loyal-grid, .night-text, .dawn-grid, .damage-head, .faq-grid, .order-grid, .title-grid, .mech-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .legend {
    margin-top: 0;
  }
  .doing h3 {
    margin-top: 56px;
  }
  .journal .nb, .order-grid .scale, .mimic-grid .warn, .qindex, .letter-img {
    position: relative;
    top: auto;
  }
  .order-grid .scale {
    max-width: 300px;
  }
  .labels3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .mimic-grid {
    grid-template-areas: "ma" "mw" "mb";
  }
  .mimic-grid .warn {
    margin-bottom: 22px;
  }
  .embed-in .aside, .night-text .lantern-note, .dawn-grid .rule-note {
    margin-top: 0;
  }
  .levels .mount {
    max-width: 560px;
  }
  .loyal-grid .watch {
    max-width: 200px;
    margin-top: 0;
  }
  .mount.wide figcaption {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .mount.wide figcaption .zoom {
    grid-column: 1;
  }
  /* таблица механик — карточки */
  .key, .key tbody, .key tr, .key th, .key td {
    display: block;
    width: auto !important;
  }
  .key {
    background: none;
    border: 0;
    box-shadow: none;
  }
  .key caption, .ledger caption {
    display: block;
    padding-bottom: 14px;
  }
  .finale .mount {
    max-width: 560px;
  }
  .finale {
    grid-template-areas: "fa" "ff" "fb";
    grid-template-rows: auto;
  }
  .key thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .key tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .key tbody tr {
    background: var(--card) !important;
    border: 1px solid rgba(51, 37, 26, 0.5);
    padding: 0 0 8px;
  }
  .key tbody th {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--line);
  }
  .key td {
    padding: 8px 18px;
  }
  .key td::before {
    content: attr(data-label);
    display: block;
    font: 400 10.5px/1.4 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rust);
    margin-bottom: 2px;
  }
  .cards tbody {
    grid-template-columns: minmax(0, 1fr);
  }
  .cab-head {
    grid-template-columns: minmax(0, 1fr) 200px;
  }
  .species {
    grid-template-columns: minmax(0, 1fr);
  }
  .species li {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 4px 16px;
    text-align: left;
    padding: 16px 18px;
    align-items: center;
  }
  .species li::before {
    left: auto;
    right: 14px;
    margin: 0;
  }
  .species .medal {
    grid-row: span 2;
    margin: 0;
    width: 72px;
    height: 72px;
  }
  .species b, .species small {
    grid-column: 2;
  }
  .species b {
    align-self: end;
  }
  .species small {
    align-self: start;
    margin-top: 0;
  }
  /* журналы — строки карточками */
  .ledger, .ledger tbody, .ledger tr, .ledger th, .ledger td, .damage, .damage tbody, .damage tr, .damage th, .damage td {
    display: block;
    width: auto !important;
  }
  .ledger thead, .damage thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .ledger tbody tr {
    border: 1px solid rgba(239, 227, 205, 0.25);
    margin-bottom: 14px;
    padding: 6px 0;
  }
  .ledger th, .ledger td {
    border: 0;
    padding: 8px 18px;
  }
  .ledger td::before, .damage td::before {
    content: attr(data-label);
    display: block;
    font: 400 10.5px/1.4 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 2px;
    font-style: normal;
  }
  .ledger td::before {
    color: var(--amber);
  }
  .damage {
    background-image: none;
    border: 0;
    box-shadow: none;
    background: none;
  }
  .damage tbody tr {
    background: var(--sheet);
    border: 1px solid rgba(51, 37, 26, 0.5);
    margin-bottom: 14px;
  }
  .damage tbody th {
    padding: 16px 18px 8px 58px;
  }
  .damage tbody th::before {
    width: 46px;
    top: 20px;
  }
  .damage td {
    padding: 8px 18px;
  }
  .damage td:last-child {
    padding-bottom: 16px;
  }
  .damage td::before {
    color: var(--rust);
  }
  .letter-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .letter-img {
    max-width: 420px;
    margin-top: 0;
  }
  .sprig {
    display: none;
  }
  .trap {
    height: auto;
    min-height: 0;
    margin-bottom: 40px;
  }
  .trap img {
    position: relative;
    height: auto;
    aspect-ratio: 3/2;
    object-position: 70% 50%;
  }
  .trap::after {
    background: linear-gradient(0deg, var(--night) 0, rgba(28, 21, 16, 0) 30%);
    height: auto;
    bottom: auto;
    aspect-ratio: 3/2;
  }
  .trap-in {
    height: auto;
    padding: 0 var(--gut);
  }
  .trap .glow {
    display: none;
  }
  .backpack {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .backpack .mono {
    text-align: left;
    justify-self: start;
  }
  .title .wrap {
    padding-left: max(var(--gut), 44px);
    padding-right: max(var(--gut), 44px);
  }
}
@media (max-width: 640px) {
  body {
    font-size: 17.5px;
    line-height: 1.62;
  }
  .prose p, .prose li, .decisions li, .lab p, .qa p, .steps li, .weights li, .excerpt p {
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  .top {
    padding-top: 12px;
    padding-bottom: 10px;
    flex-wrap: wrap;
    gap: 4px 16px;
  }
  .top-meta {
    justify-content: flex-start;
    gap: 0 16px;
    font-size: 10.5px;
    width: 100%;
  }
  .crumbs a {
    padding: 12px 0;
  }
  /* обложка: вместо вырезанных из таблицы полос — отдельные прозрачные гравюры, раскладка как на десктопе */
  .hero {
    --u:min(1vw,4.3px);
    --ht:calc(24px + 34*var(--u));
    --hb:calc(30px + 31*var(--u));
    height: auto;
    max-height: none;
    display: block;
    padding: var(--ht) 0 var(--hb);
  }
  .hero .plate {
    display: none;
  }
  .hero::before, .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
  }
  .hero::before {
    background-image: url(../assets/dust.webp), url(../assets/dust.webp), url(../assets/sprig-clean.webp), url(../assets/magnifier.webp), url(../assets/pocket-watch.webp);
    background-image: image-set(url(../assets/dust.avif) type("image/avif"), url(../assets/dust.webp) type("image/webp")), image-set(url(../assets/dust.avif) type("image/avif"), url(../assets/dust.webp) type("image/webp")), image-set(url(../assets/sprig-clean.avif) type("image/avif"), url(../assets/sprig-clean.webp) type("image/webp")), image-set(url(../assets/magnifier.avif) type("image/avif"), url(../assets/magnifier.webp) type("image/webp")), image-set(url(../assets/pocket-watch.avif) type("image/avif"), url(../assets/pocket-watch.webp) type("image/webp"));
    background-size: calc(7 * var(--u)) auto, calc(5 * var(--u)) auto, calc(23 * var(--u)) auto, calc(42 * var(--u)) auto, calc(33 * var(--u)) auto;
    background-position: left calc(25 * var(--u)) top calc(30 * var(--u)), right 43% bottom calc(5 * var(--u)), left calc(-5 * var(--u)) top calc(-9 * var(--u)), left var(--u) bottom calc(2 * var(--u)), right var(--u) bottom calc(2 * var(--u));
  }
  /* паутина висит в правом углу: слой отражён, координаты ниже — от левого края */
  .hero::after {
    transform: scaleX(-1);
    background-image: url(../assets/moth.webp), url(../assets/spider-web.webp);
    background-image: image-set(url(../assets/moth.avif) type("image/avif"), url(../assets/moth.webp) type("image/webp")), image-set(url(../assets/spider-web.avif) type("image/avif"), url(../assets/spider-web.webp) type("image/webp"));
    background-size: calc(37 * var(--u)) auto, calc(46 * var(--u)) auto;
    background-position: center top 0, left calc(-7 * var(--u)) top calc(-9 * var(--u));
  }
  .hero-in {
    padding: 0 16px;
    text-align: left;
  }
  .hero h1 {
    margin-top: 0;
  }
  .tab::before {
    display: none;
  }
  h1 {
    font-size: 35px;
    line-height: 1.06;
    margin-top: 14px;
  }
  h2 {
    font-size: 33px;
    margin-bottom: 22px;
  }
  h3 {
    font-size: 26px;
    margin-top: 44px;
  }
  .hero .lead {
    font-size: 17px;
  }
  .orn {
    margin-left: auto;
    margin-right: auto;
  }
  .title {
    padding: 52px 0 60px;
  }
  .title::before {
    display: none;
  }
  .title .wrap {
    padding-left: var(--gut);
    padding-right: var(--gut);
  }
  .title-grid {
    gap: 40px;
  }
  .title .intro {
    font-size: 18.5px;
  }
  .title .intro::first-letter {
    font-size: 66px;
  }
  .toc {
    padding: 24px 18px 20px;
  }
  .plate-sec {
    padding: 72px 0 70px;
  }
  .plate-head {
    margin-bottom: 26px;
    gap: 12px;
  }
  .plate-head .mono:last-child {
    max-width: 75%;
    font-size: 11px;
    line-height: 1.5;
  }
  .specimen {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    align-items: center;
    text-align: left;
  }
  .specimen .box {
    padding: 12px 8px 8px;
  }
  .read-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .dropcap > p:first-of-type::first-letter {
    font-size: 66px;
  }
  .phrase {
    font-size: 22px;
  }
  .mount {
    padding: 8px 8px 0;
  }
  .mount.wide {
    padding: 8px 8px 0;
  }
  .mount.tilt {
    transform: none;
  }
  .mount figcaption, .mount.wide figcaption {
    font-size: 15.5px;
  }
  .vitrine-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 56px;
  }
  .vitrine-lead {
    margin: 0 0 -12px;
  }
  .vitrine {
    height: 330px;
    border-width: 9px;
  }
  .vitrine .web {
    width: 180px;
  }
  .fly {
    width: 92px;
    height: 92px;
  }
  .decisions {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .decisions li {
    padding: 24px 20px 20px;
    font-size: 16.5px;
  }
  .decisions li:nth-child(2), .decisions li:nth-child(4) {
    transform: none;
  }
  .stamp {
    margin-top: 40px;
  }
  .key tbody {
    grid-template-columns: minmax(0, 1fr);
  }
  .key tbody th .sp {
    grid-template-columns: 60px 1fr;
  }
  .key tbody th img {
    width: 60px;
    height: 60px;
  }
  .cab-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .cab-head img {
    width: 180px;
    margin: 0 0 -6px auto;
  }
  .cards tbody th {
    font-size: 26px;
  }
  .journal {
    margin-top: 72px;
  }
  .steps {
    margin-left: 19px;
    padding-left: 33px;
  }
  .steps li::before {
    left: -53px;
    width: 38px;
    height: 38px;
    font-size: 21px;
  }
  .steps li {
    font-size: 16.5px;
  }
  .embed {
    margin-top: 72px;
  }
  .lab {
    padding: 38px 18px 18px;
    font-size: 16px;
  }
  .check {
    padding: 18px;
  }
  .weights li {
    padding-left: 56px;
    font-size: 16.5px;
  }
  .example .q {
    font-size: 24px;
  }
  .quiet .q-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .quiet .margin {
    grid-column: 1;
    grid-row: auto;
    margin: 0;
    text-align: left;
  }
  .quiet .margin p {
    display: inline-block;
    margin: 0 22px 10px 0;
    font-size: 23px;
  }
  .mimic-plate {
    margin-bottom: 40px;
  }
  .mimic-plate .tagl, .mimic-plate .tagr {
    font-size: 20px;
    bottom: -2%;
  }
  .excerpt {
    padding: 24px 18px 18px;
    font-size: 16.5px;
  }
  .chain ol {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .chain ol::before {
    left: 31px;
    right: auto;
    top: 20px;
    bottom: 20px;
    border-top: 0;
    border-left: 1px dashed rgba(239, 227, 205, 0.55);
  }
  .chain ol {
    margin-top: 18px;
  }
  .chain ol button {
    flex-direction: row;
    text-align: left;
    gap: 16px;
    padding: 4px 0;
  }
  .chain ol button i {
    width: 56px;
    height: 56px;
    flex: none;
  }
  .chain .mothmark {
    width: 40px;
    height: 40px;
  }
  .chain-out {
    flex-direction: column;
    gap: 4px;
  }
  .dawn {
    padding: 40px 18px 24px;
    margin-top: 56px;
  }
  .faq-grid {
    gap: 30px;
  }
  .qa h3 {
    padding-left: 54px;
    font-size: 24px;
  }
  .qa h3::before {
    width: 40px;
    height: 40px;
  }
  .qa p {
    padding-left: 0;
    font-size: 16.5px;
  }
  .sheet {
    padding: 30px 20px 28px;
  }
  .bookmark {
    right: 12px;
    bottom: 12px;
  }
  .foot .sep {
    display: none;
  }
  .foot .mono a {
    display: block;
    padding: 8px 0;
  }
}
.preview-moth {
  --lq:url(data:image/webp;base64,UklGRkQBAABXRUJQVlA4WAoAAAAQAAAAFwAAFwAAQUxQSNEAAAARb6CmbQMW9tuNiEBtu41KHXBtazvmPGPb9nRWNxOjNEvbtpOvTGfbdmnWuSEnVxDR/wnA/xRLP7NQAIipH8wUfDRTATMVQEMKBVaq2Qpxs2qjo4YqHVBbzO8TnWvdXR3xNy772MVDwdJW9WxH5dXE1f20Lu0pJbV9521suHmWgaKpKXK9S7aIE2KSm5R1OZeU1UIoKE0MZm10JyUklgKFyZk5p5GSULESEJfkFC3pwyU5FABiifdIT5dQ8Klske/Dl7RxnvcLM+pZoH4GmKn4vwBWUDggTAAAABADAJ0BKhgAGAA+3WKlTyuloyIoDVFwG4ljALsAGKc4sAD+8OvJjJz7hcRLO7N/105kY5nGuCOfkW4giL+4C3VMXrBCQg7lFSLJAAA=);
}

.preview-sprig-clean {
  --lq:url(data:image/webp;base64,UklGRjICAABXRUJQVlA4WAoAAAAQAAAAFwAALAAAQUxQSLQBAAARb6CmbQMW909XRISaJq7rcEiyte2QpCeQHJU1Mkdt290j27ZtIzLajPgj20iVbRsL0G4iTq0hov8TgD1r9XUFYAZcrBMxCYjX4F/D8C2A9XeJC0VHN9isfKWicdzaZfsSyng3NFySbnt6UrkyUaoptqundv8aa9Gx3xRpceOW26H40xOpAGfXz1iiSqZkc+f+ezx7ZcRUbLFNa39NtsZuSzD76Xvl3ahufnXDioOFVIuWWy/z4WCXzGcxXiI0iYeF8Ee8KLl5Q6FSPaa+i34dKAm46f/akrExEK7TX2Rwem3znszb4VCj5Ua+9O8ESV+Men0eTPPIsEkzm+ZD3EKAlVrjGS4NPV51U4bM54K/o7+LtKNrgCdykzi0+3ftGezW+mlpA4bLYYP68Nj7l3sd5Lj+XbNvNnhsPIwGjhw66fSpP5a6TcbxT4m+IPP0yhMyEAq3nKS5RawHjIGS2wyXDMVUuGW8spZFSl6G0mGjaN15MDIeu6HAxoi14aA5pJsKZH4NZmTetkpOeoC/QRcvtWbTC1wSMtMDTcIHZJ4BvkSCHoA0INNo9tocpw1OhUP+qaAAVlA4IFgAAABwAwCdASoYAC0APt1qrVKopaQvpWgB8BuJY2vbVt+GpsN6BoAA/vBUHyPrfo8NHPtHfJJxiSH7Cd5iouWRxsyvUCEu0iCyQJXARxnu+y0t0aoAIGrIAAAA);
}

.preview-dust {
  --lq:url(data:image/webp;base64,UklGRkQBAABXRUJQVlA4WAoAAAAQAAAAFwAAFAAAQUxQSMAAAAARb6CgbRsWD0D/IiLOTkaQPwVwa21b2zyfZPeiAcx2yR6AmbF1OCk5GUDUhzegBXCAzKXgBhH9nwD+NyJf5UQD9auEaYDylVRKliigAFQf5zEVtMB6p9oqCl8eplpeRv1CNhrTk6YpX4xvL3d2kgqgSb7obM2aAbSKdzD3e0VBIHvq2Z/PrbgISM27fFiuQlEdIjXv5aO+LEkMyB3frMpbGdEAreLsL+8PhKCWd/x9X4cooM8uHg5MKIaByo3rhQBWUDggXgAAANADAJ0BKhgAFQA+3WitUSilpCKoCAEQG4lAF2VquYfhujSWTNl/AAD+8Mnx8I8YuO2abK9n+ucdO/G/NFlum+9iLq6lpDzcAgSE71spkh22YnQ6hgDYzmYUUv3YoAA=);
}

.preview-spider-solo {
  --lq:url(data:image/webp;base64,UklGRkYCAABXRUJQVlA4WAoAAAAQAAAAFwAAMgAAQUxQSKMBAAARb6AgbQMWT0H3IiLE3ST240KybW3H5OwfVe3u2LbTztS2bdu2bduqzGw7mWGku6nONUT0fwJAqEImB/9TXaUAMDiieQXLMTgElbJQqRWYHMFUMBVMjqA5qFQDgzOAmbicTPcg4G2c7mfAlSDdkZCpNLoTMzliGUefzWVyzLWg0dkzLzMcTvAgmLxr1Z65Dmdwwvsz5WeeBouTvA13rCo7szPjasjmWhM6rV71Led0wOD+q9dUPZ1qNYZCO1bNjDqt2p9RGHT1bk333mN2/40kq9ucGhmvfLqfRG+VUrtr7HmWpVK9aaEt31v/2cCWuHBez6Yf5/8r635qHl3WfL375OuzOb0DWJoaeWtfDIY8uTPiS6pPhEpfdsxfufrstrmY3OrB9t/n3mWcSPChqPfinjs79yxsy8zNdQoTw5wxT6Oam2N4EGy3OHEvhCvR5PBt9C6AH/HkjCuuBvA26pwzxbQArkSVchYbBhaHMhbbDiaHMgqjhwG8CyslxffBr6BzyBFwzWAMDmG6SmiUhBpAbTTKSLcEm4N0hTHdVUij5P8MBgBWUDggfAAAANAEAJ0BKhgAMwA+3VylTKilI6IsDMkQG4llEUAEDzC80POvMRFQweerA7RaheOAAP7woJPTFK4AC4/NJgYBTjDpoIxO5Id5DTCYs8B4ByT2JQOP6emHNcCq7pIQyWiISM5xg+cSylwhInANNWzGWxy0abEs1wkMVg2IlAA=);
}

.preview-pocket-watch {
  --lq:url(data:image/webp;base64,UklGRnoBAABXRUJQVlA4WAoAAAAQAAAAFwAAFwAAQUxQSP0AAAARb6AgbQMWz0D3IiK0ktelXQDXtrZjzhlP+RvdOKhs205GVazKKG1bpdMn1V8nVe7KlxDR/wngPyt6bYDw4QXCsgosf7YCw9dZwMX1LjD1FAbf0+INZM0k86HjOX7N6taVMQ9916MjHQ1S9cKKjandaO+GXVaGom6mdmODxRJCZYPByu7Ian6mTaiMRjnei92pYq2SPX/K0m38tduWjW/h2NZ3s70Z8onULva5fNZuj6bKFf3JDg/vE0JBwFdxny6YZDiZD0hZLy+paQBL8erHPeGh6QtvluXmm8FeqUr2XzSkAe7J3YWtq7xTN9A9XHm+Hb1o4HuhuzfX9sP3AFZQOCBWAAAAMAMAnQEqGAAYAD7daKxRKKWkIqgIARAbiU1UCZQBO1Y5gAD+8KIsE7nihI0vk+KPiDVfL0LBww0utHMNme5HLTFPR2fr8q0rLxarSnyqaBN/gOzJ4AA=);
}

.preview-spider-web {
  --lq:url(data:image/webp;base64,UklGRgoBAABXRUJQVlA4WAoAAAAQAAAAFwAAFwAAQUxQSKwAAAARb6C2bRs25c1OLxERYGe5m8dbO+BW2/Ysecjtc5PLTM23ATlWjACdJZ2hsnSPrBP4D+AKeZs/nOMGEf2fgAY5pXcxthMAbKXkqNJNYZxnkos5xwHGtVzMHCHUJKljztO3WSFmmN9HF4GkUfR+M1fS7cfzvkVOsuHzb0cuBtPH6BIkWRwXd8saSDKjNqcKkizXG0yCFc/VWj53c46pWtcUK9FBwUq1usrqTP8NVlA4IDgAAAAQAwCdASoYABgAPt1orVEopiQiqAgBEBuJZQDHMBbIQCAA/vEPcZ0bGI7TQrprsxyvEWiskIAAAA==);
}

.flight-p1 {
  --path:p1;
  --dur:9s;
}

.flight-p2 {
  --path:p2;
  --dur:11s;
}

.flight-p3 {
  --path:p3;
  --dur:10s;
}

.preview-quiz {
  --lq:url(data:image/webp;base64,UklGRh4BAABXRUJQVlA4WAoAAAAQAAAAFwAAGAAAQUxQSKcAAAARb6C2bRs25d1OLxERYHxWpo93FOBW27asuXGH98fpvHfrnAEcJpBWkgzg0uVQpnNd4D90cdnqJxULRPR/Ath+Uf4TRRHdBlF0gGxIoBW9ZqADsr1eCjgKSLaX77ciwOG0l9fT26mATNp6YH+thpE9A8BrOzWDI5PmvT++h7kFiKp3L18GqhHg4k9d/9iRAhK/ulydrxzQiXtJPx+d3hpBANI7Ux/bDQBWUDggUAAAAPADAJ0BKhgAGQA+3WaqUKilI6KoCAEQG4ljAFcLBROFhjtsXgg6+gAA/vD+MUWpWJMJ3+QV/2Y0/UXioOKu4XPIxsasBTkjEWPKd6CMkAAA);
}

.preview-memory {
  --lq:url(data:image/webp;base64,UklGRi4BAABXRUJQVlA4WAoAAAAQAAAAFwAAGAAAQUxQSLcAAAARb6C2bRsWZ3RPRMQF8s92ogCKtW3LlPuz/ru0b/6K/vNvYLThlp3kDs0y0Ykc0qwA67oCZjk4bCCi/xPAf8zeiXe2qLmCPHMFWQ3cLKjilDydA46qAlaVP6gJcNR07A1Hh1sdnnCmFlqNx/Rq96K4jit97buHcHr+tfViesPb11frjbXfjkSvWr+ZsGWOLzskhhOcnL1ECAw5zhAV4YABnApgIQDEpPxgtdkodGW+6bt8MVdf+ZcAVlA4IFAAAAAQBACdASoYABkAPt1mq1EopSOiqAgBEBuJZQC90BEcxs7O4ehF+EWIAAD+9WV87ivV+ZB5/SflEQmk3589uZPK2Kva9SlWMPVUrF9AdJQAAA==);
}

.preview-puzzle {
  --lq:url(data:image/webp;base64,UklGRlIBAABXRUJQVlA4WAoAAAAQAAAAFwAAGAAAQUxQSNgAAAARb6C2bRsWe2ypERHoriTtu/ABRdu2Y9P16firmWz/4/ZbaaxmRk+zk9Xs7swtzDHb4Qoi+j8B/Fd15XfsCwGwOQHqN7fL2DJxgOTG6rQ6lk1rgVTXoS7Zs1eoBDwVBwsNvocRHdB3snwvL7yUZICx507BO5qXACqPrOR7m0VIKtQrqLOLwEZtToBkWi3AzEGdU8KmX3IQu/hcH1All6V+u5i8+wpNiPVtB2W7Vt3+5Fmi4vTZn5JhKH4o9F3dHlTCrKvRhPBxuzUE9c2tEuy1VQhgE5tF/jNWUDggVAAAAJADAJ0BKhgAGQA+3VylTKilI6IwCAEQG4lAFYAGDC9edgBVDAAA/vCy/jL3/VRCx0V1qNMhKMvsa5LYYijafNNMym1KLc9V9nA9QRsoxinA7jGAAA==);
}

.preview-arcade {
  --lq:url(data:image/webp;base64,UklGRkABAABXRUJQVlA4WAoAAAAQAAAAFwAAGAAAQUxQSMAAAAARb6C2bRs25TW9j4mIQHXXVcyF0wOOtW3HnGfcWqXR2faUdmzbthYw7sPSyQa4hGQ141lBRP8nAN1NaCacbubgSNKE6mKCXMe9FmAUkpSawY3R4qbACwCRjcT4aoGK2s9Tq2etqATo+nAoMhUt/vQAcB2Wo2fnt+/bAOi3+fRN6eNOUPP8fvX/cf8xQwAGH6sPv38lmZACcF2B6/fLYopIAzDg9aX9xyLGCgkAPSxhhEmgo3aRAHoa9U0A1A0I6GZWUDggWgAAAPACAJ0BKhgAGQA+3VqkTLclI6IwCALgG4lAGBuFr37gAP7wt+3QnmzZc1E7TCCtASE2XytQKoY4zl/DmU7Lz7e+sR3UFLGWGiHLm/vXJyGaraWMd/+6fMAAAA==);
}

.preview-quest {
  --lq:url(data:image/webp;base64,UklGRpQBAABXRUJQVlA4WAoAAAAQAAAAFwAAGAAAQUxQSAABAAARb6CgbRs2VABnfxEReNI5Gdm1BTi2ra1VbsIEYkjJ+5MgXX5BysgftHqutZd4axV01rvTOq3LCBiOM4OI/k8A/l1Tv0mYVFifNJ2k8rbuAFokuU1ruQQBPIenHFl1SVaFxo18n8yaKakCgh2O6xkjG7cBfO/9rBAMpGsmEL0cr6yF0wtCAlOrm/F1uH89yRSsNy+aB9b+WDFSsd7YLx7ZK3f9TMHiWm3hOrofJsxE+Hp8U4mvBtisBX/r49xNtqJsdQgelyK1O+rMEAbfIeTwJCmrJoNnh+Z12XCZkYbH52rbXSRvixCeFCK0SU1KE92RYGamGqsANCmFreBroeBbVlA4IG4AAAAQBACdASoYABkAPt1iqE4opaOiMBgIARAbiUATpADwQC3w8PcQNV2ggAD+8J7BqMGN7qQhJO5OCIO/apYBdu6fqAH/nJ6lCYpvA9xyDgzCmtLktKEzCwbv2yiYyJcfcQqT7/qhZuebUJvFpwAAAA==);
}

.preview-daily {
  --lq:url(data:image/webp;base64,UklGRkoBAABXRUJQVlA4WAoAAAAQAAAAFwAAGQAAQUxQSMYAAAARb6C2bRs25L2kJyIC7Plzu97VgFtt2/Lkidae2pPWtXIr3dO5O9a5LBDv8B8WIP8AwFx5//8cNojo/wTgn4UcWhHGPhGhe2rf/335ieXH/n5z2BE/DMsw7Jb4/WS27aiBWEcNAgCCo3MBjokLXl0Rnx4lAyDrSXhoq1Ie1qqGgAAI1FyEVghc1qIAtNmiTIRUJQdb/WHjXvgga8ZOHh4L4SWrAVK3jwVlaLVTAZBllbLMe1cIUjv/TgpAhw4WcE7P1OCWgxtWUDggXgAAANADAJ0BKhgAGgA+3WCsTyilJKIoCqkQG4ljAL9rTEI9a5qurTaiCAD+8LewUO720OImuzJ2AlgGLOLI/02vawIl+gCoyPyNFjeYZF4d5EM37+7ewmx4pDbLYx6MgAA=);
}

.preview-simulator {
  --lq:url(data:image/webp;base64,UklGRpoBAABXRUJQVlA4WAoAAAAQAAAAFwAAGAAAQUxQSBEBAAARb6CgbRs2VAD7fxERaNr0dIsIf8CxtW2N8uKU7u6UtgN3Z7TCSejHWyRS+7jnT1LhEDq3HcBudAsR/Z8A/LeyuwAVlQXfsnsy5ZWoOgAdYbfEiBqhACxb9DURiUED2LDUr1ddN+YADOrWfsBmE6cB4OHTLtvWPb4CABcGfWSz77LFwGBUduecNi9XAiQiupmjvD61HDi9C4WMm1vDaAHugwH/q3qimc1AWjcCl8THKgOAMnGka9Sud28fIA6Bv933qnu337JRXWX0G6sWZCrLm4xmKRwDMpXjw175g8gMiCMXCdNaWFZJBXHkzbAWZiXyjsPp/N3He/g1/M4Do7aq4ZGcSg4K8bOgBArxa8VIAQAAVlA4IGIAAADQAwCdASoYABkAPt1cpkyopSOiMAgBEBuJQBOgBEBQEMKgjVvWuvAA/vDKq5+cjyPwSSpskBiLigdwVEqf4l296NPEW+w8y1zT1ZDUCNIXu1MVoiOdKmAst6QVdAru4+9wAA==);
}

.preview-wheel {
  --lq:url(data:image/webp;base64,UklGRpgBAABXRUJQVlA4WAoAAAAQAAAAFwAAGQAAQUxQSAABAAARb6CgbRs2VABnfxERiGN9R+WmFnC1bVubvPWOcZs64a6rs7k71JJ2Q/Ono/uGVjYcRkbZ2OAEOJ7IMUT0fwJgPvLDYVp2MHC947aZSMQaZY9VnhtIbWxaLBk8pbeFfaZLY4xSvVSHKUFUWnNROoCQuKJyc1TsxgVM8HS0XYioBS9wxNF0fFNVCz7gaGN9/XZ3eHjVDywZRL1PuuhJLzBgEP40PEeHPQCVaqP1AbUtDQA6PUjouL5pSjNhQkdJ0BQazxE6XHSZcF8q0qfdsPxp1Yv/81aFnkH2IwnAhWPj/fPv604BgMf6d+P197XmAibKhBBSKt0JwFK9ZK7XRTgHVlA4IHIAAACwBACdASoYABoAPt1kqk+opaOiKAqpEBuJYwC7ISACRKMvulQaPmj0gSX/groAAP7woA03rx60ZPT5wfrm9nI3fv81ZQwR/6gOrWmglVAUk2Rp5Mxt0hezxd4DHRdjX/afHGM6nKNU1du0/VsM6gKAAAA=);
}

.preview-magnifier {
  --lq:url(data:image/webp;base64,UklGRiQBAABXRUJQVlA4WAoAAAAQAAAAFwAAEgAAQUxQSLQAAAARb6C2bRsWe2+pERHg9q4vxdcDarZty5brfn+r9/t7VNw1O1QnuUN0FnBoPoAlyLABmzFDRP9zJBd7z3cDAL2lyl6uugSAi4c5GE0BoCmBmwGiWwQeB6DSLPAsgPoKAmYtsMsRWACoaDriShsAvBVifMykAHP5vXR1oGaDZ34nd/aC+zQOF/eCY5ToZeS1Q1V681QrevgreiPh3lBRmP4K9A6LPoXwsywJZ8lS/SwYSQGw+Q9WUDggSgAAAJADAJ0BKhgAEwA+3WKpT6ilI6IoCqkQG4llaHBZQQnzYRPYnAAA/vD+F5MggMqpPleLGw+kq9FIVIWUHjB+RqTMWQkm321E8IAA);
}

.preview-field-notebook {
  --lq:url(data:image/webp;base64,UklGRhoBAABXRUJQVlA4WAoAAAAQAAAAFwAADwAAQUxQSKQAAAARb6C2bRsWe2qpERH4fGr6jrsPOLa1Ha+eOOl+hJ3VWaVTG6XR2TaqrAzCA+C9o/MQIvo/Afhfgg2iYiejZpIkgwauOy2cvCgAQQcvExEebl8cekHNJXzuyG94GZXwkSIA8IRkxi06sr7oysp0VUrjS7sTzHhE9rAMQLEYyFiE908xAInTnFEL92sKQMKsCPHUgPzLjAlkYrF8LBbjKgf4rfFXAFZQOCBQAAAAUAMAnQEqGAAQAD7dXKZMqKUjojAIARAbiWUAnQAtB4EAIAAA/vEdWBB1ok3CpleQdl+cL+WR0zsMD1oUThIHzEN1X2dz3DgETLMzPYhKAAA=);
}

.preview-balance-scale {
  --lq:url(data:image/webp;base64,UklGRrIBAABXRUJQVlA4WAoAAAAQAAAAFwAAIwAAQUxQSCUBAAARb6CgbRs2VABnfxERqJzqGv65BpCsbTvePP8XDs3RV7v9k1RDWzFmZbCA2raNof8dBPPq66p+tEuI6P8EQGzgoJBXK2nRKuE1Slq0CgyjZZxUR0fo5iDc0SEyAyNawC0qBlq0gEdUCPAaoBAApRIGQgAKIqL4E4FRZAQVUREBBW8uaCEy6zOJWR2voT4NiG9KSKh8WjrWryJ0eqaZ+HQ0sJgm53OxkKNFu54+PCjjOzMLxKfnuzIHaiAMjFcBYQD8TiIRzyXCMyrg7Os+M/3zePflAl4FQRBygpCbBz4YY3nGGFuSYr+MsUXgOyebJ+CAyQYLUGIEtYAv4fwwzFhgeIm5G0NvYcNMDKA3Xd6Z4tf50iIAhnYvAZ4yGogLjQA2tRL/CwBWUDggZgAAABAEAJ0BKhgAJAA+2VikTKglI6I1VAwBABsJYwDA3EWvUj2mw2ny8+/gAP70YlXAFKGeEQyFyOz54H1SKAE+a9C/aq8m5vX55ejuLnfWyfUBXTK+5CxMDIq7DOCyU0orrNWEpLAgAA==);
}

.preview-compass {
  --lq:url(data:image/webp;base64,UklGRtwBAABXRUJQVlA4WAoAAAAQAAAAFwAAIAAAQUxQSE4BAAARb2AgbdvYFPztFhERQMYjHiBZ23a8eX/UjGa1bZvRyBzVtm3bbWz96ThcQFKtoMtp/3YLEf2fAPh/R/cfykYWI8h2cJCQzSEwQHbbzvhDz6oqnwzcGhpZ2qMGI2k/UZ4qGb+0Lb1/frgI7Mfg+9nxsEOtAACeW83szy63ETjAfIDZLcisancWAjyvS9L5DGqWRQltQXZ3uZidzuQF0Jk3JoW5rLBmZBARt6quzIXh9fV0/ClmfyOTLxl2jeOYJel+g9HnGH1n0Sseiw4uJENDyg9iRHzYdD9Ba1/yfolR2kOTcb2ic+Figk3HHgtvlB1p9qdxJoXmyOf5GMLaQ66gouyNkUjki8tmc5HsXR8G1vUsWg9ekf40icKOP6d8vhqb9dYBJDrPsnlYx4mGBgA7LuXI0st7HQIAYHl1Ed8cGvxM7H85q8kAUgqFAgAAVlA4IGgAAADQAwCdASoYACEAPt1eqU69P7WiKrgMA/AbiWMAuDAN3qEY4PSHCAAA/vC37eeP0vsuN3ZZP8c8jC9EOt+0oIUa6Aro/RkAqlKjalOhxYf4RgMW7d00ZQAq3xWaPmO7aiZernh4PQi8AA==);
}

.preview-mimicry {
  --lq:url(data:image/webp;base64,UklGRvQAAABXRUJQVlA4WAoAAAAQAAAAFwAADwAAQUxQSIMAAAARb6CgbRsWj0D/IiKOdiqXbwxOa217k+f7KPr7fxzqTzJBkXRQHSQ6jrJCLw7NAJBdWI3DBBH9T34PKg0AAUhTAQsqRFK0NY78u+W85ddd5i3/tEfe4vKZiGXfQyLYde/AypmAXXcK4bVVcMU6AnlsDCjGCtwngA2aCmFVVzCqDgDhPwBWUDggSgAAAHADAJ0BKhgAEAA+3VqmTKilI6IwCAEQG4lnAL84MGGezBafoAD+8R8fCjGRteR5jivipDjW5TwWk8mO1aVykyAreV6reehwcAAA);
}

.preview-seal-detail {
  --lq:url(data:image/webp;base64,UklGRpYBAABXRUJQVlA4WAoAAAAQAAAAFwAAFwAAQUxQSBEBAAARb6AgbQMWz0L3IiKE65dhOODYtrZW+fA2X/AyuLtDF6bg0Dmlu2ukQ39Jb7zKvXRp0enw5hDR/wkAACwoASCiJCKi1IBFQhE2NIiIDQOIAkq79pYoDUwjorQyfx82muS1hoaGu5Ngjr+fzdQONu5spPPRrB59HBqS7315x3F+M2Pi+szWH9eYwviy2PeoRxWmEk4j1QNy2KUqqsmC8Y6Gm09GNRZwbN8U3iccRdukAducwo0kVS2LBEmqA96SJ7rlEE7SteBJH2vEZXNiFMO2wU1V+9DIVBEICjsKsZNDuxMA3D56ZOkkUQ8AV7pDFbKZrQAAIZWnymPWKAYAkNYiD3+xMfj/KecaKSog7DUXAQAAVlA4IF4AAADwBACdASoYABgAPt1ep0yopSOiMAgBEBuJYwCdACHgEWR7MXlYCzLZRWJDNamiXuAA/vVsIYqNTcwjLXx/Oxfpbh6+BrXYH8+x45tOaRGNFaFPB5C695zCBX7kt+AA);
}

.preview-light-trap {
  --lq:url(data:image/webp;base64,UklGRowAAABXRUJQVlA4IIAAAABwBACdASoYABAAPt1apkyopSOiMAgBEBuJYwCdMoADUFtwj9gRKUsYVriggAD+8Ne2Gy4tTO9zs7AMH0rxifYUN2ayO8eRkC66VzS7ZhEXTmYwmr9Aw5L+hReg5ro8BFAy2fga6lZXvW7x07CX9y+x9TG/47KOIq2b+N3VQ5wAAA==);
}

.preview-damaged-drawer {
  --lq:url(data:image/webp;base64,UklGRlIBAABXRUJQVlA4WAoAAAAQAAAAFwAADwAAQUxQSMsAAAARb6CgbRsWl8DdiYjA7oy8zucJuNa2GZL+8YRWZkeetRWjus5m7e5wXb2hFdmRmTo2amPv1fAWIvqf8KsNAGBFI4rMoHUvAMzIKsJkcGPUBLauqWa8tHx86fJBoLWpMZdH6MQvQN0Qg773Klkdeya2+ryF4cWVgKn7tr81Fmse7ds1eGYL4XC2ryUsyNb2TSyKGA/IE940Oy818wUy3a9ZtcBYY64Dt0iNyH9VtkIGlxVGRGKKfXyhlD5/flFaDYFMY1OnJA8S4oN/AABWUDggYAAAALADAJ0BKhgAEAA+3VynTKilI6IwCAEQG4liAJ0ygARme8kYnRAAAP7wbQTaWWNguEi9qwuBOYkw2z1ywMH7t+guEGz+DnyzcQGR1L1cnyeEq0ep95b+/Lf3dXDOkWoAAA==);
}

.preview-letter-seal {
  --lq:url(data:image/webp;base64,UklGRhgBAABXRUJQVlA4WAoAAAAQAAAAFwAAEQAAQUxQSKoAAAARb6CgbRs2VQDt/omIgNV6ZUUYvwGptrZl1cHm7/dBgF/wmdvIA7iPnLFDAgjgBahAiNuAddt4hIj+TwAgDn5ZTP5Ckg2f+UPddiCObwwAM/hNAZSSlFSBtVZgmrUPN0w0IlqO7yhosUZph7zeQ1DIa6Ac58/+F/XMYy4PVS+GOIoeFZsdHzkMhcQ3p9O85cTQlrXazistJxhaprtqIuUAiC2C5YTNV7H5X1ZQOCBIAAAAMAMAnQEqGAASAD7dZKhPqKWjoigKqRAbiWMAyJgYEussAAD+8R73YeNswxqJcn46B2XTbMb8MH8BLAOlhnco1FEboUMJQAAA);
}