:root{--zone:#2fbf5b;--marker:#fff;--off:#f5a524;--frame:#ffffff73}html,body{color:#eee;background:#000;min-height:100%;margin:0;font-family:system-ui,sans-serif}#view{margin:max(16px, env(safe-area-inset-top)) 16px 0;gap:12px;display:flex}#preview-box{aspect-ratio:1;border:2px solid var(--frame);background:#111;border-radius:12px;flex:1;position:relative;overflow:hidden}#preview{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}#preview.cropped{object-fit:fill;max-width:none;inset:auto}#preview-frames,#overlay{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.bar{background:#ffffff2e;border-radius:14px;outline:1px solid #ffffff59;flex:0 0 28px;margin-right:26px;position:relative}.bar-tick{color:#ffffffb3;font-size:11px;position:absolute;left:38px;transform:translateY(50%)}.bar-tick:before{content:"";border-top:1px solid #fff9;width:6px;position:absolute;top:50%;right:calc(100% + 3px)}.bar-zone{background:var(--zone);opacity:.85;border-radius:4px;position:absolute;left:0;right:0}.bar-peak{border-top:2px dashed #6cf;position:absolute;left:-6px;right:-6px;transform:translateY(50%)}.bar-marker{background:var(--off);opacity:.85;border-radius:6px;min-height:6px;transition:bottom 80ms linear,height 80ms linear;position:absolute;left:-6px;right:-6px}.bar-marker.in-zone{background:var(--marker)}.bar-marker-label{white-space:nowrap;background:#000000b3;border-radius:6px;padding:1px 6px;font-size:15px;font-weight:600;position:absolute;top:50%;right:calc(100% + 4px);transform:translateY(-50%)}#hint{text-align:center;min-height:1.3em;margin:16px;font-size:24px;font-weight:700}#controls{gap:8px;margin:0 16px;display:flex}#controls button{color:#000;background:#ffffffd9;border:0;border-radius:10px;flex:1;padding:12px 8px;font-size:15px}#cells{flex-wrap:wrap;align-items:flex-start;gap:12px;margin:16px 16px 0;display:flex}#cells figure{flex:1 1 0;min-width:0;margin:0}#cells figcaption{color:#ffffffb3;margin-top:4px;font-size:11px}#mark-view,#composite-view{aspect-ratio:1;border:2px solid var(--frame);width:100%;image-rendering:pixelated;background:#111;border-radius:8px}#cells-text{white-space:pre-wrap;color:#ffffffd9;flex:100%;margin:0;font-size:11px}#status{white-space:pre-wrap;color:#fffc;margin:16px;font-size:11px}[hidden]{display:none!important}#controls button.minor{color:#eee;background:#ffffff40;flex:none;padding:12px 14px}#controls button.minor.on{color:#111;background:#f4f4f4}