/* 朱雀仿宋（OFL 1.1）：子集优先，缺字时回落到完整字体，再回落到系统仿宋 */
@font-face{font-family:"ZhuqueSub";src:url(fonts/ZhuqueFangsong-sub.ttf) format("truetype");font-display:block}
@font-face{font-family:"ZhuqueFull";src:url(fonts/ZhuqueFangsong-Regular.ttf) format("truetype");font-display:block}
@font-face{font-family:"HackLocal";src:local("Hack"),url(fonts/Hack-Regular.ttf) format("truetype");font-display:block}

:root{
  --cn-bg:#EE1C25;  --cn-fg:#FFDE00;                  /* 中国国旗红 / 五星黄 */
  --si-bg:#DCDFE3;  --si-fg:#23262B; --si-dim:#7C838C; /* 焊锡银 / 硅暗色 */
  --us-bg:#3C3B6E;  --us-fg:#FFFFFF;                  /* Old Glory Blue / 星白 */
  --pad-y:5vh; --pad-x:2vw; --head:4.5vh;
  /* 基线网格：u = HEX 一行的高度，三栏共用。中文每字一格，英文每行一格，HEX 每行一格。
     三种字体的字号互不相同（0.88u / 0.84u / 0.62u），只在网格 u 上对齐。均由脚本计算。 */
  --u:20px; --rowh:40px; --rgap:20px; --hlh:20px; /* 网格单位 / 每条观点高 / 观点间距 / HEX 行高，脚本计算 */
  --hfs:14px; --cnfs:17px; --cnls:3px;
  --hxoff:0px; --enoff:0px;          /* HEX / 英文墨心相对格心的补偿，脚本实测 */
  --tls:0px;                         /* 中文标题字距，脚本按列距计算 */
  --font-cn:"ZhuqueSub","ZhuqueFull","FangSong","仿宋","STFangsong","仿宋_GB2312","Songti SC",serif;
  --font-en:"Times New Roman",Times,"Tinos","Liberation Serif",serif;
  --font-hex:"HackLocal","Hack","Menlo","SF Mono","Consolas",monospace;
}
html,body{margin:0;height:100%;background:#000;overflow:hidden}
#stage{display:grid;grid-template-columns:1fr 1fr 1fr;width:100vw;height:100vh}
.panel{display:flex;flex-direction:column;padding:var(--pad-y) var(--pad-x);box-sizing:border-box;overflow:hidden;min-width:0}
.head{height:var(--head);flex:none;display:flex;align-items:flex-end;justify-content:center;line-height:1;padding-bottom:.8vh;box-sizing:border-box}
.head .t{font-size:2.6vh}
/* 中文标题两字的字距 = 列距，居中后恰好落在第 8、9 列的中心上 */
#cn .head .t{letter-spacing:var(--tls);margin-right:calc(-1 * var(--tls))}
.body{flex:1;min-height:0;display:flex}
/* 可选网格线（按 G 键）：每 u 一条，横贯三栏，用来显示共用的基线网格 */
#stage.grid .body{background-image:linear-gradient(var(--grid-c) 1px,transparent 1px);background-size:100% var(--u);background-repeat:repeat-y}
#cn{--grid-c:rgba(255,255,255,.18)} #mid{--grid-c:rgba(35,38,43,.13)} #us{--grid-c:rgba(255,255,255,.16)}

#cn{background:var(--cn-bg);color:var(--cn-fg);font-family:var(--font-cn)}
#mid{background:var(--si-bg);color:var(--si-fg);font-family:var(--font-hex)}
#us{background:var(--us-bg);color:var(--us-fg);font-family:var(--font-en)}

/* 左：中文，一列一观点；每字高恰好 1u（字号 + 字距），字距上下各半，使墨心落在格心 */
#cn .body{flex-direction:row}
#cn[data-dir=rl] .body{flex-direction:row-reverse}
.col{flex:1 1 0;min-width:0;display:flex;justify-content:center;overflow:hidden}
.col>span{writing-mode:vertical-lr;white-space:nowrap;font-size:var(--cnfs);line-height:1;letter-spacing:var(--cnls);padding-top:calc(var(--cnls) / 2)}
#cn[data-dir=rl] .col>span{writing-mode:vertical-rl}

/* 中：HEX 矩阵，一行观点 = 中文第 i 列字节 + 英文第 i 行字节，各占 k 格 */
#mid .head{padding:0}
#mid .body,#us .body{flex-direction:column;gap:var(--rgap)}
.row,.line{flex:none;height:var(--rowh)}
.row,.ruler{display:flex;gap:1.2vw}
.row{overflow:hidden}
.hx{flex:1 1 0;min-width:0;overflow:hidden;white-space:pre;font-size:var(--hfs);line-height:var(--hlh);transform:translateY(var(--hxoff))}
.hx.en{text-align:right}
.ruler{width:100%;color:var(--si-dim);font-size:var(--hfs);line-height:1;white-space:pre}
.ruler span{flex:1 1 0;min-width:0;overflow:hidden}
.ruler span:last-child{text-align:right}

/* 右：英文，一行一观点；行高恰好 1u，可折成 k 行 */
.line{font-size:calc(var(--u) * .84);line-height:var(--u);transform:translateY(var(--enoff))}
#us .head .t{font-style:italic}

/* 悬停：同一序号的列、行、矩阵行一起点亮，显示“间接对齐” */
.col.hl,.line.hl{background:rgba(255,255,255,.14)}
.row.hl{background:rgba(35,38,43,.08)}