/* PowerTopology — design system. Lifted verbatim from the inline <style> of
   studio.html; not one declaration was changed. */
:root[data-theme="dark"]{
  --bg:#080b11; --grid:#111a26; --grid-strong:#16222f;
  --panel:#0d1219; --panel-2:#121a24; --panel-3:#18222e;
  --line:#1e2a38; --text:#e4edf6; --muted:#7d8ea3; --faint:#4b5a6b;
  --signal:#ffb454; --violet:#8b7bf7;
  --ok:#3ddc97; --warn:#ffb454; --down:#ff5f6d; --maint:#7d8da1;
  --node-fill:#111a24; --label-bg:#080b11; --edge:#41586e;
  --band:#1b2836; --band-text:#5b6d80;
  --shadow:0 18px 50px -20px rgba(0,0,0,.9);
}
:root[data-theme="light"]{
  --bg:#ffffff; --grid:#eef2f7; --grid-strong:#e2e8f0;
  --panel:#ffffff; --panel-2:#f6f8fb; --panel-3:#eaf0f7;
  --line:#d7dfe9; --text:#0f172a; --muted:#5a6b7e; --faint:#94a3b8;
  --signal:#b45309; --violet:#6d28d9;
  --ok:#15803d; --warn:#b45309; --down:#b91c1c; --maint:#64748b;
  --node-fill:#ffffff; --label-bg:#ffffff; --edge:#475569;
  --band:#cbd5e1; --band-text:#64748b;
  --shadow:0 14px 40px -22px rgba(15,30,50,.4);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
.display{font-family:'Space Grotesk',Inter,sans-serif;letter-spacing:-.01em}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.eyebrow{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:2px solid transparent;background-clip:content-box}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:6px}

.topbar{height:52px;background:var(--panel);border-bottom:1px solid var(--line)}
.rail{background:var(--panel);border-color:var(--line)}
.surface{background:var(--panel-2);border:1px solid var(--line)}
.btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:7px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background .13s,border-color .13s,color .13s,transform .1s}
.btn:hover{background:var(--panel-3);border-color:var(--faint)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--panel-2);color:var(--text)}
.btn.primary{background:var(--signal);border-color:var(--signal);color:#1a1204;font-weight:700}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger:hover{background:rgba(255,95,109,.12);border-color:var(--down);color:var(--down)}
.btn.on{background:color-mix(in srgb,var(--signal) 16%,transparent);border-color:var(--signal);color:var(--signal)}
.btn svg{width:14px;height:14px;flex:none;stroke-width:2}
.icon-btn{width:30px;height:30px;padding:0;justify-content:center}

.menu{position:absolute;z-index:60;min-width:230px;padding:5px;border-radius:11px;background:var(--panel-2);
  border:1px solid var(--line);box-shadow:var(--shadow);animation:pop .12s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border-radius:7px;font-size:12.5px;
  color:var(--text);cursor:pointer;background:none;border:0;text-align:left}
.menu-item:hover{background:var(--panel-3)}
.menu-item .k{margin-left:auto;font-size:10px;color:var(--faint)}
.menu-sep{height:1px;background:var(--line);margin:5px 2px}
.menu-head{padding:7px 9px 4px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700}

#stage{position:relative;background:var(--bg);overflow:hidden}
#grid-bg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px,26px 26px;opacity:.6}
#bands{position:absolute;inset:0;z-index:1;pointer-events:none}
#bandsTop{position:absolute;inset:0;z-index:3;pointer-events:none}
#bandsTop .grab{pointer-events:stroke;cursor:ns-resize;stroke:transparent}
#bandsTop .grab:hover{stroke:var(--signal);stroke-opacity:.22}
#bandsTop .notegrab{pointer-events:all;cursor:grab;fill:transparent;stroke:none}
#bandsTop .notegrab:hover{fill:var(--signal);fill-opacity:.14}
#bandsTop .notegrab.moved{stroke:var(--signal);stroke-opacity:.34;stroke-width:1;stroke-dasharray:2 2}
#stage.notedrag #bandsTop .notegrab{cursor:grabbing}
#stage.banddrag #bandsTop .grab{cursor:ns-resize}
.lvl-card{border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:7px;margin-bottom:7px}
.lvl-card.act{border-color:var(--signal)}
.lvl-sub{display:flex;align-items:center;gap:6px;margin-top:6px}
.lvl-sub .cap{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700;width:34px}
.stepper{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:7px;height:26px;padding:0 3px;background:var(--panel-3)}
.stepper button{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;color:var(--muted);font-size:13px;line-height:1}
.stepper button:hover{background:var(--panel-2);color:var(--text)}
.stepper .v{min-width:16px;text-align:center;font-size:11.5px;font-weight:700}
.sheetpick{display:flex;align-items:center;gap:3px;border:1px solid var(--line);border-radius:9px;padding:3px;background:var(--panel-2)}
.sheetpick button{width:19px;height:19px;border-radius:5px;border:1px solid rgba(127,140,160,.45);position:relative}
.sheetpick button.on{outline:2px solid var(--signal);outline-offset:1px}
.sheetpick button:hover{transform:translateY(-1px)}
.sheetpick .sp-sep{width:1px;height:16px;background:var(--line);margin:0 2px;flex:none}
.tseg{display:flex;gap:4px;padding:3px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2)}
.tbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;
  border-radius:7px;border:1px solid transparent;background:transparent;color:var(--muted);
  font-size:12px;font-weight:600;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.tbtn:hover{background:var(--panel-3);color:var(--text)}
.tbtn.on{background:color-mix(in srgb,var(--signal) 16%,transparent);border-color:var(--signal);color:var(--signal)}
.tbtn svg{width:14px;height:14px;flex:none}
.pref-row{display:flex;align-items:flex-start;gap:9px;padding:7px 2px;cursor:pointer}
.pref-row input{accent-color:var(--signal);width:15px;height:15px;margin-top:1px;flex:none}
.pref-row .pl{display:block;font-size:12.5px}
.pref-row .pn{display:block;font-size:10.5px;color:var(--faint);margin-top:2px;line-height:1.5}
.mini{height:26px;font-size:11px;padding:0 7px}
.row-list{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.row-item{display:flex;align-items:center;gap:5px;margin-top:4px}
.row-item .rn{width:16px;font-size:9.5px;color:var(--faint);text-align:center;flex:none}
.way-list{border:1px solid var(--line);border-radius:9px;padding:4px;max-height:260px;overflow:auto;background:var(--panel-3)}
.way-row{display:flex;align-items:center;gap:5px;padding:3px;border-radius:6px;cursor:grab;
  touch-action:none;user-select:none;background:transparent;transition:background .12s}
.way-row:hover{background:var(--panel-2)}
.way-row:focus-visible{outline:1px solid var(--signal);outline-offset:-1px}
.way-row.dragging{cursor:grabbing;background:var(--panel-2);box-shadow:0 4px 14px rgba(0,0,0,.35);
  outline:1px solid var(--signal);outline-offset:-1px;position:relative;z-index:2}
.way-row .wgrip{display:grid;place-items:center;width:13px;flex:none;color:var(--faint);opacity:.7}
.way-row .wgrip svg{width:12px;height:12px}
.way-list.live .way-row:not(.dragging){opacity:.85}
.way-row .wn{width:15px;font-size:9.5px;color:var(--faint);text-align:right;flex:none}
.way-row .wdot{width:7px;height:7px;border-radius:2px;flex:none}
.way-row .wdir{font-size:8.5px;font-weight:700;color:var(--faint);width:22px;flex:none}
.way-row .wtag{font-size:10.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.src-row{display:flex;align-items:center;gap:6px;padding:2px 0}
.src-dot{width:22px;height:22px;flex:none;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.src-dot::-webkit-color-swatch-wrapper{padding:2px}
.src-dot::-webkit-color-swatch{border:none;border-radius:4px}
#cy{position:absolute;inset:0;z-index:2}
#stage.linking #cy{cursor:crosshair}

.link-banner{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:8px;
  padding:6px 13px;border-radius:99px;background:color-mix(in srgb,var(--signal) 14%,transparent);
  border:1px solid var(--signal);color:var(--signal);font-size:11.5px;font-weight:600;backdrop-filter:blur(8px)}
.dot-pulse{width:7px;height:7px;border-radius:99px;background:currentColor;animation:pulse 1.3s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.float{position:absolute;z-index:20;display:flex;padding:4px;gap:2px;border-radius:11px;
  background:color-mix(in srgb,var(--panel) 90%,transparent);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(10px)}
#minimap{position:absolute;right:14px;bottom:14px;z-index:20;width:200px;height:130px;border-radius:11px;
  background:color-mix(in srgb,var(--panel) 93%,transparent);border:1px solid var(--line);box-shadow:var(--shadow);
  cursor:crosshair;overflow:hidden;backdrop-filter:blur(10px)}
#minimap canvas{display:block;width:100%;height:100%}
.mm-label{position:absolute;top:5px;left:8px;pointer-events:none}

.rail-left{width:256px;transition:width .18s,opacity .18s}
.rail-left.collapsed{width:0;opacity:0;overflow:hidden;border:0}
.rail-right{width:320px;transition:width .18s,opacity .18s}
.rail-right.collapsed{width:0;opacity:0;overflow:hidden;border:0}
.tabs{display:flex;gap:2px;padding:6px;border-bottom:1px solid var(--line)}
.tab{flex:1;height:27px;border-radius:6px;border:0;background:transparent;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer}
.tab:hover{color:var(--text);background:var(--panel-2)}
.tab.active{background:var(--panel-3);color:var(--text)}

.palette-group{margin-bottom:9px}
.palette-item{display:flex;align-items:center;gap:9px;width:100%;padding:6px 8px;border-radius:8px;border:1px solid transparent;
  background:transparent;cursor:grab;text-align:left;transition:background .12s,border-color .12s}
.palette-item:hover{background:var(--panel-2);border-color:var(--line)}
.palette-item:active{cursor:grabbing}
.palette-item .chip{width:28px;height:28px;flex:none;border-radius:6px;display:grid;place-items:center;border:1px solid var(--line);background:var(--node-fill)}
.palette-item .chip svg{width:16px;height:16px}
.palette-item .nm{font-size:12px;font-weight:500}
.layer-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;cursor:pointer;border:1px solid transparent}
.layer-row:hover{background:var(--panel-2)}
.layer-row.sel{background:color-mix(in srgb,var(--signal) 12%,transparent);border-color:var(--signal)}
.layer-row .sq{width:8px;height:8px;border-radius:2px;flex:none;margin-top:4px}
.layer-row{align-items:flex-start}
.layer-row .tag{white-space:normal;word-break:break-word;line-height:1.3}
.rail-left{position:relative}
/* A rail is user-resizable, so every control in it has to survive being made
   narrow. Sliders take the width they are given rather than their own, and the
   ornaments beside them stand down before the slider itself does. */
.rail input[type="range"]{width:100%;min-width:0}
.rail .surface,.rail .field{min-width:0}
.rail .surface>*{min-width:0}
#railLeft.narrow .rail-wide{display:none}
/* Under this width a slider has nothing left to slide along, so the rail
   swaps it for a stepper you can still hit accurately. */
.rail-narrow{display:none}
#railLeft.narrow .rail-narrow{display:block;flex:1 1 0;min-width:0}
#railLeft.narrow .rail input[type="range"],#railLeft.narrow input[type="range"]{display:none}
.disc{overflow:hidden}
.disc>summary{display:flex;align-items:center;gap:8px;padding:9px 10px;cursor:pointer;list-style:none}
.disc>summary::-webkit-details-marker{display:none}
.disc>summary::after{content:'';margin-left:auto;width:6px;height:6px;flex:none;
  border-right:1.6px solid var(--faint);border-bottom:1.6px solid var(--faint);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .14s ease}
.disc[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.disc>summary:hover{background:var(--panel-3)}
.disc>summary .dv{margin-left:auto;font-size:10.5px;color:var(--faint)}
.disc>summary::after{margin-left:8px}
.disc-body{padding:0 10px 10px}
#railGrip{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:45}
#railGrip:hover{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--signal) 45%,transparent),transparent)}

.field{margin-bottom:11px}
.hr-soft{height:1px;background:var(--line);margin:2px 0 12px}
.field label{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.input,select.input,textarea.input{width:100%;height:32px;padding:0 9px;border-radius:7px;background:var(--panel-2);
  border:1px solid var(--line);color:var(--text);font-size:12.5px;font-family:inherit;outline:none;transition:border-color .12s,box-shadow .12s}
textarea.input{height:auto;padding:8px 9px;resize:vertical;line-height:1.45}
.input:focus{border-color:var(--signal);box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 18%,transparent)}
select.input{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 13px,calc(100% - 10px) 13px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:26px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg{display:flex;gap:3px;padding:3px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line)}
.seg button{flex:1;height:25px;border:0;border-radius:5px;background:transparent;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--panel-3);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.feedsw{display:flex;flex-wrap:wrap;gap:6px}
.fsw{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:7px;border:1px solid var(--line);
  background:var(--panel-2);cursor:pointer;font-size:11px;color:var(--muted)}
.fsw .d{width:11px;height:11px;border-radius:3px}
.fsw.on{border-color:var(--text);color:var(--text)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.stat{padding:8px 9px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line)}
.stat .v{font-size:17px;font-weight:700;line-height:1.1}
.stat .l{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-top:2px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:99px;font-size:10.5px;font-weight:600}
.badge .d{width:6px;height:6px;border-radius:99px}
.meter{height:6px;border-radius:99px;background:var(--panel-3);overflow:hidden;margin-top:5px}
.meter i{display:block;height:100%;border-radius:99px}
.audit-row{display:flex;gap:9px;padding:9px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line);margin-bottom:7px;cursor:pointer}
.audit-row:hover{border-color:var(--faint)}
.audit-row .ic{width:16px;height:16px;flex:none;margin-top:1px}
.audit-row .t{font-size:12px;font-weight:600}
.audit-row .d{font-size:11px;color:var(--muted);line-height:1.45;margin-top:2px}
.lvl-row{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.lvl-row .n{width:22px;height:26px;display:grid;place-items:center;border-radius:6px;background:var(--panel-3);
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--muted);flex:none}

.scrim{position:fixed;inset:0;z-index:80;background:rgba(4,7,11,.72);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px}
.modal{width:100%;max-width:620px;max-height:86vh;overflow:auto;border-radius:15px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);animation:pop .15s ease-out}
.dropzone{border:1.5px dashed var(--line);border-radius:11px;padding:20px;text-align:center;transition:.15s}
.dropzone.over{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 8%,transparent)}
.kbd{display:inline-block;min-width:20px;padding:1px 6px;border-radius:5px;background:var(--panel-3);border:1px solid var(--line);border-bottom-width:2px;font-family:'JetBrains Mono',monospace;font-size:10.5px;text-align:center}
#toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:7px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:10px;background:var(--panel-3);border:1px solid var(--line);
  box-shadow:var(--shadow);font-size:12.5px;font-weight:500;animation:rise .18s ease-out;max-width:460px}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast.err{border-color:var(--down);color:var(--down)}
