@font-face { font-family: Orbitron; src: url("./orbitron-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("./space-mono-regular-latin.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("./space-mono-bold-latin.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
:root { color-scheme: dark; --mc-bg: #050505; --mc-green: #06FF23; --mc-white: #fff; --mc-gray: #888; --mc-line: #555; --mc-mono: 'Space Mono',monospace; --mc-display: Orbitron,'Arial Narrow',sans-serif; font-family: var(--mc-mono); }
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--mc-bg); scroll-behavior: smooth; }
body.mc-page { margin: 0px; min-width: 320px; background: var(--mc-bg); color: var(--mc-white); font: 400 13px/1.7 var(--mc-mono); -webkit-font-smoothing: antialiased; }
button, a, summary { font: inherit; }
a { color: var(--mc-white); text-underline-offset: 4px; }
a:hover { color: var(--mc-green); }
button:focus-visible, a:focus-visible, summary:focus-visible, #mc-canvas:focus-visible { outline: 2px solid var(--mc-green); outline-offset: 3px; }
.mc-site-shell { width: min(100% - 36px, 1120px); margin: 0px auto; }
.mc-site-brand { display: inline-block; margin: 20px 0px 4px; text-decoration: none; font: 700 11px/1.4 var(--mc-mono); letter-spacing: 0.13em; }
.mc-site-brand span { color: var(--mc-gray); font-weight: 400; }
.mc-app { --mc-state-opacity: 1; width: 100%; margin: 0px auto; }
.mc-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; padding: 22px 0px 20px; border-bottom: 1px solid var(--mc-line); }
.mc-heading { max-width: 800px; }
.mc-kicker { margin: 0px 0px 7px; color: var(--mc-gray); font: 700 10px/1.5 var(--mc-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.mc-intro h1 { margin: 0px; color: var(--mc-white); font: 700 clamp(2rem,5vw,3.55rem)/1.02 var(--mc-display); letter-spacing: 0.035em; }
.mc-album { margin: 7px 0px 0px; color: var(--mc-gray); font: 500 12px/1.5 var(--mc-display); letter-spacing: 0.1em; }
.mc-album span { color: var(--mc-white); font: 400 10px/1.5 var(--mc-mono); letter-spacing: 0.08em; }
.mc-premise { max-width: 73ch; margin: 11px 0px 0px; color: var(--mc-white); font-size: 11px; }
.mc-back { flex: 0 0 auto; color: var(--mc-gray); font-size: 10px; }
.mc-console { margin: 20px 0px 28px; border: 1px solid var(--mc-line); background: var(--mc-bg); }
.mc-console-head { height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0px 14px; border-bottom: 1px solid var(--mc-line); font: 700 9px/1.4 var(--mc-mono); letter-spacing: 0.14em; }
.mc-console-head > span:first-child { color: var(--mc-gray); }
.mc-live-status { color: var(--mc-white); }
.mc-live-status.is-live { color: var(--mc-green); }
.mc-canvas-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mc-bg); }
#mc-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; }
#mc-canvas:active { cursor: grabbing; }
.mc-scanlines { position: absolute; inset: 0px; pointer-events: none; z-index: 1; opacity: 0.13; background-image: none; }
.mc-boot, .mc-silence { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(88%, 500px); transform: translate(-50%, -50%); padding: 18px 22px; border: 1px solid var(--mc-gray); background: var(--mc-bg); text-align: center; }
.mc-boot-text { margin: 0px; color: var(--mc-green); font: 700 clamp(15px,3vw,23px)/1.4 var(--mc-display); letter-spacing: 0.07em; }
.mc-boot > p:not(.mc-boot-text) { margin: 6px 0px 0px; color: var(--mc-gray); font-size: 9px; letter-spacing: 0.08em; }
.mc-ellipsis { display: inline-block; min-width: 1.4em; text-align: left; }
.mc-boot-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin: 17px 0px 7px; }
.mc-button { min-height: 42px; padding: 9px 14px; border: 1px solid var(--mc-gray); border-radius: 0px; background: var(--mc-bg); color: var(--mc-white); font: 700 10px/1.3 var(--mc-mono); letter-spacing: 0.05em; cursor: pointer; }
.mc-button:hover { border-color: var(--mc-green); color: var(--mc-green); }
.mc-button-live { border-color: var(--mc-green); background: var(--mc-green); color: var(--mc-bg); }
.mc-button-live:hover { background: var(--mc-bg); color: var(--mc-green); }
.mc-privacy-note { font-size: 8px !important; }
.mc-silence { width: min(88%, 560px); background: rgba(5, 5, 5, 0.88); }
.mc-silence h2 { margin: 0px; color: var(--mc-white); font: 700 clamp(2rem,5vw,3.4rem)/1.1 var(--mc-display); letter-spacing: 0.15em; }
.mc-silence p:not(.mc-kicker) { max-width: 58ch; margin: 12px auto; color: var(--mc-gray); font-size: 11px; }
.mc-silence .mc-button { margin-top: 8px; }
.mc-hud { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 13px 22px; padding: 15px 17px; border-top: 1px solid var(--mc-line); }
.mc-hud-readout { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font: 700 10px/1.4 var(--mc-mono); letter-spacing: 0.08em; }
.mc-hud-readout span:first-child { color: var(--mc-gray); }
#mc-frequency-readout { color: var(--mc-white); text-align: right; }
.mc-hud-readout.is-live #mc-frequency-readout { color: var(--mc-green); }
.mc-signal-row { display: flex; align-items: center; gap: 9px; color: var(--mc-gray); font: 700 9px/1.4 var(--mc-mono); letter-spacing: 0.08em; }
.mc-signal-bars { display: flex; flex: 1 1 0%; gap: 3px; height: 12px; }
.mc-signal-bars i { display: block; flex: 1 1 0%; border: 1px solid var(--mc-gray); background: var(--mc-bg); }
.mc-signal-bars i.is-on { border-color: var(--mc-green); background: var(--mc-green); }
#mc-signal-value { min-width: 34px; color: var(--mc-white); text-align: right; font-variant-numeric: tabular-nums; }
.mc-hud-controls { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 32px; border-top: 1px solid rgb(85, 85, 85); padding-top: 8px; }
.mc-hud-controls p { margin: 0px; color: var(--mc-white); font-size: 10px; }
.mc-audio-toggle { min-height: 34px; padding: 6px 10px; white-space: nowrap; }
.mc-audio-toggle[hidden], [hidden] { display: none !important; }
.mc-transmission { min-height: 100px; padding: 16px 17px; border-top: 1px solid var(--mc-line); }
.mc-transmission .mc-kicker { font-size: 9px; }
.mc-transmission blockquote { max-width: 88ch; margin: 7px 0px 0px; color: var(--mc-white); font-size: 11px; line-height: 1.8; }
.mc-progress { padding: 12px 17px 14px; border-top: 1px solid var(--mc-line); }
.mc-progress h2 { display: flex; justify-content: space-between; gap: 12px; margin: 0px; color: var(--mc-gray); font: 700 9px/1.5 var(--mc-mono); letter-spacing: 0.12em; }
.mc-progress output { color: var(--mc-white); font-variant-numeric: tabular-nums; }
.mc-progress ol { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 7px; margin: 9px 0px 0px; padding: 0px; list-style: none; }
.mc-progress li { min-width: 0px; padding: 7px 8px; border: 1px solid var(--mc-line); color: var(--mc-gray); font-size: 9px; line-height: 1.5; }
.mc-progress li.is-found { border-color: var(--mc-green); color: var(--mc-green); }
.mc-progress li span { display: block; }
.mc-progress li span:last-child { margin-top: 2px; font-size: 8px; letter-spacing: 0.08em; }
.mc-audio-message { min-height: 0px; margin: 0px; padding: 0px; color: var(--mc-gray); font-size: 9px; }
.mc-audio-message:not(:empty) { padding: 8px 0px; }
.mc-canon { margin: 0px 0px 28px; border-top: 1px solid var(--mc-line); border-bottom: 1px solid var(--mc-line); }
.mc-canon summary { padding: 13px 0px; color: var(--mc-gray); font-size: 10px; font-weight: 700; cursor: pointer; }
.mc-canon summary:hover { color: var(--mc-green); }
.mc-canon-copy { max-width: 82ch; padding: 0px 0px 18px; color: var(--mc-gray); font-size: 11px; line-height: 1.9; }
.mc-canon-copy p { margin: 0px 0px 1em; }
.mc-canon-copy strong { color: var(--mc-white); }
.mc-site-footer { padding: 0px 0px 22px; text-align: right; }
.mc-site-footer a { color: var(--mc-gray); font-size: 9px; }
.mc-app.is-flickering .mc-canvas-wrap { opacity: 0.98; }
.mc-app.has-noise .mc-canvas-wrap { outline: 1px solid var(--mc-gray); }
@media (max-width: 650px) {
  .mc-site-shell { width: calc(100% - 24px); }
  .mc-site-brand { margin-top: 14px; font-size: 9px; }
  .mc-intro { display: block; padding: 17px 0px 14px; }
  .mc-intro h1 { font-size: clamp(1.8rem, 10vw, 2.7rem); }
  .mc-kicker { font-size: 8px; }
  .mc-album { font-size: 10px; }
  .mc-album span { font-size: 8px; }
  .mc-premise { margin-top: 8px; font-size: 10px; }
  .mc-back { display: inline-block; margin-top: 10px; font-size: 9px; }
  .mc-console { margin: 14px 0px 21px; }
  .mc-console-head { height: 35px; padding: 0px 10px; font-size: 8px; }
  .mc-canvas-wrap { aspect-ratio: 4 / 3; }
  .mc-boot, .mc-silence { width: 92%; padding: 13px 12px; }
  .mc-boot > p:not(.mc-boot-text) { font-size: 8px; }
  .mc-boot-actions { gap: 6px; margin: 12px 0px 6px; }
  .mc-button { min-height: 44px; padding: 9px 10px; font-size: 9px; }
  .mc-hud { grid-template-columns: 1fr; gap: 11px; padding: 12px 11px; }
  .mc-hud-readout { font-size: 9px; }
  .mc-signal-row { grid-row: 2; }
  .mc-hud-controls { grid-column: 1; align-items: flex-start; }
  .mc-hud-controls p { font-size: 9px; }
  .mc-transmission { min-height: 90px; padding: 13px 11px; }
  .mc-transmission blockquote { font-size: 10px; }
  .mc-progress { padding: 10px 11px 12px; }
  .mc-progress h2 { font-size: 8px; }
  .mc-progress ol { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 5px; }
  .mc-progress li { font-size: 8px; }
  .mc-canon-copy { font-size: 10px; }
  .mc-site-footer { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { scroll-behavior: auto !important; animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
  .mc-scanlines { display: none !important; }
  .mc-app.is-flickering .mc-canvas-wrap { opacity: 1; }
}
.mc-console { border: 3px double rgb(136, 136, 136); background: rgb(17, 17, 17); clip-path: polygon(0px 9px, 9px 0px, calc(100% - 9px) 0px, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0px calc(100% - 9px)); animation: 5.2s steps(1) 0s infinite normal none running mc-crt-breathe; }
.mc-console-head, .mc-hud, .mc-transmission, .mc-progress { background: rgb(17, 17, 17); }
.mc-console-head { border-color: rgb(136, 136, 136); letter-spacing: 0.18em; }
.mc-canvas-wrap { isolation: isolate; background: rgb(5, 5, 5); }
.mc-scanlines { z-index: 1; opacity: 0.42; background: repeating-linear-gradient(transparent 0px, transparent 2px, rgba(0, 0, 0, 0.38) 2px, rgba(0, 0, 0, 0.38) 4px); }
.mc-canvas-wrap::after { content: ""; position: absolute; inset: 0px; z-index: 1; pointer-events: none; background: radial-gradient(transparent 54%, rgba(0, 0, 0, 0.48) 100%); }
.mc-live-status.is-live, .mc-hud-readout.is-live #mc-frequency-readout, .mc-signal-row.is-live #mc-signal-value { color: var(--mc-green); text-shadow: 0 0 5px var(--mc-green); }
.mc-hud-readout, .mc-signal-row, .mc-transmission .mc-kicker, .mc-progress h2 { letter-spacing: 0.12em; }
.mc-transmission { border-top: 3px double rgb(136, 136, 136); }
.mc-progress { border-top: 1px solid rgb(85, 85, 85); }
.mc-progress li { background: rgb(21, 21, 21); }
.mc-progress li.is-found { color: var(--mc-green); text-shadow: 0 0 4px var(--mc-green); }
.mc-button-live { box-shadow: rgb(5, 5, 5) 0px 0px 0px 1px inset; }
@keyframes mc-crt-breathe {
  0%, 47%, 49%, 82%, 84%, 100% { opacity: 1; }
  48%, 83% { opacity: 0.97; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-console { animation: auto ease 0s 1 normal none running none; opacity: 1; }
  .mc-scanlines { opacity: 0.24; }
}

.mc-campaign-readout{display:grid;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:8px 18px;padding:12px 0;border-top:1px solid #555;background:#111}
.mc-campaign-title{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;color:#e0e0e0;font:700 9px/1.5 var(--mc-mono);letter-spacing:.12em}
#mc-mission-progress{color:#888;text-align:right}
.mc-resource-row{display:flex;align-items:center;gap:9px;color:#ccc;font:700 9px/1.4 var(--mc-mono);letter-spacing:.1em}
.mc-resource-blocks{display:flex;flex:1;gap:4px;height:12px}
.mc-resource-blocks i{flex:1;border:1px solid #888;background:#050505}
.mc-resource-blocks i.is-on{border-color:#06FF23;background:#06FF23}
.mc-hull-blocks i.is-on{border-color:#ccc;background:#ccc}
#mc-energy-value,#mc-integrity-value{min-width:36px;color:#e0e0e0;text-align:right;font-variant-numeric:tabular-nums}
.mc-crew-message{grid-column:1/-1;min-height:24px;margin:2px 0 0;padding:7px 9px;border-left:2px solid #888;background:#151515;color:#e0e0e0;font:400 10px/1.5 var(--mc-mono)}
.mc-choice-panel,.mc-repair-panel{margin:0;padding:14px 17px;border-top:3px double #888;background:#111}
.mc-choice-panel[hidden],.mc-repair-panel[hidden]{display:none!important}
.mc-choice-prompt{margin:4px 0 12px;color:#e0e0e0;font:400 11px/1.6 var(--mc-mono)}
.mc-choice-actions{display:flex;flex-wrap:wrap;gap:8px}
.mc-choice-actions .mc-button{min-height:42px}
.mc-repair-pads{display:grid;grid-template-columns:repeat(4,minmax(44px,72px));gap:8px}
.mc-repair-pad.is-target{border-color:#06FF23;background:#06FF23;color:#050505}
@media(max-width:650px){.mc-campaign-readout{grid-template-columns:1fr;gap:8px;padding:11px}.mc-campaign-title,.mc-crew-message{grid-column:1}.mc-resource-row{font-size:8px}.mc-choice-panel,.mc-repair-panel{padding:12px 11px}.mc-choice-actions{display:grid;grid-template-columns:1fr}.mc-repair-pads{grid-template-columns:repeat(4,minmax(0,1fr))}}
