:root{--ink:#092e65;--green:#0759e8;--paper:#f4f7fc;--line:#d8e2f1}
body{color:var(--ink);background:var(--paper);font-family:system-ui,'Microsoft YaHei','PingFang TC',sans-serif}
header{border-bottom:3px solid #0759e8;background:white}
nav{padding-top:12px;padding-bottom:12px}
nav .brand{display:flex;align-items:center;gap:14px;text-decoration:none;line-height:1.25}
.brand-logo{width:90px;height:90px;object-fit:contain;flex-shrink:0}
.brand-name{display:block;font-size:25px;letter-spacing:-.5px;font-weight:800;color:#092e65}
.brand-caption{display:block;margin-top:5px;font-size:12px;letter-spacing:.6px;font-weight:600;color:#526680}
.hero{gap:45px}.hero h1{color:#092e65}.hero h1 em{color:#0759e8;font-style:normal}
.hero-art{height:auto;min-height:320px;background:white;border:1px solid #d8e2f1;border-radius:24px;box-shadow:0 14px 40px #092e650a;display:flex;align-items:center;justify-content:center;padding:18px}
.hero-logo{display:block;width:100%;max-width:385px;height:auto;object-fit:contain}
p,.sub{color:#526680}
.stat{border-top:3px solid #0759e8;box-shadow:0 3px 14px #092e6505}.stat b{color:#092e65}
.step{border-top:3px solid #092e65}.number{color:#0759e8;font-weight:750}
.panel{box-shadow:0 4px 20px #092e6506}
.badge{background:#eaf1ff;color:#0949b4}.tabs button.active{background:#0759e8;border-color:#0759e8}
button.primary,a.primary{background:#0759e8;color:white;box-shadow:0 4px 10px #0759e81a}
button.primary:hover,a.primary:hover{background:#0647bc}button.secondary{color:#092e65;border-color:#c6d6ed}
progress{accent-color:#0759e8}.option{color:#092e65}.option:hover:enabled{background:#f1f6ff;border-color:#0759e8}
.feedback{background:#edf3fe}.option.correct{color:#165333}.option.wrong{color:#84362b}
input,select{color:#092e65;background:white}select{border:1px solid #c6d6ed;border-radius:8px;padding:8px}
dialog::backdrop{background:#092e6580}
footer{color:#526680}h1,h2,h3,button,summary,label{font-style:normal;transform:none}
@media(max-width:800px){.brand-logo{width:74px;height:74px}.brand-name{font-size:24px}.hero-art{min-height:250px}.hero-logo{max-width:290px}.hero{gap:24px}}
/* Give the main actions their own prominent row below the brand. */
header nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px 24px 18px}
header nav .brand{grid-column:1/-1;justify-self:start;margin:0 0 2px}
header nav>a:not(.brand){display:flex;align-items:center;justify-content:center;min-height:54px;padding:12px 16px;background:#eaf1ff;border:2px solid #bfd2f5;border-radius:10px;color:#092e65;font-size:20px !important;font-weight:850;text-align:center;text-decoration:none;line-height:1.4}
header nav>a[href="#practice"]{background:#0759e8;border-color:#0759e8;color:#fff}
header nav>a:not(.brand):hover{background:#dce8ff;border-color:#0759e8}
header nav>a[href="#practice"]:hover{background:#0647bc;color:#fff}
html{scroll-behavior:smooth}#guide,#practice,#resources{scroll-margin-top:18px}
@media(max-width:600px){header nav{padding:10px 16px 16px;gap:8px}header nav .brand{justify-self:center}header nav>a:not(.brand){font-size:17px !important;min-height:58px;padding:10px 7px}header nav>a:last-child{display:flex}.brand-logo{width:70px;height:70px}.brand-caption{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}