/* tm2027 · Половина экрана. Сгенерировано; правится генератором,
   не руками. Позиции - отдельными классами, потому что борд отдаётся
   под CSP со style-src 'self': инлайновый стиль там не применяется. */

* { margin:0; padding:0; box-sizing:border-box; }
html { background:#0b0f14; }
body { font-family:"Segoe UI",system-ui,sans-serif; color:#e8edf2; padding:28px 16px 64px; }
.wrap { max-width:1640px; margin:0 auto; }
h1 { font-size:28px; color:#f4f7fb; margin-bottom:6px; }
.lede { color:#9aa6b5; max-width:74ch; margin-bottom:8px; }
.lede b { color:#f4f7fb; }
.back { display:inline-block; margin-bottom:18px; font-size:13px; color:#8fc7ff; text-decoration:none; }
.pair { display:flex; gap:28px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
figure { margin:0; }
figcaption { font-family:"Cascadia Mono",Consolas,monospace; font-size:13px; color:#9aa6b5; margin-bottom:10px; text-align:center; }
figcaption b { color:#62d6a7; font-size:16px; }
figcaption .bad { color:#f19aa7; }
.frame { position:relative; width:760px; height:980px; background:#0b0f14; border:1px solid #303947; border-radius:6px; overflow:hidden; }
.deck { position:absolute; inset:0; }
.bar { position:absolute; left:0; right:0; top:0; background:#11161d; border-bottom:1px solid #252d38; display:flex; align-items:center; gap:8px; padding:0 12px; font-size:14px; color:#e8edf2; }
.bar b { color:#f4f7fb; }
.bar .pill { font-size:11px; color:#83d9b2; border:1px solid #2f6b4f; border-radius:4px; padding:1px 6px; background:#102a1e; }
.bar .acts { margin-left:auto; font-size:12px; color:#9aa6b5; }
.bar .rc { color:#f4f7fb; border:1px solid #303947; border-radius:5px; padding:1px 6px; }
.bar.merged { font-size:13px; color:#9aa6b5; }
.bar .mbtn { margin-left:auto; border:1px solid #303947; border-radius:5px; padding:0 8px; color:#e8edf2; }
.strip { position:absolute; left:0; right:0; background:#10151c; border-bottom:1px solid #252d38; display:flex; align-items:center; gap:8px; padding:0 12px; font-size:12px; color:#9aa6b5; }
.strip b { color:#f4f7fb; }
.strip .sb { font-size:10.5px; color:#e8edf2; border:1px solid #303947; border-radius:5px; padding:2px 6px; }
.rail { position:absolute; left:0; background:#10151c; border-right:1px solid #252d38; overflow:hidden; }
.rail-wide { padding:10px 8px; font-size:12px; }
.rail-thin { display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:14px; color:#9aa6b5; font-size:15px; }
.rl { padding:5px 6px; color:#9aa6b5; white-space:nowrap; overflow:hidden; }
.rl.head { font-size:10.5px; letter-spacing:.06em; color:#6b7686; }
.rl.head b { color:#83d9b2; }
.rl.lens { color:#6b7686; font-size:11px; }
.rl.lens b { color:#f4f7fb; }
.rl.srv { color:#e8edf2; font-weight:600; }
.rl.srv i { color:#83d9b2; font-style:normal; font-size:10px; margin-left:6px; }
.rl.sp { color:#9aa6b5; padding-left:16px; }
.rl.sel { background:#1d365d; border:1px solid #5b7cfa; border-radius:5px; color:#f4f7fb; }
.glass { position:absolute; background:#0a0f16; border:1px solid #1c232e; border-radius:4px; overflow:hidden; }
.glass pre { font-family:"Cascadia Mono","Hack",Consolas,monospace; color:#dfe6ee; padding:2px 4px; white-space:pre; font-size:18.0px; line-height:23.142857142857146px; }
.status { position:absolute; left:0; right:0; bottom:0; background:#10151c; border-top:1px solid #252d38; display:flex; align-items:center; padding:0 12px; font-size:11px; color:#8e99a8; }
.footer { position:absolute; left:0; right:0; bottom:0; height:22px; background:#10151c; border-top:1px solid #252d38; display:flex; align-items:center; padding:0 12px; font-size:10.5px; color:#6b7686; font-family:"Cascadia Mono",Consolas,monospace; }
.note { text-align:center; color:#6b7686; font-size:12.5px; margin-top:22px; max-width:96ch; margin-left:auto; margin-right:auto; }
.legend { display:flex; gap:18px; justify-content:center; margin-top:18px; font-size:12.5px; color:#9aa6b5; flex-wrap:wrap; }
.legend b { color:#f4f7fb; }
code { font-family:"Cascadia Mono",Consolas,monospace; color:#8fc7ff; }

@media (max-width: 1620px) {
  .frame { transform: scale(.62); transform-origin: top center; }
  figure { height: 647px; }
}
@media (max-width: 1060px) {
  .pair { flex-direction: column; align-items: center; }
  .frame { transform: none; }
  figure { height: auto; }
}

/* позиции, посчитанные генератором */
.b-rail { width:292px;top:82px;bottom:26px }
.b-glass { left:306px;top:96px;width:440px;height:844px }
.b-bar { height:44px }
.b-strip { top:44px;height:38px }
.b-status { height:26px }
.a-rail { width:48px;top:38px;bottom:0px }
.a-glass { left:53px;top:43px;width:702px;height:932px }
.a-bar { height:38px }