:root {
  --bg1: #fff5fa;
  --bg2: #f5f7ff;
  --bg3: #faefff;
  --text: rgba(77, 66, 86, .66);
  --muted: #85788d;
  --accent: #ea9dc2;
  --accent-2: #bca4eb;
  --accent-soft: rgba(144, 122, 170, .70);
  --glass-stroke: rgba(255,255,255,.60);
  --glass-fill-top: rgba(255,250,252,.44);
  --glass-fill-bottom: rgba(255,242,248,.24);
  --shadow: 0 18px 44px rgba(159, 135, 176, .09);
  --ok: #3f9b6b;
  --ng: #d86175;
  --radius: 28px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(145deg, rgba(255,245,250,.80) 0%, rgba(253,240,246,.78) 34%, rgba(250,239,255,.78) 68%, rgba(245,247,255,.80) 100%), url('assets/marble-bg.png') center/cover fixed no-repeat;
  overflow-x: hidden;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('assets/marble-bg.png') center/cover no-repeat;
  opacity: .50;
  pointer-events: none;
  z-index: -1;
}
body.sheet-open { overflow: hidden; }
button, select, input { font: inherit; }
button { -webkit-touch-callout: none; }
.hidden { display: none !important; }

.bg-orb {
  position: fixed;
  border-radius: 999px;
  filter: blur(48px);
  opacity: .48;
  pointer-events: none;
}
.orb1 { width: 320px; height: 320px; background: rgba(246,190,218,.34); top: -90px; right: -70px; }
.orb2 { width: 340px; height: 340px; background: rgba(173,212,255,.18); left: -120px; bottom: -110px; }

.app-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 14px 28px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch; width: 100%; }
.glass {
  background: linear-gradient(180deg, rgba(255,250,252,.32) 0%, rgba(255,242,248,.14) 100%), url('assets/marble-bg.png') center/cover no-repeat;
  backdrop-filter: blur(28px) saturate(125%);
  -webkit-backdrop-filter: blur(28px) saturate(125%);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.54);
}
.card {
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}

.home-header {
  position: relative;
  overflow: hidden;
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 30px;
  padding: 14px 18px;
  margin-top: 24px;
  margin-bottom: 8px;
  background:
    linear-gradient(180deg, rgba(255,252,253,.52) 0%, rgba(255,247,250,.28) 100%),
    linear-gradient(90deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 38%, rgba(255,255,255,.10) 100%),
    url('assets/marble-bg.png') center/cover no-repeat;
  backdrop-filter: blur(32px) saturate(128%);
  -webkit-backdrop-filter: blur(32px) saturate(128%);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 16px 34px rgba(159,135,176,.06), inset 0 1px 0 rgba(255,255,255,.72);
}
.home-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.04) 36%, rgba(255,255,255,.00) 62%);
  pointer-events: none;
}
.brand-icon {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(140,118,161,.06);
}
.brand-copy { position: relative; z-index: 1; }
.brand-copy h1 { margin: 0; font-size: 1.38rem; letter-spacing: -.01em; }
.brand-copy p { margin: 4px 0 0; color: rgba(133,120,141,.82); font-size: .80rem; }

.start-screen {
  min-height: auto;
  display: grid;
  place-items: center;
  padding: 0 0 40px;
}
.start-stack { width: 100%; max-width: 760px; display: grid; gap: 20px; margin: 0 auto; }
.active-set-card {
  width: 100%;
  border: 0;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  border-radius: 30px;
  padding: 26px 24px;
  min-height: 144px;
  cursor: pointer;
}
.active-set-label { color: var(--muted); font-size: .95rem; font-weight: 700; }
#activeSetName { font-size: 1.15rem; color: var(--accent-soft); font-weight: 800; }
.active-set-arrow,
.set-picker-arrow { color: #b59cc4; font-size: 1.8rem; line-height: 1; }
.start-actions { display: grid; gap: 16px; }

button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
button:active { transform: translateY(1px) scale(.99); }
button:disabled { opacity: .42; cursor: not-allowed; }
.primary-btn {
  color: rgba(112, 97, 133, .74);
  background: linear-gradient(180deg, rgba(255,250,252,.26) 0%, rgba(255,243,248,.12) 100%), url('assets/marble-bg.png') center/cover no-repeat;
  backdrop-filter: blur(22px) saturate(118%);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 10px 24px rgba(145,127,170,.07), inset 0 1px 0 rgba(255,255,255,.56);
}
.secondary-btn,
.ghost-btn,
.mini-btn,
.option-btn,
.token,
.answer-box,
.close-sheet-btn,
.set-picker-btn,
.set-picker-option {
  background: linear-gradient(180deg, rgba(255,251,253,.36) 0%, rgba(255,246,250,.20) 100%), url('assets/marble-bg.png') center/cover no-repeat;
  backdrop-filter: blur(22px) saturate(118%);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 10px 24px rgba(145,127,170,.07), inset 0 1px 0 rgba(255,255,255,.56);
  color: var(--text);
}
.large-action { min-height: 66px; font-size: 1.12rem; font-weight: 760; }
.mini-btn { padding: 9px 14px; font-size: .9rem; }
.home-mini-btn { min-width: 86px; }
.text-btn { background: transparent; color: var(--muted); }

.next-btn-glass {
  color: rgba(255,255,255,.95);
  background: linear-gradient(90deg, rgba(224,148,191,.50) 0%, rgba(184,160,231,.50) 100%), url('assets/marble-bg.png') center/cover no-repeat;
  backdrop-filter: blur(24px) saturate(122%);
  -webkit-backdrop-filter: blur(24px) saturate(122%);
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 10px 22px rgba(201,140,185,.07), inset 0 1px 0 rgba(255,255,255,.26);
  min-width: 108px;
}

#quizScreen { padding-top: 2px; min-height: auto; display: flex; align-items: flex-start; justify-content: center; width: 100%; }
.single-quiz-card {
  padding: 15px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  min-height: 0;
  background: linear-gradient(180deg, rgba(255,251,253,.44) 0%, rgba(255,246,250,.28) 100%), url('assets/marble-bg.png') center/cover no-repeat;
}
.quiz-topline,
.result-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.progress-text {
  color: var(--muted);
  font-size: .92rem;
  font-weight: 700;
}
.progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,245,250,.12) 100%), url('assets/marble-bg.png') center/cover no-repeat;
  margin-bottom: 12px;
}
#progressFill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(234,155,194,.72) 0%, rgba(189,161,234,.72) 100%), url('assets/marble-bg.png') center/cover no-repeat;
}
.question-block {
  margin-bottom: 2px;
  min-height: 68px;
}
.question-title {
  margin: 0 0 8px;
  font-size: 1.08rem;
  line-height: 1.32;
}
.question-jp {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}
.question-focus {
  margin: 8px 0 0;
  padding: 9px 12px;
  border-radius: 16px;
  background: rgba(255,249,252,.20);
  color: var(--muted);
  white-space: pre-wrap;
}

.inline-choice {
  margin: 4px 0 10px;
}
.inline-choice h3,
.arrange-head h3,
.result-head h3 {
  margin: 0;
}
.options-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}
.option-btn {
  min-width: 100px;
  border: 2px solid transparent;
  padding: 9px 13px;
}
.option-btn.selected {
  border-color: rgba(198,176,225,.86);
  background: linear-gradient(180deg, rgba(255,241,248,.50) 0%, rgba(243,239,255,.34) 100%);
}
.option-btn.correct { border-color: var(--ok); background: rgba(63,155,107,.12); }
.option-btn.wrong { border-color: var(--ng); background: rgba(216,97,117,.12); }

.arrange-head {
  margin: 4px 0 8px;
}
.arrange-block { margin-top: 8px; }
.compact-gap { margin-top: 2px; }
.small-label {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 700;
}
.token-area {
  border-radius: 20px;
  border: 2px dashed rgba(201,184,222,.48);
  background: linear-gradient(180deg, rgba(255,250,252,.24) 0%, rgba(252,246,255,.16) 100%), url('assets/marble-bg.png') center/cover no-repeat;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 6px 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}
.compact-area { min-height: 49px; }
.answer-area { min-height: 65px; }
.token-bank { min-height: 71px; }
.token {
  user-select: none;
  padding: 9px 13px;
  font-size: .92rem;
}
.token.answer-token {
  background: linear-gradient(120deg, rgba(255,251,253,.58), rgba(255,247,250,.38)), url('assets/marble-bg.png') center/cover no-repeat;
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 8px 18px rgba(145,127,170,.06), inset 0 1px 0 rgba(255,255,255,.60);
}
.token.empty-hint {
  opacity: .50;
  font-style: italic;
  box-shadow: none;
  background: transparent !important;
  border: 0 !important;
  outline: 0;
  padding: 10px 8px;
  margin: 0;
  min-width: auto;
}
.feedback-line {
  margin: 6px 0 0;
  min-height: 1.4em;
  color: var(--muted);
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: .9rem;
}
.feedback-line.ok { color: var(--ok); }
.feedback-line.ng { color: var(--ng); }
.compact-bottom-actions {
  margin-top: 10px;
  justify-content: flex-end;
}
.ghost-btn { padding: 10px 16px; }

.compact-result-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.result-head,
.inline-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.answer-box {
  border-radius: 20px;
  padding: 14px;
  line-height: 1.6;
  margin: 0 0 10px;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(255,251,253,.34) 0%, rgba(255,246,250,.18) 100%), url('assets/marble-bg.png') center/cover no-repeat;
}
.result-details {
  white-space: pre-wrap;
  line-height: 1.5;
  color: var(--muted);
  font-size: .92rem;
  margin-bottom: 2px;
}
.explanation-panel {
  min-height: 0;
}

.stage-panel { opacity: 1; }
.show-stage { animation: gentleStageFade .34s ease-out both; }
@keyframes gentleStageFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .show-stage { animation: none; }
  button, .ios-switch::after { transition: none; }
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(226, 213, 233, .16) 0%, rgba(243, 233, 243, .16) 100%), url('assets/marble-bg.png') center/cover no-repeat;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 45;
}
.settings-sheet,
.set-picker-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(255,249,252,.34) 0%, rgba(250,243,255,.18) 100%), url('assets/marble-bg.png') center/cover no-repeat;
  backdrop-filter: blur(30px) saturate(125%);
  -webkit-backdrop-filter: blur(30px) saturate(125%);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 28px 28px 0 0;
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -14px 34px rgba(100,83,121,.08), inset 0 1px 0 rgba(255,255,255,.52);
}
.set-picker-sheet { z-index: 55; }
.sheet-handle {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(183, 162, 194, .38);
  margin: 0 auto 14px;
}
.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.sheet-header h2 { margin: 0; font-size: 1.18rem; }
.eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #ab88a1;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .14em;
}
.close-sheet-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
  font-size: 1.5rem;
}
.settings-content,
.set-picker-list { display: grid; gap: 10px; }
.settings-row,
.danger-row {
  width: 100%;
  border: 0;
  text-align: left;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,249,252,.30) 0%, rgba(255,244,248,.16) 100%), url('assets/marble-bg.png') center/cover no-repeat;
  border: 1px solid rgba(255,255,255,.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.54);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.settings-column { flex-direction: column; align-items: stretch; }
.settings-title { font-size: .96rem; font-weight: 700; }
.settings-row small,
.danger-row small { display: block; margin-top: 4px; color: var(--muted); }
.danger-row { color: var(--text); }
.hidden-native-select { position: absolute !important; width: 0; height: 0; opacity: 0; pointer-events: none; }
.set-picker-btn {
  width: 100%;
  border-radius: 16px;
  padding: 13px 14px;
  color: var(--accent-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
}
.set-picker-list { max-height: min(64vh, 560px); overflow: auto; padding-right: 2px; }
.set-picker-option { width: 100%; text-align: left; padding: 16px 18px; border-radius: 18px; }
.set-picker-option .option-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.set-picker-option .option-name { font-weight: 800; line-height: 1.45; }
.set-picker-option .option-check { color: #da93bb; font-size: 1.3rem; line-height: 1; opacity: 0; }
.set-picker-option .option-sub { margin-top: 6px; color: var(--muted); font-size: .86rem; }
.set-picker-option.selected {
  background: linear-gradient(135deg, rgba(255,236,245,.42) 0%, rgba(245,239,255,.28) 100%), url('assets/marble-bg.png') center/cover no-repeat;
  border-color: rgba(228, 188, 213, .82);
}
.set-picker-option.selected .option-check { opacity: 1; }

.ios-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 52px;
  height: 32px;
  background: linear-gradient(90deg, rgba(236,226,241,.88) 0%, rgba(228,236,250,.88) 100%);
  border-radius: 999px;
  position: relative;
  outline: none;
  flex-shrink: 0;
}
.ios-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: transform .18s ease;
}
.ios-switch:checked { background: linear-gradient(90deg, rgba(232,149,190,.88) 0%, rgba(184,159,230,.88) 100%); }
.ios-switch:checked::after { transform: translateX(20px); }

@media (max-width: 760px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .home-header { min-height: 78px; gap: 10px; padding: 13px 16px; margin-top: 22px; margin-bottom: 8px; }
  .start-screen { min-height: auto; padding: 0 0 28px; }
  .start-stack { gap: 18px; }
  .active-set-card { grid-template-columns: 1fr auto; padding: 24px 22px; min-height: 138px; }
  .active-set-label { grid-column: 1 / -1; }
  .single-quiz-card { padding: 14px; }
  #quizScreen { min-height: calc(100dvh - 230px); }
  .single-quiz-card { max-width: 100%; min-height: 0; }
  .answer-area { min-height: 61px; }
  .token-bank { min-height: 69px; }
  .question-block { min-height: 64px; }
}

.next-btn-glass { color: rgba(255,255,255,.95); }
.start-actions .primary-btn { color: rgba(112, 97, 133, .74); }
.start-actions .secondary-btn { color: rgba(133, 118, 152, .58); }

/* =========================================================
   v28 — Dreamy Jelly Marble
   Softer boundaries, moist gloss, milky translucent layers.
   ========================================================= */

:root {
  --jelly-text: rgba(77, 66, 86, .72);
  --jelly-muted: rgba(126, 112, 136, .70);
  --jelly-border: rgba(255, 255, 255, .18);
  --jelly-inner-light: rgba(255, 255, 255, .34);
  --jelly-pink: rgba(244, 175, 207, .20);
  --jelly-lilac: rgba(190, 167, 234, .18);
  --jelly-blue: rgba(166, 211, 250, .14);
  --jelly-shadow: 0 24px 58px rgba(171, 132, 169, .10);
}

html,
body {
  color: var(--jelly-text);
}

body {
  background:
    linear-gradient(145deg, rgba(255, 241, 248, .72), rgba(248, 239, 255, .65) 56%, rgba(237, 247, 255, .68)),
    url('assets/marble-bg.png') center / cover fixed no-repeat;
}

body::before {
  opacity: .56;
  filter: saturate(1.04) contrast(.98);
}

.bg-orb {
  opacity: .36;
  filter: blur(66px);
}

