.pi{display:inline-block;width:26px;height:25px;flex:none;vertical-align:middle;overflow:visible}.picToken{display:inline-flex;align-items:center;gap:2px;vertical-align:middle;white-space:nowrap;color:#f6edde;font:700 14px/1.15 system-ui}.picToken b{font-variant-numeric:tabular-nums}.picFormula{display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}.picFormula i,.baseSkyLabel i{font:700 13px/1 system-ui;color:#98b0bd}.picFormula .picArrow{font-size:19px;margin:0 2px;color:#f2cc92}.picFormula .pi{width:23px;height:22px}
.pictureBase{font-family:system-ui,sans-serif;color:#f4f1e5}.pictureBase .baseHead{padding:10px 24px}.pictureBase .baseHead h2{font-size:clamp(21px,2.3vw,30px);letter-spacing:-.025em}.pictureBase .baseKicker{font-size:10px}.pictureBase .baseBody{gap:8px;padding:10px 20px}.pictureBase #baseControl{border:0;padding:0}.pictureBase #baseScene{max-height:37vh}.pictureBase .baseSkyLabel{display:flex;align-items:center;gap:5px;font:650 12px/1.1 system-ui;letter-spacing:0;bottom:7px;padding:3px 9px}.baseSkyLabel .pi{width:21px;height:20px}.baseSkyLabel span:not(.picToken){color:#d9d5e0}
.picGoal,.picCommit,.forecastHead{display:flex;align-items:center;justify-content:space-between;gap:8px}.picGoal{margin-bottom:8px}.picGoal #picGoalContent{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.goalTitle{display:flex;align-items:center;gap:8px}.goalTitle>.pi{width:34px;height:32px}.pictureBase .goalTitle h3{font-size:clamp(21px,2.4vw,29px);letter-spacing:-.035em}.goalSteps{display:flex;align-items:center;gap:6px}.goalSteps>span:not(.picFormula){display:inline-flex;align-items:center;gap:3px;border:1px solid #677780;border-radius:18px;padding:2px 6px;font:650 12px system-ui}.goalSteps>.did{color:#b6e4bd;background:#29463e}.goalSteps>.todo{color:#f2d69e;border-style:dashed!important}.goalSteps .pi{width:19px;height:18px}.goalSteps>.picFormula{border-left:1px solid #526471;padding-left:9px}.boltBag{display:flex;align-items:center;gap:3px;color:#ffe4aa;padding:3px 8px;border-radius:10px;background:#3a3e3c;border:1px solid #756c54}.boltBag b{font:800 22px/1 system-ui}.boltBag small{font:600 12px/1.15 system-ui;max-width:42px}
.picJobs{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px}.machine{background:#213847;border:1px solid #476270;border-radius:12px;padding:8px 10px;min-width:0;position:relative}.machine.needed{background:#303f43;border-color:#e8c17c;box-shadow:inset 0 2px #e8c17c}.machine.powered{border-color:#8dcfb1;background:#233f42}.machineFace{display:flex;align-items:center;gap:8px}.machineFace>.pi{width:45px;height:42px}.machineFace h4{font:750 clamp(14px,1.55vw,19px)/1.1 system-ui;letter-spacing:-.02em}.machine .picFormula{min-height:25px;margin:2px 0 5px}.jobStatus{margin-left:auto}.powered .jobStatus:before{content:'✓';display:grid;place-items:center;color:#b4e8c0;font:bold 16px system-ui}.machine .baseStepper{border-top:1px solid #59717a;padding-top:5px;gap:4px}.pictureBase .baseStepper button{width:44px;height:38px;font-size:22px;border-radius:9px}.machine.needed:not(.moveBolt) [data-n="1"]:enabled,.machine.moveBolt [data-n="-1"]:enabled{background:#f6d18c;color:#292d35;border-color:#f9e7be}.baseStepper b{display:flex;align-items:center;gap:1px;color:#e7ddd0}.baseStepper .pi{width:17px;height:19px}.machine.powered .piRotor{transform-origin:32px 30px;animation:fanspin 2.1s linear infinite}@keyframes fanspin{to{transform:rotate(360deg)}}
.picCommit{margin-top:8px}.picCommit .btn{min-height:42px}.picInstruction,.picReady,.picDanger{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;font:650 13px system-ui}.picReady{color:#b9dfba}.picDanger{color:#ffd6a5}.picDanger>.pi,.picReady>.pi,.picInstruction>.pi{width:23px;height:22px}.pictureStores{border-top:1px solid #405561;padding-top:5px}.forecastHead b{font:600 11px system-ui;color:#bdccd0}.pictureBase .baseMeters{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:3px}.picMeter>span,.picMeter>strong{display:flex;align-items:center;gap:3px}.picMeter span{font:600 11px/1.15 system-ui;color:#c4d2d6}.picMeter .pi{width:20px;height:20px}.picMeter strong{font:750 16px/1 system-ui;margin:2px 0 4px}.picMeter em,.picMeter i{font-style:normal}.picMeter strong i{color:#9daeb3;font-size:12px}.picMeter.better em{color:#aee0bb}.picMeter.worse em{color:#ffd3a2}.picTrack{height:5px;border-radius:5px;position:relative;background:#344c59;overflow:hidden}.picTrack>*{position:absolute;inset:0 auto 0 0}.picTrack b{background:#84b8c0}.picTrack i{background:repeating-linear-gradient(115deg,#ebc693 0 2px,#6d6557 2px 4px)}.better .picTrack i{background:repeating-linear-gradient(115deg,#a5dcba 0 2px,#516d65 2px 4px)}
.pictureDetails{font:13px/1.45 system-ui;color:#c0d1d9}.pictureDetails summary{color:#bfd3da;cursor:pointer;width:fit-content;padding:3px 0;font-size:12px}.pictureDetails p{max-width:78ch;padding:3px 0}.pictureBase .picShelf{display:flex;gap:10px;flex-wrap:wrap}.pictureBase #journeyCargo{margin:0}.picShelf>span{display:inline-flex!important;gap:4px;align-items:center;margin:0!important}.pictureBase .baseFoot{justify-content:flex-end;padding:0}.pictureBase .baseFoot #baseSays:not([hidden]){flex:1;min-width:180px}.pictureBase .baseFoot [hidden]{display:none}.pictureBase .baseFoot .linkBtn{padding:4px 7px}.pictureBase .basePlayback{min-height:55px}.resultTiles{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.resultTiles>div{display:grid;grid-template-columns:35px auto;gap:0px 5px;align-items:center;padding:7px 10px;border:1px solid #4b626b;border-radius:10px;background:#263d49}.resultTiles .pi{width:33px;height:32px;grid-row:span 2}.resultTiles small{font-size:11px;color:#c4d2d6}.resultTiles b{font-size:16px}.deliveryRecipe{display:flex}.deliveryRecipe .pi{width:34px;height:33px}.journeyPath .pi{width:30px;height:29px}.fieldPictures{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;list-style:none;padding:0;counter-reset:fieldstep}.fieldPictures li{display:flex;flex-direction:column;align-items:center;background:#253c49;border-radius:12px;padding:10px;counter-increment:fieldstep}.fieldPictures strong:before{content:counter(fieldstep)'. '}.fieldPictures .pi{width:53px;height:50px}.fieldPictures small{color:#c4d2d6}.fieldPictures+.pictureDetails{margin-bottom:12px}
@media(max-width:650px){.pictureBase .baseBody{padding:8px 10px;gap:5px}.pictureBase .baseHead{padding:8px 12px}.pictureBase #baseScene{max-height:none}.picGoal #picGoalContent{gap:3px;display:grid}.picGoal{margin-bottom:5px}.goalSteps{margin-left:0}.picJobs{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.machine{padding:4px 6px}.machineFace>.pi{width:36px;height:34px}.machineFace{gap:4px}.machine .picFormula{gap:2px;min-height:18px;margin:0 0 2px}.picFormula .pi{width:18px;height:18px}.picFormula .picToken{font-size:11px}.machine .baseStepper{padding-top:2px}.pictureBase .baseStepper button{height:44px;width:44px}.pictureBase .baseMeters{grid-template-columns:repeat(3,1fr);gap:4px 10px}.picMeter>span{display:inline-flex}.picMeter>strong{display:inline-flex;font-size:12px;margin:0 0 3px 4px}.picMeter .pi{width:16px;height:16px}.picMeter>span{font-size:10px}.picGoal .goalTitle h3{font-size:19px}.goalTitle>.pi{width:26px;height:25px}.pictureBase .picCommit{margin-top:5px}.pictureBase .baseSkyLabel{font-size:10px;gap:2px}.picGoal #bolts{flex:none}.pictureBase .baseFoot{gap:0}.fieldPictures{grid-template-columns:1fr 1fr}.pictureBase .forecastHead b{font-size:10px}}
@media(min-width:411px) and (max-width:650px){.picJobs:has(>.machine:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.machine.powered .piRotor{animation:none}}


.skyShield{position:absolute;right:10px;top:8px;display:inline-flex;align-items:center;gap:5px;background:#142538eb;border:1px solid #788794;border-radius:14px;padding:3px 8px;color:#e6eee6;font:650 11px system-ui}.skyShield[hidden]{display:none}.skyShield .pi{width:23px;height:21px}.skyShield span{display:inline-flex;gap:2px}.skyShield i{font:800 13px/1 system-ui}.skyShield .blocked{color:#a9e3bb}.skyShield .through{color:#ffbe95}
@media(max-width:650px){.skyShield{font-size:10px;top:5px;right:5px;gap:3px}.skyShield i{font-size:11px}.skyShield .pi{width:19px;height:17px}}
.stormTip{box-sizing:border-box;width:min(340px,calc(100vw - 32px));max-height:85dvh;overflow:auto;padding:20px 22px;margin:auto;border:2px solid #e5c381;border-radius:18px;background:#203643;color:#f6f0df;box-shadow:0 16px 72px #091321b3;text-align:left}
.stormTip::backdrop{background:#081726a8}
.stormGuide,.stormDemo{display:flex;align-items:center;gap:12px}.stormGuide img{width:64px;height:52px;object-fit:contain}.stormGuide small{font:700 10px system-ui;letter-spacing:.14em;color:#a7d9d0}.pictureBase .stormGuide h3{font-size:26px;margin:0}
.stormDemo{justify-content:center;background:#192c38;border-radius:12px;margin:12px 0;padding:7px}.stormDemo .pi{width:38px;height:36px}.stormDemo .pi-fan{width:55px;height:50px}.stormDemo .piRotor{transform-origin:32px 30px;animation:fanspin 2s linear infinite}.stormDemo i{color:#d7ba83;font-style:normal}
.pictureBase .stormTip p{font:500 16px/1.45 system-ui;color:#edf2ed;margin:10px 0 15px}.stormTip button{min-height:44px;width:100%;justify-content:center}.stormTip button:focus-visible{outline:3px solid #a9e5e1;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.stormDemo .piRotor{animation:none}}
@media(max-width:360px){
 .pictureBase .baseMeters{row-gap:8px}
 .pictureBase .picMeter>span,.pictureBase .picMeter>strong{display:flex}
 .pictureBase .picMeter>span,.pictureBase .forecastHead b{font-size:12px}
 .pictureBase .picMeter>strong{font-size:14px;margin:1px 0 3px}
 .pictureBase .baseSkyLabel{font-size:12px;flex-wrap:wrap;max-width:calc(100% - 24px);line-height:1.15}
}