.toast.ok{border-color:var(--ok)}
.empty{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none;text-align:center}
.empty .card{pointer-events:auto;max-width:430px}
#outageBar{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:21;display:none;align-items:center;gap:10px;
  padding:7px 14px;border-radius:99px;background:color-mix(in srgb,var(--down) 16%,var(--panel));border:1px solid var(--down);
  color:var(--down);font-size:12px;font-weight:600;backdrop-filter:blur(8px)}
table.sched{width:100%;border-collapse:collapse;font-size:11px}
table.sched th{text-align:left;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:6px 7px;border-bottom:1px solid var(--line)}
table.sched td{padding:5px 7px;border-bottom:1px solid var(--line);color:var(--muted)}
table.sched td.tag{color:var(--text);font-family:'JetBrains Mono',monospace}
/* ------------------------------------------------ header hierarchy */
/* Nothing in the bar may grow past its box. Without this the groups keep their
   content width, run into one another and paint one label over the next — and
   a control you can see but cannot hit is worse than one that is not there. */
.topbar{gap:0;overflow:hidden}
.hgroup{display:flex;align-items:center;gap:6px;min-width:0}
.hgroup>*{flex:none}
.hsep{width:1px;height:22px;background:var(--line);margin:0 10px;flex:none}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  border-radius:9px;padding:2px 5px 2px 2px;margin-left:-2px;
  transition:background .12s ease}
a.brand:hover{background:var(--panel-2)}
a.brand:hover .brand-mark{transform:translateY(-1px)}
.brand-mark{transition:transform .12s ease}
.brand-mark{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(140deg,#ffb454,#ff7a45);flex:none}
#identity{display:flex;align-items:center;gap:6px;min-width:0}
#hostActions{display:flex;align-items:center;gap:6px}
#hostActions:empty{display:none}
.btn.quiet{background:transparent;border-color:transparent;color:var(--muted)}
.btn.quiet:hover{background:var(--panel-2);border-color:var(--line);color:var(--text)}
@media (max-width:1500px){ .hlabel{display:none} .btn.hcompact{padding:0 8px} }
@media (max-width:1240px){ .hgroup.optional{display:none} }
@media (max-width:1080px){ #saveChip .mono{display:none} }
@media (max-width:820px){ .brand .leading-none{display:none} }

/* ------------------------------------------- progressive disclosure
   Visibility only — nothing is unbound or removed, so a hidden control is
   still reachable by shortcut and comes back the moment the stage lifts. */
html[data-ui="0"] .ui1, html[data-ui="0"] .ui2, html[data-ui="1"] .ui2{display:none !important}
/* Stage 0 is a blank sheet and a stranger. The application bar is a promise of
   complexity they have not asked for yet, so it stays away and the canvas is
   the whole window — one floating bar with the two things worth doing, and a
   menu for everything else. */
html[data-ui="0"] .topbar{display:none}
/* View only: the drawing and the one control that gets you back out of it. */
html[data-viewonly="1"] .rail,
html[data-viewonly="1"] .float,
html[data-viewonly="1"] #minimap,
html[data-viewonly="1"] #coach,
html[data-viewonly="1"] #statusBanner,
html[data-viewonly="1"] .hgroup:not(.viewkeep):not(.brandgroup),
html[data-viewonly="1"] .hsep:not(.viewkeep){display:none !important}
/* Mode selection lives on the right-click menu now. It comes back to the bar
   in view only, where the tools it would turn on are hidden and the canvas
   menu is the only other way back. */
#btnMode{display:none}
html[data-viewonly="1"] #btnMode{display:flex !important}
html[data-viewonly="1"] #btnUndo,
html[data-viewonly="1"] #btnRedo{display:none !important}
html[data-viewonly="1"] .topbar{display:flex !important}
.danger-item{color:var(--bad)}
/* The browser drops a native title when the element under the pointer is
   replaced, which the icon pass does on every redraw — so the hint is drawn
   here instead and belongs to the button rather than to its contents. */
.float [data-tip]{position:relative}
.float [data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(3px);background:var(--panel-3);color:var(--text);
  border:1px solid var(--line);border-radius:7px;padding:4px 8px;font-size:11px;font-weight:600;
  white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .11s ease,transform .11s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.32);z-index:40}
.float [data-tip]:hover::after,.float [data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%)}
.float [data-tip].on::after{color:var(--signal)}
.menu-appearance{padding:9px 11px 11px;border-top:1px solid var(--line)}
.menu-appearance .row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.menu-appearance .row>span{font-size:12.5px;flex:1}
.menu-appearance .tseg{flex:none;width:auto}
.menu-appearance .tbtn{width:34px;flex:none;padding:0}
.menu-appearance .tbtn span{display:none}
html[data-ui="0"] #zeroBar{display:flex}
html[data-ui="0"] #appMenuBtn{display:grid}
html[data-ui="0"] #hdrMenuBtn{display:none}
#zeroBar,#appMenuBtn{display:none}
#zeroBar{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:30;
  align-items:center;gap:3px;padding:5px;border-radius:13px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--line);
  box-shadow:var(--shadow);backdrop-filter:blur(10px)}
#zeroBar .sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.gbar{display:flex;align-items:center;gap:2px}
.gchip{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:9px;
  border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;
  font-size:12px;font-weight:600;transition:background .12s,color .12s,border-color .12s}
.gchip:hover{background:var(--panel-2);color:var(--text)}
.gchip.on{background:color-mix(in srgb,var(--signal) 15%,transparent);
  border-color:var(--signal);color:var(--signal)}
.gchip svg{width:15px;height:15px;flex:none}
@media (max-width:1180px){ .gchip .gl{display:none} .gchip{padding:0 8px} }
#appMenuBtn{position:absolute;top:14px;left:14px;z-index:30;width:36px;height:36px;
  place-items:center;border-radius:11px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:var(--shadow);
  backdrop-filter:blur(10px);cursor:pointer;color:var(--muted)}
#appMenuBtn:hover{color:var(--text);border-color:var(--faint)}
html[data-ui="0"] #railLeft{display:none}
html[data-ui="0"] #railLeft.forced{display:flex}
/* The rail toggle occupies the same corner as the stage-0 menu button and
   controls a rail that is not on screen yet. Two overlapping round buttons in
   the top-left corner read as one control drawn twice, so it stands down until
   there is a rail to toggle. */
html[data-ui="0"] #floatLeftToggle{display:none}
#zeroHint{position:absolute;top:60px;left:50%;transform:translateX(-50%);z-index:29;
  font-size:11.5px;color:var(--faint);pointer-events:none;white-space:nowrap}
html[data-ui="0"] #zeroHint{display:block}
#zeroHint{display:none}
@media (max-width:760px){ #zeroHint{display:none !important} }

/* --------------------------------------------------- placement preview */
#dropGhost{position:absolute;inset:0;z-index:19;pointer-events:none;display:none}
#dropGhost.on{display:block}
#dropGhost .gbox{position:absolute;border:1.6px dashed var(--signal);border-radius:5px;
  background:color-mix(in srgb,var(--signal) 9%,transparent)}
#dropGhost .gbox.blocked{border-color:var(--down);background:color-mix(in srgb,var(--down) 11%,transparent)}
#dropGhost .gband{position:absolute;left:0;right:0;background:color-mix(in srgb,var(--signal) 6%,transparent);
  border-top:1px dashed color-mix(in srgb,var(--signal) 45%,transparent);
  border-bottom:1px dashed color-mix(in srgb,var(--signal) 45%,transparent)}
#dropGhost .gchip{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  padding:3px 8px;border-radius:99px;background:var(--panel-3);border:1px solid var(--signal);
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:var(--signal)}
#dropGhost .gchip.blocked{border-color:var(--down);color:var(--down)}

/* ------------------------------------------------------ preset picker */
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.preset-card{display:flex;gap:11px;align-items:flex-start;padding:12px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel-2);cursor:pointer;text-align:left;
  transition:border-color .13s,background .13s}
.preset-card:hover{border-color:var(--signal);background:var(--panel-3)}
.preset-card .pi{width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:var(--panel-3);border:1px solid var(--line)}
.preset-card .pi svg{width:15px;height:15px;color:var(--signal)}
.preset-card .pt{font-size:12.5px;font-weight:600}
.preset-card .pd{font-size:11px;color:var(--muted);line-height:1.45;margin-top:2px}
@media (max-width:640px){ .preset-grid{grid-template-columns:1fr} }

/* ------------------------------------------------ first-run surfaces */
.empty .card{max-width:520px}
.start-tile.resume{width:100%;flex-direction:row;align-items:center;gap:11px;text-align:left;margin-top:16px;
  border-color:var(--signal);background:color-mix(in srgb,var(--signal) 9%,transparent)}
.start-tile.resume .si{margin:0}
.start-tile.resume .st{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.start-tile.resume .sd{flex:none}
.start-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:16px}
.start-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 9px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel-2);cursor:pointer;transition:border-color .13s,background .13s,transform .1s}
.start-tile:hover{border-color:var(--signal);background:var(--panel-3)}
.start-tile:active{transform:translateY(1px)}
.start-tile .si{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:var(--panel-3);border:1px solid var(--line)}
.start-tile .si svg{width:15px;height:15px;color:var(--signal)}
.start-tile .st{font-size:12px;font-weight:600}
.start-tile .sd{font-size:10.5px;color:var(--faint);line-height:1.4}
@media (max-width:640px){ .start-grid{grid-template-columns:1fr} }

#coach{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:22;display:none;
  align-items:center;gap:11px;max-width:min(560px,86vw);padding:9px 10px 9px 13px;border-radius:12px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--line);
  box-shadow:var(--shadow);backdrop-filter:blur(10px)}
#coach.on{display:flex;animation:rise .2s ease-out}
#coach .cstep{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;
  color:var(--signal);flex:none}
#coach .ctext{font-size:12px;line-height:1.45;min-width:0}
#coach .ctext b{font-weight:600}
#coach .cdots{display:flex;gap:4px;margin-left:auto;flex:none}
#coach .cdots i{width:5px;height:5px;border-radius:99px;background:var(--line);display:block}
#coach .cdots i.on{background:var(--signal)}
@media (max-width:900px){ #coach{display:none !important} }

/* -------------------------------------------------------- connections */
.conn-list{display:flex;flex-direction:column;gap:3px;max-height:300px;overflow:auto}
.conn-row{display:flex;align-items:center;gap:7px;width:100%;padding:5px 7px;border-radius:7px;
  border:1px solid var(--line);background:var(--panel-2);cursor:pointer;text-align:left;
  transition:border-color .12s,background .12s}
.conn-row:hover{border-color:var(--signal);background:var(--panel-3)}
.conn-row .cd{width:7px;height:7px;border-radius:99px;flex:none}
.conn-row .ct{font-size:11.5px;font-weight:600;flex:none;max-width:44%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.conn-row .cs{font-size:10.5px;color:var(--faint);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.conn-row .cx{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--down);flex:none}
.conn-row svg{width:12px;height:12px;flex:none;color:var(--faint)}
.conn-row{flex-direction:column;align-items:stretch;gap:4px;cursor:default}
.conn-go{display:flex;align-items:center;gap:7px;width:100%;background:none;border:0;padding:0;
  cursor:pointer;text-align:left;color:inherit}
.conn-edit{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.conn-edit .input{height:24px;font-size:10.5px;padding:0 6px}

/* ------------------------------------------------ energisation notices */
.live-note{display:flex;gap:8px;align-items:flex-start;padding:8px 9px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel-2);font-size:11.5px;line-height:1.5}
.live-note svg{width:14px;height:14px;flex:none;margin-top:2px}
.live-note b{font-weight:600;display:block}
.live-note span{color:var(--muted)}
.live-note.dead{border-color:color-mix(in srgb,var(--down) 45%,transparent);
  background:color-mix(in srgb,var(--down) 9%,transparent)}
.live-note.dead svg,.live-note.dead b{color:var(--down)}
.live-note.off svg,.live-note.off b{color:var(--muted)}
.live-note.warn{border-color:color-mix(in srgb,var(--signal) 40%,transparent);
  background:color-mix(in srgb,var(--signal) 7%,transparent)}
.live-note.warn svg,.live-note.warn b{color:var(--signal)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--signal);
  font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linkish:hover{color:var(--text)}

/* ------------------------------------------------------ status toolbox */
.st-grid{display:flex;flex-wrap:wrap;gap:4px}
.st-chip{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:7px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;
  transition:border-color .12s,color .12s,background .12s}
.st-chip:hover{color:var(--text);border-color:var(--faint)}
.st-chip.on{border-color:var(--text);color:var(--text);background:var(--panel-3)}
.st-chip.armed{border-color:var(--signal);color:var(--signal);
  background:color-mix(in srgb,var(--signal) 13%,transparent)}
.st-chip .d{width:9px;height:9px;border-radius:2px;flex:none;border:1px solid rgba(127,140,160,.5)}
.st-chip .d.line{height:0;border-radius:0;border:0;border-top-width:2px;border-top-style:solid;width:14px}
.st-count{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:7px;cursor:pointer;
  border:1px solid transparent}
.st-count:hover{background:var(--panel-2);border-color:var(--line)}
.st-count.zero{opacity:.42}
.st-count.zero:hover{opacity:.75}
.st-count .lb{font-size:11.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-count .vv{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700}
.st-count .bar{height:3px;border-radius:99px;background:var(--panel-3);overflow:hidden;
  width:46px;flex:none}
.st-count .bar i{display:block;height:100%;border-radius:99px}
.st-off{opacity:.5}
#statusBanner{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:22;display:none;
  align-items:center;gap:9px;padding:6px 8px 6px 13px;border-radius:99px;
  background:color-mix(in srgb,var(--signal) 14%,var(--panel));border:1px solid var(--signal);
  color:var(--signal);font-size:11.5px;font-weight:600;backdrop-filter:blur(8px)}
#statusBanner.on{display:flex}
#stage.arming #cy{cursor:cell}

/* ---------------------------------------------------- import sources */
.src-list{display:flex;flex-direction:column;gap:6px}
.imp-row{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel-2);cursor:pointer;text-align:left;
  transition:border-color .13s,background .13s}
.imp-row:hover{border-color:var(--signal);background:var(--panel-3)}
.imp-row[disabled]{opacity:.45;cursor:not-allowed}
.imp-row[disabled]:hover{border-color:var(--line);background:var(--panel-2)}
.imp-row .ii{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--panel-3);border:1px solid var(--line)}
.imp-row .ii svg{width:16px;height:16px;color:var(--muted)}
.imp-row:hover .ii svg{color:var(--signal)}
.imp-row .it{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.imp-row .id2{font-size:11px;color:var(--muted);line-height:1.45;margin-top:2px}
.tier-pill{display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:99px;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.09em;font-weight:700;
  background:color-mix(in srgb,var(--violet) 18%,transparent);color:var(--violet);
  border:1px solid color-mix(in srgb,var(--violet) 42%,transparent)}
.gate-hero{display:flex;gap:13px;padding:14px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel-2)}
.gate-hero .gi{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--violet) 16%,transparent);border:1px solid color-mix(in srgb,var(--violet) 40%,transparent)}
.gate-hero .gi svg{width:19px;height:19px;color:var(--violet)}
.gate-list{margin-top:12px}
.gate-list div{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--muted);padding:3px 0;line-height:1.5}
.gate-list svg{width:13px;height:13px;flex:none;margin-top:3px;color:var(--ok)}