/* Base jelly surface: almost no visible white outline. */
.glass,
.card,
.active-set-card,
.single-quiz-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 13% 4%, rgba(255,255,255,.34), transparent 34%),
    radial-gradient(circle at 92% 88%, var(--jelly-blue), transparent 36%),
    radial-gradient(circle at 15% 85%, var(--jelly-pink), transparent 34%),
    linear-gradient(180deg, rgba(255, 249, 252, .48), rgba(255, 239, 247, .24)),
    url('assets/marble-bg.png') center / cover no-repeat;
  background-blend-mode: screen, soft-light, soft-light, normal, soft-light;
  border: 1px solid var(--jelly-border);
  box-shadow:
    var(--jelly-shadow),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -18px 34px rgba(224, 167, 205, .035);
  backdrop-filter: blur(30px) saturate(126%);
  -webkit-backdrop-filter: blur(30px) saturate(126%);
}

.glass::after,
.active-set-card::after,
.single-quiz-card::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.40), transparent);
  pointer-events: none;
}

/* Title becomes a glossy, quiet header rather than a presentation banner. */
.home-header {
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 16% 4%, rgba(255,255,255,.42), transparent 36%),
    radial-gradient(circle at 88% 84%, rgba(160,205,250,.14), transparent 34%),
    linear-gradient(180deg, rgba(255,252,253,.56), rgba(255,242,248,.25)),
    url('assets/marble-bg.png') center / cover no-repeat;
  background-blend-mode: screen, soft-light, normal, soft-light;
  box-shadow:
    0 24px 54px rgba(171, 132, 169, .085),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -16px 26px rgba(216,166,205,.035);
}

.home-header::before {
  background: linear-gradient(110deg, rgba(255,255,255,.26), rgba(255,255,255,.04) 44%, transparent 68%);
}

.brand-icon {
  box-shadow:
    0 14px 28px rgba(143, 120, 159, .075),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.brand-copy h1 {
  color: rgba(79, 65, 87, .78);
  text-shadow: 0 1px 12px rgba(255,255,255,.16);
}

.brand-copy p {
  color: rgba(125, 111, 134, .60);
}

/* Top cards and main buttons: a soft liquid slab, not bordered UI. */
.active-set-card {
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 22px 50px rgba(171, 132, 169, .085),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -20px 34px rgba(203, 157, 202, .035);
}

.active-set-label,
.small-label,
.settings-title,
.eyebrow {
  color: var(--jelly-muted);
}

#activeSetName {
  color: rgba(132, 108, 156, .68);
}

button {
  transition: transform .12s ease, opacity .12s ease, filter .14s ease;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.mini-btn,
.next-btn-glass,
.close-sheet-btn,
.set-picker-btn,
.set-picker-option,
.option-btn,
.token,
.answer-box {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.42), transparent 36%),
    radial-gradient(circle at 88% 92%, rgba(170,207,247,.13), transparent 38%),
    linear-gradient(180deg, rgba(255,250,252,.48), rgba(255,240,247,.23)),
    url('assets/marble-bg.png') center / cover no-repeat;
  background-blend-mode: screen, soft-light, normal, soft-light;
  box-shadow:
    0 14px 32px rgba(154, 126, 164, .075),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -12px 24px rgba(214, 161, 204, .035);
  backdrop-filter: blur(24px) saturate(122%);
  -webkit-backdrop-filter: blur(24px) saturate(122%);
}

.primary-btn::before,
.secondary-btn::before,
.next-btn-glass::before,
.mini-btn::before,
.token::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.36), transparent);
  pointer-events: none;
}

.primary-btn,
.start-actions .primary-btn {
  color: rgba(105, 88, 126, .68);
}

.start-actions .secondary-btn {
  color: rgba(121, 105, 140, .54);
}

.next-btn-glass {
  color: rgba(255,255,255,.90);
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.30), transparent 38%),
    linear-gradient(90deg, rgba(226,150,191,.40), rgba(181,158,229,.40)),
    url('assets/marble-bg.png') center / cover no-repeat;
  background-blend-mode: screen, normal, soft-light;
}

button:active {
  transform: scale(.992);
  filter: brightness(.985);
}

/* Quiz/result card: one continuous jelly panel. */
.single-quiz-card {
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 14% 2%, rgba(255,255,255,.30), transparent 36%),
    radial-gradient(circle at 90% 86%, rgba(162,204,248,.12), transparent 38%),
    linear-gradient(180deg, rgba(255,249,252,.48), rgba(255,241,248,.25)),
    url('assets/marble-bg.png') center / cover no-repeat;
  background-blend-mode: screen, soft-light, normal, soft-light;
  box-shadow:
    0 28px 66px rgba(165, 131, 172, .09),
    inset 0 1px 0 rgba(255,255,255,.30);
}

.progress-bar {
  height: 8px;
  border: 0;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 3px rgba(132, 104, 150, .04);
}

#progressFill {
  background:
    linear-gradient(90deg, rgba(232,149,191,.70), rgba(188,163,234,.65), rgba(166,210,248,.64));
  box-shadow: 0 0 14px rgba(214, 160, 211, .13);
}

.question-focus {
  border: 0;
  background: rgba(255, 246, 250, .16);
  box-shadow: inset 0 1px 10px rgba(255,255,255,.05);
}

