/* tokyo.axiom.yoga — 落地页 hero 侧栏的服务器状态块（T261023-09 · v5.8）
   位置：`.hero-side`（竖排"歌舞伎町"下方）。该栏 pointer-events:none，
   所以链接自己要把事件收回来。≤ 该栏隐藏的断点下整块一起消失。 */
.hero-side .hs-live{
  pointer-events:auto; position:relative; display:flex; flex-direction:column; align-items:center;
  gap:0; margin-top:22px; padding:14px 0 0; border:0; background:none; text-decoration:none;
}
/* 一根 12px 的竖发丝，把这组数字接到上面竖排标题的那条轴上 */
.hero-side .hs-live::before{
  content:''; position:absolute; top:0; left:50%; width:1px; height:12px;
  transform:translateX(-.5px); background:var(--line);
}
/* 圆点 · 数字 · 标签全部竖排、居中同轴 —— 数字逐位竖排（9 / 7 / 0），不再横躺偏在一边 */
.hero-side .hs-dot{
  width:3px; height:3px; border-radius:50%; background:#8fd0a4; margin-bottom:9px;
}
.hero-side .hs-live.is-off .hs-dot{ background:var(--vermilion); }
/* 数字逐位竖叠：用「窄容器 + 逐字断行」而不是 writing-mode —— 后者会让数字被拉成细长条，
   这样每个数字保持正常比例，`1ch` 宽保证一列、`tabular-nums` 保证列宽不抖。 */
.hero-side .hs-n{
  display:block; width:1ch; margin:0 auto;
  font-family:'Wordmark','Onest',sans-serif; font-size:13px; font-weight:300;
  letter-spacing:0; line-height:1.12; text-align:center; color:var(--bone);
  font-variant-numeric:tabular-nums; word-break:break-all; transition:color .3s;
}
.hero-side .hs-l{
  writing-mode:vertical-rl; text-orientation:upright;
  font-size:9px; letter-spacing:.26em; line-height:1; color:var(--muted);
  margin-top:9px; transition:color .3s;
}
.hero-side .hs-live:hover .hs-n{ color:#e0c37a; }
.hero-side .hs-live:hover .hs-l{ color:var(--bone-dim); }

/* 属性条下方的维护计划（T261023-09 v5.10）。
   刻意**不用卡片**：卡片是内页的控件语言，放在首屏会打断"细线 + 大字 + 极小字距"的节奏。
   这里改用首页自己的语法 —— `.sec-head` 那条 `小标签 --- 细线 --- 右侧信息`，
   于是它读起来像一条"章节注记"，而不是一个掉进来的组件。 */
.gate-maint{
  display:flex; align-items:center; gap:clamp(12px,1.8vw,24px);
  margin-top:clamp(16px,2.6vh,24px); padding:0; border:0; background:none;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.gate-maint[hidden]{ display:none; }
.gate-maint .gm-k{ display:inline-flex; align-items:center; white-space:nowrap; color:rgba(224,185,100,.82); }
.gate-maint .gm-k b{ width:4px; height:4px; margin-right:10px; border-radius:50%;
  background:var(--vermilion); box-shadow:0 0 6px rgba(224,35,28,.55); }
.gate-maint .gm-rule{ flex:1 1 auto; height:1px; background:var(--line-soft); }
.gate-maint .gm-when{ white-space:nowrap; color:var(--bone-dim); letter-spacing:.14em; }
.gate-maint .gm-left{ white-space:nowrap; color:var(--muted); }
.gate-maint .gm-left i{ font-style:normal; letter-spacing:.12em; color:rgba(224,185,100,.9); }
.gate-maint.is-soon .gm-left i{ color:var(--vermilion); }
.gate-maint .gm-a{ white-space:nowrap; color:var(--muted); padding-bottom:1px;
  border-bottom:1px solid var(--line); transition:color .3s, border-color .3s; }
.gate-maint .gm-a:hover{ color:var(--bone); border-bottom-color:var(--bone); }
.gate-maint .gm-a span{ font-size:11px; margin-left:2px; }
@media (max-width:820px){
  .gate-maint{ flex-wrap:wrap; row-gap:8px; }
  .gate-maint .gm-rule{ display:none; }
  .gate-maint .gm-a{ margin-left:auto; }
}