:root { --bg: #f6f4ef; --ink: #23201a; --muted: #6f6a5d; --box: #ffffff; --line: #c9c2b3; --accent: #1d4ed8; --warn: #b45309; }
@media (prefers-color-scheme: dark) { :root { --bg: #17161a; --ink: #ece8df; --muted: #a39d8f; --box: #242229; --line: #4d4840; --accent: #93c5fd; --warn: #fbbf24; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 system-ui, sans-serif; }
header { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid var(--line); }
h1 { font-size: 16px; margin: 0; }
h2 { font-size: 15px; margin: 0 0 8px; }
h3 { font-size: 13px; margin: 14px 0 4px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
#clock { font-variant-numeric: tabular-nums; font-weight: 600; }
#you { color: var(--muted); }
#banner { margin: 0; padding: 8px 16px; background: var(--warn); color: var(--bg); font-weight: 600; }
#naming, #again { padding: 12px 16px; margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input, select, button { font: inherit; color: var(--ink); background: var(--box); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
button { cursor: pointer; }
button:disabled { opacity: 0.5; cursor: default; }
main { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { main { grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); } #around { border-left: 1px solid var(--line); } }
#story { padding: 8px 16px; }
#feed { list-style: none; margin: 0; padding: 0; max-height: 75vh; overflow: auto; }
#feed li { padding: 3px 0; }
#feed li.mark { color: var(--muted); font-style: italic; }
#around { padding: 12px 16px; }
.row { padding: 4px 0; }
.row > .who { font-weight: 600; }
.row .note { color: var(--muted); }
.acts { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.acts button { font-size: 13px; padding: 2px 8px; }
.choose { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; padding: 6px; border: 1px dashed var(--line); border-radius: 6px; }
.muted { color: var(--muted); }