/* Shared framed shell: every route sits inside the same yellow canvas with a white gutter. */
:root{--nav-ink:#211e1b;--nav-yellow:#ffe000;--shell-gap:42px}
body{font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;letter-spacing:0}
html,body{scrollbar-width:none;overflow-x:hidden}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
body:not(.home-route){background:#fff}
body>header{position:relative;z-index:20;display:flex;align-items:center;flex:none;max-width:none;min-height:108px;margin:30px var(--shell-gap) 0;padding:20px 64px;gap:46px;border-radius:5px 5px 0 0;background:var(--nav-yellow);color:var(--nav-ink)}
body:not(.home-route)>#app{max-width:none;min-height:calc(100dvh - 146px);margin:0 var(--shell-gap) 20px;padding:35px 28px 90px;border-radius:0 0 5px 5px;background:var(--nav-yellow)}
body.home-route>header{min-height:108px;margin:30px var(--shell-gap) 0;padding:20px 64px;border-radius:5px 5px 0 0}
body.home-route .homepage{margin-left:var(--shell-gap);margin-right:var(--shell-gap);margin-bottom:30px}
/* The chapter wheel is the only page-level pager. */
.homepage .illustration-switch{display:none}
body>header .brand{flex:none;display:flex;align-items:center;gap:8px;color:inherit;font-family:Arial,"Microsoft YaHei",sans-serif;font-size:34px;line-height:1;font-weight:800;letter-spacing:-1.6px;transform:none;transition:none}
body>header .brand img{width:56px;height:56px;object-fit:contain;transform:none;transition:none}
/* Home has older, more specific header rules; pin its logo to the shared sizes. */
body.home-route>header .brand{font-size:34px}
body.home-route>header .brand img{width:56px;height:56px}
body>header .brand:hover,body>header .brand:focus-visible{transform:none!important;animation:none!important;opacity:1!important}
body>header .brand:hover img,body>header .brand:focus-visible img{transform:none!important;animation:none!important}
body>header nav{display:flex;flex:none;align-items:center;gap:24px;margin:0;font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;font-size:18px;line-height:30px;font-weight:700;letter-spacing:0}
body>header nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:7px 0;color:inherit;white-space:nowrap;transform:none;transition:opacity .2s ease}
body>header nav a::after{content:none}
body>header nav a:hover,body>header nav a:focus-visible{transform:none;animation:header-opacity .84s cubic-bezier(.25,.46,.45,.94)}
body>header nav a[aria-current="page"]{opacity:1}
.header-side{position:relative;display:flex;align-self:stretch;align-items:center;gap:30px;margin-left:auto}
.header-side::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:#fbff00}
body>header .header-side nav{gap:24px}
.header-side nav a::before{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:rgba(0,0,0,.2)}
.header-divider{flex:none;width:1px;height:13px;background:repeating-linear-gradient(rgba(0,0,0,.6) 0 1px,transparent 1px 3px)}
body>header .menu-toggle{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;padding:0;gap:4px;border:0;border-radius:0;background:none;transform:none;transition:none}
body>header .menu-toggle span{width:30px;height:2px;background:rgba(0,0,0,.8);transform:none;transition:none}
body>header .menu-toggle:hover,body>header .menu-toggle:focus-visible{background:none;transform:none;animation:header-opacity .84s cubic-bezier(.25,.46,.45,.94)}
@keyframes header-opacity{0%,100%{opacity:1}10%,20%{opacity:.4}}
@media (max-width:1100px){body>header,body.home-route>header{padding-left:30px;padding-right:30px;gap:30px}body>header nav{font-size:16px;gap:18px}body>header .brand{font-size:31px}body>header .brand img{width:51px;height:51px}}
@media (max-width:1100px){body.home-route>header .brand{font-size:31px}body.home-route>header .brand img{width:51px;height:51px}}
@media (max-width:900px){:root{--shell-gap:18px}body>header,body.home-route>header{min-height:78px;margin:16px var(--shell-gap) 0;padding:15px 22px;gap:18px}body:not(.home-route)>#app{margin:0 var(--shell-gap) 18px;padding:25px 18px 50px;min-height:calc(100dvh - 120px)}body.home-route .homepage{margin-left:var(--shell-gap);margin-right:var(--shell-gap);margin-bottom:18px}body>header nav{display:none}.header-side{gap:0}.header-side::before,.header-divider{display:none}body>header .brand{font-size:29px}body>header .brand img{width:45px;height:45px}body>header .menu-toggle{margin-left:auto}}
@media (max-width:900px){body.home-route>header .brand{font-size:29px}body.home-route>header .brand img{width:45px;height:45px}}
@media (max-width:600px){:root{--shell-gap:14px}body>header,body.home-route>header{min-height:70px;padding:10px 17px;margin:12px var(--shell-gap) 0}body:not(.home-route)>#app{margin:0 var(--shell-gap) 14px;padding:22px 15px 45px}body.home-route .homepage{margin-left:var(--shell-gap);margin-right:var(--shell-gap);margin-bottom:14px}body>header .brand{font-size:25px;letter-spacing:-1px}body>header .brand img{width:40px;height:40px}}
@media (max-width:600px){body.home-route>header .brand{font-size:25px;letter-spacing:-1px}body.home-route>header .brand img{width:40px;height:40px}}
/* Keep the home route in lockstep with inner pages at the tablet breakpoint. */
@media (min-width:601px) and (max-width:800px){body.home-route>header .brand{font-size:29px}body.home-route>header .brand img{width:45px;height:45px}}
@media (prefers-reduced-motion:reduce){body>header nav a:hover,body>header nav a:focus-visible,body>header .menu-toggle:hover{animation:none!important;opacity:.55}}