:root {
  color-scheme: dark;
  --bg: #091018;
  --surface: #111b27;
  --surface-high: #172433;
  --surface-soft: #0d1721;
  --line: #294054;
  --line-soft: #203445;
  --text: #f3f7fa;
  --muted: #9aabb9;
  --brand: #74d7c3;
  --brand-strong: #32bda2;
  --accent: #f0b95d;
  --danger: #ff8c86;
  --success: #82e6a2;
  --skill-a: #51b8ff;
  --skill-b: #74dc9a;
  --skill-c: #f3ba5c;
  --skill-d: #c895ff;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, rgba(50, 189, 162, 0.12), transparent 28rem),
    radial-gradient(circle at 90% 15%, rgba(240, 185, 93, 0.08), transparent 24rem),
    var(--bg);
  color: var(--text);
  font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select { font: inherit; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 0 max(24px, calc((100vw - 1120px) / 2));
  border-bottom: 1px solid rgba(41, 64, 84, 0.72);
  background: rgba(9, 16, 24, 0.82);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(116, 215, 195, 0.5);
  border-radius: 10px;
  background: rgba(116, 215, 195, 0.12);
  color: var(--brand);
}

.version-badge {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
}

.site-nav { display: flex; justify-content: center; gap: 4px; margin-left: auto; }
.site-nav a { padding: 8px 9px; color: var(--muted); font-size: 0.72rem; font-weight: 800; text-decoration: none; }
.site-nav a:hover, .site-nav a.active { color: var(--text); }

.page-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 64px 0 96px;
}

.hero { max-width: 830px; margin-bottom: 30px; }
.eyebrow, .section-number, .success-label {
  margin: 0 0 8px;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 16px; font-size: clamp(2.25rem, 6vw, 4.75rem); line-height: 1.02; letter-spacing: -0.045em; }
h2 { margin-bottom: 0; font-size: 1.35rem; letter-spacing: -0.02em; }
.hero-copy { max-width: 760px; color: var(--muted); font-size: 1.08rem; }
.muted { margin: 4px 0 0; color: var(--muted); }

.data-panel, .panel {
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(23, 36, 51, 0.96), rgba(13, 23, 33, 0.96));
  box-shadow: var(--shadow);
}

.data-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 18px 22px;
}

.data-panel.ready { border-color: rgba(130, 230, 162, 0.45); }
.data-panel.error { border-color: rgba(255, 140, 134, 0.5); }
.data-panel-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.data-panel-hidden.error { position: static; width: auto; height: auto; overflow: visible; margin: 0 0 22px; padding: 14px 16px; border: 1px solid rgba(255, 140, 134, 0.5); border-radius: 12px; clip: auto; clip-path: none; color: var(--danger); white-space: normal; }

.file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid rgba(116, 215, 195, 0.45);
  border-radius: 10px;
  background: rgba(116, 215, 195, 0.1);
  color: var(--brand);
  font-weight: 800;
  cursor: pointer;
}

.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset:disabled { opacity: 0.52; }

.panel { margin-top: 18px; padding: 26px; }

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.section-heading > p { max-width: 440px; margin-bottom: 1px; color: var(--muted); text-align: right; }

.field { display: grid; gap: 7px; }
.field > span { color: #c4d0d9; font-size: 0.86rem; font-weight: 750; }

input, select {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  background: var(--surface-soft);
  color: var(--text);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

input::placeholder { color: #637787; }
input:focus, select:focus { border-color: var(--brand-strong); box-shadow: 0 0 0 3px rgba(50, 189, 162, 0.14); }
input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255, 140, 134, 0.1); }
.field-error { min-height: 1.15em; color: var(--danger); font-size: 0.78rem; }

.autocomplete { position: relative; min-width: 0; }
.autocomplete-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: auto;
  left: 0;
  width: max(100%, 560px);
  max-width: min(620px, calc(100vw - 40px));
  max-height: 340px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #0b151f;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
  scrollbar-color: var(--brand-strong) #101e2a;
  scrollbar-width: auto;
}

.autocomplete-option {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.autocomplete-option:hover, .autocomplete-option.active { background: rgba(116, 215, 195, 0.13); }
.autocomplete-copy { display: grid; min-width: 0; gap: 3px; }
.autocomplete-option strong { font-size: 0.88rem; }
.autocomplete-option small { color: var(--muted); font-size: 0.72rem; line-height: 1.4; white-space: normal; }
.autocomplete-empty { margin: 0; padding: 12px 10px; color: var(--muted); font-size: 0.82rem; }

.pal-icon-frame { position: relative; display: grid; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(116, 215, 195, 0.22); border-radius: 10px; background: linear-gradient(145deg, #14293a, #0b1721); place-items: center; }
.pal-icon-frame img, .pal-icon-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.pal-icon-frame img { z-index: 2; object-fit: contain; }
.pal-icon-fallback { display: grid; color: rgba(210, 229, 238, 0.7); font-size: 0.86rem; font-weight: 900; place-items: center; }
.autocomplete-icon { width: 42px; height: 42px; }
.skill-card .field:nth-of-type(2) .autocomplete-menu { right: 0; left: auto; }

.target-field { max-width: 540px; }

.skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.skill-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(9, 16, 24, 0.45);
}

.skill-letter {
  position: absolute;
  top: -9px;
  left: 15px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(240, 185, 93, 0.55);
  border-radius: 8px;
  background: #25303a;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
}

.rules-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.check-field {
  display: flex;
  grid-column: 1 / -1;
  align-items: start;
  gap: 11px;
  padding: 15px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: rgba(9, 16, 24, 0.42);
  cursor: pointer;
}

.check-field input { width: 19px; min-height: 19px; margin-top: 2px; accent-color: var(--brand-strong); }
.check-field strong, .check-field small { display: block; }
.check-field small { margin-top: 3px; color: var(--muted); }

.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 17px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.button-primary { background: var(--brand-strong); color: #04130f; }
.button-secondary { border-color: var(--line); background: var(--surface-high); }
.button-quiet { background: transparent; color: var(--muted); }
.button:hover { filter: brightness(1.08); }
.button:disabled { filter: none; opacity: 0.62; cursor: wait; }

.review-panel { border-color: rgba(130, 230, 162, 0.42); scroll-margin-top: 88px; }
.review-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.review-summary { color: var(--muted); }
.review-tree { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.review-line { padding: 13px 14px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-soft); }
.review-line strong { color: var(--accent); }
.review-line span { color: var(--muted); }

.arrangement-section { margin: 22px 0; }
.arrangement-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.arrangement-card { padding: 16px; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--surface-soft); }
.arrangement-card.best { border-color: rgba(116, 215, 195, 0.48); }
.arrangement-card h4 { margin: 0; color: var(--accent); font-size: 1rem; }
.arrangement-card p { margin: 6px 0 0; color: var(--muted); font-size: 0.78rem; }
.arrangement-card strong { color: var(--brand); }

.connected-section { margin: 24px 0; }
.skill-purity-note { margin: 0 0 13px; padding: 11px 13px; border-left: 3px solid var(--accent); color: #bdd0d9; background: rgba(116, 215, 195, 0.07); font-size: 0.82rem; }
.skill-purity-note strong { color: var(--accent); }
.connected-results { display: grid; gap: 13px; }
.network-card { border: 1px solid var(--line-soft); border-radius: 13px; background: var(--surface-soft); overflow: hidden; }
.network-card:first-child { border-color: rgba(130, 230, 162, 0.48); box-shadow: 0 0 0 1px rgba(130, 230, 162, 0.08); }
.network-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 18px; }
.network-rank { margin: 0 0 4px; color: var(--brand); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.network-heading h4 { margin: 0; font-size: 1.08rem; }
.network-heading p { margin: 4px 0 0; color: var(--muted); font-size: 0.82rem; }
.network-metrics { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; }
.metric-pill { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: #c8d4dc; font-size: 0.72rem; font-weight: 750; white-space: nowrap; }
.metric-pill.reuse { border-color: rgba(116, 215, 195, 0.38); color: var(--brand); }
.network-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--line-soft); }
.network-branch { padding: 14px 18px; background: rgba(9, 16, 24, 0.66); }
.network-branch strong { display: block; color: var(--accent); }
.network-branch span { display: block; margin-top: 3px; color: var(--muted); font-size: 0.78rem; }
.reuse-summary { display: grid; gap: 6px; padding: 14px 18px; }
.reuse-line { margin: 0; color: #bddbd4; font-size: 0.8rem; }
.reuse-line strong { color: var(--brand); }
.network-checklist { padding: 0 18px 18px; border-top: 0; }
.network-checklist summary { padding-top: 14px; }
.build-order { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: build-step; }
.build-order li { position: relative; min-height: 48px; padding: 11px 12px 11px 48px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(9, 16, 24, 0.58); color: #ccd7de; font-size: 0.84rem; counter-increment: build-step; }
.build-order li::before { position: absolute; top: 10px; left: 11px; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 7px; background: rgba(116, 215, 195, 0.12); color: var(--brand); content: counter(build-step); font-size: 0.74rem; font-weight: 900; }
.build-order strong { color: var(--text); }
.operation-note { display: block; margin-top: 4px; color: var(--muted); font-size: 0.74rem; }
.operation-note.reuse { color: var(--brand); }
.operation-note.external { color: #e5bd76; }
.no-connected-results { margin: 0; padding: 18px; border: 1px solid var(--line-soft); border-radius: 11px; color: var(--muted); background: var(--surface-soft); }
.backward-details { margin: 24px 0 0; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }

.family-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.family-stat { padding: 15px; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--surface-soft); }
.family-stat strong { display: block; color: var(--brand); font-size: 1.55rem; line-height: 1.1; }
.family-stat span { display: block; margin-top: 5px; color: var(--muted); font-size: 0.78rem; }
.parent-candidates { margin: 4px 0 24px; }
.subsection-heading { margin-bottom: 12px; }
.subsection-heading h3 { margin: 0 0 4px; font-size: 1.05rem; }
.subsection-heading p { margin: 0; color: var(--muted); font-size: 0.86rem; }
.parent-candidate-list {
  display: grid;
  max-height: 430px;
  overflow-y: scroll;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: rgba(9, 16, 24, 0.38);
  scrollbar-color: var(--brand-strong) #101e2a;
  scrollbar-width: auto;
}

.parent-candidate-row { display: grid; grid-template-columns: minmax(180px, 1fr) 44px minmax(180px, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.parent-candidate-row:last-child { border-bottom: 0; }
.parent-profile { min-width: 0; }
.parent-profile strong { display: block; overflow: hidden; color: #dce6ec; text-overflow: ellipsis; white-space: nowrap; }
.parent-profile small { color: var(--muted); }
.breeding-plus { color: var(--accent); font-size: 1.15rem; font-weight: 900; text-align: center; }
.ordered-badge { display: inline-block; margin-left: 7px; color: var(--accent); font-size: 0.68rem; font-weight: 850; }
.no-family-results { margin: 0; padding: 18px; color: var(--muted); }
.coverage-details { margin: 0 0 22px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.coverage-details .review-tree { margin-bottom: 4px; }

.transfer-map-card {
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  background: var(--surface-soft);
}

.map-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.map-card-heading h3 { margin: 0; color: var(--accent); font-size: 1.05rem; }
.map-card-heading p { margin: 3px 0 0; color: var(--muted); font-size: 0.86rem; }
.map-total { flex: 0 0 auto; color: var(--brand); font-size: 1.45rem; font-weight: 900; line-height: 1; }
.map-total small { display: block; margin-top: 5px; color: var(--muted); font-size: 0.68rem; font-weight: 700; text-align: right; }

.depth-list { display: grid; gap: 8px; margin-top: 17px; }
.depth-row { display: grid; grid-template-columns: 98px 52px 1fr; gap: 9px; align-items: baseline; }
.depth-label { color: #c4d0d9; font-size: 0.78rem; font-weight: 800; }
.depth-count { color: var(--brand); font-size: 0.82rem; font-weight: 850; text-align: right; }
.depth-examples { overflow: hidden; color: var(--muted); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }

.route-inspector {
  margin: 8px 0 22px;
  padding: 22px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.route-inspector h3 { margin: 0 0 4px; font-size: 1.05rem; }
.route-inspector > div > p { margin: 0; color: var(--muted); }
.route-inspector-controls { display: grid; grid-template-columns: 180px minmax(220px, 1fr) auto; gap: 12px; align-items: end; margin-top: 17px; }
.route-inspector-controls .button { min-height: 48px; }
.route-inspector > .field-error { margin: 10px 0 0; }
.inspect-route { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.inspect-route li { padding: 12px 14px; border-left: 3px solid var(--brand-strong); border-radius: 8px; background: rgba(9, 16, 24, 0.55); color: #cbd7df; }
.inspect-route strong { color: var(--brand); }
.ordered-note { color: var(--accent); font-size: 0.76rem; font-weight: 800; }

details { border-top: 1px solid var(--line-soft); padding-top: 16px; }
summary { color: var(--brand); font-weight: 750; cursor: pointer; }
pre { max-height: 440px; overflow: auto; padding: 16px; border-radius: 10px; background: #081019; color: #b9d7e8; font: 0.82rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }

.hidden { display: none !important; }

@media (max-width: 820px) {
  .page-shell { padding-top: 42px; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 10px; text-align: left; }
  .skill-grid, .rules-grid, .review-tree { grid-template-columns: 1fr; }
  .family-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arrangement-summary { grid-template-columns: 1fr; }
  .network-heading { flex-direction: column; }
  .network-metrics { justify-content: start; }
  .network-branches { grid-template-columns: 1fr; }
  .route-inspector-controls { grid-template-columns: 1fr 1fr; }
  .route-inspector-controls .button { grid-column: 1 / -1; }
  .check-field { grid-column: auto; }
}

@media (max-width: 560px) {
  .site-header { padding-inline: 16px; }
  .version-badge { display: none; }
  .page-shell { width: min(100% - 20px, 1120px); }
  .data-panel { align-items: stretch; flex-direction: column; }
  .panel { padding: 20px 16px; }
  .skill-card { grid-template-columns: 1fr; padding-top: 24px; }
  .review-heading { align-items: start; flex-direction: column; }
  .route-inspector-controls { grid-template-columns: 1fr; }
  .route-inspector-controls .button { grid-column: auto; }
  .depth-row { grid-template-columns: 88px 42px 1fr; }
  .family-stats { grid-template-columns: 1fr 1fr; }
  .parent-candidate-row { grid-template-columns: 1fr; gap: 5px; }
  .breeding-plus { text-align: left; }
}

/* Step 7: personal roster and scored lineage presentation */
.site-header { position: sticky; z-index: 40; top: 0; }
.hero h1 span { background: linear-gradient(90deg, var(--brand), #b7e7ff 62%, var(--skill-d)); background-clip: text; color: transparent; }
.hero-copy { font-size: 1.12rem; line-height: 1.65; }
.rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.skill-card { overflow: visible; border-top-width: 2px; }
.skill-card[data-skill-key="A"] { border-top-color: var(--skill-a); }
.skill-card[data-skill-key="B"] { border-top-color: var(--skill-b); }
.skill-card[data-skill-key="C"] { border-top-color: var(--skill-c); }
.skill-card[data-skill-key="D"] { border-top-color: var(--skill-d); }
.skill-card[data-skill-key="A"] .skill-letter { --skill-color: var(--skill-a); }
.skill-card[data-skill-key="B"] .skill-letter { --skill-color: var(--skill-b); }
.skill-card[data-skill-key="C"] .skill-letter { --skill-color: var(--skill-c); }
.skill-card[data-skill-key="D"] .skill-letter { --skill-color: var(--skill-d); }
.skill-letter { border-color: color-mix(in srgb, var(--skill-color) 58%, transparent); background: color-mix(in srgb, var(--skill-color) 15%, #121d27); color: var(--skill-color); }

.collection-overview { display: flex; align-items: stretch; gap: 10px; margin-bottom: 16px; }
.collection-count-card { display: grid; min-width: 130px; padding: 13px 15px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(8, 16, 24, 0.48); }
.collection-count-card strong { color: var(--brand); font-size: 1.4rem; line-height: 1; }
.collection-count-card span { margin-top: 5px; color: var(--muted); font-size: 0.75rem; }
.collection-count-card.excluded strong { color: var(--danger); }
.local-storage-badge { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 0 13px; border: 1px solid rgba(130, 230, 162, 0.22); border-radius: 12px; color: #b9d7c1; background: rgba(130, 230, 162, 0.05); font-size: 0.78rem; font-weight: 750; }
.storage-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(130, 230, 162, 0.1); }
.collection-manager { display: grid; grid-template-columns: minmax(270px, 0.76fr) minmax(0, 1.24fr); gap: 14px; }
.collection-entry, .collection-list-card { padding: 17px; border: 1px solid var(--line-soft); border-radius: 13px; background: rgba(8, 16, 24, 0.48); }
.collection-entry-actions, .collection-backup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.collection-entry-actions .button { min-height: 40px; padding: 8px 11px; font-size: 0.79rem; }
.button-owned { border-color: rgba(130, 230, 162, 0.28); background: rgba(130, 230, 162, 0.1); color: var(--success); }
.button-exclude { border-color: rgba(255, 140, 134, 0.3); background: rgba(255, 140, 134, 0.08); color: var(--danger); }
.collection-message { min-height: 1.3em; margin: 11px 0 0; color: var(--muted); font-size: 0.76rem; }
.collection-message.success { color: var(--success); }
.collection-message.warning { color: var(--accent); }
.collection-message.error { color: var(--danger); }
.collection-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.collection-list-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.collection-list-heading h3 { margin: 0; font-size: 0.92rem; }
.collection-list-heading span { color: var(--muted); font-size: 0.7rem; }
.collection-list-card.excluded h3 { color: var(--danger); }
.pal-chip-list { display: flex; align-content: start; flex-wrap: wrap; gap: 6px; max-height: 165px; overflow-y: auto; scrollbar-color: var(--brand-strong) transparent; }
.pal-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 5px 5px 5px 9px; border: 1px solid rgba(130, 230, 162, 0.22); border-radius: 999px; color: #cbe8d3; background: rgba(130, 230, 162, 0.07); font-size: 0.7rem; font-weight: 750; }
.pal-chip.excluded { border-color: rgba(255, 140, 134, 0.24); color: #ffc0bc; background: rgba(255, 140, 134, 0.06); }
.pal-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-chip button { display: grid; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: currentColor; cursor: pointer; place-items: center; }
.chip-list-empty { margin: 0; color: #687d8d; font-size: 0.74rem; }
.collection-footer { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.collection-footer p { max-width: 490px; margin: 0; color: var(--muted); font-size: 0.76rem; text-align: right; }
.collection-backup-actions { margin: 0; }
.collection-backup-actions .button { min-height: 40px; padding: 8px 12px; font-size: 0.78rem; }
.import-button { position: relative; cursor: pointer; }
.import-button input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }

.result-legend { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 21px 0 4px; padding: 15px 17px; border: 1px solid var(--line-soft); border-radius: 13px; background: rgba(8, 16, 24, 0.44); }
.result-legend h3 { margin: 0 0 8px; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; }
.skill-legend, .status-legend, .operation-badges, .branch-skills, .network-arrangement-group { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-key { --skill-color: var(--brand); display: inline-flex; align-items: center; gap: 7px; color: #c5d3dc; font-size: 0.75rem; }
.skill-key strong { display: grid; width: 23px; height: 23px; border-radius: 6px; color: #061019; background: var(--skill-color); font-size: 0.68rem; place-items: center; }
.line-a { --skill-color: var(--skill-a); }
.line-b { --skill-color: var(--skill-b); }
.line-c { --skill-color: var(--skill-c); }
.line-d { --skill-color: var(--skill-d); }
.status-legend { justify-content: end; }
.status-key, .operation-note { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.66rem; font-weight: 850; letter-spacing: 0.04em; text-transform: uppercase; }
.status-key.owned, .operation-note.owned, .operation-note.starting { border-color: rgba(130, 230, 162, 0.27); color: var(--success); background: rgba(130, 230, 162, 0.06); }
.status-key.reuse, .operation-note.reuse { border-color: rgba(116, 215, 195, 0.3); color: var(--brand); background: rgba(116, 215, 195, 0.07); }
.status-key.external, .operation-note.external { border-color: rgba(240, 185, 93, 0.32); color: var(--accent); background: rgba(240, 185, 93, 0.07); }
.status-key.merge { border-color: rgba(200, 149, 255, 0.3); color: var(--skill-d); background: rgba(200, 149, 255, 0.06); }

.arrangement-card { min-width: 0; }
.arrangement-title { display: flex; align-items: center; gap: 7px; }
.arrangement-group { display: flex; min-width: 0; flex-wrap: wrap; gap: 5px; }
.arrangement-divider { color: #536777; font-weight: 300; }
.line-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--skill-color) 40%, transparent); border-radius: 6px; color: var(--skill-color); background: color-mix(in srgb, var(--skill-color) 9%, transparent); font-size: 0.67rem; font-weight: 900; white-space: nowrap; }

.network-card { border-radius: 15px; background: linear-gradient(160deg, rgba(16, 28, 39, 0.98), rgba(9, 17, 25, 0.98)); }
.network-card:first-child { box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(130, 230, 162, 0.07); }
.network-heading { padding: 20px; }
.network-arrangement { display: flex; align-items: center; gap: 7px; }
.metric-pill.score { border-color: rgba(130, 230, 162, 0.34); color: var(--success); background: rgba(130, 230, 162, 0.07); }
.metric-pill.owned { border-color: rgba(130, 230, 162, 0.23); color: var(--success); }
.metric-pill.external { border-color: rgba(240, 185, 93, 0.28); color: var(--accent); }
.score-breakdown { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 20px; border-top: 1px solid var(--line-soft); color: var(--muted); background: rgba(6, 13, 20, 0.36); font-size: 0.7rem; }
.score-breakdown strong { color: #dce8ee; font-size: 0.72rem; text-transform: uppercase; }
.score-breakdown span { font-variant-numeric: tabular-nums; text-align: right; }

.lineage-tree { padding: 18px 20px 22px; border-top: 1px solid var(--line-soft); background: radial-gradient(circle at 50% 100%, rgba(116, 215, 195, 0.075), transparent 46%); }
.lineage-tree-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.lineage-tree-heading h5 { margin: 0; color: var(--text); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.lineage-tree-heading span { color: var(--muted); font-size: 0.7rem; }
.lineage-tree-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
.lineage-tree-branch { position: relative; display: grid; justify-items: center; }
.lineage-grandparents { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); width: 100%; gap: 8px; align-items: center; }
.lineage-node { display: flex; align-items: center; width: 100%; min-width: 0; gap: 10px; padding: 9px; border: 1px solid color-mix(in srgb, var(--skill-color, var(--brand)) 24%, var(--line-soft)); border-radius: 12px; background: rgba(13, 24, 34, 0.92); }
.lineage-node.result { max-width: 280px; border-color: color-mix(in srgb, var(--skill-color, var(--brand)) 42%, var(--line-soft)); background: color-mix(in srgb, var(--skill-color, var(--brand)) 6%, rgba(13, 24, 34, 0.96)); }
.lineage-pal-icon { width: 58px; height: 58px; }
.lineage-node-copy { display: grid; min-width: 0; gap: 3px; }
.lineage-node-copy > small { color: var(--skill-color, var(--brand)); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.lineage-node-copy > strong { overflow: hidden; color: var(--text); font-size: 0.84rem; text-overflow: ellipsis; white-space: nowrap; }
.lineage-node-skills { display: flex; min-width: 0; flex-wrap: wrap; gap: 3px; }
.lineage-node-skills .line-badge { min-height: 19px; padding: 2px 5px; font-size: 0.58rem; }
.lineage-connector { display: grid; width: 28px; height: 32px; color: var(--skill-color, var(--brand)); font-size: 1.2rem; place-items: center; }
.lineage-final-connector { display: grid; grid-template-columns: 1fr auto 1fr; max-width: 620px; margin: 1px auto 5px; gap: 12px; align-items: center; color: #4c6977; }
.lineage-final-connector span { font-size: 1.35rem; text-align: center; }
.lineage-final-connector strong { color: var(--brand); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.lineage-target { max-width: 330px !important; margin: 0 auto; border-color: rgba(130, 230, 162, 0.48) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22); }
.lineage-target .lineage-pal-icon { width: 70px; height: 70px; }
.network-branch { position: relative; min-width: 0; padding: 16px 18px 17px 21px; }
.network-branch::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--skill-color); content: ""; }
.network-branch .branch-label { margin: 0 0 5px; color: var(--skill-color); font-size: 0.65rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; }
.network-branch strong { color: var(--text); font-size: 1rem; }
.branch-skills { margin-top: 8px; }
.grandparent-line { margin-top: 9px !important; }
.reuse-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 13px 18px; border-bottom: 1px solid var(--line-soft); background: rgba(116, 215, 195, 0.035); }
.reuse-line { padding-left: 11px; border-left: 2px solid rgba(116, 215, 195, 0.36); }
.helper-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-bottom: 1px solid var(--line-soft); background: var(--line-soft); }
.helper-group { display: grid; gap: 2px; padding: 12px 18px; background: rgba(8, 16, 24, 0.72); }
.helper-group strong { color: var(--success); font-size: 0.67rem; letter-spacing: 0.05em; text-transform: uppercase; }
.helper-group.external strong { color: var(--accent); }
.helper-group span { overflow: hidden; color: var(--muted); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.helper-preparation { border-bottom: 1px solid var(--line-soft); background: linear-gradient(100deg, rgba(240, 185, 93, 0.055), rgba(8, 16, 24, 0.74) 38%); }
.helper-preparation > summary { padding: 15px 18px; color: var(--accent); font-size: 0.82rem; font-weight: 850; cursor: pointer; }
.helper-preparation-body { display: grid; gap: 14px; padding: 0 18px 18px; }
.helper-preparation-intro { margin: 0; color: var(--muted); font-size: 0.76rem; line-height: 1.55; }
.helper-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.helper-roster-card { display: grid; gap: 3px; min-width: 0; padding: 11px 12px; border: 1px solid rgba(240, 185, 93, 0.2); border-radius: 10px; background: rgba(240, 185, 93, 0.045); }
.helper-roster-card > span { color: var(--accent); font-size: 0.6rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; }
.helper-roster-card > strong { overflow: hidden; color: var(--text); font-size: 0.86rem; text-overflow: ellipsis; white-space: nowrap; }
.helper-roster-card > small { color: var(--muted); font-size: 0.68rem; line-height: 1.45; }
.helper-roster-card.owned { border-color: rgba(130, 230, 162, 0.22); background: rgba(130, 230, 162, 0.045); }
.helper-roster-card.owned > span { color: var(--success); }
.helper-roster-card.unreachable { border-color: rgba(255, 140, 134, 0.24); background: rgba(255, 140, 134, 0.04); }
.helper-roster-card.unreachable > span { color: var(--danger); }
.helper-preparation-body h5 { margin: 2px 0 -4px; color: #dfe9ee; font-size: 0.73rem; letter-spacing: 0.06em; text-transform: uppercase; }
.helper-build-order { margin: 0; }
.operation-card.operation-helper { --skill-color: var(--accent); background: linear-gradient(90deg, rgba(240, 185, 93, 0.06), rgba(5, 12, 19, 0.56) 30%); }
.operation-card.operation-helper .operation-header > strong { color: var(--accent); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; }
.network-checklist { padding: 0 18px 18px; }
.network-checklist summary { padding: 15px 0 0; font-size: 0.82rem; }

.build-order { gap: 9px; }
.build-order li, .operation-card { min-height: 0; padding: 13px 14px; border-color: var(--line-soft); border-left: 3px solid var(--skill-color, var(--line)); border-radius: 11px; background: rgba(5, 12, 19, 0.56); counter-increment: none; }
.build-order li::before { display: none; content: none; }
.operation-card.operation-parent { --skill-color: var(--skill-d); border-left-color: var(--skill-color); background: linear-gradient(90deg, rgba(200, 149, 255, 0.06), rgba(5, 12, 19, 0.56) 30%); }
.operation-card.operation-final { --skill-color: var(--brand); border: 1px solid rgba(116, 215, 195, 0.35); border-left-width: 3px; background: linear-gradient(100deg, rgba(81, 184, 255, 0.07), rgba(116, 220, 154, 0.06), rgba(243, 186, 92, 0.06), rgba(200, 149, 255, 0.07)); }
.operation-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.operation-kind { color: var(--muted); font-size: 0.63rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.pal-equation { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.08fr); gap: 9px; align-items: stretch; }
.pal-token { display: flex; align-items: center; min-width: 0; gap: 8px; padding: 7px 8px; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(15, 26, 36, 0.82); }
.token-pal-icon { width: 42px; height: 42px; border-radius: 8px; }
.pal-token-copy { display: grid; min-width: 0; gap: 2px; }
.pal-token.result { border-color: color-mix(in srgb, var(--skill-color) 34%, var(--line-soft)); background: color-mix(in srgb, var(--skill-color) 7%, rgba(15, 26, 36, 0.82)); }
.pal-token strong { overflow: hidden; color: var(--text); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.pal-token small { overflow: hidden; color: var(--muted); font-size: 0.65rem; text-overflow: ellipsis; white-space: nowrap; }
.pal-token.result small { color: var(--skill-color); }
.equation-symbol { display: grid; color: #647989; font-size: 0.9rem; font-weight: 900; place-items: center; }
.operation-note { display: inline-flex; width: fit-content; margin-top: 9px; }

@media (max-width: 820px) {
  .collection-manager { grid-template-columns: 1fr; }
  .result-legend, .collection-footer { align-items: stretch; flex-direction: column; }
  .status-legend { justify-content: start; }
  .collection-footer p { text-align: left; }
  .score-breakdown { align-items: start; flex-direction: column; gap: 4px; }
  .score-breakdown span { text-align: left; }
}

@media (max-width: 620px) {
  .rules-grid, .collection-lists, .helper-summary, .reuse-summary { grid-template-columns: 1fr; }
  .collection-overview { display: grid; grid-template-columns: 1fr 1fr; }
  .local-storage-badge { grid-column: 1 / -1; min-height: 44px; margin-left: 0; }
  .pal-equation { grid-template-columns: 1fr; }
  .equation-symbol { min-height: 12px; transform: rotate(90deg); }
  .operation-header { align-items: start; flex-direction: column; }
  .autocomplete-menu { right: 0; left: auto; width: min(520px, calc(100vw - 32px)); }
  .lineage-tree { padding: 16px 13px 19px; }
  .lineage-tree-heading { align-items: start; flex-direction: column; gap: 4px; }
  .lineage-tree-branches { grid-template-columns: 1fr; gap: 20px; }
  .lineage-grandparents { gap: 5px; }
  .lineage-pal-icon { width: 48px; height: 48px; }
  .lineage-final-connector { grid-template-columns: 1fr auto 1fr; }
}

/* Breeder's Field Journal identity */
:root {
  --bg: #17140f;
  --surface: #292319;
  --surface-high: #332b1f;
  --surface-soft: #201c16;
  --line: #645641;
  --line-soft: #433a2d;
  --text: #f6ecd5;
  --muted: #b8aa8f;
  --brand: #a5c7a6;
  --brand-strong: #6f9f7b;
  --accent: #e3ae62;
  --danger: #e49279;
  --success: #96c99a;
  --skill-a: #73afd0;
  --skill-b: #82bd8a;
  --skill-c: #e3ad5d;
  --skill-d: #b99ad4;
  --shadow: 0 24px 68px rgba(5, 4, 2, 0.32);
}

body {
  background:
    linear-gradient(rgba(225, 195, 139, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(225, 195, 139, 0.014) 1px, transparent 1px),
    radial-gradient(circle at 10% 0%, rgba(143, 180, 140, 0.14), transparent 30rem),
    radial-gradient(circle at 92% 8%, rgba(227, 174, 98, 0.11), transparent 27rem),
    #17140f;
  background-size: 28px 28px, 28px 28px, auto, auto, auto;
  color: var(--text);
  font-family: "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background: repeating-linear-gradient(112deg, transparent 0 17px, rgba(255, 244, 213, 0.012) 18px, transparent 19px 34px);
  content: "";
  pointer-events: none;
}

.site-header {
  min-height: 76px;
  border-bottom-color: rgba(202, 175, 126, 0.24);
  background: rgba(24, 20, 14, 0.91);
  box-shadow: 0 8px 28px rgba(5, 4, 2, 0.2);
}

.brand { gap: 12px; }
.brand-mark, .footer-mark {
  display: grid;
  width: 38px;
  height: 44px;
  border: 1px solid rgba(227, 174, 98, 0.62);
  border-radius: 52% 48% 46% 54% / 62% 60% 40% 38%;
  background: linear-gradient(145deg, rgba(227, 174, 98, 0.18), rgba(111, 159, 123, 0.13));
  color: var(--accent);
  font: 800 1.05rem/1 Georgia, serif;
  transform: rotate(-4deg);
  place-items: center;
}

.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font: 700 1.08rem/1.1 Georgia, "Times New Roman", serif; letter-spacing: 0.025em; }
.brand-copy small { color: var(--muted); font-size: 0.58rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.version-badge { border-color: rgba(227, 174, 98, 0.38); border-radius: 3px; color: #dec79f; background: rgba(227, 174, 98, 0.06); font-size: 0.64rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(1deg); }
.site-nav a { color: #bcae92; }
.site-nav a:hover, .site-nav a.active { color: #f0dfbd; }
#palbox { scroll-margin-top: 96px; }

.page-shell { padding-top: 56px; }
#top { scroll-margin-top: 88px; }
.hero { display: grid; max-width: none; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); gap: 60px; align-items: center; margin-bottom: 36px; }
.hero-copy-block { max-width: 760px; }
.eyebrow, .section-number, .success-label { color: var(--accent); font-size: 0.69rem; letter-spacing: 0.17em; }
h1, h2, .review-heading h2, .subsection-heading h3, .network-heading h4 { font-family: Georgia, "Times New Roman", serif; }
h1 { max-width: 790px; margin-bottom: 20px; font-size: clamp(2.75rem, 6.5vw, 5.25rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.05em; }
.hero h1 span { background: none; color: var(--accent); font-style: italic; font-weight: 500; }
.hero-copy { max-width: 680px; color: #cabda3; font-size: 1.08rem; line-height: 1.72; }
.hero-promises { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.hero-promises span { padding: 6px 10px; border: 1px solid rgba(165, 199, 166, 0.24); border-radius: 3px; color: #bfd2bd; background: rgba(165, 199, 166, 0.045); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.045em; text-transform: uppercase; }

.hero-field-note {
  position: relative;
  min-height: 350px;
  padding: 24px 24px 20px;
  border: 1px solid #a89470;
  border-radius: 4px 16px 5px 12px;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(75, 68, 50, 0.085) 28px),
    linear-gradient(145deg, #e0d2b3, #cdbb96);
  box-shadow: 10px 14px 0 rgba(7, 6, 3, 0.18), 0 28px 65px rgba(4, 3, 2, 0.3);
  color: #352f24;
  transform: rotate(1.2deg);
}

.hero-field-note::before { position: absolute; top: -9px; left: 50%; width: 76px; height: 20px; background: rgba(203, 182, 137, 0.75); box-shadow: 0 1px 2px rgba(45, 34, 19, 0.18); content: ""; transform: translateX(-50%) rotate(-2deg); }
.field-note-topline { display: flex; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px dashed rgba(68, 59, 42, 0.36); color: #665b46; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.hero-carriers, .hero-parents { display: flex; justify-content: space-around; gap: 10px; margin: 24px auto 0; }
.hero-carriers span { --skill-color: #6b8d79; display: grid; width: 43px; height: 43px; border: 2px solid var(--skill-color); border-radius: 50%; color: #352f24; background: rgba(255, 250, 231, 0.42); font: 900 0.8rem/1 Georgia, serif; place-items: center; }
.hero-carriers .line-a { --skill-color: var(--skill-a); }
.hero-carriers .line-b { --skill-color: var(--skill-b); }
.hero-carriers .line-c { --skill-color: var(--skill-c); }
.hero-carriers .line-d { --skill-color: var(--skill-d); }
.hero-branch { position: relative; display: flex; justify-content: space-around; width: 78%; height: 28px; margin: 0 auto; }
.hero-branch i { width: 30%; border-right: 1px solid rgba(67, 58, 43, 0.52); border-bottom: 1px solid rgba(67, 58, 43, 0.52); transform: skewX(-34deg); }
.hero-branch i:last-child { border-right: 0; border-left: 1px solid rgba(67, 58, 43, 0.52); transform: skewX(34deg); }
.hero-parents { width: 55%; margin-top: 0; }
.hero-parents span { display: grid; width: 52px; height: 36px; border: 1px solid #6e654f; border-radius: 5px; background: rgba(255, 250, 231, 0.42); font: 800 0.7rem/1 Georgia, serif; place-items: center; }
.hero-branch.final { width: 22%; height: 24px; }
.hero-branch.final i { width: 50%; border-right: 1px solid rgba(67, 58, 43, 0.52); border-bottom: 0; transform: none; }
.hero-egg { display: grid; width: 68px; height: 82px; margin: 0 auto; border: 2px solid #567861; border-radius: 52% 48% 46% 54% / 62% 60% 40% 38%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.46), transparent 20%), rgba(111, 159, 123, 0.18); color: #3f624c; transform: rotate(-3deg); place-items: center; }
.hero-egg span { font: 900 0.62rem/1 Georgia, serif; letter-spacing: 0.03em; }
.hero-field-note > p { margin: 16px 0 0; color: #665a43; font: italic 0.84rem/1.45 Georgia, serif; text-align: center; }
.hero-field-note > p strong { color: #3b5945; font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; }

.journal-route { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 22px; padding: 0; list-style: none; }
.journal-route::before { position: absolute; top: 21px; right: 9%; left: 9%; border-top: 1px dashed rgba(227, 174, 98, 0.42); content: ""; }
.journal-route li { position: relative; display: grid; justify-items: center; gap: 7px; color: var(--muted); font-size: 0.68rem; letter-spacing: 0.035em; text-align: center; }
.journal-route span { z-index: 1; display: grid; width: 42px; height: 42px; border: 1px solid rgba(227, 174, 98, 0.46); border-radius: 50%; color: var(--accent); background: #1d1912; font: 800 0.7rem/1 Georgia, serif; place-items: center; }
.journal-route strong { font-weight: 750; }

.data-panel-hidden { box-shadow: none; }
.panel, .data-panel {
  border-color: rgba(160, 137, 99, 0.35);
  border-radius: 5px 17px 6px 15px;
  background:
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(214, 185, 132, 0.022) 36px),
    linear-gradient(145deg, rgba(49, 42, 30, 0.98), rgba(30, 26, 20, 0.99));
  box-shadow: 0 26px 68px rgba(5, 4, 2, 0.27), inset 0 0 0 1px rgba(245, 224, 180, 0.025);
}
.panel { position: relative; margin-top: 20px; padding: 29px; }
.panel::before { position: absolute; inset: 8px; border: 1px dashed rgba(188, 160, 113, 0.105); border-radius: 3px 11px 4px 10px; content: ""; pointer-events: none; }
.section-heading { position: relative; border-bottom-style: dashed; border-bottom-color: rgba(164, 139, 98, 0.31); }
.section-heading h2 { color: #f5e6c7; font-size: 1.55rem; font-weight: 600; }
.section-heading > p { color: #b9aa8e; font-family: Georgia, "Times New Roman", serif; font-size: 0.88rem; font-style: italic; }
.section-number { width: fit-content; margin-bottom: 7px; padding: 3px 7px; border: 1px solid rgba(227, 174, 98, 0.3); border-radius: 2px; background: rgba(227, 174, 98, 0.055); }

@media (min-width: 821px) {
  .target-panel::after, .traits-panel::after, .roster-panel::after, .settings-panel::after { position: absolute; top: 22px; right: 27px; padding: 5px 8px; border: 1px solid rgba(165, 199, 166, 0.24); border-radius: 2px; color: rgba(185, 210, 185, 0.58); font-size: 0.55rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; transform: rotate(1.5deg); }
  .target-panel::after { content: "Breeding goal"; }
  .traits-panel::after { content: "Trait ledger"; }
  .roster-panel::after { content: "Local record"; }
  .settings-panel::after { content: "Route limits"; }
  .target-panel .section-heading > p, .traits-panel .section-heading > p, .roster-panel .section-heading > p, .settings-panel .section-heading > p { padding-right: 105px; }
}

.field > span { color: #d3c3a3; font-size: 0.76rem; letter-spacing: 0.025em; }
input, select { border-color: rgba(150, 128, 91, 0.46); border-radius: 5px 10px 5px 10px; background: rgba(20, 17, 13, 0.72); color: #f5ead2; }
input::placeholder { color: #7f745f; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(227, 174, 98, 0.12); }
.autocomplete-menu { border-color: #746247; border-radius: 4px 11px 5px 10px; background: #221d16; box-shadow: 8px 18px 45px rgba(5, 3, 1, 0.48); scrollbar-color: var(--accent) #30281d; }
.autocomplete-option { border-bottom: 1px dashed rgba(168, 141, 98, 0.15); }
.autocomplete-option:last-child { border-bottom: 0; }
.autocomplete-option:hover, .autocomplete-option.active { background: rgba(227, 174, 98, 0.1); }
.autocomplete-option small { color: #a99b82; }
.pal-icon-frame { border-color: rgba(189, 156, 105, 0.34); border-radius: 6px 11px 6px 10px; background: linear-gradient(145deg, #392f22, #211c16); }

.skill-card { border-color: rgba(159, 135, 96, 0.32); border-radius: 4px 13px 5px 12px; background: rgba(22, 19, 14, 0.52); }
.skill-card::after { position: absolute; top: -7px; left: 50%; width: 54px; height: 15px; background: rgba(183, 159, 113, 0.2); content: ""; transform: translateX(-50%) rotate(-1deg); }
.skill-letter { border-radius: 50%; font-family: Georgia, serif; }
.collection-entry, .collection-list-card, .collection-count-card { border-color: rgba(159, 135, 96, 0.3); border-radius: 4px 11px 5px 10px; background: rgba(19, 16, 12, 0.52); }
.local-storage-badge { border-radius: 3px; color: #bdd2bd; }

.button { border-radius: 4px 10px 4px 9px; letter-spacing: 0.02em; }
.button-primary { border-color: #efc37e; background: linear-gradient(145deg, #e8b567, #c98e3d); color: #281e10; box-shadow: 0 9px 24px rgba(152, 96, 32, 0.23); }
.button-primary:hover { background: linear-gradient(145deg, #f1c47d, #d89d4c); }
.button-secondary { border-color: rgba(165, 199, 166, 0.38); background: rgba(165, 199, 166, 0.08); color: #c9ddc8; }
.button-quiet { color: #aa9b83; }
.form-actions { padding: 10px 2px 0; }

.review-panel { border-color: rgba(165, 199, 166, 0.44); }
.success-label { color: var(--success); }
.result-legend { border-color: rgba(159, 135, 96, 0.3); border-radius: 4px 11px 5px 10px; background: rgba(18, 15, 11, 0.46); }
.status-key, .operation-note { border-radius: 2px; letter-spacing: 0.075em; transform: rotate(-0.35deg); }
.status-key:nth-child(even) { transform: rotate(0.5deg); }
.arrangement-card, .network-card { border-radius: 4px 13px 5px 12px; }
.arrangement-card { border-color: rgba(159, 135, 96, 0.3); background: rgba(18, 15, 11, 0.43); }
.network-card { border-color: rgba(159, 135, 96, 0.34); background: linear-gradient(155deg, rgba(42, 36, 26, 0.99), rgba(24, 21, 16, 0.99)); }
.network-card:first-child { border-color: rgba(150, 196, 155, 0.48); box-shadow: 8px 16px 0 rgba(6, 5, 3, 0.12), 0 24px 52px rgba(5, 4, 2, 0.2); }
.network-rank { color: var(--accent); }
.score-breakdown { border-color: rgba(159, 135, 96, 0.25); background: rgba(16, 13, 10, 0.39); }

.lineage-tree {
  border-color: rgba(159, 135, 96, 0.25);
  background:
    linear-gradient(rgba(199, 172, 124, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199, 172, 124, 0.028) 1px, transparent 1px),
    radial-gradient(circle at 50% 100%, rgba(130, 176, 138, 0.1), transparent 48%),
    rgba(18, 15, 11, 0.28);
  background-size: 22px 22px, 22px 22px, auto, auto;
}
.lineage-tree-heading h5 { color: var(--accent); font-family: Georgia, serif; letter-spacing: 0.08em; }
.lineage-node { border-radius: 4px 10px 5px 9px; background: rgba(39, 33, 24, 0.94); box-shadow: 3px 4px 0 rgba(5, 4, 2, 0.13); }
.lineage-node.result { background: color-mix(in srgb, var(--skill-color, var(--brand)) 6%, rgba(39, 33, 24, 0.97)); }
.lineage-target { border-color: rgba(150, 201, 154, 0.48) !important; background: linear-gradient(145deg, rgba(55, 68, 48, 0.92), rgba(37, 33, 24, 0.98)) !important; }
.lineage-final-connector strong { color: var(--accent); }
.network-branch, .helper-group { background: rgba(18, 15, 11, 0.54); }
.reuse-summary { background: rgba(142, 190, 147, 0.035); }
.helper-preparation { background: linear-gradient(100deg, rgba(227, 174, 98, 0.065), rgba(20, 17, 13, 0.7) 40%); }
.build-order li, .operation-card { border-radius: 4px 9px 5px 8px; background: rgba(17, 14, 10, 0.56); }
.pal-token { border-radius: 4px 8px 4px 8px; background: rgba(42, 35, 25, 0.84); }
.pal-token.result { background: color-mix(in srgb, var(--skill-color) 7%, rgba(42, 35, 25, 0.88)); }

.site-footer { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 42px; padding: 26px 4px 0; border-top: 1px dashed rgba(172, 145, 101, 0.28); }
.footer-mark { width: 31px; height: 36px; font-size: 0.82rem; }
.site-footer strong { font-family: Georgia, serif; }
.site-footer p { margin: 2px 0 0; color: var(--muted); font: italic 0.75rem/1.4 Georgia, serif; }
.site-footer > small { color: #7f745f; font-size: 0.63rem; text-align: right; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 30px; }
  .hero-field-note { width: min(100%, 430px); min-height: 330px; }
}

@media (max-width: 620px) {
  .page-shell { padding-top: 38px; }
  .hero { gap: 24px; margin-bottom: 28px; }
  h1 { font-size: clamp(2.55rem, 14vw, 4rem); }
  .hero-copy { font-size: 1rem; }
  .hero-field-note { min-height: 322px; padding: 21px 17px 17px; transform: none; }
  .journal-route { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 8px; }
  .journal-route::before { display: none; }
  .journal-route li { grid-template-columns: 34px 1fr; justify-items: start; align-items: center; text-align: left; }
  .journal-route span { width: 34px; height: 34px; }
  .panel { padding: 22px 17px; }
  .section-heading h2 { font-size: 1.35rem; }
  .site-footer { grid-template-columns: auto 1fr; }
  .site-footer > small { grid-column: 1 / -1; text-align: left; }
}

/* Open sketchbook pages */
.panel {
  --text: #342d21;
  --muted: #776b56;
  --surface: #eadcba;
  --surface-high: #e3d1a9;
  --surface-soft: rgba(255, 251, 232, 0.5);
  --line: #a6916c;
  --line-soft: #c7b58e;
  --brand: #4f7259;
  --brand-strong: #5f8669;
  --accent: #a66d2e;
  --success: #4f7856;
  --danger: #a64e3f;
  color: var(--text);
  border-color: #a99470;
  background:
    linear-gradient(90deg, transparent 0 43px, rgba(159, 84, 67, 0.09) 44px, transparent 45px),
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(91, 83, 64, 0.075) 36px),
    linear-gradient(145deg, #eee2c5, #d8c49b);
  box-shadow: 9px 12px 0 rgba(6, 5, 3, 0.15), 0 28px 65px rgba(5, 4, 2, 0.25);
}

.panel::before { border-color: rgba(79, 69, 51, 0.15); }
.panel::after { color: rgba(61, 73, 55, 0.58) !important; border-color: rgba(61, 73, 55, 0.25) !important; background: rgba(255, 249, 225, 0.18); }
.panel .section-heading { border-bottom-color: rgba(85, 72, 51, 0.3); }
.panel .section-heading h2, .panel .review-heading h2, .panel .subsection-heading h3, .panel .network-heading h4 { color: #332b20; }
.panel .section-heading > p, .panel .subsection-heading p, .panel .muted { color: #736752; }
.panel .section-number { color: #835725; border-color: rgba(131, 87, 37, 0.35); background: rgba(166, 109, 46, 0.08); }
.panel .field > span { color: #514634; }
.panel input, .panel select {
  border-color: #aa9672;
  background: rgba(255, 251, 232, 0.56);
  color: #30291f;
  box-shadow: inset 0 1px 3px rgba(68, 52, 28, 0.08);
}
.panel input::placeholder { color: #8e8068; }
.panel input:focus, .panel select:focus { border-color: #8f652f; background: rgba(255, 253, 238, 0.78); box-shadow: 0 0 0 3px rgba(166, 109, 46, 0.12); }
.panel .field-error { color: #9c4337; }

.panel .autocomplete-menu { border-color: #9f8965; background: #eee1c2; box-shadow: 8px 15px 32px rgba(54, 40, 22, 0.3); }
.panel .autocomplete-option { color: #332c21; border-bottom-color: rgba(93, 76, 52, 0.14); }
.panel .autocomplete-option:hover, .panel .autocomplete-option.active { background: rgba(103, 133, 95, 0.13); }
.panel .autocomplete-option small, .panel .autocomplete-empty { color: #756a57; }
.panel .pal-icon-frame { border-color: rgba(102, 82, 51, 0.32); background: linear-gradient(145deg, #e1d0aa, #c8b282); }

.panel .skill-card, .panel .collection-entry, .panel .collection-list-card, .panel .collection-count-card {
  border-color: rgba(108, 88, 56, 0.31);
  background: rgba(255, 250, 228, 0.38);
  box-shadow: 2px 3px 0 rgba(63, 47, 24, 0.07);
}
.panel .skill-card[data-skill-key="A"] { background: rgba(235, 215, 181, 0.62); }
.panel .skill-card[data-skill-key="B"] { background: rgba(213, 227, 195, 0.62); }
.panel .skill-card[data-skill-key="C"] { background: rgba(201, 220, 224, 0.6); }
.panel .skill-card[data-skill-key="D"] { background: rgba(228, 207, 220, 0.6); }
.panel .collection-list-card:nth-child(2), .panel .collection-count-card:nth-child(2) { background: rgba(232, 207, 202, 0.54); }
.panel .skill-card::after { background: rgba(139, 112, 67, 0.22); }
.panel .skill-letter { background: color-mix(in srgb, var(--skill-color) 15%, #eee2c5); }
.panel .collection-count-card strong, .panel .collection-message.success { color: #4e7655; }
.panel .collection-count-card span, .panel .collection-list-heading span, .panel .collection-message, .panel .chip-list-empty, .panel .collection-footer p { color: #766a56; }
.panel .local-storage-badge { color: #476c4e; background: rgba(91, 132, 95, 0.08); }
.panel .pal-chip { color: #3f6949; background: rgba(91, 132, 95, 0.09); }
.panel .pal-chip.excluded { color: #9a493c; background: rgba(166, 78, 63, 0.07); }
.panel .button-secondary { border-color: rgba(64, 99, 72, 0.42); color: #3f6648; background: rgba(83, 126, 89, 0.08); }
.panel .button-quiet { color: #746752; }

.review-panel .review-summary { color: #736752; }
.review-panel .success-label { color: #4e7655; }
.review-panel .result-legend, .review-panel .arrangement-card, .review-panel .network-card, .review-panel .transfer-map-card, .review-panel .family-stat {
  border-color: rgba(104, 84, 53, 0.34);
  background: rgba(255, 250, 229, 0.38);
  color: #342d21;
  box-shadow: 2px 3px 0 rgba(63, 47, 24, 0.065);
}
.review-panel .result-legend h3, .review-panel .network-rank, .review-panel .lineage-tree-heading h5 { color: #815525; }
.review-panel .skill-key { color: #554a38; }
.review-panel .status-key { background: rgba(255, 252, 236, 0.4); }
.review-panel .arrangement-card strong, .review-panel .family-stat strong { color: #456a4d; }
.review-panel .arrangement-card p, .review-panel .network-heading p, .review-panel .network-arrangement, .review-panel .score-breakdown, .review-panel .reuse-line { color: #736752; }
.review-panel .metric-pill { border-color: rgba(89, 73, 49, 0.35); color: #5b503f; background: rgba(255, 252, 235, 0.28); }
.review-panel .metric-pill.score, .review-panel .metric-pill.owned { color: #426b4b; }
.review-panel .metric-pill.external { color: #8f5f27; }
.review-panel .score-breakdown { border-color: rgba(99, 80, 50, 0.24); background: rgba(117, 94, 57, 0.06); }
.review-panel .score-breakdown strong { color: #4a3f2f; }
.review-panel .skill-purity-note { color: #5f5946; background: rgba(89, 128, 92, 0.08); }

.review-panel .lineage-tree {
  border-color: rgba(103, 84, 54, 0.25);
  background:
    linear-gradient(rgba(85, 77, 59, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 77, 59, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 100%, rgba(88, 130, 94, 0.09), transparent 48%),
    rgba(255, 251, 232, 0.32);
  background-size: 22px 22px, 22px 22px, auto, auto;
}
.review-panel .lineage-tree-heading span, .review-panel .lineage-node-copy > small { color: #71644f; }
.review-panel .lineage-node { border-color: color-mix(in srgb, var(--skill-color, #5b7f61) 36%, #b29d77); background: rgba(250, 242, 215, 0.83); box-shadow: 3px 4px 0 rgba(63, 47, 24, 0.09); }
.review-panel .lineage-node.result { background: color-mix(in srgb, var(--skill-color, #5b7f61) 8%, rgba(250, 242, 215, 0.92)); }
.review-panel .lineage-node-copy > strong { color: #342d21; }
.review-panel .lineage-target { background: linear-gradient(145deg, rgba(199, 217, 189, 0.82), rgba(234, 224, 195, 0.96)) !important; }
.review-panel .lineage-final-connector { color: #86765c; }
.review-panel .lineage-final-connector strong { color: #7c5224; }

.review-panel .network-branches, .review-panel .helper-summary { background: rgba(111, 91, 59, 0.2); }
.review-panel .network-branch, .review-panel .helper-group { background: rgba(255, 250, 229, 0.5); }
.review-panel .network-branch strong, .review-panel .helper-roster-card > strong { color: #342d21; }
.review-panel .network-branch span, .review-panel .grandparent-line, .review-panel .helper-group span, .review-panel .helper-roster-card > small { color: #746853; }
.review-panel .reuse-summary { background: rgba(83, 126, 89, 0.065); }
.review-panel .reuse-line { border-left-color: rgba(70, 111, 78, 0.42); }
.review-panel .helper-preparation { background: linear-gradient(100deg, rgba(188, 133, 63, 0.08), rgba(255, 249, 225, 0.34) 42%); }
.review-panel .helper-preparation-intro { color: #6e624e; }
.review-panel .helper-roster-card { border-color: rgba(129, 89, 41, 0.28); background: rgba(255, 247, 220, 0.42); }
.review-panel .helper-roster-card.owned { background: rgba(98, 143, 102, 0.08); }

.review-panel .build-order li, .review-panel .operation-card { border-color: rgba(109, 87, 53, 0.31); background: rgba(255, 250, 228, 0.5); }
.review-panel .operation-card.operation-helper { background: linear-gradient(90deg, rgba(191, 137, 68, 0.1), rgba(255, 250, 228, 0.48) 32%); }
.review-panel .operation-card.operation-parent { background: linear-gradient(90deg, rgba(142, 105, 174, 0.08), rgba(255, 250, 228, 0.48) 32%); }
.review-panel .operation-card.operation-final { background: linear-gradient(100deg, rgba(93, 150, 181, 0.08), rgba(99, 151, 105, 0.08), rgba(195, 142, 70, 0.08), rgba(152, 112, 183, 0.08)); }
.review-panel .pal-token { border-color: rgba(108, 87, 55, 0.3); background: rgba(250, 242, 216, 0.68); }
.review-panel .pal-token.result { background: color-mix(in srgb, var(--skill-color) 7%, rgba(250, 242, 216, 0.78)); }
.review-panel .pal-token strong { color: #342d21; }
.review-panel .pal-token small, .review-panel .operation-kind { color: #766a56; }
.review-panel .equation-symbol { color: #807158; }
.review-panel .operation-note { background: rgba(255, 252, 237, 0.42); }
.review-panel .parent-candidate-list { border-color: rgba(106, 86, 54, 0.32); background: rgba(255, 250, 228, 0.38); }
.review-panel .parent-candidate-row { border-bottom-color: rgba(106, 86, 54, 0.2); }
.review-panel .parent-profile strong { color: #3e3528; }
.review-panel .parent-profile small, .review-panel .depth-examples { color: #746853; }
.review-panel .route-inspector > div > p, .review-panel .inspect-route li { color: #675b48; }
.review-panel .inspect-route li { background: rgba(255, 250, 228, 0.44); }

/* Interactive hatch checklist */
.hatch-progress { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; gap: 12px; align-items: center; margin: 14px 0 2px; padding: 11px 12px; border: 1px dashed rgba(94, 77, 51, 0.34); border-radius: 3px 9px 4px 8px; background: rgba(255, 252, 237, 0.34); }
.hatch-progress > span:first-child { color: #665b49; font: italic 0.75rem/1.35 Georgia, serif; }
.hatch-progress-track { display: block; height: 7px; overflow: hidden; border: 1px solid rgba(88, 73, 49, 0.3); border-radius: 99px; background: rgba(92, 76, 51, 0.1); }
.hatch-progress-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6c9673, #9abe91); transition: width 220ms ease; }
.hatch-complete-stamp { display: none; padding: 4px 7px; border: 2px solid rgba(58, 105, 67, 0.68); border-radius: 2px; color: #416b49; font-size: 0.58rem; letter-spacing: 0.11em; text-transform: uppercase; transform: rotate(-2deg); }
.network-checklist.hatch-complete .hatch-complete-stamp { display: inline-block; }
.network-checklist.hatch-complete > summary { color: #416b49; }
.operation-header-actions { display: flex; align-items: center; gap: 12px; }
.hatch-check { display: inline-flex; align-items: center; gap: 5px; color: #6c604d; font-size: 0.66rem; font-weight: 800; cursor: pointer; user-select: none; }
.hatch-check input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; pointer-events: none; }
.hatch-check > span { position: relative; display: grid; width: 21px; height: 21px; border: 1.5px solid #8b7859; border-radius: 2px 5px 2px 5px; background: rgba(255, 252, 237, 0.52); transform: rotate(-1deg); place-items: center; }
.hatch-check > span::after { color: #fff8df; content: "✓"; font: 900 0.78rem/1 Georgia, serif; opacity: 0; transform: scale(0.5) rotate(-8deg); transition: opacity 120ms ease, transform 120ms ease; }
.hatch-check input:focus-visible + span { outline: 3px solid rgba(166, 109, 46, 0.23); outline-offset: 2px; }
.hatch-check input:checked + span { border-color: #4f7856; background: #5d8a64; }
.hatch-check input:checked + span::after { opacity: 1; transform: scale(1) rotate(-8deg); }
.operation-card.completed { border-color: rgba(72, 117, 81, 0.44) !important; background: rgba(108, 151, 105, 0.12) !important; }
.operation-card.completed::after { position: absolute; right: 14px; bottom: 10px; color: rgba(59, 105, 67, 0.38); content: "DONE"; font: 900 0.58rem/1 Georgia, serif; letter-spacing: 0.12em; transform: rotate(-4deg); }
.operation-card.completed .pal-equation, .operation-card.completed .operation-note { opacity: 0.66; }

@media (max-width: 720px) {
  .hatch-progress { grid-template-columns: 1fr; gap: 8px; }
  .hatch-complete-stamp { width: fit-content; }
  .operation-header-actions { width: 100%; justify-content: space-between; }
  .hatch-check { margin-left: auto; }
}

/* Corkboard workspace and pinned notes */
body {
  background-color: #865937;
  background-image:
    radial-gradient(circle at 12px 18px, rgba(57, 35, 20, 0.22) 0 1px, transparent 1.6px),
    radial-gradient(circle at 38px 42px, rgba(241, 205, 147, 0.11) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 70px 20px, rgba(49, 30, 17, 0.16) 0 0.9px, transparent 1.5px),
    repeating-linear-gradient(19deg, rgba(255, 224, 169, 0.018) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #96683f, #75492d 54%, #8b5b37);
  background-size: 82px 64px, 91px 73px, 76px 58px, auto, auto;
}

body::before {
  background:
    repeating-radial-gradient(ellipse at 30% 20%, rgba(42, 25, 14, 0.045) 0 0.7px, transparent 0.9px 4px),
    linear-gradient(rgba(73, 43, 23, 0.06), rgba(73, 43, 23, 0.06));
  mix-blend-mode: multiply;
}

.site-header { border-bottom-color: rgba(235, 202, 147, 0.22); background: rgba(35, 27, 18, 0.94); }
.hero-copy-block {
  position: relative;
  padding: 34px 36px 32px;
  border: 1px solid rgba(217, 184, 128, 0.28);
  border-radius: 4px 16px 5px 13px;
  background:
    linear-gradient(rgba(245, 224, 181, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 224, 181, 0.018) 1px, transparent 1px),
    linear-gradient(145deg, rgba(45, 39, 27, 0.98), rgba(24, 22, 16, 0.98));
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: 8px 12px 0 rgba(59, 34, 18, 0.24), 0 25px 55px rgba(43, 25, 13, 0.28);
}
.hero-copy-block::before, .hero-copy-block::after { position: absolute; top: 13px; width: 11px; height: 11px; border: 2px solid rgba(90, 45, 26, 0.35); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0b289, #a34f32 65%, #6c2f21); box-shadow: 0 2px 4px rgba(16, 8, 4, 0.46); content: ""; }
.hero-copy-block::before { left: 15px; }
.hero-copy-block::after { right: 15px; }
.hero-field-note { box-shadow: 8px 12px 0 rgba(59, 34, 18, 0.22), 0 26px 56px rgba(43, 25, 13, 0.28); }

.journal-route { padding: 17px 18px 14px; border: 1px solid rgba(233, 199, 139, 0.22); border-radius: 3px 11px 4px 10px; background: rgba(54, 37, 24, 0.64); box-shadow: 4px 6px 0 rgba(54, 31, 17, 0.16); }
.journal-route span { background: #4c3221; }
.journal-route strong { color: #ead7b4; }

.panel { border: 0; border-radius: 2px 6px 3px 5px; box-shadow: 8px 11px 0 rgba(65, 38, 20, 0.18), 0 24px 52px rgba(49, 28, 14, 0.24); transform-origin: 50% 0; }
.target-panel { background: linear-gradient(90deg, transparent 0 43px, rgba(159, 84, 67, 0.09) 44px, transparent 45px), repeating-linear-gradient(0deg, transparent 0 35px, rgba(91, 83, 64, 0.07) 36px), linear-gradient(145deg, #f1dda0, #dfc67d); transform: rotate(-0.12deg); }
.traits-panel { background: linear-gradient(90deg, transparent 0 43px, rgba(159, 84, 67, 0.08) 44px, transparent 45px), repeating-linear-gradient(0deg, transparent 0 35px, rgba(91, 83, 64, 0.065) 36px), linear-gradient(145deg, #efe4bd, #ddcea2); transform: rotate(0.1deg); }
.roster-panel { background: linear-gradient(90deg, transparent 0 43px, rgba(159, 84, 67, 0.07) 44px, transparent 45px), repeating-linear-gradient(0deg, transparent 0 35px, rgba(91, 83, 64, 0.06) 36px), linear-gradient(145deg, #dce2bd, #c7d09f); transform: rotate(-0.08deg); }
.settings-panel { background: linear-gradient(90deg, transparent 0 43px, rgba(159, 84, 67, 0.08) 44px, transparent 45px), repeating-linear-gradient(0deg, transparent 0 35px, rgba(91, 83, 64, 0.065) 36px), linear-gradient(145deg, #edcfac, #dcb88e); transform: rotate(0.1deg); }
.review-panel { background: linear-gradient(90deg, transparent 0 43px, rgba(159, 84, 67, 0.08) 44px, transparent 45px), repeating-linear-gradient(0deg, transparent 0 35px, rgba(91, 83, 64, 0.068) 36px), linear-gradient(145deg, #ede4c9, #d8c9a5); transform: rotate(-0.05deg); }
.panel .section-heading::before { position: absolute; top: -21px; left: 50%; width: 13px; height: 13px; border: 2px solid rgba(91, 45, 26, 0.34); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #efad82, #a74f32 65%, #6c2f21); box-shadow: 0 2px 4px rgba(55, 29, 14, 0.35); content: ""; transform: translateX(-50%); }
.traits-panel .section-heading::before { background: radial-gradient(circle at 35% 30%, #9eb5d0, #52779c 65%, #34506e); }
.roster-panel .section-heading::before { background: radial-gradient(circle at 35% 30%, #b6c88e, #66834f 65%, #405c36); }
.settings-panel .section-heading::before { background: radial-gradient(circle at 35% 30%, #edbd78, #b57432 65%, #7c481d); }
.review-panel .review-heading::before { position: absolute; top: -19px; left: 50%; width: 13px; height: 13px; border: 2px solid rgba(69, 82, 54, 0.3); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #b7cb9c, #678651 65%, #3f5a35); box-shadow: 0 2px 4px rgba(55, 29, 14, 0.3); content: ""; transform: translateX(-50%); }
.review-panel .review-heading { position: relative; }

.form-actions { width: fit-content; margin: 20px auto 0; padding: 12px; border: 1px solid rgba(235, 202, 147, 0.22); border-radius: 3px 10px 4px 9px; background: rgba(55, 38, 24, 0.68); box-shadow: 4px 6px 0 rgba(54, 31, 17, 0.17); }
.site-footer { border-top-color: rgba(65, 37, 19, 0.32); padding: 24px 18px; border-radius: 3px 10px 4px 9px; background: rgba(53, 36, 23, 0.5); }

@media (max-width: 900px) {
  .hero-copy-block { padding: 30px 28px 28px; }
}

@media (max-width: 620px) {
  .hero-copy-block { padding: 28px 20px 24px; }
  .journal-route { padding: 14px 12px; }
  .panel, .target-panel, .traits-panel, .roster-panel, .settings-panel, .review-panel { transform: none; }
  .panel .section-heading::before, .review-panel .review-heading::before { top: -17px; }
  .form-actions { width: 100%; }
}

/* Dropdown clarity and upright paper surfaces */
.panel,
.target-panel,
.traits-panel,
.roster-panel,
.settings-panel,
.review-panel {
  position: relative;
  overflow: visible;
  transform: none;
}

.panel:focus-within { z-index: 100; }
.field:focus-within,
.autocomplete:focus-within { position: relative; z-index: 120; }

.autocomplete-menu {
  z-index: 200;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  direction: ltr;
  writing-mode: horizontal-tb;
}

.target-panel .autocomplete-menu {
  right: auto;
  left: 0;
  width: min(620px, calc(100vw - 40px));
}

.review-panel .helper-preparation-body > h5 {
  margin: 22px 0 12px;
  color: #3b3022;
  font: 800 1rem/1.25 Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
}

@media (max-width: 620px) {
  html,
  body { overflow-x: clip; }

  .autocomplete-menu,
  .target-panel .autocomplete-menu {
    right: auto;
    left: 0;
    width: min(520px, calc(100vw - 64px));
    max-width: calc(100vw - 64px);
  }
}

@media (max-width: 760px) {
  .site-header { flex-wrap: wrap; gap: 6px 12px; padding: 8px 14px 0; }
  .site-nav { order: 3; width: calc(100% + 28px); margin: 0 -14px; padding: 4px 9px; border-top: 1px solid rgba(235, 202, 147, 0.14); overflow-x: auto; }
  .site-nav a { flex: 0 0 auto; }
  .version-badge { margin-left: auto; }
}

@media (max-width: 520px) {
  .brand-copy small, .version-badge { display: none; }
}