* { box-sizing: border-box }
html { background: var(--paper) }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: 17.5px/1.62 var(--serif) }
a { color: var(--link); text-decoration: none }
a:hover { text-decoration: underline; text-underline-offset: 3px }
button { font: inherit; color: inherit }
.page { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: 32px 16px 64px }
.page.narrow { max-width: 760px }
.kicker { margin: 0; font: 600 12.5px var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--muted) }
.ptitle { font: 500 clamp(34px, 6vw, 48px)/1.1 var(--serif); letter-spacing: .01em; margin: 6px 0 8px }
.lede { color: var(--muted); font-size: 18px; margin: 0 0 24px; max-width: 46em }
.small { font-size: 15px }
.linkish { border: 0; background: none; padding: 0; color: var(--link); cursor: pointer; text-decoration: underline; font-size: inherit }

.hero { background: var(--cover); color: var(--gold); padding: 22px 16px 40px }
.frame { max-width: 860px; margin: 0 auto; border: 1px solid var(--gold-dim); outline: 1px solid var(--gold-dim); outline-offset: 5px; padding: clamp(28px, 6vw, 56px) clamp(18px, 5vw, 56px) 40px; text-align: center }
.hero h1 { margin: 0; font: 500 clamp(36px, 7vw, 60px)/1.05 var(--serif); color: var(--gold) }
@media (max-width: 480px) { .hero { padding: 14px 10px 28px } .frame { padding-left: 12px; padding-right: 12px } }
.hero hr { width: 120px; border: 0; border-top: 1px solid var(--gold-dim); margin: 18px auto }
.hero .tag { font-style: italic; font-size: clamp(17px, 2.2vw, 20px); color: var(--gold-ink); margin: 0 auto 22px; max-width: 30em; line-height: 1.4 }
.hero .gx-search { position: relative; max-width: 460px; margin: 0 auto }
.hero .gx-search input { width: 100%; font-size: 18px; padding: 12px 14px 12px 38px; background-position: 14px 50%; border-radius: 10px }
.hero .gx-results { left: 0; right: 0; width: auto; text-align: left }
.stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 26px; margin: 24px 0 0; padding: 0; list-style: none; font: 14px var(--sans); letter-spacing: .06em; color: var(--gold-ink) }
.stats b { display: block; font: 500 26px var(--serif); color: var(--gold); letter-spacing: 0 }
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 8px 0 44px }
.way { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); cursor: pointer; text-align: left; font: inherit }
.way:hover { border-color: var(--gold-dim); text-decoration: none; box-shadow: 0 6px 18px rgba(40, 35, 20, .08) }
.way b { font: 500 22px var(--serif) }
.way span { font: 15px/1.45 var(--sans); color: var(--muted) }
.section-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); margin: 0 0 16px; padding-bottom: 6px }
.section-h h2 { font: 500 26px var(--serif); margin: 0 }
.section-h button { border: 1px solid var(--line); background: var(--surface); border-radius: 7px; padding: 4px 12px; cursor: pointer; font: 15px var(--sans) }
.section-h button:hover { border-color: var(--gold-dim) }
.meet { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; margin-bottom: 44px; min-height: 240px }
.meet img { width: 200px; height: 250px; object-fit: cover; object-position: 50% 20%; border-radius: 3px; background: var(--sunk); box-shadow: 0 2px 10px rgba(40, 35, 20, .15) }
.meet h3 { font: 500 30px/1.15 var(--serif); margin: 0 }
.meet .when { font: 15px var(--sans); color: var(--muted); margin: 4px 0 10px }
.meet p { margin: 0 0 12px }
.meet .go { display: flex; gap: 18px; flex-wrap: wrap; font: 600 15px var(--sans) }
.recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 0 0 20px; padding: 0; list-style: none }
.recent li { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; font: 15px/1.45 var(--sans) }
.recent img { width: 100%; height: 170px; object-fit: cover; display: block; background: var(--sunk) }
.recent div { padding: 10px 12px }
.recent p { margin: 0 0 6px }
.recent .by { color: var(--muted); font-size: 13px }
@media (max-width: 640px) { .meet { grid-template-columns: 1fr } .meet .aiwrap, .meet > a { display: block; width: 100% } .meet img { width: 100%; height: 300px } }
@media (min-width: 561px) and (max-width: 1000px) { .ways { grid-template-columns: repeat(2, 1fr) } }

.shelf { list-style: none; margin: 0 0 34px; padding: 0 }
.shelf li { padding: 16px 0; border-top: 1px solid var(--line) }
.shelf li:last-child { border-bottom: 1px solid var(--line) }
.shelf a { font-size: 23px }
.shelf p a { font-size: inherit }
.shelf p { margin: 2px 0 0; color: var(--muted); font-style: italic; font-size: 16px }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 18px }
.pill { font: 13.5px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; cursor: pointer }
.pill span { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 2px }
.pill:hover:not(:disabled) { border-color: var(--gold-dim) }
.pill:focus { outline: none }
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.pill[aria-pressed="true"] { background: var(--cover); border-color: var(--cover); color: var(--gold) }
.pill[aria-pressed="true"] span { color: var(--gold-ink) }
.pill:disabled { opacity: .45; cursor: default }

.tabs { display: flex; gap: 6px; margin: 14px 0 18px; font: 15px var(--sans) }
.tabs button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 5px 14px; cursor: pointer }
.tabs button[aria-pressed="true"] { border-color: var(--gold-dim); background: var(--accent-soft) }
.item { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; margin-bottom: 12px; font: 16px/1.5 var(--sans) }
.item img { max-width: 100%; max-height: 420px; border-radius: 4px; display: block; margin: 8px 0 }
.item .who { color: var(--muted); font-size: 14px }
.item .acts { display: flex; gap: 8px; margin-top: 10px }
.item .acts button { border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: 5px 12px; cursor: pointer; font: 15px var(--sans) }
.item .acts .primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent) }
.shelf .lock { font: 14.5px var(--sans); font-style: normal; color: var(--muted); margin-top: 6px }

.cardfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 18px; font: 14px var(--sans); color: var(--muted) }
.filter { font: 16px var(--sans); width: min(320px, 100%); max-width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink) }
@media (max-width: 560px) { .filter { width: 100% } }
.years { display: flex; align-items: center; gap: 12px }
.years output { font-variant-numeric: tabular-nums; color: var(--ink); min-width: 92px }
.dual { position: relative; width: 220px; height: 24px }
.dual::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 3px; border-radius: 2px; background: var(--line) }
.dual input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none }
.dual input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); cursor: pointer }
.dual input::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); cursor: pointer }
.dual input::-webkit-slider-runnable-track { background: none }
.dual input::-moz-range-track { background: none }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 0 0 30px; padding: 0; list-style: none }
.cards > li { position: relative; display: flex; gap: 12px; align-items: center; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; min-width: 0 }
.cards > li:hover { border-color: var(--gold-dim) }
.start .kicker { margin: 4px 0 8px }
.start .cards { margin-bottom: 22px }
.cards .pic { position: relative; flex: none }
.cards .cover { flex: none; display: block }
.cards .thumbtools { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); display: flex; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); overflow: hidden }
.cards .thumbtools > * { display: grid; place-items: center; width: 22px; height: 20px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer }
.cards .thumbtools > * + * { border-left: 1px solid var(--line) }
.cards .thumbtools > :hover { color: var(--ink) }
.cards .thumbtools [aria-pressed="false"] { color: var(--gold-dim) }
.cards .thumbtools .busy { opacity: .4; pointer-events: none }
.cards .thumbtools svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.cards .cover img, .cards .cover i { width: 52px; height: 64px; object-fit: cover; object-position: 50% 20%; border-radius: 2px; display: grid; place-items: center; background: var(--sunk); font: 500 16px var(--serif); font-style: normal; color: var(--muted) }
.cards .title { display: block; font: 500 16px/1.18 var(--serif); color: var(--ink) }
.cards small { display: block; font: 13px/1.3 var(--sans); color: var(--muted); margin-top: 1px }
.cards .actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 4px; font: 600 12.5px/1.3 var(--sans) }
.cards .links { display: contents }
.cards .actions .lock { font-weight: 400; color: var(--muted); flex-basis: 100% }
.cards .actions .linkish { font: inherit; font-weight: 600 }

.biobook .stamp { font: 13px var(--sans); color: var(--muted); margin: -12px 0 22px }
.biobook .basis { font: 600 13.5px var(--sans); color: var(--ink); margin: 0 0 14px }
.biotoc h2 { font: 600 12.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 22px 0 6px }
.biotoc ol { margin: 0; padding-left: 22px; columns: 2 280px; column-gap: 28px; font: 14.5px/1.45 var(--sans) }
.biotoc li { break-inside: avoid; margin: 2px 0 }
.biotoc li span, .biomore li span { color: var(--muted); font-size: 12.5px }
.biomore { margin: 8px 0 0; padding-left: 22px; columns: 2 280px; column-gap: 28px; font: 14.5px/1.45 var(--sans) }
.biomore li { break-inside: avoid; margin: 2px 0 }
.biobook .part { font: 500 30px/1.15 var(--serif); margin: 56px 0 4px; padding-top: 22px; border-top: 1px solid var(--line) }
.bio { margin: 34px 0 0; display: flow-root; scroll-margin-top: 16px }
.bio h3 { font: 500 26px/1.15 var(--serif); margin: 0 }
.bio-sub { font: 13.5px var(--sans); color: var(--muted); margin: 4px 0 10px }
.bio-line { font: 15px/1.55 var(--sans); background: var(--sunk); border: 1px solid var(--line); border-radius: 6px; padding: 9px 13px; margin: 0 0 14px }
.bio-body { font: 16px/1.6 var(--sans) }
.bio-body .short { font-style: italic; color: var(--muted) }
.bio-body h2 { font: 500 19px/1.25 var(--serif); margin: 22px 0 6px }
.bio-body h3 { font: 600 15px var(--sans); margin: 16px 0 4px }
.bio-body img { max-width: 100%; border-radius: 4px }
.bio-body blockquote { margin: 12px 24px; padding: 0; font-style: italic }
.bio-body sup.ref { font-size: 11px; line-height: 0 }
.bio-body sup.ref a { text-decoration: none; color: var(--muted) }
.bio-pic { float: right; width: 170px; margin: 4px 0 12px 20px }
.bio-pic img { width: 100%; display: block; background: var(--sunk) }
.bio-pic figcaption { font: 12px/1.3 var(--sans); color: var(--muted); margin-top: 4px }
.bio .refs { clear: both; font: 13px/1.45 var(--sans); color: var(--muted); margin-top: 12px }
.bio .refs summary { cursor: pointer }
@media (max-width: 560px) { .bio-pic { width: 120px; margin-left: 14px } }
@media print { .gx-head, .gx-foot { display: none } .bio { break-inside: auto } .biobook .part { break-before: page } }

