@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/literata-cyrillic-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/literata-cyrillic-700-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/literata-greek-ext-700-normal.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/literata-greek-700-normal.woff2) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/literata-vietnamese-700-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/literata-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/literata-latin-700-normal.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: 'Literata';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/literata-cyrillic-ext-500-italic.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/literata-cyrillic-500-italic.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/literata-greek-ext-500-italic.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/literata-greek-500-italic.woff2) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/literata-vietnamese-500-italic.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/literata-latin-ext-500-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/literata-latin-500-italic.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: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/onest-cyrillic-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/onest-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/onest-math-400-normal.woff2) format('woff2');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/onest-symbols-400-normal.woff2) format('woff2');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/onest-vietnamese-400-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/onest-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/onest-latin-400-normal.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: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/onest-cyrillic-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/onest-cyrillic-600-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/onest-math-600-normal.woff2) format('woff2');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/onest-symbols-600-normal.woff2) format('woff2');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/onest-vietnamese-600-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/onest-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/onest-latin-600-normal.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;
}/* angrybeaks.com: a field guide to the game. Book look: Literata headings, Onest text, spruce and plate paper, thin rules, square corners. */
:root {
  --spruce: #173a30;
  --spruce-soft: #2c5546;
  --moss: #5f7d6e;
  --plate: #f3f6f1;
  --page: #fbfcfa;
  --rule: #c9d4cc;
  --ink: #1b2420;
  --ink-soft: #4a5a53;
  --beak: #f2a900;
  --scarf: #c8321f;
  --on-spruce: #e4ece6;
  --wrap: min(1240px, 100% - 32px);
  --serif: 'Literata', Georgia, 'Times New Roman', serif;
  --sans: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 17px/1.6 var(--sans); overflow-x: hidden; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--spruce-soft); text-underline-offset: 3px; }
a:hover { color: var(--scarf); }
:focus-visible { outline: 3px solid var(--beak); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; color: var(--spruce); margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.01em; }
h2 { font-size: clamp(26px, 3vw, 36px); }
h3 { font-size: 21px; }
p { margin: 0 0 1em; }
.lead { font-size: 19px; color: var(--ink-soft); max-width: 62ch; }
.small { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 .4em; }
table { border-collapse: collapse; }

/* ---------------------------------------------------------------- top bar */
header.bar { position: sticky; top: 0; z-index: 20; background: var(--spruce); color: var(--on-spruce); border-bottom: 3px solid var(--beak); }
.bar-in { width: var(--wrap); margin: 0 auto; min-height: 60px; display: flex; align-items: center; gap: 14px; }
.mark { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 700 18px/1.1 var(--serif); margin-inline-end: auto; min-width: 0; }
.mark span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark img { border-radius: 8px; flex: none; }
.mark:hover { color: var(--beak); }
.go { color: var(--spruce); background: var(--beak); font-weight: 600; text-decoration: none; padding: 9px 18px; border-radius: 2px; flex: none; }
.go:hover { color: var(--spruce); background: #ffc23a; }

.pick { position: relative; flex: none; }
.pick summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 2px; font-size: 15px; min-height: 44px; }
.pick summary::-webkit-details-marker { display: none; }
.pick summary::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.pick summary img, .pick li img { width: 20px; height: 15px; flex: none; }
.pick ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--page); border: 1px solid var(--rule); box-shadow: 0 12px 30px rgba(10, 30, 22, .22); width: min(560px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.pick a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--ink); text-decoration: none; font-size: 15px; min-height: 40px; }
.pick a:hover { background: var(--plate); color: var(--spruce); }
.pick a[aria-current] { font-weight: 600; color: var(--spruce); box-shadow: inset 3px 0 var(--beak); }

/* ---------------------------------------------------------------- book: contents + pages */
.book { width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 56px; }
.toc { position: sticky; top: 63px; align-self: start; padding-top: 48px; }
.toc ul { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--rule); }
.toc a { display: block; padding: 7px 0 7px 16px; padding-inline: 16px 0; color: var(--ink-soft); text-decoration: none; font-size: 15.5px; }
.toc a:hover { color: var(--spruce); box-shadow: inset 2px 0 var(--spruce); }
[dir='rtl'] .toc a:hover { box-shadow: inset -2px 0 var(--spruce); }
main > section { padding: 56px 0; border-bottom: 1px solid var(--rule); }
main > section:last-child { border-bottom: 0; }

