:root{--bg:#f6f5f1;--fg:#1d1d1b;--mut:#6b6b66;--acc:#2f5d62;--line:#d8d6cf;--card:#fff}
@media (prefers-color-scheme:dark){:root{--bg:#161615;--fg:#ecebe6;--mut:#9a9a93;--acc:#6fb3ba;--line:#34342f;--card:#1f1f1d}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,sans-serif}
main{max-width:860px;margin:0 auto;padding:16px}
h1{font-size:1.4rem;margin:.2em 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin:12px 0}
label{display:block;font-weight:600;margin-top:10px}
small{color:var(--mut)}
input[type=range]{width:100%}
select{padding:6px;font:inherit}
.bar{height:14px;background:var(--line);border-radius:7px;overflow:hidden;margin:4px 0 2px}
.bar i{display:block;height:100%;background:var(--acc)}
.row{margin:10px 0}
.nr{display:inline-block;width:1.6em;color:var(--mut)}
button{font:inherit;margin-top:6px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);cursor:pointer}
.note{color:var(--mut);font-size:.9rem}
.la-leiste{display:flex;gap:1rem;flex-wrap:wrap;padding:.5rem 1rem;font:14px/1.4 system-ui,sans-serif;border-bottom:1px solid rgba(128,128,128,.35)}.la-leiste a{text-decoration:none}.la-leiste a:hover{text-decoration:underline}.la-fuss{padding:.8rem 1rem;font:12px/1.4 system-ui,sans-serif;opacity:.75}