@font-face {
  font-family: 'SBL Hebrew';
  src: local('SBL Hebrew'), local('SBLHebrew'), local('SBL_Hebrew'),
       url('Assets/fonts/SBL_Hbrw.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Shlomo Stam';
  src: url('Assets/fonts/ShlomoStam.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

:root {
  --bg:      #f5f3ee;
  --white:   #ffffff;
  --surface: #ffffff;
  --surface2:#f0ede6;
  --border:  #C4B3AB;
  --border2: #d8cfc8;
  --purple:  #601A77;
  --purpleL: #8a3aa8;
  --purple-dim: rgba(96,26,119,0.08);
  --cream:   #E9EDDE;
  --red:     #a03030;
  --green:   #3a8a3a;
  --blue:    #28538F;
  --text:    #555555;
  --text-mid:#666666;
  --text-dim:#999999;
  --siluk:   #601A77;
  --etnachta:#28538F;
  --tipcha:  #1a7a6a;
  --mercha:  #3a6a28;
  --munach:  #7a4a28;
  --gold:    #c9920a;
  --gold-dim: rgba(201,146,10,0.10);
  --foundational: #f81c1c;
  --radius:  8px;
  --top-banner-height: 0px;
  --app-top-offset: 60px;
  --top-banner-height: 0px;
  --wiz-mobile-top-start: 88px;
  --onboarding-top-start: 48px;
  --onboarding-question-gap: 24px;
  --onboarding-mobile-top-start: 28px;
  --onboarding-mobile-top-start-compact: 24px;
  --onboarding-mobile-question-gap: 18px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
button { font-family: inherit; -webkit-appearance: none; appearance: none; }
body {
  font-family: 'Montserrat', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  padding-top: var(--app-top-offset, 60px);
}

/* ── HEADER ── */
header {
  background: var(--purple);
  border-bottom: none;
  padding: 0 28px;
  height: 60px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: var(--top-banner-height, 0px);
  left: 0;
  right: 0;
  z-index: 250;
}
.brand { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.header-logo { display:flex; align-items:center; height:40px; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
.header-logo img { -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }
.header-logo svg { height:36px; width:auto; display:block; }
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.btn-header-feedback {
  display: none;
  width: 34px;
  height: 34px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.btn-header-feedback img {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
}
.session-info {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgba(233,237,222,0.75);
  display: flex; gap: 20px; align-items: center;
}
.session-info .badge {
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  border-radius:20px; padding:4px 13px;
  font-size:10px; font-weight:700; color:var(--cream); letter-spacing:.12em; text-transform:uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
}

/* ── MAIN LAYOUT ── */
main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 24px 32px;
}
#screenPractice {
  flex-direction: column;
  justify-content: flex-start;
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
  padding: 24px 0;
}
#screenSetup {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
  padding: 40px 20px;
}

/* ── SCREEN MANAGEMENT ── */
.screen { display: none; }
.screen.active { display: block; }
#screenSetup.active,
#screenPractice.active { display: flex; }

/* ── IMPORT SCREEN ── */
.import-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 48px;
  text-align: center;
  max-width: 580px;
  margin: 60px auto;
}
.import-card h2 {
  font-size: 28px;
  font-weight: 300;
  color: var(--ivory);
  margin-bottom: 10px;
}
.import-card p {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 32px;
}
.drop-zone {
  border: 2px dashed var(--border2);
  border-radius: 8px;
  padding: 40px 24px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 20px;
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--gold);
  background: var(--gold-dim);
}
.drop-zone svg { color: var(--gold); margin-bottom: 12px; }
.drop-zone p { margin-bottom: 0; font-size: 15px; }
.drop-zone small { color: var(--text-dim); font-size: 13px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius);
  border: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s;
}
.btn-primary {
  background: var(--purple);
  color: var(--cream);
}
.btn-ghost {
  background: var(--white);
  color: var(--text-mid);
  border: 1.5px solid var(--border);
}
.btn-sm { padding: 7px 16px; font-size: 14px; }

/* ── SETUP SCREEN ── */
.setup-header { margin-bottom: 24px; }
.corpus-toggle-wrap {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--border);
  width: fit-content;
}
.corpus-tab {
  padding: 10px 28px;
  font-size: 15px;
  font-weight: 600;
  background: var(--bg);
  color: var(--text-mid);
  border: none;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
  letter-spacing: 0.02em;
}
.corpus-tab:hover { background: var(--purple-dim); color: var(--purple); }
.corpus-tab.active {
  background: var(--purple-dim);
  color: var(--purple);
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60%  { transform: translateX(-4px); }
  40%,80%  { transform: translateX(4px); }
}
.corpus-tab.shake { animation: shake 0.4s ease; }
.corpus-tab .coming-soon {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(96,26,119,0.1);
  color: var(--purple);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}
.setup-header h2 { font-size: 26px; font-weight: 300; color: var(--text); margin-bottom: 6px; }
.setup-header p { color: var(--text-mid); font-size: 14px; }

.sequence-picker {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 28px;
  margin-bottom: 24px;
}
.sequence-picker h3 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.seq-group { margin-bottom: 20px; }
.seq-group-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.seq-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 14px;
  margin-top: 4px;
}
.seq-group-label::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dot-color, var(--purple));
}
.seq-group-label.etnachta::before { background: var(--blue); }
.seq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.seq-chip {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text-dim);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
  display: flex; align-items: center; gap: 6px;
}
.seq-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-dim);
}
.seq-chip:hover { border-color: var(--purple); color: var(--purple); }
.seq-chip:hover .dot { background: var(--purple); }
.seq-chip.selected {
  border-color: var(--purple);
  background: var(--purple-dim);
  color: var(--purple);
}
.seq-chip.selected .dot { background: var(--purple); }
.seq-chip.unavailable {
  opacity: 0.3; cursor: not-allowed;
}

/* ── Trope selector buttons ── */
.trope-btn-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 4px;
}
.trope-btn {
  padding: 8px 18px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
}
.trope-btn:hover { border-color: var(--purple); color: var(--purple); }
.trope-btn.selected {
  background: var(--purple); color: #fff;
  border-color: var(--purple);
}
.trope-btn.etnachta-btn.selected { background: var(--purple); border-color: var(--purple); }

/* ── Filter panels ── */
.trope-filters {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px 12px;
  margin-top: 10px;
}
.filter-row {
  display: flex; gap: 16px; flex-wrap: wrap;
}
.filter-field {
  display: flex; flex-direction: column; gap: 4px; min-width: 140px;
}
.filter-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim);
}
.filter-field select {
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; color: var(--text);
  cursor: pointer;
}
.filter-field select:focus {
  outline: none; border-color: var(--purple);
}
.filter-count {
  margin-top: 10px;
  font-size: 12px; color: var(--text-dim);
  font-style: italic;
}

/* ── Back to setup button in header ── */
.btn-back-setup {
  padding: 4px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.4);
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
  margin-right: 8px;
  display: none; /* Eliminated as redundant */
}
.btn-back-setup:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.session-config {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 24px 28px;
  margin-bottom: 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.config-field label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.config-field input[type=number], .config-field select {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  padding: 9px 14px;
  outline: none;
  transition: border-color 0.2s;
}
.config-field input[type=number]:focus,
.config-field select:focus { border-color: var(--purple); }
.config-field select option { background: #222; }
.mode-toggle {
  display: flex;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.mode-toggle button {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-mid);
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  padding: 9px 12px;
  cursor: pointer;
  transition: all 0.2s;
}

@media (max-width: 640px) {
  #obReadingSourceWrap {
    width: 100%;
    max-width: 420px;
    margin-top: 12px !important;
  }
  .wiz0-source-row {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .wiz0-source-row .wiz-btn {
    padding: 8px 8px;
    font-size: 11px;
    letter-spacing: 0;
  }
}
.mode-toggle button.active {
  background: var(--purple-dim);
  color: var(--purple);
}

.data-summary {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 20px 28px;
  margin-bottom: 28px;
  display: flex; gap: 24px; align-items: center;
}
.data-summary .stat { text-align: center; }
.data-summary .stat-num {
  font-size: 28px; font-weight: 300;
  color: var(--purple); display: block;
}
.data-summary .stat-label {
  font-size: 12px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.data-summary .divider {
  width: 1px; background: var(--border); align-self: stretch;
}
.data-summary .file-info {
  flex: 1;
  color: var(--text-dim); font-size: 14px; line-height: 1.6;
}
.data-summary .file-info strong { color: var(--ivory); }

/* ── PRACTICE SCREEN ── */
.practice-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100vh - 70px);
  min-height: calc(100dvh - 70px);
}

/* Progress bar */
.progress-bar-wrap {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 16px 24px;
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 20px;
}
.progress-track {
  flex: 1; height: 4px;
  background: var(--border2);
  border-radius: 2px; overflow: hidden;
}
.progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--purple), var(--blue));
  border-radius: 2px; transition: width 0.4s ease;
}
.progress-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  white-space: nowrap;
}
.seq-pill {
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
}

/* Main practice card */
.practice-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px 16px 0 0;
  border-bottom: 0;
  padding: 0 40px 48px;
  margin-bottom: 0;
  position: relative;
}
.session-settings-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.session-settings-header h3 { margin: 0; }
.session-status-bar {
  position: absolute; top: 14px; left: 16px;
  display: flex; align-items: flex-start; gap: 6px;
  min-height: 26px;
}
.session-focus-btn {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
}
.session-focus-wrap {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
}
.session-focus-wrap .session-focus-btn {
  position: static;
  transform: none;
}
.session-settings-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.55; flex-shrink: 0;
}
.session-settings-btn:hover { opacity: 0.85; }
.session-status-bar .session-settings-btn {
  width: 26px;
  height: 26px;
}
.session-settings-icon {
  width: 22px; height: 22px; object-fit: contain;
}
.session-status-text {
  display: flex; align-items: center; gap: 5px;
  height: 26px;
  min-height: 26px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 1;
}
.session-status-sep { opacity: 0.4; }
.practice-card .ref-tag {
  position: absolute; top: 18px; right: 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 600; color: var(--text-dim);
}
.trope-sounds-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 14px 0 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.trope-sounds-cards {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: center;
  gap: 15px;
  width: max-content;
  min-width: 100%;
}
.trope-sounds-carousel {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.trope-sounds-cards-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: visible;
  scroll-behavior: smooth;
}
.trope-sounds-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 0;
  flex: 0 0 auto;
  overflow: visible;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.trope-sounds-card.is-pressed {
  transform: translateY(2px) scale(0.97);
  filter: brightness(0.97);
}
.trope-sounds-word {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
  font-size: 50px;
  line-height: 1.18;
  color: var(--text);
  direction: rtl;
  unicode-bidi: isolate;
  text-align: center;
  padding: 6px 6px 18px;
  overflow: visible;
}
.trope-sounds-hero.is-sequence {
  padding-top: 18px;
}
.trope-sounds-hero.is-sequence .trope-sounds-carousel {
  gap: 4px;
}
.trope-sounds-hero.is-sequence .trope-sounds-cards-viewport {
  padding-inline: 18px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.trope-sounds-hero.is-sequence .trope-sounds-cards-viewport::-webkit-scrollbar {
  display: none;
}
.trope-sounds-hero.is-sequence .trope-sounds-cards {
  justify-content: center;
}
.trope-sounds-hero.is-sequence .trope-sounds-card {
  gap: 0;
  width: 144px;
  min-width: 144px;
  align-items: center;
}
.trope-sounds-hero.is-sequence .trope-sounds-word {
  font-size: 47px;
  line-height: 1.22;
  white-space: nowrap;
  width: 100%;
  text-align: center;
  overflow: visible;
  padding: 6px 8px 30px;
  min-height: 104px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.trope-sounds-hero.is-sequence .trope-sounds-image-btn {
  margin-top: -16px;
}
.trope-sounds-back {
  position: absolute;
  top: 0;
  left: 0;
}
.trope-sounds-image-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trope-sounds-word,
.trope-sounds-image-btn {
  -webkit-tap-highlight-color: transparent;
}
.trope-sounds-image {
  width: auto;
  max-width: min(309px, 100%);
  max-height: 179px;
  height: auto;
  display: block;
  object-fit: contain;
  margin-top: -28px;
  cursor: pointer;
}
.trope-sounds-hero.is-sequence .trope-sounds-image {
  width: 100%;
  max-width: 278px;
  max-height: 161px;
  margin-top: 0;
}
.trope-sounds-hero.is-sequence .trope-sounds-image-siluk {
  max-height: 161px;
  margin-top: 0;
}
.trope-sounds-scroll-btn {
  width: 28px;
  height: 56px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  color: var(--purple);
  font-size: 24px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.trope-sounds-scroll-btn.visible {
  display: inline-flex;
}
.trope-sounds-scroll-btn:disabled {
  opacity: 0.28;
  cursor: default;
}

@media (max-width: 430px) {
  .practice-card.trope-sounds-mode {
    height: 154px;
    padding-bottom: 6px;
  }
  .trope-sounds-hero.is-sequence {
    padding-top: 6px;
  }
  .trope-sounds-hero.is-sequence .trope-sounds-cards {
    gap: 8px;
  }
  .trope-sounds-hero.is-sequence .trope-sounds-cards-viewport {
    padding-inline: 8px;
    overflow-x: auto;
  }
  .trope-sounds-hero.is-sequence .trope-sounds-card {
    gap: 0;
    width: 82px;
    min-width: 82px;
  }
  .trope-sounds-hero.is-sequence .trope-sounds-word {
    font-size: 23px;
    line-height: 1.18;
    white-space: nowrap;
    padding: 1px 4px 12px;
    min-height: 44px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .trope-sounds-hero.is-sequence .trope-sounds-image-btn {
    margin-top: 0;
  }
  .trope-sounds-hero.is-sequence .trope-sounds-image {
    width: 100%;
    max-width: 78px;
    max-height: 78px;
    margin-top: 0;
  }
  .trope-sounds-hero.is-sequence .trope-sounds-image-siluk {
    max-height: 78px;
    margin-top: 0;
  }
  .trope-sounds-scroll-btn {
    width: 22px;
    height: 42px;
    font-size: 18px;
  }
}

/* Sequence mode toggle */
.word-nav {
  display: flex; align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}
.word-nav-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: all 0.15s;
}
.word-nav-btn:hover:not(:disabled) {
  border-color: var(--purple); color: var(--purple);
}
.word-nav-btn:disabled { opacity: 0.3; cursor: default; }
.word-dots { display: flex; gap: 6px; align-items: center; }
.word-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border2); cursor: pointer;
  transition: all 0.15s;
}
.word-dot.active { background: var(--purple); transform: scale(1.2); }
.word-dot.visited { background: var(--purple-dim); border: 1px solid var(--purple); }
.sequence-all-btn {
  padding: 5px 14px;
  border-radius: 20px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text-dim);
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
  margin-left: 8px;
}
.sequence-all-btn.active {
  background: var(--purple-dim); border-color: var(--purple); color: var(--purple);
}
.sequence-all-btn:hover { border-color: var(--gold); color: var(--gold); }

.word-block { text-align: center; }
.word-block.faded { opacity: 0.25; }
.word-block.highlight { opacity: 1; }

/* Staff */
.staff-outer {
  position: relative;
  width: 100%;
  min-width: 140px;
  height: 250px;
  margin-bottom: 0;
}
.staff-line {
  position: absolute;
  height: 2px;
  background: #333;
  left: 0; right: 0;
}
.note-circle {
  position: absolute;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--bg);
  margin-left: -20px; margin-top: -20px;
  z-index: 10;
  transition: opacity 0.3s;
}
.note-circle.yellow { background: #F4D03F; }
.note-circle.green  { background: #52BE80; }
.bracket-svg { display: block; }

.syllable-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 8px 10px 0;
  direction: ltr;
}
.syllable-pair {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 0 5px;
  min-width: 60px; max-width: 60px;
  flex-shrink: 0;
}
.syllable-pair.wide { min-width: auto; max-width: none; }
.heb-syl {
  font-family: 'SBL Hebrew', 'Arial Hebrew', serif;
  font-size: 58px;
  color: var(--text);
  line-height: 1;
  direction: rtl;
  unicode-bidi: isolate;
  white-space: nowrap;
}
.vocal-shva-cluster {
  position: relative;
  display: inline-block;
}
.vocal-shva-cluster::before {
  content: '—';
  position: absolute;
  left: 50%;
  top: calc(-0.14em + 3px);
  transform: translateX(-50%) scaleX(0.375);
  color: #000;
  font-family: Arial, sans-serif;
  font-size: 0.38em;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.kk-vowel {
  color: #aaa !important;
  -webkit-text-fill-color: #aaa !important;
}
.kk-cluster {
  position: relative;
  display: inline-block;
  direction: rtl;
  unicode-bidi: isolate;
}
.kk-vowel-overlay {
  position: absolute;
  left: 50%;
  top: 0.08em;
  transform: translateX(-50%);
  pointer-events: none;
  font: inherit;
  line-height: 1;
  color: #aaa !important;
  -webkit-text-fill-color: #aaa !important;
}
.hyphen-sep {
  color: var(--text-dim); font-size: 20px;
  align-self: center; flex-shrink: 0;
}

/* Controls */
.practice-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 16px 0 20px;
}
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1 1 0;
}
.stat {
  background: var(--white);
  border: 1.5px solid var(--border2);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stats .stat:nth-child(3) {
  display: none; /* Hide accuracy stat */
}
.stat-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.stat-val {
  font-size: 20px;
  font-weight: 600;
  color: var(--purple);
}
.stat-val.run { color: var(--blue); }
.stat-val.good { color: var(--green); }
.controls-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  flex: 1 1 0;
  align-items: stretch;
}
.controls-left, .controls-right {
  display: flex; gap: 6px; align-items: center;
}
.controls-row .btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  padding: 10px 4px;
  font-size: 13px;
  white-space: nowrap;
}
.practice-rating-row {
  width: 100%;
  margin: 0;
  gap: 8px;
  align-items: stretch;
}
.practice-rating-row .practice-rate-btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}
.btn-pass { background: var(--green); color: #fff; border-radius: 8px; }
.btn-focus { background: var(--white); border: 1.5px solid var(--border); color: var(--text-mid); }
.btn-focus:disabled {
  color: var(--text-dim);
  border-color: var(--border2);
  background: #f6f4f8;
  cursor: not-allowed;
  opacity: 0.55;
}
.btn-back,
.btn-skip { background: var(--white); border: 1.5px solid var(--border); color: var(--text-mid); }
.btn-back:disabled {
  color: var(--text-dim);
  border-color: var(--border2);
  background: #f6f4f8;
  cursor: default;
  opacity: 0.65;
}
.btn-again { display: none; }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--purpleL); }
  .btn-ghost:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-dim); }
  .btn-pass:hover { background: #4aaa4a; }
  .btn-back:hover:not(:disabled),
  .btn-skip:hover { border-color: var(--red); color: var(--red); }
}

.work-on-something-else {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
  padding: 12px 0 4px;
  font-size: 17px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.18s;
  font-family: 'Montserrat', sans-serif;
}
.work-on-something-else:hover {
  color: var(--purple);
}


/* Complete screen */
.complete-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 60px 48px;
  text-align: center;
  max-width: 520px;
  margin: 60px auto;
}
.complete-card .check {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  background: #ffbd59;
  -webkit-mask: url('https://cdn.jsdelivr.net/gh/cantormike/raw-audio-voice@main/Assets/Images/icons/telisha-ketana-icon.svg') center / contain no-repeat;
  mask: url('https://cdn.jsdelivr.net/gh/cantormike/raw-audio-voice@main/Assets/Images/icons/telisha-ketana-icon.svg') center / contain no-repeat;
}
.complete-card h2 {
  font-size: 30px; font-weight: 300;
  color: var(--text); margin-bottom: 8px;
}
.complete-card p { color: var(--text-dim); font-size: 16px; margin-bottom: 32px; }
.complete-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}
.complete-actions .btn {
  width: 180px;
  justify-content: center;
}
.stats-row {
  display: flex; justify-content: center; gap: 32px;
  margin-bottom: 36px;
}
.stats-row .s { text-align: center; }
.stats-row .s-num { font-size: 36px; font-weight: 300; color: var(--purple); display: block; }
.stats-row .s-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }

/* Loading spinner */
.loading {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; color: var(--text-dim); font-size: 15px;
  padding: 60px;
}
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Pitch-match heart fly-up */
.pitch-heart {
  position: fixed;
  font-size: 20px;
  pointer-events: none;
  z-index: 9999;
  animation: heartFly 0.85s ease-out forwards;
}
@keyframes heartFly {
  0%   { transform: translateY(0)     scale(0.8); opacity: 1;   }
  60%  { transform: translateY(-40px) scale(1.3); opacity: 0.9; }
  100% { transform: translateY(-70px) scale(1.0); opacity: 0;   }
}

/* Trope color accent helpers */
.color-siluk { color: var(--siluk); }
.color-etnachta { color: var(--etnachta); }
.bg-siluk { background: rgba(155,122,181,0.15); border-color: rgba(155,122,181,0.4) !important; }
.bg-etnachta { background: rgba(181,130,106,0.15); border-color: rgba(181,130,106,0.4) !important; }

/* Toast */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 6px; padding: 12px 20px;
  font-size: 14px; color: var(--text);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
  z-index: 999;
}
.toast.show { opacity: 1; }


/* ═══════════════════════════════════════════
   WIZARD SETUP STYLES
═══════════════════════════════════════════ */
.wiz-step {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px;
  animation: wizFadeIn 0.3s ease;
  display: flex;
  flex-direction: column;
}
@keyframes wizFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wiz-logo {
  display: flex; justify-content: center;
  margin-bottom: 32px;
}
.wiz-logo svg {
  width: 180px; height: auto;
}
.wiz-question {
  font-size: 22px; font-weight: 300;
  color: var(--text);
  text-align: center;
  margin-bottom: 28px;
  line-height: 1.4;
}
.wiz-btn-row {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
}
.wiz-choice-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 360px);
  margin: 8px auto 0;
}
.wiz-choice-card {
  width: 100%;
  min-height: 66px;
  padding: 14px 24px;
  border-radius: 8px;
  border: 1.5px solid var(--border2);
  background: var(--white);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  box-sizing: border-box;
}
.wiz-choice-card.selected {
  border-color: var(--purple);
  background: rgba(85, 61, 123, 0.07);
  box-shadow: 0 0 0 1px rgba(85, 61, 123, 0.14);
}
.wiz-choice-card:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--bg);
  color: var(--text-dim);
  border-color: var(--border);
}
.wiz-choice-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.wiz-choice-desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-dim);
}
.wiz-choice-card.selected .wiz-choice-desc {
  color: var(--text);
}
.sess-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 360px);
  margin: 12px auto 0;
}
.sess-btn {
  width: 100%;
  min-height: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--border2);
  background: var(--white);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  box-sizing: border-box;
}
.sess-btn.sel,
.sess-btn.selected {
  border-color: var(--purple);
  background: var(--purple);
  box-shadow: none;
}
.sess-btn.sel .sess-btn-text,
.sess-btn.selected .sess-btn-text {
  color: #fff;
}
.sess-btn.sel .sdesc,
.sess-btn.selected .sdesc {
  color: #fff;
}
.sess-btn.sel .sess-input,
.sess-btn.selected .sess-input {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}
.sess-btn.sel .sess-control-label,
.sess-btn.selected .sess-control-label {
  color: #fff;
}
.sess-btn.sel .filter-row-label,
.sess-btn.selected .filter-row-label {
  color: #fff;
}
.sess-btn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
  color: var(--text);
  flex: 1;
  align-items: flex-start;
}
.sess-btn-text .sdesc {
  font-size: 9px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-dim);
  max-width: 140px;
}
.sess-control {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 104px;
  min-width: 104px;
}
.sess-input {
  width: 62px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.sess-input:focus {
  outline: none;
  border-color: var(--purple);
}
.sess-control-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  padding-left: 2px;
}
.god-toggle-row {
  width: min(100%, 360px);
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  cursor: pointer;
}
.god-toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
  line-height: 1.45;
}
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.toggle-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.toggle-track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(196, 179, 171, 0.75);
  transition: background 0.18s ease;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  transition: transform 0.18s ease;
}
.toggle-switch input:checked + .toggle-track {
  background: var(--purple);
}
.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(18px);
}
.siluk-special-toggle-panel {
  width: min(100%, 360px);
  margin: 4px auto 1px;
  padding: 2px 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.siluk-special-toggle-panel--left {
  justify-content: flex-start;
}
.siluk-special-toggle-row {
  width: auto;
  margin: 4px 0 0;
  flex: 0 1 auto;
}
.siluk-special-toggle-row .god-toggle-label {
  font-size: 11px;
}
.siluk-special-mode-banner {
  width: min(100%, 520px);
  margin: 8px auto 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--siluk, #601A77);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 8px 18px rgba(96, 26, 119, 0.22);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
}
.siluk-special-mode-banner.is-dismissing {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}
.siluk-special-mode-copy {
  min-width: 0;
}
.siluk-special-mode-title {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
}
.siluk-special-mode-desc {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
  opacity: 0.94;
}
.siluk-special-mode-off {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.86);
  background: rgba(255,255,255,0.14);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.siluk-special-mode-off:hover {
  background: rgba(255,255,255,0.24);
}
#practiceSilukSpecialModeBanner {
  width: min(100%, 520px);
}
#screenPractice .siluk-special-mode-banner {
  width: 100%;
  margin: 0 auto 12px;
}
.session-settings-timer-only #spStructureCount,
.session-settings-timer-only #spOmitGodsToggle,
.session-settings-timer-only .god-toggle-row {
  display: none;
}
.session-settings-timer-only .sess-row {
  justify-content: center;
}
.session-settings-timer-only #spStructureTimer {
  width: min(100%, 360px);
}
.fam-strip-disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.fam-strip-disabled:hover {
  transform: none;
}
.wiz-panel {
  width: min(100%, 360px);
  margin: 8px auto 0;
  padding: 18px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(249,247,242,0.96));
  box-shadow: 0 12px 28px rgba(72, 51, 99, 0.06);
}
.wiz-panel--compact {
  width: min(100%, 360px);
}
.wiz-panel--summary {
  width: min(100%, 360px);
}
.wiz-panel-label {
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}
.wiz-select-shell {
  width: 100%;
}
.wiz-select-shell--compact {
  max-width: 220px;
  margin: 0 auto;
}
.wiz-subtle-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
  text-align: center;
}
.wiz2-note {
  width: min(100%, 360px);
  margin: 10px auto 0;
  font-size: 11px;
  line-height: 1.45;
}
.wiz-summary-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wiz-reading-summary-switch {
  width: min(100%, 420px);
  margin: 22px auto 12px;
}
.wiz-reading-summary-switch-label {
  margin-bottom: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.wiz-reading-summary-switch-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wiz-summary-item {
  display: grid;
  grid-template-columns: minmax(108px, 150px) 1fr;
  gap: 10px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(196,179,171,0.35);
}
.wiz-summary-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.wiz-summary-label {
  text-align: right;
  color: var(--purple);
  font-size: 12px;
}
.wiz-summary-value {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.wiz-reading-summary-secondary {
  width: min(100%, 420px);
  margin: 14px auto 0;
  text-align: center;
}
.wiz-reading-summary-secondary-copy {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
}
.wiz-toggle-row--center {
  justify-content: center;
}
.wiz-btn {
  width: 260px;
  padding: 14px 24px;
  border-radius: 8px;
  border: 1.5px solid var(--border2);
  background: var(--white);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.wiz-btn:focus,
.wiz-btn:focus-visible,
.pb-btn:focus,
.pb-btn:focus-visible,
.wiz-back-btn:focus,
.wiz-back-btn:focus-visible,
.wiz-continue-btn:focus,
.wiz-continue-btn:focus-visible,
.wiz-aliyah-btn:focus,
.wiz-aliyah-btn:focus-visible {
  outline: none;
  box-shadow: none;
}
.wiz-btn.selected {
  background: var(--purple);
  color: #fff; border-color: var(--purple);
}
.wiz-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--bg);
  color: var(--text-dim);
  border-color: var(--border);
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.wiz-btn:disabled::after {
  content: " ⊘";
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  opacity: 0;
}
.wiz-btn:disabled:hover::after,
.wiz-btn:disabled:active::after {
  opacity: 1;
}
.wiz0-type-pending {
  opacity: 0.72;
}
.wiz0-type-pending .wiz-btn {
  background: var(--bg);
  color: var(--text-dim);
  border-color: var(--border);
}
.wiz0-type-pending .wiz-btn.selected {
  background: var(--bg);
  color: var(--text-dim);
  border-color: var(--border);
}

@media (hover: hover) and (pointer: fine) {
  .wiz-btn:hover:not(:disabled):not(.selected) {
    border-color: var(--purple);
    color: var(--purple);
    background: var(--purple-dim);
  }
}
.wiz0-type-pending .wiz-god-check {
  opacity: 0.4;
  pointer-events: none;
}
#screenSetup {
  --wiz0-control-width: min(100%, 500px);
}

#screenOnboarding #ob0 {
  width: min(760px, 100%);
  max-width: min(760px, 100%);
  overflow-x: hidden;
}

#screenOnboarding #ob0 .wiz-vs-intro {
  width: 100%;
  max-width: 100%;
}

.wiz0-intro {
  max-width: var(--wiz0-control-width);
  margin: 0 auto 12px;
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
}

#ob0 .ob0-begin-prompt {
  margin: 0 0 12px;
  padding-block: 4px;
  white-space: nowrap;
  color: var(--purple);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(18px, 5vw, 32px);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: 0;
  max-width: 100%;
  overflow: visible;
  text-align: center;
}
#btnOb0QuickStartPath.ob0-initial-recommend {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}
#btnOb0QuickStartPath.ob0-initial-recommend span {
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  #btnOb0QuickStartPath.ob0-initial-recommend:hover:not(:disabled) {
    border-color: var(--purple);
    background: var(--purple);
    color: #fff;
  }
}

#wiz0Corpus {
  padding-top: 0;
}
#wiz0Corpus .corpus-toggle {
  position: relative;
  padding: 4px;
  border-radius: 999px;
  border-color: var(--purple);
  background: #fff;
  box-shadow: 0 8px 20px rgba(96, 26, 119, 0.08);
}
#wiz0Corpus .corpus-toggle::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  z-index: 3;
  width: 1.5px;
  transform: translateX(-50%);
  background: rgba(96, 26, 119, 0.32);
  pointer-events: none;
}
#wiz0Corpus .corpus-btn {
  position: relative;
  z-index: 2;
  min-height: 44px;
  border-radius: 0;
  color: var(--purple);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
#wiz0Corpus .corpus-btn:first-child {
  border-radius: 999px 0 0 999px;
}
#wiz0Corpus .corpus-btn:last-child {
  border-radius: 0 999px 999px 0;
}
#wiz0Corpus .corpus-btn + .corpus-btn {
  border-left: 0;
}
#wiz0Corpus .corpus-btn.selected,
#wiz0Corpus .corpus-btn.selected:hover,
#wiz0Corpus .corpus-btn.selected:focus-visible {
  background: var(--purple);
  color: #fff;
}
#wiz0Corpus .corpus-toggle.corpus-toggle--glow {
  border-color: #e53e3e;
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.35), 0 8px 20px rgba(96, 26, 119, 0.08);
}
.corpus-toggle {
  display: flex;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  margin: 0 auto 14px;
  width: var(--wiz0-control-width);
  background: var(--white);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.corpus-toggle--glow {
  border-color: #e53e3e;
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.35);
}
.corpus-toggle--locked .corpus-btn,
.student-scroll-corpus-row.corpus-toggle--locked .student-scroll-corpus-btn {
  cursor: not-allowed;
}
.corpus-toggle--locked .corpus-btn:not(.selected),
.student-scroll-corpus-row.corpus-toggle--locked .student-scroll-corpus-btn:not(.selected) {
  opacity: 0.48;
}
.corpus-toggle--locked .corpus-btn.selected:disabled,
.student-scroll-corpus-row.corpus-toggle--locked .student-scroll-corpus-btn.selected:disabled,
#screenOnboarding #ob6 .wiz-btn.selected:disabled,
#wizReadingSummarySwitch .wiz-btn.selected:disabled {
  opacity: 1;
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}
.corpus-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.corpus-btn + .corpus-btn {
  border-left: 1.5px solid var(--border);
}
.corpus-btn.selected {
  background: var(--purple);
  color: #fff;
}
#obReadingSourceWrap {
  transition: opacity 0.2s ease;
  margin-bottom: 8px;
}
.wiz0-source-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.wiz0-reading-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 2px;
}
.wiz0-source-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.wiz0-chip-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wiz0-source-row {
  justify-content: center;
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  width: var(--wiz0-control-width);
}
.wiz0-source-row .wiz-btn,
.src-btn {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  text-align: center;
  justify-content: center;
}
/* mockup-style source pills */
.src-btn,
.wiz0-source-row .wiz-btn {
  min-height: 36px;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border2);
  background: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.wiz0-source-row .wiz-btn.selected {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}
.wiz0-home-wrap {
  display: flex;
  justify-content: center;
  width: var(--wiz0-control-width);
  margin: 16px auto 0;
}
.wiz0-home-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--purple);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.wiz0-home-btn:hover,
.wiz0-home-btn:focus-visible {
  color: var(--purpleL);
}

/* Profile-builder style buttons */
.pb-btn {
  width: var(--wiz0-control-width);
  min-height: 66px;
  padding: 14px 24px;
  border-radius: 8px;
  border: 1.5px solid var(--border2);
  background: var(--white);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0 auto 8px;
  box-sizing: border-box;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.pb-btn.selected {
  background: var(--purple);
  color: white;
  border-color: var(--purple);
}
.pb-btn.selected:disabled {
  opacity: 1;
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}
.pb-btn-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}
.pb-btn.selected .pb-btn-title {
  color: white;
}
.pb-btn.selected .pb-btn-desc {
  color: white;
}
.pb-btn-desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  opacity: 1;
  color: var(--text-dim);
}
.pb-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--bg);
  color: var(--text-dim);
  border-color: var(--border);
}

.act-div {
  display: flex;
  align-items: center;
  gap: 6px;
  width: var(--wiz0-control-width);
  margin: 2px auto 6px;
}
.adl {
  flex: 1;
  height: 1px;
  background: var(--border2);
}
.adlabel {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Stage tiles */
.stage-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: var(--wiz0-control-width);
  margin: 6px auto 0;
  touch-action: pan-y;
}
.stage-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin: 0 auto;
}
.stage-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  background: #1caa1c;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
}
.sbadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--foundational, #d62222);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  align-self: center;
  margin: 0 auto 12px;
}
.stage-tile {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  border-color: color-mix(in srgb, var(--sc) 46%, white);
  background: color-mix(in srgb, var(--sc) 12%, white);
}
.stage-tile.sel {
  background: var(--sc);
  border-color: var(--sc);
}
.stl {
  color: color-mix(in srgb, var(--sc) 72%, var(--text));
  text-align: center;
}
.std {
  color: color-mix(in srgb, var(--sc) 44%, var(--text-dim));
  text-align: center;
}
.stage-tile.sel .stl {
  color: white;
}
.stage-tile.sel .std {
  color: rgba(255,255,255,0.94);
}

.stage-tile-disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.35);
}

.stage-tile-disabled:hover {
  transform: none;
  box-shadow: none;
}

.combined-stage-trope-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: var(--wiz0-control-width);
  margin: 6px auto 0;
}

#wiz2,
#wiz2_3a,
#wiz2_3b,
#wizLearnDrawer {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

#wiz2 .stage-grid,
#wiz2_3a .combined-stage-trope-grid,
#wiz2_3b .combined-stage-trope-grid,
#wizLearnDrawer .learn-drawer-stages {
  padding-bottom: 28px;
  touch-action: pan-y;
}

#wiz2_3a .combined-stage-trope-grid,
#wiz2_3b .combined-stage-trope-grid {
  padding-bottom: 8px;
}

#wiz2_3a .wiz-nav,
#wiz2_3b .wiz-nav,
#wizLearnDrawer .wiz-nav {
  align-self: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 12px;
  width: var(--wiz0-control-width);
  max-width: 100%;
}

#wiz2_3a .wiz-back-btn,
#wiz2_3b .wiz-back-btn,
#wizLearnDrawer .wiz-back-btn {
  margin-left: auto;
  margin-right: auto;
}

#wiz2_3a .wiz2-note,
#wiz2_3b .wiz2-note {
  align-self: center;
  width: var(--wiz0-control-width);
  max-width: 100%;
  text-align: center;
}

#wizLearnDrawer .wiz-nav span {
  display: none;
}

.combined-stage-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  scroll-margin-top: calc(var(--app-top-offset, 82px) + env(safe-area-inset-top, 0px) + 12px);
  touch-action: pan-y;
}

.combined-stage-toggle {
  width: 100%;
  touch-action: pan-y;
}

.combined-stage-drawer {
  display: none;
  width: 100%;
  padding: 0 0 4px;
  touch-action: pan-y;
}

.combined-stage-drawer.visible {
  display: block;
}

.combined-trope-list {
  width: 100%;
  max-width: none;
  align-items: flex-start;
  margin-left: 0;
  margin-right: 0;
  touch-action: pan-y;
}

