.capture-pad{position:relative;min-height:250px;padding:28px;display:grid;place-items:center;text-align:center;border:2px dashed #30627b;border-radius:12px;background:linear-gradient(#19445544 1px,transparent 1px),linear-gradient(90deg,#19445544 1px,transparent 1px),#04111b;background-size:25px 25px;overflow:hidden}.capture-pad:focus{border-color:var(--cyan)}.key-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}.key-cell{padding:15px 8px;border:1px solid #325469;border-radius:8px;text-align:center;color:#9fb4c0;background:#04131e;font:700 13px/1.4 ui-monospace,monospace}.key-cell.seen{border-color:#41ffd2;color:#41ffd2;background:#0c3032}.key-cell.held{background:#206f65;color:white}.ball-marker{width:24px;height:24px;border:2px solid var(--teal);background:#41ffd233;position:absolute;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.capture-pad p{position:relative;z-index:1;background:#04111be8;padding:12px;border-radius:8px;max-width:440px;pointer-events:none}input:not([type=checkbox]),select{max-width:100%;background:#04131e;color:#edfaff;border:1px solid #365e75;border-radius:8px;padding:12px;font:16px system-ui}input[type=range]{min-width:150px;accent-color:var(--cyan)}.control-field{display:grid;gap:6px;min-width:140px;flex:1}.result-code{white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;padding:20px;border:1px solid #275167;background:#020b13;border-radius:10px;color:var(--teal);font:14px/1.7 ui-monospace,monospace}.media-preview{display:block;background:#000;width:100%;max-height:420px;object-fit:contain;border:1px solid #2b536b;border-radius:12px}.media-preview[hidden],.snapshot[hidden]{display:none}.snapshot{max-width:100%;display:block;margin-top:16px;border-radius:10px;border:1px solid #2b536b}a.download-link{display:inline-block;padding:12px 18px;border:1px solid var(--cyan);border-radius:8px;font-weight:700;text-decoration:none}a.download-link[hidden]{display:none}.level-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}.level-pair meter{width:100%;height:30px}.pattern-stage{position:relative;border:1px solid #36566c;border-radius:10px;overflow:hidden;background:#050505;color:white}.pattern-stage:fullscreen,.overscan-stage:fullscreen{width:100vw;height:100dvh;max-width:none;max-height:none;aspect-ratio:auto!important;border:0;border-radius:0}.pattern-controls{position:relative;background:#071725;color:#eefbff;padding:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.text-sample{padding:30px;min-height:230px;overflow-wrap:anywhere}.text-sample p{margin:0 0 16px}.overscan-stage{position:relative;width:100%;aspect-ratio:16/9;background:linear-gradient(#2d6c7d 1px,transparent 1px),linear-gradient(90deg,#2d6c7d 1px,transparent 1px),#07121b;background-size:50px 50px;overflow:hidden;border:6px solid #35e7ff;color:white}.overscan-circle{position:absolute;left:50%;top:50%;width:min(35vw,220px);height:min(35vw,220px);transform:translate(-50%,-50%);border:3px solid #41ffd2;border-radius:50%;display:grid;place-items:center;text-align:center;padding:25px;font-size:14px;background:#07121bcc}.overscan-stage:fullscreen .overscan-circle{width:min(45vw,45vh);height:min(45vw,45vh)}.edge-label{position:absolute;font:700 12px ui-monospace,monospace;color:#fff;background:#08121dee;padding:6px;z-index:2}.edge-tl{top:6px;left:6px}.edge-tr{top:6px;right:6px}.edge-bl{bottom:6px;left:6px}.edge-br{bottom:6px;right:6px}.steady-pattern{height:330px;background:#808080}.pattern-stage:fullscreen .steady-pattern{height:calc(100dvh - 74px)}.hardware-note{border-left:3px solid #ffc857;padding:14px 18px;background:#191b20;color:#ddcfad;margin:18px 0}.controls label{font-size:13px}.media-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}.media-layout>div{min-width:0}.metric strong.long{font-size:16px;overflow-wrap:anywhere}.caption{font-size:13px;color:#a3becb;margin:8px 0}.entry-list{margin:16px 0}.entry-list a{display:block;padding:8px 0}button.small{padding:7px 12px;min-height:38px;font-size:13px}@media(max-width:720px){.media-layout,.level-pair{grid-template-columns:1fr}.capture-pad{min-height:220px}.key-cell{font-size:11px;padding:12px 5px}.text-sample{padding:18px}.overscan-circle{width:100px;height:100px;font-size:11px;padding:12px}.edge-label{font-size:10px;padding:3px}.steady-pattern{height:260px}}