:root{font:15px/1.5 "Segoe UI",sans-serif;color:#e9edf0;background:#24313b;--orange:#efa04b;--slate:#24313b;--panel:#30414e;--muted:#b7c6ce;--green:#70c8ac}*{box-sizing:border-box}body{margin:0}header{height:64px;padding:12px 26px;display:flex;align-items:center;gap:22px;background:#1d2932;border-bottom:2px solid var(--orange)}header strong{font-size:22px}header span{color:var(--muted);font-size:13px}header button{margin-left:auto}h1{font-size:27px;line-height:1.15;margin:12px 0}h2{font-size:20px;margin:0 30px 14px 0}button,input,select{font:inherit}button{background:var(--orange);color:#202c35;border:0;border-radius:4px;padding:8px 12px;cursor:pointer;font-weight:600}button:hover{filter:brightness(1.1)}button:disabled{opacity:.55;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #8ad8ec;outline-offset:3px}input,select{width:100%;padding:7px;border-radius:3px;border:1px solid #69808e;background:#1e2d37;color:#fff;margin:5px 0 12px}input[type=range]{padding:0;accent-color:var(--orange)}input[type=checkbox]{width:auto;margin:0;accent-color:var(--orange)}label{display:block;font-size:14px}.check{display:flex;gap:10px;align-items:center;margin:12px 0}p{max-width:65ch}.small{font-size:12px;color:var(--muted)}#welcome{min-height:calc(100vh - 108px);display:grid;grid-template-columns:minmax(360px,42%) 1fr}.intro{padding:clamp(28px,5vw,80px);align-self:center}.intro h1{font-size:clamp(36px,3.6vw,58px);font-weight:650;letter-spacing:-1.5px;line-height:1.07}.intro>p{margin:24px 0}.spaghetti{font-size:80px;color:var(--orange);line-height:1}form{margin:30px 0}form label{font-weight:600}form button{width:100%;padding:12px}input[type=file]{padding:12px;font-size:12px}input::file-selector-button{background:#435967;color:#fff;border:0;padding:8px;margin-right:10px}.mapPreview{background:#24313b url('/background.png') center/cover;position:relative;min-height:380px}.mapPreview div{position:absolute;bottom:36px;left:30px;background:#1d2932e8;padding:12px 18px;border-left:4px solid var(--orange)}#status:empty{display:none}#status{padding:12px 26px;background:#3d4f5d;border-bottom:1px solid #69808e}#workspace{display:grid;grid-template-columns:330px 1fr;height:calc(100vh - 100px)}aside{overflow:auto;background:var(--panel);padding:22px}aside h1{font-size:24px}#saveLabel{overflow-wrap:anywhere;font-size:13px;color:var(--muted)}details{border-top:1px solid #5b6f7c;padding:12px 0}summary{cursor:pointer;font-size:16px;font-weight:600;padding:2px 0 10px}dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:13px}dt{color:var(--muted)}dd{margin:0;text-align:right}table{border-collapse:collapse;width:100%;font-size:12px}th,td{padding:7px 3px;text-align:right;border-bottom:1px solid #5b6f7c}th:first-child,td:first-child{text-align:left}caption{text-align:left;font-weight:600;margin:10px 0}#parts tr{cursor:pointer}#parts tr:hover{background:#435967}.tableScroll{overflow:auto}#mapArea{position:relative;overflow:hidden;min-height:400px;background:#17252e}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.mapTools{position:absolute;top:16px;left:16px;display:flex;gap:6px}#legend,#visible{position:absolute;left:16px;background:#24313bf2;padding:7px 12px;font-size:12px;pointer-events:none}#legend{bottom:42px}#visible{bottom:12px}.low{color:#f3a070}.high{color:var(--green)}#selection{position:absolute;right:14px;top:65px;background:#30414ef5;max-width:340px;padding:20px;border:1px solid #7b8c96}#closeSelection{float:right;padding:0 8px}#attribution{padding:9px 24px;background:#1d2932;font-size:11px;color:var(--muted)}[hidden]{display:none!important}@media(max-width:750px){header{padding:10px 14px;gap:10px;height:auto;min-height:64px;flex-wrap:wrap}header strong{font-size:19px}#welcome{grid-template-columns:1fr}.intro{padding:30px}.mapPreview{min-height:280px}#workspace{height:auto;grid-template-columns:1fr}aside{max-height:44vh;padding:16px}#mapArea{height:65vh;min-height:400px}#selection{max-width:calc(100% - 28px)}#legend{max-width:calc(100% - 32px)}#attribution{padding:8px 14px}}
@media(max-width:750px){#legend{bottom:64px}#visible{bottom:34px}}

#hoverStats{position:absolute;z-index:3;pointer-events:none;width:max-content;max-width:min(330px,calc(100% - 16px));padding:10px 14px;background:#1d2932f5;border:1px solid #efa04b;border-radius:4px;font-size:12px;line-height:1.6;overflow-wrap:anywhere;box-shadow:0 4px 16px #0005}#hoverStats strong{display:block;font-size:14px;color:#efa04b}

/* Reserved, noninteractive placements. No ad provider is connected. */
.adBanner{height:122px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:#202e38;border-bottom:1px solid #435763}
.adLabel{display:block;font-size:11px;color:#b7c6ce;text-align:center}
.adSlot{display:flex;align-items:center;justify-content:center;background:#2b3b47;border:1px dashed #657b89;color:#b7c6ce;font-size:12px;cursor:default}
#ad-banner{width:728px;max-width:calc(100% - 24px);height:90px;flex-shrink:0}
#workspace{grid-template-columns:330px minmax(0,1fr) 184px;height:calc(100vh - 222px);min-height:630px}
#workspace .adRail{padding:12px;overflow:visible;background:#202e38;border-left:1px solid #435763;max-height:none}
#ad-sidebar{width:160px;height:600px;margin-top:4px}
#welcome{min-height:calc(100vh - 230px)}
@media(max-width:1150px){#workspace{grid-template-columns:300px minmax(0,1fr)}#workspace .adRail{display:none}}
@media(max-width:750px){.adBanner{height:82px}#ad-banner{width:320px;height:50px}#workspace{grid-template-columns:1fr;height:auto;min-height:0}#welcome{min-height:0}}

#hoverStats .productivity-low{color:#ff8585}#hoverStats .productivity-medium{color:#f5d76e}#hoverStats .productivity-high{color:#70d6a4}

#resourceLegend{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;margin:8px 0 16px;font-size:12px}#resourceLegend>div{display:flex;gap:6px;align-items:center}.resourceSwatch{display:inline-block;width:10px;height:10px;border:1px solid #a8b4bc;border-radius:50%;flex-shrink:0}

.adSlot{position:relative;overflow:hidden;contain:layout paint size}
.adSlot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}

@media(min-width:751px){body:has(#status:not(:empty)) #workspace{height:calc(100vh - 272px)}}

#buildProgress{margin:22px 0;padding:18px;border:1px solid #526772;border-left:4px solid #f2a344;border-radius:6px;background:#202e38}
.buildProgressHeading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
#buildElapsed{font-variant-numeric:tabular-nums;color:#b9cbd4;font-size:13px;white-space:nowrap}
.buildTrack{height:10px;margin:14px 0;overflow:hidden;border-radius:10px;background:#101c24}
.buildScan{height:100%;width:38%;border-radius:10px;background:linear-gradient(90deg,#f2a344,#70c8ac);animation:build-scan 1.7s ease-in-out infinite alternate}
@keyframes build-scan{from{transform:translateX(-90%)}to{transform:translateX(260%)}}
.buildTipLabel{color:#f2a344;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:18px 0 6px}
#buildTip{min-height:3em;margin:0;font-size:17px;line-height:1.5}
@media(prefers-reduced-motion:reduce){.buildScan{animation:none;width:100%;opacity:.65}}

.desktopPromo{margin-top:20px;padding-top:18px;border-top:1px solid #526772}
.desktopPromoLabel{margin:0 0 8px;color:#70c8ac;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.desktopPromo h2{margin:0 0 10px;font-size:22px;line-height:1.2}
.desktopPromo p:not(.desktopPromoLabel),.desktopPromo li{font-size:13px;line-height:1.5}
.desktopPromo ul{padding-left:18px;margin:12px 0 16px}.desktopPromo li{margin:7px 0}
.desktopPromo a{display:inline-block;color:#17252e;background:#efa04b;padding:9px 12px;border-radius:4px;font-weight:600;text-decoration:none;font-size:13px}
.desktopPromo a:hover{background:#ffb85e}.desktopPromo a:focus-visible{outline:3px solid #8ad8ec;outline-offset:3px}
.promoLinkHint{display:block;font-size:11px;font-weight:400}