:root {
  color-scheme: light;
  --navy: #092b43;
  --navy-2: #104866;
  --paper: #fffdf4;
  --muted: #60727a;
  --orange: #ff7a22;
  --orange-dark: #a8420e;
  --teal: #16b7ad;
  --teal-dark: #08716d;
  --yellow: #ffd54b;
  --blue: #31a9ed;
  --pink: #f15e91;
  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: 1000px; min-height: 650px; overflow: hidden; }
body { margin: 0; color: var(--navy); background: #8ed5ef; }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #ffe071; 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: 13px; }
.yard { position: relative; height: 100%; min-height: 624px; overflow: hidden; isolation: isolate; border: 1px solid #5cabc7; border-radius: 25px; background: #78cdea; box-shadow: 0 9px 0 #579bb5, 0 25px 54px rgba(9,43,67,.2); }
.world { position: absolute; z-index: -2; inset: 0; background: linear-gradient(rgba(23,76,100,.08),rgba(23,76,100,.16)), url("art/construction-yard-01.webp") center/cover no-repeat; }
.world::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg,rgba(9,43,67,.1),transparent 25% 76%,rgba(9,43,67,.08)),linear-gradient(transparent 66%,rgba(9,43,67,.22)); }

.yard-hud { position: absolute; z-index: 20; left: 18px; right: 18px; top: 16px; height: 70px; display: grid; grid-template-columns: 238px minmax(260px,1fr) auto; align-items: center; gap: 15px; }
.brand-card,.contract-card,.difficulty-card,.scoreboard { border: 2px solid rgba(9,43,67,.19); background: rgba(255,253,244,.95); box-shadow: 0 5px 0 rgba(9,43,67,.17); backdrop-filter: blur(8px); }
.brand-card { height: 70px; display: flex; align-items: center; gap: 11px; padding: 10px 15px; border-radius: 17px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; transform: rotate(3deg); border: 3px solid var(--navy); border-radius: 12px; color: white; background: var(--orange); box-shadow: inset 0 -6px rgba(126,42,8,.2); font-size: 24px; }
.brand-card div,.contract-card { display: flex; flex-direction: column; }.brand-card span:not(.brand-mark),.contract-card span,.difficulty-card span,.scoreboard span,.blueprint-panel > span,.dimension > span,.layer-radar span,.target-meter > span { color: var(--muted); font-size: 10px; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; }
.brand-card strong { margin-top: 2px; font-size: 20px; letter-spacing: -.025em; }
.contract-card { justify-self: center; width: min(380px,100%); padding: 10px 16px; border-radius: 15px; }.contract-card strong { margin-top: 2px; font-size: 14px; }.contract-card i,.difficulty-card i { height: 7px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: #d6e2e2; }.contract-card i b,.difficulty-card i b { display: block; width: 8%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--orange),var(--yellow)); transition: width 220ms ease-out; }
.difficulty-card { justify-self: center; width: min(380px,100%); display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 9px 15px; border-radius: 15px; }.difficulty-card i { grid-column: 1/-1; }.difficulty-card > strong { font-size: 12px; }
.scoreboard { height: 70px; display: flex; align-items: stretch; padding: 7px; border-radius: 16px; }.scoreboard > div { min-width: 71px; display: grid; place-content: center; padding: 0 10px; text-align: center; }.scoreboard > div + div { border-left: 1px solid #d3ddda; }.scoreboard strong { margin-top: 3px; font-size: 21px; line-height: 1; }.scoreboard strong i { color: var(--orange); font-style: normal; font-size: 15px; }

.bot-bay { position: absolute; z-index: 4; left: 20px; top: 103px; bottom: 22px; width: 238px; overflow: hidden; border: 2px solid rgba(9,43,67,.2); border-radius: 21px; background: linear-gradient(rgba(255,255,255,.18),rgba(9,43,67,.18)); box-shadow: inset 0 0 40px rgba(255,255,255,.16); }
.bot-bubble { position: absolute; z-index: 7; left: 13px; right: 13px; top: 13px; min-height: 58px; display: grid; place-items: center; padding: 9px 13px; border: 3px solid var(--navy); border-radius: 15px 15px 15px 5px; background: var(--paper); box-shadow: 0 5px 0 rgba(9,43,67,.25); font-size: 12px; font-weight: 900; line-height: 1.22; text-align: center; }
.bot-wrap { position: absolute; z-index: 4; left: 7px; right: 7px; top: 78px; height: 255px; display: grid; place-items: center; transform-origin: center bottom; animation: bot-bob 2.8s ease-in-out infinite; }.bot { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 7px rgba(9,43,67,.28)); }.bot-spark { position: absolute; right: 20px; top: 34px; color: var(--yellow); font-size: 25px; font-style: normal; text-shadow: 0 2px 0 var(--orange-dark); animation: twinkle 1.3s ease-in-out infinite; }
.blueprint-panel { position: absolute; z-index: 6; left: 13px; right: 13px; bottom: 14px; min-height: 140px; padding: 15px 14px; border: 3px solid #0c5375; border-radius: 17px; color: white; background: linear-gradient(150deg,#116f92,#0c4260); box-shadow: 0 6px 0 rgba(9,43,67,.38); text-align: center; }.blueprint-panel > span { color: #aee8f4; }.blueprint-panel > strong { display: block; margin-top: 7px; font-size: 15px; }.blueprint-panel small { display: block; margin-top: 8px; color: #c9eff4; font-weight: 800; }
.skill-lights { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 12px; }.skill-lights i { height: 11px; border: 2px solid #72a8b9; border-radius: 99px; background: #173c50; }.skill-lights i.is-active { border-color: white; background: var(--yellow); box-shadow: 0 0 0 3px rgba(255,213,75,.2),0 0 15px rgba(255,213,75,.5); }
.yard-props { position: absolute; z-index: 3; left: -10px; bottom: 135px; width: 150px; opacity: .95; pointer-events: none; filter: drop-shadow(0 7px 4px rgba(9,43,67,.24)); }

.mission-card { position: absolute; z-index: 5; left: 276px; right: 22px; top: 103px; bottom: 22px; display: grid; grid-template-rows: auto minmax(310px,1fr) 42px 28px 74px; align-content: start; padding: 18px 25px 22px; overflow: hidden; border: 2px solid #d9d1bd; border-radius: 22px; background: rgba(255,253,244,.97); box-shadow: 0 9px 0 rgba(9,43,67,.2),0 22px 45px rgba(9,43,67,.2); }
.mission-copy { text-align: center; }.mission-copy > span { color: var(--orange-dark); font-size: 10px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }.mission-copy h1 { margin: 4px 0 4px; font-size: clamp(26px,2.6vw,39px); line-height: 1.03; letter-spacing: -.045em; }.mission-copy p { margin: 0; color: var(--muted); font-size: 13px; }

.build-stage { position: relative; min-height: 310px; margin-top: 10px; overflow: hidden; border: 3px solid #0d5475; border-radius: 21px; background: linear-gradient(#c9f1ff 0 62%,#a4c7bb 62% 100%); box-shadow: inset 0 0 0 5px #fff,0 7px 0 #9ab8bc; }
.build-stage::before { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; content: ""; opacity: .42; background: linear-gradient(30deg,transparent 49%,rgba(9,43,67,.14) 50%,transparent 51%),linear-gradient(-30deg,transparent 49%,rgba(9,43,67,.14) 50%,transparent 51%); background-size: 45px 26px; }
.stage-sign { position: absolute; z-index: 9; left: 14px; top: 13px; display: flex; gap: 9px; align-items: center; padding: 7px 11px; transform: rotate(-1deg); border: 2px solid #9b5b08; border-radius: 10px; color: #613a05; background: var(--yellow); box-shadow: 0 3px 0 #9b5b08; font-size: 11px; }.stage-sign span { font-weight: 1000; text-transform: uppercase; }.cube-svg { position: absolute; z-index: 3; left: 14px; right: 14px; top: 30px; width: calc(100% - 28px); height: calc(100% - 40px); overflow: visible; }.cube { transition: opacity 160ms ease-out,transform 180ms cubic-bezier(.2,.9,.3,1.2); transform-box: fill-box; transform-origin: center; animation: cube-land 260ms cubic-bezier(.2,.9,.3,1.2) both; }.cube .top { fill: #60d7cf; }.cube .left { fill: #129b9c; }.cube .right { fill: #087a85; }.cube.layer-1 .top { fill: #ffb446; }.cube.layer-1 .left { fill: #ed792b; }.cube.layer-1 .right { fill: #bd4d18; }.cube.layer-2 .top { fill: #69bcf1; }.cube.layer-2 .left { fill: #2589cf; }.cube.layer-2 .right { fill: #17639f; }.cube.layer-3 .top { fill: #f687ad; }.cube.layer-3 .left { fill: #db4d83; }.cube.layer-3 .right { fill: #9e2f62; }.cube polygon { stroke: #083b55; stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }.cube .shine { fill: none; stroke: rgba(255,255,255,.62); stroke-width: 1.8; stroke-linecap: round; }.cube-svg.is-scanning .cube { animation: layer-pulse 680ms ease-out both; }.cube-svg.is-scanning .cube.layer-1 { animation-delay: 100ms; }.cube-svg.is-scanning .cube.layer-2 { animation-delay: 200ms; }.cube-svg.is-scanning .cube.layer-3 { animation-delay: 300ms; }
.dimension-line { fill: none; stroke: #092b43; stroke-width: 2; stroke-dasharray: 5 4; }.dimension-tag rect { fill: #fffdf4; stroke: #092b43; stroke-width: 2; }.dimension-tag text { fill: #092b43; font: 900 13px "Avenir Next",sans-serif; text-anchor: middle; dominant-baseline: middle; }
.layer-radar,.target-meter { position: absolute; z-index: 8; right: 14px; top: 14px; min-width: 160px; padding: 9px 12px; border: 2px solid var(--navy); border-radius: 12px; background: rgba(255,253,244,.94); box-shadow: 0 4px 0 rgba(9,43,67,.2); text-align: center; }.layer-radar strong { display: block; margin-top: 3px; font-size: 13px; }.target-meter { width: 180px; }.target-meter > span { display: block; }.target-meter > span b { color: var(--orange-dark); font-size: 13px; }.target-meter > i { display: block; height: 12px; margin-top: 6px; overflow: hidden; border: 2px solid var(--navy); border-radius: 99px; background: white; }.target-meter > i b { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--teal),var(--yellow),var(--orange)); transition: width 180ms ease-out; }.target-meter > strong { display: block; margin-top: 4px; font-size: 11px; }
.dimension-controls { position: absolute; z-index: 10; left: 14px; right: 14px; bottom: 12px; display: flex; justify-content: center; gap: 10px; }.dimension { min-width: 142px; display: grid; grid-template-columns: 42px 38px 42px; grid-template-rows: auto 42px; align-items: center; justify-content: center; padding: 7px 9px 9px; border: 2px solid #8ca3a9; border-radius: 15px; background: rgba(255,253,244,.96); box-shadow: 0 4px 0 rgba(9,43,67,.17); }.dimension > span { grid-column: 1/-1; margin-bottom: 4px; text-align: center; }.dimension button { width: 38px; height: 38px; padding: 0; border: 2px solid var(--navy); border-radius: 12px; color: white; background: var(--orange); box-shadow: 0 3px 0 var(--orange-dark); font-size: 24px; font-weight: 1000; line-height: 1; }.dimension button:active { transform: translateY(3px); box-shadow: none; }.dimension button:disabled { opacity: .3; cursor: not-allowed; box-shadow: none; }.dimension b { font-size: 24px; text-align: center; }

.volume-readout { align-self: center; justify-self: center; min-width: 390px; padding: 7px 20px; transform: rotate(-.4deg); border: 3px solid #9b5b08; border-radius: 13px; color: #5f3906; background: linear-gradient(#ffe772,#ffc62f); box-shadow: 0 4px 0 #a76509; font-size: 17px; font-weight: 1000; letter-spacing: .025em; text-align: center; }.feedback { display: grid; place-items: center; min-height: 28px; color: var(--teal-dark); font-size: 13px; font-weight: 900; text-align: center; }.feedback.is-error { color: #bd315d; }
.action-area { display: flex; align-items: center; justify-content: center; gap: 11px; }.choice-grid { width: min(650px,100%); display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; }.choice,.primary { min-height: 58px; border: 3px solid var(--navy); border-radius: 17px; background: white; box-shadow: 0 6px 0 #a9bec5; font-weight: 1000; transition: transform 130ms ease-out,box-shadow 130ms ease-out,background 130ms ease-out; }.choice { font-size: 24px; }.choice small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }.choice:nth-child(1){border-color:#e06122}.choice:nth-child(2){border-color:#098f91}.choice:nth-child(3){border-color:#3d7fc8}.choice:hover,.primary:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #a9bec5; }.choice:active,.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 #a9bec5; }.primary { min-width: 245px; padding: 0 23px; border-color: #086a6d; color: white; background: linear-gradient(#21c2b6,#0e928f); box-shadow: 0 6px 0 #086a6d; font-size: 15px; }.primary.is-orange { border-color: var(--orange-dark); background: linear-gradient(#ff9a39,#f36b18); box-shadow: 0 6px 0 var(--orange-dark); }.explain-grid .choice { padding: 7px 9px; font-size: 12px; }

.yard.is-miss .mission-card { animation: miss 330ms ease-out; }.yard.is-snapping .cube-svg { animation: snap 380ms cubic-bezier(.2,.9,.3,1.2); }.yard.is-celebrating .bot-wrap { animation: bot-cheer 720ms cubic-bezier(.2,.9,.3,1.2); }.badge-burst { position: absolute; z-index: 60; left: 64%; top: 45%; width: 190px; height: 190px; opacity: 0; transform: translate(-50%,-50%) scale(.25) rotate(-15deg); pointer-events: none; }.badge-burst img { width: 100%; height: 100%; object-fit: contain; }.yard.is-celebrating .badge-burst { animation: badge-burst 760ms cubic-bezier(.2,.8,.3,1.2); }.confetti { position: absolute; z-index: 55; left: 64%; top: 45%; pointer-events: none; }.confetti i { --c: var(--yellow); position: absolute; width: 12px; height: 17px; opacity: 0; border-radius: 4px; background: var(--c); }.yard.is-celebrating .confetti i { animation: confetti 720ms ease-out both; }.confetti i:nth-child(1){--x:-190px;--y:-130px;--c:var(--teal)}.confetti i:nth-child(2){--x:-110px;--y:-185px;--c:var(--orange);animation-delay:30ms}.confetti i:nth-child(3){--x:-20px;--y:-198px;--c:var(--blue);animation-delay:60ms}.confetti i:nth-child(4){--x:80px;--y:-175px;animation-delay:90ms}.confetti i:nth-child(5){--x:170px;--y:-115px;--c:var(--pink);animation-delay:120ms}.confetti i:nth-child(6){--x:205px;--y:-20px;--c:var(--teal);animation-delay:150ms}.confetti i:nth-child(7){--x:170px;--y:85px;--c:var(--orange);animation-delay:180ms}.confetti i:nth-child(8){--x:85px;--y:150px;--c:var(--blue);animation-delay:210ms}.confetti i:nth-child(9){--x:-10px;--y:170px;animation-delay:240ms}.confetti i:nth-child(10){--x:-105px;--y:135px;--c:var(--pink);animation-delay:270ms}.confetti i:nth-child(11){--x:-180px;--y:70px;--c:var(--teal);animation-delay:300ms}.confetti i:nth-child(12){--x:-210px;--y:-28px;--c:var(--orange);animation-delay:330ms}
.toast { position: absolute; z-index: 70; left: 64%; bottom: 34px; max-width: 64%; padding: 11px 18px; opacity: 0; transform: translate(-50%,12px); border: 3px solid white; border-radius: 99px; color: white; background: var(--navy); box-shadow: 0 5px 0 rgba(9,43,67,.35); pointer-events: none; font-size: 13px; font-weight: 900; transition: opacity 150ms ease-out,transform 150ms ease-out; }.toast.is-showing { opacity: 1; transform: translate(-50%,0); }

@keyframes cube-land { from { opacity: 0; transform: translateY(-18px) scale(.72); } }
@keyframes layer-pulse { 45% { filter: brightness(1.35) drop-shadow(0 0 6px rgba(255,255,255,.9)); transform: translateY(-5px); } }
@keyframes snap { 50% { transform: scale(1.035); } }
@keyframes miss { 25% { transform: translateX(-7px); } 55% { transform: translateX(6px); } 80% { transform: translateX(-3px); } }
@keyframes bot-bob { 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes bot-cheer { 0% { transform: translateY(8px) scale(.95); } 50% { transform: translateY(-16px) rotate(3deg) scale(1.06); } }
@keyframes twinkle { 50% { opacity: .35; transform: rotate(20deg) scale(.72); } }
@keyframes badge-burst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.25) rotate(-15deg); } 40% { opacity: 1; transform: translate(-50%,-50%) scale(1.08) rotate(3deg); } 78% { opacity: 1; transform: translate(-50%,-50%) scale(.96); } 100% { opacity: 0; transform: translate(-50%,-58%) scale(1.05); } }
@keyframes confetti { 0% { opacity: 0; transform: translate(0,0) rotate(0) scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) rotate(270deg) scale(1.1); } }

@media (max-height: 760px) { .yard-hud { top: 10px; height: 66px; }.brand-card,.scoreboard { height: 66px; }.bot-bay,.mission-card { top: 89px; bottom: 14px; }.mission-card { grid-template-rows: auto minmax(285px,1fr) 37px 26px 67px; padding-top: 13px; }.build-stage { min-height: 285px; margin-top: 6px; }.bot-wrap { top: 68px; height: 220px; }.blueprint-panel { min-height: 127px; }.yard-props { display: none; }.dimension { grid-template-rows: auto 36px; }.dimension button { width: 34px; height: 34px; }.volume-readout { padding-block: 5px; }.choice,.primary { min-height: 52px; } }
@media (max-width: 1120px) { .yard-hud { grid-template-columns: 220px 1fr auto; }.bot-bay { width: 220px; }.mission-card { left: 256px; }.dimension { min-width: 125px; grid-template-columns: 36px 34px 36px; }.scoreboard > div { min-width: 63px; padding-inline: 7px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }