:root {
  --ink: #20242a;
  --muted: #5f6975;
  --line: #e3e8ee;
  --paper: #ffffff;
  --soft: #f5f8fb;
  --brand: #f48f82;
  --brand-strong: #dc6d62;
  --mint: #2fae9b;
  --sky: #4080b8;
  --plum: #7355a0;
  --footer: #23262d;
  --shadow: 0 18px 45px rgba(29, 42, 56, 0.14);
  --radius: 8px;
  --max: 1180px;
}

/* Grammar Quest */
.exercise-game-launch {
  display: grid;
  gap: 5px;
  margin-top: 22px;
  padding: 18px 0;
  border-top: 1px solid rgba(42, 49, 58, 0.12);
  border-bottom: 1px solid rgba(42, 49, 58, 0.12);
}

.exercise-game-launch strong {
  color: var(--ink);
  font-size: 1.08rem;
}

.exercise-game-launch p {
  margin: 0;
  color: var(--muted);
}

body.is-grammar-game-active {
  overflow: hidden;
}

body.is-grammar-game-active .grammar-adventure {
  position: fixed;
  inset: 0;
  z-index: 5000;
  width: 100%;
  height: 100dvh;
}

.grammar-adventure,
.grammar-adventure * {
  box-sizing: border-box;
  letter-spacing: 0;
}

.grammar-adventure {
  color: #20262d;
  font-family: inherit;
}

.grammar-adventure button,
.grammar-adventure input {
  font: inherit;
}

.adventure-icon-button,
.adventure-hud__buttons button,
.adventure-modal-close,
.adventure-mobile-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(24, 31, 38, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #20262d;
  font-weight: 850;
  cursor: pointer;
}

.adventure-icon-button svg,
.adventure-hud__buttons svg,
.adventure-mobile-controls svg,
.adventure-toggle-list svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.grammar-adventure--lobby {
  overflow: auto;
  background: #edf3f2;
}

.adventure-lobby-header {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto minmax(110px, 1fr);
  align-items: center;
  min-height: 66px;
  padding: 10px 22px;
  border-bottom: 1px solid rgba(229, 119, 105, 0.22);
  background: rgba(255, 247, 245, 0.88);
  box-shadow: 0 8px 28px rgba(36, 47, 55, 0.08);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.adventure-lobby-header > div {
  text-align: center;
}

.adventure-lobby-header > div span,
.adventure-lobby-header > div strong {
  display: block;
}

.adventure-lobby-header > div span {
  color: #b6534b;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.adventure-lobby-header > div strong {
  font-size: 1.08rem;
}

.adventure-lobby-header .adventure-icon-button {
  min-height: 42px;
  padding: 0 13px;
  justify-self: start;
}

.adventure-lobby-header .adventure-icon-button:last-child {
  justify-self: end;
}

.adventure-lobby-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(410px, 0.85fr);
  gap: 22px;
  width: min(1420px, calc(100% - 36px));
  margin: 18px auto 34px;
}

.adventure-lobby-hero {
  position: relative;
  min-height: 690px;
  overflow: hidden;
  border-radius: 8px;
  background: #23342f;
  box-shadow: 0 18px 46px rgba(25, 37, 43, 0.2);
}

.adventure-world-collage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.adventure-world-collage span {
  background-position: center;
  background-size: cover;
}

.adventure-world-collage::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(10, 20, 22, 0.32);
}

.adventure-lobby-character {
  position: absolute;
  right: 4%;
  bottom: 0;
  z-index: 2;
  width: min(38%, 300px);
  filter: drop-shadow(0 16px 18px rgba(10, 16, 18, 0.38));
  animation: adventure-character-idle 3.2s ease-in-out infinite;
}

.adventure-portrait {
  display: block;
  width: 100%;
  height: auto;
}

.adventure-lobby-copy {
  position: absolute;
  bottom: 58px;
  left: 34px;
  z-index: 3;
  width: min(58%, 560px);
  color: #fff;
  text-shadow: 0 2px 18px rgba(10, 16, 18, 0.74);
}

.adventure-lobby-copy .eyebrow {
  color: #ffad9f;
}

.adventure-lobby-copy h2 {
  max-width: 580px;
  margin: 8px 0 13px;
  font-size: 3.25rem;
  line-height: 1;
}

.adventure-lobby-copy p:last-child {
  max-width: 530px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 720;
}

.adventure-world-labels {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.adventure-world-labels span {
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  background: rgba(16, 27, 29, 0.7);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 850;
  backdrop-filter: blur(9px);
}

.adventure-lobby-controls {
  align-self: start;
  padding: 26px;
  border: 1px solid rgba(32, 38, 45, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 42px rgba(33, 44, 51, 0.1);
}

.adventure-lobby-title h2,
.adventure-leaderboard h2,
.adventure-settings h2 {
  margin: 5px 0 8px;
  font-size: 1.7rem;
  line-height: 1.1;
}

.adventure-lobby-title > p:last-child {
  margin: 0;
  color: #61707a;
}

.adventure-mode-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.adventure-mode-toolbar button {
  border: 0;
  background: transparent;
  color: #b6534b;
  font-weight: 850;
  cursor: pointer;
}

.adventure-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.adventure-mode {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 2px 9px;
  min-width: 0;
  min-height: 68px;
  padding: 11px;
  border: 1px solid rgba(32, 38, 45, 0.14);
  border-radius: 7px;
  background: #f7f9f8;
  color: #20262d;
  text-align: left;
  cursor: pointer;
}

.adventure-mode > span {
  grid-row: 1 / 3;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border: 2px solid #9aa6ad;
  border-radius: 4px;
}

.adventure-mode strong,
.adventure-mode small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.adventure-mode small {
  color: #697780;
  font-weight: 700;
}

.adventure-mode[aria-pressed="true"] {
  border-color: rgba(214, 101, 90, 0.55);
  background: #fff2ef;
  box-shadow: inset 0 0 0 1px rgba(214, 101, 90, 0.12);
}

.adventure-mode[aria-pressed="true"] > span {
  border-color: #d6655a;
  background: #d6655a;
  box-shadow: inset 0 0 0 3px #fff2ef;
}

.adventure-selection-line {
  margin-top: 10px;
  color: #61707a;
  font-size: 0.84rem;
}

.adventure-selection-line strong {
  color: #20262d;
}

.adventure-resume-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  margin: -2px 0 22px;
  padding: 14px 0 14px 16px;
  border-left: 4px solid #278f80;
  border-bottom: 1px solid rgba(39, 143, 128, 0.18);
  background: #eef8f5;
}

.adventure-resume-run > div:first-child span,
.adventure-resume-run > div:first-child strong,
.adventure-resume-run > div:first-child small {
  display: block;
}

.adventure-resume-run > div:first-child span {
  color: #227d70;
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.adventure-resume-run > div:first-child strong {
  margin-top: 3px;
  color: #20262d;
}

.adventure-resume-run > div:first-child small {
  margin-top: 2px;
  color: #61707a;
  font-weight: 750;
}

.adventure-resume-progress {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  background: rgba(39, 143, 128, 0.14);
}

.adventure-resume-progress span {
  display: block;
  height: 100%;
  background: #278f80;
}

.adventure-resume-run .button {
  min-height: 42px;
  padding: 8px 13px;
}

.adventure-resume-run > button:last-child {
  grid-column: 2;
  border: 0;
  background: transparent;
  color: #8f4a43;
  font-size: 0.76rem;
  font-weight: 850;
  text-align: right;
  cursor: pointer;
}

.adventure-difficulty-group {
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}

.adventure-difficulty-group legend {
  margin-bottom: 9px;
  font-weight: 900;
}

.adventure-difficulty-group > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.adventure-difficulty {
  min-width: 0;
  min-height: 92px;
  padding: 10px;
  border: 1px solid rgba(32, 38, 45, 0.14);
  border-radius: 7px;
  background: #f7f9f8;
  color: #20262d;
  text-align: left;
  cursor: pointer;
}

.adventure-difficulty strong,
.adventure-difficulty span {
  display: block;
  overflow-wrap: anywhere;
}

.adventure-difficulty span {
  margin-top: 4px;
  color: #61707a;
  font-size: 0.72rem;
  line-height: 1.25;
}

.adventure-difficulty[aria-pressed="true"] {
  border-color: #278f80;
  background: #e8f7f3;
  box-shadow: inset 0 -4px 0 #278f80;
}

.adventure-name-field {
  display: grid;
  gap: 6px;
  margin-top: 19px;
  font-weight: 850;
}

.adventure-name-field input {
  width: 100%;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid rgba(32, 38, 45, 0.18);
  border-radius: 7px;
  background: #fff;
  color: #20262d;
}

.adventure-start {
  width: 100%;
  margin-top: 15px;
}

.adventure-leaderboard {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(230px, 0.35fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 24px 26px;
  border-top: 4px solid #7355a0;
  background: #fff;
  box-shadow: 0 14px 36px rgba(33, 44, 51, 0.09);
}

.adventure-leaderboard-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adventure-leaderboard-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid rgba(32, 38, 45, 0.1);
}

.adventure-leaderboard-list li > span {
  grid-row: 1 / 3;
  color: #d6655a;
  font-weight: 950;
}

.adventure-leaderboard-list li small {
  grid-column: 2;
  color: #697780;
  font-size: 0.7rem;
}

.adventure-leaderboard-list li b {
  grid-row: 1 / 3;
  grid-column: 3;
}

.adventure-leaderboard-empty {
  margin: 8px 0;
  color: #697780;
}

.adventure-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5400;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(13, 19, 23, 0.72);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.adventure-settings {
  width: min(620px, 100%);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: #fffaf8;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
}

.adventure-settings header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.adventure-settings header p,
.adventure-settings header h2 {
  margin-top: 0;
}

.adventure-modal-close {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  font-size: 1.65rem;
}

.adventure-settings fieldset {
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}

.adventure-settings legend {
  margin-bottom: 9px;
  font-weight: 900;
}

.adventure-character-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.adventure-character-options button {
  min-width: 0;
  min-height: 82px;
  padding: 10px;
  border: 1px solid rgba(32, 38, 45, 0.14);
  border-radius: 7px;
  background: #f7f9f8;
  text-align: left;
  cursor: pointer;
}

.adventure-character-options span,
.adventure-character-options small {
  display: block;
}

.adventure-character-options span {
  color: #20262d;
  font-weight: 900;
}

.adventure-character-options small {
  margin-top: 4px;
  color: #697780;
  line-height: 1.25;
}

.adventure-character-options button[aria-pressed="true"] {
  border-color: #d6655a;
  background: #fff0ed;
  box-shadow: inset 0 -4px 0 #d6655a;
}

.adventure-toggle-list {
  display: grid;
  gap: 8px;
  margin: 20px 0;
}

.adventure-toggle-list label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
  padding: 12px 14px;
  border: 1px solid rgba(32, 38, 45, 0.12);
  border-radius: 7px;
  background: #fff;
}

.adventure-toggle-list label > span {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
}

.adventure-toggle-list svg {
  grid-row: 1 / 3;
}

.adventure-toggle-list small {
  grid-column: 2;
  color: #697780;
}

.adventure-toggle-list input {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  accent-color: #d6655a;
}

.adventure-settings > .button {
  width: 100%;
}

.grammar-adventure--play {
  display: grid;
  grid-template-rows: auto 5px auto minmax(0, 1fr) auto;
  overflow: auto;
  background: #11191d;
  color: #fff;
}

.adventure-hud {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(190px, 1.35fr) repeat(3, minmax(90px, 0.6fr)) auto;
  align-items: stretch;
  min-height: 62px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 29, 33, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.adventure-hud > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 8px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}

.adventure-hud > div > span {
  color: #aebbc1;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.adventure-hud > div > strong {
  overflow: hidden;
  margin-top: 2px;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adventure-hud__brand strong {
  color: #ffad9f !important;
}

.adventure-hud__buttons {
  display: flex !important;
  flex-direction: row !important;
  gap: 5px;
  align-items: center;
  border-right: 0 !important;
}

.adventure-hud__buttons button {
  min-height: 40px;
  padding: 0 10px;
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.75rem;
}

.adventure-energy strong {
  display: flex;
  gap: 4px;
}

.adventure-energy strong span {
  width: 18px;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
}

.adventure-energy strong span.is-active {
  border-color: #ff9c8f;
  background: #e7786c;
  box-shadow: 0 0 10px rgba(231, 120, 108, 0.44);
}

.adventure-progress {
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
}

.adventure-progress span {
  display: block;
  height: 100%;
  background: #2fae9b;
  transition: width 220ms ease;
}

.adventure-question {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1.4fr) 90px;
  gap: 18px;
  align-items: center;
  min-height: 92px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  background: #1c282d;
}

.adventure-question > div:first-child span,
.adventure-question > div:first-child strong {
  display: block;
}

.adventure-question > div:first-child span {
  color: #ffad9f;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.adventure-question > div:first-child strong {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  color: #dbe4e7;
  font-size: 0.82rem;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.adventure-sentence {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin: 0;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 900;
  text-align: center;
}

.adventure-sentence__gap {
  color: #ffad9f;
}

.adventure-sentence small {
  color: #aebbc1;
  font-size: 0.76rem;
}

.adventure-question-timer {
  position: relative;
  height: 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}

.adventure-question-timer span {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(47, 174, 155, 0.56);
}

.adventure-question-timer span.is-urgent {
  background: rgba(231, 120, 108, 0.74);
}

.adventure-question-timer b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.76rem;
}

.adventure-play-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 12px;
  min-height: 0;
  padding: 12px;
  background: #11191d;
}

.adventure-canvas-shell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: #0c1316;
}

.adventure-canvas {
  width: 100%;
  height: 100%;
  min-height: 420px;
}

.adventure-canvas canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.adventure-game-error {
  display: grid;
  place-items: center;
  min-height: 420px;
  padding: 30px;
  color: #fff;
  text-align: center;
}

.adventure-answers {
  display: grid;
  grid-template-rows: repeat(4, minmax(70px, 1fr));
  gap: 8px;
}

.adventure-answer {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 5px solid;
  border-radius: 7px;
  background: #1d292e;
}

.adventure-answer > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
  font-weight: 950;
}

.adventure-answer strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.18;
}

.adventure-answer--1 { border-left-color: #e7786c; }
.adventure-answer--2 { border-left-color: #2fae9b; }
.adventure-answer--3 { border-left-color: #9474c5; }
.adventure-answer--4 { border-left-color: #5a92da; }

.adventure-world-intro,
.adventure-pause-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  padding: 30px;
  background: rgba(8, 15, 17, 0.79);
  color: #fff;
  text-align: center;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.adventure-world-intro[hidden],
.adventure-pause-layer[hidden] {
  display: none;
}

.adventure-world-intro span {
  color: #ffad9f;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.adventure-world-intro strong,
.adventure-pause-layer strong {
  margin-top: 7px;
  font-size: 2.1rem;
}

.adventure-world-intro p {
  margin: 8px 0 0;
  color: #d5dfe2;
}

.adventure-pause-layer .button {
  margin-top: 18px;
}

.adventure-mobile-controls {
  display: none;
}

.adventure-feedback-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5300;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 15, 17, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.adventure-feedback-backdrop[hidden] {
  display: none;
}

.adventure-feedback {
  width: min(620px, 100%);
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 6px solid;
  border-radius: 8px;
  background: #fff;
  color: #20262d;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
}

.adventure-feedback.is-correct { border-top-color: #2fae9b; }
.adventure-feedback.is-wrong { border-top-color: #d6655a; }
.adventure-feedback--rescue { border-top-color: #7355a0; }

.adventure-feedback__result {
  color: #b6534b;
  font-size: 0.73rem;
  font-weight: 950;
  text-transform: uppercase;
}

.adventure-feedback h2 {
  margin: 5px 0 9px;
  font-size: 1.8rem;
}

.adventure-feedback p {
  margin: 0;
  color: #5f6d76;
  line-height: 1.55;
}

.adventure-feedback > div {
  display: grid;
  gap: 2px;
  margin-top: 13px;
  padding: 10px 12px;
  border-left: 4px solid #d6655a;
  background: #fff1ee;
}

.adventure-feedback > div span {
  color: #9c514a;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.adventure-feedback .button {
  width: 100%;
  margin-top: 18px;
}

.grammar-adventure--finish {
  overflow: auto;
  padding: 34px max(18px, calc((100% - 1080px) / 2));
  background: #edf3f2;
}

.adventure-finish-hero {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  padding: 54px 44px 44px min(42%, 390px);
  border-radius: 8px;
  background: #203b35;
  color: #fff;
}

.adventure-finish-hero > div {
  position: absolute;
  bottom: -20px;
  left: 40px;
  width: 250px;
}

.adventure-finish-hero .eyebrow {
  color: #ffad9f;
}

.adventure-finish-hero h2 {
  margin: 7px 0 10px;
  font-size: 2.7rem;
  line-height: 1;
}

.adventure-finish-hero p:last-child {
  margin: 0;
  color: #d7e3df;
  font-size: 1.05rem;
}

.adventure-finish-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 14px;
  background: rgba(32, 38, 45, 0.1);
}

.adventure-finish-stats span {
  padding: 17px;
  background: #fff;
  text-align: center;
}

.adventure-finish-stats small,
.adventure-finish-stats strong {
  display: block;
}

.adventure-finish-stats small {
  color: #697780;
  font-weight: 800;
}

.adventure-finish-stats strong {
  margin-top: 3px;
  font-size: 1.35rem;
}

.adventure-finish-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 15px 0;
}

.adventure-finish-badges span {
  padding: 7px 10px;
  border: 1px solid rgba(115, 85, 160, 0.24);
  border-radius: 6px;
  background: #f5f0fb;
  color: #60438b;
  font-size: 0.78rem;
  font-weight: 900;
}

.adventure-leaderboard--finish {
  grid-template-columns: 0.4fr 1fr;
}

.adventure-finish-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.adventure-finish-actions .button {
  flex: 1;
}

@keyframes adventure-character-idle {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-9px) rotate(1deg); }
}

@media (max-width: 980px) {
  .adventure-lobby-grid {
    grid-template-columns: 1fr;
  }

  .adventure-lobby-hero {
    min-height: 560px;
  }

  .adventure-leaderboard {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .adventure-play-layout {
    grid-template-columns: minmax(0, 1fr) 240px;
  }

  .adventure-hud {
    grid-template-columns: minmax(150px, 1fr) repeat(3, 80px) auto;
  }

  .adventure-hud__buttons button span {
    display: none;
  }

  .adventure-hud__buttons button {
    width: 40px;
    padding: 0;
  }
}

@media (max-width: 700px) {
  .adventure-lobby-header {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    min-height: 58px;
    padding: 7px 10px;
  }

  .adventure-lobby-header .adventure-icon-button {
    width: 42px;
    min-height: 42px;
    padding: 0;
  }

  .adventure-lobby-header .adventure-icon-button span {
    display: none;
  }

  .adventure-lobby-grid {
    width: 100%;
    margin: 0;
    gap: 0;
  }

  .adventure-lobby-hero {
    min-height: 470px;
    border-radius: 0;
    box-shadow: none;
  }

  .adventure-lobby-character {
    right: -2%;
    width: 48%;
  }

  .adventure-lobby-copy {
    bottom: 26px;
    left: 20px;
    width: 65%;
  }

  .adventure-lobby-copy h2 {
    font-size: 2.25rem;
  }

  .adventure-lobby-copy p:last-child {
    font-size: 0.9rem;
  }

  .adventure-world-labels {
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
  }

  .adventure-lobby-controls,
  .adventure-leaderboard {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .adventure-lobby-controls {
    padding: 24px 18px;
  }

  .adventure-resume-run {
    grid-template-columns: minmax(0, 1fr) 142px;
    grid-template-rows: auto auto 5px;
    gap: 4px 8px;
    margin: 0 0 8px;
    padding: 8px 8px 8px 10px;
  }

  .adventure-resume-run > div:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .adventure-resume-run > div:first-child small {
    display: none;
  }

  .adventure-resume-progress {
    grid-column: 1 / -1;
    grid-row: 3;
    height: 5px;
  }

  .adventure-resume-run .button {
    grid-column: 2;
    grid-row: 1;
    min-height: 34px;
    padding: 5px 8px;
    font-size: 0.74rem;
  }

  .adventure-resume-run > button:last-child {
    grid-column: 2;
    grid-row: 2;
    min-height: 22px;
    text-align: center;
  }

  .adventure-resume-run {
    grid-template-columns: 1fr;
    padding-right: 10px;
  }

  .adventure-resume-run > button:last-child {
    grid-column: 1;
    text-align: center;
  }

  .adventure-mode-grid {
    grid-template-columns: 1fr;
  }

  .adventure-difficulty-group > div,
  .adventure-character-options {
    grid-template-columns: 1fr;
  }

  .adventure-difficulty,
  .adventure-character-options button {
    min-height: 66px;
  }

  .adventure-leaderboard-list {
    grid-template-columns: 1fr;
  }

  .adventure-settings {
    padding: 18px;
  }

  .grammar-adventure--play {
    grid-template-rows: auto 4px auto auto auto;
  }

  .adventure-hud {
    position: relative;
    grid-template-columns: minmax(120px, 1fr) 72px 72px auto;
    min-height: 55px;
  }

  .adventure-hud > div {
    padding: 7px 8px;
  }

  .adventure-hud__brand span {
    display: none !important;
  }

  .adventure-hud__brand strong {
    font-size: 0.76rem;
    white-space: normal !important;
  }

  .adventure-hud > div:nth-child(3) {
    display: none;
  }

  .adventure-hud__buttons {
    grid-column: 4;
    gap: 3px;
    padding: 6px !important;
  }

  .adventure-hud__buttons button {
    width: 34px;
    min-height: 34px;
  }

  .adventure-hud__buttons button:first-child {
    display: none;
  }

  .adventure-question {
    grid-template-columns: minmax(0, 1fr) 64px;
    gap: 8px;
    min-height: 116px;
    padding: 9px 12px;
  }

  .adventure-question > div:first-child {
    grid-column: 1;
  }

  .adventure-question > div:first-child strong {
    font-size: 0.73rem;
    -webkit-line-clamp: 2;
  }

  .adventure-sentence {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    font-size: 0.9rem;
    text-align: left;
  }

  .adventure-question-timer {
    grid-column: 2;
    grid-row: 1;
  }

  .adventure-play-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
  }

  .adventure-answers {
    order: 0;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 5px;
  }

  .adventure-answer {
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 7px;
    min-height: 58px;
    padding: 7px;
    border-left-width: 4px;
  }

  .adventure-answer > span {
    width: 26px;
    height: 26px;
    font-size: 0.74rem;
  }

  .adventure-answer strong {
    font-size: 0.74rem;
  }

  .adventure-canvas-shell {
    order: 1;
    width: 100%;
    aspect-ratio: 1.4;
  }

  .adventure-canvas {
    height: 100%;
    min-height: 0;
  }

  .adventure-mobile-controls {
    display: grid;
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(3, 46px);
    justify-content: center;
    gap: 4px;
    padding: 7px 0 max(8px, env(safe-area-inset-bottom));
    background: #11191d;
  }

  .adventure-mobile-controls button {
    width: 48px;
    height: 46px;
    border-color: rgba(255, 255, 255, 0.16);
    background: #253239;
    color: #fff;
    touch-action: manipulation;
  }

  .adventure-world-intro strong,
  .adventure-pause-layer strong {
    font-size: 1.45rem;
  }

  .adventure-feedback {
    max-height: calc(100dvh - 30px);
    overflow: auto;
    padding: 20px;
  }

  .adventure-feedback h2 {
    font-size: 1.45rem;
  }

  .grammar-adventure--finish {
    padding: 0 0 26px;
  }

  .adventure-finish-hero {
    min-height: 420px;
    padding: 240px 20px 30px;
    border-radius: 0;
  }

  .adventure-finish-hero > div {
    top: 15px;
    bottom: auto;
    left: 50%;
    width: 210px;
    transform: translateX(-50%);
  }

  .adventure-finish-hero h2 {
    font-size: 2rem;
  }

  .adventure-finish-stats {
    grid-template-columns: 1fr 1fr;
    margin: 0;
  }

  .adventure-finish-badges,
  .adventure-leaderboard--finish,
  .adventure-finish-actions {
    margin-right: 14px;
    margin-left: 14px;
  }

  .adventure-leaderboard--finish {
    grid-template-columns: 1fr;
  }

  .adventure-finish-actions {
    flex-direction: column;
  }
}

@media (max-width: 390px) {
  .adventure-hud {
    grid-template-columns: minmax(88px, 1fr) 60px 68px 74px;
  }

  .adventure-hud__buttons {
    grid-column: 4;
  }

  .adventure-answer strong {
    font-size: 0.7rem;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

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

.glass-surface {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 246, 244, 0.68)),
    rgba(244, 143, 130, 0.11);
  border: 1px solid rgba(244, 143, 130, 0.22);
  box-shadow: 0 18px 45px rgba(244, 143, 130, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  min-height: 78px;
  padding: 10px clamp(18px, 4vw, 54px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 244, 242, 0.68)),
    rgba(244, 143, 130, 0.12);
  border-bottom: 1px solid rgba(244, 143, 130, 0.24);
  box-shadow: 0 14px 36px rgba(244, 143, 130, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand img {
  width: 154px;
  height: auto;
}

.primary-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  font-size: 0.95rem;
  font-weight: 700;
}

.primary-nav a {
  position: relative;
  text-decoration: none;
  color: #28313b;
  white-space: nowrap;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.header-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--radius);
  font-weight: 800;
  text-decoration: none;
  line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.header-cta {
  padding: 0 20px;
  color: #fff;
  background: var(--brand);
}

.header-cta:hover,
.button:hover {
  transform: translateY(-2px);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
}

.hero {
  position: relative;
  min-height: calc(78vh - 78px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #222;
}

.hero__image,
.hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__image {
  object-fit: cover;
}

.hero__shade {
  background:
    linear-gradient(90deg, rgba(20, 24, 31, 0.78) 0%, rgba(20, 24, 31, 0.48) 46%, rgba(20, 24, 31, 0.16) 100%),
    linear-gradient(0deg, rgba(20, 24, 31, 0.42), rgba(20, 24, 31, 0.1));
}

.hero__content {
  position: relative;
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: 68px 0;
  color: #fff;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--brand-strong);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: #ffd3cd;
}

.hero h1 {
  margin: 0;
  max-width: 690px;
  font-size: clamp(3.4rem, 8vw, 6.8rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.hero__lead {
  max-width: 660px;
  margin: 22px 0 0;
  font-size: clamp(1.12rem, 2.1vw, 1.42rem);
  color: rgba(255, 255, 255, 0.9);
}

.hero__actions,
.online-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.button {
  padding: 0 22px;
}

.button--primary {
  color: #fff;
  background: var(--brand);
}

.button--primary:hover {
  background: var(--brand-strong);
}

.button--secondary {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
}

.section .button--secondary {
  color: var(--ink);
  border-color: var(--line);
  background: var(--paper);
}

.quick-paths {
  width: min(var(--max), calc(100% - 40px));
  margin: -34px auto 0;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.quick-path {
  min-height: 104px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  text-decoration: none;
}

.quick-path.glass-surface {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(255, 246, 244, 0.74)),
    rgba(244, 143, 130, 0.11);
}

.quick-path span,
.course-card__label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.quick-path strong {
  display: block;
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1.25;
}

.section {
  padding: clamp(58px, 8vw, 96px) 0;
}

.section--light {
  background: var(--soft);
}

.section__inner {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.section__heading {
  max-width: 760px;
  margin-bottom: 32px;
}

.section__heading--row {
  max-width: none;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.section h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.section__heading p:not(.eyebrow),
.split__content p,
.online-panel p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1.04rem;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.course-card,
.news-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.course-card {
  display: grid;
  grid-template-rows: 190px 1fr auto;
  box-shadow: 0 14px 36px rgba(29, 42, 56, 0.07);
}

.course-card img,
.news-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--soft);
}

.course-card > div,
.news-card > div {
  padding: 18px;
}

.course-card > div {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 247, 0.92)),
    var(--paper);
}

.course-card h3,
.news-card h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
}

.course-card p,
.news-card p {
  margin: 10px 0 0;
  color: var(--muted);
}

.course-card a {
  margin: 0 18px 18px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.section--split {
  background: var(--paper);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
}

.split__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-teaser {
  background:
    linear-gradient(135deg, rgba(255, 246, 244, 0.74), rgba(245, 248, 251, 0.98)),
    var(--paper);
}

.about-teaser__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
}

.about-teaser__copy p:not(.eyebrow) {
  max-width: 640px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.06rem;
}

.about-teaser__points,
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 24px;
}

.about-teaser__points span,
.stats span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--radius);
  color: #fff;
  font-weight: 800;
}

.about-teaser__points span:nth-child(1),
.stats span:nth-child(1) {
  background: var(--sky);
}

.about-teaser__points span:nth-child(2),
.stats span:nth-child(2) {
  background: var(--mint);
}

.about-teaser__points span:nth-child(3),
.stats span:nth-child(3) {
  background: var(--plum);
}

.about-teaser__points span:nth-child(4),
.stats span:nth-child(4) {
  background: var(--brand-strong);
}

.about-teaser__media {
  position: relative;
  min-height: 420px;
}

.about-teaser__media img {
  width: min(88%, 620px);
  height: 420px;
  margin-left: auto;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: var(--shadow);
}

.about-teaser__badge {
  position: absolute;
  left: 0;
  bottom: 24px;
  width: min(360px, 78%);
  padding: 18px;
  border-radius: var(--radius);
}

.about-teaser__badge strong,
.about-teaser__badge span {
  display: block;
}

.about-teaser__badge strong {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.22;
}

.about-teaser__badge span {
  margin-top: 6px;
  color: var(--muted);
}

.text-link {
  display: inline-flex;
  color: var(--brand-strong);
  font-weight: 900;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

.section--online {
  background: #eef7f6;
}

.online-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
}

.online-panel h2 {
  max-width: 760px;
}

.online-actions {
  justify-content: end;
  margin-top: 0;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.news-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
  min-height: 250px;
}

.about-page {
  background: var(--soft);
}

.about-hero {
  position: relative;
  min-height: clamp(430px, 58vh, 560px);
  display: grid;
  align-items: end;
  overflow: hidden;
  color: #fff;
  background: #20242a;
}

.about-hero__image,
.about-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about-hero__image {
  object-fit: cover;
}

.about-hero__shade {
  background:
    linear-gradient(90deg, rgba(25, 28, 34, 0.84), rgba(25, 28, 34, 0.46) 52%, rgba(25, 28, 34, 0.18)),
    linear-gradient(0deg, rgba(25, 28, 34, 0.38), rgba(25, 28, 34, 0.08));
}

.about-hero__content {
  position: relative;
  width: min(var(--max), calc(100% - 40px));
  min-width: 0;
  margin: 0 auto;
  padding: 92px 0 74px;
}

.about-hero .eyebrow {
  color: #ffd3cd;
}

.about-hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(3rem, 6vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

.about-hero h1 span {
  display: block;
}

.about-hero p:not(.eyebrow) {
  max-width: 680px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.08rem, 2vw, 1.34rem);
}

.about-story {
  background: var(--paper);
}

.about-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
}

.about-story__copy h2 {
  max-width: 760px;
  overflow-wrap: break-word;
}

.about-story__copy h2 span {
  display: block;
}

.about-story__copy p:not(.eyebrow) {
  max-width: 720px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.about-story__lead {
  color: #4d5966;
  font-size: 1.14rem;
}

.about-story__media {
  position: relative;
  min-height: 430px;
}

.about-story__media img {
  width: 100%;
  height: 430px;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: var(--shadow);
}

.about-story__note {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 18px;
  border-radius: var(--radius);
}

.about-story__note strong,
.about-story__note span {
  display: block;
}

.about-story__note strong {
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1.22;
}

.about-story__note span {
  margin-top: 6px;
  color: var(--muted);
}

.about-values {
  background:
    linear-gradient(135deg, rgba(47, 174, 155, 0.08), rgba(255, 246, 244, 0.9)),
    var(--soft);
}

.about-values__intro {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.value-card {
  position: relative;
  min-height: 236px;
  padding: 22px;
  border-radius: var(--radius);
}

.value-card::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--brand);
}

.value-card:nth-child(2)::before {
  background: var(--mint);
}

.value-card:nth-child(3)::before {
  background: var(--sky);
}

.value-card:nth-child(4)::before {
  background: var(--plum);
}

.value-card span {
  display: block;
  color: var(--brand-strong);
  font-size: 0.82rem;
  font-weight: 900;
}

.value-card h3 {
  margin: 14px 0 0;
  font-size: 1.28rem;
  line-height: 1.18;
}

.value-card p {
  margin: 12px 0 0;
  color: var(--muted);
}

.team-section {
  background: var(--paper);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.team-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.team-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--soft);
}

.team-card__body {
  padding: 18px;
}

.team-card h3 {
  margin: 0;
  font-size: 1.34rem;
  line-height: 1.15;
}

.team-card p:not(.course-card__label) {
  margin: 12px 0 0;
  color: var(--muted);
}

.about-cta {
  padding-top: 0;
  background: var(--paper);
}

.about-cta__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  padding: clamp(28px, 5vw, 48px);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(35, 38, 45, 0.92), rgba(64, 128, 184, 0.72)),
    var(--footer);
  color: #fff;
}

.about-cta__panel > div {
  min-width: 0;
}

.about-cta__panel .eyebrow {
  color: #ffd3cd;
}

.about-cta__panel h2 {
  max-width: 680px;
  overflow-wrap: break-word;
}

.about-cta__panel p:not(.eyebrow) {
  max-width: 620px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.76);
}

.about-cta__panel .button--secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.1);
}

.subpage {
  background: var(--soft);
}

.subpage-hero {
  position: relative;
  min-height: clamp(430px, 58vh, 600px);
  display: grid;
  align-items: end;
  overflow: hidden;
  color: #fff;
  background: #20242a;
}

.subpage-hero--compact {
  min-height: clamp(360px, 48vh, 500px);
}

.subpage-hero__image,
.subpage-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.subpage-hero__image {
  object-fit: cover;
}

.subpage-hero__shade {
  background:
    linear-gradient(90deg, rgba(25, 28, 34, 0.84), rgba(25, 28, 34, 0.5) 55%, rgba(25, 28, 34, 0.2)),
    linear-gradient(0deg, rgba(25, 28, 34, 0.42), rgba(25, 28, 34, 0.08));
}

.subpage-hero__content {
  position: relative;
  width: min(var(--max), calc(100% - 40px));
  min-width: 0;
  margin: 0 auto;
  padding: 88px 0 72px;
}

.subpage-hero .eyebrow {
  color: #ffd3cd;
}

.subpage-hero h1 {
  max-width: 860px;
  margin: 0;
  font-size: clamp(2.8rem, 5.8vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

.subpage-hero p:not(.eyebrow) {
  max-width: 700px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.06rem, 2vw, 1.28rem);
}

.subpage-hero .button--secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
}

.section-side-note {
  max-width: 430px;
  margin: 0;
  color: var(--muted);
}

.subject-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.subject-strip article {
  min-height: 118px;
  padding: 22px;
  border-radius: var(--radius);
}

.subject-strip span,
.social-hub__links span,
.contact-detail-card span {
  display: block;
  color: var(--brand-strong);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.subject-strip strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 1.36rem;
  line-height: 1.15;
}

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

.offer-card,
.update-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.offer-card img,
.update-card img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  background: var(--soft);
}

.offer-card__body,
.update-card > div {
  padding: 20px;
}

.offer-card h3,
.update-card h3 {
  margin: 0;
  font-size: 1.34rem;
  line-height: 1.16;
}

.offer-card p:not(.course-card__label),
.update-card p:not(.course-card__label) {
  margin: 12px 0 0;
  color: var(--muted);
}

.offer-card .text-link {
  margin-top: 16px;
}

.process-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.process-grid p:not(.eyebrow),
.social-hub p,
.pricing-info p {
  color: var(--muted);
}

.process-steps {
  display: grid;
  gap: 14px;
}

.process-steps article {
  min-height: 128px;
  padding: 20px;
  border-radius: var(--radius);
}

.process-steps span {
  display: block;
  color: var(--brand-strong);
  font-weight: 900;
}

.process-steps strong,
.social-hub__links strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.2;
}

.process-steps p {
  margin: 10px 0 0;
  color: var(--muted);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  min-height: 480px;
  padding: 22px;
  border-radius: var(--radius);
}

.pricing-card--featured {
  border-color: rgba(47, 174, 155, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(242, 252, 250, 0.72)),
    rgba(47, 174, 155, 0.08);
}

.pricing-card__head h3 {
  margin: 0;
  font-size: 1.24rem;
  line-height: 1.16;
}

.pricing-card__price {
  margin: 20px 0 0;
}

.pricing-card__price strong {
  display: block;
  color: var(--ink);
  font-size: clamp(2.1rem, 3vw, 3.1rem);
  line-height: 1;
}

.pricing-card__price span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 800;
}

.pricing-card ul {
  margin: 22px 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
  color: var(--muted);
}

.pricing-card li {
  padding-left: 14px;
  border-left: 3px solid rgba(244, 143, 130, 0.42);
}

.pricing-card__note {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.95rem;
}

.pricing-card .button {
  width: 100%;
  margin-top: auto;
}

.pricing-info {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(28px, 5vw, 56px);
}

.info-list {
  display: grid;
  gap: 14px;
}

.info-list article {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.info-list strong {
  color: var(--ink);
  font-size: 1.08rem;
}

.info-list p {
  margin: 8px 0 0;
}

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

.social-hub {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.social-hub h2 {
  max-width: 700px;
}

.social-hub__links {
  display: grid;
  gap: 14px;
}

.social-hub__links a {
  min-height: 104px;
  padding: 20px;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(290px, 0.58fr);
  gap: 18px;
  align-items: start;
}

.contact-form-panel {
  padding: clamp(24px, 4vw, 38px);
  border-radius: var(--radius);
}

.contact-form-panel h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.05;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.contact-form label {
  min-width: 0;
}

.contact-form label > span {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(244, 143, 130, 0.24);
  border-radius: var(--radius);
  padding: 11px 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  font: inherit;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 3px solid rgba(244, 143, 130, 0.22);
  border-color: var(--brand);
}

.contact-form__wide {
  grid-column: 1 / -1;
}

.contact-form__check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.contact-form__check input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin-top: 4px;
}

.contact-form__check span {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.contact-form__status {
  min-height: 24px;
  margin: -4px 0 0;
  color: var(--brand-strong);
  font-weight: 800;
}

.contact-details {
  display: grid;
  gap: 14px;
}

.contact-detail-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.contact-detail-card a,
.contact-detail-card strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 900;
  text-decoration: none;
}

.contact-detail-card p {
  margin: 8px 0 0;
  color: var(--muted);
}

.contact-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.contact-socials a {
  min-height: 36px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
}

.site-footer {
  background: var(--footer);
  color: #fff;
}

.footer__inner {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: 56px 0;
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) repeat(3, minmax(160px, 0.75fr));
  gap: 34px;
}

.footer__brand img {
  width: 165px;
  height: auto;
  padding: 8px;
  border-radius: var(--radius);
  background: #fff;
}

.footer__brand p {
  max-width: 330px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.72);
}

.footer__nav,
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-style: normal;
}

.footer__nav h2,
.footer__contact h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 1rem;
}

.footer__nav a,
.footer__contact a,
.footer__contact span {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.footer__nav a:hover,
.footer__contact a:hover {
  color: #fff;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.social-links a {
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
}

.footer__bottom {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: 18px 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
}

.footer__bottom a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.knowledge-page {
  background: #f7fafc;
}

.knowledge-hero {
  position: relative;
  min-height: 440px;
  display: grid;
  align-items: center;
  padding: 72px 0;
  background:
    linear-gradient(90deg, rgba(247, 250, 252, 0.94), rgba(255, 243, 240, 0.84)),
    url("../images/background.webp") center / cover;
}

.knowledge-hero__inner {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.36fr);
  gap: 18px;
  align-items: stretch;
}

.knowledge-hero__copy,
.knowledge-hero__stats > div,
.knowledge-toolbar,
.knowledge-empty {
  border-radius: var(--radius);
}

.knowledge-hero__copy {
  padding: clamp(28px, 5%, 54px);
}

.knowledge-hero h1 {
  margin: 0;
  max-width: 780px;
  font-size: clamp(2.8rem, 4.8rem, 4.8rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.knowledge-hero p:not(.eyebrow) {
  max-width: 680px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.16rem;
}

.knowledge-hero__stats {
  display: grid;
  gap: 18px;
}

.knowledge-hero__stats > div {
  padding: 24px;
  display: grid;
  align-content: center;
}

.knowledge-hero__stats strong {
  display: block;
  color: var(--ink);
  font-size: 1.55rem;
  line-height: 1.1;
}

.knowledge-hero__stats span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 700;
}

.knowledge-browser {
  padding: 34px 0 64px;
}

.knowledge-toolbar {
  padding: 18px;
  margin-bottom: 16px;
}

.knowledge-toolbar__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.knowledge-toolbar h2 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
}

.knowledge-toolbar__head p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.search-field {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.search-field span,
.filter-group > span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.search-field input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(244, 143, 130, 0.3);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font: inherit;
  outline: none;
}

.search-field input:focus {
  border-color: var(--brand-strong);
  box-shadow: 0 0 0 3px rgba(244, 143, 130, 0.16);
}

.filter-groups {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 16px;
}

.filter-group {
  display: grid;
  gap: 9px;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(42, 49, 58, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.filter-chip[aria-pressed="true"] {
  color: #fff;
  border-color: var(--brand-strong);
  background: var(--brand-strong);
}

.knowledge-grid {
  display: grid;
  gap: 34px;
}

.knowledge-section {
  display: grid;
  gap: 24px;
  padding-top: 30px;
  border-top: 1px solid rgba(244, 143, 130, 0.18);
}

.knowledge-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.knowledge-section__head {
  padding: 0;
}

.knowledge-section__head h2 {
  position: relative;
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 2.25rem;
  line-height: 1.1;
}

.knowledge-section__head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.14em;
  bottom: 0.12em;
  width: 5px;
  border-radius: 999px;
  background: var(--brand);
}

.knowledge-section__featured {
  display: grid;
}

.knowledge-feature-card {
  --card-glow: rgba(244, 143, 130, 0.15);
  --card-marker: linear-gradient(135deg, #69b7ff, #3374c8);
  position: relative;
  overflow: hidden;
  min-height: 152px;
  padding: 28px 24px;
  border: 1px solid rgba(244, 143, 130, 0.28);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 240, 237, 0.52)),
    rgba(244, 143, 130, 0.08);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 16px 40px rgba(244, 143, 130, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.knowledge-feature-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), rgba(244, 143, 130, 0.34));
}

.knowledge-feature-card:hover,
.knowledge-card:hover {
  border-color: rgba(220, 109, 98, 0.42);
  box-shadow: 0 18px 38px rgba(244, 143, 130, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  transform: translateY(-1px);
}

.knowledge-feature-card__marker {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: var(--card-marker);
  box-shadow: 0 0 0 5px var(--card-glow), 0 7px 16px rgba(51, 116, 200, 0.22);
}

.knowledge-feature-card__marker::before {
  content: "";
  width: 14px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 3px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)) 50% 0 / 2px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)) 0 50% / 100% 2px no-repeat;
}

.knowledge-feature-card__title {
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.16;
}

.knowledge-section__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(410px, 1fr));
  align-items: start;
  gap: 26px;
}

.knowledge-group {
  --group-accent: var(--brand-strong);
  --group-border: rgba(244, 143, 130, 0.2);
  --group-soft: rgba(244, 143, 130, 0.07);
  position: relative;
  overflow: hidden;
  padding: 26px 28px 28px;
  border: 1px solid var(--group-border);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 249, 248, 0.74)),
    var(--group-soft);
  box-shadow: 0 16px 36px rgba(29, 42, 56, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.knowledge-group::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--group-accent), transparent);
}

.knowledge-group > h3 {
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--group-border);
  color: var(--group-accent);
  font-size: 1.52rem;
  line-height: 1.15;
  text-align: center;
}

.knowledge-group > h3::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin: 13px auto 0;
  border-radius: 999px;
  background: var(--group-accent);
  opacity: 0.72;
}

.knowledge-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.knowledge-card {
  --card-accent: var(--brand-strong);
  --card-glow: rgba(244, 143, 130, 0.15);
  --card-marker: linear-gradient(135deg, #ffb199, #dc6d62);
  min-height: 126px;
  padding: 18px 16px;
  border: 1px solid rgba(244, 143, 130, 0.18);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  gap: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 246, 244, 0.56)),
    rgba(255, 255, 255, 0.58);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(29, 42, 56, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.knowledge-card:hover {
  border-color: var(--card-accent);
  box-shadow: 0 16px 30px var(--card-glow), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.knowledge-card__marker {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--card-marker);
  box-shadow: 0 0 0 5px var(--card-glow), inset 0 2px 4px rgba(255, 255, 255, 0.42), 0 6px 14px rgba(29, 42, 56, 0.16);
}

.knowledge-card__title {
  min-width: 0;
  font-size: 1.14rem;
  font-weight: 900;
  line-height: 1.16;
}

.knowledge-group--present {
  --group-accent: #25a866;
  --group-border: rgba(37, 168, 102, 0.2);
  --group-soft: rgba(37, 168, 102, 0.06);
}

.knowledge-group--past {
  --group-accent: #3c334a;
  --group-border: rgba(60, 51, 74, 0.18);
  --group-soft: rgba(60, 51, 74, 0.05);
}

.knowledge-group--future {
  --group-accent: #2f6ec8;
  --group-border: rgba(47, 110, 200, 0.19);
  --group-soft: rgba(47, 110, 200, 0.06);
}

.knowledge-group--future-past {
  --group-accent: #6d4ac0;
  --group-border: rgba(109, 74, 192, 0.2);
  --group-soft: rgba(109, 74, 192, 0.06);
}

.knowledge-group--contrast {
  --group-accent: #dc6d62;
  --group-border: rgba(220, 109, 98, 0.22);
  --group-soft: rgba(220, 109, 98, 0.06);
}

.knowledge-group--basic {
  --group-accent: #2fae9b;
  --group-border: rgba(47, 174, 155, 0.2);
  --group-soft: rgba(47, 174, 155, 0.06);
}

.knowledge-card--table {
  --card-accent: #3374c8;
  --card-glow: rgba(51, 116, 200, 0.16);
  --card-marker: linear-gradient(135deg, #69b7ff, #3374c8);
}

.knowledge-card--present {
  --card-accent: #25a866;
  --card-glow: rgba(37, 168, 102, 0.16);
  --card-marker: linear-gradient(135deg, #7ce3ad, #25a866);
}

.knowledge-card--past {
  --card-accent: #3c334a;
  --card-glow: rgba(60, 51, 74, 0.15);
  --card-marker: linear-gradient(135deg, #756d85, #332b3f);
}

.knowledge-card--future {
  --card-accent: #2f6ec8;
  --card-glow: rgba(47, 110, 200, 0.16);
  --card-marker: linear-gradient(135deg, #6bb7ff, #2f6ec8);
}

.knowledge-card--future-past {
  --card-accent: #6d4ac0;
  --card-glow: rgba(109, 74, 192, 0.16);
  --card-marker: linear-gradient(135deg, #a987ee, #6d4ac0);
}

.knowledge-card--contrast {
  --card-accent: #dc6d62;
  --card-glow: rgba(220, 109, 98, 0.16);
  --card-marker: linear-gradient(135deg, #ffb199, #dc6d62);
}

.knowledge-card--basic {
  --card-accent: #2fae9b;
  --card-glow: rgba(47, 174, 155, 0.16);
  --card-marker: linear-gradient(135deg, #7ce3d3, #2fae9b);
}

.knowledge-feature-card:focus-visible,
.knowledge-card:focus-visible {
  outline: 3px solid rgba(244, 143, 130, 0.32);
  outline-offset: 2px;
}

.knowledge-empty {
  margin: 16px 0 0;
  padding: 22px;
  color: var(--muted);
  font-weight: 800;
}

.grammar-topic-page {
  background: #f7fafc;
}

.grammar-hero {
  position: relative;
  padding: 28px 0 34px;
  background:
    linear-gradient(90deg, rgba(247, 250, 252, 0.95), rgba(255, 242, 239, 0.86)),
    url("../images/background.webp") center / cover;
}

.grammar-hero__inner,
.grammar-article__inner {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 800;
}

.breadcrumb a {
  color: var(--brand-strong);
  text-decoration: none;
}

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

.breadcrumb span::before {
  content: "/";
  margin-right: 8px;
  color: rgba(42, 49, 58, 0.34);
}

.grammar-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: 18px;
  align-items: stretch;
}

.grammar-hero__copy,
.grammar-rule-card {
  border-radius: var(--radius);
}

.grammar-hero__copy {
  padding: clamp(22px, 4vw, 40px);
}

.grammar-hero h1 {
  max-width: 760px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.45rem, 4.8vw, 4.25rem);
  line-height: 0.96;
}

.grammar-hero__copy > p:not(.eyebrow) {
  max-width: 720px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.grammar-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.grammar-rule-card {
  padding: 22px;
  display: grid;
  align-content: center;
  gap: 10px;
}

.grammar-rule-card__label,
.formula-card__label,
.next-card span,
.mistake-list__bad,
.mistake-list__good {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.grammar-rule-card__label {
  color: var(--brand-strong);
}

.grammar-rule-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.28rem;
  line-height: 1.14;
}

.grammar-rule-card p {
  margin: 0;
  color: var(--muted);
}

.grammar-article {
  padding: 30px 0 64px;
}

.grammar-article__inner {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.grammar-toc {
  position: sticky;
  top: 102px;
  padding: 18px;
  border-radius: var(--radius);
  display: grid;
  gap: 8px;
}

.grammar-toc .eyebrow {
  margin: 0 0 4px;
}

.grammar-toc a {
  padding: 9px 10px;
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 850;
  text-decoration: none;
}

.grammar-toc a:hover {
  color: var(--brand-strong);
  background: rgba(244, 143, 130, 0.1);
}

.grammar-content {
  display: grid;
  gap: 30px;
}

.grammar-section {
  scroll-margin-top: 110px;
}

.grammar-section__head {
  margin-bottom: 13px;
}

.grammar-section__head .eyebrow {
  margin-bottom: 8px;
}

.grammar-section__head h2 {
  max-width: 760px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.55rem, 2.55vw, 2.1rem);
  line-height: 1.08;
}

.formula-grid,
.usage-grid,
.rules-grid,
.next-grid,
.mistake-list {
  display: grid;
  gap: 12px;
}

.formula-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.formula-card,
.rule-tile,
.usage-card,
.grammar-note,
.next-card,
.mistake-list article {
  border: 1px solid rgba(244, 143, 130, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 246, 244, 0.52)),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 30px rgba(29, 42, 56, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.formula-card {
  padding: 16px;
  display: grid;
  grid-template-rows: auto 38px minmax(112px, auto) 1fr;
  align-items: start;
  gap: 10px;
}

.formula-card__label {
  color: var(--brand-strong);
}

.formula-card h3,
.rule-tile h3,
.usage-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.04rem;
  line-height: 1.16;
}

.formula {
  min-height: 112px;
  margin: 0;
  padding: 12px;
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  gap: 6px 8px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 850;
  line-height: 1.28;
}

.hl-person,
.hl-verb,
.hl-aux,
.hl-note {
  padding: 2px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.hl-person {
  color: #1f6d5f;
  background: rgba(47, 174, 155, 0.13);
}

.hl-verb {
  color: #245fba;
  background: rgba(64, 128, 184, 0.13);
}

.hl-aux {
  color: #674394;
  background: rgba(115, 85, 160, 0.13);
}

.hl-note {
  color: var(--brand-strong);
  background: rgba(244, 143, 130, 0.13);
}

.example-stack {
  display: grid;
  gap: 7px;
}

.example-stack p,
.mini-example {
  margin: 0;
  color: var(--muted);
}

.example-stack p {
  padding-left: 12px;
  border-left: 3px solid rgba(244, 143, 130, 0.36);
}

.rules-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.rule-tile,
.usage-card {
  padding: 15px;
}

.rule-tile p,
.usage-card p {
  margin: 8px 0 0;
  color: var(--muted);
}

.mini-example {
  font-weight: 850;
}

.grammar-note {
  margin-top: 14px;
  padding: 16px;
}

.grammar-note > strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
}

.grammar-note p {
  margin: 8px 0 0;
  color: var(--muted);
}

.grammar-note a {
  display: inline-flex;
  margin-top: 12px;
  color: var(--brand-strong);
  font-weight: 900;
  text-decoration: none;
}

.grammar-note a:hover {
  text-decoration: underline;
}

.grammar-note--soft {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(242, 252, 250, 0.6)),
    rgba(47, 174, 155, 0.06);
  border-color: rgba(47, 174, 155, 0.18);
}

.usage-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.usage-card {
  border-color: rgba(64, 128, 184, 0.16);
}

.keyword-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.keyword-grid span {
  padding: 9px 12px;
  border: 1px solid rgba(42, 49, 58, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-weight: 850;
}

.mistake-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mistake-list article {
  padding: 15px;
}

.mistake-list article p {
  margin: 6px 0 12px;
  color: var(--muted);
}

.mistake-list article p:last-child {
  margin-bottom: 0;
}

.mistake-list__bad {
  color: #b84b43;
}

.mistake-list__good {
  color: #1f8b57;
}

.next-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.next-card {
  padding: 16px;
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.next-card:hover {
  border-color: rgba(220, 109, 98, 0.38);
  box-shadow: 0 16px 34px rgba(244, 143, 130, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transform: translateY(-1px);
}

.next-card span {
  color: var(--brand-strong);
}

.next-card strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 1.04rem;
  line-height: 1.14;
}

.next-card p {
  margin: 10px 0 0;
  color: var(--muted);
}

.exercise-card {
  border-color: rgba(47, 174, 155, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(242, 252, 250, 0.58)),
    rgba(47, 174, 155, 0.06);
}

.exercise-card span {
  color: #2b9b8b;
}

.exercise-card:hover {
  border-color: rgba(47, 174, 155, 0.38);
  box-shadow: 0 16px 34px rgba(47, 174, 155, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.exercise-catalog-page .knowledge-browser {
  padding-bottom: 42px;
}

.exercise-catalog-hero {
  background:
    linear-gradient(90deg, rgba(247, 250, 252, 0.94), rgba(240, 252, 249, 0.82)),
    url("../images/background.webp") center / cover;
}

.exercise-filter-groups {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.exercise-catalog-group .knowledge-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.exercise-catalog-card {
  position: relative;
  min-height: 126px;
  padding: 40px 16px 16px;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
}

.exercise-catalog-card.is-planned,
.exercise-catalog-feature.is-planned {
  cursor: default;
  opacity: 0.92;
}

.exercise-catalog-card.is-planned:hover,
.exercise-catalog-feature.is-planned:hover {
  border-color: rgba(42, 49, 58, 0.12);
  box-shadow: 0 10px 24px rgba(29, 42, 56, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transform: none;
}

.exercise-catalog-card__status {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 5px;
  background: rgba(42, 49, 58, 0.07);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.exercise-catalog-card.is-ready .exercise-catalog-card__status,
.exercise-catalog-feature.is-ready .exercise-catalog-card__status {
  background: rgba(47, 174, 155, 0.12);
  color: #227d70;
}

.exercise-catalog-feature {
  padding-top: 42px;
}

.math-task-section {
  padding: 14px 0 72px;
  background:
    linear-gradient(180deg, rgba(247, 250, 252, 0), rgba(238, 249, 247, 0.72));
}

.math-task-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.math-task-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 220px;
  padding: 18px;
  border-radius: var(--radius);
}

.math-task-card span {
  width: max-content;
  min-height: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(47, 174, 155, 0.12);
  color: #227d70;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.math-task-card strong {
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.15;
}

.math-task-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.math-task-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
}

.math-task-card small {
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid rgba(42, 49, 58, 0.1);
  border-radius: var(--radius);
  color: var(--muted);
  font-weight: 850;
}

.exercise-page {
  background:
    linear-gradient(180deg, rgba(245, 251, 252, 0.94), rgba(255, 248, 247, 0.84) 58%, rgba(255, 255, 255, 1));
}

.exercise-hero {
  padding: 34px 0 24px;
  background:
    linear-gradient(135deg, rgba(255, 246, 244, 0.9), rgba(238, 249, 247, 0.78)),
    var(--soft);
  border-bottom: 1px solid rgba(244, 143, 130, 0.18);
}

.exercise-hero__inner,
.exercise-section__inner {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.exercise-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.8fr);
  gap: 18px;
  align-items: stretch;
}

.exercise-hero__copy,
.exercise-side-note,
.exercise-panel,
.exercise-question,
.exercise-results {
  border-radius: var(--radius);
}

.exercise-hero__copy {
  padding: 30px;
}

.exercise-hero h1 {
  margin: 0;
  font-size: 3.1rem;
  line-height: 1.02;
  letter-spacing: 0;
}

.exercise-hero__copy > p:not(.eyebrow) {
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.exercise-side-note {
  padding: 24px;
  display: grid;
  align-content: center;
}

.exercise-side-note span {
  color: var(--brand-strong);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.exercise-side-note p {
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 750;
}

.exercise-section {
  padding: 28px 0 72px;
}

.exercise-shell {
  display: grid;
  gap: 18px;
}

.exercise-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.exercise-panel {
  padding: 24px;
}

.exercise-panel h2,
.exercise-results h2 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.08;
  letter-spacing: 0;
}

.exercise-panel > p:not(.eyebrow),
.exercise-results > p {
  margin: 12px 0 0;
  color: var(--muted);
}

.exercise-control-group {
  margin-top: 22px;
}

.exercise-control-label {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
}

.exercise-mode-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.exercise-mode-toolbar .exercise-control-label {
  margin: 0;
}

.exercise-mode-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.exercise-mode-tools button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(42, 49, 58, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}

.exercise-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.exercise-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.exercise-activity {
  min-height: 132px;
  padding: 15px;
  border: 1px solid rgba(42, 49, 58, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.exercise-activity:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 174, 155, 0.36);
}

.exercise-activity[aria-pressed="true"] {
  border-color: rgba(220, 109, 98, 0.56);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 235, 232, 0.72)),
    rgba(244, 143, 130, 0.16);
  box-shadow: 0 12px 28px rgba(244, 143, 130, 0.14);
}

.exercise-activity__tag {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-strong);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.exercise-activity strong {
  display: block;
  line-height: 1.12;
}

.exercise-activity > span:last-child {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.exercise-mode,
.exercise-count {
  border: 1px solid rgba(42, 49, 58, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.exercise-mode {
  min-height: 112px;
  padding: 14px;
  text-align: left;
}

.exercise-mode__topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.exercise-mode__check {
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(42, 49, 58, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
}

.exercise-mode[aria-pressed="true"] .exercise-mode__check {
  border-color: var(--brand-strong);
  background: var(--brand-strong);
}

.exercise-mode[aria-pressed="true"] .exercise-mode__check::after {
  position: absolute;
  top: 4px;
  left: 7px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  content: "";
  transform: rotate(45deg);
}

.exercise-mode:hover,
.exercise-count:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 174, 155, 0.36);
}

.exercise-mode[aria-pressed="true"],
.exercise-count[aria-pressed="true"] {
  border-color: rgba(220, 109, 98, 0.56);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 235, 232, 0.76)),
    rgba(244, 143, 130, 0.18);
  box-shadow: 0 12px 28px rgba(244, 143, 130, 0.16);
}

.exercise-mode__name {
  display: block;
  font-weight: 900;
  line-height: 1.15;
}

.exercise-mode__description {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.exercise-selection-summary {
  min-height: 24px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.exercise-selection-summary strong {
  color: var(--ink);
}

.exercise-count-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.exercise-count {
  min-height: 46px;
  font-weight: 900;
}

.exercise-count--all {
  padding: 0 8px;
  line-height: 1.05;
}

.exercise-count--all span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.7rem;
}

.exercise-mode:disabled,
.exercise-count:disabled,
.exercise-start:disabled,
.exercise-answer-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
  transform: none;
}

.exercise-start {
  width: 100%;
  margin-top: 24px;
}

.exercise-guide {
  display: grid;
  gap: 10px;
}

.exercise-guide-item {
  padding: 16px;
  border: 1px solid rgba(47, 174, 155, 0.16);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(242, 252, 250, 0.62)),
    rgba(47, 174, 155, 0.06);
}

.exercise-guide-item span {
  color: #2b9b8b;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.exercise-guide-item strong {
  display: block;
  margin-top: 4px;
  line-height: 1.15;
}

.exercise-guide-item p {
  margin: 8px 0 0;
  color: var(--muted);
}

.exercise-guide-item .mini-example {
  color: var(--ink);
}

.exercise-session-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: min(880px, 100%);
  margin: 0 auto;
}

.exercise-session-head--wide {
  width: min(1040px, 100%);
}

.exercise-session-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(42, 49, 58, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}

.exercise-session-back:hover {
  border-color: rgba(244, 143, 130, 0.5);
  background: rgba(255, 246, 244, 0.96);
  color: var(--brand-strong);
}

.exercise-session-back > span:first-child {
  font-size: 1.15rem;
  line-height: 1;
}

.exercise-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 12px;
  align-items: center;
  width: min(880px, 100%);
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.exercise-progress__bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(32, 36, 42, 0.08);
}

.exercise-progress__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint), var(--brand));
  transition: width 220ms ease;
}

.exercise-question {
  width: min(880px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.exercise-question__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
}

.exercise-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(47, 174, 155, 0.12);
  color: #227d70;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.exercise-badge--hidden {
  background: rgba(115, 85, 160, 0.1);
  color: var(--plum);
}

.exercise-badge--review {
  background: rgba(244, 143, 130, 0.14);
  color: var(--brand-strong);
}

.exercise-meta-note {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.exercise-context {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(244, 143, 130, 0.22);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 246, 244, 0.7)),
    rgba(244, 143, 130, 0.08);
}

.exercise-context span {
  color: var(--brand-strong);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.exercise-context p {
  margin: 6px 0 0;
  color: var(--ink);
  font-weight: 750;
}

.exercise-sentence {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.exercise-sentence__line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 96px;
  padding: 18px;
  border: 1px solid rgba(115, 85, 160, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  font-size: 1.18rem;
  font-weight: 850;
  line-height: 1.55;
}

.exercise-gap-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-width: 100%;
}

.exercise-punctuation {
  margin-left: -6px;
}

.exercise-gap {
  width: 220px;
  max-width: min(100%, 72vw);
  min-height: 44px;
  border: 1px solid rgba(115, 85, 160, 0.28);
  border-radius: var(--radius);
  padding: 0 12px;
  background: rgba(247, 243, 252, 0.82);
  color: var(--plum);
  font: inherit;
  font-weight: 900;
  outline: 0;
}

.exercise-gap:focus {
  border-color: rgba(220, 109, 98, 0.58);
  box-shadow: 0 0 0 4px rgba(244, 143, 130, 0.12);
}

.exercise-gap.is-correct {
  border-color: rgba(47, 174, 155, 0.62);
  background: rgba(232, 248, 245, 0.86);
  color: #227d70;
}

.exercise-gap.is-wrong {
  border-color: rgba(184, 75, 67, 0.58);
  background: rgba(255, 239, 237, 0.86);
  color: #9e3f38;
}

.exercise-hint {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 850;
}

.exercise-next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.exercise-next[hidden] {
  display: none;
}

.exercise-next kbd {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(42, 49, 58, 0.16);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 900;
}

.exercise-answer-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(140px, 0.8fr) minmax(140px, 0.8fr);
  gap: 10px;
}

.exercise-answer-actions[hidden] {
  display: none;
}

.exercise-answer-actions .button,
.exercise-reveal {
  width: 100%;
}

.exercise-reveal {
  min-height: 46px;
  border: 1px solid rgba(42, 49, 58, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.68);
  color: var(--muted);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.exercise-hint-panel {
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 4px solid var(--plum);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(247, 243, 252, 0.72);
  color: var(--ink);
}

.exercise-hint-panel p {
  margin: 5px 0 0;
  color: var(--muted);
}

.exercise-feedback {
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(42, 49, 58, 0.1);
}

.exercise-feedback:focus {
  outline: 0;
}

.exercise-feedback strong,
.exercise-feedback span {
  font-weight: 900;
}

.exercise-feedback p {
  margin: 8px 0 0;
}

.exercise-feedback.is-correct {
  background: rgba(232, 248, 245, 0.88);
  border-color: rgba(47, 174, 155, 0.28);
  color: #1f725e;
}

.exercise-feedback.is-wrong {
  background: rgba(255, 239, 237, 0.88);
  border-color: rgba(184, 75, 67, 0.24);
  color: #8f3d36;
}

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

.exercise-feedback__header > strong {
  color: var(--ink);
  font-size: 1.08rem;
}

.exercise-feedback__label,
.exercise-feedback__section > span,
.exercise-answer-comparison span {
  font-size: 0.75rem;
  text-transform: uppercase;
}

.exercise-feedback__lead {
  color: var(--ink);
  font-weight: 750;
}

.exercise-answer-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  margin-top: 14px;
  border-top: 1px solid rgba(143, 61, 54, 0.14);
  border-bottom: 1px solid rgba(143, 61, 54, 0.14);
}

.exercise-answer-comparison > div {
  min-width: 0;
  padding: 13px 0;
}

.exercise-answer-comparison > div + div {
  padding-left: 18px;
  border-left: 1px solid rgba(143, 61, 54, 0.14);
}

.exercise-answer-comparison strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.exercise-feedback__section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid currentColor;
  border-color: rgba(42, 49, 58, 0.1);
}

.exercise-feedback__section p {
  color: var(--ink);
}

.exercise-feedback__detected {
  color: var(--muted) !important;
  font-size: 0.9rem;
}

.exercise-choice-stage {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.exercise-choice-gap {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px dashed rgba(115, 85, 160, 0.38);
  border-radius: var(--radius);
  background: rgba(247, 243, 252, 0.72);
  color: var(--plum);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.exercise-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.exercise-choice {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 76px;
  padding: 12px;
  border: 1px solid rgba(42, 49, 58, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.exercise-choice:hover {
  transform: translateY(-1px);
  border-color: rgba(115, 85, 160, 0.34);
}

.exercise-choice:disabled {
  cursor: default;
  opacity: 1;
}

.exercise-choice__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: rgba(115, 85, 160, 0.1);
  color: var(--plum);
  font-weight: 950;
}

.exercise-choice strong {
  overflow-wrap: anywhere;
}

.exercise-choice.is-correct {
  border-color: rgba(47, 174, 155, 0.62);
  background: rgba(232, 248, 245, 0.9);
  color: #227d70;
}

.exercise-choice.is-wrong {
  border-color: rgba(184, 75, 67, 0.52);
  background: rgba(255, 239, 237, 0.9);
  color: #9e3f38;
}

.exercise-question--matching {
  width: min(1040px, 100%);
}

.exercise-matching-instruction {
  margin: 14px 0 0;
  color: var(--muted);
  font-weight: 750;
}

.exercise-matching-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 14px;
  align-items: start;
  margin-top: 16px;
}

.exercise-match-contexts {
  display: grid;
  gap: 10px;
}

.exercise-match-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  min-height: 118px;
  padding: 14px;
  border: 1px solid rgba(42, 49, 58, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: default;
}

.exercise-match-card.is-selected {
  border-color: rgba(115, 85, 160, 0.52);
  box-shadow: 0 0 0 4px rgba(115, 85, 160, 0.08);
}

.exercise-match-card.is-assigned {
  background: rgba(247, 243, 252, 0.72);
}

.exercise-match-card.is-correct {
  border-color: rgba(47, 174, 155, 0.5);
  background: rgba(232, 248, 245, 0.84);
}

.exercise-match-card.is-wrong {
  border-color: rgba(184, 75, 67, 0.42);
  background: rgba(255, 239, 237, 0.84);
}

.exercise-match-card:disabled {
  cursor: default;
  opacity: 1;
}

.exercise-match-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  background: rgba(244, 143, 130, 0.14);
  color: var(--brand-strong);
  font-weight: 950;
}

.exercise-match-card__content,
.exercise-match-card__content > span {
  display: block;
}

.exercise-match-card__content > strong {
  display: block;
  line-height: 1.35;
}

.exercise-match-card__sentence {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.exercise-match-drop {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 172px;
  min-height: 42px;
  padding: 7px 13px;
  border: 2px dashed rgba(115, 85, 160, 0.38);
  border-radius: 8px;
  background: rgba(247, 243, 252, 0.82);
  color: var(--plum);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.exercise-match-drop.is-selected {
  border-color: rgba(115, 85, 160, 0.72);
  box-shadow: 0 0 0 4px rgba(115, 85, 160, 0.1);
}

.exercise-match-drop.is-filled {
  border-style: solid;
  border-color: rgba(47, 174, 155, 0.52);
  background: rgba(232, 248, 245, 0.92);
  color: #1f725e;
}

.exercise-match-drop.is-drop-ready {
  border-color: rgba(47, 174, 155, 0.76);
  background: rgba(232, 248, 245, 0.72);
}

.exercise-match-drop.is-drop-ready::after {
  content: "Upuść tutaj";
  position: absolute;
  transform: translateY(34px);
  padding: 3px 7px;
  border-radius: 5px;
  background: #1f725e;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 900;
  pointer-events: none;
}

.exercise-match-drop.is-drag-over {
  border-style: solid;
  border-color: var(--brand);
  background: rgba(255, 239, 237, 0.96);
  color: var(--brand-strong);
  box-shadow: 0 0 0 5px rgba(244, 143, 130, 0.14);
  transform: translateY(-1px);
}

.exercise-match-card__status {
  margin-top: 10px;
  color: var(--brand-strong);
  font-size: 0.82rem;
  font-weight: 900;
}

.exercise-match-card__status[hidden] {
  display: none;
}

.exercise-match-bank {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(47, 174, 155, 0.2);
  border-radius: var(--radius);
  background: rgba(245, 252, 250, 0.94);
  box-shadow: 0 16px 36px rgba(42, 49, 58, 0.1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.exercise-match-bank > span {
  color: #227d70;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.exercise-match-bank button {
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(42, 49, 58, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 150ms ease, transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.exercise-match-bank button.is-used {
  border-color: rgba(115, 85, 160, 0.36);
  background: rgba(239, 233, 248, 0.86);
  color: var(--plum);
  opacity: 0.58;
}

.exercise-match-bank button.is-picked {
  border-color: rgba(47, 174, 155, 0.82);
  background: rgba(226, 247, 243, 0.98);
  color: #176d5e;
  box-shadow: 0 0 0 4px rgba(47, 174, 155, 0.13), 0 9px 20px rgba(42, 49, 58, 0.1);
  opacity: 1;
  transform: translateY(-1px);
}

.exercise-match-bank button:hover,
.exercise-match-bank button:focus-visible {
  border-color: rgba(47, 174, 155, 0.56);
  box-shadow: 0 8px 18px rgba(42, 49, 58, 0.1);
  transform: translateY(-1px);
}

.exercise-match-bank button.is-dragging {
  opacity: 0.24;
  transform: scale(0.98);
}

.exercise-match-bank button:disabled {
  cursor: default;
  opacity: 0.72;
}

.exercise-match-drag-ghost {
  position: fixed;
  z-index: 10020;
  max-width: min(260px, calc(100vw - 28px));
  padding: 10px 15px;
  border: 1px solid rgba(47, 174, 155, 0.46);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(42, 49, 58, 0.24);
  color: #1f725e;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.2;
  pointer-events: none;
  transform: translate(-50%, -135%) rotate(-1deg);
}

.is-matching-drag {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.exercise-match-check {
  width: 100%;
  margin-top: 14px;
}

.exercise-match-check[hidden] {
  display: none;
}

.exercise-match-result {
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--radius);
  outline: 0;
}

.exercise-match-result p {
  margin: 5px 0 0;
}

.exercise-match-result.is-correct {
  border: 1px solid rgba(47, 174, 155, 0.3);
  background: rgba(232, 248, 245, 0.9);
  color: #1f725e;
}

.exercise-match-result.is-wrong {
  border: 1px solid rgba(184, 75, 67, 0.24);
  background: rgba(255, 239, 237, 0.9);
  color: #8f3d36;
}

.exercise-game-result {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.exercise-game-result span {
  padding: 14px;
  border-top: 1px solid rgba(42, 49, 58, 0.1);
  color: var(--muted);
  font-size: 0.84rem;
}

.exercise-game-result strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 1.2rem;
}

.exercise-game-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.exercise-game-badges span {
  padding: 7px 10px;
  border: 1px solid rgba(115, 85, 160, 0.2);
  border-radius: 999px;
  background: rgba(247, 243, 252, 0.78);
  color: var(--plum);
  font-size: 0.8rem;
  font-weight: 900;
}

.grammar-game-intro,
.grammar-game {
  width: min(1100px, 100%);
  margin: 0 auto;
}

body.is-grammar-game-active {
  overflow: hidden;
}

body.is-grammar-game-active .grammar-game-intro,
body.is-grammar-game-active .grammar-game {
  position: fixed;
  inset: 0;
  z-index: 120;
  width: 100%;
  height: 100dvh;
  max-width: none;
  margin: 0;
  overflow: auto;
  border-radius: 0;
}

body.is-grammar-game-active .grammar-game {
  display: grid;
  grid-template-rows: auto 7px minmax(0, 1fr);
}

body.is-grammar-game-active .grammar-game-arena {
  min-height: 0;
  overflow: auto;
}

.grammar-game-intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 24px;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(244, 143, 130, 0.22);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 247, 245, 0.96), rgba(238, 250, 247, 0.94) 62%, rgba(245, 242, 251, 0.94));
  box-shadow: 0 24px 56px rgba(42, 49, 58, 0.12);
}

.grammar-game-exit {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(42, 49, 58, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 850;
  cursor: pointer;
}

.grammar-game-intro__copy {
  align-self: center;
  padding: 28px 0 8px;
}

.grammar-game-intro h2 {
  margin: 0;
  font-size: 3.4rem;
  line-height: 0.98;
  letter-spacing: 0;
}

.grammar-game-intro__copy > p:not(.eyebrow) {
  margin: 16px 0 22px;
  color: var(--muted);
  font-size: 1.04rem;
  font-weight: 720;
}

.grammar-game-preview {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid rgba(42, 49, 58, 0.1);
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.74)),
    repeating-linear-gradient(90deg, rgba(42, 49, 58, 0.07) 0 1px, transparent 1px 25%),
    linear-gradient(180deg, #ecf9f6, #fff2ef);
}

.grammar-game-preview__portals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 34px 18px 0;
}

.grammar-game-preview-portal {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 148px;
  border: 3px solid;
  border-bottom-width: 9px;
  border-radius: 48px 48px 8px 8px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 1.5rem;
}

.grammar-game-preview-portal--1 { border-color: #e7786c; color: #b94e45; }
.grammar-game-preview-portal--2 { border-color: #2fae9b; color: #227d70; }
.grammar-game-preview-portal--3 { border-color: #7355a0; color: #60438b; }
.grammar-game-preview-portal--4 { border-color: #3f7ac8; color: #2d61a6; }

.grammar-game-preview__track {
  position: absolute;
  right: 18px;
  bottom: 56px;
  left: 18px;
  height: 6px;
  background: rgba(42, 49, 58, 0.12);
}

.grammar-game-preview__player {
  position: absolute;
  bottom: 50px;
  left: 9%;
  width: 86px;
  animation: grammar-preview-run 4.8s ease-in-out infinite;
}

.grammar-game-rules {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.grammar-game-rules span {
  padding-top: 12px;
  border-top: 1px solid rgba(42, 49, 58, 0.1);
  color: var(--muted);
  font-size: 0.84rem;
}

.grammar-game-rules strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
}

@keyframes grammar-preview-run {
  0%, 100% { left: 5%; }
  33% { left: 32%; }
  66% { left: 61%; }
}

.grammar-game {
  overflow: hidden;
  border: 1px solid rgba(42, 49, 58, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 26px 60px rgba(42, 49, 58, 0.14);
}

.grammar-game-hud {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 1px;
  align-items: stretch;
  background: rgba(42, 49, 58, 0.08);
}

.grammar-game-hud > div:not(.grammar-game-hud__controls) {
  min-height: 64px;
  padding: 10px 14px;
  border: 0;
  background: rgba(255, 255, 255, 0.94);
}

.grammar-game-hud > div:not(.grammar-game-hud__controls) span,
.grammar-game-hud > div:not(.grammar-game-hud__controls) strong {
  display: block;
}

.grammar-game-hud > div:not(.grammar-game-hud__controls) > span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.grammar-game-hud > div:not(.grammar-game-hud__controls) > strong {
  margin-top: 3px;
  font-size: 1.08rem;
}

.grammar-game-hud__controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(42, 49, 58, 0.08);
}

.grammar-game-hud__controls button {
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.grammar-game-lives strong {
  display: flex !important;
  gap: 5px;
  align-items: center;
  min-height: 20px;
}

.grammar-game-lives strong span {
  width: 18px;
  height: 8px;
  border-radius: 999px;
  background: rgba(42, 49, 58, 0.12);
}

.grammar-game-lives strong span.is-active {
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(244, 143, 130, 0.12);
}

.grammar-game-progress {
  height: 7px;
  background: rgba(42, 49, 58, 0.08);
}

.grammar-game-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--mint), var(--brand), #3f7ac8);
  transition: width 260ms ease;
}

.grammar-game-arena {
  position: relative;
  min-height: 650px;
  padding: 18px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.84)),
    repeating-linear-gradient(90deg, rgba(47, 174, 155, 0.11) 0 1px, transparent 1px 25%);
}

.grammar-game-stage-line {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.grammar-game-context {
  max-width: 820px;
  margin: 12px auto 0;
  padding: 14px 16px;
  border-left: 4px solid var(--brand);
  background: rgba(255, 245, 243, 0.76);
}

.grammar-game-context > span {
  color: var(--brand-strong);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.grammar-game-context p {
  margin: 5px 0 0;
  color: var(--ink);
  font-weight: 800;
}

.grammar-game-sentence {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  max-width: 860px;
  margin: 14px auto 0;
  padding: 14px;
  color: var(--ink);
  font-size: 1.06rem;
  font-weight: 900;
  text-align: center;
}

.grammar-game-blank {
  color: var(--plum);
}

.grammar-game-hint {
  color: var(--muted);
  font-size: 0.9rem;
}

.grammar-game-portals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.grammar-game-portal {
  position: relative;
  min-width: 0;
  min-height: 136px;
  padding: 18px 10px 14px;
  border: 3px solid;
  border-bottom-width: 9px;
  border-radius: 44px 44px 8px 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.grammar-game-portal > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border-radius: 999px;
  color: #fff;
  font-weight: 950;
}

.grammar-game-portal strong {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.18;
}

.grammar-game-portal--1 { border-color: #e7786c; }
.grammar-game-portal--1 > span { background: #d7655a; }
.grammar-game-portal--2 { border-color: #2fae9b; }
.grammar-game-portal--2 > span { background: #278f80; }
.grammar-game-portal--3 { border-color: #7355a0; }
.grammar-game-portal--3 > span { background: #60438b; }
.grammar-game-portal--4 { border-color: #3f7ac8; }
.grammar-game-portal--4 > span { background: #336bb5; }

.grammar-game-portal.is-focused {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(42, 49, 58, 0.18);
}

.grammar-game-portal.is-correct {
  border-color: #24977f;
  background: #e3f8f2;
  box-shadow: 0 0 0 5px rgba(47, 174, 155, 0.14);
}

.grammar-game-portal.is-wrong {
  border-color: #bc5349;
  background: #ffebe8;
  animation: grammar-portal-shake 320ms ease;
}

.grammar-game-portal:disabled {
  cursor: default;
  opacity: 1;
}

@keyframes grammar-portal-shake {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-7px); }
  70% { transform: translateX(7px); }
}

.grammar-game-track {
  position: relative;
  height: 108px;
  margin-top: 8px;
  border-bottom: 5px solid rgba(42, 49, 58, 0.14);
}

.grammar-game-track > span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(42, 49, 58, 0.07);
}

.grammar-game-track > span:nth-child(1) { left: 12.5%; }
.grammar-game-track > span:nth-child(2) { left: 37.5%; }
.grammar-game-track > span:nth-child(3) { left: 62.5%; }
.grammar-game-track > span:nth-child(4) { left: 87.5%; }

.grammar-game-player {
  position: absolute;
  bottom: 0;
  left: 12.5%;
  width: 76px;
  transform: translateX(-50%);
  transition: left 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.grammar-game-player.is-success {
  animation: grammar-player-success 520ms ease;
}

.grammar-game-player.is-failure {
  filter: grayscale(0.45);
  animation: grammar-player-failure 420ms ease;
}

@keyframes grammar-player-success {
  0%, 100% { bottom: 0; }
  50% { bottom: 24px; }
}

@keyframes grammar-player-failure {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  35% { transform: translateX(-50%) rotate(-7deg); }
  70% { transform: translateX(-50%) rotate(7deg); }
}

.grammar-game-explorer {
  display: block;
  width: 100%;
  height: auto;
}

.grammar-game-timer {
  position: relative;
  height: 22px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(42, 49, 58, 0.1);
}

.grammar-game-timer > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2fae9b, #3f7ac8);
}

.grammar-game-timer > span.is-urgent {
  background: #d7655a;
}

.grammar-game-timer strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 0.72rem;
}

.grammar-game-feedback {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  outline: 0;
}

.grammar-game-feedback > span,
.grammar-game-feedback > strong {
  display: block;
}

.grammar-game-feedback > span {
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.grammar-game-feedback > strong {
  margin-top: 3px;
  color: var(--ink);
}

.grammar-game-feedback p {
  margin: 6px 0 0;
}

.grammar-game-feedback.is-correct {
  border: 1px solid rgba(47, 174, 155, 0.28);
  background: rgba(232, 248, 245, 0.92);
  color: #1f725e;
}

.grammar-game-feedback.is-wrong {
  border: 1px solid rgba(184, 75, 67, 0.24);
  background: rgba(255, 239, 237, 0.92);
  color: #8f3d36;
}

.grammar-game-next {
  width: 100%;
  margin-top: 10px;
}

.grammar-game-next[hidden] {
  display: none;
}

.grammar-game-pause-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-content: center;
  padding: 30px;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.grammar-game-pause-layer[hidden] {
  display: none;
}

.grammar-game-pause-layer strong {
  font-size: 1.7rem;
}

.grammar-game-pause-layer p {
  margin: 6px 0 0;
  color: var(--muted);
}

.grammar-game-controls {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid rgba(42, 49, 58, 0.08);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
  text-align: center;
}

.exercise-next {
  margin-top: 12px;
  color: var(--ink);
  border-color: rgba(42, 49, 58, 0.14);
  background: rgba(255, 255, 255, 0.78);
}

.exercise-results {
  width: min(880px, 100%);
  margin: 0 auto;
  padding: 28px;
  text-align: center;
}

.exercise-results > strong {
  display: block;
  margin-top: 6px;
  color: var(--brand-strong);
  font-size: 1.4rem;
}

.exercise-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.exercise-result-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.exercise-result-highlights span {
  padding: 12px;
  border-top: 1px solid rgba(42, 49, 58, 0.1);
  color: var(--muted);
  font-size: 0.84rem;
}

.exercise-result-highlights strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 1.1rem;
}

.exercise-mastery {
  width: min(880px, 100%);
  margin: 0 auto;
}

.exercise-mastery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.exercise-mastery-item {
  padding: 14px;
  border: 1px solid rgba(47, 174, 155, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
}

.exercise-mastery-item > span,
.exercise-mastery-item > strong,
.exercise-mastery-item > small {
  display: block;
}

.exercise-mastery-item > span {
  min-height: 38px;
  color: var(--ink);
  font-weight: 900;
  line-height: 1.15;
}

.exercise-mastery-item > strong {
  margin-top: 8px;
  font-size: 1.2rem;
}

.exercise-mastery-item > small {
  margin-top: 6px;
  color: var(--muted);
  font-weight: 800;
}

.exercise-mastery-bar {
  height: 7px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(42, 49, 58, 0.08);
}

.exercise-mastery-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint), var(--brand));
}

.exercise-summary {
  display: grid;
  gap: 10px;
  width: min(880px, 100%);
  margin: 0 auto;
}

.exercise-summary-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(42, 49, 58, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
}

.exercise-summary-item > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(32, 36, 42, 0.06);
  font-weight: 900;
}

.exercise-summary-item p {
  margin: 6px 0 0;
  color: var(--muted);
}

.exercise-summary-item.is-correct {
  border-color: rgba(47, 174, 155, 0.2);
}

.exercise-summary-item.is-wrong {
  border-color: rgba(184, 75, 67, 0.2);
}

@media (max-width: 860px) {
  .exercise-filter-groups,
  .math-task-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exercise-hero__grid,
  .exercise-layout {
    grid-template-columns: 1fr;
  }

  .exercise-hero h1 {
    font-size: 2.35rem;
  }

  .exercise-mode-grid {
    grid-template-columns: 1fr;
  }

  .exercise-mastery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .exercise-filter-groups,
  .exercise-catalog-group .knowledge-card-grid,
  .math-task-grid {
    grid-template-columns: 1fr;
  }

  .exercise-hero__inner,
  .exercise-section__inner {
    width: min(100% - 24px, var(--max));
  }

  .exercise-hero__copy,
  .exercise-side-note,
  .exercise-panel,
  .exercise-question,
  .exercise-results {
    padding: 18px;
  }

  .exercise-count-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exercise-count--all {
    grid-column: 1 / -1;
  }

  .exercise-progress {
    grid-template-columns: repeat(3, auto);
    gap: 6px;
  }

  .exercise-progress__bar {
    grid-column: 1 / -1;
  }

  .exercise-session-head {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .exercise-session-back {
    width: fit-content;
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.74rem;
  }

  .exercise-next kbd {
    display: none;
  }

  .exercise-mode-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .exercise-mode-tools {
    justify-content: flex-start;
  }

  .exercise-sentence__line {
    min-height: 0;
    padding: 14px;
    font-size: 1.02rem;
  }

  .exercise-gap,
  .exercise-gap-wrap {
    width: 100%;
  }

  .exercise-answer-actions,
  .exercise-answer-comparison,
  .exercise-result-highlights,
  .exercise-mastery-grid {
    grid-template-columns: 1fr;
  }

  .exercise-answer-comparison > div + div {
    padding-left: 0;
    border-top: 1px solid rgba(143, 61, 54, 0.14);
    border-left: 0;
  }

  .exercise-result-actions {
    display: grid;
  }
}

.irregular-toolbar {
  margin-bottom: 16px;
  padding: 16px;
  display: grid;
  gap: 12px;
}

.irregular-toolbar__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.irregular-search {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(244, 143, 130, 0.28);
  border-radius: var(--radius);
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font: inherit;
  font-weight: 750;
  outline: 0;
}

.irregular-search:focus {
  border-color: rgba(220, 109, 98, 0.58);
  box-shadow: 0 0 0 4px rgba(244, 143, 130, 0.12);
}

.irregular-clear {
  min-height: 48px;
  border: 1px solid rgba(42, 49, 58, 0.1);
  border-radius: var(--radius);
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.irregular-count {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.irregular-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(244, 143, 130, 0.18);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 246, 244, 0.5)),
    rgba(255, 255, 255, 0.74);
  box-shadow: 0 18px 40px rgba(29, 42, 56, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.irregular-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}

.irregular-table th,
.irregular-table td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(42, 49, 58, 0.08);
  text-align: left;
}

.irregular-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(255, 246, 244, 0.96);
  color: var(--brand-strong);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.irregular-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.45);
}

.irregular-table tbody tr:hover {
  background: rgba(244, 143, 130, 0.11);
}

.irregular-table tbody tr.is-hidden {
  display: none;
}

.irregular-verb,
.irregular-form {
  color: var(--ink);
  font-weight: 900;
}

.irregular-form {
  color: #245fba;
}

.irregular-meaning {
  color: var(--muted);
  font-weight: 750;
}

.irregular-cards {
  display: none;
  gap: 12px;
}

.irregular-card {
  padding: 16px;
  border: 1px solid rgba(244, 143, 130, 0.2);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 246, 244, 0.54)),
    rgba(255, 255, 255, 0.74);
  box-shadow: 0 12px 30px rgba(29, 42, 56, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.irregular-card[hidden] {
  display: none;
}

.irregular-card h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 1.28rem;
}

.irregular-card dl {
  margin: 0;
  display: grid;
  gap: 8px;
}

.irregular-card div {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 8px;
}

.irregular-card dt {
  color: var(--brand-strong);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.irregular-card dd {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.irregular-empty {
  margin-top: 14px;
  padding: 16px;
  color: var(--muted);
  text-align: center;
}

.irregular-empty[hidden] {
  display: none;
}

.irregular-verbs-page .rules-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.adjective-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(244, 143, 130, 0.18);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 246, 244, 0.5)),
    rgba(255, 255, 255, 0.74);
  box-shadow: 0 18px 40px rgba(29, 42, 56, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.adjective-table {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
}

.adjective-table th,
.adjective-table td {
  padding: 14px;
  border-bottom: 1px solid rgba(42, 49, 58, 0.08);
  text-align: left;
  vertical-align: top;
}

.adjective-table th {
  background: rgba(255, 246, 244, 0.96);
  color: var(--brand-strong);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.adjective-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.45);
}

.adjective-table tbody tr:hover {
  background: rgba(244, 143, 130, 0.11);
}

.grammar-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(244, 143, 130, 0.18);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 246, 244, 0.5)),
    rgba(255, 255, 255, 0.74);
  box-shadow: 0 18px 40px rgba(29, 42, 56, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.grammar-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
}

.grammar-table th,
.grammar-table td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(42, 49, 58, 0.08);
  text-align: left;
  vertical-align: top;
}

.grammar-table th {
  background: rgba(255, 246, 244, 0.96);
  color: var(--brand-strong);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.grammar-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.45);
}

.grammar-table tbody tr:hover {
  background: rgba(244, 143, 130, 0.11);
}

.adjective-mobile-cards {
  display: none;
  gap: 12px;
}

.adjective-card {
  padding: 16px;
  border: 1px solid rgba(244, 143, 130, 0.2);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 246, 244, 0.54)),
    rgba(255, 255, 255, 0.74);
  box-shadow: 0 12px 30px rgba(29, 42, 56, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.adjective-card h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 1.18rem;
}