.combined-trope-list .fam-strip {
  width: 100%;
  justify-content: flex-start;
  touch-action: pan-y;
}

.combined-trope-list .fam-strip .ftiles {
  justify-content: flex-start;
  touch-action: pan-y;
}

.combined-seq-surprise-toggle,
.combined-word-surprise-toggle {
  width: 100%;
  max-width: none;
  margin: 8px auto 0;
}

.learn-drawer-stages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: var(--wiz0-control-width);
  margin: 6px auto 0;
}

#wizLearnDrawer .learn-stage-card,
#wizLearnDrawer .stage-tile,
#wiz2 .stage-card,
#wiz2 .stage-tile,
#wiz2_3a .combined-stage-card,
#wiz2_3a .stage-tile,
#wiz2_3b .combined-stage-card,
#wiz2_3b .stage-tile {
  opacity: 1 !important;
  filter: none !important;
  touch-action: pan-y;
}

#wizLearnDrawer .stage-tile.stage-tile-disabled,
#wiz2 .stage-tile.stage-tile-disabled,
#wiz2_3a .stage-tile.stage-tile-disabled,
#wiz2_3b .stage-tile.stage-tile-disabled {
  cursor: pointer;
  opacity: 1 !important;
  filter: none !important;
}

#wizLearnDrawer .stage-tile:not(.sel),
#wiz2 .stage-tile:not(.sel),
#wiz2_3a .stage-tile:not(.sel),
#wiz2_3b .stage-tile:not(.sel) {
  border-color: var(--sc);
  background: var(--sc);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--sc) 22%, transparent);
  touch-action: pan-y;
}

#wizLearnDrawer .stage-tile:not(.sel) .stl,
#wiz2 .stage-tile:not(.sel) .stl,
#wiz2_3a .stage-tile:not(.sel) .stl,
#wiz2_3b .stage-tile:not(.sel) .stl {
  color: white;
}

#wizLearnDrawer .stage-tile:not(.sel) .std,
#wiz2 .stage-tile:not(.sel) .std,
#wiz2_3a .stage-tile:not(.sel) .std,
#wiz2_3b .stage-tile:not(.sel) .std {
  color: rgba(255,255,255,0.94);
}

.learn-stage-drawer {
  display: none;
}

.learn-stage-drawer.visible {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.learn-sequence-strip {
  color: inherit;
  font: inherit;
}

.sound-sequence-strip .ftiles,
.learn-sequence-strip .ftiles {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.combined-trope-list .sound-sequence-strip .ftiles {
  justify-content: flex-end;
}

.combined-trope-list .learn-sequence-strip .ftiles {
  justify-content: flex-end;
}

.learn-family-label {
  width: 100%;
  max-width: var(--wiz0-control-width);
  margin: 4px auto -2px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.learn-micro-panel {
  width: 100%;
  border: 1.5px solid var(--border2);
  border-radius: 18px;
  background: color-mix(in srgb, var(--white) 92%, var(--cream));
  padding: 42px 14px 14px;
  box-shadow: 0 10px 24px rgba(61, 48, 32, 0.08);
  position: relative;
}

.learn-micro-word {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
  font-size: clamp(34px, 9vw, 54px);
  line-height: 1.2;
  text-align: center;
  direction: rtl;
  color: var(--text);
  padding: 24px 0 28px;
  margin-bottom: 16px;
}

.learn-micro-word-token {
  display: inline-block;
}

.learn-micro-word-sep {
  display: inline-block;
  width: 0.28em;
}

.learn-mobile-scroll-spacer {
  display: none;
}

.learn-sound-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 12px;
}

.learn-sound-dot-group {
  display: inline-flex;
  gap: 5px;
}

.learn-sound-dot {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  display: inline-block;
}

.learn-sound-dot.ready {
  background: #d8b63f;
}

.learn-sound-dot.go {
  background: var(--green);
}

.learn-micro-actions {
  margin: 8px auto 0;
  max-width: 210px;
}

.learn-waveform-btn .action-btn-icon {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

@media (hover: none), (pointer: coarse) {
  .learn-micro-panel .learn-play-btn:not(.active):not(.playing):not(.loading),
  .learn-micro-panel .learn-waveform-btn:not(.active):not(.playing):not(.loading),
  .learn-micro-panel .sm-link-btn:not(.active):not(.playing):not(.loading) {
    border-color: var(--border2);
    background: #fff;
    color: var(--purple);
  }
}

.learn-play-btn .action-btn-icon {
  width: 44px;
  height: 44px;
  object-fit: cover;
}

.learn-map-btn .action-btn-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.learn-practice-words-btn .action-btn-icon,
.learn-phrase-practice-btn .action-btn-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.learn-sound-map-area {
  display: block;
  margin-top: 12px;
}

.learn-sound-map-area .sm-scroll-shell {
  margin-top: 4px;
}

.learn-rec-panel {
  display: none;
  margin-top: 12px;
}

.learn-rec-panel.visible {
  display: block;
}

.learn-pitch-canvas {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.learn-record-feedback {
  min-height: 20px;
  margin-top: 8px;
  color: var(--text-dim);
  text-align: center;
  font-size: 13px;
}

@media (max-width: 640px) {
  #screenSetup {
    --wiz0-control-width: calc(100% - 32px);
  }
  .corpus-toggle {
    width: calc(100% - 16px);
  }
  .corpus-btn {
    padding: 13px 14px;
  }
  .wiz0-source-row {
    width: var(--wiz0-control-width);
  }
  .pb-btn,
  .act-div,
  .stage-grid,
  .combined-stage-trope-grid,
  .learn-drawer-stages {
    width: var(--wiz0-control-width);
  }
  #screenSetup #wiz2 .stage-grid,
  #screenSetup #wiz2 .stage-tile.pb-btn,
  #screenSetup #wiz2_3a .combined-stage-trope-grid,
  #screenSetup #wiz2_3a .stage-tile.pb-btn,
  #screenSetup #wiz2_3a .wiz-nav,
  #screenSetup #wiz2_3a .wiz2-note,
  #screenSetup #wiz2_3b .combined-stage-trope-grid,
  #screenSetup #wiz2_3b .stage-tile.pb-btn,
  #screenSetup #wiz2_3b .wiz-nav,
  #screenSetup #wiz2_3b .wiz2-note,
  #screenSetup #wizLearnDrawer .learn-drawer-stages,
  #screenSetup #wizLearnDrawer .wiz-nav,
  #screenSetup #wizLearnDrawer .stage-tile.pb-btn {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
  }
  .wiz-choice-stack,
  .wiz-panel,
  .wiz-panel--compact,
  .wiz-panel--summary {
    width: 100%;
  }
  .wiz-summary-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .wiz-summary-label {
    text-align: left;
  }
}
#screenSetup .wiz-toggle-btn {
  min-height: 40px;
  padding: 9px 16px;
  font-size: 14px;
}
#screenSetup .wiz-aliyah-btn {
  width: 38px;
  height: 38px;
  font-size: 14px;
}
#screenSetup .wiz-back-btn,
#screenSetup .wiz-continue-btn {
  font-size: 14px;
  padding: 6px 0;
}
#screenSetup .wiz-btn {
  box-sizing: border-box;
}
.wiz-btn-sm {
  width: auto; min-width: 140px;
  padding: 10px 22px;
  font-size: 14px;
}
/* Parasha wrap */
.wiz-parasha-wrap {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.wiz-parasha-wrap--rich {
  width: min(100%, 520px);
  margin: 10px auto 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(249,247,242,0.98));
  box-shadow: 0 12px 28px rgba(72, 51, 99, 0.06);
}
.wiz-parasha-wrap--rich .wiz-haft-row {
  justify-content: center;
  margin-bottom: 12px;
}
.wiz-parasha-wrap--rich .wiz-haft-label {
  min-width: 72px;
}
.wiz-parasha-wrap--rich .wiz-toggle-row {
  justify-content: center;
}
#wiz1a > .wiz-haft-row,
#wiz1b > .wiz-haft-row {
  width: min(100%, 420px);
  margin: 8px auto 22px;
  padding: 14px 18px;
  justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(249,247,242,0.96));
  box-shadow: 0 12px 28px rgba(72, 51, 99, 0.06);
}
#wiz1a > .wiz-haft-row > .wiz-haft-label,
#wiz1b > .wiz-haft-row > .wiz-haft-label {
  display: none;
}
.wiz-select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; color: var(--text);
  cursor: pointer;
}
.wiz-select:focus { outline: none; border-color: var(--purple); }
.wiz-select--needs-date { border-color: var(--red) !important; }
.wiz-verse-row { margin-top: 14px; }
.wiz-verse-label {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 8px;
}
.wiz-verse-inputs {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.wiz-verse-sub {
  font-size: 12px; color: var(--text-dim); font-weight: 500;
}
.wiz-verse-sep { color: var(--text-dim); font-weight: 600; }
.wiz-verse-input {
  width: 56px; padding: 6px 8px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; text-align: center;
}
.wiz-verse-input:focus { outline: none; border-color: var(--purple); }
/* Haftarah picker */
.wiz-haft-row {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.wiz-haft-label {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); min-width: 60px;
}
.wiz-toggle-row {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.wiz-toggle-btn {
  padding: 6px 14px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 500;
  cursor: pointer; color: var(--text);
  transition: all 0.18s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.wiz-toggle-btn:hover { border-color: var(--purple); color: var(--purple); }
.wiz-toggle-btn.active {
  background: var(--purple); color: #fff; border-color: var(--purple);
}
.wiz-ref-preview {
  margin-top: 10px;
  font-size: 13px; color: var(--text-dim);
  font-style: italic; min-height: 18px;
}
.wiz-aliyah-wrap {
  margin-top: 12px;
}
.wiz-aliyah-note {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 8px;
}
.wiz-aliyah-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  transition: opacity 0.18s ease;
}
.wiz-aliyah-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid var(--border2);
  background: var(--white);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.wiz-aliyah-btn:hover {
  border-color: var(--purple);
  color: var(--purple);
  background: var(--purple-dim);
}
.wiz-aliyah-btn.selected {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}
/* Filters */
.wiz-filter-wrap {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.wiz-filter-row { display: flex; gap: 16px; flex-wrap: wrap; }
.wiz-filter-field {
  display: flex; flex-direction: column; gap: 5px;
}
.wiz-filter-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim);
}
.wiz-select-sm {
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; color: var(--text);
  cursor: pointer; min-width: 120px;
}
.wiz-select-sm:focus { outline: none; border-color: var(--purple); }
.wiz-filter-count {
  margin-top: 10px;
  font-size: 13px; color: var(--text-dim); font-style: italic;
}
.wiz-filter-native {
  display: none;
}
.filter-card {
  width: min(100%, 360px);
  margin: 0 auto 8px;
  background: var(--white);
  border: 1.5px solid var(--border2);
  border-radius: 12px;
  padding: 12px 14px;
}
.filter-row-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.filter-row-inline--top {
  align-items: flex-start;
}
.filter-row-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
}
#wiz3a_filters .filter-row-label {
  font-size: 14px;
}
#wiz4a .filter-row-label {
  font-size: 14px;
}
.filter-row-sub {
  margin-top: 3px;
  max-width: 120px;
  font-size: 9px;
  line-height: 1.4;
  color: var(--text-dim);
}
.filter-bubbles {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}
.filter-bubble,
.filter-pill {
  border: 1.5px solid var(--border2);
  background: var(--bg);
  color: var(--text-mid);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}
.filter-bubble {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}
.filter-bubble-any {
  width: auto;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 8px;
}
.filter-bubble.sel,
.filter-pill.sel {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}
.filter-pill-stack {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}
.filter-pills {
  display: flex;
  align-items: center;
  gap: 5px;
}
.filter-pill {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.filter-pill-both {
  align-self: auto;
}
.filter-count {
  margin: 12px auto 0;
  width: min(100%, 360px);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}
@media (max-width: 640px) {
  .sess-btn {
    align-items: center;
    flex-direction: row;
    gap: 10px;
  }
  .sess-control {
    align-self: center;
    width: 96px;
    min-width: 96px;
  }
  .sess-btn-text .sdesc {
    max-width: none;
  }
  .filter-row-inline {
    align-items: center;
    flex-direction: row;
  }
  .filter-bubbles,
  .filter-pill-stack {
    width: auto;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
  }
}
/* Sequence list */
.wiz-seq-list {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}
.wiz-seq-btn {
  width: 320px; padding: 12px 20px;
  border-radius: 8px;
  border: 1.5px solid var(--border2);
  background: var(--white);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 500;
  cursor: pointer; text-align: right;
  transition: all 0.18s;
  letter-spacing: 0.02em;
}
.wiz-seq-btn:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-dim); }
.wiz-seq-btn.selected { background: var(--purple); color: #fff; border-color: var(--purple); }
.wiz-seq-btn.etnachta-seq.selected { background: var(--purple); border-color: var(--purple); }
/* Back nav */
.wiz-back-nav {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 24px;
}
.wiz-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 480px;
  gap: 16px;
  margin-top: 32px;
  padding-bottom: 8px;
}

#ob6 .wiz-nav {
  margin-top: 0;
  justify-content: flex-start;
}

#ob6 .wiz-parasha-wrap .wiz-btn-row {
  align-items: center;
  justify-content: center;
}

.wiz-back-btn,
.wiz-continue-btn {
  background: none; border: none;
  color: var(--purple); font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 4px 0;
  font-family: 'Montserrat', sans-serif;
  transition: color 0.18s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.wiz-back-btn:hover,
.wiz-continue-btn:hover:not(:disabled) { color: var(--purpleL); }
.wiz-back-btn:disabled,
.wiz-continue-btn:disabled {
  color: var(--text-dim);
  cursor: default;
  opacity: 0.5;
}
.wiz-breadcrumb {
  font-size: 12px; color: var(--text-dim);
}

/* Responsive */
@media (max-width: 640px) {
  /* Fix header so swipe/scroll only moves page content beneath it.
     The key is locking the viewport itself (html + body overflow:hidden) so iOS
     rubber-band bounce never moves the fixed chrome, and routing all scrolling
     through <main> instead. */
  html {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    /* box-sizing:border-box means padding-top shrinks the content area, not
       the total height, so main fills exactly the space below the fixed chrome. */
    padding-top: var(--app-top-offset, 82px);
  }
  /* All page scrolling happens here — viewport never scrolls */
  main {
    height: calc(100dvh - var(--app-top-offset, 82px));
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }
  header {
    height: 54px;
    padding: 0 12px;
  }
  .header-actions {
    gap: 8px;
  }
  .session-info {
    gap: 8px;
    min-width: 0;
    font-size: 10px;
  }
  .session-info .badge {
    padding: 3px 8px;
    font-size: 10px;
  }
  .logo {
    max-width: 116px;
    height: auto;
  }
  main {
    width: 100%;
    max-width: 100%;
    padding: 12px;
  }
  #screenPractice.student-crash-return-visible {
    margin-top: -12px;
  }
  .student-crash-return-banner {
    font-size: 12px;
    white-space: normal;
  }
  .settings-box {
    width: calc(100vw - 20px);
    max-width: 360px;
    padding: 20px 16px 16px;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .tutorial-shell,
  .tutorial-shell--wide {
    width: 100%;
    padding: 14px 14px 6px;
    border-radius: 16px;
  }
  .tutorial-title {
    font-size: 30px;
    margin-bottom: 14px;
  }
  .tutorial-copy,
  .tutorial-list li {
    font-size: 15px;
    line-height: 1.6;
  }
  .tutorial-list {
    width: min(100%, 420px);
    padding-left: 30px;
  }
  .tutorial-hebrew-pill {
    min-width: 0;
    width: auto;
    font-size: 26px;
    padding: 10px 12px;
  }
  .tutorial-hebrew-focus {
    font-size: 40px;
    margin-bottom: 14px;
  }
  .tutorial-nav {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }
  .tutorial-nav .wiz-back-btn,
  .tutorial-nav .wiz-continue-btn {
    position: static;
    justify-self: stretch;
  }
  .tutorial-carousel-frame iframe {
    height: 520px;
  }
  .tutorial-carousel-frame--go-part {
    width: min(100%, 560px);
  }
  .tutorial-carousel-frame--go-part iframe {
    height: 420px;
  }
  #screenPractice .practice-card:not(.trope-sounds-mode):not(.trope-sounds-sequence-mode) {
    min-height: 228px;
    padding: 18px 16px 18px;
  }
  #screenPractice .practice-card:not(.trope-sounds-mode):not(.trope-sounds-sequence-mode) .phrase-display {
    min-height: 128px;
    padding-top: 70px;
  }
  #screenPractice #practiceCard.help-labels-on:not(.trope-sounds-mode):not(.trope-sounds-sequence-mode) .phrase-display {
    padding-top: 82px;
  }
  .phrase-word { padding-top: 14px; }
  .sound-map-area { gap: 20px; }
  .heb-syl { font-size: 44px; }
  .session-config { grid-template-columns: 1fr; }
  /* On mobile portrait, top-align wizard content so it never crowds the sticky header */
  .wiz-step {
    justify-content: flex-start;
    padding-top: calc(var(--wiz-mobile-top-start) + var(--app-top-offset, 0px) + env(safe-area-inset-top, 0px));
  }
  #wiz0 {
    padding-top: calc(var(--wiz-mobile-top-start) + 28px + var(--app-top-offset, 0px) + env(safe-area-inset-top, 0px));
  }
  #wiz0 .wiz-question {
    margin-bottom: 8px;
  }
  .wiz0-intro {
    margin: 2px auto 14px;
    font-size: 13px;
  }
  #wiz0Corpus,
  #obReadingSourceWrap,
  #wiz0Mode {
    padding-top: 12px;
  }
  .wiz0-divider {
    margin-top: 16px;
  }
  #wiz0Type {
    padding-top: 34px;
  }
  #wiz0Type::before {
    margin: 0 auto 18px;
    transform: translateY(-8px);
  }
  #wiz1a .wiz-question,
  #wiz1b .wiz-question {
    margin-bottom: 0;
  }
  #wiz1a .wiz-nav,
  #wiz1b .wiz-nav {
    margin-top: 0;
  }
}
/* ═══════════════════════════════════════
   WIZARD LAYOUT — logo bg, static question
═══════════════════════════════════════ */
#bgLogo {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 2; opacity: 0.30;
}
#bgLogo img { width: min(180vmin, 1200px); height: auto; }

main { position: relative; z-index: 3; }
header { pointer-events: auto; }

#screenSetup {
  /* Transparent so #bgLogo shows through */
  background: transparent;
  position: relative; z-index: 3;
}

.wiz-step {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100dvh;
  padding: calc(24px + var(--app-top-offset, 0px) + env(safe-area-inset-top, 0px)) 20px calc(118px + env(safe-area-inset-bottom, 0px));
  animation: wizFadeIn 0.3s ease;
  pointer-events: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
}
#wiz1c {
  justify-content: flex-start;
  max-width: min(760px, 100%);
  padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px));
}
.wiz-step::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

@keyframes wizFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Question sits naturally above buttons — no fixed anchor needed */
.wiz-question-anchor { display: none; }
.wiz-q,
.wiz-question {
  font-size: calc(1em + 6pt); font-weight: 300; color: var(--text);
  text-align: center; line-height: 1.4; max-width: 540px;
  margin-bottom: 0px;
}
.wiz-s {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dim);
  text-align: center;
  margin: 0 auto 8px;
  line-height: 1.5;
  max-width: 680px;
}
.wiz-q + .wiz0-intro,
.wiz-question + .wiz0-intro {
  margin-top: 0;
}
.trope-mode-hint {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 8px;
}
/* Spacer no longer needed */
.wiz-q-spacer { display: none; }

.fam-strip-list {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
}

@media (min-width: 641px) {
  .combined-stage-trope-grid,
  .learn-drawer-stages,
  .fam-strip-list {
    padding-left: 24px;
  }
  .combined-stage-card .fam-strip-list {
    padding-left: 0;
  }
}

.fam-strip-list--tight {
  gap: 5px;
}

.fam-strip {
  --sc: var(--purple);
  width: min(100%, var(--wiz0-control-width, 390px));
  border: 1.5px solid var(--border2);
  border-radius: 14px;
  background: var(--white);
  padding: 2px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
  scroll-margin-top: calc(var(--app-top-offset, 82px) + env(safe-area-inset-top, 0px) + 12px);
  touch-action: pan-y;
}

.fam-strip.sel {
  border-color: var(--sc);
  box-shadow: 0 0 0 1.5px var(--sc);
}

.fam-strip.fam-strip-clickable {
  cursor: pointer;
}

.fam-strip.fam-strip-clickable:hover {
  transform: translateY(-1px);
}

.ftiles {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 3px;
  width: 100%;
  min-width: 0;
  touch-action: pan-y;
}

.ftile-img {
  width: clamp(60px, 15vw, 80px);
  height: clamp(60px, 15vw, 80px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  flex: 0 0 auto;
  touch-action: pan-y;
}

.ftile-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(1.03);
}

.ftile-text {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 12px;
  line-height: 1.1;
  text-align: center;
  font-weight: 700;
  color: var(--ink);
}

.ftile-img.conj {
  opacity: 0.4;
}

.fam-strip.fam-strip-clickable .ftile-img.conj {
  opacity: 1;
}

.farr {
  font-size: 9px;
  color: var(--border);
  padding: 0;
  flex: 0 0 auto;
}

.fam-strip.trope-mode {
  cursor: default;
  justify-content: flex-start;
}

.fam-strip.trope-mode .ftiles {
  width: fit-content;
  max-width: 100%;
  justify-content: flex-start;
  gap: 2px;
  padding: 0;
  margin: 0;
}

.fam-strip.trope-mode .ftile-img {
  opacity: 1;
  cursor: pointer;
}

.fam-strip.trope-mode .ftile-img.ftile-selectable {
  opacity: 1;
  cursor: pointer;
}

.fam-strip.trope-mode .ftile-img.conj {
  opacity: 1;
  cursor: pointer;
}

.fam-strip.trope-mode .ftile-img.conj.ftile-selectable {
  opacity: 1;
  cursor: pointer;
}

.fam-strip.trope-mode .ftile-img.tile-sel {
  opacity: 1;
  transform: scale(1.04);
  position: relative;
}

.fam-strip.trope-mode .ftile-img.tile-sel::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -3px;
  height: 3px;
  border-radius: 999px;
  background: var(--purple);
}

.fam-strip-note {
  margin-left: 10px;
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  padding-left: 0;
}

.wiz-btn-row {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  margin-top: 0;
}
/* When wiz-btn-row is inside a parasha-wrap or filter-wrap, no top margin */
.wiz-parasha-wrap .wiz-btn-row,
.wiz-filter-wrap .wiz-btn-row { margin-top: 16px; }

.wiz-btn {
  width: 280px; padding: 14px 24px;
  border-radius: 8px; border: 1.5px solid var(--border2);
  background: var(--white); color: var(--text);
  font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 500;
  cursor: pointer; transition: all 0.2s; letter-spacing: 0.02em;
}
.wiz-btn.selected { background: var(--purple); color: #fff; border-color: var(--purple); }
.wiz-btn-sm { width: auto; min-width: 140px; padding: 10px 22px; font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
  .wiz-btn:hover:not(.selected) { border-color: var(--purple); color: var(--purple); background: #e8d8f0; }
  .wiz-reading-view-btn:hover:not(.selected) {
    border-color: transparent;
    background: transparent;
    color: var(--purple);
  }
}
.wiz-god-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text); cursor: pointer;
  margin-top: 20px; max-width: 320px;
}
.wiz-god-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.wiz-yn-wrap {
  width: min(100%, 360px);
  margin: 8px auto 22px;
  padding: 18px;
  text-align: center;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(249,247,242,0.96));
  box-shadow: 0 12px 28px rgba(72, 51, 99, 0.06);
}
.wiz-yn-pending {
  opacity: 0.45;
}

.tutorial-shell {
  width: min(100%, 780px);
  margin: 0 auto;
  padding: 18px 20px 8px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(196, 179, 171, 0.85);
  border-radius: 20px;
  box-shadow: 0 14px 38px rgba(56, 22, 77, 0.08);
  backdrop-filter: blur(4px);
}
.tutorial-shell--wide {
  width: min(100%, 920px);
}
.tutorial-section-divider {
  border: none;
  border-top: 1px solid var(--border2);
  width: 50%;
  margin: 28px auto 24px;
}
.tutorial-kicker {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}
.tutorial-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--text);
  text-align: center;
  margin-bottom: 18px;
}
.tutorial-copy {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  text-align: center;
  max-width: 760px;
  margin: 0 auto 16px;
}
.tutorial-list {
  width: min(100%, 500px);
  margin: 0 auto 16px;
  padding-left: 42px;
  color: var(--text);
}
.tutorial-list li {
  font-size: 17px;
  line-height: 1.65;
  margin-bottom: 10px;
}
.tutorial-note-block .tutorial-list {
  padding-left: 68px;
}
.tutorial-shell ol.tutorial-list {
  padding-left: 62px;
}
.tutorial-shell ol.tutorial-list li {
  font-size: 15px;
}
.tutorial-list--substep {
  padding-left: 86px;
  margin-top: -6px;
}
.tutorial-list--substep li {
  font-size: 15px;
}
.tutorial-hebrew-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 12px auto 10px;
}
.tutorial-hebrew-row--examples .tutorial-hebrew-pill {
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: clamp(40px, 7vw, 62px);
  line-height: 1.35;
}
.tutorial-example-image {
  display: block;
  width: min(100%, 306px);
  height: auto;
  margin: 0 auto;
}
.tutorial-hebrew-row--stack .tutorial-hebrew-pill {
  min-width: 140px;
}
.tutorial-hebrew-pill,
.tutorial-hebrew-focus,
.tutorial-inline-hebrew {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
  direction: rtl;
  unicode-bidi: isolate;
}
.tutorial-hebrew-pill {
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(196, 179, 171, 0.9);
  font-size: clamp(24px, 3.8vw, 38px);
  line-height: 1.25;
  color: var(--text);
  text-align: center;
}
.tutorial-hebrew-word {
  color: var(--text);
}
.tutorial-hebrew-word--trope {
  color: #b23737;
}
.tutorial-hebrew-focus {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.15;
  text-align: center;
  margin: 4px auto 18px;
  color: var(--text);
}
.tutorial-hebrew-focus--sequence-example {
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.2;
  white-space: nowrap;
}
.tutorial-hebrew-focus--hero {
  font-size: clamp(40px, 7vw, 62px);
  line-height: 1.2;
}
.tutorial-inline-hebrew {
  font-size: 1.15em;
}
.tutorial-chip-row {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
}
.tutorial-chip-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tutorial-chip {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.tutorial-chip-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-mid);
  text-align: center;
}
.tutorial-chip--ready {
  background: #f0d35b;
}
.tutorial-chip--go {
  background: #8fc86c;
}
.tutorial-direction-arrow {
  display: flex;
  justify-content: center;
  margin: -4px auto 18px;
}
.tutorial-direction-arrow__shaft {
  position: relative;
  width: min(180px, 58vw);
  height: 0;
  border-top: 4px solid #d4932f;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12));
}
.tutorial-direction-arrow__shaft::before,
.tutorial-direction-arrow__shaft::after {
  content: "";
  position: absolute;
  left: -2px;
  width: 16px;
  height: 4px;
  border-radius: 999px;
  background: #d4932f;
  transform-origin: left center;
}
.tutorial-direction-arrow__shaft::before {
  top: -4px;
  transform: rotate(38deg);
}
.tutorial-direction-arrow__shaft::after {
  top: -1px;
  transform: rotate(-38deg);
}
.tutorial-play-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 18px;
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  flex-wrap: wrap;
}
.tutorial-play-copy {
  max-width: 28rem;
}
.tutorial-play-btn {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--purple);
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.tutorial-play-btn:focus,
.tutorial-play-btn:focus-visible {
  outline: none;
  box-shadow: none;
}
.tutorial-play-btn:active {
  transform: scale(0.92);
}
.tutorial-play-btn:hover {
  border-color: var(--purple);
  background: var(--purple-dim);
  box-shadow: 0 6px 14px rgba(86, 66, 124, 0.14);
}
.tutorial-play-btn-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}
.tutorial-play-btn .tutorial-play-btn-icon {
  width: 40px;
  height: 40px;
  object-fit: cover;
}
.tutorial-play-btn-icon--keyboard {
  width: 48px;
  height: 48px;
  object-fit: contain;
  transform: scale(1.25);
  transform-origin: center;
}
.tutorial-map-audio-row {
  width: min(100%, 560px);
  margin: 0 auto 16px;
  display: flex;
  justify-content: center;
}
.tutorial-play-btn--map {
  width: 52px;
  height: 52px;
}
@media (hover: none) {
  .tutorial-play-btn:hover {
    border-color: var(--border);
    background: var(--white);
    box-shadow: none;
  }
}
.tutorial-map-card {
  width: min(100%, 560px);
  margin: 0 auto 8px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(196, 179, 171, 0.85);
}
.tutorial-map-figure {
  width: min(100%, 560px);
  margin: 0 auto 12px;
}
.tutorial-map-figure--etnachta {
  width: min(100%, 570px);
  margin: 0 auto 16px;
}
.tutorial-map-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.tutorial-map-image--interactive {
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease, opacity 0.16s ease;
}
.tutorial-map-image--interactive:focus-visible {
  outline: 2px solid rgba(74, 140, 111, 0.65);
  outline-offset: 4px;
  border-radius: 12px;
}
.tutorial-map-image--interactive:active {
  transform: scale(0.98);
  filter: brightness(0.94);
  opacity: 0.94;
}
@media (hover: hover) and (pointer: fine) {
  .tutorial-map-image--interactive:hover {
    transform: scale(1.01);
    filter: drop-shadow(0 6px 10px rgba(74, 140, 111, 0.18));
  }
}
.tutorial-map-image--etnachta {
  width: min(100%, 570px);
}
.tutorial-map-line {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tutorial-syllable {
  min-width: 72px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.tutorial-syllable--ready {
  background: #f6e48c;
  color: #5a4a06;
}
.tutorial-syllable--go {
  background: #9fd68d;
  color: #234d18;
}
.tutorial-note {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  text-align: center;
  max-width: 760px;
  margin: 0 auto 16px;
}
.tutorial-note--spaced {
  margin-top: 12px;
}
.tutorial-carousel-frame {
  width: min(100%, 760px);
  margin: 0 auto 18px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(196, 179, 171, 0.85);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.tutorial-carousel-frame iframe {
  width: 100%;
  height: 620px;
  border: 0;
  display: block;
}
.tutorial-carousel-frame--go-part {
  width: min(100%, 640px);
  margin-bottom: 12px;
}
.tutorial-carousel-frame--go-part iframe {
  height: 500px;
}
.tutorial-nav {
  width: min(100%, 780px);
  margin: 18px auto 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.tutorial-nav .wiz-back-btn,
.tutorial-nav .wiz-continue-btn {
  position: relative;
  z-index: 1;
}
.tutorial-inline-image-wrap {
  width: min(100%, 420px);
  margin: 4px auto 18px;
}
.tutorial-inline-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.tutorial-inline-image--focus-filter {
  width: 70%;
}
.tutorial-inline-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: inline-block;
  vertical-align: text-bottom;
  margin: 0 4px;
  padding: 4px;
  border: 1.5px solid rgba(196, 179, 171, 0.95);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
}
.tutorial-inline-icon--soundmap {
  width: 36px;
  height: 36px;
  object-fit: cover;
}
.tutorial-inline-icon--record {
  width: 30px;
  height: 30px;
}
.tutorial-inline-icon--parking {
  width: 30px;
  height: 30px;
}
.tutorial-inline-icon--feedback {
  width: 24px;
  height: 24px;
  margin: 0 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: brightness(0) saturate(100%) invert(38%) sepia(9%) saturate(626%) hue-rotate(338deg) brightness(90%) contrast(88%);
}
.tutorial-inline-icon--settings {
  width: 26px;
  height: 26px;
  margin: 0 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: brightness(0) saturate(100%) invert(38%) sepia(9%) saturate(626%) hue-rotate(338deg) brightness(90%) contrast(88%);
}
.tutorial-inline-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--purple);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.tutorial-inline-link:hover,
.tutorial-inline-link:focus-visible {
  color: #4b2a66;
}
.tutorial-sequence-example,
.tutorial-sequence-list {
  width: min(100%, 760px);
  margin: 0 auto 18px;
}
.tutorial-trope-line {
  width: min(100%, 760px);
  margin: 0 auto 14px;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 4px;
}
.tutorial-trope-line--bare .tutorial-trope-tile {
  display: block;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  padding: 0;
  min-height: 0;
  aspect-ratio: auto;
  gap: 0;
  line-height: 0;
}
.tutorial-trope-line--bare .tutorial-trope-tile-image {
  width: 92px;
}
.tutorial-sequence-example {
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 12px;
}
.tutorial-sequence-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 14px;
}
.tutorial-trope-tile,
.tutorial-sequence-tile {
  border: 1px solid rgba(196, 179, 171, 0.85);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease, opacity 0.16s ease;
}
.tutorial-trope-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 calc((100% - 36px) / 4);
  width: calc((100% - 36px) / 4);
  min-width: 0;
  max-width: 118px;
  min-height: 108px;
  aspect-ratio: 1 / 1;
  gap: 8px;
  padding: 12px 10px;
}
.tutorial-sequence-tile {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  padding: 10px 0;
  margin-left: 54px;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.tutorial-trope-tile:active,
.tutorial-trope-tile.tutorial-trope-tile--active,
.tutorial-sequence-tile:active {
  transform: scale(0.985);
  filter: brightness(0.95);
  opacity: 0.95;
}
.tutorial-trope-tile:focus-visible,
.tutorial-sequence-tile:focus-visible {
  outline: 2px solid rgba(74, 140, 111, 0.65);
  outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .tutorial-trope-tile:hover,
  .tutorial-sequence-tile:hover {
    transform: translateY(-1px);
    filter: drop-shadow(0 6px 10px rgba(74, 140, 111, 0.18));
  }
}
.tutorial-trope-tile-image {
  display: block;
  width: min(100%, 84px);
  height: auto;
}
.tutorial-trope-tile-label,
.tutorial-sequence-tile-label {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-mid);
  text-align: center;
}
.tutorial-sequence-tile-images {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.tutorial-sequence-tile-images img {
  display: block;
  width: 70px;
  height: auto;
}
.tutorial-sequence-list--bottom {
  margin-top: 8px;
  align-items: center;
}
.tutorial-sequence-tile--bottom .tutorial-sequence-tile-images img {
  width: 105px;
}
.tutorial-sequence-tile--bottom {
  justify-content: center;
  margin-left: 0;
}
.tutorial-sequence-tile--bottom .tutorial-sequence-tile-images {
  justify-content: center;
  flex-wrap: nowrap;
}
.tutorial-sequence-tile-label { text-align: left; }
.student-crash-fixed-top {
  position: static;
  z-index: 20;
  width: min(100%, 760px);
  margin: 0 auto 12px;
  padding: 0 14px;
  box-sizing: border-box;
  background: transparent;
}
.student-crash-fixed-top .wiz-back-btn {
  width: auto;
  max-width: min(100%, 390px);
  margin-left: auto;
  display: block;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  box-shadow: 0 6px 18px rgba(75, 42, 102, 0.18);
}
.student-crash-shell {
  padding-top: 12px;
  padding-bottom: 48px;
}
#screenStudentCrash {
  background: transparent;
  color: var(--text);
  max-width: 100%;
  overflow-x: hidden;
  touch-action: pan-y;
}
.student-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  height: 4px;
  width: 0;
  background: linear-gradient(90deg, var(--purple), #d7c0ec);
  transition: width 0.08s linear;
}
.student-scroll-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1250;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  pointer-events: none;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(75, 42, 102, 0.24);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.student-scroll-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#screenStudentCrash .student-scroll-header {
  position: fixed;
  top: var(--app-top-offset, 60px);
  left: 0;
  right: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: auto;
  min-height: 0;
  padding: 10px max(18px, env(safe-area-inset-left)) 8px max(18px, env(safe-area-inset-right));
  background: rgba(251, 248, 241, 0.92);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(75, 42, 102, 0.08);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}
