@charset "UTF-8";

body.is-family-view main,
body.is-family-view .nav-inner,
body.is-family-view .site-footer { width: calc(100% - 64px); max-width: none; }
body.is-family-view .site-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.family-section { width: 100%; max-width: none; min-width: 0; margin-inline: auto; padding: 12px 0 0; }
.family-breadcrumb { display: flex; align-items: center; gap: 10px; min-width: 0; color: #6e6e73; font-size: 12px; line-height: 1.5; }
.family-breadcrumb > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-breadcrumb > span:not(:last-child) { color: #b5b5bb; }
.family-back { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; min-height: 30px; padding: 3px 0; color: #0071e3; font-size: 12px; }
.family-back svg { width: 14px; height: 14px; transform: rotate(180deg); }
.family-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 12px 0 18px; }
.family-heading > div:first-child { min-width: 0; }
.family-heading .eyebrow { margin-bottom: 7px; color: #6e6e73; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .3px; }
.family-heading h1 { max-width: 750px; color: #1d1d1f; font-size: clamp(36px, 3.3vw, 44px); font-weight: 650; line-height: 1.16; letter-spacing: -1.7px; overflow-wrap: anywhere; }
.family-description { margin-top: 8px; color: #6e6e73; font-size: 13px; line-height: 1.65; }
.family-heading-actions { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding-bottom: 2px; }
.family-heading-actions .btn { min-height: 38px; padding: 9px 17px; font-size: 13px; }
.family-stats { display: flex; align-items: center; gap: 22px; margin-right: 16px; }
.family-stats > div { display: flex; flex-direction: column; gap: 3px; text-align: center; }
.family-stats strong { color: #1d1d1f; font-size: 25px; font-weight: 600; line-height: 1.15; letter-spacing: -.8px; }
.family-stats span { color: #6e6e73; font-size: 11px; line-height: 1.4; white-space: nowrap; }

.family-workspace { min-width: 0; overflow: hidden; border: 1px solid #e1e3e8; border-radius: 26px; background: #f5f5f7; box-shadow: 0 3px 16px #1d1d1f03; }
.family-viewport { position: relative; width: 100%; height: var(--family-natural-height, 560px); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; cursor: grab; scrollbar-width: thin; scrollbar-color: #c5c7ce transparent; background: radial-gradient(ellipse at 50% 0, #fff 0, #f7f8fa 45%, #f4f5f7 100%); }
.family-viewport::-webkit-scrollbar { width: 8px; height: 8px; }
.family-viewport::-webkit-scrollbar-thumb { border: 2px solid #f5f5f7; border-radius: 8px; background: #c5c7ce; }
.family-viewport::-webkit-scrollbar-corner { background: transparent; }
.family-viewport:focus-visible { outline: 2px solid #0071e3; outline-offset: -3px; }
.family-viewport.is-panning, .family-viewport.is-panning * { cursor: grabbing !important; user-select: none; }
.family-surface { position: relative; min-width: 100%; min-height: 100%; overflow: hidden; }
.family-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.family-edges { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.family-edge { fill: none; stroke: #bdc7d3; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.family-edge.on-path { stroke: #7ba6d4; stroke-width: 2; }

.family-node { --family-node-border: #dfe3e9; position: absolute; display: flex; flex-direction: column; width: 384px; height: 404px; padding: 0; border: 0; border-radius: 24px; color: #1d1d1f; background: #fff; box-shadow: 0 5px 18px #23324808, 0 1px 3px #23324804; cursor: pointer; transition: box-shadow .18s ease, background .18s ease; }
.family-node::after { position: absolute; inset: 0; z-index: 4; border: 1px solid var(--family-node-border); border-radius: inherit; pointer-events: none; content: ""; }
.family-node:hover { --family-node-border: #bacbdc; box-shadow: 0 8px 23px #2332480d, 0 1px 3px #23324804; }
.family-node.is-root { --family-node-border: #b8c9dd; width: 432px; height: 444px; box-shadow: 0 9px 28px #2332480e, 0 2px 7px #23324805; }
.family-node:where([data-depth]:not([data-depth="0"]):not([data-depth="1"])) { --family-node-border: #d9e2ed; }
.family-node:where([data-depth]:not([data-depth="0"]):not([data-depth="1"]))::before { position: absolute; top: 228px; left: 20px; right: 20px; z-index: 4; height: 2px; background: #d1e0f0; pointer-events: none; content: ""; }
.family-node[data-depth="3"]::before, .family-node[data-depth="4"]::before { background: #bdd1e8; }
.family-node.on-path { --family-node-border: #b6cbe2; }
.family-node.is-focused { --family-node-border: #0071e3; box-shadow: 0 0 0 1px #0071e31a, 0 7px 23px #2332480a; }
.family-node:focus-visible { outline: 3px solid #2997ff; outline-offset: 4px; }
.family-node.dragging { opacity: .42; }
.family-node.drag-over { --family-node-border: #0071e3; background: #f3f8ff; box-shadow: 0 0 0 2px #0071e322, 0 7px 23px #2332480a; }

.family-node > .card-visual { flex: 0 0 228px; height: 228px; min-height: 228px; border-radius: 24px 24px 0 0; }
.family-node > .card-visual::before { top: 189px; }
.family-node.is-root > .card-visual { flex-basis: 252px; height: 252px; min-height: 252px; }
.family-node.is-root > .card-visual::before { top: 211px; }
.family-node .book-object { width: 148px; height: 198px; }
.family-node.is-root .book-object { width: 160px; height: 216px; }
.family-node:hover .book-object { transform: perspective(800px) rotateY(-8deg) rotateX(3deg) rotateZ(-3deg) translateY(-3px); }
.family-node .book-front { padding: 17px 14px 13px 16px; }
.family-node .book-title { font-size: 25px; }
.family-node.is-root .book-front { padding: 20px 16px 15px 18px; }
.family-node.is-root .book-title { font-size: 27px; }
.family-node .type-badge { left: 15px; top: 14px; max-width: calc(100% - 62px); overflow: hidden; padding: 4px 8px; border-radius: 7px; color: #606b79; background: #ffffffd9; font-size: 11px; font-weight: 500; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.family-node.is-root .type-badge { color: #0071e3; background: #f0f7ffed; }
.family-node .card-more { top: 10px; right: 10px; width: 32px; height: 32px; color: #6e6e73; opacity: 1; }
.family-node .card-more:hover { color: #1d1d1f; background: #ffffffe0; }
.family-node .card-more svg { width: 18px; height: 18px; }
.family-node .card-visual > .sample-label { left: 16px; bottom: 9px; color: #666d76; font-size: 9px; letter-spacing: .3px; }

.family-node > .card-info { display: flex; flex-direction: column; flex: 0 0 176px; height: 176px; min-height: 176px; padding: 16px 20px; border-radius: 0 0 24px 24px; background: #fff; }
.family-node.is-root > .card-info { flex-basis: 192px; height: 192px; min-height: 192px; padding: 20px 22px; }
.family-node:where([data-depth]:not([data-depth="0"]):not([data-depth="1"])) > .card-info { background: #fcfdff; }
.family-node .card-meta { flex: 0 0 22px; height: 22px; min-width: 0; gap: 8px; color: #74716b; font-size: 11px; line-height: 14px; }
.family-node .card-meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-node .family-meta-right { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.family-meta-right > small { color: #6e6e73; font-size: 10px; line-height: 14px; }
.family-node .card-title { flex: 0 0 29px; min-width: 0; height: 29px; margin-top: 5px; color: #1d1d1f; font-size: 22px; font-weight: 600; line-height: 29px; letter-spacing: -.55px; }
.family-node.is-root .card-title { flex-basis: 32px; height: 32px; font-size: 27px; line-height: 32px; letter-spacing: -.8px; }
.family-node .card-description { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; flex: 0 0 40px; height: 40px; margin-top: 5px; color: #62656d; font-size: 14px; line-height: 20px; white-space: normal; overflow-wrap: anywhere; }
.family-node.is-root .card-description { margin-top: 5px; }
.family-node .card-bottom { flex: 0 0 36px; gap: 8px; height: 36px; min-height: 36px; min-width: 0; margin-top: auto; }
.family-node-stage { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 3px 8px; border-radius: 11px; background: #f2f3f5; color: #5f6168; font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.family-node-stage svg { flex: 0 0 12px; width: 12px; height: 12px; stroke-width: 2; }
.family-node-stage[data-state="pending"] { color: #8a4b0a; background: #fff3df; }
.family-node-stage[data-state="ready"] { color: #246c46; background: #eaf6ed; }
.family-node-derive { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: 0 0 auto; min-height: 30px; padding: 6px 10px; border-radius: 16px; color: #0071e3; background: #edf5ff; font-size: 12px; line-height: 1.4; }
.family-node-derive:hover { background: #dfedfd; }
.family-node-derive svg { width: 12px; height: 12px; }
.family-fold { position: absolute; left: calc(50% - 14px); bottom: -14px; z-index: 5; display: flex; justify-content: center; align-items: center; gap: 2px; min-width: 28px; height: 28px; padding: 5px; border: 1px solid #d5dfe9; border-radius: 50%; color: #657b92; background: #fff; box-shadow: 0 2px 5px #1d1d1f08; font-size: 11px; }
.family-fold:hover { border-color: #a9c4e2; color: #0071e3; background: #f3f8ff; }
.family-fold svg { width: 12px; height: 12px; }
.family-empty-add { position: absolute; display: flex; justify-content: center; align-items: center; gap: 9px; width: 320px; height: 58px; padding: 12px 18px; border: 1px dashed #c0cfdf; border-radius: 18px; color: #557492; background: #ffffffb3; font-size: 13px; }
.family-empty-add:hover { border-color: #0071e3; color: #0071e3; background: #f3f8ff; }
.family-empty-add svg { width: 18px; height: 18px; }
.family-help { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px 20px; padding: 12px 3px 20px; color: #6e6e73; font-size: 12px; line-height: 1.6; }
.family-help > span { display: inline-flex; align-items: center; gap: 6px; }
.family-help svg { width: 13px; height: 13px; flex: 0 0 auto; }

.family-view-tools { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100vw - 48px); padding: 6px; border: 1px solid #dedfe5cc; border-radius: 28px; background: #ffffffeb; box-shadow: 0 5px 22px #1d1d1f12, 0 1px 3px #1d1d1f08; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.family-view-tools > button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border-radius: 50%; color: #515157; font-size: 20px; font-weight: 400; line-height: 1; transition: background .16s ease, color .16s ease; }
.family-view-tools > button:hover { color: #0063c8; background: #edf5ff; }
.family-view-tools > button:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
.family-view-tools > button:disabled { color: #b3b3b8; cursor: default; }
.family-view-tools > button:disabled:hover { background: transparent; }
.family-view-tools .family-view-reset { width: auto; margin-left: 4px; padding: 0 13px; border-left: 1px solid #e3e4e9; border-radius: 0 20px 20px 0; color: #515157; font-size: 12px; line-height: 1.4; white-space: nowrap; }
.family-view-scale { min-width: 44px; padding: 0 2px; color: #6e6e73; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.4; }

@media (max-width: 1100px) {
  .family-heading { align-items: flex-start; }
  .family-heading-actions { max-width: 290px; gap: 10px; }
  .family-stats { justify-content: flex-end; width: 100%; margin-right: 4px; gap: 24px; }
}

@media (max-width: 700px) {
  body.is-family-view main,
  body.is-family-view .nav-inner,
  body.is-family-view .site-footer { width: calc(100% - 32px); }
  body.is-family-view .site-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .family-section { padding-top: 12px; }
  .family-breadcrumb, .family-back { font-size: 12px; }
  .family-heading { flex-direction: column; gap: 18px; padding: 14px 0 19px; }
  .family-heading .eyebrow { margin-bottom: 6px; font-size: 11px; }
  .family-heading h1 { font-size: 34px; letter-spacing: -1.1px; }
  .family-description { margin-top: 8px; font-size: 13px; }
  .family-heading-actions { width: 100%; max-width: none; justify-content: flex-start; gap: 8px; padding-bottom: 0; }
  .family-heading-actions .btn { min-height: 35px; padding: 8px 12px; font-size: 12px; }
  .family-stats { justify-content: flex-start; width: auto; gap: 16px; margin-right: auto; }
  .family-stats strong { font-size: 22px; }
  .family-stats span { font-size: 10px; }
  .family-workspace { border-radius: 21px; }
  .family-help { justify-content: flex-start; gap: 4px; padding: 11px 2px 18px; font-size: 11px; }
  .family-help > span { align-items: flex-start; }
  .family-help svg { margin-top: 2px; }
  .family-view-tools { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 24px); gap: 3px; padding: 5px; border-radius: 24px; }
  .family-view-tools > button { width: 32px; height: 32px; font-size: 18px; }
  .family-view-tools .family-view-reset { margin-left: 3px; padding-inline: 10px; font-size: 11px; }
  .family-view-scale { min-width: 39px; font-size: 11px; }
}

@media (max-width: 380px) {
  .family-heading-actions { gap: 8px 6px; }
  .family-heading-actions .btn { padding: 8px 10px; }
  .family-stats { gap: 10px; margin-right: 5px; }
  .family-stats strong { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .family-node, .family-node .book-object, .family-view-tools > button { transition: none; }
  .family-node:hover .book-object { transform: perspective(800px) rotateY(-17deg) rotateX(5deg) rotateZ(-6deg); }
}