:root {font-family:system-ui,"Microsoft YaHei",sans-serif;color:#202020;background:#f3f3f3;color-scheme:light}
* {box-sizing:border-box}
body {margin:0;min-height:100dvh;display:grid;place-items:center;padding:20px}
main {width:min(100%,390px);background:#fff;border-radius:24px;padding:32px;box-shadow:0 2px 5px #0000000d,0 16px 42px #00000014}
header,.label,.bounds {display:flex;align-items:center;justify-content:space-between}
header {justify-content:flex-start;gap:10px;font-size:18px}
.mark {background:#fff;border-radius:10px;padding:4px 10px;box-shadow:0 1px 4px #0002}
h1 {margin:36px 0 10px;font-size:32px;letter-spacing:.03em}
#status {background:#f7f7f7;border-radius:10px;padding:14px;line-height:1.6;margin:0 0 28px;box-shadow:inset 0 1px 3px #0000000d}
output {font-variant-numeric:tabular-nums;font-weight:bold}
select {width:100%;min-height:44px;margin:8px 0 18px;padding:0 10px;border:1px solid #aaa;border-radius:10px;color:inherit;background:#fff;font:inherit;box-shadow:0 1px 3px #0001}
input {width:100%;height:36px;accent-color:#333;margin:4px 0}
.bounds,.note {font-size:13px;color:#595959}
.bounds {margin-bottom:22px}
button {width:100%;min-height:48px;border:0;border-radius:12px;background:#262626;color:#fff;font:inherit;font-weight:650;cursor:pointer;margin-bottom:10px;box-shadow:0 2px 5px #0003}
button.secondary {color:#262626;background:#fff;box-shadow:0 0 0 1px #ddd,0 2px 4px #0001}
button:active:not(:disabled) {box-shadow:inset 0 1px 4px #0003}
button:disabled {color:#666;background:#eee;box-shadow:none;cursor:default}
:focus-visible {outline:2px solid #333;outline-offset:3px}
.note {line-height:1.6;margin:12px 0 0}