@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&display=swap');



:root{
  --bg:#1C1D1F; --panel:#26282B; --panel-2:#303236;
  --rule:#45474B; --rule-strong:#5A5C60;
  --ink:#ECEAE5; --dim:#A9A7A1; --faint:#94928C;
  --key-face:#303236; --key-edge:#5A5C60;
  --control:#151618; --track:#3A3C40;




  --strip:var(--strip-c, #2B2A28); --strip-ink:var(--strip-ink-c, #FFFFFF);
  --brand:var(--brand-d, #ECEAE5); --brand-ink:#161616;


  --caution:#F2C200; --stop:#C8102E; --safe:#00843D; --act:#005EB8;

  --success:#4CC787; --warn:#F2C200; --danger:#FF7A80; --info:#7FB2EA;



  --tap:104px; --key:104px; --btn:128px; --gap:24px; --moat:56px; --pad:32px;
  --strip-h:128px;
  --f-huge:88px; --f-big:44px; --f-mid:32px; --f-body:26px; --f-lbl:20px;





  --f-code:'JetBrains Mono',ui-monospace,Consolas,monospace;


  --panel-w:16; --panel-h:9;
}
html.light{
  --bg:#E4E2DD; --panel:#F6F5F2; --panel-2:#ECEAE5;
  --rule:#B9B6AE; --rule-strong:#8E8A80;
  --ink:#161616; --dim:#4A4945; --faint:#5F5D58;
  --key-face:#FBFAF8; --key-edge:#8E8A80;
  --control:#D5D2CB; --track:#D6D3CC;
  --brand:var(--brand-l, #161616); --brand-ink:var(--brand-ink-l, #F6F5F2);
  --success:#00733A; --warn:#7A5B00; --danger:#B00E28; --info:#005EB8;
}











html.panel-sxga,
html.panel-sxga body{
  --panel-w:5; --panel-h:4;
  --tap:76px; --key:76px; --btn:96px; --gap:17px; --moat:41px; --pad:22px;
  --strip-h:96px;
  --f-huge:64px; --f-big:32px; --f-mid:24px; --f-body:19px; --f-lbl:15px;
}
@media (max-aspect-ratio: 4/3){
  :root{ --panel-w:5; --panel-h:4; }
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}



#test-env-banner{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Montserrat,system-ui,sans-serif; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; user-select:none;
}
button{font-family:inherit}





.panel{
  position:relative;
  width:min(100vw, calc(100vh * var(--panel-w) / var(--panel-h)));
  height:min(100vh, calc(100vw * var(--panel-h) / var(--panel-w)));
  background:var(--bg); display:flex; flex-direction:column; overflow:hidden;
}
.proto{display:none}




#root{
  flex:1; min-height:0; display:grid;
  grid-template-columns:34% minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto;
}
#root > .ctx  {grid-column:1; grid-row:1; overflow-y:auto}
#root > .work {grid-column:2; grid-row:1}
#root > .state{grid-column:1 / -1; grid-row:1}
#root > .ctx ~ .state{grid-column:2; grid-row:1}
#root > .actions{grid-column:1 / -1; grid-row:2}





.mono,
.ctx .ord b, .row .ordno b, .row .n, .fig .v:not(.note), .readout .num,
.comp .cl b, .comp .cl span, .autos b, .autos span, .scanband .r{
  font-family:var(--f-code); font-variant-numeric:slashed-zero tabular-nums;
}


.rail{
  flex:0 0 var(--strip-h); display:flex; align-items:center; gap:var(--pad);
  padding:0 var(--pad); background:var(--strip); color:var(--strip-ink);
  border-bottom:2px solid var(--rule-strong);
}
.rail .mark{display:none}
.rail .who{display:flex; align-items:baseline; gap:20px; min-width:0}
.rail h1{margin:0; font-size:38px; font-weight:700; line-height:1.1; white-space:nowrap}
.rail .dir{font-size:30px; font-weight:500; opacity:.8; white-space:nowrap}
.rail .spacer{flex:1}

.rail .tlogo{order:-1; height:calc(var(--strip-h) - 28px); max-width:260px; object-fit:contain; display:block}
html.panel-sxga .rail h1{font-size:28px}
html.panel-sxga .rail .dir{font-size:22px}
html.panel-sxga .rail .who{gap:14px}




.ctx{padding:28px var(--pad); border-right:2px solid var(--rule-strong); background:var(--panel)}
.lbl, .ctx .lbl{font-size:var(--f-lbl); font-weight:600; color:var(--dim); line-height:1.25}







.ctx .ord{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-top:6px}
.ctx .ord b{font-size:var(--f-huge); font-weight:700; line-height:.95}
.ctx .ord-task{font-size:var(--f-lbl); font-weight:600; color:var(--dim); white-space:nowrap}
.ctx .ord ~ .val{font-size:40px; margin-top:14px}
.ctx .val{font-size:var(--f-big); font-weight:700; line-height:1.15; margin-top:8px}
.ctx .sub{font-size:var(--f-body); color:var(--dim); font-weight:500; margin-top:8px; line-height:1.3}




#root > .ctx.tk{display:flex; flex-direction:column; padding:0; overflow:hidden}
.tk .tkbody{flex:1 1 auto; min-height:0; overflow-y:auto}
.tk .cell{padding:20px var(--pad); border-bottom:1px solid var(--rule); min-width:0}
.tk .tkrow{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.tk .tkrow .cell + .cell{border-left:1px solid var(--rule)}
.tk .ord{margin-top:4px}
.tk .tkv{font-size:var(--f-big); font-weight:700; margin-top:10px}
.tk .cell > .val{margin-top:6px}
.tk .comps{border-top:0; margin-top:6px}
.tk .comp:last-child{border-bottom:0}
.ctxkeys{flex:0 0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;
  padding:22px var(--pad) 26px; border-top:1px solid var(--rule)}
.ctxkeys .btn{min-height:var(--tap); padding:0 12px}
.ctxkeys .btn:only-child, .ctxkeys .btn.wide{grid-column:1 / -1}
html.panel-sxga .ctxkeys{grid-template-columns:minmax(0,1fr); gap:var(--gap)}



.meter{position:relative; height:14px; background:var(--track); margin-top:14px}
.meter i{display:block; height:100%; background:var(--brand)}
.meter.over i{background:var(--caution)}
.meter::after{content:''; position:absolute; right:0; top:-6px; bottom:-6px; width:3px; background:var(--ink)}
html.panel-sxga .meter{height:11px}
.tk .cell > .figs{margin-top:0; border-top:0}


.figs{display:flex; flex-direction:column; margin-top:22px; border-top:1px solid var(--rule)}
.fig{padding:14px 0; border-bottom:1px solid var(--rule)}
.fig .k{font-size:var(--f-lbl); font-weight:600; color:var(--dim)}
.fig .v{font-size:44px; font-weight:700; margin-top:4px; line-height:1}
.fig .v small{font-size:22px; font-weight:600; color:var(--dim); margin-left:8px; font-family:Montserrat,system-ui,sans-serif}


.fig .v.code{font-size:36px}
.fig .v.note{font-size:26px; font-weight:600}


.work{flex:1; overflow-y:auto; overflow-x:hidden; padding:var(--pad) var(--pad) 12px; -webkit-overflow-scrolling:touch; min-height:0}
.work::-webkit-scrollbar{width:12px}
.work::-webkit-scrollbar-thumb{background:var(--rule-strong)}

.heading{font-size:var(--f-lbl); font-weight:600; color:var(--dim); margin:0 0 14px}






.btn, .key, .row{
  border:2px solid var(--key-edge); border-bottom-width:6px; border-radius:4px;
  background:var(--key-face); color:var(--ink); cursor:pointer;
}
.btn:active, .key:active, .row:active{border-bottom-width:2px; padding-top:4px}


.row{
  width:100%; min-height:var(--tap); display:flex; align-items:center; gap:20px;
  padding:16px 24px; margin-bottom:16px; text-align:left;
  font-family:inherit;
}
.row .grow{flex:1; min-width:0}
.row .t{font-size:var(--f-mid); font-weight:700; line-height:1.15}
.row .s{font-size:24px; color:var(--dim); font-weight:500; margin-top:6px}


.row .s.name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .s .mono{font-size:26px; font-weight:700; color:var(--ink)}
.row .n{font-size:36px; font-weight:700; white-space:nowrap}
.row .n small{font-size:22px; font-weight:600; color:var(--dim); margin-left:8px; font-family:Montserrat,system-ui,sans-serif}
.chev{display:none}

div.row{background:var(--panel); border:1px solid var(--rule); cursor:default}
div.row:active{border-bottom-width:1px; padding-top:16px}

.row.here{border-color:var(--ink); border-width:3px; border-bottom-width:7px}

.rowx{flex:0 0 auto; width:72px; height:72px; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--key-edge); border-radius:4px; color:var(--ink)}

.row.warnrow, .row.attn{border-color:var(--caution); border-width:4px; border-bottom-width:8px}
.row.badrow{border-color:var(--stop); border-width:4px; border-bottom-width:8px}
.row.done{border-color:var(--safe)}







.row .ordno{
  flex:0 0 auto; min-width:156px; align-self:stretch;
  display:flex; flex-direction:column; justify-content:center;
  border-right:1px solid var(--rule); padding-right:22px;
}
.row .ordno span{font-size:var(--f-lbl); font-weight:600; color:var(--dim)}
.row .ordno b{font-size:52px; font-weight:700; line-height:1; margin-top:4px}
html.panel-sxga .row .ordno{min-width:124px; padding-right:16px}
html.panel-sxga .row .ordno b{font-size:40px}




.pill{
  display:inline-flex; align-items:center; gap:10px; margin-top:8px;
  font-size:var(--f-lbl); font-weight:600; color:var(--dim);
}
.pill::before{content:''; flex:0 0 auto; width:14px; height:14px; border:3px solid currentColor}
.pill.ok{color:var(--ink)}
.pill.ok::before{background:currentColor}
.pill.wn{background:var(--caution); color:#161616; padding:4px 10px}
.pill.wn::before{background:#161616; border-color:#161616}
.pill.bd{background:var(--stop); color:#FFFFFF; padding:4px 10px}
.pill.bd::before{background:#FFFFFF; border-color:#FFFFFF}





.actions{flex:0 0 auto; padding:20px var(--pad); background:var(--control); border-top:2px solid var(--rule-strong)}
.actions .btn{min-height:var(--btn)}
.actions .btn.ghost, .actions .btn.danger{font-size:30px}
html.panel-sxga .actions .btn.ghost, html.panel-sxga .actions .btn.danger{font-size:24px}
.btn{
  display:flex; align-items:center; justify-content:center; gap:16px;
  width:100%; min-height:var(--btn); padding:0 28px;
  font-size:38px; font-weight:700; line-height:1.15;
}
.btn.primary{
  background:var(--brand); color:var(--brand-ink); border-color:var(--brand);
  border-bottom-color:color-mix(in srgb, var(--brand) 55%, #000);
}
.btn.ghost{min-height:var(--tap); font-size:var(--f-body); font-weight:600}
.btn.danger{min-height:var(--tap); font-size:var(--f-body); font-weight:600; color:var(--danger)}
.btn[disabled], .btn[disabled]:active, .key[disabled]{
  background:transparent; border-color:var(--rule); border-bottom-width:2px; padding-top:0;
  color:var(--faint); cursor:default; pointer-events:none;
}
.btn .sm{font-size:var(--f-body); font-weight:600; opacity:.85}
html.panel-sxga .btn{font-size:30px}



.row .btn.inrow{width:auto; flex:0 0 auto; min-height:76px; padding:0 30px}

.pair{display:flex; gap:var(--moat)}
.pair .btn{flex:1}


.readout{
  background:var(--key-face); border:2px solid var(--rule-strong); border-radius:4px;
  padding:18px 26px; margin-bottom:22px;
  display:flex; align-items:baseline; justify-content:space-between;
}
.readout .num{font-size:72px; font-weight:700; line-height:1}
.readout .uom{font-size:var(--f-mid); font-weight:600; color:var(--dim)}




.readout.unitpick{align-items:center; gap:20px}
.readout.unitpick .lhs{min-width:0; flex:1}
.readout.unitpick .conv{font-size:22px; font-weight:600; color:var(--dim); margin-top:6px}
.readout.unitpick .conv b{color:var(--ink)}
.readout .unitsw{display:flex; gap:12px; flex:0 0 auto}
.readout .unitsw button{
  min-height:var(--tap); min-width:118px; padding:0 18px;
  border:2px solid var(--key-edge); border-bottom-width:6px; border-radius:4px;
  background:var(--key-face); color:var(--ink); font-size:24px; font-weight:600; cursor:pointer;
}
.readout .unitsw button[aria-pressed="true"]{
  background:var(--brand); color:var(--brand-ink); border-color:var(--brand);
}

.keys{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}


.duo{display:grid; grid-template-columns:420px minmax(0,1fr); gap:44px; height:100%; min-height:0}
.duo > div{min-height:0; min-width:0; display:flex; flex-direction:column}
.duo .list{overflow-y:auto; padding-right:6px}


.duo .list > *{flex-shrink:0}
.duo .list::-webkit-scrollbar{width:10px}
.duo .list::-webkit-scrollbar-thumb{background:var(--rule-strong)}
.key{min-height:var(--key); font-family:var(--f-code); font-size:44px; font-weight:700}
.key.util{font-family:Montserrat,system-ui,sans-serif; font-size:var(--f-body); font-weight:600}







html.panel-sxga #root{grid-template-columns:320px minmax(0,1fr)}








html.panel-sxga .ctx .val{font-size:26px; overflow-wrap:anywhere}
html.panel-sxga .ctx{padding:22px}


html.panel-sxga .duo{grid-template-columns:380px minmax(0,1fr); gap:36px}
html.panel-sxga .key{font-size:36px}
html.panel-sxga .key.util{font-size:var(--f-body)}



html.panel-sxga .ctx .figs{flex-direction:row; margin-top:16px; border-bottom:1px solid var(--rule)}
html.panel-sxga .ctx .fig{flex:1; min-width:0; border-bottom:0; padding:10px 0}
html.panel-sxga .ctx .fig + .fig{padding-left:10px; border-left:1px solid var(--rule)}
html.panel-sxga .ctx .fig .v{font-size:30px; margin-top:4px}
html.panel-sxga .ctx .fig .v.code{font-size:22px}
html.panel-sxga .ctx .fig .v.note{font-size:17px; line-height:1.2; overflow-wrap:anywhere}
html.panel-sxga .ctx .fig .v small{display:block; font-size:15px; margin:4px 0 0}


.state{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--pad); text-align:center}


.state .icon{
  width:132px; height:132px; border-radius:4px; display:flex; align-items:center;
  justify-content:center; font-size:76px; font-weight:700; margin-bottom:32px;
}
.state .icon.ok{background:var(--safe); color:#FFFFFF}
.state .icon.bad{background:var(--stop); color:#FFFFFF}
.state .icon.wn{background:var(--caution); color:#161616}
.state .icon.nu{background:var(--panel-2); color:var(--dim)}
.state h2{font-size:var(--f-big); font-weight:700; margin:0 0 14px; line-height:1.15}
.state p{font-size:var(--f-body); color:var(--dim); font-weight:500; margin:0; max-width:min(780px,80%); line-height:1.45}
.state .detail{
  margin-top:28px; background:var(--panel); border:2px solid var(--rule);
  padding:20px 26px; font-size:22px; font-weight:600; color:var(--dim);
  text-align:left; width:min(780px,80%);
}
.state .detail b{color:var(--ink); font-weight:700}
.state .detail div+div{margin-top:10px}

.spin{
  width:104px; height:104px; border-radius:50%; margin-bottom:32px;
  border:9px solid var(--track); border-top-color:var(--ink);
  animation:sp 900ms linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .spin{animation-duration:2400ms} }




.lbl.need{display:inline-block; background:var(--caution); color:#161616 !important; padding:8px 14px}



.facts{width:min(900px,86%); margin-top:8px; border-top:1px solid var(--rule)}
.fact{display:flex; align-items:flex-start; gap:16px; text-align:left; padding:16px 4px;
      border-bottom:1px solid var(--rule); font-size:22px; font-weight:600; line-height:1.35}
.fact.ok .g{color:var(--success)}
.fact.bad .g{color:var(--danger)}
.fact .g{font-size:26px; line-height:1; font-weight:700}
.fact span{color:var(--ink); font-weight:500}


.scanbox{
  border:2px solid var(--rule-strong); padding:24px 28px; text-align:left;
  margin-bottom:24px; background:var(--panel);
}
.scanbox .big{font-size:var(--f-mid); font-weight:600; color:var(--ink)}
.scanbox .hint{font-size:var(--f-lbl); color:var(--dim); font-weight:500; margin-top:8px}
.scanbox.live{border-color:var(--ink)}






.scanband{
  display:flex; align-items:center; gap:22px; width:100%; text-align:left;
  font-family:inherit; cursor:pointer; border:0; border-radius:0;
  padding:20px 28px; margin-bottom:24px; min-height:var(--tap);
  background:var(--panel); color:var(--ink);
}


.scanband .sym{
  flex:0 0 auto; width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  font-size:40px; font-weight:700; line-height:1; border:4px solid currentColor;
}
.scanband .txt{min-width:0}
.scanband .h{font-size:var(--f-mid); font-weight:700; line-height:1.15}
.scanband .b{font-size:24px; font-weight:500; margin-top:6px; line-height:1.3}
.scanband .r{font-size:20px; font-weight:500; opacity:.85; margin-top:6px; overflow-wrap:anywhere}
.scanband.ok{background:var(--safe); color:#FFFFFF}
.scanband.wn{background:var(--caution); color:#161616}
.scanband.bad{background:var(--stop); color:#FFFFFF}



.comps{display:flex; flex-direction:column; border-top:1px solid var(--rule)}
.comp{padding:14px 0; border-bottom:1px solid var(--rule)}
.comp .cl{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.comp .cl b{font-size:26px; font-weight:700}
.comp .cl span{font-size:24px; font-weight:600; color:var(--dim); white-space:nowrap}
.comp .bar{position:relative; height:14px; background:var(--track); margin-top:12px}
.comp .bar i{display:block; height:100%; background:var(--brand)}
.comp .bar::after{content:''; position:absolute; right:0; top:-6px; bottom:-6px; width:3px; background:var(--ink)}
.comp .cs{font-size:22px; font-weight:600; color:var(--dim); margin-top:8px}
.comp .cs.go{color:var(--success)}
.autos{display:flex; flex-direction:column}
.autos > div{display:flex; justify-content:space-between; gap:12px; padding:6px 0;
  border-bottom:1px solid var(--rule); font-size:22px; color:var(--dim)}
.autos b{font-weight:700}
.autos span{font-weight:600; white-space:nowrap}



.banner{background:var(--caution); color:#161616; padding:22px 26px; margin-bottom:22px}
.banner .h{font-size:28px; font-weight:700; line-height:1.2}
.banner .b{font-size:24px; font-weight:500; margin-top:10px; line-height:1.35}
.banner .acts{display:flex; gap:var(--moat); margin-top:20px}
.banner .acts .btn{flex:1; min-height:var(--tap); font-size:24px}

.empty{text-align:center; padding:60px 20px; color:var(--dim); font-size:24px; font-weight:600}