:root {
  color-scheme: light;
  --paper: #f3f0e8;
  --ink: #141513;
  --muted: #6e7068;
  --line: #d3d0c5;
  --panel: #f9f7f1;
  --signal: #ff5a36;
  --signal-dark: #d94424;
  --lime: #b8dc50;
  --blue: #3d58d8;
  --shadow: 0 18px 50px rgba(30, 31, 28, 0.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    linear-gradient(rgba(20, 21, 19, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 21, 19, 0.025) 1px, transparent 1px),
    var(--paper);
  background-size: 32px 32px;
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

button, input { font: inherit; }
button { color: inherit; }

.topbar {
  height: 68px;
  padding: 0 clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(243, 240, 232, 0.9);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
}

.brand-mark { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.brand-mark i { width: 3px; background: var(--signal); display: block; }
.brand-mark i:nth-child(1) { height: 8px; }
.brand-mark i:nth-child(2) { height: 18px; }
.brand-mark i:nth-child(3) { height: 12px; }

.language-control {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font: 700 10px/1 monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.language-control select {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  padding: 7px 26px 7px 9px;
  font: 700 10px/1 monospace;
}

main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.hero {
  min-height: 690px;
  padding: clamp(72px, 10vw, 130px) 0 90px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  column-gap: clamp(50px, 9vw, 140px);
  align-items: center;
}

.mini-label, .metric-label, .section-note {
  color: var(--muted);
  font: 700 10px/1.2 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .15em;
}

h1 {
  margin: 0 0 14px;
  font-size: clamp(58px, 8.2vw, 112px);
  line-height: .84;
  letter-spacing: -.075em;
  font-weight: 800;
}

h1 em { color: var(--signal); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }

.hero-subtitle {
  margin: 0 0 22px;
  font-size: clamp(19px, 2.1vw, 27px);
  font-weight: 760;
  letter-spacing: -.025em;
}

.lede {
  margin: 0;
  max-width: 570px;
  color: #51534d;
  font-size: 18px;
  line-height: 1.6;
}

.project-links { margin-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.credits { color: var(--muted); font-size: 10px; line-height: 1.65; }
.credits a, .section-note a { color: var(--ink); text-underline-offset: 3px; }
.star-cta {
  flex: 0 0 auto;
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  padding: 10px 12px;
  color: var(--ink);
  background: var(--panel);
  text-decoration: none;
  font: 750 10px/1.2 monospace;
}
.star-cta small { color: var(--muted); font-size: 8px; }
.star-cta[aria-disabled="true"] { cursor: not-allowed; opacity: .7; }

.run-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 10px;
  box-shadow: var(--shadow);
}

.source-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: #e7e4dc; }
.source-tab {
  border: 0;
  padding: 13px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
}
.source-tab.active { background: var(--panel); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.06); }

.source-pane { padding: 24px 16px 12px; }
.hidden { display: none !important; }

.primary-button {
  width: 100%;
  min-height: 66px;
  border: 0;
  background: var(--signal);
  color: white;
  cursor: pointer;
  font-weight: 800;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  transition: transform .2s, background .2s;
}
.primary-button:hover { background: var(--signal-dark); transform: translateY(-1px); }
.primary-button:disabled { cursor: wait; opacity: .65; transform: none; }
.primary-button.capturing { background: var(--ink); }
.primary-button.capturing .button-icon { border-radius: 1px; box-shadow: 0 0 0 4px rgba(255,255,255,.14); }

.button-icon { width: 12px; height: 12px; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.2); }
.source-note { margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 11px; }

#audio-file { position: absolute; opacity: 0; pointer-events: none; }
.file-drop {
  min-height: 110px;
  border: 1px dashed #a8a99f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 7px;
  font-weight: 750;
  font-size: 13px;
}
.file-drop:hover { border-color: var(--signal); }
.file-drop small { color: var(--muted); font-weight: 400; }

.duration-control {
  margin: 4px 16px 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.duration-control label {
  color: var(--muted);
  font: 700 10px/1.2 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.duration-input { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.duration-input input {
  width: 64px;
  border: 1px solid #c9c6bd;
  background: white;
  color: var(--ink);
  padding: 7px 8px;
  font: 700 12px monospace;
}
.duration-input input:focus { outline: 2px solid rgba(255, 90, 54, .25); border-color: var(--signal); }
.duration-input input:disabled { background: #e7e4dc; color: var(--muted); }

.progress-wrap { padding: 12px 16px 8px; }
.progress-track { height: 5px; background: #dedbd2; overflow: hidden; }
.progress-track span { display: block; height: 100%; width: 0; background: var(--signal); transition: width .1s linear; }
.progress-copy { display: flex; justify-content: space-between; margin-top: 9px; color: var(--muted); font: 10px monospace; }
.run-footer {
  margin: 10px 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.text-button { border: 0; background: transparent; margin: 0; padding: 0; color: var(--muted); font-size: 11px; cursor: pointer; }
.text-button:hover { color: var(--ink); }
.local-decode-note {
  color: var(--signal-dark);
  text-align: right;
  font: 800 10px/1.35 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .025em;
}

.results, .bit-section, .packet-section, .method-section { border-top: 1px solid var(--line); padding: 74px 0 90px; }

.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }
.section-head > div:first-child { display: flex; align-items: baseline; gap: 20px; }
.section-number { color: var(--signal); font: 800 11px monospace; letter-spacing: .1em; }
h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1; letter-spacing: -.045em; }
.section-note { text-align: right; line-height: 1.55; }

.status-pill { padding: 8px 12px; border: 1px solid var(--line); color: var(--muted); font: 700 10px monospace; text-transform: uppercase; letter-spacing: .07em; }
.status-pill.good { border-color: #93b637; color: #526a13; background: rgba(184,220,80,.13); }
.status-pill.warn { border-color: #eaa38e; color: #9e341d; background: rgba(255,90,54,.08); }

.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--panel); }
.metric-card { min-height: 155px; padding: 22px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.metric-card:last-child { border-right: 0; }
.metric-card strong { margin: auto 0 4px; font-size: 36px; letter-spacing: -.05em; }
.metric-card small { color: var(--muted); font-size: 11px; }
.metric-card.accent { background: var(--ink); color: white; }
.metric-card.accent .metric-label, .metric-card.accent small { color: #a9aba3; }

.diagnostic-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .75fr); gap: 18px; margin-top: 18px; min-width: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); padding: 24px; min-width: 0; }
.signal-panel { overflow: hidden; }
.panel-title { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; }
.panel-title h3 { margin: 8px 0 0; font-size: 19px; }
.checks-panel .panel-title h3 { margin-top: 0; }
.legend { display: flex; gap: 16px; color: var(--muted); font: 10px monospace; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 2px; display: inline-block; }
.trace-tools { display: grid; justify-items: end; gap: 12px; }
.trace-zoom { display: flex; gap: 5px; }
.trace-zoom .chip { padding: 6px 8px; }
.mark-line { background: var(--signal); }
.space-line { background: var(--blue); }
#signal-canvas, #spectrogram-canvas { height: 230px; display: block; }
.diagram-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #e3e0d7;
  scrollbar-color: var(--signal) #dedbd2;
}
.diagram-timeline { position: relative; min-width: 100%; height: 230px; }
#signal-canvas { position: sticky; left: 0; z-index: 0; }
.spectrogram-panel { margin-top: 18px; }
.spectrogram-scroll { background: #11130f; }
.packet-markers { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.packet-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px solid rgba(255, 255, 255, .8);
  pointer-events: auto;
}
.signal-panel .packet-marker { border-left-color: rgba(20, 21, 19, .5); }
.packet-marker button, .packet-marker .marker-label {
  position: absolute;
  top: 7px;
  left: 4px;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  background: var(--lime);
  color: var(--ink);
  padding: 5px 7px;
  font: 800 9px/1 monospace;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.packet-marker button { cursor: pointer; }
.packet-marker:nth-child(even) button,
.packet-marker:nth-child(even) .marker-label { top: 34px; }
.crc-error-marker { border-left-color: #ff8d75; }
.crc-error-marker .marker-label {
  background: #c83224;
  color: white;
}
.canvas-axis { display: flex; justify-content: space-between; color: #999b94; font: 9px monospace; margin-top: 9px; }

.check-list { display: flex; flex-direction: column; }
.check-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line); }
.check-icon { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; color: white; font: 800 10px monospace; background: var(--muted); }
.check-row.good .check-icon { background: #8eae37; }
.check-row.warn .check-icon { background: var(--signal); }
.check-row.bad .check-icon { background: #c83224; }
.check-row.bad .check-value { color: #a6281d; }
.check-row strong { font-size: 12px; display: block; }
.check-row small { color: var(--muted); font-size: 10px; }
.check-value { font: 700 10px monospace; color: var(--muted); }
.empty-checks { color: var(--muted); font-size: 12px; padding: 30px 0; }

.bit-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; }
.chip, .icon-button { border: 1px solid var(--line); background: transparent; padding: 8px 12px; cursor: pointer; font: 700 10px monospace; }
.chip.active { background: var(--ink); border-color: var(--ink); color: white; }
.icon-button:hover { border-color: var(--ink); }
.sync-control { display: flex; align-items: center; gap: 10px; color: var(--muted); font: 700 10px monospace; }
.sync-control select { border: 1px solid var(--line); background: var(--panel); padding: 7px 28px 7px 10px; color: var(--ink); }
.raw-details { border: 1px solid var(--line); background: var(--panel); }
.raw-details summary {
  display: flex;
  justify-content: space-between;
  padding: 18px 20px;
  cursor: pointer;
  font: 750 12px monospace;
  list-style: none;
}
.raw-details summary::-webkit-details-marker { display: none; }
.raw-details summary::before { content: "＋"; color: var(--signal); margin-right: 12px; }
.raw-details[open] summary::before { content: "−"; }
.raw-details summary span:first-of-type { margin-right: auto; }
.raw-details summary span:last-child { color: var(--muted); }
.raw-content { padding: 0 20px 20px; border-top: 1px solid var(--line); }
.raw-content .bit-actions { padding-top: 18px; }
.bit-ruler { display: flex; justify-content: space-between; color: var(--muted); font: 10px monospace; margin: 0 0 10px; }
.bitstream {
  margin: 0;
  min-height: 180px;
  max-height: 390px;
  overflow: auto;
  padding: 24px;
  color: #d9f987;
  background: #171916;
  font: 12px/1.75 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .09em;
  white-space: pre-wrap;
  word-break: break-all;
}
.bit-line { display: block; min-height: 1.75em; }
.bit-offset { display: inline-block; width: 8ch; color: #747970; user-select: none; letter-spacing: 0; }
.bit-group { display: inline; }
.sync-bit { color: #171916; background: var(--lime); border-bottom: 2px solid #e8ff9f; }
.sync-bit.approx { background: #ffb49f; border-bottom-color: var(--signal); }
.sync-boundary { color: #878b83; user-select: none; letter-spacing: 0; }
.bit-footnote { color: var(--muted); max-width: 800px; font-size: 11px; line-height: 1.55; }

.packet-list { display: grid; gap: 14px; }
.empty-state { min-height: 160px; border: 1px dashed #b7b8b0; display: flex; align-items: center; justify-content: center; gap: 20px; color: var(--muted); }
.empty-glyph { width: 52px; height: 52px; border: 1px solid var(--line); display: grid; place-items: center; font: 800 13px monospace; }
.empty-state strong { color: var(--ink); }
.empty-state p { margin: 5px 0; font-size: 12px; }

.packet-card { border: 1px solid var(--line); background: var(--panel); }
.packet-card:target, .packet-card.flash { outline: 3px solid var(--lime); outline-offset: 3px; }
.packet-summary { padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.packet-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.packet-route { font: 800 17px monospace; letter-spacing: -.03em; overflow-wrap: anywhere; }
.packet-badges { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.crc-badge, .sync-badge { background: var(--lime); padding: 7px 9px; font: 800 9px monospace; white-space: nowrap; }
.sync-badge { background: #e4ead3; color: #526a13; }
.sync-badge.warn { background: #ffe0d7; color: #9e341d; }
.packet-body { padding: 22px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; }
.info-value { margin-top: 8px; font: 13px/1.55 monospace; overflow-wrap: anywhere; }
.control-byte-token {
  display: inline-block;
  margin: 0 .12em;
  padding: 0 .3em;
  border-radius: 2px;
  background: #e5e5e1;
  color: #62645e;
  font: 700 .9em/1.45 "SFMono-Regular", Consolas, monospace;
  white-space: nowrap;
}
.format-table { border-left: 1px solid var(--line); padding-left: 25px; }
.format-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #e5e2d9; font-size: 11px; }
.format-row span { color: var(--muted); }
.format-row b.good { color: #607d18; }
.format-row b.warn { color: var(--signal-dark); }
.packet-warnings { grid-column: 1/-1; margin: 0; padding: 14px 16px 14px 31px; background: rgba(255,90,54,.07); color: #7f3928; font-size: 11px; line-height: 1.6; }
.packet-debug { grid-column: 1/-1; display: grid; gap: 8px; }
.packet-debug details { border: 1px solid var(--line); background: #efede5; }
.packet-debug summary { padding: 11px 13px; cursor: pointer; font: 750 10px monospace; }
.packet-debug pre {
  margin: 0;
  padding: 14px;
  max-height: 260px;
  overflow: auto;
  border-top: 1px solid var(--line);
  background: #171916;
  color: #d9f987;
  white-space: pre-wrap;
  word-break: break-all;
  font: 11px/1.7 monospace;
}
.packet-time { color: var(--muted); font: 10px monospace; margin-top: 7px; }
.aprs-symbol {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  overflow: hidden;
}
.aprs-symbol-layer {
  position: absolute;
  inset: 0;
  width: 48px;
  height: 48px;
  background-size: 768px 288px;
  background-repeat: no-repeat;
}
.aprs-symbol-table-0 { background-image: url("./assets/aprs-symbols/aprs-symbols-48-0.png"); }
.aprs-symbol-table-1 { background-image: url("./assets/aprs-symbols/aprs-symbols-48-1.png"); }
.aprs-symbol-overlay { background-image: url("./assets/aprs-symbols/aprs-symbols-48-2.png"); }

.method-section { display: grid; grid-template-columns: 40px 1.2fr .8fr; gap: 40px; }
.method-section p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.limits { border-left: 1px solid var(--line); padding-left: 30px; }
.limits span { color: var(--signal); font: 800 10px monospace; }
.limits p { margin: 5px 0 20px; font-size: 11px; }

footer { border-top: 1px solid var(--line); padding: 28px clamp(20px, 4vw, 64px); display: flex; justify-content: space-between; color: var(--muted); font: 700 9px monospace; letter-spacing: .1em; }

.goto-top {
  position: fixed;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: white;
  padding: 10px 13px;
  box-shadow: 0 10px 30px rgba(20, 21, 19, .18);
  cursor: pointer;
  font: 750 10px/1 monospace;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.goto-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.goto-top:hover { background: var(--signal); border-color: var(--signal); }

@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; row-gap: 54px; min-height: 0; }
  .run-panel { max-width: 560px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-card:nth-child(2) { border-right: 0; }
  .metric-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .metric-card:nth-child(3) { grid-column: 1/-1; border-right: 0; }
  .diagnostic-grid, .packet-body { grid-template-columns: 1fr; }
  .format-table { border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; }
  .method-section { grid-template-columns: 30px 1fr; }
  .limits { grid-column: 2; }
}

@media (max-width: 560px) {
  main { width: min(100% - 28px, 1180px); }
  .language-control > span { display: none; }
  h1 { font-size: 58px; }
  .project-links { align-items: stretch; flex-direction: column; }
  .star-cta { align-self: flex-start; }
  .run-footer { align-items: flex-start; flex-direction: column; gap: 9px; }
  .local-decode-note { text-align: left; }
  .section-head { align-items: flex-start; flex-wrap: wrap; gap: 20px; }
  .section-head > div:first-child { gap: 10px; }
  .section-note { width: 100%; text-align: left; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-card { min-height: 130px; padding: 16px; }
  .metric-card strong { font-size: 27px; }
  .bit-section .section-head { display: block; }
  .bit-actions { margin-top: 20px; }
  .sync-control { margin-top: 18px; }
  .packet-summary { align-items: flex-start; gap: 15px; }
  .packet-badges { align-items: flex-end; flex-direction: column; }
  .packet-route { font-size: 14px; }
  .panel-title { gap: 15px; }
  .trace-tools { justify-items: start; }
  footer { display: block; line-height: 2; }
}

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