* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:#050505; color:#e8e8e8; font-family:Arial,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; }
.plate { position:relative; width:100%; height:100%; overflow:hidden; background:#050505; }
.plate__backdrops { position:absolute; inset:0; display:grid; grid-template-columns:2fr 1fr; }
.plate__backdrop-main,.plate__backdrop-cell { background:linear-gradient(180deg,#050505 0%,#0d0d0d 44%,#565656 100%); }
.plate__backdrop-main { border-right:1px solid rgba(232,232,232,.15); }
.plate__backdrop-side { display:grid; grid-template-rows:repeat(3,1fr); }
.plate__backdrop-cell { border-bottom:1px solid rgba(232,232,232,.15); }
.plate__backdrop-cell:last-child { border-bottom:0; }
.plate canvas { position:absolute; inset:0; display:block; width:100%; height:100%; opacity:0; touch-action:pan-y; cursor:grab; transition:opacity .28s ease; }
.plate canvas:active { cursor:grabbing; }
.plate canvas:focus-visible { outline:1px solid rgba(232,232,232,.72); outline-offset:-2px; }
.plate[data-state="ready"] canvas { opacity:1; }
.plate__labels { position:absolute; inset:0; display:grid; grid-template-columns:2fr 1fr; pointer-events:none; }
.plate__label-main { position:relative; border-right:1px solid rgba(232,232,232,.15); }
.plate__label-side { display:grid; grid-template-rows:repeat(3,1fr); }
.plate__cell { position:relative; border-bottom:1px solid rgba(232,232,232,.15); }
.plate__cell:last-child { border-bottom:0; }
.plate__tag { position:absolute; left:clamp(10px,1.55vw,22px); bottom:clamp(9px,1.35vw,18px); display:grid; gap:4px; text-shadow:0 1px 8px rgba(0,0,0,.9); }
.plate__tag small { color:#a0a0a0; font-size:clamp(8px,.75vw,11px); letter-spacing:.12em; }
.plate__tag strong { font-size:clamp(11px,1.25vw,18px); font-weight:500; letter-spacing:.01em; }
.plate__hint { position:absolute; z-index:3; top:clamp(9px,1.3vw,17px); right:clamp(10px,1.5vw,20px); padding:7px 9px; border:1px solid rgba(232,232,232,.15); background:rgba(3,3,3,.62); color:#bcbcbc; font-size:clamp(8px,.7vw,10px); line-height:1.3; letter-spacing:.08em; pointer-events:none; }
.plate__loading,.plate__error { position:absolute; z-index:4; left:50%; top:50%; translate:-50% -50%; color:#a0a0a0; font-size:11px; letter-spacing:.12em; }
.plate__error { display:none; color:#d4d4d4; letter-spacing:0; }
.plate[data-state="ready"] .plate__loading,.plate[data-state="error"] .plate__loading { display:none; }
.plate[data-state="error"] .plate__error { display:block; }
.plate[data-expanded="true"] .plate__hint { position:fixed; }
@media(pointer:fine) { .plate canvas { touch-action:none; } }
@media(max-width:520px) { .plate__hint { max-width:132px; text-align:right; } }
@media(prefers-reduced-motion:reduce) { .plate canvas { transition:none; } }

.plate__hint{left:12px;right:auto;top:12px;max-width:calc(66.666% - 24px);font-size:12px;text-align:left;letter-spacing:0;white-space:normal}