.living-scene{width:100%;height:auto;display:block;border-radius:12px;overflow:hidden;isolation:isolate}.illustrated-scene{min-width:0;align-self:start;background:#e6ecd8;border-radius:12px;overflow:hidden}.mission-controls{min-width:0}.variant-panel .game-layout{grid-template-columns:1.4fr 1fr;align-items:start}.sorting-layout .living-scene{height:150px;object-fit:cover;object-position:center 58%}.sorting-layout .items{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:18px}.sorting-layout .item{max-width:none;min-height:91px;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:5px;font-size:11px;animation:item-arrive .3s both;animation-delay:var(--enter-delay)}.waste-icon{width:35px;height:35px;flex-shrink:0}.item.selected .waste-icon{animation:selected-bob 1.4s ease-in-out infinite}.item:hover{box-shadow:0 3px 12px #244e3520}.bin{transition:background .2s,transform .2s}.bin:hover{background:#e7f1d8;transform:translateY(-3px)}.mission-toolbar{margin-bottom:18px}.mission-toolbar .badge{display:inline-flex}.project-labels{display:flex;gap:7px;flex-wrap:wrap;padding:14px;font-size:11px;color:#5d7762}.project-pill{border:1px solid #adc498;background:#eff5df;padding:6px 9px;border-radius:20px;animation:build-in .5s both}.spill-caption{padding:12px 17px;font-size:12px;color:#756536;border-top:1px solid #c9d5b6}.operation-steps{display:flex;gap:12px;margin:17px 0}.operation-steps span{display:grid;place-items:center;border:1px solid #bdcbaa;background:#f1f5e9;width:34px;height:34px;border-radius:50%;font-weight:bold}.operation-steps .complete{background:#d4e998;color:#315f45;animation:build-in .35s both}.done-action{animation:build-in .35s both;color:#428157}.variant-panel .feedback{animation:feedback-in .35s both}.variant-panel .feedback.bad{animation:error-nudge .3s both}.stat-meter span{animation:meter-enter .4s both;transform-origin:left}.cloud-drift{animation:cloud-drift 24s linear infinite alternate}.sway-tree{animation:tree-sway 5s ease-in-out infinite alternate}.water-flow{animation:water-flow 5s linear infinite}.flying-bird{animation:bird-fly 11s linear infinite}.camp-flag{transform-origin:424px 174px;animation:flag-wave 3s ease-in-out infinite}.oil-shimmer{animation:oil-shimmer 3s ease-in-out infinite}.oil-area{transition:opacity .5s}.oil-area.cleaned{opacity:0}.leak-drop{animation:leak-drop .8s infinite}.sorbent-grain{animation:grain-fall .9s ease-out both}.boom-deploy{animation:boom-deploy .65s ease-out both}.service-truck{animation:service-arrive 1.3s both}.factory-smoke{animation:smoke-rise 4.5s linear infinite}.turbine-rotor{animation:rotor-spin 5s linear infinite}.factory-truck{animation:truck-drive 10s linear infinite}.build-in{animation:build-in .55s both;transform-box:fill-box;transform-origin:bottom}.sensor-light{animation:sensor-blink 2s infinite}.rainfall{animation:rain-fall 1s linear infinite}.drill-bit{animation:bit-vibrate .18s linear infinite alternate}.drill-chip{animation:chip-fall 1s ease-out infinite}.grass-grow{animation:grass-grow .6s both;transform-box:fill-box;transform-origin:bottom}.quarry-machine{animation:machine-work 2s ease-in-out infinite alternate;transform-origin:510px 200px}.grade-line{stroke-dasharray:700;animation:grade-draw .7s both}.route-line{stroke-dasharray:14 5;animation:route-dash 4s linear infinite}.route-line.chosen{stroke:#f0bc4e;stroke-width:14}.map-vehicle{offset-rotate:0deg}.vehicle-B{offset-path:path('M65 245Q300 70 563 220');animation:route-drive 9s linear infinite}.vehicle-V{offset-path:path('M65 245Q310 380 563 220');animation:route-drive 13s linear infinite}.outcome-scene{max-width:650px;margin:0 auto 25px}.outcome-scene .living-scene{max-height:330px}.motion-button{font-size:11px}.motion-off *, .motion-off *::before, .motion-off *::after{animation:none!important;transition:none!important}
@keyframes cloud-drift{to{transform:translateX(85px)}}@keyframes tree-sway{to{transform:rotate(2deg)}}@keyframes water-flow{to{transform:translateX(70px)}}@keyframes bird-fly{from{transform:translateX(-300px)}to{transform:translateX(430px)}}@keyframes flag-wave{50%{transform:skewY(3deg)}}@keyframes oil-shimmer{50%{opacity:.25;transform:translateX(5px)}}@keyframes leak-drop{to{transform:translateY(15px);opacity:0}}@keyframes grain-fall{from{transform:translateY(-40px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes boom-deploy{from{stroke-dasharray:0 500}to{stroke-dasharray:22 5}}@keyframes service-arrive{from{transform:translateX(-230px)}to{transform:translateX(0)}}@keyframes smoke-rise{0%{transform:translate(0,0);opacity:0}20%{opacity:.45}100%{transform:translate(70px,-100px) scale(1.12);opacity:0}}@keyframes rotor-spin{to{transform:rotate(360deg)}}@keyframes truck-drive{to{transform:translateX(800px)}}@keyframes build-in{from{opacity:0;transform:translateY(12px) scale(.93)}to{opacity:1;transform:none}}@keyframes sensor-blink{50%{opacity:.3}}@keyframes rain-fall{to{transform:translate(-25px,80px)}}@keyframes bit-vibrate{to{transform:translateX(1.5px)}}@keyframes chip-fall{from{transform:translate(0,0);opacity:1}to{transform:translate(10px,15px);opacity:0}}@keyframes grass-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes machine-work{to{transform:rotate(-2deg)}}@keyframes grade-draw{from{stroke-dashoffset:700}to{stroke-dashoffset:0}}@keyframes route-dash{to{stroke-dashoffset:-76}}@keyframes route-drive{to{offset-distance:100%}}@keyframes item-arrive{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}@keyframes selected-bob{50%{transform:translateY(-3px)}}@keyframes feedback-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes error-nudge{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes meter-enter{from{transform:scaleX(.7)}to{transform:scaleX(1)}}
@media(max-width:1100px){.variant-panel .game-layout{grid-template-columns:1fr}.illustrated-scene .living-scene{max-height:330px}.sorting-layout .items{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(max-width:760px){.sorting-layout .items{grid-template-columns:repeat(3,minmax(0,1fr))}.sorting-layout .item{min-height:80px;font-size:10px}.sorting-layout .living-scene{height:105px}.variant-panel{padding:13px}.waste-icon{width:28px;height:28px}.mission-toolbar{gap:8px}.mission-toolbar button{padding:10px;font-size:11px}header>div{gap:4px}header .avatar{display:none}.motion-button{max-width:95px;font-size:10px}.profile-button{max-width:110px}.living-scene{min-height:175px}.pause-panel .living-scene{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.outcome-scene .drill-bit,.outcome-scene .quarry-machine{animation:none}.outcome-scene .drill-chip,.outcome-scene .leak-drop{display:none}
@media(max-width:760px){.sorting-layout .living-scene{min-height:0}}
.hero-art{overflow:hidden;pointer-events:none}.hero-art>svg{display:block;width:100%;height:100%}.home-ripple{animation:home-ripple 5s ease-in-out infinite;transform-origin:center}@keyframes home-ripple{50%{opacity:.3;transform:translateX(12px)}}
.stat-meter span{animation:none;transition:width .45s ease}.sorting-layout .item{animation:none}.project-pill{animation-duration:.35s}
header{position:relative}#audio-settings{position:absolute;right:20px;top:calc(100% - 4px);z-index:100;width:290px;padding:20px;background:#f9fbf0;border:1px solid #c2cfb7;border-radius:16px;box-shadow:0 12px 40px #183f3330;color:#244c3b;display:grid;gap:15px;font-size:13px}#audio-settings[hidden]{display:none}#audio-settings label{display:flex;align-items:center;gap:9px;cursor:pointer}#audio-settings input{width:17px;height:17px;accent-color:#436a49}#audio-settings small{font-size:11px;line-height:1.5;color:#66765f}.audio-current{padding-top:10px;border-top:1px solid #d8dfcb}@media(max-width:760px){#audio-settings{right:10px;width:min(290px,calc(100vw - 30px))}}

/* Large equipment in the landscape palette; each action flows back into idle motion. */
.quarry-machine{animation:none;filter:none}
.quarry-boom{transform-origin:514px 167px;animation:quarry-idle 4s ease-in-out infinite}
.quarry-bucket{transform-origin:389px 159px}
.quarry-working .quarry-boom{animation:quarry-dig 1.65s ease-in-out both}
.quarry-working .quarry-bucket{animation:quarry-scoop 1.65s ease-in-out both}
.quarry-checking .quarry-boom{animation:quarry-check .65s ease-in-out both}
@keyframes quarry-idle{0%,100%{transform:rotate(0)}25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}}
@keyframes quarry-dig{0%{transform:rotate(0)}35%{transform:rotate(-23deg)}65%{transform:rotate(13deg)}100%{transform:rotate(0)}}
@keyframes quarry-scoop{0%,100%{transform:rotate(0)}35%{transform:rotate(-18deg)}65%{transform:rotate(32deg)}}
@keyframes quarry-check{0%,100%{transform:rotate(0)}35%{transform:rotate(-8deg)}70%{transform:rotate(5deg)}}

/* Finish the last working cycle, then drive completely beyond the scene. */
.quarry-machine.quarry-departing{animation:quarry-depart 2.4s ease-in 1.8s both}
@keyframes quarry-depart{from{transform:translateX(0)}to{transform:translateX(500px);visibility:hidden}}
.motion-off .quarry-departing{transform:translateX(500px)}
@media(prefers-reduced-motion:reduce){.quarry-departing{transform:translateX(500px)}}

.quarry-world{background:#b2c69a}
.quarry-checking .quarry-bucket{animation:quarry-bucket-check .65s ease-in-out both}
@keyframes quarry-bucket-check{0%,100%{transform:rotate(0)}35%{transform:rotate(-10deg)}70%{transform:rotate(6deg)}}

/* Shared sun for the headquarters, mission cards and live landscapes. */
.scene-sun{pointer-events:none}
.sun-rays{transform-origin:0px 0px;animation:sun-turn 55s linear infinite}
.sun-glow{transform-origin:0px 0px;animation:sun-breathe 7s ease-in-out infinite}
@keyframes sun-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes sun-breathe{0%,100%{transform:scale(.96);opacity:.65}50%{transform:scale(1.07);opacity:1}}

/* Card motion is quiet, staggered and paused outside the viewport. */
.card-art .card-cloud{animation:card-cloud 16s ease-in-out infinite alternate}
.card-art .card-ripple{animation:card-ripple 5s ease-in-out infinite}
.card-art .card-drill{animation:card-drill 1.8s ease-in-out infinite}
.card-art .card-crane-arm{transform-origin:482px 196px;animation:card-crane 6s ease-in-out infinite}
.card-art .card-route-vehicle{offset-path:path('M70 280Q300 40 525 260');offset-rotate:0deg;animation:card-route 13s linear infinite}
.card-art .card-booms{animation:card-booms 5s ease-in-out infinite}
.card-art .card-rotor{transform-origin:490px 135px;animation:rotor-spin 10s linear infinite}
.card-art .card-factory-truck{animation:card-truck 14s linear infinite}
.card-art.card-art svg *{animation-delay:var(--card-delay,0s);animation-play-state:paused}
.card-art.card-visible svg *{animation-play-state:running}
@keyframes card-cloud{to{transform:translateX(40px)}}
@keyframes card-ripple{50%{opacity:.3;transform:translateX(5px)}}
@keyframes card-drill{50%{transform:translateY(4px)}}
@keyframes card-crane{50%{transform:rotate(-10deg)}}
@keyframes card-route{0%,100%{opacity:0}5%,90%{opacity:1}from{offset-distance:0%}to{offset-distance:100%}}
@keyframes card-booms{50%{transform:translateY(3px)}}
@keyframes card-truck{from{transform:translateX(0)}to{transform:translateX(700px)}}

.card-art{height:auto;aspect-ratio:16/9}.card-art>svg{position:absolute;inset:0;width:100%;height:100%}