/* Event Horizon: observatory-instrument UI.
   Near-black slabs with hairlines and small corners. Display type is Michroma (after Microgramma/Eurostile, the
   lettering of 2001 and mission-control consoles), set wide in capitals for the few big words; a mono for every number.
   One warm accent (ember, the accretion colour) and one cool one (ice), used sparingly. */
:root{
  --ink:rgba(8,8,10,.66); --ink-solid:#0b0b0d;
  --hair:rgba(233,228,218,.085); --hair2:rgba(233,228,218,.16); --hair3:rgba(233,228,218,.3);
  --bone:#ebe6dc; --soft:#c9c4ba; --dim:#8f8a80; --faint:#5f5b55;
  --ember:#f0a458; --ember-hi:#ffc98f; --ember-lo:rgba(240,164,88,.14); --ice:#9cc3f5; --good:#8fd9b6;
  --display:'Michroma',sans-serif; --sans:'Instrument Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --edge:24px; --r:3px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:var(--bone);font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased;font-feature-settings:'ss01'}
#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;cursor:crosshair;touch-action:none}
#gpu{position:fixed;inset:0;width:100vw;height:100vh;display:none;pointer-events:none}
sub,sup{line-height:0}
::selection{background:var(--ember);color:#140c04}

/* a slab: the one surface every panel shares */
.glass{background:var(--ink);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);border:1px solid var(--hair);border-radius:var(--r);box-shadow:0 18px 50px rgba(0,0,0,.45)}

/* ---------- viewfinder: corner brackets and a live readout strip frame the render ---------- */
#finder{position:fixed;inset:10px;pointer-events:none;z-index:0}
#finder i{position:absolute;width:22px;height:22px;border:0 solid var(--hair3)}
#finder i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}
#finder i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}
#finder i:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
#finder i:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
#readout{position:fixed;bottom:17px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;font:500 9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);white-space:nowrap;pointer-events:none}
#readout::before,#readout::after{content:'';width:42px;height:1px;background:linear-gradient(90deg,transparent,var(--hair3))}
#readout::after{transform:scaleX(-1)}
#readout b{font-weight:500;color:var(--bone);letter-spacing:.06em;margin-left:6px}
#readout .rec{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ember);box-shadow:0 0 8px var(--ember);margin-right:2px;vertical-align:1px;animation:rec 2.4s ease-in-out infinite}
#readout.paused .rec{background:var(--ice);box-shadow:0 0 8px var(--ice);animation:none}
@keyframes rec{50%{opacity:.35}}

/* ---------- control panel ---------- */
#panel{position:fixed;top:var(--edge);right:var(--edge);width:336px;max-height:calc(100vh - 2*var(--edge));overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(233,228,218,.14) transparent;transition:transform .45s var(--ease),opacity .45s;counter-reset:sec;z-index:2}
#panel.hidden{transform:translateX(calc(100% + 40px));opacity:0;pointer-events:none}
#panel header{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:13px;padding:18px 18px 16px;border-bottom:1px solid var(--hair);background:linear-gradient(180deg,rgba(11,11,13,.94),rgba(11,11,13,.82));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.logo{width:30px;height:30px;border-radius:50%;flex:none;position:relative;background:radial-gradient(circle,#000 0 41%,rgba(255,214,160,.95) 44%,var(--ember) 49%,rgba(240,164,88,.25) 58%,transparent 70%)}
.logo::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--hair2)}
#panel h1{font:400 13.5px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;margin:0;color:#fff}
#panel header p{margin:6px 0 0;font:500 8.5px var(--mono);letter-spacing:.16em;white-space:nowrap;text-transform:uppercase;color:var(--dim)}
#hidePanel{margin-left:auto;align-self:flex-start;background:none;border:1px solid var(--hair2);color:var(--dim);border-radius:var(--r);width:26px;height:26px;cursor:pointer;font:400 12px var(--mono);line-height:1;transition:color .2s,border-color .2s}
#hidePanel:hover{color:var(--bone);border-color:var(--hair3)}

section{padding:18px 18px 20px;border-bottom:1px solid var(--hair);counter-increment:sec}
section:last-of-type{border-bottom:0}
section.primary{background:linear-gradient(180deg,rgba(240,164,88,.035),transparent 70%)}
/* numbered like a lab manual: 01 — Time */
h2,details.grp summary{font:500 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin:0 0 16px;display:flex;align-items:center;gap:10px}
h2::before,details.grp summary::before{content:counter(sec,decimal-leading-zero);color:var(--ember);letter-spacing:.06em}
h2::after{content:'';flex:1;height:1px;background:var(--hair)}
h3{display:flex;align-items:center;gap:10px;font:500 9px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:22px 0 0}
h3::after{content:'';flex:1;height:1px;background:var(--hair)}
h3 + .row{margin-top:12px}

.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12.5px;margin:14px 0 4px;color:var(--soft)}
.row:first-of-type{margin-top:0}
.row > span{min-width:0}
output{font:400 11.5px var(--mono);color:var(--bone);white-space:nowrap}
.big-out{font:400 12.5px var(--mono);color:var(--ember)}
.cls{font:500 11.5px var(--sans);color:var(--ice);margin-left:6px;letter-spacing:.02em}

/* sliders: a graduated scale, a hairline track that fills with ember, and a slim needle */
input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:20px;margin:0;cursor:pointer;--p:50%;
  background:repeating-linear-gradient(90deg,var(--hair2) 0 1px,transparent 1px calc(10% - .1px)) left bottom/100% 4px no-repeat}
input[type=range]:focus{outline:none}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:linear-gradient(90deg,var(--ember) var(--p),var(--hair2) var(--p))}
input[type=range]::-moz-range-track{height:1px;background:linear-gradient(90deg,var(--ember) var(--p),var(--hair2) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:3px;height:15px;margin-top:-7px;border-radius:1px;background:var(--ember-hi);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 10px rgba(240,164,88,.7);transition:height .2s var(--ease),margin .2s var(--ease)}
input[type=range]::-moz-range-thumb{width:3px;height:15px;border:0;border-radius:1px;background:var(--ember-hi);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 10px rgba(240,164,88,.7)}
input[type=range]:hover::-webkit-slider-thumb,input[type=range]:active::-webkit-slider-thumb{height:19px;margin-top:-9px}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--ice)}

/* time: a segmented control */
.speeds{display:grid;grid-template-columns:1.25fr repeat(6,1fr);margin-top:14px;border:1px solid var(--hair2);border-radius:var(--r);overflow:hidden}
.spd{font:400 10.5px var(--mono);color:var(--dim);background:transparent;border:0;border-left:1px solid var(--hair);padding:7px 0;cursor:pointer;transition:color .15s,background .15s}
.spd:first-child{border-left:0}
.spd:hover{color:var(--bone);background:rgba(233,228,218,.04)}
.spd.on{color:var(--ember-hi);background:var(--ember-lo);box-shadow:inset 0 -1px 0 var(--ember)}
.spd.pause.on{color:#140c04;background:var(--ember);box-shadow:none}

/* star types: specimen cards */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.chip{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font:500 11.5px var(--sans);color:var(--soft);background:rgba(233,228,218,.02);border:1px solid var(--hair);border-radius:var(--r);padding:9px 9px 8px;cursor:pointer;text-align:left;transition:border-color .2s,background .2s,color .2s}
.chip i{width:7px;height:7px;border-radius:50%;display:block;box-shadow:0 0 8px currentColor;margin-bottom:3px}
.chip small{font:400 9.5px var(--mono);color:var(--faint);letter-spacing:.02em}
.chip:hover{border-color:var(--hair2);color:var(--bone)}
.chip.on{border-color:rgba(240,164,88,.55);background:linear-gradient(180deg,var(--ember-lo),rgba(240,164,88,.03));color:#fff}
.chip.on small{color:var(--dim)}
.chip.on::after{content:'';position:absolute;top:-1px;left:9px;right:9px;height:1px;background:var(--ember);box-shadow:0 0 8px var(--ember)}

/* the verdict reads like a caption in a journal */
.verdict{margin-top:14px;font-size:12px;line-height:1.55;padding:2px 0 2px 13px;border-left:1px solid var(--hair3);color:var(--soft)}
.verdict b{font:400 10px var(--display);letter-spacing:.14em;text-transform:uppercase;margin-right:4px}
.verdict.tde{border-left-color:var(--ember)} .verdict.tde b{color:var(--ember-hi)}
.verdict.whole{border-left-color:var(--ice)} .verdict.whole b{color:var(--ice)}

.btns{display:grid;grid-template-columns:1fr 1.15fr 1.15fr;gap:6px;margin-top:18px}
button.act{font:500 10px var(--mono);letter-spacing:.1em;white-space:nowrap;text-transform:uppercase;color:var(--soft);background:transparent;border:1px solid var(--hair2);border-radius:var(--r);padding:10px 6px;cursor:pointer;transition:all .18s}
button.act:hover{color:var(--bone);border-color:var(--hair3);background:rgba(233,228,218,.035)}
button.act.primary{color:#140c04;background:var(--ember);border-color:var(--ember);box-shadow:0 0 0 1px rgba(0,0,0,.3) inset,0 6px 22px rgba(240,164,88,.25)}
button.act.primary:hover{background:var(--ember-hi);border-color:var(--ember-hi)}
button.act.primary:active{transform:translateY(1px)}
button.act.on{color:var(--ice);border-color:rgba(156,195,245,.55);background:rgba(156,195,245,.08)}
.btns.two{grid-template-columns:1fr 1fr;margin-top:6px}
button.act.quiet{border-color:transparent;color:var(--faint);padding:7px 6px;letter-spacing:.08em;font-size:9.5px}
button.act.quiet:hover{color:var(--soft);border-color:var(--hair)}

/* toggles: a label with an indicator lamp */
.toggles{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tog{display:inline-flex;align-items:center;gap:7px;font:500 11.5px var(--sans);color:var(--dim);background:transparent;border:1px solid var(--hair2);border-radius:var(--r);padding:6px 10px 6px 9px;cursor:pointer;transition:all .2s}
.tog::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--faint);transition:all .2s}
.tog:hover{color:var(--bone);border-color:var(--hair3)}
.tog.on{color:var(--bone);border-color:rgba(240,164,88,.4)}
.tog.on::before{background:var(--ember);box-shadow:0 0 7px var(--ember)}

/* black hole: named presets, then a table of derived radii */
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:18px}
.preset{font:500 11px var(--sans);color:var(--soft);background:transparent;border:1px solid var(--hair);border-radius:var(--r);padding:7px 8px;cursor:pointer;text-align:left;transition:all .2s;line-height:1.25}
.preset small{display:block;font:400 9px var(--mono);color:var(--faint);margin-top:3px}
.preset:hover{border-color:var(--hair2);color:var(--bone)}
.preset.on{border-color:rgba(240,164,88,.55);background:var(--ember-lo);color:#fff}
.stats{display:grid;grid-template-columns:1fr 1fr;margin:16px 0 2px;border-top:1px solid var(--hair)}
.stat{padding:9px 0 8px;border-bottom:1px solid var(--hair)}
.stat:nth-child(odd){padding-right:10px;border-right:1px solid var(--hair)}
.stat:nth-child(even){padding-left:12px}
.stat span{display:block;font:500 8.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.stat b{display:block;font:400 12px var(--mono);margin-top:4px;white-space:nowrap;color:var(--bone)}
.stat b i{display:block;font-style:normal;color:var(--dim);font-size:10px;margin-top:1px}
.note{font-size:11px;color:var(--dim);margin-top:10px;line-height:1.5}
.note:empty{display:none}
.legend{display:flex;gap:14px;flex-wrap:wrap;font:400 9.5px var(--mono);letter-spacing:.06em;color:var(--dim);margin-top:12px}
.legend span::before{content:'';display:inline-block;width:14px;height:1px;margin-right:6px;vertical-align:middle;background:var(--c);box-shadow:0 0 6px var(--c)}
.legend + .row,.toggles + .row{margin-top:18px}
select{width:100%;margin-top:6px;font:400 11.5px var(--mono);color:var(--bone);background:transparent;border:1px solid var(--hair2);border-radius:var(--r);padding:8px 9px;outline:none;cursor:pointer}
select:hover{border-color:var(--hair3)}
select option{background:var(--ink-solid)}

/* collapsible groups share the numbered heading */
details.grp summary{cursor:pointer;list-style:none;margin:0;padding:2px 0;transition:color .2s}
details.grp summary::-webkit-details-marker{display:none}
details.grp summary::after{content:'+';margin-left:auto;font:300 14px var(--mono);color:var(--dim);letter-spacing:0;transition:transform .3s var(--ease)}
details.grp[open] summary::after{transform:rotate(45deg)}
details.grp[open] summary{margin-bottom:18px}
details.grp summary:hover{color:var(--bone)}
details.grp .toggles.first{margin-top:0}
details.grp.about{font-size:12px;color:var(--soft);line-height:1.6}
details.grp.about ul{list-style:none;padding:0;margin:0}
details.grp.about li{position:relative;padding-left:16px;margin-bottom:10px}
details.grp.about li::before{content:'';position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--ember)}
#panel footer{display:flex;justify-content:space-between;padding:12px 18px 14px;border-top:1px solid var(--hair);font:400 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* ---------- HUD: the mass reads like a plate caption ---------- */
#hud{position:fixed;top:var(--edge);left:var(--edge);padding:16px 18px 14px;min-width:268px;pointer-events:none;z-index:1}
#hud .label{font:500 9px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
#hud .mass{font:400 27px/1 var(--display);margin:12px 0 16px;color:#fff;letter-spacing:.02em}
#hud .mass em{font:400 12px var(--mono);font-style:normal;color:var(--dim);margin-left:6px;letter-spacing:.06em}
#hud .mass sup{font-size:.48em;vertical-align:1.05em;margin-left:2px}
.counters{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair)}
.counters > div{font:500 8.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:9px 0 7px;border-bottom:1px solid var(--hair)}
.counters > div:nth-child(3n+2){padding-left:12px;border-left:1px solid var(--hair);border-right:1px solid var(--hair);padding-right:8px}
.counters > div:nth-child(3n){padding-left:12px}
.counters > div:nth-child(n+4){border-bottom:0}
.counters b{display:block;font:400 14px var(--mono);letter-spacing:0;text-transform:none;color:var(--bone);margin-top:4px}
#paused{display:none;margin-top:12px;font:500 9.5px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ice)}
#paused::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ice);box-shadow:0 0 8px var(--ice);margin-right:8px;vertical-align:1px}
#paused.show{display:block}

/* luminosity chart */
#lc{position:fixed;left:var(--edge);bottom:var(--edge);width:336px;padding:14px 16px 11px;pointer-events:none;z-index:1}
#lc .head{display:flex;justify-content:space-between;align-items:baseline;font:500 9px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
#lc .head b{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ember-hi)}
#lcCanvas{width:100%;height:88px;display:block;margin-top:10px;border-bottom:1px solid var(--hair)}
#lc .foot{display:flex;justify-content:space-between;font:400 9.5px var(--mono);color:var(--faint);margin-top:7px}
#lc .foot span::before{content:'';display:inline-block;width:12px;height:0;border-top:1px dashed var(--ice);margin-right:6px;vertical-align:middle}
#lc .foot span.solid::before{border-top:1px solid var(--ember)}

/* event log: captions that slide in under the top edge */
#events{position:fixed;top:var(--edge);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;width:min(540px,calc(100vw - 760px));z-index:1}
.ev{font-size:12.5px;line-height:1.4;color:var(--soft);padding:8px 14px 8px 13px;border-radius:var(--r);background:rgba(8,8,10,.7);border:1px solid var(--hair);border-left:2px solid var(--hair3);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:evin .5s var(--ease);transition:opacity 1s,transform 1s;text-align:left}
.ev b{font:400 9.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-right:3px}
.ev.tde{border-left-color:var(--ember);box-shadow:0 0 30px rgba(240,164,88,.12)} .ev.tde b{color:var(--ember-hi)}
.ev.whole{border-left-color:var(--ice)} .ev.whole b{color:var(--ice)}
.ev.out{opacity:0;transform:translateY(-6px)}
@keyframes evin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* the hint wraps inside the gap between the chart and the panel (both 336 px wide at the edge margin) */
#hint{position:fixed;bottom:42px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 2*(336px + var(--edge) + 28px));text-align:center;line-height:2;font:400 10.5px/2 var(--mono);letter-spacing:.04em;color:var(--dim);pointer-events:none;transition:opacity .8s;text-shadow:0 1px 8px #000}
kbd{font:500 9.5px var(--mono);border:1px solid var(--hair2);border-radius:2px;padding:1px 5px;color:var(--bone);background:rgba(233,228,218,.04)}
#launchTip{position:fixed;pointer-events:none;font:400 11px var(--mono);color:var(--bone);background:rgba(8,8,10,.82);border:1px solid var(--hair2);border-left:2px solid var(--ember);border-radius:var(--r);padding:6px 9px;display:none;transform:translate(16px,16px);max-width:320px;line-height:1.45;backdrop-filter:blur(10px)}
#showPanel{position:fixed;top:var(--edge);right:var(--edge);display:none;font:500 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bone);padding:10px 14px;cursor:pointer;z-index:2}
#showPanel:hover{border-color:var(--hair3)}
#showPanel.show{display:block}
#fatal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--soft);font-size:14px}

/* one orchestrated entrance; 'backwards' so the panel's own hide transform still works afterwards */
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes fade{from{opacity:0}}
#finder{animation:fade 1.6s .1s ease-out backwards}
#hud{animation:rise .9s .25s var(--ease) backwards}
#panel{animation:rise .9s .4s var(--ease) backwards}
#lc{animation:rise .9s .55s var(--ease) backwards}
#readout,#hint{animation:fade 1.2s .8s ease-out backwards}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:900px){
  :root{--edge:16px}
  #finder,#readout,#hint{display:none}
  #events{width:calc(100vw - 32px);top:auto;bottom:130px}
  #lc{width:calc(100vw - 32px)}
  #panel{width:calc(100vw - 32px);max-height:55vh;top:auto;bottom:16px}
  #hud{right:var(--edge);min-width:0;padding:12px 14px 10px}
  #hud .mass{font-size:21px;margin:8px 0 12px}
  .counters > div{font-size:7.5px;letter-spacing:.1em;padding:7px 0 6px}
  .counters b{font-size:12.5px}
}