:root {
  --ink: #0a0804;
  --obsidian: #050403;
  --panel: #120d08;
  --panel-2: #1c130a;
  --stone: #18130d;
  --stone-2: #241b12;
  --gold: #f2c94c;
  --gold-soft: #ffe28a;
  --ember: #d96b2b;
  --blood: #8f241e;
  --moss: #4d8b57;
  --aether: #55b7d9;
  --violet: #6d5bd0;
  --paper: #efe1b4;
  --text: #fff6d7;
  --muted: #c8b98b;
  --edge: rgb(242 201 76 / 0.34);
  --glass-edge: rgb(255 246 215 / 0.1);
  --motion: cubic-bezier(0.22, 0.68, 0, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  font-family: Lato, "Trebuchet MS", sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgb(242 201 76 / 0.14), transparent 24rem),
    radial-gradient(circle at 82% 18%, rgb(85 183 217 / 0.1), transparent 26rem),
    radial-gradient(circle at 64% 88%, rgb(217 107 43 / 0.1), transparent 24rem),
    linear-gradient(145deg, #040302 0%, #130d08 44%, #050403 100%);
  overflow-x: hidden;
}

html.academy-home-open,
body.academy-home-open {
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgb(255 246 215 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 246 215 / 0.018) 1px, transparent 1px),
    radial-gradient(ellipse at center, transparent 42%, rgb(0 0 0 / 0.58) 100%);
  background-size: 74px 74px, 74px 74px, auto;
  mix-blend-mode: screen;
  opacity: 0.38;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.018) 0 1px, transparent 1px 4px);
  opacity: 0.18;
}

.game-shell,
.intro-overlay,
.academy-home-overlay,
.certificate-overlay {
  position: relative;
  z-index: 1;
}

button {
  font: inherit;
}

/* Room 24: controlled Aurora Wheel axle bend comparison. */
.engineering-forge-lab[data-mode="axle-bend-bench"] .forge-control-actions .forge-test-button {
  display: none;
}

.axle-predict-panel,
.axle-claim-panel {
  width: 100%;
  padding: 15px;
  border: 1px solid rgb(242 201 76 / 0.3);
  border-radius: 14px;
  background: linear-gradient(145deg, rgb(32 24 13 / 0.94), rgb(10 18 23 / 0.96));
}

.axle-predict-panel > span,
.axle-claim-panel > span,
.axle-trial-row > span {
  color: #ffe28a;
  font: 900 0.68rem/1.2 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.axle-predict-panel h4,
.axle-claim-panel h4 {
  margin: 5px 0;
  color: #fff6d7;
  font-family: Cinzel, Georgia, serif;
}

.axle-predict-panel p { margin: 0; color: #c8b98b; }

.axle-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.axle-prediction,
.axle-claim,
.axle-check,
.axle-sample-card button {
  min-height: 56px;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 11px;
  color: #fff6d7;
  background: rgb(25 20 14 / 0.92);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.axle-prediction b,
.axle-prediction small,
.axle-claim b,
.axle-claim small,
.axle-check b,
.axle-check small,
.axle-sample-card button b,
.axle-sample-card button small { display: block; }

.axle-prediction small,
.axle-claim small,
.axle-check small,
.axle-sample-card button small { margin-top: 4px; color: #c8b98b; }

.axle-prediction:hover:not(:disabled),
.axle-claim:hover:not(:disabled),
.axle-check:hover:not(:disabled),
.axle-sample-card button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #f2c94c;
  box-shadow: 0 8px 22px rgb(242 201 76 / 0.13);
}

.axle-prediction.selected,
.axle-claim.selected { border-color: #9effbd; box-shadow: inset 0 0 0 1px rgb(158 255 189 / 0.3); }
.axle-claim.ruled-out,
.axle-trial-row.revised { border-color: rgb(217 107 43 / 0.48); color: #ffd0b1; }

.axle-bend-bench { display: grid; gap: 12px; width: 100%; }
.axle-control-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.axle-control-strip span { padding: 9px; border: 1px solid rgb(85 183 217 / 0.25); border-radius: 10px; background: rgb(6 16 24 / 0.82); }
.axle-control-strip small,
.axle-control-strip b { display: block; }
.axle-control-strip small { color: #9ee8ff; font-size: 0.68rem; }

.axle-sample-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.axle-sample-card { padding: 12px; border: 1px solid rgb(141 201 255 / 0.22); border-radius: 14px; background: rgb(7 15 22 / 0.94); text-align: center; }
.axle-sample-card.measured { border-color: rgb(158 255 189 / 0.36); animation: axleSensorPing 440ms ease-out both; }
.axle-sample-visual { position: relative; height: 74px; margin-bottom: 8px; overflow: hidden; }
.axle-sample-visual i { position: absolute; left: 12%; right: 12%; top: 32px; height: 9px; border-radius: 8px; background: linear-gradient(90deg, #8a6a31, #e5c56d, #8a6a31); transform: translateY(var(--axle-bend)) rotate(calc(var(--axle-bend) * 0.18deg)); transform-origin: left center; transition: transform 420ms cubic-bezier(.22,.68,0,1); }
.axle-sample-visual span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); color: #ffe28a; font: 900 .7rem/1 "JetBrains Mono", monospace; }
.axle-sample-visual span::after { content: "↓"; display: block; margin-top: 4px; font-size: 1rem; }
.axle-sensors { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 9px 0; }
.axle-sensors span { padding: 7px; border-radius: 8px; background: rgb(85 183 217 / 0.09); }
.axle-sensors small,
.axle-sensors strong { display: block; }
.axle-sensors small { color: #9ee8ff; font-size: .65rem; }
.axle-sensors strong { color: #9effbd; }
.axle-sealed-result { margin: 12px 0; color: #7f91a0; font: 900 .7rem/1 "JetBrains Mono", monospace; letter-spacing: .08em; }
.axle-sample-card button { width: 100%; }
.axle-check { width: 100%; margin-top: 10px; border-color: rgb(158 255 189 / 0.42); background: linear-gradient(135deg, rgb(22 62 43 / .9), rgb(15 29 34 / .94)); }
.axle-trial-ledger { display: grid; gap: 7px; margin-top: 10px; }
.axle-trial-row { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 8px; align-items: center; padding: 9px; border: 1px solid rgb(141 201 255 / .18); border-radius: 9px; }
.axle-trial-row.passed { border-color: rgb(158 255 189 / .4); }
.axle-trial-row small { color: #b8cbd6; }
.axle-trial-row em { color: #9effbd; font-size: .7rem; }

@keyframes axleSensorPing {
  0% { transform: scale(.985); filter: brightness(.72); }
  60% { transform: scale(1.01); filter: brightness(1.28); }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (max-width: 700px) {
  .axle-sample-grid,
  .axle-choice-grid { grid-template-columns: 1fr; }
  .axle-control-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .axle-trial-row { grid-template-columns: 1fr 1fr; }
  .axle-prediction,
  .axle-claim,
  .axle-check,
  .axle-sample-card button { min-height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .axle-prediction,
  .axle-claim,
  .axle-check,
  .axle-sample-card,
  .axle-sample-visual i { animation: none !important; transition: none !important; }
}

/* Room 23: learner-controlled fixed-ray mirror experiment. */
.physics-launcher[data-mode="reflection-lab"] .launcher-controls,
.physics-launcher[data-mode="reflection-lab"] .launcher-stepper {
  display: none;
}

.reflection-proof-lab {
  display: grid;
  gap: 12px;
}

.reflection-step,
.reflection-observation,
.reflection-trial-ledger {
  padding: 14px;
  border: 1px solid rgb(105 216 244 / 0.28);
  border-radius: 14px;
  background: linear-gradient(145deg, rgb(8 20 31 / 0.94), rgb(7 13 20 / 0.94));
}

.reflection-step > span,
.reflection-observation > span,
.reflection-trial-row > span {
  color: #9ee8ff;
  font: 900 0.68rem/1.2 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reflection-step h4 {
  margin: 5px 0;
  color: #fff6d7;
  font-family: Cinzel, Georgia, serif;
}

.reflection-step p,
.reflection-observation small,
.reflection-trial-row small {
  margin: 0;
  color: #c7d9e5;
}

.reflection-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.reflection-choice,
.reflection-trace-button,
.reflection-check-button {
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgb(105 216 244 / 0.36);
  border-radius: 12px;
  color: #eef8f4;
  background: rgb(10 28 41 / 0.92);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.reflection-choice b,
.reflection-choice small,
.reflection-trace-button b,
.reflection-trace-button small,
.reflection-check-button b,
.reflection-check-button small {
  display: block;
}

.reflection-choice small,
.reflection-trace-button small,
.reflection-check-button small {
  margin-top: 4px;
  color: #a9c2d2;
}

.reflection-choice:hover:not(:disabled),
.reflection-trace-button:hover:not(:disabled),
.reflection-check-button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #69d8f4;
  box-shadow: 0 8px 24px rgb(85 183 217 / 0.16);
}

.reflection-choice.selected {
  border-color: #f2c94c;
  box-shadow: inset 0 0 0 1px rgb(242 201 76 / 0.35), 0 0 20px rgb(242 201 76 / 0.12);
}

.reflection-choice.ruled-out,
.reflection-trial-row.revised {
  border-color: rgb(217 107 43 / 0.48);
  color: #ffd0b1;
}

.reflection-trace-button,
.reflection-check-button {
  width: 100%;
  border-color: rgb(242 201 76 / 0.48);
  background: linear-gradient(135deg, rgb(71 52 13 / 0.94), rgb(18 31 38 / 0.94));
}

.reflection-observation {
  text-align: center;
}

.reflection-observation b {
  display: block;
  margin: 6px 0;
  color: #9effbd;
  font: 900 0.95rem/1.35 "JetBrains Mono", Consolas, monospace;
}

.reflection-observation.sealed b {
  color: #8da4b9;
  letter-spacing: 0.08em;
}

.reflection-observation.revealed {
  animation: reflectionSensorReveal 520ms ease-out both;
}

.reflection-trial-ledger {
  display: grid;
  gap: 7px;
}

.reflection-trial-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgb(141 201 255 / 0.18);
  border-radius: 10px;
}

.reflection-trial-row.passed {
  border-color: rgb(158 255 189 / 0.4);
}

.reflection-trial-row em {
  color: #9effbd;
  font-size: 0.72rem;
}

@keyframes reflectionSensorReveal {
  0% { transform: scale(0.98); filter: brightness(0.7); }
  55% { transform: scale(1.012); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (max-width: 620px) {
  .reflection-choice-grid { grid-template-columns: 1fr; }
  .reflection-choice,
  .reflection-trace-button,
  .reflection-check-button { min-height: 50px; }
  .reflection-trial-row { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .reflection-choice,
  .reflection-trace-button,
  .reflection-check-button,
  .reflection-observation.revealed {
    animation: none !important;
    transition: none !important;
  }
}

/* Week 4 Prototype Trials: baseline -> measured weak point -> one-part revision -> same-load retest. */
.engineering-forge-lab[data-mode="prototype-iteration"] {
  border-color: rgb(255 179 108 / 0.68);
  background:
    radial-gradient(circle at 10% 8%, rgb(242 201 76 / 0.17), transparent 34%),
    radial-gradient(circle at 92% 14%, rgb(85 183 217 / 0.2), transparent 38%),
    linear-gradient(145deg, rgb(20 11 5 / 0.98), rgb(4 15 19 / 0.99));
}

.engineering-forge-lab[data-mode="prototype-iteration"] :is(.forge-test-button, .forge-reset-button) {
  min-height: 50px;
}

.prototype-hypothesis-panel,
.prototype-iteration-lab,
.prototype-revision-bench {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.prototype-hypothesis-panel {
  padding: 12px;
  border: 1px solid rgb(255 179 108 / 0.3);
  border-radius: 11px;
  background: rgb(8 5 3 / 0.76);
}

.prototype-hypothesis-panel h4,
.prototype-revision-bench h4 {
  margin: 0;
  color: #fff4c6;
  font: 850 0.9rem/1.2 Cinzel, Georgia, serif;
}

.prototype-hypotheses,
.prototype-revisions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.prototype-hypotheses .forge-choice,
.prototype-revision {
  min-height: 72px;
}

.prototype-iteration-lab {
  padding: 12px;
  border: 1px solid rgb(85 183 217 / 0.28);
  border-radius: 12px;
  background: linear-gradient(180deg, rgb(5 22 28 / 0.92), rgb(10 6 3 / 0.96));
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.prototype-lift-stage {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) minmax(132px, 0.32fr);
  gap: 14px;
  align-items: center;
  min-height: 190px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgb(85 183 217 / 0.36);
  border-radius: 11px;
  background:
    linear-gradient(90deg, rgb(255 179 108 / 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgb(255 179 108 / 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(ellipse at 82% 28%, rgb(85 183 217 / 0.18), transparent 46%),
    linear-gradient(135deg, rgb(6 26 32 / 0.96), rgb(15 8 4 / 0.97));
}

.prototype-shaft {
  position: relative;
  width: 174px;
  height: 156px;
  border: 2px solid rgb(255 179 108 / 0.48);
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(90deg, rgb(4 9 11 / 0.9), rgb(22 13 7 / 0.92));
  box-shadow: inset 0 0 28px rgb(0 0 0 / 0.55), 0 0 22px rgb(85 183 217 / 0.1);
}

.prototype-shaft i,
.prototype-shaft .platform,
.prototype-shaft .platform span {
  position: absolute;
  display: block;
}

.prototype-shaft .cable {
  top: 14px;
  left: 84px;
  width: 3px;
  height: 94px;
  background: linear-gradient(90deg, #8d7557, #f1d9a4, #68543d);
}

.prototype-shaft .axle {
  top: 12px;
  left: 59px;
  width: 54px;
  height: 10px;
  border: 2px solid #9de9ff;
  border-radius: 999px;
  background: #173842;
  box-shadow: 0 0 12px rgb(85 183 217 / 0.38);
}

.prototype-shaft .brace {
  top: 7px;
  left: 81px;
  width: 10px;
  height: 48px;
  border: 2px solid #f2c94c;
  border-radius: 4px;
  background: #523015;
  transform-origin: 50% 8px;
  transition: transform 460ms var(--motion), border-color 180ms ease, box-shadow 180ms ease;
}

.prototype-shaft .rail {
  inset: 20px 14px 20px auto;
  width: 4px;
  border-radius: 999px;
  background: #a6c8ce;
  box-shadow: -142px 0 #a6c8ce;
}

.prototype-shaft .platform {
  left: 24px;
  bottom: 18px;
  width: 124px;
  height: 34px;
  border: 2px solid #ffb36c;
  border-radius: 5px;
  background: linear-gradient(180deg, #6a3819, #29170c);
  box-shadow: 0 5px 12px rgb(0 0 0 / 0.42);
  transition: transform 500ms var(--motion), border-color 180ms ease, box-shadow 180ms ease;
}

.prototype-shaft .platform span {
  bottom: 5px;
  width: 20px;
  height: 20px;
  border: 1px solid #f2c94c;
  border-radius: 3px;
  background: linear-gradient(135deg, #b76b2c, #4c2913);
}

.prototype-shaft .platform span:nth-child(1) { left: 8px; }
.prototype-shaft .platform span:nth-child(2) { left: 35px; }
.prototype-shaft .platform span:nth-child(3) { left: 62px; }
.prototype-shaft .platform span:nth-child(4) { left: 89px; }

.prototype-iteration-lab[data-state="baseline-failed"] .prototype-shaft .brace,
.prototype-iteration-lab[data-state="retest-failed"] .prototype-shaft .brace {
  border-color: #ff8066;
  box-shadow: 0 0 14px rgb(255 94 63 / 0.5);
  transform: rotate(14deg);
  animation: prototypeBraceFail 620ms var(--motion) both;
}

.prototype-iteration-lab[data-state="baseline-failed"] .prototype-shaft .platform,
.prototype-iteration-lab[data-state="retest-failed"] .prototype-shaft .platform {
  border-color: #ff8066;
  transform: translateY(-30px) rotate(2deg);
  animation: prototypeLiftBind 680ms var(--motion) both;
}

.prototype-iteration-lab[data-state="proved"] .prototype-shaft .brace {
  width: 22px;
  left: 75px;
  border-color: #9effbd;
  background: repeating-linear-gradient(135deg, #1d633c 0 5px, #0d3822 5px 9px);
  box-shadow: 0 0 16px rgb(158 255 189 / 0.45);
}

.prototype-iteration-lab[data-state="proved"] .prototype-shaft .platform {
  border-color: #9effbd;
  box-shadow: 0 0 20px rgb(158 255 189 / 0.26);
  animation: prototypeLiftPass 1.2s var(--motion) both;
}

.prototype-stage-copy,
.prototype-cycle-meter {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.prototype-stage-copy span,
.prototype-stage-copy b,
.prototype-stage-copy small,
.prototype-control-condition span,
.prototype-control-condition b,
.prototype-control-condition small,
.prototype-component-card span,
.prototype-component-card b,
.prototype-component-card small {
  display: block;
}

.prototype-stage-copy span,
.prototype-control-condition span,
.prototype-component-card span {
  color: #9de9ff;
  font: 900 0.62rem/1.1 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.prototype-stage-copy b {
  margin-top: 5px;
  color: #fff4c6;
  font: 900 clamp(1rem, 2vw, 1.34rem)/1.08 Cinzel, Georgia, serif;
}

.prototype-stage-copy small {
  margin-top: 6px;
  color: #d2eaf1;
  font-size: 0.73rem;
  line-height: 1.32;
}

.prototype-cycle-meter {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgb(85 183 217 / 0.28);
  border-radius: 9px;
  background: rgb(0 0 0 / 0.3);
}

.prototype-cycle-meter span,
.prototype-cycle-meter b {
  color: #d8f7ff;
  font-size: 0.72rem;
}

.prototype-cycle-meter i {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
}

.prototype-cycle-meter i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--prototype-progress);
  border-radius: inherit;
  background: linear-gradient(90deg, #55b7d9, #f2c94c, #9effbd);
  transition: width 320ms var(--motion);
}

.prototype-control-condition {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-left: 3px solid #f2c94c;
  border-radius: 8px;
  background: rgb(242 201 76 / 0.08);
}

.prototype-control-condition b {
  color: #fff2bc;
  font-size: 0.82rem;
}

.prototype-control-condition small {
  color: #cfbf96;
  font-size: 0.7rem;
}

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

.prototype-component-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgb(255 179 108 / 0.22);
  border-radius: 10px;
  background: rgb(9 7 5 / 0.9);
}

.prototype-component-card.weak {
  border-color: rgb(255 122 94 / 0.62);
  background: linear-gradient(135deg, rgb(67 20 13 / 0.82), rgb(10 7 5 / 0.94));
  box-shadow: 0 0 20px rgb(255 94 63 / 0.1);
}

.prototype-component-card.within-limit {
  border-color: rgb(158 255 189 / 0.34);
}

.prototype-component-art {
  position: relative;
  grid-row: 1 / 3;
  min-height: 58px;
  border: 1px solid rgb(85 183 217 / 0.2);
  border-radius: 8px;
  background: rgb(3 18 23 / 0.8);
}

.prototype-component-art i,
.prototype-component-art span,
.prototype-component-art em {
  position: absolute;
  display: block;
}

.prototype-component-art i { inset: 10px 26px; background: #9de9ff; }
.prototype-component-art span { inset: 23px 8px; height: 10px; border: 2px solid #f2c94c; border-radius: 999px; }
.prototype-component-art em { inset: 9px; border: 1px dashed rgb(255 179 108 / 0.48); border-radius: 50%; }
.prototype-component-card.weak .prototype-component-art span { border-color: #ff8066; transform: rotate(12deg); }

.prototype-component-card b {
  margin-top: 3px;
  color: #fff4c6;
  font: 850 0.82rem/1.15 Cinzel, Georgia, serif;
}

.prototype-component-card small {
  margin-top: 3px;
  color: #d4edf4;
  font: 800 0.68rem/1.2 "JetBrains Mono", Consolas, monospace;
}

.prototype-component-card p {
  grid-column: 2;
  margin: 0;
  color: #cdbf9d;
  font-size: 0.66rem;
  line-height: 1.3;
}

.prototype-revision-bench {
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 10px;
  background: rgb(242 201 76 / 0.06);
}

.prototype-revision-bench p {
  margin: 5px 0 0;
  color: #e2d4af;
  font-size: 0.73rem;
  line-height: 1.32;
}

.prototype-revision {
  display: grid;
  gap: 4px;
  align-content: center;
  padding: 10px;
  border: 1px solid rgb(255 179 108 / 0.28);
  border-radius: 9px;
  color: #fff4c6;
  background: rgb(0 0 0 / 0.3);
  cursor: pointer;
  text-align: left;
}

.prototype-revision b,
.prototype-revision small,
.prototype-revision span { display: block; }
.prototype-revision b { font-size: 0.75rem; }
.prototype-revision small { color: #cdbf9d; font-size: 0.66rem; }
.prototype-revision span { color: #9de9ff; font: 900 0.62rem/1.1 "JetBrains Mono", Consolas, monospace; }
.prototype-revision.selected { border-color: #f2c94c; box-shadow: 0 0 0 2px rgb(242 201 76 / 0.16); }
.prototype-revision.failed { border-color: rgb(255 122 94 / 0.5); }
.prototype-revision.passed { border-color: rgb(158 255 189 / 0.58); }
.prototype-revision:hover:not(:disabled),
.prototype-revision:focus-visible { border-color: #9de9ff; outline: 3px solid rgb(85 183 217 / 0.3); outline-offset: 2px; }
.prototype-revision:disabled { cursor: not-allowed; opacity: 0.56; }

.prototype-trial-ledger {
  display: grid;
  gap: 6px;
}

.prototype-trial-ledger span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.25);
}

.prototype-trial-ledger span.baseline { border-color: rgb(255 179 108 / 0.4); }
.prototype-trial-ledger span.revise { border-color: rgb(255 122 94 / 0.38); }
.prototype-trial-ledger span.match { border-color: rgb(158 255 189 / 0.46); }
.prototype-trial-ledger b { color: #fff4c6; font-size: 0.7rem; }
.prototype-trial-ledger small { color: #c9bea0; font-size: 0.65rem; text-align: right; }

@keyframes prototypeBraceFail {
  0% { transform: rotate(0deg); }
  45% { transform: rotate(6deg); }
  100% { transform: rotate(14deg); }
}

@keyframes prototypeLiftBind {
  0% { transform: translateY(0); }
  58% { transform: translateY(-46px); }
  72% { transform: translateY(-38px) rotate(0deg); }
  100% { transform: translateY(-30px) rotate(2deg); }
}

@keyframes prototypeLiftPass {
  0% { transform: translateY(0); }
  45% { transform: translateY(-82px); }
  100% { transform: translateY(0); }
}

@media (max-width: 860px) {
  .prototype-lift-stage { grid-template-columns: 174px minmax(0, 1fr); }
  .prototype-cycle-meter { grid-column: 1 / -1; }
  .prototype-component-grid { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  .prototype-hypotheses,
  .prototype-revisions,
  .prototype-lift-stage,
  .prototype-trial-ledger span { grid-template-columns: minmax(0, 1fr); }
  .prototype-hypotheses .forge-choice,
  .prototype-revision { min-height: 54px; }
  .prototype-shaft { justify-self: center; }
  .prototype-cycle-meter { grid-column: auto; }
  .prototype-trial-ledger small { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .prototype-shaft .brace,
  .prototype-shaft .platform,
  .prototype-cycle-meter i::after,
  .prototype-revision {
    animation: none !important;
    transition: none !important;
  }
}

.evaporation-chamber-mode {
  display: block;
}

.evaporation-chamber-lab {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgb(105 219 255 / 0.3);
  border-radius: 20px;
  background:
    radial-gradient(circle at 72% 18%, rgb(65 205 255 / 0.12), transparent 34%),
    linear-gradient(145deg, rgb(7 25 34 / 0.98), rgb(8 13 22 / 0.98));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 18px 42px rgb(0 0 0 / 0.28);
}

.evaporation-chamber-lab[data-state="revise"] {
  border-color: rgb(255 156 124 / 0.58);
}

.evaporation-chamber-lab[data-state="verify"],
.evaporation-chamber-lab[data-state="proved"] {
  border-color: rgb(155 255 203 / 0.52);
}

.evap-prediction-panel > span {
  display: block;
  margin-bottom: 8px;
  color: #aeeaff;
  font: 800 0.72rem/1.2 var(--font-sans, sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

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

.evap-prediction {
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgb(131 220 255 / 0.25);
  border-radius: 12px;
  color: #effbff;
  background: rgb(8 35 46 / 0.8);
  text-align: left;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.evap-prediction:hover:not(:disabled),
.evap-prediction:focus-visible {
  transform: translateY(-2px);
  border-color: #8de8ff;
  outline: 2px solid rgb(141 232 255 / 0.22);
  outline-offset: 2px;
}

.evap-prediction.selected {
  border-color: #f2cf70;
  background: linear-gradient(145deg, rgb(91 68 21 / 0.85), rgb(17 49 55 / 0.9));
  box-shadow: inset 0 0 18px rgb(242 207 112 / 0.1);
}

.evap-prediction.ruled-out {
  border-color: rgb(255 142 112 / 0.42);
  opacity: 0.58;
}

.evap-prediction b,
.evap-prediction small {
  display: block;
}

.evap-prediction b {
  margin-bottom: 3px;
  font-size: 0.9rem;
}

.evap-prediction small {
  color: rgb(219 241 246 / 0.7);
  font-size: 0.68rem;
}

.evap-capture-chamber {
  overflow: hidden;
  border: 1px solid rgb(134 229 255 / 0.25);
  border-radius: 18px;
  background: linear-gradient(180deg, rgb(12 39 51 / 0.88), rgb(5 18 28 / 0.95));
}

.evap-capture-chamber > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgb(126 225 255 / 0.18);
}

.evap-capture-chamber > header span,
.evap-capture-chamber > header b,
.evap-capture-chamber > header strong,
.evap-capture-chamber > header i {
  display: block;
}

.evap-capture-chamber > header span {
  color: #7bdfff;
  font: 800 0.68rem/1.2 var(--font-sans, sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.evap-capture-chamber > header b {
  margin-top: 3px;
  color: #f4fbff;
  font-size: 0.95rem;
}

.evap-capture-chamber > header strong {
  color: #f6d67c;
  font: 900 1.35rem/1 var(--font-display, serif);
  text-align: right;
}

.evap-capture-chamber > header strong i {
  margin-top: 3px;
  color: rgb(230 242 246 / 0.65);
  font: 700 0.62rem/1 var(--font-sans, sans-serif);
  text-transform: uppercase;
}

.evap-sensors {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  padding: 14px;
}

.evap-sensors article {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgb(125 222 255 / 0.2);
  border-radius: 14px;
  background: rgb(3 15 25 / 0.72);
}

.evap-sensors article > span,
.evap-sensors article > b {
  display: block;
}

.evap-sensors article > span {
  color: rgb(211 240 248 / 0.7);
  font: 800 0.64rem/1.2 var(--font-sans, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.evap-sensors article > b {
  margin: 5px 0 9px;
  color: #ecfbff;
  font-size: 1.2rem;
}

.evap-sensors article > b i {
  color: rgb(214 240 247 / 0.66);
  font-size: 0.64rem;
  font-style: normal;
  text-transform: uppercase;
}

.evap-sensors article > div {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  gap: 5px;
  min-height: 54px;
}

.evap-sensors article em {
  align-self: center;
  color: rgb(200 226 234 / 0.46);
  font-size: 0.68rem;
}

.evap-water-mark {
  width: 13px;
  height: 17px;
  border-radius: 55% 55% 60% 60% / 72% 72% 40% 40%;
  transform: rotate(45deg);
}

.evap-water-mark.liquid {
  background: linear-gradient(145deg, #b8f3ff, #158dc5 72%);
  box-shadow: 0 0 8px rgb(70 202 255 / 0.36);
}

.evap-water-mark.air {
  border: 1px dashed #d6f7ff;
  background: rgb(196 243 255 / 0.08);
  box-shadow: 0 0 10px rgb(183 239 255 / 0.2);
}

.evap-water-mark.latest {
  animation: evapSensorPing 460ms ease-out both;
}

.evap-transfer {
  position: relative;
  display: grid;
  place-content: center;
  gap: 5px;
  min-height: 118px;
  color: #f4cf72;
  text-align: center;
}

.evap-transfer i {
  width: 8px;
  height: 18px;
  margin: auto;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, #77dcff);
  animation: evapSensorRise 1.25s ease-in-out infinite;
}

.evap-transfer i:nth-child(2) { animation-delay: 160ms; }
.evap-transfer i:nth-child(3) { animation-delay: 320ms; }

.evap-transfer span {
  font: 800 0.6rem/1 var(--font-sans, sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.evap-total-check {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid rgb(122 223 255 / 0.16);
  color: #e8f8fc;
}

.evap-total-check span,
.evap-total-check small {
  color: rgb(210 238 245 / 0.62);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.evap-total-check b {
  color: #f6d77d;
  text-align: center;
}

.evap-primary {
  width: 100%;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid rgb(244 207 112 / 0.62);
  border-radius: 13px;
  color: #17120a;
  background: linear-gradient(180deg, #ffe69d, #dca83e);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.24);
}

.evap-primary:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.evap-primary b,
.evap-primary small {
  display: block;
}

.evap-primary b { font-size: 0.9rem; }
.evap-primary small { margin-top: 3px; font-size: 0.68rem; opacity: 0.72; }

.evap-primary.warm {
  border-color: rgb(119 226 255 / 0.58);
  color: #eafaff;
  background: linear-gradient(180deg, #176f8e, #0b4059);
}

.evap-primary.verify {
  border-color: rgb(142 255 191 / 0.6);
  color: #effff4;
  background: linear-gradient(180deg, #20825a, #10533a);
}

.evap-revision,
.evap-sealed {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 13px;
  border: 1px solid rgb(255 150 116 / 0.42);
  border-radius: 13px;
  color: #ffe8df;
  background: rgb(84 29 20 / 0.42);
}

.evap-sealed {
  border-color: rgb(136 255 186 / 0.42);
  color: #eafff1;
  background: rgb(16 78 51 / 0.42);
}

.evap-revision > span,
.evap-sealed > span {
  font-size: 1.4rem;
}

.evap-revision b,
.evap-revision small,
.evap-sealed b,
.evap-sealed small {
  display: block;
}

.evap-revision small,
.evap-sealed small {
  margin-top: 2px;
  color: currentColor;
  font-size: 0.68rem;
  opacity: 0.72;
}

.evap-trial-ledger {
  display: grid;
  gap: 6px;
}

.evap-trial-ledger span {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  padding: 8px 10px;
  border-left: 3px solid #ff9878;
  border-radius: 7px;
  color: #f4f8fa;
  background: rgb(255 255 255 / 0.035);
}

.evap-trial-ledger span.match { border-left-color: #80efae; }
.evap-trial-ledger small { color: rgb(220 239 244 / 0.68); text-align: right; }

.evap-proof-meter {
  padding: 12px;
  border: 1px solid rgb(112 222 255 / 0.22);
  border-radius: 14px;
  background: rgb(4 21 30 / 0.82);
}

.evap-proof-meter span,
.evap-proof-meter b {
  display: flex;
  justify-content: space-between;
  color: #dff8ff;
}

.evap-proof-meter b {
  margin-top: 4px;
  color: #f4d577;
}

.evap-proof-meter > i {
  display: block;
  width: var(--alchemy-progress);
  height: 4px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2fc7e7, #f2d06e);
  transition: width 240ms ease;
}

@keyframes evapSensorPing {
  0% { opacity: 0; transform: rotate(45deg) scale(0.45); }
  70% { opacity: 1; transform: rotate(45deg) scale(1.2); }
  100% { transform: rotate(45deg) scale(1); }
}

@keyframes evapSensorRise {
  0%, 100% { opacity: 0.25; transform: translateY(7px); }
  50% { opacity: 0.9; transform: translateY(-5px); }
}

@media (max-width: 720px) {
  .evap-prediction-panel > div { grid-template-columns: 1fr; }
  .evap-prediction { min-height: 54px; }
  .evap-sensors { grid-template-columns: 1fr; }
  .evap-transfer { grid-template-columns: repeat(3, 10px) 1fr; min-height: 48px; align-items: center; }
  .evap-transfer i { width: 18px; height: 7px; background: linear-gradient(90deg, transparent, #77dcff); }
  .evap-total-check { grid-template-columns: 1fr; text-align: center; }
  .evap-trial-ledger span { grid-template-columns: 1fr; }
  .evap-trial-ledger small { text-align: left; }
}

@media (max-width: 420px) {
  .evaporation-chamber-lab { padding: 8px; border-radius: 14px; }
  .evap-capture-chamber > header { align-items: flex-start; padding: 10px; }
  .evap-sensors { padding: 10px; }
  .evap-primary { min-height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .evap-prediction,
  .evap-proof-meter > i,
  .evap-water-mark.latest,
  .evap-transfer i {
    animation: none !important;
    transition: none !important;
  }
}

/* Room 20: model-repair audit */
.ai-oracle-lab[data-mode="model-repair"] {
  border-color: rgb(177 139 255 / 0.46);
  background: radial-gradient(circle at 85% 0%, rgb(153 103 255 / 0.14), transparent 30rem), linear-gradient(145deg, rgb(10 12 31 / 0.98), rgb(20 10 29 / 0.98));
}

.ai-oracle-lab[data-mode="model-repair"] .oracle-tiles,
.ai-oracle-lab[data-mode="model-repair"] .oracle-training-rig { display: grid; gap: 12px; }
.repair-baseline-panel,
.repair-step,
.repair-history { padding: 14px; border: 1px solid rgb(185 153 255 / 0.22); border-radius: 15px; background: linear-gradient(145deg, rgb(24 25 57 / 0.94), rgb(14 16 38 / 0.96)); }
.repair-baseline-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .4fr); gap: 12px; align-items: center; }
.repair-baseline-panel span,
.repair-step > span,
.repair-history-head span { color: #c7b2ff; font: 900 .66rem/1.2 "JetBrains Mono", Consolas, monospace; letter-spacing: .07em; text-transform: uppercase; }
.repair-baseline-panel h4,
.repair-step h4 { margin: 5px 0 4px; color: #fff7dd; font-size: 1rem; }
.repair-baseline-panel p { margin: 0; color: #bfc6df; }
.repair-baseline-panel button,
.repair-options button,
.repair-retest { min-height: 54px; padding: 10px 12px; border: 1px solid rgb(185 153 255 / .28); border-radius: 11px; color: #f5efff; background: linear-gradient(145deg, rgb(57 44 96 / .96), rgb(30 29 66 / .98)); text-align: left; cursor: pointer; }
.repair-baseline-panel button,
.repair-retest { display: grid; gap: 3px; place-content: center; text-align: center; }
.repair-baseline-panel small,
.repair-options small,
.repair-retest small { color: #b7b6d5; }
.repair-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.repair-case { display: grid; gap: 4px; min-width: 0; padding: 10px; border: 1px solid rgb(185 153 255 / .16); border-radius: 10px; background: rgb(9 12 31 / .72); }
.repair-case span { color: #c4cce2; font-size: .72rem; }
.repair-case b { color: #fff5d2; }
.repair-case small { color: #9ca7c2; }
.repair-case.error { border-color: rgb(255 129 107 / .46); background: rgb(75 26 39 / .42); }
.repair-case.error b,
.repair-trial.revised em { color: #ffc1b3; }
.repair-case.correct { border-color: rgb(144 247 184 / .24); }
.repair-step.locked { opacity: .52; }
.repair-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.repair-options.review { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.repair-options button { display: grid; gap: 4px; }
.repair-options button[aria-pressed="true"] { border-color: #c9b7ff; color: #111126; background: linear-gradient(135deg, #dfd3ff, #a58bec); }
.repair-options button[aria-pressed="true"] small { color: #39305c; }
.repair-options button.ruled-out { text-decoration: line-through; opacity: .58; background: rgb(64 25 38 / .56); }
.repair-baseline-panel button:disabled,
.repair-options button:disabled,
.repair-retest:disabled { cursor: not-allowed; opacity: .58; }
.repair-retest { width: 100%; margin-top: 10px; }
.repair-history-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.repair-history-head b { color: #fff5d2; }
.repair-trial { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 5px 9px; padding: 9px 10px; border-top: 1px solid rgb(185 153 255 / .14); }
.repair-trial span { color: #c7b2ff; font: 800 .66rem "JetBrains Mono", Consolas, monospace; text-transform: uppercase; }
.repair-trial b { color: #fff7df; }
.repair-trial small,
.repair-trial em { grid-column: 1 / -1; color: #b8c0d7; font-size: .7rem; font-style: normal; }
.repair-trial.passed em { color: #9effbd; }

@media (max-width: 700px) {
  .repair-baseline-panel { grid-template-columns: 1fr; }
  .repair-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .repair-options,
  .repair-options.review { grid-template-columns: 1fr; }
  .repair-baseline-panel button,
  .repair-options button,
  .repair-retest { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-oracle-lab[data-mode="model-repair"] button { transition: none !important; animation: none !important; }
}

/* Room 19: opposing-vector equilibrium gate */
.physics-launcher[data-mode="force-balance-vectors"] {
  border-color: rgb(114 216 244 / 0.56);
  background:
    radial-gradient(circle at 12% 0%, rgb(242 201 76 / 0.12), transparent 32%),
    radial-gradient(circle at 88% 12%, rgb(84 188 224 / 0.13), transparent 32%),
    linear-gradient(145deg, rgb(4 12 23 / 0.99), rgb(10 8 12 / 0.99));
}

.physics-launcher[data-mode="force-balance-vectors"] .launcher-controls,
.physics-launcher[data-mode="force-balance-vectors"] .launcher-stepper,
.physics-launcher[data-mode="force-balance-vectors"] .launcher-comet {
  display: none;
}

.physics-launcher[data-mode="force-balance-vectors"] .launcher-stage-frame {
  border-color: rgb(114 216 244 / 0.32);
  box-shadow: inset 0 0 34px rgb(85 183 217 / 0.06), 0 0 24px rgb(85 183 217 / 0.08);
}

.physics-launcher[data-mode="force-balance-vectors"] .launcher-stage-frame[data-state="left-winch"] {
  animation: balanceShiftRight 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.physics-launcher[data-mode="force-balance-vectors"] .launcher-stage-frame[data-state="right-winch"] {
  animation: balanceShiftLeft 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.physics-launcher[data-mode="force-balance-vectors"] .launcher-stage-frame[data-state="both-winches"],
.physics-launcher[data-mode="force-balance-vectors"] .launcher-stage-frame[data-state="hit"] {
  border-color: rgb(158 255 189 / 0.58);
  animation: balanceCenterSeal 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.physics-launcher[data-mode="force-balance-vectors"] .launcher-equation-board {
  padding: 0;
  overflow: hidden;
  border-color: rgb(114 216 244 / 0.28);
  background: rgb(0 0 0 / 0.2);
}

.physics-launcher[data-mode="force-balance-vectors"] .launcher-readout {
  display: block;
}

.balance-vector-lab {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.balance-prediction-panel,
.balance-calculate-panel,
.balance-check-panel {
  border: 1px solid rgb(126 222 246 / 0.2);
  border-radius: 15px;
  background: linear-gradient(145deg, rgb(12 28 47 / 0.92), rgb(8 16 29 / 0.94));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
}

.balance-prediction-panel,
.balance-calculate-panel,
.balance-check-panel {
  padding: 13px;
}

.balance-prediction-panel > span,
.balance-calculate-panel > div > span,
.balance-measure-head span,
.balance-trial-row > span {
  color: #91e5fb;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.balance-prediction-panel h4,
.balance-calculate-panel h4 {
  margin: 5px 0 3px;
  color: #fff8d8;
  font-size: 1.02rem;
  line-height: 1.25;
}

.balance-prediction-panel p,
.balance-calculate-panel p {
  margin: 0;
  color: #b8d3df;
  line-height: 1.48;
}

.balance-outcomes,
.balance-net-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}

.balance-outcome,
.balance-net-choice,
.balance-measure-card button,
.balance-check-panel > button {
  min-height: 56px;
  border: 1px solid rgb(126 222 246 / 0.26);
  border-radius: 12px;
  color: #eefaff;
  background: linear-gradient(155deg, rgb(23 51 78 / 0.96), rgb(13 28 48 / 0.98));
  cursor: pointer;
  transition: transform 170ms cubic-bezier(0.16, 1, 0.3, 1), border-color 170ms ease, box-shadow 170ms ease, background 170ms ease;
}

.balance-outcome,
.balance-net-choice {
  display: grid;
  gap: 4px;
  align-content: center;
  padding: 10px 11px;
  text-align: left;
}

.balance-outcome small,
.balance-net-choice small,
.balance-measure-card button small,
.balance-check-panel > button small {
  color: #a9c5d4;
}

.balance-outcome:hover:not(:disabled),
.balance-net-choice:hover:not(:disabled),
.balance-measure-card button:hover:not(:disabled),
.balance-check-panel > button:hover:not(:disabled),
.balance-outcome:focus-visible,
.balance-net-choice:focus-visible,
.balance-measure-card button:focus-visible,
.balance-check-panel > button:focus-visible {
  transform: translateY(-2px);
  border-color: #7de2fa;
  box-shadow: 0 0 0 3px rgb(105 216 244 / 0.13), 0 9px 20px rgb(0 0 0 / 0.22);
  outline: none;
}

.balance-outcome.selected,
.balance-net-choice.selected {
  border-color: #83e4f9;
  color: #06131c;
  background: linear-gradient(135deg, #b2efff, #65cae8);
  box-shadow: 0 0 18px rgb(90 202 234 / 0.22);
}

.balance-outcome.selected small,
.balance-net-choice.selected small {
  color: #183d4e;
}

.balance-outcome.ruled-out,
.balance-net-choice.ruled-out {
  border-color: rgb(255 137 119 / 0.3);
  color: #f0c1b9;
  background: rgb(64 25 31 / 0.58);
  text-decoration: line-through;
  opacity: 0.62;
}

.balance-outcome:disabled,
.balance-net-choice:disabled,
.balance-measure-card button:disabled,
.balance-check-panel > button:disabled {
  cursor: not-allowed;
  filter: saturate(0.55);
  opacity: 0.58;
}

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

.balance-measure-card {
  display: grid;
  grid-template-rows: auto minmax(108px, 1fr) auto;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgb(126 222 246 / 0.18);
  border-radius: 14px;
  background: linear-gradient(155deg, rgb(10 24 42 / 0.96), rgb(8 13 25 / 0.98));
}

.balance-measure-card.latest {
  border-color: rgb(126 222 246 / 0.64);
  box-shadow: 0 0 22px rgb(85 183 217 / 0.12);
}

.balance-measure-card.measured:last-child {
  border-color: rgb(158 255 189 / 0.5);
}

.balance-measure-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 7px;
  align-items: center;
}

.balance-measure-head b {
  color: #eff9ff;
  font-size: 0.78rem;
}

.balance-measure-head small {
  color: #9ab7c7;
  font-size: 0.67rem;
}

.balance-sensor-seal,
.balance-sensor-result {
  display: grid;
  gap: 5px;
  place-content: center;
  min-height: 108px;
  padding: 10px;
  border: 1px solid rgb(126 222 246 / 0.16);
  border-radius: 11px;
  text-align: center;
  background: rgb(3 10 20 / 0.58);
}

.balance-sensor-seal b {
  color: #829cac;
  font-size: 0.7rem;
  letter-spacing: 0.11em;
}

.balance-sensor-seal small,
.balance-sensor-result small {
  color: #a9c1ce;
  line-height: 1.38;
}

.balance-sensor-result span {
  color: #91e5fb;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 900;
}

.balance-sensor-result b {
  color: #fff8d8;
  font-size: 1.2rem;
}

.balance-measure-card.measured:last-child .balance-sensor-result b {
  color: #9effbd;
}

.balance-measure-card button {
  display: grid;
  gap: 3px;
  place-content: center;
  width: 100%;
}

.balance-calculate-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
  align-items: center;
}

.balance-signed-equation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 11px 0 8px;
  font-family: "JetBrains Mono", Consolas, monospace;
}

.balance-signed-equation b,
.balance-signed-equation strong,
.balance-signed-equation i {
  display: grid;
  min-height: 42px;
  min-width: 58px;
  place-items: center;
  border-radius: 9px;
  font-style: normal;
}

.balance-signed-equation b {
  border: 1px solid rgb(126 222 246 / 0.24);
  color: #dff8ff;
  background: rgb(85 183 217 / 0.08);
}

.balance-signed-equation i {
  min-width: 26px;
  color: #a9c3d0;
}

.balance-signed-equation strong {
  border: 1px solid rgb(242 201 76 / 0.36);
  color: #f8dd7f;
  background: rgb(242 201 76 / 0.08);
}

.balance-net-options {
  margin-top: 0;
}

.balance-check-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
  align-items: stretch;
}

.balance-trial-ledger {
  display: grid;
  gap: 6px;
}

.balance-trial-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgb(255 145 126 / 0.2);
  border-radius: 9px;
  background: rgb(255 121 98 / 0.05);
}

.balance-trial-row small,
.balance-trial-row em {
  grid-column: 1 / -1;
}

.balance-trial-row.passed {
  border-color: rgb(158 255 189 / 0.34);
  background: rgb(158 255 189 / 0.05);
}

.balance-trial-row.empty {
  border-color: rgb(126 222 246 / 0.15);
  background: rgb(126 222 246 / 0.03);
}

.balance-trial-row b { color: #fff8d8; font-size: 0.74rem; }
.balance-trial-row small { color: #b4ccd8; font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.67rem; }
.balance-trial-row em { color: #ffc2b4; font-size: 0.67rem; font-style: normal; font-weight: 900; }
.balance-trial-row.passed em { color: #9effbd; }

.balance-check-panel > button {
  display: grid;
  gap: 4px;
  place-content: center;
  width: 100%;
  min-height: 100%;
  padding: 12px;
  text-align: center;
  background: linear-gradient(145deg, rgb(32 75 99 / 0.98), rgb(17 43 68 / 0.98));
}

.balance-control-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.balance-control-strip span {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid rgb(126 222 246 / 0.15);
  border-radius: 9px;
  background: rgb(12 31 48 / 0.64);
}

.balance-control-strip small { color: #92afbf; }
.balance-control-strip b { color: #e8f8ff; font-size: 0.75rem; }

@keyframes balanceShiftRight {
  0% { transform: translateX(0); filter: brightness(0.92); }
  60% { transform: translateX(5px); filter: brightness(1.12); }
  100% { transform: translateX(0); filter: brightness(1); }
}

@keyframes balanceShiftLeft {
  0% { transform: translateX(0); filter: brightness(0.92); }
  60% { transform: translateX(-5px); filter: brightness(1.12); }
  100% { transform: translateX(0); filter: brightness(1); }
}

@keyframes balanceCenterSeal {
  0% { box-shadow: inset 0 0 0 rgb(158 255 189 / 0); }
  55% { box-shadow: inset 0 0 38px rgb(158 255 189 / 0.16), 0 0 26px rgb(158 255 189 / 0.14); }
  100% { box-shadow: inset 0 0 14px rgb(158 255 189 / 0.06), 0 0 18px rgb(158 255 189 / 0.08); }
}

@media (max-width: 840px) {
  .balance-measure-grid { grid-template-columns: 1fr; }
  .balance-measure-card { grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .balance-measure-head { grid-column: 1 / -1; }
  .balance-calculate-panel,
  .balance-check-panel { grid-template-columns: 1fr; }
  .balance-check-panel > button { min-height: 58px; }
  .balance-trial-row { grid-template-columns: 60px minmax(0, 1fr); }
  .balance-trial-row small,
  .balance-trial-row em { grid-column: 1 / -1; }
}

@media (max-width: 580px) {
  .balance-outcomes,
  .balance-net-options { grid-template-columns: 1fr; }
  .balance-measure-card { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .balance-measure-head { grid-column: auto; }
  .balance-control-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .balance-outcome,
  .balance-net-choice,
  .balance-measure-card button,
  .balance-check-panel > button { min-height: 52px; }
  .balance-signed-equation { gap: 5px; }
  .balance-signed-equation b,
  .balance-signed-equation strong { min-width: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .physics-launcher[data-mode="force-balance-vectors"] .launcher-stage-frame,
  .balance-outcome,
  .balance-net-choice,
  .balance-measure-card button,
  .balance-check-panel > button {
    animation: none !important;
    transition: none !important;
  }
}

/* Room 18: controlled particle-motion observatory */
.science-alchemy-lab[data-mode="particle-motion"] {
  border-color: rgb(105 213 255 / 0.42);
  background:
    radial-gradient(circle at 84% 10%, rgb(255 129 84 / 0.14), transparent 23rem),
    radial-gradient(circle at 12% 28%, rgb(71 179 255 / 0.14), transparent 22rem),
    linear-gradient(145deg, rgb(9 17 35 / 0.98), rgb(19 13 32 / 0.98));
}

.alchemy-vials.particle-motion-mode {
  display: block;
}

.particle-motion-lab {
  display: grid;
  gap: 14px;
}

.particle-prediction-panel,
.particle-proof-panel,
.particle-scan-card {
  border: 1px solid rgb(136 210 255 / 0.2);
  border-radius: 18px;
  background: linear-gradient(145deg, rgb(12 25 46 / 0.94), rgb(10 16 31 / 0.96));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 12px 26px rgb(0 0 0 / 0.2);
}

.particle-prediction-panel {
  padding: 16px;
}

.particle-prediction-panel h4 {
  margin: 5px 0 4px;
  color: #f8fbff;
  font-size: clamp(1.08rem, 2.6vw, 1.42rem);
}

.particle-prediction-panel > p,
.particle-proof-panel p {
  margin: 0;
  color: #b9cce4;
  line-height: 1.5;
}

.particle-predictions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 13px;
}

.particle-prediction,
.particle-scan-card button,
.particle-check {
  min-height: 58px;
  border: 1px solid rgb(126 202 245 / 0.25);
  border-radius: 13px;
  color: #eff9ff;
  background: linear-gradient(155deg, rgb(22 48 77 / 0.94), rgb(15 28 51 / 0.96));
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.particle-prediction {
  display: grid;
  gap: 4px;
  align-content: center;
  padding: 11px 12px;
  text-align: left;
}

.particle-prediction small,
.particle-scan-card button small,
.particle-check small {
  color: #a8bed7;
}

.particle-prediction:hover:not(:disabled),
.particle-prediction:focus-visible,
.particle-scan-card button:hover:not(:disabled),
.particle-scan-card button:focus-visible,
.particle-check:hover:not(:disabled),
.particle-check:focus-visible {
  transform: translateY(-2px);
  border-color: #79dbff;
  box-shadow: 0 0 0 3px rgb(83 201 255 / 0.14), 0 10px 22px rgb(0 0 0 / 0.24);
  outline: none;
}

.particle-prediction.selected {
  border-color: #73d9ff;
  color: #06121c;
  background: linear-gradient(135deg, #9be9ff, #58caff);
  box-shadow: 0 0 22px rgb(78 198 255 / 0.25);
}

.particle-prediction.selected small {
  color: #123548;
}

.particle-prediction.ruled-out {
  border-color: rgb(255 128 112 / 0.32);
  background: rgb(58 24 31 / 0.58);
  text-decoration: line-through;
  opacity: 0.62;
}

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

.particle-scan-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 132px 1fr;
  gap: 10px;
  padding: 14px;
}

.particle-scan-card.cool { --particle-glow: 92 194 255; }
.particle-scan-card.warm { --particle-glow: 255 139 83; }

.particle-scan-card.latest {
  border-color: rgb(var(--particle-glow) / 0.72);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 0 26px rgb(var(--particle-glow) / 0.15);
}

.particle-scan-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
}

.particle-scan-head span,
.particle-scan-head small {
  padding: 4px 7px;
  border-radius: 999px;
  color: rgb(var(--particle-glow));
  background: rgb(var(--particle-glow) / 0.1);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.particle-scan-vessel,
.particle-vessel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(var(--particle-glow, 103 205 255) / 0.38);
  border-radius: 50% 50% 24% 24% / 24% 24% 18% 18%;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 0.12), transparent 26%),
    radial-gradient(circle at 50% 70%, rgb(var(--particle-glow, 103 205 255) / 0.18), transparent 64%),
    rgb(5 12 25 / 0.86);
  box-shadow: inset 0 0 24px rgb(var(--particle-glow, 103 205 255) / 0.08);
}

.particle-scan-vessel {
  min-height: 132px;
}

.particle-scan-vessel.sealed::after {
  content: "SENSOR SEALED";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #8096ad;
  background: linear-gradient(135deg, rgb(7 14 28 / 0.86), rgb(19 25 41 / 0.9));
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.particle-scan-vessel span,
.particle-dots {
  position: absolute;
  inset: 12px;
}

.particle-scan-vessel i,
.particle-dots i {
  position: absolute;
  left: var(--particle-x);
  top: var(--particle-y);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--particle-glow, 103 205 255));
  box-shadow: 0 0 10px rgb(var(--particle-glow, 103 205 255) / 0.8);
  animation: particleDriftCool 2.4s ease-in-out infinite alternate;
  animation-delay: var(--particle-delay);
}

.particle-scan-vessel.warm i,
.particle-vessel.warm i {
  animation-name: particleDriftWarm;
  animation-duration: 1.05s;
}

.particle-scan-vessel em {
  position: absolute;
  inset: auto 14% 8px;
  height: 3px;
  border-radius: 999px;
  background: rgb(var(--particle-glow) / 0.34);
  box-shadow: 0 0 14px rgb(var(--particle-glow) / 0.4);
}

.particle-scan-result {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 10px 11px;
  border: 1px solid rgb(var(--particle-glow) / 0.28);
  border-radius: 12px;
  color: #dceeff;
  background: rgb(var(--particle-glow) / 0.07);
}

.particle-scan-result span {
  color: rgb(var(--particle-glow));
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.particle-scan-result small {
  color: #aebfd1;
  line-height: 1.42;
}

.particle-scan-card button {
  display: grid;
  gap: 3px;
  place-content: center;
  width: 100%;
}

.particle-scan-card button:disabled,
.particle-prediction:disabled,
.particle-check:disabled {
  cursor: not-allowed;
  filter: saturate(0.5);
  opacity: 0.56;
}

.particle-proof-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.35fr);
  gap: 14px;
  align-items: stretch;
  padding: 16px;
}

.particle-compare-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}

.particle-compare-metrics span {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  padding: 9px 11px;
  border: 1px solid rgb(121 218 255 / 0.22);
  border-radius: 11px;
  background: rgb(72 170 217 / 0.07);
}

.particle-compare-metrics small { grid-column: 1 / -1; color: #91aac3; }
.particle-compare-metrics b { color: #effaff; }
.particle-compare-metrics em { color: #8ff0b6; font-style: normal; font-weight: 950; }
.particle-compare-metrics.locked { grid-template-columns: 1fr; opacity: 0.66; }

.particle-trial-ledger {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.particle-trial-ledger span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px 10px;
  border-left: 3px solid #ff9584;
  border-radius: 8px;
  background: rgb(255 120 100 / 0.07);
}

.particle-trial-ledger span.match { border-left-color: #83eca9; background: rgb(89 218 137 / 0.08); }
.particle-trial-ledger small { color: #aec0d2; text-align: right; }

.particle-check {
  display: grid;
  gap: 5px;
  place-content: center;
  width: 100%;
  min-height: 100%;
  padding: 14px;
  text-align: center;
  background: linear-gradient(145deg, rgb(32 72 100 / 0.98), rgb(20 44 72 / 0.98));
}

.particle-check.locked {
  cursor: default;
}

.particle-observation-stage {
  display: grid;
  grid-template-columns: 150px 1fr minmax(150px, 0.44fr);
  gap: 14px;
  align-items: center;
  min-height: 174px;
  padding: 14px;
  border: 1px solid rgb(110 210 255 / 0.22);
  border-radius: 16px;
  background: linear-gradient(135deg, rgb(8 21 40 / 0.92), rgb(19 13 32 / 0.94));
}

.particle-vessel {
  --particle-glow: 98 199 255;
  width: 140px;
  height: 140px;
}

.particle-vessel.warm { --particle-glow: 255 139 83; }

.particle-vessel-glass {
  position: absolute;
  inset: 8px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: inherit;
}

.particle-heat-coil {
  position: absolute;
  inset: auto 18% 8px;
  height: 5px;
  border-radius: 999px;
  background: rgb(var(--particle-glow) / 0.5);
  box-shadow: 0 0 18px rgb(var(--particle-glow) / 0.65);
}

.particle-stage-copy {
  display: grid;
  gap: 4px;
}

.particle-stage-copy span { color: #7fdcff; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.particle-stage-copy b { color: #f5fbff; font-size: clamp(1.1rem, 2.5vw, 1.55rem); }
.particle-stage-copy small { color: #a9bdd1; line-height: 1.45; }

.particle-control-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.particle-control-strip span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgb(117 208 255 / 0.16);
  border-radius: 10px;
  background: rgb(20 43 65 / 0.62);
}

.particle-control-strip small { color: #90a9bf; }
.particle-control-strip b { color: #e7f6ff; }

@keyframes particleDriftCool {
  0% { transform: translate(-8px, -5px) scale(0.92); }
  50% { transform: translate(5px, 8px) scale(1); }
  100% { transform: translate(10px, -7px) scale(0.96); }
}

@keyframes particleDriftWarm {
  0% { transform: translate(-15px, -11px) scale(0.9); }
  35% { transform: translate(14px, 10px) scale(1.08); }
  70% { transform: translate(-10px, 16px) scale(0.96); }
  100% { transform: translate(18px, -14px) scale(1.05); }
}

@media (max-width: 820px) {
  .particle-predictions { grid-template-columns: 1fr; }
  .particle-proof-panel { grid-template-columns: 1fr; }
  .particle-check { min-height: 62px; }
  .particle-observation-stage { grid-template-columns: 118px 1fr; }
  .particle-observation-stage > .alchemy-progress { grid-column: 1 / -1; }
  .particle-vessel { width: 108px; height: 108px; }
}

@media (max-width: 560px) {
  .particle-scan-grid { grid-template-columns: 1fr; }
  .particle-scan-card { grid-template-rows: auto 118px 1fr; }
  .particle-prediction,
  .particle-scan-card button,
  .particle-check { min-height: 52px; }
  .particle-compare-metrics { grid-template-columns: 1fr; }
  .particle-observation-stage { grid-template-columns: 86px 1fr; padding: 10px; }
  .particle-vessel { width: 80px; height: 80px; }
  .particle-control-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .particle-trial-ledger span { grid-template-columns: 1fr; }
  .particle-trial-ledger small { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .particle-scan-vessel i,
  .particle-dots i,
  .particle-prediction,
  .particle-scan-card button,
  .particle-check {
    animation: none !important;
    transition: none !important;
  }
}

/* Week 2 Arc Chart: prediction -> hidden launch -> evidence -> revision. */
.physics-launcher[data-mode="projectile-arc"] {
  border-color: rgb(104 205 235 / 0.56);
  background:
    radial-gradient(circle at 16% 10%, rgb(242 201 76 / 0.12), transparent 32%),
    radial-gradient(circle at 84% 20%, rgb(85 183 217 / 0.18), transparent 42%),
    linear-gradient(145deg, rgb(4 14 20 / 0.98), rgb(8 6 5 / 0.98));
}

.physics-launcher[data-mode="projectile-arc"] .launcher-stage-frame {
  border-color: rgb(104 205 235 / 0.34);
  box-shadow: inset 0 0 38px rgb(85 183 217 / 0.05), 0 0 28px rgb(85 183 217 / 0.1);
}

.physics-launcher[data-mode="projectile-arc"] .launcher-stage-frame[data-state="miss"] {
  animation: arcEvidencePulse 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.physics-launcher[data-mode="projectile-arc"] .launcher-stage-frame[data-state="hit"] {
  border-color: rgb(158 255 189 / 0.64);
  animation: arcTargetSeal 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.physics-launcher[data-mode="projectile-arc"] .launcher-button {
  border-color: rgb(126 222 246 / 0.72);
  color: #061118;
  background: linear-gradient(180deg, #c9f5ff, #63bfdc);
}

.arc-prediction-panel {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgb(126 222 246 / 0.3);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(85 183 217 / 0.1), rgb(85 183 217 / 0.025)),
    rgb(0 0 0 / 0.24);
}

.arc-step-heading,
.arc-trial-ledger-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  color: #dff8ff;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.arc-step-heading b,
.arc-trial-ledger-head b {
  color: #fff0ad;
  text-align: right;
}

.arc-prediction-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.arc-prediction-options button {
  min-height: 46px;
  padding: 8px 9px;
  border: 1px solid rgb(126 222 246 / 0.32);
  border-radius: 8px;
  color: #dff8ff;
  background: rgb(5 14 20 / 0.86);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.arc-prediction-options button:hover:not(:disabled) {
  border-color: rgb(242 201 76 / 0.72);
  transform: translateY(-1px);
}

.arc-prediction-options button[aria-pressed="true"] {
  border-color: #f2c94c;
  color: #100c05;
  background: linear-gradient(180deg, #ffe991, #c8942c);
  box-shadow: 0 0 20px rgb(242 201 76 / 0.16);
}

.arc-prediction-options button:focus-visible {
  outline: 3px solid #9ee8ff;
  outline-offset: 2px;
}

.arc-prediction-panel p {
  margin: 0;
  color: #bcdce4;
  font-size: 0.76rem;
  line-height: 1.35;
}

.arc-trial-ledger {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding-top: 2px;
}

.arc-trial-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 0.9fr) minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgb(255 179 108 / 0.26);
  border-radius: 7px;
  color: #d9edf0;
  background: rgb(255 179 108 / 0.05);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.64rem;
}

.arc-trial-row span {
  color: #9ee8ff;
  font-weight: 900;
  text-transform: uppercase;
}

.arc-trial-row b {
  color: #fff4c6;
}

.arc-trial-row b,
.arc-trial-row small,
.arc-trial-row em {
  min-width: 0;
  overflow-wrap: break-word;
}

.arc-trial-row small {
  color: #bcdce4;
}

.arc-trial-row em {
  color: #ffb36c;
  font-style: normal;
  font-weight: 900;
}

.arc-trial-row.passed {
  border-color: rgb(158 255 189 / 0.4);
  background: rgb(158 255 189 / 0.06);
}

.arc-trial-row.passed em {
  color: #9effbd;
}

@keyframes arcEvidencePulse {
  0% { transform: scale(0.995); filter: brightness(0.85); }
  58% { transform: scale(1.003); filter: brightness(1.2); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes arcTargetSeal {
  0% { transform: scale(0.994); box-shadow: inset 0 0 0 rgb(158 255 189 / 0); }
  55% { transform: scale(1.004); box-shadow: inset 0 0 48px rgb(158 255 189 / 0.15), 0 0 34px rgb(158 255 189 / 0.18); }
  100% { transform: scale(1); box-shadow: inset 0 0 38px rgb(158 255 189 / 0.06), 0 0 28px rgb(158 255 189 / 0.12); }
}

@media (max-width: 720px) {
  .arc-prediction-options {
    grid-template-columns: 1fr;
  }

  .arc-prediction-options button {
    min-height: 50px;
  }

  .arc-trial-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .arc-trial-row small,
  .arc-trial-row em {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .physics-launcher[data-mode="projectile-arc"] .launcher-stage-frame,
  .arc-prediction-options button {
    animation: none !important;
    transition: none !important;
  }
}

/* Week 3 Motion Route: prediction -> equal-time measurements -> evidence revision. */
.physics-launcher[data-mode="speed-trial"] {
  border-color: rgb(126 222 246 / 0.6);
  background:
    radial-gradient(circle at 8% 0%, rgb(242 201 76 / 0.16), transparent 34%),
    radial-gradient(circle at 92% 18%, rgb(85 183 217 / 0.2), transparent 42%),
    linear-gradient(145deg, rgb(4 15 21 / 0.99), rgb(9 7 5 / 0.99));
}

.physics-launcher[data-mode="speed-trial"] .launcher-stage-frame,
.physics-launcher[data-mode="speed-trial"] .launcher-controls,
.physics-launcher[data-mode="speed-trial"] .launcher-stepper {
  display: none;
}

.physics-launcher[data-mode="speed-trial"] .launcher-equation-board {
  padding: 0;
  border-color: rgb(126 222 246 / 0.34);
  background: rgb(0 0 0 / 0.2);
  overflow: hidden;
}

.physics-launcher[data-mode="speed-trial"] .launcher-head strong {
  border-color: rgb(126 222 246 / 0.58);
  color: #dff8ff;
  font-size: 0.68rem;
}

.speed-checkpoint-lab {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.speed-prediction-panel,
.speed-measurement-panel,
.speed-check-panel,
.speed-trial-ledger {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgb(126 222 246 / 0.26);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgb(85 183 217 / 0.09), rgb(85 183 217 / 0.02)),
    rgb(0 0 0 / 0.3);
}

.speed-step-heading,
.speed-trial-ledger-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
}

.speed-step-heading > div {
  display: grid;
  gap: 3px;
}

.speed-step-heading span,
.speed-check-panel span,
.speed-trial-ledger-head span,
.speed-route-hud span,
.speed-reading-card > span,
.speed-trial-row > span {
  color: #9ee8ff;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.speed-step-heading b,
.speed-check-panel b,
.speed-trial-ledger-head b {
  color: #fff8d8;
  font-family: Cinzel, Georgia, serif;
  line-height: 1.16;
}

.speed-step-heading small,
.speed-check-panel small {
  max-width: 300px;
  color: #bddde2;
  line-height: 1.3;
  text-align: right;
}

.speed-prediction-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.speed-prediction-options button,
.speed-reading-card button,
.speed-check-panel button {
  min-height: 48px;
  border: 1px solid rgb(126 222 246 / 0.38);
  border-radius: 9px;
  color: #e7faff;
  background:
    linear-gradient(180deg, rgb(85 183 217 / 0.16), rgb(85 183 217 / 0.04)),
    #050a0c;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 4px 0 rgb(0 0 0 / 0.38);
  cursor: pointer;
  font-weight: 900;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.speed-prediction-options button {
  display: grid;
  gap: 4px;
  align-content: center;
  padding: 9px;
  text-align: left;
}

.speed-prediction-options button small {
  color: #94b9bf;
  font-size: 0.66rem;
  font-weight: 700;
}

.speed-prediction-options button:hover:not(:disabled),
.speed-prediction-options button:focus-visible,
.speed-reading-card button:hover:not(:disabled),
.speed-reading-card button:focus-visible,
.speed-check-panel button:hover:not(:disabled),
.speed-check-panel button:focus-visible {
  border-color: #9ee8ff;
  transform: translateY(-2px);
}

.speed-prediction-options button[aria-pressed="true"] {
  border-color: #f2c94c;
  color: #fff8d8;
  background:
    radial-gradient(circle at 12% 8%, rgb(242 201 76 / 0.2), transparent 48%),
    #0c1112;
  box-shadow: inset 0 0 0 1px rgb(242 201 76 / 0.22), 0 4px 0 rgb(0 0 0 / 0.4);
}

.speed-prediction-options button:disabled,
.speed-reading-card button:disabled,
.speed-check-panel button:disabled {
  cursor: default;
  opacity: 0.48;
  transform: none;
}

.speed-route-stage {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgb(6 21 29 / 0.84), rgb(5 6 6 / 0.96)),
    repeating-linear-gradient(90deg, transparent 0 39px, rgb(126 222 246 / 0.05) 40px);
  box-shadow: inset 0 0 36px rgb(85 183 217 / 0.06);
}

.speed-route-hud {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 8px;
}

.speed-route-hud > div {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border-left: 2px solid rgb(126 222 246 / 0.52);
  background: rgb(126 222 246 / 0.04);
}

.speed-route-hud b {
  color: #fff8d8;
  font-size: 0.78rem;
  line-height: 1.25;
}

.speed-route-track {
  position: relative;
  min-height: 126px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, transparent 0 58%, rgb(126 222 246 / 0.09) 59% 61%, transparent 62%),
    linear-gradient(180deg, transparent 0 72%, rgb(242 201 76 / 0.34) 73% 76%, #130d07 77% 86%, rgb(242 201 76 / 0.28) 87% 89%, transparent 90%);
  overflow: hidden;
}

.speed-route-track::before {
  content: "MOTION ROUTE · SENSOR GRID";
  position: absolute;
  left: 10px;
  top: 10px;
  color: rgb(158 232 255 / 0.42);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.speed-route-energy {
  position: absolute;
  left: 0;
  bottom: 25px;
  width: var(--route-charge);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #55b7d9, #f2c94c);
  box-shadow: 0 0 12px rgb(126 222 246 / 0.66);
  transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.speed-cart {
  position: absolute;
  left: var(--cart-position);
  bottom: 31px;
  width: 74px;
  height: 34px;
  border: 2px solid #f2c94c;
  border-radius: 6px 9px 4px 4px;
  background:
    linear-gradient(135deg, transparent 0 26%, rgb(158 232 255 / 0.18) 27% 48%, transparent 49%),
    linear-gradient(180deg, #17313a, #081116);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 0 16px rgb(85 183 217 / 0.18);
  transform: translateX(-50%);
  transition: left 520ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}

.speed-cart::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 6px;
  width: 14px;
  height: 18px;
  border: 1px solid #f2c94c;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  background: #0c1c22;
}

.speed-cart i {
  position: absolute;
  bottom: -9px;
  width: 13px;
  height: 13px;
  border: 3px solid #071014;
  border-radius: 50%;
  background: #9ee8ff;
  box-shadow: 0 0 0 1px rgb(242 201 76 / 0.56);
}

.speed-cart i:nth-child(1) { left: 10px; }
.speed-cart i:nth-child(2) { right: 10px; }
.speed-cart i:nth-child(3) { display: none; }

.speed-cart span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff8d8;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.53rem;
  font-weight: 900;
}

.speed-cart.advanced {
  animation: speedCartAdvance 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.speed-track-marker {
  position: absolute;
  left: var(--marker-position);
  top: 31px;
  bottom: 20px;
  width: 1px;
  border-left: 1px dashed rgb(158 232 255 / 0.24);
  transform: translateX(-50%);
}

.speed-track-marker i {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 12px;
  height: 12px;
  border: 2px solid rgb(158 232 255 / 0.42);
  border-radius: 50%;
  background: #071014;
  transform: translateX(-50%);
}

.speed-track-marker span {
  position: absolute;
  left: 50%;
  top: 13px;
  color: #94b9bf;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 900;
  white-space: nowrap;
  transform: translateX(-50%);
}

.speed-track-marker.measured i {
  border-color: #f2c94c;
  background: #f2c94c;
  box-shadow: 0 0 14px rgb(242 201 76 / 0.62);
}

.speed-track-marker.measured span { color: #fff8d8; }

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

.speed-reading-card {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgb(126 222 246 / 0.2);
  border-radius: 9px;
  background: rgb(255 255 255 / 0.025);
}

.speed-reading-card > b {
  display: flex;
  gap: 5px;
  align-items: baseline;
  color: #fff8d8;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1;
}

.speed-reading-card > b small {
  color: #9ee8ff;
  font-size: 0.68rem;
}

.speed-reading-card.hidden-reading > b {
  color: rgb(255 248 216 / 0.28);
}

.speed-reading-card.revealed {
  border-color: rgb(242 201 76 / 0.38);
  background: rgb(242 201 76 / 0.045);
}

.speed-reading-card.just-measured {
  animation: speedReadingReveal 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.speed-meter {
  height: 7px;
  border: 1px solid rgb(126 222 246 / 0.22);
  border-radius: 999px;
  background: #050a0c;
  overflow: hidden;
}

.speed-meter i {
  display: block;
  width: var(--speed-level);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #55b7d9, #f2c94c);
  box-shadow: 0 0 10px rgb(126 222 246 / 0.48);
  transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.speed-reading-card button {
  margin-top: auto;
  padding: 8px;
  font-size: 0.72rem;
}

.speed-check-panel {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.34fr);
  align-items: center;
  border-color: rgb(242 201 76 / 0.3);
}

.speed-check-panel > div {
  display: grid;
  gap: 4px;
}

.speed-check-panel small {
  max-width: none;
  text-align: left;
}

.speed-check-panel button {
  color: #100d07;
  background: linear-gradient(180deg, #f7d96d, #b98522);
  border-color: rgb(242 201 76 / 0.74);
}

.speed-trial-ledger {
  gap: 7px;
}

.speed-trial-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) minmax(100px, 0.7fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-left: 3px solid #ffb36c;
  background: rgb(255 179 108 / 0.05);
}

.speed-trial-row.passed {
  border-left-color: #9effbd;
  background: rgb(158 255 189 / 0.05);
}

.speed-trial-row b { color: #fff8d8; font-size: 0.75rem; }
.speed-trial-row small { color: #bddde2; font-family: "JetBrains Mono", Consolas, monospace; }
.speed-trial-row em { color: #ffcf9c; font-size: 0.68rem; font-style: normal; font-weight: 900; }
.speed-trial-row.passed em { color: #9effbd; }

@keyframes speedCartAdvance {
  0% { filter: drop-shadow(-18px 0 7px rgb(126 222 246 / 0.18)); transform: translateX(-50%) scale(0.96); }
  58% { filter: drop-shadow(-8px 0 10px rgb(126 222 246 / 0.5)); transform: translateX(-50%) scale(1.04); }
  100% { filter: none; transform: translateX(-50%) scale(1); }
}

@keyframes speedReadingReveal {
  0% { box-shadow: 0 0 0 rgb(242 201 76 / 0); transform: translateY(4px) scale(0.98); }
  48% { box-shadow: 0 0 24px rgb(242 201 76 / 0.24); transform: translateY(-2px) scale(1.02); }
  100% { box-shadow: 0 0 0 rgb(242 201 76 / 0); transform: none; }
}

@media (max-width: 720px) {
  .speed-step-heading,
  .speed-trial-ledger-head {
    align-items: start;
    flex-direction: column;
  }

  .speed-step-heading small {
    max-width: none;
    text-align: left;
  }

  .speed-prediction-options,
  .speed-reading-grid,
  .speed-route-hud,
  .speed-check-panel {
    grid-template-columns: 1fr;
  }

  .speed-prediction-options button { text-align: center; }

  .speed-route-track { min-height: 118px; }

  .speed-trial-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .speed-trial-row small,
  .speed-trial-row em { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .speed-cart,
  .speed-cart.advanced,
  .speed-reading-card.just-measured,
  .speed-meter i,
  .speed-route-energy,
  .speed-prediction-options button,
  .speed-reading-card button,
  .speed-check-panel button {
    animation: none !important;
    transition: none !important;
  }
}

/* Week 3 Tower Anchor: controlled equal-wind stability laboratory. */
.engineering-forge-lab[data-mode="tower-stability"] {
  border-color: rgb(255 179 108 / 0.64);
  background:
    radial-gradient(circle at 12% 8%, rgb(242 201 76 / 0.18), transparent 34%),
    radial-gradient(circle at 88% 14%, rgb(85 183 217 / 0.18), transparent 38%),
    linear-gradient(145deg, rgb(18 10 6 / 0.98), rgb(5 12 17 / 0.98));
}

.engineering-forge-lab[data-mode="tower-stability"] :is(.forge-test-button, .forge-reset-button) {
  min-height: 48px;
}

.tower-hypothesis-panel,
.tower-anchor-lab,
.tower-anchor-check {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.tower-hypothesis-panel {
  padding: 12px;
  border: 1px solid rgb(255 179 108 / 0.3);
  border-radius: 11px;
  background: rgb(8 5 3 / 0.72);
}

.tower-hypothesis-panel h4,
.tower-anchor-check h4 {
  margin: 0;
  color: #fff4c6;
  font: 800 0.9rem/1.2 Cinzel, Georgia, serif;
}

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

.tower-hypotheses .forge-choice {
  min-height: 72px;
}

.tower-anchor-lab {
  padding: 12px;
  border: 1px solid rgb(85 183 217 / 0.26);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgb(6 20 27 / 0.88), rgb(8 5 3 / 0.94));
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.tower-wind-stage {
  position: relative;
  min-height: 116px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.34fr);
  gap: 14px;
  align-items: center;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgb(85 183 217 / 0.34);
  border-radius: 11px;
  background:
    radial-gradient(ellipse at 84% 35%, rgb(85 183 217 / 0.18), transparent 46%),
    linear-gradient(135deg, rgb(6 25 34 / 0.94), rgb(10 7 4 / 0.96));
}

.tower-wind-stage > div:not(.wind-gusts) {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.tower-wind-stage span,
.tower-wind-stage b,
.tower-wind-stage small,
.tower-control-condition span,
.tower-control-condition b,
.tower-control-condition small,
.tower-anchor-spec span,
.tower-anchor-spec b,
.tower-anchor-spec small,
.tower-anchor-observation strong,
.tower-anchor-observation b,
.tower-anchor-observation p,
.tower-anchor-trials b,
.tower-anchor-trials small {
  display: block;
}

.tower-wind-stage span,
.tower-control-condition span,
.tower-anchor-spec span {
  color: #9de9ff;
  font: 900 0.62rem/1.1 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tower-wind-stage b {
  margin-top: 4px;
  color: #fff4c6;
  font: 900 clamp(1rem, 2vw, 1.34rem)/1.08 Cinzel, Georgia, serif;
}

.tower-wind-stage small {
  margin-top: 5px;
  color: #d2eaf1;
  font-size: 0.72rem;
}

.wind-gusts {
  position: absolute;
  inset: 8px;
  pointer-events: none;
}

.wind-gusts i {
  position: absolute;
  right: -18%;
  width: 42%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(157 233 255 / 0.72), transparent);
  opacity: 0.25;
}

.wind-gusts i:nth-child(1) { top: 18%; animation-delay: 0ms; }
.wind-gusts i:nth-child(2) { top: 34%; width: 56%; animation-delay: 140ms; }
.wind-gusts i:nth-child(3) { top: 51%; animation-delay: 280ms; }
.wind-gusts i:nth-child(4) { top: 68%; width: 62%; animation-delay: 420ms; }
.wind-gusts i:nth-child(5) { top: 83%; animation-delay: 560ms; }

.tower-anchor-lab[data-state="testing"] .wind-gusts i,
.tower-anchor-lab[data-state="compare"] .wind-gusts i,
.tower-anchor-lab[data-state="proved"] .wind-gusts i {
  animation: towerWindPulse 1.5s ease-in-out infinite;
}

.tower-test-progress {
  display: grid;
  gap: 5px;
  padding: 9px;
  border: 1px solid rgb(85 183 217 / 0.28);
  border-radius: 9px;
  background: rgb(0 0 0 / 0.28);
}

.tower-test-progress span,
.tower-test-progress b {
  margin: 0;
  color: #d6f5ff;
}

.tower-test-progress i {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
}

.tower-test-progress i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--tower-progress);
  border-radius: inherit;
  background: linear-gradient(90deg, #55b7d9, #f2c94c);
  transition: width 240ms var(--motion);
}

.tower-control-condition {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-left: 3px solid #f2c94c;
  border-radius: 8px;
  background: rgb(242 201 76 / 0.08);
}

.tower-control-condition b {
  color: #fff2bc;
  font-size: 0.82rem;
}

.tower-control-condition small {
  color: #cfbf96;
  font-size: 0.7rem;
}

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

.tower-anchor-card {
  display: grid;
  grid-template-rows: 156px auto 1fr;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgb(255 179 108 / 0.22);
  border-radius: 11px;
  background: linear-gradient(180deg, rgb(20 12 7 / 0.9), rgb(7 6 5 / 0.96));
  transition: border-color 180ms ease, transform 180ms var(--motion), box-shadow 180ms ease;
}

.tower-anchor-card.latest {
  border-color: rgb(85 183 217 / 0.72);
  box-shadow: 0 0 24px rgb(85 183 217 / 0.14);
}

.tower-anchor-card.held {
  border-color: rgb(158 255 189 / 0.58);
  background: linear-gradient(180deg, rgb(10 37 22 / 0.86), rgb(7 8 5 / 0.96));
}

.tower-anchor-card.tipped {
  border-color: rgb(255 122 94 / 0.48);
}

.tower-anchor-art {
  position: relative;
  min-height: 156px;
  overflow: hidden;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgb(14 34 44 / 0.92) 0 72%, rgb(61 28 12 / 0.86) 72% 100%);
}

.tower-anchor-art::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 27px;
  width: 1px;
  height: 112px;
  border-left: 1px dashed rgb(158 255 189 / 0.7);
  transform: translateX(-50%);
  z-index: 3;
}

.tower-anchor-art i {
  position: absolute;
  left: calc(50% - 18px);
  bottom: 27px;
  width: 36px;
  height: 104px;
  border: 2px solid #f2c94c;
  border-radius: 7px 7px 2px 2px;
  background:
    repeating-linear-gradient(180deg, rgb(242 201 76 / 0.22) 0 15px, rgb(217 107 43 / 0.42) 16px 18px),
    #29150a;
  box-shadow: 0 0 18px rgb(242 201 76 / 0.14);
  transform: rotate(var(--tower-sway));
  transform-origin: 50% 100%;
  transition: transform 460ms var(--motion);
}

.tower-anchor-card.tipped.latest .tower-anchor-art i {
  animation: towerAnchorTip 620ms var(--motion) both;
}

.tower-anchor-card.held.latest .tower-anchor-art i {
  animation: towerAnchorHold 620ms var(--motion) both;
}

.tower-anchor-art span {
  position: absolute;
  left: 50%;
  bottom: 20px;
  height: 12px;
  border: 2px solid #ffb36c;
  border-radius: 4px;
  background: linear-gradient(180deg, #7e3917, #2c1409);
  transform: translateX(-50%);
}

.tower-anchor-art.thin-base span { width: 48px; }
.tower-anchor-art.wide-base span { width: 112px; }
.tower-anchor-art.top-heavy span { width: 80px; }

.tower-anchor-art em {
  position: absolute;
  left: 50%;
  bottom: 117px;
  width: 22px;
  height: 22px;
  border: 2px solid #9ee8ff;
  border-radius: 50%;
  background: radial-gradient(circle, #fff4c6 0 24%, #55b7d9 28% 50%, #0a2631 54%);
  box-shadow: 0 0 14px rgb(85 183 217 / 0.52);
  transform: translateX(-50%) rotate(var(--tower-sway));
  transform-origin: 50% 92px;
  transition: transform 460ms var(--motion);
}

.tower-anchor-art.top-heavy em {
  width: 34px;
  height: 34px;
  bottom: 112px;
}

.tower-anchor-spec b {
  margin-top: 3px;
  color: #fff4c6;
  font: 900 0.9rem/1.15 Cinzel, Georgia, serif;
}

.tower-anchor-spec small {
  margin-top: 3px;
  color: #d6c6a0;
  font-size: 0.68rem;
}

.tower-anchor-card > button,
.tower-anchor-observation {
  min-height: 70px;
  padding: 9px;
  border: 1px solid rgb(255 179 108 / 0.32);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.3);
}

.tower-anchor-card > button {
  color: #fff4c6;
  cursor: pointer;
  font: 850 0.7rem/1.2 Inter, Arial, sans-serif;
}

.tower-anchor-card > button b,
.tower-anchor-card > button small {
  display: block;
}

.tower-anchor-card > button small {
  margin-top: 3px;
  color: #d6c6a0;
}

.tower-anchor-card > button:hover,
.tower-anchor-card > button:focus-visible {
  border-color: rgb(255 213 126 / 0.72);
  outline: 3px solid rgb(255 213 126 / 0.34);
  outline-offset: 2px;
}

.tower-anchor-card > button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.tower-anchor-observation strong {
  color: #fff4c6;
  font: 950 0.82rem/1.1 "JetBrains Mono", Consolas, monospace;
}

.tower-anchor-card.held .tower-anchor-observation strong {
  color: #9effbd;
}

.tower-anchor-card.tipped .tower-anchor-observation strong {
  color: #ffab97;
}

.tower-anchor-observation b {
  margin-top: 4px;
  color: #c8eef9;
  font-size: 0.68rem;
}

.tower-anchor-observation p {
  margin: 5px 0 0;
  color: #cdbf9d;
  font-size: 0.66rem;
  line-height: 1.28;
}

.tower-anchor-check {
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 10px;
  background: rgb(242 201 76 / 0.06);
}

.tower-anchor-check p {
  margin: 5px 0 0;
  color: #e2d4af;
  font-size: 0.73rem;
  line-height: 1.3;
}

.tower-anchor-trials {
  display: grid;
  gap: 6px;
}

.tower-anchor-trials span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.25);
}

.tower-anchor-trials span.revise { border-color: rgb(255 122 94 / 0.35); }
.tower-anchor-trials span.match { border-color: rgb(158 255 189 / 0.42); }
.tower-anchor-trials b { color: #fff4c6; font-size: 0.7rem; }
.tower-anchor-trials small { color: #c9bea0; font-size: 0.65rem; text-align: right; }

@keyframes towerWindPulse {
  0% { transform: translateX(0); opacity: 0; }
  28% { opacity: 0.65; }
  100% { transform: translateX(-250%); opacity: 0; }
}

@keyframes towerAnchorTip {
  0% { transform: rotate(0deg); }
  42% { transform: rotate(7deg); }
  100% { transform: rotate(var(--tower-sway)); }
}

@keyframes towerAnchorHold {
  0%, 100% { transform: rotate(0deg); }
  34% { transform: rotate(var(--tower-sway)); }
  68% { transform: rotate(-2deg); }
}

@media (max-width: 820px) {
  .tower-anchor-grid {
    grid-template-columns: 1fr;
  }

  .tower-anchor-card {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
  }

  .tower-anchor-art {
    grid-row: 1 / 3;
    min-height: 164px;
  }
}

@media (max-width: 560px) {
  .tower-hypotheses,
  .tower-wind-stage,
  .tower-anchor-card,
  .tower-anchor-trials span {
    grid-template-columns: minmax(0, 1fr);
  }

  .tower-hypotheses .forge-choice,
  .tower-anchor-card > button {
    min-height: 52px;
  }

  .tower-anchor-art {
    grid-row: auto;
    min-height: 156px;
  }

  .tower-anchor-trials small {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wind-gusts i,
  .tower-anchor-card.latest .tower-anchor-art i,
  .tower-anchor-art i,
  .tower-anchor-art em,
  .tower-test-progress i::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Week 2 Feature Labels: visible evidence -> label comparison -> human review. */
.ai-oracle-lab:has(.creature-index-controls) {
  border-color: rgb(185 173 255 / 0.62);
  background:
    radial-gradient(circle at 14% 10%, rgb(109 91 208 / 0.24), transparent 34%),
    radial-gradient(circle at 88% 14%, rgb(85 183 217 / 0.16), transparent 38%),
    linear-gradient(145deg, rgb(8 6 20 / 0.98), rgb(4 13 16 / 0.98));
}

.creature-index-controls,
.creature-index-stage {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.creature-index-step {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgb(185 173 255 / 0.28);
  border-radius: 9px;
  background: linear-gradient(180deg, rgb(185 173 255 / 0.06), transparent), rgb(0 0 0 / 0.22);
  transition: border-color 180ms ease, opacity 180ms ease, filter 180ms ease;
}

.creature-index-step.locked {
  opacity: 0.58;
  filter: saturate(0.55);
}

.creature-index-step.active {
  border-color: rgb(126 222 246 / 0.55);
  box-shadow: inset 0 0 28px rgb(85 183 217 / 0.05), 0 0 18px rgb(85 183 217 / 0.07);
}

.creature-index-step.complete {
  border-color: rgb(158 255 189 / 0.46);
}

.creature-index-step.caution {
  border-color: rgb(255 156 124 / 0.58);
  background: rgb(255 118 95 / 0.055);
}

.creature-step-head,
.creature-index-status {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  color: #dcd8ff;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.creature-step-head b,
.creature-index-status b {
  color: #9ee8ff;
  text-align: right;
}

.creature-index-step > p {
  margin: 0;
  color: #c9c5e8;
  font-size: 0.76rem;
  line-height: 1.38;
}

.creature-feature-grid,
.creature-candidate-grid,
.creature-review-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.creature-feature-grid button,
.creature-candidate-grid button,
.creature-review-grid button,
.creature-index-run {
  min-width: 0;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid rgb(185 173 255 / 0.3);
  border-radius: 8px;
  color: #f4efff;
  background: linear-gradient(180deg, rgb(185 173 255 / 0.08), rgb(85 183 217 / 0.025)), #080711;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.creature-feature-grid button {
  min-height: 62px;
  text-align: left;
}

.creature-feature-grid b,
.creature-feature-grid small,
.creature-candidate-grid b,
.creature-candidate-grid small {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
}

.creature-feature-grid b,
.creature-candidate-grid b {
  color: #fff6d7;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.76rem;
}

.creature-feature-grid small,
.creature-candidate-grid small {
  margin-top: 4px;
  color: #bcb7da;
  font-size: 0.62rem;
  font-weight: 700;
}

.creature-feature-grid button:hover:not(:disabled),
.creature-candidate-grid button:hover:not(:disabled),
.creature-review-grid button:hover:not(:disabled),
.creature-index-run:hover:not(:disabled) {
  border-color: #9ee8ff;
  transform: translateY(-1px);
}

.creature-feature-grid button:focus-visible,
.creature-candidate-grid button:focus-visible,
.creature-review-grid button:focus-visible,
.creature-index-run:focus-visible {
  outline: 3px solid #9ee8ff;
  outline-offset: 2px;
}

.creature-feature-grid button.filed,
.creature-feature-grid button[aria-pressed="true"],
.creature-candidate-grid button[aria-pressed="true"],
.creature-review-grid button[aria-pressed="true"] {
  border-color: #9effbd;
  color: #08110a;
  background: linear-gradient(180deg, #d8ffe1, #74c992);
  box-shadow: 0 0 20px rgb(158 255 189 / 0.14);
}

.creature-feature-grid button.filed b,
.creature-feature-grid button.filed small,
.creature-candidate-grid button[aria-pressed="true"] b,
.creature-candidate-grid button[aria-pressed="true"] small {
  color: #08110a;
}

.creature-index-run {
  width: 100%;
  color: #0a0714;
  background: linear-gradient(180deg, #e5ddff, #9c8be8);
  border-color: rgb(229 221 255 / 0.8);
}

.creature-feature-grid button:disabled:not(.filed),
.creature-candidate-grid button:disabled,
.creature-review-grid button:disabled,
.creature-index-run:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.creature-trial-ledger {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.creature-trial-ledger > span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border: 1px solid rgb(255 156 124 / 0.3);
  border-radius: 7px;
  background: rgb(255 118 95 / 0.045);
  font-family: "JetBrains Mono", Consolas, monospace;
}

.creature-trial-ledger > span.match {
  border-color: rgb(158 255 189 / 0.38);
  background: rgb(158 255 189 / 0.05);
}

.creature-trial-ledger b,
.creature-trial-ledger small {
  min-width: 0;
  overflow-wrap: break-word;
}

.creature-trial-ledger b {
  color: #fff2b8;
  font-size: 0.66rem;
}

.creature-trial-ledger small {
  color: #c9c5e8;
  font-size: 0.62rem;
}

.hatchling-case {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px dashed rgb(255 179 108 / 0.42);
  border-radius: 8px;
  background: rgb(255 179 108 / 0.045);
}

.hatchling-case div,
.hatchling-case b,
.hatchling-case small {
  min-width: 0;
}

.hatchling-case b,
.hatchling-case small {
  display: block;
  overflow-wrap: break-word;
}

.hatchling-case b {
  color: #fff1bd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.76rem;
}

.hatchling-case small {
  margin-top: 3px;
  color: #d7c8a3;
  font-size: 0.65rem;
}

.hatchling-silhouette {
  position: relative;
  width: 46px;
  height: 38px;
  border-radius: 58% 42% 45% 55%;
  background: linear-gradient(135deg, #51476e, #171221);
  box-shadow: inset -7px -5px 0 rgb(0 0 0 / 0.2), 0 0 18px rgb(185 173 255 / 0.12);
}

.hatchling-silhouette::before,
.hatchling-silhouette::after {
  content: "";
  position: absolute;
}

.hatchling-silhouette::before {
  right: -10px;
  top: 8px;
  width: 18px;
  height: 15px;
  border-radius: 45% 60% 45% 55%;
  background: #51476e;
}

.hatchling-silhouette::after {
  left: 7px;
  top: -8px;
  width: 25px;
  height: 16px;
  border: 2px dashed rgb(255 246 215 / 0.34);
  border-radius: 50%;
  opacity: 0.7;
}

.creature-index-stage {
  position: relative;
  grid-template-columns: 170px minmax(0, 1fr);
  min-height: 196px;
  padding: 12px;
  border: 1px solid rgb(185 173 255 / 0.32);
  border-radius: 9px;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 48%, rgb(109 91 208 / 0.18), transparent 32%),
    repeating-linear-gradient(0deg, transparent 0 25px, rgb(185 173 255 / 0.025) 26px),
    #06050d;
}

.creature-index-status {
  grid-column: 1 / -1;
}

.creature-specimen {
  position: relative;
  width: 160px;
  height: 118px;
  align-self: center;
  filter: drop-shadow(0 0 16px rgb(109 91 208 / 0.28));
}

.creature-body {
  position: absolute;
  left: 48px;
  top: 34px;
  width: 68px;
  height: 54px;
  border: 2px solid rgb(242 201 76 / 0.58);
  border-radius: 54% 46% 48% 52%;
  background:
    radial-gradient(circle at 27% 28%, #9f8fed 0 5%, transparent 6%),
    radial-gradient(circle at 52% 20%, #9f8fed 0 5%, transparent 6%),
    radial-gradient(circle at 40% 48%, #9f8fed 0 5%, transparent 6%),
    linear-gradient(145deg, #4e3f8d, #181127);
  box-shadow: inset -10px -8px 0 rgb(0 0 0 / 0.18);
}

.creature-body > i {
  position: absolute;
  bottom: -20px;
  width: 9px;
  height: 28px;
  border-radius: 5px;
  background: #30255a;
}

.creature-body > i:nth-child(1) { left: 9px; transform: rotate(8deg); }
.creature-body > i:nth-child(2) { left: 30px; }
.creature-body > i:nth-child(3) { right: 8px; transform: rotate(-8deg); }

.creature-body > em {
  position: absolute;
  right: -25px;
  top: 5px;
  width: 30px;
  height: 25px;
  border: 2px solid rgb(242 201 76 / 0.45);
  border-radius: 42% 62% 45% 55%;
  background: #3b2d70;
}

.creature-wing {
  position: absolute;
  top: 8px;
  width: 68px;
  height: 58px;
  border: 2px solid rgb(126 222 246 / 0.55);
  background: linear-gradient(145deg, rgb(85 183 217 / 0.22), rgb(109 91 208 / 0.56));
  opacity: 0.9;
  animation: creatureWingPulse 2.8s ease-in-out infinite;
}

.creature-wing.wing-left {
  left: 5px;
  border-radius: 70% 18% 68% 16%;
  transform: rotate(-19deg);
  transform-origin: 100% 100%;
}

.creature-wing.wing-right {
  right: 1px;
  border-radius: 18% 70% 16% 68%;
  transform: rotate(19deg);
  transform-origin: 0 100%;
  animation-delay: -1.4s;
}

.creature-flame {
  position: absolute;
  right: -2px;
  top: 45px;
  width: 34px;
  height: 18px;
  border-radius: 70% 10% 70% 10%;
  background: radial-gradient(circle at 72% 50%, #fff3a3 0 16%, #ff9a45 18% 52%, #c8432d 54% 100%);
  box-shadow: 0 0 18px rgb(255 118 95 / 0.4);
  animation: creatureFlame 920ms ease-in-out infinite alternate;
}

.creature-stage-meter,
.creature-match-board {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
}

.creature-stage-meter {
  grid-column: 1;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.64rem;
}

.creature-stage-meter span { color: #bcb7da; }
.creature-stage-meter b { color: #9ee8ff; }

.creature-stage-meter > i,
.creature-match-board > span > i {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
}

.creature-stage-meter > i::before,
.creature-match-board > span > i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--creature-progress, var(--match, 0%));
  border-radius: inherit;
  background: linear-gradient(90deg, #6d5bd0, #8fe6ff, #9effbd);
  transition: width 440ms cubic-bezier(0.16, 1, 0.3, 1);
}

.creature-match-board {
  grid-column: 2;
  grid-row: 2 / span 2;
  padding: 10px;
  border: 1px solid rgb(126 222 246 / 0.22);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.24);
}

.creature-match-board > div {
  display: grid;
  gap: 3px;
}

.creature-match-board > div span,
.creature-match-board > span b,
.creature-match-board > span small {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
}

.creature-match-board > div span { color: #bcb7da; text-transform: uppercase; }
.creature-match-board > div b { color: #fff1bd; font-size: 0.75rem; }

.creature-match-board > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 28px;
  gap: 7px;
  align-items: center;
}

.creature-match-board > span b { color: #dcd8ff; }
.creature-match-board > span small { color: #9ee8ff; text-align: right; }

.creature-match-board.sealed > span b,
.creature-match-board.sealed > span small {
  color: #77738e;
}

.creature-index-stage[data-state="matched"],
.creature-index-stage[data-state="proved"] {
  border-color: rgb(158 255 189 / 0.5);
  box-shadow: inset 0 0 40px rgb(158 255 189 / 0.05), 0 0 24px rgb(158 255 189 / 0.08);
}

.creature-index-stage[data-state="revised"],
.creature-index-stage[data-state="caution"] {
  animation: creatureEvidencePulse 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes creatureWingPulse {
  0%, 100% { filter: brightness(0.88); }
  50% { filter: brightness(1.22); }
}

@keyframes creatureFlame {
  from { transform: scaleX(0.86) rotate(-3deg); opacity: 0.76; }
  to { transform: scaleX(1.08) rotate(3deg); opacity: 1; }
}

@keyframes creatureEvidencePulse {
  0% { transform: scale(0.994); filter: brightness(0.86); }
  58% { transform: scale(1.003); filter: brightness(1.18); }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (max-width: 720px) {
  .creature-feature-grid,
  .creature-candidate-grid,
  .creature-review-grid {
    grid-template-columns: 1fr;
  }

  .creature-feature-grid button,
  .creature-candidate-grid button,
  .creature-review-grid button,
  .creature-index-run {
    min-height: 52px;
  }

  .creature-index-stage {
    grid-template-columns: 1fr;
  }

  .creature-specimen {
    justify-self: center;
  }

  .creature-stage-meter,
  .creature-match-board {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .creature-index-step,
  .creature-feature-grid button,
  .creature-candidate-grid button,
  .creature-review-grid button,
  .creature-index-run,
  .creature-wing,
  .creature-flame,
  .creature-index-stage,
  .creature-stage-meter > i::before,
  .creature-match-board > span > i::before {
    animation: none !important;
    transition: none !important;
  }
}

/* Week 2 Failure Tests: hidden-fault Gear Sentinel diagnosis. */
.engineering-forge-lab[data-mode="gear-diagnosis"] {
  border-color: rgb(255 179 108 / 0.58);
  background:
    radial-gradient(circle at 14% 12%, rgb(217 107 43 / 0.2), transparent 35%),
    radial-gradient(circle at 86% 18%, rgb(85 183 217 / 0.12), transparent 40%),
    linear-gradient(145deg, rgb(18 8 4 / 0.98), rgb(6 12 15 / 0.98));
}

.gear-hypothesis-panel,
.gear-repair-panel {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgb(255 179 108 / 0.3);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.24);
}

.gear-hypothesis-panel h4,
.gear-repair-panel h4 {
  margin: 2px 0 0;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.88rem;
  line-height: 1.2;
}

.gear-hypotheses,
.gear-repair-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.gear-hypotheses .forge-choice {
  min-height: 68px;
}

.gear-sentinel-lab {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.gear-sentinel-stage {
  position: relative;
  min-height: 152px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgb(255 179 108 / 0.3);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgb(217 107 43 / 0.09), transparent 42%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgb(255 246 215 / 0.025) 24px),
    #090604;
}

.gear-sentinel-stage > div:not(.sentinel-gears) {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.gear-sentinel-stage span,
.gear-diagnostic-card > div > span {
  color: #ffb36c;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gear-sentinel-stage b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
}

.gear-sentinel-stage small {
  color: #cddfe2;
  line-height: 1.3;
}

.sentinel-gears {
  position: relative;
  width: 142px;
  height: 112px;
  filter: drop-shadow(0 0 14px rgb(217 107 43 / 0.2));
}

.sentinel-gears i,
.gear-component-art i {
  position: absolute;
  border: 5px dashed rgb(255 179 108 / 0.82);
  border-radius: 50%;
  background: radial-gradient(circle, #2b160d 0 26%, #8c4925 28% 42%, #170b07 44% 100%);
}

.sentinel-gears .drive {
  left: 4px;
  top: 34px;
  width: 56px;
  height: 56px;
  animation: sentinelGearTurn 3.8s linear infinite;
}

.sentinel-gears .idler {
  left: 50px;
  top: 8px;
  width: 68px;
  height: 68px;
  border-color: rgb(242 201 76 / 0.82);
  animation: sentinelGearTurnReverse 4.2s linear infinite;
}

.sentinel-gears .rail {
  right: 2px;
  bottom: 9px;
  width: 49px;
  height: 49px;
  border-color: rgb(85 183 217 / 0.72);
  animation: sentinelGearTurn 3.3s linear infinite;
}

.sentinel-gears .idler.tested {
  border-color: #ff765f;
  animation: sentinelGearBind 620ms cubic-bezier(0.2, 0.8, 0.2, 1) 2;
  box-shadow: 0 0 26px rgb(255 118 95 / 0.32);
}

.gear-diagnosis-progress {
  grid-column: 2;
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 6px 10px !important;
  margin-top: 6px;
  color: #cddfe2;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 900;
}

.gear-diagnosis-progress i {
  grid-column: 1 / -1;
  height: 7px;
  border: 1px solid rgb(255 179 108 / 0.24);
  border-radius: 999px;
  background: linear-gradient(90deg, #d96b2b var(--gear-progress), rgb(255 246 215 / 0.07) 0);
}

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

.gear-diagnostic-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 10px;
  border: 1px solid rgb(255 179 108 / 0.24);
  border-radius: 8px;
  background: rgb(9 6 4 / 0.86);
}

.gear-diagnostic-card.latest {
  border-color: rgb(242 201 76 / 0.56);
  box-shadow: 0 0 22px rgb(242 201 76 / 0.1);
}

.gear-diagnostic-card.binding {
  border-color: rgb(255 118 95 / 0.58);
  animation: gearDiagnosticFault 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gear-diagnostic-card.clear.tested {
  border-color: rgb(85 183 217 / 0.42);
}

.gear-diagnostic-card > div:not(.gear-component-art):not(.gear-observation) {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.gear-diagnostic-card > div > b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.8rem;
}

.gear-diagnostic-card > div > small {
  color: #c9dce0;
  font-size: 0.68rem;
  line-height: 1.3;
}

.gear-component-art {
  position: relative;
  width: 62px;
  height: 54px;
  margin: 0 auto;
}

.gear-component-art i {
  inset: 5px 9px;
}

.gear-component-art span,
.gear-component-art em {
  position: absolute;
  background: rgb(85 183 217 / 0.52);
}

.gear-component-art span { left: 0; right: 0; top: 25px; height: 4px; }
.gear-component-art em { left: 29px; top: 0; bottom: 0; width: 4px; }

.gear-diagnostic-card button,
.gear-repair-options button {
  min-height: 48px;
  padding: 8px 9px;
  border: 1px solid rgb(255 179 108 / 0.38);
  border-radius: 7px;
  color: #fff4c6;
  background: rgb(217 107 43 / 0.1);
  cursor: pointer;
  font-weight: 900;
}

.gear-diagnostic-card button b,
.gear-diagnostic-card button small,
.gear-repair-options button b,
.gear-repair-options button small {
  display: block;
}

.gear-diagnostic-card button small,
.gear-repair-options button small {
  margin-top: 3px;
  color: #ffd9b4;
  font-size: 0.62rem;
}

.gear-diagnostic-card button:disabled,
.gear-repair-options button:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.gear-observation {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgb(85 183 217 / 0.22);
  border-radius: 7px;
  background: rgb(85 183 217 / 0.06);
}

.gear-observation strong {
  color: #9ee8ff;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
}

.gear-observation p,
.gear-repair-panel p {
  margin: 0;
  color: #c9dce0;
  font-size: 0.7rem;
  line-height: 1.35;
}

.gear-repair-options button[aria-pressed="true"] {
  border-color: #f2c94c;
  color: #100c05;
  background: linear-gradient(180deg, #ffe991, #c8942c);
}

.gear-diagnosis-trials {
  display: grid;
  gap: 6px;
}

.gear-diagnosis-trials span {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid rgb(255 118 95 / 0.28);
  border-radius: 7px;
  background: rgb(255 118 95 / 0.05);
}

.gear-diagnosis-trials b,
.gear-diagnosis-trials small {
  min-width: 0;
  overflow-wrap: break-word;
}

.gear-diagnosis-trials b { color: #fff4c6; font-size: 0.68rem; }
.gear-diagnosis-trials small { color: #ffb7a8; font-size: 0.64rem; }
.gear-diagnosis-trials span.match { border-color: rgb(158 255 189 / 0.42); background: rgb(158 255 189 / 0.06); }
.gear-diagnosis-trials span.match small { color: #9effbd; }

@keyframes sentinelGearTurn { to { transform: rotate(1turn); } }
@keyframes sentinelGearTurnReverse { to { transform: rotate(-1turn); } }
@keyframes sentinelGearBind {
  0%, 100% { transform: rotate(0deg); }
  45% { transform: rotate(-24deg); }
  58% { transform: rotate(-13deg); }
}
@keyframes gearDiagnosticFault {
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(-3px); }
  62% { transform: translateX(3px); }
}

@media (max-width: 720px) {
  .gear-hypotheses,
  .gear-repair-options,
  .gear-diagnostic-grid {
    grid-template-columns: 1fr;
  }

  .gear-sentinel-stage {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .sentinel-gears {
    margin: 0 auto;
  }

  .gear-diagnosis-progress {
    grid-column: 1;
    text-align: left;
  }

  .gear-diagnosis-trials span {
    grid-template-columns: 1fr;
  }

  .gear-hypotheses .forge-choice,
  .gear-diagnostic-card button,
  .gear-repair-options button {
    min-height: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sentinel-gears i,
  .gear-diagnostic-card.binding {
    animation: none !important;
  }
}

body.intro-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(18px, 4vw, 42px);
  background:
    radial-gradient(circle at 50% 28%, rgb(242 201 76 / 0.18), transparent 32rem),
    radial-gradient(circle at 80% 72%, rgb(85 183 217 / 0.12), transparent 30rem),
    rgb(7 5 3 / 0.92);
  backdrop-filter: blur(10px);
}

.intro-overlay::before,
.intro-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.intro-overlay::before {
  inset: -24px;
  background: url("/stem-rover-lab/assets/dungeon-academy-arena.webp?v=transcript-ledger-1") center / cover no-repeat;
  filter: saturate(0.95) contrast(1.08) brightness(0.72);
  opacity: 0.22;
  transform: scale(1.02);
  animation: introBackdropDrift 16s ease-in-out infinite alternate;
}

.intro-overlay::after {
  background:
    linear-gradient(rgb(255 246 215 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 246 215 / 0.02) 1px, transparent 1px),
    radial-gradient(ellipse at center, transparent 24%, rgb(5 4 3 / 0.72) 100%);
  background-size: 82px 82px, 82px 82px, auto;
}

.intro-overlay.hidden {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.academy-home-overlay {
  position: fixed;
  inset: 0;
  z-index: 28;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(16px, 4vw, 42px);
  background:
    radial-gradient(circle at 50% 26%, rgb(242 201 76 / 0.16), transparent 32rem),
    radial-gradient(circle at 78% 76%, rgb(85 183 217 / 0.12), transparent 30rem),
    rgb(7 5 3 / 0.88);
  backdrop-filter: blur(9px);
}

.academy-home-overlay::before,
.academy-home-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.academy-home-overlay::before {
  inset: -26px;
  background: url("/stem-rover-lab/assets/dungeon-academy-arena.webp?v=transcript-ledger-1") center / cover no-repeat;
  filter: saturate(1.02) contrast(1.08) brightness(0.62);
  opacity: 0.24;
  animation: introBackdropDrift 18s ease-in-out infinite alternate;
}

.academy-home-overlay::after {
  background:
    linear-gradient(rgb(255 246 215 / 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 246 215 / 0.018) 1px, transparent 1px),
    radial-gradient(ellipse at center, transparent 26%, rgb(5 4 3 / 0.76) 100%);
  background-size: 86px 86px, 86px 86px, auto;
}

.academy-home-overlay.hidden {
  display: none;
}

.academy-home-card {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: calc(100dvh - clamp(32px, 8vw, 84px));
  display: grid;
  gap: clamp(16px, 2.4vw, 24px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(18px, 3vw, 30px);
  border: 2px solid rgb(242 201 76 / 0.62);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 16% 0%, rgb(242 201 76 / 0.17), transparent 42%),
    radial-gradient(ellipse at 88% 86%, rgb(85 183 217 / 0.14), transparent 42%),
    linear-gradient(145deg, rgb(39 26 13 / 0.97), rgb(8 6 4 / 0.98));
  box-shadow: 0 0 0 5px #050302, 0 34px 90px rgb(0 0 0 / 0.62), inset 0 0 42px rgb(242 201 76 / 0.06);
  animation: academyHomeRise 620ms var(--motion) both;
}

.academy-home-card::before {
  content: "";
  position: absolute;
  inset: 11px;
  z-index: 0;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 7px;
  pointer-events: none;
}

.academy-home-card > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.academy-home-head {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) auto;
  gap: 18px;
  align-items: center;
}

.academy-home-head h2,
.academy-home-head p {
  margin: 0;
}

.academy-home-head h2 {
  max-width: 18ch;
  font-size: clamp(1.95rem, 3.6vw, 3.35rem);
  line-height: 1.02;
  text-wrap: balance;
}

.academy-home-head p:not(.kicker) {
  max-width: 58ch;
  color: #e4d4a4;
  line-height: 1.45;
}

.academy-home-close {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgb(242 201 76 / 0.5);
  border-radius: 999px;
  color: #130d05;
  background: linear-gradient(180deg, #ffe996, #d6a536 58%, #9a661a);
  box-shadow: 0 5px 0 #090604;
  cursor: pointer;
  font-weight: 900;
}

.academy-home-status,
.academy-home-grid {
  display: grid;
  gap: 10px;
}

.academy-home-status {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.academy-home-status span {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.26);
  border-radius: 8px;
  background: rgb(255 246 215 / 0.045);
}

.academy-home-status b,
.academy-home-status small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academy-home-status b {
  color: #fff6d7;
  font-family: Cinzel, Georgia, serif;
}

.academy-home-status small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.academy-lobby-board {
  position: relative;
  overflow: hidden;
  min-height: 252px;
  display: grid;
  grid-template-columns: minmax(160px, 0.28fr) minmax(0, 1fr) minmax(218px, 0.38fr);
  gap: 14px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid rgb(242 201 76 / 0.36);
  border-radius: 9px;
  background:
    linear-gradient(105deg, rgb(255 246 215 / 0.1), transparent 44%),
    radial-gradient(circle at 24% 14%, rgb(242 201 76 / 0.14), transparent 34%),
    radial-gradient(circle at 82% 20%, rgb(85 183 217 / 0.12), transparent 34%),
    rgb(5 5 4 / 0.72);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 18px 48px rgb(0 0 0 / 0.24);
}

.academy-lobby-board > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.academy-lobby-visual {
  min-height: 210px;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(5 4 3 / 0.02), rgb(5 4 3 / 0.7)),
    url("/stem-rover-lab/assets/dungeon-academy-first-quest-ai.webp?v=academy-sampler-copy-v38") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgb(255 246 215 / 0.05);
}

.academy-lobby-visual span {
  width: 64px;
  height: 64px;
  position: absolute;
  right: 12px;
  bottom: 12px;
  border: 1px solid rgb(242 201 76 / 0.54);
  border-radius: 50%;
  background:
    radial-gradient(circle at 44% 42%, #fff7ca, rgb(242 201 76 / 0.22) 34%, transparent 64%),
    conic-gradient(from 20deg, rgb(242 201 76 / 0.18), rgb(85 183 217 / 0.32), rgb(242 201 76 / 0.18));
  box-shadow: 0 0 26px rgb(242 201 76 / 0.2), inset 0 0 18px rgb(0 0 0 / 0.42);
}

.academy-lobby-copy {
  display: grid;
  align-content: end;
  gap: 10px;
  padding: 10px 4px;
}

.academy-lobby-copy h3,
.academy-lobby-copy p {
  margin: 0;
}

.academy-lobby-copy h3 {
  max-width: 18ch;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.65rem, 3vw, 2.65rem);
  line-height: 1.04;
  text-wrap: balance;
}

.academy-lobby-copy p {
  max-width: 62ch;
  color: #dfd0a5;
  font-size: 0.96rem;
  line-height: 1.48;
  text-wrap: pretty;
}

.academy-lobby-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 2px;
}

.academy-lobby-actions button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgb(242 201 76 / 0.38);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 1000;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), border-color 180ms var(--motion), box-shadow 180ms var(--motion);
}

.academy-lobby-actions button:first-child {
  color: #130d05;
  background: linear-gradient(180deg, #fff1a9, var(--gold));
  box-shadow: 0 12px 26px rgb(242 201 76 / 0.16);
}

.academy-lobby-actions button:last-child {
  color: #f4de9b;
  background: rgb(0 0 0 / 0.28);
}

.academy-lobby-actions button:hover,
.academy-lobby-actions button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
  border-color: rgb(242 201 76 / 0.62);
}

.academy-lobby-actions button:active {
  transform: translateY(1px);
}

.academy-lobby-ledger {
  display: grid;
  gap: 8px;
  align-content: stretch;
}

.academy-lobby-ledger article {
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 11px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.12)),
    rgb(0 0 0 / 0.2);
}

.academy-lobby-ledger span {
  color: #ad9f7b;
  font: 1000 0.56rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.academy-lobby-ledger b {
  color: #fff4c6;
  font: 1000 1rem "JetBrains Mono", Consolas, monospace;
}

.academy-lobby-ledger small {
  color: #d2c39b;
  font-size: 0.68rem;
  line-height: 1.2;
}

.student-day-board {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 9px;
  background:
    radial-gradient(circle at 9% 0%, rgb(242 201 76 / 0.14), transparent 44%),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.14)),
    rgb(6 5 3 / 0.68);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.student-day-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.student-day-main h3,
.student-day-main p {
  margin: 0;
}

.student-day-main h3 {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 2vw, 1.38rem);
  line-height: 1.08;
}

.student-day-main p {
  margin-top: 5px;
  color: #d9cda8;
  font-size: 0.86rem;
  line-height: 1.34;
}

.student-day-main button {
  min-height: 42px;
  min-width: 142px;
  padding: 9px 12px;
  border: 1px solid rgb(255 246 215 / 0.36);
  border-radius: 8px;
  color: #130d05;
  background: linear-gradient(180deg, #fff0a3, var(--gold));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 8px 18px rgb(242 201 76 / 0.14);
  cursor: pointer;
  font-weight: 1000;
}

.student-day-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.student-day-step {
  appearance: none;
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 4px;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.2);
  font: inherit;
  text-align: left;
}

button.student-day-step {
  cursor: pointer;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), border-color 180ms var(--motion), box-shadow 180ms var(--motion);
}

button.student-day-step:hover:not(:disabled),
button.student-day-step:focus-visible:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08);
  border-color: rgb(242 201 76 / 0.48);
  box-shadow: 0 12px 24px rgb(0 0 0 / 0.22), 0 0 20px rgb(242 201 76 / 0.1);
}

button.student-day-step:active:not(:disabled) {
  transform: translateY(1px);
}

button.student-day-step:disabled {
  cursor: not-allowed;
}

.student-day-step > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #130d05;
  background: #7b755f;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 1000;
}

.student-day-step small,
.student-day-step b,
.student-day-step em {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
}

.student-day-step small {
  color: var(--gold);
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.student-day-step b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.8rem;
  line-height: 1.08;
}

.student-day-step em {
  color: #cfc19a;
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1.18;
}

.student-day-step.current {
  border-color: rgb(242 201 76 / 0.46);
  background:
    radial-gradient(circle at 18% 6%, rgb(242 201 76 / 0.15), transparent 56%),
    rgb(17 12 5 / 0.66);
}

.student-day-step.current > span,
.student-day-step.ready > span {
  background: var(--gold);
}

.student-day-step.complete {
  border-color: rgb(158 255 189 / 0.34);
}

.student-day-step.complete > span {
  background: #9effbd;
}

.student-day-step.locked {
  opacity: 0.7;
}

.student-day-next {
  padding-top: 8px;
  border-top: 1px solid rgb(242 201 76 / 0.16);
  color: #dccb9f;
  font-size: 0.82rem;
  line-height: 1.3;
}

.today-school-day-panel {
  margin-top: 0;
  padding: 0;
  border-color: rgb(242 201 76 / 0.18);
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.026), rgb(0 0 0 / 0.12)),
    rgb(0 0 0 / 0.14);
}

.today-school-day-panel summary {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.today-school-day-panel summary::-webkit-details-marker {
  display: none;
}

.today-school-day-panel summary::after {
  content: "+";
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 7px;
  color: #fff4c6;
  background: rgb(0 0 0 / 0.26);
  font: 1000 0.9rem "JetBrains Mono", Consolas, monospace;
}

.today-school-day-panel[open] summary::after {
  content: "-";
}

.today-school-day-panel summary span {
  color: color-mix(in srgb, var(--hq-accent, var(--gold)) 82%, #fff4c6);
  font: 1000 0.6rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.today-school-day-panel summary b {
  min-width: 0;
  color: #d7c89d;
  font-size: 0.72rem;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.today-school-day-panel .student-day-main,
.today-school-day-panel .today-school-day-steps {
  margin: 0 10px 10px;
}

.today-school-day-panel .student-day-main button {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.46),
    0 4px 0 rgb(0 0 0 / 0.34),
    0 12px 24px rgb(242 201 76 / 0.14);
}

.today-school-day-panel .student-day-step.current {
  animation: schoolDayCurrentPulse 2200ms var(--motion) infinite;
}

.today-school-day-panel .student-day-step.ready {
  border-color: rgb(242 201 76 / 0.2);
}

body.academy-home-open .game-shell {
  pointer-events: none;
  user-select: none;
}

@keyframes schoolDayCurrentPulse {
  0%,
  100% {
    box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 0 0 rgb(242 201 76 / 0);
  }

  50% {
    box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.12), 0 0 22px rgb(242 201 76 / 0.14);
  }
}

.academy-home-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.academy-home-choice {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  min-height: 108px;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 14px 58px 14px 14px;
  border: 1px solid rgb(242 201 76 / 0.32);
  border-radius: 8px;
  color: var(--text);
  background: #090604;
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 10px 22px rgb(0 0 0 / 0.22);
  cursor: pointer;
  text-align: left;
  transition: transform 240ms var(--motion), border-color 240ms var(--motion), filter 240ms var(--motion), box-shadow 240ms var(--motion);
}

.academy-home-choice[data-home-mode="today"] {
  min-height: 108px;
  grid-row: auto;
}

.academy-home-choice::before,
.academy-home-choice::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.academy-home-choice::before {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.28;
  filter: saturate(0.92) contrast(1.04) brightness(0.58);
  transform: scale(1.04);
  transition: transform 360ms var(--motion), opacity 360ms var(--motion), filter 360ms var(--motion);
}

.academy-home-choice::after {
  background:
    linear-gradient(90deg, rgb(5 4 3 / 0.88), rgb(5 4 3 / 0.68) 64%, rgb(5 4 3 / 0.45)),
    radial-gradient(circle at 86% 20%, rgb(242 201 76 / 0.16), transparent 36%);
  box-shadow: inset 0 0 0 1px rgb(255 246 215 / 0.08);
}

.academy-home-choice[data-home-mode="today"]::before {
  background-image: url("/stem-rover-lab/assets/dungeon-academy-arena.webp?v=transcript-ledger-1");
}

.academy-home-choice[data-home-mode="member-week"]::before {
  background-image: url("/stem-rover-lab/assets/dungeon-academy-first-quest-ai.webp?v=ai-oracle-v2");
  background-position: center 36%;
}

.academy-home-choice[data-home-mode="learn"]::before {
  background-image: url("/stem-rover-lab/assets/clockwork-dragon-boss.png");
  background-position: center 44%;
}

.academy-home-choice[data-home-mode="cast"]::before {
  background-image:
    radial-gradient(circle at 68% 36%, rgb(242 201 76 / 0.26), transparent 32%),
    url("/stem-rover-lab/assets/dungeon-academy-dragon-sprite.webp?v=academy-sampler-copy-v38"),
    url("/stem-rover-lab/assets/dungeon-academy-arena.webp?v=transcript-ledger-1");
  background-size: cover, 86% auto, cover;
  background-position: center, 58% 38%, center;
}

.academy-home-choice[data-home-mode="academy"]::before {
  background-image: url("/stem-rover-lab/assets/dungeon-academy-arena.png");
  background-position: center 42%;
}

.academy-home-choice[data-home-mode="parent"]::before {
  background-image: url("/stem-rover-lab/assets/dungeon-academy-mastery-celebration-ai.webp?v=ai-oracle-v2");
  background-position: center 46%;
}

.academy-home-choice > :not(.home-door-sigil) {
  position: relative;
  z-index: 2;
}

.home-door-sigil {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: block;
  overflow: hidden;
  border: 1px solid rgb(242 201 76 / 0.62);
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 44%, rgb(255 246 215 / 0.88), rgb(242 201 76 / 0.26) 34%, transparent 62%),
    conic-gradient(from 20deg, rgb(242 201 76 / 0.18), rgb(85 183 217 / 0.34), rgb(242 201 76 / 0.18));
  box-shadow: 0 0 0 4px rgb(5 3 2 / 0.42), 0 0 24px rgb(242 201 76 / 0.18), inset 0 0 18px rgb(0 0 0 / 0.45);
}

.home-door-sigil::before,
.home-door-sigil::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  pointer-events: none;
}

.home-door-sigil::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.84;
  mix-blend-mode: screen;
}

.home-door-sigil::after {
  border: 1px solid rgb(255 246 215 / 0.32);
  box-shadow: inset 0 0 14px rgb(242 201 76 / 0.26);
}

.academy-home-choice[data-home-mode="today"] .home-door-sigil::before {
  background-image: url("/stem-rover-lab/assets/mentor-stem-archmage.webp?v=transcript-ledger-1");
  background-size: 155% auto;
  background-position: 48% 18%;
}

.academy-home-choice[data-home-mode="member-week"] .home-door-sigil::before {
  background-image: url("/stem-rover-lab/assets/dungeon-academy-first-quest-ai.webp?v=ai-oracle-v2");
  background-size: 160% auto;
  background-position: 50% 34%;
}

.academy-home-choice[data-home-mode="learn"] .home-door-sigil::before {
  background-image: url("/stem-rover-lab/assets/clockwork-dragon-boss.png");
}

.academy-home-choice[data-home-mode="cast"] .home-door-sigil::before {
  background-image: url("/stem-rover-lab/assets/dungeon-academy-dragon-sprite.webp?v=academy-sampler-copy-v38");
  background-size: 118% auto;
}

.academy-home-choice[data-home-mode="academy"] .home-door-sigil::before {
  background-image: url("/stem-rover-lab/assets/dungeon-academy-arena.png");
}

.academy-home-choice[data-home-mode="parent"] .home-door-sigil::before {
  background-image: url("/stem-rover-lab/assets/dungeon-academy-mastery-celebration-ai.webp?v=ai-oracle-v2");
  background-size: 150% auto;
  background-position: 50% 46%;
}

.academy-home-choice:hover,
.academy-home-choice:focus-visible {
  transform: translateY(-2px);
  border-color: rgb(242 201 76 / 0.62);
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 18px 34px rgb(0 0 0 / 0.3), 0 0 24px rgb(242 201 76 / 0.1);
}

.academy-home-choice:hover::before,
.academy-home-choice:focus-visible::before {
  opacity: 0.42;
  filter: saturate(1.05) contrast(1.08) brightness(0.72);
  transform: scale(1.08);
}

.academy-home-choice:hover .home-door-sigil,
.academy-home-choice:focus-visible .home-door-sigil {
  animation: homeSigilPulse 760ms var(--motion);
}

.academy-home-choice.primary-choice {
  border-color: rgb(242 201 76 / 0.58);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.12), 0 16px 34px rgb(0 0 0 / 0.3), 0 0 32px rgb(242 201 76 / 0.09);
}

.academy-home-choice.member-choice {
  border-color: rgb(158 255 189 / 0.44);
}

.academy-home-choice.parent-choice {
  border-color: rgb(85 183 217 / 0.42);
}

.academy-home-choice span {
  text-shadow: 0 2px 10px rgb(0 0 0 / 0.82);
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.academy-home-choice b {
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.98rem, 1.3vw, 1.16rem);
  line-height: 1.08;
  text-shadow: 0 3px 16px rgb(0 0 0 / 0.82);
}

.academy-home-choice small {
  color: #ddcea0;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgb(0 0 0 / 0.88);
}

.certificate-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 35%, rgb(242 201 76 / 0.16), transparent 34rem),
    rgb(7 5 3 / 0.9);
  backdrop-filter: blur(8px);
}

.certificate-overlay.hidden {
  display: none;
}

.certificate-card {
  width: min(680px, 100%);
  padding: clamp(22px, 4vw, 36px);
  border: 2px solid rgb(242 201 76 / 0.66);
  border-radius: 10px;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgb(242 201 76 / 0.14), transparent 56%),
    linear-gradient(145deg, #2a1c0e, #0b0704);
  box-shadow: 0 0 0 5px #050302, 0 28px 80px rgb(0 0 0 / 0.55);
}

.certificate-card h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
}

.certificate-card p:not(.kicker) {
  color: #e5d5a2;
  line-height: 1.45;
}

.certificate-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0;
}

.certificate-stats span {
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.36);
  border-radius: 8px;
  background: #090604;
  color: var(--muted);
}

.certificate-stats b {
  display: block;
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1.45rem;
}

.demo-upgrade-overlay {
  position: fixed;
  inset: 0;
  z-index: 62;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 36px);
  background:
    radial-gradient(circle at 50% 28%, rgb(242 201 76 / 0.2), transparent 30rem),
    radial-gradient(circle at 78% 76%, rgb(85 183 217 / 0.12), transparent 28rem),
    rgb(7 5 3 / 0.92);
  backdrop-filter: blur(10px);
}

.demo-upgrade-overlay.hidden {
  display: none;
}

.demo-upgrade-card {
  position: relative;
  width: min(860px, 100%);
  max-height: calc(100dvh - 36px);
  display: grid;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(20px, 4vw, 34px);
  border: 2px solid rgb(242 201 76 / 0.64);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 18% 0%, rgb(242 201 76 / 0.18), transparent 46%),
    radial-gradient(ellipse at 92% 88%, rgb(85 183 217 / 0.12), transparent 42%),
    linear-gradient(145deg, rgb(40 27 14 / 0.98), rgb(8 6 4 / 0.99));
  box-shadow: 0 0 0 5px #050302, 0 34px 96px rgb(0 0 0 / 0.64), inset 0 0 42px rgb(242 201 76 / 0.08);
  animation: academyHomeRise 480ms var(--motion) both;
}

.demo-upgrade-card::before {
  content: "";
  position: absolute;
  inset: 11px;
  pointer-events: none;
  border: 1px solid rgb(242 201 76 / 0.2);
  border-radius: 7px;
}

.demo-upgrade-card > * {
  position: relative;
  z-index: 1;
}

.demo-upgrade-close {
  justify-self: end;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgb(255 246 215 / 0.16);
  border-radius: 7px;
  color: #d8c99b;
  background: rgb(0 0 0 / 0.28);
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.demo-upgrade-sigil {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(242 201 76 / 0.46);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, #fff0a3, var(--gold) 52%, #7c4315 100%);
  box-shadow: 0 0 44px rgb(242 201 76 / 0.22), inset 0 0 18px rgb(255 246 215 / 0.3);
}

.demo-upgrade-sigil picture,
.demo-upgrade-sigil img {
  width: 100%;
  height: 100%;
  display: block;
}

.demo-upgrade-sigil img {
  object-fit: cover;
  filter: saturate(1.08) contrast(1.08) brightness(1.04);
}

.demo-upgrade-sigil span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 32px;
  padding: 3px 5px;
  border: 1px solid rgb(255 246 215 / 0.5);
  border-radius: 999px;
  color: #140d05;
  background: linear-gradient(180deg, #fff0a3, #d6a536);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.4);
  font: 1000 0.66rem "JetBrains Mono", Consolas, monospace;
  text-align: center;
}

.demo-upgrade-card h2 {
  margin: 0;
  max-width: 15ch;
  color: #fff4c6;
  font-size: clamp(2rem, 4.2vw, 4rem);
  line-height: 1.02;
  text-wrap: balance;
}

.demo-upgrade-card p:not(.kicker) {
  margin: 0;
  max-width: 70ch;
  color: #e5d5a2;
  line-height: 1.42;
}

.demo-decision-note {
  max-width: 70ch;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgb(158 255 189 / 0.22);
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgb(158 255 189 / 0.12), rgb(255 246 215 / 0.04)),
    rgb(0 0 0 / 0.18);
}

.demo-decision-note span {
  grid-row: span 2;
  align-self: stretch;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  border-right: 1px solid rgb(158 255 189 / 0.18);
  color: #9effbd;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-decision-note b {
  min-width: 0;
  color: #fff4c6;
  font-size: 0.9rem;
  line-height: 1.1;
}

.demo-decision-note small {
  min-width: 0;
  color: #cfe5c7;
  font-size: 0.7rem;
  line-height: 1.25;
}

.demo-parent-checklist {
  display: grid;
  gap: 10px;
  padding: clamp(13px, 1.8vw, 18px);
  border: 1px solid rgb(158 255 189 / 0.18);
  border-radius: 12px;
  background:
    radial-gradient(circle at 0% 0%, rgb(158 255 189 / 0.10), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.18)),
    rgb(0 0 0 / 0.22);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
}

.demo-parent-checklist-head {
  display: grid;
  gap: 4px;
}

.demo-parent-checklist-head span {
  color: #9effbd;
  font: 1000 0.62rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-parent-checklist-head h3,
.demo-parent-checklist-head p {
  margin: 0;
}

.demo-parent-checklist-head h3 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  line-height: 1.1;
}

.demo-parent-checklist-head p {
  max-width: 72ch;
  color: #d8c99b;
  font-size: 0.78rem;
  line-height: 1.34;
}

.demo-parent-checklist-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.demo-parent-checklist-grid article {
  min-width: 0;
  min-height: 112px;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgb(255 246 215 / 0.11);
  border-radius: 9px;
  background: rgb(0 0 0 / 0.22);
}

.demo-parent-checklist-grid article.complete {
  border-color: rgb(158 255 189 / 0.28);
}

.demo-parent-checklist-grid article.current,
.demo-parent-checklist-grid article.ready {
  border-color: rgb(242 201 76 / 0.35);
  background:
    radial-gradient(circle at 0% 0%, rgb(242 201 76 / 0.1), transparent 48%),
    rgb(0 0 0 / 0.22);
}

.demo-parent-checklist-grid article.pending {
  border-color: rgb(85 183 217 / 0.24);
}

.demo-parent-checklist-grid article.locked {
  opacity: 0.62;
}

.demo-parent-checklist-grid span {
  color: #9effbd;
  font: 1000 0.58rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-parent-checklist-grid b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.08;
}

.demo-parent-checklist-grid small {
  color: #cbbd94;
  font-size: 0.66rem;
  line-height: 1.26;
}

.demo-upgrade-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-upgrade-primary,
.demo-upgrade-secondary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 1000;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 180ms var(--motion), filter 180ms var(--motion);
}

.demo-upgrade-primary {
  border: 1px solid rgb(242 201 76 / 0.5);
  color: #130d05;
  background: linear-gradient(180deg, #fff0a3, var(--gold));
  box-shadow: 0 5px 0 #070503;
}

.demo-upgrade-secondary {
  border: 1px solid rgb(85 183 217 / 0.34);
  color: #dff8ff;
  background: rgb(85 183 217 / 0.1);
}

.demo-upgrade-primary:hover,
.demo-upgrade-primary:focus-visible,
.demo-upgrade-secondary:hover,
.demo-upgrade-secondary:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.intro-card {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: stretch;
  max-height: calc(100dvh - clamp(36px, 8vw, 84px));
  padding: clamp(18px, 3vw, 30px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 2px solid rgb(242 201 76 / 0.64);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 20% 8%, rgb(242 201 76 / 0.16), transparent 44%),
    radial-gradient(ellipse at 88% 82%, rgb(85 183 217 / 0.12), transparent 44%),
    linear-gradient(145deg, rgb(39 26 13 / 0.97), rgb(9 6 4 / 0.98));
  box-shadow: 0 0 0 5px #050302, 0 34px 90px rgb(0 0 0 / 0.62), inset 0 0 42px rgb(242 201 76 / 0.06);
  animation: introRise 720ms var(--motion) both;
}

.intro-card::before {
  content: "";
  position: absolute;
  inset: 11px;
  z-index: 0;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 7px;
  pointer-events: none;
}

.intro-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgb(242 201 76 / 0.32), transparent 14%, transparent 86%, rgb(242 201 76 / 0.22)),
    radial-gradient(circle at 34% 0%, rgb(255 226 138 / 0.08), transparent 24rem);
  mix-blend-mode: screen;
}

.intro-card > div {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.intro-copy {
  display: grid;
  align-content: center;
  gap: 12px;
}

.academy-brand-crest {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(242 201 76 / 0.48);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.24);
  box-shadow:
    0 0 0 6px rgb(242 201 76 / 0.045),
    0 18px 46px rgb(0 0 0 / 0.42),
    0 0 34px rgb(242 201 76 / 0.16);
}

.academy-brand-crest picture,
.academy-brand-crest img {
  width: 100%;
  height: 100%;
  display: block;
}

.academy-brand-crest img {
  object-fit: cover;
  filter: saturate(1.08) contrast(1.08) brightness(1.04);
}

.intro-portrait-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: clamp(390px, 56vh, 560px);
  overflow: hidden;
  border: 2px solid rgb(242 201 76 / 0.58);
  border-radius: 8px;
  box-shadow: inset 0 0 30px rgb(0 0 0 / 0.45), 0 18px 42px rgb(0 0 0 / 0.4), 0 0 30px rgb(85 183 217 / 0.1);
  animation: lyraPortraitFloat 5.6s ease-in-out infinite;
}

.intro-portrait-frame::before,
.intro-portrait-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.intro-portrait-frame::before {
  border-radius: 6px;
  background:
    radial-gradient(circle at 44% 37%, transparent 0 18%, rgb(85 183 217 / 0.1) 19%, transparent 30%),
    linear-gradient(135deg, rgb(242 201 76 / 0.22), transparent 24%, transparent 70%, rgb(85 183 217 / 0.14));
  mix-blend-mode: screen;
  opacity: 0.72;
}

.intro-portrait-frame::after {
  background:
    linear-gradient(104deg, transparent 4%, rgb(255 246 215 / 0.16) 12%, transparent 22%),
    radial-gradient(circle at 82% 31%, rgb(85 183 217 / 0.18), transparent 12%);
  transform: translateX(-120%);
  animation: lyraLightSweep 6.8s ease-in-out infinite;
}

.intro-card .intro-portrait {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.012);
}

.intro-book-shimmer,
.intro-dragon-eye,
.intro-rune {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.intro-book-shimmer {
  right: 1%;
  bottom: 12%;
  width: 44%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(85 183 217 / 0.38), transparent 66%);
  filter: blur(4px);
  mix-blend-mode: screen;
  opacity: 0.72;
  animation: introBookGlow 2.9s ease-in-out infinite;
}

.intro-dragon-eye {
  right: 7.6%;
  top: 31.5%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9feaff;
  box-shadow: 0 0 10px #9feaff, 0 0 22px rgb(85 183 217 / 0.9);
  animation: introDragonEye 3.2s ease-in-out infinite;
}

.intro-rune {
  width: 28px;
  height: 28px;
  border: 1px solid rgb(242 201 76 / 0.58);
  border-radius: 50%;
  box-shadow: inset 0 0 9px rgb(242 201 76 / 0.18), 0 0 16px rgb(242 201 76 / 0.2);
  opacity: 0.72;
  animation: introRuneFloat 6s ease-in-out infinite;
}

.intro-rune::before,
.intro-rune::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-top: 1px solid rgb(255 226 138 / 0.62);
  border-bottom: 1px solid rgb(85 183 217 / 0.42);
  transform: rotate(45deg);
}

.intro-rune::after {
  transform: rotate(-45deg);
}

.intro-rune-1 {
  left: 7%;
  top: 15%;
}

.intro-rune-2 {
  right: 12%;
  top: 10%;
  animation-delay: -2.2s;
}

.intro-rune-3 {
  left: 11%;
  bottom: 13%;
  animation-delay: -3.7s;
}

.intro-card h2 {
  margin: 0;
  max-width: 14ch;
  line-height: 1.02;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
}

.intro-ornament {
  width: min(320px, 78%);
  display: grid;
  grid-template-columns: minmax(28px, 1fr) 18px minmax(28px, 1fr);
  gap: 10px;
  align-items: center;
  margin: -1px 0 1px;
  color: var(--gold);
}

.intro-ornament span {
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
  box-shadow: 0 0 10px rgb(242 201 76 / 0.34);
}

.intro-ornament span:last-child {
  transform: scaleX(-1);
}

.intro-ornament i {
  width: 12px;
  height: 12px;
  justify-self: center;
  border: 1px solid currentColor;
  background: rgb(242 201 76 / 0.16);
  box-shadow: inset 0 0 7px rgb(242 201 76 / 0.2), 0 0 12px rgb(242 201 76 / 0.26);
  transform: rotate(45deg);
  animation: introOrnamentPulse 2.8s ease-in-out infinite;
}

.intro-card p:not(.kicker) {
  margin: 0;
  max-width: 58ch;
  color: #e4d4a4;
  line-height: 1.42;
}

.kid-quest-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgb(242 201 76 / 0.44);
  border-radius: 10px;
  background:
    radial-gradient(circle at 8% 8%, rgb(242 201 76 / 0.16), transparent 45%),
    linear-gradient(135deg, rgb(255 246 215 / 0.075), rgb(85 183 217 / 0.055)),
    rgb(0 0 0 / 0.2);
  box-shadow: inset 0 0 28px rgb(242 201 76 / 0.055), 0 14px 32px rgb(0 0 0 / 0.24);
}

.kid-quest-card h3 {
  margin: 3px 0 4px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
  line-height: 1.08;
}

.kid-quest-card p {
  max-width: 48ch !important;
  font-size: 0.88rem;
}

.intro-win-condition {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  width: min(100%, 540px);
  padding: 10px 12px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 999px;
  background:
    radial-gradient(circle at 0% 50%, rgb(242 201 76 / 0.18), transparent 36%),
    linear-gradient(90deg, rgb(255 246 215 / 0.08), rgb(85 183 217 / 0.055));
  box-shadow: inset 0 0 18px rgb(242 201 76 / 0.06);
}

.intro-win-condition span {
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.intro-win-condition b {
  min-width: 0;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.86rem, 1.45vw, 1rem);
  line-height: 1.1;
}

.kid-quest-card ol {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kid-quest-card li {
  min-width: 62px;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 9px;
  border: 1px solid rgb(255 246 215 / 0.14);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.22);
}

.kid-quest-card li span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #120d06;
  background: var(--gold);
  font: 1000 0.68rem "JetBrains Mono", Consolas, monospace;
}

.kid-quest-card li b {
  color: #f3e6bd;
  font-size: 0.65rem;
  line-height: 1;
  text-align: center;
}

.kid-quest-card li small {
  color: #bda873;
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
}

.intro-proof-promise {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgb(158 255 189 / 0.22);
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgb(158 255 189 / 0.11), rgb(85 183 217 / 0.05)),
    rgb(0 0 0 / 0.16);
}

.intro-proof-promise span {
  min-width: 82px;
  color: #9effbd;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.56rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intro-proof-promise b {
  min-width: 0;
  color: #fff4c6;
  font-size: 0.8rem;
  line-height: 1.18;
  overflow-wrap: break-word;
}

.intro-about-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.intro-parent-note {
  grid-template-columns: 1fr;
  padding: 0;
  border: 1px solid rgb(85 183 217 / 0.2);
  border-radius: 9px;
  background: rgb(0 0 0 / 0.14);
}

.intro-parent-note summary {
  min-height: 42px;
  cursor: pointer;
  list-style: none;
  padding: 11px 12px;
  color: #e8d6a2;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intro-parent-note summary::-webkit-details-marker {
  display: none;
}

.intro-parent-note summary::after {
  content: "+";
  float: right;
  color: var(--gold);
}

.intro-parent-note[open] summary::after {
  content: "–";
}

.intro-parent-note article {
  margin: 0 10px 10px;
}

.intro-about-strip article {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgb(85 183 217 / 0.2);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 12%, rgb(85 183 217 / 0.1), transparent 44%),
    rgb(0 0 0 / 0.18);
}

.intro-about-strip span {
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.56rem;
  font-weight: 1000;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.intro-about-strip b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.08;
}

.intro-about-strip small {
  color: #d5c493;
  font-size: 0.7rem;
  line-height: 1.32;
}

.login-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  margin: 6px 0 2px;
  padding: 14px;
  border: 1px solid rgb(85 183 217 / 0.38);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 20%, rgb(85 183 217 / 0.14), transparent 44%),
    linear-gradient(135deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.025));
  box-shadow: inset 0 0 24px rgb(85 183 217 / 0.08);
}

.parent-access-drawer {
  display: block;
  padding: 0;
}

.parent-access-drawer summary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.parent-access-drawer summary::-webkit-details-marker {
  display: none;
}

.parent-access-drawer summary::after {
  content: "Open";
  justify-self: end;
  padding: 6px 9px;
  border: 1px solid rgb(85 183 217 / 0.34);
  border-radius: 999px;
  color: #dff8ff;
  background: rgb(0 0 0 / 0.22);
  font-size: 0.66rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.parent-access-drawer[open] summary::after {
  content: "Close";
}

.parent-access-drawer summary b,
.parent-access-drawer summary small {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
}

.parent-access-drawer summary b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.1;
}

.parent-access-drawer summary small {
  margin-top: 3px;
  color: #d8c99b;
  font-size: 0.72rem;
  line-height: 1.3;
}

.parent-access-drawer summary:focus-visible {
  outline: 2px solid rgb(85 183 217 / 0.92);
  outline-offset: -4px;
}

.parent-access-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.login-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgb(242 201 76 / 0.12);
  border-radius: 6px;
}

.login-card > * {
  position: relative;
  z-index: 1;
}

.academy-gate-status {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, rgb(242 201 76 / 0.12), transparent 46%),
    rgb(0 0 0 / 0.22);
}

.academy-gate-status[data-state="complete"] {
  border-color: rgb(158 255 189 / 0.32);
}

.academy-gate-status b,
.academy-gate-status small {
  min-width: 0;
  overflow-wrap: break-word;
}

.academy-gate-status b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.92rem;
  line-height: 1.08;
}

.academy-gate-status small {
  color: #d8c99b;
  font-size: 0.72rem;
  line-height: 1.25;
}

.member-session-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgb(239 109 87 / 0.36);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(239 109 87 / 0.12), transparent 52%),
    rgb(0 0 0 / 0.2);
}

.member-session-panel[data-state="ready"],
.member-session-panel[data-state="complete"] {
  border-color: rgb(158 255 189 / 0.34);
  background:
    linear-gradient(135deg, rgb(158 255 189 / 0.12), transparent 52%),
    rgb(0 0 0 / 0.2);
}

.member-session-seal {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.42);
  border-radius: 50%;
  color: #120d06;
  background: linear-gradient(180deg, #fff0a3, var(--gold));
  font: 1000 0.72rem "JetBrains Mono", Consolas, monospace;
}

.member-session-panel b,
.member-session-panel small {
  min-width: 0;
  display: block;
  overflow-wrap: break-word;
}

.member-session-panel b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.1;
}

.member-session-panel small {
  margin-top: 3px;
  color: #d8c99b;
  font-size: 0.68rem;
  line-height: 1.24;
}

.membership-choice-panel,
.academy-offer-grid,
.demo-upgrade-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.access-plan-card {
  position: relative;
  min-width: 0;
  min-height: 128px;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.18)),
    rgb(0 0 0 / 0.18);
  box-shadow: inset 0 0 22px rgb(255 246 215 / 0.025);
}

.access-plan-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 0% 0%, rgb(242 201 76 / 0.12), transparent 52%),
    radial-gradient(circle at 100% 100%, rgb(85 183 217 / 0.08), transparent 48%);
  opacity: 0.75;
}

.access-plan-card.member {
  border-color: rgb(242 201 76 / 0.34);
  background:
    linear-gradient(180deg, rgb(242 201 76 / 0.08), rgb(0 0 0 / 0.18)),
    rgb(21 13 5 / 0.62);
}

.access-plan-card.current {
  border-color: rgb(158 255 189 / 0.36);
}

.access-plan-card > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.access-plan-card span {
  color: var(--gold);
  font-size: 0.57rem;
  font-weight: 1000;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.access-plan-card b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.95rem, 1.5vw, 1.18rem);
  line-height: 1.05;
  overflow-wrap: break-word;
}

.access-plan-card small {
  color: #d9caa0;
  font-size: 0.68rem;
  line-height: 1.24;
  overflow-wrap: break-word;
}

.access-plan-card a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  padding: 8px 10px;
  border: 1px solid rgb(242 201 76 / 0.42);
  border-radius: 7px;
  color: #130d05;
  background: linear-gradient(180deg, #fff0a3, var(--gold));
  font-size: 0.66rem;
  font-weight: 1000;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 4px 0 #070503;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), box-shadow 180ms var(--motion);
}

.access-plan-card.demo a {
  border-color: rgb(85 183 217 / 0.36);
  color: #dff8ff;
  background:
    radial-gradient(circle at 20% 20%, rgb(85 183 217 / 0.16), transparent 50%),
    rgb(9 20 24 / 0.72);
}

.access-plan-card a:hover,
.access-plan-card a:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.access-plan-card a:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #070503;
}

.access-plan-card.compact {
  min-height: 116px;
  padding: 10px;
}

.membership-enrollment-panel,
.academy-checkout-rail {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, rgb(242 201 76 / 0.12), transparent 54%),
    radial-gradient(circle at 100% 100%, rgb(85 183 217 / 0.08), transparent 50%),
    rgb(0 0 0 / 0.22);
  box-shadow: inset 0 0 24px rgb(255 246 215 / 0.03);
}

.membership-enrollment-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.membership-enrollment-head h3 {
  margin: 3px 0 4px;
  color: #fff4c6;
  font-size: clamp(1rem, 2vw, 1.22rem);
  line-height: 1.08;
}

.membership-enrollment-head p,
.academy-checkout-rail small {
  margin: 0;
  color: #d8c99b;
  font-size: 0.74rem;
  line-height: 1.34;
}

.membership-enrollment-head strong {
  min-width: 132px;
  padding: 7px 9px;
  border: 1px solid rgb(242 201 76 / 0.36);
  border-radius: 8px;
  color: #fff1ad;
  background: rgb(0 0 0 / 0.28);
  text-align: center;
  font: 900 0.64rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.membership-enrollment-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.membership-enrollment-step {
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-content: start;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.16)),
    rgb(0 0 0 / 0.22);
}

.membership-enrollment-step > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 50%;
  color: #180f05;
  background: linear-gradient(180deg, #fff0a3, var(--gold));
  font: 1000 0.72rem "JetBrains Mono", Consolas, monospace;
}

.membership-enrollment-step small {
  display: block;
  color: #9ee8ff;
  font-size: 0.56rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.membership-enrollment-step b {
  display: block;
  margin-top: 2px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.08;
  overflow-wrap: break-word;
}

.membership-enrollment-step p {
  margin: 4px 0 0;
  color: #d8c99b;
  font-size: 0.66rem;
  line-height: 1.24;
  overflow-wrap: break-word;
}

.membership-enrollment-step.complete {
  border-color: rgb(158 255 189 / 0.34);
  background: rgb(9 23 14 / 0.48);
}

.membership-enrollment-step.current,
.membership-enrollment-step.ready {
  border-color: rgb(242 201 76 / 0.34);
}

.membership-enrollment-step.pending {
  border-color: rgb(217 107 43 / 0.34);
  background: rgb(32 14 7 / 0.38);
}

.membership-enrollment-step.locked {
  opacity: 0.68;
}

.academy-checkout-rail {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
}

.academy-checkout-rail span {
  display: block;
  color: var(--gold);
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.academy-checkout-rail b {
  display: block;
  margin: 4px 0;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.98rem, 1.8vw, 1.2rem);
  line-height: 1.08;
}

.membership-enrollment-steps.compact .membership-enrollment-step {
  min-height: 90px;
  padding: 8px;
}

.membership-enrollment-steps.compact .membership-enrollment-step p {
  display: none;
}

.academy-gate-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.academy-gate-steps li {
  min-width: 0;
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 6px 5px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background: rgb(0 0 0 / 0.16);
  text-align: center;
}

.academy-gate-steps span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #120d06;
  background: var(--gold);
  font: 1000 0.68rem "JetBrains Mono", Consolas, monospace;
}

.academy-gate-steps b {
  color: #d9cda8;
  font-size: 0.62rem;
  line-height: 1.08;
}

.intro-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  gap: 10px;
  align-items: stretch;
}

.intro-actions .primary,
.intro-actions .secondary {
  width: 100%;
}

.intro-start-note {
  margin: -3px 0 0;
  color: #d8c99b !important;
  font: 800 0.67rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intro-voice-button {
  border-color: rgb(85 183 217 / 0.46);
  color: #dff8ff;
  background:
    radial-gradient(circle at 20% 20%, rgb(85 183 217 / 0.16), transparent 50%),
    #100c08;
  box-shadow: 0 5px 0 #070503;
}

.intro-card.lyra-speaking .intro-portrait-frame {
  box-shadow: inset 0 0 34px rgb(85 183 217 / 0.2), 0 20px 46px rgb(0 0 0 / 0.42), 0 0 36px rgb(85 183 217 / 0.28);
  animation: lyraPortraitSpeak 840ms var(--motion) infinite alternate;
}

.intro-card.lyra-speaking .intro-rune {
  opacity: 1;
  border-color: rgb(85 183 217 / 0.72);
  box-shadow: inset 0 0 12px rgb(85 183 217 / 0.24), 0 0 24px rgb(85 183 217 / 0.34);
}

.intro-overlay.portal-opening::after {
  background:
    radial-gradient(circle at 50% 50%, rgb(242 201 76 / 0.32), transparent 17rem),
    radial-gradient(circle at 50% 50%, transparent 20%, rgb(5 4 3 / 0.78) 100%);
}

.intro-card.portal-opening {
  animation: introPortalOpen 520ms cubic-bezier(0.18, 0.9, 0.25, 1.18) both;
}

.gmail-button {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid rgb(242 201 76 / 0.5);
  border-radius: 8px;
  color: #130d05;
  background: #fff7dd;
  box-shadow: 0 5px 0 #070503;
  cursor: pointer;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gmail-button.hidden {
  display: none;
}

.google-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background:
    conic-gradient(from -30deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
  font-family: Arial, sans-serif;
  font-weight: 900;
}

.gmail-form {
  display: grid;
  gap: 8px;
}

.gmail-form.hidden {
  display: none;
}

.gmail-form label {
  color: var(--gold-soft);
  font-weight: 900;
}

.gmail-form div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 8px;
}

.gmail-form input {
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid rgb(242 201 76 / 0.44);
  border-radius: 8px;
  color: var(--text);
  background: #080604;
  font: inherit;
}

.gmail-form p {
  margin: 0;
  color: #d9c997 !important;
  font-size: 0.86rem;
}

.player-badge,
.account-chip {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgb(242 201 76 / 0.36);
  border-radius: 8px;
  background: #090604;
}

.player-badge.hidden {
  display: none;
}

.player-badge > span,
.account-chip > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #130d05;
  background: linear-gradient(145deg, var(--gold), #9feaff);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 900;
}

.player-badge b,
.player-badge small,
.account-chip b,
.account-chip small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-badge b,
.account-chip b {
  color: #fff9df;
}

.player-badge small,
.account-chip small {
  color: var(--muted);
  font-size: 0.76rem;
}

.player-badge button,
.account-chip button {
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid rgb(242 201 76 / 0.42);
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgb(255 255 255 / 0.04);
  cursor: pointer;
  font-weight: 900;
}

.game-shell {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  overflow: hidden;
  transition: grid-template-columns 240ms var(--motion);
}

.game-shell.chain-hot .arena {
  box-shadow: inset 0 0 70px rgb(242 201 76 / 0.16);
}

.game-shell.chain-hot .challenge-card {
  border-color: rgb(85 183 217 / 0.72);
  box-shadow: 0 0 0 5px #070503, 0 22px 42px rgb(0 0 0 / 0.32), 0 0 34px rgb(85 183 217 / 0.18);
}

.arena {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 100vh;
  overflow: hidden;
  border-right: 1px solid rgb(242 201 76 / 0.22);
  background:
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px),
    radial-gradient(ellipse at center, rgb(242 201 76 / 0.08), transparent 56%),
    linear-gradient(180deg, #100d12 0%, #20130c 62%, #090604 100%);
  background-size: 58px 58px, 58px 58px, auto, auto;
}

.arena::before,
.arena::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.arena::before {
  background:
    radial-gradient(ellipse at 30% 70%, rgb(85 183 217 / 0.16), transparent 28rem),
    radial-gradient(ellipse at 72% 62%, rgb(242 201 76 / 0.14), transparent 24rem),
    linear-gradient(180deg, rgb(5 3 2 / 0.06), rgb(5 3 2 / 0.32));
  mix-blend-mode: screen;
  opacity: 0.72;
}

.arena::after {
  background:
    linear-gradient(90deg, rgb(5 3 2 / 0.36), transparent 18%, transparent 76%, rgb(5 3 2 / 0.42)),
    radial-gradient(ellipse at center, transparent 42%, rgb(5 3 2 / 0.36) 86%);
  opacity: 0.82;
}

.arena.shake {
  animation: arenaShake 360ms ease;
}

.fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 11;
}

.phase-banner {
  --phase-accent: var(--gold);
  position: absolute;
  left: 50%;
  top: 8%;
  z-index: 13;
  width: max-content;
  max-width: min(520px, calc(100% - 40px));
  min-width: 0;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  overflow: hidden;
  padding: 12px 18px;
  border: 1px solid color-mix(in srgb, var(--phase-accent) 66%, transparent);
  border-radius: 999px;
  color: var(--phase-accent);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--phase-accent) 13%, transparent), transparent 42%),
    rgb(8 6 4 / 0.9);
  box-shadow: 0 0 28px color-mix(in srgb, var(--phase-accent) 24%, transparent), inset 0 1px 0 rgb(255 246 215 / 0.08);
  font-family: Cinzel, Georgia, serif;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translate(-50%, -16px);
  opacity: 0;
  pointer-events: none;
}

.phase-banner[data-tone="success"] { --phase-accent: #79e8a5; }
.phase-banner[data-tone="review"] { --phase-accent: #ffbd66; }
.phase-banner[data-tone="record"] { --phase-accent: #8fe7ff; }

.phase-banner .phase-sigil {
  width: 12px;
  height: 12px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 16%, transparent);
  box-shadow: 0 0 13px color-mix(in srgb, currentColor 34%, transparent);
  transform: rotate(45deg);
}

.phase-banner .phase-label { min-width: 0; }

.phase-banner .phase-trail {
  height: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
  opacity: 0.62;
}

.phase-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 28%, rgb(255 255 255 / 0.16) 48%, transparent 68%);
  transform: translateX(-140%);
  pointer-events: none;
}

.game-shell[data-focus="today"] .phase-banner,
.game-shell[data-focus="learn"] .phase-banner,
.game-shell[data-focus="cast"] .phase-banner {
  left: clamp(18px, 3vw, 36px);
  right: clamp(18px, 3vw, 36px);
  top: clamp(160px, 22vh, 218px);
  width: auto;
  max-width: none;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.1;
  text-align: left;
  transform: translateY(-10px);
}

.game-shell[data-focus="today"] .phase-banner.show,
.game-shell[data-focus="learn"] .phase-banner.show,
.game-shell[data-focus="cast"] .phase-banner.show {
  animation-name: phaseBannerInset;
}

.phase-banner.show {
  animation: phaseBanner 2.2s ease forwards;
}

.phase-banner.show::after {
  animation: phaseRuneSweep 900ms 120ms ease-out both;
}

.arena-director {
  --arena-accent: var(--gold);
  position: absolute;
  top: clamp(18px, 4vh, 38px);
  left: clamp(18px, 3vw, 36px);
  z-index: 12;
  width: min(430px, calc(100% - 36px));
  min-width: 0;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--arena-accent) 42%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--arena-accent) 18%, transparent), transparent 42%),
    linear-gradient(145deg, rgb(18 12 7 / 0.86), rgb(5 3 2 / 0.72));
  box-shadow: 0 16px 38px rgb(0 0 0 / 0.3), inset 0 1px 0 rgb(255 246 215 / 0.12);
  backdrop-filter: blur(10px);
}

.arena-director::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgb(255 246 215 / 0.08);
  border-radius: 5px;
  pointer-events: none;
}

.arena-director span,
.arena-director strong,
.arena-director p,
.arena-signal-row {
  position: relative;
  z-index: 1;
}

.arena-director > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--arena-accent);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.arena-director > span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--arena-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--arena-accent) 72%, transparent);
}

.arena-director strong {
  display: block;
  margin-top: 5px;
  color: #fff6d7;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.65vw, 1.34rem);
  line-height: 1.08;
  text-wrap: balance;
}

.arena-director p {
  max-width: 44ch;
  margin: 6px 0 0;
  color: #d9c99a;
  font-size: 0.86rem;
  line-height: 1.36;
}

.arena-signal-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 11px;
}

.arena-signal {
  min-width: 0;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  padding: 6px 7px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 5px;
  color: #d9c99a;
  background: rgb(255 246 215 / 0.035);
  font-size: 0.64rem;
  font-weight: 900;
}

.arena-signal i {
  width: 10px;
  height: 10px;
  border: 1px solid color-mix(in srgb, var(--arena-accent) 46%, transparent);
  border-radius: 50%;
  background: rgb(5 3 2 / 0.76);
  box-shadow: inset 0 0 8px rgb(0 0 0 / 0.5);
}

.arena-signal b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arena-signal.current {
  border-color: color-mix(in srgb, var(--arena-accent) 58%, transparent);
  color: #fff6d7;
  background: color-mix(in srgb, var(--arena-accent) 13%, rgb(5 3 2 / 0.72));
  box-shadow: 0 0 18px color-mix(in srgb, var(--arena-accent) 12%, transparent);
}

.arena-signal.current i {
  background: var(--arena-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--arena-accent) 72%, transparent);
  animation: arenaSignalPulse 1.4s ease-in-out infinite;
}

.arena-signal.complete i {
  background: linear-gradient(135deg, #fff6d7, var(--arena-accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--arena-accent) 46%, transparent);
}

.arena-signal.locked {
  opacity: 0.48;
}

.arena-director[data-domain="science"] { --arena-accent: var(--moss); }
.arena-director[data-domain="physics"] { --arena-accent: var(--aether); }
.arena-director[data-domain="engineering"] { --arena-accent: var(--ember); }
.arena-director[data-domain="ai"] { --arena-accent: var(--violet); }

.arena-cinematic-light {
  --arena-light: var(--gold);
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.78;
  mix-blend-mode: screen;
}

.arena[data-domain="science"] .arena-cinematic-light { --arena-light: var(--moss); }
.arena[data-domain="physics"] .arena-cinematic-light { --arena-light: var(--aether); }
.arena[data-domain="engineering"] .arena-cinematic-light { --arena-light: var(--ember); }
.arena[data-domain="ai"] .arena-cinematic-light { --arena-light: var(--violet); }

.arena-cinematic-light span {
  position: absolute;
  top: -22%;
  width: 18%;
  height: 136%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--arena-light) 17%, transparent) 46%, transparent 100%),
    radial-gradient(ellipse at 50% 52%, color-mix(in srgb, var(--arena-light) 20%, transparent), transparent 64%);
  filter: blur(14px);
  opacity: 0.36;
  transform: rotate(15deg) translate3d(0, 0, 0);
  animation: arenaLightSweep 8.5s ease-in-out infinite;
}

.arena-cinematic-light span:nth-child(1) { left: 8%; animation-delay: -2.2s; }
.arena-cinematic-light span:nth-child(2) { left: 42%; width: 24%; animation-delay: -5.4s; }
.arena-cinematic-light span:nth-child(3) { left: 74%; animation-delay: -7.1s; }

.arena[data-focus="learn"] .arena-cinematic-light {
  opacity: 0.98;
}

.arena[data-focus="cast"] .arena-cinematic-light {
  opacity: 0.66;
}

.arena-focus-runes {
  --rune-accent: var(--gold);
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 6vh, 52px);
  z-index: 12;
  width: min(520px, calc(100% - 52px));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--rune-accent) 28%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.2)),
    rgb(5 3 2 / 0.58);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 12px 28px rgb(0 0 0 / 0.24);
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
  pointer-events: none;
}

.arena[data-domain="science"] .arena-focus-runes { --rune-accent: var(--moss); }
.arena[data-domain="physics"] .arena-focus-runes { --rune-accent: var(--aether); }
.arena[data-domain="engineering"] .arena-focus-runes { --rune-accent: var(--ember); }
.arena[data-domain="ai"] .arena-focus-runes { --rune-accent: var(--violet); }

.arena-focus-runes span {
  min-width: 0;
  min-height: 42px;
  display: grid;
  gap: 4px;
  place-items: center;
  padding: 6px 4px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  color: #d9c99a;
  background: rgb(0 0 0 / 0.18);
  opacity: 0.62;
}

.arena-focus-runes b {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.62rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arena-focus-runes i {
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: rgb(255 246 215 / 0.14);
  box-shadow: inset 0 0 8px rgb(0 0 0 / 0.4);
}

.arena[data-step="teach"] .arena-focus-runes [data-stage-rune="teach"],
.arena[data-step="practice"] .arena-focus-runes [data-stage-rune="practice"],
.arena[data-step="evidence"] .arena-focus-runes [data-stage-rune="evidence"],
.arena[data-step="challenge"] .arena-focus-runes [data-stage-rune="challenge"],
.arena[data-step="record"] .arena-focus-runes [data-stage-rune="record"],
.arena[data-step="review"] .arena-focus-runes [data-stage-rune="teach"] {
  border-color: color-mix(in srgb, var(--rune-accent) 58%, transparent);
  color: #fff6d7;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rune-accent) 18%, transparent), transparent 64%),
    rgb(0 0 0 / 0.24);
  opacity: 1;
}

.arena[data-step="teach"] .arena-focus-runes [data-stage-rune="teach"] i,
.arena[data-step="practice"] .arena-focus-runes [data-stage-rune="practice"] i,
.arena[data-step="evidence"] .arena-focus-runes [data-stage-rune="evidence"] i,
.arena[data-step="challenge"] .arena-focus-runes [data-stage-rune="challenge"] i,
.arena[data-step="record"] .arena-focus-runes [data-stage-rune="record"] i,
.arena[data-step="review"] .arena-focus-runes [data-stage-rune="teach"] i {
  background: var(--rune-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--rune-accent) 72%, transparent);
  animation: arenaRunePulse 1.5s ease-in-out infinite;
}

.spell-beam {
  position: absolute;
  left: 23%;
  bottom: 30%;
  z-index: 10;
  width: 0;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--gold), #fff9d5, var(--aether), transparent);
  box-shadow: 0 0 22px rgb(242 201 76 / 0.85), 0 0 42px rgb(85 183 217 / 0.45);
  transform: rotate(-8deg);
  opacity: 0;
  pointer-events: none;
}

.spell-beam.fire {
  animation: spellBeam 620ms ease forwards;
}

@media (min-width: 961px) {
  .arena {
    height: 100vh;
  }
}

.art-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgb(8 6 4 / 0.18), rgb(8 6 4 / 0.02) 48%, rgb(8 6 4 / 0.24)),
    linear-gradient(180deg, rgb(8 6 4 / 0.02), rgb(8 6 4 / 0.52)),
    url("/stem-rover-lab/assets/dungeon-academy-arena.webp?v=ai-arena-art-1") center / cover no-repeat;
  opacity: 0.96;
  filter: saturate(1.12) contrast(1.04) brightness(0.92);
}

.art-backdrop::before {
  content: "";
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(circle at 30% 44%, rgb(85 183 217 / 0.18), transparent 24rem),
    radial-gradient(circle at 76% 42%, rgb(242 201 76 / 0.14), transparent 20rem),
    linear-gradient(105deg, transparent 0 28%, rgb(85 183 217 / 0.08) 44%, transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.72;
  animation: arenaAetherPulse 7s infinite alternate ease-in-out;
}

.art-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 48% 70%, transparent 0 36%, rgb(8 6 4 / 0.48) 82%),
    radial-gradient(circle at 54% 35%, rgb(242 201 76 / 0.08), transparent 28rem);
}

.magic-motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.magic-motes span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px rgb(242 201 76 / 0.9);
  animation: moteFloat 9s infinite ease-in-out;
}

.magic-motes span:nth-child(1) {
  left: 20%;
  top: 58%;
}

.magic-motes span:nth-child(2) {
  left: 37%;
  top: 43%;
  animation-delay: -3s;
  background: var(--aether);
}

.magic-motes span:nth-child(3) {
  left: 59%;
  top: 50%;
  animation-delay: -5s;
}

.magic-motes span:nth-child(4) {
  left: 73%;
  top: 34%;
  animation-delay: -1.5s;
  background: var(--violet);
}

.magic-motes span:nth-child(5) {
  left: 48%;
  top: 70%;
  animation-delay: -7s;
}

.moon {
  position: absolute;
  top: 7%;
  left: 13%;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgb(255 244 189 / 0.16), rgb(232 184 75 / 0.08) 46%, transparent 72%);
  box-shadow: 0 0 4rem rgb(242 201 76 / 0.18);
  mix-blend-mode: screen;
  opacity: 0.28;
  pointer-events: none;
}

.torch {
  position: absolute;
  top: 20%;
  width: 18px;
  height: 160px;
  background: linear-gradient(#4b2b17, #1a1009);
  border: 3px solid #090604;
  z-index: 4;
  opacity: 0.38;
  pointer-events: none;
}

.torch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -54px;
  width: 58px;
  height: 72px;
  transform: translateX(-50%);
  border-radius: 48% 52% 45% 45%;
  background:
    radial-gradient(circle at 50% 70%, #fff5b0 0 16%, transparent 17%),
    radial-gradient(circle at 50% 55%, #f2c94c 0 34%, transparent 35%),
    radial-gradient(circle at 50% 40%, #d96b2b 0 56%, transparent 57%);
  filter: drop-shadow(0 0 18px rgb(242 201 76 / 0.7));
  animation: flame 1.2s infinite alternate ease-in-out;
}

.torch-left {
  left: 7%;
}

.torch-right {
  right: 7%;
}

.gate {
  position: absolute;
  left: 50%;
  bottom: 19%;
  width: min(70vw, 640px);
  height: min(62vw, 560px);
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0.48;
  pointer-events: none;
}

.tower,
.arch {
  position: absolute;
  bottom: 0;
  border: 5px solid #090604;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgb(58 49 40 / 0.54), rgb(23 17 12 / 0.46));
  background-size: 34px 34px, auto;
  box-shadow: inset 0 0 30px rgb(0 0 0 / 0.28), 0 20px 40px rgb(0 0 0 / 0.24);
}

.tower {
  width: 22%;
  height: 78%;
}

.tower::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: -15%;
  height: 18%;
  background: repeating-linear-gradient(90deg, rgb(32 22 15 / 0.62) 0 22%, rgb(63 49 36 / 0.56) 23% 39%);
  border: 5px solid rgb(9 6 4 / 0.72);
}

.tower-left {
  left: 0;
}

.tower-right {
  right: 0;
}

.arch {
  left: 17%;
  right: 17%;
  height: 62%;
  border-radius: 46% 46% 0 0;
}

.arch::after {
  content: "";
  position: absolute;
  left: 19%;
  right: 19%;
  bottom: -6px;
  height: 78%;
  border-radius: 48% 48% 0 0;
  border: 5px solid rgb(9 6 4 / 0.68);
  background: radial-gradient(ellipse at top, rgb(85 183 217 / 0.24), rgb(5 4 3 / 0.46) 72%);
}

.runes {
  position: absolute;
  left: 50%;
  top: 12%;
  width: min(90%, 560px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
  gap: 5px;
  transform: translateX(-50%);
  z-index: 5;
  opacity: 0.72;
}

.rune {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 2px solid rgb(242 201 76 / 0.34);
  border-radius: 5px;
  color: var(--muted);
  background: #120d08;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 900;
}

.rune.current {
  color: var(--ink);
  background: var(--gold);
  box-shadow: 0 0 22px rgb(242 201 76 / 0.55);
}

.rune.cleared {
  color: #fff9db;
  background: var(--moss);
}

.bridge {
  --bridge-progress: 0%;
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 13%;
  height: 76px;
  border: 5px solid #090604;
  transform: perspective(520px) rotateX(62deg);
  transform-origin: bottom;
  background:
    linear-gradient(90deg, rgb(242 201 76 / 0.55) var(--bridge-progress), transparent 0),
    repeating-linear-gradient(90deg, #4a301d 0 10%, #2b1a11 10% 14%);
  z-index: 4;
  opacity: 0.74;
}

.battle-ground {
  --arena-accent: var(--gold);
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: 5;
  width: min(74vw, 700px);
  height: 148px;
  border: 1px solid color-mix(in srgb, var(--arena-accent) 36%, transparent);
  border-radius: 50%;
  transform: translateX(-50%) perspective(620px) rotateX(62deg);
  transform-origin: center bottom;
  background:
    repeating-radial-gradient(ellipse at center, color-mix(in srgb, var(--arena-accent) 16%, transparent) 0 2px, transparent 3px 24px),
    radial-gradient(ellipse at center, color-mix(in srgb, var(--arena-accent) 22%, transparent), transparent 62%),
    linear-gradient(90deg, transparent, rgb(255 246 215 / 0.08), transparent);
  box-shadow:
    0 0 46px color-mix(in srgb, var(--arena-accent) 16%, transparent),
    inset 0 0 34px rgb(0 0 0 / 0.42);
  opacity: 0.78;
  pointer-events: none;
  animation: battleGroundPulse 3.8s ease-in-out infinite;
}

.battle-ground::before,
.battle-ground::after {
  content: "";
  position: absolute;
  inset: 18px 12%;
  border: 1px solid color-mix(in srgb, var(--arena-accent) 28%, transparent);
  border-radius: 50%;
}

.battle-ground::after {
  inset: 38px 25%;
  border-style: dashed;
  opacity: 0.62;
}

.battle-ground span {
  position: absolute;
  top: 44%;
  width: 20%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--arena-accent) 58%, transparent), transparent);
  opacity: 0.7;
}

.battle-ground span:nth-child(1) { left: 10%; transform: rotate(12deg); }
.battle-ground span:nth-child(2) { left: 40%; transform: rotate(-4deg); }
.battle-ground span:nth-child(3) { right: 10%; transform: rotate(-16deg); }

.arena[data-domain="science"] .battle-ground { --arena-accent: var(--moss); }
.arena[data-domain="physics"] .battle-ground { --arena-accent: var(--aether); }
.arena[data-domain="engineering"] .battle-ground { --arena-accent: var(--ember); }
.arena[data-domain="ai"] .battle-ground { --arena-accent: var(--violet); }

.arena-character-spotlights {
  --spotlight-accent: var(--gold);
  position: absolute;
  left: 50%;
  bottom: 8%;
  z-index: 6;
  width: min(78vw, 720px);
  height: 250px;
  transform: translateX(-50%);
  pointer-events: none;
}

.arena[data-domain="science"] .arena-character-spotlights { --spotlight-accent: var(--moss); }
.arena[data-domain="physics"] .arena-character-spotlights { --spotlight-accent: var(--aether); }
.arena[data-domain="engineering"] .arena-character-spotlights { --spotlight-accent: var(--ember); }
.arena[data-domain="ai"] .arena-character-spotlights { --spotlight-accent: var(--violet); }

.arena-character-spotlights span {
  position: absolute;
  bottom: 0;
  width: 34%;
  height: 72%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--spotlight-accent) 30%, transparent), transparent 58%),
    radial-gradient(ellipse at center, rgb(255 246 215 / 0.12), transparent 68%);
  filter: blur(10px);
  opacity: 0.44;
  transform: perspective(520px) rotateX(58deg) scaleX(1.08);
  transform-origin: center bottom;
  animation: characterSpotlightBreathe 4.8s ease-in-out infinite;
}

.arena-character-spotlights [data-character-spotlight="hero"] {
  left: 4%;
}

.arena-character-spotlights [data-character-spotlight="dragon"] {
  right: 0;
  width: 46%;
  height: 82%;
  animation-delay: -2.1s;
}

.arena[data-step="teach"] .arena-character-spotlights [data-character-spotlight="hero"],
.arena[data-step="practice"] .arena-character-spotlights [data-character-spotlight="hero"],
.arena[data-step="evidence"] .arena-character-spotlights [data-character-spotlight="hero"] {
  opacity: 0.62;
}

.arena[data-focus="cast"] .arena-character-spotlights [data-character-spotlight="dragon"],
.arena[data-step="challenge"] .arena-character-spotlights [data-character-spotlight="dragon"] {
  opacity: 0.68;
  filter: blur(9px) saturate(1.16);
}

.arena-foreground-haze {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  height: 24%;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent, rgb(5 3 2 / 0.58)),
    radial-gradient(ellipse at 22% 70%, rgb(85 183 217 / 0.16), transparent 36%),
    radial-gradient(ellipse at 74% 78%, rgb(242 201 76 / 0.15), transparent 42%);
  opacity: 0.72;
  mix-blend-mode: screen;
}

.arena-foreground-haze::before,
.arena-foreground-haze::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(242 201 76 / 0.42), transparent);
  opacity: 0.68;
}

.arena-foreground-haze::after {
  left: 18%;
  right: 18%;
  bottom: 42%;
  opacity: 0.22;
}

.arena[data-focus="cast"] .monster,
.arena[data-step="challenge"] .monster {
  opacity: 1;
  filter: drop-shadow(0 0 24px rgb(217 107 43 / 0.42)) saturate(1.08);
}

.arena[data-step="teach"] .hero,
.arena[data-step="practice"] .hero,
.arena[data-step="evidence"] .hero {
  filter: drop-shadow(0 0 22px rgb(85 183 217 / 0.25)) brightness(1.06);
}

.battle-line {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: min(70vw, 640px);
  height: 310px;
  transform: translateX(-50%);
  z-index: 7;
}

.hero {
  position: absolute;
  left: 7%;
  bottom: 0;
  width: 170px;
  height: 230px;
  transform-origin: 50% 95%;
  animation: heroIdle 3.1s infinite ease-in-out;
  filter: drop-shadow(0 0 18px rgb(85 183 217 / 0.18));
  will-change: transform, filter;
}

.hero-aura {
  position: absolute;
  left: 24px;
  top: 10px;
  width: 138px;
  height: 210px;
  border-radius: 48% 48% 28% 28%;
  background:
    radial-gradient(circle at 54% 18%, rgb(242 201 76 / 0.24), transparent 22%),
    radial-gradient(ellipse at 50% 70%, rgb(85 183 217 / 0.22), transparent 58%);
  filter: blur(12px);
  opacity: 0.48;
  animation: heroAuraPulse 2.4s infinite ease-in-out;
  pointer-events: none;
}

.hero-shadow {
  position: absolute;
  left: 32px;
  right: 18px;
  bottom: -4px;
  height: 18px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.34);
  filter: blur(4px);
  transform: scaleX(0.9);
  animation: heroShadowPulse 3.1s infinite ease-in-out;
  pointer-events: none;
}

.cast-rings {
  position: absolute;
  left: 112px;
  top: 28px;
  z-index: 6;
  width: 76px;
  height: 76px;
  pointer-events: none;
}

.cast-rings span {
  position: absolute;
  inset: 8px;
  border: 2px solid rgb(242 201 76 / 0.7);
  border-radius: 50%;
  box-shadow: 0 0 16px rgb(242 201 76 / 0.38);
  opacity: 0;
  transform: scale(0.42);
}

.cast-rings span:nth-child(2) {
  inset: 0;
  border-color: rgb(85 183 217 / 0.62);
  animation-delay: 90ms;
}

.hero-sprite {
  position: absolute;
  left: -42px;
  bottom: -6px;
  z-index: 5;
  width: 238px;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter:
    drop-shadow(0 16px 18px rgb(0 0 0 / 0.34))
    drop-shadow(0 0 14px rgb(85 183 217 / 0.2));
  transform-origin: 50% 92%;
  animation: heroSpriteFloat 3.1s infinite ease-in-out;
}

.hero-sprite ~ .hood,
.hero-sprite ~ .face,
.hero-sprite ~ .robe,
.hero-sprite ~ .staff {
  opacity: 0;
}

.hood {
  position: absolute;
  left: 32px;
  top: 0;
  width: 110px;
  height: 105px;
  border: 5px solid #090604;
  border-radius: 52% 52% 34% 34%;
  background: linear-gradient(145deg, #314366, #151d34);
  transform-origin: 50% 82%;
  animation: heroHoodBreathe 3.1s infinite ease-in-out;
  will-change: transform;
}

.face {
  position: absolute;
  left: 51px;
  top: 38px;
  width: 72px;
  height: 46px;
  border: 4px solid #090604;
  border-radius: 45%;
  background: #f1c899;
  z-index: 2;
  animation: heroFaceBreathe 3.1s infinite ease-in-out;
}

.face span {
  position: absolute;
  top: 18px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #090604;
  transform-origin: 50% 50%;
  animation: heroBlink 5.4s infinite ease-in-out;
}

.face span:first-child {
  left: 20px;
}

.face span:last-child {
  right: 20px;
}

.robe {
  position: absolute;
  left: 22px;
  top: 82px;
  width: 128px;
  height: 140px;
  border: 5px solid #090604;
  border-radius: 32px 32px 16px 16px;
  background:
    linear-gradient(90deg, transparent 47%, rgb(242 201 76 / 0.5) 48% 52%, transparent 53%),
    linear-gradient(#263a5d, #12182e);
  transform-origin: 50% 100%;
  animation: robeSway 3.1s infinite ease-in-out;
  overflow: hidden;
}

.robe::after {
  content: "";
  position: absolute;
  inset: 8px 18px;
  border-radius: 22px 22px 10px 10px;
  background: linear-gradient(180deg, rgb(85 183 217 / 0.2), transparent 62%);
  opacity: 0.34;
  animation: robeRunes 2.4s infinite ease-in-out;
  pointer-events: none;
}

.staff {
  position: absolute;
  left: 6px;
  top: 42px;
  width: 14px;
  height: 188px;
  border: 3px solid #090604;
  border-radius: 99px;
  background: #7b4a26;
  transform: rotate(13deg);
  transform-origin: 50% 92%;
  animation: staffIdle 3.1s infinite ease-in-out;
  will-change: transform;
}

.staff::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -38px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(242 201 76 / 0.26), transparent 62%);
  transform: translateX(-50%) scale(0.78);
  opacity: 0.62;
  filter: blur(3px);
  animation: staffHalo 1.8s infinite ease-in-out;
  pointer-events: none;
}

.staff i {
  position: absolute;
  left: 50%;
  top: -26px;
  width: 38px;
  height: 38px;
  border: 4px solid #090604;
  border-radius: 50%;
  background: var(--gold);
  transform: translateX(-50%);
  box-shadow: 0 0 22px rgb(242 201 76 / 0.75);
  animation: staffGemPulse 1.65s infinite ease-in-out;
}

.spell-orb {
  position: absolute;
  left: 144px;
  top: 49px;
  width: 38px;
  height: 38px;
  border: 3px solid rgb(9 6 4 / 0.76);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, #fffbe2 0 15%, transparent 16%),
    radial-gradient(circle, var(--gold), rgb(85 183 217 / 0.74) 70%);
  box-shadow: 0 0 22px rgb(242 201 76 / 0.75), 0 0 30px rgb(85 183 217 / 0.38);
  animation: orbPulse 2.2s infinite ease-in-out;
  z-index: 7;
  mix-blend-mode: screen;
}

.spell-orb[data-domain="science"] {
  background: var(--moss);
  box-shadow: 0 0 24px rgb(77 139 87 / 0.75);
}

.spell-orb[data-domain="physics"] {
  background: var(--aether);
  box-shadow: 0 0 24px rgb(85 183 217 / 0.75);
}

.spell-orb[data-domain="engineering"] {
  background: var(--ember);
  box-shadow: 0 0 24px rgb(217 107 43 / 0.75);
}

.spell-orb[data-domain="ai"] {
  background: var(--violet);
  box-shadow: 0 0 24px rgb(109 91 208 / 0.75);
}

.monster {
  position: absolute;
  right: 0;
  bottom: 4px;
  width: 286px;
  height: 230px;
  transform-origin: 55% 82%;
  animation: dragonIdle 3.2s infinite ease-in-out;
  filter: drop-shadow(0 0 20px rgb(217 107 43 / 0.28));
  opacity: 0.86;
  will-change: transform, filter;
}

.dragon-aura {
  position: absolute;
  inset: 18px 12px 4px 8px;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 70% 38%, rgb(242 201 76 / 0.28), transparent 18%),
    radial-gradient(ellipse at 56% 65%, rgb(217 107 43 / 0.18), transparent 54%);
  filter: blur(10px);
  opacity: 0.58;
  animation: dragonAura 2.7s infinite ease-in-out;
  pointer-events: none;
}

.dragon-breath {
  position: absolute;
  right: 220px;
  top: 72px;
  z-index: 6;
  width: 188px;
  height: 58px;
  border-radius: 999px 18px 18px 999px;
  background:
    radial-gradient(circle at 94% 50%, #fffbe2 0 9%, transparent 10%),
    radial-gradient(circle at 68% 45%, rgb(242 201 76 / 0.72), transparent 25%),
    linear-gradient(90deg, transparent 0%, rgb(85 183 217 / 0.22) 28%, rgb(85 183 217 / 0.72) 64%, rgb(255 244 189 / 0.9) 100%);
  clip-path: polygon(0 50%, 16% 18%, 66% 6%, 100% 38%, 100% 66%, 66% 94%, 16% 82%);
  filter: drop-shadow(0 0 18px rgb(85 183 217 / 0.82)) drop-shadow(0 0 24px rgb(242 201 76 / 0.36));
  transform: scaleX(0.18) translateX(46px);
  transform-origin: 100% 50%;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

.dragon-breath span {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9edfff;
  box-shadow: 0 0 14px rgb(85 183 217 / 0.8);
  opacity: 0;
}

.dragon-breath span:nth-child(1) {
  left: 28px;
  top: 15px;
}

.dragon-breath span:nth-child(2) {
  left: 74px;
  top: 35px;
  background: var(--gold);
}

.dragon-breath span:nth-child(3) {
  left: 116px;
  top: 9px;
}

.monster-sprite {
  position: absolute;
  right: -56px;
  bottom: -32px;
  z-index: 4;
  width: 376px;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter:
    drop-shadow(0 18px 20px rgb(0 0 0 / 0.38))
    drop-shadow(0 0 18px rgb(242 201 76 / 0.2));
  transform-origin: 55% 84%;
  animation: dragonSpriteBreathe 2.8s infinite ease-in-out;
}

.monster-sprite ~ .horn,
.monster-sprite ~ .wing,
.monster-sprite ~ .dragon-head,
.monster-sprite ~ .dragon-body,
.monster-sprite ~ .dragon-core,
.monster-sprite ~ .tail {
  opacity: 0;
}

.dragon-body,
.dragon-head {
  position: absolute;
  border: 6px solid #090604;
  background: linear-gradient(145deg, #a7352b, #4b1110);
  will-change: transform, filter;
}

.dragon-body {
  left: 56px;
  bottom: 20px;
  width: 176px;
  height: 118px;
  border-radius: 48% 46% 36% 36%;
  transform-origin: 55% 86%;
  animation: dragonBreathe 2.8s infinite ease-in-out;
}

.dragon-head {
  right: 18px;
  top: 42px;
  width: 104px;
  height: 82px;
  border-radius: 42% 44% 32% 32%;
  z-index: 3;
  transform-origin: 36% 72%;
  animation: dragonHeadBob 2.8s infinite ease-in-out;
}

.dragon-eye {
  position: absolute;
  top: 30px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgb(242 201 76 / 0.75);
  animation: dragonBlink 4.8s infinite ease-in-out;
}

.dragon-eye:first-child {
  left: 28px;
}

.dragon-eye:last-child {
  right: 24px;
}

.horn {
  position: absolute;
  top: 12px;
  width: 42px;
  height: 58px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: var(--paper);
  border: 4px solid #090604;
  z-index: 4;
}

.horn-left {
  right: 90px;
  transform: rotate(-22deg);
}

.horn-right {
  right: 28px;
  transform: rotate(22deg);
}

.wing {
  position: absolute;
  top: 22px;
  width: 108px;
  height: 112px;
  border: 5px solid #090604;
  background: linear-gradient(145deg, #7b1f1b, #2b0d0c);
  clip-path: polygon(0 100%, 34% 0, 100% 100%, 62% 72%, 38% 100%);
  z-index: 1;
  will-change: transform;
}

.wing-left {
  left: 12px;
  transform-origin: 86% 88%;
  animation: wingLeftGlide 3.2s infinite ease-in-out;
}

.wing-right {
  right: 54px;
  transform-origin: 18% 88%;
  animation: wingRightGlide 3.2s infinite ease-in-out;
}

.dragon-core {
  position: absolute;
  left: 122px;
  bottom: 86px;
  z-index: 6;
  width: 34px;
  height: 34px;
  border: 4px solid #090604;
  border-radius: 50%;
  background:
    radial-gradient(circle at 44% 38%, #fff9d8 0 16%, transparent 17%),
    radial-gradient(circle, var(--gold) 0 48%, #9b3d26 68%, #31110c 100%);
  box-shadow: 0 0 18px rgb(242 201 76 / 0.78), inset 0 0 10px rgb(255 255 255 / 0.18);
  animation: dragonCorePulse 1.55s infinite ease-in-out;
  pointer-events: none;
}

.tail {
  position: absolute;
  left: 0;
  bottom: 52px;
  width: 110px;
  height: 42px;
  border: 6px solid #090604;
  border-radius: 50% 0 0 50%;
  border-right: 0;
  transform-origin: 100% 56%;
  animation: tailSwish 2.7s infinite ease-in-out;
}

.quest-panel {
  position: relative;
  z-index: 20;
  isolation: isolate;
  min-width: 0;
  max-width: 100vw;
  min-height: 100dvh;
  padding: clamp(20px, 3.8vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    radial-gradient(ellipse at 18% 0%, rgb(242 201 76 / 0.12), transparent 48%),
    radial-gradient(ellipse at 92% 18%, rgb(85 183 217 / 0.08), transparent 34%),
    linear-gradient(180deg, rgb(21 17 11 / 0.94), rgb(7 5 3 / 0.98));
  box-shadow: inset 1px 0 0 rgb(255 246 215 / 0.07);
}

.quest-panel > * {
  min-width: 0;
}

.quest-panel::before {
  content: "";
  position: fixed;
  inset: 0 0 0 50%;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgb(242 201 76 / 0.035)),
    radial-gradient(circle at 78% 12%, rgb(85 183 217 / 0.08), transparent 26rem);
  opacity: 0.8;
}

.deck-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
  padding: 9px 12px;
  border: 1px solid rgb(242 201 76 / 0.3);
  border-radius: 8px;
  color: var(--gold);
  background:
    linear-gradient(90deg, rgb(242 201 76 / 0.13), transparent 70%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(255 246 215 / 0.015));
  font-family: Cinzel, Georgia, serif;
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.deck-label::after {
  content: "";
  height: 1px;
  grid-column: 1 / -1;
  background: linear-gradient(90deg, rgb(242 201 76 / 0.42), transparent);
}

.deck-label span {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.deck-label b {
  color: #9fb1a5;
  font-family: Lato, "Trebuchet MS", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
}

.focus-rail,
.academy-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 6px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.16)),
    rgb(7 5 3 / 0.56);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.academy-tabs {
  border-color: rgb(85 183 217 / 0.24);
  background:
    linear-gradient(180deg, rgb(85 183 217 / 0.06), rgb(0 0 0 / 0.14)),
    rgb(7 5 3 / 0.48);
}

.focus-rail button,
.academy-tabs button {
  min-width: 0;
  min-height: 52px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #d9cda8;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition:
    transform 180ms var(--motion),
    border-color 180ms var(--motion),
    background 180ms var(--motion),
    color 180ms var(--motion);
}

.focus-rail button:hover,
.focus-rail button:focus-visible,
.academy-tabs button:hover,
.academy-tabs button:focus-visible {
  border-color: rgb(242 201 76 / 0.28);
  color: #fff1bd;
  background: rgb(255 246 215 / 0.045);
}

.focus-rail button:active,
.academy-tabs button:active {
  transform: translateY(1px);
}

.focus-rail button.active,
.academy-tabs button.active {
  border-color: rgb(242 201 76 / 0.44);
  color: #130d05;
  background: linear-gradient(180deg, #fff0a3, var(--gold));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    0 10px 24px rgb(242 201 76 / 0.12);
}

.academy-tabs button.active {
  background: linear-gradient(180deg, #dff6ff, var(--aether));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.38),
    0 10px 24px rgb(85 183 217 / 0.12);
}

.focus-rail span,
.academy-tabs span {
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}

.focus-rail b,
.academy-tabs b {
  overflow-wrap: break-word;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.05;
  text-transform: uppercase;
}

.academy-command-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid rgb(85 183 217 / 0.26);
  border-radius: 10px;
  background:
    radial-gradient(circle at 0% 0%, rgb(85 183 217 / 0.12), transparent 36%),
    radial-gradient(circle at 100% 0%, rgb(242 201 76 / 0.1), transparent 34%),
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.18)),
    rgb(5 8 9 / 0.58);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 16px 32px rgb(0 0 0 / 0.16);
}

.academy-command-main {
  display: grid;
  gap: 7px;
  align-content: center;
  min-width: 0;
}

.academy-command-main span,
.academy-command-metrics span {
  color: #9ee8ff;
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.academy-command-main h2 {
  margin: 0;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.34rem;
  line-height: 1.05;
  text-wrap: balance;
}

.academy-command-main p {
  margin: 0;
  max-width: 72ch;
  color: #d9d5bc;
  font-size: 0.84rem;
  line-height: 1.36;
}

.academy-command-main button {
  width: fit-content;
  min-height: 38px;
  margin-top: 2px;
  padding: 8px 13px;
  border: 1px solid rgb(242 201 76 / 0.4);
  border-radius: 8px;
  color: #130d05;
  background: linear-gradient(180deg, #fff0a3, var(--gold));
  box-shadow: 0 10px 22px rgb(242 201 76 / 0.12);
  cursor: pointer;
  font-weight: 1000;
}

.academy-command-main button:hover,
.academy-command-main button:focus-visible {
  filter: brightness(1.08);
  border-color: rgb(242 201 76 / 0.66);
}

.academy-command-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.academy-command-metrics article {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.22);
}

.academy-command-metrics b,
.academy-command-metrics small {
  min-width: 0;
  overflow-wrap: break-word;
}

.academy-command-metrics b {
  color: #fff5cd;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.94rem;
  line-height: 1.08;
}

.academy-command-metrics small {
  color: #cfdabc;
  font-size: 0.64rem;
  line-height: 1.18;
}

.quest-header { order: 1; }
.deck-label-quest { order: 2; }
.focus-rail { order: 3; }
.academy-command-bar { order: 4; }
.academy-tabs { order: 5; }
.course-map-panel { order: 3; }
.spellbook { order: 3; }
.curriculum-map { order: 3; }
.lesson-scroll { order: 4; }
.boss-card { order: 4; }
.challenge-card { order: 5; }
.meters { order: 5; }
.method-lab { order: 6; }
.mentor-strip { order: 6; }
.codex { order: 7; }
.dm-panel { order: 7; }
.controls { order: 8; }
.lab-reactor { order: 8; }
.deck-label-coach { order: 20; }
.session-goals { order: 21; }
.tutor-ledger { order: 22; }
.review-queue { order: 23; }
.quest-oracle { order: 24; }
.lab-notebook { order: 25; }
.deck-label-progress { order: 40; }
.rank-ladder { order: 41; }
.academy-record { order: 42; }
.learning-snapshot { order: 43; }
.academy-realms { order: 44; }
.academy-familiar { order: 45; }
.next-move-card { order: 46; }
.spell-card-vault { order: 47; }
.challenge-forge { order: 48; }
.guild-projects { order: 49; }
.relic-shelf { order: 50; }
.adventure-log { order: 51; }
.deck-label-setup { order: 60; }
.media-controls { order: 61; }
.account-chip { order: 63; }
.difficulty-paths { order: 64; }

.quest-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 18px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(242 201 76 / 0.16);
}

.quest-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: min(360px, 56%);
  height: 1px;
  background: linear-gradient(90deg, rgb(242 201 76 / 0.72), rgb(242 201 76 / 0));
  pointer-events: none;
}

.quest-header h1 {
  text-wrap: balance;
}

.kicker,
.mini-label {
  letter-spacing: 0.16em;
}

.media-controls {
  align-self: flex-start;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding: 8px;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 50%, rgb(242 201 76 / 0.12), transparent 44%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.16)),
    rgb(255 255 255 / 0.03);
  box-shadow:
    inset 0 1px 0 rgb(255 246 215 / 0.08),
    0 12px 28px rgb(0 0 0 / 0.18);
}

.sound-toggle {
  min-width: 0;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid rgb(242 201 76 / 0.48);
  border-radius: 8px;
  color: var(--gold-soft);
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.08), rgb(0 0 0 / 0.1)),
    rgb(255 255 255 / 0.035);
  cursor: pointer;
  font-weight: 900;
  overflow-wrap: break-word;
  transition:
    transform 160ms var(--motion),
    border-color 160ms ease,
    background 160ms ease,
    filter 160ms ease;
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
  border-color: rgb(242 201 76 / 0.72);
  filter: brightness(1.08);
}

.sound-toggle:active {
  transform: translateY(1px);
}

.account-chip {
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  min-height: 64px;
  padding: 10px;
  border-color: rgb(242 201 76 / 0.28);
  background:
    radial-gradient(circle at 10% 20%, rgb(85 183 217 / 0.12), transparent 34%),
    linear-gradient(180deg, rgb(255 246 215 / 0.05), rgb(0 0 0 / 0.18)),
    rgb(9 6 4 / 0.88);
  box-shadow:
    inset 0 1px 0 rgb(255 246 215 / 0.08),
    0 12px 30px rgb(0 0 0 / 0.2);
}

.account-chip::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgb(255 246 215 / 0.06);
  border-radius: 6px;
  pointer-events: none;
}

.account-chip > * {
  position: relative;
  z-index: 1;
}

.account-chip button:hover,
.account-chip button:focus-visible,
.player-badge button:hover,
.player-badge button:focus-visible {
  border-color: rgb(242 201 76 / 0.72);
  background: rgb(242 201 76 / 0.12);
}

.account-chip button:active,
.player-badge button:active {
  transform: translateY(1px);
}

.difficulty-paths {
  padding: 12px;
  border: 1px solid rgb(85 183 217 / 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 16%, rgb(85 183 217 / 0.12), transparent 38%),
    rgb(255 255 255 / 0.04);
}

.difficulty-paths summary {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, auto);
  gap: 10px;
  align-items: center;
  list-style: none;
  cursor: pointer;
}

.difficulty-paths summary::-webkit-details-marker {
  display: none;
}

.difficulty-paths summary span,
.difficulty-paths summary b,
.difficulty-paths summary small {
  display: block;
}

.difficulty-paths summary b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
}

.difficulty-paths summary small {
  margin-top: 3px;
  color: #d3e9ea;
  font-size: 0.76rem;
  line-height: 1.22;
}

.difficulty-paths summary strong {
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  border: 1px solid rgb(85 183 217 / 0.42);
  border-radius: 8px;
  color: #9ee8ff;
  background: #050a0c;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.82rem;
  text-align: center;
}

.difficulty-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, auto);
  gap: 10px;
  align-items: center;
}

.difficulty-head p {
  margin: 0;
  color: #d3e9ea;
  line-height: 1.25;
}

.difficulty-head strong {
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  border: 1px solid rgb(85 183 217 / 0.42);
  border-radius: 8px;
  color: #9ee8ff;
  background: #050a0c;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.82rem;
  text-align: center;
}

.difficulty-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.difficulty-options button {
  min-height: 64px;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.14);
  border-radius: 8px;
  color: #d8c690;
  background: #080604;
  cursor: pointer;
  text-align: left;
}

.difficulty-options b,
.difficulty-options span {
  display: block;
}

.difficulty-options b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
}

.difficulty-options span {
  margin-top: 3px;
  color: #9fb1a5;
  font-size: 0.68rem;
  line-height: 1.18;
}

.difficulty-options button.active {
  border-color: rgb(242 201 76 / 0.62);
  background:
    radial-gradient(circle at top, rgb(242 201 76 / 0.16), transparent 72%),
    #080604;
  box-shadow: 0 0 18px rgb(242 201 76 / 0.12);
}

.sampler-focus-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.48fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 8% 0%, rgb(242 201 76 / 0.15), transparent 42%),
    linear-gradient(135deg, rgb(29 19 10 / 0.92), rgb(8 6 4 / 0.96));
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.26), inset 0 1px 0 rgb(255 246 215 / 0.12);
}

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

.sampler-focus-card h2 {
  margin-top: 3px;
  max-width: 20ch;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.34rem, 2vw, 1.95rem);
  line-height: 1.02;
}

.sampler-focus-card p {
  margin-top: 7px;
  max-width: 58ch;
  color: #ddcfaa;
  font-size: 0.95rem;
  line-height: 1.34;
}

.sampler-focus-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sampler-focus-path li {
  min-height: 58px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgb(242 201 76 / 0.18);
  border-radius: 10px;
  background: rgb(0 0 0 / 0.18);
  text-align: center;
}

.sampler-focus-path span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #130d05;
  background: #f2c94c;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 800;
}

.sampler-focus-path b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sampler-focus-primary {
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid rgb(255 233 150 / 0.7);
  border-radius: 10px;
  color: #130d05;
  background: linear-gradient(180deg, #ffe996, #d6a536 58%, #9a661a);
  box-shadow: 0 6px 0 #090604, 0 0 28px rgb(242 201 76 / 0.2);
  cursor: pointer;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sampler-focus-primary:hover,
.sampler-focus-primary:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.class-path-ribbon {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.2fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgb(85 183 217 / 0.32);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 8% 0%, rgb(85 183 217 / 0.16), transparent 42%),
    linear-gradient(135deg, rgb(5 14 17 / 0.92), rgb(8 6 4 / 0.97));
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.24), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.class-path-main h2,
.class-path-main p {
  margin: 0;
}

.class-path-main h2 {
  margin-top: 4px;
  max-width: 24ch;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.22rem, 1.8vw, 1.78rem);
  line-height: 1.04;
  text-wrap: balance;
}

.class-path-main p {
  margin-top: 7px;
  max-width: 58ch;
  color: #d8c99d;
  font-size: 0.92rem;
  line-height: 1.36;
}

.class-path-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.class-path-steps .student-day-step {
  min-height: 76px;
  padding: 9px 7px;
  border-color: rgb(85 183 217 / 0.2);
  background: rgb(0 0 0 / 0.16);
}

.class-path-steps .student-day-step > span {
  width: 24px;
  height: 24px;
  font-size: 0.68rem;
}

.class-path-steps .student-day-step small {
  font-size: 0.58rem;
}

.class-path-steps .student-day-step b {
  font-size: 0.72rem;
}

.class-path-steps .student-day-step em {
  display: none;
}

.class-path-steps .student-day-step.current {
  border-color: rgb(242 201 76 / 0.56);
  background:
    radial-gradient(circle at 12% 0%, rgb(242 201 76 / 0.16), transparent 62%),
    rgb(0 0 0 / 0.22);
  box-shadow: 0 0 22px rgb(242 201 76 / 0.12);
}

.class-path-primary {
  min-height: 52px;
  min-width: 142px;
  padding: 0 16px;
  border: 1px solid rgb(255 233 150 / 0.7);
  border-radius: 10px;
  color: #130d05;
  background: linear-gradient(180deg, #ffe996, #d6a536 58%, #9a661a);
  box-shadow: 0 6px 0 #090604, 0 0 28px rgb(242 201 76 / 0.18);
  cursor: pointer;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.class-path-primary:hover,
.class-path-primary:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

@media (max-width: 980px) {
  .class-path-ribbon {
    grid-template-columns: 1fr;
  }

  .class-path-primary {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .class-path-ribbon {
    gap: 12px;
    padding: 13px;
  }

  .class-path-steps {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .class-path-steps .student-day-step {
    min-width: 94px;
    scroll-snap-align: start;
  }
}

.rank-ladder {
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 10% 10%, rgb(242 201 76 / 0.12), transparent 34%),
    rgb(255 255 255 / 0.045);
}

.rank-ladder-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
  gap: 12px;
  align-items: center;
}

.rank-ladder-head p {
  margin: 0;
  color: #d8c690;
  line-height: 1.3;
}

.rank-ladder-head strong {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  border: 1px solid rgb(242 201 76 / 0.42);
  border-radius: 8px;
  color: var(--gold);
  background: #090604;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.9rem;
  text-align: center;
}

.rank-track {
  height: 13px;
  margin-top: 12px;
  border: 2px solid #090604;
  border-radius: 999px;
  background: #080604;
  overflow: hidden;
}

.rank-track i {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #57c987, var(--aether), var(--gold));
  box-shadow: 0 0 18px rgb(242 201 76 / 0.32);
  transition: width 360ms ease;
}

.rank-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.rank-step {
  min-height: 54px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 7px 5px;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 8px;
  color: #9fb1a5;
  background: rgb(255 255 255 / 0.035);
  text-align: center;
}

.rank-step b,
.rank-step small {
  overflow-wrap: break-word;
}

.rank-step b {
  color: #d8c690;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.7rem;
  line-height: 1.05;
}

.rank-step small {
  color: #9fb1a5;
  font-size: 0.64rem;
}

.rank-step.complete {
  border-color: rgb(242 201 76 / 0.42);
  background: rgb(242 201 76 / 0.1);
}

.rank-step.current {
  border-color: rgb(85 183 217 / 0.62);
  box-shadow: 0 0 18px rgb(85 183 217 / 0.16);
}

.academy-record {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 16%, rgb(242 201 76 / 0.1), transparent 40%),
    rgb(255 255 255 / 0.035);
}

.daily-quest {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 10px;
  align-items: center;
}

.daily-quest p {
  margin: 0;
  color: #e8d9aa;
  line-height: 1.25;
}

.daily-quest strong {
  min-height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.45);
  border-radius: 8px;
  color: var(--gold);
  background: #090604;
  font-family: "JetBrains Mono", Consolas, monospace;
}

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

.record-grid span {
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 6px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 8px;
  color: var(--muted);
  background: #080604;
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.record-grid b {
  display: block;
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1.08rem;
}

.progress-board-panel {
  --progress-accent: var(--gold);
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 9px;
  background:
    radial-gradient(circle at 0% 0%, rgb(242 201 76 / 0.12), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.18)),
    rgb(8 7 5 / 0.66);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
}

.progress-board-panel[data-domain="math"] { --progress-accent: var(--gold); }
.progress-board-panel[data-domain="science"] { --progress-accent: #6fcf97; }
.progress-board-panel[data-domain="physics"] { --progress-accent: var(--aether); }
.progress-board-panel[data-domain="engineering"] { --progress-accent: var(--ember); }
.progress-board-panel[data-domain="ai"] { --progress-accent: #b59cff; }

.progress-board-panel[data-state="daily-complete"] {
  border-color: rgb(158 255 189 / 0.3);
  background:
    radial-gradient(circle at 0% 0%, rgb(158 255 189 / 0.1), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.18)),
    rgb(8 7 5 / 0.66);
}

.progress-board-head,
.progress-board-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.progress-board-head h3,
.progress-board-head p,
.progress-board-focus p {
  margin: 0;
}

.progress-board-head h3 {
  margin-top: 3px;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.12;
  text-wrap: balance;
}

.progress-board-head p {
  margin-top: 5px;
  color: #d4c8a5;
  font-size: 0.78rem;
  line-height: 1.32;
}

.progress-board-head strong {
  min-width: 96px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--progress-accent) 42%, transparent);
  border-radius: 8px;
  color: #fff1ad;
  background: rgb(0 0 0 / 0.24);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.66rem;
  text-align: center;
  text-transform: uppercase;
}

.record-command-board {
  --record-command-accent: var(--progress-accent);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(240px, 0.82fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--record-command-accent) 34%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 9% 0%, color-mix(in srgb, var(--record-command-accent) 14%, transparent), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.14)),
    rgb(0 0 0 / 0.2);
}

.record-command-board[data-state="synced"] {
  border-color: rgb(158 255 189 / 0.34);
}

.record-command-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
  align-content: end;
}

.record-command-copy span,
.record-command-rail span {
  color: color-mix(in srgb, var(--record-command-accent) 86%, #fff4c6);
  font: 1000 0.58rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.record-command-copy h3 {
  max-width: 15ch;
  margin: 0;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.02;
  text-wrap: balance;
}

.record-command-copy p {
  max-width: 64ch;
  margin: 0;
  color: #d9cda8;
  font-size: 0.82rem;
  line-height: 1.38;
}

.record-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.record-command-actions button {
  min-height: 38px;
  padding: 9px 13px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 1000;
  text-transform: uppercase;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), border-color 180ms var(--motion);
}

.record-command-actions button:first-child {
  border: 1px solid color-mix(in srgb, var(--record-command-accent) 58%, transparent);
  color: #120d06;
  background: linear-gradient(180deg, #fff2b8, var(--record-command-accent));
}

.record-command-actions button:last-child {
  border: 1px solid rgb(242 201 76 / 0.24);
  color: #fff1ad;
  background: rgb(0 0 0 / 0.22);
}

.record-command-actions button:hover,
.record-command-actions button:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.record-command-actions button:active {
  transform: translateY(1px);
}

.record-command-rail {
  display: grid;
  gap: 7px;
}

.record-command-rail article {
  display: grid;
  gap: 3px;
  align-content: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background: rgb(0 0 0 / 0.18);
}

.record-command-rail b,
.record-command-rail small {
  min-width: 0;
  overflow-wrap: break-word;
}

.record-command-rail b {
  color: #fff5cd;
  font: 1000 0.9rem "JetBrains Mono", Consolas, monospace;
}

.record-command-rail small {
  color: #c8bb98;
  font-size: 0.64rem;
  line-height: 1.2;
}

.progress-board-main {
  grid-template-columns: minmax(0, 1.18fr) minmax(224px, 0.82fr);
}

.progress-board-focus {
  min-width: 0;
  min-height: 184px;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--progress-accent) 42%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--progress-accent) 16%, transparent), transparent 46%),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.18)),
    rgb(9 8 6 / 0.74);
}

.progress-board-focus span,
.progress-board-check span {
  color: var(--progress-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.progress-board-focus b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.32rem);
  line-height: 1.08;
  text-wrap: balance;
}

.progress-board-focus p {
  color: #d8caa0;
  font-size: 0.82rem;
  line-height: 1.36;
}

.progress-board-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 246 215 / 0.1);
}

.progress-board-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--progress-accent), #fff0a3);
}

.progress-board-evidence {
  display: grid;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid rgb(255 246 215 / 0.1);
}

.progress-board-evidence strong {
  color: #fff1ad;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.progress-board-evidence small {
  color: #bfb28f;
  font-size: 0.72rem;
  line-height: 1.28;
}

.progress-board-side {
  display: grid;
  gap: 8px;
}

.progress-board-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.progress-board-metrics span {
  min-height: 62px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.16);
}

.progress-board-metrics b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.05;
  overflow-wrap: break-word;
}

.progress-board-metrics small {
  color: #a99b78;
  font-size: 0.58rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.progress-board-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
}

.progress-board-primary,
.progress-board-secondary {
  min-height: 38px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 1000;
  text-transform: uppercase;
  transition: transform 180ms var(--motion), filter 180ms var(--motion);
}

.progress-board-primary {
  border: 1px solid color-mix(in srgb, var(--progress-accent) 58%, transparent);
  color: #120d06;
  background: linear-gradient(180deg, #fff2b8, var(--progress-accent));
  box-shadow: 0 4px 0 rgb(0 0 0 / 0.34);
}

.progress-board-secondary {
  border: 1px solid rgb(242 201 76 / 0.24);
  color: #fff1ad;
  background: rgb(0 0 0 / 0.22);
}

.progress-board-primary:hover,
.progress-board-primary:focus-visible,
.progress-board-secondary:hover,
.progress-board-secondary:focus-visible {
  filter: brightness(1.08);
}

.progress-board-primary:active,
.progress-board-secondary:active {
  transform: translateY(1px);
}

.progress-board-checklist {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.progress-board-check {
  min-height: 68px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.13)),
    rgb(0 0 0 / 0.14);
}

.progress-board-check.ready {
  border-color: rgb(158 255 189 / 0.28);
}

.progress-board-check.current {
  border-color: color-mix(in srgb, var(--progress-accent) 42%, transparent);
}

.progress-board-check.locked {
  opacity: 0.8;
}

.progress-board-check.ready span {
  color: #9effbd;
}

.progress-board-check b {
  color: #d8caa0;
  font-size: 0.72rem;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.first-proof-report {
  --proof-report-accent: #9effbd;
  scroll-margin-top: 128px;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(158 255 189 / 0.28);
  border-radius: 9px;
  background:
    radial-gradient(circle at 6% 0%, rgb(158 255 189 / 0.15), transparent 40%),
    radial-gradient(circle at 94% 18%, rgb(242 201 76 / 0.1), transparent 36%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.18)),
    rgb(5 8 6 / 0.7);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.first-proof-report:focus-visible {
  outline: 2px solid rgb(158 255 189 / 0.7);
  outline-offset: 3px;
}

.first-proof-report[data-state="draft"] {
  --proof-report-accent: #d6c39a;
  border-color: rgb(242 201 76 / 0.2);
}

.first-proof-report-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.first-proof-report-head h3,
.first-proof-report-head p,
.first-proof-report-feedback {
  margin: 0;
}

.first-proof-report-head h3 {
  margin-top: 3px;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.16rem;
  line-height: 1.08;
  text-wrap: balance;
}

.first-proof-report-head p,
.first-proof-report-feedback {
  color: #d8caa0;
  font-size: 0.8rem;
  line-height: 1.36;
}

.first-proof-report-head strong {
  min-width: 92px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--proof-report-accent) 40%, transparent);
  border-radius: 8px;
  color: #e8ffd7;
  background: rgb(0 0 0 / 0.22);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.66rem;
  text-align: center;
  text-transform: uppercase;
}

.first-proof-report-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid rgb(158 255 189 / 0.18);
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgb(158 255 189 / 0.12), rgb(242 201 76 / 0.07)),
    rgb(0 0 0 / 0.18);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.first-proof-report-summary article {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border-radius: 7px;
  background: rgb(0 0 0 / 0.18);
}

.first-proof-report-summary span,
.first-proof-report-summary b,
.first-proof-report-summary small {
  min-width: 0;
  display: block;
  overflow-wrap: break-word;
}

.first-proof-report-summary span {
  color: #9effbd;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.56rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.first-proof-report-summary b {
  color: #fff5cd;
  font-size: 0.86rem;
  line-height: 1.1;
}

.first-proof-report-summary small {
  color: #cfe5c7;
  font-size: 0.66rem;
  line-height: 1.18;
}

.first-proof-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 176px), 1fr));
  gap: 8px;
}

.first-proof-report-grid article {
  min-width: 0;
  min-height: 78px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.11);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.16)),
    rgb(0 0 0 / 0.13);
}

.first-proof-report-grid span,
.first-proof-report-grid b,
.first-proof-report-grid small {
  min-width: 0;
  display: block;
  overflow-wrap: break-word;
}

.first-proof-report-grid span {
  color: var(--proof-report-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.first-proof-report-grid b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.08;
}

.first-proof-report-grid small {
  color: #cfe5c7;
  font-size: 0.66rem;
  line-height: 1.22;
}

.first-proof-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.first-proof-report-actions .report-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.4);
  opacity: 0.55;
}

.progress-detail-panel {
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.16)),
    rgb(0 0 0 / 0.14);
}

.progress-detail-panel summary {
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  color: #fff1ad;
  cursor: pointer;
  list-style: none;
}

.progress-detail-panel summary::-webkit-details-marker {
  display: none;
}

.progress-detail-panel summary::before {
  content: "+";
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 7px;
  color: #120d06;
  background: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 1000;
}

.progress-detail-panel[open] summary::before {
  content: "-";
}

.progress-detail-panel summary span {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.88rem;
  line-height: 1.08;
}

.progress-detail-panel summary b {
  color: #bfb28f;
  font-size: 0.68rem;
  line-height: 1.2;
}

.progress-detail-panel > :not(summary) {
  margin: 10px;
}

.learning-snapshot {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(85 183 217 / 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 18%, rgb(85 183 217 / 0.12), transparent 38%),
    rgb(255 255 255 / 0.035);
}

.snapshot-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(82px, auto);
  gap: 10px;
  align-items: center;
}

.snapshot-head p {
  margin: 0;
  color: #d3e9ea;
  line-height: 1.25;
}

.snapshot-head strong {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  border: 1px solid rgb(85 183 217 / 0.42);
  border-radius: 8px;
  color: #9ee8ff;
  background: #050a0c;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.82rem;
}

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

.snapshot-grid span {
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: 7px;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 8px;
  background: #080604;
  text-align: center;
}

.snapshot-grid b,
.snapshot-grid small {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
}

.snapshot-grid b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.08;
}

.snapshot-grid small {
  margin-top: 3px;
  color: #9fb1a5;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.transcript-ledger {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 10px;
  background:
    radial-gradient(circle at 8% 14%, rgb(242 201 76 / 0.14), transparent 40%),
    radial-gradient(circle at 92% 10%, rgb(85 183 217 / 0.1), transparent 36%),
    linear-gradient(145deg, rgb(255 246 215 / 0.052), rgb(255 246 215 / 0.018)),
    rgb(8 6 4 / 0.78);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 14px 32px rgb(0 0 0 / 0.2);
}

.transcript-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(82px, auto);
  gap: 12px;
  align-items: center;
}

.transcript-head h3,
.transcript-head p {
  margin: 0;
}

.transcript-head h3 {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.08;
}

.transcript-head p {
  margin-top: 4px;
  color: #dfd0a2;
  font-size: 0.82rem;
  line-height: 1.3;
}

.transcript-head strong {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  border: 1px solid rgb(242 201 76 / 0.44);
  border-radius: 8px;
  color: var(--gold);
  background: #090604;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  text-align: center;
  text-transform: uppercase;
}

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

.transcript-metrics span {
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: 7px;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.24);
  text-align: center;
}

.transcript-metrics b,
.transcript-metrics small {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
}

.transcript-metrics b {
  color: #fff4c6;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.92rem;
}

.transcript-metrics small {
  color: #a99c78;
  font-size: 0.58rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.transcript-list {
  display: grid;
  gap: 7px;
}

.transcript-empty,
.transcript-entry {
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.22);
}

.transcript-empty {
  min-height: 46px;
  display: grid;
  place-items: center;
  color: #a99c78;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.transcript-entry {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px;
}

.transcript-entry > span {
  min-height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 8px;
  color: var(--gold);
  background: #090604;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 1000;
}

.transcript-entry b,
.transcript-entry p,
.transcript-entry small {
  margin: 0;
}

.transcript-entry b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.08;
}

.transcript-entry p {
  margin-top: 4px;
  color: #dfd0a2;
  font-size: 0.76rem;
  line-height: 1.28;
}

.transcript-entry small {
  display: block;
  margin-top: 6px;
  color: #9fb1a5;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.school-record-pack {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(85 183 217 / 0.32);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(85 183 217 / 0.12), transparent 42%),
    radial-gradient(circle at 90% 12%, rgb(158 255 189 / 0.1), transparent 38%),
    rgb(5 10 12 / 0.72);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 14px 34px rgb(0 0 0 / 0.22);
}

.record-pack-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(86px, auto);
  gap: 12px;
  align-items: center;
}

.record-pack-head h3,
.record-pack-head p,
.record-pack-feedback {
  margin: 0;
}

.record-pack-head h3 {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.08;
}

.record-pack-head p,
.record-pack-feedback {
  margin-top: 4px;
  color: #cdbf93;
  font-size: 0.78rem;
  line-height: 1.3;
}

.record-pack-head strong {
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  border: 1px solid rgb(85 183 217 / 0.38);
  border-radius: 8px;
  color: #9ee8ff;
  background: #050908;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  text-align: center;
  text-transform: uppercase;
}

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

.record-pack-card {
  min-height: 104px;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 10px;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 8px;
  background: rgb(8 6 4 / 0.7);
}

.record-pack-card.ready {
  border-color: rgb(158 255 189 / 0.28);
  background:
    linear-gradient(135deg, rgb(158 255 189 / 0.08), transparent 52%),
    rgb(8 6 4 / 0.7);
}

.record-pack-card b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.08;
}

.record-pack-card span {
  width: max-content;
  max-width: 100%;
  border: 1px solid rgb(85 183 217 / 0.24);
  border-radius: 999px;
  padding: 4px 7px;
  color: #9ee8ff;
  font: 900 0.58rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.record-pack-card.ready span {
  border-color: rgb(158 255 189 / 0.28);
  color: #9effbd;
}

.record-pack-card small {
  color: #cdbf93;
  font-size: 0.72rem;
  line-height: 1.22;
}

.record-pack-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.record-pack-actions button,
.record-pack-actions a {
  min-width: 0;
}

@media (max-width: 620px) {
  .transcript-head,
  .transcript-entry,
  .record-pack-head,
  .record-pack-actions {
    grid-template-columns: 1fr;
  }

  .transcript-head strong,
  .record-pack-head strong {
    justify-self: start;
  }

  .transcript-metrics,
  .record-pack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.school-portal,
.course-catalog {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(242 201 76 / 0.3);
  border-radius: 10px;
  background:
    radial-gradient(circle at 8% 14%, rgb(242 201 76 / 0.12), transparent 40%),
    radial-gradient(circle at 92% 20%, rgb(158 255 189 / 0.08), transparent 36%),
    rgb(255 255 255 / 0.035);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.school-portal-head,
.catalog-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(76px, auto);
  gap: 12px;
  align-items: center;
}

.school-portal-head h3,
.school-portal-head p,
.catalog-head p {
  margin: 0;
}

.school-portal-head h3 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.1;
}

.school-portal-head p,
.catalog-head p {
  margin-top: 4px;
  color: #dfd0a2;
  font-size: 0.84rem;
  line-height: 1.3;
}

.school-portal-head strong,
.catalog-head strong {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  border: 1px solid rgb(158 255 189 / 0.36);
  border-radius: 8px;
  color: #9effbd;
  background: #050908;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.guardian-board-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, rgb(242 201 76 / 0.1), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.18)),
    rgb(0 0 0 / 0.16);
}

.guardian-board-panel[data-state="synced"] {
  border-color: rgb(158 255 189 / 0.28);
  background:
    radial-gradient(circle at 0% 0%, rgb(158 255 189 / 0.1), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.18)),
    rgb(0 0 0 / 0.16);
}

.guardian-board-main {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(224px, 0.82fr);
  gap: 10px;
  align-items: start;
}

.guardian-board-focus {
  min-width: 0;
  min-height: 176px;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, rgb(242 201 76 / 0.14), transparent 46%),
    linear-gradient(180deg, rgb(255 246 215 / 0.05), rgb(0 0 0 / 0.16)),
    rgb(9 8 6 / 0.72);
}

.guardian-board-focus span,
.guardian-board-step span {
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.guardian-board-focus b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  line-height: 1.08;
  text-wrap: balance;
}

.guardian-board-focus p {
  margin: 0;
  color: #d8caa0;
  font-size: 0.82rem;
  line-height: 1.36;
}

.guardian-board-proof {
  display: grid;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid rgb(255 246 215 / 0.1);
}

.guardian-board-proof strong {
  color: #fff1ad;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.guardian-board-proof small {
  color: #bfb28f;
  font-size: 0.72rem;
  line-height: 1.28;
  overflow-wrap: break-word;
}

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

.learner-passport span {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  color: #fff1ad;
  background: rgb(0 0 0 / 0.18);
  font: 900 0.62rem "JetBrains Mono", Consolas, monospace;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.guardian-board-side {
  display: grid;
  gap: 8px;
}

.guardian-board-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.guardian-board-metrics span {
  min-height: 62px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.16);
}

.guardian-board-metrics b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.05;
  overflow-wrap: break-word;
}

.guardian-board-metrics small {
  color: #a99b78;
  font-size: 0.58rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.guardian-board-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
}

.guardian-board-primary,
.guardian-board-secondary {
  min-height: 38px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 1000;
  text-transform: uppercase;
  transition: transform 180ms var(--motion), filter 180ms var(--motion);
}

.guardian-board-primary {
  border: 1px solid rgb(242 201 76 / 0.48);
  color: #120d06;
  background: linear-gradient(180deg, #fff2b8, var(--gold));
  box-shadow: 0 4px 0 rgb(0 0 0 / 0.34);
}

.guardian-board-secondary {
  border: 1px solid rgb(242 201 76 / 0.24);
  color: #fff1ad;
  background: rgb(0 0 0 / 0.22);
}

.guardian-board-primary:hover,
.guardian-board-primary:focus-visible,
.guardian-board-secondary:hover,
.guardian-board-secondary:focus-visible {
  filter: brightness(1.08);
}

.guardian-board-primary:active,
.guardian-board-secondary:active {
  transform: translateY(1px);
}

.guardian-board-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.guardian-board-step {
  min-height: 68px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.13)),
    rgb(0 0 0 / 0.14);
}

.guardian-board-step.done {
  border-color: rgb(158 255 189 / 0.28);
}

.guardian-board-step.active {
  border-color: rgb(242 201 76 / 0.38);
}

.guardian-board-step.locked {
  opacity: 0.8;
}

.guardian-board-step.done span {
  color: #9effbd;
}

.guardian-board-step b {
  color: #d8caa0;
  font-size: 0.72rem;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.guardian-detail-panel {
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.16)),
    rgb(0 0 0 / 0.14);
}

.guardian-detail-panel summary {
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  color: #fff1ad;
  cursor: pointer;
  list-style: none;
}

.guardian-detail-panel summary::-webkit-details-marker {
  display: none;
}

.guardian-detail-panel summary::before {
  content: "+";
  width: 24px;
  height: 24px;
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 7px;
  color: #120d06;
  background: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 1000;
}

.guardian-detail-panel[open] summary::before {
  content: "-";
}

.guardian-detail-panel summary span {
  min-width: 0;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.88rem;
  line-height: 1.08;
}

.guardian-detail-panel summary b {
  grid-column: 2;
  min-width: 0;
  color: #bfb28f;
  font-size: 0.68rem;
  line-height: 1.2;
}

.guardian-detail-panel > :not(summary) {
  margin: 10px;
}

.guardian-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.guardian-grid label,
.guardian-consent {
  display: grid;
  gap: 5px;
  color: #e8d9aa;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.guardian-grid input,
.guardian-grid select {
  min-height: 42px;
  width: 100%;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 8px;
  color: #fff4c6;
  background: #080604;
  font: 800 0.86rem Lato, system-ui, sans-serif;
  padding: 8px 10px;
}

.guardian-grid input:focus,
.guardian-grid select:focus {
  outline: 3px solid rgb(85 183 217 / 0.58);
  outline-offset: 1px;
}

.guardian-consent {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  padding: 9px;
  border: 1px solid rgb(158 255 189 / 0.22);
  border-radius: 8px;
  color: #cce5c4;
  background: rgb(5 9 8 / 0.58);
  font-size: 0.7rem;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}

.guardian-consent input {
  margin-top: 2px;
  accent-color: var(--gold);
}

.school-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.school-actions button,
.school-actions a {
  flex: 1 1 180px;
}

.school-actions a {
  display: inline-grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
}

.school-actions button:disabled,
.school-actions a.disabled {
  cursor: not-allowed;
  opacity: 0.48;
  pointer-events: none;
}

.school-feedback {
  margin: 0;
  color: #d7c696;
  font-size: 0.82rem;
  line-height: 1.28;
}

.enrollment-claim {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgb(85 183 217 / 0.1), transparent 48%),
    linear-gradient(135deg, rgb(242 201 76 / 0.1), transparent 42%),
    rgb(8 6 4 / 0.66);
  box-shadow:
    inset 0 1px 0 rgb(255 246 215 / 0.09),
    0 18px 44px rgb(0 0 0 / 0.26);
}

.enrollment-claim::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 28%, rgb(255 246 215 / 0.08) 34%, transparent 42% 100%);
  transform: translateX(-60%);
  animation: claimSweep 7s ease-in-out infinite;
}

.enrollment-claim[data-state="claimed"] {
  border-color: rgb(158 255 189 / 0.34);
  background:
    linear-gradient(90deg, rgb(158 255 189 / 0.09), transparent 46%),
    linear-gradient(135deg, rgb(242 201 76 / 0.08), transparent 42%),
    rgb(5 9 8 / 0.72);
}

.enrollment-claim[data-state="synced"] {
  border-color: rgb(85 183 217 / 0.38);
  background:
    linear-gradient(90deg, rgb(85 183 217 / 0.13), transparent 50%),
    linear-gradient(135deg, rgb(158 255 189 / 0.08), transparent 46%),
    rgb(5 10 12 / 0.74);
}

.claim-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.claim-head b {
  display: block;
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.08;
}

.claim-head p {
  max-width: 62ch;
  margin: 5px 0 0;
  color: #cdbf93;
  font-size: 0.78rem;
  line-height: 1.28;
}

.claim-head strong {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  border: 1px solid rgb(242 201 76 / 0.36);
  border-radius: 8px;
  color: var(--gold);
  background: #050908;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.enrollment-claim[data-state="claimed"] .claim-head strong {
  border-color: rgb(158 255 189 / 0.34);
  color: #9effbd;
}

.enrollment-claim[data-state="synced"] .claim-head strong {
  border-color: rgb(85 183 217 / 0.42);
  color: #9ee8ff;
}

.claim-invite-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 8px;
  background: rgb(13 10 8 / 0.58);
}

.claim-seal {
  width: 58px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.36);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgb(242 201 76 / 0.28), transparent 52%),
    rgb(5 9 8 / 0.84);
  box-shadow: 0 0 24px rgb(242 201 76 / 0.14);
}

.claim-seal span {
  width: 30px;
  aspect-ratio: 1;
  border: 2px solid rgb(158 255 189 / 0.5);
  border-radius: 50%;
  box-shadow:
    0 0 0 8px rgb(85 183 217 / 0.08),
    inset 0 0 14px rgb(158 255 189 / 0.2);
  animation: claimSealPulse 2.6s ease-in-out infinite;
}

.claim-mini-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.claim-mini-steps li {
  min-height: 62px;
  display: grid;
  gap: 4px;
  align-content: center;
  justify-items: center;
  border: 1px solid rgb(242 201 76 / 0.16);
  border-radius: 8px;
  background: rgb(8 6 4 / 0.7);
  text-align: center;
}

.claim-mini-steps b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(85 183 217 / 0.34);
  border-radius: 50%;
  color: #9ee8ff;
  font: 900 0.66rem "JetBrains Mono", Consolas, monospace;
}

.claim-mini-steps span {
  color: #e8d9aa;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.claim-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.claim-grid label {
  display: grid;
  gap: 5px;
  color: #e8d9aa;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.claim-grid input {
  min-height: 42px;
  width: 100%;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 8px;
  color: #fff4c6;
  background: #080604;
  font: 800 0.78rem "JetBrains Mono", Consolas, monospace;
  padding: 8px 10px;
}

.claim-grid input:focus {
  outline: 3px solid rgb(85 183 217 / 0.58);
  outline-offset: 1px;
}

.claim-actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.claim-actions span {
  color: #d7c696;
  font-size: 0.78rem;
  line-height: 1.25;
}

@keyframes claimSweep {
  0%,
  62%,
  100% {
    transform: translateX(-70%);
    opacity: 0;
  }
  72% {
    opacity: 1;
  }
  86% {
    transform: translateX(76%);
    opacity: 0;
  }
}

@keyframes claimSealPulse {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.78;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

.sync-readiness {
  display: grid;
  gap: 8px;
  padding: 0;
  border: 1px solid rgb(85 183 217 / 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(85 183 217 / 0.1), transparent 40%),
    rgb(5 10 12 / 0.58);
  box-shadow: inset 0 1px 0 rgb(158 255 189 / 0.08);
  overflow: hidden;
}

.sync-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 56px;
  padding: 11px 12px;
  cursor: pointer;
  list-style: none;
}

.sync-head::-webkit-details-marker {
  display: none;
}

.sync-head::after {
  content: "Details";
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 5px 8px;
  border: 1px solid rgb(85 183 217 / 0.3);
  border-radius: 7px;
  color: #9ee8ff;
  background: rgb(0 0 0 / 0.22);
  font: 1000 0.58rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.sync-readiness[open] .sync-head::after {
  content: "Hide";
}

.sync-head b {
  display: block;
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.08;
}

.sync-head p {
  margin: 4px 0 0;
  color: #cdbf93;
  font-size: 0.78rem;
  line-height: 1.25;
}

.sync-head strong {
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  border: 1px solid rgb(158 255 189 / 0.34);
  border-radius: 8px;
  color: #9effbd;
  background: #050908;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.sync-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 8px;
  padding: 0 12px 12px;
}

.sync-readiness:not([open]) .sync-grid {
  display: none;
}

.sync-grid span {
  min-height: 76px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 8px;
  background: rgb(8 6 4 / 0.76);
}

.sync-grid small,
.sync-grid em {
  color: #9fb1a5;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sync-grid b {
  color: #fff4c6;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.sync-grid em {
  color: #9ee8ff;
  text-transform: none;
  letter-spacing: 0;
}

.claim-checklist {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(158 255 189 / 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(158 255 189 / 0.08), transparent 42%),
    rgb(5 9 8 / 0.7);
}

.claim-checklist[hidden] {
  display: none;
}

.claim-checklist-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.claim-checklist-head b {
  display: block;
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.08;
}

.claim-checklist-head p {
  margin: 4px 0 0;
  color: #cdbf93;
  font-size: 0.78rem;
  line-height: 1.25;
}

.claim-checklist-head strong {
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  border: 1px solid rgb(158 255 189 / 0.34);
  border-radius: 8px;
  color: #9effbd;
  background: #050908;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.claim-step-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.claim-step {
  min-height: 130px;
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 10px;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 8px;
  background: rgb(8 6 4 / 0.78);
}

.claim-step.done {
  border-color: rgb(158 255 189 / 0.32);
  background:
    linear-gradient(135deg, rgb(158 255 189 / 0.08), transparent 55%),
    rgb(8 6 4 / 0.78);
}

.claim-step.active {
  border-color: rgb(242 201 76 / 0.36);
}

.claim-step span {
  width: max-content;
  max-width: 100%;
  border: 1px solid rgb(242 201 76 / 0.25);
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--gold);
  font: 900 0.58rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.claim-step.done span {
  border-color: rgb(158 255 189 / 0.34);
  color: #9effbd;
}

.claim-step b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.1;
}

.claim-step small {
  color: #cdbf93;
  font-size: 0.72rem;
  line-height: 1.22;
}

.claim-step button {
  width: 100%;
  margin-top: auto;
}

.parent-dashboard,
.course-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.parent-dashboard article,
.course-card {
  min-height: 82px;
  display: grid;
  gap: 4px;
  align-content: center;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 8px;
  background: #080604;
}

.parent-dashboard span,
.parent-dashboard small,
.course-card span,
.course-card i,
.course-card small {
  color: #a99d7a;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.course-card i {
  width: 38px;
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #130d05;
  background: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-style: normal;
}

.course-card.planned i {
  background: #9effbd;
}

.parent-dashboard b,
.course-card b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.08;
  overflow-wrap: break-word;
}

.parent-dashboard small,
.course-card small {
  color: #9ee8ff;
  text-transform: none;
  letter-spacing: 0;
}

.weekly-report {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgb(85 183 217 / 0.24);
  border-radius: 8px;
  background: rgb(5 10 12 / 0.5);
}

.weekly-report b {
  color: #9ee8ff;
  font-family: Cinzel, Georgia, serif;
}

.weekly-report ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: #e8d9aa;
  font-size: 0.78rem;
  line-height: 1.25;
}

.weekly-report p,
.course-card p {
  margin: 0;
  color: #cdbf93;
  font-size: 0.78rem;
  line-height: 1.25;
}

.parent-weekly-brief {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(158 255 189 / 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 8% 0%, rgb(158 255 189 / 0.11), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.16)),
    rgb(3 9 5 / 0.5);
}

.parent-weekly-brief-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.parent-weekly-brief-head h3,
.parent-weekly-brief-head p {
  margin: 0;
}

.parent-weekly-brief-head h3 {
  margin-top: 3px;
  color: #e8ffd7;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.28rem);
  line-height: 1.08;
}

.parent-weekly-brief-head p {
  max-width: 76ch;
  color: #cfe5c7;
  font-size: 0.78rem;
  line-height: 1.32;
}

.parent-weekly-brief-head strong {
  min-width: 92px;
  padding: 7px 9px;
  border: 1px solid rgb(158 255 189 / 0.34);
  border-radius: 8px;
  color: #071008;
  background: linear-gradient(180deg, #e8ffd7, #9effbd);
  text-align: center;
  font: 1000 0.64rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.parent-weekly-brief-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.parent-weekly-brief-card {
  min-width: 0;
  min-height: 88px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background: rgb(0 0 0 / 0.18);
}

.parent-weekly-brief-card.ready,
.parent-weekly-brief-card.complete {
  border-color: rgb(158 255 189 / 0.3);
}

.parent-weekly-brief-card.current {
  border-color: rgb(242 201 76 / 0.3);
}

.parent-weekly-brief-card span,
.parent-weekly-brief-card b,
.parent-weekly-brief-card small {
  min-width: 0;
  display: block;
  overflow-wrap: break-word;
}

.parent-weekly-brief-card span {
  color: #9effbd;
  font-size: 0.56rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.parent-weekly-brief-card b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.08;
}

.parent-weekly-brief-card small {
  color: #cfe5c7;
  font-size: 0.64rem;
  line-height: 1.18;
}

.parent-account-center {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 6% 0%, rgb(242 201 76 / 0.11), transparent 38%),
    radial-gradient(circle at 100% 20%, rgb(85 183 217 / 0.1), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.16)),
    rgb(8 6 4 / 0.52);
}

.parent-account-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.parent-account-head h3,
.parent-account-head p,
.parent-account-feedback {
  margin: 0;
}

.parent-account-head h3 {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.28rem);
  line-height: 1.08;
}

.parent-account-head p,
.parent-account-feedback {
  color: #d5c69d;
  font-size: 0.76rem;
  line-height: 1.32;
}

.parent-account-head strong {
  min-width: 92px;
  padding: 7px 9px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 8px;
  color: #fff1ad;
  background: rgb(0 0 0 / 0.25);
  text-align: center;
  font: 1000 0.64rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.parent-account-center[data-state="synced"] .parent-account-head strong,
.parent-account-center[data-state="ready"] .parent-account-head strong {
  border-color: rgb(158 255 189 / 0.34);
  color: #071008;
  background: linear-gradient(180deg, #e8ffd7, #9effbd);
}

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

.parent-account-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) auto;
  gap: 3px 8px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background: rgb(0 0 0 / 0.18);
}

.parent-account-card.ready,
.parent-account-card.complete {
  border-color: rgb(158 255 189 / 0.3);
}

.parent-account-card.current {
  border-color: rgb(242 201 76 / 0.32);
}

.parent-account-card.locked {
  opacity: 0.72;
}

.parent-account-card span,
.parent-account-card b,
.parent-account-card small {
  min-width: 0;
  display: block;
  overflow-wrap: break-word;
}

.parent-account-card span {
  color: var(--gold);
  font-size: 0.56rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.parent-account-card b {
  color: #fff4c6;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.08;
  text-align: right;
}

.parent-account-card small {
  grid-column: 1 / -1;
  color: #d5c69d;
  font-size: 0.6rem;
  line-height: 1.18;
  display: none;
}

.parent-account-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.parent-account-actions button {
  min-width: 0;
}

.course-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.course-card.open {
  border-color: rgb(158 255 189 / 0.4);
  background:
    radial-gradient(circle at 12% 12%, rgb(158 255 189 / 0.1), transparent 44%),
    #080604;
}

.course-card.planned {
  opacity: 0.82;
}

.academy-realms {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 10%, rgb(242 201 76 / 0.13), transparent 40%),
    radial-gradient(circle at 90% 22%, rgb(85 183 217 / 0.09), transparent 36%),
    linear-gradient(145deg, rgb(255 246 215 / 0.05), rgb(255 246 215 / 0.016));
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.realms-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: 12px;
  align-items: center;
}

.realms-head h3,
.realms-head p {
  margin: 0;
}

.realms-head h3 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.1;
  text-wrap: balance;
}

.realms-head p {
  margin-top: 5px;
  color: #d8c690;
  line-height: 1.3;
}

.realms-head strong {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(85 183 217 / 0.42);
  border-radius: 9px;
  color: #9ee8ff;
  background: #050a0c;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.74rem;
  text-transform: uppercase;
}

.ai-art-panel {
  position: relative;
  margin: 0;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 10px;
  background: #050403;
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 18px 38px rgb(0 0 0 / 0.25);
  overflow: hidden;
}

.ai-art-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 42%, rgb(5 4 3 / 0.38)),
    radial-gradient(circle at 50% 18%, rgb(242 201 76 / 0.12), transparent 44%);
  pointer-events: none;
}

.ai-art-panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.04);
  transform: scale(1.01);
  animation: artDrift 14s ease-in-out infinite;
}

.realm-portal-art,
.curriculum-art {
  aspect-ratio: 16 / 7;
}

.lesson-art {
  aspect-ratio: 16 / 6;
}

.lesson-cinematic-strip {
  --lesson-accent: #9ee8ff;
  max-width: 100%;
  min-width: 0;
  min-height: 228px;
  border-color: color-mix(in srgb, var(--lesson-accent) 34%, transparent);
  background: rgb(5 4 3 / 0.86);
  box-shadow:
    inset 0 1px 0 rgb(255 246 215 / 0.1),
    0 18px 38px rgb(0 0 0 / 0.3),
    0 0 28px color-mix(in srgb, var(--lesson-accent) 10%, transparent);
}

.lesson-cinematic-strip[data-domain="science"] { --lesson-accent: #6fcf97; }
.lesson-cinematic-strip[data-domain="physics"] { --lesson-accent: var(--aether); }
.lesson-cinematic-strip[data-domain="engineering"] { --lesson-accent: var(--ember); }
.lesson-cinematic-strip[data-domain="ai"] { --lesson-accent: #b59cff; }

.lesson-cinematic-strip::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 1;
  border: 1px solid color-mix(in srgb, var(--lesson-accent) 28%, transparent);
  border-radius: 8px;
  pointer-events: none;
}

.lesson-cinematic-strip::after {
  z-index: 1;
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--lesson-accent) 28%, transparent), transparent 38%),
    radial-gradient(circle at 84% 18%, rgb(242 201 76 / 0.18), transparent 32%),
    linear-gradient(180deg, rgb(5 4 3 / 0.04), rgb(5 4 3 / 0.78));
}

.lesson-cinematic-strip img {
  opacity: 0.76;
  filter: saturate(1.14) contrast(1.08) brightness(0.78);
  animation: lessonCinematicPan 18s ease-in-out infinite;
}

.lesson-cinematic-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: saturate(1.14) contrast(1.08) brightness(0.78);
  transform: scale(1.02);
  transition: opacity 420ms var(--motion);
}

.lesson-cinematic-strip.has-video .lesson-cinematic-video {
  opacity: 0.78;
  animation: lessonCinematicPan 18s ease-in-out infinite;
}

.lesson-cinematic-strip.has-video img {
  opacity: 0;
}

.lesson-video-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  max-width: calc(100% - 28px);
  display: grid;
  gap: 2px;
  min-width: 126px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--lesson-accent) 40%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.08), rgb(0 0 0 / 0.12)),
    rgb(6 5 4 / 0.78);
  box-shadow: 0 12px 24px rgb(0 0 0 / 0.26), inset 0 1px 0 rgb(255 246 215 / 0.1);
  backdrop-filter: blur(6px);
}

.lesson-video-badge span,
.lesson-video-badge b {
  display: block;
  margin: 0;
  font-family: "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.lesson-video-badge span {
  color: color-mix(in srgb, var(--lesson-accent) 78%, #fff4c6);
  font-size: 0.56rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
}

.lesson-video-badge b {
  color: #fff4c6;
  font-size: 0.66rem;
  line-height: 1.1;
}

.lesson-cinematic-aether {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.lesson-cinematic-aether i {
  position: absolute;
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lesson-accent) 64%, transparent), transparent);
  opacity: 0.58;
  transform-origin: center;
  animation: lessonAetherLine 4.4s ease-in-out infinite;
}

.lesson-cinematic-aether i:nth-child(1) { --line-rotate: 15deg; left: 8%; top: 26%; }
.lesson-cinematic-aether i:nth-child(2) { --line-rotate: -18deg; right: 7%; top: 34%; animation-delay: 420ms; }
.lesson-cinematic-aether i:nth-child(3) { --line-rotate: -10deg; left: 28%; bottom: 38%; animation-delay: 860ms; }
.lesson-cinematic-aether i:nth-child(4) { --line-rotate: 24deg; right: 30%; bottom: 24%; animation-delay: 1280ms; }

.lesson-media-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.lesson-media-atmosphere span {
  position: absolute;
  left: -18%;
  width: 56%;
  height: 16%;
  border-block: 1px solid color-mix(in srgb, var(--lesson-accent) 32%, transparent);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--lesson-accent) 18%, transparent), transparent);
  opacity: 0.34;
  transform: translate3d(0, 0, 0) rotate(var(--media-tilt, -8deg));
  animation: mediaAtmosphereSweep 8.5s ease-in-out infinite;
}

.lesson-media-atmosphere span:nth-child(1) { --media-tilt: -8deg; top: 12%; animation-delay: 0ms; }
.lesson-media-atmosphere span:nth-child(2) { --media-tilt: 7deg; top: 34%; animation-delay: 1200ms; }
.lesson-media-atmosphere span:nth-child(3) { --media-tilt: -3deg; top: 56%; animation-delay: 2300ms; }
.lesson-media-atmosphere span:nth-child(4) { --media-tilt: 10deg; top: 76%; animation-delay: 3400ms; }

.lesson-cinematic-caption {
  position: absolute;
  inset: auto 12px 12px;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--lesson-accent) 34%, transparent);
  border-radius: 9px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--lesson-accent) 14%, transparent), transparent 42%),
    rgb(6 5 4 / 0.78);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 12px 26px rgb(0 0 0 / 0.28);
  backdrop-filter: blur(7px);
}

.lesson-cinematic-caption span,
.lesson-cinematic-caption b,
.lesson-cinematic-caption p {
  margin: 0;
}

.lesson-cinematic-caption > span {
  grid-column: 1 / 2;
  color: color-mix(in srgb, var(--lesson-accent) 84%, #fff4c6);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lesson-cinematic-caption b {
  grid-column: 1 / 2;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.05;
  text-wrap: balance;
}

.lesson-cinematic-caption p {
  grid-column: 1 / 2;
  color: #e2d2a6;
  font-size: 0.8rem;
  line-height: 1.25;
}

.lesson-cinematic-runes {
  grid-column: 2 / 3;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(58px, 1fr));
  gap: 6px;
  align-self: center;
}

.lesson-cinematic-runes span {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 6px 7px;
  border: 1px solid color-mix(in srgb, var(--lesson-accent) 32%, transparent);
  border-radius: 8px;
  color: #fff3c8;
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--lesson-accent) 13%, transparent), transparent 62%),
    rgb(6 5 4 / 0.72);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 1000;
  text-transform: uppercase;
  animation: lessonRuneGlow 2400ms ease-in-out infinite;
}

.lesson-cinematic-runes span:nth-child(2) {
  animation-delay: 180ms;
}

.lesson-cinematic-runes span:nth-child(3) {
  animation-delay: 360ms;
}

.lesson-cinematic-beats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.lesson-cinematic-beats span {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--lesson-accent) 24%, transparent);
  border-radius: 8px;
  color: #e8d9aa;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--lesson-accent) 10%, transparent), transparent 58%),
    rgb(7 6 4 / 0.66);
  font-size: 0.62rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lesson-cinematic-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.lesson-cinematic-actions button {
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--lesson-accent) 38%, transparent);
  border-radius: 8px;
  color: #fff5ce;
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--lesson-accent) 12%, transparent), transparent 68%),
    rgb(7 6 4 / 0.78);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 1000;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms var(--motion), border-color 180ms var(--motion), box-shadow 180ms var(--motion), filter 180ms var(--motion);
}

.lesson-cinematic-actions button:hover,
.lesson-cinematic-actions button:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--lesson-accent) 68%, transparent);
  box-shadow: 0 9px 18px rgb(0 0 0 / 0.28), 0 0 18px color-mix(in srgb, var(--lesson-accent) 16%, transparent), inset 0 1px 0 rgb(255 246 215 / 0.12);
  filter: brightness(1.08);
}

.lesson-cinematic-actions button:active {
  transform: translateY(1px);
}

.lesson-action-pulse {
  animation: lessonActionPulse 950ms var(--motion);
}

.lesson-focus-pulse {
  animation: lessonFocusPulse 950ms var(--motion);
}

.gold-lesson {
  --gold-lesson-accent: var(--gold);
  position: relative;
  display: grid;
  gap: 11px;
  padding: clamp(12px, 2vw, 16px);
  border: 1px solid rgb(242 201 76 / 0.36);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 0%, rgb(242 201 76 / 0.16), transparent 44%),
    radial-gradient(circle at 92% 18%, rgb(85 183 217 / 0.12), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.06), rgb(0 0 0 / 0.12)),
    rgb(8 6 4 / 0.86);
  box-shadow:
    inset 0 1px 0 rgb(255 246 215 / 0.1),
    0 18px 38px rgb(0 0 0 / 0.22);
  overflow: hidden;
}

.gold-lesson.hidden {
  display: none;
}

.gold-lesson::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgb(242 201 76 / 0.12);
  border-radius: 7px;
  pointer-events: none;
}

.gold-lesson-head,
.gold-lesson-track,
.gold-lesson-grid,
.gold-lesson-actions {
  position: relative;
  z-index: 1;
}

.gold-lesson-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.gold-lesson-head h4,
.gold-lesson-head p {
  margin: 0;
}

.gold-lesson-head h4 {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.08rem, 2vw, 1.42rem);
  line-height: 1.06;
}

.gold-lesson-head p {
  margin-top: 5px;
  max-width: 70ch;
  color: #d8c8a0;
  font-size: 0.86rem;
  line-height: 1.34;
}

.gold-lesson-head strong {
  min-width: 110px;
  padding: 8px 10px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 8px;
  color: #fff0ad;
  background: rgb(0 0 0 / 0.28);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  text-align: center;
  text-transform: uppercase;
}

.gold-lesson-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.gold-lesson-step {
  min-width: 0;
  min-height: 96px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.1)),
    rgb(6 5 3 / 0.62);
}

.gold-lesson-step span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #141006;
  background: #7b755f;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 1000;
}

.gold-lesson-step b,
.gold-lesson-step strong,
.gold-lesson-step small {
  min-width: 0;
}

.gold-lesson-step b {
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gold-lesson-step strong {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.08;
}

.gold-lesson-step small {
  color: #bdae83;
  font-size: 0.7rem;
  line-height: 1.22;
}

.gold-lesson-step.current {
  border-color: rgb(242 201 76 / 0.54);
  background:
    radial-gradient(circle at 20% 8%, rgb(242 201 76 / 0.18), transparent 58%),
    rgb(18 12 5 / 0.72);
  box-shadow: 0 0 22px rgb(242 201 76 / 0.1), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.gold-lesson-step.current span {
  background: var(--gold);
}

.gold-lesson-step.complete {
  border-color: rgb(158 255 189 / 0.34);
}

.gold-lesson-step.complete span {
  background: #9effbd;
}

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

.gold-lesson-card {
  min-height: 126px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 0%, rgb(85 183 217 / 0.08), transparent 58%),
    rgb(0 0 0 / 0.2);
}

.gold-lesson-card span {
  color: #9ee8ff;
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gold-lesson-card b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  line-height: 1.08;
}

.gold-lesson-card p {
  margin: 0;
  color: #d2c195;
  font-size: 0.78rem;
  line-height: 1.32;
}

.gold-lesson-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.gold-lesson-actions button {
  min-width: 0;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid rgb(242 201 76 / 0.38);
  border-radius: 8px;
  color: #130d05;
  background: linear-gradient(180deg, #fff0a3, var(--gold));
  box-shadow: 0 10px 22px rgb(242 201 76 / 0.16), inset 0 1px 0 rgb(255 255 255 / 0.45);
  font-size: 0.7rem;
  font-weight: 1000;
  text-transform: uppercase;
  cursor: pointer;
}

.gold-lesson-actions button:hover,
.gold-lesson-actions button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.07);
}

.gold-lesson-actions button:active {
  transform: translateY(1px);
}

.room-cinematic {
  --cinematic-accent: var(--gold);
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--cinematic-accent) 34%, transparent);
  border-radius: 10px;
  background:
    radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--cinematic-accent) 17%, transparent), transparent 40%),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.16)),
    rgb(5 4 3 / 0.68);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.09);
  overflow: hidden;
}

.room-cinematic[data-domain="science"] { --cinematic-accent: #6fcf97; }
.room-cinematic[data-domain="physics"] { --cinematic-accent: var(--aether); }
.room-cinematic[data-domain="engineering"] { --cinematic-accent: var(--ember); }
.room-cinematic[data-domain="ai"] { --cinematic-accent: #b59cff; }

.cinematic-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 10px;
  align-items: center;
}

.cinematic-head h4,
.cinematic-head p {
  margin: 0;
}

.cinematic-head h4 {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.75vw, 1.24rem);
  line-height: 1.08;
  text-wrap: balance;
}

.cinematic-head p {
  margin-top: 4px;
  color: #decf9f;
  font-size: 0.78rem;
  line-height: 1.28;
}

.cinematic-head strong {
  min-height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cinematic-accent) 42%, transparent);
  border-radius: 8px;
  color: var(--cinematic-accent);
  background: rgb(8 6 4 / 0.86);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.74rem;
}

.cinematic-stage {
  position: relative;
  min-height: 172px;
  display: grid;
  align-items: end;
  border: 1px solid color-mix(in srgb, var(--cinematic-accent) 24%, transparent);
  border-radius: 9px;
  background: #050403;
  box-shadow: inset 0 0 34px rgb(0 0 0 / 0.42);
  overflow: hidden;
}

.cinematic-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  filter: saturate(1.12) contrast(1.06) brightness(0.8);
  transform: scale(1.04);
  animation: cinematicArtDrift 14s ease-in-out infinite;
}

.cinematic-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--cinematic-accent) 30%, transparent), transparent 27%),
    linear-gradient(180deg, rgb(5 4 3 / 0.12), rgb(5 4 3 / 0.74));
  pointer-events: none;
}

.cinematic-core {
  position: absolute;
  left: 50%;
  top: 35%;
  width: 86px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--cinematic-accent) 54%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 30px color-mix(in srgb, var(--cinematic-accent) 26%, transparent), inset 0 0 24px rgb(0 0 0 / 0.48);
  transform: translate(-50%, -50%);
  animation: cinematicCorePulse 2.4s ease-in-out infinite;
}

.cinematic-core span {
  position: absolute;
  inset: 18px;
  border: 1px solid color-mix(in srgb, var(--cinematic-accent) 42%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--cinematic-accent) 52%, transparent), transparent 62%),
    rgb(5 4 3 / 0.3);
}

.cinematic-constellation {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cinematic-constellation i {
  position: absolute;
  width: 130px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cinematic-accent) 58%, transparent), transparent);
  opacity: 0.55;
  transform-origin: center;
  animation: constellationSweep 3.8s ease-in-out infinite;
}

.cinematic-constellation i:nth-child(1) { left: 14%; top: 24%; transform: rotate(18deg); }
.cinematic-constellation i:nth-child(2) { right: 12%; top: 32%; transform: rotate(-24deg); animation-delay: 420ms; }
.cinematic-constellation i:nth-child(3) { left: 28%; bottom: 42%; transform: rotate(-12deg); animation-delay: 820ms; }
.cinematic-constellation i:nth-child(4) { right: 22%; bottom: 34%; transform: rotate(26deg); animation-delay: 1160ms; }

.cinematic-nodes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 82px 9px 9px;
}

.cinematic-node {
  min-width: 0;
  min-height: 74px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.16);
  border-radius: 8px;
  color: #f9edc8;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--cinematic-accent) 16%, transparent), transparent 58%),
    rgb(6 5 3 / 0.78);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
  cursor: pointer;
  text-align: center;
  transition: transform 240ms var(--motion), border-color 240ms var(--motion), box-shadow 240ms var(--motion), filter 240ms var(--motion);
}

.cinematic-node:hover,
.cinematic-node:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cinematic-accent) 58%, transparent);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.26), 0 0 24px color-mix(in srgb, var(--cinematic-accent) 14%, transparent);
}

.cinematic-node span,
.cinematic-node b,
.cinematic-node small {
  min-width: 0;
}

.cinematic-node span {
  color: var(--cinematic-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.56rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cinematic-node b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
  line-height: 1.08;
}

.cinematic-node small {
  color: #d4c391;
  font-size: 0.68rem;
  font-weight: 800;
}

.cinematic-node.discovered {
  border-color: color-mix(in srgb, var(--cinematic-accent) 64%, transparent);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--cinematic-accent) 30%, transparent), transparent 60%),
    rgb(5 9 7 / 0.82);
  box-shadow: 0 0 26px color-mix(in srgb, var(--cinematic-accent) 16%, transparent), inset 0 1px 0 rgb(255 246 215 / 0.12);
}

.cinematic-node.discovered small {
  color: #dfffe3;
}

.cinematic-node.active {
  animation: cinematicNodePulse 680ms var(--motion);
}

.room-cinematic.focus-pulse {
  animation: cinematicPanelPulse 780ms var(--motion);
}

.room-cinematic.cinematic-complete {
  border-color: color-mix(in srgb, #9effbd 52%, transparent);
  box-shadow: 0 0 26px rgb(158 255 189 / 0.12), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

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

.realm-card {
  min-height: 108px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 11px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 10px;
  color: #d8c690;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(255 246 215 / 0.014)),
    rgb(5 4 3 / 0.38);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
}

.realm-card b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.08;
}

.realm-card span {
  color: #c8b98b;
  font-size: 0.78rem;
  line-height: 1.25;
}

.realm-card small {
  width: max-content;
  margin-top: auto;
  padding: 3px 7px;
  border: 1px solid rgb(255 246 215 / 0.14);
  border-radius: 999px;
  color: #9fb1a5;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.realm-card.active {
  border-color: rgb(242 201 76 / 0.58);
  background:
    radial-gradient(circle at top, rgb(242 201 76 / 0.16), transparent 70%),
    linear-gradient(180deg, rgb(255 246 215 / 0.07), rgb(255 246 215 / 0.018)),
    #090604;
  box-shadow: 0 0 24px rgb(242 201 76 / 0.12), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.realm-card.active small {
  border-color: rgb(87 201 135 / 0.5);
  color: #9effbd;
}

.academy-familiar {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 58px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgb(169 119 255 / 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 24%, rgb(169 119 255 / 0.13), transparent 42%),
    rgb(255 255 255 / 0.035);
}

.familiar-orb {
  width: 58px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.42);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, #fff6d7, transparent 18%),
    radial-gradient(circle at 50% 55%, rgb(242 201 76 / 0.72), rgb(109 91 208 / 0.34) 62%, #080604 100%);
  box-shadow: 0 0 24px rgb(242 201 76 / 0.18);
}

.familiar-orb span {
  width: 22px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff6d7;
  box-shadow: 0 0 18px currentColor;
}

.familiar-orb[data-affinity="science"] {
  color: #9effbd;
  border-color: rgb(87 201 135 / 0.52);
}

.familiar-orb[data-affinity="physics"] {
  color: #9ee8ff;
  border-color: rgb(85 183 217 / 0.58);
}

.familiar-orb[data-affinity="engineering"] {
  color: #ffcf9c;
  border-color: rgb(217 107 43 / 0.58);
}

.familiar-orb[data-affinity="ai"] {
  color: #eadfff;
  border-color: rgb(169 119 255 / 0.62);
}

.academy-familiar h3,
.academy-familiar p {
  margin: 0;
}

.academy-familiar h3 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
}

.academy-familiar p {
  margin-top: 4px;
  color: #d8c690;
  font-size: 0.86rem;
  line-height: 1.28;
}

.familiar-track {
  height: 10px;
  margin-top: 9px;
  border: 1px solid #090604;
  border-radius: 999px;
  background: #080604;
  overflow: hidden;
}

.familiar-track i {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--aether), var(--gold));
  transition: width 340ms ease;
}

.academy-familiar > strong {
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(169 119 255 / 0.42);
  border-radius: 8px;
  color: #eadfff;
  background: #09040e;
  font-family: "JetBrains Mono", Consolas, monospace;
}

.mastery-bars {
  display: grid;
  gap: 6px;
}

.mastery-row {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) 26px;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.mastery-row div {
  height: 9px;
  border: 1px solid #090604;
  border-radius: 999px;
  background: #050403;
  overflow: hidden;
}

.mastery-row i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--aether), var(--gold));
}

.mastery-row b {
  color: var(--gold-soft);
  font-family: "JetBrains Mono", Consolas, monospace;
}

.report-button {
  min-height: 42px;
}

.next-move-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgb(85 183 217 / 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 14%, rgb(85 183 217 / 0.14), transparent 42%),
    rgb(255 255 255 / 0.035);
}

.next-move-card p {
  margin: 0;
  color: #d3e9ea;
  line-height: 1.25;
}

.streak-meter {
  min-height: 60px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(85 183 217 / 0.46);
  border-radius: 8px;
  background: #070908;
}

.streak-meter span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.streak-meter strong {
  color: #9feaff;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1.45rem;
}

.badge-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.badge-row span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
}

.earned-badge {
  color: #120d06;
  background: linear-gradient(145deg, var(--gold), #9feaff);
  box-shadow: 0 0 18px rgb(85 183 217 / 0.14);
}

.empty-badge {
  color: var(--muted);
  border: 1px dashed rgb(242 201 76 / 0.28);
  background: #080604;
}

.spell-card-vault {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(109 91 208 / 0.36);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 20%, rgb(109 91 208 / 0.16), transparent 42%),
    rgb(255 255 255 / 0.035);
}

.vault-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 10px;
  align-items: center;
}

.vault-head p {
  margin: 0;
  color: #d8d2f3;
  line-height: 1.25;
}

.vault-head strong {
  min-height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(109 91 208 / 0.52);
  border-radius: 8px;
  color: #d8d2ff;
  background: #080604;
  font-family: "JetBrains Mono", Consolas, monospace;
}

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

.odds-row span {
  min-height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.2);
  border-radius: 999px;
  color: var(--muted);
  background: #080604;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

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

.spell-card {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 8px;
  background: #080604;
  box-shadow: inset 0 0 18px rgb(255 255 255 / 0.035);
}

.spell-card b,
.spell-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spell-card b {
  color: #fff9df;
  font-size: 0.72rem;
}

.spell-card small {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
}

.spell-card.common {
  border-color: rgb(85 183 217 / 0.32);
}

.spell-card.rare {
  border-color: rgb(109 91 208 / 0.7);
  background:
    radial-gradient(circle at top, rgb(109 91 208 / 0.24), transparent 70%),
    #080604;
  box-shadow: 0 0 20px rgb(109 91 208 / 0.16);
}

.spell-card.legendary {
  border-color: var(--gold);
  background:
    radial-gradient(circle at top, rgb(242 201 76 / 0.28), transparent 72%),
    linear-gradient(145deg, #2b1c0d, #080604);
  box-shadow: 0 0 26px rgb(242 201 76 / 0.2);
}

.empty-card {
  grid-column: 1 / -1;
  color: var(--muted);
  text-align: center;
}

.challenge-forge {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(217 107 43 / 0.38);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 16%, rgb(217 107 43 / 0.14), transparent 42%),
    rgb(255 255 255 / 0.035);
}

.forge-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 10px;
  align-items: center;
}

.forge-head p {
  margin: 0;
  color: #ead0bd;
  line-height: 1.25;
}

.forge-head strong {
  min-height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(217 107 43 / 0.52);
  border-radius: 8px;
  color: #ffcf9c;
  background: #080604;
  font-family: "JetBrains Mono", Consolas, monospace;
}

.forge-task-list {
  display: grid;
  gap: 8px;
}

.forge-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgb(242 201 76 / 0.2);
  border-radius: 8px;
  background: #080604;
}

.forge-task b,
.forge-task span {
  display: block;
}

.forge-task b {
  color: #fff4c6;
  font-size: 0.78rem;
}

.forge-task span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.18;
}

.forge-task strong {
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(217 107 43 / 0.38);
  border-radius: 8px;
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
}

.forge-task.done {
  border-color: var(--gold);
  background:
    radial-gradient(circle at top, rgb(242 201 76 / 0.16), transparent 72%),
    #080604;
}

.guild-projects {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(87 201 135 / 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 12%, rgb(87 201 135 / 0.13), transparent 40%),
    linear-gradient(145deg, rgb(8 20 14 / 0.72), rgb(18 12 8 / 0.88));
}

.project-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 10px;
  align-items: center;
}

.project-head p {
  margin: 0;
  color: #cfe8c9;
  line-height: 1.25;
}

.project-head strong {
  min-height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(87 201 135 / 0.5);
  border-radius: 8px;
  color: #9effbd;
  background: #050a07;
  font-family: "JetBrains Mono", Consolas, monospace;
}

.project-list {
  display: grid;
  gap: 8px;
}

.project-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  gap: 8px;
  align-items: start;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 8px;
  background: rgb(5 10 7 / 0.82);
}

.project-card b,
.project-card p {
  display: block;
  margin: 0;
}

.project-card b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.9rem;
}

.project-card p {
  margin-top: 3px;
  color: #cfe8c9;
  font-size: 0.84rem;
  line-height: 1.28;
}

.project-card > strong {
  min-height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(87 201 135 / 0.38);
  border-radius: 8px;
  color: #9effbd;
  background: #050a07;
  font-family: "JetBrains Mono", Consolas, monospace;
}

.project-reqs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-reqs span {
  padding: 5px 7px;
  border: 1px solid rgb(255 246 215 / 0.14);
  border-radius: 999px;
  color: #9fb1a5;
  background: rgb(255 255 255 / 0.04);
  font-size: 0.72rem;
  font-weight: 900;
}

.project-reqs span.met {
  border-color: rgb(87 201 135 / 0.55);
  color: #9effbd;
  background: rgb(87 201 135 / 0.1);
}

.project-card.done {
  border-color: rgb(87 201 135 / 0.6);
  box-shadow: 0 0 18px rgb(87 201 135 / 0.12);
}

.rewards-command-board {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(169 119 255 / 0.36);
  border-radius: 10px;
  background:
    radial-gradient(circle at 10% 0%, rgb(169 119 255 / 0.16), transparent 42%),
    radial-gradient(circle at 92% 14%, rgb(242 201 76 / 0.12), transparent 38%),
    linear-gradient(145deg, rgb(255 246 215 / 0.05), rgb(0 0 0 / 0.2)),
    rgb(7 5 8 / 0.72);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.rewards-command-board[data-state="complete"] {
  border-color: rgb(158 255 189 / 0.36);
  background:
    radial-gradient(circle at 10% 0%, rgb(158 255 189 / 0.12), transparent 42%),
    radial-gradient(circle at 92% 14%, rgb(242 201 76 / 0.14), transparent 38%),
    linear-gradient(145deg, rgb(255 246 215 / 0.05), rgb(0 0 0 / 0.2)),
    rgb(5 8 6 / 0.76);
}

.rewards-command-copy {
  display: grid;
  gap: 8px;
  align-content: center;
}

.rewards-command-copy span,
.rewards-command-rail span {
  color: #d8d2ff;
  font: 1000 0.6rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.rewards-command-copy h3 {
  max-width: 18ch;
  margin: 0;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.6rem;
  line-height: 1.04;
  text-wrap: balance;
}

.rewards-command-copy p {
  max-width: 68ch;
  margin: 0;
  color: #ddd0f3;
  font-size: 0.84rem;
  line-height: 1.38;
}

.rewards-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rewards-command-actions button {
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 1000;
  text-transform: uppercase;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), border-color 180ms var(--motion);
}

.rewards-command-actions button:first-child {
  border: 1px solid rgb(242 201 76 / 0.52);
  color: #120d06;
  background: linear-gradient(180deg, #fff2b8, var(--gold));
}

.rewards-command-actions button:last-child {
  border: 1px solid rgb(169 119 255 / 0.34);
  color: #eadfff;
  background: rgb(0 0 0 / 0.24);
}

.rewards-command-actions button:hover,
.rewards-command-actions button:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.rewards-command-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.rewards-command-rail article {
  min-height: 86px;
  display: grid;
  gap: 4px;
  align-content: center;
  padding: 10px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.2);
}

.rewards-command-rail b,
.rewards-command-rail small {
  min-width: 0;
  overflow-wrap: break-word;
}

.rewards-command-rail b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.06;
}

.rewards-command-rail small {
  color: #c9bee8;
  font-size: 0.66rem;
  line-height: 1.18;
}

.mentor-strip {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 74px;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.045);
}

.mentor-strip img {
  width: 62px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgb(242 201 76 / 0.55);
  border-radius: 8px;
}

.mentor-strip p {
  margin: 0;
  color: #e8d9aa;
  line-height: 1.25;
}

.dm-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid rgb(85 183 217 / 0.36);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 18%, rgb(85 183 217 / 0.14), transparent 44%),
    linear-gradient(145deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.025));
}

.dm-panel h3 {
  margin: 0 0 5px;
  color: #dff7ff;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.1;
}

.dm-panel p {
  margin: 0;
  color: #d3e9ea;
  line-height: 1.28;
}

.bonus-objective {
  margin-top: 8px !important;
  color: var(--gold-soft) !important;
  font-weight: 900;
}

.dm-stats {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
}

.dm-stats span {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 6px;
  border: 1px solid rgb(85 183 217 / 0.42);
  border-radius: 8px;
  color: var(--muted);
  background: #070908;
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.dm-stats b {
  display: block;
  color: #9feaff;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1.32rem;
}

.lab-reactor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.36);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 36%, rgb(242 201 76 / 0.14), transparent 42%),
    linear-gradient(145deg, rgb(18 9 5 / 0.92), rgb(5 8 10 / 0.94));
  box-shadow: inset 0 0 28px rgb(242 201 76 / 0.06);
}

.reactor-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  gap: 10px;
  align-items: center;
}

.reactor-head p {
  margin: 0;
  color: #ead9a7;
  line-height: 1.25;
}

.reactor-head strong {
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.48);
  border-radius: 8px;
  color: var(--gold);
  background: #080604;
  font-family: "JetBrains Mono", Consolas, monospace;
}

.reactor-core {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 26px;
}

.reactor-core span {
  border: 1px solid rgb(242 201 76 / 0.2);
  border-radius: 999px;
  background: rgb(255 246 215 / 0.06);
}

.reactor-core[data-charge="1"] span:nth-child(-n + 1),
.reactor-core[data-charge="2"] span:nth-child(-n + 2),
.reactor-core[data-charge="3"] span {
  border-color: rgb(242 201 76 / 0.76);
  background: linear-gradient(90deg, #f2c94c, #55b7d9);
  box-shadow: 0 0 14px rgb(242 201 76 / 0.34);
}

.reactor-steps {
  display: grid;
  gap: 7px;
}

.reactor-steps span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  color: #d8c690;
  background: rgb(255 255 255 / 0.035);
  font-size: 0.78rem;
  line-height: 1.15;
}

.reactor-steps b {
  display: grid;
  place-items: center;
  min-height: 24px;
  border-radius: 7px;
  color: #100b05;
  background: #8a7440;
  font-family: "JetBrains Mono", Consolas, monospace;
}

.reactor-steps span.charged {
  border-color: rgb(87 201 135 / 0.48);
  color: #e9ffe9;
  background: rgb(87 201 135 / 0.1);
}

.reactor-steps span.charged b {
  background: #9effbd;
}

.session-goals {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.32);
  border-radius: 8px;
  background:
    radial-gradient(circle at 90% 14%, rgb(242 201 76 / 0.12), transparent 38%),
    linear-gradient(145deg, rgb(24 17 9 / 0.84), rgb(8 6 4 / 0.92));
}

.session-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 10px;
  align-items: center;
}

.session-head p {
  margin: 0;
  color: #e7d7a8;
  line-height: 1.25;
}

.session-head strong {
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.48);
  border-radius: 8px;
  color: var(--gold);
  background: #080604;
  font-family: "JetBrains Mono", Consolas, monospace;
}

.session-goal-list {
  display: grid;
  gap: 8px;
}

.session-goal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 8px;
  background: #080604;
}

.session-goal b,
.session-goal span {
  display: block;
}

.session-goal b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
}

.session-goal span {
  margin-top: 2px;
  color: #d8c690;
  font-size: 0.74rem;
  line-height: 1.22;
}

.session-goal strong {
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 8px;
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
}

.session-goal.done {
  border-color: rgb(87 201 135 / 0.58);
  background: rgb(87 201 135 / 0.1);
}

.session-goal.done strong {
  border-color: rgb(87 201 135 / 0.5);
  color: #9effbd;
}

.tutor-ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid rgb(77 139 87 / 0.4);
  border-radius: 8px;
  background:
    radial-gradient(circle at 14% 18%, rgb(77 139 87 / 0.14), transparent 42%),
    rgb(255 255 255 / 0.035);
}

.tutor-ledger h3 {
  margin: 0 0 5px;
  color: #dfffe3;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.1;
}

.tutor-ledger p {
  margin: 0;
  color: #d5eacb;
  line-height: 1.28;
}

.quest-oracle {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(169 119 255 / 0.38);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 18%, rgb(169 119 255 / 0.13), transparent 42%),
    linear-gradient(145deg, rgb(16 10 22 / 0.9), rgb(8 6 4 / 0.92));
}

.oracle-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 10px;
  align-items: center;
}

.oracle-head p {
  margin: 0;
  color: #e1d5ff;
  line-height: 1.28;
}

.oracle-head strong {
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(169 119 255 / 0.58);
  border-radius: 8px;
  color: #eadfff;
  background: #09040e;
  font-family: "JetBrains Mono", Consolas, monospace;
}

.oracle-list {
  display: grid;
  gap: 8px;
}

.oracle-mission {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.04);
}

.oracle-mission > span {
  min-height: 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #130d05;
  background: #eadfff;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 900;
}

.oracle-mission b,
.oracle-mission p {
  display: block;
  margin: 0;
}

.oracle-mission b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
}

.oracle-mission p {
  margin-top: 3px;
  color: #d8c690;
  font-size: 0.84rem;
  line-height: 1.28;
}

.oracle-mission.daily > span {
  background: var(--gold);
}

.oracle-mission.review > span {
  color: #061218;
  background: #9ee8ff;
}

.oracle-mission.project > span {
  color: #061209;
  background: #9effbd;
}

.oracle-mission.memory > span {
  color: #061209;
  background: #9effbd;
}

.oracle-mission.rank > span {
  background: #fff6d7;
}

.oracle-mission.reward > span {
  color: #150907;
  background: #d96b2b;
}

.review-button {
  min-height: 38px;
  margin-top: 10px;
  padding: 6px 10px;
  border: 1px solid rgb(77 139 87 / 0.58);
  border-radius: 999px;
  color: #dfffe3;
  background: rgb(77 139 87 / 0.12);
  cursor: pointer;
  font-weight: 900;
}

.review-button:hover,
.review-button:focus-visible {
  border-color: #9bd46b;
  box-shadow: 0 0 18px rgb(77 139 87 / 0.18);
}

.review-queue {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(85 183 217 / 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 18%, rgb(85 183 217 / 0.13), transparent 40%),
    rgb(255 255 255 / 0.035);
}

.review-queue-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: center;
}

.review-queue-head p {
  margin: 0;
  color: #d3e9ea;
  line-height: 1.25;
}

.review-queue-head strong {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(85 183 217 / 0.42);
  border-radius: 8px;
  color: #9ee8ff;
  background: #050a0c;
  font-family: "JetBrains Mono", Consolas, monospace;
}

.review-queue-list {
  display: grid;
  gap: 8px;
}

.review-item {
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 8px;
  background: #080604;
}

.review-item b,
.review-item p,
.review-item small {
  display: block;
  margin: 0;
}

.review-item b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.84rem;
}

.review-item p {
  margin-top: 4px;
  color: #d8c690;
  font-size: 0.82rem;
  line-height: 1.28;
}

.review-item small {
  margin-top: 5px;
  color: #9fb1a5;
  font-size: 0.68rem;
}

.review-empty {
  padding: 10px;
  border: 1px dashed rgb(85 183 217 / 0.3);
  border-radius: 8px;
  color: #9fb1a5;
  text-align: center;
}

.lab-notebook {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.3);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 18%, rgb(242 201 76 / 0.1), transparent 44%),
    rgb(255 255 255 / 0.035);
}

.notebook-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.notebook-head p {
  margin: 0;
  color: #e8d9aa;
  line-height: 1.25;
}

.note-list {
  display: grid;
  gap: 8px;
}

.note-item,
.note-empty {
  display: block;
  padding: 9px;
  border: 1px solid rgb(242 201 76 / 0.2);
  border-radius: 8px;
  background: #080604;
}

.note-item b {
  display: block;
  color: var(--gold-soft);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
}

.note-item p {
  margin: 4px 0 0;
  color: #e3d3a4;
  font-size: 0.82rem;
  line-height: 1.25;
}

.note-empty {
  color: var(--muted);
  font-weight: 900;
  text-align: center;
}

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

.tutor-stats span {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 6px;
  border: 1px solid rgb(77 139 87 / 0.46);
  border-radius: 8px;
  color: var(--muted);
  background: #070908;
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.tutor-stats b {
  display: block;
  color: #9bd46b;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1rem;
}

.combo-meter {
  min-height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.45);
  border-radius: 8px;
  background: #090604;
}

.combo-meter span {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.combo-meter strong {
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1.35rem;
}

.game-shell.chain-hot .combo-meter {
  border-color: var(--gold);
  box-shadow: 0 0 22px rgb(242 201 76 / 0.2);
  animation: chainPulse 1.1s infinite ease-in-out;
}

.relic-shelf {
  order: 7;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.035);
}

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

.relic {
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 6px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 7px;
  color: var(--muted);
  background: #080604;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}

.relic.earned {
  color: #120d06;
  border-color: var(--gold);
  background: linear-gradient(145deg, var(--gold), #d8922a);
  box-shadow: 0 0 20px rgb(242 201 76 / 0.2);
}

.loot-rail {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  width: min(360px, calc(100vw - 44px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}

@media (min-width: 961px) {
  .loot-rail {
    right: auto;
    left: 22px;
  }
}

.achievement {
  position: relative;
  max-width: min(360px, calc(100vw - 44px));
  padding: 14px 16px;
  border: 1px solid rgb(242 201 76 / 0.62);
  border-radius: 8px;
  color: #fff4c6;
  background: linear-gradient(145deg, #2c1e10, #080604);
  box-shadow: 0 16px 45px rgb(0 0 0 / 0.46), 0 0 26px rgb(242 201 76 / 0.18);
  animation: toastIn 3.1s ease forwards;
}

.achievement b,
.achievement span {
  display: block;
}

.achievement b {
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  letter-spacing: 0.04em;
}

.achievement span {
  margin-top: 4px;
  color: #ddcea0;
}

.sound-toggle[aria-pressed="true"] {
  color: #130d05;
  background: var(--gold);
}

.room-transition {
  --arrival-accent: var(--gold);
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--arrival-accent) 22%, transparent), transparent 24%),
    radial-gradient(circle at 50% 50%, rgb(10 8 4 / 0.2), rgb(10 8 4 / 0.82));
}

.room-transition[data-domain="science"] { --arrival-accent: #6fcf97; }
.room-transition[data-domain="physics"] { --arrival-accent: var(--aether); }
.room-transition[data-domain="engineering"] { --arrival-accent: var(--ember); }
.room-transition[data-domain="ai"] { --arrival-accent: #b59cff; }

.room-transition.show {
  visibility: visible;
  animation: roomFade 1320ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.transition-gate {
  position: relative;
  width: min(430px, 72vw);
  aspect-ratio: 1.34;
  border: 1px solid color-mix(in srgb, var(--arrival-accent) 48%, transparent);
  border-radius: 50% 50% 6px 6px;
  background:
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--arrival-accent) 26%, transparent), transparent 48%),
    linear-gradient(90deg, color-mix(in srgb, var(--arrival-accent) 24%, transparent), transparent 16%, transparent 84%, color-mix(in srgb, var(--arrival-accent) 22%, transparent)),
    linear-gradient(180deg, #2b1b0e, #070503 74%);
  box-shadow: 0 0 88px color-mix(in srgb, var(--arrival-accent) 30%, transparent), inset 0 0 36px rgb(0 0 0 / 0.6);
  overflow: hidden;
}

.transition-gate::before {
  content: "";
  position: absolute;
  inset: 13% 10% 0;
  border: 1px solid color-mix(in srgb, var(--arrival-accent) 38%, transparent);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  box-shadow: inset 0 0 34px color-mix(in srgb, var(--arrival-accent) 14%, transparent);
}

.transition-gate span {
  position: absolute;
  top: 12%;
  bottom: 0;
  width: 50%;
  background:
    repeating-linear-gradient(90deg, rgb(255 246 215 / 0.055) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, #3a2411, #0a0604);
  box-shadow: inset 0 0 24px rgb(0 0 0 / 0.62);
}

.transition-gate span:first-child {
  left: 0;
  transform-origin: left center;
}

.transition-gate span:last-child {
  right: 0;
  transform-origin: right center;
}

.room-transition.show .transition-gate span:first-child {
  animation: gateLeft 1160ms cubic-bezier(0.2, 0.85, 0.2, 1) forwards;
}

.room-transition.show .transition-gate span:last-child {
  animation: gateRight 1160ms cubic-bezier(0.2, 0.85, 0.2, 1) forwards;
}

.transition-arrival {
  position: absolute;
  left: 50%;
  bottom: clamp(86px, 14vh, 136px);
  z-index: 2;
  width: min(620px, calc(100vw - 34px));
  display: grid;
  gap: 6px;
  overflow: hidden;
  padding: 15px 18px 17px;
  border: 1px solid color-mix(in srgb, var(--arrival-accent) 42%, transparent);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--arrival-accent) 18%, transparent), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.08), rgb(0 0 0 / 0.18)),
    rgb(8 6 4 / 0.86);
  box-shadow: 0 0 34px color-mix(in srgb, var(--arrival-accent) 24%, transparent), inset 0 1px 0 rgb(255 246 215 / 0.1);
  text-align: center;
  transform: translateX(-50%);
}

.transition-arrival::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--arrival-accent) 18%, transparent);
  border-radius: 7px;
  pointer-events: none;
}

.transition-arrival h2,
.transition-arrival p {
  margin: 0;
}

.transition-arrival h2 {
  color: #fff6d7;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.38rem, 4vw, 2.35rem);
  line-height: 1;
  text-shadow: 0 0 18px color-mix(in srgb, var(--arrival-accent) 26%, transparent);
}

.transition-arrival p {
  color: #e6d8ad;
  line-height: 1.35;
}

.room-transition.show .transition-arrival {
  animation: wingArrivalCard 1320ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.transition-pill {
  position: absolute;
  bottom: clamp(28px, 6vh, 62px);
  max-width: min(560px, calc(100vw - 40px));
  margin: 0;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--arrival-accent) 42%, transparent);
  border-radius: 999px;
  color: #fff4c6;
  background: rgb(8 6 4 / 0.78);
  box-shadow: 0 0 24px color-mix(in srgb, var(--arrival-accent) 18%, transparent);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.78rem, 2.4vw, 1rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.transition-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.transition-sparks i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--arrival-accent);
  box-shadow: 0 0 14px var(--arrival-accent);
  opacity: 0;
}

.transition-sparks i:nth-child(1) { left: 12%; top: 28%; }
.transition-sparks i:nth-child(2) { left: 28%; bottom: 22%; animation-delay: 80ms; }
.transition-sparks i:nth-child(3) { right: 18%; top: 24%; animation-delay: 150ms; }
.transition-sparks i:nth-child(4) { right: 32%; bottom: 18%; animation-delay: 220ms; }
.transition-sparks i:nth-child(5) { left: 50%; top: 16%; animation-delay: 300ms; }

.room-transition.show .transition-sparks i {
  animation: transitionSpark 860ms ease-out forwards;
}

.boss-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 72px;
  gap: 12px;
  align-items: center;
  padding: 11px;
  border: 1px solid rgb(217 107 43 / 0.36);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 35%, rgb(217 107 43 / 0.14), transparent 38%),
    linear-gradient(145deg, rgb(255 246 215 / 0.05), rgb(255 246 215 / 0.018));
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.boss-card img {
  width: 74px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgb(242 201 76 / 0.52);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.34);
}

.boss-card > div {
  min-width: 0;
}

.boss-card h3 {
  margin: 0 0 4px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.08;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.boss-phase {
  display: inline-grid;
  min-height: 28px;
  align-items: center;
  margin: 2px 0 7px;
  padding: 4px 8px;
  border: 1px solid rgb(242 201 76 / 0.38);
  border-radius: 999px;
  color: var(--gold);
  background: #080604;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.boss-phase[data-phase="steam"] {
  border-color: rgb(217 107 43 / 0.62);
  color: #ffcf9c;
}

.boss-phase[data-phase="core"] {
  border-color: rgb(232 91 69 / 0.72);
  color: #ffb09e;
  box-shadow: 0 0 18px rgb(232 91 69 / 0.16);
}

.boss-phase[data-phase="defeated"] {
  border-color: rgb(87 201 135 / 0.62);
  color: #9effbd;
}

.boss-card p {
  margin: 0;
  color: #d8c690;
  font-size: 0.9rem;
  line-height: 1.25;
}

.boss-card,
.meters,
.mentor-strip,
.spellbook,
.challenge-card,
.method-lab,
.codex,
.controls {
  position: relative;
}

.meters,
.mentor-strip,
.dm-panel,
.lab-reactor,
.session-goals,
.tutor-ledger,
.review-queue,
.quest-oracle,
.lab-notebook,
.method-lab,
.codex,
.spellbook {
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
}

.dm-panel,
.lab-reactor,
.session-goals,
.tutor-ledger,
.review-queue,
.quest-oracle,
.lab-notebook {
  background:
    radial-gradient(circle at 10% 0%, rgb(242 201 76 / 0.055), transparent 42%),
    linear-gradient(145deg, rgb(255 246 215 / 0.045), rgb(255 246 215 / 0.014)) !important;
  border-color: rgb(255 246 215 / 0.16) !important;
}

.shield-plates {
  display: grid;
  grid-template-columns: repeat(6, minmax(18px, 1fr));
  gap: 6px;
  margin-top: 12px;
  max-width: 260px;
}

.shield-plate {
  position: relative;
  height: 13px;
  border: 1px solid rgb(242 201 76 / 0.56);
  border-radius: 4px;
  background: linear-gradient(135deg, rgb(242 201 76 / 0.46), rgb(255 246 215 / 0.18));
  box-shadow: inset 0 0 9px rgb(255 246 215 / 0.2), 0 0 10px rgb(242 201 76 / 0.16);
  overflow: hidden;
}

.shield-plate::after {
  content: "";
  position: absolute;
  inset: -5px 45% -5px auto;
  width: 2px;
  background: rgb(255 246 215 / 0.75);
  transform: rotate(18deg);
  opacity: 0;
}

.shield-plate.science {
  border-color: rgb(87 201 135 / 0.72);
  background: linear-gradient(135deg, rgb(87 201 135 / 0.42), rgb(255 246 215 / 0.14));
}

.shield-plate.physics {
  border-color: rgb(85 183 217 / 0.72);
  background: linear-gradient(135deg, rgb(85 183 217 / 0.42), rgb(255 246 215 / 0.14));
}

.shield-plate.engineering {
  border-color: rgb(217 107 43 / 0.78);
  background: linear-gradient(135deg, rgb(217 107 43 / 0.42), rgb(255 246 215 / 0.14));
}

.shield-plate.ai {
  border-color: rgb(169 119 255 / 0.78);
  background: linear-gradient(135deg, rgb(169 119 255 / 0.42), rgb(255 246 215 / 0.14));
}

.shield-plate.next {
  animation: plateTarget 1.25s ease-in-out infinite;
}

.shield-plate.broken {
  border-style: dashed;
  background: rgb(255 246 215 / 0.08);
  box-shadow: none;
  opacity: 0.38;
  transform: skewX(-8deg);
}

.shield-plate.broken::after {
  opacity: 0.75;
}

.shield-plates.impact .shield-plate.next,
.shield-plates.surge-impact .shield-plate.next {
  animation: plateImpact 560ms ease;
}

.shield-plates.surge-impact {
  filter: drop-shadow(0 0 16px rgb(242 201 76 / 0.72));
}

.adventure-log {
  padding: 12px;
  border: 1px solid rgb(85 183 217 / 0.42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 8%, rgb(85 183 217 / 0.12), transparent 36%),
    linear-gradient(145deg, rgb(7 14 16 / 0.86), rgb(18 12 8 / 0.92));
  box-shadow: inset 0 0 0 1px rgb(255 246 215 / 0.04);
}

.log-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 12px;
  align-items: center;
}

.log-head p {
  margin: 0;
  color: #d8c690;
  line-height: 1.3;
}

.log-head strong {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(85 183 217 / 0.42);
  border-radius: 8px;
  color: #9ee8ff;
  background: #050a0c;
  font-family: "JetBrains Mono", Consolas, monospace;
}

.log-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.log-entry {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background: rgb(255 246 215 / 0.045);
  animation: logEntryIn 360ms ease both;
}

.log-entry > span {
  min-height: 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #130d05;
  background: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 900;
}

.log-entry b,
.log-entry p {
  display: block;
  margin: 0;
}

.log-entry b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}

.log-entry p {
  margin-top: 3px;
  color: #d8c690;
  font-size: 0.86rem;
  line-height: 1.28;
}

.log-entry.hit > span {
  background: #f2c94c;
}

.log-entry.surge > span,
.log-entry.legendary > span {
  background: #fff6d7;
  box-shadow: 0 0 18px rgb(242 201 76 / 0.38);
}

.log-entry.clue > span,
.log-entry.review > span {
  color: #061218;
  background: #9ee8ff;
}

.log-entry.forge > span,
.log-entry.reward > span {
  color: #150907;
  background: #d96b2b;
}

.log-entry.victory > span {
  color: #130d05;
  background: linear-gradient(135deg, #fff6d7, #f2c94c);
}

.log-entry.training > span {
  color: #061218;
  background: #57c987;
}

.log-empty {
  padding: 10px;
  border: 1px dashed rgb(85 183 217 / 0.3);
  border-radius: 8px;
  color: #9fb1a5;
  text-align: center;
}

.best-score {
  min-height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.36);
  border-radius: 8px;
  background: #090604;
}

.best-score span {
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.best-score strong {
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1.2rem;
}

.kicker,
.mini-label {
  margin: 0 0 8px;
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  max-width: 13ch;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(2rem, 3.6vw, 3.7rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.rank-card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 116px;
  padding: 12px;
  border: 2px solid rgb(242 201 76 / 0.62);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 10%, rgb(242 201 76 / 0.24), transparent 44%),
    linear-gradient(#352716, #120d08);
  box-shadow:
    0 0 0 4px #090604,
    0 14px 30px rgb(0 0 0 / 0.35),
    inset 0 1px 0 rgb(255 246 215 / 0.12);
  text-align: center;
}

.rank-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgb(255 246 215 / 0.08);
  border-radius: 5px;
  pointer-events: none;
}

.rank-card span,
.rank-card small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.rank-card strong {
  display: block;
  margin-top: 4px;
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 2.1rem;
}

.meters {
  display: grid;
  grid-template-columns: 0.65fr 1fr 1fr;
  gap: 10px;
}

.meter {
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.045);
}

.meter span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.meter strong {
  color: var(--gold);
  font-size: 1.6rem;
}

.bar {
  height: 14px;
  border: 2px solid #090604;
  border-radius: 999px;
  background: #080604;
  overflow: hidden;
}

.bar i {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--aether), var(--gold));
  transition: width 320ms ease;
}

.bar.shield i {
  width: 100%;
  background: linear-gradient(90deg, var(--blood), var(--ember));
}

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

.curriculum-map {
  position: relative;
  padding: 14px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, rgb(242 201 76 / 0.14), transparent 34%),
    radial-gradient(circle at 88% 12%, rgb(85 183 217 / 0.1), transparent 38%),
    linear-gradient(145deg, rgb(255 246 215 / 0.055), rgb(255 246 215 / 0.018));
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 16px 34px rgb(0 0 0 / 0.2);
  overflow: hidden;
}

.curriculum-map::before {
  content: "";
  position: absolute;
  inset: 52px 18px auto 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(242 201 76 / 0.42), transparent);
  opacity: 0.72;
}

.map-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

.map-head h3,
.map-head p {
  margin: 0;
}

.map-head h3 {
  color: #fff7d8;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.15;
  text-wrap: balance;
}

.map-head p {
  margin-top: 5px;
  max-width: 58ch;
  color: #d5c797;
  line-height: 1.35;
  font-size: 0.88rem;
}

.map-head strong {
  min-width: 74px;
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  border: 1px solid rgb(85 183 217 / 0.4);
  border-radius: 8px;
  color: #bdefff;
  background: #050a0c;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
}

.academy-path-summary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.path-stat {
  min-height: 76px;
  display: grid;
  gap: 4px;
  align-content: center;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 0%, rgb(242 201 76 / 0.12), transparent 58%),
    rgb(5 6 5 / 0.58);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.path-stat span,
.path-stat small {
  color: #aa9d78;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.path-stat b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.92rem, 1.6vw, 1.12rem);
  line-height: 1.05;
}

.path-stat small {
  color: #9ee8ff;
  text-transform: none;
  letter-spacing: 0;
}

.map-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.map-tower {
  position: relative;
  min-height: 164px;
  display: grid;
  grid-template-rows: auto auto auto minmax(42px, 1fr) auto auto;
  gap: 5px;
  padding: 11px 10px;
  border: 1px solid rgb(255 246 215 / 0.14);
  border-radius: 8px;
  color: #fff4cf;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.06), transparent 62%),
    #080604;
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
  cursor: pointer;
  text-align: left;
  transition: transform 180ms var(--motion), border-color 180ms ease, background 180ms ease;
}

.map-tower:hover {
  transform: translateY(-2px);
  border-color: rgb(242 201 76 / 0.56);
  background:
    linear-gradient(180deg, rgb(242 201 76 / 0.1), transparent 66%),
    #0d0905;
}

.map-tower:focus-visible {
  outline: 3px solid rgb(85 183 217 / 0.8);
  outline-offset: 2px;
}

.map-tower.current {
  border-color: rgb(242 201 76 / 0.72);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.12), 0 0 24px rgb(242 201 76 / 0.14);
}

.tower-rune {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.42);
  border-radius: 7px;
  color: #130d05;
  background: linear-gradient(145deg, var(--gold-soft), var(--gold));
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 900;
}

.map-tower b {
  color: #fff8d8;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.1;
}

.map-tower small {
  color: #9ee8ff;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.map-tower p {
  margin: 0;
  color: #cdbf93;
  font-size: 0.72rem;
  line-height: 1.25;
}

.map-tower i {
  height: 7px;
  display: block;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 99px;
  background: #050403;
  overflow: hidden;
}

.map-tower i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--aether), var(--gold));
}

.map-tower strong {
  justify-self: start;
  padding: 3px 7px;
  border: 1px solid rgb(255 246 215 / 0.14);
  border-radius: 6px;
  color: var(--gold);
  background: rgb(0 0 0 / 0.26);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
}

.academy-skill-tree {
  gap: 10px;
}

.academy-skill-tree .map-tower {
  min-height: 298px;
  grid-template-rows: auto auto auto auto minmax(54px, 1fr) minmax(46px, auto) auto;
  gap: 7px;
}

.tower-head,
.tower-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tower-status {
  max-width: 118px;
  padding: 4px 7px;
  border: 1px solid rgb(85 183 217 / 0.34);
  border-radius: 999px;
  color: #bdefff;
  background: rgb(5 10 12 / 0.72);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.tower-path {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.tower-path li {
  min-height: 54px;
  display: grid;
  grid-template-rows: 18px 1fr auto;
  gap: 3px;
  padding: 5px 4px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 7px;
  background: rgb(0 0 0 / 0.22);
  opacity: 0.72;
}

.tower-path li.complete {
  border-color: rgb(158 255 189 / 0.4);
  background: rgb(30 80 48 / 0.24);
  opacity: 1;
}

.tower-path li.current {
  border-color: rgb(242 201 76 / 0.52);
  background: rgb(242 201 76 / 0.1);
  box-shadow: inset 0 0 18px rgb(242 201 76 / 0.08);
  opacity: 1;
}

.tower-path span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #080604;
  background: #77663b;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 900;
}

.tower-path li.complete span {
  background: #9effbd;
}

.tower-path li.current span {
  background: var(--gold);
}

.tower-path b,
.tower-path small {
  min-width: 0;
  overflow-wrap: break-word;
}

.tower-path b {
  color: #f5e5ad;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.56rem;
  line-height: 1.1;
}

.tower-path small {
  color: #a99d7d;
  font-size: 0.54rem;
  line-height: 1;
}

.tower-next,
.tower-capstone {
  padding: 7px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background: rgb(0 0 0 / 0.16);
}

.tower-next span,
.tower-capstone span {
  display: block;
  margin-bottom: 3px;
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tower-footer i {
  flex: 1;
}

.map-tower.sealed {
  border-color: rgb(158 255 189 / 0.48);
}

.map-tower.sealed .tower-status {
  border-color: rgb(158 255 189 / 0.45);
  color: #9effbd;
}

.future-realms-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.future-realms-head,
.future-realm-card {
  min-height: 72px;
  display: grid;
  gap: 4px;
  align-content: center;
  padding: 10px;
  border: 1px solid rgb(85 183 217 / 0.26);
  border-radius: 8px;
  background: rgb(5 10 12 / 0.52);
}

.future-realms-head b,
.future-realm-card b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.84rem;
  line-height: 1.08;
}

.future-realm-card span,
.future-realm-card small {
  color: #9ee8ff;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.future-realm-card small {
  color: #cbbd91;
  text-transform: none;
  letter-spacing: 0;
}

.spell {
  min-height: 66px;
  padding: 9px;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 10px;
  color: var(--text);
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(255 246 215 / 0.018)),
    #100c08;
  cursor: pointer;
  transition: transform 420ms var(--motion), border-color 420ms var(--motion), box-shadow 420ms var(--motion), background 420ms var(--motion);
}

.spell:hover,
.spell:focus-visible {
  transform: translateY(-2px);
  border-color: rgb(85 183 217 / 0.68);
  box-shadow: 0 0 18px rgb(85 183 217 / 0.16);
}

.spell b,
.spell span {
  display: block;
}

.spell b {
  color: var(--gold-soft);
  font-size: 0.78rem;
}

.spell span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.spell.mastered {
  background:
    radial-gradient(circle at top, rgb(242 201 76 / 0.2), transparent 70%),
    #100c08;
}

.spell.active {
  border-color: var(--gold);
  box-shadow: inset 0 0 22px rgb(242 201 76 / 0.12), 0 0 20px rgb(242 201 76 / 0.16);
}

.lesson-scroll {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.5);
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 12%, rgb(242 201 76 / 0.18), transparent 42%),
    radial-gradient(circle at 94% 10%, rgb(85 183 217 / 0.1), transparent 34%),
    linear-gradient(145deg, rgb(33 23 12 / 0.96), rgb(7 5 3 / 0.98));
  box-shadow:
    0 0 0 5px rgb(5 3 2 / 0.88),
    0 28px 70px rgb(0 0 0 / 0.46),
    inset 0 1px 0 rgb(255 246 215 / 0.14),
    inset 0 0 38px rgb(242 201 76 / 0.055);
  overflow: hidden;
}

.lesson-scroll::before {
  content: "Teach";
  justify-self: start;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 2px 8px;
  border: 1px solid rgb(242 201 76 / 0.38);
  border-radius: 999px;
  color: var(--gold);
  background: rgb(8 6 4 / 0.86);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.lesson-scroll > .lesson-head { order: 1; }
.lesson-scroll > .week-one-quest-scene { order: 2; }
.lesson-scroll > .lesson-mission-control { order: 3; }
.lesson-scroll > .lesson-cinematic-stage { order: 4; }
.lesson-scroll > .first-five-guide { order: 5; }
.lesson-scroll > .classroom-compass { order: 6; }
.lesson-scroll > .guided-practice { order: 7; }
.lesson-scroll > .room-investigation { order: 8; }
.lesson-scroll > .brain-spark { order: 9; }
.lesson-scroll > .lesson-ready-button { order: 10; }
.lesson-scroll > .lesson-reference-drawer { order: 10; }
.lesson-scroll > .lesson-materials-drawer { order: 11; }

.lesson-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
  align-items: center;
}

.lesson-head h3,
.lesson-head p {
  margin: 0;
}

.lesson-head h3 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.1;
  text-wrap: balance;
}

.lesson-head p {
  margin-top: 4px;
  color: #e4d4a4;
  line-height: 1.28;
}

.lesson-head strong {
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 7px;
  border: 1px solid rgb(242 201 76 / 0.46);
  border-radius: 9px;
  color: var(--gold);
  background:
    radial-gradient(circle at top, rgb(242 201 76 / 0.14), transparent 70%),
    #080604;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
  text-align: center;
}

.first-five-guide {
  --first-five-accent: var(--gold);
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--first-five-accent) 38%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--first-five-accent) 18%, transparent), transparent 44%),
    radial-gradient(circle at 92% 20%, rgb(85 183 217 / 0.1), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.16)),
    rgb(8 6 4 / 0.66);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 16px 36px rgb(0 0 0 / 0.18);
}

.first-five-guide.hidden {
  display: none;
}

.first-five-guide::before {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  border: 1px solid rgb(242 201 76 / 0.1);
  border-radius: 6px;
}

.first-five-guide[data-state="complete"] {
  border-color: rgb(158 255 189 / 0.42);
}

.first-five-copy,
.first-five-track,
.first-five-actions {
  position: relative;
  z-index: 1;
}

.first-five-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.first-five-copy h4,
.first-five-copy p {
  margin: 0;
}

.first-five-copy h4 {
  margin-top: 2px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.08rem, 2vw, 1.45rem);
  line-height: 1.06;
  text-wrap: balance;
}

.first-five-copy p {
  max-width: 72ch;
  margin-top: 5px;
  color: #d8c99b;
  font-size: 0.82rem;
  line-height: 1.35;
}

.first-five-copy strong {
  min-width: 78px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--first-five-accent) 44%, transparent);
  border-radius: 8px;
  color: #120d06;
  background: linear-gradient(180deg, #fff4bd, var(--first-five-accent));
  font: 1000 0.68rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.first-five-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.first-five-step {
  min-width: 0;
  min-height: 74px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-content: start;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.14)),
    rgb(0 0 0 / 0.16);
}

.first-five-step.current {
  border-color: rgb(242 201 76 / 0.5);
  background:
    radial-gradient(circle at 16% 10%, rgb(242 201 76 / 0.16), transparent 52%),
    rgb(17 12 5 / 0.72);
  animation: firstQuestCurrent 1.8s ease-in-out infinite;
}

.first-five-step.complete {
  border-color: rgb(158 255 189 / 0.32);
}

.first-five-step.locked {
  opacity: 0.62;
}

.first-five-step > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #120d06;
  background: #726d59;
  font: 1000 0.68rem "JetBrains Mono", Consolas, monospace;
}

.first-five-step.current > span,
.first-five-step.complete > span {
  background: var(--first-five-accent);
}

.first-five-step small,
.first-five-step b,
.first-five-step em {
  min-width: 0;
  display: block;
  overflow-wrap: break-word;
}

.first-five-step small {
  color: var(--first-five-accent);
  font-size: 0.56rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.first-five-step b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.8rem;
  line-height: 1.08;
}

.first-five-step em {
  color: #cfc19a;
  font-size: 0.64rem;
  font-style: normal;
  line-height: 1.18;
}

.first-five-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.first-five-actions button {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), border-color 180ms var(--motion);
}

.first-five-actions button:first-child {
  border: 1px solid rgb(242 201 76 / 0.46);
  color: #130d05;
  background: linear-gradient(180deg, #fff0a3, var(--gold));
  box-shadow: 0 5px 0 rgb(0 0 0 / 0.3);
}

.first-five-actions button:last-child {
  border: 1px solid rgb(85 183 217 / 0.28);
  color: #dff6ff;
  background: rgb(85 183 217 / 0.08);
}

.first-five-actions button:hover,
.first-five-actions button:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.first-five-actions button:active {
  transform: translateY(1px);
}

.lesson-mission-control {
  --mission-accent: var(--gold);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(224px, 0.76fr);
  grid-template-areas:
    "main main"
    "metrics metrics"
    "rail rail"
    "signals next";
  gap: 9px 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--mission-accent) 38%, transparent);
  border-radius: 9px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--mission-accent) 15%, transparent), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.16)),
    rgb(7 6 4 / 0.76);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 15px 30px rgb(0 0 0 / 0.18);
  overflow: hidden;
}

.lesson-mission-control::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--mission-accent) 34%, transparent), transparent 28% 72%, color-mix(in srgb, var(--mission-accent) 18%, transparent)),
    repeating-linear-gradient(90deg, transparent 0 16px, rgb(255 246 215 / 0.035) 16px 17px);
  opacity: 0.34;
  mask-image: linear-gradient(180deg, #000, transparent 72%);
}

.lesson-mission-control > * {
  position: relative;
  z-index: 1;
}

.lesson-mission-control[data-domain="science"] { --mission-accent: #6fcf97; }
.lesson-mission-control[data-domain="physics"] { --mission-accent: var(--aether); }
.lesson-mission-control[data-domain="engineering"] { --mission-accent: var(--ember); }
.lesson-mission-control[data-domain="ai"] { --mission-accent: #b59cff; }

.lesson-mission-main {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 100%;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--mission-accent) 22%, rgb(255 246 215 / 0.08));
  border-radius: 8px;
  background: rgb(0 0 0 / 0.16);
}

.lesson-mission-main h4,
.lesson-mission-main p {
  margin: 0;
}

.lesson-mission-main h4 {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.26rem);
  line-height: 1.08;
  text-wrap: balance;
}

.lesson-mission-main p {
  max-width: 62ch;
  color: #d9cba3;
  font-size: 0.78rem;
  line-height: 1.3;
}

.lesson-mission-main button {
  min-height: 42px;
  min-width: 144px;
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--mission-accent) 48%, rgb(255 246 215 / 0.28));
  border-radius: 8px;
  color: #130d05;
  background: linear-gradient(180deg, #fff2b5, color-mix(in srgb, var(--mission-accent) 84%, var(--gold)));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.44), 0 7px 0 rgb(0 0 0 / 0.32);
  cursor: pointer;
  font-weight: 1000;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), box-shadow 180ms var(--motion);
}

.lesson-mission-main button:hover,
.lesson-mission-main button:focus-visible {
  filter: brightness(1.08);
}

.lesson-mission-main button:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.34), 0 3px 0 rgb(0 0 0 / 0.38);
}

.lesson-mission-metrics,
.lesson-mission-rail,
.lesson-mission-signals {
  display: grid;
  gap: 7px;
}

.lesson-mission-metrics {
  grid-area: metrics;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lesson-mission-rail {
  grid-area: rail;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lesson-mission-signals {
  grid-area: signals;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lesson-mission-metrics span,
.lesson-mission-signal {
  min-width: 0;
  min-height: 52px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--mission-accent) 22%, rgb(255 246 215 / 0.08));
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--mission-accent) 10%, transparent), transparent 52%),
    rgb(0 0 0 / 0.17);
}

.lesson-mission-metrics b,
.lesson-mission-metrics small,
.lesson-mission-signal span,
.lesson-mission-signal b,
.lesson-mission-signal small {
  min-width: 0;
  display: block;
  overflow-wrap: break-word;
}

.lesson-mission-metrics b,
.lesson-mission-signal b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.8rem;
  line-height: 1.06;
}

.lesson-mission-metrics small,
.lesson-mission-signal span {
  color: color-mix(in srgb, var(--mission-accent) 84%, #d7c794);
  font: 1000 0.56rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lesson-mission-signal small {
  color: #cfc19a;
  font-size: 0.62rem;
  line-height: 1.18;
}

.lesson-mission-control .student-day-step {
  min-height: 64px;
  padding: 7px;
  border-color: color-mix(in srgb, var(--mission-accent) 18%, rgb(255 246 215 / 0.1));
}

.lesson-mission-control .student-day-step > span {
  width: 24px;
  height: 24px;
}

.lesson-mission-control .student-day-step b {
  font-size: 0.74rem;
}

.lesson-mission-control .student-day-step em {
  max-height: 2.35em;
  overflow: hidden;
  font-size: 0.62rem;
}

.lesson-mission-control .student-day-step.current {
  border-color: color-mix(in srgb, var(--mission-accent) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mission-accent) 12%, transparent), rgb(0 0 0 / 0.16)),
    rgb(12 10 6 / 0.72);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.09), 0 0 18px color-mix(in srgb, var(--mission-accent) 12%, transparent);
}

.lesson-mission-control .student-day-step.current > span {
  background: color-mix(in srgb, var(--mission-accent) 82%, var(--gold));
}

.lesson-mission-signal.complete,
.lesson-mission-signal.ready {
  border-color: rgb(158 255 189 / 0.26);
}

.lesson-mission-next {
  grid-area: next;
  min-height: 100%;
  display: grid;
  align-content: center;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--mission-accent) 22%, transparent);
  border-radius: 8px;
  color: #e1d2a7;
  background: rgb(0 0 0 / 0.18);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.28;
}

.lesson-cinematic-stage {
  --stage-accent: var(--gold);
  position: relative;
  min-height: 218px;
  display: grid;
  grid-template-columns: minmax(220px, 0.96fr) minmax(0, 1.04fr);
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--stage-accent) 34%, rgb(255 246 215 / 0.08));
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--stage-accent) 18%, transparent), transparent 40%),
    linear-gradient(135deg, rgb(18 13 8 / 0.98), rgb(5 5 7 / 0.98));
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 18px 40px rgb(0 0 0 / 0.24);
  overflow: hidden;
}

.lesson-cinematic-stage[data-domain="science"] { --stage-accent: #6fcf97; }
.lesson-cinematic-stage[data-domain="physics"] { --stage-accent: var(--aether); }
.lesson-cinematic-stage[data-domain="engineering"] { --stage-accent: var(--ember); }
.lesson-cinematic-stage[data-domain="ai"] { --stage-accent: #b59cff; }

.lesson-cinematic-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 46%, rgb(0 0 0 / 0.28) 54%, transparent 100%),
    repeating-linear-gradient(0deg, rgb(255 246 215 / 0.025) 0 1px, transparent 1px 6px);
  mix-blend-mode: screen;
}

.lesson-cinematic-stage-art {
  position: relative;
  min-height: 218px;
  overflow: hidden;
  background: rgb(0 0 0 / 0.36);
}

.lesson-cinematic-stage-art > img,
.lesson-stage-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lesson-cinematic-stage-art > img {
  filter: saturate(1.08) contrast(1.06);
  transform: scale(1.04);
  animation: lessonStageDrift 12s ease-in-out infinite alternate;
}

.lesson-stage-video {
  z-index: 1;
  opacity: 0;
  transition: opacity 360ms var(--motion);
}

.lesson-cinematic-stage.has-video .lesson-stage-video {
  opacity: 0.92;
}

.lesson-cinematic-stage.has-video .lesson-cinematic-stage-art > img {
  opacity: 0.42;
}

.lesson-stage-mentor {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--stage-accent) 36%, rgb(255 246 215 / 0.08));
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--stage-accent) 18%, transparent), transparent 58%),
    linear-gradient(90deg, rgb(5 3 2 / 0.82), rgb(5 3 2 / 0.58));
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 12px 26px rgb(0 0 0 / 0.26);
  backdrop-filter: blur(8px);
}

.lesson-stage-mentor img {
  width: 52px;
  height: 60px;
  display: block;
  border: 1px solid color-mix(in srgb, var(--stage-accent) 42%, transparent);
  border-radius: 8px;
  object-fit: cover;
  object-position: 50% 18%;
  background: rgb(0 0 0 / 0.36);
  box-shadow: 0 0 18px color-mix(in srgb, var(--stage-accent) 16%, transparent);
}

.lesson-stage-mentor div,
.lesson-stage-mentor span,
.lesson-stage-mentor b,
.lesson-stage-mentor p {
  min-width: 0;
}

.lesson-stage-mentor span,
.lesson-stage-mentor b,
.lesson-stage-mentor p {
  display: block;
}

.lesson-stage-mentor span {
  color: color-mix(in srgb, var(--stage-accent) 86%, #fff1b5);
  font: 1000 0.55rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lesson-stage-mentor b {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.8rem;
  line-height: 1.06;
}

.lesson-stage-mentor p {
  margin: 3px 0 0;
  color: #ddcfaa;
  font-size: 0.68rem;
  line-height: 1.18;
}

@media (max-width: 620px) {
  .lesson-stage-mentor {
    left: 10px;
    right: 10px;
    bottom: 10px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 7px;
    padding: 7px;
  }

  .lesson-stage-mentor img {
    width: 44px;
    height: 50px;
  }

  .lesson-stage-mentor b {
    font-size: 0.72rem;
  }

  .lesson-stage-mentor p {
    display: none;
  }
}

.lesson-stage-light {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.lesson-stage-light span {
  position: absolute;
  width: 28%;
  height: 140%;
  top: -20%;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--stage-accent) 18%, transparent), transparent);
  filter: blur(12px);
  opacity: 0.44;
  transform: rotate(17deg);
  animation: lessonStageBeam 5.8s ease-in-out infinite;
}

.lesson-stage-light span:nth-child(1) { left: 8%; animation-delay: -1.4s; }
.lesson-stage-light span:nth-child(2) { left: 40%; animation-delay: -3.2s; }
.lesson-stage-light span:nth-child(3) { left: 68%; animation-delay: -4.6s; }

.lesson-cinematic-stage-copy {
  position: relative;
  z-index: 3;
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: center;
  padding: 18px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--stage-accent) 13%, transparent), transparent 46%),
    linear-gradient(90deg, rgb(5 4 3 / 0.2), rgb(5 4 3 / 0.76));
}

.lesson-cinematic-stage-copy h4,
.lesson-cinematic-stage-copy p {
  margin: 0;
}

.lesson-cinematic-stage-copy h4 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.15rem, 2.4vw, 1.72rem);
  line-height: 1.03;
  text-wrap: balance;
}

.lesson-cinematic-stage-copy p {
  max-width: 58ch;
  color: #dfd2a8;
  font-size: 0.88rem;
  line-height: 1.38;
}

.lesson-brief-card {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--stage-accent) 34%, transparent);
  border-radius: 12px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--stage-accent) 15%, transparent), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.052), rgb(0 0 0 / 0.2)),
    rgb(3 6 5 / 0.62);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.lesson-brief-main {
  display: grid;
  gap: 4px;
}

.lesson-brief-main span,
.lesson-brief-grid span {
  color: var(--stage-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lesson-brief-main b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.98rem, 1.7vw, 1.22rem);
  line-height: 1.08;
}

.lesson-brief-main p {
  max-width: 68ch;
  color: #d8caa2;
  font-size: 0.78rem;
  line-height: 1.32;
}

.lesson-brief-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.lesson-brief-grid article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(64px, 0.28fr) minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: 5px;
  min-height: 0;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 9px;
  background: rgb(0 0 0 / 0.2);
}

.lesson-brief-grid article:nth-child(1) {
  border-color: color-mix(in srgb, var(--stage-accent) 26%, transparent);
}

.lesson-brief-grid article:nth-child(3) {
  border-color: rgb(158 255 189 / 0.22);
}

.lesson-brief-grid p {
  margin: 0;
  color: #dfd2a8;
  font-size: 0.74rem;
  line-height: 1.3;
}

.lesson-stage-path,
.lesson-stage-sequence,
.lesson-stage-actions {
  display: grid;
  gap: 7px;
}

.lesson-stage-path {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--stage-accent) 20%, rgb(255 246 215 / 0.08));
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--stage-accent) 10%, transparent), transparent 54%),
    rgb(0 0 0 / 0.18);
}

.lesson-stage-sequence,
.lesson-stage-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lesson-stage-actions {
  grid-template-columns: minmax(0, 1fr) auto;
}

.lesson-stage-path-step {
  min-width: 0;
  min-height: 30px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 2px;
  align-items: center;
  padding: 4px 2px;
  border: 1px solid rgb(255 246 215 / 0.08);
  border-radius: 7px;
  color: #d8c89e;
  background: rgb(0 0 0 / 0.2);
  text-align: center;
}

.lesson-stage-path-step i,
.lesson-stage-path-step b {
  min-width: 0;
  display: block;
}

.lesson-stage-path-step i {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #100b04;
  background: #7d775f;
  font-style: normal;
  font: 1000 0.56rem "JetBrains Mono", Consolas, monospace;
}

.lesson-stage-path-step b {
  width: 100%;
  overflow: hidden;
  color: #e6d9b1;
  font: 1000 0.48rem "JetBrains Mono", Consolas, monospace;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.lesson-stage-path-step.current {
  border-color: color-mix(in srgb, var(--stage-accent) 50%, transparent);
  background: color-mix(in srgb, var(--stage-accent) 12%, rgb(0 0 0 / 0.2));
}

.lesson-stage-path-step.current i {
  background: color-mix(in srgb, var(--stage-accent) 86%, var(--gold));
}

.lesson-stage-path-step.complete {
  border-color: rgb(158 255 189 / 0.26);
}

.lesson-stage-path-step.complete i {
  background: #9effbd;
}

.lesson-stage-step,
.lesson-stage-actions button {
  min-width: 0;
  min-height: 50px;
  border: 1px solid color-mix(in srgb, var(--stage-accent) 24%, rgb(255 246 215 / 0.1));
  border-radius: 8px;
  color: #eadfb9;
  background: rgb(0 0 0 / 0.22);
  cursor: pointer;
  transition: transform 180ms var(--motion), border-color 180ms var(--motion), background 180ms var(--motion);
}

.lesson-stage-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 4px 7px;
  align-items: center;
  padding: 7px;
  text-align: left;
}

.lesson-stage-step span {
  grid-row: span 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #0e0904;
  background: color-mix(in srgb, var(--stage-accent) 86%, var(--gold));
  font-weight: 1000;
}

.lesson-stage-step b,
.lesson-stage-step small {
  min-width: 0;
  display: block;
  overflow-wrap: break-word;
}

.lesson-stage-step b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.79rem;
  line-height: 1.05;
}

.lesson-stage-step small {
  color: #cfc19a;
  font-size: 0.66rem;
  line-height: 1.1;
}

.lesson-stage-step.current {
  border-color: color-mix(in srgb, var(--stage-accent) 62%, transparent);
  background: color-mix(in srgb, var(--stage-accent) 13%, rgb(0 0 0 / 0.22));
}

.lesson-stage-step.complete {
  border-color: rgb(158 255 189 / 0.3);
}

.lesson-stage-step.locked {
  opacity: 0.68;
  cursor: default;
}

.lesson-stage-actions button {
  display: grid;
  place-items: center;
  padding: 9px 8px;
  color: #120d05;
  background: linear-gradient(180deg, #fff1b2, color-mix(in srgb, var(--stage-accent) 82%, var(--gold)));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.36), 0 5px 0 rgb(0 0 0 / 0.28);
  font-weight: 1000;
}

.lesson-stage-actions .lesson-stage-exit {
  min-width: 128px;
  color: #f4e9c5;
  background: rgb(0 0 0 / 0.22);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.lesson-stage-actions button:hover,
.lesson-stage-actions button:focus-visible,
.lesson-stage-step:not(.locked):hover,
.lesson-stage-step:not(.locked):focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--stage-accent) 58%, transparent);
}

.lesson-cinematic-stage[data-state="challenge"] .lesson-stage-actions button:nth-child(3),
.lesson-cinematic-stage[data-state="recorded"] .lesson-stage-actions button:nth-child(3) {
  border-color: rgb(158 255 189 / 0.32);
}

@keyframes lessonStageDrift {
  from { transform: scale(1.04) translate3d(-1%, -1%, 0); }
  to { transform: scale(1.1) translate3d(1%, 1%, 0); }
}

@keyframes lessonStageBeam {
  0%, 100% { opacity: 0.18; transform: translateX(-18px) rotate(17deg); }
  50% { opacity: 0.48; transform: translateX(18px) rotate(17deg); }
}

.classroom-compass {
  --compass-accent: var(--gold);
  position: relative;
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--compass-accent) 38%, transparent);
  border-radius: 9px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--compass-accent) 12%, transparent), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.05), rgb(0 0 0 / 0.18)),
    rgb(7 6 4 / 0.78);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 14px 28px rgb(0 0 0 / 0.2);
}

.classroom-compass[data-domain="science"] { --compass-accent: #6fcf97; }
.classroom-compass[data-domain="physics"] { --compass-accent: var(--aether); }
.classroom-compass[data-domain="engineering"] { --compass-accent: var(--ember); }
.classroom-compass[data-domain="ai"] { --compass-accent: #b59cff; }

.classroom-compass-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.classroom-compass h4,
.classroom-compass p {
  margin: 0;
}

.classroom-compass h4 {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.28rem);
  line-height: 1.08;
}

.classroom-compass p {
  margin-top: 5px;
  max-width: 68ch;
  color: #d7c9a0;
  font-size: 0.84rem;
  line-height: 1.36;
}

.classroom-compass-main button {
  min-height: 42px;
  min-width: 142px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--compass-accent) 48%, rgb(255 246 215 / 0.28));
  border-radius: 8px;
  color: #130d05;
  background: linear-gradient(180deg, #fff2b3, color-mix(in srgb, var(--compass-accent) 84%, var(--gold)));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.42), 0 6px 0 rgb(0 0 0 / 0.34);
  cursor: pointer;
  font-weight: 1000;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), box-shadow 180ms var(--motion);
}

.classroom-compass-main button:hover,
.classroom-compass-main button:focus-visible {
  filter: brightness(1.07);
}

.classroom-compass-main button:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.34), 0 3px 0 rgb(0 0 0 / 0.4);
}

.classroom-compass-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.classroom-compass-metrics span {
  min-height: 58px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--compass-accent) 22%, rgb(255 246 215 / 0.08));
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--compass-accent) 10%, transparent), transparent 52%),
    rgb(0 0 0 / 0.16);
}

.classroom-compass-metrics b,
.classroom-compass-metrics small {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
}

.classroom-compass-metrics b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.05;
}

.classroom-compass-metrics small {
  color: color-mix(in srgb, var(--compass-accent) 82%, #cdbf93);
  font: 1000 0.56rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.classroom-compass-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.classroom-compass-step {
  appearance: none;
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.18);
  font: inherit;
  text-align: left;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), border-color 180ms var(--motion), box-shadow 180ms var(--motion);
}

button.classroom-compass-step {
  cursor: pointer;
}

button.classroom-compass-step:hover:not(:disabled),
button.classroom-compass-step:focus-visible:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08);
  border-color: color-mix(in srgb, var(--compass-accent) 58%, transparent);
  box-shadow: 0 12px 24px rgb(0 0 0 / 0.22), 0 0 18px color-mix(in srgb, var(--compass-accent) 13%, transparent);
}

button.classroom-compass-step:active:not(:disabled) {
  transform: translateY(1px);
}

button.classroom-compass-step:disabled {
  cursor: not-allowed;
}

.classroom-compass-step > span {
  grid-row: 1 / span 3;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #130d05;
  background: #746e59;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 1000;
}

.classroom-compass-step small,
.classroom-compass-step b,
.classroom-compass-step em {
  grid-column: 2;
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
}

.classroom-compass-step small {
  grid-row: 1;
  color: color-mix(in srgb, var(--compass-accent) 86%, #fff2bd);
  font-size: 0.56rem;
  line-height: 1.1;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.classroom-compass-step b {
  grid-row: 2;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.8rem;
  line-height: 1.18;
}

.classroom-compass-step em {
  grid-row: 3;
  color: #cfc19a;
  font-size: 0.66rem;
  font-style: normal;
  line-height: 1.18;
}

.classroom-compass-step.current {
  border-color: color-mix(in srgb, var(--compass-accent) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--compass-accent) 12%, transparent), rgb(0 0 0 / 0.16)),
    rgb(12 10 6 / 0.72);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.09), 0 0 18px color-mix(in srgb, var(--compass-accent) 12%, transparent);
}

.classroom-compass-step.current > span {
  background: color-mix(in srgb, var(--compass-accent) 82%, var(--gold));
}

.classroom-compass-step.complete {
  border-color: rgb(158 255 189 / 0.32);
}

.classroom-compass-step.complete > span {
  background: #9effbd;
}

.classroom-compass-step.locked {
  opacity: 0.68;
}

.lesson-reference-drawer,
.lesson-materials-drawer {
  position: relative;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.14)),
    rgb(0 0 0 / 0.14);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.06);
}

.lesson-reference-drawer summary,
.lesson-materials-drawer summary {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  cursor: pointer;
  list-style: none;
}

.lesson-reference-drawer summary::-webkit-details-marker,
.lesson-materials-drawer summary::-webkit-details-marker {
  display: none;
}

.lesson-reference-drawer summary::after,
.lesson-materials-drawer summary::after {
  content: "+";
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.32);
  border-radius: 7px;
  color: var(--gold);
  background: rgb(0 0 0 / 0.24);
  font: 1000 0.9rem "JetBrains Mono", Consolas, monospace;
}

.lesson-reference-drawer[open] summary::after,
.lesson-materials-drawer[open] summary::after {
  content: "-";
}

.lesson-reference-drawer summary span,
.lesson-reference-drawer summary b,
.lesson-materials-drawer summary span,
.lesson-materials-drawer summary b {
  min-width: 0;
  overflow-wrap: break-word;
}

.lesson-reference-drawer summary span,
.lesson-materials-drawer summary span {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-weight: 900;
  line-height: 1.08;
}

.lesson-reference-drawer summary b,
.lesson-materials-drawer summary b {
  color: #bfb28e;
  font-size: 0.72rem;
  line-height: 1.25;
}

.lesson-reference-drawer summary:hover,
.lesson-reference-drawer summary:focus-visible,
.lesson-materials-drawer summary:hover,
.lesson-materials-drawer summary:focus-visible {
  background: rgb(255 246 215 / 0.04);
}

.lesson-reference-body,
.lesson-materials-body {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.lesson-theater-panel {
  --theater-accent: var(--gold);
  display: grid;
  gap: 12px;
  padding: clamp(12px, 2vw, 16px);
  border: 1px solid color-mix(in srgb, var(--theater-accent) 38%, transparent);
  border-radius: 10px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--theater-accent) 17%, transparent), transparent 46%),
    linear-gradient(180deg, rgb(255 246 215 / 0.06), rgb(0 0 0 / 0.14)),
    rgb(7 5 3 / 0.76);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 16px 34px rgb(0 0 0 / 0.2);
}

.lesson-theater-panel[data-domain="science"] { --theater-accent: #6fcf97; }
.lesson-theater-panel[data-domain="physics"] { --theater-accent: var(--aether); }
.lesson-theater-panel[data-domain="engineering"] { --theater-accent: var(--ember); }
.lesson-theater-panel[data-domain="ai"] { --theater-accent: #b59cff; }

.lesson-theater-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.lesson-theater-copy h4,
.lesson-theater-copy p {
  margin: 0;
}

.lesson-theater-copy h4 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.05rem, 1.9vw, 1.42rem);
  line-height: 1.08;
}

.lesson-theater-copy p {
  max-width: 88ch;
  color: #d8c99e;
  font-size: 0.86rem;
  line-height: 1.34;
}

.lesson-theater-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.lesson-theater-step {
  min-width: 0;
  min-height: 104px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.11)),
    rgb(6 5 3 / 0.56);
}

.lesson-theater-step span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #151008;
  background: #7b755f;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 1000;
}

.lesson-theater-step b {
  color: color-mix(in srgb, var(--theater-accent) 82%, #fff0ad);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lesson-theater-step strong {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.08;
}

.lesson-theater-step small {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: #bdae83;
  font-size: 0.68rem;
  line-height: 1.22;
}

.lesson-theater-step.current {
  border-color: color-mix(in srgb, var(--theater-accent) 62%, transparent);
  background:
    radial-gradient(circle at 22% 8%, color-mix(in srgb, var(--theater-accent) 20%, transparent), transparent 58%),
    rgb(15 11 6 / 0.74);
  box-shadow: 0 0 22px color-mix(in srgb, var(--theater-accent) 12%, transparent), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.lesson-theater-step.current span {
  background: color-mix(in srgb, var(--theater-accent) 84%, var(--gold));
}

.lesson-theater-step.complete {
  border-color: rgb(158 255 189 / 0.32);
}

.lesson-theater-step.complete span {
  background: #9effbd;
}

.lesson-theater-step.locked {
  opacity: 0.74;
}

.lesson-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  padding-bottom: 0;
  overflow: visible;
}

.lesson-card {
  --concept-accent: #9ee8ff;
  position: relative;
  min-height: 112px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 11px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid rgb(255 246 215 / 0.14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 9% 18%, color-mix(in srgb, var(--concept-accent) 18%, transparent), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(255 246 215 / 0.018)),
    rgb(5 4 3 / 0.58);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
  overflow: hidden;
  isolation: isolate;
  transition: transform 240ms var(--motion), border-color 240ms var(--motion), box-shadow 240ms var(--motion);
}

.lesson-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--concept-accent) 9%, transparent), transparent),
    radial-gradient(circle at 86% 16%, rgb(242 201 76 / 0.085), transparent 32%);
  opacity: 0.72;
  pointer-events: none;
}

.lesson-card:hover,
.lesson-card:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--concept-accent) 44%, transparent);
  box-shadow: 0 12px 26px rgb(0 0 0 / 0.24), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.lesson-card[data-domain="science"] {
  --concept-accent: #9effbd;
}

.lesson-card[data-domain="physics"] {
  --concept-accent: #b7a8ff;
}

.lesson-card[data-domain="engineering"] {
  --concept-accent: #f2c94c;
}

.lesson-card[data-domain="ai"] {
  --concept-accent: #ff91d6;
}

.lesson-card-visual {
  position: relative;
  min-height: 90px;
  border: 1px solid color-mix(in srgb, var(--concept-accent) 32%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--concept-accent) 14%, transparent), transparent 58%),
    linear-gradient(145deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.18));
  box-shadow: inset 0 0 22px rgb(0 0 0 / 0.28);
  overflow: hidden;
}

.lesson-card-visual::before,
.lesson-card-visual::after,
.concept-orb,
.concept-ring,
.concept-rune,
.concept-node,
.concept-bar,
.concept-seal {
  position: absolute;
  display: block;
}

.lesson-card-visual::before {
  content: "";
  inset: 12px;
  border: 1px solid color-mix(in srgb, var(--concept-accent) 18%, transparent);
  border-radius: 50%;
}

.lesson-card-visual::after {
  content: "";
  inset: auto 16px 17px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--concept-accent) 64%, transparent), transparent);
  animation: conceptSweep 2600ms ease-in-out infinite;
}

.concept-orb {
  width: 24px;
  height: 24px;
  left: 50%;
  top: 50%;
  border: 1px solid color-mix(in srgb, var(--concept-accent) 72%, transparent);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--concept-accent) 56%, transparent), transparent 68%);
  box-shadow: 0 0 20px color-mix(in srgb, var(--concept-accent) 28%, transparent);
  transform: translate(-50%, -50%);
  animation: conceptPulse 1900ms ease-in-out infinite;
}

.concept-ring {
  width: 48px;
  height: 48px;
  left: 50%;
  top: 50%;
  border: 1px dashed color-mix(in srgb, var(--concept-accent) 54%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: conceptTurn 7000ms linear infinite;
}

.concept-rune {
  width: 9px;
  height: 9px;
  border: 1px solid color-mix(in srgb, var(--concept-accent) 72%, transparent);
  border-radius: 3px;
  background: rgb(255 246 215 / 0.08);
  box-shadow: 0 0 12px color-mix(in srgb, var(--concept-accent) 22%, transparent);
}

.concept-rune.rune-1 {
  left: 19px;
  top: 22px;
  animation: conceptFloat 2800ms ease-in-out infinite;
}

.concept-rune.rune-2 {
  right: 20px;
  top: 28px;
  animation: conceptFloat 2800ms ease-in-out 220ms infinite;
}

.concept-rune.rune-3 {
  left: 50%;
  bottom: 21px;
  transform: translateX(-50%);
  animation: conceptFloatCentered 2800ms ease-in-out 440ms infinite;
}

.lesson-card-visual.clue .concept-node {
  width: 18px;
  height: 18px;
  border: 1px solid color-mix(in srgb, var(--concept-accent) 72%, transparent);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--concept-accent) 46%, transparent), rgb(4 7 10 / 0.7) 70%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--concept-accent) 20%, transparent);
  animation: conceptNodePulse 2200ms ease-in-out infinite;
}

.lesson-card-visual.clue .concept-node.start {
  left: 15px;
  top: 54px;
}

.lesson-card-visual.clue .concept-node.middle {
  left: 38px;
  top: 30px;
  animation-delay: 160ms;
}

.lesson-card-visual.clue .concept-node.end {
  right: 17px;
  top: 47px;
  animation-delay: 320ms;
}

.lesson-card-visual.clue::before {
  inset: 28px 18px;
  border-radius: 0;
  border-style: dashed;
  transform: rotate(-15deg);
}

.lesson-card-visual.proof .concept-bar {
  bottom: 20px;
  width: 13px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--concept-accent) 56%, transparent), rgb(255 246 215 / 0.08));
  box-shadow: 0 0 14px color-mix(in srgb, var(--concept-accent) 20%, transparent);
  animation: conceptRise 2400ms ease-in-out infinite;
}

.lesson-card-visual.proof .concept-bar.left {
  left: 23px;
  height: 29px;
}

.lesson-card-visual.proof .concept-bar.center {
  left: calc(50% - 6.5px);
  height: 43px;
  animation-delay: 160ms;
}

.lesson-card-visual.proof .concept-bar.right {
  right: 23px;
  height: 34px;
  animation-delay: 320ms;
}

.concept-seal {
  width: 30px;
  height: 30px;
  left: 50%;
  top: 19px;
  border: 1px solid color-mix(in srgb, var(--concept-accent) 70%, transparent);
  border-radius: 9px;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 18px color-mix(in srgb, var(--concept-accent) 22%, transparent);
  animation: conceptSeal 3400ms ease-in-out infinite;
}

.lesson-card > div:not(.lesson-card-visual) {
  min-width: 0;
  align-self: center;
}

.lesson-card-kicker,
.lesson-card b,
.lesson-card p {
  display: block;
  margin: 0;
}

.lesson-card-kicker {
  color: color-mix(in srgb, var(--concept-accent) 88%, #fff6d0);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lesson-card b {
  margin-top: 4px;
  color: #fff3c8;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.92rem;
  line-height: 1.12;
}

.lesson-card p {
  margin-top: 5px;
  color: #d9ceb0;
  font-size: 0.8rem;
  line-height: 1.3;
}

@keyframes conceptPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.94);
    opacity: 0.76;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
}

@keyframes conceptNodePulse {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.76;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes conceptTurn {
  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

@keyframes conceptFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes conceptFloatCentered {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -5px);
  }
}

@keyframes conceptSweep {
  0%,
  100% {
    opacity: 0.36;
    transform: scaleX(0.72);
  }
  50% {
    opacity: 0.9;
    transform: scaleX(1);
  }
}

@keyframes conceptRise {
  0%,
  100% {
    filter: brightness(0.92);
    transform: translateY(0);
  }
  50% {
    filter: brightness(1.25);
    transform: translateY(-5px);
  }
}

@keyframes conceptSeal {
  0%,
  100% {
    filter: brightness(0.92);
    transform: translateX(-50%) rotate(45deg) scale(0.94);
  }
  50% {
    filter: brightness(1.18);
    transform: translateX(-50%) rotate(45deg) scale(1.04);
  }
}

.lesson-whiteboard {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(158 255 189 / 0.24);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgb(158 255 189 / 0.085), transparent 42%),
    radial-gradient(circle at 92% 12%, rgb(242 201 76 / 0.12), transparent 34%),
    rgb(6 10 7 / 0.72);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.whiteboard-main h4,
.whiteboard-main p {
  margin: 0;
}

.whiteboard-main h4 {
  margin-top: 4px;
  color: #fff6d0;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.22rem);
  line-height: 1.12;
}

.whiteboard-main p {
  margin-top: 6px;
  color: #d7dcc0;
  line-height: 1.35;
}

.whiteboard-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.whiteboard-tile {
  min-height: 78px;
  padding: 10px;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.08)),
    rgb(0 0 0 / 0.18);
}

.whiteboard-tile span,
.whiteboard-tile b,
.whiteboard-tile small {
  display: block;
}

.whiteboard-tile span {
  color: #9effbd;
  font-size: 0.66rem;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.whiteboard-tile b {
  margin-top: 5px;
  color: #f4e3a7;
  line-height: 1.15;
}

.whiteboard-tile small {
  margin-top: 5px;
  color: #c8cbb1;
  font-size: 0.78rem;
  line-height: 1.28;
}

.guided-practice {
  --practice-accent: #55b7d9;
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgb(85 183 217 / 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(85 183 217 / 0.12), transparent 42%),
    radial-gradient(circle at 88% 8%, rgb(242 201 76 / 0.12), transparent 34%),
    rgb(4 7 10 / 0.72);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.guided-practice[data-domain="math"] {
  --practice-accent: #9ee8ff;
}

.guided-practice[data-domain="science"] {
  --practice-accent: #9effbd;
}

.guided-practice[data-domain="physics"] {
  --practice-accent: #b7a8ff;
}

.guided-practice[data-domain="engineering"] {
  --practice-accent: #f2c94c;
}

.guided-practice[data-domain="ai"] {
  --practice-accent: #ff91d6;
}

.guided-practice-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.guided-practice-head h4,
.guided-practice-head p {
  margin: 0;
}

.guided-practice-head h4 {
  margin-top: 4px;
  color: #fff6d0;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.98rem, 1.7vw, 1.2rem);
  line-height: 1.12;
}

.guided-practice-head p {
  margin-top: 5px;
  color: #d9d2b6;
  font-size: 0.82rem;
  line-height: 1.28;
}

.guided-practice-head strong {
  min-width: 68px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--practice-accent) 56%, transparent);
  border-radius: 8px;
  color: var(--practice-accent);
  background: rgb(0 0 0 / 0.26);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.guided-practice-mentor {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 68px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 8% 16%, color-mix(in srgb, var(--practice-accent) 18%, transparent), transparent 38%),
    linear-gradient(90deg, rgb(242 201 76 / 0.11), transparent 56%),
    rgb(0 0 0 / 0.24);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.guided-practice-mentor::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 246 215 / 0.08), transparent);
  opacity: 0;
  transform: translateX(-50%);
}

.guided-practice-mentor.lesson-focus-pulse::after {
  animation: mentorPracticeSweep 900ms var(--motion);
}

.guided-practice-mentor img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 10px;
  background: rgb(7 5 3 / 0.84);
  box-shadow: 0 0 18px color-mix(in srgb, var(--practice-accent) 16%, transparent);
}

.guided-practice-mentor span,
.guided-practice-mentor b,
.guided-practice-mentor p {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
}

.guided-practice-mentor span {
  color: var(--practice-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.guided-practice-mentor b {
  margin-top: 3px;
  color: #fff5cf;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.12;
}

.guided-practice-mentor p {
  margin-top: 3px;
  max-width: 66ch;
  color: #d8cfaf;
  font-size: 0.77rem;
  line-height: 1.28;
}

.guided-practice-mentor[data-state="review"] {
  border-color: rgb(255 207 112 / 0.36);
  background:
    radial-gradient(circle at 8% 16%, rgb(255 207 112 / 0.16), transparent 40%),
    linear-gradient(90deg, rgb(242 201 76 / 0.12), transparent 56%),
    rgb(0 0 0 / 0.26);
}

.guided-practice-mentor[data-state="correct"] {
  border-color: rgb(158 255 189 / 0.36);
  background:
    radial-gradient(circle at 8% 16%, rgb(158 255 189 / 0.15), transparent 40%),
    linear-gradient(90deg, color-mix(in srgb, var(--practice-accent) 16%, transparent), transparent 58%),
    rgb(0 0 0 / 0.26);
}

.guided-practice-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.guided-practice-choice {
  min-width: 0;
  min-height: 82px;
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 10px;
  border: 1px solid rgb(255 246 215 / 0.14);
  border-radius: 8px;
  color: #f8edcc;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.06), rgb(0 0 0 / 0.1)),
    rgb(7 5 3 / 0.7);
  cursor: pointer;
  text-align: left;
  transition: transform 220ms var(--motion), border-color 220ms var(--motion), box-shadow 220ms var(--motion), background 220ms var(--motion);
}

.guided-practice-choice:hover,
.guided-practice-choice:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--practice-accent) 64%, transparent);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.24), inset 0 1px 0 rgb(255 246 215 / 0.12);
}

.guided-practice-choice b,
.guided-practice-choice small {
  display: block;
}

.guided-practice-choice b {
  color: #fff5cf;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.12;
}

.guided-practice-choice small {
  color: #bfb8a2;
  font-size: 0.72rem;
  line-height: 1.24;
}

.guided-practice-choice.selected {
  border-color: color-mix(in srgb, var(--practice-accent) 64%, transparent);
  background:
    radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--practice-accent) 16%, transparent), transparent 46%),
    rgb(9 10 11 / 0.78);
}

.guided-practice-choice.correct {
  border-color: rgb(158 255 189 / 0.54);
  box-shadow: 0 0 24px rgb(158 255 189 / 0.11), inset 0 1px 0 rgb(255 246 215 / 0.12);
}

.guided-practice-choice.wrong {
  border-color: rgb(255 116 116 / 0.42);
}

.guided-practice-choice:disabled {
  cursor: default;
}

.guided-practice-feedback {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgb(255 246 215 / 0.11);
  border-radius: 8px;
  color: #ded6b7;
  background: rgb(0 0 0 / 0.22);
  font-size: 0.8rem;
  line-height: 1.3;
}

.practice-proof-handoff {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--practice-accent) 24%, rgb(255 246 215 / 0.08));
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--practice-accent) 10%, transparent), transparent 56%),
    rgb(0 0 0 / 0.2);
}

.practice-proof-step {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 3px 6px;
  align-items: center;
  padding: 7px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  color: #ded4b4;
  background: rgb(0 0 0 / 0.2);
}

.practice-proof-step i {
  grid-row: span 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #120d05;
  background: #7c7760;
  font: 1000 0.68rem "JetBrains Mono", Consolas, monospace;
  font-style: normal;
}

.practice-proof-step b,
.practice-proof-step small {
  min-width: 0;
  display: block;
  overflow-wrap: break-word;
}

.practice-proof-step b {
  color: #fff5cf;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
  line-height: 1.05;
}

.practice-proof-step small {
  color: #c8bea0;
  font-size: 0.62rem;
  line-height: 1.1;
}

.practice-proof-step.current {
  border-color: color-mix(in srgb, var(--practice-accent) 48%, transparent);
  background: color-mix(in srgb, var(--practice-accent) 10%, rgb(0 0 0 / 0.2));
}

.practice-proof-step.current i {
  background: color-mix(in srgb, var(--practice-accent) 82%, var(--gold));
}

.practice-proof-step.complete {
  border-color: rgb(158 255 189 / 0.28);
}

.practice-proof-step.complete i {
  background: #9effbd;
}

.practice-proof-handoff[data-state="dragon"] {
  border-color: rgb(158 255 189 / 0.32);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 0 22px rgb(158 255 189 / 0.08);
}

.guided-practice.solved {
  border-color: color-mix(in srgb, var(--practice-accent) 58%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--practice-accent) 13%, transparent), inset 0 1px 0 rgb(255 246 215 / 0.12);
}

.guided-practice.solved .guided-practice-feedback {
  color: #f5edc8;
  border-color: rgb(158 255 189 / 0.26);
}

.lyra-moment {
  --lyra-accent: var(--gold);
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--lyra-accent) 34%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 24%, color-mix(in srgb, var(--lyra-accent) 18%, transparent), transparent 38%),
    radial-gradient(circle at 88% 18%, rgb(85 183 217 / 0.12), transparent 34%),
    rgb(7 5 3 / 0.68);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
  overflow: hidden;
}

.lyra-moment[data-domain="science"] { --lyra-accent: #6fcf97; }
.lyra-moment[data-domain="physics"] { --lyra-accent: var(--aether); }
.lyra-moment[data-domain="engineering"] { --lyra-accent: var(--ember); }
.lyra-moment[data-domain="ai"] { --lyra-accent: #b59cff; }

.lyra-moment::after {
  content: "";
  position: absolute;
  inset: -40% auto auto 18%;
  width: 170px;
  height: 170px;
  border: 1px solid color-mix(in srgb, var(--lyra-accent) 14%, transparent);
  border-radius: 50%;
  pointer-events: none;
  animation: lyraGlyphSpin 12s linear infinite;
}

.lyra-portrait {
  position: relative;
  width: 64px;
  height: 64px;
  border: 1px solid rgb(242 201 76 / 0.52);
  border-radius: 18px;
  overflow: hidden;
  background: #080604;
  box-shadow: 0 0 24px rgb(242 201 76 / 0.16);
}

.lyra-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lyra-portrait span {
  position: absolute;
  inset: 7px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 50%;
  box-shadow: 0 0 18px rgb(242 201 76 / 0.22);
  animation: lyraHalo 2.8s ease-in-out infinite;
}

.lyra-lesson-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.lyra-lesson-copy h4,
.lyra-lesson-copy p,
.lyra-lesson-copy ol {
  margin: 0;
}

.lyra-lesson-copy h4 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.08;
}

.lyra-lesson-copy p {
  margin-top: 3px;
  color: #dfd0a2;
  font-size: 0.78rem;
  line-height: 1.24;
}

.lyra-voice-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.lyra-voice-rune {
  min-width: 0;
  min-height: 82px;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--lyra-accent) 24%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--lyra-accent) 12%, transparent), transparent 50%),
    rgb(5 5 4 / 0.52);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
}

.lyra-voice-rune span,
.lyra-voice-rune b,
.lyra-voice-rune small {
  display: block;
  min-width: 0;
}

.lyra-voice-rune span {
  color: var(--lyra-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.55rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lyra-voice-rune b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.76rem;
  line-height: 1.08;
}

.lyra-voice-rune small {
  color: #d8cfaa;
  font-size: 0.68rem;
  line-height: 1.18;
}

.lyra-lesson-copy ol {
  display: grid;
  gap: 3px;
  margin-top: 7px;
  padding-left: 18px;
  color: #cfeff0;
  font-size: 0.72rem;
  line-height: 1.16;
}

.lyra-memory {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
  gap: 8px;
  align-items: stretch;
  margin-top: 9px;
  padding: 8px;
  border: 1px solid rgb(158 255 189 / 0.26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 10% 20%, rgb(158 255 189 / 0.12), transparent 46%),
    rgb(4 9 8 / 0.62);
}

.lyra-memory b,
.lyra-memory p {
  display: block;
  margin: 0;
}

.lyra-memory b {
  color: #dfffe3;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.1;
}

.lyra-memory p {
  margin-top: 3px;
  color: #c9ddc0;
  font-size: 0.72rem;
  line-height: 1.22;
}

.lyra-memory-runes {
  display: grid;
  gap: 4px;
  align-content: center;
}

.lyra-memory-runes span {
  min-height: 24px;
  display: grid;
  place-items: center;
  padding: 3px 6px;
  border: 1px solid rgb(158 255 189 / 0.28);
  border-radius: 999px;
  color: #9effbd;
  background: #050908;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
}

.lyra-speak-button {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  justify-self: stretch;
  min-height: 40px;
  border: 1px solid rgb(158 232 255 / 0.48);
  border-radius: 999px;
  color: #dff8ff;
  background:
    radial-gradient(circle at 50% 0%, rgb(85 183 217 / 0.22), transparent 70%),
    #050a0c;
  box-shadow: 0 4px 0 #040302, 0 0 20px rgb(85 183 217 / 0.12);
  cursor: pointer;
  font-weight: 900;
  transition: transform 260ms var(--motion), filter 260ms var(--motion), box-shadow 260ms var(--motion);
}

.lyra-speak-button:hover,
.lyra-speak-button:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #040302, 0 0 24px rgb(85 183 217 / 0.22);
}

.lyra-moment.speaking {
  border-color: color-mix(in srgb, var(--lyra-accent) 58%, transparent);
  animation: lyraPanelPulse 820ms var(--motion);
}

.lyra-moment.speaking .lyra-portrait {
  box-shadow: 0 0 34px color-mix(in srgb, var(--lyra-accent) 28%, transparent), inset 0 1px 0 rgb(255 246 215 / 0.12);
}

.lyra-moment.speaking .lyra-voice-rune {
  animation: lyraVoiceRunePulse 940ms var(--motion);
}

.lyra-moment.speaking .lyra-voice-rune:nth-child(2) {
  animation-delay: 90ms;
}

.lyra-moment.speaking .lyra-voice-rune:nth-child(3) {
  animation-delay: 180ms;
}

.room-investigation {
  --investigation-accent: var(--gold);
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--investigation-accent) 36%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--investigation-accent) 16%, transparent), transparent 36%),
    radial-gradient(circle at 90% 24%, rgb(85 183 217 / 0.1), transparent 38%),
    rgb(5 4 3 / 0.58);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.room-investigation[data-domain="math"] {
  --investigation-accent: #f2c94c;
}

.room-investigation[data-domain="science"] {
  --investigation-accent: #9effbd;
}

.room-investigation[data-domain="physics"] {
  --investigation-accent: #b7a8ff;
}

.room-investigation[data-domain="engineering"] {
  --investigation-accent: #f2c94c;
}

.room-investigation[data-domain="ai"] {
  --investigation-accent: #ff91d6;
}

.lesson-scroll.investigation-complete .room-investigation {
  border-color: rgb(87 201 135 / 0.5);
  box-shadow: 0 0 28px rgb(87 201 135 / 0.12), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.investigation-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px;
  gap: 8px;
  align-items: center;
}

.investigation-head p {
  margin: 3px 0 0;
  color: #dfd0a2;
  font-size: 0.78rem;
  line-height: 1.24;
}

.investigation-head strong {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--investigation-accent) 44%, transparent);
  border-radius: 8px;
  color: var(--investigation-accent);
  background: rgb(8 6 4 / 0.84);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.75rem;
}

.investigation-coach {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 66px;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid rgb(255 246 215 / 0.14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--investigation-accent) 13%, transparent), transparent 58%),
    rgb(0 0 0 / 0.24);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.investigation-coach::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--investigation-accent) 12%, transparent), transparent);
  opacity: 0.72;
  transform: translateX(-42%);
}

.investigation-coach strong {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--investigation-accent) 42%, transparent);
  border-radius: 8px;
  color: var(--investigation-accent);
  background: rgb(5 4 3 / 0.78);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.74rem;
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.12), 0 0 18px color-mix(in srgb, var(--investigation-accent) 12%, transparent);
}

.investigation-coach span,
.investigation-coach b,
.investigation-coach p {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
}

.investigation-coach span {
  color: var(--investigation-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.64rem;
  text-transform: uppercase;
}

.investigation-coach b {
  margin-top: 3px;
  color: #fff5cf;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.12;
}

.investigation-coach p {
  margin-top: 3px;
  color: #d9d1b4;
  font-size: 0.77rem;
  line-height: 1.28;
}

.investigation-coach[data-state="active"] {
  border-color: color-mix(in srgb, var(--investigation-accent) 40%, transparent);
}

.investigation-coach[data-state="complete"] {
  border-color: rgb(158 255 189 / 0.38);
  background:
    linear-gradient(90deg, rgb(158 255 189 / 0.13), transparent 58%),
    rgb(0 0 0 / 0.25);
}

.investigation-coach[data-state="complete"] strong {
  color: #09140b;
  background: #9effbd;
  border-color: rgb(158 255 189 / 0.68);
}

.artifact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.artifact-token {
  position: relative;
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 5px 9px;
  align-content: center;
  padding: 9px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--investigation-accent) 22%, rgb(255 246 215 / 0.12));
  border-radius: 8px;
  color: #f9edc8;
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--investigation-accent) 10%, transparent), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.06), transparent 62%),
    rgb(7 5 3 / 0.72);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.18);
  cursor: pointer;
  text-align: left;
  transition: transform 240ms var(--motion), border-color 240ms var(--motion), box-shadow 240ms var(--motion), filter 240ms var(--motion);
}

.artifact-token:hover,
.artifact-token:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--investigation-accent) 62%, transparent);
  box-shadow: 0 10px 26px rgb(0 0 0 / 0.24), 0 0 18px color-mix(in srgb, var(--investigation-accent) 10%, transparent), inset 0 1px 0 rgb(255 246 215 / 0.12);
}

.artifact-token span,
.artifact-token b,
.artifact-token small {
  min-width: 0;
}

.artifact-token span {
  grid-row: 1 / span 2;
  align-self: start;
  width: max-content;
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--investigation-accent) 34%, transparent);
  border-radius: 6px;
  color: var(--investigation-accent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--investigation-accent) 10%, transparent), transparent),
    rgb(8 6 4 / 0.9);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.artifact-token b {
  grid-column: 2;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.08;
}

.artifact-token small {
  grid-column: 2;
  color: #d6c693;
  font-size: 0.72rem;
  line-height: 1.18;
}

.artifact-token.discovered {
  border-color: rgb(87 201 135 / 0.5);
  background:
    radial-gradient(circle at 14% 18%, rgb(87 201 135 / 0.18), transparent 42%),
    linear-gradient(180deg, rgb(158 255 189 / 0.08), transparent 68%),
    rgb(5 10 7 / 0.8);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 0 18px rgb(87 201 135 / 0.1);
}

.artifact-token.discovered span {
  color: #081008;
  background: #9effbd;
  border-color: rgb(158 255 189 / 0.72);
}

.artifact-token.active {
  animation: artifactPulse 620ms var(--motion);
}

.artifact-reveal {
  min-height: 38px;
  margin: 0;
  padding: 8px 9px;
  border: 1px solid rgb(85 183 217 / 0.32);
  border-radius: 8px;
  color: #d3e9ea;
  background: rgb(5 10 12 / 0.56);
  font-size: 0.78rem;
  line-height: 1.25;
}

.investigation-ready-button {
  display: none;
  min-height: 46px;
  border: 1px solid rgb(158 255 189 / 0.66);
  border-radius: 999px;
  color: #071108;
  background: linear-gradient(180deg, #dffff0, #9effbd 56%, #3f9f69);
  box-shadow: 0 5px 0 #050302, 0 0 24px rgb(158 255 189 / 0.18);
  cursor: pointer;
  font-weight: 1000;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), box-shadow 180ms var(--motion);
}

.lesson-scroll.investigation-complete .investigation-ready-button {
  display: grid;
  place-items: center;
  animation: lessonTaskRise 220ms var(--motion) both;
}

.investigation-ready-button:hover,
.investigation-ready-button:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #050302, 0 0 30px rgb(158 255 189 / 0.26);
}

.investigation-ready-button:disabled {
  display: none;
}

@media (max-width: 620px) {
  .lesson-cinematic-strip {
    min-height: 344px;
    aspect-ratio: auto;
  }

  .lesson-video-badge {
    top: 10px;
    left: 10px;
    min-width: 112px;
    padding: 7px 9px;
  }

  .lesson-cinematic-caption {
    grid-template-columns: 1fr;
    inset: auto 10px 10px;
    gap: 6px;
    padding: 10px;
  }

  .lesson-cinematic-caption > span,
  .lesson-cinematic-caption b,
  .lesson-cinematic-caption p,
  .lesson-cinematic-runes,
  .lesson-cinematic-beats {
    grid-column: 1;
  }

  .lesson-cinematic-runes,
  .lesson-cinematic-beats {
    grid-row: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lesson-cinematic-runes span,
  .lesson-cinematic-beats span {
    min-height: 34px;
    font-size: 0.56rem;
  }

  .lesson-cinematic-actions {
    grid-template-columns: 1fr;
  }

  .lesson-cinematic-actions button {
    min-height: 36px;
  }

  .lesson-card {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 9px;
    min-height: 102px;
  }

  .lesson-card-visual {
    min-height: 80px;
  }

  .lesson-card b {
    font-size: 0.86rem;
  }

  .guided-practice-head,
  .guided-practice-options {
    grid-template-columns: 1fr;
  }

  .guided-practice-mentor {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 60px;
  }

  .guided-practice-mentor img {
    width: 42px;
    height: 42px;
    border-radius: 9px;
  }

  .guided-practice-mentor p {
    font-size: 0.72rem;
  }

  .guided-practice-choice {
    min-height: 68px;
  }

  .practice-proof-handoff {
    gap: 5px;
    padding: 5px;
  }

  .practice-proof-step {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 58px;
    gap: 3px;
    padding: 6px 4px;
    text-align: center;
  }

  .practice-proof-step i {
    grid-row: auto;
  }

  .practice-proof-step b {
    font-size: 0.7rem;
  }

  .practice-proof-step small {
    font-size: 0.56rem;
  }

  .lyra-moment {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .lyra-portrait {
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }

  .lyra-voice-strip {
    grid-template-columns: 1fr;
  }

  .lyra-voice-rune {
    min-height: 68px;
  }

  .lyra-memory {
    grid-template-columns: 1fr;
  }

  .lyra-memory-runes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cinematic-head {
    grid-template-columns: 1fr;
  }

  .cinematic-head strong {
    justify-self: start;
    min-width: 64px;
  }

  .cinematic-stage {
    min-height: 290px;
  }

  .cinematic-core {
    top: 25%;
    width: 74px;
  }

  .cinematic-nodes {
    grid-template-columns: 1fr;
    padding-top: 112px;
  }

  .cinematic-node {
    min-height: 62px;
    text-align: left;
  }

  .investigation-head {
    grid-template-columns: 1fr;
  }

  .investigation-coach {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .investigation-coach strong {
    width: 42px;
    height: 42px;
  }

  .investigation-coach p {
    font-size: 0.72rem;
  }

  .artifact-token {
    grid-template-columns: 1fr;
    min-height: 86px;
  }

  .artifact-token span,
  .artifact-token b,
  .artifact-token small {
    grid-column: 1;
    grid-row: auto;
  }

  .mastery-moment {
    grid-template-columns: 1fr;
  }

  .mastery-sigil {
    width: 56px;
    height: 56px;
    border-radius: 15px;
  }

  .mastery-rewards span {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
  }
}

.brain-spark {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgb(85 183 217 / 0.34);
  border-radius: 10px;
  background:
    radial-gradient(circle at 10% 30%, rgb(85 183 217 / 0.14), transparent 42%),
    rgb(5 10 12 / 0.58);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
}

.brain-spark span {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(85 183 217 / 0.46);
  border-radius: 999px;
  color: #9ee8ff;
  background: #050a0c;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.brain-spark p {
  margin: 0;
  color: #d3e9ea;
  font-size: 0.78rem;
  line-height: 1.22;
}

.brain-spark.sparked {
  border-color: rgb(87 201 135 / 0.52);
  animation: brainSparkPulse 780ms var(--motion);
}

.brain-spark.sparked span {
  color: #081008;
  background: #9effbd;
}

.lesson-ready-button {
  min-height: 44px;
  border: 1px solid rgb(242 201 76 / 0.72);
  border-radius: 999px;
  color: #100c05;
  background: linear-gradient(180deg, #ffe996, #d6a536 58%, #9a661a);
  box-shadow: 0 5px 0 #050302, 0 0 28px rgb(242 201 76 / 0.2);
  cursor: pointer;
  font-weight: 900;
  transition: transform 420ms var(--motion), filter 420ms var(--motion), box-shadow 420ms var(--motion);
}

.lesson-ready-button:hover,
.lesson-ready-button:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #050302, 0 0 34px rgb(242 201 76 / 0.3);
}

.lesson-ready-button:disabled {
  color: #dfffe3;
  background: rgb(87 201 135 / 0.16);
  box-shadow: none;
  cursor: default;
}

.challenge-card {
  position: relative;
  order: 15;
  display: grid;
  gap: 12px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgb(242 201 76 / 0.58);
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 0%, rgb(242 201 76 / 0.13), transparent 62%),
    radial-gradient(circle at 92% 20%, rgb(85 183 217 / 0.08), transparent 36%),
    linear-gradient(180deg, #22170c, #0b0704);
  box-shadow:
    0 0 0 5px rgb(5 3 2 / 0.9),
    0 30px 80px rgb(0 0 0 / 0.5),
    inset 0 1px 0 rgb(255 246 215 / 0.1);
  overflow: hidden;
}

.challenge-card::marker {
  display: none;
}

.challenge-top::before {
  content: "Test";
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 3px 8px;
  border: 1px solid rgb(85 183 217 / 0.46);
  border-radius: 999px;
  color: #9ee8ff;
  background: #050a0c;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.challenge-card.lesson-locked {
  border-color: rgb(85 183 217 / 0.4);
}

.challenge-card.lesson-locked .answers,
.challenge-card.lesson-locked .physics-launcher {
  display: none;
}

.challenge-card.lesson-locked .hint::after {
  content: " The test unlocks after the lesson scroll.";
  color: #9ee8ff;
  font-weight: 900;
}

.current-move-cockpit {
  --current-move-accent: var(--gold);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(164px, 196px);
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--current-move-accent) 42%, transparent);
  border-radius: 10px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--current-move-accent) 17%, transparent), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.06), rgb(0 0 0 / 0.18)),
    rgb(5 4 3 / 0.82);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 16px 34px rgb(0 0 0 / 0.18);
}

.current-move-cockpit[data-step="practice"] { --current-move-accent: #9ee8ff; }
.current-move-cockpit[data-step="evidence"] { --current-move-accent: #9ee8ff; }
.current-move-cockpit[data-step="challenge"] { --current-move-accent: #9effbd; }
.current-move-cockpit[data-step="record"] { --current-move-accent: #9effbd; }
.current-move-cockpit[data-step="review"] { --current-move-accent: #ffb36c; }

.current-move-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
}

.current-move-main h3,
.current-move-main p {
  margin: 0;
}

.current-move-main h3 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.08rem, 2vw, 1.32rem);
  line-height: 1.08;
}

.current-move-main p {
  max-width: 70ch;
  color: #dfd0a0;
  font-size: 0.84rem;
  line-height: 1.36;
}

.current-move-action {
  display: grid;
  gap: 7px;
  align-content: center;
  justify-items: stretch;
  justify-self: stretch;
}

.current-move-action button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--current-move-accent) 64%, transparent);
  border-radius: 8px;
  color: #120d05;
  background: linear-gradient(180deg, #fff0a3, var(--current-move-accent));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--current-move-accent) 13%, transparent);
  cursor: pointer;
  font-weight: 1000;
}

.current-move-action button:hover,
.current-move-action button:focus-visible {
  filter: brightness(1.08);
}

.current-move-action small {
  max-width: 22ch;
  color: #b9a986;
  font-size: 0.68rem;
  line-height: 1.2;
  text-align: center;
}

.current-move-checks {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 761px) {
  .current-move-cockpit {
    grid-template-columns: minmax(0, 1fr) minmax(164px, 196px);
  }

  .current-move-action small {
    max-width: 22ch;
    text-align: center;
  }

  .current-move-checks {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .current-move-cockpit {
    grid-template-columns: 1fr;
  }

  .current-move-action {
    justify-items: stretch;
  }

  .current-move-action small {
    max-width: none;
    text-align: left;
  }

  .current-move-checks {
    grid-template-columns: 1fr;
  }

  .current-move-checks li {
    min-height: 38px;
  }
}

.current-move-checks li {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 7px;
  border: 1px solid rgb(242 201 76 / 0.18);
  border-radius: 7px;
  background: rgb(255 246 215 / 0.035);
  opacity: 0.78;
}

.current-move-checks span {
  display: grid;
  width: 24px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 50%;
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 1000;
}

.current-move-checks b {
  min-width: 0;
  overflow: hidden;
  color: #d8cba5;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.72rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-move-checks .current {
  border-color: color-mix(in srgb, var(--current-move-accent) 54%, transparent);
  opacity: 1;
}

.current-move-checks .current span {
  color: #120d05;
  background: var(--current-move-accent);
  border-color: color-mix(in srgb, var(--current-move-accent) 82%, white);
}

.current-move-checks .complete {
  border-color: rgb(158 255 189 / 0.34);
}

.current-move-checks .complete span {
  color: #061007;
  background: #9effbd;
  border-color: #d9ff9d;
}

.current-move-checks .locked {
  opacity: 0.48;
}

.dragon-test-command {
  --dragon-command-accent: var(--gold);
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) minmax(170px, 0.58fr);
  gap: 10px;
  align-items: center;
  padding: 11px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--dragon-command-accent) 38%, transparent);
  border-radius: 10px;
  background:
    radial-gradient(circle at 10% 16%, color-mix(in srgb, var(--dragon-command-accent) 18%, transparent), transparent 42%),
    linear-gradient(90deg, rgb(255 246 215 / 0.07), transparent 58%),
    rgb(5 4 3 / 0.78);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.09), 0 14px 34px rgb(0 0 0 / 0.2);
}

.dragon-test-command::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--dragon-command-accent) 12%, transparent), transparent);
  opacity: 0.68;
  transform: translateX(-46%);
}

.dragon-command-sigil {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--dragon-command-accent) 48%, transparent);
  border-radius: 14px;
  color: var(--dragon-command-accent);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--dragon-command-accent) 20%, transparent), transparent 64%),
    rgb(6 4 3 / 0.88);
  box-shadow: 0 0 22px color-mix(in srgb, var(--dragon-command-accent) 14%, transparent), inset 0 1px 0 rgb(255 246 215 / 0.12);
}

.dragon-command-sigil span {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 1000;
}

.dragon-command-copy,
.dragon-command-marks {
  position: relative;
  z-index: 1;
}

.dragon-command-copy span,
.dragon-command-copy b,
.dragon-command-copy p {
  display: block;
  margin: 0;
}

.dragon-command-copy span {
  color: var(--dragon-command-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.dragon-command-copy b {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.98rem, 1.8vw, 1.18rem);
  line-height: 1.08;
}

.dragon-command-copy p {
  margin-top: 4px;
  color: #dfd0a0;
  font-size: 0.8rem;
  line-height: 1.3;
}

.dragon-command-marks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.dragon-command-marks span {
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 7px;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 8px;
  background: rgb(255 246 215 / 0.035);
}

.dragon-command-marks b,
.dragon-command-marks small {
  min-width: 0;
  overflow-wrap: break-word;
}

.dragon-command-marks b {
  color: #fff7d4;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
  line-height: 1.05;
}

.dragon-command-marks small {
  color: #c9b98b;
  font-size: 0.62rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.dragon-command-marks .complete {
  border-color: rgb(158 255 189 / 0.36);
}

.dragon-command-marks .current {
  border-color: color-mix(in srgb, var(--dragon-command-accent) 56%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 0 18px color-mix(in srgb, var(--dragon-command-accent) 10%, transparent);
}

.dragon-command-marks .locked {
  opacity: 0.68;
}

.dragon-test-command[data-state="proof"] {
  --dragon-command-accent: #9ee8ff;
}

.dragon-test-command[data-state="ready"],
.dragon-test-command[data-state="success"],
.dragon-test-command[data-state="record"] {
  --dragon-command-accent: #9effbd;
}

.dragon-test-command[data-state="review"] {
  --dragon-command-accent: #ffb36c;
}

.cast-cockpit {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 8%, rgb(242 201 76 / 0.14), transparent 42%),
    radial-gradient(circle at 92% 8%, rgb(85 183 217 / 0.11), transparent 34%),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.18)),
    rgb(6 5 4 / 0.78);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 14px 34px rgb(0 0 0 / 0.18);
}

.cast-cockpit-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.cast-cockpit-main h3,
.cast-cockpit-main p {
  margin: 0;
}

.cast-cockpit-main h3 {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.22rem);
  line-height: 1.08;
}

.cast-cockpit-main p {
  margin-top: 4px;
  max-width: 68ch;
  color: #dfd0a0;
  font-size: 0.8rem;
  line-height: 1.35;
}

.cast-cockpit-main strong {
  min-width: 74px;
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 4px 9px;
  border: 1px solid rgb(242 201 76 / 0.44);
  border-radius: 8px;
  color: var(--gold);
  background: rgb(8 6 4 / 0.9);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  text-align: center;
  text-transform: uppercase;
}

.cast-cockpit-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.cast-cockpit-grid span {
  min-height: 54px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 8px;
  background: rgb(255 246 215 / 0.035);
}

.cast-cockpit-grid b,
.cast-cockpit-grid small {
  min-width: 0;
  overflow-wrap: break-word;
}

.cast-cockpit-grid b {
  color: #fff7d4;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.05;
}

.cast-cockpit-grid small {
  color: #9ee8ff;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.cast-cockpit-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.cast-cockpit-step {
  position: relative;
  min-height: 58px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 3px 8px;
  align-content: center;
  padding: 8px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.044), rgb(255 246 215 / 0.012)),
    rgb(7 5 4 / 0.78);
  overflow: hidden;
}

.cast-cockpit-step::after {
  content: "";
  position: absolute;
  inset: auto 8px 6px 44px;
  height: 2px;
  border-radius: 999px;
  background: rgb(242 201 76 / 0.18);
}

.cast-cockpit-step span {
  grid-row: 1 / span 2;
  width: 28px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.38);
  border-radius: 50%;
  color: var(--gold);
  background: #050302;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 1000;
}

.cast-cockpit-step b,
.cast-cockpit-step small {
  min-width: 0;
  overflow-wrap: break-word;
}

.cast-cockpit-step b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.05;
}

.cast-cockpit-step small {
  color: #c9b98b;
  font-size: 0.68rem;
  line-height: 1.1;
}

.cast-cockpit-step.complete {
  border-color: rgb(158 255 189 / 0.38);
}

.cast-cockpit-step.complete span {
  color: #061007;
  background: #9effbd;
  border-color: #d9ff9d;
}

.cast-cockpit-step.complete::after {
  background: rgb(158 255 189 / 0.48);
}

.cast-cockpit-step.current {
  border-color: rgb(242 201 76 / 0.54);
  box-shadow: 0 0 22px rgb(242 201 76 / 0.1), inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.cast-cockpit-step.current span {
  box-shadow: 0 0 18px rgb(242 201 76 / 0.24);
}

.cast-cockpit-step.locked {
  opacity: 0.74;
}

.cast-cockpit[data-state="ready"] {
  border-color: rgb(158 255 189 / 0.42);
  box-shadow: 0 0 30px rgb(158 255 189 / 0.1), inset 0 1px 0 rgb(255 246 215 / 0.09);
}

.cast-cockpit[data-state="proof"] {
  border-color: rgb(85 183 217 / 0.42);
}

.cast-cockpit[data-state="miss"] {
  border-color: rgb(255 156 124 / 0.5);
  background:
    radial-gradient(circle at 12% 8%, rgb(217 107 43 / 0.18), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.052), rgb(0 0 0 / 0.19)),
    rgb(9 4 3 / 0.8);
}

.cast-cockpit[data-state="success"],
.cast-cockpit[data-state="record"] {
  border-color: rgb(158 255 189 / 0.48);
}

.cast-cockpit.cast-hit {
  animation: castCockpitHit 820ms var(--motion);
}

.cast-cockpit.cast-review {
  animation: castCockpitReview 620ms ease;
}

.cast-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 74px;
  gap: 12px;
  align-items: center;
  margin: 12px 0;
  padding: 11px;
  border: 1px solid rgb(242 201 76 / 0.32);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 20%, rgb(242 201 76 / 0.14), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.06), rgb(0 0 0 / 0.16)),
    rgb(6 5 4 / 0.72);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.cast-meter h3,
.cast-meter p {
  margin: 0;
}

.cast-meter h3 {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.98rem, 1.8vw, 1.22rem);
  line-height: 1.08;
}

.cast-meter p {
  margin-top: 4px;
  color: #decf9f;
  font-size: 0.78rem;
  line-height: 1.25;
}

.cast-meter strong {
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.4);
  border-radius: 9px;
  color: var(--gold);
  background: rgb(8 6 4 / 0.88);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  text-align: center;
}

.cast-meter-orb {
  position: relative;
  width: 62px;
  aspect-ratio: 1;
  justify-self: center;
  border: 1px solid rgb(242 201 76 / 0.42);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgb(242 201 76 / 0.3), transparent 56%),
    rgb(4 4 3 / 0.82);
  box-shadow: 0 0 26px rgb(242 201 76 / 0.14), inset 0 0 20px rgb(0 0 0 / 0.55);
}

.cast-meter-orb i {
  position: absolute;
  inset: 13px;
  border: 1px solid rgb(242 201 76 / 0.3);
  border-radius: 50%;
  animation: castMeterOrbit 3.2s ease-in-out infinite;
}

.cast-meter-orb i:nth-child(2) {
  inset: 20px;
  border-color: rgb(85 183 217 / 0.38);
  animation-delay: 320ms;
}

.cast-meter-orb i:nth-child(3) {
  inset: 27px;
  background: var(--gold);
  box-shadow: 0 0 18px rgb(242 201 76 / 0.58);
  animation-delay: 620ms;
}

.cast-meter[data-state="ready"] {
  border-color: rgb(158 255 189 / 0.46);
  box-shadow: 0 0 28px rgb(158 255 189 / 0.1), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.cast-meter[data-state="ready"] .cast-meter-orb,
.cast-meter[data-state="success"] .cast-meter-orb {
  border-color: rgb(158 255 189 / 0.62);
  box-shadow: 0 0 30px rgb(158 255 189 / 0.22), inset 0 0 20px rgb(0 0 0 / 0.48);
}

.cast-meter[data-state="proof"] {
  border-color: rgb(85 183 217 / 0.42);
}

.cast-meter[data-state="miss"] {
  border-color: rgb(255 156 124 / 0.48);
  background:
    radial-gradient(circle at 12% 20%, rgb(217 107 43 / 0.18), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.052), rgb(0 0 0 / 0.2)),
    rgb(9 4 3 / 0.78);
}

.cast-meter[data-state="success"] {
  animation: castMeterSuccess 720ms var(--motion);
}

.card-corners::before,
.card-corners::after,
.challenge-card::before,
.challenge-card::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: rgb(242 201 76 / 0.7);
  pointer-events: none;
}

.challenge-card::before {
  top: 8px;
  left: 8px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.challenge-card::after {
  top: 8px;
  right: 8px;
  border-top: 2px solid;
  border-right: 2px solid;
}

.challenge-card > .challenge-top { order: 1; }
.challenge-card > .card-corners {
  position: absolute;
  inset: 0;
  order: 0;
  pointer-events: none;
}
.challenge-card > .story { order: 2; }
.challenge-card > h2 { order: 3; }
.challenge-card > .hint { order: 4; }
.challenge-card > .current-move-cockpit { order: 5; }
.challenge-card > .dragon-test-command { order: 6; }
.challenge-card > .cast-cockpit { order: 7; }
.challenge-card > .math-rune-builder,
.challenge-card > .science-alchemy-lab,
.challenge-card > .physics-launcher,
.challenge-card > .engineering-forge-lab,
.challenge-card > .ai-oracle-lab { order: 8; }
.challenge-card > .answers { order: 9; }
.challenge-card > .feedback { order: 10; }
.challenge-card > .learning-receipt { order: 11; }
.challenge-card > .cast-meter { order: 12; }
.challenge-card > .domain-stage { order: 13; }
.challenge-card > .mastery-moment { order: 14; }
.challenge-card > .lesson-recap { order: 15; }

.challenge-card > #answers { order: 9 !important; }
.challenge-card > #feedback { order: 10 !important; }
.challenge-card > #learningReceipt { order: 11 !important; }
.challenge-card > #castMeter { order: 12 !important; }
.challenge-card > #domainStage { order: 13 !important; }

.card-corners::before {
  bottom: 8px;
  left: 8px;
  border-bottom: 2px solid;
  border-left: 2px solid;
}

.card-corners::after {
  bottom: 8px;
  right: 8px;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

.challenge-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.domain-pill,
.chapter-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgb(242 201 76 / 0.58);
  border-radius: 999px;
  color: var(--gold-soft);
  background: #080604;
  font-weight: 900;
  font-size: 0.82rem;
}

.story {
  margin: 0 0 10px;
  color: var(--muted);
  font-style: italic;
}

h2 {
  margin: 0;
  color: #fff9df;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.35rem, 2.2vw, 2.05rem);
  line-height: 1.12;
}

.hint {
  min-height: 42px;
  margin: 12px 0 18px;
  color: #ddcea0;
  line-height: 1.35;
}

.domain-stage {
  position: relative;
  min-height: 116px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  margin: 0;
  padding: 13px;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 50%, rgb(242 201 76 / 0.18), transparent 36%),
    linear-gradient(145deg, rgb(255 246 215 / 0.055), rgb(255 246 215 / 0.018)),
    #070503;
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
  overflow: hidden;
}

.stage-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.52;
  filter: saturate(1.08) contrast(1.08);
  transform: scale(1.02);
  animation: artDrift 15s ease-in-out infinite;
}

.domain-stage::before {
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgb(5 4 3 / 0.82), rgb(5 4 3 / 0.46) 48%, rgb(5 4 3 / 0.72)),
    linear-gradient(180deg, rgb(5 4 3 / 0.08), rgb(5 4 3 / 0.78));
  animation: none;
}

.domain-stage::before,
.domain-stage::after {
  content: "";
  position: absolute;
  inset: auto 12px 12px auto;
  width: 118px;
  height: 118px;
  border: 1px solid rgb(242 201 76 / 0.16);
  border-radius: 50%;
  animation: stageRotate 10s linear infinite;
}

.domain-stage::after {
  z-index: 1;
  inset: 14px auto auto 14px;
  width: 78px;
  height: 78px;
  animation-duration: 7s;
  animation-direction: reverse;
}

.domain-stage::before {
  z-index: 1;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgb(5 4 3 / 0.82), rgb(5 4 3 / 0.46) 48%, rgb(5 4 3 / 0.72)),
    linear-gradient(180deg, rgb(5 4 3 / 0.08), rgb(5 4 3 / 0.78));
  animation: none;
}

.stage-sigil {
  position: relative;
  z-index: 2;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.44);
  border-radius: 18px;
  background:
    radial-gradient(circle, rgb(242 201 76 / 0.32), transparent 62%),
    #080604;
  box-shadow: 0 0 24px rgb(242 201 76 / 0.16), inset 0 1px 0 rgb(255 246 215 / 0.12);
}

.stage-sigil span {
  position: absolute;
  width: 44px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
  transform-origin: center;
  animation: sigilPulse 2.6s ease-in-out infinite;
}

.stage-sigil span:nth-child(2) {
  transform: rotate(60deg);
  animation-delay: 0.18s;
}

.stage-sigil span:nth-child(3) {
  transform: rotate(-60deg);
  animation-delay: 0.36s;
}

.domain-stage p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #e5d5a2;
  line-height: 1.32;
}

.domain-stage .mini-label {
  position: relative;
  z-index: 2;
}

.stage-orbs {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.stage-orbs i {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 16px rgb(242 201 76 / 0.68);
  animation: stageFloat 4.8s ease-in-out infinite;
}

.stage-orbs i:nth-child(1) { left: 12%; top: 22%; }
.stage-orbs i:nth-child(2) { left: 28%; bottom: 18%; animation-delay: 0.7s; }
.stage-orbs i:nth-child(3) { right: 19%; top: 18%; animation-delay: 1.1s; }
.stage-orbs i:nth-child(4) { right: 11%; bottom: 24%; animation-delay: 1.6s; }
.stage-orbs i:nth-child(5) { left: 52%; top: 46%; animation-delay: 2.1s; }

.domain-stage[data-domain="science"] {
  border-color: rgb(158 255 189 / 0.34);
  background:
    radial-gradient(circle at 18% 50%, rgb(77 139 87 / 0.26), transparent 38%),
    radial-gradient(circle at 88% 22%, rgb(85 183 217 / 0.14), transparent 36%),
    #061009;
}

.domain-stage[data-domain="science"] .stage-sigil,
.domain-stage[data-domain="science"] .stage-orbs i {
  background: #9effbd;
  box-shadow: 0 0 18px rgb(158 255 189 / 0.48);
}

.domain-stage[data-domain="physics"] {
  border-color: rgb(85 183 217 / 0.38);
  background:
    radial-gradient(circle at 22% 52%, rgb(85 183 217 / 0.22), transparent 40%),
    #061015;
}

.domain-stage[data-domain="physics"] .stage-sigil,
.domain-stage[data-domain="physics"] .stage-orbs i {
  background: #9ee8ff;
  box-shadow: 0 0 18px rgb(85 183 217 / 0.5);
}

.domain-stage[data-domain="engineering"] .stage-sigil {
  border-radius: 50%;
  animation: stageRotate 6s linear infinite;
}

.domain-stage[data-domain="engineering"] .stage-sigil,
.domain-stage[data-domain="engineering"] .stage-orbs i {
  background: #ffb36c;
  box-shadow: 0 0 18px rgb(217 107 43 / 0.46);
}

.domain-stage[data-domain="ai"] {
  border-color: rgb(161 142 255 / 0.35);
  background:
    radial-gradient(circle at 24% 52%, rgb(109 91 208 / 0.24), transparent 42%),
    #0a0714;
}

.domain-stage[data-domain="ai"] .stage-sigil,
.domain-stage[data-domain="ai"] .stage-orbs i {
  background: #b9adff;
  box-shadow: 0 0 18px rgb(109 91 208 / 0.5);
}

.domain-stage.stage-win {
  animation: stageWinPulse 760ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.domain-stage.stage-win .stage-sigil {
  animation: sigilSolved 760ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.domain-stage.stage-win .stage-orbs i {
  animation: orbSolved 760ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-top: 0;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.18);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 0%, rgb(242 201 76 / 0.09), transparent 52%),
    rgb(0 0 0 / 0.16);
}

.answers::before {
  content: "Answer Choices";
  grid-column: 1 / -1;
  color: var(--gold);
  font: 1000 0.64rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.answer {
  min-height: 62px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 5px 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.42);
  border-radius: 10px;
  color: var(--text);
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.065), rgb(255 246 215 / 0.018)),
    #0b0805;
  box-shadow: 0 5px 0 #050302, inset 0 1px 0 rgb(255 246 215 / 0.08);
  cursor: pointer;
  font-weight: 900;
  transition: transform 420ms var(--motion), border-color 420ms var(--motion), background 420ms var(--motion), box-shadow 420ms var(--motion);
}

.answer span,
.answer b,
.answer i {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.answer span {
  grid-column: 1;
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.answer b {
  grid-column: 1;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.9rem, 1.7vw, 1.05rem);
  line-height: 1.08;
  overflow-wrap: break-word;
}

.answer i {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  width: 36px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.38);
  border-radius: 50%;
  color: var(--gold);
  background: rgb(8 6 4 / 0.82);
  box-shadow: inset 0 0 14px rgb(242 201 76 / 0.08);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  font-style: normal;
}

.answer:hover,
.answer:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 7px 0 #050302, 0 0 24px rgb(242 201 76 / 0.12), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.answer.castable {
  border-color: rgb(242 201 76 / 0.58);
  background:
    radial-gradient(circle at 88% 50%, rgb(242 201 76 / 0.12), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.07), rgb(255 246 215 / 0.02)),
    #0b0805;
}

.answer.castable[data-proof-role="match"] {
  border-color: rgb(158 255 189 / 0.62);
  background:
    radial-gradient(circle at 88% 50%, rgb(158 255 189 / 0.16), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.07), rgb(255 246 215 / 0.02)),
    #081006;
  box-shadow: 0 5px 0 #050302, 0 0 22px rgb(158 255 189 / 0.12), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.answer.castable[data-proof-role="match"] span,
.answer.castable[data-proof-role="match"] i {
  color: #9effbd;
}

.answer.selected {
  border-color: rgb(85 183 217 / 0.72);
  box-shadow: 0 7px 0 #050302, 0 0 26px rgb(85 183 217 / 0.18), inset 0 1px 0 rgb(255 246 215 / 0.12);
}

.answer:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
  filter: grayscale(0.35);
}

.answers[data-lock-reason="proof"]::before {
  content: "Build proof first — answers unlock after the model is complete";
  color: #9effbd;
}

.answers[data-lock-reason="cast"]::before {
  content: "Cast the answer that matches the proof";
  color: var(--gold);
}

.answer.correct {
  color: #061007;
  background:
    radial-gradient(circle at 90% 50%, rgb(255 255 255 / 0.22), transparent 38%),
    #9bd46b;
  border-color: #d9ff9d;
  opacity: 1;
  filter: none;
  animation: correctPulse 520ms ease;
}

.answer.correct span,
.answer.correct b,
.answer.correct i {
  color: #061007;
}

.answer.correct i {
  border-color: rgb(6 16 7 / 0.32);
  background: rgb(255 255 255 / 0.24);
}

.answer.wrong {
  background: #7f1d1a;
  border-color: #ff9c7c;
  opacity: 1;
  filter: none;
  animation: wrongShake 360ms ease;
}

.answer.wrong span,
.answer.wrong b,
.answer.wrong i {
  color: #fff4c6;
}

.answer.wrong i {
  border-color: rgb(255 246 215 / 0.32);
  background: rgb(8 6 4 / 0.38);
}

.math-rune-builder {
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.44);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 18%, rgb(242 201 76 / 0.16), transparent 40%),
    linear-gradient(145deg, rgb(28 17 7 / 0.95), rgb(8 6 4 / 0.96));
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.math-rune-builder.hidden {
  display: none;
}

.math-builder-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px;
  gap: 10px;
  align-items: center;
}

.math-builder-head p,
.math-builder-controls p {
  margin: 0;
  color: #e4d4a4;
  line-height: 1.25;
}

.math-builder-head strong {
  min-height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.54);
  border-radius: 8px;
  color: var(--gold);
  background: #080604;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.82rem;
}

.math-proof-board {
  display: grid;
  gap: 8px;
}

.math-proof-equation {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 18%, rgb(242 201 76 / 0.14), transparent 46%),
    rgb(0 0 0 / 0.22);
}

.math-proof-equation span,
.math-proof-facts span {
  color: #c9a85a;
  font-size: 0.63rem;
  font-weight: 900;
  text-transform: uppercase;
}

.math-proof-equation b {
  color: #fff4c6;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1rem;
  line-height: 1.1;
}

.math-proof-equation small {
  color: #ead9a5;
  line-height: 1.22;
}

.math-proof-equation em {
  height: 8px;
  overflow: hidden;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.08);
}

.math-proof-equation em::before {
  content: "";
  display: block;
  width: var(--math-proof-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f2c94c, #9effbd);
  box-shadow: 0 0 16px rgb(242 201 76 / 0.24);
  transition: width 200ms ease;
}

.math-proof-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.math-proof-guide span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgb(255 246 215 / 0.14);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.18);
}

.math-proof-guide span:first-child {
  border-color: rgb(242 201 76 / 0.38);
  background:
    radial-gradient(circle at 12% 40%, rgb(242 201 76 / 0.16), transparent 42%),
    rgb(0 0 0 / 0.18);
}

.math-proof-guide span:last-child {
  border-color: rgb(217 107 43 / 0.34);
  background:
    radial-gradient(circle at 12% 40%, rgb(217 107 43 / 0.14), transparent 42%),
    rgb(0 0 0 / 0.18);
}

.math-proof-guide b {
  color: #fff4c6;
  font-size: 0.82rem;
  line-height: 1.05;
}

.math-proof-guide small {
  color: #d9cba3;
  font-size: 0.7rem;
  line-height: 1.18;
}

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

.proof-guide span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgb(255 246 215 / 0.14);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.18);
}

.proof-guide b {
  color: #fff4c6;
  font-size: 0.82rem;
  line-height: 1.05;
}

.proof-guide small {
  color: #d9cba3;
  font-size: 0.7rem;
  line-height: 1.18;
}

.alchemy-proof-guide,
.forge-proof-guide,
.oracle-proof-guide {
  grid-column: 1 / -1;
}

.physics-proof-guide {
  margin-top: 2px;
}

.alchemy-proof-guide span:first-child,
.physics-proof-guide span:first-child,
.forge-proof-guide span:first-child,
.oracle-proof-guide span:first-child {
  border-color: rgb(242 201 76 / 0.38);
  background:
    radial-gradient(circle at 12% 40%, rgb(242 201 76 / 0.14), transparent 42%),
    rgb(0 0 0 / 0.18);
}

.alchemy-proof-guide span:last-child,
.physics-proof-guide span:last-child,
.forge-proof-guide span:last-child,
.oracle-proof-guide span:last-child {
  border-color: rgb(85 183 217 / 0.34);
  background:
    radial-gradient(circle at 12% 40%, rgb(85 183 217 / 0.12), transparent 42%),
    rgb(0 0 0 / 0.18);
}

.math-proof-equation.complete {
  border-color: rgb(158 255 189 / 0.54);
  box-shadow: 0 0 18px rgb(158 255 189 / 0.12);
}

.math-proof-equation.over {
  border-color: rgb(217 107 43 / 0.62);
}

.math-proof-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.math-proof-facts div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgb(242 201 76 / 0.18);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.18);
}

.math-proof-facts b {
  color: #fff3cf;
  font-size: 0.78rem;
  line-height: 1.14;
  overflow-wrap: break-word;
}

.math-proof-gems {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 5px;
  padding: 8px;
  border: 1px dashed rgb(242 201 76 / 0.18);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.16);
}

.math-proof-gems i {
  aspect-ratio: 1;
  border: 1px solid rgb(242 201 76 / 0.18);
  border-radius: 5px;
  background: rgb(255 246 215 / 0.08);
}

.math-proof-gems i.goal {
  border-color: rgb(242 201 76 / 0.34);
  background: rgb(242 201 76 / 0.14);
}

.math-proof-gems i.taken {
  border-color: rgb(217 107 43 / 0.22);
  background:
    linear-gradient(135deg, rgb(217 107 43 / 0.12), rgb(0 0 0 / 0.12)),
    rgb(255 246 215 / 0.045);
}

.math-proof-gems i.selected {
  border-color: rgb(158 255 189 / 0.52);
  background:
    radial-gradient(circle at 32% 28%, #effff1, #9effbd 48%, #2f8f5d 86%),
    #102516;
  box-shadow: 0 0 10px rgb(158 255 189 / 0.2);
}

.math-proof-gems i.selected.wrong {
  border-color: rgb(255 156 124 / 0.68);
  background:
    radial-gradient(circle at 32% 28%, #ffe4d8, #d96b2b 48%, #711d14 86%),
    #210b06;
  box-shadow: 0 0 12px rgb(217 107 43 / 0.22);
}

.rune-tray {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.rune-tray.math-proof-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.math-proof-action {
  min-width: 0;
  min-height: 126px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 8px;
  color: #d9cba3;
  background: rgb(0 0 0 / 0.24);
  text-align: left;
  transition: transform 180ms var(--motion), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.math-proof-action span {
  color: #c9a85a;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.math-proof-action strong {
  align-self: center;
  color: #fff4c6;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1.25rem;
}

.math-proof-action b {
  color: #fff3cf;
  font-size: 0.76rem;
  line-height: 1.15;
}

.math-proof-action small {
  color: #b9aa83;
  font-size: 0.66rem;
  line-height: 1.2;
}

.math-proof-action.current {
  border-color: rgb(242 201 76 / 0.68);
  background:
    radial-gradient(circle at 16% 18%, rgb(242 201 76 / 0.18), transparent 44%),
    rgb(17 12 5 / 0.94);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.22), 0 0 16px rgb(242 201 76 / 0.1);
  cursor: pointer;
}

.math-proof-action.current:hover,
.math-proof-action.current:focus-visible {
  transform: translateY(-2px);
  border-color: #f2c94c;
}

.math-proof-action.complete {
  border-color: rgb(158 255 189 / 0.36);
  background: rgb(16 37 22 / 0.58);
}

.math-proof-action.complete span,
.math-proof-action.complete strong {
  color: #bfffd0;
}

.math-proof-action:disabled {
  opacity: 0.54;
  cursor: default;
}

.math-proof-action.complete:disabled {
  opacity: 0.88;
}

.math-proof-facts.paced div {
  opacity: 0.48;
  transition: opacity 180ms ease, border-color 180ms ease, background 180ms ease;
}

.math-proof-facts.paced div.complete {
  opacity: 1;
  border-color: rgb(158 255 189 / 0.28);
  background: rgb(16 37 22 / 0.42);
}

.math-proof-gems i.waiting {
  opacity: 0.2;
}

.math-proof-gems i.shown {
  opacity: 1;
}

.math-proof-gems i.remaining:not(.selected) {
  border-color: rgb(242 201 76 / 0.56);
  background:
    radial-gradient(circle at 32% 28%, #fff0a8, #d6a536 48%, #6c4113 86%),
    #0b0805;
}

.math-proof-gems i.removed {
  position: relative;
  opacity: 0.42;
  transform: scale(0.82);
}

.math-proof-gems i.removed::after {
  content: "";
  position: absolute;
  inset: 45% -2px auto;
  height: 2px;
  border-radius: 2px;
  background: #ff9c7c;
  transform: rotate(-35deg);
}

.rune-gem {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid rgb(242 201 76 / 0.4);
  border-radius: 8px;
  color: #ffe9a0;
  background:
    radial-gradient(circle at 34% 28%, #fff0a8, #d6a536 38%, #6c4113 76%),
    #0b0805;
  box-shadow: 0 4px 0 #050302, 0 0 12px rgb(242 201 76 / 0.1);
  cursor: pointer;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 900;
  transition: transform 180ms var(--motion), filter 180ms ease, box-shadow 180ms ease;
}

.rune-gem:hover,
.rune-gem:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.rune-gem.selected {
  color: #07110a;
  background:
    radial-gradient(circle at 32% 28%, #effff1, #9effbd 42%, #2f8f5d 78%),
    #102516;
  box-shadow: 0 4px 0 #050302, 0 0 18px rgb(158 255 189 / 0.28);
}

.rune-gem.taken-gem {
  color: #f6bd8d;
  border-color: rgb(217 107 43 / 0.36);
  background:
    radial-gradient(circle at 34% 28%, #c78345, #6d3117 42%, #281008 78%),
    #0b0805;
  filter: saturate(0.86) brightness(0.9);
}

.rune-gem.taken-gem::after {
  content: "taken";
  position: absolute;
  right: 4px;
  bottom: 3px;
  color: rgb(255 231 198 / 0.78);
  font-size: 0.44rem;
  line-height: 1;
  text-transform: uppercase;
}

.academy-about-board {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 10%, rgb(242 201 76 / 0.12), transparent 34%),
    radial-gradient(circle at 88% 8%, rgb(85 183 217 / 0.1), transparent 36%),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.16)),
    rgb(7 5 3 / 0.56);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 16px 38px rgb(0 0 0 / 0.18);
}

.academy-about-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.academy-about-head h3,
.academy-about-head p,
.academy-about-grid p,
.academy-source-strip p {
  margin: 0;
}

.academy-about-head h3 {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.14rem, 2vw, 1.52rem);
  line-height: 1.05;
  text-wrap: balance;
}

.academy-about-head p {
  max-width: 72ch;
  margin-top: 6px;
  color: #dfd0a4;
  font-size: 0.84rem;
  line-height: 1.45;
}

.academy-about-head strong {
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid rgb(158 255 189 / 0.34);
  border-radius: 8px;
  color: #9effbd;
  background: rgb(4 14 8 / 0.76);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.academy-about-grid,
.academy-source-strip {
  display: grid;
  gap: 9px;
}

.academy-about-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.academy-source-strip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.academy-about-grid article,
.academy-source-strip article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.14)),
    rgb(0 0 0 / 0.18);
}

.academy-source-strip article {
  border-color: rgb(85 183 217 / 0.18);
}

.academy-about-grid span,
.academy-source-strip span {
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.academy-about-grid b,
.academy-source-strip b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.08;
  text-wrap: balance;
}

.academy-about-grid p,
.academy-source-strip p {
  color: #d5c493;
  font-size: 0.78rem;
  line-height: 1.4;
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .academy-about-head,
  .academy-about-grid,
  .academy-source-strip {
    grid-template-columns: 1fr;
  }

  .academy-about-head strong {
    justify-self: start;
  }
}

.rune-gem.stay-gem::after {
  content: "stay";
  position: absolute;
  right: 4px;
  bottom: 3px;
  color: rgb(42 25 3 / 0.72);
  font-size: 0.44rem;
  line-height: 1;
  text-transform: uppercase;
}

.rune-gem.taken-gem.selected {
  color: #fff0dd;
  border-color: rgb(255 156 124 / 0.76);
  background:
    radial-gradient(circle at 34% 28%, #ffd4c4, #d96b2b 42%, #711d14 78%),
    #210b06;
  box-shadow: 0 4px 0 #050302, 0 0 18px rgb(217 107 43 / 0.28);
}

.math-rune-builder.solved {
  border-color: rgb(158 255 189 / 0.62);
  box-shadow: 0 0 28px rgb(158 255 189 / 0.12), inset 0 1px 0 rgb(255 246 215 / 0.14);
}

.math-rune-builder.over {
  border-color: rgb(217 107 43 / 0.62);
}

/* Equal Shares: prediction and fair dealing are the proof, not a revealed equation. */
.rune-tray.equal-shares-playset {
  grid-template-columns: 1fr;
}

.equal-share-lab {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.3);
  border-radius: 10px;
  background:
    radial-gradient(circle at 14% 8%, rgb(242 201 76 / 0.18), transparent 34%),
    radial-gradient(circle at 88% 18%, rgb(85 183 217 / 0.11), transparent 34%),
    linear-gradient(155deg, rgb(28 17 7 / 0.98), rgb(5 4 3 / 0.98));
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 14px 32px rgb(0 0 0 / 0.22);
}

.equal-share-lab[data-result="revise"] {
  border-color: rgb(255 156 124 / 0.58);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 0 22px rgb(217 107 43 / 0.12);
}

.equal-share-predict {
  display: grid;
  gap: 7px;
}

.equal-share-predict > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.equal-share-prediction {
  min-width: 0;
  min-height: 64px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 8px;
  color: #d8cba2;
  background: rgb(0 0 0 / 0.26);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms var(--motion), border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.equal-share-prediction span {
  grid-row: 1 / span 2;
  min-width: 36px;
  color: #fff4c6;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1.25rem;
  font-weight: 1000;
  text-align: center;
}

.equal-share-prediction b {
  color: #fff3cf;
  font-size: 0.75rem;
}

.equal-share-prediction small {
  color: #a99b77;
  font-size: 0.6rem;
}

.equal-share-prediction:not(:disabled):hover,
.equal-share-prediction:not(:disabled):focus-visible,
.equal-share-prediction.selected {
  transform: translateY(-1px);
  border-color: rgb(242 201 76 / 0.7);
  background: linear-gradient(145deg, rgb(80 51 14 / 0.88), rgb(20 13 5 / 0.92));
  box-shadow: 0 0 18px rgb(242 201 76 / 0.12);
}

.equal-share-prediction.selected span {
  color: var(--gold);
  text-shadow: 0 0 14px rgb(242 201 76 / 0.26);
}

.equal-share-prediction:disabled {
  cursor: default;
  opacity: 0.72;
}

.equal-share-vault {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.36);
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgb(242 201 76 / 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(180deg, rgb(48 29 8 / 0.9), rgb(12 8 4 / 0.94));
}

.equal-share-vault header,
.equal-share-pack header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.equal-share-vault header > div {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 8px;
  align-items: baseline;
}

.equal-share-vault header span,
.equal-share-pack header small {
  color: #c9a85a;
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
}

.equal-share-vault header b {
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1.2rem;
}

.equal-share-vault header small {
  grid-column: 1 / -1;
  color: #b9aa83;
  font-size: 0.6rem;
}

.equal-share-vault header strong {
  color: #fff4c6;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.9rem;
}

.equal-share-vault header strong i {
  color: #8e805f;
  font-size: 0.58rem;
  font-style: normal;
}

.equal-share-vault-coins {
  min-height: 46px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 5px;
  align-items: center;
}

.equal-share-coin {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 232 145 / 0.58);
  border-radius: 50%;
  color: #5b3507;
  background: radial-gradient(circle at 34% 28%, #fff0a8, #e6b23d 44%, #8a5214 86%);
  box-shadow: 0 2px 0 #4b2909, 0 0 8px rgb(242 201 76 / 0.14);
  font-size: clamp(0.42rem, 1.2vw, 0.62rem);
  font-style: normal;
}

.equal-share-coin.recent {
  animation: equalShareCoinLand 420ms cubic-bezier(0.18, 0.88, 0.3, 1.28) both;
}

.equal-share-empty {
  grid-column: 1 / -1;
  min-height: 40px;
  display: grid;
  place-items: center;
  color: #9effbd;
  font-size: 0.72rem;
  font-weight: 900;
}

.equal-share-packs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.equal-share-pack {
  min-width: 0;
  min-height: 112px;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgb(85 183 217 / 0.22);
  border-radius: 9px;
  background:
    radial-gradient(circle at 82% 12%, rgb(85 183 217 / 0.12), transparent 42%),
    rgb(5 12 17 / 0.72);
  transition: transform 180ms var(--motion), border-color 180ms ease, box-shadow 180ms ease;
}

.equal-share-pack.full {
  border-color: rgb(158 255 189 / 0.44);
  box-shadow: 0 0 14px rgb(158 255 189 / 0.09);
}

.equal-share-pack header > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(85 183 217 / 0.34);
  border-radius: 50%;
  color: #c9f3ff;
  background: #07131a;
  font-family: Cinzel, Georgia, serif;
  font-weight: 900;
}

.equal-share-pack header > div {
  min-width: 0;
  flex: 1;
  display: grid;
}

.equal-share-pack header b {
  overflow: hidden;
  color: #eefaff;
  font-size: 0.7rem;
  text-overflow: ellipsis;
}

.equal-share-pack header strong {
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1rem;
}

.equal-share-pack-coins {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.equal-share-pack-coins .equal-share-coin {
  min-width: 17px;
  font-size: 0.45rem;
}

.equal-share-action {
  display: grid;
}

.equal-share-primary,
.equal-share-sealed {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  place-content: center;
  padding: 9px 12px;
  border: 1px solid rgb(242 201 76 / 0.62);
  border-radius: 9px;
  color: #160e03;
  background: linear-gradient(180deg, #fff3be, #f2c94c 62%, #c68920);
  box-shadow: 0 4px 0 #5f360b, 0 0 18px rgb(242 201 76 / 0.14);
  text-align: center;
}

.equal-share-primary {
  cursor: pointer;
  transition: transform 160ms var(--motion), filter 160ms ease, box-shadow 160ms ease;
}

.equal-share-primary:not(:disabled):hover,
.equal-share-primary:not(:disabled):focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.equal-share-primary b,
.equal-share-sealed b {
  font-size: 0.8rem;
  font-weight: 1000;
}

.equal-share-primary small,
.equal-share-sealed small {
  font-size: 0.64rem;
}

.equal-share-primary:disabled {
  color: #8f805d;
  border-color: rgb(255 246 215 / 0.14);
  background: rgb(255 246 215 / 0.08);
  box-shadow: none;
  cursor: default;
}

.equal-share-primary.revise:disabled {
  color: #ffcfbd;
  border-color: rgb(255 156 124 / 0.34);
  background: rgb(113 29 20 / 0.28);
}

.equal-share-sealed {
  grid-template-columns: auto minmax(0, 1fr);
  color: #06140b;
  border-color: rgb(158 255 189 / 0.66);
  background: linear-gradient(180deg, #d9ffe4, #9effbd 62%, #4cae73);
  box-shadow: 0 4px 0 #1d5d38, 0 0 24px rgb(158 255 189 / 0.18);
  text-align: left;
}

.equal-share-sealed > span {
  align-self: center;
  font-size: 1.4rem;
  font-weight: 1000;
}

.equal-share-sealed > div {
  display: grid;
}

.equal-share-trials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.equal-share-trials span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.2);
}

.equal-share-trials span.match {
  border-color: rgb(158 255 189 / 0.36);
  background: rgb(16 55 30 / 0.38);
}

.equal-share-trials span.revise {
  border-color: rgb(255 156 124 / 0.36);
  background: rgb(89 26 17 / 0.34);
}

.equal-share-trials b {
  color: #fff4c6;
  font-size: 0.68rem;
}

.equal-share-trials small {
  color: #cfc19a;
  font-size: 0.6rem;
}

.equal-share-facts div.complete {
  border-color: rgb(158 255 189 / 0.32);
  background: rgb(16 55 30 / 0.32);
}

@keyframes equalShareCoinLand {
  0% { opacity: 0; transform: translateY(-16px) scale(0.5) rotate(-30deg); }
  68% { opacity: 1; transform: translateY(2px) scale(1.14) rotate(8deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@media (max-width: 640px) {
  .equal-share-lab {
    padding: 8px;
  }

  .equal-share-prediction {
    min-height: 52px;
    grid-template-columns: 1fr;
    gap: 1px;
    padding: 7px;
    text-align: center;
  }

  .equal-share-prediction span {
    grid-row: auto;
    min-width: 0;
    font-size: 1rem;
  }

  .equal-share-prediction small {
    display: none;
  }

  .equal-share-vault-coins {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .equal-share-packs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .equal-share-pack {
    min-height: 104px;
  }

  .equal-share-primary,
  .equal-share-sealed {
    min-height: 52px;
  }

  .equal-share-trials {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .equal-share-coin.recent {
    animation: none;
  }

  .equal-share-prediction,
  .equal-share-pack,
  .equal-share-primary {
    transition: none;
  }
}

/* Week 3 · Area Blueprint: predict, build, inspect, and revise the measured deck. */
.rune-tray.area-blueprint-playset {
  grid-template-columns: 1fr;
}

.area-blueprint-stage {
  display: grid;
  gap: 11px;
  padding: 11px;
  border: 1px solid rgb(99 211 236 / 0.34);
  border-radius: 10px;
  background:
    linear-gradient(rgb(88 196 226 / 0.055) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgb(88 196 226 / 0.055) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(circle at 82% 4%, rgb(181 156 255 / 0.17), transparent 30%),
    linear-gradient(155deg, #061824, #050b11 72%, #030608);
  box-shadow: inset 0 1px 0 rgb(214 247 255 / 0.11), 0 14px 32px rgb(0 0 0 / 0.24);
}

.area-blueprint-stage[data-result="revise"] {
  border-color: rgb(255 156 124 / 0.56);
  box-shadow: inset 0 1px 0 rgb(214 247 255 / 0.08), 0 0 24px rgb(217 107 43 / 0.12);
}

.area-order-panel {
  display: grid;
  gap: 7px;
}

.area-order-panel > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.area-order-choice {
  min-width: 0;
  min-height: 64px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgb(132 224 247 / 0.22);
  border-radius: 8px;
  color: #dff8ff;
  background: linear-gradient(180deg, rgb(78 184 218 / 0.08), transparent), rgb(1 10 15 / 0.62);
  cursor: pointer;
  text-align: left;
  transition: transform 160ms var(--motion), border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.area-order-choice span {
  grid-row: 1 / span 2;
  min-width: 38px;
  color: #bff3ff;
  font: 1000 1.24rem/1 "JetBrains Mono", Consolas, monospace;
  text-align: center;
}

.area-order-choice b {
  color: #f2fbff;
  font-size: 0.74rem;
}

.area-order-choice small {
  color: #8fbfce;
  font-size: 0.59rem;
}

.area-order-choice:not(:disabled):hover,
.area-order-choice:not(:disabled):focus-visible,
.area-order-choice.selected {
  transform: translateY(-1px);
  border-color: rgb(242 201 76 / 0.72);
  background: radial-gradient(circle at 12% 24%, rgb(242 201 76 / 0.16), transparent 48%), #0b171a;
  box-shadow: 0 0 20px rgb(242 201 76 / 0.1);
}

.area-order-choice.selected span {
  color: var(--gold);
  text-shadow: 0 0 14px rgb(242 201 76 / 0.26);
}

.area-order-choice:disabled {
  cursor: default;
  opacity: 0.7;
}

.area-drafting-table {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgb(120 220 245 / 0.28);
  border-radius: 10px;
  background:
    linear-gradient(rgb(80 190 222 / 0.07) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgb(80 190 222 / 0.07) 1px, transparent 1px) 0 0 / 18px 18px,
    rgb(3 21 31 / 0.86);
  box-shadow: inset 0 0 28px rgb(79 190 222 / 0.07);
}

.area-drafting-table header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.area-drafting-table header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.area-drafting-table header span {
  color: #73d9ef;
  font: 900 0.6rem/1 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.area-drafting-table header b {
  color: #f4fbff;
  font: 800 0.8rem/1.2 Cinzel, Georgia, serif;
}

.area-drafting-table header strong {
  flex: 0 0 auto;
  display: grid;
  color: var(--gold);
  font: 1000 1.02rem/1 "JetBrains Mono", Consolas, monospace;
  text-align: right;
}

.area-drafting-table header strong i {
  margin-top: 3px;
  color: #8fc1ce;
  font: 800 0.55rem/1 "JetBrains Mono", Consolas, monospace;
  font-style: normal;
  text-transform: uppercase;
}

.area-dimension {
  display: grid;
  grid-template-columns: minmax(12px, 1fr) auto minmax(12px, 1fr);
  gap: 7px;
  align-items: center;
  color: #91dced;
  font: 800 0.58rem/1 "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.area-dimension span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(119 222 244 / 0.72));
}

.area-dimension span:last-child {
  background: linear-gradient(90deg, rgb(119 222 244 / 0.72), transparent);
}

.area-deck-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border: 1px solid rgb(129 224 245 / 0.18);
  border-radius: 8px;
  background: rgb(0 6 10 / 0.52);
}

.area-deck-section {
  min-width: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(30px, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px dashed rgb(127 213 232 / 0.2);
  border-radius: 7px;
  background: rgb(34 95 111 / 0.08);
}

.area-deck-section i {
  min-width: 0;
  display: grid;
  place-items: center;
  border: 1px dashed rgb(127 213 232 / 0.17);
  border-radius: 4px;
  color: transparent;
  background: rgb(7 34 44 / 0.45);
  font-style: normal;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--motion);
}

.area-deck-section i span {
  font: 900 0.58rem/1 "JetBrains Mono", Consolas, monospace;
}

.area-deck-section.filled {
  border-style: solid;
  border-color: rgb(242 201 76 / 0.34);
  background: rgb(72 47 10 / 0.18);
}

.area-deck-section.filled i {
  border-style: solid;
  border-color: rgb(255 232 148 / 0.48);
  color: #fff2b4;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.12), transparent 44%),
    linear-gradient(145deg, #8a6224, #3f290c);
  box-shadow: inset 0 1px 0 rgb(255 248 206 / 0.24), 0 3px 0 #120a03;
}

.area-deck-section.recent i {
  animation: areaTileLand 420ms cubic-bezier(0.18, 0.88, 0.3, 1.22) both;
}

.area-blueprint-action {
  display: grid;
}

.area-blueprint-primary,
.area-blueprint-sealed {
  min-height: 54px;
  display: grid;
  gap: 2px;
  place-content: center;
  padding: 9px 12px;
  border: 1px solid rgb(110 219 243 / 0.58);
  border-radius: 9px;
  color: #e9fbff;
  background: linear-gradient(180deg, rgb(68 176 206 / 0.25), rgb(5 41 55 / 0.96));
  box-shadow: 0 4px 0 #021219, 0 0 20px rgb(71 190 219 / 0.12);
  text-align: center;
}

.area-blueprint-primary {
  cursor: pointer;
  transition: transform 160ms var(--motion), filter 160ms ease, box-shadow 160ms ease;
}

.area-blueprint-primary:not(:disabled):hover,
.area-blueprint-primary:not(:disabled):focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.area-blueprint-primary b,
.area-blueprint-sealed b {
  font-size: 0.8rem;
  font-weight: 1000;
}

.area-blueprint-primary small,
.area-blueprint-sealed small {
  color: #a9d8e4;
  font-size: 0.63rem;
}

.area-blueprint-primary:disabled {
  color: #7f9ba2;
  border-color: rgb(177 225 235 / 0.13);
  background: rgb(177 225 235 / 0.06);
  box-shadow: none;
  cursor: default;
}

.area-blueprint-primary.revise:disabled {
  color: #ffcfbd;
  border-color: rgb(255 156 124 / 0.34);
  background: rgb(113 29 20 / 0.28);
}

.area-blueprint-sealed {
  grid-template-columns: auto minmax(0, 1fr);
  color: #06140b;
  border-color: rgb(158 255 189 / 0.66);
  background: linear-gradient(180deg, #d9ffe4, #9effbd 62%, #4cae73);
  box-shadow: 0 4px 0 #1d5d38, 0 0 24px rgb(158 255 189 / 0.18);
  text-align: left;
}

.area-blueprint-sealed > span {
  align-self: center;
  font-size: 1.4rem;
  font-weight: 1000;
}

.area-blueprint-sealed > div {
  display: grid;
}

.area-blueprint-sealed small {
  color: #164c2c;
}

.area-trial-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.area-trial-ledger span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid rgb(132 224 247 / 0.16);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.22);
}

.area-trial-ledger span.match {
  border-color: rgb(158 255 189 / 0.38);
  background: rgb(16 55 30 / 0.36);
}

.area-trial-ledger span.revise {
  border-color: rgb(255 156 124 / 0.38);
  background: rgb(89 26 17 / 0.34);
}

.area-trial-ledger b {
  color: #f1fbff;
  font-size: 0.68rem;
}

.area-trial-ledger small {
  color: #a4cfda;
  font-size: 0.6rem;
}

.area-blueprint-equation.over {
  border-color: rgb(255 156 124 / 0.5);
}

.area-blueprint-facts div.complete {
  border-color: rgb(158 255 189 / 0.32);
  background: rgb(16 55 30 / 0.32);
}

@keyframes areaTileLand {
  0% { opacity: 0.15; transform: translateY(-12px) scale(0.78); }
  68% { opacity: 1; transform: translateY(2px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
  .area-blueprint-stage,
  .area-drafting-table {
    padding: 8px;
  }

  .area-order-choice {
    min-height: 52px;
    grid-template-columns: 1fr;
    gap: 1px;
    padding: 7px 5px;
    text-align: center;
  }

  .area-order-choice span {
    grid-row: auto;
    min-width: 0;
    font-size: 1rem;
  }

  .area-order-choice small {
    display: none;
  }

  .area-drafting-table header b {
    font-size: 0.7rem;
  }

  .area-deck-grid {
    gap: 4px;
    padding: 6px;
  }

  .area-deck-section {
    grid-template-rows: repeat(3, minmax(26px, 1fr));
    gap: 3px;
    padding: 3px;
  }

  .area-blueprint-primary,
  .area-blueprint-sealed {
    min-height: 52px;
  }

  .area-trial-ledger {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .area-order-choice,
  .area-blueprint-primary,
  .area-deck-section i,
  .area-deck-section.recent i {
    animation: none !important;
    transition: none !important;
  }
}

/* Week 4 · Half-Power Core: choose, balance, revise, and rebuild the whole. */
.rune-tray.half-power-playset {
  grid-template-columns: 1fr;
}

.half-power-stage {
  display: grid;
  gap: 11px;
  padding: 11px;
  border: 1px solid rgb(186 156 255 / 0.36);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 2%, rgb(167 122 255 / 0.18), transparent 31%),
    radial-gradient(circle at 88% 8%, rgb(95 221 238 / 0.12), transparent 28%),
    linear-gradient(155deg, #120c24, #070812 68%, #040509);
  box-shadow: inset 0 1px 0 rgb(237 227 255 / 0.1), 0 14px 34px rgb(0 0 0 / 0.24);
}

.half-power-stage[data-result="revise"] {
  border-color: rgb(255 156 124 / 0.6);
  box-shadow: inset 0 1px 0 rgb(237 227 255 / 0.08), 0 0 24px rgb(217 107 43 / 0.13);
}

.half-power-stage[data-result="matched"] {
  border-color: rgb(158 255 189 / 0.48);
  box-shadow: inset 0 1px 0 rgb(237 227 255 / 0.1), 0 0 26px rgb(158 255 189 / 0.1);
}

.half-split-panel {
  display: grid;
  gap: 7px;
}

.half-split-panel > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.half-split-choice {
  min-width: 0;
  min-height: 62px;
  display: grid;
  gap: 2px;
  place-content: center;
  padding: 7px 6px;
  border: 1px solid rgb(188 164 255 / 0.24);
  border-radius: 8px;
  color: #e8ddff;
  background: rgb(6 5 14 / 0.74);
  cursor: pointer;
  text-align: center;
  transition: transform 160ms var(--motion), border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.half-split-choice span {
  color: #f2ebff;
  font: 1000 1.18rem/1 "JetBrains Mono", Consolas, monospace;
}

.half-split-choice b {
  color: #f2ebff;
  font-size: 0.67rem;
}

.half-split-choice small {
  color: #ae9bcf;
  font-size: 0.55rem;
}

.half-split-choice:not(:disabled):hover,
.half-split-choice:not(:disabled):focus-visible,
.half-split-choice.selected {
  transform: translateY(-2px);
  border-color: rgb(242 201 76 / 0.72);
  background: radial-gradient(circle at 50% 12%, rgb(242 201 76 / 0.16), transparent 58%), #171021;
  box-shadow: 0 0 18px rgb(242 201 76 / 0.1);
}

.half-split-choice.selected span {
  color: var(--gold);
  text-shadow: 0 0 14px rgb(242 201 76 / 0.24);
}

.half-split-choice.tried {
  border-color: rgb(255 156 124 / 0.3);
  background: rgb(78 22 18 / 0.3);
}

.half-split-choice:disabled {
  cursor: default;
  opacity: 0.64;
}

.half-core-console {
  display: grid;
  gap: 10px;
  min-height: 220px;
  padding: 11px;
  border: 1px solid rgb(188 164 255 / 0.25);
  border-radius: 10px;
  background:
    linear-gradient(rgb(173 147 239 / 0.04) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgb(173 147 239 / 0.04) 1px, transparent 1px) 0 0 / 20px 20px,
    rgb(8 7 19 / 0.9);
  box-shadow: inset 0 0 30px rgb(126 89 224 / 0.07);
}

.half-core-console > header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.half-core-console > header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.half-core-console > header span {
  color: #bfa5ff;
  font: 900 0.6rem/1 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.half-core-console > header b {
  color: #f1ebff;
  font: 800 0.78rem/1.2 Cinzel, Georgia, serif;
}

.half-core-console > header strong {
  flex: 0 0 auto;
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0 9px;
  border: 1px solid rgb(188 164 255 / 0.28);
  border-radius: 7px;
  color: #cdbfff;
  background: rgb(4 3 10 / 0.72);
  font: 900 0.59rem/1 "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.half-core-console > header strong.balanced {
  color: #bfffd0;
  border-color: rgb(158 255 189 / 0.48);
  background: rgb(12 48 26 / 0.55);
}

.half-core-console > header strong.unbalanced {
  color: #ffd4c4;
  border-color: rgb(255 156 124 / 0.52);
  background: rgb(83 24 17 / 0.5);
}

.half-charge-reserve {
  align-self: center;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 9px;
  background: rgb(22 14 4 / 0.46);
}

.half-charge-reserve > span {
  color: #c7ae65;
  font: 900 0.63rem/1 "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.half-charge-reserve > b {
  color: var(--gold);
  font: 1000 1.2rem/1 "JetBrains Mono", Consolas, monospace;
}

.half-charge-reserve > div,
.half-charge-bank > div {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 5px;
}

.half-power-crystal {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 92% 25%, 82% 84%, 50% 100%, 18% 84%, 8% 25%);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.45), transparent 34%),
    linear-gradient(145deg, #a888ff, #5733b0 62%, #26155c);
  filter: drop-shadow(0 0 5px rgb(168 136 255 / 0.26));
  font-style: normal;
}

.half-power-crystal span {
  color: transparent;
  font-size: 0;
}

.half-balance-machine {
  align-self: center;
  display: grid;
  gap: 4px;
  padding-top: 8px;
}

.half-balance-beam {
  position: relative;
  width: min(72%, 430px);
  height: 14px;
  margin: 0 auto 7px;
  border: 1px solid rgb(236 220 255 / 0.34);
  border-radius: 8px;
  background: linear-gradient(180deg, #b7a3e5, #5f4d89);
  box-shadow: 0 3px 0 #221839, 0 0 16px rgb(167 135 238 / 0.12);
  transform: rotate(var(--half-tilt));
  transform-origin: center;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.half-balance-beam::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 0;
  height: 0;
  border-right: 16px solid transparent;
  border-bottom: 33px solid #392855;
  border-left: 16px solid transparent;
  transform: translateX(-50%);
}

.half-balance-beam i {
  position: absolute;
  top: 11px;
  width: 1px;
  height: 34px;
  background: rgb(230 215 255 / 0.46);
}

.half-balance-beam i:first-child { left: 10%; }
.half-balance-beam i:last-child { right: 10%; }

.half-bank-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 21px;
}

.half-charge-bank {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 112px;
  padding: 9px;
  border: 1px solid rgb(188 164 255 / 0.26);
  border-radius: 8px;
  background: rgb(13 9 27 / 0.78);
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.half-charge-bank header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.half-charge-bank header span {
  color: #bda8ef;
  font: 900 0.62rem/1 "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.half-charge-bank header b {
  color: #f0e9ff;
  font: 1000 1.08rem/1 "JetBrains Mono", Consolas, monospace;
}

.half-charge-bank > div {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.half-balance-machine.balanced .half-charge-bank {
  border-color: rgb(158 255 189 / 0.46);
  background: rgb(11 42 23 / 0.42);
  box-shadow: 0 0 18px rgb(158 255 189 / 0.08);
}

.half-balance-machine.unbalanced .half-charge-bank {
  border-color: rgb(255 156 124 / 0.38);
  background: rgb(64 20 15 / 0.3);
}

.half-balance-machine.tested .half-power-crystal {
  animation: halfCrystalRead 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.half-power-action {
  display: grid;
}

.half-power-primary,
.half-revision-callout,
.half-power-sealed {
  min-height: 56px;
  display: grid;
  gap: 2px;
  place-content: center;
  padding: 9px 12px;
  border: 1px solid rgb(188 164 255 / 0.58);
  border-radius: 9px;
  color: #f1ebff;
  background: linear-gradient(180deg, rgb(126 89 224 / 0.34), rgb(36 20 85 / 0.96));
  box-shadow: 0 4px 0 #130a31, 0 0 20px rgb(126 89 224 / 0.13);
  text-align: center;
}

.half-power-primary {
  cursor: pointer;
  transition: transform 160ms var(--motion), filter 160ms ease, box-shadow 160ms ease;
}

.half-power-primary:not(:disabled):hover,
.half-power-primary:not(:disabled):focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.09);
}

.half-power-primary b,
.half-revision-callout b,
.half-power-sealed b {
  font-size: 0.8rem;
  font-weight: 1000;
}

.half-power-primary small,
.half-revision-callout small,
.half-power-sealed small {
  color: #c0afe4;
  font-size: 0.63rem;
}

.half-power-primary:disabled {
  color: #85799d;
  border-color: rgb(188 164 255 / 0.14);
  background: rgb(188 164 255 / 0.06);
  box-shadow: none;
  cursor: default;
}

.half-revision-callout,
.half-power-sealed {
  grid-template-columns: auto minmax(0, 1fr);
  place-content: initial;
  align-items: center;
  text-align: left;
}

.half-revision-callout {
  color: #ffe4d8;
  border-color: rgb(255 156 124 / 0.46);
  background: rgb(94 28 20 / 0.42);
  box-shadow: none;
}

.half-revision-callout > span,
.half-power-sealed > span {
  font-size: 1.35rem;
  font-weight: 1000;
}

.half-revision-callout > div,
.half-power-sealed > div {
  display: grid;
  gap: 2px;
}

.half-revision-callout small { color: #ffc4ad; }

.half-power-sealed {
  color: #06140b;
  border-color: rgb(158 255 189 / 0.66);
  background: linear-gradient(180deg, #d9ffe4, #9effbd 62%, #4cae73);
  box-shadow: 0 4px 0 #1d5d38, 0 0 24px rgb(158 255 189 / 0.18);
}

.half-power-sealed small { color: #164c2c; }

.half-trial-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.half-trial-ledger span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid rgb(188 164 255 / 0.17);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.22);
}

.half-trial-ledger span.match {
  border-color: rgb(158 255 189 / 0.4);
  background: rgb(16 55 30 / 0.34);
}

.half-trial-ledger span.revise {
  border-color: rgb(255 156 124 / 0.4);
  background: rgb(89 26 17 / 0.33);
}

.half-trial-ledger b {
  color: #f2edff;
  font-size: 0.68rem;
}

.half-trial-ledger small {
  color: #bca9dc;
  font-size: 0.6rem;
}

.half-power-facts div.complete {
  border-color: rgb(158 255 189 / 0.32);
  background: rgb(16 55 30 / 0.32);
}

@keyframes halfCrystalRead {
  0% { opacity: 0.45; transform: scale(0.72); filter: brightness(1.8) drop-shadow(0 0 10px rgb(168 136 255 / 0.5)); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1) drop-shadow(0 0 5px rgb(168 136 255 / 0.26)); }
}

@media (max-width: 720px) {
  .half-split-panel > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .half-split-choice {
    min-height: 54px;
  }

  .half-core-console {
    min-height: 0;
    padding: 8px;
  }

  .half-core-console > header {
    align-items: start;
  }

  .half-core-console > header strong {
    max-width: 46%;
    text-align: center;
  }

  .half-charge-reserve {
    grid-template-columns: auto auto;
  }

  .half-charge-reserve > div {
    grid-column: 1 / -1;
  }

  .half-charge-bank > div {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .half-trial-ledger {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .half-power-stage {
    padding: 8px;
  }

  .half-split-panel > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .half-bank-grid {
    gap: 7px;
  }

  .half-charge-bank {
    padding: 7px;
  }

  .half-charge-bank > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .half-split-choice,
  .half-balance-beam,
  .half-charge-bank,
  .half-power-primary,
  .half-balance-machine.tested .half-power-crystal {
    animation: none !important;
    transition: none !important;
  }
}

/* Week 2 · Material Shield controlled frost test */
/* Week 5 · Crystal Vault: predict, deal equal rounds, revise, and multiply back. */
.rune-tray.equal-stacks-playset { grid-template-columns: 1fr; }

.equal-stacks-stage {
  display: grid;
  gap: 11px;
  padding: 11px;
  border: 1px solid rgb(242 201 76 / 0.4);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 2%, rgb(242 201 76 / 0.18), transparent 30%),
    radial-gradient(circle at 88% 8%, rgb(85 183 217 / 0.14), transparent 28%),
    linear-gradient(155deg, #171006, #070a0f 68%, #040507);
  box-shadow: inset 0 1px 0 rgb(255 244 198 / 0.1), 0 14px 34px rgb(0 0 0 / 0.26);
}

.equal-stacks-stage[data-result="revise"] { border-color: rgb(255 156 124 / 0.58); }
.equal-stacks-stage[data-result="matched"],
.equal-stacks-stage[data-stage="sealed"] { border-color: rgb(158 255 189 / 0.5); }

.equal-stack-predict { display: grid; gap: 7px; }
.equal-stack-predict > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }

.equal-stack-prediction {
  min-width: 0;
  min-height: 62px;
  display: grid;
  gap: 2px;
  place-content: center;
  padding: 8px 7px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 8px;
  color: #fff1bd;
  background: rgb(11 9 5 / 0.76);
  cursor: pointer;
  text-align: center;
  transition: transform 160ms var(--motion), border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.equal-stack-prediction span { color: #fff4c6; font: 1000 1.2rem/1 "JetBrains Mono", Consolas, monospace; }
.equal-stack-prediction b { font-size: 0.68rem; }
.equal-stack-prediction small { color: #b9aa82; font-size: 0.56rem; }

.equal-stack-prediction:not(:disabled):hover,
.equal-stack-prediction:not(:disabled):focus-visible,
.equal-stack-prediction.selected {
  transform: translateY(-2px);
  border-color: rgb(85 183 217 / 0.72);
  background: radial-gradient(circle at 50% 12%, rgb(85 183 217 / 0.16), transparent 58%), #11161b;
  box-shadow: 0 0 18px rgb(85 183 217 / 0.1);
}

.equal-stack-prediction.selected span { color: #9ee8ff; text-shadow: 0 0 14px rgb(85 183 217 / 0.26); }
.equal-stack-prediction.tried { border-color: rgb(255 156 124 / 0.32); background: rgb(78 22 18 / 0.3); }
.equal-stack-prediction:disabled { cursor: default; opacity: 0.64; }

.equal-stack-console {
  display: grid;
  gap: 10px;
  min-height: 248px;
  padding: 11px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 10px;
  background:
    linear-gradient(rgb(242 201 76 / 0.035) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgb(85 183 217 / 0.035) 1px, transparent 1px) 0 0 / 20px 20px,
    rgb(7 8 11 / 0.92);
  box-shadow: inset 0 0 30px rgb(242 201 76 / 0.06);
}

.equal-stack-console > header { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.equal-stack-console > header > div { min-width: 0; display: grid; gap: 2px; }
.equal-stack-console > header span { color: #e4bd50; font: 900 0.6rem/1 "JetBrains Mono", Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.equal-stack-console > header b { color: #fff4c6; font: 800 0.8rem/1.2 Cinzel, Georgia, serif; }
.equal-stack-console > header strong { flex: 0 0 auto; color: #9ee8ff; font: 1000 1.05rem/1 "JetBrains Mono", Consolas, monospace; }
.equal-stack-console > header strong i { color: #9bb0b8; font-size: 0.56rem; font-style: normal; text-transform: uppercase; }

.equal-stack-reserve {
  min-height: 56px;
  display: grid;
  grid-template-columns: repeat(21, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgb(242 201 76 / 0.2);
  border-radius: 8px;
  background: rgb(42 28 5 / 0.3);
}

.equal-stack-reserve > span { grid-column: 1 / -1; color: #a99b74; font: 900 0.6rem/1 "JetBrains Mono", Consolas, monospace; text-align: center; text-transform: uppercase; }

.equal-stack-vessels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.equal-stack-vessel {
  min-width: 0;
  min-height: 118px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgb(85 183 217 / 0.24);
  border-radius: 8px 8px 16px 16px;
  background: linear-gradient(180deg, rgb(10 22 29 / 0.72), rgb(5 11 15 / 0.92));
  box-shadow: inset 0 -14px 22px rgb(85 183 217 / 0.04);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.equal-stack-vessel.full { border-color: rgb(158 255 189 / 0.46); background: linear-gradient(180deg, rgb(12 47 31 / 0.48), rgb(5 18 12 / 0.88)); }
.equal-stack-vessel header { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.equal-stack-vessel header span { color: #9edff4; font: 900 0.6rem/1 "JetBrains Mono", Consolas, monospace; text-transform: uppercase; }
.equal-stack-vessel header b { color: #effcff; font: 1000 1rem/1 "JetBrains Mono", Consolas, monospace; }
.equal-stack-vessel > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; align-items: end; }

.equal-stack-crystal {
  aspect-ratio: 1;
  min-width: 0;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 92% 25%, 82% 84%, 50% 100%, 18% 84%, 8% 25%);
  color: transparent;
  background: linear-gradient(145deg, rgb(255 255 255 / 0.52), transparent 34%), linear-gradient(145deg, #8fe9ff, #3187ad 62%, #12384e);
  filter: drop-shadow(0 0 5px rgb(85 183 217 / 0.3));
}

.equal-stack-crystal.reserve { background: linear-gradient(145deg, rgb(255 255 255 / 0.45), transparent 34%), linear-gradient(145deg, #ffe997, #c28b21 62%, #67430b); filter: drop-shadow(0 0 4px rgb(242 201 76 / 0.26)); }
.equal-stack-crystal span { font-size: 0; }
.equal-stack-crystal.recent { animation: equalStackDeal 420ms cubic-bezier(0.16, 1, 0.3, 1) both; }

.equal-stack-action { display: grid; }
.equal-stack-primary,
.equal-stack-revision,
.equal-stack-sealed {
  min-height: 56px;
  display: grid;
  gap: 2px;
  place-content: center;
  padding: 9px 12px;
  border: 1px solid rgb(242 201 76 / 0.58);
  border-radius: 9px;
  color: #fff4c6;
  background: linear-gradient(180deg, rgb(242 201 76 / 0.3), rgb(90 56 7 / 0.96));
  box-shadow: 0 4px 0 #241604, 0 0 20px rgb(242 201 76 / 0.12);
  text-align: center;
}

.equal-stack-primary { cursor: pointer; transition: transform 160ms var(--motion), filter 160ms ease, box-shadow 160ms ease; }
.equal-stack-primary:not(:disabled):hover,
.equal-stack-primary:not(:disabled):focus-visible { transform: translateY(-2px); filter: brightness(1.09); }
.equal-stack-primary b,
.equal-stack-revision b,
.equal-stack-sealed b { font-size: 0.8rem; font-weight: 1000; }
.equal-stack-primary small,
.equal-stack-revision small,
.equal-stack-sealed small { color: #cdbb8d; font-size: 0.63rem; }
.equal-stack-primary:disabled { color: #897d62; border-color: rgb(242 201 76 / 0.14); background: rgb(242 201 76 / 0.05); box-shadow: none; cursor: default; }

.equal-stack-revision,
.equal-stack-sealed { grid-template-columns: auto minmax(0, 1fr); place-content: initial; align-items: center; text-align: left; }
.equal-stack-revision { color: #ffe4d8; border-color: rgb(255 156 124 / 0.46); background: rgb(94 28 20 / 0.42); box-shadow: none; }
.equal-stack-revision > span,
.equal-stack-sealed > span { font-size: 1.35rem; font-weight: 1000; }
.equal-stack-revision > div,
.equal-stack-sealed > div { display: grid; gap: 2px; }
.equal-stack-revision small { color: #ffc4ad; }
.equal-stack-sealed { color: #06140b; border-color: rgb(158 255 189 / 0.66); background: linear-gradient(180deg, #d9ffe4, #9effbd 62%, #4cae73); box-shadow: 0 4px 0 #1d5d38, 0 0 24px rgb(158 255 189 / 0.18); }
.equal-stack-sealed small { color: #164c2c; }

.equal-stack-trials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.equal-stack-trials span { min-width: 0; display: grid; gap: 2px; padding: 8px 9px; border: 1px solid rgb(242 201 76 / 0.17); border-radius: 8px; background: rgb(0 0 0 / 0.22); }
.equal-stack-trials span.match { border-color: rgb(158 255 189 / 0.4); background: rgb(16 55 30 / 0.34); }
.equal-stack-trials span.revise { border-color: rgb(255 156 124 / 0.4); background: rgb(89 26 17 / 0.33); }
.equal-stack-trials b { color: #fff4c6; font-size: 0.68rem; }
.equal-stack-trials small { color: #bcae88; font-size: 0.6rem; }
.equal-stacks-facts div.complete { border-color: rgb(158 255 189 / 0.32); background: rgb(16 55 30 / 0.32); }

@keyframes equalStackDeal {
  0% { opacity: 0.35; transform: translateY(-14px) scale(0.62); filter: brightness(1.8) drop-shadow(0 0 10px rgb(85 183 217 / 0.55)); }
  70% { transform: translateY(2px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1) drop-shadow(0 0 5px rgb(85 183 217 / 0.3)); }
}

@media (max-width: 720px) {
  .equal-stack-prediction { min-height: 56px; }
  .equal-stack-console { min-height: 0; padding: 8px; }
  .equal-stack-reserve { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .equal-stack-vessels { gap: 6px; }
  .equal-stack-vessel { min-height: 104px; padding: 7px; }
  .equal-stack-vessel > div { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .equal-stack-trials { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .equal-stacks-stage { padding: 8px; }
  .equal-stack-console > header { align-items: start; }
  .equal-stack-console > header strong { max-width: 36%; text-align: right; }
  .equal-stack-vessel header { align-items: start; }
  .equal-stack-vessel header span { font-size: 0.52rem; }
}

@media (prefers-reduced-motion: reduce) {
  .equal-stack-prediction,
  .equal-stack-vessel,
  .equal-stack-primary,
  .equal-stack-crystal.recent { animation: none !important; transition: none !important; }
}

.alchemy-vials.material-shield-mode {
  display: block;
}

.material-shield-lab {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgb(147 226 255 / 0.28);
  border-radius: 10px;
  background:
    radial-gradient(circle at 14% 4%, rgb(113 206 255 / 0.2), transparent 34%),
    radial-gradient(circle at 88% 12%, rgb(216 244 255 / 0.12), transparent 28%),
    linear-gradient(160deg, #071827, #061016 58%, #05090d);
  box-shadow: inset 0 1px 0 rgb(239 251 255 / 0.12), 0 12px 32px rgb(0 8 16 / 0.22);
}

.material-prediction-panel {
  display: grid;
  gap: 8px;
}

.material-prediction-panel h4 {
  margin: 0;
  color: #f6fbff;
  font: 800 clamp(1rem, 2vw, 1.28rem)/1.16 Cinzel, Georgia, serif;
}

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

.material-prediction {
  min-height: 68px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgb(205 239 255 / 0.18);
  border-radius: 8px;
  color: #e7f7ff;
  background: linear-gradient(180deg, rgb(178 228 255 / 0.07), rgb(255 255 255 / 0.015)), #07121a;
  cursor: pointer;
  text-align: left;
  transition: transform 150ms var(--motion), border-color 150ms ease, background 150ms ease;
}

.material-prediction:not(:disabled):hover,
.material-prediction:not(:disabled):focus-visible {
  transform: translateY(-2px);
  border-color: rgb(147 226 255 / 0.62);
}

.material-prediction.selected {
  border-color: #f2c94c;
  background: radial-gradient(circle at 12% 32%, rgb(242 201 76 / 0.16), transparent 42%), #10130f;
  box-shadow: 0 0 0 1px rgb(242 201 76 / 0.18), 0 0 22px rgb(242 201 76 / 0.08);
}

.material-prediction:disabled {
  cursor: default;
  opacity: 0.66;
}

.material-prediction b,
.material-prediction small {
  min-width: 0;
  overflow-wrap: break-word;
}

.material-prediction b {
  color: #fff9df;
  font-size: 0.72rem;
  line-height: 1.1;
}

.material-prediction small {
  grid-column: 2;
  color: #a9cede;
  font-size: 0.62rem;
}

.material-swatch {
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22);
}

.material-swatch.wool { background: repeating-radial-gradient(circle at 30% 30%, #fff3cf 0 3px, #b99f72 4px 6px); }
.material-swatch.iron { background: linear-gradient(135deg, #e5edf1, #637786 46%, #c6d1d7 52%, #475965); }
.material-swatch.glass { background: radial-gradient(circle at 32% 28%, #fff, #78d6ed 22%, #24566d 72%); }
.material-swatch.wet { background: radial-gradient(circle at 30% 24%, #83d9e6 0 7%, transparent 8%), linear-gradient(145deg, #526873, #1c313a); }

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

.material-sample {
  position: relative;
  min-width: 0;
  min-height: 272px;
  display: grid;
  grid-template-rows: 76px auto auto 1fr;
  gap: 8px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgb(184 229 247 / 0.16);
  border-radius: 9px;
  background: linear-gradient(180deg, rgb(146 214 242 / 0.075), rgb(5 12 17 / 0.82));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 5px 0 rgb(2 7 10 / 0.7);
}

.material-sample.tested {
  border-color: rgb(126 212 247 / 0.42);
}

.material-sample.latest {
  animation: materialFrostResult 560ms cubic-bezier(0.18, 0.74, 0.26, 1) both;
}

.material-sample.best {
  border-color: rgb(158 255 189 / 0.72);
  box-shadow: 0 0 26px rgb(158 255 189 / 0.13), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.material-sample-art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(190 235 255 / 0.13);
  border-radius: 7px;
  background: radial-gradient(circle at 50% 54%, rgb(80 199 244 / 0.2), transparent 42%), rgb(3 13 20 / 0.72);
}

.material-sample-art::before,
.material-sample-art::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(189 235 255 / 0.42), transparent);
  transform: rotate(45deg);
}

.material-sample-art::after { transform: rotate(-45deg); }

.material-sample-art i {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 42px;
  clip-path: polygon(50% 0, 96% 28%, 80% 100%, 20% 100%, 4% 28%);
  background: linear-gradient(135deg, #fff6b5, #f0a43a 48%, #b7551d);
  box-shadow: 0 0 22px rgb(255 193 75 / 0.28);
}

.material-sample-art span {
  position: absolute;
  z-index: 1;
  width: 54px;
  height: 52px;
  border: 7px solid;
  border-radius: 46% 54% 42% 58%;
  opacity: 0.76;
}

.material-sample.wool .material-sample-art span { border-color: #decba3; filter: drop-shadow(0 0 5px rgb(255 242 207 / 0.24)); }
.material-sample.iron .material-sample-art span { border-color: #778c99; border-radius: 7px; transform: rotate(45deg); }
.material-sample.glass .material-sample-art span { border-color: rgb(104 215 244 / 0.66); border-width: 5px; border-radius: 50%; }
.material-sample.wet .material-sample-art span { border-color: #466872; border-radius: 44% 56% 48% 52%; box-shadow: 6px -8px 0 -5px #75d1dd; }

.material-sample.tested .material-sample-art em {
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, transparent 25%, rgb(199 242 255 / 0.2) 46%, transparent 62%);
  animation: materialFrostSweep 520ms ease-out both;
}

.material-sample-head {
  display: grid;
  gap: 2px;
}

.material-sample-head span {
  color: #86cde9;
  font: 800 0.59rem/1 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.material-sample-head b {
  color: #fff8df;
  font: 800 0.82rem/1.1 Cinzel, Georgia, serif;
  overflow-wrap: break-word;
}

.material-thermometer {
  display: grid;
  grid-template-columns: 8px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  align-items: center;
  min-height: 50px;
  padding: 7px;
  border: 1px solid rgb(185 230 249 / 0.14);
  border-radius: 7px;
  background: rgb(0 0 0 / 0.22);
}

.material-thermometer i {
  grid-row: 1 / span 2;
  align-self: end;
  width: 8px;
  height: max(8px, calc(var(--material-heat, 80%) * 0.42));
  max-height: 38px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff0a0, #ee7e34);
  box-shadow: 0 0 10px rgb(239 139 54 / 0.22);
  transition: height 420ms var(--motion);
}

.material-thermometer b {
  color: #fff1c7;
  font: 900 0.88rem/1 "JetBrains Mono", Consolas, monospace;
}

.material-thermometer small {
  color: #9bc9db;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.material-sample > button,
.material-check {
  min-height: 52px;
  align-self: end;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgb(130 215 248 / 0.44);
  border-radius: 8px;
  color: #e8f9ff;
  background: linear-gradient(180deg, rgb(76 168 208 / 0.18), rgb(7 35 49 / 0.92));
  cursor: pointer;
  text-align: center;
}

.material-sample > button:disabled,
.material-check:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.material-sample > button b,
.material-check b { font-size: 0.72rem; }
.material-sample > button small,
.material-check small { color: #abd2e1; font-size: 0.61rem; }

.material-sample > p {
  align-self: center;
  margin: 0;
  color: #cbeaf6;
  font-size: 0.68rem;
  line-height: 1.3;
}

.material-proof-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.42fr);
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid rgb(181 230 249 / 0.17);
  border-radius: 9px;
  background: rgb(2 10 15 / 0.58);
}

.material-proof-panel > div:first-child {
  display: grid;
  gap: 6px;
}

.material-proof-panel p {
  margin: 0;
  color: #d7eff7;
  font-size: 0.74rem;
  line-height: 1.35;
}

.material-check.revise {
  border-color: rgb(255 143 104 / 0.45);
  color: #ffd5c7;
}

.material-check.locked {
  cursor: default;
  opacity: 0.72;
}

.material-shield-lab[data-state="sealed"] .material-check {
  border-color: rgb(158 255 189 / 0.58);
  color: #baffca;
  background: linear-gradient(180deg, rgb(90 185 111 / 0.18), rgb(4 32 14 / 0.9));
}

.material-trial-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.material-trial-ledger span {
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid rgb(191 231 247 / 0.13);
  border-radius: 7px;
  background: rgb(255 255 255 / 0.025);
}

.material-trial-ledger span.match { border-color: rgb(158 255 189 / 0.4); }
.material-trial-ledger span.revise { border-color: rgb(255 143 104 / 0.38); }
.material-trial-ledger b { color: #fff6d8; font-size: 0.66rem; }
.material-trial-ledger small { color: #9fc8d8; font-size: 0.6rem; }

.material-frost-chamber {
  position: relative;
  min-height: 218px;
  overflow: hidden;
  border: 1px solid rgb(144 222 255 / 0.3);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 38%, rgb(120 217 255 / 0.26), transparent 25%),
    linear-gradient(180deg, #0a2940, #06131d 72%, #040b10);
  box-shadow: inset 0 1px 0 rgb(238 252 255 / 0.12);
}

.frost-chamber-runes i {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid rgb(202 242 255 / 0.52);
  transform: rotate(45deg);
  animation: materialFrostRune 2.8s ease-in-out infinite;
}

.frost-chamber-runes i:nth-child(1) { top: 28px; left: 16%; }
.frost-chamber-runes i:nth-child(2) { top: 54px; right: 18%; animation-delay: 420ms; }
.frost-chamber-runes i:nth-child(3) { top: 112px; left: 24%; animation-delay: 760ms; }
.frost-chamber-runes i:nth-child(4) { top: 118px; right: 26%; animation-delay: 1.1s; }

.frost-crystal {
  position: absolute;
  top: 28px;
  left: 50%;
  width: 58px;
  height: 76px;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 93% 24%, 82% 100%, 18% 100%, 7% 24%);
  background: linear-gradient(135deg, #fff9c9, #f0a848 48%, #b54f1b);
  box-shadow: 0 0 34px rgb(255 178 65 / 0.28);
}

.material-frost-chamber.testing .frost-crystal,
.material-frost-chamber.compare .frost-crystal {
  animation: materialCrystalChill 540ms ease-out both;
}

.material-frost-chamber.sealed .frost-crystal {
  background: linear-gradient(135deg, #efffd7, #7ee0a0 48%, #2c8060);
  box-shadow: 0 0 38px rgb(126 224 160 / 0.34);
}

.frost-stage-copy {
  position: absolute;
  top: 112px;
  right: 16px;
  left: 16px;
  display: grid;
  gap: 3px;
  text-align: center;
}

.frost-stage-copy span { color: #91dcf7; font: 900 0.61rem/1 "JetBrains Mono", Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.frost-stage-copy b { color: #fff7dc; font: 800 0.92rem/1.1 Cinzel, Georgia, serif; }
.frost-stage-copy small { color: #c4e6f2; font-size: 0.68rem; }

.material-test-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.material-test-metrics span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgb(159 220 245 / 0.15);
  border-radius: 8px;
  background: rgb(1 10 15 / 0.52);
}

.material-test-metrics small { color: #8fc9df; font-size: 0.58rem; text-transform: uppercase; }
.material-test-metrics b { color: #fff4d5; font: 800 0.72rem/1.1 "JetBrains Mono", Consolas, monospace; overflow-wrap: break-word; }

@keyframes materialFrostSweep {
  from { opacity: 0; transform: translateX(-90%); }
  45% { opacity: 1; }
  to { opacity: 0; transform: translateX(90%); }
}

@keyframes materialFrostResult {
  0% { transform: translateY(0); }
  30% { transform: translateY(-3px); box-shadow: 0 0 24px rgb(128 221 255 / 0.22); }
  100% { transform: translateY(0); }
}

@keyframes materialCrystalChill {
  0% { filter: brightness(1.2) saturate(1.1); }
  45% { filter: brightness(1.7) saturate(0.5) hue-rotate(115deg); }
  100% { filter: brightness(0.9) saturate(0.76); }
}

@keyframes materialFrostRune {
  0%, 100% { opacity: 0.3; transform: rotate(45deg) translateY(0); }
  50% { opacity: 0.88; transform: rotate(225deg) translateY(-6px); }
}

@media (max-width: 820px) {
  .material-predictions,
  .material-samples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-sample {
    min-height: 260px;
  }
}

@media (max-width: 620px) {
  .material-shield-lab {
    padding: 9px;
  }

  .material-prediction {
    min-height: 52px;
    padding: 7px;
  }

  .material-samples {
    gap: 7px;
  }

  .material-sample {
    min-height: 278px;
    padding: 8px;
  }

  .material-proof-panel {
    grid-template-columns: 1fr;
  }

  .material-check,
  .material-sample > button {
    min-height: 52px;
  }

  .material-trial-ledger,
  .material-test-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .material-prediction,
  .material-thermometer i,
  .material-sample.latest,
  .material-sample.tested .material-sample-art em,
  .frost-chamber-runes i,
  .material-frost-chamber .frost-crystal {
    animation: none !important;
    transition: none !important;
  }
}

/* Week 3 · Sunleaf Garden controlled growth chambers */
.alchemy-vials.sunleaf-growth-mode {
  display: block;
}

.science-alchemy-lab[data-mode="sunleaf-growth"] {
  border-color: rgb(155 224 116 / 0.34);
  background:
    radial-gradient(circle at 14% 8%, rgb(148 226 104 / 0.1), transparent 28rem),
    linear-gradient(150deg, rgb(9 24 12 / 0.95), rgb(8 9 6 / 0.98));
}

.sunleaf-growth-lab {
  display: grid;
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgb(158 222 113 / 0.28);
  border-radius: 10px;
  background:
    radial-gradient(circle at 14% 4%, rgb(196 238 98 / 0.17), transparent 34%),
    radial-gradient(circle at 88% 18%, rgb(62 161 92 / 0.16), transparent 31%),
    linear-gradient(155deg, #0b2315, #07130d 58%, #050b07);
  box-shadow: inset 0 1px 0 rgb(238 255 223 / 0.1), 0 12px 32px rgb(0 11 4 / 0.22);
}

.garden-prediction-panel {
  display: grid;
  gap: 8px;
}

.garden-prediction-panel h4 {
  margin: 0;
  color: #f8f4d9;
  font: 800 1.18rem/1.16 Cinzel, Georgia, serif;
  text-wrap: balance;
}

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

.garden-prediction {
  min-width: 0;
  min-height: 64px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgb(195 232 167 / 0.2);
  border-radius: 8px;
  color: #ecf7dc;
  background: linear-gradient(180deg, rgb(151 212 112 / 0.08), rgb(255 255 255 / 0.01)), #08130c;
  cursor: pointer;
  text-align: left;
  transition: transform 170ms var(--motion), border-color 170ms ease, background 170ms ease;
}

.garden-prediction span {
  grid-row: 1 / span 2;
  min-width: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 1px solid rgb(210 238 178 / 0.22);
  border-radius: 50%;
  color: #dff4a2;
  background: rgb(66 116 54 / 0.25);
  font: 900 0.6rem/1 "JetBrains Mono", Consolas, monospace;
  text-align: center;
}

.garden-prediction b,
.garden-prediction small {
  min-width: 0;
  overflow-wrap: break-word;
}

.garden-prediction b {
  color: #fff8dc;
  font-size: 0.71rem;
  line-height: 1.1;
}

.garden-prediction small {
  grid-column: 2;
  color: #b7d2a7;
  font-size: 0.61rem;
}

.garden-prediction:not(:disabled):hover,
.garden-prediction:not(:disabled):focus-visible {
  border-color: rgb(219 238 116 / 0.72);
  transform: translateY(-2px);
}

.garden-prediction:focus-visible,
.garden-chamber-card > button:focus-visible,
.garden-check:focus-visible {
  outline: 3px solid #e8ee83;
  outline-offset: 2px;
}

.garden-prediction.selected {
  border-color: #e6d864;
  background: radial-gradient(circle at 14% 36%, rgb(232 216 100 / 0.18), transparent 40%), #172010;
  box-shadow: 0 0 0 1px rgb(232 216 100 / 0.14), 0 0 22px rgb(192 224 96 / 0.08);
}

.garden-prediction.ruled-out {
  border-color: rgb(235 124 93 / 0.27);
  color: #cdb9a8;
  background: rgb(29 16 11 / 0.6);
}

.garden-prediction:disabled {
  cursor: default;
  opacity: 0.64;
}

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

.garden-chamber-card {
  position: relative;
  min-width: 0;
  min-height: 328px;
  display: grid;
  grid-template-rows: 118px auto auto minmax(72px, 1fr);
  gap: 8px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgb(181 224 151 / 0.17);
  border-radius: 9px;
  background: linear-gradient(180deg, rgb(137 195 94 / 0.07), rgb(4 12 7 / 0.86));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 5px 0 rgb(2 8 4 / 0.72);
}

.garden-chamber-card.tested {
  border-color: rgb(164 220 124 / 0.42);
}

.garden-chamber-card.latest {
  animation: sunleafTrialReveal 560ms cubic-bezier(0.18, 0.74, 0.26, 1) both;
}

.garden-chamber-card.proved {
  border-color: rgb(206 242 119 / 0.74);
  box-shadow: 0 0 28px rgb(184 229 92 / 0.14), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.garden-chamber-art {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(176 220 147 / 0.15);
  border-radius: 7px;
  background:
    linear-gradient(90deg, transparent 49%, rgb(208 241 169 / 0.07) 50%, transparent 51%),
    radial-gradient(circle at 50% 20%, rgb(225 233 120 / 0.22), transparent 42%),
    linear-gradient(180deg, #163a1e, #07130c);
}

.garden-chamber-art.dark {
  background: radial-gradient(circle at 50% 72%, rgb(65 112 73 / 0.15), transparent 38%), linear-gradient(180deg, #0a1510, #050907);
}

.garden-lamp {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 28px;
  height: 13px;
  border: 1px solid rgb(255 239 151 / 0.45);
  border-radius: 50% 50% 38% 38%;
  background: #f3dc6c;
  box-shadow: 0 7px 20px rgb(238 220 111 / 0.38);
  transform: translateX(-50%);
}

.garden-chamber-art.dark .garden-lamp {
  background: #313c31;
  box-shadow: none;
}

.garden-dome {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 94px;
  height: 83px;
  border: 2px solid rgb(198 239 191 / 0.28);
  border-bottom-color: rgb(128 183 117 / 0.48);
  border-radius: 50% 50% 14px 14px;
  background: linear-gradient(118deg, rgb(227 255 228 / 0.08), transparent 40%);
  transform: translateX(-50%);
}

.garden-stem {
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: 6px;
  height: 58px;
  border-radius: 8px;
  background: linear-gradient(90deg, #4d9e4f, #91c75d);
  transform: translateX(-50%);
}

.garden-chamber-art > span {
  position: absolute;
  width: 31px;
  height: 17px;
  border-radius: 85% 12% 75% 18%;
  background: linear-gradient(145deg, #9fd85e, #3f9848 62%, #1f5e38);
  box-shadow: inset 0 1px 0 rgb(226 255 175 / 0.22);
  transform-origin: 100% 50%;
}

.garden-chamber-art > span:nth-of-type(1) { top: 45px; left: calc(50% - 30px); transform: rotate(18deg); }
.garden-chamber-art > span:nth-of-type(2) { top: 58px; left: 50%; transform: scaleX(-1) rotate(22deg); }
.garden-chamber-art > span:nth-of-type(3) { top: 72px; left: calc(50% - 31px); transform: rotate(8deg); }
.garden-chamber-art > span:nth-of-type(4) { top: 84px; left: 50%; transform: scaleX(-1) rotate(12deg); }

.garden-chamber-art.no-co2 > span,
.garden-chamber-art.dark > span {
  filter: saturate(0.5) brightness(0.72);
}

.garden-chamber-art em {
  position: absolute;
  right: 8px;
  bottom: 7px;
  color: #bce8a6;
  font: 900 0.55rem/1 "JetBrains Mono", Consolas, monospace;
  font-style: normal;
}

.garden-chamber-art.no-co2 em::before { content: "CO₂ ×"; color: #ffb69a; }
.garden-chamber-art.dark em::before { content: "LIGHT ×"; color: #b8c1b4; }

.garden-chamber-card.tested .garden-chamber-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, transparent 24%, rgb(220 245 129 / 0.16) 48%, transparent 67%);
  animation: sunleafIndicatorSweep 520ms ease-out both;
}

.garden-chamber-head {
  display: grid;
  gap: 2px;
}

.garden-chamber-head span {
  color: #9cca7d;
  font: 800 0.58rem/1 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.garden-chamber-head b {
  color: #fff6d9;
  font: 800 0.86rem/1.1 Cinzel, Georgia, serif;
}

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

.garden-conditions span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 5px;
  border: 1px solid rgb(181 220 153 / 0.15);
  border-radius: 6px;
  background: rgb(0 0 0 / 0.18);
  text-align: center;
}

.garden-conditions b {
  color: #e7f4d8;
  font-size: 0.6rem;
}

.garden-conditions small {
  color: #a9cf91;
  font: 900 0.5rem/1 "JetBrains Mono", Consolas, monospace;
}

.garden-conditions span.off {
  border-color: rgb(231 128 99 / 0.25);
}

.garden-conditions span.off small {
  color: #f2ab91;
}

.garden-chamber-card > button,
.garden-check {
  min-height: 52px;
  align-self: stretch;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgb(183 225 135 / 0.44);
  border-radius: 8px;
  color: #f4f8d9;
  background: linear-gradient(180deg, rgb(142 190 78 / 0.2), rgb(16 48 24 / 0.92));
  cursor: pointer;
  text-align: center;
}

.garden-chamber-card > button:hover:not(:disabled),
.garden-check:hover:not(:disabled) {
  border-color: rgb(225 234 113 / 0.76);
  background: linear-gradient(180deg, rgb(174 218 91 / 0.26), rgb(19 58 28 / 0.94));
}

.garden-chamber-card > button:disabled,
.garden-check:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.garden-chamber-card > button b,
.garden-check b { font-size: 0.72rem; }
.garden-chamber-card > button small,
.garden-check small { color: #b9d5a8; font-size: 0.61rem; }

.garden-result {
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgb(173 218 137 / 0.2);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.2);
}

.garden-result span {
  color: #dbe983;
  font: 900 0.56rem/1 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.05em;
}

.garden-result b {
  color: #fff6d4;
  font-size: 0.73rem;
}

.garden-result small {
  color: #bcd5ae;
  font-size: 0.63rem;
  line-height: 1.3;
}

.garden-proof-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid rgb(180 224 146 / 0.17);
  border-radius: 9px;
  background: rgb(2 13 6 / 0.58);
}

.garden-proof-panel > div:first-child {
  display: grid;
  gap: 6px;
}

.garden-proof-panel p {
  margin: 0;
  color: #daebcf;
  font-size: 0.74rem;
  line-height: 1.35;
}

.garden-check.revise {
  border-color: rgb(237 137 101 / 0.45);
  color: #ffd2bd;
}

.garden-check.locked {
  cursor: default;
  opacity: 0.72;
}

.sunleaf-growth-lab[data-state="proved"] .garden-check {
  border-color: rgb(203 239 111 / 0.62);
  color: #efffc5;
  background: linear-gradient(180deg, rgb(147 199 79 / 0.24), rgb(8 42 18 / 0.92));
}

.garden-trial-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.garden-trial-ledger span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid rgb(188 223 161 / 0.14);
  border-radius: 7px;
  background: rgb(255 255 255 / 0.025);
}

.garden-trial-ledger span.match { border-color: rgb(204 240 114 / 0.42); }
.garden-trial-ledger span.revise { border-color: rgb(238 138 103 / 0.38); }
.garden-trial-ledger b { color: #fff4d2; font-size: 0.66rem; }
.garden-trial-ledger small { color: #b3d09f; font-size: 0.6rem; }

.sunleaf-observation-stage {
  position: relative;
  min-height: 278px;
  overflow: hidden;
  border: 1px solid rgb(174 222 137 / 0.3);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 24%, rgb(217 231 108 / 0.25), transparent 28%),
    linear-gradient(180deg, #173f22, #09180e 72%, #050b07);
  box-shadow: inset 0 1px 0 rgb(238 255 223 / 0.1);
}

.sunleaf-observation-stage.dark {
  background: radial-gradient(circle at 50% 34%, rgb(92 119 83 / 0.14), transparent 26%), linear-gradient(180deg, #101a13, #070d09 72%, #050705);
}

.sunleaf-rays i {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 2px;
  height: 96px;
  background: linear-gradient(180deg, rgb(249 232 115 / 0.7), transparent);
  transform-origin: 50% 0;
  animation: sunleafLightPulse 2.4s ease-in-out infinite;
}

.sunleaf-rays i:nth-child(1) { transform: rotate(-34deg); }
.sunleaf-rays i:nth-child(2) { transform: rotate(-13deg); animation-delay: 180ms; }
.sunleaf-rays i:nth-child(3) { transform: rotate(13deg); animation-delay: 360ms; }
.sunleaf-rays i:nth-child(4) { transform: rotate(34deg); animation-delay: 540ms; }
.sunleaf-observation-stage.dark .sunleaf-rays { display: none; }

.sunleaf-plant {
  position: absolute;
  top: 30px;
  left: 50%;
  width: 118px;
  height: 96px;
  transform: translateX(-50%);
}

.sunleaf-plant > i {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 7px;
  height: 72px;
  border-radius: 7px;
  background: linear-gradient(90deg, #448f49, #9ac95c);
  transform: translateX(-50%);
}

.sunleaf-plant > span {
  position: absolute;
  width: 42px;
  height: 23px;
  border-radius: 85% 12% 75% 18%;
  background: linear-gradient(145deg, #b1df62, #469d49 62%, #1e6336);
  box-shadow: 0 0 14px rgb(170 220 82 / 0.12);
  transform-origin: 100% 50%;
}

.sunleaf-plant > span:nth-of-type(1) { top: 20px; left: 17px; transform: rotate(20deg); }
.sunleaf-plant > span:nth-of-type(2) { top: 35px; right: 17px; transform: scaleX(-1) rotate(21deg); }
.sunleaf-plant > span:nth-of-type(3) { top: 52px; left: 14px; transform: rotate(8deg); }
.sunleaf-plant > span:nth-of-type(4) { top: 66px; right: 14px; transform: scaleX(-1) rotate(10deg); }

.sunleaf-observation-stage.testing .sunleaf-plant > span,
.sunleaf-observation-stage.compare .sunleaf-plant > span {
  animation: sunleafLeafResponse 520ms var(--motion) both;
}

.sunleaf-observation-stage.dark .sunleaf-plant > span {
  filter: saturate(0.45) brightness(0.72);
}

.sunleaf-stage-copy {
  position: absolute;
  top: 132px;
  right: 14px;
  left: 14px;
  display: grid;
  gap: 3px;
  text-align: center;
}

.sunleaf-stage-copy span { color: #b9d97c; font: 900 0.6rem/1 "JetBrains Mono", Consolas, monospace; letter-spacing: 0.07em; text-transform: uppercase; }
.sunleaf-stage-copy b { color: #fff7d5; font: 800 0.92rem/1.1 Cinzel, Georgia, serif; }
.sunleaf-stage-copy small { color: #cbe2bd; font-size: 0.68rem; }

.sunleaf-indicator {
  position: absolute;
  right: 12px;
  bottom: 73px;
  left: 12px;
  display: grid;
  grid-template-columns: repeat(4, 16px) minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid rgb(188 224 159 / 0.17);
  border-radius: 7px;
  background: rgb(2 10 4 / 0.64);
}

.sunleaf-observation-stage .alchemy-progress {
  bottom: 10px;
}

.sunleaf-indicator > i {
  width: 16px;
  height: 11px;
  border: 1px solid rgb(165 204 142 / 0.4);
  border-radius: 90% 10% 80% 18%;
  background: #52664d;
  transform: rotate(-8deg);
}

.sunleaf-indicator > i.signal {
  border-color: #7088cc;
  background: #293464;
  box-shadow: 0 0 9px rgb(94 111 211 / 0.42);
  animation: sunleafLeafSignal 480ms var(--motion) both;
}

.sunleaf-indicator b {
  min-width: 0;
  color: #edf1b3;
  font: 900 0.58rem/1 "JetBrains Mono", Consolas, monospace;
  text-align: right;
  overflow-wrap: break-word;
}

.sunleaf-control-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.sunleaf-control-strip span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgb(174 217 140 / 0.15);
  border-radius: 8px;
  background: rgb(2 12 6 / 0.52);
}

.sunleaf-control-strip small { color: #9fc887; font-size: 0.57rem; text-transform: uppercase; }
.sunleaf-control-strip b { color: #fff1cd; font: 800 0.71rem/1.1 "JetBrains Mono", Consolas, monospace; overflow-wrap: break-word; }

@keyframes sunleafTrialReveal {
  0% { transform: translateY(0); }
  34% { transform: translateY(-3px); box-shadow: 0 0 26px rgb(190 228 96 / 0.2); }
  100% { transform: translateY(0); }
}

@keyframes sunleafIndicatorSweep {
  from { opacity: 0; transform: translateX(-90%); }
  46% { opacity: 1; }
  to { opacity: 0; transform: translateX(90%); }
}

@keyframes sunleafLightPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

@keyframes sunleafLeafResponse {
  0% { filter: brightness(0.7) saturate(0.65); }
  55% { filter: brightness(1.35) saturate(1.2); }
  100% { filter: brightness(1) saturate(1); }
}

@keyframes sunleafLeafSignal {
  0% { transform: rotate(-8deg) scale(0.65); opacity: 0.4; }
  100% { transform: rotate(-8deg) scale(1); opacity: 1; }
}

@media (max-width: 820px) {
  .garden-chamber-grid {
    grid-template-columns: 1fr;
  }

  .garden-chamber-card {
    min-height: 244px;
    grid-template-columns: 148px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(64px, 1fr);
  }

  .garden-chamber-art {
    grid-row: 1 / span 3;
  }
}

@media (max-width: 620px) {
  .sunleaf-growth-lab {
    padding: 9px;
  }

  .garden-predictions,
  .garden-trial-ledger {
    grid-template-columns: 1fr;
  }

  .garden-prediction {
    min-height: 57px;
  }

  .garden-chamber-card {
    min-height: 332px;
    grid-template-columns: 1fr;
    grid-template-rows: 118px auto auto minmax(72px, 1fr);
    padding: 8px;
  }

  .garden-chamber-art {
    grid-row: auto;
  }

  .garden-proof-panel {
    grid-template-columns: 1fr;
  }

  .garden-chamber-card > button,
  .garden-check {
    min-height: 52px;
  }

  .sunleaf-control-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .garden-prediction,
  .garden-chamber-card.latest,
  .garden-chamber-card.tested .garden-chamber-art::after,
  .sunleaf-rays i,
  .sunleaf-observation-stage .sunleaf-plant > span,
  .sunleaf-indicator > i.signal {
    animation: none !important;
    transition: none !important;
  }
}

.math-builder-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

/* Rune Count Trial: the subtraction model is the encounter, not a pre-test worksheet. */
.rune-count-equation {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.38);
  border-radius: 10px;
  background:
    radial-gradient(circle at 14% 10%, rgb(242 201 76 / 0.2), transparent 38%),
    linear-gradient(145deg, rgb(29 18 7 / 0.96), rgb(5 4 3 / 0.98));
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 12px 28px rgb(0 0 0 / 0.2);
}

.rune-equation-label {
  color: #d9bd68;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rune-equation-line {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff4c6;
  font-family: "JetBrains Mono", Consolas, monospace;
}

.rune-equation-line strong {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.36);
  border-radius: 9px;
  background: rgb(0 0 0 / 0.28);
  font-size: 1.24rem;
  box-shadow: inset 0 0 14px rgb(242 201 76 / 0.08);
}

.rune-equation-line i {
  color: #d8c58f;
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 900;
}

.rune-equation-line .taken-number {
  border-color: rgb(255 156 124 / 0.52);
  color: #ffd2bd;
  background: rgb(86 29 16 / 0.5);
}

.rune-equation-line .stayed-number {
  border-color: rgb(158 255 189 / 0.48);
  color: #c9ffd8;
  background: rgb(15 55 28 / 0.5);
}

.rune-count-equation p {
  max-width: 68ch;
  margin: 0;
  color: #ead9a5;
  font-size: 0.78rem;
  line-height: 1.35;
}

.rune-count-equation em {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.08);
}

.rune-count-equation em::before {
  content: "";
  display: block;
  width: var(--math-proof-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d96b2b, #f2c94c 58%, #9effbd);
  box-shadow: 0 0 16px rgb(242 201 76 / 0.28);
  transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rune-count-equation[data-state="ready"],
.rune-count-equation[data-state="complete"] {
  border-color: rgb(158 255 189 / 0.58);
}

.rune-count-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.rune-count-facts article {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.2);
}

.rune-count-facts span,
.rune-count-facts small {
  color: #c8b98b;
  font-size: 0.6rem;
}

.rune-count-facts span {
  font-weight: 900;
  text-transform: uppercase;
}

.rune-count-facts b {
  color: #fff4c6;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1rem;
}

.rune-count-facts article.complete {
  border-color: rgb(158 255 189 / 0.34);
  background: rgb(12 43 22 / 0.46);
}

.rune-tray.rune-count-playset {
  display: block;
}

.rune-chest-closed {
  min-height: 190px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgb(242 201 76 / 0.46);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgb(4 3 2 / 0.32), rgb(4 3 2 / 0.82)),
    url("/stem-rover-lab/assets/domain-math-rune-chamber.webp") center 42% / cover;
  box-shadow: inset 0 0 34px rgb(242 201 76 / 0.1), 0 16px 30px rgb(0 0 0 / 0.24);
}

.rune-chest-sigil {
  width: 64px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.62);
  border-radius: 50%;
  color: #fff4c6;
  background: rgb(22 13 4 / 0.88);
  box-shadow: 0 0 30px rgb(242 201 76 / 0.28), inset 0 0 18px rgb(242 201 76 / 0.18);
  font-size: 1.8rem;
  animation: runeSealBreathe 2.2s ease-in-out infinite;
}

.rune-chest-closed b,
.rune-chest-closed p {
  margin: 0;
}

.rune-chest-closed b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.05rem;
}

.rune-chest-closed p {
  margin-top: 5px;
  color: #e1d2a8;
  font-size: 0.76rem;
  line-height: 1.4;
}

.rune-chest-closed button,
.seal-rune-proof {
  min-height: 46px;
  padding: 9px 14px;
  border: 1px solid #f2c94c;
  border-radius: 9px;
  color: #160f05;
  background: linear-gradient(180deg, #ffe78f, #d59c24);
  box-shadow: 0 5px 0 #704712, 0 12px 24px rgb(0 0 0 / 0.26);
  cursor: pointer;
  font-weight: 1000;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), filter 180ms ease, box-shadow 180ms ease;
}

.rune-chest-closed button:hover,
.rune-chest-closed button:focus-visible,
.seal-rune-proof:hover,
.seal-rune-proof:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 7px 0 #704712, 0 15px 28px rgb(0 0 0 / 0.3), 0 0 20px rgb(242 201 76 / 0.18);
}

.rune-count-chamber {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 64px minmax(0, 0.8fr);
  gap: 10px;
  align-items: stretch;
  padding: 11px;
  border: 1px solid rgb(242 201 76 / 0.3);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgb(5 4 3 / 0.3), rgb(5 4 3 / 0.88)),
    url("/stem-rover-lab/assets/domain-math-rune-chamber.webp") center / cover;
  animation: runeChamberReveal 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.moon-chest,
.goblin-pouch {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.26);
  border-radius: 10px;
  background: rgb(8 5 2 / 0.76);
  box-shadow: inset 0 0 24px rgb(242 201 76 / 0.06);
}

.goblin-pouch {
  border-color: rgb(217 107 43 / 0.42);
  background: rgb(41 15 7 / 0.78);
  box-shadow: inset 0 0 24px rgb(217 107 43 / 0.08);
}

.moon-chest header,
.goblin-pouch header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: center;
}

.moon-chest header span,
.goblin-pouch header span {
  color: #d9bd68;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.moon-chest header b,
.goblin-pouch header b {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #fff4c6;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1.25rem;
}

.goblin-pouch header b {
  color: #ffd0b6;
}

.goblin-pouch header b i {
  color: #c99374;
  font-size: 0.68rem;
  font-style: normal;
}

.moon-chest header small,
.goblin-pouch header small {
  color: #c8b98b;
  font-size: 0.62rem;
}

.rune-count-gems {
  min-height: 120px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
}

.rune-count-gems.pouch {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rune-count-gem {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.58);
  border-radius: 50% 50% 42% 58%;
  color: #2a1803;
  background: radial-gradient(circle at 32% 24%, #fff8ca, #f2c94c 34%, #9c5e13 72%, #3c1f05);
  box-shadow: 0 4px 0 #2a1604, 0 0 12px rgb(242 201 76 / 0.2);
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), filter 180ms ease, box-shadow 180ms ease;
}

.rune-count-gem span {
  font-size: 0.8rem;
  line-height: 1;
}

.rune-count-gem b {
  position: absolute;
  right: 1px;
  bottom: -2px;
  min-width: 16px;
  min-height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 246 215 / 0.46);
  border-radius: 50%;
  color: #fff4c6;
  background: #2c1906;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.45rem;
}

.rune-count-gem:hover,
.rune-count-gem:focus-visible {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.12);
  box-shadow: 0 6px 0 #2a1604, 0 0 20px rgb(242 201 76 / 0.38);
}

.rune-count-gem.moved {
  border-color: rgb(255 156 124 / 0.7);
  color: #3b0e07;
  background: radial-gradient(circle at 32% 24%, #ffe4d4, #d96b2b 38%, #7c2516 74%, #2b0b06);
  box-shadow: 0 4px 0 #2a0904, 0 0 12px rgb(217 107 43 / 0.24);
}

.rune-count-gem.moved b {
  background: #5b1c10;
}

.rune-count-gem.departing {
  animation: runeGemArriveFromChest 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.rune-count-gem.returning {
  animation: runeGemReturnToChest 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.rune-count-gem:disabled {
  cursor: default;
}

.rune-count-gem:disabled:hover {
  transform: none;
  filter: none;
}

.rune-transfer {
  display: grid;
  place-content: center;
  gap: 7px;
  color: #f0c65b;
  text-align: center;
}

.rune-transfer i {
  position: relative;
  width: 42px;
  height: 2px;
  display: block;
  background: currentColor;
  box-shadow: 0 0 12px rgb(242 201 76 / 0.4);
}

.rune-transfer i::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.rune-transfer span {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.55rem;
  font-weight: 900;
  text-transform: uppercase;
}

.rune-count-action {
  grid-column: 1 / -1;
  min-height: 58px;
  display: grid;
  place-items: center;
}

.rune-transfer-instruction {
  margin: 0;
  color: #e6d6aa;
  font-size: 0.74rem;
  line-height: 1.35;
  text-align: center;
}

.rune-transfer-instruction b {
  display: block;
  margin-bottom: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.94rem;
}

.seal-rune-proof {
  min-width: min(100%, 310px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1px 10px;
  text-align: left;
  animation: proofSealReady 1.4s ease-in-out infinite;
}

.seal-rune-proof span {
  grid-row: 1 / span 2;
  align-self: center;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1.4rem;
}

.seal-rune-proof b,
.seal-rune-proof small {
  min-width: 0;
}

.seal-rune-proof small {
  color: #55360d;
  font-size: 0.62rem;
}

.rune-proof-sealed {
  width: min(100%, 330px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid rgb(158 255 189 / 0.56);
  border-radius: 10px;
  color: #c9ffd8;
  background: rgb(10 45 23 / 0.78);
  box-shadow: 0 0 26px rgb(158 255 189 / 0.14), inset 0 1px 0 rgb(255 255 255 / 0.08);
  animation: proofSealLand 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.rune-proof-sealed span {
  grid-row: 1 / span 2;
  font-size: 1.5rem;
}

.rune-proof-sealed b {
  color: #effff2;
  font-family: Cinzel, Georgia, serif;
}

.rune-proof-sealed small {
  color: #b7e8c4;
  font-size: 0.66rem;
}

.rune-empty {
  grid-column: 1 / -1;
  align-self: center;
  color: #bba982;
  font-size: 0.66rem;
  line-height: 1.35;
  text-align: center;
}

.rune-count-chamber[data-stage="ready"] .goblin-pouch,
.rune-count-chamber[data-stage="sealed"] .moon-chest {
  border-color: rgb(158 255 189 / 0.5);
  box-shadow: inset 0 0 28px rgb(158 255 189 / 0.09), 0 0 22px rgb(158 255 189 / 0.08);
}

@keyframes runeSealBreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 24px rgb(242 201 76 / 0.2), inset 0 0 18px rgb(242 201 76 / 0.18); }
  50% { transform: scale(1.04); box-shadow: 0 0 38px rgb(242 201 76 / 0.38), inset 0 0 22px rgb(242 201 76 / 0.24); }
}

@keyframes runeChamberReveal {
  from { opacity: 0; transform: translateY(8px) scale(0.985); filter: brightness(0.78); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes runeGemArriveFromChest {
  from { opacity: 0; transform: translateX(-34px) scale(1.18) rotate(-16deg); filter: brightness(1.5); }
  to { opacity: 1; transform: translateX(0) scale(1) rotate(0); filter: brightness(1); }
}

@keyframes runeGemReturnToChest {
  from { opacity: 0; transform: translateX(34px) scale(1.12) rotate(14deg); }
  to { opacity: 1; transform: translateX(0) scale(1) rotate(0); }
}

@keyframes proofSealReady {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

@keyframes proofSealLand {
  from { opacity: 0; transform: scale(0.94); filter: brightness(1.5); }
  to { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@media (max-width: 680px) {
  .rune-chest-closed {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .rune-chest-closed button {
    grid-column: 1 / -1;
  }

  .rune-count-chamber {
    grid-template-columns: 1fr;
  }

  .rune-transfer {
    min-height: 32px;
    transform: rotate(90deg);
  }

  .rune-count-gems,
  .rune-count-gems.pouch {
    min-height: 104px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .rune-count-action {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rune-chest-sigil,
  .rune-count-chamber,
  .rune-count-gem.departing,
  .rune-count-gem.returning,
  .seal-rune-proof,
  .rune-proof-sealed {
    animation: none;
  }

  .rune-count-equation em::before,
  .rune-count-gem,
  .rune-chest-closed button,
  .seal-rune-proof {
    transition-duration: 1ms;
  }
}

.math-reset-button {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid rgb(242 201 76 / 0.46);
  border-radius: 8px;
  color: var(--gold-soft);
  background: #090604;
  cursor: pointer;
  font-weight: 900;
}

.science-alchemy-lab {
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid rgb(77 139 87 / 0.48);
  border-radius: 8px;
  background:
    radial-gradient(circle at 15% 20%, rgb(77 139 87 / 0.18), transparent 42%),
    radial-gradient(circle at 86% 18%, rgb(85 183 217 / 0.12), transparent 38%),
    linear-gradient(145deg, rgb(5 18 12 / 0.96), rgb(8 6 4 / 0.96));
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.science-alchemy-lab.hidden {
  display: none;
}

.alchemy-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px;
  gap: 10px;
  align-items: center;
}

.alchemy-head p,
.alchemy-controls p {
  margin: 0;
  color: #d9ead0;
  line-height: 1.25;
}

.alchemy-head strong {
  min-height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(158 255 189 / 0.42);
  border-radius: 8px;
  color: #9effbd;
  background: #041008;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.82rem;
}

.alchemy-vials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.alchemy-vial {
  min-height: 132px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgb(255 246 215 / 0.14);
  border-radius: 8px;
  color: #e9dfb7;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(255 246 215 / 0.018)),
    #070604;
  box-shadow: 0 4px 0 #050302, inset 0 1px 0 rgb(255 246 215 / 0.08);
  cursor: pointer;
  text-align: left;
  transition: transform 180ms var(--motion), border-color 180ms ease, box-shadow 180ms ease;
}

.alchemy-vial:hover,
.alchemy-vial:focus-visible {
  transform: translateY(-2px);
  border-color: rgb(158 255 189 / 0.44);
}

.alchemy-vial b,
.alchemy-vial small,
.alchemy-vial .alchemy-state-chip {
  display: block;
}

.alchemy-vial b {
  color: #fff8d8;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.96rem;
  line-height: 1.12;
}

.alchemy-vial .alchemy-clue {
  min-height: 34px;
  color: #d9ead0;
  font-size: 0.72rem;
  line-height: 1.25;
}

.alchemy-vial .alchemy-evidence-tag {
  justify-self: start;
  padding: 3px 7px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 6px;
  color: #d7cda8;
  background: rgb(0 0 0 / 0.18);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.alchemy-vial .alchemy-state-chip {
  justify-self: start;
  padding: 4px 8px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 999px;
  color: #b9aa82;
  background: rgb(0 0 0 / 0.22);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.alchemy-vial .alchemy-cycle-note {
  color: #9d8f72;
  font-size: 0.65rem;
  line-height: 1.25;
}

.alchemy-vial.physical {
  border-color: rgb(85 183 217 / 0.5);
  background:
    radial-gradient(circle at 14% 18%, rgb(85 183 217 / 0.18), transparent 46%),
    #071015;
}

.alchemy-vial.physical .alchemy-state-chip {
  color: #9ee8ff;
  border-color: rgb(85 183 217 / 0.44);
}

.alchemy-vial.chemical {
  border-color: rgb(158 255 189 / 0.52);
  background:
    radial-gradient(circle at 14% 18%, rgb(158 255 189 / 0.18), transparent 46%),
    #071208;
}

.alchemy-vial.chemical .alchemy-state-chip {
  color: #9effbd;
  border-color: rgb(158 255 189 / 0.44);
}

.science-alchemy-lab.solved {
  border-color: rgb(158 255 189 / 0.7);
  box-shadow: 0 0 28px rgb(158 255 189 / 0.13), inset 0 1px 0 rgb(255 246 215 / 0.14);
}

.science-alchemy-lab.solved .alchemy-head strong {
  color: #081008;
  background: #9effbd;
  border-color: rgb(158 255 189 / 0.72);
}

.alchemy-reaction-chamber {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.alchemy-reaction-visual {
  position: relative;
  min-height: 168px;
  overflow: hidden;
  border: 1px solid rgb(158 255 189 / 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 35%, rgb(158 255 189 / 0.14), transparent 34%),
    linear-gradient(180deg, rgb(5 24 15 / 0.9), rgb(5 8 6 / 0.96));
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.alchemy-reaction-visual::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px dashed rgb(158 255 189 / 0.16);
  border-radius: 8px;
}

.alchemy-flask {
  position: absolute;
  top: 28px;
  left: 50%;
  width: 78px;
  height: 82px;
  transform: translateX(-50%);
  border: 1px solid rgb(158 255 189 / 0.38);
  border-radius: 8px 8px 28px 28px;
  background:
    linear-gradient(180deg, transparent 0 38%, rgb(85 183 217 / 0.42) 39% 100%),
    rgb(255 255 255 / 0.04);
  box-shadow: 0 0 24px rgb(85 183 217 / 0.14), inset 0 1px 0 rgb(255 255 255 / 0.14);
}

.alchemy-flask::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 24px;
  width: 28px;
  height: 28px;
  border: 1px solid rgb(158 255 189 / 0.32);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.alchemy-flask i,
.alchemy-flask em {
  position: absolute;
  border-radius: 50%;
  background: rgb(158 255 189 / 0.72);
  box-shadow: 0 0 14px rgb(158 255 189 / 0.2);
  animation: alchemyBubbleRise 2.6s ease-in-out infinite;
}

.alchemy-flask i {
  width: 9px;
  height: 9px;
  left: 20px;
  bottom: 18px;
}

.alchemy-flask em {
  width: 12px;
  height: 12px;
  right: 18px;
  bottom: 26px;
  animation-delay: 520ms;
}

.alchemy-reaction-visual.complete .alchemy-flask {
  background:
    linear-gradient(180deg, transparent 0 34%, rgb(158 255 189 / 0.54) 35% 100%),
    rgb(255 255 255 / 0.04);
  box-shadow: 0 0 28px rgb(158 255 189 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.14);
}

.alchemy-reaction-visual.testing .alchemy-flask {
  background:
    linear-gradient(180deg, transparent 0 36%, rgb(242 201 76 / 0.5) 37% 100%),
    rgb(255 255 255 / 0.04);
}

.alchemy-bubbles i {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid rgb(158 255 189 / 0.42);
  border-radius: 50%;
  background: rgb(158 255 189 / 0.12);
  animation: alchemyBubbleRise 3s ease-in-out infinite;
}

.alchemy-bubbles i:nth-child(1) { top: 38px; left: 22%; }
.alchemy-bubbles i:nth-child(2) { top: 24px; right: 24%; animation-delay: 360ms; }
.alchemy-bubbles i:nth-child(3) { top: 72px; right: 18%; animation-delay: 760ms; }

.alchemy-progress {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgb(158 255 189 / 0.2);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.26);
}

.alchemy-progress span,
.alchemy-reaction-ledger span {
  color: #bfe8c9;
  font-size: 0.63rem;
  font-weight: 900;
  text-transform: uppercase;
}

.alchemy-progress b {
  color: #fff8d8;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.82rem;
}

.alchemy-progress i {
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.08);
}

.alchemy-progress i::before {
  content: "";
  display: block;
  width: var(--alchemy-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #55b7d9, #9effbd);
  box-shadow: 0 0 16px rgb(158 255 189 / 0.2);
  transition: width 220ms ease;
}

.alchemy-reaction-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.alchemy-reaction-ledger div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid rgb(158 255 189 / 0.16);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.2);
}

.alchemy-reaction-ledger div.wide {
  grid-column: 1 / -1;
}

.alchemy-reaction-ledger div.result {
  border-color: rgb(242 201 76 / 0.3);
  background:
    radial-gradient(circle at 14% 22%, rgb(242 201 76 / 0.1), transparent 42%),
    rgb(0 0 0 / 0.22);
}

.alchemy-reaction-ledger b {
  color: #fff3cf;
  font-size: 0.78rem;
  line-height: 1.18;
  overflow-wrap: break-word;
}

.alchemy-reaction-ledger small {
  color: #d9ead0;
  font-size: 0.68rem;
  line-height: 1.25;
}

@keyframes alchemyBubbleRise {
  0%, 100% { opacity: 0.58; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-9px) scale(1.08); }
}

.alchemy-ledger {
  display: grid;
  gap: 8px;
}

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

.alchemy-rule-card {
  min-height: 74px;
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.2);
}

.alchemy-rule-card b {
  color: #fff8d8;
  font-size: 0.75rem;
}

.alchemy-rule-card small {
  color: #d7cda8;
  line-height: 1.25;
}

.alchemy-ledger-list {
  display: grid;
  gap: 6px;
}

.alchemy-ledger-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.18);
}

.alchemy-ledger-number {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 246 215 / 0.16);
  border-radius: 999px;
  color: #fff8d8;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
}

.alchemy-ledger-evidence {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.alchemy-ledger-evidence b {
  color: #fff8d8;
  font-size: 0.76rem;
}

.alchemy-ledger-evidence small {
  color: #c9bd96;
  line-height: 1.22;
}

.alchemy-ledger-status {
  padding: 4px 8px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 999px;
  color: #b9aa82;
  background: rgb(0 0 0 / 0.2);
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.alchemy-ledger-row.physical .alchemy-ledger-status {
  color: #9ee8ff;
  border-color: rgb(85 183 217 / 0.4);
}

.alchemy-ledger-row.chemical .alchemy-ledger-status {
  color: #9effbd;
  border-color: rgb(158 255 189 / 0.4);
}

.alchemy-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.alchemy-reset-button {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid rgb(158 255 189 / 0.36);
  border-radius: 8px;
  color: #d8ffe1;
  background: #041008;
  cursor: pointer;
  font-weight: 900;
}

.engineering-forge-lab,
.ai-oracle-lab {
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
  padding: 12px;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.engineering-forge-lab.hidden,
.ai-oracle-lab.hidden {
  display: none;
}

.engineering-forge-lab {
  border: 1px solid rgb(255 179 108 / 0.48);
  background:
    radial-gradient(circle at 14% 20%, rgb(217 107 43 / 0.18), transparent 42%),
    radial-gradient(circle at 86% 18%, rgb(242 201 76 / 0.12), transparent 38%),
    linear-gradient(145deg, rgb(23 12 5 / 0.96), rgb(8 6 4 / 0.96));
}

.ai-oracle-lab {
  border: 1px solid rgb(185 173 255 / 0.48);
  background:
    radial-gradient(circle at 15% 20%, rgb(109 91 208 / 0.2), transparent 42%),
    radial-gradient(circle at 86% 18%, rgb(85 183 217 / 0.14), transparent 38%),
    linear-gradient(145deg, rgb(10 7 20 / 0.96), rgb(8 6 4 / 0.96));
}

.forge-lab-head,
.oracle-lab-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 10px;
  align-items: center;
}

.forge-lab-head p,
.forge-controls p,
.oracle-lab-head p,
.oracle-controls p {
  margin: 0;
  line-height: 1.25;
}

.forge-lab-head p,
.forge-controls p {
  color: #f2d0ad;
}

.oracle-lab-head p,
.oracle-controls p {
  color: #dad6ff;
}

.forge-lab-head strong,
.oracle-lab-head strong {
  min-height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.forge-lab-head strong {
  border: 1px solid rgb(255 179 108 / 0.54);
  color: #ffcf9a;
  background: #100804;
}

.oracle-lab-head strong {
  border: 1px solid rgb(185 173 255 / 0.54);
  color: #d8d2ff;
  background: #080711;
}

.forge-choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.oracle-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.forge-choice,
.oracle-tile {
  min-width: 0;
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  color: #f6e9c9;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(255 246 215 / 0.018)),
    #070604;
  box-shadow: 0 4px 0 #050302, inset 0 1px 0 rgb(255 246 215 / 0.08);
  cursor: pointer;
  text-align: left;
  transition: transform 180ms var(--motion), border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.forge-choice {
  border: 1px solid rgb(255 179 108 / 0.18);
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: stretch;
  align-items: center;
  min-height: 70px;
}

.oracle-tile {
  border: 1px solid rgb(185 173 255 / 0.18);
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: stretch;
  align-items: center;
  min-height: 70px;
}

.forge-choice:hover,
.forge-choice:focus-visible,
.oracle-tile:hover,
.oracle-tile:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.forge-choice:hover,
.forge-choice:focus-visible {
  border-color: rgb(255 179 108 / 0.52);
}

.oracle-tile:hover,
.oracle-tile:focus-visible {
  border-color: rgb(185 173 255 / 0.52);
}

.forge-choice b,
.forge-choice small,
.forge-choice span,
.oracle-tile b,
.oracle-tile small,
.oracle-tile span {
  display: block;
  min-width: 0;
}

.forge-choice b,
.oracle-tile b {
  color: #fff8d8;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.1;
  overflow-wrap: break-word;
}

.forge-choice small {
  grid-column: 1;
  color: #ffd9b4;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
}

.oracle-tile small {
  grid-column: 1;
  color: #d8d2ff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
}

.forge-choice span,
.oracle-tile span {
  justify-self: start;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgb(0 0 0 / 0.24);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.forge-choice span {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  border: 1px solid rgb(255 179 108 / 0.24);
  color: #ffcf9a;
}

.oracle-tile span {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  border: 1px solid rgb(185 173 255 / 0.24);
  color: #d8d2ff;
}

.forge-choice.selected {
  border-color: rgb(255 179 108 / 0.66);
  background:
    radial-gradient(circle at 18% 18%, rgb(217 107 43 / 0.22), transparent 48%),
    #110905;
  box-shadow: 0 4px 0 #050302, 0 0 18px rgb(217 107 43 / 0.18), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.forge-choice.selected.failed {
  border-color: rgb(255 122 94 / 0.72);
  box-shadow: 0 4px 0 #050302, 0 0 18px rgb(255 122 94 / 0.18), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.forge-choice.selected.passed {
  border-color: rgb(158 255 189 / 0.72);
  box-shadow: 0 4px 0 #050302, 0 0 18px rgb(158 255 189 / 0.18), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.forge-test-rig {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

.forge-rig-stage {
  position: relative;
  min-height: 212px;
  overflow: hidden;
  border: 1px solid rgb(255 179 108 / 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 24%, rgb(242 201 76 / 0.15), transparent 32%),
    linear-gradient(180deg, rgb(34 16 8 / 0.86), rgb(8 5 3 / 0.96));
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.forge-rig-stage::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgb(255 179 108 / 0.16);
  border-radius: 8px;
}

.forge-stage-label {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid rgb(255 179 108 / 0.22);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.32);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.forge-stage-label span,
.forge-stress-meter span,
.forge-design-board span {
  color: #c99669;
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.forge-stage-label b,
.forge-stress-meter b {
  color: #fff3cf;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.76rem;
}

.forge-load-crystal {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 46px;
  height: 46px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid rgb(242 201 76 / 0.5);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgb(255 246 180 / 0.72), rgb(217 107 43 / 0.6)),
    #271006;
  box-shadow: 0 0 24px rgb(242 201 76 / 0.2);
  animation: forgeCrystalPulse 2.4s ease-in-out infinite;
}

.forge-load-crystal i {
  position: absolute;
  inset: 10px;
  border: 1px solid rgb(8 6 4 / 0.42);
  border-radius: 5px;
}

.forge-load-path {
  position: absolute;
  top: 63px;
  right: 14%;
  left: 14%;
  height: 58px;
  pointer-events: none;
}

.forge-load-path i {
  position: absolute;
  left: 50%;
  width: 2px;
  height: 72px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(242 201 76 / 0.78), transparent);
  transform-origin: top center;
  opacity: 0.58;
}

.forge-load-path i:nth-child(1) { transform: translateX(-50%) rotate(0deg); }
.forge-load-path i:nth-child(2) { transform: translateX(-50%) rotate(28deg); }
.forge-load-path i:nth-child(3) { transform: translateX(-50%) rotate(-28deg); }

.forge-load-path.failed i {
  background: linear-gradient(180deg, rgb(255 122 94 / 0.78), transparent);
  opacity: 0.42;
}

.forge-load-path.stable i {
  background: linear-gradient(180deg, rgb(158 255 189 / 0.82), transparent);
  opacity: 0.78;
}

.forge-bridge-visual {
  position: absolute;
  right: 10%;
  bottom: 58px;
  left: 10%;
  height: 72px;
  transform-origin: center bottom;
}

.forge-bridge-visual.failed {
  animation: forgeBridgeFail 520ms ease both;
}

.forge-bridge-visual.stable {
  animation: forgeBridgeHold 900ms ease both;
}

.forge-support,
.forge-beam {
  position: absolute;
  display: block;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffdc9c, #9b4f24);
  box-shadow: 0 0 14px rgb(217 107 43 / 0.2), inset 0 1px 0 rgb(255 246 215 / 0.35);
}

.forge-support {
  bottom: 0;
  width: 18px;
  height: 50px;
}

.forge-support.left { left: 2%; }
.forge-support.right { right: 2%; }

.forge-beam {
  left: 8%;
  width: 84%;
  height: 7px;
}

.forge-beam.deck { top: 14px; }
.forge-beam.lower { bottom: 18px; opacity: 0.78; }

.forge-beam.brace-a,
.forge-beam.brace-b,
.forge-beam.brace-c,
.forge-beam.brace-d {
  top: 36px;
  left: 13%;
  width: 35%;
  transform-origin: center center;
}

.forge-beam.brace-a { transform: rotate(31deg); }
.forge-beam.brace-b { left: 15%; transform: rotate(-31deg); }
.forge-beam.brace-c { left: 51%; transform: rotate(31deg); }
.forge-beam.brace-d { left: 52%; transform: rotate(-31deg); }

.forge-bridge-visual.untested .forge-beam {
  opacity: 0.58;
}

.forge-bridge-visual.failed .forge-beam.deck {
  transform: translateY(9px) rotate(-2deg);
  background: linear-gradient(180deg, #ffb18d, #81301c);
}

.forge-bridge-visual.failed .forge-beam.brace-b,
.forge-bridge-visual.failed .forge-beam.brace-d {
  opacity: 0.28;
  transform: translateY(9px) rotate(-18deg);
}

.forge-bridge-visual.stable .forge-beam,
.forge-bridge-visual.stable .forge-support {
  background: linear-gradient(180deg, #d9ffd9, #61a873);
  box-shadow: 0 0 18px rgb(158 255 189 / 0.22), inset 0 1px 0 rgb(255 246 215 / 0.42);
}

.forge-stress-meter {
  position: absolute;
  right: 13px;
  bottom: 13px;
  left: 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgb(255 179 108 / 0.18);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.32);
}

.forge-stress-meter i {
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgb(255 179 108 / 0.18);
  background:
    linear-gradient(90deg, #d96b2b var(--forge-integrity), rgb(255 246 215 / 0.08) 0),
    #080503;
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.forge-rig-stage.stable .forge-stress-meter {
  border-color: rgb(158 255 189 / 0.4);
}

.forge-rig-stage.stable .forge-stress-meter i {
  background:
    linear-gradient(90deg, #9effbd var(--forge-integrity), rgb(255 246 215 / 0.08) 0),
    #071008;
}

.forge-design-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.forge-design-board div {
  min-width: 0;
  display: grid;
  gap: 5px;
  align-content: start;
  min-height: 78px;
  padding: 9px;
  border: 1px solid rgb(255 179 108 / 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 179 108 / 0.08), rgb(255 179 108 / 0.02)),
    rgb(0 0 0 / 0.2);
}

.forge-design-board.stable div {
  border-color: rgb(158 255 189 / 0.28);
  background:
    radial-gradient(circle at 16% 16%, rgb(158 255 189 / 0.1), transparent 42%),
    rgb(0 0 0 / 0.22);
}

.forge-design-board b {
  color: #fff3cf;
  font-size: 0.76rem;
  line-height: 1.22;
  overflow-wrap: break-word;
}

.forge-rig-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.forge-rig-ledger div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid rgb(255 179 108 / 0.18);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.2);
}

.forge-rig-ledger div.wide,
.forge-rig-ledger div.result {
  grid-column: 1 / -1;
}

.forge-rig-ledger div.result {
  border-color: rgb(242 201 76 / 0.38);
  background:
    radial-gradient(circle at 14% 22%, rgb(242 201 76 / 0.13), transparent 42%),
    rgb(0 0 0 / 0.24);
}

.forge-rig-ledger span {
  color: #c99669;
  font-size: 0.63rem;
  font-weight: 900;
  text-transform: uppercase;
}

.forge-rig-ledger b {
  color: #fff3cf;
  font-size: 0.78rem;
  line-height: 1.18;
  overflow-wrap: break-word;
}

@keyframes forgeCrystalPulse {
  0%, 100% { filter: brightness(0.94); transform: translateX(-50%) rotate(45deg) translateY(0); }
  50% { filter: brightness(1.12); transform: translateX(-50%) rotate(45deg) translateY(4px); }
}

@keyframes forgeBridgeHold {
  0% { transform: scaleX(1) translateY(0); }
  42% { transform: scaleX(1.01) translateY(3px); }
  100% { transform: scaleX(1) translateY(0); }
}

@keyframes forgeBridgeFail {
  0%, 100% { transform: translateX(0) translateY(0); }
  20% { transform: translateX(-5px) translateY(3px); }
  40% { transform: translateX(5px) translateY(6px); }
  60% { transform: translateX(-3px) translateY(8px); }
  80% { transform: translateX(2px) translateY(7px); }
}

.oracle-tile.pattern,
.oracle-tile.features,
.oracle-tile.training,
.oracle-tile.review,
.oracle-tile.explain {
  border-color: rgb(185 173 255 / 0.5);
  box-shadow: 0 4px 0 #050302, 0 0 16px rgb(109 91 208 / 0.14), inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.oracle-tile.pattern { background: radial-gradient(circle at 16% 16%, rgb(242 201 76 / 0.16), transparent 45%), #0b0905; }
.oracle-tile.features { background: radial-gradient(circle at 16% 16%, rgb(85 183 217 / 0.16), transparent 45%), #061014; }
.oracle-tile.training { background: radial-gradient(circle at 16% 16%, rgb(158 255 189 / 0.15), transparent 45%), #071108; }
.oracle-tile.review { background: radial-gradient(circle at 16% 16%, rgb(255 156 124 / 0.15), transparent 45%), #120706; }
.oracle-tile.explain { background: radial-gradient(circle at 16% 16%, rgb(185 173 255 / 0.18), transparent 45%), #0b0816; }

.oracle-training-rig {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.oracle-core-stage {
  position: relative;
  min-height: 238px;
  overflow: hidden;
  border: 1px solid rgb(185 173 255 / 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgb(185 173 255 / 0.16), transparent 34%),
    linear-gradient(180deg, rgb(13 8 28 / 0.9), rgb(6 6 10 / 0.96));
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.oracle-core-stage::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px dashed rgb(185 173 255 / 0.16);
  border-radius: 8px;
}

.oracle-stage-label {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid rgb(185 173 255 / 0.24);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.34);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.oracle-stage-label span,
.oracle-audit-board span {
  color: #beb6ff;
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.oracle-stage-label b {
  color: #fff8d8;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.76rem;
}

.oracle-core-orb {
  position: absolute;
  top: 46px;
  left: 50%;
  width: 62px;
  height: 62px;
  transform: translateX(-50%);
  border: 1px solid rgb(185 173 255 / 0.44);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgb(255 248 217 / 0.9) 0 16%, rgb(185 173 255 / 0.65) 17% 42%, rgb(40 25 85 / 0.86) 43% 100%);
  box-shadow: 0 0 26px rgb(185 173 255 / 0.2);
  animation: oracleCorePulse 2.8s ease-in-out infinite;
}

.oracle-core-orb i,
.oracle-core-orb em {
  position: absolute;
  inset: 9px;
  border: 1px solid rgb(255 248 217 / 0.24);
  border-radius: 50%;
}

.oracle-core-orb em {
  inset: 19px;
  background: rgb(255 248 217 / 0.28);
}

.oracle-node {
  position: absolute;
  width: 23px;
  height: 23px;
  border: 1px solid rgb(185 173 255 / 0.4);
  border-radius: 7px;
  background: #090711;
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.oracle-node.node-a { top: 52px; left: 25px; }
.oracle-node.node-b { top: 52px; right: 25px; }
.oracle-node.node-c { top: 118px; left: calc(50% - 12px); }

.oracle-node.aligned {
  border-color: rgb(158 255 189 / 0.64);
  background: #15311d;
  box-shadow: 0 0 16px rgb(158 255 189 / 0.16), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.oracle-node.tune {
  border-color: rgb(255 156 124 / 0.62);
  background: #2c100d;
  box-shadow: 0 0 16px rgb(255 156 124 / 0.16), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.oracle-dataset-stream {
  position: absolute;
  top: 128px;
  right: 13px;
  left: 13px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.oracle-dataset-stream i {
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgb(185 173 255 / 0.18);
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.oracle-dataset-stream i.aligned {
  border-color: rgb(158 255 189 / 0.48);
  background: linear-gradient(90deg, #9effbd, rgb(158 255 189 / 0.18));
}

.oracle-dataset-stream i.tune {
  border-color: rgb(255 156 124 / 0.48);
  background: linear-gradient(90deg, #ff9c7c, rgb(255 156 124 / 0.14));
}

.oracle-model-pipeline {
  position: absolute;
  right: 13px;
  bottom: 62px;
  left: 13px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.oracle-model-pipeline span {
  min-width: 0;
  padding: 6px 5px;
  border: 1px solid rgb(185 173 255 / 0.17);
  border-radius: 7px;
  color: #d9d5ff;
  background: rgb(0 0 0 / 0.24);
  font-size: 0.58rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.oracle-confidence {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgb(185 173 255 / 0.2);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.26);
}

.oracle-confidence span,
.oracle-training-ledger span {
  color: #beb6ff;
  font-size: 0.63rem;
  font-weight: 900;
  text-transform: uppercase;
}

.oracle-confidence b {
  color: #fff8d8;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.82rem;
}

.oracle-confidence i {
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.08);
}

.oracle-confidence i::before {
  content: "";
  display: block;
  width: var(--oracle-confidence, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b9adff, #9effbd);
  box-shadow: 0 0 16px rgb(185 173 255 / 0.2);
  transition: width 220ms ease;
}

.oracle-audit-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.oracle-audit-board div,
.oracle-audit-board p {
  min-width: 0;
  margin: 0;
  padding: 9px;
  border: 1px solid rgb(185 173 255 / 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(185 173 255 / 0.08), rgb(185 173 255 / 0.02)),
    rgb(0 0 0 / 0.2);
}

.oracle-audit-board.aligned div,
.oracle-audit-board.aligned p {
  border-color: rgb(158 255 189 / 0.3);
  background:
    radial-gradient(circle at 16% 16%, rgb(158 255 189 / 0.11), transparent 42%),
    rgb(0 0 0 / 0.22);
}

.oracle-audit-board.tune div,
.oracle-audit-board.tune p {
  border-color: rgb(255 156 124 / 0.34);
}

.oracle-audit-board b {
  display: block;
  margin-top: 4px;
  color: #fff3cf;
  font-size: 0.76rem;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.oracle-audit-board p {
  grid-column: 1 / -1;
  color: #d9d5ff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

.oracle-training-ledger {
  display: grid;
  gap: 8px;
}

.oracle-training-summary,
.oracle-training-row {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid rgb(185 173 255 / 0.18);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.2);
}

.oracle-training-summary {
  border-color: rgb(242 201 76 / 0.32);
  background:
    radial-gradient(circle at 14% 22%, rgb(242 201 76 / 0.11), transparent 42%),
    rgb(0 0 0 / 0.22);
}

.oracle-training-ledger b {
  color: #fff3cf;
  font-size: 0.78rem;
  line-height: 1.18;
  overflow-wrap: break-word;
}

.oracle-training-ledger small {
  color: #d9d5ff;
  font-size: 0.68rem;
  line-height: 1.25;
}

.oracle-training-row.aligned {
  border-color: rgb(158 255 189 / 0.44);
}

.oracle-training-row.tune {
  border-color: rgb(255 156 124 / 0.4);
}

@keyframes oracleCorePulse {
  0%, 100% { filter: brightness(0.95); transform: translateX(-50%) scale(1); }
  50% { filter: brightness(1.12); transform: translateX(-50%) scale(1.05); }
}

.engineering-forge-lab.solved,
.ai-oracle-lab.solved {
  border-color: rgb(158 255 189 / 0.7);
  box-shadow: 0 0 28px rgb(158 255 189 / 0.13), inset 0 1px 0 rgb(255 246 215 / 0.14);
}

.engineering-forge-lab.solved .forge-lab-head strong,
.ai-oracle-lab.solved .oracle-lab-head strong {
  color: #081008;
  background: #9effbd;
  border-color: rgb(158 255 189 / 0.72);
}

/* Room 15: a real curate -> train -> audit -> review experiment. */
.ai-oracle-lab[data-mode="sentinel-training"] {
  border-color: rgb(133 214 255 / 0.56);
  background:
    radial-gradient(circle at 84% 4%, rgb(89 77 187 / 0.24), transparent 34%),
    linear-gradient(145deg, rgb(7 15 29 / 0.98), rgb(8 7 19 / 0.98));
}

.ai-oracle-lab[data-mode="sentinel-training"] .oracle-lab-head strong {
  border-color: rgb(133 214 255 / 0.58);
  color: #d9f5ff;
  background: #07111e;
}

.sentinel-training-step {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(133 214 255 / 0.2);
  border-radius: 12px;
  background: rgb(7 15 29 / 0.76);
  transition: border-color 180ms ease, background-color 180ms ease, opacity 180ms ease;
}

.sentinel-training-step.active {
  border-color: rgb(133 214 255 / 0.58);
  background: rgb(9 22 40 / 0.9);
}

.sentinel-training-step.complete {
  border-color: rgb(126 237 174 / 0.45);
}

.sentinel-training-step.caution {
  border-color: rgb(255 184 92 / 0.62);
  background: rgb(32 20 12 / 0.82);
}

.sentinel-training-step.locked {
  opacity: 0.58;
}

.sentinel-training-step > p {
  margin: 0;
  color: #c5d4e7;
  font-size: 0.86rem;
  line-height: 1.45;
}

.sentinel-step-head,
.sentinel-model-head,
.sentinel-ledger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sentinel-step-head span,
.sentinel-model-head span,
.sentinel-ledger-head span {
  color: #f2f7ff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sentinel-step-head b,
.sentinel-model-head b,
.sentinel-ledger-head b {
  color: #8edfff;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-align: right;
}

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

.sentinel-example {
  min-height: 78px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgb(151 180 214 / 0.24);
  border-radius: 10px;
  color: #dce9f8;
  background: rgb(5 11 22 / 0.88);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.sentinel-example:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgb(133 214 255 / 0.58);
  background: rgb(12 29 49 / 0.96);
}

.sentinel-example:focus-visible,
.sentinel-primary-action:focus-visible,
.sentinel-review-options button:focus-visible {
  outline: 3px solid #f4cb73;
  outline-offset: 2px;
}

.sentinel-example.selected {
  border-color: #85d6ff;
  background: rgb(17 47 68 / 0.96);
  box-shadow: inset 0 0 0 1px rgb(133 214 255 / 0.3);
}

.sentinel-example > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(133 214 255 / 0.32);
  border-radius: 8px;
  color: #b9ecff;
  background: #081625;
  font-size: 1.35rem;
  font-style: normal;
}

.sentinel-example > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sentinel-example > span b {
  color: #f4f8ff;
  font-size: 0.82rem;
}

.sentinel-example > span small {
  color: #9fb1c8;
  font-size: 0.7rem;
  line-height: 1.3;
}

.sentinel-example > em {
  color: #91e9b7;
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.sentinel-example.duplicate > em,
.sentinel-example.unlabeled > em {
  color: #f6bb77;
}

.sentinel-example:disabled {
  cursor: default;
}

.sentinel-example:disabled:not(.selected) {
  opacity: 0.52;
}

.sentinel-primary-action,
.sentinel-review-options button {
  min-height: 48px;
  border: 1px solid rgb(133 214 255 / 0.52);
  border-radius: 9px;
  color: #eaf8ff;
  background: #10344c;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.sentinel-primary-action:hover:not(:disabled),
.sentinel-review-options button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #d8f4ff;
  background: #174c69;
}

.sentinel-primary-action:active:not(:disabled),
.sentinel-review-options button:active:not(:disabled) {
  transform: translateY(0);
}

.sentinel-primary-action:disabled,
.sentinel-review-options button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sentinel-review-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sentinel-review-options button[aria-pressed="true"] {
  border-color: #f4cb73;
  color: #fff5d6;
  background: #4b3518;
}

.sentinel-review-options button[data-sentinel-review="human-review"] {
  border-color: rgb(126 237 174 / 0.54);
  background: #153d2c;
}

.sentinel-model-stage,
.sentinel-proof-ledger {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(133 214 255 / 0.22);
  border-radius: 12px;
  background: rgb(4 10 20 / 0.88);
}

.sentinel-model-stage[data-state="trained"],
.sentinel-model-stage[data-state="audited"] {
  border-color: rgb(133 214 255 / 0.58);
}

.sentinel-model-stage[data-state="caution"] {
  border-color: rgb(255 184 92 / 0.64);
}

.sentinel-model-stage[data-state="proved"] {
  border-color: rgb(126 237 174 / 0.68);
  box-shadow: 0 0 26px rgb(126 237 174 / 0.1);
}

.sentinel-core {
  position: relative;
  min-height: 90px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(133 214 255 / 0.16);
  border-radius: 10px;
  background: #050d18;
}

.sentinel-core > i {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(133 214 255 / 0.68);
  border-radius: 50%;
  color: #b9ecff;
  background: #0b2337;
  box-shadow: 0 0 22px rgb(133 214 255 / 0.2);
  font-size: 1.55rem;
  font-style: normal;
}

.sentinel-core > span,
.sentinel-core > em {
  position: absolute;
  width: 118px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(133 214 255 / 0.76), transparent);
}

.sentinel-core > em {
  transform: rotate(90deg);
}

.sentinel-model-stage:is([data-state="trained"], [data-state="audited"], [data-state="proved"]) .sentinel-core > i {
  animation: sentinel-core-ready 1.5s ease-in-out infinite;
}

.sentinel-model-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sentinel-model-metrics > div {
  display: grid;
  gap: 4px;
  min-height: 58px;
  align-content: center;
  padding: 8px;
  border: 1px solid rgb(151 180 214 / 0.16);
  border-radius: 8px;
  background: rgb(9 20 35 / 0.74);
}

.sentinel-model-metrics span,
.sentinel-audit-cases span,
.sentinel-ledger-row span {
  color: #8fa5bd;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sentinel-model-metrics b {
  color: #e6f6ff;
  font-size: 0.76rem;
}

.sentinel-audit-cases {
  display: grid;
  gap: 6px;
}

.sentinel-audit-cases article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 7px 9px;
  border: 1px solid rgb(151 180 214 / 0.16);
  border-radius: 8px;
  background: rgb(7 16 28 / 0.76);
}

.sentinel-audit-cases i {
  color: #b9ecff;
  font-size: 1.05rem;
  font-style: normal;
  text-align: center;
}

.sentinel-audit-cases b {
  color: #8fe9b5;
  font-size: 0.7rem;
}

.sentinel-audit-cases.sealed article {
  opacity: 0.56;
}

.sentinel-audit-cases .uncertain b {
  color: #f4cb73;
}

.sentinel-proof-ledger > p {
  margin: 0;
  color: #91a4bb;
  font-size: 0.78rem;
}

.sentinel-ledger-row {
  display: grid;
  grid-template-columns: 80px 130px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid rgb(151 180 214 / 0.14);
  border-radius: 8px;
  background: rgb(8 17 30 / 0.74);
}

.sentinel-ledger-row b {
  color: #dcecff;
  font-size: 0.74rem;
}

.sentinel-ledger-row small {
  color: #a5b5c8;
  font-size: 0.7rem;
  line-height: 1.35;
}

.sentinel-ledger-row em {
  color: #8fe9b5;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 850;
  text-align: right;
}

.sentinel-ledger-row.revised em {
  color: #f4b572;
}

@keyframes sentinel-core-ready {
  0%, 100% { box-shadow: 0 0 16px rgb(133 214 255 / 0.15); transform: scale(1); }
  50% { box-shadow: 0 0 28px rgb(133 214 255 / 0.34); transform: scale(1.04); }
}

@media (max-width: 760px) {
  .sentinel-example-grid,
  .sentinel-review-options,
  .sentinel-model-metrics {
    grid-template-columns: 1fr;
  }

  .sentinel-example {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .sentinel-example > em {
    grid-column: 2;
    text-align: left;
  }

  .sentinel-step-head,
  .sentinel-model-head,
  .sentinel-ledger-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .sentinel-step-head b,
  .sentinel-model-head b,
  .sentinel-ledger-head b {
    text-align: left;
  }

  .sentinel-ledger-row {
    grid-template-columns: 1fr;
  }

  .sentinel-ledger-row em {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sentinel-model-stage .sentinel-core > i {
    animation: none !important;
  }

  .sentinel-example,
  .sentinel-primary-action,
  .sentinel-review-options button {
    transition: none;
  }
}

.forge-controls,
.oracle-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.forge-reset-button,
.oracle-reset-button {
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
}

.forge-reset-button {
  border: 1px solid rgb(255 179 108 / 0.4);
  color: #ffe1bf;
  background: #100804;
}

.oracle-reset-button {
  border: 1px solid rgb(185 173 255 / 0.4);
  color: #e5e0ff;
  background: #080711;
}

.physics-launcher {
  position: relative;
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgb(85 183 217 / 0.42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 74% 20%, rgb(85 183 217 / 0.16), transparent 42%),
    linear-gradient(145deg, rgb(6 14 18 / 0.94), rgb(8 6 4 / 0.96));
  box-shadow:
    inset 0 1px 0 rgb(255 246 215 / 0.08),
    0 16px 34px rgb(0 0 0 / 0.22);
  overflow: hidden;
}

.physics-launcher::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgb(85 183 217 / 0.08), transparent),
    radial-gradient(circle at 9% 18%, rgb(242 201 76 / 0.1), transparent 25%);
  opacity: 0.72;
}

.physics-launcher[data-state="hit"] {
  border-color: rgb(158 255 189 / 0.56);
  box-shadow:
    inset 0 0 22px rgb(158 255 189 / 0.08),
    0 0 28px rgb(85 183 217 / 0.12);
}

.physics-launcher > * {
  position: relative;
  z-index: 1;
}

.physics-launcher.hidden {
  display: none;
}

.launcher-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 10px;
  align-items: center;
}

.launcher-head p {
  margin: 0;
  color: #d3e9ea;
  line-height: 1.25;
}

.launcher-head strong {
  min-height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(85 183 217 / 0.58);
  border-radius: 8px;
  color: #9ee8ff;
  background: #050a0c;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.82rem;
}

.launcher-stage-frame {
  position: relative;
  width: 100%;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 72% 20%, rgb(85 183 217 / 0.16), transparent 42%),
    #060504;
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 0 22px rgb(85 183 217 / 0.09);
  overflow: hidden;
}

.launcher-stage-frame::before,
.launcher-stage-frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgb(85 183 217 / 0.12);
  border-radius: 6px;
}

.launcher-stage-frame::after {
  inset: auto 12px 12px auto;
  width: 82px;
  height: 82px;
  border-color: rgb(242 201 76 / 0.16);
  border-radius: 50%;
  box-shadow: 0 0 24px rgb(242 201 76 / 0.08);
}

.launcher-stage-frame[data-state="hit"]::after {
  border-color: rgb(158 255 189 / 0.48);
  box-shadow: 0 0 32px rgb(158 255 189 / 0.2);
}

#launcherCanvas {
  position: relative;
  display: block;
  width: 100%;
  max-height: 240px;
  aspect-ratio: 8 / 3;
  border: 0;
  border-radius: 0;
  background: #060504;
}

.launcher-comet {
  --comet-x: 72px;
  --comet-y: 202px;
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(72px, 202px) scale(0.62);
  filter: drop-shadow(0 0 12px rgb(158 232 255 / 0.72));
}

.launcher-comet i {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8d8 0 22%, #9ee8ff 42%, rgb(85 183 217 / 0.16) 72%);
}

.launcher-comet::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 7px;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(158 232 255 / 0.58));
  transform-origin: right center;
  transform: rotate(-8deg);
}

.launcher-comet.launched {
  animation: launcherCometFlight 780ms var(--motion) both;
}

.launcher-comet.hit {
  filter: drop-shadow(0 0 18px rgb(158 255 189 / 0.86));
}

.launcher-comet.miss {
  filter: drop-shadow(0 0 14px rgb(255 179 108 / 0.7));
}

@keyframes launcherCometFlight {
  0% {
    opacity: 0;
    transform: translate(72px, 202px) scale(0.46);
  }
  18% {
    opacity: 1;
  }
  72% {
    opacity: 1;
    transform: translate(var(--comet-x), var(--comet-y)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--comet-x), var(--comet-y)) scale(1.8);
  }
}

.launcher-equation-board {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgb(85 183 217 / 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(85 183 217 / 0.08), rgb(85 183 217 / 0.025)),
    rgb(0 0 0 / 0.22);
}

.launcher-equation-board[data-state="hit"] {
  border-color: rgb(158 255 189 / 0.48);
  background:
    radial-gradient(circle at 88% 12%, rgb(158 255 189 / 0.16), transparent 36%),
    rgb(0 0 0 / 0.26);
}

.launcher-equation-meter {
  display: grid;
  grid-template-columns: auto auto;
  gap: 7px 10px;
  align-items: center;
  color: #dff7ff;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 900;
}

.launcher-equation-meter b {
  justify-self: end;
  color: #fff8d8;
}

.launcher-equation-meter i {
  grid-column: 1 / -1;
  height: 7px;
  border-radius: 999px;
  border: 1px solid rgb(85 183 217 / 0.22);
  background:
    linear-gradient(90deg, #55b7d9 var(--launcher-accuracy), rgb(255 246 215 / 0.08) 0),
    #050a0c;
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.launcher-equation-grid {
  display: grid;
  grid-template-columns: minmax(1.3fr, 1fr) repeat(3, minmax(0, 0.72fr));
  gap: 8px;
}

.launcher-equation-grid div {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background: rgb(255 246 215 / 0.035);
}

.launcher-equation-grid span {
  color: #9ee8ff;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.launcher-equation-grid strong {
  color: #fff8d8;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.75rem;
  line-height: 1.14;
}

.launcher-equation-board p {
  margin: 0;
  color: #bddde2;
  line-height: 1.28;
  font-size: 0.8rem;
}

.launcher-readout {
  display: grid;
  grid-template-columns: minmax(1.15fr, 1fr) repeat(3, minmax(0, 0.8fr));
  gap: 8px;
}

.launcher-rule-card {
  min-height: 72px;
  display: grid;
  gap: 5px;
  align-content: center;
  padding: 9px 10px;
  border: 1px solid rgb(85 183 217 / 0.18);
  border-radius: 8px;
  color: #d3e9ea;
  background:
    linear-gradient(180deg, rgb(85 183 217 / 0.08), rgb(85 183 217 / 0.02)),
    rgb(0 0 0 / 0.22);
}

.launcher-rule-card.primary {
  border-color: rgb(242 201 76 / 0.26);
  background:
    radial-gradient(circle at 10% 12%, rgb(242 201 76 / 0.12), transparent 44%),
    rgb(0 0 0 / 0.24);
}

.launcher-rule-card b {
  color: #fff8d8;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.76rem;
  line-height: 1.1;
}

.launcher-rule-card small {
  color: #bddde2;
  line-height: 1.24;
}

.launcher-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

.launcher-controls label {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
  font-weight: 900;
}

.launcher-controls input {
  width: 100%;
  min-width: 0;
  accent-color: var(--gold);
}

.launcher-controls b {
  color: #9ee8ff;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.75rem;
}

.launcher-button {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgb(242 201 76 / 0.62);
  border-radius: 8px;
  color: #120d05;
  background: linear-gradient(180deg, #f7d96d, #b98522);
  box-shadow: 0 4px 0 #050302;
  cursor: pointer;
  font-weight: 900;
}

.launcher-button:disabled {
  opacity: 0.62;
  cursor: default;
}

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

.launcher-stepper button {
  min-height: 34px;
  padding: 6px 7px;
  border: 1px solid rgb(85 183 217 / 0.32);
  border-radius: 8px;
  color: #dff7ff;
  background:
    linear-gradient(180deg, rgb(85 183 217 / 0.13), rgb(85 183 217 / 0.035)),
    #050a0c;
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 900;
}

.launcher-stepper button:hover,
.launcher-stepper button:focus-visible {
  border-color: rgb(158 232 255 / 0.54);
  transform: translateY(-1px);
}

.launcher-stepper button:active {
  transform: translateY(1px);
}

.feedback {
  min-height: 42px;
  margin: 14px 0 0;
  color: var(--gold-soft);
  font-weight: 900;
}

.feedback[data-result] {
  --feedback-accent: var(--gold);
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--feedback-accent) 42%, transparent);
  border-radius: 10px;
  color: #fff6d9;
  background:
    radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--feedback-accent) 15%, transparent), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.18)),
    rgb(5 6 4 / 0.78);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 12px 26px rgb(0 0 0 / 0.18);
  animation: proofVerdictIn 420ms var(--motion) both;
}

.feedback[data-result]::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid var(--feedback-accent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--feedback-accent) 16%, transparent);
  box-shadow: inset 0 0 9px color-mix(in srgb, var(--feedback-accent) 20%, transparent), 0 0 14px color-mix(in srgb, var(--feedback-accent) 24%, transparent);
  transform: rotate(45deg);
}

.feedback[data-result="success"] { --feedback-accent: #79e8a5; }
.feedback[data-result="review"] { --feedback-accent: #ffbd66; }

.learning-receipt {
  --receipt-accent: var(--gold);
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--receipt-accent) 38%, transparent);
  border-radius: 12px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--receipt-accent) 16%, transparent), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.052), rgb(0 0 0 / 0.2)),
    rgb(4 5 3 / 0.74);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 16px 32px rgb(0 0 0 / 0.18);
}

.learning-receipt.hidden {
  display: none;
}

.learning-receipt.show {
  animation: lessonRecapIn 460ms var(--motion) both;
}

.learning-receipt[data-domain="science"] { --receipt-accent: #9effbd; }
.learning-receipt[data-domain="math"] { --receipt-accent: #f2c94c; }
.learning-receipt[data-domain="physics"] { --receipt-accent: #9ee8ff; }
.learning-receipt[data-domain="engineering"] { --receipt-accent: #ffcf9c; }
.learning-receipt[data-domain="ai"] { --receipt-accent: #c7a8ff; }

.learning-receipt[data-result="review"] {
  --receipt-accent: #ffb36c;
}

.learning-receipt-head {
  display: grid;
  gap: 4px;
}

.learning-receipt-head h3,
.learning-receipt-head p,
.learning-receipt-next {
  margin: 0;
}

.learning-receipt-head h3 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.04rem, 1.8vw, 1.28rem);
  line-height: 1.08;
}

.learning-receipt-head p,
.learning-receipt-next {
  color: #d8c690;
  font-size: 0.82rem;
  line-height: 1.32;
}

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

.learning-receipt-grid article {
  min-width: 0;
  min-height: 108px;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 9px;
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--receipt-accent) 10%, transparent), transparent 48%),
    rgb(0 0 0 / 0.22);
}

.learning-receipt-grid span {
  color: color-mix(in srgb, var(--receipt-accent) 88%, #fff4c6);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 1000;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.learning-receipt-grid b {
  min-width: 0;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.08;
  overflow-wrap: break-word;
}

.learning-receipt-grid p {
  margin: 0;
  color: #d7c796;
  font-size: 0.72rem;
  line-height: 1.28;
}

.learning-receipt-next {
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--receipt-accent) 22%, transparent);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.18);
  font-weight: 900;
}

.mastery-moment {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.48);
  border-radius: 10px;
  background:
    radial-gradient(circle at 13% 20%, rgb(242 201 76 / 0.2), transparent 38%),
    radial-gradient(circle at 92% 18%, rgb(85 183 217 / 0.12), transparent 36%),
    linear-gradient(145deg, rgb(31 22 11 / 0.92), rgb(6 5 3 / 0.96));
  box-shadow:
    0 16px 34px rgb(0 0 0 / 0.28),
    inset 0 1px 0 rgb(255 246 215 / 0.12);
  overflow: hidden;
}

.mastery-moment.hidden {
  display: none;
}

.mastery-moment::before {
  content: "";
  position: absolute;
  inset: -80px auto auto -34px;
  width: 180px;
  height: 180px;
  border: 1px solid rgb(242 201 76 / 0.13);
  border-radius: 50%;
  pointer-events: none;
  animation: masteryRingSpin 11s linear infinite;
}

.mastery-moment.show {
  animation: masteryPanelIn 720ms var(--motion);
}

.mastery-art {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  min-height: 108px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(255 246 215 / 0.16);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.32);
  box-shadow: inset 0 0 24px rgb(242 201 76 / 0.08);
  aspect-ratio: 3.8 / 1;
}

.mastery-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.36), transparent 34%, transparent 68%, rgb(0 0 0 / 0.24)),
    radial-gradient(circle at 28% 28%, rgb(242 201 76 / 0.22), transparent 38%);
  mix-blend-mode: screen;
}

.mastery-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(1.08) contrast(1.03);
  transform: scale(1.03);
  animation: firstQuestArtDrift 7s ease-in-out infinite alternate;
}

.mastery-sigil {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.58);
  border-radius: 18px;
  background:
    radial-gradient(circle, rgb(242 201 76 / 0.34), transparent 62%),
    #080604;
  box-shadow: 0 0 28px rgb(242 201 76 / 0.2), inset 0 1px 0 rgb(255 246 215 / 0.12);
}

.mastery-sigil span {
  position: absolute;
  width: 38px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 18px rgb(242 201 76 / 0.54);
  animation: masterySigilPulse 2.4s ease-in-out infinite;
}

.mastery-sigil span:nth-child(2) {
  transform: rotate(60deg);
  animation-delay: 0.15s;
}

.mastery-sigil span:nth-child(3) {
  transform: rotate(-60deg);
  animation-delay: 0.3s;
}

.mastery-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.mastery-copy h3,
.mastery-copy p {
  margin: 0;
}

.mastery-copy h3 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.08;
}

.mastery-copy p {
  margin-top: 4px;
  color: #dfd0a2;
  font-size: 0.84rem;
  line-height: 1.28;
}

.mastery-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.mastery-rewards span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid rgb(242 201 76 / 0.36);
  border-radius: 999px;
  color: #fff4c6;
  background: rgb(8 6 4 / 0.82);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 900;
}

.mastery-rewards b {
  color: var(--gold);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.72rem;
}

.mastery-moment[data-domain="science"] {
  border-color: rgb(158 255 189 / 0.44);
}

.mastery-moment[data-domain="physics"] {
  border-color: rgb(85 183 217 / 0.48);
}

.mastery-moment[data-domain="engineering"] {
  border-color: rgb(217 107 43 / 0.5);
}

.mastery-moment[data-domain="ai"] {
  border-color: rgb(170 132 255 / 0.5);
}

.first-proof-moment {
  --proof-accent: #9effbd;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  scroll-margin-top: 128px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgb(158 255 189 / 0.44);
  border-radius: 12px;
  background:
    radial-gradient(circle at 8% 0%, rgb(158 255 189 / 0.2), transparent 42%),
    radial-gradient(circle at 94% 18%, rgb(242 201 76 / 0.16), transparent 40%),
    linear-gradient(135deg, rgb(255 246 215 / 0.07), rgb(0 0 0 / 0.2)),
    rgb(4 8 6 / 0.82);
  box-shadow:
    inset 0 1px 0 rgb(255 246 215 / 0.12),
    0 22px 52px rgb(0 0 0 / 0.3),
    0 0 0 1px rgb(255 246 215 / 0.04);
}

.first-proof-moment.hidden {
  display: none;
}

.first-proof-moment.show {
  animation: masteryPanelIn 640ms var(--motion);
}

.first-proof-moment[data-handoff="parent"] {
  border-color: rgb(158 255 189 / 0.66);
  background:
    radial-gradient(circle at 8% 0%, rgb(158 255 189 / 0.28), transparent 42%),
    radial-gradient(circle at 94% 18%, rgb(242 201 76 / 0.2), transparent 40%),
    linear-gradient(135deg, rgb(255 246 215 / 0.1), rgb(0 0 0 / 0.18)),
    rgb(3 10 7 / 0.9);
  box-shadow:
    inset 0 1px 0 rgb(255 246 215 / 0.16),
    0 24px 58px rgb(0 0 0 / 0.36),
    0 0 0 1px rgb(158 255 189 / 0.1),
    0 0 40px rgb(158 255 189 / 0.12);
}

.first-proof-moment::before {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgb(158 255 189 / 0.12);
  border-radius: 9px;
}

.first-proof-seal {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 64px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(158 255 189 / 0.42);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgb(255 246 215 / 0.22), transparent 30%),
    radial-gradient(circle, rgb(158 255 189 / 0.24), transparent 62%),
    rgb(0 0 0 / 0.3);
  box-shadow: 0 0 38px rgb(158 255 189 / 0.18);
}

.first-proof-seal span {
  position: relative;
  width: 32px;
  aspect-ratio: 1;
  border: 2px solid rgb(242 201 76 / 0.62);
  border-radius: 50%;
  box-shadow: 0 0 0 9px rgb(158 255 189 / 0.08), inset 0 0 18px rgb(242 201 76 / 0.22);
  animation: masterySigilPulse 2.4s ease-in-out infinite;
}

.first-proof-seal span::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff4c6;
  font-size: 1rem;
  font-weight: 1000;
  text-shadow: 0 0 12px rgb(242 201 76 / 0.42);
}

.first-proof-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 10px;
  padding-right: 76px;
}

.first-proof-copy h3,
.first-proof-copy p {
  margin: 0;
}

.first-proof-copy h3 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.25rem, 2.3vw, 1.78rem);
  line-height: 1.06;
  text-wrap: balance;
}

.first-proof-copy p {
  max-width: 72ch;
  color: #d8c99b;
  font-size: 0.82rem;
  line-height: 1.34;
}

.first-proof-status {
  width: min(100%, 620px);
  display: grid;
  grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgb(158 255 189 / 0.22);
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(158 255 189 / 0.16), rgb(242 201 76 / 0.07));
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.09);
}

.first-proof-status span {
  width: 22px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #071008;
  background: #9effbd;
  font-size: 0.78rem;
  font-weight: 1000;
}

.first-proof-status b {
  color: #e8ffd7;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.math-rune-builder[data-proof-mode="stayed"] .rune-gem.stay-gem {
  border-color: rgb(158 255 189 / 0.44);
  background:
    radial-gradient(circle at 34% 28%, #fff7b8, #d6a536 36%, #614015 78%),
    #0b0805;
}

.math-rune-builder[data-proof-mode="stayed"] .rune-gem.stay-gem::after {
  content: "stayed";
  position: absolute;
  right: 4px;
  bottom: 3px;
  color: rgb(255 246 215 / 0.8);
  font-size: 0.42rem;
  line-height: 1;
  text-transform: uppercase;
}

.first-proof-status small {
  min-width: 0;
  color: #d8c99b;
  font-size: 0.68rem;
  overflow-wrap: break-word;
}

.parent-review-script {
  display: grid;
  gap: 9px;
  width: min(100%, 860px);
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--proof-accent) 34%, transparent);
  border-radius: 12px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--proof-accent) 14%, transparent), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.2)),
    rgb(3 7 5 / 0.62);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.parent-review-script-head {
  display: grid;
  gap: 4px;
}

.parent-review-script-head h4,
.parent-review-script-head p {
  margin: 0;
}

.parent-review-script-head h4 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.7vw, 1.24rem);
  line-height: 1.08;
}

.parent-review-script-head p {
  max-width: 72ch;
  color: #d8c99b;
  font-size: 0.78rem;
  line-height: 1.32;
}

.parent-review-script-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.parent-review-script-grid article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 104px;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 9px;
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--proof-accent) 10%, transparent), transparent 50%),
    rgb(0 0 0 / 0.2);
}

.parent-review-script-grid span {
  color: color-mix(in srgb, var(--proof-accent) 88%, #fff4c6);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.parent-review-script-grid p {
  margin: 0;
  color: #dfeac9;
  font-size: 0.72rem;
  line-height: 1.28;
}

.first-proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 8px;
}

.first-proof-grid article {
  min-width: 0;
  min-height: 78px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 9px;
  background: linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.2));
}

.first-proof-grid article:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.first-proof-grid span,
.first-proof-grid b,
.first-proof-grid small {
  min-width: 0;
  display: block;
  overflow-wrap: break-word;
}

.first-proof-grid span {
  color: var(--proof-accent);
  font-size: 0.56rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.first-proof-grid b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.08;
}

.first-proof-grid small {
  color: #cfe5c7;
  font-size: 0.64rem;
  line-height: 1.18;
}

.first-proof-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.first-proof-actions button {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
  transition: transform 180ms var(--motion), filter 180ms var(--motion);
}

.first-proof-actions button:first-child {
  border: 1px solid rgb(158 255 189 / 0.4);
  color: #071008;
  background: linear-gradient(180deg, #e8ffd7, #9effbd);
}

.first-proof-moment[data-handoff="parent"] .first-proof-actions {
  align-items: stretch;
}

.first-proof-moment[data-handoff="parent"] .first-proof-actions button:first-child {
  min-height: 44px;
  padding-inline: 18px;
  border-color: rgb(255 246 215 / 0.42);
  background:
    linear-gradient(180deg, #fff6c9 0%, #9effbd 100%);
  box-shadow:
    0 12px 28px rgb(158 255 189 / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.42);
}

.first-proof-actions button:last-child {
  border: 1px solid rgb(242 201 76 / 0.28);
  color: #fff1ad;
  background: rgb(0 0 0 / 0.22);
}

.first-proof-moment[data-handoff="parent"] .first-proof-actions button:last-child {
  color: #d8c99b;
  border-color: rgb(255 246 215 / 0.16);
  background: rgb(0 0 0 / 0.32);
}

.first-proof-actions button:hover,
.first-proof-actions button:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.first-proof-actions button:active {
  transform: translateY(1px);
}

.lesson-recap {
  --recap-accent: #9ee8ff;
  position: relative;
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--recap-accent) 36%, transparent);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--recap-accent) 15%, transparent), transparent 42%),
    linear-gradient(145deg, rgb(255 246 215 / 0.05), rgb(0 0 0 / 0.12)),
    rgb(5 4 3 / 0.82);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 14px 30px rgb(0 0 0 / 0.22);
  overflow: hidden;
}

.lesson-recap.hidden {
  display: none;
}

.lesson-recap.show {
  animation: recapDrawerIn 620ms var(--motion);
}

.lesson-recap[data-domain="science"] { --recap-accent: #9effbd; }
.lesson-recap[data-domain="math"] { --recap-accent: #f2c94c; }
.lesson-recap[data-domain="physics"] { --recap-accent: #9ee8ff; }
.lesson-recap[data-domain="engineering"] { --recap-accent: #f2c94c; }
.lesson-recap[data-domain="ai"] { --recap-accent: #c7a8ff; }

.lesson-recap[data-result="review"] {
  --recap-accent: #f2c94c;
}

.lesson-recap summary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.lesson-recap summary::-webkit-details-marker {
  display: none;
}

.lesson-recap summary::after {
  content: "Open";
  min-width: 58px;
  min-height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--recap-accent) 42%, transparent);
  border-radius: 8px;
  color: var(--recap-accent);
  background: rgb(0 0 0 / 0.26);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.lesson-recap[open] summary::after {
  content: "Hide";
}

.lesson-recap summary b {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.08;
}

.lesson-recap-status {
  position: relative;
  z-index: 1;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--recap-accent) 22%, transparent);
  border-radius: 8px;
  color: #e3d6ae;
  background: rgb(0 0 0 / 0.2);
  font-size: 0.8rem;
  line-height: 1.28;
}

.lesson-recap-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.lesson-recap-grid article {
  min-height: 112px;
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--recap-accent) 10%, transparent), transparent 48%),
    rgb(8 6 4 / 0.58);
}

.lesson-recap-grid span {
  color: color-mix(in srgb, var(--recap-accent) 86%, #fff4c6);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lesson-recap-grid b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.88rem;
  line-height: 1.1;
}

.lesson-recap-grid p {
  margin: 0;
  color: #d8c690;
  font-size: 0.76rem;
  line-height: 1.28;
}

.lesson-recap-actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.lesson-recap-actions button {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--recap-accent) 38%, transparent);
  border-radius: 8px;
  color: #fff4c6;
  background: rgb(0 0 0 / 0.28);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 1000;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms var(--motion), border-color 180ms var(--motion), box-shadow 180ms var(--motion), filter 180ms var(--motion);
}

.lesson-recap-actions button:hover,
.lesson-recap-actions button:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--recap-accent) 68%, transparent);
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.24), 0 0 16px color-mix(in srgb, var(--recap-accent) 15%, transparent), inset 0 1px 0 rgb(255 246 215 / 0.12);
  filter: brightness(1.08);
}

@media (max-width: 620px) {
  .learning-receipt-grid {
    grid-template-columns: 1fr;
  }

  .learning-receipt-grid article {
    min-height: 0;
  }

  .lesson-recap summary {
    grid-template-columns: 1fr;
  }

  .lesson-recap summary::after {
    justify-self: start;
  }

  .lesson-recap-grid,
  .lesson-recap-actions {
    grid-template-columns: 1fr;
  }

  .lesson-recap-grid article {
    min-height: auto;
  }
}

.float-text {
  position: fixed;
  z-index: 40;
  max-width: min(420px, calc(100vw - 32px));
  padding: 9px 14px;
  border: 1px solid rgb(242 201 76 / 0.38);
  border-radius: 999px;
  color: var(--gold);
  background:
    radial-gradient(circle at 20% 0%, rgb(255 246 215 / 0.16), transparent 58%),
    rgb(8 5 3 / 0.9);
  box-shadow:
    0 12px 28px rgb(0 0 0 / 0.34),
    inset 0 1px 0 rgb(255 246 215 / 0.12);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.9rem, 2.8vw, 1.28rem);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 2px 0 #090604, 0 0 18px rgb(242 201 76 / 0.75);
  pointer-events: none;
  animation: floatText 820ms ease-out forwards;
}

.method-lab {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(85 183 217 / 0.32);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 18%, rgb(85 183 217 / 0.12), transparent 42%),
    rgb(255 255 255 / 0.035);
}

.method-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, auto);
  gap: 10px;
  align-items: center;
}

.method-head p {
  margin: 0;
  color: #d3e9ea;
  line-height: 1.25;
}

.method-head strong {
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  border: 1px solid rgb(85 183 217 / 0.42);
  border-radius: 8px;
  color: #9ee8ff;
  background: #050a0c;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  text-align: center;
}

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

.method-step {
  min-height: 60px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 8px;
  color: #d8c690;
  background: #080604;
  font-size: 0.78rem;
  line-height: 1.18;
}

.method-step b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #130d05;
  background: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
}

.method-step.done {
  border-color: rgb(87 201 135 / 0.52);
  color: #dfffe3;
  background: rgb(87 201 135 / 0.1);
}

.method-step.done b {
  background: #9effbd;
}

.method-step.revise {
  border-color: rgb(217 107 43 / 0.48);
  color: #ffd9ad;
  background: rgb(217 107 43 / 0.1);
}

.method-step.revise b {
  background: #ffcf9c;
}

.codex {
  order: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.045);
}

.codex p {
  margin: 0;
  color: #e7d7a8;
  line-height: 1.35;
}

.why-button,
.primary,
.secondary {
  min-height: 52px;
  border: 1px solid rgb(242 201 76 / 0.58);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  transition: transform 420ms var(--motion), filter 420ms var(--motion), box-shadow 420ms var(--motion);
}

.why-button,
.secondary {
  color: var(--text);
  background: #100c08;
}

.controls {
  order: 9;
  margin-top: auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 12px;
}

.primary {
  color: #130d05;
  background: linear-gradient(180deg, #ffe996, #d6a536 58%, #9a661a);
  box-shadow: 0 6px 0 #090604, 0 0 28px rgb(242 201 76 / 0.22);
}

.primary:hover,
.secondary:hover,
.why-button:hover,
.primary:focus-visible,
.secondary:focus-visible,
.why-button:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.primary:disabled,
.why-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.75);
  opacity: 0.65;
}

/* Final academy-deck ordering. Keep this after component styles so older panel order rules do not win. */
.quest-panel > .quest-header { order: 1; }
.quest-panel > .sampler-focus-card { order: 2; }
.quest-panel > .class-path-ribbon { order: 3; }
.quest-panel > .headmaster-plan { order: 4; }
.quest-panel > .focus-rail { order: 5; }
.quest-panel > .deck-label-quest { order: 7; }
.quest-panel > .learning-flow { order: 8; }
.quest-panel > .campaign-map { order: 12; }
.quest-panel > .academy-tabs { order: 13; }
.quest-panel > .course-map-panel { order: 15; }
.quest-panel > .spellbook { order: 16; }
.quest-panel > .subject-wings-panel { order: 16; }
.quest-panel > .lesson-scroll { order: 17; }
.quest-panel > .challenge-card { order: 18; }
.quest-panel > .controls { order: 19; }
.quest-panel > .method-lab { order: 20; }
.quest-panel > .codex { order: 21; }
.quest-panel > .curriculum-map { order: 22; }
.quest-panel > .boss-card { order: 23; }
.quest-panel > .meters { order: 24; }
.quest-panel > .mentor-strip { order: 25; }
.quest-panel > .dm-panel { order: 26; }
.quest-panel > .lab-reactor { order: 27; }
.quest-panel > .deck-label-coach { order: 30; }
.quest-panel > .coach-drawer { order: 31; }
.quest-panel > .session-goals { order: 31; }
.quest-panel > .tutor-ledger { order: 32; }
.quest-panel > .review-queue { order: 33; }
.quest-panel > .quest-oracle { order: 34; }
.quest-panel > .lab-notebook { order: 35; }
.quest-panel > .adventure-log { order: 36; }
.quest-panel > .deck-label-progress { order: 50; }
.quest-panel > .academy-drawer { order: 51; }
.quest-panel > .rank-ladder { order: 51; }
.quest-panel > .academy-record { order: 52; }
.quest-panel > .learning-snapshot { order: 53; }
.quest-panel > .academy-familiar { order: 54; }
.quest-panel > .next-move-card { order: 55; }
.quest-panel > .spell-card-vault { order: 56; }
.quest-panel > .challenge-forge { order: 57; }
.quest-panel > .guild-projects { order: 58; }
.quest-panel > .relic-shelf { order: 59; }
.quest-panel > .academy-realms { order: 60; }
.quest-panel > .media-controls { order: 61; }
.quest-panel > .account-chip { order: 62; }
.quest-panel > .deck-label-setup { order: 70; }
.quest-panel > .difficulty-paths { order: 71; }

.quest-panel[data-focus="today"] > :is(
  .academy-tabs,
  .academy-command-bar,
  .course-map-panel,
  .subject-wings-panel,
  .lesson-scroll,
  .challenge-card,
  .controls,
  .method-lab,
  .codex,
  .curriculum-map,
  .boss-card,
  .meters,
  .mentor-strip,
  .dm-panel,
  .lab-reactor,
  .deck-label-coach,
  .coach-drawer,
  .adventure-log,
  .deck-label-progress,
  .progress-drawer,
  .school-systems-drawer,
  .relic-shelf
),
.quest-panel[data-focus="learn"] > :is(
  .sampler-focus-card,
  .media-controls,
  .account-chip,
  .academy-tabs,
  .academy-command-bar,
  .deck-label-setup,
  .deck-label-quest,
  .difficulty-paths,
  .headmaster-plan,
  .campaign-map,
  .course-map-panel,
  .spellbook,
  .challenge-card,
  .controls,
  .curriculum-map,
  .boss-card,
  .meters,
  .mentor-strip,
  .dm-panel,
  .lab-reactor,
  .deck-label-coach,
  .coach-drawer,
  .adventure-log,
  .deck-label-progress,
  .progress-drawer,
  .relic-shelf
),
.quest-panel[data-focus="cast"] > :is(
  .sampler-focus-card,
  .academy-tabs,
  .academy-command-bar,
  .deck-label-setup,
  .difficulty-paths,
  .headmaster-plan,
  .campaign-map,
  .course-map-panel,
  .spellbook,
  .curriculum-map,
  .subject-wings-panel,
  .lesson-scroll,
  .method-lab,
  .codex,
  .deck-label-coach,
  .coach-drawer,
  .adventure-log,
  .deck-label-progress,
  .progress-drawer,
  .relic-shelf
),
.quest-panel[data-focus="academy"] > :is(
  .sampler-focus-card,
  .deck-label-setup,
  .deck-label-quest,
  .difficulty-paths,
  .headmaster-plan,
  .campaign-map,
  .spellbook,
  .subject-wings-panel,
  .lesson-scroll,
  .challenge-card,
  .controls,
  .method-lab,
  .codex,
  .boss-card,
  .meters,
  .mentor-strip,
  .dm-panel,
  .lab-reactor
) {
  display: none !important;
}

.quest-panel[data-focus="learn"] > .quest-header { order: 1; }
.quest-panel[data-focus="learn"] > .class-path-ribbon { order: 2; }
.quest-panel[data-focus="learn"] > .learning-flow { order: 3; }
.quest-panel[data-focus="learn"] > .lesson-scroll { order: 4; }
.quest-panel[data-focus="learn"] > .focus-rail { order: 30; }

.quest-panel[data-proof-ready="false"][data-focus="today"] > .campaign-map,
.quest-panel[data-proof-ready="false"][data-focus="today"] .student-command-rail,
.quest-panel[data-proof-ready="false"][data-focus="today"] .member-onboarding-panel,
.quest-panel[data-proof-ready="false"][data-focus="today"] .student-tools-drawer,
.quest-panel[data-proof-ready="false"][data-focus="today"] .today-detail-drawer,
.quest-panel[data-proof-ready="false"][data-focus="today"] .school-systems-drawer,
.quest-panel[data-proof-ready="false"][data-focus="today"] .member-week-panel {
  display: none !important;
}

.quest-panel[data-proof-ready="false"][data-focus="cast"] > :is(
  .media-controls,
  .account-chip,
  .deck-label,
  .learning-flow,
  .focus-rail,
  .boss-card,
  .meters,
  .mentor-strip,
  .dm-panel,
  .lab-reactor
) {
  display: none !important;
}

.quest-panel[data-proof-ready="false"][data-focus="today"] .student-hq-panel {
  border-color: rgb(242 201 76 / 0.34);
}

.quest-panel[data-proof-ready="false"][data-focus="today"] .student-command-center {
  grid-template-columns: minmax(0, 1fr);
}

.quest-panel[data-proof-ready="false"][data-focus="today"] .student-command-secondary,
.quest-panel[data-proof-ready="false"][data-focus="today"] #studentCommandSecondary {
  display: none !important;
}

.quest-panel[data-proof-ready="false"][data-focus="today"] .student-command-line,
.quest-panel[data-proof-ready="false"][data-focus="today"] #studentCommandLine {
  max-width: 62ch;
}

.quest-panel[data-proof-ready="true"] .class-path-ribbon {
  border-color: rgb(158 255 189 / 0.34);
  background:
    radial-gradient(ellipse at 8% 0%, rgb(158 255 189 / 0.13), transparent 42%),
    linear-gradient(135deg, rgb(5 18 12 / 0.92), rgb(8 6 4 / 0.97));
}

.game-shell[data-focus="learn"] .lesson-scroll > :is(
  .first-five-guide,
  .classroom-compass,
  .brain-spark,
  .lesson-reference-drawer,
  .lesson-materials-drawer
) {
  display: none !important;
}

.game-shell[data-focus="learn"] .quest-panel > :is(
  .quest-header,
  .class-path-ribbon,
  .learning-flow
),
.game-shell[data-focus="learn"] .lesson-scroll > :is(
  .lesson-head,
  .lesson-mission-control
),
.game-shell[data-focus="learn"] .lesson-stage-sequence {
  display: none !important;
}

.game-shell[data-focus="learn"] .lesson-cinematic-stage {
  scroll-margin-top: 12px;
}

.game-shell[data-focus="learn"] .lesson-scroll {
  gap: 14px;
}

.game-shell[data-focus="learn"] .lesson-mission-control {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "main"
    "rail"
    "next";
  border-color: rgb(242 201 76 / 0.46);
  background:
    radial-gradient(ellipse at 8% 0%, rgb(242 201 76 / 0.13), transparent 42%),
    linear-gradient(180deg, rgb(31 21 10 / 0.92), rgb(8 6 4 / 0.96));
}

.game-shell[data-focus="learn"] .lesson-mission-metrics,
.game-shell[data-focus="learn"] .lesson-mission-signals {
  display: none !important;
}

.game-shell[data-focus="learn"] .lesson-mission-control .student-day-step:not(.current) {
  display: none !important;
}

.game-shell[data-focus="learn"] .lesson-mission-rail {
  grid-template-columns: minmax(0, 1fr);
}

.game-shell[data-focus="learn"] .lesson-mission-main {
  align-items: center;
}

.game-shell[data-focus="learn"] .lesson-mission-main h4 {
  max-width: 24ch;
  font-size: clamp(1.2rem, 2vw, 1.72rem);
}

.game-shell[data-focus="learn"] .lesson-mission-main p {
  max-width: 52ch;
}

.game-shell[data-focus="learn"] .quest-header {
  grid-template-columns: minmax(0, 1fr) 78px;
  gap: 12px;
  align-items: center;
  padding-bottom: 10px;
}

.game-shell[data-focus="learn"] .quest-header h1 {
  max-width: 34ch;
  font-size: clamp(1.52rem, 2.2vw, 2.18rem);
  line-height: 1.05;
}

.game-shell[data-focus="learn"] .rank-card {
  min-height: 78px;
  padding: 8px;
  border-width: 1px;
}

.game-shell[data-focus="learn"] .rank-card strong {
  font-size: 1.35rem;
}

.game-shell[data-focus="learn"] .rank-card span,
.game-shell[data-focus="learn"] .rank-card small {
  font-size: 0.58rem;
}

.game-shell[data-focus="learn"] .lesson-scroll[data-action="lesson"] > :is(
  .guided-practice,
  .room-investigation,
  .lesson-ready-button
),
.game-shell[data-focus="learn"] .lesson-scroll[data-action="practice"] > :is(
  .lesson-cinematic-stage,
  .room-investigation,
  .lesson-ready-button
),
.game-shell[data-focus="learn"] .lesson-scroll[data-action="lab"] > :is(
  .lesson-cinematic-stage,
  .guided-practice,
  .lesson-ready-button
),
.game-shell[data-focus="learn"] .lesson-scroll[data-action="unlock"] > :is(
  .lesson-cinematic-stage,
  .guided-practice,
  .room-investigation
) {
  display: none !important;
}

.game-shell[data-focus="learn"] .lesson-scroll[data-action="lesson"] > .lesson-cinematic-stage,
.game-shell[data-focus="learn"] .lesson-scroll[data-action="practice"] > .guided-practice,
.game-shell[data-focus="learn"] .lesson-scroll[data-action="lab"] > .room-investigation,
.game-shell[data-focus="learn"] .lesson-scroll[data-action="unlock"] > .lesson-ready-button {
  display: grid;
  animation: lessonTaskRise 220ms var(--motion) both;
}

.game-shell[data-focus="learn"] .lesson-scroll[data-action="unlock"] > .lesson-ready-button {
  display: grid !important;
  place-items: center;
  min-height: 64px;
  font-size: 0.92rem;
}

.game-shell[data-focus="learn"] .guided-practice-choice small {
  display: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .game-shell[data-focus="learn"] .lesson-scroll > :is(
    .lesson-cinematic-stage,
    .guided-practice,
    .room-investigation,
    .lesson-ready-button
  ) {
    animation: none !important;
  }
}

/* Chapter 2 close: a concrete return reason without turning the lesson into a chore. */
.tomorrow-teaser {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgb(158 215 255 / 0.3);
  border-radius: 10px;
  background:
    radial-gradient(circle at 0 50%, rgb(121 194 255 / 0.16), transparent 19rem),
    linear-gradient(100deg, rgb(8 20 30 / 0.92), rgb(18 11 8 / 0.88));
  box-shadow: inset 0 1px rgb(255 255 255 / 0.06);
}

.tomorrow-teaser.hidden {
  display: none;
}

.tomorrow-teaser::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 0;
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #9ee8ff, transparent);
  box-shadow: 0 0 16px #55b7d9;
}

.tomorrow-teaser-seal {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(158 232 255 / 0.46);
  border-radius: 50%;
  color: #d8f7ff;
  background:
    radial-gradient(circle, rgb(158 232 255 / 0.16), transparent 60%),
    #071018;
  box-shadow: 0 0 28px rgb(85 183 217 / 0.16), inset 0 0 14px rgb(158 232 255 / 0.12);
  font: 1000 0.73rem "JetBrains Mono", Consolas, monospace;
}

.tomorrow-teaser h4,
.tomorrow-teaser p {
  margin: 0;
}

.tomorrow-teaser h4 {
  margin-top: 2px;
  color: #eefbff;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.94rem;
}

.tomorrow-teaser p {
  margin-top: 3px;
  color: #bcd0d5;
  font-size: 0.67rem;
  line-height: 1.3;
}

.tomorrow-teaser small {
  display: block;
  margin-top: 5px;
  color: #8cc9dc;
  font-size: 0.57rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.tomorrow-teaser > button {
  min-height: 42px;
  max-width: 190px;
  padding: 8px 12px;
  border: 1px solid rgb(158 232 255 / 0.42);
  border-radius: 8px;
  color: #e9fbff;
  background: linear-gradient(180deg, rgb(85 183 217 / 0.22), rgb(5 16 23 / 0.76));
  cursor: pointer;
  font-size: 0.63rem;
  font-weight: 1000;
  line-height: 1.15;
}

.tomorrow-teaser > button:hover,
.tomorrow-teaser > button:focus-visible {
  border-color: #d8f7ff;
  filter: brightness(1.1);
  outline: 3px solid rgb(255 242 181 / 0.86);
  outline-offset: 2px;
}

.first-proof-moment[data-room="2"] .first-proof-seal {
  border-color: rgb(158 255 189 / 0.68);
  box-shadow: 0 0 42px rgb(158 255 189 / 0.24);
}

@media (max-width: 620px) {
  .tomorrow-teaser {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tomorrow-teaser > button {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }
}

.quest-panel[data-focus="academy"][data-academy-tab="courses"] > :is(
  .progress-drawer,
  .coach-drawer,
  .deck-label-coach,
  .adventure-log,
  .relic-shelf
),
.quest-panel[data-focus="academy"][data-academy-tab="progress"] > :is(
  .course-map-panel,
  .curriculum-map,
  .adventure-log,
  .relic-shelf
),
.quest-panel[data-focus="academy"][data-academy-tab="parent"] > :is(
  .course-map-panel,
  .curriculum-map,
  .deck-label-coach,
  .coach-drawer,
  .adventure-log,
  .relic-shelf
),
.quest-panel[data-focus="academy"][data-academy-tab="rewards"] > :is(
  .course-map-panel,
  .curriculum-map,
  .deck-label-coach,
  .coach-drawer
) {
  display: none !important;
}

.quest-panel[data-focus="academy"][data-academy-tab="progress"] .progress-drawer-body > :is(
  .school-portal,
  .course-catalog,
  .academy-realms,
  .rewards-command-board,
  .spell-card-vault,
  .challenge-forge,
  .guild-projects
),
.quest-panel[data-focus="academy"][data-academy-tab="parent"] .progress-drawer-body > :is(
  .progress-board-panel,
  .first-proof-report,
  .progress-detail-panel,
  .rank-ladder,
  .academy-record,
  .learning-snapshot,
  .transcript-ledger,
  .rewards-command-board,
  .academy-familiar,
  .next-move-card,
  .spell-card-vault,
  .challenge-forge,
  .guild-projects
),
.quest-panel[data-focus="academy"][data-academy-tab="rewards"] .progress-drawer-body > :is(
  .progress-board-panel,
  .first-proof-report,
  .progress-detail-panel,
  .rank-ladder,
  .academy-record,
  .learning-snapshot,
  .transcript-ledger,
  .school-portal,
  .course-catalog,
  .academy-realms,
  .school-record-pack
) {
  display: none !important;
}

.quest-panel[data-focus="cast"] {
  background:
    radial-gradient(ellipse at 18% 0%, rgb(217 107 43 / 0.13), transparent 42%),
    radial-gradient(ellipse at 92% 18%, rgb(242 201 76 / 0.1), transparent 34%),
    linear-gradient(180deg, rgb(21 13 8 / 0.96), rgb(7 5 3 / 0.98));
}

.quest-panel[data-focus="cast"] > .learning-flow {
  padding: 6px;
}

.quest-panel[data-focus="cast"] > .learning-flow span {
  min-height: 30px;
  font-size: 0.72rem;
}

.quest-panel[data-focus="cast"] > .challenge-card {
  border-color: rgb(242 201 76 / 0.72);
  background:
    radial-gradient(ellipse at 50% 0%, rgb(242 201 76 / 0.17), transparent 58%),
    radial-gradient(circle at 88% 18%, rgb(217 107 43 / 0.14), transparent 36%),
    linear-gradient(180deg, #26180b, #080503 78%);
  box-shadow:
    0 0 0 5px rgb(5 3 2 / 0.9),
    0 28px 76px rgb(0 0 0 / 0.5),
    0 0 34px rgb(242 201 76 / 0.14),
    inset 0 1px 0 rgb(255 246 215 / 0.12);
}

.quest-panel[data-focus="cast"] > .challenge-card h2 {
  max-width: 28ch;
  text-wrap: balance;
}

.quest-panel[data-focus="cast"] > .challenge-card .story {
  display: none;
}

.quest-panel[data-focus="cast"] > .challenge-card .hint {
  max-width: 54ch;
  margin-top: -2px;
  color: rgb(255 246 215 / 0.72);
  font-size: 0.88rem;
  line-height: 1.35;
}

.quest-panel[data-focus="cast"] .dragon-test-command {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
}

.quest-panel[data-focus="cast"] .dragon-command-marks,
.quest-panel[data-focus="cast"] .cast-cockpit,
.quest-panel[data-focus="cast"] .cast-meter,
.quest-panel[data-focus="cast"] .domain-stage {
  display: none;
}

.quest-panel[data-focus="cast"] .answers {
  gap: 9px;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgb(242 201 76 / 0.16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgb(242 201 76 / 0.09), transparent 52%),
    rgb(0 0 0 / 0.16);
}

.quest-panel[data-focus="cast"] .answer {
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) 38px;
  border-radius: 8px;
  padding: 11px 12px;
}

.quest-panel[data-focus="cast"] .answer span {
  display: none;
}

.quest-panel[data-focus="cast"] .answer b {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.05;
}

.quest-panel[data-focus="cast"] .answer i {
  grid-row: 1;
  width: 34px;
}

.quest-panel[data-focus="cast"] .answers[data-lock-reason="proof"]::before {
  content: "Step 1: build the proof";
}

.quest-panel[data-focus="cast"] .answers[data-lock-reason="cast"]::before {
  content: "Step 2: choose one answer";
}

.quest-panel[data-focus="cast"] :is(
  .math-rune-builder,
  .science-alchemy-lab,
  .engineering-forge-lab,
  .ai-oracle-lab,
  .physics-launcher
) {
  margin: 10px 0;
  border-color: rgb(242 201 76 / 0.38);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 12px 26px rgb(0 0 0 / 0.18);
}

.quest-panel[data-focus="cast"] > .controls {
  order: 19;
  margin-top: 0;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 10px;
  background: rgb(255 246 215 / 0.035);
}

.quest-panel[data-focus="cast"] > :is(.boss-card, .meters, .mentor-strip, .dm-panel, .lab-reactor) {
  border-radius: 8px;
}

.quest-panel[data-focus="cast"] > .boss-card {
  grid-template-columns: 64px minmax(0, 1fr) 56px;
  gap: 10px;
  padding: 10px;
  border-color: rgb(217 107 43 / 0.52);
  background:
    radial-gradient(circle at 12% 35%, rgb(217 107 43 / 0.2), transparent 38%),
    linear-gradient(145deg, rgb(255 246 215 / 0.055), rgb(255 246 215 / 0.018)),
    rgb(11 7 4 / 0.82);
}

.quest-panel[data-focus="cast"] > .boss-card img {
  width: 64px;
  border-radius: 8px;
}

.quest-panel[data-focus="cast"] > .boss-card h3 {
  font-size: 0.9rem;
}

.quest-panel[data-focus="cast"] > .boss-card p {
  font-size: 0.78rem;
  line-height: 1.22;
}

.quest-panel[data-focus="cast"] .shield-plates {
  max-width: none;
  gap: 4px;
  margin-top: 8px;
}

.quest-panel[data-focus="cast"] .best-score {
  min-height: 50px;
}

.quest-panel[data-focus="cast"] .best-score strong {
  font-size: 1rem;
}

.quest-panel[data-focus="cast"] > .meters {
  grid-template-columns: 0.7fr 1fr 1fr;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgb(242 201 76 / 0.18);
  background: rgb(0 0 0 / 0.16);
}

.quest-panel[data-focus="cast"] .meter {
  min-height: 48px;
  padding: 8px;
}

.quest-panel[data-focus="cast"] .meter span {
  margin-bottom: 5px;
  font-size: 0.66rem;
}

.quest-panel[data-focus="cast"] .meter strong {
  font-size: 1.2rem;
}

.quest-panel[data-focus="cast"] .bar {
  height: 10px;
}

.quest-panel[data-focus="cast"] > .mentor-strip {
  grid-template-columns: 42px minmax(0, 1fr) 58px;
  gap: 9px;
  padding: 9px;
  background:
    radial-gradient(circle at 0% 20%, rgb(85 183 217 / 0.13), transparent 40%),
    rgb(255 255 255 / 0.035);
}

.quest-panel[data-focus="cast"] > .mentor-strip img {
  width: 42px;
  border-radius: 8px;
}

.quest-panel[data-focus="cast"] > .mentor-strip p,
.quest-panel[data-focus="cast"] > .dm-panel p,
.quest-panel[data-focus="cast"] > .lab-reactor p {
  font-size: 0.78rem;
  line-height: 1.25;
}

.quest-panel[data-focus="cast"] .combo-meter {
  min-height: 48px;
}

.quest-panel[data-focus="cast"] .combo-meter strong {
  font-size: 1.08rem;
}

.quest-panel[data-focus="cast"] > .dm-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
}

.quest-panel[data-focus="cast"] > .dm-panel h3 {
  font-size: 0.96rem;
}

.quest-panel[data-focus="cast"] .dm-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quest-panel[data-focus="cast"] > .lab-reactor {
  padding: 10px;
}

.quest-panel[data-focus="cast"] .reactor-core {
  min-height: 58px;
}

@media (min-width: 1280px) {
  .quest-panel[data-focus="cast"] {
    grid-template-columns: minmax(0, 1.18fr) minmax(260px, 0.82fr);
    gap: 12px;
  }

  .quest-panel[data-focus="cast"] > .challenge-card {
    grid-column: 1;
    grid-row: span 5;
  }

  .quest-panel[data-focus="cast"] > .boss-card { order: 23; }

  .quest-panel[data-focus="cast"] > .controls {
    order: 24;
    grid-column: 2;
    position: relative;
    bottom: auto;
    z-index: auto;
  }

  .quest-panel[data-focus="cast"] > .meters { order: 25; }
  .quest-panel[data-focus="cast"] > .mentor-strip { order: 26; }
  .quest-panel[data-focus="cast"] > .dm-panel { order: 27; }
  .quest-panel[data-focus="cast"] > .lab-reactor { order: 28; }

  .quest-panel[data-focus="cast"] > :is(.boss-card, .meters, .mentor-strip, .dm-panel, .lab-reactor) {
    grid-column: 2;
  }
}

@media (max-width: 720px) {
  .quest-panel[data-focus="cast"] > .meters,
  .quest-panel[data-focus="cast"] > .mentor-strip,
  .quest-panel[data-focus="cast"] > .boss-card {
    grid-template-columns: 1fr;
  }

  .quest-panel[data-focus="cast"] > .boss-card img {
    display: none;
  }

  .quest-panel[data-focus="cast"] > .mentor-strip img {
    display: none;
  }
}

.learning-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid rgb(85 183 217 / 0.28);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgb(85 183 217 / 0.1), transparent 52%, rgb(242 201 76 / 0.08)),
    rgb(255 255 255 / 0.035);
}

.learning-flow span {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 7px;
  color: #e9d9a8;
  background: rgb(0 0 0 / 0.18);
  font-size: 0.78rem;
  font-weight: 900;
}

.learning-flow b {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #130d05;
  background: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
}

.campaign-map {
  --map-accent-rgb: 242 201 76;
  --map-accent: rgb(var(--map-accent-rgb));
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: clamp(12px, 2vw, 16px);
  border: 1px solid rgb(var(--map-accent-rgb) / 0.34);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgb(var(--map-accent-rgb) / 0.12), transparent 36%),
    repeating-linear-gradient(90deg, rgb(255 246 215 / 0.035) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.2)),
    rgb(12 9 6 / 0.92);
  box-shadow:
    inset 0 1px 0 rgb(255 246 215 / 0.1),
    0 18px 44px rgb(0 0 0 / 0.2);
}

.campaign-map[data-domain="math"] { --map-accent-rgb: 242 201 76; }
.campaign-map[data-domain="science"] { --map-accent-rgb: 77 139 87; }
.campaign-map[data-domain="physics"] { --map-accent-rgb: 85 183 217; }
.campaign-map[data-domain="engineering"] { --map-accent-rgb: 217 107 43; }
.campaign-map[data-domain="ai"] { --map-accent-rgb: 151 109 208; }

.campaign-map::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgb(255 246 215 / 0.08);
  border-radius: 7px;
  pointer-events: none;
}

.campaign-map > * {
  position: relative;
  z-index: 1;
}

.campaign-map-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.campaign-map-head h2,
.campaign-map-head p {
  margin: 0;
}

.campaign-map-head h2 {
  margin-top: 4px;
  color: #fff3c4;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
}

.campaign-map-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.campaign-map-head strong {
  min-width: 92px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid rgb(var(--map-accent-rgb) / 0.4);
  border-radius: 7px;
  color: #120d08;
  background: var(--map-accent);
  box-shadow: 0 0 22px rgb(var(--map-accent-rgb) / 0.22);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
}

.campaign-progress {
  height: 10px;
  overflow: hidden;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.28);
}

.campaign-progress i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--gold), var(--map-accent)),
    var(--gold);
  box-shadow: 0 0 18px rgb(var(--map-accent-rgb) / 0.42);
  transition: width 420ms var(--motion);
}

.campaign-act-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.campaign-act {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.2);
  opacity: 0.74;
}

.campaign-act.current {
  border-color: rgb(var(--map-accent-rgb) / 0.48);
  background:
    linear-gradient(180deg, rgb(var(--map-accent-rgb) / 0.12), rgb(0 0 0 / 0.18)),
    rgb(0 0 0 / 0.18);
  opacity: 1;
}

.campaign-act.complete {
  border-color: rgb(77 139 87 / 0.36);
  opacity: 0.88;
}

.campaign-act.locked {
  opacity: 0.52;
}

.campaign-act-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.campaign-act-title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.campaign-act-title b,
.campaign-act-title span,
.campaign-act-count {
  overflow-wrap: break-word;
}

.campaign-act-title b {
  color: #fff3c4;
  font-size: 0.82rem;
}

.campaign-act-title span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.campaign-act-count {
  flex: 0 0 auto;
  color: var(--map-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
}

.campaign-room-dots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.campaign-room-dot {
  min-width: 0;
  height: 9px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 3px;
  background: rgb(255 246 215 / 0.08);
}

.campaign-room-dot.math { --dot-rgb: 242 201 76; }
.campaign-room-dot.science { --dot-rgb: 77 139 87; }
.campaign-room-dot.physics { --dot-rgb: 85 183 217; }
.campaign-room-dot.engineering { --dot-rgb: 217 107 43; }
.campaign-room-dot.ai { --dot-rgb: 151 109 208; }

.campaign-room-dot.cleared {
  border-color: rgb(255 246 215 / 0.12);
  background: rgb(var(--dot-rgb) / 0.72);
  box-shadow: 0 0 10px rgb(var(--dot-rgb) / 0.2);
}

.campaign-room-dot.current {
  border-color: rgb(255 246 215 / 0.5);
  background: var(--map-accent);
  box-shadow: 0 0 16px rgb(var(--map-accent-rgb) / 0.55);
  animation: campaignDotPulse 1.8s ease-in-out infinite;
}

.campaign-room-dot.locked {
  opacity: 0.42;
}

.campaign-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgb(var(--map-accent-rgb) / 0.22);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.2);
}

.campaign-next strong,
.campaign-next p {
  margin: 0;
}

.campaign-next strong {
  color: #fff3c4;
  font-size: 0.88rem;
}

.campaign-next p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.campaign-next span {
  min-width: 82px;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0 9px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 7px;
  color: var(--map-accent);
  background: rgb(0 0 0 / 0.22);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 900;
  text-align: center;
}

@keyframes campaignDotPulse {
  0%,
  100% {
    transform: translateY(0);
    filter: brightness(1);
  }

  50% {
    transform: translateY(-1px);
    filter: brightness(1.24);
  }
}

.headmaster-plan {
  position: relative;
  overflow: hidden;
  padding: clamp(14px, 2vw, 18px);
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgb(242 201 76 / 0.13), transparent 44%),
    radial-gradient(circle at 92% 8%, rgb(85 183 217 / 0.13), transparent 34%),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.18)),
    rgb(11 8 5 / 0.9);
  box-shadow:
    inset 0 1px 0 rgb(255 246 215 / 0.1),
    0 18px 44px rgb(0 0 0 / 0.24);
}

.headmaster-plan::before,
.headmaster-plan::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.headmaster-plan::before {
  inset: 10px;
  border: 1px solid rgb(242 201 76 / 0.12);
  border-radius: 7px;
}

.headmaster-plan::after {
  width: 180px;
  height: 180px;
  right: -70px;
  bottom: -96px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(242 201 76 / 0.22), transparent 62%);
  opacity: 0.72;
}

.plan-main,
.student-hq-panel,
.today-detail-drawer,
.plan-focus,
.plan-metrics,
.plan-steps,
.plan-credit {
  position: relative;
  z-index: 1;
}

.plan-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.plan-copy h2,
.plan-copy p {
  margin: 0;
}

.plan-copy h2 {
  margin-top: 4px;
  color: #fff3c4;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.08;
}

.plan-copy p {
  max-width: 62ch;
  margin-top: 7px;
  color: #d9cda8;
  line-height: 1.45;
}

.plan-action {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgb(255 246 215 / 0.36);
  border-radius: 8px;
  color: #130d05;
  background: linear-gradient(180deg, #fff0a3, var(--gold));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.48),
    0 10px 24px rgb(242 201 76 / 0.18);
  cursor: pointer;
  font-weight: 1000;
  justify-self: start;
}

.plan-action:hover,
.plan-action:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.student-hq-panel {
  --hq-accent: var(--gold);
  overflow: hidden;
  display: grid;
  gap: 11px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--hq-accent) 36%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--hq-accent) 18%, transparent), transparent 42%),
    radial-gradient(circle at 94% 14%, rgb(85 183 217 / 0.1), transparent 34%),
    linear-gradient(90deg, rgb(255 246 215 / 0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgb(255 246 215 / 0.02) 1px, transparent 1px),
    rgb(4 4 3 / 0.34);
  background-size: auto, auto, 34px 34px, 34px 34px, auto;
  box-shadow:
    inset 0 1px 0 rgb(255 246 215 / 0.08),
    0 14px 34px rgb(0 0 0 / 0.16);
}

.student-hq-panel[data-domain="math"] { --hq-accent: var(--gold); }
.student-hq-panel[data-domain="science"] { --hq-accent: #6fcf97; }
.student-hq-panel[data-domain="physics"] { --hq-accent: var(--aether); }
.student-hq-panel[data-domain="engineering"] { --hq-accent: var(--ember); }
.student-hq-panel[data-domain="ai"] { --hq-accent: #b59cff; }

.student-hq-panel::before,
.student-hq-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.student-hq-panel::before {
  inset: 9px;
  border: 1px solid rgb(255 246 215 / 0.08);
  border-radius: 6px;
}

.student-hq-panel::after {
  width: 170px;
  height: 170px;
  right: -88px;
  top: -76px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hq-accent) 22%, transparent), transparent 64%);
  opacity: 0.72;
}

.student-hq-head,
.student-command-center,
.member-onboarding-panel,
.student-hq-focus,
.student-tools-drawer,
.student-hq-grid {
  position: relative;
  z-index: 1;
}

.student-hq-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.student-hq-head h3,
.student-hq-head p,
.member-onboarding-copy h3,
.member-onboarding-copy p,
.student-hq-focus p {
  margin: 0;
}

.student-hq-head h3 {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.06rem;
  line-height: 1.08;
  text-wrap: balance;
}

.student-hq-head p {
  max-width: 66ch;
  margin-top: 5px;
  color: #d9cba3;
  font-size: 0.76rem;
  line-height: 1.36;
}

.student-hq-head strong {
  min-width: 98px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--hq-accent) 42%, transparent);
  border-radius: 8px;
  color: #120d06;
  background: linear-gradient(180deg, #fff3bc, var(--hq-accent));
  box-shadow: 0 0 20px color-mix(in srgb, var(--hq-accent) 16%, transparent);
  font: 1000 0.72rem "JetBrains Mono", Consolas, monospace;
  justify-self: start;
}

.student-command-center {
  --command-accent: var(--hq-accent);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(214px, 0.65fr);
  gap: 12px;
  align-items: stretch;
  min-height: 214px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--command-accent) 38%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(115deg, rgb(255 246 215 / 0.1), transparent 42%),
    radial-gradient(circle at 13% 12%, color-mix(in srgb, var(--command-accent) 18%, transparent), transparent 32%),
    radial-gradient(circle at 88% 10%, rgb(85 183 217 / 0.12), transparent 38%),
    rgb(5 6 4 / 0.64);
  box-shadow:
    inset 0 1px 0 rgb(255 246 215 / 0.09),
    0 18px 44px rgb(0 0 0 / 0.2);
}

.student-command-primary {
  min-width: 0;
  display: grid;
  align-content: end;
  gap: 9px;
  padding: 8px;
}

.student-command-label {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--command-accent) 40%, transparent);
  border-radius: 6px;
  color: color-mix(in srgb, var(--command-accent) 88%, #fff4c6);
  background: rgb(0 0 0 / 0.22);
  font: 1000 0.62rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.student-command-primary h3,
.student-command-primary p {
  margin: 0;
}

.student-command-primary h3 {
  max-width: 14ch;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.92rem;
  line-height: 1.02;
  text-wrap: balance;
}

.student-command-primary p {
  max-width: 56ch;
  color: #dfd2aa;
  font-size: 0.86rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.student-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
}

.student-command-actions button {
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 1000;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), border-color 180ms var(--motion), box-shadow 180ms var(--motion);
}

.student-command-actions button:first-child {
  color: #130d05;
  background: linear-gradient(180deg, #fff1a9, var(--command-accent));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--command-accent) 16%, transparent);
}

.student-command-actions button:last-child {
  color: #f5df9b;
  background: rgb(0 0 0 / 0.28);
}

.student-command-actions button:hover,
.student-command-actions button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
  border-color: color-mix(in srgb, var(--command-accent) 58%, transparent);
}

.student-command-actions button:active {
  transform: translateY(1px);
}

.student-command-route {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 3px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--command-accent) 22%, transparent);
}

.student-command-route .student-day-step {
  min-height: 44px;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  padding: 7px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.12)),
    rgb(0 0 0 / 0.18);
}

.student-command-route .student-day-step > span {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 0.62rem;
}

.student-command-route .student-day-step small {
  font-size: 0.56rem;
  letter-spacing: 0.06em;
}

.student-command-route .student-day-step b {
  display: none;
}

.student-command-route .student-day-step em {
  display: none;
}

.student-command-rail {
  display: grid;
  gap: 8px;
  align-content: stretch;
}

.student-command-rail article {
  display: grid;
  gap: 3px;
  align-content: center;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.14)),
    rgb(0 0 0 / 0.22);
}

.student-command-rail span,
.student-command-rail b,
.student-command-rail small {
  min-width: 0;
  overflow-wrap: break-word;
}

.student-command-rail span {
  color: #ab9f7c;
  font: 1000 0.56rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.student-command-rail b {
  color: #fff4c6;
  font: 1000 1rem "JetBrains Mono", Consolas, monospace;
}

.student-command-rail small {
  color: #d1c29b;
  font-size: 0.66rem;
  line-height: 1.2;
}

.member-onboarding-panel {
  --member-accent: color-mix(in srgb, var(--hq-accent) 78%, #f2c94c);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(142px, auto);
  gap: 10px 12px;
  align-items: stretch;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--member-accent) 32%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--member-accent) 9%, transparent), transparent 48%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.14)),
    rgb(0 0 0 / 0.2);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.member-onboarding-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.member-onboarding-copy > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.member-onboarding-copy h3 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.08;
  text-wrap: balance;
}

.member-onboarding-copy p {
  max-width: 68ch;
  color: #d8c99f;
  font-size: 0.72rem;
  line-height: 1.32;
}

.member-onboarding-copy strong {
  min-width: 78px;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--member-accent) 40%, transparent);
  border-radius: 999px;
  color: #120d06;
  background: linear-gradient(180deg, #fff1ae, var(--member-accent));
  box-shadow: 0 0 16px color-mix(in srgb, var(--member-accent) 13%, transparent);
  font: 1000 0.62rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
  white-space: nowrap;
}

.member-onboarding-steps {
  grid-column: 1 / -1;
  counter-reset: onboarding;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.member-onboarding-step {
  counter-increment: onboarding;
  min-width: 0;
  min-height: 74px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 2px 7px;
  align-content: center;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.035), rgb(0 0 0 / 0.12)),
    rgb(0 0 0 / 0.16);
}

.member-onboarding-step::before {
  content: counter(onboarding, decimal-leading-zero);
  grid-row: 1 / span 3;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 50%;
  color: #d5c596;
  background: rgb(0 0 0 / 0.24);
  font: 1000 0.54rem "JetBrains Mono", Consolas, monospace;
}

.member-onboarding-step span,
.member-onboarding-step b,
.member-onboarding-step small {
  min-width: 0;
  overflow-wrap: break-word;
}

.member-onboarding-step span {
  color: color-mix(in srgb, var(--member-accent) 84%, #fff4c6);
  font: 1000 0.54rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.member-onboarding-step b {
  color: #fff4c6;
  font: 1000 0.82rem "JetBrains Mono", Consolas, monospace;
  line-height: 1;
}

.member-onboarding-step small {
  color: #c9bb94;
  font-size: 0.61rem;
  line-height: 1.18;
}

.member-onboarding-step.current {
  border-color: color-mix(in srgb, var(--member-accent) 48%, transparent);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--member-accent) 18%, transparent), transparent 54%),
    rgb(16 12 5 / 0.56);
}

.member-onboarding-step.current::before {
  border-color: color-mix(in srgb, var(--member-accent) 62%, transparent);
  color: #130d05;
  background: var(--member-accent);
}

.member-onboarding-step.complete {
  border-color: rgb(158 255 189 / 0.28);
}

.member-onboarding-step.complete::before {
  content: "OK";
  border-color: rgb(158 255 189 / 0.34);
  color: #071008;
  background: #9effbd;
}

.member-onboarding-step.locked {
  opacity: 0.72;
}

.member-onboarding-panel > button {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: stretch;
  min-width: 0;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--member-accent) 42%, transparent);
  border-radius: 8px;
  color: #130d05;
  background: linear-gradient(180deg, #fff1a9, var(--member-accent));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--member-accent) 14%, transparent);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 1000;
  white-space: nowrap;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), border-color 180ms var(--motion), box-shadow 180ms var(--motion);
}

.member-onboarding-panel > button:hover,
.member-onboarding-panel > button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
  border-color: color-mix(in srgb, var(--member-accent) 62%, transparent);
}

.member-onboarding-panel > button:active {
  transform: translateY(1px);
}

.member-onboarding-panel[data-state="ready"],
.member-onboarding-panel[data-state="synced"] {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background:
    linear-gradient(90deg, rgb(158 255 189 / 0.08), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.032), rgb(0 0 0 / 0.12)),
    rgb(0 0 0 / 0.16);
}

.member-onboarding-panel[data-state="ready"] .member-onboarding-copy,
.member-onboarding-panel[data-state="synced"] .member-onboarding-copy {
  grid-template-columns: minmax(0, 1fr) auto;
}

.member-onboarding-panel[data-state="ready"] .member-onboarding-copy p,
.member-onboarding-panel[data-state="synced"] .member-onboarding-copy p {
  display: none;
}

.member-onboarding-panel[data-state="ready"] .member-onboarding-copy h3,
.member-onboarding-panel[data-state="synced"] .member-onboarding-copy h3 {
  font-size: 0.92rem;
}

.member-onboarding-panel[data-state="ready"] .member-onboarding-steps,
.member-onboarding-panel[data-state="synced"] .member-onboarding-steps {
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.member-onboarding-panel[data-state="ready"] .member-onboarding-step,
.member-onboarding-panel[data-state="synced"] .member-onboarding-step {
  min-height: 38px;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  padding: 6px;
}

.member-onboarding-panel[data-state="ready"] .member-onboarding-step::before,
.member-onboarding-panel[data-state="synced"] .member-onboarding-step::before {
  width: 22px;
  height: 22px;
  font-size: 0.46rem;
}

.member-onboarding-panel[data-state="ready"] .member-onboarding-step b,
.member-onboarding-panel[data-state="ready"] .member-onboarding-step small,
.member-onboarding-panel[data-state="synced"] .member-onboarding-step b,
.member-onboarding-panel[data-state="synced"] .member-onboarding-step small {
  display: none;
}

.member-onboarding-panel[data-state="ready"] > button,
.member-onboarding-panel[data-state="synced"] > button {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 0.68rem;
}

.student-hq-focus {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(116px, auto);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--hq-accent) 28%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgb(5 5 3 / 0.86), rgb(5 5 3 / 0.62) 48%, rgb(5 5 3 / 0.9)),
    url("/stem-rover-lab/assets/dungeon-academy-first-quest-ai.webp?v=academy-sampler-copy-v38") center / cover no-repeat;
}

.student-hq-focus::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(255 246 215 / 0.055), transparent 54%),
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--hq-accent) 18%, transparent), transparent 34%);
}

.student-hq-sigil {
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--hq-accent) 56%, transparent);
  border-radius: 12px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--hq-accent) 28%, transparent), transparent 62%),
    rgb(0 0 0 / 0.26);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.12), 0 0 24px color-mix(in srgb, var(--hq-accent) 16%, transparent);
}

.student-hq-sigil::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid color-mix(in srgb, var(--hq-accent) 35%, transparent);
  border-radius: 8px;
  transform: rotate(45deg);
}

.student-hq-sigil span {
  position: relative;
  z-index: 1;
  color: #fff4c6;
  font: 1000 0.82rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.04em;
}

.student-hq-focus-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.student-hq-focus-copy span {
  color: color-mix(in srgb, var(--hq-accent) 86%, #fff4c6);
  font: 1000 0.62rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.student-hq-focus-copy b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.1;
  overflow-wrap: break-word;
}

.student-hq-focus-copy p {
  color: #d8c99f;
  font-size: 0.72rem;
  line-height: 1.3;
}

.student-hq-focus button,
.student-hq-card {
  transition: transform 180ms var(--motion), filter 180ms var(--motion), border-color 180ms var(--motion), box-shadow 180ms var(--motion);
}

.student-hq-focus button {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 8px;
  color: #f5dd8d;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.075), rgb(255 246 215 / 0.024)),
    rgb(8 6 4 / 0.8);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 8px 18px rgb(0 0 0 / 0.18);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 1000;
  justify-self: stretch;
}

.student-tools-drawer {
  border: 1px solid rgb(255 246 215 / 0.11);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.038), rgb(0 0 0 / 0.12)),
    rgb(0 0 0 / 0.16);
}

.student-tools-drawer summary {
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  cursor: pointer;
  list-style: none;
}

.student-tools-drawer summary::-webkit-details-marker {
  display: none;
}

.student-tools-drawer summary::after {
  content: "+";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--hq-accent) 42%, transparent);
  border-radius: 50%;
  color: #fff4c6;
  background: rgb(0 0 0 / 0.28);
  font: 1000 1rem "JetBrains Mono", Consolas, monospace;
  transition: transform 180ms var(--motion), border-color 180ms var(--motion), filter 180ms var(--motion);
}

.student-tools-drawer[open] summary::after {
  content: "-";
  transform: rotate(180deg);
}

.student-tools-drawer summary:hover::after,
.student-tools-drawer summary:focus-visible::after {
  filter: brightness(1.12);
  border-color: color-mix(in srgb, var(--hq-accent) 62%, transparent);
}

.student-tools-drawer summary span,
.student-tools-drawer summary b {
  min-width: 0;
  overflow-wrap: break-word;
}

.student-tools-drawer summary span {
  color: color-mix(in srgb, var(--hq-accent) 86%, #fff4c6);
  font: 1000 0.62rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.student-tools-drawer summary b {
  color: #dfd0a4;
  font-size: 0.76rem;
  line-height: 1.25;
}

.student-hq-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 0 10px 10px;
}

.student-hq-card {
  min-width: 0;
  min-height: 102px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 8px;
  color: #dfd0a4;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.14)),
    rgb(0 0 0 / 0.18);
  cursor: pointer;
  text-align: left;
}

.student-hq-card[data-hq-group="student"] {
  min-height: 118px;
  border-color: color-mix(in srgb, var(--hq-accent) 34%, transparent);
}

.student-hq-card[data-hq-group="school"],
.student-hq-card[data-hq-group="family"] {
  min-height: 92px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.026), rgb(0 0 0 / 0.12)),
    rgb(0 0 0 / 0.14);
}

.student-hq-card span,
.student-hq-card strong,
.student-hq-card b,
.student-hq-card small {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
}

.student-hq-card span {
  color: color-mix(in srgb, var(--hq-accent) 82%, #fff4c6);
  font: 1000 0.56rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.student-hq-card strong {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
  line-height: 1.08;
}

.student-hq-card b {
  color: color-mix(in srgb, var(--hq-accent) 92%, #fff4c6);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1rem;
  line-height: 1;
}

.student-hq-card small {
  color: #cbbd95;
  font-size: 0.64rem;
  line-height: 1.2;
}

.student-hq-card.current {
  border-color: color-mix(in srgb, var(--hq-accent) 52%, transparent);
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--hq-accent) 15%, transparent), transparent 52%),
    rgb(17 12 5 / 0.6);
}

.student-hq-card.ready {
  border-color: rgb(85 183 217 / 0.3);
}

.student-hq-card.complete {
  border-color: rgb(158 255 189 / 0.3);
}

.student-hq-card.locked {
  opacity: 0.74;
}

.student-hq-focus button:hover,
.student-hq-focus button:focus-visible,
.student-hq-card:hover,
.student-hq-card:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
  border-color: color-mix(in srgb, var(--hq-accent) 62%, transparent);
  box-shadow: 0 12px 24px rgb(0 0 0 / 0.22), 0 0 20px color-mix(in srgb, var(--hq-accent) 12%, transparent);
}

.student-hq-focus button:hover,
.student-hq-focus button:focus-visible {
  border-color: rgb(242 201 76 / 0.54);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 10px 24px rgb(242 201 76 / 0.12);
}

.student-hq-focus button:active,
.student-hq-card:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.34);
}

.plan-focus {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 11px;
}

.lesson-director {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, rgb(242 201 76 / 0.12), transparent 42%),
    rgb(0 0 0 / 0.18);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
}

.lesson-director-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.lesson-director-head p {
  margin: 2px 0 0;
  color: #d6c8a2;
  font-size: 0.82rem;
  line-height: 1.28;
}

.lesson-director-head strong {
  min-width: 74px;
  padding: 7px 9px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 8px;
  color: #fff1ad;
  background: rgb(0 0 0 / 0.28);
  text-align: center;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.76rem;
}

.lesson-director-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 6px;
}

.lesson-director-step {
  min-width: 0;
  min-height: 76px;
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.12)),
    rgb(8 6 4 / 0.44);
}

.lesson-director-step span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #151006;
  background: #6e755f;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 1000;
}

.lesson-director-step b {
  color: #f7e8b4;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.8rem;
  line-height: 1.08;
}

.lesson-director-step small {
  color: #aaa088;
  font-size: 0.68rem;
  line-height: 1.16;
  overflow-wrap: break-word;
}

.lesson-director-step.current {
  border-color: rgb(242 201 76 / 0.48);
  background:
    radial-gradient(circle at 20% 10%, rgb(242 201 76 / 0.16), transparent 52%),
    rgb(17 12 5 / 0.72);
  box-shadow: 0 0 18px rgb(242 201 76 / 0.08), inset 0 1px 0 rgb(255 246 215 / 0.09);
}

.lesson-director-step.current span {
  background: var(--gold);
}

.lesson-director-step.complete {
  border-color: rgb(158 255 189 / 0.32);
}

.lesson-director-step.complete span {
  background: #9effbd;
}

.lesson-director-step.locked {
  opacity: 0.62;
}

.first-quest-director,
.academy-offer-board,
.membership-control-board,
.school-dashboard-strip,
.school-backbone,
.media-production-board,
.member-week-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, rgb(242 201 76 / 0.13), transparent 46%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.12)),
    rgb(7 5 3 / 0.42);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
}

.first-quest-director.hidden {
  display: none;
}

.first-quest-director.complete {
  border-color: rgb(158 255 189 / 0.34);
  background:
    radial-gradient(circle at 12% 0%, rgb(158 255 189 / 0.11), transparent 46%),
    rgb(7 5 3 / 0.46);
}

.first-quest-copy,
.academy-offer-copy,
.membership-control-copy,
.school-dashboard-copy,
.school-backbone-copy,
.media-production-copy,
.member-week-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.first-quest-copy h3,
.first-quest-copy p,
.academy-offer-copy h3,
.academy-offer-copy p,
.membership-control-copy h3,
.membership-control-copy p,
.school-dashboard-copy h3,
.school-dashboard-copy p,
.school-backbone-copy h3,
.school-backbone-copy p,
.media-production-copy h3,
.media-production-copy p,
.member-week-copy h3,
.member-week-copy p {
  margin: 0;
}

.first-quest-copy h3,
.academy-offer-copy h3,
.membership-control-copy h3,
.school-dashboard-copy h3,
.school-backbone-copy h3,
.media-production-copy h3,
.member-week-copy h3 {
  margin-top: 2px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.98rem, 1.7vw, 1.22rem);
  line-height: 1.08;
}

.first-quest-copy p,
.academy-offer-copy p,
.membership-control-copy p,
.school-dashboard-copy p,
.school-backbone-copy p,
.media-production-copy p,
.member-week-copy p {
  margin-top: 4px;
  color: #d8c99b;
  font-size: 0.8rem;
  line-height: 1.32;
}

.first-quest-copy strong {
  min-width: 76px;
  padding: 7px 9px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 8px;
  color: #fff1ad;
  background: rgb(0 0 0 / 0.26);
  text-align: center;
  font: 900 0.72rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.first-quest-art {
  position: relative;
  min-height: 108px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.28);
  box-shadow: inset 0 0 22px rgb(242 201 76 / 0.08);
  aspect-ratio: 2.8 / 1;
}

.first-quest-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 48% 52%;
  filter: saturate(1.04) contrast(1.02);
  transform: scale(1.025);
  animation: firstQuestArtDrift 8s ease-in-out infinite alternate;
}

.first-quest-art span {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.22), transparent 32%, transparent 68%, rgb(0 0 0 / 0.2)),
    radial-gradient(circle at 18% 18%, rgb(242 201 76 / 0.18), transparent 34%);
  mix-blend-mode: screen;
}

.first-quest-rail,
.school-dashboard-grid,
.school-backbone-grid,
.media-production-grid,
.media-production-rail {
  display: grid;
  gap: 7px;
}

.first-quest-rail {
  grid-template-columns: 1fr;
}

.first-quest-step,
.school-dashboard-card,
.school-backbone-card {
  min-width: 0;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background: rgb(0 0 0 / 0.18);
}

.first-quest-step {
  min-height: 50px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-content: center;
  align-items: center;
  padding: 8px;
}

.first-quest-step > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #130d05;
  background: #726d59;
  font: 1000 0.68rem "JetBrains Mono", Consolas, monospace;
}

.first-quest-step small,
.first-quest-step b,
.first-quest-step em,
.school-dashboard-card span,
.school-dashboard-card b,
.school-dashboard-card small,
.school-backbone-card span,
.school-backbone-card b,
.school-backbone-card small {
  display: block;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.first-quest-step small,
.school-dashboard-card span,
.school-backbone-card span {
  color: var(--gold);
  font-size: 0.57rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.first-quest-step b,
.school-dashboard-card b,
.school-backbone-card b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.12;
}

.first-quest-step em,
.school-dashboard-card small,
.school-backbone-card small {
  color: #cfc19a;
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1.22;
}

.first-quest-step.current {
  border-color: rgb(242 201 76 / 0.48);
  background:
    radial-gradient(circle at 18% 8%, rgb(242 201 76 / 0.16), transparent 54%),
    rgb(17 12 5 / 0.68);
  box-shadow: 0 0 18px rgb(242 201 76 / 0.08);
  animation: firstQuestCurrent 1.8s ease-in-out infinite;
}

.first-quest-step.current > span,
.first-quest-step.complete > span {
  background: var(--gold);
}

.first-quest-step.complete {
  border-color: rgb(158 255 189 / 0.3);
}

.first-quest-step.complete > span {
  background: #9effbd;
}

.first-quest-step.locked {
  opacity: 0.62;
}

.first-quest-coach {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding-top: 9px;
  border-top: 1px solid rgb(242 201 76 / 0.15);
}

.first-quest-coach span {
  min-width: 78px;
  padding: 6px 8px;
  border: 1px solid rgb(85 183 217 / 0.28);
  border-radius: 999px;
  color: #9ee8ff;
  background: rgb(0 0 0 / 0.24);
  text-align: center;
  font: 900 0.62rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.first-quest-coach p {
  margin: 0;
  color: #e0d0a0;
  font-size: 0.8rem;
  line-height: 1.3;
}

.academy-offer-board {
  overflow: hidden;
  border-color: rgb(242 201 76 / 0.36);
  background:
    radial-gradient(circle at 4% 0%, rgb(242 201 76 / 0.16), transparent 42%),
    radial-gradient(circle at 96% 18%, rgb(85 183 217 / 0.1), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.15)),
    rgb(12 8 4 / 0.52);
}

.academy-offer-board::before {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  border: 1px solid rgb(242 201 76 / 0.12);
  border-radius: 6px;
}

.academy-offer-board > * {
  position: relative;
  z-index: 1;
}

.academy-offer-copy {
  align-items: start;
}

.academy-offer-copy strong {
  min-width: 116px;
  padding: 7px 9px;
  border: 1px solid rgb(242 201 76 / 0.38);
  border-radius: 8px;
  color: #fff1ad;
  background: rgb(0 0 0 / 0.26);
  text-align: center;
  font: 900 0.64rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.school-dashboard-strip {
  border-color: rgb(85 183 217 / 0.22);
  background:
    radial-gradient(circle at 92% 0%, rgb(85 183 217 / 0.11), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.12)),
    rgb(7 5 3 / 0.42);
}

.school-dashboard-grid,
.school-backbone-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.school-dashboard-card,
.school-backbone-card {
  min-height: 82px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 9px;
}

.school-dashboard-card.current,
.school-backbone-card.current {
  border-color: rgb(242 201 76 / 0.4);
  background: rgb(242 201 76 / 0.07);
}

.school-dashboard-card.ready,
.school-backbone-card.ready {
  border-color: rgb(85 183 217 / 0.34);
}

.school-dashboard-card.complete,
.school-backbone-card.complete {
  border-color: rgb(158 255 189 / 0.3);
}

.school-dashboard-card.locked,
.school-backbone-card.locked {
  opacity: 0.72;
}

.school-backbone {
  border-color: rgb(158 255 189 / 0.2);
  background:
    radial-gradient(circle at 10% 0%, rgb(158 255 189 / 0.1), transparent 42%),
    radial-gradient(circle at 92% 70%, rgb(217 107 43 / 0.09), transparent 34%),
    linear-gradient(180deg, rgb(255 246 215 / 0.038), rgb(0 0 0 / 0.15)),
    rgb(6 7 5 / 0.44);
}

.school-backbone-copy h3 {
  color: #efffd7;
}

.school-backbone-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.school-backbone-card {
  min-height: 88px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.15)),
    rgb(0 0 0 / 0.16);
}

.membership-control-board {
  overflow: hidden;
  border-color: rgb(242 201 76 / 0.3);
  background:
    radial-gradient(circle at 0% 0%, rgb(242 201 76 / 0.13), transparent 38%),
    radial-gradient(circle at 100% 10%, rgb(85 183 217 / 0.1), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.15)),
    rgb(8 6 4 / 0.5);
}

.membership-control-board::before,
.membership-control-board::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.membership-control-board::before {
  inset: 9px;
  border: 1px solid rgb(242 201 76 / 0.1);
  border-radius: 6px;
}

.membership-control-board::after {
  width: 180px;
  height: 180px;
  right: -80px;
  top: -96px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(242 201 76 / 0.2), transparent 64%);
  opacity: 0.8;
}

.membership-control-board > * {
  position: relative;
  z-index: 1;
}

.membership-control-board[data-membership-state="synced"] {
  border-color: rgb(158 255 189 / 0.38);
}

.membership-control-copy {
  align-items: start;
}

.membership-control-copy strong {
  min-width: 132px;
  padding: 7px 9px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 8px;
  color: #fff1ad;
  background: rgb(0 0 0 / 0.26);
  text-align: center;
  font: 900 0.64rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.membership-control-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.membership-control-card {
  min-width: 0;
  min-height: 86px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.035), rgb(0 0 0 / 0.13)),
    rgb(0 0 0 / 0.16);
}

.membership-control-card.current {
  border-color: rgb(242 201 76 / 0.42);
  background: rgb(242 201 76 / 0.07);
}

.membership-control-card.complete {
  border-color: rgb(158 255 189 / 0.32);
}

.membership-control-card.locked {
  opacity: 0.72;
}

.membership-control-card span,
.membership-control-card b,
.membership-control-card small {
  min-width: 0;
  display: block;
  overflow-wrap: break-word;
}

.membership-control-card span {
  color: var(--gold);
  font-size: 0.57rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.membership-control-card b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.1;
}

.membership-control-card small {
  color: #cfc19a;
  font-size: 0.66rem;
  line-height: 1.22;
}

.membership-control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.membership-control-actions button {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), border-color 180ms var(--motion);
}

.membership-control-actions button:first-child {
  border: 1px solid rgb(242 201 76 / 0.42);
  color: #130d05;
  background: linear-gradient(180deg, #fff0a3, var(--gold));
}

.membership-control-actions button:last-child {
  border: 1px solid rgb(85 183 217 / 0.28);
  color: #dff6ff;
  background: rgb(85 183 217 / 0.08);
}

.membership-control-actions button:hover,
.membership-control-actions button:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.membership-control-actions button:active {
  transform: translateY(1px);
}

.member-access-audit {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(85 183 217 / 0.2);
  border-radius: 8px;
  background:
    radial-gradient(circle at 8% 0%, rgb(85 183 217 / 0.13), transparent 40%),
    linear-gradient(180deg, rgb(255 246 215 / 0.035), rgb(0 0 0 / 0.16)),
    rgb(0 0 0 / 0.18);
}

.member-access-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.member-access-copy h3,
.member-access-copy p {
  margin: 0;
}

.member-access-copy h3 {
  margin-top: 3px;
  color: #dff6ff;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.28rem);
  line-height: 1.08;
}

.member-access-copy p {
  max-width: 76ch;
  color: #bfd3d8;
  font-size: 0.78rem;
  line-height: 1.32;
}

.member-access-copy strong {
  min-width: 112px;
  padding: 7px 9px;
  border: 1px solid rgb(85 183 217 / 0.34);
  border-radius: 8px;
  color: #dff6ff;
  background: rgb(0 0 0 / 0.22);
  text-align: center;
  font: 1000 0.64rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.member-access-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.member-access-card {
  min-width: 0;
  min-height: 84px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background: rgb(0 0 0 / 0.18);
}

.member-access-card.ready,
.member-access-card.complete {
  border-color: rgb(158 255 189 / 0.3);
}

.member-access-card.current {
  border-color: rgb(242 201 76 / 0.32);
}

.member-access-card.locked {
  opacity: 0.68;
}

.member-access-card span,
.member-access-card b,
.member-access-card small {
  min-width: 0;
  display: block;
  overflow-wrap: break-word;
}

.member-access-card span {
  color: #9ee8ff;
  font-size: 0.56rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.member-access-card b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.08;
}

.member-access-card small {
  color: #c5d5d8;
  font-size: 0.64rem;
  line-height: 1.18;
}

.media-production-board {
  overflow: hidden;
  border-color: rgb(181 156 255 / 0.24);
  background:
    radial-gradient(circle at 6% 0%, rgb(181 156 255 / 0.13), transparent 38%),
    radial-gradient(circle at 100% 10%, rgb(85 183 217 / 0.11), transparent 36%),
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.16)),
    rgb(5 6 10 / 0.48);
}

.media-production-board[data-media-state="member-ready"],
.media-production-board[data-media-state="cloud-ready"] {
  border-color: rgb(158 255 189 / 0.28);
}

.media-production-copy {
  align-items: start;
}

.media-production-copy h3 {
  color: #f2edff;
}

.media-production-copy strong {
  min-width: 150px;
  padding: 7px 9px;
  border: 1px solid rgb(181 156 255 / 0.32);
  border-radius: 8px;
  color: #e5d9ff;
  background: rgb(0 0 0 / 0.28);
  text-align: center;
  font: 900 0.64rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.media-production-main {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.28fr);
  gap: 9px;
  align-items: stretch;
}

.media-production-visual {
  position: relative;
  min-height: 178px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(181 156 255 / 0.22);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.28);
}

.media-production-visual::before,
.media-production-visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.media-production-visual::before {
  width: 74px;
  height: 74px;
  right: 12px;
  bottom: 12px;
  border: 1px solid rgb(242 201 76 / 0.38);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent, rgb(242 201 76 / 0.42), transparent 48%),
    radial-gradient(circle, rgb(85 183 217 / 0.18), transparent 62%);
  box-shadow: 0 0 28px rgb(181 156 255 / 0.18);
  animation: mediaCinemaSigil 8s linear infinite;
}

.media-production-visual::after {
  left: 13px;
  bottom: 13px;
  width: min(56%, 180px);
  height: 5px;
  border-radius: 99px;
  background:
    linear-gradient(90deg, rgb(158 255 189 / 0.86), rgb(85 183 217 / 0.72), rgb(242 201 76 / 0.72));
  box-shadow: 0 0 18px rgb(85 183 217 / 0.28);
  animation: mediaAudioPulse 1.8s ease-in-out infinite;
}

.media-production-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 48%;
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.03);
  animation: firstQuestArtDrift 9s ease-in-out infinite alternate;
}

.media-production-visual span {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 42%, rgb(0 0 0 / 0.38)),
    radial-gradient(circle at 78% 18%, rgb(181 156 255 / 0.24), transparent 34%);
  mix-blend-mode: screen;
}

.media-production-grid,
.media-production-rail {
  display: grid;
  gap: 7px;
}

.media-production-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.media-production-card,
.media-production-step {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.035), rgb(0 0 0 / 0.13)),
    rgb(0 0 0 / 0.16);
}

.media-production-card {
  min-height: 82px;
  align-content: start;
  padding: 9px;
}

.media-production-card.current,
.media-production-step.current {
  border-color: rgb(242 201 76 / 0.34);
}

.media-production-card.ready,
.media-production-step.ready {
  border-color: rgb(85 183 217 / 0.32);
}

.media-production-card.complete,
.media-production-step.complete {
  border-color: rgb(158 255 189 / 0.3);
}

.media-production-card.locked,
.media-production-step.locked {
  opacity: 0.74;
}

.media-production-card span,
.media-production-card b,
.media-production-card small,
.media-production-step span,
.media-production-step b,
.media-production-step small {
  min-width: 0;
  display: block;
  overflow-wrap: break-word;
}

.media-production-card span,
.media-production-step span {
  color: #c9b9ff;
  font-size: 0.57rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.media-production-card b,
.media-production-step b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.84rem;
  line-height: 1.1;
}

.media-production-card small,
.media-production-step small {
  color: #cdc0df;
  font-size: 0.66rem;
  line-height: 1.22;
}

.media-production-rail {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.media-production-step {
  min-height: 76px;
  align-content: start;
  padding: 8px;
}

.media-director-cue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, minmax(0, 0.62fr));
  gap: 7px;
  align-items: stretch;
  padding: 9px;
  border: 1px solid rgb(181 156 255 / 0.18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgb(181 156 255 / 0.08), transparent 42%),
    rgb(0 0 0 / 0.18);
}

.media-director-cue > div,
.media-director-cue article {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: start;
}

.media-director-cue > div {
  padding: 4px 5px;
}

.media-director-cue article {
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.09);
  border-radius: 7px;
  background: rgb(0 0 0 / 0.18);
}

.media-director-cue span,
.media-director-cue b,
.media-director-cue small,
.media-director-cue p {
  min-width: 0;
  margin: 0;
  display: block;
  overflow-wrap: break-word;
}

.media-director-cue span {
  color: #c9b9ff;
  font-size: 0.56rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.media-director-cue b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.08;
}

.media-director-cue p,
.media-director-cue small {
  color: #d7ccea;
  font-size: 0.66rem;
  line-height: 1.22;
}

@keyframes mediaCinemaSigil {
  to {
    transform: rotate(360deg);
  }
}

@keyframes mediaAudioPulse {
  0%,
  100% {
    transform: scaleX(0.72);
    opacity: 0.62;
  }

  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.today-detail-drawer,
.school-systems-drawer {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.035), rgb(0 0 0 / 0.12)),
    rgb(0 0 0 / 0.16);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.06);
}

.today-detail-drawer summary,
.school-systems-drawer summary {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  cursor: pointer;
  list-style: none;
}

.today-detail-drawer summary::-webkit-details-marker,
.school-systems-drawer summary::-webkit-details-marker {
  display: none;
}

.today-detail-drawer summary::after,
.school-systems-drawer summary::after {
  content: "+";
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.32);
  border-radius: 7px;
  color: var(--gold);
  background: rgb(0 0 0 / 0.24);
  font: 1000 0.9rem "JetBrains Mono", Consolas, monospace;
}

.today-detail-drawer[open] summary::after,
.school-systems-drawer[open] summary::after {
  content: "-";
}

.today-detail-drawer summary span,
.today-detail-drawer summary b,
.school-systems-drawer summary span,
.school-systems-drawer summary b {
  min-width: 0;
  overflow-wrap: break-word;
}

.today-detail-drawer summary span,
.school-systems-drawer summary span {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-weight: 900;
  line-height: 1.08;
}

.today-detail-drawer summary b,
.school-systems-drawer summary b {
  color: #bfb28e;
  font-size: 0.72rem;
  line-height: 1.25;
}

.today-detail-drawer summary:hover,
.today-detail-drawer summary:focus-visible,
.school-systems-drawer summary:hover,
.school-systems-drawer summary:focus-visible {
  background: rgb(255 246 215 / 0.04);
}

.today-detail-body,
.school-systems-body {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.school-systems-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.school-systems-body .membership-control-board,
.school-systems-body .media-production-board {
  grid-column: 1 / -1;
}

.today-detail-body .plan-focus,
.today-detail-body .lesson-director,
.today-detail-body .first-quest-director,
.today-detail-body .plan-metrics,
.today-detail-body .plan-steps {
  margin-top: 0;
}

.school-systems-body .school-dashboard-strip,
.school-systems-body .school-backbone {
  margin-top: 0;
}

.school-systems-body .membership-control-board,
.school-systems-body .media-production-board {
  margin-top: 0;
}

.member-week-panel {
  position: relative;
  overflow: hidden;
  border-color: rgb(242 201 76 / 0.28);
  background:
    radial-gradient(circle at 8% 4%, rgb(242 201 76 / 0.14), transparent 38%),
    radial-gradient(circle at 84% 12%, rgb(85 183 217 / 0.1), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.18)),
    rgb(8 6 4 / 0.52);
}

.member-week-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgb(242 201 76 / 0.07), transparent),
    radial-gradient(ellipse at 50% 0%, rgb(242 201 76 / 0.08), transparent 58%);
  opacity: 0.62;
}

.member-week-panel > * {
  position: relative;
  z-index: 1;
}

.member-week-copy {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.member-week-copy h3 {
  color: #fff1ad;
}

.member-week-copy strong {
  min-width: 82px;
  padding: 7px 9px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 8px;
  color: #120d06;
  background: linear-gradient(180deg, #fff0aa, var(--gold));
  text-align: center;
  font: 1000 0.7rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.member-pass-sigil {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.5);
  border-radius: 12px;
  background:
    radial-gradient(circle, rgb(242 201 76 / 0.24), transparent 64%),
    rgb(0 0 0 / 0.28);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.14), 0 0 22px rgb(242 201 76 / 0.12);
}

.member-pass-sigil::before,
.member-pass-sigil::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 8px;
  transform: rotate(45deg);
}

.member-pass-sigil::after {
  inset: 12px;
  border-color: rgb(85 183 217 / 0.22);
  transform: rotate(0deg);
}

.member-pass-sigil span {
  position: relative;
  z-index: 1;
  color: #fff4c6;
  font: 1000 0.78rem Cinzel, Georgia, serif;
  letter-spacing: 0.08em;
}

.member-week-arc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 9px;
}

.member-week-arc-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid rgb(255 246 215 / 0.11);
  border-radius: 8px;
  color: #dfd1a4;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.14)),
    rgb(0 0 0 / 0.18);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.06);
  cursor: pointer;
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, filter 180ms ease;
}

.member-week-arc-card:hover,
.member-week-arc-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgb(242 201 76 / 0.42);
  filter: brightness(1.08);
}

.member-week-arc-card:active {
  transform: translateY(1px);
}

.member-week-arc-card.current {
  border-color: rgb(242 201 76 / 0.48);
  background:
    radial-gradient(circle at 8% 0%, rgb(242 201 76 / 0.16), transparent 46%),
    rgb(18 13 6 / 0.64);
}

.member-week-arc-card.complete {
  border-color: rgb(158 255 189 / 0.34);
}

.member-week-arc-card.locked {
  cursor: not-allowed;
  opacity: 0.58;
}

.member-week-arc-card span,
.member-week-arc-card small,
.member-week-arc-card strong {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 1000;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.member-week-arc-card span {
  color: var(--gold);
  font-size: 0.62rem;
}

.member-week-arc-card b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.05;
}

.member-week-arc-card small {
  color: #bfb18d;
  font-size: 0.58rem;
}

.member-week-arc-card strong {
  justify-self: end;
  padding: 5px 7px;
  border: 1px solid rgb(242 201 76 / 0.26);
  border-radius: 7px;
  color: #100d06;
  background: linear-gradient(180deg, #fff1b4, var(--gold));
  font-size: 0.64rem;
}

.member-week-arc-card i {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 246 215 / 0.08);
}

.member-week-arc-card i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), #9ee8ff);
}

.member-week-arc-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: #cfc19a;
  font-size: 0.72rem;
  line-height: 1.3;
}

.member-week-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(136px, 1fr));
  gap: 8px;
}

.week-one-course-pack {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 8% 0%, rgb(242 201 76 / 0.12), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.17)),
    rgb(0 0 0 / 0.18);
}

.week-one-course-pack-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.week-one-course-pack-head h3,
.week-one-course-pack-head p {
  margin: 0;
}

.week-one-course-pack-head h3 {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.9vw, 1.32rem);
  line-height: 1.08;
}

.week-one-course-pack-head p {
  max-width: 76ch;
  color: #d9c896;
  font-size: 0.78rem;
  line-height: 1.32;
}

.week-one-course-pack-head strong {
  min-width: 106px;
  padding: 7px 9px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 8px;
  color: #120d06;
  background: linear-gradient(180deg, #fff0aa, var(--gold));
  text-align: center;
  font: 1000 0.65rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.week-one-course-pack-metrics,
.week-one-course-pack-grid {
  display: grid;
  gap: 7px;
}

.week-one-course-pack-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.week-one-course-pack-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.week-one-course-pack-metrics article,
.week-one-course-pack-card {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background: rgb(0 0 0 / 0.18);
}

.week-one-course-pack-card {
  min-height: 112px;
}

.week-one-course-pack-card.complete {
  border-color: rgb(158 255 189 / 0.3);
}

.week-one-course-pack-card.current {
  border-color: rgb(242 201 76 / 0.36);
}

.week-one-course-pack-card.locked {
  opacity: 0.7;
}

.week-one-course-pack-metrics span,
.week-one-course-pack-metrics b,
.week-one-course-pack-metrics small,
.week-one-course-pack-card span,
.week-one-course-pack-card b,
.week-one-course-pack-card small,
.week-one-course-pack-card p {
  min-width: 0;
  display: block;
  margin: 0;
  overflow-wrap: break-word;
}

.week-one-course-pack-metrics span,
.week-one-course-pack-card span {
  color: var(--gold);
  font-size: 0.56rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.week-one-course-pack-metrics b,
.week-one-course-pack-card b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.08;
}

.week-one-course-pack-metrics small,
.week-one-course-pack-card small,
.week-one-course-pack-card p {
  color: #d3c49b;
  font-size: 0.64rem;
  line-height: 1.18;
}

.member-week-card {
  --week-accent: var(--gold);
  min-width: 0;
  min-height: 214px;
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--week-accent) 32%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.2)),
    rgb(0 0 0 / 0.16);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
}

.member-week-card.math { --week-accent: var(--gold); }
.member-week-card.science { --week-accent: #6fcf97; }
.member-week-card.physics { --week-accent: var(--aether); }
.member-week-card.engineering { --week-accent: var(--ember); }
.member-week-card.ai { --week-accent: #b59cff; }

.member-week-card.current {
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--week-accent) 18%, transparent), transparent 48%),
    rgb(17 12 5 / 0.68);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.09), 0 0 18px color-mix(in srgb, var(--week-accent) 12%, transparent);
}

.member-week-card.complete {
  border-color: rgb(158 255 189 / 0.32);
}

.member-week-card.locked {
  opacity: 0.66;
}

.member-week-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.member-week-card-head span,
.member-week-card-head strong {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.member-week-card-head span {
  color: color-mix(in srgb, var(--week-accent) 82%, #fff4c6);
}

.member-week-card-head strong {
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--week-accent) 32%, transparent);
  border-radius: 999px;
  color: #f6e7b4;
  background: rgb(0 0 0 / 0.24);
}

.member-week-card h4,
.member-week-card p {
  margin: 0;
}

.member-week-card h4 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.94rem;
  line-height: 1.06;
  overflow-wrap: break-word;
}

.member-week-card p {
  color: #d3c49b;
  font-size: 0.72rem;
  line-height: 1.24;
}

.member-week-meta {
  display: grid;
  gap: 5px;
}

.member-week-meta span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 5px 6px;
  border: 1px solid rgb(255 246 215 / 0.08);
  border-radius: 6px;
  background: rgb(0 0 0 / 0.16);
}

.member-week-meta b,
.member-week-meta small {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
}

.member-week-meta b {
  color: color-mix(in srgb, var(--week-accent) 86%, #fff4c6);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  line-height: 1.16;
}

.member-week-meta small {
  color: #a99d80;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.12;
  text-transform: uppercase;
}

.member-week-action {
  min-height: 36px;
  align-self: end;
  border: 1px solid color-mix(in srgb, var(--week-accent) 48%, transparent);
  border-radius: 8px;
  color: #120d06;
  background: linear-gradient(180deg, #fff2b8, var(--week-accent));
  box-shadow: 0 3px 0 rgb(0 0 0 / 0.34);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 1000;
}

.member-week-action:disabled {
  cursor: not-allowed;
  color: #766f5d;
  background: rgb(255 246 215 / 0.1);
  box-shadow: none;
}

.member-classroom-panel {
  --classroom-accent: var(--gold);
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--classroom-accent) 34%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--classroom-accent) 17%, transparent), transparent 42%),
    linear-gradient(135deg, rgb(255 246 215 / 0.052), transparent 42%),
    rgb(0 0 0 / 0.18);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.member-classroom-panel[data-domain="math"] { --classroom-accent: var(--gold); }
.member-classroom-panel[data-domain="science"] { --classroom-accent: #6fcf97; }
.member-classroom-panel[data-domain="physics"] { --classroom-accent: var(--aether); }
.member-classroom-panel[data-domain="engineering"] { --classroom-accent: var(--ember); }
.member-classroom-panel[data-domain="ai"] { --classroom-accent: #b59cff; }

.member-classroom-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.member-classroom-head h3,
.member-classroom-head p,
.member-classroom-card p {
  margin: 0;
}

.member-classroom-head h3 {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.28rem);
  line-height: 1.08;
  text-wrap: balance;
}

.member-classroom-head p {
  margin-top: 4px;
  max-width: 68ch;
  color: #d8c99b;
  font-size: 0.82rem;
  line-height: 1.34;
}

.member-classroom-head button {
  min-height: 40px;
  min-width: 128px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--classroom-accent) 52%, transparent);
  border-radius: 8px;
  color: #120d06;
  background: linear-gradient(180deg, #fff2b8, var(--classroom-accent));
  box-shadow: 0 4px 0 rgb(0 0 0 / 0.34), inset 0 1px 0 rgb(255 255 255 / 0.42);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 1000;
}

.member-classroom-head button:hover,
.member-classroom-head button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.member-classroom-head button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.34), inset 0 1px 0 rgb(255 255 255 / 0.34);
}

.member-classroom-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 8px;
}

.member-classroom-card {
  min-width: 0;
  min-height: 96px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.16)),
    rgb(0 0 0 / 0.16);
}

.member-classroom-card.objective,
.member-classroom-card.parent {
  border-color: color-mix(in srgb, var(--classroom-accent) 28%, transparent);
}

.member-classroom-card span {
  color: color-mix(in srgb, var(--classroom-accent) 84%, #fff4c6);
  font: 1000 0.6rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.member-classroom-card p {
  color: #e0d1a1;
  font-size: 0.76rem;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.member-lesson-studio {
  --studio-accent: var(--classroom-accent);
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--studio-accent) 36%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--studio-accent) 17%, transparent), transparent 42%),
    radial-gradient(circle at 90% 70%, rgb(85 183 217 / 0.08), transparent 38%),
    rgb(0 0 0 / 0.18);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.member-lesson-studio[data-domain="math"] { --studio-accent: var(--gold); }
.member-lesson-studio[data-domain="science"] { --studio-accent: #6fcf97; }
.member-lesson-studio[data-domain="physics"] { --studio-accent: var(--aether); }
.member-lesson-studio[data-domain="engineering"] { --studio-accent: var(--ember); }
.member-lesson-studio[data-domain="ai"] { --studio-accent: #b59cff; }

.member-studio-main {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(170px, 0.75fr);
  gap: 10px;
  align-items: stretch;
}

.member-studio-stage,
.member-studio-visual {
  min-width: 0;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.18);
}

.member-studio-stage {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
}

.member-studio-stage h4,
.member-studio-stage p,
.member-studio-callout,
.member-studio-visual p {
  margin: 0;
}

.member-studio-stage h4 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  line-height: 1.05;
  text-wrap: balance;
}

.member-studio-stage p {
  max-width: 70ch;
  color: #ead9a9;
  font-size: 0.9rem;
  line-height: 1.38;
}

.member-studio-callout {
  padding: 9px 10px;
  border-left: 3px solid var(--studio-accent);
  border-radius: 6px;
  color: #fff2bc;
  background: rgb(255 246 215 / 0.055);
  font-size: 0.8rem;
  line-height: 1.32;
}

.member-studio-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 156px;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
}

.member-studio-visual::before,
.member-studio-visual::after,
.member-studio-visual span {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.member-studio-visual::before {
  background:
    linear-gradient(90deg, rgb(255 246 215 / 0.04) 1px, transparent 1px),
    linear-gradient(rgb(255 246 215 / 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--studio-accent) 28%, transparent), transparent 46%);
  background-size: 28px 28px, 28px 28px, auto;
  opacity: 0.72;
}

.member-studio-visual::after {
  inset: 24px;
  border: 1px solid color-mix(in srgb, var(--studio-accent) 42%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 28px color-mix(in srgb, var(--studio-accent) 18%, transparent), inset 0 0 24px rgb(0 0 0 / 0.36);
  animation: memberStudioOrbit 4.8s linear infinite;
}

.member-studio-visual span {
  background:
    linear-gradient(90deg, transparent 0 24%, color-mix(in srgb, var(--studio-accent) 48%, transparent) 25% 26%, transparent 27% 73%, color-mix(in srgb, var(--studio-accent) 34%, transparent) 74% 75%, transparent 76%),
    linear-gradient(0deg, transparent 0 30%, color-mix(in srgb, var(--studio-accent) 34%, transparent) 31% 32%, transparent 33% 67%, color-mix(in srgb, var(--studio-accent) 44%, transparent) 68% 69%, transparent 70%);
  opacity: 0.62;
}

.member-studio-visual b,
.member-studio-visual p {
  position: relative;
  z-index: 1;
}

.member-studio-visual b {
  color: #100d06;
  width: min(112px, 56%);
  min-height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--studio-accent) 70%, transparent);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff2b8, var(--studio-accent));
  box-shadow: 0 0 26px color-mix(in srgb, var(--studio-accent) 22%, transparent), 0 5px 0 rgb(0 0 0 / 0.3);
  font: 1000 clamp(0.9rem, 2vw, 1.18rem) "JetBrains Mono", Consolas, monospace;
}

.member-studio-visual p {
  max-width: 26ch;
  color: #d9caa0;
  font-size: 0.72rem;
  line-height: 1.25;
}

.member-studio-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.member-studio-steps button {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 7px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 8px;
  color: #d8caa0;
  background: rgb(0 0 0 / 0.18);
  cursor: pointer;
  text-align: left;
}

.member-studio-steps button span {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #120d06;
  background: #6f6956;
  font: 1000 0.64rem "JetBrains Mono", Consolas, monospace;
}

.member-studio-steps button b {
  min-width: 0;
  overflow-wrap: break-word;
  font: 1000 0.64rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.member-studio-steps button.current {
  border-color: color-mix(in srgb, var(--studio-accent) 52%, transparent);
  color: #fff2bc;
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--studio-accent) 16%, transparent), transparent 48%),
    rgb(18 12 5 / 0.58);
}

.member-studio-steps button.current span,
.member-studio-steps button.complete span {
  background: var(--studio-accent);
}

.member-studio-steps button.complete {
  border-color: rgb(158 255 189 / 0.28);
}

.member-studio-actions {
  display: grid;
  grid-template-columns: auto auto minmax(150px, 1fr);
  gap: 8px;
  align-items: center;
}

.member-studio-actions button {
  min-height: 40px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 1000;
}

.member-studio-back,
.member-studio-voice {
  border: 1px solid rgb(255 246 215 / 0.16);
  color: #f0dfad;
  background: rgb(0 0 0 / 0.24);
}

.member-studio-back:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.member-studio-primary {
  border: 1px solid color-mix(in srgb, var(--studio-accent) 56%, transparent);
  color: #120d06;
  background: linear-gradient(180deg, #fff2b8, var(--studio-accent));
  box-shadow: 0 4px 0 rgb(0 0 0 / 0.34), inset 0 1px 0 rgb(255 255 255 / 0.42);
}

.member-studio-actions button:not(:disabled):hover,
.member-studio-actions button:not(:disabled):focus-visible,
.member-studio-steps button:hover,
.member-studio-steps button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.member-studio-actions button:not(:disabled):active,
.member-studio-steps button:active {
  transform: translateY(1px);
}

.week-one-certificate {
  --certificate-accent: var(--gold);
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.36);
  border-radius: 8px;
  background:
    radial-gradient(circle at 10% 8%, rgb(242 201 76 / 0.16), transparent 38%),
    radial-gradient(circle at 92% 18%, rgb(111 207 151 / 0.11), transparent 42%),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.2)),
    rgb(8 6 4 / 0.46);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 14px 30px rgb(0 0 0 / 0.16);
}

.week-one-certificate::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(255 246 215 / 0.045) 1px, transparent 1px),
    linear-gradient(rgb(255 246 215 / 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}

.week-one-certificate-main,
.week-one-certificate-grid,
.week-one-certificate-footer {
  position: relative;
  z-index: 1;
}

.week-one-certificate-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.week-one-seal {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.55);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgb(242 201 76 / 0.98), rgb(111 207 151 / 0.72), rgb(85 183 217 / 0.76), rgb(242 201 76 / 0.98)),
    rgb(0 0 0 / 0.24);
  box-shadow: 0 0 24px rgb(242 201 76 / 0.14), inset 0 0 0 7px rgb(8 6 4 / 0.78);
}

.week-one-seal span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #161006;
  background: #fff0aa;
  font: 1000 0.72rem "JetBrains Mono", Consolas, monospace;
}

.week-one-certificate h3,
.week-one-certificate p {
  margin: 0;
}

.week-one-certificate h3 {
  margin-top: 3px;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.05rem, 2vw, 1.42rem);
  line-height: 1.06;
  text-wrap: balance;
}

.week-one-certificate-main p {
  margin-top: 4px;
  max-width: 70ch;
  color: #dfd0a2;
  font-size: 0.82rem;
  line-height: 1.34;
}

.week-one-certificate-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(122px, 1fr));
  gap: 7px;
  align-items: center;
}

.week-one-certificate-main button,
.week-one-ceremony-actions button {
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid rgb(242 201 76 / 0.48);
  border-radius: 8px;
  color: #120d06;
  background: linear-gradient(180deg, #fff2b8, var(--gold));
  box-shadow: 0 4px 0 rgb(0 0 0 / 0.34), inset 0 1px 0 rgb(255 255 255 / 0.42);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 1000;
}

.week-one-certificate-main button:disabled {
  cursor: not-allowed;
  color: #8d8163;
  border-color: rgb(255 246 215 / 0.14);
  background: rgb(255 246 215 / 0.08);
  box-shadow: none;
}

.week-one-certificate-main button:not(:disabled):hover,
.week-one-certificate-main button:not(:disabled):focus-visible,
.week-one-ceremony-actions button:hover,
.week-one-ceremony-actions button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.week-one-certificate-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.week-one-certificate-card {
  --artifact-accent: var(--gold);
  min-width: 0;
  min-height: 104px;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--artifact-accent) 28%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.18)),
    rgb(0 0 0 / 0.18);
}

.week-one-certificate-card.math { --artifact-accent: var(--gold); }
.week-one-certificate-card.science { --artifact-accent: #6fcf97; }
.week-one-certificate-card.physics { --artifact-accent: var(--aether); }
.week-one-certificate-card.engineering { --artifact-accent: var(--ember); }
.week-one-certificate-card.ai { --artifact-accent: #b59cff; }

.week-one-certificate-card.complete {
  border-color: rgb(158 255 189 / 0.36);
  background:
    radial-gradient(circle at 18% 0%, rgb(158 255 189 / 0.12), transparent 44%),
    rgb(0 0 0 / 0.18);
}

.week-one-certificate-card.current {
  border-color: color-mix(in srgb, var(--artifact-accent) 54%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--artifact-accent) 12%, transparent);
}

.week-one-certificate-card span,
.week-one-certificate-card small {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 1000;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.week-one-certificate-card span {
  color: color-mix(in srgb, var(--artifact-accent) 82%, #fff4c6);
  font-size: 0.58rem;
}

.week-one-certificate-card b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.08;
  overflow-wrap: break-word;
}

.week-one-certificate-card small {
  color: #9fb1a5;
  font-size: 0.54rem;
}

.week-one-certificate-card p {
  color: #d6c799;
  font-size: 0.7rem;
  line-height: 1.22;
  overflow-wrap: break-word;
}

.week-one-certificate-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.18);
}

.week-one-certificate-footer p {
  color: #e5d5a4;
  font-size: 0.78rem;
  line-height: 1.32;
}

.week-one-certificate-footer strong {
  min-width: 150px;
  padding: 7px 9px;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 8px;
  color: #fff0aa;
  background: rgb(0 0 0 / 0.22);
  font: 1000 0.64rem "JetBrains Mono", Consolas, monospace;
  text-align: center;
  text-transform: uppercase;
}

.week-one-certificate[data-status="complete"] {
  border-color: rgb(158 255 189 / 0.42);
}

.week-one-certificate[data-status="complete"] .week-one-seal {
  animation: certificateSealPulse 2.8s ease-in-out infinite;
}

.week-two-portfolio {
  margin-top: 12px;
  border-color: rgb(85 183 217 / 0.34);
  background:
    radial-gradient(circle at 12% 8%, rgb(85 183 217 / 0.15), transparent 38%),
    radial-gradient(circle at 88% 16%, rgb(181 156 255 / 0.11), transparent 42%),
    linear-gradient(180deg, rgb(191 243 255 / 0.052), rgb(0 0 0 / 0.2)),
    rgb(5 10 13 / 0.48);
}

.week-two-portfolio .mini-label {
  color: #9ee8ff;
}

.week-two-portfolio h3 {
  color: #dbf7ff;
}

.week-two-portfolio .week-one-seal {
  border-color: rgb(85 183 217 / 0.58);
  background:
    conic-gradient(from 24deg, rgb(85 183 217 / 0.96), rgb(181 156 255 / 0.74), rgb(242 201 76 / 0.72), rgb(85 183 217 / 0.96)),
    rgb(0 0 0 / 0.25);
  box-shadow: 0 0 24px rgb(85 183 217 / 0.14), inset 0 0 0 7px rgb(5 10 13 / 0.78);
}

.week-two-portfolio .week-one-seal span {
  color: #061419;
  background: #bff3ff;
}

.week-two-portfolio .week-one-certificate-main button {
  border-color: rgb(85 183 217 / 0.48);
  background: linear-gradient(180deg, #dcfbff, #55b7d9);
}

.week-two-portfolio .week-one-certificate-main button:disabled {
  color: #78929a;
  border-color: rgb(191 243 255 / 0.14);
  background: rgb(191 243 255 / 0.08);
}

.week-two-portfolio .week-one-certificate-footer strong {
  border-color: rgb(85 183 217 / 0.3);
  color: #bff3ff;
}

.week-three-bridge {
  margin-top: 12px;
  border-color: rgb(242 201 76 / 0.42);
  background:
    radial-gradient(circle at 14% 10%, rgb(242 201 76 / 0.15), transparent 38%),
    radial-gradient(circle at 88% 22%, rgb(217 107 43 / 0.14), transparent 40%),
    linear-gradient(135deg, rgb(74 45 18 / 0.36), rgb(0 0 0 / 0.2)),
    rgb(12 8 5 / 0.52);
}

.week-three-bridge::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgb(242 201 76 / 0.14);
  border-radius: 8px;
  background:
    linear-gradient(35deg, transparent 0 47%, rgb(242 201 76 / 0.08) 48% 49%, transparent 50% 100%),
    linear-gradient(145deg, transparent 0 47%, rgb(217 107 43 / 0.08) 48% 49%, transparent 50% 100%);
  background-size: 96px 96px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}

.week-three-bridge .mini-label {
  color: #f6cf65;
}

.week-three-bridge h3 {
  color: #fff2b8;
}

.week-three-bridge .week-one-seal {
  border-color: rgb(242 201 76 / 0.64);
  background:
    conic-gradient(from 12deg, rgb(242 201 76 / 0.98), rgb(217 107 43 / 0.78), rgb(111 207 151 / 0.62), rgb(242 201 76 / 0.98)),
    rgb(0 0 0 / 0.26);
  box-shadow: 0 0 26px rgb(242 201 76 / 0.16), inset 0 0 0 7px rgb(12 8 5 / 0.78);
}

.week-three-bridge .week-one-seal span {
  color: #171006;
  background: #ffe8a0;
}

.week-three-bridge .week-one-certificate-main button {
  border-color: rgb(242 201 76 / 0.5);
  background: linear-gradient(180deg, #fff0aa, #d96b2b);
}

.week-three-bridge .week-one-certificate-main button:disabled {
  color: #9a8063;
  border-color: rgb(255 246 215 / 0.14);
  background: rgb(255 246 215 / 0.08);
}

.week-three-bridge-blueprint {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.week-three-bridge-blueprint article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 104px;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, rgb(242 201 76 / 0.09), transparent 44%),
    rgb(0 0 0 / 0.2);
}

.week-three-bridge-blueprint span {
  color: var(--gold);
  font: 1000 0.58rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.week-three-bridge-blueprint b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  line-height: 1.08;
}

.week-three-bridge-blueprint p {
  color: #d8c89a;
  font-size: 0.72rem;
  line-height: 1.32;
}

.week-three-bridge .week-one-certificate-footer strong {
  border-color: rgb(242 201 76 / 0.3);
  color: #fff0aa;
}

.week-four-guild {
  margin-top: 12px;
  border-color: rgb(111 207 151 / 0.38);
  background:
    radial-gradient(circle at 12% 10%, rgb(111 207 151 / 0.15), transparent 38%),
    radial-gradient(circle at 84% 18%, rgb(242 201 76 / 0.13), transparent 42%),
    radial-gradient(circle at 76% 90%, rgb(85 183 217 / 0.12), transparent 36%),
    linear-gradient(135deg, rgb(12 36 24 / 0.48), rgb(0 0 0 / 0.2)),
    rgb(4 12 9 / 0.56);
}

.week-four-guild::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgb(111 207 151 / 0.14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 0 48%, rgb(111 207 151 / 0.08) 49% 50%, transparent 51% 100%),
    linear-gradient(0deg, transparent 0 48%, rgb(242 201 76 / 0.07) 49% 50%, transparent 51% 100%);
  background-size: 76px 76px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}

.week-four-guild .mini-label {
  color: #9effbd;
}

.week-four-guild h3 {
  color: #eaffd8;
}

.week-four-guild .week-one-seal {
  border-color: rgb(111 207 151 / 0.58);
  background:
    conic-gradient(from 34deg, rgb(111 207 151 / 0.96), rgb(242 201 76 / 0.8), rgb(85 183 217 / 0.7), rgb(111 207 151 / 0.96)),
    rgb(0 0 0 / 0.26);
  box-shadow: 0 0 26px rgb(111 207 151 / 0.15), inset 0 0 0 7px rgb(4 12 9 / 0.78);
}

.week-four-guild .week-one-seal span {
  color: #06140d;
  background: #c8ffd8;
}

.week-four-guild .week-one-certificate-main button {
  border-color: rgb(111 207 151 / 0.5);
  background: linear-gradient(180deg, #d8ffca, #6fcf97);
}

.week-four-guild .week-one-certificate-main button:disabled {
  color: #789986;
  border-color: rgb(216 255 202 / 0.14);
  background: rgb(216 255 202 / 0.08);
}

.week-four-guild-runes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.week-four-guild-runes article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 104px;
  padding: 10px;
  border: 1px solid rgb(111 207 151 / 0.2);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, rgb(111 207 151 / 0.1), transparent 44%),
    linear-gradient(180deg, rgb(242 201 76 / 0.04), transparent),
    rgb(0 0 0 / 0.2);
}

.week-four-guild-runes span {
  color: #9effbd;
  font: 1000 0.58rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.week-four-guild-runes b {
  color: #efffde;
  font-family: Cinzel, Georgia, serif;
  line-height: 1.08;
}

.week-four-guild-runes p {
  color: #cfe0bd;
  font-size: 0.72rem;
  line-height: 1.32;
}

.week-four-guild .week-one-certificate-footer strong {
  border-color: rgb(111 207 151 / 0.3);
  color: #c8ffd8;
}

.week-five-capstone {
  margin-top: 12px;
  border-color: rgb(242 201 76 / 0.52);
  background:
    radial-gradient(circle at 50% 0%, rgb(242 201 76 / 0.18), transparent 42%),
    radial-gradient(circle at 12% 18%, rgb(85 183 217 / 0.14), transparent 38%),
    radial-gradient(circle at 92% 82%, rgb(181 156 255 / 0.13), transparent 40%),
    linear-gradient(135deg, rgb(40 27 11 / 0.54), rgb(3 5 9 / 0.28)),
    rgb(8 7 7 / 0.62);
}

.week-five-capstone::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgb(242 201 76 / 0.18);
  border-radius: 8px;
  background:
    linear-gradient(45deg, transparent 0 47%, rgb(242 201 76 / 0.08) 48% 49%, transparent 50% 100%),
    linear-gradient(135deg, transparent 0 47%, rgb(85 183 217 / 0.08) 48% 49%, transparent 50% 100%),
    radial-gradient(circle at 50% 50%, rgb(242 201 76 / 0.09), transparent 17%);
  background-size: 92px 92px, 92px 92px, 184px 184px;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  pointer-events: none;
}

.week-five-capstone .mini-label {
  color: #fff0aa;
}

.week-five-capstone h3 {
  color: #fff8d2;
}

.week-five-capstone .week-one-seal {
  border-color: rgb(242 201 76 / 0.7);
  background:
    conic-gradient(from 0deg, rgb(242 201 76 / 0.98), rgb(85 183 217 / 0.72), rgb(181 156 255 / 0.64), rgb(242 201 76 / 0.98)),
    rgb(0 0 0 / 0.28);
  box-shadow: 0 0 30px rgb(242 201 76 / 0.18), inset 0 0 0 7px rgb(8 7 7 / 0.82);
}

.week-five-capstone .week-one-seal span {
  color: #100d06;
  background: #fff0aa;
}

.week-five-capstone .week-one-certificate-main button {
  border-color: rgb(242 201 76 / 0.55);
  background: linear-gradient(180deg, #fff7c9, var(--gold));
}

.week-five-capstone .week-one-certificate-actions {
  grid-template-columns: repeat(3, minmax(112px, 1fr));
}

.week-five-capstone .week-one-certificate-main button:disabled {
  color: #9e9474;
  border-color: rgb(255 246 215 / 0.14);
  background: rgb(255 246 215 / 0.08);
}

.week-five-capstone-trials {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.week-five-capstone-trials article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 106px;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 0%, rgb(242 201 76 / 0.11), transparent 46%),
    radial-gradient(circle at 94% 100%, rgb(85 183 217 / 0.08), transparent 40%),
    rgb(0 0 0 / 0.22);
}

.week-five-capstone-trials span {
  color: var(--gold);
  font: 1000 0.58rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.week-five-capstone-trials b {
  color: #fff8d2;
  font-family: Cinzel, Georgia, serif;
  line-height: 1.08;
}

.week-five-capstone-trials p {
  color: #dfd1a4;
  font-size: 0.72rem;
  line-height: 1.32;
}

.week-five-capstone .week-one-certificate-footer strong {
  border-color: rgb(242 201 76 / 0.34);
  color: #fff0aa;
}

.week-one-ceremony {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 30%, rgb(242 201 76 / 0.2), transparent 34rem),
    radial-gradient(circle at 18% 74%, rgb(85 183 217 / 0.1), transparent 24rem),
    rgb(6 4 2 / 0.91);
  backdrop-filter: blur(10px);
}

.week-one-ceremony.hidden {
  display: none;
}

.week-one-ceremony-card {
  position: relative;
  overflow: hidden;
  width: min(840px, 100%);
  max-height: calc(100dvh - 28px);
  display: grid;
  gap: 11px;
  padding: clamp(20px, 3.4vw, 30px);
  overflow-y: auto;
  border: 2px solid rgb(242 201 76 / 0.7);
  border-radius: 10px;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgb(242 201 76 / 0.16), transparent 58%),
    linear-gradient(135deg, rgb(67 43 16 / 0.9), rgb(9 6 3 / 0.98));
  box-shadow: 0 0 0 5px #050302, 0 28px 90px rgb(0 0 0 / 0.58);
  animation: weekOneCeremonyIn 420ms cubic-bezier(.2, .8, .2, 1);
}

.systems-portfolio-review {
  background:
    radial-gradient(circle at 50% 25%, rgb(85 183 217 / 0.22), transparent 34rem),
    radial-gradient(circle at 16% 78%, rgb(181 156 255 / 0.12), transparent 24rem),
    radial-gradient(circle at 88% 70%, rgb(242 201 76 / 0.1), transparent 22rem),
    rgb(3 8 11 / 0.92);
}

.systems-portfolio-card {
  border-color: rgb(85 183 217 / 0.72);
  background:
    radial-gradient(ellipse at top, rgb(85 183 217 / 0.16), transparent 58%),
    linear-gradient(135deg, rgb(11 45 55 / 0.92), rgb(5 7 10 / 0.98));
  box-shadow: 0 0 0 5px #020507, 0 28px 90px rgb(0 0 0 / 0.6);
}

.skybridge-portfolio-review {
  background:
    radial-gradient(circle at 50% 22%, rgb(242 201 76 / 0.24), transparent 34rem),
    radial-gradient(circle at 14% 76%, rgb(217 107 43 / 0.14), transparent 24rem),
    radial-gradient(circle at 86% 72%, rgb(111 207 151 / 0.11), transparent 24rem),
    rgb(8 5 2 / 0.93);
}

.skybridge-portfolio-card {
  width: min(920px, 100%);
  border-color: rgb(242 201 76 / 0.76);
  background:
    radial-gradient(ellipse at top, rgb(242 201 76 / 0.18), transparent 54%),
    radial-gradient(ellipse at bottom right, rgb(111 207 151 / 0.08), transparent 52%),
    linear-gradient(135deg, rgb(64 36 11 / 0.94), rgb(8 6 4 / 0.99));
  box-shadow: 0 0 0 5px #050302, 0 30px 94px rgb(0 0 0 / 0.64), 0 0 72px rgb(242 201 76 / 0.08);
}

.skybridge-portfolio-card::before {
  border-color: rgb(242 201 76 / 0.24);
}

.skybridge-portfolio-card::after {
  border-color: rgb(217 107 43 / 0.13);
}

.skybridge-portfolio-art span {
  border-color: rgb(242 201 76 / 0.58);
  animation: certificateSealPulse 3.1s ease-in-out infinite;
}

.skybridge-portfolio-art i {
  border-color: rgb(111 207 151 / 0.32);
}

.skybridge-portfolio-art b {
  border-color: rgb(242 201 76 / 0.82);
  color: #171006;
  background:
    radial-gradient(circle at 34% 24%, #fff7d0, transparent 34%),
    linear-gradient(180deg, #ffe89a, #d96b2b);
  box-shadow: 0 0 38px rgb(242 201 76 / 0.25), inset 0 1px 0 rgb(255 255 255 / 0.48);
}

.skybridge-portfolio-evidence {
  padding-top: 8px;
  border-top: 1px solid rgb(242 201 76 / 0.18);
}

.skybridge-portfolio-next span {
  color: #f6cf65;
}

.skybridge-portfolio-actions {
  grid-template-columns: minmax(0, 1fr);
}

.skybridge-portfolio-actions button,
.skybridge-portfolio-review .week-one-ceremony-close {
  min-height: 48px;
}

.invention-dossier-review {
  background:
    radial-gradient(circle at 50% 20%, rgb(181 156 255 / 0.24), transparent 34rem),
    radial-gradient(circle at 15% 78%, rgb(85 183 217 / 0.14), transparent 24rem),
    radial-gradient(circle at 86% 74%, rgb(242 201 76 / 0.11), transparent 23rem),
    rgb(5 4 10 / 0.94);
}

.invention-dossier-card {
  width: min(960px, 100%);
  border-color: rgb(181 156 255 / 0.76);
  background:
    radial-gradient(ellipse at top, rgb(181 156 255 / 0.18), transparent 52%),
    radial-gradient(ellipse at bottom right, rgb(85 183 217 / 0.09), transparent 54%),
    linear-gradient(135deg, rgb(35 24 59 / 0.96), rgb(5 5 10 / 0.99));
  box-shadow: 0 0 0 5px #030207, 0 30px 96px rgb(0 0 0 / 0.66), 0 0 76px rgb(181 156 255 / 0.09);
}

.invention-dossier-card::before {
  border-color: rgb(181 156 255 / 0.24);
}

.invention-dossier-card::after {
  border-color: rgb(85 183 217 / 0.13);
}

.invention-dossier-art span {
  border-color: rgb(181 156 255 / 0.58);
  animation: certificateSealPulse 3.1s ease-in-out infinite;
}

.invention-dossier-art i {
  border-color: rgb(85 183 217 / 0.38);
}

.invention-dossier-art b {
  border-color: rgb(181 156 255 / 0.82);
  color: #100a1c;
  background:
    radial-gradient(circle at 34% 24%, #f8f1ff, transparent 34%),
    linear-gradient(180deg, #d9caff, #9b7edf);
  box-shadow: 0 0 38px rgb(181 156 255 / 0.26), inset 0 1px 0 rgb(255 255 255 / 0.5);
}

.invention-dossier-evidence {
  padding-top: 8px;
  border-top: 1px solid rgb(181 156 255 / 0.2);
}

.invention-dossier-evidence .week-one-ceremony-evidence-card {
  min-height: 126px;
}

.invention-dossier-defense span {
  color: #c9b8ff;
}

.invention-dossier-actions {
  grid-template-columns: minmax(0, 1fr);
}

.invention-dossier-actions button,
.invention-dossier-review .week-one-ceremony-close {
  min-height: 48px;
}

.invention-dossier-review .week-one-ceremony-close {
  position: sticky;
  top: 0;
  right: auto;
  justify-self: end;
  margin-bottom: -48px;
}

.invention-dossier-actions .week-one-ceremony-primary {
  background: linear-gradient(180deg, #f7f1ff, #c8b4ff 58%, #9173d8);
  box-shadow: 0 5px 0 rgb(45 28 84 / 0.88), 0 0 24px rgb(181 156 255 / 0.24), inset 0 1px 0 rgb(255 255 255 / 0.72);
}

.week-five-capstone-ceremony {
  background:
    radial-gradient(circle at 50% 22%, rgb(242 201 76 / 0.24), transparent 35rem),
    radial-gradient(circle at 20% 76%, rgb(85 183 217 / 0.13), transparent 24rem),
    radial-gradient(circle at 84% 72%, rgb(181 156 255 / 0.13), transparent 23rem),
    rgb(5 3 2 / 0.93);
}

.week-five-capstone-card {
  width: min(980px, 100%);
  border-color: rgb(242 201 76 / 0.78);
  background:
    radial-gradient(ellipse at top, rgb(242 201 76 / 0.18), transparent 48%),
    radial-gradient(ellipse at bottom right, rgb(85 183 217 / 0.1), transparent 58%),
    linear-gradient(135deg, rgb(58 35 12 / 0.94), rgb(6 5 7 / 0.99));
  box-shadow: 0 0 0 5px #040302, 0 30px 96px rgb(0 0 0 / 0.64), 0 0 80px rgb(242 201 76 / 0.08);
}

.week-five-capstone-card::before {
  border-color: rgb(242 201 76 / 0.24);
}

.week-five-capstone-card::after {
  border-color: rgb(85 183 217 / 0.12);
}

.week-five-capstone-art span {
  border-color: rgb(242 201 76 / 0.52);
  animation: certificateSealPulse 3.2s ease-in-out infinite;
}

.week-five-capstone-art i {
  border-color: rgb(181 156 255 / 0.34);
}

.week-five-capstone-art b {
  border-color: rgb(242 201 76 / 0.82);
  color: #130e06;
  background:
    radial-gradient(circle at 35% 25%, #fff8d5, transparent 36%),
    linear-gradient(180deg, #ffe89b, var(--gold));
  box-shadow: 0 0 38px rgb(242 201 76 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.48);
}

.week-five-defense-board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.week-five-defense-board article {
  min-width: 0;
  min-height: 106px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 11px;
  border: 1px solid rgb(242 201 76 / 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.08), rgb(255 255 255 / 0.025)),
    rgb(0 0 0 / 0.18);
  text-align: left;
}

.week-five-defense-board span,
.week-five-defense-board small {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.week-five-defense-board span {
  color: #fff0aa;
  font-size: 0.56rem;
}

.week-five-defense-board b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  line-height: 1.08;
}

.week-five-defense-board small {
  color: #cdbf94;
  font-size: 0.55rem;
  line-height: 1.35;
}

.week-five-defense-rehearsal {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(255 228 154 / 0.28);
  border-radius: 10px;
  background:
    radial-gradient(circle at 8% 0%, rgb(255 228 154 / 0.1), transparent 35%),
    linear-gradient(135deg, rgb(21 16 8 / 0.9), rgb(5 9 14 / 0.92));
}

.week-five-defense-rehearsal-head,
.week-five-defense-rehearsal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.week-five-defense-rehearsal-head > div {
  min-width: 0;
}

.week-five-defense-rehearsal-head span {
  color: #ffe49a;
  font: 900 0.62rem/1.2 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.week-five-defense-rehearsal-head h3 {
  margin: 4px 0 3px;
  color: #fff7d8;
  font-size: 1.1rem;
  line-height: 1.1;
}

.week-five-defense-rehearsal-head p,
.week-five-defense-rehearsal-footer p {
  margin: 0;
  max-width: 68ch;
  color: #d9cda8;
  font-size: 0.78rem;
  line-height: 1.42;
}

.week-five-defense-rehearsal-head > strong {
  flex: 0 0 auto;
  min-width: 110px;
  padding: 9px 11px;
  border: 1px solid rgb(255 228 154 / 0.3);
  border-radius: 999px;
  color: #fff2ba;
  background: rgb(255 228 154 / 0.07);
  font: 900 0.7rem/1 "JetBrains Mono", Consolas, monospace;
  text-align: center;
}

.week-five-defense-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.week-five-defense-checklist > div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.week-five-defense-checklist button {
  width: 100%;
  min-height: 132px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgb(255 246 215 / 0.16);
  border-radius: 8px;
  color: #f4ead0;
  background: rgb(255 255 255 / 0.035);
  box-shadow: none;
  text-align: left;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.week-five-defense-checklist button:hover {
  transform: translateY(-1px);
  border-color: rgb(255 228 154 / 0.42);
  background: rgb(255 228 154 / 0.07);
}

.week-five-defense-checklist button:focus-visible {
  outline: 3px solid #fff0a8;
  outline-offset: 2px;
}

.week-five-defense-checklist button[aria-pressed="true"] {
  border-color: rgb(121 224 193 / 0.62);
  background:
    radial-gradient(circle at 94% 8%, rgb(121 224 193 / 0.15), transparent 34%),
    rgb(40 97 75 / 0.16);
  box-shadow: inset 0 0 0 1px rgb(121 224 193 / 0.12), 0 0 22px rgb(121 224 193 / 0.06);
}

.week-five-defense-checklist span,
.week-five-defense-checklist em {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.week-five-defense-checklist span {
  color: #ffe49a;
  font-size: 0.58rem;
}

.week-five-defense-checklist b {
  color: #fff7d8;
  font-size: 0.88rem;
  line-height: 1.22;
}

.week-five-defense-checklist p {
  margin: 0;
  color: #d7caac;
  font-size: 0.73rem;
  line-height: 1.4;
}

.week-five-defense-checklist em {
  align-self: end;
  margin-top: 4px;
  color: #c7b989;
  font-size: 0.56rem;
}

.week-five-defense-checklist button[aria-pressed="true"] em {
  color: #9effbd;
}

.week-five-defense-rehearsal-footer button {
  flex: 0 0 auto;
  min-height: 48px;
  min-width: 180px;
  border: 1px solid rgb(255 228 154 / 0.68);
  border-radius: 8px;
  color: #1c1305;
  background: linear-gradient(180deg, #fff1b5, #e4b94f);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.48), 0 10px 24px rgb(0 0 0 / 0.24);
  font: 900 0.72rem/1.1 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.week-five-defense-rehearsal-footer button:focus-visible {
  outline: 3px solid #fff0a8;
  outline-offset: 2px;
}

.week-five-defense-rehearsal-footer button:disabled {
  color: #9d9172;
  border-color: rgb(255 228 154 / 0.16);
  background: rgb(255 255 255 / 0.045);
  box-shadow: none;
  cursor: not-allowed;
}

.week-five-defense-handoff {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgb(121 224 193 / 0.48);
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0%, rgb(121 224 193 / 0.18), transparent 42%),
    linear-gradient(135deg, rgb(23 63 51 / 0.72), rgb(5 12 17 / 0.94));
  box-shadow: inset 0 0 0 1px rgb(121 224 193 / 0.08), 0 14px 32px rgb(0 0 0 / 0.22);
  animation: weekFiveHandoffRise 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.week-five-defense-handoff.hidden {
  display: none;
}

.week-five-defense-handoff > span {
  color: #9effbd;
  font: 900 0.62rem/1.2 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.week-five-defense-handoff h3 {
  margin: 0;
  color: #effff5;
  font-size: 1.12rem;
  line-height: 1.12;
}

.week-five-defense-handoff p {
  margin: 0;
  max-width: 68ch;
  color: #c8e8d7;
  font-size: 0.78rem;
  line-height: 1.45;
}

.week-five-defense-handoff > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.week-five-defense-handoff button {
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid rgb(121 224 193 / 0.56);
  border-radius: 8px;
  color: #effff5;
  background: rgb(121 224 193 / 0.11);
  box-shadow: none;
  font: 900 0.68rem/1.2 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.week-five-defense-handoff button:first-child {
  color: #082018;
  background: linear-gradient(180deg, #baffd2, #79e0c1);
}

.week-five-defense-handoff button:hover {
  border-color: #caffdc;
  transform: translateY(-1px);
}

.week-five-defense-handoff button:focus-visible {
  outline: 3px solid #eafff1;
  outline-offset: 2px;
}

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

.week-five-capstone-signatures span {
  border-top-color: rgb(242 201 76 / 0.4);
}

.week-five-capstone-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.systems-portfolio-card::before {
  border-color: rgb(85 183 217 / 0.2);
}

.systems-portfolio-card::after {
  border-color: rgb(191 243 255 / 0.1);
}

.week-one-ceremony-card::before,
.week-one-ceremony-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgb(242 201 76 / 0.18);
  border-radius: 8px;
  pointer-events: none;
}

.week-one-ceremony-card::after {
  inset: 20px;
  border-color: rgb(255 246 215 / 0.1);
}

.week-one-ceremony-card.systems-portfolio-card::before {
  border-color: rgb(85 183 217 / 0.2);
}

.week-one-ceremony-card.systems-portfolio-card::after {
  border-color: rgb(191 243 255 / 0.1);
}

.week-one-ceremony-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgb(255 246 215 / 0.16);
  border-radius: 8px;
  color: #f5e5b2;
  background: rgb(0 0 0 / 0.28);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 1000;
}

.week-one-ceremony-art {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  justify-self: center;
  margin-top: 6px;
}

.week-one-ceremony-art span,
.week-one-ceremony-art i {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(242 201 76 / 0.4);
  border-radius: 28px;
  transform: rotate(45deg);
}

.week-one-ceremony-art i {
  inset: 14px;
  border-color: rgb(85 183 217 / 0.28);
  border-radius: 999px;
  animation: memberStudioOrbit 5.6s linear infinite;
}

.week-one-ceremony-art b {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.74);
  border-radius: 50%;
  color: #151006;
  background: linear-gradient(180deg, #fff2b8, var(--gold));
  box-shadow: 0 0 34px rgb(242 201 76 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.42);
  font: 1000 1rem Cinzel, Georgia, serif;
  letter-spacing: 0.08em;
}

.systems-portfolio-art span {
  border-color: rgb(85 183 217 / 0.46);
}

.systems-portfolio-art i {
  border-color: rgb(181 156 255 / 0.3);
}

.systems-portfolio-art b {
  border-color: rgb(85 183 217 / 0.76);
  color: #061419;
  background: linear-gradient(180deg, #dcfbff, #55b7d9);
  box-shadow: 0 0 34px rgb(85 183 217 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.44);
}

.week-one-ceremony h2,
.week-one-ceremony p {
  position: relative;
  z-index: 1;
  margin: 0;
}

.week-one-ceremony h2 {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.85rem, 5vw, 3.45rem);
  line-height: 0.98;
  text-wrap: balance;
}

.week-one-ceremony p:not(.kicker) {
  max-width: 64ch;
  justify-self: center;
  color: #e5d5a2;
  line-height: 1.45;
}

.week-one-ceremony-evidence {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.week-one-ceremony-evidence-card {
  --ceremony-accent: var(--gold);
  min-width: 0;
  min-height: 92px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ceremony-accent) 36%, transparent);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.22);
  text-align: left;
}

.week-one-ceremony-evidence-card.math { --ceremony-accent: var(--gold); }
.week-one-ceremony-evidence-card.science { --ceremony-accent: #6fcf97; }
.week-one-ceremony-evidence-card.physics { --ceremony-accent: var(--aether); }
.week-one-ceremony-evidence-card.engineering { --ceremony-accent: var(--ember); }
.week-one-ceremony-evidence-card.ai { --ceremony-accent: #b59cff; }

.week-one-ceremony-evidence-card span,
.week-one-ceremony-evidence-card small {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.week-one-ceremony-evidence-card span {
  color: color-mix(in srgb, var(--ceremony-accent) 82%, #fff4c6);
  font-size: 0.56rem;
}

.week-one-ceremony-evidence-card b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  line-height: 1.08;
}

.week-one-ceremony-evidence-card small {
  color: #cdbf94;
  font-size: 0.55rem;
  line-height: 1.25;
}

.week-one-ceremony-signatures,
.week-one-ceremony-next,
.week-one-ceremony-actions {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.week-one-ceremony-signatures {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 4px;
}

.week-one-ceremony-signatures span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding-top: 10px;
  border-top: 1px solid rgb(242 201 76 / 0.34);
}

.week-one-ceremony-signatures b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
}

.week-one-ceremony-signatures small {
  color: #a99d80;
  font: 900 0.62rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.week-one-ceremony-next {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.week-one-ceremony-next article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background: linear-gradient(180deg, rgb(255 246 215 / 0.075), rgb(255 255 255 / 0.025));
  text-align: left;
}

.week-one-ceremony-next span,
.week-one-ceremony-next small {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.week-one-ceremony-next span {
  color: var(--gold);
  font-size: 0.56rem;
}

.week-one-ceremony-next b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  line-height: 1.08;
}

.week-one-ceremony-next small {
  color: #cdbf94;
  font-size: 0.55rem;
  line-height: 1.35;
}

.week-one-ceremony-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.week-one-ceremony-actions .week-one-ceremony-primary {
  grid-column: 1 / -1;
  min-height: 48px;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff8d8, #f2c94c 58%, #c88d20);
  box-shadow: 0 5px 0 rgb(77 42 5 / 0.82), 0 0 22px rgb(242 201 76 / 0.22), inset 0 1px 0 rgb(255 255 255 / 0.7);
}

.systems-portfolio-next span {
  color: #9ee8ff;
}

.systems-portfolio-actions,
.skybridge-portfolio-actions {
  grid-template-columns: minmax(0, 1fr);
}

.systems-portfolio-actions button,
.systems-portfolio-review .week-one-ceremony-close,
.skybridge-portfolio-actions button,
.skybridge-portfolio-review .week-one-ceremony-close {
  min-height: 48px;
}

@keyframes weekOneCeremonyIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  70% {
    opacity: 1;
    transform: translateY(-2px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes certificateSealPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.035);
    filter: brightness(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skybridge-portfolio-card,
  .skybridge-portfolio-art span,
  .skybridge-portfolio-art i,
  .invention-dossier-card,
  .invention-dossier-art span,
  .invention-dossier-art i {
    animation: none !important;
  }
}

.plan-focus article,
.plan-metrics span,
.plan-steps li {
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.2);
}

.plan-focus article {
  min-height: 62px;
  padding: 8px;
  display: grid;
  gap: 3px;
}

.plan-focus span,
.plan-metrics small,
.plan-credit {
  color: #9fb1a5;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.plan-focus b {
  color: #fff5c8;
  font-family: Cinzel, Georgia, serif;
  line-height: 1.1;
  overflow-wrap: break-word;
}

.plan-focus small,
.plan-metrics em,
.plan-steps small {
  color: #d0c29d;
  font-size: 0.78rem;
  line-height: 1.25;
}

.plan-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.plan-metrics span {
  min-height: 56px;
  padding: 8px;
  display: grid;
  align-content: center;
  gap: 3px;
}

.plan-metrics b {
  color: var(--gold-soft);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1.05rem;
}

.plan-metrics em {
  font-style: normal;
}

.plan-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.plan-steps li {
  min-height: 92px;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  align-content: start;
  align-items: start;
}

.plan-steps li > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #151006;
  background: #6e755f;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 1000;
}

.plan-steps b {
  display: block;
  color: #f7e8b4;
  line-height: 1.15;
}

.plan-steps .current {
  border-color: rgb(242 201 76 / 0.4);
  background: linear-gradient(90deg, rgb(242 201 76 / 0.13), rgb(0 0 0 / 0.16));
}

.plan-steps .current > span {
  background: var(--gold);
}

.plan-steps .complete {
  border-color: rgb(158 255 189 / 0.28);
}

.plan-steps .complete > span {
  background: #9effbd;
}

.plan-steps .locked {
  opacity: 0.72;
}

.headmaster-plan.ready {
  border-color: rgb(158 255 189 / 0.34);
}

.headmaster-plan.answered {
  border-color: rgb(85 183 217 / 0.42);
}

.plan-credit {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgb(242 201 76 / 0.18);
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.course-map-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(13px, 1.8vw, 17px);
  border: 1px solid rgb(85 183 217 / 0.28);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgb(85 183 217 / 0.1), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.05), rgb(0 0 0 / 0.18)),
    rgb(9 10 9 / 0.9);
  box-shadow:
    inset 0 1px 0 rgb(255 246 215 / 0.08),
    0 16px 36px rgb(0 0 0 / 0.22);
}

.subject-wings-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(14px, 2vw, 18px);
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 12% 0%, rgb(242 201 76 / 0.13), transparent 42%),
    radial-gradient(ellipse at 92% 18%, rgb(85 183 217 / 0.12), transparent 36%),
    linear-gradient(180deg, rgb(255 246 215 / 0.05), rgb(0 0 0 / 0.22)),
    rgb(10 8 6 / 0.94);
  box-shadow:
    inset 0 1px 0 rgb(255 246 215 / 0.09),
    0 18px 42px rgb(0 0 0 / 0.26);
}

.subject-wings-panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgb(242 201 76 / 0.1);
  border-radius: 7px;
}

.subject-wings-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgb(255 246 215 / 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 246 215 / 0.014) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.6;
}

.subject-wings-head,
.subject-wings-art,
.subject-wings-grid {
  position: relative;
  z-index: 1;
}

.subject-wings-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.subject-wings-head h3,
.subject-wings-head p {
  margin: 0;
}

.subject-wings-head h3 {
  margin-top: 4px;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.08;
}

.subject-wings-head p {
  margin-top: 6px;
  max-width: 66ch;
  color: #d7caa6;
  line-height: 1.42;
}

.subject-wings-head strong {
  min-width: 112px;
  padding: 8px 10px;
  border: 1px solid rgb(242 201 76 / 0.32);
  border-radius: 8px;
  color: #fff1ad;
  background: rgb(0 0 0 / 0.28);
  text-align: center;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
}

.subject-wings-art {
  min-height: 156px;
  margin: 14px 0 0;
  overflow: hidden;
  border: 1px solid rgb(255 246 215 / 0.16);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.3);
  box-shadow: inset 0 0 28px rgb(242 201 76 / 0.07), 0 14px 28px rgb(0 0 0 / 0.18);
  aspect-ratio: 4.8 / 1;
}

.subject-wings-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 54%;
  filter: saturate(1.08) contrast(1.04) brightness(0.9);
  transform: scale(1.025);
  animation: firstQuestArtDrift 9s ease-in-out infinite alternate;
}

.subject-wings-art span {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.34), transparent 28%, transparent 70%, rgb(0 0 0 / 0.28)),
    linear-gradient(180deg, transparent 42%, rgb(0 0 0 / 0.4)),
    radial-gradient(circle at 18% 22%, rgb(242 201 76 / 0.2), transparent 36%),
    radial-gradient(circle at 72% 18%, rgb(85 183 217 / 0.16), transparent 36%);
  mix-blend-mode: screen;
}

.subject-wings-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(212px, 1fr);
  grid-template-columns: none;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-bottom: 5px;
  scroll-snap-type: x mandatory;
}

.subject-wing-card {
  --wing-accent: var(--gold);
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 316px;
  display: grid;
  grid-template-rows: 102px minmax(0, 1fr) auto auto;
  gap: 9px;
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.2)),
    rgb(8 7 5 / 0.84);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
  transition: transform 240ms var(--motion), border-color 240ms var(--motion), box-shadow 240ms var(--motion);
  scroll-snap-align: start;
}

.subject-wing-card[data-domain="math"] { --wing-accent: var(--gold); }
.subject-wing-card[data-domain="science"] { --wing-accent: #6fcf97; }
.subject-wing-card[data-domain="physics"] { --wing-accent: var(--aether); }
.subject-wing-card[data-domain="engineering"] { --wing-accent: var(--ember); }
.subject-wing-card[data-domain="ai"] { --wing-accent: #b59cff; }

.subject-wing-card.current {
  border-color: rgb(255 246 215 / 0.58);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 0 0 1px rgb(255 246 215 / 0.16), 0 0 26px rgb(242 201 76 / 0.09);
}

.subject-wing-card.focus {
  border-color: color-mix(in srgb, var(--wing-accent) 68%, transparent);
}

.subject-wing-card:hover,
.subject-wing-card:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--wing-accent) 72%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 16px 30px rgb(0 0 0 / 0.28), 0 0 24px color-mix(in srgb, var(--wing-accent) 20%, transparent);
}

.subject-wing-card figure {
  position: relative;
  min-width: 0;
  height: 102px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 6px;
  background: rgb(0 0 0 / 0.28);
}

.subject-wing-card figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 38%, rgb(0 0 0 / 0.72)),
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--wing-accent) 32%, transparent), transparent 36%);
}

.subject-wing-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.08) brightness(0.82);
  transform: scale(1.03);
  transition: transform 420ms var(--motion), filter 420ms var(--motion);
}

.subject-wing-card:hover img,
.subject-wing-card:focus-within img {
  filter: saturate(1.18) contrast(1.12) brightness(0.94);
  transform: scale(1.1);
}

.subject-wing-badge {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  min-width: 40px;
  padding: 5px 7px;
  border: 1px solid rgb(255 246 215 / 0.34);
  border-radius: 999px;
  color: #120d06;
  background: linear-gradient(180deg, #fff4bf, var(--wing-accent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--wing-accent) 24%, transparent);
  text-align: center;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 1000;
}

.subject-wing-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.subject-wing-copy h4,
.subject-wing-copy p {
  margin: 0;
}

.subject-wing-copy h4 {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(0.96rem, 1.4vw, 1.12rem);
  line-height: 1.08;
}

.subject-wing-copy p {
  color: #d6c8a2;
  font-size: 0.8rem;
  line-height: 1.34;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.subject-wing-study {
  display: grid;
  gap: 5px;
  margin-top: 2px;
}

.subject-wing-study span {
  display: grid;
  grid-template-columns: minmax(48px, auto) minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
  padding: 5px 6px;
  border: 1px solid rgb(255 246 215 / 0.08);
  border-radius: 6px;
  background: rgb(0 0 0 / 0.16);
}

.subject-wing-study small {
  color: color-mix(in srgb, var(--wing-accent) 82%, #fff5cd);
  font-size: 0.55rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.subject-wing-study b {
  min-width: 0;
  color: #efe0b2;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  line-height: 1.18;
  overflow-wrap: break-word;
}

.subject-wing-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-content: start;
}

.subject-wing-meta span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 6px;
  background: rgb(255 246 215 / 0.035);
}

.subject-wing-meta b,
.subject-wing-meta small {
  overflow-wrap: break-word;
  white-space: normal;
}

.subject-wing-meta b {
  color: var(--wing-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
}

.subject-wing-meta small {
  color: #aa9d80;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.subject-wing-action {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--wing-accent) 58%, transparent);
  border-radius: 8px;
  color: #120d06;
  background: linear-gradient(180deg, #fff2b8, var(--wing-accent));
  box-shadow: 0 4px 0 rgb(0 0 0 / 0.34);
  cursor: pointer;
  font-weight: 1000;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), box-shadow 180ms var(--motion);
}

.subject-wing-action:hover,
.subject-wing-action:focus-visible {
  filter: brightness(1.08);
}

.subject-wing-action:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.4);
}

.course-map-panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgb(85 183 217 / 0.1);
  border-radius: 7px;
}

.course-map-head,
.course-planner-shell,
.lesson-route-panel,
.credit-board-panel,
.course-spine,
.course-library-panel,
.curriculum-atlas-panel,
.course-syllabus-panel,
.course-credit-detail-panel,
.course-map-grid,
.mastery-check-panel,
.course-planner-record-panel {
  position: relative;
  z-index: 1;
}

.course-map-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.course-map-head h2,
.course-map-head p,
.mastery-check-panel h3,
.mastery-check-panel p {
  margin: 0;
}

.course-map-head h2 {
  margin-top: 4px;
  color: #fff2bd;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.05rem, 1.9vw, 1.42rem);
  line-height: 1.1;
}

.course-map-head p,
.mastery-check-panel p {
  margin-top: 6px;
  color: #d2c49e;
  line-height: 1.42;
}

.course-map-head strong {
  min-width: 92px;
  padding: 8px 10px;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 8px;
  color: #fff1ad;
  background: rgb(0 0 0 / 0.24);
  text-align: center;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.82rem;
}

.course-map-panel [data-course-planner-panel][hidden] {
  display: none !important;
}

.course-planner-shell {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.2);
  border-radius: 9px;
  background:
    radial-gradient(circle at 8% 0%, rgb(242 201 76 / 0.12), transparent 40%),
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.16)),
    rgb(0 0 0 / 0.18);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
}

.course-planner-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.course-planner-head p {
  margin: 3px 0 0;
  color: #d2c49e;
  font-size: 0.76rem;
  line-height: 1.3;
}

.course-planner-head strong {
  min-width: 104px;
  padding: 6px 8px;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 8px;
  color: #fff1ad;
  background: rgb(0 0 0 / 0.24);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.66rem;
  text-align: center;
  text-transform: uppercase;
}

.course-planner-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 7px;
}

.course-planner-tab {
  min-width: 0;
  min-height: 70px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 8px;
  align-content: center;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  color: #d8caa0;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.13)),
    rgb(0 0 0 / 0.16);
  cursor: pointer;
  text-align: left;
  transition: transform 180ms var(--motion), border-color 180ms var(--motion), background 180ms var(--motion);
}

.course-planner-tab:hover,
.course-planner-tab:focus-visible {
  border-color: rgb(242 201 76 / 0.42);
  transform: translateY(-1px);
}

.course-planner-tab:active {
  transform: translateY(0);
}

.course-planner-tab.active {
  border-color: rgb(242 201 76 / 0.56);
  background:
    radial-gradient(circle at 12% 0%, rgb(242 201 76 / 0.15), transparent 52%),
    rgb(17 13 7 / 0.72);
  box-shadow: inset 0 0 0 1px rgb(255 246 215 / 0.08);
}

.course-planner-tab span {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #120d06;
  background: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 1000;
}

.course-planner-tab b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.88rem;
  line-height: 1.08;
  overflow-wrap: break-word;
}

.course-planner-tab small {
  color: #bfb28f;
  font-size: 0.64rem;
  line-height: 1.15;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.lesson-route-panel {
  --route-accent: var(--gold);
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 9px;
  background:
    radial-gradient(circle at 0% 0%, rgb(242 201 76 / 0.11), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.18)),
    rgb(8 7 5 / 0.62);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
}

.lesson-route-panel[data-domain="math"] { --route-accent: var(--gold); }
.lesson-route-panel[data-domain="science"] { --route-accent: #6fcf97; }
.lesson-route-panel[data-domain="physics"] { --route-accent: var(--aether); }
.lesson-route-panel[data-domain="engineering"] { --route-accent: var(--ember); }
.lesson-route-panel[data-domain="ai"] { --route-accent: #b59cff; }

.lesson-route-head,
.lesson-route-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.lesson-route-head h3,
.lesson-route-head p {
  margin: 0;
}

.lesson-route-head h3 {
  margin-top: 3px;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.12;
  text-wrap: balance;
}

.lesson-route-head p {
  margin-top: 5px;
  color: #d4c8a5;
  font-size: 0.78rem;
  line-height: 1.32;
}

.lesson-route-head strong {
  min-width: 100px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--route-accent) 42%, transparent);
  border-radius: 8px;
  color: #fff1ad;
  background: rgb(0 0 0 / 0.24);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.66rem;
  text-align: center;
  text-transform: uppercase;
}

.lesson-route-main {
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
  margin-top: 10px;
}

.lesson-route-current {
  min-width: 0;
  min-height: 184px;
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--route-accent) 38%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--route-accent) 15%, transparent), transparent 46%),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.18)),
    rgb(9 8 6 / 0.74);
}

.lesson-route-current span,
.lesson-route-gate-room span,
.lesson-route-subject span {
  color: var(--route-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.lesson-route-current b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.34rem);
  line-height: 1.08;
  text-wrap: balance;
}

.lesson-route-current small {
  color: #cdbf98;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.lesson-route-current p {
  margin: 0;
  color: #d8caa0;
  font-size: 0.82rem;
  line-height: 1.36;
}

.lesson-route-proof {
  display: grid;
  gap: 4px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgb(255 246 215 / 0.1);
}

.lesson-route-proof strong {
  color: #fff1ad;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.lesson-route-proof em {
  color: #bfb28f;
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.28;
}

.lesson-route-side {
  display: grid;
  gap: 8px;
  align-content: start;
}

.lesson-route-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.lesson-route-meta span {
  min-height: 66px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.16);
}

.lesson-route-meta b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.05;
  overflow-wrap: break-word;
}

.lesson-route-meta small {
  color: #a99b78;
  font-size: 0.58rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.lesson-route-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.lesson-route-primary,
.lesson-route-secondary {
  min-height: 38px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 1000;
  text-transform: uppercase;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), box-shadow 180ms var(--motion);
}

.lesson-route-primary {
  border: 1px solid color-mix(in srgb, var(--route-accent) 58%, transparent);
  color: #120d06;
  background: linear-gradient(180deg, #fff2b8, var(--route-accent));
  box-shadow: 0 4px 0 rgb(0 0 0 / 0.34);
}

.lesson-route-secondary {
  border: 1px solid rgb(242 201 76 / 0.24);
  color: #fff1ad;
  background: rgb(0 0 0 / 0.22);
}

.lesson-route-primary:hover,
.lesson-route-primary:focus-visible,
.lesson-route-secondary:hover,
.lesson-route-secondary:focus-visible {
  filter: brightness(1.08);
}

.lesson-route-primary:active,
.lesson-route-secondary:active {
  transform: translateY(1px);
}

.lesson-route-gate-track,
.lesson-route-subject-grid {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.lesson-route-gate-track {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lesson-route-gate-room,
.lesson-route-subject {
  min-width: 0;
  border: 1px solid rgb(255 246 215 / 0.11);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.14)),
    rgb(0 0 0 / 0.16);
}

.lesson-route-gate-room {
  display: grid;
  gap: 3px;
  min-height: 78px;
  align-content: start;
  padding: 8px;
}

.lesson-route-gate-room.current {
  border-color: color-mix(in srgb, var(--route-accent) 62%, transparent);
  box-shadow: inset 0 0 0 1px rgb(255 246 215 / 0.08);
}

.lesson-route-gate-room.complete {
  border-color: rgb(158 255 189 / 0.28);
}

.lesson-route-gate-room b,
.lesson-route-subject b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  line-height: 1.08;
}

.lesson-route-gate-room b {
  font-size: 0.72rem;
}

.lesson-route-gate-room small,
.lesson-route-subject small {
  color: #bfb28f;
  font-size: 0.62rem;
  line-height: 1.15;
  text-transform: uppercase;
}

.lesson-route-subject-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lesson-route-subject {
  display: grid;
  gap: 4px;
  min-height: 132px;
  padding: 9px;
  cursor: pointer;
  text-align: left;
  transition: transform 180ms var(--motion), border-color 180ms var(--motion), background 180ms var(--motion);
}

.lesson-route-subject.math { --route-accent: var(--gold); }
.lesson-route-subject.science { --route-accent: #6fcf97; }
.lesson-route-subject.physics { --route-accent: var(--aether); }
.lesson-route-subject.engineering { --route-accent: var(--ember); }
.lesson-route-subject.ai { --route-accent: #b59cff; }

.lesson-route-subject.current {
  border-color: color-mix(in srgb, var(--route-accent) 58%, transparent);
}

.lesson-route-subject:hover,
.lesson-route-subject:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--route-accent) 62%, transparent);
}

.lesson-route-subject p {
  margin: 0;
  color: #cabd98;
  font-size: 0.68rem;
  line-height: 1.22;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.credit-board-panel {
  --credit-accent: var(--gold);
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 9px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--credit-accent) 13%, transparent), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.2)),
    rgb(8 7 5 / 0.66);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
}

.credit-board-panel[data-domain="math"] { --credit-accent: var(--gold); }
.credit-board-panel[data-domain="science"] { --credit-accent: #6fcf97; }
.credit-board-panel[data-domain="physics"] { --credit-accent: var(--aether); }
.credit-board-panel[data-domain="engineering"] { --credit-accent: var(--ember); }
.credit-board-panel[data-domain="ai"] { --credit-accent: #b59cff; }

.credit-board-head,
.credit-board-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.credit-board-head h3,
.credit-board-head p,
.credit-board-focus p {
  margin: 0;
}

.credit-board-head h3 {
  margin-top: 3px;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.12;
  text-wrap: balance;
}

.credit-board-head p {
  margin-top: 5px;
  color: #d4c8a5;
  font-size: 0.78rem;
  line-height: 1.32;
}

.credit-board-head strong {
  min-width: 104px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--credit-accent) 42%, transparent);
  border-radius: 8px;
  color: #fff1ad;
  background: rgb(0 0 0 / 0.24);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.66rem;
  text-align: center;
  text-transform: uppercase;
}

.credit-board-main {
  grid-template-columns: minmax(0, 1.2fr) minmax(224px, 0.8fr);
  margin-top: 10px;
}

.credit-board-focus {
  min-width: 0;
  min-height: 190px;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--credit-accent) 42%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--credit-accent) 16%, transparent), transparent 46%),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.18)),
    rgb(9 8 6 / 0.76);
  overflow: hidden;
}

.credit-board-focus span,
.credit-board-tab span {
  color: var(--credit-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.credit-board-focus b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.34rem);
  line-height: 1.08;
  text-wrap: balance;
}

.credit-board-focus p {
  color: #d8caa0;
  font-size: 0.82rem;
  line-height: 1.36;
}

.credit-board-evidence {
  display: grid;
  gap: 4px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgb(255 246 215 / 0.1);
}

.credit-board-evidence strong {
  color: #fff1ad;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.credit-board-evidence small {
  color: #bfb28f;
  font-size: 0.72rem;
  line-height: 1.28;
}

.credit-board-side {
  display: grid;
  gap: 8px;
  align-content: start;
}

.credit-board-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.credit-board-metrics span {
  min-height: 66px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.16);
}

.credit-board-metrics b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.05;
  overflow-wrap: break-word;
}

.credit-board-metrics small {
  color: #a99b78;
  font-size: 0.58rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.credit-board-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.credit-board-primary,
.credit-board-secondary {
  min-height: 38px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 1000;
  text-transform: uppercase;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), box-shadow 180ms var(--motion);
}

.credit-board-primary {
  border: 1px solid color-mix(in srgb, var(--credit-accent) 58%, transparent);
  color: #120d06;
  background: linear-gradient(180deg, #fff2b8, var(--credit-accent));
  box-shadow: 0 4px 0 rgb(0 0 0 / 0.34);
}

.credit-board-secondary {
  border: 1px solid rgb(242 201 76 / 0.24);
  color: #fff1ad;
  background: rgb(0 0 0 / 0.22);
}

.credit-board-primary:hover,
.credit-board-primary:focus-visible,
.credit-board-secondary:hover,
.credit-board-secondary:focus-visible {
  filter: brightness(1.08);
}

.credit-board-primary:active,
.credit-board-secondary:active {
  transform: translateY(1px);
}

.credit-board-rail,
.credit-board-rubric {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.credit-board-rail {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.credit-board-tab {
  --credit-accent: var(--gold);
  min-width: 0;
  min-height: 118px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.11);
  border-radius: 8px;
  color: #d8caa0;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.14)),
    rgb(0 0 0 / 0.16);
  cursor: pointer;
  text-align: left;
  transition: transform 180ms var(--motion), border-color 180ms var(--motion), background 180ms var(--motion);
}

.credit-board-tab.math { --credit-accent: var(--gold); }
.credit-board-tab.science { --credit-accent: #6fcf97; }
.credit-board-tab.physics { --credit-accent: var(--aether); }
.credit-board-tab.engineering { --credit-accent: var(--ember); }
.credit-board-tab.ai { --credit-accent: #b59cff; }

.credit-board-tab.selected {
  border-color: color-mix(in srgb, var(--credit-accent) 58%, transparent);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--credit-accent) 15%, transparent), transparent 52%),
    rgb(17 13 7 / 0.72);
}

.credit-board-tab:hover,
.credit-board-tab:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--credit-accent) 62%, transparent);
}

.credit-board-tab b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.8rem;
  line-height: 1.08;
}

.credit-board-tab small {
  color: #bfb28f;
  font-size: 0.62rem;
  line-height: 1.15;
  text-transform: uppercase;
}

.credit-board-tab i {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 246 215 / 0.1);
}

.credit-board-tab em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--credit-accent), #fff0a3);
}

.credit-board-rubric {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}

.credit-board-rubric article {
  min-height: 64px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 7px;
  background: rgb(255 246 215 / 0.04);
}

.credit-board-rubric b {
  color: var(--credit-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.64rem;
  text-transform: uppercase;
}

.credit-board-rubric small {
  color: #cdbf98;
  font-size: 0.7rem;
  line-height: 1.24;
  overflow-wrap: break-word;
}

.course-credit-detail-panel {
  margin-top: 10px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.16)),
    rgb(0 0 0 / 0.16);
}

.course-credit-detail-panel summary {
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  color: #fff1ad;
  cursor: pointer;
  list-style: none;
}

.course-credit-detail-panel summary::-webkit-details-marker {
  display: none;
}

.course-credit-detail-panel summary::before {
  content: "+";
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 7px;
  color: #120d06;
  background: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 1000;
}

.course-credit-detail-panel[open] summary::before {
  content: "-";
}

.course-credit-detail-panel summary span {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.88rem;
  line-height: 1.08;
}

.course-credit-detail-panel summary b {
  color: #bfb28f;
  font-size: 0.68rem;
  line-height: 1.2;
}

.course-spine {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 6% 0%, rgb(242 201 76 / 0.1), transparent 38%),
    rgb(0 0 0 / 0.18);
}

.course-spine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.course-spine-head strong {
  color: #fff1ad;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.76rem;
}

.course-spine-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
}

.course-spine-card {
  position: relative;
  min-width: 0;
  min-height: 128px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 4px;
  overflow: hidden;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.16)),
    rgb(8 7 5 / 0.56);
}

.course-spine-card.current {
  border-color: rgb(242 201 76 / 0.48);
  box-shadow: 0 0 20px rgb(242 201 76 / 0.08), inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.course-spine-card.complete {
  border-color: rgb(158 255 189 / 0.34);
}

.course-spine-card span {
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.course-spine-card b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.88rem;
  line-height: 1.08;
}

.course-spine-card small,
.course-spine-card p {
  color: #bfb394;
  line-height: 1.22;
}

.course-spine-card small {
  font-size: 0.68rem;
  font-weight: 900;
}

.course-spine-card p {
  margin: 0;
  font-size: 0.7rem;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.course-spine-card > i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, var(--gold), #fff0a3);
}

.course-spine-dots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 4px;
}

.course-spine-dots span {
  min-width: 0;
  height: 8px;
  border-radius: 999px;
  opacity: 0.52;
  color: var(--gold);
  background: currentColor;
}

.course-spine-dots .science { color: #6fcf97; }
.course-spine-dots .physics { color: var(--aether); }
.course-spine-dots .engineering { color: var(--ember); }
.course-spine-dots .ai { color: #b59cff; }

.course-spine-dots span.done,
.course-spine-dots span.now {
  opacity: 1;
}

.course-spine-dots span.now {
  box-shadow: 0 0 12px currentColor;
}

.course-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.course-library-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgb(158 255 189 / 0.22);
  border-radius: 9px;
  background:
    radial-gradient(circle at 0% 0%, rgb(242 201 76 / 0.09), transparent 30%),
    radial-gradient(circle at 100% 0%, rgb(158 255 189 / 0.08), transparent 32%),
    linear-gradient(180deg, rgb(255 246 215 / 0.035), rgb(0 0 0 / 0.16)),
    rgb(5 9 6 / 0.42);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
}

.course-library-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.course-library-head h3,
.course-library-head p {
  margin: 0;
}

.course-library-head h3 {
  margin-top: 3px;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.12;
  text-wrap: balance;
}

.course-library-head p {
  margin-top: 5px;
  color: #c7d8c1;
  font-size: 0.84rem;
  line-height: 1.34;
  max-width: 78ch;
}

.course-library-head strong {
  width: fit-content;
  max-width: 100%;
  min-width: 112px;
  padding: 7px 9px;
  border: 1px solid rgb(158 255 189 / 0.24);
  border-radius: 8px;
  color: #9effbd;
  background: rgb(0 0 0 / 0.24);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  text-align: center;
  text-transform: uppercase;
}

.next-realm-bridge {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgb(181 156 255 / 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, rgb(181 156 255 / 0.13), transparent 40%),
    linear-gradient(180deg, rgb(255 246 215 / 0.035), rgb(0 0 0 / 0.16)),
    rgb(7 5 12 / 0.42);
}

.next-realm-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.next-realm-copy h3,
.next-realm-copy p {
  margin: 0;
}

.next-realm-copy h3 {
  margin-top: 3px;
  color: #f2edff;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.9vw, 1.32rem);
  line-height: 1.08;
}

.next-realm-copy p {
  max-width: 80ch;
  color: #d7ccea;
  font-size: 0.78rem;
  line-height: 1.32;
}

.next-realm-copy button {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgb(181 156 255 / 0.4);
  border-radius: 8px;
  color: #120d06;
  background: linear-gradient(180deg, #f0e9ff, #b59cff);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

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

.next-realm-card {
  min-width: 0;
  min-height: 86px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background: rgb(0 0 0 / 0.18);
}

.next-realm-card.ready,
.next-realm-card.complete {
  border-color: rgb(158 255 189 / 0.3);
}

.next-realm-card.current {
  border-color: rgb(181 156 255 / 0.34);
}

.next-realm-card span,
.next-realm-card b,
.next-realm-card small {
  min-width: 0;
  display: block;
  overflow-wrap: break-word;
}

.next-realm-card span {
  color: #c9b9ff;
  font-size: 0.56rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.next-realm-card b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.84rem;
  line-height: 1.08;
}

.next-realm-card small {
  color: #d7ccea;
  font-size: 0.64rem;
  line-height: 1.18;
}

.course-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 10px;
  align-content: start;
}

.course-library-card {
  min-width: 0;
  min-height: 196px;
  display: grid;
  grid-template-rows: auto auto auto minmax(42px, 1fr) auto auto auto auto;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.16)),
    rgb(8 7 5 / 0.56);
}

.course-library-card.open {
  border-color: rgb(242 201 76 / 0.38);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 0 18px rgb(242 201 76 / 0.07);
}

.course-library-card.selected {
  border-color: rgb(158 255 189 / 0.48);
  background:
    linear-gradient(180deg, rgb(158 255 189 / 0.075), rgb(0 0 0 / 0.18)),
    rgb(8 7 5 / 0.62);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.1), 0 0 22px rgb(158 255 189 / 0.1);
}

.course-library-card.planned {
  border-color: rgb(158 255 189 / 0.16);
}

.course-library-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.course-library-card span,
.course-library-card small {
  color: #9fb1a5;
  font-size: 0.64rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.course-library-card i {
  width: 36px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #130d05;
  background: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 1000;
}

.course-library-card.planned i {
  background: #9effbd;
}

.course-library-card b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.08;
  text-wrap: balance;
}

.course-library-card p {
  margin: 0;
  color: #d2c59e;
  font-size: 0.72rem;
  line-height: 1.28;
}

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

.course-library-meta span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 7px;
  background: rgb(0 0 0 / 0.24);
  letter-spacing: 0;
  text-transform: none;
}

.course-library-card.open .course-library-meta span {
  border-color: rgb(242 201 76 / 0.18);
}

.course-library-meta b {
  color: #fff6d7;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  line-height: 1.1;
  overflow-wrap: break-word;
}

.course-library-meta small {
  color: #9fb1a5;
  font-size: 0.53rem;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.course-library-mastery {
  min-height: 28px;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid rgb(242 201 76 / 0.18);
  color: #fff5cd;
  background: rgb(242 201 76 / 0.055);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.22;
}

.course-library-card.planned .course-library-mastery {
  border-color: rgb(158 255 189 / 0.18);
  background: rgb(158 255 189 / 0.055);
}

.course-library-artifacts {
  color: #b9c8b6;
  font-size: 0.58rem;
  line-height: 1.22;
  overflow-wrap: break-word;
}

.course-library-card button {
  min-height: 34px;
  border: 1px solid rgb(242 201 76 / 0.3);
  border-radius: 8px;
  color: #130d05;
  background: linear-gradient(180deg, #fff0a3, var(--gold));
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.course-library-card.planned button {
  color: #e7f8de;
  background: rgb(158 255 189 / 0.08);
  border-color: rgb(158 255 189 / 0.22);
}

.course-detail-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 0;
  border: 1px solid rgb(158 255 189 / 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, rgb(158 255 189 / 0.1), transparent 34%),
    linear-gradient(180deg, rgb(255 246 215 / 0.035), rgb(0 0 0 / 0.12)),
    rgb(4 10 7 / 0.48);
  overflow: hidden;
}

.challenge-card > * {
  min-width: 0;
}

.course-detail-panel.open {
  border-color: rgb(242 201 76 / 0.26);
  background:
    radial-gradient(circle at 0% 0%, rgb(242 201 76 / 0.11), transparent 35%),
    radial-gradient(circle at 100% 0%, rgb(158 255 189 / 0.08), transparent 36%),
    rgb(4 10 7 / 0.48);
}

.course-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0 10px;
  padding: 9px 10px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.18);
}

.course-detail-head h3,
.course-detail-head p,
.course-detail-lesson p,
.course-detail-mastery p {
  margin: 0;
}

.course-detail-head h3 {
  margin-top: 3px;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.12;
}

.course-detail-head p {
  margin-top: 5px;
  color: #c7d8c1;
  font-size: 0.74rem;
  line-height: 1.32;
}

.course-detail-deliverable {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 7px;
  padding: 5px 7px;
  border: 1px solid rgb(158 255 189 / 0.18);
  border-radius: 7px;
  color: #9effbd;
  background: rgb(158 255 189 / 0.055);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.2;
}

.course-detail-head strong {
  width: fit-content;
  max-width: 145px;
  padding: 7px 9px;
  border: 1px solid rgb(242 201 76 / 0.25);
  border-radius: 8px;
  color: #fff5cd;
  background: rgb(0 0 0 / 0.24);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.course-command-board {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(220px, 0.82fr);
  gap: 14px;
  min-height: 206px;
  padding: 18px;
  border: 0;
  border-bottom: 1px solid rgb(242 201 76 / 0.2);
  border-radius: 0;
  background:
    radial-gradient(circle at 12% 4%, rgb(242 201 76 / 0.18), transparent 32%),
    radial-gradient(circle at 95% 14%, rgb(158 255 189 / 0.1), transparent 34%),
    linear-gradient(135deg, rgb(255 246 215 / 0.07), rgb(0 0 0 / 0.18)),
    rgb(5 8 6 / 0.64);
}

.course-command-copy {
  display: grid;
  gap: 9px;
  align-content: center;
  min-width: 0;
}

.course-command-copy span,
.course-command-rail span {
  color: #9effbd;
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.course-command-copy b {
  max-width: 22ch;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.74rem;
  line-height: 1.02;
  text-wrap: balance;
}

.course-command-copy p {
  margin: 0;
  max-width: 60ch;
  color: #dfd3aa;
  font-size: 0.88rem;
  line-height: 1.36;
}

.course-command-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.course-command-steps small {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgb(158 255 189 / 0.16);
  border-radius: 999px;
  color: #e7f8de;
  background: rgb(158 255 189 / 0.055);
  font-size: 0.58rem;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
}

.course-command-copy button {
  width: fit-content;
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid rgb(242 201 76 / 0.34);
  border-radius: 8px;
  color: #130d05;
  background: linear-gradient(180deg, #fff0a3, var(--gold));
  box-shadow: 0 10px 22px rgb(242 201 76 / 0.12);
  cursor: pointer;
  font-weight: 1000;
  transition: transform 180ms var(--motion), filter 180ms var(--motion), border-color 180ms var(--motion), box-shadow 180ms var(--motion);
}

.course-command-copy button:hover,
.course-command-copy button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
  border-color: rgb(242 201 76 / 0.62);
}

.course-command-copy button:active {
  transform: translateY(1px);
}

.course-command-rail {
  display: grid;
  gap: 8px;
  align-content: stretch;
}

.course-command-rail article {
  display: grid;
  gap: 2px;
  align-content: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background: rgb(0 0 0 / 0.2);
}

.course-command-rail b,
.course-command-rail small {
  min-width: 0;
  overflow-wrap: break-word;
}

.course-command-rail b {
  color: #fff5cd;
  font: 1000 0.88rem "JetBrains Mono", Consolas, monospace;
}

.course-command-rail small {
  color: #cfdabc;
  font-size: 0.64rem;
  line-height: 1.2;
}

.course-detail-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 0 10px;
}

.course-detail-lesson,
.course-detail-mastery,
.course-detail-lessons article {
  min-width: 0;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.22);
}

.course-detail-lesson,
.course-detail-mastery {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 10px;
}

.course-detail-lesson span,
.course-detail-mastery span,
.course-detail-lessons span {
  color: #9effbd;
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.course-detail-lesson b,
.course-detail-mastery b,
.course-detail-lessons b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.88rem;
  line-height: 1.12;
}

.course-detail-lesson p,
.course-detail-mastery p {
  color: #e7d7a8;
  font-size: 0.76rem;
  line-height: 1.3;
}

.course-detail-teach {
  display: grid;
  gap: 3px;
  padding: 7px;
  border: 1px solid rgb(158 255 189 / 0.12);
  border-radius: 7px;
  background: rgb(158 255 189 / 0.045);
}

.course-detail-teach em {
  color: #9effbd;
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.course-detail-teach small,
.course-detail-lessons small,
.course-detail-mastery li {
  color: #cfdabc;
  font-size: 0.68rem;
  line-height: 1.24;
}

.logic-gate-lab {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgb(158 255 189 / 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, rgb(158 255 189 / 0.08), transparent 42%),
    rgb(0 0 0 / 0.22);
}

.logic-gate-lab.complete {
  border-color: rgb(242 201 76 / 0.32);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 0 18px rgb(242 201 76 / 0.08);
}

.logic-gate-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.logic-gate-head span {
  color: #9effbd;
  font-size: 0.56rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.logic-gate-head b {
  display: block;
  margin-top: 2px;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.84rem;
  line-height: 1.1;
}

.logic-gate-head p,
.logic-gate-prompt {
  margin: 0;
  color: #d8cda8;
  font-size: 0.68rem;
  line-height: 1.28;
}

.logic-gate-head strong {
  min-width: 58px;
  padding: 6px 7px;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 7px;
  color: #fff5cd;
  background: rgb(0 0 0 / 0.26);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  text-align: center;
  text-transform: uppercase;
}

.logic-gate-cards {
  display: grid;
  gap: 6px;
}

.logic-gate-cards article {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.2);
}

.logic-gate-cards article.correct {
  border-color: rgb(158 255 189 / 0.34);
  background: rgb(158 255 189 / 0.06);
}

.logic-gate-cards article.review {
  border-color: rgb(255 156 124 / 0.34);
  background: rgb(255 156 124 / 0.055);
}

.logic-gate-cards article > span {
  color: #fff5cd;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.18;
  text-transform: none;
}

.logic-gate-cards article > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.logic-gate-cards button,
.logic-gate-result button {
  min-height: 28px;
  border: 1px solid rgb(158 255 189 / 0.18);
  border-radius: 7px;
  color: #e8f8de;
  background: rgb(158 255 189 / 0.06);
  cursor: pointer;
  font-size: 0.55rem;
  font-weight: 1000;
  line-height: 1.1;
  text-transform: uppercase;
}

.logic-gate-cards button.selected {
  color: #130d05;
  background: #9effbd;
  border-color: rgb(158 255 189 / 0.65);
}

.logic-gate-cards small {
  color: #bbcfb8;
  font-size: 0.62rem;
  line-height: 1.2;
}

.logic-gate-result {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgb(242 201 76 / 0.16);
  border-radius: 8px;
  background: rgb(242 201 76 / 0.045);
}

.logic-gate-result b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
}

.logic-gate-result small {
  color: #d8cda8;
  font-size: 0.66rem;
  line-height: 1.24;
}

.logic-gate-result button {
  width: fit-content;
  padding-inline: 10px;
}

.course-detail-mastery ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 17px;
}

.course-detail-mastery ul:empty {
  display: none;
}

.course-detail-lessons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 6px;
  padding: 0 10px 10px;
}

.course-detail-lessons article {
  display: grid;
  gap: 3px;
  padding: 8px;
}

.curriculum-atlas-panel {
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgb(242 201 76 / 0.2);
  border-radius: 9px;
  background:
    radial-gradient(circle at 0% 0%, rgb(242 201 76 / 0.1), transparent 36%),
    radial-gradient(circle at 100% 18%, rgb(85 183 217 / 0.08), transparent 34%),
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.16)),
    rgb(8 7 5 / 0.42);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
}

.curriculum-atlas-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.curriculum-atlas-head h3,
.curriculum-atlas-head p {
  margin: 0;
}

.curriculum-atlas-head h3 {
  margin-top: 3px;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.12;
  text-wrap: balance;
}

.curriculum-atlas-head p {
  margin-top: 5px;
  color: #d4c8a5;
  font-size: 0.78rem;
  line-height: 1.32;
}

.curriculum-atlas-head strong {
  min-width: 102px;
  padding: 7px 8px;
  border: 1px solid rgb(242 201 76 / 0.3);
  border-radius: 8px;
  color: #fff1ad;
  background: rgb(0 0 0 / 0.24);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.66rem;
  text-align: center;
  text-transform: uppercase;
}

.curriculum-atlas-grid,
.curriculum-prereq-grid {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.curriculum-atlas-grid {
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
}

.curriculum-prereq-grid {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}

.curriculum-week-strip,
.curriculum-realm-roadmap {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(168px, 1fr);
  gap: 7px;
  margin-top: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}

.curriculum-band-card,
.curriculum-week-card,
.curriculum-prereq-card,
.curriculum-realm-card {
  min-width: 0;
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.11);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.15)),
    rgb(0 0 0 / 0.16);
}

.curriculum-week-card,
.curriculum-realm-card {
  min-height: 148px;
  scroll-snap-align: start;
}

.curriculum-band-card.current,
.curriculum-week-card.current,
.curriculum-prereq-card.current,
.curriculum-realm-card.open {
  border-color: rgb(242 201 76 / 0.42);
  background:
    radial-gradient(circle at 14% 0%, rgb(242 201 76 / 0.13), transparent 48%),
    rgb(16 12 5 / 0.54);
}

.curriculum-week-card.complete,
.curriculum-prereq-card.ready {
  border-color: rgb(158 255 189 / 0.3);
}

.curriculum-week-card.planned,
.curriculum-prereq-card.locked,
.curriculum-prereq-card.needed,
.curriculum-prereq-card.next,
.curriculum-realm-card.planned {
  opacity: 0.78;
}

.curriculum-band-card span,
.curriculum-week-card span,
.curriculum-prereq-card span,
.curriculum-realm-card span,
.curriculum-week-card em {
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.curriculum-week-card.complete span,
.curriculum-prereq-card.ready span {
  color: #9effbd;
}

.curriculum-realm-card.planned span,
.curriculum-prereq-card.next span {
  color: var(--aether);
}

.curriculum-band-card b,
.curriculum-week-card b,
.curriculum-prereq-card b,
.curriculum-realm-card b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.84rem;
  line-height: 1.08;
}

.curriculum-band-card small,
.curriculum-week-card small,
.curriculum-prereq-card small,
.curriculum-realm-card small,
.curriculum-band-card p,
.curriculum-week-card p,
.curriculum-realm-card p {
  margin: 0;
  color: #cdbf98;
  font-size: 0.68rem;
  line-height: 1.22;
}

.curriculum-week-card p,
.curriculum-realm-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.curriculum-week-card em {
  align-self: end;
  color: #d8caa0;
  font-style: normal;
}

.course-syllabus-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 9px;
  background:
    radial-gradient(circle at 8% 0%, rgb(242 201 76 / 0.11), transparent 32%),
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.18)),
    rgb(9 8 6 / 0.62);
  box-shadow:
    inset 0 1px 0 rgb(255 246 215 / 0.07),
    0 14px 38px rgb(0 0 0 / 0.18);
}

.course-syllabus-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.course-syllabus-head h3,
.course-syllabus-head p,
.course-syllabus-feedback {
  margin: 0;
}

.course-syllabus-head h3 {
  margin-top: 3px;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.12;
  text-wrap: balance;
}

.course-syllabus-head p {
  margin-top: 5px;
  max-width: 74ch;
  color: #d4c8a5;
  font-size: 0.78rem;
  line-height: 1.32;
}

.course-syllabus-head strong {
  min-width: 112px;
  padding: 7px 8px;
  border: 1px solid rgb(242 201 76 / 0.3);
  border-radius: 8px;
  color: #fff1ad;
  background: rgb(0 0 0 / 0.24);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.66rem;
  text-align: center;
  text-transform: uppercase;
}

.course-syllabus-week-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin-top: 11px;
}

.course-syllabus-week {
  min-width: 0;
  min-height: 84px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  color: #d8caa0;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.12)),
    rgb(0 0 0 / 0.16);
  cursor: pointer;
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.course-syllabus-week:hover,
.course-syllabus-week:focus-visible {
  border-color: rgb(242 201 76 / 0.42);
  transform: translateY(-1px);
}

.course-syllabus-week:active {
  transform: translateY(0);
}

.course-syllabus-week.selected {
  border-color: rgb(242 201 76 / 0.56);
  background:
    radial-gradient(circle at 20% 0%, rgb(242 201 76 / 0.15), transparent 52%),
    rgb(17 13 7 / 0.72);
  box-shadow: inset 0 0 0 1px rgb(255 246 215 / 0.08);
}

.course-syllabus-week.complete {
  border-color: rgb(158 255 189 / 0.3);
}

.course-syllabus-week span,
.course-syllabus-standard span,
.course-syllabus-proof b {
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.course-syllabus-week.complete span {
  color: #9effbd;
}

.course-syllabus-week b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.78rem;
  line-height: 1.1;
}

.course-syllabus-week small {
  color: #bfb28f;
  font-size: 0.66rem;
  line-height: 1.2;
}

.course-syllabus-body {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(236px, 0.55fr);
  gap: 9px;
  margin-top: 10px;
}

.course-syllabus-lesson-list,
.course-syllabus-standards {
  display: grid;
  gap: 8px;
  align-content: start;
}

.course-syllabus-focus-board {
  --syllabus-accent: var(--gold);
  display: grid;
  gap: 8px;
}

.course-syllabus-focus-board.math { --syllabus-accent: var(--gold); }
.course-syllabus-focus-board.science { --syllabus-accent: #6fcf97; }
.course-syllabus-focus-board.physics { --syllabus-accent: var(--aether); }
.course-syllabus-focus-board.engineering { --syllabus-accent: var(--ember); }
.course-syllabus-focus-board.ai { --syllabus-accent: #b59cff; }

.course-syllabus-day-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.course-syllabus-day {
  min-width: 0;
  min-height: 72px;
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.11);
  border-radius: 8px;
  color: #d8caa0;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.14)),
    rgb(0 0 0 / 0.16);
  cursor: pointer;
  text-align: left;
  transition: transform 180ms var(--motion), border-color 180ms var(--motion), background 180ms var(--motion);
}

.course-syllabus-day:hover,
.course-syllabus-day:focus-visible {
  border-color: color-mix(in srgb, var(--syllabus-accent) 52%, transparent);
  transform: translateY(-1px);
}

.course-syllabus-day:active {
  transform: translateY(0);
}

.course-syllabus-day.selected {
  border-color: color-mix(in srgb, var(--syllabus-accent) 72%, transparent);
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--syllabus-accent) 16%, transparent), transparent 52%),
    rgb(17 13 7 / 0.72);
  box-shadow: inset 0 0 0 1px rgb(255 246 215 / 0.08);
}

.course-syllabus-day.complete {
  border-color: rgb(158 255 189 / 0.28);
}

.course-syllabus-day.math { --syllabus-accent: var(--gold); }
.course-syllabus-day.science { --syllabus-accent: #6fcf97; }
.course-syllabus-day.physics { --syllabus-accent: var(--aether); }
.course-syllabus-day.engineering { --syllabus-accent: var(--ember); }
.course-syllabus-day.ai { --syllabus-accent: #b59cff; }

.course-syllabus-day span,
.course-syllabus-day b,
.course-syllabus-day small {
  min-width: 0;
  overflow-wrap: break-word;
}

.course-syllabus-day span {
  color: var(--syllabus-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.course-syllabus-day.complete span {
  color: #9effbd;
}

.course-syllabus-day b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.74rem;
  line-height: 1.08;
}

.course-syllabus-day small {
  color: #bfb28f;
  font-size: 0.62rem;
  line-height: 1.15;
  text-transform: uppercase;
}

.course-syllabus-lesson,
.course-syllabus-featured-lesson,
.course-syllabus-standard {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.15)),
    rgb(0 0 0 / 0.16);
}

.course-syllabus-featured-lesson {
  position: relative;
  overflow: hidden;
  min-height: 244px;
  border-color: color-mix(in srgb, var(--syllabus-accent) 38%, transparent);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--syllabus-accent) 14%, transparent), transparent 44%),
    linear-gradient(180deg, rgb(255 246 215 / 0.055), rgb(0 0 0 / 0.18)),
    rgb(9 8 6 / 0.72);
}

.course-syllabus-featured-lesson::before {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--syllabus-accent) 18%, transparent);
  border-radius: 7px;
}

.course-syllabus-lesson {
  --syllabus-accent: var(--gold);
  border-color: color-mix(in srgb, var(--syllabus-accent) 34%, transparent);
}

.course-syllabus-lesson.math { --syllabus-accent: var(--gold); }
.course-syllabus-lesson.science { --syllabus-accent: #6fcf97; }
.course-syllabus-lesson.physics { --syllabus-accent: var(--aether); }
.course-syllabus-lesson.engineering { --syllabus-accent: var(--ember); }
.course-syllabus-lesson.ai { --syllabus-accent: #b59cff; }

.course-syllabus-lesson.complete {
  border-color: rgb(158 255 189 / 0.34);
}

.course-syllabus-lesson.current {
  box-shadow: inset 0 0 0 1px rgb(255 246 215 / 0.08);
}

.course-syllabus-lesson header,
.course-syllabus-featured-lesson header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin-bottom: 8px;
}

.course-syllabus-lesson header span,
.course-syllabus-featured-lesson header span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #110d06;
  background: var(--syllabus-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 1000;
}

.course-syllabus-featured-lesson header span {
  width: 42px;
  height: 42px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--syllabus-accent) 24%, transparent);
}

.course-syllabus-lesson header b,
.course-syllabus-featured-lesson header b,
.course-syllabus-standard b {
  display: block;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  line-height: 1.12;
}

.course-syllabus-lesson header b {
  font-size: 0.93rem;
}

.course-syllabus-featured-lesson header b {
  font-size: clamp(1rem, 1.8vw, 1.28rem);
  text-wrap: balance;
}

.course-syllabus-lesson header small,
.course-syllabus-featured-lesson header small,
.course-syllabus-standard small,
.course-syllabus-standard li {
  color: #cdbf98;
  font-size: 0.68rem;
  line-height: 1.24;
}

.course-syllabus-featured-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.course-syllabus-lesson p,
.course-syllabus-featured-lesson p {
  margin: 0 0 6px;
  color: #d5c8a4;
  font-size: 0.75rem;
  line-height: 1.34;
}

.course-syllabus-featured-lesson p {
  min-height: 112px;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  background: rgb(0 0 0 / 0.16);
}

.course-syllabus-lesson p strong,
.course-syllabus-featured-lesson p strong {
  display: block;
  margin-bottom: 2px;
  color: var(--syllabus-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  text-transform: uppercase;
}

.course-syllabus-proof {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgb(255 246 215 / 0.1);
}

.course-syllabus-proof span {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #cabd98;
  font-size: 0.67rem;
  line-height: 1.22;
}

.course-syllabus-standard {
  display: grid;
  gap: 5px;
}

.course-syllabus-standard.criteria ul {
  margin: 0;
  padding-left: 16px;
}

.course-syllabus-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.course-syllabus-feedback {
  margin-top: 8px;
  color: #baa982;
  font-size: 0.72rem;
  line-height: 1.28;
}

.course-planner-record-panel {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgb(242 201 76 / 0.22);
  border-radius: 9px;
  background:
    radial-gradient(circle at 100% 0%, rgb(242 201 76 / 0.1), transparent 36%),
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.18)),
    rgb(8 7 5 / 0.6);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
}

.course-planner-record-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.course-planner-record-head h3,
.course-planner-record-head p {
  margin: 0;
}

.course-planner-record-head h3 {
  margin-top: 3px;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.12;
}

.course-planner-record-head p {
  margin-top: 5px;
  color: #d4c8a5;
  font-size: 0.78rem;
  line-height: 1.32;
}

.course-planner-record-head strong {
  min-width: 108px;
  padding: 7px 8px;
  border: 1px solid rgb(242 201 76 / 0.3);
  border-radius: 8px;
  color: #fff1ad;
  background: rgb(0 0 0 / 0.24);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.66rem;
  text-align: center;
  text-transform: uppercase;
}

.course-planner-record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.course-planner-record-card {
  min-width: 0;
  min-height: 94px;
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 9px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.14)),
    rgb(0 0 0 / 0.16);
}

.course-planner-record-card.ready {
  border-color: rgb(158 255 189 / 0.3);
}

.course-planner-record-card.current {
  border-color: rgb(242 201 76 / 0.34);
}

.course-planner-record-card.locked {
  opacity: 0.78;
}

.course-planner-record-card span {
  color: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.58rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.course-planner-record-card.ready span {
  color: #9effbd;
}

.course-planner-record-card b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.05;
  overflow-wrap: break-word;
}

.course-planner-record-card small {
  color: #cdbf98;
  font-size: 0.68rem;
  line-height: 1.22;
}

.record-desk-panel {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, rgb(242 201 76 / 0.1), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.18)),
    rgb(0 0 0 / 0.16);
}

.record-desk-panel[data-state="synced"] {
  border-color: rgb(158 255 189 / 0.24);
  background:
    radial-gradient(circle at 0% 0%, rgb(158 255 189 / 0.09), transparent 38%),
    linear-gradient(180deg, rgb(255 246 215 / 0.045), rgb(0 0 0 / 0.18)),
    rgb(0 0 0 / 0.16);
}

.record-desk-main {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(224px, 0.82fr);
  gap: 10px;
  align-items: start;
}

.record-desk-focus {
  --record-accent: var(--gold);
  min-width: 0;
  min-height: 178px;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--record-accent) 38%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--record-accent) 15%, transparent), transparent 46%),
    linear-gradient(180deg, rgb(255 246 215 / 0.05), rgb(0 0 0 / 0.16)),
    rgb(9 8 6 / 0.7);
}

.record-desk-focus.math { --record-accent: var(--gold); }
.record-desk-focus.science { --record-accent: #6fcf97; }
.record-desk-focus.physics { --record-accent: var(--aether); }
.record-desk-focus.engineering { --record-accent: var(--ember); }
.record-desk-focus.ai { --record-accent: #b59cff; }

.record-desk-focus span,
.record-desk-check span {
  color: var(--record-accent, var(--gold));
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.record-desk-focus b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1rem, 1.7vw, 1.28rem);
  line-height: 1.08;
  text-wrap: balance;
}

.record-desk-focus p {
  margin: 0;
  color: #d8caa0;
  font-size: 0.82rem;
  line-height: 1.36;
}

.record-desk-evidence {
  display: grid;
  gap: 4px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgb(255 246 215 / 0.1);
}

.record-desk-evidence strong {
  color: #fff1ad;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.record-desk-evidence small {
  color: #bfb28f;
  font-size: 0.72rem;
  line-height: 1.28;
}

.record-desk-side {
  display: grid;
  gap: 8px;
}

.record-desk-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.record-desk-metrics span {
  min-height: 62px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.16);
}

.record-desk-metrics b {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.05;
  overflow-wrap: break-word;
}

.record-desk-metrics small {
  color: #a99b78;
  font-size: 0.58rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.record-desk-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
}

.record-desk-primary,
.record-desk-secondary {
  min-height: 38px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 1000;
  text-transform: uppercase;
  transition: transform 180ms var(--motion), filter 180ms var(--motion);
}

.record-desk-primary {
  border: 1px solid rgb(242 201 76 / 0.48);
  color: #120d06;
  background: linear-gradient(180deg, #fff2b8, var(--gold));
  box-shadow: 0 4px 0 rgb(0 0 0 / 0.34);
}

.record-desk-secondary {
  border: 1px solid rgb(242 201 76 / 0.24);
  color: #fff1ad;
  background: rgb(0 0 0 / 0.22);
}

.record-desk-primary:hover,
.record-desk-primary:focus-visible,
.record-desk-secondary:hover,
.record-desk-secondary:focus-visible {
  filter: brightness(1.08);
}

.record-desk-primary:active,
.record-desk-secondary:active {
  transform: translateY(1px);
}

.record-desk-checklist {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.record-desk-check {
  min-height: 68px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.13)),
    rgb(0 0 0 / 0.14);
}

.record-desk-check.ready {
  border-color: rgb(158 255 189 / 0.28);
}

.record-desk-check.current {
  border-color: rgb(242 201 76 / 0.34);
}

.record-desk-check.locked {
  opacity: 0.8;
}

.record-desk-check.ready span {
  color: #9effbd;
}

.record-desk-check b {
  color: #d8caa0;
  font-size: 0.72rem;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.course-record-detail-panel {
  margin-top: 10px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.04), rgb(0 0 0 / 0.16)),
    rgb(0 0 0 / 0.14);
}

.course-record-detail-panel summary {
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  color: #fff1ad;
  cursor: pointer;
  list-style: none;
}

.course-record-detail-panel summary::-webkit-details-marker {
  display: none;
}

.course-record-detail-panel summary::before {
  content: "+";
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.28);
  border-radius: 7px;
  color: #120d06;
  background: var(--gold);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 1000;
}

.course-record-detail-panel[open] summary::before {
  content: "-";
}

.course-record-detail-panel summary span {
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.88rem;
  line-height: 1.08;
}

.course-record-detail-panel summary b {
  color: #bfb28f;
  font-size: 0.68rem;
  line-height: 1.2;
}

.course-record-detail-panel .course-planner-record-grid,
.course-record-detail-panel .course-planner-record-actions {
  padding-inline: 10px;
}

.course-record-detail-panel .course-planner-record-actions {
  padding-bottom: 10px;
}

.course-planner-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.course-card-v2 {
  --course-accent: var(--gold);
  min-height: 206px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 246 215 / 0.05), rgb(0 0 0 / 0.18)),
    rgb(13 11 8 / 0.8);
}

.course-card-v2[data-domain="math"] { --course-accent: var(--gold); }
.course-card-v2[data-domain="science"] { --course-accent: #6fcf97; }
.course-card-v2[data-domain="physics"] { --course-accent: var(--aether); }
.course-card-v2[data-domain="engineering"] { --course-accent: var(--ember); }
.course-card-v2[data-domain="ai"] { --course-accent: #b59cff; }

.course-card-v2[data-domain="math"],
.mastery-check-panel[data-domain="math"] { border-color: rgb(242 201 76 / 0.34); }
.course-card-v2[data-domain="science"],
.mastery-check-panel[data-domain="science"] { border-color: rgb(111 207 151 / 0.34); }
.course-card-v2[data-domain="physics"],
.mastery-check-panel[data-domain="physics"] { border-color: rgb(85 183 217 / 0.34); }
.course-card-v2[data-domain="engineering"],
.mastery-check-panel[data-domain="engineering"] { border-color: rgb(217 107 43 / 0.34); }
.course-card-v2[data-domain="ai"],
.mastery-check-panel[data-domain="ai"] { border-color: rgb(181 156 255 / 0.34); }

.course-card-v2.current {
  box-shadow: 0 0 0 1px rgb(255 246 215 / 0.16);
}

.course-card-v2.passed {
  border-color: rgb(158 255 189 / 0.42);
}

.course-card-v2.ready {
  border-color: rgb(242 201 76 / 0.48);
}

.course-card-v2 header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.course-code {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #100c06;
  background: var(--course-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 1000;
}

.course-card-v2 h3 {
  margin: 0;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.98rem;
  line-height: 1.12;
}

.course-card-v2 small,
.course-card-v2 p,
.course-status-line span,
.course-status-line b,
.mastery-standard small {
  overflow-wrap: break-word;
}

.course-card-v2 small {
  color: #b8c3af;
  line-height: 1.24;
}

.course-card-v2 p {
  margin: 0;
  color: #d5c8a4;
  font-size: 0.82rem;
  line-height: 1.34;
}

.course-status-line {
  display: grid;
  gap: 5px;
}

.course-status-line span {
  color: #9fb1a5;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.course-status-line b {
  color: var(--course-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
}

.course-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 246 215 / 0.1);
}

.course-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--course-accent), #fff0a3);
}

.course-card-v2 button,
.mastery-check-action {
  min-height: 38px;
  border: 1px solid rgb(242 201 76 / 0.38);
  border-radius: 8px;
  color: #130d05;
  background: linear-gradient(180deg, #fff0a3, var(--course-accent, var(--gold)));
  cursor: pointer;
  font-weight: 1000;
}

.course-card-v2 button:hover,
.course-card-v2 button:focus-visible,
.mastery-check-action:hover,
.mastery-check-action:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.mastery-check-panel {
  --course-accent: var(--gold);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgb(242 201 76 / 0.13), transparent 32%),
    rgb(0 0 0 / 0.2);
}

.mastery-check-panel[data-domain="math"] { --course-accent: var(--gold); }
.mastery-check-panel[data-domain="science"] { --course-accent: #6fcf97; }
.mastery-check-panel[data-domain="physics"] { --course-accent: var(--aether); }
.mastery-check-panel[data-domain="engineering"] { --course-accent: var(--ember); }
.mastery-check-panel[data-domain="ai"] { --course-accent: #b59cff; }

.mastery-check-panel h3 {
  margin-top: 4px;
  color: #fff5cd;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
  line-height: 1.12;
}

.mastery-check-action {
  justify-self: end;
  min-width: 138px;
  padding: 8px 11px;
}

.mastery-check-action:disabled {
  color: #d5c8a4;
  background: rgb(255 246 215 / 0.08);
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.mastery-check-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.mastery-standard {
  min-height: 58px;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 8px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 7px;
  background: rgb(255 246 215 / 0.04);
}

.mastery-standard.project {
  border-color: color-mix(in srgb, var(--course-accent) 38%, transparent);
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--course-accent) 14%, transparent), transparent 58%),
    rgb(255 246 215 / 0.045);
}

.mastery-standard.rubric {
  border-color: rgb(158 255 189 / 0.18);
  background:
    linear-gradient(180deg, rgb(158 255 189 / 0.05), rgb(0 0 0 / 0.08)),
    rgb(255 246 215 / 0.025);
}

.mastery-standard.rubric b {
  color: #9effbd;
}

.mastery-standard b {
  color: var(--course-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.75rem;
}

.mastery-standard small {
  color: #d4c69f;
  line-height: 1.24;
}

.academy-drawer {
  border: 1px solid rgb(242 201 76 / 0.26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 94% 8%, rgb(242 201 76 / 0.1), transparent 30%),
    rgb(255 255 255 / 0.03);
  overflow: hidden;
}

.academy-drawer summary {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 3px;
  align-items: center;
  padding: 13px 14px;
  color: #fff3c6;
  cursor: pointer;
  list-style: none;
}

.academy-drawer summary::-webkit-details-marker {
  display: none;
}

.academy-drawer summary::after {
  content: "+";
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.36);
  border-radius: 7px;
  color: var(--gold);
  background: #070503;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 900;
  grid-column: 2;
  grid-row: 1 / span 2;
}

.academy-drawer[open] summary::after {
  content: "-";
}

.academy-drawer summary span,
.academy-drawer summary b {
  display: block;
}

.academy-drawer summary span {
  grid-column: 1;
  grid-row: 1;
  font-family: Cinzel, Georgia, serif;
  font-size: 1rem;
}

.academy-drawer summary b {
  grid-column: 1;
  grid-row: 2;
  margin-top: 0;
  color: #b9aa82;
  font-size: 0.78rem;
  line-height: 1.2;
}

.academy-drawer[open] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 12px 12px;
}

.academy-drawer[open] summary {
  grid-column: 1 / -1;
  margin: 0 -12px;
  border-bottom: 1px solid rgb(242 201 76 / 0.18);
}

.progress-drawer[open] {
  display: block;
}

.progress-drawer[open] summary {
  margin-bottom: 12px;
}

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

.academy-drawer .rank-ladder,
.academy-drawer .academy-record,
.academy-drawer .learning-snapshot,
.academy-drawer .transcript-ledger,
.academy-drawer .school-portal,
.academy-drawer .course-catalog,
.academy-drawer .academy-realms,
.academy-drawer .school-record-pack,
.academy-drawer .academy-familiar,
.academy-drawer .next-move-card,
.academy-drawer .spell-card-vault,
.academy-drawer .challenge-forge,
.academy-drawer .guild-projects,
.academy-drawer .session-goals,
.academy-drawer .tutor-ledger,
.academy-drawer .review-queue,
.academy-drawer .quest-oracle,
.academy-drawer .lab-notebook {
  min-width: 0;
}

.academy-drawer .school-portal,
.academy-drawer .progress-board-panel,
.academy-drawer .progress-detail-panel,
.academy-drawer .transcript-ledger,
.academy-drawer .school-record-pack,
.academy-drawer .course-catalog,
.academy-drawer .academy-realms,
.academy-drawer .guild-projects {
  grid-column: 1 / -1;
}

.coach-drawer[open] {
  grid-template-columns: 1fr;
}

.coach-drawer .session-goals,
.coach-drawer .tutor-ledger,
.coach-drawer .review-queue,
.coach-drawer .quest-oracle,
.coach-drawer .lab-notebook {
  grid-column: 1;
}

@media (min-width: 1280px) {
  .game-shell {
    grid-template-columns: minmax(520px, 0.95fr) minmax(650px, 1.05fr);
  }

  .game-shell[data-focus="today"] {
    grid-template-columns: minmax(300px, 0.38fr) minmax(840px, 1.62fr);
  }

  .game-shell[data-focus="today"] .arena {
    min-height: 100dvh;
  }

  .game-shell[data-focus="today"] .arena-director {
    width: min(82%, 430px);
  }

  .game-shell[data-focus="academy"] {
    grid-template-columns: minmax(300px, 0.36fr) minmax(860px, 1.64fr);
  }

  .game-shell[data-focus="academy"] .arena {
    min-height: 100dvh;
    border-right-color: rgb(158 255 189 / 0.22);
    filter: saturate(0.92) brightness(0.84);
  }

  .game-shell[data-focus="academy"] .arena::after {
    background:
      linear-gradient(90deg, rgb(5 3 2 / 0.46), transparent 28%, rgb(5 3 2 / 0.68)),
      radial-gradient(ellipse at center, transparent 30%, rgb(5 3 2 / 0.54) 82%);
  }

  .game-shell[data-focus="academy"] .arena-director {
    width: min(84%, 340px);
    left: 8%;
    right: auto;
    top: 34px;
    padding: 12px;
  }

  .game-shell[data-focus="academy"] .arena-director strong {
    font-size: 0.92rem;
  }

  .game-shell[data-focus="academy"] .arena-director p {
    font-size: 0.72rem;
  }

  .game-shell[data-focus="academy"] .arena-signal-row {
    display: none;
  }

  .game-shell[data-focus="academy"] .phase-banner {
    display: none;
  }

  .game-shell[data-focus="academy"] .battle-line {
    width: 520px;
    bottom: 12%;
    transform: translateX(-50%) scale(0.55);
  }

  .game-shell[data-focus="academy"] .battle-ground {
    width: 520px;
    bottom: 6%;
    transform: translateX(-50%) perspective(620px) rotateX(62deg) scale(0.58);
  }

  .game-shell[data-focus="academy"] .gate {
    width: 420px;
    height: 340px;
    bottom: 12%;
    opacity: 0.72;
  }

  .quest-panel {
    max-height: 100dvh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(286px, 0.88fr);
    grid-auto-flow: row dense;
    grid-auto-rows: min-content;
    align-content: start;
    gap: 16px;
    padding: 28px;
  }

  .quest-panel[data-focus="today"] .quest-header,
  .quest-panel[data-focus="today"] .focus-rail,
  .quest-panel[data-focus="today"] .headmaster-plan,
  .quest-panel[data-focus="today"] .member-week-panel,
  .quest-panel[data-focus="today"] .school-systems-drawer,
  .quest-panel[data-focus="today"] .first-quest-director {
    grid-column: 1 / -1;
  }

  .quest-panel[data-focus="today"] .student-hq-panel {
    max-width: 1120px;
  }

  .game-shell[data-focus="academy"] .quest-panel {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.34fr);
    gap: 18px;
    padding: 24px 32px 34px;
    background:
      radial-gradient(ellipse at 12% 0%, rgb(242 201 76 / 0.09), transparent 34%),
      radial-gradient(ellipse at 86% 4%, rgb(158 255 189 / 0.07), transparent 32%),
      linear-gradient(180deg, rgb(16 18 12 / 0.97), rgb(5 6 4 / 0.99));
  }

  .game-shell[data-focus="academy"] .quest-panel::before {
    inset: 0;
    background:
      linear-gradient(90deg, rgb(158 255 189 / 0.035), transparent 34%, rgb(242 201 76 / 0.035)),
      radial-gradient(circle at 80% 10%, rgb(158 255 189 / 0.055), transparent 28rem);
  }

  .game-shell[data-focus="academy"] .quest-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    padding-bottom: 14px;
    border-bottom: 1px solid rgb(242 201 76 / 0.18);
  }

  .game-shell[data-focus="academy"] .quest-header h1 {
    max-width: 16ch;
    font-size: 3.15rem;
    line-height: 0.98;
    text-wrap: balance;
  }

  .game-shell[data-focus="academy"] .quest-header p {
    max-width: 58ch;
  }

  .game-shell[data-focus="academy"] .media-controls,
  .game-shell[data-focus="academy"] .account-chip {
    grid-column: 2;
  }

  .game-shell[data-focus="academy"] .focus-rail,
  .game-shell[data-focus="academy"] .academy-command-bar,
  .game-shell[data-focus="academy"] .academy-tabs,
  .game-shell[data-focus="academy"] .course-map-panel,
  .game-shell[data-focus="academy"] .deck-label-progress,
  .game-shell[data-focus="academy"] .rank-ladder,
  .game-shell[data-focus="academy"] .academy-record,
  .game-shell[data-focus="academy"] .learning-snapshot,
  .game-shell[data-focus="academy"] .academy-drawer,
  .game-shell[data-focus="academy"] .academy-familiar,
  .game-shell[data-focus="academy"] .next-move-card,
  .game-shell[data-focus="academy"] .spell-card-vault,
  .game-shell[data-focus="academy"] .challenge-forge,
  .game-shell[data-focus="academy"] .guild-projects,
  .game-shell[data-focus="academy"] .relic-shelf,
  .game-shell[data-focus="academy"] .adventure-log,
  .game-shell[data-focus="academy"] .academy-realms {
    grid-column: 1 / -1;
  }

  .game-shell[data-focus="academy"][data-academy-tab="courses"] .course-map-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .game-shell[data-focus="academy"] .course-library-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
    gap: 14px;
    align-items: start;
    padding: 16px;
  }

  .game-shell[data-focus="academy"] .course-library-head {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
  }

  .game-shell[data-focus="academy"] .course-library-head h3 {
    font-size: 1.16rem;
  }

  .game-shell[data-focus="academy"] .course-library-head p {
    max-width: 72ch;
  }

  .game-shell[data-focus="academy"] .course-detail-panel {
    margin-top: 0;
    min-height: 100%;
  }

  .game-shell[data-focus="academy"] .course-library-grid {
    margin-top: 0;
    grid-template-columns: 1fr;
    max-height: 820px;
    overflow-y: auto;
    padding-right: 4px;
  }

  .game-shell[data-focus="academy"] .course-detail-main {
    grid-template-columns: minmax(0, 1.08fr) minmax(230px, 0.92fr);
    gap: 10px;
  }

  .game-shell[data-focus="academy"] .course-detail-lessons {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .game-shell[data-focus="academy"] .course-library-card {
    min-height: 190px;
  }

  .game-shell[data-focus="academy"] .course-library-card p {
    max-height: 3.85em;
    overflow: hidden;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="progress"] .progress-drawer[open] .progress-drawer-body {
    grid-template-columns: minmax(0, 1.04fr) minmax(330px, 0.96fr);
    align-items: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="progress"] .progress-board-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="progress"] .transcript-ledger {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="progress"] .progress-detail-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="progress"] .school-record-pack {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="progress"] .transcript-list {
    max-height: 430px;
    overflow-y: auto;
    padding-right: 4px;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="progress"] .record-pack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quest-header,
  .focus-rail,
  .campaign-map,
  .academy-tabs,
  .subject-wings-panel,
  .lesson-scroll,
  .deck-label-quest,
  .deck-label-coach,
  .deck-label-progress {
    grid-column: 1 / -1;
  }

  .media-controls {
    grid-column: 2;
    justify-self: stretch;
  }

  .account-chip,
  .deck-label-setup,
  .difficulty-paths,
  .coach-drawer {
    grid-column: 2;
  }

  .account-chip {
    align-self: start;
    min-height: 64px;
  }

  .boss-card,
  .meters,
  .mentor-strip,
  .dm-panel,
  .lab-reactor,
  .session-goals,
  .tutor-ledger,
  .review-queue,
  .quest-oracle,
  .lab-notebook {
    grid-column: 2;
  }

  .learning-flow,
  .headmaster-plan,
  .course-map-panel,
  .spellbook,
  .curriculum-map,
  .challenge-card,
  .method-lab,
  .codex,
  .controls {
    grid-column: 1;
  }

  .curriculum-map .map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .curriculum-map .map-tower {
    min-height: 136px;
  }

  .academy-path-summary,
  .future-realms-strip {
    grid-template-columns: 1fr;
  }

  .academy-skill-tree .map-tower {
    min-height: 284px;
  }

  .rank-ladder,
  .academy-record,
  .learning-snapshot,
  .academy-drawer,
  .academy-familiar,
  .next-move-card,
  .spell-card-vault,
  .challenge-forge,
  .guild-projects,
  .relic-shelf,
  .adventure-log,
  .academy-realms {
    grid-column: 1 / -1;
  }

  .deck-label {
    margin-top: 10px;
  }

  .deck-label-quest {
    margin-top: 2px;
  }

  .boss-card {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .boss-card img {
    width: 62px;
  }

  .whiteboard-tiles {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .course-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subject-wings-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(212px, 1fr);
    grid-template-columns: none;
  }

  .mastery-check-list {
    grid-template-columns: 1fr;
  }

  .best-score {
    grid-column: 1 / -1;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 10px;
  }

  .meters {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .meter {
    min-height: 54px;
    padding: 8px;
  }

  .mentor-strip {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .mentor-strip img {
    width: 44px;
  }

  .combo-meter {
    grid-column: 1 / -1;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 10px;
  }

  .lesson-scroll,
  .challenge-card {
    box-shadow:
      0 0 0 6px rgb(5 3 2 / 0.88),
      0 36px 82px rgb(0 0 0 / 0.5),
      0 0 46px rgb(242 201 76 / 0.11),
      inset 0 1px 0 rgb(255 246 215 / 0.12);
  }

  .lesson-grid {
    grid-template-columns: 1fr;
  }

  .challenge-card {
    padding: 26px;
  }

  .dragon-test-command {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .dragon-command-sigil {
    width: 48px;
    height: 48px;
  }

  .dragon-command-marks {
    grid-column: 1 / -1;
  }

  .cast-meter {
    grid-template-columns: 1fr;
  }

  .cast-cockpit-main {
    grid-template-columns: 1fr;
  }

  .cast-cockpit-main strong {
    justify-self: start;
  }

  .cast-cockpit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cast-cockpit-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cast-meter-orb {
    width: 54px;
    justify-self: start;
  }

  .cast-meter strong {
    justify-self: start;
    min-width: 74px;
  }

  .answers {
    grid-template-columns: 1fr;
  }

  .method-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dm-panel,
  .tutor-ledger {
    grid-template-columns: 1fr;
  }

  .dm-stats,
  .tutor-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .rank-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .record-grid,
  .snapshot-grid,
  .card-row,
  .project-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cast-good .spell-orb {
  animation: castGood 560ms ease;
}

.hero.cast-good {
  animation: heroCastStep 620ms cubic-bezier(0.18, 0.9, 0.25, 1.18);
}

.hero.cast-good .hero-sprite {
  animation: heroSpriteCast 620ms cubic-bezier(0.18, 0.9, 0.25, 1.18);
}

.hero.cast-good .staff {
  animation: staffCast 620ms cubic-bezier(0.18, 0.9, 0.25, 1.18);
}

.hero.cast-good .cast-rings span {
  animation: castRingBurst 620ms ease-out;
}

.cast-miss .spell-orb {
  animation: castMiss 560ms ease;
}

.hero.cast-miss {
  animation: heroMissStep 560ms ease;
}

.hero.cast-miss .hero-sprite {
  animation: heroSpriteMiss 560ms ease;
}

.hero.cast-miss .staff {
  animation: staffFizzle 560ms ease;
}

.hero.cast-miss .hero-aura {
  animation: heroFizzleAura 560ms ease;
}

.hero.cast-miss .cast-rings span {
  animation: castRingFizzle 560ms ease-out;
}

.monster.hit {
  animation: dragonHit 520ms ease;
}

.monster.hit .dragon-body,
.monster.hit .dragon-head,
.monster.hit .dragon-core,
.monster.hit .monster-sprite {
  animation: dragonImpactFlash 520ms ease;
}

.monster.roar {
  animation: dragonRoar 520ms ease;
}

.monster.roar .dragon-head {
  animation: dragonRoarHead 640ms cubic-bezier(0.2, 0.9, 0.24, 1.12);
}

.monster.roar .monster-sprite {
  animation: dragonSpriteRoar 640ms cubic-bezier(0.2, 0.9, 0.24, 1.12);
}

.monster.roar .wing-left {
  animation: wingLeftRoar 640ms cubic-bezier(0.2, 0.9, 0.24, 1.12);
}

.monster.roar .wing-right {
  animation: wingRightRoar 640ms cubic-bezier(0.2, 0.9, 0.24, 1.12);
}

.monster.roar .dragon-breath {
  animation: dragonBreath 820ms ease-out;
}

.monster.roar .dragon-breath span {
  animation: breathSpark 820ms ease-out;
}

.monster.defeated {
  opacity: 0.35;
  filter: grayscale(0.8);
  transform: rotate(8deg) translateY(22px);
  animation: none;
}

.monster.defeated .dragon-aura,
.monster.defeated .dragon-breath,
.monster.defeated .monster-sprite,
.monster.defeated .wing,
.monster.defeated .dragon-body,
.monster.defeated .dragon-head,
.monster.defeated .dragon-core,
.monster.defeated .tail,
.monster.defeated .dragon-eye {
  animation: none;
}

.monster.defeated .dragon-aura,
.monster.defeated .dragon-core {
  opacity: 0.18;
}

.arena.director-teach .hero,
.arena.director-teach .hero-sprite {
  animation: heroStudyNod 900ms ease both;
}

.arena.director-teach .staff::before,
.arena.director-practice .spell-orb {
  animation: directorWarmGlow 900ms ease both;
}

.arena.director-practice .hero,
.arena.director-practice .hero-sprite {
  animation: heroPracticeReady 940ms ease both;
}

.arena.director-evidence .magic-motes span {
  animation-duration: 2.8s;
  filter: brightness(1.25);
}

.arena.director-evidence .battle-ground span {
  animation: evidenceFloorWake 900ms ease both;
}

.arena.director-challenge .monster,
.arena.director-challenge .monster-sprite {
  animation: dragonChallengeLean 980ms ease both;
}

.arena.director-challenge .dragon-aura {
  animation: directorDragonAura 980ms ease both;
}

.arena.director-mastery .battle-ground span,
.arena.director-mastery .magic-motes span {
  animation: masteryStageLift 1200ms ease both;
}

.arena.director-review .hero,
.arena.director-review .hero-sprite {
  animation: heroReviewSettle 900ms ease both;
}

.arena.director-review .dragon-breath {
  animation: dragonBreath 760ms ease both;
}

.monster.enraged .dragon-body,
.monster.enraged .dragon-head {
  background: linear-gradient(145deg, #e04931, #5b120e);
  box-shadow: 0 0 24px rgb(217 107 43 / 0.45);
}

.monster.steam-phase .dragon-body,
.monster.steam-phase .dragon-head {
  box-shadow: 0 0 28px rgb(217 107 43 / 0.42), inset 0 0 18px rgb(255 207 156 / 0.16);
}

.monster.steam-phase .dragon-aura {
  background:
    radial-gradient(circle at 70% 38%, rgb(242 201 76 / 0.34), transparent 19%),
    radial-gradient(ellipse at 56% 65%, rgb(217 107 43 / 0.28), transparent 54%);
}

.monster.core-phase .dragon-body,
.monster.core-phase .dragon-head {
  background: linear-gradient(145deg, #f05f46, #651611);
  box-shadow: 0 0 34px rgb(232 91 69 / 0.55), inset 0 0 22px rgb(255 246 215 / 0.14);
}

.monster.core-phase .dragon-core {
  background:
    radial-gradient(circle at 44% 38%, #fff9d8 0 18%, transparent 19%),
    radial-gradient(circle, #ffef8f 0 46%, #ef6046 68%, #43110d 100%);
  box-shadow: 0 0 26px rgb(242 201 76 / 0.95), 0 0 42px rgb(232 91 69 / 0.42);
}

.monster.defeated-phase .dragon-eye {
  background: #9effbd;
  box-shadow: 0 0 14px rgb(87 201 135 / 0.58);
}

.hero.super-cast .spell-orb {
  animation: superCast 820ms ease;
}

.hero.super-cast {
  animation: heroSuperStep 920ms cubic-bezier(0.18, 0.9, 0.25, 1.18);
}

.hero.super-cast .hero-sprite {
  animation: heroSpriteSuper 920ms cubic-bezier(0.18, 0.9, 0.25, 1.18);
}

.hero.super-cast .staff {
  animation: staffSuperCast 920ms cubic-bezier(0.18, 0.9, 0.25, 1.18);
}

.hero.super-cast .hero-aura {
  animation: heroSuperAura 920ms ease-out;
}

.hero.super-cast .cast-rings span {
  animation: castRingSuper 920ms ease-out;
}

@keyframes introRise {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes academyHomeRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes introBackdropDrift {
  from {
    transform: translate3d(-0.8%, -0.4%, 0) scale(1.02);
    opacity: 0.2;
  }

  to {
    transform: translate3d(0.8%, 0.4%, 0) scale(1.04);
    opacity: 0.27;
  }
}

@keyframes homeSigilPulse {
  0% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 0 0 4px rgb(5 3 2 / 0.42), 0 0 20px rgb(242 201 76 / 0.16), inset 0 0 18px rgb(0 0 0 / 0.45);
  }

  46% {
    transform: scale(1.08) rotate(8deg);
    box-shadow: 0 0 0 4px rgb(5 3 2 / 0.46), 0 0 34px rgb(242 201 76 / 0.32), inset 0 0 16px rgb(255 246 215 / 0.08);
  }

  100% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 0 0 4px rgb(5 3 2 / 0.42), 0 0 20px rgb(242 201 76 / 0.16), inset 0 0 18px rgb(0 0 0 / 0.45);
  }
}

@keyframes lyraPortraitFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes lyraPortraitSpeak {
  from {
    transform: translateY(-2px) scale(1);
  }

  to {
    transform: translateY(-5px) scale(1.012);
  }
}

@keyframes lyraLightSweep {
  0%, 42% {
    transform: translateX(-120%);
    opacity: 0;
  }

  55% {
    opacity: 0.8;
  }

  70%, 100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes introBookGlow {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.96);
  }

  50% {
    opacity: 0.86;
    transform: scale(1.08);
  }
}

@keyframes introDragonEye {
  0%, 18%, 100% {
    opacity: 0.36;
    transform: scale(0.82);
  }

  24%, 78% {
    opacity: 1;
    transform: scale(1.16);
  }
}

@keyframes introRuneFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(0, -9px, 0) rotate(12deg);
  }
}

@keyframes introPortalOpen {
  0% {
    filter: brightness(1);
    transform: translateY(0) scale(1);
  }

  45% {
    filter: brightness(1.28);
    transform: translateY(-2px) scale(1.012);
  }

  100% {
    filter: brightness(1.05);
    transform: translateY(8px) scale(0.985);
    opacity: 0;
  }
}

@media (max-width: 860px) {
  .lesson-mission-control {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "metrics"
      "rail"
      "signals"
      "next";
  }

  .lesson-mission-main {
    grid-template-columns: 1fr;
  }

  .lesson-mission-main button {
    width: 100%;
    min-width: 0;
  }

  .lesson-mission-metrics,
  .lesson-mission-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lesson-mission-signals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lesson-cinematic-stage {
    grid-template-columns: 1fr;
  }

  .lesson-cinematic-stage-art {
    min-height: 210px;
  }

  .lesson-cinematic-stage-copy {
    padding: 14px;
  }

  .classroom-compass-main {
    grid-template-columns: 1fr;
  }

  .classroom-compass-main button {
    justify-self: stretch;
  }

  .classroom-compass-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .classroom-compass-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .classroom-compass-step {
    min-height: 0;
  }

  .gold-lesson-head,
  .gold-lesson-track,
  .gold-lesson-grid,
  .gold-lesson-actions {
    grid-template-columns: 1fr;
  }

  .gold-lesson-head strong {
    justify-self: stretch;
  }

  .gold-lesson-step {
    min-height: 0;
    grid-template-columns: 30px minmax(0, 0.42fr) minmax(0, 1fr);
    align-items: center;
  }

  .gold-lesson-step small {
    grid-column: 2 / -1;
  }

  .gold-lesson-card {
    min-height: 0;
  }

  .lesson-theater-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lesson-theater-step {
    min-height: 0;
  }
}

@media (min-width: 980px) {
  .quest-panel[data-focus="academy"][data-academy-tab="progress"] .progress-drawer[open] .progress-drawer-body {
    grid-template-columns: minmax(0, 1.04fr) minmax(330px, 0.96fr);
    align-items: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="progress"] .progress-board-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="progress"] .transcript-ledger {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="progress"] .progress-detail-panel {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="progress"] .school-record-pack {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="progress"] .transcript-list {
    max-height: 430px;
    overflow-y: auto;
    padding-right: 4px;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="progress"] .record-pack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quest-panel[data-focus="academy"][data-academy-tab="parent"] .progress-drawer[open] .progress-drawer-body {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    align-items: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="parent"] .school-portal {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    align-items: start;
    gap: 14px;
    padding: 16px;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="parent"] .school-portal-head {
    grid-column: 1 / -1;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="parent"] .guardian-board-panel {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="parent"] .parent-dashboard {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="parent"] .parent-account-center {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="parent"] .parent-dashboard article:nth-child(n+5) {
    display: none;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="parent"] .parent-account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quest-panel[data-focus="academy"][data-academy-tab="parent"] .parent-weekly-brief {
    grid-column: 1 / -1;
    grid-row: 4;
    align-self: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="parent"] .weekly-report {
    display: none;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="parent"] .guardian-detail-panel {
    grid-column: 1;
    grid-row: 5;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="parent"] .sync-readiness {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="parent"] .claim-checklist {
    grid-column: 1 / -1;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="parent"] .school-record-pack {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="parent"] .course-catalog {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="parent"] .academy-realms {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="rewards"] .progress-drawer[open] .progress-drawer-body {
    grid-template-columns: minmax(0, 0.96fr) minmax(360px, 1.04fr);
    align-items: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="rewards"] .rewards-command-board {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="rewards"] .academy-familiar {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="rewards"] .next-move-card {
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="rewards"] .spell-card-vault {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    align-self: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="rewards"] .challenge-forge {
    grid-column: 1 !important;
    grid-row: 4 !important;
    align-self: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="rewards"] .guild-projects {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    align-self: start;
  }

  .quest-panel[data-focus="academy"][data-academy-tab="rewards"] .guild-projects .project-list {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-card,
  .academy-home-card,
  .week-five-capstone-art span {
    animation: none;
  }

  .week-five-defense-checklist button {
    transition: none;
  }

  .week-five-defense-checklist button:hover {
    transform: none;
  }

  .week-five-defense-handoff {
    animation: none;
  }

  .week-five-defense-handoff button:hover {
    transform: none;
  }
}

@keyframes introOrnamentPulse {
  0%, 100% { opacity: 0.58; box-shadow: inset 0 0 7px rgb(242 201 76 / 0.16), 0 0 8px rgb(242 201 76 / 0.18); }
  50% { opacity: 1; box-shadow: inset 0 0 9px rgb(242 201 76 / 0.28), 0 0 18px rgb(242 201 76 / 0.42); }
}

@media (max-width: 720px) {
  .week-five-defense-rehearsal-head,
  .week-five-defense-rehearsal-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .week-five-defense-rehearsal-head > strong,
  .week-five-defense-rehearsal-footer button {
    width: 100%;
  }

  .week-five-defense-checklist {
    grid-template-columns: 1fr;
  }

  .week-five-defense-checklist > div:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .week-five-defense-handoff > div {
    grid-template-columns: 1fr;
  }

  .week-five-defense-handoff button {
    min-height: 52px;
  }

  .progress-drawer-body {
    grid-template-columns: 1fr;
  }

  .academy-about-board,
  .rewards-command-board {
    min-width: 0;
  }

  .academy-about-board p,
  .rewards-command-board p {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .course-library-head,
  .course-detail-head,
  .course-command-board,
  .academy-command-bar,
  .rewards-command-board,
  .course-detail-main,
  .curriculum-atlas-head,
  .course-planner-head,
  .progress-board-head,
  .record-command-board,
  .progress-board-main,
  .guardian-board-main,
  .lesson-route-head,
  .lesson-route-main,
  .credit-board-head,
  .credit-board-main,
  .course-syllabus-head,
  .course-syllabus-body,
  .course-planner-record-head,
  .record-desk-main {
    grid-template-columns: 1fr;
  }

  .course-library-head strong,
  .course-detail-head strong,
  .course-command-copy button,
  .academy-command-main button,
  .rewards-command-actions button,
  .record-command-actions button,
  .curriculum-atlas-head strong,
  .course-planner-head strong,
  .progress-board-head strong,
  .lesson-route-head strong,
  .credit-board-head strong,
  .course-syllabus-head strong,
  .course-planner-record-head strong {
    justify-self: stretch;
  }

  .course-library-grid,
  .course-command-rail,
  .academy-command-metrics,
  .rewards-command-rail,
  .record-command-rail,
  .curriculum-atlas-grid,
  .curriculum-prereq-grid,
  .course-planner-record-grid {
    grid-template-columns: 1fr;
  }

  .course-detail-head {
    margin-inline: 8px;
  }

  .course-command-board {
    min-height: 0;
    padding: 14px;
  }

  .course-command-copy b {
    max-width: none;
    font-size: 1.34rem;
  }

  .logic-gate-head,
  .logic-gate-cards article > div {
    grid-template-columns: 1fr;
  }

  .course-planner-tabs {
    grid-auto-flow: column;
    grid-auto-columns: minmax(136px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .course-planner-tab {
    scroll-snap-align: start;
  }

  .course-syllabus-week-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(134px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .course-syllabus-week {
    scroll-snap-align: start;
  }

  .lesson-route-actions,
  .progress-board-actions,
  .guardian-board-actions,
  .credit-board-actions,
  .record-desk-actions {
    grid-template-columns: 1fr;
  }

  .lesson-route-gate-track,
  .progress-board-checklist,
  .guardian-board-steps,
  .lesson-route-subject-grid,
  .credit-board-rail,
  .record-desk-checklist {
    grid-auto-flow: column;
    grid-auto-columns: minmax(128px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .lesson-route-gate-room,
  .progress-board-check,
  .guardian-board-step,
  .lesson-route-subject,
  .credit-board-tab,
  .record-desk-check {
    scroll-snap-align: start;
  }

  .credit-board-rubric {
    grid-template-columns: 1fr;
  }

  .course-syllabus-day-rail {
    grid-auto-flow: column;
    grid-auto-columns: minmax(112px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .course-syllabus-day {
    scroll-snap-align: start;
  }

  .course-syllabus-featured-grid {
    grid-template-columns: 1fr;
  }

  .course-syllabus-featured-lesson {
    min-height: 0;
  }

  .course-syllabus-featured-lesson p {
    min-height: 0;
  }

  .course-syllabus-proof,
  .course-syllabus-actions {
    grid-template-columns: 1fr;
  }

  .course-syllabus-actions .report-button {
    flex: 1 1 100%;
  }

  .course-planner-record-actions .report-button {
    flex: 1 1 100%;
  }
}

@keyframes flame {
  from {
    transform: translateX(-50%) scale(0.9) rotate(-3deg);
  }
  to {
    transform: translateX(-50%) scale(1.08) rotate(4deg);
  }
}

@keyframes arenaAetherPulse {
  from {
    opacity: 0.48;
    transform: translate3d(-1.2%, 0, 0) scale(1);
  }
  to {
    opacity: 0.82;
    transform: translate3d(1.2%, -0.6%, 0) scale(1.015);
  }
}

@keyframes arenaSignalPulse {
  0%, 100% {
    transform: scale(0.92);
    opacity: 0.78;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@keyframes arenaLightSweep {
  0%, 100% {
    opacity: 0.2;
    transform: rotate(15deg) translate3d(-18px, 0, 0);
  }
  50% {
    opacity: 0.46;
    transform: rotate(15deg) translate3d(18px, 0, 0);
  }
}

@keyframes arenaRunePulse {
  0%, 100% {
    opacity: 0.72;
    transform: scaleX(0.74);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes battleGroundPulse {
  0%, 100% {
    opacity: 0.66;
    filter: brightness(0.92);
  }
  50% {
    opacity: 0.86;
    filter: brightness(1.08);
  }
}

@keyframes characterSpotlightBreathe {
  0%, 100% {
    transform: perspective(520px) rotateX(58deg) scaleX(0.96);
  }
  50% {
    transform: perspective(520px) rotateX(58deg) scaleX(1.12);
  }
}

@keyframes arenaShake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-7px);
  }
  45% {
    transform: translateX(6px);
  }
  70% {
    transform: translateX(-3px);
  }
}

@keyframes phaseBanner {
  0% {
    opacity: 0;
    transform: translate(-50%, -16px) scale(0.96);
  }
  12%, 82% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -16px) scale(0.98);
  }
}

@keyframes phaseBannerInset {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  12%, 82% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.99);
  }
}

@keyframes spellBeam {
  0% {
    width: 0;
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  58% {
    width: 54%;
    opacity: 1;
  }
  100% {
    width: 54%;
    opacity: 0;
  }
}

@keyframes floatText {
  from {
    transform: translate(-50%, 0) scale(0.82);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  to {
    transform: translate(-50%, -72px) scale(1.08);
    opacity: 0;
  }
}

@keyframes toastIn {
  0% {
    transform: translateY(18px) scale(0.96);
    opacity: 0;
  }
  12%, 82% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(18px) scale(0.98);
    opacity: 0;
  }
}

@keyframes artDrift {
  0%, 100% {
    transform: scale(1.01) translate3d(0, 0, 0);
  }
  50% {
    transform: scale(1.045) translate3d(-0.8%, -0.7%, 0);
  }
}

@keyframes lessonCinematicPan {
  0%, 100% {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
  50% {
    transform: scale(1.07) translate3d(-1.4%, -0.8%, 0);
  }
}

@keyframes lessonAetherLine {
  0%,
  100% {
    opacity: 0.2;
    filter: brightness(0.85);
    transform: translateX(-12px) rotate(var(--line-rotate, 0deg)) scaleX(0.72);
  }
  50% {
    opacity: 0.78;
    filter: brightness(1.18);
    transform: translateX(12px) rotate(var(--line-rotate, 0deg)) scaleX(1);
  }
}

@keyframes mediaAtmosphereSweep {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(-6%, 0, 0) rotate(var(--media-tilt, -8deg));
  }
  18% {
    opacity: 0.38;
  }
  56% {
    opacity: 0.24;
    transform: translate3d(118%, 0, 0) rotate(var(--media-tilt, -8deg));
  }
  68% {
    opacity: 0;
  }
}

@keyframes lessonRuneGlow {
  0%,
  100% {
    box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
    filter: brightness(0.94);
  }
  50% {
    box-shadow: 0 0 18px color-mix(in srgb, var(--lesson-accent) 20%, transparent), inset 0 1px 0 rgb(255 246 215 / 0.12);
    filter: brightness(1.18);
  }
}

@keyframes lessonActionPulse {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgb(255 246 215 / 0.1),
      0 18px 38px rgb(0 0 0 / 0.3),
      0 0 28px color-mix(in srgb, var(--lesson-accent) 10%, transparent);
  }
  42% {
    box-shadow:
      inset 0 1px 0 rgb(255 246 215 / 0.14),
      0 18px 38px rgb(0 0 0 / 0.3),
      0 0 42px color-mix(in srgb, var(--lesson-accent) 26%, transparent);
    filter: brightness(1.1);
  }
}

@keyframes lessonFocusPulse {
  0%,
  100% {
    transform: translateY(0);
    filter: brightness(1);
  }
  36% {
    transform: translateY(-2px);
    filter: brightness(1.16);
  }
}

@keyframes mentorPracticeSweep {
  0% {
    opacity: 0;
    transform: translateX(-65%);
  }
  34% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(65%);
  }
}

@keyframes roomFade {
  0% {
    opacity: 0;
  }
  12%, 72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes gateLeft {
  0%, 22% {
    transform: translateX(0) rotateY(0deg);
  }
  100% {
    transform: translateX(-46%) rotateY(-18deg);
  }
}

@keyframes gateRight {
  0%, 22% {
    transform: translateX(0) rotateY(0deg);
  }
  100% {
    transform: translateX(46%) rotateY(18deg);
  }
}

@keyframes wingArrivalCard {
  0% {
    opacity: 0;
    transform: translate(-50%, 14px) scale(0.96);
  }

  18%, 78% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -10px) scale(0.985);
  }
}

@keyframes transitionSpark {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.4);
  }

  24% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    transform: translateY(-42px) scale(1.25);
  }
}

@keyframes stageWinPulse {
  0% {
    transform: scale(1);
    box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
  }
  38% {
    transform: scale(1.016);
    box-shadow: 0 0 34px rgb(242 201 76 / 0.28), inset 0 0 28px rgb(255 246 215 / 0.12);
  }
  100% {
    transform: scale(1);
    box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
  }
}

@keyframes sigilSolved {
  0% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
  42% {
    transform: scale(1.16) rotate(4deg);
    filter: brightness(1.6);
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
}

@keyframes orbSolved {
  0% {
    transform: translate3d(0, 0, 0) scale(0.84);
    opacity: 0.5;
  }
  48% {
    transform: translate3d(18px, -24px, 0) scale(1.7);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(0.84);
    opacity: 0.48;
  }
}

@keyframes chainPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

@keyframes plateTarget {
  0%, 100% {
    transform: translateY(0);
    box-shadow: inset 0 0 9px rgb(255 246 215 / 0.2), 0 0 10px rgb(242 201 76 / 0.16);
  }
  50% {
    transform: translateY(-2px);
    box-shadow: inset 0 0 12px rgb(255 246 215 / 0.32), 0 0 18px rgb(242 201 76 / 0.45);
  }
}

@keyframes plateImpact {
  0%, 100% {
    transform: scale(1);
  }
  34% {
    transform: scale(1.24) rotate(-4deg);
    filter: brightness(1.7);
  }
  64% {
    transform: scale(0.92) rotate(3deg);
  }
}

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

@keyframes moteFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(0.8);
    opacity: 0.35;
  }
  50% {
    transform: translate3d(24px, -62px, 0) scale(1.35);
    opacity: 0.95;
  }
}

@keyframes orbPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

@keyframes heroIdle {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(0.7deg);
  }
}

@keyframes heroSpriteFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(0.6deg);
  }
}

@keyframes heroAuraPulse {
  0%, 100% {
    opacity: 0.34;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.62;
    transform: scale(1.05);
  }
}

@keyframes heroShadowPulse {
  0%, 100% {
    opacity: 0.72;
    transform: scaleX(0.96);
  }
  50% {
    opacity: 0.44;
    transform: scaleX(0.78);
  }
}

@keyframes heroHoodBreathe {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.018);
  }
}

@keyframes heroFaceBreathe {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
}

@keyframes heroBlink {
  0%, 44%, 48%, 100% {
    transform: scaleY(1);
  }
  46% {
    transform: scaleY(0.16);
  }
}

@keyframes robeSway {
  0%, 100% {
    transform: skewX(0deg);
  }
  50% {
    transform: skewX(-1.4deg);
  }
}

@keyframes robeRunes {
  0%, 100% {
    opacity: 0.18;
    transform: translateY(3px);
  }
  50% {
    opacity: 0.46;
    transform: translateY(-3px);
  }
}

@keyframes staffIdle {
  0%, 100% {
    transform: rotate(13deg);
  }
  50% {
    transform: rotate(8deg) translateY(-3px);
  }
}

@keyframes staffHalo {
  0%, 100% {
    opacity: 0.38;
    transform: translateX(-50%) scale(0.72);
  }
  50% {
    opacity: 0.74;
    transform: translateX(-50%) scale(1.04);
  }
}

@keyframes staffGemPulse {
  0%, 100% {
    filter: brightness(0.94);
    transform: translateX(-50%) scale(0.96);
  }
  50% {
    filter: brightness(1.32);
    transform: translateX(-50%) scale(1.12);
  }
}

@keyframes artifactPulse {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
  }
  42% {
    transform: translateY(-2px) scale(1.025);
    box-shadow: 0 0 26px rgb(87 201 135 / 0.22), inset 0 1px 0 rgb(255 246 215 / 0.16);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes cinematicArtDrift {
  0%, 100% {
    transform: scale(1.04) translate3d(0, 0, 0);
  }
  50% {
    transform: scale(1.08) translate3d(-8px, -4px, 0);
  }
}

@keyframes cinematicCorePulse {
  0%, 100% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.94);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@keyframes constellationSweep {
  0%, 100% {
    opacity: 0.2;
    filter: blur(0.2px);
  }
  50% {
    opacity: 0.72;
    filter: blur(0);
  }
}

@keyframes cinematicNodePulse {
  0% {
    transform: translateY(0) scale(1);
  }
  42% {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0 30px color-mix(in srgb, var(--cinematic-accent) 26%, transparent), inset 0 1px 0 rgb(255 246 215 / 0.14);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes cinematicPanelPulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.008);
    box-shadow: 0 0 34px color-mix(in srgb, var(--cinematic-accent) 18%, transparent), inset 0 1px 0 rgb(255 246 215 / 0.13);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lyraGlyphSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes lyraHalo {
  0%, 100% {
    transform: scale(0.92);
    opacity: 0.42;
  }
  48% {
    transform: scale(1.08);
    opacity: 0.86;
  }
}

@keyframes lyraPanelPulse {
  0% {
    transform: scale(1);
    box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
  }
  44% {
    transform: scale(1.012);
    box-shadow: 0 0 30px rgb(158 255 189 / 0.16), inset 0 1px 0 rgb(255 246 215 / 0.12);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lyraVoiceRunePulse {
  0% {
    transform: translateY(0);
    box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
  }
  44% {
    transform: translateY(-2px);
    box-shadow: 0 0 24px color-mix(in srgb, var(--lyra-accent) 18%, transparent), inset 0 1px 0 rgb(255 246 215 / 0.12);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes brainSparkPulse {
  0% {
    transform: scale(1);
    box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
  }
  42% {
    transform: scale(1.025);
    box-shadow: 0 0 28px rgb(87 201 135 / 0.22), inset 0 1px 0 rgb(255 246 215 / 0.14);
  }
  100% {
    transform: scale(1);
    box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.07);
  }
}

@keyframes stageRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes sigilPulse {
  0%, 100% {
    opacity: 0.72;
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.32);
  }
}

@keyframes stageFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(0.84);
    opacity: 0.42;
  }
  50% {
    transform: translate3d(12px, -18px, 0) scale(1.24);
    opacity: 0.95;
  }
}

@keyframes dragonIdle {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(-0.8deg);
  }
}

@keyframes dragonAura {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.74;
    transform: scale(1.08);
  }
}

@keyframes dragonBreathe {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.035, 1.055);
  }
}

@keyframes dragonSpriteBreathe {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.018);
  }
}

@keyframes dragonHeadBob {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(-4px, -5px, 0) rotate(-2deg);
  }
}

@keyframes wingLeftGlide {
  0%, 100% {
    transform: rotate(-18deg) translateY(0) skewY(0deg);
  }
  50% {
    transform: rotate(-27deg) translateY(-8px) skewY(-5deg);
  }
}

@keyframes wingRightGlide {
  0%, 100% {
    transform: rotate(18deg) scaleX(-1) translateY(0) skewY(0deg);
  }
  50% {
    transform: rotate(28deg) scaleX(-1) translateY(-8px) skewY(5deg);
  }
}

@keyframes tailSwish {
  0%, 100% {
    transform: rotate(-14deg) translateX(0);
  }
  50% {
    transform: rotate(-24deg) translateX(-8px);
  }
}

@keyframes dragonCorePulse {
  0%, 100% {
    transform: scale(0.92);
    filter: brightness(0.92);
  }
  50% {
    transform: scale(1.14);
    filter: brightness(1.28);
  }
}

@keyframes dragonBlink {
  0%, 42%, 46%, 100% {
    transform: scaleY(1);
  }
  44% {
    transform: scaleY(0.12);
  }
}

@keyframes dragonHit {
  0%, 100% {
    transform: translateX(0);
  }
  38% {
    transform: translateX(20px) rotate(3deg);
  }
}

@keyframes dragonImpactFlash {
  0%, 100% {
    filter:
      brightness(1)
      drop-shadow(0 18px 20px rgb(0 0 0 / 0.38))
      drop-shadow(0 0 18px rgb(242 201 76 / 0.2));
  }
  34% {
    filter:
      brightness(1.72)
      saturate(1.28)
      drop-shadow(0 18px 20px rgb(0 0 0 / 0.38))
      drop-shadow(0 0 26px rgb(242 201 76 / 0.48));
  }
}

@keyframes dragonRoar {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-8px) scale(1.04);
  }
}

@keyframes dragonRoarHead {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  42% {
    transform: translate3d(-16px, -8px, 0) rotate(-9deg) scale(1.08);
  }
}

@keyframes dragonSpriteRoar {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter:
      drop-shadow(0 18px 20px rgb(0 0 0 / 0.38))
      drop-shadow(0 0 18px rgb(242 201 76 / 0.2));
  }
  42% {
    transform: translate(-11px, -9px) scale(1.04) rotate(-1.6deg);
    filter:
      brightness(1.12)
      drop-shadow(0 18px 20px rgb(0 0 0 / 0.38))
      drop-shadow(0 0 28px rgb(85 183 217 / 0.36));
  }
}

@keyframes wingLeftRoar {
  0%, 100% {
    transform: rotate(-18deg) translateY(0);
  }
  42% {
    transform: rotate(-42deg) translateY(-20px) skewY(-8deg);
  }
}

@keyframes wingRightRoar {
  0%, 100% {
    transform: rotate(18deg) scaleX(-1) translateY(0);
  }
  42% {
    transform: rotate(43deg) scaleX(-1) translateY(-20px) skewY(8deg);
  }
}

@keyframes dragonBreath {
  0% {
    opacity: 0;
    transform: scaleX(0.12) translateX(56px);
  }
  22% {
    opacity: 1;
  }
  58% {
    opacity: 0.96;
    transform: scaleX(1) translateX(0);
  }
  100% {
    opacity: 0;
    transform: scaleX(1.12) translateX(-14px);
  }
}

@keyframes breathSpark {
  0% {
    opacity: 0;
    transform: translate3d(42px, 0, 0) scale(0.5);
  }
  38% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(-30px, -10px, 0) scale(1.35);
  }
}

@keyframes castGood {
  0% {
    transform: translate(0, 0) scale(1);
  }
  60% {
    transform: translate(190px, -38px) scale(1.75);
    filter: brightness(1.35);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes heroCastStep {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  22% {
    transform: translate(-8px, 4px) rotate(-2deg);
  }
  58% {
    transform: translate(16px, -10px) rotate(4deg);
  }
}

@keyframes heroSpriteCast {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter:
      drop-shadow(0 16px 18px rgb(0 0 0 / 0.34))
      drop-shadow(0 0 14px rgb(85 183 217 / 0.2));
  }
  22% {
    transform: translate(-8px, 4px) scale(0.985) rotate(-1.5deg);
  }
  58% {
    transform: translate(16px, -10px) scale(1.045) rotate(3.5deg);
    filter:
      brightness(1.12)
      drop-shadow(0 16px 18px rgb(0 0 0 / 0.34))
      drop-shadow(0 0 26px rgb(242 201 76 / 0.5));
  }
}

@keyframes staffCast {
  0%, 100% {
    transform: rotate(13deg);
  }
  22% {
    transform: rotate(-2deg) translate(-4px, 6px);
  }
  58% {
    transform: rotate(34deg) translate(12px, -14px);
  }
}

@keyframes castRingBurst {
  0% {
    opacity: 0;
    transform: scale(0.25);
  }
  24% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

@keyframes superCast {
  0% {
    transform: translate(0, 0) scale(1);
  }
  42% {
    transform: translate(130px, -80px) scale(2.2);
    filter: brightness(1.8);
  }
  70% {
    transform: translate(250px, -34px) scale(2.6);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes heroSuperStep {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  28% {
    transform: translate(-10px, 6px) scale(0.98) rotate(-2deg);
  }
  60% {
    transform: translate(22px, -18px) scale(1.06) rotate(5deg);
  }
}

@keyframes heroSpriteSuper {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  28% {
    transform: translate(-10px, 6px) scale(0.98) rotate(-2deg);
  }
  60% {
    transform: translate(22px, -18px) scale(1.1) rotate(5deg);
    filter:
      brightness(1.24)
      drop-shadow(0 16px 18px rgb(0 0 0 / 0.34))
      drop-shadow(0 0 38px rgb(242 201 76 / 0.65));
  }
}

@keyframes staffSuperCast {
  0%, 100% {
    transform: rotate(13deg);
  }
  28% {
    transform: rotate(-6deg) translate(-8px, 8px);
  }
  60% {
    transform: rotate(44deg) translate(18px, -18px);
  }
}

@keyframes heroSuperAura {
  0% {
    opacity: 0.42;
    transform: scale(0.9);
  }
  48% {
    opacity: 0.98;
    transform: scale(1.38);
  }
  100% {
    opacity: 0.34;
    transform: scale(1);
  }
}

@keyframes castRingSuper {
  0% {
    opacity: 0;
    transform: scale(0.22) rotate(0deg);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.92) rotate(90deg);
  }
}

@keyframes castMiss {
  0%, 100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-8px);
  }
  60% {
    transform: translateX(8px);
  }
}

@keyframes firstQuestCurrent {
  0%,
  100% {
    transform: translateY(0);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-1px);
    filter: brightness(1.16);
  }
}

@keyframes firstQuestArtDrift {
  from {
    transform: scale(1.025) translate3d(-1%, 0, 0);
  }

  to {
    transform: scale(1.055) translate3d(1%, -1%, 0);
  }
}

@keyframes memberStudioOrbit {
  from {
    transform: rotate(0deg) scale(0.98);
  }

  to {
    transform: rotate(360deg) scale(0.98);
  }
}

@keyframes heroStudyNod {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  42% {
    transform: translateY(-5px) rotate(-1.5deg);
  }
}

@keyframes directorWarmGlow {
  0%,
  100% {
    opacity: 0.62;
    transform: translateX(-50%) scale(0.78);
  }
  45% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
}

@keyframes heroPracticeReady {
  0%,
  100% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(6px) scale(1.02);
  }
}

@keyframes evidenceFloorWake {
  0%,
  100% {
    opacity: 0.72;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@keyframes dragonChallengeLean {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
    filter: drop-shadow(0 0 20px rgb(217 107 43 / 0.28));
  }
  45% {
    transform: translateX(-10px) rotate(-1.5deg);
    filter: drop-shadow(0 0 28px rgb(242 201 76 / 0.36));
  }
}

@keyframes directorDragonAura {
  0%,
  100% {
    opacity: 0.58;
    filter: blur(10px);
  }
  50% {
    opacity: 0.94;
    filter: blur(13px);
  }
}

@keyframes masteryStageLift {
  0%,
  100% {
    opacity: 0.72;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px) scale(1.04);
  }
}

@keyframes heroReviewSettle {
  0%,
  100% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-4px);
  }
  70% {
    transform: translateX(3px);
  }
}

@keyframes heroMissStep {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  28% {
    transform: translateX(-8px) rotate(-2deg);
  }
  62% {
    transform: translateX(8px) rotate(2deg);
  }
}

@keyframes heroSpriteMiss {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  28% {
    transform: translateX(-7px) rotate(-1.8deg);
  }
  62% {
    transform: translateX(7px) rotate(1.8deg);
    filter:
      brightness(0.92)
      drop-shadow(0 16px 18px rgb(0 0 0 / 0.34))
      drop-shadow(0 0 20px rgb(85 183 217 / 0.28));
  }
}

@keyframes staffFizzle {
  0%, 100% {
    transform: rotate(13deg);
  }
  30% {
    transform: rotate(4deg) translateX(-5px);
  }
  60% {
    transform: rotate(19deg) translateX(5px);
  }
}

@keyframes heroFizzleAura {
  0%, 100% {
    opacity: 0.36;
    filter: blur(12px);
  }
  42% {
    opacity: 0.74;
    filter: blur(16px) hue-rotate(130deg);
  }
}

@keyframes castRingFizzle {
  0% {
    opacity: 0;
    transform: scale(0.42) rotate(0deg);
  }
  38% {
    opacity: 0.62;
  }
  100% {
    opacity: 0;
    transform: scale(0.9) rotate(-22deg);
  }
}

@keyframes correctPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

@keyframes castMeterOrbit {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.88) rotate(0deg);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.08) rotate(18deg);
  }
}

@keyframes castMeterSuccess {
  0% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.012);
    box-shadow: 0 0 34px rgb(158 255 189 / 0.18), inset 0 1px 0 rgb(255 246 215 / 0.14);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes castCockpitHit {
  0% {
    transform: scale(1);
    box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 14px 34px rgb(0 0 0 / 0.18);
  }
  36% {
    transform: scale(1.012);
    box-shadow: 0 0 36px rgb(158 255 189 / 0.22), inset 0 1px 0 rgb(255 246 215 / 0.14);
  }
  100% {
    transform: scale(1);
    box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08), 0 14px 34px rgb(0 0 0 / 0.18);
  }
}

@keyframes castCockpitReview {
  0%, 100% {
    transform: translateX(0);
  }
  28% {
    transform: translateX(-4px);
  }
  62% {
    transform: translateX(4px);
  }
}

@keyframes wrongShake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}

@keyframes masteryRingSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes masteryPanelIn {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  58% {
    opacity: 1;
    transform: translateY(-2px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes recapDrawerIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes masterySigilPulse {
  0%, 100% {
    opacity: 0.62;
    filter: brightness(0.92);
  }
  50% {
    opacity: 1;
    filter: brightness(1.24);
  }
}

@media (max-width: 960px) {
  .game-shell {
    grid-template-columns: 1fr;
  }

  .academy-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .arena {
    min-height: 42vh;
    border-right: 0;
    border-bottom: 1px solid rgb(242 201 76 / 0.22);
  }

  .arena-director {
    top: 12px;
    left: 12px;
    width: min(420px, calc(100% - 24px));
    padding: 10px;
  }

  .arena-director p {
    display: none;
  }

  .arena-signal-row {
    margin-top: 8px;
  }

  .art-backdrop {
    background-position: 42% center;
  }

  .gate {
    width: 560px;
    height: 430px;
    bottom: 8%;
  }

  .battle-line {
    width: 560px;
    bottom: 8%;
    transform: translateX(-50%) scale(0.7);
  }

  .battle-ground {
    width: 610px;
    bottom: 3%;
    transform: translateX(-50%) perspective(620px) rotateX(62deg) scale(0.72);
  }

  .arena-character-spotlights {
    width: 600px;
    bottom: 1%;
    transform: translateX(-50%) scale(0.72);
  }

  .arena-foreground-haze {
    height: 30%;
  }

  .arena-focus-runes {
    bottom: 10px;
    width: min(470px, calc(100% - 28px));
    gap: 4px;
    padding: 5px;
  }

  .arena-focus-runes span {
    min-height: 32px;
    padding: 4px 2px;
  }

  .arena-focus-runes b {
    font-size: 0.52rem;
  }

  .quest-panel {
    min-height: auto;
  }

  .plan-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .first-proof-report-summary {
    grid-template-columns: 1fr;
  }

  .demo-decision-note {
    grid-template-columns: 1fr;
  }

  .demo-decision-note span {
    grid-row: auto;
    justify-content: start;
    border-right: 0;
    border-bottom: 1px solid rgb(158 255 189 / 0.18);
    padding: 0 0 7px;
  }

  .student-hq-head,
  .student-command-center,
  .member-onboarding-panel,
  .member-onboarding-copy,
  .student-hq-focus,
  .first-five-copy,
  .member-access-copy,
  .week-one-course-pack-head,
  .next-realm-copy,
  .parent-weekly-brief-head,
  .parent-account-head,
  .today-detail-drawer summary,
  .school-systems-drawer summary {
    grid-template-columns: 1fr;
  }

  .student-hq-head strong,
  .student-command-actions button,
  .member-onboarding-copy strong,
  .member-onboarding-panel > button,
  .student-hq-focus button,
  .today-detail-drawer summary::after,
  .school-systems-drawer summary::after {
    justify-self: start;
  }

  .member-onboarding-panel > button {
    grid-column: 1;
    grid-row: auto;
  }

  .member-onboarding-panel[data-state="ready"],
  .member-onboarding-panel[data-state="synced"] {
    grid-template-columns: 1fr;
  }

  .member-onboarding-panel[data-state="ready"] .member-onboarding-steps,
  .member-onboarding-panel[data-state="synced"] .member-onboarding-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .student-command-primary h3 {
    max-width: 18ch;
    font-size: 1.62rem;
  }

  .student-command-route {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .student-hq-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .member-onboarding-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .first-five-track {
    grid-auto-flow: column;
    grid-auto-columns: minmax(138px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .first-five-step {
    scroll-snap-align: start;
  }

  .first-proof-moment {
    grid-template-columns: 1fr;
  }

  .first-proof-seal {
    display: none;
  }

  .first-proof-copy {
    padding-right: 0;
  }

  .first-proof-status {
    grid-template-columns: auto 1fr;
    border-radius: 12px;
  }

  .first-proof-status small {
    grid-column: 2;
  }

  .first-proof-grid {
    grid-template-columns: 1fr;
  }

  .first-quest-rail,
  .academy-offer-grid,
  .demo-upgrade-grid,
  .membership-enrollment-steps,
  .member-access-grid,
  .week-one-course-pack-metrics,
  .week-one-course-pack-grid,
  .next-realm-grid,
  .parent-weekly-brief-grid,
  .parent-account-grid,
  .membership-control-grid,
  .school-dashboard-grid,
  .school-backbone-grid,
  .media-production-grid,
  .media-production-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-director-cue {
    grid-template-columns: 1fr 1fr;
  }

  .school-systems-body {
    grid-template-columns: 1fr;
  }

  .first-quest-copy,
  .membership-control-copy,
  .membership-enrollment-head,
  .academy-checkout-rail,
  .school-dashboard-copy,
  .school-backbone-copy,
  .media-production-copy,
  .member-week-copy,
  .first-quest-coach {
    grid-template-columns: 1fr;
  }

  .media-production-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .first-quest-copy strong,
  .membership-control-copy strong,
  .media-production-copy strong,
  .member-week-copy strong,
  .first-quest-coach span {
    justify-self: start;
  }

  .member-week-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(218px, 74vw);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 5px;
    scroll-snap-type: x mandatory;
  }

  .member-week-card {
    min-height: 304px;
    scroll-snap-align: start;
  }

  .member-week-arc {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(236px, 72vw);
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .member-week-arc-card {
    scroll-snap-align: start;
  }

  .member-classroom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-studio-main {
    grid-template-columns: 1fr;
  }

  .member-studio-visual {
    min-height: 140px;
  }

  .member-studio-steps {
    grid-template-columns: repeat(5, minmax(96px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .member-studio-steps button {
    scroll-snap-align: start;
  }

  .week-one-certificate-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(164px, 54vw);
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .week-three-bridge-blueprint,
  .week-four-guild-runes,
  .week-five-capstone-trials,
  .week-five-defense-board {
    grid-template-columns: repeat(3, minmax(176px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .week-three-bridge-blueprint article,
  .week-four-guild-runes article,
  .week-five-capstone-trials article,
  .week-five-defense-board article {
    scroll-snap-align: start;
  }

  .week-one-certificate-card {
    scroll-snap-align: start;
  }

  .week-one-ceremony-evidence {
    grid-auto-flow: column;
    grid-auto-columns: minmax(160px, 45vw);
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .week-one-ceremony-evidence-card {
    scroll-snap-align: start;
  }

  .focus-rail {
    position: sticky;
    top: 8px;
    z-index: 8;
  }

  .course-map-head,
  .subject-wings-head,
  .mastery-check-panel {
    grid-template-columns: 1fr;
  }

  .course-map-head strong,
  .subject-wings-head strong,
  .mastery-check-action {
    justify-self: stretch;
  }

  .campaign-map-head,
  .campaign-next {
    grid-template-columns: 1fr;
  }

  .campaign-map-head strong,
  .campaign-next span {
    justify-self: start;
  }

  .campaign-act-strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(168px, 1fr);
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }

  .campaign-act {
    scroll-snap-align: start;
  }

  .lesson-director-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .course-spine-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-map-grid,
  .mastery-check-list {
    grid-template-columns: 1fr;
  }

  .subject-wings-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 74vw);
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 5px;
    scroll-snap-type: x mandatory;
  }

  .subject-wings-art {
    min-height: 128px;
    aspect-ratio: 3.4 / 1;
  }

  .subject-wing-card {
    min-height: 330px;
    scroll-snap-align: start;
  }

  .whiteboard-tiles {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .academy-home-card {
    width: min(560px, 100%);
    max-height: calc(100dvh - 28px);
  }

  .academy-home-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .academy-home-head h2 {
    max-width: 100%;
    font-size: clamp(1.9rem, 8vw, 2.65rem);
    line-height: 1.02;
  }

  .academy-home-close {
    justify-self: stretch;
  }

  .academy-home-status,
  .academy-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .academy-lobby-board {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .academy-lobby-visual {
    min-height: 150px;
  }

  .academy-lobby-copy h3 {
    max-width: 100%;
    font-size: clamp(1.7rem, 7vw, 2.35rem);
  }

  .academy-lobby-ledger {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .student-day-main {
    grid-template-columns: 1fr;
  }

  .student-day-main button {
    justify-self: stretch;
  }

  .student-day-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .academy-home-choice {
    min-height: 150px;
  }

  .academy-home-choice[data-home-mode="today"] {
    min-height: 170px;
    grid-row: span 1;
  }

  .subject-wings-panel {
    padding: 13px;
  }

  .member-week-panel {
    padding: 13px;
  }

  .member-pass-sigil {
    width: 42px;
    height: 42px;
  }

  .member-week-card {
    min-height: 316px;
  }

  .member-week-arc {
    grid-auto-columns: minmax(224px, 86vw);
  }

  .member-classroom-head,
  .member-classroom-grid {
    grid-template-columns: 1fr;
  }

  .member-classroom-head button {
    justify-self: stretch;
  }

  .member-studio-actions {
    grid-template-columns: 1fr;
  }

  .first-proof-actions,
  .first-five-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .member-studio-visual {
    min-height: 132px;
  }

  .week-one-certificate-main,
  .week-one-certificate-footer {
    grid-template-columns: 1fr;
  }

  .week-one-seal,
  .week-one-certificate-footer strong {
    justify-self: start;
  }

  .week-one-certificate-actions,
  .week-one-certificate-footer strong {
    width: 100%;
  }

  .week-three-bridge-blueprint,
  .week-four-guild-runes,
  .week-five-capstone-trials,
  .week-five-defense-board {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .week-one-ceremony-card {
    padding: 22px 16px;
  }

  .week-one-ceremony-signatures,
  .week-one-ceremony-next,
  .week-one-ceremony-actions,
  .week-five-capstone .week-one-certificate-actions {
    grid-template-columns: 1fr;
  }

  .subject-wings-art {
    min-height: 116px;
    aspect-ratio: 2.6 / 1;
  }

  .subject-wing-card {
    min-height: 340px;
  }

  .subject-wing-copy h4 {
    font-size: 1rem;
  }

  .intro-card {
    grid-template-columns: 1fr;
    width: min(520px, 100%);
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
  }

  .intro-card > .intro-portrait-frame {
    width: min(260px, 58vw);
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
    justify-self: center;
  }

  .academy-brand-crest {
    width: 80px;
    height: 80px;
  }

  .intro-card h2 {
    max-width: 100%;
    font-size: clamp(1.72rem, 8vw, 2.5rem);
    line-height: 1.04;
  }
}

@media (max-width: 560px) {
  .academy-gate-steps,
  .learner-passport {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .membership-control-grid {
    grid-template-columns: 1fr;
  }

  .member-access-grid,
  .academy-offer-grid,
  .demo-upgrade-grid,
  .membership-enrollment-steps,
  .membership-choice-panel,
  .week-one-course-pack-metrics,
  .week-one-course-pack-grid,
  .next-realm-grid,
  .parent-weekly-brief-grid,
  .media-director-cue {
    grid-template-columns: 1fr;
  }

  .membership-control-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .media-production-grid,
  .media-production-rail {
    grid-template-columns: 1fr;
  }

  .media-production-visual {
    min-height: 142px;
  }

  .academy-home-overlay {
    padding: 8px;
  }

  .academy-home-card {
    gap: 10px;
    width: min(420px, 100%);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 14px;
  }

  .academy-home-head {
    gap: 10px;
  }

  .academy-home-head h2 {
    font-size: clamp(1.72rem, 7.4vw, 2.28rem);
  }

  .academy-home-head p:not(.kicker) {
    font-size: 0.9rem;
    line-height: 1.36;
  }

  .academy-home-close {
    min-height: 42px;
  }

  .academy-home-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .academy-home-status span {
    padding: 8px;
  }

  .academy-home-grid {
    grid-template-columns: 1fr;
  }

  .academy-lobby-board {
    padding: 10px;
  }

  .academy-lobby-visual {
    min-height: 118px;
  }

  .academy-lobby-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .academy-lobby-ledger {
    grid-template-columns: 1fr;
  }

  .student-day-board {
    padding: 10px;
  }

  .student-day-steps {
    grid-template-columns: 1fr;
  }

  .student-day-step {
    min-height: 0;
  }

  .week-one-certificate {
    padding: 10px;
  }

  .week-one-certificate-grid {
    grid-auto-columns: minmax(154px, 78vw);
  }

  .week-one-certificate-actions {
    grid-template-columns: 1fr;
  }

  .week-one-certificate-card {
    min-height: 94px;
  }

  .week-one-ceremony {
    padding: 8px;
  }

  .week-one-ceremony-art {
    width: 88px;
    height: 88px;
  }

  .week-one-ceremony-art b {
    width: 58px;
    height: 58px;
  }

  .week-one-ceremony-evidence {
    grid-auto-columns: minmax(148px, 76vw);
  }

  .week-one-ceremony-next article {
    padding: 9px;
  }

  .academy-home-choice {
    min-height: 102px;
    padding: 12px;
  }

  .academy-home-choice::before {
    opacity: 0.38;
  }

  .home-door-sigil {
    width: 40px;
    height: 40px;
  }

  .subject-wings-head h3 {
    font-size: 1.1rem;
  }

  .subject-wings-head p {
    font-size: 0.9rem;
    line-height: 1.36;
  }

  .subject-wings-grid {
    grid-auto-columns: minmax(222px, 82vw);
  }

  .subject-wing-card {
    min-height: 238px;
    grid-template-rows: 92px auto 1fr auto;
  }

  .subject-wing-card figure {
    height: 92px;
  }

  .certificate-stats {
    grid-template-columns: 1fr;
  }

  .phase-banner {
    top: 4%;
    min-width: calc(100vw - 36px);
    font-size: 0.78rem;
  }

  .loot-rail {
    position: static;
    width: auto;
    margin: 12px;
  }

  .achievement {
    padding: 11px 12px;
    font-size: 0.86rem;
  }

  .transition-arrival {
    bottom: clamp(140px, 23vh, 186px);
    width: calc(100vw - 28px);
    padding: 12px 13px 13px;
  }

  .transition-arrival h2 {
    font-size: clamp(1.08rem, 5vw, 1.26rem);
    line-height: 1.05;
  }

  .transition-arrival p {
    justify-self: center;
    max-width: 34ch;
    font-size: 0.82rem;
  }

  .transition-pill {
    bottom: 28px;
    max-width: calc(100vw - 32px);
    padding: 9px 12px;
    letter-spacing: 0.04em;
  }

  .spell-beam {
    left: 22%;
    bottom: 22%;
  }

  .intro-card {
    grid-template-columns: 1fr;
    gap: 14px;
    width: min(420px, 100%) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 36px);
    padding: 18px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .intro-card *,
  .login-card * {
    max-width: 100%;
  }

  .intro-overlay {
    padding: 12px 12px max(18px, calc(env(safe-area-inset-bottom, 0px) + 18px));
  }

  .intro-card h2 {
    max-width: 100%;
    overflow-wrap: break-word;
    font-size: 1.48rem;
    line-height: 1.08;
  }

  .intro-card > div {
    width: 100%;
    justify-self: center;
  }

  .academy-brand-crest {
    width: 70px;
    height: 70px;
  }

  .plan-main {
    grid-template-columns: 1fr;
  }

  .plan-action {
    width: 100%;
  }

  .lesson-director-head {
    grid-template-columns: 1fr;
  }

  .lesson-director-head strong {
    justify-self: start;
  }

  .lesson-mission-control {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "metrics"
      "rail"
      "signals"
      "next";
    padding: 10px;
  }

  .lesson-mission-metrics,
  .lesson-mission-rail,
  .lesson-mission-signals {
    grid-template-columns: 1fr;
  }

  .lesson-mission-control .student-day-step {
    min-height: 0;
  }

  .lesson-scroll > .lesson-cinematic-stage {
    order: 2;
  }

  .lesson-cinematic-stage {
    min-height: 0;
  }

  .lesson-scroll > .lesson-mission-control {
    order: 3;
  }

  .lesson-scroll > .first-five-guide {
    order: 4;
  }

  .lesson-cinematic-stage-art {
    min-height: 178px;
  }

  .lesson-cinematic-stage-copy {
    gap: 9px;
    padding: 12px;
  }

  .lesson-brief-card {
    padding: 10px;
  }

  .lesson-brief-grid {
    grid-template-columns: 1fr;
  }

  .lesson-brief-grid article {
    min-height: 0;
  }

  .lesson-stage-path {
    gap: 5px;
    padding: 4px;
  }

  .lesson-stage-path-step {
    min-height: 32px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2px;
    padding: 4px 2px;
    text-align: center;
  }

  .lesson-stage-path-step i {
    width: 19px;
    height: 19px;
  }

  .lesson-stage-path-step b {
    width: 100%;
    font-size: 0.48rem;
  }

  .lesson-stage-sequence {
    grid-template-columns: 1fr;
  }

  .lesson-stage-actions {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lesson-stage-actions button {
    min-height: 42px;
  }

  .classroom-compass {
    padding: 10px;
  }

  .lesson-reference-drawer summary,
  .lesson-materials-drawer summary {
    grid-template-columns: 1fr;
  }

  .lesson-reference-drawer summary::after,
  .lesson-materials-drawer summary::after {
    justify-self: start;
  }

  .classroom-compass-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .classroom-compass-track {
    grid-template-columns: 1fr;
  }

  .classroom-compass-main {
    grid-template-columns: 1fr;
  }

  .classroom-compass-main button {
    width: 100%;
    min-width: 0;
  }

  .lesson-director-rail,
  .course-spine-track {
    grid-template-columns: 1fr;
  }

  .lesson-director-step {
    min-height: 0;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
  }

  .lesson-director-step small {
    grid-column: 2;
  }

  .plan-focus {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .student-hq-panel {
    padding: 10px;
  }

  .student-hq-focus {
    align-items: start;
  }

  .student-command-center {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .student-command-primary {
    padding: 4px;
  }

  .student-command-primary h3 {
    max-width: 100%;
    font-size: 1.38rem;
  }

  .student-command-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .student-command-route {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-command-rail {
    grid-template-columns: 1fr;
  }

  .member-onboarding-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-onboarding-panel[data-state="ready"] .member-onboarding-steps,
  .member-onboarding-panel[data-state="synced"] .member-onboarding-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-hq-sigil {
    width: 48px;
    height: 48px;
  }

  .student-hq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-hq-card {
    min-height: 102px;
  }

  .plan-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan-steps li {
    align-items: start;
  }

  .focus-rail,
  .academy-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .focus-rail button,
  .academy-tabs button {
    min-height: 46px;
  }

  .intro-card p {
    max-width: 100%;
    overflow-wrap: break-word;
    font-size: 0.95rem;
  }

  .kid-quest-card {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .intro-win-condition {
    grid-template-columns: 1fr;
    border-radius: 12px;
  }

  .kid-quest-card ol {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kid-quest-card li {
    min-width: 0;
    min-height: 54px;
    padding: 7px 5px;
  }

  .intro-proof-promise {
    grid-template-columns: 1fr;
  }

  .intro-about-strip {
    grid-template-columns: 1fr;
  }

  .intro-proof-promise span {
    min-width: 0;
  }

  .parent-access-drawer summary {
    grid-template-columns: 1fr;
  }

  .parent-access-drawer summary::after {
    justify-self: start;
  }

  .login-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .intro-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .intro-actions .primary,
  .intro-actions .secondary {
    min-height: 48px;
  }

  .intro-card > .intro-portrait-frame {
    width: min(176px, 54vw);
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
    justify-self: center;
  }

  .arena {
    min-height: 28vh;
  }

  .game-shell[data-focus="learn"] .arena {
    min-height: 160px;
    max-height: 160px;
  }

  .game-shell[data-focus="learn"] .arena-director p {
    display: none;
  }

  .arena-director {
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    padding: 8px 9px;
  }

  .arena-director > span {
    font-size: 0.58rem;
  }

  .arena-director strong {
    margin-top: 3px;
    font-size: 0.86rem;
    line-height: 1.08;
  }

  .arena-signal-row {
    display: none;
  }

  .arena-focus-runes {
    display: none;
  }

  .arena-cinematic-light span {
    width: 28%;
    filter: blur(18px);
    opacity: 0.24;
  }

  .art-backdrop {
    background-position: 34% center;
    filter: saturate(1.08) contrast(1.02) brightness(0.88);
  }

  .moon,
  .torch {
    display: none;
  }

  .gate {
    width: 390px;
    height: 132px;
    bottom: auto;
    top: 10px;
    opacity: 0.92;
  }

  .gate .tower,
  .gate .arch {
    display: none;
  }

  .runes {
    grid-template-columns: repeat(13, minmax(0, 1fr));
    width: min(92vw, 348px);
    top: 2px;
    gap: 3px;
    opacity: 0.82;
  }

  .rune {
    border-width: 1px;
    font-size: 0.48rem;
  }

  .battle-line {
    width: 470px;
    bottom: -24%;
    transform: translateX(-50%) scale(0.47);
  }

  .battle-ground {
    width: 470px;
    bottom: -17%;
    transform: translateX(-50%) perspective(520px) rotateX(62deg) scale(0.5);
  }

  .arena-character-spotlights {
    width: 470px;
    bottom: -20%;
    transform: translateX(-50%) scale(0.5);
  }

  .arena-foreground-haze {
    height: 34%;
    opacity: 0.56;
  }

  .quest-panel {
    padding: 16px;
    gap: 10px;
    overflow: hidden;
  }

  .domain-stage {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 138px;
    padding: 10px;
  }

  .realm-portal-art,
  .curriculum-art,
  .lesson-art {
    aspect-ratio: 16 / 9;
  }

  .lesson-cinematic-strip {
    min-height: 344px;
    aspect-ratio: auto;
  }

  .stage-sigil {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }

  .stage-sigil span {
    width: 31px;
    height: 5px;
  }

  .academy-drawer[open] {
    grid-template-columns: 1fr;
  }

  .academy-drawer .academy-realms,
  .academy-drawer .guild-projects {
    grid-column: 1;
  }

  .quest-header {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  h1 {
    max-width: 12ch;
    font-size: 1.7rem;
    line-height: 0.98;
  }

  .rank-card {
    width: min(100%, 260px);
    min-height: 56px;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: start;
    gap: 10px;
    padding: 10px 12px;
    text-align: left;
  }

  .rank-card span,
  .rank-card small {
    font-size: 0.68rem;
  }

  .rank-card strong {
    margin-top: 0;
    font-size: 1.55rem;
  }

  .gmail-form div,
  .account-chip,
  .player-badge {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .gmail-form div {
    grid-template-columns: 1fr;
  }

  .gmail-button {
    padding-inline: 10px;
    font-size: 0.95rem;
  }

  .account-chip button,
  .player-badge button {
    grid-column: 1 / -1;
  }

  .mentor-strip {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .daily-quest,
  .record-grid,
  .snapshot-head,
  .school-portal-head,
  .guardian-board-main,
  .sync-head,
  .claim-head,
  .claim-invite-card,
  .claim-checklist-head,
  .claim-grid,
  .claim-actions,
  .guardian-board-actions,
  .catalog-head,
  .guardian-grid,
  .difficulty-head,
  .rank-ladder-head,
  .next-move-card,
  .vault-head,
  .odds-row,
  .forge-head,
  .project-head,
  .oracle-head,
  .method-head,
  .lesson-head,
  .launcher-head,
  .math-builder-head,
  .math-builder-controls,
  .math-proof-facts,
  .alchemy-head,
  .alchemy-rulebook,
  .alchemy-reaction-ledger,
  .alchemy-controls,
  .forge-lab-head,
  .forge-controls,
  .oracle-lab-head,
  .oracle-controls,
  .reactor-head,
  .review-queue-head,
  .log-head {
    grid-template-columns: 1fr;
  }

  .rune-tray {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .rune-tray.math-proof-actions {
    grid-template-columns: 1fr;
  }

  .math-proof-action {
    min-height: 86px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
  }

  .math-proof-action span,
  .math-proof-action strong {
    grid-row: 1 / -1;
  }

  .math-proof-action strong {
    grid-column: 1;
    grid-row: 2;
    min-width: 48px;
  }

  .math-proof-action b,
  .math-proof-action small {
    grid-column: 2;
  }

  .forge-choices,
  .forge-design-board,
  .forge-test-rig,
  .forge-rig-ledger,
  .launcher-equation-grid,
  .launcher-readout,
  .oracle-audit-board,
  .oracle-tiles {
    grid-template-columns: 1fr;
  }

  .rank-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

.parent-dashboard,
.sync-grid,
.claim-step-list,
.course-grid {
  grid-template-columns: 1fr;
}

@keyframes phaseRuneSweep {
  from { transform: translateX(-140%); }
  to { transform: translateX(140%); }
}

@keyframes proofVerdictIn {
  from { opacity: 0; transform: translateY(7px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.quest-panel[data-focus="academy"][data-academy-tab="parent"] .parent-dashboard article:nth-child(n+5) {
  display: none;
}

  .claim-seal {
    width: 50px;
  }

  .claim-mini-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .realm-grid,
  .realms-head,
  .brain-spark {
    grid-template-columns: 1fr;
  }

  .difficulty-options {
    grid-template-columns: 1fr;
  }

  .lesson-grid {
    grid-template-columns: 1fr;
  }

  .card-row {
    grid-template-columns: 1fr;
  }

  .forge-task {
    grid-template-columns: 1fr;
  }

  .project-card {
    grid-template-columns: 1fr;
  }

  .academy-familiar {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .familiar-orb {
    width: 52px;
  }

  .academy-familiar > strong {
    grid-column: 1 / -1;
    min-height: 38px;
  }

  .log-entry {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .mastery-row {
    grid-template-columns: 82px minmax(0, 1fr) 22px;
  }

  .combo-meter {
    grid-column: 1 / -1;
    min-height: 42px;
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
  }

  .dm-panel {
    grid-template-columns: 1fr;
  }

  .session-head,
  .session-goal {
    grid-template-columns: 1fr;
  }

  .dm-stats,
  .tutor-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .tutor-ledger {
    grid-template-columns: 1fr;
  }

  .notebook-head {
    grid-template-columns: 1fr;
  }

  .mentor-strip img {
    width: 48px;
  }

  .mentor-strip p {
    font-size: 0.84rem;
  }

  .boss-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .boss-card img {
    width: 54px;
  }

  .boss-card h3 {
    font-size: 0.88rem;
  }

  .best-score {
    grid-column: 1 / -1;
    min-height: 42px;
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
  }

  .relic-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rank-card strong {
    font-size: 1.35rem;
  }

  .meters {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .meter {
    min-height: 54px;
    padding: 8px;
  }

  .meter span {
    font-size: 0.58rem;
    line-height: 1.1;
  }

  .spellbook {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .academy-skill-tree {
    grid-template-columns: 1fr;
  }

  .map-tower {
    min-height: 146px;
  }

  .academy-skill-tree .map-tower {
    min-height: 0;
  }

  .academy-path-summary,
  .future-realms-strip {
    grid-template-columns: 1fr;
  }

  .tower-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spell {
    min-width: 0;
    min-height: 54px;
  }

  .challenge-card,
  .codex,
  .controls {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .challenge-top,
  .codex,
  .controls {
    grid-template-columns: 1fr;
  }

  .challenge-top {
    display: grid;
  }

  .cast-cockpit-grid,
  .cast-cockpit-rail {
    grid-template-columns: 1fr;
  }

  .dragon-test-command {
    grid-template-columns: 1fr;
  }

  .dragon-command-sigil {
    width: 100%;
    height: 40px;
  }

  .dragon-command-marks {
    grid-template-columns: 1fr;
  }

  .math-builder-controls,
  .math-proof-facts,
  .rune-tray {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .math-builder-controls {
    grid-template-columns: 1fr;
  }

  .answers {
    grid-template-columns: 1fr;
  }

  .launcher-controls {
    grid-template-columns: 1fr;
  }

  .method-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .ai-art-panel img {
    transform: none !important;
  }

  .stage-art {
    transform: none !important;
  }

  .cinematic-stage img,
  .cinematic-core,
  .cinematic-constellation i,
  .cinematic-node.active,
  .room-cinematic.focus-pulse {
    animation: none !important;
  }

  .cinematic-stage img {
    transform: none !important;
  }

  .cast-meter-orb i,
  .cast-meter[data-state="success"],
  .cast-cockpit.cast-hit,
  .cast-cockpit.cast-review {
    animation: none !important;
  }

  .lyra-moment::after,
  .lyra-portrait span,
  .lyra-moment.speaking,
  .lyra-moment.speaking .lyra-voice-rune {
    animation: none !important;
  }

  .mastery-moment::before,
  .mastery-moment.show,
  .mastery-sigil span {
    animation: none !important;
  }

  .first-quest-step.current,
  .first-quest-art img,
  .subject-wings-art img,
  .mastery-art img,
  .arena.director-teach .hero,
  .arena.director-teach .hero-sprite,
  .arena.director-teach .staff::before,
  .arena.director-practice .spell-orb,
  .arena.director-practice .hero,
  .arena.director-practice .hero-sprite,
  .arena.director-evidence .battle-ground span,
  .arena.director-challenge .monster,
  .arena.director-challenge .monster-sprite,
  .arena.director-challenge .dragon-aura,
  .arena.director-mastery .battle-ground span,
  .arena.director-mastery .magic-motes span,
  .arena.director-review .hero,
  .arena.director-review .hero-sprite,
  .arena.director-review .dragon-breath {
    animation: none !important;
  }

  .artifact-token.active {
    animation: none !important;
  }

  .arena-signal.current i,
  .arena-cinematic-light span,
  .arena-focus-runes i,
  .arena-character-spotlights span,
  .battle-ground {
    animation: none !important;
  }

  .dragon-aura,
  .dragon-breath,
  .dragon-breath span,
  .hero,
  .hero-aura,
  .hero-shadow,
  .hero-sprite,
  .monster-sprite,
  .cast-rings span,
  .hood,
  .face,
  .face span,
  .robe,
  .robe::after,
  .staff,
  .staff::before,
  .staff i,
  .wing,
  .dragon-body,
  .dragon-head,
  .dragon-core,
  .tail,
  .dragon-eye,
  .monster {
    animation: none !important;
  }
}

@media (max-width: 980px) {
  .sampler-focus-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .sampler-focus-card h2 {
    max-width: 18ch;
  }

  .sampler-focus-path {
    max-width: 420px;
  }

  .sampler-focus-primary {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .sampler-focus-card {
    gap: 12px;
    padding: 13px;
    border-radius: 12px;
  }

  .sampler-focus-card h2 {
    font-size: 1.28rem;
  }

  .sampler-focus-card p {
    font-size: 0.86rem;
  }

  .sampler-focus-path li {
    min-height: 52px;
    padding: 6px;
  }

  .sampler-focus-path span {
    width: 22px;
    height: 22px;
  }

  .sampler-focus-path b {
    font-size: 0.64rem;
  }

  .difficulty-paths summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .difficulty-paths summary strong {
    justify-self: start;
  }
}

/* Academy sampler art pass v81: one scene, one decision, one satisfying proof. */
.class-path-ribbon {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
}

.quest-panel[data-focus="cast"] > .challenge-card {
  grid-area: auto;
  grid-column: 1 / -1;
}

.class-path-primary {
  width: 100%;
}

.quest-panel[data-proof-ready="false"][data-focus="today"] > :is(
  .headmaster-plan,
  .focus-rail,
  .learning-flow,
  .spellbook,
  .deck-label,
  .media-controls,
  .account-chip,
  .difficulty-paths
) {
  display: none !important;
}

.quest-panel[data-proof-ready="true"][data-focus="cast"] > :is(
  .media-controls,
  .account-chip,
  .deck-label,
  .learning-flow,
  .focus-rail,
  .boss-card,
  .meters,
  .mentor-strip,
  .dm-panel,
  .lab-reactor,
  .controls
) {
  display: none !important;
}

.quest-panel[data-proof-ready="false"][data-focus="today"] > .class-path-ribbon {
  margin-bottom: 8px;
}

.quest-panel[data-focus="learn"] > :is(
  .learning-flow,
  .subject-wings-panel,
  .method-lab,
  .codex
),
.quest-panel[data-proof-ready="false"][data-focus="learn"] > .focus-rail {
  display: none !important;
}

.game-shell[data-focus="learn"] .lesson-scroll > .lesson-head,
.game-shell[data-focus="learn"] .lesson-scroll > .lesson-mission-control {
  display: none !important;
}

.game-shell[data-focus="learn"] .lesson-scroll {
  padding: clamp(10px, 1.7vw, 18px);
  border-color: rgb(242 201 76 / 0.3);
  background:
    radial-gradient(ellipse at 15% 0%, rgb(242 201 76 / 0.1), transparent 46%),
    linear-gradient(155deg, rgb(15 10 6 / 0.97), rgb(4 5 7 / 0.99));
  box-shadow: 0 28px 70px rgb(0 0 0 / 0.36), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.game-shell[data-focus="learn"] .lesson-cinematic-stage {
  min-height: clamp(330px, 48vw, 470px);
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.78fr);
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--stage-accent) 46%, rgb(255 246 215 / 0.12));
  box-shadow: 0 32px 80px rgb(0 0 0 / 0.48), 0 0 54px color-mix(in srgb, var(--stage-accent) 10%, transparent);
}

.game-shell[data-focus="learn"] .lesson-cinematic-stage-art {
  min-height: clamp(330px, 48vw, 470px);
}

.game-shell[data-focus="learn"] .lesson-cinematic-stage-art > img {
  filter: saturate(1.2) contrast(1.08) brightness(0.9);
}

.game-shell[data-focus="learn"] .lesson-cinematic-stage-copy {
  position: relative;
  z-index: 2;
  align-content: center;
  padding: clamp(22px, 3vw, 42px);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--stage-accent) 14%, transparent), transparent 42%),
    linear-gradient(150deg, rgb(20 14 8 / 0.96), rgb(5 5 6 / 0.98));
}

.game-shell[data-focus="learn"] .lesson-cinematic-stage-copy h4 {
  max-width: 11ch;
  font-size: clamp(1.75rem, 3.4vw, 3.25rem);
  line-height: 0.98;
  text-wrap: balance;
}

.game-shell[data-focus="learn"] .lesson-cinematic-stage-copy > p {
  max-width: 42ch;
  margin-top: 14px;
  font-size: clamp(0.9rem, 1.2vw, 1.06rem);
  line-height: 1.5;
}

.game-shell[data-focus="learn"] .lesson-stage-mentor {
  left: clamp(12px, 2vw, 22px);
  right: clamp(12px, 2vw, 22px);
  bottom: clamp(12px, 2vw, 22px);
  grid-template-columns: 70px minmax(0, 1fr);
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgb(4 3 2 / 0.94), rgb(7 5 3 / 0.72));
}

.game-shell[data-focus="learn"] .lesson-stage-mentor img {
  width: 70px;
  height: 84px;
  border-radius: 12px;
}

.game-shell[data-focus="learn"] .lesson-stage-mentor b {
  font-size: clamp(0.92rem, 1.35vw, 1.12rem);
}

.game-shell[data-focus="learn"] .lesson-stage-mentor p {
  max-width: 48ch;
  font-size: 0.78rem;
  line-height: 1.4;
}

.lesson-scroll[data-action="lesson"] > :is(.guided-practice, .room-investigation, .brain-spark, .lesson-ready-button),
.lesson-scroll[data-action="practice"] > :is(.room-investigation, .brain-spark, .lesson-ready-button),
.lesson-scroll[data-action="lab"] > :is(.guided-practice, .brain-spark, .lesson-ready-button),
.lesson-scroll[data-action="unlock"] > :is(.guided-practice, .brain-spark) {
  display: none !important;
}

.lesson-scroll[data-action="practice"] .lesson-cinematic-stage,
.lesson-scroll[data-action="lab"] .lesson-cinematic-stage,
.lesson-scroll[data-action="unlock"] .lesson-cinematic-stage {
  min-height: 190px;
  grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.3fr);
}

.lesson-scroll[data-action="practice"] .lesson-cinematic-stage-art,
.lesson-scroll[data-action="lab"] .lesson-cinematic-stage-art,
.lesson-scroll[data-action="unlock"] .lesson-cinematic-stage-art {
  min-height: 190px;
}

.lesson-scroll[data-action="practice"] .lesson-stage-mentor,
.lesson-scroll[data-action="lab"] .lesson-stage-mentor,
.lesson-scroll[data-action="unlock"] .lesson-stage-mentor,
.lesson-scroll[data-action="practice"] .lesson-stage-path,
.lesson-scroll[data-action="lab"] .lesson-stage-path,
.lesson-scroll[data-action="unlock"] .lesson-stage-path {
  display: none;
}

.guided-practice,
.room-investigation {
  border-radius: 16px;
  border-color: rgb(242 201 76 / 0.28);
  background:
    radial-gradient(circle at 8% 0%, rgb(242 201 76 / 0.1), transparent 42%),
    linear-gradient(145deg, rgb(19 13 7 / 0.96), rgb(5 5 6 / 0.98));
  box-shadow: 0 22px 56px rgb(0 0 0 / 0.3), inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.game-shell[data-focus="cast"] .challenge-card {
  border-radius: 18px;
  border-color: rgb(217 107 43 / 0.44);
  background:
    radial-gradient(ellipse at 78% 0%, rgb(217 107 43 / 0.18), transparent 44%),
    radial-gradient(ellipse at 8% 28%, rgb(85 183 217 / 0.1), transparent 36%),
    linear-gradient(150deg, rgb(22 11 6 / 0.98), rgb(4 4 6 / 0.99));
  box-shadow: 0 34px 86px rgb(0 0 0 / 0.48), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.game-shell[data-focus="cast"] .cast-cockpit {
  display: none !important;
}

.game-shell[data-focus="cast"] .dragon-test-command {
  border-radius: 15px;
  padding: clamp(13px, 2vw, 20px);
}

.game-shell[data-focus="cast"] .challenge-card > #question {
  max-width: 24ch;
  font-size: clamp(1.65rem, 3.4vw, 3rem);
  line-height: 1.02;
  text-wrap: balance;
}

.game-shell[data-focus="cast"] .answers {
  gap: 12px;
}

.game-shell[data-focus="cast"] .answer {
  min-height: 78px;
  border-radius: 14px;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.game-shell[data-focus="cast"] .answer.castable:hover,
.game-shell[data-focus="cast"] .answer.castable:focus-visible {
  transform: translateY(-4px) scale(1.012);
  box-shadow: 0 16px 34px rgb(0 0 0 / 0.32), 0 0 25px rgb(242 201 76 / 0.12);
}

.answer.wrong {
  opacity: 0.46;
  filter: saturate(0.45);
  animation: answerSoftMiss 320ms ease both;
}

@keyframes answerSoftMiss {
  0% { transform: translateX(0); }
  35% { transform: translateX(-4px); }
  70% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

.retry-coach {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 14px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgb(85 183 217 / 0.46);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 18%, rgb(85 183 217 / 0.2), transparent 35%),
    radial-gradient(circle at 95% 0%, rgb(242 201 76 / 0.1), transparent 40%),
    linear-gradient(140deg, rgb(7 21 27 / 0.97), rgb(5 5 7 / 0.99));
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.38), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.retry-coach.hidden { display: none; }
.retry-coach.show { animation: retryCoachIn 480ms cubic-bezier(.2,.8,.2,1) both; }

@keyframes retryCoachIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.retry-coach-portrait {
  position: relative;
  width: 104px;
  height: 122px;
  overflow: hidden;
  border: 1px solid rgb(85 183 217 / 0.42);
  border-radius: 13px;
  background: rgb(0 0 0 / 0.32);
  box-shadow: 0 0 30px rgb(85 183 217 / 0.16);
}

.retry-coach-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 18%;
}

.retry-coach-portrait span {
  position: absolute;
  inset: auto 10px 8px;
  height: 2px;
  background: #8de7ff;
  box-shadow: 0 0 14px #55b7d9;
}

.retry-coach-copy h3,
.retry-coach-copy p { margin: 0; }

.retry-coach-copy h3 {
  margin-top: 4px;
  color: #fff4c6;
  font: 800 clamp(1.1rem, 2vw, 1.55rem)/1.08 Cinzel, Georgia, serif;
}

.retry-coach-copy p {
  max-width: 62ch;
  margin-top: 7px;
  color: #d8e8e5;
  font-size: 0.88rem;
  line-height: 1.48;
}

.retry-coach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 13px;
}

.retry-coach-actions button {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid rgb(85 183 217 / 0.48);
  border-radius: 10px;
  color: #f6f0da;
  background: rgb(5 13 17 / 0.86);
  font-weight: 900;
  cursor: pointer;
}

.retry-coach-actions button:last-child {
  border-color: rgb(242 201 76 / 0.5);
  color: #171006;
  background: linear-gradient(180deg, #ffe89b, #d9a93a);
}

.first-proof-moment[data-handoff="parent"] {
  min-height: 540px;
  align-content: end;
  padding: clamp(20px, 4vw, 46px);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgb(2 8 6 / 0.08) 0%, rgb(2 8 6 / 0.56) 42%, rgb(2 8 6 / 0.98) 78%),
    url("/stem-rover-lab/assets/dungeon-academy-mastery-celebration-ai.webp?v=academy-clear-handoff-v87") center 38% / cover no-repeat;
  box-shadow: 0 38px 100px rgb(0 0 0 / 0.52), 0 0 70px rgb(158 255 189 / 0.12);
}

.first-proof-moment[data-handoff="parent"]::before {
  inset: 12px;
  border-radius: 16px;
  border-color: rgb(255 246 215 / 0.2);
}

.proof-ceremony-banner {
  position: absolute;
  top: 24px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  padding: 9px 18px;
  border: 1px solid rgb(242 201 76 / 0.62);
  border-radius: 999px;
  color: #1b1205;
  background: linear-gradient(180deg, #fff1ad, #d9a63a);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.42), 0 0 24px rgb(242 201 76 / 0.22);
  font: 1000 0.68rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.first-proof-moment:not([data-handoff="parent"]) .proof-ceremony-banner,
.first-proof-moment:not([data-handoff="parent"]) .proof-ceremony-sky {
  display: none;
}

.first-proof-moment[data-handoff="parent"] .first-proof-copy {
  padding: clamp(16px, 2.6vw, 28px);
  border: 1px solid rgb(158 255 189 / 0.28);
  border-radius: 16px;
  background: rgb(3 10 7 / 0.88);
  box-shadow: 0 20px 56px rgb(0 0 0 / 0.42), inset 0 1px 0 rgb(255 246 215 / 0.12);
  backdrop-filter: blur(12px);
}

.first-proof-moment[data-handoff="parent"] .first-proof-copy h3 {
  max-width: 12ch;
  font-size: clamp(2rem, 4.8vw, 4rem);
  line-height: 0.92;
  text-wrap: balance;
}

.proof-ceremony-sky i {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff1aa;
  box-shadow: 0 0 18px 5px rgb(242 201 76 / 0.54);
  animation: proofStarRise 2.8s ease-in-out infinite;
}

.proof-ceremony-sky i:nth-child(1) { left: 9%; top: 26%; animation-delay: -.4s; }
.proof-ceremony-sky i:nth-child(2) { left: 22%; top: 12%; animation-delay: -1.6s; }
.proof-ceremony-sky i:nth-child(3) { left: 43%; top: 24%; animation-delay: -.9s; }
.proof-ceremony-sky i:nth-child(4) { right: 38%; top: 10%; animation-delay: -2.1s; }
.proof-ceremony-sky i:nth-child(5) { right: 18%; top: 22%; animation-delay: -.2s; }
.proof-ceremony-sky i:nth-child(6) { right: 7%; top: 37%; animation-delay: -1.2s; }

@keyframes proofStarRise {
  0%, 100% { opacity: 0.35; transform: translateY(8px) scale(0.7); }
  50% { opacity: 1; transform: translateY(-8px) scale(1.15); }
}

@media (max-width: 780px) {
  .game-shell[data-focus="learn"] .lesson-cinematic-stage,
  .lesson-scroll[data-action="practice"] .lesson-cinematic-stage,
  .lesson-scroll[data-action="lab"] .lesson-cinematic-stage,
  .lesson-scroll[data-action="unlock"] .lesson-cinematic-stage {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .game-shell[data-focus="learn"] .lesson-cinematic-stage-art,
  .lesson-scroll[data-action="practice"] .lesson-cinematic-stage-art,
  .lesson-scroll[data-action="lab"] .lesson-cinematic-stage-art,
  .lesson-scroll[data-action="unlock"] .lesson-cinematic-stage-art {
    min-height: 300px;
  }

  .game-shell[data-focus="learn"] .lesson-cinematic-stage-copy h4 {
    max-width: 16ch;
  }

  .retry-coach {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
  }

  .retry-coach-portrait {
    width: 76px;
    height: 96px;
  }

  .first-proof-moment[data-handoff="parent"] {
    min-height: 500px;
    padding: 14px;
    background-position: center 28%;
  }
}

@media (max-width: 520px) {
  .game-shell[data-focus="learn"] .lesson-cinematic-stage-art,
  .lesson-scroll[data-action="practice"] .lesson-cinematic-stage-art,
  .lesson-scroll[data-action="lab"] .lesson-cinematic-stage-art,
  .lesson-scroll[data-action="unlock"] .lesson-cinematic-stage-art {
    min-height: 270px;
  }

  .game-shell[data-focus="learn"] .lesson-cinematic-stage-copy {
    padding: 19px 16px 20px;
  }

  .game-shell[data-focus="learn"] .lesson-stage-mentor {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .game-shell[data-focus="learn"] .lesson-stage-mentor img {
    width: 56px;
    height: 68px;
  }

  .retry-coach {
    grid-template-columns: 1fr;
    padding: 13px;
  }

  .retry-coach-portrait {
    width: 100%;
    height: 120px;
  }

  .retry-coach-portrait img { object-position: 50% 16%; }
  .retry-coach-actions button { width: 100%; }

  .first-proof-moment[data-handoff="parent"] .first-proof-copy {
    padding: 14px;
  }

  .proof-ceremony-banner {
    top: 18px;
    font-size: 0.58rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .answer.wrong,
  .retry-coach.show,
  .proof-ceremony-sky i {
    animation: none !important;
  }
}

/* Week One Adventure v84: five classes read as one illustrated quest. */
.week-adventure-ribbon {
  --week-accent: #f2c94c;
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
  order: 4;
  display: grid;
  grid-template-columns: 120px minmax(250px, 0.82fr) minmax(420px, 1.18fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: center;
  min-height: 146px;
  padding: 12px clamp(14px, 2vw, 22px) 12px 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--week-accent) 38%, rgb(255 255 255 / 0.08));
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 50%, color-mix(in srgb, var(--week-accent) 14%, transparent), transparent 31%),
    linear-gradient(112deg, rgb(18 14 9 / 0.98), rgb(5 8 10 / 0.99) 64%);
  box-shadow: 0 24px 62px rgb(0 0 0 / 0.32), inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.week-adventure-ribbon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.2;
  background: repeating-linear-gradient(125deg, transparent 0 28px, color-mix(in srgb, var(--week-accent) 18%, transparent) 29px 30px);
  mask-image: linear-gradient(90deg, transparent 8%, #000 48%, transparent 100%);
}

.week-adventure-ribbon[data-domain="science"] { --week-accent: #82dfab; }
.week-adventure-ribbon[data-domain="physics"] { --week-accent: #8dc9ff; }
.week-adventure-ribbon[data-domain="engineering"] { --week-accent: #ffad66; }
.week-adventure-ribbon[data-domain="ai"] { --week-accent: #c5a2ff; }
.week-adventure-ribbon[data-state="complete"] { --week-accent: #9effbd; }
.week-adventure-ribbon[data-week="four"] {
  background:
    radial-gradient(circle at 14% 50%, color-mix(in srgb, var(--week-accent) 20%, transparent), transparent 32%),
    radial-gradient(circle at 92% 20%, rgb(255 184 92 / 0.08), transparent 26%),
    linear-gradient(112deg, rgb(19 10 28 / 0.98), rgb(5 10 15 / 0.99) 64%);
}
.week-adventure-ribbon[data-week="five"] {
  --week-accent: #ffe49a;
  background:
    radial-gradient(circle at 14% 50%, rgb(255 228 154 / 0.2), transparent 32%),
    radial-gradient(circle at 88% 18%, rgb(109 203 255 / 0.1), transparent 28%),
    linear-gradient(112deg, rgb(32 22 8 / 0.99), rgb(5 8 14 / 0.99) 66%);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.38), inset 0 1px 0 rgb(255 244 205 / 0.12), 0 0 38px rgb(255 207 92 / 0.07);
}

.week-adventure-art {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--week-accent) 50%, rgb(255 255 255 / 0.1));
  border-radius: 13px;
  background: #090a09;
  box-shadow: 0 14px 32px rgb(0 0 0 / 0.38), 0 0 28px color-mix(in srgb, var(--week-accent) 12%, transparent);
}

.week-adventure-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgb(1 4 4 / 0.84));
}

.week-adventure-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.16) contrast(1.08);
  transition: transform 420ms ease, filter 420ms ease;
}

.week-adventure-ribbon[data-state="restored"] .week-adventure-art img,
.week-adventure-ribbon[data-state="complete"] .week-adventure-art img {
  transform: scale(1.045);
  filter: saturate(1.28) contrast(1.04) brightness(1.08);
}

.week-adventure-art span {
  position: absolute;
  right: 8px;
  bottom: 7px;
  z-index: 2;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--week-accent) 75%, #fff);
  border-radius: 50%;
  color: #151006;
  background: var(--week-accent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--week-accent) 45%, transparent);
  font: 1000 0.72rem/1 "JetBrains Mono", Consolas, monospace;
}

.week-adventure-copy { min-width: 0; }

.week-adventure-label {
  display: block;
  color: var(--week-accent);
  font: 900 0.65rem/1.25 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.week-adventure-copy h2 {
  max-width: 21ch;
  margin: 7px 0 0;
  color: #fff4d0;
  font: 800 clamp(1.2rem, 2vw, 1.72rem)/1.04 Cinzel, Georgia, serif;
  text-wrap: balance;
}

.week-adventure-copy p {
  max-width: 52ch;
  margin: 7px 0 0;
  color: #c9d7d3;
  font-size: 0.82rem;
  line-height: 1.42;
}

.week-adventure-status {
  margin-top: 9px;
  color: #f7efd4;
  font: 900 0.67rem/1.25 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.035em;
}

.week-adventure-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.week-adventure-node {
  position: relative;
  min-width: 0;
  min-height: 88px;
  padding: 10px 9px 8px;
  border: 1px solid rgb(255 255 255 / 0.09);
  border-radius: 11px;
  color: #8e9b99;
  background: rgb(255 255 255 / 0.026);
}

.week-adventure-node span,
.week-adventure-node b,
.week-adventure-node small { display: block; }

.week-adventure-node span {
  color: inherit;
  font: 1000 0.58rem/1 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.week-adventure-node b {
  margin-top: 8px;
  overflow: hidden;
  color: #ccd4d1;
  font-size: 0.72rem;
  line-height: 1.14;
  text-overflow: ellipsis;
}

.week-adventure-node small {
  margin-top: 5px;
  overflow: hidden;
  font-size: 0.62rem;
  line-height: 1.16;
  text-overflow: ellipsis;
}

.week-adventure-node[data-state="current"] {
  border-color: color-mix(in srgb, var(--week-accent) 56%, transparent);
  color: var(--week-accent);
  background: color-mix(in srgb, var(--week-accent) 9%, rgb(5 8 8 / 0.9));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--week-accent) 12%, transparent);
}

.week-adventure-node[data-state="complete"] {
  border-color: rgb(118 230 163 / 0.42);
  color: #9effbd;
  background: rgb(54 146 91 / 0.1);
}

.week-adventure-node[data-state="complete"]::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 8px;
  color: #9effbd;
  font-weight: 1000;
}

.quest-panel[data-focus="learn"] > .week-adventure-ribbon { order: 3; }
.quest-panel[data-focus="cast"] > .week-adventure-ribbon { display: none !important; }

@media (max-width: 1100px) {
  .week-adventure-ribbon {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .week-adventure-art {
    width: 104px;
    height: 112px;
  }

  .week-adventure-track { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .class-path-steps {
    scrollbar-width: none;
  }

  .class-path-steps::-webkit-scrollbar {
    display: none;
  }

  .class-path-steps .student-day-step {
    min-width: 112px;
  }

  .week-adventure-ribbon {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 11px;
    padding: 10px;
    border-radius: 14px;
  }

  .week-adventure-art {
    width: 72px;
    height: 92px;
  }

  .week-adventure-copy h2 { font-size: 1.12rem; }
  .week-adventure-copy p { font-size: 0.76rem; }

  .week-adventure-track {
    display: flex;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .week-adventure-node {
    flex: 0 0 106px;
    min-height: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .week-adventure-art img { transition: none !important; }
}

/* Week One tactile labs v85: direct choices, deliberate tests, subject-specific proof. */
.alchemy-vial.direct-sort {
  cursor: default;
  min-height: 166px;
}

.alchemy-vial.direct-sort:hover {
  transform: none;
}

.alchemy-direct-sort,
.oracle-direct-lenses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: auto;
}

.alchemy-direct-sort button,
.oracle-direct-lenses button {
  min-height: 38px;
  padding: 7px 8px;
  border-radius: 8px;
  color: #d7dfdc;
  background: rgb(0 0 0 / 0.28);
  font: 900 0.66rem/1.15 "JetBrains Mono", Consolas, monospace;
  cursor: pointer;
  transition: transform 120ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.alchemy-direct-sort button {
  border: 1px solid rgb(158 255 189 / 0.22);
}

.alchemy-direct-sort button:first-child[aria-pressed="true"] {
  border-color: rgb(85 183 217 / 0.72);
  color: #dff7ff;
  background: rgb(41 131 173 / 0.2);
  box-shadow: inset 0 0 0 1px rgb(85 183 217 / 0.16), 0 0 16px rgb(85 183 217 / 0.12);
}

.alchemy-direct-sort button:last-child[aria-pressed="true"] {
  border-color: rgb(158 255 189 / 0.72);
  color: #e2ffea;
  background: rgb(63 154 98 / 0.2);
  box-shadow: inset 0 0 0 1px rgb(158 255 189 / 0.14), 0 0 16px rgb(158 255 189 / 0.12);
}

.alchemy-direct-sort button:active,
.oracle-direct-lenses button:active,
.forge-test-button:active {
  transform: translateY(2px);
}

.oracle-tile.direct-audit {
  cursor: default;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 112px;
}

.oracle-tile.direct-audit:hover {
  transform: none;
}

.oracle-direct-lenses {
  grid-column: 1 / -1;
  width: 100%;
}

.oracle-direct-lenses button {
  border: 1px solid rgb(185 173 255 / 0.24);
}

.oracle-direct-lenses button:first-child[aria-pressed="true"] {
  border-color: rgb(242 201 76 / 0.68);
  color: #fff2b5;
  background: rgb(153 118 28 / 0.2);
  box-shadow: 0 0 16px rgb(242 201 76 / 0.12);
}

.oracle-direct-lenses button:last-child[aria-pressed="true"] {
  border-color: rgb(255 156 124 / 0.7);
  color: #ffe2d8;
  background: rgb(154 70 43 / 0.2);
  box-shadow: 0 0 16px rgb(255 156 124 / 0.12);
}

.pattern-oracle-step {
  display: grid;
  grid-template-columns: minmax(180px, 0.75fr) minmax(0, 1.25fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgb(185 173 255 / 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 12%, rgb(109 91 208 / 0.12), transparent 38%),
    rgb(5 4 12 / 0.66);
}

.pattern-oracle-step.active {
  border-color: rgb(185 173 255 / 0.46);
  box-shadow: inset 0 0 22px rgb(109 91 208 / 0.05);
}

.pattern-oracle-step.complete {
  border-color: rgb(158 255 189 / 0.34);
  background:
    radial-gradient(circle at 92% 12%, rgb(158 255 189 / 0.1), transparent 38%),
    rgb(5 14 10 / 0.66);
}

.pattern-oracle-step.locked {
  opacity: 0.58;
}

.pattern-oracle-step-copy {
  display: grid;
  gap: 4px;
}

.pattern-oracle-step-copy span,
.pattern-oracle-stage-head span,
.pattern-oracle-ledger-head span,
.pattern-oracle-trial span,
.pattern-oracle-output span,
.pattern-oracle-readout span {
  color: #beb6ff;
  font: 900 0.61rem/1.15 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.pattern-oracle-step-copy b,
.pattern-oracle-stage-head b,
.pattern-oracle-ledger-head b {
  color: #fff8d8;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.8rem;
  line-height: 1.18;
}

.pattern-oracle-step-copy small {
  color: #d9d5ff;
  line-height: 1.3;
}

.pattern-oracle-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.pattern-review-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pattern-oracle-options button,
.pattern-oracle-run {
  min-width: 0;
  min-height: 44px;
  padding: 8px 7px;
  border: 1px solid rgb(185 173 255 / 0.28);
  border-radius: 8px;
  color: #e7e2ff;
  background: #080711;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  cursor: pointer;
  font: 900 0.69rem/1.15 "JetBrains Mono", Consolas, monospace;
  text-transform: capitalize;
  transition: transform 180ms var(--motion), border-color 180ms ease, background-color 180ms ease;
}

.pattern-oracle-options button:hover:not(:disabled),
.pattern-oracle-options button:focus-visible,
.pattern-oracle-run:hover:not(:disabled),
.pattern-oracle-run:focus-visible {
  border-color: rgb(242 201 76 / 0.64);
  transform: translateY(-1px);
}

.pattern-oracle-options button[aria-pressed="true"] {
  border-color: rgb(242 201 76 / 0.7);
  color: #fff3bb;
  background: rgb(66 48 12 / 0.62);
  box-shadow: 0 0 18px rgb(242 201 76 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.1);
}

.pattern-review-options button:last-child[aria-pressed="true"] {
  border-color: rgb(158 255 189 / 0.68);
  color: #dffff0;
  background: rgb(12 53 31 / 0.62);
}

.pattern-review-options button:first-child[aria-pressed="true"] {
  border-color: rgb(255 156 124 / 0.68);
  color: #ffe0d5;
  background: rgb(66 25 17 / 0.62);
}

.pattern-oracle-options button:disabled,
.pattern-oracle-run:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

.pattern-oracle-predict-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(116px, 0.5fr);
  gap: 7px;
  align-items: stretch;
}

.pattern-oracle-run {
  border-color: rgb(242 201 76 / 0.5);
  color: #160f05;
  background: linear-gradient(180deg, #ffe99a, #c89528);
  box-shadow: 0 3px 0 #64420d, 0 0 18px rgb(242 201 76 / 0.1);
  text-transform: none;
}

.pattern-oracle-output {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgb(185 173 255 / 0.22);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.24);
}

.pattern-oracle-output b {
  color: #d8d2ff;
  font: 1000 0.82rem/1 "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.pattern-oracle-output.revealed {
  border-color: rgb(158 255 189 / 0.44);
  background: rgb(11 45 27 / 0.48);
  animation: patternOracleReveal 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pattern-oracle-output.revealed b {
  color: #9effbd;
}

.pattern-oracle-stage {
  position: relative;
  min-height: 224px;
  overflow: hidden;
  padding: 13px;
  border: 1px solid rgb(185 173 255 / 0.26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 46%, rgb(109 91 208 / 0.22), transparent 35%),
    linear-gradient(180deg, rgb(13 8 28 / 0.94), rgb(5 5 10 / 0.98));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.pattern-oracle-stage.proved {
  border-color: rgb(158 255 189 / 0.48);
  box-shadow: 0 0 28px rgb(158 255 189 / 0.09), inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.pattern-oracle-stage-head,
.pattern-oracle-ledger-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  align-items: baseline;
}

.pattern-rune-stream {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(8, minmax(28px, 1fr));
  gap: 6px;
  margin-top: 20px;
}

.pattern-rune {
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 50% 50% 44% 44%;
  color: #fff8d8;
  background: #15111c;
  box-shadow: 0 4px 0 rgb(0 0 0 / 0.34), inset 0 1px 0 rgb(255 255 255 / 0.1);
  font: 1000 0.72rem/1 "JetBrains Mono", Consolas, monospace;
  font-style: normal;
}

.pattern-rune.red {
  border-color: rgb(255 113 103 / 0.58);
  background: radial-gradient(circle at 38% 32%, #ffb096, #982f35 72%);
}

.pattern-rune.blue {
  border-color: rgb(116 199 255 / 0.58);
  background: radial-gradient(circle at 38% 32%, #c0eeff, #285fba 72%);
}

.pattern-rune.unknown {
  border-style: dashed;
  color: #beb6ff;
  background: rgb(20 15 39 / 0.76);
}

.pattern-rune.unknown.revealed {
  border-style: solid;
  border-color: rgb(158 255 189 / 0.64);
  color: #fff;
  background: radial-gradient(circle at 38% 32%, #c0eeff, #285fba 72%);
  animation: patternOracleReveal 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pattern-rune.group-0,
.pattern-rune.group-1 {
  outline: 1px solid rgb(242 201 76 / 0.34);
  outline-offset: 2px;
}

.pattern-oracle-beam {
  position: absolute;
  top: 92px;
  right: 13%;
  left: 13%;
  height: 48px;
  opacity: 0.7;
  pointer-events: none;
}

.pattern-oracle-beam i,
.pattern-oracle-beam em {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(185 173 255 / 0.28);
  border-radius: 50%;
  transform: rotate(-4deg);
}

.pattern-oracle-beam em {
  inset: 10px 16%;
  border-color: rgb(85 183 217 / 0.24);
  transform: rotate(5deg);
}

.pattern-oracle-readout {
  position: absolute;
  right: 13px;
  bottom: 13px;
  left: 13px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 10px;
  padding: 9px;
  border: 1px solid rgb(185 173 255 / 0.2);
  border-radius: 8px;
  background: rgb(0 0 0 / 0.4);
}

.pattern-oracle-readout b {
  min-width: 0;
  color: #fff3cf;
  font-size: 0.69rem;
  line-height: 1.2;
  text-align: right;
  overflow-wrap: break-word;
}

.pattern-oracle-ledger {
  display: grid;
  gap: 7px;
}

.pattern-oracle-ledger > p,
.pattern-oracle-trial {
  margin: 0;
  padding: 8px 9px;
  border: 1px solid rgb(185 173 255 / 0.18);
  border-radius: 8px;
  color: #d9d5ff;
  background: rgb(0 0 0 / 0.2);
}

.pattern-oracle-ledger > p {
  line-height: 1.3;
}

.pattern-oracle-trial {
  display: grid;
  grid-template-columns: 58px minmax(110px, 0.8fr) minmax(130px, 1fr) minmax(130px, 0.9fr);
  gap: 7px;
  align-items: center;
}

.pattern-oracle-trial.passed {
  border-color: rgb(158 255 189 / 0.38);
  background: rgb(8 37 22 / 0.42);
}

.pattern-oracle-trial.revised {
  border-color: rgb(255 156 124 / 0.34);
}

.pattern-oracle-trial b {
  color: #fff8d8;
  text-transform: capitalize;
}

.pattern-oracle-trial small {
  color: #d9d5ff;
  text-transform: capitalize;
}

.pattern-oracle-trial em {
  color: #ffb39c;
  font-size: 0.67rem;
  font-style: normal;
  font-weight: 900;
}

.pattern-oracle-trial.passed em {
  color: #9effbd;
}

@keyframes patternOracleReveal {
  0% { transform: scale(0.88); filter: brightness(1.4); }
  70% { transform: scale(1.04); }
  100% { transform: scale(1); filter: brightness(1); }
}

.forge-control-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.forge-test-button {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid rgb(242 201 76 / 0.54);
  border-radius: 8px;
  color: #171006;
  background: linear-gradient(180deg, #ffe99a, #d6a834);
  box-shadow: 0 3px 0 #6c4812, 0 0 18px rgb(242 201 76 / 0.1);
  font-weight: 1000;
  cursor: pointer;
}

.forge-test-button:disabled {
  border-color: rgb(255 246 215 / 0.14);
  color: #7f7763;
  background: #0d0a07;
  box-shadow: none;
  cursor: not-allowed;
}

.engineering-forge-lab[data-state="selected"] .forge-test-rig {
  border-color: rgb(242 201 76 / 0.32);
  box-shadow: inset 0 0 32px rgb(242 201 76 / 0.04);
}

.physics-launcher[data-mode="force-equation"] {
  border-color: rgb(141 201 255 / 0.52);
  background:
    radial-gradient(circle at 32% 12%, rgb(141 201 255 / 0.15), transparent 42%),
    radial-gradient(circle at 88% 34%, rgb(242 201 76 / 0.1), transparent 34%),
    linear-gradient(145deg, rgb(5 14 20 / 0.98), rgb(7 7 6 / 0.98));
}

.physics-launcher[data-mode="force-equation"] .launcher-stage-frame {
  border-color: rgb(141 201 255 / 0.32);
}

.physics-launcher[data-mode="force-equation"][data-state="hit"] .launcher-stage-frame {
  border-color: rgb(158 255 189 / 0.62);
  box-shadow: 0 0 34px rgb(158 255 189 / 0.12), inset 0 0 38px rgb(158 255 189 / 0.05);
}

.physics-launcher[data-mode="force-equation"] .launcher-button {
  border-color: rgb(141 201 255 / 0.56);
  color: #071019;
  background: linear-gradient(180deg, #cce9ff, #78b7df);
}

.force-prediction-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(224px, 0.9fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgb(141 201 255 / 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 12%, rgb(242 201 76 / 0.11), transparent 38%),
    rgb(3 10 15 / 0.72);
}

.force-prediction-panel > div:first-child {
  display: grid;
  gap: 3px;
}

.force-prediction-panel span,
.force-trial-ledger-head span {
  color: #9ee8ff;
  font: 900 0.62rem/1.15 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.force-prediction-panel b,
.force-trial-ledger-head b {
  color: #fff8d8;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.16;
}

.force-prediction-panel small {
  color: #bddde2;
  line-height: 1.3;
}

.force-prediction-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.force-prediction-options button {
  min-width: 0;
  min-height: 44px;
  padding: 7px 5px;
  border: 1px solid rgb(141 201 255 / 0.3);
  border-radius: 7px;
  color: #dff7ff;
  background: #050c11;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  cursor: pointer;
  font: 900 0.72rem/1 "JetBrains Mono", Consolas, monospace;
  transition: transform 180ms var(--motion), border-color 180ms ease, background-color 180ms ease;
}

.force-prediction-options button:hover,
.force-prediction-options button:focus-visible {
  border-color: rgb(158 232 255 / 0.68);
  transform: translateY(-1px);
}

.force-prediction-options button[aria-pressed="true"] {
  border-color: rgb(242 201 76 / 0.72);
  color: #fff4c6;
  background: rgb(71 53 13 / 0.58);
  box-shadow: 0 0 18px rgb(242 201 76 / 0.12), inset 0 1px 0 rgb(255 246 215 / 0.12);
}

.force-prediction-options button:disabled {
  cursor: default;
  opacity: 0.78;
}

.force-observation.hidden-result b {
  color: #9ee8ff;
  letter-spacing: 0.08em;
}

.force-observation.revealed {
  border-color: rgb(158 255 189 / 0.38);
  background: rgb(10 39 28 / 0.44);
}

.force-observation.revealed b {
  color: #9effbd;
}

.force-trial-ledger {
  display: grid;
  gap: 7px;
  padding-top: 2px;
}

.force-trial-ledger-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  align-items: baseline;
}

.force-trial-row {
  display: grid;
  grid-template-columns: 62px minmax(100px, 0.7fr) minmax(180px, 1.4fr) minmax(150px, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 48px;
  padding: 7px 9px;
  border: 1px solid rgb(255 179 108 / 0.24);
  border-radius: 7px;
  color: #d3e9ea;
  background: rgb(25 12 7 / 0.5);
}

.force-trial-row.passed {
  border-color: rgb(158 255 189 / 0.38);
  background: rgb(7 34 23 / 0.5);
}

.force-trial-row span {
  color: #9ee8ff;
  font: 900 0.6rem/1.1 "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.force-trial-row b {
  color: #fff8d8;
  font-size: 0.72rem;
}

.force-trial-row small {
  line-height: 1.24;
}

.force-trial-row em {
  color: #ffcf9a;
  font-size: 0.67rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
}

.force-trial-row.passed em {
  color: #9effbd;
}

.physics-launcher[data-mode="force-equation"] .launcher-stage-frame[data-state="miss"] {
  animation: forceLiftRecoil 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.physics-launcher[data-mode="force-equation"] .launcher-stage-frame[data-state="hit"] {
  animation: forceLiftSeal 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes forceLiftRecoil {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-4px); }
  68% { transform: translateX(3px); }
}

@keyframes forceLiftSeal {
  0% { transform: scale(0.992); filter: brightness(0.92); }
  58% { transform: scale(1.006); filter: brightness(1.12); }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (max-width: 700px) {
  .pattern-oracle-step {
    grid-template-columns: 1fr;
  }

  .pattern-oracle-options button,
  .pattern-oracle-run,
  .oracle-reset-button {
    min-height: 48px;
  }

  .pattern-oracle-predict-row {
    grid-template-columns: 1fr;
  }

  .pattern-oracle-run,
  .pattern-oracle-output {
    width: 100%;
  }

  .pattern-rune-stream {
    gap: 4px;
  }

  .pattern-oracle-trial {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pattern-oracle-trial small,
  .pattern-oracle-trial em {
    grid-column: 1 / -1;
  }

  .force-prediction-panel {
    grid-template-columns: 1fr;
  }

  .force-prediction-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .force-prediction-options button {
    min-height: 48px;
  }

  .physics-launcher .launcher-button,
  .physics-launcher .launcher-stepper button {
    min-height: 48px;
  }

  .physics-launcher .launcher-controls input[type="range"] {
    min-height: 44px;
  }

  .force-trial-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .force-trial-row small,
  .force-trial-row em {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pattern-oracle-options button,
  .pattern-oracle-run,
  .pattern-oracle-output.revealed,
  .pattern-rune.unknown.revealed {
    animation: none !important;
    transition: none !important;
  }

  .force-prediction-options button,
  .physics-launcher[data-mode="force-equation"] .launcher-stage-frame[data-state="miss"],
  .physics-launcher[data-mode="force-equation"] .launcher-stage-frame[data-state="hit"] {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 620px) {
  .alchemy-direct-sort,
  .oracle-direct-lenses {
    grid-template-columns: 1fr;
  }

  .forge-controls {
    grid-template-columns: 1fr;
  }

  .forge-control-actions {
    justify-content: stretch;
  }

  .forge-control-actions button {
    flex: 1 1 132px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alchemy-direct-sort button,
  .oracle-direct-lenses button,
  .forge-test-button {
    transition: none !important;
  }
}

/* Evidence feedback v86: every choice teaches, without turning mistakes into alarms. */
.alchemy-vial:not(.direct-sort),
.oracle-tile:not(.direct-audit) {
  width: 100%;
  font: inherit;
}

.alchemy-vial.aligned,
.oracle-tile.aligned {
  border-color: rgb(158 255 189 / 0.72);
  box-shadow: 0 4px 0 #050302, 0 0 20px rgb(158 255 189 / 0.12), inset 0 1px 0 rgb(255 246 215 / 0.1);
  animation: evidence-settle 180ms ease-out both;
}

.alchemy-vial.recheck,
.oracle-tile.recheck {
  border-color: rgb(255 156 124 / 0.62);
  box-shadow: 0 4px 0 #050302, 0 0 16px rgb(255 156 124 / 0.08), inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.alchemy-vial .lab-item-feedback,
.oracle-tile .lab-item-feedback {
  grid-column: 1 / -1;
  min-height: 30px;
  margin-top: 2px;
  padding: 7px 9px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  color: #b8ad8d;
  background: rgb(0 0 0 / 0.2);
  font: 750 0.69rem/1.35 Inter, Arial, sans-serif;
  text-transform: none;
}

.alchemy-vial .lab-item-feedback.aligned,
.oracle-tile .lab-item-feedback.aligned {
  border-color: rgb(158 255 189 / 0.3);
  color: #cffff0;
  background: rgb(44 112 69 / 0.16);
}

.alchemy-vial .lab-item-feedback.recheck,
.oracle-tile .lab-item-feedback.recheck {
  border-color: rgb(255 156 124 / 0.3);
  color: #ffd7ca;
  background: rgb(115 49 32 / 0.16);
}

.alchemy-direct-sort button:focus-visible,
.oracle-direct-lenses button:focus-visible {
  outline: 3px solid #fff2b5;
  outline-offset: 2px;
}

@keyframes evidence-settle {
  from { transform: scale(0.992); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .alchemy-vial.aligned,
  .oracle-tile.aligned {
    animation: none !important;
  }
}

/* Clear completion handoff v87: one proof receipt, one obvious next move. */
.first-proof-grid article[data-proof-kind="reward"] {
  grid-column: 1 / -1;
  min-height: 64px;
  border-color: rgb(242 201 76 / 0.34);
  background:
    radial-gradient(circle at 92% 12%, rgb(242 201 76 / 0.14), transparent 36%),
    linear-gradient(180deg, rgb(158 255 189 / 0.07), rgb(0 0 0 / 0.22));
}

.first-proof-grid article[data-proof-kind="answer"] {
  border-color: rgb(158 255 189 / 0.28);
}

.first-proof-grid article[data-proof-kind="parent"] {
  border-color: rgb(85 183 217 / 0.24);
}

.first-proof-actions button {
  min-height: 44px;
}

.first-proof-moment[data-handoff="record"] .first-proof-actions button[data-first-proof-action="next"] {
  order: -1;
  border-color: rgb(158 255 189 / 0.48);
  color: #071008;
  background: linear-gradient(180deg, #e8ffd7, #9effbd);
  box-shadow: 0 10px 24px rgb(158 255 189 / 0.13), inset 0 1px 0 rgb(255 255 255 / 0.34);
}

.first-proof-moment[data-handoff="record"] .first-proof-actions button[data-first-proof-action="parent"] {
  order: 2;
  border-color: rgb(255 246 215 / 0.18);
  color: #d8c99b;
  background: rgb(0 0 0 / 0.3);
  box-shadow: none;
}

.first-proof-actions button:focus-visible,
.lesson-recap summary:focus-visible {
  outline: 3px solid #fff2b5;
  outline-offset: 3px;
}

.lesson-recap[data-result="correct"]:not([open]) {
  border-color: rgb(255 246 215 / 0.14);
  background: rgb(5 4 3 / 0.7);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.06);
}

@media (max-width: 520px) {
  .parent-review-script-grid {
    grid-template-columns: 1fr;
  }

  .parent-review-script-grid article {
    min-height: 0;
  }

  .first-proof-grid article {
    min-height: 0;
    padding: 10px;
  }

  .first-proof-actions button {
    width: 100%;
  }
}

/* Focused lesson v88: one current step, one task, one deliberate way back. */
.class-path-actions {
  display: grid;
  gap: 7px;
}

.class-path-exit {
  display: none;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid rgb(255 246 215 / 0.18);
  border-radius: 9px;
  color: #d8c99b;
  background: rgb(0 0 0 / 0.26);
  font: 850 0.68rem/1.15 Inter, Arial, sans-serif;
  cursor: pointer;
  transition: transform 160ms var(--motion), border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.class-path-sound {
  min-height: 48px;
  padding: 7px 12px;
  border: 1px solid rgb(85 183 217 / 0.34);
  border-radius: 9px;
  color: #bfeeff;
  background: rgb(7 28 36 / 0.72);
  font: 900 0.68rem/1.15 Inter, Arial, sans-serif;
  cursor: pointer;
  transition: transform 160ms var(--motion), border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.class-path-sound[aria-pressed="true"] {
  border-color: rgb(158 255 189 / 0.46);
  color: #c9ffd8;
  background: rgb(13 57 30 / 0.68);
}

.class-path-sound:hover,
.class-path-sound:focus-visible {
  transform: translateY(-1px);
  border-color: rgb(191 243 255 / 0.68);
  color: #f1fcff;
  outline: 3px solid rgb(133 220 244 / 0.4);
  outline-offset: 2px;
}

.class-path-exit:hover,
.class-path-exit:focus-visible {
  border-color: rgb(255 246 215 / 0.4);
  color: #fff4c6;
  background: rgb(255 246 215 / 0.07);
  outline: 3px solid rgb(255 242 181 / 0.72);
  outline-offset: 2px;
}

.class-path-exit:active {
  transform: translateY(1px);
}

.quest-panel[data-focus="learn"] > :is(
  .quest-header,
  .week-adventure-ribbon,
  .learning-flow,
  .focus-rail,
  .media-controls,
  .account-chip
),
.quest-panel[data-focus="cast"] > :is(
  .quest-header,
  .week-adventure-ribbon,
  .learning-flow,
  .focus-rail,
  .media-controls,
  .account-chip
) {
  display: none !important;
}

.quest-panel[data-focus="learn"] > .class-path-ribbon,
.quest-panel[data-focus="cast"] > .class-path-ribbon {
  position: sticky;
  top: 0;
  z-index: 20;
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 0.34fr) auto;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 13px;
  background:
    radial-gradient(ellipse at 8% 0%, rgb(85 183 217 / 0.13), transparent 42%),
    linear-gradient(135deg, rgb(5 14 17 / 0.98), rgb(8 6 4 / 0.99));
  box-shadow: 0 16px 36px rgb(0 0 0 / 0.34), inset 0 1px 0 rgb(255 246 215 / 0.1);
}

.game-shell[data-focus="learn"] .quest-panel > .class-path-ribbon,
.game-shell[data-focus="cast"] .quest-panel > .class-path-ribbon {
  display: grid !important;
}

.quest-panel[data-focus="learn"] > .class-path-ribbon { order: 1; }
.quest-panel[data-focus="learn"] > .lesson-scroll { order: 2; }
.quest-panel[data-focus="cast"] > .class-path-ribbon { order: 1; }
.quest-panel[data-focus="cast"] > .challenge-card { order: 2; }
.quest-panel[data-focus="cast"] > .controls { order: 3; }

.quest-panel[data-focus="learn"] .class-path-main h2,
.quest-panel[data-focus="cast"] .class-path-main h2 {
  margin-top: 2px;
  font-size: 1.08rem;
  line-height: 1.08;
}

.quest-panel[data-focus="learn"] .class-path-main p,
.quest-panel[data-focus="cast"] .class-path-main p {
  margin-top: 4px;
  max-width: 56ch;
  font-size: 0.78rem;
  line-height: 1.28;
}

.quest-panel[data-focus="learn"] .class-path-steps,
.quest-panel[data-focus="cast"] .class-path-steps {
  grid-template-columns: minmax(0, 1fr);
}

.quest-panel[data-focus="learn"] .class-path-steps .student-day-step:not(.current),
.quest-panel[data-focus="cast"] .class-path-steps .student-day-step:not(.current) {
  display: none !important;
}

.quest-panel[data-focus="learn"] .class-path-steps .student-day-step.current,
.quest-panel[data-focus="cast"] .class-path-steps .student-day-step.current {
  min-width: 0;
  min-height: 56px;
  padding: 7px 9px;
}

.quest-panel[data-focus="learn"] .class-path-actions,
.quest-panel[data-focus="cast"] .class-path-actions {
  min-width: 154px;
}

.quest-panel[data-focus="learn"] .class-path-exit,
.quest-panel[data-focus="cast"] .class-path-exit {
  display: block;
  min-height: 48px;
}

.quest-panel[data-focus="learn"] .class-path-primary,
.quest-panel[data-focus="cast"] .class-path-primary {
  width: 100%;
  min-height: 52px;
  box-shadow: 0 4px 0 #090604, 0 0 20px rgb(242 201 76 / 0.13);
}

@media (min-width: 1280px) {
  .game-shell[data-focus="learn"],
  .game-shell[data-focus="cast"] {
    grid-template-columns: minmax(330px, 0.42fr) minmax(780px, 1.58fr);
  }

  .quest-panel[data-focus="learn"],
  .quest-panel[data-focus="cast"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 18px 24px 30px;
  }
}

@media (max-width: 980px) {
  .quest-panel[data-focus="learn"] > .class-path-ribbon,
  .quest-panel[data-focus="cast"] > .class-path-ribbon {
    grid-template-columns: minmax(0, 1fr);
  }

  .quest-panel[data-focus="learn"] .class-path-actions,
  .quest-panel[data-focus="cast"] .class-path-actions {
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .quest-panel[data-focus="learn"] > .class-path-ribbon,
  .quest-panel[data-focus="cast"] > .class-path-ribbon {
    position: relative;
    padding: 10px;
  }

  .quest-panel[data-focus="learn"] .class-path-actions,
  .quest-panel[data-focus="cast"] .class-path-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .class-path-sound,
  .class-path-exit {
    min-height: 48px;
  }

  .quest-panel[data-focus="learn"] .class-path-exit,
  .quest-panel[data-focus="cast"] .class-path-exit {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .class-path-exit {
    transition: none !important;
  }
}

/* Universal art fallback for Safari/macOS versions without reliable WebP decoding. */
html[data-academy-art-format="png"] .intro-overlay::before,
html[data-academy-art-format="png"] .academy-home-overlay::before {
  background-image: url("/stem-rover-lab/assets/dungeon-academy-arena-safari-v92.jpg?v=academy-mac-art-fallback-v92");
}

html[data-academy-art-format="png"] .academy-lobby-visual {
  background:
    linear-gradient(180deg, rgb(5 4 3 / 0.02), rgb(5 4 3 / 0.7)),
    url("/stem-rover-lab/assets/dungeon-academy-first-quest-ai-safari-v92.jpg?v=academy-mac-art-fallback-v92") center / cover no-repeat;
}

html[data-academy-art-format="png"] .academy-home-choice[data-home-mode="today"]::before {
  background-image: url("/stem-rover-lab/assets/dungeon-academy-arena-safari-v92.jpg?v=academy-mac-art-fallback-v92");
}

html[data-academy-art-format="png"] .academy-home-choice[data-home-mode="member-week"]::before {
  background-image: url("/stem-rover-lab/assets/dungeon-academy-first-quest-ai-safari-v92.jpg?v=academy-mac-art-fallback-v92");
}

html[data-academy-art-format="png"] .academy-home-choice[data-home-mode="cast"]::before {
  background-image:
    radial-gradient(circle at 68% 36%, rgb(242 201 76 / 0.26), transparent 32%),
    url("/stem-rover-lab/assets/dungeon-academy-dragon-sprite-safari-v92.png?v=academy-mac-art-fallback-v92"),
    url("/stem-rover-lab/assets/dungeon-academy-arena-safari-v92.jpg?v=academy-mac-art-fallback-v92");
}

html[data-academy-art-format="png"] .academy-home-choice[data-home-mode="parent"]::before {
  background-image: url("/stem-rover-lab/assets/dungeon-academy-mastery-celebration-ai-safari-v92.jpg?v=academy-mac-art-fallback-v92");
}

html[data-academy-art-format="png"] .academy-home-choice[data-home-mode="today"] .home-door-sigil::before {
  background-image: url("/stem-rover-lab/assets/mentor-stem-archmage-safari-v92.jpg?v=academy-mac-art-fallback-v92");
}

html[data-academy-art-format="png"] .academy-home-choice[data-home-mode="member-week"] .home-door-sigil::before {
  background-image: url("/stem-rover-lab/assets/dungeon-academy-first-quest-ai-safari-v92.jpg?v=academy-mac-art-fallback-v92");
}

html[data-academy-art-format="png"] .academy-home-choice[data-home-mode="cast"] .home-door-sigil::before {
  background-image: url("/stem-rover-lab/assets/dungeon-academy-dragon-sprite-safari-v92.png?v=academy-mac-art-fallback-v92");
}

html[data-academy-art-format="png"] .academy-home-choice[data-home-mode="parent"] .home-door-sigil::before {
  background-image: url("/stem-rover-lab/assets/dungeon-academy-mastery-celebration-ai-safari-v92.jpg?v=academy-mac-art-fallback-v92");
}

html[data-academy-art-format="png"] .art-backdrop {
  background:
    linear-gradient(90deg, rgb(8 6 4 / 0.18), rgb(8 6 4 / 0.02) 48%, rgb(8 6 4 / 0.24)),
    linear-gradient(180deg, rgb(8 6 4 / 0.02), rgb(8 6 4 / 0.52)),
    url("/stem-rover-lab/assets/dungeon-academy-arena-safari-v92.jpg?v=academy-mac-art-fallback-v92") center / cover no-repeat;
}

html[data-academy-art-format="png"] .student-hq-focus {
  background:
    linear-gradient(90deg, rgb(5 5 3 / 0.86), rgb(5 5 3 / 0.62) 48%, rgb(5 5 3 / 0.9)),
    url("/stem-rover-lab/assets/dungeon-academy-first-quest-ai-safari-v92.jpg?v=academy-mac-art-fallback-v92") center / cover no-repeat;
}

html[data-academy-art-format="png"] .first-proof-moment[data-handoff="parent"] {
  background:
    linear-gradient(180deg, rgb(2 8 6 / 0.08) 0%, rgb(2 8 6 / 0.56) 42%, rgb(2 8 6 / 0.98) 78%),
    url("/stem-rover-lab/assets/dungeon-academy-mastery-celebration-ai-safari-v92.jpg?v=academy-mac-art-fallback-v92") center 38% / cover no-repeat;
}

/* Sampler finale v99: one clue, one question, one family-ready proof. */
.artifact-token[hidden] {
  display: none !important;
}

.artifact-token.current {
  border-color: color-mix(in srgb, var(--investigation-accent) 64%, transparent);
  box-shadow:
    0 12px 30px rgb(0 0 0 / 0.28),
    0 0 22px color-mix(in srgb, var(--investigation-accent) 14%, transparent),
    inset 0 1px 0 rgb(255 246 215 / 0.12);
}

.room-investigation.clue-found {
  animation: clueBoardSettle 520ms var(--motion);
}

.artifact-reveal.clue-pop {
  animation: clueRevealPop 520ms var(--motion);
}

@keyframes clueBoardSettle {
  0% { transform: scale(0.992); }
  42% {
    transform: scale(1.008);
    box-shadow: 0 0 34px color-mix(in srgb, var(--investigation-accent) 24%, transparent);
  }
  100% { transform: scale(1); }
}

@keyframes clueRevealPop {
  0% { opacity: 0.54; transform: translateY(5px); }
  48% {
    opacity: 1;
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--investigation-accent) 66%, transparent);
  }
  100% { transform: translateY(0); }
}

.first-proof-grid article[data-proof-kind="next"] {
  grid-column: 1 / -1;
  min-height: 64px;
  border-color: rgb(158 255 189 / 0.3);
  background:
    radial-gradient(circle at 92% 12%, rgb(158 255 189 / 0.13), transparent 36%),
    linear-gradient(180deg, rgb(85 183 217 / 0.07), rgb(0 0 0 / 0.22));
}

.quest-panel[data-focus="cast"][data-sampler="true"] > .class-path-ribbon,
.game-shell[data-focus="cast"] .challenge-card[data-sampler="true"] > :is(
  .dragon-test-command,
  .cast-cockpit,
  .cast-meter,
  .domain-stage
) {
  display: none !important;
}

.game-shell[data-focus="cast"] .challenge-card[data-sampler="true"] {
  gap: 12px;
}

.game-shell[data-focus="cast"] .challenge-card[data-sampler="true"] > :is(.story, .hint, .feedback) {
  max-width: 58ch;
}

@media (max-width: 560px) {
  .game-shell[data-focus="cast"] .arena {
    min-height: 160px;
    max-height: 160px;
  }

  .game-shell[data-focus="cast"] .arena-director p {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .room-investigation.clue-found,
  .artifact-reveal.clue-pop {
    animation: none !important;
  }
}

/* Parent-first membership handoff v100. */
.demo-upgrade-card {
  width: min(960px, 100%);
}

.membership-flow-rail {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  list-style: none;
}

.membership-flow-rail li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgb(255 246 215 / 0.11);
  border-radius: 8px;
  color: #8e846a;
  background: rgb(0 0 0 / 0.2);
}

.membership-flow-rail li span {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 900 0.62rem "JetBrains Mono", Consolas, monospace;
}

.membership-flow-rail li b {
  overflow: hidden;
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.membership-flow-rail li.current {
  border-color: rgb(242 201 76 / 0.48);
  color: #fff0a3;
  background: rgb(242 201 76 / 0.08);
}

.membership-flow-rail li.complete {
  border-color: rgb(158 255 189 / 0.24);
  color: #9effbd;
}

.membership-flow-step {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.membership-flow-step.hidden {
  display: none;
}

.membership-flow-heading > span,
.membership-family-proof > span {
  color: #9effbd;
  font: 1000 0.62rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.membership-flow-heading h2 {
  margin-top: 5px;
}

.membership-flow-heading p {
  margin-top: 8px !important;
}

.membership-family-proof {
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border: 1px solid rgb(158 255 189 / 0.22);
  border-radius: 10px;
  background: linear-gradient(90deg, rgb(158 255 189 / 0.1), rgb(255 246 215 / 0.03));
}

.membership-family-proof b {
  color: #fff4c6;
}

.membership-family-proof small {
  color: #cfe5c7;
  line-height: 1.35;
}

.membership-family-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.8fr;
  gap: 10px;
}

.membership-family-grid label {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #d9cda9;
  font-size: 0.67rem;
  font-weight: 900;
}

.membership-family-grid input,
.membership-family-grid select {
  width: 100%;
  min-height: 45px;
  padding: 9px 11px;
  border: 1px solid rgb(255 246 215 / 0.18);
  border-radius: 8px;
  color: #fff4c6;
  background: rgb(0 0 0 / 0.35);
  font: 700 0.84rem Inter, system-ui, sans-serif;
}

.membership-family-grid option {
  color: #1b1308;
}

.membership-flow-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #d8cda9;
  font-size: 0.72rem;
  line-height: 1.42;
}

.membership-flow-consent input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  accent-color: var(--gold);
}

.membership-flow-consent a {
  color: #9ee8ff;
}

.membership-flow-feedback {
  min-height: 1.35em;
  color: #bdae83 !important;
  font-size: 0.7rem;
}

.membership-flow-feedback.error {
  color: #ffb4a7 !important;
}

.membership-flow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.membership-flow-actions .demo-upgrade-primary,
.membership-flow-actions .demo-upgrade-secondary {
  min-height: 50px;
  text-transform: none;
}

.membership-checkout-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.membership-checkout-summary > span {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid rgb(255 246 215 / 0.13);
  border-radius: 9px;
  background: rgb(0 0 0 / 0.22);
}

.membership-checkout-summary small {
  color: #a99c78;
  font: 900 0.58rem "JetBrains Mono", Consolas, monospace;
  text-transform: uppercase;
}

.membership-checkout-summary b {
  color: #fff4c6;
  font-size: 0.82rem;
}

.membership-google-button {
  min-height: 44px;
}

.membership-stripe-note {
  color: #9f9477;
  font-size: 0.65rem;
  line-height: 1.4;
}

.demo-upgrade-hero {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.demo-upgrade-hero .demo-upgrade-sigil {
  width: 86px;
  height: 86px;
}

.demo-upgrade-hero .demo-upgrade-sigil span {
  font-size: 0.86rem;
}

.demo-upgrade-hero h2 {
  max-width: 19ch;
  font-size: clamp(1.8rem, 3.6vw, 3.35rem);
}

.demo-upgrade-hero > div:last-child {
  min-width: 0;
}

.demo-week-preview,
.demo-membership-includes {
  display: grid;
  gap: 12px;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid rgb(255 246 215 / 0.15);
  border-radius: 12px;
  background:
    radial-gradient(circle at 92% 8%, rgb(242 201 76 / 0.09), transparent 32%),
    rgb(0 0 0 / 0.22);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.06);
}

.demo-week-preview-head,
.demo-membership-includes > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.demo-week-preview-head span,
.demo-membership-includes > div > span {
  display: block;
  color: #9effbd;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-week-preview h3,
.demo-membership-includes h3 {
  margin: 4px 0 0;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.05rem, 1.7vw, 1.42rem);
  line-height: 1.12;
}

.demo-week-preview-head > strong {
  padding: 8px 11px;
  border: 1px solid rgb(242 201 76 / 0.42);
  border-radius: 999px;
  color: #140d05;
  background: linear-gradient(180deg, #fff0a3, var(--gold));
  box-shadow: 0 4px 0 #070503;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
  white-space: nowrap;
}

.demo-week-chapters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.demo-week-chapters article {
  min-width: 0;
  min-height: 152px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--chapter-accent, #55b7d9) 28%, rgb(255 246 215 / 0.1));
  border-radius: 9px;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--chapter-accent, #55b7d9) 12%, transparent), transparent 34%),
    rgb(7 6 5 / 0.7);
}

.demo-week-chapters article[data-domain="math"] { --chapter-accent: #f2c94c; }
.demo-week-chapters article[data-domain="science"] { --chapter-accent: #9effbd; }
.demo-week-chapters article[data-domain="physics"] { --chapter-accent: #b7a8ff; }
.demo-week-chapters article[data-domain="engineering"] { --chapter-accent: #ffad76; }
.demo-week-chapters article[data-domain="ai"] { --chapter-accent: #ff91d6; }

.demo-week-chapters span,
.demo-week-chapters b,
.demo-week-chapters small,
.demo-week-chapters i {
  min-width: 0;
  display: block;
}

.demo-week-chapters span {
  color: var(--chapter-accent);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 0.56rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.demo-week-chapters b {
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.08;
}

.demo-week-chapters small {
  color: #cfbf94;
  font-size: 0.68rem;
  line-height: 1.3;
}

.demo-week-chapters i {
  align-self: end;
  width: max-content;
  margin-top: auto;
  padding: 3px 6px;
  border: 1px solid rgb(255 246 215 / 0.12);
  border-radius: 999px;
  color: #baa97b;
  background: rgb(0 0 0 / 0.24);
  font-size: 0.54rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.demo-membership-includes ul {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
}

.demo-membership-includes li {
  min-width: 0;
  padding: 10px 11px 10px 34px;
  position: relative;
  border: 1px solid rgb(158 255 189 / 0.14);
  border-radius: 8px;
  background: rgb(158 255 189 / 0.04);
}

.demo-membership-includes li::before {
  content: "\2713";
  position: absolute;
  top: 10px;
  left: 11px;
  color: #9effbd;
  font-weight: 1000;
}

.demo-membership-includes li b,
.demo-membership-includes li small {
  display: block;
}

.demo-membership-includes li b {
  color: #fff4c6;
  font-size: 0.78rem;
}

.demo-membership-includes li small {
  margin-top: 3px;
  color: #cbbd94;
  font-size: 0.66rem;
  line-height: 1.28;
}

.demo-upgrade-actions {
  align-items: stretch;
}

.demo-upgrade-actions .demo-upgrade-primary {
  min-width: min(100%, 300px);
  flex: 1 1 300px;
  min-height: 50px;
  font-size: 0.86rem;
  text-transform: none;
}

.demo-upgrade-actions .demo-upgrade-secondary {
  flex: 0 1 auto;
  min-height: 50px;
  text-transform: none;
}

.demo-upgrade-price-note {
  color: #bdae83 !important;
  font-size: 0.67rem;
  text-align: center;
}

@media (max-width: 760px) {
  .membership-family-grid {
    grid-template-columns: 1fr 1fr;
  }

  .membership-family-grid label:first-child {
    grid-column: 1 / -1;
  }

  .demo-week-chapters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-parent-checklist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-membership-includes ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .demo-upgrade-overlay {
    padding: 9px;
  }

  .demo-upgrade-card {
    max-height: calc(100dvh - 18px);
    gap: 11px;
    padding: 14px;
  }

  .demo-upgrade-hero {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 10px;
  }

  .demo-upgrade-hero .demo-upgrade-sigil {
    width: 62px;
    height: 62px;
  }

  .demo-upgrade-hero h2 {
    font-size: 1.52rem;
  }

  .demo-upgrade-hero #demoUpgradeLine {
    font-size: 0.72rem;
    line-height: 1.32;
  }

  .membership-flow-rail li {
    justify-content: center;
    padding: 7px;
  }

  .membership-flow-rail li b {
    display: none;
  }

  .membership-family-grid,
  .membership-checkout-summary {
    grid-template-columns: 1fr;
  }

  .membership-family-grid label:first-child {
    grid-column: auto;
  }

  .demo-week-preview,
  .demo-membership-includes {
    padding: 11px;
  }

  .demo-week-preview-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .demo-week-preview-head > strong {
    justify-self: start;
  }

  .demo-week-chapters {
    grid-template-columns: 1fr;
  }

  .demo-parent-checklist-grid {
    grid-template-columns: 1fr;
  }

  .demo-parent-checklist-grid article {
    min-height: 0;
  }

  .demo-week-chapters article {
    min-height: 0;
  }

  .demo-upgrade-actions .demo-upgrade-primary,
  .demo-upgrade-actions .demo-upgrade-secondary {
    width: 100%;
    flex-basis: 100%;
  }
}

/* Paid member arrival: one focused promise, one next action. */
.member-arrival-overlay {
  --member-green: #8df4b2;
  --member-ink: #07110c;
  position: fixed;
  inset: 0;
  z-index: 74;
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 42px);
  overflow: auto;
  background:
    radial-gradient(circle at 50% 14%, rgb(141 244 178 / 0.21), transparent 28rem),
    radial-gradient(circle at 18% 84%, rgb(242 201 76 / 0.14), transparent 25rem),
    linear-gradient(155deg, rgb(5 16 11 / 0.97), rgb(6 4 3 / 0.98));
  backdrop-filter: blur(12px);
}

.member-arrival-overlay.hidden {
  display: none;
}

body.member-arrival-open {
  overflow: hidden;
}

.member-arrival-card {
  position: relative;
  width: min(780px, 100%);
  max-height: calc(100dvh - 28px);
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 16px 22px;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(22px, 5vw, 44px);
  border: 1px solid rgb(141 244 178 / 0.56);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgb(141 244 178 / 0.045) 1px, transparent 1px),
    linear-gradient(rgb(141 244 178 / 0.045) 1px, transparent 1px),
    radial-gradient(circle at 12% 12%, rgb(141 244 178 / 0.16), transparent 23rem),
    linear-gradient(145deg, rgb(23 45 32 / 0.99), rgb(10 11 7 / 0.995) 62%);
  background-size: 32px 32px, 32px 32px, auto, auto;
  box-shadow: 0 34px 110px rgb(0 0 0 / 0.72), inset 0 0 70px rgb(141 244 178 / 0.045);
  animation: memberArrivalRise 520ms cubic-bezier(0.18, 0.86, 0.24, 1) both;
}

.member-arrival-card::before,
.member-arrival-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.member-arrival-card::before {
  inset: 10px;
  border: 1px solid rgb(242 201 76 / 0.16);
  border-radius: 10px;
}

.member-arrival-card::after {
  top: 0;
  left: 17%;
  width: 46%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--member-green), transparent);
  box-shadow: 0 0 22px var(--member-green);
}

.member-arrival-card > * {
  position: relative;
  z-index: 1;
}

.member-arrival-aura {
  position: relative;
  width: 126px;
  height: 126px;
  display: grid;
  place-items: center;
  grid-row: span 2;
}

.member-arrival-aura::before,
.member-arrival-aura::after,
.member-arrival-aura i {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgb(141 244 178 / 0.46);
  border-radius: 50%;
}

.member-arrival-aura::before {
  inset: 10px;
  border-color: rgb(242 201 76 / 0.52);
  box-shadow: 0 0 48px rgb(141 244 178 / 0.2), inset 0 0 30px rgb(141 244 178 / 0.12);
}

.member-arrival-aura::after {
  inset: 27px;
  border-radius: 12px;
  transform: rotate(45deg);
  background: linear-gradient(145deg, rgb(141 244 178 / 0.18), rgb(242 201 76 / 0.1));
}

.member-arrival-aura i:nth-child(1) { transform: scale(0.84) rotate(18deg); border-style: dashed; animation: memberSealSpin 18s linear infinite; }
.member-arrival-aura i:nth-child(2) { transform: scale(0.68) rotate(-22deg); border-color: rgb(242 201 76 / 0.44); animation: memberSealSpin 14s linear infinite reverse; }
.member-arrival-aura i:nth-child(3) { inset: 48px; background: var(--member-green); border: 0; box-shadow: 0 0 30px rgb(141 244 178 / 0.68); }

.member-arrival-aura span {
  z-index: 2;
  color: #06120b;
  font: 1000 1.18rem "JetBrains Mono", Consolas, monospace;
}

.member-arrival-copy .kicker {
  margin: 0 0 6px;
  color: var(--member-green);
}

.member-arrival-copy h2 {
  max-width: 17ch;
  margin: 0;
  color: #f8f2cf;
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 0.98;
  text-wrap: balance;
}

.member-arrival-copy > p:last-child {
  max-width: 58ch;
  margin: 12px 0 0;
  color: #cbdcc9;
  line-height: 1.45;
}

.member-arrival-value {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgb(141 244 178 / 0.18);
  border-radius: 9px;
  background: rgb(0 0 0 / 0.22);
  overflow: hidden;
}

.member-arrival-value span {
  min-width: 0;
  padding: 11px 12px;
  border-right: 1px solid rgb(141 244 178 / 0.13);
}

.member-arrival-value span:last-child { border-right: 0; }
.member-arrival-value b,
.member-arrival-value small { display: block; }
.member-arrival-value b { color: var(--member-green); font: 1000 1.35rem "JetBrains Mono", Consolas, monospace; }
.member-arrival-value small { margin-top: 2px; color: #b7cbb8; font-size: 0.64rem; }

.member-arrival-quest {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgb(242 201 76 / 0.24);
  border-radius: 10px;
  background: linear-gradient(90deg, rgb(242 201 76 / 0.08), rgb(141 244 178 / 0.07));
}

.member-arrival-seal {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(141 244 178 / 0.5);
  border-radius: 50%;
  color: var(--member-green);
  background: rgb(3 14 8 / 0.78);
  box-shadow: inset 0 0 18px rgb(141 244 178 / 0.12);
  font: 1000 1rem "JetBrains Mono", Consolas, monospace;
}

.member-arrival-quest small { color: var(--member-green); font-size: 0.61rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.member-arrival-quest h3 { margin: 3px 0; color: #fff4c6; font-size: 1.05rem; }
.member-arrival-quest p { margin: 0; color: #c9c3a2; font-size: 0.76rem; line-height: 1.35; }
.member-arrival-quest strong { padding: 7px 9px; border: 1px solid rgb(141 244 178 / 0.22); border-radius: 999px; color: #d6f8df; font-size: 0.62rem; white-space: nowrap; }

.member-arrival-track {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto;
  align-items: start;
  gap: 6px;
  padding: 2px 5px;
}

.member-arrival-track i {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #746f5a;
  font-style: normal;
}

.member-arrival-track i span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 246 215 / 0.15);
  border-radius: 50%;
  background: #0a0b08;
  font: 900 0.64rem "JetBrains Mono", Consolas, monospace;
}

.member-arrival-track i small { font-size: 0.55rem; }
.member-arrival-track i.complete { color: #eecb5e; }
.member-arrival-track i.complete span { border-color: rgb(242 201 76 / 0.56); background: rgb(242 201 76 / 0.12); }
.member-arrival-track i.current { color: var(--member-green); }
.member-arrival-track i.current span { border-color: var(--member-green); background: var(--member-green); color: var(--member-ink); box-shadow: 0 0 22px rgb(141 244 178 / 0.38); animation: memberCurrentPulse 1.8s ease-in-out infinite; }
.member-arrival-track > b { height: 1px; margin-top: 13px; background: linear-gradient(90deg, rgb(141 244 178 / 0.34), rgb(255 246 215 / 0.1)); }

.member-arrival-primary {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 54px;
  border: 1px solid #bdf8cd;
  border-radius: 9px;
  color: #07110c;
  background: linear-gradient(180deg, #baf8ce, #70d99a);
  box-shadow: 0 13px 36px rgb(73 205 126 / 0.22), inset 0 1px rgb(255 255 255 / 0.55);
  cursor: pointer;
  font: 1000 0.9rem "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.02em;
}

.member-arrival-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.member-arrival-primary:focus-visible { outline: 3px solid #fff4c6; outline-offset: 3px; }
.member-arrival-note { grid-column: 1 / -1; margin: -8px 0 0; color: #9ca99a; font-size: 0.63rem; text-align: center; }

@keyframes memberArrivalRise {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes memberSealSpin { to { transform: rotate(378deg); } }
@keyframes memberCurrentPulse { 50% { box-shadow: 0 0 34px rgb(141 244 178 / 0.66); } }

@media (max-width: 620px) {
  .member-arrival-overlay { padding: 8px; }
  .member-arrival-card {
    max-height: calc(100dvh - 16px);
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 11px 12px;
    padding: 18px 14px;
  }
  .member-arrival-aura { width: 58px; height: 58px; grid-row: auto; }
  .member-arrival-aura::before { inset: 5px; }
  .member-arrival-aura::after { inset: 14px; border-radius: 7px; }
  .member-arrival-aura i:nth-child(3) { inset: 21px; }
  .member-arrival-aura span { font-size: 0.72rem; }
  .member-arrival-copy h2 { font-size: clamp(1.65rem, 8.2vw, 2.35rem); }
  .member-arrival-copy > p:last-child { margin-top: 7px; font-size: 0.72rem; }
  .member-arrival-value { grid-column: 1 / -1; }
  .member-arrival-value span { padding: 8px; }
  .member-arrival-value b { font-size: 1.05rem; }
  .member-arrival-quest { grid-template-columns: auto minmax(0, 1fr); padding: 11px; }
  .member-arrival-quest > strong { display: none; }
  .member-arrival-seal { width: 39px; height: 39px; }
  .member-arrival-track { gap: 3px; }
  .member-arrival-track i span { width: 24px; height: 24px; }
  .member-arrival-track i small { display: none; }
  .member-arrival-track > b { margin-top: 12px; }
  .member-arrival-primary { min-height: 50px; font-size: 0.76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .member-arrival-card,
  .member-arrival-aura i,
  .member-arrival-track i.current span {
    animation: none;
  }
}

/* Week One Premium Pass: five connected scenes, one calm lesson path. */
.week-one-quest-scene {
  --chapter-accent: var(--gold);
  position: relative;
  isolation: isolate;
  min-height: 258px;
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.2fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--chapter-accent) 46%, transparent);
  border-radius: 12px;
  background: #080604;
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.11), 0 22px 48px rgb(0 0 0 / 0.28);
}

.week-one-quest-scene.hidden { display: none; }
.week-one-quest-scene[data-domain="science"] { --chapter-accent: #75d69d; }
.week-one-quest-scene[data-domain="physics"] { --chapter-accent: #75d9ff; }
.week-one-quest-scene[data-domain="engineering"] { --chapter-accent: #ef8c4c; }
.week-one-quest-scene[data-domain="ai"] { --chapter-accent: #b9a1ff; }

.week-one-scene-art {
  position: relative;
  min-height: 258px;
  overflow: hidden;
  background: #050403;
}

.week-one-scene-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 42%, #080604 100%),
    linear-gradient(0deg, rgb(0 0 0 / 0.72), transparent 58%);
  pointer-events: none;
}

.week-one-scene-art img {
  width: 100%;
  height: 100%;
  min-height: 258px;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.06);
  transform: scale(1.05);
  animation: weekOneSceneDrift 11s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate;
}

.week-one-scene-sigil {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 2;
  width: 58px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--chapter-accent) 72%, #fff 8%);
  border-radius: 50%;
  color: #fff7d6;
  background: color-mix(in srgb, var(--chapter-accent) 18%, #080604);
  box-shadow: 0 0 32px color-mix(in srgb, var(--chapter-accent) 34%, transparent), inset 0 0 0 7px rgb(0 0 0 / 0.28);
  font-family: Cinzel, Georgia, serif;
  font-size: 1.35rem;
  font-weight: 900;
  text-shadow: 0 0 14px var(--chapter-accent);
}

.week-one-scene-art > span {
  position: absolute;
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--chapter-accent);
  box-shadow: 0 0 12px var(--chapter-accent);
  opacity: 0.65;
  animation: weekOneMote 4.8s ease-in-out infinite;
}

.week-one-scene-art > span:nth-of-type(1) { left: 26%; top: 24%; animation-delay: -0.8s; }
.week-one-scene-art > span:nth-of-type(2) { left: 58%; top: 42%; animation-delay: -2.4s; }
.week-one-scene-art > span:nth-of-type(3) { left: 70%; top: 17%; animation-delay: -3.6s; }

.week-one-scene-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: clamp(20px, 3vw, 32px);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--chapter-accent) 15%, transparent), transparent 42%),
    linear-gradient(90deg, rgb(8 6 4 / 0.82), #080604 34%);
}

.week-one-scene-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.week-one-scene-heading > div { min-width: 0; }
.week-one-scene-heading span {
  display: block;
  margin-bottom: 7px;
  color: var(--chapter-accent);
  font-size: 0.67rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.week-one-scene-heading h3 {
  margin: 0;
  color: #fff4c6;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
}

.week-one-scene-heading > strong {
  flex: 0 0 auto;
  max-width: 150px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--chapter-accent) 42%, transparent);
  border-radius: 999px;
  color: #fff4c6;
  background: color-mix(in srgb, var(--chapter-accent) 12%, transparent);
  font-size: 0.66rem;
  line-height: 1.15;
  text-align: center;
}

.week-one-scene-copy > p {
  max-width: 62ch;
  margin: 0;
  color: #e1d5ae;
  font-size: 0.86rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.week-one-seal-trail {
  display: flex;
  gap: 5px;
  align-items: stretch;
}

.week-one-seal-trail > span {
  position: relative;
  min-width: 0;
  flex: 1 1 0;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 6px;
  border: 1px solid rgb(255 246 215 / 0.1);
  border-radius: 7px;
  color: #a99e80;
  background: rgb(255 255 255 / 0.025);
}

.week-one-seal-trail i {
  width: 27px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 246 215 / 0.16);
  border-radius: 50%;
  color: inherit;
  font-style: normal;
  font-weight: 1000;
}

.week-one-seal-trail b {
  min-width: 0;
  overflow: hidden;
  font-size: 0.61rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-one-seal-trail > span[data-state="restored"] {
  border-color: rgb(158 255 189 / 0.34);
  color: #d9ffd1;
  background: rgb(158 255 189 / 0.09);
}

.week-one-seal-trail > span[data-state="current"] {
  border-color: color-mix(in srgb, var(--chapter-accent) 60%, transparent);
  color: #fff4c6;
  background: color-mix(in srgb, var(--chapter-accent) 13%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--chapter-accent) 13%, transparent);
}

.week-one-seal-trail > span[data-state="current"] i {
  animation: weekOneCurrentSeal 2.2s ease-in-out infinite;
}

.week-one-scene-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgb(255 246 215 / 0.1);
}

.week-one-scene-proof span { min-width: 0; display: grid; gap: 3px; }
.week-one-scene-proof small { color: #bdb18e; font-size: 0.58rem; font-weight: 900; text-transform: uppercase; }
.week-one-scene-proof b { color: #f4e8c1; font-size: 0.72rem; line-height: 1.25; }

.week-one-quest-scene[data-state="restored"] {
  border-color: rgb(158 255 189 / 0.52);
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.13), 0 22px 48px rgb(0 0 0 / 0.28), 0 0 36px rgb(158 255 189 / 0.09);
}

/* Week Two Premium Pass: five field artifacts become one systems portfolio. */
.week-one-quest-scene[data-week="two"] {
  --chapter-accent: #70d9eb;
  border-color: color-mix(in srgb, var(--chapter-accent) 58%, transparent);
  background: #031014;
  box-shadow: inset 0 1px 0 rgb(212 250 255 / 0.13), 0 24px 54px rgb(0 6 9 / 0.42);
}

.week-one-quest-scene[data-week="two"][data-domain="science"] { --chapter-accent: #76e2b3; }
.week-one-quest-scene[data-week="two"][data-domain="physics"] { --chapter-accent: #7bbcff; }
.week-one-quest-scene[data-week="two"][data-domain="engineering"] { --chapter-accent: #f0a160; }
.week-one-quest-scene[data-week="two"][data-domain="ai"] { --chapter-accent: #bca7ff; }

.week-one-quest-scene[data-week="two"] .week-one-scene-art::after {
  background:
    linear-gradient(90deg, transparent 38%, #031014 100%),
    linear-gradient(0deg, rgb(0 8 12 / 0.76), transparent 58%);
}

.week-one-quest-scene[data-week="two"] .week-one-scene-copy {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--chapter-accent) 17%, transparent), transparent 43%),
    linear-gradient(90deg, rgb(3 16 20 / 0.82), #031014 34%);
}

.week-one-quest-scene[data-week="two"] .week-one-seal-trail > span {
  border-radius: 5px;
  background: rgb(191 243 255 / 0.035);
}

.week-one-quest-scene[data-week="two"] .week-one-seal-trail > span[data-state="restored"] {
  border-color: rgb(112 217 235 / 0.42);
  color: #d7fbff;
  background: rgb(112 217 235 / 0.11);
}

.week-one-quest-scene[data-week="two"][data-state="restored"] {
  border-color: color-mix(in srgb, var(--chapter-accent) 68%, transparent);
  box-shadow: inset 0 1px 0 rgb(212 250 255 / 0.15), 0 24px 54px rgb(0 6 9 / 0.42), 0 0 38px color-mix(in srgb, var(--chapter-accent) 12%, transparent);
}

/* Week Three Premium Pass: five subjects assemble one visible Skybridge. */
.week-one-quest-scene[data-week="three"] {
  --chapter-accent: #f2c94c;
  border-color: color-mix(in srgb, var(--chapter-accent) 62%, transparent);
  background: #0b0a12;
  box-shadow: inset 0 1px 0 rgb(255 242 184 / 0.14), 0 26px 58px rgb(0 0 0 / 0.46);
}

.week-one-quest-scene[data-week="three"][data-domain="engineering"] { --chapter-accent: #f09a56; }
.week-one-quest-scene[data-week="three"][data-domain="science"] { --chapter-accent: #8fe5a5; }
.week-one-quest-scene[data-week="three"][data-domain="physics"] { --chapter-accent: #73d9ff; }
.week-one-quest-scene[data-week="three"][data-domain="ai"] { --chapter-accent: #b9a2ff; }

.week-one-quest-scene[data-week="three"] .week-one-scene-art::after {
  background:
    linear-gradient(90deg, transparent 34%, #0b0a12 100%),
    linear-gradient(0deg, rgb(4 4 8 / 0.78), transparent 58%);
}

.week-one-quest-scene[data-week="three"] .week-one-scene-copy {
  background:
    radial-gradient(circle at 94% 4%, color-mix(in srgb, var(--chapter-accent) 18%, transparent), transparent 42%),
    linear-gradient(90deg, rgb(11 10 18 / 0.8), #0b0a12 34%);
}

.week-one-quest-scene[data-week="three"] .week-one-seal-trail {
  position: relative;
}

.week-one-quest-scene[data-week="three"] .week-one-seal-trail::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--chapter-accent) 30%, transparent);
}

.week-one-quest-scene[data-week="three"] .week-one-seal-trail > span {
  border-radius: 4px;
  background: #0e0d16;
}

.week-one-quest-scene[data-week="three"] .week-one-seal-trail > span[data-state="restored"] {
  border-color: color-mix(in srgb, var(--chapter-accent) 56%, transparent);
  color: #fff4c6;
  background: color-mix(in srgb, var(--chapter-accent) 12%, #0e0d16);
}

.week-one-quest-scene[data-week="three"][data-state="restored"] {
  border-color: color-mix(in srgb, var(--chapter-accent) 74%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 242 184 / 0.16), 0 26px 58px rgb(0 0 0 / 0.46), 0 0 42px color-mix(in srgb, var(--chapter-accent) 13%, transparent);
}

/* Week Four Premium Pass: five guild trials assemble one Crystal Lift invention. */
.week-one-quest-scene[data-week="four"] {
  --chapter-accent: #ffd071;
  border-color: color-mix(in srgb, var(--chapter-accent) 64%, transparent);
  background: #10091a;
  box-shadow: inset 0 1px 0 rgb(255 228 177 / 0.14), 0 28px 62px rgb(0 0 0 / 0.5);
}

.week-one-quest-scene[data-week="four"][data-domain="engineering"] { --chapter-accent: #ff9e62; }
.week-one-quest-scene[data-week="four"][data-domain="science"] { --chapter-accent: #73e2bf; }
.week-one-quest-scene[data-week="four"][data-domain="physics"] { --chapter-accent: #74c8ff; }
.week-one-quest-scene[data-week="four"][data-domain="ai"] { --chapter-accent: #d6a5ff; }

.week-one-quest-scene[data-week="four"] .week-one-scene-art::after {
  background:
    linear-gradient(90deg, transparent 32%, #10091a 100%),
    linear-gradient(0deg, rgb(8 3 15 / 0.82), transparent 56%);
}

.week-one-quest-scene[data-week="four"] .week-one-scene-copy {
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--chapter-accent) 21%, transparent), transparent 40%),
    linear-gradient(90deg, rgb(16 9 26 / 0.82), #10091a 36%);
}

.week-one-quest-scene[data-week="four"] .week-one-seal-trail > span {
  border-radius: 8px 3px 8px 3px;
  background: rgb(255 226 174 / 0.035);
}

.week-one-quest-scene[data-week="four"] .week-one-seal-trail > span[data-state="restored"] {
  border-color: color-mix(in srgb, var(--chapter-accent) 62%, transparent);
  color: #fff2cf;
  background: color-mix(in srgb, var(--chapter-accent) 14%, #120b1b);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--chapter-accent) 8%, transparent);
}

.week-one-quest-scene[data-week="four"][data-state="restored"] {
  border-color: color-mix(in srgb, var(--chapter-accent) 78%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 228 177 / 0.18), 0 28px 62px rgb(0 0 0 / 0.5), 0 0 46px color-mix(in srgb, var(--chapter-accent) 16%, transparent);
}

/* Week Five Capstone Pass: every subject seals one key in the Aurora Gate. */
.week-one-quest-scene[data-week="five"] {
  --chapter-accent: #ffe49a;
  border-color: color-mix(in srgb, var(--chapter-accent) 70%, transparent);
  background: #0a0c13;
  box-shadow: inset 0 1px 0 rgb(255 244 205 / 0.17), 0 30px 68px rgb(0 0 0 / 0.52), 0 0 42px rgb(255 207 92 / 0.08);
}

.week-one-quest-scene[data-week="five"][data-domain="science"] { --chapter-accent: #79e0c1; }
.week-one-quest-scene[data-week="five"][data-domain="physics"] { --chapter-accent: #74caff; }
.week-one-quest-scene[data-week="five"][data-domain="engineering"] { --chapter-accent: #ffac68; }
.week-one-quest-scene[data-week="five"][data-domain="ai"] { --chapter-accent: #d8b1ff; }

.week-one-quest-scene[data-week="five"] .week-one-scene-art::after {
  background:
    linear-gradient(90deg, transparent 30%, #0a0c13 100%),
    linear-gradient(0deg, rgb(3 5 10 / 0.84), transparent 55%);
}

.week-one-quest-scene[data-week="five"] .week-one-scene-copy {
  background:
    radial-gradient(circle at 92% 7%, color-mix(in srgb, var(--chapter-accent) 23%, transparent), transparent 39%),
    linear-gradient(90deg, rgb(10 12 19 / 0.82), #0a0c13 37%);
}

.week-one-quest-scene[data-week="five"] .week-one-seal-trail {
  position: relative;
}

.week-one-quest-scene[data-week="five"] .week-one-seal-trail::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--chapter-accent) 48%, transparent), transparent);
}

.week-one-quest-scene[data-week="five"] .week-one-seal-trail > span {
  border-radius: 50% 50% 8px 8px;
  background: #0d111a;
}

.week-one-quest-scene[data-week="five"] .week-one-seal-trail > span[data-state="restored"] {
  border-color: color-mix(in srgb, var(--chapter-accent) 72%, transparent);
  color: #fff7d8;
  background: color-mix(in srgb, var(--chapter-accent) 16%, #0d111a);
  box-shadow: 0 0 18px color-mix(in srgb, var(--chapter-accent) 14%, transparent);
}

.week-one-quest-scene[data-week="five"][data-state="restored"] {
  border-color: color-mix(in srgb, var(--chapter-accent) 82%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 244 205 / 0.2), 0 30px 68px rgb(0 0 0 / 0.52), 0 0 52px color-mix(in srgb, var(--chapter-accent) 18%, transparent);
}

.first-five-guide[data-week="three"] { --first-five-accent: #f2c94c; }
.first-proof-moment[data-week="three"] {
  border-color: color-mix(in srgb, var(--proof-accent) 66%, transparent);
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--proof-accent) 18%, transparent), transparent 38%),
    linear-gradient(145deg, rgb(18 14 7 / 0.98), rgb(6 6 10 / 0.99));
}

.lesson-cinematic-stage[data-week="three"] {
  --stage-accent: #f2c94c;
  border-color: color-mix(in srgb, var(--stage-accent) 50%, transparent);
}

.first-five-guide[data-week="four"] { --first-five-accent: #ffd071; }
.first-proof-moment[data-week="four"] {
  border-color: color-mix(in srgb, var(--proof-accent) 70%, transparent);
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--proof-accent) 21%, transparent), transparent 38%),
    linear-gradient(145deg, rgb(24 11 31 / 0.98), rgb(5 7 12 / 0.99));
}

.lesson-cinematic-stage[data-week="four"] {
  --stage-accent: #ffd071;
  border-color: color-mix(in srgb, var(--stage-accent) 56%, transparent);
  box-shadow: 0 22px 54px rgb(0 0 0 / 0.38), 0 0 34px rgb(255 208 113 / 0.08);
}

.first-five-guide[data-week="five"] { --first-five-accent: #ffe49a; }
.first-proof-moment[data-week="five"] {
  border-color: color-mix(in srgb, var(--proof-accent) 74%, transparent);
  background:
    radial-gradient(circle at 14% 0%, rgb(255 228 154 / 0.18), transparent 38%),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--proof-accent) 14%, transparent), transparent 34%),
    linear-gradient(145deg, rgb(28 20 8 / 0.99), rgb(5 7 12 / 0.99));
}

.lesson-cinematic-stage[data-week="five"] {
  --stage-accent: #ffe49a;
  border-color: color-mix(in srgb, var(--stage-accent) 62%, transparent);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.42), 0 0 42px rgb(255 228 154 / 0.1);
}

.week-three-bridge-grid {
  position: relative;
  z-index: 1;
  gap: 6px;
}

.week-three-bridge-grid .week-one-certificate-card {
  position: relative;
  min-height: 174px;
  align-content: start;
  gap: 6px;
  overflow: visible;
  border-radius: 5px;
  background:
    linear-gradient(155deg, rgb(255 238 171 / 0.08), transparent 58%),
    rgb(8 7 8 / 0.68);
}

.week-three-bridge-grid .week-one-certificate-card:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 42px;
  right: -8px;
  width: 10px;
  height: 2px;
  background: rgb(242 201 76 / 0.38);
  box-shadow: 0 0 8px rgb(242 201 76 / 0.22);
}

.skybridge-part-mark {
  position: relative;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 2px;
  overflow: hidden;
  border: 1px solid rgb(242 201 76 / 0.2);
  border-radius: 4px;
  background:
    linear-gradient(0deg, rgb(242 201 76 / 0.1), transparent 52%),
    rgb(3 5 8 / 0.62);
}

.skybridge-part-mark::before,
.skybridge-part-mark::after,
.skybridge-part-mark span {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 9px;
  height: 2px;
  background: rgb(242 201 76 / 0.24);
  transform-origin: center;
}

.skybridge-part-mark::before { transform: rotate(15deg); }
.skybridge-part-mark::after { transform: rotate(-15deg); }
.skybridge-part-mark span { bottom: 17px; opacity: 0.5; }

.skybridge-part-mark i {
  position: relative;
  z-index: 2;
  width: 36px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(242 201 76 / 0.42);
  border-radius: 50%;
  color: #fff1b5;
  background: #121017;
  box-shadow: 0 0 18px rgb(242 201 76 / 0.14);
  font-style: normal;
  font-weight: 1000;
}

.week-three-bridge-grid .week-one-certificate-card.complete .skybridge-part-mark {
  border-color: rgb(142 229 165 / 0.46);
  background:
    radial-gradient(circle, rgb(142 229 165 / 0.18), transparent 60%),
    rgb(3 9 7 / 0.76);
}

.week-three-bridge-grid .week-one-certificate-card.complete .skybridge-part-mark i {
  border-color: rgb(142 229 165 / 0.62);
  color: #d9ffd1;
  box-shadow: 0 0 22px rgb(142 229 165 / 0.22);
}

.week-three-bridge-grid .week-one-certificate-card.current .skybridge-part-mark i {
  animation: weekOneCurrentSeal 2.2s ease-in-out infinite;
}

.first-five-guide[data-week="two"] { --first-five-accent: #70d9eb; }
.first-proof-moment[data-week="two"] {
  border-color: color-mix(in srgb, var(--proof-accent) 62%, transparent);
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--proof-accent) 16%, transparent), transparent 36%),
    linear-gradient(145deg, rgb(3 20 25 / 0.98), rgb(3 8 11 / 0.99));
}

.first-proof-moment[data-domain="math"] { --proof-accent: #f4ca59; }
.first-proof-moment[data-domain="science"] { --proof-accent: #8de6ac; }
.first-proof-moment[data-domain="physics"] { --proof-accent: #85deff; }
.first-proof-moment[data-domain="engineering"] { --proof-accent: #f19a5f; }
.first-proof-moment[data-domain="ai"] { --proof-accent: #c1adff; }
.first-proof-moment { border-color: color-mix(in srgb, var(--proof-accent) 52%, transparent); }
.first-proof-seal { border-color: color-mix(in srgb, var(--proof-accent) 52%, transparent); box-shadow: 0 0 38px color-mix(in srgb, var(--proof-accent) 22%, transparent); }
.first-proof-seal span::after { content: attr(data-symbol); color: var(--proof-accent); }
.first-proof-moment.seal-restored .first-proof-seal { animation: weekOneSealRestore 900ms cubic-bezier(0.22, 1, 0.36, 1); }

.transition-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.transition-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(8 6 4 / 0.96) 0%, rgb(8 6 4 / 0.7) 48%, rgb(8 6 4 / 0.3) 100%);
}

.transition-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.15) contrast(1.08);
  transform: scale(1.08);
}

.transition-arrival > :not(.transition-art) { position: relative; z-index: 1; }
.room-transition.show .transition-art img { animation: transitionArtPush 1500ms cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes weekOneSceneDrift {
  from { transform: scale(1.05) translate3d(-1%, -0.5%, 0); }
  to { transform: scale(1.1) translate3d(1%, 0.8%, 0); }
}

@keyframes weekOneMote {
  0%, 100% { transform: translate3d(0, 8px, 0) scale(0.7); opacity: 0.28; }
  50% { transform: translate3d(4px, -14px, 0) scale(1); opacity: 0.78; }
}

@keyframes weekOneCurrentSeal {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 transparent; }
  50% { transform: scale(1.08); box-shadow: 0 0 16px color-mix(in srgb, var(--chapter-accent) 34%, transparent); }
}

@keyframes weekOneSealRestore {
  0% { transform: scale(0.72) rotate(-10deg); filter: brightness(1); }
  46% { transform: scale(1.18) rotate(4deg); filter: brightness(1.55); }
  100% { transform: scale(1) rotate(0); filter: brightness(1); }
}

@keyframes transitionArtPush {
  from { transform: scale(1.18); opacity: 0.2; }
  to { transform: scale(1.03); opacity: 1; }
}

@media (max-width: 760px) {
  .week-one-quest-scene { grid-template-columns: 1fr; min-height: 0; }
  .week-one-scene-art { min-height: 176px; }
  .week-one-scene-art img { min-height: 176px; }
  .week-one-scene-art::after { background: linear-gradient(0deg, #080604 0%, rgb(8 6 4 / 0.1) 70%); }
  .week-one-scene-copy { margin-top: -1px; padding: 17px 14px 15px; background: #080604; }
  .week-one-scene-heading { display: grid; gap: 10px; }
  .week-one-scene-heading > strong { max-width: none; justify-self: start; }
  .week-one-seal-trail b { display: none; }
  .week-one-seal-trail > span { grid-template-columns: 1fr; place-items: center; padding: 5px; }
  .week-one-scene-proof { grid-template-columns: 1fr; gap: 8px; }
  .transition-arrival { padding-top: 108px; }
  .systems-portfolio-evidence {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }
  .week-one-quest-scene[data-week="three"] .week-one-scene-art::after { background: linear-gradient(0deg, #0b0a12 0%, rgb(11 10 18 / 0.08) 72%); }
  .week-one-quest-scene[data-week="three"] .week-one-scene-copy { background: #0b0a12; }
  .week-three-bridge-blueprint,
  .week-three-bridge-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }
  .week-three-bridge-grid .week-one-certificate-card { min-height: 0; grid-template-columns: 72px minmax(0, 1fr); }
  .week-three-bridge-grid .skybridge-part-mark { grid-row: 1 / span 4; height: 100%; min-height: 86px; margin: 0; }
  .week-three-bridge-grid .week-one-certificate-card:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -8px;
    left: 43px;
    width: 2px;
    height: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .week-one-scene-art img,
  .week-one-scene-art > span,
  .week-one-seal-trail > span[data-state="current"] i,
  .first-proof-moment.seal-restored .first-proof-seal,
  .room-transition.show .transition-art img {
    animation: none;
  }
  .week-three-bridge-grid .week-one-certificate-card.current .skybridge-part-mark i { animation: none; }
}

/* v109 device polish: readable lesson type, dependable touch targets, zero scene overflow. */
.lesson-scroll,
.lesson-scroll > *,
.week-one-quest-scene,
.lesson-cinematic-stage,
.first-proof-moment {
  min-width: 0;
  max-width: 100%;
}

.week-one-scene-art img,
.lesson-cinematic-stage-art > img,
.lesson-cinematic-strip > img {
  display: block;
}

.week-one-scene-copy > p,
.lesson-cinematic-stage-copy > p,
.first-proof-copy > p {
  text-wrap: pretty;
}

.lesson-stage-actions button:focus-visible,
.first-proof-actions button:focus-visible,
.first-five-actions button:focus-visible,
.classroom-compass-main button:focus-visible {
  outline: 3px solid #fff4c6;
  outline-offset: 3px;
}

@media (min-width: 761px) and (max-width: 1024px) {
  .week-one-quest-scene {
    grid-template-columns: minmax(210px, 0.88fr) minmax(0, 1.12fr);
  }

  .week-one-scene-copy {
    gap: 12px;
    padding: 22px;
  }

  .week-one-seal-trail b {
    font-size: 0.68rem;
  }

  .lesson-cinematic-stage {
    grid-template-columns: minmax(210px, 0.9fr) minmax(0, 1.1fr);
  }
}

@media (max-width: 760px) {
  .lesson-scroll {
    gap: 12px;
    overflow: clip;
  }

  .week-one-quest-scene {
    border-radius: 10px;
  }

  .week-one-scene-art,
  .week-one-scene-art img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .week-one-scene-art img {
    height: 100%;
  }

  .week-one-scene-sigil {
    left: 14px;
    bottom: 12px;
    width: 50px;
    font-size: 1.15rem;
  }

  .week-one-scene-copy {
    gap: 12px;
    padding: 18px 15px 16px;
  }

  .week-one-scene-heading {
    gap: 8px;
  }

  .week-one-scene-heading span {
    margin-bottom: 5px;
    font-size: 0.75rem;
    letter-spacing: 0.055em;
  }

  .week-one-scene-heading h3 {
    font-size: 1.5rem;
    line-height: 1.08;
  }

  .week-one-scene-heading > strong {
    min-height: 34px;
    display: grid;
    place-items: center;
    padding: 8px 10px;
    font-size: 0.76rem;
  }

  .week-one-scene-copy > p {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .week-one-seal-trail {
    gap: 7px;
  }

  .week-one-seal-trail > span {
    min-height: 42px;
    padding: 5px;
  }

  .week-one-seal-trail i {
    width: 31px;
    font-size: 0.78rem;
  }

  .week-one-scene-proof {
    gap: 11px;
    padding-top: 13px;
  }

  .week-one-scene-proof span {
    gap: 5px;
  }

  .week-one-scene-proof small {
    font-size: 0.72rem;
    letter-spacing: 0.045em;
  }

  .week-one-scene-proof b {
    font-size: 0.9rem;
    line-height: 1.38;
  }

  .lesson-cinematic-stage-copy h4 {
    font-size: 1.34rem;
    line-height: 1.1;
  }

  .lesson-cinematic-stage-copy p {
    font-size: 0.92rem;
    line-height: 1.48;
  }

  .lesson-stage-path-step {
    min-height: 44px;
  }

  .lesson-stage-path-step b {
    font-size: 0.6rem;
    letter-spacing: 0.025em;
  }

  .lesson-stage-step,
  .lesson-stage-actions button {
    min-height: 48px;
  }

  .lesson-stage-step b {
    font-size: 0.88rem;
  }

  .lesson-stage-step small {
    font-size: 0.76rem;
  }

  .lesson-stage-mentor span {
    font-size: 0.67rem;
    letter-spacing: 0.05em;
  }

  .lesson-stage-mentor b {
    font-size: 0.84rem;
    line-height: 1.15;
  }

  .first-proof-copy {
    gap: 12px;
  }

  .first-proof-copy h3 {
    font-size: 1.42rem;
    line-height: 1.1;
  }

  .first-proof-copy > p {
    font-size: 0.92rem;
    line-height: 1.48;
  }

  .first-proof-status {
    border-radius: 10px;
  }

  .first-proof-status b,
  .first-proof-status small {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .first-proof-grid span {
    font-size: 0.7rem;
    letter-spacing: 0.045em;
  }

  .first-proof-grid b {
    font-size: 0.94rem;
  }

  .first-proof-grid small {
    font-size: 0.82rem;
    line-height: 1.38;
  }

  .first-proof-actions button,
  .first-five-actions button,
  .classroom-compass-main button,
  .tomorrow-teaser > button,
  .lesson-recap-actions button {
    min-height: 48px;
    font-size: 0.76rem;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }
}

@media (max-width: 520px) {
  .week-four-guild-grid,
  .week-five-capstone-grid {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
    overflow: visible;
  }

  .lesson-stage-actions,
  .first-proof-actions,
  .first-five-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .lesson-stage-actions .lesson-stage-exit,
  .first-proof-actions button,
  .first-five-actions button {
    width: 100%;
    min-width: 0;
  }

  .week-one-scene-heading h3 {
    font-size: 1.36rem;
  }

  .week-one-seal-trail {
    gap: 5px;
  }

  .week-one-seal-trail > span {
    min-height: 40px;
  }

  .first-proof-moment {
    padding: 13px;
  }

  .first-proof-copy {
    padding-right: 0;
    padding-top: 60px;
  }

  .first-proof-seal {
    top: 13px;
    right: auto;
    left: 13px;
    width: 54px;
  }

  .first-proof-status {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .first-proof-status small {
    grid-column: 1 / -1;
  }
}

@media (hover: none) and (pointer: coarse) {
  .lesson-stage-actions button,
  .lesson-stage-step:not(.locked),
  .first-proof-actions button,
  .first-five-actions button,
  .classroom-compass-main button,
  .tomorrow-teaser > button,
  .lesson-recap summary,
  .lesson-recap-actions button {
    min-height: 48px;
  }
}

@supports (-webkit-touch-callout: none) {
  .intro-overlay,
  .academy-home-overlay,
  .certificate-overlay {
    min-height: -webkit-fill-available;
  }
}

/* Science experiment loop v117: predict, test, observe, then classify. */
.alchemy-experiment-card {
  min-height: 274px;
  cursor: default;
}

.alchemy-experiment-card:hover {
  transform: none;
}

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

.experiment-step {
  color: #9effbd;
  font: 900 0.65rem/1.1 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.alchemy-experiment-card.predicted {
  border-color: rgb(242 201 76 / 0.48);
  background:
    radial-gradient(circle at 88% 12%, rgb(242 201 76 / 0.13), transparent 38%),
    #0b0905;
}

.alchemy-experiment-card.observed {
  border-color: rgb(85 183 217 / 0.52);
  background:
    radial-gradient(circle at 88% 12%, rgb(85 183 217 / 0.14), transparent 38%),
    #061016;
}

.alchemy-prediction-controls,
.alchemy-classify-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: auto;
}

.alchemy-prediction-controls button,
.alchemy-classify-controls button,
.alchemy-run-test {
  min-height: 42px;
  padding: 8px 9px;
  border-radius: 8px;
  font: 900 0.68rem/1.15 "JetBrains Mono", Consolas, monospace;
  cursor: pointer;
  transition: transform 120ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.alchemy-prediction-controls button,
.alchemy-classify-controls button {
  border: 1px solid rgb(158 255 189 / 0.22);
  color: #d7dfdc;
  background: rgb(0 0 0 / 0.3);
}

.alchemy-prediction-controls button:first-child[aria-pressed="true"],
.alchemy-classify-controls button:first-child[aria-pressed="true"] {
  border-color: rgb(85 183 217 / 0.76);
  color: #dff7ff;
  background: rgb(41 131 173 / 0.22);
  box-shadow: inset 0 0 0 1px rgb(85 183 217 / 0.16), 0 0 16px rgb(85 183 217 / 0.12);
}

.alchemy-prediction-controls button:last-child[aria-pressed="true"],
.alchemy-classify-controls button:last-child[aria-pressed="true"] {
  border-color: rgb(158 255 189 / 0.76);
  color: #e2ffea;
  background: rgb(63 154 98 / 0.22);
  box-shadow: inset 0 0 0 1px rgb(158 255 189 / 0.14), 0 0 16px rgb(158 255 189 / 0.12);
}

.alchemy-run-test {
  width: 100%;
  border: 1px solid rgb(242 201 76 / 0.6);
  color: #171006;
  background: linear-gradient(180deg, #fff0ad, #d7aa39);
  box-shadow: 0 3px 0 #6c4812, 0 0 18px rgb(242 201 76 / 0.1);
}

.alchemy-run-test:disabled {
  border-color: rgb(255 246 215 / 0.14);
  color: #736b59;
  background: #0d0a07;
  box-shadow: none;
  cursor: not-allowed;
}

.alchemy-prediction-controls button:not(:disabled):active,
.alchemy-classify-controls button:not(:disabled):active,
.alchemy-run-test:not(:disabled):active {
  transform: translateY(2px);
}

.alchemy-prediction-controls button:focus-visible,
.alchemy-classify-controls button:focus-visible,
.alchemy-run-test:focus-visible {
  outline: 3px solid #fff2b5;
  outline-offset: 2px;
}

.alchemy-experiment-stage {
  position: relative;
  min-height: 244px;
  overflow: hidden;
  border: 1px solid rgb(158 255 189 / 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 33%, rgb(85 183 217 / 0.13), transparent 32%),
    linear-gradient(180deg, rgb(5 24 15 / 0.94), rgb(5 8 6 / 0.98));
  box-shadow: inset 0 1px 0 rgb(255 246 215 / 0.08);
}

.experiment-hood {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 156px;
  height: 100px;
  transform: translateX(-50%);
  border: 1px solid rgb(158 255 189 / 0.26);
  border-bottom-color: rgb(242 201 76 / 0.28);
  border-radius: 58px 58px 10px 10px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.04), rgb(0 0 0 / 0.18));
  box-shadow: inset 0 0 28px rgb(158 255 189 / 0.05), 0 12px 30px rgb(0 0 0 / 0.22);
}

.experiment-surface {
  position: absolute;
  right: 18px;
  bottom: 15px;
  left: 18px;
  height: 8px;
  border-radius: 50%;
  background: #79633f;
  box-shadow: 0 3px 0 #302416, 0 0 14px rgb(242 201 76 / 0.1);
}

.experiment-object,
.experiment-effect {
  position: absolute;
  display: block;
}

.alchemy-experiment-stage.ice .experiment-object {
  left: 62px;
  bottom: 29px;
  width: 32px;
  height: 32px;
  transform: rotate(45deg);
  border: 1px solid #dff7ff;
  border-radius: 7px;
  background: linear-gradient(135deg, #e8fbff, #66bddb 52%, #d9f7ff);
  box-shadow: inset 0 0 10px rgb(255 255 255 / 0.7), 0 0 20px rgb(85 183 217 / 0.38);
}

.alchemy-experiment-stage.ice.observed .experiment-object,
.alchemy-experiment-stage.ice.complete .experiment-object {
  animation: academyIceMelt 620ms ease-out both;
}

.alchemy-experiment-stage.wood .experiment-object {
  left: 68px;
  bottom: 25px;
  width: 20px;
  height: 50px;
  transform: rotate(9deg);
  border-radius: 5px;
  background: repeating-linear-gradient(90deg, #7a4724 0 4px, #a86832 4px 7px);
  box-shadow: 0 4px 9px rgb(0 0 0 / 0.38);
}

.alchemy-experiment-stage.wood.observed .experiment-object,
.alchemy-experiment-stage.wood.complete .experiment-object {
  height: 17px;
  background: #42352d;
  box-shadow: 0 0 16px rgb(255 119 48 / 0.18);
}

.alchemy-experiment-stage.wood.observed .effect-one,
.alchemy-experiment-stage.wood.complete .effect-one {
  left: 62px;
  bottom: 43px;
  width: 34px;
  height: 46px;
  border-radius: 48% 52% 44% 56%;
  background: radial-gradient(circle at 50% 72%, #fff2a6 0 18%, #ff9b39 20% 55%, #c94422 58% 76%, transparent 78%);
  filter: drop-shadow(0 0 10px rgb(255 130 50 / 0.45));
  animation: academyFlame 520ms ease-in-out infinite alternate;
}

.alchemy-experiment-stage.wood.observed .effect-two,
.alchemy-experiment-stage.wood.complete .effect-two {
  left: 80px;
  top: 5px;
  width: 28px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(196 206 204 / 0.35), transparent 68%);
  animation: academySmokeRise 1.2s ease-out infinite;
}

.alchemy-experiment-stage.paper .experiment-object {
  left: 52px;
  bottom: 27px;
  width: 54px;
  height: 44px;
  border: 1px solid #e8debf;
  border-radius: 3px;
  background: repeating-linear-gradient(180deg, #fff8dd 0 8px, #d9cda9 9px 10px);
  box-shadow: 0 5px 11px rgb(0 0 0 / 0.35);
  transform-origin: left center;
}

.alchemy-experiment-stage.paper.observed .experiment-object,
.alchemy-experiment-stage.paper.complete .experiment-object {
  transform: perspective(90px) rotateY(-58deg) skewY(-4deg);
  box-shadow: 7px 4px 10px rgb(0 0 0 / 0.34);
  animation: academyPaperFold 540ms ease-out both;
}

.experiment-stage-copy {
  position: absolute;
  top: 126px;
  right: 14px;
  left: 14px;
  display: grid;
  gap: 3px;
  text-align: center;
}

.experiment-stage-copy span {
  color: #9effbd;
  font: 900 0.62rem/1.1 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.experiment-stage-copy b {
  color: #fff8d8;
  font-family: Cinzel, Georgia, serif;
  font-size: 0.92rem;
}

.experiment-stage-copy small {
  min-height: 31px;
  color: #d9ead0;
  font-size: 0.69rem;
  line-height: 1.28;
}

.alchemy-experiment-stage .alchemy-progress {
  bottom: 12px;
}

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

.alchemy-ledger-row.predicted .alchemy-ledger-status {
  color: #ffe79a;
  border-color: rgb(242 201 76 / 0.42);
}

.alchemy-ledger-row.tested:not(.physical):not(.chemical) .alchemy-ledger-status {
  color: #9ee8ff;
  border-color: rgb(85 183 217 / 0.42);
}

@keyframes academyIceMelt {
  0% { transform: rotate(45deg) scale(1); border-radius: 7px; }
  100% { width: 58px; height: 12px; transform: translate(-13px, 7px) rotate(0deg) scaleY(0.65); border-radius: 50%; opacity: 0.86; }
}

@keyframes academyFlame {
  from { transform: scale(0.94) rotate(-2deg); }
  to { transform: scale(1.06) rotate(2deg); }
}

@keyframes academySmokeRise {
  from { opacity: 0.18; transform: translate(0, 16px) scale(0.7); }
  to { opacity: 0.58; transform: translate(8px, -16px) scale(1.2); }
}

@keyframes academyPaperFold {
  from { transform: perspective(90px) rotateY(0deg); }
  to { transform: perspective(90px) rotateY(-58deg) skewY(-4deg); }
}

@media (max-width: 760px) {
  .experiment-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .alchemy-prediction-controls,
  .alchemy-classify-controls {
    grid-template-columns: 1fr;
  }

  .alchemy-prediction-controls button,
  .alchemy-classify-controls button,
  .alchemy-run-test,
  .alchemy-reset-button {
    min-height: 48px;
  }

  .alchemy-experiment-card {
    min-height: 334px;
  }

  .experiment-metrics {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alchemy-prediction-controls button,
  .alchemy-classify-controls button,
  .alchemy-run-test,
  .alchemy-experiment-stage .experiment-object,
  .alchemy-experiment-stage .experiment-effect {
    animation: none !important;
    transition: none !important;
  }

  .alchemy-experiment-stage.ice.observed .experiment-object,
  .alchemy-experiment-stage.ice.complete .experiment-object {
    width: 58px;
    height: 12px;
    transform: translate(-13px, 7px) rotate(0deg) scaleY(0.65);
    border-radius: 50%;
    opacity: 0.86;
  }
}


/* Week Five capstone: inspectable AI safety case */
.ai-oracle-lab[data-mode="explainability-safety-case"] {
  --explain-violet: #a98cff;
  --explain-cyan: #71e5ff;
  --explain-amber: #ffc86b;
}

.ai-oracle-lab[data-mode="explainability-safety-case"] .oracle-tiles {
  display: grid;
  gap: 14px;
}

.explain-step,
.explain-decision,
.explain-evidence,
.explain-history {
  border: 1px solid rgba(169, 140, 255, 0.28);
  background: linear-gradient(145deg, rgba(19, 20, 43, 0.96), rgba(10, 14, 29, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 14px 32px rgba(0, 0, 0, 0.18);
}

.explain-step {
  display: grid;
  gap: 12px;
  padding: 15px;
  border-radius: 16px;
}

.explain-step.locked {
  opacity: 0.52;
}

.explain-step > div:first-child > span,
.explain-decision > span,
.explain-evidence > span,
.explain-history-head > span,
.explain-trial > span {
  color: var(--explain-cyan);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.explain-step h4 {
  margin: 4px 0 2px;
  color: #f8f5ff;
  font-size: clamp(0.96rem, 2vw, 1.12rem);
}

.explain-step small,
.explain-decision small,
.explain-evidence small,
.explain-trial small {
  color: rgba(233, 238, 255, 0.72);
  line-height: 1.45;
}

.explain-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
}

.explain-options button,
.explain-reveal {
  min-height: 54px;
  padding: 11px 12px;
  border: 1px solid rgba(169, 140, 255, 0.34);
  border-radius: 12px;
  color: #f8f5ff;
  background: rgba(76, 57, 137, 0.22);
  text-align: left;
}

.explain-options button b,
.explain-options button small,
.explain-reveal b,
.explain-reveal small {
  display: block;
}

.explain-options button small,
.explain-reveal small {
  margin-top: 4px;
}

.explain-options button[aria-pressed="true"],
.explain-reveal:not(:disabled) {
  border-color: var(--explain-cyan);
  background: rgba(57, 159, 186, 0.2);
}

.explain-options button.ruled-out {
  border-color: rgba(255, 126, 126, 0.42);
  background: rgba(131, 38, 54, 0.2);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.explain-decision {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
}

.explain-decision b {
  color: var(--explain-amber);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.explain-decision.revealed {
  animation: explainCardOpen 420ms ease-out both;
}

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

.explain-evidence {
  display: grid;
  gap: 5px;
  min-height: 112px;
  padding: 13px;
  border-radius: 13px;
}

.explain-evidence b {
  color: #fff;
  font-size: 1.05rem;
}

.explain-evidence.support {
  border-color: rgba(113, 229, 255, 0.34);
}

.explain-evidence.uncertain {
  border-color: rgba(255, 200, 107, 0.5);
  background: linear-gradient(145deg, rgba(72, 49, 27, 0.88), rgba(24, 18, 24, 0.98));
}

.explain-history {
  overflow: hidden;
  border-radius: 16px;
}

.explain-history-head,
.explain-trial {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
}

.explain-history-head {
  grid-template-columns: 1fr auto;
  align-items: center;
  border-bottom: 1px solid rgba(169, 140, 255, 0.18);
}

.explain-trial + .explain-trial {
  border-top: 1px solid rgba(169, 140, 255, 0.14);
}

.explain-trial.passed em {
  color: #8ff3ce;
}

.explain-trial.revised em {
  color: #ffb0b8;
}

.explain-trial em {
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

@keyframes explainCardOpen {
  from { opacity: 0.4; transform: translateY(6px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .explain-evidence-grid { grid-template-columns: 1fr; }
  .explain-options { grid-template-columns: 1fr; }
  .explain-options button,
  .explain-reveal { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .explain-decision.revealed { animation: none; }
}