:root {
  --bg: #0b0d10; --ink: #e8e4dc; --dim: #8b887f; --line: #23262b;
  --amber: #e5b567; --rust: #e0735a; --sage: #9cc2b2; --violet: #b9a7ff;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: start center; padding: max(24px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
main { width: 100%; max-width: 440px; text-align: center; }

.host { margin: 0 0 4px; color: var(--dim); font: 13px var(--mono); letter-spacing: .04em; }

.stage { margin: 0 auto; width: min(100%, 340px); aspect-ratio: 1; }
#ring { width: 100%; height: 100%; display: block; overflow: visible; }
.track { fill: none; stroke: var(--line); stroke-width: 1.5; }
[data-state="broken"] .track { stroke: var(--rust); stroke-dasharray: 3 9; stroke-width: 2; }
[data-state="off"] #ring { opacity: .35; }

.bead { transform-box: fill-box; transform-origin: center; }
.bead.k-call { color: var(--sage); }
.bead.k-refused { color: var(--rust); }
.bead.k-held { color: var(--amber); }
.bead.k-decided { color: var(--ink); }
.bead.k-key { color: var(--violet); }
.bead.k-idea { color: var(--dim); }
.bead.k-other { color: var(--dim); }
.bead * { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bead .solid { fill: currentColor; }
.bead.drop { animation: drop .7s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes drop { from { opacity: 0; transform: scale(2.6); } to { transform: scale(1); } }

#seal { transform-box: fill-box; transform-origin: center; animation: breathe 5.5s ease-in-out infinite; }
#seal rect { transition: fill .6s; }
.crack { stroke: var(--rust); stroke-width: 3; stroke-linecap: round; }
@keyframes breathe { 50% { transform: scale(1.035); } }

h1 { margin: 18px 0 4px; font-size: 1.55rem; line-height: 1.3; font-weight: 700; }
h2 { margin: 0 0 8px; font-size: .8rem; font-weight: 600; color: var(--dim); letter-spacing: .08em; }
[data-state="broken"] h1 { color: var(--rust); }
[data-state="off"] h1 { color: var(--dim); }
.sub { margin: 0 auto 26px; max-width: 34ch; color: var(--dim); }
.sub a { color: var(--amber); }

.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 0 30px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.nums div { background: var(--bg); padding: 14px 6px; }
.nums dt { font-size: .72rem; line-height: 1.35; color: var(--dim); min-height: 2.7em; display: grid; place-items: center; }
.nums dd { margin: 4px 0 0; font: 600 1.6rem/1 var(--mono); font-variant-numeric: tabular-nums; }

section { margin: 0 0 26px; }
.recent { list-style: none; margin: 0; padding: 0; text-align: start; border-block: 1px solid var(--line); }
.recent li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; border-bottom: 1px solid var(--line); }
.recent li:last-child { border-bottom: 0; }
.recent svg { flex: none; width: 18px; height: 18px; }
.recent .w { flex: 1; }
.recent .t { color: var(--dim); font: 13px var(--mono); font-variant-numeric: tabular-nums; }
.recent .empty { justify-content: center; color: var(--dim); }

.legend { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: .8rem; color: var(--dim); }
.legend li { display: flex; align-items: center; gap: 6px; }
.legend svg { width: 14px; height: 14px; }
.legend .sh, .recent .sh { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.legend .sh .solid, .recent .sh .solid { fill: currentColor; }
.c-call { color: var(--sage); } .c-refused { color: var(--rust); } .c-held { color: var(--amber); }
.c-decided { color: var(--ink); } .c-key { color: var(--violet); } .c-idea, .c-other { color: var(--dim); }

.live { margin: 0 0 18px; min-height: 1.6em; font: 12px var(--mono); color: var(--dim); }
footer { color: var(--dim); font-size: .8rem; border-top: 1px solid var(--line); padding-top: 16px; }
footer p { margin: 0 0 4px; }

@media (prefers-reduced-motion: reduce) {
  #seal, .bead.drop { animation: none; }
  #seal rect { transition: none; }
}
@media (min-width: 720px) { html { font-size: 17px; } body { padding-top: 56px; } }