* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {width:100%; height:100%;}
html {font-size:100px;}
body {display:grid; grid-template-columns: 1fr 3rem;}
main {display:flex; justify-content: center; align-items: center;}
.ju-zhong {position: relative; width:9rem; height:5.5rem; display:flex; flex-direction:column;}
.top {width:100%; height:0.5rem; font-size:0.2rem;}
.you {display:flex; width:100%; height:100%; flex-direction:column; justify-content: flex-end;}

/*x箭头*/
.x {display:flex; width:100%; height:0.2rem; align-items: center;}
.x1 {flex:1; height:0.02rem; background-color:#222;}
.x2 {width:0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid #222;}

.yue, .zhu {margin-left:0.8rem; width:8rem; display:flex; justify-content: space-between;}
.yue {height:0.4rem;}
.zhu {height:4rem;translate: 0 8px;}
.yue span, .zhu div {flex:1; text-align: center;}
.zhu div {display:flex; flex-direction:column; justify-content: flex-end; align-items: center;}
.zhu div span {display:block; width:0.5rem;}
.zhu div span:first-child {font-size:0.24rem; translate: 0 14px; mix-blend-mode:plus-lighter; 
    font-family: 
    /* 优先使用带底座数字、防混淆的 UI 字体 */
    CPF-Serif-Pro-Regular, Tahoma, Verdana,
    /* 现代系统字体（作为后备，苹果设备上表现极佳） */
    system-ui, -apple-system, 
    /* 基础英文兜底 */
    Helvetica, Arial, 
    /* 中文字体栈 */
    "PingFang SC", 
    "Microsoft YaHei", 
    "微软雅黑", 
    /* Emoji 与符号 */
    "Apple Color Emoji", 
    "Segoe UI Emoji", 
    "Noto Color Emoji", 
    /* 终极兜底 */
    sans-serif;
}
.zhu div span:last-child {background-color:#0af;color:#fff;}

.zuo, .y {height:5rem;}
.zuo {position: absolute; left:0; bottom:0; width:0.6rem; display:flex;justify-content: flex-end;}
.hengxian {display:flex; width:0.2rem;flex-direction:column;align-items:center; justify-content:flex-end; margin-bottom:0.6rem;translate: 17px;}
.hengxian span {height:0.4rem; text-align: right;}
.y {display:flex; width:0.2rem;flex-direction:column;align-items:center; justify-content:flex-start;}
.y1 {flex:1; width:0.02rem; background-color:#222;}
.y2 {width: 0;height: 0; border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 10px solid #222;}

aside {background-color:#333; color:#fff;padding:0.15rem;}
aside > * {margin-bottom:0.1rem;}

hr {border:none; height:0; border-top:dashed 0.01rem #eee;}
label {display:flex; align-items: center; gap:0.05rem;}
label input {flex:1;}
[type='text'] {padding:0 0.05rem;}