.adjective-card p {
  margin: 7px 0 0;
  color: var(--muted);
}

.adj-er,
.adj-est,
.adj-more,
.adj-most,
.adj-the,
.adj-as,
.adj-than,
.adj-of {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 2px 6px;
  font-weight: 900;
  white-space: nowrap;
}

.adj-er {
  color: #674394;
  background: rgba(115, 85, 160, 0.13);
}

.adj-est,
.adj-the {
  color: var(--brand-strong);
  background: rgba(244, 143, 130, 0.13);
}

.adj-more {
  color: #245fba;
  background: rgba(64, 128, 184, 0.13);
}

.adj-most,
.adj-as {
  color: #1f6d5f;
  background: rgba(47, 174, 155, 0.13);
}

.adj-than {
  color: #8b4b61;
  background: rgba(220, 109, 150, 0.13);
}

.adj-of {
  color: #8a6429;
  background: rgba(223, 174, 74, 0.16);
}

.adjective-examples {
  display: grid;
  gap: 10px;
}

.adjective-examples p {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid rgba(244, 143, 130, 0.36);
  color: var(--muted);
}

.grammar-data-table .category-row td,
.grammar-data-table .category-row th {
  background: rgba(244, 143, 130, 0.13);
  color: var(--brand-strong);
  font-weight: 900;
  text-align: center;
}

