@charset "UTF-8";
/* compiled from site/scss/site.scss: edit the SCSS, run `npm run build:css`, commit both */
:root {
  color-scheme: light;
  --bg: #FAF8F6;
  --panel: #FDFCFB;
  --ink: #1a1a1a;
  --dim: #595959;
  --line: #DDD4C4;
  --accent: #176F40;
  --accent-soft: #E6F4EC;
  --ok: #176F40;
  --okbg: #E6F4EC;
  --warn: #B02A1E;
  --warnbg: #FDECEB;
  --rulebg: #F5F2ED;
  --grid: #EDE8E0;
  --curve: #176F40;
  --mid: #B02A1E;
  --gold: #8A5A00;
  --goldbg: #FBF3DF;
  --display: "Fraunces", Georgia, serif;
  --ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --bg: #0F0F0F;
    --panel: #1a1a1a;
    --ink: #F5F5F5;
    --dim: #B4BCC9;
    --line: #334155;
    --accent: #4FCA85;
    --accent-soft: #14312A;
    --ok: #4FCA85;
    --okbg: #14312A;
    --warn: #FF8A7D;
    --warnbg: #3A1F1C;
    --rulebg: #1C2635;
    --grid: #2A2D36;
    --curve: #4FCA85;
    --mid: #FF8A7D;
    --gold: #E9BD62;
    --goldbg: #33290F;
  }
}
[data-theme=dark] {
  color-scheme: dark;
  --bg: #0F0F0F;
  --panel: #1a1a1a;
  --ink: #F5F5F5;
  --dim: #B4BCC9;
  --line: #334155;
  --accent: #4FCA85;
  --accent-soft: #14312A;
  --ok: #4FCA85;
  --okbg: #14312A;
  --warn: #FF8A7D;
  --warnbg: #3A1F1C;
  --rulebg: #1C2635;
  --grid: #2A2D36;
  --curve: #4FCA85;
  --mid: #FF8A7D;
  --gold: #E9BD62;
  --goldbg: #33290F;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fraunces.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono.woff2") format("woff2");
}
:root * {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.62 Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
}

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  padding: 9px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font: 500 13px/1.3 var(--ui);
}

.bar .t {
  font-weight: 700;
}

.bar .prog {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.bar .sp {
  flex: 1;
}

.bar button {
  font: inherit;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.bar button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.bar button.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

:root[data-theme=dark] .bar button.on {
  color: #10131a;
}

.lay {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 16px 120px;
}

@media (min-width: 1040px) {
  .lay {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 34px;
  }
}
.toc {
  font: 500 13.5px/1.35 var(--ui);
  padding-top: 22px;
}

@media (min-width: 1040px) {
  .toc {
    position: sticky;
    top: 52px;
    align-self: start;
    max-height: calc(100vh - 60px);
    overflow: auto;
    padding-bottom: 30px;
  }
}
.toc h5 {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
}

.toc a {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 5px 8px;
  border-radius: 7px;
  color: var(--ink);
  text-decoration: none;
  border-left: 2px solid transparent;
}

.toc a:hover {
  background: var(--rulebg);
}

.toc a.cur {
  border-left-color: var(--accent);
  background: var(--rulebg);
}

.toc a .n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
  min-width: 26px;
}

.toc a.ok .n {
  color: var(--ok);
}

.toc a.ok .n::after {
  content: " ✓";
}

.toc .grp {
  margin: 16px 0 6px;
}

main {
  min-width: 0;
  padding-top: 26px;
}

h1 {
  font-size: 33px;
  line-height: 1.15;
  margin: 0 0 6px;
}

.sub1 {
  color: var(--dim);
  margin: 0 0 20px;
  font-size: 16px;
}

.urgent {
  background: var(--warnbg);
  border-left: 4px solid var(--warn);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin: 0 0 22px;
  font-size: 16px;
}

.urgent b {
  color: var(--warn);
}

.how {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 0 26px;
  font-size: 15.5px;
}

.how b {
  color: var(--accent);
}

.sec {
  margin: 0 0 54px;
  padding-top: 6px;
}

h2 {
  font-size: 26px;
  line-height: 1.2;
  margin: 40px 0 10px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

h2 .num {
  font: 700 15px var(--mono);
  color: var(--accent);
  background: var(--rulebg);
  padding: 3px 8px;
  border-radius: 6px;
}

h2 .done {
  margin-left: auto;
  font: 500 12.5px var(--ui);
  color: var(--dim);
  display: inline-flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
}

h2 .done input {
  accent-color: var(--ok);
  width: 16px;
  height: 16px;
}

.src {
  font: 13px var(--ui);
  color: var(--dim);
  margin: -2px 0 12px;
}

.big {
  background: var(--rulebg);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 12px 0 16px;
  font-size: 17.5px;
}

.big > b:first-child {
  display: block;
  font: 700 11.5px var(--ui);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

h3.sub {
  font: 700 13px var(--ui);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 30px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

h3.sub::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

h3.sub .cnt {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  order: 2;
  white-space: nowrap;
}

.pre {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 10px 16px;
  margin: 0 0 14px;
  background: var(--panel);
}

.pre summary {
  cursor: pointer;
  font: 600 14px var(--ui);
  color: var(--gold);
}

.prq {
  margin: 14px 0 18px;
  font-size: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.prq:first-of-type {
  border-top: 0;
  padding-top: 4px;
}

.prq > b:first-child {
  display: block;
  font: 700 14px var(--ui);
  color: var(--gold);
  margin-bottom: 5px;
}

.prq p {
  margin: 6px 0;
}

.prq ol {
  margin: 8px 0;
  padding-left: 24px;
}

.prq ol li {
  margin: 9px 0;
  padding-left: 3px;
}

.prq .sk {
  background: var(--goldbg);
  border-radius: 7px;
  padding: 8px 12px;
  margin: 8px 0;
}

.prq .try {
  color: var(--dim);
  font-size: 15px;
}

.prq .fig {
  max-width: 460px;
}

.vocab {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin: 0;
}

.v {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 13px;
  cursor: default;
}

.v .vis {
  display: block;
  margin: -2px -4px 6px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 4px;
}

.v .vis svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
}

.v .vis {
  cursor: zoom-in;
}

.zoom {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 12, 16, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.zoom .zc {
  background: var(--panel);
  color: var(--ink);
  border-radius: 14px;
  max-width: 760px;
  width: 100%;
  max-height: 92vh;
  overflow: auto;
  padding: 18px 22px;
  border: 1px solid var(--line);
}

.zoom .zc svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 56vh;
}

.zoom .zt {
  font: 700 22px var(--ui);
  color: var(--accent);
  margin: 10px 0 4px;
}

.zoom .zb {
  font-size: 18px;
}

.zoom .zx {
  float: right;
  font: 600 13px var(--ui);
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.zoom .eg, .zoom .like {
  display: block;
  margin-top: 6px;
}

.zoom .like {
  color: var(--gold);
}

.zoom .eg {
  color: var(--dim);
}

.v .sayrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin: 1px 0 5px;
}

.v .say {
  font: 13px var(--ui);
  color: var(--dim);
}

.v .say i {
  color: var(--gold);
  font-style: normal;
  font-weight: 600;
}

.v .hear {
  font: 600 11.5px var(--ui);
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

.v .hear:hover {
  border-color: var(--accent);
}

.v .hear.on {
  background: var(--accent);
  color: #fff;
}

.v dt {
  font-size: 17px;
}

.v dt {
  font: 700 15px var(--ui);
  color: var(--accent);
  margin: 0 0 3px;
}

.v dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.v .eg {
  display: block;
  margin-top: 5px;
  color: var(--dim);
  font-size: 14px;
}

body.quiz .v dd, body.quiz .v .vis {
  filter: blur(7px);
  cursor: pointer;
  user-select: none;
  transition: filter 0.15s;
}

body.quiz .v.show .vis {
  filter: none;
}

body.quiz .v.show dd {
  filter: none;
}

body.quiz .v {
  cursor: pointer;
}

.th {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 15px 19px;
  margin: 0 0 12px;
}

.th h4 {
  margin: 0 0 7px;
  font-size: 18px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.th h4 span {
  font: 700 12px var(--mono);
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  position: relative;
  top: -2px;
}

:root[data-theme=dark] .th h4 span {
  color: #10131a;
}

.th p {
  margin: 7px 0;
}

.th ul, .th ol {
  margin: 7px 0;
  padding-left: 22px;
}

.th li {
  margin: 4px 0;
}

.key {
  background: var(--rulebg);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 9px 0;
  font-size: 17px;
}

.key b.k {
  display: block;
  font: 700 11px var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}

.why {
  border-left: 3px solid var(--gold);
  background: var(--goldbg);
  padding: 8px 13px;
  border-radius: 0 7px 7px 0;
  margin: 9px 0;
  font-size: 15.5px;
}

.why b {
  color: var(--gold);
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
  font-size: 15px;
}

th, td {
  border: 1px solid var(--line);
  padding: 6px 9px;
  text-align: center;
}

th {
  background: var(--rulebg);
  font: 700 13px var(--ui);
}

td:first-child, th:first-child {
  font-weight: 700;
}

table.l td, table.l th {
  text-align: left;
}

table.l td:first-child {
  white-space: nowrap;
}

.tw {
  overflow-x: auto;
  max-width: 100%;
}

.ex {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: var(--panel);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 0 0 14px;
}

.exh {
  font: 700 12px var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.exh span {
  margin-left: 9px;
  color: var(--dim);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

.ex .q {
  font-size: 17.5px;
  margin: 6px 0 8px;
  font-weight: 600;
}

ol.steps {
  margin: 6px 0;
  padding-left: 22px;
}

ol.steps > li {
  margin: 7px 0;
  padding-left: 2px;
}

ol.steps .s {
  display: block;
}

ol.steps .r {
  display: inline-block;
  margin-top: 2px;
  font: 500 12.5px var(--ui);
  color: var(--gold);
  background: var(--goldbg);
  padding: 1px 8px;
  border-radius: 5px;
}

.ans {
  background: var(--panel);
  border: 2px solid var(--ok);
  border-left-width: 7px;
  padding: 12px 16px 10px;
  border-radius: 10px;
  margin: 14px 0 0;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 0 0 4px var(--okbg);
}

.ans b.lbl {
  display: inline-block;
  background: var(--ok);
  color: var(--bg);
  padding: 3px 11px;
  border-radius: 999px;
  font: 800 11.5px var(--ui);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ans .aone {
  line-height: 1.5;
}

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

.alist li {
  padding: 6px 0 6px 18px;
  border-bottom: 1px dashed var(--line);
  position: relative;
}

.alist li:last-child {
  border-bottom: 0;
}

.alist li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--ok);
}

.chk {
  color: var(--dim);
  font-size: 14.5px;
  margin-top: 7px;
}

.chk > b:first-child {
  font: 700 11.5px var(--ui);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

ul.traps li {
  background: var(--warnbg);
  border-left: 3px solid var(--warn);
  padding: 8px 13px;
  border-radius: 0 7px 7px 0;
  margin: 0 0 7px;
  font-size: 15.5px;
}

.quick details {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 9px;
  padding: 9px 14px;
  margin: 0 0 7px;
}

.quick summary {
  cursor: pointer;
  font-weight: 600;
}

.quick .qa {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--line);
  color: var(--ink);
}

.f {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  vertical-align: middle;
  text-align: center;
  margin: 0 0.2em;
  font-size: 0.9em;
  line-height: 1.18;
  white-space: nowrap;
}

.f > b {
  border-bottom: 1.4px solid currentColor;
  padding: 0 0.32em 0.08em;
  font-weight: inherit;
}

.f > i {
  padding: 0.06em 0.32em 0;
  font-style: normal;
}

.f .f {
  font-size: 0.9em;
}

.sq {
  display: inline-block;
  position: relative;
  padding-left: 0.62em;
  white-space: nowrap;
}

.sg {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.68em;
  height: 100%;
  overflow: visible;
}

.sg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.rad {
  display: inline-block;
  border-top: 1.4px solid currentColor;
  padding: 0.07em 0.14em 0 0.08em;
  line-height: 1.18;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

code, .m {
  font-family: var(--mono);
  font-size: 0.92em;
}

.figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 10px 0;
}

.fig {
  margin: 10px 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
}

.figs .fig {
  margin: 0;
}

.fig figcaption {
  font: 13px var(--ui);
  color: var(--dim);
  text-align: center;
  margin-top: 3px;
}

svg.plot {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

svg .dom {
  stroke: var(--accent);
  stroke-width: 8;
  stroke-opacity: 0.35;
  stroke-linecap: round;
}

svg .rng {
  stroke: var(--gold);
  stroke-width: 8;
  stroke-opacity: 0.5;
  stroke-linecap: round;
}

svg .lbdom {
  font: 700 11.5px var(--ui);
  fill: var(--accent);
}

svg .lbrng {
  font: 700 11.5px var(--ui);
  fill: var(--gold);
}

.fig svg {
  max-height: 380px;
}

svg .ax {
  stroke: var(--dim);
  stroke-width: 1.3;
}

svg .grid {
  stroke: var(--grid);
  stroke-width: 1;
}

svg .asym {
  stroke: var(--mid);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
}

svg .c1 {
  stroke: var(--curve);
  stroke-width: 2.4;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

svg .c2 {
  stroke: var(--mid);
  stroke-width: 2.2;
  fill: none;
}

svg .c3 {
  stroke: var(--dim);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 4 4;
}

svg .hl {
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-dasharray: 6 4;
}

svg .tk {
  font: 11px var(--ui);
  fill: var(--dim);
}

svg .lb {
  font: 600 12px var(--ui);
  fill: var(--ink);
}

svg .lbd {
  font: 12px var(--ui);
  fill: var(--dim);
}

svg .lba {
  font: 700 12.5px var(--ui);
  fill: var(--accent);
}

svg .lbw {
  font: 700 12.5px var(--ui);
  fill: var(--mid);
}

svg .pt {
  fill: var(--mid);
}

svg .dotc {
  fill: var(--curve);
  stroke: var(--curve);
  stroke-width: 2;
}

svg .doto {
  fill: var(--panel);
  stroke: var(--curve);
  stroke-width: 2;
}

svg .arc {
  stroke: var(--gold);
  stroke-width: 2;
  fill: none;
}

svg .ah {
  fill: var(--gold);
}

svg .wd {
  fill: var(--rulebg);
  stroke: var(--line);
  stroke-width: 1;
}

svg .wdo {
  fill: var(--accent);
  fill-opacity: 0.28;
  stroke: var(--accent);
  stroke-width: 1.2;
}

svg .wdx {
  fill: var(--mid);
  fill-opacity: 0.3;
  stroke: var(--mid);
  stroke-width: 1.2;
}

svg .dim {
  stroke: var(--dim);
  stroke-width: 1.2;
  fill: none;
  stroke-dasharray: 3 3;
}

svg .vx {
  fill: var(--ink);
}

svg .lbs {
  font: 600 10.5px var(--ui);
  fill: var(--ink);
}

svg .lbsa {
  font: 700 10.5px var(--ui);
  fill: var(--accent);
}

svg .lbsw {
  font: 700 10.5px var(--ui);
  fill: var(--mid);
}

svg .lbsd {
  font: 10.5px var(--ui);
  fill: var(--dim);
}

svg .lbsg {
  font: 700 10.5px var(--ui);
  fill: var(--gold);
}

svg .sh {
  fill: var(--rulebg);
  stroke: var(--accent);
  stroke-width: 1.6;
}

svg .ln {
  stroke: var(--ink);
  stroke-width: 1.8;
  fill: none;
}

svg .lna {
  stroke: var(--accent);
  stroke-width: 2.2;
  fill: none;
}

svg .lnw {
  stroke: var(--mid);
  stroke-width: 2.2;
  fill: none;
}

.lab {
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 16px 0;
}

.lab h4 {
  margin: 0 0 3px;
  color: var(--accent);
  font-size: 19px;
}

.lab .ls {
  color: var(--dim);
  font-size: 14.5px;
  margin: 0 0 12px;
}

.ctrls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 14px;
  margin: 10px 0;
}

.ctrl label {
  display: block;
  font: 12.5px var(--mono);
  color: var(--dim);
  margin-bottom: 2px;
}

.ctrl input[type=range] {
  width: 100%;
  accent-color: var(--accent);
}

.ctrl select {
  width: 100%;
  font: 14px var(--ui);
  padding: 6px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}

.ro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}

.ro div {
  background: var(--rulebg);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.ro span {
  display: block;
  font: 11px var(--ui);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ro b {
  font: 700 16px var(--mono);
  color: var(--accent);
}

canvas.cv {
  display: block;
  width: 100%;
  height: 280px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
}

.eqn {
  font: 600 19px var(--mono);
  text-align: center;
  margin: 8px 0;
  color: var(--ink);
}

.ucw {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

@media (max-width: 700px) {
  .ucw {
    grid-template-columns: 1fr;
  }
}
#uc circle.a {
  fill: var(--panel);
  stroke: var(--accent);
  stroke-width: 2;
  cursor: pointer;
}

#uc circle.a:hover, #uc circle.a.on {
  fill: var(--accent);
}

.gl input {
  width: 100%;
  font: 15px var(--ui);
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  margin: 0 0 12px;
}

.gl dl {
  margin: 0;
  columns: 2 320px;
  column-gap: 26px;
}

.gl .g {
  break-inside: avoid;
  margin: 0 0 9px;
  font-size: 15px;
}

.gl dt {
  display: inline;
  font: 700 14.5px var(--ui);
  color: var(--accent);
}

.gl dd {
  display: inline;
  margin: 0;
}

.gl dd a {
  font: 12px var(--mono);
  color: var(--dim);
  text-decoration: none;
  margin-left: 5px;
}

.fs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.fs .key {
  margin: 0;
}

.nlrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.nlrow > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  text-align: center;
  font-size: 15px;
}

.nlrow code {
  font-size: 15px;
}

@media (max-width: 1039px) {
  .toc {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 14px;
    background: var(--panel);
  }
}
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
  h1 {
    font-size: 27px;
  }
  h2 {
    font-size: 22px;
  }
  .lay {
    padding: 0 12px 100px;
  }
  .th, .ex {
    padding: 12px 14px;
  }
}
@media print {
  .bar, .toc, .lab {
    display: none !important;
  }
  .lay {
    display: block;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  .quick details {
    break-inside: avoid;
  }
  .ex, .th, .v {
    break-inside: avoid;
  }
}
.lesson {
  padding: 18px 20px;
}

.lesson h4 {
  font-size: 20px;
  margin-bottom: 12px;
}

.lg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  gap: 18px;
  align-items: start;
}

.lg.nofig {
  grid-template-columns: minmax(0, 1fr);
}

.lg .fig {
  margin: 0;
}

@media (max-width: 820px) {
  .lg {
    grid-template-columns: minmax(0, 1fr);
  }
  .eli .lg {
    grid-template-columns: minmax(0, 1fr);
  }
}
.plain {
  font-size: 17.5px;
}

.plain p {
  margin: 0 0 9px;
}

.tagl {
  display: block;
  font: 700 11px var(--ui);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 5px;
}

.how2 {
  margin: 12px 0 4px;
}

.how2 ol {
  margin: 4px 0;
  padding-left: 24px;
}

.how2 li {
  margin: 5px 0;
}

.trap1 {
  background: var(--warnbg);
  border-left: 3px solid var(--warn);
  padding: 8px 13px;
  border-radius: 0 7px 7px 0;
  margin: 12px 0 0;
  font-size: 15.5px;
}

.trap1 b {
  color: var(--warn);
}

.lesson .ex {
  margin: 12px 0 0;
  border-left-color: var(--ok);
}

.lesson .exh {
  color: var(--ok);
}

.exh .tag {
  float: right;
  font: 500 11.5px var(--ui);
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}

ol.steps.s2 .r {
  display: block;
  background: none;
  border-left: 2px solid var(--gold);
  border-radius: 0;
  padding: 0 0 0 9px;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.4;
}

.v .like {
  display: block;
  margin-top: 5px;
  color: var(--gold);
  font-size: 14.5px;
}

.tagl.e5 {
  color: var(--gold);
}

.lesson.keystone {
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px var(--goldbg);
}

.ks {
  font: 800 11px var(--ui);
  font-style: normal;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--bg);
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 10px;
  white-space: nowrap;
}

.ways {
  margin: 12px 0;
}

.wgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.way {
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 9px;
  padding: 10px 13px;
  background: var(--bg);
  font-size: 15.5px;
}

.way p {
  margin: 5px 0;
}

.wl {
  display: inline-block;
  font: 700 11.5px var(--ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 3px;
}

.parts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 12px 0;
}

.part {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 12px 15px;
  background: var(--bg);
}

.part h5 {
  margin: 0 0 6px;
  font-size: 17px;
  display: flex;
  gap: 9px;
  align-items: baseline;
}

.part h5 span {
  font: 700 12px var(--mono);
  color: var(--accent);
}

.facts {
  margin: 6px 0;
  padding-left: 20px;
  font-size: 15.5px;
}

.ladder {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px dashed var(--accent);
  border-radius: 10px;
}

.ladder .ex {
  margin-top: 10px;
}

.pi details summary {
  cursor: pointer;
  list-style: none;
  padding: 2px 4px;
  border-radius: 6px;
}

.pi details summary::-webkit-details-marker {
  display: none;
}

.pi details summary:hover {
  background: var(--rulebg);
}

.pmore {
  display: inline-block;
  margin-left: 8px;
  font: 700 10.5px var(--ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0 7px;
  vertical-align: 1px;
}

.pi details[open] .pmore {
  background: var(--accent);
  color: var(--bg);
}

.pib {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: var(--bg);
  border-radius: 0 8px 8px 0;
}

.pib .ex {
  margin: 10px 0;
}

.phint {
  font: 13px var(--ui);
  color: var(--dim);
  margin: 6px 0 0;
}

.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.rule2 {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 15px;
  background: var(--panel);
}

.rule2 h4 {
  margin: 0 0 6px;
  font-size: 17px;
  display: flex;
  gap: 9px;
}

.rule2 h4 span {
  font: 700 12px var(--mono);
  color: var(--accent);
}

.bg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0;
}

.bg > div {
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 15px;
}

.bg b {
  display: block;
  font: 700 11px var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.bad {
  background: var(--warnbg);
}

.bad b {
  color: var(--warn);
}

.good {
  background: var(--okbg);
}

.good b {
  color: var(--ok);
}

.paper {
  border: 1px solid var(--line);
  border-left: 4px solid var(--mid);
  border-radius: 8px;
  background: var(--panel);
  padding: 4px 14px 8px;
  margin: 8px 0;
}

.phead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 36%);
  gap: 14px;
  font: 700 11px var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.pl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 36%);
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
}

.pw {
  font-size: 18px;
}

.pn {
  font: 13.5px/1.4 var(--ui);
  color: var(--gold);
}

.pts {
  font-size: 15px;
  margin: 8px 0 0;
}

@media (max-width: 700px) {
  .pl, .phead {
    grid-template-columns: 1fr;
  }
  .bg {
    grid-template-columns: 1fr;
  }
}
.tkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.tk {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--panel);
}

.tk h4 {
  margin: 0 0 4px;
  font-size: 18px;
  display: flex;
  gap: 9px;
  align-items: baseline;
}

.tk h4 span {
  font: 700 12px var(--mono);
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tkf {
  font: 600 22px var(--mono);
  text-align: center;
  margin: 4px 0;
}

.tke {
  font-size: 15.5px;
}

.tk table {
  font-size: 14px;
}

.symt td.sym {
  font: 700 20px var(--mono);
  text-align: center;
  white-space: nowrap;
}

.big p {
  margin: 0 0 7px;
}

.big p:last-child {
  margin: 0;
}

details.try {
  margin: 7px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  background: var(--bg);
  font-size: 15px;
}

details.try summary {
  cursor: pointer;
}

details.try .qa {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}

.prq .why {
  margin: 8px 0;
}

.prq .fig {
  max-width: 340px;
}

.prq .fig svg {
  max-height: 200px;
}

.bar {
  gap: 6px 8px;
}

.bar .seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.bar .seg button {
  border: 0;
  border-radius: 0;
}

.bar .seg button + button {
  border-left: 1px solid var(--line);
}

.srch {
  position: relative;
}

.srch input {
  font: 14px var(--ui);
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  width: 210px;
}

.qres {
  position: absolute;
  top: 36px;
  left: 0;
  width: min(560px, 92vw);
  max-height: 70vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  z-index: 80;
}

.qres a {
  display: block;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font: 14px/1.35 var(--ui);
}

.qres a.on, .qres a:hover {
  background: var(--rulebg);
}

.qres .k {
  font: 700 10.5px var(--ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 6px;
}

.qres .s {
  display: block;
  color: var(--dim);
  font-size: 12px;
}

.ovl {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(10, 12, 16, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.ovl[hidden] {
  display: none;
}

.ovc {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  max-width: 820px;
  width: 100%;
  max-height: 92vh;
  overflow: auto;
  padding: 18px 22px;
}

.ovc h3 {
  margin: 4px 0 12px;
}

.fch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font: 500 13px var(--ui);
}

.fch b {
  font-size: 16px;
  margin-right: 6px;
}

.fch select, .fch button, .fcf button, .fdIn button, .player button, .player select, #rateSel {
  font: 500 13px var(--ui);
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.fch .sp {
  flex: 1;
}

.pri {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border-color: var(--accent) !important;
}

.fcProg, .qzProg {
  font: 13px var(--ui);
  color: var(--dim);
  margin: 10px 0;
}

.fcCard {
  min-height: 230px;
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 18px 20px;
  background: var(--bg);
  font-size: 19px;
  cursor: pointer;
}

.fcFront .fcT {
  font: 700 30px var(--ui);
  color: var(--accent);
  text-align: center;
  margin: 28px 0 8px;
}

.fcFront .fcS {
  text-align: center;
  color: var(--dim);
  font: 14px var(--ui);
}

.fcBack {
  border-top: 1px dashed var(--line);
  margin-top: 14px;
  padding-top: 12px;
}

.fcBack svg {
  max-height: 220px;
}

.fcf {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 14px 0 6px;
}

.fcHelp {
  font: 13px var(--ui);
  color: var(--dim);
  text-align: center;
  margin: 4px 0 0;
}

.qzQ {
  font-size: 20px;
  font-weight: 600;
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--bg);
}

.qzHints {
  margin: 10px 0;
  padding-left: 26px;
}

.qzHints li {
  margin: 8px 0;
  background: var(--goldbg);
  border-radius: 8px;
  padding: 6px 10px;
}

.qzA {
  border: 2px solid var(--ok);
  border-radius: 12px;
  padding: 12px 16px;
  background: var(--okbg);
  font-size: 18px;
}

.gtip {
  position: absolute;
  z-index: 90;
  max-width: 340px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 9px 12px;
  font: 14px/1.45 var(--ui);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.gtip b {
  display: block;
  color: var(--accent);
  margin-bottom: 3px;
}

.gtip i {
  display: block;
  color: var(--dim);
  font-size: 12px;
  margin-top: 5px;
  font-style: normal;
}

a.gt {
  color: inherit;
  text-decoration: underline dotted var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: help;
}

a.gt:hover {
  background: var(--rulebg);
}

.nav3 {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 70;
  display: flex;
  gap: 6px;
}

.nav3 button {
  font: 600 13px var(--ui);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

#nBack.pulse {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  animation: pz 1s ease-in-out 3;
}

@keyframes pz {
  50% {
    transform: scale(1.08);
  }
}
.flash {
  animation: fl 1.6s ease-out 1;
}

@keyframes fl {
  0% {
    box-shadow: 0 0 0 4px var(--gold);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
.player {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: 75;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
  font: 13px var(--ui);
  max-width: 94vw;
}

.player[hidden] {
  display: none;
}

.plab {
  color: var(--dim);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speaking {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 8px;
}

.listen, .hearm, .pvoc, .formalbtn {
  font: 600 11.5px var(--ui);
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  margin-left: 8px;
  vertical-align: 2px;
}

.listen:hover, .hearm:hover, .pvoc:hover {
  border-color: var(--accent);
}

.pvoc {
  font-size: 12.5px;
  padding: 4px 12px;
  margin: 0 0 10px;
}

.pctl {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}

.pctl button {
  font: 600 12.5px var(--ui);
  padding: 5px 11px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

.pctl .pcount {
  font: 12px var(--ui);
  color: var(--dim);
  align-self: center;
}

body.practice .pctl {
  display: flex;
}

body.practice .ex ol.steps > li:not(.shown), body.practice .ex .ans:not(.shown), body.practice .ex .chk:not(.shown) {
  display: none;
}

body.simple .lesson .key, body.simple .lesson > table, body.simple .lesson .how2 {
  display: none;
}

body.simple .lesson.formal .key, body.simple .lesson.formal > table, body.simple .lesson.formal .how2 {
  display: block;
}

body.simple .lesson.formal > table {
  display: table;
}

body.simple .tagl.e5 {
  font-size: 13px;
}

body.simple .lesson .plain {
  font-size: 19px;
}

.formalbtn {
  display: none;
}

body.simple .formalbtn {
  display: inline-block;
}

body.focus main > *:not(section.fcur) {
  display: none;
}

.fdIn {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  margin: 8px 0;
}

.fdIn label {
  font: 12.5px var(--mono);
  color: var(--dim);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fdIn input {
  font: 600 18px var(--mono);
  width: 110px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
}

.fdAsk {
  text-align: center;
  font-size: 16px;
  color: var(--dim);
  margin: 0 0 6px;
}

.fdMsg {
  font-size: 17px;
  font-weight: 600;
  margin: 8px 0;
  min-height: 1.4em;
}

.fdMsg.ok {
  color: var(--ok);
}

.fdMsg.no {
  color: var(--warn);
}

.fdHints {
  padding-left: 24px;
}

.fdHints li {
  margin: 6px 0;
  background: var(--goldbg);
  border-radius: 8px;
  padding: 6px 10px;
}

.hlp td {
  vertical-align: top;
}

.hlp td:first-child {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
  }
  .bar .t {
    display: none;
  }
  .srch input {
    width: 150px;
  }
  .nav3 {
    bottom: 10px;
    right: 8px;
  }
  .nav3 button {
    padding: 7px 10px;
  }
}
a.gt {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 20%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: help;
  background: none;
}

a.gt:hover {
  text-decoration-color: var(--accent);
  background: var(--rulebg);
}

a.gt.new {
  font-weight: 650;
  text-decoration: none;
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--gold) 30%, transparent) 58%);
  border-radius: 2px;
  padding: 0 1px;
}

a.gt.new::after {
  content: "new";
  font: 700 8.5px var(--ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
  vertical-align: super;
  margin-left: 2px;
}

.ccchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 10px 0 2px;
  font: 12.5px var(--ui);
  color: var(--dim);
}

.ccchips > span {
  font-weight: 600;
}

.ccchips button {
  font: 600 12.5px var(--ui);
  padding: 4px 11px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--panel);
  color: var(--accent);
  cursor: pointer;
}

.ccchips button.on, .ccchips button:hover {
  background: var(--accent);
  color: var(--bg);
}

.ccin {
  margin: 8px 0 12px;
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 4px 6px 10px;
  background: var(--bg);
}

.ccin .cc {
  border: 0;
  margin: 0;
}

.ccclose {
  display: block;
  margin: 8px auto 0;
  font: 600 13px var(--ui);
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

.cc {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 18px;
  background: var(--panel);
}

.cch {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.cch h4 {
  margin: 0;
  font-size: 20px;
}

.cck {
  font: 800 10.5px var(--ui);
  font-style: normal;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--bg);
  background: var(--accent);
  white-space: nowrap;
}

.cck.rule {
  background: var(--warn);
}

.cck.strategy {
  background: var(--ok);
}

.ccidx {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 16px;
}

.ccidx a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font: 600 13.5px var(--ui);
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  background: var(--panel);
}

.ccidx a:hover {
  border-color: var(--accent);
}

.cct {
  margin: 10px 0;
  font-size: 15px;
}

.cc .key ul {
  margin: 4px 0 0;
  padding-left: 20px;
}

.cc .key li {
  margin: 4px 0;
}

.dev1 {
  margin: 10px 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--goldbg);
  border: 1px solid var(--gold);
  font-size: 16px;
}

.forms {
  margin: 12px 0;
}

.fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.fm {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 11px;
  background: var(--bg);
  font-size: 15px;
}

.fm p {
  margin: 3px 0;
}

.fm ul {
  margin: 3px 0;
  padding-left: 18px;
}

.fml {
  display: block;
  font: 800 10.5px var(--ui);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}

.fm .fig {
  margin: 4px 0 0;
}

.remind {
  margin: 10px 0;
  padding: 9px 13px;
  border-left: 4px solid var(--accent);
  background: var(--rulebg);
  border-radius: 0 9px 9px 0;
  font-size: 15.5px;
}

.remind ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.counter {
  margin: 12px 0;
  padding: 10px 13px;
  border: 1px solid var(--warn);
  border-radius: 10px;
  background: var(--warnbg);
}

.counter > b.tagl {
  color: var(--warn);
}

.cx {
  padding: 7px 0;
  border-top: 1px dashed color-mix(in srgb, var(--warn) 40%, transparent);
  font-size: 15.5px;
}

.cx:first-of-type {
  border-top: 0;
}

.cxw b {
  color: var(--warn);
}

.cxy {
  color: var(--dim);
  margin: 2px 0 2px 16px;
}

.cxr b {
  color: var(--ok);
}

.tips {
  margin: 12px 0;
  padding: 10px 13px;
  border: 1px solid var(--ok);
  border-radius: 10px;
  background: var(--okbg);
}

.tips > b.tagl {
  color: var(--ok);
}

.tips ul {
  margin: 4px 0 0;
  padding-left: 20px;
}

.tips li {
  margin: 4px 0;
}

.strat {
  margin: 12px 0;
  padding: 12px 14px;
  border: 2px solid var(--ok);
  border-radius: 12px;
  background: var(--panel);
}

.strat h5 {
  margin: 2px 0 8px;
  font-size: 17px;
}

.tagl.st {
  color: var(--ok);
}

.strat ol {
  margin: 6px 0 0;
  padding-left: 22px;
}

.strat li {
  margin: 4px 0;
}

.flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 6px 0;
}

.fq {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  background: var(--bg);
}

.fn {
  grid-row: span 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ok);
  color: var(--bg);
  font: 800 13px var(--ui);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fqa {
  grid-column: 2/4;
  font-weight: 650;
}

.fy, .fno {
  font-size: 14.5px;
  border-radius: 7px;
  padding: 5px 9px;
}

.fy {
  background: var(--okbg);
}

.fno {
  background: var(--rulebg);
}

.fy b, .fno b {
  display: block;
  font: 800 10.5px var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fy b {
  color: var(--ok);
}

.fno b {
  color: var(--dim);
}

.fdown {
  text-align: center;
  color: var(--ok);
  font-size: 18px;
  line-height: 1.2;
}

@media (max-width: 640px) {
  .fq {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .fqa, .fy, .fno {
    grid-column: 2;
  }
}
.asks, .plan1 {
  margin: 8px 0;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 15.5px;
}

.asks {
  background: var(--rulebg);
}

.asks b {
  color: var(--accent);
}

.plan1 {
  background: var(--okbg);
}

.plan1 b {
  color: var(--ok);
}

.hints {
  margin: 8px 0;
}

.hintb, .tryb {
  font: 600 12.5px var(--ui);
  padding: 4px 11px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
}

.hints ol {
  margin: 6px 0 0;
  padding-left: 24px;
}

.hints li {
  margin: 5px 0;
  background: var(--goldbg);
  border-radius: 8px;
  padding: 5px 10px;
}

.exh .tryb {
  float: right;
  margin-left: 8px;
  text-transform: none;
  letter-spacing: 0;
}

.ex.try .pctl {
  display: flex;
}

.ex.try ol.steps > li:not(.shown), .ex.try .ans:not(.shown), .ex.try .chk:not(.shown) {
  display: none;
}

.exfig {
  margin: 8px 0 10px;
}

.exfig .fig {
  max-width: 390px;
}

.mq {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 15px;
  margin: 0 0 12px;
  background: var(--panel);
}

.mq.gap {
  border-left: 5px solid var(--warn);
}

.mqh b {
  font-size: 17px;
}

.mqc {
  display: inline-block;
  font: 700 11px var(--ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 1px 8px;
  margin-right: 8px;
  vertical-align: 2px;
}

.mqa {
  margin: 6px 0;
  font-size: 16px;
}

.mqsee {
  font: 13.5px var(--ui);
  color: var(--dim);
}

.mqlink {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--accent);
  text-decoration: none;
}

.mqlink:hover {
  border-color: var(--accent);
}

.gapg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.gapg .mq {
  margin: 0;
}

.casesw {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  margin: 10px 0;
}

.cases {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  border-left: 3px solid var(--ink);
  border-radius: 10px 0 0 10px;
  padding: 4px 0 4px 12px;
}

svg .ftc {
  fill: var(--panel);
  stroke: var(--line);
  stroke-width: 1.2;
}

svg .fte {
  fill: color-mix(in srgb, var(--accent) 16%, var(--panel));
  stroke: var(--accent);
  stroke-width: 2;
}

svg .fts {
  fill: color-mix(in srgb, var(--gold) 20%, var(--panel));
  stroke: var(--gold);
  stroke-width: 2;
}

svg .fta {
  stroke: var(--accent);
  stroke-width: 2.2;
}

svg .ftah {
  fill: var(--accent);
}

svg .ftw {
  stroke: var(--gold);
  stroke-width: 2.2;
}

svg .ftwh {
  fill: var(--gold);
}

svg .ftdot {
  fill: var(--accent);
}

svg .ftdotw {
  fill: var(--gold);
}

svg .mir {
  stroke: var(--dim);
  stroke-dasharray: 4 4;
  stroke-width: 1.2;
}

svg .nlseg {
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
}

svg .nlhead {
  fill: var(--accent);
}

svg .nlc {
  fill: var(--accent);
  stroke: var(--accent);
  stroke-width: 2;
}

svg .nlo {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 2.5;
}

svg .nst0 {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
}

svg .nst1, svg .nst2, svg .nst3, svg .nst4 {
  fill: color-mix(in srgb, var(--accent) 7%, transparent);
  stroke: var(--accent);
  stroke-width: 1.3;
}

svg .nsti {
  fill: color-mix(in srgb, var(--gold) 12%, transparent);
  stroke: var(--gold);
  stroke-width: 1.3;
}

.notev {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  font: 600 16px/1.45 var(--ui);
  text-align: center;
}

.notev .nl1 {
  padding: 4px 6px;
  border-bottom: 1px dashed var(--line);
}

.notev .nl1:last-child {
  border-bottom: 0;
}

main .lesson table, main .part table, main .cc table, main .prq table, main .notev table, main .mq table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.fig {
  max-width: 100%;
  overflow: hidden;
}

.figs {
  max-width: 100%;
}

.th > h4, .part h5, .tk h4, .rule2 h4, .cch, .exh, .mqh, main section.sec > h2 {
  flex-wrap: wrap;
  min-width: 0;
  overflow-wrap: anywhere;
}

.listen, .tryb {
  white-space: nowrap;
  max-width: 100%;
}

.fb {
  display: inline-block;
  font: 800 10.5px var(--ui);
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--warn);
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 10px;
  vertical-align: 3px;
  white-space: nowrap;
}

.th.focus, .cc.focus {
  border: 2px solid var(--warn);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 14%, transparent);
}

.focusban {
  margin: 6px 0 12px;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--warnbg);
  border: 1px solid var(--warn);
  color: var(--warn);
  font: 700 14.5px var(--ui);
}

.prbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 8px 0 12px;
  font: 13px var(--ui);
}

.prbar button {
  font: 600 12.5px var(--ui);
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

.prsum {
  color: var(--dim);
  font-weight: 600;
}

.prgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 12px;
}

.pr1 {
  border: 1px solid var(--line);
  border-left: 5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--panel);
}

