:root {
  color-scheme: dark;
  --ink: #f7f0d8;
  --muted: #c9c5ad;
  --teal: #1c7773;
  --teal-dark: #0d4545;
  --teal-light: #66d1c4;
  --copper: #d9783a;
  --copper-dark: #743619;
  --gold: #f5bd45;
  --gold-light: #ffe49a;
  --panel: #102f31;
  --paper: #fff7d9;
  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: 1050px; min-height: 650px; overflow: hidden; }
body { margin: 0; color: var(--ink); background: #112d2b; }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #fff0a4; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.lesson { height: 100%; padding: 12px; }
.workshop { position: relative; height: 100%; min-height: 626px; overflow: hidden; isolation: isolate; border: 2px solid #8d5c32; border-radius: 26px; background: linear-gradient(rgba(9,35,35,.18),rgba(7,27,27,.72)),url("art/workshop-backdrop-01.webp") center/cover; box-shadow: inset 0 0 90px rgba(5,18,17,.5),0 8px 0 #092323,0 22px 55px rgba(3,14,14,.45); }
.workshop::before { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(circle at 50% 54%,transparent 10%,rgba(7,26,25,.36) 76%); pointer-events: none; }

.workshop-hud { position: absolute; z-index: 20; left: 18px; right: 18px; top: 16px; height: 70px; display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 17px; }
.mission-card,.bay-track,.difficulty-card,.scoreboard { border: 1px solid rgba(255,220,139,.36); background: linear-gradient(180deg,rgba(19,66,65,.96),rgba(11,48,48,.96)); box-shadow: inset 0 1px rgba(255,255,255,.09),0 5px 0 rgba(5,25,24,.75),0 10px 24px rgba(0,0,0,.18); backdrop-filter: blur(8px); }
.mission-card { height: 70px; display: flex; flex-direction: column; justify-content: center; padding: 10px 17px; border-radius: 17px; }
.mission-card span,.difficulty-card span,.scoreboard span { color: var(--muted); font-size: 10px; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; }
.mission-card strong { margin-top: 4px; font-size: 16px; }
.bay-track { justify-self: center; height: 52px; display: flex; align-items: center; padding: 7px 12px; border-radius: 999px; }
.bay-track b { width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid #8e7d58; border-radius: 50%; color: #cabf9f; background: #244e4d; box-shadow: inset 0 2px rgba(255,255,255,.08); font-size: 13px; transition: transform 180ms ease-out,background 180ms ease-out; }
.bay-track b.is-active { transform: scale(1.12); border-color: var(--gold-light); color: #40220d; background: var(--gold); box-shadow: 0 0 0 5px rgba(245,189,69,.15),inset 0 2px white; }
.bay-track b.is-done { border-color: #70d2c4; color: #073c39; background: #77d8ca; }
.bay-track i { width: 27px; height: 3px; background: #6e725e; }
.difficulty-card { justify-self: center; width: min(350px,100%); display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 10px 15px; border-radius: 16px; }
.difficulty-card span b { color: white; font-size: 15px; }.difficulty-card strong { font-size: 12px; }
.difficulty-card > i { grid-column: 1/-1; height: 7px; overflow: hidden; border-radius: 999px; background: #1c3c3b; }
.difficulty-card > i b { display: block; width: 18%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--teal-light),var(--gold),var(--copper)); transition: width 220ms ease-out; }
.scoreboard { height: 70px; display: flex; align-items: stretch; padding: 7px; border-radius: 17px; }
.scoreboard > div { min-width: 70px; display: grid; place-content: center; padding: 0 10px; text-align: center; }
.scoreboard > div + div { border-left: 1px solid rgba(255,226,162,.16); }
.scoreboard strong { display: block; margin-top: 2px; font-size: 21px; line-height: 1; }.scoreboard strong i { color: var(--gold); font-style: normal; font-size: 14px; }

.game-layout { position: absolute; z-index: 3; left: 22px; right: 22px; top: 102px; bottom: 20px; display: grid; grid-template-columns: 238px minmax(720px,1fr); gap: 18px; }
.mascot-zone { position: relative; min-width: 0; display: flex; align-items: end; justify-content: center; overflow: visible; }
.mascot { position: relative; z-index: 4; width: 235px; max-height: 77%; object-fit: contain; object-position: bottom; transform-origin: 50% 94%; filter: drop-shadow(0 15px 15px rgba(3,14,13,.55)); transition: transform 170ms ease-out,filter 170ms ease-out; }
.speech { position: absolute; z-index: 7; left: 4px; right: 0; top: 3%; min-height: 82px; display: grid; place-items: center; padding: 14px 16px; border: 3px solid #8a4c20; border-radius: 22px 22px 22px 7px; color: #293827; background: var(--paper); box-shadow: 0 6px 0 #583119,0 13px 28px rgba(4,18,17,.34); font-size: 14px; font-weight: 1000; line-height: 1.26; text-align: center; }
.speech::after { position: absolute; left: 32px; bottom: -14px; width: 22px; height: 22px; content: ""; transform: rotate(45deg); border-right: 3px solid #8a4c20; border-bottom: 3px solid #8a4c20; background: var(--paper); }
.prop { position: absolute; z-index: 3; object-fit: contain; pointer-events: none; }.prop-gears { right: -34px; bottom: -38px; width: 143px; height: 143px; filter: drop-shadow(0 10px 8px rgba(5,17,16,.45)); }
.mascot-zone.is-cheering .mascot { animation: mascot-cheer 700ms ease-out; filter: drop-shadow(0 0 22px rgba(255,205,77,.5)) drop-shadow(0 15px 15px rgba(3,14,13,.55)); }
.mascot-zone.is-oops .mascot { animation: mascot-oops 420ms ease-out; }

.play-panel { min-width: 0; display: grid; grid-template-rows: auto minmax(315px,1fr) 34px auto; gap: 8px; padding: 17px 20px 16px; border: 2px solid rgba(255,214,125,.47); border-radius: 27px; background: linear-gradient(180deg,rgba(14,54,54,.95),rgba(8,39,39,.97)); box-shadow: inset 0 1px rgba(255,255,255,.1),0 9px 0 rgba(5,27,27,.83),0 22px 48px rgba(2,14,14,.38); backdrop-filter: blur(10px); }
.challenge-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 5px; }
.challenge-header > div:first-child { min-width: 0; }.challenge-header span { color: var(--gold); font-size: 10px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
.challenge-header h1 { margin: 4px 0 3px; font-size: clamp(28px,2.7vw,40px); line-height: 1; letter-spacing: -.035em; text-shadow: 0 3px 0 rgba(3,20,19,.65); }
.challenge-header p { max-width: 690px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.35; }
.job-tag { flex: 0 0 auto; min-width: 112px; display: grid; place-items: center; padding: 8px 12px; border: 1px solid #80633a; border-radius: 15px; color: #4a2a12; background: linear-gradient(180deg,#fff0aa,#dca84a); box-shadow: inset 0 2px rgba(255,255,255,.65),0 4px 0 #74411d; }
.job-tag span { color: #6c3718; font-size: 21px; line-height: 1; }.job-tag b { margin-top: 2px; font-size: 11px; }

.machine-stage { position: relative; min-height: 315px; overflow: hidden; border: 3px solid #8a572f; border-radius: 24px; background: linear-gradient(rgba(9,42,42,.82),rgba(9,35,35,.92)),repeating-linear-gradient(0deg,transparent 0 31px,rgba(98,190,181,.08) 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,rgba(98,190,181,.08) 31px 32px); box-shadow: inset 0 0 46px rgba(1,13,13,.65),0 4px 0 #4d2b18; }
.machine-stage::before { position: absolute; z-index: 0; left: 3%; right: 3%; bottom: 12px; height: 42px; content: ""; border-radius: 50%; background: radial-gradient(ellipse,rgba(0,0,0,.5),transparent 65%); }
.blueprint-grid { position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(circle,rgba(121,209,197,.22) 1px,transparent 1px); background-size: 18px 18px; }
.mechanism { position: absolute; z-index: 2; inset: 3px 42px 3px 25px; width: calc(100% - 67px); height: calc(100% - 6px); overflow: visible; }
.empty-machine { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; justify-items: center; gap: 9px; color: #b6c8bc; text-align: center; }
.empty-machine span { width: 92px; height: 92px; display: grid; place-items: center; border: 3px dashed #789b91; border-radius: 26px; color: var(--gold); background: rgba(14,69,67,.72); box-shadow: inset 0 0 24px rgba(102,209,196,.13); font-size: 54px; font-weight: 1000; }.empty-machine strong { font-size: 13px; letter-spacing: .04em; }
.pulley-flourish { position: absolute; z-index: 1; right: -26px; top: -40px; width: 215px; height: 215px; object-fit: contain; opacity: 0; transform: rotate(7deg) scale(.78); filter: drop-shadow(0 12px 12px rgba(0,0,0,.38)); transition: opacity 180ms ease-out,transform 220ms ease-out; pointer-events: none; }.pulley-flourish.is-visible { opacity: .2; transform: rotate(7deg) scale(1); }
.effort-meter { position: absolute; z-index: 7; left: 17px; top: 15px; width: 135px; padding: 9px 10px; border: 1px solid rgba(255,224,145,.35); border-radius: 12px; background: rgba(7,35,34,.88); box-shadow: 0 3px 0 rgba(1,17,16,.7); }
.effort-meter span,.load-label { color: #b7cbc5; font-size: 9px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }.effort-meter i { height: 8px; display: block; margin: 5px 0; overflow: hidden; border-radius: 999px; background: #1d3734; }.effort-meter i b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#63d0c2,var(--gold),#e2673f); transition: width 400ms ease-out; }.effort-meter strong { font-size: 11px; }
.load-label { position: absolute; z-index: 7; right: 16px; bottom: 14px; padding: 6px 9px; border: 1px solid rgba(255,224,145,.28); border-radius: 8px; background: rgba(7,35,34,.78); }

.machine .floor-line,.machine .roof-line { fill: none; stroke: #bd8551; stroke-width: 8; stroke-linecap: round; opacity: .75; }
.machine .load rect { fill: #c26c37; stroke: #5c2d19; stroke-width: 5; filter: drop-shadow(0 8px 4px rgba(0,0,0,.32)); }.machine .load path { fill: none; stroke: #f1ae62; stroke-width: 4; opacity: .55; }.machine .load text { fill: #fff1ba; font: 1000 18px "Avenir Next",sans-serif; text-anchor: middle; dominant-baseline: middle; }
.lever-beam rect { fill: #f0bb55; stroke: #6c3a1d; stroke-width: 5; filter: drop-shadow(0 6px 3px rgba(0,0,0,.28)); }.lever-fulcrum path { fill: #4ba9a1; stroke: #133f3e; stroke-width: 5; }.lever-fulcrum circle { fill: #f3c35a; stroke: #6c3a1d; stroke-width: 5; }
.effort-arrow path { fill: none; stroke: #6cd7c9; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }.effort-arrow text,.support-note,.ratio-note { fill: #a6e5dc; font: 1000 13px "Avenir Next",sans-serif; letter-spacing: .08em; }.ramp-arrow text { font-size: 12px; }
.ramp { fill: #b16d3d; stroke: #5d321c; stroke-width: 6; }.ramp-edge { fill: none; stroke: #f1c66e; stroke-width: 9; stroke-linecap: round; }
.pulley-wheel circle:first-child { fill: #d49342; stroke: #65381f; stroke-width: 7; }.pulley-wheel circle:nth-child(2) { fill: #45a099; stroke: #123f3e; stroke-width: 5; }.rope { fill: none; stroke: #f5e1ae; stroke-width: 11; stroke-linecap: round; filter: drop-shadow(0 3px 1px rgba(0,0,0,.3)); }.hook { fill: none; stroke: #d2773e; stroke-width: 9; stroke-linecap: round; }
.gear circle:first-child { fill: #d99b3f; stroke: #66381b; stroke-width: 9; stroke-dasharray: 10 7; }.gear circle:nth-child(2) { fill: #1c716e; stroke: #0b403e; stroke-width: 8; }.gear circle:nth-child(3) { fill: #efbd55; stroke: #693919; stroke-width: 6; }.gear path { stroke: #70c7bc; stroke-width: 8; opacity: .55; }.small-gear circle:first-child { fill: #c76f3a; }.crank { fill: none; stroke: #e0a64d; stroke-width: 15; stroke-linecap: round; }.handle { fill: #5ebbb0; stroke: #123f3e; stroke-width: 6; }.resistance path { stroke: #e6b14f; stroke-width: 10; }.resistance rect { fill: #b75f34; stroke: #592819; stroke-width: 5; }.resistance text { fill: #fff1b8; font: 1000 12px sans-serif; text-anchor: middle; }

.feedback { min-height: 34px; display: grid; place-items: center; color: #bce9dc; font-size: 13px; font-weight: 900; text-align: center; }.feedback.is-error { color: #ffc0aa; }
.action-area { min-height: 75px; display: flex; align-items: end; justify-content: center; }
.choice-grid { width: min(850px,100%); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.choice-grid.is-single { width: 300px; grid-template-columns: 1fr; }
.choice { position: relative; min-height: 72px; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: 1fr 1fr; column-gap: 8px; align-items: end; padding: 9px 13px; border: 2px solid #4d9991; border-radius: 17px; color: white; background: linear-gradient(180deg,#1b6e6a,#12504f); box-shadow: inset 0 2px rgba(255,255,255,.1),0 6px 0 #082f2f; text-align: left; transition: transform 140ms ease-out,box-shadow 140ms ease-out,border-color 140ms ease-out,filter 140ms ease-out; }
.choice > b { grid-row: 1/-1; align-self: center; width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid #7c4c21; border-radius: 12px; color: #4d2b12; background: linear-gradient(180deg,#ffe28a,#dda344); box-shadow: inset 0 2px white,0 3px 0 #653719; font-size: 21px; text-align: center; }.choice > span { align-self: end; font-size: 14px; font-weight: 1000; line-height: 1.05; }.choice small { align-self: start; margin-top: 3px; color: #bcd6d0; font-size: 10px; font-weight: 800; line-height: 1.15; }
.choice:hover { transform: translateY(-2px); border-color: #9ce9df; filter: brightness(1.09); box-shadow: inset 0 2px rgba(255,255,255,.1),0 8px 0 #082f2f; }.choice:active { transform: translateY(4px); box-shadow: inset 0 2px rgba(255,255,255,.1),0 2px 0 #082f2f; }

.sparks { position: absolute; z-index: 9; left: 50%; top: 52%; width: 0; height: 0; pointer-events: none; }.sparks i { position: absolute; width: 12px; height: 12px; opacity: 0; background: var(--gold); clip-path: polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%); }.sparks i:nth-child(2n) { background: var(--teal-light); }.sparks i:nth-child(3n) { background: #fff5c3; }
.workshop.is-celebrating .sparks i { animation: spark-burst 760ms ease-out both; }.sparks i:nth-child(1){--x:-170px;--y:-95px}.sparks i:nth-child(2){--x:-95px;--y:-145px;animation-delay:45ms}.sparks i:nth-child(3){--x:5px;--y:-155px;animation-delay:90ms}.sparks i:nth-child(4){--x:115px;--y:-125px;animation-delay:135ms}.sparks i:nth-child(5){--x:180px;--y:-48px;animation-delay:180ms}.sparks i:nth-child(6){--x:145px;--y:72px;animation-delay:210ms}.sparks i:nth-child(7){--x:-130px;--y:75px;animation-delay:240ms}.sparks i:nth-child(8){--x:-195px;--y:-10px;animation-delay:270ms}
.workshop.is-running .lever-machine .lever-beam { transform-origin: 390px 215px; animation: lever-run 720ms ease-out; }.workshop.is-running .lever-machine .load { animation: load-lift 720ms ease-out; }.workshop.is-running .ramp-machine .load { animation: ramp-roll 760ms ease-out; }.workshop.is-running .pulley-machine .load { animation: pulley-lift 760ms ease-out; }.workshop.is-running .wheel-machine .big-gear { transform-origin: 330px 165px; animation: gear-spin 800ms ease-out; }.workshop.is-running .wheel-machine .small-gear { transform-origin: 505px 210px; animation: gear-spin-back 800ms ease-out; }
.workshop.is-miss .play-panel { animation: gentle-shake 390ms ease-out; }.workshop.is-celebrating .play-panel { box-shadow: inset 0 1px rgba(255,255,255,.1),0 9px 0 rgba(5,27,27,.83),0 0 58px rgba(245,189,69,.3); }
.toast { position: absolute; z-index: 50; left: 50%; bottom: 28px; max-width: 76%; padding: 11px 18px; opacity: 0; transform: translate(-50%,12px); border: 2px solid #ffe99d; border-radius: 999px; color: #3c2313; background: #f5ca62; box-shadow: 0 5px 0 #71401e,0 10px 25px rgba(0,0,0,.38); pointer-events: none; font-size: 13px; font-weight: 1000; transition: opacity 150ms ease-out,transform 150ms ease-out; }.toast.is-showing { opacity: 1; transform: translate(-50%,0); }

@keyframes mascot-cheer { 0%,100%{transform:translateY(0) rotate(0)} 34%{transform:translateY(-20px) rotate(-4deg) scale(1.04)} 64%{transform:translateY(-5px) rotate(3deg)} }
@keyframes mascot-oops { 0%,100%{transform:rotate(0)} 28%{transform:rotate(-5deg) translateX(-5px)} 62%{transform:rotate(4deg) translateX(4px)} }
@keyframes gentle-shake { 0%,100%{transform:translateX(0)} 24%{transform:translateX(-7px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }
@keyframes spark-burst { 0%{opacity:1;transform:translate(0,0) rotate(0) scale(.25)} 72%{opacity:1} 100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(180deg) scale(1.25)} }
@keyframes lever-run { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-8deg)} }
@keyframes load-lift { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-27px)} }
@keyframes ramp-roll { 0%{transform:translate(340px,65px) rotate(-11deg)} 65%{transform:translate(135px,-8px) rotate(-11deg)} 100%{transform:translate(145px,0) rotate(-11deg)} }
@keyframes pulley-lift { 0%{transform:translate(386px,237px)} 70%,100%{transform:translate(386px,180px)} }
@keyframes gear-spin { to{transform:rotate(120deg)} }.wheel-machine .big-gear { transform-box: fill-box; transform-origin: center; } @keyframes gear-spin-back { to{transform:rotate(-230deg)} }.wheel-machine .small-gear { transform-box: fill-box; transform-origin: center; }

@media (max-height: 760px) { .workshop-hud { top: 11px; height: 62px; }.mission-card,.scoreboard { height: 62px; }.game-layout { top: 87px; bottom: 14px; }.play-panel { padding-top: 12px; grid-template-rows: auto minmax(280px,1fr) 30px auto; }.challenge-header { min-height: 69px; }.challenge-header h1 { font-size: 29px; }.machine-stage { min-height: 280px; }.action-area { min-height: 65px; }.choice { min-height: 63px; }.mascot { width: 210px; }.speech { min-height: 70px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }