.simulation-section{margin-top:27px;padding-top:16px;border-top:1px solid #292e30}.sim-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:12px 0 15px}.sim-button{border:1px solid #374043;background:#202527;color:#9ca4a2;text-transform:uppercase;font:9px 'DM Mono',monospace;padding:9px 5px;cursor:pointer}.sim-button.primary{border-color:#8c6639;background:#30271b;color:var(--accent)}.sim-field{display:block;color:#818988;font:9px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em;margin:13px 0}.sim-field output{float:right;color:var(--accent)}.sim-field input{display:block;width:100%;margin-top:8px;accent-color:var(--accent);height:3px}.sim-readout{display:flex;justify-content:space-between;border-top:1px solid #292f31;padding:9px 0 0;margin-top:9px;color:#687070;font:8px 'DM Mono',monospace;text-transform:uppercase}.sim-readout strong{color:#c6c9c2;font-weight:400}.volume-readout{display:flex;justify-content:space-between;border-top:1px solid #292f31;margin-top:14px;padding-top:12px;color:#78807f;font:9px 'DM Mono',monospace;text-transform:uppercase}.volume-readout strong{color:#d0d0c8;font-weight:400}
.module-heading{margin-top:30px;padding-top:18px;border-top:1px solid #292f31}.text-field{display:block;color:#818988;font:9px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em;margin:14px 0}.text-field input{display:block;width:100%;margin-top:7px;background:#202527;border:1px solid #333a3b;color:#ddd8cc;padding:8px;font:11px 'DM Mono',monospace}.text-field small{display:block;color:#606a6a;text-transform:none;font-size:8px;line-height:1.5;margin-top:6px}.variable-list,.property-list,.assignment-list{display:flex;flex-direction:column;gap:5px;margin:9px 0}.variable-row{display:grid;grid-template-columns:1fr 1fr 22px;gap:4px}.variable-row input,.assignment-row input,.assignment-row select{min-width:0;background:#202527;border:1px solid #333a3b;color:#d4d1c8;padding:7px 5px;font:10px 'DM Mono',monospace}.variable-row button,.assignment-row button{border:1px solid #513332;background:transparent;color:#c3786d;cursor:pointer}.mini-button{width:100%;border:1px solid #3c4647;background:#1d2223;color:#9fa7a4;padding:8px;text-transform:uppercase;font:9px 'DM Mono',monospace;cursor:pointer}.formula-field{margin-top:20px}.formula-result{display:flex;justify-content:space-between;border-top:1px solid #292f31;margin-top:15px;padding-top:12px;color:#78807f;font:9px 'DM Mono',monospace;text-transform:uppercase}.formula-result strong{color:var(--accent);font-weight:400}.assignment-title{margin-top:25px}.assignment-row{display:grid;grid-template-columns:1.1fr 1fr 22px;gap:4px}.object-selected .pulse{background:var(--cyan);box-shadow:0 0 0 4px #244347}.cyan{background:var(--cyan)}
.universe-clock{display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:24px;color:#7c8587;font:10px 'DM Mono',monospace}.universe-clock button{border:1px solid #8c6639;background:#25221d;color:var(--accent);width:25px;height:23px;cursor:pointer;font-size:11px}.universe-clock span{color:var(--accent);font-style:italic}.universe-clock strong{color:#d9d4c8;font-weight:400;min-width:42px}.universe-clock input{width:78px;accent-color:var(--accent);height:3px}.universe-clock small{color:#aeb0a6;min-width:32px}
.visibility-title{margin-top:18px}.visibility-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:9px 0 3px}.visibility-grid label{display:flex;align-items:center;gap:6px;color:#8d9693;font:9px 'DM Mono',monospace;text-transform:uppercase}.visibility-grid input{accent-color:var(--accent);margin:0}
.point-data-title{margin-top:18px}.point-data{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:8px 0}.point-data label{color:#818988;font:9px 'DM Mono',monospace;text-transform:uppercase}.point-data input{display:block;width:100%;margin-top:6px;background:#202527;border:1px solid #333a3b;color:#d4d1c8;padding:7px 5px;font:10px 'DM Mono',monospace}.simulation-toggle{display:flex;align-items:center;gap:7px;color:#8d9693;font:9px 'DM Mono',monospace;text-transform:uppercase;margin:14px 0}.simulation-toggle input{accent-color:var(--accent)}.text-field select{display:block;width:100%;margin-top:7px;background:#202527;border:1px solid #333a3b;color:#d4d1c8;padding:8px;font:10px 'DM Mono',monospace}
.assignment-row{display:grid;grid-template-columns:auto auto auto 1fr 1fr 58px;align-items:center;gap:4px}.assignment-toggle{display:flex;align-items:center;gap:4px;color:#89918f;font:8px 'DM Mono',monospace;text-transform:uppercase;white-space:nowrap}.assignment-toggle input{accent-color:var(--accent);margin:0}.assignment-force{min-width:0!important}
.mesh-item{position:relative}.object-item{grid-template-columns:20px 12px 1fr auto}.focus-object{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;background:transparent;color:#667071;font-size:13px;line-height:1;cursor:pointer;opacity:.55}.focus-object:hover,.focus-object:focus-visible,.focus-object.watching{color:var(--accent);opacity:1;outline:0}.delete-module{margin-left:auto;border:0;background:transparent;color:#6c7474;font-size:15px;line-height:1;padding:2px 3px;cursor:pointer;opacity:.35}.mesh-item:hover .delete-module,.mesh-item.active .delete-module{opacity:1}.delete-module:hover{color:var(--danger)}
*{box-sizing:border-box} :root{--bg:#101214;--panel:#171a1d;--line:#2c3135;--muted:#777e82;--text:#e7e4dc;--accent:#f0b35b;--cyan:#69ccd0;--danger:#db7567}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'Space Grotesk',sans-serif}button,input{font:inherit}button{color:inherit}.app-shell{display:grid;grid-template-columns:246px 1fr 286px;grid-template-rows:68px 1fr 32px;height:100vh;background:radial-gradient(circle at 50% 48%,#1b2021 0,#101214 58%)}.topbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--line);background:#131618;z-index:4}.brand-lockup{display:flex;align-items:center;gap:11px}.brand-lockup strong{font-size:14px;letter-spacing:.14em;font-weight:700}.brand-lockup strong span{color:var(--accent)}.brand-lockup small{display:block;color:#6f777b;font:9px 'DM Mono',monospace;letter-spacing:.12em;margin-top:3px}.brand-mark{display:flex;align-items:flex-end;gap:2px;width:20px;height:20px}.brand-mark span{display:block;width:5px;border:1px solid var(--accent);transform:skewY(-28deg)}.brand-mark span:nth-child(1){height:10px}.brand-mark span:nth-child(2){height:16px;background:var(--accent)}.brand-mark span:nth-child(3){height:13px}.topbar-status{font:10px 'DM Mono',monospace;color:#7c8587;letter-spacing:.12em}.topbar-status i,.scene-stats i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#80c97d;margin-right:6px}.divider{height:12px;border-left:1px solid #444b4c;margin:0 13px}.icon-button{border:0;background:none;color:#aeb4b1;font-size:26px;cursor:pointer}.sidebar{background:rgba(22,25,28,.92);z-index:2}.left-panel{border-right:1px solid var(--line);padding:26px 18px}.right-panel{border-left:1px solid var(--line);padding:26px 18px}.section-heading{display:flex;align-items:center;gap:10px;margin-bottom:22px}.section-heading span{font:10px 'DM Mono',monospace;color:var(--accent)}h1,h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0;font-weight:600}.plus-button{margin-left:auto;border:1px solid #535a5c;background:transparent;color:var(--accent);font-size:18px;width:23px;height:23px;line-height:17px;cursor:pointer}.mesh-list{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.mesh-item{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:9px;padding:10px 8px;color:#9b9f9c;font-size:12px;cursor:pointer;border-left:2px solid transparent}.mesh-item.active{background:#24292a;color:var(--text);border-left-color:var(--accent)}.mesh-swatch{width:8px;height:8px;border-radius:50%;background:var(--accent)}.mesh-item small{font:9px 'DM Mono',monospace;color:#686f71}.outline-button{display:flex;align-items:center;gap:8px;border:1px solid #353b3e;background:transparent;color:#aeb5b2;text-transform:uppercase;letter-spacing:.08em;font-size:10px;padding:10px;width:100%;cursor:pointer}.outline-button span{color:var(--accent);font-size:16px}.tool-section{margin-top:36px}.compact{margin-bottom:14px}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}.tool-button{display:flex;align-items:center;gap:7px;background:#1d2123;border:1px solid #2e3436;color:#939998;font-size:10px;padding:9px 7px;text-transform:uppercase;cursor:pointer}.tool-button.active{color:var(--accent);border-color:#8c6639;background:#27241f}.tool-icon{font-size:17px;line-height:12px}.hint{display:flex;gap:10px;margin-top:38px;padding-top:17px;border-top:1px solid #292e30;color:#6d7576}.hint>span{color:var(--accent);font:16px 'DM Mono',monospace}.hint p{font:9px/1.7 'DM Mono',monospace;margin:0;text-transform:uppercase}.hint p span{color:#a9afad}.viewport{position:relative;min-width:0;overflow:hidden}.viewport canvas{display:block}.viewport-label{position:absolute;z-index:1;color:#646d6f;font:9px 'DM Mono',monospace;letter-spacing:.1em;pointer-events:none}.top-left{left:24px;top:22px}.top-left span{color:var(--accent);margin:0 5px}.bottom-left{left:24px;bottom:20px}.crosshair{color:var(--accent);font-size:16px;vertical-align:middle;margin-right:7px}.axis-readout{position:absolute;right:24px;top:22px;color:#697274;font:9px 'DM Mono',monospace}.empty-state{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;color:#555d5e;pointer-events:none;transition:opacity .3s}.empty-state.hidden{opacity:0}.empty-state strong{text-transform:uppercase;letter-spacing:.15em;font-size:11px}.empty-state span{font:9px 'DM Mono',monospace;margin-top:7px}.empty-orbit{width:90px;height:42px;border:1px solid #384042;border-radius:50%;transform:rotate(-20deg);margin-bottom:17px}.inspector-empty{height:200px;display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;border-top:1px solid #292f31;border-bottom:1px solid #292f31;color:#656d6f}.node-glyph{font-size:36px;color:#586163;margin-bottom:10px}.inspector-empty strong{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#a5aaa5}.inspector-empty span{font:9px/1.7 'DM Mono',monospace;margin-top:8px}.hidden{display:none!important}.selected-node{display:flex;align-items:center;gap:9px;border-top:1px solid #292f31;border-bottom:1px solid #292f31;padding:13px 0;margin-bottom:19px}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #4f3e29}.selected-node small{display:block;color:#737b7a;font:8px 'DM Mono',monospace}.selected-node strong{font:12px 'DM Mono',monospace;color:var(--accent)}.node-index{margin-left:auto;color:#697071;font:9px 'DM Mono',monospace}.inspector label,.field-label{display:block;color:#818988;font:9px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em;margin-bottom:17px}.inspector label output{float:right;color:var(--accent)}input[type=range]{display:block;width:100%;margin-top:10px;accent-color:var(--accent);height:3px}.vector-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:8px 0 20px}.vector-fields label{margin:0}.vector-fields input{width:100%;background:#202527;border:1px solid #333a3b;color:#d1d0c9;padding:8px 4px;font:11px 'DM Mono',monospace}.inspector-row,.color-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #292f31;padding:12px 0;color:#7d8583;font:9px 'DM Mono',monospace;text-transform:uppercase}.inspector-row strong,.color-row strong{color:#d0d0c8;font-weight:400}.color-row input{width:22px;height:22px;border:0;padding:0;background:none;cursor:pointer;margin-left:auto;margin-right:8px}.danger-button{width:100%;margin-top:17px;display:flex;justify-content:space-between;background:transparent;border:1px solid #513332;color:#c3786d;text-transform:uppercase;font:9px 'DM Mono',monospace;padding:10px;cursor:pointer}.scene-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:31px;padding-top:15px;border-top:1px solid #292f31}.scene-stats span{display:block;color:#687070;font:8px 'DM Mono',monospace;text-transform:uppercase}.scene-stats strong{display:block;color:#d4d2ca;font:17px 'DM Mono',monospace;margin-top:5px}.bottombar{grid-column:1/-1;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:#60696a;font:8px 'DM Mono',monospace;letter-spacing:.08em}.bottombar b{color:#a8ada8;font-weight:400}.bottombar i{display:inline-block;width:5px;height:5px;background:#80c97d;border-radius:50%;margin:0 8px}.bottombar span:last-child{color:#626a6b}@media(max-width:800px){.app-shell{grid-template-columns:180px 1fr;grid-template-rows:58px 1fr 28px}.right-panel{display:none}.left-panel{padding:18px 12px}.topbar{padding:0 14px}.topbar-status{display:none}.hint{display:none}.bottombar{padding:0 12px}.bottombar span:last-child{display:none}}
.project-screen{min-height:100vh;padding:48px 28px;background:radial-gradient(circle at 50% 0,#242b2b 0,#101214 58%);color:var(--text)}.project-shell{width:min(920px,100%);margin:0 auto}.project-brand{padding-bottom:34px;border-bottom:1px solid var(--line)}.project-heading{margin-top:68px;max-width:620px}.project-heading>span{color:var(--accent);font:10px 'DM Mono',monospace;letter-spacing:.14em}.project-heading h1{margin-top:13px;font-size:34px;letter-spacing:-.04em;text-transform:none}.project-heading p{color:#8b9493;font-size:14px;line-height:1.65;margin:14px 0 0}.project-toolbar{display:flex;align-items:center;gap:18px;margin:34px 0 18px}.project-toolbar small{color:#687171;font:9px 'DM Mono',monospace}.project-primary,.project-open,.project-delete,.topbar-button{border:1px solid #495354;background:#1c2122;color:#c9cfca;font:10px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.project-primary{padding:12px 16px;border-color:#9a7140;background:#30271b;color:var(--accent)}.project-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}.project-card{min-height:150px;padding:20px;border:1px solid #343b3d;background:rgba(25,29,31,.9);display:flex;flex-direction:column}.project-card h2{margin:10px 0 0;font-size:16px;text-transform:none;letter-spacing:0}.project-card>span{color:#7f8988;font:9px 'DM Mono',monospace;letter-spacing:.08em}.project-card p{margin:10px 0 18px;color:#788181;font:10px/1.5 'DM Mono',monospace}.project-card-actions{display:flex;gap:7px;margin-top:auto}.project-open{padding:8px 11px;color:var(--accent);border-color:#745631}.project-delete{padding:8px 10px;color:#8d6660}.project-empty{grid-column:1/-1;padding:38px;border:1px dashed #3a4243;color:#74807e;font:11px 'DM Mono',monospace;text-align:center}.topbar-actions{display:flex;align-items:center;gap:8px}.topbar-button{padding:7px 9px;color:#9da6a3;font-size:9px}.topbar-button:hover{border-color:#8c6639;color:var(--accent)}@media(max-width:800px){.project-screen{padding:32px 18px}.project-heading{margin-top:45px}.project-heading h1{font-size:27px}.project-toolbar{align-items:flex-start;flex-direction:column}.topbar-button{display:none}}

/* Scientific institute theme */
:root{
  --bg:#f3f4f1;
  --panel:#ffffff;
  --line:#c9cfca;
  --muted:#65716f;
  --text:#17201f;
  --accent:#a31f34;
  --cyan:#0086a8;
  --danger:#b34136;
  --paper:#fbfbf8;
  --ink-soft:#34413f;
}

html,body{
  background:var(--bg);
  color:var(--text);
}

.app-shell{
  background:
    linear-gradient(rgba(23,32,31,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,32,31,.035) 1px,transparent 1px),
    #f3f4f1;
  background-size:32px 32px;
}

.topbar,.sidebar,.bottombar{
  background:rgba(255,255,255,.96);
  color:var(--text);
}

.topbar{
  border-bottom:2px solid var(--accent);
  box-shadow:0 1px 0 rgba(23,32,31,.08);
}

.sidebar{
  box-shadow:none;
}

.left-panel{
  border-right:1px solid var(--line);
}

.right-panel{
  border-left:1px solid var(--line);
}

.brand-lockup strong{
  color:var(--text);
  font-weight:700;
  letter-spacing:.1em;
}

.brand-lockup strong span,.section-heading span,.outline-button span,.hint>span,.top-left span,.crosshair,.formula-result strong,.universe-clock span,.selected-node strong{
  color:var(--accent);
}

.brand-lockup small,.topbar-status,.viewport-label,.axis-readout,.hint,.mesh-item small,.project-toolbar small,.field-label,.inspector label,.text-field,.formula-result,.scene-stats span,.bottombar{
  color:var(--muted);
}

.brand-mark span{
  border-color:var(--accent);
  transform:none;
}

.brand-mark span:nth-child(2){
  background:var(--accent);
}

.brand-mark{
  border-left:3px solid var(--accent);
  padding-left:4px;
}

.universe-clock button,.project-primary,.sim-button.primary{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}

.universe-clock strong,.scene-stats strong,.inspector-row strong,.color-row strong,.bottombar b{
  color:var(--text);
}

.universe-clock input,input[type=range],.visibility-grid input,.simulation-toggle input,.assignment-toggle input{
  accent-color:var(--accent);
}

.topbar-status i,.bottombar i{
  background:#25845f;
}

.viewport{
  background:
    linear-gradient(rgba(23,32,31,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,32,31,.045) 1px,transparent 1px),
    #eef0ec;
  background-size:28px 28px,28px 28px,100% 100%;
}

.viewport::before{
  display:none;
}

.viewport canvas{
  position:relative;
  z-index:0;
}

.viewport-label,.axis-readout{
  background:rgba(251,251,248,.82);
  border:1px solid rgba(201,207,202,.8);
  padding:6px 8px;
}

.mesh-item,.object-item{
  border-left:3px solid transparent;
  color:var(--ink-soft);
}

.mesh-item.active{
  background:#f1e8ea;
  border-left-color:var(--accent);
  color:var(--text);
}

.mesh-swatch{
  border:1px solid rgba(23,32,31,.22);
}

.outline-button,.mini-button,.sim-button,.topbar-button,.project-open,.project-delete,.plus-button{
  background:#fff;
  border-color:var(--line);
  color:var(--ink-soft);
}

.outline-button:hover,.mini-button:hover,.topbar-button:hover,.plus-button:hover,.project-open:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:#fff7f8;
}

.project-open{
  color:var(--accent);
}

.project-delete,.delete-module,.variable-row button,.assignment-row button{
  color:var(--danger);
}

.text-field input,.text-field select,.vector-fields input,.point-data input,.variable-row input,.assignment-row input,.assignment-row select{
  background:#fbfbf8;
  border:1px solid var(--line);
  color:var(--text);
}

.selected-node,.inspector-empty,.inspector-row,.color-row,.scene-stats,.module-heading,.hint,.formula-result,.volume-readout,.sim-readout,.simulation-section{
  border-color:var(--line);
}

.pulse{
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(163,31,52,.13);
}

.object-selected .pulse,.cyan{
  background:var(--cyan);
}

.object-selected .pulse{
  box-shadow:0 0 0 4px rgba(0,134,168,.14);
}

.inspector-empty{
  background:#fbfbf8;
}

.node-glyph{
  color:#9aa4a1;
}

.project-screen{
  background:
    linear-gradient(rgba(23,32,31,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,32,31,.045) 1px,transparent 1px),
    #f3f4f1;
  background-size:34px 34px;
  color:var(--text);
}

.project-shell{
  width:min(980px,100%);
}

.project-brand{
  border-bottom:2px solid var(--accent);
}

.project-heading>span,.project-card>span{
  color:var(--accent);
}

.project-heading h1{
  color:var(--text);
  font-size:38px;
  letter-spacing:0;
  text-transform:uppercase;
}

.project-heading p,.project-card p{
  color:var(--muted);
}

.project-card,.project-empty{
  background:rgba(255,255,255,.95);
  border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(23,32,31,.08);
}

.project-card h2{
  color:var(--text);
}

.scene-stats{
  background:#fbfbf8;
  padding:14px 10px 0;
}

.focus-object:hover,.focus-object:focus-visible,.focus-object.watching{
  color:var(--accent);
}

@media(max-width:800px){
  .topbar{
    gap:10px;
  }
  .universe-clock{
    margin-right:0;
  }
  .project-heading h1{
    font-size:28px;
  }
}

/* Miro-inspired typography pass */
html,body{
  font-family:'Inter',Arial,sans-serif;
  font-feature-settings:"cv02","cv03","cv04","cv11";
}

button,input,select{
  font-family:inherit;
}

.project-heading h1{
  font-size:42px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.025em;
  text-transform:none;
}

h1,h2,.brand-lockup strong,.project-card h2{
  font-family:'Inter',Arial,sans-serif;
  letter-spacing:-.01em;
}

h1,h2{
  font-size:14px;
  font-weight:700;
  text-transform:none;
}

.brand-lockup strong{
  font-size:15px;
  font-weight:800;
  letter-spacing:-.015em;
}

.project-heading p{
  font-size:15px;
  line-height:1.55;
}

.mesh-item,.object-item{
  font-size:13px;
  font-weight:500;
}

.project-primary,.project-open,.project-delete,.topbar-button,.outline-button,.mini-button,.plus-button,.sim-button{
  font-family:'Inter',Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
}

.project-heading>span,.project-card>span,.project-toolbar small,.brand-lockup small,.topbar-status,.universe-clock,.viewport-label,.axis-readout,.bottombar,.text-field,.field-label,.formula-result,.scene-stats span,.selected-node small,.node-index,.mesh-item small,.hint p,.visibility-grid label,.assignment-toggle,.point-data label,.simulation-toggle,.sim-field,.sim-readout,.volume-readout{
  letter-spacing:0;
  text-transform:none;
}

.project-heading>span,.project-card>span,.brand-lockup small,.topbar-status,.viewport-label,.axis-readout,.bottombar{
  font-size:10px;
}

.text-field,.field-label,.formula-result,.scene-stats span,.visibility-grid label,.point-data label,.simulation-toggle,.assignment-toggle,.sim-field{
  font-size:10px;
}

.text-field input,.text-field select,.vector-fields input,.point-data input,.variable-row input,.assignment-row input,.assignment-row select,.selected-node strong,.scene-stats strong,.formula-result strong,.universe-clock strong{
  font-family:'DM Mono',monospace;
}

@media(max-width:800px){
  .project-heading h1{
    font-size:31px;
  }
}

/* Readability pass */
body{
  font-size:14px;
}

.brand-lockup small{
  font-size:11px;
}

.project-heading>span,.project-card>span,.project-toolbar small,.topbar-status,.viewport-label,.axis-readout,.bottombar{
  font-size:11px;
}

.project-primary,.project-open,.project-delete,.topbar-button,.outline-button,.mini-button,.plus-button,.sim-button{
  font-size:13px;
}

.mesh-item,.object-item{
  font-size:14px;
}

.mesh-item small,.selected-node small,.node-index,.hint p,.text-field small{
  font-size:11px;
}

.text-field,.field-label,.formula-result,.scene-stats span,.visibility-grid label,.point-data label,.simulation-toggle,.assignment-toggle,.sim-field,.sim-readout,.volume-readout{
  font-size:12px;
}

.text-field input,.text-field select,.vector-fields input,.point-data input,.variable-row input,.assignment-row input,.assignment-row select{
  font-size:12px;
}

.selected-node strong{
  font-size:13px;
}

.formula-result strong,.universe-clock strong{
  font-size:13px;
}

.scene-stats strong{
  font-size:20px;
}

.project-card p{
  font-size:13px;
}

.inspector-empty strong{
  font-size:12px;
}

.inspector-empty span{
  font-size:11px;
}

.project-toolbar small,.project-card p,.hint p,.text-field small{
  font-family:'Inter',Arial,sans-serif;
}

.project-toolbar small{
  font-size:12px;
}

/* Assignment editor layout */
.assignment-list{
  gap:12px;
}

.assignment-row{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  padding:14px;
  background:#fbfbf8;
  border:1px solid var(--line);
}

.assignment-field{
  display:block;
  margin:0!important;
  color:var(--ink-soft)!important;
}

.assignment-field span{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font:11px 'Inter',Arial,sans-serif;
  font-weight:700;
}

.assignment-toggle{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:24px;
  color:var(--ink-soft);
  font-family:'Inter',Arial,sans-serif;
  font-size:13px;
  font-weight:600;
  white-space:normal;
}

.assignment-options{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  padding-top:2px;
}

.assignment-row select,.assignment-row input:not([type="checkbox"]){
  width:100%;
  min-height:34px;
}

.assignment-force{
  min-width:0!important;
}

@media(min-width:801px){
  .assignment-row{
    grid-template-columns:1fr 1fr;
  }

  .assignment-field-wide,.assignment-options{
    grid-column:1/-1;
  }
}

/* Dark mode */
body.dark-mode{
  --bg:#111416;
  --panel:#181d20;
  --line:#31393d;
  --muted:#8a9699;
  --text:#eef2ef;
  --accent:#ff5b6e;
  --cyan:#54c7df;
  --danger:#ff8073;
  --paper:#1d2326;
  --ink-soft:#c8d0ce;
  background:var(--bg);
  color:var(--text);
}

body.dark-mode .project-screen,body.dark-mode .app-shell{
  background:
    linear-gradient(rgba(238,242,239,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(238,242,239,.045) 1px,transparent 1px),
    #111416;
}

body.dark-mode .topbar,body.dark-mode .sidebar,body.dark-mode .bottombar{
  background:rgba(24,29,32,.97);
}

body.dark-mode .viewport{
  background:
    linear-gradient(rgba(238,242,239,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(238,242,239,.06) 1px,transparent 1px),
    #151a1d;
}

body.dark-mode .viewport-label,body.dark-mode .axis-readout,body.dark-mode .project-card,body.dark-mode .project-empty,body.dark-mode .inspector-empty,body.dark-mode .scene-stats,body.dark-mode .assignment-row{
  background:rgba(29,35,38,.96);
}

body.dark-mode .outline-button,body.dark-mode .mini-button,body.dark-mode .sim-button,body.dark-mode .topbar-button,body.dark-mode .project-open,body.dark-mode .project-delete,body.dark-mode .plus-button{
  background:#1d2326;
  color:var(--ink-soft);
}

body.dark-mode .outline-button:hover,body.dark-mode .mini-button:hover,body.dark-mode .topbar-button:hover,body.dark-mode .plus-button:hover,body.dark-mode .project-open:hover{
  background:#262026;
  color:var(--accent);
}

body.dark-mode .mesh-item.active{
  background:#2b2026;
}

body.dark-mode .text-field input,body.dark-mode .text-field select,body.dark-mode .vector-fields input,body.dark-mode .point-data input,body.dark-mode .variable-row input,body.dark-mode .assignment-row input,body.dark-mode .assignment-row select{
  background:#151a1d;
  border-color:var(--line);
  color:var(--text);
}

.project-secondary{
  padding:12px 14px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink-soft);
  cursor:pointer;
  font-family:'Inter',Arial,sans-serif;
  font-size:13px;
  font-weight:700;
}

.project-secondary:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:#fff7f8;
}

body.dark-mode .project-secondary{
  background:#1d2326;
  color:var(--ink-soft);
}

body.dark-mode .project-secondary:hover{
  background:#262026;
  color:var(--accent);
}

/* Friendlier rounded interface */
:root{
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
}

button,input,select,.viewport-label,.axis-readout,.mesh-item,.object-item,.inspector-empty,.selected-node,.scene-stats,.formula-result,.assignment-row,.project-card,.project-empty{
  border-radius:var(--radius-sm);
}

.project-primary,.project-secondary,.project-open,.project-delete,.topbar-button,.outline-button,.mini-button,.sim-button,.plus-button,.icon-button{
  border-radius:999px;
}

.text-field input,.text-field select,.vector-fields input,.point-data input,.variable-row input,.assignment-row input,.assignment-row select{
  border-radius:var(--radius-xs);
}

.project-card,.project-empty{
  border-radius:var(--radius-lg);
}

.assignment-row,.scene-stats,.inspector-empty{
  border-radius:var(--radius-md);
}

.mesh-item,.object-item{
  border-left-width:0;
  padding-left:10px;
}

.mesh-item.active{
  box-shadow:inset 3px 0 0 var(--accent);
}

.color-row,.inspector-row,.formula-result,.selected-node{
  padding-left:10px;
  padding-right:10px;
}

.color-row input{
  border-radius:50%;
}

/* n8n-like configuration conveyor */
.variable-list,.property-list,.assignment-list{
  position:relative;
  gap:14px;
  padding-left:18px;
}

.variable-list::before,.property-list::before,.assignment-list::before{
  content:"";
  position:absolute;
  left:6px;
  top:14px;
  bottom:14px;
  width:2px;
  background:linear-gradient(var(--accent),var(--cyan));
  opacity:.45;
}

.workflow-node,.assignment-row{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:14px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 10px 22px rgba(23,32,31,.07);
}

.workflow-node-head{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.workflow-node-head span{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.workflow-node-head strong{
  color:var(--text);
  font-size:14px;
  font-weight:800;
}

.workflow-field{
  display:block;
  margin:0!important;
  color:var(--ink-soft)!important;
  font-family:'Inter',Arial,sans-serif!important;
  font-size:12px!important;
  font-weight:700;
}

.workflow-field-wide{
  grid-column:1/-1;
}

.workflow-field input,.workflow-field select{
  display:block;
  width:100%;
  min-height:34px;
  margin-top:6px;
}

.workflow-field input:disabled{
  opacity:.58;
  cursor:not-allowed;
}

.node-port{
  position:absolute;
  width:12px;
  height:12px;
  border:2px solid var(--accent);
  border-radius:50%;
  background:var(--panel);
  top:22px;
}

.node-port.in{
  left:-24px;
}

.node-port.out{
  right:-7px;
  border-color:var(--cyan);
}

.remove-variable{
  position:absolute;
  right:10px;
  top:42px;
  width:24px;
  height:24px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--danger);
  cursor:pointer;
}

.assignment-row::after{
  content:"Mesh ↔ Objeto";
  grid-column:1/-1;
  order:-1;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

body.dark-mode .workflow-node,body.dark-mode .assignment-row{
  background:#1d2326;
  box-shadow:0 10px 22px rgba(0,0,0,.2);
}

body.dark-mode .node-port{
  background:#1d2326;
}

@media(max-width:800px){
  .workflow-node,.assignment-row{
    grid-template-columns:1fr;
  }
}

/* Fullscreen workflow editor */
.workflow-editor{
  position:fixed;
  inset:0;
  z-index:20;
  display:grid;
  grid-template-rows:70px auto 1fr;
  background:
    linear-gradient(rgba(23,32,31,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,32,31,.045) 1px,transparent 1px),
    var(--bg);
  background-size:32px 32px;
  color:var(--text);
}

.workflow-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 28px;
  border-bottom:2px solid var(--accent);
  background:rgba(255,255,255,.96);
}

.workflow-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.workflow-status{
  margin:18px 28px 0;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.94);
  color:var(--ink-soft);
  font-size:14px;
  font-weight:600;
}

.workflow-canvas{
  display:grid;
  grid-template-columns:260px 320px 360px 360px;
  gap:26px;
  align-items:start;
  overflow:auto;
  padding:26px 28px 42px;
}

.workflow-canvas section{
  position:relative;
  min-width:0;
}

.workflow-canvas section::before{
  content:"";
  position:absolute;
  left:17px;
  top:48px;
  bottom:16px;
  width:2px;
  background:linear-gradient(var(--accent),var(--cyan));
  opacity:.38;
}

.workflow-canvas h2{
  margin:0 0 14px;
  padding-left:2px;
  font-size:16px;
  font-weight:800;
}

.workflow-full-node{
  position:relative;
  min-height:128px;
  margin-bottom:16px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 38px rgba(23,32,31,.1);
}

.workflow-full-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.workflow-full-head span{
  color:var(--accent);
  font-size:12px;
  font-weight:800;
}

.workflow-full-head strong{
  color:var(--text);
  font-size:17px;
  font-weight:800;
}

.workflow-full-node p{
  margin:0 0 12px;
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.45;
}

.workflow-full-node small{
  color:var(--muted);
}

.workflow-full-node ul{
  display:grid;
  gap:7px;
  list-style:none;
  margin:0;
  padding:0;
}

.workflow-full-node li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--ink-soft);
  font-size:12px;
}

.workflow-full-node li strong{
  color:var(--text);
  font-family:'DM Mono',monospace;
  font-weight:500;
  text-align:right;
}

.workflow-full-port{
  position:absolute;
  width:14px;
  height:14px;
  border:2px solid var(--accent);
  border-radius:50%;
  background:var(--panel);
  top:24px;
}

.workflow-full-port.in{
  left:-16px;
}

.workflow-full-port.out{
  right:-8px;
  border-color:var(--cyan);
}

.workflow-empty{
  padding:24px;
  border:1px dashed var(--line);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.7);
  color:var(--muted);
  font-weight:600;
}

body.dark-mode .workflow-editor{
  background:
    linear-gradient(rgba(238,242,239,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(238,242,239,.045) 1px,transparent 1px),
    var(--bg);
}

body.dark-mode .workflow-topbar,body.dark-mode .workflow-status,body.dark-mode .workflow-full-node,body.dark-mode .workflow-empty{
  background:rgba(24,29,32,.97);
}

body.dark-mode .workflow-full-node li{
  background:#151a1d;
}

@media(max-width:900px){
  .workflow-canvas{
    grid-template-columns:1fr;
  }

  .workflow-topbar{
    padding:0 16px;
  }

  .workflow-status{
    margin:14px 16px 0;
  }

  .workflow-canvas{
    padding:20px 16px 34px;
  }
}

/* Sidebar returns to simple value editing */
.right-panel .variable-list,.right-panel .property-list{
  padding-left:0;
}

.right-panel .variable-list::before,.right-panel .property-list::before{
  display:none;
}

.value-row{
  grid-template-columns:1fr 1fr 28px;
  gap:8px;
  padding:0;
  background:transparent;
  box-shadow:none;
}

.value-row .remove-variable{
  position:static;
  width:28px;
  height:34px;
  align-self:end;
}

.property-list .value-row{
  grid-template-columns:1fr 1fr;
}

.workflow-open-button{
  margin:4px 0 18px;
}

/* Contextual workflow sub-screen */
.workflow-workspace{
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:0;
  overflow:hidden;
}

.workflow-palette{
  overflow:auto;
  padding:26px 18px;
  border-right:1px solid var(--line);
  background:rgba(255,255,255,.84);
}

.workflow-palette h2{
  margin:0 0 14px;
  font-size:16px;
  font-weight:800;
}

.workflow-mesh-option{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:42px;
  margin-bottom:8px;
  padding:0 12px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
  text-align:left;
  font-weight:700;
}

.workflow-mesh-option span{
  width:12px;
  height:12px;
  border-radius:50%;
  border:1px solid rgba(23,32,31,.2);
}

.workflow-mesh-option.active{
  border-color:var(--accent);
  box-shadow:inset 3px 0 0 var(--accent);
}

.workflow-palette-actions{
  display:grid;
  gap:10px;
  margin-top:22px;
}

.workflow-canvas{
  display:block;
  overflow:auto;
  padding:30px;
}

.workflow-board{
  min-width:720px;
}

.workflow-lane{
  display:flex;
  align-items:flex-start;
  gap:28px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.58);
}

.workflow-lane .workflow-full-node{
  width:260px;
  flex:0 0 260px;
}

.workflow-lane .workflow-full-node::before{
  content:"";
  position:absolute;
  left:-29px;
  top:31px;
  width:29px;
  border-top:2px solid rgba(163,31,52,.42);
}

.workflow-lane .workflow-full-node:first-child::before{
  display:none;
}

body.dark-mode .workflow-palette{
  background:rgba(24,29,32,.9);
}

body.dark-mode .workflow-lane{
  background:rgba(24,29,32,.58);
}

@media(max-width:900px){
  .workflow-workspace{
    grid-template-columns:1fr;
  }

  .workflow-palette{
    max-height:240px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .workflow-board{
    min-width:0;
  }

  .workflow-lane{
    flex-direction:column;
  }

  .workflow-lane .workflow-full-node{
    width:100%;
    flex-basis:auto;
  }
}

/* Free draggable workflow canvas */
.workflow-palette-title{
  margin-top:26px!important;
}

.workflow-free-board{
  position:relative;
  min-width:1100px;
  min-height:680px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(rgba(23,32,31,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,32,31,.04) 1px,transparent 1px),
    rgba(255,255,255,.58);
  background-size:28px 28px;
}

.workflow-free-board>h2{
  position:absolute;
  left:24px;
  top:18px;
  margin:0;
}

.workflow-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}

.workflow-lines line{
  stroke:var(--accent);
  stroke-width:3;
  stroke-linecap:round;
  opacity:.62;
}

.workflow-free-node{
  position:absolute;
  width:250px;
  min-height:138px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.97);
  box-shadow:0 18px 38px rgba(23,32,31,.12);
}

.workflow-free-node .workflow-full-head{
  cursor:grab;
  user-select:none;
}

.workflow-free-node .workflow-full-head:active{
  cursor:grabbing;
}

.workflow-free-node.add .workflow-full-head span,.workflow-free-node.multiply .workflow-full-head span,.workflow-free-node.divide .workflow-full-head span{
  color:var(--cyan);
}

.workflow-free-node.command .workflow-full-head span{
  color:var(--accent);
}

.workflow-free-node.attribute{
  border-color:rgba(0,134,168,.45);
}

.workflow-free-node.attribute .workflow-full-head span{
  color:var(--cyan);
}

.workflow-free-node .workflow-full-port{
  display:block;
  padding:0;
  cursor:pointer;
}

.workflow-free-node .workflow-full-port.in{
  left:-8px;
  top:64px;
}

.workflow-free-node .workflow-full-port.out{
  right:-8px;
  top:64px;
}

.node-output-value{
  margin-top:12px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--text);
  font:12px 'DM Mono',monospace;
}

.node-delete{
  position:absolute;
  right:10px;
  top:10px;
  width:24px;
  height:24px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--danger);
  cursor:pointer;
}

body.dark-mode .workflow-free-board{
  background:
    linear-gradient(rgba(238,242,239,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(238,242,239,.045) 1px,transparent 1px),
    rgba(24,29,32,.58);
}

body.dark-mode .workflow-free-node{
  background:transparent;
  box-shadow:none;
}

body.dark-mode .node-output-value{
  background:#151a1d;
}

/* Scrollable side panels */
.app-shell{
  min-height:0;
}

.sidebar{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}

.sidebar::-webkit-scrollbar{
  width:10px;
}

.sidebar::-webkit-scrollbar-thumb{
  background:var(--line);
  border:3px solid transparent;
  border-radius:999px;
  background-clip:content-box;
}

.module-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
}

.duplicate-module{
  border:0;
  background:transparent;
  color:#6c7474;
  font-size:14px;
  line-height:1;
  padding:2px 3px;
  cursor:pointer;
  opacity:.42;
}

.mesh-item:hover .duplicate-module,.mesh-item.active .duplicate-module,.mesh-item:hover .delete-module,.mesh-item.active .delete-module{
  opacity:1;
}

.duplicate-module:hover{
  color:var(--cyan);
}

body.dark-mode .duplicate-module{
  color:var(--muted);
}
/* Compact visual workflow and contextual inspector */
.workflow-editor { --line:#414348; --text:#eeeef0; --muted:#aaaab3; --panel:#292a2e; --paper:#242529; --ink-soft:#d1d1d8; background:#202124; color:#eeeef0; grid-template-rows:70px auto minmax(0,1fr); }
.workflow-editor .workflow-topbar,.workflow-editor .workflow-palette { background:#26272b; }
.workflow-editor .workflow-status { background:#292a2e; margin:0; border:0; border-bottom:1px solid #3d3e43; border-radius:0; font-size:12px; color:#bdbdc6; }
.workflow-workspace { position:relative; grid-template-columns:220px minmax(0,1fr); }
.workflow-editor .workflow-canvas { padding:0; background:#202124; }
.workflow-editor .workflow-free-board { border:0; border-radius:0; background:radial-gradient(circle,#44454b 1px,transparent 1px) 0 0 / 20px 20px; }
.workflow-free-board > h2 { color:#93949f; font-size:12px; font-weight:500; }
.workflow-editor .workflow-free-node { width:100px; min-height:84px; height:84px; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
.flow-box { display:flex; align-items:center; justify-content:center; width:84px; height:84px; margin:0 8px; background:#303237; border:2px solid #73767e; border-radius:12px; color:#65c6e7; cursor:grab; touch-action:none; user-select:none; font:600 32px monospace; box-shadow:0 6px 14px #0003; }
.flow-box:active { cursor:grabbing; }
.flow-box:hover,.flow-box:focus-visible,.selected .flow-box { border-color:#ff8075; outline:3px solid #ff807526; outline-offset:4px; }
.command .flow-box { color:#f5ba63; }
.add .flow-box,.multiply .flow-box,.divide .flow-box { color:#75d5a7; }
.attribute .flow-box { color:#afa1fa; }
.flow-node-title { display:block; width:160px; margin:12px 0 4px -30px; color:#eeeef0; text-align:center; font-size:12px; overflow-wrap:anywhere; }
.flow-node-type { display:block; width:170px; margin-left:-35px; text-align:center; color:#aaaab3; font-size:10px; }
.workflow-editor .workflow-free-node .workflow-full-port { top:35px; width:13px; height:13px; border:2px solid #b4b6bf; background:#b4b6bf; }
.workflow-editor .workflow-free-node .workflow-full-port.in { left:1px; border-radius:3px; }
.workflow-editor .workflow-free-node .workflow-full-port.out { right:1px; }
.workflow-full-port:hover { outline:4px solid #ff807555; }
.workflow-lines path { fill:none; stroke:#93969f; stroke-width:2; }
.workflow-editor .workflow-mesh-option,.workflow-editor .project-secondary,.workflow-editor .topbar-button { background:#303136; color:#e3e3e8; border-color:#494b53; }
.workflow-editor .workflow-palette-actions { gap:8px; }
.workflow-editor .workflow-palette-actions button { text-align:left; border-radius:8px; padding:12px; }
.flow-settings { position:absolute; top:12px; bottom:12px; right:12px; z-index:3; width:310px; padding:22px; overflow:auto; background:#292a2e; border:1px solid #4a4b54; border-radius:14px; box-shadow:0 12px 40px #0006; }
.flow-settings[hidden] { display:none; }
.flow-settings-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.flow-settings h2 { font-size:16px; margin:0; }
.flow-settings h3 { font-size:12px; margin-top:24px; }
.flow-settings p,.flow-settings #flowConnections { color:#b4b4be; font-size:12px; line-height:1.6; }
.flow-settings label { display:block; margin:20px 0; font-size:12px; }
.flow-settings input { display:block; width:100%; margin-top:8px; padding:11px; background:#1f2024; border:1px solid #50515b; color:#f0f0f3; }
.flow-settings button { cursor:pointer; }
.flow-settings-head button { background:transparent; border:0; color:#ccc; font-size:24px; }
.flow-result { display:flex; justify-content:space-between; padding:14px; background:#202125; border-radius:8px; font-size:13px; }
.flow-delete,.flow-disconnect { width:100%; padding:10px; margin-top:12px; border:1px solid #635052; background:#35272b; color:#ffaaa5; border-radius:8px; text-align:left; }
@media(max-width:700px) { .workflow-workspace { grid-template-columns:150px minmax(0,1fr); } .workflow-editor .workflow-palette { max-height:none; padding:16px 10px; border-right:1px solid #414348; } .flow-settings { width:min(310px,calc(100% - 24px)); } .workflow-topbar { gap:8px; padding:0 12px; } .workflow-actions { gap:4px; } }
/* Unbounded workflow viewport: the board moves as one world, including its wires. */
.workflow-editor .workflow-canvas {
  position:relative;
  overflow:hidden;
  min-height:0;
  touch-action:none;
  cursor:grab;
  background:radial-gradient(circle,#44454b 1px,transparent 1px) 0 0 / 20px 20px;
}
.workflow-editor .workflow-free-board {
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  background:none;
  transform-origin:0 0;
}
.workflow-canvas section.workflow-free-board::before { display:none; }
.workflow-canvas.is-panning,.workflow-canvas.is-panning * { cursor:grabbing; }
.workflow-context-menu {
  position:fixed;
  z-index:30;
  width:240px;
  max-width:calc(100vw - 16px);
  max-height:calc(100vh - 16px);
  overflow:auto;
  padding:8px;
  background:#292a2e;
  border:1px solid #50515b;
  border-radius:12px;
  box-shadow:0 12px 40px #0007;
}
.workflow-context-menu strong { display:block; padding:10px; font-size:12px; color:#aaaab3; }
.workflow-context-menu button { display:block; width:100%; padding:12px 10px; border:0; background:transparent; color:#eeeef0; text-align:left; cursor:pointer; }
.workflow-context-menu button:hover,.workflow-context-menu button:focus-visible { background:#414348; outline:2px solid #ff8075; }
/* Scene explorer */
.workflow-editor .workflow-palette { padding:22px 12px; border-color:var(--line); }
.workflow-palette h2 { padding:0 8px; margin-bottom:6px; }
.explorer-caption { margin:0 8px 22px; color:var(--muted); font-size:12px; }
.explorer-group { margin-bottom:14px; }
.explorer-group summary { padding:10px 8px; cursor:pointer; color:var(--ink-soft); font-size:12px; font-weight:700; user-select:none; }
.explorer-group summary small { float:right; color:var(--muted); font-weight:400; }
.explorer-items { margin-left:13px; border-left:1px solid var(--line); padding-left:6px; }
.explorer-item { display:flex; align-items:center; gap:8px; width:100%; padding:9px 8px; border:1px solid transparent; background:transparent; color:var(--text); text-align:left; cursor:pointer; border-radius:6px; }
.explorer-item:hover { background:var(--paper); }
.explorer-item.active { background:var(--paper); border-color:var(--line); box-shadow:inset 3px 0 var(--accent); }
.explorer-item:focus-visible,.explorer-group summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.explorer-icon { color:var(--item-color); flex:none; font-size:19px; text-shadow:0 0 1px var(--muted); }
.explorer-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.explorer-empty { padding:8px; color:var(--muted); font-size:12px; }
/* The workflow follows the application's light theme. */
body:not(.dark-mode) .workflow-editor { --line:#d4d9df; --text:#25313d; --muted:#667482; --panel:#fff; --paper:#edf1f5; --ink-soft:#465563; color:var(--text); background:#f5f7f9; }
body:not(.dark-mode) .workflow-editor .workflow-topbar,
body:not(.dark-mode) .workflow-editor .workflow-palette { background:#fff; }
body:not(.dark-mode) .workflow-editor .workflow-status { color:var(--ink-soft); background:#f5f7f9; border-color:var(--line); }
body:not(.dark-mode) .workflow-editor .workflow-canvas { background-color:#f5f7f9; background-image:radial-gradient(circle,#c8d1da 1px,transparent 1px); }
body:not(.dark-mode) .workflow-editor .workflow-free-board { background:none; }
body:not(.dark-mode) .workflow-free-board > h2,
body:not(.dark-mode) .flow-node-type { color:#667482; }
body:not(.dark-mode) .flow-node-title { color:#25313d; }
body:not(.dark-mode) .flow-box { background:#fff; border-color:#8a99a8; color:#007797; box-shadow:0 5px 15px #25313d12; }
body:not(.dark-mode) .command .flow-box { color:#966000; }
body:not(.dark-mode) .add .flow-box,
body:not(.dark-mode) .multiply .flow-box,
body:not(.dark-mode) .divide .flow-box { color:#25754d; }
body:not(.dark-mode) .attribute .flow-box { color:#7051b6; }
body:not(.dark-mode) .flow-box:hover,
body:not(.dark-mode) .flow-box:focus-visible,
body:not(.dark-mode) .selected .flow-box { border-color:var(--accent); outline-color:#a31f3426; }
body:not(.dark-mode) .workflow-editor .workflow-full-port { background:#748798; border-color:#748798; }
body:not(.dark-mode) .workflow-lines path { stroke:#748798; }
body:not(.dark-mode) .workflow-editor .topbar-button { color:var(--text); background:#fff; border-color:var(--line); }
body:not(.dark-mode) .flow-settings,
body:not(.dark-mode) .workflow-context-menu { background:#fff; border-color:var(--line); box-shadow:0 12px 40px #25313d20; }
body:not(.dark-mode) .flow-settings p,
body:not(.dark-mode) .flow-settings #flowConnections,
body:not(.dark-mode) .flow-settings-head button,
body:not(.dark-mode) .workflow-context-menu strong { color:var(--muted); }
body:not(.dark-mode) .flow-settings input { background:#f8fafc; border-color:var(--line); color:var(--text); }
body:not(.dark-mode) .flow-result { background:var(--paper); }
body:not(.dark-mode) .flow-delete,
body:not(.dark-mode) .flow-disconnect { color:#9d2837; background:#fff1f2; border-color:#ecc8ce; }
body:not(.dark-mode) .workflow-context-menu button { color:var(--text); }
body:not(.dark-mode) .workflow-context-menu button:hover,
body:not(.dark-mode) .workflow-context-menu button:focus-visible { background:var(--paper); outline-color:var(--accent); }
@media(max-width:700px) { .workflow-topbar { flex-wrap:wrap; justify-content:center; padding:8px; } .workflow-editor { grid-template-rows:auto auto minmax(0,1fr); } .workflow-actions { flex-wrap:wrap; justify-content:center; } }
.workflow-editor .workflow-full-port { touch-action:none; }
.workflow-lines path.workflow-connection-preview { stroke:var(--accent); stroke-dasharray:6 4; }
.workflow-editor .workflow-full-port.connection-target { outline:5px solid #55b78b66; background:#359367; border-color:#359367; }
/* Keep the movable board transparent in both themes. */
body .workflow-editor .workflow-free-board {
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.relation .flow-box { color:#e6a3dc; border-style:dashed; }
body:not(.dark-mode) .relation .flow-box { color:#90427e; }
.flow-settings select { display:block; width:100%; margin-top:8px; padding:11px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--text); }
.flow-settings .relation-toggle { display:flex; align-items:center; gap:10px; }
.flow-settings .relation-toggle input { display:inline-block; width:auto; margin:0; accent-color:var(--accent); }
.inspector-close { display:none; }
@media(max-width:800px) {
  .right-panel.inspector-open { display:block; position:fixed; top:58px; bottom:28px; right:0; width:min(286px,85vw); z-index:6; background:var(--panel); box-shadow:-8px 0 24px #0002; }
  .inspector-open .inspector-close { display:block; margin:0 0 12px auto; border:0; background:transparent; color:var(--text); font-size:24px; cursor:pointer; }
}
/* Scroll the project library independently from the simulation viewport. */
.project-screen { height:100dvh; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.project-card h2,.project-card p { overflow-wrap:anywhere; }
.project-card p { white-space:pre-line; }
.project-card-actions { flex-wrap:wrap; }
.project-card-actions .project-edit { padding:8px 14px; }
.project-dialog { width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:32px; border:1px solid var(--line); border-radius:24px; background:var(--panel); color:var(--text); box-shadow:0 24px 90px #0004; }
.project-dialog::backdrop { background:#10182088; backdrop-filter:blur(5px); }
.project-dialog-heading { display:flex; align-items:center; justify-content:space-between; }
.project-dialog-eyebrow { font-size:10px; letter-spacing:.16em; font-weight:700; color:var(--accent); }
.project-dialog-close { background:transparent; border:0; color:var(--muted); font-size:28px; cursor:pointer; }
.project-dialog h2 { margin:18px 0 10px; font-size:28px; letter-spacing:-.04em; text-transform:none; }
.project-dialog-intro { margin:0 0 26px; font-size:14px; color:var(--muted); line-height:1.6; }
.project-dialog label { display:block; margin:20px 0 8px; font-size:13px; font-weight:700; }
.project-dialog label small { margin-left:6px; font-weight:400; color:var(--muted); }
.project-dialog input,.project-dialog textarea { display:block; width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--text); font:inherit; font-size:14px; line-height:1.5; }
.project-dialog textarea { resize:vertical; min-height:110px; }
.project-dialog input:focus,.project-dialog textarea:focus { outline:2px solid var(--accent); outline-offset:2px; }
.project-dialog-note { font-size:12px; color:var(--muted); line-height:1.5; margin:16px 0 26px; }
.project-dialog-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:20px; border-top:1px solid var(--line); }
@media(max-width:520px) { .project-screen { padding:28px 16px; } .project-dialog { padding:22px; } .project-dialog-actions button { flex:1; } }