:root { color-scheme: dark; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; color: #fff; background: #080f62; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: url("self-heating/assets/background.png") center / cover fixed; letter-spacing: 0; }
main { width: min(760px, calc(100% - 48px)); padding: 56px 0; }
h1 { margin: 0 0 40px; font-size: 32px; font-weight: 600; }
nav { border-top: 1px solid #2477b0; }
nav a { min-height: 96px; display: grid; grid-template-columns: 50px 1fr 24px; align-items: center; gap: 18px; border-bottom: 1px solid #2477b0; text-decoration: none; color: inherit; font-size: 20px; padding: 16px; }
nav a:hover, nav a:focus-visible { background: rgb(9 116 198 / 35%); }
.number { color: #76d6ec; font-size: 16px; }
@media (max-width: 480px) { h1 { font-size: 26px; } nav a { font-size: 17px; grid-template-columns: 30px 1fr 20px; gap: 12px; padding: 12px 0; } }