@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── Design tokens ─────────────────────────────────────────────────────────
   The globe UI is dark only. Every color, size and offset below is reused by
   the rules that follow; media queries change tokens, not individual rules. */
:root{
 color-scheme:dark;
 --bg:#05090c;
 --glass:#0c1319de;
 --panel:#0d1419;
 --field:#152129;
 --hover:#d7efe60d;
 --line:#ffffff14;
 --line-strong:#ffffff1f;
 --text:#d6e2e5;
 --text-strong:#e2ebeb;
 --text-soft:#b7c6ca;
 --text-body:#93a8b0;
 --muted:#7f9198;
 --faint:#6e8087;
 --accent:#a5d7ba;
 --accent-ink:#0c2417;
 --accent-wash:#a5d7ba12;
 --accent-line:#84b49a80;
 --warm:#f2cc76;
 --warm-wash:#eeb65c1b;
 --warm-line:#eeb65c60;
 --danger:#eaa38c;
 --danger-wash:#e8a08a1a;
 --danger-line:#e8a08a66;
 --bad:#f07a6a;
 --sans:'DM Sans',system-ui,sans-serif;
 --mono:'IBM Plex Mono',ui-monospace,monospace;
 --serif:Georgia,serif;
 --radius:12px;
 --radius-sm:7px;
 --tap:38px;
 --gutter:38px;
 --toolbar-bottom:38px;
 --toolbar-height:50px;
 --panel-bottom:102px;
 --panel-width:346px;
 --dock-width:360px;
 --rail:24px;
 --strip:0px;
 --scale:0px;
 --inspector-top:125px;
 --inspector-floor:110px;
 font-family:var(--sans);font-size:14px;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);overflow:hidden}
button,input,select{font:inherit}
button{color:inherit;cursor:pointer;border:0;background:none}
button:hover{color:#fff}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
select{background:var(--field);color:#b6c9cd;border:1px solid #ffffff18;border-radius:5px;padding:7px;font-size:13px;min-height:34px}
input[type=range]{width:100%;height:3px;margin:14px 0;accent-color:var(--accent);cursor:pointer}
kbd{font:11px var(--mono);color:var(--muted);border:1px solid var(--line-strong);border-radius:4px;padding:1px 5px;margin-left:auto}
a{color:#b2cfc3;text-underline-offset:3px}
[hidden]{display:none!important}
#world{position:fixed;width:100%;height:100%;outline:none;touch-action:none;cursor:grab}
#world:active{cursor:grabbing}
#world.painting,#world.painting:active{cursor:crosshair}

/* ── Header, view label and timeline ─────────────────────────────────── */
header{position:fixed;left:var(--gutter);right:var(--gutter);top:30px;display:flex;justify-content:space-between;pointer-events:none}
.wordmark{font-family:var(--serif);font-size:34px;letter-spacing:-1.2px;display:flex;align-items:center;gap:12px}
.mark{width:32px;height:32px;flex:none}
.eyebrow{font:10px var(--mono);letter-spacing:1.6px;color:var(--muted)}
#brush-active{position:fixed;z-index:12;top:96px;left:calc(var(--rail) + var(--strip) + 16px);margin-right:16px;padding:3px 8px;border-radius:6px;background:#0b141be6;font-size:12px;color:var(--warm);pointer-events:none}
.timeline{position:fixed;bottom:112px;width:min(400px,calc(100% - 52px));left:50%;transform:translateX(-50%);pointer-events:none}
/* The timeline sits over the globe: a soft shadow keeps it legible on bright data views. */
.time-heading{display:flex;flex-wrap:wrap;row-gap:5px;align-items:center;justify-content:center;gap:9px;padding-bottom:18px;text-shadow:0 0 3px #000,0 0 8px #000c}
.time-heading #time{font:15px var(--mono);color:#e4eeee}
.view-label{display:inline-flex;align-items:center;gap:7px;margin-left:4px;font-size:12px;color:#c3d1d4}
#view-dot{height:5px;width:5px;border-radius:50%;background:var(--accent)}
#weather-clock{font:10px var(--mono);color:#91a7ad;white-space:nowrap}
.status-light{height:5px;width:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px #83d9a645}
.paused .status-light{background:#c7ad7b}
.timeline-track{height:2px;background:#ffffff17;position:relative}
.timeline-track i{position:absolute;left:0;top:-3px;height:8px;width:1px;background:#9dc9c2}
#time-progress{height:2px;width:0;background:#8ac5ba}
.timeline-labels{display:flex;justify-content:space-between;margin-top:10px;font:9px var(--mono);letter-spacing:1px;color:var(--faint);text-shadow:0 0 3px #000}
.timeline-labels #rate-label{letter-spacing:.3px}
/* Health light: a small toolbar-style button under the toolbar row. Green keeps up, yellow barely, red falls behind. */
footer{position:fixed;right:var(--gutter);bottom:9px;z-index:10;pointer-events:none}
.sim-health{pointer-events:auto;display:flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 6px;border:1px solid #ffffff1c;border-radius:8px;background:var(--glass);box-shadow:0 6px 24px #0005;backdrop-filter:blur(20px);font:10px var(--mono);letter-spacing:.6px;color:#93a6ad;white-space:nowrap}
.sim-health svg{width:15px;height:15px;color:var(--muted)}
.sim-health:hover,.sim-health.active{background:#101a21f2;color:#d3e8df}
.sim-health.active{box-shadow:inset 0 0 0 1px #a5d7ba2e}
.sim-health[data-state=good] svg{color:var(--accent)}
.sim-health[data-state=warn],.sim-health[data-state=warn] svg{color:var(--warm)}
.sim-health[data-state=bad],.sim-health[data-state=bad] svg{color:var(--bad)}

/* ── Toolbar: playback | speed | panels | world and help ─────────────── */
.toolbar{position:fixed;bottom:var(--toolbar-bottom);left:50%;transform:translateX(-50%);height:var(--toolbar-height);display:flex;align-items:center;padding:5px 6px;border:1px solid #ffffff1c;border-radius:var(--radius);background:var(--glass);box-shadow:0 10px 50px #0006;backdrop-filter:blur(20px);max-width:calc(100% - 12px)}
.tool-group{display:flex;align-items:center;gap:2px;padding:0 6px}
.tool-group+.tool-group{border-left:1px solid var(--line)}
.toolbar button{min-width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--radius-sm);color:#93a6ad;position:relative;flex-shrink:0}
.toolbar button:hover,.toolbar button.active{background:var(--hover);color:#d3e8df}
.toolbar button.active{box-shadow:inset 0 0 0 1px #a5d7ba2e}
.toolbar #play{color:var(--accent)}
.toolbar button.speed{width:66px;color:#d6e4e2;font:12px var(--mono)}
.toolbar button.painting{color:var(--warm);background:var(--warm-wash);box-shadow:inset 0 0 0 1px var(--warm-line)}
@media(hover:hover){[data-tip]:hover:after{content:attr(data-tip);position:absolute;bottom:calc(var(--tap) + 11px);left:50%;transform:translateX(-50%);padding:7px 10px;border:1px solid #ffffff1c;background:#142028;border-radius:5px;white-space:nowrap;color:#d7e2e6;font:12px var(--sans);pointer-events:none;z-index:20}}
.tool-group:first-child [data-tip]:after{left:0;transform:none}
.tool-group:last-child button:last-child[data-tip]:after{left:auto;right:0;transform:none}
[data-tip]:focus-visible:after{content:attr(data-tip);position:absolute;bottom:calc(var(--tap) + 11px);left:50%;transform:translateX(-50%);padding:7px 10px;border:1px solid #ffffff1c;background:#142028;border-radius:5px;white-space:nowrap;color:#d7e2e6;font:12px var(--sans);pointer-events:none;z-index:20}

/* ── Panels: shared frame ───────────────────────────────────────────────
   Panels are opaque and skip backdrop blur: a blur behind them would be
   recomputed every frame over the live globe for no visible gain, and
   translucency let the timeline text ghost through. */
.panel{position:fixed;bottom:var(--panel-bottom);left:50%;transform:translateX(-50%);width:var(--panel-width);max-width:calc(100% - 28px);max-height:calc(100dvh - var(--panel-bottom) - 93px);display:flex;flex-direction:column;background:var(--panel);border:1px solid #ffffff1a;border-radius:var(--radius);box-shadow:0 20px 80px #000a;z-index:12;animation:appear .15s ease-out}
.panel:focus{outline:none}
.panel-title{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 14px 12px 22px;font-size:15px;font-weight:550;color:var(--text-strong);border-bottom:1px solid var(--line)}
.close{flex:none;width:36px;height:36px;border-radius:var(--radius-sm);font-size:23px;line-height:1;color:#70858c;display:flex;align-items:center;justify-content:center}
.close:hover{background:var(--hover)}
.panel-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:6px 22px 20px}
.section-title{font:500 10px var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.panel-body>.section-title:first-child,.layer-group:first-child .section-title{margin-top:14px}
.panel-note{font-size:14px;line-height:1.6;color:var(--text-body);margin:12px 0}
.panel small{display:block;font-size:12px;color:#7c9098;line-height:1.55;margin-top:6px}

/* Rows, switches, ranges and buttons inside panels. */
.switch-row,.select-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:4px 0;border-top:1px solid var(--line);font-size:14px;color:var(--text-soft);cursor:pointer}
.select-row select{max-width:66%;flex:0 1 auto;min-width:0}
.switch-row kbd{margin-left:auto}
.switch-row input{appearance:none;flex:none;width:30px;height:17px;border-radius:10px;background:#2b3d45;position:relative;cursor:pointer;margin:0}
.switch-row input:before{content:'';position:absolute;left:3px;top:3px;width:11px;height:11px;border-radius:50%;background:#759198;transition:.15s}
.switch-row input:checked{background:#648e7b}
.switch-row input:checked:before{left:16px;background:#d9ecdc}
.range-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;margin:16px 0 0;font-size:14px;color:var(--text-soft)}
.range-label output{font:12px var(--mono);color:var(--accent)}
.button-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.button-row button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:8px 10px;font-size:13px;color:var(--text-soft)}
.button-row button:hover,.menu-item:hover{background:var(--hover)}
.menu-item{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 10px;margin:0 -10px;width:calc(100% + 20px);border-radius:var(--radius-sm);font-size:14px;color:var(--text-soft);text-align:left}
.menu-item svg{color:var(--muted)}
.menu-item .chevron{margin-left:auto;font-size:18px;color:var(--muted)}
.primary{background:var(--accent);color:var(--accent-ink);width:100%;padding:12px;border-radius:6px;font-weight:550;margin:6px 0 12px}
.primary:hover{color:var(--accent-ink);filter:brightness(1.06)}

/* Confirmation for actions that discard the current world. */
.confirm{margin:10px 0;padding:14px;border:1px solid var(--danger-line);border-radius:var(--radius-sm);background:var(--danger-wash)}
.confirm p{margin:0 0 12px;font-size:13px;line-height:1.5;color:#e4cfc6}
.confirm-actions{display:flex;flex-wrap:wrap;gap:8px}
.confirm-actions button{flex:1;min-height:38px;padding:8px 10px;border-radius:6px;border:1px solid var(--line-strong);font-size:13px;color:var(--text-soft)}
.confirm-actions .danger{background:var(--danger);border-color:var(--danger);color:#2a120b;font-weight:550}
.confirm-actions .danger:hover{color:#2a120b;filter:brightness(1.06)}

/* ── Views panel ──────────────────────────────────────────────────────── */
.view-key{flex:none;padding:12px 22px 12px;border-bottom:1px solid var(--line);min-height:84px}
.view-key-name{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:13px;font-weight:550;color:var(--text-strong)}
.view-key-name:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--accent))}
.legend{color:#9bb0a8;font-size:12px;line-height:1.6}
.layer-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.layer-grid button{border:1px solid var(--line);border-radius:var(--radius-sm);min-height:38px;padding:6px 9px;text-align:left;font-size:13px;line-height:1.25;color:#a3b3b9;display:flex;align-items:center;gap:9px}
.layer-grid button:hover{background:var(--hover)}
.layer-grid button i{flex:none;height:8px;width:8px;border-radius:50%;background:var(--c)}
.layer-grid button.selected{border-color:var(--accent-line);background:var(--accent-wash);color:#dbebe3}
.layer-group .select-row{margin-top:8px}
#find-storm{margin-top:2px}
.temperature-scale-title{font-size:13px;color:var(--text-soft);margin-bottom:7px}
.temperature-scale-bar{height:14px;border-radius:3px;border:1px solid #ffffff30}
.temperature-scale-ticks{position:relative;height:20px;margin-top:4px;color:#c4d2d7;font:11px var(--mono)}
.temperature-scale-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.temperature-scale-ticks span:first-child{transform:none}
.temperature-scale-ticks span:last-child{transform:translateX(-100%)}
.radar-types{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0}
.radar-types span{display:flex;align-items:center;gap:5px}
.radar-types i{width:9px;height:9px;border-radius:50%;display:inline-block}
.radar-intensity{line-height:1.6;color:#adbdc4}
#circulation-section{border-top:1px solid var(--line);margin-top:8px;padding:12px 0 3px}
#circulation-section svg{width:100%;height:auto}
#circulation-section small{font-size:10px;line-height:1.5;display:block;color:#9bb1bb}

/* ── Simulation panel ─────────────────────────────────────────────────── */
.jump-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:18px 0 4px}
.jump-row label{font-size:14px;color:var(--text-soft);width:100%}
.jump-row select{flex:1}
.jump-row button{min-height:36px;background:#a5d7ba1a;color:#b9dfc9;padding:7px 14px;border-radius:6px}

/* ── Create panel ─────────────────────────────────────────────────────── */
.brush-orbit{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin:14px 0 0;padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;color:var(--text-soft)}
.brush-orbit:hover{background:var(--hover)}
.brush-orbit[aria-pressed=true]{color:#b7dcc7;border-color:var(--accent-line);background:var(--accent-wash)}
.brush-orbit[aria-pressed=true] svg{color:var(--accent)}
.brush-tools,.place-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.brush-tools button{display:flex;align-items:center;flex-direction:column;gap:6px;padding:12px 8px;border:1px solid var(--line);border-radius:8px}
.brush-tools strong{font-size:15px;font-weight:550}
.brush-tools span{font-size:12px;line-height:1.4;color:#9aadb5}
#brush-shade[aria-pressed=true]{color:#b1c3ff;border-color:#a1b6fa;background:#17222c}
#brush-light[aria-pressed=true]{color:#f4d27f;border-color:#d5ae59;background:#17222c}
#brush-size-value{font-size:12px}
#brush-size{margin:12px 0 6px}
.brush-size-labels{display:flex;justify-content:space-between;font-size:12px;color:#859aa4}
#brush-count{font-size:12px;line-height:1.5;color:#91a6b0;margin:4px 0 0}
.place-tools button{display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--text-soft);text-align:left}
.place-tools button:hover{background:var(--hover)}
.place-tools button[aria-pressed=true]{color:var(--warm);border-color:var(--warm-line);background:var(--warm-wash)}
.place-tools+.select-row{margin-top:10px}
.shape-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shape-tools button{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:9px;align-items:center;min-height:50px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;text-align:left;color:var(--text-soft)}
.shape-tools button:hover{background:var(--hover)}
.shape-tools svg{grid-row:span 2}
.shape-tools strong{font-size:13px;font-weight:500}
.shape-tools span{font:10.5px var(--mono);color:#8ea3aa}
:is(#heat,#raise)[aria-pressed=true]{color:var(--warm);border-color:var(--warm-line);background:var(--warm-wash)}
:is(#cool,#lower)[aria-pressed=true]{color:#b1c3ff;border-color:#a1b6fa;background:#17222c}
.key-hint{color:#6f848c!important}

/* ── World menu ───────────────────────────────────────────────────────── */
#save-status{font-size:13px;color:#93aaa8;line-height:1.5;margin:6px 0 8px;overflow-wrap:anywhere}
.world-notebook{border-top:1px solid var(--line);padding:10px 0 4px}
.world-notebook summary,.help-row summary{font-size:14px;cursor:pointer;color:#c2dbd0;min-height:36px;display:flex;align-items:center;gap:10px;list-style:none}
:is(.world-notebook,.help-row) summary::-webkit-details-marker{display:none}
:is(.world-notebook,.help-row) summary:before{content:"";width:6px;height:6px;margin:0 6px 0 4px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
:is(.world-notebook,.help-row)[open] summary:before{transform:rotate(45deg)}
#pinned-locations{font-size:13px;color:#93aaa8;line-height:1.5;margin-top:6px}
.pin-row{border-top:1px solid var(--line);padding:12px 0}
.pin-row>button{font-size:14px;color:#bfdacb;padding:4px 0;min-height:36px}
.pin-row>button+button{float:right;color:#8ea3a6;font-size:12px}
.pin-row p{margin:5px 0}
.pin-row svg{width:100%;height:40px;display:block}
.pin-row polyline{fill:none;stroke:var(--accent);stroke-width:1.5}
.pin-row small{font-size:12px}
#epoch-options{border-top:1px solid var(--line)}
.epoch{width:100%;min-height:50px;padding:8px 10px;margin:0 -10px;width:calc(100% + 20px);border-radius:var(--radius-sm);display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left}
.epoch:hover{background:var(--hover)}
.epoch span{display:flex;flex-direction:column;gap:2px}
.epoch strong{font-size:14px;font-weight:500}
.epoch small{font-size:12px;margin:0}
.epoch i{font-style:normal;font:11px var(--mono);color:#95b6a3;white-space:nowrap}
.epoch.current strong:after{content:'current';margin-left:8px;font:10px var(--mono);letter-spacing:1px;color:var(--accent);text-transform:uppercase}
.epoch.pending{background:var(--danger-wash);box-shadow:inset 0 0 0 1px var(--danger-line)}
#reset{margin-top:4px}

/* ── Help panel ───────────────────────────────────────────────────────── */
.help p,.help li{font-size:14px;line-height:1.7;color:var(--text-body)}
.help a{text-decoration:none}
.help-lede{margin:14px 0 12px}
.help-row{border-top:1px solid var(--line);padding:4px 0}
.help-row summary{min-height:44px}
.help-row>:not(summary){margin:4px 0 14px}
.help ul{padding-left:18px}
p.release-line{font:11px var(--mono);letter-spacing:.3px;color:var(--muted);margin:6px 0 10px}
.keys{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:9px 14px;font-size:13px}
.keys span:nth-child(odd){font-family:var(--mono);font-size:12px;color:#b8c9c8}
.keys span:nth-child(even){color:#8ea3aa}

/* ── Performance panel: the HUD switch stays above the scrolling report ── */
.perf-controls{flex:none;padding:2px 22px;border-bottom:1px solid var(--line)}
.perf-controls .switch-row{border-top:0}

/* ── Inspector, column strip and diagnostics HUD ─────────────────────── */
#inspector{position:fixed;z-index:11;top:var(--inspector-top);right:calc(var(--gutter) + var(--scale));width:min(310px,calc(100% - var(--rail) - var(--strip) - var(--scale) - var(--gutter) - 12px));max-height:calc(100dvh - var(--inspector-top) - var(--inspector-floor));overflow-y:auto;padding:20px;background:#0b141bd9;border:1px solid var(--line);border-radius:9px;backdrop-filter:blur(20px)}
#inspector .close{float:right;margin:-10px -10px 0 0}
#inspector h2{font-size:18px;font-weight:450;margin:15px 0}
#inspector dl{margin:0;font-size:12px;display:grid;grid-template-columns:1fr auto;gap:9px 12px}
#inspector dt{color:#8198a0}
#inspector dd{margin:0;font-family:var(--mono);color:#bbcecc}
#inspector small{display:block;font-size:10px;color:#57727e;margin-top:17px}
.cell-why{font-size:14px;line-height:1.6;color:#b7cec8;margin:12px 0}
.note-button{font-size:14px;padding:9px 12px;border:1px solid #a5d7ba45;border-radius:6px;color:#c2e1cd;margin:0 0 18px;min-height:38px}
#column-details{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
#column-details summary{font-size:12px;cursor:pointer;color:#b4cec9}
#column-details dl{margin-top:14px}
#column-strip{position:fixed;left:var(--rail);top:130px;width:40px;max-height:calc(100dvh - 260px);overflow:visible;z-index:8}
#column-strip .earth-column{width:24px;min-width:24px}
#column-strip .earth-column-head,#column-strip .earth-column-note,#column-strip .earth-column-name,#column-strip .earth-column-value{display:none}
#column-strip .earth-column-row button{grid-template-columns:18px;min-height:18px}
#column-strip .earth-column-swatch{width:18px;height:18px}
#column-strip:hover,#column-strip:focus-within{width:210px;background:#091116e8;padding:10px;border-radius:8px;overflow:auto;z-index:10}
#column-strip:hover .earth-column,#column-strip:focus-within .earth-column{width:190px;min-width:190px}
#column-strip:hover .earth-column-head,#column-strip:focus-within .earth-column-head{display:flex}
#column-strip:hover :is(.earth-column-note,.earth-column-name,.earth-column-value),#column-strip:focus-within :is(.earth-column-note,.earth-column-name,.earth-column-value){display:block}
#column-strip:hover .earth-column-row button,#column-strip:focus-within .earth-column-row button{grid-template-columns:18px minmax(0,1fr) auto}
#debug-readout{position:fixed;left:calc(var(--rail) + var(--strip));top:80px;z-index:9;background:#091116ee;padding:12px;border:1px solid #263b43;border-radius:8px;max-width:300px;font-size:11px}
#debug-readout small{display:block;max-width:270px;color:#8b9da6;line-height:1.7}
.earth-debug dl{display:grid;grid-template-columns:auto auto;gap:5px 16px;margin:0}
.earth-debug dd{text-align:right;margin:0}
body:has(#column-strip:not([hidden])){--strip:40px}

/* ── Colour column: the current view's colour table, read by hover or tap ── */
body:has(#scale-column:not([hidden])){--scale:78px}
#scale-column{position:fixed;z-index:9;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:7px;pointer-events:none}
.scale-unit{margin:0;font:10px var(--mono);letter-spacing:.6px;color:var(--muted)}
.scale-end{font:9px var(--mono);letter-spacing:.8px;text-transform:uppercase;color:var(--faint)}
:is(.scale-unit,.scale-end):empty{display:none}
.scale-body{position:relative;display:flex;gap:7px;height:min(40dvh,320px)}
.scale-ticks{position:relative;width:40px;font:10px var(--mono);color:#9fb3b8}
.scale-ticks span{position:absolute;right:0;transform:translateY(50%);white-space:nowrap;text-shadow:0 0 4px var(--bg)}
.scale-bar{position:relative;width:12px;border:1px solid #ffffff30;border-radius:3px;pointer-events:auto;cursor:crosshair;touch-action:none}
#scale-column[data-type=categories] .scale-ticks{width:0}
#scale-column[data-type=categories] .scale-bar{width:16px}
.scale-mark{position:absolute;left:-4px;right:-4px;height:2px;margin-bottom:-1px;background:#fff;box-shadow:0 0 0 1px #000a}
.scale-tip{position:absolute;right:calc(100% + 4px);transform:translateY(50%);display:flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid #ffffff1c;border-radius:5px;background:#142028;color:#d7e2e6;font:12px var(--mono);white-space:nowrap;pointer-events:none}
.scale-swatch{width:10px;height:10px;border-radius:2px;border:1px solid #ffffff40}

/* ── Status, loading, errors and hidden interface ────────────────────── */
#toast{position:fixed;top:92px;left:50%;transform:translateX(-50%);background:#12221eef;border:1px solid #a5d7ba30;border-radius:6px;padding:10px 16px;font-size:13px;color:#b5d7c4;opacity:0;transition:opacity .3s;pointer-events:none;text-align:center;max-width:90vw;z-index:30}
#toast.show{opacity:1}
/* The globe is a 60-frame, 32 px sprite scaled 4×. A stepped transform animation runs on the compositor. */
#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px;background:var(--bg);z-index:15}
.loader-globe{width:128px;height:128px;overflow:hidden}
.loader-strip{display:block;transform-origin:0 0;image-rendering:pixelated;animation:globe-turn 6s steps(60) infinite}
.loader-bar{width:160px;height:4px;background:#ffffff14}
#load-progress{display:block;width:0;height:100%;background:var(--accent)}
#error,#software{position:fixed;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,90%);max-height:calc(100dvh - 32px);overflow:auto;text-align:center;padding:30px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
#error h1,#software h1{font:25px var(--serif)}
#error p,#software p{color:var(--muted);line-height:1.7}
#error button,#software button,.notice button{background:#a5d7ba20;border-radius:6px;padding:10px 15px}
#software{width:min(520px,90%)}
#software ol{margin:0 0 18px;padding-left:20px;text-align:left;color:var(--text-body);line-height:1.6}
#software li+li{margin-top:6px}
#software code{font:12px var(--mono);color:var(--text-soft)}
/* One-press problem report: Send report, the line that says what is sent, the preview and the result. */
.report-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.report-send:disabled{opacity:.7;cursor:default}
#error .report-note,.report-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.report-preview{margin-top:6px;text-align:left}
.report-preview summary{cursor:pointer;font-size:12px;color:var(--text-soft)}
.report-json{max-height:200px;overflow:auto;margin:6px 0 0;padding:8px;border:1px solid var(--line);border-radius:6px;background:#060b0e;color:#9fb7b3;font:10px/1.45 var(--mono);white-space:pre;text-align:left}
#error .report-status,.report-status{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--warm)}
.report-status:empty{display:none}
#notices{position:fixed;z-index:29;top:140px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;width:min(440px,calc(100% - 32px))}
.notice{padding:14px 16px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 12px 30px #0009;font-size:13px;color:var(--text-soft)}
.notice>p{margin:0;line-height:1.5}
.notice .report{margin-top:10px}
.notice .report-actions{justify-content:flex-start}
.notice button{padding:8px 12px;font-size:13px}
.show-ui{display:none;position:fixed;right:16px;bottom:16px;z-index:14;min-height:38px;padding:8px 14px;border:1px solid #ffffff10;border-radius:var(--radius-sm);background:var(--glass);color:var(--text-soft);font-size:13px}
.show-ui:hover,.show-ui:focus-visible{border-color:#ffffff40;background:#0c1319f2}
.hidden-ui :is(header,footer,.timeline,.toolbar,aside,.panel,#brush-active){display:none!important}
.hidden-ui .show-ui{display:block}
@keyframes globe-turn{from{transform:scale(4) translateX(0)}to{transform:scale(4) translateX(-1920px)}}
@keyframes appear{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.panel{animation:none}.loader-strip{animation-duration:30s}#world{transition:none!important}}

/* ── Tablet and wider: tool panels dock left, the World menu uses two columns ── */
@media(min-width:701px){
 .panel.dock{left:24px;transform:none;width:var(--dock-width)}
 .panel.perf{width:400px}
 body:has(.panel.dock:not([hidden])){--rail:calc(var(--dock-width) + 36px)}
 body:has(.panel.perf:not([hidden])){--rail:436px}
 /* The timeline keeps its centre unless an open dock reaches it; then it starts at the rail and may narrow. */
 body:has(.panel.dock:not([hidden])) .timeline{width:min(400px,calc(100% - var(--rail) - 24px));left:max(50%,calc(var(--rail) + min(200px,(100% - var(--rail) - 24px)/2)))}
 body:has(.panel.dock:not([hidden])) #weather-clock{white-space:normal;text-align:center}
}
/* Below 1124px a dock, the HUD and the inspector cannot sit side by side: the HUD becomes a short strip and the inspector moves under it. */
@media(min-width:701px) and (max-width:1123px){
 body:has(.panel.dock:not([hidden])):has(#inspector:not([hidden])) #debug-readout{right:var(--gutter);max-width:none;max-height:116px;overflow:auto;pointer-events:auto}
 body:has(.panel.dock:not([hidden])):has(#debug-readout:not([hidden])){--inspector-top:204px}
}
/* Below 1184px the inspector and the timeline share columns, so the inspector ends above the timeline.
   Short viewports skip this: there the inspector needs the height more than the timeline needs to show. */
@media(min-width:521px) and (max-width:1183px) and (min-height:521px){:root{--inspector-floor:206px}}
@media(min-width:760px){
 .panel.help{width:440px}
}

/* ── Tablet ───────────────────────────────────────────────────────────── */
@media(max-width:800px){
 :root{--gutter:24px;--toolbar-bottom:28px;--panel-bottom:91px}
 header{top:22px}
 .wordmark{font-size:30px}
 #brush-active{top:80px;left:max(25px,calc(var(--rail) + var(--strip) + 1px))}
 /* The toolbar needs the bottom edge here, so the health light joins the header row. */
 footer{top:25px;bottom:auto}
 .timeline{bottom:99px}
 :root{--inspector-top:96px}
}
@media(max-width:700px){
 :root{--rail:12px}
 #column-strip{top:120px;max-height:42dvh}
 #debug-readout{top:76px;font-size:10px;max-width:250px}
 body:has(#debug-readout:not([hidden])) #column-strip{top:153px}
 #weather-clock{font-size:9px;max-width:90vw}
}

/* ── Phone: bottom sheets above a compact icon toolbar ───────────────── */
@media(max-width:600px){
 :root{--tap:36px;--toolbar-bottom:22px;--toolbar-height:46px;--panel-bottom:78px}
 .toolbar{padding:4px 3px;border-radius:10px}
 .tool-group{gap:0;padding:0 3px}
 .toolbar button.speed{width:50px;font-size:11px}
 .toolbar button svg{width:17px;height:17px}
 .panel,.panel.dock{left:8px;right:8px;width:auto;max-width:none;transform:none;max-height:min(60dvh,calc(100dvh - 130px))}
 /* Tool sheets stay low and lift the globe above them, so clicks still reach it (picking reads the moved rectangle). */
 .panel.dock{max-height:46dvh}
 #world{transition:transform .2s ease-out}
 body:not(.hidden-ui):has(.panel.dock:not([hidden])) #world{transform:translateY(-22dvh)}
 .panel.world,.panel.help{max-height:calc(100dvh - 110px)}
 .panel-title{padding:12px 10px 10px 18px}
 .panel-body{padding:4px 18px 16px}
 .view-key{padding:10px 18px}
 .timeline{bottom:94px;width:calc(100% - 68px)}
}
/* The speed button cycles every rate and + / − still work, so the step buttons go first when space runs out. */
@media(max-width:400px){#slower,#faster{display:none}}
@media(max-width:520px){
 header{top:21px;left:20px;right:20px}
 .wordmark{font-size:28px;gap:10px}
 .mark{width:28px;height:28px}
 #brush-active{top:72px;left:max(20px,calc(var(--rail) + var(--strip) + 8px))}
 .time-heading{padding-bottom:14px}
 .timeline-labels{font-size:8px}
 #inspector{top:153px;right:calc(16px + var(--scale));width:min(300px,calc(100vw - 32px - var(--strip) - var(--scale)));max-height:calc(100dvh - 245px);padding:15px}
 footer{top:22px;right:20px}
 body:has(#scale-column:not([hidden])){--scale:62px}
 #scale-column{right:10px}
 .scale-body{height:min(30dvh,220px)}
 .scale-ticks{width:34px}
 #debug-readout,body:has(#column-strip:not([hidden])) #debug-readout{top:126px;left:12px;right:12px;max-width:none;max-height:116px;overflow:auto;pointer-events:auto}
 body:has(#debug-readout:not([hidden])) :is(#inspector,#column-strip){top:254px;max-height:calc(100dvh - 340px)}
}

/* ── Short viewports (landscape phones, small windows): panels may rise over the header ── */
@media(max-height:520px){
 .panel,.panel.dock{max-height:calc(100dvh - var(--panel-bottom) - 12px)}
 .view-key{min-height:0}
}