:root {
  --bg: #fbf7ef;
  --paper: #fffdf8;
  --paper-2: #f5ecd9;
  --ink: #5a3119;
  --ink-soft: #7d563f;
  --line: #e8dac3;
  --accent: #5a8ecb;
  --accent-2: #8bb5e0;
  --gold: #f3c870;
  --green: #8abf88;
  --pink: #efb8c7;
  --shadow: 0 12px 30px rgba(94, 65, 39, 0.12);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.9), rgba(251,247,239,0.8) 45%, rgba(244,232,208,0.35) 100%),
    linear-gradient(180deg, #fffefa 0%, #faf4e8 100%);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }

.container { width: min(100% - 32px, var(--max)); margin: 0 auto; }
.section { padding: 28px 0 72px; }
.section-tight { padding: 18px 0 42px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-weight: 700;
}
.page-title { font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.02; margin: 0 0 16px; letter-spacing: -0.03em; }
.page-subtitle, .lede { font-size: clamp(1rem, 1.7vw, 1.18rem); color: var(--ink-soft); line-height: 1.75; }
.h2 { font-size: clamp(1.55rem, 3vw, 2.4rem); margin: 0 0 12px; }
.h3 { font-size: 1.2rem; margin: 0 0 10px; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.94rem; }
.label { font-size: 0.84rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 251, 244, 0.95);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(232, 218, 195, 0.85);
}
.header-inner {
  min-height: 92px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}

.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-mark { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(93, 62, 34, 0.16)); }
.brand-wordmark { width: clamp(220px, 24vw, 350px); height: auto; object-fit: contain; }
.brand-footer { align-items: center; }
.footer-blurb { margin-top: 12px; max-width: 28rem; }
.nav-row { display: flex; align-items: center; gap: 18px; }
.site-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-nav a {
  position: relative;
  padding: 12px 15px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-weight: 800;
  letter-spacing: 0.01em;
  isolation: isolate;
  overflow: hidden;
  transform: translateY(0);
  transition: color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}
.site-nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(90, 142, 203, 0.16), rgba(255,255,255,0.96));
  opacity: 0;
  transform: translateY(14px) scale(0.86);
  transition: opacity 0.32s ease, transform 0.32s ease;
  z-index: -2;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 7px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #86c7ff, var(--gold));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s ease;
  z-index: -1;
}
.site-nav a.active,
.site-nav a:hover {
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(90, 142, 203, 0.14);
}
.site-nav a.active::before,
.site-nav a:hover::before {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.site-nav a.active::after,
.site-nav a:hover::after {
  transform: scaleX(1);
}
.header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.social-links { display: flex; align-items: center; gap: 10px; }
.social-link {
  width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: rgba(255,255,255,0.86); color: var(--ink);
  box-shadow: 0 10px 22px rgba(94, 65, 39, 0.08);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease;
}
.social-link:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 26px rgba(94, 65, 39, 0.14);
}
.social-link svg { width: 20px; height: 20px; fill: currentColor; }
.social-link.youtube { color: #a5442c; }
.social-link.youtube .play { fill: #fff7ef; }
.social-link.instagram { color: #8d5a72; }
.social-link.instagram rect, .social-link.instagram circle { fill: none; stroke: currentColor; stroke-width: 1.9; }
.social-link.instagram .dot { fill: currentColor; stroke: none; }
.social-link.facebook { color: #5871a3; }
.social-link:hover.youtube { background: rgba(255, 236, 231, 0.96); border-color: #efc5b7; }
.social-link:hover.instagram { background: rgba(253, 239, 246, 0.96); border-color: #e7bfd0; }
.social-link:hover.facebook { background: rgba(236, 243, 255, 0.96); border-color: #bfd0ef; }
.mobile-toggle {
  display: none; border: 1px solid var(--line); background: #fff; color: var(--ink);
  width: 48px; height: 48px; border-radius: 14px; font-size: 1.2rem;
  align-items: center; justify-content: center;
}

.btn, .btn-outline, .btn-soft, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 18px;
  border-radius: 999px; font-weight: 800; border: 1px solid transparent;
  cursor: pointer; transition: 0.2s ease;
}
.btn { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: white; box-shadow: var(--shadow); }
.btn:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 16px 30px rgba(90, 142, 203, 0.26); }
.btn-outline { border-color: var(--line); background: #fff; color: var(--ink); }
.btn-soft { background: rgba(90,142,203,0.1); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink-soft); }

.hero {
  padding: 28px 0 54px;
}
.hero-home-card {
  position: relative;
  min-height: clamp(520px, 61vw, 760px);
  border-radius: 36px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,250,242,0.98));
}
.hero-home-bg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}
.hero-home-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.hero-copy { padding: clamp(28px, 5vw, 56px); }
.hero-copy-home {
  width: min(46%, 520px);
  padding: clamp(30px, 4vw, 60px);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.hero-stat {
  background: rgba(255,255,255,0.84); border: 1px solid var(--line); border-radius: 18px; padding: 18px;
  backdrop-filter: blur(8px);
}
.hero-stat strong { display: block; font-size: 1.55rem; margin-bottom: 6px; }
.media-contain img { object-fit: contain; background: #f7efde; }

.card-grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: rgba(255,255,255,0.86);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-body { padding: 22px; }
.card-media { aspect-ratio: 16 / 9; background: linear-gradient(180deg, #f4ead8, #efe2cb); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px;
  background: #fff7ee; border: 1px solid var(--line); color: var(--ink-soft); font-weight: 700; font-size: 0.87rem;
}
.tag.free { background: #eef8eb; border-color: #cde8cb; color: #426843; }
.tag.premium { background: #fff0f5; border-color: #f3c8d5; color: #9b4464; }
.tag.member { background: #fff7e1; border-color: #ecd89b; color: #8d6a1a; }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: rgba(255,255,255,0.74); border: 1px solid var(--line); border-radius: 18px; padding: 14px;
}
.filter-bar select, .filter-bar input, .input, .select {
  min-height: 46px; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 10px 14px; color: var(--ink);
}

.lesson-card .drawer {
  border-top: 1px dashed var(--line);
  background: #fffaf1;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, padding 0.28s ease;
}
.lesson-card.open .drawer { max-height: 320px; padding: 18px 20px 20px; }
.drawer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.drawer li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px; background: rgba(255,255,255,0.8); border: 1px solid var(--line); border-radius: 16px;
}
.lesson-card .drawer button { white-space: nowrap; }

.preview-lock {
  position: relative;
  overflow: hidden;
}
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; }
.stack { display: grid; gap: 20px; }
.panel {
  background: rgba(255,255,255,0.82); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: 22px;
}
.panel-soft { background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,248,237,0.92)); }
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.kpi {
  padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,0.8);
}
.kpi strong { display: block; font-size: 1.4rem; margin-bottom: 6px; }

.audio-player {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px;
}
.progress {
  flex: 1; min-width: 160px; height: 10px; border-radius: 999px; background: #ece3d5; overflow: hidden;
}
.progress > span { display: block; width: 42%; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

.map-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 24px; }
.map-frame { overflow: hidden; border-radius: 28px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.map-frame img { width: 100%; height: auto; object-fit: contain; }
.city-list { display: grid; gap: 12px; }
.city-btn {
  width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 18px; padding: 14px 16px; cursor: pointer; font-weight: 800;
}
.city-btn small { display: block; color: var(--ink-soft); font-weight: 600; margin-top: 4px; }
.city-btn.active, .city-btn:hover { background: #f8f0df; }
.tip-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tip-list li {
  padding: 14px 16px; border-radius: 16px; background: #fffaf2; border: 1px solid var(--line); color: var(--ink-soft);
}

.quiz-wrap { display: grid; gap: 22px; }
.quiz-board {
  background: linear-gradient(180deg, #f4e1b5, #e9c88f); border: 3px solid #9c6e3c; border-radius: 28px; box-shadow: var(--shadow); padding: 20px;
}
.quiz-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.feedback-banner {
  min-height: 78px; display: flex; flex-direction: column; justify-content: center;
  background: rgba(255,255,255,0.72); border: 2px solid var(--line); border-radius: 22px; padding: 16px 18px;
}
.feedback-banner.good { border-color: #8ac88b; box-shadow: 0 0 0 4px rgba(138,200,139,0.15); }
.feedback-banner.bad { border-color: #e28b8b; box-shadow: 0 0 0 4px rgba(226,139,139,0.15); }
.mole-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.mole {
  position: relative; border: 2px solid #9c6e3c; background: radial-gradient(circle at top, #c28d63, #93623c); color: #fff8ef;
  border-radius: 999px 999px 28px 28px; min-height: 130px; padding: 18px 10px; box-shadow: inset 0 12px 0 rgba(255,255,255,0.12);
  cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.mole:hover { transform: translateY(-2px); }
.mole.active { box-shadow: 0 0 0 6px rgba(90, 142, 203, 0.18), inset 0 12px 0 rgba(255,255,255,0.12); }
.mole-badge {
  position: absolute; top: 10px; right: 10px; font-size: 0.78rem; font-weight: 900; padding: 4px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.18);
}
.mole-tone { display: block; font-size: 2.2rem; font-weight: 900; margin-top: 22px; }
.mole-sub { display: block; margin-top: 8px; font-weight: 700; opacity: 0.9; }
.mode-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.mode-btn.active { background: linear-gradient(180deg, #8cb8e4, #5a8ecb); color: #fff; border-color: transparent; }

.keyboard-card { display: grid; gap: 22px; }
.keyboard-grid {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px;
}
.key-btn {
  min-height: 74px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, #fff9ef, #f1e1c6);
  color: var(--ink); font-weight: 900; font-size: 1.4rem; cursor: pointer; box-shadow: var(--shadow);
}
.key-btn small { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-top: 4px; }
.key-btn.selected { background: linear-gradient(180deg, #d9ebff, #b7d5f5); }
.typed-row { display: flex; flex-wrap: wrap; gap: 10px; min-height: 52px; padding: 10px; border: 1px dashed var(--line); border-radius: 14px; background: #fff; }
.typed-token { padding: 8px 12px; border-radius: 999px; background: #edf4fc; border: 1px solid #c5ddf6; font-weight: 800; }
.choice-grid { display: grid; gap: 12px; }
.choice-btn {
  width: 100%; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: #fff; text-align: left; cursor: pointer;
  font-weight: 800; font-size: 1.1rem;
}
.choice-btn.correct { border-color: #8ac88b; background: #f2fff2; }
.choice-btn.wrong { border-color: #e28b8b; background: #fff3f3; }

.journal-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; }
.article {
  background: rgba(255,255,255,0.86); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); overflow: hidden;
}
.article .article-body { padding: 24px; }
.vocab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.vocab-card {
  padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: #fffaf1;
}
.feature-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.feature-list li:last-child { border-bottom: 0; }
.icon-bullet {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #f4ebda; font-weight: 900;
}

.cta-banner {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding: 22px; border-radius: 28px; background: linear-gradient(135deg, rgba(90,142,203,0.12), rgba(243,200,112,0.18)); border: 1px solid var(--line);
}

.site-footer {
  border-top: 1px solid var(--line); padding: 36px 0 54px; background: rgba(255,250,242,0.92);
}
.footer-grid { display: grid; grid-template-columns: 1.1fr 0.9fr 0.9fr; gap: 20px; }
.footer-links { display: grid; gap: 8px; }
.note-box {
  padding: 14px 16px; border-radius: 18px; background: #fff8ea; border: 1px dashed var(--line); color: var(--ink-soft);
}
.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  background: rgba(84, 51, 28, 0.92); color: white; padding: 14px 16px; border-radius: 16px;
  box-shadow: var(--shadow); opacity: 0; transform: translateY(16px); pointer-events: none; transition: 0.2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .hero-copy-home { width: min(54%, 520px); }
  .brand-wordmark { width: 260px; }
  .hero-grid, .split, .map-layout, .journal-layout, .footer-grid { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
  .mole-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .container { width: min(100% - 20px, var(--max)); }
  .header-inner { min-height: 82px; }
  .mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-row {
    position: absolute; left: 12px; right: 12px; top: 84px;
    background: rgba(255,251,244,0.98); border: 1px solid var(--line); border-radius: 22px; padding: 14px;
    box-shadow: var(--shadow); display: none; flex-direction: column; align-items: stretch;
  }
  .nav-row.open { display: flex; }
  .site-nav { flex-direction: column; align-items: stretch; }
  .site-nav a, .header-actions a { display: block; }
  .header-actions { flex-direction: column; width: 100%; }
  .social-links { justify-content: center; }
  .social-links { justify-content: center; }
  .hero { padding-top: 18px; }
  .hero-home-card { min-height: auto; }
  .hero-home-bg { min-height: 420px; object-fit: cover; object-position: right center; }
  .hero-home-overlay { position: absolute; inset: 0; align-items: flex-start; }
  .hero-copy-home { width: min(100%, 460px); padding: 22px; }
  .hero-stats, .grid-3, .grid-4, .grid-2, .vocab-grid { grid-template-columns: 1fr; }
  .filter-bar { align-items: stretch; }
  .filter-bar select, .filter-bar input { width: 100%; }
  .card-media { aspect-ratio: 4 / 3; }
  .map-frame { max-height: 72vh; overflow: auto; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .mole-grid { grid-template-columns: repeat(2, 1fr); }
  .keyboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cta-banner { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .brand-mark { width: 52px; height: 52px; }
  .brand-wordmark { width: 200px; }
  .page-title { font-size: 2.2rem; }
  .hero-actions, .card-actions { flex-direction: column; align-items: stretch; }
  .btn, .btn-outline, .btn-soft { width: 100%; }
  .kpi-row { grid-template-columns: 1fr; }
  .mole-grid { grid-template-columns: 1fr; }
  .keyboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quiz-header { align-items: stretch; }
}


/* v3 refinements */
.header-inner { min-height: 94px; gap: 12px; }
.nav-row { flex: 1; min-width: 0; justify-content: space-between; }
.site-nav { flex: 1; justify-content: center; gap: 10px; flex-wrap: nowrap; }
.site-nav a { white-space: nowrap; padding: 12px 14px; }
.brand { gap: 12px; flex-shrink: 0; }
.brand-mark { width: 76px; height: 76px; }
.brand-wordmark { width: clamp(165px, 15vw, 235px); }
.header-actions { gap: 10px; flex-shrink: 0; }

.social-link { position: relative; width: 48px; height: 48px; border-radius: 17px; overflow: hidden; }
.social-link-bg { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.95), rgba(255,255,255,0.55) 50%, transparent 55%), linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,255,255,0.75)); opacity: 0.9; }
.social-link svg { position: relative; z-index: 1; }
.social-link::after { content: ''; position: absolute; width: 18px; height: 18px; right: -3px; top: -3px; border-radius: 50%; background: rgba(255,255,255,0.88); box-shadow: 0 0 0 1px rgba(232,218,195,0.7); }
.social-link.youtube { background: linear-gradient(135deg, #fff5f2, #ffe4d9); }
.social-link.instagram { background: linear-gradient(135deg, #fff0f8, #f2e7ff); }
.social-link.facebook { background: linear-gradient(135deg, #eef5ff, #dde9ff); }
.site-nav a::before { background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(199,220,244,0.88)); }
.site-nav a:hover, .site-nav a.active { transform: translateY(-3px) scale(1.02); }
.site-nav a:hover::after, .site-nav a.active::after { transform: scaleX(1); }

.lesson-card { position: relative; }
.favorite-btn { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border: none; border-radius: 50%; background: rgba(255,255,255,0.92); box-shadow: 0 10px 18px rgba(94,65,39,0.16); color: #b47a87; font-size: 1.05rem; font-weight: 900; cursor: pointer; z-index: 3; transition: transform .18s ease, background .18s ease, color .18s ease; }
.favorite-btn:hover { transform: translateY(-2px) scale(1.06); background: #fff; }
.favorite-btn.is-favorite { background: #ffe7ef; color: #d1567d; }
.favorite-btn .heart-fill { display:inline-block; transform: translateY(1px); }
.media-playable { position: relative; display: block; overflow: hidden; }
.media-playable img { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.media-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(69,48,29,0.08), rgba(69,48,29,0.32)); opacity: 0; transition: opacity .28s ease; }
.play-pill { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 999px; background: rgba(255,255,255,0.94); color: var(--ink); font-weight: 900; box-shadow: 0 12px 28px rgba(69,48,29,.18); transform: translateY(8px) scale(.96); transition: transform .28s ease; }
.lesson-card:hover .media-playable img { transform: scale(1.08); }
.lesson-card:hover .media-play-overlay { opacity: 1; }
.lesson-card:hover .play-pill { transform: translateY(0) scale(1.03); }
.lesson-card:hover { animation: lesson-bounce .42s ease; }
@keyframes lesson-bounce { 0% { transform: translateY(0); } 38% { transform: translateY(-7px); } 72% { transform: translateY(2px); } 100% { transform: translateY(0); } }
.empty-state { text-align: center; padding: 18px 20px; border-radius: 18px; background: #fffaf1; border: 1px dashed var(--line); color: var(--ink-soft); }
.learning-filter-bar { align-items: center; }

.tone-shell { display: grid; gap: 24px; }
.tone-stage { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.mika-speaker-card { position: sticky; top: 112px; }
.mika-speaker-top { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; }
.mika-mascot { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(93,62,34,.16)); }
.mika-speech { margin-top: 12px; padding: 14px 16px; border-radius: 20px; background: #fff9f0; border: 1px solid var(--line); color: var(--ink-soft); line-height: 1.7; }
.tone-mini-kpis { margin-top: 14px; grid-template-columns: repeat(2, 1fr); }
.tone-mini-kpis .kpi:last-child { grid-column: span 2; }
.wood-sign.big-sign { padding: 20px 24px; border-radius: 28px; background: linear-gradient(180deg, #f0c990, #dda96c); border: 3px solid #9c6e3c; box-shadow: 0 18px 34px rgba(108,70,38,0.18); }
.wood-title { font-size: clamp(1.55rem, 2.7vw, 2.6rem); font-weight: 900; color: #4b2c14; line-height: 1.12; }
.wood-title span { font-size: .65em; color: #694126; }
.target-row { margin-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.target-pill { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: rgba(255,250,244,.78); border: 1px solid rgba(156,110,60,.3); }
.target-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.tone-play-btn { min-width: 160px; }
.tone-mode-toggle { margin-top: 14px; }
.tone-feedback { margin: 18px 0 16px; }
.prompt-strip { margin-bottom: 18px; }
.tone-board-visual { background: linear-gradient(180deg, #dcecff, #bbd7f4 55%, #a7c3e4); border-color: #8aa8cd; padding: 28px 24px 34px; }
.tone-mole-grid { grid-template-columns: repeat(5, 1fr); gap: 18px; }
.tone-mole { min-height: 162px; border-radius: 999px 999px 30px 30px; background: linear-gradient(180deg, #cca06d, #a87449); transform-origin: center bottom; }
.tone-mole .mole-hole { position: absolute; left: 14px; right: 14px; bottom: -18px; height: 28px; border-radius: 999px; background: radial-gradient(circle at center, #8b5a36 0%, #6b4327 55%, #4d301d 100%); box-shadow: inset 0 6px 8px rgba(0,0,0,.22); }
.tone-mole .mole-feedback-mark { position: absolute; left: 50%; top: 18px; transform: translateX(-50%) scale(.7); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.75rem; font-weight: 900; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.tone-mole.correct-hit .mole-feedback-mark { opacity: 1; transform: translateX(-50%) scale(1); background: rgba(207,244,213,.96); color: #1e8d46; }
.tone-mole.correct-hit .mole-feedback-mark::before { content: '✓'; }
.tone-mole.wrong-hit .mole-feedback-mark { opacity: 1; transform: translateX(-50%) scale(1); background: rgba(255,229,229,.98); color: #d04d4d; }
.tone-mole.wrong-hit .mole-feedback-mark::before { content: '✕'; }
.tone-mole.active { box-shadow: 0 0 0 7px rgba(106,177,252,.22), 0 18px 24px rgba(83,118,150,.18), inset 0 12px 0 rgba(255,255,255,.14); }
.tone-mole.correct-hit { animation: molePopGood .28s ease; }
.tone-mole.wrong-hit { animation: molePopBad .28s ease; }
@keyframes molePopGood { 0% { transform: translateY(0); } 45% { transform: translateY(-10px) scale(1.03); } 100% { transform: translateY(0); } }
@keyframes molePopBad { 0% { transform: translateX(0); } 30% { transform: translateX(-6px); } 60% { transform: translateX(6px); } 100% { transform: translateX(0); } }
.kpi.flash { animation: kpiFlash .36s ease; }
@keyframes kpiFlash { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }

@media (max-width: 1260px) {
  .site-nav { gap: 6px; }
  .site-nav a { padding: 10px 11px; font-size: .95rem; }
  .brand-mark { width: 70px; height: 70px; }
  .brand-wordmark { width: clamp(150px, 14vw, 220px); }
}
@media (max-width: 980px) {
  .tone-stage { grid-template-columns: 1fr; }
  .mika-speaker-card { position: static; }
  .tone-mini-kpis { grid-template-columns: repeat(5, 1fr); }
  .tone-mini-kpis .kpi:last-child { grid-column: auto; }
}
@media (max-width: 760px) {
  .site-nav { flex-wrap: wrap; justify-content: flex-start; }
  .brand-mark { width: 64px; height: 64px; }
  .brand-wordmark { width: 170px; }
  .tone-mini-kpis { grid-template-columns: repeat(2, 1fr); }
  .tone-mole-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .tone-mole-grid { grid-template-columns: 1fr; }
}


/* =========================
   v4 overrides / additions
   ========================= */
:root {
  --accent: #8d6444;
  --accent-2: #b98a66;
  --accent-3: #ead7c1;
  --brown-deep: #5c3923;
  --brown-soft: #8b6853;
  --bg-cream: #fffaf3;
  --line-soft: rgba(146, 107, 76, 0.18);
}
body { color: var(--brown-deep); background: linear-gradient(180deg, #fffdf9 0%, #fbf5eb 100%); }
main { min-height: calc(100vh - 240px); }
.site-header { background: rgba(255,252,246,0.92); border-bottom: none; box-shadow: none; }
.site-header::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, rgba(120,87,62,0), rgba(120,87,62,.32), rgba(120,87,62,0)); opacity:0; transition:opacity .35s ease; }
body.scrolled .site-header::after { opacity:1; }
.header-inner { min-height:86px; gap:14px; }
.brand { gap:8px; }
.brand-mark { width:72px; height:72px; }
.brand-wordmark { width: clamp(180px, 18vw, 250px); }
.site-nav { gap:8px; }
.site-nav a { color:var(--brown-soft); font-weight:800; padding:10px 14px; }
.site-nav a::before { background:linear-gradient(180deg, rgba(185,138,102,0.16), rgba(255,255,255,0.96)); }
.site-nav a::after { background:linear-gradient(90deg, #8d6444, #c49a79, #dabb8a); }
.site-nav a.active, .site-nav a:hover { color:var(--brown-deep); box-shadow:0 12px 22px rgba(118,82,53,0.12); }
.header-actions { gap:10px; }
.social-links { gap:12px; }
.social-link { width:46px; height:46px; border-radius:50%; background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,239,230,.98)); color:var(--brown-deep); border-color:rgba(150,110,83,.18); position:relative; overflow:hidden; }
.social-link .social-label { font-weight:900; font-size:.86rem; letter-spacing:.04em; }
.social-link:hover { transform:translateY(-3px) rotate(-8deg) scale(1.05); box-shadow:0 18px 28px rgba(106,76,49,0.18); }
.social-link::before { content:""; position:absolute; inset:6px; border-radius:50%; border:1px dashed rgba(141,100,68,.15); transition:transform .25s ease, opacity .25s ease; }
.social-link:hover::before { transform:rotate(28deg) scale(1.06); }
.btn, .btn-outline { border-radius:999px; }
.btn { background:linear-gradient(180deg, #a37a58, #866042); box-shadow:0 14px 26px rgba(125,88,56,0.22); }
.btn:hover { box-shadow:0 16px 30px rgba(125,88,56,0.26); }
.btn-outline { color:var(--brown-deep); border-color:rgba(141,100,68,.18); }
.btn-journey { padding-inline:22px; }
.state-switcher { position:fixed; left:18px; top:50%; transform:translateY(-50%); z-index:140; width:190px; background:rgba(255,255,255,.92); border:1px solid rgba(141,100,68,.14); border-radius:24px; box-shadow:0 18px 36px rgba(98,70,43,.14); padding:14px; display:flex; flex-direction:column; gap:8px; backdrop-filter:blur(14px); }
.state-switcher-title { font-size:.84rem; font-weight:900; color:var(--brown-soft); }
.state-btn { border:1px solid rgba(141,100,68,.12); background:#fff; color:var(--brown-deep); border-radius:16px; padding:10px 12px; text-align:left; cursor:pointer; font-weight:700; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.state-btn:hover, .state-btn.is-active { transform:translateY(-1px); box-shadow:0 10px 18px rgba(106,76,49,.12); border-color:rgba(141,100,68,.3); background:linear-gradient(180deg, #fff, #fbf3e7); }
.hero-home-card-v4 { border-radius:36px; background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,249,242,.96)); }
.hero-copy-home-v4 { width:min(46%, 580px); padding-right:24px; }
.hero-copy-home-v4 .page-title { font-size:clamp(2.2rem, 5vw, 4.3rem); margin-bottom:14px; }
.hero-copy-home-v4 .page-subtitle { max-width:36rem; font-size:clamp(1rem, 1.6vw, 1.14rem); }
.hero-feature-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:22px; }
.hero-feature-card { background:rgba(255,255,255,.84); border:1px solid rgba(141,100,68,.12); border-radius:20px; padding:16px; box-shadow:0 10px 24px rgba(106,76,49,.08); }
.hero-feature-card h3 { margin:0 0 8px; font-size:1.02rem; }
.hero-feature-card p { margin:0; color:var(--brown-soft); line-height:1.6; }
.page-title-inline { font-size:clamp(1.9rem, 3vw, 2.7rem); white-space:nowrap; }
.page-title-inline-sm { font-size:1.65rem; margin:0 0 6px; }
.learning-filter, .journal-filter { justify-content:flex-start; gap:14px; border-radius:24px; background:rgba(255,255,255,.78); }
.favorite-filter-btn { min-width:68px; min-height:56px; padding:10px 16px; border:1px solid rgba(141,100,68,.14); background:white; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 10px 18px rgba(106,76,49,.08); color:var(--brown-deep); font-weight:800; }
.favorite-filter-btn span { font-size:1.18rem; }
.favorite-filter-btn.is-active { background:linear-gradient(180deg, #fff3f5, #ffe8ed); border-color:rgba(208,111,132,.32); }
.favorite-btn { position:absolute; right:16px; top:16px; z-index:3; width:42px; height:42px; border-radius:50%; border:1px solid rgba(141,100,68,.16); background:rgba(255,255,255,.95); color:#c59a8c; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:1rem; box-shadow:0 10px 22px rgba(106,76,49,.08); }
.favorite-btn.is-favorite { color:#d86b82; background:#fff0f4; }
.resource-card, .journal-card-v4 { position:relative; }
.lesson-media { position:relative; }
.lesson-media img, .journal-card-v4 .card-media img { transition:transform .34s cubic-bezier(.2,.8,.2,1), filter .34s ease; }
.lesson-card-v4:hover .lesson-media img, .journal-card-v4:hover .card-media img { transform:scale(1.05) translateY(-2px); }
.video-hover-indicator { position:absolute; inset:auto 18px 18px 18px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:999px; padding:12px 16px; background:rgba(92,57,35,.88); color:white; font-weight:800; transform:translateY(18px); opacity:0; transition:.28s ease; }
.lesson-card-v4:hover .video-hover-indicator { opacity:1; transform:translateY(0) scale(1.02); }
.play-icon { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.18); display:inline-flex; align-items:center; justify-content:center; padding-left:2px; }
.modern-dropdown { position:relative; }
.btn-dropdown-trigger { width:100%; min-height:50px; border-radius:18px; border:1px solid rgba(141,100,68,.12); cursor:pointer; background:linear-gradient(180deg, #fff, #f6efe5); color:var(--brown-deep); font-weight:900; box-shadow:0 12px 20px rgba(106,76,49,.08); transition:transform .22s ease, box-shadow .22s ease; }
.modern-dropdown:hover .btn-dropdown-trigger, .modern-dropdown:focus-within .btn-dropdown-trigger { transform:translateY(-2px); box-shadow:0 16px 28px rgba(106,76,49,.13); }
.dropdown-menu { position:absolute; left:0; right:0; top:calc(100% + 10px); z-index:5; padding:10px; background:rgba(255,255,255,.98); border:1px solid rgba(141,100,68,.14); border-radius:18px; box-shadow:0 18px 30px rgba(106,76,49,.16); display:grid; gap:8px; opacity:0; pointer-events:none; transform:translateY(8px); transition:.22s ease; }
.dropdown-menu a { display:block; padding:11px 12px; border-radius:12px; font-weight:700; color:var(--brown-deep); background:linear-gradient(180deg, #fff, #faf4ea); }
.journal-top-cta { display:flex; align-items:center; justify-content:space-between; gap:20px; border-radius:28px; }
.journal-preview { display:grid; gap:9px; margin:14px 0 18px; }
.preview-line { color:var(--brown-soft); line-height:1.6; }
.text-link { border:none; padding:0; background:none; color:#8d6444; text-decoration:underline; cursor:pointer; font:inherit; font-weight:800; }
.journal-card-v4 { transition:transform .24s ease, box-shadow .24s ease; }
.journal-card-v4:hover { transform:translateY(-4px); box-shadow:0 18px 30px rgba(106,76,49,.14); }
.map-layout-rich { grid-template-columns:minmax(0, 1.18fr) minmax(320px, .92fr); align-items:start; }
.city-list-compact { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; max-height:720px; overflow:auto; padding-right:4px; }
.city-link { text-align:left; color:var(--brown-deep); background:linear-gradient(180deg, #fff, #fbf4ea); border:1px solid rgba(141,100,68,.12); border-radius:16px; padding:12px 12px; transition:transform .2s ease, box-shadow .2s ease; }
.city-link:hover { transform:translateY(-2px); box-shadow:0 10px 18px rgba(106,76,49,.10); }
.city-link small { display:block; color:var(--brown-soft); margin-top:4px; }
.city-highlight-panel { min-height:320px; }
.city-guide-layout { grid-template-columns:minmax(0, 1fr) minmax(300px, .9fr); }
.city-image-card .card-media { aspect-ratio:5 / 4; background:#fff; }
.city-guide-image-wrap img { width:100%; height:100%; object-fit:contain; background:#fff; }
.mini-city-grid { display:flex; flex-wrap:wrap; gap:10px; }
.mini-city-pill { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:8px 12px; background:#fff; border:1px solid rgba(141,100,68,.14); font-weight:700; color:var(--brown-deep); }
.legal-shell { max-width:920px; }
.legal-page-section { padding-top:34px; }
.legal-hero-body { display:flex; gap:18px; align-items:flex-start; }
.legal-mika { font-size:2rem; line-height:1.2; }
.legal-last-updated { margin:4px 0 12px; font-weight:700; }
.legal-content { max-width:740px; margin:0 auto; }
.legal-content h2 { margin:28px 0 10px; font-size:1.18rem; }
.legal-content p, .legal-content li { color:var(--brown-soft); line-height:1.8; }
.legal-content ul { padding-left:20px; }
.footer-links.legal-links a { text-decoration:underline; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hidden-by-filter { display:none !important; }
@media (max-width: 1280px) { .state-switcher { left:10px; width:172px; } }
@media (max-width: 1100px) { .hero-feature-grid { grid-template-columns:1fr; } .hero-copy-home-v4 { width:min(54%, 640px); } .page-title-inline { white-space:normal; } }
@media (max-width: 980px) { .state-switcher { position:static; transform:none; width:min(100% - 32px, var(--max)); margin:12px auto 0; } }
@media (max-width: 860px) { .hero-copy-home-v4 { width:100%; } .header-inner { align-items:flex-start; padding-block:12px; } .nav-row { width:100%; } .city-list-compact { grid-template-columns:1fr; } .journal-top-cta { flex-direction:column; align-items:flex-start; } }


/* ===== v13 precision patch ===== */
.brand-mark{width:68px!important;height:68px!important;}
.brand-wordmark{width:168px!important;margin-left:-2px;}
.header-actions .btn-journey,[data-dynamic-cta]{display:none!important;}
.header-actions{gap:12px;}
.social-links{gap:10px;}
.social-link{width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,#fff,#f6efe5);border:1px solid rgba(128,95,71,.16);box-shadow:0 10px 16px rgba(92,66,44,.08);position:relative;overflow:hidden;}
.social-link::before,.social-link::after{display:none!important;content:none!important;}
.social-link .social-label{font-weight:800;font-size:.82rem;line-height:1;color:var(--brown-deep);position:relative;top:0;right:0;}
.social-link:hover{transform:translateY(-2px) rotate(-5deg) scale(1.03);box-shadow:0 14px 20px rgba(92,66,44,.12);}
.site-nav a{padding:10px 13px!important;color:#7e6351!important;background:transparent!important;box-shadow:none!important;}
.site-nav a::before{background:linear-gradient(180deg, rgba(188,157,132,.12), rgba(255,255,255,.94))!important;transform:translateY(8px) scale(.95)!important;transition:opacity .45s ease, transform .45s ease!important;}
.site-nav a::after{height:2px!important;background:linear-gradient(90deg,#8b6a56,#c7ab90,#d7c0aa)!important;transition:transform .48s ease!important;bottom:8px!important;}
.site-nav a.active,.site-nav a:hover{transform:translateY(-1px)!important;color:#5e3e2a!important;box-shadow:none!important;}
.site-header::after{transition:opacity 1.05s ease!important;}
.hero-home-bg-shift{object-position:62% center!important;}
.hero-copy-home-v6{width:min(47%,560px);}
.hero-title-composed{display:flex;flex-direction:column;gap:2px;line-height:.98;letter-spacing:-.035em;margin-bottom:16px;}
.hero-title-composed span:first-child{font-size:clamp(2.3rem,4.8vw,4.2rem);}
.hero-title-composed span:last-child{font-size:clamp(2.1rem,4.2vw,3.8rem);color:#6f4a31;}
.hero-feature-grid{margin-top:20px;}
.learning-center-title{font-size:clamp(1.72rem,2.5vw,2.28rem)!important;line-height:1.14!important;letter-spacing:-.02em;}
.lesson-media .video-hover-indicator{inset:50% auto auto 50%!important;transform:translate(-50%,-50%) scale(.94)!important;opacity:0;}
.lesson-card-v4:hover .video-hover-indicator,.lesson-card:hover .video-hover-indicator{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important;}
.play-pill-large{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:999px;background:rgba(92,57,35,.90);color:#fff;font-weight:800;box-shadow:0 12px 18px rgba(44,27,17,.18);}
.study-materials-trigger{background:linear-gradient(180deg,#eaf1f7,#d6e4f0)!important;color:#4f6678!important;border-color:rgba(112,141,165,.25)!important;}
.study-materials-trigger:hover,.modern-dropdown:hover .study-materials-trigger,.modern-dropdown:focus-within .study-materials-trigger{background:linear-gradient(180deg,#eff5fa,#d9e7f3)!important;color:#425a6f!important;}
.modern-dropdown{margin-top:14px;}
.dropdown-menu{min-width:260px;right:auto!important;left:0!important;padding:10px!important;border-radius:18px!important;background:rgba(255,255,255,.98)!important;border:1px solid rgba(125,137,156,.18)!important;box-shadow:0 18px 30px rgba(86,104,122,.16)!important;}
.dropdown-menu a{padding:12px 14px!important;background:linear-gradient(180deg,#ffffff,#f8fbff)!important;color:#58708a!important;border:1px solid rgba(212,224,235,.7);}
.dropdown-menu a:hover{background:linear-gradient(180deg,#eef5fb,#e4eef8)!important;}
.hero-actions .btn-journey{display:inline-flex!important;}
.copyright-line{margin-top:30px;color:var(--brown-soft);}
.interactive-lab-title,.interactive-lab-page .page-title{font-size:clamp(1.95rem,3.5vw,3rem)!important;}
.journal-inline-cta{display:flex;align-items:center;justify-content:flex-start;gap:14px;padding:4px 0 4px;}
.btn-join-small{min-height:42px;padding:10px 16px;font-size:.96rem;}
.journal-filter-v6{align-items:center;gap:10px;}
.journal-grid-v3 .article{position:relative;overflow:hidden;border-radius:28px;background:rgba(255,255,255,.86);border:1px solid var(--line);box-shadow:var(--shadow);}
.journal-grid-v3 .article .card-media img{transition:transform .34s ease;}
.journal-grid-v3 .article:hover .card-media img{transform:scale(1.04);}
.journal-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.journal-card-action{font-size:.93rem;}
.journal-card-action.primary{background:linear-gradient(180deg,#a37a58,#866042);color:#fff;}
body[data-user-state="guest"] .journal-card-action.primary,body[data-user-state="member"] .journal-card-action.primary{display:inline-flex;}
body[data-user-state="subscriber"] .journal-card-action{display:inline-flex;}
body[data-user-state="subscriber"] .member-lock{opacity:1;pointer-events:auto;}
.member-lock{opacity:.72;}
.journal-entry-layout{grid-template-columns:minmax(0,1fr) minmax(320px,.92fr);align-items:start;}
.journal-entry-image{aspect-ratio:4/3;background:#fff;}
.entry-copy{font-size:1.02rem;line-height:1.85;margin:0;}
.city-list-single{display:flex!important;flex-wrap:nowrap!important;gap:10px;overflow-x:auto;padding-bottom:6px;}
.city-chip{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:999px;background:#fff;border:1px solid rgba(141,100,68,.14);font-weight:700;color:#6f503b;white-space:nowrap;}
.city-chip:hover{background:#f8efe3;}
.footer-grid{padding-bottom:8px;}
@media (max-width:980px){.hero-copy-home-v6{width:100%;}.journal-entry-layout{grid-template-columns:1fr;}.journal-grid-v3{grid-template-columns:1fr!important;}.hero-title-composed span:first-child,.hero-title-composed span:last-child{font-size:clamp(2rem,8vw,3.2rem);} }


/* ===== v14 refinements ===== */
.brand { gap: 8px !important; }
.brand-mark { width: 60px !important; }
.brand-wordmark { width: 148px !important; margin-left: -3px !important; }
.header-actions { gap: 12px; }

/* Social circles: remove unwanted highlight / blank corner */
.social-links { gap: 12px !important; }
.social-link {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  box-shadow: 0 10px 18px rgba(92,66,44,.10) !important;
  transform: none;
}
.social-link::before,
.social-link::after,
.social-link-bg { display:none !important; content:none !important; }
.social-link.youtube { background: #f7ece5 !important; }
.social-link.instagram { background: #f5edf4 !important; }
.social-link.facebook { background: #ebf1fb !important; }
.social-link .social-label { top: 0 !important; position: static !important; font-size: .84rem !important; }
.social-link:hover { transform: translateY(-2px) scale(1.03) !important; }

/* page titles back to softer previous hierarchy */
main.section > .container.stack > div:first-child .page-title,
.legal-page-section .page-title,
#journalEntryPage .page-title {
  font-size: clamp(1.95rem, 3.2vw, 2.95rem) !important;
  letter-spacing: -0.025em;
  line-height: 1.12;
}
main.section > .container.stack > div:first-child .page-subtitle,
.legal-page-section .page-subtitle,
#journalEntryPage .page-subtitle {
  max-width: 860px;
  color: var(--brown-soft);
}

/* Learning center hover overlay: revert to softer centered look */
.lesson-media .video-hover-indicator {
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) scale(.94) !important;
  opacity: 0;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.lesson-card-v4:hover .video-hover-indicator,
.lesson-card:hover .video-hover-indicator {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}
.play-pill-large {
  padding: 11px 22px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.84) !important;
  color: #69452f !important;
  border: 1px solid rgba(121,86,59,.16);
  box-shadow: 0 10px 18px rgba(67,40,20,.10) !important;
  backdrop-filter: blur(3px);
}

/* Learning center study materials dropdown */
.study-materials-trigger {
  background: linear-gradient(180deg, #e9f0f6, #d6e1ee) !important;
  color: #536b80 !important;
  border: 1px solid rgba(112,141,165,.28) !important;
}
.study-materials-trigger:hover,
.modern-dropdown:hover .study-materials-trigger,
.modern-dropdown:focus-within .study-materials-trigger {
  background: linear-gradient(180deg, #eef4f9, #dde8f3) !important;
  color: #476074 !important;
}
.modern-dropdown { margin-top: 14px; }
.dropdown-menu {
  min-width: 280px;
  right: auto !important;
  left: 0 !important;
  padding: 12px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.985) !important;
  border: 1px solid rgba(199,212,224,.9) !important;
  box-shadow: 0 22px 36px rgba(86,104,122,.16) !important;
  gap: 10px !important;
}
.dropdown-section {
  display: grid;
  gap: 8px;
}
.dropdown-section + .dropdown-section {
  padding-top: 8px;
  border-top: 1px dashed rgba(179,193,206,.75);
}
.dropdown-section-title {
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #90a1b3;
  font-weight: 800;
  padding-left: 4px;
}
.dropdown-item {
  display: grid !important;
  gap: 2px;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg,#ffffff,#f8fbff) !important;
  color: #58708a !important;
  border: 1px solid rgba(212,224,235,.7) !important;
}
.dropdown-item:hover {
  background: linear-gradient(180deg,#eef5fb,#e4eef8) !important;
}
.dropdown-item-main { font-weight: 800; color: #4e6980; }
.dropdown-item-sub { font-size: .83rem; color: #8b9db0; }

/* Journal button logic visual consistency */
.journal-card-action { min-width: 160px; justify-content: center; text-align: center; }
.journal-card-action.secondary,
.journal-card-action.tertiary { color: #7a8997; border-color: rgba(124,142,160,.28); background: #f7fafc; }
.journal-card-action.member-lock { opacity: 1; }
.tag.free, .tag.member { font-weight: 800; }

/* Journal entry preview audio bar */
.audio-preview-shell {
  display: flex;
  align-items: center;
  gap: 14px;
}
.audio-preview-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(124,142,160,.28);
  background: linear-gradient(180deg,#fff,#f5f8fb);
  color: #5a7388;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(86,104,122,.10);
}
.audio-preview-track {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  border-radius: 18px;
  padding: 14px 16px;
  background: linear-gradient(180deg,#fbfdfd,#f4f8fb);
  border: 1px solid rgba(204,216,226,.9);
}
.audio-preview-bars {
  display: flex;
  align-items: end;
  gap: 4px;
  height: 24px;
}
.audio-preview-bars span {
  width: 4px;
  background: linear-gradient(180deg,#8cb0cf,#5f7d99);
  border-radius: 999px;
  height: 10px;
  opacity: .9;
  transform-origin: bottom;
}
.audio-preview-bars span:nth-child(2){height:16px}.audio-preview-bars span:nth-child(3){height:12px}.audio-preview-bars span:nth-child(4){height:20px}.audio-preview-bars span:nth-child(5){height:14px}.audio-preview-bars span:nth-child(6){height:18px}.audio-preview-bars span:nth-child(7){height:11px}.audio-preview-bars span:nth-child(8){height:15px}
.audio-preview-meta strong { display: block; color: var(--brown-deep); }
.audio-preview-meta small { color: #90a1b3; }
.audio-preview-time { color: #8c9cad; font-weight: 700; }
.audio-preview-track.is-playing .audio-preview-bars span {
  animation: audioPulse .9s ease-in-out infinite alternate;
}
.audio-preview-track.is-playing .audio-preview-bars span:nth-child(2){animation-delay:.08s}
.audio-preview-track.is-playing .audio-preview-bars span:nth-child(3){animation-delay:.16s}
.audio-preview-track.is-playing .audio-preview-bars span:nth-child(4){animation-delay:.24s}
.audio-preview-track.is-playing .audio-preview-bars span:nth-child(5){animation-delay:.32s}
.audio-preview-track.is-playing .audio-preview-bars span:nth-child(6){animation-delay:.40s}
.audio-preview-track.is-playing .audio-preview-bars span:nth-child(7){animation-delay:.48s}
.audio-preview-track.is-playing .audio-preview-bars span:nth-child(8){animation-delay:.56s}
@keyframes audioPulse { from { transform: scaleY(.65); opacity: .75; } to { transform: scaleY(1.2); opacity: 1; } }

/* Footer spacing */
.footer-links.legal-links { row-gap: 10px; }
.footer-links.legal-links a { text-decoration: none; }
.footer-links.legal-links a:hover { text-decoration: underline; }
.copyright-line { margin-top: 36px !important; color: var(--brown-soft); }
.footer-links.legal-links + .copyright-line { padding-top: 8px; }

/* Legal pages prettier */
.legal-page-section { padding-top: 34px; }
.legal-shell {
  max-width: 980px;
  display: grid;
  gap: 18px;
}
.legal-hero {
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,250,244,.98), rgba(248,242,234,.96));
  border: 1px solid rgba(223,206,184,.8);
  box-shadow: 0 24px 42px rgba(90,66,44,.10);
}
.legal-hero-body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 32px;
}
.legal-mika {
  font-size: 2.4rem;
  line-height: 1.2;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 0 0 1px rgba(224,208,191,.7);
}
.legal-last-updated { margin: 6px 0 12px; font-weight: 700; }
.legal-nav-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 8px;
}
.legal-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(210,194,177,.9);
  color: var(--brown-deep);
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(90,66,44,.06);
}
.legal-pill.is-active {
  background: linear-gradient(180deg,#fff8f1,#f6ede2);
  border-color: rgba(182,145,111,.5);
}
.legal-card {
  border-radius: 28px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(223,206,184,.72);
  box-shadow: 0 22px 36px rgba(90,66,44,.08);
}
.legal-content {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: 8px;
  padding: 4px 4px 10px;
}
.legal-content h2 {
  margin: 26px 0 6px;
  font-size: 1.2rem;
  color: var(--brown-deep);
}
.legal-content p, .legal-content li {
  color: var(--brown-soft);
  line-height: 1.82;
}
.legal-content ul { padding-left: 20px; }
.legal-content > * + * { margin-top: 0; }

@media (max-width: 800px) {
  .legal-hero-body { padding: 24px; }
  .audio-preview-track { grid-template-columns: 1fr; justify-items: start; }
  .audio-preview-shell { align-items: stretch; }
}


/* ===== v15 homepage approved layout ===== */
.brand-mark { width: 64px !important; height: 64px !important; }
.brand-wordmark { width: 164px !important; margin-left: -2px !important; }

.homepage-visual-section {
  padding: 18px 0 54px;
}
.homepage-showcase-card {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(220, 205, 186, 0.9);
  box-shadow: 0 20px 42px rgba(88, 64, 43, 0.10);
  background: linear-gradient(180deg, #fffaf3, #f7eee2);
}
.homepage-showcase-image {
  display: block;
  width: 100%;
  height: auto;
}
.homepage-hotspot {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: rgba(255,255,255,0.001);
}
.homepage-hotspot:hover {
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.hotspot-journey { left: 8.2%; top: 53.5%; width: 15.5%; height: 6.8%; border-radius: 20px; }
.hotspot-learning { left: 7.5%; top: 72.5%; width: 28.5%; height: 23%; border-radius: 30px; }
.hotspot-journal { left: 36%; top: 72.5%; width: 28.5%; height: 23%; border-radius: 30px; }
.hotspot-lab { left: 64.7%; top: 72.5%; width: 28%; height: 23%; border-radius: 30px; }

@media (max-width: 900px) {
  .brand-mark { width: 60px !important; height: 60px !important; }
  .brand-wordmark { width: 156px !important; }
  .homepage-visual-section { padding-top: 14px; }
}


/* ===== v20 approved homepage layout ===== */
.home-approved-hero{background:#fbf2e6;border-top:1px solid rgba(221,201,177,.72);border-bottom:1px solid rgba(221,201,177,.72);overflow:hidden}
.home-approved-shell{width:min(100%,1720px);min-height:clamp(560px,34vw,660px);margin:0 auto;display:grid;grid-template-columns:minmax(520px,41.5%) minmax(0,58.5%);align-items:stretch;background:linear-gradient(90deg,#fbf2e6 0%,#fbf2e6 42%,#f5e6d1 42.1%,#f5e6d1 100%)}
.home-approved-copy{padding:clamp(62px,6.1vw,108px) clamp(42px,4.9vw,92px) clamp(50px,5vw,88px);display:flex;flex-direction:column;justify-content:center;color:#4a2a18}
.home-approved-title{margin:0 0 24px;font-family:Georgia,'Times New Roman',serif;font-weight:900;line-height:.94;letter-spacing:-.045em;color:#4b2b18;font-size:clamp(4.4rem,5.75vw,7.4rem)}
.home-approved-title span{display:block}
.home-approved-lede{margin:0;max-width:620px;color:#6e4d37;font-size:clamp(1.03rem,1.25vw,1.28rem);line-height:1.6;letter-spacing:.01em}
.home-approved-button{margin-top:30px;width:fit-content;min-height:54px;padding:0 26px;display:inline-flex;align-items:center;gap:12px;border-radius:15px;background:linear-gradient(180deg,#5f82ab,#476a93);color:white;font-weight:800;font-size:1.02rem;box-shadow:0 12px 24px rgba(55,88,126,.22);transition:transform .22s ease,box-shadow .22s ease}
.home-approved-button:hover{transform:translateY(-2px);box-shadow:0 16px 28px rgba(55,88,126,.28)}
.home-approved-visual{position:relative;overflow:hidden;min-height:inherit}
.home-approved-visual img{width:100%;height:100%;object-fit:cover;object-position:center right}
.home-approved-feature-section{background:#f7ecde;padding:28px 0 58px}
.home-approved-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,42px)}
.home-approved-card{min-height:200px;display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:22px;padding:26px 32px;border-radius:28px;background:rgba(255,249,240,.94);border:1px solid rgba(215,191,160,.78);box-shadow:0 10px 18px rgba(83,56,32,.09);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.home-approved-card:hover{transform:translateY(-4px);box-shadow:0 18px 30px rgba(83,56,32,.14);border-color:rgba(193,160,123,.85)}
.home-card-copy h2{margin:0 0 14px;color:#4c2d1c;font-size:clamp(1.28rem,1.5vw,1.65rem);line-height:1.1}
.home-card-copy p{margin:0 0 18px;color:#6e4d37;font-size:clamp(.98rem,1.05vw,1.08rem);line-height:1.48}
.home-card-link{color:#4f75a1;font-weight:800;font-size:1.03rem}
.home-card-link b{display:inline-block;margin-left:16px;font-size:1.3rem;transition:transform .22s ease}
.home-approved-card:hover .home-card-link b{transform:translateX(6px)}
.home-card-illustration{width:132px;height:118px;position:relative;transform:rotate(-4deg)}
.book-illustration .book-cover,.book-illustration .book-page{position:absolute;bottom:12px;width:62px;height:82px;border:3px solid #9e8060;background:#fff8e9;border-radius:10px 8px 12px 12px;box-shadow:0 8px 0 rgba(110,79,49,.12)}
.book-illustration .book-cover{left:12px;transform:skewY(-8deg)}
.book-illustration .book-page{right:18px;transform:skewY(8deg)}
.book-illustration .pencil-line{position:absolute;width:18px;height:96px;right:30px;bottom:6px;border-radius:999px;background:linear-gradient(90deg,#e0b25c,#f5d178);transform:rotate(19deg);box-shadow:inset 0 0 0 2px rgba(108,76,44,.18)}
.journal-illustration .journal-book{position:absolute;left:18px;bottom:10px;width:72px;height:92px;border-radius:10px;background:linear-gradient(180deg,#c19664,#ac7f53);border:3px solid #845d3f;box-shadow:0 10px 0 rgba(110,79,49,.12)}
.journal-illustration .journal-leaf{position:absolute;right:28px;top:10px;width:36px;height:80px;border-left:4px solid #7d8f52}
.journal-illustration .journal-leaf::before,.journal-illustration .journal-leaf::after{content:"";position:absolute;width:22px;height:14px;border-radius:50% 50% 50% 0;background:#93a765}
.journal-illustration .journal-leaf::before{left:-2px;top:18px;transform:rotate(-30deg)}
.journal-illustration .journal-leaf::after{left:10px;top:42px;transform:rotate(30deg)}
.journal-illustration .journal-photo{position:absolute;right:8px;bottom:10px;width:48px;height:58px;border-radius:6px;background:#fff8e9;border:3px solid #9e8060}
.lab-illustration .flask-body{position:absolute;left:18px;bottom:10px;width:76px;height:72px;border-radius:18px 18px 26px 26px;border:4px solid #8f9c90;background:linear-gradient(180deg,rgba(255,255,255,.8) 0%,rgba(117,158,153,.55) 60%,rgba(87,135,134,.68) 100%)}
.lab-illustration .flask-neck{position:absolute;left:48px;top:8px;width:20px;height:58px;border-radius:8px 8px 0 0;border:4px solid #8f9c90;border-bottom:none;background:rgba(255,255,255,.7)}
.lab-illustration .chat-bubble{position:absolute;right:14px;top:10px;width:62px;height:46px;border-radius:22px;background:#b7d0d8;border:3px solid #7e98a3}
.lab-illustration .chat-bubble::after{content:"";position:absolute;left:11px;bottom:-10px;border-width:12px 10px 0 0;border-style:solid;border-color:#7e98a3 transparent transparent transparent}
.home-preserved-below{background:linear-gradient(180deg,#fbf3e6,#fffaf3)}
@media(max-width:1180px){.home-approved-shell{grid-template-columns:1fr}.home-approved-visual{min-height:420px}.home-approved-card-grid{grid-template-columns:1fr}.home-approved-card{grid-template-columns:130px 1fr}}
@media(max-width:640px){.home-approved-copy{padding:42px 28px}.home-approved-title{font-size:clamp(3.2rem,15vw,4.6rem)}.home-approved-card{grid-template-columns:1fr;text-align:center}.home-card-illustration{margin:0 auto}}


/* ===== v21 homepage asset integration + modern social animation ===== */

/* Slightly larger logo for better readability */
.brand-mark {
  width: 72px !important;
  height: 72px !important;
}
.brand-wordmark {
  width: clamp(210px, 20vw, 290px) !important;
  margin-left: -2px !important;
}
.header-inner {
  min-height: 96px;
}

/* Social icons: real platform icons, coffee-color visual, modern motion */
.social-link {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(255, 252, 246, .88) !important;
  border: 1px solid rgba(132, 93, 66, .16) !important;
  box-shadow: 0 10px 22px rgba(90, 63, 39, .08) !important;
  overflow: visible !important;
  transform-origin: 50% 58%;
  will-change: transform, filter, box-shadow;
}
.social-link::before,
.social-link::after,
.social-link-bg {
  display: none !important;
  content: none !important;
}
.social-link .social-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.social-icon-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  filter: sepia(42%) saturate(72%) hue-rotate(340deg) brightness(.72) contrast(1.08);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), filter .28s ease;
}
.social-link:hover {
  transform: translateY(-3px) rotate(-6deg) scale(1.08) !important;
  box-shadow: 0 18px 30px rgba(90, 63, 39, .16) !important;
  background: rgba(255, 248, 238, .98) !important;
}
.social-link:active {
  transform: translateY(-1px) rotate(3deg) scale(.96) !important;
}
.social-link:hover .social-icon-img {
  transform: rotate(6deg) scale(1.05);
  filter: sepia(48%) saturate(82%) hue-rotate(340deg) brightness(.63) contrast(1.14);
}

/* Homepage hero: keep exact 3-line title feeling and add soft fade transition */
.home-approved-hero {
  position: relative;
}
.home-approved-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(251,242,230,0), rgba(247,236,222,.92) 68%, #f7ecde 100%);
  z-index: 2;
}
.home-approved-shell {
  position: relative;
  z-index: 1;
}
.home-approved-title {
  font-size: clamp(4.25rem, 5.45vw, 7.05rem) !important;
  line-height: .96 !important;
  letter-spacing: -0.042em !important;
}
.home-approved-title span {
  display: block;
  white-space: nowrap;
}
.home-approved-copy {
  padding-top: clamp(58px, 5.7vw, 98px) !important;
  padding-bottom: clamp(58px, 5.7vw, 98px) !important;
}

/* CTA button using the provided hand.png paw asset */
.home-approved-button {
  border: 1px solid rgba(76, 106, 142, .28);
  background:
    linear-gradient(180deg, rgba(102, 135, 173, .96), rgba(69, 102, 143, .98)) !important;
}
.paw-dot {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}
.journey-paw-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(62,39,25,.22));
}

/* Replace CSS-drawn card illustrations with actual Mika-style image assets */
.home-card-image-wrap {
  width: 145px;
  height: 128px;
  position: relative;
  transform: rotate(-3deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .28s ease;
}
.home-approved-card:hover .home-card-image-wrap img {
  transform: translateY(-3px) rotate(2deg) scale(1.035);
}

/* Make feature cards a little more refined with real images */
.home-approved-card {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.98), rgba(255,249,240,.92) 56%, rgba(246,235,218,.86) 100%) !important;
}
.home-approved-card::after {
  content: "";
  position: absolute;
}
.home-card-copy h2 {
  letter-spacing: -0.018em;
}
.home-card-copy p {
  max-width: 22rem;
}

/* Keep homepage lower preserved section, but visually separated from the hero cards */
.home-preserved-below {
  border-top: 1px solid rgba(218,197,169,.6);
}

/* Mobile adjustments */
@media (max-width: 860px) {
  .brand-mark {
    width: 62px !important;
    height: 62px !important;
  }
  .brand-wordmark {
    width: 220px !important;
  }
  .home-approved-title span {
    white-space: normal;
  }
}


/* ===== v22 social icons unified coffee tone ===== */
.social-link {
  background: rgba(246, 238, 229, 0.96) !important;
  border: 1px solid rgba(132, 93, 66, 0.18) !important;
  box-shadow: 0 10px 22px rgba(90, 63, 39, 0.08) !important;
}
.social-link .social-label {
  color: #7a5539 !important;
}
.social-icon-img {
  filter: sepia(38%) saturate(78%) hue-rotate(340deg) brightness(0.66) contrast(1.08) !important;
}
.social-link:hover,
.social-link:focus-visible {
  background: rgba(244, 235, 225, 1) !important;
  border-color: rgba(132, 93, 66, 0.28) !important;
  box-shadow: 0 16px 28px rgba(90, 63, 39, 0.14) !important;
}
.social-link:active {
  background: rgba(238, 228, 217, 1) !important;
  border-color: rgba(132, 93, 66, 0.3) !important;
}
.social-link:hover .social-icon-img,
.social-link:focus-visible .social-icon-img,
.social-link:active .social-icon-img {
  filter: sepia(38%) saturate(78%) hue-rotate(340deg) brightness(0.62) contrast(1.1) !important;
}


/* ===== v23 homepage and legal refinements ===== */
.social-link,
.social-link.youtube,
.social-link.instagram,
.social-link.facebook,
.social-link:hover,
.social-link:hover.youtube,
.social-link:hover.instagram,
.social-link:hover.facebook,
.social-link:focus-visible,
.social-link:active {
  background: linear-gradient(180deg, #f9f1e8, #f5eadf) !important;
  border-color: rgba(128, 95, 71, 0.18) !important;
  color: #7a5539 !important;
}
.social-link {
  box-shadow: 0 10px 18px rgba(92, 66, 44, 0.08) !important;
}
.social-link:hover,
.social-link:focus-visible {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 16px 24px rgba(92, 66, 44, 0.14) !important;
}
.social-link:active {
  transform: translateY(0) scale(0.99) !important;
}
.social-link .social-label,
.social-link .social-icon-img {
  color: #7a5539 !important;
}
.social-icon-img {
  filter: sepia(20%) saturate(85%) hue-rotate(344deg) brightness(0.9) contrast(1.05) !important;
}

.home-approved-hero {
  background: linear-gradient(180deg, #f7ebdb 0%, #f3e2cc 100%) !important;
  overflow: visible !important;
}
.home-approved-shell {
  width: min(100%, 1840px) !important;
  min-height: calc(100svh - 74px) !important;
  grid-template-columns: minmax(560px, 43%) minmax(0, 57%) !important;
  background: linear-gradient(90deg, #f4e3cf 0%, #f3e1cb 34%, #f1dfc8 100%) !important;
}
.home-approved-copy {
  padding: clamp(70px, 7vw, 116px) clamp(40px, 5.4vw, 98px) clamp(62px, 6vw, 92px) !important;
  position: relative;
  z-index: 1;
}
.home-approved-title {
  padding-right: 0.28em !important;
  margin: 0 0 28px !important;
  font-size: clamp(4.9rem, 6vw, 8rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.05em !important;
  overflow: visible !important;
}
.home-approved-title span:last-child {
  white-space: nowrap;
}
.home-approved-lede {
  max-width: 660px !important;
  font-size: clamp(1.08rem, 1.28vw, 1.32rem) !important;
}
.home-approved-button {
  margin-top: 34px !important;
}
.home-approved-visual {
  overflow: hidden !important;
}
.home-approved-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.home-approved-feature-section {
  padding: 58px 0 64px !important;
}
.home-approved-card-grid {
  gap: clamp(24px, 3vw, 42px) !important;
}
.home-approved-card {
  text-decoration: none !important;
  min-height: 230px !important;
}
.home-card-copy p {
  margin-bottom: 0 !important;
}
.home-card-link {
  display: none !important;
}
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.legal-hero-body {
  align-items: center !important;
}
.legal-mika-image {
  width: 104px;
  flex: 0 0 104px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.legal-mika-image img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  display: block;
}

@media (max-width: 1280px) {
  .home-approved-shell {
    min-height: calc(100svh - 82px) !important;
    grid-template-columns: minmax(480px, 45%) minmax(0, 55%) !important;
  }
  .home-approved-title {
    font-size: clamp(4.2rem, 5.7vw, 6.8rem) !important;
  }
}
@media (max-width: 980px) {
  .home-approved-shell {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
  }
  .home-approved-copy {
    padding-bottom: 30px !important;
  }
  .home-approved-title span:last-child {
    white-space: normal;
  }
  .home-approved-feature-section {
    padding-top: 34px !important;
  }
}


/* ===== v24 hero centering refinement ===== */
.home-approved-hero {
  padding: 0 0 42px !important;
  background: #f3e6d5 !important;
}
.home-approved-shell {
  position: relative !important;
  display: block !important;
  width: min(100%, 1920px) !important;
  min-height: calc(100svh - 78px) !important;
  overflow: hidden !important;
  background: #f3e6d5 !important;
}
.home-approved-copy {
  position: relative !important;
  z-index: 2 !important;
  width: min(44%, 760px) !important;
  max-width: 760px !important;
  padding: clamp(76px, 7vw, 120px) clamp(42px, 5.4vw, 96px) clamp(64px, 6vw, 94px) !important;
}
.home-approved-title {
  max-width: 700px !important;
  padding-right: 0.24em !important;
}
.home-approved-lede {
  max-width: 620px !important;
}
.home-approved-visual {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
  pointer-events: none;
}
.home-approved-visual img {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: min(72%, 1460px) !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
@media (max-width: 1360px) {
  .home-approved-copy {
    width: min(46%, 700px) !important;
  }
  .home-approved-visual img {
    width: min(74%, 1320px) !important;
  }
}
@media (max-width: 1100px) {
  .home-approved-shell {
    min-height: auto !important;
  }
  .home-approved-copy {
    width: min(50%, 640px) !important;
    padding-top: 58px !important;
  }
  .home-approved-visual img {
    width: 78% !important;
  }
}
@media (max-width: 980px) {
  .home-approved-shell {
    display: grid !important;
    min-height: auto !important;
  }
  .home-approved-visual {
    position: relative !important;
    inset: auto !important;
    height: min(62vw, 540px) !important;
    order: 2 !important;
    pointer-events: auto;
  }
  .home-approved-visual img {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
  }
  .home-approved-copy {
    width: 100% !important;
    max-width: none !important;
  }
}


/* ===== v25 legal header + social hover color refinements ===== */
.legal-mika,
.legal-mika-image {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.legal-mika-image {
  width: 104px !important;
  flex: 0 0 104px !important;
  padding: 0 !important;
}
.legal-mika-image img {
  width: 92px !important;
  height: 92px !important;
}

.site-nav a::after {
  bottom: 4px !important;
}

.social-link,
.social-link.youtube,
.social-link.instagram,
.social-link.facebook {
  background: linear-gradient(180deg, #f9f1e8, #f5eadf) !important;
  border: 1px solid rgba(128, 95, 71, 0.18) !important;
  box-shadow: 0 10px 18px rgba(92, 66, 44, 0.08) !important;
}
.social-link .social-icon-img {
  transition: filter 0.24s ease, transform 0.24s ease !important;
}
.social-link:hover,
.social-link:focus-visible {
  transform: translateY(-2px) scale(1.04) !important;
}
.social-link:hover .social-icon-img,
.social-link:focus-visible .social-icon-img {
  transform: scale(1.03);
}

/* default = coffee */
.social-link .social-icon-img {
  filter: sepia(20%) saturate(85%) hue-rotate(344deg) brightness(0.9) contrast(1.05) !important;
}

/* hover = morandi palette */
.social-link.youtube:hover,
.social-link.youtube:focus-visible {
  background: linear-gradient(180deg, #ecd8d5, #e2c8c4) !important;
  border-color: rgba(176, 126, 120, 0.42) !important;
}
.social-link.youtube:hover .social-icon-img,
.social-link.youtube:focus-visible .social-icon-img {
  filter: sepia(28%) saturate(300%) hue-rotate(324deg) brightness(0.86) contrast(0.95) !important;
}

.social-link.instagram:hover,
.social-link.instagram:focus-visible {
  background: linear-gradient(180deg, #efdee6, #e6cedb) !important;
  border-color: rgba(170, 129, 146, 0.42) !important;
}
.social-link.instagram:hover .social-icon-img,
.social-link.instagram:focus-visible .social-icon-img {
  filter: sepia(24%) saturate(215%) hue-rotate(286deg) brightness(0.93) contrast(0.95) !important;
}

.social-link.facebook:hover,
.social-link.facebook:focus-visible {
  background: linear-gradient(180deg, #dfe7f1, #d1dcea) !important;
  border-color: rgba(118, 142, 173, 0.42) !important;
}
.social-link.facebook:hover .social-icon-img,
.social-link.facebook:focus-visible .social-icon-img {
  filter: sepia(20%) saturate(170%) hue-rotate(170deg) brightness(0.96) contrast(0.95) !important;
}


/* ===== v26 home hero + legal stability fixes ===== */
/* social icons: keep coffee tone, hover only slightly darker */
.social-link,
.social-link.youtube,
.social-link.instagram,
.social-link.facebook {
  background: #f8efe5 !important;
  border: 1px solid rgba(128, 95, 71, 0.18) !important;
  box-shadow: 0 10px 18px rgba(92, 66, 44, 0.08) !important;
}
.social-link .social-icon-img {
  filter: sepia(18%) saturate(88%) hue-rotate(344deg) brightness(0.90) contrast(1.03) !important;
}
.social-link:hover,
.social-link:focus-visible,
.social-link.youtube:hover,
.social-link.youtube:focus-visible,
.social-link.instagram:hover,
.social-link.instagram:focus-visible,
.social-link.facebook:hover,
.social-link.facebook:focus-visible {
  background: #efe0d1 !important;
  border-color: rgba(108, 78, 58, 0.32) !important;
  box-shadow: 0 12px 22px rgba(92, 66, 44, 0.12) !important;
  transform: translateY(-2px) scale(1.03) !important;
}
.social-link:hover .social-icon-img,
.social-link:focus-visible .social-icon-img,
.social-link.youtube:hover .social-icon-img,
.social-link.youtube:focus-visible .social-icon-img,
.social-link.instagram:hover .social-icon-img,
.social-link.instagram:focus-visible .social-icon-img,
.social-link.facebook:hover .social-icon-img,
.social-link.facebook:focus-visible .social-icon-img {
  filter: sepia(24%) saturate(95%) hue-rotate(344deg) brightness(0.74) contrast(1.06) !important;
}

/* home hero: no gradient split, keep image centered and not cropped */
.home-approved-hero {
  padding: 0 0 42px !important;
  background: #f2e7d8 !important;
}
.home-approved-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%) !important;
  align-items: stretch !important;
  width: min(100%, 1920px) !important;
  min-height: calc(100svh - 78px) !important;
  overflow: hidden !important;
  background: #f2e7d8 !important;
}
.home-approved-copy {
  position: relative !important;
  z-index: 2 !important;
  width: auto !important;
  max-width: none !important;
  padding: clamp(82px, 7vw, 122px) clamp(52px, 6vw, 98px) clamp(70px, 6vw, 96px) !important;
  background: transparent !important;
}
.home-approved-title {
  max-width: 760px !important;
  padding-right: 0.22em !important;
}
.home-approved-lede {
  max-width: 680px !important;
}
.home-approved-visual {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #f2e7d8 !important;
  pointer-events: none !important;
}
.home-approved-visual img {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

/* legal hero icon: only remove the white frame, keep layout intact */
.legal-hero-body {
  align-items: center !important;
}
.legal-mika,
.legal-mika-image {
  width: 110px !important;
  min-width: 110px !important;
  height: 110px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  align-self: center !important;
}
.legal-mika-image img {
  width: 98px !important;
  height: 98px !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 1200px) {
  .home-approved-shell {
    grid-template-columns: minmax(0, 48%) minmax(0, 52%) !important;
  }
  .home-approved-copy {
    padding-left: clamp(34px, 4vw, 58px) !important;
    padding-right: clamp(26px, 3vw, 42px) !important;
  }
}
@media (max-width: 980px) {
  .home-approved-shell {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .home-approved-copy {
    padding-bottom: 26px !important;
  }
  .home-approved-visual {
    min-height: min(66vw, 620px) !important;
  }
}


/* ===== v27 region guide redesign ===== */
.city-guide-shell {
  gap: 26px;
}
.city-guide-composition {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.9fr);
  gap: 22px;
  align-items: start;
}
.city-guide-visual-panel {
  background: #f9f3ea;
  border: 1px solid rgba(168, 134, 103, 0.20);
  border-radius: 34px;
  padding: 24px;
  box-shadow: 0 18px 42px rgba(96, 67, 43, 0.08);
}
.city-guide-visual-frame {
  background: #fffdf9;
  border-radius: 28px;
  padding: 18px;
  border: 1px solid rgba(168, 134, 103, 0.16);
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.city-guide-visual-frame img {
  width: 100%;
  max-height: 680px;
  object-fit: contain;
  display: block;
}
.city-guide-right-col {
  gap: 22px;
}
.city-guide-info-panel,
.city-guide-jumps-panel {
  border-radius: 30px;
  padding: 28px;
}
.city-guide-info-panel {
  min-height: 100%;
}
.city-guide-desc {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--brown-deep);
  margin-bottom: 20px;
}
.city-guide-note-list {
  display: grid;
  gap: 14px;
}
.city-guide-note {
  border-radius: 22px;
  border: 1px solid rgba(168, 134, 103, 0.22);
  background: rgba(255, 255, 255, 0.72);
  padding: 18px 20px;
  color: var(--brown-soft);
  line-height: 1.55;
}
.city-guide-actions {
  margin-top: 20px;
}
.bilingual-mini-city-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.bilingual-mini-city-grid .mini-city-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-height: 58px;
  padding: 11px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(141,100,68,.14);
  color: var(--brown-deep);
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(92, 66, 44, 0.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.bilingual-mini-city-grid .mini-city-pill:hover,
.bilingual-mini-city-grid .mini-city-pill:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(128, 95, 71, 0.28);
  box-shadow: 0 12px 22px rgba(92, 66, 44, 0.08);
}
.bilingual-mini-city-grid .mini-city-pill.is-active,
.bilingual-mini-city-grid .mini-city-pill[aria-current="page"] {
  background: #f4ecdf;
  border-color: rgba(128, 95, 71, 0.34);
  box-shadow: inset 0 0 0 1px rgba(128, 95, 71, 0.08);
}
.mini-city-pill-zh {
  font-size: 1.06rem;
  line-height: 1.1;
}
.mini-city-pill-en {
  font-size: .75rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--brown-soft);
}
@media (max-width: 1040px) {
  .city-guide-composition {
    grid-template-columns: 1fr;
  }
  .city-guide-visual-frame {
    min-height: 380px;
  }
}
@media (max-width: 720px) {
  .city-guide-visual-panel,
  .city-guide-info-panel,
  .city-guide-jumps-panel {
    padding: 18px;
    border-radius: 24px;
  }
  .city-guide-visual-frame {
    padding: 12px;
    border-radius: 20px;
    min-height: 280px;
  }
  .bilingual-mini-city-grid .mini-city-pill {
    min-height: 52px;
    padding: 10px 14px;
  }
}


/* ===== v28 hero full-bleed + legal teacher correction ===== */

/* Homepage hero: use a solid wall color on the left and make the right artwork full-bleed again. */
.home-approved-hero {
  padding: 0 !important;
  background: #fbebd6 !important;
}
.home-approved-shell {
  display: grid !important;
  grid-template-columns: minmax(520px, 42.5%) minmax(0, 57.5%) !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100svh - 78px) !important;
  overflow: hidden !important;
  background: #fbebd6 !important;
}
.home-approved-copy {
  position: relative !important;
  z-index: 2 !important;
  width: auto !important;
  max-width: none !important;
  padding: clamp(78px, 7vw, 120px) clamp(42px, 5.2vw, 96px) clamp(70px, 6vw, 96px) !important;
  background: #fbebd6 !important;
}
.home-approved-title {
  max-width: 760px !important;
  padding-right: 0.28em !important;
}
.home-approved-visual {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: inherit !important;
  overflow: hidden !important;
  background: #fbebd6 !important;
  pointer-events: none !important;
}
.home-approved-visual img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Remove every remaining fake gradient / fade overlay from the hero. */
.home-approved-hero::before,
.home-approved-hero::after,
.home-approved-shell::before,
.home-approved-shell::after,
.home-approved-visual::before,
.home-approved-visual::after {
  display: none !important;
  content: none !important;
}

/* Legal page teacher: keep the page layout, remove the white frame, use the real teacher.png. */
.legal-mika,
.legal-mika-image {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.legal-mika-image {
  width: 112px !important;
  min-width: 112px !important;
  height: 112px !important;
  flex: 0 0 112px !important;
  padding: 0 !important;
  align-self: center !important;
}
.legal-mika-image img {
  width: 104px !important;
  height: 104px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Keep social icon hover as subtle deeper coffee only. */
.social-link,
.social-link.youtube,
.social-link.instagram,
.social-link.facebook {
  background: #f8efe5 !important;
}
.social-link:hover,
.social-link:focus-visible,
.social-link.youtube:hover,
.social-link.youtube:focus-visible,
.social-link.instagram:hover,
.social-link.instagram:focus-visible,
.social-link.facebook:hover,
.social-link.facebook:focus-visible {
  background: #efe0d1 !important;
  border-color: rgba(108, 78, 58, 0.32) !important;
}
.social-link:hover .social-icon-img,
.social-link:focus-visible .social-icon-img {
  filter: sepia(24%) saturate(95%) hue-rotate(344deg) brightness(0.74) contrast(1.06) !important;
}

@media (max-width: 1100px) {
  .home-approved-shell {
    grid-template-columns: minmax(420px, 45%) minmax(0, 55%) !important;
  }
}
@media (max-width: 980px) {
  .home-approved-shell {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .home-approved-copy {
    background: #fbebd6 !important;
  }
  .home-approved-visual {
    position: relative !important;
    min-height: min(66vw, 620px) !important;
  }
  .home-approved-visual img {
    position: absolute !important;
  }
}



/* Journal: one button only. Delete old preview overlay by class and pseudo rule. */
.preview-lock::after,
.member-after-preview {
  content: none !important;
  display: none !important;
}
.journal-grid-v3 .article {
  overflow: hidden !important;
}
.journal-actions {
  position: relative !important;
  z-index: 2 !important;
}
.journal-card-action {
  min-width: 170px !important;
  justify-content: center !important;
  text-align: center !important;
}
.journal-card-action.member-lock {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  opacity: 1 !important;
}
.journal-lock-icon {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

/* City Guide: rebuild toward the provided reference layout. */
.city-guide-reference-page {
  background:
    radial-gradient(circle at 8% 0%, rgba(255,255,255,.78), transparent 34%),
    linear-gradient(180deg,#fbf6ec 0%,#f6efe4 100%) !important;
  padding-top: 32px !important;
}
.city-guide-reference-shell {
  width: min(100% - 64px, 1720px);
  margin: 0 auto;
  display: grid;
  gap: 30px;
}
.guide-reference-top {
  display: grid;
  grid-template-columns: minmax(360px, 1.03fr) minmax(420px, .97fr) minmax(320px, .72fr);
  gap: 30px;
  align-items: start;
}
.guide-reference-art-card {
  background: rgba(255,250,238,.95);
  border: 1.5px solid rgba(147,109,76,.16);
  border-radius: 34px;
  padding: 18px;
  box-shadow: 0 18px 38px rgba(93,63,35,.10);
}
.guide-reference-art-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  object-fit: contain;
}
.guide-reference-story {
  display: grid;
  gap: 24px;
}
.guide-reference-title-card,
.guide-reference-copy-card,
.guide-reference-tip-card,
.guide-tool-card {
  background: rgba(255,252,246,.94);
  border: 1.5px solid rgba(147,109,76,.15);
  border-radius: 28px;
  box-shadow: 0 14px 26px rgba(93,63,35,.07);
}
.guide-reference-title-card {
  padding: 24px 30px 22px;
}
.guide-reference-title-card h1 {
  margin: 0;
  color: #2b170d;
  font-family: "Noto Serif TC", "Microsoft JhengHei", "PingFang TC", serif;
  font-size: clamp(2.45rem, 3.85vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  font-weight: 900;
}
.guide-reference-title-card p {
  margin: 12px 0 0;
  color: #2f1b10;
  font-family: "Courier New", "Times New Roman", serif;
  font-size: clamp(1.08rem, 1.45vw, 1.45rem);
  line-height: 1.1;
  letter-spacing: .015em;
}
.guide-reference-copy-card {
  padding: 24px 30px;
}
.guide-reference-copy-card p {
  margin: 0;
  color: #2d1a10;
  line-height: 1.7;
}
.guide-copy-zh p {
  font-family: "Noto Serif TC", "Microsoft JhengHei", serif;
  font-size: clamp(1.18rem, 1.5vw, 1.48rem);
  font-weight: 850;
  letter-spacing: .01em;
}
.guide-copy-en p {
  font-size: clamp(1.02rem, 1.18vw, 1.18rem);
  font-weight: 650;
}
.guide-reference-tip-card {
  display: grid;
  grid-template-columns: 74px minmax(0,1fr);
  gap: 18px;
  align-items: center;
  padding: 18px 24px;
  background: #f6eacb;
  border-color: rgba(210,179,112,.34);
}
.guide-tip-avatar {
  width: 68px;
  height: 68px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  padding: 5px;
}
.guide-reference-tip-card p {
  margin: 0;
  color: #3e2415;
  font-family: "Courier New", "Times New Roman", serif;
  font-size: clamp(.96rem, 1.05vw, 1.12rem);
  line-height: 1.65;
  font-weight: 700;
}
.guide-reference-side {
  display: grid;
  gap: 22px;
}
.guide-tool-card {
  padding: 24px;
}
.guide-tool-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.guide-tool-heading img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.guide-tool-heading h2 {
  margin: 0;
  color: #4a2a18;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 2.15vw, 2.35rem);
  line-height: 1.05;
  font-weight: 900;
}
.guide-stroke-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  padding: 16px;
  border: 2px solid rgba(147,109,76,.15);
  border-radius: 24px;
  background: #fffaf1;
}
.stroke-char-card {
  min-height: 132px;
  border-radius: 18px;
  background: #fffdf8;
  border: 1px solid rgba(147,109,76,.14);
  display: grid;
  place-items: center;
  align-content: center;
}
.stroke-char-glyph {
  color: #1f120b;
  font-family: "Noto Serif TC", "Microsoft JhengHei", serif;
  font-size: clamp(3.6rem, 4.2vw, 5rem);
  line-height: .95;
  font-weight: 500;
}
.stroke-char-label {
  margin-top: 8px;
  color: #3d2818;
  font-size: 1rem;
  font-weight: 800;
}
.guide-take-card {
  display: grid;
  grid-template-columns: 86px minmax(0,1fr);
  gap: 18px;
  align-items: center;
  min-height: 190px;
  padding: 20px;
  border-radius: 24px;
  border: 1.5px solid rgba(147,109,76,.14);
  background: #fff9ed;
}
.guide-take-book {
  width: 82px;
  height: 82px;
  object-fit: contain;
}
.guide-take-title {
  color: #3b2113;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.75rem;
  line-height: 1.04;
  font-weight: 900;
  margin-bottom: 12px;
}
.guide-unlock-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 9px 18px;
  border: 1.5px solid rgba(147,109,76,.20);
  background: #fff;
  color: #3d2818;
  font-weight: 900;
  text-decoration: none;
}
.guide-unlock-button img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.guide-audio-control {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr);
  align-items: center;
  gap: 16px;
}
.guide-audio-play {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 0;
  background: #d7b56a;
  color: #55361e;
  font-size: 1.35rem;
  cursor: pointer;
}
.guide-audio-track {
  height: 17px;
  border-radius: 999px;
  background: #efe5d4;
  overflow: hidden;
}
.guide-audio-track-fill {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: inherit;
  background: linear-gradient(90deg,#c69e4a,#e2c36c);
}
.guide-audio-track-fill.is-animating {
  animation: guideArticleTrack 2.4s ease-in-out 1;
}
@keyframes guideArticleTrack {
  0% { width: 18%; }
  55% { width: 78%; }
  100% { width: 32%; }
}
.guide-reference-bottom {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 28px;
  align-items: start;
}
.guide-about-panel,
.guide-jumps-panel {
  border-radius: 30px !important;
  padding: 28px !important;
}
.city-guide-note-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.city-guide-note {
  border-radius: 18px;
  border: 1px solid rgba(147,109,76,.12);
  background: rgba(255,255,255,.72);
  padding: 16px 18px;
  color: #6c4c37;
  line-height: 1.55;
}
@media (max-width: 1260px) {
  .guide-reference-top {
    grid-template-columns: 1fr;
  }
  .guide-reference-bottom {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .city-guide-reference-shell {
    width: min(100% - 28px, 1720px);
  }
  .guide-reference-title-card,
  .guide-reference-copy-card,
  .guide-reference-tip-card,
  .guide-tool-card {
    border-radius: 22px;
    padding: 18px;
  }
  .guide-stroke-board {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== v34 final homepage/header/dropdown consolidation ===== */
/* Header final: move the visible navigation cluster left without touching mobile structure. */
.site-header .header-inner {
  position: relative !important;
  transform: translateX(-54px) !important;
  width: min(100% - 32px, 1320px) !important;
  min-height: 86px !important;
  gap: 16px !important;
}
.site-header .brand {
  flex: 0 0 auto !important;
  gap: 8px !important;
}
.site-header .nav-row {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
}
.site-header .site-nav {
  flex: 0 1 auto !important;
  display: flex !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-left: 6px !important;
}
.site-header .header-actions {
  margin-left: auto !important;
  flex: 0 0 auto !important;
}
@media (max-width: 980px) {
  .site-header .header-inner {
    transform: none !important;
    width: min(100% - 20px, var(--max)) !important;
  }
}

/* Home hero final: one effective layout block for the approved hero. */
.home-approved-hero {
  background: #fbebd6 !important;
  border-top: 1px solid rgba(221,201,177,.72) !important;
  border-bottom: 1px solid rgba(221,201,177,.72) !important;
  overflow: hidden !important;
}
.home-approved-shell {
  width: 100% !important;
  max-width: 1920px !important;
  margin: 0 auto !important;
  min-height: clamp(610px, 38vw, 760px) !important;
  display: grid !important;
  grid-template-columns: minmax(560px, 43%) minmax(0, 57%) !important;
  gap: 0 !important;
  align-items: stretch !important;
  background: #fbebd6 !important;
  overflow: hidden !important;
}
.home-approved-copy {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: #fbebd6 !important;
  padding: clamp(76px,6vw,118px) 0 clamp(68px,5.5vw,100px) clamp(150px,10.2vw,230px) !important;
}
.home-approved-title {
  max-width: 660px !important;
  margin: 0 0 24px !important;
}
.home-approved-lede {
  max-width: 585px !important;
}
.home-approved-visual {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-height: inherit !important;
  overflow: visible !important;
  background: #fbebd6 !important;
  margin-left: clamp(-230px, -9vw, -120px) !important;
  width: calc(100% + clamp(120px, 9vw, 230px)) !important;
}
.home-approved-visual img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #fbebd6 !important;
}
.home-approved-hero::before,
.home-approved-hero::after,
.home-approved-shell::before,
.home-approved-shell::after,
.home-approved-visual::before,
.home-approved-visual::after {
  display: none !important;
  content: none !important;
}
@media (max-width: 1280px) {
  .home-approved-shell {
    grid-template-columns: minmax(455px, 43%) minmax(0, 57%) !important;
  }
  .home-approved-copy {
    padding-left: clamp(72px, 7vw, 120px) !important;
  }
  .home-approved-visual {
    margin-left: clamp(-120px, -7vw, -62px) !important;
    width: calc(100% + clamp(62px,7vw,120px)) !important;
  }
}
@media (max-width: 980px) {
  .home-approved-shell {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .home-approved-copy {
    padding: 48px 28px 30px !important;
  }
  .home-approved-visual {
    margin-left: 0 !important;
    width: 100% !important;
    min-height: min(70vw, 620px) !important;
  }
}

/* Learning Center final: click-open menu only; hover animates button but never opens menu. */
.resource-grid,
#lessonGrid,
.lesson-card-v4.card,
.lesson-card-v4.resource-card {
  overflow: visible !important;
}
.lesson-card-v4 {
  position: relative !important;
  z-index: 1 !important;
}
.lesson-card-v4.is-menu-open,
.lesson-card-v4:has(.modern-dropdown.is-open) {
  z-index: 90 !important;
}
.lesson-card-v4 .lesson-media,
.lesson-card-v4 .card-media {
  overflow: hidden !important;
}
.modern-dropdown {
  position: relative !important;
  width: 100% !important;
  margin-top: 13px !important;
}
.study-materials-trigger,
.btn-dropdown-trigger.study-materials-trigger {
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg,#628bb9,#416d9d) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 18px rgba(52,88,130,.17) !important;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif !important;
  font-size: .92rem !important;
  font-weight: 900 !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
.study-materials-trigger:hover,
.modern-dropdown:hover .study-materials-trigger,
.modern-dropdown:focus-within .study-materials-trigger {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) !important;
  box-shadow: 0 14px 22px rgba(52,88,130,.20) !important;
}
.study-materials-trigger::after {
  content: "▾" !important;
  font-size: .78rem !important;
  line-height: 1 !important;
}
.modern-dropdown.is-open .study-materials-trigger::after {
  content: "▴" !important;
}
.dropdown-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 50% !important;
  right: auto !important;
  width: min(520px, calc(100vw - 44px)) !important;
  min-width: min(520px, calc(100vw - 44px)) !important;
  max-width: min(520px, calc(100vw - 44px)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 8px) scale(.985) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}
.modern-dropdown:not(.is-open):hover .dropdown-menu,
.modern-dropdown:not(.is-open):focus-within .dropdown-menu {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 8px) scale(.985) !important;
}
.modern-dropdown.is-open .dropdown-menu,
.modern-dropdown.is-open:hover .dropdown-menu,
.modern-dropdown.is-open:focus-within .dropdown-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) scale(1) !important;
}
.material-menu-panel {
  position: relative !important;
  border-radius: 18px !important;
  background: rgba(255,252,246,.985) !important;
  border: 1px solid rgba(137,99,65,.18) !important;
  box-shadow: 0 18px 34px rgba(61,42,24,.16) !important;
  overflow: visible !important;
}
.material-menu-mika {
  position: absolute !important;
  top: -26px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 58px !important;
  height: 50px !important;
  object-fit: contain !important;
  z-index: 2 !important;
  filter: drop-shadow(0 8px 10px rgba(82,54,28,.16)) !important;
}
.material-menu-title {
  padding: 24px 18px 12px !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(137,99,65,.14) !important;
  background: linear-gradient(180deg,#fffaf0,#f7eddd) !important;
  border-radius: 18px 18px 0 0 !important;
}
.material-menu-title h3 {
  margin: 0 !important;
  color: #402313 !important;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
}
.material-menu-list {
  display: grid !important;
  gap: 0 !important;
  padding: 0 14px 14px !important;
}
.material-menu-row {
  display: grid !important;
  grid-template-columns: 58px minmax(0,1fr) 112px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 78px !important;
  padding: 10px 0 !important;
  color: #432716 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}
.material-menu-row + .material-menu-row {
  border-top: 1px solid rgba(137,99,65,.16) !important;
}
.material-thumb {
  width: 50px !important;
  height: 50px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: #fff8eb !important;
  border: 1px solid rgba(137,99,65,.20) !important;
}
.material-thumb img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
}
.material-copy strong {
  display: block !important;
  margin: 0 0 3px !important;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif !important;
  font-size: .92rem !important;
  line-height: 1.08 !important;
  color: #2f1a0e !important;
}
.material-copy span {
  display: block !important;
  color: #5f3f2b !important;
  font-size: .74rem !important;
  line-height: 1.3 !important;
}
.material-action {
  justify-self: stretch !important;
  min-height: 46px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
  padding: 8px 10px !important;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif !important;
  font-size: .82rem !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.material-action img {
  width: 17px !important;
  height: 17px !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}
.material-action-free {
  background: linear-gradient(180deg,#6f9ed2,#4d7db6) !important;
  color: #fff !important;
}
.material-action-locked {
  background: linear-gradient(180deg,#f1e1b7,#dbc388) !important;
  color: #5f4318 !important;
}
.material-action-premium {
  flex-direction: column !important;
  background: linear-gradient(180deg,#e6c75f,#c8a742) !important;
  color: #5a3f0a !important;
}
.material-price {
  display: inline-flex !important;
  min-width: 46px !important;
  justify-content: center !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.54) !important;
  font-size: .76rem !important;
  color: #5a3f0a !important;
}
@media (max-width: 760px) {
  .dropdown-menu {
    left: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    transform: translate(0,8px) scale(.985) !important;
  }
  .modern-dropdown.is-open .dropdown-menu,
  .modern-dropdown.is-open:hover .dropdown-menu,
  .modern-dropdown.is-open:focus-within .dropdown-menu {
    transform: translate(0,0) scale(1) !important;
  }
  .material-menu-row {
    grid-template-columns: 50px minmax(0,1fr) !important;
  }
  .material-action {
    grid-column: 1 / -1 !important;
  }
}



/* ===== v35 navigation/account/word-garden expansion ===== */

/* Home v35 micro-adjust: larger image, closer visual balance */
.home-approved-shell {
  grid-template-columns: minmax(500px, 38%) minmax(0, 62%) !important;
}
.home-approved-copy {
  padding-left: clamp(92px, 7vw, 138px) !important;
  padding-right: clamp(14px, 1.2vw, 24px) !important;
}
.home-approved-visual {
  margin-left: clamp(-70px, -3.8vw, -38px) !important;
  overflow: visible !important;
}
.home-approved-visual img {
  transform: scale(1.055) !important;
  transform-origin: center center !important;
  object-position: 39% center !important;
}

/* Header v35: Learning Center dropdown + account button */
.main-site-nav {
  gap: 16px !important;
}
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-parent {
  cursor: default;
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 218px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,253,248,.98);
  border: 1px solid rgba(141,100,68,.16);
  box-shadow: 0 18px 34px rgba(73,48,27,.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 500;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 12px !important;
  border-radius: 12px;
  white-space: nowrap;
  color: #684733 !important;
  font-weight: 800;
  background: transparent !important;
  box-shadow: none !important;
}
.nav-dropdown-menu a:hover {
  background: #fbf0df !important;
  transform: none !important;
}

/* Keep journal buttons centered after v34 changes */
.journal-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.journal-card-action {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Learning Center material button color aligned with Journal brown buttons */
.study-materials-trigger,
.btn-dropdown-trigger.study-materials-trigger {
  background: linear-gradient(180deg,#a77d55,#8b6744) !important;
  color: #fff !important;
  border: 1px solid rgba(108,76,49,.24) !important;
  box-shadow: 0 13px 22px rgba(96,67,43,.16) !important;
}
.study-materials-trigger:hover,
.modern-dropdown:hover .study-materials-trigger,
.modern-dropdown:focus-within .study-materials-trigger {
  background: linear-gradient(180deg,#b28a62,#8d6744) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}
.modern-dropdown.is-open .study-materials-trigger {
  background: linear-gradient(180deg,#a77d55,#8b6744) !important;
  color: #fff !important;
  transform: translateY(0) !important;
}

/* Shared new pages */
.text-link { color:#8b6744; font-weight:900; text-decoration: underline; text-underline-offset: 3px; }
.back-link { display:inline-flex; align-items:center; gap:8px; color:#a27652; font-weight:800; }

.word-garden-page .panel,
.game-page .panel,
.auth-page .panel,
.account-page .panel,
.subscribe-page .panel,
.vault-page .panel {
  border: 1px solid rgba(214,190,158,.72);
  background: rgba(255,253,248,.94);
  border-radius: 28px;
  box-shadow: 0 12px 30px rgba(94,65,39,.08);
}

.word-hero {
  display:grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr) minmax(260px,.58fr);
  gap:24px;
  align-items:center;
  overflow:hidden;
  padding:34px;
}
.word-hero-art {
  min-height: 230px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background: linear-gradient(90deg, rgba(255,252,246,.1), rgba(242,226,200,.78));
  border-radius: 24px;
}
.word-hero-art img { max-height: 280px; object-fit:contain; }
.word-tip-card {
  border:1px solid rgba(214,190,158,.76);
  border-radius:24px;
  padding:22px;
  background:#fffaf0;
}
.word-theme-bar {
  display:grid;
  grid-template-columns: repeat(8, minmax(0,1fr));
  gap:18px;
}
.theme-chip {
  border:1px solid rgba(214,190,158,.76);
  background:rgba(255,253,248,.94);
  border-radius:18px;
  min-height:58px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:850;
  color:#6d4c36;
  box-shadow:0 8px 20px rgba(94,65,39,.06);
}
.theme-chip.is-active { border-color:#e3ba73; background:#fff4df; }
.word-panel { padding:26px; }
.word-section-heading { display:flex; align-items:baseline; gap:22px; margin-bottom:18px; }
.word-section-heading h2 { margin:0; font-size:1.8rem; }
.word-card-grid {
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:18px;
}
.word-card {
  position:relative;
  background:#fffdf8;
  border:1px solid rgba(214,190,158,.78);
  border-radius:24px;
  padding:18px 14px 16px;
  text-align:center;
  box-shadow:0 10px 20px rgba(94,65,39,.07);
  min-height:245px;
}
.word-card img {
  height:92px;
  object-fit:contain;
  margin:0 auto 10px;
}
.word-card h3 { font-size:1.45rem; margin:0; }
.word-pinyin { margin:2px 0 0; color:#6e4d37; }
.word-english { margin:2px 0 0; color:#3b2418; font-weight:800; }
.word-note { margin:6px auto 10px; font-size:.82rem; color:#8a6b56; min-height:34px; line-height:1.3; }
.word-fav-btn {
  position:absolute;
  right:12px;
  top:12px;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid rgba(214,190,158,.76);
  background:#fff;
  color:#d69a79;
  cursor:pointer;
}
.word-fav-btn.is-saved { color:#c56f7a; background:#fff0f2; }
.word-audio-btn {
  border:0;
  background:#f7e6d0;
  border-radius:999px;
  width:38px;
  height:38px;
  cursor:pointer;
}
.word-games { padding:26px; }
.word-game-grid { display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
.word-game-card {
  display:grid;
  grid-template-columns: 150px minmax(0,1fr);
  gap:22px;
  align-items:center;
  padding:20px;
  border-radius:24px;
  border:1px solid rgba(214,190,158,.76);
  background:linear-gradient(180deg,#fffdf8,#fbf3e6);
}
.word-game-card img { height:120px; object-fit:contain; }
.game-number {
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#72a05f;
  color:#fff;
  font-weight:900;
}
.game-number.gold { background:#e8ad27; }

.game-hero,
.listen-hero {
  display:grid;
  grid-template-columns: 180px minmax(0,1fr) minmax(320px,.75fr);
  gap:24px;
  align-items:center;
  padding:28px;
}
.game-hero > img { height:140px; object-fit:contain; }
.game-kpis {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(214,190,158,.76);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
}
.game-kpis div { padding:20px; text-align:center; border-left:1px solid rgba(214,190,158,.48); }
.game-kpis div:first-child { border-left:0; }
.game-kpis strong { display:block; font-size:1.6rem; margin-top:8px; }

.match-layout {
  display:grid;
  grid-template-columns:minmax(320px,1fr) 260px minmax(320px,1fr) 320px;
  gap:22px;
  align-items:start;
}
.match-column { padding:22px; }
.match-row {
  display:grid;
  grid-template-columns:42px 42px 1fr 1fr 1fr;
  gap:12px;
  align-items:center;
  min-height:62px;
  border:1px solid rgba(214,190,158,.68);
  border-radius:16px;
  padding:10px;
  margin:10px 0;
  background:#fffdf8;
}
.circle-num,
.sound-mini {
  border:0;
  border-radius:50%;
  width:34px;
  height:34px;
}
.circle-num { background:#6ca05e; color:#fff; font-weight:900; }
.sound-mini { background:#fff1dc; }
.match-target {
  display:grid;
  grid-template-columns:36px 68px 1fr;
  gap:12px;
  align-items:center;
  min-height:74px;
  border:1px solid rgba(214,190,158,.68);
  border-radius:16px;
  padding:8px 14px;
  margin:10px 0;
  background:#fffdf8;
}
.match-target span {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#74a165;
  color:#fff;
  font-weight:900;
}
.match-target img { height:58px; object-fit:contain; }
.match-lines { padding-top:88px; display:grid; gap:43px; }
.match-lines span {
  height:2px;
  background:#83ad75;
  position:relative;
}
.match-lines span::before,
.match-lines span::after {
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  border-radius:50%;
  border:3px solid #83ad75;
  background:#fffdf8;
}
.match-lines span::before { left:-6px; }
.match-lines span::after { right:-6px; }
.match-lines .dashed { background:transparent; border-top:2px dashed #dfbd94; }
.listen-hero { grid-template-columns: minmax(0,1fr) minmax(420px,.9fr); }
.audio-box {
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:18px;
  border:1px solid rgba(214,190,158,.76);
  border-radius:24px;
  padding:16px 20px;
  background:#fffdf8;
}
.audio-box img { height:110px; object-fit:contain; }
.big-play {
  width:112px;
  height:112px;
  border-radius:50%;
  border:8px double #f2dfc1;
  background:#fff;
  color:#6b371b;
  font-size:2.2rem;
}
.listen-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:24px;
}
.listen-choices {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.listen-choice {
  position:relative;
  border:1px solid rgba(214,190,158,.76);
  background:#fffdf8;
  border-radius:24px;
  padding:20px;
  text-align:center;
  min-height:360px;
}
.listen-choice.is-correct { border:3px solid #76a65f; }
.listen-choice img { height:140px; object-fit:contain; margin: 0 auto 16px; }
.choice-num {
  position:absolute;
  top:18px;
  left:18px;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#f0dfc8;
  color:#8d6848;
  font-weight:900;
}
.word-bank p {
  display:grid;
  grid-template-columns:52px 70px 1fr;
  gap:8px;
  border-bottom:1px solid rgba(214,190,158,.42);
  margin:0;
  padding:8px 0;
}
.game-bottom-bar {
  display:flex;
  justify-content:center;
  gap:28px;
  padding:18px;
}

.auth-shell {
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(320px,.65fr);
  gap:28px;
  align-items:stretch;
}
.auth-card,
.auth-side { padding:34px; }
.auth-form { display:grid; gap:16px; margin:22px 0; }
.auth-form label { display:grid; gap:8px; font-weight:800; }
.auth-form input {
  min-height:52px;
  border-radius:16px;
  border:1px solid rgba(214,190,158,.9);
  background:#fffdf8;
  padding:0 16px;
}
.auth-side img { max-height:160px; object-fit:contain; margin:auto; }

.account-hero {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:32px;
  background:#10232a;
  color:#f8fbff;
}
.account-hero .page-subtitle { color:#a8b7bd; }
.hammy-club-btn { white-space:nowrap; }
.account-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.account-stat {
  padding:24px;
  background:#132b34 !important;
  color:#fff;
}
.account-stat span { font-size:2rem; }
.account-stat strong { display:block; font-size:2rem; margin:10px 0; }
.account-stat p { color:#9fb0b6; margin:0; }
.account-grid-large {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:22px;
}
.favorite-word-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  min-height:100px;
}
.saved-word-pill {
  border:1px solid rgba(214,190,158,.76);
  border-radius:18px;
  padding:14px;
  background:#fffaf0;
}
.badge-row {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.achievement-badge {
  text-align:center;
  background:#fffaf0;
  border-radius:18px;
  padding:18px 10px;
  font-size:2rem;
}
.achievement-badge span { display:block; margin-top:8px; font-size:.86rem; font-weight:800; }
.muted-badge { filter:grayscale(1); opacity:.55; }

.subscribe-hero {
  text-align:center;
  padding:34px;
}
.plan-toggle {
  display:flex;
  gap:18px;
  justify-content:center;
}
.plan-toggle button {
  width:320px;
  min-height:64px;
  border:0;
  border-radius:999px;
  background:#f7edf5;
  color:#8a35a9;
  font-size:1.4rem;
  font-weight:900;
}
.plan-toggle .is-active {
  background:linear-gradient(90deg,#8733b2,#af35bd);
  color:#fff;
}
.pricing-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
.price-card {
  position:relative;
  padding:34px;
  border:1px solid rgba(214,190,158,.76);
  border-radius:26px;
  background:#fff;
  box-shadow:0 14px 30px rgba(94,65,39,.08);
}
.price-card.is-featured { border:4px solid #8b37b3; }
.best-badge {
  position:absolute;
  right:22px;
  top:-20px;
  background:#8b37b3;
  color:#fff;
  padding:10px 18px;
  border-radius:999px;
  font-weight:900;
}
.price { font-size:2.2rem; color:#8933ac; font-weight:900; }
.price span { font-size:1rem; color:#8b7b8f; }
.subscribe-benefits { padding:30px; }
.benefit-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.benefit-grid div {
  border:1px solid rgba(214,190,158,.56);
  border-radius:18px;
  padding:18px;
  background:#fffaf0;
}

.vault-hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) 240px;
  gap:24px;
  padding:34px;
  align-items:center;
}
.vault-hero img { max-height:190px; object-fit:contain; }
.vault-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.vault-card {
  padding:24px;
  border-radius:26px;
  border:1px solid rgba(214,190,158,.76);
  background:#fffdf8;
  box-shadow:0 12px 28px rgba(94,65,39,.08);
}
.vault-card img { height:110px; object-fit:contain; margin:auto; }

@media (max-width: 1100px) {
  .word-hero,
  .match-layout,
  .listen-layout,
  .auth-shell,
  .account-grid-large,
  .pricing-grid {
    grid-template-columns:1fr;
  }
  .word-card-grid { grid-template-columns:repeat(3,1fr); }
  .word-theme-bar { grid-template-columns:repeat(4,1fr); }
  .listen-choices { grid-template-columns:repeat(2,1fr); }
  .benefit-grid,
  .account-grid,
  .badge-row,
  .vault-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px) {
  .word-card-grid,
  .word-game-grid,
  .listen-choices,
  .benefit-grid,
  .account-grid,
  .badge-row,
  .vault-grid { grid-template-columns:1fr; }
  .word-theme-bar { grid-template-columns:1fr 1fr; }
  .home-approved-visual { margin-left:0 !important; }
  .home-approved-visual img { transform:none !important; }
}


/* v35 final mobile nav safety */
@media (max-width: 980px) {
  .nav-row.open .main-site-nav {
    display: flex;
  }
  .main-site-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100%;
  }
  .nav-dropdown {
    display: block;
  }
  .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    border: 1px solid rgba(141,100,68,.12);
    margin: 4px 0 8px 16px;
    background: rgba(255,250,240,.78);
  }
}

/* ===== v36 focused fixes ===== */
/* Keep Learning Center dropdown open while pointer moves into the menu. */
.modern-dropdown {
  padding-bottom: 16px !important;
}
.modern-dropdown .dropdown-menu {
  top: calc(100% - 4px) !important;
}
.modern-dropdown.is-open .dropdown-menu,
.modern-dropdown.is-open:hover .dropdown-menu,
.modern-dropdown.is-open:focus-within .dropdown-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}
.modern-dropdown:not(.is-open):hover .dropdown-menu,
.modern-dropdown:not(.is-open):focus-within .dropdown-menu {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px) scale(.985) !important;
}
.modern-dropdown.is-open .study-materials-trigger {
  background: linear-gradient(180deg,#a77d55,#8b6744) !important;
  color: #fff !important;
  transform: translateY(0) !important;
  box-shadow: 0 13px 22px rgba(96,67,43,.16) !important;
}

/* Hide prototype switcher on member/shop/teacher resource pages. */
body[data-page="account"] .state-switcher,
body[data-page="subscribe"] .state-switcher,
body[data-page="vault"] .state-switcher,
body[data-page="login"] .state-switcher,
body[data-page="word"] .state-switcher,
body[data-page="word-garden"] .state-switcher {
  display: none !important;
}

/* Account page refinement based on requested my-account direction. */
.account-page-v36 {
  background: radial-gradient(circle at top left, rgba(247,235,214,.7), rgba(255,253,248,.96) 44%, rgba(247,238,224,.72) 100%);
}
.account-hero-v36 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr);
  gap: 28px;
  align-items: stretch;
  padding: clamp(28px, 4vw, 54px) !important;
  background: rgba(255,253,248,.96) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(214,190,158,.84) !important;
  box-shadow: 0 18px 44px rgba(98,67,39,.10) !important;
}
.account-hero-v36 .page-title {
  color: #4b2b18 !important;
  text-shadow: none !important;
  margin-bottom: 10px;
}
.account-hero-v36 .page-subtitle {
  color: #8a6b55 !important;
  font-size: 1.15rem;
}
.account-profile-block {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.account-mini-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.account-mini-meta span {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff7eb;
  border: 1px solid rgba(214,190,158,.78);
  color: #6b4c37;
  font-weight: 800;
}
.account-club-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  border-radius: 26px;
  background: linear-gradient(180deg,#fff8eb,#f3dfc0);
  border: 1px solid rgba(181,139,86,.38);
  box-shadow: 0 18px 36px rgba(113,80,48,.13);
}
.account-club-card h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2.4vw, 2.2rem);
  line-height: 1.06;
  color: #4b2b18;
}
.account-club-card p {
  margin: 0;
  color: #72533c;
  line-height: 1.55;
}
.hammy-club-btn,
.account-club-card .btn {
  align-self: flex-start;
  background: linear-gradient(180deg,#a77d55,#8b6744) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 16px 30px rgba(96,67,43,.20) !important;
}
.account-grid .account-stat {
  background: #fffdf8 !important;
  color: var(--ink) !important;
  border: 1px solid rgba(214,190,158,.82) !important;
}
.account-grid .account-stat p {
  color: #8a6b55 !important;
}
.account-favorites-panel,
.account-achievements-panel {
  padding: 30px !important;
}

/* Hummy-Club subscription page: no homepage hero, stronger subscription layout. */
.subscribe-page {
  background: linear-gradient(180deg,#fffdf8 0%,#fbf2e6 100%);
}
.subscribe-hero {
  max-width: 920px;
  margin: 0 auto;
  border-radius: 34px;
  border: 1px solid rgba(214,190,158,.82);
  background: radial-gradient(circle at top, #fff7e8, #fffdf8 62%);
  box-shadow: 0 16px 38px rgba(98,67,39,.09);
}
.subscribe-hero .page-title {
  color: #4b2b18;
}
.price-card.is-featured {
  border-color: #a77d55 !important;
}
.best-badge {
  background: #a77d55 !important;
}
.plan-toggle .is-active {
  background: linear-gradient(90deg,#a77d55,#8b6744) !important;
}
.price {
  color: #8b6744 !important;
}

/* Teacher's Vault: keep only vault content and make cards more shop-like. */
.vault-hero {
  background: linear-gradient(135deg,#fffdf8,#fff2dc) !important;
}
.vault-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 330px;
}
.vault-card .btn-outline {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 980px) {
  .account-hero-v36 { grid-template-columns: 1fr; }
  .account-club-card .btn { align-self: stretch; justify-content: center; }
}



/* ===== v37 interaction fixes only ===== */

/* Learning Center dropdown: hover animates the button only. Opening is controlled only by .is-open from JS. */
.modern-dropdown .dropdown-menu {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 10px) scale(.985) !important;
}
.modern-dropdown:not(.is-open):hover .dropdown-menu,
.modern-dropdown:not(.is-open):focus-within .dropdown-menu {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 10px) scale(.985) !important;
}
.modern-dropdown.is-open .dropdown-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) scale(1) !important;
}
.modern-dropdown:hover .study-materials-trigger,
.modern-dropdown:focus-within .study-materials-trigger {
  transform: translateY(-2px) !important;
}
.modern-dropdown.is-open .study-materials-trigger {
  transform: translateY(0) !important;
}

/* Hummy-Club plan selector */
.current-plan-label {
  text-align: center;
  margin: -10px 0 0;
  color: #8b6a51;
  font-weight: 900;
}
.plan-toggle button {
  cursor: pointer;
}
.price-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, opacity .22s ease;
}
.price-card:not(.is-selected-plan) {
  border-width: 1px !important;
  opacity: .82;
}
.price-card.is-selected-plan {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(94,65,39,.13);
}
.price-card:not(.is-selected-plan) .btn,
.price-card:not(.is-selected-plan) .btn-outline {
  background: #fffdf8 !important;
  color: #8b6744 !important;
  border: 1px solid rgba(139,103,68,.26) !important;
}



/* ===== v38 city guide and material menu refinement ===== */

/* City Guide title: smaller, calmer, more elegant Traditional Chinese reading style. */
.guide-title-card h1,
.guide-main-title-zh {
  font-family: "Noto Serif TC", "Source Han Serif TC", "PMingLiU", "MingLiU", serif !important;
  font-size: clamp(2.1rem, 3.15vw, 3.7rem) !important;
  line-height: 1.14 !important;
  letter-spacing: .01em !important;
  font-weight: 800 !important;
}
.guide-title-card .guide-title-en,
.guide-main-title-en {
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif !important;
  font-size: clamp(.94rem, 1.25vw, 1.12rem) !important;
  letter-spacing: .08em !important;
  line-height: 1.35 !important;
}

/* Follow the Strokes: embedded animation cards. */
.guide-stroke-board {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 14px !important;
}


/* Lesson material dropdown: keep current logo but restore the half-circle backing. */
.material-menu-panel {
  position: relative !important;
  overflow: visible !important;
}
.material-menu-title {
  position: relative !important;
  padding-top: 30px !important;
}
.material-menu-panel::before {
  content: "";
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 58px;
  border-radius: 104px 104px 0 0;
  background: #fffdf8;
  border: 1px solid rgba(214,190,158,.76);
  border-bottom: 0;
  z-index: 0;
  box-shadow: 0 -8px 20px rgba(94,65,39,.07);
}
.material-menu-mika {
  z-index: 2 !important;
}

/* FREE / Premium actions: separate colors like the reference design. */
.material-menu-row.is-locked-free .material-action,
.material-action-locked {
  background: linear-gradient(180deg, #e8f3fb, #cfe3f3) !important;
  color: #365c78 !important;
  border: 1px solid rgba(90,142,203,.28) !important;
}
.material-action-free {
  background: linear-gradient(180deg, #72a8e4, #517eb9) !important;
  color: #fff !important;
}
.material-action-premium {
  background: linear-gradient(180deg, #ead06a, #c6a43d) !important;
  color: #5c4312 !important;
  border: 1px solid rgba(166,126,42,.28) !important;
}
.material-price {
  background: rgba(255,255,255,.65) !important;
  color: #5c4312 !important;
}




/* ===== v42 hero, native material menu, and city-guide text refinement ===== */

/* Home Hero: stronger visual integration and clear bottom fade. */
.home-approved-hero {
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 0 !important;
}
.home-approved-hero::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 170px !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(251,235,214,0) 0%, rgba(247,236,222,.82) 58%, #f7ecde 100%) !important;
  z-index: 5 !important;
}
.home-approved-shell {
  grid-template-columns: minmax(500px, 35.5%) minmax(0, 64.5%) !important;
}
.home-approved-copy {
  padding-left: clamp(122px, 9vw, 176px) !important;
  padding-right: 0 !important;
  z-index: 6 !important;
}
.home-approved-title,
.home-approved-lede {
  max-width: 590px !important;
}
.home-approved-visual {
  margin-left: clamp(-175px, -8vw, -105px) !important;
  z-index: 2 !important;
}
.home-approved-visual img {
  transform: scale(1.16) translateX(-2.5%) !important;
  transform-origin: center center !important;
  object-position: 32% center !important;
}

/* Native details-based material menu: stable, click-safe, no hover/floating hitbox issue. */
.modern-dropdown,
.dropdown-menu {
  display: none !important;
}
.material-details {
  position: relative;
  margin-top: 14px;
  z-index: 1;
}
.lesson-card-v4:has(.material-details[open]) {
  z-index: 80 !important;
}
.material-summary-trigger {
  list-style: none;
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 16px;
  padding: 0 18px;
  cursor: pointer;
  background: linear-gradient(180deg,#a77d55,#8b6744) !important;
  color: #fff !important;
  border: 1px solid rgba(108,76,49,.24) !important;
  box-shadow: 0 13px 22px rgba(96,67,43,.16) !important;
  font-weight: 900;
  transition: transform .22s ease, box-shadow .22s ease;
}
.material-summary-trigger::-webkit-details-marker {
  display: none;
}
.material-summary-trigger::after {
  content: "▾";
  font-size: .75rem;
}
.material-details[open] .material-summary-trigger::after {
  content: "▴";
}
.material-summary-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(96,67,43,.20) !important;
}
.material-details-panel {
  position: relative;
  margin-top: 18px;
  pointer-events: auto;
  z-index: 120;
}
.material-details-cap {
  position: absolute;
  top: -27px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 52px;
  border-radius: 104px 104px 0 0;
  background: #fffdf8;
  border: 1px solid rgba(214,190,158,.82);
  border-bottom: 0;
  display: grid;
  place-items: center;
  z-index: 3;
}
.material-details-cap img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  transform: translateY(-5px);
}
.material-details-card {
  background: #fffdf8;
  border: 1px solid rgba(214,190,158,.82);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 42px rgba(62,42,25,.16);
}
.material-details-title {
  padding: 34px 22px 15px;
  text-align: center;
  background: linear-gradient(180deg,#fff8eb,#f8ecd9);
  border-bottom: 1px solid rgba(214,190,158,.52);
}
.material-details-title h3 {
  margin: 0;
  color: #3d2415;
  font-family: "Baloo 2", "Segoe UI", sans-serif;
  font-size: 1.35rem;
  line-height: 1;
}
.material-details-title p {
  margin: 6px 0 0;
  color: #7c6048;
  font-size: .82rem;
}
.material-details-list {
  padding: 14px 18px 18px;
  display: grid;
  gap: 12px;
}
.material-details-row {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) 126px;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: #3c2415;
  background: #fffaf0;
  border: 1px solid rgba(214,190,158,.58);
  border-radius: 18px;
  padding: 12px;
}
.material-details-row:hover {
  background: #fff4e4;
}
.material-details-thumb {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(214,190,158,.62);
}
.material-details-thumb img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.material-details-copy strong {
  display: block;
  font-size: .95rem;
  line-height: 1.15;
  color: #2d1a10;
}
.material-details-copy span {
  display: block;
  margin-top: 4px;
  font-size: .76rem;
  line-height: 1.35;
  color: #705640;
}
.material-details-action {
  display: grid;
  gap: 7px;
}
.material-details-badge {
  min-height: 27px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: .77rem;
  font-weight: 900;
}
.material-details-badge img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}
.material-details-badge.is-free {
  background: #e9f4fb;
  color: #315a76;
  border: 1px solid rgba(90,142,203,.24);
}
.material-details-badge.is-premium {
  background: #fff2c7;
  color: #745515;
  border: 1px solid rgba(185,146,47,.24);
}
.material-details-button {
  min-height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6px 10px;
  font-family: "Baloo 2", "Segoe UI", sans-serif;
  font-weight: 900;
  font-size: .84rem;
  line-height: 1.05;
}
.material-details-button.is-free-button {
  background: linear-gradient(180deg,#70a7df,#4d7db7);
  color: #fff;
}
.material-details-button.is-locked-button {
  background: linear-gradient(180deg,#d7eafa,#b8d5ee);
  color: #315a76;
}
.material-details-button.is-premium-button {
  background: linear-gradient(180deg,#ead06a,#c4a33b);
  color: #5d4210;
}

/* City Guide: reduce oversized text in circled areas. */
.guide-title-card h1,
.guide-main-title-zh {
  font-family: "Noto Serif TC", "Source Han Serif TC", "PMingLiU", "MingLiU", serif !important;
  font-size: clamp(1.9rem, 2.45vw, 3rem) !important;
  line-height: 1.13 !important;
  letter-spacing: .01em !important;
}
.guide-title-card .guide-title-en,
.guide-main-title-en {
  font-size: clamp(.78rem, .98vw, .98rem) !important;
  line-height: 1.32 !important;
  letter-spacing: .06em !important;
}
.guide-tool-heading h2,
.guide-tool-card h2,
.guide-take-title {
  font-size: clamp(1.55rem, 2.05vw, 2.15rem) !important;
  line-height: 1.08 !important;
  letter-spacing: .005em !important;
}
.guide-tool-heading {
  gap: 10px !important;
}
.guide-tool-heading img {
  width: 28px !important;
  height: 28px !important;
}

/* Follow the Strokes preview cards preserved from v41. */
.guide-stroke-board {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 16px !important;
}
.stroke-preview-card {
  position: relative;
  min-height: 240px;
  border: 1px solid rgba(214,190,158,.82);
  border-radius: 24px;
  background: linear-gradient(180deg,#fffdf8,#fff7ec);
  overflow: hidden;
  cursor: pointer;
  color: #2e190d;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 20px 12px 18px;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.stroke-preview-card:hover,
.stroke-preview-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(173,128,83,.48);
  box-shadow: 0 16px 30px rgba(94,65,39,.13);
  outline: none;
}
.stroke-pencil-dot {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f7e5ca;
  color: #7c5538;
  animation: pencilBob 2.2s ease-in-out infinite;
  animation-delay: var(--delay);
}
.stroke-preview-glyph {
  position: relative;
  z-index: 2;
  font-family: "Noto Serif TC", "Source Han Serif TC", "PMingLiU", "MingLiU", serif;
  font-size: clamp(3.4rem, 5.5vw, 5.1rem);
  font-weight: 800;
  line-height: 1;
}
.fake-stroke-line {
  position: absolute;
  left: 24%;
  right: 24%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(139,103,68,0), rgba(139,103,68,.72), rgba(139,103,68,0));
  transform-origin: left center;
  opacity: .45;
  animation: strokeSweep 2.8s ease-in-out infinite;
  animation-delay: var(--delay);
}
.fake-stroke-line.line-a { top: 42%; transform: rotate(-8deg) scaleX(.35); }
.fake-stroke-line.line-b { top: 52%; transform: rotate(8deg) scaleX(.45); animation-delay: calc(var(--delay) + .32s); }
.fake-stroke-line.line-c { top: 62%; transform: rotate(-2deg) scaleX(.55); animation-delay: calc(var(--delay) + .62s); }
.stroke-preview-pinyin {
  position: relative;
  z-index: 2;
  font-weight: 900;
  font-size: 1.05rem;
  color: #4a2b18;
}
.stroke-preview-hint {
  position: relative;
  z-index: 2;
  font-size: .74rem;
  color: #8b6b54;
  line-height: 1.2;
}
.stroke-source-note {
  margin: 10px 4px 0;
  font-size: .75rem;
  line-height: 1.45;
  color: #8a6a51;
  text-align: center;
}
@keyframes strokeSweep {
  0% { opacity: 0; transform: rotate(var(--r, 0deg)) scaleX(.08); }
  28% { opacity: .75; }
  64% { opacity: .38; transform: rotate(var(--r, 0deg)) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--r, 0deg)) scaleX(1); }
}
@keyframes pencilBob {
  0%,100% { transform: translate(0,0) rotate(-8deg); }
  50% { transform: translate(-5px, 4px) rotate(8deg); }
}

@media (max-width: 760px) {
  .material-details-row {
    grid-template-columns: 52px minmax(0,1fr);
  }
  .material-details-action {
    grid-column: 1 / -1;
  }
  .home-approved-visual {
    margin-left: 0 !important;
  }
  .home-approved-visual img {
    transform: none !important;
  }
}


/* ===== v43 homepage line control + city-guide title / region pill refinement ===== */
.home-approved-lede {
  max-width: 720px !important;
}
.home-approved-lede-line {
  display: block;
  white-space: nowrap;
}

.guide-reference-art-card {
  position: relative;
  overflow: hidden;
}
.guide-region-pill {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  min-height: 52px;
  padding: 10px 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(214,190,158,.86);
  box-shadow: 0 10px 20px rgba(93,63,35,.12);
  color: #3c2415;
  font-family: "Arial Rounded MT Bold", "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.45rem, 2vw, 2.1rem);
  font-weight: 900;
  letter-spacing: .07em;
}
.guide-reference-title-card {
  padding: 22px 28px 20px !important;
}
.guide-reference-title-card h1 {
  color: #20140d !important;
  font-family: "Segoe UI", "Microsoft JhengHei", "PingFang TC", sans-serif !important;
  font-size: clamp(2rem, 2.55vw, 2.85rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -.02em !important;
  font-weight: 900 !important;
}
.guide-reference-title-pinyin {
  margin: 10px 0 0 !important;
  color: #7c6958 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(.96rem, 1.02vw, 1.12rem) !important;
  line-height: 1.35 !important;
  letter-spacing: .02em !important;
  font-style: italic;
  font-weight: 700;
}
.guide-reference-title-card p#guideMainHeadingEn {
  margin-top: 6px !important;
  color: #271810 !important;
  font-family: "Arial Narrow", "Trebuchet MS", Arial, sans-serif !important;
  font-size: clamp(1.05rem, 1.15vw, 1.22rem) !important;
  line-height: 1.18 !important;
  letter-spacing: .01em !important;
  font-weight: 800 !important;
}
.guide-copy-zh p {
  font-size: clamp(1.04rem, 1.18vw, 1.16rem) !important;
  line-height: 1.58 !important;
  font-weight: 800 !important;
}
.guide-copy-en p {
  font-size: clamp(.95rem, 1vw, 1.03rem) !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
}
.guide-reference-tip-card p {
  font-size: clamp(.9rem, .94vw, .98rem) !important;
  line-height: 1.55 !important;
}
.guide-tool-card {
  padding: 20px !important;
}
.guide-reference-side {
  gap: 18px !important;
}
.guide-tool-heading {
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.guide-tool-heading img {
  width: 32px !important;
  height: 32px !important;
}
.guide-tool-heading h2 {
  font-size: clamp(1.1rem, 1.34vw, 1.45rem) !important;
  line-height: 1.14 !important;
  letter-spacing: .01em !important;
}
.stroke-char-card {
  min-height: 210px !important;
}
.stroke-char-glyph {
  font-size: clamp(3rem, 3.4vw, 3.9rem) !important;
}
.stroke-char-label {
  font-size: .96rem !important;
}
.guide-take-card {
  grid-template-columns: 72px minmax(0,1fr) !important;
  gap: 14px !important;
  min-height: 140px !important;
  padding: 16px !important;
}
.guide-take-book {
  width: 68px !important;
  height: 68px !important;
}
.guide-take-title {
  font-size: clamp(1.15rem, 1.38vw, 1.42rem) !important;
  line-height: 1.14 !important;
  margin-bottom: 10px !important;
}
.guide-unlock-button {
  padding: 8px 14px !important;
  font-size: .93rem !important;
}
.guide-unlock-button img {
  width: 24px !important;
  height: 24px !important;
}
.guide-audio-play {
  width: 42px !important;
  height: 42px !important;
  font-size: 1rem !important;
}
.guide-audio-track {
  min-height: 12px !important;
}
@media (max-width: 960px) {
  .home-approved-lede-line {
    white-space: normal;
  }
  .guide-region-pill {
    font-size: 1.2rem !important;
    min-height: 42px;
    padding: 8px 18px;
  }
}


/* ===== v44 per-region content layout ===== */
.guide-core-card {
  padding: 24px 30px !important;
}
.guide-core-card > .label {
  margin: 0 0 14px;
}
.guide-core-content {
  display: grid;
  gap: 16px;
}
.guide-core-sentence {
  display: grid;
  gap: 5px;
  padding: 0 0 14px;
  border-bottom: 1px dashed rgba(147,109,76,.18);
}
.guide-core-sentence:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.guide-line-zh {
  margin: 0;
  color: #2d1a10;
  font-family: "Noto Serif TC", "Microsoft JhengHei", "PingFang TC", serif;
  font-size: clamp(1.05rem, 1.18vw, 1.22rem);
  line-height: 1.58;
  font-weight: 850;
}
.guide-line-py {
  margin: 0;
  color: #8a6b51;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.86rem, .94vw, .98rem);
  line-height: 1.42;
  font-style: italic;
  font-weight: 700;
}
.guide-line-en {
  margin: 0;
  color: #4e3828;
  font-size: clamp(.92rem, 1vw, 1.02rem);
  line-height: 1.48;
  font-weight: 650;
}
.guide-mika-note-card {
  align-items: start !important;
}
.guide-note-content {
  display: grid;
  gap: 7px;
}
.guide-note-content .label {
  margin: 0;
}
.guide-note-triplet {
  display: grid;
  gap: 4px;
}
.guide-note-triplet .guide-line-zh,
.guide-note-triplet .guide-line-py,
.guide-note-triplet .guide-line-en {
  font-size: .92rem !important;
  line-height: 1.42 !important;
}
.guide-suggestion-list {
  display: grid;
  gap: 12px;
}
.guide-suggestion-card {
  padding: 14px 16px;
  border-radius: 18px;
  background: #fffaf0;
  border: 1px solid rgba(214,190,158,.7);
  display: grid;
  gap: 3px;
}
.guide-suggestion-card .guide-line-zh {
  font-size: .98rem !important;
  line-height: 1.35 !important;
}
.guide-suggestion-card .guide-line-py {
  font-size: .84rem !important;
  line-height: 1.32 !important;
}
.guide-suggestion-card .guide-line-en {
  font-size: .88rem !important;
  line-height: 1.36 !important;
}


/* ===== v45 learning materials stability + city text/audio refinements ===== */

/* Learning Center: keep details stable, but take the opened panel out of grid flow.
   This prevents left/right lesson cards from expanding together. */
.lesson-grid,
.card-grid,
.lesson-card-v4,
.resource-card {
  overflow: visible !important;
}
.lesson-card-v4 {
  position: relative !important;
  align-self: start !important;
}
.lesson-card-v4:has(.material-details[open]) {
  z-index: 999 !important;
}
.material-details {
  position: relative !important;
}
.material-details-panel {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 18px) !important;
  transform: translateX(-50%) !important;
  width: min(620px, calc(100vw - 42px)) !important;
  margin-top: 0 !important;
  z-index: 100000 !important;
  pointer-events: auto !important;
}
.material-details[open] .material-summary-trigger {
  box-shadow: 0 18px 30px rgba(96,67,43,.22) !important;
}
.material-details-panel::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 22px;
  background: transparent;
}
@media (min-width: 1000px) {
  .lesson-card-v4:nth-child(2n) .material-details-panel {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }
  .lesson-card-v4:nth-child(2n + 1) .material-details-panel {
    left: 0 !important;
    transform: none !important;
  }
}

/* City Guide: smaller one-line title target and calmer pinyin color. */
.guide-reference-title-card h1 {
  font-size: clamp(1.45rem, 2vw, 2.28rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -.015em !important;
  white-space: nowrap !important;
}
.guide-reference-title-pinyin,
.guide-line-py,
.guide-note-triplet .guide-line-py,
.guide-suggestion-card .guide-line-py {
  color: #968779 !important;
  opacity: .84 !important;
}
.guide-reference-title-pinyin {
  font-size: clamp(.82rem, .9vw, .98rem) !important;
  line-height: 1.32 !important;
}
.guide-reference-title-card p#guideMainHeadingEn {
  font-size: clamp(.86rem, .98vw, 1.06rem) !important;
  line-height: 1.18 !important;
}
@media (max-width: 980px) {
  .guide-reference-title-card h1 {
    white-space: normal !important;
  }
}

/* Hear the Article: fast / slow audio choice */
.guide-audio-card .guide-audio-control {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.guide-audio-speed-tabs {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}
.guide-audio-speed-btn {
  flex: 1;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(214,190,158,.78);
  background: #fffdf8;
  color: #7b5b40;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.guide-audio-speed-btn:hover {
  transform: translateY(-1px);
}
.guide-audio-speed-btn.is-active {
  background: linear-gradient(180deg,#a77d55,#8b6744);
  color: #fff;
}
.guide-audio-current-label {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: #8f7f70;
  font-size: .82rem;
  font-weight: 800;
  text-align: center;
}


/* ===== v46 avatar chooser + stable nav dropdown + pinyin font + home fade ===== */

.nav-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-bottom: 18px !important;
  margin-bottom: -18px !important;
}
.nav-parent {
  cursor: pointer !important;
}
.nav-dropdown-menu {
  top: calc(100% + 4px) !important;
}
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 22px;
  background: transparent;
}
.nav-dropdown.is-open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}
@media (max-width: 900px) {
  .nav-dropdown {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .nav-dropdown-menu::before {
    display: none !important;
  }
}

.account-entry-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
.account-entry-btn.has-avatar {
  padding-left: 12px !important;
  padding-right: 16px !important;
}
.account-entry-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  background: linear-gradient(180deg,#fffaf2,#f4e4cd);
  border: 1px solid rgba(201,170,136,.75);
  box-shadow: 0 5px 12px rgba(99,70,46,.12);
}
.account-entry-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transform: scale(1.26);
}
.account-entry-label {
  display: inline-flex;
  align-items: center;
}

.auth-side-avatar-picker {
  display: grid !important;
  gap: 18px !important;
  align-content: start !important;
}
.auth-avatar-picker-head {
  display: grid;
  grid-template-columns: 126px minmax(0,1fr);
  gap: 18px;
  align-items: center;
}
.auth-avatar-preview {
  width: 124px;
  height: 124px;
  margin: 0 auto;
  border-radius: 28px;
  background: linear-gradient(180deg,#fffaf2,#f4e7d8);
  border: 1px solid rgba(214,190,158,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 14px 26px rgba(96,67,43,.08);
  display: grid;
  place-items: center;
  padding: 10px;
}
.auth-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.auth-avatar-picker-copy h2 {
  margin: 6px 0 8px;
  color: #4b2b18;
}
.auth-avatar-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
}
.auth-avatar-option {
  appearance: none;
  border: 1px solid rgba(214,190,158,.82);
  background: linear-gradient(180deg,#fffdf8,#fff7ed);
  border-radius: 18px;
  padding: 8px;
  min-height: 90px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.auth-avatar-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(96,67,43,.10);
  border-color: rgba(178,138,98,.95);
}
.auth-avatar-option.is-selected {
  background: linear-gradient(180deg,#fff4dd,#fdebc9);
  border-color: #b48a62;
  box-shadow: 0 12px 24px rgba(96,67,43,.14);
}
.auth-avatar-option img {
  width: 68px;
  height: 68px;
  object-fit: contain;
}
.auth-side-benefits {
  padding-top: 4px;
  border-top: 1px solid rgba(214,190,158,.45);
}
@media (max-width: 980px) {
  .auth-avatar-picker-head {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .auth-avatar-grid {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}
@media (max-width: 640px) {
  .auth-avatar-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

.guide-reference-title-pinyin,
.guide-line-py,
.guide-note-triplet .guide-line-py,
.guide-suggestion-card .guide-line-py,
#guideMainHeadingPy {
  font-family: "Segoe UI", "Arial Unicode MS", "Noto Sans", "Microsoft JhengHei", sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-variant-ligatures: none !important;
  letter-spacing: .01em !important;
  word-spacing: .02em !important;
  text-rendering: optimizeLegibility;
}
.guide-reference-title-pinyin,
#guideMainHeadingPy {
  color: #97897c !important;
}
/* ===== v53 cleanup pass: single final rules for current requested areas ===== */

/* Home hero: final v59 fade is defined at the end of this file. Keep this area layout-only. */
/* Learning Center / Video Library: keep v51 media and Watch overlay size; reserve only text lines. */
#lessonGrid.resource-grid,
.resource-grid#lessonGrid {
  align-items: stretch !important;
}
.lesson-card-v4.resource-card,
.lesson-card-v4.card {
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.lesson-card-v4 .lesson-media,
.lesson-card-v4 .card-media {
  overflow: hidden !important;
  min-height: revert !important;
  max-height: none !important;
}
.lesson-card-v4 .card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  padding: 16px 18px 18px !important;
}
.lesson-card-v4 .pill-row {
  min-height: 42px !important;
  align-items: flex-start !important;
}
.lesson-card-v4 .card-body > h2,
.lesson-card-v4 .card-body > .h3 {
  min-height: calc(1.25em * 2) !important;
  max-height: calc(1.25em * 2) !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  font-size: 1.16rem !important;
}
.lesson-card-v4 .card-body > p.muted {
  min-height: calc(1.48em * 2) !important;
  max-height: calc(1.48em * 2) !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  margin: 0 0 10px !important;
  line-height: 1.48 !important;
  font-size: .94rem !important;
}
.lesson-card-v4 .material-details {
  margin-top: auto !important;
}
.material-details:not([open]) .material-details-panel {
  display: none !important;
}
.material-details[open] .material-details-panel {
  display: block !important;
}
/* Learning Center navigation dropdown: keep the hover bridge and click-open state stable. */
.nav-dropdown {
  padding-bottom: 22px !important;
  margin-bottom: -22px !important;
}
.nav-dropdown-menu {
  top: calc(100% - 2px) !important;
}
.nav-dropdown-menu::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -24px !important;
  height: 26px !important;
  background: transparent !important;
}
.nav-dropdown.is-open .nav-dropdown-menu,
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

/* City Guide: compact right-side tool cards and stable stroke preview renderer. */
.guide-reference-art-actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.guide-back-map-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: rgba(255,253,248,.96);
  border: 1px solid rgba(214,190,158,.86);
  color: #5d3d27;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(93,63,35,.10);
  transition: transform .2s ease, box-shadow .2s ease;
}
.guide-back-map-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(93,63,35,.14);
}
.guide-reference-title-card h1 {
  font-size: clamp(1.18rem, 1.62vw, 1.68rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
}
.guide-reference-title-card p#guideMainHeadingEn {
  font-size: clamp(.78rem, .88vw, .94rem) !important;
}
.guide-reference-title-pinyin,
#guideMainHeadingPy {
  color: #a79a8e !important;
  font-size: clamp(.76rem, .82vw, .88rem) !important;
}
.guide-reference-side {
  gap: 18px !important;
}
.guide-tool-card {
  padding: clamp(18px, 2.1vw, 24px) !important;
}
.guide-tool-heading {
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.guide-tool-heading img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  flex: 0 0 34px !important;
}
.guide-tool-heading h2,
.guide-strokes-card .guide-tool-heading h2,
.guide-notes-card .guide-tool-heading h2,
.guide-audio-card .guide-tool-heading h2 {
  margin: 0 !important;
  font-size: clamp(1.38rem, 1.92vw, 2rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
}
.guide-notes-card .guide-tool-heading h2 {
  font-size: clamp(1.22rem, 1.52vw, 1.62rem) !important;
  white-space: nowrap !important;
}
#guideStrokeChars {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  min-height: 232px !important;
}
#guideStrokeChars > .stroke-char-card {
  display: none !important;
}
.stroke-preview-card {
  min-height: 218px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.stroke-preview-glyph {
  font-size: clamp(3.1rem, 4.7vw, 4.65rem) !important;
}
.stroke-preview-hint {
  max-width: 11em;
}
@media (max-width: 980px) {
  .guide-reference-title-card h1 {
    white-space: normal !important;
    font-size: clamp(1.35rem, 5vw, 2rem) !important;
  }
  .guide-notes-card .guide-tool-heading h2 {
    white-space: normal !important;
  }
}

/* Legal pages: one shared hero image alignment for root and folder legal pages. */
.legal-hero-body {
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 20px !important;
  min-height: 164px !important;
}
.legal-mika,
.legal-mika-image {
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
}
.legal-mika-image {
  width: 104px !important;
  height: 104px !important;
  min-width: 104px !important;
  flex: 0 0 104px !important;
  display: grid !important;
  place-items: center !important;
}
.legal-mika-image img {
  width: 96px !important;
  height: 96px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Word Garden: product-like study dashboard, topic switching, and real prototype progress states. */
.theme-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  color: #7b5638 !important;
  filter: grayscale(1) sepia(1) saturate(1.7) hue-rotate(340deg) brightness(.72);
}
.theme-chip {
  color: #6b4a32 !important;
}
.word-garden-hero-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .45fr);
  gap: 22px;
  align-items: stretch;
}
.word-tip-card-rich {
  display: grid !important;
  gap: 16px !important;
  align-content: start !important;
}
.word-tip-card-head {
  display: grid;
  gap: 8px;
}
.word-tip-card-head strong {
  font-size: 1.35rem;
}
.word-tip-card-head p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.6;
}
.word-tip-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.word-tip-step {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(223,205,181,.95);
}
.word-tip-step span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  background: var(--gold-soft);
  font-weight: 800;
}
.word-tip-step b,
.word-tip-step small {
  display: block;
}
.word-tip-step small {
  margin-top: 4px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.word-tip-helper-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.word-tip-pill {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(223,205,181,.95);
  font-weight: 700;
  font-size: .94rem;
}
.wg-week-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(227,211,187,.9);
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 26px rgba(95,68,45,.08);
}
.wg-week-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.wg-side-label {
  font-weight: 800;
  color: var(--ink-soft);
}
.wg-ring {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: conic-gradient(#d8b664 0 40%, #efe5d4 40% 100%);
  display: grid;
  place-items: center;
}
.wg-ring span {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fffdfa;
  font-weight: 900;
}
.wg-week-main strong {
  display: block;
  font-size: 1.8rem;
}
.wg-week-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(232,218,195,.9);
}
.wg-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr);
  gap: 24px;
}
.wg-heading-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.wg-link-text {
  font-weight: 800;
  color: #7f5a3a;
  white-space: nowrap;
}
.wg-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.wg-path-card {
  position: relative;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(224,207,184,.95);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 22px rgba(95,68,45,.06);
  display: grid;
  gap: 10px;
}
.wg-path-card.is-active {
  border-color: rgba(194,157,84,.85);
  box-shadow: 0 16px 28px rgba(118,79,42,.12);
}
.wg-path-number {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e3cf9a;
  font-weight: 900;
}
.wg-path-top {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 8px;
}
.wg-path-top img {
  max-height: 92px;
  width: auto;
  object-fit: contain;
}
.wg-path-compact img {
  max-width: 32%;
}
.wg-path-card h3 {
  margin: 0;
  font-size: 1.1rem;
}
.wg-path-card p {
  margin: 0;
  color: var(--ink-soft);
  min-height: 3em;
  line-height: 1.5;
}
.wg-path-progress {
  display: flex;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: .92rem;
}
.wg-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: #eee2cf;
  overflow: hidden;
}
.wg-progress-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #d9bd79, #8bb48a);
  transition: width .24s ease;
}
.wg-path-card.is-active .wg-topic-trigger,
.wg-topic-trigger:hover {
  background: var(--gold-soft) !important;
  border-color: rgba(199,173,101,.95) !important;
}
.word-vocabulary-panel {
  padding: 24px;
}
.wg-today-grid,
#wgTodayGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.wg-today-card {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 4px;
  padding: 18px 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(224,207,184,.95);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,247,240,.96));
  box-shadow: 0 10px 22px rgba(95,68,45,.07);
}
.wg-today-card img {
  max-height: 96px;
  width: auto;
  object-fit: contain;
}
.wg-today-card h3 {
  margin: 0;
  font-size: 1.45rem;
}
.wg-today-card .favorite-btn {
  position: absolute;
  top: 12px;
  right: 12px;
}
.wg-word-status {
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(232,219,195,.72);
  color: #6b4a32;
  font-size: .78rem;
  font-weight: 800;
}
.wg-today-card[data-status="listened"] .wg-word-status { background: rgba(220,231,205,.88); }
.wg-today-card[data-status="practiced"] .wg-word-status { background: rgba(219,229,238,.9); }
.wg-today-card[data-status="mastered"] .wg-word-status { background: rgba(216,182,100,.34); }
.wg-word-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.word-audio-btn,
.wg-status-btn {
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(214,190,158,.86);
  background: rgba(255,253,248,.95);
  color: #6b4a32;
  font-weight: 800;
  cursor: pointer;
  padding: 0 11px;
}
.word-audio-btn:hover,
.wg-status-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(93,63,35,.10);
}
.wg-study-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.wg-study-tool-card {
  display: flex;
  gap: 14px;
  min-height: 128px;
  align-items: flex-start;
}
.wg-tool-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #fff6ea;
  border: 1px solid rgba(225,206,179,.95);
  font-size: 1.45rem;
}
@media(max-width:1200px) {
  #wgTodayGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media(max-width:1100px) {
  .word-garden-hero-v2,
  .wg-dashboard-grid { grid-template-columns: 1fr; }
  .wg-study-tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:900px) {
  .word-tip-steps { grid-template-columns: 1fr !important; }
}
@media(max-width:760px) {
  .wg-path-grid,
  #wgTodayGrid,
  .wg-study-tools-grid { grid-template-columns: 1fr !important; }
}




/* ===== v59 final cleanup rules ===== */
.home-approved-hero {
  position: relative !important;
  overflow: visible !important;
  border-bottom: 0 !important;
  isolation: isolate !important;
}
.home-approved-shell {
  position: relative !important;
  z-index: 1 !important;
}
.home-approved-visual {
  position: relative !important;
  overflow: hidden !important;
}
.home-approved-visual::before,
.home-approved-visual::after {
  display: none !important;
  content: none !important;
}
.home-approved-hero::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -76px !important;
  height: clamp(190px, 16vw, 310px) !important;
  pointer-events: none !important;
  z-index: 8 !important;
  background: linear-gradient(to bottom, rgba(247,236,222,0) 0%, rgba(247,236,222,0) 18%, rgba(247,236,222,.28) 42%, rgba(247,236,222,.72) 72%, #f7ecde 100%) !important;
}
.home-approved-feature-section {
  position: relative !important;
  z-index: 0 !important;
  margin-top: -1px !important;
  background: #f7ecde !important;
}
.material-details-cap {
  top: -27px !important;
  width: 104px !important;
  height: 52px !important;
  overflow: visible !important;
}
.material-details-cap img {
  width: 62px !important;
  height: 62px !important;
  object-fit: contain !important;
  transform: translateY(-5px) !important;
}
.material-details-title {
  padding-top: 32px !important;
}
.map-frame-interactive {
  position: relative !important;
  background: #fffdf8 !important;
}
.taiwan-map-stack {
  position: relative !important;
  width: 100% !important;
}
.taiwan-map-base {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  transition: filter .18s ease, opacity .18s ease !important;
}
.taiwan-map-stack.has-active .taiwan-map-base {
  filter: brightness(.78) saturate(.84) contrast(.96) !important;
  opacity: .68 !important;
}
.taiwan-map-active-region,
.taiwan-map-active-word {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .13s ease, filter .13s ease !important;
}
.taiwan-map-active-region.is-active {
  opacity: 1 !important;
  filter: brightness(1.23) saturate(1.28) contrast(1.05) drop-shadow(0 0 8px rgba(255,223,125,.95)) drop-shadow(0 0 18px rgba(159,110,44,.55)) !important;
  z-index: 3 !important;
}
.taiwan-map-active-word.is-active {
  opacity: 1 !important;
  filter: brightness(1.18) contrast(1.12) drop-shadow(0 0 6px rgba(255,240,174,.9)) drop-shadow(0 4px 10px rgba(62,38,18,.42)) !important;
  z-index: 4 !important;
}
.taiwan-map-hitlayer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  cursor: pointer !important;
  background: transparent !important;
}
.city-btn.city-link {
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease !important;
  will-change: background-color, border-color, box-shadow !important;
}
.city-btn.city-link:hover,
.city-btn.city-link.is-map-active {
  background: linear-gradient(180deg, #fff6df, #f5e0b8) !important;
  border-color: rgba(183,137,61,.86) !important;
  box-shadow: inset 0 0 0 2px rgba(212,167,80,.28), 0 8px 18px rgba(95,68,45,.12) !important;
}
.city-btn.city-link.is-map-active small,
.city-btn.city-link:hover small {
  color: #5b3e27 !important;
}

/* ===== v60 final corrections ===== */
/* Keep the sticky header above lesson popovers while scrolling. */
.site-header {
  z-index: 250000 !important;
}

/* Hero fade: final full-width seam overlay. Previous rules hid pseudo-elements with display:none, so display is explicitly reset. */
.home-approved-hero {
  position: relative !important;
  overflow: visible !important;
  border-bottom: 0 !important;
  isolation: isolate !important;
}
.home-approved-shell {
  position: relative !important;
  z-index: 1 !important;
}
.home-approved-hero::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -104px !important;
  height: 260px !important;
  pointer-events: none !important;
  z-index: 80 !important;
  background: linear-gradient(
    to bottom,
    rgba(247,236,222,0) 0%,
    rgba(247,236,222,.04) 18%,
    rgba(247,236,222,.22) 38%,
    rgba(247,236,222,.58) 62%,
    rgba(247,236,222,.88) 82%,
    #f7ecde 100%
  ) !important;
}
.home-approved-feature-section {
  position: relative !important;
  z-index: 0 !important;
  background: #f7ecde !important;
}

/* Lesson Materials: one final compact cap image size. */
.material-details-cap {
  top: -24px !important;
  width: 98px !important;
  height: 48px !important;
  overflow: visible !important;
}
.material-details-cap img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
  transform: translateY(-4px) !important;
}
.material-details-title {
  padding-top: 28px !important;
}

/* Restore original two-column Interactive Lab map layout. */
.map-layout.map-layout-rich {
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .92fr) !important;
  align-items: start !important;
  gap: clamp(22px, 3vw, 34px) !important;
}
.map-layout.map-layout-rich > .map-frame {
  min-width: 0 !important;
}
.map-layout.map-layout-rich > aside.stack {
  min-width: 0 !important;
}
@media (max-width: 980px) {
  .map-layout.map-layout-rich {
    grid-template-columns: 1fr !important;
  }
}

/* Calmer map highlight: obvious, but no dark wash and no color shift. */
.taiwan-map-stack.has-active .taiwan-map-base {
  filter: brightness(.97) saturate(.98) contrast(.99) !important;
  opacity: .90 !important;
}
.taiwan-map-active-region,
.taiwan-map-active-word {
  transition: opacity .09s ease, filter .09s ease !important;
  will-change: opacity, filter;
}
.taiwan-map-active-region.is-active {
  opacity: .92 !important;
  filter:
    brightness(1.08)
    saturate(1.08)
    contrast(1.02)
    drop-shadow(0 0 5px rgba(255, 224, 132, .58))
    drop-shadow(0 0 12px rgba(170, 119, 55, .28)) !important;
  z-index: 3 !important;
}
.taiwan-map-active-word.is-active {
  opacity: 1 !important;
  filter:
    brightness(1.06)
    contrast(1.05)
    drop-shadow(0 2px 5px rgba(78, 48, 23, .22)) !important;
  z-index: 4 !important;
}
.city-btn.city-link,
.city-btn.city-link:hover,
.city-btn.city-link.is-map-active {
  transform: none !important;
}
.city-btn.city-link.is-map-active {
  background: linear-gradient(180deg, #fff8e8, #f7ead0) !important;
  border-color: rgba(180, 138, 70, .60) !important;
  box-shadow: inset 0 0 0 1px rgba(210, 168, 92, .22), 0 6px 12px rgba(95,68,45,.08) !important;
}


/* ===== v61 targeted refinements ===== */
/* More visible homepage fade without changing hero layout. */
.home-approved-hero::after {
  display: block !important;
  bottom: -128px !important;
  height: 340px !important;
  background: linear-gradient(
    to bottom,
    rgba(247,236,222,0) 0%,
    rgba(247,236,222,.06) 12%,
    rgba(247,236,222,.18) 26%,
    rgba(247,236,222,.42) 46%,
    rgba(247,236,222,.74) 68%,
    rgba(247,236,222,.93) 86%,
    #f7ecde 100%
  ) !important;
}
.home-approved-feature-section {
  margin-top: 0 !important;
}

/* Taiwan map overlays: lock to the same frame size for perfect overlap. */
.taiwan-map-stack {
  overflow: hidden !important;
}
.taiwan-map-active-region,
.taiwan-map-active-word {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: left top !important;
  transition: opacity .045s linear, filter .045s linear !important;
  will-change: opacity, filter !important;
}
.taiwan-map-stack.has-active .taiwan-map-base {
  filter: brightness(.985) saturate(.995) contrast(.995) !important;
  opacity: .94 !important;
}
.taiwan-map-active-region.is-active {
  opacity: .96 !important;
  filter: brightness(1.055) saturate(1.045) contrast(1.01) drop-shadow(0 0 4px rgba(255, 227, 150, .36)) drop-shadow(0 0 9px rgba(151, 112, 57, .18)) !important;
}
.taiwan-map-active-region.is-active.is-outlying {
  filter: brightness(1.05) saturate(1.04) contrast(1.01) drop-shadow(0 0 3px rgba(255, 232, 175, .26)) drop-shadow(0 0 7px rgba(174, 134, 74, .14)) !important;
}
.taiwan-map-active-word.is-active {
  opacity: 1 !important;
  filter: brightness(1.04) contrast(1.03) drop-shadow(0 1px 3px rgba(78, 48, 23, .16)) !important;
}
.city-btn.city-link {
  transition: background-color .08s linear, border-color .08s linear, box-shadow .08s linear !important;
}
.city-btn.city-link:hover,
.city-btn.city-link.is-map-active {
  background: linear-gradient(180deg, #fff8ea, #f7e6c6) !important;
  border-color: rgba(183,137,61,.72) !important;
  box-shadow: inset 0 0 0 1px rgba(212,167,80,.22), 0 4px 10px rgba(95,68,45,.08) !important;
}