.hero{margin:24px auto 64px}.hero h1{font-size:clamp(42px,5vw,70px)}.hero h1 span{font-size:.65em;margin-top:16px}.portraits{display:grid;grid-template-columns:1fr;overflow:hidden;background:#eee6fa}.portraits.multi{grid-template-columns:repeat(2,minmax(0,1fr))}.portraits img{width:100%;height:auto;display:block;aspect-ratio:1;object-fit:cover}.hero>.portraits{border-radius:32px;transform:rotate(2deg);box-shadow:0 18px 40px #69518718}.word-card>.portraits{aspect-ratio:1}.word-card>.multi img{height:100%;min-height:0}.word-card>.multi:has(img:nth-child(2):last-child){align-content:center}.word-card h3{font-size:24px;overflow-wrap:anywhere}.word-card details{margin-bottom:14px}.word-card summary{font-weight:700;color:#825a7d}.small{font-size:14px;color:var(--muted)}.filters,.compare-controls{display:flex;flex-wrap:wrap;gap:18px;align-items:end}.filters label,.compare-controls label{display:grid;gap:6px;font-weight:700}.filters input,.filters select,.compare-controls select{max-width:100%;padding:12px;border:1px solid #d6c8e2;border-radius:16px;background:white;min-height:48px}.learning-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}.learning-grid article,.panel{background:white;border:1px solid #e6ddeb;border-radius:28px;padding:28px}.learning-grid a{text-decoration:underline;text-underline-offset:4px}.intro{padding-top:40px}.lead{font-size:22px}.clues ol{padding-left:24px;display:grid;grid-template-columns:1fr 1fr;gap:10px 36px}.clues li p{margin:8px 0}.clues summary{font-size:14px;color:#795f86}.clues{margin-bottom:40px}.selection{background:#ece2f5;padding:14px 20px;border-radius:16px;position:sticky;top:86px;z-index:5}.tree-board{position:relative;padding:14px 0 28px}.branches{display:grid;grid-template-columns:1fr 1fr;gap:28px}.grandparents{display:grid;grid-template-columns:1fr 1fr;gap:14px}.parent{width:48%;margin:48px auto 0}.children{width:50%;margin:64px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:18px}.slot{position:relative;background:#fff;border:2px dashed #cdbddd;border-radius:22px;padding:10px;z-index:1;min-width:0}.slot label{display:block;text-align:center;font-weight:800;font-size:14px;min-height:44px;line-height:1.35}.slot button.place{border:0;border-radius:14px;background:#f5f0fa;width:100%;padding:0;overflow:hidden;display:block;min-height:145px;font-weight:800}.slot img{width:100%;display:block;aspect-ratio:1;object-fit:cover}.slot .name{display:block;padding:8px;font-size:16px}.slot .remove{display:block;margin:6px auto 0;border:0;background:none;min-height:44px;font-size:14px;text-decoration:underline}.slot.selected,.person.selected{outline:3px solid #835ba6;outline-offset:3px}.slot.correct{border:2px solid #37836c;background:#e9f7f0}.slot.wrong{border:2px solid #aa5370;background:#fff0f4}.slot-status{text-align:center;font-size:14px;font-weight:800;margin:5px 0}.tree-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.tree-lines path{fill:none;stroke:#b4a1ca;stroke-width:3}.bank{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;margin:20px 0 28px;min-height:90px}.person{border:2px solid transparent;background:white;border-radius:18px;overflow:hidden;min-width:0;padding:0;font-weight:800;cursor:grab}.person img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.person span{display:block;padding:8px 2px;font-size:15px}.person small{display:block;font-weight:400;font-size:13px}.slot.drop-hover,#bank.drop-hover{outline:3px solid #9667b3}.drag-ghost{position:fixed;pointer-events:none;z-index:100;width:90px;height:90px;border:3px solid #9468ac;border-radius:18px;object-fit:cover;box-shadow:0 8px 20px #2224}.drag-handle{font-size:14px;background:#f0e9f6;border:0;padding:8px;min-height:44px;touch-action:none;cursor:grab;border-radius:12px;display:block;margin:6px auto}.bank-card{min-width:0}.bank-card .person{width:100%}.compare-controls>label{flex:1;min-width:180px}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:28px 0}.compare-person img{width:100%;max-width:300px;border-radius:24px}.compare-person h3{margin-top:16px}.compare-person p{font-size:16px}.compare-person{min-width:0}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.quiz-options button{min-height:56px;background:#f6f0fb;border:2px solid #dfd2e8;border-radius:16px;padding:14px;font-weight:800}.quiz-options .correct{background:#e4f5ed;border-color:#37836c}.quiz-options .wrong{background:#fff0f4;border-color:#aa5370}#result{font-weight:800;font-size:19px;min-height:32px}#sample{padding:18px;background:#edf4ff;border-radius:18px}#sample summary{font-weight:800}.actions{flex-wrap:wrap}.button{white-space:normal;text-align:center}.tree-board [draggable=true]{cursor:grab}.word-grid{margin-top:24px}.word-copy{min-width:0}
@media(max-width:800px){.bank{grid-template-columns:repeat(4,minmax(0,1fr))}.branches{gap:14px}.grandparents{gap:8px}.slot{padding:6px;border-radius:15px}.slot button.place{min-height:105px}.slot .name{font-size:14px;padding:7px 2px}.slot .remove{font-size:13px}.parent{width:65%}.children{width:60%}.clues ol{grid-template-columns:1fr}.selection{top:72px}.learning-grid{grid-template-columns:1fr}.hero>.portraits{max-width:420px;margin:auto}.hero{margin:20px 12px 40px}.panel{padding:20px}.slot label{font-size:14px}.slot .drag-handle{display:none}}
@media(max-width:480px){.branches{gap:10px}.slot{padding:4px}.slot label{min-height:54px;font-size:14px}.slot button.place{min-height:90px}.slot-status{font-size:12px}.parent{width:78%;margin-top:36px}.children{width:74%;margin-top:46px}.tree-board{padding:8px 0 20px}.slot .remove{font-size:12px}.compare-grid{gap:12px}.filters>*{width:100%}.filters input,.filters select{width:100%}.word-copy{padding:16px}.word-card h3{font-size:21px}.hero{padding:28px 22px}.hero h1{font-size:42px}.intro h1{font-size:42px}.compare-person p{font-size:14px}.selection{font-size:14px}.bank{gap:8px}.quiz-options{grid-template-columns:1fr}.panel{padding:18px}.shell{width:calc(100% - 28px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.tree-board{max-width:1000px;margin-inline:auto}.slot img{height:120px;object-fit:contain;background:#e6dffa;aspect-ratio:auto}.slot button.place{min-height:156px}.bank>p{grid-column:1/-1}.slot .drag-handle{display:none}.selection{position:static}.bank-card .drag-handle{font-size:12px;width:100%}@media(max-width:480px){.slot img{height:80px}.slot button.place{min-height:116px}.bank-card .drag-handle{font-size:12px;padding:4px}.bank-card .person span{font-size:14px}}