.pr1.prk {
  border-left-color: var(--ok);
}

.pr1.prr {
  border-left-color: var(--warn);
}

.prh {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.prh b {
  font-size: 17px;
}

.prrate button {
  font: 600 11.5px var(--ui);
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  margin-left: 4px;
}

.pr1.prk [data-r=k] {
  background: var(--ok);
  color: var(--bg);
  border-color: var(--ok);
}

.pr1.prr [data-r=r] {
  background: var(--warn);
  color: var(--bg);
  border-color: var(--warn);
}

.prrule {
  margin: 6px 0;
  font-size: 16.5px;
  font-weight: 600;
}

.pr1 .fig {
  margin: 6px 0;
}

.pr1 .fig svg {
  max-height: 210px;
}

.prex {
  font-size: 15px;
  margin: 6px 0;
}

.prex ol {
  margin: 4px 0;
  padding-left: 22px;
}

.pra {
  font-weight: 700;
  color: var(--ok);
}

.prtrap {
  font-size: 14.5px;
  background: var(--warnbg);
  border-radius: 8px;
  padding: 6px 10px;
  margin: 6px 0;
}

.prtrap b {
  color: var(--warn);
}

.prlink {
  font: 600 13px var(--ui);
}

.bclist {
  list-style: decimal;
  padding-left: 28px;
  margin: 8px 0;
}

.bc1 {
  border: 1px solid var(--line);
  border-left: 5px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 0 10px;
  background: var(--panel);
}

.bc1.prk {
  border-left-color: var(--ok);
}

.bc1.prr {
  border-left-color: var(--warn);
}

.bc1 .prh b {
  font-size: 17px;
}

.bcwhy {
  font-size: 15px;
  color: var(--dim);
  margin: 4px 0;
}

.bc1 .ccchips {
  margin-top: 6px;
}

.bc1 .ccchips button {
  background: var(--accent);
  color: var(--bg);
}

.bc1.prk [data-r=k] {
  background: var(--ok);
  color: var(--bg);
  border-color: var(--ok);
}

.bc1.prr [data-r=r] {
  background: var(--warn);
  color: var(--bg);
  border-color: var(--warn);
}

.tw {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 15px;
  margin: 0 0 12px;
  background: var(--panel);
}

.tw h4 {
  margin: 0 0 4px;
  font-size: 17px;
}

.tw .twa {
  font-size: 15px;
  color: var(--dim);
  margin: 0 0 6px;
}

.tw .twtip {
  font-size: 14.5px;
  background: var(--goldbg);
  border-radius: 8px;
  padding: 6px 10px;
  margin: 8px 0 0;
}

.pic {
  max-width: 760px;
  margin: 0 0 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  background: var(--panel);
}

.pic h3 {
  font: 700 18px/1.35 var(--ui);
  margin: 0 0 8px;
}

.pic svg.plot {
  max-width: 680px !important;
  margin: 0 auto;
}

.pic .fig {
  border: 0;
  background: none;
}

.tkfig {
  margin: 10px auto;
  max-width: 360px;
}

.tkfig.tksm {
  max-width: 300px;
}

.tkbody {
  background: #1c1e23;
  border-radius: 16px;
  padding: 10px 11px 13px;
  box-shadow: inset 0 0 0 2px #2c2f36;
}

.tkscr {
  background: #b9c3a8;
  border-radius: 6px;
  height: 34px;
  margin: 0 4px 10px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 3px 8px;
  font: 600 10px var(--ui);
  color: #3b4232;
}

.tkp {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(38px, auto);
  gap: 7px 6px;
}

.tk {
  position: relative;
  background: #3b3f47;
  color: #f4f5f7;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 13px 1px 5px;
  box-shadow: 0 2px 0 #111;
}

.tk .tkl {
  font: 700 11.5px/1 var(--ui);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.tk .tks {
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  text-align: center;
  font: 600 7.4px/1 var(--ui);
  letter-spacing: -0.02em;
  color: #9fc0ff;
  white-space: nowrap;
  overflow: hidden;
}

.tk.tkn {
  background: #6b7079;
}

.tk.tk2 {
  background: #4a74c9;
}

.tk.tke {
  background: #5a5f69;
}

.tk.thit, .tka.thit {
  background: #f0b429;
  color: #1b1b1b;
  box-shadow: 0 0 0 2px #fff;
}

.tk.thit .tks {
  color: #5b4300;
}

.tkb {
  position: absolute;
  top: -8px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  background: #d9412b;
  color: #fff;
  font: 800 10.5px/17px var(--ui);
  text-align: center;
  font-style: normal;
  padding: 0 3px;
  box-shadow: 0 0 0 2px #1c1e23;
}

.tkb + .tkb {
  right: 12px;
}

.tkb + .tkb + .tkb {
  right: 30px;
}

.tkpad {
  position: relative;
  border-radius: 50%;
  background: #2c2f36;
  margin: 2px 10px;
}

.tka {
  position: absolute;
  color: #e8eaee;
  font: 700 12px var(--ui);
  width: 26px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.tka0 {
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
}

.tka1 {
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
}

.tka2 {
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.tka3 {
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
}

.tkseq {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 2px;
  list-style: none;
  padding: 0;
  margin: 8px 0 2px;
  counter-reset: tk;
}

.tkseq li {
  counter-increment: tk;
  display: flex;
  align-items: center;
  font: 12px var(--ui);
  color: var(--dim);
}

.tkseq li::before {
  content: counter(tk);
  font: 800 10px var(--ui);
  background: #d9412b;
  color: #fff;
  border-radius: 8px;
  min-width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  margin-right: 1px;
}

.tkfig figcaption {
  font: 13.5px/1.45 var(--ui);
  color: var(--dim);
  margin-top: 6px;
}

.kpshow > summary {
  font: 600 13.5px var(--ui);
  color: var(--accent);
  cursor: pointer;
  margin: 4px 0;
}

.cc .figs {
  grid-template-columns: repeat(auto-fill, minmax(240px, 360px));
  justify-content: start;
}

.tpath {
  columns: 2 300px;
  column-gap: 26px;
  font-size: 17px;
  margin: 6px 0 4px;
}

.tpath li {
  margin: 6px 0;
  break-inside: avoid;
}

.tpath a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.tpath a:hover {
  text-decoration: underline;
}

.plan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin: 0 0 8px;
}

.pc {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  background: var(--panel);
  font-size: 15.5px;
}

.pc > b {
  display: block;
  font: 700 12px var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.pc ul {
  margin: 0;
  padding-left: 19px;
}

.pc li {
  margin: 5px 0;
}

.pc.k {
  border-top: 3px solid var(--warn);
}

.pc.k > b {
  color: var(--warn);
}

.pc.r {
  border-top: 3px solid var(--accent);
}

.pc.r > b {
  color: var(--accent);
}

.pc.s {
  border-top: 3px solid var(--ok);
}

.pc.s > b {
  color: var(--ok);
}

.pc.d {
  border-top: 3px solid var(--gold);
  background: var(--goldbg);
  grid-column: 1/-1;
}

.pc.d > b {
  color: var(--gold);
}

.pc.d li b:first-child {
  color: var(--gold);
}

.cheat {
  columns: 2 340px;
  column-gap: 22px;
}

.cs {
  break-inside: avoid;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 12px;
  background: var(--panel);
  font-size: 15px;
}

.cs h4 {
  margin: 0 0 4px;
  font-size: 16.5px;
}

.cs h4 a {
  font: 700 13px var(--mono);
  color: var(--accent);
  background: var(--rulebg);
  padding: 2px 7px;
  border-radius: 5px;
  text-decoration: none;
  margin-right: 6px;
}

.cs ul {
  margin: 2px 0 6px;
  padding-left: 19px;
}

.cs li {
  margin: 3px 0;
}

.cl {
  font: 700 11px var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 7px 0 1px;
}

.cl.k {
  color: var(--warn);
}

.cl.s {
  color: var(--ok);
}

.cl.d {
  color: var(--gold);
}

.printbtn {
  margin-left: auto;
  font: 600 13px var(--ui);
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

@media print {
  body.print-cheat main > *:not(#cheat), body.print-cheat .printbtn {
    display: none !important;
  }
  body.print-cheat .cs {
    font-size: 9.5pt;
    padding: 5px 8px;
    margin-bottom: 6px;
  }
  body.print-cheat #cheat h2 {
    font-size: 14pt;
    margin: 0 0 4px;
  }
  body.print-cheat .cheat {
    column-gap: 12px;
  }
}
.chip {
  display: inline-block;
  font: 500 12px var(--ui);
  padding: 3px 10px;
  border-radius: 999px;
  margin: 0 0 10px;
  border: 1px solid var(--line);
}

.chip.ok {
  color: var(--ok);
  border-color: var(--ok);
}

.chip.wait {
  color: var(--gold);
  border-color: var(--gold);
}

.eli {
  border: 2px solid var(--gold);
  background: var(--goldbg);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 12px 0 16px;
}

.eli > b:first-child {
  display: block;
  font: 800 13px var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.eli .lg {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 330px);
}

.eli .plain {
  font-size: 18px;
}

.eli .fig {
  background: var(--panel);
}

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

svg.plot {
  width: auto;
  max-width: min(100%, 680px) !important;
}

.plot .edge {
  stroke: var(--dim);
  stroke-width: 1.2;
}

.tint-a10 {
  fill: var(--accent);
  fill-opacity: 0.1;
  stroke: none;
}

.tint-a12 {
  fill: var(--accent);
  fill-opacity: 0.12;
  stroke: none;
}

.tint-a14-stroke {
  fill: var(--accent);
  fill-opacity: 0.14;
  stroke: var(--accent);
  stroke-width: 1.5;
}

.tint-ok12 {
  fill: var(--ok);
  fill-opacity: 0.12;
  stroke: none;
}

.tint-ok14-stroke {
  fill: var(--ok);
  fill-opacity: 0.14;
  stroke: var(--ok);
  stroke-width: 1.5;
}

.dash-dim {
  fill: none;
  stroke: var(--dim);
  stroke-dasharray: 4 3;
}

.dash-dim-12 {
  fill: none;
  stroke: var(--dim);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
}

.panel-accent {
  fill: var(--panel);
  stroke: var(--accent);
  stroke-width: 1.4;
}

.bg-warn {
  fill: var(--bg);
  stroke: var(--warn);
  stroke-width: 2;
}

.say-sm {
  font: 14px var(--ui);
  color: var(--dim);
}

.gl-count {
  font: 500 13px var(--ui);
  color: var(--dim);
}

.cv.tall {
  height: 340px;
}

.sm {
  font-size: 13px;
}

.center {
  text-align: center;
}

.tk.r1 {
  grid-row-start: 1;
}

.tk.r2 {
  grid-row-start: 2;
}

.tk.r3 {
  grid-row-start: 3;
}

.tk.r4 {
  grid-row-start: 4;
}

.tk.r5 {
  grid-row-start: 5;
}

.tk.r6 {
  grid-row-start: 6;
}

.tk.r7 {
  grid-row-start: 7;
}

.tk.r8 {
  grid-row-start: 8;
}

.tk.r9 {
  grid-row-start: 9;
}

.tk.s1 {
  grid-row-end: span 1;
}

.tk.s2 {
  grid-row-end: span 2;
}

.tk.c1 {
  grid-column-start: 1;
}

.tk.c2 {
  grid-column-start: 2;
}

.tk.c3 {
  grid-column-start: 3;
}

.tk.c4 {
  grid-column-start: 4;
}

.tk.c5 {
  grid-column-start: 5;
}

.tkpad {
  grid-row: 1/span 2;
  grid-column: 4/span 2;
}

html {
  font-family: var(--ui);
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}

a {
  color: var(--accent);
}

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

h1, h2, h3, .standard {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.15;
  margin: 0 0 14px;
  text-wrap: balance;
}

[id] {
  scroll-margin-top: 72px;
}

a, button, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  padding: 8px 12px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  z-index: 10;
}

.skip:focus {
  top: 12px;
}

.top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 5;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
}

.brand img {
  display: block;
}

.crumbs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--dim);
  min-width: 0;
}

