:root {
  --bg: #f5efe1;
  --surface-1: #fbf7ec;
  --surface-2: #eee5d0;
  --text: #2b2620;
  --text-muted: #6b6252;
  --accent: #2f4b7c;
  --accent-support: #b3452c;
  --success: #4c7a52;
  --danger: #b3452c;
  --base-a: #d1495b;
  --base-c: #2a9d8f;
  --base-g: #e0a72e;
  --base-t: #6a4c93;
  /* Darker variants of the same four hues, used wherever a base color is
     the text color of real running copy (the sequence overlay). The swatch
     values above read fine as a GC-meter fill, a wordmark accent, or a
     helix stroke, but several fall well under 4.5:1 against the paper
     surfaces as *text* (--base-g text is ~1.7:1 — nearly invisible). These
     keep each base's hue identity while meeting contrast for legibility. */
  --base-a-ink: #b82f41;
  --base-c-ink: #1e7167;
  --base-g-ink: #815d13;
  --base-t-ink: #6a4c93;
  /* --danger reads fine on --bg/--surface-1 (its other uses) but drops to
     ~4.4:1 on --surface-2, just under 4.5:1 — the well the invalid-character
     mark sits on. */
  --danger-ink: #ab422a;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;

  --radius: 6px;
  --shadow: 0 2px 8px rgba(43, 38, 32, 0.12);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--accent);
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.site-header {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
}

.wordmark-dot--a {
  color: var(--base-a);
}

.wordmark-dot--g {
  color: var(--base-g);
}

.tagline {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.helix-ribbon {
  width: 100%;
  max-width: 400px;
  height: 24px;
  flex-basis: 100%;
}

.helix-strand {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: draw-helix 1.2s var(--ease-out) forwards;
}

.helix-strand--a {
  stroke: var(--base-a);
}

.helix-strand--g {
  stroke: var(--base-g);
  animation-delay: 80ms;
}

@keyframes draw-helix {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .helix-strand {
    animation: none;
    stroke-dashoffset: 0;
  }
}

main {
  flex: 1;
  padding: var(--space-3) var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

.empty-state {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 60ch;
}

.workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  min-height: 60vh;
}

.side-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-content: start;
}

@media (min-width: 1024px) {
  main {
    display: grid;
    grid-template-columns: 65% 1fr;
    align-items: start;
    gap: var(--space-4);
  }

  .workspace {
    min-height: 80vh;
  }
}

.panel {
  background: var(--surface-1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3);
}

.panel h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  margin: 0 0 var(--space-2);
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.frame-viewer {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 40vh;
  overflow-y: auto;
}

/* Browsers auto-add scrollable overflow regions to the tab order (so
   keyboard users can scroll them with arrow keys) even without an explicit
   tabindex. Without this rule the resulting focus used only the browser's
   unstyled default outline, breaking from the themed ring every other
   focusable element gets. */
.frame-viewer:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.frame-row {
  display: grid;
  grid-template-columns: 3em 1fr;
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-1);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.frame-label {
  font-weight: 600;
  color: var(--accent);
}

.frame-protein {
  font-family: var(--font-ui);
  word-break: break-all;
}

.panel--orf-highlight {
  border-left: 4px solid var(--accent);
}

.orf-highlight-meta {
  margin: 0 0 var(--space-1);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.orf-highlight-protein {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  word-break: break-all;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: var(--space-2);
  margin: 0;
}

.sticky-note {
  background: var(--surface-1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3);
  transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}

.sticky-note h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 var(--space-2);
}

.sticky-note--gc {
  transform: rotate(-1deg);
}

.sticky-note--orfs {
  transform: rotate(0.75deg);
}

.sticky-note--codon {
  transform: rotate(-0.5deg);
}

.sticky-note--sites {
  transform: rotate(1.25deg);
}

