:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#17243a;background:#f1f4f8;font-size:16px;line-height:1.5;color-scheme:light}
*{box-sizing:border-box}body{margin:0}.masthead{display:flex;justify-content:space-between;align-items:center;padding:18px max(24px,calc((100vw - 1320px)/2));background:#152744;color:white}.masthead strong{font-size:26px;letter-spacing:.1em}.masthead strong span{font-size:14px;color:#9cbafa}.masthead>span{font-size:14px;color:#d7e3f7}main{max-width:1368px;margin:auto;padding:24px}h1{font-size:clamp(24px,3vw,34px);margin:0 0 6px;letter-spacing:-.035em}h2{font-size:18px;margin:0 0 20px;color:#234e97}.intro p{margin:0 0 24px;color:#526078}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.panel{background:white;border-radius:12px;padding:24px;box-shadow:0 2px 8px #13244009;min-width:0}label{display:block;font-weight:600;margin:16px 0 6px}input,textarea,select{display:block;width:100%;font:inherit;border:1px solid #a8b5c7;border-radius:6px;padding:10px 12px;background:white;color:#17243a;margin-top:6px}textarea{resize:vertical;font-family:ui-monospace,monospace;font-size:14px}small,.hint{font-size:14px;color:#526078;font-weight:400}label small{display:block;line-height:1.4;margin-top:5px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}.settings{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-bottom:20px}button{font:inherit;font-weight:600;border:1px solid transparent;border-radius:6px;padding:10px 15px;cursor:pointer;background:#245acc;color:white}button.secondary{background:#eef3fb;color:#244471;border-color:#d4e0f1}button:hover{filter:brightness(.95)}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #d38700;outline-offset:3px}p{overflow-wrap:anywhere}.mono{font-family:ui-monospace,monospace;font-size:14px;overflow-wrap:anywhere}.code-stage{display:flex;justify-content:center;background:white;overflow:hidden}.code-stage canvas{max-width:100%;height:auto;object-fit:contain;image-rendering:pixelated}.controls{justify-content:center}#cameraBox{position:relative;aspect-ratio:1;background:#132440;margin-top:16px;overflow:hidden;border-radius:8px}video{display:block;width:100%;height:100%;object-fit:cover}.roi{position:absolute;inset:10%;border:3px solid white;box-shadow:0 0 0 100px #0005;pointer-events:none}.frame-map{display:flex;gap:5px;flex-wrap:wrap;max-height:180px;overflow:auto}.frame-map span{font-size:13px;padding:3px 7px;background:#e7edf5;border-radius:3px}.frame-map .received{background:#cceddf;color:#155238}progress{display:block;width:100%;height:16px;margin-top:22px;accent-color:#245acc}details{margin-top:20px}summary{cursor:pointer;font-weight:600}.notes{padding:20px 0}.notes p{max-width:1000px}#printRoot{display:none}[hidden]{display:none!important}
@media(max-width:850px){.workspace{grid-template-columns:1fr}main{padding:18px}.panel{padding:20px}.masthead{padding:14px 20px}}
@media(max-width:380px){.settings{grid-template-columns:1fr}.masthead>span{display:none}}
@page{size:A4;margin:10mm}
@media print{body{background:white}body>header,body>main,body>noscript{display:none}#printRoot{display:block}.print-page{height:276mm;break-after:page;page-break-after:always;overflow:hidden}.print-page:last-child{break-after:auto;page-break-after:auto}.print-header{height:28mm;font:10pt/1.3 system-ui,sans-serif;overflow-wrap:anywhere}.print-header h1{font-size:13pt;margin:0 0 2mm}.print-header p{margin:0;font-size:9pt}.print-grid{display:grid;justify-content:space-around;align-content:start;gap:5mm}.print-cell{margin:0;break-inside:avoid;text-align:center;font:9pt/1.3 system-ui,sans-serif}.print-cell svg{display:block;width:var(--print-size);height:var(--print-size);margin:auto}.print-cell figcaption{margin-top:1mm}}