/* title page */
.title { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 14px; }
.act { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 24px; border: 2px solid var(--spruce); color: var(--spruce); font-weight: 600; text-decoration: none; border-radius: 2px; }
.act:hover { background: var(--spruce); color: #fff; }
.act-main { background: var(--spruce); color: #fff; }
.act-main:hover { background: var(--spruce-soft); border-color: var(--spruce-soft); color: #fff; }
.title .species { border: 1px solid var(--rule); background: #fff; }
.title .species .plate { aspect-ratio: 4 / 3; }

/* species plates */
.species-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); border-inline-start: 1px solid var(--rule); margin-top: 28px; }
.species-list .species { border-bottom: 1px solid var(--rule); border-inline-end: 1px solid var(--rule); }
.species { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.title .species { grid-template-columns: 1fr; }
.plate { margin: 0; background: var(--plate) radial-gradient(circle at 50% 60%, #fff 0, transparent 70%); display: grid; place-items: center; padding: 18px; border-inline-end: 1px solid var(--rule); }
.title .plate { border-inline-end: 0; border-bottom: 1px solid var(--rule); }
.plate img { max-height: 120px; width: auto; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(20, 40, 30, .18)); }
.title .plate img { max-height: 190px; }
.marks { padding: 18px 20px; }
.marks h3, .marks .name { font: 700 22px/1.2 var(--serif); color: var(--spruce); margin: 0; }
.kind { font: italic 500 16px/1.3 var(--serif); color: var(--moss); margin: 2px 0 12px; }
.marks dl { margin: 0; display: grid; gap: 6px; }
.marks dl div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.45; }
.marks dt { color: var(--ink-soft); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.marks dd { margin: 0; }

/* update insert */
.insert { position: relative; }
.insert .date { font: italic 500 16px var(--serif); color: var(--moss); margin-top: -6px; }
.insert ul { margin: 0 0 32px; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 70ch; }
.insert li { padding: 14px 18px; padding-inline-start: 22px; background: #fff; border: 1px solid var(--rule); border-inline-start: 4px solid var(--beak); }
.insert h3 { font-size: 19px; }
.log { margin: 0; max-width: 70ch; }
.log div { display: grid; grid-template-columns: 12em minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px dashed var(--rule); }
.log dt { font-weight: 600; color: var(--spruce); }
.log dd { margin: 0; color: var(--ink-soft); }

/* blocks table */
.table-wrap { overflow-x: auto; margin: 24px 0 14px; border-top: 2px solid var(--spruce); border-bottom: 2px solid var(--spruce); }
table.blocks { width: 100%; min-width: 620px; font-size: 15.5px; }
.blocks th, .blocks td { text-align: start; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.blocks tbody tr:last-child > * { border-bottom: 0; }
.blocks thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 600; }
.blocks tbody th { font: 700 17px var(--serif); color: var(--spruce); white-space: nowrap; }
.blocks tbody th::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-inline-end: 10px; vertical-align: -1px; background: var(--sw, #999); border: 1px solid rgba(0, 0, 0, .25); }
.b-glass { --sw: #a9dcef; } .b-wood { --sw: #c98a4b; } .b-stone { --sw: #9aa0a6; } .b-steel { --sw: #5e6b78; }
.b-rock { --sw: #6d5a4b; } .b-tnt { --sw: var(--scarf); } .b-frozen { --sw: #e3f4ff; }
.blocks .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td .bar { display: block; height: 6px; width: 160px; max-width: 100%; background: var(--rule); margin: 7px 0 8px; }
td .bar::after { content: ''; display: block; height: 100%; width: var(--w); background: var(--spruce-soft); }

/* worlds */
.lands { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; }
.lands li { display: grid; grid-template-columns: 180px minmax(0, 1fr) 90px; gap: 22px; align-items: center; padding: 16px 0; border-top: 1px solid var(--rule); counter-increment: land; }
.lands li:last-child { border-bottom: 1px solid var(--rule); }
.land { width: 180px; height: 120px; object-fit: cover; border: 1px solid var(--rule); }
.lands h3 { margin-bottom: 4px; }
.lands h3::before { content: counter(land) '. '; color: var(--moss); }
.lands p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.lands .boss { margin-top: 4px; color: var(--ink); }
.lands .boss span { font-weight: 600; color: var(--scarf); }
.gang { max-height: 84px; width: auto; justify-self: center; }

/* score and install */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.rules { margin: 0; display: grid; gap: 16px; }
.rules dt { font: 700 18px var(--serif); color: var(--spruce); }
.rules dd { margin: 2px 0 0; color: var(--ink-soft); }
.screen { margin: 0; border: 1px solid var(--rule); padding: 8px; background: #fff; }
.steps { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
.steps li::before { content: counter(step); width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--spruce); color: var(--spruce); font: 700 16px var(--serif); border-radius: 50%; }
.warn { background: #fff7e2; border-inline-start: 4px solid var(--beak); padding: 12px 16px; font-size: 15.5px; }

/* questions */
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; margin-top: 24px; }
.answers h3 { font-size: 19px; margin-bottom: 6px; }
.answers p { color: var(--ink-soft); margin: 0; }

/* footer and plain text pages */
.foot { background: var(--spruce); color: var(--on-spruce); margin-top: 40px; }
.foot-in { width: var(--wrap); margin: 0 auto; padding: 28px 0; font-size: 15px; }
.foot p { margin: 0 0 6px; }
.foot a { color: #fff; }
.foot a:hover { color: var(--beak); }
main.text { width: min(780px, 100% - 32px); margin: 0 auto; padding: 48px 0 24px; overflow-wrap: anywhere; }
main.text h2 { font-size: 24px; margin-top: 1.4em; }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 1060px) {
  .book { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { position: static; padding-top: 18px; }
  .toc ul { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
  .toc a, .toc a:hover { padding: 6px 12px; border: 1px solid var(--rule); background: #fff; box-shadow: none; font-size: 14.5px; }
  .species-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  body { font-size: 16px; }
  main > section { padding: 40px 0; }
  .title, .pair, .answers { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lands li { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
  .land { width: 110px; height: 74px; }
  .gang { display: none; }
  .log div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 560px) {
  .mark span { display: none; }
  .species { grid-template-columns: 96px minmax(0, 1fr); }
  .plate { padding: 10px; }
  .plate img { max-height: 80px; }
  .marks { padding: 14px; }
  .marks dl div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .act { width: 100%; }
  .title .species .plate { aspect-ratio: 2 / 1; }
  .title .plate img { max-height: 130px; }
  .lead { font-size: 17px; }
}

/* scripts without a real italic: no slanted fake */
:is(:lang(ar), :lang(he), :lang(ur), :lang(fa), :lang(hi), :lang(mr), :lang(bn), :lang(gu), :lang(pa), :lang(ta), :lang(te), :lang(kn), :lang(ml), :lang(th), :lang(ja), :lang(ko), :lang(zh)) :is(.kind, .insert .date) { font-style: normal; }
:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }