:root {
  --ink: #090b0a;
  --paper: #fffdf4;
  --white: #ffffff;
  --green: #78f312;
  --pink: #ff3ea5;
  --yellow: #ffe500;
  --violet: #6f20e8;
  --violet-deep: #4d13b7;
  --night: #283557;
  --console: #202b4a;
  --console-deep: #17203a;
  --night-grid: rgb(255 255 255 / .09);
  --muted: #5c605b;
  --border: 4px solid var(--ink);
  --shadow: 8px 8px 0 var(--ink);
  --body: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  --pixel: "Courier New", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--ink); color: var(--ink); font-family: var(--body); }
button, textarea, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 4px solid var(--violet); outline-offset: 3px; }

.stage { position: fixed; inset: 0; overflow: hidden; background: var(--ink); }
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(104%);
  background:
    linear-gradient(90deg, rgb(9 11 10 / .055) 1px, transparent 1px),
    linear-gradient(rgb(9 11 10 / .055) 1px, transparent 1px),
    var(--paper);
  background-size: 28px 28px;
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1), opacity 250ms ease;
}
.screen.active { z-index: 2; opacity: 1; pointer-events: auto; transform: translateX(0); }
.screen.before { transform: translateX(-104%); }
.screen.dark {
  color: var(--white);
  background:
    linear-gradient(90deg, var(--night-grid) 1px, transparent 1px),
    linear-gradient(var(--night-grid) 1px, transparent 1px),
    var(--night);
  background-size: 28px 28px;
}
.screen.yellow { background: var(--yellow); background-image: none; }
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgb(9 11 10 / .2) 4px 5px);
}
.screen.dark::after {
  opacity: .12;
  mix-blend-mode: screen;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgb(255 255 255 / .12) 4px 5px);
}

.hud {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto auto auto;
  min-height: 76px;
  border-bottom: var(--border);
  background: var(--white);
  color: var(--ink);
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 0 22px;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 1000;
  letter-spacing: -.08em;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 3px solid var(--ink);
  background: var(--green);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--pixel);
  font-size: 18px;
  letter-spacing: -.14em;
}
.brand-mark.brand-logo {
  width: 58px;
  height: 58px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.brand-mark.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.34);
  transform-origin: center;
}
@media (max-height: 820px) {
  .brand-mark.brand-logo { width: 48px; height: 48px; }
}
@media (max-width: 760px) {
  .brand-mark.brand-logo { width: 42px; height: 42px; }
}
.brand small, .pixel { font-family: var(--pixel); letter-spacing: 0; }
.brand small { font-size: 10px; }
.hud-stat {
  display: grid;
  align-content: center;
  gap: 1px;
  min-width: 104px;
  padding: 0 16px;
  border-left: var(--border);
  background: var(--yellow);
  font-family: var(--pixel);
  font-size: 10px;
  font-weight: 900;
}
.hud-stat b { font-size: 23px; letter-spacing: -.08em; }
.hud-stat.phase-stat {
  min-width: 150px;
  background: var(--white);
}
.hud-stat.phase-stat b {
  font-family: var(--body);
  font-size: 16px;
  letter-spacing: 0;
}
.hud-stat.xp { background: var(--pink); }
.sound-button {
  min-width: 150px;
  border: 0;
  border-left: var(--border);
  background: var(--violet);
  color: var(--white);
  font-family: var(--pixel);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.sound-button:hover { background: var(--violet-deep); }
.sound-button:active { transform: translate(3px, 3px); }

.screen-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.frame {
  width: min(1420px, calc(100% - 80px));
  height: 100%;
  margin: 0 auto;
  padding: clamp(22px, 3vh, 46px) 0 clamp(16px, 2vh, 28px);
}
.stack { display: flex; min-height: 0; flex-direction: column; gap: clamp(16px, 2.4vh, 28px); }

.chrome {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 54px;
  padding: 0 40px;
  border-top: var(--border);
  background: var(--white);
  font-family: var(--pixel);
  font-size: 10px;
  font-weight: 900;
}
.dark .chrome { border-color: var(--white); background: var(--ink); color: var(--white); }
.night .chrome { background: var(--night); }
.yellow .chrome { background: var(--yellow); }
.page-number { color: var(--pink); }
.dark .page-number { color: var(--green); }
.nav-controls { display: flex; justify-content: flex-end; gap: 10px; }
.nav-button {
  border: 0;
  padding: 7px 9px;
  background: transparent;
  font-family: var(--pixel);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}
.nav-button:hover { background: var(--ink); color: var(--green); }
.dark .nav-button:hover { background: var(--white); color: var(--ink); }

.eyebrow {
  display: inline-flex;
  width: max-content;
  padding: 8px 12px;
  border: 3px solid var(--ink);
  background: var(--ink);
  color: var(--green);
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--pixel);
  font-size: 11px;
  font-weight: 900;
}
.eyebrow.green { background: var(--green); color: var(--ink); }
.eyebrow.pink { background: var(--pink); color: var(--ink); }
.eyebrow.yellow { background: var(--yellow); color: var(--ink); }
.eyebrow.violet { background: var(--violet); color: var(--white); }
.dark .eyebrow { border-color: var(--white); }
.section-title {
  max-width: 980px;
  margin: 10px 0 0;
  font-size: clamp(38px, 4vw, 62px);
  font-weight: 1000;
  letter-spacing: -.1em;
  line-height: .98;
}
.section-lede {
  max-width: 780px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 700;
  line-height: 1.65;
}
.dark .section-lede { color: var(--white); }
.pixel-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 58px;
  padding: 12px 20px;
  border: var(--border);
  background: var(--pink);
  box-shadow: 6px 6px 0 var(--ink);
  font-size: 18px;
  font-weight: 1000;
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease, background 120ms ease;
}
.pixel-button:hover { background: var(--yellow); }
.pixel-button:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--ink); }
.pixel-button.white { background: var(--white); }
.pixel-button.green { background: var(--green); }
.pixel-button.dark { border-color: var(--white); background: var(--console-deep); color: var(--white); box-shadow: 6px 6px 0 var(--green); }

/* 01 封面 */
.hero-frame { position: relative; }
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(400px, .85fr);
  align-items: center;
  gap: clamp(36px, 6vw, 94px);
  height: 100%;
  padding-bottom: 108px;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2vh, 26px); }
.lesson-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lesson-line > span:last-child { padding: 7px 12px; border: 3px solid var(--ink); background: var(--yellow); font-size: 14px; font-weight: 900; }
.hero-title { margin: 0; font-size: clamp(66px, 7.5vw, 122px); font-weight: 1000; letter-spacing: -.12em; line-height: .82; }
.hero-title span { display: block; }
.hero-title .accent {
  width: max-content;
  max-width: 100%;
  margin-top: 14px;
  padding: 8px 16px 13px 10px;
  border: 5px solid var(--ink);
  background: var(--green);
  color: var(--violet);
  text-shadow: 3px 3px 0 var(--white), 6px 6px 0 var(--pink);
  box-shadow: var(--shadow);
  transform: rotate(-1.5deg);
}
.hero-summary { max-width: 690px; margin: 0; font-size: clamp(16px, 1.45vw, 21px); font-weight: 750; line-height: 1.65; }
.meta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.meta-row span { padding: 8px 12px; border: 3px solid var(--ink); background: var(--white); font-weight: 900; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.xp-callout { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; border-left: 4px solid var(--ink); }
.xp-callout small { font-size: 12px; font-weight: 900; }
.xp-callout b { color: var(--violet); font-family: var(--pixel); font-size: 23px; }
.mascot-frame {
  position: relative;
  width: min(100%, 530px);
  margin-left: auto;
  padding: 18px 18px 78px;
  border: 5px solid var(--ink);
  background: var(--violet);
  box-shadow: 12px 12px 0 var(--ink);
  transform: rotate(1.25deg);
}
.mascot-frame::before { content: ""; position: absolute; z-index: -1; top: -20px; left: -22px; width: 84%; height: 18px; border: 4px solid var(--ink); background: var(--pink); }
.mascot-frame img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 4px solid var(--ink); image-rendering: pixelated; }
.mascot-label { position: absolute; top: -26px; right: -20px; z-index: 2; padding: 8px 11px; border: 4px solid var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); font-family: var(--pixel); font-size: 11px; font-weight: 900; }
.speech { position: absolute; right: -28px; bottom: -18px; left: 34px; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 11px 14px; border: 4px solid var(--ink); background: var(--white); box-shadow: 7px 7px 0 var(--ink); transform: rotate(-2deg); }
.speech b { padding: 7px; background: var(--pink); font-size: 11px; }
.hero-missions { position: absolute; right: 0; bottom: 14px; left: 0; display: grid; grid-template-columns: .7fr repeat(3, 1fr); border: var(--border); background: var(--white); box-shadow: var(--shadow); }
.hero-mission { min-height: 88px; padding: 12px 15px; border-right: var(--border); }
.hero-mission:last-child { border-right: 0; }
.hero-mission.title { display: flex; flex-direction: column; justify-content: space-between; background: var(--ink); color: var(--white); }
.hero-mission.title span, .step { font-family: var(--pixel); font-size: 10px; font-weight: 900; }
.hero-mission.title b { font-size: 21px; }
.hero-mission.green { background: var(--green); }.hero-mission.pink { background: var(--pink); }.hero-mission.yellow { background: var(--yellow); }
.hero-mission > b { display: block; margin: 5px 0 3px; font-size: 17px; }.hero-mission small { font-size: 12px; font-weight: 700; }
.spark { position: absolute; z-index: 1; color: var(--yellow); font-family: var(--pixel); font-size: 42px; text-shadow: 3px 3px 0 var(--ink); animation: sparkle 1.2s steps(2, end) infinite; }
.spark.one { top: 20%; left: 47%; }.spark.two { right: 2%; bottom: 22%; color: var(--pink); animation-delay: .28s; }.spark.three { bottom: 12%; left: 3%; color: var(--violet); animation-delay: .55s; }