.comparison-table-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.comparison-panel {
  padding: 16px;
  border: 1px solid rgba(244, 143, 130, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 246, 244, 0.52)),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 30px rgba(29, 42, 56, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.comparison-panel--blue {
  border-color: rgba(64, 128, 184, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(239, 248, 255, 0.58)),
    rgba(64, 128, 184, 0.06);
}

.comparison-panel--green {
  border-color: rgba(47, 174, 155, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(242, 252, 250, 0.58)),
    rgba(47, 174, 155, 0.06);
}

.comparison-panel h3 {
  margin: 0 0 10px;
  color: var(--ink);
}

.comparison-panel p {
  margin: 8px 0 0;
  color: var(--muted);
}

.future-story-grid,
.comparison-story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.future-story-card,
.comparison-story-card {
  border: 1px solid rgba(244, 143, 130, 0.2);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 246, 244, 0.54)),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 30px rgba(29, 42, 56, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.future-story-card img,
.comparison-story-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  display: block;
  object-fit: cover;
}

.future-story-card > div,
.comparison-story-card > div {
  padding: 16px;
}

.future-story-card__step,
.comparison-story-card__step {
  display: inline-flex;
  margin-bottom: 9px;
  color: var(--brand-strong);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.future-story-card h3,
.comparison-story-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.16;
}

.future-story-card p,
.comparison-story-card p {
  margin: 9px 0 0;
  color: var(--muted);
}

.tense-table-page {
  background: #f7fafc;
}

.tense-table-hero h1 {
  max-width: 680px;
}

.tense-table-article {
  padding-top: 34px;
}

.tense-table-shell {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  gap: 22px;
}

.tense-table-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: 18px;
  align-items: end;
}

.tense-table-head .eyebrow {
  margin-bottom: 8px;
}

.tense-table-head h2 {
  max-width: 760px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.85rem, 3vw, 2.8rem);
  line-height: 1.02;
}

.tense-table-head p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
}

.tense-filter-bar {
  position: sticky;
  top: 92px;
  z-index: 9;
  padding: 10px;
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tense-filter {
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid rgba(244, 143, 130, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.tense-filter:hover,
.tense-filter[aria-pressed="true"] {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 26px rgba(244, 143, 130, 0.16);
}

.tense-filter[aria-pressed="true"] {
  color: var(--brand-strong);
}

.tense-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.tense-card {
  border: 2px solid rgba(244, 143, 130, 0.62);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 250, 249, 0.7)),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 38px rgba(29, 42, 56, 0.08);
  overflow: hidden;
}

.tense-card[hidden] {
  display: none;
}

.tense-card--wide {
  grid-column: 1 / -1;
}

.tense-card__title {
  padding: 18px 22px;
  text-align: center;
  border-bottom: 3px solid rgba(244, 143, 130, 0.44);
  background: rgba(255, 255, 255, 0.58);
}

.tense-card__title span {
  display: block;
  color: var(--brand-strong);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tense-card__title h3 {
  margin: 4px 0 0;
  color: #a7a7a7;
  font-size: clamp(1.3rem, 2vw, 1.82rem);
  line-height: 1.12;
}

.tense-structure {
  margin: 28px clamp(16px, 3vw, 36px) 0;
  border: 1px solid rgba(42, 49, 58, 0.12);
  background: rgba(255, 255, 255, 0.76);
}

.tense-structure__row {
  display: grid;
  grid-template-columns: minmax(112px, 0.36fr) minmax(0, 1fr);
}

.tense-structure__row + .tense-structure__row {
  border-top: 1px solid rgba(42, 49, 58, 0.1);
}

.tense-structure__row strong,
.tense-structure__row p {
  margin: 0;
  padding: 16px;
}

.tense-structure__row strong {
  border-right: 1px solid rgba(42, 49, 58, 0.12);
  color: var(--ink);
  font-weight: 900;
}

.tense-structure__row span,
.tense-structure__row em {
  display: block;
}

.tense-structure__row span {
  color: var(--ink);
  font-weight: 900;
}

.tense-structure__row .tense-formula {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}

.tense-structure__row .tense-formula span {
  display: inline-flex;
}

.tense-formula b {
  color: var(--muted);
  font-weight: 900;
}

.tense-structure__row em {
  margin-top: 12px;
  color: var(--ink);
  font-style: normal;
  font-weight: 900;
}

.tense-usage {
  margin: 28px clamp(16px, 3vw, 36px) 30px;
  padding-top: 22px;
  border-top: 1px dashed rgba(220, 109, 98, 0.58);
}

.tense-usage h4 {
  margin: 0 0 12px;
  color: #a96861;
  text-align: center;
  font-size: 1.06rem;
}

.tense-usage ul {
  margin: 0;
  padding-left: 20px;
  color: var(--ink);
}

.tense-usage li + li {
  margin-top: 8px;
}

@media (max-width: 1020px) {
  .site-header {
    grid-template-columns: auto auto;
  }

  .brand img {
    width: 136px;
  }

  .nav-toggle {
    display: block;
    justify-self: end;
  }

  .primary-nav,
  .header-cta {
    display: none;
  }

  .site-header.is-open {
    align-items: start;
  }

  .site-header.is-open .primary-nav {
    grid-column: 1 / -1;
    display: grid;
    justify-content: stretch;
    gap: 0;
    padding: 8px 0;
    border-top: 1px solid var(--line);
  }

  .site-header.is-open .primary-nav a {
    padding: 12px 0;
  }

  .site-header.is-open .header-cta {
    grid-column: 1 / -1;
    display: inline-flex;
    width: 100%;
  }

  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-teaser__grid,
  .about-story__grid,
  .about-cta__panel {
    grid-template-columns: 1fr;
  }

  .value-grid,
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offer-grid,
  .updates-grid,
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-grid,
  .pricing-info,
  .social-hub,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .online-panel {
    grid-template-columns: 1fr;
  }

  .online-actions {
    justify-content: start;
  }

  .footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .knowledge-hero__inner,
  .filter-groups {
    grid-template-columns: 1fr;
  }

  .knowledge-hero__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .knowledge-section__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knowledge-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grammar-hero__grid,
  .grammar-article__inner {
    grid-template-columns: 1fr;
  }

  .grammar-toc {
    position: static;
  }

  .tense-table-head,
  .tense-card-grid {
    grid-template-columns: 1fr;
  }

  .tense-card--wide {
    grid-column: auto;
  }

  .formula-grid,
  .rules-grid,
  .mistake-list,
  .next-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .irregular-toolbar__row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 68px;
    padding: 9px 18px;
  }

  .brand {
    min-width: 0;
  }

  .brand img {
    width: 128px;
  }

  .nav-toggle {
    position: fixed;
    top: 12px;
    right: auto;
    left: min(calc(100dvw - 60px), 314px);
    z-index: 30;
    display: grid !important;
    place-content: center;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(29, 42, 56, 0.12);
  }

  .hero {
    min-height: calc(82vh - 68px);
  }

  .hero__content {
    width: min(100% - 32px, var(--max));
    padding: 56px 0;
  }

  .hero h1 {
    font-size: clamp(3rem, 18vw, 4.5rem);
  }

  .hero__actions,
  .online-actions {
    display: grid;
  }

  .quick-paths {
    width: min(100% - 32px, var(--max));
    grid-template-columns: 1fr;
    margin-top: 16px;
  }

  .section__inner {
    width: min(100% - 32px, var(--max));
  }

  .section__heading--row {
    display: block;
  }

  .section-side-note {
    margin-top: 12px;
  }

  .course-grid,
  .news-grid,
  .split,
  .about-teaser__grid,
  .subject-strip,
  .offer-grid,
  .updates-grid,
  .pricing-grid,
  .process-grid,
  .pricing-info,
  .social-hub,
  .contact-grid,
  .news-card,
  .footer__inner {
    grid-template-columns: 1fr;
  }

  .subpage-hero {
    min-height: 430px;
  }

  .subpage-hero__content {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    padding: 62px 0 52px;
  }

  .subpage-hero h1 {
    font-size: clamp(2.28rem, 11vw, 2.75rem);
    line-height: 1.04;
  }

  .subpage-hero p:not(.eyebrow) {
    max-width: min(100%, 34ch);
    font-size: 1rem;
  }

  .offer-card img,
  .update-card img {
    height: 210px;
  }

  .pricing-card {
    min-height: 0;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .about-teaser__media {
    min-height: 0;
  }

  .about-teaser__media img {
    width: 100%;
    height: 320px;
  }

  .about-teaser__badge {
    position: static;
    width: auto;
    margin-top: 12px;
  }

  .about-hero {
    min-height: 430px;
  }

  .about-hero__content {
    width: calc(100% - 32px);
    padding: 64px 0 52px;
  }

  .about-page .section__inner,
  .about-hero__content {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }

  .about-hero h1 {
    font-size: clamp(2.32rem, 11vw, 2.7rem);
    line-height: 1.04;
  }

  .about-hero p:not(.eyebrow) {
    max-width: min(100%, 31ch);
    font-size: 1rem;
  }

  .about-story__copy h2,
  .about-values h2,
  .team-section h2,
  .about-cta__panel h2 {
    font-size: 1.78rem;
    line-height: 1.12;
  }

  .about-story__copy p:not(.eyebrow),
  .about-values__intro,
  .value-card p,
  .team-card p:not(.course-card__label) {
    max-width: min(100%, 34ch);
    font-size: 0.98rem;
  }

  .about-story__grid,
  .about-cta__panel {
    grid-template-columns: 1fr;
  }

  .about-story__media {
    min-height: 0;
  }

  .about-story__media img {
    height: 320px;
  }

  .value-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }

  .value-card {
    min-height: 0;
  }

  .course-card {
    grid-template-rows: auto auto auto;
    background: var(--paper);
    box-shadow: 0 16px 38px rgba(29, 42, 56, 0.1);
  }

  .course-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
    object-fit: cover;
  }

  .course-card > div {
    padding: 18px 18px 14px;
  }

  .course-card .course-card__label {
    color: var(--brand-strong);
  }

  .course-card h3 {
    color: var(--ink);
    font-size: 1.34rem;
    line-height: 1.14;
  }

  .course-card p:not(.course-card__label) {
    max-width: 34ch;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.55;
  }

  .course-card a {
    min-height: 46px;
    margin: 0 18px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 244, 0.94));
    border-color: rgba(244, 143, 130, 0.28);
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  .news-card {
    min-height: 0;
  }

  .news-card img {
    height: 220px;
  }

  .footer__inner {
    padding: 44px 0;
  }

  .knowledge-hero {
    min-height: 0;
    padding: 38px 0;
  }

  .knowledge-hero__inner {
    width: min(100% - 32px, var(--max));
  }

  .knowledge-hero h1 {
    font-size: 2.55rem;
  }

  .knowledge-section__head h2 {
    font-size: 1.65rem;
  }

  .knowledge-feature-card {
    min-height: 118px;
    padding: 22px 18px;
  }

  .knowledge-feature-card__title {
    font-size: 1.22rem;
  }

  .knowledge-group {
    padding: 20px 18px 20px;
  }

  .knowledge-group > h3 {
    margin-bottom: 16px;
    padding-bottom: 13px;
    font-size: 1.28rem;
  }

  .knowledge-card {
    min-height: 92px;
  }

  .exercise-catalog-card {
    min-height: 104px;
    padding: 38px 14px 14px;
  }

  .exercise-catalog-card__status {
    top: 10px;
    right: 10px;
  }

  .exercise-catalog-feature {
    padding-top: 40px;
  }

  .knowledge-card__title {
    font-size: 1.03rem;
  }

  .knowledge-hero__stats,
  .knowledge-section__groups,
  .knowledge-card-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-toolbar__head {
    display: block;
  }

  .knowledge-toolbar__head p {
    margin-top: 10px;
  }

  .grammar-hero {
    padding: 26px 0 34px;
  }

  .grammar-hero__inner,
  .grammar-article__inner {
    width: min(100% - 32px, var(--max));
  }

  .grammar-hero h1 {
    font-size: 2.7rem;
  }

  .grammar-hero__actions,
  .future-story-grid,
  .comparison-story-grid,
  .formula-grid,
  .rules-grid,
  .usage-grid,
  .mistake-list,
  .next-grid {
    grid-template-columns: 1fr;
  }

  .grammar-hero__actions {
    display: grid;
  }

  .grammar-rule-card,
  .formula-card,
  .rule-tile,
  .usage-card,
  .grammar-note,
  .next-card,
  .mistake-list article {
    padding: 18px;
  }

  .irregular-table-wrap {
    display: none;
  }

  .irregular-cards {
    display: grid;
  }

  .irregular-card div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .adjective-table-wrap {
    display: none;
  }

  .adjective-mobile-cards {
    display: grid;
  }

  .comparison-table-two {
    grid-template-columns: 1fr;
  }

  .tense-table-shell {
    width: min(100% - 32px, var(--max));
  }

  .tense-filter-bar {
    position: static;
  }

  .tense-filter {
    flex: 1 1 calc(50% - 8px);
    padding-inline: 10px;
  }

  .tense-card__title {
    padding: 16px;
  }

  .tense-structure {
    margin: 18px 12px 0;
  }

  .tense-structure__row {
    grid-template-columns: 1fr;
  }

  .tense-structure__row strong {
    border-right: 0;
    border-bottom: 1px solid rgba(42, 49, 58, 0.08);
    background: rgba(255, 246, 244, 0.54);
  }

  .tense-structure__row strong,
  .tense-structure__row p {
    padding: 12px;
  }

  .tense-usage {
    margin: 20px 14px 22px;
  }
}

.promo-strip {
  position: relative;
  z-index: 4;
  background:
    linear-gradient(135deg, rgba(255, 246, 244, 0.96), rgba(238, 247, 246, 0.92)),
    var(--paper);
  border-bottom: 1px solid rgba(244, 143, 130, 0.2);
}

.promo-strip__inner {
  width: min(var(--max), calc(100% - 40px));
  min-height: 76px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 0.7fr) minmax(220px, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.promo-strip span {
  color: var(--brand-strong);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.promo-strip strong {
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.18;
}

.promo-strip p {
  margin: 0;
  color: var(--muted);
}

.cookie-banner {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 50;
  width: min(640px, calc(100vw - 40px));
  max-height: min(760px, calc(100dvh - 24px));
  padding: 18px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.cookie-banner__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.cookie-banner__copy strong {
  display: block;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.18;
}

.cookie-banner__copy p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.cookie-options {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.cookie-option {
  min-height: 64px;
  padding: 12px;
  border: 1px solid rgba(42, 49, 58, 0.1);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  background: rgba(255, 255, 255, 0.62);
}

.cookie-option input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--brand-strong);
}

.cookie-option strong,
.cookie-option small {
  display: block;
}

.cookie-option strong {
  color: var(--ink);
  line-height: 1.2;
}

.cookie-option small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.cookie-banner__actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
  background: linear-gradient(to bottom, rgba(255, 250, 249, 0), rgba(255, 250, 249, 0.94) 12px, rgba(255, 250, 249, 0.98));
}

.cookie-banner .button--secondary,
.admin-header .button--secondary,
.admin-hero__actions .button--secondary {
  color: var(--ink);
  border: 1px solid rgba(42, 49, 58, 0.14);
  background: rgba(255, 255, 255, 0.72);
}

.footer-privacy-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.cookie-floating-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 49;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(244, 143, 130, 0.3);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 246, 244, 0.74)),
    rgba(244, 143, 130, 0.16);
  box-shadow: 0 16px 32px rgba(29, 42, 56, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  cursor: pointer;
}

.cookie-floating-button:hover {
  transform: translateY(-1px);
}

.cookie-icon {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: block;
  background:
    radial-gradient(circle at 63% 20%, transparent 0 6px, #d89052 6.5px 7.5px, transparent 8px),
    radial-gradient(circle at 71% 28%, rgba(255, 255, 255, 0.82) 0 9px, transparent 9.5px),
    linear-gradient(135deg, #f2c37b, #d89052);
  box-shadow: inset -4px -6px 0 rgba(119, 78, 42, 0.16), inset 4px 4px 0 rgba(255, 255, 255, 0.28);
}

.cookie-icon span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #6b4429;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.18);
}

.cookie-icon span:nth-child(1) {
  left: 10px;
  top: 9px;
}

.cookie-icon span:nth-child(2) {
  left: 18px;
  top: 17px;
}

.cookie-icon span:nth-child(3) {
  left: 10px;
  top: 23px;
}

.cookie-icon span:nth-child(4) {
  left: 24px;
  top: 25px;
}

.admin-page {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(245, 248, 251, 0.98), rgba(255, 246, 244, 0.82)),
    var(--soft);
}

.admin-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 76px;
  padding: 10px clamp(18px, 4vw, 44px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 244, 242, 0.74)),
    rgba(244, 143, 130, 0.12);
  border-bottom: 1px solid rgba(244, 143, 130, 0.22);
  box-shadow: 0 14px 36px rgba(244, 143, 130, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.admin-nav {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  font-size: 0.94rem;
  font-weight: 850;
}

.admin-nav a {
  color: var(--ink);
  text-decoration: none;
}

.admin-nav a:hover {
  color: var(--brand-strong);
}

.admin-shell {
  width: min(1320px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 70px;
}

.admin-hero {
  min-height: 210px;
  padding: clamp(24px, 4vw, 38px);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
}

.admin-hero h1 {
  max-width: 820px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.2rem, 4.8vw, 4.4rem);
  line-height: 0.98;
}

.admin-hero p:not(.eyebrow) {
  max-width: 720px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1.04rem;
}

.admin-access-note {
  width: min(100%, 560px);
  margin-top: 20px;
  padding: 14px;
  border: 1px solid rgba(42, 49, 58, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.62);
}

.admin-access-note span,
.admin-access-note strong,
.admin-access-note small {
  display: block;
}

.admin-access-note span {
  color: var(--brand-strong);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-access-note strong {
  margin-top: 4px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.admin-access-note small {
  margin-top: 4px;
  color: var(--muted);
}

.admin-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 10px;
}

.admin-status {
  min-height: 28px;
  margin: 14px 0 0;
  color: var(--brand-strong);
  font-weight: 850;
}

.admin-section {
  margin-top: 34px;
}

.admin-section__head {
  margin-bottom: 16px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.admin-section h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.05;
}

.admin-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.admin-metric,
.admin-panel {
  border: 1px solid rgba(244, 143, 130, 0.2);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 248, 246, 0.68)),
    rgba(255, 255, 255, 0.76);
  box-shadow: 0 16px 34px rgba(29, 42, 56, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.admin-metric {
  min-height: 118px;
  padding: 18px;
  display: grid;
  align-content: space-between;
}

.admin-metric span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-metric strong {
  color: var(--ink);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1;
}

.admin-panel {
  padding: 20px;
}

.admin-panel h3,
.admin-form h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.16;
}

.admin-ranked-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

.admin-ranked-list li {
  min-height: 44px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(42, 49, 58, 0.09);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.admin-ranked-list span {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.admin-ranked-list strong {
  color: var(--brand-strong);
}

.admin-empty {
  margin: 0;
  color: var(--muted);
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.admin-table th,
.admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(42, 49, 58, 0.09);
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-table td {
  color: var(--muted);
}

.admin-price-grid,
.admin-form {
  display: grid;
  gap: 14px;
}

.admin-price-row {
  padding: 16px;
  border: 1px solid rgba(42, 49, 58, 0.09);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(100px, 0.42fr) minmax(90px, 0.34fr) minmax(140px, 0.55fr);
  gap: 12px;
  align-items: end;
  background: rgba(255, 255, 255, 0.64);
}

.admin-price-row > div span {
  display: block;
  color: var(--brand-strong);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-price-row > div strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.16;
}

.admin-price-row__wide {
  grid-column: 1 / -1;
}

.admin-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-form__wide,
.admin-check {
  grid-column: 1 / -1;
}

.admin-form label,
.admin-price-row label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.admin-form input,
.admin-form select,
.admin-form textarea,
.admin-price-row input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(42, 49, 58, 0.14);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font: inherit;
}

.admin-form textarea {
  min-height: 104px;
  resize: vertical;
}

.admin-check {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.admin-check input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  accent-color: var(--brand-strong);
}

.admin-integration-head,
.admin-smtp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid rgba(244, 143, 130, 0.28);
  border-radius: var(--radius);
  background: rgba(244, 143, 130, 0.08);
}

.admin-integration-head h3,
.admin-integration-head p,
.admin-smtp-actions p {
  margin: 0;
}

.admin-integration-head p,
.admin-smtp-actions p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.admin-smtp-actions code {
  color: var(--brand-strong);
  font-weight: 850;
}

.admin-smtp-actions .button,
.admin-integration-head .button {
  flex: 0 0 auto;
}

@media (max-width: 1120px) {
  .admin-header,
  .admin-hero {
    grid-template-columns: 1fr;
  }

  .admin-nav {
    justify-content: start;
    flex-wrap: wrap;
  }

  .admin-hero__actions {
    justify-content: start;
  }

  .admin-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-price-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .promo-strip__inner,
  .cookie-banner,
  .admin-dashboard-grid,
  .admin-form,
  .admin-price-row {
    grid-template-columns: 1fr;
  }

  .promo-strip__inner {
    width: min(100% - 32px, var(--max));
    padding: 14px 0;
  }

  .cookie-banner {
    right: 10px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 24px);
    padding: 12px;
    gap: 10px;
  }

  .cookie-banner__head {
    gap: 10px;
  }

  .cookie-banner .cookie-icon {
    width: 28px;
    height: 28px;
  }

  .cookie-banner__copy strong {
    font-size: 0.98rem;
  }

  .cookie-banner__copy p {
    margin-top: 3px;
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .cookie-option {
    min-height: 0;
    padding: 9px;
  }

  .cookie-option small {
    font-size: 0.82rem;
  }

  .cookie-floating-button {
    right: 4px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: 46px;
    height: 46px;
  }

  .cookie-floating-button .cookie-icon {
    width: 28px;
    height: 28px;
  }

  .cookie-banner__actions {
    justify-content: stretch;
  }

  .cookie-banner__actions .button {
    width: 100%;
  }

  .admin-shell {
    width: calc(100vw - 32px);
    padding-top: 18px;
  }

  .admin-header {
    position: static;
    padding: 14px 18px;
    gap: 14px;
  }

  .admin-nav {
    display: grid;
    gap: 8px;
  }

  .admin-hero {
    min-height: 0;
  }

  .admin-hero h1 {
    font-size: 2.34rem;
    line-height: 1.04;
  }

  .admin-hero__actions,
  .admin-hero__actions .button {
    width: 100%;
  }

  .admin-integration-head,
  .admin-smtp-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-integration-head .button,
  .admin-smtp-actions .button {
    width: 100%;
  }

  .admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .exercise-activity-grid,
  .exercise-choice-grid {
    grid-template-columns: 1fr;
  }

  .exercise-matching-board {
    grid-template-columns: 1fr;
  }

  .exercise-match-bank {
    order: -1;
    top: 82px;
    z-index: 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exercise-match-bank > span {
    grid-column: 1 / -1;
  }

  .grammar-game-intro {
    grid-template-columns: 1fr;
  }

  .grammar-game-preview {
    min-height: 340px;
  }

  .grammar-game-hud {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grammar-game-portals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grammar-game-portal {
    min-height: 112px;
    border-radius: 34px 34px 8px 8px;
  }
}

@media (max-width: 560px) {
  .exercise-activity {
    min-height: 0;
  }

  .exercise-match-card {
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 0;
    padding: 12px;
  }

  .exercise-match-card__number {
    width: 32px;
    height: 32px;
  }

  .exercise-match-bank {
    top: 72px;
    padding: 10px;
  }

  .exercise-match-bank button {
    min-height: 42px;
    font-size: 0.8rem;
  }

  .exercise-match-card__sentence {
    gap: 5px;
    font-size: 0.9rem;
  }

  .exercise-match-drop {
    min-width: min(165px, 100%);
    min-height: 38px;
    padding: 6px 9px;
    font-size: 0.8rem;
  }

  .exercise-match-drop.is-drop-ready::after {
    display: none;
  }

  .exercise-game-result {
    grid-template-columns: 1fr;
  }

  .grammar-game-intro {
    padding: 18px;
  }

  .grammar-game-intro h2 {
    max-width: 250px;
    font-size: 2.65rem;
  }

  .grammar-game-intro__copy {
    padding-top: 42px;
  }

  .grammar-game-preview {
    min-height: 270px;
  }

  .grammar-game-preview__portals {
    gap: 5px;
    padding: 28px 8px 0;
  }

  .grammar-game-preview-portal {
    min-height: 106px;
    border-width: 2px;
    border-bottom-width: 7px;
    border-radius: 28px 28px 6px 6px;
  }

  .grammar-game-preview__player {
    width: 66px;
  }

  .grammar-game-rules {
    grid-template-columns: 1fr;
  }

  .grammar-game-hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grammar-game-hud > div:not(.grammar-game-hud__controls) {
    min-height: 54px;
  }

  .grammar-game-hud__controls button {
    min-height: 42px;
    padding: 8px;
    font-size: 0.72rem;
  }

  .grammar-game-arena {
    min-height: 650px;
    padding: 12px;
  }

  .grammar-game-context,
  .grammar-game-sentence {
    padding: 11px;
  }

  .grammar-game-context p {
    font-size: 0.9rem;
  }

  .grammar-game-sentence {
    font-size: 0.94rem;
  }

  .grammar-game-portals {
    gap: 7px;
  }

  .grammar-game-portal {
    min-height: 104px;
    padding: 13px 7px 10px;
    border-width: 2px;
    border-bottom-width: 7px;
    border-radius: 28px 28px 6px 6px;
  }

  .grammar-game-portal > span {
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
  }

  .grammar-game-portal strong {
    font-size: 0.82rem;
  }

  .grammar-game-track {
    height: 84px;
  }

  .grammar-game-player {
    width: 62px;
  }

  .grammar-game-feedback {
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grammar-game-preview__player,
  .grammar-game-player,
  .grammar-game-portal {
    animation: none !important;
    transition: none !important;
  }
}

/* Grammar Quest app shell v2 */
.grammar-adventure {
  --game-bg: #10181b;
  --game-panel: rgba(15, 24, 27, 0.92);
  --game-panel-soft: rgba(27, 39, 42, 0.86);
  --game-line: rgba(255, 255, 255, 0.15);
  --game-copy: #f7f4ed;
  --game-muted: #b8c4c4;
  --game-coral: #ff8e7f;
  --game-mint: #55d9bd;
  --game-gold: #f5c661;
  color: var(--game-copy);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

.grammar-adventure .button {
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  background: #26383b;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  font-weight: 900;
}

.grammar-adventure .button--primary {
  border-color: #ff9b8e;
  background: #e7786c;
  color: #1a1514;
}

.grammar-adventure--lobby {
  overflow: hidden;
  background: var(--game-bg);
}

.adventure-lobby-header {
  position: relative;
  min-height: 62px;
  border-color: var(--game-line);
  background: rgba(9, 16, 18, 0.94);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  color: #fff;
}

.adventure-lobby-header > div span {
  color: var(--game-gold);
}

.adventure-lobby-header .adventure-icon-button,
.adventure-hud__buttons button {
  border-color: var(--game-line);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.adventure-lobby-grid {
  grid-template-columns: minmax(0, 1fr) minmax(390px, 470px);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  width: 100%;
  height: calc(100dvh - 62px);
  margin: 0;
}

.adventure-lobby-hero {
  grid-row: 1 / 3;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}

.adventure-world-collage::after {
  background: linear-gradient(90deg, rgba(7, 13, 15, 0.1) 0%, rgba(7, 13, 15, 0.18) 48%, rgba(7, 13, 15, 0.64) 100%),
    linear-gradient(0deg, rgba(7, 13, 15, 0.78) 0%, transparent 56%);
}

.adventure-lobby-character {
  right: 6%;
  bottom: -2%;
  width: min(40%, 430px);
  filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.52));
}

.adventure-portrait {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.adventure-lobby-copy {
  bottom: 40px;
  left: clamp(24px, 4vw, 62px);
  width: min(54%, 650px);
}

.adventure-lobby-copy h2 {
  margin: 8px 0 12px;
  color: #fff;
  font-size: clamp(2.2rem, 4.4vw, 4.8rem);
  line-height: 0.98;
}

.adventure-lobby-copy p:last-child {
  font-size: 1rem;
  color: #e7eeee;
}

.adventure-world-labels {
  top: 20px;
  left: clamp(18px, 3vw, 44px);
}

.adventure-world-labels span {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(9, 16, 18, 0.68);
  color: #fff;
}

.adventure-lobby-controls {
  align-self: stretch;
  overflow: auto;
  padding: 24px;
  border: 0;
  border-left: 1px solid var(--game-line);
  border-radius: 0;
  background: var(--game-panel);
  box-shadow: -18px 0 38px rgba(0, 0, 0, 0.24);
  color: var(--game-copy);
}

.adventure-lobby-title h2,
.adventure-leaderboard h2 {
  color: #fff;
}

.adventure-lobby-title > p:last-child,
.adventure-selection-line,
.adventure-mode small,
.adventure-difficulty span,
.adventure-leaderboard-empty {
  color: var(--game-muted);
}

.adventure-mode-toolbar button {
  color: var(--game-coral);
}

.adventure-mode,
.adventure-difficulty {
  border-color: var(--game-line);
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
}

.adventure-mode[aria-pressed="true"] {
  border-color: rgba(85, 217, 189, 0.74);
  background: rgba(48, 142, 123, 0.24);
  box-shadow: inset 0 -3px 0 var(--game-mint);
}

.adventure-mode[aria-pressed="true"] > span {
  border-color: var(--game-mint);
  background: var(--game-mint);
  box-shadow: inset 0 0 0 3px #1a2a2c;
}

.adventure-selection-line strong,
.adventure-name-field,
.adventure-difficulty-group legend {
  color: #fff;
}

.adventure-difficulty[aria-pressed="true"] {
  border-color: var(--game-gold);
  background: rgba(245, 198, 97, 0.15);
  box-shadow: inset 0 -4px 0 var(--game-gold);
}

.adventure-name-field input {
  border-color: var(--game-line);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.adventure-resume-run {
  border-color: var(--game-mint);
  background: rgba(47, 174, 155, 0.14);
}

.adventure-resume-run > div:first-child span,
.adventure-resume-run > div:first-child strong,
.adventure-resume-run > div:first-child small {
  color: #fff;
}

.adventure-leaderboard {
  grid-column: 2;
  grid-row: 2;
  max-height: 230px;
  overflow: auto;
  padding: 17px 24px 20px;
  border: 0;
  border-top: 1px solid var(--game-line);
  border-left: 1px solid var(--game-line);
  background: rgba(12, 20, 22, 0.98);
  box-shadow: none;
  color: #fff;
}

.adventure-leaderboard-list {
  grid-template-columns: 1fr;
}

.adventure-leaderboard-list li {
  border-color: rgba(255, 255, 255, 0.1);
}

.adventure-leaderboard-list li small {
  color: var(--game-muted);
}

.adventure-settings {
  border-color: var(--game-line);
  background: #182326;
  color: #fff;
}

.adventure-settings h2,
.adventure-character-options span,
.adventure-settings legend {
  color: #fff;
}

.adventure-character-options button,
.adventure-toggle-list label {
  border-color: var(--game-line);
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
}

.adventure-character-options button[aria-pressed="true"] {
  border-color: var(--game-coral);
  background: rgba(231, 120, 108, 0.18);
  box-shadow: inset 0 -4px 0 var(--game-coral);
}

.adventure-character-options .adventure-portrait {
  width: 74px;
  height: 74px;
  margin: 0 auto 6px;
}

.adventure-character-duo {
  display: flex !important;
  justify-content: center;
  min-height: 74px;
}

.adventure-character-duo .adventure-portrait {
  width: 58px;
  margin: 0 -8px 6px;
}

.adventure-character-options small,
.adventure-toggle-list small {
  color: var(--game-muted);
}

.grammar-adventure--play {
  grid-template-rows: 60px 4px auto minmax(0, 1fr);
  overflow: hidden;
  background: #081012;
}

.adventure-hud {
  position: relative;
  min-height: 60px;
  background: rgba(8, 16, 18, 0.96);
}

.adventure-question {
  min-height: 82px;
  border-color: var(--game-line);
  background: rgba(18, 30, 33, 0.98);
}

.adventure-question > div:first-child strong {
  color: #dce7e7;
}

.adventure-play-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  gap: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #081012;
}

.adventure-canvas-shell {
  width: min(100%, calc((100dvh - 146px) * 1.4));
  height: 100%;
  max-height: calc(100dvh - 146px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #081012;
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.54);
}

.adventure-canvas {
  min-height: 0;
}

.adventure-canvas canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.adventure-canvas-shell,
.adventure-canvas,
.adventure-canvas canvas {
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
}

.adventure-answers {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 18;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(58px, auto);
  gap: 7px;
  pointer-events: none;
}

.adventure-answer {
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 58px;
  padding: 8px 10px;
  border-color: rgba(255, 255, 255, 0.2);
  border-left-width: 1px;
  border-bottom: 4px solid;
  background: rgba(8, 16, 18, 0.84);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.adventure-answer--1 { border-bottom-color: #ff7469; }
.adventure-answer--2 { border-bottom-color: #55d9bd; }
.adventure-answer--3 { border-bottom-color: #a779e8; }
.adventure-answer--4 { border-bottom-color: #55a0f3; }

.adventure-mobile-controls button[aria-pressed="true"] {
  border-color: rgba(255, 173, 159, 0.72);
  background: #e7786c;
  color: #081012;
  transform: translateY(1px);
}

.adventure-answer > span {
  border-radius: 6px;
}

.adventure-world-intro,
.adventure-pause-layer {
  background: rgba(5, 11, 12, 0.86);
}

.adventure-feedback {
  border: 1px solid var(--game-line);
  border-top-width: 6px;
  background: #182326;
  color: #fff;
}

.adventure-feedback h2,
.adventure-feedback p {
  color: #fff;
}

.adventure-feedback > div {
  background: rgba(231, 120, 108, 0.14);
}

.grammar-adventure--finish {
  background: #10181b;
  color: #fff;
}

.adventure-finish-hero {
  border: 1px solid var(--game-line);
  background: linear-gradient(90deg, rgba(8, 16, 18, 0.9), rgba(8, 16, 18, 0.44)),
    url("../images/grammar-adventure/jungle.webp") center / cover;
}

.adventure-finish-stats {
  background: rgba(255, 255, 255, 0.12);
}

.adventure-finish-stats span,
.adventure-leaderboard--finish {
  background: #182326;
  color: #fff;
}

@media (max-width: 980px) {
  .grammar-adventure--lobby {
    overflow: auto;
  }

  .adventure-lobby-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
    min-height: calc(100dvh - 58px);
  }

  .adventure-lobby-hero {
    grid-row: auto;
    min-height: 520px;
  }

  .adventure-lobby-controls {
    border-top: 1px solid var(--game-line);
    border-left: 0;
  }

  .adventure-leaderboard {
    grid-row: auto;
    grid-column: 1;
    max-height: none;
    border-left: 0;
  }

  .adventure-answers {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
}

@media (max-width: 700px) {
  .adventure-lobby-hero {
    min-height: 390px;
  }

  .adventure-lobby-character {
    right: -2%;
    width: 50%;
  }

  .adventure-lobby-copy {
    bottom: 22px;
    left: 18px;
    width: 66%;
  }

  .adventure-lobby-copy h2 {
    font-size: 2.1rem;
  }

  .adventure-lobby-copy p:last-child {
    font-size: 0.82rem;
  }

  .adventure-world-labels {
    top: 12px;
    left: 12px;
    right: 12px;
  }

  .adventure-world-labels span {
    font-size: 0.58rem;
  }

  .adventure-lobby-controls {
    padding: 20px 14px;
  }

  .adventure-mode-grid,
  .adventure-difficulty-group > div {
    grid-template-columns: 1fr 1fr;
  }

  .grammar-adventure--play {
    grid-template-rows: auto 4px auto minmax(0, 1fr) auto;
  }

  .adventure-question {
    min-height: 136px;
  }

  .adventure-play-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    overflow: auto;
  }

  .adventure-answers {
    position: static;
    order: 0;
    width: 100%;
    pointer-events: auto;
  }

  .adventure-answer {
    min-height: 54px;
  }

  .adventure-canvas-shell {
    order: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1.4;
  }

  .adventure-mobile-controls {
    background: #081012;
  }
}

@media (prefers-reduced-motion: reduce) {
  .adventure-lobby-character,
  .adventure-portrait {
    animation: none !important;
  }
}

.adventure-question__center {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.adventure-gate-hint {
  margin: 0;
  color: #dbe6e4;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.adventure-gate-hint strong {
  color: var(--game-gold);
}

.adventure-world-intro.is-tutorial {
  padding: 24px;
  background: rgba(5, 11, 12, 0.93);
}

.adventure-gate-guide {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 12px;
}

.adventure-gate-guide img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.adventure-world-intro.is-tutorial strong {
  font-size: 1.85rem;
}

.adventure-world-intro.is-tutorial p {
  width: min(520px, 100%);
  margin: 10px auto 0;
  color: #e1e9e8;
  line-height: 1.5;
}

.adventure-world-intro.is-tutorial small {
  display: block;
  margin-top: 8px;
  color: #aebfbd;
  font-weight: 750;
}

.adventure-world-intro.is-tutorial .button {
  width: min(300px, 100%);
  margin: 18px auto 0;
}

@media (min-width: 701px) {
  .adventure-question {
    min-height: 96px;
  }

  .adventure-canvas-shell {
    width: min(100%, calc((100dvh - 160px) * 1.4));
    max-height: calc(100dvh - 160px);
  }
}

@media (max-width: 700px) {
  .adventure-question {
    grid-template-columns: minmax(0, 1fr) 64px;
    grid-template-rows: auto auto;
    min-height: 154px;
  }

  .adventure-question > div:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .adventure-question__center {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .adventure-question-timer {
    grid-column: 2;
    grid-row: 1;
  }

  .adventure-gate-hint {
    font-size: 0.66rem;
  }

  .adventure-gate-guide img {
    width: 34px;
    height: 34px;
  }

  .adventure-world-intro.is-tutorial {
    padding: 8px 12px;
  }

  .adventure-world-intro.is-tutorial .adventure-gate-guide {
    margin-bottom: 4px;
  }

  .adventure-world-intro.is-tutorial strong {
    margin-top: 2px;
    font-size: 1.15rem;
    line-height: 1.15;
  }

  .adventure-world-intro.is-tutorial p {
    margin-top: 4px;
    font-size: 0.72rem;
    line-height: 1.3;
  }

  .adventure-world-intro.is-tutorial span {
    font-size: 0.62rem;
  }

  .adventure-world-intro.is-tutorial small {
    margin-top: 3px;
    font-size: 0.66rem;
    line-height: 1.25;
  }

  .adventure-world-intro.is-tutorial .button {
    min-height: 38px;
    margin-top: 7px;
    padding: 8px 12px;
    font-size: 0.78rem;
  }
}

/* App-like exercise workspace and the compact Grammar Quest play surface. */
.exercise-page {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: #eef4f4;
}

.exercise-page > .site-header,
.exercise-page > .promo-strip {
  flex: 0 0 auto;
}

.exercise-app-main {
  display: grid;
  flex: 1 1 auto;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  height: auto;
  overflow: hidden;
}

.exercise-app-bar {
  border-bottom: 1px solid rgba(42, 49, 58, 0.1);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.exercise-app-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1320px, calc(100% - 40px));
  min-height: 102px;
  margin: 0 auto;
  padding: 12px 0;
}

.exercise-app-bar .breadcrumb {
  margin-bottom: 5px;
  font-size: 0.76rem;
}

.exercise-app-bar .eyebrow {
  margin: 0 0 2px;
  font-size: 0.68rem;
}

.exercise-app-bar h1 {
  margin: 0;
  font-size: clamp(1.55rem, 2.4vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.exercise-app-bar__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.exercise-app-bar__actions > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.exercise-app-bar__actions .button {
  min-height: 40px;
  padding: 0 16px;
  white-space: nowrap;
}

.exercise-workspace {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.exercise-workspace__inner {
  width: min(1320px, calc(100% - 40px));
  min-height: 100%;
  margin: 0 auto;
  padding: 16px 0;
}

.exercise-shell[data-exercise-screen="setup"],
.exercise-shell[data-exercise-screen="setup"] .exercise-layout {
  min-height: 100%;
}

.exercise-shell[data-exercise-screen="setup"] .exercise-layout {
  grid-template-columns: 1fr;
}

.exercise-panel--setup.glass-surface {
  padding: 16px 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.exercise-panel--setup h2 {
  font-size: 1.55rem;
}

.exercise-panel--setup > p:not(.eyebrow) {
  margin-top: 5px;
  font-size: 0.88rem;
}

.exercise-panel--setup .exercise-control-group {
  margin-top: 14px;
}

.exercise-panel--setup .exercise-control-label {
  margin-bottom: 7px;
  font-size: 0.78rem;
}

.exercise-panel--setup .exercise-activity-grid,
.exercise-panel--setup .exercise-mode-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.exercise-panel--setup .exercise-activity {
  min-height: 78px;
  padding: 11px 12px;
  border-radius: 8px;
}

.exercise-panel--setup .exercise-activity__tag {
  margin-bottom: 4px;
  font-size: 0.61rem;
}

.exercise-panel--setup .exercise-activity > span:last-child,
.exercise-panel--setup .exercise-mode__description {
  display: none;
}

.exercise-panel--setup .exercise-mode {
  min-height: 62px;
  padding: 10px 12px;
  border-radius: 8px;
}

.exercise-panel--setup .exercise-mode__check {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

.exercise-panel--setup .exercise-selection-summary {
  display: none;
}

.exercise-panel--setup .exercise-count-row {
  gap: 8px;
}

.exercise-panel--setup .exercise-count {
  min-height: 40px;
  border-radius: 8px;
}

.exercise-panel--setup .exercise-game-launch {
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(47, 174, 155, 0.22);
  border-radius: 8px;
  background: rgba(47, 174, 155, 0.08);
}

.exercise-panel--setup .exercise-game-launch .exercise-control-label {
  margin: 0 0 3px;
  color: #258d7d;
}

.exercise-panel--setup .exercise-game-launch p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.exercise-panel--setup .exercise-start {
  min-height: 48px;
  margin-top: 14px;
}

.exercise-shell[data-exercise-screen="setup"] .exercise-guide {
  display: none;
}

.adventure-hud__buttons .adventure-zoom-button {
  display: none !important;
}

.adventure-question {
  grid-template-columns: minmax(180px, 0.65fr) minmax(420px, 2fr) 84px;
  min-height: 132px;
  padding: 10px 16px;
}

.adventure-question__center {
  gap: 4px;
}

.adventure-answers {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 6px;
  width: 100%;
  pointer-events: none;
}

.adventure-answer {
  grid-template-columns: 27px minmax(0, 1fr);
  min-height: 40px;
  padding: 5px 7px;
  border-bottom-width: 3px;
}

.adventure-answer > span {
  width: 27px;
  height: 27px;
  font-size: 0.72rem;
}

.adventure-answer strong {
  font-size: 0.75rem;
  line-height: 1.1;
}

.adventure-canvas-shell {
  width: min(100%, calc((100dvh - 196px) * 1.4));
  max-height: calc(100dvh - 196px);
}

@media (max-width: 720px) {
  .exercise-app-main {
    min-height: 0;
    height: auto;
  }

  .exercise-app-bar__inner {
    width: calc(100% - 24px);
    min-height: 82px;
    gap: 10px;
    padding: 8px 0;
  }

  .exercise-app-bar .breadcrumb,
  .exercise-app-bar__actions > span {
    display: none;
  }

  .exercise-app-bar .eyebrow {
    font-size: 0.6rem;
  }

  .exercise-app-bar h1 {
    max-width: 220px;
    font-size: 1.25rem;
  }

  .exercise-app-bar__actions .button {
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.72rem;
  }

  .exercise-workspace__inner {
    width: calc(100% - 16px);
    padding: 8px 0;
  }

  .exercise-panel--setup.glass-surface {
    padding: 9px 4px 12px;
  }

  .exercise-panel--setup .eyebrow,
  .exercise-panel--setup > p:not(.eyebrow) {
    display: none;
  }

  .exercise-panel--setup h2 {
    font-size: 1.15rem;
  }

  .exercise-panel--setup .exercise-control-group {
    margin-top: 10px;
  }

  .exercise-panel--setup .exercise-activity-grid,
  .exercise-panel--setup .exercise-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .exercise-panel--setup .exercise-activity {
    min-height: 58px;
    padding: 8px 9px;
  }

  .exercise-panel--setup .exercise-activity strong,
  .exercise-panel--setup .exercise-mode__name {
    font-size: 0.82rem;
  }

  .exercise-panel--setup .exercise-mode {
    min-height: 50px;
    padding: 7px 9px;
  }

  .exercise-panel--setup .exercise-mode-toolbar {
    margin-bottom: 6px;
  }

  .exercise-panel--setup .exercise-mode-toolbar .exercise-control-label {
    display: none;
  }

  .exercise-panel--setup .exercise-mode-tools button {
    min-height: 30px;
    font-size: 0.68rem;
  }

  .exercise-panel--setup .exercise-count-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .exercise-panel--setup .exercise-count--all {
    grid-column: auto;
    font-size: 0.68rem;
  }

  .exercise-panel--setup .exercise-count {
    min-height: 36px;
  }

  .exercise-panel--setup .exercise-game-launch {
    margin-top: 10px;
    padding: 9px 11px;
  }

  .exercise-panel--setup .exercise-game-launch p {
    display: none;
  }

  .exercise-panel--setup .exercise-start {
    min-height: 44px;
    margin-top: 10px;
  }

  .grammar-adventure--play {
    grid-template-rows: 55px 4px auto minmax(0, 1fr) 58px;
  }

  .adventure-hud__buttons .adventure-zoom-button {
    display: inline-flex !important;
  }

  .adventure-hud {
    grid-template-columns: minmax(88px, 1fr) 58px 64px auto;
  }

  .adventure-hud__buttons {
    gap: 2px;
    padding: 5px !important;
  }

  .adventure-hud__buttons button {
    width: 32px;
    min-height: 32px;
  }

  .adventure-question {
    grid-template-columns: minmax(0, 1fr) 58px;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    min-height: 0;
    padding: 7px 8px;
  }

  .adventure-question__center {
    gap: 4px;
  }

  .adventure-sentence {
    font-size: 0.84rem;
    line-height: 1.25;
  }

  .adventure-answers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .adventure-answer {
    min-height: 38px;
    padding: 4px 6px;
  }

  .adventure-answer strong {
    font-size: 0.68rem;
  }

  .adventure-gate-hint {
    font-size: 0.59rem;
  }

  .adventure-play-layout {
    display: grid;
    place-items: start center;
    padding: 0;
    overflow: hidden;
  }

  .adventure-canvas-shell {
    width: 100vw;
    max-width: none;
    max-height: none;
    aspect-ratio: 1.4;
  }

  .adventure-mobile-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 58px;
    padding: 6px 8px max(6px, env(safe-area-inset-bottom));
  }

  .adventure-mobile-controls > span {
    display: none;
  }

  .adventure-mobile-controls button {
    width: 42px;
    height: 42px;
  }

  .adventure-mobile-controls [data-adventure-direction="left"] { order: 1; }
  .adventure-mobile-controls [data-adventure-direction="up"] { order: 2; }
  .adventure-mobile-controls [data-adventure-direction="stop"] { order: 3; }
  .adventure-mobile-controls [data-adventure-direction="down"] { order: 4; }
  .adventure-mobile-controls [data-adventure-direction="right"] { order: 5; }
}

.exercise-app-bar__actions .button--secondary {
  border: 1px solid rgba(42, 49, 58, 0.14);
  background: #ffffff;
  color: var(--ink);
}

.adventure-question__center .adventure-sentence {
  grid-row: auto !important;
  grid-column: auto !important;
}

@media (max-width: 700px) {
  .grammar-adventure--lobby {
    overflow: hidden;
  }

  .adventure-lobby-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 158px minmax(0, 1fr);
    height: calc(100dvh - 58px);
    min-height: 0;
    overflow: hidden;
  }

  .adventure-lobby-hero {
    grid-row: 1;
    min-height: 0;
  }

  .adventure-lobby-copy {
    bottom: 12px;
    left: 14px;
    width: 62%;
  }

  .adventure-lobby-copy .eyebrow,
  .adventure-lobby-copy p:last-child,
  .adventure-world-labels {
    display: none;
  }

  .adventure-lobby-copy h2 {
    font-size: 1.55rem;
    line-height: 1.02;
  }

  .adventure-lobby-character {
    right: 4%;
    width: 34%;
  }

  .adventure-lobby-controls {
    grid-row: 2;
    min-height: 0;
    padding: 10px 12px;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .adventure-lobby-title .eyebrow,
  .adventure-lobby-title > p {
    display: none;
  }

  .adventure-lobby-title h2 {
    font-size: 1.22rem;
  }

  .adventure-mode-toolbar {
    margin-top: 8px;
  }

  .adventure-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .adventure-mode {
    min-height: 56px;
    padding: 7px 9px;
  }

  .adventure-mode small {
    font-size: 0.68rem;
  }

  .adventure-selection-line {
    margin: 6px 0;
    font-size: 0.72rem;
  }

  .adventure-difficulty-group {
    margin-top: 7px;
  }

  .adventure-difficulty-group > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .adventure-difficulty {
    min-height: 44px;
    padding: 7px 5px;
  }

  .adventure-difficulty span {
    display: none;
  }

  .adventure-name-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
  }

  .adventure-name-field input {
    min-height: 38px;
  }

  .adventure-start {
    min-height: 44px;
    margin-top: 8px;
  }

  .adventure-leaderboard {
    display: none;
  }

  .grammar-adventure--play {
    grid-template-rows: 55px 4px auto auto 58px;
    align-content: start;
  }

  .adventure-play-layout {
    width: 100%;
    height: clamp(350px, 55dvh, 470px);
  }

  .adventure-canvas-shell {
    position: relative;
    width: 100vw;
    height: 100%;
    aspect-ratio: auto;
  }

  .adventure-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .adventure-canvas canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 700px) {
  .adventure-resume-run {
    grid-template-columns: minmax(0, 1fr) 142px;
    grid-template-rows: auto auto 5px;
    gap: 4px 8px;
    margin: 0 0 8px;
    padding: 8px 8px 8px 10px;
  }

  .adventure-resume-run > div:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .adventure-resume-run > div:first-child small {
    display: none;
  }

  .adventure-resume-progress {
    grid-column: 1 / -1;
    grid-row: 3;
    height: 5px;
  }

  .adventure-resume-run .button {
    grid-column: 2;
    grid-row: 1;
    min-height: 34px;
    padding: 5px 8px;
    font-size: 0.74rem;
  }

  .adventure-resume-run > button:last-child {
    grid-column: 2;
    grid-row: 2;
    min-height: 22px;
    text-align: center;
  }
}