.genetics-page { max-width: 1060px }
.lock-note { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px }
.genetics { max-width: 760px; margin: 0 auto }
.genetics h1.gpart { font: 500 clamp(30px, 5vw, 40px)/1.15 var(--serif); margin: 56px 0 10px; padding-top: 22px; border-top: 1px solid var(--gold-dim) }
.genetics h2 { font: 500 25px/1.25 var(--serif); margin: 34px 0 8px }
.genetics p, .genetics li { hyphens: auto }
.genetics ul { padding-left: 1.2em }
.genetics li { margin-bottom: .45em }
.genetics figure { margin: 18px 0 22px }
.genetics figure svg, .gchart img { width: 100%; height: auto; display: block; background: #fbf8f1; border-radius: 4px }
.genetics figcaption { font: 13.5px/1.45 var(--sans); color: var(--muted); margin-top: 6px }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; margin: 26px calc(50% - min(520px, 50vw - 16px)) 6px; width: min(1040px, 100vw - 32px) }
.pgrid .panel { background: #fbf8f1; border-radius: 4px; padding: 6px 4px 2px; margin-bottom: 8px }
.pgrid svg { width: 100%; height: auto; display: block }
@media (max-width: 820px) { .pgrid { grid-template-columns: 1fr; margin-left: 0; margin-right: 0; width: 100% } }
.kin { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 14px 20px; margin: 0 0 4px; font-size: 19px }
.kin p { margin: 0 }
.allpgs { margin: 12px 0 }
.allpgs summary { cursor: pointer; font: 600 15px var(--sans); color: var(--link) }
.allpgs .pstack svg { width: 100%; height: auto; background: #fbf8f1 }
.tscroll { overflow-x: auto; margin: 10px 0 }
.genetics .ptable { border-collapse: collapse; font: 12.5px/1.35 var(--sans); min-width: 720px }
.genetics .ptable th, .genetics .ptable td { padding: 3px 6px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap }
.genetics .pcap { font: 13.5px/1.5 var(--sans); color: var(--muted) }
.cards > li.adminonly { background: var(--sunk); border-color: var(--line); filter: grayscale(1); opacity: .72 }
.cards > li.adminonly:hover { opacity: 1 }
.ghero { background: var(--sunk); color: var(--ink); border-radius: 10px; padding: 20px clamp(12px, 2.4vw, 26px) 16px; margin: 8px calc(50% - min(530px, 50vw - 16px)) 22px; width: min(1060px, 100vw - 32px) }
.hcols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start }
.hc { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px 10px; margin-bottom: 14px }
.hcols > div > .hc:last-child { margin-bottom: 0 }
.hc header, .tr, .ax { display: grid; grid-template-columns: minmax(120px, 43%) 1fr 54px 40px; gap: 10px; align-items: center }
.hc header { border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 2px }
.hc h3 { margin: 0; grid-column: 1 / 3; font: 500 20px/1.2 var(--serif); color: var(--c) }
.hc header span { font: 600 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: right }
.ax { height: 16px }
.ax em { position: absolute; transform: translateX(-50%); font: 10.5px var(--sans); font-style: normal; color: var(--muted); top: 1px }
.ax .tk { background: none }
.ax .tk::after { display: none }
.tr { min-height: 23px }
.tl { font: 15px/1.2 var(--serif); color: var(--ink); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tk { position: relative; height: 14px; background: linear-gradient(90deg, transparent 25%, var(--sunk) 25%, var(--sunk) 75%, transparent 75%); border-radius: 7px }
.tk::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line) }
.tk::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; border-left: 1px dashed var(--gold-dim) }
.tk .iv { position: absolute; top: 5px; height: 4px; border-radius: 2px; background: var(--c); opacity: .38 }
.tk .x { position: absolute; top: 4px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--c); opacity: .3 }
.tk b { position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--surface) }
.tp { font: 600 15px var(--sans); color: var(--c); text-align: right; font-variant-numeric: tabular-nums }
.tb { font: 13px var(--sans); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums }
.hnote { font: 13px/1.5 var(--sans); color: var(--muted); margin: 12px 2px 0 }
.hnote b { color: var(--ink) }
@media (max-width: 860px) { .hcols { grid-template-columns: 1fr } .ghero { margin-left: 0; margin-right: 0; width: 100% } }
@media (max-width: 480px) { .hc header, .tr, .ax { grid-template-columns: minmax(96px, 40%) 1fr 34px 32px; gap: 7px } .tl { font-size: 13.5px } .tp { font-size: 13.5px } .tb { font-size: 12px } }
.gappx { margin-top: 56px; border-top: 1px solid var(--gold-dim); padding-top: 18px }
.gappx > summary { cursor: pointer; list-style: none; font: 500 clamp(26px, 4vw, 34px)/1.2 var(--serif) }
.gappx > summary::-webkit-details-marker { display: none }
.gappx > summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--gold-dim); transition: transform .15s }
.gappx[open] > summary::before { transform: rotate(90deg) }
.gappx > summary small { font: 15px var(--sans); color: var(--muted); margin-left: 8px }
.gappx h1.gpart { display: none }
.libhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 36px; flex-wrap: wrap }
.libhead > div { flex: 1 1 380px }
.peek { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin: 0 0 24px; color: var(--link) }
.peek:hover { text-decoration: none }
.peek-row { display: flex; gap: 8px }
.peek img { width: 86px; height: 112px; object-fit: cover; object-position: 50% 22%; border-radius: 3px; border: 1px solid var(--line); background: var(--sunk); box-shadow: 0 3px 10px rgba(40, 35, 20, .14); transition: transform .15s }
.peek:hover img { transform: translateY(-2px) }
.peek-go, .libmore { font: 600 15px var(--sans) }
.libmore { margin: 6px 0 0 }
.libmore a { color: var(--link); text-decoration: none }
.libmore a:hover { text-decoration: underline; text-underline-offset: 3px }
.peek:hover .peek-go { text-decoration: underline; text-underline-offset: 3px }
@media (max-width: 720px) { .peek { align-items: flex-start; margin-top: -8px } .peek img { width: 70px; height: 92px } }
.tr[data-def] { position: relative; cursor: help; border-radius: 4px }
.tr[data-def]:hover, .tr[data-def]:focus { background: var(--sunk); outline: none }
.tr[data-def]:hover::after, .tr[data-def]:focus::after { content: attr(data-def); position: absolute; z-index: 30; left: 0; right: 0; bottom: calc(100% + 4px); padding: 8px 11px; background: var(--ink); color: var(--paper); font: 13.5px/1.4 var(--sans); border-radius: 6px; box-shadow: 0 8px 22px rgba(0, 0, 0, .22); pointer-events: none }
.gcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 30px }
.gcard { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 18px 20px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s }
.gcard:hover { border-color: var(--gold-dim); transform: translateY(-1px) }
.gcard[aria-selected="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 8px 24px rgba(40, 35, 20, .1) }
.gcard[aria-selected="false"] { opacity: .82 }
.gcard .gk { font: 500 clamp(22px, 3vw, 28px)/1.15 var(--serif) }
.gcard .gsub { font: 15px/1.4 var(--sans); color: var(--muted) }
.gcard img { width: 100%; height: 118px; object-fit: cover; object-position: 50% 30%; background: #fbf8f1; border-radius: 6px; border: 1px solid var(--line) }
.gcard ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px }
.gcard li { display: flex; align-items: baseline; gap: 5px; padding: 3px 10px; background: var(--sunk); border-radius: 999px; font: 13.5px var(--sans); color: var(--muted) }
.gcard li b { font: 600 15px var(--sans); color: var(--ink) }
.gcard .gwho { margin-top: auto; padding-top: 6px; font: 600 14px var(--sans); color: var(--accent) }
@media (max-width: 720px) { .gcards { grid-template-columns: 1fr } .gcard img { height: 90px } }
.gcards { margin-left: calc(50% - min(530px, 50vw - 16px)); margin-right: calc(50% - min(530px, 50vw - 16px)); width: min(1060px, 100vw - 32px) }
.gmini { height: 118px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 14px; background: var(--sunk); border-radius: 6px; border: 1px solid var(--line) }
.gmini .mr { display: grid; grid-template-columns: 104px 1fr 38px; gap: 10px; align-items: center; font: 14px var(--serif) }
.gmini .mr span:first-child { text-align: right }
.gmini .mr em { font: 600 13.5px var(--sans); font-style: normal; color: var(--c); text-align: right }
.gmini .tk { height: 12px; background: linear-gradient(90deg, transparent 25%, var(--surface) 25%, var(--surface) 75%, transparent 75%) }
.gmini .tk b { width: 10px; height: 10px; margin-left: -5px; top: 1px; box-shadow: 0 0 0 2px var(--sunk) }
@media (max-width: 720px) { .gcards { margin-left: 0; margin-right: 0; width: 100% } .gmini { height: auto } }
.gcard { gap: 6px; padding: 14px 18px 12px }
.gcard .gk { font-size: clamp(20px, 2.4vw, 24px) }
.gcard .gsub { font-size: 14px }
.gcard ul { margin-top: 2px }
.gcard .gwho { padding-top: 2px; font-size: 13.5px }
.gcards { margin-bottom: 24px }
.ghero:not(.all) .tr.mo { display: none }
.hmore { display: block; margin: 2px auto 0; padding: 6px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--link); font: 600 14px var(--sans); cursor: pointer }
.hmore:hover { border-color: var(--gold-dim) }
.forms { font-family: var(--sans) }
.forms section { margin: 22px 0; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px }
.forms h2 { font: 500 22px var(--serif); margin: 0 0 12px }
.forms .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.forms .stack { display: flex; flex-direction: column; gap: 10px }
.forms input[type=text], .forms input[type=number], .forms input[type=date], .forms textarea, .forms select { font: 15px var(--sans); padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink) }
.forms input[type=text] { min-width: 0; flex: 1; max-width: 420px }
.forms .filebtn { border: 1px solid var(--line); background: var(--paper); border-radius: 6px; padding: 7px 12px; cursor: pointer; font: 14px var(--sans); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.forms .filebtn input { display: none }
.forms .face { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--sunk); display: grid; place-items: center; font: 600 22px var(--sans); color: var(--muted) }
.forms .face img { width: 100%; height: 100%; object-fit: cover }
.forms .mine { list-style: none; padding: 0; margin: 0 }
.forms .mine li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line) }
.forms .mine li:first-child { border-top: 0 }
.forms .thumb { width: 52px; height: 52px; flex: none; object-fit: cover; border-radius: 4px; background: var(--sunk); display: grid; place-items: center; font: 600 12px var(--sans); color: var(--muted) }
.forms .what { flex: 1; min-width: 0 }
.forms .what b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.forms .what small { display: block; color: var(--muted); font: 13px/1.4 var(--sans) }
.forms .token { margin: 10px 0; padding: 10px 12px; background: var(--sunk); border-radius: 6px; font-size: 14px; overflow-wrap: anywhere }
.forms .token p { margin: 0 0 6px }
.forms .token button { font: 13px var(--sans); padding: 3px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer }
@media (max-width: 560px) { .forms .mine li { flex-wrap: wrap } .forms .mine li .what { flex: 1 1 calc(100% - 64px) } }
.forms .err { color: var(--danger); margin: 0 }
.forms p.small { margin: 6px 0 0 }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px }
.chips { display: contents }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; background: var(--accent-soft); border-radius: 999px; font: 14px var(--sans) }
.chip button { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--muted); padding: 0 4px }
.whofind { position: relative; flex: 1 1 180px }
.whofind input { width: 100%; font: 15px var(--sans); padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink) }
.whofind .whohits { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.16) }
.whofind { max-width: 420px }
.forms .unphoto { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 600 15px/1 var(--sans); cursor: pointer; display: grid; place-items: center; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.15) }
.forms .unphoto:hover { color: var(--danger); border-color: var(--danger) }
@media (max-width: 480px) {
  .hc header span { font-size: 0 }
  .hc header span::after { font-size: 9.5px; letter-spacing: .04em }
  .hc header span:nth-of-type(1)::after { content: "pct" }
  .hc header span:nth-of-type(2)::after { content: "boost" }
  .tl { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; font-size: 13.5px }
  .tr { min-height: 26px; padding: 1px 0 }
}
.albumgrid { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px }
.albumgrid li { aspect-ratio: 1; background: var(--sunk); border-radius: 4px; overflow: hidden }
.albumgrid img { width: 100%; height: 100%; object-fit: cover; display: block }
.albumgrid .doc a { display: grid; place-content: center; text-align: center; height: 100%; font: 600 18px var(--sans); color: var(--muted); text-decoration: none }
.albumgrid .doc span { display: block; font: 13px var(--sans); color: var(--link); margin-top: 4px }
.forms .hint { margin: -4px 0 14px; padding: 9px 12px; background: var(--accent-soft); border-radius: 6px; font: 14.5px/1.45 var(--sans); color: var(--ink) }
.item .acts .danger { margin-left: auto; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent) }
.item .acts .danger[data-sure] { background: var(--danger); color: var(--surface); border-color: var(--danger) }
.badge { display: inline-block; font: 12.5px var(--sans); padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--muted); vertical-align: 1px }
.badge.s-applied { background: #fdf0d5; color: #7a5a12 }
.badge.s-held { background: #f6dede; color: #8a2a2a }
.badge.s-reverted, .badge.s-rejected { background: #eee; color: #777 }
.item .diff { margin: 6px 0 0; padding-left: 18px; font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere }
.group { margin: 0 0 26px }
.group h2 { font: 600 18px var(--sans); margin: 0 0 8px }
.groupacts { display: flex; gap: 8px; margin: 0 0 12px }
.groupacts button { border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: 5px 12px; cursor: pointer; font: 15px var(--sans) }
.groupacts .primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent) }
.notice { background: var(--surface); border: 1px solid var(--gold-dim); border-radius: 4px; padding: 14px 18px; margin: 0 0 28px; font: 16px/1.5 var(--sans) }
.newsbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin: 0 0 22px; font: 14px var(--sans) }
.newsbar label { display: grid; grid-template-columns: minmax(0, 100%); gap: 3px; color: var(--muted); min-width: 0; max-width: 100% }
.newsbar select { max-width: 100% }
.newsbar select, .newsbar button { font: 15px var(--sans); padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink) }
.newsform { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 14px 18px; margin: 0 0 22px }
.newsform h2 { font: 500 22px var(--serif); margin: 0 }
.newsform summary { cursor: pointer; font: 16px var(--sans) }
.newsform p { margin: 10px 0 0; font: 15px/1.45 var(--sans) }
.newssetup label { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; font: 15px var(--sans) }
.newssetup label input[type=text], .newssetup select, .newssetup textarea { max-width: 460px }
.newssetup input[type=number] { max-width: 90px }
.newssetup label.check { flex-direction: row; align-items: center; gap: 8px }
.newssetup .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px }
.newsitem { border-top: 1px solid var(--line); padding: 16px 0; break-inside: avoid }
.newsitem h3 { font: 500 22px var(--serif); margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap }
.newsitem h3 small { font: 13px var(--sans); color: var(--muted) }
.newsitem p { margin: 0 0 10px }
.newsitem .albumgrid { margin: 8px 0 }
@media print { .newsbar, .newsform, .newsitem button { display: none } }

/* review page */
.tabs { overflow-x: auto; white-space: nowrap; scrollbar-width: none }
.tabs button { flex: none; white-space: nowrap }
.tabs .count { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 12.5px; line-height: 20px; text-align: center }
.group .hint, .item .hint { margin: 6px 0 10px; padding: 8px 12px; background: var(--accent-soft); border-radius: 6px; font: 14.5px/1.45 var(--sans); color: var(--ink) }
.item.removal { border-color: var(--danger, #a12b2b); border-left-width: 4px }
.item .acts .danger, .groupacts .danger { color: var(--danger, #a12b2b); border-color: var(--danger, #a12b2b) }
.item.removal .acts .danger { margin-left: 0; background: var(--danger, #a12b2b); color: #fff }
.item .warn { color: var(--danger, #a12b2b) }
.item .rbody { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid var(--line); color: var(--ink); font-size: 15px; white-space: pre-line }
.rthumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px }
.item img.rthumb { width: 64px; height: 64px; object-fit: cover; margin: 0; border-radius: 4px; background: var(--sunk) }
.subhead { font: 600 18px var(--sans); margin: 28px 0 10px }
.more { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 6px 14px; cursor: pointer; font: 15px var(--sans); color: var(--ink) }
.groupacts, .item .acts { flex-wrap: wrap }
@media (prefers-color-scheme: dark) { :root .badge.s-applied { background: #4a3c17; color: #f1d58f } :root .badge.s-held { background: #4b2323; color: #f2b3b3 } :root .badge.s-reverted, :root .badge.s-rejected { background: #33352f; color: #c9c3b0 } }
.badge.s-reverted, .badge.s-rejected { color: #5f5f5f }

.linkform h2 { margin: 0 0 6px }
.linkform label { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; font-size: 15px }
.linkform label input[type=text], .linkform select { max-width: 420px }
.linkform label.check { flex-direction: row; align-items: flex-start; gap: 8px }
.linkform label.check input { margin-top: 4px }
.invitelink.dead { opacity: .65 }
.invitelink .linkrow { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap }
.invitelink .linkrow input { flex: 1 1 240px; min-width: 0; font: 14px var(--sans); padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink) }
.invitelink .linkrow button { border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: 5px 12px; cursor: pointer; font: 15px var(--sans); color: var(--ink) }
.invitelink .linkrow .danger { color: var(--danger) }

.settings { max-width: 720px; font-size: 15px }
.settings .linkish, .settings label.muted { font-size: 14px }
.settings section, .settings .tokens { margin: 16px 0; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px }
.settings h2 { font: 500 20px var(--serif); margin: 0 }
.settings p { margin: 0 }
.settings .caption { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 14px 0 8px }
.settings .you { display: flex; gap: 18px; align-items: center }
.settings .face { width: 76px; height: 76px; flex: none; border-radius: 50%; overflow: hidden; background: var(--sunk); cursor: pointer; display: block }
.settings .face span, .settings .face i { display: grid; place-items: center; width: 100%; height: 100%; font: 600 24px var(--sans); font-style: normal; color: var(--muted) }
.settings .face img { width: 100%; height: 100%; object-fit: cover; display: block }
.settings .face:hover { box-shadow: 0 0 0 2px var(--accent) }
.settings .whoami { flex: 1; min-width: 0 }
.settings .whoami input { width: 100%; max-width: none; font: 500 22px var(--serif); padding: 2px 6px; margin-left: -7px; border: 1px solid transparent; background: none; border-radius: 6px }
.settings .whoami input:hover { border-color: var(--line) }
.settings .whoami input:focus { border-color: var(--accent); background: var(--paper); outline: none }
.settings .whoami .muted { font-size: 14px; margin-top: 2px; overflow-wrap: anywhere }
.settings .faceacts { display: flex; gap: 14px; margin-top: 6px; font-size: 14px }
.settings .err { margin-top: 6px; font-size: 14px }
.newsstatus { margin: 14px 0 4px; padding: 12px 14px; background: var(--sunk); border-radius: 8px; font-size: 14px; line-height: 1.5 }
.newsstatus p + p { margin-top: 6px }
.newsstatus .warn { color: var(--danger, #a33) }
.invitefamily textarea { width: 100%; max-width: none; box-sizing: border-box }
.invitefamily .addrow { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 10px }
.invrows { list-style: none; padding: 0; margin: 10px 0 0 }
.invrows li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--line) }
.invrows li:first-child { border-top: 0 }
.invrows .invemail { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; font: 14px var(--sans) }
.invrows .whofind { position: relative; flex: 1 1 220px }
.invrows .whofind input { width: 100%; max-width: none; box-sizing: border-box }
.invrows .err { flex: 1 1 100%; margin: 0 }
.settings .switch { display: flex; align-items: center; gap: 14px; cursor: pointer }
.settings .switch span { flex: 1 }
.settings .switch b { display: block; font-weight: 600 }
.settings .switch small { display: block; color: var(--muted); font-size: 14px }
.settings .switch input { position: absolute; opacity: 0; pointer-events: none }
.settings .switch i { flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s }
.settings .switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s }
.settings .switch input:checked + i { background: var(--accent) }
.settings .switch input:checked + i::after { transform: translateX(16px) }
.settings .switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px }
.settings .groups { list-style: none; margin: 0; padding: 0 }
.settings .groups li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px }
.settings .groups li:first-child { border-top: 0 }
.settings .groups small { color: var(--muted); font-size: 13px }
.settings .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.settings button.primary { border: 0; border-radius: 8px; padding: 7px 14px; font: 600 14px var(--sans); cursor: pointer }
.settings .add { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px }
.settings .add .caption { margin: 0 }
.settings .add input[type=text], .settings .add textarea { max-width: none; width: 100% }
.settings .addrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.settings .add .addrow .filebtn { margin-right: auto }
.settings .mine { margin-top: 14px }
.settings .mine li { padding: 10px 0 }
.settings .mine .empty { display: block; padding: 4px 0 }
.settings .mine select { font-size: 13px; padding: 4px 6px }
.settings .days { margin-top: 14px }
.settings .day { border-top: 1px solid var(--line) }
.settings .day:first-child { border-top: 0 }
.settings .day summary { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none }
.settings .day summary::-webkit-details-marker { display: none }
.settings .day summary::before { content: "›"; font-size: 20px; color: var(--muted); transition: transform .15s; width: 10px }
.settings .day[open] summary::before { transform: rotate(90deg) }
.settings .day .when { display: grid; flex: 1; min-width: 0 }
.settings .day .when small { color: var(--muted) }
.settings .day .faces { display: flex; gap: 4px }
.settings .day .faces img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px }
.settings .day[open] .faces { display: none }
.settings .day .mine { margin: 0 0 8px 22px }
@media (max-width: 560px) { .settings .day .faces img:nth-child(n+4) { display: none } .settings .day .mine { margin-left: 0 } }
.settings .tokens summary { cursor: pointer; font: 500 17px var(--serif); color: var(--muted) }
.settings .tokens[open] summary { color: var(--ink); margin-bottom: 4px }
.settings .tokens .addrow input[type=text] { flex: 1 1 220px; max-width: none }
@media (max-width: 560px) {
  .settings section, .settings .tokens { padding: 16px }
  .settings .you { gap: 14px }
  .settings .face { width: 60px; height: 60px }
  .settings .whoami input { font-size: 19px }
}

.sharepics { list-style: none; padding: 0; margin: 4px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px }
.sharepics li { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--sunk) }
.sharepics img { width: 100%; height: 100%; object-fit: cover; display: block }
.sharepics button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; font: 600 16px/26px var(--sans); cursor: pointer }
.newsnext { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 14px 18px; margin: 0 0 22px }
.newsnext p { margin: 0 0 10px }
.newssummary { font: 19px/1.55 var(--serif); margin: 0 0 18px }
.settings .groups li > span { flex: 1 1 260px; min-width: 0 }
.settings .groups li > span small { display: block }
.settings .groups .grm { margin-left: 8px; font-size: 13px }
.groupadd { position: relative; margin-top: 10px }
.groupadd input { width: 100%; max-width: 460px }

details.group { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface) }
details.group > summary { list-style: none; cursor: pointer }
details.group > summary::-webkit-details-marker { display: none }
details.group > summary h2 { margin: 0 }
details.group > summary h2::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--muted); transition: transform .15s }
details.group[open] > summary h2::before { transform: rotate(90deg) }
details.group .gpeek { margin: 4px 0 0; font: 14px/1.4 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
details.group[open] .gpeek { display: none }
details.group > summary .groupacts { margin: 8px 0 2px }
details.group[open] > summary { margin-bottom: 10px }
.startform { font-family: var(--sans); display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px }
.startform h2 { margin: 0 }
.startform p { margin: 0 }
.startform label { display: flex; flex-direction: column; gap: 6px; font-weight: 600 }
.startform label .muted { font-weight: 400 }
.startform input { font: 16px var(--sans); padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink) }
.startform .acts { display: flex }
.leave .danger { font: 14px var(--sans); padding: 7px 12px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); background: var(--paper); cursor: pointer }
.leave .danger[data-sure] { background: var(--danger); color: var(--surface) }
.prose h2 { font: 500 24px var(--serif); margin: 32px 0 8px }
.prose ul { padding-left: 20px; line-height: 1.6 }
.prose li { margin: 6px 0 }

