.family-demo{margin:28px 0;padding:28px;border:1px solid #dcd1ec;border-radius:14px;background:#fff;min-width:0}.family-demo[hidden]{display:none}.family-demo h2{font-size:25px}.family-legend,.family-warning,.family-answers p{font-size:13px;line-height:1.8;color:#62586f}.family-warning{padding:14px 16px;border-left:3px solid #9560c8;background:#f5f0fb}.family-tree-scroll{max-width:100%;overflow-x:auto;border:1px solid #e0d6ec;border-radius:8px;background:#faf8fd;overscroll-behavior-x:contain}.family-tree-scroll svg{display:block;width:100%;min-width:640px;max-height:500px}.family-links{stroke:#9380aa;stroke-width:2}.family-node rect,.family-node circle,.family-node path{fill:#ede4f8;stroke:#7c50b2;stroke-width:2}.family-node text{text-anchor:middle;fill:#382343}.family-node .family-number{font-size:18px;font-weight:700}.family-node .family-node-label{font-size:12px}.family-node.family-selected rect,.family-node.family-selected circle,.family-node.family-selected path{fill:#7543af;stroke:#442064;stroke-width:3}.family-node.family-selected .family-number{fill:white}.family-answers summary{padding:12px 0;color:#7543af;cursor:pointer;font-weight:600}.family-answers table{border-collapse:collapse;width:100%;font-size:12px;text-align:left}.family-answers th,.family-answers td{padding:10px 6px;border-bottom:1px solid #e6dfec;overflow-wrap:anywhere}.family-tree-scroll:focus-visible,.family-answers summary:focus-visible{outline:3px solid #7543af;outline-offset:3px}
.degree-scroll-hint{margin:0;color:#cfc4cb;font-size:12px;line-height:1.8}.degree-chart-scroll{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid #4a3d4a;border-radius:8px;background:#1c1822;scrollbar-color:#a88bd1 #302738}.degree-chart{position:relative;min-width:760px;padding:42px 20px 20px 60px}.degree-axis{position:absolute;top:42px;left:10px;height:240px;display:flex;flex-direction:column;justify-content:space-between;color:#cfc4cb;font-size:11px;transform:translateY(-5px)}.degree-plot{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:12px;background:repeating-linear-gradient(to top,transparent 0,transparent 59px,#3c3342 59px,#3c3342 60px);background-size:100% 240px;background-repeat:no-repeat}.degree-column{min-width:0;text-align:center}.degree-column-track{height:240px;position:relative;border-bottom:1px solid #796585}.degree-column-fill{display:block;position:absolute;bottom:0;left:5px;right:5px;height:calc(100% * var(--degree-score));background:linear-gradient(to top,#ad8de5,#efb9c8);border-radius:4px 4px 0 0}.degree-unknown{height:100%;border:1px dashed #65566e;background:transparent;opacity:.45}.degree-column-value{position:absolute;bottom:calc(100% * var(--degree-score) + 7px);left:50%;transform:translateX(-50%);font-size:10px;font-weight:600;color:#f0e7f2;white-space:nowrap;font-variant-numeric:tabular-nums}.degree-column>span{display:block;margin-top:12px;color:#ded2e8;font-size:12px;font-weight:600}.degree-chart-scroll:focus-visible,.degree-column:focus-visible,.degree-data summary:focus-visible{outline:3px solid #c7a2ef;outline-offset:3px}.degree-data{color:#cfc4cb;font-size:12px;min-width:0}.degree-data summary{padding:8px 0;color:#dfc4f1;cursor:pointer}.degree-data table{width:100%;border-collapse:collapse;text-align:left}.degree-data th,.degree-data td{padding:10px 6px;border-bottom:1px solid #40343b}.degree-data td{text-align:right;font-variant-numeric:tabular-nums}.result-bars:has(.degree-chart-scroll){min-width:0}
.family-disclosure{padding:10px 14px;border-left:3px solid #9560c8;background:#f5f0fb;color:#62586f;font-size:13px;line-height:1.8}.family-method{margin:12px 0}
@media(max-width:700px){.family-demo{padding:20px;margin:20px 0}.family-demo .section-heading{display:block}.family-demo .section-heading p{margin-top:12px}.family-demo h2{font-size:22px}.family-answers th,.family-answers td{padding:8px 4px;font-size:11px}}