@media (max-width:900px){
  .rail-left,.rail-right{position:absolute;top:52px;bottom:0;z-index:40;box-shadow:var(--shadow)}
  .rail-left{left:0}.rail-right{right:0}
  #minimap{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ---------------------------------------------------- drawing quality */
#qcLayer{position:absolute;inset:0;z-index:4;pointer-events:none}
#qcLayer .qc-x{stroke:var(--down);stroke-opacity:.92;fill:none;stroke-linecap:round}
#qcLayer .qc-ring{fill:none;stroke:var(--down);stroke-opacity:.9}
#qcLayer .qc-lab{fill:var(--violet);fill-opacity:.22;stroke:var(--violet);stroke-opacity:.9}
#qcLayer .qc-ov{fill:var(--down);fill-opacity:.16;stroke:var(--down);stroke-opacity:.85}
#qcLayer .qc-tight{fill:var(--down);fill-opacity:.07;stroke:var(--down);stroke-opacity:.55;stroke-dasharray:6 4}
#qcLayer .qc-gridbox{fill:none;stroke:var(--signal);stroke-opacity:.65}
#qcLayer .qc-ping{fill:none;stroke:var(--signal);transform-box:fill-box;transform-origin:center;
  animation:qcping 1.5s cubic-bezier(.2,.7,.3,1) 2}
@keyframes qcping{0%{stroke-opacity:.95;transform:scale(.28)}70%{stroke-opacity:.18}100%{stroke-opacity:0;transform:scale(1.25)}}

.qc-head{display:flex;align-items:flex-start;gap:10px}
.qc-score{font-family:'JetBrains Mono',monospace;font-size:23px;font-weight:700;line-height:1}
.qc-bar{height:4px;border-radius:99px;background:var(--panel-3);overflow:hidden;margin-top:8px}
.qc-bar i{display:block;height:100%;border-radius:99px;transition:width .35s ease}
.qc-grp{border:1px solid var(--line);border-radius:9px;background:var(--panel-2);margin-bottom:6px;overflow:hidden}
.qc-grp.clean{opacity:.62}
.qc-grp>.hd{display:flex;align-items:center;gap:8px;padding:8px 9px;user-select:none}
.qc-grp:not(.clean)>.hd{cursor:pointer}
.qc-grp:not(.clean)>.hd:hover{background:var(--panel-3)}
.qc-grp .n{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700}
.qc-grp .cx{font-size:9px;color:var(--faint);width:9px;text-align:center;flex:none}
.qc-grp .bl{font-size:10.5px;color:var(--faint);line-height:1.4;padding:0 9px 8px 32px;margin-top:-4px}
.qc-grp .cv{border-top:1px solid var(--line);padding:4px;max-height:270px;overflow-y:auto}
.qc-item{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:7px;cursor:pointer;
  font-size:11px;color:var(--muted);line-height:1.3}
.qc-item:hover{background:var(--panel-3);color:var(--text)}
.qc-item .dot{width:5px;height:5px;border-radius:99px;flex:none}
.qc-item .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qc-item .at{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--faint);flex:none}
.qc-more{font-size:10.5px;color:var(--faint);text-align:center;padding:5px}
.qc-grp .sc{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;opacity:.8;
  border:1px solid var(--line);border-radius:5px;padding:1px 4px;flex:none}
.qc-fix{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.tidy-row{display:flex;gap:9px;align-items:flex-start;padding:9px;border-radius:9px;background:var(--panel-2);
  border:1px solid var(--line);margin-bottom:6px;cursor:pointer}
.tidy-row:hover{border-color:var(--faint)}
.tidy-row input{accent-color:var(--signal);width:15px;height:15px;margin-top:1px;flex:none}
.tidy-step{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px;background:var(--panel-2);
  border:1px solid var(--line);margin-bottom:6px;font-size:12px;color:var(--muted)}
.tidy-step .pip{width:7px;height:7px;border-radius:99px;background:var(--faint);flex:none}
.tidy-step.active{border-color:var(--signal);color:var(--text)}
.tidy-step.active .pip{background:var(--signal);animation:qcping 1s ease-out infinite;transform-box:fill-box}
.tidy-step.done .pip{background:var(--ok)}
.tidy-step .nm{flex:1;min-width:0}
.tidy-step .rs{font-size:10.5px;color:var(--faint);flex:none}
.qc-fix .btn{height:26px;font-size:11px}