:root {
  color-scheme: dark;
  --bg: #0b100d;
  --panel: #111915;
  --panel-2: #16201a;
  --line: #2c3930;
  --muted: #8e9d92;
  --text: #edf3ec;
  --acid: #d8ff72;
  --orange: #ff884d;
  --danger: #ff786d;
  font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
.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; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(rgba(216,255,114,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,255,114,.026) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, #1d2a20 0, var(--bg) 48%);
  background-size: 36px 36px, 36px 36px, auto;
}

button, input { font: inherit; }
.shell { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 40px 0 24px; }
.masthead { display: flex; align-items: center; gap: 18px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.brand-mark { width: 52px; height: 52px; flex: 0 0 auto; border: 1px solid #5a6b5e; display: grid; place-items: center; transform: rotate(45deg); }
.brand-mark span { width: 22px; height: 22px; border: 2px solid var(--acid); border-radius: 50%; position: relative; }
.brand-mark span::before, .brand-mark span::after { content: ""; position: absolute; background: var(--acid); }
.brand-mark span::before { width: 28px; height: 2px; left: -5px; top: 8px; }
.brand-mark span::after { width: 2px; height: 28px; left: 8px; top: -5px; }
.brand-mark span b { position: absolute; z-index: 2; inset: 4px; display: grid; place-items: center; border-radius: 50%; color: #101713; background: var(--acid); font: 900 .68rem/1 monospace; transform: rotate(-45deg); }
.eyebrow { margin: 0 0 3px; color: var(--acid); font: 700 .72rem/1 monospace; letter-spacing: .22em; }
h1 { margin: 0; font-size: clamp(1.5rem, 5vw, 2.35rem); line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
h1 > b { color: var(--acid); font-weight: 800; }
h1 span { color: var(--muted); font-weight: 400; }
.status { margin-left: auto; color: var(--muted); font: 700 .72rem/1 monospace; letter-spacing: .14em; }
.status i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px var(--acid); }

.calculator, .results { margin-top: 26px; padding: 28px; background: rgba(17,25,21,.94); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0,0,0,.2); }
.section-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 25px; }
.section-heading.compact { margin-bottom: 20px; }
.section-heading.compact .save-target { margin-left: auto; }
.section-number { margin: 2px 0 0; color: var(--acid); font: 700 .72rem/1 monospace; }
h2 { margin: 0; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; }
.section-heading div p { margin: 6px 0 0; color: var(--muted); font-size: .88rem; }
.field-grid { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; }
.field { display: block; }
.label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; text-transform: uppercase; }
.label-row b { font-size: .84rem; letter-spacing: .09em; }
.label-row small { color: var(--muted); font: 700 .65rem/1 monospace; letter-spacing: .15em; }
.input-wrap { display: flex; height: 62px; border: 1px solid #3c4a40; background: #0d130f; transition: border-color .16s, box-shadow .16s; }
.input-wrap:focus-within { border-color: var(--acid); box-shadow: 0 0 0 2px rgba(216,255,114,.1); }
.input-wrap.invalid { border-color: var(--danger); }
.crosshair { width: 54px; display: grid; place-items: center; border-right: 1px solid var(--line); color: var(--acid); font-size: 1.45rem; }
.target .crosshair { color: var(--orange); }
input { width: 100%; min-width: 0; padding: 0 17px; border: 0; outline: 0; background: transparent; color: var(--text); font: 700 1.1rem/1 monospace; }
input::placeholder { color: #526057; }
.field-message { display: block; height: 18px; padding-top: 5px; color: var(--danger); font-size: .75rem; }
.trajectory { display: flex; align-items: center; padding: 22px 8px 0; color: #66746a; }
.trajectory span { height: 1px; background: #3a473e; flex: 1; }
.trajectory i { margin: 0 4px; font-style: normal; }
.actions { display: flex; gap: 10px; margin-top: 18px; }
button { min-height: 50px; border: 0; cursor: pointer; font-weight: 800; letter-spacing: .08em; }
.primary { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 18px; color: #151b12; background: var(--acid); }
.primary:hover { background: #e4ff96; }
.primary:active { transform: translateY(1px); }
kbd { padding: 4px 6px; border: 1px solid rgba(0,0,0,.28); font: 700 .62rem/1 monospace; }
.secondary { padding: 0 18px; color: var(--muted); background: transparent; border: 1px solid var(--line); font-size: .76rem; }
.secondary:hover { color: var(--text); border-color: #58675c; }
.save-target { min-height: 38px; padding: 0 15px; color: #11170f; background: var(--acid); font-size: .72rem; }
.save-target:hover { background: #e4ff96; }
.save-target.saved { color: var(--muted); background: #263128; cursor: default; }

.result-grid { display: grid; grid-template-columns: .82fr 1.08fr .9fr; gap: 12px; }
.result-card { min-height: 145px; padding: 23px; background: var(--panel-2); border-left: 3px solid var(--acid); }
.result-card > p, .bearing-card > div > p { margin: 0 0 14px; color: var(--muted); font: 700 .7rem/1 monospace; letter-spacing: .14em; }
.result-card strong { color: var(--acid); font: 800 clamp(2.8rem, 8vw, 4.5rem)/.9 monospace; letter-spacing: -.08em; }
.result-card span { margin-left: 12px; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.bearing-card { display: flex; align-items: center; justify-content: space-between; border-left-color: var(--orange); }
.bearing-card strong { color: var(--orange); }
.time-card { border-left-color: #71c8ff; }
.time-card strong { color: #71c8ff; }
.time-card small { display: block; margin-top: 16px; color: var(--muted); font: 700 .65rem/1.3 monospace; letter-spacing: .04em; }
.time-card.out-of-range strong { font-size: clamp(1.2rem, 3vw, 1.8rem); letter-spacing: 0; }
.compass { width: 112px; height: 112px; position: relative; flex: 0 0 auto; border: 1px solid #46544a; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #5d6b61 0 1deg, transparent 1deg 15deg); }
.compass::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--panel-2); }
.compass span { position: absolute; z-index: 2; margin: 0; color: var(--muted); font: 700 .55rem/1 monospace; }
.north { top: 7px; left: 50%; transform: translateX(-50%); }
.south { bottom: 7px; left: 50%; transform: translateX(-50%); }
.east { right: 7px; top: 50%; transform: translateY(-50%); }
.west { left: 7px; top: 50%; transform: translateY(-50%); }
.compass i { position: absolute; z-index: 3; width: 2px; height: 40px; left: calc(50% - 1px); top: 16px; background: linear-gradient(var(--orange), transparent); transform-origin: 50% 40px; transition: transform .35s ease; }
.compass i::before { content: ""; position: absolute; top: -1px; left: -4px; border-width: 0 5px 9px; border-style: solid; border-color: transparent transparent var(--orange); }
.compass b { position: absolute; z-index: 4; width: 8px; height: 8px; left: calc(50% - 4px); top: calc(50% - 4px); border-radius: 50%; background: var(--orange); }
.saved-targets { margin-top: 16px; border: 1px solid var(--line); background: #0d130f; }
.saved-heading { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.saved-heading > div { display: flex; align-items: baseline; gap: 10px; }
.saved-heading h3 { margin: 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.saved-heading span { color: var(--muted); font: 700 .62rem/1 monospace; letter-spacing: .08em; }
.saved-heading button, .remove-target { min-height: 30px; padding: 0 8px; color: var(--muted); background: transparent; font: 700 .64rem/1 monospace; letter-spacing: .07em; }
.saved-heading button:hover, .remove-target:hover { color: var(--danger); }
.target-table-wrap { max-height: 208px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font: 700 .78rem/1.2 monospace; }
th { position: sticky; top: 0; z-index: 1; padding: 9px 12px; color: #718078; background: #111915; text-align: right; text-transform: uppercase; font-size: .62rem; letter-spacing: .08em; }
th:first-child, td:first-child { text-align: left; }
td { padding: 10px 12px; border-top: 1px solid #202b24; text-align: right; white-space: nowrap; }
tbody tr:first-child td { border-top: 0; }
td:first-child { color: var(--text); }
td:nth-child(2) { color: var(--orange); }
td:nth-child(4) { color: #71c8ff; }
.remove-target { font-size: .9rem; }
footer { display: flex; justify-content: space-between; padding: 16px 2px 0; color: #68756c; font: 700 .62rem/1.5 monospace; letter-spacing: .08em; }
.creator-mark { color: var(--acid); }

@media (max-width: 700px) {
  .shell { width: min(100% - 20px, 560px); padding-top: 20px; }
  .masthead { gap: 12px; padding-bottom: 20px; }
  .brand-mark { width: 42px; height: 42px; }
  h1 span { display: block; margin-top: 5px; }
  .status { align-self: flex-start; margin-top: 3px; }
  .calculator, .results { margin-top: 14px; padding: 20px 16px; }
  .section-heading.compact { align-items: center; }
  .section-heading.compact > div { flex: 1; }
  .save-target { padding: 0 11px; }
  .field-grid { grid-template-columns: 1fr; }
  .trajectory { height: 28px; padding: 0 20px; transform: rotate(90deg); }
  .actions { flex-direction: column; }
  .secondary { min-height: 44px; }
  .result-grid { grid-template-columns: 1fr; }
  .result-card { min-height: 125px; }
  .bearing-card { gap: 8px; }
  .compass { width: 94px; height: 94px; }
  .compass i { height: 32px; top: 14px; transform-origin: 50% 32px; }
  th, td { padding-left: 7px; padding-right: 7px; }
  th { font-size: .56rem; }
  td { font-size: .7rem; }
  .target-table-wrap { max-height: 184px; }
  kbd { display: none; }
  footer { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }