:root{color:#d7ebf7;font-synthesis:none;background:#091622;font-family:Inter,Segoe UI,Microsoft YaHei,sans-serif}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;color:#53dce7;touch-action:none;background:#0b2233;border:1px solid #3cd0da;border-radius:10px;justify-content:center;align-items:center;gap:16px;display:flex}button:hover,button:active{background:#163c4c}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #d5ffff}button svg{width:30px;height:30px}.app{max-width:1800px;margin:auto;padding:20px 16px}header{align-items:center;gap:28px;padding:0 24px 16px;display:flex}h1{letter-spacing:-.5px;margin:0;font-size:38px;line-height:1.2}h1 span{color:#53dce7}header p{color:#aecedc;font-size:17px}.layout{grid-template-columns:minmax(0,3.2fr) minmax(300px,1fr);gap:14px;display:grid}.map{background:#142b3b;border:1px solid #2d6279;border-radius:8px;align-self:start;overflow:hidden}.map canvas{width:100%;height:auto;display:block}aside{border:1px solid #2d6279;border-radius:8px;flex-direction:column;min-width:0;padding:28px 24px;display:flex}h2{border-left:4px solid #53dce7;margin:0 0 24px;padding-left:18px;font-size:27px}.dpad{grid-template-rows:repeat(3,80px);grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:310px;margin:0 auto;display:grid}.up{grid-area:1/2}.left{grid-area:2/1}.stop{background:#153441;grid-area:2/2}.right{grid-area:2/3}.down{grid-area:3/2}.dpad svg{color:#c4e8f4;width:40px;height:40px}.stop svg{color:#53dce7}.hint{text-align:center;color:#a2c5d5;margin:20px 0;font-size:15px;line-height:1.6}.reset{border-radius:6px;width:100%;padding:17px;font-size:18px;font-weight:600}.speed{flex-direction:column;gap:22px;margin:28px 0;font-size:21px;font-weight:600;display:flex}.speed input{accent-color:#53dce7;width:100%;height:22px}dl{border:1px solid #294b61;border-radius:6px;margin:0;padding:12px 16px}dl div{border-bottom:1px solid #294557;justify-content:space-between;align-items:center;gap:8px;padding:16px 0;font-size:17px;display:flex}dl div:last-child{border:none}dd{margin:0;font-weight:600}.state{color:#53dce7}footer{text-align:center;letter-spacing:2px;color:#aecedc;padding:22px 10px;font-size:17px}@media (width>=1200px){.map{height:calc(100vh - 154px);min-height:620px}.map canvas{object-fit:contain;background:#091622;width:100%;height:100%}.layout aside{min-height:620px}}@media (width<=780px){.app{padding:18px 12px}header{padding:0 4px 14px;display:block}h1{font-size:27px}header p{margin:10px 0;font-size:14px}.layout{grid-template-columns:1fr}.map{height:auto}aside{padding:20px}.dpad{grid-template-rows:repeat(3,64px);gap:8px;max-width:260px}h2{margin-bottom:18px;font-size:23px}.speed{margin:22px 0}footer{letter-spacing:0;font-size:14px}}@media (width>=781px){h1{font-size:44px}h2{font-size:32px}.dpad{grid-template-rows:repeat(3,86px)}}