@media (min-width: 980px) { .wheel-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.wheel-wrap { position: relative; max-width: 640px; margin: 8px auto 0; }
.wheel { width: 100%; height: auto; display: block; overflow: visible; touch-action: manipulation; }
.wheel path { stroke: #fff; stroke-width: 2; cursor: pointer; transition: opacity .25s, filter .2s; outline: none; }
.wheel path:hover, .wheel path:focus-visible { filter: brightness(.94) saturate(1.2); }
.wheel path:focus-visible { stroke: var(--ink); stroke-width: 3; }
.wheel path.note.on { fill: var(--amber) !important; }
.wheel .dim { opacity: .28; }
.wheel text { font-family: var(--font); fill: #2e2e2e; pointer-events: none; dominant-baseline: central; }
.wheel text.fam { font-weight: 600; }
.wheel text.grp { font-weight: 500; fill: #3b2a14; }
.wheel text.nt { font-weight: 500; }
.wheel text.nt.on { font-weight: 700; }
.wheel .hub { fill: #fff; cursor: pointer; filter: drop-shadow(0 6px 14px rgba(30, 24, 10, .12)); }
.wheel .hub:focus-visible { stroke: var(--amber); stroke-width: 4; outline: none; }
.wheel .hub-t { font-size: 17px; font-weight: 600; text-anchor: middle; fill: var(--ink-2); }
.wheel .hub-s { font-size: 13px; text-anchor: middle; fill: #5f5f5f; }
.wheel .pop { animation: pop .35s var(--ease); transform-origin: center; transform-box: fill-box; }
@keyframes pop { 0% { transform: scale(.92); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

.search { position: relative; margin-bottom: 4px; }
.results { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.results:empty { display: none; }
.res, .lchip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; transition: transform .18s var(--ease), border-color .18s, background .18s; }
.res:hover, .lchip:hover { transform: translateY(-1px); border-color: var(--amber-soft); }
.res i, .lchip i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.res small { color: var(--muted); font-size: 12.5px; }
.lchip[aria-pressed="true"] { background: var(--amber-soft); border-color: var(--amber); }
.fam-list { margin-top: 6px; }
.fam-list h3 { margin-top: 8px; }

.picked { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #2e2e2e; animation: pop .35s var(--ease); }
.pick button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .7); cursor: pointer; font-size: 15px; line-height: 1; color: #2e2e2e; display: grid; place-items: center; }
.pick button:hover { background: #fff; }
.profile { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin-top: 14px; background: #f1ece3; }
.profile i { display: block; height: 100%; transition: width .4s var(--ease); }
.notes-card .empty { font-size: 15px; }