:root{
  --bg:#E6EBF0; --panel:#F6F8FA; --panel-2:#EDF1F5; --ink:#15202B; --ink-2:#3A4755; --muted:#637284;
  --line:#CFD7E0; --line-strong:#AEB9C6;
  --accent:#2B55C4; --accent-ink:#FFFFFF; --accent-soft:#DCE4F7;
  --wing:#B9C6D6; --lift:#2B8A3E; --drag:#E8590C; --cargo:#A0662A; --cable:#9A3AA6; --grav:#8A5A2B; --mass:#5F6B77; --frame:#3A4552; --wind:#1F7E86; --torque:#D6337A;
  --sensor:#5E7F12; --swing:#D08600; --ax-x:#D2412F; --ax-y:#2C9A47; --ax-z:#2F62D8; --good:#157046; --warn:#8A5A0E; --bad:#C0392F; --good-soft:#DDF0E6; --warn-soft:#F6EAD3; --bad-soft:#F6DEDB;
  --viewport:#DCE3EA; --grid:#C6CFD9; --grid-strong:#A3B0BE; --bldg:#EEF1F4; --bldg-edge:#8E9CAB;
  --f-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1217; --panel:#141B22; --panel-2:#1A232C; --ink:#E2E8EE; --ink-2:#B9C4CF; --muted:#8392A2;
    --line:#25303B; --line-strong:#384654;
    --accent:#7A9CF0; --accent-ink:#0D1217; --accent-soft:#1E2A45;
    --wing:#56657A; --lift:#69DB7C; --drag:#FF922B; --cargo:#D9A066; --cable:#D58BE0; --grav:#D4A06A; --mass:#8C98A5; --frame:#AEB9C5; --wind:#5CC3CB; --torque:#F77FB0;
    --sensor:#A9CF5A; --swing:#F2B544; --ax-x:#F2705F; --ax-y:#5CCB76; --ax-z:#7FA3F7; --good:#48B884; --warn:#E3A948; --bad:#EE6B5F; --good-soft:#15301F; --warn-soft:#352914; --bad-soft:#3A1B18;
    --viewport:#0F161D; --grid:#1D2833; --grid-strong:#33424F; --bldg:#26323E; --bldg-edge:#4E6072;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1217; --panel:#141B22; --panel-2:#1A232C; --ink:#E2E8EE; --ink-2:#B9C4CF; --muted:#8392A2;
  --line:#25303B; --line-strong:#384654;
  --accent:#7A9CF0; --accent-ink:#0D1217; --accent-soft:#1E2A45;
  --wing:#56657A; --lift:#69DB7C; --drag:#FF922B; --cargo:#D9A066; --cable:#D58BE0; --grav:#D4A06A; --mass:#8C98A5; --frame:#AEB9C5; --wind:#5CC3CB; --torque:#F77FB0;
  --sensor:#A9CF5A; --swing:#F2B544; --ax-x:#F2705F; --ax-y:#5CCB76; --ax-z:#7FA3F7; --good:#48B884; --warn:#E3A948; --bad:#EE6B5F; --good-soft:#15301F; --warn-soft:#352914; --bad-soft:#3A1B18;
  --viewport:#0F161D; --grid:#1D2833; --grid-strong:#33424F; --bldg:#26323E; --bldg-edge:#4E6072;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.45}
button,select,input{font:inherit;color:inherit}
.app{height:100%;display:flex;flex-direction:column;gap:10px;padding-inline:16px;padding-block:12px}

/* header */
.bar{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 0}
.hgroup{display:flex;flex-direction:column;gap:3px;padding-inline:14px;border-left:1px solid var(--line)}
.hgroup .lbl{font-size:10.5px;line-height:1}
.hrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.btn.icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:31px;padding:0}
.btn.icon svg{width:16px;height:16px;fill:currentColor}
#runBtn .i-play,#runBtn.paused .i-pause{display:none}
#runBtn.paused .i-play{display:block}
.seg-speed button{padding-inline:8px;font-variant-numeric:tabular-nums}
.brand{display:flex;flex-direction:column;margin-right:auto;min-width:0;padding-right:14px;align-self:center}
.brand h1{margin:0;font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:.01em;line-height:1.05;text-wrap:balance}
.brand span{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lbl{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.btn{border:1px solid var(--line-strong);background:var(--panel);border-radius:6px;padding:5px 11px;cursor:pointer;font-weight:500;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.poke{position:relative;overflow:hidden;min-width:5.6em;font-variant-numeric:tabular-nums;touch-action:none;user-select:none;-webkit-user-select:none;--charge:0%}
.poke::before{content:"";position:absolute;inset:0;width:var(--charge);background:var(--warn-soft);border-right:2px solid var(--warn);opacity:0;pointer-events:none}
.poke .poke-lbl{position:relative}
.poke.charging{border-color:var(--warn);transform:scale(.97)}
.poke.charging::before{opacity:1}
.poke.full{border-color:var(--bad)}
.poke.full::before{background:var(--bad-soft);border-right-color:var(--bad)}
.poke.full .poke-lbl{animation:jitter .12s linear infinite}
.poke.fired{animation:fired .45s ease-out}
@keyframes jitter{0%,100%{transform:translateX(0)}25%{transform:translateX(-1px)}75%{transform:translateX(1px)}}
@keyframes fired{from{box-shadow:0 0 0 5px color-mix(in srgb,var(--warn) 45%,transparent)}to{box-shadow:0 0 0 0 transparent}}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:focus-visible,.seg button:focus-visible,select:focus-visible,input:focus-visible,.comp-head:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
select{border:1px solid var(--line-strong);background:var(--panel);border-radius:6px;padding:5px 8px}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden;background:var(--panel)}
.seg button{border:0;background:transparent;padding:5px 10px;cursor:pointer;font-weight:500;white-space:nowrap}
.seg button+button{border-left:1px solid var(--line-strong)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

/* work area */
.work{flex:1;min-height:0;display:grid;grid-template-columns:320px minmax(0,1fr) 340px;gap:10px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:auto;min-height:0;display:flex;flex-direction:column}
.sec{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.sec:last-child{border-bottom:0}
.sec h2{margin:0;font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:baseline;gap:8px}
.sec h2 small{font-family:var(--f-mono);font-size:11px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:400;margin-left:auto}
.hint{margin:0;color:var(--muted);font-size:12.5px;max-width:65ch}
.addrow{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.addrow + .lbl{margin-top:2px}
.addrow .wide{grid-column:1/-1}
.addrow .btn{text-align:left;display:flex;align-items:center;gap:7px}
.addrow .btn b{font-family:var(--f-mono);font-weight:500;color:var(--accent)}

/* components */
.complist{display:flex;flex-direction:column;gap:6px}
.comp{border:1px solid var(--line);border-radius:7px;background:var(--panel-2)}
.comp.open{border-color:var(--line-strong)}
.comp-top{display:flex;align-items:stretch}
.comp-head{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;border:0;background:transparent;padding:7px 8px;cursor:pointer;text-align:left;border-radius:7px}
.tag{grid-row:1/3;align-self:center;font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:2px 6px;border-radius:4px;border:1px solid currentColor;min-width:58px;text-align:center}
.tag-motor{color:var(--accent)}
.tag-joint{color:var(--ink-2)}
.tag-mass{color:var(--mass)}
.tag-hang{color:var(--cable)}
.tag-sensor{color:var(--sensor)}
.comp-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comp-sum{font-family:var(--f-mono);font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-btn{border:0;background:transparent;cursor:pointer;color:var(--muted);padding:0 10px;font-size:18px;border-radius:6px}
.icon-btn:hover{color:var(--bad)}
.comp-body{display:flex;flex-direction:column;gap:8px;padding:4px 10px 11px}
.field{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:8px;row-gap:2px}
.field label{font-size:12.5px;color:var(--ink-2)}
.numwrap{display:inline-flex;align-items:baseline;gap:3px;justify-self:end;white-space:nowrap}
.num{width:7ch;font-family:var(--f-mono);font-size:11.5px;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink);background:color-mix(in srgb,var(--panel) 55%,transparent);border:1px solid color-mix(in srgb,var(--line-strong) 75%,transparent);border-radius:4px;padding:1px 3px;-moz-appearance:textfield;appearance:textfield}
.num::-webkit-outer-spin-button,.num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field:hover .num,.num:hover{border-color:var(--line-strong);background:var(--panel)}
.num:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent;background:var(--panel)}
.unit{font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.subgrid .num{width:6ch}
.field output{font-family:var(--f-mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--ink)}
.field input[type=range]{grid-column:1/3}
.field select,.field input[type=text]{grid-column:2;max-width:150px}
.field input[type=text]{border:1px solid var(--line-strong);background:var(--panel);border-radius:6px;padding:3px 7px}
.check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.check input{accent-color:var(--accent);width:15px;height:15px}
.subgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.subgrid .field{grid-template-columns:1fr auto}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line-strong);border-radius:2px}
input[type=range]::-moz-range-track{height:3px;background:var(--line-strong);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);margin-top:-5px;box-shadow:0 0 0 1px var(--accent)}
input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--accent)}


