:root {
      --paper: #f7f2e8;
      --ink: #26231f;
      --muted: #6f7168;
      --line: #cfd7d2;
      --panel: rgba(255, 252, 244, .94);
      --card: rgba(255, 255, 255, .94);
      --card-border: #d9dfdc;
      --male: #315d7e;
      --female: #934f65;
      --unknown: #66723c;
      --leaf: #5d793f;
      --vine: rgba(93, 121, 63, .42);
      --scale-overview: 1;
      --scale-oak: .78;
    }

    * { box-sizing: border-box; }

    html, body { height: 100%; }

    body {
      margin: 0;
      overflow: hidden;
      color: var(--ink);
      background: var(--paper);
      font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
      letter-spacing: 0;
    }

    .app {
      height: 100vh;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
    }

    header {
      position: relative;
      z-index: 8;
      padding: 14px 18px 12px;
      border-bottom: 1px solid rgba(87, 76, 61, .2);
      background: rgba(255, 252, 244, .94);
      backdrop-filter: blur(12px);
      box-shadow: 0 8px 22px rgba(38, 33, 26, .07);
    }

    .bar {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) auto;
      gap: 14px;
      align-items: start;
    }

    h1 {
      margin: 0 0 7px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.35rem, 1.15rem + .9vw, 2.15rem);
      line-height: 1.08;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      color: var(--muted);
      font-size: .88rem;
    }

    .chip {
      min-height: 27px;
      display: inline-flex;
      align-items: center;
      padding: 3px 9px;
      border: 1px solid rgba(95, 78, 58, .18);
      border-radius: 999px;
      background: rgba(255, 255, 255, .7);
      white-space: nowrap;
    }

    .controls {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      max-width: 860px;
    }

    .segmented {
      display: inline-flex;
      padding: 3px;
      border: 1px solid rgba(95, 78, 58, .26);
      border-radius: 10px;
      background: rgba(255,255,255,.66);
    }

    input, button, select {
      min-height: 38px;
      border: 1px solid rgba(95, 78, 58, .3);
      border-radius: 8px;
      background: rgba(255,255,255,.86);
      color: var(--ink);
      font: inherit;
    }

    input {
      width: min(290px, 100%);
      padding: 8px 11px;
    }

    button, select {
      padding: 7px 10px;
      cursor: pointer;
    }

    .icon-btn { min-width: 38px; }

    .segmented button {
      border: 0;
      min-height: 32px;
      border-radius: 7px;
      background: transparent;
      padding: 5px 10px;
    }

    .segmented button.active {
      background: #315d7e;
      color: #fff;
    }

    button:hover, select:hover, input:focus {
      outline: none;
      border-color: rgba(74, 93, 49, .65);
      box-shadow: 0 0 0 3px rgba(96, 119, 68, .13);
    }

    .workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 326px;
      min-height: 0;
      overflow: hidden;
    }

    .viewport {
      position: relative;
      overflow: auto;
      min-height: 0;
      background:
        linear-gradient(90deg, rgba(38, 35, 31, .035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(38, 35, 31, .03) 1px, transparent 1px),
        var(--paper);
      background-size: 28px 28px, 28px 28px, auto;
    }

    aside {
      min-height: 0;
      overflow: auto;
      padding: 18px 16px;
      border-left: 1px solid rgba(87, 76, 61, .2);
      background: var(--panel);
    }

    .panel-title {
      margin: 0 0 10px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.08rem;
      line-height: 1.18;
    }

    .panel-name {
      margin: 0 0 12px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.28rem;
      font-weight: 700;
      line-height: 1.16;
    }

    .panel-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 14px;
    }

    .primary {
      border-color: #527038;
      background: #5d793f;
      color: #fff;
      font-weight: 700;
    }

    .details {
      display: grid;
      gap: 10px;
      font-size: .9rem;
      line-height: 1.36;
    }

    .details dt {
      color: var(--muted);
      font-size: .74rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .details dd { margin: 2px 0 0; }
    .extra-info {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid rgba(87,76,61,.16);
    }
    .extra-info h3 {
      margin: 0 0 9px;
      color: var(--muted);
      font-size: .74rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .extra-list {
      display: grid;
      gap: 7px;
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: .84rem;
      line-height: 1.34;
    }
    .extra-list strong {
      color: #4c4b43;
      font-weight: 800;
    }

    .note {
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.42;
    }

    .bio-editor {
      display: none;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(87,76,61,.16);
    }

    .bio-editor.open { display: grid; gap: 8px; }
    .person-editor {
      display: none;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(87,76,61,.16);
    }
    .person-editor.open { display: grid; gap: 10px; }
    .edit-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .edit-grid .wide { grid-column: 1 / -1; }
    .bio-editor label,
    .person-editor label {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: .74rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .person-editor input,
    .person-editor select,
    .bio-editor input {
      width: 100%;
      min-height: 36px;
      padding: 7px 9px;
    }
    .bio-editor textarea {
      width: 100%;
      min-height: 145px;
      box-sizing: border-box;
      resize: vertical;
      padding: 10px;
      border: 1px solid rgba(87,76,61,.22);
      border-radius: 7px;
      background: rgba(255,255,255,.72);
      color: var(--ink);
      font: inherit;
      line-height: 1.35;
    }
    .bio-status {
      min-height: 1.2em;
      color: var(--muted);
      font-size: .78rem;
    }

    .surface {
      position: relative;
      min-width: 100%;
      width: max-content;
      padding: 22px 28px 38px;
      transform: scale(var(--scale-overview));
      transform-origin: top left;
    }

    .overview-edges {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: visible;
      z-index: 0;
    }

    .columns {
      position: relative;
      z-index: 1;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 246px;
      gap: 28px;
      align-items: start;
    }

    .generation {
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .generation-head {
      position: sticky;
      top: 0;
      z-index: 3;
      min-height: 45px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 7px 8px;
      border-bottom: 2px solid #8ca09a;
      background: rgba(247, 242, 232, .96);
    }

    .generation-head strong { font-size: .92rem; }
    .generation-head span { color: var(--muted); font-size: .78rem; }

    .person-card {
      position: relative;
      min-height: 103px;
      display: grid;
      gap: 6px;
      padding: 10px 10px 9px 12px;
      border: 1px solid var(--card-border);
      border-left: 5px solid var(--unknown);
      border-radius: 8px;
      background: var(--card);
      box-shadow: 0 8px 22px rgba(28, 40, 36, .08);
      cursor: pointer;
      transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease;
    }

    .person-card[data-sex="M"] { border-left-color: var(--male); }
    .person-card[data-sex="F"] { border-left-color: var(--female); }
    .person-card[data-sex="U"] { border-left-color: var(--unknown); }
    .person-card.root { box-shadow: 0 10px 30px rgba(49,93,126,.16); }
    .person-card.layer {
      border-style: dashed;
      background: rgba(255, 253, 247, .9);
      box-shadow: 0 6px 16px rgba(28, 40, 36, .06);
    }
    .person-card:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(28,40,36,.13); }
    .person-card.selected { outline: 3px solid rgba(49, 93, 126, .22); }
    .person-card.dimmed { opacity: .25; }
    .person-card.match { outline: 3px solid rgba(143, 101, 45, .24); }

    .name {
      font-weight: 750;
      line-height: 1.16;
      overflow-wrap: anywhere;
    }

    .surname { display: block; font-weight: 750; }
    .life, .place { color: var(--muted); font-size: .77rem; line-height: 1.24; overflow-wrap: anywhere; }
    .relation-badge {
      width: fit-content;
      max-width: 100%;
      padding: 2px 7px;
      border-radius: 999px;
      border: 1px solid rgba(95, 78, 58, .2);
      color: #5f563f;
      background: rgba(242, 230, 199, .7);
      font-size: .68rem;
      font-weight: 700;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .overview-edge {
      fill: none;
      stroke: #9aa9a4;
      stroke-width: 1.4;
      opacity: .55;
    }

    .overview-edge.far { stroke: var(--male); }
    .overview-edge.mor { stroke: var(--female); }
    .overview-edge.partner { stroke: #8f652d; stroke-dasharray: 5 5; }
    .overview-edge.selected { stroke: #5d793f; stroke-width: 2.6; opacity: .9; }
    .overview-edge.dimmed { opacity: .08; }

    .oak-stage {
      position: relative;
      width: var(--stage-w);
      height: var(--stage-h);
      transform: scale(var(--scale-oak));
      transform-origin: top left;
    }

    .oak-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(248, 243, 231, .62), rgba(248, 243, 231, .74)),
        var(--oak-image) center bottom / min(92%, 5200px) auto no-repeat;
      pointer-events: none;
      z-index: 0;
    }

    .oak-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(255,255,255,.15), rgba(255,255,255,.04));
      pointer-events: none;
      z-index: 0;
    }

    .oak-branches {
      position: absolute;
      inset: 0;
      overflow: visible;
      pointer-events: none;
      z-index: 1;
    }

    .oak-branch {
      fill: none;
      stroke: var(--vine);
      stroke-linecap: round;
      stroke-width: 4.3;
      transition: opacity .18s ease, stroke-width .18s ease, stroke .18s ease;
    }

    .oak-branch.far { stroke: rgba(49, 93, 126, .42); }
    .oak-branch.mor { stroke: rgba(147, 79, 101, .42); }
    .oak-branch.partner { stroke: rgba(143, 101, 45, .5); stroke-dasharray: 8 8; stroke-width: 3; }
    .oak-branch.dimmed { opacity: .1; }
    .oak-branch.selected { stroke: rgba(72, 111, 50, .78); stroke-width: 7.2; opacity: .92; }

    .leaf {
      position: absolute;
      width: var(--w);
      height: var(--h);
      left: calc(var(--x) - var(--w) / 2);
      top: calc(var(--y) - var(--h) / 2);
      display: grid;
      align-content: center;
      gap: 4px;
      box-sizing: border-box;
      padding: 15px 24px 14px 24px;
      border: 0;
      background: transparent;
      cursor: pointer;
      transition: transform .16s ease, opacity .16s ease, filter .16s ease;
      transform: rotate(var(--tilt, 0deg));
      z-index: 2;
    }

    .leaf::before {
      content: "";
      position: absolute;
      inset: 0;
      border: 1.2px solid rgba(82,112,56,.34);
      background:
        radial-gradient(circle at 35% 29%, rgba(255,255,255,.72), transparent 42%),
        linear-gradient(135deg, rgba(255,255,255,.64), rgba(230,239,204,.68)),
        rgba(250,248,231,.95);
      clip-path: polygon(4% 50%, 16% 18%, 49% 4%, 82% 17%, 99% 50%, 82% 83%, 49% 96%, 16% 82%);
      filter: drop-shadow(0 10px 18px rgba(49,38,24,.14));
      pointer-events: none;
      z-index: 0;
    }

    .leaf[data-sex="M"] {
      padding-left: 26px;
      padding-right: 28px;
    }
    .leaf[data-sex="M"]::before {
      border-color: rgba(49,93,126,.38);
      clip-path: polygon(3% 50%, 15% 18%, 49% 4%, 83% 17%, 100% 50%, 83% 83%, 49% 96%, 15% 82%);
    }
    .leaf[data-sex="F"] {
      padding-left: 28px;
      padding-right: 26px;
    }
    .leaf[data-sex="F"]::before {
      border-color: rgba(147,79,101,.38);
      clip-path: polygon(97% 50%, 85% 18%, 51% 4%, 17% 17%, 0 50%, 17% 83%, 51% 96%, 85% 82%);
    }
    .leaf[data-sex="U"]::before { border-color: rgba(102,114,60,.38); }
    .leaf.layer::before { border-style: dashed; background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(240,232,204,.74)), rgba(255,253,247,.94); }
    .leaf:hover { transform: rotate(var(--tilt, 0deg)) translateY(-2px); }
    .leaf:hover::before { filter: drop-shadow(0 14px 24px rgba(49,38,24,.18)); }
    .leaf.root { width: var(--w); padding: 15px 22px; }
    .leaf.root::before { border: 2px solid rgba(96,83,46,.58); clip-path: ellipse(49% 39% at 50% 50%); background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(237,226,195,.88)), rgba(255,248,232,.97); filter: drop-shadow(0 16px 28px rgba(82,55,30,.2)); }
    .leaf.selected { outline: 4px solid rgba(96,119,68,.22); }
    .leaf.branch-active::before { border-color: rgba(72,111,50,.72); filter: drop-shadow(0 16px 25px rgba(57,91,42,.2)); }
    .leaf.dimmed { opacity: .2; }
    .leaf.match { outline: 4px solid rgba(143,101,45,.24); }

    .leaf .name, .leaf .life, .leaf .place { position: relative; z-index: 1; }
    .leaf .name { font-family: Georgia, "Times New Roman", serif; font-size: .9rem; line-height: 1.08; overflow-wrap: anywhere; }
    .leaf .life, .leaf .place { font-size: .69rem; line-height: 1.13; overflow-wrap: anywhere; }
    .leaf.root .name { font-size: 1.22rem; }
    .leaf .relation-badge {
      position: relative;
      z-index: 1;
      justify-self: center;
      font-size: .58rem;
      padding: 1px 6px;
    }

    .oak-stage.box-mode .oak-branch {
      stroke-width: 2.2;
      stroke-linecap: butt;
      opacity: .64;
    }
    .oak-stage.box-mode .oak-branch.selected { stroke-width: 3.5; opacity: .9; }
    .oak-stage.box-mode .leaf {
      padding: 12px 14px;
      transform: none;
    }
    .oak-stage.box-mode .leaf::before {
      clip-path: none;
      border-radius: 7px;
      background: rgba(255,255,255,.9);
      box-shadow: 0 9px 22px rgba(28,40,36,.11);
      filter: none;
    }
    .oak-stage.box-mode .leaf.root::before {
      clip-path: none;
      border-radius: 7px;
      background: rgba(255,248,232,.96);
      box-shadow: 0 14px 30px rgba(82,55,30,.16);
    }
    .oak-stage.box-mode .leaf .name {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: .86rem;
      line-height: 1.12;
    }
    .oak-stage.box-mode .leaf .life,
    .oak-stage.box-mode .leaf .place { font-size: .7rem; }

    @media (max-width: 960px) {
      body { overflow: auto; }
      .app { height: auto; min-height: 100vh; }
      .bar { grid-template-columns: 1fr; }
      .controls { justify-content: flex-start; }
      .workspace { grid-template-columns: 1fr; overflow: visible; }
      .viewport { height: 70vh; }
      aside { border-left: 0; border-top: 1px solid rgba(87,76,61,.2); }
    }

    @media print {
      @page { size: A3 portrait; margin: 10mm; }
      * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      html, body { height: auto; overflow: visible; background: #fff; }
      .app, .workspace { display: block; height: auto; overflow: visible; }
      header { padding: 0 0 8mm; border: 0; box-shadow: none; background: transparent; }
      .controls, aside { display: none; }
      .viewport { overflow: visible; height: auto; background: transparent; }
      .surface, .oak-stage { transform: none; zoom: var(--print-scale, .52); page-break-inside: avoid; }
    }

    .load-warning {
      display: none;
      position: fixed;
      z-index: 9999;
      top: 16px;
      left: 16px;
      right: 16px;
      max-width: 760px;
      margin: 0 auto;
      padding: 16px 18px;
      border: 1px solid #d7b981;
      border-radius: 8px;
      background: #fff8e8;
      color: #443315;
      box-shadow: 0 16px 50px rgba(40, 32, 18, .18);
      line-height: 1.45;
    }

    .load-warning.visible { display: block; }
    .load-warning strong { display: block; margin-bottom: 6px; }
    .load-warning small { display: block; margin-top: 8px; color: #7b6743; }