:root {
  color-scheme: light;
  --ink: #172027;
  --muted: #62717c;
  --line: #d5e1e4;
  --paper: #eef6f6;
  --panel: #ffffff;
  --navy: #1f3a5f;
  --teal: #087f83;
  --teal-soft: #e7f5f4;
  --violet: #8b4a7f;
  --gold: #c9901e;
  --green: #4a8b57;
  --blue: #4e76cf;
  --shadow: 0 14px 34px rgba(20, 66, 82, 0.09);
  --soft-shadow: 0 8px 22px rgba(20, 66, 82, 0.07);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(238, 246, 246, 0.96)),
    radial-gradient(circle at 12% 8%, rgba(8, 127, 131, 0.1), transparent 30%),
    radial-gradient(circle at 84% 0%, rgba(201, 144, 30, 0.11), transparent 28%),
    var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  --ink: #1f2b32;
  --muted: #53636c;
  --line: #dde6e8;
  --paper: #f7faf8;
  --navy: #304260;
  --teal: #126f73;
  --violet: #85617f;
  --gold: #ad8430;
  --green: #557f62;
  --blue: #5b78ae;
  --shadow: 0 8px 22px rgba(48, 66, 96, 0.07);
  background: #f7faf8;
  font-size: 17px;
}

body *,
body *::before,
body *::after {
  scroll-behavior: auto !important;
  transition-duration: 80ms !important;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

body.locked {
  overflow: hidden;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    linear-gradient(rgba(244, 247, 251, 0.88), rgba(244, 247, 251, 0.94)),
    radial-gradient(circle at 25% 18%, rgba(107, 111, 191, 0.18), transparent 30%),
    radial-gradient(circle at 76% 72%, rgba(4, 124, 130, 0.18), transparent 32%);
  backdrop-filter: blur(10px);
}

.login-screen[hidden] {
  display: none;
}

.login-card {
  width: min(460px, 100%);
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 24px 70px rgba(36, 59, 104, 0.18);
}

.login-brand {
  display: grid;
  gap: 12px;
  align-items: center;
  justify-items: center;
}

.login-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.optional-label {
  color: var(--muted);
  font-size: 0.82em;
  font-weight: 700;
}

.login-mode {
  border-left: 4px solid var(--teal);
  background: #eef8f8;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.9rem;
}

.login-mode.error {
  border-left-color: #a52d2d;
  background: #fff2f2;
  color: #6f1f1f;
  font-weight: 800;
}

.text-button {
  width: fit-content;
  border: 0;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-weight: 800;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.text-button:hover {
  color: var(--ink);
}

.text-button:disabled {
  color: var(--muted);
  cursor: wait;
}

.login-bottom-link {
  justify-self: center;
  margin-top: -4px;
}

.password-reset-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbfb;
  padding: 14px;
}

.password-reset-panel[hidden] {
  display: none;
}

.login-reset-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.topbar,
.clinic-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(213, 225, 228, 0.9);
  background: rgba(248, 252, 252, 0.92);
  backdrop-filter: blur(16px);
}

.clinic-app[hidden],
.topbar[hidden],
.shell[hidden] {
  display: none;
}

.mobile-goal-bar {
  display: none;
}

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

.clinic-shell {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.clinic-summary-card,
.clinic-requests-card,
.clinic-audit-card,
.clinic-patient-card,
.clinic-detail-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.clinic-summary-card {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 20px;
}

.clinic-summary-card p,
.signed-in-label,
.clinic-patient-detail p,
.clinic-detail-section p {
  color: var(--muted);
}

.clinic-requests-card,
.clinic-audit-card {
  padding: 18px;
}

.clinic-disclosure {
  padding: 0;
  overflow: hidden;
}

.clinic-disclosure summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: 18px;
}

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

.clinic-disclosure summary > span {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--teal);
  background: #fff;
  padding: 8px 14px;
  font-weight: 900;
  white-space: nowrap;
}

.clinic-disclosure[open] summary > span {
  color: var(--muted);
}

.clinic-disclosure[open] summary > span::before {
  content: "Close";
}

.clinic-disclosure[open] summary > span {
  font-size: 0;
}

.clinic-disclosure[open] summary > span::before {
  font-size: 1rem;
}

.section-note {
  color: var(--muted);
  margin: 4px 0 0;
  font-size: 0.95rem;
}

.clinic-requests-list,
.clinic-audit-list {
  display: grid;
  gap: 10px;
  padding: 0 18px 18px;
}

.clinic-requests-list p,
.clinic-audit-list p {
  color: var(--muted);
  margin: 0;
}

.clinic-request-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: #fff;
  padding: 13px 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.clinic-request-item:hover {
  border-color: rgba(8, 127, 131, 0.36);
  box-shadow: 0 8px 18px rgba(32, 49, 68, 0.08);
  transform: translateY(-1px);
}

.clinic-request-item.alert {
  border-left-color: #a53232;
}

.clinic-request-item.watch {
  border-left-color: var(--gold);
}

.clinic-request-item.request {
  border-left-color: var(--green);
}

.clinic-request-item strong,
.clinic-request-item span,
.clinic-request-item small {
  display: block;
}

.clinic-request-item strong {
  color: var(--ink);
  margin-top: 4px;
  font-size: 1.02rem;
}

.clinic-request-patient-name {
  color: var(--teal-dark, #075d61) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.clinic-request-open-label {
  margin-top: 6px;
  color: var(--teal-dark, #075d61) !important;
  font-weight: 850;
}

.clinic-request-item span,
.clinic-request-item small,
.clinic-request-item time {
  color: var(--muted);
}

.clinic-request-kind {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: #edf8f7;
  color: var(--teal) !important;
  padding: 4px 9px;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.clinic-request-item time {
  white-space: nowrap;
  font-weight: 850;
}

.clinic-empty-state {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
  padding: 16px;
}

.clinic-empty-state strong,
.clinic-empty-state span {
  display: block;
}

.clinic-empty-state strong {
  color: var(--ink);
}

.clinic-empty-state span {
  color: var(--muted);
  margin-top: 4px;
}

.clinic-audit-card {
  background: #fbfcfd;
}

.clinic-audit-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.clinic-audit-item strong,
.clinic-audit-item span,
.clinic-audit-item small {
  display: block;
}

.clinic-audit-item strong {
  color: var(--ink);
}

.clinic-audit-item span,
.clinic-audit-item small,
.clinic-audit-item time {
  color: var(--muted);
}

.clinic-audit-item time {
  white-space: nowrap;
  font-weight: 850;
}

.signed-in-label {
  font-weight: 800;
}

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

.clinic-patient-card,
.clinic-detail-card {
  padding: 18px;
}

.clinic-add-patient,
.clinic-edit-patient {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
  margin: 12px 0 14px;
}

.clinic-add-patient summary,
.clinic-edit-patient summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  color: var(--navy);
  font-weight: 900;
}

.clinic-add-patient summary::-webkit-details-marker,
.clinic-edit-patient summary::-webkit-details-marker {
  display: none;
}

.clinic-add-patient summary::after,
.clinic-edit-patient summary::after {
  content: "+";
  float: right;
  color: var(--teal);
}

.clinic-add-patient[open] summary,
.clinic-edit-patient[open] summary {
  border-bottom: 1px solid var(--line);
}

.clinic-add-patient[open] summary::after,
.clinic-edit-patient[open] summary::after {
  content: "-";
}

.clinic-add-patient-form,
.clinic-edit-patient-form {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.clinic-add-patient-form label,
.clinic-edit-patient-form label {
  display: grid;
  gap: 7px;
  color: var(--navy);
  font-weight: 850;
}

.clinic-add-patient-form input,
.clinic-add-patient-form select,
.clinic-add-patient-form textarea,
.clinic-edit-patient-form input,
.clinic-edit-patient-form select,
.clinic-edit-patient-form textarea {
  min-height: 44px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 12px;
  font: inherit;
}

.clinic-add-patient-form textarea,
.clinic-edit-patient-form textarea {
  min-height: 84px;
  padding: 10px 12px;
  resize: vertical;
}

.exercise-assignment {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.exercise-assignment legend {
  color: var(--navy);
  font-weight: 900;
  padding: 0 4px;
}

.exercise-assignment label {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 850;
}

.exercise-assignment input {
  min-height: auto;
  width: auto;
  accent-color: var(--teal);
}

.prescription-editor {
  display: grid;
  gap: 12px;
  border: 2px solid rgba(4, 124, 130, 0.28);
  border-radius: 10px;
  background: #f5fbfb;
  padding: 14px;
}

.prescription-editor legend {
  color: var(--navy);
  font-weight: 900;
  padding: 0 5px;
}

.prescription-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.prescription-summary {
  display: grid;
  gap: 7px;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.prescription-summary strong,
.prescription-summary span {
  display: block;
}

.prescription-summary span {
  color: var(--muted);
  font-size: 0.88rem;
}

.prescription-customizer {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.prescription-customizer summary {
  color: var(--teal-dark, #075d61);
  cursor: pointer;
  font-weight: 800;
}

.prescription-customizer-fields {
  display: grid;
  gap: 12px;
  padding-top: 12px;
}

.prescription-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

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

.prescription-version-card {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  background: #eef8f8;
  padding: 14px;
}

.prescription-version-card p,
.prescription-version-card small {
  margin: 0;
}

.prescription-version-link {
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.prescription-version-link:hover,
.prescription-version-link:focus-visible {
  border-left-color: var(--teal-dark, #075d61);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(8, 127, 131, 0.14);
  transform: translateY(-1px);
}

.prescription-open-button {
  justify-self: start;
  margin-top: 4px;
}

.new-patient-result {
  display: grid;
  gap: 5px;
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  background: #eef8f8;
  padding: 12px;
  color: var(--muted);
}

.new-patient-result[hidden] {
  display: none;
}

.new-patient-result strong {
  color: var(--navy);
}

.new-patient-result b {
  color: var(--ink);
}

.patient-invite-copy {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 900;
}

.patient-invite-copy textarea {
  min-height: 156px;
  resize: vertical;
  border-color: rgba(8, 127, 131, 0.22);
  background: #fff;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.35;
}

.new-patient-result .ghost-button {
  width: fit-content;
  margin-top: 4px;
}

.final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.clinic-search-label {
  display: grid;
  gap: 7px;
  margin: 12px 0 14px;
  color: var(--navy);
  font-weight: 850;
}

.clinic-search-label input {
  min-height: 44px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
  color: var(--ink);
  padding: 0 12px;
  font: inherit;
}

.clinic-search-label input:focus {
  border-color: var(--teal);
  outline: 3px solid rgba(8, 127, 131, 0.14);
}

.clinic-patient-list {
  display: grid;
  gap: 10px;
}

.clinic-patient-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.clinic-prescription-shortcut {
  justify-self: stretch;
  min-height: 44px;
  border: 1px solid var(--teal);
  border-radius: 8px;
  background: #eef8f8;
  color: var(--teal-dark, #075d61);
  padding: 10px 12px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.clinic-prescription-shortcut:hover,
.clinic-prescription-shortcut:focus-visible {
  background: var(--teal);
  color: #fff;
  outline: 3px solid rgba(8, 127, 131, 0.14);
}

.clinic-patient-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 13px;
  text-align: left;
  cursor: pointer;
}

.clinic-patient-button > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.clinic-patient-button .status-pill {
  max-width: 150px;
  text-align: center;
  white-space: normal;
}

@media (max-width: 680px) {
  .clinic-patient-button {
    grid-template-columns: 1fr;
  }

  .clinic-patient-button .status-pill {
    justify-self: start;
  }
}

.clinic-patient-button:hover,
.clinic-patient-button.active {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(8, 127, 131, 0.12);
}

.clinic-patient-button strong,
.clinic-patient-button small {
  display: block;
}

.clinic-patient-button strong {
  color: var(--ink);
  font-size: 1rem;
}

.clinic-patient-button small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.86rem;
}

.clinic-detail-header,
.clinic-detail-stats {
  display: grid;
  gap: 12px;
}

.clinic-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: start;
}

.danger-button {
  border-color: #a53232 !important;
  color: #8f2929 !important;
}

.clinic-detail-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.clinic-detail-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 18px 0;
}

.clinic-detail-stats article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
  padding: 12px;
}

.clinic-detail-stats article.improved {
  background: #eef8f0;
  border-color: #b7dcc0;
}

.clinic-detail-stats article.higher {
  background: #fff8ec;
  border-color: #efd19a;
}

.clinic-detail-stats span {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.clinic-detail-stats strong {
  display: block;
  margin-top: 5px;
  color: var(--navy);
}

.clinic-detail-section {
  margin-top: 18px;
}

.clinic-detail-section h3 {
  margin-bottom: 10px;
  color: var(--navy);
}

.clinic-adherence-card,
.clinic-category-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  margin-top: 14px;
  padding: 14px;
}

.clinic-adherence-card .section-title strong {
  color: var(--teal);
  font-size: 1.05rem;
}

.clinic-protocol-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.8fr);
  gap: 16px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 6px solid var(--teal);
  border-radius: 8px;
  background: #f8fbfd;
  margin-top: 14px;
  padding: 16px;
}

.clinic-protocol-card h3 {
  margin: 4px 0 6px;
  color: var(--navy);
}

.clinic-protocol-card p {
  color: var(--muted);
  margin: 0;
}

.clinic-protocol-card.protocol-progress {
  border-left-color: var(--green);
}

.clinic-protocol-card.protocol-hold {
  border-left-color: var(--gold);
}

.clinic-protocol-card.protocol-step-back {
  border-left-color: #a53232;
}

.protocol-metrics {
  display: grid;
  gap: 8px;
}

.protocol-metrics span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px 10px;
  color: var(--muted);
  font-weight: 850;
}

.protocol-metrics strong {
  color: var(--navy);
}

.adherence-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.adherence-day {
  display: grid;
  gap: 4px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
  min-height: 66px;
  color: var(--muted);
}

.adherence-day.complete {
  border-color: #b7dcc0;
  background: #eef8f0;
  color: var(--green);
}

.adherence-day span {
  font-size: 0.78rem;
  font-weight: 900;
}

.adherence-day strong {
  color: inherit;
  font-size: 0.85rem;
}

.clinic-category-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  background: #f8fbfd;
}

.clinic-category-card div {
  border-right: 1px solid var(--line);
  padding-right: 12px;
}

.clinic-category-card div:last-child {
  border-right: 0;
  padding-right: 0;
}

.clinic-category-card span {
  display: block;
  color: var(--muted);
  font-weight: 850;
}

.clinic-category-card strong {
  display: block;
  margin-top: 5px;
  color: var(--navy);
  font-size: 1.4rem;
}

.clinic-trend-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
  padding: 14px;
}

.clinic-trend-card div {
  border-right: 1px solid var(--line);
  padding-right: 12px;
}

.clinic-trend-card div:last-child {
  border-right: 0;
  padding-right: 0;
}

.clinic-trend-card span,
.clinic-trend-card small {
  display: block;
  color: var(--muted);
}

.clinic-trend-card span {
  font-size: 0.84rem;
  font-weight: 850;
}

.clinic-trend-card strong {
  display: block;
  margin: 5px 0 3px;
  color: var(--navy);
}

.clinic-timeline {
  display: grid;
  gap: 10px;
}

.clinic-timeline article {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: #f8fbfd;
  padding: 12px;
}

.clinic-timeline time {
  color: var(--muted);
  font-weight: 900;
}

.clinic-timeline strong {
  display: block;
  color: var(--ink);
}

.clinic-timeline span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.brand,
.top-actions,
.stage-actions,
.stage-header,
.round-stats,
.section-title,
.stat-row {
  display: flex;
  align-items: center;
}

.brand {
  gap: 12px;
}

.brand-logo {
  display: block;
  object-fit: contain;
}

.header-logo {
  width: 230px;
  height: 44px;
}

.login-logo {
  width: min(390px, 100%);
  height: 78px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  letter-spacing: 0;
}

h1,
h2,
h3 {
  margin: 0;
}

h1 {
  font-size: 1.32rem;
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.contact-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #087f83;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  padding: 0 14px;
  font-weight: 900;
  text-decoration: none;
}

.contact-button:hover {
  background: #05686d;
}

body .login-screen {
  background: rgba(247, 250, 248, 0.96);
  backdrop-filter: none;
}

body .panel,
body .hero-panel,
body .training-stage,
body .progress-panel,
body .therapy-panel,
body .therapy-card,
body .therapy-detail,
body .game-card,
body .daily-plan-panel,
body .more-tools-panel,
body .encouragement-panel,
body .symptom-panel,
body .sleep-panel,
body .clinician-panel,
body .final-panel {
  background: #fff;
  box-shadow: var(--shadow);
}

body .game-board,
body .cognitive-demo,
body .therapy-demo,
body .mini-memory-demo,
body .mini-focus-demo,
body .mini-speed-demo,
body .mini-pattern-demo,
body .mini-dual-demo,
body .feedback {
  background: #fbfdfb;
}

body .daily-card,
body .therapy-card.daily-suggestion,
body .complete-card,
body .sort-card,
body .mini-sort-card {
  box-shadow: none;
}

body .daily-card:hover,
body .therapy-card:hover,
body .therapy-card.active,
body .game-card:hover,
body .game-card.active {
  transform: none;
  box-shadow: 0 0 0 3px rgba(18, 111, 115, 0.1);
}

body .tile.lit,
body .tile.chosen {
  background: #fff4a8;
  filter: brightness(1.05) saturate(1.05);
  outline: 6px solid #172027;
  outline-offset: 5px;
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.98), 0 0 0 18px rgba(4, 124, 130, 0.28), inset 0 -5px 0 rgba(36, 59, 104, 0.08);
}

body .mini-shape.correct {
  filter: none;
  box-shadow: 0 0 0 4px rgba(18, 111, 115, 0.16), inset 0 -5px 0 rgba(36, 59, 104, 0.08);
}

body .eyebrow,
body .daily-card-type {
  letter-spacing: 0.03em;
}

.shell {
  display: grid;
  grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
  gap: 18px;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 18px;
}

.rail,
.workspace {
  display: grid;
  gap: 16px;
  align-content: start;
}

.rail {
  position: sticky;
  top: 86px;
  align-self: start;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.mobile-menu {
  border: 1px solid rgba(216, 225, 231, 0.72);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(25, 38, 45, 0.06);
  overflow: hidden;
}

.mobile-menu > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  color: var(--navy);
  font-weight: 900;
}

.mobile-menu > summary::-webkit-details-marker {
  display: none;
}

.mobile-menu > summary::after {
  content: "+";
  color: var(--teal);
  font-size: 1.15rem;
}

.mobile-menu[open] > summary {
  border-bottom: 1px solid var(--line);
  background: #f8fbfd;
}

.mobile-menu[open] > summary::after {
  content: "-";
}

.mobile-menu-content {
  display: grid;
  gap: 16px;
  padding: 12px;
}

.side-goal-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(18, 111, 115, 0.18);
  border-radius: 8px;
  background: #eef8f7;
  padding: 14px 16px;
  box-shadow: var(--soft-shadow);
}

.mobile-menu[open] + .side-goal-card {
  display: none;
}

.side-goal-card div:first-child {
  display: grid;
  gap: 3px;
}

.side-goal-card span,
.side-goal-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.side-goal-card strong {
  color: var(--navy);
  font-size: 1.1rem;
  line-height: 1.2;
}

.side-goal-card small {
  color: var(--teal);
}

.side-goal-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfeaec;
}

.side-goal-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
  transition: width 220ms ease;
}

.panel,
.hero-panel,
.training-stage,
.progress-panel,
.therapy-panel,
.therapy-card,
.therapy-detail,
.game-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--soft-shadow);
}

.panel {
  padding: 18px;
}

label {
  display: grid;
  gap: 7px;
  color: #344550;
  font-size: 0.88rem;
  font-weight: 800;
}

input,
select {
  width: 100%;
  border: 1px solid #c9d5dd;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  outline: 0;
  padding: 11px 12px;
}

input:focus,
select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(4, 124, 130, 0.15);
}

.profile-panel {
  display: grid;
  gap: 14px;
}

.goal-ring {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
}

.goal-ring svg {
  width: 132px;
  height: 132px;
  transform: rotate(-90deg);
}

.ring-bg,
.ring-arc {
  fill: none;
  stroke-width: 12;
}

.ring-bg {
  stroke: #e8eef4;
}

.ring-arc {
  stroke: var(--teal);
  stroke-linecap: round;
  stroke-dasharray: 302;
  stroke-dashoffset: 302;
  transition: stroke-dashoffset 220ms ease;
}

.goal-ring div {
  position: absolute;
  display: grid;
  text-align: center;
}

.goal-ring strong {
  font-size: 1.45rem;
}

.goal-ring span,
.goal-ring small,
.stat-row span,
.domain-row span,
.session-log span,
.session-log time {
  color: var(--muted);
}

.goal-ring small {
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 900;
}

.stat-panel,
.note-panel,
.program-panel {
  display: grid;
  gap: 12px;
}

.stat-panel h2,
.note-panel h2,
.program-panel h2 {
  font-size: 1.02rem;
}

.stat-row {
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.stat-row strong {
  color: var(--navy);
  font-size: 1.35rem;
}

.note-panel {
  border-left: 5px solid var(--gold);
}

.note-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.emergency-note {
  color: #8c1d18 !important;
  font-weight: 900;
}

.source-links {
  display: grid;
  gap: 7px;
}

.source-links a {
  color: var(--teal);
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
}

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

.program-panel {
  border-left: 5px solid var(--teal);
}

.program-meter {
  height: 16px;
  border-radius: 999px;
  background: #e8eef4;
  overflow: hidden;
}

.program-meter div {
  display: grid;
  width: 6%;
  height: 100%;
  place-items: center;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  transition: width 220ms ease;
}

.program-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.library-menu {
  display: grid;
  gap: 10px;
}

.library-menu h2 {
  font-size: 1.02rem;
}

.library-menu-button {
  min-height: 44px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 0 12px;
  text-align: left;
  font-weight: 900;
}

.library-menu-button:hover,
.library-menu-button.active {
  border-color: var(--teal);
  background: #eef8f8;
  color: var(--teal);
}

.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: rgba(17, 32, 38, 0.28);
  padding: 18px;
}

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

.feedback-card {
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(17, 32, 38, 0.18);
  padding: 22px;
}

.feedback-card h2,
.feedback-card p {
  margin: 0;
}

.feedback-card p {
  color: var(--muted);
  line-height: 1.45;
}

.feedback-card label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-weight: 850;
}

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

.feedback-rating button {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbfb;
  color: var(--navy);
  font-size: 1.1rem;
  font-weight: 950;
}

.feedback-rating button:hover,
.feedback-rating button.selected {
  border-color: var(--teal);
  background: #e9f7f7;
  color: var(--teal);
  box-shadow: 0 0 0 4px rgba(8, 127, 131, 0.1);
}

.feedback-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.clinician-panel {
  border-left-color: var(--teal);
}

.clinician-panel > .section-title {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.clinician-alert {
  border: 1px solid var(--line);
  border-left: 6px solid var(--teal);
  border-radius: 8px;
  background: #f5fbfb;
  padding: 14px;
}

.clinician-alert.needs-follow-up {
  border-left-color: #9b2c2c;
  background: #fff8f7;
}

.clinician-alert strong {
  display: block;
  color: var(--navy);
  font-size: 1.1rem;
}

.clinician-alert span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.4;
}

.clinic-alert-patient-link {
  border: 0;
  background: transparent;
  color: #8f2929;
  padding: 0;
  font: inherit;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.clinic-alert-patient-link:hover,
.clinic-alert-patient-link:focus-visible {
  color: var(--teal-dark, #075d61);
  outline: 2px solid rgba(8, 127, 131, 0.2);
  outline-offset: 2px;
}

.clinician-stats,
.clinician-grid {
  display: grid;
  gap: 12px;
}

.clinician-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.clinician-stats article,
.clinician-grid article,
.clinician-actions {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.clinician-stats span,
.clinician-activity span,
.clinician-activity time,
.clinician-actions p,
.clinician-trend p {
  color: var(--muted);
}

.clinician-stats strong {
  display: block;
  margin-top: 4px;
  color: var(--navy);
  font-size: 1.35rem;
}

.clinician-grid {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.clinician-grid h3 {
  color: var(--navy);
  font-size: 1rem;
  margin-bottom: 10px;
}

.trend-number {
  display: inline-grid;
  min-width: 118px;
  border-radius: 8px;
  background: #f3f7f8;
  padding: 12px;
  text-align: center;
}

.trend-number.improved {
  background: #eef8f0;
}

.trend-number.higher {
  background: #fff8ec;
}

.trend-number strong {
  color: var(--navy);
  font-size: 2rem;
}

.trend-number span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.clinician-activity {
  display: grid;
  gap: 9px;
}

.clinician-activity article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
}

.clinician-activity article:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.clinician-activity strong {
  display: block;
  color: var(--ink);
}

.clinician-patient-list {
  display: grid;
  gap: 10px;
}

.clinician-patient-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.clinician-patient-row strong {
  display: block;
  color: var(--ink);
}

.clinician-patient-row span:not(.status-pill) {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.status-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #edf8ef;
  color: var(--green);
  padding: 7px 10px;
  font-size: 0.82rem;
  font-weight: 900;
}

.status-pill.alert {
  background: #fff1ef;
  color: #9b2c2c;
}

.status-pill.watch {
  background: #fff8ec;
  color: #8a5a00;
}

.status-pill.neutral {
  background: #eef4f6;
  color: var(--muted);
}

.clinician-actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.clinician-actions p {
  max-width: 640px;
  margin: 0;
  line-height: 1.4;
}

.hero-panel {
  display: block;
  border-left: 5px solid var(--teal);
  overflow: hidden;
  padding: 18px;
}

.hero-panel h2 {
  max-width: 760px;
  font-size: clamp(1.45rem, 2vw, 2.1rem);
  line-height: 1.12;
}

.hero-panel p:last-child {
  max-width: 640px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 0;
}

.optional-library-panel {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 18px;
}

.optional-library-panel[hidden] {
  display: none;
}

.optional-library-panel > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.optional-library-panel > div:first-child p {
  margin: 6px 0 0;
  color: var(--muted);
}

.library-close-button {
  flex: 0 0 auto;
}

.patient-resource-panel {
  border-left-color: var(--teal);
}

.resource-steps {
  display: grid;
  gap: 10px;
}

.resource-steps article {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfb;
}

.resource-steps span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e6f3f3;
  color: var(--teal);
  font-weight: 900;
}

.resource-steps h3 {
  margin: 0 0 4px;
  color: var(--ink);
}

.resource-steps p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.brain-visual {
  position: relative;
  min-height: 190px;
  border-radius: 8px;
  background: linear-gradient(145deg, #e5f4f4, #f9f2df);
  overflow: hidden;
}

.brain-visual svg {
  position: absolute;
  inset: 8px 5px 0;
  width: calc(100% - 10px);
  height: calc(100% - 8px);
}

.brain-visual path:first-child {
  fill: rgba(255, 255, 255, 0.62);
  stroke: var(--navy);
  stroke-width: 5;
}

.brain-visual path:not(:first-child) {
  fill: none;
  stroke: rgba(36, 59, 104, 0.55);
  stroke-width: 5;
  stroke-linecap: round;
}

.node {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.45);
}

.n1 { left: 24%; top: 30%; background: var(--violet); }
.n2 { left: 58%; top: 22%; background: var(--teal); }
.n3 { right: 18%; top: 58%; background: var(--gold); }
.n4 { left: 34%; bottom: 18%; background: var(--blue); }

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

.patient-welcome-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(216, 225, 231, 0.72);
  border-left: 5px solid var(--green);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #f7fbfa);
  box-shadow: 0 10px 24px rgba(25, 38, 45, 0.07);
  padding: 20px;
}

.patient-welcome-panel.complete {
  border-left-color: var(--teal);
  background: linear-gradient(135deg, #fff, #f1f8f6);
}

.patient-welcome-panel h2,
.patient-welcome-panel p {
  margin: 0;
}

.patient-welcome-panel h2 {
  color: var(--ink);
  font-size: 1.45rem;
}

.patient-welcome-panel p {
  color: var(--muted);
  line-height: 1.45;
}

.patient-plan-summary {
  display: grid;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: #eef8f8;
  padding: 14px;
  min-width: min(100%, 360px);
}

.patient-plan-summary span {
  color: var(--navy);
  font-weight: 850;
  line-height: 1.35;
}

.patient-plan-summary button {
  width: fit-content;
}

.today-reminder-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(141, 191, 193, 0.52);
  border-radius: 8px;
  background: #f2fbfa;
  box-shadow: 0 8px 18px rgba(25, 38, 45, 0.05);
  padding: 12px 14px;
}

.today-reminder-strip[hidden] {
  display: none;
}

.today-reminder-strip strong,
.today-reminder-strip span {
  display: block;
}

.today-reminder-strip > div:first-child strong {
  color: var(--teal);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.today-reminder-strip > div:first-child span {
  color: var(--muted);
  font-weight: 750;
}

.today-reminder-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.reminder-button {
  display: grid;
  gap: 2px;
  min-width: 160px;
  border-color: rgba(8, 127, 131, 0.24);
  background: #fff;
  padding: 9px 12px;
  text-align: left;
}

.reminder-button span {
  color: var(--navy);
  font-size: 0.84rem;
  font-weight: 900;
}

.reminder-button strong {
  color: var(--teal);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.today-reminder-note {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 850;
}

.daily-plan-panel {
  position: relative;
  display: grid;
  gap: 14px;
  border: 1px solid rgba(216, 225, 231, 0.72);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(25, 38, 45, 0.07);
  padding: 20px;
  overflow: hidden;
}

.daily-plan-panel::before {
  display: none;
}

.daily-plan-panel > * {
  position: relative;
}

.more-tools-panel {
  border: 1px solid rgba(216, 225, 231, 0.72);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(25, 38, 45, 0.06);
  overflow: hidden;
}

.more-tools-panel > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  color: var(--navy);
  font-weight: 900;
}

.more-tools-panel > summary::-webkit-details-marker {
  display: none;
}

.more-tools-panel > summary::after {
  content: "+";
  color: var(--teal);
  font-size: 1.2rem;
}

.more-tools-panel[open] > summary {
  border-bottom: 1px solid var(--line);
  background: #f8fbfd;
}

.more-tools-panel[open] > summary::after {
  content: "-";
}

.more-tools-content {
  display: grid;
  gap: 14px;
  padding: 14px;
}

body .more-tools-panel {
  box-shadow: 0 8px 18px rgba(25, 38, 45, 0.05);
}

.progress-collapse {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.progress-collapse[hidden] {
  display: none;
}

.daily-plan-status {
  width: fit-content;
  border-radius: 999px;
  background: #eef8f8;
  color: var(--teal);
  padding: 7px 11px;
  font-size: 0.86rem;
  font-weight: 900;
}

.daily-session-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.daily-goal-pill {
  width: fit-content;
  border-radius: 999px;
  background: #f7fbfc;
  border: 1px solid var(--line);
  color: var(--navy);
  padding: 7px 11px;
  font-size: 0.86rem;
  font-weight: 900;
  white-space: nowrap;
}

.daily-goal-pill.complete {
  background: #edf8ef;
  border-color: #c8e6ce;
  color: var(--green);
}

.daily-plan-status.complete {
  background: #edf8ef;
  color: var(--green);
}

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

.daily-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-content: start;
  min-height: 158px;
  border: 1px solid rgba(216, 225, 231, 0.82);
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.daily-card::after {
  display: none;
}

.daily-card:hover {
  border-color: var(--teal);
  box-shadow: 0 16px 34px rgba(4, 124, 130, 0.14);
  transform: translateY(-2px);
}

.daily-card.complete {
  border-color: rgba(74, 139, 87, 0.5);
  background: linear-gradient(135deg, #ffffff, #f0f8f4);
}

.daily-card.cognitive-required {
  border-left: 4px solid var(--blue);
}

.daily-card.daily-card-empty {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  min-height: 120px;
}

.daily-step-badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef8f8;
  color: var(--teal);
  font-size: 0.95rem;
  font-weight: 900;
}

.daily-card.complete .daily-step-badge {
  background: #edf8ef;
  color: var(--green);
}

.daily-card-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.daily-card-topline {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.daily-card-status {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.daily-card.complete .daily-card-status {
  color: var(--green);
}

.daily-card-type {
  color: var(--navy);
  font-size: 0.82rem;
  text-transform: uppercase;
}

.daily-card h3,
.daily-card p {
  margin: 0;
}

.daily-card p {
  color: var(--muted);
  line-height: 1.38;
}

.daily-card small {
  color: var(--teal);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.25;
}

.daily-card button {
  grid-column: 2;
  align-self: end;
  width: fit-content;
}

.daily-card .daily-begin-button {
  min-width: 104px;
  background: linear-gradient(135deg, var(--teal), #0a6f73);
  color: #fff;
  box-shadow: 0 10px 20px rgba(8, 127, 131, 0.16);
}

.daily-card .daily-begin-button:hover {
  background: #05686d;
  color: #fff;
}

.daily-card .completed-action {
  min-width: 118px;
  border-color: rgba(74, 139, 87, 0.24);
  background: #edf8ef;
  color: var(--green);
}

.daily-card .completed-action:hover {
  border-color: rgba(74, 139, 87, 0.35);
  background: #e5f4e9;
  color: var(--green);
}

.encouragement-panel {
  border: 1px solid var(--line);
  border-left: 5px solid var(--green);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #f2f8f3);
  box-shadow: var(--shadow);
  padding: 18px;
}

.encouragement-panel blockquote {
  margin: 0;
  color: var(--navy);
  font-size: 1.18rem;
  font-weight: 850;
  line-height: 1.35;
}

.side-encouragement {
  box-shadow: var(--soft-shadow);
  padding: 14px 16px;
}

.side-encouragement .eyebrow {
  margin: 0 0 7px;
}

.side-encouragement blockquote {
  font-size: 1rem;
}

body.checkin-modal-open {
  overflow: hidden;
}

.checkin-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 32px);
}

.checkin-modal[hidden] {
  display: none;
}

.checkin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 31, 40, 0.34);
  backdrop-filter: blur(3px);
}

.checkin-modal-card {
  position: relative;
  display: grid;
  gap: 16px;
  width: min(980px, 100%);
  max-height: min(86vh, 920px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfdff;
  box-shadow: 0 28px 80px rgba(30, 48, 64, 0.28);
  padding: clamp(16px, 2.4vw, 24px);
}

.checkin-modal-header {
  position: sticky;
  top: 0;
  z-index: 1;
  align-items: start;
  margin: calc(clamp(16px, 2.4vw, 24px) * -1) calc(clamp(16px, 2.4vw, 24px) * -1) 0;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 253, 255, 0.96);
  padding: clamp(16px, 2.4vw, 24px);
  backdrop-filter: blur(10px);
}

.checkin-modal-header p:not(.eyebrow) {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.35;
}

.checkin-modal .recovery-check-panel,
.checkin-modal .symptom-panel {
  box-shadow: none;
}

.checkin-modal .symptom-log {
  display: none;
}

.therapy-prep-card {
  width: min(680px, 100%);
}

.therapy-prep-checklist,
.therapy-prep-baseline {
  display: grid;
  gap: 10px;
}

.therapy-prep-checklist label,
.therapy-prep-baseline label {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  font-weight: 700;
}

.therapy-prep-checklist input,
.therapy-prep-baseline input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--teal);
}

.therapy-prep-stop {
  border-left: 4px solid #b88419;
  border-radius: 7px;
  background: #fff8e8;
  padding: 12px 14px;
}

.therapy-prep-stop p {
  margin: 5px 0 0;
  line-height: 1.45;
}

.therapy-prep-baseline {
  margin: 0;
  border: 0;
  padding: 0;
}

.therapy-prep-baseline legend {
  margin-bottom: 9px;
  color: var(--navy);
  font-weight: 900;
}

.recovery-check-panel,
.symptom-panel,
.sleep-panel {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 18px;
}

.recovery-check-panel[hidden],
.symptom-panel[hidden],
.sleep-panel[hidden] {
  display: none;
}

.quiet-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.recovery-status {
  width: fit-content;
  border-radius: 999px;
  background: #edfafa;
  color: var(--teal);
  padding: 7px 11px;
  font-size: 0.86rem;
  font-weight: 900;
}

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

.recovery-question-grid label,
.recovery-check-panel > label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 850;
}

.red-flag-fieldset {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(170, 38, 38, 0.22);
  border-radius: 8px;
  background: #fffafa;
  padding: 14px;
  min-width: 0;
}

.red-flag-fieldset legend {
  padding: 0 6px;
  color: #8d1919;
  font-weight: 900;
}

.red-flag-fieldset label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  width: 100%;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.red-flag-fieldset input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.headache-details-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(8, 127, 131, 0.18);
  border-radius: 8px;
  background: #f7fbfb;
  padding: 14px;
  min-width: 0;
}

.headache-details-panel[hidden] {
  display: none;
}

.headache-details-panel legend {
  padding: 0 6px;
  color: var(--teal);
  font-weight: 900;
}

.headache-details-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

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

.headache-option-grid label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.35;
}

.headache-option-grid input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.recovery-result {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(8, 127, 131, 0.24);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  background: #f1fafa;
  padding: 12px;
}

.recovery-result[hidden] {
  display: none;
}

.recovery-result strong {
  color: var(--navy);
}

.recovery-result span {
  color: var(--muted);
  line-height: 1.4;
}

.recovery-result.lighter {
  border-left-color: var(--gold);
  background: #fffaf0;
}

.recovery-result.contact,
.recovery-result.urgent {
  border-left-color: #a32626;
  background: #fff6f6;
}

.symptom-total {
  width: fit-content;
  border-radius: 999px;
  background: #fff3ef;
  color: var(--violet);
  padding: 7px 11px;
  font-size: 0.86rem;
  font-weight: 900;
}

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

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

.symptom-sleep-grid {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.sleep-grid label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 850;
}

.sleep-actions {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.sleep-status {
  color: var(--muted);
  line-height: 1.35;
}

.sleep-suggestions {
  border: 1px solid rgba(8, 127, 131, 0.24);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: #f1fafa;
  padding: 12px;
}

.sleep-suggestions[hidden] {
  display: none;
}

.sleep-suggestions strong {
  display: block;
  margin-bottom: 8px;
  color: var(--navy);
}

.sleep-suggestions ul {
  margin: 0;
  padding-left: 20px;
  color: #344550;
  line-height: 1.45;
}

.symptom-item {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(130px, 1.6fr) 34px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 10px;
}

.symptom-item strong {
  display: grid;
  place-items: center;
  min-height: 32px;
  border-radius: 999px;
  background: #eef4fb;
  color: var(--navy);
}

.symptom-item:has(input:disabled) {
  opacity: 0.62;
}

.symptom-item input:disabled {
  cursor: not-allowed;
}

.symptom-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.symptom-trend {
  color: var(--muted);
  font-weight: 800;
}

.symptom-log {
  display: grid;
  gap: 9px;
}

.symptom-log article {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px;
}

.symptom-log span,
.symptom-log time,
.symptom-log p {
  color: var(--muted);
}

.symptom-log span,
.symptom-log time {
  display: block;
  font-size: 0.84rem;
  margin-top: 4px;
}

.symptom-log p {
  margin: 6px 0 0;
  line-height: 1.4;
}

.game-card {
  min-height: 152px;
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 16px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.game-card:hover,
.game-card.active {
  border-color: var(--teal);
  box-shadow: 0 18px 38px rgba(4, 124, 130, 0.16);
  transform: translateY(-2px);
}

.game-card h3 {
  font-size: 1.08rem;
}

.game-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.38;
}

.therapy-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.therapy-note {
  max-width: 440px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
  text-align: right;
}

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

.therapy-grid[hidden] {
  display: none !important;
}

.therapy-grid:has(.daily-suggestion) {
  grid-template-columns: repeat(2, minmax(0, 560px));
}

.therapy-card {
  min-height: 134px;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.therapy-card.daily-suggestion {
  min-height: 168px;
  border-left: 5px solid var(--violet);
  background: linear-gradient(135deg, #ffffff, #f6f8fd);
}

.therapy-card:hover,
.therapy-card.active {
  border-color: var(--blue);
  box-shadow: 0 16px 34px rgba(78, 118, 207, 0.16);
  transform: translateY(-2px);
}

.therapy-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.38;
}

.therapy-card button {
  align-self: end;
  width: fit-content;
}

.therapy-type {
  width: fit-content;
  border-radius: 999px;
  color: #fff;
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 900;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.grade-badge {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  color: #243b68;
  background: #edf2f7;
  font-size: 0.72rem;
  font-weight: 900;
}

.grade-1 {
  color: #245b42;
  background: #e8f6ed;
}

.grade-2 {
  color: #0b6268;
  background: #e7f5f6;
}

.grade-3 {
  color: #354585;
  background: #edf0ff;
}

.grade-4 {
  color: #72520f;
  background: #fff5dd;
}

.therapy-type.vestibular {
  background: var(--blue);
}

.therapy-type.convergence {
  background: var(--violet);
}

.therapy-detail {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.therapy-demo {
  position: relative;
  min-height: 300px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}

.therapy-demo::after {
  content: none;
}

.therapy-video-demo {
  display: grid;
  place-items: center;
  min-height: 0;
  background: #f7fafb;
}

.therapy-video-demo video {
  display: block;
  width: 100%;
  max-height: 520px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #f7fafb;
}

.still-guided-demo {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  overflow: hidden;
  background: #f7fafb;
  aspect-ratio: 2 / 1;
}

.still-guided-demo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.still-guided-outdoor-walk {
  aspect-ratio: 16 / 9;
}

.still-demo-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.still-demo-caption {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(78%, 760px);
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--navy);
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 14px 30px rgba(36, 59, 104, 0.1);
}

.still-focus-ring {
  position: absolute;
  width: 42px;
  height: 42px;
  border: 5px solid rgba(4, 124, 130, 0.9);
  border-radius: 999px;
  box-shadow: 0 0 0 12px rgba(4, 124, 130, 0.12);
  transform: translate(-50%, -50%);
  animation: still-focus-pulse 5.8s ease-in-out infinite;
}

.still-scan-line {
  position: absolute;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(4, 124, 130, 0), rgba(4, 124, 130, 0.72), rgba(4, 124, 130, 0));
  transform-origin: left center;
  opacity: 0.75;
  animation: still-line-flow 5.8s ease-in-out infinite;
}

.still-label {
  position: absolute;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(36, 59, 104, 0.08);
}

.still-brock-near {
  left: 46.7%;
  top: 31.8%;
  animation-delay: 0s;
}

.still-brock-mid {
  left: 70.8%;
  top: 58.8%;
  animation-delay: 1.9s;
}

.still-brock-far {
  left: 93.6%;
  top: 86%;
  animation-delay: 3.8s;
}

.still-brock-line {
  left: 45%;
  top: 35.5%;
  width: 50%;
  transform: rotate(47deg);
}

.still-label-near {
  left: 39.8%;
  top: 25.5%;
}

.still-label-mid {
  left: 66.8%;
  top: 50.2%;
}

.still-label-far {
  right: 3.5%;
  top: 75%;
}

.still-card-focus {
  left: 55.2%;
  top: 18.8%;
  width: 64px;
  height: 64px;
}

.still-label-card {
  left: 51.2%;
  top: 9.2%;
}

.still-label-walk {
  left: 39.8%;
  bottom: 22.2%;
}

.still-seated-card-focus {
  left: 58.6%;
  top: 28.2%;
  width: 70px;
  height: 70px;
}

.still-label-seated-card {
  left: 52.8%;
  top: 16.6%;
}

.still-standing-card-focus {
  left: 57.6%;
  top: 20.4%;
  width: 70px;
  height: 70px;
}

.still-label-standing-card {
  left: 52.4%;
  top: 9.6%;
}

.still-label-support {
  left: 11.2%;
  top: 59.5%;
}

.still-semi-card-focus {
  left: 53.6%;
  top: 19.8%;
  width: 66px;
  height: 66px;
}

.still-label-semi-card {
  left: 48.4%;
  top: 9.8%;
}

.still-foot-guide {
  position: absolute;
  width: 46px;
  height: 76px;
  border: 4px solid rgba(4, 124, 130, 0.76);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 10px rgba(4, 124, 130, 0.1);
}

.still-front-foot {
  left: 49.5%;
  bottom: 6.3%;
  transform: rotate(-10deg);
}

.still-back-foot {
  left: 43.6%;
  bottom: 12.2%;
  transform: rotate(7deg);
}

.still-label-semi-feet {
  left: 36%;
  bottom: 20%;
}

.still-label-semi-support {
  left: 73.5%;
  top: 50.5%;
}

.still-sit-card-focus {
  left: 58.5%;
  top: 19.8%;
  width: 68px;
  height: 68px;
}

.still-label-sit-card {
  left: 52.8%;
  top: 9.6%;
}

.still-label-sit-chair {
  left: 22.4%;
  bottom: 27.8%;
}

.still-near-card-focus {
  left: 57.2%;
  top: 31.4%;
  width: 72px;
  height: 72px;
}

.still-far-card-focus {
  left: 22.8%;
  top: 22.4%;
  width: 46px;
  height: 46px;
}

.still-label-near-card {
  left: 52.4%;
  top: 19.2%;
}

.still-label-far-card {
  left: 19.7%;
  top: 11.2%;
}

.still-walking-gaze-line {
  left: 48.5%;
  top: 19.7%;
  width: 8.5%;
  transform: rotate(-4deg);
}

.still-head-cue {
  position: absolute;
  left: 46.7%;
  top: 13.9%;
  width: 86px;
  height: 44px;
  border-top: 6px dashed rgba(111, 159, 168, 0.72);
  border-radius: 999px 999px 0 0;
  transform: translate(-50%, -50%);
  animation: still-cue-sway 5.8s ease-in-out infinite;
}

.still-head-cue-nod {
  width: 46px;
  height: 86px;
  border-top: 0;
  border-right: 6px dashed rgba(111, 159, 168, 0.72);
  border-radius: 0 999px 999px 0;
}

.still-step-cue {
  position: absolute;
  bottom: 12.8%;
  width: 42px;
  height: 12px;
  border-radius: 999px;
  background: rgba(4, 124, 130, 0.18);
  animation: still-step-pulse 5.8s ease-in-out infinite;
}

.still-step-one {
  left: 43.3%;
}

.still-step-two {
  left: 48.2%;
  animation-delay: 1.2s;
}

.still-walk-path-line {
  position: absolute;
  left: 30%;
  top: 74%;
  width: 34%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(4, 124, 130, 0), rgba(4, 124, 130, 0.32), rgba(4, 124, 130, 0));
  transform: rotate(-6deg);
}

.still-step-outdoor-one {
  left: 38%;
  bottom: 14%;
}

.still-step-outdoor-two {
  left: 47%;
  bottom: 15%;
  animation-delay: 1.2s;
}

.still-label-outdoor-walk {
  left: 54%;
  top: 57%;
}

.demo-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 300px;
}

.demo-svg text,
.demo-svg path,
.demo-svg circle,
.demo-svg rect {
  shape-rendering: geometricPrecision;
}

.demo-person-svg {
  transition: filter 180ms ease;
}

.support-rail text {
  letter-spacing: 0;
}

.demo-caption-panel {
  filter: drop-shadow(0 8px 16px rgba(36, 59, 104, 0.08));
}

.demo-video-label {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(36, 59, 104, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--navy);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
}

.animated-demo .gaze-line {
  animation: dash-flow 5.8s linear infinite, line-pulse 6.4s ease-in-out infinite;
}

.animated-demo .motion-arrow {
  stroke-dasharray: 16 12;
  opacity: 0.68;
  animation: dash-flow 5.8s linear infinite, arrow-breathe 6.4s ease-in-out infinite;
}

.animated-demo .standing-person .demo-head {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: demo-head-turn 6.4s ease-in-out infinite;
}

.animated-demo .breath-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: breath-ring-pulse 7.2s ease-in-out infinite;
}

.animated-demo .breath-ring-two {
  animation-delay: -1.8s;
}

.animated-demo .focus-shift {
  animation-duration: 6.2s, 6.8s;
}

.animated-demo .moving-pencil {
  transform-box: fill-box;
  transform-origin: center;
  animation: near-target-in-out 7.2s ease-in-out infinite;
}

.animated-demo .vertical-target-card {
  animation-name: vertical-target-sweep;
}

.animated-demo .focus-bead {
  transform-box: fill-box;
  transform-origin: center;
  animation: bead-focus 8s ease-in-out infinite;
}

.animated-demo .delay-half {
  animation-delay: -3.2s;
}

.animated-demo .delay-one {
  animation-delay: -2.6s;
}

.animated-demo .delay-two {
  animation-delay: -5.2s;
}

.demo-person {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 130px;
  height: 178px;
  transform: translateX(-50%);
  z-index: 2;
}

.demo-head {
  position: absolute;
  left: 44px;
  top: 0;
  width: 44px;
  height: 50px;
  border-radius: 48% 48% 44% 44%;
  background: #d79d73;
  box-shadow: inset -8px -7px 0 rgba(111, 67, 45, 0.1);
}

.demo-head::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: -5px;
  height: 17px;
  border-radius: 999px 999px 8px 8px;
  background: #3d4652;
}

.demo-eye {
  position: absolute;
  left: 67px;
  top: 23px;
  width: 5px;
  height: 5px;
  z-index: 3;
  border-radius: 50%;
  background: #172027;
  box-shadow: 12px 0 0 #172027;
}

.demo-body {
  position: absolute;
  left: 33px;
  top: 56px;
  width: 66px;
  height: 82px;
  border-radius: 26px 26px 15px 15px;
  background: var(--blue);
}

.demo-arm,
.demo-leg {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: #d79d73;
  transform-origin: top center;
}

.demo-arm {
  top: 68px;
  width: 17px;
  height: 66px;
}

.demo-arm-left {
  left: 27px;
  rotate: 18deg;
}

.demo-arm-right {
  right: 25px;
  rotate: -24deg;
}

.demo-leg {
  top: 132px;
  width: 20px;
  height: 58px;
  background: #344550;
}

.demo-leg-left {
  left: 43px;
  rotate: 9deg;
}

.demo-leg-right {
  right: 41px;
  rotate: -9deg;
}

.demo-wall-target {
  position: absolute;
  left: 28px;
  top: 56px;
  width: 48px;
  height: 48px;
  border: 3px solid var(--teal);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 18px rgba(36, 59, 104, 0.12);
}

.demo-wall-target::after {
  content: "A";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--teal);
  font-size: 1.45rem;
  font-weight: 900;
}

.demo-support {
  position: absolute;
  right: 25px;
  bottom: 48px;
  width: 96px;
  height: 14px;
  border-radius: 999px;
  background: #8ca1ae;
  opacity: 0;
  z-index: 1;
}

.demo-support::before,
.demo-support::after {
  content: "";
  position: absolute;
  top: 12px;
  width: 10px;
  height: 68px;
  border-radius: 999px;
  background: #8ca1ae;
}

.demo-support::before {
  left: 10px;
}

.demo-support::after {
  right: 10px;
}

.demo-pencil {
  position: absolute;
  left: 70px;
  top: 104px;
  width: 88px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #f4d884);
  opacity: 0;
  transform-origin: right center;
  rotate: -8deg;
  z-index: 4;
}

.demo-pencil::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -3px;
  border-right: 10px solid #3d4652;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.demo-arrow {
  position: absolute;
  width: 58px;
  height: 34px;
  border: 4px solid var(--violet);
  border-bottom: 0;
  border-radius: 60px 60px 0 0;
  opacity: 0.9;
}

.demo-arrow::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: -4px;
  border-left: 10px solid var(--violet);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.demo-arrow-one {
  left: calc(50% - 72px);
  top: 28px;
}

.demo-arrow-two {
  left: calc(50% + 14px);
  top: 28px;
  scale: -1 1;
}

.demo-vertical .demo-arrow {
  width: 30px;
  height: 62px;
  border: 4px solid var(--violet);
  border-right: 0;
  border-radius: 999px 0 0 999px;
}

.demo-vertical .demo-arrow::after {
  right: auto;
  left: -7px;
  bottom: -8px;
  border-top: 10px solid var(--violet);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 0;
}