.quickstart { margin: 8px 0 36px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font-family: var(--sans) }
.quickstart h2 { font: 500 26px var(--serif); margin: 0 0 6px }
.quickstart fieldset { border: 0; border-top: 1px solid var(--line); margin: 16px 0 0; padding: 12px 0 0; display: grid; gap: 10px }
.quickstart legend { font: 600 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-right: 8px }
.quickstart label { display: grid; gap: 4px; font-size: 14px }
.quickstart .qsname { grid-template-columns: 170px 1fr 84px; align-items: center; gap: 8px }
.quickstart .qsname:not(:has(.qsborn)) { grid-template-columns: 170px 1fr }
.quickstart input, .quickstart textarea { font: 15px var(--sans); padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); min-width: 0 }
.quickstart .primary { margin-top: 16px }
@media (max-width: 600px) { .quickstart .qsname, .quickstart .qsname:not(:has(.qsborn)) { grid-template-columns: 1fr 84px } .quickstart .qsname:not(:has(.qsborn)) { grid-template-columns: 1fr } .quickstart .qsname span { grid-column: 1 / -1 } }
.quickstart .qsimport { margin: 12px 0 4px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px }
.quickstart .qsimport p { margin: 0 0 10px }
.quickstart .qsimport .filebtn { display: inline-block; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 14px }
.quickstart .qsfound { margin: 10px 0 0 }
.quickstart .qsfound .primary { margin: 0 8px 0 6px; padding: 6px 12px }
.deltree { flex-basis: 100%; margin: 8px 0 4px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); border-radius: 6px; font: 15px/1.45 var(--sans) }
.deltree p { margin: 0 0 8px }
.deltree .acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.deltree input { font: 15px var(--sans); padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); min-width: 0; flex: 1 1 140px }
.deltree .danger { font: 600 14px var(--sans); padding: 7px 12px; border-radius: 6px; border: 0; background: var(--danger); color: #fff; cursor: pointer }
.treename { display: grid; gap: 10px; max-width: 460px }
.treename label { display: grid; gap: 4px; font-weight: 500 }
.treename .addr { display: flex; align-items: center; gap: 2px; font-weight: 400 }
.treename .addr input { flex: 1; min-width: 0 }
.treename button { justify-self: start }
.hero.front { padding-bottom: 34px }
.hero.front .tag { margin-bottom: 26px }
.signedin .hero.front .frame { padding-top: clamp(22px, 4vw, 36px); padding-bottom: clamp(22px, 4vw, 36px) }
.signedin .hero.front .tag { margin-bottom: 18px }
.heroacts { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap }
.herobtn { font: 600 16px var(--sans); background: var(--gold); color: var(--cover); border: 0; border-radius: 8px; padding: 11px 22px; cursor: pointer }
.herobtn:hover { filter: brightness(1.08) }
.herolink { font: 16px var(--sans); color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px }
.page.front { max-width: 980px }
.treecards { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px }
.treecard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s }
.treecard:hover { border-color: var(--gold-dim); box-shadow: 0 6px 18px rgba(40, 35, 20, .08) }
.treecard .cover { position: absolute; inset: 0; z-index: 1 }
.treecard .faces, .featfaces { display: flex; height: 96px; background: var(--cover) }
.treecard .faces img, .featfaces img { flex: 1; min-width: 0; height: 100%; object-fit: cover; object-position: 50% 25% }
.treecard .faces img.nofaces, .featfaces img.nofaces { flex: 0 0 auto; width: 56px; margin: auto; height: 56px; object-fit: contain; opacity: .8 }
.treecard .body { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1 }
.treecard h3 { margin: 0; font: 500 23px/1.2 var(--serif) }
.treecard .meta, .featured .meta { margin: 0; font: 14px var(--sans); color: var(--muted) }
.treecard .cardacts { margin: 8px 0 0; display: flex; justify-content: space-between; align-items: baseline; font: 14px var(--sans); margin-top: auto; padding-top: 8px }
.treecard .open { color: var(--link); font-weight: 600 }
.treecard .del, .treecard .deltree, .treecard [data-restore] { position: relative; z-index: 2 }
.treecard .del { color: var(--danger) }
.treecard.gone { opacity: .75 }
.treecard.gone h3 { text-decoration: line-through; color: var(--muted) }
.featured { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 8px 0 36px; scroll-margin-top: 80px }
.featfaces { display: flex; height: clamp(110px, 18vw, 170px); gap: 2px; background: var(--cover) }
.featfaces img { flex: 1; min-width: 0; height: 100%; object-fit: cover; object-position: 50% 25% }
@media (max-width: 600px) { .featfaces img:nth-child(n+5) { display: none } }
.featbody { padding: 22px 26px; display: flex; flex-direction: column; gap: 8px; justify-content: center; font-family: var(--sans) }
.featbody .kicker { margin: 0; font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.featbody h2 { margin: 0; font: 500 30px/1.15 var(--serif) }
.featbody p { margin: 0 }
.featbody .primary { display: inline-block; margin-top: 8px; text-decoration: none }
.points { list-style: none; padding: 0; margin: 8px 0 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; font-family: var(--sans) }
.points li { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 14px }
.points b { font: 500 21px var(--serif) }
.points span { color: var(--muted); font-size: 15px; line-height: 1.5 }
.startform .acts { gap: 14px; align-items: center }
@media (max-width: 700px) { .points { grid-template-columns: 1fr } }
.photobar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 22px 0 14px; font: 15px var(--sans) }
.photobar .upload { display: inline-block; cursor: pointer; padding: 7px 14px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: 600 15px var(--sans) }
.photobar .whofind { flex: 0 1 240px }
.photobar select { font: 15px var(--sans); padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink) }
.photobar .check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted) }
.photobar .count { margin-left: auto }
.status { font: 14.5px var(--sans); padding: 8px 12px; background: var(--accent-soft); border-radius: 6px }
.photogrid { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px 14px }
.photogrid > li > button { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--sunk); cursor: zoom-in }
.photogrid img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; transition: transform .2s }
.photogrid > li > button:hover img { transform: scale(1.03) }
.photogrid .count { position: absolute; right: 6px; bottom: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font: 12px var(--sans) }
.photogrid p { margin: 6px 2px 0; font: 13.5px/1.35 var(--sans) }
.photogrid p b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.photogrid p small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.photogrid .none { grid-column: 1 / -1 }
.photogrid > li { min-width: 0 }
.dropping { outline: 3px dashed var(--accent); outline-offset: -4px; border-radius: 8px }
.photodialog { width: min(980px, calc(100vw - 32px)) }
.photoedit { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; padding: 18px }
.photoedit .pic img { width: 100%; max-height: 70vh; object-fit: contain; background: var(--sunk); border-radius: 6px; display: block }
.photoedit .fields { display: grid; gap: 12px; align-content: start }
.photoedit label { display: grid; gap: 4px; font: 14px var(--sans); color: var(--muted) }
.photoedit input, .photoedit textarea, .photoedit select { font: 15px var(--sans); padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink) }
.photoedit .chip a { color: inherit; text-decoration: none }
.photoedit .acts { display: flex; gap: 8px; flex-wrap: wrap }
.photoedit .acts button { font: 15px var(--sans); padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer }
.photoedit .acts .primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.photoedit .acts .danger { margin-left: auto; color: var(--danger) }
.photoedit .acts .danger[data-sure] { background: var(--danger); color: var(--surface); border-color: var(--danger) }
@media (max-width: 720px) { .photoedit { grid-template-columns: 1fr } .photobar .count { margin-left: 0 } .photogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px } }
.photogrid .kinpct { float: right; margin-left: 6px; font: normal 11px var(--sans); color: var(--muted); opacity: .75 }