:root {
  color-scheme: light;
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-strong: #eef4f2;
  --ink: #17212b;
  --muted: #667282;
  --line: #d9e0e7;
  --teal: #0f766e;
  --teal-dark: #0a4f4a;
  --coral: #d95f43;
  --gold: #b97912;
  --lavender: #7257a5;
  --mint: #16a085;
  --mint-soft: #e8f8f3;
  --sky: #2f80ed;
  --sky-soft: #eaf3ff;
  --peach: #f06f4f;
  --peach-soft: #fff0e8;
  --lemon: #d69e00;
  --lemon-soft: #fff8d8;
  --rose: #d9467d;
  --rose-soft: #fff0f6;
  --lilac: #7c5cc4;
  --lilac-soft: #f3efff;
  --wrong: #b42318;
  --right: #16783c;
  --almost: #a15c07;
  --shadow: 0 18px 45px rgba(24, 39, 75, 0.08);
  --radius: 8px;
  --radius-lg: 18px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(180deg, #fbfdff 0%, #f8fbff 42%, #fffaf5 100%),
    var(--bg);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 9px 12px;
  border-radius: var(--radius);
  background: var(--teal-dark);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid #1456a3;
  outline-offset: 3px;
}

html.a11y-large-text body {
  font-size: 18px;
  line-height: 1.65;
}

html.a11y-large-text :where(button, input, textarea, select) {
  font-size: 1rem;
}

html.a11y-readable-font body,
html.a11y-readable-font :where(button, input, textarea, select) {
  font-family: Arial, Verdana, Tahoma, sans-serif;
  letter-spacing: 0.015em;
}

html.a11y-high-contrast {
  --bg: #fff;
  --surface: #fff;
  --surface-strong: #fff;
  --ink: #000;
  --muted: #2b2b2b;
  --line: #111;
  --teal: #005f59;
  --teal-dark: #003d39;
  --wrong: #8c0000;
  --right: #005c24;
  --almost: #7a3f00;
  --shadow: none;
}

html.a11y-high-contrast body {
  background: #fff;
}

html.a11y-high-contrast :where(.sidebar-block, .lesson-card, .exercise-card, .assistant-card, .lesson-hero, .task-card) {
  border-width: 2px;
  border-color: #111;
}

html.a11y-high-contrast :where(button, input, textarea, select) {
  border-color: #111;
}

html.a11y-high-contrast :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 4px solid #000;
  outline-offset: 4px;
}

html.a11y-reduce-motion {
  scroll-behavior: auto;
}

html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  border-bottom: 1px solid #eaded0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid #79c7bc;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #e8f8f3 0%, #fff1e8 100%);
  color: var(--teal-dark);
  font-weight: 800;
}

.brand strong,
.brand small {
  display: block;
}

.brand small {
  color: var(--muted);
  font-size: 12px;
}

.topbar-actions,
.lesson-actions,
.form-actions,
.hero-stats {
  display: flex;
  align-items: center;
  gap: 10px;
}

.layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(260px, 340px);
  gap: 20px;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.sidebar,
.assistant-panel {
  position: sticky;
  top: 88px;
  align-self: start;
  max-height: calc(100vh - 104px);
  overflow: auto;
}

.sidebar-block,
.lesson-card,
.exercise-card,
.assistant-card,
.lesson-hero {
  border: 1px solid #dde5ec;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.progress-card {
  padding: 18px;
  margin-bottom: 14px;
  border-color: #bfe3dc;
  background:
    linear-gradient(135deg, rgba(232, 248, 243, 0.96), rgba(255, 248, 216, 0.75)),
    #fff;
}

.course-star-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px solid #f0cf76;
  border-radius: var(--radius);
  background: #fff8d8;
  color: #6d4b08;
  font-size: 13px;
  font-weight: 750;
}

.course-star-summary strong {
  color: #a15c07;
}

.course-reward-text {
  margin: 8px 0 0;
  color: #536170;
  font-size: 12px;
  line-height: 1.35;
}

.progress-backup-actions {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.progress-backup-actions .ghost-button,
.progress-import-button {
  width: 100%;
  min-height: 38px;
  justify-content: center;
  text-align: center;
  font-size: 12px;
}

.progress-import-button {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--teal-dark);
  cursor: pointer;
  font-weight: 800;
}

.progress-import-button:focus-within {
  outline: 3px solid rgba(47, 128, 237, 0.28);
  outline-offset: 2px;
}

.progress-import-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#progressBackupStatus {
  min-height: 1.4em;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.review-card,
.weak-topics-card,
.accessibility-card {
  margin-bottom: 14px;
  padding: 16px;
}