/* 02 地图 */
.map-head { display: flex; flex-direction: column; gap: 2px; }
.course-map-screen .screen-main {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--violet) var(--paper);
}
.course-map-screen .frame { height: auto; min-height: 100%; }
.course-map-screen .screen-main::-webkit-scrollbar { width: 12px; }
.course-map-screen .screen-main::-webkit-scrollbar-track { background: var(--paper); }
.course-map-screen .screen-main::-webkit-scrollbar-thumb { border: 3px solid var(--ink); background: var(--violet); }
.map-grid { display: grid; flex: 0 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(156px, auto); gap: 14px; padding-bottom: 24px; }
.map-grid.five-phase-map { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.map-grid.five-phase-map .map-card:last-child { grid-column: 2 / 3; }
.map-card { display: flex; min-height: 0; flex-direction: column; justify-content: space-between; gap: 8px; padding: clamp(14px, 1.7vw, 22px); border: var(--border); background: var(--white); box-shadow: 5px 5px 0 var(--accent, var(--pink)); cursor: pointer; transition: transform 100ms ease, box-shadow 100ms ease; }
.map-card { position: relative; }
.map-card.is-locked { cursor: not-allowed; filter: saturate(.55); }
.map-card.is-locked:hover { transform: none; box-shadow: 5px 5px 0 var(--accent, var(--pink)); }
.map-lock { position: absolute; top: 10px; right: 10px; display: grid; width: 26px; height: 26px; place-items: center; border: 2px solid var(--ink); background: var(--paper); font-size: 12px; }
.map-card .map-time { padding-right: 30px; }
.map-card:hover { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--accent, var(--pink)); }
.map-card.current { background: var(--yellow); --accent: var(--ink); }.map-card.bonus { background: var(--ink); color: var(--white); --accent: var(--pink); }
.map-top { display: flex; justify-content: space-between; gap: 12px; font-family: var(--pixel); font-size: 10px; font-weight: 900; }.map-step { color: var(--accent, var(--pink)); }.map-card.current .map-step { color: var(--ink); }.map-card.bonus .map-step, .map-card.bonus .map-time { color: var(--yellow); }
.map-card h3 { margin: 0; font-size: clamp(20px, 1.9vw, 29px); letter-spacing: -.07em; line-height: 1; }.map-card p { margin: 0; color: var(--muted); font-size: clamp(12px, 1.05vw, 15px); font-weight: 700; line-height: 1.45; }.map-card.bonus p { color: var(--white); }.map-go { align-self: flex-end; color: var(--accent, var(--pink)); font-family: var(--pixel); font-size: 10px; font-weight: 900; }.map-card.current .map-go { color: var(--ink); }

/* 03-12 */
.two { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: clamp(24px, 3.5vw, 48px); align-items: stretch; }
.panel { border: var(--border); box-shadow: var(--shadow); }.story { display: flex; flex-direction: column; justify-content: center; gap: clamp(17px, 2.5vh, 30px); padding: clamp(25px, 3.5vw, 52px); background: var(--yellow); }.story p { max-width: 790px; margin: 0; font-size: clamp(18px, 1.75vw, 25px); font-weight: 750; line-height: 1.7; }.story .question { padding-top: 16px; border-top: 4px solid var(--ink); font-size: clamp(21px, 2vw, 29px); font-weight: 1000; line-height: 1.35; }
.time-pocket,
.prompt-coach,
.drag-coach,
.upgrade-meter,
.final-check {
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 65%, transparent);
}
.task-stack, .choice-stack { display: flex; flex-direction: column; gap: 11px; }.panel-title { margin: 0 0 5px; font-size: clamp(20px, 2vw, 28px); font-weight: 1000; letter-spacing: -.07em; }.task { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 53px; padding: 10px 15px; border: 3px solid var(--ink); background: var(--white); font-size: clamp(15px, 1.3vw, 19px); font-weight: 900; }.task small { font-family: var(--pixel); font-size: 10px; }.task.green { background: var(--green); }.task.yellow { background: var(--yellow); }.task.pink { background: var(--pink); }.task.violet { background: var(--violet); color: var(--white); }.task.dark { background: var(--console); color: var(--white); }.console-note { padding: 14px 17px; border-left: 7px solid var(--green); background: var(--console); color: var(--white); font-family: var(--pixel); font-size: 11px; font-weight: 900; line-height: 1.7; }
.schedule { display: flex; flex-direction: column; justify-content: center; gap: 13px; padding: clamp(20px, 2.3vw, 32px); background: var(--white); box-shadow: 8px 8px 0 var(--pink); }.schedule.good { box-shadow: 8px 8px 0 var(--green); }.badge { display: inline-flex; width: max-content; padding: 7px 11px; border: 3px solid var(--ink); background: var(--green); font-family: var(--pixel); font-size: 10px; font-weight: 900; }
.choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 15px; border: 3px solid var(--ink); background: var(--white); font-size: clamp(14px, 1.2vw, 17px); font-weight: 750; text-align: left; cursor: pointer; }.choice:hover { background: var(--yellow); }.choice .box { width: 22px; height: 22px; flex: 0 0 auto; border: 3px solid var(--ink); background: var(--white); }.choice.selected { background: var(--green); }.choice.selected .box { background: var(--ink); box-shadow: inset 0 0 0 4px var(--green); }.hint { padding: 14px 16px; background: var(--ink); color: var(--yellow); font-weight: 850; line-height: 1.6; }

/* 03 情景点火 */
.ignition-grid, .judgment-grid { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr); gap: clamp(26px, 3.5vw, 50px); align-items: stretch; }
.ignition-schedule { justify-content: center; }
.plan-status { float: right; margin: 4px 0 0 14px; padding: 4px 7px; background: var(--green); font-size: 10px; letter-spacing: 0; }
.plan-task { display: grid; grid-template-columns: minmax(132px, .78fr) minmax(120px, 1fr) 18px; justify-content: stretch; gap: 14px; transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease; }
.plan-task time { font-family: var(--pixel); font-size: clamp(11px, 1vw, 14px); font-weight: 900; }
.plan-task strong { font-size: clamp(16px, 1.35vw, 20px); }
.task-signal { width: 15px; height: 15px; border: 3px solid var(--ink); background: var(--white); }
.plan-task.is-active { transform: translateX(7px); box-shadow: -7px 0 0 var(--ink); filter: saturate(1.25); }
.plan-task.is-active .task-signal { background: var(--ink); box-shadow: 0 0 0 4px var(--yellow); }
.ignition-schedule.is-conflict { box-shadow: 8px 8px 0 var(--pink); }
.ignition-schedule.is-conflict .plan-status { background: var(--pink); }
.plan-task.is-conflict { position: relative; z-index: 1; border-color: var(--pink); box-shadow: -7px 0 0 var(--pink); animation: conflict-task 720ms steps(2, end) infinite; }
.plan-task.is-conflict .task-signal { background: var(--pink); box-shadow: 0 0 0 4px var(--ink); }
.clock-panel { position: relative; display: flex; min-height: 0; flex-direction: column; align-items: center; justify-content: space-between; gap: clamp(6px, 1vh, 10px); padding: clamp(12px, 1.4vw, 20px); overflow: hidden; background: var(--yellow); box-shadow: 8px 8px 0 var(--violet); }
.clock-heading { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; }
.clock-label { font-family: var(--pixel); font-size: 10px; font-weight: 900; }
.clock-face { position: relative; width: min(250px, 20vw, 24vh); min-width: 170px; aspect-ratio: 1; flex: 0 1 auto; border: clamp(7px, .7vw, 11px) solid var(--ink); border-radius: 50%; background: var(--white); box-shadow: 7px 7px 0 var(--ink); }
.clock-face::before { content: ""; position: absolute; inset: 9%; border: 4px dotted var(--ink); border-radius: 50%; opacity: .28; }
.clock-number { position: absolute; z-index: 2; font-family: var(--pixel); font-size: clamp(14px, 1.6vw, 22px); font-weight: 900; }
.clock-number.n12 { top: 7%; left: 50%; transform: translateX(-50%); }
.clock-number.n3 { top: 50%; right: 8%; transform: translateY(-50%); }
.clock-number.n6 { bottom: 7%; left: 50%; transform: translateX(-50%); }
.clock-number.n9 { top: 50%; left: 8%; transform: translateY(-50%); }
.clock-center { position: absolute; z-index: 5; top: 50%; left: 50%; width: 18px; height: 18px; border: 4px solid var(--ink); border-radius: 50%; background: var(--pink); transform: translate(-50%, -50%); }
.clock-hand { position: absolute; z-index: 3; bottom: 50%; left: 50%; width: 7px; border: 2px solid var(--ink); background: var(--ink); transform-origin: 50% 100%; }
.clock-hand.hour { height: 27%; }
.clock-hand.minute { height: 37%; background: var(--violet); }
.digital-time { min-width: 144px; padding: 6px 12px; border: 4px solid var(--ink); background: var(--ink); color: var(--green); font-family: var(--pixel); font-size: clamp(22px, 2.2vw, 34px); font-weight: 900; line-height: 1; text-align: center; }
.clock-message { min-height: 24px; margin: 0; font-size: clamp(14px, 1.15vw, 17px); font-weight: 900; text-align: center; }
.clock-replay { min-height: 38px; padding: 6px 13px; background: var(--white); font-size: 13px; box-shadow: 4px 4px 0 var(--ink); }
.clock-panel.is-running .digital-time { color: var(--yellow); }
.clock-panel.is-conflict { background: var(--pink); box-shadow: 8px 8px 0 var(--ink); animation: conflict-panel 420ms steps(2, end) 3; }
.clock-panel.is-conflict .digital-time { color: var(--pink); }
.clock-panel.is-conflict .clock-message { padding: 6px 10px; background: var(--ink); color: var(--yellow); }

/* 04 孩子判断 */
.judgment-schedule { position: relative; justify-content: center; }
.time-chip { display: inline-flex; padding: 4px 8px; background: var(--pink); font-family: var(--pixel); font-size: .72em; letter-spacing: 0; }
.judgment-panel { justify-content: center; padding: clamp(20px, 2.5vw, 34px); border: var(--border); background: var(--yellow); box-shadow: 8px 8px 0 var(--green); }
.judgment-choice { min-height: 68px; font-size: clamp(15px, 1.25vw, 18px); font-weight: 900; }
.judgment-choice.selected.wrong { background: var(--pink); color: var(--white); }
.judgment-choice.selected.wrong .box { background: var(--ink); box-shadow: inset 0 0 0 4px var(--pink); }
.judgment-choice.selected.correct { background: var(--green); color: var(--ink); }
.judgment-feedback { min-height: 70px; padding: 13px 15px; border: 3px solid var(--ink); background: var(--ink); color: var(--yellow); font-weight: 850; line-height: 1.5; }
.judgment-feedback.is-correct { background: var(--green); color: var(--ink); }
.judgment-schedule .overlap-answer { display: none; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 15px; border: 3px solid var(--ink); background: var(--pink); font-weight: 1000; }
.overlap-answer strong { font-family: var(--pixel); }
.judgment-schedule.is-revealed .overlap-answer { display: flex; }
.judgment-schedule.is-revealed [data-plan-task="judge-homework"], .judgment-schedule.is-revealed [data-plan-task="judge-piano"] { border-color: var(--pink); box-shadow: -7px 0 0 var(--pink); transform: translateX(7px); }
.fix-note { display: none; flex-direction: column; gap: 4px; padding: 11px 14px; border: 3px solid var(--ink); background: var(--white); line-height: 1.45; }
.fix-note.show { display: flex; }
.fix-note .pixel { color: var(--violet); font-size: 10px; font-weight: 900; }

/* 05 AI 原理 */
.ai-knowledge-frame { gap: clamp(10px, 1.5vh, 18px); }
.ai-knowledge-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.knowledge-headline-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.knowledge-step-badge {
  padding: 7px 10px;
  border: 3px solid var(--white);
  background: var(--pink);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
}
.ai-knowledge-head .section-title {
  max-width: 1100px;
  color: var(--white);
  font-size: clamp(34px, 3.5vw, 54px);
}
.ai-knowledge-head .section-lede {
  max-width: 980px;
  margin-top: 7px;
  font-size: clamp(14px, 1.15vw, 17px);
}
.knowledge-theater {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1.42fr) minmax(330px, .58fr);
  gap: clamp(18px, 2.2vw, 30px);
}
.knowledge-stage {
  position: relative;
  min-height: 0;
  border: 4px solid var(--white);
  background:
    linear-gradient(90deg, rgb(9 11 10 / .045) 1px, transparent 1px),
    linear-gradient(rgb(9 11 10 / .045) 1px, transparent 1px),
    var(--paper);
  background-size: 20px 20px;
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--green);
  overflow: hidden;
}
.knowledge-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.35vh, 15px);
  padding: clamp(18px, 2.3vw, 34px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.knowledge-scene[hidden] { display: none; }
.knowledge-scene.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.knowledge-scene h3 {
  margin: 0;
  font-size: clamp(27px, 2.65vw, 40px);
  letter-spacing: -.08em;
  line-height: 1.05;
}
.scene-kicker {
  width: max-content;
  padding: 6px 9px;
  background: var(--ink);
  color: var(--green);
  font-size: 10px;
  font-weight: 900;
}
.scene-note {
  margin: 0;
  padding: 9px 12px;
  border-left: 6px solid var(--violet);
  background: var(--white);
  color: var(--muted);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 750;
  line-height: 1.5;
}
.scene-note strong { color: var(--violet); }
.intro-answer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border: 3px solid var(--ink);
  background: var(--yellow);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 850;
}
.intro-answer b {
  padding: 6px 9px;
  background: var(--pink);
  font-size: clamp(20px, 1.8vw, 27px);
}
.intro-sentence {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 104px;
  padding: clamp(16px, 2vw, 26px);
  border: 4px solid var(--ink);
  background: var(--console);
  color: var(--white);
  box-shadow: 6px 6px 0 var(--pink);
  font-size: clamp(24px, 2.55vw, 39px);
  font-weight: 1000;
  letter-spacing: -.05em;
}
.intro-sentence b {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  place-items: center;
  border: 3px solid var(--ink);
  background: var(--yellow);
  color: var(--violet);
  font-family: var(--pixel);
  font-size: 30px;
  box-shadow: 4px 4px 0 var(--pink);
}
.intro-sentence i {
  width: 5px;
  height: 42px;
  background: var(--green);
  animation: knowledge-caret 1s steps(1, end) infinite;
}
.whole-sentence,
.prediction-context {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 66px;
  padding: 12px 16px;
  border: 4px solid var(--ink);
  background: var(--white);
  font-size: clamp(20px, 2vw, 29px);
  font-weight: 1000;
  text-align: center;
}
.token-conveyor {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 15px;
  border: 4px solid var(--ink);
  background: var(--console);
}
.token-conveyor span,
.token-conveyor b {
  display: grid;
  min-height: 40px;
  place-items: center;
  padding: 7px 10px;
  border: 3px solid var(--ink);
  background: var(--white);
  box-shadow: 3px 3px 0 var(--green);
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 900;
}
.token-conveyor b {
  min-width: 40px;
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--pink);
  color: var(--violet);
  font-family: var(--pixel);
  font-size: 20px;
}
.token-definition {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 100%;
  padding: 9px 12px;
  border: 3px solid var(--ink);
  background: var(--green);
  font-size: 15px;
  font-weight: 850;
}
.token-definition > b {
  padding: 5px 7px;
  background: var(--ink);
  color: var(--green);
}
.token-definition strong { color: var(--violet); }
.prediction-context {
  justify-content: flex-start;
  gap: 12px;
  background: var(--console);
  color: var(--white);
}
.prediction-context b {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  background: var(--yellow);
  color: var(--violet);
  font-family: var(--pixel);
}
.kid-prediction-board {
  display: grid;
  gap: 7px;
}
.kid-prediction-row {
  display: grid;
  grid-template-columns: 58px minmax(100px, 1fr) 44px 94px;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 7px 10px;
  border: 3px solid var(--ink);
  background: var(--white);
}
.kid-prediction-row.selected { background: var(--yellow); }
.kid-prediction-row b { font-size: 15px; }
.kid-prediction-row em {
  font-family: var(--pixel);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}
.kid-prediction-row small {
  padding: 4px 6px;
  background: var(--paper);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}
.kid-prediction-row.selected small {
  background: var(--pink);
  color: var(--white);
}
.kid-probability-track {
  height: 13px;
  border: 2px solid var(--ink);
  background: var(--white);
}
.kid-probability-track i {
  display: block;
  width: calc(var(--probability) * 100%);
  height: 100%;
  background: var(--violet);
  transform-origin: left center;
}
.kid-prediction-row.selected .kid-probability-track i { background: var(--pink); }
.loop-sentence {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 84px;
  padding: 14px;
  border: 4px solid var(--ink);
  background: var(--console);
  color: var(--white);
  font-size: clamp(17px, 1.55vw, 23px);
  font-weight: 900;
}
.loop-sentence b,
.loop-sentence i {
  display: grid;
  min-height: 40px;
  place-items: center;
  padding: 6px 9px;
  border: 3px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-style: normal;
}
.loop-sentence .chosen-token { background: var(--green); }
.loop-sentence .loop-question {
  min-width: 40px;
  background: var(--yellow);
  color: var(--violet);
  font-family: var(--pixel);
}
.loop-sentence.is-scene-complete .loop-question,
.knowledge-loop-scene.is-scene-complete .loop-question { display: none; }
.generation-loop {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.generation-loop span {
  padding: 7px 9px;
  border: 3px solid var(--ink);
  background: var(--green);
  font-size: 13px;
  font-weight: 900;
}
.generation-loop i,
.generation-loop b {
  color: var(--violet);
  font-family: var(--pixel);
  font-style: normal;
  font-weight: 1000;
}
.generation-loop b { font-size: 24px; }
.repeat-prediction-board {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 3px solid var(--ink);
  background: var(--white);
}
.repeat-board-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 7px;
  border-bottom: 2px solid var(--ink);
}
.repeat-board-title strong {
  font-size: 14px;
}
.repeat-board-title span {
  padding: 3px 7px;
  background: var(--yellow);
  font-size: 11px;
  font-weight: 900;
}
.repeat-round {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 34px 112px;
  gap: 7px;
  align-items: stretch;
}
.repeat-number,
.repeat-context,
.repeat-next {
  display: flex;
  align-items: center;
  min-height: 36px;
  border: 2px solid var(--ink);
}
.repeat-number {
  justify-content: center;
  background: var(--green);
  font-family: var(--pixel);
  font-size: 8px;
  text-align: center;
}
.repeat-context {
  gap: 9px;
  padding: 5px 9px;
  background: var(--paper);
  font-size: 14px;
  font-weight: 900;
}
.repeat-context small,
.repeat-next small {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 900;
}
.repeat-context small { color: var(--violet); }
.repeat-round > i {
  display: grid;
  place-items: center;
  color: var(--violet);
  font-family: var(--pixel);
  font-size: 14px;
  font-style: normal;
  font-weight: 1000;
}
.repeat-next {
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  background: var(--yellow);
}
.repeat-next strong {
  font-size: 15px;
  font-weight: 1000;
}
.repeat-round:last-child .repeat-next {
  background: var(--pink);
  color: var(--ink);
}
.knowledge-check-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}
.mini-conflict-plan,
.final-knowledge-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(14px, 1.6vw, 21px);
  border: 4px solid var(--ink);
}
.mini-conflict-plan { background: var(--white); }
.mini-conflict-plan h3,
.final-knowledge-card h3 {
  margin: 0;
  font-size: clamp(22px, 2vw, 30px);
}
.mini-plan-task {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 9px 11px;
  border: 3px solid var(--ink);
  font-weight: 900;
}
.mini-plan-task.green { background: var(--green); }
.mini-plan-task.pink { background: var(--pink); }
.mini-plan-task time {
  font-family: var(--pixel);
  font-size: 11px;
  font-weight: 900;
}
.mini-overlap-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 3px solid var(--ink);
  background: var(--yellow);
}
.mini-overlap-warning span { font-size: 24px; }
.final-knowledge-card {
  background: var(--yellow);
  box-shadow: 6px 6px 0 var(--pink);
}
.final-knowledge-card > .pixel {
  width: max-content;
  max-width: 100%;
  padding: 5px 7px;
  background: var(--violet);
  color: var(--white);
  font-size: 9px;
  font-weight: 900;
}
.final-knowledge-card p {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}
.final-motto {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.final-motto b {
  padding: 7px 9px;
  border: 3px solid var(--ink);
  background: var(--green);
  font-size: 13px;
}
.final-motto i {
  color: var(--violet);
  font-style: normal;
  font-weight: 1000;
}
.knowledge-deeper {
  padding: 8px 10px;
  border: 3px solid var(--ink);
  background: var(--white);
}
.knowledge-deeper summary {
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.knowledge-deeper p { margin-top: 7px; font-size: 12px; }
.knowledge-guide {
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  gap: clamp(9px, 1.25vh, 14px);
  padding: clamp(15px, 1.7vw, 23px);
  border: 3px solid var(--white);
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--pink);
}
.knowledge-guide-top {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}
.knowledge-guide-mascot {
  position: relative;
  border: 3px solid var(--ink);
  background: var(--white);
  box-shadow: 4px 4px 0 var(--violet);
}
.knowledge-guide-mascot img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  image-rendering: pixelated;
}
.knowledge-guide-mascot .pixel {
  position: absolute;
  right: -7px;
  bottom: -7px;
  padding: 3px 5px;
  border: 2px solid var(--ink);
  background: var(--green);
  color: var(--ink);
  font-size: 7px;
  font-weight: 900;
}
.knowledge-guide-copy { display: grid; gap: 4px; }
.knowledge-guide-copy > .pixel {
  color: var(--violet);
  font-size: clamp(12px, .95vw, 15px);
  font-weight: 900;
  line-height: 1.35;
}
.knowledge-guide-copy h3 {
  margin: 0;
  font-size: clamp(21px, 1.8vw, 28px);
  letter-spacing: -.07em;
  line-height: 1.05;
}
.knowledge-guide-copy p {
  margin: 0;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 800;
  line-height: 1.5;
}
.knowledge-progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.knowledge-progress span {
  display: grid;
  min-height: 34px;
  place-items: center;
  border: 3px solid var(--ink);
  background: var(--white);
  font-family: var(--pixel);
  font-size: 10px;
  font-weight: 900;
}
.knowledge-progress span.is-done { background: var(--green); }
.knowledge-progress span.is-current {
  background: var(--pink);
  box-shadow: inset 0 -5px 0 var(--violet);
}
.knowledge-primary-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.knowledge-primary-controls button,
.knowledge-secondary-controls button {
  min-height: 44px;
  border: 3px solid var(--ink);
  background: var(--white);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.knowledge-primary-controls button:hover,
.knowledge-secondary-controls button:hover { background: var(--green); }
.knowledge-primary-controls button:disabled {
  cursor: not-allowed;
  opacity: .48;
}
.knowledge-primary-controls .knowledge-next-button {
  grid-column: 1 / -1;
  min-height: 50px;
  background: var(--green);
  font-size: 16px;
}
.knowledge-secondary-controls {
  display: flex;
  gap: 7px;
}
.knowledge-secondary-controls button {
  min-height: 36px;
  flex: 1;
  background: var(--paper);
  font-size: 11px;
}
.knowledge-live {
  min-height: 44px;
  padding: 8px 10px;
  border: 3px solid var(--white);
  background: var(--console);
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}
@keyframes knowledge-caret {
  50% { opacity: 0; }
}
.nav-button:disabled { color: var(--muted); cursor: not-allowed; opacity: .55; }
.nav-button:disabled:hover { background: transparent; color: var(--muted); }

.console { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(22px, 3vw, 40px); background: var(--ink); color: var(--white); box-shadow: 8px 8px 0 var(--green); }.console p { margin: 0; font-family: var(--pixel); font-size: clamp(12px, 1.1vw, 15px); font-weight: 900; line-height: 1.9; }.green-text { color: var(--green); }.yellow-text { color: var(--yellow); }.pink-text { color: var(--pink); }
.mission-grid { display: grid; flex: 1; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 3.5vw, 48px); }.mission { display: flex; min-height: 0; flex-direction: column; justify-content: space-between; gap: 20px; padding: clamp(26px, 3vw, 46px); border: var(--border); background: var(--white); }.mission.a { box-shadow: 9px 9px 0 var(--green); }.mission.b { box-shadow: 9px 9px 0 var(--violet); }.mission h3 { max-width: 560px; margin: 0; font-size: clamp(30px, 3vw, 45px); letter-spacing: -.1em; line-height: .98; }.mission p { max-width: 600px; margin: 0; color: var(--muted); font-size: clamp(16px, 1.35vw, 20px); font-weight: 700; line-height: 1.65; }.output { padding: 14px 16px; background: var(--ink); color: var(--green); font-family: var(--pixel); font-size: 11px; font-weight: 900; }.mission.b .output { color: var(--yellow); }
.break { display: grid; flex: 1; place-items: center; text-align: center; }.break-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vh, 32px); }.blocks { display: flex; gap: 10px; }.blocks i { width: clamp(34px, 4vw, 62px); height: clamp(34px, 4vw, 62px); border: 4px solid var(--ink); background: var(--pink); box-shadow: 5px 5px 0 var(--ink); transform: rotate(18deg); }.blocks i:nth-child(2) { background: var(--white); transform: rotate(-12deg); }.blocks i:nth-child(3) { background: var(--green); transform: rotate(8deg); }.break h2 { max-width: 900px; margin: 0; font-size: clamp(58px, 7vw, 110px); font-weight: 1000; letter-spacing: -.11em; line-height: .85; }.break p { max-width: 750px; margin: 0; font-size: clamp(18px, 1.7vw, 24px); font-weight: 800; line-height: 1.6; }.meter { display: grid; grid-template-columns: repeat(10, 32px); gap: 6px; }.meter i { height: 20px; border: 3px solid var(--ink); background: var(--white); }.meter i:nth-child(-n+4) { background: var(--violet); }
.rule-grid { display: grid; flex: 1; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 36px); }.rule { display: flex; min-height: 0; flex-direction: column; justify-content: space-between; gap: 20px; padding: clamp(24px, 2.6vw, 40px); border: var(--border); background: var(--white); }.rule.green-shadow { box-shadow: 8px 8px 0 var(--green); }.rule.pink-shadow { box-shadow: 8px 8px 0 var(--pink); }.rule.violet-shadow { box-shadow: 8px 8px 0 var(--violet); }.rule h3 { margin: 0; font-size: clamp(29px, 2.6vw, 42px); letter-spacing: -.09em; }.rule p { margin: 0; color: var(--muted); font-size: clamp(15px, 1.35vw, 19px); font-weight: 700; line-height: 1.7; }.upgrade { display: flex; justify-content: space-between; padding: 12px; border: 3px solid var(--ink); background: var(--ink); color: var(--yellow); font-family: var(--pixel); font-size: 10px; font-weight: 900; }
.challenge { display: grid; flex: 1; min-height: 0; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 3.5vw, 52px); align-items: center; }.pile { display: flex; flex-direction: column; gap: 18px; padding: clamp(25px, 3vw, 42px); border: 4px solid var(--white); background: var(--white); color: var(--ink); box-shadow: 8px 8px 0 var(--pink); }.pile h3, .judge h3 { margin: 0; font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -.08em; }.pile p { margin: 0; font-size: clamp(16px, 1.4vw, 20px); font-weight: 800; line-height: 1.7; }.total { padding: 12px 14px; background: var(--ink); color: var(--yellow); font-family: var(--pixel); font-size: 11px; font-weight: 900; }.judge { display: flex; flex-direction: column; gap: 20px; padding: clamp(26px, 3vw, 40px); border: 4px solid var(--white); background: var(--ink); color: var(--white); box-shadow: 8px 8px 0 var(--green); }.judge-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.judge-button { min-height: 64px; border: 3px solid var(--white); font-size: clamp(17px, 1.5vw, 22px); font-weight: 1000; cursor: pointer; }.judge-button.yes { background: var(--green); }.judge-button.no { background: var(--pink); color: var(--white); }.judge-button:active { transform: translate(3px,3px); }.score { display: flex; justify-content: space-between; padding: 13px 15px; border: 3px solid var(--white); font-family: var(--pixel); font-size: clamp(14px, 1.4vw, 20px); font-weight: 900; }.score span:first-child { color: var(--green); }.score span:last-child { color: var(--yellow); }.challenge-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.challenge-rule { padding: 13px 16px; border: 3px solid var(--accent); color: var(--accent); font-family: var(--pixel); font-size: 10px; font-weight: 900; line-height: 1.55; }
.save-grid { display: grid; flex: 1; min-height: 0; grid-template-columns: 1.12fr .88fr; gap: clamp(30px, 3.5vw, 52px); }.save-list { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(26px, 3vw, 42px); border: var(--border); background: var(--white); box-shadow: 8px 8px 0 var(--violet); }.save-action { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; padding: clamp(26px, 3vw, 42px); border: 4px solid var(--white); background: var(--ink); box-shadow: 8px 8px 0 var(--pink); }.save-action h3 { margin: 0; color: var(--white); font-size: clamp(30px, 2.8vw, 42px); letter-spacing: -.08em; }.save-action p { margin: 0; color: var(--yellow); font-size: 15px; font-weight: 700; line-height: 1.6; }.save-action .pixel-button { width: 100%; background: var(--green); }.save-action.is-saved { box-shadow: 8px 8px 0 var(--green); }
.review { display: grid; flex: 1; min-height: 0; place-items: center; }.review-card { display: flex; width: min(980px, 100%); flex-direction: column; gap: 24px; padding: clamp(30px, 4vw, 58px); border: var(--border); background: var(--yellow); box-shadow: var(--shadow); text-align: center; }.review-card h3 { margin: 0; font-size: clamp(34px, 3.5vw, 54px); letter-spacing: -.1em; line-height: 1.15; }.review-input { width: 100%; min-height: 118px; resize: none; padding: 16px; border: 4px solid var(--ink); background: var(--white); color: var(--ink); font-size: clamp(17px, 1.5vw, 21px); font-weight: 750; line-height: 1.5; }.examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }.examples span { padding: 8px 12px; border: 3px solid var(--ink); background: var(--white); font-size: 13px; font-weight: 750; }.review-action { display: flex; justify-content: center; }
.ending { display: grid; width: min(1420px, calc(100% - 80px)); height: 100%; flex: 0 1 auto; margin: 0 auto; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr); align-items: center; gap: clamp(34px, 6vw, 96px); }.ending-brand { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 2vh, 22px); }.ending-brand h2 { margin: 0; color: var(--white); font-size: clamp(48px, 5.8vw, 88px); font-weight: 1000; letter-spacing: -.11em; line-height: .9; }.ending-brand h2 span { color: var(--green); }.ending-brand p { max-width: 620px; margin: 0; color: var(--white); font-size: clamp(16px, 1.45vw, 21px); font-weight: 700; line-height: 1.65; }.ending-achievements { display: grid; width: min(620px, 100%); gap: 8px; }.ending-achievements div { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 11px; min-height: 48px; padding: 7px 12px 7px 7px; border: 3px solid var(--white); background: rgb(255 255 255 / .96); color: var(--ink); font-size: clamp(14px, 1.2vw, 17px); font-weight: 900; }.ending-achievements b { display: grid; width: 28px; height: 28px; place-items: center; border: 3px solid var(--ink); background: var(--green); font-family: var(--pixel); }.finish-action { min-height: 52px; padding: 10px 17px; }.ending-celebration { position: relative; display: flex; min-height: 0; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: clamp(12px, 1.8vw, 24px); border: 4px solid var(--white); background: var(--paper); box-shadow: 9px 9px 0 var(--pink); color: var(--ink); }.ending-flag { position: absolute; z-index: 2; top: clamp(16px, 2vw, 28px); left: clamp(-16px, -1.5vw, -8px); padding: 10px 15px; border: 4px solid var(--ink); background: var(--yellow); box-shadow: 5px 5px 0 var(--ink); font-size: clamp(18px, 1.7vw, 25px); font-weight: 1000; transform: rotate(-3deg); }.ending-mascot { display: block; width: min(285px, 22vw); max-width: 100%; margin-top: clamp(8px, 1.5vh, 18px); mix-blend-mode: multiply; }.trophy-card { display: flex; width: min(100%, 300px); flex-direction: column; gap: 10px; padding: 17px; border: 4px solid var(--ink); background: var(--white); box-shadow: 7px 7px 0 var(--violet); color: var(--ink); }.trophy { display: grid; place-items: center; width: 56px; height: 56px; border: 4px solid var(--ink); background: var(--yellow); color: var(--violet); box-shadow: 4px 4px 0 var(--pink); font-size: 32px; }.trophy-card small { color: var(--violet); font-family: var(--pixel); font-size: 9px; font-weight: 900; }.trophy-card h3 { margin: 0; font-size: clamp(23px, 2.1vw, 31px); letter-spacing: -.08em; }.trophy-card p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.5; }

/* 课程总结 */
.course-summary { gap: 0; }
.summary-board {
  display: grid;
  flex: 1 1 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 1.7vh, 20px);
  padding: clamp(18px, 2.2vw, 30px);
  border: 4px solid var(--white);
  background: rgb(23 32 58 / .82);
  box-shadow: 9px 9px 0 var(--green);
  overflow: hidden;
}
.summary-board-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px; padding-bottom: clamp(10px, 1.5vh, 16px); border-bottom: 3px solid rgb(255 255 255 / .55); }
.summary-board-head .section-title { margin: 8px 0 5px; color: var(--white); font-size: clamp(34px, 4.1vw, 58px); line-height: .95; }
.summary-board-head .section-title span { color: var(--green); }
.summary-board-head .section-lede { margin: 0; color: var(--white); font-size: clamp(14px, 1.15vw, 17px); }
.summary-board-reminder { margin: 0; padding: 9px 13px; border: 3px solid var(--yellow); color: var(--yellow); font-family: var(--pixel); font-size: 10px; font-weight: 900; line-height: 1.7; white-space: nowrap; }
.summary-board-body { display: grid; min-height: 0; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); gap: clamp(18px, 2.4vw, 32px); }
.course-summary-card { display: flex; min-height: 0; flex-direction: column; gap: clamp(9px, 1.3vh, 14px); padding: clamp(16px, 1.8vw, 24px); border: 4px solid var(--white); overflow: hidden; }
.summary-skills { background: var(--paper); box-shadow: 6px 6px 0 var(--green); color: var(--ink); }
.summary-results { background: var(--console); box-shadow: 6px 6px 0 var(--pink); color: var(--white); }
.course-summary-card h3 { margin: 0; font-size: clamp(24px, 2.35vw, 36px); letter-spacing: -.09em; line-height: 1.02; }
.summary-skill-list { display: grid; min-height: 0; gap: 8px; }
.summary-skill-list > div { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 11px; padding: 9px; border: 3px solid var(--ink); background: var(--white); }
.summary-skill-list b { display: grid; width: 34px; height: 34px; place-items: center; background: var(--ink); color: var(--green); font-family: var(--pixel); font-size: 10px; }
.summary-skill-list span { display: grid; gap: 1px; }
.summary-skill-list strong { font-size: clamp(16px, 1.25vw, 20px); }
.summary-skill-list small { color: var(--muted); font-size: 12px; font-weight: 750; }
.course-summary-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.course-summary-stats div { display: grid; min-height: 66px; align-content: center; gap: 4px; padding: 9px; border: 3px solid var(--white); background: rgb(255 255 255 / .08); }
.course-summary-stats b { color: var(--yellow); font-family: var(--pixel); font-size: clamp(23px, 2vw, 31px); line-height: 1; }
.course-summary-stats span { font-size: 12px; font-weight: 800; }
.course-summary-message { margin: auto 0 0; padding: 10px 12px; border-left: 5px solid var(--green); background: rgb(255 255 255 / .1); color: var(--white); font-size: 13px; font-weight: 750; line-height: 1.45; }
.course-summary-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 10px; border-top: 3px solid rgb(255 255 255 / .55); }
.course-summary-footer p { margin: 0; color: var(--white); font-size: clamp(13px, 1.05vw, 16px); line-height: 1.45; }
.course-summary-footer b { color: var(--yellow); }
.clear-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.clear-footer h3 { margin: 5px 0; color: var(--white); font-size: clamp(20px, 2vw, 30px); }
.compact-badge { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 3px solid var(--white); background: var(--violet); }
.compact-badge span { color: var(--yellow); font-size: 25px; }
.compact-badge b { color: var(--white); white-space: nowrap; }
.clear-actions { display: flex; align-items: center; gap: 8px; }
.clear-actions .pixel-button.white { color: var(--ink); }
.task-confirm { align-self: flex-end; }
.task-confirm.is-complete { background: var(--white); }
.drag-change-note.is-done {
  padding: 12px 14px;
  border: 3px solid var(--ink);
  border-left: 8px solid var(--green);
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 900;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* 固定工作台：页面不滚动，只有指定内容框内部滚动 */
.page-workbench {
  flex: 1 1 0;
  min-height: 0;
  padding: clamp(10px, 1.35vw, 18px);
  border: var(--border);
  background: rgb(255 255 255 / .68);
  overflow: hidden;
}
.page-workbench > * { min-height: 0; max-height: 100%; }
.judgment-workbench { gap: clamp(14px, 2vw, 28px); }
.task-workbench { gap: clamp(14px, 2vw, 28px); }
.ignition-workbench { gap: clamp(14px, 2vw, 28px); }
.schedule-workbench { gap: clamp(14px, 2vw, 28px); box-shadow: 7px 7px 0 var(--violet); }
.judgment-workbench > .judgment-schedule,
.judgment-workbench > .judgment-panel { box-shadow: none; }
.ignition-workbench > .ignition-schedule,
.ignition-workbench > .clock-panel { height: 100%; min-height: 0; overflow: hidden; }
.judgment-workbench > .schedule,
.judgment-workbench > .judgment-panel,
.task-workbench > .planner-panel,
.task-workbench > .time-pocket,
.schedule-workbench > .timeline-panel,
.schedule-workbench > .drag-coach { height: 100%; min-height: 0; }
.judgment-workbench > .schedule,
.judgment-workbench > .judgment-panel,
.task-workbench > .time-pocket,
.schedule-workbench > .drag-coach { overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.task-workbench > .planner-panel { overflow: hidden; }
.task-workbench .task-editor-list { flex: 1 1 0; overflow-y: auto; scrollbar-gutter: stable; }
.schedule-workbench > .timeline-panel { overflow: hidden; }
.page-workbench ::-webkit-scrollbar { width: 10px; }
.page-workbench ::-webkit-scrollbar-track { background: var(--paper); }
.page-workbench ::-webkit-scrollbar-thumb { border: 2px solid var(--ink); background: var(--violet); }

/* 课间休息 */
.break-page h2 { color: var(--white); }
.break-page h2 span { color: var(--green); }
.break-page p { max-width: 660px; color: var(--white); }
.break-tips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.break-tips span { padding: 8px 12px; border: 3px solid var(--white); color: var(--white); font-size: 13px; font-weight: 900; }
.break-continue { min-height: 50px; }

/* 周末排班互动工作区 */
.scroll-area {
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--violet) var(--paper);
}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.panel-heading h3,
.planner-panel h3,
.time-pocket h3,
.prompt-coach h3,
.timeline-panel h3,
.drag-coach h3,
.rule-builder h3,
.upgrade-meter h3,
.final-check h3 {
  margin: 8px 0 0;
  font-size: clamp(24px, 2.2vw, 34px);
  letter-spacing: -.08em;
}
.pixel-button.small {
  min-height: 44px;
  padding: 8px 13px;
  font-size: 14px;
  box-shadow: 4px 4px 0 var(--ink);
  white-space: nowrap;
}
.pixel-button:disabled {
  cursor: wait;
  filter: grayscale(.55);
  opacity: .72;
}
.violet-button {
  background: var(--violet);
  color: var(--white);
}
.violet-button:hover {
  background: var(--violet-deep);
}
.builder-grid {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: clamp(24px, 3vw, 44px);
}
.planner-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 2.4vw, 34px);
  background: var(--white);
  box-shadow: 8px 8px 0 var(--green);
}
.task-editor-list {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
  padding: 3px 8px 3px 3px;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.planner-panel > .panel-heading,
.planner-panel > .inline-feedback { flex: 0 0 auto; }
.task-editor-row {
  display: grid;
  grid-template-columns: 50px minmax(200px, 1fr) minmax(170px, .46fr) 42px;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 3px solid var(--ink);
  background: var(--paper);
}
.row-index {
  display: grid;
  min-height: 49px;
  place-items: center;
  background: var(--ink);
  color: var(--green);
  font-family: var(--pixel);
  font-size: 13px;
  font-weight: 900;
}
.task-editor-row label,
.rule-form label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 900;
}
.task-editor-row input,
.rule-form input,
.rule-form select {
  width: 100%;
  min-height: 48px;
  border: 3px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  padding: 8px 10px;
  font-weight: 800;
}
.duration-field {
  position: relative;
}
.duration-field input {
  padding-right: 54px;
}
.duration-field small {
  position: absolute;
  right: 11px;
  bottom: 16px;
  font-size: 11px;
}
.icon-button {
  min-height: 48px;
  border: 3px solid var(--ink);
  background: var(--pink);
  color: var(--ink);
  font-family: var(--pixel);
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}
.icon-button:hover {
  background: var(--yellow);
}
.time-pocket {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: clamp(24px, 3vw, 42px);
  background: var(--yellow);
  box-shadow: 8px 8px 0 var(--violet);
}
.time-pocket p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.65;
}
.big-number {
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 18px;
  border: 4px solid var(--ink);
  background: var(--ink);
  color: var(--green);
}
.big-number b {
  font-family: var(--pixel);
  font-size: clamp(40px, 4.6vw, 70px);
  line-height: 1;
}
.big-number span {
  padding-bottom: 7px;
  color: var(--white);
  font-weight: 900;
}
.mini-checks {
  display: grid;
  gap: 8px;
}
.mini-checks span {
  padding: 9px 11px;
  border: 3px solid var(--ink);
  background: var(--white);
  font-size: 13px;
  font-weight: 850;
}
.inline-feedback {
  min-height: 24px;
  padding: 8px 11px;
  background: var(--green);
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}
.inline-feedback:empty {
  display: none;
}
.inline-feedback.is-error {
  background: var(--pink);
  color: var(--ink);
}
.dark-feedback {
  border: 2px solid var(--white);
}
.prompt-grid,
.second-prompt-layout {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(280px, .68fr) minmax(0, 1.32fr);
  gap: clamp(24px, 3vw, 44px);
}
.prompt-coach {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--yellow);
  box-shadow: 8px 8px 0 var(--violet);
}
.prompt-coach p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.65;
}
.prompt-parts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.prompt-parts span {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 9px;
  border: 3px solid var(--ink);
  background: var(--white);
  min-width: 0;
  white-space: nowrap;
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 900;
}
.prompt-parts b {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  background: var(--ink);
  color: var(--green);
  font-family: var(--pixel);
}
.prompt-console {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.4vw, 34px);
  background: var(--console);
  color: var(--white);
  box-shadow: 8px 8px 0 var(--green);
}
.prompt-console label {
  color: var(--white);
  font-family: var(--pixel);
  font-size: 12px;
  font-weight: 900;
}
.prompt-textarea {
  width: 100%;
  min-height: 0;
  flex: 1;
  resize: none;
  border: 4px solid var(--white);
  background: var(--paper);
  color: var(--ink);
  padding: 17px;
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 750;
  line-height: 1.8;
}
.prompt-textarea.large {
  min-height: 250px;
}
.prompt-textarea::placeholder { color: var(--muted); opacity: 1; }
.prompt-console .dark-feedback { border-color: var(--ink); }
.send-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ai-disclaimer {
  color: var(--yellow);
  font-family: var(--pixel);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.5;
}
.schedule-workspace,
.final-layout {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .5fr);
  gap: clamp(24px, 3vw, 44px);
}
.final-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
}
.timeline-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 15px;
  padding: clamp(18px, 2.2vw, 30px);
  background: var(--white);
  box-shadow: 8px 8px 0 var(--green);
}
.timeline-editor {
  overflow: hidden;
  gap: 10px;
  padding: clamp(16px, 1.8vw, 24px);
}
.timeline-heading {
  align-items: flex-end;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--ink);
}
.timeline-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.timeline-total {
  color: var(--muted);
  font-family: var(--pixel);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.timeline-column-labels {
  display: grid;
  grid-template-columns: 80px 42px minmax(0, 1fr);
  gap: 12px;
  padding: 0 12px 0 0;
  color: var(--muted);
  font-family: var(--pixel);
  font-size: 9px;
  font-weight: 900;
}
.timeline-column-labels span:nth-child(2) {
  text-align: center;
}
.sortable-schedule {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 3px 9px 3px 3px;
}
.timeline-editor .sortable-schedule {
  flex: 1;
  gap: 0;
  padding: 0 10px 0 0;
  scroll-padding-block: 56px;
}
.schedule-stop {
  display: grid;
  grid-template-columns: 80px 42px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  min-height: var(--duration-size);
}
.timeline-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 3px;
  padding-top: 12px;
  font-family: var(--pixel);
  font-size: 10px;
  font-weight: 900;
}
.timeline-time b {
  font-size: 14px;
}
.timeline-time span {
  color: var(--muted);
}
.timeline-time span::before {
  content: "到 ";
}
.timeline-rail {
  position: relative;
  display: flex;
  justify-content: center;
}
.timeline-rail span {
  position: relative;
  z-index: 2;
  display: grid;
  width: 34px;
  height: 34px;
  margin-top: 10px;
  place-items: center;
  border: 3px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font-family: var(--pixel);
  font-size: 10px;
  font-weight: 900;
}
.timeline-rail i {
  position: absolute;
  top: 44px;
  bottom: -10px;
  border-left: 3px solid var(--ink);
}
.schedule-stop:nth-last-child(2) .timeline-rail i {
  bottom: 0;
}
.schedule-row {
  display: grid;
  grid-template-columns: 42px 132px minmax(160px, 1fr) auto;
  gap: 13px;
  align-items: center;
  min-height: 70px;
  padding: 9px 12px;
  border: 3px solid var(--ink);
  background: var(--white);
  cursor: grab;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.schedule-row.green { box-shadow: inset 8px 0 0 var(--green); }
.schedule-row.yellow { box-shadow: inset 8px 0 0 var(--yellow); }
.schedule-row.pink { box-shadow: inset 8px 0 0 var(--pink); }
.schedule-row.violet { box-shadow: inset 8px 0 0 var(--violet); }
.schedule-card {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-self: stretch;
  min-height: var(--duration-size);
  padding: 9px 12px;
  cursor: grab;
  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}
.schedule-card:active {
  cursor: grabbing;
}
.schedule-card.green { --card-tone: var(--green); }
.schedule-card.yellow { --card-tone: var(--yellow); }
.schedule-card.pink { --card-tone: var(--pink); }
.schedule-card.violet { --card-tone: var(--violet); }
.schedule-card.green,
.schedule-card.yellow,
.schedule-card.pink,
.schedule-card.violet {
  box-shadow: inset 9px 0 0 var(--card-tone);
}
.schedule-card:hover {
  transform: translateX(4px);
  box-shadow: inset 9px 0 0 var(--card-tone), 5px 5px 0 var(--ink);
}
.schedule-row.is-fixed {
  background: var(--yellow);
  cursor: default;
}
.schedule-row.is-dragging {
  opacity: .28;
  transform: scale(.98) rotate(-.4deg);
  box-shadow: inset 9px 0 0 var(--card-tone);
}
.drag-handle {
  display: grid;
  height: 42px;
  place-items: center;
  border: 3px solid var(--ink);
  background: var(--paper);
  font-family: var(--pixel);
  font-weight: 900;
}
.schedule-card .drag-handle {
  width: 40px;
  height: 46px;
  align-self: center;
  padding: 9px;
  border: 3px solid var(--ink);
  background: var(--card-tone);
  cursor: grab;
  touch-action: none;
}
.schedule-card .drag-handle span {
  display: block;
  width: 16px;
  height: 3px;
  background: var(--ink);
}
.schedule-row time {
  display: grid;
  gap: 2px;
  font-family: var(--pixel);
  font-size: 11px;
  font-weight: 900;
}
.schedule-row time span {
  color: var(--muted);
}
.schedule-copy {
  display: grid;
  gap: 4px;
}
.schedule-copy strong {
  font-size: clamp(15px, 1.3vw, 19px);
}
.schedule-copy small {
  color: var(--muted);
  font-weight: 750;
}
.schedule-card .schedule-copy {
  align-content: center;
}
.schedule-card .schedule-copy strong {
  font-size: clamp(16px, 1.25vw, 19px);
}
.schedule-card .schedule-copy small {
  font-family: var(--pixel);
  font-size: 10px;
}
.schedule-actions {
  display: flex;
  gap: 5px;
}
.schedule-actions button {
  width: 34px;
  height: 34px;
  border: 3px solid var(--ink);
  background: var(--white);
  font-weight: 1000;
  cursor: pointer;
}
.schedule-actions button:hover:not(:disabled) {
  background: var(--green);
}
.schedule-actions button:disabled {
  opacity: .28;
  cursor: not-allowed;
}
.schedule-card .schedule-actions {
  align-self: center;
}
.schedule-card .schedule-actions button {
  transition: transform 100ms ease, background 100ms ease;
}
.schedule-card .schedule-actions button:active:not(:disabled) {
  transform: translateY(2px);
}
.schedule-dropzone {
  position: relative;
  display: grid;
  grid-template-columns: 80px 42px minmax(0, 1fr);
  gap: 12px;
  height: 8px;
  flex: 0 0 auto;
  transition: height 140ms ease;
}
.schedule-dropzone::before {
  content: "";
  grid-column: 2 / 4;
  align-self: center;
  border-top: 3px dashed transparent;
}
.schedule-dropzone span {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 2;
  display: none;
  transform: translateY(-50%);
  padding: 3px 7px;
  border: 2px solid var(--ink);
  background: var(--pink);
  font-family: var(--pixel);
  font-size: 8px;
  font-weight: 900;
}
.sortable-schedule.is-drag-active .schedule-dropzone {
  height: 22px;
}
.sortable-schedule.is-drag-active .schedule-dropzone::before {
  border-color: rgb(9 11 10 / .28);
}
.sortable-schedule.is-drag-active .schedule-dropzone-final {
  height: 54px;
}
.sortable-schedule.is-drag-active .schedule-dropzone-final::before {
  border-color: var(--violet);
}
.sortable-schedule.is-drag-active .schedule-dropzone-final span {
  display: block;
  right: auto;
  left: calc(80px + 54px);
  opacity: .72;
}
.schedule-dropzone.is-drag-over {
  height: 34px;
}
.schedule-dropzone-final.is-drag-over {
  height: 54px;
}
.schedule-dropzone.is-drag-over::before {
  border-top-style: solid;
  border-color: var(--pink);
}
.schedule-dropzone.is-drag-over span {
  display: block;
}
.row-check {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 3px solid var(--ink);
  background: var(--green);
  font-weight: 1000;
}
.drag-coach,
.final-check {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--yellow);
  box-shadow: 8px 8px 0 var(--pink);
}
.student-checklist {
  display: grid;
  gap: 8px;
}
.student-checklist label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border: 3px solid var(--ink);
  background: #f4f2e9;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.student-checklist input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--green);
}
.inline-feedback.is-success {
  border-color: var(--green);
  background: #eaffdc;
  color: var(--ink);
}
.backup-plan-button {
  justify-self: start;
  padding: 8px 12px;
  border: 3px dashed var(--yellow);
  background: transparent;
  color: var(--yellow);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.backup-plan-button[hidden] { display: none; }
.break-note {
  padding: 10px 14px;
  border: 3px dashed var(--white);
  color: var(--white);
  font-size: 13px;
  font-weight: 900;
}
.drag-coach {
  justify-content: flex-start;
  gap: 12px;
  padding: clamp(18px, 2vw, 26px);
}
.coach-kicker {
  width: max-content;
  padding: 7px 9px;
  border: 3px solid var(--ink);
  background: var(--pink);
  font-family: var(--pixel);
  font-size: 9px;
  font-weight: 900;
}
.drag-coach p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.5;
}
.drag-coach.is-complete > p,
.drag-coach.is-complete .coach-steps,
.drag-coach.is-complete .coach-tip {
  display: none;
}
.drag-coach.is-complete .drag-status { margin-top: 4px; }
.coach-steps {
  display: grid;
  gap: 6px;
}
.coach-steps div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 6px 10px 6px 6px;
  border: 3px solid var(--ink);
  background: var(--white);
  font-weight: 900;
}
.coach-steps b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  background: var(--ink);
  color: var(--green);
  font-family: var(--pixel);
  font-size: 11px;
}
.coach-tip {
  display: grid;
  gap: 3px;
  padding: 8px 11px;
  border: 3px dashed var(--ink);
  font-size: 12px;
  line-height: 1.45;
}
.coach-tip span {
  color: var(--muted);
  font-weight: 750;
}
.drag-icon {
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  border: 4px solid var(--ink);
  background: var(--pink);
  box-shadow: 6px 6px 0 var(--ink);
  font-family: var(--pixel);
  font-size: 40px;
  font-weight: 900;
}
.drag-status {
  padding: 10px 12px;
  border: 3px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font-weight: 900;
  line-height: 1.5;
}
.drag-status.is-done {
  background: var(--green);
  color: var(--ink);
}
.empty-state {
  display: grid;
  min-height: 180px;
  place-items: center;
  padding: 24px;
  border: 3px dashed var(--muted);
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}
.compare-prompts {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 44px);
}
.prompt-paper {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 15px;
  padding: clamp(20px, 2.5vw, 34px);
  background: var(--white);
  box-shadow: 8px 8px 0 var(--violet);
}
.prompt-paper.updated {
  background: var(--yellow);
  box-shadow: 8px 8px 0 var(--green);
}
.prompt-paper h3 {
  margin: 0;
  font-size: clamp(24px, 2.3vw, 35px);
  letter-spacing: -.08em;
}
.prompt-paper pre {
  min-height: 0;
  flex: 1;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  border: 3px solid var(--ink);
  background: var(--paper);
  padding: 17px;
  font-family: var(--body);
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 750;
  line-height: 1.75;
}
.change-note {
  padding: 11px 13px;
  background: var(--ink);
  color: var(--green);
  font-family: var(--pixel);
  font-size: 10px;
  font-weight: 900;
}
.rules-workspace {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 2.8vw, 40px);
}
.rule-builder {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 15px;
  padding: clamp(18px, 2.2vw, 28px);
  background: var(--white);
}
.rule-builder:first-child {
  box-shadow: 8px 8px 0 var(--green);
}
.rule-builder:last-child {
  box-shadow: 8px 8px 0 var(--violet);
}
.rule-builder-title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rule-builder-title h3 {
  margin: 0;
}
.rule-builder-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
.rule-number {
  display: grid;
  width: 55px;
  height: 55px;
  flex: 0 0 auto;
  place-items: center;
  border: 3px solid var(--ink);
  background: var(--green);
  font-family: var(--pixel);
  font-weight: 900;
}
.violet-bg {
  background: var(--violet);
  color: var(--white);
}
.rule-form {
  display: grid;
  align-items: end;
  gap: 9px;
  padding: 12px;
  border: 3px solid var(--ink);
  background: var(--paper);
}
.fixed-form {
  grid-template-columns: minmax(150px, 1fr) 110px 110px auto;
}
.relation-form {
  grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr) auto auto;
  align-items: center;
}
.rule-form select {
  min-width: 0;
}
.rule-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 7px;
  overflow: auto;
}
.rule-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 9px 11px;
  border: 3px solid var(--ink);
  background: var(--green);
  font-size: 13px;
  font-weight: 800;
}
.rule-chip.violet-chip {
  background: var(--violet);
  color: var(--white);
}
.rule-chip button {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-weight: 1000;
  cursor: pointer;
}
.rule-empty {
  padding: 11px;
  border: 3px dashed var(--muted);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.second-prompt-layout {
  grid-template-columns: minmax(0, 1.3fr) minmax(270px, .7fr);
}
.upgrade-meter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: clamp(22px, 2.8vw, 38px);
  background: var(--yellow);
  box-shadow: 8px 8px 0 var(--pink);
}
.upgrade-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  border: 3px solid var(--ink);
  background: var(--white);
}
.upgrade-item span {
  font-family: var(--pixel);
  font-size: 10px;
  font-weight: 900;
}
.final-timeline {
  box-shadow: 8px 8px 0 var(--green);
}
.final-check {
  justify-content: flex-start;
  gap: 14px;
  overflow: auto;
}
.check-report {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.check-line {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 8px;
  border: 3px solid var(--ink);
  background: var(--white);
  font-size: 12px;
  line-height: 1.3;
}
.check-line span {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  background: var(--green);
  font-weight: 1000;
}
.check-line.waiting {
  color: var(--muted);
}
.export-panel {
  display: grid;
  gap: 8px;
  margin-top: 0;
  padding-top: 4px;
}
.export-copy {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border: 3px solid var(--ink);
  background: var(--white);
}
.export-copy b {
  font-size: 15px;
}
.export-copy span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}
.export-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.export-actions .pixel-button {
  width: 100%;
  min-height: 48px;
  font-size: 16px;
}
.export-actions .pixel-button.white {
  background: var(--paper);
}
.export-actions .pixel-button.is-exported {
  background: var(--green);
}
.export-feedback {
  min-height: 38px;
  padding: 7px 10px;
  border: 3px dashed var(--ink);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}
.trophy-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.trophy-summary span {
  padding: 8px 10px;
  border: 3px solid var(--white);
  background: var(--violet);
  color: var(--white);
  font-family: var(--pixel);
  font-size: 9px;
  font-weight: 900;
}
.trophy-card .trophy-summary span { border-color: var(--ink); }
.read-aloud-button { width: max-content; margin-top: 8px; padding: 6px 10px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); font-size: 12px; font-weight: 900; cursor: pointer; }
.read-aloud-button:hover { background: var(--green); }
.read-aloud-button:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.toast { position: fixed; z-index: 50; top: 84px; left: 50%; width: min(540px, calc(100% - 48px)); transform: translate(-50%,-30px); padding: 16px 22px; border: 3px solid var(--green); background: var(--ink); color: var(--green); box-shadow: 5px 5px 0 var(--pink); font-family: var(--pixel); font-size: clamp(13px, 1.4vw, 16px); font-weight: 900; line-height: 1.6; text-align: center; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }.toast.show { opacity: 1; transform: translate(-50%,0); }
@keyframes sparkle { 50% { opacity: .45; transform: scale(.74) rotate(12deg); } }
@keyframes conflict-task { 50% { filter: brightness(.82) saturate(1.35); } }
@keyframes conflict-panel { 25% { transform: translateX(-5px) rotate(-.4deg); } 75% { transform: translateX(5px) rotate(.4deg); } }
@media (max-height: 820px) { .hud{min-height:66px}.brand{font-size:22px}.brand-mark{width:36px;height:36px}.chrome{min-height:46px}.frame{width:min(1420px,calc(100% - 64px));padding-top:16px;padding-bottom:12px}.hero-layout{padding-top:12px}.hero-mission{min-height:70px;padding:9px 12px}.hero-mission>b{font-size:15px}.hero-mission small{font-size:10px}.map-grid{gap:10px}.map-card{padding:12px 14px}.map-card p{font-size:11px}.clock-face{width:min(165px,22vh);min-width:145px}.clock-panel{gap:4px;padding:8px 12px}.clock-message{min-height:20px;font-size:13px}.clock-replay{min-height:32px;padding:4px 12px}.plan-task{min-height:46px;padding-top:7px;padding-bottom:7px}.judgment-choice{min-height:54px}.judgment-feedback{min-height:56px;padding:9px 12px}.section-title{font-size:clamp(32px,3.6vw,52px)}.section-lede{margin-top:6px}.task-editor-row{padding:8px}.schedule-row{min-height:59px}.prompt-textarea{padding:12px;line-height:1.6}.rule-builder{padding:14px}.rule-form{padding:8px}.rule-chip{padding:6px 9px}.page-workbench{padding:8px}.summary-board{gap:10px;padding:14px}.summary-board-head{gap:18px;padding-bottom:8px}.summary-board-head .section-title{margin:5px 0 3px;font-size:clamp(31px,3.6vw,46px)}.course-summary-card{gap:7px;padding:12px}.course-summary-card h3{font-size:clamp(22px,2vw,30px)}.summary-skill-list{gap:6px}.summary-skill-list>div{padding:7px}.summary-skill-list b{width:30px;height:30px}.course-summary-stats div{min-height:56px}.course-summary-message{padding:8px 10px;font-size:12px} }
@media (max-height: 820px) and (min-width: 761px) {
  .ai-knowledge-frame{gap:8px}
  .ai-knowledge-head .section-title{margin-top:7px;font-size:clamp(31px,3.2vw,45px)}
  .ai-knowledge-head .section-lede{margin-top:4px;font-size:13px}
  .knowledge-scene{gap:8px;padding:15px 20px}
  .knowledge-scene h3{font-size:clamp(24px,2.2vw,34px)}
  .intro-sentence{min-height:80px}
  .knowledge-guide{gap:7px;padding:12px 15px}
  .knowledge-guide-top{grid-template-columns:66px minmax(0,1fr)}
  .knowledge-guide-copy h3{font-size:20px}
  .knowledge-guide-copy p{font-size:12px}
  .knowledge-live{min-height:36px;padding:6px 8px;font-size:10px}
  .knowledge-primary-controls button{min-height:38px}
  .knowledge-primary-controls .knowledge-next-button{min-height:43px}
  .knowledge-secondary-controls button{min-height:31px}
  .mini-plan-task{min-height:44px;padding:7px 9px}
}
@media (max-width: 1080px) { .hud{grid-template-columns:1fr auto auto}.sound-button{display:none}.hero-layout{grid-template-columns:1fr .78fr;gap:34px}.two,.challenge,.save-grid,.ignition-grid,.judgment-grid{grid-template-columns:1fr .76fr}.clock-face{width:clamp(190px,24vw,260px)}.builder-grid,.schedule-workspace,.final-layout{grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr)}.prompt-grid,.second-prompt-layout{grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr)}.fixed-form{grid-template-columns:1fr 100px 100px}.fixed-form .pixel-button{grid-column:1/-1}.relation-form{grid-template-columns:1fr auto 1fr auto}.relation-form .pixel-button{grid-column:1/-1}.task-editor-row{grid-template-columns:42px minmax(160px,1fr) 150px 40px} }
@media (max-width: 760px) {
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
  .stage{position:relative;width:100vw;min-height:100dvh;overflow-x:clip;overflow-y:visible}
  .screen{position:absolute;width:100%;min-height:100dvh;overflow:hidden}
  .screen.active{position:relative}
  .screen-main{overflow:auto}
  .hud{grid-template-columns:1fr auto;min-height:62px}
  .brand{padding:0 12px;font-size:18px}
  .brand small,.hud-stat.xp{display:none}
  .hud-stat.phase-stat{min-width:112px}
  .hud-stat.phase-stat b{font-size:13px}
  .hud-stat{min-width:74px;padding:0 10px}
  .frame{width:calc(100% - 28px);height:auto;min-height:calc(100dvh - 116px);padding:18px 0}
  .chrome{grid-template-columns:1fr auto;padding:0 12px}
  .chrome>span:first-child,.page-number{display:none}
  .nav-controls{grid-column:2}
  .section-title{font-size:36px}
  .hero-layout,.builder-grid,.prompt-grid,.schedule-workspace,.compare-prompts,.rules-workspace,.second-prompt-layout,.final-layout,.summary-board-body,.ending{grid-template-columns:1fr}
  .hero-layout{padding-bottom:24px}
  .mascot-frame{display:none}
  .hero-missions{position:static;grid-template-columns:1fr;margin-top:20px}
  .map-grid{grid-template-columns:1fr}
  .map-grid.five-phase-map{grid-template-rows:none}
  .map-grid.five-phase-map .map-card:last-child{grid-column:auto}
  .map-card{min-height:150px}
  .ignition-grid,.judgment-grid{grid-template-columns:1fr}
  .clock-face{width:220px}
  .task-editor-row{grid-template-columns:38px minmax(0,1fr) 40px}
  .task-editor-row .duration-field{grid-column:2/3}
  .task-editor-row .icon-button{grid-column:3;grid-row:1/3}
  .prompt-parts{grid-template-columns:1fr}
  .send-row{align-items:stretch;flex-direction:column}
  .schedule-row{grid-template-columns:38px 92px minmax(0,1fr)}
  .schedule-actions,.row-check{grid-column:3;justify-self:end}
  .fixed-form,.relation-form{grid-template-columns:1fr}
  .check-report{grid-template-columns:1fr}
  .export-actions{grid-template-columns:1fr}
  .relation-form span{display:none}
  .fixed-form .pixel-button,.relation-form .pixel-button{grid-column:auto}
  .ai-knowledge-frame{gap:13px}
  .knowledge-headline-row{align-items:flex-start;flex-direction:column;gap:9px}
  .knowledge-step-badge{font-size:9px}
  .ai-knowledge-head .section-title{font-size:34px}
  .knowledge-theater{display:flex;min-height:auto;flex:0 0 auto;flex-direction:column;gap:12px}
  .knowledge-guide{display:contents}
  .knowledge-guide-top{order:0;grid-template-columns:68px minmax(0,1fr);padding:12px;border:3px solid var(--white);background:var(--yellow);color:var(--ink);box-shadow:5px 5px 0 var(--pink)}
  .knowledge-progress{order:1}
  .knowledge-stage{order:2;min-height:480px;overflow:hidden}
  .knowledge-theater[data-scene="4"] .knowledge-stage{min-height:660px}
  .knowledge-scene{justify-content:flex-start;gap:12px;padding:18px}
  .knowledge-scene h3{font-size:28px}
  .knowledge-primary-controls{order:3;padding:10px;border:3px solid var(--white);background:var(--yellow)}
  .knowledge-secondary-controls{order:4}
  .knowledge-live{order:5}
  .knowledge-check-grid{grid-template-columns:1fr}
  .kid-prediction-row{grid-template-columns:54px minmax(0,1fr) 42px}
  .kid-prediction-row small{grid-column:2/4;justify-self:end;padding:3px 6px}
  .intro-sentence{min-height:86px;font-size:24px}
  .token-definition{align-items:flex-start;flex-direction:column}
  .mini-plan-task{grid-template-columns:106px minmax(0,1fr)}
  .knowledge-guide-copy h3{font-size:20px}
  .knowledge-guide-copy p{font-size:13px}
  .knowledge-primary-controls button,.knowledge-secondary-controls button{font-size:14px}
  .knowledge-primary-controls .knowledge-next-button{font-size:16px}
  .ending{padding:30px 0}
  .page-workbench{overflow:visible}
  .summary-board{display:flex;height:auto;flex:0 0 auto;flex-direction:column;overflow:visible}
  .summary-board-head{grid-template-columns:1fr}
  .summary-board-reminder{display:none}
  .summary-board-body{flex:0 0 auto;min-height:auto}
  .course-summary-card{min-height:auto;overflow:visible}
  .course-summary-footer{align-items:stretch;flex-direction:column}
}
@media (max-width: 760px) {
  .timeline-editor{padding:14px 12px}
  .timeline-heading{align-items:flex-start;flex-direction:column}
  .timeline-heading-actions{width:100%;justify-content:space-between}
  .timeline-total{font-size:9px}
  .timeline-column-labels,
  .schedule-stop,
  .schedule-dropzone{grid-template-columns:56px 34px minmax(0,1fr);gap:7px}
  .timeline-column-labels{padding-right:4px}
  .timeline-editor .sortable-schedule{padding-right:4px}
  .timeline-time{padding-top:10px;font-size:9px}
  .timeline-time b{font-size:11px}
  .timeline-rail span{width:30px;height:30px;margin-top:8px}
  .timeline-rail i{top:38px}
  .schedule-card{grid-template-columns:38px minmax(0,1fr);gap:8px;padding:8px}
  .schedule-card .drag-handle{width:36px;height:42px;padding:8px}
  .schedule-card .drag-handle span{width:14px}
  .schedule-card .schedule-copy strong{font-size:15px}
  .schedule-card .schedule-copy small{font-size:8px;line-height:1.45}
  .schedule-card .schedule-actions{grid-column:2;justify-self:end}
  .schedule-card .schedule-actions button{width:31px;height:31px}
  .schedule-dropzone::before{grid-column:2/4}
  .sortable-schedule.is-drag-active .schedule-dropzone-final span{left:calc(56px + 42px)}
  .drag-coach{padding:20px}
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } }