:root {
  color-scheme: light;
  --bg: #fff9f4;
  --surface: #ffffff;
  --surface-soft: #fff0e8;
  --text: #27231f;
  --muted: #6d6259;
  --border: #efd8ce;
  --primary: #b42318;
  --primary-dark: #7a1610;
  --primary-soft: #fff0ed;
  --accent: #f59e0b;
  --pink: #f472b6;
  --pink-soft: #fff0f7;
  --blue: #38bdf8;
  --blue-soft: #eaf9ff;
  --yellow-soft: #fff8cf;
  --mint-soft: #eafbf3;
  --success: #18794e;
  --warning: #9a6700;
  --danger: #b42318;
  --focus: #005fcc;
  --shadow: 0 14px 42px rgb(75 45 25 / 0.09);
  --radius-sm: 0.65rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --sidebar: 17rem;
  --topbar: 4.75rem;
  font-family: "Leelawadee UI", "Noto Sans Thai", Tahoma, Arial, sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171411;
  --surface: #211d19;
  --surface-soft: #2b2119;
  --text: #f6efe9;
  --muted: #c9bdb2;
  --border: #443a33;
  --primary: #ff8a7a;
  --primary-dark: #ffc0b7;
  --primary-soft: #3b211e;
  --accent: #f6ad55;
  --pink: #ff8fc9;
  --pink-soft: #3a2130;
  --blue: #66d2ff;
  --blue-soft: #17303b;
  --yellow-soft: #3a321b;
  --mint-soft: #17352a;
  --success: #70d7a6;
  --warning: #ffd166;
  --danger: #ff8a7a;
  --focus: #8cc8ff;
  --shadow: 0 14px 42px rgb(0 0 0 / 0.3);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html[data-text-size="large"] { font-size: 120%; }
html[data-text-size="large"] body { line-height: 1.9; }

html[data-contrast="high"] {
  --bg: #fff;
  --surface: #fff;
  --surface-soft: #fff;
  --text: #000;
  --muted: #262626;
  --border: #000;
  --primary: #8b0000;
  --primary-dark: #550000;
  --primary-soft: #fff4a8;
  --pink-soft: #fff;
  --blue-soft: #e7f7ff;
  --yellow-soft: #fff4a8;
}

html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  animation: none !important;
  transition: none !important;
}

html[data-calm="true"] .park-stage,
html[data-calm="true"] .hero-doodle,
html[data-calm="true"] .confetti,
html[data-calm="true"] .step-sticker,
html[data-calm="true"] .dashboard-ticket,
html[data-calm="true"] .helper-wave,
html[data-calm="true"] .helper-rainbow,
html[data-calm="true"] .member-spark { display: none; }
html[data-calm="true"] body { background-image: none; }
html[data-calm="true"] .hero { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.7;
  background-image: radial-gradient(circle at 8% 18%, rgb(244 114 182 / 0.08) 0 0.35rem, transparent 0.4rem), radial-gradient(circle at 93% 35%, rgb(56 189 248 / 0.09) 0 0.3rem, transparent 0.35rem);
  background-size: 3.2rem 3.2rem, 4rem 4rem;
  animation: park-lights 12s ease-in-out infinite alternate;
}

a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

button, input, select { font: inherit; }

button, a, input, select, [tabindex]:not([tabindex="-1"]) {
  outline-offset: 0.2rem;
}

:focus-visible {
  outline: 0.2rem solid var(--focus);
  outline-offset: 0.2rem;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--surface);
  transform: translateY(-150%);
}

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

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  grid-template-rows: var(--topbar) 1fr auto;
  grid-template-areas: "topbar topbar" "sidebar main" "sidebar footer";
}

.topbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  padding: 0.7rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  flex: 0 0 auto;
  border-radius: 0.95rem;
  background: linear-gradient(145deg, var(--primary), #df6b46);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 8px 18px rgb(180 35 24 / 0.2);
  transform: rotate(-4deg);
  transition: transform 180ms ease;
}
.brand:hover .brand-mark { transform: rotate(3deg) scale(1.06); }

.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.05rem; }
.brand small { color: var(--muted); font-size: 0.77rem; }

.topbar-actions, .language-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chip, .icon-button, .profile-pill, .button {
  min-height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}

.chip { min-width: 3rem; padding: 0.4rem 0.75rem; }
.chip, .icon-button, .button { transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease; }
.chip:hover, .icon-button:hover { transform: translateY(-0.16rem) rotate(-2deg); box-shadow: 0 5px 0 rgb(0 0 0 / 0.08); }
.chip:active, .icon-button:active, .button:active { transform: translateY(0.1rem) scale(0.97); }
.chip[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.icon-button { width: 2.75rem; padding: 0; }

.profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0.8rem 0.25rem 0.25rem;
}
.level-mini { padding: 0.08rem 0.4rem; border-radius: 999px; background: linear-gradient(135deg, var(--yellow-soft), var(--pink-soft)); color: var(--primary-dark); font-size: 0.72rem; font-weight: 900; }

.profile-avatar {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 800;
}

.sidebar {
  grid-area: sidebar;
  position: sticky;
  top: var(--topbar);
  align-self: start;
  height: calc(100vh - var(--topbar));
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1rem;
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
}

.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.8rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
}
.nav-link:hover { background: var(--surface-soft); }
.nav-link:hover .nav-icon { animation: nav-hop 480ms ease; }
.nav-link[aria-current="page"] { background: var(--primary-soft); color: var(--primary-dark); }
.nav-icon { width: 1.5rem; text-align: center; }

.sidebar-note {
  margin-top: auto;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}
.sidebar-note p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.88rem; }

.main-content {
  grid-area: main;
  width: 100%;
  max-width: 88rem;
  min-width: 0;
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 3rem);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 1.25rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--pink) 34%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--pink-soft) 82%, var(--surface));
  box-shadow: 0 5px 0 color-mix(in srgb, var(--pink) 14%, transparent);
  font-size: 0.9rem;
  overflow-x: auto;
}
.breadcrumb-spark { color: var(--pink); }
.breadcrumb ol { display: flex; align-items: center; gap: 0.45rem; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.breadcrumb li + li::before { content: "›"; margin-right: 0.45rem; color: var(--muted); }
.breadcrumb a { color: var(--primary-dark); font-weight: 700; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
.breadcrumb [aria-current="page"] { color: var(--muted); }

.footer {
  grid-area: footer;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem clamp(1.25rem, 4vw, 3rem);
  color: var(--muted);
  border-top: 1px solid var(--border);
}
.footer p { margin: 0; }

.page-header { margin-bottom: 1.7rem; }
.eyebrow { margin: 0 0 0.25rem; color: var(--primary); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; }
h1, h2, h3 { line-height: 1.3; text-wrap: balance; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { margin: 2rem 0 0.75rem; font-size: clamp(1.35rem, 3vw, 2rem); }
h3 { margin: 1.5rem 0 0.5rem; font-size: 1.15rem; }
.lead { max-width: 54rem; margin: 0.75rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.22rem); }

.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 0.8fr);
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--surface) 0%, var(--pink-soft) 52%, var(--blue-soft) 100%);
  box-shadow: var(--shadow);
}
.hero::after { content: ""; position: absolute; right: -6rem; bottom: -8rem; width: 20rem; height: 20rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.hero-content, .hero-panel { position: relative; z-index: 1; }
.hero-doodle { position: absolute; z-index: 1; color: var(--pink); font-size: 2rem; opacity: 0.8; }
.hero-doodle-one { top: 1rem; right: 40%; transform: rotate(-12deg); animation: doodle-float 3.4s ease-in-out infinite; }
.hero-doodle-two { right: 1.4rem; bottom: 0.7rem; color: var(--accent); transform: rotate(9deg); animation: twinkle 1.8s ease-in-out infinite alternate; }
.confetti { position: absolute; z-index: 0; width: 0.7rem; height: 0.25rem; border-radius: 999px; background: var(--blue); animation: confetti-drift 5s ease-in-out infinite; }
.confetti-one { left: 48%; top: 20%; transform: rotate(25deg); }
.confetti-two { left: 6%; bottom: 8%; background: var(--pink); animation-delay: -2.1s; }
.hero-actions, .button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 7rem;
  padding: 0.65rem 1rem;
  font-weight: 750;
}
.button-primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.button-primary:hover { background: var(--primary-dark); color: #fff; }
.button:hover { transform: translateY(-0.18rem); box-shadow: 0 6px 0 rgb(75 45 25 / 0.13); }
.button-primary span { display: inline-block; animation: arrow-nudge 1.1s ease-in-out infinite alternate; }
.button-secondary:hover { background: var(--surface-soft); }
.button-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.button-small { min-height: 2.35rem; min-width: auto; padding: 0.35rem 0.75rem; font-size: 0.9rem; }

.metric-card, .card, .lesson-card, .profile-card, .callout, .quiz-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 22px rgb(75 45 25 / 0.05);
}

