:root{--accent: #b4532a;--ink: #2b211c;--paper: #fdf7f2}*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;color:var(--ink);background:var(--paper)}main{max-width:420px;margin:0 auto;padding:32px 16px}.lead{color:#6b5a50}label{display:block;margin:16px 0;font-weight:600}input{display:block;width:100%;margin-top:6px;padding:12px;font-size:18px;border:1px solid #e2d3c6;border-radius:10px}.tips{display:flex;gap:8px}.tip{flex:1;padding:10px;border-radius:10px;border:1px solid var(--accent);background:#fff;color:var(--accent);font-size:16px}.tip.on{background:var(--accent);color:#fff}.result{background:#fff;border-radius:12px;padding:16px;border:1px solid #efe2d6}.each{font-size:20px}input,button{font-family:inherit}.tip{min-height:44px;cursor:pointer}input:focus-visible,.tip:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.result p{display:flex;justify-content:space-between;margin:8px 0}