:root{--bg:#f6f7f9;--fg:#111317;--muted:#5f6670;--panel:#e9ebef;--accent:#0b63ce;--border:#c5cad2}
@media (prefers-color-scheme:dark){:root{--bg:#0d0f12;--fg:#eef0f3;--muted:#9aa1ac;--panel:#1a1d22;--accent:#6aa8ff;--border:#343944}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.5}
main{max-width:46rem;margin:0 auto;padding:2rem 1rem 3rem}
h1{font-size:1.1rem;font-weight:600;letter-spacing:.08em;color:var(--muted);margin:0 0 1rem}
h2{font-size:1rem;margin:2rem 0 .5rem}
.value{display:block;min-height:3.5rem;padding:1rem;background:var(--panel);border:1px solid var(--border);border-radius:.5rem;font:1.35rem/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;word-break:break-all}
.options{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;margin:1rem 0 .5rem}
.field{display:flex;flex-direction:column;gap:.25rem}
label{font-size:.85rem;color:var(--muted)}
select,input,button{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:.4rem;padding:.45rem .6rem}
input[type=number]{width:6.5rem}
button{cursor:pointer;background:var(--panel)}
button:hover{border-color:var(--accent)}
:focus{outline:2px solid var(--accent);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
select:disabled,input:disabled{opacity:.5}
.status{min-height:1.5rem;margin:.25rem 0;color:var(--muted);font-size:.9rem}
.note{color:var(--muted);font-size:.9rem}
pre{padding:.75rem 1rem;background:var(--panel);border:1px solid var(--border);border-radius:.5rem;overflow-x:auto}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem}