/* OpsWerks Mission Control. Dark by default (OpsWerks branding); a light theme is
   available per person via the theme toggle (html[data-theme="light"]). Every colour
   below is a token, so pages never hard-code a colour that only works on one theme. */
:root {
  --ink: #001510;
  --ink-2: #021f18;
  --panel: #04281f;
  --panel-2: #073427;
  --line: #0e4535;
  --deep: #01603f;
  --green: #009368;
  --lime: #c8e842;
  --olive: #a9bc3c;
  --off: #f5f5f5;
  --muted: #9fb5ab;
  --p0: #ff5a4f;
  --p1: #ffa53a;
  --p2: #e8d84a;
  --ok: #3fdc8c;
  --field: #001c15;        /* inputs, code blocks, option rows */
  --field-soft: #001c1588;
  --tint: #0b3326;         /* selected / hint / info backgrounds */
  --code-bg: #0a3a2c;
  --quote-bg: #03241b;
  --topbar-bg: #001510ee;
  --banner-p0: #4a0e0b;
  --banner-hold: #4a320b;
  --banner-lock: #2a2a2a;
  --banner-lock-line: #777;
  --meter-low: #6b1410;
  --pulse: #c8e84233;
  --backdrop: #000a;
  --shadow: #0009;
  --meaning: #d8e6df;
  --flash-p0: #3a1410;
  --warn-tint: #3a2a0b55;
  --dot-off: #556;
  --glyph-line: #7d8a84;
  --accent-text: var(--lime); /* the accent when used as text (Redline lightens it for contrast) */
  --font: "Google Sans Flex", "Google Sans", Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Google Sans Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --ink: #f4f7f5;
  --ink-2: #e9efec;
  --panel: #ffffff;
  --panel-2: #eef4f0;
  --line: #cdd9d3;
  --deep: #01603f;
  --green: #00805a;
  --lime: #3d6b00;         /* accent: dark lime so text and buttons stay readable on white */
  --olive: #5c6b10;
  --off: #0d1f19;
  --muted: #52665d;
  --p0: #c62828;
  --p1: #b45309;
  --p2: #8a6d00;
  --ok: #15803d;
  --field: #f7faf8;
  --field-soft: #f7faf899;
  --tint: #e5f2d6;
  --code-bg: #e6efe9;
  --quote-bg: #eef6f1;
  --topbar-bg: #ffffffee;
  --banner-p0: #fde2e1;
  --banner-hold: #fdf0dc;
  --banner-lock: #eceeed;
  --banner-lock-line: #9aa5a0;
  --meter-low: #f3b4b0;
  --pulse: #3d6b0033;
  --backdrop: #0006;
  --shadow: #0003;
  --meaning: #23382f;
  --flash-p0: #ffd9d6;
  --warn-tint: #fdf0dc;
  --dot-off: #b8c4bf;
  --glyph-line: #5b6862;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--off); font-family: var(--font); line-height: 1.45; }
body { min-height: 100vh; overflow-x: hidden; }
a { color: var(--accent-text); }
button, input, select, textarea { font: inherit; color: inherit; }
code, pre, .mono { font-family: var(--mono); }
pre { background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-size: 0.8rem; line-height: 1.4; max-width: 100%; }
:not(pre) > code { background: var(--code-bg); padding: 0.05em 0.35em; border-radius: 4px; font-size: 0.9em; }
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.md table { display: block; overflow-x: auto; }
.md .diagram { overflow-x: auto; margin: 12px 0; }
.md .diagram svg { display: block; margin: 0 auto; min-width: 520px; max-width: 100%; height: auto; }
th, td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
th { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--olive); }
blockquote { margin: 0.6em 0; padding: 0.4em 0.9em; border-left: 3px solid var(--green); background: var(--quote-bg); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0.6em 0 0.35em; }
hr { border: 0; border-top: 1px solid var(--line); }

.label { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; color: var(--accent-text); }
.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.hidden { display: none !important; }
.stack > * + * { margin-top: 12px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.card.hot { border-color: var(--p0); box-shadow: 0 0 0 1px var(--p0) inset; }
.card h2, .card h3 { margin-top: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--lime); color: var(--ink); border: 0; border-radius: 8px; padding: 10px 16px; font-weight: 700; cursor: pointer; text-decoration: none; min-height: 44px; }
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--off); border: 1px solid var(--line); }
.btn.warn { background: var(--p1); }
.btn.danger { background: var(--p0); color: #fff; }
.btn.sm { padding: 6px 10px; min-height: 32px; font-size: 0.85rem; }

input[type=text], input[type=email], input:not([type]), input[type=password], input[type=number], input[type=time], select, textarea {
  background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-height: 44px; width: 100%;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible, .opt:focus-within { outline: 2px solid var(--lime); outline-offset: 1px; }

/* answer options */
.opts { display: grid; gap: 6px; margin: 6px 0 12px; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--field); }
.opt:hover { border-color: var(--green); }
.opt input { margin-top: 4px; accent-color: var(--lime); width: 18px; height: 18px; flex: none; }
.opt .letter { font-family: var(--mono); font-weight: 700; color: var(--accent-text); flex: none; }
.opt:has(input:checked) { border-color: var(--lime); background: var(--tint); }

/* severity tags */
.sev { font-family: var(--mono); font-weight: 700; font-size: 0.78rem; padding: 2px 8px; border-radius: 999px; color: var(--ink); }
.sev.P0 { background: var(--p0); color: #fff; }
.sev.P1 { background: var(--p1); }
.sev.P2 { background: var(--p2); }

.codes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.code { font-family: var(--mono); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; min-width: 92px; }
.code small { font-size: 0.62rem; letter-spacing: 0.14em; color: var(--olive); }
.code b { font-size: 1.35rem; letter-spacing: 0.2em; color: var(--off); }

.alert-box { white-space: pre-wrap; font-family: var(--mono); font-size: 0.82rem; background: var(--field); border: 1px solid var(--line); border-left: 4px solid var(--p1); border-radius: 8px; padding: 10px 12px; overflow-x: auto; }

.banner { padding: 10px 14px; border-radius: 10px; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.banner.p0 { background: var(--banner-p0); border: 1px solid var(--p0); }
.banner.hold { background: var(--banner-hold); border: 1px solid var(--p1); }
.banner.info { background: var(--tint); border: 1px solid var(--green); }
.banner.lock { background: var(--banner-lock); border: 1px solid var(--banner-lock-line); }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--lime); padding: 12px 18px; border-radius: 10px; z-index: 50; max-width: min(92vw, 560px); box-shadow: 0 8px 30px var(--shadow); }
.toast.bad { border-color: var(--p0); }

/* team chip */
.chip { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; }
.glyph { flex: none; }

/* fuel-gauge budget meter */
.meter { position: relative; height: 14px; background: var(--field); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; min-width: 120px; }
.meter > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--deep), var(--green), var(--lime)); border-radius: 999px; transition: width 0.6s; }
.meter.low > i { background: linear-gradient(90deg, var(--meter-low), var(--p0)); }

