:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #061315;
  color: #e8fffb;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 70% 10%, #123238 0, #061315 46rem); }
main { width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 28px; }
header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 540; letter-spacing: -.055em; }
.eyebrow { color: #65fbd2; letter-spacing: .18em; font: 700 .72rem ui-monospace, monospace; }
.lede { max-width: 680px; color: #9bb9b6; line-height: 1.55; }
.status { flex: none; padding: 9px 13px; border: 1px solid #28494a; border-radius: 999px; color: #a7c7c3; font: .75rem ui-monospace, monospace; }
.status span { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #ffb657; }
.status.tracking span { background: #65fbd2; box-shadow: 0 0 12px #65fbd2; }
.status.lost span { background: #ff667c; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 290px; border: 1px solid #214042; background: #091c1f; box-shadow: 0 26px 80px #0009; }
.viewer { position: relative; min-height: 430px; overflow: hidden; background: #020707; }
video { display: none; }
canvas { display: block; width: 100%; height: 100%; min-height: 430px; object-fit: contain; }
.source-label { position: absolute; top: 14px; left: 14px; padding: 6px 8px; background: #031213cc; color: #b9d8d4; font: .65rem ui-monospace, monospace; letter-spacing: .12em; }
.reticle { position: absolute; inset: 50% auto auto 50%; width: 22px; height: 22px; border: 1px solid #65fbd244; transform: translate(-50%, -50%); pointer-events: none; }
aside { padding: 22px; border-left: 1px solid #214042; }
h2 { margin: 0 0 14px; color: #65fbd2; font: 700 .72rem ui-monospace, monospace; letter-spacing: .15em; }
dl { margin: 0; }
dl div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #193537; }
dt { color: #769693; }
dd { margin: 0; font: .8rem ui-monospace, monospace; }
.controls { display: grid; gap: 17px; margin: 28px 0 20px; }
label { color: #a9c4c1; font-size: .76rem; }
output { float: right; color: #e8fffb; font-family: ui-monospace, monospace; }
input[type="range"] { width: 100%; margin: 9px 0 0; accent-color: #65fbd2; }
.check { display: flex; gap: 8px; align-items: center; }
.file-button, button { display: block; width: 100%; padding: 10px 12px; border: 1px solid #386062; background: #102b2e; color: #dffffa; text-align: center; cursor: pointer; font: 600 .76rem inherit; }
.file-button input { display: none; }
button { margin-top: 9px; background: transparent; }
.note, footer { color: #708e8b; font-size: .72rem; line-height: 1.5; }
footer { margin-top: 14px; }
a { color: #82dfca; }
.emulator-lab { margin-top: 54px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.display-heading { margin: 0 0 18px; color: #e8fffb; font: 540 clamp(1.7rem, 4vw, 3rem) Inter, sans-serif; letter-spacing: -.04em; }
.emulator-controls { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(130px, auto)); gap: 10px; align-items: end; margin-bottom: 10px; }
.emulator-controls label:not(.check) { display: grid; gap: 7px; }
select { width: 100%; padding: 10px; border: 1px solid #386062; background: #102b2e; color: #dffffa; }
.emulator-controls button, .emulator-controls .file-button { margin: 0; height: 39px; }
.emulator-controls .check { justify-content: center; height: 39px; padding: 0 10px; border: 1px solid #28494a; }
.emulator-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #214042; background: #020707; }
.camera-tools { margin: 10px 0; border: 1px solid #214042; background: #091c1f; }
.camera-tools summary { padding: 11px 14px; cursor: pointer; color: #9fc6c1; font-size: .78rem; }
.camera-tool-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 10px; padding: 4px 14px 12px; align-items: end; }
.camera-tool-grid button { margin: 0; }
.camera-tool-grid label:not(.check) { display: grid; gap: 6px; }
.camera-tools .note { margin: 0; padding: 0 14px 12px; }
.shutter-grid { grid-template-columns: repeat(5, minmax(130px, 1fr)); }
.shutter-grid input[type="color"] { width: 100%; height: 39px; padding: 3px; border: 1px solid #386062; background: #102b2e; }
.shutter-grid input[type="number"] { width: 100%; height: 39px; padding: 8px; border: 1px solid #386062; background: #102b2e; color: #dffffa; }
.pose-report { display: block; margin: 0 14px 12px; padding: 10px; background: #061315; color: #65fbd2; font: .7rem ui-monospace, monospace; }
.tracking-flash { position: absolute; z-index: 20; inset: 0; background: #7ffff0; pointer-events: none; }
.fiducial-border { position: absolute; inset: 2.5%; border: clamp(4px, .7vw, 12px) solid #050a0a; box-shadow: 0 0 0 3px #fff; }
.marker { position: absolute; width: clamp(22px, 4vw, 64px); aspect-ratio: 1; background: #050a0a; border: clamp(3px, .45vw, 8px) solid #fff; }
.marker::after { content: ""; position: absolute; inset: 25%; background: #fff; }
.marker-tl { left: 2.5%; top: 2.5%; border-radius: 50% 0 0; }
.marker-tr { right: 2.5%; top: 2.5%; border-radius: 0 50% 0 0; }
.marker-tr::after { inset: 18% 18% 45% 45%; }
.marker-br { right: 2.5%; bottom: 2.5%; border-radius: 0 0 50%; }
.marker-br::after { inset: 45% 18% 18% 45%; }
.marker-bl { left: 2.5%; bottom: 2.5%; border-radius: 0 0 0 50%; }
.marker-bl::after { inset: 45% 45% 18% 18%; }
.emulator-stage:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border: 0; }
.emulator-stage iframe { width: 100%; height: 100%; border: 0; }
.empty-emulator { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: #587875; font: .8rem ui-monospace, monospace; }
.fish-target { position: absolute; z-index: 5; width: 34px; height: 24px; border: 1px solid #65fbd2; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; box-shadow: 0 0 18px #65fbd255; }
.fish-target::before { content: ""; position: absolute; right: 100%; top: 6px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 9px solid #65fbd2; }
.fish-target span { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); color: #65fbd2; font: .55rem ui-monospace, monospace; }
.calibration-help { position: absolute; z-index: 7; inset: 12px 12px auto; padding: 10px; background: #061315dd; color: #65fbd2; text-align: center; font: .75rem ui-monospace, monospace; pointer-events: none; }
.emulator-stage.calibrating { cursor: crosshair; outline: 2px solid #65fbd2; }
.emulator-stage.calibrating iframe { pointer-events: none; }
.emulator-note { margin-top: 9px; }

@media (max-width: 760px) {
  main { padding-top: 26px; }
  header { display: block; }
  .status { display: inline-block; margin-top: 12px; }
  .workspace { grid-template-columns: 1fr; }
  aside { border-left: 0; border-top: 1px solid #214042; }
  .emulator-controls { grid-template-columns: 1fr 1fr; }
  .camera-tool-grid { grid-template-columns: 1fr 1fr; }
  .emulator-controls > :first-child { grid-column: 1 / -1; }
}