/* Replace box-in-box structure with mild tonal pools. */
.token-area {
  border: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.20), transparent 40%),
    radial-gradient(circle at 92% 96%, rgba(163,207,249,.08), transparent 38%),
    linear-gradient(180deg, rgba(255,250,252,.22), rgba(255,243,248,.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 28px rgba(219, 177, 210, .035);
  backdrop-filter: blur(16px) saturate(114%);
  -webkit-backdrop-filter: blur(16px) saturate(114%);
}

.small-label {
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .02em;
  opacity: .76;
}

.token {
  color: rgba(77,66,86,.70);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 10px 24px rgba(150, 120, 159, .055),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.token.answer-token {
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.36), transparent 38%),
    linear-gradient(120deg, rgba(255,248,251,.42), rgba(246,240,255,.24)),
    url('assets/marble-bg.png') center / cover no-repeat;
  background-blend-mode: screen, normal, soft-light;
  border: 1px solid rgba(255,255,255,.13);
  box-shadow:
    0 10px 24px rgba(150,120,159,.055),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.token.empty-hint {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: rgba(126,112,136,.55);
}

.option-btn {
  border: 1px solid rgba(255,255,255,.10);
}

.option-btn.selected {
  border: 1px solid rgba(192, 164, 218, .24);
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.28), transparent 38%),
    linear-gradient(180deg, rgba(255,236,246,.30), rgba(241,237,255,.20));
}

.option-btn.correct {
  border: 1px solid rgba(77, 157, 111, .22);
  background: rgba(109, 193, 144, .10);
}

.option-btn.wrong {
  border: 1px solid rgba(213, 105, 124, .20);
  background: rgba(224, 127, 143, .09);
}

/* Result text floats on the panel; only the answer has a faint glossy pool. */
.answer-box {
  border: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.24), transparent 40%),
    linear-gradient(180deg, rgba(255,249,252,.25), rgba(255,242,248,.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 12px 28px rgba(159, 132, 167, .035);
}

.result-details {
  color: rgba(120, 104, 130, .69);
}

/* Settings are the same dreamy material instead of stacked bordered rows. */
.sheet-backdrop {
  background:
    linear-gradient(180deg, rgba(239,218,234,.16), rgba(221,226,247,.12)),
    url('assets/marble-bg.png') center / cover no-repeat;
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
}

.settings-sheet,
.set-picker-sheet {
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.30), transparent 38%),
    radial-gradient(circle at 90% 92%, rgba(164,207,249,.10), transparent 38%),
    linear-gradient(180deg, rgba(255,248,252,.44), rgba(248,239,255,.24)),
    url('assets/marble-bg.png') center / cover no-repeat;
  background-blend-mode: screen, soft-light, normal, soft-light;
  box-shadow:
    0 -24px 64px rgba(137, 105, 153, .10),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.settings-row,
.danger-row {
  border: 0;
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.18), transparent 40%),
    linear-gradient(180deg, rgba(255,249,252,.20), rgba(255,242,248,.10));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 24px rgba(213,166,205,.025);
}

.set-picker-option {
  border: 0;
}

.set-picker-option.selected {
  border: 0;
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.24), transparent 40%),
    linear-gradient(135deg, rgba(255,229,242,.26), rgba(237,233,255,.20));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 12px 30px rgba(160, 126, 169, .035);
}

.close-sheet-btn {
  border: 0;
}

.ios-switch {
  background: rgba(226, 219, 235, .56);
  box-shadow: inset 0 1px 6px rgba(123, 99, 139, .07);
}

.ios-switch:checked {
  background: linear-gradient(90deg, rgba(231,147,189,.68), rgba(181,158,229,.68));
}

.ios-switch::after {
  background: rgba(255,255,255,.88);
  box-shadow: 0 5px 14px rgba(137, 106, 149, .12), inset 0 1px 0 rgba(255,255,255,.62);
}

/* Calm answer-to-explanation reveal with no translation or blur. */
.show-stage {
  animation: dreamyJellyFade .42s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes dreamyJellyFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .show-stage { animation: none; }
}


/* =========================================================
   v29 — Polished Jelly
   Less hazy, cleaner contrast, more refined top screen.
   ========================================================= */

:root {
  --jelly-text: rgba(73, 61, 84, .80);
  --jelly-muted: rgba(126, 112, 136, .62);
}

html,
body {
  color: var(--jelly-text);
}

body::before {
  opacity: .42;
  filter: saturate(1.06) contrast(1.03);
}

.bg-orb {
  opacity: .24;
  filter: blur(58px);
}

.glass,
.card,
.active-set-card,
.single-quiz-card,
.primary-btn,
.secondary-btn,
.ghost-btn,
.mini-btn,
.next-btn-glass,
.close-sheet-btn,
.set-picker-btn,
.set-picker-option,
.option-btn,
.token,
.answer-box,
.settings-sheet,
.set-picker-sheet,
.settings-row,
.danger-row {
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
}

.glass,
.card,
.active-set-card,
.single-quiz-card {
  border-color: rgba(255,255,255,.10);
  box-shadow:
    0 20px 46px rgba(165, 131, 172, .08),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -12px 24px rgba(224, 167, 205, .025);
}

