/* Space series design system. Realism carries the picture; the interface is quiet instruments on top.
   Colour tokens, type, controls, tags. Glows live only in the 3D scene (atmosphere, fireballs, flashes). */
@font-face{font-family:"Inter Tight";src:url(../fonts/inter-tight-latin-400-normal.woff2) format("woff2");font-weight:400}
@font-face{font-family:"Inter Tight";src:url(../fonts/inter-tight-latin-500-normal.woff2) format("woff2");font-weight:500}
@font-face{font-family:"Inter Tight";src:url(../fonts/inter-tight-latin-600-normal.woff2) format("woff2");font-weight:600}
@font-face{font-family:"Inter Tight";src:url(../fonts/inter-tight-latin-700-normal.woff2) format("woff2");font-weight:700}
@font-face{font-family:"Inter Tight";src:url(../fonts/inter-tight-latin-800-normal.woff2) format("woff2");font-weight:800}
@font-face{font-family:"Plex Mono";src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400}
@font-face{font-family:"Plex Mono";src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500}
@font-face{font-family:"Plex Mono";src:url(../fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");font-weight:600}
:root{
 --void:#020306;          /* deep space */
 --hull:#080b12;          /* panels and the play bar: solid, never frosted */
 --hull2:#0e131c;         /* raised keys */
 --line:rgba(196,212,235,.20);   /* hairlines */
 --line2:rgba(196,212,235,.42);
 --ink:#dfe6ef;           /* instrument text */
 --dim:#8590a0;           /* secondary readouts */
 --faint:#4b5463;
 --atmos:#5ea2ff;         /* the real blue of the atmosphere: focus, selection, "real" */
 --limb:#a9cdff;
 --city:#f1c26a;          /* the gold of city lights: highlights in text only */
 --fire:#ff7a1c;          /* fire orange: landings only */
 --fire2:#ffd7a0;
 --t-stony:#d8c6a5;--t-carb:#6f93d6;--t-achon:#8ec7a2;--t-iron:#e6eaef;--t-stiron:#b4bd5e;--t-unk:#7b808a;
 --ease:cubic-bezier(.65,0,.35,1); --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--void);color:var(--ink);font:400 15px/1.45 "Inter Tight",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
a{color:var(--limb)}
.mono{font-family:"Plex Mono",ui-monospace,monospace;font-feature-settings:"zero" 1}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- big numbers ---------- */
.big{font-weight:800;letter-spacing:-.045em;line-height:.86;font-variant-numeric:tabular-nums}
.readout{font-family:"Plex Mono",monospace;font-size:12.5px;color:var(--dim)}
.readout b{color:var(--ink);font-weight:500}

/* ---------- keys: chunky, square, machined. Pressed keys sit lower and light from below ---------- */
.key{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 16px;border:1px solid var(--line2);border-radius:3px;cursor:pointer;
 background:linear-gradient(180deg,#171d28,#0b0f16);color:var(--ink);font-weight:600;font-size:14.5px;letter-spacing:-.01em;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -3px 0 rgba(0,0,0,.55),0 2px 0 #000;transition:transform 90ms,box-shadow 90ms,background 160ms}
.key:active,.key[aria-pressed=true]{transform:translateY(2px);background:linear-gradient(180deg,#0b0f16,#121925);box-shadow:inset 0 2px 3px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,255,255,.05)}
.key[aria-pressed=true]{color:#fff;border-color:var(--atmos)}
.key[aria-pressed=true]::after{content:"";position:absolute;left:8px;right:8px;bottom:5px;height:2px;background:var(--atmos)}
.key:focus-visible{outline:2px solid var(--limb);outline-offset:2px}
.key.wide{min-width:140px}
.key small{font-weight:500;color:var(--dim);font-size:12px}

/* ---------- the cassette-deck play bar ---------- */
.deck{display:grid;grid-template-columns:auto auto 1fr auto;align-items:stretch;gap:0;border:1px solid var(--line2);background:var(--hull);border-radius:3px;box-shadow:0 0 0 1px #000}
.deck>*{border-right:1px solid var(--line)}
.deck>*:last-child{border-right:0}
.deck .transport{display:flex;padding:8px;gap:6px}
.deck .play{min-width:92px;min-height:58px;font-size:15px}
.deck .play .glyph{width:0;height:0;border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
.deck .play[aria-pressed=true] .glyph{width:12px;height:16px;border:0;border-left:4px solid currentColor;border-right:4px solid currentColor}
.deck .speeds{display:flex;padding:8px;gap:4px}
.deck .speeds .key{min-width:52px;min-height:58px;padding:0 10px;font-family:"Plex Mono",monospace;font-weight:500}
.deck .track{position:relative;padding:10px 18px 8px;min-width:260px}
.deck .stats{display:flex;flex-direction:column;justify-content:center;padding:8px 18px;min-width:150px}
.deck .stats b{font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1}
/* scrubber: a density strip of meteorites per decade, decade ticks, and a hard vertical playhead */
.scrub{position:relative;height:48px;cursor:pointer}
.scrub canvas{position:absolute;inset:0;width:100%;height:30px}
.scrub .ticks{position:absolute;left:0;right:0;top:32px;height:14px;font-family:"Plex Mono",monospace;font-size:11px;color:var(--dim)}
.scrub .ticks span{position:absolute;transform:translateX(-50%)}
.scrub .head{position:absolute;top:-4px;height:40px;width:2px;background:var(--ink);box-shadow:0 0 0 1px #000}
.scrub .head::before{content:"";position:absolute;left:-5px;top:-1px;width:12px;height:7px;background:var(--ink);clip-path:polygon(0 0,100% 0,50% 100%)}
.scrub .played{position:absolute;left:0;top:0;height:30px;background:rgba(94,162,255,.12);border-right:1px solid var(--atmos)}

/* ---------- toggles for the three toy filters ---------- */
.filters{display:flex;flex-direction:column;gap:14px}
.fgroup h4{font-size:13px;font-weight:600;color:var(--dim);margin-bottom:6px;letter-spacing:0}
.fgroup .row{display:flex;gap:5px;flex-wrap:wrap}
.fgroup .key{min-height:44px;padding:0 12px;font-size:14px}
.sizeglyph{display:inline-block;border-radius:50%;background:currentColor;opacity:.85}
.chip{width:14px;height:14px;border-radius:2px;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.fgroup .key.off{opacity:.45}
.count .big{font-size:44px}
.count .of{font-family:"Plex Mono",monospace;font-size:13px;color:var(--dim);margin-top:4px}

/* ---------- the twist ---------- */
.twist{min-height:56px;padding:0 20px;font-size:15.5px}
.twist[aria-pressed=true]{border-color:var(--fire2)}
.twist[aria-pressed=true]::after{background:var(--fire2)}

/* ---------- the meteorite card: a square-cornered instrument panel, solid, hairline ruled ---------- */
.mcard{background:var(--hull);border:1px solid var(--line2);border-radius:2px;color:var(--ink);width:380px}
.mcard>section{padding:14px 18px;border-top:1px solid var(--line)}
.mcard>section:first-child{border-top:0}
.mcard .nm{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:.95}
.mcard .ty{margin-top:6px;font-size:15px;color:var(--ink)}
.mcard .ty .sci{font-family:"Plex Mono",monospace;font-size:12px;color:var(--dim);margin-left:6px}
.mcard .origin{margin-top:6px;font-size:14px;color:var(--limb)}
.mcard dl{display:grid;grid-template-columns:96px 1fr;gap:7px 12px;font-size:14px}
.mcard dt{color:var(--dim)}
.mcard dd b{font-weight:700}
.mcard .rock{position:relative;height:178px;margin:-14px -18px;background:radial-gradient(70% 90% at 50% 40%,#0d121b,#04060a)}
.mcard .rock canvas{width:100%;height:100%;display:block;cursor:grab}
.mcard .rock .tag{position:absolute;left:12px;top:10px}
.mcard .rock .turn{position:absolute;right:12px;bottom:9px;font-size:12px;color:var(--dim)}
.mcard .sky{position:relative;margin:-14px -18px}
.mcard .sky canvas{width:100%;display:block}
.mcard .sky .tag{position:absolute;left:12px;top:10px}
.mcard .sky .cap{padding:8px 18px 12px;font-size:12.5px;color:var(--dim)}
.mcard .nosky{font-size:14px;color:var(--dim)}
.mcard .acts{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.mcard .acts .key{min-height:50px}
.mcard .acts a{font-size:13.5px}
.mcard .x{position:absolute;right:10px;top:8px;width:34px;height:34px;border:1px solid var(--line);background:none;border-radius:2px;color:var(--dim);font-size:20px;line-height:1;cursor:pointer}

/* ---------- real vs illustration: a filled square means measured, a hollow dashed square means drawn ---------- */
.tag{display:inline-flex;align-items:center;gap:7px;font-family:"Plex Mono",monospace;font-size:12px;line-height:1;color:var(--ink)}
.tag::before{content:"";width:9px;height:9px;flex:none}
.tag.real::before{background:var(--limb)}
.tag.real{color:var(--limb)}
.tag.illus::before{border:1px dashed var(--dim)}
.tag.illus{color:var(--dim)}

/* ---------- the off-the-map shelf ---------- */
.shelf{background:var(--hull);border:1px solid var(--line2);border-radius:2px;width:320px;display:flex;flex-direction:column}
.shelf header{padding:14px 16px;border-bottom:1px solid var(--line)}
.shelf header .big{font-size:34px}
.shelf header p{font-size:14px;color:var(--dim);margin-top:4px}
.shelf .find{margin:10px 16px;border:1px solid var(--line2);background:#05070b;height:40px;padding:0 12px;font:inherit;color:var(--ink);border-radius:2px}
.shelf ol{list-style:none;overflow:auto;flex:1}
.shelf li button{all:unset;cursor:pointer;display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;width:100%;box-sizing:border-box;padding:9px 16px;border-top:1px solid var(--line);font-size:14px}
.shelf li button:hover,.shelf li button.on{background:#0f1520}
.shelf li button.on{box-shadow:inset 2px 0 0 var(--atmos)}
.shelf li .m{font-family:"Plex Mono",monospace;font-size:12px;color:var(--dim)}
.shelf li .o{font-size:12.5px;color:var(--limb)}