/* Chronosphere. Infrared is heat, so the palette is warm: ember on near-black. */
:root {
  --bg: #0a0908; --surface: #141210; --surface-2: #1e1b18; --line: #2f2a25; --line-2: #453d35;
  --ink: #f3eee6; --ink-2: #b0a79a; --ink-3: #8a8175;
  --ember: #ff7b39; --ember-ink: #1b0b02; --mint: #5fe0b0; --gold: #f2c14e;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --top: 58px; --panelw: min(62vw, 1000px);
}
* { box-sizing: border-box; }
html { color-scheme: dark; }          /* native controls, scrollbars and pop-up lists in their dark form */
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); -webkit-text-size-adjust: 100%; }
body { display: flex; flex-direction: column; overflow: hidden; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.hint { color: var(--ink-2); font-size: 13px; margin: 8px 0 0; }
a { color: var(--ember); text-underline-offset: 2px; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, canvas:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 4px; }
button:disabled { opacity: .35; cursor: default; }
.cta { background: var(--ember); color: var(--ember-ink); font-weight: 600; border-radius: 999px; padding: 9px 18px; min-height: 40px; white-space: nowrap; }
.cta:hover { filter: brightness(1.08); }
.ghost { border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 16px; min-height: 40px; color: var(--ink); background: #0a090899; white-space: nowrap; }
.ghost:hover { border-color: var(--ink-2); }
/* Safari draws its own light-coloured menu button unless told otherwise, so the arrow is drawn here. */
select { -webkit-appearance: none; appearance: none; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 5px 26px 5px 8px; min-height: 34px;
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b0a79a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 9px 6px; }
select option { background: var(--surface-2); color: var(--ink); }

/* ---------- top bar ---------- */
.top { flex: none; display: flex; gap: 18px; align-items: center; padding: 0 18px; min-height: var(--top); border-bottom: 1px solid var(--line); background: var(--bg); z-index: 40; position: relative; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); flex: none; }
.brand span { font: italic 27px/1 var(--serif); letter-spacing: .2px; }
#search { flex: 1; display: flex; min-width: 0; max-width: 560px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 3px 3px 16px; }
#search:focus-within { border-color: var(--ink-2); }
#search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 16px; padding: 6px 0; }
#search input::placeholder { color: var(--ink-3); }
#search button { border-radius: 999px; padding: 0 16px; min-height: 34px; background: var(--surface-2); color: var(--ink); font-weight: 500; }
#search button:hover { background: var(--line); }
.nav { display: flex; gap: 4px; align-items: center; flex: none; }
.navlinks { display: flex; gap: 4px; align-items: center; }
.navlinks button { color: var(--ink-2); padding: 8px 10px; border-radius: 8px; font-size: 14px; min-height: 38px; white-space: nowrap; }
.navlinks button:hover { color: var(--ink); background: var(--surface); }
.nav .cta { margin-left: 8px; }
.menubtn { display: none; width: 40px; height: 40px; border-radius: 10px; flex-direction: column; gap: 4px; align-items: center; justify-content: center; }
.menubtn span { display: block; width: 18px; height: 1.6px; background: var(--ink); border-radius: 1px; }
.menubtn:hover { background: var(--surface); }

/* ---------- map + panel ---------- */
.app { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 0; }
.app[data-panel=open] { grid-template-columns: minmax(0, 1fr) var(--panelw); }
.mapwrap { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #050505; }
.mapstage { position: relative; flex: 1; min-height: 0; overflow: hidden; container: stage / size; }
#map { position: absolute; inset: 0; }
.mapui { position: absolute; z-index: 7; }
.layerpick { top: 12px; right: 12px; }
.layerpick select { background-color: #0a0908cc; border-color: var(--line-2); font-size: 13px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); max-width: 62vw; }
.zoom { top: 58px; right: 12px; display: flex; flex-direction: column; background: #0a0908cc; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.zoom button { width: 36px; height: 36px; font-size: 19px; line-height: 1; color: var(--ink); }
.zoom button + button { border-top: 1px solid var(--line-2); }
.zoom button:hover { background: var(--surface-2); }
.zoom output { display: block; border-top: 1px solid var(--line-2); font: 10.5px var(--mono); color: var(--ink-2); text-align: center; padding: 4px 0 3px; width: 36px; overflow: hidden; }
.mapnote { position: absolute; z-index: 8; left: 50%; top: 14px; transform: translateX(-50%); background: #0a0908e6; border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 16px; font-size: 13.5px; white-space: nowrap; max-width: 88%; overflow: hidden; text-overflow: ellipsis; }

@container stage (max-width: 700px) { .mapnote { top: 56px; max-width: calc(100% - 110px); white-space: normal; text-align: center; border-radius: 12px; } }      /* a narrow map: below the controls in its corners */
.hero { position: absolute; z-index: 6; left: 0; bottom: 0; padding: 150px 210px 92px 40px; max-width: 890px; pointer-events: none; }
/* The shade behind the words: even across their whole width (the Milky Way is bright behind them), fading out to the right and to the top. */
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #0a0908eb 0%, #0a0908db 46%, #0a0908a6 70%, transparent 100%); -webkit-mask-image: linear-gradient(0deg, #000 70%, transparent 100%); mask-image: linear-gradient(0deg, #000 70%, transparent 100%); }
.hero > * { pointer-events: auto; }
.eyebrow { margin: 0 0 10px; font: 500 12px/1.4 var(--mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ember); }
.hero h1 { margin: 0; font: 400 clamp(44px, 6vw, 78px)/0.98 var(--serif); letter-spacing: -.5px; }
.lede { margin: 16px 0 0; font-size: 17px; line-height: 1.5; color: #e2dbcf; max-width: 520px; }
.herobtns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.startwith { margin: 18px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.9; }
.startwith button { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; padding: 2px 0; margin: 0 8px 0 4px; white-space: nowrap; }
.startwith button:hover { text-decoration-color: var(--ember); color: var(--ember); }
.offline { margin: 10px 0 0; font: 11.5px var(--mono); color: var(--ink-3); min-height: 16px; }
.offline button { font: inherit; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.offline button:hover { color: var(--ember); }

/* the tour's worked example: two real pictures of one patch of sky, flipping */
.blink { margin: 0; right: clamp(16px, 6cqw, 96px); top: 46%; transform: translateY(-50%); width: min(300px, 36cqw, calc(100cqh - 190px)); min-width: 150px;
  background: #141210f5; border: 1px solid var(--line-2); border-radius: 14px; padding: 10px 10px 11px; box-shadow: 0 18px 50px #000c; }
.blinkstage { display: block; position: relative; width: 100%; aspect-ratio: 1; padding: 0; border-radius: 6px; overflow: hidden; background: #000; cursor: pointer; }
.blinkstage canvas { display: block; width: 100%; height: 100%; }
.blinkdate { position: absolute; left: 9px; top: 7px; font: 500 12.5px var(--mono); color: var(--ink); text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.blink figcaption { margin-top: 9px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
/* a ladder of brightness: each rung a dot, its magnitude, what it is and how much fainter than the rung above */
.ladder { width: min(360px, 46cqw); padding: 12px 14px 12px; }
.ladder figcaption { margin: 0 0 9px; }
.rungs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rung { display: grid; grid-template-columns: 22px 46px minmax(0, 1fr); gap: 9px; align-items: center; font-size: 13.5px; line-height: 1.3; color: #e2dbcf; }
.rung i { justify-self: center; border-radius: 50%; background: #fff; width: calc(18px - var(--s) * 3.7px); height: calc(18px - var(--s) * 3.7px); opacity: calc(1 - var(--s) * .12); box-shadow: 0 0 calc(14px - var(--s) * 3px) #fff9; }
.rung b { font: 500 14px var(--mono); color: var(--ink); text-align: right; white-space: nowrap; }
.rung small { display: block; font: 11.5px var(--mono); color: var(--ember); }
.rung.unseen { color: var(--ink-2); }
.rung.unseen i { width: 12px; height: 12px; background: none; border: 1.5px dashed var(--ink-3); opacity: 1; box-shadow: none; }
.rungs .limit { display: flex; align-items: center; gap: 8px; font: 500 10.5px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ember); }
.rungs .limit::before, .rungs .limit::after { content: ''; flex: 1; height: 1px; background: var(--ember); opacity: .6; }
.laddernote { margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.blink figcaption b { display: block; font: 400 20px/1.15 var(--serif); color: var(--ink); margin-bottom: 2px; }
@container stage (max-height: 340px) { .blink figcaption span { display: none; } .blink { width: min(250px, 64cqw, calc(100cqh - 84px)); } .blink.ladder { width: min(360px, 92cqw); } .laddernote { display: none; } }      /* a short map: the dates on the pictures say enough */
@container stage (max-height: 320px) { #map .aladin-logo-container { right: auto !important; left: 14px !important; } }      /* a short map: the zoom buttons reach down to where the badge would sit */
@container stage (max-height: 215px) { .zoom { display: none; } }      /* a very short map (small phone, object open): no room above the colour bar; pinch still zooms */

/* wavelength ruler under the map */
.ruler { left: 14px; right: 14px; bottom: 14px; display: flex; gap: 12px; align-items: center; background: #0a0908d9; border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px 6px 8px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ruler button { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); flex: none; font-size: 12px; }
.ruler button:hover { background: var(--line); }
.rulertrack { flex: 1; min-width: 0; }
.ruler input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 4px 0 0; border-radius: 4px; background: linear-gradient(90deg, #fff1d0, #ffc56e 22%, #ff7b39 52%, #d3321f 78%, #7d1414); outline-offset: 4px; }
.ruler input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 6px; height: 22px; border-radius: 3px; background: var(--ink); border: 2px solid var(--bg); box-sizing: content-box; cursor: ew-resize; }
.ruler input[type=range]::-moz-range-thumb { width: 6px; height: 22px; border-radius: 3px; background: var(--ink); border: 2px solid var(--bg); cursor: ew-resize; }
.rulerticks { position: relative; height: 15px; font: 10.5px var(--mono); color: var(--ink-3); }
.rulerticks span { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }
.rulerticks span:nth-child(1) { left: 0; transform: none; } .rulerticks span:nth-child(2) { left: 29.2%; } .rulerticks span:nth-child(3) { left: 41.6%; }
.rulerticks span:nth-child(4) { left: 58%; } .rulerticks span:nth-child(5) { left: 72.2%; } .rulerticks span:nth-child(6) { left: auto; right: 0; transform: none; }
#wavelabel { flex: none; font: 500 15px var(--mono); min-width: 74px; text-align: right; }

/* A still copy of the map, shown while the map changes behind it, so no change ever flashes (see sky.js) */
.veil { position: absolute; inset: 0; overflow: hidden; background: #050505; pointer-events: none; }
.veil canvas { position: absolute; left: 0; top: 0; display: block; }
.veil canvas:first-child { will-change: transform, opacity; }

/* Aladin Lite's own controls, restyled to belong here */
.aladin-container { background: #050505 !important; }
.aladin-location { background: #0a0908cc !important; border: 1px solid var(--line) !important; border-radius: 8px !important; left: 12px !important; top: 12px !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.aladin-location .aladin-location-copy, .aladin-location .aladin-tooltip-container { display: none !important; }
.aladin-location input, .aladin-location .aladin-input { font: 12.5px var(--mono) !important; color: var(--ink-2) !important; background: none !important; border: 0 !important; }
/* The map library's logo: a small credit badge in the style of the other map controls, clear of the colour bar. */
.aladin-logo-container { right: 14px !important; bottom: 76px !important; padding: 5px 7px 4px; background: #0a0908cc; border: 1px solid var(--line); border-radius: 8px; opacity: .85; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.aladin-logo-container .aladin-logo-large { width: 58px !important; }
.aladin-logo-container .aladin-logo-small { width: 20px; }

/* ---------- guided tour ---------- */
/* Docked under the map while an object is open, so it never covers what it talks about. */
.tour { flex: none; position: relative; z-index: 9; background: var(--surface); border-top: 1px solid var(--line-2); padding: 0 22px 16px; overflow: hidden; }
.tourbar { height: 3px; background: var(--line); margin: 0 -22px 12px; }
.tourbar i { display: block; height: 100%; background: var(--ember); transition: width .3s; }
.tourstep { display: flex; justify-content: space-between; align-items: center; font: 500 11px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ember); }
.tourstep button { width: 30px; height: 30px; border-radius: 50%; color: var(--ink-2); font-size: 18px; line-height: 1; }
.tourstep button:hover { color: var(--ink); background: var(--surface-2); }
.tour h2 { margin: 2px 0 0; font: 400 30px/1.05 var(--serif); }
.tour p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: #e2dbcf; max-width: 64ch; }
/* numbered pointers: the card says what each number is, the same number sits on that part of the panel, its tip on the part's corner */
.guide { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50% 50% 3px 50%; background: var(--ember); color: #1a0f08; font: 600 12px/1 var(--mono); font-style: normal; }
.tourpoints { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; font-size: 14.5px; line-height: 1.4; color: #e2dbcf; max-width: 64ch; }
.tourpoints li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.tourpoints b { font-weight: 600; color: var(--ink); }
.tourpoints b::after { content: ':'; }
.guides { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 6; pointer-events: none; }
.guides .guide { position: absolute; transform: translate(-78%, -78%); box-shadow: 0 0 0 3px #0a0908, 0 2px 10px #000c; animation: guidepulse 1.5s ease-out 3; }
@keyframes guidepulse { 0% { box-shadow: 0 0 0 3px #0a0908, 0 0 0 3px var(--ember); } 100% { box-shadow: 0 0 0 3px #0a0908, 0 0 0 18px transparent; } }
/* a walk through the panel: the part being explained is lit, the rest of the panel dimmed, a card says what it is */
.spot { position: absolute; z-index: 5; border: 2px solid var(--ember); border-radius: 10px; box-shadow: 0 0 0 9999px #0a0908bf; pointer-events: none; transition: left .25s, top .25s, width .25s, height .25s; }
.coach { position: fixed; z-index: 60; left: 16px; bottom: 16px; width: min(440px, calc(38vw - 32px)); background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 18px 14px; box-shadow: 0 14px 44px #000d; }
.coachhead { display: flex; justify-content: space-between; align-items: center; font: 500 11px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ember); }
.coachhead button { width: 30px; height: 30px; border-radius: 50%; color: var(--ink-2); font-size: 18px; line-height: 1; }
.coachhead button:hover { color: var(--ink); background: var(--surface-2); }
.coach h2 { margin: 2px 0 0; font: 400 26px/1.08 var(--serif); }
.coach p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: #e2dbcf; }
.coachnav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.coachnav button:disabled { opacity: .4; }
.coach .coachnote { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.langpick { font-size: 13.5px; padding: 5px 26px 5px 10px; border-color: var(--line-2); background-color: transparent; color: var(--ink-2); max-width: 118px; }
.langpick:hover { color: var(--ink); }
.howto { margin-left: auto; border: 1px solid var(--ember); color: var(--ember); border-radius: 999px; padding: 3px 12px; font-size: 13px; white-space: nowrap; }
.howto:hover { background: var(--ember); color: var(--ember-ink); }
.walk { margin-right: auto; }
.walk .short { display: none; }
.tourlinks { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 14px !important; color: var(--ink-2) !important; }
.tourlinks button { border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 12px; font-size: 13.5px; color: var(--ink); min-height: 32px; white-space: nowrap; }
.tourlinks button:hover { border-color: var(--ember); color: var(--ember); }
.tourbtns { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; }
.tourmini { display: none; }
/* Floating over the wide map while no object is open. */
.app[data-panel=closed] .tour { position: absolute; left: 22px; bottom: 96px; width: min(480px, calc(100% - 44px)); background: #141210fa; border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 18px 50px #000c; }
.app[data-panel=closed] .tour h2 { font-size: 32px; }
.app[data-panel=closed] .tour p { font-size: 16px; line-height: 1.55; }

/* ---------- object panel ---------- */
.panel { position: relative; min-width: 0; overflow-y: auto; overflow-x: hidden; border-left: 1px solid var(--line); background: var(--bg); padding: 16px 24px 20px; container-type: inline-size; scrollbar-color: var(--line-2) transparent; }
.app[data-panel=closed] .panel { display: none; }
.ohead { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.ohead .toprow { display: flex; gap: 14px; align-items: flex-start; }
.ohead .idblock { flex: 1; min-width: 0; }
.asis { text-transform: none; letter-spacing: .4px; }
.ohead .kind { margin: 0 0 3px; font: 500 12px/1.4 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ember); }
.ohead h1 { margin: 0; font: 400 clamp(28px, 2.2cqw + 16px, 38px)/1.04 var(--serif); overflow-wrap: anywhere; letter-spacing: -.3px; }
.ohead .gloss { margin: 5px 0 0; font-size: 14.5px; line-height: 1.45; color: #dcd4c7; max-width: 70ch; }
.gomoved { margin: 10px 0 0; }
.gomoved .cta { min-height: 36px; padding: 7px 16px; font-size: 14px; }
.ohead .thumb { flex: none; display: block; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: #000; outline: 1px solid var(--line-2); }
.ohead .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ohead .close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 18px; line-height: 1; flex: none; color: var(--ink-2); }
.ohead .close:hover { color: var(--ink); border-color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 20px; margin: 12px 0 0; }
.facts div { min-width: 0; }
.facts dt { font: 500 10.5px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 1px 0 0; font: 500 13px/1.35 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.facts dd small { display: block; color: var(--ink-2); font-weight: 400; font-size: 11px; }
.links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; align-items: baseline; font-size: 13.5px; }
.links span { color: var(--ink-3); font: 500 10.5px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.links a { text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.links a::after { content: " ↗"; color: var(--ink-3); }
.links a:hover { color: var(--ember); border-color: var(--ember); }

.cols { display: grid; gap: 18px 26px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "look" "viewer" "stack" "more"; align-items: start; }
.cols.nolook { grid-template-areas: "viewer" "stack" "more"; }
.lead { grid-area: look; min-width: 0; display: grid; gap: 14px; }          /* what to look for, and what the measurements say */
.cols.nolook .lead { display: none; }
.lookbox { min-width: 0; }
.lookbox:empty { display: none; }
.viewer { grid-area: viewer; }
.stack { grid-area: stack; display: grid; gap: 22px; min-width: 0; }
/* The encyclopedia card and the small print: last in a single column, under the images when there are two. */
.left { display: contents; }
.more { grid-area: more; display: grid; gap: 18px; min-width: 0; }
.look { border-left: 2px solid var(--ember); padding: 1px 0 1px 14px; margin: 0; font-size: 14.5px; line-height: 1.45; color: #e2dbcf; max-width: 70ch; }
.look b { font: 500 11px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ember); display: block; margin-bottom: 2px; }
.block { min-width: 0; }
/* the answer first: what the measurements below say, in a few words */
.findings { border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); padding: 11px 14px 12px; min-width: 0; }
.findings h2 { margin: 0; font: 500 11px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ember); }
.findings ul { list-style: none; margin: 7px 0 0; padding: 0; display: grid; gap: 7px; }
.findings li { position: relative; padding-left: 19px; font-size: 14.5px; line-height: 1.42; color: #dcd4c7; }
.findings li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.findings li.found::before { background: var(--mint); }
.findings li.unsure::before { background: var(--gold); }
.findings li b { color: var(--ink); font-weight: 600; }
.findings button { display: block; width: 100%; padding: 0; text-align: left; font: inherit; color: inherit; line-height: inherit; }      /* the whole line leads to its details */
.findings button:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
#specnote .hint { margin-top: 8px; }
#specnote details { margin-top: 4px; }
#specnote summary { cursor: pointer; color: var(--ink-3); font-size: 12.5px; }
#specnote summary:hover { color: var(--ink); }
.blocktitle { margin: 0 0 8px; font: 400 24px/1.1 var(--serif); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.blocktitle small { font: 400 13px var(--sans); color: var(--ink-3); }
.blocktitle .inline { margin-left: auto; font: 400 12.5px var(--sans); color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }
details.fold { border-top: 1px solid var(--line); padding-top: 12px; }
details.fold summary, details.display summary { cursor: pointer; color: var(--ink-2); font-size: 13.5px; padding: 3px 0; }
details.fold summary:hover, details.display summary:hover { color: var(--ink); }
details[open] > summary { margin-bottom: 10px; }
.credits { color: var(--ink-3); font-size: 12px; margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }

.wikibox { border-top: 1px solid var(--line); padding-top: 14px; }
.wikibox h2 { margin: 0 0 8px; font: 500 10.5px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.wiki { display: flex; gap: 14px; align-items: flex-start; }
.wiki img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; flex: none; background: #000; }
.wiki img.chart { object-fit: contain; background: #fff; }
.wiki p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.wiki small { display: block; margin-top: 6px; font-size: 12.5px; }
.others { font-size: 12.5px; color: var(--ink-3); margin: 10px 0 0; }

/* ---------- SPHEREx viewer ---------- */
.stage { position: relative; width: 100%; aspect-ratio: 1; background: #000; border-radius: 4px; overflow: hidden; outline: 1px solid var(--line); }
#sky { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: crosshair; }
#sky.zoomed { touch-action: none; }
#caption { position: absolute; left: 12px; top: 10px; right: 12px; pointer-events: none; text-shadow: 0 1px 3px #000, 0 0 10px #000; }
#caption b { font: 400 22px/1.1 var(--serif); display: block; }
#caption span { font: 11.5px var(--mono); color: #d9d2c6; }
#caption i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 2px; }
#status { position: absolute; left: 12px; right: 12px; bottom: 10px; font-size: 12.5px; color: #d9d2c6; text-shadow: 0 1px 3px #000; pointer-events: none; }
#status .bar { height: 2px; background: #ffffff22; margin-top: 5px; overflow: hidden; }
#status .bar i { display: block; height: 100%; background: var(--ember); width: 0; transition: width .2s; }
#notice { position: absolute; inset: auto 12px 40px 12px; background: #141210f2; border: 1px solid var(--gold); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
#notice button { margin-top: 8px; border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 12px; }
.transport { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.transport button { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); font-size: 18px; line-height: 1; flex: none; }
.transport button:hover { background: var(--line); }
.transport .playbtn { width: auto; min-width: 96px; padding: 0 16px; background: var(--ember); color: var(--ember-ink); font: 600 14px var(--sans); }
.transport .playbtn:hover { background: var(--ember); filter: brightness(1.08); }
.transport #seek { flex: 1; min-width: 40px; accent-color: var(--ember); }
.transport select { min-height: 32px; font-size: 12.5px; padding: 2px 22px 2px 6px; background-position: right 7px center; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 12px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { padding: 7px 4px; font-size: 13px; color: var(--ink-2); white-space: nowrap; background: var(--bg); min-height: 34px; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed=true] { background: var(--ink); color: var(--bg); font-weight: 600; }
.detwrap { margin-top: 12px; }
.detstrip { display: flex; gap: 2px; height: 34px; }
.detstrip button { min-width: 0; border-radius: 3px; background: var(--c); color: #1b0b02; font: 600 12px var(--mono); opacity: .5; transition: opacity .15s; position: relative; }
.detstrip button:hover { opacity: .7; }
.detstrip button[aria-pressed=true] { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); z-index: 1; }
.detstrip button:disabled { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 4px, var(--line) 4px, var(--line) 8px); color: var(--ink-3); opacity: .6; }
.detstrip button.loading { animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .3; } to { opacity: .75; } }
.detticks { position: relative; height: 15px; font: 10.5px var(--mono); color: var(--ink-3); }
.detticks span { position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap; }
.detticks span:nth-child(1) { left: 0; transform: none; } .detticks span:nth-child(2) { left: 20.9%; } .detticks span:nth-child(3) { left: 39.3%; }
.detticks span:nth-child(4) { left: 72.2%; } .detticks span:nth-child(5) { left: 86.4%; } .detticks span:nth-child(6) { left: auto; right: 0; transform: none; }
#detnote { margin-top: 6px; }
details.display { margin-top: 10px; }
.tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.tools label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; min-height: 28px; }
.tools input[type=range] { width: 100px; accent-color: var(--ember); }
.tools input[type=checkbox], .inline input { accent-color: var(--ember); }
.tools button { border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 12px; font-size: 13px; min-height: 28px; }
.tools select { min-height: 28px; padding: 1px 22px 1px 6px; font-size: 13px; background-position: right 7px center; }

.export { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 12px; }
.export button { border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; color: var(--ink-2); min-height: 30px; }
.export button:hover { color: var(--ink); border-color: var(--ink-2); }
.export .hint { margin: 0; font-size: 12.5px; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 14px; }
table.t th, table.t td { text-align: right; padding: 6px 6px; border-bottom: 1px solid var(--line); }
table.t th:first-child, table.t td:first-child { text-align: left; padding-left: 0; }
table.t th:last-child, table.t td:last-child { padding-right: 0; }
table.t th { font: 500 10.5px var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--line-2); }
table.t td { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
table.t td:first-child { font-family: var(--sans); font-size: 13px; }
table.mol td:first-child, table.mol td:last-child { white-space: normal; }
table.t td i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.dip { color: var(--mint); } .peak { color: var(--gold); } .none { color: var(--ink-3); }
.verdict b { color: var(--ink); font-weight: 600; }
#scan { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
#scan:empty { display: none; }
#scan .hint { margin-top: 0; }
.flags { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.flags li { display: flex; gap: 4px 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.flags button { border: 1px solid var(--gold); color: var(--gold); border-radius: 999px; padding: 3px 12px; font-size: 13px; min-height: 30px; white-space: nowrap; }
.flags button:hover { background: #f2c14e22; }
.plotwrap { position: relative; }
.plotwrap canvas { width: 100%; height: 220px; display: block; cursor: pointer; touch-action: pan-y; }
.tip { position: absolute; background: #0a0908f2; border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 8px; font: 11.5px var(--mono); pointer-events: none; white-space: nowrap; z-index: 3; }
dl#meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 13px; }
dl#meta dt { color: var(--ink-3); }
dl#meta dd { margin: 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12.5px; }
/* the pipeline's pixel flags of one exposure */
.pxbox { font-family: var(--sans); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.pxbox p { margin: 0 0 6px; }
.pxbox b { color: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.pxread { border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--ink); min-height: 30px; }
.pxread:hover { background: var(--surface); }
.pxflags { display: flex; flex-wrap: wrap; gap: 6px; }
.pxflag { border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px; font: 600 11.5px var(--mono); color: var(--ink); min-height: 28px; }
.pxflag i { font-style: normal; font-weight: 400; color: var(--ink-3); }
.pxflag.note { color: var(--ink-2); border-style: dashed; }
.pxflag:hover { background: var(--surface); }
.pxflag.on { border-color: #ff46aa; background: #ff46aa26; }
.pxsay { color: var(--ink); }
#releases label { display: flex; gap: 8px; align-items: center; min-height: 28px; font: 13px var(--mono); }
.legend { display: flex; flex-wrap: wrap; gap: 2px 12px; font: 11px var(--mono); color: var(--ink-2); margin-top: 6px; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.legend:empty { display: none; }

/* ---------- article sheets ---------- */
.sheetwrap { position: fixed; inset: 0; z-index: 80; background: #050505cc; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); overflow-y: auto; padding: 5vh 16px; overscroll-behavior: contain; }
.sheet { position: relative; max-width: 760px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 44px clamp(20px, 6vw, 60px) 48px; outline: none; }
.sheet .close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 19px; color: var(--ink-2); background: var(--surface); }
.sheet .close:hover { color: var(--ink); border-color: var(--ink-2); }
.sheet h1 { margin: 0; font: 400 clamp(36px, 6vw, 60px)/1 var(--serif); letter-spacing: -.4px; }
.sheet .lead { font-size: clamp(17px, 2.4vw, 20px); line-height: 1.45; color: #e7e0d4; margin: 18px 0 0; }
.sheet h2 { font: 400 28px/1.1 var(--serif); margin: 34px 0 0; }
.sheet p, .sheet li { font-size: 16px; line-height: 1.6; color: #d4ccbf; }
.sheet p { margin: 10px 0 0; }
.sheet a { overflow-wrap: anywhere; }          /* a long address breaks instead of leaving the page */
.sheet .eyebrow { color: var(--ember); font-size: 12px; margin: 0 0 10px; }
.sheet ol, .sheet ul { margin: 10px 0 0; padding-left: 22px; }
.sheet li { margin: 6px 0; }
.sheet li b, .sheet p b { color: var(--ink); font-weight: 600; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 26px; }
.statgrid div { background: var(--surface); padding: 14px 16px; }
.statgrid b { display: block; font: 400 30px/1 var(--serif); color: var(--ember); }
.statgrid span { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.sheet .fine { font-size: 13.5px; color: var(--ink-2); }
.sheet .fine a { overflow-wrap: anywhere; }
.filterfig { margin: 18px 0 0; }
.filterfig svg { width: 100%; height: auto; display: block; }
.filterfig figcaption { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.team { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; }
.team li { margin: 0; border-top: 1px solid var(--line-2); padding-top: 8px; }
.team li b { display: block; font: 400 21px var(--serif); }
.team li span { font-size: 13.5px; color: var(--ink-2); }

/* ---------- wide panel: images and measurements side by side ---------- */
@container (min-width: 640px) {
  .cols { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); grid-template-areas: "viewer look" "viewer stack"; grid-template-rows: auto 1fr; }
  .cols.nolook { grid-template-areas: "viewer stack"; grid-template-rows: auto; }
  .left { grid-area: viewer; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .left > * { min-width: 0; }
}

/* ---------- short desktop screens (projectors, small laptops): keep the images and their controls in view ---------- */
@media (min-width: 901px) and (max-height: 820px) {
  .stage { max-width: max(260px, calc(100vh - 404px)); margin: 0 auto; }
  .ohead .gloss { margin-top: 3px; }
  .facts { margin-top: 10px; }
  .plotwrap canvas { height: 178px; }
  .findings { padding: 9px 13px 10px; }
  .findings ul { gap: 5px; margin-top: 6px; }
  .findings li { font-size: 14px; line-height: 1.38; }
  .stack { gap: 16px; }
}

/* ---------- narrower desktops ---------- */
@media (max-width: 1180px) {
  .navlinks button[data-sheet=how] { display: none; }
}

/* ---------- phones and small tablets: one scrolling column ---------- */
@media (max-width: 900px) {
  html, body { height: auto; }
  body { overflow: visible; display: block; }
  body.touring { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .top { flex-wrap: wrap; padding: 8px 12px 10px; gap: 8px 10px; min-height: 0; }
  .brand span { font-size: 24px; }
  .brand svg { width: 23px; height: 23px; }
  #search { order: 3; flex-basis: 100%; max-width: none; }
  .nav { margin-left: auto; gap: 6px; }
  .nav .cta { margin-left: 0; padding: 7px 14px; min-height: 38px; font-size: 14px; }
  .menubtn { display: flex; }
  .navlinks { display: none; position: absolute; right: 10px; top: 52px; z-index: 50; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 6px; box-shadow: 0 16px 40px #000c; min-width: 200px; }
  .nav.open .navlinks { display: flex; }
  .navlinks button, .navlinks button[data-sheet=how] { display: block; text-align: left; padding: 11px 12px; font-size: 15px; color: var(--ink); min-height: 44px; }

  .app, .app[data-panel=open] { display: block; }
  .app[data-panel=closed] .mapwrap { height: calc(100vh - var(--toph, 104px)); height: calc(100dvh - var(--toph, 104px)); min-height: 400px; }
  body.touring .app[data-panel=closed] .mapwrap { height: calc(100vh - var(--toph, 104px) - 62px); height: calc(100dvh - var(--toph, 104px) - 62px - env(safe-area-inset-bottom)); }
  .app[data-panel=open] .mapstage { flex: none; height: 34vh; height: 34dvh; min-height: 210px; }
  body.touring .app[data-panel=open] .mapstage { height: 26vh; height: 26dvh; min-height: 170px; }
  .layerpick { top: 10px; right: 10px; }
  .zoom { top: 52px; right: 10px; }
  .aladin-location { display: none !important; }
  .aladin-logo-container { right: auto !important; left: 10px !important; bottom: 70px !important; }          /* the zoom buttons own the right edge of a short map */
  .hero { padding: 70px 18px 84px; max-width: none; right: 0; background: linear-gradient(0deg, #0a0908f5 0%, #0a0908d8 55%, transparent 100%); }
  .hero::before { display: none; }
  .hero h1 { font-size: clamp(38px, 11vw, 56px); }
  .eyebrow { font-size: 11px; letter-spacing: 1.1px; }
  .lede { font-size: 15.5px; margin-top: 12px; }
  .herobtns { margin-top: 16px; }
  .herobtns .cta, .herobtns .ghost { min-height: 44px; }
  .startwith { margin-top: 12px; }
  .startwith button { padding: 6px 0; }
  .ruler { left: 10px; right: 10px; bottom: 10px; gap: 8px; padding: 7px 10px 5px 7px; }
  #wavelabel { font-size: 13.5px; min-width: 62px; }
  .mapnote { font-size: 13px; top: 10px; left: 10px; right: 10px; transform: none; max-width: none; white-space: normal; text-align: center; border-radius: 12px; }
  .blink { right: auto; left: 50%; top: 10px; transform: translateX(-50%); width: min(250px, 64cqw, calc(100cqh - 140px)); min-width: 110px; padding: 8px 8px 9px; }
  /* While the example is on show it needs the room, and the map is only its backdrop: the map's controls step aside,
     and on a short screen the map keeps a workable height (the page then scrolls to the text). */
  body.example .layerpick, body.example .zoom, body.example .ruler { visibility: hidden; }
  body.example.touring .app[data-panel=closed] .mapwrap { height: auto; min-height: calc(100vh - var(--toph, 104px) - 62px); min-height: calc(100dvh - var(--toph, 104px) - 62px - env(safe-area-inset-bottom)); }
  body.example .mapstage { flex: 1 0 290px; }
  .blink { width: min(250px, 64cqw, calc(100cqh - 124px)); }
  .blink figcaption { font-size: 12.5px; margin-top: 7px; }
  .blink figcaption b { font-size: 18px; }
  .blink.ladder { width: min(350px, 94cqw); padding: 9px 11px 9px; }
  .rungs { gap: 5px; }
  .rung { font-size: 12.5px; grid-template-columns: 18px 40px minmax(0, 1fr); gap: 7px; }
  .rung b { font-size: 13px; }
  .rung small { font-size: 11px; }
  .laddernote { font-size: 12px; margin-top: 7px; }
  body.example .mapstage:has(.ladder:not([hidden])) { flex-basis: 360px; }

  .tour, .app[data-panel=closed] .tour { position: relative; left: auto; bottom: auto; width: auto; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; box-shadow: none; background: var(--surface); padding: 0 16px 14px; }
  .tourbar { margin: 0 -16px 10px; }
  .tour h2, .app[data-panel=closed] .tour h2 { font-size: 26px; }
  .tour p, .app[data-panel=closed] .tour p { font-size: 15px; line-height: 1.5; }
  .tourbtns { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; margin: 0; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); background: #141210f7; border-top: 1px solid var(--line-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .tourmini { display: block; flex: 1; min-width: 0; font: 500 11.5px var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tourbtns .cta, .tourbtns .ghost { min-height: 44px; padding: 8px 20px; }

  .panel { border-left: 0; overflow: visible; padding: 16px 14px 24px; }
  .guides .guide { transform: translate(-10%, -96%); border-radius: 50% 50% 50% 3px; }          /* the panel's margin is narrow here: the pointer sits above its part, tip down */
  .coach { left: 0; right: 0; bottom: 0; width: auto; border-radius: 14px 14px 0 0; border-width: 1px 0 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
  .coach h2 { font-size: 23px; }
  .coach p { font-size: 14.5px; line-height: 1.45; }
  .walk .long { display: none; }
  .walk .short { display: inline; }
  .walk:not([hidden]) ~ .tourmini { display: none; }
  body.coaching .tourbtns { visibility: hidden; }          /* the tour's own bar makes room for the walk's card */
  .howto { margin-left: 0; }
  .ohead .thumb { width: 56px; height: 56px; }
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .facts div { max-width: none; }
  .links { gap: 8px 16px; font-size: 14px; }
  .links a { padding: 3px 0; }
  .transport button { width: 40px; height: 40px; }
  .seg button { min-height: 40px; font-size: 13.5px; }
  .detstrip { height: 40px; }
  .tools label, .tools button, .tools select { min-height: 36px; }
  .export button { min-height: 38px; padding: 6px 14px; font-size: 13.5px; }
  details.fold summary, details.display summary { padding: 8px 0; font-size: 14px; }
  .sheetwrap { padding: 12px 10px 24px; }
  .sheet { padding: 52px 20px 36px; border-radius: 14px; }
  .sheet h2 { font-size: 25px; margin-top: 28px; }
}
@media (max-width: 380px) {
  .brand span { font-size: 21px; }
  .nav .cta { padding: 7px 11px; font-size: 13.5px; }
  .transport { gap: 6px; }
  .transport .playbtn { min-width: 84px; padding: 0 10px; }
}
/* phones held sideways: the map and the panel side by side would be too cramped, so keep one column but shorten the map */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .app[data-panel=open] .mapstage, body.touring .app[data-panel=open] .mapstage { height: 60vh; height: 60dvh; min-height: 0; }
  .hero { padding-top: 20px; }
  .hero h1 { font-size: 34px; }
  .lede { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ?embed=1 : SPHEREx viewer only, for iframes on other sites */
body.embed #copylink, body.embed .top, body.embed .mapwrap, body.embed .ohead, body.embed .credits, body.embed details.fold, body.embed .wikibox, body.embed .lookbox, body.embed .more { display: none; }
body.embed .app { display: block; }
body.embed .panel { display: block !important; border: 0; }