*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:clamp(16px,4vw,32px);font-family:system-ui,sans-serif;line-height:1.5;background:#f7f7f7}.app{max-width:720px;margin:0 auto;background:#fff;padding:clamp(16px,4vw,32px);border-radius:0;box-shadow:0 4px 16px #0000000f}h1{margin-top:0;margin-bottom:1rem;font-size:clamp(1.5rem,2.5vw,2rem)}button{padding:.6rem 1.1rem;border:1px solid #ccc;border-radius:0;background:#fff;cursor:pointer;font:inherit;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}button:hover:not(:disabled),button:focus-visible{border-color:#888;background:#f0f0f0;box-shadow:0 0 0 3px #0000000d}button:disabled{cursor:not-allowed;opacity:.6}.row{margin:1rem 0}.controls{display:flex;flex-wrap:wrap;gap:.75rem}.controls button{flex:1 1 220px;min-width:140px}.controls button:disabled{display:none}details.debug-panel{margin-top:1.5rem}details.debug-panel summary{cursor:pointer;font-weight:600}.debug-panel-content{margin-top:.75rem;display:grid;gap:1.25rem}.debug-controls{display:flex;flex-wrap:wrap;gap:.75rem}.debug-controls button{flex:1 1 220px;min-width:140px}.debug-metrics{display:grid;gap:.5rem}.debug-metric{display:flex;gap:.35rem;align-items:baseline;font-size:.95rem}#out{border:1px solid #ddd;border-radius:0;padding:12px;min-height:6rem;background:#fafafa;display:grid;gap:12px}#out .provisional{opacity:.65;border-bottom:1px dotted rgba(0,0,0,.4)}.out-row{border:1px solid #eee;border-radius:0;padding:12px;background:#fff;display:grid;gap:.5rem}.out-row-header{font-weight:600;font-size:.95rem;color:#333}.out-row-content{display:grid;gap:.35rem}.out-row-label{font-size:.85rem;color:#666}.out-row-text{white-space:pre-wrap;font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto}.decoded-ok{color:#0f7a3c;font-weight:600}.app-footer{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #eee;font-size:.95rem;color:#555;text-align:center}.app-footer a{color:inherit;font-weight:600}.app-footer a:hover,.app-footer a:focus-visible{text-decoration:underline}@media(max-width:480px){.debug-metric strong{white-space:nowrap}}.decoded-image-container{margin-top:1rem;padding:0;background:#f9f9f9;border:1px solid #e0e0e0;border-radius:4px;display:inline-block;overflow:hidden;box-shadow:0 2px 8px #0000001a}.decoded-image{display:block;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.image-format{margin-bottom:.5rem}.image-scale-controls{display:flex;gap:.5rem;flex-wrap:wrap}.image-scale-controls button{padding:.4rem .8rem;font-size:.9rem;min-width:50px}.image-scale-controls button.active{background:#e0e0e0;border-color:#999;font-weight:600}
