:root { color-scheme: only light; --ink:#082f35; --teal:#087d82; --deep:#064a51; --cyan:#43d4d0; --gold:#f4b942; --orange:#ec713c; --cream:#fff9e9; --paper:#fffdf5; --muted:#5c6c69; --red:#bd4738; }
* { box-sizing: border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body { font-family: ui-rounded,"Avenir Next",Avenir,"Trebuchet MS",sans-serif; color:var(--ink); background:#073c42; }
button { font:inherit; color:inherit; }
button:focus-visible { outline:4px solid #fff; outline-offset:3px; box-shadow:0 0 0 7px #127c86 !important; }
.lesson,.factory { width:100%; height:100%; }
.factory { position:relative; min-width:1100px; min-height:650px; isolation:isolate; overflow:hidden; background:#163f42 url("art/factory-backdrop-01.webp") center/cover no-repeat; }
.world-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(1,33,38,.38),rgba(2,46,50,.05) 24%,rgba(0,33,35,.31)),radial-gradient(circle at 52% 42%,transparent 0 28%,rgba(2,28,31,.2) 76%); }
.factory-hud { position:absolute; z-index:10; left:28px; right:28px; top:22px; height:68px; display:flex; align-items:stretch; gap:12px; }
.brand-plate,.station-plate,.difficulty,.scoreboard { border:2px solid rgba(255,224,144,.72); background:linear-gradient(180deg,rgba(5,77,83,.96),rgba(3,55,62,.97)); box-shadow:0 6px 0 rgba(1,30,33,.55),inset 0 1px rgba(255,255,255,.16); color:white; }
.brand-plate { width:185px; padding:10px 16px; border-radius:14px 5px 5px 14px; }
.brand-plate span,.station-plate span,.difficulty span,.scoreboard span { display:block; color:#a9ece7; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.brand-plate strong { display:block; margin-top:2px; color:#ffe095; font-size:18px; letter-spacing:-.02em; }
.station-plate { min-width:150px; padding:10px 15px; border-radius:5px; }
.station-plate strong { display:block; margin-top:4px; font-size:14px; }
.difficulty { width:205px; padding:7px 14px; border-radius:5px; }
.difficulty[hidden] { display:none; }
.difficulty>div { display:flex; align-items:center; justify-content:space-between; }.difficulty>div b { color:#ffe095; font-size:16px; }
.difficulty>i { height:7px; display:block; margin:4px 0; overflow:hidden; border-radius:9px; background:#032f34; }.difficulty>i b { height:100%; display:block; width:18%; border-radius:inherit; background:linear-gradient(90deg,var(--cyan),var(--gold),var(--orange)); transition:width 300ms ease-out; }
.difficulty>strong { display:block; font-size:10px; }
.scoreboard { margin-left:auto; min-width:295px; display:grid; grid-template-columns:repeat(3,1fr); border-radius:5px 14px 14px 5px; overflow:hidden; }
.scoreboard>div { display:grid; place-content:center; min-width:86px; text-align:center; }.scoreboard>div+div { border-left:1px solid rgba(255,224,144,.33); }
.scoreboard strong { margin-top:2px; font-size:22px; line-height:1; }.scoreboard strong i { color:var(--gold); font-style:normal; font-size:14px; }
.foreman { position:absolute; z-index:5; left:30px; top:164px; bottom:96px; width:245px; pointer-events:none; }
.foreman img { position:absolute; left:-13px; bottom:-22px; width:258px; filter:drop-shadow(0 14px 10px rgba(0,25,28,.4)); transform-origin:50% 85%; transition:transform 180ms ease-out,filter 180ms ease-out; }
.speech { position:absolute; z-index:2; left:26px; top:-48px; width:224px; min-height:82px; padding:14px 16px; border:3px solid var(--ink); border-radius:18px 18px 18px 5px; background:var(--paper); box-shadow:0 7px 0 rgba(3,45,49,.38); font-size:13px; font-weight:850; line-height:1.3; }
.speech::after { content:""; position:absolute; left:20px; bottom:-17px; width:23px; height:23px; transform:rotate(45deg); border-right:3px solid var(--ink); border-bottom:3px solid var(--ink); background:var(--paper); }
.status-lamp { position:absolute; z-index:3; left:42px; bottom:-42px; display:flex; align-items:center; gap:7px; padding:7px 11px; border:2px solid #d89b31; border-radius:999px; color:white; background:#063b40; font-size:10px; font-weight:900; text-transform:uppercase; }.status-lamp i { width:9px; height:9px; border-radius:50%; background:#65f2c2; box-shadow:0 0 12px #65f2c2; }
.order-card { position:absolute; z-index:4; left:300px; right:280px; top:112px; bottom:102px; min-width:530px; display:grid; grid-template-rows:auto minmax(195px,1fr) 42px 32px 86px; padding:24px 32px 25px; overflow:hidden; border:3px solid #b7772a; border-radius:24px; background:linear-gradient(180deg,rgba(255,253,245,.98),rgba(252,242,216,.98)); box-shadow:0 10px 0 rgba(87,49,18,.45),0 26px 50px rgba(2,30,32,.35),inset 0 0 0 4px rgba(255,255,255,.55); }
.order-card::before { content:""; position:absolute; inset:9px; pointer-events:none; border:1px dashed rgba(140,87,29,.25); border-radius:15px; }
.order-heading { position:relative; z-index:1; text-align:center; }.order-heading>span { color:#a5472e; font-size:10px; font-weight:1000; letter-spacing:.14em; text-transform:uppercase; }.order-heading h1 { margin:5px 0 4px; font-size:clamp(27px,2.8vw,39px); line-height:1; letter-spacing:-.045em; }.order-heading p { margin:0; color:var(--muted); font-size:14px; font-weight:650; }
.inspection-stage { position:relative; z-index:1; min-height:0; display:flex; align-items:center; justify-content:center; gap:14px; padding:10px 4px; }
.scan-bay { position:relative; width:min(310px,55%); height:184px; display:grid; place-items:center; overflow:hidden; border:2px solid #2e8585; border-radius:22px; background:radial-gradient(circle,#effff9,#d7efdf); box-shadow:inset 0 0 0 7px rgba(7,103,105,.09),0 6px 0 #bfd4bd; }
.scan-bay::before { content:""; position:absolute; inset:0; opacity:.32; background:linear-gradient(rgba(7,109,110,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(7,109,110,.2) 1px,transparent 1px); background-size:22px 22px; }
.scan-line { position:absolute; z-index:3; left:9%; right:9%; top:15%; height:3px; opacity:0; background:#ff714f; box-shadow:0 0 15px 4px rgba(255,88,58,.55); }
.is-scanning .scan-line { opacity:1; animation:scan 700ms ease-in-out both; }
.shape-art { position:relative; z-index:2; width:154px; height:154px; filter:drop-shadow(0 8px 5px rgba(8,47,53,.18)); transition:transform 220ms ease-out; }.shape-art .outline { fill:#f4b942; stroke:#083d42; stroke-width:5; stroke-linejoin:round; }.shape-art .face-a{fill:#45c6bd}.shape-art .face-b{fill:#ed8a45}.shape-art .face-c{fill:#f6c85f}.shape-art .line{fill:none;stroke:#083d42;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}.shape-art .fold{fill:none;stroke:#a94a35;stroke-width:3;stroke-dasharray:5 4}.shape-art .vertex{fill:#ff6b46;stroke:#083d42;stroke-width:2}
.property-tags { display:grid; gap:8px; min-width:135px; }.property-tags span { padding:9px 12px; border:2px solid #a5c9be; border-radius:10px; color:#15535a; background:#e9f7ef; box-shadow:0 3px 0 #c3dbd0; font-size:12px; font-weight:950; }
.property-tags span b { color:#a5472e; }
.mini-fold { width:64px; color:#a5472e; font-size:27px; font-weight:1000; text-align:center; }
.evidence { position:relative; z-index:1; display:grid; place-items:center; color:#17635d; font-size:13px; font-weight:900; text-align:center; }.evidence b { color:#a5472e; }
.feedback { position:relative; z-index:1; display:grid; place-items:center; color:#16665c; font-size:13px; font-weight:900; text-align:center; }.feedback.is-error { color:var(--red); }
.action-area { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; }
.choice-grid { width:min(650px,100%); display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.choice,.primary { min-height:62px; border:2px solid #8eb7ad; border-radius:14px; background:#fff; box-shadow:0 5px 0 #bad0c7; font-weight:950; transition:transform 140ms ease-out,box-shadow 140ms ease-out,border-color 140ms ease-out; cursor:pointer; }
.choice { display:flex; align-items:center; justify-content:center; gap:8px; padding:7px 10px; font-size:16px; }.choice svg { width:46px; height:46px; flex:0 0 auto; filter:none; }.choice.is-count { font-size:28px; }.choice small { display:block; color:var(--muted); font-size:10px; }
.choice:hover,.primary:hover { transform:translateY(-2px); border-color:var(--teal); box-shadow:0 7px 0 #a9c7bd; }.choice:active,.primary:active { transform:translateY(4px); box-shadow:0 1px 0 #a9c7bd; }
.primary { min-width:230px; padding:0 24px; border-color:#07565d; color:white; background:linear-gradient(#15979a,#08757b); box-shadow:0 6px 0 #064a51; font-size:16px; }.primary.is-orange { border-color:#a74528; background:linear-gradient(#f5864f,#df5d31); box-shadow:0 6px 0 #a74528; }
.explain-grid .choice { font-size:13px; line-height:1.15; }.explain-grid .choice span { display:block; }
.belt { position:absolute; z-index:3; left:255px; right:220px; bottom:-20px; height:118px; overflow:hidden; pointer-events:none; }.belt-track { position:absolute; left:0; right:0; top:40px; height:57px; border:5px solid #8c5525; border-radius:16px; background:#183b3d; box-shadow:0 8px 0 rgba(3,30,32,.45); }.belt-stripes { position:absolute; z-index:1; left:15px; right:15px; top:48px; height:42px; opacity:.9; background:repeating-linear-gradient(90deg,#d7a34d 0 22px,#6b4a30 22px 29px); animation:belt 1.3s linear infinite; }.belt img { position:absolute; z-index:2; right:-57px; bottom:-96px; width:260px; filter:drop-shadow(0 8px 7px rgba(0,20,21,.5)); }
.flourish { position:absolute; z-index:2; right:-52px; bottom:-88px; width:330px; filter:drop-shadow(0 14px 10px rgba(0,25,26,.4)); pointer-events:none; }
.toast { position:absolute; z-index:20; left:50%; bottom:115px; max-width:65%; padding:10px 18px; opacity:0; transform:translate(-50%,10px); border-radius:999px; color:white; background:#082f35; box-shadow:0 5px 0 rgba(0,0,0,.22); 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); }
.celebration { position:absolute; z-index:19; left:50%; top:45%; pointer-events:none; }.celebration i { position:absolute; width:13px; height:22px; opacity:0; border-radius:3px; background:var(--gold); }.celebration i:nth-child(2n){background:var(--cyan)}.celebration i:nth-child(3n){background:var(--orange)}.is-celebrating .celebration i { animation:burst 780ms ease-out both; }.celebration i:nth-child(1){--x:-230px;--y:-170px}.celebration i:nth-child(2){--x:-120px;--y:-220px;animation-delay:40ms}.celebration i:nth-child(3){--x:15px;--y:-230px;animation-delay:70ms}.celebration i:nth-child(4){--x:150px;--y:-185px;animation-delay:100ms}.celebration i:nth-child(5){--x:235px;--y:-80px;animation-delay:130ms}.celebration i:nth-child(6){--x:190px;--y:95px;animation-delay:160ms}.celebration i:nth-child(7){--x:-190px;--y:110px;animation-delay:190ms}.celebration i:nth-child(8){--x:-250px;--y:-30px;animation-delay:220ms}
.is-happy .foreman img { animation:robot-pop 650ms cubic-bezier(.2,.9,.3,1.25); filter:drop-shadow(0 14px 12px rgba(0,25,28,.4)) drop-shadow(0 0 18px rgba(75,242,217,.5)); }.is-miss .order-card { animation:miss 300ms ease-out; }.is-miss .foreman img { transform:rotate(-3deg); }.is-level-up .difficulty { animation:level-up 700ms ease-out; }
@keyframes scan { from{transform:translateY(0)} 50%{transform:translateY(125px)} to{transform:translateY(0)} }
@keyframes belt { to{background-position:58px 0} }
@keyframes robot-pop { 35%{transform:translateY(-16px) rotate(4deg) scale(1.05)} 70%{transform:translateY(0) rotate(-2deg) scale(1.02)} }
@keyframes miss { 25%{transform:translateX(-7px)} 55%{transform:translateX(7px)} 80%{transform:translateX(-3px)} }
@keyframes burst { 0%{opacity:0;transform:translate(0,0) rotate(0) scale(.2)} 28%{opacity:1} 100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(360deg) scale(1)} }
@keyframes level-up { 40%{box-shadow:0 0 0 8px rgba(244,185,66,.3),0 6px 0 rgba(1,30,33,.55);transform:translateY(-3px)} }
@media (max-height:760px){ .factory-hud{top:13px}.order-card{top:94px;bottom:88px;padding-top:17px;padding-bottom:18px;grid-template-rows:auto minmax(165px,1fr) 34px 28px 74px}.foreman{top:142px}.scan-bay{height:155px}.shape-art{width:132px;height:132px}.belt{height:101px}.choice,.primary{min-height:56px} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}.belt-stripes{animation:none} }