:root {
  color-scheme: light;
  --night: #102c3a;
  --night-2: #173f4d;
  --teal: #167c79;
  --teal-dark: #0b5354;
  --paper: #fffaf0;
  --cream: #f7e9cb;
  --ink: #17313a;
  --muted: #647278;
  --coral: #e95d4f;
  --coral-dark: #a63833;
  --gold: #f3bd45;
  --gold-dark: #9b6519;
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-width: 900px; min-height: 620px; overflow: hidden; }
body { margin: 0; color: var(--ink); background: var(--night); }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #fff2a3; outline-offset: 4px; }

.lesson { height: 100%; padding: 13px; }
.station { position: relative; height: 100%; min-height: 594px; overflow: hidden; isolation: isolate; border: 1px solid #496c72; border-radius: 25px; background: url("art/station-backdrop-01.webp") center / cover no-repeat; box-shadow: 0 8px 0 #071b25, 0 28px 60px rgba(0,0,0,.35); }
.station-wash { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(7,28,38,.78),rgba(12,42,51,.23) 32%,rgba(12,37,45,.18) 72%,rgba(7,28,38,.58)), linear-gradient(rgba(12,31,40,.2),rgba(5,21,29,.52)); }

.station-hud { position: absolute; z-index: 20; left: 18px; right: 18px; top: 16px; height: 68px; display: grid; grid-template-columns: 204px minmax(150px,1fr) 250px; gap: 15px; align-items: center; }
.route-badge,.difficulty,.scoreboard { border: 1px solid rgba(255,255,255,.17); border-radius: 15px; color: white; background: rgba(12,42,52,.91); box-shadow: 0 5px 0 rgba(3,19,25,.55), inset 0 1px rgba(255,255,255,.09); backdrop-filter: blur(12px); }
.route-badge { height: 68px; display: grid; align-content: center; padding: 10px 15px; }
.route-badge span,.difficulty span,.scoreboard span,.dock-kicker { color: #b8d6d7; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.route-badge strong { margin-top: 3px; font-size: 16px; }
.route-map { justify-self: center; width: min(370px,90%); display: flex; align-items: center; }
.route-map i { width: 18px; height: 18px; flex: 0 0 auto; border: 3px solid rgba(255,255,255,.76); border-radius: 50%; background: var(--night); box-shadow: 0 0 0 3px rgba(15,46,55,.65); }
.route-map i.is-done { border-color: #fff0a0; background: var(--gold); }
.route-map i.is-current { border-color: white; background: var(--coral); box-shadow: 0 0 0 4px rgba(233,93,79,.28), 0 0 18px #ffd881; }
.route-map b { height: 4px; flex: 1; background: rgba(255,255,255,.52); }
.difficulty { justify-self: center; width: min(280px,100%); display: grid; grid-template-columns: 1fr; gap: 7px; padding: 10px 14px; }
.difficulty span { display: flex; justify-content: space-between; }.difficulty span b { color: white; font-size: 14px; }
.difficulty > i { height: 7px; overflow: hidden; border-radius: 10px; background: #345861; }
.difficulty > i b { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--gold),var(--coral)); transition: width 220ms ease-out; }
.scoreboard { grid-column: 3; height: 68px; display: flex; align-items: stretch; justify-self: end; }
.difficulty:not([hidden]) + .scoreboard { grid-column: auto; }
.scoreboard > div { min-width: 75px; display: grid; place-content: center; padding: 5px 11px; text-align: center; }
.scoreboard > div + div { border-left: 1px solid rgba(255,255,255,.13); }
.scoreboard strong { margin-top: 2px; font-size: 21px; line-height: 1; }.scoreboard strong i { color: var(--gold); font-style: normal; font-size: 14px; }

.conductor-card { position: absolute; z-index: 5; left: 20px; top: 102px; bottom: 24px; width: 220px; overflow: visible; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; background: linear-gradient(rgba(13,47,58,.87),rgba(7,31,41,.96)); box-shadow: 0 8px 0 rgba(4,20,27,.62), 0 16px 36px rgba(0,0,0,.24); }
.speech { position: absolute; z-index: 3; left: 13px; right: 13px; top: 13px; min-height: 70px; display: grid; place-items: center; padding: 11px 12px; border-radius: 14px 14px 14px 4px; color: var(--ink); background: var(--paper); box-shadow: 0 4px 0 #b99861; font-size: 12px; font-weight: 800; line-height: 1.3; text-align: center; }
#mascot { position: absolute; z-index: 2; left: -20px; top: 80px; width: 190px; height: 260px; object-fit: contain; filter: drop-shadow(0 9px 6px rgba(0,0,0,.35)); transform-origin: 50% 82%; transition: transform 160ms ease-out, filter 160ms ease-out; }
.signal-art { position: absolute; z-index: 1; right: -15px; top: 182px; width: 104px; height: 194px; object-fit: contain; filter: drop-shadow(0 7px 4px rgba(0,0,0,.4)); }
.signal-labels { position: absolute; left: 12px; right: 12px; bottom: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.signal-labels span { min-height: 29px; display: grid; place-items: center; border: 1px solid #496c72; border-radius: 8px; color: #b9d0d2; background: #133743; font-size: 9px; font-weight: 1000; letter-spacing: .05em; text-transform: uppercase; transition: color 150ms ease-out, background 150ms ease-out, transform 150ms ease-out; }
.signal-labels span.is-active { transform: translateY(-2px); border-color: #f8d16d; color: #402b0c; background: var(--gold); box-shadow: 0 4px 0 #8e5a15, 0 0 18px rgba(255,205,77,.5); }
.station.is-success #mascot { transform: rotate(-3deg) translateY(-5px) scale(1.04); filter: drop-shadow(0 9px 6px rgba(0,0,0,.35)) brightness(1.08); }
.station.is-miss #mascot { transform: rotate(2deg) translateY(3px); }

.work-card { position: absolute; z-index: 4; left: 258px; right: 22px; top: 101px; bottom: 24px; display: grid; grid-template-rows: auto 62px minmax(0,1fr); padding: 20px 25px 23px; overflow: hidden; border: 1px solid #d4c09a; border-radius: 21px; background: rgba(255,250,240,.97); box-shadow: 0 9px 0 rgba(68,43,20,.42), 0 22px 44px rgba(0,0,0,.22); }
.mission-copy { text-align: center; }.mission-copy > span { color: var(--coral-dark); font-size: 10px; font-weight: 1000; letter-spacing: .13em; text-transform: uppercase; }
.mission-copy h1 { margin: 3px 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(24px,2.4vw,37px); line-height: 1; letter-spacing: -.035em; }.mission-copy p { margin: 0; color: var(--muted); font-size: 13px; }

.train-strip { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 9px; }
.digit-car { position: relative; width: 49px; height: 43px; display: grid; place-items: center; border: 2px solid #0b5053; border-radius: 9px 9px 6px 6px; color: white; background: linear-gradient(#238d87,#126b6b); box-shadow: 0 5px 0 #083f43; font-size: 22px; font-weight: 1000; transition: transform 240ms ease-out, opacity 180ms ease-out, filter 180ms ease-out; }
.digit-car::before,.digit-car::after { position: absolute; bottom: -8px; width: 10px; height: 10px; content: ""; border: 2px solid #1f3138; border-radius: 50%; background: var(--coral); }.digit-car::before { left: 6px; }.digit-car::after { right: 6px; }
.digit-car.is-used { opacity: .36; filter: grayscale(.5); transform: scale(.88); }.digit-car.is-waiting { animation: car-pulse 900ms ease-in-out infinite; border-color: #9a6216; color: #4b330d; background: linear-gradient(#ffe085,#f2b940); box-shadow: 0 5px 0 #9a6216,0 0 18px rgba(244,190,61,.7); }
.digit-car.is-waiting button { position: absolute; inset: -2px; border: 0; border-radius: inherit; color: inherit; background: transparent; font-size: inherit; font-weight: inherit; }

.work-zone { min-height: 0; display: grid; grid-template-columns: minmax(360px,1.35fr) minmax(260px,.85fr); gap: 20px; padding-top: 13px; }
.division-paper { position: relative; min-height: 0; overflow: auto; border: 1px solid #d5cdbb; border-radius: 15px; background-color: #fffefa; background-image: linear-gradient(#e8e3d8 1px,transparent 1px),linear-gradient(90deg,#f3efe6 1px,transparent 1px); background-size: 100% 32px,32px 100%; box-shadow: inset 0 0 0 5px rgba(255,255,255,.55),0 5px 0 #cbbd9e; font-family: "Courier New", monospace; }
.quotient-board { min-height: 53px; display: flex; align-items: end; justify-content: center; gap: 8px; padding: 7px 34px 4px 86px; color: var(--teal-dark); font-size: 27px; font-weight: 1000; letter-spacing: .25em; }
.quotient-board i { min-width: 26px; display: inline-grid; place-items: center; border-radius: 4px; background: #e0f1e9; box-shadow: 0 3px 0 #8db5aa; font-style: normal; animation: board-flip 260ms ease-out both; }
.quotient-board .blank { color: #b9afa0; background: transparent; box-shadow: none; }
.division-frame { width: max-content; min-width: 210px; display: grid; grid-template-columns: 66px auto; align-items: start; margin: 0 auto; font-size: 31px; font-weight: 1000; line-height: 1.35; }
.divisor { padding: 5px 12px 0 0; text-align: right; }.dividend { min-width: 120px; padding: 5px 16px 3px; border-top: 4px solid var(--ink); border-left: 4px solid var(--ink); border-radius: 14px 0 0; letter-spacing: .18em; }
.work-lines { width: min(330px,86%); margin: 0 auto; padding: 3px 8px 25px 70px; }
.work-row { min-height: 31px; display: grid; grid-template-columns: 72px 1fr; align-items: center; border-bottom: 1px dashed #d9d0bf; font-size: 18px; font-weight: 800; animation: row-in 210ms ease-out both; }
.work-row span { color: #7b7061; font-family: "Avenir Next",sans-serif; font-size: 9px; font-weight: 1000; letter-spacing: .08em; text-transform: uppercase; }.work-row b { text-align: right; letter-spacing: .12em; }
.work-row.is-product b::before { content: "− "; color: var(--coral); }.work-row.is-remainder { border-top: 2px solid var(--ink); }.work-row.is-bring b { color: var(--teal); }.work-row.is-current { border-radius: 5px; background: rgba(244,190,61,.18); }

.step-dock { min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 17px 18px; border: 1px solid #b5cbc5; border-radius: 15px; background: #edf6f2; box-shadow: 0 5px 0 #a1bbb4; text-align: center; transition: transform 160ms ease-out; }
.dock-kicker { color: var(--teal-dark); }.step-dock > strong { margin-top: 6px; font-size: clamp(18px,1.7vw,25px); line-height: 1.1; }.step-dock > p { min-height: 34px; margin: 7px 0 9px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.choices { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.choices.is-single { grid-template-columns: 1fr; }
.choice,.primary { min-height: 55px; border: 2px solid #8ea9a4; border-radius: 11px; background: white; box-shadow: 0 5px 0 #c4d4cf; font-weight: 1000; transition: transform 130ms ease-out, box-shadow 130ms ease-out, border-color 130ms ease-out; }
.choice { font-size: 20px; }.choice:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: 0 7px 0 #b6cfca; }.choice:active { transform: translateY(4px); box-shadow: 0 1px 0 #b6cfca; }
.primary { padding: 0 16px; border-color: var(--teal-dark); color: white; background: var(--teal); box-shadow: 0 5px 0 var(--teal-dark); font-size: 13px; }.primary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--teal-dark); }.primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--teal-dark); }
.primary.is-coral { border-color: var(--coral-dark); background: var(--coral); box-shadow: 0 5px 0 var(--coral-dark); }
.explain-choice { min-height: 56px; padding: 8px; font-size: 11px; line-height: 1.2; }
.feedback { min-height: 28px; display: grid; place-items: center; margin-top: 6px; color: var(--teal-dark); font-size: 11px; font-weight: 900; }.feedback.is-error { color: var(--coral-dark); }
.station.is-miss .step-dock { animation: gentle-shake 260ms ease-out; }

.departure { position: absolute; z-index: 30; left: 18%; right: -22%; bottom: 4%; height: 245px; pointer-events: none; opacity: 0; transform: translateX(-45%); }
.departure img { position: absolute; right: 18%; bottom: -52px; width: 320px; filter: drop-shadow(0 13px 7px rgba(0,0,0,.44)); }.departure-board { position: absolute; right: 24%; top: 18px; min-width: 164px; display: grid; justify-items: center; padding: 9px 17px; border: 3px solid #6b4311; border-radius: 10px; color: #3b270b; background: var(--gold); box-shadow: 0 6px 0 #6b4311; }.departure-board span { font-size: 9px; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; }.departure-board strong { font-size: 30px; line-height: 1.1; }
.departure.is-running { animation: depart 1500ms cubic-bezier(.15,.7,.3,1) both; }.steam i { position: absolute; right: 31%; top: 4px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.9); animation: steam 800ms ease-out infinite; }.steam i:nth-child(2){ margin-right:25px; animation-delay:140ms }.steam i:nth-child(3){ margin-right:51px; animation-delay:280ms }
.confetti { position: absolute; z-index: 31; inset: 0; pointer-events: none; }.confetti i { position: absolute; left: calc(22% + var(--x, 0%)); top: 42%; width: 9px; height: 18px; opacity: 0; background: var(--coral); }.confetti i:nth-child(2n){ background:var(--gold) }.confetti i:nth-child(3n){ background:#4ec5ba }.confetti.is-showing i { animation: confetti 850ms ease-out both; }.confetti i:nth-child(1){--x:3%;--tx:-90px;--ty:-150px}.confetti i:nth-child(2){--x:12%;--tx:-35px;--ty:-190px}.confetti i:nth-child(3){--x:24%;--tx:15px;--ty:-175px}.confetti i:nth-child(4){--x:35%;--tx:80px;--ty:-155px}.confetti i:nth-child(5){--x:47%;--tx:120px;--ty:-110px}.confetti i:nth-child(6){--x:60%;--tx:150px;--ty:-165px}.confetti i:nth-child(7){--x:72%;--tx:190px;--ty:-105px}.confetti i:nth-child(8){--x:82%;--tx:230px;--ty:-145px}
.toast { position: absolute; z-index: 50; left: 50%; bottom: 35px; max-width: 470px; padding: 11px 17px; opacity: 0; transform: translate(-50%,18px); border-radius: 11px; color: white; background: var(--night); box-shadow: 0 6px 0 rgba(0,0,0,.35); font-size: 12px; font-weight: 900; text-align: center; transition: opacity 160ms ease-out,transform 160ms ease-out; }.toast.is-showing { opacity: 1; transform: translate(-50%,0); }

@keyframes car-pulse { 50% { transform: translateY(-5px) scale(1.04); } }
@keyframes board-flip { from { opacity:0; transform:rotateX(85deg) scale(.8) } to { opacity:1; transform:none } }
@keyframes row-in { from { opacity:0; transform:translateY(-7px) } to { opacity:1; transform:none } }
@keyframes gentle-shake { 25%{transform:translateX(-6px)} 55%{transform:translateX(5px)} 80%{transform:translateX(-2px)} }
@keyframes depart { 0%{opacity:0;transform:translateX(-42%)} 14%{opacity:1} 70%{opacity:1;transform:translateX(3%)} 100%{opacity:0;transform:translateX(62%)} }
@keyframes steam { to { opacity:0; transform:translate(-28px,-65px) scale(2.1) } }
@keyframes confetti { 0%{opacity:1;transform:translate(0,0) rotate(0)} 100%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(440deg)} }

@media (max-width: 1120px) {
  .conductor-card { width: 190px; }.work-card { left: 226px; padding-inline:18px }.work-zone { grid-template-columns: minmax(330px,1.2fr) minmax(235px,.8fr); gap:12px }.scoreboard > div { min-width:67px;padding-inline:7px }.route-map { display:none }.station-hud{grid-template-columns:190px 1fr auto}.signal-labels{grid-template-columns:1fr}.signal-labels span{min-height:22px}.signal-art{top:170px}
}

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