:root{font-family:system-ui,Segoe UI,Roboto,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;width:100%;max-width:100vw;height:100%;overflow-x:hidden;overflow-y:hidden;background:#0a0a0c}body{touch-action:manipulation}#app{width:100%;max-width:100vw;height:100dvh;margin:0;padding:0;display:flex;flex-direction:column;overflow:hidden}.toolbar{flex:0 0 auto;width:100%;max-width:100%;min-height:40px;padding:6px 8px;display:flex;flex-wrap:nowrap;align-items:center;gap:6px 8px;background:#121218;border-bottom:1px solid #2a2a34;touch-action:manipulation;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.toolbar-cols{flex:1 1 0;min-width:72px;display:flex;align-items:center;gap:6px;max-width:100%}.toolbar-cols input[type=range]{flex:1;min-width:48px;width:100%;max-width:100%;height:32px;touch-action:none}.toolbar-cols-value{font-variant-numeric:tabular-nums;font-size:clamp(.72rem,2.2vw,.88rem);color:#e8e8ed;min-width:1.4rem;text-align:right;flex-shrink:0}.toolbar select{flex:0 1 120px;min-width:72px;max-width:min(34vw,150px);min-height:34px;padding:6px 8px;border-radius:8px;border:1px solid #3a3a48;background:#1a1a22;color:#e8e8ed;font-size:clamp(.72rem,2.2vw,.88rem)}.toolbar-preview-btn{flex:0 0 auto;min-height:34px;padding:6px 10px;border-radius:8px;border:1px solid #3a3a48;background:#1a1a22;color:#e8e8ed;font-size:clamp(.72rem,2.2vw,.88rem);cursor:pointer;white-space:nowrap}.toolbar-preview-btn[aria-pressed=true]{background:#2a3a5a;border-color:#4a6a9a;color:#fff}.canvas-wrap{flex:1 1 auto;min-height:0;min-width:0;width:100%;max-width:100vw;display:flex;align-items:center;justify-content:center;touch-action:none}.canvas-wrap canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto}.src-video{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none}.analysis-preview{position:fixed;right:8px;bottom:8px;z-index:20;max-width:min(92vw,1080px);padding:8px;border-radius:10px;background:#121218;border:1px solid #2a2a34;box-shadow:0 8px 28px #00000073;pointer-events:none}.analysis-preview-canvas{display:block;width:100%;height:auto;max-height:min(126dvh,960px);image-rendering:pixelated;image-rendering:crisp-edges;border-radius:4px}.analysis-preview-meta{margin-top:6px;font-size:.7rem;color:#9898a8;font-variant-numeric:tabular-nums;text-align:center}