.student-scroll-header-logo {
  color: var(--purple);
  font-size: 13px;
  font-weight: 900;
}
.student-scroll-header-chapter {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.student-scroll-skip {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: calc(76px + env(safe-area-inset-right, 0px));
  z-index: 1300;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--purple);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(75, 42, 102, 0.18);
  pointer-events: auto;
}
.student-scroll-skip-floating {
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  right: calc(76px + env(safe-area-inset-right, 0px)) !important;
  z-index: 2147483000 !important;
}
.student-scroll-page {
  width: min(100%, 720px);
  max-width: 100%;
  margin: 0 auto;
  padding: 88px 18px 56px;
  background: transparent;
  text-align: left;
  overflow-x: hidden;
  touch-action: pan-y;
}
.student-scroll-header-audio {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 4px;
  border: 1px solid rgba(75, 42, 102, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 5px 16px rgba(75, 42, 102, 0.08);
}
.student-scroll-header-audio[hidden] {
  display: none;
}
.student-scroll-header-audio .student-scroll-audio-toggle-btn {
  min-width: 68px;
  padding: 7px 11px;
  font-size: 12px;
}
.student-crash-resume-box {
  border: 1px solid rgba(75, 42, 102, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(75, 42, 102, 0.08);
}
.student-scroll-corpus-gate {
  max-width: 620px;
  margin: 18px 0 0;
  padding: 0;
  text-align: left;
}
.student-scroll-corpus-gate p {
  margin: 0;
  font-size: 18px;
}
.student-scroll-corpus-row {
  display: inline-grid;
  grid-template-columns: repeat(2, 150px);
  gap: 12px;
  margin-top: 18px;
}
.student-scroll-corpus-btn {
  width: 100%;
  border: 2px solid var(--purple);
  border-radius: 999px;
  padding: 13px 22px;
  background: transparent;
  color: var(--purple);
  font-weight: 900;
  text-transform: uppercase;
}
.student-scroll-corpus-btn.selected {
  border-color: var(--purple);
  background: color-mix(in srgb, var(--purple) 12%, #fff);
}
.student-scroll-course-content[hidden] {
  display: none;
}
.student-scroll-section-locked {
  display: none;
}
section[data-student-chapter] {
  scroll-margin-top: calc(var(--app-top-offset, 60px) + 82px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
#studentCrashTwoSylMileilIntro {
  scroll-margin-top: calc(var(--app-top-offset, 60px) + 92px);
}
section[data-student-chapter].student-scroll-chapter-visible {
  opacity: 1;
  transform: translateY(0);
}
.student-scroll-section-enter {
  animation: studentScrollSectionEnter 0.55s ease both;
}
@keyframes studentScrollSectionEnter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.student-scroll-checkpoint {
  margin: 26px 0 6px;
  padding: 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}
.student-scroll-checkpoint.is-complete {
  background: transparent;
}
.student-scroll-checkpoint-copy {
  margin: 0 0 14px !important;
  color: var(--text) !important;
  font-weight: 700;
  text-align: center !important;
}
.student-scroll-checkpoint-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.student-scroll-checkpoint-btn {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 10px 8px;
  border-radius: 999px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.1;
  white-space: normal;
  letter-spacing: 0;
}
.student-scroll-checkpoint-main {
  display: block;
  font-weight: 900;
  text-transform: uppercase;
}
.student-scroll-checkpoint-sub {
  display: block;
  font-size: 0.82em;
  font-weight: 500;
}
.student-crash-resume-overlay {
  position: fixed;
  inset: 0;
  z-index: 2400;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(24, 18, 32, 0.42);
}
.student-crash-resume-box {
  width: min(100%, 520px);
  padding: 24px;
}
.student-crash-resume-box h2 {
  margin: 0 0 10px;
  color: var(--purple);
  font-size: 24px;
}
.student-crash-resume-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.student-crash-return-banner {
  display: block;
  width: 100vw;
  max-width: none;
  margin: 0 calc(50% - 50vw);
  border: 0;
  border-radius: 0;
  padding: 12px 18px;
  background: #ec8735;
  color: #21170f;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
}
#screenPractice.student-crash-return-visible {
  margin-top: -10px;
  padding-top: 0;
}
#screenPractice.student-crash-return-visible .practice-card {
  margin-top: 0;
}
#screenStudentCrash p,
#screenStudentCrash li {
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-mid);
  text-align: left;
}
#screenStudentCrash p + p {
  margin-top: 18px;
}
#screenStudentCrash strong {
  color: var(--text);
}
.student-scroll-hero {
  padding: 38px 0 0;
  text-align: left;
}
.student-scroll-eyebrow {
  color: var(--purple);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.student-scroll-hero h1 {
  margin: 10px 0 14px;
  font-size: 40px;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--text);
  text-align: left;
}
.student-scroll-hero h1 span {
  font-weight: 300;
}
.student-scroll-hero h1 strong {
  font-weight: 900;
}
.student-scroll-hero h1 strong,
.student-scroll-chapter-head h2 em {
  color: var(--purple);
  font-style: normal;
}
.student-scroll-hero p {
  max-width: 620px;
  margin: 0;
  font-size: 18px;
}
.student-scroll-hero p + p {
  margin-top: 24px;
}
.student-scroll-hero p.student-scroll-paragraph-gap {
  margin-top: 24px;
}
.student-scroll-hero p.student-scroll-paragraph-after {
  margin-bottom: 0;
}
.student-scroll-hero a {
  color: var(--purple);
  font-weight: 800;
}
.student-scroll-quick-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 14px 0 22px;
  border: 2px solid var(--purple);
  border-radius: 999px;
  padding: 10px 18px;
  background: var(--purple);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}
.student-scroll-paragraph-gap {
  margin-top: 16px;
}
.student-scroll-paragraph-after {
  margin-bottom: 18px;
}
.student-scroll-before-stage-grid {
  margin-bottom: 22px;
}
.student-scroll-chapter-head {
  margin: 42px 0 18px;
  text-align: left;
}
.student-scroll-chapter-head h2 {
  margin: 6px 0 0;
  font-size: 30px;
  line-height: 1.14;
  letter-spacing: 0;
  color: var(--text);
  text-align: left;
}
.student-scroll-divider {
  height: 1px;
  margin: 40px 0 10px;
  background: linear-gradient(90deg, transparent, rgba(75, 42, 102, 0.24), transparent);
}
.student-scroll-img-wrap,
.student-scroll-card,
.student-scroll-callout,
.student-scroll-pull-card,
.student-scroll-sound-map-card,
.student-scroll-pause-card,
.student-scroll-seq-card {
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(75, 42, 102, 0.12);
  box-shadow: 0 6px 18px rgba(75, 42, 102, 0.07);
}
.student-scroll-img-wrap {
  width: min(100%, 680px);
  margin: 18px auto;
  padding: 12px;
  text-align: center;
}
.student-scroll-img-wrap--narrow {
  width: min(100%, 520px);
}
.student-scroll-img-wrap--half {
  width: min(50%, 340px);
}
.student-scroll-img-wrap--cloud {
  width: min(75%, 390px);
}
.student-scroll-img-wrap--focus-filter {
  width: min(70%, 476px);
}
.student-scroll-img-wrap--transparent {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.student-scroll-img-wrap img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.student-scroll-img-wrap img.student-scroll-focus-filter-img {
  width: 70%;
  margin: 0 auto;
}
.student-scroll-img-caption,
.student-scroll-caption,
.student-scroll-fine-print,
.student-scroll-hebrew-caption {
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.45;
  text-align: center !important;
}
.student-scroll-caption--left {
  text-align: left !important;
}
.student-scroll-subhead {
  margin: 22px 0 8px;
  color: var(--purple);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
  text-align: left;
}
.student-scroll-pull-card {
  margin: 20px 0;
  padding: 20px;
  border-left: 6px solid var(--purple);
  background: color-mix(in srgb, var(--purple) 9%, #fff);
}
.student-scroll-callout {
  border-left: 6px solid var(--purple);
  background: color-mix(in srgb, var(--purple) 9%, #fff);
}
.student-scroll-pull-card p {
  margin: 0;
  font-size: 24px !important;
  font-weight: 900;
  line-height: 1.25 !important;
  color: var(--text) !important;
}
.student-scroll-card,
.student-scroll-callout,
.student-scroll-sound-map-card,
.student-scroll-pause-card,
.student-scroll-seq-card {
  margin: 18px 0;
  padding: 18px;
}
.student-scroll-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 18px;
  overflow-x: hidden;
}
.tutorial-inline-link.student-scroll-pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 0;
  min-height: 38px;
  padding: 9px 16px;
  border: 1px solid var(--purple);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.tutorial-inline-link.student-scroll-pill-link--primary {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 6px 18px rgba(75, 42, 102, 0.16);
}
.tutorial-inline-link.student-scroll-pill-link--secondary {
  background: #fff;
  color: var(--purple);
  box-shadow: none;
}
.tutorial-inline-link.student-scroll-pill-link--primary:hover,
.tutorial-inline-link.student-scroll-pill-link--primary:focus-visible {
  color: #fff;
  background: #4b2a66;
}
.tutorial-inline-link.student-scroll-pill-link--secondary:hover,
.tutorial-inline-link.student-scroll-pill-link--secondary:focus-visible {
  color: #4b2a66;
  background: color-mix(in srgb, var(--purple) 8%, #fff);
}
.student-scroll-graduation {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 22px 0 10px;
}
.student-scroll-graduation::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 24px;
  width: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--purple) 18%, #fff);
}
.student-scroll-grad-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 76px;
  border: 1.5px solid rgba(96, 26, 119, 0.22);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
  color: var(--text);
  text-align: left;
  box-shadow: 0 6px 18px rgba(75, 42, 102, 0.07);
  cursor: pointer;
}
.student-scroll-grad-step:hover,
.student-scroll-grad-step:focus-visible {
  border-color: var(--purple);
  background: color-mix(in srgb, var(--purple) 7%, #fff);
}
.student-scroll-grad-step.is-optional {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.78);
}
.student-scroll-grad-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 21px;
  font-weight: 900;
}
.student-scroll-grad-step.is-optional .student-scroll-grad-num {
  background: color-mix(in srgb, var(--purple) 62%, #fff);
}
.student-scroll-grad-copy {
  display: grid;
  gap: 4px;
}
.student-scroll-grad-title {
  color: var(--purple);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}
.student-scroll-grad-optional {
  color: var(--text-dim);
  font-weight: 800;
  text-transform: none;
}
.student-scroll-grad-sub {
  color: var(--text-mid);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.student-scroll-grad-note {
  margin: 8px 0 0 !important;
  color: var(--text-dim) !important;
  font-size: 14px !important;
  text-align: center !important;
}
.student-scroll-table-wrap {
  width: 100%;
  margin: 18px 0;
  overflow-x: hidden;
}
.student-scroll-next-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid rgba(75, 42, 102, 0.12);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(75, 42, 102, 0.07);
}
.student-scroll-next-table th,
.student-scroll-next-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(75, 42, 102, 0.1);
  text-align: left;
  vertical-align: top;
}
.student-scroll-next-table th {
  color: var(--purple);
  font-size: 13px;
  font-weight: 900;
}
.student-scroll-next-table th:first-child,
.student-scroll-next-table td:first-child {
  width: 54px;
  text-align: center;
  color: var(--purple);
  font-weight: 900;
}
.student-scroll-next-table tr:last-child td {
  border-bottom: 0;
}
.student-scroll-card-label {
  margin-bottom: 12px;
  color: var(--purple);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}
.student-scroll-audio-toggle-wrap {
  margin: 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.student-scroll-audio-toggle {
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  padding: 4px;
  border: 1px solid rgba(75, 42, 102, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  margin: 0 auto;
  box-shadow: 0 5px 16px rgba(75, 42, 102, 0.08);
}
.student-scroll-audio-toggle-btn,
.student-scroll-tab-btn,
.student-scroll-carousel-btn,
.student-scroll-seq-reset {
  border: 0;
  border-radius: 999px;
  padding: 8px 13px;
  background: transparent;
  color: var(--purple);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.student-scroll-audio-toggle-btn.active,
.student-scroll-tab-btn.active {
  background: var(--purple);
  color: #fff;
}
.student-scroll-tab-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 136px;
  min-height: 34px;
  white-space: nowrap;
  line-height: 1.15;
  text-align: center;
}
.student-scroll-tab-term {
  display: block;
  font-size: 12px;
  font-weight: 900;
}
.student-scroll-tab-desc {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
}
.student-scroll-audio-toggle-btn {
  min-width: 136px;
  border-radius: 999px;
}
.student-scroll-audio-toggle-btn:not(.active):hover,
.student-scroll-tab-btn:not(.active):hover {
  background: color-mix(in srgb, var(--purple) 8%, #fff);
}
.student-scroll-audio-note {
  margin: 8px 0 0;
  font-size: 13px !important;
  color: var(--text-dim) !important;
  text-align: center !important;
}
.student-scroll-stage-grid {
  display: grid;
  gap: 12px;
}
.student-scroll-stage-accordion {
  overflow: hidden;
  border: 1px solid rgba(75, 42, 102, 0.14);
  border-radius: 8px;
  background: #fff;
}
.student-scroll-stage-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 0;
  border-left: 6px solid var(--sc, var(--purple));
  background: var(--sc, var(--purple));
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.student-scroll-stage-btn:hover,
.student-scroll-stage-btn.open {
  background: var(--sc, var(--purple));
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.08);
}
.student-scroll-stage-title {
  font-size: 16px;
  font-weight: 900;
}
.student-scroll-stage-desc {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.4;
}
.student-scroll-stage-chevron {
  font-size: 28px;
  color: #fff;
  transform: rotate(90deg);
  transition: transform 0.18s ease;
}
.student-scroll-stage-btn.open .student-scroll-stage-chevron {
  transform: rotate(-90deg);
}
.student-scroll-stage-drawer {
  display: none;
  padding: 0 16px 16px;
}
.student-scroll-stage-drawer.open {
  display: block;
}
.student-scroll-drawer-family {
  margin-top: 16px;
}
.student-scroll-drawer-family-label {
  margin-bottom: 8px;
  color: var(--purple);
  font-size: 13px;
  font-weight: 900;
}
.student-scroll-trope-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.student-scroll-trope-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 92px;
  min-height: 86px;
  padding: 8px;
  border: 1px solid rgba(75, 42, 102, 0.14);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.student-scroll-trope-btn:hover,
.student-scroll-trope-btn.playing {
  border-color: var(--purple);
  box-shadow: 0 6px 14px rgba(75, 42, 102, 0.12);
  transform: translateY(-1px);
}
.student-scroll-trope-btn img {
  max-width: 72px;
  max-height: 48px;
  object-fit: contain;
}
.student-scroll-tab-row {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 100%;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid rgba(75, 42, 102, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 5px 16px rgba(75, 42, 102, 0.08);
}
.student-scroll-card .student-scroll-tab-row {
  margin-left: 50%;
  transform: translateX(-50%);
}
.student-scroll-tab-panel {
  display: none;
}
.student-scroll-tab-panel.active {
  display: block;
}
.student-scroll-syl-word-wrap {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 12px;
  margin: 14px auto 8px;
}
.student-scroll-syl-block {
  min-width: 74px;
  padding: 10px 8px;
  border-radius: 8px;
  background: #f8f6f2;
  text-align: center;
}
.student-scroll-syl-block.accented {
  background: color-mix(in srgb, var(--purple) 14%, #fff);
}
.student-scroll-syl-heb,
.student-scroll-heb,
.student-scroll-syl-heb-small {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
  direction: rtl;
}
.student-scroll-syl-heb {
  display: block;
  font-size: 36px;
  line-height: 1.15;
}
.student-scroll-syl-heb-small {
  margin-top: 8px;
  font-size: 30px;
  line-height: 1.15;
  text-align: center;
}
.student-scroll-syl-latin {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}
.student-scroll-syl-heb.accented,
.student-scroll-syl-latin.accented {
  color: var(--purple);
}
.student-scroll-inline-heb {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
  font-size: 1.14em;
  font-style: normal;
  direction: rtl;
}
.student-scroll-siluk-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 14px auto 18px;
}
.student-scroll-siluk-map-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 14px 10px;
  border: 1px solid rgba(75, 42, 102, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(75, 42, 102, 0.07);
  cursor: pointer;
}
.student-scroll-siluk-map-label {
  color: var(--purple);
  font-size: 15px;
  font-weight: 900;
}
.student-scroll-siluk-map {
  display: block;
  width: 100%;
  min-height: 300px;
}
.student-scroll-siluk-map .sm-word-blocks-inner {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 640px) {
  .student-scroll-siluk-compare {
    grid-template-columns: 1fr;
  }
}
.student-scroll-chip-diagram {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0;
}
.student-scroll-chip {
  min-width: 112px;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 900;
  text-align: center;
}
.student-scroll-chip--ready {
  background: #f3d86b;
  color: #4a3d1b;
}
.student-scroll-chip--go {
  background: #7fbc6b;
  color: #15320e;
}
.student-scroll-chip--after {
  background: #b9dda9;
  color: #15320e;
}
.student-scroll-chip-label {
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.student-scroll-chip-arrow {
  color: var(--purple);
  font-size: 28px;
  font-weight: 900;
}
.student-scroll-chip-diagram--mileil {
  flex-wrap: wrap;
  margin: 22px 0;
}
.student-scroll-chip-diagram--mileil .student-scroll-chip {
  min-width: 138px;
}
.student-scroll-rendered-sound-map {
  text-align: center;
}
.student-scroll-sound-map-card {
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.student-scroll-rendered-sound-map .sm-top-actions {
  justify-content: center;
}
.student-scroll-rendered-sound-map .sm-link-btn {
  display: none;
}
.student-scroll-rendered-sound-map .sm-scroll-shell,
.student-scroll-rendered-sound-map .sm-word-blocks-wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.student-scroll-rendered-sound-map .sm-word-blocks-wrapper {
  padding: 0;
}
.student-scroll-rendered-sound-map .sm-word-blocks-inner {
  justify-content: center !important;
}
.student-crash-rendered-map [class*="sm-"] {
  box-shadow: none !important;
}
.student-crash-rendered-map .sm-scroll-shell,
.student-crash-rendered-map .sm-word-blocks-wrapper,
.student-crash-rendered-map .sm-accordion-wrapper,
.student-crash-rendered-map .sm-accordion-label-host,
.student-crash-rendered-map .sm-compact-label,
.student-crash-rendered-map .sm-compact-label-heb,
.student-crash-rendered-map .sm-compact-label-trl,
.student-crash-rendered-map .sm-accordion-toggle-row,
.student-crash-rendered-map .sm-accordion-toggle-btn {
  background: transparent !important;
}
.student-crash-rendered-map [class*="word-block"],
.student-crash-rendered-map [class*="syll"],
.student-crash-rendered-map [class*="note"],
.student-crash-rendered-map [class*="tile"] {
  box-shadow: none !important;
}
.student-crash-rendered-map .word-block,
.student-crash-rendered-map .word-block > div:first-child,
.student-crash-rendered-map .syllable-row,
.student-crash-rendered-map .syllable-pair,
.student-crash-rendered-map .heb-syl,
.student-crash-rendered-map .trl-syl {
  background: transparent !important;
  border: 0 !important;
}
.student-crash-rendered-map .sm-word-blocks-inner {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 8px 18px 14px !important;
  border: 0 !important;
  border-radius: 8px;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(75, 42, 102, 0.07) !important;
}
.student-crash-rendered-map .word-block {
  zoom: 0.85;
  transform: none;
  transform-origin: center top;
}
.student-crash-rendered-map .staff-outer {
  height: 310px;
}
.student-crash-rendered-map .syllable-row {
  padding-top: 40px;
}
.student-scroll-carousel-frame {
  margin: 18px auto 4px;
}
.student-scroll-carousel-frame iframe {
  height: 500px;
}
.sound-map-carousel-shell {
  width: min(100%, 640px);
  margin: 18px auto 16px;
}
.sound-map-carousel {
  overflow: hidden;
  padding: 14px 0 10px;
  text-align: center;
}
.sound-map-carousel-card {
  margin: 0 auto;
  padding: 18px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(75, 42, 102, 0.07);
}
.sound-map-carousel-toggle-wrap {
  margin: 0 auto 12px;
}
.sound-map-carousel-shell--compact .sound-map-carousel-toggle-wrap {
  display: none;
}
.sound-map-carousel-viewport {
  overflow: hidden;
  width: 100%;
}
.sound-map-carousel-track {
  display: flex;
  align-items: stretch;
  transition: transform 0.24s ease;
}
.sound-map-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 4px;
  box-sizing: border-box;
}
.sound-map-carousel-label {
  margin: 0 0 8px;
  color: var(--purple);
  font-size: 19px;
  font-weight: 900;
  text-align: center;
}
.sound-map-carousel-label.is-hebrew {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
  font-size: 35px;
  direction: rtl;
}
.sound-map-carousel-label.is-hebrew.sound-map-carousel-label--large {
  font-size: 44px;
}
#screenStudentCrash .sound-map-carousel-label.is-hebrew {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif !important;
  font-size: 35px !important;
  font-weight: 400 !important;
  line-height: 1.15;
}
#screenStudentCrash .sound-map-carousel-label.is-hebrew.sound-map-carousel-label--large {
  font-size: 44px !important;
}
#screenStudentCrash [dir="rtl"],
#screenStudentCrash .heb-syl,
#screenStudentCrash .student-scroll-syl-heb,
#screenStudentCrash .student-scroll-syl-heb-small,
#screenStudentCrash .student-scroll-heb,
#screenStudentCrash .student-scroll-seq-word-btn,
#screenStudentCrash .sm-compact-label-heb {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
}
#screenStudentCrash .student-scroll-syl-heb.accented {
  font-weight: 400 !important;
}
#screenStudentCrash .student-crash-rendered-map .heb-syl,
#screenStudentCrash .sound-map-carousel-map .heb-syl {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif !important;
  font-weight: 400 !important;
}
.sound-map-carousel-map {
  cursor: pointer;
}
.sound-map-carousel-map .sm-top-actions,
.sound-map-carousel-map .sm-link-btn {
  display: none !important;
}
.sound-map-carousel-map .sm-scroll-shell,
.sound-map-carousel-map .sm-word-blocks-wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.sound-map-carousel-map .sm-word-blocks-wrapper {
  padding: 0;
}
.sound-map-carousel-map .sm-word-blocks-inner {
  justify-content: center !important;
  margin: 0 auto !important;
}
.sound-map-carousel-map.student-crash-rendered-map .sm-word-blocks-inner {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.sound-map-carousel-map .word-block {
  zoom: 0.82;
  transform-origin: center top;
}
.sound-map-carousel-play {
  margin: 8px auto 0;
  padding: 8px 18px;
  border: 1px solid rgba(75, 42, 102, 0.25);
  border-radius: 999px;
  background: #fff;
  color: var(--purple);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.sound-map-carousel-play:hover,
.sound-map-carousel-play.playing {
  background: var(--purple);
  color: #fff;
}
.sound-map-carousel-controls {
  position: relative;
  width: 100%;
  margin-top: 10px;
  justify-content: center;
}
.sound-map-carousel-controls .sound-map-carousel-nav {
  flex: 0 0 auto;
}
.sound-map-carousel-controls .sound-map-carousel-dots {
  flex: 0 0 auto;
}
.sound-map-carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(75, 42, 102, 0.24);
  cursor: pointer;
}
.sound-map-carousel-dots button.active {
  background: var(--purple);
  transform: scale(1.25);
}
.sound-map-carousel-counter {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  min-width: 44px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.student-scroll-heb-xl {
  display: block;
  margin: 14px 0;
  color: var(--purple);
  font-size: 48px;
  line-height: 1.2;
  text-align: center;
}
.student-scroll-method-steps {
  display: grid;
  gap: 0;
  margin: 18px 0;
}
.student-scroll-method-step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
}
.student-scroll-method-num-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.student-scroll-method-num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-weight: 900;
}
.student-scroll-method-vline {
  flex: 1;
  width: 2px;
  min-height: 34px;
  background: rgba(75, 42, 102, 0.2);
}
.student-scroll-method-body {
  padding-bottom: 18px;
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.6;
}
.student-scroll-method-walkthrough {
  margin: 22px 0;
}
.student-scroll-method-scroll-track {
  position: relative;
}
.student-scroll-method-stage {
  position: relative;
  overflow: hidden;
  height: clamp(520px, 72vh, 680px);
  border: 1px solid rgba(75, 42, 102, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(75, 42, 102, 0.07);
}
.student-scroll-method-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 76px 166px;
  overflow: hidden;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}
.student-scroll-method-panel > .student-scroll-method-soundfont-control {
  position: absolute;
  left: 18px;
  bottom: 252px;
  z-index: 3;
}
.student-scroll-method-panel[data-student-method-panel="4"] > .student-scroll-method-soundfont-control {
  position: static;
}
.student-scroll-method-panel.active {
  opacity: 1;
  pointer-events: auto;
}
.student-scroll-method-click-controls {
  display: grid;
  grid-template-columns: auto minmax(86px, 1fr) auto;
  align-items: center;
  justify-content: center;
  column-gap: 12px;
  row-gap: 5px;
  min-height: 76px;
  padding: 8px 14px 10px;
  border-top: 1px solid rgba(75, 42, 102, 0.12);
  background: #fff;
}
.student-scroll-method-control-copy {
  grid-column: 1 / -1;
  color: var(--purple);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}
.student-scroll-method-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 76px;
  min-height: 34px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  cursor: pointer;
}
.student-scroll-method-nav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.student-scroll-method-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.student-scroll-method-step-count {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.student-scroll-method-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.student-scroll-method-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(75, 42, 102, 0.22);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.student-scroll-method-dots button.active {
  background: var(--purple);
  transform: scale(1.25);
}
.student-scroll-method-footer {
  margin: 0;
  min-height: 166px;
  padding: 18px 24px;
  background: var(--purple);
  color: #fff;
  font-size: 15px;
  line-height: 1.55;
  overflow: hidden;
}
.student-scroll-method-footer-step {
  margin-bottom: 6px;
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
}
.student-scroll-method-footer strong,
#screenStudentCrash .student-scroll-method-footer strong {
  color: #fff;
}
.student-scroll-method-visual {
  position: relative;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #f8f5fb;
}
.student-scroll-method-visual--trope-map {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 20px 20px;
}
.student-scroll-method-trope-corner {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  display: grid;
  grid-template-columns: 50px auto;
  align-items: center;
  gap: 10px;
  max-width: min(240px, calc(100% - 36px));
  padding: 8px 10px;
  border: 1px solid rgba(75, 42, 102, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  text-align: left;
}
.student-scroll-method-trope-corner img {
  width: 50px;
  height: 42px;
  object-fit: contain;
}
.student-scroll-method-soundfont-btn {
  margin: 0;
}
.student-scroll-method-icon-control {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 104px;
  color: var(--purple);
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}
.student-scroll-method-icon-label {
  display: block;
  width: 100%;
  color: var(--purple);
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  white-space: nowrap;
}
.student-scroll-method-soundfont-btn.playing {
  border-color: var(--blue);
  color: var(--blue);
}
.student-scroll-method-soundfont-btn img {
  filter: none;
}
.student-scroll-method-siluk-map {
  justify-self: center;
  min-height: 260px;
  width: min(100%, 500px);
}
.student-scroll-method-siluk-map .sm-word-blocks-inner {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
#studentMethodSilukStep1Map .sm-word-blocks-inner,
#studentMethodSilukStep3Map .sm-word-blocks-inner,
#studentMethodLemorSoundMap .sm-word-blocks-inner {
  transform: translateY(-22px);
}
#studentMethodSilukStep1Map .sm-word-blocks-inner,
#studentMethodSilukStep3Map .sm-word-blocks-inner,
#studentMethodLemorSoundMap .sm-word-blocks-inner {
  transform: translateY(-18px);
}
#studentMethodSilukStep1Map .staff-outer,
#studentMethodSilukStep3Map .staff-outer,
#studentMethodLemorSoundMap .staff-outer {
  height: 252px;
}
#studentMethodSilukStep1Map .bracket-svg,
#studentMethodSilukStep3Map .bracket-svg,
#studentMethodLemorSoundMap .bracket-svg {
  top: 252px !important;
}
#studentMethodSilukStep1Map .syllable-row,
#studentMethodSilukStep3Map .syllable-row,
#studentMethodLemorSoundMap .syllable-row {
  padding-top: 36px;
}
#studentMethodSilukStep1Map .sm-scroll-shell,
#studentMethodSilukStep3Map .sm-scroll-shell,
#studentMethodLemorSoundMap .sm-scroll-shell,
#studentMethodSilukStep1Map .sm-word-blocks-wrapper,
#studentMethodSilukStep3Map .sm-word-blocks-wrapper,
#studentMethodLemorSoundMap .sm-word-blocks-wrapper,
#studentMethodSilukStep1Map .sm-word-blocks-inner,
#studentMethodSilukStep3Map .sm-word-blocks-inner,
#studentMethodLemorSoundMap .sm-word-blocks-inner {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#studentMethodSilukStep1Map .sm-word-blocks-inner,
#studentMethodSilukStep3Map .sm-word-blocks-inner,
#studentMethodLemorSoundMap .sm-word-blocks-inner {
  padding: 0 !important;
  margin: 0 auto !important;
  justify-content: center !important;
}
.student-scroll-method-kicker {
  display: block;
  color: var(--purple);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.student-scroll-method-trope-name {
  margin-top: 2px;
  color: var(--text);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}
.student-scroll-method-word-stack {
  position: relative;
  display: grid;
  place-content: center;
  gap: 12px;
  min-height: 100%;
  padding: 32px 16px 24px;
  background: #f8f5fb;
  text-align: center;
}
.student-scroll-method-syllable-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(96px, auto));
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 6px;
  align-items: end;
  justify-content: center;
}
.student-scroll-method-word-demo {
  display: block;
  position: relative;
  color: var(--purple);
  font-family: 'SBL Hebrew', 'Times New Roman', serif;
  font-size: 76px;
  line-height: 1.2;
}
.student-scroll-method-word-demo:first-child::after {
  content: "־";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--purple);
  font-size: 0.8em;
}
.student-scroll-method-translit {
  display: block;
  position: relative;
  color: var(--text-mid);
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: none;
}
.student-scroll-method-syllable-grid .student-scroll-method-translit:nth-child(3)::after {
  content: "-";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-mid);
}
.student-scroll-method-map-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--text-mid);
  font-size: 13px;
  font-weight: 800;
}
.student-scroll-method-practice-demo {
  position: relative;
  display: grid;
  gap: 12px;
  align-items: center;
  align-content: center;
  justify-items: center;
  padding: 34px 20px 20px;
  overflow: hidden;
  background: #f8f5fb;
}
.student-scroll-method-final-word {
  color: var(--purple);
  font-size: 48px;
  line-height: 1.2;
}
.student-scroll-method-tool-row {
  position: absolute;
  left: 14px;
  top: 92px;
  bottom: 252px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  gap: 4px;
}
.student-scroll-method-tool-row--compact {
  justify-content: center;
  gap: 12px;
}
.student-scroll-method-tool-row .action-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}
.student-scroll-method-waveform-btn .action-btn-icon {
  width: 28px;
  height: 28px;
  object-fit: cover;
}
.student-scroll-method-record-btn .action-btn-icon {
  width: 19px;
  height: 19px;
}
.student-scroll-method-park-btn .action-btn-icon {
  width: 21px;
  height: 21px;
}
@media (max-width: 640px) {
  .student-scroll-method-stage {
    height: min(92vh, 820px);
    min-height: 760px;
  }
  .student-scroll-method-visual {
    min-height: 150px;
  }
  .student-scroll-method-visual--trope-map {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 6px 10px;
  }
  .student-scroll-method-panel {
    grid-template-rows: auto minmax(342px, 1fr) 82px 82px 154px;
  }
  .student-scroll-method-trope-corner {
    position: static;
    z-index: 1;
    grid-row: 1;
    justify-self: center;
    width: auto;
    max-width: calc(100% - 28px);
    margin: 10px auto 2px;
    grid-template-columns: 42px auto;
    gap: 8px;
    padding: 6px 8px;
    text-align: left;
  }
  .student-scroll-method-trope-corner img {
    width: 42px;
    height: 34px;
  }
  .student-scroll-method-visual,
  .student-scroll-method-word-stack,
  .student-scroll-method-practice-demo {
    grid-row: 2;
    min-height: 342px;
    overflow: hidden;
    width: calc(100% - 28px);
    margin: 6px auto 8px;
    border: 1px solid rgba(75, 42, 102, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
  }
  .student-scroll-method-kicker {
    font-size: 8.5px;
  }
  .student-scroll-method-trope-name {
    font-size: 17px;
  }
  .student-scroll-method-panel > .student-scroll-method-soundfont-control,
  .student-scroll-method-panel > .student-scroll-method-tool-row {
    position: static;
    grid-row: 3;
    align-self: center;
    justify-self: center;
    z-index: 1;
  }
  .student-scroll-method-panel > .student-scroll-method-soundfont-control {
    width: auto;
    margin: 8px auto 6px;
  }
  .student-scroll-method-tool-row {
    width: min(100%, 330px);
    margin: 8px auto 6px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    min-height: 0;
  }
  .student-scroll-method-icon-control {
    width: 76px;
    flex: 0 1 76px;
  }
  .student-scroll-method-icon-label {
    font-size: 8px;
    white-space: normal;
    min-height: 20px;
  }
  .student-scroll-method-tool-row .action-btn,
  .student-scroll-method-soundfont-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }
  .student-scroll-method-tool-row .action-btn-icon,
  .student-scroll-method-soundfont-btn .action-btn-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
  }
  .student-scroll-method-waveform-btn .action-btn-icon {
    width: 40px;
    height: 40px;
    object-fit: cover;
  }
  .student-scroll-method-record-btn .action-btn-icon {
    width: 29px;
    height: 29px;
  }
  .student-scroll-method-park-btn .action-btn-icon {
    width: 32px;
    height: 32px;
  }
  .student-scroll-method-trope-identity {
    gap: 14px;
  }
  .student-scroll-method-siluk-map {
    min-height: 332px;
    max-height: 100%;
  }
  .student-scroll-method-word-stack {
    padding: 24px 10px 18px;
  }
  .student-scroll-method-word-demo {
    font-size: 56px;
  }
  .student-scroll-method-translit {
    font-size: 19px;
  }
  .student-scroll-method-final-word {
    font-size: 40px;
  }
  .student-scroll-method-footer {
    min-height: 154px;
    padding: 14px 18px;
    font-size: 14px;
  }
  .student-scroll-method-footer-step {
    font-size: 23px;
  }
  .student-scroll-method-click-controls {
    min-height: 82px;
    padding: 8px 12px;
    column-gap: 8px;
  }
  .student-scroll-method-panel > .student-scroll-method-soundfont-control {
    bottom: auto;
  }
  .student-scroll-method-nav-btn {
    min-width: 68px;
    padding: 8px 10px;
  }
}
.student-scroll-sound-map-row {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 22px;
  margin: 14px auto;
  text-align: center;
}
.student-scroll-syl-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 78px;
}
.student-scroll-note-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.student-scroll-note-circle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #7fbc6b;
  color: #11310d;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.student-scroll-note-circle--trailing {
  opacity: 0.62;
}
.student-scroll-note-circle.playing {
  box-shadow: 0 0 0 4px rgba(127, 188, 107, 0.22);
}
.student-scroll-word-carousel {
  overflow: hidden;
}
.student-scroll-carousel-viewport {
  overflow: hidden;
  width: 100%;
}
.student-scroll-carousel-track {
  display: flex;
  transition: transform 0.24s ease;
}
.student-scroll-carousel-slide {
  flex: 0 0 100%;
}
.student-scroll-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}
.student-scroll-carousel-btn {
  background: var(--purple);
  color: #fff;
  min-width: 36px;
}
.student-scroll-carousel-dots {
  display: flex;
  gap: 5px;
}
.student-scroll-carousel-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(75, 42, 102, 0.24);
}
.student-scroll-carousel-dots span.active {
  background: var(--purple);
}
.student-scroll-pause-row,
.student-scroll-seq-word-row,
.student-scroll-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.student-scroll-sequence-section .student-scroll-trope-row,
.student-scroll-sequence-section .student-scroll-pause-row,
.student-scroll-sequence-section .student-scroll-seq-word-row {
  justify-content: flex-start;
}
.student-scroll-sequence-section .student-scroll-seq-word-row {
  direction: rtl;
  flex-direction: row;
  justify-content: center;
}
.student-scroll-sequence-intro {
  margin-top: 22px;
}
.student-scroll-sequence-section .student-scroll-trope-btn {
  border: 0;
  box-shadow: none;
  min-height: auto;
  padding-top: 2px;
  padding-bottom: 2px;
}
.student-scroll-sequence-section .student-scroll-trope-btn:hover,
.student-scroll-sequence-section .student-scroll-trope-btn.playing {
  border-color: transparent;
  box-shadow: none;
}
.student-scroll-pause-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.student-scroll-pause-badge {
  border-radius: 999px;
  padding: 5px 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.student-scroll-pause-badge.stop {
  background: #d62222;
}
.student-scroll-pause-badge.flow {
  background: #678b58;
}
.student-scroll-sequence-section .student-scroll-pause-badge,
.student-scroll-sequence-section .student-scroll-pause-badge.stop,
.student-scroll-sequence-section .student-scroll-pause-badge.flow {
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.2;
}
.student-scroll-pause-footer {
  margin-top: 12px;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
}
.student-scroll-seq-word-btn {
  border: 1px solid rgba(75, 42, 102, 0.14);
  border-radius: 8px;
  padding: 12px 16px;
  background: #fff;
  color: var(--text);
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
  font-size: 30px;
  line-height: 1.2;
  cursor: pointer;
}
.student-scroll-sequence-section .student-scroll-seq-word-btn {
  border: 0;
  box-shadow: none;
}
.student-scroll-seq-word-btn--phrase {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  direction: rtl;
  text-align: center;
  word-spacing: 0.18em;
  width: 100%;
}
.student-crash-sequence-carousel .student-scroll-carousel-viewport {
  overflow: hidden;
}
.student-crash-sequence-slide-btn {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 150px;
  padding: 12px 14px;
  white-space: normal;
}
.student-crash-sequence-slide-title {
  color: var(--purple);
  direction: ltr;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}
.student-crash-sequence-slide-btn .student-scroll-seq-word-row {
  width: 100%;
}
.student-crash-sequence-slide-btn .student-scroll-seq-word-label {
  color: var(--purple);
}
.student-crash-sequence-translit,
.student-crash-sequence-ref {
  direction: ltr;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.25;
}
.student-crash-sequence-translit {
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
}
.student-crash-sequence-ref {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
}
.student-scroll-seq-word-unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.student-scroll-seq-word-heb {
  font-size: 43px;
  line-height: 1.1;
}
.student-scroll-seq-word-label {
  color: var(--text-dim);
  direction: ltr;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}
.student-scroll-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15em;
  height: 2.15em;
  border: 2px solid var(--border2);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(75, 42, 102, 0.08);
  box-sizing: border-box;
  overflow: hidden;
  vertical-align: -0.62em;
}
.student-scroll-inline-icon img {
  display: block;
  width: 94%;
  height: 94%;
  max-width: none;
  object-fit: contain;
  flex: 0 0 auto;
}
.student-scroll-seq-word-btn.active {
  border-color: var(--purple);
  background: color-mix(in srgb, var(--purple) 10%, #fff);
  color: var(--purple);
}
.student-scroll-seq-hint {
  margin: 12px 0 0;
  font-size: 13px !important;
  text-align: center !important;
}
.student-scroll-seq-reset {
  display: block;
  margin: 12px auto 0;
  background: var(--purple);
  color: #fff;
}
.student-scroll-list {
  margin: 12px 0 18px;
  padding: 0 32px 0 54px;
}
.student-scroll-checklist {
  list-style: none;
  margin: 14px 0;
  padding: 0;
}
.student-scroll-checklist li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 8px;
}
.student-scroll-checklist li::before {
  content: "→";
  flex-shrink: 0;
  color: var(--purple);
  font-weight: 900;
}
.student-scroll-closing {
  margin: 28px 0 10px;
  color: var(--purple) !important;
  font-size: 24px !important;
  font-weight: 900;
  text-align: center !important;
}
.student-scroll-closing span {
  display: block;
  margin-top: 6px;
  color: var(--text-mid);
  font-size: 14px;
  font-weight: 400;
}
.student-scroll-actions .wiz-btn {
  width: min(100%, 210px);
}
.student-scroll-reveal {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.student-scroll-reveal.visible {
  opacity: 1;
  transform: none;
}
.tutorial-caption {
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  margin-top: -4px;
}
.wiz-yn-pending .wiz-yn-option {
  background: var(--bg);
  color: var(--text-dim);
  border-color: var(--border);
}
.wiz-yn-label {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 12px;
}
.wiz-yn-options {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.wiz-yn-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 108px;
  justify-content: center;
  padding: 12px 16px;
  border: 1.5px solid var(--border2);
  border-radius: 12px;
  background: var(--white);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.wiz-yn-option:has(input[type="radio"]:checked) {
  border-color: var(--purple);
  background: rgba(85, 61, 123, 0.07);
  color: var(--purple);
}
.wiz-yn-option input[type="radio"] {
  margin: 0;
  accent-color: var(--purple);
}

.wiz-parasha-wrap {
  width: 100%; max-width: 540px; margin-top: 0;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 20px;
}
.wiz-select {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--white); font-family: 'Montserrat', sans-serif;
  font-size: 14px; color: var(--text); cursor: pointer;
}
.wiz-select:focus { outline: none; border-color: var(--purple); }
.wiz-verse-row { margin-top: 14px; }
.wiz-verse-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px;
}
.wiz-verse-inputs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wiz-verse-sub { font-size: 12px; color: var(--text-dim); font-weight: 500; }
.wiz-verse-sep { color: var(--text-dim); font-weight: 600; }
.wiz-verse-input {
  width: 56px; padding: 6px 8px; border: 1.5px solid var(--border);
  border-radius: 6px; font-family: 'Montserrat', sans-serif;
  font-size: 13px; text-align: center;
}
.wiz-verse-input:focus { outline: none; border-color: var(--purple); }

