:root{color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#0b131e;color:#e8edf1;font:15px/1.65 system-ui,"Microsoft YaHei"}main{max-width:1280px;margin:auto;padding:24px}header,nav,.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}header{justify-content:space-between;border-bottom:1px solid #314352;padding-bottom:15px}a{color:#e7bf78}h1{font-size:30px;margin:22px 0 4px}p{color:#a8bdd0}button,select{font:inherit;background:#203344;color:#eff6fb;border:1px solid #536979;padding:9px 14px;cursor:pointer;border-radius:5px}button:hover{background:#314c60}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #f1c879;outline-offset:3px}.controls button{flex:1;min-width:125px;text-align:left}.controls small{display:block;color:#abc1d2}canvas{display:block;width:100%;aspect-ratio:16/9;background:#163b50;margin:14px 0;border-radius:8px}.status{min-height:52px;padding:10px 12px;background:#182c3a;border-left:3px solid #e9bc72;margin-top:14px;font-variant-numeric:tabular-nums}.keys{font-size:12px}section,aside{border:1px solid #314759;padding:20px;margin-top:18px;background:#111f2c}#facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#facts article{border:1px solid #354958;padding:16px;min-width:0}details{line-height:1.75}.skill-timeline{display:flex;gap:5px}.skill-timeline span{flex:1;padding:8px;background:#243f50;font-size:12px}.skill-timeline b{display:block}.power-card{border-top:1px solid #364b5b;padding-top:12px}@media(max-width:680px){main{padding:12px}h1{font-size:24px}#facts{grid-template-columns:1fr}header span{order:3;width:100%}.controls{gap:6px}.controls button{min-width:calc(33% - 6px);font-size:12px;padding:8px}section,aside{padding:13px}nav label{width:100%}nav select{width:100%}}

@media(min-width:850px){canvas{width:min(100%,calc((100dvh - 380px)*1.7778));min-width:480px;margin-inline:auto}.controls button{min-width:110px}.controls{gap:7px}.controls button{padding:7px 10px}h1{margin-top:16px}}