:root {
  color-scheme: dark;
  font-family: "Consolas", "Lucida Console", "Courier New", monospace;
  --ink: #d6e3dc;
  --ink-soft: #86968e;
  --line: #35413b;
  --line-bright: #6a7b72;
  --screen: #010302;
  --accent: #c7d9cf;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #010201;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(6px, 1.4vw, 26px);
  color: var(--ink);
}

button { font: inherit; }

.device {
  position: relative;
  width: min(96vw, calc(96vh * 16 / 9), 1720px);
  aspect-ratio: 16 / 9;
  display: grid;
  grid-template-rows: 4.7% 91.3% 4%;
  border: 1px solid #46524c;
  outline: 1px solid #141a17;
  outline-offset: 5px;
  background: #030604;
  box-shadow: 0 0 0 9px #020302, 0 24px 90px rgba(0, 0, 0, .8);
  overflow: hidden;
  isolation: isolate;
}

.device::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, transparent 60%, rgba(0, 0, 0, .38) 100%);
  z-index: 20;
}

.device-header,
.device-footer {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  border-color: var(--line);
  background: #050907;
  color: var(--ink-soft);
  letter-spacing: .08em;
  font-size: clamp(6px, .58vw, 11px);
}

.device-header { border-bottom: 1px solid var(--line); }
.device-footer { border-top: 1px solid var(--line); padding: 0 1.15%; gap: 2.5%; }
.device-footer b { margin-left: auto; color: #77877f; font-weight: 400; }

.device-id,
.device-mode { display: flex; align-items: center; height: 100%; }
.device-id { width: 38%; gap: 3%; padding-left: 1.2%; }
.device-id b { color: var(--accent); font-size: 1.18em; letter-spacing: .18em; }
.device-mode { gap: 1.1em; }
.device-mode i { width: .62em; aspect-ratio: 1; border-radius: 50%; background: #a9c3b5; box-shadow: 0 0 7px #7da08f; animation: status-pulse 2.4s ease-in-out infinite; }
.device-clock { margin-left: auto; padding-right: 1.25%; color: var(--accent); font-variant-numeric: tabular-nums; }

.device-screen {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 78%) minmax(0, 22%);
}

.scan-stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #000;
  border-right: 1px solid var(--line-bright);
}

.fallback-scan,
.scan-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fallback-scan {
  filter: grayscale(1) contrast(.92) brightness(.78);
  transform: scale(1.012);
  animation: scan-breathe 10s ease-in-out infinite, luminance-drift 3.7s steps(12) infinite;
}

.scan-video {
  opacity: 0;
  background: #000;
  filter: grayscale(1) contrast(.94) brightness(.84);
  transition: opacity 70ms linear;
}

.scan-video.is-visible { opacity: 1; }

.scan-shade,
.scan-sweep,
.scan-grain,
.rescan-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scan-shade {
  z-index: 7;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, .06) 58%, rgba(0, 0, 0, .66) 112%);
}

.scan-sweep {
  z-index: 8;
  height: 24%;
  opacity: .11;
  background: linear-gradient(180deg, transparent, rgba(222, 239, 230, .22), transparent);
  animation: sweep 5.8s linear infinite;
}

.scan-grain {
  z-index: 9;
  opacity: .15;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 3px),
    repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,.08) 0 1px, transparent 1px 4px);
  background-size: 100% 3px, 9px 11px;
  mix-blend-mode: screen;
  animation: grain-shift .24s steps(2) infinite;
}

.rescan-burst {
  z-index: 13;
  opacity: 0;
  background:
    linear-gradient(180deg, transparent 0 42%, rgba(236, 250, 242, .58) 49%, transparent 56%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 2px, transparent 2px 5px);
}

.scan-stage.is-rescanning { animation: rescan-jolt 180ms steps(3); }
.scan-stage.is-rescanning .rescan-burst { animation: rescan-flash 180ms steps(3); }

.larva {
  position: absolute;
  z-index: 6;
  width: clamp(68px, 12.5%, 190px);
  height: auto;
  opacity: 0;
  filter: grayscale(1) contrast(1.12) brightness(.66) blur(.12px) drop-shadow(0 0 3px rgba(236, 243, 239, .26));
  mix-blend-mode: screen;
  transform-origin: 50% 50%;
  pointer-events: none;
}

.scan-stage[data-larva-overlay="true"] .larva { opacity: .67; }

.scan-meta {
  position: absolute;
  z-index: 12;
  top: 1.25%;
  display: flex;
  gap: 1.1em;
  color: rgba(220, 233, 226, .72);
  font-size: clamp(6px, .53vw, 10px);
  letter-spacing: .07em;
  text-shadow: 0 1px 2px #000;
}

.scan-meta-left { left: 1.2%; }
.scan-meta-right { right: 1.5%; flex-direction: column; gap: .45em; align-items: flex-end; }

.focus-mark {
  position: absolute;
  z-index: 11;
  inset: 34% 43% 34% 43%;
  opacity: .44;
}

.focus-mark i { position: absolute; width: 16%; height: 16%; border-color: rgba(222, 235, 228, .6); }
.focus-mark i:nth-child(1) { left: 0; top: 0; border-left: 1px solid; border-top: 1px solid; }
.focus-mark i:nth-child(2) { right: 0; top: 0; border-right: 1px solid; border-top: 1px solid; }
.focus-mark i:nth-child(3) { left: 0; bottom: 0; border-left: 1px solid; border-bottom: 1px solid; }
.focus-mark i:nth-child(4) { right: 0; bottom: 0; border-right: 1px solid; border-bottom: 1px solid; }

.depth-ruler {
  position: absolute;
  z-index: 11;
  right: 1.1%;
  top: 13%;
  bottom: 7%;
  width: 2.1%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  color: rgba(213, 229, 220, .55);
  font-size: clamp(5px, .42vw, 8px);
  border-right: 1px solid rgba(213, 229, 220, .25);
  padding-right: .35em;
}

.depth-ruler i { width: 45%; border-top: 1px solid rgba(213, 229, 220, .32); }

.data-panel {
  position: relative;
  display: grid;
  grid-template-rows: 43% 18% 15% 24%;
  min-width: 0;
  background: linear-gradient(90deg, #070c09, #020503 72%);
}

.panel-block {
  min-height: 0;
  border-bottom: 1px solid var(--line);
  padding: 4.5% 5%;
  overflow: hidden;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: clamp(5px, .48vw, 9px);
  letter-spacing: .12em;
  margin-bottom: 3%;
}

.panel-title b { color: #aebfb6; font-weight: 400; }

.preset-list { display: grid; height: 88%; grid-template-rows: repeat(6, 1fr); }

.preset-list button {
  position: relative;
  display: grid;
  grid-template-columns: 26% 1fr 12%;
  align-items: center;
  min-width: 0;
  border: 0;
  border-top: 1px solid #1e2923;
  background: transparent;
  color: #6f8178;
  padding: 0 3%;
  text-align: left;
  cursor: pointer;
  letter-spacing: .08em;
  font-size: clamp(5px, .52vw, 10px);
}

.preset-list button:first-child { border-top: 0; }
.preset-list button:hover,
.preset-list button:focus-visible { background: #111a15; color: #d0ded6; outline: 1px solid #83958b; outline-offset: -2px; }
.preset-list button.is-active { color: #e1ece6; background: linear-gradient(90deg, rgba(161, 185, 172, .2), transparent); }
.preset-list button.is-active::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; background: #c5d8ce; box-shadow: 0 0 6px rgba(197,216,206,.6); }
.preset-list b { font-weight: 600; color: inherit; }
.preset-list i { font-style: normal; color: #4f5e57; text-align: right; }

.vital-block { display: grid; grid-template-rows: 36% 64%; }
.metric-row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 7%; }
.metric-row span { color: var(--ink-soft); font-size: clamp(5px, .5vw, 9px); }
.metric-row strong { color: #d2e3da; font-size: clamp(12px, 1.55vw, 27px); font-weight: 400; letter-spacing: .05em; }
.metric-row small { color: #697970; font-size: clamp(5px, .46vw, 8px); }
.waveform { width: 100%; height: 100%; overflow: hidden; }
.wave-grid { fill: none; stroke: #16231c; stroke-width: .7; }
.wave-line { fill: none; stroke: #a7c2b4; stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px rgba(169, 204, 185, .5)); animation: wave-slide 2.2s linear infinite; }

.data-block { display: grid; grid-template-columns: 1fr 1fr; gap: 2%; }
.data-block div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; border-bottom: 1px dotted #27342e; }
.data-block span { color: #66776e; font-size: clamp(5px, .44vw, 8px); }
.data-block b { color: #bdcec5; font-size: clamp(7px, .72vw, 13px); font-weight: 400; }
.data-block small { grid-column: 2; color: #56645d; font-size: clamp(4px, .36vw, 7px); }

.control-block { border-bottom: 0; }
.gauge-set { display: flex; justify-content: space-between; height: 56%; padding: 2% 6% 0; }
.gauge { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 3%; color: #697970; font-size: clamp(5px, .42vw, 8px); }
.gauge > i { position: relative; width: clamp(4px, .42vw, 8px); height: 100%; border: 1px solid #34433b; background: #050806; }
.gauge > i > b { position: absolute; left: 1px; right: 1px; bottom: 1px; height: 54%; background: linear-gradient(0deg, #516a5e, #b8cec2); transition: height .5s ease; }
.gauge:nth-child(2) > i > b { height: 42%; }
.gauge:nth-child(3) > i > b { height: 61%; }
.system-line { display: flex; align-items: center; gap: 6%; margin-top: 4%; color: #687970; font-size: clamp(4px, .4vw, 8px); }
.system-line i { width: .62em; aspect-ratio: 1; border-radius: 50%; background: #9bb6a8; box-shadow: 0 0 5px rgba(155,182,168,.8); }
.system-line b { margin-left: auto; font-weight: 400; color: #aabcb3; }

.mode-switch {
  position: absolute;
  z-index: 15;
  right: 7%;
  bottom: 5.5%;
  width: 72%;
  height: 16%;
  display: grid;
  grid-template-columns: 1fr 1fr .72fr;
  border: 1px solid #48574f;
  background: rgba(2, 5, 3, .94);
}

.mode-switch button {
  position: relative;
  appearance: none;
  border: 0;
  border-right: 1px solid #35413b;
  background: #060b08;
  color: #708078;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .25em;
  cursor: pointer;
  letter-spacing: .1em;
}

.mode-switch button:last-child { border-right: 0; }
.mode-switch button b { font-size: clamp(5px, .48vw, 9px); font-weight: 500; }
.mode-switch button span { font-size: clamp(4px, .34vw, 7px); color: #4f5f56; }
.mode-switch button:hover,
.mode-switch button:focus-visible { color: #d3e2da; background: #101a14; outline: 1px solid #91a69a; outline-offset: -2px; }
.mode-switch button.is-active { color: #e0ece5; background: linear-gradient(180deg, #19251e, #0b120e); box-shadow: inset 0 2px 0 #bdcfc5; }
.mode-switch button.is-active span { color: #9aafa4; }
[data-mode="worm"] .wave-line { animation-duration: 1.35s; stroke: #c1d4ca; }
.debug .mode-switch { outline: 1px dashed #e6d77a; outline-offset: 3px; }

.debug-readout {
  display: none;
  position: absolute;
  z-index: 30;
  left: 1.2%;
  bottom: 1.5%;
  padding: .45em .6em;
  color: #fae781;
  background: rgba(0,0,0,.72);
  border: 1px solid #8d8044;
  font-size: clamp(6px, .5vw, 10px);
  letter-spacing: .04em;
}
.debug .debug-readout { display: block; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes status-pulse { 0%, 75%, 100% { opacity: .48; } 82% { opacity: 1; } }
@keyframes scan-breathe { 0%, 100% { transform: scale(1.012) translate(0, 0); } 45% { transform: scale(1.022) translate(.1%, -.12%); } 55% { transform: scale(1.019) translate(-.08%, .08%); } }
@keyframes luminance-drift { 0%, 100% { opacity: .94; } 33% { opacity: 1; } 66% { opacity: .96; } }
@keyframes sweep { from { transform: translateY(-110%); } to { transform: translateY(500%); } }
@keyframes grain-shift { 0% { transform: translate(0, 0); } 25% { transform: translate(2px, -1px); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, 2px); } }
@keyframes wave-slide { from { transform: translateX(0); } to { transform: translateX(-2px); } }
@keyframes rescan-jolt { 0% { transform: translateX(0); filter: brightness(1); } 33% { transform: translateX(-2px); filter: brightness(1.28); } 66% { transform: translateX(2px); filter: brightness(.88); } 100% { transform: translateX(0); filter: brightness(1); } }
@keyframes rescan-flash { 0% { opacity: 0; } 35% { opacity: .85; } 70% { opacity: .22; } 100% { opacity: 0; } }

@media (max-width: 700px) {
  body { padding: 4px; }
  .device { width: 99vw; grid-template-rows: 5.5% 89% 5.5%; outline-offset: 2px; box-shadow: 0 0 0 3px #020302; }
  .device-screen { grid-template-columns: minmax(0, 71%) minmax(0, 29%); }
  .scan-meta-right { display: none; }
  .panel-block { padding: 3.5% 4%; }
  .preset-list button { grid-template-columns: 30% 1fr; }
  .preset-list button i { display: none; }
  .data-block div:nth-child(n+3) { display: none; }
  .data-block { grid-template-columns: 1fr; }
  .gauge-set { height: 52%; }
  .device-footer { gap: 3%; }
  .device-footer span:nth-child(4), .device-footer span:nth-child(5) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fallback-scan,
  .scan-sweep,
  .scan-grain,
  .wave-line,
  .device-mode i { animation-duration: 20s; }
  .scan-video { transition: none; }
}