.wiz-haft-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.wiz-haft-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim); min-width: 60px;
}
.wiz-toggle-row { display: flex; gap: 6px; flex-wrap: wrap; }
.wiz-toggle-btn {
  padding: 6px 14px; border-radius: 16px; border: 1.5px solid var(--border);
  background: var(--white); font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 500; cursor: pointer; color: var(--text); transition: all 0.18s;
  white-space: nowrap;
}
.wiz-toggle-btn:hover { border-color: var(--purple); color: var(--purple); }
.wiz-toggle-btn.active { background: var(--purple); color: #fff; border-color: var(--purple); }
.wiz-ref-preview { margin-top: 10px; font-size: 13px; color: var(--text-dim); font-style: italic; min-height: 18px; }

#wiz1a .wiz-haft-row,
#wiz1b .wiz-haft-row {
  justify-content: center;
  flex-wrap: nowrap;
  margin-bottom: 18px;
}

#wiz1a .wiz-haft-label,
#wiz1b .wiz-haft-label {
  min-width: 0;
}

#wiz1a .wiz-toggle-row,
#wiz1b .wiz-toggle-row,
#wiz1a .wiz-aliyah-row,
#wiz1b .wiz-aliyah-row {
  justify-content: center;
  width: 100%;
}

#wiz1b #wizHaftTraditionRow {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

#wiz1b #wizHaftTraditionRow .wiz-haft-label {
  display: block;
  min-width: 0;
  text-align: center;
}

#wiz1b #wizHaftTraditionRow .wiz-toggle-row {
  width: auto;
  justify-content: center;
  margin-inline: auto;
}

#wiz1b #wizHaftTraditionRow::after {
  content: "";
  display: block;
  width: min(100%, 420px);
  height: 1px;
  margin: 8px auto 0;
  background: var(--border);
}

#wiz1a .wiz-nav,
#wiz1b .wiz-nav {
  justify-content: center;
  gap: 28px;
}

@media (max-width: 640px) {
  #wiz1a .wiz-toggle-btn,
  #wiz1b .wiz-toggle-btn {
    padding: 6px 8px;
  }
}

.wiz-filter-wrap {
  width: 100%; max-width: 540px; margin-top: 0;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 20px;
}
.wiz-filter-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.wiz-filter-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-dim);
}
.wiz-select-sm {
  padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 6px;
  background: var(--white); font-family: 'Montserrat', sans-serif;
  font-size: 13px; color: var(--text); cursor: pointer; min-width: 120px;
}
.wiz-select-sm:focus { outline: none; border-color: var(--purple); }

.wiz-seq-list {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 0; width: 100%; max-width: 540px;
}
.wiz-seq-btn {
  width: 320px; padding: 12px 20px; border-radius: 8px;
  border: 1.5px solid var(--border2); background: var(--white); color: var(--text);
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500;
  cursor: pointer; text-align: right; transition: all 0.18s;
}
.wiz-seq-btn:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-dim); }
.wiz-seq-btn.selected { background: var(--purple); color: #fff; border-color: var(--purple); }
.wiz-seq-btn.etnachta-sel.selected { background: var(--purple); border-color: var(--purple); }

.wiz-timer-row {
  display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin: 12px 0;
}
.wiz-timer-field { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wiz-timer-sep { font-size: 28px; font-weight: 300; color: var(--text-dim); padding-bottom: 4px; }

/* ═══════════════════════════════════════
   PRACTICE SCREEN
═══════════════════════════════════════ */
.phrase-display {
  display: flex; flex-direction: row;
  direction: rtl; /* first reading word on right */
  justify-content: center; align-items: flex-start;
  gap: 4px; flex-wrap: wrap;
  padding: 48px 8px 16px; min-height: 110px;
}
.phrase-word {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
  font-size: 52px; line-height: 1.2; direction: rtl;
  cursor: pointer; transition: color 0.2s, opacity 0.2s;
  padding: 10px 6px;
}
.phrase-word:hover { color: var(--purple); }
.phrase-word.state-active    { color: var(--text); opacity: 1; }
.phrase-word.state-completed { color: var(--text); opacity: 1; }
.phrase-word.state-pending   { color: var(--text); opacity: 0.3; }
.phrase-sep {
  color: var(--text-dim); font-size: 18px; opacity: 0.4;
  align-self: flex-start; padding-top: 14px; direction: ltr;
}
.phrase-word-wrap {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
}
.phrase-word-radio {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 2px solid var(--purple);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.phrase-word-radio:checked {
  background: var(--purple);
}

.action-row {
  display: flex; justify-content: center; align-items: center; gap: clamp(3px, 1.2vw, 9px);
  padding: 10px 0 6px; flex-wrap: nowrap;
  width: 100%;
  margin: 0 auto;
}
/* Circular tool buttons — matches Siluk practice app style */
.action-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--border2); background: var(--white);
  color: var(--text-mid);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  flex-shrink: 0; flex-grow: 0; min-width: 48px; min-height: 48px;
  overflow: hidden; box-sizing: border-box;
  outline: none; -webkit-tap-highlight-color: transparent;
  padding: 0;
  line-height: 1;
  transform: scale(1);
}
.action-btn:focus, .action-btn:focus-visible { outline: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .action-btn:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-dim); }
}
.action-btn:active { transform: scale(0.92); }
.action-btn.active { background: var(--purple); color: #fff; border-color: var(--purple); }
.action-btn.playing { border-color: var(--blue); color: var(--blue); }
.action-btn.recording { background: #c0392b; color: #fff; border-color: #c0392b; animation: rec-pulse 1.1s infinite; }
.action-btn.loading { border-color: var(--gold); color: var(--gold); animation: rec-pulse 1.1s infinite; }
.action-btn:disabled,
.action-btn.is-unavailable {
  opacity: 0.4;
  cursor: default;
}
@keyframes rec-pulse { 0%,100%{opacity:1} 50%{opacity:0.65} }
.action-btn svg { display: block; }
.action-btn svg.action-btn-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.action-btn img { display: block; }
.action-btn-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
}
#btnWaveform .action-btn-icon {
  width: 40px;
  height: 40px;
  object-fit: cover;
}
#btnPlayTrope .action-btn-icon {
  width: 44px;
  height: 44px;
  object-fit: cover;
}
#btnShowMap .action-btn-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
#btnRecord .action-btn-icon {
  width: 28px;
  height: 28px;
}
#btnParkWord .action-btn-icon {
  width: 30px;
  height: 30px;
}
#btnPracticeTropeSounds .action-btn-icon {
  width: 35px;
  height: 35px;
  object-fit: contain;
}
#btnPracticeTropeSounds .action-btn-icon[src*="logo_no_bg_icon"] {
  filter: brightness(0);
}
.action-btn-label { display: none; }
.action-row .action-btn {
  width: clamp(40px, 13vw, 48px);
  height: clamp(40px, 13vw, 48px);
  min-width: clamp(40px, 13vw, 48px);
  min-height: clamp(40px, 13vw, 48px);
}

/* ─── CONTEXTUAL HELP TOGGLE ─── */
.help-toggle-btn {
  position: absolute;
  bottom: 34px;
  left: 16px;
  width: 26px;
  height: 26px;
  background: transparent;
  border: 0;
  color: var(--purple);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 5;
  display: none;
  overflow: visible;
}
#practiceCard > .help-toggle-btn,
#wizLearnDrawer .learn-micro-panel > .help-toggle-btn {
  display: flex;
}
.practice-card.trope-sounds-mode > .help-toggle-btn,
.practice-card.trope-sounds-sequence-mode > .help-toggle-btn {
  display: flex !important;
  z-index: 40;
}
.help-toggle-mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--purple);
  color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
}
.help-toggle-label {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  color: var(--purple);
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  pointer-events: none;
  white-space: normal;
}
.help-toggle-label span {
  display: block;
}
@media (max-width: 640px) and (orientation: portrait) {
  #screenPractice #practiceCard:not(.trope-sounds-mode):not(.trope-sounds-sequence-mode) > .help-toggle-btn {
    top: 14px;
    bottom: auto;
    left: 16px;
  }
  #screenPractice #practiceCard:not(.trope-sounds-mode):not(.trope-sounds-sequence-mode) > .help-toggle-btn .help-toggle-label {
    top: 30px;
  }
  #screenPractice #practiceCard:not(.trope-sounds-mode):not(.trope-sounds-sequence-mode) .session-status-bar {
    top: 14px;
    left: 52px;
  }
}
.help-toggle-btn.on .help-toggle-mark {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}
.help-toggle-btn::before {
  content: '';
  position: absolute;
  inset: -9px;
}

.action-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}
.action-row .action-btn-wrap {
  width: clamp(42px, 12vw, 58px);
}
#practiceCard .action-row .help-label {
  display: none;
  min-height: 0;
  margin: 0;
}
#practiceCard.help-labels-on .action-row .help-label {
  display: block;
  min-height: 22px;
  margin: 4px auto 0;
}
#practiceCard.sequence-helper-labels-disabled .help-label {
  display: none !important;
  min-height: 0;
  margin: 0;
}
#practiceCard.help-labels-on .phrase-display {
  padding-top: 70px;
}
#practiceCard.help-labels-on.sequence-helper-labels-disabled .phrase-display {
  padding-top: 0;
}
.learn-micro-actions {
  max-width: 390px;
}
.learn-micro-actions .action-btn-wrap {
  width: clamp(44px, 16vw, 70px);
}
.learn-micro-actions .help-label {
  display: none;
  min-height: 0;
  margin: 0;
}
.help-labels-on .learn-micro-actions .help-label {
  display: block;
  min-height: 22px;
  margin: 4px auto 0;
}
.learn-micro-panel.sequence-helper-labels-disabled .help-label {
  display: none !important;
  min-height: 0;
  margin: 0;
}
.session-help-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}
.action-btn-wrap:has(.action-btn[style*="display:none"]) {
  display: none;
}
.help-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 9px;
  color: var(--purple);
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  max-width: 70px;
  margin: 4px auto 0;
  opacity: 0;
  transition: opacity 150ms ease;
  min-height: 22px;
  pointer-events: none;
}
.help-label span {
  display: block;
}
.help-labels-on .help-label {
  opacity: 1;
}
@media (min-width: 768px) {
  .help-label {
    font-size: 10px;
    max-width: 84px;
  }
}

/* ─── SPECIAL TROPE CONCEPT NOTES ─── */
.concept-notes {
  position: relative;
  width: min(100%, 520px);
  margin: 10px auto 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  text-align: left;
}
.concept-notes-learn {
  margin-top: -28px;
  margin-bottom: 16px;
  padding: 0 46px;
  align-items: stretch;
}
#practiceConceptNotes {
  width: 100%;
}
#practiceConceptNotes .concept-notes {
  margin-top: 2px;
  margin-bottom: 8px;
}
.concept-note-card {
  position: relative;
  width: 100%;
  padding: 0 28px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 6px;
  row-gap: 2px;
  align-items: start;
}
.concept-note-placement {
  background: transparent;
}
.concept-note-lookalike {
  background: transparent;
}
.concept-note-detail {
  background: transparent;
}
.concept-note-label {
  font-size: 10px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.concept-note-placement .concept-note-label {
  color: var(--foundational, #f81c1c);
}
.concept-note-lookalike .concept-note-label {
  color: var(--blue);
}
.concept-note-detail .concept-note-label {
  color: var(--purple);
}
.concept-note-body {
  font-size: 11px;
  line-height: 1.35;
  font-style: italic;
  color: #3f3746;
  grid-column: 2;
}
.concept-note-placement .concept-note-body {
  color: var(--foundational, #f81c1c);
}
.concept-note-lookalike .concept-note-body {
  color: var(--blue);
}
.concept-note-detail .concept-note-body {
  color: var(--purple);
}
.concept-note-hebrew-glyph {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
  font-size: 2.75em;
  font-style: normal;
  line-height: 0;
  vertical-align: -0.15em;
}
.concept-notes-close {
  position: static;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #7b6a87;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  padding: 0;
  margin-top: -3px;
}
.concept-note-placement .concept-notes-close {
  color: var(--foundational, #f81c1c);
}
.concept-note-lookalike .concept-notes-close {
  color: var(--blue);
}
.concept-note-detail .concept-notes-close {
  color: var(--purple);
}
.concept-notes-close:hover,
.concept-notes-close:focus-visible {
  background: rgba(98, 56, 134, 0.12);
  color: var(--purple);
}
.concept-notes-show {
  align-self: center;
  border: 1px solid #e31b23;
  border-radius: 999px;
  background: #e31b23;
  color: #fff;
  font: 500 11px/1 'Montserrat', sans-serif;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.concept-notes-show:hover,
.concept-notes-show:focus-visible {
  background: #c9141b;
  border-color: #c9141b;
  color: #fff;
}

#wizLearnDrawer {
  padding-bottom: 42px;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
#helpToggleIntroTooltip {
  position: absolute;
  background: var(--purple);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 100;
  transform: translateY(0);
}
#helpToggleIntroTooltip.visible {
  opacity: 1;
}
#helpToggleIntroTooltip.dismissing {
  opacity: 0;
  transform: translateY(4px);
}
#helpToggleIntroTooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 12px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--purple);
}

/* ─── PRACTICE COACH ─── */
.coach-toggle-wrap {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: none;
  flex-direction: column;
  align-items: center;
  z-index: 5;
}
#practiceCard > .coach-toggle-wrap {
  bottom: 8px;
  right: 8px;
}
#practiceCard > .coach-toggle-wrap .help-label {
  display: none !important;
}
#practiceCard > .coach-toggle-wrap .coach-toggle-btn {
  border: 0;
}
#practiceCard > .coach-toggle-wrap,
#wizLearnDrawer .learn-micro-panel > .coach-toggle-wrap {
  display: flex;
}
.coach-toggle-wrap.is-unavailable {
  display: none !important;
}
.coach-toggle-btn {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.coach-toggle-btn.on {
  background: var(--purple);
  border-color: var(--purple);
}
.coach-toggle-btn img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.coach-toggle-btn.on img {
  filter: brightness(0) invert(1);
}
.coach-toggle-btn::before {
  content: '';
  position: absolute;
  inset: -9px;
}
.coach-toggle-wrap .help-label {
  margin-top: 4px;
}

.practice-coach-panel {
  display: none;
  background: #f3edf6;
  border: 1px solid #d8c8e0;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 36px auto 0;
  position: relative;
  width: min(100%, 520px);
  box-sizing: border-box;
  text-align: left;
}
#practiceCard.help-labels-on .practice-coach-panel {
  margin-top: 92px;
}
#practiceCard:not(.help-labels-on) .practice-coach-panel {
  margin-top: 56px;
}
#wizLearnDrawer .practice-coach-panel {
  margin: 12px auto 10px;
  width: var(--wiz0-control-width);
}
.learn-micro-panel > .practice-coach-panel {
  margin: 10px auto 8px;
  width: 100%;
  padding: 9px 10px;
  box-shadow: none;
}
.learn-micro-panel > .practice-coach-panel .practice-coach-msg {
  font-size: 12px;
  line-height: 1.3;
}
.learn-micro-panel > .practice-coach-panel .practice-coach-hint {
  font-size: 10px;
}
.practice-coach-panel.visible {
  display: block;
}
.practice-coach-panel.visible + .phrase-display {
  padding-top: 10px;
  min-height: 92px;
}
#practiceCard.help-labels-on .practice-coach-panel.visible + .phrase-display {
  padding-top: 18px;
}
.practice-coach-step-num {
  position: absolute;
  top: 8px;
  right: 34px;
  font-size: 10px;
  color: #8a7895;
  font-weight: 500;
}
.practice-coach-close {
  position: absolute;
  top: 5px;
  right: 7px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8a7895;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.practice-coach-close:hover,
.practice-coach-close:focus-visible {
  background: rgba(98, 56, 134, 0.1);
  color: var(--purple);
}
.practice-coach-step-heading {
  font-size: 10px;
  color: var(--purple);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-right: 76px;
}
.practice-coach-msg {
  font-size: 13px;
  color: #333;
  line-height: 1.35;
  margin: 4px 0 8px;
}
.practice-coach-msg strong {
  color: var(--purple);
  font-weight: 500;
}
.practice-coach-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.practice-coach-hint {
  font-size: 11px;
  color: #8a7895;
  flex: 1;
}
.practice-coach-next {
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.practice-coach-next:active {
  opacity: 0.85;
}
.action-btn.coach-highlight {
  box-shadow: 0 0 0 2px var(--purple);
  background: #ede0f3;
}
.action-btn.coach-highlight-record {
  box-shadow: 0 0 0 2px var(--red);
  background: #fdecea;
}

/* ─── VOICE PLAYBACK TOAST ─── */
#voicePlaybackToast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--purple);
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  padding: 10px 16px;
  border-radius: 8px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 400;
}
#voicePlaybackToast.visible {
  opacity: 0.95;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#voicePlaybackToast.fading {
  opacity: 0;
  transition: opacity 300ms ease;
}
.screen-trope-sounds-mode .practice-controls { display: none; }
.practice-card.trope-sounds-mode {
  height: 287px;
  padding: 1px 20px 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  overflow: hidden;
}
.practice-card.trope-sounds-sequence-mode {
  height: 254px;
  gap: 4px;
}
.practice-card.trope-sounds-mode .ref-tag,
.practice-card.trope-sounds-mode .phrase-display,
.practice-card.trope-sounds-mode #btnParkWord,
.practice-card.trope-sounds-mode:not(.trope-sounds-sequence-mode) #btnPracticeTropeSounds {
  display: none;
}
.practice-card.trope-sounds-mode .action-row {
  margin-top: 0;
  gap: 10px;
  padding: 1px 0 12px;
  flex: 0 0 auto;
}
.practice-card.trope-sounds-sequence-mode .action-row {
  padding-top: 0;
}
.trope-sounds-nav {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 4px 0 10px;
}
.screen-trope-sounds-mode .trope-sounds-nav {
  display: flex !important;
}
.trope-sounds-nav-btn {
  min-width: 124px;
  border-radius: 999px;
  text-align: center;
  justify-content: center;
}
.trope-sounds-nav-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.screen-trope-sounds-mode #soundMapArea .sm-word-blocks-wrapper {
  padding: 0 0 18px;
  overflow-x: auto;
  overflow-y: hidden;
}
.screen-trope-sounds-mode #soundMapArea .sm-word-blocks-inner {
  gap: 3px;
  padding: 0 10px;
  margin: 0 auto -72px;
}
.screen-trope-sounds-mode #soundMapArea .sm-controls {
  display: none !important;
}
.screen-trope-sounds-mode #soundMapArea .word-block {
  transform: scale(0.78);
  transform-origin: top center;
  margin-inline: -10px;
}

/* Panel zone — both panels share the same grid cell so switching never moves buttons */
#panelZone {
  display: grid;
  grid-template-areas: "panel";
  margin-bottom: 0;
}
#panelZone > * {
  grid-area: panel;
  margin-bottom: 0;
  min-height: 400px;
  box-sizing: border-box;
}

/* Recording panel — shown below practice card */
.rec-panel {
  display: none; background: var(--white);
  border: 1.5px solid var(--border); border-radius: 16px;
  padding: 20px 24px;
}
.rec-panel.visible { display: block; }
.rec-panel-head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--purple);
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.rec-panel-close {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--border2); background: none;
  color: var(--text-dim); font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rec-panel-close:hover { border-color: var(--purple); color: var(--purple); }
.rec-audio-controls {
  display: flex; gap: 10px; justify-content: center; align-items: center;
}
.btn-rec {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 8px; border: none;
  cursor: pointer; transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 7px;
}
.btn-rec-start {
  background: var(--white); border: 2px solid rgba(160,48,48,0.55); color: var(--red);
}
.btn-rec-start:hover { background: rgba(160,48,48,0.06); }
.btn-rec-start.recording {
  background: var(--red); color: #fff; border-color: var(--red);
  animation: rec-pulse 1.1s infinite;
}
.btn-rec-play {
  background: var(--white); border: 2px solid rgba(96,26,119,0.4); color: var(--purple);
}
.btn-rec-play:hover { background: rgba(96,26,119,0.06); }
.btn-rec-play:disabled { opacity: 0.3; cursor: not-allowed; }
/* Hear Yourself button: red to match Record, signaling "your voice" */
.btn-rec-hear-self {
  background: var(--white);
  border: 2px solid rgba(160,48,48,0.55);
  color: var(--red);
}
.btn-rec-hear-self:hover {
  background: rgba(160,48,48,0.06);
}
.btn-rec-hear-self.playing {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn-rec-hear-self.playing:hover {
  background: var(--red);
  filter: brightness(0.92);
}
.rec-playback-icon {
  display: inline-block;
}
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rec-hint { font-size: 11px; color: var(--text-dim); text-align: center; margin-top: 8px; font-style: italic; }

/* Parking lot button */
.btn-park-inline {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; padding: 7px 16px; border-radius: 6px;
  border: 2px solid rgba(96,26,119,0.4); background: rgba(96,26,119,0.06);
  color: var(--purple); cursor: pointer; display: inline-flex; align-items: center;
  gap: 6px; transition: all 0.12s;
}
.btn-park-inline:hover { background: rgba(96,26,119,0.15); }
.btn-park-inline.parked { background: rgba(96,26,119,0.18); border-color: var(--purple); }

/* Session-end dialog overlay */
.session-dialog-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55); z-index: 1600;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.session-dialog-box {
  background: var(--white); border-radius: 16px;
  padding: 36px 32px 28px; max-width: 380px; width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: dlgPop 0.3s cubic-bezier(0.18,0.89,0.32,1.28) both;
}
.session-dialog-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  background: #ffbd59;
  -webkit-mask: url('https://cdn.jsdelivr.net/gh/cantormike/raw-audio-voice@main/Assets/Images/icons/telisha-ketana-icon.svg') center / contain no-repeat;
  mask: url('https://cdn.jsdelivr.net/gh/cantormike/raw-audio-voice@main/Assets/Images/icons/telisha-ketana-icon.svg') center / contain no-repeat;
}
@keyframes dlgPop { from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }
.session-dialog-box h3 {
  font-size: 22px; font-weight: 300; color: var(--text); margin-bottom: 10px;
}
.session-dialog-box p {
  font-size: 14px; color: var(--text-dim); margin-bottom: 28px; line-height: 1.6;
}
.install-app-dialog-box {
  max-width: 430px;
}
.install-app-steps {
  text-align: left;
  color: var(--text);
  margin: -10px 0 24px;
}
.install-app-steps:empty {
  display: none;
}
.install-app-steps ol {
  margin: 0;
  padding-left: 22px;
}
.install-app-steps li {
  font-size: 14px;
  line-height: 1.55;
  margin: 6px 0;
}
.install-app-skip-btn {
  display: block;
  margin: 14px auto 0;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.install-app-skip-btn:hover,
.install-app-skip-btn:focus-visible {
  color: var(--purple);
  text-decoration: underline;
  outline: none;
}
.session-dialog-btns { display: flex; gap: 12px; justify-content: center; }
.session-dialog-btns .btn.active {
  border-color: var(--purple);
  background: var(--purple-dim);
  color: var(--purple);
}
.session-complete-box {
  max-width: 520px;
}
.session-complete-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 24px;
}
.session-complete-stat {
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 12px 10px;
  background: #fff;
}
.session-complete-number {
  display: block;
  color: var(--purple);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}
.session-complete-label {
  display: block;
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.session-complete-compare {
  display: block;
  min-height: 1.15em;
  margin-top: 5px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
}
.session-complete-compare.is-up {
  color: #2e7d32;
}
.session-complete-compare.is-down {
  color: #c62828;
}
.session-complete-actions {
  flex-wrap: wrap;
}
.session-trial-reminder {
  margin: 18px 0 0;
  padding: 14px;
  border: 1px solid rgba(96,26,119,0.15);
  border-radius: 8px;
  background: #fbfaf8;
}
.session-trial-reminder p {
  margin: 0;
  color: var(--text-mid);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.session-trial-reminder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}
.session-complete-pill {
  border: 1px solid rgba(96,26,119,0.28);
  border-radius: 999px;
  background: #fff;
  color: var(--purple);
  min-height: 42px;
  padding: 9px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}
.session-complete-pill-primary {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}
.professional-overview-box {
  max-width: 520px;
}
.professional-overview-box h3 {
  line-height: 1.35;
}
.professional-overview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.professional-overview-pill {
  border: 1px solid rgba(96,26,119,0.28);
  border-radius: 999px;
  background: var(--white);
  color: var(--purple);
  min-height: 44px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.professional-overview-pill:hover,
.professional-overview-pill:focus-visible {
  background: var(--purple-dim);
  border-color: var(--purple);
  transform: translateY(-1px);
}
.professional-overview-pill:first-child {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--white);
}
.professional-overview-pill:first-child:hover,
.professional-overview-pill:first-child:focus-visible {
  background: #4f1463;
  border-color: #4f1463;
}

/* Parking lot badge on header */
.park-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 12px;
  background: rgba(96,26,119,0.12); border: 1px solid rgba(96,26,119,0.3);
  color: var(--purple); cursor: pointer; transition: all 0.15s;
}
.park-badge:hover { background: rgba(96,26,119,0.2); }
.btn-park-header {
  position: relative;
}
.park-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--purple);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.parking-box {
  width: fit-content;
  max-width: min(92vw, 1100px);
  min-width: 320px;
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
}
.parking-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.parking-title-row .settings-title {
  margin: 0;
}
.parking-title-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.parking-title-icon img {
  width: 20px;
  height: 20px;
  display: block;
}
.parking-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
  overflow-y: auto;
  max-height: calc(min(80vh, 720px) - 120px);
  padding-right: 4px;
}
.parking-actions {
  display: flex;
  justify-content: center;
  padding-top: 14px;
}
.parking-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.parking-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
  padding: 2px 2px 0;
}
.parking-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  border: 1.5px solid var(--border);
  background: var(--white);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.parking-item:hover {
  border-color: var(--purple);
  background: var(--purple-dim);
}
.parking-item-word {
  display: block;
  width: 100%;
  align-self: stretch;
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
  font-size: 28px;
  color: var(--text);
  direction: rtl;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.parking-item-ref {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-dim);
}
.parking-clear-confirm:disabled:hover {
  background: #d9d9d9;
}
@media (max-width: 640px) {
  .parking-box {
    max-height: 82vh;
  }
  .parking-list {
    max-height: calc(82vh - 120px);
  }
}
.parking-empty {
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
  padding: 10px 0 4px;
}

/* ═══════════════════════════════════════
   SOUND MAP  (fixes 6, 9)
═══════════════════════════════════════ */
.sound-map-area {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.sm-scroll-shell {
  position: relative;
}
.sm-word-blocks-wrapper {
  position: relative;
  overflow-x: auto;
  padding: 8px 0 25px;
  scrollbar-width: none;
  direction: rtl;
}
.sm-word-blocks-wrapper::-webkit-scrollbar {
  display: none;
}
.sm-word-blocks-inner {
  display: flex;
  flex-direction: row-reverse;
  gap: 32px;
  margin: 0 auto;
  padding: 0 24px;
  width: max-content;
  direction: ltr;
}

/* Override inner padding/width so compact accordion content truly centers */
.sm-inner-accordion {
  padding: 0 !important;
  width: 100% !important;
  justify-content: center !important;
}
/* Override wrapper direction so RTL doesn't push narrow content rightward */
.sm-wrapper-accordion {
  direction: ltr !important;
  position: relative;
}

#wizLearnDrawer .learn-micro-panel > .help-toggle-btn {
  top: 12px;
  bottom: auto;
  left: 12px;
}
#wizLearnDrawer .learn-micro-panel > .help-toggle-btn .help-toggle-label {
  top: 30px;
  bottom: auto;
}

#wizLearnDrawer .learn-micro-panel > .coach-toggle-wrap {
  top: 12px;
  bottom: auto;
  right: 12px;
}

#wizLearnDrawer .learn-micro-panel > .coach-toggle-wrap .coach-toggle-btn {
  border: 0;
}

#wizLearnDrawer .sm-wrapper-accordion {
  padding-top: 8px;
}

#wizLearnDrawer .learn-micro-panel > .coach-toggle-wrap .help-label {
  display: none;
}

