:root {
  color-scheme:dark;
  --panel:#101820;
  --text:#f2f1e8;
  --muted:#a5b7c0;
  --cyan:#75cfe3;
  --green:#8bc9aa;
  --amber:#f2ba59;
  --red:#ff7882;
  --line:#47606d;
  font:15px/1.45 'Segoe UI',sans-serif;
  background:#09121a;
  color:var(--text)}
* {
  box-sizing:border-box}
body {
  margin:0}
button,select,input {
  font:inherit}
button,select {
  background:#182a35;
  color:var(--text);
  border:1px solid #49616f;
  border-radius:5px;
  padding:8px 12px}
button {
  cursor:pointer}
button:hover,select:hover {
  border-color:var(--cyan)}
button:focus-visible,select:focus-visible,[role=slider]:focus-visible {
  outline:3px solid var(--cyan);
  outline-offset:3px}
button[aria-disabled=true] {
  cursor:not-allowed;
  color:#81949e;
  border-style:dashed}
a {
  color:var(--cyan);
  text-underline-offset:4px}
.eyebrow {
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--cyan)}
#viewport {
  position:relative;
  width:min(100%,1920px);
  margin:auto;
  overflow:hidden}
#stage {
  position:relative;
  width:1920px;
  height:960px;
  overflow:hidden;
  transform-origin:top left;
  background:#263f4a;
  isolation:isolate}
.frozen-scene {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  z-index:-1}
.game-top {
  position:absolute;
  inset:0 0 auto;
  height:76px;
  background:#101820;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 32px;
  border-bottom:1px solid #506774}
.game-top strong {
  display:block;
  font-size:23px;
  letter-spacing:.12em}
.game-top .eyebrow {
  font-size:10px}
.top-right {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:15px;
  letter-spacing:.12em;
  color:#c1cdd2}
.symbol {
  font-size:25px;
  font-weight:bold}
.command {
  color:var(--cyan)}
.actual {
  color:var(--text)}
.top-divider {
  height:26px;
  width:1px;
  background:#54707e;
  margin:0 12px}
.scene-foot {
  position:absolute;
  inset:auto 0 0;
  height:27px;
  background:#101820;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 32px;
  font-size:10px;
  letter-spacing:.17em;
  color:#97acb8}
#alarm-rail {
  position:absolute;
  left:32px;
  right:32px;
  top:91px;
  display:flex;
  gap:12px;
  z-index:20;
  opacity:1!important;
  transform:none!important;
  pointer-events:none}
.alarm {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:310px;
  padding:14px 18px;
  background:#101820;
  color:var(--amber);
  border:2px solid var(--amber);
  border-radius:5px;
  box-shadow:0 2px 0 #000,0 0 0 2px #071016}
.alarm.damage {
  color:var(--red);
  border-color:var(--red)}
.alarm b {
  font-size:19px;
  letter-spacing:.055em;
  display:block}
.alarm small {
  display:block;
  font-size:13px;
  color:var(--text)}
.alarm .alarm-icon {
  font-size:29px;
  font-weight:700;
  line-height:1}
.console {
  position:absolute;
  left:32px;
  bottom:38px;
  width:1856px;
  transform-origin:bottom left;
  transform:scale(var(--console-size,1));
  opacity:var(--console-opacity,1);
  z-index:4}
.console.full {
  background:#101820;
  border:1px solid #657d88;
  border-radius:7px;
  box-shadow:0 5px 25px #07111980;
  padding:10px 12px 12px}
.console-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:29px;
  padding:0 4px 8px;
  color:#acc0c9;
  letter-spacing:.1em;
  font-size:11px;
  border-bottom:1px solid #344c58}
.console-head b {
  color:var(--text)}
.messages {
  display:flex;
  gap:30px;
  align-items:center;
  height:45px;
  white-space:nowrap;
  font-size:16px;
  padding:0 4px}
.messages b {
  font-size:11px;
  letter-spacing:.1em;
  margin-right:9px;
  color:var(--cyan)}
.messages .action b {
  color:var(--amber)}
.messages .action {
  margin-left:auto;
  color:#f2ba59}
.modules {
  display:grid;
  grid-template-columns:1.12fr 1.58fr 1.03fr .86fr .69fr;
  gap:9px}
.module {
  height:247px;
  border:1px solid #435d6c;
  border-radius:5px;
  background:linear-gradient(135deg,#172832,#101c25);
  padding:10px 12px;
  position:relative}
.module-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
  min-height:25px}
.module h2 {
  font-size:14px;
  letter-spacing:.11em;
  margin:0;
  line-height:1.15}
.module-title button {
  padding:3px 9px;
  font-size:11px;
  letter-spacing:.08em}
.on {
  color:var(--cyan);
  border-color:var(--cyan);
  background:#193744}
.instruments {
  display:flex;
  justify-content:space-evenly;
  gap:4px}
.instrument {
  position:relative;
  width:140px;
  text-align:center;
  flex-shrink:0}
.instrument-title {
  color:#cbd8de;
  font-size:11px;
  letter-spacing:.12em;
  font-weight:600;
  height:19px}
.slider {
  touch-action:none;
  cursor:grab;
  position:relative;
  border:1px solid transparent;
  border-radius:7px;
  user-select:none}
.slider:hover,.slider.is-hover {
  border-color:#75cfe3;
  background:#17334260}
.slider.dragging,.slider.is-dragging {
  cursor:grabbing;
  outline:2px solid #75cfe3;
  background:#24495580;
  box-shadow:0 0 20px #75cfe318}
.slider[aria-disabled=true] {
  cursor:not-allowed;
  background:repeating-linear-gradient(135deg,#22303a40 0 4px,#10182040 4px 8px);
  border:1px dashed #657581}
.slider svg {
  display:block;
  width:100%;
  height:100%;
  overflow:visible}
.pitch-control {
  height:132px;
  width:132px;
  margin:0 auto}
.rudder-control {
  height:118px;
  width:186px;
  margin:0 auto}
.rudder.instrument {
  width:194px}
.values {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-size:15px;
  font-weight:600;
  line-height:1.4}
.values small {
  font-size:9px;
  letter-spacing:.08em;
  margin-right:3px;
  font-weight:500}
.values .order {
  color:var(--cyan)}
.values .actual {
  color:var(--text)}
.pitch-axis {
  font-size:9px;
  color:#a9bdc9;
  letter-spacing:.04em;
  margin-top:1px}
.steering-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:5px;
  margin-bottom:2px}
.segmented {
  display:flex;
  gap:3px}
.segmented button {
  font-size:9px;
  padding:4px 6px;
  letter-spacing:.03em}
.pump-row {
  display:flex;
  gap:13px;
  align-items:center;
  white-space:nowrap;
  font-size:10px;
  letter-spacing:.04em}
.lamp {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  margin-right:5px;
  box-shadow:0 0 7px #8bc9aa44}
.steering-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:1px}
.midships {
  padding:4px 12px;
  font-size:10px;
  letter-spacing:.08em}
.micro {
  font-size:9px;
  letter-spacing:.04em;
  color:#a4b9c3}
.jogs {
  display:flex;
  gap:5px;
  justify-content:center;
  margin-top:3px}
.jogs button {
  font-size:10px;
  padding:3px 12px}
.jogs button:active {
  background:#4c6974}
.thruster .instruments {
  align-items:center;
  gap:5px}
.thruster .instrument {
  width:140px}
.thrust-direction {
  font-size:11px;
  letter-spacing:.06em;
  text-align:center;
  width:88px;
  color:var(--cyan)}
.thrust-direction strong {
  display:block;
  font-size:42px;
  line-height:1.1}
.state-pill {
  border:1px solid var(--green);
  color:var(--green);
  font-size:10px;
  padding:3px 6px;
  border-radius:3px;
  letter-spacing:.1em}
.state-pill.starting,.state-pill.off {
  color:var(--amber);
  border-color:var(--amber)}
.thruster-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:4px}
.thruster-actions button {
  font-size:10px;
  padding:4px 8px}
.disabled-reason {
  font-size:10px;
  color:var(--amber);
  min-height:16px;
  margin-top:3px;
  text-align:center;
  line-height:1.2}
.status-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  border-bottom:1px solid #344c58;
  padding:10px 0;
  font-size:12px}
.status-row b {
  font-size:11px;
  border:1px solid #425b67;
  border-radius:3px;
  padding:4px 7px;
  min-width:68px;
  text-align:center;
  letter-spacing:.04em}
.status-row .held,.status-row .loaded {
  color:var(--green)}
.status-row .limit,.status-row .hard {
  color:var(--amber);
  border-color:var(--amber)}
.status-row .damage {
  color:var(--red);
  border-color:var(--red)}
.status-foot {
  font-size:10px;
  color:var(--muted);
  margin-top:13px}
.wind-main {
  font-size:33px;
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  margin-top:15px}
.wind-main small {
  font-size:16px;
  color:#bccbd2}
.wind-from {
  font-size:15px;
  letter-spacing:.06em}
.wind-flow {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--cyan);
  margin:6px 0}
.wind-flow strong {
  font-size:37px}
.wind-gust {
  font-size:12px;
  color:#afc0c8}
.compact {
  padding:10px 15px;
  background:#101820;
  border:1px solid #657d88;
  border-radius:6px}
.compact .messages {
  height:30px;
  font-size:13px}
.strip {
  display:grid;
  grid-template-columns:1.04fr 1.35fr 1.17fr 1fr .55fr;
  align-items:stretch;
  gap:13px}
.strip-group {
  border-right:1px solid #405b69;
  padding-right:13px}
.strip-group:last-child {
  border:0}
.strip-label {
  font-size:10px;
  letter-spacing:.11em;
  color:#afc3cc;
  margin-bottom:5px;
  display:flex;
  justify-content:space-between;
  align-items:center}
.strip-label button {
  font-size:9px;
  padding:1px 5px}
.mini-row {
  display:flex;
  gap:8px;
  align-items:center;
  margin:4px 0}
.mini-row label {
  font-size:11px;
  width:32px}
.mini-slider {
  width:112px;
  height:22px;
  cursor:grab}
.mini-reading {
  font-size:13px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums}
.mini-reading .order {
  color:var(--cyan)}
.mini-reading .actual {
  color:var(--text)}
.strip-status {
  font-size:11px;
  line-height:1.9}
.strip-status .lamp {
  margin-right:3px}
.strip .wind-main {
  font-size:22px;
  margin-top:2px}
.strip .wind-from {
  font-size:11px}
.minimal {
  bottom:38px;
  min-height:215px;
  pointer-events:none}
#tooltip {
  display:none;
  position:absolute;
  z-index:30;
  background:#101820;
  color:var(--text);
  border:1px solid var(--cyan);
  border-radius:4px;
  padding:9px 13px;
  pointer-events:none;
  font-size:14px;
  box-shadow:0 3px 15px #000a;
  white-space:nowrap;
  opacity:1!important}
#tooltip strong {
  color:var(--cyan)}
.module {
  height:232px}
.full .pitch-control {
  height:110px}
.full .module>.micro {
  display:none}
.full .thruster .pitch-control {
  height:96px}
.full .thruster .pitch-axis {
  display:none}
.full .thruster .instrument-title {
  height:16px}
.full .thruster .thruster-actions {
  margin-top:3px}
.full .thruster .disabled-reason {
  margin-top:4px;
  font-size:9px}
.full .thruster .thruster-actions button {
  padding:3px 8px}
.scene-foot {
  height:39px;
  z-index:6}
.console {
  bottom:45px}
.full .module .instrument .values {
  font-size:14px}
.full .steering .instrument .values {
  font-size:15px}
.scene-foot {
  height:45px}
.compact {
  padding-top:14px;
  padding-bottom:14px}
.full .steering:has(.jogs) .rudder-control {
  height:94px}
.compact {
  bottom:223px}
.thruster .instruments {
  display:block;
  position:relative}
.thruster .instrument,.instrument.lateral {
  width:270px;
  margin:auto}
.thruster-control {
  width:270px;
  height:94px;
  margin:auto}
.full .thruster .instrument-title {
  height:16px}
.full .thruster .thrust-direction {
  width:auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  font-size:10px;
  margin:2px 0}
.full .thruster .thrust-direction strong {
  display:inline;
  font-size:20px;
  line-height:1}
.full .thruster .thrust-direction .micro {
  display:none}
.full .thruster .thruster-actions {
  margin-top:4px}
#alarm-rail {
  top:auto;
  bottom:8px;
  right:auto;
  max-width:1856px;
  gap:10px}
.alarm {
  height:44px;
  min-width:0;
  gap:10px;
  padding:6px 14px;
  border-radius:4px}
.alarm small {
  display:none}
.alarm .alarm-icon {
  font-size:25px}
.alarm b {
  font-size:19px;
  line-height:1.2}
.console {
  bottom:66px}
.compact {
  bottom:223px}
.scene-foot {
  height:54px}
.scene-foot:has(~ #tooltip) {
  font-size:9px;
  align-items:flex-start;
  padding-top:2px}
.console.minimal {
  width:490px;
  min-height:0;
  pointer-events:auto}
.minimal-block {
  background:#101820ed;
  border:1px solid #547380;
  border-radius:6px;
  padding:12px 16px}
.minimal-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px}
.minimal-heading h2 {
  font-size:12px;
  letter-spacing:.1em;
  margin:0}
.minimal-heading button {
  padding:2px 8px;
  font-size:10px}
.numbers-heading,.number-row {
  display:flex;
  justify-content:space-between;
  align-items:center}
.numbers-heading {
  font-size:9px;
  color:#a5b7c0;
  letter-spacing:.1em;
  border-bottom:1px solid #344c58;
  padding-bottom:4px}
.number-row {
  font-size:11px;
  line-height:1.65;
  font-variant-numeric:tabular-nums}
.number-row [data-mini] {
  display:flex;
  gap:16px;
  font-size:13px}
.number-row .order {
  color:var(--cyan);
  min-width:72px;
  text-align:right}
.number-row .actual {
  min-width:70px;
  text-align:right}
.minimal-footer {
  border-top:1px solid #344c58;
  margin-top:5px;
  padding-top:4px}
.minimal-footer .strip-status {
  font-size:10px;
  line-height:1.4}
.minimal-wind {
  font-size:11px;
  margin:4px 0}
.minimal-message {
  font-size:10px;
  margin-top:3px}
.minimal-message b {
  color:var(--cyan);
  font-size:9px;
  margin-right:8px}
.minimal-message.action,.minimal-message.action b {
  color:var(--amber)}
.full .thruster-control { height: 80px; }
.lamp.none { background: transparent; border: 1px solid #a5b7c0; box-shadow: none; }
.lines-panel{grid-column:4 / 6;padding:9px 10px}
.lines-panel .module-title{margin-bottom:3px}
.crew-indicator{font-size:10px;color:var(--cyan);white-space:nowrap}
.crew-indicator small{font-size:8px;color:var(--muted)}
.winch-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;font-size:9px;letter-spacing:.04em}
.line-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.line-tile{min-width:0;background:#101820;border:1px solid #47606d;border-radius:4px;padding:8px;outline-offset:2px}
.line-tile.selected{border-color:var(--cyan)}
.line-tile:focus-visible{outline:2px solid var(--cyan)}
.line-tile header{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:10px;letter-spacing:.05em}
.line-load{color:var(--text);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.line-load small{color:var(--muted);font-size:9px}
.line-state{color:var(--cyan);font-size:10px;font-weight:600;white-space:nowrap;margin-top:8px;min-height:15px;font-variant-numeric:tabular-nums}
.line-actor{font-size:9px;line-height:1.3;color:var(--muted);min-height:28px;margin-top:3px}
.line-orders{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px}
.line-orders button{font-size:9px;padding:4px 2px;letter-spacing:.02em}
.line-orders button:active{background:#245365;border-color:var(--cyan)}
.line-orders button:disabled{opacity:.38;cursor:not-allowed}
.lines-foot{display:flex;justify-content:space-between;gap:5px;font-size:8px;color:var(--muted);margin-top:6px}
.lines-foot b{color:var(--text)}
.crew-notice{position:absolute;right:16px;top:7px;max-width:760px;padding:3px 12px;background:#183942;border:1px solid var(--cyan);border-radius:4px;color:var(--text);font-size:12px;box-shadow:0 2px 8px #0006;z-index:7}
.crew-notice::before{content:'CREW  /  ';color:var(--cyan);font-weight:700;font-size:10px}
.console.minimal .crew-notice{top:auto;bottom:100%;right:0;left:0;margin-bottom:7px}
#stage[data-berth=bottom] #alarm-rail{top:84px;bottom:auto}
#stage[data-berth=bottom] .console{top:144px;bottom:auto;transform-origin:top left}
#stage[data-berth=bottom] .crew-notice{top:7px;bottom:auto}
#stage[data-berth=bottom] .console.minimal .crew-notice{top:100%;bottom:auto;margin-top:7px}
.lines-panel .line-state { font-size: 11px; }
.lines-panel .line-actor { min-height: 24px; }
.lines-panel .line-orders button { font-size: 10px; padding: 3px 2px; }
.lines-foot { font-size: 10px; }
.lines-foot span:nth-child(2) { font-size: 11px; }
.wind-indicator {
  border: 1px solid #638798;
  border-radius: 5px;
  background: #142c38;
  padding: 7px 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.wind-bearing { display: flex; align-items: center; gap: 12px; font-size: 14px; white-space: nowrap; }
.wind-bearing > b { color: var(--cyan); font-size: 11px; letter-spacing: .12em; }
.wind-vector { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 10px; color: #b9d0da; }
.wind-vector strong { color: var(--cyan); font-size: 25px; line-height: 1; }
.wind-readings { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.wind-speed { font-size: 29px; font-weight: 600; line-height: 1.05; white-space: nowrap; }
.wind-speed small { font-size: 16px; font-weight: 400; color: #c0d2db; }
.wind-gust-reading { font-size: 14px; white-space: nowrap; }
.wind-gust-reading > span { font-size: 10px; letter-spacing: .07em; margin-right: 6px; color: #c0d2db; }
.wind-gust-reading strong { font-size: 23px; font-weight: 600; }
.wind-gust-reading small { font-size: 14px; }
.wind-priority { border-color: var(--amber); }
.wind-priority .wind-gust-reading strong { color: var(--amber); }
.full > .wind-indicator { position: absolute; top: 9px; right: 12px; width: 420px; height: 66px; }
.full .console-head { padding-right: 444px; }
.full .messages { width: calc(100% - 444px); flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; font-size: 14px; }
.full .messages .action { margin-left: 0; }
.compact .strip { grid-template-columns: 1.04fr 1.35fr 1.17fr 1fr .75fr; }
.compact .wind-group { padding-right: 0; }
.compact .wind-indicator { height: 100%; padding: 7px 10px; }
.compact .wind-bearing { flex-wrap: wrap; gap: 3px 9px; font-size: 13px; }
.compact .wind-vector { width: 100%; margin-left: 0; }
.compact .wind-readings { gap: 5px; }
.compact .wind-speed { font-size: 28px; }
.compact .wind-gust-reading > span { display: block; line-height: 1.1; }
.minimal .wind-indicator { margin: 8px 0; padding: 7px 12px; }
.minimal .wind-bearing { font-size: 14px; }
.full > .wind-indicator { padding: 4px 12px; }
.full .crew-notice { right: 450px; max-width: 720px; }
.compact .crew-notice { right: 280px; max-width: 720px; }
.module.thruster.not-fitted{opacity:.45;filter:grayscale(1)}
.module.thruster.not-fitted .state-pill,.state-pill.not.fitted{background:#3a3f43;color:#cfd6da;border-color:#6a737a}
.strip-group:has(.state-pill.not.fitted){opacity:.5;filter:grayscale(1)}
.messages .action.ready,.minimal-message.action.ready{border-color:#5fd36a;color:#5fd36a}
.guide-sub{display:inline;opacity:.75;margin-left:12px}
.docking-bar{display:flex;gap:26px;align-items:baseline;padding:4px 6px 8px;border-bottom:1px solid var(--line);margin-bottom:8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.dock-item{display:flex;align-items:baseline;gap:7px}
.dock-label{font-size:10px;letter-spacing:.11em;color:#afc3cc}
.dock-val{font-size:20px;font-weight:700;color:var(--text)}
.dock-unit{font-size:11px;color:var(--muted);letter-spacing:.04em}
.dock-val.amber{color:var(--amber)}
.dock-val.red{color:var(--red)}
.compact .strip{grid-template-columns:1fr 1.3fr 1.1fr .95fr 1.5fr .75fr}
.dock-strip{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.dock-strip .dock-item{display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:baseline}
.dock-strip .dock-val{font-size:15px}
.dock-strip .dock-unit{grid-column:1/3;font-size:10px;white-space:nowrap}
.minimal .number-row .dock-val{font-size:11px;font-weight:600}