*{box-sizing:border-box}body{margin:0;background:#050b14;color:#edf5ff;font-family:system-ui,'Microsoft YaHei',sans-serif}main{height:100svh;min-height:650px;position:relative;overflow:hidden}canvas{position:absolute;inset:0;width:100%;height:100%}header{position:absolute;top:28px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:2px;color:#839dbb}a{color:#b8cfe4;text-decoration:none}header b{font-weight:400;color:#d6b77b;border:1px solid #574833;padding:8px 12px;border-radius:20px;letter-spacing:1px}.intro{position:absolute;top:13%;left:5%;width:43%;pointer-events:none}small{color:#6de8c2;letter-spacing:3px}h1{font-size:clamp(28px,3.4vw,55px);font-weight:500;letter-spacing:-1px;margin:16px 0}p{color:#8da6c2;line-height:1.8;font-size:14px}.intro p{max-width:480px}aside{position:absolute;right:4%;top:29%;width:260px;background:#0c1827dd;border:1px solid #253a50;border-radius:14px;padding:22px;backdrop-filter:blur(10px)}aside small{font-size:10px}aside h2{font-size:17px;font-weight:500;line-height:1.6}aside p{font-size:12px}aside strong{font-size:32px;font-weight:400;color:#6de8c2}aside .bad{color:#efa79b}aside .pair{display:flex;justify-content:space-between;border-top:1px solid #24364a;padding:12px 0;font-size:12px;color:#a8bfd4}.legend{position:absolute;bottom:168px;left:5%;color:#91a8c2;font-size:11px;display:flex;align-items:center;gap:9px}.legend i{height:7px;width:7px;background:#6382b9;border-radius:50%;margin-left:12px}.legend i.green{background:#6de8c2}.legend i.gold{background:#efc986}footer{position:absolute;bottom:20px;left:5%;right:5%}.steps{display:flex;justify-content:space-between;color:#5a728c;font-size:12px;margin-bottom:20px}.steps .active{color:#80eccd}.controls{display:flex;align-items:center;gap:18px}button{background:#102131;color:#bed4e7;border:1px solid #2c465d;border-radius:6px;padding:8px 14px;cursor:pointer}button:hover{border-color:#6de8c2}input{flex:1;accent-color:#70e4c3;min-width:0}output{font-size:12px;color:#94acc6;width:76px}footer p{font-size:10px;margin-bottom:0}@media(max-width:850px){header{left:20px;right:20px}header span{display:none}.intro{width:80%;top:12%}aside{top:46%;width:205px;padding:15px;right:3%}.legend{bottom:170px;font-size:9px;gap:5px}.controls{gap:8px}button{padding:8px}#fullscreen{display:none}}