.sm-accordion-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.sm-accordion-toggle-row {
  display: flex;
  padding: 0 0 8px 0;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sm-accordion-toggle-row.is-compact {
  justify-content: center;
}
.sm-accordion-toggle-row.is-full {
  justify-content: center;
}

/* Compact view: pill button */
.sm-accordion-toggle-btn.is-compact {
  background: var(--purple-dim, rgba(96,26,119,0.08));
  border: 1.5px solid var(--purple, #601A77);
  color: var(--purple, #601A77);
  font-size: 13px;
  font-family: var(--font-sans, sans-serif);
  font-weight: 600;
  cursor: pointer;
  padding: 5px 18px;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}
.sm-accordion-toggle-btn.is-compact:hover {
  background: var(--purple, #601A77);
  color: #fff;
}

/* Full view: centered outline button */
.sm-accordion-toggle-btn.is-full {
  background: none;
  border: 1.5px solid var(--border, #C4B3AB);
  color: var(--text-mid, #666);
  font-size: 13px;
  font-family: var(--font-sans, sans-serif);
  font-weight: 500;
  cursor: pointer;
  padding: 5px 18px;
  border-radius: 6px;
  transition: border-color 0.15s, color 0.15s;
  line-height: 1.4;
}
.sm-accordion-toggle-btn.is-full:hover {
  border-color: var(--text-mid, #666);
  color: var(--text, #555);
}

.sm-accordion-map-mount {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  direction: ltr;
}

.sm-accordion-map-mount.is-sequence {
  flex-direction: row-reverse;
}
.sm-accordion-map-mount::-webkit-scrollbar {
  display: none;
}

.sm-accordion-map-mount .word-block {
  flex: 0 0 auto;
  margin-left: 0;
  margin-right: 0;
}

.sm-accordion-map-mount.sm-accordion-map-mount-overflowing {
  justify-content: flex-start;
}

.sm-accordion-map-mount .word-block.word-block-overflow-right {
  width: max-content;
  min-width: max-content;
}

.sm-accordion-label-host {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-height: 30px;
}

.sm-accordion-label-host .sm-compact-label {
  width: auto;
  min-width: 0;
  transform: none;
  position: static;
  left: auto;
}

/* Hide brackets in compact view */
.sm-accordion-map-mount.is-compact .bracket-svg {
  display: none;
}

.sm-compact-label {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: nowrap;
  font-size: 19px;
  color: var(--text-dim, #888);
  font-family: var(--font-sans, sans-serif);
  letter-spacing: 0.03em;
  padding: 4px 12px 0;
  width: 100%;
  max-width: calc(100% - 8px);
  box-sizing: border-box;
  white-space: nowrap;
  align-self: center;
  text-align: center;
}
.sm-compact-label strong {
  font-weight: 700;
}
.sm-compact-label-sep {
  padding: 0 8px;
  color: var(--border, #C4B3AB);
}
.sm-compact-label-heb {
  font-family: 'SBL Hebrew', 'Ezra SIL', 'David', serif;
  font-size: 26px;
}
.sm-scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(96,26,119,0.22);
  background: rgba(255,255,255,0.94);
  color: var(--purple);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  z-index: 3;
  pointer-events: auto;
}
.sm-scroll-arrow:hover {
  background: var(--purple-dim);
  border-color: var(--purple);
}
.sm-scroll-arrow-left { left: 10px; }
.sm-scroll-arrow-right { right: 10px; }
.word-block {
  display: flex; flex-direction: column; align-items: center;
}
.staff-outer {
  position: relative;
  height: 310px; /* 5 lines + room for C3 (265px) + ball radius (19px) + bracket zone (26px) */
  min-width: 120px; width: 100%;
}
/* C3 ledger line — injected by JS only when needed */
.staff-ledger-c3 {
  position: absolute; left: -8px; right: -8px;
  top: 265px; height: 1.5px; background: var(--border2);
}
.syllable-row {
  display: flex; flex-direction: row; justify-content: center;
  align-items: flex-start;
  padding-top: 40px; gap: 0;
}
.syllable-pair {
  display: flex; flex-direction: column; align-items: center;
  min-width: 60px; padding: 0;
}
.heb-syl {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
  font-size: 44px; text-align: center; direction: rtl; unicode-bidi: isolate; white-space: nowrap; line-height: 1.2;
}
.hyphen-sep {
  color: var(--text-dim); font-size: 14px; opacity: 0.5;
  align-self: center; padding: 0 2px; margin-top: 50px;
}
.note-circle {
  position: absolute; width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600;
  color: #fff; margin-left: -19px; margin-top: -19px; z-index: 2;
}
.note-circle.yellow { background: #F4D03F; }
.note-circle.green  { background: #52BE80; }
.note-circle { cursor: pointer; transition: filter 0.15s, transform 0.1s; }
.note-circle:hover { filter: brightness(1.18); transform: scale(1.07); }
.note-circle:active { transform: scale(0.92); }
.note-circle.is-playing {
  transform: scale(1.16);
  box-shadow: 0 0 0 4px rgba(255, 189, 89, 0.25), 0 0 18px rgba(255, 189, 89, 0.75);
  filter: brightness(1.08);
}


/* ══════════════════════════════════════
   VOICE SETUP & SETTINGS STYLES
══════════════════════════════════════ */


/* Voice setup intro text */
.wiz-vs-intro {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  margin: 8px 0 4px 0;
  text-align: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.wiz-vs-intro p {
  margin: 0;
}
.wiz-link-skip {
  display: block;
  width: fit-content;
  margin-top: 14px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  background: none;
  border: 0;
  padding: 6px 10px;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.18s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.wiz-link-skip:hover {
  color: var(--purple);
}

/* Error message */
.wiz-vs-error {
  color: #c0392b;
  font-size: 14px;
  text-align: center;
  margin-top: 8px;
  padding: 8px 12px;
  background: #fdecea;
  border-radius: 6px;
}

/* Ghost button variant */
.wiz-btn-ghost {
  background: #fff;
  border: 2px solid currentColor;
  color: #555;
}
.wiz-btn-ghost:hover {
  background: #f5f5f5;
}

#wizVS_result .wiz-btn-row.vs-result-actions {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}

#wizVS_result .wiz-btn-row.vs-result-actions .wiz-btn {
  width: 180px;
  min-width: 180px;
  border-color: var(--border);
  background: #fff;
  color: var(--text);
}

#wizVS_result #btnVsPlaySample,
#wizVS_result #btnVsRedo {
  background: #fff;
}

#wizVS_result .wiz-btn-row.vs-result-actions .wiz-btn:hover:not(:disabled) {
  border-color: var(--border);
  background: #f7f3fb;
  color: var(--purple);
}

#screenOnboarding #ob6 .wiz-btn,
#screenOnboarding #ob6 .wiz-back-btn,
#screenSetup #wizVS_hbd .wiz-btn,
#screenSetup #wizVS_hbd .wiz-back-btn,
#screenSetup #wizVS_result .wiz-btn {
  width: min(100%, 260px);
  min-height: 54px;
  padding: 10px 22px;
  border: 1.5px solid rgba(96, 26, 119, 0.32);
  border-radius: 999px;
  background: #fff;
  color: var(--purple);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-align: center;
  box-shadow: none;
}

#screenOnboarding #ob6 .wiz-btn:hover:not(:disabled),
#screenOnboarding #ob6 .wiz-back-btn:hover:not(:disabled),
#screenSetup #wizVS_hbd .wiz-btn:hover:not(:disabled),
#screenSetup #wizVS_hbd .wiz-back-btn:hover:not(:disabled),
#screenSetup #wizVS_result .wiz-btn:hover:not(:disabled) {
  border-color: var(--purple);
  background: #f3e8fa;
  color: var(--purple);
}

#screenOnboarding #ob6 .wiz-btn.selected,
#screenSetup #wizVS_hbd .wiz-btn.selected,
#screenSetup #wizVS_result .wiz-btn.selected {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}

#screenOnboarding #ob6 .wiz-btn.selected:hover:not(:disabled),
#screenOnboarding #ob6 .wiz-btn.selected:active:not(:disabled),
#screenOnboarding #ob6 .wiz-btn.selected:focus-visible {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}

#screenSetup #wizVS_result #btnVsPlaySample,
#screenSetup #wizVS_result .wiz-btn-row.vs-result-actions .wiz-btn {
  width: 190px;
  min-width: 190px;
}

#screenSetup #wizVS_hbd .voice-setup-back,
#screenOnboarding #ob6 .wiz-back-btn,
#screenOnboarding #ob6 .wiz-continue-btn {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#screenOnboarding #ob6 .wiz-nav {
  justify-content: center;
  gap: 28px;
  margin-top: 14px;
}

#screenOnboarding #ob6 .wiz-back-btn {
  margin-left: 0;
  margin-right: 0;
}

#screenOnboarding #ob6 .wiz-continue-btn {
  margin-left: 0;
  margin-right: 0;
}

#screenOnboarding #ob6 .wiz-back-btn,
#screenOnboarding #ob6 .wiz-continue-btn,
#screenSetup #wizVS_hbd .wiz-back-btn,
#screenSetup #wizVS_hbd #vs-btn-hbd-done,
#screenSetup #wizVS_hbd #btnVsHbdContinue,
#screenSetup #wizVS_result #btnVsRedo,
#screenSetup #wizVS_result #btnVsSave {
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--purple);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: none;
}

#screenOnboarding #ob6 .wiz-back-btn:hover:not(:disabled),
#screenOnboarding #ob6 .wiz-continue-btn:hover:not(:disabled),
#screenSetup #wizVS_hbd .wiz-back-btn:hover:not(:disabled),
#screenSetup #wizVS_hbd #vs-btn-hbd-done:hover:not(:disabled),
#screenSetup #wizVS_hbd #btnVsHbdContinue:hover:not(:disabled),
#screenSetup #wizVS_result #btnVsRedo:hover:not(:disabled),
#screenSetup #wizVS_result #btnVsSave:hover:not(:disabled) {
  border: 0;
  background: transparent;
  color: var(--purpleL);
}

#screenOnboarding #ob0 .wiz-btn,
#screenOnboarding #ob1 .wiz-btn,
#screenSetup #wiz0 .pb-btn,
#screenSetup #wiz0 .wiz-reading-view-btn,
#screenSetup #wiz0 .wiz0-source-row .wiz-btn {
  min-height: 54px;
  padding: 10px 22px;
  border: 1.5px solid rgba(96, 26, 119, 0.32);
  border-radius: 999px;
  background: #fff;
  color: var(--purple);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-align: center;
  box-shadow: none;
}

#screenOnboarding #ob1 .wiz-btn,
#screenSetup #wiz0 .pb-btn {
  min-height: 64px;
}

#screenOnboarding #ob1 .wiz-btn:hover:not(:disabled),
#screenSetup #wiz0 .pb-btn:hover:not(:disabled),
#screenSetup #wiz0 .wiz-reading-view-btn:hover:not(:disabled),
#screenSetup #wiz0 .wiz0-source-row .wiz-btn:hover:not(:disabled) {
  border-color: var(--purple);
  background: #f3e8fa;
  color: var(--purple);
}

#screenOnboarding #ob0 #btnOb0QuickStartPath.ob0-initial-recommend,
#screenOnboarding #ob0 #btnOb0QuickStartPath.ob0-initial-recommend:hover:not(:disabled),
#screenOnboarding #ob0 #btnOb0QuickStartPath.ob0-initial-recommend:active:not(:disabled),
#screenOnboarding #ob0 #btnOb0QuickStartPath.ob0-initial-recommend:focus-visible {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}

#screenSetup #wiz0 .pb-btn.wiz0-choice-glow,
#screenSetup #wiz0 .pb-btn.wiz0-choice-glow:hover:not(:disabled),
#screenSetup #wiz0 .pb-btn.wiz0-choice-glow:active:not(:disabled),
#screenSetup #wiz0 .pb-btn.wiz0-choice-glow:focus-visible {
  border-color: #e53e3e;
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.35);
}

#screenOnboarding #ob0 .wiz-btn.selected,
#screenOnboarding #ob1 .wiz-btn.selected,
#screenSetup #wiz0 .pb-btn.selected,
#screenSetup #wiz0 .wiz-reading-view-btn.selected,
#screenSetup #wiz0 .wiz0-source-row .wiz-btn.selected,
#screenSetup #wiz0 .pb-btn.selected:disabled {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}

#screenOnboarding #ob0 .wiz-btn.selected:hover:not(:disabled),
#screenOnboarding #ob0 .wiz-btn.selected:active:not(:disabled),
#screenOnboarding #ob0 .wiz-btn.selected:focus-visible,
#screenOnboarding #ob1 .wiz-btn.selected:hover:not(:disabled),
#screenOnboarding #ob1 .wiz-btn.selected:active:not(:disabled),
#screenOnboarding #ob1 .wiz-btn.selected:focus-visible,
#screenSetup #wiz0 .pb-btn.selected:hover:not(:disabled),
#screenSetup #wiz0 .pb-btn.selected:active:not(:disabled),
#screenSetup #wiz0 .pb-btn.selected:focus-visible,
#screenSetup #wiz0 .wiz-reading-view-btn.selected:hover:not(:disabled),
#screenSetup #wiz0 .wiz-reading-view-btn.selected:active:not(:disabled),
#screenSetup #wiz0 .wiz-reading-view-btn.selected:focus-visible,
#screenSetup #wiz0 .wiz0-source-row .wiz-btn.selected:hover:not(:disabled),
#screenSetup #wiz0 .wiz0-source-row .wiz-btn.selected:active:not(:disabled),
#screenSetup #wiz0 .wiz0-source-row .wiz-btn.selected:focus-visible,
#screenSetup #wiz0 .corpus-btn.selected:hover:not(:disabled),
#screenSetup #wiz0 .corpus-btn.selected:active:not(:disabled),
#screenSetup #wiz0 .corpus-btn.selected:focus-visible {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}

#screenSetup #wiz0 .pb-btn.selected .pb-btn-title,
#screenSetup #wiz0 .pb-btn.selected .pb-btn-desc {
  color: #fff;
}

#screenOnboarding #ob1 .wiz-btn span:last-child,
#screenSetup #wiz0 .pb-btn-desc {
  font-weight: 500;
}

/* Volume meter */
.vs-vol-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 360px;
  margin: 0 auto;
}
.vs-vol-bar-track {
  flex: 1;
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}
.vs-vol-bar {
  height: 100%;
  width: 0%;
  background: #4caf50;
  border-radius: 5px;
  transition: width 0.1s;
}
.vs-vol-label {
  font-size: 13px;
  color: #666;
  min-width: 60px;
}

/* Note chip */
.vs-note-chip {
  display: inline-block;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}
.vs-freq-label {
  font-size: 13px;
  color: #999;
  margin-left: 8px;
}

/* Status text */
.vs-status {
  text-align: center;
  font-size: 15px;
  color: #555;
  margin-top: 12px;
  min-height: 22px;
}

/* Gliss note display */
.vs-note-display {
  text-align: center;
}
.vs-note-label {
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Result card */
.vs-result-card {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  text-align: center;
  margin: 8px 0;
}

/* Range visualization */
.vs-range-viz {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.vs-range-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}
.vs-range-track {
  position: relative;
  height: 18px;
  background: #e0e0e0;
  border-radius: 9px;
  overflow: hidden;
}
.vs-bar-system {
  position: absolute;
  height: 100%;
  background: #bbdefb;
  border-radius: 9px;
}
.vs-bar-voice {
  position: absolute;
  height: 100%;
  background: #4caf50;
  border-radius: 9px;
  opacity: 0.7;
}
.vs-fit-msg {
  font-size: 14px;
  color: #555;
  margin-top: 8px;
  text-align: center;
}

/* Teen/young notice */
.vs-young-notice {
  font-size: 14px;
  color: #555;
  background: #fff8e1;
  border-left: 3px solid #ffc107;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 12px 0;
  line-height: 1.5;
}

/* ── VOICE RESULT — REDESIGNED ── */

/* Step progress tabs */
.vs-stepper {
  display: flex;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 18px;
  border-bottom: 1px solid var(--border2);
}
.vs-stepper-step {
  flex: 1;
  text-align: center;
  padding: 6px 2px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.vs-stepper-step.done  { color: var(--text-mid); }
.vs-stepper-step.active {
  color: var(--purple);
  border-bottom-color: var(--purple);
}

/* Profile card */
.vs-profile-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto 14px;
}
.vs-profile-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 16px;
}
.vs-rangefitlabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

/* Range track */
.vs-range-track2 {
  position: relative;
  height: 16px;
  border-radius: 999px;
  margin-bottom: 6px;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.06);
}
.vs-range-base-fill,
.vs-range-voice-fill,
.vs-range-sys-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
  transition: left 0.4s, width 0.4s;
}
.vs-range-base-fill {
  left: 0;
  width: 100%;
  background: rgba(76,175,80,0.42);
}
.vs-range-voice-fill {
  background: rgba(244,208,63,0.95);
}
.vs-range-sys-fill {
  background: rgba(96,26,119,0.9);
}
.vs-range-thumb {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #c0392b;
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,0.28);
  transform: translate(-50%, -50%);
  transition: left 0.4s;
  z-index: 2;
}
.vs-range-endlabels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 5px;
}
.vs-range-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.vs-legend-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}

/* Fit notice */
.vs-fit-notice {
  font-size: 13px;
  line-height: 1.5;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 2px;
}
.vs-fit-notice.tight {
  background: #fff3ef;
  border-left: 3px solid #d4603a;
  color: #7a3020;
}
.vs-fit-notice.good,
.vs-fit-notice.wide {
  background: #e8f5e9;
  border-left: 3px solid #4caf50;
  color: #1b5e20;
}

/* Verify card */
.vs-verify-card {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  max-width: 100%;
  width: 100%;
  margin: 16px auto 0;
  text-align: center;
  box-sizing: border-box;
}
.vs-verify-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 7px;
}
.vs-verify-desc {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* Settings button in header */
.btn-settings {
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: 0;
}
.btn-settings:hover {
  background: rgba(255,255,255,0.15);
}
.quick-start-path-return-banner {
  position: fixed;
  top: var(--app-top-offset, 60px);
  left: 0;
  right: 0;
  z-index: 1250;
  width: 100vw;
  border: 0;
  border-radius: 0;
  padding: 12px 18px;
  background: #ec8735;
  color: #21170f;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
#screenQuickStartPath {
  position: relative;
  z-index: 3;
  min-height: 100dvh;
  max-height: 100dvh;
  padding: 1px 18px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.quick-start-path-page {
  width: min(100%, 620px);
  margin: 52px auto;
  padding: 30px 22px;
  position: relative;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(75, 42, 102, 0.12);
  text-align: left;
}
.quick-start-path-close {
  top: 14px;
  right: 16px;
}
.quick-start-path-kicker,
.quick-start-path-step-label {
  color: var(--purple);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.quick-start-path-title {
  margin: 8px 34px 10px 0;
  color: var(--text);
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: 0;
}
.quick-start-path-intro,
.quick-start-path-step p {
  color: var(--text-mid);
  font-size: 16px;
  line-height: 1.6;
}
.quick-start-path-progress {
  display: flex;
  gap: 10px;
  margin: 22px 0 20px;
}
.quick-start-path-progress span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(75, 42, 102, 0.12);
  color: var(--purple);
  font-weight: 900;
}
.quick-start-path-progress span.active {
  background: var(--purple);
  color: #fff;
}
.quick-start-path-step {
  display: none;
  border-top: 1px solid rgba(75, 42, 102, 0.14);
  padding-top: 22px;
}
.quick-start-path-step.active {
  display: block;
}
.quick-start-path-step h2 {
  margin: 8px 0 8px;
  color: var(--text);
  font-size: 26px;
  line-height: 1.15;
}
.quick-start-path-primary {
  width: min(100%, 390px);
  margin-top: 12px;
}
.quick-start-path-secondary {
  display: block;
  margin-top: 14px;
  color: var(--purple);
}
.quick-start-home-confirm {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(75, 42, 102, 0.18);
  border-radius: 10px;
  background: #fbf9ff;
  margin: 18px 0 4px;
  padding: 14px;
}
.quick-start-home-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 58px;
  border: 2px solid var(--purple);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.quick-start-home-logo img {
  width: 96px;
  height: 48px;
  object-fit: contain;
}
.quick-start-home-confirm strong {
  display: block;
  color: var(--purple);
  font-size: 17px;
  line-height: 1.2;
}
.quick-start-home-confirm p {
  margin: 5px 0 12px;
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.35;
}
.quick-start-home-check {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  line-height: 1.25;
}
.quick-start-home-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--purple);
  flex: 0 0 auto;
}

@media (max-width: 640px), (max-height: 720px) {
  #screenQuickStartPath {
    padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .quick-start-path-page {
    margin: 0 auto;
    padding: 24px 16px 22px;
  }
  .quick-start-path-title {
    font-size: 26px;
    line-height: 1.12;
  }
  .quick-start-path-intro,
  .quick-start-path-step p {
    font-size: 15px;
    line-height: 1.45;
  }
  .quick-start-path-progress {
    margin: 16px 0;
  }
  .quick-start-home-confirm {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .quick-start-home-logo {
    justify-self: start;
  }
}

/* Settings overlay */
.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 12px calc(18px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.settings-overlay::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.settings-box {
  background: #fff;
  border-radius: 12px;
  padding: 28px 24px 24px;
  width: 520px;
  max-width: 94vw;
  max-height: calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.settings-box::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.settings-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 18px;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
}
.settings-close:hover {
  color: #333;
}
.settings-title {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #222;
}
.settings-menu {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.settings-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-group + .settings-group {
  border-top: 1px solid #e8e2f4;
  padding-top: 16px;
}
.settings-group-title {
  margin: 0;
  color: #5b2f8f;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.settings-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f8f8f8;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s;
}
.settings-item:hover {
  background: #f0f0f0;
}
.settings-item-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--border2);
  background: var(--white);
  color: var(--text-mid);
  font-size: 22px;
  line-height: 1;
  overflow: hidden;
  box-sizing: border-box;
}
.settings-item-icon-image {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.settings-item-icon-image--feedback {
  width: 34px;
  height: 34px;
}
.settings-item-text {
  flex: 1;
}
.settings-item-label {
  font-size: 15px;
  font-weight: 600;
  color: #222;
}
.settings-item-sub {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
}
.settings-item-arrow {
  font-size: 20px;
  color: #ccc;
}
.settings-legal-line {
  border-top: 1px solid #e8e2f4;
  margin-top: 18px;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
.settings-legal-line a {
  color: #5b2f8f;
  font-weight: 700;
  text-decoration: none;
}
.settings-legal-line a:hover,
.settings-legal-line a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.work-method-box {
  max-width: 560px;
}
.work-method-reference {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.work-method-reference-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  border: 1px solid #e8e2f4;
  border-radius: 8px;
  padding: 12px;
  background: #fbf9ff;
}
.work-method-reference-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #5b2f8f;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.work-method-reference-title {
  font-weight: 700;
  color: #222;
  margin-bottom: 3px;
}
.work-method-reference p {
  margin: 0;
  color: #555;
  line-height: 1.35;
}
.work-method-course-link {
  border: 0;
  background: transparent;
  color: #5b2f8f;
  cursor: pointer;
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin: 18px auto 0;
  padding: 8px 10px;
}
.work-method-course-link:hover,
.work-method-course-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-screen {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  background: #f5f3ee;
}
.auth-card {
  width: min(440px, 94vw);
  background: var(--white);
  border: 1px solid var(--border2);
  border-radius: 8px;
  box-shadow: 0 18px 54px rgba(0,0,0,0.16);
  padding: 24px;
  text-align: center;
  overflow: hidden;
}
.auth-card-wide {
  width: min(560px, 94vw);
}
.auth-logo {
  display: block;
  width: min(280px, 78vw);
  height: auto;
  margin: 0 auto 20px;
}
#clerk-sign-in {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: min(440px, 94vw);
  min-width: 0;
}
#clerk-sign-in > *,
#clerk-sign-in .cl-rootBox,
#clerk-sign-in .cl-cardBox,
#clerk-sign-in .cl-card,
.auth-card .cl-rootBox,
.auth-card .cl-cardBox,
.auth-card .cl-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
}
#clerk-sign-in .cl-cardBox,
#clerk-sign-in .cl-card,
.auth-card .cl-cardBox,
.auth-card .cl-card {
  box-sizing: border-box;
}
.auth-title {
  margin: 0;
  color: var(--purple);
  font-size: 24px;
  line-height: 1.2;
}
.auth-subtitle {
  margin: 10px 0 18px;
  color: var(--text-mid);
  font-size: 15px;
}
.auth-loading-message {
  margin: 4px 0 0;
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.45;
}
.auth-choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.auth-choice-btn,
.paywall-btn,
.paywall-restore,
.paywall-signout,
.trial-banner-subscribe {
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.auth-choice-btn {
  min-height: 48px;
  background: var(--purple);
  color: #fff;
}
.auth-signout-link,
.paywall-signout {
  margin-top: 18px;
  background: transparent;
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 480px) {
  .auth-screen {
    align-items: flex-start;
    padding: 18px 12px;
  }
  .auth-card {
    width: min(420px, 100%);
    padding: 18px 12px;
  }
  #clerk-sign-in {
    max-width: 100%;
  }
  .auth-logo {
    width: min(240px, 72vw);
    margin-bottom: 14px;
  }
}
.trial-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  padding: 8px 12px;
  background: #f6c84c;
  color: #26153a;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.trial-banner-subscribe {
  margin-left: 6px;
  padding: 4px 8px;
  background: var(--purple);
  color: #fff;
}
.paywall-inner {
  width: min(920px, 94vw);
  background: var(--white);
  border: 1px solid var(--border2);
  border-radius: 8px;
  box-shadow: 0 18px 54px rgba(0,0,0,0.16);
  padding: 28px;
  text-align: center;
}
.paywall-logo {
  width: min(300px, 78vw);
  margin: 0 auto 18px;
}
.paywall-headline {
  margin: 0;
  color: var(--purple);
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.18;
}
.paywall-sub {
  margin: 12px 0 22px;
  color: var(--text-mid);
}
.paywall-billing-toggle {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 20px;
  padding: 4px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: #f5f3ee;
}
.paywall-billing-btn {
  min-width: 96px;
  border: 0;
  border-radius: 6px;
  padding: 9px 14px;
  background: transparent;
  color: var(--text-mid);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.paywall-billing-btn.active {
  background: var(--purple);
  color: #fff;
}
.paywall-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.paywall-plan {
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 18px;
  background: #fbfaf8;
}
.paywall-plan--featured {
  border-color: var(--purple);
}
.paywall-plan--trial {
  border-color: #f6c84c;
}
.paywall-plan-badge {
  min-height: 20px;
  color: var(--purple);
  font-size: 12px;
  font-weight: 800;
}
.paywall-plan-name {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 800;
}
.paywall-plan-price {
  margin-top: 10px;
}
.paywall-plan-amount {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
}
.paywall-plan-period,
.paywall-plan-annual,
.paywall-plan-tagline,
.paywall-footer,
.paywall-restore-msg {
  color: var(--text-dim);
  font-size: 13px;
}
.paywall-trial-actions {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.paywall-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  min-height: 42px;
  margin-top: 16px;
  padding: 10px 14px;
  background: var(--purple);
  color: #fff;
  text-decoration: none;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.paywall-btn--primary {
  background: #f6c84c;
  color: #26153a;
}
.paywall-billing-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.paywall-billing-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  color: var(--purple);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}
.paywall-billing-choice-btn strong {
  margin-top: 2px;
  color: var(--text);
  font-size: 14px;
}
.paywall-trial-btn {
  width: 100%;
}
.paywall-restore {
  margin-top: 18px;
  padding: 8px 12px;
  background: transparent;
  color: var(--purple);
}
.paywall-footer {
  margin-top: 16px;
}
.paywall-footer a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: none;
}

.quick-start-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 12px calc(18px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.48);
  overflow-y: auto;
}
.quick-start-box {
  width: min(760px, 94vw);
  max-height: calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 18px 54px rgba(0,0,0,0.26);
  padding: 0 20px 20px;
  position: relative;
  scroll-behavior: smooth;
}
.quick-start-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 -20px 10px;
  padding: 12px 20px 10px;
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  backdrop-filter: blur(10px);
}
.quick-start-skip,
.quick-start-close {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-mid);
}
.quick-start-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  box-shadow: 0 6px 16px rgba(96, 26, 119, 0.18);
}
.quick-start-close {
  position: absolute;
  right: 16px;
  font-size: 20px;
  line-height: 1;
  padding: 4px;
}
.quick-start-body {
  display: grid;
  gap: 0;
  padding-bottom: 10px;
}
.quick-start-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 0;
  border-top: 1px solid rgba(96, 26, 119, 0.12);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.quick-start-section:first-child {
  border-top: 0;
  padding-top: 20px;
}
.quick-start-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.quick-start-section--hero {
  min-height: auto;
}
.quick-start-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: var(--purple);
  font-size: 28px;
  line-height: 1.15;
}
.quick-start-title-icon {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}
.quick-start-section-title-text {
  min-width: 0;
}
.quick-start-section-title--inline {
  margin-bottom: 10px;
}
.quick-start-demo {
  margin: 14px 0 16px;
}
.quick-start-demo-note {
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
.quick-start-practice-demo > .quick-start-demo-note:last-child {
  margin-bottom: 18px;
}
.quick-start-demo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.quick-start-wiz0-image-demo {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.quick-start-wiz0-image-demo img {
  width: min(100%, 300px);
  height: auto;
  border-radius: 8px;
  display: block;
}
.quick-start-wiz0-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1.2fr);
  gap: 18px;
  align-items: start;
  margin-top: 14px;
}
.quick-start-wiz0-layout > .quick-start-demo,
.quick-start-wiz0-layout > .quick-start-wiz0-copy {
  align-self: start;
  margin-top: 0;
}
.quick-start-wiz0-layout .quick-start-wiz0-image-demo {
  margin-top: 0;
}
.quick-start-wiz0-copy > .quick-start-intro:first-child {
  margin-top: 0;
}
.quick-start-wiz0-layout .quick-start-list {
  margin-top: 0;
}
.quick-start-wiz0-copy {
  min-width: 0;
}
.quick-start-wiz0-copy .quick-start-intro {
  margin-bottom: 8px;
}
.quick-start-section--wiz0 .quick-start-list-item {
  border: 0;
  border-radius: 0;
  padding: 4px 0;
  background: transparent;
}
.quick-start-list-heading {
  color: var(--purple);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 10px 0 -3px;
  padding-top: 20px;
  border-top: 1px solid rgba(96, 26, 119, 0.18);
}
.quick-start-list-section-title {
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid rgba(96, 26, 119, 0.18);
}
.quick-start-practice-demo {
  display: grid;
  justify-items: center;
}
.quick-start-practice-card {
  width: min(100%, 460px);
  min-height: 190px;
  border-radius: 16px;
  border-bottom: 1.5px solid var(--border);
  padding-top: 48px;
}
.quick-start-practice-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 12px 0 2px;
  pointer-events: none;
}
.quick-start-sequence-card {
  margin-top: 30px;
  min-height: 250px;
  padding-top: 36px;
}
.quick-start-sequence-phrase {
  min-height: 104px;
  gap: 14px;
  padding: 20px 8px 10px;
  flex-wrap: nowrap;
  overflow: visible;
}
.quick-start-sequence-phrase .phrase-word {
  font-size: clamp(30px, 7vw, 58px);
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
}
.quick-start-sequence-phrase .phrase-word-wrap {
  flex: 0 1 auto;
  min-width: 0;
}
.quick-start-sequence-phrase .phrase-word-radio {
  pointer-events: auto;
}
.quick-start-demo-word {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
  font-size: clamp(42px, 9vw, 58px);
  line-height: 1.2;
  color: var(--text);
  text-align: center;
  padding: 8px 0 10px;
}
.quick-start-action-btn {
  cursor: default;
  pointer-events: none;
}
.quick-start-action-btn:hover {
  border-color: var(--border2);
  color: var(--text-mid);
  background: var(--white);
}
.quick-start-action-btn:active {
  transform: scale(1);
}
.quick-start-action-btn.active,
.quick-start-action-btn.active:hover {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}
.quick-start-demo-play-btn,
.quick-start-sequence-play-btn {
  cursor: pointer;
  pointer-events: auto;
}
.quick-start-demo-play-btn:active,
.quick-start-sequence-play-btn:active {
  transform: scale(0.92);
}
.quick-start-waveform-btn .action-btn-icon {
  width: 40px;
  height: 40px;
  object-fit: cover;
}
.quick-start-play-btn .action-btn-icon {
  width: 44px;
  height: 44px;
  object-fit: cover;
}
.quick-start-map-btn .action-btn-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.quick-start-park-btn .action-btn-icon {
  width: 30px;
  height: 30px;
}
.quick-start-learn-demo {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.quick-start-learn-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.quick-start-learn-state {
  min-width: 0;
}
.quick-start-learn-state-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--purple);
  text-align: center;
  margin-bottom: 8px;
}
.quick-start-learn-panel {
  border-radius: 18px;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.quick-start-learn-panel .learn-micro-actions {
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
.quick-start-learn-panel .learn-micro-actions .action-btn-wrap {
  width: clamp(36px, 16vw, 44px);
}
.quick-start-learn-panel .learn-micro-actions .action-btn {
  width: clamp(36px, 16vw, 44px);
  height: clamp(36px, 16vw, 44px);
  min-width: clamp(36px, 16vw, 44px);
  min-height: clamp(36px, 16vw, 44px);
}
.quick-start-intro {
  margin: 0 0 14px;
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.55;
}
.quick-start-intro-list {
  margin: -6px 0 14px 28px;
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.5;
}
.quick-start-intro-list li {
  padding-left: 4px;
  margin-bottom: 4px;
}
.quick-start-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}
.quick-start-icon-card {
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  background: #fafafa;
}
.quick-start-icon-card--plain {
  border: 0;
  border-radius: 0;
  padding: 4px 0;
  align-items: flex-start;
  background: transparent;
}
.quick-start-icon {
  pointer-events: none;
}
.quick-start-icon-label {
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
  text-align: center;
}
.quick-start-icon-card--plain .quick-start-icon-label {
  text-align: left;
}
.quick-start-icon-desc,
.quick-start-list-item span {
  color: var(--text-mid);
  font-size: 13px;
  line-height: 1.4;
}
.quick-start-icon-desc {
  align-self: stretch;
  text-align: left;
}
.quick-start-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.quick-start-list-item {
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  margin-left: 22px;
  padding: 11px 12px;
  background: #fafafa;
}
.quick-start-list-item--image {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
.quick-start-list-item--plain {
  border: 0;
  border-radius: 0;
  padding: 4px 0;
  background: transparent;
}
.quick-start-list-item--with-icon {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.quick-start-list-item-icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-width: 1.5px;
}
.quick-start-list-item-icon .settings-item-icon-image {
  width: 18px;
  height: 18px;
}
.quick-start-list-item-icon .settings-item-icon-image--feedback {
  width: 24px;
  height: 24px;
}
.quick-start-list-item-copy {
  min-width: 0;
}
.quick-start-list-item strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 3px;
}
.quick-start-list-image {
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin: 12px auto 0;
  border-radius: 8px;
  border: 1px solid var(--border, #ddd);
  background: #fafafa;
  padding: 8px;
}
.quick-start-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  margin: 18px 0 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
}
.quick-start-actions .btn {
  pointer-events: auto;
}
@media (max-width: 640px) {
  .quick-start-box {
    padding: 0 14px 18px;
  }
  .quick-start-topbar {
    margin: 0 -14px 10px;
    padding: 10px 14px 9px;
  }
  .quick-start-section {
    padding: 26px 0;
  }
  .quick-start-section:first-child {
    padding-top: 18px;
  }
  .quick-start-section-title {
    font-size: 23px;
  }
  .quick-start-title-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .quick-start-demo-row {
    grid-template-columns: 1fr;
  }
  .quick-start-wiz0-layout {
    grid-template-columns: 1fr;
    gap: 12px;
    justify-items: center;
  }
  .quick-start-wiz0-layout .quick-start-list {
    width: 100%;
  }
  .quick-start-wiz0-image-demo img {
    width: min(82vw, 260px);
  }
  .quick-start-practice-card {
    padding-inline: 12px;
  }
  .quick-start-learn-compare {
    grid-template-columns: 1fr;
  }
  .quick-start-actions {
    justify-content: stretch;
    margin: 18px 0 0;
    padding: 0;
  }
  .quick-start-actions .btn {
    flex: 1;
  }
}
.settings-mic-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #f8f8f8;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 14px 16px;
}
.settings-mic-icon {
  color: #222;
}
.settings-mic-icon-svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.settings-mic-body {
  flex: 1;
  min-width: 0;
}
.settings-mic-label,
.voice-mic-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--purple);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.settings-mic-select,
.voice-mic-select {
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--border2);
  border-radius: 8px;
  padding: 10px 12px;
}
.settings-mic-select:focus,
.voice-mic-select:focus {
  outline: none;
  border-color: var(--purple);
}
.settings-mic-status,
.voice-mic-status {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
  margin-top: 8px;
}
.voice-mic-card {
  width: min(100%, 420px);
  margin: 14px auto 0;
  background: rgba(255,255,255,0.88);
  border: 1.5px solid var(--border2);
  border-radius: 999px;
  padding: 8px 10px 8px 14px;
  box-shadow: 0 5px 14px rgba(96,26,119,0.06);
}
.voice-mic-card.is-expanded {
  border-radius: 10px;
  padding: 12px 14px 14px;
}
.voice-mic-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.voice-mic-summary-text {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-align: left;
}
.voice-mic-summary-label {
  flex: 0 0 auto;
  color: var(--purple);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.voice-mic-summary-name {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voice-mic-change-btn {
  flex: 0 0 auto;
  border: 1px solid rgba(75, 42, 102, 0.22);
  border-radius: 999px;
  background: #fff;
  color: var(--purple);
  font: 800 12px/1 'Montserrat', sans-serif;
  padding: 8px 12px;
  cursor: pointer;
}
.voice-mic-change-btn[hidden] {
  display: none;
}
.voice-mic-change-btn:hover {
  background: color-mix(in srgb, var(--purple) 8%, #fff);
}
.voice-mic-details {
  margin-top: 12px;
}
.beta-feedback-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(56, 22, 77, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1200;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.beta-feedback-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(56, 22, 77, 0.22);
}
.beta-feedback-btn img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}
.dev-jump-btn {
  position: fixed;
  right: 18px;
  bottom: 88px;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #2e2a3b;
  color: #fff9ec;
  font: 700 14px/1 'Montserrat', sans-serif;
  box-shadow: 0 10px 28px rgba(20, 14, 28, 0.24);
  cursor: pointer;
  z-index: 1200;
}
.dev-back-btn {
  position: fixed;
  right: 86px;
  bottom: 88px;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--purple);
  color: #fff9ec;
  font: 700 14px/1 'Montserrat', sans-serif;
  box-shadow: 0 10px 28px rgba(20, 14, 28, 0.24);
  cursor: pointer;
  z-index: 1200;
}
.dev-back-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.dev-back-btn:not(.has-history) {
  opacity: 0.72;
}
.dev-jump-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 12, 20, 0.52);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  z-index: 1450;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.dev-jump-modal {
  width: min(100%, 420px);
  margin: auto;
  background: #fffaf1;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(31, 18, 43, 0.22);
  padding: 18px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.dev-jump-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dev-jump-title {
  font: 700 20px/1.2 'Montserrat', sans-serif;
  color: #2f2340;
}
.dev-jump-close {
  border: 0;
  background: transparent;
  color: #5f506f;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.dev-jump-note {
  margin-top: 8px;
  color: #655670;
  font-size: 13px;
  line-height: 1.45;
}
.dev-jump-direct {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  background: #efe5ce;
  border: 1px solid rgba(61, 47, 31, 0.1);
}
.dev-jump-direct-title {
  color: #3d2f1f;
  font: 700 13px/1.2 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dev-jump-direct-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.dev-jump-direct-grid--number {
  align-items: end;
}
.dev-jump-direct-grid--single {
  grid-template-columns: 1fr;
}
.dev-jump-field {
  display: block;
  margin-top: 12px;
}
.dev-jump-field-label {
  display: block;
  color: #4f3d29;
  font: 700 12px/1.2 'Montserrat', sans-serif;
  margin-bottom: 6px;
}
.dev-jump-field-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d4c09d;
  border-radius: 12px;
  background: #fffdf8;
  color: #2f2340;
  font: 600 15px/1.4 'Montserrat', sans-serif;
  padding: 10px 12px;
}
.dev-jump-field-input:focus {
  outline: none;
  border-color: #8e6f46;
  box-shadow: 0 0 0 3px rgba(142, 111, 70, 0.14);
}
.dev-jump-go {
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: #2f2340;
  color: #fffaf1;
  font: 700 15px/1 'Montserrat', sans-serif;
  cursor: pointer;
  padding: 0 18px;
}
.dev-jump-go:hover {
  background: #3c2d53;
}
.dev-jump-direct-status {
  margin-top: 10px;
  color: #6a5737;
  font-size: 12px;
  line-height: 1.45;
}
.dev-jump-search {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  background: #f5ecd9;
  border: 1px solid rgba(75, 59, 89, 0.08);
}
.dev-jump-search-label {
  display: block;
  color: #3d2d4f;
  font: 700 13px/1.2 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dev-jump-search-input {
  width: 100%;
  margin-top: 10px;
  border: 1px solid #d9c6a7;
  border-radius: 12px;
  background: #fffdf8;
  color: #2f2340;
  font: 600 15px/1.4 'Montserrat', sans-serif;
  padding: 12px 14px;
}
.dev-jump-search-input:focus {
  outline: none;
  border-color: #8e6f46;
  box-shadow: 0 0 0 3px rgba(142, 111, 70, 0.16);
}
.dev-jump-search-status {
  margin-top: 8px;
  color: #6b5a73;
  font-size: 12px;
  line-height: 1.4;
}
.dev-jump-search-results {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 2px;
}
.dev-jump-search-empty {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
  color: #6f6179;
  font-size: 13px;
  line-height: 1.45;
  padding: 12px 14px;
}
.dev-jump-result {
  width: 100%;
  border: 1px solid rgba(95, 80, 111, 0.12);
  border-radius: 14px;
  background: #fffdf9;
  color: #2f2340;
  cursor: pointer;
  padding: 12px 14px;
  text-align: left;
}
.dev-jump-result:hover,
.dev-jump-result:focus-visible {
  background: #fff7e6;
  border-color: rgba(142, 111, 70, 0.36);
  outline: none;
}
.dev-jump-result-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.dev-jump-result-hebrew {
  direction: rtl;
  text-align: right;
  font: 700 24px/1.25 'Noto Sans Hebrew', 'Frank Ruhl Libre', serif;
  color: #2c2139;
  flex: 1;
}
.dev-jump-result-kind {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #e8dcc0;
  color: #5b4723;
  font: 700 10px/1 'Montserrat', sans-serif;
  letter-spacing: 0.05em;
  padding: 6px 8px;
  text-transform: uppercase;
}
.dev-jump-result-meta,
.dev-jump-result-ref {
  margin-top: 6px;
  color: #655670;
  font-size: 12px;
  line-height: 1.4;
}
.dev-jump-result-ref {
  color: #4e3d5e;
}
.dev-jump-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.dev-jump-subtitle {
  margin-top: 16px;
  color: #4b3b59;
  font: 700 13px/1.2 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dev-jump-pages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.dev-jump-page {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: #dfe8d6;
  color: #27442d;
  font: 700 15px/1 'Montserrat', sans-serif;
  cursor: pointer;
}
.dev-jump-page:hover {
  background: #d3dfc8;
}
.dev-jump-action {
  min-height: 54px;
  border: 0;
  border-radius: 14px;
  background: #efe5ce;
  color: #3d2f1f;
  font: 700 14px/1.25 'Montserrat', sans-serif;
  padding: 10px 12px;
  cursor: pointer;
  text-align: center;
}
.dev-jump-action:hover {
  background: #e7d8b6;
}
.beta-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 12, 20, 0.52);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 40px;
  overflow-y: auto;
  z-index: 1400;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
  .header-actions {
    gap: 8px;
  }
  .btn-header-feedback {
    display: inline-flex;
  }
  .beta-feedback-btn {
    display: none;
  }
}

@media (max-width: 430px) {
  .btn {
    font-size: 14px;
    padding: 9px 16px;
  }
  .beta-modal h3 {
    font-size: 17px;
  }
  .beta-modal-sub {
    font-size: 11px;
  }
  .dev-jump-btn {
    bottom: 18px;
    right: 18px;
  }
  .dev-back-btn {
    bottom: 18px;
    right: 86px;
  }
  .dev-jump-actions {
    grid-template-columns: 1fr;
  }
  .dev-jump-pages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dev-jump-direct-grid {
    grid-template-columns: 1fr;
  }
  .dev-jump-result-top {
    flex-direction: column;
    align-items: stretch;
  }
  .dev-jump-result-hebrew {
    font-size: 21px;
  }
  .tutorial-title {
    font-size: 26px;
  }
  .tutorial-copy,
  .tutorial-list li,
  .tutorial-note {
    font-size: 14px;
  }
  .tutorial-hebrew-focus {
    font-size: 34px;
  }
  .tutorial-hebrew-focus--sequence-example {
    font-size: clamp(18px, 5vw, 24px);
  }
  .tutorial-play-row {
    font-size: 14px;
  }
  .tutorial-carousel-frame iframe {
    height: 460px;
  }
  .tutorial-carousel-frame--go-part {
    width: min(100%, 560px);
  }
  .tutorial-carousel-frame--go-part iframe {
    height: 420px !important;
  }
  .student-scroll-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .student-scroll-header-chapter {
    order: 3;
    flex-basis: 100%;
  }
  .student-scroll-corpus-row,
  .student-scroll-checkpoint-actions {
    grid-template-columns: 1fr;
  }
  .student-scroll-checkpoint-btn {
    min-height: 48px;
  }
  .student-crash-resume-actions {
    flex-direction: column;
  }
  .student-scroll-hero h1 {
    font-size: 34px;
  }
  .student-scroll-chapter-head h2 {
    font-size: 26px;
  }
  .student-scroll-syl-word-wrap,
  .student-scroll-chip-diagram,
  .student-scroll-sound-map-row {
    gap: 8px;
  }
  .student-scroll-syl-block {
    min-width: 62px;
  }
  .student-scroll-syl-heb {
    font-size: 30px;
  }
  .student-scroll-trope-btn {
    width: 82px;
  }
  .tutorial-sequence-example {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .tutorial-trope-line {
    gap: 2px;
  }
  .tutorial-trope-line--bare .tutorial-trope-tile {
    width: auto;
    flex: 0 0 auto;
  }
  .tutorial-trope-line--bare .tutorial-trope-tile-image {
    width: 72px;
  }
  .tutorial-trope-tile {
    flex: 1 1 calc((100% - 24px) / 4);
    width: calc((100% - 24px) / 4);
    max-width: 82px;
    min-height: 82px;
    padding: 8px 6px;
  }
  .tutorial-trope-tile-image {
    width: min(100%, 58px);
  }
  .tutorial-sequence-tile {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 10px;
  }
  .tutorial-sequence-tile-images {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
  .tutorial-sequence-tile-label {
    width: 100%;
  }
  .tutorial-sequence-tile-images img {
    width: 64px;
  }
  .tutorial-sequence-tile--bottom .tutorial-sequence-tile-images img {
    width: 74px;
  }
  .tutorial-sequence-tile--bottom {
    width: 100%;
    align-items: center;
    margin-left: 0;
  }
  .tutorial-sequence-tile--bottom .tutorial-sequence-tile-images {
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
  }
}
.beta-modal {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: auto;
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px 22px 20px;
  box-shadow: 0 24px 64px rgba(31, 18, 43, 0.22);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.beta-modal h3 {
  margin: 0 0 6px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.beta-modal-sub {
  margin: 0 0 4px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.5;
}
.beta-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.beta-field-checkbox {
  margin-top: 16px;
}
.beta-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
}
.beta-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 1px 0 0 0;
  accent-color: var(--purple);
  flex: 0 0 auto;
}
.beta-modal .modal-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.beta-modal .modal-input {
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.beta-modal .modal-input:focus {
  border-color: var(--purple);
}
.beta-modal textarea.modal-input {
  resize: vertical;
  min-height: 88px;
  line-height: 1.5;
}
.beta-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--border2);
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.beta-modal-close:hover {
  border-color: var(--purple);
  color: var(--purple);
}
.beta-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.beta-submit-status {
  display: none;
  margin: 12px 0 0 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--green);
  line-height: 1.4;
}
.beta-context-preview {
  margin-top: 16px;
}
.beta-ctx-details {
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 10px 12px;
}
.beta-ctx-details summary {
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--purple);
}
.beta-ctx-details pre {
  margin: 10px 0 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-mid);
}
.beta-submit-status.error {
  color: var(--red);
}
@media (max-width: 640px) {
  .beta-feedback-btn {
    right: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
  }
  .beta-modal-overlay {
    padding: calc(20px + env(safe-area-inset-top, 0px)) 24px calc(20px + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
  }
  .beta-modal {
    width: 100%;
    max-width: 400px;
    padding: 20px 18px 16px;
    border-radius: 14px;
    max-height: calc(100dvh - 40px);
    max-height: calc(100svh - 40px);
  }
  .beta-modal h3 {
    font-size: 18px;
  }
  .beta-modal-sub {
    font-size: 12px;
  }
  .beta-field {
    margin-top: 12px;
    gap: 5px;
  }
  .beta-checkbox-row {
    font-size: 13px;
  }
  .beta-modal .modal-input {
    font-size: 16px;
    padding: 8px 10px;
  }
  .beta-modal textarea.modal-input {
    min-height: 60px;
  }
  .beta-modal-actions {
    gap: 8px;
    margin-top: 14px;
  }
}
@media (hover: none) and (pointer: coarse), (max-height: 760px) {
  .beta-modal-overlay {
    padding: calc(8px + env(safe-area-inset-top, 0px)) 8px calc(8px + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
  }
  .beta-modal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    padding: 14px 12px 12px;
    border-radius: 14px;
    max-height: calc(100dvh - 16px);
    max-height: calc(100svh - 16px);
  }
  .beta-modal h3 {
    font-size: 18px;
  }
  .beta-modal-sub {
    font-size: 12px;
  }
  .beta-field {
    margin-top: 12px;
    gap: 5px;
  }
  .beta-checkbox-row {
    font-size: 13px;
  }
  .beta-modal .modal-input {
    font-size: 16px;
    padding: 8px 10px;
  }
  .beta-modal textarea.modal-input {
    min-height: 60px;
  }
  .beta-modal-actions {
    gap: 8px;
    margin-top: 14px;
  }
}
body.beta-modal-open {
  overflow: hidden;
}
/* Waveform bars */
.vs-wave-bar {
  width: 5px;
  height: 4px;
  background: #4a90d9;
  border-radius: 3px;
  transition: height 0.08s ease;
}

/* HBD word highlighting */
.vs-hbd-word {
  display: inline-block;
  font-size: 22px;
  color: #bbb;
  transition: color 0.15s, transform 0.15s;
  margin: 0 2px;
}
.vs-hbd-word.current {
  color: #222;
  transform: scale(1.15);
  font-weight: 600;
}
.vs-hbd-word.sung {
  color: #888;
}

/* ── PITCH CANVAS & RECORDING PANEL ─────────────────────────────────────── */
.pitch-graph-wrap {
  width: 100%;
  height: 165px;
  background: #fafaf8;
  border-radius: 8px;
  overflow: hidden;
  margin: 10px 0 4px;
  border: 1px solid var(--taupe);
}
.pitch-graph-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.pitch-graph-legend {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 8px;
  justify-content: center;
}
.legend-swatch {
  display: inline-block;
  width: 22px;
  height: 8px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}
.pitch-feedback {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
  margin-bottom: 4px;
  transition: background .2s, color .2s;
}
.pitch-feedback.idle { background: #f0f0ee; color: #888; }
.pitch-feedback.good { background: #e6f4e6; color: #2d6a2d; font-weight: 600; }
.pitch-feedback.warn { background: #fff8e1; color: #7a5a00; }
.pitch-feedback.poor { background: #fdecea; color: #a03030; }

.pitch-debug-panel {
  margin: 8px 0 0;
  padding: 8px;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  font: 11px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: #332840;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(96,26,119,0.18);
  border-radius: 6px;
}

.rec-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 8px 0 6px;
}

.rec-hint {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}
.rec-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  margin-right: 5px;
  vertical-align: middle;
}
.btn-rec-start.recording .rec-dot {
  background: #fff;
}

/* ══════════════════════════════════════
   SOUND MAP CONTROLS BAR
══════════════════════════════════════ */
.sm-controls {
  /* Now part of the flex flow */
  padding: 8px 16px;
  background: var(--purpleL);
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  flex-shrink: 0;
  justify-content: center;
}
.sm-top-actions {
  display: flex;
  justify-content: center;
  padding: 10px 16px 0;
}
.sm-link-btn {
  background: none;
  border: none;
  color: var(--purple);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.18s;
}
.sm-link-btn:hover {
  color: var(--gold);
}
.sm-custom-inputs { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.sm-custom-word-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  width: min(100%, 760px);
  margin: 0 auto;
}
.sm-custom-word-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
}
.sm-custom-word-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.sm-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.sm-input-label { font-size: 11px; color: #fff; white-space: nowrap; }
.sm-input {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  height: 56px;
  font-size: 14px;
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: 16px 10px; background: var(--white);
  resize: vertical;
  line-height: 1.2;
  font-family: 'Montserrat', sans-serif;
}
.sm-input:focus { outline: none; border-color: var(--purple); }
.sm-footer {
  display: flex; justify-content: center; align-items: center;
}
.sm-custom-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: #fff; cursor: pointer; user-select: none; font-weight: 700;
}
.sm-custom-label input[type="checkbox"] { cursor: pointer; accent-color: var(--purple); }

.tempo-control {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: rgba(255,255,255,0.18); border-radius: 8px;
}
.practice-speed-bar {
  padding: 8px 16px;
  background: var(--purpleL);
  border: 1.5px solid var(--purpleL);
  border-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 24px;
  border-radius: 0 0 16px 16px;
}
.practice-speed-control {
  background: rgba(255,255,255,0.18);
}
.tempo-control-label {
  font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; letter-spacing: 0.04em;
}
.tempo-slider {
  -webkit-appearance: none; appearance: none;
  width: 120px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.3); cursor: pointer; accent-color: var(--purple);
}
.tempo-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--purple); cursor: pointer;
}
.tempo-label {
  font-size: 10px; color: rgba(255,255,255,0.7); white-space: nowrap; min-width: 70px;
}

@media (max-width: 640px) {
  .sm-scroll-arrow {
    width: 30px;
    height: 30px;
    font-size: 22px;
  }
  .sm-scroll-arrow-left { left: 6px; }
  .sm-scroll-arrow-right { right: 6px; }
  .sm-controls {
    align-items: stretch;
    gap: 12px;
  }
  .sm-custom-word-fields {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .sm-input {
    width: 100%;
  }
  .sm-footer {
    justify-content: center;
  }
}



/* Transliteration row */
.trl-row {
  display: flex; justify-content: center; direction: ltr;
  font-size: 11px; color: var(--text-dim); margin-top: 4px; gap: 0;
}
.trl-syl { min-width: 60px; text-align: center; }
.trl-syl.stressed { font-weight: 700; color: var(--text); text-transform: uppercase; }

.logo {
  height: 32px;
  width: auto;
  display: block;
}

/* ── LANDSCAPE MOBILE (short viewports) ── */
@media (max-height: 500px) {
  #screenPractice {
    padding: 8px 0;
  }
  #panelZone > * {
    min-height: 0;
  }
  #screenPractice #tikkunPanel {
    height: auto;
    max-height: min(76vh, 360px);
  }
  #screenPractice #tikkunPanel .tikkun-body {
    max-height: min(58vh, 260px);
  }
  .pitch-graph-wrap {
    height: 110px;
  }
  .wiz-step {
    justify-content: flex-start;
    overflow-y: auto;
    padding-top: calc(var(--wiz-mobile-top-start) + var(--app-top-offset, 0px) + env(safe-area-inset-top, 0px));
    padding-bottom: 80px;
  }
  #wiz0 {
    padding-top: calc(var(--wiz-mobile-top-start) + 36px + var(--app-top-offset, 0px) + env(safe-area-inset-top, 0px));
  }
  #wiz0 .wiz-question {
    margin-bottom: 10px;
  }
  #wiz0Mode {
    padding-top: 12px;
  }
  #wiz0Type {
    padding-top: 34px;
  }
  #wiz0Type::before {
    margin: 0 auto 18px;
    transform: translateY(-8px);
  }
  .wiz-question {
    font-size: 18px;
    margin-bottom: 16px;
  }
  .wiz-q {
    font-size: 18px;
  }
  .wiz-s,
  .trope-mode-hint {
    font-size: 13px;
  }
  .ftile-img {
    width: 70px;
    height: 70px;
  }
  #wizCombinedSequenceGrid .fam-strip .ftile-img,
  #wizSeqList .fam-strip .ftile-img,
  #wizSoundSeqList .fam-strip .ftile-img,
  .learn-sequence-strip .ftile-img,
  .sound-sequence-strip .ftile-img {
    width: 58px;
    height: 58px;
  }
  .fam-strip {
    width: 100%;
    padding: 2px 12px;
  }
  .ftiles {
    gap: 1px;
  }
  #wizCombinedSequenceGrid .fam-strip .ftiles,
  #wizSeqList .fam-strip .ftiles,
  #wizSoundSeqList .fam-strip .ftiles,
  .learn-sequence-strip .ftiles,
  .sound-sequence-strip .ftiles {
    gap: 0;
  }
  #wizCombinedSequenceGrid .fam-strip .farr,
  #wizSeqList .fam-strip .farr,
  #wizSoundSeqList .fam-strip .farr,
  .learn-sequence-strip .farr,
  .sound-sequence-strip .farr {
    font-size: 8px;
  }
  .fam-strip-list--tight .ftiles {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .fam-strip-note {
    margin-left: 0;
    display: block;
    width: 100%;
    text-align: center;
    white-space: normal;
  }
}

@media (hover: none) and (pointer: coarse) {
  #wizCombinedSequenceGrid .fam-strip .ftile-img,
  #wizSeqList .fam-strip .ftile-img,
  #wizSoundSeqList .fam-strip .ftile-img,
  .learn-sequence-strip .ftile-img,
  .sound-sequence-strip .ftile-img {
    width: 58px !important;
    height: 58px !important;
  }
  #wizCombinedSequenceGrid .fam-strip .ftiles,
  #wizSeqList .fam-strip .ftiles,
  #wizSoundSeqList .fam-strip .ftiles,
  .learn-sequence-strip .ftiles,
  .sound-sequence-strip .ftiles {
    gap: 0 !important;
  }
  #wizCombinedSequenceGrid .fam-strip .farr,
  #wizSeqList .fam-strip .farr,
  #wizSoundSeqList .fam-strip .farr,
  .learn-sequence-strip .farr,
  .sound-sequence-strip .farr {
    font-size: 8px !important;
  }
  #wizCombinedSequenceGrid .fam-strip-list,
  #wizLearnDrawer .fam-strip-list {
    padding-left: 0 !important;
  }
}

/* Keep onboarding/profile setup spacing stable on mobile, independent of practice-wizard tweaks. */
#screenOnboarding .wiz-step {
  justify-content: flex-start;
  padding-top: calc(var(--onboarding-top-start) + var(--app-top-offset, 0px) + env(safe-area-inset-top, 0px));
}
#screenOnboarding .wiz-question {
  margin-bottom: var(--onboarding-question-gap);
}

@media (max-width: 640px) {
  #screenOnboarding .wiz-step {
    justify-content: flex-start;
    padding-top: calc(var(--onboarding-mobile-top-start) + var(--app-top-offset, 0px) + env(safe-area-inset-top, 0px));
  }

  #screenOnboarding .wiz-btn-row {
    width: 100%;
  }
  #screenOnboarding .wiz-btn:not(.wiz-btn-sm) {
    width: min(390px, 100%) !important;
    max-width: none !important;
  }

  #screenOnboarding .wiz-question {
    margin-bottom: var(--onboarding-mobile-question-gap);
  }
}

@media (max-width: 640px) and (max-height: 500px) {
  #screenOnboarding .wiz-step {
    overflow-y: auto;
    padding-top: calc(var(--onboarding-mobile-top-start-compact) + var(--app-top-offset, 0px) + env(safe-area-inset-top, 0px));
  }
}

/* Keep practice wizard spacing aligned with onboarding and keep wiz0 source buttons on one row. */
#screenSetup #wiz0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#screenSetup #wiz0 .pb-btn,
#screenSetup #wiz0 .act-div,
#screenSetup #wiz0 .wiz0-source-row,
#screenSetup #wiz0 .wiz0-home-wrap,
#screenSetup #wiz0 .stage-grid,
#screenSetup #wiz0 .corpus-toggle,
#screenSetup #wiz0 .wiz-nav {
  width: min(420px, calc(100vw - 40px)) !important;
  max-width: min(420px, calc(100vw - 40px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#screenSetup .wiz-step {
  justify-content: flex-start;
  padding-top: calc(var(--onboarding-top-start) + var(--app-top-offset, 0px) + env(safe-area-inset-top, 0px)) !important;
}

#screenSetup #wiz0 {
  justify-content: flex-start;
}

#screenSetup #wiz0 .wiz-question {
  margin-bottom: 4px !important;
}

#screenSetup #wiz0 .wiz0-intro {
  width: var(--wiz0-control-width);
  margin: 0 auto 8px !important;
  padding-inline: 0;
}

#screenSetup .wiz-s {
  margin: 0 auto 8px;
}

#screenSetup #wiz0 #wiz0Corpus,
#screenSetup #wiz0 #wiz0Mode,
#screenSetup #wiz0 #obReadingSourceWrap,
#screenSetup #wiz0 #wiz0Type {
  padding-top: 12px !important;
}

#screenSetup #wiz0 .wiz0-stage::before,
#screenSetup #wiz0 #wiz0Mode::before,
#screenSetup #wiz0 #wiz0Type::before {
  margin: 0 auto 10px !important;
}

#screenSetup #wiz0 .wiz0-divider {
  margin: 10px auto 0 !important;
}

#screenSetup #wizVS_hbd.voice-setup-step {
  width: 100%;
  max-width: none;
  justify-content: center !important;
  align-items: center;
  padding: calc(24px + var(--app-top-offset, 0px) + env(safe-area-inset-top, 0px)) 20px calc(34px + env(safe-area-inset-bottom, 0px)) !important;
}

#screenSetup #wizVS_hbd .voice-setup-card {
  box-sizing: border-box;
  width: min(620px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 32px 26px 24px;
  border: 1px solid rgba(75, 42, 102, 0.16);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(75, 42, 102, 0.22);
  text-align: center;
}

#screenSetup #wizVS_hbd .voice-setup-title {
  margin: 0 auto 14px;
  color: var(--text);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
  max-width: 520px;
}

#screenSetup #wizVS_hbd .voice-setup-back {
  display: block;
  margin: 22px auto 0;
}

#screenSetup .reading-picker-step,
#screenOnboarding .reading-picker-step {
  box-sizing: border-box;
  left: 50% !important;
  right: auto !important;
  top: calc(50% + (var(--app-top-offset, 0px) / 2)) !important;
  bottom: auto !important;
  width: min(720px, calc(100vw - 40px)) !important;
  max-width: min(720px, calc(100vw - 40px)) !important;
  max-height: calc(100dvh - var(--app-top-offset, 0px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  min-height: 0;
  justify-content: flex-start !important;
  align-items: center;
  padding: 32px 26px 24px !important;
  border: 1px solid rgba(75, 42, 102, 0.16);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(75, 42, 102, 0.22);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: readingPickerFadeIn 0.24s ease;
}

@keyframes readingPickerFadeIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

#screenSetup .reading-picker-step .wiz-q,
#screenSetup .reading-picker-step .wiz-question,
#screenOnboarding .reading-picker-step .wiz-q,
#screenOnboarding .reading-picker-step .wiz-question {
  margin: 8px auto 10px !important;
  color: var(--text);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
  max-width: 580px;
}

#screenSetup .reading-picker-step .wiz-s,
#screenOnboarding .reading-picker-step .wiz-s {
  margin: 0 auto 20px;
  color: var(--text-mid);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  max-width: 580px;
}

#screenSetup .reading-picker-step .wiz-parasha-wrap,
#screenSetup .reading-picker-step > .wiz-haft-row,
#screenSetup .reading-picker-step .wiz-panel,
#screenOnboarding .reading-picker-step .wiz-parasha-wrap,
#screenOnboarding .reading-picker-step > .wiz-haft-row,
#screenOnboarding .reading-picker-step .wiz-panel {
  width: min(100%, 580px);
  max-width: 580px;
  border: 1px solid rgba(75, 42, 102, 0.14);
  border-radius: 10px;
  background: #fbf9ff;
  box-shadow: none;
}

#screenSetup .reading-picker-step > .wiz-haft-row,
#screenOnboarding .reading-picker-step > .wiz-haft-row {
  margin: 10px auto 16px;
  padding: 12px 16px;
}

#screenOnboarding #ob6.reading-picker-step .wiz-parasha-wrap {
  background: transparent;
  border: 0;
  padding: 0;
}

#screenOnboarding #ob6.reading-picker-step #obReadingDetailsWrap {
  width: min(100%, 620px) !important;
  max-width: 620px !important;
  margin-top: 18px !important;
  border: 1px solid rgba(75, 42, 102, 0.14);
  border-radius: 10px;
  background: #fbf9ff;
  padding: 16px;
  box-sizing: border-box;
}

#screenSetup .reading-picker-step .wiz-nav,
#screenOnboarding .reading-picker-step .wiz-nav {
  width: min(100%, 580px);
  max-width: 580px;
  margin-top: 22px;
  padding-bottom: 0;
}

#screenSetup #wiz0 .wiz0-source-row {
  display: flex;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100%;
  max-width: 420px;
}

#screenSetup #wiz0 .wiz0-source-row .wiz-btn {
  display: inline-flex !important;
  align-items: center !important;
  flex: 1 1 0;
  width: 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
  justify-content: center !important;
}

@media (max-width: 640px) {
  body[data-active-screen="screenTropeCatcher"] main,
  body[data-active-screen="screenTropeMatching"] main,
  body[data-active-screen="screenTropeSequencing"] main,
  body[data-active-screen="screenMilrahMileilSort"] main {
    height: calc(100dvh - var(--app-top-offset, 82px)) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  #screenMilrahMileilSort.active {
    height: auto;
    min-height: 100%;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  #screenMilrahMileilSort .mms-wrap,
  #screenMilrahMileilSort .mms-step {
    min-height: 0;
  }

  #screenMilrahMileilSort .mms-game-card,
  #screenMilrahMileilSort .mms-targets-row {
    touch-action: pan-y;
  }

  #screenMilrahMileilSort .mms-word-card {
    touch-action: pan-y;
  }

  #screenTropeSequencing.active {
    height: auto;
    min-height: 100%;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  #screenTropeSequencing .tsg-wrap,
  #screenTropeSequencing .tg-step {
    min-height: 0;
    touch-action: pan-y;
  }

  #screenTropeSequencing .tdg-answer-area,
  #screenTropeSequencing .tdg-drop-zone,
  #screenTropeSequencing .tdg-choice-strip {
    touch-action: pan-y;
  }

  #screenTropeSequencing .tdg-choice-btn,
  #screenTropeSequencing .tdg-seq-slot {
    touch-action: none;
  }

  #screenTropeCatcher.active {
    height: auto;
    min-height: 100%;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  #screenTropeCatcher .tgc-wrap,
  #screenTropeCatcher .tgc-step {
    min-height: 0;
    touch-action: pan-y;
  }

  #screenTropeCatcher #tgcPanelGame,
  #screenTropeCatcher .tgc-field-shell {
    overflow: visible;
    touch-action: pan-y;
  }

  #screenTropeCatcher .tgc-field {
    overflow: hidden;
    touch-action: pan-y;
  }

  #screenTropeCatcher .tgc-faller-hit {
    touch-action: manipulation;
  }

  #screenTropeMatching.active {
    height: auto;
    min-height: 100%;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  #screenTropeMatching .tmg-wrap,
  #screenTropeMatching .tmg-step {
    min-height: 0;
    touch-action: pan-y;
  }

  #screenTropeMatching .tmg-practice-board,
  #screenTropeMatching .tmg-choice-grid,
  #screenTropeMatching .tmg-test-prompt {
    touch-action: pan-y;
  }

  #screenStudentCrash.active {
    height: auto;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  }

  #screenStudentCrash .student-scroll-page {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: visible;
  }

  #screenTropeFlashcards {
    overflow-y: visible !important;
    min-height: auto;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .learn-micro-word {
    scroll-margin-top: calc(var(--app-top-offset, 82px) + env(safe-area-inset-top, 0px) + 16px);
  }

  .learn-mobile-scroll-spacer {
    display: none;
  }

  #screenSetup .wiz-step {
    padding-top: calc(var(--onboarding-mobile-top-start) + var(--app-top-offset, 0px) + env(safe-area-inset-top, 0px)) !important;
  }

  #screenSetup #wiz0 .wiz0-intro {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    margin: 0 auto 8px !important;
    padding-inline: 0 !important;
  }

  #screenSetup #wiz0 .pb-btn,
  #screenSetup #wiz0 .act-div,
  #screenSetup #wiz0 .wiz0-source-row,
  #screenSetup #wiz0 .wiz0-home-wrap,
  #screenSetup #wiz0 .stage-grid,
  #screenSetup #wiz0 .corpus-toggle,
  #screenSetup #wiz0 .wiz-nav {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #screenSetup #wiz0 #wiz0Corpus,
  #screenSetup #wiz0 #wiz0Mode,
  #screenSetup #wiz0 #obReadingSourceWrap,
  #screenSetup #wiz0 #wiz0Type {
    padding-top: 10px !important;
  }

  #screenSetup #wiz0 .wiz0-source-row .wiz-btn {
    min-height: 56px !important;
    padding: 12px 13px !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }

  #screenSetup .reading-picker-step,
  #screenOnboarding .reading-picker-step {
    top: calc(50% + (var(--app-top-offset, 0px) / 2)) !important;
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - var(--app-top-offset, 0px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 28px);
    padding: 24px 16px 18px !important;
  }

  #screenSetup .reading-picker-step .wiz-q,
  #screenSetup .reading-picker-step .wiz-question,
  #screenOnboarding .reading-picker-step .wiz-q,
  #screenOnboarding .reading-picker-step .wiz-question {
    font-size: 28px;
  }

  #screenSetup .reading-picker-step .wiz-s,
  #screenOnboarding .reading-picker-step .wiz-s {
    font-size: 15px;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  html[data-active-screen="screenStudentCrash"] {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior-y: contain;
  }

  body[data-active-screen="screenStudentCrash"] {
    height: 100%;
    min-height: 0;
    padding-top: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior-y: contain;
  }

  body[data-active-screen="screenStudentCrash"] #app-container {
    height: 100dvh;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  body[data-active-screen="screenStudentCrash"] main {
    height: auto !important;
    min-height: 0 !important;
    width: 100%;
    max-width: none;
    padding: 0 0 32px;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    touch-action: pan-y;
  }

  body[data-active-screen="screenStudentCrash"] > #app-container > header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    height: 54px;
  }

  #screenStudentCrash .student-scroll-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 10;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 8px max(14px, env(safe-area-inset-left)) 7px max(14px, env(safe-area-inset-right));
    box-shadow: 0 5px 16px rgba(75, 42, 102, 0.08);
  }

  #screenStudentCrash.active {
    height: auto;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    touch-action: pan-y;
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  }

  #screenStudentCrash .student-scroll-page {
    min-height: 0;
    padding-top: 18px;
    overflow-x: hidden;
    overflow-y: visible;
  }

  #screenStudentCrash .student-scroll-method-stage {
    height: auto;
    min-height: 700px;
  }

  #screenStudentCrash .student-scroll-method-panel {
    grid-template-rows: minmax(342px, 1fr) 96px 166px;
  }

  #screenStudentCrash .student-scroll-method-visual,
  #screenStudentCrash .student-scroll-method-practice-demo {
    min-height: 342px;
    padding-top: 39px;
    padding-bottom: 22px;
  }

  #screenStudentCrash .student-scroll-method-siluk-map {
    min-height: 285px;
  }

  #screenStudentCrash .student-scroll-method-panel > .student-scroll-method-soundfont-control,
  #screenStudentCrash .student-scroll-method-panel > .student-scroll-method-tool-row {
    min-height: 96px;
    margin-top: 4px;
    margin-bottom: 10px;
  }

  #screenStudentCrash .student-scroll-method-icon-control {
    width: 84px;
    flex-basis: 84px;
  }

  #screenStudentCrash .student-scroll-method-tool-row .action-btn,
  #screenStudentCrash .student-scroll-method-soundfont-btn {
    width: 65px;
    height: 65px;
    min-width: 65px;
    min-height: 65px;
  }

  #screenStudentCrash .student-scroll-method-tool-row .action-btn-icon,
  #screenStudentCrash .student-scroll-method-soundfont-btn .action-btn-icon {
    width: 46px;
    height: 46px;
  }

  #screenStudentCrash .student-scroll-method-waveform-btn .action-btn-icon {
    width: 54px;
    height: 54px;
  }

  #screenStudentCrash .student-scroll-method-record-btn .action-btn-icon {
    width: 39px;
    height: 39px;
  }

  #screenStudentCrash .student-scroll-method-park-btn .action-btn-icon {
    width: 43px;
    height: 43px;
  }

  #screenStudentCrash .student-scroll-method-panel[data-student-method-panel="4"] .student-scroll-method-icon-control {
    width: 76px;
    flex-basis: 76px;
  }

  #screenStudentCrash .student-scroll-method-panel[data-student-method-panel="4"] .student-scroll-method-tool-row .action-btn,
  #screenStudentCrash .student-scroll-method-panel[data-student-method-panel="4"] .student-scroll-method-soundfont-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }

  #screenStudentCrash .student-scroll-method-panel[data-student-method-panel="4"] .student-scroll-method-tool-row .action-btn-icon,
  #screenStudentCrash .student-scroll-method-panel[data-student-method-panel="4"] .student-scroll-method-soundfont-btn .action-btn-icon {
    width: 34px;
    height: 34px;
  }

  #screenStudentCrash .student-scroll-method-panel[data-student-method-panel="4"] .student-scroll-method-waveform-btn .action-btn-icon {
    width: 40px;
    height: 40px;
  }

  #screenStudentCrash .student-scroll-method-panel[data-student-method-panel="4"] .student-scroll-method-record-btn .action-btn-icon {
    width: 29px;
    height: 29px;
  }

  #screenStudentCrash .student-scroll-method-panel[data-student-method-panel="4"] .student-scroll-method-park-btn .action-btn-icon {
    width: 32px;
    height: 32px;
  }
}

/* wiz3b needs a little extra clearance from the sticky header. */
#screenSetup #wiz3b {
  padding-top: calc(56px + var(--app-top-offset, 0px) + env(safe-area-inset-top, 0px)) !important;
}

@media (max-width: 640px) {
  #screenSetup #wiz3b {
    padding-top: calc(var(--wiz-mobile-top-start) + 20px + var(--app-top-offset, 0px) + env(safe-area-inset-top, 0px)) !important;
  }
}


/* ── Practice Tour Overlay ── */
#practiceTourOverlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 9000;
  pointer-events: auto;
}
#btnTourClose {
  position: absolute;
  top: -52px; right: -12px;
  z-index: 9003;
  background: none;
  border: none;
  font-size: 56px;
  line-height: 1;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  padding: 0;
}
#btnTourClose:hover { color: rgba(255,255,255,0.75); }
#tourSpotlightRing {
  position: fixed;
  box-sizing: border-box;
  border: 3px solid #e53935;
  border-radius: 12px;
  box-shadow: 0 0 0 4000px rgba(0,0,0,0.35), 0 0 16px 4px rgba(229,57,53,0.6);
  z-index: 9001;
  pointer-events: none;
  transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
}
#tourArrow {
  position: fixed;
  font-size: 28px;
  color: #e53935;
  text-align: center;
  z-index: 9002;
  pointer-events: none;
  animation: tourArrowBounce 0.8s ease-in-out infinite alternate;
}
@keyframes tourArrowBounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}
@keyframes dlgPopCentered {
  from { transform: translateX(-50%) scale(0.8); opacity: 0; }
  to   { transform: translateX(-50%) scale(1); opacity: 1; }
}
#tourMessagePanel {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(90vw, 380px);
  height: fit-content;
  background: var(--white);
  border-radius: 16px;
  padding: 24px 24px 20px;
  z-index: 9002;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  animation: dlgPop 0.3s cubic-bezier(0.18,0.89,0.32,1.28) both;
}
@media (min-width: 641px) {
  #tourMessagePanel {
    top: auto;
    right: auto;
    bottom: 72px;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    animation: dlgPopCentered 0.3s cubic-bezier(0.18,0.89,0.32,1.28) both;
  }
}
@media (max-width: 640px) {
  #tourMessagePanel {
    inset: auto 5vw 24px;
    margin: 0;
    width: 90vw;
  }
}
#tourMessageText {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 20px;
  text-align: center;
}

/* ── Tikkun Panel ── */
.tikkun-panel {
  padding: 0;
  display: none; flex-direction: column;
  max-height: 60vh;
}
.tikkun-panel .rec-panel-head {
  padding: 10px 16px;
  margin-bottom: 0;
  flex-shrink: 0;
  flex-wrap: wrap; gap: 6px;
}
.tikkun-panel.visible { display: flex; }
#screenPractice #tikkunPanel {
  height: auto;
  min-height: 0;
  max-height: min(72vh, 620px);
}
#screenPractice #tikkunPanel .tikkun-body {
  min-height: 0;
  max-height: min(58vh, 500px);
}
.wiz-reading-tikkun-icon-btn {
  margin: 12px auto 0;
}
#wiz0 .wiz-reading-tikkun-icon-btn {
  margin-bottom: 4px;
}
.wiz-reading-tikkun-icon-btn.active {
  background: rgba(255, 255, 255, 0.94);
  color: var(--purple);
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(96, 26, 119, 0.18), 0 8px 18px rgba(96, 26, 119, 0.12);
}
.wiz-reading-tikkun-icon-btn.is-loading {
  cursor: wait;
  opacity: 0.78;
  position: relative;
}
.wiz-reading-tikkun-icon-btn.is-loading::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(96, 26, 119, 0.28);
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: wiz-reading-spin 0.75s linear infinite;
}
@keyframes wiz-reading-spin {
  to { transform: rotate(360deg); }
}
.wiz-reading-view-label {
  display: block;
  margin: 0 auto 8px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.wiz-reading-view-btn {
  display: block;
  width: auto;
  min-width: 0;
  margin: 10px auto 8px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--purple);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
}
.wiz-reading-tikkun-panel {
  width: min(720px, 100%);
  margin: 14px auto 0;
  max-height: none;
  min-height: min(520px, calc(100dvh - 170px));
}
.wiz-reading-tikkun-panel .tikkun-body {
  max-height: calc(100dvh - 260px);
}

.tikkun-mode-bar {
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--border2, #eee);
  flex-shrink: 0;
}
.tikkun-reading-label {
  padding: 8px 16px 9px;
  border-top: 1px solid var(--border2, #eee);
  border-bottom: 1px solid var(--border2, #eee);
  background: rgba(96,26,119,0.055);
  color: var(--text-mid);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.35;
  text-align: center;
  flex-shrink: 0;
}
.tikkun-mode-group {
  display: flex;
  background: var(--bg, #f5f5f5);
  border: 1.5px solid var(--border, #ddd);
  border-radius: 10px;
  padding: 3px; gap: 2px;
}
.tikkun-mode-btn {
  flex: 1; padding: 7px 6px;
  border: none; background: transparent;
  border-radius: 7px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  transition: background 0.15s, color 0.15s;
}
.tikkun-mode-btn.active {
  background: var(--white); color: var(--purple);
  box-shadow: 0 1px 4px rgba(96,26,119,0.13);
}
.tikkun-col-labels {
  display: grid;
  grid-template-columns: 36px 1fr 20px 1fr;
  padding: 5px 16px 4px;
  background: var(--bg, #f5f5f5);
  border-bottom: 1px solid var(--border2, #eee);
  flex-shrink: 0;
  direction: ltr;
}
.tikkun-col-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim);
  text-align: center;
}
.tikkun-lbl-div { background: var(--border, #ddd); }

.tikkun-body {
  flex: 1; overflow-y: auto;
  padding: 4px 14px 32px;
  -webkit-overflow-scrolling: touch;
}
.tikkun-aliyah-label {
  margin: 12px 0 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(96,26,119,0.09);
  color: var(--purple);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.tikkun-aliyah-label:first-child {
  margin-top: 6px;
}

/* Verse rows */
.tikkun-verse-scroll,
.tikkun-verse-trope {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: baseline;
  padding: 5px 2px;
  border-bottom: 1px solid var(--border2, #eee);
  direction: ltr;
}
.tikkun-verse-side {
  display: grid;
  grid-template-columns: 36px 1fr 20px 1fr;
  align-items: start;
  padding: 4px 2px;
  border-bottom: 1px solid var(--border2, #eee);
  direction: ltr;
}
.tikkun-col-divider {
  position: relative;
}
.tikkun-col-divider::after {
  content: '';
  position: absolute;
  top: 4px; bottom: 4px;
  left: 50%; width: 1px;
  background: var(--border2, #eee);
}

.tikkun-verse-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 600;
  color: var(--text-dim);
  padding-top: 6px;
  align-self: start;
}

/* Text columns */
.tikkun-col {
  direction: rtl; text-align: justify;
  padding: 3px 8px; line-height: 2.1;
}
.tikkun-verse-side .tikkun-col {
  line-height: var(--tikkun-side-line-height, 46px);
}
.tikkun-verse-side .tikkun-word {
  line-height: inherit;
  white-space: nowrap;
  overflow: visible;
}
.tikkun-word .vocal-shva-cluster {
  line-height: 1;
  overflow: visible;
}
.tikkun-word .vocal-shva-cluster::before {
  top: calc(-0.44em + 2px);
}
.tikkun-col--scroll-full {
  font-family: 'Shlomo Stam', 'SBL Hebrew', serif;
  font-size: 26px; font-weight: normal;
  color: #22103a;
  direction: rtl; text-align: justify;
  padding: 3px 8px; line-height: 2.0;
}
.tikkun-col--chumash-full {
  font-family: 'SBL Hebrew', serif;
  font-size: 30px; font-weight: 400;
  color: var(--text);
  direction: rtl; text-align: justify;
  padding: 3px 8px; line-height: 2.05;
}
.tikkun-col--scroll {
  font-family: 'Shlomo Stam', 'SBL Hebrew', serif;
  font-size: 20px; font-weight: normal; color: #22103a;
}
.tikkun-col--chumash {
  font-family: 'SBL Hebrew', serif;
  font-size: 24px; font-weight: 400; color: var(--text);
}
.tikkun-word .kk-vowel-overlay {
  top: 0.48em;
}
.tikkun-word .kk-vowel,
.tikkun-word .kk-vowel-overlay {
  color: #666 !important;
  -webkit-text-fill-color: #666 !important;
}
.tikkun-hi .kk-vowel,
.tikkun-hi .kk-vowel-overlay {
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.95),
    0 0 2px rgba(255, 255, 255, 0.85);
}
.tikkun-hi-selected .kk-vowel,
.tikkun-hi-selected .kk-vowel-overlay {
  color: #555 !important;
  -webkit-text-fill-color: #555 !important;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 1),
    0 0 3px rgba(255, 255, 255, 0.92);
}

/* Active word highlight — color matches practice stage */
.tikkun-hi {
  background: rgba(96,26,119,0.13); /* default: purple (frequent / no stage) */
  border-radius: 3px;
}
.tikkun-panel[data-stage="foundational"] .tikkun-hi { background: rgba(214,34,34,0.15); }
.tikkun-panel[data-stage="frequent"]     .tikkun-hi { background: rgba(158,104,180,0.15); }
.tikkun-panel[data-stage="infrequent"]   .tikkun-hi { background: rgba(104,130,180,0.15); }
.tikkun-panel[data-stage="rare"]         .tikkun-hi { background: rgba(223,191,79,0.22); }
.tikkun-hi-selected {
  box-shadow: 0 0 0 2px rgba(96,26,119,0.28);
}
.tikkun-panel[data-stage="foundational"] .tikkun-hi-selected {
  background: rgba(214,34,34,0.28);
  box-shadow: 0 0 0 2px rgba(214,34,34,0.34);
}
.tikkun-panel[data-stage="frequent"] .tikkun-hi-selected {
  background: rgba(158,104,180,0.28);
  box-shadow: 0 0 0 2px rgba(158,104,180,0.36);
}
.tikkun-panel[data-stage="infrequent"] .tikkun-hi-selected {
  background: rgba(104,130,180,0.28);
  box-shadow: 0 0 0 2px rgba(104,130,180,0.36);
}
.tikkun-panel[data-stage="rare"] .tikkun-hi-selected {
  background: rgba(223,191,79,0.38);
  box-shadow: 0 0 0 2px rgba(180,136,22,0.34);
}
#screenPractice #tikkunPanel .tikkun-hi-clickable {
  cursor: pointer;
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}
#screenPractice #tikkunPanel .tikkun-hi-clickable:hover,
#screenPractice #tikkunPanel .tikkun-hi-clickable:focus-visible {
  box-shadow: 0 0 0 2px rgba(96, 26, 119, 0.22);
  outline: none;
}
#screenPractice #tikkunPanel .tikkun-hi-clickable:active {
  transform: scale(0.98);
}

/* Section break rows */
.tikkun-section-break {
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 4px 2px;
  grid-column: 1 / -1;
}

/* Mode visibility — default is side-by-side */
.tikkun-verse-scroll, .tikkun-verse-trope { display: none; }
.tikkun-verse-side                        { display: grid; }
.tikkun-col-labels                        { display: grid; }

.tikkun-panel.mode-scroll .tikkun-verse-side,
.tikkun-panel.mode-scroll .tikkun-verse-trope  { display: none; }
.tikkun-panel.mode-scroll .tikkun-verse-scroll { display: grid; }
.tikkun-panel.mode-scroll .tikkun-col-labels   { display: none; }

.tikkun-panel.mode-trope .tikkun-verse-side,
.tikkun-panel.mode-trope .tikkun-verse-scroll  { display: none; }
.tikkun-panel.mode-trope .tikkun-verse-trope   { display: grid; }
.tikkun-panel.mode-trope .tikkun-col-labels    { display: none; }

/* ─── Trope Game Screen ─────────────────────────────────────────────────────── */
#screenTropeGame {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 40px;
  overflow-y: auto;
}
#screenTropeDictation {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 40px;
  overflow-y: auto;
}
#screenTropeSequencing {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 40px;
  overflow-y: auto;
}
#screenTropeCatcher {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 40px;
  overflow-y: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#screenTropeFlashcards {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 40px;
  overflow-y: auto;
}
#screenTropeMatching {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 40px;
  overflow-y: auto;
}
#screenMilrahMileilSort {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 40px;
  overflow-y: auto;
}
.tg-wrap {
  width: 100%;
  max-width: 640px;
}
.tgc-wrap {
  width: 100%;
  max-width: 760px;
  touch-action: manipulation;
}
.tfg-wrap {
  width: 100%;
  max-width: 860px;
}
.tmg-wrap {
  width: 100%;
  max-width: 860px;
}
.mms-wrap {
  width: 100%;
  max-width: 760px;
}
.tg-step {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tgc-step {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tfg-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.tmg-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.mms-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.mms-reminder {
  font-weight: 800;
}
.mms-reminder span {
  display: block;
}
.tg-title {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--purple);
  text-align: center;
  font-size: 1.6em;
  margin: 0 0 8px;
}
.tg-sub {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.92em;
  margin: 0 0 20px;
}
.tg-btn-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 20px;
}
#screenTropeGame .wiz-btn:not(.wiz-back-btn),
#screenTropeDictation .wiz-btn:not(.wiz-back-btn),
#screenTropeSequencing .wiz-btn:not(.wiz-back-btn),
#screenTropeCatcher .wiz-btn:not(.wiz-back-btn),
#screenTropeFlashcards .tfg-tip-actions .wiz-btn,
#screenTropeMatching .wiz-btn:not(.wiz-back-btn),
#screenMilrahMileilSort .wiz-btn:not(.wiz-back-btn) {
  min-height: 54px;
  padding: 10px 22px;
  border: 1.5px solid rgba(96, 26, 119, 0.32);
  border-radius: 999px;
  background: #fff;
  color: var(--purple);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-align: center;
  box-shadow: none;
}

#screenTropeGame .wiz-btn:not(.wiz-back-btn),
#screenTropeDictation #tdgStepMode .wiz-btn,
#screenTropeDictation #tdgStepDifficulty .wiz-btn,
#screenTropeCatcher #tgcStepSetup .wiz-btn,
#screenTropeMatching #tmgStepMode .wiz-btn,
#screenTropeMatching #tmgStepDifficulty .wiz-btn,
#screenMilrahMileilSort #mmsStepIntro .wiz-btn {
  min-height: 64px;
}

#screenTropeGame .wiz-btn:not(.wiz-back-btn):hover:not(:disabled),
#screenTropeDictation .wiz-btn:not(.wiz-back-btn):hover:not(:disabled),
#screenTropeSequencing .wiz-btn:not(.wiz-back-btn):hover:not(:disabled),
#screenTropeCatcher .wiz-btn:not(.wiz-back-btn):hover:not(:disabled),
#screenTropeFlashcards .tfg-tip-actions .wiz-btn:hover:not(:disabled),
#screenTropeMatching .wiz-btn:not(.wiz-back-btn):hover:not(:disabled),
#screenMilrahMileilSort .wiz-btn:not(.wiz-back-btn):hover:not(:disabled) {
  border-color: var(--purple);
  background: #f3e8fa;
  color: var(--purple);
}

#screenTropeGame .wiz-btn.selected:not(.wiz-back-btn),
#screenTropeDictation .wiz-btn.selected:not(.wiz-back-btn),
#screenTropeSequencing .wiz-btn.selected:not(.wiz-back-btn),
#screenTropeCatcher .wiz-btn.selected:not(.wiz-back-btn),
#screenTropeFlashcards .tfg-tip-actions .wiz-btn.selected,
#screenTropeMatching .wiz-btn.selected:not(.wiz-back-btn),
#screenMilrahMileilSort .wiz-btn.selected:not(.wiz-back-btn) {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}

#screenTropeGame .wiz-btn.selected:not(.wiz-back-btn) span,
#screenTropeDictation .wiz-btn.selected:not(.wiz-back-btn) span,
#screenTropeSequencing .wiz-btn.selected:not(.wiz-back-btn) span,
#screenTropeCatcher .wiz-btn.selected:not(.wiz-back-btn) span,
#screenTropeMatching .wiz-btn.selected:not(.wiz-back-btn) span,
#screenMilrahMileilSort .wiz-btn.selected:not(.wiz-back-btn) span {
  color: #fff;
}

#screenTropeGame .wiz-btn:not(.wiz-back-btn) span:last-child,
#screenTropeDictation .wiz-btn:not(.wiz-back-btn) span:last-child,
#screenTropeSequencing .wiz-btn:not(.wiz-back-btn) span:last-child,
#screenTropeCatcher .wiz-btn:not(.wiz-back-btn) span:last-child,
#screenTropeMatching .wiz-btn:not(.wiz-back-btn) span:last-child,
#screenMilrahMileilSort .wiz-btn:not(.wiz-back-btn) span:last-child {
  font-weight: 500;
}
#screenTropeDictation .corpus-toggle,
#screenTropeSequencing .corpus-toggle,
#screenTropeCatcher .corpus-toggle,
#screenTropeFlashcards .corpus-toggle {
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

#screenTropeDictation .game-corpus-toggle,
#screenTropeSequencing .game-corpus-toggle,
#screenTropeCatcher .game-corpus-toggle,
#screenTropeFlashcards .game-corpus-toggle {
  gap: 0;
  overflow: hidden;
  border: 1.5px solid rgba(96, 26, 119, 0.32);
  border-radius: 999px;
  background: #fff;
}

#screenTropeDictation .corpus-btn,
#screenTropeSequencing .corpus-btn,
#screenTropeCatcher .corpus-btn,
#screenTropeFlashcards .corpus-btn {
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid rgba(96, 26, 119, 0.32);
  border-radius: 999px;
  background: #fff;
  color: var(--purple);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  box-shadow: none;
}

#screenTropeDictation .game-corpus-toggle .corpus-btn,
#screenTropeSequencing .game-corpus-toggle .corpus-btn,
#screenTropeCatcher .game-corpus-toggle .corpus-btn,
#screenTropeFlashcards .game-corpus-toggle .corpus-btn {
  border: 0;
  border-radius: 0;
}

#screenTropeDictation .corpus-btn + .corpus-btn,
#screenTropeSequencing .corpus-btn + .corpus-btn,
#screenTropeCatcher .corpus-btn + .corpus-btn,
#screenTropeFlashcards .corpus-btn + .corpus-btn {
  border-left: 1.5px solid rgba(96, 26, 119, 0.32);
}

#screenTropeDictation .corpus-btn:hover:not(:disabled),
#screenTropeSequencing .corpus-btn:hover:not(:disabled),
#screenTropeCatcher .corpus-btn:hover:not(:disabled),
#screenTropeFlashcards .corpus-btn:hover:not(:disabled) {
  border-color: var(--purple);
  background: #f3e8fa;
  color: var(--purple);
}

#screenTropeDictation .corpus-btn.selected,
#screenTropeSequencing .corpus-btn.selected,
#screenTropeCatcher .corpus-btn.selected,
#screenTropeFlashcards .corpus-btn.selected {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}