.hero-panel { display: grid; align-content: center; gap: 0.75rem; }
.park-stage { position: relative; height: 9rem; overflow: hidden; border: 2px solid color-mix(in srgb, var(--blue) 35%, var(--border)); border-radius: 1.3rem 1.3rem 2.5rem 2.5rem; background: linear-gradient(#dff7ff 0 68%, #dff8df 68%); box-shadow: inset 0 -0.4rem 0 rgb(24 121 78 / 0.08); }
.park-ground { position: absolute; left: -10%; right: -10%; bottom: -1.8rem; height: 4rem; border-radius: 50%; background: #a7e3a8; }
.park-cloud { position: absolute; color: #fff; filter: drop-shadow(0 0.18rem 0 rgb(56 189 248 / 0.15)); font-size: 2.1rem; animation: cloud-sail 8s linear infinite alternate; }
.cloud-one { top: 0.2rem; left: 0.6rem; }
.cloud-two { top: 1.8rem; right: 0.7rem; font-size: 1.4rem; animation-delay: -3s; }
.balloon { position: absolute; color: var(--pink); font-size: 1.4rem; text-shadow: 0 1.1rem 0 currentColor; animation: balloon-float 3.2s ease-in-out infinite; }
.balloon::after { content: ""; position: absolute; left: 50%; top: 1.3rem; height: 1.4rem; border-left: 1px solid var(--muted); }
.balloon-one { left: 1.2rem; bottom: 3rem; }
.balloon-two { right: 1.4rem; bottom: 2.4rem; color: var(--accent); animation-delay: -1.3s; }
.ferris-wheel { position: absolute; z-index: 2; left: 50%; top: 0.65rem; width: 6rem; height: 6rem; margin-left: -3rem; border: 0.3rem dashed #ec4899; border-radius: 50%; animation: wheel-spin 14s linear infinite; }
.ferris-wheel::before, .ferris-wheel::after { content: ""; position: absolute; left: 50%; background: #9b6b4e; transform-origin: top; }
.ferris-wheel::before { top: 50%; width: 0.18rem; height: 4.6rem; transform: rotate(24deg); }
.ferris-wheel::after { top: 50%; width: 0.18rem; height: 4.6rem; transform: rotate(-24deg); }
.wheel-spoke { position: absolute; left: 50%; top: 50%; width: 0.12rem; height: 5.7rem; margin-top: -2.85rem; background: rgb(56 189 248 / 0.65); transform-origin: center; }
.spoke-two { transform: rotate(45deg); }.spoke-three { transform: rotate(90deg); }.spoke-four { transform: rotate(135deg); }
.gondola { position: absolute; width: 1.05rem; height: 0.8rem; border: 0.13rem solid #fff; border-radius: 0.25rem 0.25rem 0.5rem 0.5rem; background: var(--accent); box-shadow: 0 0.13rem 0 rgb(0 0 0 / 0.1); }
.gondola-one { left: 2.15rem; top: -0.65rem; }.gondola-two { right: -0.65rem; top: 2.15rem; background: var(--blue); }.gondola-three { left: 2.15rem; bottom: -0.65rem; background: var(--pink); }.gondola-four { left: -0.65rem; top: 2.15rem; background: #8b5cf6; }
.metric-card { padding: 1rem; border-width: 2px; transform: rotate(-1deg); transition: transform 180ms ease, box-shadow 180ms ease; }
.metric-card:nth-child(2) { transform: rotate(1.5deg); }
.metric-card:hover { transform: translateY(-0.2rem) rotate(0); box-shadow: 0 10px 0 rgb(0 0 0 / 0.05); }
.metric-pink { background: var(--pink-soft); border-color: color-mix(in srgb, var(--pink) 38%, var(--border)); }
.metric-blue { background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 42%, var(--border)); }
.metric-yellow { background: var(--yellow-soft); border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.metric-card strong { display: block; font-size: 1.55rem; }
.metric-card span { color: var(--muted); }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card, .lesson-card, .profile-card { padding: 1.25rem; }
.card > :first-child, .lesson-card > :first-child { margin-top: 0; }
.card > :last-child, .lesson-card > :last-child { margin-bottom: 0; }

.lesson-card { display: flex; flex-direction: column; gap: 0.8rem; }
.lesson-card .button { margin-top: auto; align-self: flex-start; }
.tag { display: inline-flex; align-items: center; width: fit-content; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: 0.82rem; font-weight: 750; }
.meta { display: flex; flex-wrap: wrap; gap: 0.8rem; color: var(--muted); font-size: 0.9rem; }

.progress-track { width: 100%; height: 0.8rem; overflow: hidden; border-radius: 999px; background: var(--border); }
.progress-bar { position: relative; height: 100%; background: linear-gradient(90deg, var(--primary), var(--pink), var(--accent)); background-size: 200% 100%; animation: progress-party 2.4s linear infinite; }
.progress-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgb(255 255 255 / 0.55) 42%, transparent 64%); animation: progress-shine 2s ease-in-out infinite; }
.progress-label { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.35rem; font-size: 0.9rem; }

.lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 2rem; align-items: start; }
.lesson-body { min-width: 0; }
.lesson-toc { position: sticky; top: calc(var(--topbar) + 1rem); padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.lesson-toc ol { margin: 0; padding-left: 1.3rem; }
.lesson-toc a { color: var(--muted); }

.lesson-section { scroll-margin-top: calc(var(--topbar) + 1rem); margin-bottom: 1rem; padding: clamp(1.1rem, 3vw, 1.8rem); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.lesson-section[data-complete="true"] { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); }
.lesson-section ul, .lesson-section ol { padding-left: 1.5rem; }
.lesson-section code { padding: 0.1rem 0.35rem; border-radius: 0.35rem; background: var(--surface-soft); font-family: Consolas, monospace; }

.callout { margin: 1rem 0; padding: 1rem; border-left: 0.35rem solid var(--accent); background: var(--surface-soft); }
.callout-title { margin: 0 0 0.25rem; font-weight: 800; }
.callout p:last-child { margin-bottom: 0; }

.character-tip { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: center; margin: 1rem 0; padding: 1rem; border-radius: var(--radius); background: var(--primary-soft); }
.character-tip img { width: 4.5rem; height: 4.5rem; object-fit: cover; object-position: top; border-radius: 50%; border: 0.2rem solid var(--surface); }
.character-tip p { margin: 0; }

.helper-squad { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.3rem; padding: 0.65rem 0.8rem; width: fit-content; border: 1px dashed color-mix(in srgb, var(--pink) 50%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.helper-squad p { margin: 0 0 0 0.3rem; max-width: 20rem; font-size: 0.9rem; }
.helper-bubble { margin: 0 -0.2rem 0 0; text-align: center; }
.helper-bubble img { display: block; width: 3.5rem; height: 3.5rem; object-fit: cover; object-position: top; border: 0.2rem solid #fff; border-radius: 50%; box-shadow: 0 0 0 0.12rem var(--pink); animation: helper-bob 2.7s ease-in-out infinite; }
.helper-bubble:nth-child(2) img { box-shadow: 0 0 0 0.12rem var(--blue); }
.helper-bubble:nth-child(2) img { animation-delay: -1.15s; }
.helper-bubble figcaption { font-size: 0.7rem; font-weight: 800; }

.section-title { display: flex; align-items: center; gap: 0.5rem; }
.section-title span { color: var(--pink); font-size: 1.45em; }
.playful-card { position: relative; overflow: hidden; border-width: 2px; transition: transform 180ms ease, box-shadow 180ms ease; }
.playful-card:nth-child(1) { background: var(--pink-soft); transform: rotate(-0.7deg); }
.playful-card:nth-child(2) { background: var(--blue-soft); transform: rotate(0.6deg); }
.playful-card:nth-child(3) { background: var(--yellow-soft); transform: rotate(-0.4deg); }
.playful-card:hover { transform: translateY(-0.25rem) rotate(0); box-shadow: 0 12px 0 rgb(180 35 24 / 0.07); }
.step-sticker { position: absolute; right: 0.8rem; top: 0.45rem; color: var(--pink); font-size: 1.8rem; transform: rotate(12deg); }
.playful-card:nth-child(2) .step-sticker { color: var(--blue); }
.playful-card:nth-child(3) .step-sticker { color: var(--accent); }

.dashboard-section { margin: 2rem 0; padding: clamp(1.1rem, 3vw, 2rem); border: 2px solid color-mix(in srgb, var(--blue) 35%, var(--border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 92%, var(--blue-soft)); box-shadow: var(--shadow); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.section-heading h2 { margin-top: 0; }
.section-heading p:last-child { margin: 0; color: var(--muted); }
.dashboard-ticket { flex: 0 0 auto; padding: 0.55rem 0.9rem; border: 0.13rem dashed var(--primary); border-radius: 0.55rem; background: var(--yellow-soft); color: var(--primary-dark); font-size: 0.75rem; font-weight: 900; transform: rotate(3deg); }
.dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 1.2rem 0; }
.dashboard-stats article { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.55rem; align-items: center; padding: 0.85rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.dashboard-stats article > span { grid-row: 1 / 3; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--pink-soft); color: var(--primary-dark); }
.dashboard-stats article:nth-child(2) > span { background: var(--blue-soft); }.dashboard-stats article:nth-child(3) > span { background: var(--yellow-soft); }.dashboard-stats article:nth-child(4) > span { background: var(--mint-soft); }
.dashboard-stats strong { font-size: 1.25rem; line-height: 1.1; }.dashboard-stats small { color: var(--muted); }
.learning-map { margin-top: 1.25rem; padding: 1rem; border-radius: var(--radius); background: linear-gradient(180deg, var(--blue-soft), var(--surface)); }
.map-heading h3 { margin-top: 0; }.map-heading p { margin-top: 0; color: var(--muted); }
.learning-map ol { position: relative; display: grid; gap: 1rem; list-style: none; margin: 1.2rem 0 0; padding: 0; }
.learning-map ol::before { content: ""; position: absolute; left: 1.25rem; top: 1.5rem; bottom: 1.5rem; border-left: 0.25rem dashed color-mix(in srgb, var(--pink) 48%, var(--border)); }
.map-stop { position: relative; z-index: 1; display: grid; grid-template-columns: 2.7rem 1fr; gap: 0.8rem; align-items: center; }
.map-node { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border: 0.2rem solid #fff; border-radius: 50%; background: var(--pink); color: #fff; font-weight: 900; box-shadow: 0 0 0 0.16rem var(--pink); animation: map-pulse 2.6s ease-in-out infinite; }
.map-complete .map-node { background: var(--success); box-shadow: 0 0 0 0.16rem var(--success); }.map-coming-soon .map-node { background: var(--muted); box-shadow: 0 0 0 0.16rem var(--border); animation: none; }
.map-card { padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag-preview { background: var(--yellow-soft); color: var(--warning); }
.map-card h4 { margin: 0.4rem 0; font-size: 1rem; }.map-card .button { margin-top: 0.65rem; }
@keyframes map-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }

.form-field { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.form-field label, .fieldset-legend { font-weight: 750; }
.form-field input, .form-field select {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.help { margin: 0; color: var(--muted); font-size: 0.88rem; }
fieldset { border: 0; margin: 0 0 1rem; padding: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.6rem; }
.choice-card { display: flex; align-items: center; gap: 0.7rem; min-height: 3.4rem; padding: 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.choice-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }

.profile-list { display: grid; gap: 0.8rem; }
.profile-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.profile-info { display: flex; align-items: center; gap: 0.8rem; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.profile-level { margin: 0.18rem 0; color: var(--muted); font-size: 0.85rem; font-weight: 700; }

.level-card { position: relative; display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: center; overflow: hidden; margin: 0 0 1.25rem; padding: 1.2rem; border: 2px solid color-mix(in srgb, #8b5cf6 42%, var(--border)); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--blue-soft), var(--pink-soft) 55%, var(--yellow-soft)); box-shadow: var(--shadow); }
.level-card h2, .level-card p { margin-top: 0; }
.level-orbit { display: grid; place-items: center; width: 5rem; height: 5rem; border: 0.22rem dashed var(--pink); border-radius: 50%; background: var(--surface); animation: level-orbit 8s linear infinite; }
.level-orbit span { font-size: 2.2rem; animation: level-icon 8s linear infinite reverse; }
.level-track { margin: 0.4rem 0 0.7rem; }
.level-stats { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.level-stats span { padding: 0.25rem 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--surface) 78%, transparent); font-size: 0.85rem; font-weight: 750; }
@keyframes level-orbit { to { transform: rotate(360deg); } }
@keyframes level-icon { to { transform: rotate(360deg); } }

.guild-corner, .principles-section, .ai-corner { margin-top: 2rem; }
.adventure-growth { margin-top: 2rem; padding: clamp(1rem, 3vw, 1.5rem); border: 2px solid color-mix(in srgb, #65d987 52%, var(--border)); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--mint-soft), var(--blue-soft) 58%, var(--surface)); }
.adventure-growth > header { max-width: 54rem; }
.adventure-growth ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin: 1rem 0; padding: 0; list-style: none; }
.adventure-growth li { display: grid; grid-template-columns: 3rem 1fr; gap: 0.7rem; align-items: start; padding: 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 88%, transparent); }
.adventure-growth li > span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--yellow-soft); font-size: 1.4rem; animation: helper-bob 3.4s ease-in-out infinite; }
.adventure-growth h3, .adventure-growth li p { margin: 0; }
.corner-link { display: grid; grid-template-columns: 3.3rem 1fr; align-items: center; gap: 0.1rem 0.9rem; color: var(--text); text-decoration: none; border-width: 2px; }
.corner-link > span { grid-row: 1 / 3; display: grid; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 42% 58% 50% 46%; font-size: 1.6rem; background: var(--surface); animation: helper-bob 3s ease-in-out infinite; }
.corner-link strong { font-size: 1.1rem; color: var(--primary-dark); }
.corner-link small { color: var(--muted); line-height: 1.45; }
.corner-members { background: linear-gradient(135deg, var(--pink-soft), var(--surface)); border-color: color-mix(in srgb, var(--pink) 42%, var(--border)); }
.corner-board { background: linear-gradient(135deg, var(--blue-soft), var(--surface)); border-color: color-mix(in srgb, var(--blue) 42%, var(--border)); }
.corner-leaderboard { background: linear-gradient(135deg, var(--yellow-soft), var(--mint-soft), var(--surface)); border-color: color-mix(in srgb, var(--accent) 52%, var(--border)); }
.corner-link:hover { transform: translateY(-0.18rem); box-shadow: var(--shadow); }

.leaderboard-header .status-banner { margin-top: 0.8rem; }
.leaderboard-consent { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; border: 2px solid color-mix(in srgb, var(--blue) 42%, var(--border)); background: linear-gradient(135deg, var(--blue-soft), var(--surface)); }
.leaderboard-consent h2, .leaderboard-consent p { margin-top: 0; }
.leaderboard-consent p { margin-bottom: 0; }
.leaderboard-consent .button { flex: 0 0 auto; }
.leaderboard-board { position: relative; overflow: hidden; padding: clamp(1rem, 3vw, 1.5rem); border: 2px solid color-mix(in srgb, var(--accent) 52%, var(--border)); border-radius: var(--radius-lg); background: linear-gradient(150deg, var(--yellow-soft), var(--pink-soft) 50%, var(--surface)); box-shadow: var(--shadow); }
.leaderboard-board::before { content: "✦"; position: absolute; right: 1.5rem; top: 1rem; color: var(--pink); font-size: 2rem; opacity: 0.5; animation: twinkle 1.8s ease-in-out infinite alternate; }
.leaderboard-list { position: relative; display: grid; gap: 0.75rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.leaderboard-entry { display: grid; grid-template-columns: 3.2rem 3.2rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.85rem; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 90%, transparent); }
.leaderboard-entry.is-active { border: 2px solid var(--primary); background: var(--primary-soft); }
.rank-badge, .leaderboard-avatar { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; font-weight: 900; }
.rank-badge { background: var(--yellow-soft); color: var(--warning); }
.leaderboard-avatar { background: linear-gradient(135deg, var(--pink), #8b5cf6); color: #fff; font-size: 1.35rem; text-transform: uppercase; }
.leaderboard-person { min-width: 0; }
.leaderboard-person h2, .leaderboard-person p { margin: 0; }
.leaderboard-person h2 { overflow-wrap: anywhere; font-size: 1.1rem; }
.leaderboard-person p { color: var(--muted); font-size: 0.9rem; font-weight: 700; }
.leaderboard-entry dl { display: grid; grid-template-columns: repeat(2, minmax(5rem, auto)); gap: 0.55rem; margin: 0; text-align: center; }
.leaderboard-entry dl div { padding: 0.45rem 0.65rem; border-radius: var(--radius-sm); background: var(--surface); }
.leaderboard-entry dt { color: var(--muted); font-size: 0.75rem; }
.leaderboard-entry dd { margin: 0; font-size: 1.05rem; font-weight: 900; color: var(--primary-dark); }
.leaderboard-empty { margin-top: 1rem; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.leaderboard-empty > span { font-size: 2.4rem; }

.member-header .status-banner, .board-header .status-banner { margin-top: 1rem; }
.member-grid { display: grid; gap: 1.1rem; }
.member-card { position: relative; display: grid; grid-template-columns: minmax(10rem, 0.32fr) 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: center; overflow: hidden; padding: clamp(1rem, 3vw, 1.6rem); border: 2px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.member-card:nth-child(1) { background: linear-gradient(135deg, var(--yellow-soft), var(--surface)); border-color: color-mix(in srgb, var(--accent) 52%, var(--border)); }
.member-card:nth-child(2) { background: linear-gradient(135deg, var(--blue-soft), var(--surface)); border-color: color-mix(in srgb, var(--blue) 48%, var(--border)); }
.member-card:nth-child(3) { background: linear-gradient(135deg, var(--pink-soft), var(--surface)); border-color: color-mix(in srgb, var(--pink) 48%, var(--border)); }
.member-portrait { position: relative; display: grid; place-items: center; min-height: 11rem; border-radius: 48% 52% 43% 57%; background: color-mix(in srgb, var(--surface) 72%, transparent); }
.member-portrait img { display: block; width: min(11rem, 100%); aspect-ratio: 1; object-fit: cover; object-position: top; border: 0.28rem solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 0.18rem var(--primary-soft); }
.member-symbol { font-size: 5rem; color: var(--primary-dark); filter: drop-shadow(0 0.25rem 0 var(--surface)); }
.member-downtempofj .member-symbol { opacity: 0.58; transition: opacity 240ms ease, filter 240ms ease; }
.member-downtempofj:hover .member-symbol, .member-downtempofj:focus-within .member-symbol { opacity: 0.12; filter: blur(0.22rem); }
.member-spark { position: absolute; right: 0.6rem; top: 0.4rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--surface); color: var(--pink); font-size: 1.4rem; animation: twinkle 1.8s ease-in-out infinite alternate; }
.member-copy h2 { margin: 0.45rem 0 0; font-size: clamp(1.55rem, 3vw, 2.1rem); }
.member-role { margin: 0.1rem 0 0.8rem; color: var(--primary-dark); font-weight: 800; }
.member-copy h3 { margin-bottom: 0.35rem; font-size: 1rem; }
.special-skill { width: fit-content; padding: 0.45rem 0.7rem; border: 1px dashed var(--primary); border-radius: 999px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.friendly-list { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.friendly-list li { position: relative; padding-left: 1.6rem; }
.friendly-list li::before { content: "♡"; position: absolute; left: 0; color: var(--pink); font-weight: 900; }
.principle-card { position: relative; padding-left: 4rem; }
.principle-card > span { position: absolute; left: 1.2rem; top: 1.1rem; font-size: 1.8rem; color: var(--pink); }
.companion-section { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.companion-grid { display: grid; gap: 0.6rem; }
.companion-grid article { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.7rem; align-items: start; padding: 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 84%, transparent); }
.companion-grid article > span { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--yellow-soft); color: var(--primary-dark); }
.companion-grid h4, .companion-grid p { margin: 0; }
.governance-banner { margin-top: 0.7rem !important; background: var(--blue-soft); }
.ncp-section { margin-top: 2rem; padding: 1.1rem; border: 2px dashed color-mix(in srgb, var(--blue) 45%, var(--border)); border-radius: var(--radius-lg); background: var(--blue-soft); }
.ncp-section ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.ncp-section li { display: grid; gap: 0.15rem; padding: 0.75rem; border-radius: var(--radius); background: var(--surface); }
.ncp-section li span { color: var(--muted); }

.announcement-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.announcement-card { position: relative; padding: 1.25rem; border: 2px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.announcement-card:first-child { grid-column: 1 / -1; }
.announcement-important { border-color: color-mix(in srgb, var(--pink) 52%, var(--border)); background: linear-gradient(135deg, var(--pink-soft), var(--surface)); }
.announcement-learning { border-color: color-mix(in srgb, var(--blue) 52%, var(--border)); background: linear-gradient(135deg, var(--blue-soft), var(--surface)); }
.announcement-roadmap { border-color: color-mix(in srgb, var(--accent) 58%, var(--border)); background: linear-gradient(135deg, var(--yellow-soft), var(--surface)); }
.announcement-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; }
.announcement-meta time { color: var(--muted); font-size: 0.88rem; font-weight: 700; }
.pin-label { position: absolute; right: 1rem; top: -0.78rem; padding: 0.2rem 0.7rem; border: 2px solid var(--surface); border-radius: 999px; background: var(--primary-dark); color: #fff; font-size: 0.8rem; font-weight: 850; box-shadow: var(--shadow); transform: rotate(1deg); }
.ai-corner { overflow: hidden; padding: clamp(1rem, 3vw, 1.5rem); border: 2px solid color-mix(in srgb, #8b5cf6 45%, var(--border)); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--blue-soft), var(--pink-soft) 55%, var(--surface)); }
.ai-corner > header { max-width: 54rem; }
.ai-corner article { padding: 1rem; border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 88%, transparent); }
.ai-suggestion-list, .ai-question-list { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.ai-suggestion-list li, .ai-question-list li { display: grid; grid-template-columns: 2.3rem 1fr; gap: 0.65rem; align-items: start; }
.ai-suggestion-list span, .ai-question-list span { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--surface); color: var(--primary-dark); font-weight: 900; }
.ai-suggestion-list p, .ai-question-list p { margin: 0; }

.quiz-card { margin-bottom: 1rem; padding: 1.25rem; }
.quiz-card legend { margin-bottom: 0.7rem; font-weight: 800; }
.quiz-options { display: grid; gap: 0.55rem; }
.quiz-option { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.quiz-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.feedback { margin-top: 0.7rem; padding: 0.75rem; border-radius: var(--radius-sm); }
.feedback-correct { background: color-mix(in srgb, var(--success) 13%, var(--surface)); color: var(--success); }
.feedback-wrong { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); }

.status-banner { display: flex; align-items: flex-start; gap: 0.7rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }
.status-banner p { margin: 0; }
.empty-state { padding: 2rem; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); }

.loading-state { min-height: 18rem; display: flex; align-items: center; justify-content: center; gap: 0.8rem; color: var(--muted); }
.spinner { width: 1.5rem; height: 1.5rem; border: 0.2rem solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes park-lights { from { background-position: 0 0, 0 0; } to { background-position: 1.4rem 0.8rem, -1rem 1.2rem; } }
@keyframes nav-hop { 0%,100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-0.35rem) rotate(-8deg); } 70% { transform: translateY(-0.1rem) rotate(5deg); } }
@keyframes doodle-float { 0%,100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(-0.6rem) rotate(5deg); } }
@keyframes twinkle { from { transform: rotate(0) scale(0.85); opacity: 0.45; } to { transform: rotate(22deg) scale(1.18); opacity: 1; } }
@keyframes confetti-drift { 0%,100% { transform: translate(0,0) rotate(20deg); } 50% { transform: translate(1rem,-0.9rem) rotate(200deg); } }
@keyframes arrow-nudge { from { transform: translateX(0); } to { transform: translateX(0.28rem); } }
@keyframes wheel-spin { to { transform: rotate(360deg); } }
@keyframes cloud-sail { from { transform: translateX(-0.2rem); } to { transform: translateX(1.1rem); } }
@keyframes balloon-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-0.8rem) rotate(4deg); } }
@keyframes helper-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-0.28rem) rotate(3deg); } }
@keyframes progress-party { to { background-position: -200% 0; } }
@keyframes progress-shine { 0%,25% { transform: translateX(-120%); } 70%,100% { transform: translateX(120%); } }
@keyframes helper-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-0.45rem) rotate(2deg); } }
@keyframes rainbow-spin { to { transform: rotate(360deg); } }
@keyframes wave-hello { 0%,55%,100% { transform: rotate(0); } 65% { transform: rotate(-24deg); } 78% { transform: rotate(20deg); } 90% { transform: rotate(-12deg); } }
@keyframes help-pop { from { transform: scale(0.92) rotate(-7deg); } to { transform: scale(1.08) rotate(7deg); } }
@keyframes pop-in { from { transform: translateY(0.35rem) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.floating-helper { position: fixed; z-index: 90; right: 1rem; bottom: 1rem; display: grid; justify-items: end; gap: 0.6rem; pointer-events: none; }
.helper-button, .helper-popover { pointer-events: auto; }
.helper-button { position: relative; width: 5.1rem; height: 5.1rem; padding: 0; border: 0.22rem solid #fff; border-radius: 50% 50% 42% 52%; background: var(--pink-soft); box-shadow: 0 0 0 0.18rem var(--pink), 0 0 0 0.36rem var(--blue), 0 12px 28px rgb(75 45 25 / 0.24); cursor: pointer; animation: helper-float 2.8s ease-in-out infinite; }
.helper-face { position: absolute; z-index: 2; top: 0.55rem; width: 3.35rem; height: 3.35rem; border: 0.14rem solid #fff; border-radius: 50%; object-fit: cover; object-position: top; box-shadow: 0 0.18rem 0.5rem rgb(0 0 0 / 0.16); }
.helper-face-1 { left: -0.35rem; transform: rotate(-7deg); }
.helper-face-2 { right: -0.35rem; transform: rotate(7deg); }
.helper-rainbow { position: absolute; z-index: 1; inset: -0.65rem; border-radius: 50%; background: conic-gradient(var(--pink), var(--accent), #65d987, var(--blue), #8b5cf6, var(--pink)); animation: rainbow-spin 7s linear infinite; }
.helper-rainbow::after { content: ""; position: absolute; inset: 0.32rem; border-radius: 50%; background: var(--surface); }
.helper-wave { position: absolute; z-index: 4; left: -0.65rem; top: -0.65rem; font-size: 1.65rem; filter: drop-shadow(0 0.15rem 0 #fff); transform-origin: bottom right; animation: wave-hello 1.8s ease-in-out infinite; }
.helper-help-mark { position: absolute; z-index: 5; right: -0.35rem; top: -0.5rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0.14rem solid #fff; border-radius: 50%; background: #8b5cf6; color: #fff; font-weight: 900; animation: help-pop 1.8s ease-in-out infinite alternate; }
.helper-popover { position: relative; width: min(20rem, calc(100vw - 2rem)); padding: 0.9rem 1rem; border: 2px solid color-mix(in srgb, var(--pink) 45%, var(--border)); border-radius: 1.2rem 1.2rem 0.3rem 1.2rem; background: linear-gradient(135deg, var(--surface), var(--pink-soft)); box-shadow: var(--shadow); animation: pop-in 220ms ease-out; }
.helper-popover::after { content: ""; position: absolute; right: 1.2rem; bottom: -0.55rem; width: 0.9rem; height: 0.9rem; border-right: 2px solid color-mix(in srgb, var(--pink) 45%, var(--border)); border-bottom: 2px solid color-mix(in srgb, var(--pink) 45%, var(--border)); background: var(--pink-soft); transform: rotate(45deg); }
.helper-popover strong { color: var(--primary-dark); }
.helper-popover p { margin: 0.25rem 0 0; }
.helper-popover[hidden] { display: none; }

.toast-region { position: fixed; z-index: 100; right: 7rem; bottom: 1rem; display: grid; gap: 0.5rem; max-width: min(24rem, calc(100vw - 2rem)); }
.toast { padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--text); color: var(--surface); box-shadow: var(--shadow); }

.accessibility-panel { position: fixed; z-index: 120; top: calc(var(--topbar) + 0.7rem); right: 1rem; width: min(27rem, calc(100vw - 2rem)); max-height: calc(100vh - var(--topbar) - 1.5rem); overflow-y: auto; }
.accessibility-panel[hidden] { display: none; }
.accessibility-card { padding: 1.1rem; border: 2px solid color-mix(in srgb, var(--blue) 52%, var(--border)); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 20px 60px rgb(0 0 0 / 0.24); }
.accessibility-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.accessibility-heading h2 { margin: 0; font-size: 1.45rem; }
.accessibility-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin: 1rem 0; }
.accessibility-option { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.05rem 0.55rem; align-items: center; min-height: 4.5rem; padding: 0.65rem; text-align: left; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; }
.accessibility-option > span { grid-row: 1 / 3; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--blue-soft); font-weight: 900; }
.accessibility-option small { color: var(--muted); line-height: 1.35; }
.accessibility-option[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 0.12rem var(--surface); }
.speak-button { width: 100%; }
.accessibility-actions { display: grid; grid-template-columns: 1fr 1fr; }

.storage-warning { margin: 0 0 1rem; padding: 0.85rem 1rem; border: 2px solid var(--warning); border-radius: var(--radius); background: var(--yellow-soft); color: var(--text); }
.storage-warning ul { margin-bottom: 0; }
.public-beta-banner { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0 0 1rem; padding: 0.9rem 1rem; border: 2px solid color-mix(in srgb, var(--accent) 65%, var(--border)); border-radius: var(--radius); background: linear-gradient(110deg, var(--yellow-soft), var(--mint-soft), var(--blue-soft)); color: var(--text); }
.public-beta-banner p { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.beta-badge { flex: 0 0 auto; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--text); color: var(--surface); font-weight: 900; }
.tag-beta { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); background: var(--yellow-soft); }
.beta-lesson-banner { border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); background: var(--mint-soft); }
.review-banner { margin: 0 0 1rem; padding: 0.85rem 1rem; border: 2px solid var(--warning); border-radius: var(--radius); background: var(--yellow-soft); color: var(--text); }
.review-banner p { margin: 0.25rem 0 0; }

.lesson-checklist { display: grid; gap: 0.55rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--mint-soft); }
.lesson-checklist legend { padding-inline: 0.35rem; font-weight: 800; }
.lesson-checklist label { display: flex; align-items: flex-start; gap: 0.65rem; min-height: 2.75rem; padding: 0.45rem; border-radius: var(--radius-sm); }
.lesson-checklist input { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; }
.code-example { margin: 1rem 0; }
.code-example figcaption { font-weight: 800; }
.code-example pre { max-width: 100%; overflow: auto; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #171411; color: #fff8f2; white-space: pre-wrap; }
.table-wrap { max-width: 100%; overflow: auto; margin: 1rem 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.table-wrap table { width: 100%; min-width: 30rem; border-collapse: collapse; background: var(--surface); }
.table-wrap caption { padding: 0.7rem; text-align: left; font-weight: 800; background: var(--blue-soft); }
.table-wrap th, .table-wrap td { padding: 0.65rem; text-align: left; border: 1px solid var(--border); }
.lesson-image { margin: 1rem 0; padding: 0.75rem; text-align: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.lesson-image img { display: block; width: min(18rem, 100%); max-height: 20rem; margin-inline: auto; object-fit: contain; border-radius: var(--radius); }
.lesson-image figcaption { margin-top: 0.5rem; color: var(--muted); }
.exercise-card { margin: 1.5rem 0; padding: 1.2rem; border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: var(--radius-lg); background: var(--yellow-soft); }
.exercise-outcomes { display: grid; gap: 0.65rem; }
.exercise-outcomes div, .lesson-meta dl div, .certification-card dl div, .import-preview div { display: grid; grid-template-columns: minmax(7rem, 0.35fr) 1fr; gap: 0.75rem; padding-block: 0.45rem; border-bottom: 1px solid var(--border); }
.exercise-outcomes dt, .lesson-meta dt, .certification-card dt, .import-preview dt { font-weight: 800; }
.exercise-outcomes dd, .lesson-meta dd, .certification-card dd, .import-preview dd { margin: 0; }
.lesson-meta { margin-top: 1.5rem; }
.external-label { font-size: 0.85em; }
.certifications-section { margin-top: 2rem; }
.certification-card h3 { margin-block: 0.6rem; font-size: 1.2rem; }
.certification-toolbox { padding: clamp(1rem, 3vw, 1.5rem); border: 2px dashed color-mix(in srgb, var(--blue) 52%, var(--border)); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--blue-soft), var(--yellow-soft) 58%, var(--surface)); }
.toolbox-symbol { font-size: 3rem; animation: helper-bob 3s ease-in-out infinite; }
.certification-url { display: grid; gap: 0.2rem; padding: 0.7rem; border-radius: var(--radius-sm); background: var(--surface-soft); font-size: 0.82rem; }
.certification-url a { overflow-wrap: anywhere; }

.app-dialog { width: min(42rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; padding: 0; border: 2px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgb(0 0 0 / 0.35); }
.app-dialog::backdrop { background: rgb(20 14 10 / 0.62); backdrop-filter: blur(0.15rem); }
.app-dialog #dialog-content { padding: clamp(1rem, 4vw, 1.5rem); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dialog-heading h2 { margin-top: 0; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.65rem; margin-top: 1.25rem; }
.danger-note { padding: 0.75rem; border-left: 0.3rem solid var(--danger); background: var(--primary-soft); }
.import-preview { margin: 1rem 0; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.noscript { padding: 1rem; background: #fff4ce; color: #533f03; }

@media (max-width: 64rem) {
  .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "sidebar" "main" "footer"; }
  .sidebar { position: static; height: auto; padding: 0.6rem 1rem; border-right: 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
  .nav-list { display: flex; width: max-content; }
  .nav-link { min-height: 2.75rem; }
  .sidebar-note { display: none; }
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-toc { position: static; order: -1; }
}

@media (max-width: 48rem) {
  .topbar { align-items: flex-start; }
  .brand small, .profile-pill #active-profile-name { display: none; }
  .hero { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .choice-grid { grid-template-columns: 1fr; }
  .footer { flex-direction: column; }
  .profile-card { align-items: flex-start; flex-direction: column; }
  .leaderboard-consent { align-items: stretch; flex-direction: column; }
  .leaderboard-consent .button { width: 100%; }
  .leaderboard-entry { grid-template-columns: 2.7rem 2.7rem minmax(0, 1fr); }
  .rank-badge, .leaderboard-avatar { width: 2.7rem; height: 2.7rem; }
  .leaderboard-entry dl { grid-column: 2 / -1; width: 100%; }
  .helper-squad { border-radius: var(--radius); }
  .floating-helper { right: 0.65rem; bottom: 0.65rem; }
  .helper-button { width: 4.35rem; height: 4.35rem; }
  .toast-region { right: 5.5rem; }
  .level-card { grid-template-columns: 1fr; }
  .level-orbit { width: 4.4rem; height: 4.4rem; }
  .section-heading { display: grid; }
  .dashboard-ticket { width: fit-content; }
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accessibility-options { grid-template-columns: 1fr; }
  .member-card { grid-template-columns: 1fr; }
  .member-portrait { min-height: 8rem; }
  .announcement-board { grid-template-columns: 1fr; }
  .announcement-card:first-child { grid-column: auto; }
  .ncp-section ul { grid-template-columns: 1fr; }
  .adventure-growth ol { grid-template-columns: 1fr; }
  .exercise-outcomes div, .lesson-meta dl div, .certification-card dl div, .import-preview div { grid-template-columns: 1fr; gap: 0.1rem; }
}

@media (max-width: 24rem) {
  .topbar { padding-inline: 0.6rem; }
  .brand-mark { width: 2.5rem; height: 2.5rem; }
  .chip { min-width: 2.65rem; padding-inline: 0.5rem; }
  .main-content { padding-inline: 0.8rem; }
  .character-tip { grid-template-columns: 1fr; }
  .topbar-actions { gap: 0.25rem; }
  .topbar-actions > [data-action="toggle-theme"], .topbar-actions > .profile-pill { display: none; }
  .accessibility-actions { grid-template-columns: 1fr; }
}