.review-card {
  border-color: #c8c2eb;
  background: linear-gradient(145deg, #fbfaff, #f3efff);
}

.weak-topics-card {
  border-color: #f0cf76;
  background: linear-gradient(145deg, #fffdf5, #fff8d8);
}

.accessibility-card {
  border-color: #b9d3ea;
  background: linear-gradient(145deg, #f8fcff, #eaf3ff);
}

.sidebar-section-heading,
.weak-topic-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.review-all-button {
  display: grid;
  justify-items: start;
  gap: 1px;
  padding: 4px 6px 4px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.review-all-button .eyebrow {
  margin-bottom: 2px;
}

.review-all-title {
  font-size: 19px;
  font-weight: 850;
  line-height: 1.15;
}

.review-all-button small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.review-all-button:hover:not(:disabled) .review-all-title,
.review-all-button:focus-visible .review-all-title {
  color: var(--teal-dark);
}

.review-all-button:disabled {
  cursor: default;
  opacity: 0.72;
}

.review-session-complete {
  padding: 12px 14px;
  border: 1px solid #a9dac0;
  border-radius: 14px;
  background: #eefbf3;
  color: #17623a;
}

.sidebar-section-heading h2 {
  font-size: 19px;
}

.sidebar-card-copy,
.sidebar-card-note,
.accessibility-status {
  color: #536170;
  font-size: 12px;
  line-height: 1.45;
}

.sidebar-card-copy {
  margin: 10px 0;
}

.sidebar-card-note,
.accessibility-status {
  margin: 9px 0 0;
}

.review-due-count {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 50%;
  background: #7257a5;
  color: #fff;
  font-size: 16px;
}

.review-queue,
.weak-topics-map,
.accessibility-controls {
  display: grid;
  gap: 8px;
}

.review-queue {
  margin-bottom: 10px;
}

.review-queue-item {
  display: grid;
  width: 100%;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid #d9d3ef;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  text-align: left;
}

.review-queue-item:hover:not(:disabled) {
  border-color: #7257a5;
  background: #fff;
  transform: translateY(-1px);
}

.review-queue-item:disabled {
  cursor: default;
  opacity: 0.7;
}

.review-queue-item.is-due {
  border-color: #7257a5;
  box-shadow: inset 4px 0 #7257a5;
}

.review-queue-item strong,
.review-queue-item span {
  font-size: 12px;
}

.review-queue-item small,
.review-empty {
  color: var(--muted);
  font-size: 11px;
}

.review-empty {
  margin: 0;
}

.weak-topic-row {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #e5d69d;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  text-align: left;
}

.weak-topic-row:hover {
  border-color: var(--teal);
  transform: translateY(-1px);
}

.weak-topic-heading strong {
  font-size: 12px;
}

.weak-topic-heading small,
.weak-topic-meta {
  color: var(--muted);
  font-size: 10px;
}

.weak-topic-meter {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9edf2;
}

.weak-topic-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.weak-topic-row.is-weak .weak-topic-meter span {
  background: var(--wrong);
}

.weak-topic-row.is-watch .weak-topic-meter span {
  background: var(--gold);
}

.weak-topic-row.is-new .weak-topic-meter span {
  background: #b8c1cb;
}

.accessibility-card summary {
  cursor: pointer;
  list-style-position: outside;
}

.accessibility-card summary > span,
.accessibility-card summary strong {
  display: block;
}

.accessibility-card[open] summary {
  margin-bottom: 12px;
}

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

.accessibility-toggle {
  display: grid;
  min-height: 62px;
  place-items: center;
  gap: 3px;
  padding: 8px;
  border: 1px solid #b9d3ea;
  border-radius: var(--radius);
  background: #fff;
  color: #23465f;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.accessibility-toggle > span:first-child {
  color: #1456a3;
  font-size: 17px;
  font-weight: 900;
}

.accessibility-toggle.is-active,
.accessibility-toggle[aria-pressed="true"] {
  border-color: #1456a3;
  background: #dcecff;
  box-shadow: inset 0 0 0 1px #1456a3;
}

.install-app-button,
.accessibility-status {
  grid-column: 1 / -1;
}

.offline-status.is-ready {
  border-color: #74c69d;
  background: #e8f8f0;
  color: #0f6332;
}

.offline-status.is-offline,
.offline-status.is-warning {
  border-color: #e1a23c;
  background: #fff4d6;
  color: #704600;
}

.review-mode-banner,
.review-result-message {
  border: 1px solid #9a8bd1;
  border-radius: var(--radius);
  background: #f3efff;
  color: #493479;
}

.review-mode-banner {
  margin: 0 0 14px;
  padding: 11px 13px;
}

.review-result-message {
  padding: 10px 12px;
}

.task-card.is-scheduled-review {
  border-color: #7257a5;
  box-shadow:
    0 0 0 3px rgba(114, 87, 165, 0.2),
    var(--shadow);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
}

h1 {
  max-width: 780px;
  font-size: clamp(34px, 4vw, 58px);
}

h2 {
  font-size: 23px;
}

h3 {
  margin-bottom: 10px;
  font-size: 16px;
}

.muted {
  color: var(--muted);
  font-size: 14px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #9edbd0;
  border-radius: var(--radius);
  background: var(--mint-soft);
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.status-pill-soft {
  border-color: #f3cc8f;
  background: #fff5d6;
  color: #744905;
}

.level-list {
  display: grid;
  gap: 8px;
}

.level-button {
  display: grid;
  width: 100%;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.level-button:hover,
.level-button.is-active {
  border-color: #7ed4c8;
  background: linear-gradient(135deg, #f0faf8 0%, #fff8e8 100%);
}

.level-button.is-exam-level {
  border-color: #e5b64d;
  background:
    linear-gradient(135deg, rgba(255, 248, 216, 0.95), rgba(232, 248, 243, 0.92)),
    var(--surface);
}

.level-button.is-exam-level .level-index {
  background: #20394a;
  color: #fff4c7;
}

.level-button.is-exam-level.is-locked {
  opacity: 0.78;
}

.level-button small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.level-index {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: var(--radius);
  background: var(--mint-soft);
  color: var(--teal-dark);
  font-weight: 800;
}

.level-button:nth-child(4n + 2) .level-index {
  background: var(--sky-soft);
  color: #1456a3;
}

.level-button:nth-child(4n + 3) .level-index {
  background: var(--peach-soft);
  color: #9c3f25;
}

.level-button:nth-child(4n + 4) .level-index {
  background: var(--lilac-soft);
  color: #56378f;
}

.level-progress {
  display: grid;
  justify-items: end;
  gap: 1px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.level-progress small {
  font-size: 10px;
}

.level-stars {
  display: inline-flex;
  gap: 1px;
  white-space: nowrap;
}

.level-star {
  color: #cbd3dc;
  font-size: 12px;
  line-height: 1;
}

.level-star.is-earned {
  color: #e3a800;
  text-shadow: 0 1px 0 #fff;
}

.content-panel {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.lesson-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
  min-height: 370px;
  gap: 0;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border-color: #efcfa7;
  background: #fffdf9;
}

.hero-copy {
  align-self: center;
  padding: 30px;
}

.hero-copy p:not(.eyebrow) {
  max-width: 720px;
  margin: 16px 0 0;
  color: #344255;
  font-size: 18px;
}

.hero-stats {
  flex-wrap: wrap;
  margin-top: 22px;
  gap: 14px;
}

.hero-stats span {
  min-width: 126px;
  padding: 4px 12px 4px 14px;
  border-left: 4px solid var(--teal);
  color: var(--muted);
}

.hero-stats span:nth-child(2) {
  border-left-color: var(--coral);
}

.hero-stats span:nth-child(3) {
  border-left-color: #e9a400;
}

.hero-stats strong {
  display: block;
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
}

.hero-stats small {
  display: block;
  margin-top: 5px;
  color: #536170;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.hero-copy .hero-promise {
  display: inline-flex;
  margin-top: 20px;
  padding: 7px 10px;
  border-radius: 6px;
  background: #e8f8f3;
  color: #0a5b53;
  font-size: 13px;
  font-weight: 750;
}

.hero-visual {
  width: 100%;
  height: 100%;
  min-height: 370px;
  object-fit: cover;
  object-position: center;
}

.lesson-card,
.exercise-card,
.assistant-card {
  padding: 20px;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.section-heading.compact {
  align-items: center;
}

.icon-button,
.ghost-button,
.secondary-button,
.primary-button {
  min-height: 40px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-weight: 750;
}

.icon-button {
  width: 42px;
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.icon-button:hover,
.secondary-button:hover,
.ghost-button:hover {
  border-color: #9bd8ce;
  background: #f2faf8;
}

.primary-button,
.secondary-button,
.ghost-button {
  padding: 9px 14px;
}

.primary-button {
  border-color: #0f8f7c;
  background: linear-gradient(135deg, #0f8f7c 0%, #1170b8 100%);
  color: #fff;
}

.primary-button:hover {
  background: linear-gradient(135deg, #0a6c62 0%, #0d5c9a 100%);
}

.secondary-button {
  border-color: #9edbd0;
  background: var(--mint-soft);
  color: var(--teal-dark);
}

.ghost-button {
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
}

.full-width {
  width: 100%;
}

.feedback-footer {
  margin-top: 24px;
  border-top: 1px solid #d9e4e1;
  background: #eef8f5;
}

.feedback-footer-inner {
  display: grid;
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 28px 24px 34px;
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1.15fr);
  gap: 32px;
  align-items: start;
}

.feedback-intro h2 {
  margin: 4px 0 8px;
  font-size: 23px;
}

.feedback-intro p:last-child {
  margin: 0;
  color: var(--muted);
}

.feedback-form {
  display: grid;
  gap: 8px;
}

.feedback-select {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}

.feedback-status {
  min-height: 22px;
  margin: 0;
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 750;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  grid-column: 1 / -1;
  padding-top: 4px;
  font-size: 13px;
}

.legal-links a {
  color: var(--teal-dark);
  font-weight: 800;
  text-decoration: none;
}

.legal-links a:hover {
  text-decoration: underline;
}

.legal-page {
  background: var(--bg);
  color: var(--ink);
}

.legal-shell {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.legal-document {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.legal-document h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
}

.legal-document h2 {
  margin: 28px 0 10px;
  font-size: 21px;
}

.legal-document p,
.legal-document li {
  color: var(--ink);
}

.legal-document .muted,
.legal-document .draft-note {
  color: var(--muted);
}

.draft-note {
  padding: 14px 16px;
  border: 1px solid #f1c36d;
  border-radius: var(--radius);
  background: var(--lemon-soft);
}

.legal-meta {
  display: grid;
  gap: 8px;
  margin: 20px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
}

.legal-meta p {
  margin: 0;
}

.legal-document a {
  color: var(--teal-dark);
  font-weight: 800;
}

.seo-shell {
  padding-top: 34px;
}

.seo-document {
  font-size: 17px;
}

.seo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 22px 0;
}

.seo-grid > div {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
}

.seo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  text-decoration: none;
}

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

.theory-grid article {
  min-height: 140px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}

.theory-grid article:nth-child(1) {
  border-color: #bfe3dc;
  background: linear-gradient(180deg, #ffffff 0%, #f0fbf7 100%);
}

.theory-grid article:nth-child(2) {
  border-color: #f4c6a7;
  background: linear-gradient(180deg, #ffffff 0%, #fff5ee 100%);
}

.theory-grid article:nth-child(3) {
  grid-column: 1 / -1;
  border-color: #cddcff;
  background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%);
}

.rule-heading {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 13px;
  border: 1px solid rgba(109, 72, 255, 0.22);
  border-radius: 999px;
  background: linear-gradient(135deg, #6d48ff, #d93fdf 58%, #2bbce8);
  box-shadow: 0 8px 18px rgba(104, 65, 216, 0.2);
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lesson-rule-details {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.rule-paragraph {
  display: block;
}

.rule-paragraph + .rule-paragraph {
  margin-top: 10px;
}

.lesson-rule-details .conjugation-table {
  min-width: 360px;
}

.lesson-rule-details .lesson-visual {
  height: auto;
  max-height: none;
  max-width: 100%;
  object-fit: contain;
}

.exam-intro-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff 0%, #f5fbfa 100%);
  color: #243040;
  line-height: 1.55;
}

.exam-intro-card p {
  margin: 0;
  font-size: 16px;
}

.exam-intro-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
}

.mixed-practice-intro {
  padding: 18px;
  border: 1px solid rgba(219, 39, 119, 0.16);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 238, 194, 0.82), rgba(255, 255, 255, 0.94)),
    linear-gradient(90deg, rgba(20, 184, 166, 0.12), rgba(219, 39, 119, 0.1));
  color: #263447;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.5;
}

.mixed-practice-intro p {
  margin: 0;
}

.exam-howto {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
}

.exam-howto strong {
  color: var(--teal-dark);
}

.certificate-name-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(217, 79, 55, 0.18);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff8ea, #fff);
}

.certificate-name-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.certificate-name-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--ink);
  font: inherit;
  background: #fff;
}

@media (max-width: 760px) {
  .certificate-name-row {
    grid-template-columns: 1fr;
  }
}

.rule-note-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: #35445a;
}

.formula-box {
  display: grid;
  gap: 8px;
}

.formula-line {
  padding: 10px;
  border-left: 4px solid var(--peach);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--peach-soft);
  font-weight: 760;
}

.conjugation-table-wrap {
  margin-top: 12px;
  overflow-x: auto;
}

.conjugation-table-wrap h4 {
  margin: 0 0 8px;
  color: #38475a;
  font-size: 14px;
}

.conjugation-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  font-size: 14px;
}

.conjugation-table.is-parts-table {
  min-width: 760px;
}

.conjugation-table.is-parts-table td:nth-child(2),
.conjugation-table.is-parts-table td:nth-child(5) {
  background: #f0faf8;
  color: #0a5b53;
  font-weight: 750;
}

.conjugation-table.is-parts-table td:nth-child(3),
.conjugation-table.is-parts-table td:nth-child(6) {
  background: #fff8e8;
  color: #7a4b05;
  font-weight: 750;
}

.conjugation-table th,
.conjugation-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.conjugation-table th {
  background: #f0faf8;
  color: #38475a;
  font-weight: 800;
}

.conjugation-table tbody tr:last-child th,
.conjugation-table tbody tr:last-child td {
  border-bottom: 0;
}

.conjugation-table.aux-comparison-table th:nth-child(2),
.conjugation-table.aux-comparison-table td:nth-child(2) {
  border-left: 3px solid rgba(15, 118, 110, 0.28);
  background: #e9fbf7;
  color: #0a5b53;
  font-weight: 850;
}

.theory-grid article:has(.conjugation-table-wrap) {
  grid-column: 1 / -1;
}

.example-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.example-note-list {
  margin-top: 14px;
}

.abbr-note-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #bfd8ff;
  border-radius: var(--radius);
  background: #f8fbff;
}

.abbr-note-card > strong {
  color: #24446f;
  font-size: 14px;
}

.abbr-note-card dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 0;
}

.abbr-note-card div {
  display: grid;
  grid-template-columns: minmax(58px, max-content) 1fr;
  align-items: start;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(36, 68, 111, 0.08);
}

.abbr-note-card dt {
  color: #b13e5e;
  font-weight: 950;
}

.abbr-note-card dd {
  margin: 0;
  color: #405064;
  font-size: 13px;
  line-height: 1.35;
}

.pc-example-form {
  padding: 2px 4px;
  border-radius: 4px;
  background: #ffe8dd;
  color: #a33b24;
  font-weight: 800;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.etre-participle-highlight {
  padding: 2px 5px;
  border-radius: 5px;
  background: #e1f5ff;
  color: #176b9f;
  font-weight: 900;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.agreement-ending-highlight {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #916300;
  font-weight: 950;
  box-decoration-break: initial;
  -webkit-box-decoration-break: initial;
}

.french-verb-highlight {
  padding: 2px 6px;
  border-radius: 999px;
  background: #eaf3ff;
  color: #235ca8;
  font-weight: 950;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.reflexive-particle-highlight {
  padding: 2px 6px;
  border-radius: 999px;
  background: #fff0f6;
  color: #b13e5e;
  font-weight: 900;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.rule-note-list .french-verb-highlight,
.rule-note-list .reflexive-particle-highlight,
.rule-note-list .agreement-ending-highlight {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-decoration-break: initial;
  -webkit-box-decoration-break: initial;
}

.etre-aux-highlight {
  padding: 2px 5px;
  border-radius: 5px;
  background: #e8f8f3;
  color: #087a70;
  font-weight: 900;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.lesson-visual-slot {
  margin-top: 14px;
}

.lesson-visual-slot:empty {
  display: none;
}

.lesson-visual {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.theory-ai-card {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.theory-ai-heading {
  justify-content: flex-start;
}

.theory-ai-epictetus {
  display: block;
  width: 82px;
  height: 104px;
  flex: 0 0 82px;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
}

.assistant-textarea-compact {
  min-height: 92px;
}

.theory-answer {
  min-height: 86px;
}

.exercise-tabs {
  display: grid;
  grid-template-columns: repeat(10, minmax(38px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.exercise-tab {
  position: relative;
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.exercise-tab.has-error-dot::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e43d45;
  box-shadow: 0 0 0 3px #fff1f2;
}

.exercise-error-note {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.exercise-tab.is-active {
  border-color: var(--teal);
  background: var(--mint-soft);
  color: var(--teal-dark);
}

.exercise-tab:nth-child(5n + 2):not(.is-active):not(.is-locked) {
  background: #fff8e8;
}

.exercise-tab:nth-child(5n + 3):not(.is-active):not(.is-locked) {
  background: var(--sky-soft);
}

.exercise-tab:nth-child(5n + 4):not(.is-active):not(.is-locked) {
  background: var(--rose-soft);
}

.exercise-tab:nth-child(5n):not(.is-active):not(.is-locked) {
  background: var(--lilac-soft);
}

.exercise-tab.is-locked {
  border-style: dashed;
  background: #f8fafc;
  color: #7b8797;
}

.exercise-tab.is-locked::after {
  content: " закрыто";
  font-size: 11px;
  font-weight: 700;
}

.task-list {
  display: grid;
  gap: 12px;
}

.locked-panel {
  padding: 18px;
  border: 1px solid #f1c78d;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff9ed 0%, #fff0e8 100%);
}

.locked-panel h3 {
  margin-bottom: 10px;
  font-size: 20px;
}

.locked-list-wrap {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid #f0dfc2;
  border-radius: var(--radius);
  background: #fff;
}

.locked-list-wrap h4 {
  margin: 0 0 8px;
  color: #5d4630;
  font-size: 14px;
}

.locked-list-wrap ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.locked-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 10px;
}

.purchase-button {
  margin-top: 10px;
}

.flashcard-panel {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #cfbdf3;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fbf7ff 0%, #f1fbff 100%);
}

.flashcard-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.flashcard-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  gap: 8px;
}

.flash-card {
  --card-accent: #7a4fb3;
  --card-bg: #f6efff;
  min-height: 96px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 38%, #dce3e9);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(42, 52, 67, 0.08);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.flash-card::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 5px;
  background: var(--card-accent);
  content: "";
}

.flash-card:hover,
.flash-card:focus-visible {
  box-shadow: 0 11px 22px rgba(42, 52, 67, 0.14);
  transform: translateY(-3px);
}

.flash-card:nth-child(6n + 1) { --card-accent: #c54468; --card-bg: #fff0f5; }
.flash-card:nth-child(6n + 2) { --card-accent: #147d73; --card-bg: #eaf8f4; }
.flash-card:nth-child(6n + 3) { --card-accent: #b66c12; --card-bg: #fff6dc; }
.flash-card:nth-child(6n + 4) { --card-accent: #316db1; --card-bg: #edf5ff; }
.flash-card:nth-child(6n + 5) { --card-accent: #744eb0; --card-bg: #f4efff; }
.flash-card:nth-child(6n + 6) { --card-accent: #b34c2f; --card-bg: #fff0e9; }

.flash-card-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 10px;
  transition: transform 160ms ease, opacity 160ms ease;
}

.flash-card strong {
  color: var(--card-accent);
  font-size: 20px;
}

.flash-card small {
  color: var(--muted);
}

.flash-card-back {
  background: var(--card-accent);
  color: #fff;
  opacity: 0;
  transform: translateY(100%);
}

.flash-card-back small {
  color: rgba(255, 255, 255, 0.84);
}

.flash-card-back strong {
  color: #fff;
}

.flash-card.is-flipped .flash-card-front {
  opacity: 0;
  transform: translateY(-100%);
}

.flash-card.is-flipped .flash-card-back {
  opacity: 1;
  transform: translateY(0);
}

.game-quest-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #bde0d8;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #eefcf7 0%, #fff8db 52%, #fff0f6 100%);
}

.game-quest-panel h3 {
  margin: 0 0 4px;
  color: #173c43;
}

.game-quest-panel p {
  margin: 0;
  color: #435366;
}

.game-progress-tracker {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.exercise-ai-help {
  display: grid;
  gap: 9px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #bde0d8;
  border-radius: var(--radius);
  background: #f3fbf9;
}

.exercise-ai-help .primary-button {
  justify-self: start;
}

.exercise-ai-help .assistant-answer {
  min-height: 58px;
}

.game-progress-tracker .game-stat-grid {
  width: min(520px, 100%);
  margin-left: auto;
}

.game-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-content: center;
}

.game-stat-grid span {
  display: grid;
  min-height: 56px;
  place-items: center;
  padding: 8px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.76);
  color: #435366;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.game-stat-grid strong {
  display: block;
  color: var(--teal-dark);
  font-size: 18px;
}

.task-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.task-card.is-game-pair {
  border-color: rgba(22, 160, 133, 0.35);
  background: linear-gradient(180deg, #ffffff 0%, #f0fbf7 100%);
}

.task-card.is-game-builder {
  border-color: rgba(214, 158, 0, 0.34);
  background: linear-gradient(180deg, #ffffff 0%, #fff8dd 100%);
}

.task-card.is-game-detective {
  border-color: rgba(124, 92, 196, 0.3);
  background: linear-gradient(180deg, #ffffff 0%, #f5f0ff 100%);
}

.task-card.is-game-match {
  border-color: rgba(217, 70, 125, 0.28);
  background: linear-gradient(180deg, #ffffff 0%, #fff3f8 100%);
}

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

.task-number {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--radius);
  background: var(--mint-soft);
  color: var(--teal-dark);
  font-weight: 800;
}

.task-card:nth-child(4n + 2) .task-number {
  background: var(--sky-soft);
  color: #1456a3;
}

.task-card:nth-child(4n + 3) .task-number {
  background: var(--peach-soft);
  color: #9c3f25;
}

.task-card:nth-child(4n + 4) .task-number {
  background: var(--lilac-soft);
  color: #56378f;
}

.task-prompt {
  margin: 2px 0 0;
  color: #29374a;
}

.task-type {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.task-game-tag {
  display: inline-flex;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--teal-dark);
  font-size: 11px;
  text-transform: none;
}

.result-badge {
  min-width: 82px;
  padding: 5px 8px;
  border-radius: var(--radius);
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.result-badge.is-correct {
  background: #e8f6ee;
  color: var(--right);
}

.result-badge.is-almost {
  background: #fff4df;
  color: var(--almost);
}

.result-badge.is-wrong {
  background: #fff0ed;
  color: var(--wrong);
}

.task-result-actions {
  display: grid;
  justify-items: stretch;
  gap: 6px;
}

.task-review-button {
  max-width: 150px;
  padding: 6px 9px;
  border: 1px solid rgba(180, 35, 24, 0.24);
  border-radius: var(--radius);
  background: #fff;
  color: #8f241d;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.task-review-button:hover,
.task-review-button:focus-visible,
.task-review-button.is-selected {
  border-color: var(--teal);
  background: var(--mint-soft);
  color: var(--teal-dark);
}

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

.choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(90px, 1fr));
  gap: 8px;
}

.quizlet-choice-row {
  grid-template-columns: repeat(3, minmax(96px, 1fr));
}

.choice-row-pair {
  grid-template-columns: repeat(4, minmax(90px, 1fr));
}

.choice-row-avoir {
  grid-template-columns: repeat(3, minmax(76px, 1fr));
}

.choice-row-reflexive-pronoun {
  grid-template-columns: repeat(3, minmax(72px, 1fr));
}

.choice-row-ending-gap {
  grid-template-columns: repeat(4, minmax(92px, 1fr));
}

.choice-row-verb-form {
  grid-template-columns: repeat(3, minmax(110px, 1fr));
}

.choice-row-verb-form .choice-button {
  min-height: 52px;
  padding: 8px 10px;
  background: #f8fcfb;
  font-size: 15px;
}

.choice-row-avoir .choice-button {
  min-height: 48px;
  border-color: #bfe3dc;
  background: #f7fcfb;
  font-size: 16px;
}

.choice-row-reflexive-pronoun .choice-button {
  min-height: 48px;
  border-color: #f0b8cf;
  background: #fff7fb;
  color: #9c3159;
  font-size: 17px;
}

.choice-row-ending-gap .choice-button {
  min-height: 54px;
  border: 2px solid #9bcfc5;
  border-radius: 999px;
  background: #f5fcfa;
  color: #0f6b5f;
  font-size: 15px;
}

.choice-row-ending-gap .choice-button:first-child {
  font-size: 13px;
}

.choice-row-sentence {
  grid-template-columns: 1fr;
}

.choice-row-metro-train {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  align-items: stretch;
}

.choice-row-flag {
  position: relative;
  grid-template-columns: repeat(4, minmax(70px, 1fr));
  padding-top: 18px;
}

.choice-row-flag::before {
  position: absolute;
  top: 8px;
  right: 8px;
  left: 8px;
  height: 4px;
  border-radius: 999px;
  background: #244650;
  content: "";
}

.choice-button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.quizlet-choice-row .choice-button {
  min-height: 64px;
  padding: 10px;
  background: #fbfcfd;
  font-size: 17px;
}

.choice-row-pair .choice-button {
  min-height: 58px;
  background: #f3fbf9;
}

.choice-row-sentence .choice-button {
  min-height: 54px;
  padding: 11px 12px;
  background: #fff;
  text-align: left;
  font-size: 15px;
  line-height: 1.35;
}

.choice-row-metro-train .choice-button {
  position: relative;
  min-height: 72px;
  padding: 14px 14px 14px 46px;
  border: 2px solid #285c8f;
  border-radius: 18px 8px 8px 18px;
  background: #2c82c9;
  color: #fff;
  text-align: left;
  font-size: 13px;
  line-height: 1.28;
  box-shadow: inset 0 -12px 0 rgba(0, 0, 0, 0.12);
}

.choice-row-metro-train .choice-button::before {
  position: absolute;
  top: 17px;
  left: 13px;
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  content: "";
}

.choice-row-metro-train .choice-button::after {
  position: absolute;
  right: 12px;
  bottom: 8px;
  left: 46px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  content: "";
}

.choice-row-metro-train .choice-button:nth-child(2) {
  border-color: #b13e5e;
  background: #d9467d;
}

.choice-row-metro-train .choice-button:nth-child(3) {
  border-color: #168f82;
  background: #20a591;
}

.choice-row-metro-train .choice-button:hover,
.choice-row-metro-train .choice-button.is-selected {
  border-color: #f2b94b;
  background: #284e87;
  color: #fff;
  transform: translateY(-2px);
}

.choice-row-flag .choice-button {
  position: relative;
  min-height: 58px;
  border: 2px solid #168f82;
  border-radius: 4px 4px 8px 8px;
  background: #eaf8f2;
  color: #0f6b5f;
  font-size: 20px;
}

.choice-row-flag .choice-button::before {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 3px;
  height: 16px;
  background: #244650;
  content: "";
  transform: translateX(-50%);
}

.choice-row-flag .choice-button:nth-child(even) {
  border-color: #d9467d;
  background: #fff0f6;
  color: #b13e5e;
}

.choice-row-flag .choice-button:hover,
.choice-row-flag .choice-button.is-selected {
  border-color: #d6a03b;
  background: #fff7d7;
  color: #7b5a22;
}

.choice-button:hover,
.choice-button.is-selected {
  border-color: var(--teal);
  background: var(--mint-soft);
  color: var(--teal-dark);
}

.choice-button.is-selected {
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.task-card.is-game-wheel {
  border-color: #efc879;
  background: #fffdf7;
}

.task-card.is-game-portal {
  border-color: #78c6d5;
  background: #f6fcfd;
}

.choice-row-portal {
  grid-template-columns: repeat(3, minmax(74px, 1fr));
}

.choice-row-portal .choice-button {
  position: relative;
  min-height: 106px;
  overflow: hidden;
  border: 4px solid #bff4ed;
  border-radius: 50%;
  background: radial-gradient(circle, #123d63 0 15%, #59dcc8 16% 28%, #0f766e 49%, #123d63 76%);
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, 0.28),
    0 8px 22px rgba(20, 83, 111, 0.2);
  color: #fff;
  font-size: 17px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  animation: portal-breathe 1.8s ease-in-out infinite alternate;
}

.choice-row-portal .choice-button:nth-child(2) {
  border-color: #ffd8a0;
  background: radial-gradient(circle, #743556 0 15%, #ffc857 16% 28%, #dc6f37 49%, #743556 76%);
  animation-delay: 220ms;
}

.choice-row-portal .choice-button:nth-child(3) {
  border-color: #d9c8ff;
  background: radial-gradient(circle, #274367 0 15%, #b89cf4 16% 28%, #7257a5 49%, #274367 76%);
  animation-delay: 440ms;
}

.choice-row-portal .choice-button:hover {
  border-color: #fff;
  color: #fff;
  transform: translateY(-3px) scale(1.04);
}

.choice-row-portal .choice-button.is-selected {
  border-color: #ffe45c;
  color: #fff;
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    inset 0 0 0 6px rgba(255, 228, 92, 0.36),
    0 0 0 5px rgba(255, 228, 92, 0.78),
    0 14px 32px rgba(198, 97, 38, 0.34);
}

@keyframes portal-breathe {
  from {
    filter: saturate(0.92) brightness(0.96);
  }

  to {
    filter: saturate(1.15) brightness(1.08);
  }
}

.task-card.is-game-wow {
  border-color: #9ccfc5;
  background: #fff;
}

.wow-stage {
  --wow-a: #0f766e;
  --wow-b: #f06f4f;
  --wow-bg: #e8f8f3;
  display: grid;
  min-height: 154px;
  overflow: hidden;
  grid-template-columns: minmax(170px, 0.72fr) minmax(0, 1.28fr);
  border: 1px solid color-mix(in srgb, var(--wow-a) 32%, #d9e0e7);
  border-radius: var(--radius);
  background: #fff;
}

.wow-scene {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 154px;
  overflow: hidden;
  place-items: center;
  background: var(--wow-bg);
}

.wow-stage-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px;
}

.wow-stage-step {
  color: var(--wow-a);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.wow-stage-copy strong {
  margin-top: 2px;
  font-size: 18px;
}

.wow-stage-copy p {
  margin: 5px 0 9px;
  color: #4b596b;
  font-size: 13px;
}

.wow-focus {
  align-self: flex-start;
  max-width: 100%;
  padding: 4px 8px;
  overflow-wrap: anywhere;
  border-left: 3px solid var(--wow-b);
  background: color-mix(in srgb, var(--wow-bg) 68%, #fff);
  color: #263548;
  font-size: 13px;
  font-weight: 900;
}

.choice-row-wow {
  grid-template-columns: repeat(3, minmax(86px, 1fr));
}

.choice-row-wow .choice-button {
  min-height: 62px;
  padding: 9px 11px;
  border-color: color-mix(in srgb, var(--teal) 28%, var(--line));
  background: #fff;
}

.day-story-line {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid #b8d4e8;
  border-radius: var(--radius);
  background: #f5faff;
}

.day-story-number {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #2f77b5;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.day-story-sentence {
  display: flex;
  min-height: 42px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: #253b52;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.5;
}

.story-gap-picker {
  position: relative;
  display: inline-block;
}

.story-gap-picker summary {
  min-width: 76px;
  padding: 4px 10px;
  border: 2px dashed #2f77b5;
  border-radius: var(--radius);
  background: #fff;
  color: #195888;
  cursor: pointer;
  font-weight: 900;
  list-style: none;
  text-align: center;
}

.story-gap-picker summary::-webkit-details-marker {
  display: none;
}

.story-gap-options {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: 8;
  display: grid;
  width: max-content;
  min-width: 210px;
  grid-template-columns: repeat(3, minmax(58px, 1fr));
  gap: 7px;
  padding: 9px;
  border: 1px solid #a9c8df;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 12px 28px rgba(41, 69, 98, 0.18);
  transform: translateX(-50%);
}

.story-gap-options .choice-button {
  min-height: 38px;
}

.is-game-wow .word-zone-answer {
  border-color: rgba(15, 118, 110, 0.48);
  background: #f0fbf7;
}

.wow-stage-lab {
  --wow-a: #9c3f78;
  --wow-b: #0f8f83;
  --wow-bg: #fff0f6;
}

.wow-stage-lab-brief {
  min-height: 0;
  grid-template-columns: 1fr;
  background: var(--wow-bg);
}

.wow-stage-lab-brief .wow-stage-copy {
  min-height: 132px;
}

.wow-stage-lab-compact {
  width: max-content;
  max-width: 100%;
  min-height: 0;
  border-radius: 999px;
}

.wow-stage-lab-compact .wow-stage-copy {
  min-height: 0;
  padding: 5px 9px;
}

.lab-workbench {
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(250px, 1.28fr);
  align-items: center;
  gap: 22px;
  padding: 18px;
  border: 1px solid #dfb8ce;
  border-radius: var(--radius);
  background: #fffafd;
}

.lab-flask-station {
  position: relative;
  display: grid;
  min-height: 238px;
  place-items: end center;
  padding-top: 42px;
  isolation: isolate;
}

.lab-flask-station::after {
  position: absolute;
  right: 8%;
  bottom: -6px;
  left: 8%;
  z-index: -1;
  height: 18px;
  border-radius: 50%;
  background: rgba(82, 59, 73, 0.14);
  filter: blur(7px);
  content: "";
}

.lab-flask-neck {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 66px;
  height: 72px;
  border: 5px solid #7b6170;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: rgba(255, 255, 255, 0.84);
  transform: translateX(-50%);
}

.lab-answer-flask {
  position: relative;
  display: flex;
  width: 196px;
  min-height: 164px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  overflow: hidden;
  padding: 48px 24px 24px;
  border: 5px solid #7b6170;
  border-radius: 14px 14px 66px 66px;
  background: #eef9f6;
  box-shadow: inset 0 -58px 0 #a7e2d7, 0 14px 26px rgba(93, 56, 79, 0.16);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.lab-answer-flask::before,
.lab-answer-flask::after {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  content: "";
}

.lab-answer-flask::before {
  right: 27px;
  bottom: 28px;
  width: 13px;
  height: 13px;
}

.lab-answer-flask::after {
  right: 48px;
  bottom: 47px;
  width: 8px;
  height: 8px;
}

.lab-answer-flask.is-drag-over {
  border-color: #0f8f83;
  box-shadow: inset 0 -62px 0 #79d3c3, 0 0 0 5px rgba(15, 143, 131, 0.16);
  transform: translateY(-3px);
}

.lab-flask-placeholder {
  position: relative;
  z-index: 2;
  color: #526273;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.lab-selected-form {
  position: relative;
  z-index: 3;
  min-width: 0;
  border-color: #0f8f83;
  background: #fff;
  color: #0b625b;
  text-align: center;
}

.lab-selected-form.is-single-form {
  min-width: 104px;
}

.lab-form-panel {
  display: grid;
  align-content: center;
  gap: 10px;
}

.lab-form-panel > strong {
  color: #63334f;
  font-size: 14px;
}

.lab-form-bank {
  min-height: 72px;
  grid-template-columns: repeat(3, minmax(86px, 1fr));
  border-color: #dfc7d5;
  background: #fff;
}

.lab-form-block {
  min-width: 92px;
  flex: 1 1 92px;
  border-color: #d8b6ca;
  background: #fff5fa;
  color: #63334f;
  text-align: center;
}

.lab-firework,
.lab-smoke {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.lab-firework i {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef5b4b;
  opacity: 0;
  --burst-x: 0px;
  --burst-y: -92px;
}

.lab-firework i:nth-child(2) { --burst-x: 66px; --burst-y: -66px; background: #f1b72e; }
.lab-firework i:nth-child(3) { --burst-x: 92px; --burst-y: 0px; background: #30a995; }
.lab-firework i:nth-child(4) { --burst-x: 66px; --burst-y: 66px; background: #4e91e8; }
.lab-firework i:nth-child(5) { --burst-x: 0px; --burst-y: 88px; background: #d85b92; }
.lab-firework i:nth-child(6) { --burst-x: -66px; --burst-y: 66px; background: #f08f3f; }
.lab-firework i:nth-child(7) { --burst-x: -92px; --burst-y: 0px; background: #7bbf58; }
.lab-firework i:nth-child(8) { --burst-x: -66px; --burst-y: -66px; background: #9b6dde; }

.lab-smoke i {
  position: absolute;
  bottom: 132px;
  left: calc(50% - 18px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(101, 109, 119, 0.7);
  opacity: 0;
  filter: blur(2px);
}

.lab-smoke i:nth-child(2) {
  left: calc(50% + 2px);
  width: 28px;
  height: 28px;
  animation-delay: 160ms !important;
}

.lab-smoke i:nth-child(3) {
  left: calc(50% - 38px);
  width: 24px;
  height: 24px;
  animation-delay: 310ms !important;
}

.task-card.is-wow-lab.is-result-correct .lab-answer-flask {
  border-color: #0f8f83;
  box-shadow: inset 0 -68px 0 #61d2bc, 0 0 0 5px rgba(15, 143, 131, 0.13), 0 16px 30px rgba(30, 137, 122, 0.2);
  animation: lab-success-pulse 720ms ease-in-out 2;
}

.task-card.is-wow-lab.is-result-correct .lab-firework i {
  animation: lab-firework-burst 1.15s ease-out 2;
}

.task-card.is-wow-lab:is(.is-result-wrong, .is-result-almost) .lab-answer-flask {
  border-color: #7b8087;
  box-shadow: inset 0 -58px 0 #c7cbcf, 0 14px 26px rgba(71, 76, 83, 0.18);
}

.task-card.is-wow-lab:is(.is-result-wrong, .is-result-almost) .lab-smoke i {
  animation: lab-smoke-rise 1.7s ease-out 2;
}

@keyframes lab-success-pulse {
  0%,
  100% { transform: scale(1); }
  50% { transform: scale(1.035) rotate(1deg); }
}

@keyframes lab-firework-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(1.15); }
}

@keyframes lab-smoke-rise {
  0% { opacity: 0; transform: translateY(10px) scale(0.65); }
  24% { opacity: 0.75; }
  100% { opacity: 0; transform: translateY(-90px) translateX(14px) scale(1.7); }
}

.wow-lab-rack {
  display: flex;
  align-items: end;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 6px solid #77485f;
}

.wow-flask {
  display: grid;
  width: 42px;
  height: 66px;
  place-items: end center;
  padding-bottom: 9px;
  border: 3px solid #fff;
  border-top-width: 12px;
  border-radius: 4px 4px 18px 18px;
  box-shadow: 0 8px 16px rgba(91, 40, 74, 0.16);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  animation: wow-float 2.2s ease-in-out infinite alternate;
}

.wow-flask-a { background: #db4f82; }
.wow-flask-b { background: #12a595; animation-delay: 180ms; }
.wow-flask-c { background: #e5a51d; animation-delay: 360ms; }

.wow-bubble {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #9c3f78;
  border-radius: 50%;
  animation: wow-rise 2s ease-in infinite;
}

.wow-bubble-a { top: 27px; left: 33%; }
.wow-bubble-b { top: 13px; left: 58%; animation-delay: 700ms; }

.wow-stage-train {
  --wow-a: #1b5fa7;
  --wow-b: #d95f43;
  --wow-bg: #eaf3ff;
}

.wow-train {
  display: flex;
  align-items: end;
  gap: 5px;
  animation: wow-travel 2.8s ease-in-out infinite alternate;
}

.wow-train span {
  display: grid;
  width: 48px;
  height: 46px;
  place-items: center;
  border: 2px solid #174d80;
  border-radius: 4px;
  background: #fff;
  color: #174d80;
  font-size: 11px;
  font-weight: 900;
}

.wow-train .wow-engine {
  width: 56px;
  height: 58px;
  border-color: #b94730;
  background: #f06f4f;
  color: #fff;
}

.wow-track {
  position: absolute;
  right: 0;
  bottom: 31px;
  left: 0;
  height: 5px;
  background: repeating-linear-gradient(90deg, #425b70 0 18px, transparent 18px 26px);
}

.wow-stage-metro {
  --wow-a: #b53d68;
  --wow-b: #1d8479;
  --wow-bg: #fff1e8;
}

.wow-metro-line {
  display: flex;
  width: 88%;
  align-items: center;
  justify-content: center;
}

.wow-metro-line span {
  display: grid;
  min-width: 54px;
  min-height: 54px;
  padding: 5px;
  place-items: center;
  border: 5px solid #b53d68;
  border-radius: 50%;
  background: #fff;
  color: #71304b;
  font-size: 10px;
  font-weight: 900;
}

.wow-metro-line span:nth-of-type(2) {
  border-color: #1d8479;
  color: #12635b;
  animation: wow-pulse 1.4s ease-in-out infinite alternate;
}

.wow-metro-line i {
  width: 20px;
  height: 6px;
  background: #e2a11d;
}

.wow-stage-wardrobe {
  --wow-a: #6a4e9c;
  --wow-b: #d95f43;
  --wow-bg: #f3efff;
}

.wow-wardrobe-rail {
  position: absolute;
  top: 36px;
  width: 78%;
  height: 6px;
  border-radius: 3px;
  background: #6a4e9c;
}

.wow-ending-tags {
  display: flex;
  gap: 8px;
  padding-top: 25px;
}

.wow-ending-tags span {
  display: grid;
  width: 38px;
  height: 52px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 5px;
  background: #d95f43;
  box-shadow: 0 7px 12px rgba(80, 51, 125, 0.16);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  transform-origin: 50% -18px;
  animation: wow-sway 2.2s ease-in-out infinite alternate;
}

.wow-ending-tags span:nth-child(even) { background: #168f82; animation-delay: 200ms; }

.wow-stage-mirror {
  --wow-a: #1e7190;
  --wow-b: #c75078;
  --wow-bg: #eaf8fb;
}

.wow-mirror-pair {
  display: grid;
  width: 88%;
  grid-template-columns: 1fr 8px 1fr;
  align-items: center;
  gap: 8px;
}

.wow-mirror-pair span {
  display: grid;
  min-height: 78px;
  padding: 7px;
  place-items: center;
  border: 3px solid #70b9ce;
  border-radius: 50% 50% 8px 8px;
  background: rgba(255, 255, 255, 0.8);
  color: #215e75;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
}

.wow-mirror-pair span:last-child {
  border-color: #d97898;
  color: #8e3150;
  animation: wow-pulse 1.8s ease-in-out infinite alternate;
}

.wow-mirror-pair i { height: 104px; background: #fff; box-shadow: 0 0 14px #7bd3df; }

.wow-stage-crossroads {
  --wow-a: #16783c;
  --wow-b: #d16b2f;
  --wow-bg: #eff9e9;
}

.wow-signpost {
  position: relative;
  width: 180px;
  height: 112px;
}

.wow-signpost i {
  position: absolute;
  bottom: 5px;
  left: 86px;
  width: 8px;
  height: 92px;
  background: #6e523e;
}

.wow-signpost span {
  position: absolute;
  display: grid;
  top: 18px;
  width: 82px;
  height: 34px;
  place-items: center;
  background: #fff;
  font-size: 11px;
  font-weight: 900;
}

.wow-road-left { left: 5px; border: 3px solid #d16b2f; color: #9b4720; transform: rotate(-8deg); }
.wow-road-right { right: 5px; border: 3px solid #168f55; color: #146b3c; transform: rotate(8deg); }

.wow-stage-photo {
  --wow-a: #304f8a;
  --wow-b: #d9467d;
  --wow-bg: #fff8d8;
}

.wow-camera {
  position: relative;
  display: grid;
  width: 138px;
  height: 92px;
  place-items: center;
  border: 5px solid #263f70;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0 48%, #dce8ff 49%);
  box-shadow:
    inset 0 8px 0 rgba(255, 255, 255, 0.8),
    0 12px 22px rgba(48, 79, 138, 0.18);
}

.wow-camera::before {
  position: absolute;
  top: -20px;
  left: 18px;
  width: 48px;
  height: 18px;
  border: 5px solid #263f70;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #f7fbff;
  content: "";
}

.wow-camera::after {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 24px;
  height: 14px;
  border: 3px solid #263f70;
  border-radius: 6px;
  background: #ffd76b;
  box-shadow: 0 0 18px rgba(255, 215, 107, 0.9);
  content: "";
  animation: wow-camera-flash 1.5s step-end infinite;
}

.wow-camera span { color: #304f8a; font-size: 12px; font-weight: 900; }
.wow-camera i {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 8px solid #d9467d;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, #82d8e6 24% 48%, #304f8a 50%);
}

.wow-prompt-line {
  margin: 6px 0 0;
  color: #15384f;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 900;
  line-height: 1.2;
}

.wow-camera b {
  position: absolute;
  top: -9px;
  right: 26px;
  width: 28px;
  height: 9px;
  border-radius: 8px 8px 0 0;
  background: #263f70;
}

.wow-camera em {
  position: absolute;
  top: 10px;
  left: 14px;
  width: 18px;
  height: 10px;
  border-radius: 999px;
  background: #263f70;
  content: "";
}

@keyframes wow-camera-flash {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 10px rgba(255, 215, 107, 0.55); }
  50% { filter: brightness(1.35); box-shadow: 0 0 26px rgba(255, 215, 107, 1); }
}

.wow-stage-elevator {
  --wow-a: #365d73;
  --wow-b: #d95f43;
  --wow-bg: #edf2f4;
}

.wow-elevator {
  position: relative;
  display: grid;
  width: 126px;
  height: 112px;
  grid-template-columns: 1fr 6px 1fr;
  align-items: center;
  border: 6px solid #365d73;
  background: #fff;
  color: #365d73;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.wow-elevator i { height: 100%; background: #365d73; }
.wow-suitcase { position: absolute; right: 22px; bottom: 17px; display: grid; width: 54px; height: 38px; place-items: center; border: 4px solid #9f402b; border-radius: 5px; background: #f06f4f; color: #fff; font-size: 9px; font-weight: 900; animation: wow-float 1.6s ease-in-out infinite alternate; }

.step10-elevator-answer {
  display: grid;
  gap: 12px;
}

.step10-elevator-stage {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 260px);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(54, 93, 115, 0.18);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f8fcff, #eef5f7);
}

.step10-elevator-formula {
  display: grid;
  gap: 5px;
}

.step10-elevator-formula small {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.step10-elevator-formula strong {
  color: #1d3446;
  font-size: 18px;
}

.step10-elevator-core {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.step10-elevator {
  display: grid;
  width: min(100%, 212px);
  min-height: 116px;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 5px solid #365d73;
  border-radius: 8px;
  background: #dbe8ee;
  box-shadow: 0 12px 24px rgba(37, 54, 70, 0.16);
}

.step10-elevator-door {
  border: 0;
  border-right: 2px solid #365d73;
  background: linear-gradient(180deg, #ffffff, #dbe9ef);
  color: #23465d;
  font-size: 18px;
  font-weight: 950;
  cursor: pointer;
}

.step10-elevator-door:last-child {
  border-right: 0;
}

.step10-elevator-door.is-selected {
  background: linear-gradient(180deg, #fff0dc, #f7bb70);
  color: #7c3b14;
}

.step10-elevator-object {
  position: absolute;
  right: 2px;
  bottom: 4px;
  z-index: 2;
  display: grid;
  min-width: 66px;
  min-height: 36px;
  place-items: center;
  padding: 5px 8px;
  border: 3px solid #9f402b;
  border-radius: 7px;
  background: #f06f4f;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  text-align: center;
  box-shadow: 0 7px 16px rgba(159, 64, 43, 0.25);
}

.step10-elevator-object.no-object {
  border-color: #728293;
  background: #eef2f5;
  color: #365d73;
}

.step10-elevator-hint {
  margin: 0;
  color: #9f402b;
  font-size: 13px;
  font-weight: 800;
}

.step10-error-stage {
  margin-top: 10px;
}

.step10-error-paper {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid #f4c6a7;
  border-radius: var(--radius);
  background: #fffaf5;
}

.step10-error-paper strong {
  color: #9f402b;
}

.step10-error-paper p {
  margin: 0;
  padding: 5px 7px;
  border-radius: 7px;
  color: #384658;
  font-size: 13px;
}

.step10-error-paper p.is-current {
  background: #ffe8dd;
  color: #7c2d16;
  font-weight: 850;
}

.step10-situation-stage {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(35, 69, 95, 0.14);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff, #f6fbff);
}

.step10-situation-stage.is-compact {
  grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
  align-items: center;
}

.step10-situation-stage.is-compact .step10-situation-copy {
  align-self: center;
}

.step10-situation-stage.is-compact .step10-formula-line {
  font-size: clamp(18px, 3vw, 28px);
  line-height: 1.2;
}

.step10-situation-image {
  position: relative;
  min-height: 120px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(145deg, #c9e3ef, #f7d58d);
}

.step10-situation-image.has-real-photo {
  background: #f6fbff;
}

.situation-real-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 120px;
  object-fit: cover;
  border-radius: inherit;
}

.situation-photo-cue {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: grid;
  min-width: 42px;
  min-height: 34px;
  place-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  background: rgba(20, 27, 36, 0.82);
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.24);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  backdrop-filter: blur(5px);
}

.step10-situation-image span,
.step10-situation-image i,
.step10-situation-image b {
  position: absolute;
  content: "";
}

.step10-situation-image span {
  left: 18%;
  bottom: 16%;
  width: 48px;
  height: 62px;
  border-radius: 24px 24px 12px 12px;
  background: #365d73;
}

.step10-situation-image i {
  right: 16%;
  bottom: 18%;
  width: 54px;
  height: 38px;
  border: 4px solid #9f402b;
  border-radius: 7px;
  background: #f06f4f;
}

.step10-situation-image b {
  inset: auto 0 0;
  height: 22px;
  background: rgba(255, 255, 255, 0.7);
}

.scene-crepe .step10-situation-image { background: linear-gradient(145deg, #ffe8b8, #c47a35); }
.scene-salt .step10-situation-image { background: linear-gradient(145deg, #eaf8fb, #83b5c7); }
.scene-garage .step10-situation-image { background: linear-gradient(145deg, #dfe8ee, #8aa1b3); }
.scene-exam .step10-situation-image { background: linear-gradient(145deg, #eef3ff, #b9c8ee); }
.scene-classroom .step10-situation-image { background: linear-gradient(145deg, #e8f6ff, #f9d36b); }
.scene-office .step10-situation-image { background: linear-gradient(145deg, #eaf4f0, #8ed0bf); }
.scene-message .step10-situation-image { background: linear-gradient(145deg, #f3e8ff, #f8b7d4); }
.scene-luggage .step10-situation-image,
.scene-bags .step10-situation-image { background: linear-gradient(145deg, #e2f4ff, #f0a35d); }
.scene-bus .step10-situation-image { background: linear-gradient(145deg, #d8f1ff, #ffd25f); }
.scene-dinner .step10-situation-image { background: linear-gradient(145deg, #fff2cf, #ef7f5f); }
.scene-meeting .step10-situation-image { background: linear-gradient(145deg, #eaf7ff, #9ec5ff); }
.scene-rain .step10-situation-image { background: linear-gradient(145deg, #dce8f8, #7f95b9); }
.scene-coats .step10-situation-image { background: linear-gradient(145deg, #f4e8ff, #a78bfa); }
.scene-tickets-missing .step10-situation-image { background: linear-gradient(145deg, #edf3f7, #c7d9e5); }
.scene-station-tickets .step10-situation-image { background: linear-gradient(180deg, #dceeff 0 58%, #778b99 58% 100%); }

.scene-tickets-missing .step10-situation-image span,
.scene-tickets-missing .step10-situation-image i,
.scene-station-tickets .step10-situation-image span,
.scene-station-tickets .step10-situation-image i {
  z-index: 2;
  bottom: 12%;
  width: 42px;
  height: 64px;
  border: 0;
  border-radius: 22px 22px 10px 10px;
}

.scene-tickets-missing .step10-situation-image span,
.scene-station-tickets .step10-situation-image span {
  left: 23%;
  background: #c95468;
}

.scene-tickets-missing .step10-situation-image i,
.scene-station-tickets .step10-situation-image i {
  right: 23%;
  background: #315d78;
}

.scene-tickets-missing .step10-situation-image span::before,
.scene-tickets-missing .step10-situation-image i::before,
.scene-station-tickets .step10-situation-image span::before,
.scene-station-tickets .step10-situation-image i::before {
  position: absolute;
  top: -18px;
  left: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #d8a078;
  box-shadow: inset 0 7px 0 #49362f;
  content: "";
}

.scene-tickets-missing .step10-situation-image span::after,
.scene-tickets-missing .step10-situation-image i::after {
  position: absolute;
  top: 17px;
  width: 30px;
  height: 8px;
  border-radius: 8px;
  background: inherit;
  content: "";
}

.scene-tickets-missing .step10-situation-image span::after {
  left: -22px;
  transform: rotate(-31deg);
}

.scene-tickets-missing .step10-situation-image i::after {
  right: -22px;
  transform: rotate(31deg);
}

.scene-tickets-missing .step10-situation-image b {
  top: 12px;
  right: 14px;
  bottom: auto;
  left: auto;
  z-index: 1;
  width: 48px;
  height: 28px;
  border: 3px dashed #6c7b86;
  border-radius: 5px;
  background: #fff;
  transform: rotate(6deg);
}

.scene-tickets-missing .step10-situation-image b::after {
  position: absolute;
  top: 10px;
  left: -5px;
  width: 58px;
  height: 5px;
  border-radius: 5px;
  background: #c83f4d;
  content: "";
  transform: rotate(-33deg);
}

.scene-station-tickets .step10-situation-image b {
  top: 14px;
  right: 8%;
  bottom: auto;
  left: 8%;
  z-index: 0;
  height: 50px;
  border: 3px solid #496274;
  border-radius: 9px 9px 4px 4px;
  background: repeating-linear-gradient(90deg, #eaf5fb 0 22px, #66869d 22px 27px);
  box-shadow: inset 0 -10px 0 #d45c55;
}

.scene-station-tickets .step10-situation-image b::after {
  position: absolute;
  right: 14px;
  bottom: -9px;
  left: 14px;
  height: 9px;
  border-radius: 50%;
  background: #283c4b;
  content: "";
  box-shadow: 0 3px 0 #eef3f6;
}

.scene-station-tickets .step10-situation-image span::after,
.scene-station-tickets .step10-situation-image i::after {
  position: absolute;
  top: 25px;
  width: 19px;
  height: 12px;
  border: 2px dashed #d9a428;
  border-radius: 3px;
  background: #fff7cc;
  content: "";
}

.scene-station-tickets .step10-situation-image span::after { right: -8px; transform: rotate(8deg); }
.scene-station-tickets .step10-situation-image i::after { left: -8px; transform: rotate(-8deg); }

.scene-classroom .step10-situation-image span,
.scene-office .step10-situation-image span {
  left: 14%;
  bottom: 18%;
  width: 70%;
  height: 34px;
  border-radius: 8px;
  background: #2f6f75;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.36);
}

.scene-classroom .step10-situation-image i,
.scene-office .step10-situation-image i {
  right: 18%;
  bottom: 44%;
  width: 42px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  background: #fff7d6;
  box-shadow: -42px 8px 0 #fff, 0 35px 0 #375c73;
}

.scene-message .step10-situation-image span {
  left: 16%;
  bottom: 45%;
  width: 72px;
  height: 42px;
  border-radius: 14px 14px 14px 4px;
  background: #fff;
  box-shadow: 42px 36px 0 #145a65;
}

.scene-message .step10-situation-image i {
  display: none;
}

.scene-bus .step10-situation-image span {
  left: 12%;
  bottom: 24%;
  width: 76%;
  height: 48px;
  border-radius: 14px 14px 9px 9px;
  background: #ffcf4a;
  box-shadow: inset 0 18px 0 rgba(255, 255, 255, 0.52);
}

.scene-bus .step10-situation-image i {
  left: 24%;
  right: auto;
  bottom: 16%;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: #223548;
  box-shadow: 74px 0 0 #223548;
}

.scene-dinner .step10-situation-image span,
.scene-crepe .step10-situation-image span {
  left: 22%;
  bottom: 18%;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #fff9e8;
  box-shadow: inset 0 0 0 12px #f59e0b;
}

.scene-dinner .step10-situation-image i,
.scene-crepe .step10-situation-image i {
  right: 18%;
  bottom: 24%;
  width: 26px;
  height: 62px;
  border: 0;
  border-radius: 12px;
  background: #365d73;
}

.scene-meeting .step10-situation-image span,
.scene-rain .step10-situation-image span {
  left: 20%;
  bottom: 18%;
  width: 34px;
  height: 70px;
  border-radius: 18px 18px 8px 8px;
  background: #365d73;
  box-shadow: 56px 0 0 #d4564f;
}

.scene-meeting .step10-situation-image i,
.scene-rain .step10-situation-image i {
  right: 18%;
  bottom: 56%;
  width: 42px;
  height: 12px;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: #fff;
  box-shadow: -20px 10px 0 rgba(255, 255, 255, 0.72);
}

.step10-situation-copy {
  display: grid;
  align-content: center;
  gap: 8px;
}

.step10-situation-copy strong {
  color: #17324d;
  font-size: 18px;
}

.step10-situation-copy p {
  margin: 0;
  color: #4a5667;
}

.step10-formula-line {
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  color: #17324d;
  font-weight: 900;
}

.wow-stage-paris {
  --wow-a: #284e87;
  --wow-b: #e4a51f;
  --wow-bg: #e9efff;
}

.wow-paris-skyline {
  position: absolute;
  right: 12px;
  bottom: 26px;
  left: 12px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 7px;
}

.wow-paris-skyline span { width: 34px; height: 54px; background: #395788; }
.wow-paris-skyline span:nth-child(2) { height: 76px; background: #c75078; }
.wow-paris-skyline span:nth-child(4) { height: 66px; background: #168f82; }
.wow-paris-skyline span:nth-child(5) { height: 42px; background: #d16b2f; }
.wow-paris-skyline i { width: 12px; height: 110px; background: #284e87; clip-path: polygon(45% 0, 55% 0, 62% 30%, 100% 100%, 0 100%, 38% 30%); }

.wow-paris-lights { position: absolute; top: 17px; right: 18px; left: 18px; display: flex; justify-content: space-around; }
.wow-paris-lights b { width: 8px; height: 8px; border-radius: 50%; background: #e4a51f; box-shadow: 0 0 9px #e4a51f; animation: wow-pulse 1.2s ease-in-out infinite alternate; }
.wow-paris-lights b:nth-child(even) { background: #d9467d; box-shadow: 0 0 9px #d9467d; animation-delay: 400ms; }

@keyframes wow-float { to { transform: translateY(-6px); } }
@keyframes wow-rise { from { transform: translateY(28px) scale(0.6); opacity: 0; } to { transform: translateY(-8px) scale(1.1); opacity: 1; } }
@keyframes wow-travel { to { transform: translateX(10px); } }
@keyframes wow-pulse { to { transform: scale(1.06); filter: brightness(1.08); } }
@keyframes wow-sway { to { transform: rotate(5deg); } }
@keyframes wow-flash { 50% { opacity: 0.22; transform: scale(0.7); } }

.task-card.is-game-life-wow {
  border-color: #8fc9bd;
  background: #fff;
}

.life-stage {
  --life-main: #0f766e;
  --life-accent: #d95f43;
  --life-soft: #e8f8f3;
  display: grid;
  min-height: 150px;
  grid-template-columns: minmax(170px, 0.72fr) minmax(0, 1.28fr);
  gap: 18px;
  margin-right: -14px;
  margin-left: -14px;
  padding: 16px 18px;
  border-top: 1px solid color-mix(in srgb, var(--life-main) 26%, #d9e0e7);
  border-bottom: 1px solid color-mix(in srgb, var(--life-main) 26%, #d9e0e7);
  background: var(--life-soft);
}

.life-stage-heading {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding-left: 15px;
  border-left: 5px solid var(--life-accent);
}

.life-stage-heading span {
  color: var(--life-main);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.life-stage-heading strong {
  margin: 3px 0;
  font-size: 17px;
  line-height: 1.25;
}

.life-stage-heading small {
  color: #526174;
  font-size: 12px;
  font-weight: 700;
}

.life-dialogue {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 0 0 1px rgba(23, 33, 43, 0.03);
}

.life-message {
  width: fit-content;
  max-width: 88%;
  margin: 0;
  padding: 8px 10px;
  overflow-wrap: anywhere;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.life-message-incoming {
  border-bottom-left-radius: 2px;
  background: #fff;
  color: #243448;
  animation: life-message-in 420ms ease-out both;
}

.life-message-reply {
  align-self: flex-end;
  border-bottom-right-radius: 2px;
  background: var(--life-main);
  color: #fff;
  animation: life-message-in 420ms 130ms ease-out both;
}

.photo-life-stage {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  margin-right: -14px;
  margin-left: -14px;
  padding: 18px 18px 20px;
  border-top: 1px solid #f0cc74;
  border-bottom: 1px solid #f0cc74;
  background:
    linear-gradient(135deg, rgba(255, 248, 216, 0.92), rgba(232, 248, 243, 0.9)),
    #fff8d8;
}

.photo-polaroid {
  width: min(420px, 100%);
  padding: 12px 12px 16px;
  border: 1px solid #d9e0e7;
  border-radius: 8px;
  background: #fff;
  box-shadow:
    0 18px 34px rgba(39, 55, 69, 0.18),
    0 2px 0 rgba(255, 255, 255, 0.9) inset;
  transform: rotate(-1.2deg);
}

.photo-polaroid-image {
  position: relative;
  display: grid;
  min-height: 230px;
  place-items: center;
  padding: 18px;
  overflow: hidden;
  border-radius: 6px;
  background:
    radial-gradient(circle at 20% 20%, rgba(217, 70, 125, 0.22), transparent 32%),
    radial-gradient(circle at 80% 30%, rgba(22, 143, 130, 0.24), transparent 30%),
    linear-gradient(135deg, #e9efff, #fff5f8);
  color: #20394a;
  text-align: center;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 -24px 44px rgba(34, 48, 62, 0.1);
}

.photo-polaroid-image.has-real-photo {
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  background: #eef2f5;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.9);
}

.photo-polaroid-image.has-real-photo::before,
.photo-polaroid-image.has-real-photo::after {
  display: none;
}

.photo-real-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-polaroid-image::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 52%),
    radial-gradient(circle at 70% 24%, rgba(255, 255, 255, 0.5), transparent 18%);
  content: "";
}

.photo-polaroid-image::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.42), transparent 28%, transparent 68%, rgba(255, 255, 255, 0.2)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 4px);
  content: "";
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.photo-tone-sea,
.photo-tone-beach,
.photo-tone-lake {
  background:
    linear-gradient(180deg, #8fd3ff 0 48%, #58b6c4 48% 65%, #f4d18c 65% 100%);
}

.photo-tone-sea .photo-landmark {
  position: absolute;
  right: 34px;
  bottom: 76px;
  width: 72px;
  height: 46px;
  border-radius: 8px 8px 4px 4px;
  background: #f4f0dc;
  box-shadow: inset 0 -12px 0 rgba(41, 75, 94, 0.16), -82px 38px 0 -16px #d66f53;
}

.photo-tone-sea .photo-detail-one {
  right: 102px;
  bottom: 90px;
  width: 42px;
  height: 26px;
  border-radius: 50% 50% 4px 4px;
  background: #f4f0dc;
}

.photo-tone-sea .photo-detail-two,
.photo-tone-lake .photo-detail-two {
  left: 24px;
  bottom: 54px;
  width: 94px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 126px -14px 0 -2px rgba(255, 255, 255, 0.45);
}

.photo-tone-museum,
.photo-tone-cinema {
  background:
    linear-gradient(180deg, #d7dce7 0 46%, #9aa6bb 46% 58%, #efe8dc 58% 100%);
}

.photo-tone-museum .photo-landmark {
  position: absolute;
  right: 42px;
  bottom: 68px;
  width: 130px;
  height: 82px;
  border-radius: 5px;
  background:
    linear-gradient(90deg, transparent 0 14%, #8d98ad 14% 18%, transparent 18% 32%, #8d98ad 32% 36%, transparent 36% 50%, #8d98ad 50% 54%, transparent 54% 68%, #8d98ad 68% 72%, transparent 72% 100%),
    linear-gradient(180deg, #f2eee6 0 18%, #d6d0c5 18% 100%);
  box-shadow: 0 -24px 0 -4px #b8c0ce;
}

.photo-tone-museum .photo-detail-one,
.photo-tone-cinema .photo-detail-one {
  left: 34px;
  bottom: 82px;
  width: 78px;
  height: 52px;
  border: 6px solid #6d7482;
  border-radius: 4px;
  background: linear-gradient(135deg, #efe0b8, #9fb5c9);
}

.photo-tone-cinema .photo-landmark {
  position: absolute;
  right: 36px;
  bottom: 70px;
  width: 116px;
  height: 84px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, #d9467d 0 12px, #f7c948 12px 24px),
    #d9467d;
  box-shadow: inset 0 18px 0 #263847;
}

.photo-tone-mountain {
  background:
    linear-gradient(180deg, #9ed2ff 0 45%, #8ccf92 45% 62%, #6d8c66 62% 100%);
}

.photo-tone-mountain .photo-landmark {
  position: absolute;
  right: 18px;
  bottom: 64px;
  width: 178px;
  height: 104px;
  background:
    linear-gradient(135deg, transparent 49%, #6f8b6a 50% 100%),
    linear-gradient(45deg, transparent 49%, #54745a 50% 100%);
  clip-path: polygon(0 100%, 28% 34%, 46% 72%, 62% 24%, 100% 100%);
}

.photo-tone-mountain .photo-detail-one {
  right: 58px;
  bottom: 132px;
  width: 42px;
  height: 20px;
  background: #f7fbff;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.photo-tone-station,
.photo-tone-street {
  background:
    linear-gradient(180deg, #dce7f1 0 42%, #c4a985 42% 57%, #7f8790 57% 100%);
}

.photo-tone-station .photo-landmark {
  position: absolute;
  right: 20px;
  bottom: 70px;
  width: 150px;
  height: 62px;
  border-radius: 22px 22px 8px 8px;
  background: #f3f6f8;
  box-shadow: inset 0 18px 0 #365d73, inset 0 -10px 0 #b84d3b;
}

.photo-tone-station .photo-detail-one {
  right: 42px;
  bottom: 62px;
  width: 110px;
  height: 8px;
  border-radius: 999px;
  background: #263847;
  box-shadow: 0 17px 0 #263847;
}

.photo-tone-street .photo-landmark {
  position: absolute;
  right: 28px;
  bottom: 74px;
  width: 138px;
  height: 96px;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,0.42) 18px 26px),
    linear-gradient(180deg, #9f7861, #715846);
  clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%);
}

.photo-tone-snow {
  background:
    linear-gradient(180deg, #dcefff 0 48%, #f7fbff 48% 100%);
}

.photo-tone-snow .photo-landmark {
  position: absolute;
  right: 30px;
  bottom: 66px;
  width: 148px;
  height: 76px;
  border-radius: 50% 50% 8px 8px;
  background:
    radial-gradient(circle at 28% 30%, #fff 0 16%, transparent 17%),
    radial-gradient(circle at 60% 34%, #fff 0 20%, transparent 21%),
    #d7ebff;
  box-shadow: -72px 34px 0 -24px #c5ddf5;
}

.photo-tone-home {
  background:
    linear-gradient(180deg, #f6d4a9 0 46%, #b8754c 46% 58%, #f4eadb 58% 100%);
}

.photo-tone-home .photo-landmark {
  position: absolute;
  right: 42px;
  bottom: 68px;
  width: 118px;
  height: 86px;
  border-radius: 4px;
  background: #f4d9b1;
  box-shadow: inset 0 -24px 0 rgba(120, 72, 41, 0.16);
}

.photo-tone-home .photo-landmark::before {
  position: absolute;
  top: -34px;
  left: -10px;
  width: 138px;
  height: 44px;
  background: #99533d;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  content: "";
}

.photo-tone-home .photo-detail-one {
  right: 80px;
  bottom: 68px;
  width: 30px;
  height: 46px;
  border-radius: 14px 14px 0 0;
  background: #6b3f2c;
}

.photo-tone-lake .photo-landmark {
  position: absolute;
  right: 22px;
  bottom: 74px;
  width: 152px;
  height: 80px;
  background: #527a56;
  clip-path: polygon(0 100%, 18% 54%, 36% 100%, 54% 34%, 76% 100%, 100% 56%, 100% 100%);
}

.photo-sun,
.photo-person,
.photo-ground,
.photo-landmark,
.photo-detail {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.photo-sun {
  top: 18px;
  right: 24px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffd66b;
  box-shadow: 0 0 22px rgba(255, 214, 107, 0.78);
}

.photo-person {
  bottom: 26px;
  width: 24px;
  height: 50px;
  border-radius: 999px 999px 10px 10px;
  background:
    linear-gradient(180deg, #d9467d 0 60%, #263847 60% 100%);
  box-shadow:
    0 12px 14px rgba(30, 48, 58, 0.2),
    inset -5px 0 0 rgba(0, 0, 0, 0.08);
}

.photo-person::before {
  position: absolute;
  top: -18px;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f0b890;
  content: "";
  transform: translateX(-50%);
}

.photo-person::after {
  position: absolute;
  top: -21px;
  left: 50%;
  width: 24px;
  height: 14px;
  border-radius: 14px 14px 8px 8px;
  background: #68402d;
  content: "";
  transform: translateX(-50%);
}

.photo-person-one {
  left: 38%;
}

.photo-person-two {
  left: 52%;
  height: 42px;
  background: #284e87;
  transform: translateY(4px) scale(0.92);
}

.photo-ground {
  right: 0;
  bottom: 0;
  left: 0;
  height: 22px;
  background: rgba(38, 63, 72, 0.18);
}

.photo-polaroid-image small,
.photo-polaroid-image strong {
  position: relative;
  z-index: 1;
  display: block;
}

.photo-polaroid-image small {
  color: #6b7883;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.photo-polaroid-image strong {
  max-width: 210px;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 6px 14px rgba(32, 57, 74, 0.12);
  font-size: 16px;
  line-height: 1.25;
}

.photo-polaroid p {
  margin: 10px 0 0;
  color: #536170;
  font-size: 12px;
  font-weight: 750;
}

.photo-life-copy {
  display: grid;
  gap: 7px;
  align-content: center;
  padding-left: 16px;
  border-left: 5px solid #d9467d;
}

.photo-life-copy span {
  color: #284e87;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.photo-life-copy strong {
  color: #20394a;
  font-size: 20px;
  line-height: 1.2;
}

.photo-life-copy small {
  color: #536170;
  font-size: 12px;
  font-weight: 750;
}

.choice-row-life {
  grid-template-columns: repeat(2, minmax(110px, 1fr));
}

.choice-row-life .choice-button {
  min-height: 58px;
  border-color: #9ccfc5;
  background: #f7fcfb;
  font-size: 16px;
}

.is-game-life-wow .word-zone-answer {
  border-color: rgba(15, 118, 110, 0.48);
  background: #effaf7;
}

.life-stage-chat { --life-main: #087a70; --life-accent: #f06f4f; --life-soft: #eaf9f5; }
.life-stage-cafe { --life-main: #9b4b2d; --life-accent: #168f82; --life-soft: #fff3e9; }
.life-stage-voice { --life-main: #6750a4; --life-accent: #e4a51f; --life-soft: #f3efff; }
.life-stage-group-chat { --life-main: #245aa5; --life-accent: #d9467d; --life-soft: #eaf3ff; }
.life-stage-station { --life-main: #b13e5e; --life-accent: #177c70; --life-soft: #fff0f6; }
.life-stage-album { --life-main: #9a5523; --life-accent: #4266a5; --life-soft: #fff8d8; }
.life-stage-morning { --life-main: #2d7292; --life-accent: #e3852e; --life-soft: #eaf8fb; }
.life-stage-travel { --life-main: #16783c; --life-accent: #c45b2c; --life-soft: #eff9e9; }
.life-stage-messages { --life-main: #814a9c; --life-accent: #0f8f83; --life-soft: #f5efff; }
.life-stage-luggage { --life-main: #365d73; --life-accent: #d95f43; --life-soft: #edf2f4; }
.life-stage-city-day { --life-main: #284e87; --life-accent: #d99a18; --life-soft: #e9efff; }

.phone-life-stage {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin-right: -14px;
  margin-left: -14px;
  padding: 18px;
  border-top: 1px solid #b8ddd5;
  border-bottom: 1px solid #b8ddd5;
  background: #eaf9f5;
}

.smartphone-shot {
  width: min(248px, 100%);
  min-height: 318px;
  overflow: hidden;
  justify-self: center;
  border: 8px solid #263340;
  border-radius: 28px;
  background: #f2f5f7;
  box-shadow: 0 14px 28px rgba(28, 49, 62, 0.2);
}

.phone-status {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  padding: 5px 13px;
  background: #fff;
  color: #25313e;
  font-size: 9px;
  font-weight: 900;
}

.phone-contact {
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-top: 1px solid #edf0f2;
  border-bottom: 1px solid #dfe6e8;
  background: #fff;
}

.phone-contact strong,
.phone-contact small {
  display: block;
}

.phone-contact strong {
  font-size: 13px;
}

.phone-contact small {
  color: #16816f;
  font-size: 9px;
  font-weight: 800;
}

.phone-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: #d9467d;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.phone-chat {
  display: flex;
  min-height: 188px;
  flex-direction: column;
  gap: 10px;
  padding: 14px 10px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)),
    #dcefeb;
}

.phone-message {
  max-width: 88%;
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.phone-message-incoming {
  align-self: flex-start;
  border-bottom-left-radius: 2px;
  background: #fff;
  color: #243448;
}

.phone-message-reply {
  align-self: flex-end;
  border-bottom-right-radius: 2px;
  background: #0f766e;
  color: #fff;
}

.phone-input {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  margin: 7px;
  padding: 6px 7px 6px 11px;
  border: 1px solid #d5dde1;
  border-radius: 20px;
  background: #fff;
  color: #86919d;
  font-size: 10px;
}

.phone-input b {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  font-size: 14px;
}

.phone-life-caption {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding-left: 16px;
  border-left: 5px solid #f06f4f;
}

.phone-life-caption span {
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.phone-life-caption strong {
  margin: 4px 0;
  font-size: 19px;
}

.phone-life-caption small {
  color: #526174;
  font-size: 13px;
  font-weight: 700;
}

.group-chat-life-stage {
  border-color: #b9cbea;
  background: #eef4ff;
}

.group-chat-phone {
  width: min(270px, 100%);
  min-height: 378px;
  border-color: #243650;
}

.group-chat-contact {
  background: #f8faff;
}

.group-chat-avatar {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  background: #245aa5;
  font-size: 12px;
}

.group-chat-thread {
  min-height: 245px;
  gap: 8px;
  background:
    linear-gradient(rgba(247, 250, 255, 0.9), rgba(247, 250, 255, 0.9)),
    #dce8f8;
}

.group-chat-message {
  max-width: 90%;
  align-self: flex-start;
  padding: 8px 10px;
  border: 1px solid #d8e2ef;
  border-radius: 10px 10px 10px 2px;
  background: #fff;
  color: #25364c;
  box-shadow: 0 3px 8px rgba(36, 71, 111, 0.08);
}

.group-chat-message small,
.group-chat-message p {
  display: block;
  margin: 0;
}

.group-chat-message small {
  margin-bottom: 3px;
  color: #245aa5;
  font-size: 8px;
  font-weight: 900;
}

.group-chat-message p {
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}

.group-chat-message.is-own {
  align-self: flex-end;
  border-color: #a9d9cf;
  border-radius: 10px 10px 2px 10px;
  background: #e4f7f1;
}

.group-chat-message.is-own small {
  color: #0f766e;
}

.group-chat-message.is-task {
  width: 100%;
  max-width: 100%;
  border: 2px dashed #d9467d;
  border-radius: 8px;
  background: #fff2f7;
  color: #61243d;
}

.group-chat-message.is-task small {
  color: #b52f63;
}

.group-chat-message.is-task p {
  font-size: 11px;
}

.group-chat-input b {
  background: #245aa5;
}

.group-chat-caption {
  border-left-color: #d9467d;
}

.group-chat-caption span {
  color: #245aa5;
}

.task-card.is-game-metro-train {
  border-color: #7cb6d9;
  background: #fffdf8;
}

.metro-train-stage {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(180px, 0.8fr);
  gap: 16px;
  margin-right: -14px;
  margin-left: -14px;
  padding: 16px;
  border-top: 1px solid #b7d5e7;
  border-bottom: 1px solid #b7d5e7;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.62) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(#f7fbff, #e8f2f7);
}

.metro-wall {
  position: relative;
  min-height: 218px;
  overflow: hidden;
  border: 2px solid #31526b;
  border-radius: 8px;
  background: #eef3f6;
}

.metro-wall::before,
.metro-wall::after {
  position: absolute;
  right: 0;
  left: 0;
  height: 7px;
  background: repeating-linear-gradient(90deg, #285c8f 0 34px, #d9467d 34px 68px, #168f82 68px 102px);
  content: "";
}

.metro-wall::before { top: 0; }
.metro-wall::after { bottom: 0; }

.metro-sign {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 22px 18px 14px;
  padding: 7px 12px;
  border: 3px solid #284e87;
  border-radius: 999px;
  background: #fff;
  color: #20394a;
}

.metro-sign span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #284e87;
  color: #fff;
  font-weight: 950;
}

.metro-sign strong {
  font-size: 15px;
}

.metro-clue-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 0 18px 14px;
}

.metro-clue-token {
  min-width: 98px;
  padding: 8px 10px;
  border: 2px solid #d6a03b;
  border-radius: 999px;
  background: #fff9e8;
  color: #244650;
  text-align: center;
}

.metro-clue-token small,
.metro-clue-token b {
  display: block;
}

.metro-clue-token small {
  color: #7b5a22;
  font-size: 8px;
  font-weight: 950;
  text-transform: uppercase;
}

.metro-clue-token b {
  font-size: 12px;
}

.metro-platform {
  position: absolute;
  right: 18px;
  bottom: 24px;
  left: 18px;
  display: grid;
  gap: 8px;
}

.metro-rail {
  height: 8px;
  border-top: 3px solid #2e4856;
  border-bottom: 3px solid #2e4856;
  background: repeating-linear-gradient(90deg, transparent 0 24px, rgba(46, 72, 86, 0.55) 24px 30px);
}

.metro-selected-train {
  min-height: 42px;
  padding: 10px 12px;
  border: 2px dashed #7da9bd;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: #60717c;
  font-size: 12px;
  font-weight: 850;
}

.metro-selected-train.has-train {
  border-style: solid;
  border-color: #284e87;
  border-radius: 18px 8px 8px 18px;
  background: #284e87;
  color: #fff;
}

.metro-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 8px 4px;
}

.metro-copy span {
  color: #b13e5e;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.metro-copy strong {
  color: #20394a;
  font-size: 21px;
  line-height: 1.2;
}

.metro-copy p {
  margin: 7px 0 0;
  color: #536170;
  font-size: 13px;
  font-weight: 750;
}

.task-card.is-game-epictetus-laser {
  border-color: #d9993c;
  background: #fffdf7;
}

.epictetus-laser-stage {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
  overflow: hidden;
  margin-right: -14px;
  margin-left: -14px;
  border-top: 1px solid #414763;
  border-bottom: 1px solid #414763;
  background: #20243a;
  color: #fff;
}

.laser-round {
  padding: 5px 8px;
  border: 1px solid #f3c663;
  border-radius: 999px;
  color: #ffe096;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.laser-maze-zone {
  min-width: 0;
  padding: 20px;
}

.laser-russian-prompt {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(57, 195, 181, 0.42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 20%, rgba(240, 107, 138, 0.22), transparent 26%),
    radial-gradient(circle at 88% 26%, rgba(242, 185, 75, 0.2), transparent 28%),
    linear-gradient(135deg, rgba(48, 54, 81, 0.94), rgba(32, 36, 58, 0.98));
  box-shadow: inset 0 0 26px rgba(57, 195, 181, 0.12);
}

.laser-russian-prompt strong {
  color: #fff;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 950;
  line-height: 1.14;
  text-shadow:
    0 0 6px #f06b8a,
    0 0 14px #39c3b5,
    0 0 24px rgba(242, 185, 75, 0.68);
}

.laser-path-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.laser-path {
  --path-color: #39c3b5;
  display: grid;
  min-height: 70px;
  align-items: center;
  grid-template-columns: 78px 64px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #59617e;
  border-radius: 8px;
  background: #303651;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.laser-path-2 { --path-color: #f06b8a; }
.laser-path-3 { --path-color: #f2b94b; }

.laser-path:hover,
.laser-path:focus-visible {
  border-color: var(--path-color);
  background: #3a405e;
  transform: translateX(3px);
}

.laser-path.is-selected {
  border: 2px solid var(--path-color);
  background: #404763;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--path-color) 24%, transparent);
}

.laser-path small,
.laser-path strong {
  display: block;
}

.laser-path small {
  color: var(--path-color);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.laser-path strong {
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
}

.laser-route {
  position: relative;
  display: block;
  width: 72px;
  height: 28px;
}

.laser-route::before {
  position: absolute;
  top: 13px;
  right: 8px;
  left: 2px;
  height: 3px;
  background: var(--path-color);
  box-shadow: 0 0 8px var(--path-color);
  content: "";
  transform: rotate(-5deg);
  transform-origin: left center;
}

.laser-route i {
  position: absolute;
  top: 6px;
  right: 0;
  width: 13px;
  height: 13px;
  border: 2px solid #ffc0ca;
  border-radius: 50%;
  background: #f12e54;
  box-shadow: 0 0 10px #f12e54;
}

.laser-route b {
  position: absolute;
  top: 9px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--path-color);
}

.laser-path.is-selected .laser-route i {
  animation: laser-dot-pulse 620ms ease-in-out infinite alternate;
}

.task-card.is-game-epictetus-laser.is-result-correct .laser-path.is-selected {
  border-color: #6fd59e;
  background: #214d43;
}

.task-card.is-game-epictetus-laser.is-result-wrong .laser-path.is-selected {
  border-color: #9ba2b8;
  background: #3b3f50;
  filter: grayscale(0.75);
}

@keyframes laser-dot-pulse {
  from { transform: scale(0.78); }
  to { transform: scale(1.18); }
}

.task-card.is-game-station-rebus {
  border-color: #91b9ae;
  background: #fffdf7;
}

.station-rebus-stage {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
  align-items: stretch;
  gap: 18px;
  margin-right: -14px;
  margin-left: -14px;
  padding: 16px;
  border-top: 1px solid #bdd8d1;
  border-bottom: 1px solid #bdd8d1;
  background: #eef8f4;
}

.station-rebus-stage.is-compact {
  grid-template-columns: 1fr;
}

.station-rebus-visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #c8d8e1;
  border-radius: 8px;
  background: #fff;
}

.station-rebus-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: contain;
}

.station-rebus-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 8px 4px;
}

.station-rebus-kicker {
  color: #b13e5e;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.station-rebus-copy > strong {
  margin: 6px 0 8px;
  color: #20394a;
  font-size: 19px;
  line-height: 1.3;
}

.station-rebus-copy > p {
  margin: 0;
  color: #536170;
  font-size: 13px;
  font-weight: 700;
}

.station-rebus-clues {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 92px));
  justify-content: center;
  gap: 7px;
  margin: 12px 0 10px;
}

.station-rebus-clue {
  display: flex;
  min-width: 0;
  aspect-ratio: 1;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 5px;
  border: 2px solid #5aa99b;
  border-radius: 50%;
  background: #fff;
  color: #244650;
  text-align: center;
}

.station-rebus-clue:nth-child(3n + 2) {
  border-color: #d94d76;
  background: #fff5f8;
}

.station-rebus-clue:nth-child(3n) {
  border-color: #d6a03b;
  background: #fff9e8;
}

.station-rebus-clue small,
.station-rebus-clue b {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.station-rebus-clue small {
  margin-bottom: 2px;
  color: #6b7883;
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
}

.station-rebus-clue b {
  font-size: 14px;
  line-height: 1.2;
}

.station-rebus-copy > small {
  color: #7b5a22;
  font-size: 11px;
  font-weight: 850;
}

.task-card.is-game-station-rebus.is-result-correct .station-rebus-clue {
  border-color: #15906f;
  background: #eaf8f2;
}

.task-card.is-game-railway {
  border-color: #7da9bd;
  background: #fffdf8;
}

.task-card.is-result-wrong {
  border-color: #e5484d !important;
  background: linear-gradient(180deg, #fffafa 0%, #ffe8e8 100%) !important;
  box-shadow:
    inset 0 0 0 2px rgba(229, 72, 77, 0.28),
    0 12px 28px rgba(229, 72, 77, 0.12);
}

.task-card.is-result-almost {
  border-color: #f97373 !important;
  background: linear-gradient(180deg, #fffaf7 0%, #ffecec 100%) !important;
  box-shadow:
    inset 0 0 0 2px rgba(249, 115, 115, 0.22),
    0 10px 24px rgba(249, 115, 115, 0.1);
}

.task-card:is(.is-result-wrong, .is-result-almost) .task-number {
  background: #dc2626;
  color: #fff;
}

.task-card:is(.is-result-wrong, .is-result-almost) .task-feedback {
  border: 1px solid rgba(220, 38, 38, 0.24);
  background: #fff4f4;
}

.railway-stage {
  display: grid;
  min-height: 190px;
  overflow: hidden;
  grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1.05fr);
  border: 1px solid #9bc7d5;
  border-radius: var(--radius);
  background: #fff;
}

.railway-landscape {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  background: linear-gradient(180deg, #bde9f5 0 58%, #79b960 59% 76%, #56763f 77% 100%);
}

.railway-cloud {
  position: absolute;
  width: 58px;
  height: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 18px -9px 0 rgba(255, 255, 255, 0.9), 34px 1px 0 rgba(255, 255, 255, 0.9);
}

.railway-cloud-one { top: 28px; left: 26px; }
.railway-cloud-two { top: 48px; right: 54px; transform: scale(0.72); }

.railway-station {
  position: absolute;
  right: 18px;
  bottom: 48px;
  display: grid;
  width: 72px;
  height: 76px;
  place-items: center;
  border: 4px solid #7b4f2e;
  background: #ffe0a1;
  color: #71431f;
  font-size: 10px;
}

.railway-station::before {
  position: absolute;
  top: -26px;
  width: 88px;
  height: 28px;
  background: #b84d3b;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  content: "";
}

.railway-station i {
  position: absolute;
  right: 8px;
  bottom: 0;
  width: 20px;
  height: 34px;
  background: #7b4f2e;
}

.railway-locomotive {
  position: absolute;
  bottom: 38px;
  left: 22px;
  display: grid;
  width: 105px;
  height: 58px;
  place-items: center;
  border: 4px solid #183f55;
  border-radius: 5px 12px 5px 5px;
  background: #1b7180;
  box-shadow: inset -25px 0 0 #ef6d4f;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.railway-locomotive::before {
  position: absolute;
  top: -30px;
  left: 17px;
  width: 20px;
  height: 32px;
  border: 4px solid #183f55;
  border-radius: 4px 4px 0 0;
  background: #31596b;
  content: "";
}

.railway-locomotive::after {
  position: absolute;
  bottom: -17px;
  left: 12px;
  width: 22px;
  height: 22px;
  border: 4px solid #183f55;
  border-radius: 50%;
  background: #f3c348;
  box-shadow: 55px 0 0 -4px #f3c348, 55px 0 0 0 #183f55;
  content: "";
}

.railway-locomotive i {
  position: absolute;
  top: 8px;
  right: 7px;
  width: 16px;
  height: 18px;
  border: 2px solid #fff;
  background: #bde9f5;
}

.railway-locomotive b {
  position: absolute;
  right: -14px;
  bottom: 3px;
  width: 14px;
  height: 8px;
  border: 3px solid #183f55;
  background: #f3c348;
}

.railway-scene-track {
  position: absolute;
  right: 0;
  bottom: 24px;
  left: 0;
  height: 14px;
  border-top: 4px solid #314554;
  border-bottom: 4px solid #314554;
  background: repeating-linear-gradient(90deg, transparent 0 14px, #7b5639 14px 20px);
}

.railway-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 18px 20px;
}

.railway-copy > span {
  color: #1b7180;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.railway-copy > strong {
  margin: 3px 0 12px;
  font-size: 20px;
}

.railway-copy small {
  color: var(--muted);
  font-weight: 750;
}

.railway-copy p {
  margin: 5px 0 0;
  padding-left: 10px;
  border-left: 4px solid #ef6d4f;
  color: #263548;
  font-size: 16px;
  font-weight: 850;
}

.word-builder.is-railway-builder {
  gap: 12px;
}

.dual-mirror-answer-row,
.routine-inline-answer-row {
  grid-template-columns: 1fr;
}

.dual-mirror-builder {
  display: grid;
  gap: 12px;
}

.dual-mirror-builder-row,
.routine-inline-builder {
  display: grid;
  grid-template-columns: minmax(190px, 0.55fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: var(--radius);
  background: #f7fcfb;
}

.dual-mirror-row-prompt,
.routine-inline-russian {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.1);
}

.dual-mirror-row-prompt span,
.routine-inline-russian span {
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.dual-mirror-row-prompt strong,
.routine-inline-russian strong {
  color: #233447;
  line-height: 1.3;
}

.dual-mirror-row-prompt small {
  color: #8a5d03;
  font-weight: 900;
}

.dual-mirror-row-work,
.routine-inline-work {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.dual-mirror-answer-zone,
.routine-inline-work .word-zone-answer {
  min-height: 54px;
}

.dual-mirror-bank,
.routine-inline-work .word-zone-bank {
  min-height: 48px;
}

.railway-track-zone {
  position: relative;
  min-height: 112px;
  align-items: center;
  padding: 16px 12px 30px;
  border: 2px solid #66889a;
  background:
    linear-gradient(180deg, #e8f5f8 0 60%, transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 18px, #7f5b3e 18px 24px),
    linear-gradient(180deg, transparent 0 72%, #344d5a 72% 77%, transparent 77% 87%, #344d5a 87% 92%, #d6c09a 92% 100%);
}

.railway-track-zone .word-placeholder {
  color: #365d73;
}

.railway-answer-engine {
  position: relative;
  display: grid;
  width: 64px;
  height: 48px;
  flex: 0 0 64px;
  place-items: center;
  margin-bottom: 8px;
  border: 3px solid #183f55;
  border-radius: 4px 10px 4px 4px;
  background: #1b7180;
  box-shadow: inset -16px 0 0 #ef6d4f;
  color: #fff;
}

.railway-answer-engine::before {
  position: absolute;
  bottom: -13px;
  left: 7px;
  width: 16px;
  height: 16px;
  border: 3px solid #183f55;
  border-radius: 50%;
  background: #f3c348;
  box-shadow: 32px 0 0 -3px #f3c348, 32px 0 0 0 #183f55;
  content: "";
}

.railway-answer-engine::after {
  position: absolute;
  right: -12px;
  bottom: 5px;
  width: 12px;
  height: 6px;
  background: #183f55;
  content: "";
}

.railway-answer-engine b {
  font-size: 12px;
}

.railway-yard {
  min-height: 106px;
  align-items: center;
  gap: 14px;
  padding: 14px 12px 24px;
  border-color: #b89d74;
  background:
    linear-gradient(180deg, #fff8df 0 70%, transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 18px, #8a6644 18px 24px),
    linear-gradient(180deg, transparent 0 79%, #52636d 79% 84%, transparent 84% 91%, #52636d 91% 96%, #d6c09a 96% 100%);
}

.train-word-car {
  position: relative;
  min-width: 74px;
  min-height: 48px;
  margin: 0 2px 10px;
  padding: 11px 12px;
  border: 3px solid #24495c;
  border-radius: 5px;
  background: #e3564a;
  box-shadow:
    inset 0 8px 0 rgba(255, 255, 255, 0.22),
    0 5px 8px rgba(41, 56, 65, 0.18);
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.train-word-car::before {
  position: absolute;
  bottom: -13px;
  left: 9px;
  width: 14px;
  height: 14px;
  border: 3px solid #24495c;
  border-radius: 50%;
  background: #f3c348;
  box-shadow: 42px 0 0 -3px #f3c348;
  content: "";
}

.train-word-car::after {
  position: absolute;
  right: -11px;
  bottom: 5px;
  width: 10px;
  height: 6px;
  border-top: 2px solid #24495c;
  border-bottom: 2px solid #24495c;
  background: #f3c348;
  content: "";
}

.railway-yard .train-word-car:nth-child(4n + 2) { background: #187f8d; }
.railway-yard .train-word-car:nth-child(4n + 3) { background: #6d55a3; }
.railway-yard .train-word-car:nth-child(4n + 4) { background: #be6b24; }
.railway-track-zone .train-word-car { background: #1b7180; }

.train-word-car:hover,
.train-word-car.is-picked {
  border-color: #183f55;
  background: #1b7180;
  color: #fff;
  transform: translateY(-2px);
}

.dual-mirror-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid rgba(93, 95, 239, 0.2);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(232, 245, 255, 0.88)),
    radial-gradient(circle at 20% 10%, rgba(255, 199, 95, 0.28), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(96, 196, 181, 0.28), transparent 36%);
}

.dual-mirror-card {
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 14px;
  border: 2px solid rgba(77, 138, 255, 0.28);
  border-radius: 18px 18px 28px 28px;
  background: linear-gradient(160deg, #ffffff, #e9f4ff 62%, #d9e9ff);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.8), 0 12px 24px rgba(55, 83, 120, 0.12);
}

.dual-mirror-card.is-reflexive {
  border-color: rgba(235, 113, 150, 0.32);
  background: linear-gradient(160deg, #fff, #fff0f5 60%, #ffe3ed);
}

.dual-mirror-card span,
.routine-copy span,
.routine-target small {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #627084;
}

.dual-mirror-card strong {
  color: #0f4f5a;
  font-size: 22px;
}

.dual-mirror-card p {
  margin: 0;
  color: #344256;
  line-height: 1.35;
}

.dual-mirror-divider {
  align-self: center;
  height: 92px;
  border-radius: 999px;
  background: linear-gradient(180deg, #60c4b5, #f6b44b, #eb7196);
  box-shadow: 0 0 18px rgba(96, 196, 181, 0.45);
}

.routine-text-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(16, 104, 116, 0.16);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #fffdf7, #edf9f6);
}

.routine-copy,
.routine-target {
  display: grid;
  gap: 10px;
}

.routine-copy strong {
  color: #0f4f5a;
  font-size: 20px;
}

.routine-lines {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 22px;
}

.routine-lines li {
  padding: 6px 8px;
  border-radius: 10px;
  color: #566173;
}

.routine-lines li.is-current {
  background: #ffe8a3;
  color: #422f00;
  font-weight: 800;
}

.routine-target {
  align-content: center;
  padding: 14px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(16, 104, 116, 0.1);
}

.routine-target p {
  margin: 0;
  color: #17233a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.museum-guide-stage {
  display: grid;
  grid-template-columns: minmax(160px, 230px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid rgba(35, 69, 95, 0.16);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(246, 239, 225, 0.92)),
    radial-gradient(circle at 18% 12%, rgba(214, 171, 88, 0.28), transparent 32%),
    radial-gradient(circle at 90% 90%, rgba(40, 90, 132, 0.2), transparent 34%);
}

.museum-orsay {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(237, 245, 250, 0.92)),
    radial-gradient(circle at 18% 12%, rgba(73, 127, 160, 0.22), transparent 32%),
    radial-gradient(circle at 88% 88%, rgba(217, 156, 71, 0.26), transparent 35%);
}

.museum-photo-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(38, 54, 77, 0.14);
}

.museum-photo-card small {
  color: #6b7280;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
}

.museum-photo {
  position: relative;
  min-height: 172px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(145deg, #d7c29a, #8c6239);
}

.museum-photo.has-real-image {
  background: #fff;
}

.museum-real-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: saturate(1.05) contrast(1.03);
}

.museum-photo.has-real-image::before,
.museum-photo.has-real-image::after,
.museum-photo.has-real-image .museum-art-shape,
.museum-photo.has-real-image .museum-photo-shine {
  display: none;
}

.museum-photo.has-real-image.image-load-failed::after {
  position: absolute;
  inset: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(38, 52, 71, 0.24);
  border-radius: 12px;
  background: #fff;
  color: #586577;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  content: "изображение экспоната не загрузилось";
}

.museum-photo::before,
.museum-photo::after,
.museum-art-shape,
.museum-photo-shine {
  position: absolute;
  content: "";
}

.museum-photo-shine {
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.36), transparent 42%);
}

.museum-photo::before {
  inset: 18px 28px;
  border: 8px solid rgba(255, 242, 206, 0.82);
  border-radius: 8px;
  background: rgba(61, 50, 47, 0.26);
}

.museum-art-shape {
  left: 50%;
  top: 54%;
  width: 66px;
  height: 88px;
  border-radius: 50% 50% 44% 44%;
  background: #f2dfbd;
  transform: translate(-50%, -50%);
  box-shadow: 0 -42px 0 -22px #4f5c53;
}

.museum-photo-sculpture,
.museum-photo-marble {
  background: linear-gradient(145deg, #eef2f4, #a9b5bd);
}

.museum-photo-sculpture::before,
.museum-photo-marble::before {
  inset: 24px 42px 18px;
  border: 0;
  border-radius: 48% 48% 20% 20%;
  background: linear-gradient(145deg, #ffffff, #cfd7dc);
}

.museum-photo-sculpture .museum-art-shape,
.museum-photo-marble .museum-art-shape {
  width: 76px;
  height: 112px;
  border-radius: 48% 48% 16% 16%;
  background: linear-gradient(145deg, #fff, #d7dee3);
  box-shadow: 0 54px 0 -20px #b8c1c8;
}

.museum-photo-clock {
  background: linear-gradient(145deg, #d8e6ef, #456b84);
}

.museum-photo-clock::before {
  inset: 28px;
  border: 10px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #34576d 0 4deg, #f8fafc 4deg 30deg);
}

.museum-photo-clock .museum-art-shape {
  width: 8px;
  height: 58px;
  border-radius: 999px;
  background: #2e4c60;
  transform: translate(-50%, -50%) rotate(38deg);
  transform-origin: 50% 80%;
  box-shadow: 22px 10px 0 -2px #2e4c60;
}

.museum-photo-night {
  background:
    radial-gradient(circle at 28% 26%, #ffe48c 0 8px, transparent 9px),
    radial-gradient(circle at 68% 34%, #f5d36f 0 5px, transparent 6px),
    linear-gradient(145deg, #14294f, #315a85 60%, #e0a33f 61%);
}

.museum-photo-landscape {
  background: linear-gradient(180deg, #bfe4f2 0 42%, #f5d77d 43% 56%, #7aae78 57%);
}

.museum-photo-dance {
  background: linear-gradient(145deg, #ffe5ef, #bb6f98);
}

.museum-photo-dance .museum-art-shape {
  width: 88px;
  height: 88px;
  border-radius: 54% 46% 58% 42%;
  background: #fff2f7;
  transform: translate(-50%, -50%) rotate(-18deg);
}

.museum-photo-stele,
.museum-photo-egypt {
  background: linear-gradient(145deg, #d3a15d, #5a3c25);
}

.museum-photo-stele .museum-art-shape,
.museum-photo-egypt .museum-art-shape {
  width: 86px;
  height: 120px;
  border-radius: 44% 44% 8% 8%;
  background: repeating-linear-gradient(180deg, #c58b4d 0 9px, #5f432c 10px 12px);
  box-shadow: none;
}

.museum-photo-pyramid {
  background: linear-gradient(145deg, #e6f3fb, #7fa8c1);
}

.museum-photo-pyramid .museum-art-shape {
  width: 120px;
  height: 100px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 2px rgba(61, 98, 120, 0.3);
}

.museum-photo-banquet {
  background: linear-gradient(145deg, #c55347, #f0c06f);
}

.museum-photo-gallery,
.museum-photo-station {
  background: linear-gradient(145deg, #f5ead5, #7c8ca3);
}

.museum-photo-gallery .museum-art-shape,
.museum-photo-station .museum-art-shape {
  width: 120px;
  height: 92px;
  border-radius: 8px 8px 44px 44px;
  background: repeating-linear-gradient(90deg, #fff 0 12px, #d2dde8 13px 20px);
  box-shadow: 0 -38px 0 -18px rgba(64, 81, 104, 0.66);
}

.museum-guide-copy {
  display: grid;
  align-content: center;
  gap: 10px;
}

.museum-guide-copy > span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.museum-guide-copy strong {
  color: #17324d;
  font-size: 24px;
}

.museum-guide-copy p {
  margin: 0;
  color: #3f4b5a;
  line-height: 1.4;
}

.museum-guide-sentence {
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  color: #17324d;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  box-shadow: inset 0 0 0 1px rgba(35, 69, 95, 0.1);
}

@keyframes life-message-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.wheel-answer-row {
  align-items: start;
}

.wheel-quiz {
  display: grid;
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #f0d390;
  border-radius: var(--radius);
  background: #fffaf0;
}

.aux-wheel-answer-row {
  grid-template-columns: 1fr;
}

.aux-builder-quiz {
  width: 100%;
}

.aux-builder-panel {
  align-content: center;
}

.aux-builder-hint {
  margin: 8px 0 0;
  color: #9a4d10;
  font-weight: 700;
}

.aux-builder-unlocked {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(16, 104, 116, 0.16);
  border-radius: 14px;
  background: #effbf8;
  color: #123d47;
}

.aux-builder-unlocked strong {
  color: #0f4f5a;
}

.aux-meaning-note {
  margin: 12px 0 7px;
  color: #536170;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.aux-meaning-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.aux-meaning-option {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid #d8e2ec;
  border-radius: var(--radius);
  background: #fff;
  text-align: left;
}

.aux-meaning-option.is-selected {
  border-color: var(--teal);
  background: var(--mint-soft);
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.1);
}

.aux-meaning-option strong {
  color: var(--teal-dark);
  font-size: 15px;
}

.aux-meaning-option span {
  color: #34455a;
  font-size: 12px;
  font-weight: 750;
}

.aux-meaning-option small {
  color: #59687a;
  font-size: 11px;
  line-height: 1.35;
}

.verb-wheel-stage {
  position: relative;
  display: grid;
  width: 220px;
  max-width: 100%;
  aspect-ratio: 1;
  place-items: center;
  justify-self: center;
  padding: 8px;
}

.verb-wheel-pointer {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  border-right: 13px solid transparent;
  border-left: 13px solid transparent;
  border-top: 25px solid #17212b;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 1px rgba(23, 33, 43, 0.18));
}

.verb-wheel {
  position: relative;
  width: 204px;
  max-width: 100%;
  aspect-ratio: 1;
  border: 6px solid #fff;
  border-radius: 50%;
  background: conic-gradient(
    #ff8068 0 10%,
    #ffd052 10% 20%,
    #43bea9 20% 30%,
    #66a7f2 30% 40%,
    #f68bad 40% 50%,
    #93ce5d 50% 60%,
    #ff9e55 60% 70%,
    #54c6df 70% 80%,
    #d092e8 80% 90%,
    #f3c348 90% 100%
  );
  box-shadow: 0 10px 24px rgba(45, 56, 71, 0.16);
}

.verb-wheel.has-spun {
  transform: rotate(var(--wheel-final));
}

.verb-wheel.is-spinning {
  animation: verb-wheel-spin 1.25s cubic-bezier(0.15, 0.72, 0.12, 1) forwards;
}

.verb-wheel-label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  min-height: 22px;
  margin: -11px 0 0 -36px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 999px;
  background: #0b6f66;
  box-shadow: 0 3px 8px rgba(23, 33, 43, 0.2);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
  transform: rotate(var(--wheel-angle)) translateY(-77px) rotate(var(--wheel-angle-back));
  transform-origin: center;
  white-space: nowrap;
}

.verb-wheel-label:nth-child(5n + 2) {
  background: #b9455e;
}

.verb-wheel-label:nth-child(5n + 3) {
  background: #245fa3;
}

.verb-wheel-label:nth-child(5n + 4) {
  background: #8b5c08;
}

.verb-wheel-label:nth-child(5n + 5) {
  background: #6d4a9c;
}

.verb-wheel-label.is-result {
  background: #17212b;
  color: #fff;
  box-shadow:
    0 0 0 3px #ffd052,
    0 4px 10px rgba(23, 33, 43, 0.28);
}

.verb-wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  border: 5px solid #fff;
  border-radius: 50%;
  background: #17212b;
  color: #fff;
  font-size: 22px;
  font-weight: 850;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.verb-wheel-center small {
  margin-top: -16px;
  color: #ffe08b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.wheel-center-dot {
  display: block;
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff7a8 0 18%, transparent 19%),
    linear-gradient(135deg, #ff5f8f, #ffd052 48%, #3dd6c6);
  box-shadow:
    0 0 0 4px rgba(255, 208, 82, 0.24),
    0 0 18px rgba(255, 95, 143, 0.54);
}

.wheel-quiz-panel {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
}

.wheel-result {
  margin: 0;
  color: #4b596b;
  font-size: 14px;
}

.wheel-result strong {
  display: block;
  margin-top: 3px;
  color: #a33b24;
  font-size: 23px;
}

.spin-wheel-button {
  min-height: 46px;
  padding: 9px 14px;
  border: 1px solid #d49a24;
  border-radius: var(--radius);
  background: #ffd052;
  color: #3d2b05;
  font-weight: 850;
}

.spin-wheel-button:hover:not(:disabled) {
  background: #ffc52c;
}

.spin-wheel-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

@keyframes verb-wheel-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(var(--wheel-spin-final));
  }
}

@media (prefers-reduced-motion: reduce) {
  .verb-wheel.is-spinning {
    animation-duration: 0.01ms;
  }

  .epictetus-portrait,
  .celebration-content,
  .firework,
  .purr-portrait,
  .purr-halo,
  .purr-wave i,
  .lab-answer-flask,
  .lab-firework i,
  .lab-smoke i,
  .choice-row-portal .choice-button,
  .wow-scene *,
  .life-message {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.quizlet-choice-row .choice-button:nth-child(2) {
  background: #fff8e8;
}

.quizlet-choice-row .choice-button:nth-child(3) {
  background: var(--sky-soft);
}

.quizlet-choice-row .choice-button:nth-child(2):hover,
.quizlet-choice-row .choice-button:nth-child(2).is-selected,
.quizlet-choice-row .choice-button:nth-child(3):hover,
.quizlet-choice-row .choice-button:nth-child(3).is-selected {
  border-color: var(--teal);
  background: var(--mint-soft);
}

.word-block-answer-row {
  align-items: start;
}

.word-builder {
  display: grid;
  gap: 8px;
}

.word-zone {
  display: flex;
  min-height: 48px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfd;
}

.word-zone-answer {
  border-color: rgba(15, 118, 110, 0.35);
  background: var(--mint-soft);
}

.word-builder.is-single-block .word-zone-answer {
  min-height: 54px;
  border-style: dashed;
}

.word-builder.is-single-block .word-zone-bank {
  align-items: stretch;
}

.word-builder.is-single-block .word-zone-bank .word-block {
  min-width: 92px;
  flex: 1 1 120px;
  text-align: center;
}

.word-zone.is-drag-over {
  border-color: var(--teal);
  background: #dff4ef;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.word-placeholder {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.word-block {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  cursor: grab;
  font-weight: 800;
  touch-action: manipulation;
}

.word-block:hover,
.word-block.is-picked {
  border-color: var(--teal);
  background: var(--mint-soft);
  color: var(--teal-dark);
}

.word-zone-bank .word-block:nth-child(4n + 2) {
  background: #fff8e8;
}

.word-zone-bank .word-block:nth-child(4n + 3) {
  background: var(--sky-soft);
}

.word-zone-bank .word-block:nth-child(4n + 4) {
  background: var(--rose-soft);
}

.word-block:active {
  cursor: grabbing;
}

.word-builder.is-paper-builder {
  padding: 12px;
  border: 1px solid #ead8b8;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(127, 92, 45, 0.08) 1px, transparent 1px) 0 0 / 18px 18px,
    #fff9ec;
}

.word-builder.is-paper-builder .word-zone-answer {
  border-color: #dfbf87;
  background: rgba(255, 255, 255, 0.72);
}

.paper-word {
  position: relative;
  border: 1px solid #d8c08e;
  border-radius: 3px 8px 4px 7px;
  background: #fffefa;
  color: #374151;
  font-family: "Comic Sans MS", "Bradley Hand", "Segoe Print", cursive;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  clip-path: polygon(0 7%, 10% 2%, 21% 6%, 36% 1%, 52% 6%, 68% 2%, 82% 6%, 100% 3%, 98% 94%, 88% 99%, 72% 94%, 58% 99%, 43% 95%, 28% 99%, 14% 94%, 2% 98%);
  box-shadow: 0 5px 10px rgba(91, 69, 38, 0.16);
  transform: rotate(-1deg);
}

.paper-word:nth-child(3n + 2) {
  background: #fff7dc;
  transform: rotate(1.2deg);
}

.paper-word:nth-child(3n) {
  background: #f0fbf7;
  transform: rotate(-0.6deg);
}

.paper-word::before {
  position: absolute;
  top: -1px;
  right: 8px;
  left: 8px;
  height: 2px;
  background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(91, 69, 38, 0.22) 5px 8px);
  content: "";
}

.word-block.is-dragging {
  opacity: 0.45;
}

.word-block-drag-ghost {
  position: fixed;
  z-index: 50;
  margin: 0;
  pointer-events: none;
  box-shadow: var(--shadow);
  opacity: 0.95;
}

.word-clear-button {
  justify-self: start;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.word-clear-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.match-answer-row {
  align-items: start;
}

.match-board {
  display: grid;
  grid-template-columns: minmax(160px, 0.95fr) 38px minmax(220px, 1.3fr);
  align-items: stretch;
  gap: 10px;
}

.match-board.is-click-choice {
  grid-template-columns: minmax(140px, 0.72fr) minmax(220px, 1.4fr);
}

.match-column {
  display: grid;
  align-content: start;
  gap: 8px;
}

.match-column-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.match-left-card,
.match-drop-zone,
.match-choice {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.match-left-card {
  display: grid;
  gap: 5px;
  min-height: 76px;
  padding: 10px;
}

.match-left-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.match-left-card strong {
  color: var(--ink);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.match-drop-zone {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-color: rgba(15, 118, 110, 0.35);
  background: var(--mint-soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.match-drop-zone.is-drag-over {
  border-color: var(--teal);
  background: #dff4ef;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.match-drop-zone.has-match {
  justify-content: stretch;
}

.match-selected-chip {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  background: var(--mint-soft);
  color: var(--teal-dark);
  font-weight: 900;
  text-align: left;
}

.match-connector {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  align-self: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-weight: 900;
}

.match-connector.is-connected {
  border-color: var(--teal);
  background: var(--mint-soft);
  color: var(--teal-dark);
}

.match-choice-grid {
  display: grid;
  gap: 8px;
}

.match-choice {
  min-height: 42px;
  padding: 8px 10px;
  color: var(--ink);
  cursor: grab;
  font-weight: 850;
  text-align: left;
  touch-action: manipulation;
}

.match-choice:hover,
.match-choice.is-selected {
  border-color: var(--teal);
  background: var(--mint-soft);
  color: var(--teal-dark);
}

.match-choice:nth-child(4n + 1) {
  background: #fff;
}

.match-choice:nth-child(4n + 2) {
  background: var(--sky-soft);
}

.match-choice:nth-child(4n + 3) {
  background: var(--peach-soft);
}

.match-choice:nth-child(4n + 4) {
  background: var(--lilac-soft);
}

.match-choice:active {
  cursor: grabbing;
}

.match-choice.is-dragging {
  opacity: 0.45;
}

.match-choice-drag-ghost {
  position: fixed;
  z-index: 50;
  margin: 0;
  pointer-events: none;
  box-shadow: var(--shadow);
  opacity: 0.95;
}

.answer-input,
.number-input,
.assistant-textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  outline: none;
}

.answer-input {
  min-height: 44px;
  padding: 9px 11px;
}

.answer-input:focus,
.number-input:focus,
.assistant-textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

.accent-keyboard {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.accent-key {
  min-width: 34px;
  min-height: 32px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 10px;
  background: #e9fbf7;
  color: #0f4f5a;
  font-weight: 900;
  cursor: pointer;
}

.accent-key:hover {
  background: #d7f4ee;
  transform: translateY(-1px);
}

.task-feedback {
  display: none;
  padding: 10px;
  border-radius: var(--radius);
  background: #fffaf0;
  color: #39495c;
  font-size: 14px;
}

.task-card.has-feedback .task-feedback {
  display: block;
}

.form-actions {
  flex-wrap: wrap;
  margin-top: 16px;
}

.situation-example {
  display: grid;
  grid-template-columns: minmax(150px, 0.65fr) minmax(260px, 1.35fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #a8d8cf;
  border-radius: var(--radius);
  background: #f0fbf7;
}

.situation-example h3,
.situation-example p {
  margin: 0;
}

.situation-example-dialogue {
  display: grid;
  gap: 6px;
}

.situation-example-dialogue span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.situation-example-dialogue p {
  padding: 9px 11px;
  border: 1px solid #d8e7e3;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.situation-example-dialogue p:last-child {
  border-color: #efc879;
  background: #fff8e8;
}

.result-panel {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #bde0d8;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f0fbf7 0%, #fff8db 100%);
}

.result-panel p {
  margin: 8px 0 0;
}

.learning-recommendation {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(20, 86, 163, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
  text-align: left;
}

.learning-recommendation > strong {
  color: #1456a3;
}

.learning-recommendation p {
  margin: 0;
  color: #3d4e62;
  line-height: 1.5;
}

.learning-recommendation small {
  color: #68778a;
  font-size: 11px;
  line-height: 1.4;
}

.result-advance-button {
  margin-top: 12px;
}

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

.result-summary span {
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: var(--radius);
  background: #fff;
  color: #435366;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.result-summary strong {
  display: block;
  color: var(--teal-dark);
  font-size: 17px;
}

.result-summary span:nth-child(2) {
  border-color: #f3d180;
  background: #fff8db;
}

.result-summary span:nth-child(2) strong {
  color: #8a5d03;
}

.result-summary span:nth-child(3) {
  border-color: #cddcff;
  background: var(--sky-soft);
}

.result-summary span:nth-child(3) strong {
  color: #1456a3;
}

.epictetus-mascot {
  position: fixed;
  right: clamp(18px, 24vw, 380px);
  bottom: 16px;
  z-index: 9;
  display: grid;
  width: 172px;
  justify-items: center;
  gap: 5px;
  pointer-events: none;
}

.epictetus-speech {
  position: relative;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #efc879;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(37, 48, 64, 0.12);
  color: #536170;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}

.epictetus-speech::after {
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 14px;
  height: 14px;
  border-right: 1px solid #efc879;
  border-bottom: 1px solid #efc879;
  background: #fff;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.epictetus-speech strong,
.epictetus-speech span {
  display: block;
}

.epictetus-speech strong {
  margin-bottom: 2px;
  color: #a34a20;
  font-size: 14px;
}

.epictetus-portrait {
  position: relative;
  width: 112px;
  height: 146px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: var(--radius);
  background: #fffaf2;
  box-shadow: 0 10px 24px rgba(45, 56, 71, 0.15);
}

.epictetus-reward-token {
  position: absolute;
  right: 4px;
  bottom: 5px;
  z-index: 2;
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ffd052;
  box-shadow: 0 4px 10px rgba(56, 66, 81, 0.2);
  font-size: 18px;
}

.epictetus-reward-token[hidden] {
  display: none;
}

.epictetus-sprite {
  display: block;
  width: 200%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  transform: translateX(0);
}

.epictetus-mascot[data-pose="clapping"] .epictetus-sprite {
  transform: translateX(-50%);
}

.epictetus-mascot[data-pose="thinking"] .epictetus-portrait {
  animation: epictetus-think 2.4s ease-in-out infinite;
}

.epictetus-mascot.is-clapping .epictetus-portrait {
  animation: epictetus-clap 320ms ease-in-out 5 alternate;
}

.epictetus-mascot.is-dancing .epictetus-portrait {
  animation: epictetus-dance 430ms ease-in-out 12 alternate;
}

@keyframes epictetus-think {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-4px) rotate(1deg);
  }
}

@keyframes epictetus-clap {
  from {
    transform: scale(1) rotate(-2deg);
  }

  to {
    transform: scale(1.05) rotate(2deg);
  }
}

@keyframes epictetus-dance {
  from {
    transform: translateX(-8px) translateY(0) rotate(-8deg) scale(1);
  }

  to {
    transform: translateX(8px) translateY(-7px) rotate(8deg) scale(1.06);
  }
}

.celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  overflow: hidden;
  place-items: center;
  background: rgba(255, 255, 255, 0.91);
  backdrop-filter: blur(5px);
}

.celebration-overlay[hidden] {
  display: none;
}

.celebration-content {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(700px, calc(100vw - 32px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  justify-items: center;
  gap: 10px;
  padding: 30px;
  text-align: center;
}

.celebration-content > p {
  margin: 0;
  color: var(--teal);
  font-size: 20px;
  font-weight: 850;
}

.celebration-content > strong {
  color: #d94f37;
  font-size: 64px;
  line-height: 1;
}

.celebration-content > span {
  max-width: 620px;
  margin-bottom: 10px;
  color: #35445a;
  font-size: 19px;
  font-weight: 750;
}

.celebration-details[hidden] {
  display: none;
}

.certificate-card {
  position: relative;
  display: grid;
  width: min(640px, 100%);
  gap: 12px;
  margin: 4px auto 12px;
  padding: 28px 32px 24px;
  overflow: hidden;
  border: 1px solid #b9a36d;
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 42%, rgba(211, 185, 119, 0.12), transparent 34%),
    linear-gradient(135deg, #fffef9, #f8f3e7);
  box-shadow:
    0 18px 42px rgba(31, 43, 64, 0.17),
    inset 0 0 0 7px #fffdf7,
    inset 0 0 0 9px rgba(153, 125, 66, 0.5);
  color: #182844;
  font-family: Georgia, "Times New Roman", serif;
}

.certificate-card::before,
.certificate-card::after {
  position: absolute;
  width: 78px;
  height: 78px;
  border-color: rgba(153, 125, 66, 0.58);
  content: "";
  pointer-events: none;
}

.certificate-card::before {
  top: 13px;
  left: 13px;
  border-top: 1px solid;
  border-left: 1px solid;
}

.certificate-card::after {
  right: 13px;
  bottom: 13px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.certificate-tricolor {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  height: 6px;
  grid-template-columns: repeat(3, 1fr);
}

.certificate-tricolor i:nth-child(1) { background: #183f77; }
.certificate-tricolor i:nth-child(2) { background: #fff; }
.certificate-tricolor i:nth-child(3) { background: #d34b4b; }

.certificate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid rgba(24, 63, 119, 0.24);
  text-align: left;
}

.certificate-header > div {
  display: grid;
  gap: 3px;
}

.certificate-brand {
  color: #183f77;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.certificate-header small {
  color: #657083;
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.certificate-seal {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  place-items: center;
  border: 1px solid #b59a5d;
  border-radius: 50%;
  background: #f8f1da;
  box-shadow: inset 0 0 0 4px #fffdf7, inset 0 0 0 5px rgba(181, 154, 93, 0.55);
  color: #183f77;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.certificate-document-title {
  margin: 5px 0 0;
  color: #183f77;
  font-size: clamp(25px, 4.3vw, 38px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.certificate-certifies,
.certificate-statement {
  margin: 0;
  color: #566174;
  font-size: 14px;
  line-height: 1.5;
}

.certificate-card h3 {
  margin: 2px auto;
  padding: 0 16px 7px;
  border-bottom: 1px solid #b9a36d;
  color: #192d50;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 500;
  line-height: 1.08;
}

.certificate-course {
  color: #9b6a20;
  font-size: 23px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.certificate-metrics {
  display: grid;
  grid-template-columns: 0.8fr 1.15fr 1.25fr;
  gap: 1px;
  margin-top: 5px;
  border: 1px solid rgba(24, 63, 119, 0.2);
  background: rgba(24, 63, 119, 0.16);
}

.certificate-metrics span {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 10px 8px;
  background: rgba(255, 254, 249, 0.96);
}

.certificate-metrics small,
.certificate-metrics strong {
  display: block;
}

.certificate-metrics small {
  color: #697386;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.certificate-metrics strong {
  overflow-wrap: anywhere;
  color: #183f77;
  font-family: Arial, sans-serif;
  font-size: 13px;
}

.certificate-signatures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
  margin: 12px 18px 0;
}

.certificate-signatures span {
  display: grid;
  gap: 4px;
  padding-top: 4px;
  border-bottom: 1px solid #7c8490;
}

.certificate-signatures i {
  color: #273d60;
  font-size: 16px;
}

.certificate-signatures small {
  color: #6d7480;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.certificate-disclaimer {
  margin: 4px 0 0;
  color: #747b86;
  font-family: Arial, sans-serif;
  font-size: 9px;
  line-height: 1.35;
}

.celebration-overlay.is-active .celebration-content {
  animation: celebration-pop 520ms cubic-bezier(0.17, 0.85, 0.3, 1.25) both;
}

.purr-reward {
  display: grid;
  width: min(610px, 100%);
  grid-template-columns: minmax(190px, 230px) minmax(230px, 1fr);
  align-items: center;
  gap: 22px;
  margin: 6px 0 12px;
  padding: 18px;
  border: 1px solid #efc879;
  border-radius: var(--radius);
  background: #fff9ed;
  box-shadow: 0 16px 38px rgba(90, 63, 30, 0.14);
}

.purr-reward[hidden] {
  display: none;
}

.purr-visual {
  position: relative;
  display: grid;
  min-height: 246px;
  place-items: center;
  isolation: isolate;
}

.purr-epictetus-photo {
  display: block;
  width: 100%;
  min-width: 210px;
  height: 246px;
  border: 1px solid rgba(90, 63, 30, 0.2);
  border-radius: var(--radius);
  object-fit: cover;
  object-position: center 42%;
  box-shadow: 0 14px 28px rgba(90, 63, 30, 0.2);
}

.purr-reward.is-playing .purr-epictetus-photo {
  box-shadow: 0 14px 34px rgba(210, 121, 43, 0.3);
}

.purr-library-scene {
  position: relative;
  width: 100%;
  min-width: 210px;
  height: 232px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 52% 28%, rgba(255, 231, 162, 0.42), transparent 32%),
    linear-gradient(180deg, #e8d2b1 0 58%, #c29563 59% 100%);
  box-shadow:
    inset 0 -18px 0 rgba(103, 71, 38, 0.08),
    inset 0 0 0 1px rgba(76, 46, 24, 0.12);
}

.library-shelf {
  position: absolute;
  top: 12px;
  display: flex;
  width: 82px;
  height: 132px;
  align-items: flex-end;
  gap: 3px;
  padding: 9px 7px 10px;
  border: 4px solid #68401f;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.17), transparent 32%),
    linear-gradient(90deg, #8b572e, #a06b3d 44%, #80502a);
  box-shadow:
    inset 0 39px 0 rgba(91, 56, 28, 0.42),
    inset 0 77px 0 rgba(91, 56, 28, 0.26),
    inset 0 -7px 0 rgba(72, 43, 20, 0.4),
    0 10px 18px rgba(70, 44, 24, 0.16);
}

.library-shelf-left {
  left: 8px;
}

.library-shelf-center {
  left: 50%;
  transform: translateX(-50%);
}

.library-shelf-right {
  right: 8px;
}

.library-shelf-back {
  top: 22px;
  left: 50%;
  width: 196px;
  height: 96px;
  opacity: 0.52;
  transform: translateX(-50%) scale(0.94);
}

.library-shelf span {
  display: block;
  width: 7px;
  border-radius: 3px 3px 1px 1px;
  background: #1f7a70;
  box-shadow:
    inset 0 -8px 0 rgba(255, 255, 255, 0.18),
    inset 2px 0 0 rgba(255, 255, 255, 0.14);
}

.library-shelf span:nth-child(1) { height: 74px; background: #2d8f68; }
.library-shelf span:nth-child(2) { height: 92px; background: #d65942; }
.library-shelf span:nth-child(3) { height: 108px; background: #345e9f; }
.library-shelf span:nth-child(4) { height: 70px; background: #e3a62e; }
.library-shelf span:nth-child(5) { height: 96px; background: #6d4c9f; }
.library-shelf span:nth-child(6) { height: 84px; background: #b74f7e; }
.library-shelf span:nth-child(7) { height: 104px; background: #2f6b45; }
.library-shelf span:nth-child(8) { height: 76px; background: #cf8d2d; }

.purr-floor {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 72px;
  background:
    repeating-linear-gradient(90deg, rgba(118, 76, 39, 0.16) 0 2px, transparent 2px 32px),
    linear-gradient(180deg, #d9b47e, #b77d43);
}

.epictetus-walk {
  position: absolute;
  right: 44px;
  bottom: 31px;
  width: 134px;
  height: 126px;
  transform-origin: 50% 100%;
  animation: none;
}

.epictetus-body {
  position: absolute;
  right: 30px;
  bottom: 12px;
  width: 78px;
  height: 72px;
  border-radius: 44px 44px 34px 34px;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.28), transparent 40%),
    #d9792b;
  box-shadow:
    inset -14px -9px 0 rgba(137, 65, 24, 0.22),
    0 9px 13px rgba(82, 50, 25, 0.18);
}

.epictetus-body::before,
.epictetus-body::after {
  position: absolute;
  top: 16px;
  width: 7px;
  height: 42px;
  border-radius: 999px;
  background: rgba(121, 57, 20, 0.32);
  content: "";
  transform: rotate(14deg);
}

.epictetus-body::before { left: 21px; }
.epictetus-body::after { right: 22px; height: 36px; }

.epictetus-tail {
  position: absolute;
  right: 88px;
  bottom: 52px;
  width: 48px;
  height: 44px;
  border: 10px solid #d9792b;
  border-right: 0;
  border-bottom: 0;
  border-radius: 54px 0 0 0;
  transform-origin: 100% 80%;
  transform: rotate(-12deg);
  animation: none;
}

.epictetus-head {
  position: absolute;
  right: 15px;
  bottom: 75px;
  width: 58px;
  height: 56px;
  border-radius: 47% 52% 44% 48%;
  background:
    radial-gradient(circle at 32% 57%, rgba(255, 255, 255, 0.76) 0 12%, transparent 13%),
    radial-gradient(circle at 67% 58%, rgba(255, 255, 255, 0.76) 0 12%, transparent 13%),
    #e18432;
  box-shadow: inset -8px -7px 0 rgba(137, 65, 24, 0.16);
  animation: none;
}

.epictetus-head .ear-left,
.epictetus-head .ear-right {
  position: absolute;
  top: -13px;
  width: 21px;
  height: 24px;
  background: #d9792b;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.ear-left { left: 5px; transform: rotate(-13deg); }
.ear-right { right: 5px; transform: rotate(13deg); }

.eye-left,
.eye-right {
  position: absolute;
  top: 22px;
  width: 8px;
  height: 9px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 64% 30%, #fff 0 16%, transparent 18%),
    #2a241f;
}

.eye-left { left: 17px; }
.eye-right { right: 17px; }

.nose {
  position: absolute;
  top: 31px;
  left: 50%;
  width: 7px;
  height: 5px;
  border-radius: 60% 60% 70% 70%;
  background: #8c3c2d;
  transform: translateX(-50%);
}

.nose::after {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 16px;
  height: 8px;
  border-bottom: 2px solid rgba(95, 59, 40, 0.78);
  border-radius: 0 0 16px 16px;
  content: "";
  transform: translateX(-50%);
}

.whiskers {
  position: absolute;
  top: 34px;
  width: 23px;
  height: 1px;
  background: #5f3b28;
}

.whiskers::before,
.whiskers::after {
  position: absolute;
  right: 0;
  width: 22px;
  height: 1px;
  background: inherit;
  content: "";
}

.whiskers::before { transform: translateY(-6px) rotate(12deg); }
.whiskers::after { transform: translateY(6px) rotate(-12deg); }
.whiskers-left { left: -14px; transform: rotate(3deg); }
.whiskers-right { right: -14px; transform: scaleX(-1) rotate(3deg); }

.epictetus-paw {
  position: absolute;
  bottom: 3px;
  width: 19px;
  height: 30px;
  border-radius: 10px;
  background: #c96927;
  transform-origin: 50% 0;
  animation: none;
}

.paw-one { right: 78px; }
.paw-two {
  right: 45px;
}

.cheek-rub {
  position: absolute;
  top: 76px;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(239, 159, 40, 0.72);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.cheek-rub-left {
  left: 56px;
  display: none;
}

.cheek-rub-right {
  right: 58px;
  display: none;
}

.purr-name-tag {
  position: absolute;
  z-index: 4;
  right: 23px;
  bottom: 1px;
  padding: 4px 11px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ef9f28;
  box-shadow: 0 5px 12px rgba(90, 52, 16, 0.22);
  color: #482b13;
  font-size: 12px;
  font-weight: 900;
  transform: rotate(-3deg);
}

.purr-halo {
  position: absolute;
  z-index: 1;
  width: 168px;
  height: 168px;
  border: 4px solid rgba(15, 118, 110, 0.28);
  border-radius: 50%;
  opacity: 0;
}

.purr-halo-two {
  border-color: rgba(235, 108, 79, 0.28);
  animation-delay: 700ms !important;
}

.purr-controls {
  display: grid;
  justify-items: stretch;
  gap: 12px;
  text-align: left;
}

.purr-wave {
  display: flex;
  height: 52px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: #e8f6f2;
}

.purr-wave i {
  display: block;
  width: 7px;
  height: 10px;
  border-radius: 4px;
  background: #0f766e;
  transform-origin: center;
}

.purr-wave i:nth-child(2),
.purr-wave i:nth-child(6) {
  height: 18px;
  animation-delay: 120ms !important;
}

.purr-wave i:nth-child(3),
.purr-wave i:nth-child(5) {
  height: 27px;
  animation-delay: 240ms !important;
}

.purr-wave i:nth-child(4) {
  height: 38px;
  animation-delay: 360ms !important;
}

.purr-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid #d57a20;
  border-radius: var(--radius);
  background: #ef9f28;
  color: #34200e;
  font-weight: 900;
}

.purr-button:hover,
.purr-button:focus-visible {
  background: #f5b74c;
  box-shadow: 0 0 0 3px rgba(239, 159, 40, 0.22);
}

.purr-button-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #a34a20;
  font-size: 12px;
}

.purr-status {
  min-height: 20px;
  color: #6c5843;
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}

.course-purr-button {
  display: inline-flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid #d57a20;
  border-radius: var(--radius);
  background: #fff8e8;
  color: #8d431e;
  font-weight: 900;
}

.course-purr-button[hidden] {
  display: none;
}

.course-purr-button:hover,
.course-purr-button:focus-visible {
  background: #ffe8b1;
  box-shadow: 0 0 0 3px rgba(239, 159, 40, 0.18);
}

.purr-reward.is-playing .epictetus-walk {
  filter: drop-shadow(0 0 10px rgba(239, 159, 40, 0.18));
}

.purr-reward.is-playing .epictetus-tail {
  animation: none;
}

.purr-reward.is-playing .epictetus-head {
  filter: drop-shadow(0 0 8px rgba(239, 159, 40, 0.22));
}

.purr-reward.is-playing .purr-halo {
  animation: epictetus-purr-halo 1.45s ease-out infinite;
}

.purr-reward.is-playing .purr-wave i {
  animation: epictetus-purr-wave 680ms ease-in-out infinite alternate;
}

.purr-reward.is-playing .purr-button-icon {
  font-size: 0;
}

.purr-reward.is-playing .purr-button-icon::before {
  width: 10px;
  height: 12px;
  border-right: 4px solid currentColor;
  border-left: 4px solid currentColor;
  content: "";
}

@keyframes epictetus-library-walk {
  0%,
  100% {
    transform: translateX(-54px) scale(0.86) rotate(-1deg);
  }

  22% {
    transform: translateX(-105px) scale(0.92) rotate(1deg);
  }

  50% {
    transform: translateX(-66px) scale(1.02) rotate(-1deg);
  }

  72% {
    transform: translateX(-6px) scale(1.08) rotate(1deg);
  }
}

@keyframes epictetus-tail-swish {
  from {
    transform: rotate(-18deg);
  }

  to {
    transform: rotate(18deg) translateY(-2px);
  }
}

@keyframes epictetus-cheek-nuzzle {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }

  22% {
    transform: translateX(-10px) rotate(-8deg);
  }

  50% {
    transform: translateX(0) rotate(0deg);
  }

  72% {
    transform: translateX(9px) rotate(8deg);
  }
}

@keyframes epictetus-paw-step {
  from {
    transform: rotate(-10deg) translateY(0);
  }

  to {
    transform: rotate(12deg) translateY(-5px);
  }
}

@keyframes cheek-rub-left {
  0%,
  16%,
  35%,
  100% {
    opacity: 0;
    transform: scale(0.62);
  }

  24% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes cheek-rub-right {
  0%,
  62%,
  83%,
  100% {
    opacity: 0;
    transform: scale(0.62);
  }

  73% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes epictetus-purr-halo {
  0% {
    opacity: 0.55;
    transform: scale(0.78);
  }

  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

@keyframes epictetus-purr-wave {
  from {
    transform: scaleY(0.45);
  }

  to {
    transform: scaleY(1.15);
  }
}

.firework {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    0 -86px #ff6f4f,
    43px -74px #f2bd32,
    75px -43px #2fb49c,
    86px 0 #4e91e8,
    75px 43px #d85b92,
    43px 74px #ff9b42,
    0 86px #6bbf59,
    -43px 74px #42bdd5,
    -75px 43px #ed6f84,
    -86px 0 #f2bd32,
    -75px -43px #2f80ed,
    -43px -74px #ff6f4f;
}

.celebration-overlay.is-active .firework {
  animation: firework-burst 1.25s ease-out 3;
}

.firework-one {
  top: 25%;
  left: 18%;
}

.firework-two {
  top: 22%;
  right: 18%;
  animation-delay: 260ms !important;
}

.firework-three {
  bottom: 22%;
  left: 30%;
  animation-delay: 520ms !important;
}

.firework-four {
  right: 28%;
  bottom: 20%;
  animation-delay: 780ms !important;
}

@keyframes firework-burst {
  0% {
    opacity: 0;
    transform: scale(0.05);
  }

  18% {
    opacity: 1;
  }

  78% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

@keyframes celebration-pop {
  from {
    opacity: 0;
    transform: scale(0.72);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.assistant-panel {
  display: grid;
  gap: 14px;
}

.field-label {
  display: block;
  margin: 12px 0 6px;
  color: #38475a;
  font-size: 13px;
  font-weight: 800;
}

.number-input {
  min-height: 40px;
  padding: 8px 10px;
}

.budget-summary {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.budget-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid #dfe7ee;
  border-radius: var(--radius);
  background: #ffffff;
  color: #38475a;
  font-size: 14px;
}

.budget-stat strong {
  color: var(--ink);
  white-space: nowrap;
}

.budget-box {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #f0cd8c;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff9ed 0%, #f3efff 100%);
}

.budget-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: #5d4630;
  font-size: 14px;
}

.meter {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e9ef;
}

.meter span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint) 0%, var(--sky) 100%);
  transition: width 180ms ease;
}

.budget-meter span {
  background: linear-gradient(90deg, var(--lemon) 0%, var(--peach) 100%);
}

#buyAiPackageButton {
  margin-top: 10px;
}

.assistant-textarea {
  min-height: 120px;
  resize: vertical;
  padding: 10px;
}

.assistant-answer {
  min-height: 124px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #dfe7ee;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  color: #35445a;
  font-size: 14px;
  white-space: pre-wrap;
}

.inline-code {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
}

.seo-card p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1180px) {
  .layout {
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  }

  .assistant-panel {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
  }
}

@media (max-width: 860px) {
  .topbar {
    position: static;
    align-items: flex-start;
    padding: 12px 16px;
  }

  .topbar,
  .topbar-actions {
    flex-wrap: wrap;
  }

  .layout {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .sidebar {
    position: static;
    max-height: none;
  }

  .lesson-hero {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    padding: 24px;
  }

  .hero-visual {
    min-height: 0;
    height: 270px;
  }

  .theory-grid {
    grid-template-columns: 1fr;
  }

  .feedback-footer-inner {
    grid-template-columns: 1fr;
  }

  .legal-shell {
    width: min(100% - 20px, 920px);
    padding: 18px 0 34px;
  }

  .legal-document {
    padding: 18px;
  }

  .seo-grid {
    grid-template-columns: 1fr;
  }

  .epictetus-mascot {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 1;
    grid-template-columns: 92px minmax(0, 1fr);
    width: 100%;
    justify-items: start;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
  }

  .epictetus-portrait {
    grid-row: 1;
    grid-column: 1;
    width: 88px;
    height: 114px;
  }

  .epictetus-speech {
    grid-row: 1;
    grid-column: 2;
    text-align: left;
  }

  .epictetus-speech::after {
    display: none;
  }
}

@media (max-width: 620px) {
  h1 {
    font-size: 34px;
  }

  .celebration-content > strong {
    font-size: 36px;
  }

  .purr-reward {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }

  .purr-visual {
    min-height: 210px;
  }

  .purr-epictetus-photo {
    min-width: 0;
    height: min(360px, 54vh);
  }

  .certificate-card {
    padding: 24px 18px 20px;
  }

  .certificate-metrics,
  .certificate-signatures,
  .aux-meaning-options {
    grid-template-columns: 1fr;
  }

  .certificate-signatures {
    gap: 14px;
  }

  .purr-library-scene {
    min-width: 0;
    height: 214px;
  }

  .library-shelf {
    width: 68px;
    height: 118px;
    gap: 2px;
    padding: 8px 5px 9px;
  }

  .library-shelf-left { left: 5px; }
  .library-shelf-right { right: 5px; }
  .library-shelf-center {
    width: 72px;
    opacity: 0.82;
  }
  .library-shelf-back {
    top: 20px;
    width: 172px;
    height: 86px;
  }

  .epictetus-walk {
    right: 18px;
    transform: scale(0.92);
  }

  .purr-controls {
    text-align: center;
  }

  .situation-example {
    grid-template-columns: 1fr;
  }

  .lesson-card,
  .exercise-card,
  .assistant-card {
    padding: 16px;
  }

  .lesson-hero {
    min-height: 0;
    padding: 0;
  }

  .hero-copy {
    padding: 20px 16px;
  }

  .hero-stats {
    align-items: stretch;
  }

  .hero-stats span {
    min-width: calc(50% - 7px);
  }

  .section-heading,
  .section-heading.compact {
    align-items: stretch;
    flex-direction: column;
  }

  .exercise-tabs {
    grid-template-columns: repeat(5, minmax(38px, 1fr));
  }

  .flashcard-grid {
    grid-template-columns: repeat(2, minmax(118px, 1fr));
  }

  .flashcard-heading {
    flex-direction: column;
  }

  .task-header,
  .answer-row {
    grid-template-columns: 1fr;
  }

  .game-quest-panel,
  .game-stat-grid,
  .result-summary {
    grid-template-columns: 1fr;
  }

  .match-board {
    grid-template-columns: 1fr;
  }

  .match-connector {
    justify-self: center;
    transform: rotate(90deg);
  }

  .task-number,
  .result-badge {
    width: 100%;
  }

  .quizlet-choice-row {
    grid-template-columns: 1fr;
  }

  .wheel-quiz {
    grid-template-columns: 1fr;
  }

  .dual-mirror-stage,
  .routine-text-stage,
  .museum-guide-stage {
    grid-template-columns: 1fr;
  }

  .dual-mirror-divider {
    width: 100%;
    height: 10px;
  }

  .choice-row-pair {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .choice-row-avoir {
    grid-template-columns: repeat(2, minmax(90px, 1fr));
  }

  .choice-row-metro-train {
    grid-template-columns: 1fr;
  }

  .choice-row-flag,
  .choice-row-reflexive-pronoun {
    grid-template-columns: repeat(2, minmax(90px, 1fr));
  }

  .choice-row-verb-form {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }

  .wow-stage {
    grid-template-columns: 1fr;
  }

  .lab-workbench {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }

  .lab-flask-station {
    min-height: 224px;
  }

  .lab-form-bank {
    grid-template-columns: 1fr;
  }

  .story-gap-options {
    left: 0;
    width: min(240px, calc(100vw - 82px));
    grid-template-columns: 1fr;
    transform: none;
  }

  .wow-scene {
    min-height: 132px;
  }

  .choice-row-wow {
    grid-template-columns: 1fr;
  }

  .life-stage {
    grid-template-columns: 1fr;
  }

  .life-message {
    max-width: 96%;
  }

  .choice-row-life {
    grid-template-columns: 1fr;
  }

  .phone-life-stage {
    grid-template-columns: 1fr;
  }

  .dual-mirror-builder-row,
  .routine-inline-builder {
    grid-template-columns: 1fr;
  }

  .photo-life-stage,
  .metro-train-stage {
    grid-template-columns: 1fr;
  }

  .photo-polaroid {
    max-width: none;
    transform: none;
  }

  .metro-wall {
    min-height: 260px;
  }

  .phone-life-caption {
    padding-left: 0;
    border-left: 0;
    text-align: center;
  }

  .epictetus-laser-stage {
    grid-template-columns: 1fr;
  }

  .laser-maze-zone {
    padding: 15px;
  }

  .laser-path {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .laser-path small,
  .laser-path strong {
    grid-column: 2;
  }

  .laser-route {
    grid-row: 1 / span 2;
    width: 54px;
  }

  .station-rebus-stage {
    grid-template-columns: 1fr;
  }

  .station-rebus-visual img {
    min-height: 0;
  }

  .station-rebus-copy > strong {
    font-size: 17px;
  }

  .station-rebus-clues {
    grid-template-columns: repeat(2, minmax(72px, 96px));
    justify-content: center;
  }

  .railway-stage {
    grid-template-columns: 1fr;
  }

  .railway-copy {
    text-align: center;
  }

  .railway-copy p {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 720px) {
  body {
    background: #fbfdff;
  }

  .topbar {
    gap: 10px;
  }

  .brand {
    width: 100%;
  }

  .topbar-actions {
    width: 100%;
    align-items: stretch;
    gap: 8px;
  }

  .status-pill {
    flex: 1 1 136px;
    justify-content: center;
    min-height: 42px;
    white-space: normal;
    text-align: center;
  }

  .layout {
    gap: 12px;
    padding: 10px;
  }

  .sidebar-block.progress-card {
    margin-bottom: 10px;
    padding: 12px;
  }

  .sidebar-block.progress-card .muted {
    margin-bottom: 0;
  }

  .level-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .level-button {
    min-width: 210px;
    grid-template-columns: 34px minmax(0, 1fr);
    scroll-snap-align: start;
  }

  .level-progress {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .lesson-card,
  .exercise-card,
  .assistant-card,
  .lesson-hero {
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(24, 39, 75, 0.07);
  }

  .lesson-actions {
    width: 100%;
    justify-content: space-between;
  }

  .icon-button {
    width: 52px;
    min-height: 48px;
  }

  .exercise-tabs {
    position: sticky;
    top: 0;
    z-index: 8;
    margin-inline: -6px;
    padding: 8px 6px;
    border: 1px solid rgba(217, 224, 231, 0.82);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
  }

  .exercise-tab {
    min-height: 46px;
    font-size: 15px;
  }

  .task-card {
    scroll-margin-top: 12px;
    padding: 12px;
  }

  .task-prompt,
  .task-feedback,
  .formula-line,
  .example-list,
  .lesson-rule-details,
  .museum-guide-sentence,
  .life-message,
  .railway-copy,
  .station-rebus-copy,
  .word-block,
  .choice-button {
    overflow-wrap: anywhere;
  }

  .choice-button,
  .word-block,
  .primary-button,
  .secondary-button,
  .ghost-button {
    min-height: 46px;
    touch-action: manipulation;
  }

  .choice-row,
  .quizlet-choice-row,
  .choice-row-pair,
  .choice-row-avoir,
  .choice-row-verb-form,
  .choice-row-sentence,
  .choice-row-wow,
  .choice-row-life {
    gap: 8px;
  }

  .word-zone {
    min-height: 58px;
    gap: 8px;
    padding: 9px;
  }

  .word-block {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  .conjugation-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .conjugation-table {
    min-width: 560px;
  }

  .form-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    border-top: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .form-actions > button {
    width: 100%;
  }

  .assistant-panel {
    display: grid;
    gap: 12px;
  }

  .assistant-textarea,
  input[type="text"],
  input[type="search"],
  textarea {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 30px;
  }

  h2 {
    font-size: 20px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .brand small {
    font-size: 11px;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .topbar-actions .ghost-button {
    grid-column: 1 / -1;
  }

  .hero-visual {
    height: 220px;
  }

  .hero-stats {
    gap: 8px;
  }

  .hero-stats span {
    min-width: 100%;
    padding-block: 7px;
  }

  .lesson-card,
  .exercise-card,
  .assistant-card {
    padding: 14px;
  }

  .theory-grid article,
  .theory-ai-card,
  .exercise-ai-help,
  .result-panel {
    padding: 12px;
  }

  .exercise-tabs {
    grid-template-columns: repeat(5, minmax(42px, 1fr));
  }

  .task-card {
    gap: 12px;
  }

  .task-number,
  .result-badge {
    min-height: 36px;
  }

  .choice-row-pair,
  .choice-row-avoir,
  .choice-row-flag,
  .choice-row-reflexive-pronoun,
  .choice-row-verb-form {
    grid-template-columns: 1fr;
  }

  .word-builder.is-single-block .word-zone-bank .word-block {
    flex-basis: 100%;
  }

  .museum-photo {
    min-height: 210px;
  }

  .life-phone,
  .phone-chat-shell {
    width: 100%;
  }

  .celebration-content {
    width: min(94vw, 420px);
    max-height: calc(100vh - 24px);
    overflow: auto;
    padding: 22px 16px;
  }

  .celebration-content > strong {
    font-size: 30px;
  }
}

/* Visual themes: Dark, Dopamine and Tekhno. */
.theme-switcher {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(107, 84, 255, 0.2);
  border-radius: 999px;
  background: rgba(246, 243, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.theme-option {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #655f75;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.theme-option:hover {
  color: #342c4d;
  transform: translateY(-1px);
}

.theme-option.is-active,
.theme-option[aria-pressed="true"] {
  background: linear-gradient(135deg, #7449ff, #e83eff 56%, #2ec9ff);
  box-shadow: 0 5px 13px rgba(116, 73, 255, 0.24);
  color: #fff;
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] {
  color-scheme: light;
  --bg: #f7f5ff;
  --surface: #ffffff;
  --surface-strong: #f2edff;
  --ink: #262331;
  --muted: #706b7f;
  --line: #e1dcf2;
  --teal: #6e4bff;
  --teal-dark: #5127d7;
  --coral: #f1448e;
  --gold: #d78b00;
  --lavender: #7f4cff;
  --mint: #7a48ff;
  --mint-soft: #efe9ff;
  --sky: #188cff;
  --sky-soft: #e8f4ff;
  --peach: #ff6e9d;
  --peach-soft: #fff0f6;
  --lemon: #c98900;
  --lemon-soft: #fff8d9;
  --rose: #e83eff;
  --rose-soft: #fff0ff;
  --lilac: #7651ff;
  --lilac-soft: #f0edff;
  --shadow: 0 20px 55px rgba(78, 50, 159, 0.1);
  --radius: 14px;
  --radius-lg: 28px;
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] body {
  background:
    radial-gradient(circle at 8% 5%, rgba(132, 73, 255, 0.16), transparent 25rem),
    radial-gradient(circle at 92% 8%, rgba(45, 201, 255, 0.16), transparent 25rem),
    radial-gradient(circle at 82% 88%, rgba(255, 79, 172, 0.13), transparent 27rem),
    linear-gradient(180deg, #fcfbff 0%, #f6f4ff 54%, #fff9fc 100%);
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .topbar {
  border-color: rgba(119, 75, 255, 0.18);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 30px rgba(82, 49, 163, 0.08);
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .brand-mark {
  border-color: transparent;
  border-radius: 15px;
  background: linear-gradient(145deg, #7848ff, #eb42f1 55%, #25c7ff);
  box-shadow: 0 8px 18px rgba(114, 65, 255, 0.28);
  color: #fff;
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] :where(
  .sidebar-block,
  .lesson-card,
  .exercise-card,
  .assistant-card,
  .lesson-hero,
  .task-card
) {
  border-color: rgba(111, 76, 197, 0.16);
  box-shadow: var(--shadow);
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] :where(.lesson-card, .exercise-card, .assistant-card) {
  background: rgba(255, 255, 255, 0.94);
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .progress-card {
  background: linear-gradient(145deg, #f0eaff, #fff4fc 56%, #eaf8ff);
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .review-card {
  background: linear-gradient(145deg, #f5f0ff, #fcefff);
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .weak-topics-card {
  background: linear-gradient(145deg, #fff8e1, #fff2f8);
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .accessibility-card {
  background: linear-gradient(145deg, #eef5ff, #f3edff);
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .lesson-hero {
  position: relative;
  border-color: rgba(121, 73, 255, 0.2);
  border-radius: 30px;
  background:
    radial-gradient(circle at 25% 14%, rgba(255, 255, 255, 0.9), transparent 15rem),
    linear-gradient(135deg, #f7efff 0%, #f0edff 48%, #e8f8ff 100%);
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .lesson-hero::before {
  position: absolute;
  top: 24px;
  left: 28px;
  width: 76px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #804cff, #ff4fb4, #2dc9ff);
  content: "";
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .hero-copy {
  position: relative;
  z-index: 1;
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .hero-copy .hero-promise,
html:not(.a11y-high-contrast)[data-theme="dopamine"] .review-mode-banner,
html:not(.a11y-high-contrast)[data-theme="dopamine"] .review-result-message {
  background: #eee7ff;
  color: #542cd0;
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .theme-hero-art {
  filter: saturate(1.08) contrast(1.02) drop-shadow(-16px 18px 28px rgba(112, 62, 214, 0.16));
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .primary-button {
  border-color: transparent;
  background: linear-gradient(135deg, #7348ff, #d83eea 58%, #20aee9);
  box-shadow: 0 8px 18px rgba(113, 65, 230, 0.2);
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .primary-button:hover {
  background: linear-gradient(135deg, #5b31e6, #bd2fd1 58%, #128fc4);
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] :where(.theory-grid article, .task-card, .exercise-ai-help) {
  background: linear-gradient(180deg, #fff, #fbfaff);
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .theory-grid article:nth-child(2) {
  background: linear-gradient(180deg, #fff, #fff1f8);
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .theory-grid article:nth-child(3) {
  background: linear-gradient(180deg, #fff, #eef5ff);
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .theme-epictetus-art {
  filter: saturate(1.12) contrast(1.03) drop-shadow(0 10px 18px rgba(255, 121, 47, 0.18));
}

html:not(.a11y-high-contrast)[data-theme="dopamine"] .epictetus-portrait {
  border-color: #fff;
  border-radius: 24px;
  background: linear-gradient(145deg, #fff1da, #f1e8ff);
  box-shadow: 0 15px 36px rgba(115, 66, 218, 0.24);
}

html:not(.a11y-high-contrast)[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070708;
  --surface: #111114;
  --surface-strong: #19191e;
  --ink: #f6f3ec;
  --muted: #aaa6b1;
  --line: #343239;
  --teal: #ff9a45;
  --teal-dark: #ffc080;
  --coral: #ff704a;
  --gold: #ffc04d;
  --lavender: #b59cff;
  --mint: #ff9945;
  --mint-soft: #2b2018;
  --sky: #74b9ff;
  --sky-soft: #172333;
  --peach: #ff7955;
  --peach-soft: #301c19;
  --lemon: #ffc04d;
  --lemon-soft: #2b2515;
  --rose: #ff739a;
  --rose-soft: #301a24;
  --lilac: #b49bff;
  --lilac-soft: #211c35;
  --wrong: #ff7a70;
  --right: #69d893;
  --almost: #ffc15e;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
  --radius: 10px;
  --radius-lg: 20px;
}

html:not(.a11y-high-contrast)[data-theme="dark"] body {
  background:
    radial-gradient(circle at 7% 8%, rgba(255, 137, 55, 0.1), transparent 26rem),
    radial-gradient(circle at 92% 12%, rgba(137, 101, 255, 0.08), transparent 30rem),
    linear-gradient(180deg, #050506, #0a0a0c 46%, #070708);
}

html:not(.a11y-high-contrast)[data-theme="dark"] .topbar {
  border-color: #29272d;
  background: rgba(7, 7, 8, 0.9);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.34);
}

html:not(.a11y-high-contrast)[data-theme="dark"] .exercise-tabs {
  border-color: #343239;
  background: rgba(17, 17, 20, 0.96);
}

html:not(.a11y-high-contrast)[data-theme="dark"] .brand-mark {
  border-color: #704528;
  background: linear-gradient(145deg, #2b1b11, #141416);
  box-shadow: inset 0 0 18px rgba(255, 147, 63, 0.12);
  color: #ffad63;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .theme-switcher {
  border-color: #39343c;
  background: #111114;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html:not(.a11y-high-contrast)[data-theme="dark"] .theme-option {
  color: #aaa6b1;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .theme-option:hover {
  color: #fff;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .theme-option.is-active,
html:not(.a11y-high-contrast)[data-theme="dark"] .theme-option[aria-pressed="true"] {
  background: linear-gradient(135deg, #f0782d, #ffae55);
  box-shadow: 0 5px 16px rgba(255, 139, 52, 0.22);
  color: #15100c;
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(
  .sidebar-block,
  .lesson-card,
  .exercise-card,
  .assistant-card,
  .lesson-hero,
  .task-card,
  .theory-grid article,
  .exercise-ai-help,
  .exam-intro-card,
  .exam-howto,
  .certificate-name-card,
  .locked-panel,
  .locked-list-wrap,
  .flashcard-panel,
  .game-quest-panel,
  .result-panel
) {
  border-color: #343239;
  background: #111114;
  color: var(--ink);
  box-shadow: var(--shadow);
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(
  .progress-card,
  .review-card,
  .weak-topics-card,
  .accessibility-card
) {
  border-color: #38343b;
  background: linear-gradient(145deg, #17171b, #101012);
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(
  .review-queue-item,
  .weak-topic-row,
  .accessibility-toggle,
  .level-button,
  .exercise-tab,
  .choice-button,
  .word-block,
  .word-zone,
  .ghost-button,
  .icon-button,
  .progress-import-button,
  .feedback-select,
  input,
  textarea,
  select
) {
  border-color: #39363f;
  background: #18181c;
  color: var(--ink);
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(.task-prompt, .hero-copy p:not(.eyebrow), .game-quest-panel p) {
  color: #d6d1da;
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(.sidebar-card-copy, .sidebar-card-note, .accessibility-status, .hero-stats small, .course-reward-text) {
  color: #a9a4ae;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .lesson-hero {
  position: relative;
  border-color: #503521;
  background:
    linear-gradient(90deg, rgba(9, 9, 10, 0.98) 0 50%, rgba(20, 14, 11, 0.78)),
    #0a0a0b;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .lesson-hero::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 0 72%, rgba(255, 139, 54, 0.08)),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(255, 255, 255, 0.012) 31px);
  content: "";
  pointer-events: none;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .hero-copy,
html:not(.a11y-high-contrast)[data-theme="dark"] .theme-hero-art {
  position: relative;
  z-index: 1;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .theme-hero-art {
  filter: saturate(0.82) contrast(1.18) brightness(0.7) sepia(0.12);
}

html:not(.a11y-high-contrast)[data-theme="dark"] .hero-copy .hero-promise,
html:not(.a11y-high-contrast)[data-theme="dark"] .status-pill,
html:not(.a11y-high-contrast)[data-theme="dark"] .review-mode-banner,
html:not(.a11y-high-contrast)[data-theme="dark"] .review-result-message {
  border-color: #57402d;
  background: #281c14;
  color: #ffc084;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .status-pill-soft {
  border-color: #4d4327;
  background: #272213;
  color: #ffd377;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .primary-button {
  border-color: #ff9a45;
  background: linear-gradient(135deg, #ec6f27, #ffad54);
  color: #17100b;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .primary-button:hover {
  background: linear-gradient(135deg, #ff8535, #ffc06f);
}

html:not(.a11y-high-contrast)[data-theme="dark"] .secondary-button {
  border-color: #67462e;
  background: #2b1e15;
  color: #ffc28c;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .level-button:hover,
html:not(.a11y-high-contrast)[data-theme="dark"] .level-button.is-active,
html:not(.a11y-high-contrast)[data-theme="dark"] .exercise-tab.is-active,
html:not(.a11y-high-contrast)[data-theme="dark"] .choice-button:hover,
html:not(.a11y-high-contrast)[data-theme="dark"] .choice-button.is-selected,
html:not(.a11y-high-contrast)[data-theme="dark"] .word-block:hover,
html:not(.a11y-high-contrast)[data-theme="dark"] .word-block.is-picked {
  border-color: #ff9a45;
  background: #2b2018;
  color: #ffc080;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .feedback-footer {
  border-color: #29272d;
  background: #0c0c0e;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .theme-epictetus-art {
  filter: saturate(1.15) contrast(1.1) brightness(0.86) drop-shadow(0 10px 20px rgba(255, 123, 40, 0.22));
}

html:not(.a11y-high-contrast)[data-theme="dark"] .epictetus-speech {
  border-color: #6c4528;
  background: rgba(18, 18, 21, 0.97);
  color: #c3bdc6;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .epictetus-speech::after {
  border-color: #6c4528;
  background: #121215;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .epictetus-portrait {
  border-color: #2d2927;
  background: #160f0b;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 127, 43, 0.1);
}

html:not(.a11y-high-contrast)[data-theme="dark"] .purr-reward {
  border-color: #654326;
  background: #17120e;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .purr-wave {
  background: #261c15;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .purr-wave i {
  background: #ff9a45;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .rule-heading {
  border-color: #8a5834;
  background: linear-gradient(135deg, #e86f29, #ffab52);
  box-shadow: 0 8px 22px rgba(255, 134, 45, 0.18);
  color: #17100b;
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(
  .course-star-summary,
  .conjugation-table,
  .abbr-note-card div,
  .exam-howto,
  .game-stat-grid span,
  .task-game-tag,
  .task-review-button,
  .wow-stage,
  .story-gap-picker summary,
  .story-gap-options,
  .lab-workbench,
  .lab-selected-form,
  .lab-form-bank,
  .lab-form-block,
  .step10-elevator-door,
  .step10-error-paper,
  .step10-situation-stage,
  .step10-formula-line,
  .life-dialogue,
  .life-message-incoming,
  .photo-life-stage,
  .photo-polaroid,
  .phone-status,
  .phone-contact,
  .phone-message-incoming,
  .phone-input,
  .group-chat-message,
  .metro-sign,
  .metro-clue-token,
  .metro-selected-train,
  .station-rebus-visual,
  .station-rebus-clue,
  .railway-stage,
  .railway-yard,
  .dual-mirror-card,
  .routine-text-stage,
  .routine-target,
  .museum-photo-card,
  .museum-guide-sentence,
  .wheel-quiz,
  .aux-meaning-option,
  .word-builder.is-paper-builder,
  .word-builder.is-paper-builder .word-zone-answer,
  .paper-word,
  .word-clear-button,
  .match-left-card,
  .match-connector,
  .match-choice,
  .answer-input,
  .assistant-textarea,
  .task-feedback,
  .situation-example-dialogue p,
  .result-panel,
  .learning-recommendation,
  .result-summary span,
  .budget-stat,
  .budget-box,
  .assistant-answer,
  .inline-code
) {
  border-color: #403c45;
  background: #18181c;
  color: #f3eff5;
  box-shadow: none;
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(
  .task-card.is-game-pair,
  .task-card.is-game-builder,
  .task-card.is-game-detective,
  .task-card.is-game-match,
  .task-card.is-game-wheel,
  .task-card.is-game-wow,
  .task-card.is-game-life-wow,
  .task-card.is-game-metro-train,
  .task-card.is-game-epictetus-laser,
  .task-card.is-game-station-rebus,
  .task-card.is-game-railway
) {
  border-color: #3b3840;
  background: linear-gradient(180deg, #17171b, #111114);
  color: var(--ink);
}

html:not(.a11y-high-contrast)[data-theme="dark"] .task-card.is-result-wrong {
  border-color: #82423f;
  background: linear-gradient(180deg, #241719, #1b1214) !important;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .task-card.is-result-almost {
  border-color: #765a2f;
  background: linear-gradient(180deg, #241e14, #191610) !important;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .result-badge.is-wrong {
  border-color: #a9514b;
  background: #341b1e;
  color: #ffaaa3;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .result-badge.is-almost {
  border-color: #997138;
  background: #302616;
  color: #ffd186;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .result-badge.is-correct {
  border-color: #3f654d;
  background: #15241b;
  color: #9be2b4;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .day-story-line,
html:not(.a11y-high-contrast)[data-theme="dark"] .aux-builder-unlocked {
  border-color: #403c45;
  background: #18181c;
  color: #ece7ef;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .aux-builder-unlocked strong {
  color: #ffc080;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .aux-builder-hint,
html:not(.a11y-high-contrast)[data-theme="dark"] .aux-meaning-note {
  color: #bdb6c2;
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(
  .phone-life-stage,
  .smartphone-shot,
  .phone-chat,
  .group-chat-life-stage,
  .group-chat-phone,
  .group-chat-contact,
  .group-chat-thread
) {
  border-color: #403c45;
  background: #141418;
  color: #f3eff5;
  box-shadow: none;
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(
  .phone-life-caption span,
  .phone-life-caption strong,
  .phone-life-caption small,
  .phone-contact small
) {
  color: #d9d3dc;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .step10-situation-image.has-real-photo {
  background: #111114;
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(
  .step10-situation-copy strong,
  .step10-situation-copy p,
  .step10-formula-line,
  .photo-polaroid p,
  .photo-life-copy strong,
  .photo-life-copy small,
  .phone-status,
  .phone-contact strong,
  .phone-message-incoming,
  .metro-clue-token,
  .metro-selected-train,
  .station-rebus-clue,
  .dual-mirror-card,
  .routine-target,
  .museum-guide-sentence,
  .aux-meaning-option,
  .learning-recommendation,
  .budget-stat,
  .budget-box,
  .assistant-answer
) {
  color: #ece7ef;
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(
  .review-queue-item small,
  .review-all-button small,
  .weak-topic-meta,
  .task-type,
  .photo-polaroid p,
  .photo-life-copy small,
  .assistant-answer small
) {
  color: #aaa4af;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .review-all-button:hover:not(:disabled) .review-all-title,
html:not(.a11y-high-contrast)[data-theme="dark"] .review-all-button:focus-visible .review-all-title {
  color: #ffb873;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .review-session-complete {
  border: 1px solid #3f654d;
  background: #15241b;
  color: #9be2b4;
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(
  .course-star-summary strong,
  .sidebar-section-heading h2,
  .weak-topic-heading h2,
  .exercise-card h2,
  .assistant-card h2,
  .lesson-card h2,
  .theory-grid h4,
  .task-card strong
) {
  color: #f7f2f8;
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(
  .conjugation-table th,
  .conjugation-table td,
  .story-gap-options,
  .story-gap-picker summary,
  .match-left-card,
  .match-choice,
  .word-builder,
  .task-feedback,
  .result-panel
) {
  border-color: #403c45;
  color: #f3eff5;
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(
  .answer-input::placeholder,
  .assistant-textarea::placeholder,
  input::placeholder,
  textarea::placeholder
) {
  color: #8f8994;
  opacity: 1;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .exercise-tab:nth-child(5n + 2):not(.is-active):not(.is-locked),
html:not(.a11y-high-contrast)[data-theme="dark"] .word-zone-bank .word-block:nth-child(4n + 2) {
  border-color: #51452f;
  background: #282217;
  color: #f4ead7;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .exercise-tab:nth-child(5n + 3):not(.is-active):not(.is-locked),
html:not(.a11y-high-contrast)[data-theme="dark"] .word-zone-bank .word-block:nth-child(4n + 3) {
  border-color: #33475d;
  background: #182535;
  color: #e2edf8;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .exercise-tab:nth-child(5n + 4):not(.is-active):not(.is-locked),
html:not(.a11y-high-contrast)[data-theme="dark"] .word-zone-bank .word-block:nth-child(4n + 4) {
  border-color: #583845;
  background: #2a1924;
  color: #f6e4ed;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .exercise-tab:nth-child(5n):not(.is-active):not(.is-locked) {
  border-color: #473956;
  background: #211a2c;
  color: #eee7f7;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .exercise-tab.has-error-dot::before {
  box-shadow: 0 0 0 3px #2a181a;
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(
  .conjugation-table th,
  .conjugation-table td,
  .conjugation-table.is-parts-table td:nth-child(2),
  .conjugation-table.is-parts-table td:nth-child(3),
  .conjugation-table.is-parts-table td:nth-child(5),
  .conjugation-table.is-parts-table td:nth-child(6),
  .conjugation-table.aux-comparison-table th:nth-child(2),
  .conjugation-table.aux-comparison-table td:nth-child(2),
  .abbr-note-card,
  .abbr-note-card div,
  .pc-example-form
) {
  border-color: #403c45;
  background: #18181c;
  color: #f3eff5;
  box-shadow: none;
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(.abbr-note-card > strong, .abbr-note-card dd) {
  color: #d9d3dc;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .abbr-note-card dt {
  color: #ff9f89;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .conjugation-table.is-parts-table td:nth-child(2),
html:not(.a11y-high-contrast)[data-theme="dark"] .conjugation-table.is-parts-table td:nth-child(5),
html:not(.a11y-high-contrast)[data-theme="dark"] .conjugation-table.aux-comparison-table th:nth-child(2),
html:not(.a11y-high-contrast)[data-theme="dark"] .conjugation-table.aux-comparison-table td:nth-child(2) {
  border-color: #31524c;
  background: #14231f;
  color: #94dfcf;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .conjugation-table.is-parts-table td:nth-child(3),
html:not(.a11y-high-contrast)[data-theme="dark"] .conjugation-table.is-parts-table td:nth-child(6) {
  background: #282116;
  color: #f0c779;
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(
  .etre-participle-highlight,
  .french-verb-highlight,
  .reflexive-particle-highlight,
  .etre-aux-highlight
) {
  border: 1px solid #4b414d;
  background: #211c24;
  color: #ffc08a;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .choice-row-flag .choice-button:nth-child(even),
html:not(.a11y-high-contrast)[data-theme="dark"] .quizlet-choice-row .choice-button:nth-child(2) {
  border-color: #493c4a;
  background: #211a24;
  color: #f3eff5;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .task-card:is(.is-result-wrong, .is-result-almost) .task-feedback {
  border-color: #69413f;
  background: #211517;
  color: #f2d9d7;
}

html:not(.a11y-high-contrast)[data-theme="dark"] :is(
  .review-queue-item,
  .weak-topic-row,
  .accessibility-toggle,
  .level-button,
  .exercise-tab,
  .choice-button,
  .word-block,
  .match-choice,
  .task-review-button,
  .ghost-button,
  .secondary-button,
  .icon-button,
  .progress-import-button,
  .accent-key,
  .word-clear-button
):hover:not(:disabled),
html:not(.a11y-high-contrast)[data-theme="dark"] :is(
  .review-queue-item,
  .weak-topic-row,
  .accessibility-toggle,
  .level-button,
  .exercise-tab,
  .choice-button,
  .word-block,
  .match-choice,
  .task-review-button,
  .ghost-button,
  .secondary-button,
  .icon-button,
  .progress-import-button,
  .accent-key,
  .word-clear-button
):focus-visible {
  border-color: #ff9a45;
  background: #2b2018;
  color: #ffc080;
  box-shadow: 0 0 0 3px rgba(255, 154, 69, 0.2);
}

html:not(.a11y-high-contrast)[data-theme="dark"] .choice-row-flag .choice-button:nth-child(even),
html:not(.a11y-high-contrast)[data-theme="dark"] .quizlet-choice-row .choice-button:nth-child(2),
html:not(.a11y-high-contrast)[data-theme="dark"] .quizlet-choice-row .choice-button:nth-child(3),
html:not(.a11y-high-contrast)[data-theme="dark"] .match-choice:nth-child(4n + 1),
html:not(.a11y-high-contrast)[data-theme="dark"] .match-choice:nth-child(4n + 2),
html:not(.a11y-high-contrast)[data-theme="dark"] .match-choice:nth-child(4n + 3),
html:not(.a11y-high-contrast)[data-theme="dark"] .match-choice:nth-child(4n + 4) {
  border-color: #403c45;
  background: #18181c;
  color: #f3eff5;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .choice-row-flag .choice-button:hover:not(:disabled),
html:not(.a11y-high-contrast)[data-theme="dark"] .choice-row-flag .choice-button.is-selected,
html:not(.a11y-high-contrast)[data-theme="dark"] .quizlet-choice-row .choice-button:hover:not(:disabled),
html:not(.a11y-high-contrast)[data-theme="dark"] .quizlet-choice-row .choice-button.is-selected,
html:not(.a11y-high-contrast)[data-theme="dark"] .match-choice-grid .match-choice:hover:not(:disabled),
html:not(.a11y-high-contrast)[data-theme="dark"] .match-choice-grid .match-choice.is-selected {
  border-color: #ff9a45;
  background: #2b2018;
  color: #ffc080;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .choice-row-portal .choice-button:hover:not(:disabled),
html:not(.a11y-high-contrast)[data-theme="dark"] .choice-row-portal .choice-button:focus-visible {
  border-color: #ff9a45;
  color: #fff;
  box-shadow: inset 0 0 0 5px rgba(255, 154, 69, 0.22), 0 0 0 4px rgba(255, 154, 69, 0.22);
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(
  .flashcard-panel,
  .flash-card,
  .dual-mirror-stage,
  .dual-mirror-builder-row,
  .routine-inline-builder,
  .dual-mirror-row-prompt,
  .routine-inline-russian,
  .routine-text-stage,
  .museum-guide-stage,
  .museum-photo-card,
  .wheel-quiz
) {
  border-color: #403c45;
  background: #151519;
  color: #f3eff5;
  box-shadow: none;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .flash-card {
  --card-bg: #1b1a1f;
}

html:not(.a11y-high-contrast)[data-theme="dark"] :where(
  .dual-mirror-row-prompt strong,
  .routine-inline-russian strong,
  .routine-copy strong,
  .routine-target p,
  .museum-guide-copy strong,
  .museum-guide-copy p,
  .museum-photo-card small,
  .wheel-result,
  .purr-status
) {
  color: #e8e3eb;
}

html:not(.a11y-high-contrast)[data-theme="dark"] .word-zone.is-drag-over,
html:not(.a11y-high-contrast)[data-theme="dark"] .match-drop-zone.is-drag-over {
  border-color: #ff9a45;
  background: #2b2018;
  box-shadow: 0 0 0 3px rgba(255, 154, 69, 0.2);
}

html:not(.a11y-high-contrast)[data-theme="dark"] .course-purr-button:hover,
html:not(.a11y-high-contrast)[data-theme="dark"] .course-purr-button:focus-visible,
html:not(.a11y-high-contrast)[data-theme="dark"] .purr-button:hover,
html:not(.a11y-high-contrast)[data-theme="dark"] .purr-button:focus-visible {
  border-color: #ff9a45;
  background: #2b2018;
  color: #ffc080;
  box-shadow: 0 0 0 3px rgba(255, 154, 69, 0.2);
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] {
  color-scheme: dark;
  --bg: #111427;
  --surface: rgba(25, 29, 54, 0.92);
  --surface-strong: #202546;
  --ink: #f4f7ff;
  --muted: #aab3d6;
  --line: rgba(143, 157, 255, 0.28);
  --teal: #8a78ff;
  --teal-dark: #c9d2ff;
  --coral: #ff6fe7;
  --gold: #ffd36b;
  --lavender: #7257ff;
  --mint: #67e8ff;
  --mint-soft: rgba(103, 232, 255, 0.14);
  --sky: #45c8ff;
  --sky-soft: rgba(69, 200, 255, 0.14);
  --peach: #ff88c7;
  --peach-soft: rgba(255, 136, 199, 0.14);
  --lemon: #ffd36b;
  --lemon-soft: rgba(255, 211, 107, 0.15);
  --rose: #ff72f0;
  --rose-soft: rgba(255, 114, 240, 0.14);
  --lilac: #765eff;
  --lilac-soft: rgba(118, 94, 255, 0.18);
  --shadow: 0 24px 68px rgba(3, 6, 23, 0.42);
  --radius: 16px;
  --radius-lg: 30px;
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] body {
  background:
    linear-gradient(rgba(137, 120, 255, 0.075) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(90deg, rgba(69, 200, 255, 0.055) 1px, transparent 1px) 0 0 / 36px 36px,
    radial-gradient(circle at 90% 5%, rgba(102, 67, 255, 0.34), transparent 27rem),
    radial-gradient(circle at 10% 90%, rgba(42, 211, 255, 0.22), transparent 32rem),
    linear-gradient(145deg, #0b0e1f 0%, #151936 52%, #111427 100%);
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .topbar {
  border-color: rgba(111, 232, 255, 0.2);
  background: rgba(12, 16, 36, 0.82);
  box-shadow: 0 10px 32px rgba(3, 6, 23, 0.34);
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .brand-mark {
  border: 1px solid rgba(103, 232, 255, 0.34);
  border-radius: 13px 5px 13px 5px;
  background: linear-gradient(145deg, #20194d, #161a32 45%, #12394b);
  box-shadow: inset 0 0 18px rgba(103, 232, 255, 0.16), 0 8px 24px rgba(45, 200, 245, 0.14);
  color: #cdd6ff;
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .theme-switcher {
  border-color: rgba(103, 232, 255, 0.2);
  background: rgba(21, 25, 50, 0.78);
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .theme-option.is-active,
html:not(.a11y-high-contrast)[data-theme="tekhno"] .theme-option[aria-pressed="true"] {
  background: linear-gradient(135deg, #6747ff, #8c4dff 54%, #31c8f5);
  box-shadow: 0 6px 15px rgba(98, 68, 255, 0.23);
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] :where(
  .sidebar-block,
  .lesson-card,
  .exercise-card,
  .assistant-card,
  .lesson-hero,
  .task-card
) {
  border-color: rgba(116, 132, 255, 0.24);
  background: rgba(24, 28, 53, 0.9);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .progress-card {
  background: linear-gradient(145deg, rgba(34, 29, 78, 0.96), rgba(19, 49, 67, 0.9));
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .review-card,
html:not(.a11y-high-contrast)[data-theme="tekhno"] .weak-topics-card,
html:not(.a11y-high-contrast)[data-theme="tekhno"] .accessibility-card {
  background: linear-gradient(145deg, rgba(28, 31, 61, 0.95), rgba(19, 23, 45, 0.92));
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .lesson-hero {
  position: relative;
  border-radius: 32px 12px 32px 12px;
  background:
    linear-gradient(90deg, rgba(24, 28, 55, 0.98) 0 53%, rgba(38, 28, 86, 0.88)),
    #151936;
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .lesson-hero::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(103, 71, 255, 0.15) 0 2px, transparent 2px) 18px 18px / 64px 64px,
    linear-gradient(rgba(45, 200, 245, 0.12) 0 2px, transparent 2px) 18px 18px / 64px 64px;
  content: "";
  mask-image: linear-gradient(90deg, transparent, #000 72%, #000);
  pointer-events: none;
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .lesson-hero::after {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  padding: 6px 10px;
  border: 1px solid rgba(103, 232, 255, 0.34);
  border-radius: 999px;
  background: rgba(12, 16, 36, 0.72);
  color: #9defff;
  content: "EP-IX  /  AI MODE";
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .hero-copy,
html:not(.a11y-high-contrast)[data-theme="tekhno"] .theme-hero-art {
  position: relative;
  z-index: 1;
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .theme-hero-art {
  filter: saturate(0.84) contrast(1.04) hue-rotate(4deg) drop-shadow(-18px 18px 28px rgba(92, 61, 200, 0.15));
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .hero-copy .hero-promise,
html:not(.a11y-high-contrast)[data-theme="tekhno"] .review-mode-banner,
html:not(.a11y-high-contrast)[data-theme="tekhno"] .review-result-message {
  border: 1px solid rgba(103, 232, 255, 0.22);
  background: rgba(18, 30, 59, 0.84);
  color: #dbe5ff;
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .primary-button {
  border-color: transparent;
  background: linear-gradient(135deg, #6546f5, #8c4ff7 58%, #1fb7e5);
  box-shadow: 0 8px 20px rgba(94, 65, 213, 0.2);
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .primary-button:hover {
  background: linear-gradient(135deg, #5134db, #7436dc 58%, #1297bd);
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] :where(.theory-grid article, .task-card, .exercise-ai-help) {
  border-color: rgba(116, 132, 255, 0.24);
  background:
    linear-gradient(rgba(137, 120, 255, 0.055) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(69, 200, 255, 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
    rgba(24, 28, 53, 0.92);
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .exercise-tab.is-active,
html:not(.a11y-high-contrast)[data-theme="tekhno"] .choice-button.is-selected,
html:not(.a11y-high-contrast)[data-theme="tekhno"] .word-block.is-picked {
  border-color: #8a78ff;
  background: rgba(103, 71, 255, 0.22);
  box-shadow: 0 0 0 3px rgba(103, 71, 255, 0.18), inset 0 0 14px rgba(103, 232, 255, 0.08);
  color: #eef3ff;
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .theme-epictetus-art {
  filter: saturate(0.94) contrast(1.08) brightness(1.03) drop-shadow(0 0 16px rgba(47, 187, 242, 0.24));
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .epictetus-portrait {
  border: 2px solid rgba(99, 69, 255, 0.35);
  border-radius: 28px 10px 28px 10px;
  background: linear-gradient(145deg, #fff1dc, #eeeaff 58%, #e9fbff);
  box-shadow: 0 14px 34px rgba(79, 57, 180, 0.22), inset 0 0 24px rgba(49, 201, 245, 0.12);
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .epictetus-portrait::before {
  position: absolute;
  top: 33px;
  right: 8px;
  left: 8px;
  z-index: 2;
  height: 10px;
  border: 1px solid rgba(46, 204, 250, 0.55);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(103, 71, 255, 0.15), rgba(46, 204, 250, 0.28), rgba(103, 71, 255, 0.15));
  box-shadow: 0 0 12px rgba(46, 204, 250, 0.32);
  content: "";
  pointer-events: none;
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .epictetus-portrait::after {
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 2;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #31c8f5;
  box-shadow: 0 0 12px #31c8f5;
  content: "";
  pointer-events: none;
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .theory-ai-heading {
  position: relative;
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .theory-ai-heading::after {
  align-self: flex-start;
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid rgba(103, 232, 255, 0.26);
  border-radius: 999px;
  background: rgba(12, 16, 36, 0.72);
  color: #9defff;
  content: "AI // EP-IX";
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .purr-visual::after {
  position: absolute;
  inset: 7px;
  z-index: 2;
  border: 1px solid rgba(49, 200, 245, 0.48);
  border-radius: var(--radius);
  box-shadow: inset 0 0 28px rgba(103, 71, 255, 0.16), 0 0 18px rgba(49, 200, 245, 0.14);
  content: "";
  pointer-events: none;
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .purr-reward {
  border-color: rgba(103, 232, 255, 0.22);
  background:
    linear-gradient(rgba(137, 120, 255, 0.055) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(69, 200, 255, 0.045) 1px, transparent 1px) 0 0 / 22px 22px,
    #171b36;
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .purr-wave {
  background: rgba(103, 71, 255, 0.18);
}

html:not(.a11y-high-contrast)[data-theme="tekhno"] .purr-wave i {
  background: linear-gradient(#6847ff, #31c8f5);
}

html.a11y-high-contrast .rule-heading {
  border: 2px solid #000;
  background: #000;
  box-shadow: none;
  color: #fff;
}

html.a11y-high-contrast .theme-switcher {
  border: 2px solid #000;
  background: #fff;
}

html.a11y-high-contrast .theme-option {
  color: #000;
}

html.a11y-high-contrast .theme-option.is-active,
html.a11y-high-contrast .theme-option[aria-pressed="true"] {
  background: #000;
  color: #fff;
}

@media (max-width: 1180px) {
  .topbar {
    flex-wrap: wrap;
  }

  .topbar-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  .theme-switcher {
    width: 100%;
    order: -1;
  }

  .theme-option {
    min-height: 38px;
  }

  html:not(.a11y-high-contrast)[data-theme="tekhno"] .lesson-hero::after {
    top: 10px;
    right: 10px;
  }
}

@media (max-width: 480px) {
  .topbar-actions .theme-switcher {
    grid-column: 1 / -1;
  }

  .theme-option {
    padding-inline: 5px;
    font-size: 10px;
  }
}

/* Theory tables should be fully visible inside the rule card instead of hiding columns behind a scrollbar. */
.lesson-rule-details .conjugation-table-wrap {
  overflow-x: visible;
}

.lesson-rule-details .conjugation-table,
.lesson-rule-details .conjugation-table.is-parts-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

.lesson-rule-details .conjugation-table th,
.lesson-rule-details .conjugation-table td {
  overflow-wrap: anywhere;
  word-break: normal;
}