:root{--gap:18px;--center-width:61.92%;--max-width:864px;--aspect-w:16;--aspect-h:7}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,Helvetica,sans-serif;margin:0;background:#f5f5f5;color:#222}
#app{max-width:1400px;margin:18px auto;padding:12px}
header h1{margin:0;font-size:18px}
main{display:flex;justify-content:center;margin-top:12px}
#center-column{width:var(--center-width);max-width:var(--max-width);display:flex;flex-direction:column;align-items:center;gap:12px}

/* preview and scatter share the same aspect ratio and width */
#preview-wrap, #scatter{width:100%;background:#fff;border-radius:6px;box-shadow:0 1px 0 rgba(0,0,0,0.06);padding:8px;}
#preview-wrap{display:flex;align-items:center;justify-content:center}
#preview{max-width:100%;height:auto;display:block;max-height:calc(57.6vh);} 
#previewVideo{max-width:100%;max-height:calc(57.6vh);}

/* Use CSS aspect-ratio to keep preview and plot the same size */
#preview-wrap{aspect-ratio: var(--aspect-w) / var(--aspect-h);}
#scatter{aspect-ratio: var(--aspect-w) / var(--aspect-h);padding:0}
#scatter > .plotly, #scatter > .js-plotly-plot{height:100% !important}

#info{color:#333; font-family: 'LatinModern', 'STIX Two Math', serif}
footer{margin-top:12px;color:#666}

@media (max-width:900px){:root{--center-width:96%} #preview{max-height:50vh}}