/* tabs */
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; padding: 10px 12px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; min-height: 44px; }
.tabs button.on { color: var(--accent-text); border-color: var(--lime); }

/* modal */
dialog { background: var(--panel); color: var(--off); border: 1px solid var(--line); border-radius: 14px; max-width: min(860px, 94vw); width: 100%; padding: 0; }
dialog::backdrop { background: var(--backdrop); }
dialog .dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
dialog .dlg-body { padding: 12px 16px 20px; max-height: 75vh; overflow-y: auto; }

/* stage progress dots */
.track { display: flex; gap: 6px; align-items: center; }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); }
.dot.on { background: var(--lime); border-color: var(--lime); }
.dot.now { border-color: var(--lime); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px var(--pulse); } }

.topbar { position: sticky; top: 0; z-index: 10; background: var(--topbar-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.topbar .wrap { padding-top: 10px; padding-bottom: 10px; }
.big-num { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; }

.starfield { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

@media (max-width: 640px) {
  .wrap { padding: 12px 16px; }
  .code { min-width: 80px; }
  .hide-sm { display: none !important; }
}

/* collapsible cards */
.collapse-btn { margin-left: auto; flex: none; background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 6px; width: 28px; height: 28px; line-height: 1; cursor: pointer; font-size: 0.9rem; }
.collapse-btn:hover { color: var(--accent-text); border-color: var(--green); }
.card.collapse-abs { position: relative; }
.card.collapse-abs > .collapse-btn { position: absolute; top: 8px; right: 8px; }
.card.collapsed:not(.collapse-abs) > :not(:first-child) { display: none !important; }
.card.collapse-abs.collapsed > :nth-child(n+3) { display: none !important; }
.card.collapse-abs > .collapse-btn + * { padding-right: 36px; }
.card.collapsed { padding-bottom: 10px; }

/* team colours: glyphs and names carry both variants, the theme picks one */
.gfill { fill: var(--tl); }
.tname { color: var(--tl); }
:root[data-theme="light"] .gfill { fill: var(--tc); }
:root[data-theme="light"] .tname { color: var(--tt); }
:root[data-theme="light"] .starfield { display: none; }

/* theme picker */
.theme-pick { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 0 2px 0 8px; color: var(--muted); font-size: 0.85rem; }
.theme-pick select.theme-select { min-height: 30px; width: auto; border: 0; background: transparent; padding: 2px 6px; color: var(--off); cursor: pointer; }
.theme-pick select.theme-select:focus { outline: none; }
.theme-pick:focus-within { outline: 2px solid var(--lime); outline-offset: 1px; }
.theme-pick.floating { position: fixed; right: 12px; bottom: 12px; z-index: 40; background: var(--panel); }

/* ---------- Ares theme: NASA mission-control navy, Hermes cyan accent ----------
   Reference: design/MARTIAN_STYLE.md. Colours plus a few scoped styling rules;
   Dark and Light are untouched. */
:root[data-theme="ares"] {
  --ink: #020a17;
  --ink-2: #06101f;
  --panel: #071426;
  --panel-2: #0b1c33;
  --line: #1b3550;
  --deep: #0e3c45;
  --green: #329682;
  --lime: #1ee6d2;         /* Hermes cyan: selected, live, primary */
  --olive: #789cc0;        /* NASA sky blue: table heads, sub-labels */
  --off: #d6e4ee;
  --muted: #7890a8;        /* NASA steel blue */
  --p0: #e42430;           /* NASA red tag */
  --p1: #fa961e;           /* rover amber */
  --p2: #e6d23c;           /* MAV yellow */
  --ok: #3ccf7a;           /* Hermes "OPEN" green */
  --field: #040d1b;
  --field-soft: #040d1b99;
  --tint: #0c2a35;
  --code-bg: #0c2236;
  --quote-bg: #08182b;
  --topbar-bg: #020a17f2;
  --banner-p0: #3a0b12;
  --banner-hold: #3a2408;
  --banner-lock: #121c2a;
  --banner-lock-line: #4a5f78;
  --meter-low: #6b1018;
  --pulse: #1ee6d233;
  --backdrop: #000c;
  --shadow: #000a;
  --meaning: #b9cbd9;
  --flash-p0: #3a0b12;
  --warn-tint: #3a240855;
  --dot-off: #2a3c52;
  --glyph-line: #7890a8;
  color-scheme: dark;
}
/* square corners and hairlines everywhere */
:root[data-theme="ares"] :is(.card, .btn, input, select, textarea, pre, .opt, .code, .alert-box, .banner, .toast, dialog, .meter, .meter > i, .tabs button, .theme-pick, .collapse-btn, .pill, .seatchip, .assign, .history button) { border-radius: 2px; }
:root[data-theme="ares"] .sev { border-radius: 1px; letter-spacing: 0.08em; }
/* panel header strip: the first row or label of a card gets a hairline underneath */
:root[data-theme="ares"] .card > :is(.row, .label, summary):first-child { padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
:root[data-theme="ares"] .card .label, :root[data-theme="ares"] th { letter-spacing: 0.16em; }
/* buttons: outlined cyan, primary filled cyan with dark text, uppercase mono */
:root[data-theme="ares"] .btn { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; }
:root[data-theme="ares"] .btn.ghost { border-color: color-mix(in srgb, var(--lime) 45%, var(--line)); color: var(--off); }
:root[data-theme="ares"] .btn.ghost:hover { border-color: var(--lime); color: var(--accent-text); }
/* selected answer: cyan-tint row with a cyan bar on the left */
:root[data-theme="ares"] .opt:has(input:checked) { box-shadow: inset 3px 0 0 var(--lime); }
/* instrument tick ruler along the bottom of the top bar */
:root[data-theme="ares"] .topbar { background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 16px), linear-gradient(var(--topbar-bg), var(--topbar-bg)); background-size: 100% 5px, 100% 100%; background-position: bottom, 0 0; background-repeat: no-repeat; }
/* flat: no gradient fills, quieter starfield */
:root[data-theme="ares"] .meter > i { background: var(--lime); }
:root[data-theme="ares"] .meter.low > i { background: var(--p0); }
:root[data-theme="ares"] .starfield { opacity: 0.35; }

/* ---------- Redline theme: black and red ----------
   Pure black with a crimson accent. Red also means P0, so the accent is a deeper
   crimson and P0 a hotter red; severity is never shown by colour alone (tags read P0/P1/P2). */
:root[data-theme="redline"] {
  --ink: #000000;
  --ink-2: #0a0a0a;
  --panel: #0e0e0e;
  --panel-2: #161616;
  --line: #2b2b2b;
  --deep: #5c0a10;
  --green: #b3121d;        /* secondary accent (gradients, borders on hover) */
  --lime: #e0202e;         /* crimson accent: buttons, selections, labels, countdown */
  --olive: #ff8a90;        /* soft red: table heads, sub-labels */
  --off: #f2f2f2;
  --muted: #a3a3a3;
  --p0: #ff3b3b;           /* hotter than the accent */
  --p1: #ff9f1a;
  --p2: #ffd60a;
  --ok: #30d158;
  --field: #070707;
  --field-soft: #07070799;
  --tint: #2a0a0e;
  --code-bg: #1e0b0d;
  --quote-bg: #120608;
  --topbar-bg: #000000f2;
  --banner-p0: #3d0709;
  --banner-hold: #3a2205;
  --banner-lock: #1a1a1a;
  --banner-lock-line: #666;
  --meter-low: #5c0a10;
  --pulse: #e0202e33;
  --backdrop: #000c;
  --shadow: #000a;
  --meaning: #d9d9d9;
  --flash-p0: #3d0709;
  --warn-tint: #3a220555;
  --dot-off: #3a3a3a;
  --glyph-line: #8a8a8a;
  --accent-text: #ff5a63;  /* lighter red for text: crimson on black is too dim for small labels */
  color-scheme: dark;
}
:root[data-theme="redline"] .sev.P0 { color: #000; } /* black on hot red reads better than white */
/* buttons: crimson fill with white text (dark text on red is hard to read) */
:root[data-theme="redline"] .btn { color: #fff; }
:root[data-theme="redline"] .btn.ghost { color: var(--off); }
:root[data-theme="redline"] .btn.ghost:hover { border-color: var(--lime); color: #fff; }
:root[data-theme="redline"] .btn.warn { color: #000; }
/* a thin red rule under the top bar, and a red edge on the selected answer */
:root[data-theme="redline"] .topbar { border-bottom-color: var(--deep); box-shadow: 0 1px 0 var(--deep); }
:root[data-theme="redline"] .opt:has(input:checked) { box-shadow: inset 3px 0 0 var(--lime); }
:root[data-theme="redline"] .tabs button.on { color: #fff; border-color: var(--lime); }
/* flat budget meter in the accent; low budget switches to the P0 red */
:root[data-theme="redline"] .meter > i { background: linear-gradient(90deg, var(--deep), var(--lime)); }
:root[data-theme="redline"] .meter.low > i { background: var(--p0); }
:root[data-theme="redline"] .starfield { opacity: 0.4; }

/* ---------- mission monitor (assets/mission-vis.js) ----------
   A small CCTV-style panel. The screen inside is always a dark monitor; the frame follows the theme.
   It sits in the page, right after the tab bar (see .mvis-dock). */
.mvis { --scr: #020812; --scr-line: #17304a; --scr-text: #cfe3f2; --scr-dim: #6f89a3; --earth: #1f6fb8; --atmo: #5fb6ff; --moon: #9aa1ab; --ground: #3b4049;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 0 0 12px; font-family: var(--mono); box-shadow: 0 6px 24px var(--shadow); }
/* dock: onboard AI (left) + monitor (right), in the page right after the tab bar.
   Every window is the same width (--dock-w); the page is wide enough for three side by side.
   OPS-E matches the monitor's height. */
:root { --dock-w: 400px; --dock-gap: 10px; }
/* One row of three: each window up to --dock-w and shrinking evenly when the screen is narrower
   (never wrapping, so the board always sits next to the camera). Below 900 px they stack. */
.mvis-dock { display: flex; flex-wrap: nowrap; gap: var(--dock-gap); align-items: flex-start; margin: 0; }
.mvis-dock > * { flex: 1 1 0; max-width: var(--dock-w); min-width: 0; margin: 0; box-sizing: border-box; }
.board-slot > .mvis { margin: 0; }
@media (max-width: 900px) { .mvis-dock { flex-wrap: wrap; } .mvis-dock > * { flex: 1 1 100%; max-width: none; } }
main.wrap.has-dock { max-width: calc(3 * var(--dock-w) + 2 * var(--dock-gap) + 32px + 18px); } /* + the deck border and padding */
/* the mission deck: one section around the three windows, with its own hide button */
.mission-deck { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--ink-2); }
.deck-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 8px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; }
.deck-head b { color: var(--accent-text); } .deck-head .grow { flex: 1; }
.deck-head button { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 4px; height: 24px; padding: 0 8px; cursor: pointer; font: inherit; }
.deck-head button:hover { color: var(--accent-text); border-color: var(--green); }
.mission-deck.min { padding-bottom: 0; } .mission-deck.min .deck-head { padding-bottom: 8px; } .mission-deck.min .mvis-dock { display: none; }
/* mission board (assets/mission-board.js): scene colours on the dark monitor screen */
.mvis.board .mb-earth { fill: var(--earth); stroke: var(--atmo); stroke-width: 1; opacity: 0.85; }
.mvis.board .mb-moon { fill: var(--moon); }
.mvis.board .mb-path { fill: none; stroke: var(--scr-line); stroke-width: 1.2; stroke-dasharray: 3 3; }
.mvis.board .mb-tick { fill: var(--scr-dim); }
.mvis.board .mb-me { fill: none; stroke: #fff; stroke-width: 1.2; }
.mvis.board .mb-you { font-size: 5.5px; font-weight: 700; fill: #fff; letter-spacing: 0.6px; }
.mvis.board .mb-p0ring { fill: none; stroke: #ff3b3b; stroke-width: 1.6; animation: mvis-blink 0.9s steps(2) infinite; }
.mvis.board .mb-sep, .mvis.board .mb-grid { stroke: var(--scr-line); stroke-width: 0.6; }
.mvis.board .mb-leg { font-size: 5.2px; }
.mvis.board .mb-legend-me text { fill: #fff; font-weight: 700; }
.mvis.board .mb-big { font-size: 22px; font-weight: 700; fill: #fff; letter-spacing: 1px; }
.mvis.board .mb-num { font-size: 10px; font-weight: 700; fill: #fff; }
.mvis.board .mb-track { fill: #0b1a2b; stroke: var(--scr-line); stroke-width: 0.6; }
.mvis.board .mb-fill.mb-ok { fill: var(--ok); } .mvis.board .mb-fill.mb-p2 { fill: var(--p2); } .mvis.board .mb-fill.mb-p1 { fill: var(--p1); } .mvis.board .mb-fill.mb-p0 { fill: var(--p0); }
.mvis.board .mb-p1-t { fill: var(--p1); }
.mvis.board .mb-box { fill: #06121f; stroke: var(--scr-line); }
.mvis.board .mb-p0-b { stroke: var(--p0); fill: #2a0a0e; } .mvis.board .mb-p1-b { stroke: var(--p1); fill: #2a1a06; } .mvis.board .mb-p2-b { stroke: var(--p2); fill: #26240a; }
.mvis.board .mb-strip { fill-opacity: 0.18; stroke-width: 0.8; }
.mvis.board .mb-strip.mb-ok { fill: var(--ok); stroke: var(--ok); } .mvis.board .mb-strip.mb-p2 { fill: var(--p2); stroke: var(--p2); } .mvis.board .mb-strip.mb-p0 { fill: var(--p0); stroke: var(--p0); animation: mvis-blink 1.2s steps(2) infinite; }
.mvis.board .mb-strip-t { font-size: 7px; font-weight: 700; fill: #fff; letter-spacing: 0.8px; }
.mvis.board .mb-area { fill: var(--atmo); opacity: 0.12; }
.mvis.board .mb-line { fill: none; stroke: var(--atmo); stroke-width: 1.4; }
.mvis.board .mb-dot { fill: #fff; }
.mvis.board .mb-p0-f { fill: var(--p0); } .mvis.board .mb-p1-f { fill: var(--p1); } .mvis.board .mb-p2-f { fill: var(--p2); }
.mvis.board .mb-live { animation: mvis-blink 1.4s steps(2) infinite; }
.mvis-head { display: flex; align-items: center; gap: 4px; padding: 6px 8px; font-size: 0.66rem; letter-spacing: 0.08em; border-bottom: 1px solid var(--line); }
.mvis-head .grow { flex: 1; }
.mvis-craft { color: var(--off); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mvis-status { padding: 1px 6px; border-radius: 3px; font-weight: 700; color: #000; background: var(--ok); }
.mvis-status.s1 { background: var(--p2); } .mvis-status.s2 { background: var(--p1); } .mvis-status.s3 { background: var(--p0); color: #fff; animation: mvis-blink 0.9s steps(2) infinite; }
.mvis-head button, .mvis-tabs button { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 4px; min-width: 22px; height: 22px; padding: 0 5px; cursor: pointer; font: inherit; font-size: 0.66rem; }
.mvis-head button:hover, .mvis-tabs button:hover { color: var(--accent-text); border-color: var(--green); }
.mvis.min .mvis-screen, .mvis.min .mvis-tabs { display: none; }
.mvis.min .mvis-head { border-bottom: 0; }
.mvis-screen { position: relative; background: var(--scr); aspect-ratio: 280 / 150; }
.mvis-screen svg { display: block; width: 100%; height: 100%; }
.mvis-cam { position: absolute; left: 6px; right: 6px; bottom: 4px; display: flex; gap: 4px; font-size: 0.6rem; color: var(--scr-dim); letter-spacing: 0.08em; pointer-events: none; }
.mvis-cam .grow { flex: 1; }
.mvis-cam .rec { color: #ff4040; animation: mvis-blink 1.4s steps(2) infinite; }
.mvis-alert { position: absolute; top: 6px; right: 6px; font-size: 0.6rem; font-weight: 700; color: #fff; letter-spacing: 0.08em; }
.mvis-alert:not(:empty) { background: #c62828; padding: 1px 5px; border-radius: 2px; }
.mvis-tabs { display: flex; flex-wrap: wrap; gap: 3px; padding: 5px 6px; }
.mvis-tabs button.on { color: var(--accent-text); border-color: var(--lime); }
/* static / signal loss */
.mvis-static { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: repeating-linear-gradient(0deg, #ffffff22 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, #ffffff10 0 2px, transparent 2px 5px); }
.mvis-static.on { opacity: 1; animation: mvis-noise 0.12s steps(3) infinite; }
/* drawing */
.mvis svg text { font-family: var(--mono); fill: var(--scr-text); }
.mvis svg .cap { font-size: 7px; letter-spacing: 1.2px; fill: var(--scr-dim); }
.mvis svg .small { font-size: 7px; fill: var(--scr-text); }
.mvis svg .tiny { font-size: 5.5px; fill: var(--scr-dim); }
.mvis svg .val { font-size: 12px; font-weight: 700; fill: #fff; }
.mvis svg .warn-t { fill: #ffb347; }
.mvis .stars circle { fill: #ffffff; opacity: 0.6; }
.mvis .earth { fill: var(--earth); } .mvis .atmo { fill: none; stroke: var(--atmo); stroke-width: 3; opacity: 0.35; }
.mvis .moon { fill: var(--moon); } .mvis .moon-ground, .mvis .ground { fill: var(--ground); }
.mvis .craters ellipse { fill: #00000040; }
.mvis .tower { stroke: #8b96a3; stroke-width: 1.6; fill: none; }
.mvis .flag { stroke: #e0e0e0; stroke-width: 1.2; fill: #c62828; }
.mvis .streaks path { stroke: #ffffff30; stroke-width: 1; }
.mvis .orbit { fill: none; stroke: var(--scr-line); stroke-dasharray: 3 3; }
.mvis .path { fill: none; stroke: var(--atmo); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: 0.8; }
.mvis .dot { fill: #fff; stroke: var(--atmo); stroke-width: 2; }
.mvis .ghost { fill: none; stroke: #ffb347; stroke-width: 1.4; stroke-dasharray: 2 2; }
.mvis .radar path, .mvis .radar-line { stroke: #5fff9f; stroke-width: 1; stroke-dasharray: 3 2; fill: none; }
.mvis .radar.flaky path, .mvis .radar-line.flaky { stroke: #ffb347; animation: mvis-flaky 1.1s steps(2) infinite; }
.mvis .rcs circle { fill: #e8f6ff; opacity: 0; animation: mvis-puff 2.6s ease-out infinite; }
.mvis .spark { fill: none; stroke: var(--atmo); stroke-width: 1.3; }
.mvis .sysbox rect { fill: #06121f; stroke: var(--scr-line); }
.mvis .sysbox circle { fill: #3ccf7a; }
.mvis .sysbox.p2 circle { fill: #e6d23c; } .mvis .sysbox.p1 circle { fill: #fa961e; animation: mvis-blink 1.2s steps(2) infinite; }
.mvis .sysbox.p0 circle { fill: #ff3b3b; animation: mvis-blink 0.6s steps(2) infinite; } .mvis .sysbox.p0 rect { stroke: #ff3b3b; }
/* the spacecraft (same drawing in every Stage) */
.mvis .craft .body { fill: #e8edf2; stroke: #8b96a3; stroke-width: 0.6; }
.mvis .craft .nose { fill: #c7ced6; } .mvis .craft .nozzle { fill: #6b7480; }
.mvis .craft .window { fill: #5fd3ff; }
.mvis .craft .panel { fill: #1f3c6e; stroke: #8fb4ff; stroke-width: 0.5; } .mvis .craft .panel-line { stroke: #8fb4ff; stroke-width: 0.4; }
.mvis .craft .legs { stroke: #b7c0ca; stroke-width: 1.4; fill: none; display: none; } .mvis .craft .legs.out { display: inline; }
.mvis .craft .plume { fill: #ffb347; opacity: 0.9; animation: mvis-plume 0.18s ease-in-out infinite alternate; transform-origin: 0 20px; }
.mvis .craft .beacon { fill: #3ccf7a; }
.mvis .craft .smoke { display: none; } .mvis .craft .smoke circle { fill: #7a7f86; opacity: 0.55; }
/* severity: P2 caution, P1 warning, P0 emergency */
.mvis.sev-1 .craft .beacon { fill: #e6d23c; animation: mvis-blink 1.4s steps(2) infinite; }
.mvis.sev-2 .craft .beacon { fill: #fa961e; animation: mvis-blink 0.7s steps(2) infinite; }
.mvis.sev-2 .sway { animation: mvis-wobble 2.4s ease-in-out infinite; }
.mvis.sev-3 .craft .beacon { fill: #ff3b3b; animation: mvis-blink 0.35s steps(2) infinite; }
.mvis.sev-3 .sway, .mvis.sev-3 .craft { animation: mvis-shake 0.28s linear infinite; }
.mvis.sev-3 .craft .smoke { display: inline; animation: mvis-smoke 1.6s ease-out infinite; }
.mvis.sev-3 .mvis-screen { box-shadow: inset 0 0 0 2px #ff3b3b, inset 0 0 24px #ff3b3b66; animation: mvis-alarm 1s ease-in-out infinite; }
.mvis.sev-2 .mvis-screen { box-shadow: inset 0 0 0 1px #fa961e88; }
.mvis.lowpower .mvis-screen { filter: brightness(0.55) saturate(0.6); }
@keyframes mvis-blink { 50% { opacity: 0.25; } }
@keyframes mvis-plume { to { transform: scaleY(1.25); } }
@keyframes mvis-wobble { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes mvis-shake { 0% { transform: translate(0, 0); } 25% { transform: translate(1px, -1px) rotate(1.5deg); } 50% { transform: translate(-1px, 1px) rotate(-1.5deg); } 75% { transform: translate(1px, 1px); } }
@keyframes mvis-smoke { from { opacity: 0.7; transform: translateY(0) scale(0.8); } to { opacity: 0; transform: translateY(10px) scale(1.4); } }
@keyframes mvis-alarm { 50% { box-shadow: inset 0 0 0 2px #ff3b3b, inset 0 0 6px #ff3b3b33; } }
@keyframes mvis-noise { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 3px, 5px 0; } }
@keyframes mvis-flaky { 50% { opacity: 0.15; } }
@keyframes mvis-puff { 0% { opacity: 0.9; r: 1; } 60% { opacity: 0; r: 5; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mvis * { animation: none !important; } }

/* ---------- OPS-E, the onboard AI (assets/ai-computer.js) ---------- */
.cora { --skin: #f2c94c; --cora-screen: #020812; --cora-eye: #f4f4ef; --cora-glow: #46b8ff; --cora-glow-dim: #0b3a66; --cora-visor: #04060b; --cora-mouth: #f4f4ef; --cora-mouth-in: #1a0d12; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 6px 24px var(--shadow); font-family: var(--mono); }
.cora-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 0.66rem; letter-spacing: 0.08em; border-bottom: 1px solid var(--line); }
.cora-head .grow { flex: 1; }
.cora-head b { color: var(--accent-text); }
.cora-mood { color: var(--muted); font-size: 0.6rem; }
.cora-head button { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 4px; min-width: 22px; height: 22px; cursor: pointer; font: inherit; font-size: 0.66rem; }
.cora.min .cora-face, .cora.min .cora-log, .cora.min .cora-about { display: none; }
.cora.about .cora-log { display: none; }
.cora-about { padding: 8px 10px; overflow-y: auto; font-size: 0.74rem; line-height: 1.4; color: var(--off); }
.cora-slot .cora:not(.min) .cora-about { flex: 1; min-height: 0; }
.cora-about p { margin: 0 0 6px; }
.cora-about-name { font-size: 0.9rem; } .cora-about-name b { color: var(--accent-text); letter-spacing: 0.06em; }
.cora-about-acro { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); } .cora-about-acro b { color: var(--accent-text); }
.cora-about button { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 4px; min-height: 24px; padding: 0 8px; cursor: pointer; font: inherit; font-size: 0.68rem; }
.cora-about button:hover, .cora-head [data-c="about"][aria-expanded="true"] { color: var(--accent-text); border-color: var(--green); }
/* in the dock: a fixed size, as tall as the mission monitor; the log scrolls inside */
.cora-slot .cora:not(.min) { height: var(--dock-h, 250px); display: flex; flex-direction: column; }
.cora-slot .cora:not(.min) .cora-log { flex: 1; min-height: 0; max-height: none; }
.cora.min .cora-head { border-bottom: 0; }
.cora-face { background: var(--cora-screen); display: flex; justify-content: center; flex: none; height: 112px; overflow: hidden; }
.cora-eyes { width: 100%; height: 100%; }
.cora-eyes .pos { transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
.cora-eyes .strap { fill: #2b2b2b; }
.cora-eyes .rim { fill: #8f99a3; stroke: #5d6670; stroke-width: 2; }
.cora-eyes .rim-in { fill: #3f474f; }
.cora-eyes .sclera { fill: #f7f7f2; }
.cora-eyes .iris-c { fill: #7a4f2a; } .cora-eyes .pupil { fill: #111; } .cora-eyes .glint { fill: #fff; opacity: 0.9; }
.cora-eyes .lid, .cora-eyes .lower { fill: var(--skin); }
.cora-eyes .brow { fill: none; stroke: #2b2b2b; stroke-width: 3.2; stroke-linecap: round; }
.cora-eyes.screen .sclera { fill: var(--cora-eye); }
.cora-eyes.screen .pupil { fill: var(--cora-screen); }
.cora-eyes.screen .lid, .cora-eyes.screen .lower { fill: var(--cora-screen); }
.cora-eyes .lid, .cora-eyes .lower, .cora-eyes .iris, .cora-eyes .pupil, .cora-eyes .brow { transition: transform 0.22s ease; transform-box: fill-box; transform-origin: center; }
.cora-eyes.slow .lid, .cora-eyes.slow .iris { transition-duration: 0.9s; }
.cora-eyes.pop { animation: cora-pop 0.35s ease-out; }
.cora-eyes.shake { animation: cora-shake 0.12s linear 8; }
.cora-eyes.bounce { animation: cora-bounce 0.5s ease-in-out 2; }
@keyframes cora-pop { 0% { transform: scale(0.9); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes cora-shake { 25% { transform: translate(2px, -1px); } 50% { transform: translate(-2px, 1px); } 75% { transform: translate(1px, 1px); } }
@keyframes cora-bounce { 50% { transform: translateY(-4px); } }
.cora-log { list-style: none; margin: 0; padding: 6px 8px; max-height: 190px; overflow-y: auto; font-size: 0.74rem; line-height: 1.35; }
.cora-log li { display: grid; grid-template-columns: auto 1fr; gap: 6px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.cora-log li:last-child { border-bottom: 0; }
.cora-log .t { color: var(--muted); font-size: 0.62rem; padding-top: 1px; }
.cora-log .tech .m { color: var(--off); }
.cora-log .tech.P0 .m { color: var(--p0); } .cora-log .tech.P1 .m { color: var(--p1); } .cora-log .tech.P2 .m { color: var(--p2); }
.cora-log .sass .m { font-family: var(--font); font-style: italic; color: var(--accent-text); }
.cora-log .intro .m { font-family: var(--font); color: var(--accent-text); }

.cora-eyes.glow .visor { fill: var(--cora-visor); stroke: #1b2230; stroke-width: 1.5; }
.cora-eyes.glow .sclera { fill: var(--cora-glow-dim); }
.cora-eyes.glow .led { fill: var(--cora-glow); }
.cora-eyes.glow .lid, .cora-eyes.glow .lower { fill: var(--cora-visor); }
/* OPS-E's mouth (Admin toggle): a line or an open mouth that morphs with the mood */
.cora-eyes .mouth { fill: var(--cora-mouth-in); stroke: none; transition: d 0.3s cubic-bezier(0.3, 1.3, 0.5, 1); }
.cora-eyes .mouth-line { fill: none; stroke: var(--cora-mouth); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; transition: d 0.3s cubic-bezier(0.3, 1.3, 0.5, 1); }
.cora-eyes .mouth-clip { transition: d 0.3s cubic-bezier(0.3, 1.3, 0.5, 1); }
.cora-eyes .mouth-detail > * { opacity: 0; transition: opacity 0.2s; }
.cora-eyes .mouth-detail > .on { opacity: 1; }
.cora-eyes .teeth { fill: #f7f7f2; }
.cora-eyes .tongue { fill: #e0566f; }
.cora-eyes.glow .mouth { fill: #071a2c; }
.cora-eyes.glow .mouth-line { stroke: var(--cora-glow); }
.cora-eyes.glow .teeth { fill: var(--cora-glow); fill-opacity: 0.85; } .cora-eyes.glow .tongue { fill: #2c7fc4; }
.cora-eyes.no-mouth .mouth-g { display: none; }
/* OPS-E pop-up: slides in from the left, top-left under the top bar, when OPS-E is out of sight (assets/ai-computer.js) */
.cora-pop { position: fixed; left: 12px; top: 72px; z-index: 60; width: min(570px, calc(100vw - 24px)); display: flex; gap: 15px; align-items: stretch;
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent-text); border-radius: 14px; padding: 12px; box-shadow: 0 14px 40px var(--shadow);
  transform: translateX(calc(-100% - 30px)); transition: transform 0.4s cubic-bezier(0.2, 1.25, 0.4, 1); font-family: var(--mono); }
.cora-pop.in { transform: none; }
.cora-pop-eyes { flex: none; width: 144px; height: 90px; border-radius: 12px; overflow: hidden; background: var(--cora-screen, #020812); --cora-screen: #020812; --cora-eye: #f4f4ef; --skin: #f2c94c; --cora-glow: #46b8ff; --cora-glow-dim: #0b3a66; --cora-visor: #04060b; --cora-mouth: #f4f4ef; --cora-mouth-in: #1a0d12; }
.cora-pop-eyes svg { width: 100%; height: 100%; }
.cora-pop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cora-pop-head { display: flex; align-items: center; gap: 9px; font-size: 0.99rem; letter-spacing: 0.08em; }
.cora-pop-head b { color: var(--accent-text); } .cora-pop-head .grow { flex: 1; }
.cora-pop-mood { color: var(--muted); font-size: 0.9rem; }
.cora-pop-msg { font-size: 1.2rem; line-height: 1.35; color: var(--off); }
.cora-pop-msg.sass { font-family: var(--font); font-style: italic; color: var(--accent-text); }
.cora-pop-msg.intro { font-family: var(--font); color: var(--accent-text); }
.cora-pop-msg.P0 { color: var(--p0); } .cora-pop-msg.P1 { color: var(--p1); } .cora-pop-msg.P2 { color: var(--p2); }
.cora-pop-acts { display: flex; gap: 9px; margin-top: 3px; }
.cora-pop button { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 6px; min-height: 33px; padding: 0 10px; cursor: pointer; font: inherit; font-size: 0.99rem; }
.cora-pop button:hover { color: var(--accent-text); border-color: var(--green); }
@media (prefers-reduced-motion: reduce) { .cora-pop { transition: none; } }
/* OPS-E mood backdrops (assets/ai-backdrops.js), behind the eyes. Decorative scene colours. */
.cora-eyes .backdrop * { transform-box: fill-box; }
.cbd-scene { animation: cbd-fadein 0.5s ease-out; }
.cbd-throb { animation: cbd-throb 1.6s ease-in-out infinite; } .cbd-throb.fast { animation-duration: 0.55s; }
.cbd-twinkle { fill: #cfe3f2; transform-origin: center; animation: cbd-twinkle 3s ease-in-out infinite; }
.cbd-dim { fill: #6f89a3; opacity: 0.5; }
.cbd-planet { animation: cbd-drift 30s ease-in-out infinite alternate; } .cbd-planet circle { fill: #3b5f8a; } .cbd-planet .ring { fill: none; stroke: #8fb3d9; stroke-width: 1; opacity: 0.7; }
/* angry: fire */
.cbd-flame { transform-origin: 50% 100%; animation: cbd-flicker 0.7s ease-in-out infinite alternate; }
.cbd-ember { fill: #ffcf6a; animation: cbd-rise 2.6s linear infinite; }
.cbd-smoke { fill: #2a1a18; opacity: 0; transform-origin: center; animation: cbd-smoke 4s ease-out infinite; }
/* annoyed */
.cbd-vein path { fill: none; stroke: #ff3b3b; stroke-width: 2.4; stroke-linecap: round; }
.cbd-vein { transform-origin: center; animation: cbd-pulse 1s ease-in-out infinite; }
.cbd-steam { fill: #cfd6de; animation: cbd-steam 2s ease-out infinite; }
.cbd-scribble { fill: none; stroke: #ff9a7a; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 160; animation: cbd-draw 2.4s ease-in-out infinite; }
/* alarm / panic */
.cbd-beacon path { fill: #ff2a2a; opacity: 0.14; } .cbd-beacon { transform-origin: 100% 52.5%; animation: cbd-spin 2.4s linear infinite; } .cbd-beacon.fast { animation-duration: 1s; }
.cbd-hazard path { fill: #ffd400; } .cbd-hz-bg { fill: #111; }
.cbd-bang text { fill: #ffb020; font-family: var(--mono); font-weight: 700; font-size: 26px; } .cbd-bang { animation: cbd-blink 0.8s steps(2) infinite; }
.cbd-ecg path { fill: none; stroke: #4fe08a; stroke-width: 1.4; stroke-linejoin: round; opacity: 0.8; }
.cbd-ecg { animation: cbd-scroll 1.6s linear infinite; } .cbd-ecg.fast { animation-duration: 0.6s; } .cbd-ecg.red path { stroke: #ff5a5a; }
/* worried */
.cbd-sweat { fill: #7cc4ff; animation: cbd-drip 2.2s ease-in infinite; }
/* sad */
.cbd-rain { stroke: #8fb4e0; stroke-width: 1.1; opacity: 0.7; animation: cbd-fall 0.85s linear infinite; }
.cbd-ripple { fill: none; stroke: #8fb4e0; stroke-width: 0.8; transform-origin: center; animation: cbd-ripple 1.6s ease-out infinite; }
.cbd-cloud { fill: #2b3442; animation: cbd-sway 8s ease-in-out infinite alternate; }
/* bored */
.cbd-z { fill: #a99fd0; font-family: var(--mono); font-weight: 700; animation: cbd-float 2.7s ease-in-out infinite; }
.cbd-ground { stroke: #3a3550; stroke-width: 1; stroke-dasharray: 2 4; }
.cbd-roll { animation: cbd-roll 9s linear infinite; }
.cbd-weed { transform-origin: center; animation: cbd-spin 1.6s linear infinite; } .cbd-weed * { fill: none; stroke: #9b8a5a; stroke-width: 0.9; }
/* suspicious */
.cbd-search path { fill: #fff6c2; opacity: 0.1; } .cbd-search { transform-origin: 50% 100%; animation: cbd-sweep 3.5s ease-in-out infinite alternate; }
.cbd-qmarks text { fill: #ffd84a; font-family: var(--mono); font-weight: 700; font-size: 16px; animation: cbd-pulse 1.8s ease-in-out infinite; transform-origin: center; }
.cbd-glass { animation: cbd-snoop 7s ease-in-out infinite; } .cbd-glass * { fill: none; stroke: #d8e6f0; stroke-width: 1.6; stroke-linecap: round; } .cbd-glass circle { fill: #ffffff; fill-opacity: 0.08; }
/* smug */
.cbd-rays path { fill: #ffd84a; opacity: 0.08; } .cbd-rays { transform-origin: 50% 50%; animation: cbd-spin 28s linear infinite; }
.cbd-crown { animation: cbd-bob 2.4s ease-in-out infinite; } .cbd-crown * { fill: #ffcf3a; stroke: #b8860b; stroke-width: 0.6; }
.cbd-sparkle { fill: #fff3a8; transform-origin: center; animation: cbd-twinkle 2s ease-in-out infinite; }
/* happy */
.cbd-heart { animation: cbd-heart 4s ease-in infinite; } .cbd-heart path { fill: #ff7a9a; opacity: 0.85; }
/* excited */
.cbd-confetti { animation: cbd-confetti 2.6s linear infinite; transform-origin: center; }
.cbd-confetti.c1, .cbd-burst.c1 line { fill: #ff5a63; stroke: #ff5a63; } .cbd-confetti.c2, .cbd-burst.c2 line { fill: #ffd84a; stroke: #ffd84a; }
.cbd-confetti.c3, .cbd-burst.c3 line { fill: #4fd18b; stroke: #4fd18b; } .cbd-confetti.c4, .cbd-burst.c4 line { fill: #5fb6ff; stroke: #5fb6ff; } .cbd-confetti.c5 { fill: #c58cff; }
.cbd-burst { transform-origin: center; animation: cbd-burst 2.8s ease-out infinite; } .cbd-burst line { stroke-width: 1.4; stroke-linecap: round; }
/* relieved */
.cbd-aurora { fill: none; stroke-width: 5; stroke-linecap: round; opacity: 0.35; animation: cbd-wave 6s linear infinite; }
.cbd-aurora.a1 { stroke: #4fe0a8; } .cbd-aurora.a2 { stroke: #5fb6ff; opacity: 0.25; animation-duration: 9s; }
.cbd-bubble { fill: none; stroke: #8fe3c0; stroke-width: 1; opacity: 0.7; animation: cbd-rise-slow 4s linear infinite; }
@keyframes cbd-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes cbd-throb { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes cbd-twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes cbd-drift { from { transform: translate(0, 0); } to { transform: translate(-40px, 10px); } }
@keyframes cbd-flicker { 0% { transform: scale(1, 0.84) skewX(-4deg); } 100% { transform: scale(0.94, 1.08) skewX(4deg); } }
@keyframes cbd-rise { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-115px); opacity: 0; } }
@keyframes cbd-rise-slow { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 0.7; } 100% { transform: translateY(-125px); opacity: 0; } }
@keyframes cbd-smoke { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 30% { opacity: 0.55; } 100% { transform: translateY(-70px) scale(2); opacity: 0; } }
@keyframes cbd-pulse { 0%, 100% { transform: scale(0.85); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes cbd-steam { 0% { transform: translateY(0) scale(0.6); opacity: 0.6; } 100% { transform: translateY(-50px) scale(1.8); opacity: 0; } }
@keyframes cbd-draw { 0% { stroke-dashoffset: 160; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes cbd-spin { to { transform: rotate(360deg); } }
@keyframes cbd-blink { 50% { opacity: 0.2; } }
@keyframes cbd-scroll { from { transform: translateX(0); } to { transform: translateX(calc(var(--beat) * -1)); } }
@keyframes cbd-drip { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes cbd-fall { 0% { transform: translate(0, 0); } 100% { transform: translate(-12px, 130px); } }
@keyframes cbd-ripple { 0% { transform: scale(0.2); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes cbd-sway { from { transform: translateX(0); } to { transform: translateX(18px); } }
@keyframes cbd-float { 0% { transform: translate(0, 6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(6px, -10px); opacity: 0; } }
@keyframes cbd-roll { 0% { transform: translate(-90px, 92px); } 100% { transform: translate(290px, 92px); } }
@keyframes cbd-sweep { 0% { transform: rotate(-35deg); } 100% { transform: rotate(35deg); } }
@keyframes cbd-snoop { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(40px, -50px); } 60% { transform: translate(260px, -30px); } 80% { transform: translate(250px, 10px); } }
@keyframes cbd-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
@keyframes cbd-heart { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-120px) scale(1.2); opacity: 0; } }
@keyframes cbd-confetti { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(130px) rotate(540deg); } }
@keyframes cbd-burst { 0% { transform: scale(0.1); opacity: 0; } 15% { opacity: 1; } 60% { transform: scale(1.2); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes cbd-wave { from { transform: translateX(0); } to { transform: translateX(40px); } }
@media (prefers-reduced-motion: reduce) { .cora-eyes, .cora-eyes * { animation: none !important; transition: none !important; } }