:root { --bg: #f7f4ee; --ink: #1d2433; --dim: #6b6f7a; --accent: #3b5bdb; --card: #fffdf9; --line: #e3ded3; }
@media (prefers-color-scheme: dark) { :root { --bg: #14171f; --ink: #e9e6df; --dim: #9a9ca5; --accent: #8ea4ff; --card: #1c2029; --line: #2c313d; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 ui-serif, Georgia, serif; }
main { max-width: 680px; margin: 0 auto; padding: 28px 18px calc(40px + env(safe-area-inset-bottom)); }
h1 { font-size: 34px; margin: 0 0 6px; letter-spacing: .3px; }
.lede { color: var(--dim); margin: 0 0 22px; font-size: 16px; }
.lab { display: block; font: 600 13px ui-sans-serif, system-ui, sans-serif; color: var(--dim); margin-bottom: 6px; letter-spacing: .5px; }
textarea { width: 100%; font: 17px/1.5 ui-serif, Georgia, serif; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; resize: vertical; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0; }
.controls label { font: 13px ui-sans-serif, system-ui, sans-serif; color: var(--dim); }
output { float: right; color: var(--ink); }
input[type=range] { width: 100%; accent-color: var(--accent); }
.buttons { display: flex; gap: 10px; }
button { font: 600 16px ui-sans-serif, system-ui, sans-serif; border: 0; border-radius: 8px; padding: 12px 18px; background: var(--accent); color: #fff; cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
article { margin-top: 20px; min-height: 120px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
#lead { font-weight: 600; }
.stats { font: 13px ui-sans-serif, system-ui, sans-serif; color: var(--dim); min-height: 1.4em; }
details { margin-top: 22px; font-size: 15px; color: var(--dim); }
summary { cursor: pointer; font: 600 14px ui-sans-serif, system-ui, sans-serif; color: var(--ink); }
a { color: var(--accent); }