@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#e9edf4;background:#101319;font-size:16px;color-scheme:dark;--muted:#9ca6b7;--line:#323944;--cyan:#8aefe8}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,label.file-button,summary{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.file-button:focus-within,.dropzone:focus-within{outline:2px solid var(--cyan);outline-offset:4px}button{border:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.topbar{height:88px;max-width:1440px;margin:auto;padding:0 5%;display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--line)}.brand{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.25rem;display:flex;align-items:center;gap:12px}.brand-icon{display:grid;grid-template-columns:repeat(2,9px);gap:3px;transform:rotate(-8deg)}.brand-icon i{width:9px;height:9px;background:var(--cyan)}.brand-icon i:nth-child(2){background:#ff71e1}.brand-icon i:nth-child(3){background:#f1ef75}.brand-icon i:last-child{background:white}.version{font:500 .75rem ui-monospace,monospace;letter-spacing:.09em;color:var(--muted);border-left:1px solid var(--line);padding-left:28px}.local{margin-left:auto;font-size:.875rem;color:var(--muted)}main{max-width:1320px;padding:0 36px;margin:0 auto}.heading{display:flex;justify-content:space-between;align-items:flex-end;padding:38px 0 30px}.eyebrow{color:var(--muted);font:500 .75rem ui-monospace,monospace;letter-spacing:.12em;margin:0 0 12px}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.9rem,3vw,2.75rem);line-height:1.1;font-weight:500;letter-spacing:-.04em;margin:0}h1 br{display:none}.intro{color:var(--muted);font-size:.9375rem;line-height:1.6;margin:0 0 2px 24px}.workspace{display:grid;grid-template-columns:minmax(320px,.85fr) minmax(0,1.3fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#171c24}.controls{padding:26px 30px;border-right:1px solid var(--line)}.tabs{display:flex;background:#10141b;border:1px solid var(--line);padding:4px;border-radius:8px;margin-bottom:26px}.tabs button{width:50%;padding:10px;background:transparent;color:var(--muted);border-radius:5px;font-weight:500}.tabs button[aria-selected=true]{background:#313a47;color:#fff;box-shadow:0 1px 4px #0004}.section-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}h2{font-size:.9375rem;font-weight:600;margin:0}.mono{font:400 .8125rem ui-monospace,monospace;color:var(--muted)}textarea,input[type=number],select{background:#10141b;color:#edf1f6;border:1px solid #3b4452;border-radius:6px}textarea{resize:vertical;min-height:124px;width:100%;padding:14px;font-size:1rem;line-height:1.6}textarea:disabled{opacity:.55}textarea::placeholder{color:#818d9f}.file-row{display:flex;gap:12px;align-items:center;margin-top:12px;font-size:.875rem;min-height:30px}.file-button{cursor:pointer;color:var(--cyan);white-space:nowrap}.file-button span{margin-left:8px}#file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.text-button{background:transparent;color:var(--cyan);font-size:.875rem;padding:4px}.divider{height:1px;background:var(--line);margin:24px 0}.field{margin:16px 0}.field label{display:block;font-size:.875rem;margin-bottom:9px;color:#c8d0dd}select{width:100%;padding:10px 12px;min-height:44px}.label-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.label-row label{margin:0}#parity-number{width:55px;padding:4px 6px;color:#e9edf4}input[type=range]{width:100%;accent-color:var(--cyan);margin:15px 0 6px}.hint{font-size:.8125rem;color:var(--muted);line-height:1.55;margin:7px 0}.two-fields{display:flex;gap:12px}.two-fields .field{flex:1;min-width:0}.two-fields input{width:100%;padding:10px}.primary,.secondary{font-size:.875rem;font-weight:600;min-height:43px;padding:11px 17px;border-radius:6px;transition:background .15s}.primary{background:var(--cyan);color:#102322}.primary:hover:not(:disabled){background:#b1fff7}.secondary{background:transparent;color:#e9edf4;border:1px solid #4c5768}.secondary:hover:not(:disabled){background:#303a48}#encode{width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:22px}.bottom-note{margin:11px 0 0;font-size:.75rem}.preview{background:#131820;display:flex;flex-direction:column;min-width:0}.preview-header{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:24px 28px}.preview-header .eyebrow{margin:0}.canvas-area{display:flex;align-items:center;justify-content:center;min-height:360px;flex:1;margin:0 24px;padding:24px;background-image:radial-gradient(#354152 1px,transparent 1px);background-size:16px 16px;overflow:hidden}canvas{max-width:100%;max-height:430px;object-fit:contain;width:auto;height:auto;image-rendering:pixelated;box-shadow:0 16px 48px #0005}#empty-preview{text-align:center;color:var(--muted);font-size:.875rem}#empty-preview p{color:#d4dce9;font-size:1.125rem;margin:12px}#empty-preview span:last-child{font-size:.875rem}.empty-grid{font-size:4rem;color:var(--cyan);line-height:1}.preview-footer{padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}.swatches{display:flex;border:1px solid #657082;padding:3px;gap:3px;border-radius:4px}.swatches i{background:var(--swatch);width:15px;height:18px}.stats{margin:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding:22px 28px;gap:14px}.stats dt{font-size:.75rem;color:var(--muted);margin-bottom:9px}.stats dd{margin:0;font:500 1rem 'Space Grotesk',sans-serif}.status{margin:17px 0 0;font-size:.8125rem;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}.status.error{color:#ffb1ae}.status.success{color:var(--cyan)}footer{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding:22px 0 40px;font-size:.75rem;color:var(--muted);line-height:1.6}footer>span{flex:1}details{max-width:540px;flex:1}summary{cursor:pointer;text-align:right;color:#c5cedc;font-size:.8125rem}details p{margin:14px 0 0}.dropzone{min-height:190px;border:1px dashed #556174;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:13px;padding:20px;cursor:pointer;background:#10161e}.dropzone.drag{border-color:var(--cyan);background:#1b3337}.dropzone strong{font-size:1rem;font-weight:500}.dropzone>span:last-of-type{font-size:.8125rem;color:var(--muted)}.upload-icon{font-size:2rem;color:var(--cyan)}#decode-current{width:100%;margin:14px 0 7px}.verified{font-size:.75rem;color:var(--cyan)}#decoded-text{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;background:#10141b;padding:14px;border:1px solid var(--line);border-radius:6px;font-size:.875rem;line-height:1.5}.button-row{display:flex;gap:10px;flex-wrap:wrap}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(min-width:1400px){.heading{padding-top:48px;padding-bottom:36px}.canvas-area{min-height:400px}}@media(max-width:1000px){h1 br{display:block}.intro{font-size:.875rem}.controls{padding:22px}.canvas-area{margin:0 14px;padding:16px}.preview-header,.preview-footer,.stats{padding-left:20px;padding-right:20px}.swatches i{width:11px}.version{display:none}}@media(max-width:740px){main{padding:0 18px}.topbar{height:70px;padding:0 20px}.local{font-size:.75rem;max-width:100px;text-align:right}.heading{display:block;padding:28px 0 24px}h1 br{display:none}.intro{margin:14px 0 0}.intro br{display:none}.workspace{grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid var(--line)}.canvas-area{min-height:290px}canvas{max-height:420px}.preview-header{padding-top:22px}.swatches i{width:15px}footer{display:block}details{margin-top:12px}summary{text-align:left}.stats dd{font-size:.9375rem}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.topbar{height:72px}.heading{padding:28px 0 24px}.controls{padding-top:22px;padding-bottom:22px}.tabs{margin-bottom:20px}textarea{min-height:110px}.divider{margin:20px 0}.file-row:focus-within .file-button{outline:2px solid var(--cyan);outline-offset:4px}@media(min-width:1400px){.heading{padding:32px 0 26px}}

.capacity-detail{margin:0;padding:0 28px 18px}

.camera-panel{border:1px solid var(--line);border-radius:8px;padding:16px;background:#10161e}.camera-panel select{margin-bottom:12px}.camera-panel button{width:100%}#camera-view{width:100%;min-width:0;height:240px;max-height:240px;margin:0 0 12px;background:#080b10;border-radius:6px;overflow:hidden}#camera-video{position:static;display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:240px;max-height:240px;object-fit:contain;object-position:center}.workspace>*{min-width:0}#camera-status{margin:12px 0 0;font-size:.875rem}

/* Keep intrinsic video dimensions from widening any ancestor on mobile. */
.camera-panel,.controls,#decode-panel{min-width:0;max-width:100%}#camera-view{position:relative;height:240px!important;max-height:240px!important;contain:size layout;aspect-ratio:auto!important}#camera-video{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:100%!important;max-height:240px!important;object-fit:contain!important}