#screenTropeDictation .corpus-btn.selected:hover:not(:disabled),
#screenTropeDictation .corpus-btn.selected:active:not(:disabled),
#screenTropeDictation .corpus-btn.selected:focus-visible,
#screenTropeSequencing .corpus-btn.selected:hover:not(:disabled),
#screenTropeSequencing .corpus-btn.selected:active:not(:disabled),
#screenTropeSequencing .corpus-btn.selected:focus-visible,
#screenTropeCatcher .corpus-btn.selected:hover:not(:disabled),
#screenTropeCatcher .corpus-btn.selected:active:not(:disabled),
#screenTropeCatcher .corpus-btn.selected:focus-visible,
#screenTropeFlashcards .corpus-btn.selected:hover:not(:disabled),
#screenTropeFlashcards .corpus-btn.selected:active:not(:disabled),
#screenTropeFlashcards .corpus-btn.selected:focus-visible {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}
.tg-mode-btn {
  width: 320px;
  max-width: 100%;
  padding: 14px 20px;
  background: var(--purple);
  color: #fff;
  border: 2px solid var(--purple);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, color 0.15s;
}
.tg-mode-btn:hover { background: #fff; color: var(--purple); }
.tg-mode-desc {
  font-size: 0.78em;
  font-weight: 400;
  opacity: 0.88;
}
.tg-back-link {
  background: none;
  border: none;
  color: var(--purple);
  font-family: var(--font-heading);
  font-size: 0.9em;
  cursor: pointer;
  text-decoration: underline;
  display: block;
  text-align: center;
  margin-top: 8px;
  padding: 4px 8px;
}
.tg-progress {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--blue);
  text-align: center;
  margin-bottom: 4px;
  min-height: 1.2em;
}
.tg-timer {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4em;
  color: var(--purple);
  text-align: center;
  margin-bottom: 8px;
}
.tg-audio-row {
  text-align: center;
  margin: 12px 0 16px;
}
.tg-play-glyph {
  font-family: "Segoe UI Symbol", "Arial Unicode MS", Arial, sans-serif;
  font-variant-emoji: text;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  line-height: 1;
}
.tg-play-btn {
  padding: 12px 36px;
  background: var(--blue);
  color: #fff;
  border: 2px solid var(--blue);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tg-play-btn:hover:not(:disabled) { background: #fff; color: var(--blue); }
.tg-play-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tg-choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  margin: 0 0 12px;
}
.tg-choice-btn {
  background: var(--white);
  border: 1.5px solid var(--border2);
  border-radius: 8px;
  padding: 14px 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.tg-choice-btn:hover:not(:disabled) { border-color: var(--purple); background: var(--purple-dim, #e8d8f0); }
.tg-choice-btn img {
  max-width: 120px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.tg-choice-btn.tg-correct { border-color: #4caf50; border-width: 2px; background: #e8f5e9; }
.tg-choice-btn.tg-incorrect { border-color: #c62828; border-width: 2px; background: #ffebee; }
.tg-choice-btn--seq { display: flex; align-items: center; padding: 10px 8px; }
.tg-seq-imgs { display: flex; gap: 3px; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.tg-seq-imgs img { max-height: 120px; max-width: 108px; height: auto; width: auto; display: block; }
.tg-correct-answer .tg-seq-imgs {
  justify-content: center;
  margin: 6px auto 0;
  gap: 0;
  width: fit-content;
}
.tg-correct-answer .tg-seq-imgs img { max-height: 120px; max-width: 108px; }
.tg-feedback {
  text-align: center;
  padding: 10px 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05em;
  margin: 6px 0;
  width: 100%;
}
.tg-feedback--correct { color: var(--blue); }
.tg-feedback--incorrect { color: #c62828; }
.mms-scorebar {
  width: 100%;
  max-width: 700px;
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.mms-score-item {
  font-size: 0.84em;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}
.mms-score-item span {
  color: var(--text);
  margin-left: 4px;
}
.mms-progress-wrap {
  width: 100%;
  max-width: 680px;
  margin: 0 0 18px;
}
.mms-progress-bar-bg {
  height: 6px;
  background: rgba(95, 87, 125, 0.16);
  border-radius: 999px;
  overflow: hidden;
}
.mms-progress-bar-fill {
  height: 100%;
  background: var(--purple);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.mms-progress-label {
  text-align: right;
  font-size: 0.78em;
  color: var(--text-dim);
  margin-top: 6px;
}
.mms-helper-text {
  width: 100%;
  max-width: 760px;
  margin: -6px 0 10px;
  color: var(--text-dim);
  font-size: 0.92em;
  font-style: italic;
  text-align: center;
  line-height: 1.35;
}
.mms-game-card {
  width: 100%;
  max-width: 760px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(41, 35, 70, 0.12);
  padding: clamp(18px, 4vw, 30px);
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.mms-word-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.mms-word-card {
  width: 100%;
  max-width: 430px;
  min-height: 180px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: grab;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.mms-word-card.is-dragging {
  cursor: grabbing;
  opacity: 0.5;
}
.mms-word-card.is-shaking {
  animation: mms-shake 0.4s ease;
}
@keyframes mms-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.mms-word-hebrew {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
  font-size: clamp(44px, 8vw, 68px);
  line-height: 1.2;
  direction: rtl;
  unicode-bidi: isolate;
  display: block;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 8px;
  padding: 10px 6px;
  transition: opacity 0.12s ease;
}
.mms-word-card.is-absorbing .mms-word-hebrew {
  opacity: 0;
}
.mms-fly-word {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
  font-size: clamp(44px, 8vw, 68px);
  line-height: 1.2;
  direction: rtl;
  unicode-bidi: isolate;
  white-space: nowrap;
  color: var(--text);
  opacity: 1;
  transform-origin: center center;
  will-change: transform, opacity;
}
.mms-word-transliteration {
  font-size: 0.88em;
  color: var(--text-dim);
  font-style: italic;
  min-height: 20px;
}
.mms-word-trope {
  margin-top: 12px;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--purple);
}
.mms-explanation-box {
  width: 100%;
  max-width: 700px;
  background: rgba(198, 40, 40, 0.12);
  border: 1px solid rgba(198, 40, 40, 0.32);
  border-radius: 12px;
  padding: 14px 16px;
  color: #8f1d1d;
  font-size: 0.9em;
  line-height: 1.6;
  margin-bottom: 16px;
  display: none;
}
.mms-explanation-box.visible {
  display: block;
}
.mms-explanation-box strong {
  color: #6f1515;
}
.mms-filter-block {
  width: min(390px, 100%);
  margin: 0 auto 16px;
  text-align: center;
}
.mms-filter-label {
  margin-bottom: 7px;
  color: var(--text-dim);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mms-filter-pills {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.mms-filter-pill {
  min-height: 36px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.88em;
  font-weight: 700;
  cursor: pointer;
}
.mms-filter-pill.selected {
  border-color: var(--purple);
  background: rgba(106, 90, 205, 0.14);
  color: var(--purple);
}
.mms-targets-row {
  width: 100%;
  max-width: 700px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 7vw, 56px);
  margin-bottom: 10px;
}
.mms-target-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.mms-target-shell {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  align-items: stretch;
  gap: 8px;
}
.mms-target-sublabel {
  font-size: 0.72em;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
}
.mms-drop-zone {
  width: 100%;
  position: relative;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.mms-drop-zone img {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.mms-drop-title {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 74%;
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.7vw, 1.5rem);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  pointer-events: none;
}
.mms-drop-title.milrah { color: #d1894a; }
.mms-drop-title.mileil { color: #4d93c9; }
.mms-vertical-progress {
  width: 14px;
  min-height: 100%;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: rgba(95, 87, 125, 0.08);
}
.mms-vertical-progress-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  border-radius: inherit;
  transition: height 0.28s ease;
}
.mms-vertical-progress-fill.milrah { background: linear-gradient(180deg, #f4c089, #d1894a); }
.mms-vertical-progress-fill.mileil { background: linear-gradient(180deg, #8ec3e8, #4d93c9); }
.mms-drop-zone.milrah-zone {
  border-color: transparent;
}
.mms-drop-zone.mileil-zone {
  border-color: transparent;
}
.mms-drop-zone.milrah-zone:hover,
.mms-drop-zone.milrah-zone.is-over {
  box-shadow: 0 10px 22px rgba(209, 137, 74, 0.14);
  transform: translateY(-1px);
}
.mms-drop-zone.mileil-zone:hover,
.mms-drop-zone.mileil-zone.is-over {
  box-shadow: 0 10px 22px rgba(77, 147, 201, 0.14);
  transform: translateY(-1px);
}
.mms-drop-count {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 44px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  font-size: 1.1em;
  font-weight: 800;
  text-align: center;
}
.mms-drop-count.milrah { color: #d1894a; }
.mms-drop-count.mileil { color: #4d93c9; }
.mms-key-hint {
  font-size: 0.76em;
  color: var(--text-dim);
  text-align: center;
}
.mms-key-hint kbd {
  background: rgba(95, 87, 125, 0.14);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: inherit;
  font-size: 0.94em;
}
.mms-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  pointer-events: none;
  z-index: 9999;
  background: var(--card-bg);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 8px 18px;
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
  font-size: 48px;
  line-height: 1.25;
  direction: rtl;
  opacity: 0.95;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
}
.mms-results-badge {
  width: 108px;
  height: 108px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  border: 3px solid var(--purple);
  background: rgba(149, 99, 191, 0.08);
  margin-bottom: 10px;
}
.mms-results-score {
  font-size: 3.5em;
  font-weight: 800;
  line-height: 1;
  color: var(--purple);
  margin-bottom: 8px;
}
.mms-results-sub {
  max-width: 360px;
}
.mms-results-breakdown {
  width: 100%;
  max-width: 700px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 16px;
}
.mms-breakdown-card {
  background: var(--card-bg);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.mms-breakdown-num {
  font-size: 2.1em;
  font-weight: 800;
}
.mms-breakdown-num.good { color: #4caf50; }
.mms-breakdown-num.bad { color: #c62828; }
.mms-breakdown-label {
  font-size: 0.72em;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.mms-word-review {
  width: 100%;
  max-width: 700px;
}
.mms-word-review-title {
  font-size: 0.75em;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.mms-review-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.mms-review-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.mms-review-dot.correct { background: #4caf50; }
.mms-review-dot.wrong { background: #c62828; }
.mms-review-hebrew {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif;
  font-size: 1.45em;
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right;
}
.mms-review-trl {
  font-size: 0.82em;
  color: var(--text-dim);
}
.mms-review-answer {
  font-size: 0.7em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mms-review-answer.milrah { color: #d1894a; }
.mms-review-answer.mileil { color: #4d93c9; }
.tg-correct-answer {
  text-align: center;
  padding: 12px;
  background: var(--cream);
  border-left: 3px solid var(--blue);
  width: 100%;
  margin-bottom: 8px;
}
#tmgCorrectAnswer.tg-correct-answer {
  background: var(--white);
  border: 1.5px solid var(--border2);
  border-radius: 10px;
}
.tg-correct-answer p { font-family: var(--font-heading); color: var(--blue); margin: 4px 0; font-size: 0.9em; }
.tg-correct-answer img { max-width: 90px; height: auto; display: block; margin: 6px auto; }
.tg-action-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.tg-btn-next {
  padding: 12px 28px;
  background: var(--blue);
  color: #fff;
  border: 2px solid var(--blue);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tg-btn-next:hover { background: #fff; color: var(--blue); }
.tdg-answer-area {
  width: 100%;
  margin: 14px 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tsg-answer-area {
  margin-top: 12px;
}
.tdg-slot-label {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82em;
}
.tdg-drop-zone {
  width: min(220px, 100%);
  min-height: 134px;
  border: 2px dashed var(--border2);
  border-radius: 10px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.tdg-drop-zone.is-sequence {
  width: min(100%, 560px);
  min-height: 152px;
  padding: 12px;
  overflow: hidden;
}
.tdg-drop-zone:hover {
  border-color: var(--purple);
  background: #f3f0ea;
}
.tdg-drop-zone.is-drag-target {
  border-color: var(--blue);
  background: rgba(40, 83, 143, 0.08);
  transform: scale(1.02);
}
.tdg-drop-zone.is-filled {
  border-style: solid;
  background: var(--white);
}
.tdg-drop-zone img {
  max-width: 138px;
  max-height: 92px;
  width: auto;
  height: auto;
  display: block;
}
.tdg-drop-placeholder {
  font-family: var(--font-heading);
  font-size: 0.92em;
  color: var(--text-light);
  text-align: center;
}
.tdg-seq-slots {
  width: max-content;
  min-width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.tdg-seq-shell {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
}
.tdg-seq-viewport {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.tdg-drop-zone.is-slot-dragging .tdg-seq-viewport {
  overflow-x: hidden;
}
.tdg-seq-nav {
  width: 34px;
  height: 70px;
  border-radius: 999px;
  border: 1.5px solid var(--border2);
  background: var(--white);
  color: var(--blue);
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tdg-seq-nav:hover,
.tdg-seq-nav:focus-visible {
  border-color: var(--blue);
  background: rgba(40, 83, 143, 0.08);
  outline: none;
}
.tdg-seq-nav:disabled {
  opacity: 0.35;
  cursor: default;
}
.tdg-seq-nav[hidden] {
  visibility: hidden;
  display: inline-flex;
}
.tdg-seq-slot {
  width: 96px;
  min-width: 96px;
  min-height: 108px;
  border: 1.5px dashed var(--border2);
  border-radius: 8px;
  background: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.tdg-seq-slot.is-filled {
  border-style: solid;
  background: var(--white);
  cursor: grab;
}
.tdg-seq-slot.is-filled:active {
  cursor: grabbing;
}
.tdg-seq-slot.is-drag-target {
  border-color: var(--blue);
  background: rgba(40, 83, 143, 0.08);
}
.tdg-seq-slot img {
  max-width: 84px;
  max-height: 86px;
  width: auto;
  height: auto;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
.tdg-seq-slot-index {
  font-family: var(--font-heading);
  font-size: 0.78em;
  color: var(--text-light);
}
.tdg-choice-strip {
  width: 100%;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.tdg-choice-btn {
  background: var(--white);
  border: 1.5px solid var(--border2);
  border-radius: 8px;
  padding: 12px 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s, opacity 0.15s;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.tdg-choice-btn:hover:not(:disabled) {
  border-color: var(--purple);
  background: var(--purple-dim);
}
.tdg-choice-btn.is-dragging {
  opacity: 0.35;
  transform: scale(0.98);
}
.tdg-choice-btn.is-used,
.tdg-choice-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
#screenTropeSequencing .tdg-choice-btn.is-used,
#screenTropeSequencing .tdg-choice-btn:disabled {
  pointer-events: none;
  touch-action: pan-y;
}
.tdg-choice-btn.is-selected {
  border-color: var(--blue);
  background: rgba(40, 83, 143, 0.08);
}
.tdg-choice-btn img {
  max-width: 120px;
  height: auto;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.tdg-drag-proxy {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  pointer-events: none;
  background: var(--white);
  border: 1.5px solid var(--blue);
  border-radius: 8px;
  padding: 12px 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  transform: translate(-9999px, -9999px);
}
.tdg-drag-proxy img {
  max-width: 120px;
  height: auto;
  display: block;
}
.tdg-action-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 6px 0 8px;
}
.tdg-action-row.is-answer-submitted {
  display: none;
}
.tdg-revise-hint {
  width: 100%;
  margin: -2px 0 10px;
  text-align: center;
  color: var(--blue);
  font-family: var(--font-heading);
  font-size: 0.92em;
  font-weight: 500;
}
#tdgNextRow.is-visible {
  display: flex !important;
  position: static;
  visibility: visible;
  opacity: 1;
  width: 100%;
  max-width: 100%;
  margin: 14px 0 10px;
  padding: 8px 0;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#tdgNextRow.is-visible .tg-btn-next,
#tsgNextRow.is-visible .tg-btn-next {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  min-height: 48px;
  visibility: visible;
  opacity: 1;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
  box-shadow: 0 8px 20px rgba(108, 92, 231, 0.22);
}
#tdgNextRow.is-visible .tg-btn-next:hover,
#tdgNextRow.is-visible .tg-btn-next:focus-visible,
#tsgNextRow.is-visible .tg-btn-next:hover,
#tsgNextRow.is-visible .tg-btn-next:focus-visible {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
  outline: none;
}
#tdgNextRow.is-visible .tg-btn-next:active,
#tsgNextRow.is-visible .tg-btn-next:active {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}
.tdg-clear-btn,
.tdg-submit-btn {
  min-width: 150px;
  min-height: 46px;
  width: auto;
  height: auto;
  border-radius: 999px;
  padding: 10px 24px;
}
#tdgBtnSubmit.submit-ready,
#tsgBtnSubmit.submit-ready {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
  box-shadow: 0 8px 20px rgba(96, 26, 119, 0.22);
}
#tdgBtnSubmit.submit-ready:hover,
#tdgBtnSubmit.submit-ready:focus-visible,
#tdgBtnSubmit.submit-ready:active,
#tsgBtnSubmit.submit-ready:hover,
#tsgBtnSubmit.submit-ready:focus-visible,
#tsgBtnSubmit.submit-ready:active {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}
.tdg-missed-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}
.tdg-missed-item {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--cream);
  border-left: 3px solid #c62828;
}
.tdg-missed-item img {
  max-width: 92px;
  height: auto;
  display: block;
}
.tsg-missed-item {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  border-left: 0;
  border: 1.5px solid var(--border2);
  border-radius: 10px;
  background: var(--white);
}
.tsg-missed-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tsg-missed-column .tg-seq-imgs {
  justify-content: center;
  flex-wrap: wrap;
}
.tgc-scorebar {
  width: 100%;
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.tgc-stat {
  background: var(--white);
  border: 1px solid var(--cream);
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
}
.tgc-stat--score {
  background: linear-gradient(180deg, #ffffff 0%, #f7f1fb 100%);
  box-shadow: 0 10px 24px rgba(96, 26, 119, 0.16);
}
.tgc-stat-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.76em;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.tgc-stat-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5em;
  font-weight: 800;
  color: var(--purple);
}
.tgc-stat--score .tgc-stat-value {
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
}
.tgc-stat-value.is-popping {
  animation: tgcScoreTilePop 260ms ease-out;
}
@keyframes tgcScoreTilePop {
  0% { transform: scale(1); }
  45% { transform: scale(1.18); color: var(--blue); }
  100% { transform: scale(1); }
}
.tgc-summary-primary-row {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.tgc-summary-try-again {
  min-width: 190px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.tgc-summary-try-again:hover,
.tgc-summary-try-again:focus-visible {
  background: #fff;
  color: var(--blue);
}
.tgc-summary-try-again:active {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}
.tgc-summary-back-row {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
.tgc-saved-scores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.tgc-saved-score {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--cream);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.tgc-saved-score__level {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.78em;
  font-weight: 800;
  color: var(--purple);
  margin-bottom: 4px;
}
.tgc-saved-score__meta {
  display: block;
  color: var(--text-dim);
  font-size: 0.82em;
  line-height: 1.35;
}
.tgc-button-scoreline {
  display: block;
  margin-top: 7px;
  color: var(--text-dim);
  font-size: 0.82em;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}
.tgc-sub {
  margin-bottom: 14px;
}
.tgc-field-shell {
  width: 100%;
  position: relative;
  margin: 4px 0 18px;
  touch-action: manipulation;
}
.tgc-field {
  position: relative;
  width: 100%;
  min-height: 480px;
  border: 3px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  overflow: hidden;
  background: #090d23 url("Assets/Images/backgrounds/bubble_background.jpg") center / cover no-repeat;
  box-shadow: inset 0 0 42px rgba(0, 0, 0, 0.34), 0 16px 38px rgba(18, 20, 47, 0.24);
  touch-action: manipulation;
}
.tgc-faller {
  --tgc-size: 92px;
  position: absolute;
  width: var(--tgc-size) !important;
  height: var(--tgc-size) !important;
  min-width: var(--tgc-size) !important;
  min-height: var(--tgc-size) !important;
  max-width: var(--tgc-size) !important;
  max-height: var(--tgc-size) !important;
  box-sizing: border-box;
  padding: 0;
  overflow: visible;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  contain: layout paint;
}
.tgc-faller-hit {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(4, 10, 31, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12%;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.18s ease, filter 0.12s ease, box-shadow 0.12s ease;
}
.tgc-faller-hit:hover:not(:disabled) {
  filter: drop-shadow(0 8px 12px rgba(96, 26, 119, 0.28));
  box-shadow: 0 12px 30px rgba(4, 10, 31, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.94);
}
.tgc-faller-mark {
  position: absolute;
  inset: 12%;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: 1;
  filter: brightness(0) contrast(2);
  transform: translateZ(0);
}
.tgc-faller.is-correct-hit {
  filter: drop-shadow(0 0 14px rgba(76, 175, 80, 0.62));
}
.tgc-faller.is-wrong-hit {
  filter: drop-shadow(0 0 14px rgba(198, 40, 40, 0.54));
}
.tgc-faller.is-fading {
  opacity: 0;
}
.tgc-catch-burst {
  position: absolute;
  z-index: 5;
  width: 1px;
  height: 1px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.tgc-catch-score {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 42px;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  animation: tgcScorePop 700ms ease-out forwards;
}
.tgc-burst-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.92);
  animation: tgcBurstDot 620ms ease-out forwards;
}
.tgc-burst-dot.d1 { --dx: 34px; --dy: -20px; background: #9ee8ff; }
.tgc-burst-dot.d2 { --dx: -32px; --dy: -18px; background: #fff176; }
.tgc-burst-dot.d3 { --dx: 22px; --dy: 30px; background: #ff8a80; }
.tgc-burst-dot.d4 { --dx: -24px; --dy: 28px; background: #b9f6ca; }
.tgc-burst-dot.d5 { --dx: 4px; --dy: -38px; background: #e1bee7; }
.tgc-burst-dot.d6 { --dx: -4px; --dy: 38px; background: #ffd180; }
@keyframes tgcScorePop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  18% { opacity: 1; transform: translate(-50%, -64%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -118%) scale(0.96); }
}
@keyframes tgcBurstDot {
  0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.35); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.9); }
}
.tgc-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--purple);
  text-align: center;
  padding: 16px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.85);
}
.tgc-overlay.is-correct { color: var(--blue); }
.tgc-overlay.is-incorrect { color: #c62828; }
.tgc-action-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.tfg-corpus-toggle,
.tfg-mode-toggle,
.tfg-deck-toggle,
.tfg-variant-toggle {
  width: min(100%, 460px);
  margin: 0 auto 18px;
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.tfg-variant-toggle {
  width: min(100%, 560px);
}
.tfg-deck-toggle {
  margin-bottom: 14px;
}
.tfg-variant-toggle {
  width: min(100%, 460px);
  margin-bottom: 16px;
}
.tfg-mode-toggle {
  display: none;
  margin-bottom: 20px;
}
#screenTropeFlashcards .tfg-toggle-needs-selection {
  padding: 4px;
  border: 1.5px solid #d92525;
  box-shadow: 0 0 0 3px rgba(217, 37, 37, 0.18);
}
#screenTropeDictation .tdg-toggle-needs-selection {
  padding: 4px;
  border: 1.5px solid #d92525;
  box-shadow: 0 0 0 3px rgba(217, 37, 37, 0.18);
}
.tfg-toolbar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tfg-limit-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
  align-items: center;
}
.tfg-limit-label {
  font-family: var(--font-heading);
  font-size: 0.6em;
  font-weight: 400;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.1;
}
.tfg-limit-input {
  height: auto;
  width: auto;
  min-width: 0;
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-heading);
  font-size: 1.05em;
  font-weight: 700;
  color: var(--purple);
  background: transparent;
  text-align: center;
  line-height: 1.1;
  appearance: textfield;
  -moz-appearance: textfield;
  box-shadow: none;
}
.tfg-limit-input::-webkit-outer-spin-button,
.tfg-limit-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tfg-limit-input:focus,
.tfg-limit-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.tfg-toolbar-btn {
  min-width: 132px;
  min-height: 38px;
  border-radius: 999px;
  padding: 8px 16px;
}
.tfg-stats-grid {
  width: 100%;
  max-width: 620px;
  margin: 0 auto 10px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.tfg-stat-card {
  text-align: center;
  padding: 5px 6px;
  border: 1.5px solid var(--border2);
  border-radius: 10px;
  background: var(--white);
}
.tfg-stat-label {
  font-family: var(--font-heading);
  font-size: 0.6em;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.tfg-stat-value {
  font-family: var(--font-heading);
  font-size: 1.05em;
  font-weight: 700;
  color: var(--purple);
}
.tfg-stat-card--limit {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tfg-stat-card--limit .tfg-limit-label {
  margin-bottom: 0;
}
.tfg-tip-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(0,0,0,0.48);
}
.tfg-tip-spotlight {
  position: fixed;
  box-sizing: border-box;
  border: 3px solid var(--yellow);
  border-radius: 12px;
  box-shadow: 0 0 0 4000px rgba(0,0,0,0.28), 0 0 20px rgba(0,0,0,0.18);
  pointer-events: none;
}
.tfg-tip-panel {
  --tfg-tip-arrow-left: 50%;
  position: fixed;
  width: min(92vw, 380px);
  background: var(--white);
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.32);
  animation: dlgPop 0.25s cubic-bezier(0.18,0.89,0.32,1.28) both;
}
.tfg-tip-panel::before {
  content: "";
  position: absolute;
  left: var(--tfg-tip-arrow-left);
  width: 16px;
  height: 16px;
  background: var(--white);
  transform: translateX(-50%) rotate(45deg);
}
.tfg-tip-panel.is-below-target::before {
  top: -8px;
}
.tfg-tip-panel.is-above-target::before {
  bottom: -8px;
}
.tfg-tip-panel h3 {
  margin: 0 0 8px;
  font-size: 1.1em;
  color: var(--purple);
  text-align: center;
}
.tfg-tip-panel p {
  margin: 0;
  font-size: 0.95em;
  line-height: 1.6;
  color: var(--text);
  text-align: center;
}
.tfg-tip-actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.tfg-tip-actions .wiz-btn {
  min-width: 132px;
}
.tfg-progress {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1em;
  color: var(--blue);
  margin-bottom: 16px;
  text-align: center;
}
.tfg-card-shell {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.tfg-card {
  width: 100%;
  height: 390px;
  min-height: 390px;
  border: 1.5px solid var(--border2);
  border-radius: 12px;
  background: var(--white);
  padding: 28px 24px;
  box-sizing: border-box;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  overflow: hidden;
}
.tfg-card:hover {
  border-color: var(--purple);
  background: #fcfbfd;
}
.tfg-card.is-disabled {
  cursor: default;
  border-color: var(--border2);
  background: var(--white);
}
.tfg-card.is-flipping {
  pointer-events: none;
}
.tfg-card.is-flip-out {
  animation: tfg-card-flip-out 150ms ease-in forwards;
}
.tfg-card.is-flip-in {
  animation: tfg-card-flip-in 150ms ease-out forwards;
}
.tfg-card-content.is-flip-out {
  animation: tfg-card-face-flip-out 150ms ease-in forwards;
}
.tfg-card-content.is-flip-in {
  animation: tfg-card-face-flip-in 150ms ease-out forwards;
}
@keyframes tfg-card-flip-out {
  from {
    transform: perspective(900px) rotateY(0deg) scale(1);
  }
  to {
    transform: perspective(900px) rotateY(88deg) scale(0.98);
  }
}
@keyframes tfg-card-flip-in {
  from {
    transform: perspective(900px) rotateY(-88deg) scale(0.98);
  }
  to {
    transform: perspective(900px) rotateY(0deg) scale(1);
  }
}
@keyframes tfg-card-face-flip-out {
  from {
    opacity: 1;
    transform: perspective(700px) rotateY(0deg) scale(1);
  }
  to {
    opacity: 0.15;
    transform: perspective(700px) rotateY(88deg) scale(0.96);
  }
}
@keyframes tfg-card-face-flip-in {
  from {
    opacity: 0.15;
    transform: perspective(700px) rotateY(-88deg) scale(0.96);
  }
  to {
    opacity: 1;
    transform: perspective(700px) rotateY(0deg) scale(1);
  }
}
.tfg-card-content {
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.tfg-card-content.is-back {
  justify-content: flex-start;
  gap: 4px;
  padding-top: 0;
}
.tfg-card-image {
  max-width: min(100%, 280px);
  max-height: 220px;
  width: auto;
  height: auto;
  display: block;
}
.tfg-card-image--back-small {
  max-width: 185px !important;
  max-height: 68px !important;
  object-fit: contain;
  margin-top: 0;
  flex: 0 0 auto;
}
.tfg-card-back-image-strip {
  width: min(100%, 279px);
  margin-top: 0;
  flex: 0 0 auto;
}
.tfg-card-back-image-strip .tfg-card-strip {
  gap: 4px;
  padding: 0;
}
.tfg-card-back-image-strip .tfg-card-image--tile {
  max-width: min(44%, 126px) !important;
  max-height: 68px !important;
  flex: 0 1 126px !important;
  object-fit: contain;
}
.tfg-card-back-image-strip .tfg-card-strip--single .tfg-card-image--tile {
  max-width: min(100%, 185px) !important;
  flex: 0 1 185px !important;
}
.tfg-card-back-panel {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-top: 32px;
  cursor: default;
}
.tfg-card-sound-map {
  width: 100%;
  margin-top: -14px;
  flex: 1 1 auto;
  min-height: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.tfg-card-sound-map .tfg-sound-map-shell {
  width: 100%;
  margin-top: 0;
  display: flex;
  justify-content: center;
}
.tfg-card-sound-map .tfg-sound-map-wrapper {
  width: 100%;
  height: 252px;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  direction: rtl;
  padding: 0 4px 4px;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.tfg-card-sound-map .word-block {
  zoom: 0.54;
}
.tfg-card-sound-map .tfg-sound-map-inner {
  justify-content: center;
  min-width: 100%;
  direction: ltr;
}
.tfg-card-sound-map .staff-outer {
  height: 310px;
}
.tfg-card-sound-map .syllable-row {
  padding-top: 20px;
}
.tfg-card-sound-map .syllable-pair {
  min-width: 92px;
  max-width: none;
  padding-left: 8px;
  padding-right: 8px;
  overflow: visible;
}
.tfg-card-sound-map .hyphen-sep {
  align-self: flex-start;
  margin-top: 24px;
  padding-left: 2px;
  padding-right: 2px;
  font-size: 18px;
  line-height: 1;
  color: var(--text-mid);
  opacity: 0.85;
}
.tfg-card-sound-map .heb-syl {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif !important;
  font-size: 70px;
  line-height: 1.18;
}
.tfg-card-sound-map .trl-syl {
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  line-height: 1.2;
}
.tfg-card-sound-map .vocal-shva-cluster {
  font-family: 'SBL Hebrew','Ezra SIL','David',serif !important;
}
.tfg-card-sound-map .note-circle {
  cursor: default;
  pointer-events: auto;
}
.tfg-card-sound-map .note-circle::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}
.tfg-card-sound-map .sm-scroll-arrow {
  z-index: 8;
}
.tfg-card-audio-actions {
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  max-width: none;
  margin-top: 0;
  justify-content: space-between;
  padding: 0 4px;
  pointer-events: none;
}
.tfg-card-audio-actions .action-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  pointer-events: auto;
}
.tfg-card-audio-actions .action-btn-icon {
  object-fit: contain;
}
.tfg-card-audio-actions .learn-waveform-btn .action-btn-icon {
  object-fit: cover;
}
.tfg-card-front-prompt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(100%, 360px);
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid rgba(89, 58, 134, 0.22);
  border-radius: 999px;
  background: rgba(89, 58, 134, 0.08);
  color: var(--purple);
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .tfg-card.is-flip-out,
  .tfg-card.is-flip-in,
  .tfg-card-content.is-flip-out,
  .tfg-card-content.is-flip-in {
    animation: none;
  }
}
.tfg-card-strip {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex-direction: row-reverse;
  overflow: hidden;
}
.tfg-card-image--tile {
  max-width: min(46%, 168px);
  max-height: 200px;
  min-width: 0;
  flex: 1 1 0;
  object-fit: contain;
}
.tfg-card-image--helper {
  opacity: 0.25;
}
.tfg-card-strip--single .tfg-card-image--tile {
  max-width: min(100%, 280px);
  flex: 0 1 auto;
}
.tfg-card-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--purple);
  line-height: 1.15;
}
.tfg-card-copy,
.tfg-card-copy-label {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-dim);
}
.tfg-card-copy-label {
  width: 100%;
  max-width: 620px;
  text-align: center;
  margin-top: -6px;
  margin-bottom: 4px;
  min-height: 1.5em;
}
.tfg-listen-row {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tfg-listen-row:empty {
  display: none;
}
.tfg-card-listen-slot {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  z-index: 1;
}
.tfg-listen-btn {
  width: auto !important;
  min-width: 110px;
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78em;
  line-height: 1;
}
.tfg-nav-row,
.tfg-rating-row,
.tfg-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tfg-nav-row {
  margin-bottom: 16px;
}
.tfg-rating-row {
  margin-bottom: 18px;
  flex-wrap: nowrap;
}
.tfg-rate-btn {
  min-width: 150px;
  min-height: 46px;
  border-radius: 999px;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
  padding: 8px 14px;
}
.tfg-rate-main {
  font-weight: 800;
}
.tfg-rate-help {
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.95;
  white-space: nowrap;
}
.tfg-rate-btn--easy {
  background: #2e7d32;
  border-color: #2e7d32;
  color: #fff;
}
.tfg-rate-btn--easy:hover {
  background: #25692a;
  border-color: #25692a;
  color: #fff;
}
.tfg-rate-btn--good {
  background: #d4a017;
  border-color: #d4a017;
  color: #fff;
}
.tfg-rate-btn--good:hover {
  background: #b78710;
  border-color: #b78710;
  color: #fff;
}
.tfg-rate-btn--hard {
  background: #c62828;
  border-color: #c62828;
  color: #fff;
}
.tfg-rate-btn--hard:hover {
  background: #a61f1f;
  border-color: #a61f1f;
  color: #fff;
}
.practice-rating-row.tfg-rating-row {
  margin-bottom: 0;
  flex-wrap: nowrap;
  gap: 8px;
}
.practice-rating-row .tfg-rate-btn {
  min-width: 0;
}
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .practice-rating-row.tfg-rating-row {
    gap: 5px !important;
  }
  .practice-rating-row .tfg-rate-btn {
    height: 58px !important;
    padding: 6px 6px !important;
  }
  .practice-rating-row .tfg-rate-main {
    font-size: 0.78rem;
  }
  .practice-rating-row .tfg-rate-help {
    font-size: 0.58rem;
  }
  #screenTropeFlashcards .tfg-rating-row {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    justify-content: center;
  }
  #screenTropeFlashcards .tfg-rate-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 58px !important;
    min-height: 58px !important;
    flex: 1 1 0 !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    padding: 8px 5px !important;
    font-size: clamp(0.76rem, 3.2vw, 0.88rem);
    white-space: nowrap !important;
    border-radius: 999px !important;
  }
  #screenTropeFlashcards .tfg-rate-help {
    font-size: clamp(0.58rem, 2.45vw, 0.68rem);
  }
}
.tfg-empty-state {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--text-dim);
}
.tmg-practice-board {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.tmg-practice-board.tmg-practice-board--single,
.tmg-practice-board.tmg-practice-board--single.is-beginner,
.tmg-practice-board.tmg-practice-board--single.is-intermediate,
.tmg-practice-board.tmg-practice-board--single.is-advanced {
  grid-template-columns: minmax(180px, 260px);
  justify-content: center;
}
.tmg-practice-board.is-beginner,
.tmg-choice-grid.is-beginner {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tmg-practice-board.is-intermediate,
.tmg-choice-grid.is-intermediate {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tmg-practice-board.is-advanced,
.tmg-choice-grid.is-advanced {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tmg-drop-zone {
  min-height: 170px;
  border: 1.5px dashed var(--border2);
  border-radius: 12px;
  background: var(--white);
  padding: 4px 4px 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.tmg-drop-zone--prompt {
  cursor: default;
}
.tmg-drop-zone img {
  width: 100%;
  max-width: 146px;
  max-height: 154px;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  pointer-events: none;
}
.tmg-drop-zone.is-drag-target {
  border-color: var(--blue);
  background: rgba(40, 83, 143, 0.08);
  transform: scale(1.02);
}
.tmg-drop-zone.is-filled {
  border-style: solid;
  border-width: 2.5px;
  border-color: var(--blue);
}
.tmg-drop-zone.is-filled.is-correct-match {
  border-color: #4caf50;
  background: #e8f5e9;
}
.tmg-drop-zone.is-filled.is-incorrect-match {
  border-color: #c62828;
  background: #ffebee;
}
.tmg-drop-name {
  min-height: 0;
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 10px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--purple);
  font-size: 1em;
  line-height: 1.2;
}
.tmg-chip-tray {
  width: 100%;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.tmg-chip {
  min-width: 138px;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border2);
  background: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--purple);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s, opacity 0.15s;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.tmg-chip:hover:not(:disabled) {
  border-color: var(--purple);
  background: var(--purple-dim);
}
.tmg-chip.is-dragging {
  opacity: 0.35;
  transform: scale(0.98);
}
.tmg-chip.is-placed {
  opacity: 0.45;
}
.tmg-chip.tg-correct {
  border-color: #4caf50;
  background: #e8f5e9;
  color: var(--purple);
  opacity: 1;
}
.tmg-chip.tg-incorrect {
  border-color: #c62828;
  background: #ffebee;
  color: var(--purple);
  opacity: 1;
}
.tmg-drag-proxy {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  pointer-events: none;
  min-width: 138px;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--blue);
  background: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--purple);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  transform: translate(-9999px, -9999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tmg-test-prompt {
  width: 100%;
  max-width: 520px;
  min-height: 180px;
  border: 1.5px solid var(--border2);
  border-radius: 10px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  margin-bottom: 18px;
}
.tmg-test-prompt img {
  width: 100%;
  max-width: 300px;
  max-height: 232px;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.tmg-test-prompt-name {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  color: var(--purple);
  text-align: center;
}
.tmg-choice-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.tmg-choice-btn {
  background: var(--white);
  border: 1.5px solid var(--border2);
  border-radius: 10px;
  padding: 4px 2px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  min-height: 136px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tmg-choice-btn:hover:not(:disabled) {
  border-color: var(--purple);
  background: var(--purple-dim);
  transform: translateY(-2px);
}
.tmg-choice-btn.tg-correct {
  border-color: #4caf50;
  border-width: 2px;
  background: #e8f5e9;
}
.tmg-choice-btn.tg-incorrect {
  border-color: #c62828;
  border-width: 2px;
  background: #ffebee;
}
.tmg-choice-btn img {
  width: 100%;
  max-width: 146px;
  max-height: 132px;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.tmg-choice-btn-label {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--purple);
  font-size: 1rem;
  text-align: center;
}
#tmgBtnNextBoard {
  min-width: 170px;
  min-height: 46px;
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--purple);
  border: 2px solid var(--purple);
  color: #fff;
}
#tmgBtnNextBoard:hover {
  background: #fff;
  color: var(--purple);
}
#tmgBtnNext {
  min-width: 150px;
  min-height: 46px;
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--purple);
  border: 2px solid var(--purple);
  color: #fff;
}
#tmgBtnNext:hover {
  background: #fff;
  color: var(--purple);
}
.tdg-missed-copy {
  font-family: var(--font-heading);
  color: var(--text);
  font-size: 0.92em;
}
.tg-stats {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 16px 0 24px;
  width: 100%;
}
.tg-stat-box {
  text-align: center;
  padding: 14px 20px;
  border: 1.5px solid var(--border2);
  background: var(--white);
  border-radius: 8px;
  min-width: 90px;
}
.tg-stat-label {
  font-family: var(--font-heading);
  font-size: 0.78em;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.tg-stat-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2em;
  color: var(--purple);
}
.tg-missed-label {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--purple);
  margin: 16px 0 10px;
  text-align: center;
}
.tg-missed-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 16px;
}
.tg-missed-item { text-align: center; }
.tg-missed-item img { max-width: 70px; height: auto; display: block; margin: 0 auto 4px; }
.tg-missed-item span { font-size: 0.78em; font-family: var(--font-heading); color: var(--text-dim); display: block; }
@media (max-width: 480px) {
  #screenTropeGame .wiz-btn:not(.wiz-back-btn) {
    width: 100% !important;
    max-width: 390px !important;
    box-sizing: border-box;
  }
  #screenTropeDictation .wiz-btn:not(.wiz-back-btn) {
    width: 100% !important;
    max-width: 390px !important;
    box-sizing: border-box;
  }
  #screenTropeSequencing .wiz-btn:not(.wiz-back-btn) {
    width: 100% !important;
    max-width: 390px !important;
    box-sizing: border-box;
  }
  #screenTropeCatcher .wiz-btn:not(.wiz-back-btn) {
    width: 100% !important;
    max-width: 390px !important;
    box-sizing: border-box;
  }
  #screenTropeFlashcards .wiz-btn:not(.wiz-back-btn) {
    width: 100% !important;
    max-width: 390px !important;
    box-sizing: border-box;
  }
  #screenTropeMatching .wiz-btn:not(.wiz-back-btn) {
    width: 100% !important;
    max-width: 390px !important;
    box-sizing: border-box;
  }
  #screenMilrahMileilSort .wiz-btn:not(.wiz-back-btn) {
    width: 100% !important;
    max-width: 390px !important;
    box-sizing: border-box;
  }
  .mms-targets-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .mms-target-shell {
    grid-template-columns: minmax(0, 1fr) 8px;
    gap: 4px;
  }
  .mms-vertical-progress {
    width: 8px;
  }
  .mms-drop-title {
    font-size: clamp(0.82rem, 4.5vw, 1.05rem);
    letter-spacing: 0.03em;
  }
  .mms-target-sublabel {
    font-size: 0.62em;
    letter-spacing: 0.04em;
  }
  .mms-word-card {
    min-height: 156px;
    padding: 22px 20px;
  }
  .mms-drag-ghost {
    font-size: 40px;
  }
  .mms-review-item {
    grid-template-columns: auto 1fr;
  }
  .mms-review-trl,
  .mms-review-answer {
    grid-column: 2;
  }
  .mms-key-hint {
    display: none;
  }
  #screenTropeGame .tg-choice-btn--seq {
    padding: 8px 4px;
  }
  #screenTropeGame .tg-choice-btn--seq .tg-seq-imgs {
    flex-wrap: nowrap;
    gap: 1px;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
  }
  #screenTropeGame .tg-choice-btn--seq .tg-seq-imgs img {
    max-height: 74px;
    max-width: 60px;
    flex: 0 1 auto;
  }
  #screenTropeGame .tg-correct-answer .tg-seq-imgs {
    flex-wrap: nowrap;
    gap: 0;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 6px auto 0;
  }
  #screenTropeGame .tg-correct-answer .tg-seq-imgs img {
    max-height: 74px;
    max-width: 60px;
    flex: 0 1 auto;
  }
  #screenTropeDictation .tdg-drop-zone {
    width: min(200px, 100%);
    min-height: 118px;
  }
  #screenTropeDictation .tdg-drop-zone.is-sequence {
    width: 100%;
    min-height: 136px;
    justify-content: center;
    padding: 10px 8px;
  }
  #screenTropeDictation .tdg-drop-zone img,
  #screenTropeDictation .tdg-choice-btn img {
    max-width: 96px;
  }
  #screenTropeDictation .tdg-seq-slots {
    justify-content: center;
    gap: 7px;
  }
  #screenTropeDictation .tdg-seq-shell {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 6px;
  }
  #screenTropeDictation .tdg-seq-nav {
    width: 30px;
    height: 58px;
    font-size: 1.55rem;
  }
  #screenTropeDictation .tdg-seq-slot {
    width: 78px;
    min-width: 78px;
    min-height: 92px;
    padding: 6px 4px;
  }
  #screenTropeDictation .tdg-seq-slot img {
    max-width: 68px;
    max-height: 72px;
  }
  #screenTropeDictation .tdg-choice-strip {
    gap: 8px;
  }
  #screenTropeDictation .tg-correct-answer .tg-seq-imgs {
    flex-wrap: nowrap;
    gap: 0;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 6px auto 0;
  }
  #screenTropeDictation .tg-correct-answer .tg-seq-imgs img {
    max-height: 74px;
    max-width: 60px;
    flex: 0 1 auto;
  }
  .tgc-scorebar {
    grid-template-columns: 1fr;
  }
  .tgc-saved-scores {
    grid-template-columns: 1fr;
  }
  .tgc-field {
    min-height: 420px;
  }
  .tgc-faller {
    width: 74px;
    height: 74px;
  }
  .tfg-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tfg-card {
    height: 425px;
    min-height: 425px;
    padding: 18px 16px;
  }
  .tfg-card-content {
    height: 100%;
    min-height: 0;
    width: 100%;
    min-width: 0;
  }
  .tfg-card-content.is-back {
    justify-content: flex-start;
  }
  .tfg-card-back-panel {
    justify-content: flex-start;
    gap: 8px;
    padding-top: 72px;
    padding-bottom: 0;
  }
  .tfg-card-image--back-small {
    max-width: min(100%, 78px);
    max-height: 28px;
    margin-top: 0;
  }
  .tfg-card-back-image-strip {
    width: min(100%, 126px);
    margin-top: 0;
  }
  .tfg-card-back-image-strip .tfg-card-image--tile {
    max-width: min(44%, 58px);
    max-height: 28px;
  }
  .tfg-card-back-image-strip .tfg-card-strip--single .tfg-card-image--tile {
    max-width: min(100%, 78px);
  }
  .tfg-card-sound-map .tfg-sound-map-wrapper {
    width: 100%;
    max-width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    overflow-x: visible;
    overflow-y: visible;
    padding: 0 0 26px;
  }
  .tfg-card-sound-map {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    margin-top: 4px;
    width: 100%;
  }
  .tfg-card-sound-map .tfg-sound-map-shell {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .tfg-card-sound-map .tfg-sound-map-inner {
    align-items: flex-start;
    justify-content: center;
    min-height: 260px;
    min-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .tfg-card-sound-map .word-block {
    zoom: 1;
    margin-left: auto;
    margin-right: auto;
    transform: scale(0.52);
    transform-origin: top center;
  }
  .tfg-card-sound-map .staff-outer {
    height: 300px;
  }
  .tfg-card-sound-map .syllable-row {
    padding-top: 22px;
    overflow: visible;
  }
  .tfg-card-sound-map .syllable-pair {
    overflow: visible;
  }
  .tfg-card-sound-map .heb-syl {
    font-family: 'SBL Hebrew','Ezra SIL','David',serif !important;
    font-size: 70px;
    line-height: 1.55;
    padding: 0.08em 0 0.14em;
    overflow: visible;
  }
  .tfg-card-sound-map .trl-syl {
    font-size: 26px;
    line-height: 1.45;
    padding-bottom: 8px;
    overflow: visible;
  }
  .tfg-card-sound-map .vocal-shva-cluster::before {
    top: calc(-0.05em + 7px);
  }
  .tfg-card-audio-actions .action-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    max-width: 42px;
    max-height: 42px;
    flex-basis: 42px;
  }
  .tfg-card-image {
    max-width: min(100%, 220px);
    max-height: 180px;
  }
  .tfg-card-front-prompt {
    max-width: 100%;
    min-height: 32px;
    padding: 6px 12px;
    font-size: 0.88rem;
  }
  .tfg-card-strip {
    width: 100%;
    max-width: 100%;
    gap: 10px;
    padding: 0 4px;
  }
  .tfg-card-image--tile {
    max-width: calc((100% - 10px) / 2);
    max-height: 170px;
    flex-basis: calc((100% - 10px) / 2);
  }
  .tfg-card-strip--single .tfg-card-image--tile {
    max-width: min(100%, 220px);
    flex-basis: auto;
  }
  #screenTropeFlashcards .tfg-card-content.is-back {
    justify-content: flex-start;
  }
  #screenTropeFlashcards .tfg-card-back-panel {
    justify-content: flex-start;
    gap: 8px;
    padding-top: 41px;
    padding-bottom: 0;
  }
  #screenTropeFlashcards .tfg-card-image--back-small {
    width: auto !important;
    max-width: 216px !important;
    max-height: 75px !important;
    flex: 0 0 auto !important;
    margin-top: 0;
    object-fit: contain;
  }
  #screenTropeFlashcards .tfg-card-back-image-strip {
    width: min(100%, 351px) !important;
    margin-top: 0;
    flex: 0 0 auto !important;
  }
  #screenTropeFlashcards .tfg-card-back-image-strip .tfg-card-strip {
    width: 100%;
    gap: 4px;
    padding: 0;
    justify-content: center;
  }
  #screenTropeFlashcards .tfg-card-back-image-strip .tfg-card-image--tile {
    width: auto !important;
    max-width: min(44%, 156px) !important;
    max-height: 75px !important;
    flex: 0 1 156px !important;
    flex-basis: 156px !important;
    object-fit: contain;
  }
  #screenTropeFlashcards .tfg-card-back-image-strip .tfg-card-strip--single .tfg-card-image--tile {
    max-width: min(100%, 216px) !important;
    flex: 0 1 216px !important;
    flex-basis: 216px !important;
  }
  #screenTropeFlashcards .tfg-card-sound-map,
  #screenTropeFlashcards .tfg-card-sound-map .tfg-sound-map-shell,
  #screenTropeFlashcards .tfg-card-sound-map .tfg-sound-map-wrapper,
  #screenTropeFlashcards .tfg-card-sound-map .tfg-sound-map-inner {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  #screenTropeFlashcards .tfg-card-sound-map {
    flex: 0 0 auto;
    margin-top: -12px;
  }
  #screenTropeFlashcards .tfg-card-sound-map .tfg-sound-map-shell {
    display: block;
    position: relative;
    justify-content: initial;
    align-items: initial;
  }
  #screenTropeFlashcards .tfg-card-sound-map .tfg-sound-map-wrapper {
    display: block;
    justify-content: initial;
    align-items: initial;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 0;
    padding-right: 0;
    direction: rtl;
  }
  #screenTropeFlashcards .tfg-card-sound-map .tfg-sound-map-inner {
    width: max-content;
    min-width: max-content;
    max-width: none;
    justify-content: initial;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    direction: ltr;
  }
  #screenTropeFlashcards .tfg-card-sound-map .word-block {
    width: max-content;
    max-width: none;
    align-self: flex-start;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(var(--tfg-map-shift-x, 0px)) scale(0.56) !important;
    transform-origin: top right;
  }
  #screenTropeFlashcards .tfg-card-sound-map .syllable-row {
    padding-top: 22px;
  }
  #screenTropeFlashcards .tfg-card-sound-map .syllable-pair {
    min-width: 92px;
    padding-left: 8px;
    padding-right: 8px;
    gap: 1px;
  }
  #screenTropeFlashcards .tfg-card-sound-map .heb-syl {
    line-height: 1.08;
    padding: 0;
  }
  #screenTropeFlashcards .tfg-card-sound-map .trl-syl {
    line-height: 1.12;
    padding-bottom: 0;
  }
  #screenTropeFlashcards .tfg-card-sound-map .hyphen-sep {
    color: var(--text-mid);
    font-size: 18px;
    line-height: 1;
    opacity: 0.85;
    padding-left: 2px;
    padding-right: 2px;
    margin-top: 24px;
  }
  .tfg-toolbar-btn {
    min-width: 136px;
  }
  .tfg-rating-row {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .tfg-rate-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 46px !important;
    min-height: 46px !important;
    flex: 1 1 0 !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    padding: 10px 6px !important;
    font-size: clamp(0.78rem, 3.4vw, 0.9rem);
    white-space: nowrap !important;
    border-radius: 999px !important;
  }
  .tmg-practice-board,
  .tmg-choice-grid,
  .tmg-practice-board.is-beginner,
  .tmg-practice-board.is-intermediate,
  .tmg-practice-board.is-advanced,
  .tmg-choice-grid.is-beginner,
  .tmg-choice-grid.is-intermediate,
  .tmg-choice-grid.is-advanced {
    width: min(100%, 344px);
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 156px;
    justify-content: center;
  }
  .tmg-practice-board.tmg-practice-board--single,
  .tmg-practice-board.tmg-practice-board--single.is-beginner,
  .tmg-practice-board.tmg-practice-board--single.is-intermediate,
  .tmg-practice-board.tmg-practice-board--single.is-advanced {
    width: min(100%, 220px);
    grid-template-columns: 1fr;
  }
  .tmg-drop-zone,
  .tmg-choice-btn {
    min-height: 0;
    width: 100%;
    height: 156px;
  }
  .tmg-chip {
    min-width: 122px;
    width: calc(50% - 8px);
  }
  .tg-choice-btn img { max-width: 80px; }
  .tg-mode-btn { width: 100%; }
}

/* Selected-state hover guard: hover previews are only for unselected controls. */
button.selected,
button.selected:hover,
button.selected:active,
button.selected:focus-visible,
.wiz-btn.selected,
.wiz-btn.selected:hover,
.wiz-btn.selected:active,
.wiz-btn.selected:focus-visible,
.pb-btn.selected,
.pb-btn.selected:hover,
.pb-btn.selected:active,
.pb-btn.selected:focus-visible,
.corpus-btn.selected,
.corpus-btn.selected:hover,
.corpus-btn.selected:active,
.corpus-btn.selected:focus-visible,
.corpus-tab.active,
.corpus-tab.active:hover,
.corpus-tab.active:active,
.corpus-tab.active:focus-visible,
.wiz-toggle-btn.active,
.wiz-toggle-btn.active:hover,
.wiz-toggle-btn.active:active,
.wiz-toggle-btn.active:focus-visible,
.wiz-seq-btn.selected,
.wiz-seq-btn.selected:hover,
.wiz-seq-btn.selected:active,
.wiz-seq-btn.selected:focus-visible,
.wiz-aliyah-btn.selected,
.wiz-aliyah-btn.selected:hover,
.wiz-aliyah-btn.selected:active,
.wiz-aliyah-btn.selected:focus-visible,
.mode-toggle button.active,
.mode-toggle button.active:hover,
.mode-toggle button.active:active,
.mode-toggle button.active:focus-visible,
.student-scroll-corpus-btn.selected,
.student-scroll-corpus-btn.selected:hover,
.student-scroll-corpus-btn.selected:active,
.student-scroll-corpus-btn.selected:focus-visible,
.student-scroll-audio-toggle-btn.active,
.student-scroll-audio-toggle-btn.active:hover,
.student-scroll-audio-toggle-btn.active:active,
.student-scroll-audio-toggle-btn.active:focus-visible,
.student-scroll-tab-btn.active,
.student-scroll-tab-btn.active:hover,
.student-scroll-tab-btn.active:active,
.student-scroll-tab-btn.active:focus-visible,
.quick-start-action-btn.active,
.quick-start-action-btn.active:hover,
.quick-start-action-btn.active:active,
.quick-start-action-btn.active:focus-visible,
.action-btn.active,
.action-btn.active:hover,
.action-btn.active:active,
.action-btn.active:focus-visible,
.session-dialog-btns .btn.active,
.session-dialog-btns .btn.active:hover,
.session-dialog-btns .btn.active:active,
.session-dialog-btns .btn.active:focus-visible,
.sequence-all-btn.active,
.sequence-all-btn.active:hover,
.sequence-all-btn.active:active,
.sequence-all-btn.active:focus-visible,
.mms-filter-pill.selected,
.mms-filter-pill.selected:hover,
.mms-filter-pill.selected:active,
.mms-filter-pill.selected:focus-visible {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}

@media (hover: none), (pointer: coarse) {
  #wizLearnDrawer .learn-micro-panel .learn-play-btn:not(.playing):not(.loading),
  #wizLearnDrawer .learn-micro-panel .learn-play-btn.active:not(.playing):not(.loading),
  #wizLearnDrawer .learn-micro-panel .learn-waveform-btn:not(.playing):not(.loading) {
    border-color: var(--border2) !important;
    background: #fff !important;
    color: var(--text-mid) !important;
    box-shadow: none !important;
  }
}

button.selected *,
.wiz-btn.selected *,
.pb-btn.selected *,
.corpus-btn.selected *,
.corpus-tab.active *,
.wiz-toggle-btn.active *,
.wiz-seq-btn.selected *,
.wiz-aliyah-btn.selected *,
.mode-toggle button.active *,
.student-scroll-corpus-btn.selected *,
.student-scroll-audio-toggle-btn.active *,
.student-scroll-tab-btn.active *,
.quick-start-action-btn.active *,
.action-btn.active *,
.session-dialog-btns .btn.active *,
.sequence-all-btn.active *,
.mms-filter-pill.selected * {
  color: #fff;
}

:is(.wiz-reading-tikkun-icon-btn, #btnShowTikkun, .quick-start-tikkun-btn).active,
:is(.wiz-reading-tikkun-icon-btn, #btnShowTikkun, .quick-start-tikkun-btn).active:hover,
:is(.wiz-reading-tikkun-icon-btn, #btnShowTikkun, .quick-start-tikkun-btn).active:active,
:is(.wiz-reading-tikkun-icon-btn, #btnShowTikkun, .quick-start-tikkun-btn).active:focus-visible {
  border-color: var(--purple);
  background: rgba(255, 255, 255, 0.96);
  color: var(--purple);
  box-shadow: 0 0 0 3px rgba(96, 26, 119, 0.2), 0 8px 18px rgba(96, 26, 119, 0.12);
}

:is(.wiz-reading-tikkun-icon-btn, #btnShowTikkun, .quick-start-tikkun-btn).active * {
  color: var(--purple);
}

.sess-btn.sel,
.sess-btn.sel:hover,
.sess-btn.sel:active,
.sess-btn.sel:focus-visible,
.sess-btn.selected,
.sess-btn.selected:hover,
.sess-btn.selected:active,
.sess-btn.selected:focus-visible,
.filter-bubble.sel,
.filter-bubble.sel:hover,
.filter-bubble.sel:active,
.filter-bubble.sel:focus-visible,
.filter-pill.sel,
.filter-pill.sel:hover,
.filter-pill.sel:active,
.filter-pill.sel:focus-visible {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}

.sess-btn.sel *,
.sess-btn.selected *,
.filter-bubble.sel *,
.filter-pill.sel * {
  color: #fff;
}

.stage-tile.sel,
.stage-tile.sel:hover,
.stage-tile.sel:active,
.stage-tile.sel:focus-visible {
  background: var(--sc);
  border-color: var(--sc);
}

.stage-tile.sel .stl,
.stage-tile.sel .std {
  color: #fff;
}

.tdg-choice-btn.is-selected,
.tdg-choice-btn.is-selected:hover,
.tdg-choice-btn.is-selected:active,
.tdg-choice-btn.is-selected:focus-visible {
  border-color: var(--blue);
  background: rgba(40, 83, 143, 0.08);
}