:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#111310;color:#f4f3ec}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:4px}button,input{font:inherit;color:inherit;background:#20231e;border:1px solid #ffffff30;border-radius:0;min-height:42px}button{padding:0 14px;cursor:pointer}button:hover:not(:disabled){border-color:#ffbd77;color:#ffbd77}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ffbd77;outline-offset:3px}
header{display:flex;gap:28px;align-items:center;padding:18px 4vw;border-bottom:1px solid #ffffff24}.brand{flex-shrink:0}.brand img{width:66px;height:auto;display:block}.title{flex:1;min-width:0}.title p{font:10px monospace;color:#a6aa9f;letter-spacing:.15em;margin:0 0 8px}.title h1{font-size:22px;font-weight:500;margin:0}header>a:last-child{font-size:13px}
nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:14px 12px;background:#181b16}form{display:flex;align-items:center;gap:8px;margin:0}label,#total{font-size:13px;color:#c1c6b8}input{width:60px;text-align:center;padding:4px}output{font:12px monospace;color:#b2b6aa;min-width:45px}.separator{width:1px;height:25px;background:#ffffff30;margin:0 8px}#status{font-size:13px;text-align:center;color:#c5b6a1;min-height:18px;margin:10px 12px}#status.error{color:#ffb096}
main{padding:10px 20px 28px;overflow:auto;min-height:55vh;max-height:calc(100dvh - 215px);text-align:center;overscroll-behavior:contain}canvas{display:block;margin:auto;box-shadow:0 12px 45px #0007;background:white;max-width:none}canvas[hidden]{display:none}footer{font-size:11px;line-height:1.5;text-align:center;color:#999f91;padding:12px 20px;border-top:1px solid #ffffff18}noscript{display:block;padding:20px;text-align:center}
@media(max-width:650px){header{gap:16px;padding:14px}.brand img{width:52px}.title h1{font-size:18px}header>a:last-child{max-width:110px;font-size:12px;line-height:1.5}nav{gap:5px;padding:10px}button{padding:0 10px}form{gap:5px}.separator{margin:0 3px}#go{display:none}output{display:none}main{padding:5px 10px 20px;max-height:calc(100dvh - 225px)}footer{font-size:10px}}
