body[data-theme="sprout"]{--paper:#e4f3d4;--ink:#285d49;--muted:#63916a;--line:#bad6a8;--accent:#3e9756;--soft:#e0efcc;--bug:#f47d55;--green:#82c75c;--rock:#a5c587;background:linear-gradient(#d3efe0,#eff4d7);overflow:hidden;min-height:100dvh}
body[data-theme="mine"]{--paper:#fff2da;--ink:#584265;--muted:#96809a;--line:#e1ceae;--accent:#b58ce8;--soft:#f0e2f8;--bug:#ed945c;--green:#6fc5ad;--rock:#8c7aa3;background:linear-gradient(#f6e5ce,#fff5e3);overflow:hidden;min-height:100dvh}
body[data-theme="alpine"]{--paper:#e6f6f7;--ink:#285e78;--muted:#548b9f;--line:#a0cdd9;--accent:#348bb6;--soft:#d4edf2;--bug:#f3875d;--green:#79be9f;--rock:#8cbed1;background:linear-gradient(#b9e4ef,#e1f4f1);overflow:hidden;min-height:100dvh}
body:not([data-theme="island"]) header{height:92px;max-width:none;padding:0 4.2%;z-index:4;position:relative}
body:not([data-theme="island"]) .workbench{height:calc(100dvh - 92px);max-width:none;margin:0;padding:0 3%;position:relative;z-index:1}
body:not([data-theme="island"]) .timeline-scroll{height:100%;scrollbar-width:none}
body:not([data-theme="island"]) .timeline{height:100%;width:100%;min-width:1050px;touch-action:pan-x}
body:not([data-theme="island"]) .statusbar{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:#ffffffdf;border:1px solid #fff;border-radius:30px;padding:9px 20px;gap:22px;z-index:5;box-shadow:0 3px 0 #396b6617}
body:not([data-theme="island"]) .concepts{background:#ffffffc9;border:1px solid #fff;box-shadow:0 3px 0 #396b6617}
body:not([data-theme="island"]) .concepts button.active{background:var(--soft)}
body:not([data-theme="island"]) .milestone-control{display:flex;background:#ffffffd9;border-color:#fff;box-shadow:0 3px 0 #396b6617}
body:not([data-theme="island"]) .actions{gap:15px}
body:not([data-theme="island"]) .action-primary{color:var(--ink);background:#fff8df;box-shadow:0 3px 0 #396b6625}
body:not([data-theme="island"]) .project h1{font-weight:650}
body:not([data-theme="island"]) .roles button.active{font-weight:650}
body:not([data-theme="island"]) .node-art,body:not([data-theme="island"]) .bug-art{filter:drop-shadow(0 3px 0 #30495a1b)}
body[data-theme="mine"] .bug-art{filter:drop-shadow(0 3px 0 #2d173447)}
body[data-theme="mine"] #timeline{touch-action:none}
body[data-theme="mine"] .node-name{paint-order:stroke;stroke:#fff3dd;stroke-width:3px;stroke-linejoin:round}
body[data-theme="mine"] .node-date{fill:#9c7f83}
body[data-theme="mine"] .mining-person .worker-arm{animation:hammer .65s ease-in-out infinite}
body[data-theme="mine"] .mine-chips{animation:chips .65s ease-out infinite;transform-box:fill-box;transform-origin:left bottom}
body[data-theme="mine"] .exhibit-item{cursor:grab;touch-action:none;outline:none}
body[data-theme="mine"] .exhibit-item.dragging{cursor:grabbing;filter:drop-shadow(0 5px 4px #5f46674d)}
body[data-theme="mine"] .exhibit-item:focus-visible .hit{stroke:#ad82dc;stroke-dasharray:3 3;stroke-width:1.5}
.treasure-art{filter:drop-shadow(0 3px 1px #a87a4e26)}
#world-tool{display:grid;place-items:center;position:relative;width:35px;height:35px;padding:7px;border-radius:50%;background:#ffffffc9;color:var(--ink);box-shadow:0 3px 0 #396b6617;flex-shrink:0}
#world-tool[hidden]{display:none}
#world-tool svg{width:20px;height:20px}
#world-tool span{position:absolute;right:-4px;top:-3px;font:8px ui-monospace,monospace;color:var(--ink);background:#fff6cf;border:1px solid #fff;border-radius:50%;width:14px;height:14px;display:grid;place-items:center}
#weather-sky{position:fixed;inset:0;pointer-events:none;z-index:0}
#weather-sky[hidden]{display:none}
#weather-sky svg{width:100%;height:100%}
.sunlight,.rainfall,.wind-lines{opacity:0;transition:opacity 1.8s}
body[data-weather="sun"] .sunlight{opacity:1}
body[data-weather="rain"] .rainfall{opacity:1;animation:rain-fall .8s linear infinite}
body[data-weather="rain"][data-theme="sprout"]{background:linear-gradient(#c3dedc,#e2ecd7)}
body[data-weather="wind"] .wind-lines{opacity:.7;animation:wind-drift 4s linear infinite}
.weather-clouds{animation:cloud-drift 40s ease-in-out infinite alternate}
body[data-weather="rain"] .weather-clouds{fill:#92b8bd;opacity:.7}
body[data-theme="sprout"] .vine-leaf,body[data-theme="sprout"] .node-art{transform-box:fill-box;transform-origin:bottom center;animation:leaf-breathe 6s ease-in-out infinite}
body[data-theme="sprout"][data-weather="wind"] .vine-leaf,body[data-theme="sprout"][data-weather="wind"] .node-art{animation:leaf-wind 1.3s ease-in-out infinite}
body[data-theme="sprout"][data-weather="wind"] .bug-art{animation:bug-sway 1.3s ease-in-out infinite;transform-box:fill-box;transform-origin:top center}
body[data-theme="sprout"][data-weather="rain"] .vine-leaf,body[data-theme="sprout"][data-weather="rain"] .node-art{animation:leaf-rain 1.6s ease-in-out infinite}
body[data-theme="sprout"][data-weather="rain"] .bug-art{animation:bug-sway 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:top center}
body[data-theme="sprout"] .node-art{scale:1.24}
@keyframes leaf-breathe{0%,100%{rotate:-1deg}50%{rotate:2deg}}
@keyframes leaf-wind{0%,100%{rotate:-8deg}50%{rotate:11deg}}
@keyframes leaf-rain{0%,100%{rotate:1deg}50%{rotate:5deg}}
@keyframes bug-sway{0%,100%{rotate:-5deg}50%{rotate:6deg}}
@keyframes rain-fall{from{transform:translate(0,-66px)}to{transform:translate(-51px,66px)}}
@keyframes wind-drift{from{transform:translateX(-70px);opacity:0}30%,70%{opacity:.7}to{transform:translateX(130px);opacity:0}}
@keyframes cloud-drift{from{transform:translateX(-35px)}to{transform:translateX(55px)}}
@keyframes chips{0%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(10px,8px) rotate(20deg)}}
@media(max-width:760px){body:not([data-theme="island"]) header{height:132px;padding:24px 6% 14px}body:not([data-theme="island"]) .workbench{height:calc(100dvh - 132px);padding:0 5%}body:not([data-theme="island"]) .timeline{min-width:940px}body:not([data-theme="island"]) .timeline-scroll{margin:0 -5.56%;padding:0 5.56%}body:not([data-theme="island"]) .actions{gap:9px}#world-tool{height:30px;width:30px;padding:5px}body:not([data-theme="island"]) .statusbar{bottom:20px;gap:19px;padding:8px 17px}.milestone-control{right:6%;top:24px}}
@media(max-width:360px){body:not([data-theme="island"]) .actions{gap:6px}body:not([data-theme="island"]) .roles{gap:7px}body:not([data-theme="island"]) .concepts{gap:2px!important}body:not([data-theme="island"]) .concepts button{width:29px!important}}
@media(prefers-reduced-motion:reduce){#weather-sky *,body .vine-leaf,body .node-art,body .bug-art,.mining-person *{animation:none!important;transition:none!important}}

/* Custom names stay on demand so dense milestones do not turn the landscape into a label wall. */
body:not([data-theme="island"]) .custom-node .node-name,body:not([data-theme="island"]) .custom-node .node-date{opacity:0;pointer-events:none;transition:opacity .15s}
body:not([data-theme="island"]) .custom-node:hover .node-name,body:not([data-theme="island"]) .custom-node:hover .node-date,body:not([data-theme="island"]) .custom-node:focus-visible .node-name,body:not([data-theme="island"]) .custom-node:focus-visible .node-date{opacity:1}
@media(max-width:760px){#weather-sky .sunlight{transform:translate(500px,90px)}}

/* Wide displays keep readable controls while the SVG world occupies the viewport. */
@media(min-width:1900px){
 body:not([data-theme="island"]){--wide-header:clamp(104px,3.5vw,132px)}
 body:not([data-theme="island"]) header{height:var(--wide-header)}
 body:not([data-theme="island"]) .workbench{height:calc(100dvh - var(--wide-header))}
 body:not([data-theme="island"]) .concepts button{width:50px;height:40px}
 body:not([data-theme="island"]) .actions{gap:22px}
 body:not([data-theme="island"]) .roles button{font-size:14px;padding:10px 6px}
 body:not([data-theme="island"]) .action-primary{width:45px;height:45px}
 body:not([data-theme="island"]) .milestone-control{padding:12px 15px}
 body:not([data-theme="island"]) #world-tool{width:42px;height:42px}
 body:not([data-theme="island"]) .statusbar{bottom:32px;padding:12px 26px;gap:28px;font-size:12px}
 body:not([data-theme="island"]) #project-header .project h1{font-size:25px;max-width:280px}
 body:not([data-theme="island"]) #project-range{font-size:12px!important;max-width:230px}
}


/* Tiny residents stay beside their date; accepted Bugs become flowers. */
#project-guide{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;overflow:hidden;box-shadow:none;color:#285d49}
#project-guide::backdrop{background:transparent;backdrop-filter:none}
.guide-spot{position:fixed;border:2px solid #efffd4;border-radius:18px;box-shadow:0 0 0 9999px #123d42a8;pointer-events:none}
.guide-card{position:fixed;padding:24px;background:#fffef3;border:1px solid #fff;border-radius:20px;box-shadow:0 8px 30px #163f3926}
#project-guide h2{margin:14px 0 10px;font-size:20px;font-weight:650;letter-spacing:-.5px}
#project-guide p{margin:0;font-size:13px;line-height:1.85;color:#5c7d68}
.guide-progress{font:10px ui-monospace,monospace;color:#78977b}
.guide-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px}
.guide-actions button{padding:10px 14px;border-radius:24px;font-size:12px}
.guide-skip{color:#78977b}
.guide-next{background:#285d49;color:#fffef3}
.guide-actions button:focus-visible{outline:2px solid #78a461;outline-offset:4px}
body[data-theme="sprout"] #timeline .vine-crawler .vine-drift{animation:vine-crawl var(--crawl-duration,12s) ease-in-out var(--crawl-delay,0s) infinite;transform-box:view-box;transform-origin:0 0;will-change:transform}
body[data-theme="sprout"] #timeline .vine-bug:hover .vine-drift,body[data-theme="sprout"] #timeline .vine-bug:focus-within .vine-drift{animation-play-state:paused}
body[data-theme="sprout"] .vine-bug .bug-art{animation:none!important;transform:none!important;filter:none}
body[data-theme="sprout"] .insect-steps{animation:insect-step .55s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
body[data-theme="sprout"] .insect-wing{animation:insect-flutter .7s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
body[data-theme="sprout"] .vine-flower{animation:vine-bloom-sway 5s ease-in-out infinite;transform-box:view-box;transform-origin:0 9px}
body[data-theme="sprout"] #timeline .bouquet-sway{animation:bouquet-sway 7s ease-in-out var(--bouquet-delay,0s) infinite;transform-box:view-box;transform-origin:0 0}
body[data-theme="sprout"] #timeline .vine-bouquet:hover .bouquet-sway,body[data-theme="sprout"] #timeline .vine-bouquet:focus-within .bouquet-sway{animation-play-state:paused}
body[data-theme="sprout"] #timeline .vine-bouquet .vine-flower{animation:none;rotate:none}
@keyframes vine-crawl{0%,100%{transform:translate(0,0) rotate(-3deg)}25%{transform:translate(var(--crawl-x),-3px) rotate(4deg)}55%{transform:translate(2px,3px) rotate(-2deg)}80%{transform:translate(var(--crawl-x-back),-1px) rotate(-5deg)}}
@keyframes insect-step{from{translate:-.7px 0;rotate:-2deg}to{translate:.7px -.5px;rotate:2deg}}
@keyframes insect-flutter{from{scale:1 .95}to{scale:1.06 1.04}}
@keyframes vine-bloom-sway{0%,100%{rotate:-3deg}50%{rotate:4deg}}
@keyframes bouquet-sway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
/* Each landscape remembers its own comparison preference, independently of project data. */
#scene-version{position:fixed;left:24px;bottom:26px;z-index:5;display:flex;padding:4px;gap:2px;background:#ffffffd9;border:1px solid #fff;border-radius:24px;box-shadow:0 3px 0 #396b6617}
#scene-version[hidden],body:not([data-screen="project"]) #scene-version{display:none}
#scene-version button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:11px;padding:8px 13px;border-radius:20px;cursor:pointer}
#scene-version button[aria-pressed="true"]{background:var(--soft);color:var(--ink)}
#scene-version button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body[data-scene-version="new"][data-theme="mine"]{background:linear-gradient(#f7eacf,#f0dfc6)}
.next-world{isolation:isolate}
.next-world .hit{fill:transparent;stroke:none}
.next-world [role="button"]{cursor:pointer;outline:none}
.next-world [role="button"]:focus-visible>.hit{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 4}
.next-world .next-node-art{filter:drop-shadow(0 3px 0 #325f5319)}
.next-world .next-node:hover .next-node-art,.next-world .next-node:focus-visible .next-node-art{filter:drop-shadow(0 4px 4px #355b492e)}
body[data-theme="mine"] .next-world .node-name{stroke:#5e4b6c;fill:#fff2db}
body[data-theme="mine"] .next-world .node-date{fill:#f1d8c0}
.next-world .next-node .node-name{font-size:12px}
.next-world .next-node .node-date{font-size:10px}
.next-cluster-count{font:9px ui-monospace,monospace;fill:var(--ink)}
body[data-theme="mine"] .next-cluster-count{fill:#f3dfc2}
.next-leaf,.next-flag{transform-box:fill-box;transform-origin:left bottom;animation:next-sway 7s ease-in-out var(--delay,0s) infinite}
.next-world .leaf-drop{transition:opacity .2s}
.next-world [data-world-action="dew"].is-playing .leaf-drop{animation:next-dew 1.2s ease-in both}
.next-worker-arm{transform-box:fill-box;transform-origin:left bottom}
.next-worker.is-working .next-worker-arm{animation:next-hammer .8s ease-in-out infinite}
.next-work-chips{animation:next-chips .8s ease-out infinite}
.next-working-dot{animation:next-pulse 2s ease-in-out infinite}
.next-birds{animation:next-glide 22s ease-in-out infinite alternate}
.next-fire{transform-box:fill-box;transform-origin:bottom center;animation:next-flame 1.2s ease-in-out infinite alternate}
[data-world-action="fire"].is-playing .next-fire{animation:next-flame .2s ease-in-out infinite alternate;filter:drop-shadow(0 0 5px #fff0a4)}
[data-world-action="cart"].is-playing{animation:next-cart .9s ease-in-out}
.next-tap-chips{animation:next-chips .8s ease-out forwards;pointer-events:none}
.next-history{max-height:280px;overflow:auto;list-style:none;padding:0;margin:12px 0 0}
.next-history button{display:block;text-align:left;width:100%;padding:10px 0;border-bottom:1px solid var(--line);font:inherit;font-size:12px;color:var(--ink)}
.next-history small{display:block;margin-top:5px;font-size:11px;color:var(--muted)}
@keyframes next-sway{0%,100%{rotate:-1deg}50%{rotate:2deg}}
@keyframes next-dew{0%{translate:0 0;opacity:.8}100%{translate:-3px 35px;opacity:0}}
@keyframes next-hammer{0%,100%{rotate:-14deg}50%{rotate:17deg}}
@keyframes next-chips{0%{opacity:0;translate:0 0}25%{opacity:1}100%{opacity:0;translate:14px 14px}}
@keyframes next-pulse{50%{opacity:.4}}
@keyframes next-glide{from{translate:-60px -4px}to{translate:110px 6px}}
@keyframes next-flame{from{scale:.9 .84;rotate:-4deg}to{scale:1 1.1;rotate:5deg}}
@keyframes next-cart{0%,100%{translate:0 0;rotate:0deg}30%{translate:7px -2px;rotate:3deg}65%{translate:-4px 0;rotate:-2deg}}
@media(min-width:1900px){#scene-version{bottom:32px;left:3%}#scene-version button{font-size:12px;padding:10px 16px}}
@media(max-width:760px){#scene-version{left:15px;bottom:77px}#scene-version button{padding:7px 10px;font-size:10px}body[data-scene-version="new"] .roles button{white-space:nowrap}body[data-scene-version="new"] .identity,body[data-scene-version="new"] .action-primary{flex-shrink:0}}
@media(max-width:760px){body[data-scene-version="new"] #project-header{grid-template-columns:minmax(0,1fr) auto}body[data-scene-version="new"] #project-header .project{grid-column:1/-1;min-width:0;max-width:calc(100% - 85px);gap:6px}body[data-scene-version="new"] #project-header .project h1{min-width:0;flex-shrink:1}body[data-scene-version="new"] .project .phase{min-width:0;overflow:hidden;text-overflow:ellipsis}body[data-scene-version="new"] #sync-state{flex-shrink:0}}
@media(prefers-reduced-motion:reduce){.next-world *{animation:none!important;transition:none!important}}
@media(prefers-reduced-motion:reduce){body[data-theme="sprout"] #timeline .vine-drift,body[data-theme="sprout"] .vine-flower,body[data-theme="sprout"] #timeline .bouquet-sway,body[data-theme="sprout"] .insect-steps,body[data-theme="sprout"] .insect-wing{animation:none!important}}