/* spec-0177: shared styles of the static grammar section, design system «Игровой»
   (owner decision 9, 2026-10-01). Words are tiles you want to press: cards and buttons
   get a 2px edge and a solid bottom shadow, word tiles the shadow, and pressing moves
   them down. Unbounded sets the page and section headings, Manrope the text; both
   are self-hosted.
   A colour always means the same thing: blue Simple, coral Continuous, violet Perfect,
   turquoise Perfect Continuous; sun yellow marks the ending that moves, green is right,
   red is wrong. Motion explains: diagrams play when they come into view and replay on
   demand, sentences morph, endings jump. Everything is drawn at rest and every
   animation stops under prefers-reduced-motion. */

@property --a {
  syntax: "<color>";
  inherits: true;
  initial-value: #2f0dff;
}
@property --a-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #2f0dff;
}
@property --a-soft {
  syntax: "<color>";
  inherits: true;
  initial-value: #eef1ff;
}
@property --a-edge {
  syntax: "<color>";
  inherits: true;
  initial-value: #cfd5f7;
}
@property --a-deep {
  syntax: "<color>";
  inherits: true;
  initial-value: #1a0a8c;
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #f5f7ff;
  --ink: #16161d;
  --ink-2: #3b3b48;
  --muted: #6d6d7c;
  --line: #e4e7f2;
  --line-2: #d3d8ea;
  --blue: #2f0dff;
  --blue-ink: #2f0dff;
  --blue-soft: #eef1ff;
  --blue-edge: #cfd5f7;
  --blue-deep: #1a0a8c;
  --coral: #ff6a1a;
  --coral-ink: #c2410c;
  --coral-soft: #fff0e6;
  --coral-edge: #ffcaa3;
  --coral-deep: #9a3412;
  --violet: #8b3dff;
  --violet-ink: #6d28d9;
  --violet-soft: #f3ebff;
  --violet-edge: #dac5ff;
  --violet-deep: #4c1d95;
  --teal: #0ea5b7;
  --teal-ink: #0e7490;
  --teal-soft: #e0f7fa;
  --teal-edge: #a6e4ec;
  --teal-deep: #0b5563;
  --sun: #ffc21a;
  --sun-soft: #fff1c7;
  --sun-edge: #f2d375;
  --sun-deep: #b98300;
  --green: #16a34a;
  --green-ink: #166534;
  --green-soft: #e2f6e8;
  --green-edge: #b3e2c2;
  --red: #f04438;
  --red-ink: #b42318;
  --red-soft: #fdecea;
  --red-edge: #f8b9b3;
  --sky-soft: #e6f6ff;
  --sky-edge: #b9e2fb;
  --display: "Unbounded", "Manrope", system-ui, sans-serif;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --a: var(--blue);
  --a-ink: var(--blue-ink);
  --a-soft: var(--blue-soft);
  --a-edge: var(--blue-edge);
  --a-deep: var(--blue-deep);
}
[data-aspect="simple"] {
  --a: var(--blue);
  --a-ink: var(--blue-ink);
  --a-soft: var(--blue-soft);
  --a-edge: var(--blue-edge);
  --a-deep: var(--blue-deep);
}
[data-aspect="continuous"] {
  --a: var(--coral);
  --a-ink: var(--coral-ink);
  --a-soft: var(--coral-soft);
  --a-edge: var(--coral-edge);
  --a-deep: var(--coral-deep);
}
[data-aspect="perfect"] {
  --a: var(--violet);
  --a-ink: var(--violet-ink);
  --a-soft: var(--violet-soft);
  --a-edge: var(--violet-edge);
  --a-deep: var(--violet-deep);
}
[data-aspect="perfect-continuous"] {
  --a: var(--teal);
  --a-ink: var(--teal-ink);
  --a-soft: var(--teal-soft);
  --a-edge: var(--teal-edge);
  --a-deep: var(--teal-deep);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
}
[hidden] {
  display: none !important;
}
h1,
h2,
h3,
h4,
p,
ul {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}
a {
  color: var(--blue-ink);
}
:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
}
code {
  font-family: var(--mono);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 50;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
}
.skip:focus {
  top: 12px;
}

/* ---------- Pressable surfaces: one recipe for every button-like thing ---------- */
.gh-start,
.invite-mini,
.practice-check,
.tense-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 14px;
  background: var(--press, var(--blue));
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--press-deep, var(--blue-deep));
  transition:
    transform 0.12s var(--ease),
    box-shadow 0.12s var(--ease),
    background 0.2s var(--ease);
}
.gh-login,
.gh-menu summary,
.practice-reset,
.player-play,
.replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--line);
  transition:
    transform 0.12s var(--ease),
    box-shadow 0.12s var(--ease),
    border-color 0.2s var(--ease);
}
:is(.gh-start, .invite-mini, .practice-check, .tense-more, .gh-login, .gh-menu summary, .practice-reset, .player-play, .replay):hover {
  transform: translateY(-1px);
}
:is(.gh-start, .invite-mini, .practice-check, .tense-more):hover {
  box-shadow: 0 5px 0 var(--press-deep, var(--blue-deep));
}
:is(.gh-login, .gh-menu summary, .practice-reset, .player-play, .replay):hover {
  border-color: var(--blue-edge);
  box-shadow: 0 5px 0 var(--blue-edge);
}
:is(.gh-start, .invite-mini, .practice-check, .tense-more):active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--press-deep, var(--blue-deep));
}
:is(.gh-login, .gh-menu summary, .practice-reset, .player-play, .replay):active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--line);
}

/* ---------- Header: the landing header, in the tile style ---------- */
.gh {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 2px solid var(--line);
  background: rgb(255 255 255 / 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.gh-inner {
  width: min(1200px, 100%);
  margin: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px clamp(16px, 3vw, 32px);
  color: var(--ink);
}
.gh-brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}
.gh-brand img {
  width: 44px;
  height: 44px;
}
.gh-brand > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gh-brand strong {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.gh-brand small {
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0.12em;
}
.gh-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: auto;
}
.gh-nav a {
  padding: 9px 14px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s var(--ease);
}
.gh-nav a:hover {
  background: var(--panel);
}
.gh-nav a.is-section {
  background: var(--blue-soft);
  color: var(--blue-ink);
  box-shadow: 0 2px 0 var(--blue-edge);
}
.gh-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.gh-login,
.gh-start,
.gh-menu summary {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
  white-space: nowrap;
}
.gh-menu {
  display: none;
  position: relative;
}
.gh-menu summary {
  min-width: 44px;
  padding: 8px;
  list-style: none;
}
.gh-menu summary::-webkit-details-marker {
  display: none;
}
.gh-menu nav {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: grid;
  width: min(320px, calc(100vw - 32px));
  padding: 8px;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 0 var(--line);
  animation: drop-in 0.25s var(--spring);
}
.gh-menu nav a {
  padding: 13px 14px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.gh-menu nav a:hover,
.gh-menu nav a:focus-visible,
.gh-menu nav a.is-section {
  background: var(--blue-soft);
  color: var(--blue-ink);
}
@media (max-width: 860px) {
  .gh-nav {
    display: none;
  }
  .gh-menu {
    display: block;
  }
}
@media (max-width: 600px) {
  .gh-inner {
    gap: 12px;
    padding: 8px 16px;
  }
  .gh-start {
    display: none;
  }
  .gh-brand {
    gap: 10px;
  }
  .gh-brand strong {
    font-size: 19px;
  }
}

/* ---------- Layout and type ---------- */
.wrap {
  display: grid;
  gap: clamp(64px, 9vw, 112px);
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 52px) clamp(16px, 4vw, 32px) 80px;
}
.hero {
  position: relative;
  display: grid;
  gap: 20px;
}
.hero > * {
  max-width: 860px;
}
h1 {
  font-family: var(--display);
  font-size: clamp(30px, 1.4rem + 3.2vw, 56px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
h2 {
  font-family: var(--display);
  font-size: clamp(24px, 1rem + 1.9vw, 36px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
h3 {
  font-weight: 800;
}
.accent {
  color: var(--a-ink);
}
.lead {
  max-width: 62ch;
  color: var(--ink-2);
  font-size: clamp(17px, 1.6vw, 19.5px);
}
.eyebrow,
.crumbs {
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 12px;
  background: var(--sun-soft);
  box-shadow: 0 3px 0 var(--sun-edge);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.crumbs a {
  color: var(--blue-ink);
  text-decoration: none;
}
.crumbs a:hover {
  text-decoration: underline;
}
/* The four aspect colours as a legend under the hub title. */
.aspect-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.aspect-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 2px solid var(--a-edge);
  border-radius: 14px;
  background: var(--a-soft);
  box-shadow: 0 3px 0 var(--a-edge);
  color: var(--a-ink);
  font-size: 14px;
  font-weight: 800;
}
.aspect-chip::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--a);
}
.sec {
  display: grid;
  gap: 28px;
}
.sec-head {
  display: grid;
  gap: 12px;
  max-width: 72ch;
}
.sec-head p {
  color: var(--ink-2);
}

/* ---------- Word tiles ---------- */
/* Big sentences (machine, constructor, rule players) show every word as a tile,
   coloured by its job; the ending that moves is a sun chip inside its word. */
:is(.readout, .builder, .player-stage) .sent [data-k] {
  display: inline-block;
  margin: 0.08em 0;
  padding: 0.02em 0.34em 0.06em;
  border-radius: 0.36em;
  background: #f3f4f8;
  box-shadow: 0 0.09em 0 #dadde8;
  white-space: nowrap;
}
:is(.readout, .builder, .player-stage) .sent [data-k="subj"] {
  background: var(--blue-soft);
  box-shadow: 0 0.09em 0 var(--blue-edge);
}
:is(.readout, .builder, .player-stage) .sent [data-k="verb"] {
  background: var(--green-soft);
  box-shadow: 0 0.09em 0 var(--green-edge);
}
:is(.readout, .builder, .player-stage) .sent .g {
  background: var(--sun-soft);
  box-shadow: 0 0.09em 0 var(--sun-edge);
  color: var(--ink);
}
:is(.readout, .builder, .player-stage) .sent .m {
  background: var(--sky-soft);
  box-shadow: 0 0.09em 0 var(--sky-edge);
  text-decoration: none;
}
:is(.readout, .builder, .player-stage) .sent .end {
  display: inline-block;
  padding: 0 0.06em;
  border-radius: 0.2em;
  background: var(--sun);
  color: var(--ink);
}
:is(.readout, .builder, .player-stage) .sent .tail {
  display: inline-block;
}
/* Small sentences keep the text flowing: the helper takes the aspect colour, the
   ending a highlighter stroke, the time marker a wavy underline. */
.sent .g {
  color: var(--a-ink);
}
.sent .end {
  border-radius: 3px;
  background: linear-gradient(transparent 55%, var(--sun) 55%);
}
.sent .m {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--a);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
.sent .tail {
  color: var(--ink);
}

/* ---------- Tense machine (hub) ---------- */
.machine {
  display: grid;
  gap: 22px;
  padding: clamp(18px, 3.4vw, 36px);
  border: 2px solid var(--line);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 6px 0 var(--line);
  transition:
    --a 0.5s var(--ease),
    --a-ink 0.5s var(--ease),
    --a-soft 0.5s var(--ease),
    --a-edge 0.5s var(--ease),
    --a-deep 0.5s var(--ease);
}
.machine-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
}
.machine-head h2 {
  font-size: clamp(20px, 2.4vw, 26px);
}
.hint,
.machine-note {
  color: var(--muted);
  font-size: 15px;
}
.machine-note {
  font-size: 13px;
}
.controls {
  display: grid;
  gap: 16px;
}
.ctl {
  display: grid;
  gap: 8px;
}
.ctl-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Segmented dial: a pressable thumb springs under the pressed option. */
.seg {
  position: relative;
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}
.seg-thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 13px;
  /* The darker ink keeps small white labels readable on every aspect colour. */
  background: var(--thumb, var(--a-ink));
  box-shadow: 0 3px 0 var(--thumb-deep, var(--a-deep));
}
.thumbs-ready .seg-thumb {
  transition:
    transform 0.5s var(--spring),
    width 0.5s var(--spring),
    height 0.5s var(--spring);
}
/* Dials that are not an aspect use ink, so the aspect colours stay meaningful. */
.seg[data-dial="time"],
.seg[data-dial="person"],
.seg[data-dial="mode"],
.vs-switch {
  --thumb: var(--ink);
  --thumb-deep: #000;
}
.seg button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  padding: 9px 16px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--ink);
  font: 700 15px/1.1 var(--font);
  cursor: pointer;
  transition: color 0.25s var(--ease);
}
.seg button:hover {
  color: var(--blue-ink);
}
.seg button small {
  font: 700 11px/1 var(--mono);
  opacity: 0.7;
}
.seg button[aria-pressed="true"] {
  color: #fff;
}
.seg button[aria-pressed="true"] small {
  opacity: 1;
}
/* The dials show once their script is live. Until then they keep their place,
   so nothing shifts, and a script that failed to load leaves no dead controls. */
[data-machine] .controls,
.builder-dials {
  visibility: hidden;
}
[data-machine].is-live .controls,
.builder.is-live .builder-dials {
  visibility: visible;
}
/* Without JS the dials cannot turn: the rendered state stays, the dials go. */
@media (scripting: none) {
  [data-machine] .controls,
  .builder-dials {
    display: none;
  }
}
.seg[data-dial="aspect"] button {
  padding-left: 32px;
}
.seg[data-dial="aspect"] button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 13px;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 0 #fff;
  transition: box-shadow 0.3s var(--ease);
}
.seg[data-dial="aspect"] button[aria-pressed="true"]::before {
  box-shadow: 0 0 0 2px #fff;
}
.seg button[data-v="simple"] {
  --dot: var(--blue);
}
.seg button[data-v="continuous"] {
  --dot: var(--coral);
}
.seg button[data-v="perfect"] {
  --dot: var(--violet);
}
.seg button[data-v="perfect-continuous"] {
  --dot: var(--teal);
}
.readout {
  display: grid;
  gap: 10px;
}
.tense-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.readout .tense-name {
  color: var(--a-ink);
  font: 700 clamp(17px, 2vw, 21px) / 1.2 var(--display);
}
.formula {
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--a-soft);
  box-shadow: 0 2px 0 var(--a-edge);
  color: var(--a-ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.readout .sent {
  min-height: 1.3em;
  margin: 4px 0;
  font-size: clamp(24px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: -0.01em;
}
.readout .ru,
.readout .mean {
  max-width: 64ch;
  font-size: clamp(15px, 1.6vw, 17px);
}
.readout .ru {
  color: var(--muted);
}
.readout .ex {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
.readout .ex li {
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--a-soft);
  box-shadow: 0 3px 0 var(--a-edge);
}
.readout .ex .ru {
  display: block;
  color: var(--muted);
}
.readout .more:empty {
  display: none;
}
.lang {
  margin-right: 8px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 2px 0 var(--line-2);
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.08em;
  vertical-align: 2px;
}

/* ---------- Timeline ---------- */
.tl {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--a);
}
.tl text,
.use-svg text {
  font-family: var(--font);
  /* A white halo keeps labels readable where a line runs behind them. */
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 8px;
  stroke-linejoin: round;
}
.axis {
  stroke: var(--line-2);
  stroke-width: 6;
  stroke-linecap: round;
}
.axis-head {
  fill: var(--line-2);
}
.tl-cap {
  fill: var(--muted);
  font-size: 18px;
  font-weight: 700;
}
.act-fill {
  fill: var(--a);
}
.use-svg circle.act-fill,
.tl circle.act-fill {
  stroke: var(--a);
  stroke-width: 4;
  filter: drop-shadow(0 3px 0 var(--a-deep));
}
.fade-stop {
  stop-color: var(--a);
}
.wave-line {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}
.act-stroke {
  fill: none;
  stroke: var(--a);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.thread {
  fill: none;
  stroke: var(--a);
  stroke-width: 5;
  stroke-linecap: round;
}
.result-dot {
  fill: #fff;
  stroke: var(--a);
  stroke-width: 5;
}
.spark {
  fill: none;
  stroke: var(--sun);
  stroke-width: 5;
  stroke-linecap: round;
}
.frame {
  fill: var(--a-soft);
  stroke: var(--a);
  stroke-width: 3;
  stroke-dasharray: 8 7;
}
.bracket {
  fill: none;
  stroke: var(--muted);
  stroke-width: 3;
  stroke-linecap: round;
}
.tl-small {
  fill: var(--muted);
  font-size: 19px;
  font-weight: 700;
}
.tl-rl {
  fill: var(--ink);
  font-size: 21px;
  font-weight: 800;
}
.rtick {
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
}
.now {
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
}
.now-l {
  fill: var(--ink);
  font-size: 20px;
  font-weight: 800;
}
.now-pulse {
  fill: var(--a);
  opacity: 0.25;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 2.4s ease-out infinite;
}
.gl {
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.tl-r {
  transform: translateX(400px);
  transition: transform 0.7s var(--spring);
}
/* Each change redraws the glyph: lines draw in, dots bounce in one by one. */
.gl.drawing [pathLength] {
  stroke-dasharray: 1;
  animation: draw 0.8s var(--ease) both;
}
.gl.drawing circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: bounce-in 0.55s var(--spring) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@media (max-width: 600px) {
  .tl-cap {
    display: none;
  }
  .now-l {
    font-size: 34px;
  }
  .tl-small {
    font-size: 30px;
  }
  .tl-rl {
    font-size: 32px;
  }
  .tl-rl,
  [data-glyph="sometime"] {
    transform: translateY(26px);
  }
}

/* ---------- The twelve tense cards (hub) ---------- */
.tense-group {
  display: grid;
  gap: 16px;
}
.tense-group + .tense-group {
  margin-top: 24px;
}
.tense-group h3 {
  justify-self: start;
  padding: 8px 16px;
  border-radius: 12px;
  background: var(--ink);
  box-shadow: 0 3px 0 #000;
  color: #fff;
  font: 700 15px/1.2 var(--display);
}
.tense-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 640px) {
  .tense-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.tense {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 22px 20px 20px;
  border: 2px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 5px 0 var(--line);
  transition:
    transform 0.3s var(--spring),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.tense:hover {
  transform: translateY(-3px);
  border-color: var(--a-edge);
  box-shadow: 0 8px 0 var(--a-edge);
}
.tense h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 18px;
  font-weight: 800;
}
.tense-aspect {
  justify-self: start;
  padding: 4px 10px;
  border-radius: 9px;
  background: var(--a-soft);
  box-shadow: 0 2px 0 var(--a-edge);
  color: var(--a-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.tense .sent {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
}
.tense .ru,
.tense .mean {
  font-size: 15px;
}
.tense .ru {
  color: var(--muted);
}
.tense .ex {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 12px 0 0;
  border-top: 2px dashed var(--line);
  list-style: none;
  font-size: 15px;
}
.tense .ex .ru {
  display: block;
  font-size: 14px;
}
.tense-more {
  --press: var(--a-ink);
  --press-deep: var(--a-deep);
  justify-self: start;
  margin-top: 6px;
  padding: 11px 16px;
}
.tense-more::after {
  content: "→";
}

/* ---------- Cards linking to the detailed pages (hub) ---------- */
.deep-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
  list-style: none;
}
@media (min-width: 980px) {
  .deep-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .deep-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}
.deep-card,
.deep-card > a {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 150px;
  padding: 22px 20px 20px;
  border: 2px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 5px 0 var(--line);
  color: inherit;
  text-decoration: none;
}
.deep-card:has(> a) {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.deep-card > a {
  border-color: var(--a-edge);
  box-shadow: 0 5px 0 var(--a-edge);
  transition:
    transform 0.3s var(--spring),
    box-shadow 0.3s var(--ease);
}
.deep-card > a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--a-edge);
}
.deep-card > a:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--a-edge);
}
.deep-name {
  color: var(--a-ink);
  font: 700 18px/1.25 var(--display);
}
.deep-gist {
  color: var(--muted);
  font-size: 15px;
}
.chip {
  justify-self: start;
  margin-top: auto;
  padding: 5px 10px;
  border-radius: 9px;
  background: var(--a-soft);
  box-shadow: 0 2px 0 var(--a-edge);
  color: var(--a-ink);
  font-size: 12px;
  font-weight: 800;
}

/* ---------- Tense pages: the rule under the title and the contents ---------- */
.gist {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.gist p {
  display: grid;
  gap: 6px;
  padding: 14px 18px;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 0 var(--line);
}
.gist-k {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.gist .sent {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}
.gist .sent .end {
  padding: 0 0.06em;
  border-radius: 0.2em;
  background: var(--sun);
}
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.toc a {
  padding: 8px 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 0 var(--line);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform 0.12s var(--ease),
    box-shadow 0.12s var(--ease),
    border-color 0.2s var(--ease);
}
.toc a:hover {
  transform: translateY(-1px);
  border-color: var(--blue-edge);
  box-shadow: 0 4px 0 var(--blue-edge);
  color: var(--blue-ink);
}
.toc a:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--line);
}

/* ---------- Uses, each with its diagram ---------- */
.use {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 18px 28px;
  padding: clamp(18px, 3vw, 28px);
  border: 2px solid var(--line);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 5px 0 var(--line);
}
@media (max-width: 760px) {
  .use {
    grid-template-columns: minmax(0, 1fr);
  }
}
.use-text {
  display: grid;
  gap: 12px;
}
.use h3 {
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.3;
}
.use-text > p {
  color: var(--ink-2);
}
.use-ex {
  display: grid;
  gap: 9px;
  padding: 0;
  list-style: none;
}
.use-ex li {
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--a-soft);
  box-shadow: 0 3px 0 var(--a-edge);
  font-weight: 700;
}
.use-ex .ru,
.ex-list .ru,
.vs-list .ru,
.marker-ex .ru {
  display: block;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}
.use-art {
  position: relative;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
}
.use-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.use-svg .now-l {
  font-size: 18px;
}
/* Wide-screen reading mode (core.js): the texts on the left, one pinned stage on the
   right that plays a copy of the diagram of the use being read. The real diagrams stay
   in their cards for screen readers, visually hidden, without their replay buttons. */
.sec.is-scrolly {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
  column-gap: 32px;
}
.sec.is-scrolly > .sec-head {
  grid-column: 1 / -1;
}
.sec.is-scrolly > .use {
  grid-column: 1;
  grid-template-columns: minmax(0, 1fr);
  animation: none;
  transition:
    border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.sec.is-scrolly > .use.is-active {
  border-color: var(--a-edge);
  box-shadow: 0 5px 0 var(--a-edge);
}
.sec.is-scrolly > .use > .use-art {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sec.is-scrolly > .use > .use-art .replay {
  display: none;
}
.scrolly-stage {
  grid-column: 2;
  align-self: stretch;
}
.scrolly-pin {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 12px;
}
.scrolly-meta {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}
.scrolly-pin .use-art {
  display: none;
  min-height: min(52vh, 380px);
  align-content: center;
  padding: 28px 22px;
  box-shadow: 0 5px 0 var(--line);
}
.scrolly-pin .use-art.is-active {
  display: grid;
  animation: stage-in 0.45s var(--spring);
}
.scrolly-pin > .replay {
  top: 44px;
}
@keyframes stage-in {
  from {
    opacity: 0;
    translate: 0 14px;
    scale: 0.98;
  }
}
/* The replay button is added by core.js to every diagram that can play. */
.replay {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
  font-size: 18px;
  line-height: 1;
}
.act-bar {
  fill: none;
  stroke: var(--a);
  stroke-width: 18;
  stroke-linecap: round;
  filter: drop-shadow(0 3px 0 var(--a-deep));
}
.pin {
  stroke: var(--a);
  stroke-width: 4;
  stroke-linecap: round;
}
.clock {
  fill: #fff;
  stroke: var(--a);
  stroke-width: 4;
}
.clock-hands {
  fill: none;
  stroke: var(--a-ink);
  stroke-width: 3;
  stroke-linecap: round;
}
.band {
  fill: var(--a-soft);
  stroke: var(--a);
  stroke-width: 3;
  filter: drop-shadow(0 3px 0 var(--a-edge));
}
.tl-tiny {
  fill: var(--ink);
  font-size: 15px;
  font-weight: 800;
}
/* Present Continuous: growth arrow, a plan's arc and calendar, the zoom of periods. */
.arrow {
  fill: none;
  stroke: var(--a-ink);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plan-arc {
  fill: none;
  stroke: var(--a);
  stroke-width: 4;
  stroke-linecap: round;
}
.cal {
  fill: #fff;
  stroke: var(--a);
  stroke-width: 4;
}
.cal-top {
  fill: var(--a);
}
.cal-ring {
  stroke: var(--a-ink);
  stroke-width: 3;
  stroke-linecap: round;
}
.zoom-art {
  max-width: 760px;
}
.zoom-band {
  fill: var(--a-soft);
  stroke: var(--a);
  stroke-width: 3;
}
.zoom-l {
  fill: var(--a-ink);
  font-size: 18px;
  font-weight: 800;
}
@media (max-width: 600px) {
  .zoom-l {
    font-size: 24px;
  }
}
/* Story steps and the ribbon of the past (Past Simple). */
.step {
  fill: #fff;
  stroke: var(--a);
  stroke-width: 4;
  filter: drop-shadow(0 3px 0 var(--a-edge));
}
.step-n {
  fill: var(--a-ink);
  font-size: 16px;
  font-weight: 800;
}
.ribbon-art {
  max-width: 760px;
}
.ribbon-l {
  fill: var(--ink);
  font-size: 16px;
  font-weight: 800;
}
@media (max-width: 600px) {
  .ribbon-l {
    font-size: 21px;
  }
}

/* ---------- Rule players: «Правило в движении» (rule-player.js) ---------- */
.players {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 18px;
}
.player {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas:
    "label label"
    "title title"
    "sent steps"
    "sent play";
  align-content: start;
  gap: 14px 28px;
  margin: 0;
  padding: clamp(18px, 3vw, 28px);
  border: 2px solid var(--a-edge);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 5px 0 var(--a-edge);
}
@media (max-width: 800px) {
  .player {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label" "title" "sent" "steps" "play";
  }
}
.player-label {
  grid-area: label;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.player h3 {
  grid-area: title;
  margin-top: -6px;
  font-size: 19px;
  line-height: 1.3;
}
/* The stage stacks the live sentence and an invisible copy of every step in one
   grid cell, so it is as tall as the tallest step from the first paint and the
   animation never moves the page. Word tiles wrap as a flex row; the gap spaces them. */
.player-stage {
  grid-area: sent;
  display: grid;
  align-items: center;
  padding: 18px;
  border: 2px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
}
.player-stage > .player-sent {
  grid-area: 1 / 1;
}
.player-sent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.1em 0.3em;
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.player-sizer {
  visibility: hidden;
}
.player-steps {
  grid-area: steps;
  align-self: center;
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.player-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: var(--muted);
  font-weight: 700;
  transition: color 0.3s var(--ease);
}
.player-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  height: 28px;
  border-radius: 9px;
  background: var(--panel);
  box-shadow: 0 2px 0 var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.player-steps li.is-on {
  color: var(--ink);
}
.player-steps li.is-on::before {
  background: var(--a-ink);
  box-shadow: 0 2px 0 var(--a-deep);
  color: #fff;
  animation: bounce-in 0.4s var(--spring);
}
.player-steps li.is-done::before {
  background: var(--a-soft);
  box-shadow: 0 2px 0 var(--a-edge);
  color: var(--a-ink);
}
.player-steps .sent {
  display: block;
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 800;
}
/* Every step keeps its sentence as a short summary; the stage plays them. The button
   keeps its place until the player is live, so revealing it moves nothing. Without
   scripting the stage and the button go. */
.player:not(.is-live) .player-play {
  visibility: hidden;
}
@media (scripting: none) {
  .player-play {
    display: none;
  }
  .player {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label" "title" "steps";
  }
  .player-stage {
    display: none;
  }
}
.player-play {
  grid-area: play;
  align-self: start;
  justify-self: start;
  min-height: 46px;
  padding: 10px 18px;
  font-size: 15px;
}

/* ---------- Form constructor and the table of forms ---------- */
.forms {
  display: grid;
  gap: 22px;
}
.builder {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 3.4vw, 34px);
  border: 2px solid var(--line);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 6px 0 var(--line);
}
.builder-dials {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
}
.builder-sent {
  min-height: 1.3em;
  font-size: clamp(24px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.36;
  letter-spacing: -0.01em;
}
.builder-short {
  color: var(--a-ink);
  font-size: 18px;
  font-weight: 800;
}
.builder-short:empty,
.builder-note:empty {
  display: none;
}
.builder-note {
  justify-self: start;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--a-soft);
  box-shadow: 0 3px 0 var(--a-edge);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}
.forms-wrap {
  overflow-x: auto;
  border: 2px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 5px 0 var(--line);
}
.forms-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 15px;
}
.forms-table caption {
  padding: 14px 16px 4px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.forms-table th,
.forms-table td {
  padding: 12px 16px;
  border-top: 2px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.forms-table thead th {
  border-top: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.forms-table tbody th {
  color: var(--a-ink);
  font-weight: 800;
}
.forms-table .sent {
  font-weight: 700;
}
.forms-table td[data-mode="short"] {
  color: var(--muted);
  font-size: 14px;
}
.rules {
  display: grid;
  gap: 9px;
  max-width: 76ch;
  padding-left: 1.2em;
}
.rules li::marker {
  color: var(--a);
}
.spell-h {
  margin-top: 8px;
  font: 700 clamp(19px, 2vw, 22px) / 1.3 var(--display);
}
.spell {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  .spell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .spell {
    grid-template-columns: minmax(0, 1fr);
  }
}
.spell-card,
.ex-group,
.marker-card,
.mistake,
.limit-list li {
  border: 2px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 5px 0 var(--line);
}
.spell-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
}
.spell-card h3 {
  font-size: 15px;
}
.spell-card ul {
  display: grid;
  gap: 6px;
  padding: 0;
  list-style: none;
  font-size: 17px;
}
.spell-from {
  color: var(--muted);
}
.spell-note {
  max-width: 76ch;
  color: var(--ink-2);
  font-size: 15px;
}
/* Irregular verbs: tap a tile to flip it. */
.irregular-wrap {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}
.irregular-hint {
  color: var(--ink-2);
  font-size: 15px;
}
.irregular {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr));
  gap: 12px;
  align-items: start;
}
.flip {
  border: 2px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 0 var(--line);
  transition:
    transform 0.12s var(--ease),
    box-shadow 0.12s var(--ease),
    border-color 0.2s var(--ease);
}
.flip:hover {
  transform: translateY(-1px);
  border-color: var(--a-edge);
  box-shadow: 0 5px 0 var(--a-edge);
}
.flip[open] {
  border-color: var(--a-edge);
  box-shadow: 0 4px 0 var(--a-edge);
}
.flip summary {
  padding: 14px 12px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  list-style: none;
}
.flip summary::-webkit-details-marker {
  display: none;
}
.flip summary::after {
  content: " → ?";
  color: var(--muted);
  font-weight: 700;
}
.flip[open] summary::after {
  content: " →";
}
.flip p {
  margin: 0 12px 12px;
  padding: 8px 6px;
  border-radius: 12px;
  background: var(--sun-soft);
  box-shadow: 0 3px 0 var(--sun-edge);
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  transform-origin: top;
  animation: flip-in 0.5s var(--spring);
}

/* ---------- Examples ---------- */
.ex-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 760px) {
  .ex-groups {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ex-group {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px;
}
.ex-group h3 {
  justify-self: start;
  padding: 5px 12px;
  border-radius: 10px;
  background: var(--a-soft);
  box-shadow: 0 2px 0 var(--a-edge);
  color: var(--a-ink);
  font-size: 14px;
}
.ex-list {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
  font-weight: 700;
}

/* ---------- Frequency scale ---------- */
.freq {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  padding: 58px 0 0;
  list-style: none;
}
.freq::before,
.freq::after {
  content: "";
  position: absolute;
  top: 26px;
  left: 8%;
  right: 8%;
  height: 12px;
  border-radius: 999px;
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--line);
}
.freq::after {
  background: var(--blue);
  box-shadow: 0 3px 0 var(--blue-deep);
  transform-origin: left;
}
.freq li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}
.freq li::before {
  content: "";
  position: absolute;
  top: -42px;
  width: 28px;
  height: 28px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) calc(var(--p) * 1%), var(--blue-soft));
  box-shadow: 0 3px 0 var(--blue-deep);
}
.freq b {
  font-size: 17px;
  font-weight: 800;
}
.freq span {
  color: var(--muted);
  font-size: 14px;
}
@media (max-width: 600px) {
  .freq {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 60px;
  }
  .freq::before,
  .freq::after {
    display: none;
  }
}
.marker-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 760px) {
  .marker-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}
.marker-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px;
}
.marker-card h3 {
  font-size: 17px;
}
.marker-card > p {
  color: var(--a-ink);
  font-weight: 700;
  line-height: 1.8;
}
.marker-ex {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
  font-weight: 700;
}
.marker-ex b {
  color: var(--a-ink);
}
.marker-note {
  color: var(--muted);
  font-size: 14px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips span {
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--a-soft);
  box-shadow: 0 2px 0 var(--a-edge);
  color: var(--a-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

/* ---------- Schedule against live (Present Simple, Present Continuous) ---------- */
.versus,
.timebox {
  display: grid;
  gap: 18px;
}
.vs-switch {
  justify-self: start;
}
.vs-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 760px) {
  .vs-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}
.vs-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 22px;
  border: 2px solid var(--a-edge);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 5px 0 var(--a-edge);
}
.vs-card h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 20px;
}
.vs-card h3 span[lang] {
  color: var(--a-ink);
  font-size: 15px;
}
.vs-card > p {
  color: var(--ink-2);
}
.vs-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.vs-day {
  padding: 8px 0;
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 2px 0 var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease);
}
.vs-day.is-on {
  background: var(--a-ink);
  box-shadow: 0 3px 0 var(--a-deep);
  color: #fff;
  animation: bounce-in 0.5s var(--spring) both;
  animation-delay: calc(var(--d, 0) * 60ms);
}
.live {
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--red-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  animation: live-blink 1.4s ease-in-out infinite;
}
.vs-clock {
  justify-self: start;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--a-soft);
  box-shadow: 0 2px 0 var(--a-edge);
  color: var(--a-ink);
  font: 700 14px/1 var(--mono);
}
.vs-list {
  display: grid;
  gap: 9px;
  padding: 0;
  list-style: none;
  font-weight: 700;
}
.vs-list li {
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--a-soft);
  transition:
    opacity 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    transform 0.4s var(--spring);
}
.vs-list b {
  color: var(--a-ink);
}
.has-pick .vs-list li {
  opacity: 0.45;
}
.has-pick .vs-list li.is-on {
  opacity: 1;
  box-shadow: 0 3px 0 var(--a-edge);
  transform: scale(1.02);
}

/* ---------- The time box: Past Simple against Present Perfect ---------- */
.tb-chips {
  display: grid;
  gap: 10px;
}
.tb-chips p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tb-chips-k {
  min-width: 150px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}
.tb-chips button,
.sw-chips button {
  padding: 8px 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 0 var(--line);
  color: var(--ink);
  font: 800 14px/1 var(--font);
  cursor: pointer;
  transition:
    transform 0.12s var(--ease),
    box-shadow 0.12s var(--ease),
    background 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}
.tb-chips button[data-box="closed"] {
  --a: var(--blue);
  --a-ink: var(--blue-ink);
  --a-edge: var(--blue-edge);
  --a-deep: var(--blue-deep);
}
.tb-chips button[data-box="open"] {
  --a: var(--violet);
  --a-ink: var(--violet-ink);
  --a-edge: var(--violet-edge);
  --a-deep: var(--violet-deep);
}
:is(.tb-chips, .sw-chips) button:hover {
  transform: translateY(-1px);
  border-color: var(--a-edge);
  box-shadow: 0 4px 0 var(--a-edge);
  color: var(--a-ink);
}
:is(.tb-chips, .sw-chips) button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--line);
}
:is(.tb-chips, .sw-chips) button[aria-pressed="true"] {
  border-color: var(--a-ink);
  background: var(--a-ink);
  box-shadow: 0 3px 0 var(--a-deep);
  color: #fff;
}
.tb-svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  overflow: visible;
}
.tb-svg text {
  font-family: var(--font);
}
.tb-box {
  fill: var(--a-soft);
  stroke: var(--a);
  stroke-width: 4;
}
.tb-lid {
  fill: var(--a);
  transform-box: fill-box;
  transform-origin: left bottom;
  filter: drop-shadow(0 3px 0 var(--a-deep));
}
.tb-lid-open {
  transform: rotate(-32deg);
}
.tb-lid-closed.is-moving {
  animation: lid-slam 0.6s var(--spring);
}
.tb-lid-open.is-moving {
  animation: lid-swing 0.8s var(--spring);
}
.tb-label {
  fill: var(--a-ink);
  font-size: 20px;
  font-weight: 800;
}
.timebox.has-pick .tb-card {
  transition:
    opacity 0.35s var(--ease),
    transform 0.4s var(--spring),
    box-shadow 0.35s var(--ease);
}
.timebox.has-pick .tb-card:not(.is-on) {
  opacity: 0.6;
}
.timebox.has-pick .tb-card.is-on {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--a-edge);
}

/* ---------- The for-and-since stopwatch (Present Perfect) ---------- */
@property --turn {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.stopwatch {
  display: grid;
  gap: 18px;
  margin-bottom: 22px;
  padding: clamp(18px, 3vw, 28px);
  border: 2px solid var(--a-edge);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 5px 0 var(--a-edge);
}
.sw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sw-body {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 4vw, 40px);
}
.sw-svg {
  width: 100%;
  max-width: 200px;
  height: auto;
  transition: --turn 0.9s var(--spring);
}
.sw-face {
  fill: var(--panel);
  stroke: var(--line-2);
  stroke-width: 4;
}
.sw-ring {
  fill: none;
  stroke: var(--a);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: var(--turn) 1;
}
.sw-tick {
  stroke: var(--line-2);
  stroke-width: 3;
  stroke-linecap: round;
}
.sw-button,
.sw-center {
  fill: var(--a-ink);
}
.sw-button {
  transform-box: fill-box;
  transform-origin: center bottom;
}
.sw-hand {
  stroke: var(--a-ink);
  stroke-width: 6;
  stroke-linecap: round;
  transform-origin: 110px 110px;
  transform: rotate(calc(var(--turn) * 1turn));
}
.sw-readout {
  display: grid;
  gap: 2px;
}
.sw-since {
  color: var(--muted);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800;
}
.sw-eq {
  color: var(--a);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.sw-for {
  color: var(--a-ink);
  font: 700 clamp(26px, 4vw, 36px) / 1.15 var(--display);
}
.sw-now {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 700;
}
.stopwatch.is-moving .sw-button {
  animation: sw-press 0.35s var(--ease);
}
.stopwatch.is-moving .sw-for {
  animation: sw-pop 0.5s var(--spring);
}
.sw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.sw-table caption {
  padding-bottom: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.sw-table th,
.sw-table td {
  padding: 10px 12px;
  border-top: 2px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.sw-table thead th {
  border-top: 0;
  color: var(--muted);
  font-size: 13px;
}
.sw-table td:not(:last-child) {
  color: var(--a-ink);
  font-weight: 800;
}
@media (max-width: 600px) {
  .sw-body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .sw-svg {
    max-width: 170px;
  }
  .sw-table th,
  .sw-table td {
    padding: 8px 6px;
    font-size: 14px;
  }
}

/* ---------- Mistakes and where the model stops working ---------- */
.mistakes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  padding: 0;
  list-style: none;
}
.mistake {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 18px 20px;
}
.mistake-ru {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}
.mistake-bad,
.mistake-good {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
}
.mistake-bad {
  color: var(--red-ink);
}
.mistake-bad .txt {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.mistake-good {
  color: var(--green-ink);
}
.mark {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  font-size: 13px;
  text-decoration: none;
}
.mistake-bad .mark {
  background: var(--red-soft);
  box-shadow: 0 2px 0 var(--red-edge);
}
.mistake-good .mark {
  background: var(--green-soft);
  box-shadow: 0 2px 0 var(--green-edge);
}
.mistake-why {
  font-size: 15px;
}
.limit-list {
  display: grid;
  gap: 16px;
  max-width: 76ch;
  padding: 0;
  list-style: none;
}
.limit-list li {
  position: relative;
  padding: 18px 20px 18px 60px;
}
.limit-list li::before {
  content: "!";
  position: absolute;
  top: 17px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--sun);
  box-shadow: 0 2px 0 var(--sun-deep);
  color: var(--ink);
  font-weight: 800;
}
/* A sentence shown as the wrong way to say it. */
.bad {
  color: var(--red-ink);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* ---------- Exercises and the final test (practice.js) ---------- */
.practice {
  display: grid;
  gap: 18px;
}
.practice-h {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.item {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 2px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 5px 0 var(--line);
  transition:
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.item[data-state="right"] {
  border-color: var(--green-edge);
  box-shadow: 0 5px 0 var(--green-edge);
}
.item[data-state="wrong"] {
  border-color: var(--red-edge);
  box-shadow: 0 5px 0 var(--red-edge);
}
.item-prompt {
  font-size: 18px;
  font-weight: 700;
}
.item-n {
  color: var(--muted);
}
.item-prompt b {
  color: var(--blue-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.item-prompt [data-gap] {
  display: inline-block;
  min-width: 3.2em;
  padding: 0 0.3em;
  border-bottom: 3px solid var(--blue-edge);
  color: var(--blue-ink);
  text-align: center;
}
.item-sent {
  display: block;
  margin-top: 6px;
  font-size: 21px;
  font-weight: 800;
}
.options,
.words {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.options button,
.words button {
  position: relative;
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 0 var(--line);
  color: var(--ink);
  font: 700 15.5px/1.2 var(--font);
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.12s var(--ease),
    box-shadow 0.12s var(--ease),
    border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}
.options button:not([aria-disabled="true"]):hover,
.words button:not([aria-disabled="true"]):hover {
  transform: translateY(-1px);
  border-color: var(--blue-edge);
  box-shadow: 0 5px 0 var(--blue-edge);
}
.options button:not([aria-disabled="true"]):active,
.words button:not([aria-disabled="true"]):active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--line);
}
.options button[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: 0 4px 0 var(--blue-edge);
  color: var(--blue-ink);
}
/* A used word leaves a quiet slot behind in the bank. */
.words button[aria-pressed="true"] {
  border-color: transparent;
  background: var(--panel);
  box-shadow: none;
  color: #b9bdd0;
}
.item[data-state] button[aria-disabled="true"] {
  cursor: default;
}
.item[data-state] button[aria-disabled="true"]:not([aria-pressed="true"], [data-correct]) {
  opacity: 0.5;
}
.item[data-state="wrong"] button[aria-pressed="true"] {
  border-color: var(--red);
  background: var(--red-soft);
  box-shadow: 0 4px 0 var(--red-edge);
  color: var(--red-ink);
  animation: shake 0.45s var(--ease);
}
.item[data-state] button[data-correct],
.item[data-state="right"] .options button[aria-pressed="true"] {
  border-color: var(--green);
  background: var(--green-soft);
  box-shadow: 0 4px 0 var(--green-edge);
  color: var(--green-ink);
  animation: bounce-in 0.5s var(--spring);
}
.find-words {
  gap: 8px;
}
.find-words button {
  padding: 8px 12px;
  font-size: 17px;
}
.slots button {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 128px;
  text-align: center;
}
.mini-svg {
  width: 104px;
  height: auto;
}
.practice-built {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 10px;
  border: 2px dashed var(--blue-edge);
  border-radius: 16px;
}
.practice-built:empty::before {
  content: "Нажимай слова по порядку";
  color: var(--muted);
  font-size: 14px;
}
.practice-built span {
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--blue-soft);
  box-shadow: 0 3px 0 var(--blue-edge);
  font-weight: 800;
  animation: bounce-in 0.35s var(--spring);
}
.item[data-state="right"] .practice-built span {
  background: var(--green-soft);
  box-shadow: 0 3px 0 var(--green-edge);
  color: var(--green-ink);
}
.item[data-state="wrong"] .practice-built span {
  background: var(--red-soft);
  box-shadow: 0 3px 0 var(--red-edge);
  color: var(--red-ink);
}
.practice-feedback {
  justify-self: start;
  font-weight: 800;
}
.practice-feedback:empty {
  display: none;
}
.item[data-state="right"] .practice-feedback {
  color: var(--green-ink);
  animation: bounce-in 0.45s var(--spring);
}
.item[data-state="wrong"] .practice-feedback {
  color: var(--red-ink);
}
.item details {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--panel);
  font-size: 15px;
}
.item details:not([hidden]) {
  animation: drop-in 0.35s var(--ease);
}
.item summary {
  color: var(--blue-ink);
  font-weight: 800;
  cursor: pointer;
}
.item details[open] summary {
  margin-bottom: 6px;
}
.practice-reset,
.practice-check {
  justify-self: start;
  min-height: 52px;
  padding: 12px 24px;
  font-size: 15px;
}
.practice-score {
  font: 700 22px/1.3 var(--display);
  animation: bounce-in 0.5s var(--spring);
}
.practice-score:empty {
  display: none;
}
.practice-result {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 2px solid var(--blue-edge);
  border-radius: 24px;
  background: var(--blue-soft);
  box-shadow: 0 5px 0 var(--blue-edge);
  animation: drop-in 0.4s var(--ease);
}
.invite-mini {
  justify-self: start;
  padding: 12px 20px;
}

/* ---------- Say it aloud ---------- */
.say-card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: clamp(22px, 4vw, 40px) clamp(22px, 4vw, 40px) clamp(22px, 4vw, 40px) clamp(22px, 9vw, 110px);
  border: 2px solid var(--sun-edge);
  border-radius: 28px;
  background: var(--sun-soft);
  box-shadow: 0 6px 0 var(--sun-edge);
}
/* A microphone dot that keeps calling: the task is to speak. */
.say-card::before {
  content: "";
  position: absolute;
  top: clamp(22px, 4vw, 40px);
  left: clamp(18px, 3vw, 36px);
  width: clamp(0px, 5vw, 52px);
  height: clamp(0px, 5vw, 52px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #fff 0 22%, transparent 23%),
    var(--coral);
  box-shadow: 0 0 0 0 rgb(255 106 26 / 0.4);
  animation: ring 2.2s ease-out infinite;
}
.say-example summary {
  color: var(--blue-ink);
  font-weight: 800;
  cursor: pointer;
}
.say-example ul {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-left: 1.2em;
  font-weight: 700;
}

/* ---------- Call to action ---------- */
.invite {
  display: grid;
  gap: 18px;
  padding: clamp(26px, 5vw, 56px);
  border-radius: 30px;
  background: var(--blue);
  box-shadow: 0 8px 0 var(--blue-deep);
  color: #fff;
}
.invite h2 {
  max-width: 22ch;
}
.invite p {
  max-width: 60ch;
  color: rgb(255 255 255 / 0.92);
}
.free {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--sun);
  box-shadow: 0 2px 0 var(--sun-deep);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}
.invite-btn {
  justify-self: start;
  min-height: 56px;
  padding: 17px 28px;
  border-radius: 16px;
  background: var(--sun);
  box-shadow: 0 5px 0 var(--sun-deep);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 0.12s var(--ease),
    box-shadow 0.12s var(--ease);
}
.invite-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 0 var(--sun-deep);
}
.invite-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--sun-deep);
}
.invite-btn:focus-visible {
  outline-color: #fff;
}

/* ---------- Footer ---------- */
.gf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px clamp(16px, 4vw, 32px) 40px;
  border-top: 2px solid var(--line);
}
.gf-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}
.gf nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.gf nav a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.gf nav a:hover {
  color: var(--blue-ink);
}

/* ---------- Motion ---------- */
/* Diagram parts that play: core.js adds .is-playing when a diagram comes into view
   and again on replay. Without the class everything is drawn. */
.pop,
.draw-in {
  transform-box: fill-box;
  transform-origin: center;
}
.is-playing .pop {
  animation: bounce-in 0.6s var(--spring) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.is-playing .draw {
  stroke-dasharray: 1;
  animation: draw 0.9s var(--ease) both;
  animation-delay: 0.1s;
}
.is-playing .draw-in {
  animation: grow-x 0.8s var(--spring) both;
  animation-delay: 0.1s;
}
.freq.is-playing::after {
  animation: grow-x 0.9s var(--ease) both;
}
.freq.is-playing li {
  animation: bounce-in 0.5s var(--spring) both;
}
.freq.is-playing li:nth-child(2) {
  animation-delay: 70ms;
}
.freq.is-playing li:nth-child(3) {
  animation-delay: 140ms;
}
.freq.is-playing li:nth-child(4) {
  animation-delay: 210ms;
}
.freq.is-playing li:nth-child(5) {
  animation-delay: 280ms;
}
.freq.is-playing li:nth-child(6) {
  animation-delay: 350ms;
}
/* Cards rise into place as they scroll into view. Driven by the scroll itself, so
   a card that is in view is always fully shown, and browsers without scroll-driven
   animations simply show everything. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.use, .tense, .item, .mistake, .ex-group, .spell-card, .marker-card, .vs-card, .deep-card, .player, .limit-list li) {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes bounce-in {
  0% {
    scale: 0;
    opacity: 0;
  }
  60% {
    scale: 1.14;
    opacity: 1;
  }
  100% {
    scale: 1;
  }
}
@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes grow-x {
  from {
    scale: 0 1;
  }
  to {
    scale: 1 1;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    translate: 0 24px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes drop-in {
  from {
    opacity: 0;
    translate: 0 -6px;
  }
}
@keyframes shake {
  20% {
    translate: -7px 0;
  }
  40% {
    translate: 6px 0;
  }
  60% {
    translate: -4px 0;
  }
  80% {
    translate: 2px 0;
  }
}
@keyframes flip-in {
  from {
    opacity: 0;
    transform: perspective(400px) rotateX(-80deg);
  }
}
@keyframes pulse {
  from {
    scale: 0.6;
    opacity: 0.45;
  }
  to {
    scale: 2.4;
    opacity: 0;
  }
}
@keyframes live-blink {
  50% {
    opacity: 0.4;
  }
}
@keyframes ring {
  to {
    box-shadow: 0 0 0 18px rgb(255 106 26 / 0);
  }
}
@keyframes lid-slam {
  0% {
    transform: rotate(-40deg);
  }
  60% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes lid-swing {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-32deg);
  }
}
@keyframes sw-press {
  50% {
    scale: 1 0.5;
  }
}
@keyframes sw-pop {
  from {
    opacity: 0;
    translate: 0 8px;
    scale: 0.92;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}