:root{color-scheme:dark;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f4f4f4;background:#101112;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}a{color:inherit;text-decoration:none}.topbar{height:100px;max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #27282a}.brand{font-size:25px;font-weight:750;letter-spacing:-1px;display:flex;align-items:center}.brandmark{font-size:37px;margin-right:12px;line-height:1}.muted{color:#77797d}.header-note{font-size:13px;color:#929499}main{max-width:1060px;margin:62px auto 0;padding:0 36px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:650;color:#a9abb0}.intro h1{font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-1.9px;font-weight:600;margin:15px 0}.intro p{color:#9d9fa4;font-size:16px;line-height:1.6;margin:0 0 34px}.workspace{display:grid;grid-template-columns:1.2fr 1fr;border:1px solid #343537;border-radius:18px;overflow:hidden;background:#17181a}.editor{padding:32px 36px}.section-heading{display:flex;align-items:center;gap:12px}.step{color:#8a8d92;border:1px solid #383a3e;border-radius:6px;font:12px ui-monospace,monospace;padding:5px 6px}h2{font-size:16px;font-weight:550;margin:0}.editor>label{display:block;font-size:14px;color:#c5c6ca;margin:24px 0 10px}textarea{display:block;resize:vertical;min-height:150px;max-height:350px;width:100%;border:1px solid #3c3e42;border-radius:9px;background:#111214;color:#f1f1f1;padding:17px;line-height:1.6;font-size:16px}textarea::placeholder{color:#777a81}textarea:focus{outline:2px solid #bfc1c7;outline-offset:2px}.input-meta{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#8e9198;margin-top:10px}.size-heading{display:flex;align-items:center;justify-content:space-between;margin:30px 0 18px}.unit{color:#7f8289;font:12px ui-monospace,monospace}.sizes{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.sizes label{position:relative;cursor:pointer}.sizes input{position:absolute;opacity:0;width:100%;height:100%;margin:0}.sizes span{display:block;text-align:center;border:1px solid #3a3c41;border-radius:7px;padding:12px 4px;color:#a8abb2;font-size:14px}.sizes input:checked+span{background:#ededed;border-color:#ededed;color:#111;font-weight:650}.sizes input:focus-visible+span{outline:2px solid white;outline-offset:3px}.size-help{font-size:12px;color:#91949b;margin:13px 0 27px}.generate{width:100%;border:1px solid #f4f4f4;border-radius:8px;padding:15px 18px;background:#f1f1f1;color:#111;font-size:14px;font-weight:650;display:flex;align-items:center;justify-content:space-between}.generate span{font-size:21px;line-height:16px}.generate:hover{background:white}button:focus-visible,a:focus-visible{outline:2px solid white;outline-offset:4px}#message{font-size:13px;color:#c9cbd0;line-height:1.5;margin:12px 0 0;min-height:20px}#message.error{color:#ffadad}.preview-panel{border-left:1px solid #343537;padding:30px 35px 24px;background:radial-gradient(ellipse at center,#242629 0%,#1b1c1f 75%);display:flex;flex-direction:column}.preview-heading{display:flex;align-items:center;justify-content:space-between}.preview-heading .eyebrow{font-size:11px;letter-spacing:1.6px}#preview-status{font:10px ui-monospace,monospace;color:#a9acb2;border:1px solid #43464c;border-radius:4px;padding:4px 6px}.qr-stage{display:flex;align-items:center;justify-content:center;flex:1;padding:30px 0 20px}.qr-paper{width:256px;max-width:100%;aspect-ratio:1;background:white;border-radius:10px;padding:8px;box-shadow:0 14px 35px #0004;display:grid;place-items:center;overflow:hidden}.qr-paper img{width:100%;height:100%;object-fit:contain;display:none;image-rendering:pixelated}#placeholder{color:#777;font-size:14px;text-align:center;padding:24px}.image-details{display:flex;justify-content:center;gap:14px;color:#a8aab0;font:12px ui-monospace,monospace;margin:0 0 25px}.image-details span+span{border-left:1px solid #50525a;padding-left:14px}#download{display:flex;gap:10px;justify-content:center;align-items:center;background:#24262a;border:1px solid #4b4e55;color:#f3f3f3;font-size:14px;font-weight:550;border-radius:8px;padding:14px;width:100%}#download:hover:enabled{background:#303238}.preview-help{font-size:12px;color:#8e9198;text-align:center;margin:13px 0 0}.under-note{color:#8c8f96;display:flex;justify-content:center;align-items:center;gap:9px;font-size:13px;margin:24px 0 50px}.under-note span{font-size:21px;color:#bec0c4}footer{max-width:1120px;margin:auto;border-top:1px solid #27282a;display:flex;justify-content:space-between;padding:24px 0 30px;font-size:12px;color:#787c83}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:720px){.topbar{height:80px;padding:0 24px}.header-note{display:none}main{margin-top:35px;padding:0 20px}.workspace{grid-template-columns:1fr}.editor{padding:26px 24px}.preview-panel{border-left:0;border-top:1px solid #343537;padding:26px 24px}.qr-stage{padding:28px 0 22px}.input-meta{font-size:11px}.under-note{font-size:12px;margin-bottom:35px}footer{margin:0 20px;gap:20px;line-height:1.5}.intro h1{letter-spacing:-1.2px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}
[hidden]{display:none!important}.mode-switch{display:inline-flex;gap:4px;padding:5px;background:#1b1c1f;border:1px solid #343537;border-radius:10px;margin:0 0 22px}.mode-switch button{display:flex;align-items:center;gap:22px;border:0;border-radius:6px;padding:11px 17px;background:transparent;color:#a9abb0;font-size:14px}.mode-switch button[aria-pressed=true]{background:#ededed;color:#151618;font-weight:600}.upload-box{border:1px dashed #50535b;border-radius:10px;text-align:center;padding:24px 15px;margin-bottom:24px;background:#111214}.upload-symbol{font-size:30px;color:#d2d4da}.upload-box p{font-size:14px}
.upload-box input{
    
  display: block;
  margin: 0 auto;
  font-size: 13px;
  color: #a9abb0;
}
.upload-box input::file-selector-button {
  background: #2d2f34;
  border: 1px solid #545760;
  border-radius: 6px;
  color: #ededed;
  padding: 9px 12px;
  margin-right: 10px;
  cursor: pointer;
  vertical-align: middle;
}


.upload-box input:focus-visible{
      display: block;
  margin: 0 auto;
  width: max-content;
  max-width: 100%;
  font-size: 13px;
  color: #a9abb0;
  
}
#upload-preview{display:block;max-width:100%;height:130px;object-fit:contain;margin:0 auto 24px;border-radius:6px}.reader-message{font-size:13px;line-height:1.5;color:#b5b8bf;min-height:40px}.reader-message.error{color:#ffadad}.result-panel{gap:24px}#decoded-text{flex:1;min-height:230px;font-size:16px;overflow-wrap:anywhere}.secondary-button{border:1px solid #4b4e55;background:#24262a;color:#f3f3f3;padding:14px;border-radius:8px;font-size:14px}.secondary-button:hover:enabled{background:#303238}.result-panel .preview-help{margin:0}