*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:#f6f4ec;color:#172e36;font:17px/1.6 system-ui,sans-serif}a{color:#07596a;text-underline-offset:4px}header,main,footer{max-width:1100px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid #ccd3cd}.brand{font-size:24px;font-weight:800;text-decoration:none}nav{display:flex;gap:22px;flex-wrap:wrap}.eyebrow{letter-spacing:.12em;text-transform:uppercase;font-size:12px;font-weight:750;color:#4b665c}h1{font-size:clamp(32px,6vw,62px);line-height:1.1;letter-spacing:-.035em;max-width:850px;margin:22px 0}h2{line-height:1.25}p{max-width:760px}.lead{font-size:21px;color:#42595b;max-width:730px}.hero{padding:35px 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}.card,.workspace{background:#fff;border:1px solid #c7d2cc;border-radius:16px;padding:26px}.card{text-decoration:none;display:block}.card h2{font-size:23px}.card:hover{border-color:#07596a}.workspace{margin:28px 0;max-width:850px;box-shadow:0 8px 24px #17362e08}.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}label{display:block;font-weight:650;margin:12px 0 5px}input,select,textarea,button{font:inherit;max-width:100%}input,select,textarea{width:100%;padding:11px;border:1px solid #829790;border-radius:7px;background:white;color:#172e36}textarea{min-height:140px;resize:vertical}input[type=color]{height:48px}input[type=checkbox]{width:auto}button,.button{border:0;border-radius:7px;padding:12px 20px;min-height:46px;background:#07596a;color:white;cursor:pointer;text-decoration:none;font-weight:650;margin:18px 8px 0 0}button:disabled{opacity:.5;cursor:default}:focus-visible{outline:3px solid #b35b18;outline-offset:4px}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:8px;background:white;padding:12px;z-index:2}.notice{border-left:4px solid #c77c28;padding:10px 18px;background:#fff3da}.result{white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;background:#eaf3ef;border-radius:9px;min-height:68px;font-size:20px;margin-top:22px}canvas{max-width:100%;height:auto;display:block;margin:20px auto}details{padding:16px 0;border-bottom:1px solid #ccd3cd}summary{cursor:pointer;font-weight:650}footer{border-top:1px solid #ccd3cd;margin-top:50px;font-size:14px}.guide{max-width:850px}.related{margin:35px 0}.related a{display:inline-block;margin:7px 18px 7px 0}.muted{font-size:14px;color:#42595b}fieldset{border:1px solid #c7d2cc;margin:20px 0;padding:18px;border-radius:8px}legend{font-weight:700}output{display:block}.preview{overflow:auto}#barcode-preview svg{min-width:300px;max-width:100%;height:auto} @media(max-width:550px){header,main,footer{padding:18px}header{align-items:flex-start;flex-direction:column}.workspace{padding:18px}.hero{padding:20px 0}button{width:100%}.fields{grid-template-columns:1fr}}