/* Words: a typewriter page. The text box is the paper; counts sit below in a row of big figures like a tally. */
:root { --page: #f4f2ee; --card: #ffffff; --ink: #1b1a17; --soft: #5d5a52; --line: #d9d5cb; --field: #ffffff; --act: #3d3a8f; --on-act: #ffffff; --stop: #b3261e; --wide: 760px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #131210; --card: #1c1b18; --ink: #efece5; --soft: #a8a499; --line: #34322c; --field: #1c1b18; --act: #aeaaf5; --on-act: #15134a; --stop: #ff8a80; color-scheme: dark; }
}
#text { min-height: 240px; border: 1px solid var(--line) !important; border-radius: 8px !important; padding: 16px !important; font: 17px/1.6 Georgia, "Times New Roman", serif !important; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0; }
.stats div { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.stats dt { color: var(--soft); font-size: 14px; } .stats dd { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.limits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.limits li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 15px; }
.limits .bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.limits .bar i { display: block; height: 100%; background: var(--act); } .limits .over .bar i { background: var(--stop); } .limits .over b { color: var(--stop); }