:root { color-scheme: dark; font-family: Inter, ui-rounded, "Avenir Next", system-ui, sans-serif; --ink:#10243a; --navy:#16324c; --teal:#17c7c1; --gold:#ffc642; --orange:#ff7a3d; --cream:#fff4d6; --red:#ff5c58; }
* { box-sizing:border-box; }
html, body { margin:0; min-width:1100px; min-height:720px; height:100%; overflow:hidden; background:#10243a; }
button { font:inherit; }
button:focus-visible { outline:4px solid #fff; outline-offset:3px; }
.lesson-shell { height:100%; padding:16px; }
.worksite { position:relative; height:100%; min-height:690px; overflow:hidden; border-radius:28px; isolation:isolate; background:linear-gradient(180deg,rgba(9,26,42,.1),rgba(6,24,39,.68)),url("art/construction-backdrop-01.webp") center/cover; box-shadow:inset 0 0 0 2px rgba(255,255,255,.14),0 18px 60px #06131f; }
.worksite::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 53% 48%,transparent 0 27%,rgba(4,15,25,.32) 76%); pointer-events:none; }
.sun-glow { position:absolute; width:360px; height:360px; left:30%; top:2%; border-radius:50%; background:rgba(255,197,86,.18); filter:blur(35px); z-index:-1; }
.hud { position:absolute; z-index:8; top:20px; left:22px; right:22px; height:72px; display:flex; align-items:center; gap:14px; }
.mode-badge,.meter,.scores { background:rgba(9,29,46,.88); border:1px solid rgba(255,255,255,.17); box-shadow:0 8px 22px rgba(3,14,24,.28); backdrop-filter:blur(12px); }
.mode-badge { border-radius:18px; padding:10px 16px; display:grid; min-width:190px; }
.mode-badge span,.meter span,.scores span,.tower-label span { color:#b8d4df; font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.mode-badge strong { font-size:17px; color:white; }
.meter { display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 12px; border-radius:18px; padding:9px 14px; min-width:245px; }
.meter span { grid-column:1/-1; }
.meter span b { color:var(--gold); font-size:14px; }
.meter i { width:132px; height:8px; overflow:hidden; border-radius:10px; background:#071925; }
.meter i b { display:block; width:18%; height:100%; border-radius:10px; background:linear-gradient(90deg,var(--teal),var(--gold),var(--orange)); transition:width .35s ease-out; }
.meter strong { color:white; font-size:12px; }
.scores { margin-left:auto; display:flex; border-radius:18px; overflow:hidden; }
.scores div { min-width:84px; padding:9px 16px; text-align:center; border-left:1px solid rgba(255,255,255,.12); }
.scores div:first-child { border-left:0; }
.scores strong { display:block; color:white; font-size:20px; line-height:1.05; }
.scores strong i { color:var(--gold); font-style:normal; font-size:14px; }
.mission-card { position:absolute; z-index:5; left:28px; top:110px; bottom:26px; width:270px; padding:23px; border-radius:24px; color:var(--ink); background:linear-gradient(145deg,#fff9e9,#f6dfad); box-shadow:0 18px 42px rgba(5,18,29,.38),inset 0 0 0 2px rgba(255,255,255,.65); display:flex; flex-direction:column; }
.mission-card::before { content:""; position:absolute; inset:8px; pointer-events:none; border:1px dashed rgba(87,57,26,.24); border-radius:18px; }
.mission-copy,.target-ticket,.action-area,.feedback { position:relative; }
.kicker { display:block; color:#a74e29; font-size:11px; line-height:1.2; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.mission-copy h1 { margin:10px 0 10px; font-family:"Arial Rounded MT Bold",Inter,sans-serif; font-size:29px; line-height:1.02; letter-spacing:-.035em; }
.mission-copy p { margin:0; color:#4b5960; font-size:14px; line-height:1.45; font-weight:650; }
.target-ticket { margin:22px 0 14px; padding:14px; border:2px solid rgba(23,50,76,.16); border-radius:15px; background:rgba(255,255,255,.52); text-align:center; }
.target-ticket span { display:block; color:#667279; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.target-ticket strong { display:block; margin:2px 0; font-size:34px; color:var(--navy); }
.target-ticket small { color:#8a5937; font-weight:800; }
.action-area { margin-top:auto; display:grid; gap:9px; }
.primary,.choice,.nudge { min-height:48px; border:0; cursor:pointer; transition:transform .14s ease-out,filter .14s ease-out,box-shadow .14s ease-out; }
.primary:hover,.choice:hover,.nudge:hover { transform:translateY(-2px); filter:brightness(1.05); }
.primary:active,.choice:active,.nudge:active { transform:translateY(1px) scale(.98); }
.primary { border-radius:14px; padding:12px 14px; color:white; background:var(--navy); box-shadow:0 5px 0 #091d2e; font-weight:900; }
.primary.is-gold { color:#34230c; background:var(--gold); box-shadow:0 5px 0 #be711e; }
.choice-grid { display:grid; gap:8px; }
.choice { border-radius:13px; padding:10px 12px; color:var(--navy); background:#fff; border:2px solid rgba(22,50,76,.15); box-shadow:0 3px 0 rgba(22,50,76,.18); font-weight:900; text-align:left; }
.choice small { display:block; margin-top:2px; color:#738087; font-size:10px; font-weight:700; }
.feedback { min-height:38px; margin-top:12px; color:#26715e; font-size:12px; line-height:1.35; font-weight:850; text-align:center; }
.feedback.is-error { color:#a63831; }
.build-bay { position:absolute; z-index:4; left:318px; right:293px; top:110px; bottom:27px; min-width:485px; border-radius:28px; border:1px solid rgba(255,255,255,.18); background:linear-gradient(180deg,rgba(9,29,46,.91),rgba(8,24,37,.84)); box-shadow:0 22px 55px rgba(3,14,24,.36),inset 0 0 0 2px rgba(255,255,255,.04); backdrop-filter:blur(9px); }
.bay-caption { position:absolute; z-index:3; top:18px; left:22px; right:22px; display:flex; justify-content:space-between; align-items:center; }
.bay-caption span { color:#a9c9d5; font-size:12px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.bay-caption strong { color:var(--gold); font-size:31px; text-shadow:0 2px 12px rgba(255,198,66,.3); }
.sum-clue { position:absolute; top:61px; left:50%; z-index:4; transform:translateX(-50%); border-radius:13px; padding:8px 16px; color:#09252f; background:#bff5ee; font-size:13px; font-weight:900; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,.18); }
.protractor { position:absolute; left:50%; top:51%; width:min(96%,640px); aspect-ratio:640/355; transform:translate(-50%,-50%); touch-action:none; user-select:none; cursor:crosshair; }
.protractor-svg { width:100%; height:100%; overflow:visible; filter:drop-shadow(0 15px 18px rgba(0,0,0,.26)); }
.protractor-glass { fill:rgba(100,226,222,.12); stroke:rgba(172,255,248,.24); stroke-width:2; }
.protractor-edge { fill:none; stroke:#f2d07a; stroke-width:7; stroke-linecap:round; }
.tick { stroke:rgba(241,238,206,.68); stroke-width:2; }
.tick.major { stroke:#fff2bf; stroke-width:3; }
.tick-label { fill:#d9eff0; font-size:12px; font-weight:800; text-anchor:middle; dominant-baseline:middle; }
.baseline { stroke:#d9bc78; stroke-width:10; stroke-linecap:round; }
.angle-wedge { fill:rgba(23,199,193,.28); stroke:var(--teal); stroke-width:3; }
.target-wedge { fill:rgba(255,198,66,.16); stroke:rgba(255,198,66,.46); stroke-width:2; stroke-dasharray:7 7; }
.hinge-arm { stroke:#ff7a3d; stroke-width:20; stroke-linecap:round; filter:drop-shadow(0 4px 4px rgba(0,0,0,.3)); }
.target-arm { stroke:#ffc642; stroke-width:10; stroke-linecap:round; stroke-dasharray:10 12; opacity:.74; }
.hinge-outer { fill:#f3bd45; stroke:#7c4b19; stroke-width:7; }
.hinge-inner { fill:#16324c; stroke:#fff0b5; stroke-width:3; }
.grab-handle { position:absolute; width:54px; height:54px; margin:-27px; border-radius:50%; border:6px solid #ffe095; background:radial-gradient(circle at 35% 30%,#fff5c7 0 10%,#ffc642 13% 48%,#9d5c19 52% 100%); box-shadow:0 8px 18px rgba(0,0,0,.35); cursor:grab; }
.grab-handle:active { cursor:grabbing; }
.snap-label { position:absolute; left:50%; top:24%; transform:translate(-50%,-50%) rotate(-7deg) scale(.6); opacity:0; color:#10243a; background:var(--gold); padding:7px 13px; border:3px solid white; border-radius:9px; font-weight:1000; box-shadow:0 6px 0 #c26625; }
.is-snapped .snap-label { animation:snapPop .44s ease-out; }
.readout-row { position:absolute; bottom:49px; left:50%; display:flex; align-items:center; gap:12px; transform:translateX(-50%); }
.nudge { min-width:62px; border-radius:14px; color:white; background:#24465e; box-shadow:0 4px 0 #071925; font-weight:900; }
.digital-readout { min-width:126px; padding:7px 18px; border:2px solid #4e7889; border-radius:14px; background:#061925; text-align:center; box-shadow:inset 0 0 16px rgba(23,199,193,.15); }
.digital-readout span { display:block; color:#6f9eaa; font-size:9px; font-weight:900; letter-spacing:.16em; }
.digital-readout strong { color:#7ff6ea; font-family:ui-monospace,monospace; font-size:25px; }
.drag-hint { position:absolute; bottom:9px; width:100%; margin:0; color:#8fb1bd; text-align:center; font-size:12px; font-weight:700; }
.foreman { position:absolute; z-index:5; right:20px; top:111px; bottom:24px; width:253px; }
.speech { position:absolute; z-index:4; top:0; left:8px; right:8px; padding:12px 14px; border-radius:15px 15px 4px 15px; color:var(--ink); background:#fff7d9; box-shadow:0 8px 24px rgba(0,0,0,.26); font-size:13px; line-height:1.35; font-weight:850; }
.speech::after { content:""; position:absolute; right:24px; bottom:-12px; border:12px solid transparent; border-top-color:#fff7d9; border-right:0; }
.rivet { position:absolute; z-index:3; top:70px; right:-7px; width:210px; height:210px; object-fit:contain; filter:drop-shadow(0 15px 13px rgba(0,0,0,.34)); transform-origin:55% 85%; transition:filter .2s; }
.tower { position:absolute; left:5px; right:3px; bottom:17px; height:260px; filter:drop-shadow(0 12px 13px rgba(0,0,0,.34)); }
.floor,.roof-piece { position:absolute; left:52px; width:145px; height:42px; opacity:.16; transform:translateY(9px) scale(.93); border:4px solid #74441d; border-radius:7px; background:linear-gradient(90deg,#d98b36 0 48%,#f4bc5e 49% 100%); box-shadow:inset 0 -7px rgba(109,61,23,.28); transition:opacity .3s,transform .4s cubic-bezier(.2,.9,.2,1.2); }
.floor::after { content:""; position:absolute; inset:7px 15px; border:3px solid rgba(69,48,27,.45); }
.floor-one { bottom:35px; }.floor-two { bottom:76px; }.floor-three { bottom:117px; }.floor-four { bottom:158px; }
.roof-piece { bottom:199px; height:52px; clip-path:polygon(50% 0,100% 100%,0 100%); background:#17a9a5; }
.tower[data-builds="1"] .floor-one,.tower[data-builds="2"] .floor-one,.tower[data-builds="2"] .floor-two,.tower[data-builds="3"] .floor-one,.tower[data-builds="3"] .floor-two,.tower[data-builds="3"] .floor-three,.tower[data-builds="4"] .floor,.tower[data-builds="4"] .roof-piece { opacity:1; transform:none; }
.tower-label { position:absolute; bottom:0; left:43px; right:42px; display:flex; justify-content:space-between; color:white; }
.tower-label strong { font-size:12px; }
.payloads { position:absolute; z-index:1; width:93px; height:93px; object-fit:contain; right:-5px; bottom:-3px; opacity:.7; }
.catapult { position:absolute; z-index:3; left:292px; bottom:9px; width:118px; height:118px; object-fit:contain; filter:drop-shadow(0 9px 8px rgba(0,0,0,.35)); }
.flying-block { position:absolute; z-index:12; left:368px; bottom:81px; width:34px; height:29px; opacity:0; border-radius:6px; background:linear-gradient(135deg,#ffd268,#d7822f); border:3px solid #79471f; box-shadow:inset 0 -6px rgba(119,61,21,.25),0 6px 10px rgba(0,0,0,.25); }
.celebration { position:absolute; z-index:20; inset:0; pointer-events:none; }
.celebration i { position:absolute; left:52%; top:40%; width:11px; height:20px; opacity:0; background:var(--gold); }
.celebration i:nth-child(2n) { background:var(--teal); }.celebration i:nth-child(3n) { background:var(--orange); }
.celebration i:nth-child(1){--x:-210px;--y:-170px}.celebration i:nth-child(2){--x:-135px;--y:-220px}.celebration i:nth-child(3){--x:-50px;--y:-180px}.celebration i:nth-child(4){--x:50px;--y:-220px}.celebration i:nth-child(5){--x:140px;--y:-170px}.celebration i:nth-child(6){--x:215px;--y:-100px}.celebration i:nth-child(7){--x:-230px;--y:-70px}.celebration i:nth-child(8){--x:205px;--y:20px}
.toast { position:absolute; z-index:30; left:50%; top:100px; transform:translate(-50%,-14px); padding:11px 18px; border-radius:14px; color:#123044; background:white; font-weight:900; box-shadow:0 9px 28px rgba(0,0,0,.3); opacity:0; transition:.2s ease-out; pointer-events:none; }
.toast.is-showing { opacity:1; transform:translate(-50%,0); }
.worksite.is-miss .build-bay { animation:gentleShake .35s ease-out; }
.worksite.is-miss .rivet { animation:rivetMiss .45s ease-out; }
.worksite.is-building .flying-block { animation:launchBlock .9s cubic-bezier(.2,.7,.4,1) forwards; }
.worksite.is-building .catapult { animation:catapultKick .5s ease-out; }
.worksite.is-building .rivet { animation:rivetCheer .8s ease-out; }
.worksite.is-building .celebration i { animation:confetti .78s ease-out forwards; }
.worksite.is-level-up .build-bay { box-shadow:0 0 0 4px var(--gold),0 22px 55px rgba(255,185,48,.35); }
.worksite.is-level-up .rivet { filter:drop-shadow(0 0 22px #ffe27f); }
.protractor.is-hidden-labels .tick-label { opacity:0; }
.protractor.is-sparse .tick:not(.major) { opacity:.18; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes snapPop { 0%{opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(.5)}45%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1.18)}100%{opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(1)} }
@keyframes gentleShake { 25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)} }
@keyframes rivetMiss { 30%{transform:rotate(-5deg) translateY(3px)}65%{transform:rotate(4deg)} }
@keyframes rivetCheer { 35%{transform:translateY(-18px) rotate(4deg)}70%{transform:translateY(0) rotate(-3deg)} }
@keyframes catapultKick { 30%{transform:rotate(-8deg)}70%{transform:rotate(3deg)} }
@keyframes launchBlock { 0%{opacity:1;transform:translate(0,0) rotate(0)}55%{opacity:1;transform:translate(42vw,-48vh) rotate(290deg)}100%{opacity:0;transform:translate(65vw,-2vh) rotate(480deg)} }
@keyframes confetti { 0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(420deg)} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }