:root { color: #f3f0e8; background: #121310; font-family: Inter, ui-sans-serif, system-ui, sans-serif; --muted: #999d91; --line: #34372f; --panel: #1b1d18; --raised: #23261f; --lime: #c6ff48; --rose: #ff8d80; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 80% -10%, rgb(198 255 72 / 9%), transparent 35rem), #121310; }
button, input { font: inherit; }
button { color: inherit; }
.masthead, main { width: min(1440px, calc(100% - 40px)); margin-inline: auto; }
.masthead { display: flex; justify-content: space-between; gap: 40px; align-items: end; padding: 56px 0 36px; border-bottom: 1px solid var(--line); }
.eyebrow, .group-index { margin: 0 0 10px; color: var(--lime); font: 700 .72rem/1.2 ui-monospace, monospace; letter-spacing: .14em; }
h1 { max-width: 780px; margin: 0; font-size: clamp(2.6rem, 6vw, 6.2rem); font-weight: 620; line-height: .92; letter-spacing: -.06em; }
.lede { max-width: 640px; margin: 22px 0 0; color: var(--muted); line-height: 1.55; }
.progress { min-width: 210px; color: var(--lime); font-size: 2.6rem; font-variant-numeric: tabular-nums; }
.progress small { display: block; margin-top: 6px; color: var(--muted); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.summary { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.summary div { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-right: 1px solid var(--line); }
.summary div:first-child { padding-left: 0; } .summary div:last-child { border: 0; }
.summary strong { font-size: 1.8rem; } .summary span { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.controls { position: sticky; z-index: 4; top: 0; display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); background: rgb(18 19 16 / 92%); backdrop-filter: blur(14px); }
.tabs { display: flex; gap: 6px; overflow-x: auto; }
.tab, .verdict, .reset { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; white-space: nowrap; }
.tab { color: var(--muted); } .tab.active, .tab:hover { color: inherit; border-color: currentColor; }
.threshold { display: grid; grid-template-columns: auto 140px 2ch; align-items: center; gap: 10px; color: var(--muted); font-size: .82rem; }
.threshold input { accent-color: var(--lime); } .threshold output { color: inherit; }
.status { padding: 24px 0 14px; color: var(--muted); font-size: .85rem; }
.groups { display: grid; gap: 22px; padding-bottom: 72px; }
.group-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.group-card.is-appropriate { border-color: #607b25; } .group-card.is-not-appropriate { border-color: #774038; }
.group-header, .group-actions { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 20px; }
.group-header { border-bottom: 1px solid var(--line); } .group-header h2 { margin: 0; font-size: 1.2rem; }
.group-detail, .group-actions p { margin: 6px 0 0; color: var(--muted); font-size: .8rem; }
.distance { flex: none; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font: .7rem/1 ui-monospace, monospace; }
.frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1px; background: var(--line); }
.frame { position: relative; display: flex; min-width: 0; flex-direction: column; background: var(--raised); cursor: pointer; }
.frame:hover, .frame.selected { background: #23300c; }
.frame input { position: absolute; z-index: 2; top: 12px; right: 12px; width: 20px; height: 20px; accent-color: var(--lime); }
.visual { overflow: hidden; aspect-ratio: 1; background: #0c0d0b; }
.visual img { width: 100%; height: 100%; object-fit: cover; }
.frame-meta { display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 13px; }
.frame-meta strong { overflow: hidden; font: .76rem/1.3 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.frame-meta span { color: var(--muted); font-size: .7rem; } .frame-meta .keeper-label { margin-top: 4px; color: var(--lime); font-weight: 700; text-transform: uppercase; }
.group-actions { border-top: 1px solid var(--line); } .group-actions > div { display: flex; gap: 7px; }
.appropriate:hover, .appropriate[aria-pressed="true"] { color: #10120c; border-color: var(--lime); background: var(--lime); }
.reject:hover, .reject[aria-pressed="true"] { color: #17100f; border-color: var(--rose); background: var(--rose); }
@media (max-width: 720px) { .masthead { display: block; padding-top: 36px; } .progress { margin-top: 28px; } .summary { grid-template-columns: repeat(2, 1fr); } .summary div:nth-child(2) { border-right: 0; } .controls, .group-actions { align-items: stretch; flex-direction: column; } .threshold { grid-template-columns: auto 1fr 2ch; } .group-actions > div { overflow-x: auto; } }