.crumbs a {
  color: var(--dim);
  text-decoration: none;
}

.crumbs a + a::before {
  content: "/";
  margin-right: 6px;
  color: var(--line);
}

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

.theme {
  margin-left: auto;
  font: 500 13px var(--ui);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}

.theme:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.lay {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 56px;
}

.lay.with-aside {
  display: grid;
  grid-template-columns: 220px minmax(0, 72ch);
  gap: 40px;
  align-items: start;
}

main {
  min-width: 0;
}

.contents {
  position: sticky;
  top: 72px;
  font-size: 14px;
}

.contents summary {
  font-family: var(--display);
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 8px;
  list-style: none;
}

.contents summary::-webkit-details-marker {
  display: none;
}

.contents ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}

.contents li a {
  display: block;
  padding: 5px 12px;
  color: var(--dim);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
}

.contents li a:hover, .contents li a:focus-visible {
  color: var(--accent);
  border-left-color: var(--accent);
}

.lesson-page .tagl, .lesson-page .k {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--accent);
}

.standard {
  font-size: 19px;
  color: var(--dim);
  margin: 0 0 22px;
}

.partial {
  background: var(--goldbg);
  color: var(--ink);
  border-left: 3px solid var(--gold);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin: 0 0 20px;
}

.units {
  list-style: none;
  counter-reset: unit;
  margin: 0;
  padding: 0;
  max-width: 72ch;
}