.demo-vertical .demo-arrow-one {
  left: calc(50% - 78px);
  top: 34px;
}

.demo-vertical .demo-arrow-two {
  left: calc(50% + 48px);
  top: 52px;
  scale: 1 -1;
}

.demo-balance .demo-person {
  left: 42%;
}

.demo-balance .demo-support {
  opacity: 1;
}

.demo-balance .demo-arm-right {
  right: 5px;
  height: 74px;
  rotate: -72deg;
}

.demo-balance .demo-wall-target,
.demo-convergence .demo-wall-target {
  opacity: 0;
}

.demo-convergence .demo-person {
  left: 62%;
}

.demo-convergence .demo-pencil {
  opacity: 1;
}

.demo-convergence .demo-arm-left {
  left: 9px;
  height: 82px;
  rotate: 72deg;
}

.demo-convergence .demo-arm-right {
  right: 9px;
  height: 82px;
  rotate: -72deg;
}

.demo-convergence .demo-arrow {
  width: 44px;
  height: 26px;
  top: 90px;
  border-color: var(--teal);
}

.demo-convergence .demo-arrow::after {
  border-left-color: var(--teal);
}

.demo-convergence .demo-arrow-one {
  left: 82px;
}

.demo-convergence .demo-arrow-two {
  left: 148px;
}

.demo-remembered .demo-head {
  rotate: -12deg;
}

.therapy-detail h3 {
  margin-top: 8px;
}

.therapy-detail p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

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

.therapy-meta div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.therapy-meta .therapy-timer-card {
  display: grid;
  gap: 8px;
  border-color: rgba(8, 127, 131, 0.34);
  background: var(--teal-soft);
  box-shadow: 0 8px 20px rgba(8, 127, 131, 0.08);
}

.therapy-meta span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
}

#therapyClock {
  display: block;
  margin-top: 2px;
  color: var(--teal);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1;
  letter-spacing: 0;
}

.timer-button {
  min-height: 38px;
  padding: 7px 12px;
}

.therapy-detail ol,
.therapy-detail ul {
  margin: 0;
  padding-left: 22px;
  color: #344550;
  line-height: 1.48;
}

.therapy-detail li + li {
  margin-top: 5px;
}

.therapy-detail h4 {
  margin: 0;
}

.therapy-steps-card,
.therapy-extra-guidance,
.therapy-seated-option {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px;
}

.therapy-steps-card {
  border-left: 4px solid var(--teal);
}

.therapy-steps-card strong,
.therapy-extra-guidance strong,
.therapy-seated-option strong {
  display: block;
  margin-bottom: 8px;
  color: var(--navy);
}

.therapy-extra-guidance > summary,
.therapy-seated-option > summary {
  cursor: pointer;
  list-style: none;
  color: var(--navy);
  font-weight: 900;
}

.therapy-extra-guidance > summary::-webkit-details-marker,
.therapy-seated-option > summary::-webkit-details-marker {
  display: none;
}

.therapy-extra-guidance > summary::after,
.therapy-seated-option > summary::after {
  content: "+";
  float: right;
  color: var(--teal);
}

.therapy-extra-guidance[open] > summary,
.therapy-seated-option[open] > summary {
  margin-bottom: 12px;
}

.therapy-extra-guidance[open] > summary::after,
.therapy-seated-option[open] > summary::after {
  content: "-";
}

.therapy-extra-guidance div + div {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.therapy-extra-guidance p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.therapy-seated-option {
  border-left: 4px solid var(--blue);
  background: #f7fbff;
}

.therapy-seated-option p {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.4;
}

.therapy-stop {
  border-left: 4px solid var(--gold);
  border-radius: 7px;
  background: #fff7e8;
  padding: 12px;
}

.therapy-stop p {
  color: #67430f;
}

.patient-rating {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px;
}

.patient-rating > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.patient-rating label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
}

.patient-rating input {
  width: auto;
  margin-right: 7px;
}

.therapy-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr);
  gap: 10px;
}

.therapy-actions button {
  min-height: 48px;
}

.domain {
  width: fit-content;
  border-radius: 999px;
  color: #fff;
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 900;
}

.domain.memory { background: var(--teal); }
.domain.focus { background: var(--blue); }
.domain.speed { background: var(--violet); }
.domain.pattern { background: var(--green); }
.domain.scan { background: #087f83; }
.domain.recall { background: #1f6feb; }
.domain.inhibit { background: #8b4a7f; }
.domain.dual { background: #385f9f; }
.domain.trail { background: #6b7f32; }
.domain.alphatrail { background: #087f83; }
.domain.stream { background: #0e7c7b; }
.domain.flex { background: #9a6225; }
.domain.motion { background: #315f88; }
.domain.order { background: #4a8b57; }
.domain.pulse { background: #087f83; }
.domain.split { background: #5276cd; }
.domain.orbit { background: #0f766e; }
.domain.map { background: #4a8b57; }
.domain.back { background: #0e7c7b; }
.domain.cancel { background: #315f88; }
.domain.compare { background: #087f83; }
.domain.direction { background: #9a6225; }
.domain.pairs { background: #4a8b57; }
.domain.gridspan { background: #5276cd; }
.domain.stroop { background: #087f83; }
.domain.twoback { background: #4f6f52; }
.domain.peripheral { background: #5278d4; }
.domain.symbolcode { background: #b88a2a; }
.domain.rotate { background: #315f88; }
.domain.rhythm { background: #8a5d78; }
.domain.contrast { background: #60717b; }
.domain.ladder { background: #2d6c5b; }
.domain.resonance { background: #0d6b74; }
.domain.sweep { background: #315f88; }
.domain.names { background: #4a8b57; }
.domain.routeplan { background: #2d6c5b; }
.domain.detail { background: #8a5d78; }
.domain.category { background: #087f83; }

.training-stage,
.progress-panel,
.final-panel {
  padding: 18px;
}

.stage-header {
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.stage-header p:last-child {
  margin: 6px 0 0;
  color: var(--muted);
}

.round-stats {
  gap: 8px;
}

.round-stats div {
  min-width: 86px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.round-stats span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
}

.round-stats strong {
  font-size: 1.3rem;
}

.cognitive-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #dce5eb;
  border-radius: 8px;
  background: #fbfdfe;
}

.demo-copy {
  display: grid;
  gap: 5px;
}

.demo-copy span {
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.demo-copy strong {
  color: var(--navy);
  line-height: 1.35;
}

.demo-step-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

.demo-step-row b {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--teal);
  padding: 5px 9px;
  font-size: 0.75rem;
  font-weight: 900;
}

.mini-memory-demo,
.mini-focus-demo,
.mini-speed-demo,
.mini-pattern-demo,
.mini-scan-demo,
.mini-recall-demo,
.mini-inhibit-demo,
.mini-dual-demo,
.mini-trail-demo,
.mini-alpha-demo,
.mini-stream-demo,
.mini-flex-demo,
.mini-motion-demo,
.mini-order-demo,
.mini-pulse-demo,
.mini-split-demo,
.mini-orbit-demo,
.mini-map-demo,
.mini-back-demo,
.mini-cancel-demo,
.mini-compare-demo,
.mini-direction-demo,
.mini-pairs-demo,
.mini-gridspan-demo {
  position: relative;
  min-height: 150px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #eef6f7, #f7fafc);
}

.mini-memory-demo {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  justify-content: center;
  align-content: center;
  gap: 8px;
}

.mini-tile {
  width: 52px;
  height: 42px;
  border-radius: 8px;
  box-shadow: inset 0 -5px 0 rgba(36, 59, 104, 0.1);
}

.mini-memory-demo .mini-tile:nth-child(2) {
  animation: demo-tile-light 7.2s ease-in-out infinite;
}

.mini-memory-demo .mini-tile:nth-child(5) {
  animation: demo-tile-light 7.2s ease-in-out infinite 1.05s;
}

.mini-memory-demo .mini-tile:nth-child(8) {
  animation: demo-tile-light 7.2s ease-in-out infinite 2.1s;
}

.demo-pointer {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 3px solid var(--navy);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 14px rgba(36, 59, 104, 0.18);
}

.memory-pointer {
  left: calc(50% - 9px);
  top: 50%;
  animation: memory-pointer-path 7.2s ease-in-out infinite;
}

.mini-focus-demo {
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: center;
  padding: 16px;
}

.demo-target-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(36, 59, 104, 0.08);
}

.mini-shape-grid {
  display: grid;
  grid-template-columns: repeat(4, 44px);
  gap: 12px;
}

.mini-shape {
  display: inline-block;
  width: 36px;
  height: 36px;
  box-shadow: 0 7px 12px rgba(36, 59, 104, 0.12);
}

.mini-shape.correct {
  animation: target-ring 6.4s ease-in-out infinite;
}

.focus-pointer {
  left: 55%;
  top: 64%;
  animation: focus-pointer-tap 6.4s ease-in-out infinite;
}

.scan-pointer {
  left: 58%;
  top: 56%;
  animation: focus-pointer-tap 6.4s ease-in-out infinite;
}

.inhibit-pointer {
  left: 36%;
  top: 58%;
  animation: focus-pointer-tap 6.4s ease-in-out infinite;
}

.mini-speed-demo {
  display: grid;
  grid-template-columns: 1fr 96px 1fr;
  gap: 10px;
  align-items: center;
  padding: 18px;
}

.mini-speed-demo em {
  grid-column: 1 / -1;
  justify-self: center;
  color: var(--muted);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 800;
}

.mini-sort-zone {
  display: grid;
  place-items: center;
  min-height: 76px;
  border-radius: 8px;
  background: #e8eef6;
  color: var(--navy);
  font-weight: 900;
}

.mini-sort-card {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 12px 22px rgba(36, 59, 104, 0.14);
  animation: demo-sort-left 6.6s ease-in-out infinite;
}

.mini-sort-card b {
  text-transform: capitalize;
}

.mini-pattern-demo {
  display: grid;
  gap: 12px;
  place-items: center;
  padding: 16px;
}

.mini-pattern-demo em {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 850;
}

.mini-pattern-strip {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mini-pattern-dot,
.mini-pattern-answer,
.mini-pattern-choice {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--navy);
  font-weight: 900;
  box-shadow: 0 8px 14px rgba(36, 59, 104, 0.12);
}

.mini-pattern-answer {
  position: absolute;
  right: 18px;
  bottom: 18px;
  animation: demo-pattern-fill 7s ease-in-out infinite;
}

.mini-pattern-choices {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.mini-pattern-choices::before {
  content: "Choose";
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.mini-pattern-choice {
  width: 34px;
  height: 34px;
  box-shadow: none;
}

.mini-scan-demo,
.mini-recall-demo,
.mini-inhibit-demo,
.mini-dual-demo,
.mini-trail-demo,
.mini-alpha-demo,
.mini-stream-demo,
.mini-flex-demo,
.mini-motion-demo,
.mini-order-demo,
.mini-pulse-demo,
.mini-split-demo,
.mini-orbit-demo,
.mini-map-demo,
.mini-back-demo,
.mini-cancel-demo,
.mini-compare-demo,
.mini-direction-demo,
.mini-pairs-demo,
.mini-gridspan-demo {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 14px;
}

.mini-dual-demo {
  position: relative;
}

.mini-dual-center {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 3px solid var(--teal);
  border-radius: 50%;
  background: #fff;
  color: var(--teal);
  font-weight: 950;
}

.mini-dual-flash {
  position: absolute;
  right: 36px;
  top: 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 8px rgba(214, 150, 22, 0.18);
  animation: dual-flash-demo 5.8s ease-in-out infinite;
}

.dual-pointer {
  animation: dual-pointer-demo 5.8s ease-in-out infinite;
}

.mini-trail-demo,
.mini-motion-demo {
  position: relative;
}

.mini-trail-demo span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--teal);
  border-radius: 50%;
  background: #fff;
  color: var(--teal);
  font-weight: 950;
}

.mini-alpha-demo {
  grid-template-columns: repeat(5, auto);
}

.mini-alpha-demo span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(8, 127, 131, 0.36);
  border-radius: 50%;
  background: #fff;
  color: var(--teal);
  font-weight: 950;
}

.mini-alpha-demo span:nth-child(even) {
  border-radius: 8px;
  border-color: rgba(214, 150, 22, 0.45);
  color: #8a681f;
}

.trail-pointer {
  animation: trail-pointer-demo 6.2s ease-in-out infinite;
}

.mini-stream-demo,
.mini-flex-demo {
  align-content: center;
}

.mini-stream-card {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 3px solid var(--teal);
  border-radius: 8px;
  background: #fff;
  color: var(--teal);
  font-size: 2rem;
  font-weight: 950;
}

.mini-stream-demo b,
.mini-flex-demo strong,
.mini-motion-demo b,
.mini-orbit-demo b {
  color: var(--navy);
}

.mini-stream-demo div,
.mini-flex-demo div {
  display: flex;
  gap: 8px;
}

.mini-stream-row {
  align-items: center;
}

.mini-stream-demo em {
  border-radius: 999px;
  background: #fff;
  color: var(--teal);
  padding: 6px 10px;
  font-style: normal;
  font-weight: 900;
}

.mini-motion-demo span {
  display: none;
}

.mini-motion-demo .mini-motion-start,
.mini-motion-demo .mini-motion-path,
.mini-motion-demo .mini-motion-dot {
  display: block;
  position: absolute;
}

.mini-motion-demo .mini-motion-start {
  width: 34px;
  height: 34px;
  border: 2px dashed rgba(8, 127, 131, 0.28);
  border-radius: 50%;
  background: #fff;
  animation: none;
}

.mini-motion-demo .mini-motion-path {
  width: 118px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(8, 127, 131, 0.12), rgba(8, 127, 131, 0.46));
  animation: none;
}

.mini-motion-demo .mini-motion-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 10px rgba(8, 127, 131, 0.12);
  animation: motion-demo-slide 5.8s ease-in-out infinite;
}

.mini-scan-demo em {
  color: var(--navy);
  font-style: normal;
  font-weight: 900;
}

.mini-letter-grid {
  display: grid;
  grid-template-columns: repeat(4, 34px);
  gap: 7px;
}

.mini-letter-grid span,
.mini-recall-demo span,
.mini-inhibit-demo span {
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--navy);
  font-weight: 900;
}

.correct-letter {
  border-color: rgba(8, 127, 131, 0.32) !important;
  background: var(--teal-soft) !important;
  color: var(--teal) !important;
}

.mini-recall-demo strong {
  color: var(--navy);
  font-size: 2rem;
  letter-spacing: 0.08em;
}

.mini-recall-demo div,
.mini-inhibit-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.mini-inhibit-demo span:first-child {
  background: var(--teal);
  color: #fff;
}

.mini-inhibit-demo span:nth-child(2) {
  background: #9d3f5f;
  color: #fff;
}

.mini-order-demo {
  align-content: center;
}

.mini-pulse-track {
  position: relative;
  width: min(260px, 90%);
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8eef4 0 38%, rgba(8, 127, 131, 0.32) 38% 62%, #e8eef4 62% 100%);
}

.mini-pulse-track i,
.mini-pulse-track b {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  border-radius: 50%;
}

.mini-pulse-track i {
  left: 46%;
  width: 30px;
  height: 30px;
  border: 3px solid var(--teal);
  background: #fff;
}

.mini-pulse-track b {
  left: 0;
  width: 22px;
  height: 22px;
  background: var(--gold);
  animation: mini-pulse-run 4.8s ease-in-out infinite;
}

.mini-pulse-demo em,
.mini-map-demo em {
  color: var(--muted);
  font-style: normal;
  font-weight: 850;
}

.mini-split-demo {
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
}

.mini-split-demo div {
  display: grid;
  place-items: center;
  gap: 6px;
  min-width: 70px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.mini-split-demo strong {
  color: var(--navy);
  font-size: 0.82rem;
  text-align: center;
}

.mini-orbit-demo .orbit-ring {
  position: absolute;
  width: 92px;
  height: 92px;
  border: 2px solid rgba(8, 127, 131, 0.2);
  border-radius: 50%;
}

.orbit-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #5276cd;
}

.orbit-dot:nth-of-type(1) {
  background: var(--gold);
  animation: mini-orbit-one 5.5s ease-in-out infinite;
}

.orbit-dot:nth-of-type(2) {
  display: none;
}

.orbit-dot:nth-of-type(3) {
  display: none;
}

.mini-orbit-label {
  position: absolute;
  color: var(--teal);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.mini-orbit-label.top {
  top: 20px;
}

.mini-orbit-label.right {
  right: 20px;
}

.mini-orbit-label.bottom {
  bottom: 20px;
}

.mini-orbit-label.left {
  left: 20px;
}

.mini-map-path {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mini-map-path span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(8, 127, 131, 0.34);
  border-radius: 50%;
  background: #fff;
  color: var(--teal);
  font-weight: 950;
}

.mini-back-demo,
.mini-compare-demo {
  grid-template-columns: auto auto;
  align-content: center;
}

.mini-back-demo strong,
.mini-compare-demo strong,
.mini-cancel-demo b,
.mini-direction-demo b,
.mini-direction-demo strong,
.mini-pairs-demo b {
  color: var(--navy);
}

.mini-cancel-demo div,
.mini-pairs-demo div {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mini-pairs-demo span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  padding: 6px 10px;
  font-weight: 900;
}

.mini-direction-demo span {
  color: var(--teal);
  font-size: 3rem;
  font-weight: 950;
}

.mini-gridspan-demo {
  grid-template-columns: repeat(3, 38px);
  align-content: center;
}

.mini-gridspan-demo span {
  width: 38px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.mini-gridspan-demo span.correct {
  background: #fff4a8;
  outline: 4px solid rgba(8, 127, 131, 0.18);
}

.correct-choice {
  color: #fff;
  outline: 4px solid rgba(4, 124, 130, 0.16);
}

.game-board {
  min-height: 390px;
  border: 1px solid #dce5eb;
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.84)),
    repeating-linear-gradient(45deg, #edf3f8 0 12px, #f7fafc 12px 24px);
}

.waiting-board,
.complete-board {
  display: grid;
  place-items: center;
}

.pulse-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
}

.pulse-orbit span {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  animation: orbit 5s linear infinite;
}

.pulse-orbit span:nth-child(1) {
  width: 26px;
  height: 26px;
  background: var(--violet);
  transform-origin: 68px 68px;
}

.pulse-orbit span:nth-child(2) {
  width: 18px;
  height: 18px;
  background: var(--gold);
  animation-duration: 6.5s;
  transform-origin: -58px 65px;
}

.pulse-orbit span:nth-child(3) {
  width: 22px;
  height: 22px;
  background: var(--teal);
  animation-duration: 7.5s;
  transform-origin: 52px -60px;
}

.pulse-orbit strong {
  position: relative;
  z-index: 1;
  min-width: 92px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 10px;
  color: var(--navy);
  font-size: 1.15rem;
  text-align: center;
}

body .pulse-orbit span {
  animation: orbit 8s linear infinite !important;
}

body .pulse-orbit span:nth-child(2) {
  animation-duration: 9.5s !important;
}

body .pulse-orbit span:nth-child(3) {
  animation-duration: 10.5s !important;
}

body .motion-wave-field .primary-wave {
  animation: wave-flow-left var(--motion-pace, 3s) ease-in-out infinite !important;
}

body .motion-right .motion-wave-field .primary-wave {
  animation-name: wave-flow-right !important;
}

body .motion-up .motion-wave-field .primary-wave {
  animation-name: wave-flow-up !important;
}

body .motion-down .motion-wave-field .primary-wave {
  animation-name: wave-flow-down !important;
}

body .motion-wave-field .noise-left { animation: wave-flow-left var(--motion-pace, 3.4s) ease-in-out infinite !important; }
body .motion-wave-field .noise-right { animation: wave-flow-right var(--motion-pace, 3.4s) ease-in-out infinite !important; }
body .motion-wave-field .noise-up { animation: wave-flow-up var(--motion-pace, 3.4s) ease-in-out infinite !important; }
body .motion-wave-field .noise-down { animation: wave-flow-down var(--motion-pace, 3.4s) ease-in-out infinite !important; }

@keyframes orbit {
  to { rotate: 360deg; }
}

@keyframes demo-tile-light {
  0%, 15%, 100% {
    filter: brightness(1);
    box-shadow: inset 0 -5px 0 rgba(36, 59, 104, 0.1);
  }
  6%, 10% {
    filter: brightness(1.12) saturate(1.1);
    box-shadow: 0 0 0 5px rgba(4, 124, 130, 0.13), inset 0 -5px 0 rgba(36, 59, 104, 0.12);
  }
}

@keyframes memory-pointer-path {
  0%, 48% {
    opacity: 0;
    translate: -8px -62px;
  }
  54%, 60% {
    opacity: 1;
    translate: -8px -62px;
  }
  68%, 74% {
    opacity: 1;
    translate: -8px -8px;
  }
  82%, 88% {
    opacity: 1;
    translate: -8px 46px;
  }
  100% {
    opacity: 0;
    translate: -8px 46px;
  }
}

@keyframes target-ring {
  0%, 100% {
    box-shadow: 0 7px 12px rgba(36, 59, 104, 0.12);
    scale: 1;
  }
  46%, 64% {
    box-shadow: 0 0 0 6px rgba(4, 124, 130, 0.14), 0 7px 12px rgba(36, 59, 104, 0.12);
    scale: 1.04;
  }
}

@keyframes focus-pointer-tap {
  0%, 35%, 100% {
    opacity: 0;
    translate: 34px 14px;
  }
  48%, 68% {
    opacity: 1;
    translate: 0 0;
  }
  58% {
    scale: 0.78;
  }
}

@keyframes soft-drift-a {
  0%, 100% { translate: 0 0; }
  50% { translate: 4px -3px; }
}

@keyframes soft-drift-b {
  0%, 100% { translate: 0 0; }
  50% { translate: -3px 4px; }
}

@keyframes soft-drift-c {
  0%, 100% { translate: 0 0; }
  50% { translate: 3px 4px; }
}

@keyframes soft-drift-d {
  0%, 100% { translate: 0 0; }
  50% { translate: -4px -2px; }
}

@keyframes route-card-enter {
  from {
    opacity: 0;
    translate: 0 12px;
    scale: 0.96;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes dual-flash-demo {
  0%, 35%, 100% {
    opacity: 0;
    scale: 0.7;
  }
  44%, 62% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes dual-pointer-demo {
  0%, 50%, 100% {
    opacity: 0;
    translate: 32px 24px;
  }
  64%, 80% {
    opacity: 1;
    translate: 72px -52px;
  }
  72% {
    scale: 0.8;
  }
}

@keyframes trail-pointer-demo {
  0%, 100% {
    opacity: 0;
    translate: -104px 48px;
  }
  22%, 34% {
    opacity: 1;
    translate: -104px 48px;
  }
  50%, 62% {
    opacity: 1;
    translate: 0 -48px;
  }
  78%, 90% {
    opacity: 1;
    translate: 102px 48px;
  }
}

@keyframes motion-demo-slide {
  0%, 28%, 100% {
    translate: -60px 0;
  }
  58%, 78% {
    translate: 60px 0;
  }
}

@keyframes wave-flow-left {
  0% { opacity: 0.18; transform: translateX(92px) scale(0.9); }
  38% { opacity: 0.95; transform: translateX(8px) scale(1.04); }
  100% { opacity: 0.18; transform: translateX(-118px) scale(0.9); }
}

@keyframes wave-flow-right {
  0% { opacity: 0.18; transform: translateX(-118px) scale(0.9); }
  38% { opacity: 0.95; transform: translateX(-8px) scale(1.04); }
  100% { opacity: 0.18; transform: translateX(92px) scale(0.9); }
}

@keyframes wave-flow-up {
  0% { opacity: 0.18; transform: translateY(92px) scale(0.9); }
  38% { opacity: 0.95; transform: translateY(8px) scale(1.04); }
  100% { opacity: 0.18; transform: translateY(-118px) scale(0.9); }
}

@keyframes wave-flow-down {
  0% { opacity: 0.18; transform: translateY(-118px) scale(0.9); }
  38% { opacity: 0.95; transform: translateY(-8px) scale(1.04); }
  100% { opacity: 0.18; transform: translateY(92px) scale(0.9); }
}

@keyframes demo-sort-left {
  0%, 36%, 100% {
    translate: 0 0;
  }
  58%, 76% {
    translate: -106px 0;
  }
}

@keyframes demo-pattern-fill {
  0%, 40% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  62%, 78% {
    opacity: 1;
    translate: -70px -42px;
    scale: 1.02;
  }
  100% {
    opacity: 0;
    translate: -70px -42px;
    scale: 1.02;
  }
}

@keyframes mini-pulse-run {
  0%, 100% { left: 0; }
  50% { left: calc(100% - 22px); }
}

@keyframes pulse-run {
  0% { left: 0; }
  50% { left: calc(100% - 34px); }
  100% { left: 0; }
}

@keyframes mini-orbit-one {
  0%, 100% { translate: 0 -46px; }
  33% { translate: 46px 0; }
  66% { translate: 0 46px; }
}

@keyframes orbit-marker-clockwise {
  0%, 100% { transform: rotate(0deg) translateY(-104px); }
  35%, 70% { transform: rotate(calc(var(--orbit-steps, 1) * 90deg)) translateY(-104px); }
}

@keyframes orbit-marker-counter {
  0%, 100% { transform: rotate(0deg) translateY(-104px); }
  35%, 70% { transform: rotate(calc(var(--orbit-steps, 1) * -90deg)) translateY(-104px); }
}

@keyframes dash-flow {
  to { stroke-dashoffset: -56; }
}

@keyframes line-pulse {
  0%, 18%, 82%, 100% { opacity: 0.38; }
  42%, 62% { opacity: 0.92; }
}

@keyframes arrow-breathe {
  0%, 18%, 82%, 100% { opacity: 0.38; }
  42%, 62% { opacity: 0.92; }
}

@keyframes demo-head-turn {
  0%, 18%, 82%, 100% { rotate: 0deg; }
  38%, 48% { rotate: -7deg; }
  60%, 70% { rotate: 7deg; }
}

@keyframes breath-ring-pulse {
  0%, 100% {
    opacity: 0.16;
    scale: 0.9;
  }
  45%, 62% {
    opacity: 0.38;
    scale: 1.08;
  }
}

@keyframes near-target-in-out {
  0%, 22%, 100% { translate: 0 0; }
  52%, 70% { translate: 82px -12px; }
}

@keyframes vertical-target-sweep {
  0%, 22%, 100% { translate: 0 0; }
  52%, 70% { translate: 0 96px; }
}

@keyframes bead-focus {
  0%, 78%, 100% {
    opacity: 0.62;
    scale: 0.96;
  }
  26%, 48% {
    opacity: 1;
    scale: 1.12;
  }
}

@keyframes still-focus-pulse {
  0%,
  100% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(0.86);
  }
  35%,
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes still-line-flow {
  0%,
  100% {
    opacity: 0.28;
  }
  45% {
    opacity: 0.82;
  }
}

@keyframes still-cue-sway {
  0%,
  100% {
    opacity: 0.36;
    transform: translate(-50%, -50%) rotate(-5deg);
  }
  50% {
    opacity: 0.78;
    transform: translate(-50%, -50%) rotate(5deg);
  }
}

@keyframes still-step-pulse {
  0%,
  100% {
    opacity: 0.16;
    transform: scaleX(0.8);
  }
  45% {
    opacity: 0.72;
    transform: scaleX(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .animated-demo .gaze-line,
  .animated-demo .motion-arrow,
  .animated-demo .standing-person .demo-head,
  .animated-demo .breath-ring,
  .animated-demo .moving-pencil,
  .animated-demo .focus-bead,
  .still-focus-ring,
  .still-scan-line,
  .still-head-cue,
  .still-step-cue,
  .mini-memory-demo .mini-tile,
  .demo-pointer,
  .mini-shape.correct,
  .mini-sort-card,
  .mini-pattern-answer,
  .focus-field .drift-0,
  .focus-field .drift-1,
  .focus-field .drift-2,
  .focus-field .drift-3,
  .mini-dual-flash,
  .mini-motion-demo span,
  .mini-pulse-track b,
  .orbit-dot:nth-of-type(1),
  .mini-shape.correct,
  .dual-pointer,
  .trail-pointer,
  .route-card,
  .pulse-runner,
  .orbit-marker.tracked,
  .gridspan-cell.lit {
    animation: none;
  }
}

.memory-board {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
}

.memory-cue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 2px solid rgba(8, 127, 131, 0.24);
  border-radius: 8px;
  background: #f1fafa;
  padding: 13px 16px;
  color: var(--muted);
  font-weight: 850;
}

.memory-cue span {
  color: var(--teal);
  font-size: 0.9rem;
  font-weight: 950;
  text-transform: uppercase;
}

.memory-cue strong {
  color: var(--ink);
  font-size: clamp(1.45rem, 3vw, 2.2rem);
}

.memory-cue em {
  font-style: normal;
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 12px;
}

.memory-grid:has(.tile:nth-child(10)) {
  grid-template-columns: repeat(4, minmax(60px, 1fr));
}

.tile,
.shape,
.sort-zone,
.pattern-option {
  border: 0;
  outline: 0;
}

.scan-board,
.recall-board,
.inhibit-board,
.dual-board,
.trail-board,
.stream-board,
.flex-board,
.motion-board,
.order-board,
.pulse-board,
.split-board,
.orbit-board,
.map-board,
.back-board,
.cancel-board,
.compare-board,
.direction-board,
.pairs-board,
.gridspan-board,
.stroop-board,
.twoback-board,
.peripheral-board,
.code-board,
.rotate-board,
.rhythm-board,
.contrast-board,
.ladder-board {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: 24px;
}

.scan-board {
  align-content: start;
  gap: 24px;
}

.scan-target-banner {
  display: grid;
  place-items: center;
  gap: 6px;
  width: min(100%, 360px);
  border: 2px solid rgba(8, 127, 131, 0.28);
  border-radius: 8px;
  background: var(--teal-soft);
  padding: 18px;
}

.scan-target-banner span {
  color: var(--teal);
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
}

.scan-target-banner strong {
  color: var(--teal);
  font-size: clamp(3.6rem, 9vw, 6rem);
  line-height: 0.95;
}

.scan-letter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  gap: 18px;
  width: 100%;
}

.letter-tile,
.recall-option,
.order-option {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-size: 1.35rem;
  font-weight: 900;
  box-shadow: 0 8px 16px rgba(36, 59, 104, 0.08);
}

.recall-option:disabled,
.order-option:disabled {
  cursor: not-allowed;
  opacity: 0.76;
}

.recall-option.is-correct,
.recall-option.is-selected-correct,
.order-option.is-correct,
.order-option.is-selected-correct {
  border-color: rgba(8, 127, 131, 0.72);
  background: #e6f7f4;
  color: var(--teal);
  box-shadow: 0 0 0 6px rgba(8, 127, 131, 0.12), 0 12px 22px rgba(8, 127, 131, 0.12);
}

.recall-option.is-selected-wrong,
.order-option.is-selected-wrong {
  border-color: rgba(169, 50, 50, 0.72);
  background: #fff0f0;
  color: #8f2424;
  box-shadow: 0 0 0 6px rgba(169, 50, 50, 0.1), 0 12px 22px rgba(169, 50, 50, 0.08);
  opacity: 1;
}

.letter-tile.found {
  background: var(--teal-soft);
  color: var(--teal);
}

.recall-number {
  display: grid;
  place-items: center;
  min-width: min(100%, 320px);
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-size: clamp(2.8rem, 7vw, 4.8rem);
  letter-spacing: 0.08em;
  box-shadow: 0 12px 24px rgba(36, 59, 104, 0.1);
}

.recall-options {
  width: min(100%, 760px);
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 22px;
}

.recall-option {
  min-height: 124px;
  padding: 20px 22px;
  border-width: 2px;
  font-size: clamp(2.35rem, 5vw, 3.4rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  box-shadow: 0 14px 26px rgba(36, 59, 104, 0.08);
}

.inhibit-button {
  display: grid;
  place-items: center;
  gap: 8px;
  width: min(100%, 360px);
  min-height: 180px;
  border-radius: 8px;
  background: var(--teal);
  color: #fff;
  box-shadow: 0 16px 30px rgba(8, 127, 131, 0.18);
}

.inhibit-button span {
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 0.95;
}

.inhibit-button small {
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 900;
  text-transform: uppercase;
}

.inhibit-board.stop .inhibit-button {
  background: #9d3f5f;
  box-shadow: 0 16px 30px rgba(157, 63, 95, 0.18);
}

.inhibit-button.is-correct {
  box-shadow: 0 0 0 8px rgba(8, 127, 131, 0.14), 0 16px 30px rgba(8, 127, 131, 0.18);
}

.inhibit-board.stop .inhibit-button.is-correct {
  box-shadow: 0 0 0 8px rgba(8, 127, 131, 0.12), 0 16px 30px rgba(157, 63, 95, 0.18);
}

.inhibit-button.is-wrong {
  background: #8f2424;
  box-shadow: 0 0 0 8px rgba(169, 50, 50, 0.12), 0 16px 30px rgba(169, 50, 50, 0.14);
}

.inhibit-rule {
  display: grid;
  gap: 5px;
  color: var(--muted);
  text-align: center;
}

.inhibit-rule strong {
  color: var(--navy);
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.inhibit-rule span {
  font-weight: 850;
}

.dual-board {
  align-content: center;
}

.dual-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(42px, 8vw, 90px);
  width: min(100%, 720px);
  min-height: 320px;
  padding: clamp(22px, 4vw, 40px);
}

.dual-center {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  gap: 4px;
  width: clamp(116px, 17vw, 170px);
  height: clamp(116px, 17vw, 170px);
  border: 5px solid rgba(8, 127, 131, 0.34);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 18px 36px rgba(36, 59, 104, 0.12);
}

.dual-center span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 950;
  text-transform: uppercase;
}

.dual-center strong {
  color: var(--teal);
  font-size: clamp(3rem, 7vw, 5.4rem);
  line-height: 0.9;
}

.dual-zone {
  min-height: 110px;
  border: 2px solid rgba(36, 59, 104, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.dual-zone:hover {
  border-color: rgba(8, 127, 131, 0.35);
  background: #f1fafa;
}

.dual-flash {
  display: block;
  width: 44px;
  height: 44px;
  margin: auto;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 10px rgba(214, 150, 22, 0.18);
  transition: opacity 240ms ease, scale 240ms ease;
}

.dual-flash.hidden-flash {
  opacity: 0;
  scale: 0.6;
}

.trail-field {
  position: relative;
  width: min(100%, 760px);
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.84)),
    radial-gradient(circle at 20% 30%, rgba(8, 127, 131, 0.08), transparent 24%),
    radial-gradient(circle at 80% 70%, rgba(214, 150, 22, 0.1), transparent 26%);
}

.trail-node {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(52px, 7vw, 70px);
  height: clamp(52px, 7vw, 70px);
  translate: -50% -50%;
  border: 3px solid rgba(8, 127, 131, 0.34);
  border-radius: 50%;
  background: #fff;
  color: var(--teal);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 950;
  box-shadow: 0 12px 22px rgba(36, 59, 104, 0.12);
}

.trail-node.found {
  background: var(--teal);
  color: #fff;
}

.alpha-rule-banner {
  width: min(760px, 100%);
  border: 1px solid rgba(8, 127, 131, 0.24);
  border-radius: 8px;
  background: #eaf7f7;
  color: var(--teal);
  padding: 10px 12px;
  text-align: center;
  font-weight: 950;
}

.alpha-trail-field {
  background:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)),
    radial-gradient(circle at 22% 28%, rgba(8, 127, 131, 0.08), transparent 24%),
    radial-gradient(circle at 78% 70%, rgba(214, 150, 22, 0.1), transparent 26%);
}

.alpha-node.letter-node {
  border-color: rgba(214, 150, 22, 0.48);
  border-radius: 8px;
  color: #8a681f;
}

.alpha-node.found {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

.alpha-node.letter-node.found {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

.alpha-node.wrong-tap {
  border-color: rgba(169, 50, 50, 0.72);
  background: #fff0f0;
  color: #8f2424;
  box-shadow: 0 0 0 8px rgba(169, 50, 50, 0.1), 0 12px 22px rgba(169, 50, 50, 0.08);
}

.stream-board,
.flex-board,
.motion-board {
  align-content: center;
}

.stream-card {
  display: grid;
  place-items: center;
  gap: 14px;
  width: min(100%, 330px);
  min-height: 230px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(36, 59, 104, 0.12);
  animation: route-card-enter 360ms ease-out both;
}

.stream-card strong {
  color: var(--navy);
  font-size: 1.25rem;
}

.stream-sequence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 14px;
  width: min(100%, 760px);
}

.stream-sequence-card {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 132px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(36, 59, 104, 0.08);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.stream-sequence-card > span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 950;
  text-transform: uppercase;
}

.stream-sequence-card .shape {
  width: 56px;
  height: 56px;
}

.stream-sequence-card.is-correct,
.stream-sequence-card.is-selected-correct {
  border-color: rgba(8, 127, 131, 0.72);
  background: #e6f7f4;
  box-shadow: 0 0 0 6px rgba(8, 127, 131, 0.12), 0 12px 22px rgba(8, 127, 131, 0.12);
}

.stream-sequence-card.is-selected-wrong {
  border-color: rgba(169, 50, 50, 0.72);
  background: #fff0f0;
  box-shadow: 0 0 0 6px rgba(169, 50, 50, 0.1), 0 12px 22px rgba(169, 50, 50, 0.08);
}

.stream-actions,
.motion-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 12px;
  width: min(100%, 440px);
}

.stream-choice,
.motion-choice {
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 950;
  text-transform: capitalize;
}

.stream-choice:hover,
.motion-choice:hover {
  border-color: rgba(8, 127, 131, 0.4);
  background: #f1fafa;
}

.stream-choice:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.stream-choice.is-correct,
.stream-choice.is-selected-correct {
  border-color: rgba(8, 127, 131, 0.72);
  background: #e6f7f4;
  color: var(--teal);
  box-shadow: 0 0 0 6px rgba(8, 127, 131, 0.12), 0 12px 22px rgba(8, 127, 131, 0.12);
  opacity: 1;
}

.stream-choice.is-selected-wrong {
  border-color: rgba(169, 50, 50, 0.72);
  background: #fff0f0;
  color: #8f2424;
  box-shadow: 0 0 0 6px rgba(169, 50, 50, 0.1), 0 12px 22px rgba(169, 50, 50, 0.08);
  opacity: 1;
}

.motion-choice:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.motion-choice.is-correct,
.motion-choice.is-selected-correct {
  border-color: rgba(8, 127, 131, 0.72);
  background: #e6f7f4;
  color: var(--teal);
  box-shadow: 0 0 0 6px rgba(8, 127, 131, 0.12), 0 12px 22px rgba(8, 127, 131, 0.12);
  opacity: 1;
}

.motion-choice.is-selected-wrong {
  border-color: rgba(169, 50, 50, 0.72);
  background: #fff0f0;
  color: #8f2424;
  box-shadow: 0 0 0 6px rgba(169, 50, 50, 0.1), 0 12px 22px rgba(169, 50, 50, 0.08);
  opacity: 1;
}

.flex-cue,
.flex-target {
  display: grid;
  place-items: center;
  gap: 8px;
}

.flex-cue span,
.flex-target span {
  color: var(--teal);
  font-size: 0.8rem;
  font-weight: 950;
  text-transform: uppercase;
}

.flex-cue strong {
  border-radius: 999px;
  background: #f1fafa;
  color: var(--teal);
  padding: 10px 16px;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.flex-target {
  width: min(100%, 240px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 20px;
}

.flex-options button.shape {
  width: clamp(72px, 10vw, 96px);
  height: clamp(72px, 10vw, 96px);
}

.motion-stage {
  position: relative;
  width: min(100%, 620px);
  min-height: 280px;
  border: 2px solid rgba(8, 127, 131, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
    radial-gradient(circle at 50% 50%, rgba(8, 127, 131, 0.1), transparent 36%);
  overflow: hidden;
}

.motion-wave-field {
  position: absolute;
  inset: 22px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.45), transparent 24%, transparent 76%, rgba(255, 255, 255, 0.45)),
    #f8fbfb;
}

.motion-field {
  position: absolute;
  inset: 22px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(8, 127, 131, 0.12), transparent 18%),
    #f8fbfb;
}

.motion-home {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  translate: -50% -50%;
  border: 2px dashed rgba(8, 127, 131, 0.26);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.motion-signal,
.motion-distractor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 12px rgba(8, 127, 131, 0.12), 0 16px 24px rgba(36, 59, 104, 0.1);
  transition: opacity 180ms ease;
}

.motion-distractor {
  width: 34px;
  height: 34px;
  background: var(--gold);
  box-shadow: 0 0 0 8px rgba(214, 150, 22, 0.1);
  opacity: 0.26;
}

.motion-signal.is-hidden,
.motion-distractor.is-hidden,
.motion-trace.is-hidden {
  opacity: 0 !important;
}

.motion-trace {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(8, 127, 131, 0.08), rgba(8, 127, 131, 0.46));
  opacity: 0;
  transition: opacity 220ms ease;
}

.motion-trace.trace-left,
.motion-trace.trace-right {
  width: min(42%, 250px);
  height: 8px;
  opacity: 1;
}

.motion-trace.trace-up,
.motion-trace.trace-down {
  width: 8px;
  height: min(56%, 190px);
  opacity: 1;
}

.motion-trace.trace-left {
  translate: -100% -50%;
}

.motion-trace.trace-right {
  translate: 0 -50%;
}

.motion-trace.trace-up {
  translate: -50% -100%;
  background: linear-gradient(180deg, rgba(8, 127, 131, 0.46), rgba(8, 127, 131, 0.08));
}

.motion-trace.trace-down {
  translate: -50% 0;
  background: linear-gradient(180deg, rgba(8, 127, 131, 0.08), rgba(8, 127, 131, 0.46));
}

.motion-wave-field span {
  position: absolute;
  width: 92px;
  height: 210px;
  border-radius: 50%;
  border: 10px solid rgba(8, 127, 131, 0.5);
  border-left-color: rgba(214, 150, 22, 0.68);
  border-right-color: rgba(49, 95, 136, 0.58);
  background: transparent;
  filter: drop-shadow(0 10px 18px rgba(36, 59, 104, 0.08));
  animation: wave-flow-left var(--motion-pace, 2.2s) ease-in-out infinite;
}

.motion-right .motion-wave-field .primary-wave { animation-name: wave-flow-right; }
.motion-up .motion-wave-field .primary-wave,
.motion-down .motion-wave-field .primary-wave {
  width: 210px;
  height: 92px;
  border-left-color: rgba(8, 127, 131, 0.5);
  border-right-color: rgba(8, 127, 131, 0.5);
  border-top-color: rgba(214, 150, 22, 0.68);
  border-bottom-color: rgba(49, 95, 136, 0.58);
}
.motion-up .motion-wave-field .primary-wave { animation-name: wave-flow-up; }
.motion-down .motion-wave-field .primary-wave { animation-name: wave-flow-down; }

.motion-wave-field .noise-wave {
  width: 72px;
  height: 150px;
  border-width: 8px;
  border-color: rgba(91, 120, 174, 0.16);
  filter: none;
  opacity: 0.34;
}

.motion-wave-field .noise-left { animation-name: wave-flow-left; }
.motion-wave-field .noise-right { animation-name: wave-flow-right; }
.motion-wave-field .noise-up,
.motion-wave-field .noise-down {
  width: 150px;
  height: 72px;
}
.motion-wave-field .noise-up { animation-name: wave-flow-up; }
.motion-wave-field .noise-down { animation-name: wave-flow-down; }

.subtle-motion .motion-wave-field .primary-wave {
  border-color: rgba(8, 127, 131, 0.34);
  border-left-color: rgba(214, 150, 22, 0.42);
  border-right-color: rgba(49, 95, 136, 0.38);
  opacity: 0.72;
}

.subtle-motion.motion-up .motion-wave-field .primary-wave,
.subtle-motion.motion-down .motion-wave-field .primary-wave {
  border-left-color: rgba(8, 127, 131, 0.34);
  border-right-color: rgba(8, 127, 131, 0.34);
  border-top-color: rgba(214, 150, 22, 0.42);
  border-bottom-color: rgba(49, 95, 136, 0.38);
}

.motion-center-cue {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  min-width: 160px;
  min-height: 58px;
  border: 1px solid rgba(8, 127, 131, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--navy);
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(36, 59, 104, 0.1);
}

.order-sequence {
  display: grid;
  gap: 10px;
  width: min(100%, 520px);
}

.order-prompt {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

.order-prompt span {
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.order-prompt strong {
  color: var(--navy);
  font-size: 1.35rem;
}

.order-sequence span,
.mini-order-demo span,
.mini-order-demo b {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  color: var(--navy);
  font-weight: 900;
}

.order-sequence .missing-step {
  border: 2px dashed rgba(8, 127, 131, 0.45);
  background: var(--teal-soft);
  color: var(--teal);
  text-align: center;
}

.order-answer-area {
  display: grid;
  gap: 12px;
  width: min(100%, 620px);
}

.order-answer-area > strong {
  color: var(--navy);
  text-align: center;
}

.pulse-stage {
  width: min(100%, 720px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: clamp(26px, 5vw, 44px);
  box-shadow: 0 16px 34px rgba(36, 59, 104, 0.08);
}

.pulse-track {
  position: relative;
  display: block;
  height: 72px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8eef4 0 38%, rgba(8, 127, 131, 0.34) 38% 62%, #e8eef4 62% 100%);
  overflow: hidden;
}

.pulse-track.pulse-success {
  box-shadow: inset 0 0 0 4px rgba(8, 127, 131, 0.22), 0 0 0 8px rgba(8, 127, 131, 0.1);
}

.pulse-track.pulse-miss {
  box-shadow: inset 0 0 0 4px rgba(169, 50, 50, 0.2), 0 0 0 8px rgba(169, 50, 50, 0.08);
}

.pulse-zone {
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  color: var(--muted);
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.pulse-zone.early { left: 20%; }
.pulse-zone.target {
  left: 50%;
  color: var(--teal);
}
.pulse-zone.late { left: 80%; }

.pulse-runner {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 10px rgba(214, 150, 22, 0.16);
  animation: pulse-run var(--pulse-speed, 2200ms) ease-in-out infinite;
}

.pulse-hit-marker {
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}

.pulse-hit-marker.good {
  background: rgba(8, 127, 131, 0.22);
  box-shadow: 0 0 0 12px rgba(8, 127, 131, 0.12);
}

.pulse-hit-marker.miss {
  background: rgba(169, 50, 50, 0.2);
  box-shadow: 0 0 0 12px rgba(169, 50, 50, 0.1);
}

.pulse-actions,
.orbit-options,
.split-answer-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 12px;
  width: min(100%, 520px);
}

.pulse-choice,
.orbit-choice,
.map-choice,
.split-answer,
.split-side {
  min-height: 66px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-weight: 950;
}

.pulse-choice.target {
  background: linear-gradient(135deg, var(--teal), #0a6f73);
  color: #fff;
}

.pulse-choice:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.split-target-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: min(100%, 620px);
  border: 2px solid rgba(8, 127, 131, 0.26);
  border-radius: 8px;
  background: #f1fafa;
  padding: 16px 18px;
}

.split-target-banner span {
  color: var(--teal);
  font-size: 1rem;
  font-weight: 950;
  text-transform: uppercase;
}

.split-target-banner strong {
  color: var(--ink);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
}

.split-field {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: clamp(16px, 4vw, 34px);
  width: min(100%, 760px);
}

.split-field-four {
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 18px;
  width: min(100%, 620px);
}

.split-side {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 230px;
  overflow: hidden;
  box-shadow: 0 16px 28px rgba(36, 59, 104, 0.08);
  transition: background 180ms ease, border-color 180ms ease;
}

.split-field-four .split-side {
  min-height: 165px;
}

.split-side > span {
  position: absolute;
  top: 14px;
  left: 14px;
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  font-weight: 950;
}

.split-side .shape {
  transition: opacity 180ms ease, scale 180ms ease;
}

.split-side.is-recall {
  background: #f8fbfb;
  border-color: rgba(8, 127, 131, 0.2);
}

.split-side.is-recall .shape {
  opacity: 0;
  scale: 0.9;
}

.split-answer-row {
  grid-template-columns: repeat(2, minmax(130px, 1fr));
}

.split-field-four + .split-answer-row {
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  width: min(100%, 760px);
}

.split-answer {
  min-height: 58px;
  background: #fff;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 950;
}

.split-answer:not(:disabled) {
  border-color: rgba(8, 127, 131, 0.4);
  background: #f1fafa;
  color: var(--teal);
}

.split-answer:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.small-distractor {
  position: absolute;
  width: 34px;
  height: 34px;
  opacity: 0.42;
  box-shadow: none;
}

.small-distractor:nth-of-type(2) { left: 18%; top: 24%; }
.small-distractor:nth-of-type(3) { right: 16%; top: 28%; }
.small-distractor:nth-of-type(4) { left: 22%; bottom: 20%; }
.small-distractor:nth-of-type(5) { right: 18%; bottom: 18%; }

.orbit-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 520px);
  aspect-ratio: 1.25;
  min-height: 320px;
}

.orbit-path {
  position: absolute;
  width: min(68%, 280px);
  aspect-ratio: 1;
  border: 3px solid rgba(8, 127, 131, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.64);
}

.orbit-cross {
  position: absolute;
  z-index: 0;
  background: rgba(8, 127, 131, 0.1);
  border-radius: 999px;
}

.orbit-cross.horizontal {
  width: min(68%, 280px);
  height: 3px;
}

.orbit-cross.vertical {
  width: 3px;
  height: min(68%, 280px);
}

.orbit-compass {
  position: absolute;
  z-index: 1;
  color: var(--teal);
  font-size: 0.92rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.orbit-compass.top { top: 18px; left: 50%; translate: -50% 0; }
.orbit-compass.right { right: 52px; top: 50%; translate: 0 -50%; }
.orbit-compass.bottom { bottom: 18px; left: 50%; translate: -50% 0; }
.orbit-compass.left { left: 52px; top: 50%; translate: 0 -50%; }

.orbit-marker {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #5276cd;
}

.orbit-marker.tracked {
  position: absolute;
  z-index: 3;
  background: var(--gold);
  box-shadow: 0 0 0 10px rgba(214, 150, 22, 0.16);
  translate: -50% -50%;
  transition: opacity 0.2s ease;
}

.orbit-marker.tracked.is-hidden {
  opacity: 0;
}

.orbit-stage strong {
  position: relative;
  z-index: 2;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  padding: 10px 14px;
  box-shadow: 0 10px 22px rgba(36, 59, 104, 0.1);
}

.orbit-options {
  grid-template-columns: repeat(4, minmax(100px, 1fr));
}

.orbit-choice:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.map-study {
  display: grid;
  place-items: center;
  gap: 14px;
  width: min(100%, 620px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: clamp(28px, 6vw, 52px);
  box-shadow: 0 16px 34px rgba(36, 59, 104, 0.09);
}

.map-study span {
  color: var(--teal);
  font-size: 0.9rem;
  font-weight: 950;
  text-transform: uppercase;
}

.map-study strong {
  color: var(--navy);
  font-size: clamp(2rem, 5vw, 4rem);
}

.map-options {
  display: grid;
  gap: 12px;
  width: min(100%, 680px);
}

.map-choice {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 14px;
}

.map-choice span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(8, 127, 131, 0.32);
  border-radius: 50%;
  color: var(--teal);
}

.back-rule,
.direction-cue,
.pairs-question {
  display: grid;
  place-items: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}

.back-rule span,
.direction-cue span,
.pairs-study span,
.pairs-question span {
  color: var(--teal);
  font-size: 0.85rem;
  font-weight: 950;
  text-transform: uppercase;
}

.back-rule strong,
.direction-cue strong,
.pairs-question strong {
  border-radius: 999px;
  background: #f1fafa;
  color: var(--teal);
  padding: 10px 16px;
  font-size: clamp(1.25rem, 3vw, 2rem);
}

.pairs-question span {
  border-radius: 999px;
  background: #f1fafa;
  color: var(--teal);
  padding: 10px 16px;
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.1;
  text-transform: none;
}

.back-card,
.pairs-study {
  display: grid;
  place-items: center;
  gap: 14px;
  width: min(100%, 330px);
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 16px 34px rgba(36, 59, 104, 0.1);
}

.back-card.new-card {
  animation: cardAppear 260ms ease-out;
}

.card-number-badge {
  border-radius: 999px;
  background: #edfafa;
  color: var(--teal);
  padding: 7px 12px;
  font-size: 0.85rem;
  font-weight: 950;
  text-transform: uppercase;
}

.back-card b {
  color: var(--navy);
  font-size: 1.2rem;
}

@keyframes cardAppear {
  from {
    opacity: 0.55;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cancel-board {
  align-content: start;
}

.cancel-field {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 16px;
  width: 100%;
}

.cancel-field button.shape {
  transition: opacity 180ms ease, transform 180ms ease;
}

.cancel-field button.cancelled {
  opacity: 0.18;
  transform: scale(0.82);
}

.compare-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: clamp(16px, 4vw, 34px);
  width: min(100%, 520px);
}

.compare-pair div {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 190px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(36, 59, 104, 0.08);
}

.direction-arrow {
  display: grid;
  place-items: center;
  width: min(100%, 300px);
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--teal);
  font-size: clamp(5rem, 14vw, 8rem);
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 16px 34px rgba(36, 59, 104, 0.1);
}

.direction-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(78px, 1fr));
  gap: 10px;
  width: min(100%, 580px);
}

.direction-choice {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-size: 2rem;
  font-weight: 950;
}

.direction-choice span {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.pairs-study strong {
  color: var(--navy);
  font-size: clamp(1.7rem, 4vw, 3.2rem);
}

.gridspan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 12px;
  width: min(100%, 620px);
}

.gridspan-grid:has(.gridspan-cell:nth-child(10)) {
  grid-template-columns: repeat(4, minmax(60px, 1fr));
}

.gridspan-cell {
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-weight: 950;
  box-shadow: 0 10px 20px rgba(36, 59, 104, 0.08);
}

.gridspan-cell:disabled {
  opacity: 1;
}

.gridspan-cell.lit {
  background: #fff4a8;
  outline: 6px solid #172027;
  outline-offset: 4px;
  box-shadow: 0 0 0 13px rgba(8, 127, 131, 0.18);
}

.stroop-target-card {
  display: grid;
  place-items: center;
  gap: 10px;
  min-width: min(100%, 280px);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 42px;
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}

.stroop-target-card span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.stroop-word {
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  font-weight: 950;
  text-align: center;
}

.stroop-ink-blue,
.ink-blue { color: var(--blue); }

.stroop-ink-green,
.ink-green { color: var(--green); }

.stroop-ink-gold,
.ink-gold { color: var(--gold); }

.stroop-ink-rose,
.ink-rose { color: var(--rose); }

.stroop-choice,
.code-choice,
.peripheral-choice,
.rhythm-choice {
  min-width: 118px;
  min-height: 66px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 1.15rem;
  font-weight: 950;
  text-transform: capitalize;
}

.rhythm-choice.active-beat {
  border-color: var(--teal);
  background: #edfafa;
  transform: translateY(-1px);
}

.remember-card {
  min-width: 180px;
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.peripheral-stage {
  position: relative;
  width: min(100%, 680px);
  min-height: 330px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfe;
}

.fixation-cross {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--navy);
  font-size: 4rem;
  font-weight: 950;
}

.peripheral-flash {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 14px rgba(8, 127, 131, 0.12);
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
}

.peripheral-flash.shown {
  opacity: 1;
  transform: scale(1.08);
}

.peripheral-flash.hidden {
  opacity: 0;
  transform: scale(0.92);
}

.peripheral-flash.top-left { left: 12%; top: 14%; }
.peripheral-flash.top-right { right: 12%; top: 14%; }
.peripheral-flash.bottom-left { left: 12%; bottom: 14%; }
.peripheral-flash.bottom-right { right: 12%; bottom: 14%; }

.peripheral-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 760px);
}

.code-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.code-key span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  background: #fff;
}

.code-key .shape {
  width: 34px;
  height: 34px;
}

.code-question,
.ladder-target,
.rotate-stage {
  display: grid;
  place-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 36px;
  background: #fff;
  box-shadow: var(--shadow);
}

.code-question .shape,
.ladder-target .shape {
  width: 92px;
  height: 92px;
}

.symbol-code-option {
  display: inline-grid;
  place-items: center;
  min-width: 96px;
}

.symbol-code-option .shape {
  width: 46px;
  height: 46px;
}

.rotate-stage strong {
  color: var(--teal);
  font-size: clamp(4rem, 10vw, 7rem);
  line-height: 1;
}

.rhythm-cue {
  display: grid;
  place-items: center;
  gap: 6px;
}

.rhythm-cue span {
  color: var(--teal);
  font-size: 0.85rem;
  font-weight: 950;
  text-transform: uppercase;
}

.rhythm-cue strong {
  color: var(--navy);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
}

.rhythm-lights {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 120px;
}

.rhythm-lights span {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(8, 127, 131, 0.16);
  border: 2px solid rgba(8, 127, 131, 0.24);
}

.rhythm-lights span.long {
  width: 104px;
  border-radius: 999px;
}

.rhythm-lights span.lit {
  background: var(--teal);
  box-shadow: 0 0 0 16px rgba(8, 127, 131, 0.12);
}

.rhythm-lights.recall-mode span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f3f7f9;
  border: 2px dashed rgba(92, 105, 115, 0.34);
  box-shadow: none;
}

.rhythm-lights.recall-mode span.answered {
  background: #edfafa;
  border-color: rgba(8, 127, 131, 0.48);
}

.rhythm-actions {
  display: flex;
  gap: 16px;
}

.contrast-field {
  display: grid;
  grid-template-columns: repeat(6, minmax(38px, 62px));
  gap: 18px;
  justify-content: center;
}

.contrast-dot {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 127, 131, var(--dot-opacity));
  box-shadow: none;
}

.contrast-dot.target {
  box-shadow: 0 0 0 8px rgba(8, 127, 131, 0.08);
}

.ladder-rules {
  display: grid;
  gap: 8px;
  max-width: 720px;
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  padding: 16px 18px;
  background: var(--teal-soft);
  color: var(--navy);
  font-weight: 850;
}

.mini-stroop-demo,
.mini-peripheral-demo,
.mini-code-demo,
.mini-rotate-demo,
.mini-rhythm-demo,
.mini-contrast-demo,
.mini-ladder-demo {
  min-height: 170px;
  display: grid;
  place-items: center;
  gap: 12px;
  border-radius: 22px;
  background: #f7fafb;
  padding: 18px;
}

.mini-stroop-demo strong,
.mini-code-demo strong,
.mini-rotate-demo span {
  font-size: 2.8rem;
}

.mini-peripheral-demo {
  position: relative;
}

.mini-peripheral-demo b {
  font-size: 3rem;
}

.mini-peripheral-demo .flash-dot {
  position: absolute;
  right: 20%;
  top: 22%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--teal);
}

.mini-code-demo div,
.mini-rhythm-demo,
.mini-contrast-demo div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.mini-code-demo strong,
.mini-rotate-demo span {
  color: var(--teal);
}

.mini-rhythm-demo span,
.mini-contrast-demo span {
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(8, 127, 131, 0.22);
}

.mini-rhythm-demo span.long {
  width: 72px;
  border-radius: 999px;
  background: var(--teal);
}

.mini-contrast-demo span.target {
  background: var(--teal);
}

.tile {
  position: relative;
  min-height: 92px;
  border-radius: 8px;
  background: #dfe8ee;
  box-shadow: inset 0 -7px 0 rgba(36, 59, 104, 0.08);
  overflow: hidden;
}

.tile span {
  position: absolute;
  inset: auto 9px 8px auto;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  font-weight: 900;
}

.tile:disabled {
  cursor: default;
  opacity: 1;
}

.tile-0 { background: #008f8c; }
.tile-1 { background: #1f6feb; }
.tile-2 { background: #d69616; }
.tile-3 { background: #bd4b63; }
.tile-4 { background: #008f8c; }
.tile-5 { background: #1f6feb; }

.tile.lit,
.tile.chosen {
  background: #fff4a8;
  filter: brightness(1.05) saturate(1.05);
  outline: 6px solid #172027;
  outline-offset: 5px;
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.98), 0 0 0 18px rgba(4, 124, 130, 0.28), inset 0 -7px 0 rgba(36, 59, 104, 0.12);
}

.tile.path-complete {
  background: #3f8f57;
  outline: 6px solid rgba(63, 143, 87, 0.28);
  outline-offset: 5px;
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.98), 0 0 0 18px rgba(63, 143, 87, 0.24), inset 0 -7px 0 rgba(23, 32, 39, 0.12);
}

.focus-target-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 2px solid rgba(8, 127, 131, 0.26);
  border-radius: 8px;
  background: #f1fafa;
  padding: 16px 18px;
}

.focus-board {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 22px;
}

.focus-field {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 16px;
  width: 100%;
}

.focus-target-banner span {
  color: var(--teal);
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
}

.focus-target-banner strong {
  color: var(--ink);
  font-size: clamp(1.9rem, 4.4vw, 3.3rem);
  line-height: 1;
}

.focus-target-banner .target-preview {
  width: 54px;
  height: 54px;
  margin: 0;
  box-shadow: 0 0 0 5px #fff, 0 10px 18px rgba(36, 59, 104, 0.16);
}

.cancel-board .focus-target-banner {
  grid-template-columns: auto auto auto;
  justify-content: center;
  gap: 14px;
  padding: 12px 16px;
}

.cancel-board .focus-target-banner span,
.cancel-board .focus-target-banner strong {
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1;
}

.cancel-board .focus-target-banner span {
  color: var(--ink);
  text-transform: none;
}

.cancel-board .focus-target-banner .target-preview {
  width: clamp(42px, 4.8vw, 58px);
  height: clamp(42px, 4.8vw, 58px);
}

.shape {
  display: inline-block;
  width: 58px;
  height: 58px;
  margin: auto;
  box-shadow: 0 10px 18px rgba(36, 59, 104, 0.15);
}

button.shape {
  width: 74px;
  height: 74px;
}

.focus-field button.shape {
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.focus-field button.shape:hover {
  transform: translateY(-2px) scale(1.05);
  filter: saturate(1.08);
}

.focus-field .drift-0 { animation: soft-drift-a 5.8s ease-in-out infinite; }
.focus-field .drift-1 { animation: soft-drift-b 6.4s ease-in-out infinite; }
.focus-field .drift-2 { animation: soft-drift-c 7s ease-in-out infinite; }
.focus-field .drift-3 { animation: soft-drift-d 6.1s ease-in-out infinite; }

.circle { border-radius: 50%; }
.square { border-radius: 8px; }
.diamond { border-radius: 8px; transform: rotate(45deg) scale(0.82); }
.triangle {
  clip-path: polygon(50% 8%, 92% 88%, 8% 88%);
  border-radius: 0;
  background: currentColor;
}

.violet { background: var(--violet); color: var(--violet); }
.blue { background: var(--blue); color: var(--blue); }
.green { background: var(--green); color: var(--green); }
.gold { background: var(--gold); color: var(--gold); }
.rose { background: #bd4b63; color: #bd4b63; }

.speed-board {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(180px, 240px) minmax(120px, 1fr);
  gap: 18px;
  align-items: center;
  padding: 24px;
}

.sort-rule {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 2px solid rgba(8, 127, 131, 0.22);
  border-radius: 8px;
  background: #f1fafa;
  padding: 12px 16px;
}

.sort-rule span {
  color: var(--teal);
  font-size: 0.8rem;
  font-weight: 950;
  text-transform: uppercase;
}

.sort-rule strong {
  color: var(--ink);
  font-size: 1.25rem;
}

.sort-rule em {
  color: var(--muted);
  font-style: normal;
  font-weight: 850;
}

.sort-rule small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 750;
}

.sort-zone {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 170px;
  border-radius: 8px;
  background: #e8eef6;
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 900;
}

.sort-zone span {
  font-size: clamp(1.55rem, 3vw, 2.4rem);
}

.sort-zone small {
  max-width: 13ch;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.2;
  text-transform: capitalize;
}

.sort-zone:hover {
  background: #dce8f8;
}

.sort-card {
  display: grid;
  place-items: center;
  gap: 16px;
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 32px rgba(36, 59, 104, 0.14);
}

.route-card {
  animation: route-card-enter 420ms ease-out both;
}

.sort-card strong {
  text-transform: capitalize;
}

.pattern-board {
  display: grid;
  align-content: center;
  gap: 30px;
  padding: 26px;
}

.pattern-strip,
.option-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.pattern-dot,
.pattern-option {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 20px rgba(36, 59, 104, 0.15);
}

.pattern-option:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.pattern-option.is-correct,
.pattern-option.is-selected-correct {
  box-shadow: 0 0 0 8px rgba(8, 127, 131, 0.16), 0 12px 22px rgba(8, 127, 131, 0.12);
  outline: 4px solid rgba(8, 127, 131, 0.46);
  opacity: 1;
}

.pattern-option.is-selected-wrong {
  box-shadow: 0 0 0 8px rgba(169, 50, 50, 0.12), 0 12px 22px rgba(169, 50, 50, 0.08);
  outline: 4px solid rgba(169, 50, 50, 0.5);
  opacity: 1;
}

.unknown {
  background: #fff;
  color: var(--navy);
  border: 2px dashed #b9c7d3;
}

.complete-card {
  display: grid;
  gap: 8px;
  width: min(360px, 90%);
  border-radius: 8px;
  background: #fff;
  padding: 26px;
  text-align: center;
  box-shadow: var(--shadow);
}

.complete-card span {
  color: var(--teal);
  font-weight: 900;
  text-transform: uppercase;
}

.complete-card strong {
  font-size: 3rem;
}

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

.stage-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
}

.feedback {
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  background: #f1f6f8;
  color: #344550;
  padding: 10px 12px;
  font-weight: 800;
}

.stage-actions {
  gap: 8px;
}

.primary-button,
.ghost-button,
.icon-button {
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0 16px;
  font-weight: 900;
}

.primary-button {
  background: linear-gradient(135deg, var(--teal), #0a6f73);
  color: #fff;
}

.primary-button:hover {
  background: #05686d;
}

.ghost-button,
.icon-button {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--line);
  color: var(--ink);
}

.ghost-button:hover,
.icon-button:hover {
  border-color: rgba(8, 127, 131, 0.35);
  background: var(--teal-soft);
  color: var(--teal);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.progress-panel {
  display: grid;
  gap: 14px;
}

.section-title {
  justify-content: space-between;
  gap: 12px;
}

.export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.domain-bars {
  display: grid;
  gap: 10px;
}

.domain-row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.domain-row div:first-child {
  display: grid;
  gap: 3px;
}

.bar {
  height: 12px;
  border-radius: 999px;
  background: #e8eef4;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--gold));
}

.session-log {
  display: grid;
  gap: 9px;
}

.session-log article,
.empty-log {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px;
}

.session-log span,
.session-log time {
  display: block;
  font-size: 0.84rem;
  margin-top: 4px;
}

.empty-log {
  color: var(--muted);
}

.final-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.rail .final-panel {
  display: grid;
  align-items: start;
}

.rail .final-panel h2 {
  font-size: 1.02rem;
}

.rail .final-panel .primary-button {
  width: 100%;
}

.final-panel.complete {
  border-left-color: var(--green);
  background: linear-gradient(135deg, #ffffff, #f0f8f1);
}

.final-panel p:last-child {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

#toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 20;
  max-width: min(420px, calc(100% - 32px));
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  padding: 12px 16px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 160ms ease, transform 160ms ease;
}

#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1120px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .rail {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .optional-library-panel > div:first-child {
    display: grid;
  }

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

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

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

  .recovery-question-grid,
  .headache-option-grid,
  .red-flag-fieldset,
  .symptom-grid {
    grid-template-columns: 1fr;
  }

  .therapy-meta,
  .therapy-actions,
  .patient-rating > div {
    grid-template-columns: 1fr;
  }

  .cognitive-demo {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .checkin-modal {
    align-items: stretch;
    padding: 0;
  }

  .checkin-modal-card {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
    padding: 16px;
  }

  .checkin-modal-header {
    margin: -16px -16px 0;
    padding: 16px;
  }

  .checkin-modal-header .ghost-button {
    min-height: 48px;
  }

  .topbar,
  .clinic-topbar {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
  }

  .mobile-goal-bar {
    position: sticky;
    top: 0;
    z-index: 8;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(213, 225, 228, 0.9);
    background: rgba(248, 252, 252, 0.96);
    backdrop-filter: blur(12px);
  }

  .mobile-goal-bar > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .mobile-goal-bar strong {
    color: var(--navy);
    font-size: 1rem;
    font-weight: 950;
  }

  .mobile-goal-bar span {
    color: var(--teal);
    font-size: 0.88rem;
    font-weight: 900;
    white-space: nowrap;
  }

  .mobile-goal-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8eef4;
  }

  .mobile-goal-track span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: var(--teal);
    transition: width 220ms ease;
  }

  .top-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    justify-content: stretch;
  }

  .top-actions .contact-button,
  .top-actions .ghost-button,
  .top-actions .icon-button {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.95rem;
    line-height: 1.15;
    text-align: center;
  }

  .brand {
    width: 100%;
    align-items: center;
    gap: 10px;
  }

  .header-logo {
    width: 118px;
    height: 32px;
    flex: 0 0 auto;
  }

  .brand h1 {
    font-size: 1.45rem;
    line-height: 1.12;
  }

  .brand .eyebrow {
    font-size: 0.68rem;
    line-height: 1.1;
  }

  .shell {
    padding: 14px;
  }

  .therapy-detail {
    padding: 12px;
  }

  .therapy-demo {
    min-height: 250px;
  }

  .demo-svg {
    min-height: 250px;
  }

  .demo-caption-text {
    font-size: 24px;
  }

  .rail {
    gap: 8px;
  }

  .mobile-menu > summary {
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 13px 16px;
  }

  .mobile-menu-content {
    padding: 12px;
  }

  .mobile-menu:not([open]) .mobile-menu-content {
    display: none;
  }

  .game-picker,
  .patient-welcome-panel,
  .today-reminder-strip,
  .daily-plan-grid,
  .recovery-question-grid,
  .headache-option-grid,
  .red-flag-fieldset,
  .symptom-grid,
  .sleep-grid,
  .sleep-actions,
  .clinician-stats,
  .clinician-grid,
  .clinic-dashboard-grid,
  .clinic-detail-header,
  .clinic-detail-stats,
  .clinic-protocol-card,
  .clinic-request-item,
  .adherence-week,
  .clinic-category-card,
  .clinic-trend-card,
  .clinic-timeline article,
  .therapy-grid,
  .stage-header,
  .stage-footer,
  .speed-board,
  .domain-row,
  .final-panel {
    grid-template-columns: 1fr;
  }

  .today-reminder-strip {
    display: grid;
  }

  .today-reminder-actions {
    justify-content: stretch;
  }

  .reminder-button {
    width: 100%;
    min-width: 0;
  }

  .final-panel {
    display: grid;
  }

  .daily-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .daily-card button {
    grid-column: 1 / -1;
  }

  .round-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .game-board {
    min-height: 330px;
  }

  .mini-memory-demo,
  .mini-focus-demo,
  .mini-speed-demo,
  .mini-pattern-demo,
  .mini-scan-demo,
  .mini-recall-demo,
  .mini-inhibit-demo,
  .mini-dual-demo,
  .mini-trail-demo,
  .mini-stream-demo,
  .mini-flex-demo,
  .mini-motion-demo,
  .mini-order-demo,
  .mini-stroop-demo,
  .mini-peripheral-demo,
  .mini-code-demo,
  .mini-rotate-demo,
  .mini-rhythm-demo,
  .mini-contrast-demo,
  .mini-ladder-demo {
    min-height: 132px;
  }

  .mini-speed-demo {
    grid-template-columns: 1fr 84px 1fr;
    padding: 14px;
  }

  .speed-board {
    grid-template-columns: 1fr;
  }

  .split-field,
  .split-field-four,
  .split-answer-row,
  .split-field-four + .split-answer-row {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .split-side,
  .split-field-four .split-side {
    min-height: 132px;
  }

  .sort-rule,
  .memory-cue {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .dual-stage {
    gap: 34px;
    min-height: 300px;
    padding: 18px;
  }

  .trail-field {
    min-height: 300px;
  }

  .motion-stage {
    min-height: 240px;
  }

  .motion-field {
    inset: 14px;
  }

  .stream-actions,
  .motion-options,
  .peripheral-options,
  .direction-options {
    grid-template-columns: 1fr;
  }

  .peripheral-stage {
    min-height: 250px;
  }

  .contrast-field {
    grid-template-columns: repeat(3, minmax(44px, 1fr));
  }

  .rhythm-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .stroop-choice,
  .code-choice,
  .peripheral-choice,
  .rhythm-choice {
    width: 100%;
  }

  .motion-stage {
    min-height: 240px;
  }

  .motion-wave-field {
    inset: 16px;
  }

  .motion-wave-field span {
    width: 74px;
    height: 176px;
  }

  .motion-up .motion-wave-field span,
  .motion-down .motion-wave-field span {
    width: 176px;
    height: 74px;
  }

  .motion-center-cue {
    min-width: 138px;
    min-height: 52px;
    font-size: 0.95rem;
  }

  .sort-zone,
  .inhibit-button,
  .dual-zone {
    min-height: 110px;
  }

  .scan-board {
    gap: 14px;
    padding: 16px;
  }

  .scan-target-banner {
    padding: 14px;
  }

  .focus-target-banner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 10px;
    padding: 14px;
  }

  .focus-target-banner strong {
    font-size: 2rem;
  }

  .scan-letter-grid {
    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
    gap: 10px;
  }

  .letter-tile,
  .recall-option,
  .order-option {
    min-height: 52px;
    font-size: 1.15rem;
  }

  .recall-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .recall-option {
    min-height: 82px;
    padding: 12px 8px;
    font-size: clamp(1.65rem, 8vw, 2.35rem);
  }

  .stage-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .clinician-panel > .section-title,
  .clinician-actions,
  .clinician-activity article {
    display: grid;
    grid-template-columns: 1fr;
  }

  .clinic-trend-card div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 10px;
  }

  .clinic-trend-card div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .clinic-category-card div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 10px;
  }

  .clinic-category-card div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .symptom-item,
  .symptom-log article {
    display: grid;
  }
}

.choice-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: min(760px, 100%);
  margin: 0 auto;
}

.choice-button,
.tone-choice,
.route-cell {
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(36, 59, 104, 0.08);
}

.choice-button {
  min-width: 138px;
  min-height: 56px;
  padding: 12px 18px;
  font-size: 1.05rem;
}

.choice-button:hover,
.tone-choice:hover,
.route-cell:hover {
  border-color: var(--teal);
  transform: translateY(-1px);
}

.resonance-board,
.sweep-board,
.names-board,
.routeplan-board,
.detail-board,
.category-board {
  align-content: center;
  gap: 24px;
  padding: 24px;
}

.resonance-stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 16px;
  width: min(680px, 100%);
  margin: 0 auto;
}

.tone-choice {
  min-height: 116px;
  color: #fff;
  font-size: 1.2rem;
  text-transform: capitalize;
}

.tone-low {
  background: #0d6b74;
}

.tone-mid {
  background: #4b8d55;
}

.tone-high {
  background: #b78b2d;
}

.tone-choice.lit {
  outline: 8px solid rgba(8, 127, 131, 0.18);
  filter: brightness(1.16);
  transform: scale(1.04);
}

.tone-choice.correct {
  background: #2f8f56;
  border-color: #2f8f56;
  outline: 8px solid rgba(47, 143, 86, 0.2);
  filter: brightness(1.08);
  transform: scale(1.04);
}

.resonance-guide,
.sweep-field,
.name-study-card,
.category-card,
.scene-card {
  width: min(720px, 100%);
  margin: 0 auto;
}

.resonance-guide {
  text-align: center;
  color: var(--muted);
  font-weight: 850;
}

.sweep-rule-banner {
  width: min(720px, 100%);
  margin: 0 auto -8px;
  border: 1px solid rgba(18, 111, 115, 0.22);
  border-radius: 8px;
  background: #eaf7f7;
  color: var(--teal);
  padding: 10px 12px;
  font-weight: 950;
  text-align: center;
}

.sweep-field {
  position: relative;
  height: 260px;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbfd, #fff);
}

.sweep-door {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  border: 2px solid rgba(8, 127, 131, 0.32);
  border-radius: 8px;
  background: #eaf7f7;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.sweep-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 2px dashed rgba(8, 127, 131, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.sweep-door-left,
.sweep-door-right {
  top: 50%;
  width: 72px;
  height: 54px;
  transform: translateY(-50%);
}

.sweep-door-left {
  left: 12px;
}

.sweep-door-right {
  right: 12px;
}

.sweep-door-top,
.sweep-door-bottom {
  left: 50%;
  width: 88px;
  height: 46px;
  transform: translateX(-50%);
}

.sweep-door-top {
  top: 12px;
}

.sweep-door-bottom {
  bottom: 12px;
}

.sweep-path {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(8, 127, 131, 0.14);
  transform: translate(-50%, -50%) scale(0.4);
  animation: sweep-path-grow var(--pace) ease-in-out forwards;
}

.sweep-target {
  position: absolute;
  left: var(--x1);
  top: var(--y1);
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 12px rgba(8, 127, 131, 0.12);
  transform: translate(-50%, -50%);
}

.sweep-distractor {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(82, 118, 205, 0.42);
  box-shadow: 0 0 0 8px rgba(82, 118, 205, 0.08);
  transform: translate(-50%, -50%) scale(0.5);
}

.edge-options .direction-choice {
  text-transform: capitalize;
}

.name-study-card,
.category-card {
  display: grid;
  place-items: center;
  gap: 22px;
  min-height: 220px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.mini-face {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 2rem;
  font-weight: 950;
}

.mini-face.blue {
  background: var(--blue);
}

.mini-face.green {
  background: #4b8d55;
}

.mini-face.gold {
  background: #b78b2d;
}

.mini-face.rose {
  background: #935f82;
}

.name-study-card strong,
.category-card strong {
  color: var(--navy);
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: 0;
}

.name-study-card em,
.category-card span {
  color: var(--muted);
  font-style: normal;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
}

.route-grid,
.mini-route-demo {
  display: grid;
  grid-template-columns: repeat(var(--route-size, 4), minmax(54px, 1fr));
  gap: 10px;
  width: min(560px, 100%);
  margin: 0 auto;
}

.route-instruction {
  width: min(560px, 100%);
  margin: 0 auto;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 900;
  text-align: center;
}

.route-cell {
  aspect-ratio: 1;
  min-height: 58px;
  padding: 6px;
  background: #fff;
}

.route-cell.start,
.route-cell.finish {
  color: #fff;
  background: var(--teal);
}

.route-cell.blocked {
  color: transparent;
  background: #cbd5df;
  cursor: not-allowed;
  box-shadow: none;
}

.route-cell.selected {
  border-color: #4b8d55;
  background: #e8f6ed;
}

.route-cell.current {
  outline: 5px solid rgba(8, 127, 131, 0.2);
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(8, 127, 131, 0.12), 0 14px 30px rgba(8, 127, 131, 0.16);
}

.scene-card {
  position: relative;
  height: 280px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #f5fbfd 0 58%, #e8f6ed 58% 100%);
  overflow: hidden;
}

.scene-sun,
.scene-cloud,
.scene-house,
.scene-tree,
.scene-path,
.scene-bench,
.scene-flower {
  position: absolute;
  display: block;
}

.scene-sun {
  right: 12%;
  top: 14%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #dca321;
}

.scene-cloud {
  left: 16%;
  top: 16%;
  width: 96px;
  height: 34px;
  border-radius: 999px;
  background: #dcebf0;
}

.scene-cloud::before,
.scene-cloud::after {
  content: "";
  position: absolute;
  bottom: 8px;
  border-radius: 50%;
  background: #dcebf0;
}

.scene-cloud::before {
  left: 16px;
  width: 42px;
  height: 42px;
}

.scene-cloud::after {
  right: 16px;
  width: 54px;
  height: 54px;
}

.scene-house {
  left: 42%;
  bottom: 24%;
  width: 120px;
  height: 78px;
  background: #4e76cf;
}

.scene-house::before {
  content: "";
  position: absolute;
  left: -12px;
  top: -46px;
  border-left: 72px solid transparent;
  border-right: 72px solid transparent;
  border-bottom: 52px solid #b78b2d;
}

.scene-tree {
  right: 24%;
  bottom: 22%;
  width: 26px;
  height: 88px;
  background: #7c6146;
}

.scene-tree::before {
  content: "";
  position: absolute;
  left: -35px;
  top: -54px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #4b8d55;
}

.scene-path {
  left: 43%;
  bottom: -22px;
  width: 150px;
  height: 104px;
  background: rgba(183, 139, 45, 0.34);
  clip-path: polygon(42% 0, 62% 0, 86% 100%, 18% 100%);
}

.scene-bench {
  left: 14%;
  bottom: 24%;
  width: 112px;
  height: 16px;
  border-radius: 999px;
  background: #8ba0aa;
}

.scene-bench::before,
.scene-bench::after {
  content: "";
  position: absolute;
  top: 14px;
  width: 12px;
  height: 42px;
  border-radius: 999px;
  background: #8ba0aa;
}

.scene-bench::before {
  left: 24px;
}

.scene-bench::after {
  right: 24px;
}

.scene-flower {
  right: 12%;
  bottom: 23%;
  width: 8px;
  height: 40px;
  border-radius: 999px;
  background: #4b8d55;
  opacity: 0;
}

.scene-flower::before {
  content: "";
  position: absolute;
  left: -13px;
  top: -22px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #dca321;
  box-shadow: 14px 6px 0 #dca321, -10px 7px 0 #dca321, 3px 18px 0 #dca321;
  opacity: 0;
}

.changed-sun-color .scene-sun {
  background: #935f82;
}

.changed-sun-position .scene-sun {
  right: 22%;
  top: 20%;
}

.changed-cloud-shape .scene-cloud {
  width: 120px;
  height: 30px;
}

.changed-cloud-position .scene-cloud {
  left: 25%;
  top: 10%;
}

.changed-house-color .scene-house {
  background: #4b8d55;
}

.changed-roof-color .scene-house::before {
  border-bottom-color: #935f82;
}

.changed-door-color .scene-house::after,
.changed-window-added .scene-house::after {
  content: "";
  position: absolute;
  left: 48px;
  bottom: 0;
  width: 28px;
  height: 46px;
  background: #172027;
}

.changed-door-color .scene-house::after {
  background: #935f82;
}

.changed-window-added .scene-house::after {
  left: 16px;
  bottom: 34px;
  height: 24px;
  background: #fff;
}

.changed-tree-color .scene-tree::before {
  background: #0d6b74;
}

.changed-tree-size .scene-tree::before {
  width: 118px;
  height: 118px;
  left: -46px;
  top: -72px;
}

.changed-path-color .scene-path {
  background: rgba(8, 127, 131, 0.34);
}

.changed-path-direction .scene-path {
  left: 35%;
  transform: skewX(-16deg);
}

.changed-flower-added .scene-flower::before {
  opacity: 1;
}

.changed-flower-added .scene-flower {
  opacity: 1;
}

.changed-bench-color .scene-bench,
.changed-bench-color .scene-bench::before,
.changed-bench-color .scene-bench::after {
  background: #b78b2d;
}

.category-card {
  min-height: 190px;
}

.mini-resonance-demo,
.mini-sweep-demo,
.mini-names-demo,
.mini-detail-demo,
.mini-category-demo {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 170px;
  color: var(--navy);
}

.mini-resonance-demo {
  grid-template-columns: repeat(3, 1fr);
}

.mini-resonance-demo em,
.mini-sweep-demo b,
.mini-category-demo b,
.mini-detail-demo b {
  grid-column: 1 / -1;
  color: var(--muted);
  font-style: normal;
  font-weight: 850;
}

.tone-dot {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 900;
}

.tone-dot.low {
  background: #0d6b74;
}

.tone-dot.mid {
  background: #4b8d55;
}

.tone-dot.high {
  background: #b78b2d;
}

.mini-sweep-demo {
  position: relative;
  width: min(320px, 100%);
  min-height: 190px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.mini-sweep-demo b {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: calc(100% - 24px);
  text-align: center;
  transform: translateX(-50%);
}

.mini-sweep-demo span {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--teal);
  transform: translate(-50%, -50%);
  animation: mini-sweep 2.2s ease-in-out infinite;
}

.mini-exit {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 62px;
  height: 46px;
  border: 2px solid rgba(8, 127, 131, 0.25);
  border-radius: 8px;
  background: #eaf7f7;
  color: var(--teal);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.mini-exit-left {
  left: 12px;
}

.mini-exit-right {
  right: 12px;
}

.mini-names-demo div,
.mini-category-demo div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.mini-names-demo em,
.mini-category-demo em {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: #fff;
  font-style: normal;
  font-weight: 850;
}

.mini-detail-demo {
  position: relative;
  min-height: 190px;
}

.mini-detail-compare {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.mini-scene-panel {
  position: relative;
  width: 100%;
  min-height: 126px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbfd 0 62%, #e8f6ed 62% 100%);
}

.mini-scene-panel em {
  position: absolute;
  left: 10px;
  top: 8px;
  z-index: 2;
  color: var(--teal);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.mini-detail-demo .detail-sun,
.mini-detail-demo .detail-house,
.mini-detail-demo .detail-tree {
  position: absolute;
}

.detail-sun {
  right: 16%;
  top: 22%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #dca321;
}

.detail-house {
  left: 30%;
  top: 46%;
  width: 58px;
  height: 38px;
  background: var(--blue);
}

.detail-tree {
  right: 28%;
  top: 48%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #4b8d55;
}

.changed-sun-dot {
  background: #935f82;
}

@keyframes sweep-target-move {
  to {
    left: var(--x2);
    top: var(--y2);
    opacity: 0;
  }
}

@keyframes sweep-distractor-move {
  to {
    left: var(--dx);
    top: var(--dy);
    opacity: 0.18;
  }
}

@keyframes sweep-path-grow {
  to {
    width: min(42vw, 360px);
    height: min(42vw, 360px);
    opacity: 0.32;
  }
}

@keyframes mini-sweep {
  0% {
    left: 50%;
    opacity: 1;
  }

  100% {
    left: calc(100% - 44px);
    opacity: 0.25;
  }
}

@media print {
  .top-actions,
  .game-picker,
  .training-stage,
  .export-actions,
  .login-screen,
  #toast {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .topbar,
  .shell {
    display: block;
    padding: 0;
  }

  .rail,
  .workspace {
    display: block;
  }

  .panel,
  .hero-panel,
  .progress-panel,
  .final-panel {
    box-shadow: none;
    break-inside: avoid;
    margin-bottom: 14px;
  }
}