:root{--paper:#e6e8e2;--panel:#f1f2ec;--graphite:#22261f;--mid:#767c72;--hair:#c3c8bc;--hair-soft:#d6dacf;--accent:#3a7ca5;--mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--paper);color:var(--graphite);font-family:var(--mono);font-size:14px;line-height:1.5}#app{max-width:1400px;margin:0 auto;padding:20px}h1{letter-spacing:.04em;text-transform:uppercase;border-bottom:1.5px solid var(--graphite);padding-bottom:10px;font-size:20px}h2{letter-spacing:.08em;text-transform:uppercase;color:var(--mid);margin-top:24px;font-size:14px}code{background:var(--panel);border:1px solid var(--hair);padding:1px 4px;font-size:.9em}button{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);border:1px solid var(--graphite);cursor:pointer;background:0 0;padding:7px 14px;font-size:11px}button:hover,button[aria-pressed=true]{background:var(--graphite);color:var(--paper)}.cta{margin-top:20px;padding:10px 20px}.landing,.upload{max-width:720px}.landing ul,.landing ol{padding-left:20px}.dropzone{border:1.5px dashed var(--hair);text-align:center;color:var(--mid);cursor:pointer;margin:20px 0;padding:40px 20px;position:relative}.dropzone.drag{border-color:var(--accent);color:var(--accent)}.dropzone input{opacity:0;cursor:pointer;position:absolute;inset:0}.status{min-height:1.2em;color:var(--mid)}.status.error{color:#b0392b}.volumes-step{border:1px solid var(--hair);background:var(--panel);margin:12px 0;padding:14px 16px}.volumes-table{border-collapse:collapse;width:100%;margin:12px 0;font-size:12px}.volumes-table th,.volumes-table td{text-align:left;border-bottom:1px solid var(--hair-soft);padding:5px 8px}.volumes-table input{font-family:var(--mono);border:1px solid var(--hair);background:var(--paper);width:100px;color:var(--graphite);padding:3px 5px;font-size:12px}.volumes-actions{gap:10px;display:flex}.supported{color:var(--mid);margin-top:16px;font-size:12px}.supported-list{border:1px solid var(--hair);background:var(--panel);max-height:110px;margin:4px 0 12px;padding:6px 8px;overflow-y:auto}.viz{flex-direction:column;height:calc(100dvh - 40px);min-height:520px;display:flex}.viz-header{border-bottom:1.5px solid var(--graphite);justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:10px;display:flex}.viz-clocks{gap:20px;font-size:12px;display:flex}.viz-main{flex:1;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(0,1fr) 300px;gap:12px;min-height:0;display:grid}.frame{background:var(--panel);border:1px solid var(--hair);flex-direction:column;min-height:0;display:flex;position:relative}.frame>svg{flex:1;width:100%;min-height:0;display:block}.viewlabel{z-index:2;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);background:var(--panel);padding:0 4px;font-size:9.5px;position:absolute;top:8px;left:10px}aside{background:var(--panel);border:1px solid var(--hair);flex-direction:column;min-height:0;display:flex}.aside-head{border-bottom:1px solid var(--hair);letter-spacing:.14em;text-transform:uppercase;color:var(--mid);justify-content:space-between;padding:9px 11px;font-size:9.5px;display:flex}#stepsList{flex:1;margin:0;padding:0;list-style:none;overflow-y:auto}#stepsList li{cursor:pointer;border-bottom:1px solid var(--hair-soft);grid-template-columns:22px 1fr;align-items:baseline;gap:8px;padding:7px 11px;font-size:12px;display:grid}#stepsList li:hover{background:#e9ebe4}#stepsList li .n{color:var(--mid);font-size:10px}#stepsList li[data-state=active]{background:var(--graphite);color:var(--paper)}#stepsList li[data-state=active] .n{color:var(--hair)}footer{border-top:1.5px solid var(--graphite);flex-wrap:wrap;align-items:center;gap:14px;margin-top:12px;padding-top:10px;display:flex}.scrub{flex:1;align-items:center;gap:10px;min-width:180px;display:flex}input[type=range]{accent-color:var(--graphite);flex:1}.clock{color:var(--mid);font-variant-numeric:tabular-nums;font-size:11px}.speeds{gap:0;display:flex}.speeds button{margin-left:-1px}@media (width<=900px){.viz{height:auto}.viz-main{grid-template-rows:none;grid-template-columns:1fr}.viz-main .frame{height:55vh}.viz-main aside{max-height:50vh}}