/* Embeddable widgets (embed/…): small, self-contained, light or dark. */
:root { --bg: #ffffff; --ink: #1d2230; --muted: #6b7183; --line: #d9dce4; --thick: #1d2230; --given: #1d2230; --user: #2f5bd8; --sel: #dfe7ff; --peer: #f1f3f8; --bad: #d64545; --accent: #2f5bd8; --on-accent: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #171a22; --ink: #e8eaf0; --muted: #9aa0b2; --line: #343a4a; --thick: #c9cdd8; --given: #e8eaf0; --user: #8fb0ff; --sel: #2a3552; --peer: #1f2430; --bad: #ff7b7b; --accent: #8fb0ff; --on-accent: #10131a; } }
:root[data-theme="dark"] { --bg: #171a22; --ink: #e8eaf0; --muted: #9aa0b2; --line: #343a4a; --thick: #c9cdd8; --given: #e8eaf0; --user: #8fb0ff; --sel: #2a3552; --peer: #1f2430; --bad: #ff7b7b; --accent: #8fb0ff; --on-accent: #10131a; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.e-wrap { max-width: 420px; margin: 0 auto; padding: 10px; display: grid; gap: 8px; }
.e-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.e-title { font-size: 1rem; }
.e-meta { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.e-grid { display: grid; grid-template-columns: repeat(9, 1fr); aspect-ratio: 1; border: 2px solid var(--thick); border-radius: 6px; overflow: hidden; user-select: none; }
.e-cell { appearance: none; border: 0; margin: 0; padding: 0; background: var(--bg); color: var(--user); font: inherit; font-size: clamp(14px, 5vw, 22px); font-weight: 600; display: grid; place-items: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.e-cell:nth-child(9n) { border-right: 0; }
.e-cell:nth-child(9n + 3), .e-cell:nth-child(9n + 6) { border-right: 2px solid var(--thick); }
.e-cell:nth-child(n + 19):nth-child(-n + 27), .e-cell:nth-child(n + 46):nth-child(-n + 54) { border-bottom: 2px solid var(--thick); }
.e-cell:nth-child(n + 73) { border-bottom: 0; }
.e-cell.given { color: var(--given); font-weight: 700; cursor: default; }
.e-cell.peer { background: var(--peer); }
.e-cell.same { background: var(--sel); }
.e-cell.sel { background: var(--sel); outline: 2px solid var(--accent); outline-offset: -2px; }
.e-cell.bad { color: var(--bad); }
.e-pad { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.e-pad button { appearance: none; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; font: inherit; font-size: 1.05rem; font-weight: 600; padding: 8px 0; cursor: pointer; }
.e-pad button:active { background: var(--sel); }
.e-msg { margin: 0; min-height: 1.4em; text-align: center; font-weight: 600; }
.e-msg a { color: var(--accent); }
.e-foot { text-align: center; font-size: .85rem; }
.e-foot a { color: var(--muted); text-decoration: none; }
.e-foot a b { color: var(--accent); }