.home-header {
  min-height: 80px;
  gap: 11px;
  padding: 13px 17px;
  background:
    radial-gradient(circle at 14% 2%, rgba(255,255,255,.28), transparent 30%),
    radial-gradient(circle at 88% 88%, rgba(162,204,248,.10), transparent 26%),
    linear-gradient(180deg, rgba(255,252,253,.62), rgba(255,244,249,.36)),
    url('assets/marble-bg.png') center / cover no-repeat;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 18px 42px rgba(161, 127, 169, .07),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -12px 22px rgba(216,166,205,.025);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}

.home-header::before {
  background: linear-gradient(108deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 40%, transparent 66%);
}

.brand-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(143, 120, 159, .06);
}

.brand-copy h1 {
  color: rgba(78, 64, 88, .88);
  font-size: 1.34rem;
  letter-spacing: -.015em;
  text-shadow: none;
}

.brand-copy p {
  color: rgba(125, 111, 134, .52);
  font-size: .77rem;
  letter-spacing: .01em;
}

.start-stack {
  gap: 16px;
}

.active-set-card {
  min-height: 132px;
  padding: 22px 22px;
  background:
    radial-gradient(circle at 14% 4%, rgba(255,255,255,.24), transparent 30%),
    radial-gradient(circle at 92% 90%, rgba(162,204,248,.08), transparent 24%),
    linear-gradient(180deg, rgba(255,250,252,.56), rgba(255,242,248,.28)),
    url('assets/marble-bg.png') center / cover no-repeat;
  box-shadow:
    0 20px 44px rgba(160, 126, 169, .075),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -14px 26px rgba(203, 157, 202, .025);
}

.active-set-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,244,248,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  color: rgba(130, 113, 145, .62);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
}

#activeSetName {
  color: rgba(124, 101, 147, .80);
  font-size: 1.12rem;
}

.active-set-arrow,
.set-picker-arrow {
  color: rgba(179, 154, 194, .80);
}

.start-actions {
  gap: 12px;
}

.large-action {
  min-height: 62px;
  font-size: 1.05rem;
  font-weight: 720;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.mini-btn,
.next-btn-glass,
.close-sheet-btn,
.set-picker-btn,
.set-picker-option,
.option-btn,
.token,
.answer-box {
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.24), transparent 30%),
    radial-gradient(circle at 88% 92%, rgba(170,207,247,.09), transparent 28%),
    linear-gradient(180deg, rgba(255,250,252,.58), rgba(255,242,248,.28)),
    url('assets/marble-bg.png') center / cover no-repeat;
  box-shadow:
    0 12px 26px rgba(154, 126, 164, .065),
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -8px 18px rgba(214, 161, 204, .02);
}

.primary-btn,
.start-actions .primary-btn {
  color: rgba(105, 88, 126, .74);
}

.start-actions .secondary-btn {
  color: rgba(121, 105, 140, .58);
}

.next-btn-glass {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(90deg, rgba(226,150,191,.56), rgba(181,158,229,.52)),
    url('assets/marble-bg.png') center / cover no-repeat;
}

.single-quiz-card {
  background:
    radial-gradient(circle at 14% 2%, rgba(255,255,255,.20), transparent 28%),
    radial-gradient(circle at 90% 86%, rgba(162,204,248,.08), transparent 26%),
    linear-gradient(180deg, rgba(255,250,252,.56), rgba(255,243,248,.30)),
    url('assets/marble-bg.png') center / cover no-repeat;
}

.progress-bar {
  background: rgba(255,255,255,.22);
}

.question-focus {
  background: rgba(255,246,250,.24);
}

.token-area {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.14), transparent 32%),
    radial-gradient(circle at 92% 96%, rgba(163,207,249,.05), transparent 26%),
    linear-gradient(180deg, rgba(255,251,253,.18), rgba(255,245,249,.10));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 18px rgba(219, 177, 210, .02);
}

.token {
  color: rgba(77,66,86,.76);
}

.answer-box {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(180deg, rgba(255,250,252,.22), rgba(255,244,248,.12));
}

.settings-sheet,
.set-picker-sheet {
  border-color: rgba(255,255,255,.10);
}

.settings-row,
.danger-row {
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.12), transparent 30%),
    linear-gradient(180deg, rgba(255,249,252,.18), rgba(255,242,248,.09));
}

@media (max-width: 760px) {
  .home-header {
    min-height: 76px;
    gap: 10px;
    padding: 12px 15px;
  }

  .brand-icon {
    width: 46px;
    height: 46px;
  }

  .start-stack {
    gap: 14px;
  }

  .active-set-card {
    min-height: 126px;
    padding: 20px;
  }
}


/* =========================================================
   v30 — Title Free / Correct Heart
   ========================================================= */

.home-header.title-free {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-height: auto;
  padding: 6px 2px 4px;
  margin-top: 6px;
  margin-bottom: 2px;
  gap: 12px;
}

.home-header.title-free::before,
.home-header.title-free::after {
  display: none !important;
}

.home-header.title-free .brand-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  box-shadow:
    0 10px 22px rgba(160, 129, 169, .06),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.home-header.title-free .brand-copy h1 {
  font-size: 1.7rem;
  line-height: 1.02;
  letter-spacing: -.025em;
  color: rgba(94, 79, 109, .72);
}

.home-header.title-free .brand-copy p {
  margin-top: 3px;
  color: rgba(138, 124, 150, .46);
  font-size: .83rem;
  letter-spacing: .01em;
}

