:root{color-scheme:dark;--bg:#070b0d;--surface:rgba(13,19,22,.94);--surface2:#11191d;--line:rgba(181,214,218,.14);--text:#e8f0f1;--muted:#83969b;--cyan:#8edce0;--cyan2:#d8fbf7;--amber:#e7b85f;--danger:#dc786e;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box} [hidden]{display:none!important} html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text)} button,select,input{font:inherit} button{color:inherit}
.lab{height:100%;display:grid;grid-template-columns:64px 218px minmax(300px,1fr) 300px;grid-template-rows:58px minmax(260px,1fr) 190px;background:#05090b}
.topbar{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--line);background:#0b1114;z-index:10;min-width:0}
.brand{display:flex;align-items:center;gap:9px;min-width:198px}.brand-mark{width:19px;height:19px;border:2px solid var(--cyan);border-radius:50% 50% 48% 52%;box-shadow:inset 0 -6px 0 rgba(142,220,224,.22)}.brand h1{font-size:15px;margin:0;letter-spacing:0}.brand p{margin:2px 0 0;color:var(--muted);font-size:8px;letter-spacing:.09em}
.workspace-switch,.language-switch,.transport{display:flex;border:1px solid var(--line);padding:2px;background:#070c0f;border-radius:5px}.workspace-switch button,.language-switch button,.transport button{border:0;background:transparent;border-radius:3px;cursor:pointer}.workspace-switch button{padding:7px 10px;font-size:11px;color:var(--muted)}.workspace-switch button.active,.language-switch button.active,.transport button.active{background:var(--cyan2);color:#071114}.language-switch{margin-left:auto}.language-switch button{padding:6px 7px;font-size:9px;color:var(--muted)}
#experimentSelect{height:34px;min-width:142px;border:1px solid var(--line);border-radius:5px;background:#0e1619;color:var(--text);padding:0 28px 0 9px;font-size:11px}.transport button{width:30px;height:28px;font-size:12px}.top-stats{display:flex;gap:10px;margin-left:auto;color:var(--muted);font-size:9px;white-space:nowrap}.top-stats b{color:var(--cyan2);margin-left:3px}.top-stats i{font-style:normal}
.panel{background:var(--surface);border-color:var(--line);border-style:solid;z-index:5}.tool-rail{grid-column:1;grid-row:2/4;display:flex;flex-direction:column;padding:7px 5px;border-right:1px solid var(--line);background:#091013;z-index:6;overflow:auto}.tool{height:55px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;align-content:center;gap:3px;border-radius:5px;cursor:pointer;font-size:9px}.tool b{font-size:17px;font-weight:500}.tool.active,.tool:hover{color:var(--cyan2);background:rgba(142,220,224,.1)}.experiment-library{grid-column:2;grid-row:2;border-width:0 1px 1px 0;overflow:hidden;display:flex;flex-direction:column}.panel-heading{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 11px;border-bottom:1px solid var(--line)}.panel-heading h2{font-size:11px;margin:0}.panel-heading button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:18px}.experiment-list{padding:5px;overflow:auto;flex:1}.experiment-item{width:100%;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:7px;padding:8px;border:0;border-left:2px solid transparent;background:transparent;color:var(--muted);text-align:left;cursor:pointer}.experiment-item.active{background:rgba(142,220,224,.09);border-left-color:var(--cyan);color:var(--text)}.experiment-item b{font-size:11px}.experiment-item small{display:block;font-size:8px;margin-top:2px;color:var(--muted)}.experiment-item em{font-style:normal;font-size:8px;color:var(--cyan)}.experiment-icon{width:25px;height:25px;display:grid;place-items:center;border:1px solid var(--line);border-radius:4px}.library-actions{padding:8px;display:grid;gap:5px;border-top:1px solid var(--line)}.library-actions button,.inspector-actions button{height:30px;border:1px solid var(--line);background:#111a1e;border-radius:4px;font-size:9px;cursor:pointer}
.viewport{grid-column:3;grid-row:2;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 35%,#14262b,#05090b 72%)}#fluidCanvas,#fluid3dCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}#fluidCanvas{display:none}.viewport-tools{position:absolute;top:10px;left:10px;display:flex;gap:5px;z-index:4}.viewport-tools button{height:26px;border:1px solid var(--line);border-radius:4px;background:rgba(7,13,16,.78);color:var(--muted);font-size:9px;cursor:pointer;white-space:nowrap}.viewport-tools button.active{color:#071114;background:var(--cyan2)}.surface-tools{right:10px;flex-wrap:wrap}.mode-segment{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:rgba(7,13,16,.78)}.mode-segment button{border:0;border-right:1px solid var(--line);border-radius:0}.mode-segment button:last-child{border-right:0}.axis-widget{position:absolute;right:12px;bottom:12px;width:45px;height:45px;border:1px solid var(--line);border-radius:50%;font-size:8px}.axis-widget i,.axis-widget b,.axis-widget span{position:absolute;font-style:normal}.axis-widget i{right:3px;top:19px;color:#e47d73}.axis-widget b{left:19px;top:2px;color:#87d69b}.axis-widget span{left:5px;bottom:4px;color:#7ca9e4}.probe-marker{position:absolute;left:55%;top:42%;color:var(--amber);font-size:14px;pointer-events:none}.probe-marker b{font-size:8px}.empty-hint{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
.inspector{grid-column:4;grid-row:2;border-width:0 0 1px 1px;overflow:hidden;display:flex;flex-direction:column}.inspector-tabs,.analysis-tabs{display:flex;border-bottom:1px solid var(--line)}.inspector-tabs button,.analysis-tabs button{flex:1;height:39px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-size:10px;cursor:pointer}.inspector-tabs button.active,.analysis-tabs button.active{color:var(--cyan2);border-bottom-color:var(--cyan)}.inspector-content{padding:12px;overflow:auto;flex:1}.control-section{margin-bottom:15px}.control-section h3{margin:0 0 10px;color:var(--muted);font-size:9px;text-transform:uppercase}.control-row{display:grid;grid-template-columns:1fr 68px;align-items:center;gap:8px;margin:9px 0;font-size:10px}.control-row input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--cyan)}.control-row input[type=number],.control-row select{width:100%;height:27px;border:1px solid var(--line);border-radius:4px;background:#081013;color:var(--cyan2);padding:0 5px;font-size:10px}.control-row output{text-align:right;color:var(--cyan);font-variant-numeric:tabular-nums}.inspector-actions{padding:9px;display:grid;grid-template-columns:1fr 1fr;gap:6px;border-top:1px solid var(--line)}.surface-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.surface-actions button{min-height:30px;border:1px solid var(--line);border-radius:4px;background:#10191d;color:var(--muted);font-size:9px;cursor:pointer}.surface-actions button.active{border-color:rgba(142,220,224,.55);color:var(--cyan2);background:rgba(142,220,224,.12)}.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;color:var(--muted);font-size:8px}.shortcut-grid kbd{color:var(--cyan2);font-family:inherit}
.analysis-dock{grid-column:2/5;grid-row:3;border-width:1px 0 0 0;display:grid;grid-template-columns:76px 1fr;grid-template-rows:1fr 38px;overflow:hidden}.analysis-tabs{grid-row:1/3;display:flex;flex-direction:column;border:0;border-right:1px solid var(--line)}.analysis-tabs button{flex:none;height:42px;border:0;border-left:2px solid transparent}.analysis-tabs button.active{border-left-color:var(--cyan);border-bottom:0;background:rgba(142,220,224,.08)}.graph-wrap{position:relative;min-width:0}.graph-wrap canvas{width:100%;height:100%;display:block}.graph-legend{position:absolute;right:14px;top:8px;display:flex;gap:12px;font-size:9px}.graph-legend span:before{content:"";display:inline-block;width:15px;height:2px;margin-right:5px;vertical-align:middle}.velocity-line:before{background:var(--cyan)}.pressure-line:before{background:var(--amber)}.graph-legend i{font-style:normal}.timeline-row{display:flex;align-items:center;gap:10px;padding:4px 10px;border-top:1px solid var(--line);font-size:9px}.timeline-row input{flex:1;accent-color:var(--cyan)}.timeline-row select,.timeline-row button{height:26px;border:1px solid var(--line);border-radius:4px;background:#0b1316;color:var(--text);font-size:9px}.record-button i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--danger);margin-right:5px}.record-button.recording{border-color:var(--danger)}.export-menu{position:relative}.export-menu>div{position:absolute;right:0;bottom:31px;display:grid;background:#11191d;border:1px solid var(--line);padding:4px;width:90px}.export-menu>div button{border:0;text-align:left}.toast{position:fixed;left:50%;bottom:210px;transform:translateX(-50%);padding:8px 12px;background:#10191c;border:1px solid var(--line);border-radius:5px;font-size:10px;z-index:30}.error-overlay{position:fixed;inset:0;display:grid;place-items:center;background:rgba(2,5,7,.9);z-index:50}.error-overlay>div{width:min(520px,90vw);padding:20px;background:#101719;border:1px solid rgba(231,184,95,.35)}.error-overlay h2{color:var(--amber);font-size:16px}
@media(max-width:900px){.lab{grid-template-columns:1fr;grid-template-rows:52px minmax(300px,58vh) auto}.topbar{grid-column:1;overflow-x:auto;padding:0 8px}.brand{min-width:135px}.brand p,.top-stats,#experimentSelect{display:none}.workspace-switch{margin-left:auto}.language-switch{margin-left:0}.tool-rail{grid-column:1;grid-row:2;position:absolute;top:58px;left:0;right:0;height:52px;flex-direction:row;padding:4px;z-index:12;background:rgba(8,14,17,.78);overflow-x:auto}.tool{min-width:54px;height:43px}.experiment-library{display:none}.viewport{grid-column:1;grid-row:2}.inspector{grid-column:1;grid-row:3;max-height:35vh;border-width:1px 0 0;position:relative}.inspector-tabs{position:sticky;top:0;background:#0d1417;z-index:2}.analysis-dock{grid-column:1;grid-row:3;position:absolute;left:0;right:0;bottom:0;height:44px;z-index:16;display:block}.analysis-tabs,.graph-wrap{display:none}.timeline-row{height:44px}.timeline-row #timelineSlider{min-width:80px}.inspector{padding-bottom:44px}.viewport-tools{top:58px}.surface-tools{left:4px;right:4px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.probe-marker{top:38%}.transport{display:none}}
@media(max-width:520px){.topbar{gap:6px}.brand h1{font-size:13px}.workspace-switch button{padding:6px}.language-switch button{padding:5px}.timeline-row{gap:5px;padding-inline:6px}.timeline-row #timeReadout,.timeline-row #timeScale{display:none}.viewport-tools button{font-size:0;width:30px}.viewport-tools button:before{font-size:12px}.viewport-tools button:nth-child(1):before{content:"◉"}.viewport-tools button:nth-child(2):before{content:"•••"}.viewport-tools button:nth-child(3):before{content:"◫"}.surface-tools button{width:auto;min-width:max-content;padding:0 7px;font-size:8px}.surface-tools button:before{content:none!important}.surface-tools .mode-segment button{min-width:42px}}