:root { color-scheme: light dark; --bg:#fff; --fg:#1d1d1f; --mut:#6b7280; --line:#d9dce1; --acc:#2563a8; --chip:#eef2f8; }
@media (prefers-color-scheme: dark) { :root { --bg:#1e1f22; --fg:#f0f0f0; --mut:#a0a4ab; --line:#3a3c41; --acc:#6aa7e8; --chip:#2b2d31; } }
* { box-sizing: border-box; }
body { margin: 0; width: 300px; background: var(--bg); color: var(--fg); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
header { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; }
a { color: var(--acc); font-size: 12px; }
section { padding: 12px 14px; }
.big { display: flex; align-items: center; justify-content: center; gap: 14px; }
.big button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--chip); color: var(--fg); font-size: 22px; cursor: pointer; }
.big button:hover { border-color: var(--acc); }
output { font-size: 30px; font-weight: 700; min-width: 100px; text-align: center; font-variant-numeric: tabular-nums; }
#sl { width: 100%; margin: 10px 0 6px; accent-color: var(--acc); }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets button { flex: 1 0 auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--chip); color: var(--fg); cursor: pointer; font: inherit; }
.presets button:hover, .presets button.on { border-color: var(--acc); color: var(--acc); font-weight: 700; }
.small { color: var(--mut); font-size: 12px; margin: 4px 0 0; }
.opts { border-top: 1px solid var(--line); display: grid; gap: 8px; }
.opts label { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.opts select { font: inherit; padding: 3px 4px; background: var(--chip); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; max-width: 150px; }
.opts .chk { justify-content: flex-start; }
footer { padding: 0 14px 12px; }
[hidden] { display: none !important; }