.units li {
  counter-increment: unit;
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr) 120px;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: 18px;
}

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

.units li::before {
  content: counter(unit);
  font-family: var(--display);
  font-size: 20px;
  color: var(--accent);
}

.units li a {
  color: var(--ink);
  text-decoration: none;
}

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

.units .state {
  color: var(--dim);
  font-size: 15px;
}

.units .bar {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.units .bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--done, 0%);
  background: var(--accent);
}

.see {
  margin: 28px 0 0;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.see h2 {
  font-size: 18px;
  margin: 0 0 8px;
}

.see ul {
  margin: 0;
  padding-left: 20px;
}

.pn {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.pn a {
  text-decoration: none;
  color: var(--ink);
  max-width: 48%;
}

.pn a small {
  display: block;
  color: var(--dim);
  font-size: 13px;
}

.pn a[rel=next] {
  margin-left: auto;
  text-align: right;
}

.pn a:hover {
  color: var(--accent);
}

.foot {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 14px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}

.foot nav {
  display: flex;
  gap: 14px;
}

.foot a {
  color: var(--dim);
}

.foot p {
  margin: 0;
  margin-left: auto;
}

@media (max-width: 820px) {
  .top {
    padding: 10px 16px;
    gap: 12px;
  }
  .crumbs {
    display: none;
  }
  .lay {
    padding: 20px 16px 48px;
  }
  .lay.with-aside {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .contents {
    position: static;
  }
  .contents details:not([open]) summary {
    margin: 0;
  }
  .units li {
    grid-template-columns: 2em minmax(0, 1fr);
  }
  .units .bar {
    grid-column: 2;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .contents li a, .theme, .units li a {
    transition: color 0.15s ease, border-color 0.15s ease;
  }
}
.tick {
  font: 500 14px var(--ui);
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  margin: 0 0 16px;
}

.tick[aria-pressed=true] {
  color: var(--panel);
  background: var(--accent);
}

.tick[aria-pressed=true]::before {
  content: "✓ ";
}

.not-saved {
  margin-left: 10px;
  font-size: 14px;
  color: var(--warn);
}

.not-saved a {
  color: var(--warn);
}

.store-note {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--warnbg);
  border-left: 3px solid var(--warn);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
}

.explorer {
  margin: 18px 0;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.explorer figure {
  margin: 0;
}

.explorer figcaption {
  font-size: 14px;
  color: var(--dim);
  margin-top: 6px;
}

.explorer[data-error]::after {
  content: attr(data-error);
  display: block;
  font-size: 14px;
  color: var(--dim);
  margin-top: 8px;
}

.explorer-ui {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.explorer-ui label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  font-size: 14px;
  color: var(--dim);
}

.explorer-ui input[type=number], .explorer-ui select {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  max-width: 220px;
}

.explorer-ui input[type=range] {
  accent-color: var(--accent);
  max-width: 320px;
}

.explorer-ui button {
  justify-self: start;
  font: 500 14px var(--ui);
  color: var(--panel);
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}

.explorer-ui button[type=button] {
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--line);
}

.explorer-ui [role=status] {
  font-size: 15px;
  color: var(--ink);
  min-height: 1.4em;
}

.explorer-ui .eqn {
  font-family: var(--mono);
  font-size: 15px;
  margin: 0;
}

.explorer-ui .chain {
  margin: 0;
  padding-left: 22px;
}

.explorer-ui .chain li {
  margin: 4px 0;
}

.explorer-ui .cv {
  width: 100%;
  height: 300px;
  display: block;
}

.explorer-ui .plot {
  width: min(100%, 320px);
  height: auto;
  display: block;
}

.explorer-ui .plot .ax {
  stroke: var(--line);
  stroke-width: 1;
}

.explorer-ui .plot .ln {
  fill: none;
  stroke: var(--dim);
  stroke-width: 1.2;
}

.explorer-ui .plot .lnw {
  stroke: var(--accent);
  stroke-width: 2.2;
}

.explorer-ui .plot .lna {
  stroke: var(--gold);
  stroke-width: 1.8;
}

.explorer-ui .plot .hl {
  stroke: var(--mid);
  stroke-width: 1.8;
}

.explorer-ui .plot .a {
  fill: var(--panel);
  stroke: var(--dim);
  stroke-width: 1.2;
  cursor: pointer;
}

.explorer-ui .plot .a.on {
  fill: var(--accent);
  stroke: var(--accent);
}

.explorer-ui .plot .a:focus-visible {
  outline: none;
  stroke: var(--accent);
  stroke-width: 3;
}

.explorer-ui .plot .tk {
  font: 11px var(--ui);
  fill: var(--dim);
}

.write {
  margin-top: 12px;
}

.write h4 {
  margin: 0 0 6px;
  font-size: 15px;
}

.write ol {
  margin: 0 0 8px;
  padding-left: 22px;
  font-family: var(--mono);
  font-size: 15px;
}

.write .box {
  display: inline-block;
  margin: 0;
  padding: 4px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  font-family: var(--mono);
}

@media (max-width: 820px) {
  .explorer-ui .cv {
    height: 240px;
  }
}