/*
WAIC Demo 字号体系（小 / 中 / 大 / 超大）
切换：，顶栏下拉；默认「中」
Token --fs-N = 原始密排体系（小）里的 Npx 档位
── 小（原体系一，密排）──
10 / 11 / 12 / 13 / 14 / 15 / 16 / 17 / 18 / 20 / 22 / 23 / 28 / 32
── 中（原体系二，默认）──
最小 12px，正文约 13px
── 大（体系三）──
再抬一档，适合远距离投屏
── 超大（体系四）──
继续抬升，适合大屏远观
*/
:root,
[data-type-scale="中"] {
--fs-10: 12px;
--fs-11: 12px;
--fs-12: 13px;
--fs-13: 14px;
--fs-14: 15px;
--fs-15: 16px;
--fs-16: 17px;
--fs-17: 18px;
--fs-18: 20px;
--fs-20: 20px;
--fs-22: 22px;
--fs-23: 23px;
--fs-28: 28px;
--fs-32: 32px;
}
[data-type-scale="小"] {
--fs-10: 10px;
--fs-11: 11px;
--fs-12: 12px;
--fs-13: 13px;
--fs-14: 14px;
--fs-15: 15px;
--fs-16: 16px;
--fs-17: 17px;
--fs-18: 18px;
--fs-20: 20px;
--fs-22: 22px;
--fs-23: 23px;
--fs-28: 28px;
--fs-32: 32px;
}
[data-type-scale="大"] {
--fs-10: 13px;
--fs-11: 13px;
--fs-12: 14px;
--fs-13: 15px;
--fs-14: 16px;
--fs-15: 17px;
--fs-16: 18px;
--fs-17: 20px;
--fs-18: 22px;
--fs-20: 22px;
--fs-22: 24px;
--fs-23: 24px;
--fs-28: 32px;
--fs-32: 36px;
}
[data-type-scale="超大"] {
--fs-10: 15px;
--fs-11: 15px;
--fs-12: 16px;
--fs-13: 17px;
--fs-14: 18px;
--fs-15: 20px;
--fs-16: 22px;
--fs-17: 24px;
--fs-18: 26px;
--fs-20: 26px;
--fs-22: 28px;
--fs-23: 28px;
--fs-28: 36px;
--fs-32: 42px;
}
/* 顶栏字号切换：位于场景序号与上下场景按钮之间 */
.type-scale-switcher {
display: inline-flex;
align-items: center;
gap: 6px;
height: 24px;
padding: 0 6px 0 8px;
border: 1px solid rgba(74, 134, 180, 0.24);
background: rgba(8, 17, 28, 0.72);
color: rgba(216, 229, 242, 0.74);
font-size: 11px;
line-height: 1;
white-space: nowrap;
}
.type-scale-switcher label {
color: rgba(180, 206, 228, 0.72);
letter-spacing: 0.04em;
cursor: pointer;
}
.type-scale-switcher select {
height: 18px;
min-width: 48px;
padding: 0 16px 0 4px;
border: 0;
border-radius: 0;
background:
linear-gradient(45deg, transparent 50%, rgba(180, 210, 232, 0.75) 50%) calc(100% - 7px) / 4px 4px no-repeat,
linear-gradient(135deg, rgba(180, 210, 232, 0.75) 50%, transparent 50%) calc(100% - 4px) / 4px 4px no-repeat,
transparent;
color: rgba(236, 244, 251, 0.92);
font: inherit;
appearance: none;
cursor: pointer;
}
.type-scale-switcher select:focus-visible {
outline: 1px solid rgba(113, 219, 255, 0.45);
outline-offset: 0;
}