.compact-result-head h3 {
  color: rgba(123, 107, 141, .62);
  font-weight: 700;
  letter-spacing: .01em;
}

@media (max-width: 760px) {
  .home-header.title-free {
    padding: 6px 1px 4px;
    margin-top: 8px;
    margin-bottom: 0;
    gap: 11px;
  }

  .home-header.title-free .brand-icon {
    width: 56px;
    height: 56px;
  }

  .home-header.title-free .brand-copy h1 {
    font-size: 1.62rem;
  }

  .home-header.title-free .brand-copy p {
    font-size: .81rem;
  }
}


/* =========================================================
   v31 — tighter title spacing / unified soft text tone
   ========================================================= */

/* Bring the title area a little closer to the Practice Set block */
.home-header.title-free {
  margin-bottom: -8px;
}

#startScreen.start-screen {
  margin-top: -6px;
}

/* Match question/result emphasis text to the Home button tone */
.question-title,
.question-jp,
.compact-result-head h3,
.result-details {
  color: var(--text);
}

.question-title {
  font-weight: 700;
}

.question-jp {
  font-weight: 600;
}

.compact-result-head h3 {
  font-weight: 700;
}

.result-details {
  font-weight: 600;
}

@media (max-width: 760px) {
  .home-header.title-free {
    margin-bottom: -10px;
  }

  #startScreen.start-screen {
    margin-top: -8px;
  }
}


/* =========================================================
   v32 — closer practice set / slightly lighter overall text
   ========================================================= */

:root {
  --text: rgba(77, 66, 86, .60);
  --muted: rgba(133, 120, 141, .72);
  --accent-soft: rgba(144, 122, 170, .62);
}

/* Pull the Practice Set area closer to the title block */
.home-header.title-free {
  margin-bottom: -18px;
}

#startScreen.start-screen {
  margin-top: -12px;
}

/* Make overall text slightly softer */
.home-header.title-free .brand-copy h1 {
  color: rgba(94, 79, 109, .66);
}

.home-header.title-free .brand-copy p {
  color: rgba(138, 124, 150, .42);
}

.active-set-label,
.small-label,
.settings-title,
.eyebrow {
  color: rgba(133, 120, 141, .60);
}

#activeSetName {
  color: rgba(132, 108, 156, .62);
}

.primary-btn,
.start-actions .primary-btn {
  color: rgba(105, 88, 126, .60);
}

.start-actions .secondary-btn,
.secondary-btn,
.ghost-btn,
.mini-btn,
.option-btn,
.token,
.question-title,
.question-jp,
.compact-result-head h3,
.result-details {
  color: var(--text);
}

.token {
  color: rgba(77, 66, 86, .62);
}

.token.empty-hint {
  color: rgba(126, 112, 136, .48);
}

.answer-box,
.small-label {
  color: rgba(133, 120, 141, .58);
}

@media (max-width: 760px) {
  .home-header.title-free {
    margin-bottom: -20px;
  }

  #startScreen.start-screen {
    margin-top: -14px;
  }
}


/* =========================================================
   v33 — practice set title starts naturally, tighter label gap
   ========================================================= */

.active-set-card {
  position: relative;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 7px;
}

.active-set-label {
  grid-column: 1 / -1;
  margin-bottom: -2px;
}

#activeSetName {
  grid-column: 1 / -1;
  display: block;
  margin-top: -5px;
  padding-right: 54px;
  line-height: 1.22;
  text-wrap: pretty;
}

.active-set-arrow,
.set-picker-arrow {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-10%);
}

@media (max-width: 760px) {
  .active-set-card {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .active-set-label {
    margin-bottom: -3px;
  }

  #activeSetName {
    margin-top: -5px;
    padding-right: 50px;
  }

  .active-set-arrow,
  .set-picker-arrow {
    right: 20px;
    top: 52%;
  }
}


/* =========================================================
   v34 — practice set label/title alignment and tighter spacing
   ========================================================= */

.active-set-card {
  gap: 4px;
}

.active-set-label {
  margin-bottom: -4px;
}

#activeSetName {
  margin-top: -9px;
  padding-left: 10px;
  padding-right: 54px;
}

@media (max-width: 760px) {
  .active-set-card {
    gap: 3px;
  }

  .active-set-label {
    margin-bottom: -5px;
  }

  #activeSetName {
    margin-top: -9px;
    padding-left: 10px;
    padding-right: 50px;
  }
}


/* =========================================================
   v35 — slimmer practice-set cards, closer title, one-line set names
   ========================================================= */

.home-header.title-free {
  margin-bottom: -28px;
}

#startScreen.start-screen {
  margin-top: -12px;
}

.active-set-card {
  gap: 2px;
  padding: 18px 24px;
  min-height: 116px;
}

.active-set-label {
  margin-bottom: -8px;
}

#activeSetName {
  margin-top: -10px;
  padding-left: 0;
  padding-right: 56px;
  font-size: clamp(0.96rem, 3.9vw, 1.08rem);
  line-height: 1.18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
}

.active-set-arrow,
.set-picker-arrow {
  right: 20px;
  top: 50%;
  transform: translateY(-18%);
}

.set-picker-btn {
  width: calc(100% + 4px);
  margin-left: -2px;
  margin-right: -2px;
  min-height: 58px;
  padding: 12px 16px;
}

#setPickerValue,
.set-picker-option .option-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.set-picker-option {
  min-height: 58px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
}

.set-picker-option .option-main {
  width: 100%;
  align-items: center;
}

.set-picker-option .option-sub {
  display: none;
}

.close-sheet-btn {
  border-color: rgba(210, 194, 222, .28);
  box-shadow: 0 8px 18px rgba(147, 128, 169, .06), inset 0 1px 0 rgba(255,255,255,.36);
}

@media (max-width: 760px) {
  .home-header.title-free {
    margin-bottom: -30px;
  }

  #startScreen.start-screen {
    margin-top: -14px;
  }

  .active-set-card {
    gap: 2px;
    padding: 18px 22px;
    min-height: 110px;
  }

  .active-set-label {
    margin-bottom: -8px;
  }

  #activeSetName {
    margin-top: -11px;
    padding-left: 0;
    padding-right: 50px;
    font-size: 0.95rem;
  }

  .active-set-arrow,
  .set-picker-arrow {
    right: 18px;
    top: 50%;
  }

  .set-picker-btn {
    width: calc(100% + 4px);
    margin-left: -2px;
    margin-right: -2px;
    min-height: 56px;
    padding: 11px 15px;
  }

  .set-picker-option {
    min-height: 56px;
    padding: 13px 16px;
  }
}


/* =========================================================
   v36 — title lower, slimmer practice card, aligned set picker
   ========================================================= */

.home-header.title-free {
  transform: translateY(10px);
}

.active-set-card {
  min-height: 100px;
  padding: 14px 22px 16px;
  gap: 0;
}

.active-set-label {
  padding: 0;
  margin: 0 0 -8px 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

#activeSetName {
  margin-top: -8px;
  padding-right: 48px;
  font-size: clamp(1rem, 4vw, 1.12rem);
}

.active-set-arrow {
  right: 18px;
  top: 50%;
  transform: translateY(-12%);
}

.set-picker-btn {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  min-height: 56px;
  padding: 10px 16px;
  align-items: center;
}

#setPickerValue {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
}

.set-picker-btn .set-picker-arrow {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  margin-left: 12px;
  flex: 0 0 auto;
  line-height: 1;
  align-self: center;
}

@media (max-width: 760px) {
  .home-header.title-free {
    transform: translateY(10px);
  }

  .active-set-card {
    min-height: 96px;
    padding: 13px 20px 15px;
  }

  .active-set-label {
    margin-bottom: -9px;
  }

  #activeSetName {
    margin-top: -8px;
    padding-right: 42px;
    font-size: 0.98rem;
  }

  .active-set-arrow {
    right: 16px;
    transform: translateY(-10%);
  }

  .set-picker-btn {
    min-height: 54px;
    padding: 9px 14px;
  }

  .set-picker-btn .set-picker-arrow {
    margin-left: 10px;
  }
}


/* =========================================================
   v37 — top title up, practice card closer/slimmer, arrow inline
   ========================================================= */

.home-header.title-free {
  transform: translateY(5px);
}

#startScreen.start-screen {
  margin-top: -32px;
}

.active-set-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label label"
    "name arrow";
  align-items: center;
  min-height: 95px;
  padding: 12px 22px 14px;
  gap: 0;
}

.active-set-label {
  grid-area: label;
  justify-self: start;
  align-self: end;
  margin: 0 0 -6px 0;
  padding: 0;
}

#activeSetName {
  grid-area: name;
  align-self: center;
  margin-top: -4px;
  padding-right: 0;
}

.active-set-arrow {
  grid-area: arrow;
  position: static;
  right: auto;
  top: auto;
  transform: none;
  justify-self: end;
  align-self: center;
  margin-left: 12px;
  line-height: 1;
}

.set-picker-btn {
  display: flex;
  align-items: center;
}

@media (max-width: 760px) {
  .home-header.title-free {
    transform: translateY(5px);
  }

  #startScreen.start-screen {
    margin-top: -32px;
  }

  .active-set-card {
    min-height: 91px;
    padding: 11px 20px 13px;
  }

  .active-set-label {
    margin-bottom: -7px;
  }

  #activeSetName {
    margin-top: -3px;
    font-size: 0.98rem;
  }

  .active-set-arrow {
    margin-left: 10px;
  }
}


/* =========================================================
   v38 — slimmer practice card, closer to title, title up
   ========================================================= */

.home-header.title-free {
  transform: translateY(0px);
}

#startScreen.start-screen {
  margin-top: -52px;
}

.active-set-card {
  min-height: 85px;
  padding: 8px 22px 10px;
}

.active-set-label {
  margin: 0 0 -8px 0;
}

#activeSetName {
  margin-top: -5px;
}

@media (max-width: 760px) {
  .home-header.title-free {
    transform: translateY(0px);
  }

  #startScreen.start-screen {
    margin-top: -52px;
  }

  .active-set-card {
    min-height: 81px;
    padding: 7px 20px 9px;
  }

  .active-set-label {
    margin-bottom: -9px;
  }

  #activeSetName {
    margin-top: -4px;
  }
}