:root { --bg: #f4f2ee; --fg: #1d1d1b; --muted: #6b6a66; --line: #d9d6cf; --accent: #2d5bd7; }
@media (prefers-color-scheme: dark) { :root { --bg: #151514; --fg: #ecebe7; --muted: #9b9a95; --line: #33322f; --accent: #7c9cff; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.45 system-ui, sans-serif; }
main { display: flex; flex-wrap: wrap; gap: 24px; padding: 24px 16px; max-width: 1100px; margin: auto; }
.stage { position: relative; flex: 1 1 420px; max-width: 640px; }
canvas { width: 100%; aspect-ratio: 1; background: #000; border-radius: 8px; display: block; }
.overlay { position: absolute; inset: 0; margin: auto; width: 140px; height: 48px; font-size: 17px; }
.loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; background: rgba(0, 0, 0, .55); border-radius: 8px; text-align: center; padding: 16px; }
.loading[hidden] { display: none; }
.loading p { margin: 0; font-size: 17px; }
.loading progress { width: min(260px, 70%); }
.panel { flex: 1 1 280px; }
h1 { font-size: 20px; margin: 0 0 16px; }
.faces { display: flex; gap: 10px; margin-bottom: 16px; }
.faces button { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; width: 72px; height: 72px; background: none; cursor: pointer; }
.faces button[aria-checked="true"] { border-color: var(--accent); }
.faces img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
button, .btn { font: inherit; padding: 9px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); cursor: pointer; }
.btn[aria-pressed="true"] { background: #c0392b; color: #fff; border-color: #c0392b; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stats { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.stats dt { color: var(--muted); }
.stats dd { margin: 0; }
.status { color: var(--muted); }