/* tabs */
.tabs{display:flex;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:3;flex:none}
.tabs button{flex:1;border:0;background:transparent;padding:10px 12px 9px;font-family:var(--f-display);font-weight:600;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.tabs button:hover{color:var(--ink-2)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.count{font-family:var(--f-mono);font-size:10.5px;letter-spacing:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center}
.count.bad{background:var(--bad)}
.pane{display:flex;flex-direction:column}
.work.wide{grid-template-columns:clamp(320px,calc(100vw - 920px),520px) minmax(0,1fr) 320px}

/* formulas */
.math{font-family:"STIX Two Text","Cambria Math","Cambria","Times New Roman",serif;font-size:16px;line-height:1.55;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:8px 12px;overflow-x:auto;display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.math i{font-style:italic}
.math .v{font-weight:700;font-style:normal}
.math sub,.math sup{font-size:.68em;line-height:0}
.chain-wrap{display:flex;flex-direction:column;gap:5px}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:4px 3px}
.chain .arr{color:var(--muted);font-size:12px}
.lchip{border:1px solid var(--line-strong);background:var(--panel);border-radius:4px;padding:2px 7px;font-size:12px;cursor:pointer;color:var(--ink-2)}
.lchip:hover{border-color:var(--accent);color:var(--ink)}
.lchip.edited{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.lchip.error{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}
.lchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.laws{display:flex;flex-direction:column;gap:6px}
.law{border:1px solid var(--line);border-radius:7px;background:var(--panel-2)}
.law-head{width:100%;display:flex;align-items:baseline;gap:8px;border:0;background:transparent;padding:8px 10px;cursor:pointer;text-align:left;border-radius:7px}
.law-head:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.law-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.law-key{font-family:var(--f-mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lst{margin-left:auto;flex:none;font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:1px 6px;border-radius:4px;border:1px solid var(--line-strong);color:var(--muted)}
.lst.edited{border-color:var(--accent);color:var(--accent)}
.lst.error{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}
.lst.dirty{border-style:dashed;border-color:var(--warn);color:var(--warn)}
.law-body{display:flex;flex-direction:column;gap:8px;padding:2px 10px 12px}
.law .math{background:var(--panel)}
.law-doc,.law-used{margin:0;font-size:12.5px;color:var(--ink-2);max-width:65ch}
.law-used{color:var(--muted)}
.law-io{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0;font-size:12px}
.law-io dt{font-family:var(--f-mono);font-size:11.5px;color:var(--ink)}
.law-io dt.ret{color:var(--muted)}
.law-io dd{margin:0;color:var(--ink-2)}
.code{width:100%;font-family:var(--f-mono);font-size:12px;line-height:1.55;background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);border-radius:6px;padding:8px 10px;white-space:pre;overflow:auto;resize:vertical;tab-size:2;min-height:80px;transition:box-shadow .6s}
.code:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.code.dirty{border-color:var(--warn)}
.code.ok{box-shadow:0 0 0 3px var(--good-soft)}
.law-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.btn:disabled{opacity:.45;cursor:default;border-color:var(--line-strong)}
.kbd{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.law-err{margin:0;font-family:var(--f-mono);font-size:11.5px;color:var(--bad);white-space:pre-wrap}
.law-err:not(.on){display:none}
/* step runner */
.law-rn{margin:0;font-size:12px;color:var(--muted)}
.law-rn.bad{color:var(--bad)}
.law-rn.warn{color:var(--warn)}
.steps{border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.steps summary{cursor:pointer;padding:5px 9px;font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.steps summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.listing{margin:0;padding:6px 10px 8px;max-height:340px;overflow:auto;font-family:var(--f-mono);font-size:11px;line-height:1.5;color:var(--ink);border-top:1px solid var(--line);white-space:pre}
.rn-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rn-status{margin:0;font-size:12.5px;max-width:70ch}
.rn-problems{margin:0;padding-left:18px;font-size:12px;color:var(--bad)}
.rn-problems[hidden]{display:none}
.rn-stage{margin:0;padding:7px 10px;border:1px solid var(--warn);background:var(--warn-soft);border-radius:6px;font-size:12.5px;max-width:70ch}
.rn-stage[hidden],.rn-log[hidden]{display:none}
.rn-log{margin:0;padding:0;list-style:none;display:grid;gap:3px;font-size:12px;max-width:70ch}
.rn-log b{font-family:var(--f-mono);font-weight:500;color:var(--muted);margin-right:4px}
.rn-log .bad{color:var(--bad)} .rn-log .good{color:var(--good)}
.note{margin:0;padding:8px 10px;border:1px solid var(--warn);background:var(--warn-soft);border-radius:6px;color:var(--ink);font-size:12.5px}
.sec code{font-family:var(--f-mono);font-size:11.5px}
.chip.accent{border-color:var(--accent);color:var(--accent)}
button.chip{background:transparent;cursor:pointer}

/* viewport */
.view{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--viewport);min-height:0}
#viewport{position:absolute;inset:0;touch-action:none;cursor:grab}
#viewport:active{cursor:grabbing}
#viewport canvas{display:block;width:100%;height:100%}
.hud{position:absolute;pointer-events:none;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2)}
.hud-tl{top:10px;left:12px;display:flex;flex-direction:column;gap:3px}
.hud-tr{top:8px;right:8px;pointer-events:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:calc(100% - 16px)}
.tog-row{pointer-events:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.show-wrap{position:relative}
.show-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;width:min(360px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px 10px;box-shadow:0 6px 24px color-mix(in srgb,var(--ink) 18%,transparent);display:flex;flex-direction:column;gap:7px;font-family:var(--f-body)}
.show-menu[hidden]{display:none}
.show-grp{display:flex;flex-direction:column;gap:4px}
.show-grp .lbl{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.show-btns{display:flex;flex-wrap:wrap;gap:5px}
.hud-tr .show-menu .btn{padding:2px 8px;font-size:12px}
.show-presets{border-top:1px solid var(--line);padding-top:7px}
.hud-tr .show-presets .btn[aria-pressed]{color:inherit}
.view-box{pointer-events:auto;display:flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--panel) 82%,transparent);border:1px solid var(--line);border-radius:8px;padding:4px 6px 4px 4px}
#triad{width:76px;height:76px;display:block;touch-action:none}
.view-btns{display:flex;flex-direction:column;gap:5px;align-items:stretch}
.view-named{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.hud-tr .view-named .btn{padding:1px 6px;font-size:11.5px;font-family:var(--f-body)}
.seg-xs button{padding:2px 7px;font-size:11.5px;font-family:var(--f-body)}
@media (max-width:600px){ #triad{width:60px;height:60px} .view-named{display:none} }
.hud-tr .btn{padding:3px 9px;font-size:12.5px;background:var(--panel)}
.legend{display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:4px;max-width:340px}
#hudCmd:empty{display:none}

/* controller model */
.learn-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.throw-opts{display:flex;flex-direction:column;gap:8px;padding:10px 0 4px;border-top:1px solid var(--line);margin-top:4px}
.throw-opts .hint{margin:0}
.calprog{display:flex;flex-direction:column;gap:4px}
.calbar{height:6px;border-radius:3px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
.calbar i{display:block;height:100%;width:0;background:var(--accent)}
#calStage{font-family:var(--f-mono);font-size:11px;color:var(--ink-2)}
.match{display:flex;flex-direction:column;gap:5px}
.mrow{display:grid;grid-template-columns:62px 1fr 42px;align-items:center;gap:8px}
.mrow .an{font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .mv{font-family:var(--f-mono);font-size:11px;text-align:right;font-variant-numeric:tabular-nums}
.mbar{height:8px;border-radius:2px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
.mbar i{display:block;height:100%;background:var(--good)}
.mbar i.warn{background:var(--warn)}
.mbar i.bad{background:var(--bad)}

/* edit mode */
.view.editing{box-shadow:inset 0 0 0 2px var(--accent)}
.view.editing .pilot{display:none}
.edit-bar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;width:max-content;max-width:min(780px, calc(100% - 24px));background:var(--panel);border:1px solid var(--accent);border-radius:8px;padding:6px 8px 6px 12px;font-size:12.5px;color:var(--ink-2)}
.edit-bar b{font-family:var(--f-display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-size:13px}
.edit-bar span{min-width:0}
.edit-bar .btn{padding:3px 12px}
.pick-tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);font-size:11.5px;font-family:var(--f-mono);padding:2px 7px;border-radius:4px;white-space:nowrap;z-index:5}
.comp.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

/* flight controls */
.pilot{position:absolute;left:10px;right:10px;bottom:12px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;pointer-events:none}
.pad{pointer-events:auto;position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px);gap:3px;flex:none}
.pad::before{content:"";position:absolute;inset:-7px;border-radius:50%;background:color-mix(in srgb,var(--panel) 55%,transparent);border:1px solid var(--line);z-index:-1}
.pk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--panel) 90%,transparent);border-radius:9px;color:var(--ink);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;padding:0;line-height:1}
.pk:hover{border-color:var(--accent)}
.pk .gl{font-size:14px}
.pk kbd{font-family:var(--f-mono);font-size:9.5px;color:var(--muted);margin-top:2px}
.pk[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pk[aria-pressed="true"] kbd{color:var(--accent-ink)}
.pk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.p-up{grid-area:1/2}.p-left{grid-area:2/1}.p-right{grid-area:2/3}.p-down{grid-area:3/2}
.pad-cap{grid-area:2/2;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--f-display);font-weight:600;font-size:10px;letter-spacing:.08em;line-height:1.15;color:var(--muted)}
.pilot-mid{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.pilot-acts{display:flex;gap:6px}
.pilot-acts .btn{padding:4px 9px;font-size:12.5px;background:color-mix(in srgb,var(--panel) 92%,transparent)}
.pilot-acts kbd{position:relative;font-family:var(--f-mono);font-size:10px;color:var(--muted);margin-left:3px}
.pilot-acts .btn.flash{animation:flash .5s}
@keyframes flash{from{background:var(--accent-soft);border-color:var(--accent)}}
.seg-sm button{padding:3px 9px;font-size:12.5px}
.kbd-hint{margin:0;font-size:11.5px;color:var(--ink-2);background:color-mix(in srgb,var(--panel) 90%,transparent);border:1px dashed var(--line-strong);border-radius:5px;padding:2px 8px;text-align:center}
.key{display:inline-flex;align-items:center;gap:5px}
.sw{width:14px;height:3px;border-radius:2px;display:inline-block}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.sq{width:8px;height:8px;border-radius:2px;display:inline-block}
.sw.ghost{background:transparent;border-top:2px dashed var(--sensor);height:0}
.field-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.ring{width:9px;height:9px;border-radius:50%;display:inline-block;border:1.5px dashed var(--ink-2)}
.crash{position:absolute;left:50%;bottom:172px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);width:max-content;padding:5px 6px 5px 12px;border:1px solid var(--bad);border-radius:999px;background:color-mix(in srgb,var(--panel) 88%,transparent);font-size:13px;color:var(--ink-2);animation:crashIn .35s ease-out}
.crash b{font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--bad)}
#crashWhy{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crash .btn{border-radius:999px;padding:3px 10px;font-size:12.5px}
.crash kbd{font-family:var(--f-mono);font-size:10px;color:var(--muted);margin-left:2px}
.view.editing .crash{display:none}
@keyframes crashIn{0%{opacity:0;transform:translate(-50%,8px)}60%{opacity:1;transform:translate(calc(-50% - 4px),0)}80%{transform:translate(calc(-50% + 3px),0)}100%{transform:translate(-50%,0)}}

/* telemetry */
.status{display:flex;flex-direction:column;gap:8px}
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:5px;align-self:flex-start;border:1px solid}
.pill i{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.pill.good{color:var(--good);background:var(--good-soft);border-color:var(--good)}
.pill.warn{color:var(--warn);background:var(--warn-soft);border-color:var(--warn)}
.pill.bad{color:var(--bad);background:var(--bad-soft);border-color:var(--bad)}
.status p{margin:0;color:var(--ink-2);font-size:12.5px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--f-mono);font-size:11px;padding:2px 7px;border-radius:4px;border:1px solid var(--line-strong);color:var(--ink-2)}
.chip.warn{border-color:var(--warn);color:var(--warn)}
.chip.bad{border-color:var(--bad);color:var(--bad)}
.chip.good{border-color:var(--good);color:var(--good)}

.acts{display:flex;flex-direction:column;gap:7px}
.arow{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:4px 8px}
.arow .an{font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arow .av{font-family:var(--f-mono);font-size:11px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.arow .as{grid-column:2/4;font-family:var(--f-mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.tbar{position:relative;height:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.tbar .fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:0 3px 3px 0}
.tbar .fill.sat{background:var(--warn)}
.tbar .act{position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--ink)}

.env{display:flex;flex-direction:column;gap:6px}
.erow{display:grid;grid-template-columns:62px 1fr 1fr;align-items:center;gap:6px}
.erow .en{font-size:12.5px;color:var(--ink-2)}
.ebar{position:relative;height:16px;display:flex;align-items:center}
.ebar .b{position:absolute;top:4px;height:8px;border-radius:2px;background:var(--accent)}
.ebar .t{position:relative;font-family:var(--f-mono);font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--ink);padding-inline:3px;z-index:1;background:color-mix(in srgb,var(--panel) 70%,transparent);border-radius:2px}
.eneg{justify-content:flex-end;border-right:1px solid var(--line-strong)}
.eneg .b{right:0;border-radius:2px 0 0 2px}
.epos .b{left:0;border-radius:0 2px 2px 0}
.ebar .b.warn{background:var(--warn)}
.ebar .b.bad{background:var(--bad)}
.ehead{display:grid;grid-template-columns:62px 1fr 1fr;gap:6px;font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.ehead span:nth-child(2){text-align:right;padding-right:6px;border-right:1px solid var(--line-strong)}
.ehead span:nth-child(3){padding-left:6px}

.kv{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:12.5px}
.kv dt{color:var(--ink-2)}
.kv dd{margin:0;font-family:var(--f-mono);font-size:11.5px;font-variant-numeric:tabular-nums;text-align:right}
#chart{width:100%;height:224px;display:block;touch-action:none}
.sp{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 18px}

@media (max-width:1100px){
  .work.wide{grid-template-columns:minmax(0,1fr)}
  html,body{height:auto}
  .app{height:auto}
  .work{grid-template-columns:minmax(0,1fr)}
  .view{height:60vh;min-height:340px;order:1}
  #airframe{order:2}
  #telemetry{order:3}
  .panel{overflow:visible}
}
@media (max-width:640px){
  .pilot{flex-wrap:wrap;row-gap:12px}
  .pilot-mid{order:-1;flex:1 0 100%;flex-direction:row;flex-wrap:wrap;justify-content:center}
  .hud-tl{top:44px}
  .crash,.liftoff{bottom:232px}
  .pad{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px);gap:2px}
  .pad-cap{font-size:8.5px}
  .pk kbd{display:none}
  .pilot-acts kbd{display:none}
  .legend{display:none}
}
@media (max-width:1560px){ .brand span{display:none} }
@media (max-width:1330px){
  .brand{flex:1 0 100%}
  .brand + .hgroup{border-left:0;padding-left:0}
}
@media (max-width:760px){
  .brand{flex:1 0 100%}
  .bar{gap:10px 16px}
  .hgroup{border-left:0;padding-inline:0}
}
@media (max-width:480px){
  .brand h1{font-size:21px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} .poke.full .poke-lbl,.poke.fired,.crash{animation:none} .poke.charging{transform:none} }

#preset{max-width:190px}
.resp{width:100%;border-collapse:collapse;font:12px var(--mono, "JetBrains Mono", monospace);color:var(--ink-2)}
.resp th{font:600 11px "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right;padding:2px 0}
.resp td{padding:2px 0;text-align:right;border-top:1px solid var(--line)}
.resp td:first-child,.resp th:first-child{text-align:left;font-family:"Barlow",sans-serif;font-size:12.5px;color:var(--ink)}
.jbar{background:linear-gradient(to right,transparent calc(50% - 0.5px),var(--line-strong) calc(50% - 0.5px),var(--line-strong) calc(50% + 0.5px),transparent calc(50% + 0.5px)),var(--track, var(--line))}
.act.cmd{opacity:.45}
/* parts tree: what is attached to what */
.tree-frame{font:600 11px/1 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:7px 9px;border:1px dashed var(--line-strong);border-radius:7px}
.kids{display:flex;flex-direction:column;gap:6px;margin:6px 0 0 7px;padding-left:9px;border-left:2px solid var(--line-strong)}
.kids.root{margin-left:0;padding-left:0;border-left:0}
.node{display:flex;flex-direction:column;position:relative}
.kids:not(.root)>.node::before{content:"";position:absolute;left:-9px;top:19px;width:8px;border-top:2px solid var(--line-strong)}
.grip{display:flex;align-items:center;padding:0 0 0 6px;color:var(--muted);cursor:grab;user-select:none;font-size:13px}
.comp-top[draggable=true]:active .grip{cursor:grabbing}
.twisty{border:0;background:transparent;color:var(--ink-2);font:500 11px var(--f-mono,monospace);padding:0 0 0 6px;cursor:pointer;min-width:20px}
.twisty:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:4px}
.comp.dragging{opacity:.45}
.drop-ok{outline:2px dashed var(--accent);outline-offset:2px}
.tag-link{color:var(--ink-2)}
.tag-latch{color:var(--cargo)}

/* the launch status: what the drone is doing between reset and flying. A slim pill low on the view, where the crash
   notice goes (they never show together), so it doesn't cover the drone or the scene. */
.liftoff[hidden]{display:none}
.liftoff{display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 24px);position:absolute;left:50%;bottom:172px;transform:translateX(-50%);
  z-index:4;pointer-events:none;padding:4px 12px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;color:var(--ink-2);
  background:color-mix(in srgb,var(--panel) 80%,transparent);transition:opacity .4s;white-space:nowrap;overflow:hidden}
.liftoff.fade{opacity:0}
.liftoff-title{font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.liftoff.warn .liftoff-title{color:var(--warn)}
.liftoff.bad .liftoff-title{color:var(--bad)}
.liftoff.good .liftoff-title{color:var(--good)}
.liftoff-sub{overflow:hidden;text-overflow:ellipsis}
.liftoff-sub:empty{display:none}
.liftoff-steps{display:flex;gap:3px;list-style:none;margin:0;padding:0;order:-1}
.liftoff-steps li{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--muted);font-size:0}
.liftoff-steps li.done{border-color:var(--good);background:var(--good)}
.liftoff-steps li.now{border-color:var(--accent);background:var(--accent);animation:liftoffPulse 1s infinite}
@keyframes liftoffPulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.liftoff-steps li.now{animation:none}}

/* cargo: the latch buttons on the view, the Cargo section */
.cargo-bar{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;max-width:min(560px,90vw)}
.cargo-btn{position:relative;display:inline-flex;align-items:center;gap:6px;padding:4px 9px 6px;font-size:12.5px;background:color-mix(in srgb,var(--panel) 92%,transparent)}
.cargo-btn .cg-name{font-weight:600}
.cargo-btn .cg-state{font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.cargo-btn[data-tone="loaded"] .cg-state{color:var(--cargo)}
.cargo-btn[data-tone="reach"]{border-color:var(--good)}
.cargo-btn[data-tone="reach"] .cg-state{color:var(--good)}
.cargo-btn kbd{font-family:var(--f-mono);font-size:10px;color:var(--muted)}
.cargo-btn:disabled{opacity:.55}
.cg-meter{position:absolute;left:8px;right:8px;bottom:2px;height:2px;border-radius:1px;background:var(--line);overflow:hidden}
.cg-meter i{display:block;height:100%;width:0;background:var(--good);transition:width .1s linear}
.cargo-say{flex-basis:100%;text-align:center;font-size:12px;color:var(--warn);min-height:0}
.cargo-say:empty{display:none}
.cargo-item{border:1px solid var(--line);border-radius:6px;padding:6px 8px;margin:6px 0}
.cargo-item-head{display:flex;gap:6px;align-items:center}
.cargo-item-head input{flex:1;min-width:0}
.cargo-log{list-style:none;margin:4px 0 0;padding:0;font-size:12px;max-height:160px;overflow:auto}
.cargo-log li{padding:2px 0}
.cargo-log .t{font-family:var(--f-mono);color:var(--muted)}
.cargo-log .tone-bad{color:var(--bad)}
.cargo-log .tone-warn{color:var(--warn)}
.cargo-log .tone-good{color:var(--good)}
.cargo-log .muted{color:var(--muted)}

.budget{margin-top:10px}
.budget td+td,.budget th+th{padding-left:10px;white-space:nowrap}
#budgetBody .kv{grid-template-columns:auto 1fr}
#budgetBody .kv dd{white-space:nowrap}
#budgetBody .kv dd.warn{color:var(--warn)}
#budgetBody .kv dd.bad{color:var(--bad)}
#budgetBody > .hint{margin-top:8px}

/* designs */
.design-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.design-row input[type=text]{flex:1;min-width:0;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);border-radius:6px;padding:5px 8px;font:inherit}
.design-row .grow{flex:1}
.design-row .btn{padding:4px 10px}
.btn:disabled{opacity:.45;cursor:default}
.note{margin:0;font-size:12.5px;color:var(--accent)}
.designs{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;max-height:220px;overflow:auto}
.designs:has(> .hint){border:0}
.drow{display:flex;align-items:center;gap:4px;padding:5px 4px 5px 10px;border-top:1px solid var(--line)}
.drow:first-child{border-top:0}
.drow.cur{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.dtext{flex:1;min-width:0;display:flex;flex-direction:column}
.dname{all:unset;cursor:pointer;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dname:hover{color:var(--accent)}
.dname:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.dmeta{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.dexp:hover{color:var(--accent)}
.icon-btn.armed{font-size:12px;color:var(--bad);font-weight:600}

.edit-tools{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.edit-tools .seg button{padding:3px 9px;font-size:12.5px}
.range-step{display:inline-flex;align-items:center;gap:4px}
.range-step .btn{padding:1px 8px;font-size:14px;line-height:1.2}
.edit-bar .range-step .rv{font-family:var(--f-mono);font-size:12px;letter-spacing:0;text-transform:none;color:var(--ink);min-width:36px;text-align:center}
.edit-tools .ang{display:inline-flex;align-items:center;gap:4px;font-size:12px}
.edit-tools .ang .num{width:58px}
.edit-tools .preview{display:inline-flex;align-items:center;gap:6px}
.edit-tools .preview .btn{padding:1px 8px;font-size:11px;min-width:30px}
.edit-tools .preview input[type=range]{width:110px}
.edit-bar .edit-tools .rv{font-family:var(--f-mono);font-size:12px;color:var(--ink);min-width:36px;text-align:center}
.range-step .lab{font-size:12px;margin-right:2px}
.edit-bar.servo{width:min(640px, calc(100% - 24px))}
.edit-bar.servo #editMsg{flex:1 1 100%;order:0}
.edit-bar.servo #editMsg strong{color:var(--ink);font-weight:600}
.edit-bar.servo #editMsg .sub{color:var(--muted)}
.edit-bar.servo .edit-tools{flex:1 1 100%;display:grid;gap:6px;padding:6px 0 2px;border-top:1px solid var(--line)}
.edit-bar.servo #undoBtn2{margin-left:auto}
.st-row{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:8px}
.st-lab{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.st-row:first-child .st-lab::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--swing);flex:none}
.st-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.st-ctl .btn{padding:1px 8px;font-size:12.5px;line-height:1.5}
.st-ctl input[type=range]{flex:1 1 90px;min-width:70px;accent-color:var(--swing)}
.st-note{font-size:12px;color:var(--muted)}
.field.stack{grid-template-columns:1fr;row-gap:4px}
.seg-fill{display:flex}
.seg-fill button{flex:1 1 0;padding:3px 4px}
.flab{font-size:13px;color:var(--ink-2)}
.edit-tools .ang .num{border:1px solid var(--line-strong);border-radius:5px;padding:2px 4px;background:var(--panel);color:var(--ink);font:inherit}
@media (max-width:600px){
  .edit-bar.servo #editMsg .sub,.edit-bar.servo .st-note{display:none}
  .st-row{grid-template-columns:70px 1fr}
}
/* health panel */
.h-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.h-top .btn{margin-left:auto;padding:3px 10px;font-size:12.5px}
.h-top .pill{font-size:12.5px;padding:2px 8px}
.h-list{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.h-row{display:grid;grid-template-columns:minmax(40px,auto) minmax(28px,1fr) 44px auto auto;align-items:center;column-gap:8px;row-gap:1px;font-size:12.5px}
.h-name{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-bar{height:6px;border-radius:3px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden;min-width:40px}
.h-bar i{display:block;height:100%;width:0}
.h-temp{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2);text-align:right}
.h-state{font-size:12px;color:var(--muted);white-space:nowrap}
.h-state.warn{color:var(--warn)} .h-state.bad{color:var(--bad);font-weight:600}
.h-sub{grid-column:1/-1;font-size:11.5px;color:var(--muted);line-height:1.35}
.h-row .mb-btn{padding:1px 7px;font-size:12px}
.h-log{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink-2)}
.h-log b{font-family:var(--f-mono);font-weight:500;font-size:11px;color:var(--muted);margin-right:4px}
.h-log li.bad{color:var(--bad)} .h-log li.warn{color:var(--warn)} .h-log li.good{color:var(--good)} .h-log li.muted{color:var(--muted)}
.hud-sup{color:var(--bad);font-weight:600}

/* unsaved changes */
.ask{border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);color:var(--ink);padding:16px 18px;width:min(440px,calc(100vw - 32px))}
.ask::backdrop{background:color-mix(in srgb,var(--bg) 55%,transparent)}
.ask h2{margin:0 0 6px;font-family:var(--f-display);font-size:17px}
.ask p{margin:0 0 12px;color:var(--ink-2);font-size:13px}
.ask-name{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.ask-name input{border:1px solid var(--line-strong);background:var(--panel-2);border-radius:6px;padding:6px 8px}
.ask-btns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}

/* computers tab */
.boards{display:flex;flex-direction:column;gap:8px}
.board{border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;background:var(--panel)}
.board.over{border-color:var(--bad)}
.board-head{display:flex;gap:6px;align-items:center}
.name-edit{flex:1;min-width:0;position:relative;display:flex;align-items:center}
.board-name{flex:1;min-width:0;border:1px solid transparent;border-bottom:1px dashed var(--line-strong);background:transparent;border-radius:5px 5px 0 0;padding:3px 24px 3px 6px;font-weight:600;font-size:14px;cursor:text}
.board-name:hover,.board-name:focus{border-color:var(--line-strong);border-style:solid;border-radius:5px;background:var(--panel-2)}
.name-edit svg{position:absolute;right:7px;width:12px;height:12px;fill:none;stroke:var(--muted);stroke-width:1.5;pointer-events:none}
.name-edit:hover svg,.name-edit:focus-within svg{stroke:var(--accent)}
.board-head select{max-width:45%;min-width:0;flex:0 1 auto}
.board-note{margin:2px 0 6px;font-size:12px;color:var(--muted)}
.board-kv{margin:0}
.board-kv dd.bad{color:var(--bad)}
.board-ex{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.board-ex .btn{font-size:12.5px;padding:4px 9px}
.board-add{display:flex;gap:6px;align-items:center;margin-top:10px;flex-wrap:wrap}
.task-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}
.task-row:first-child{border-top:0}
.task-row .hint{font-size:12px}
.task-row select{flex:none;max-width:45%}
.task-row.later{opacity:.7}

/* ── the ground station (gs-ui.js) and its data displays (gs-widgets.js) ── */
.tabs button{flex:1 1 auto;padding-inline:6px;letter-spacing:.05em;white-space:nowrap;gap:5px}
.gs .gs-sec h2 small{font-family:var(--f-mono)}
.gs-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px}
.gs-sel{display:flex;flex-direction:column;gap:3px;min-width:0}
.gs-sel select{width:100%;border:1px solid var(--line-strong);border-radius:6px;background:var(--panel);padding:4px 6px}
.gs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px 10px;margin-block:6px}
.gs-moderow{display:flex;justify-content:flex-start;margin-bottom:8px}
.w-label{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.w-num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.w-value{display:flex;flex-direction:column;gap:1px;min-width:0;transition:opacity .3s}
.w-value .w-read{display:flex;align-items:baseline;gap:4px;min-width:0}
.w-value .w-num{font-size:19px;font-weight:500;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-value .w-unit{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.w-value[data-tone="warn"] .w-num{color:var(--warn)} .w-value[data-tone="bad"] .w-num{color:var(--bad)} .w-value[data-tone="good"] .w-num{color:var(--good)}
.w-bar{display:grid;grid-template-columns:minmax(80px,auto) minmax(0,1fr) 56px;align-items:center;gap:8px;margin-block:4px;transition:opacity .3s}
.w-track{height:8px;border-radius:4px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
.w-track i{display:block;height:100%;background:var(--accent);transition:width .2s}
.w-bar[data-tone="warn"] .w-track i{background:var(--warn)} .w-bar[data-tone="bad"] .w-track i{background:var(--bad)}
.w-bar .w-num{font-size:12px;text-align:right}
.w-badge{display:inline-block;font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:.1em;padding:3px 12px;border-radius:6px;border:1.5px solid var(--line-strong);background:var(--panel-2);color:var(--ink-2)}
.w-badge[data-tone="good"]{border-color:var(--good);background:var(--good-soft);color:var(--good)}
.w-badge[data-tone="warn"]{border-color:var(--warn);background:var(--warn-soft);color:var(--warn)}
.w-badge[data-tone="bad"]{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.w-horizon{height:150px;border-radius:8px;overflow:hidden;border:1px solid var(--line-strong);margin-bottom:6px}
.w-horizon canvas,.w-map canvas{width:100%;height:100%;display:block}
.w-map{height:220px;border-radius:8px;border:1px solid var(--line-strong);background:var(--viewport);overflow:hidden}
.w-cols{margin-block:6px}
.w-colrow{display:flex;gap:6px;align-items:flex-end;margin-top:4px}
.w-colwrap{flex:1;max-width:44px;display:flex;flex-direction:column;align-items:stretch;gap:2px}
.w-col{position:relative;height:56px;border:1px solid var(--line);border-radius:4px;background:var(--panel-2);display:flex;align-items:flex-end;overflow:hidden}
.w-col i{display:block;width:100%;background:var(--accent);transition:height .2s}
.w-colwrap em{text-align:center;font-style:normal;font-family:var(--f-mono);font-size:10px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-value.w-text .w-num{font-family:var(--f-body);font-size:14.5px;white-space:normal;line-height:1.3}
.w-col[data-tone="warn"]{border-color:var(--warn);border-width:2px} .w-col[data-tone="bad"]{border-color:var(--bad);border-width:2px}
.w-spark{display:grid;grid-template-columns:minmax(0,1fr) 48px;grid-template-rows:auto 34px;gap:2px 8px;margin-top:6px}
.w-spark .w-label{grid-column:1/-1}
.w-spark canvas{width:100%;height:34px;display:block}
.w-spark .w-num{font-size:12px;align-self:center;text-align:right}
.w-log{list-style:none;margin:0;padding:0;font-size:12.5px;max-height:260px;overflow:auto}
.w-log li{padding:3px 0;border-bottom:1px solid var(--line)}
.w-log li b{font-family:var(--f-mono);font-weight:500;font-size:11px;color:var(--muted);margin-right:4px}
.w-log li[data-tone="warn"]{color:var(--warn)} .w-log li[data-tone="bad"]{color:var(--bad)}
.w-old{opacity:.55}
.w-stale{opacity:.35}

/* ───────── where it comes from (js/sources.js) ───────── */
:root{ --src-sim:#6A4BB0; --src-sensor:#5E7F12; --src-board:#2B55C4; --src-tlm:#0B7A84; --src-gnd:#A3520A; --src-cmp:#B0306F; --src-calc:#5B6878; --src-you:#3A4755; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --src-gnd:#F2A65A; --src-sim:#B49BF0; --src-sensor:#A9CF5A; --src-board:#7A9CF0; --src-tlm:#4FC4CC; --src-cmp:#F07AB4; --src-calc:#9AA8B8; --src-you:#B9C4CF; } }
:root[data-theme="dark"]{ --src-gnd:#F2A65A; --src-sim:#B49BF0; --src-sensor:#A9CF5A; --src-board:#7A9CF0; --src-tlm:#4FC4CC; --src-cmp:#F07AB4; --src-calc:#9AA8B8; --src-you:#B9C4CF; }
.src-sim{color:var(--src-sim)} .src-sensor{color:var(--src-sensor)} .src-board{color:var(--src-board)} .src-tlm{color:var(--src-tlm)}
.src-cmp{color:var(--src-cmp)} .src-gnd{color:var(--src-gnd)} .src-calc{color:var(--src-calc)} .src-you{color:var(--src-you)}
.srcs{display:inline-flex;flex-wrap:wrap;gap:4px;align-self:center}
.src{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;line-height:1;
  padding:2px 5px 2px 4px;border-radius:3px;border:1px solid color-mix(in srgb,currentColor 45%,transparent);background:color-mix(in srgb,currentColor 9%,transparent);white-space:nowrap;cursor:help;pointer-events:auto}
.src i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.src-you.src{border-style:dashed}
.src-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:1px;flex:none;cursor:help;pointer-events:auto}
.src-legend{margin:0 0 2px;font-size:12px}
.src-legend summary{display:flex;flex-wrap:wrap;align-items:center;gap:5px;cursor:pointer;list-style:none;padding:8px 14px}
.src-legend summary::-webkit-details-marker{display:none}
.src-legend summary .lbl{margin-right:4px;font-size:10.5px}
.src-legend summary .lbl::after{content:" ▸";letter-spacing:0}
.src-legend[open] summary .lbl::after{content:" ▾"}
.src-legend dl{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;margin:0;padding:0 14px 12px;color:var(--ink-2);line-height:1.35}
.src-legend dt{margin:0} .src-legend dd{margin:0}
.panel > .src-legend{border-bottom:1px solid var(--line);background:var(--panel)}
.h-sub .src-part{white-space:normal}
.h-sub .src-part + .src-part{margin-left:10px}
.hud .hud-src{margin-bottom:2px}
.lbl .srcs, .lbl.has-src{display:flex;align-items:center;gap:8px}
.sec h2{flex-wrap:wrap;row-gap:5px}
.sec h2 > .srcs{order:3;flex-basis:100%;gap:4px}
.lbl.has-src{flex-wrap:wrap}
.hint.warn{color:var(--warn)}
.gs-logbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:2px 0 8px}
.gs-filters{display:flex;flex-wrap:wrap;gap:6px}
.gs-filter{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-strong);background:transparent;color:var(--muted);border-radius:999px;padding:3px 10px 3px 8px;font-size:12px;cursor:pointer;white-space:nowrap}
.gs-filter::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;box-sizing:border-box}
.gs-filter:hover{border-color:var(--accent);color:var(--ink-2)}
.gs-filter[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.gs-filter[aria-pressed="true"]::before{background:var(--accent);border-color:var(--accent)}
.gs-filter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gs-linklog .gs-line:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.gs-logbtns{display:flex;gap:6px;margin-left:auto}
.btn.btn-sm{padding:3px 10px;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.btn-sm svg{width:12px;height:12px;fill:currentColor}
.gs-pause.is-paused{border-color:var(--warn);background:var(--warn-soft);color:var(--ink)}
.gs-new{font-family:var(--f-mono);font-size:10.5px;padding:0 5px;border-radius:999px;background:var(--warn);color:var(--bg)}
.gs-linklog{max-height:360px;font-family:var(--f-mono);font-size:11.5px}
.gs-linklog li{padding:0}
.gs-linklog .gs-line{display:grid;grid-template-columns:3.6em 1.2em 3.6em 1fr auto;column-gap:6px;align-items:baseline;padding:2px 0;width:100%;box-sizing:border-box}
.gs-linklog button.gs-line{font:inherit;color:inherit;text-align:left;background:none;border:0;border-radius:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.gs-linklog li.muted{display:block;padding:2px 0;font-family:var(--f-body)}
.gs-linklog li b{margin:0;text-align:right}
.gs-linklog .gs-dir{font-weight:600;color:var(--src-tlm)}
.gs-linklog .gs-kind{font-size:10px;letter-spacing:.04em;color:var(--muted)}
.gs-linklog .gs-data{color:var(--ink);overflow-wrap:anywhere}
.gs-linklog .gs-meta{color:var(--muted);font-size:10.5px;text-align:right;white-space:nowrap}
.gs-linklog li[data-tone="bad"] .gs-data{color:var(--bad)} .gs-linklog li[data-tone="warn"] .gs-data{color:var(--warn)} .gs-linklog li[data-tone="good"] .gs-data{color:var(--good)}
.gs-linklog li[data-tone]{color:inherit}
.w-log li[data-tone="good"]{color:var(--good)} .w-log li.muted{color:var(--muted)}
.gs-stats{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-size:11px;margin:2px 0 4px}
.gs-stats th{font-family:var(--f-display);font-weight:600;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:2px 6px 4px 0}
.gs-stats td{padding:3px 6px 3px 0;border-top:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.gs-stats td:first-child{color:var(--ink);white-space:nowrap}
.gs-pause{margin-left:auto}
.gs-linklog button.gs-line:hover{background:var(--panel-2)}
.gs-linklog li.open{background:var(--panel-2)}
.gs-raw{margin:4px 0 6px calc(3.6em + 6px);padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:var(--panel);cursor:auto}
.gs-raw pre{margin:0 0 6px;font-size:11px;color:var(--ink);white-space:pre;overflow-x:auto}
.gs-raw dl{display:grid;grid-template-columns:auto 1fr;gap:1px 10px;margin:0;font-size:11px}
.gs-raw dt{color:var(--muted)} .gs-raw dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}

/* ───────── on/off toggles: one pressed look (as the link log's filters) ───────── */
.btn.tog{display:inline-flex;align-items:center;gap:6px}
.btn.tog::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;box-sizing:border-box;flex:none;opacity:.75}
.btn.tog[aria-pressed="true"],.hud-tr .btn.tog[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.btn.tog[aria-pressed="true"]::before{background:var(--accent);border-color:var(--accent);opacity:1}
.hud-tr .btn[aria-expanded="true"]{border-color:var(--accent)}
.btn[aria-disabled="true"],.seg button[aria-disabled="true"]{opacity:.45;cursor:default}
.btn[aria-disabled="true"]:hover{border-color:var(--line-strong)}

/* ───────── menu buttons (js/ui.js menuButton) ───────── */
.mb{position:relative;display:inline-flex}
.mb-btn{display:inline-flex;align-items:center;gap:5px}
.mb-caret{font-size:.8em;color:var(--muted)}
.mb-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:40;min-width:100%;max-height:min(420px,70vh);overflow:auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;padding:4px;box-shadow:0 6px 24px color-mix(in srgb,var(--ink) 18%,transparent);display:flex;flex-direction:column;gap:1px;font-family:var(--f-body);font-size:13px;color:var(--ink)}
.mb-menu.left{right:auto;left:0}
.mb-grp{font-family:var(--f-display);font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:6px 8px 2px}
.mb-grp + .mb-item{margin-top:0}
.mb-item{display:flex;flex-direction:column;align-items:flex-start;gap:0;border:0;background:transparent;text-align:left;padding:5px 10px;border-radius:5px;cursor:pointer;white-space:nowrap;color:inherit}
.mb-item:hover,.mb-item:focus-visible{background:var(--accent-soft);outline:none}
.mb-item:focus-visible{box-shadow:inset 0 0 0 1.5px var(--accent)}
.mb-item[aria-disabled="true"]{color:var(--muted);cursor:default}
.mb-item .mb-hint{font-size:11.5px;color:var(--muted)}
.mb-item.cur{font-weight:600}
#presetSlot .mb-btn{min-width:150px;justify-content:space-between}

/* ───────── header bits ───────── */
.launch{display:inline-flex;align-items:center;gap:6px}
.mini-lbl{font-size:12px;color:var(--muted);white-space:nowrap}
select.pending{border-color:var(--warn);border-style:dashed}

/* ───────── fields: scale ends, clamping, switched off ───────── */
.ends{grid-column:1/3;display:flex;justify-content:space-between;gap:8px;margin-top:-1px;font-size:11px;line-height:1.2;color:var(--muted)}
.clampnote{font-family:var(--f-body);font-size:11px;color:var(--warn);margin-right:4px}
.clampnote:empty{display:none}
.field-why{grid-column:1/3;font-size:11.5px;color:var(--muted)}
.field-why:empty{display:none}
.field.off label,.field.off .numwrap,.field.off input[type=range],.field.off .ends{opacity:.45}
.field.off input[type=range]{cursor:default}
.field-note{font-size:11.5px;color:var(--muted);flex-basis:100%;text-align:right}
.nowrap{white-space:nowrap}
.board-err{margin:6px 0 0}

/* ───────── keyboard shortcuts ───────── */
.keys-pop{width:min(380px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 140px));overflow:auto;font-size:12.5px;color:var(--ink-2)}
.keys-pop dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0}
.keys-pop dt{white-space:nowrap;text-align:right}
.keys-pop dd{margin:0}
.keys-pop kbd{font-family:var(--f-mono);font-size:11px;color:var(--ink);background:var(--panel-2);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:4px;padding:0 4px}
.keys-pop p{margin:0;font-size:12px;color:var(--muted)}

/* ───────── the view when it is narrow (a wide panel beside it, or a small window) ───────── */
.view{container:view / inline-size}
@container view (max-width:700px){
  .hud-tr{max-width:260px}
  .hud-tl{max-width:calc(100% - 290px)}
  .legend{max-width:100%}
}
@container view (max-width:640px){
  .pilot-mid{flex:1 1 0}
  .pilot-acts{flex-wrap:wrap;justify-content:center}
}
@container view (max-width:480px){
  .pilot{flex-wrap:wrap;row-gap:12px}
  .pilot-mid{order:-1;flex:1 0 100%;flex-direction:row;flex-wrap:wrap;justify-content:center}
  .crash,.liftoff{bottom:232px}
  .hud-tl{max-width:calc(100% - 210px)}
  .legend{display:none}
}

.gs-cargo{flex-wrap:wrap;gap:6px}
/* where a new part goes (place-ui.js) */
.place-menu{position:absolute;left:14px;right:14px;z-index:30;max-height:min(60vh,420px);overflow:auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;padding:6px 0 8px;box-shadow:0 6px 24px color-mix(in srgb,var(--ink) 18%,transparent);display:flex;flex-direction:column;font-family:var(--f-body)}
.place-head{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:4px 10px 6px}
.place-opt{all:unset;box-sizing:border-box;display:block;width:100%;padding:5px 10px;font-size:12.5px;color:var(--ink);cursor:pointer;border-left:2px solid transparent;overflow-wrap:anywhere}
.place-opt:hover,.place-opt:focus-visible{background:color-mix(in srgb,var(--ink) 7%,transparent);border-left-color:var(--accent)}
.place-opt .kind{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);margin-left:4px}
.place-opt.between{color:var(--ink-2);font-size:12px}
.place-opt .ins{color:var(--muted)}
.place-menu .hint{margin:6px 10px 0}
/* the AI tab (agent-ui.js) */
.tabs button.busy::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);animation:aiPulse 1s ease-in-out infinite}
@keyframes aiPulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.tabs button.busy::after,.ai-typing i{animation:none}}
.pane.ai{flex:1 1 auto;min-height:0}
.pane.ai[hidden]{display:none}
.pane.ai input[type=text],.pane.ai input[type=url],.pane.ai input[type=password],.pane.ai input[type=number],.ai-input{border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);border-radius:6px;padding:6px 8px;font:inherit;font-size:13px;min-width:0}
.pane.ai select{flex:1;min-width:0}
.ai-view{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.ai-top{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);flex:none}
.ai-top-t{flex:1;min-width:0}
.ai-top b{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--ink);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:3px;font-size:11.5px;color:var(--muted);font-family:var(--f-mono)}
.ai-chip{font-family:var(--f-mono);font-size:11px;color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:1px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-icon{border:0;background:transparent;color:var(--ink-2);font-size:18px;line-height:1;width:32px;height:32px;border-radius:6px;cursor:pointer;flex:none}
.ai-icon:hover{background:var(--panel-2);color:var(--ink)}
.ai-icon:focus-visible,.ai-thread-open:focus-visible,.ai-ep:focus-visible,.ai-suggest:focus-visible,.ai-link:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* first run: connect a model */
.ai-setup{padding:14px;gap:12px;overflow:auto}
.ai-hero{text-align:center;padding:14px 8px 4px}
.ai-hero h2{margin:6px 0 4px;font-family:var(--f-display);font-size:20px;font-weight:600;color:var(--ink)}
.ai-hero p{margin:0 auto;max-width:44ch;font-size:13px;line-height:1.5;color:var(--muted)}
.ai-mark{font-size:26px;color:var(--accent)}
.ai-card{display:flex;flex-direction:column;gap:9px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.ai-card .kv{margin:0}
.ai-eps{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px}
.ai-ep{border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);border-radius:7px;padding:7px 8px;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:1px}
.ai-ep small{font-size:10.5px;color:var(--muted);font-weight:400}
.ai-ep[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.ai-field{display:flex;flex-direction:column;gap:4px}
.ai-field > input{width:100%;box-sizing:border-box}
.ai-fnote{font-size:11.5px;color:var(--muted)}
.ai-foot{text-align:center;margin:0 auto}
.btn.danger{color:var(--bad)}
/* the thread list */
.ai-list{display:flex;flex-direction:column;gap:4px;padding:10px 12px 14px;overflow:auto;flex:1 1 auto;min-height:0}
.ai-new{align-self:stretch;margin-bottom:6px}
.ai-group{display:flex;align-items:baseline;justify-content:space-between;margin:10px 2px 2px}
.ai-none{margin:2px 2px 4px}
.ai-link{border:0;background:none;color:var(--accent);font:inherit;font-size:12.5px;cursor:pointer;padding:2px 4px;border-radius:4px}
.ai-thread{display:flex;align-items:center;gap:4px;border-radius:7px;padding-left:4px}
.ai-thread:hover{background:var(--panel-2)}
.ai-thread.busy .ai-thread-t::after{content:" ●";color:var(--accent);animation:aiPulse 1s ease-in-out infinite}
.ai-thread-open{flex:1;min-width:0;border:0;background:none;color:inherit;font:inherit;text-align:left;padding:7px 4px;cursor:pointer;display:grid;grid-template-columns:auto 1fr;column-gap:6px;border-radius:6px}
.ai-thread-open > .ai-thread-t,.ai-thread-open > .ai-thread-m{grid-column:2}
.ai-bolt{grid-row:1/3;color:var(--swing)}
.ai-thread-t{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-thread-m{font-size:11px;color:var(--muted);font-family:var(--f-mono)}
.ai-icon.del{font-size:16px;color:var(--muted);opacity:.55}
.ai-thread:hover .ai-icon.del,.ai-icon.del:focus-visible{opacity:1}
.ai-icon.del:hover{color:var(--bad)}
.ai-switch{accent-color:var(--accent);width:15px;height:15px;margin:0 2px;flex:none}
/* a thread */
.ai-chatv{min-height:420px}
.ai-trigcard{flex:none;margin:8px 12px 0;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);padding:8px 10px}
.ai-trigcard > summary{cursor:pointer;display:flex;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.ai-trigcard[open] > summary{margin-bottom:8px}
.ai-trig{display:flex;flex-direction:column;gap:7px}
.ai-feed{flex:1 1 auto;min-height:200px;overflow:auto;display:flex;flex-direction:column;gap:7px;padding:12px}
.ai-empty{margin:auto 0;color:var(--muted);font-size:13px;line-height:1.5;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ai-empty p{margin:0}
.ai-suggest{border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-2);border-radius:14px;padding:5px 11px;font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.ai-suggest:hover{border-color:var(--accent);color:var(--ink)}
.ai-msg{font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}
.ai-msg.w-you{align-self:flex-end;background:var(--accent-soft);color:var(--ink);padding:6px 10px;border-radius:10px 10px 2px 10px;max-width:88%}
.ai-msg.w-ai{color:var(--ink)}
.ai-msg.w-note{color:var(--muted);font-size:12px}
.ai-msg.w-note.t-bad{color:var(--bad)}
.ai-msg.w-trigger{color:var(--ink-2);font-size:12px;border-left:2px solid var(--swing);padding-left:8px}
.ai-tool{font-size:12px;color:var(--ink-2);border-left:2px solid var(--line-strong);padding-left:8px}
.ai-tool.bad{border-left-color:var(--bad)}
.ai-tool summary{cursor:pointer;list-style:none;display:flex;gap:6px;align-items:baseline;font-family:var(--f-mono);font-size:11.5px;overflow-wrap:anywhere}
.ai-tool summary::-webkit-details-marker{display:none}
.ai-gear{color:var(--good)}
.ai-tool.bad .ai-gear{color:var(--bad)}
.ai-pre{margin:4px 0 0;font-family:var(--f-mono);font-size:11px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.ai-pre.out{color:var(--muted)}
.ai-ask{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;padding-left:10px}
.ai-typing{display:flex;gap:4px;padding:4px 2px}
.ai-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:aiPulse 1s ease-in-out infinite}
.ai-typing i:nth-child(2){animation-delay:.15s}.ai-typing i:nth-child(3){animation-delay:.3s}
.ai-compose{flex:none;border-top:1px solid var(--line);padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;background:var(--panel)}
.ai-input{width:100%;box-sizing:border-box;resize:vertical;min-height:44px;max-height:200px;line-height:1.45}
.ai-status{flex:1;font-size:11.5px;color:var(--muted);font-family:var(--f-mono)}
.ai-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ai-row > input[type=text],.ai-row > input[type=url]{flex:1}
.ai-row.small{font-size:12px;color:var(--muted);gap:14px}
.pane.ai .ai-num{width:64px}
.ai-expr{flex:1;font-family:var(--f-mono)}
.ai-err{color:var(--bad);font-size:11.5px}
.ai-err:empty{display:none}
.hint.good{color:var(--good)}
.hint.bad{color:var(--bad)}
/* the game key layout: the move pad on the left, under W A S D (pilot.js) */
.pilot.game > .pad:first-child{order:3}
.pilot.game > .pilot-mid{order:2}
.pilot.game > .pad:last-child{order:1}
.keys-pop .seg{align-self:flex-start}
/* Steering: its three choices share the row (no gap at the end) */
#steerSec .seg{display:flex}
#steerSec .seg button{flex:1}
/* the readouts' tabs (right panel) */
.rtabs{position:sticky;top:0;margin-top:2px}
.ftabs button.alert::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--bad)}
.rpane{display:flex;flex-direction:column}
/* the status strip on top of the readouts: fixed tiles, one line of warnings (ui.js updateLive) */
.status{padding:10px 12px 10px;border-bottom:1px solid var(--line);gap:8px;flex:none}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tile{display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:8px;align-items:center;padding:7px 9px 7px 8px;border:1px solid var(--line);border-left:3px solid var(--line-strong);border-radius:7px;background:var(--panel);text-align:left;font:inherit;color:inherit;min-width:0;height:64px;box-sizing:border-box}
button.tile{cursor:pointer}
button.tile:hover{background:var(--panel-2)}
button.tile:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tile .ti{grid-row:1/4;width:20px;height:20px;color:var(--muted)}
.tile .tk{font-family:var(--f-display);font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.1}
.tile .tv{font-family:var(--f-display);font-weight:600;font-size:16px;line-height:1.15;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .ts{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25;min-height:1.25em}
.tile.good{border-left-color:var(--good)} .tile.good .ti{color:var(--good)}
.tile.warn{border-left-color:var(--warn)} .tile.warn .ti,.tile.warn .tv{color:var(--warn)}
.tile.bad{border-left-color:var(--bad);background:var(--bad-soft)} .tile.bad .ti,.tile.bad .tv{color:var(--bad)}
.tile.accent{border-left-color:var(--accent)} .tile.accent .ti,.tile.accent .tv{color:var(--accent)}
.alerts{margin:0;font-size:12px;line-height:18px;height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.alerts.warn{color:var(--warn)} .alerts.bad{color:var(--bad)} .alerts.info{color:var(--ink-2)}
/* the readouts' tabs: folder tabs with icons */
.ftabs{display:flex;gap:3px;padding:7px 8px 0;background:var(--panel-2);border-bottom:1px solid var(--line);margin-top:0}
.ftabs button{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 4px 7px;border:1px solid transparent;border-bottom:0;border-radius:7px 7px 0 0;margin-bottom:-1px;font-size:12px;letter-spacing:.05em;color:var(--muted)}
.ftabs button svg{width:15px;height:15px;flex:none}
.ftabs button:hover{color:var(--ink-2);background:color-mix(in srgb,var(--panel) 50%,transparent)}
.ftabs button[aria-selected="true"]{background:var(--panel);border-color:var(--line);color:var(--ink);border-bottom:1px solid var(--panel)}
/* the key to the source tags: one quiet line until opened */
.src-legend summary .src{display:none}
.src-legend summary{padding:6px 12px;color:var(--muted)}
.src-legend summary::before{content:"ⓘ";margin-right:4px}
.pane > .src-legend{border-bottom:1px solid var(--line);flex:none}
/* the Health tab, calmer (health-ui.js) */
.h-top .h-count{font-size:12px;color:var(--good)}
.h-top .h-count.bad{color:var(--bad);font-weight:600}
.h-how summary{cursor:pointer;font-size:12px;color:var(--muted);list-style:none}
.h-how summary::before{content:"ⓘ ";}
.h-how summary::-webkit-details-marker{display:none}
.h-how[open] summary{margin-bottom:4px}
.h-list{gap:2px}
.h-group{font-family:var(--f-display);font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:8px 0 2px}
.h-row{padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);grid-template-columns:minmax(52px,auto) minmax(28px,1fr) 34px minmax(56px,auto) auto}
.h-name{display:inline-flex;align-items:center;gap:6px}
.h-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--good)}
.h-dot.warn{background:var(--warn)} .h-dot.bad{background:var(--bad)}
.h-state{text-align:right}
.h-sub:empty{display:none}
.h-sub{padding-left:14px}
.ftabs button{flex-direction:column;gap:2px;padding:6px 2px 5px;font-size:11px;letter-spacing:.06em;line-height:1.1}
.ftabs button svg{width:17px;height:17px}
.ftabs button.alert::after{position:absolute;margin:-2px 0 0 18px}
.ftabs button{position:relative}
/* calmer panels: ⓘ for long explanations, source tags as dots in headings, folded rows (ui.js infoize, index.html) */
.info-btn{width:17px;height:17px;border-radius:50%;border:1px solid var(--line-strong);background:var(--panel);color:var(--muted);font:600 10.5px/1 var(--f-body);font-style:italic;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none;align-self:center;text-transform:none;letter-spacing:0}
.info-btn:hover,.info-btn[aria-expanded="true"]{color:var(--accent);border-color:var(--accent)}
.info-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.info-more{display:none}
.sec.show-info .info-more{display:block}
.sec h2 .srcs{gap:3px}
.btn.sm{padding:3px 9px;font-size:12.5px}
.design-tools{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.design-gap{flex:1}
.fold{border-top:1px solid var(--line);margin:0 -14px;padding:0 14px}
.fold > summary{display:flex;align-items:baseline;gap:8px;padding:9px 0;cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--ink)}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::before{content:"▸";color:var(--muted);font-size:11px;width:10px}
.fold[open] > summary::before{content:"▾"}
.fold > summary small{margin-left:auto;font-family:var(--f-mono);font-weight:400;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fold[open]{padding-bottom:10px}
.fold[open] > :not(summary){margin-bottom:8px}
.fold.sub{border-top:0;margin:0}
.fold.sub > summary{padding:4px 0;font-weight:500;font-size:12.5px;color:var(--accent)}
.fold.sub > summary::before{display:none}
#designSec .fold{margin-bottom:-12px}
#bodySec{gap:0;padding-bottom:0}
#bodySec h2{margin-bottom:8px}
#bodySec .fold:last-child{border-bottom:0}
.addrow .btn{padding:4px 8px;font-size:12.5px}
.fold.throw-opts{display:block;gap:0;padding:0 14px;margin:0 -14px;border-top:1px solid var(--line)}
#learnSec > .fold:last-of-type{border-bottom:1px solid var(--line)}
.fold[open] > .check{margin-bottom:8px}
.sec h2 > .srcs{order:3;flex-basis:100%;align-self:flex-start;margin-top:2px}
.lbl.has-src{flex-wrap:wrap}
.fold > summary > span{white-space:nowrap;flex:none}
.ftabs button{letter-spacing:.02em;font-size:10.5px;overflow:hidden}
.ftabs button > span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-img{display:block;max-width:100%;border-radius:6px;border:1px solid var(--line);margin-top:4px}
/* sharing a design (share.js) */
.share-dlg{width:min(520px,calc(100vw - 32px))}
.share-dlg h2 + p{margin-bottom:10px}
.share-dlg h2:not(:first-child){margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.share-row{display:flex;gap:6px;margin-bottom:6px}
.share-row input{flex:1;min-width:0;font-family:var(--f-mono);font-size:11.5px;border:1px solid var(--line-strong);border-radius:6px;padding:6px 8px;background:var(--panel-2);color:var(--ink)}
.share-dlg textarea{width:100%;box-sizing:border-box;font-family:var(--f-mono);font-size:11.5px;border:1px solid var(--line-strong);border-radius:6px;padding:6px 8px;background:var(--panel);color:var(--ink);resize:vertical}
.share-dlg .hint{margin:0 0 6px}
.share-dlg .hint:empty{display:none}
.share-dlg.paste-only .share-out{display:none}
.share-dlg.paste-only h2{margin-top:0;padding-top:0;border-top:0}
#designShare svg{width:16px;height:16px}
#designShare:disabled{opacity:.4;cursor:default}
#presetSlot .mb-btn > span:first-child{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the sound button (audio.js) */
.icon-tog{padding:4px 8px;display:inline-flex;align-items:center}
.icon-tog svg{width:16px;height:16px}
.icon-tog::before{display:none}
.ai-cont{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 10px;border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:7px;background:var(--panel);font-size:12.5px;color:var(--ink-2)}
.ai-cont > span{flex:1 1 100%}
/* the sound button: an icon that shows the state; highlighted while there's sound (audio.js) */
.snd-btn{padding:4px 8px;display:inline-flex;align-items:center;color:var(--muted)}
.snd-btn svg{width:17px;height:17px}
.snd-btn.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
/* the readouts' corner with nothing to read (Show: no readouts, no legend) */
.hud-tl.bare > :not(.hud-sup){display:none}
/* the header's ⋯ (phones only) */
#hdrMore{display:none}
/* the phone layout (html.phone: ui.js uiMode) */
html.phone .bar:not(.open){flex-wrap:nowrap;align-items:center;gap:6px}
html.phone .bar:not(.open) .brand,html.phone .bar:not(.open) .hgroup > .lbl,html.phone .bar:not(.open) .mode-desc{display:none}
html.phone .bar:not(.open) .hgroup,html.phone .bar:not(.open) .hrow{display:contents}
html.phone .bar:not(.open) #resetBtn,html.phone .bar:not(.open) #launchSeg,html.phone .bar:not(.open) #speedSeg,html.phone .bar:not(.open) #terrainSel,html.phone .bar:not(.open) #terrainNew{display:none}
html.phone .bar:not(.open) #runBtn{order:-1}
html.phone .bar:not(.open) #presetSlot{flex:1;min-width:0;display:flex}
html.phone .bar:not(.open) #presetSlot .mb-btn{width:100%;justify-content:space-between}
html.phone #hdrMore{display:inline-flex;order:9;flex:none}
html.phone .bar.open #hdrMore{position:absolute;right:12px;top:10px}
html.phone .bar.open{position:relative}
html.phone #tKeys{display:none}
html.phone .show-wrap .show-menu{position:fixed;left:8px;right:8px;bottom:8px;top:auto;width:auto;max-height:65vh;overflow:auto;z-index:60}
html.phone #tKeys,html.phone #kbdHint,html.phone .pk kbd,html.phone .pilot-acts kbd,html.phone .pilot-mid > .seg,html.phone [data-act="hold"]{display:none!important}
html.phone .pilot{flex-wrap:wrap;row-gap:12px}
html.phone .pilot-mid{order:-1;flex:1 0 100%;flex-direction:row;flex-wrap:wrap;justify-content:center}
html.phone .pad{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px);gap:2px}
html.phone .pad-cap{font-size:8.5px}
html.phone .crash,html.phone .liftoff{bottom:200px}
/* a touch screen has no keys: no Keys button, no key hints */
@media (hover:none) and (pointer:coarse){ #tKeys,#kbdHint,.pk kbd,.pilot-acts kbd{display:none!important} }
/* the sound button's icon follows the state (an svg ignores [hidden]: classes) */
.snd-btn .snd-on{display:none}
.snd-btn.on .snd-on{display:block}
.snd-btn.on .snd-off{display:none}
.show-layout{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Install on a real board (js/install-ui.js) */
.install-dlg{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto}
.install-dlg > .hint{margin:-2px 0 10px}
#installTitle:focus{outline:none}
.install-dlg h3{margin:0;display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.02em}
.install-dlg p{max-width:none}
.install-dlg code{font-family:var(--f-mono);font-size:.9em}
.inst-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--f-mono);font-size:12px}
.inst-step{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.inst-step p,.inst-manual p{margin:0}
.inst-note{border-left:3px solid var(--warn);background:var(--warn-soft);color:var(--ink)!important;padding:6px 10px;border-radius:0 6px 6px 0}
.inst-safety{border:1px solid var(--line-strong);background:var(--panel-2);border-radius:8px;padding:8px 12px;margin:0 0 12px;font-size:13px}
.inst-safety ul{margin:4px 0 0;padding-left:18px}
.inst-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inst-pins{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:6px}
.inst-pins label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--ink-2);flex:1 1 200px;min-width:0}
.inst-pins input,.inst-line input{font-family:var(--f-mono);font-size:12px;border:1px solid var(--line-strong);border-radius:6px;padding:5px 8px;background:var(--panel);color:var(--ink);min-width:0}
.inst-line input{flex:1}
.inst-map{margin:0;padding-left:22px;font-size:12.5px;color:var(--ink-2);columns:2 220px}
.inst-map .bad,.inst-msg.bad{color:var(--bad)}
.inst-msg.good{color:var(--good)}
.inst-msg:empty{display:none}
.install-dlg progress{width:100%;height:8px;accent-color:var(--accent)}
.cmd{position:relative;border:1px solid var(--line);border-radius:6px;background:var(--panel-2)}
.cmd pre{margin:0;padding:8px 70px 8px 10px;overflow:auto;max-height:220px;font-family:var(--f-mono);font-size:11.5px;line-height:1.5;white-space:pre}
.cmd .btn{position:absolute;top:5px;right:5px;padding:2px 9px;font-size:12px}
.inst-console{margin:0;height:150px;overflow:auto;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);padding:6px 8px;font-family:var(--f-mono);font-size:11px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.inst-console .ev{color:var(--accent)}
.inst-console .me{color:var(--muted)}
.inst-console .bad{color:var(--bad)}
.inst-live{font-family:var(--f-mono);font-size:11px}
.inst-live:empty{display:none}
.inst-files{border-collapse:collapse;font-size:12.5px;width:100%}
.inst-files td{border-top:1px solid var(--line);padding:5px 8px 5px 0;vertical-align:top}
.inst-files td.mono{font-family:var(--f-mono);font-size:11.5px;white-space:nowrap}
.inst-files a{font-family:var(--f-mono);font-size:11.5px;color:var(--accent)}
.inst-manual{border-top:1px solid var(--line);padding-top:10px}
.inst-manual summary{cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:15px}
.inst-manual[open]{display:flex;flex-direction:column;gap:8px}
.inst-manual[open] summary{margin-bottom:2px}
html.phone .install-dlg{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;margin:0;border-radius:0}