.sticky-note:hover,
.sticky-note:focus-within {
  transform: rotate(0deg);
  box-shadow: 0 4px 14px rgba(43, 38, 32, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .sticky-note {
    transform: none;
    transition: none;
  }
}

.gc-meter {
  display: flex;
  width: 100%;
  height: 20px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: inset 0 1px 2px rgba(43, 38, 32, 0.15);
}

.gc-meter-segment {
  height: 100%;
  width: 0%;
  transition: width 150ms var(--ease-out);
}

.gc-meter-segment[data-base="a"] {
  background: var(--base-a);
}

.gc-meter-segment[data-base="c"] {
  background: var(--base-c);
}

.gc-meter-segment[data-base="g"] {
  background: var(--base-g);
}

.gc-meter-segment[data-base="t"] {
  background: var(--base-t);
}

.gc-meter-value {
  margin: var(--space-2) 0 0;
  font-weight: 600;
  color: var(--text);
}

.fact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 260px;
  overflow-y: auto;
}

.fact-list-empty {
  color: var(--text-muted);
  font-style: normal;
}

.orf-list-item {
  width: 100%;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  min-height: 44px;
  cursor: pointer;
  transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out);
}

.orf-list-item:hover {
  background: var(--surface-1);
  border-color: var(--accent);
}

.orf-list-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.orf-list-item[aria-selected="true"] {
  background: var(--accent);
  color: var(--surface-1);
  border-color: var(--accent);
}

.site-list-item {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  background: var(--surface-2);
  border-left: 3px solid var(--accent-support);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
}

.codon-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.codon-table thead th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 2px solid var(--surface-2);
  padding: var(--space-1);
}

.codon-table tbody {
  display: block;
  max-height: 220px;
  overflow-y: auto;
}

.codon-table thead tr,
.codon-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.codon-table td {
  padding: var(--space-1);
  border-bottom: 1px solid var(--surface-2);
}

.codon-table tbody tr:hover {
  background: var(--surface-2);
}

.btn {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  padding: var(--space-1) var(--space-2);
  min-height: 44px;
  cursor: pointer;
  transition: transform 150ms var(--ease-out), background 150ms var(--ease-out),
    color 150ms var(--ease-out);
}

.btn--ghost {
  background: transparent;
  color: var(--accent);
}

.btn--ghost:hover {
  background: var(--accent);
  color: var(--surface-1);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sequence-input-wrap {
  position: relative;
  width: 100%;
  height: min(50vh, 420px);
}

.sequence-overlay,
.sequence-input {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: var(--space-2);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  box-sizing: border-box;
}

.sequence-overlay {
  background: var(--surface-2);
  border-radius: var(--radius);
  border: 1px solid transparent;
  color: transparent;
  overflow: auto;
  pointer-events: none;
}

.sequence-input {
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  border: 1px solid var(--text-muted);
  border-radius: var(--radius);
  resize: vertical;
  overflow: auto;
}

.sequence-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.sequence-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sequence-input.is-invalid {
  border-color: var(--danger);
}

.base-a {
  color: var(--base-a-ink);
}

.base-c {
  color: var(--base-c-ink);
}

.base-g {
  color: var(--base-g-ink);
}

.base-t {
  color: var(--base-t-ink);
}

.base-invalid {
  color: var(--danger-ink);
  text-decoration: underline wavy var(--danger-ink);
}

.orf-mark {
  background: rgba(47, 75, 124, 0.16);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(47, 75, 124, 0.35);
}

.site-mark {
  background: rgba(179, 69, 44, 0.18);
  border-bottom: 2px solid var(--accent-support);
}

.sequence-error {
  min-height: 1.4em;
  margin: var(--space-2) 0 0;
  color: var(--danger);
  font-weight: 500;
}

.sequence-meta {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.guide {
  padding: var(--space-5) var(--space-4);
}

.guide-inner {
  max-width: 70ch;
  margin: 0 auto;
  background: var(--surface-1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-4);
}

.guide h2 {
  font-family: var(--font-display);
  font-size: 1.95rem;
  margin: 0 0 var(--space-2);
}

.guide h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: var(--space-4) 0 var(--space-2);
}

.guide-lede {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.05rem;
}

.guide-list {
  margin: 0;
  padding-left: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.guide-list strong {
  color: var(--accent);
  font-weight: 600;
}

.faq {
  margin: 0;
}

.faq dt {
  font-weight: 600;
  color: var(--accent);
  margin-top: var(--space-2);
}

.faq dd {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
}

.site-footer {
  padding: var(--space-3) var(--space-4);
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-footer a {
  color: var(--text-muted);
}