@font-face{font-family:AowuLogo;src:url(assets/aowu-original-lettering.woff2)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#c5e9f7;color:#39251e;font-family:'Microsoft YaHei',sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:3px solid #688a6c;outline-offset:4px}
#viewport{position:fixed;inset:0;overflow:hidden}
.page-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#c5e9f7;will-change:transform}

/* Shared coordinates on every route. Leave breathing room beside the original tree. */
.shell-header{--logo-left:clamp(192px,calc(25vw - 140px),540px);position:fixed;z-index:20;top:0;left:0;width:100%;pointer-events:none}
.shell-bar{position:relative;width:100%;height:100px;padding:0 clamp(28px,4vw,88px) 0 var(--logo-left);display:flex;align-items:center;gap:34px}
.cloud{position:absolute;z-index:0;left:calc(var(--logo-left) - 112px);top:4px;width:720px;height:122px;background:url(assets/nav-cloud-painted.png) center/100% 100% no-repeat;pointer-events:none}
.shell-logo{position:relative;z-index:2;pointer-events:auto;display:flex;align-items:center;gap:5px;flex-shrink:0}
.shell-logo span{font:44px/1 AowuLogo;white-space:nowrap}
.shell-logo img{width:25px;height:27px;align-self:flex-start}
.shell-nav{z-index:2;display:flex;position:relative;gap:10px;align-items:center;pointer-events:auto;isolation:isolate}
.shell-nav a,.shell-nav button{position:relative;border:0;background:none;display:block;text-align:center;font-weight:600;font-size:17px;padding:10px 18px;white-space:nowrap}
.selected-marker{position:absolute;z-index:-1;left:0;top:0;height:42px;width:70px;background:#ffda77;border-radius:26px;visibility:hidden;will-change:transform}
.shell-account{position:relative;z-index:2;margin-left:auto;pointer-events:auto;border:1.5px solid #39251e;border-radius:32px;background:#fff9eb;display:flex;align-items:center;gap:11px;padding:10px 19px;white-space:nowrap;font-size:14px}
.shell-account img{width:29px;height:29px;aspect-ratio:1;object-fit:cover;border-radius:50%}

/* Follow the painted cloud's quieter pockets, with a shallow dip at 学习. */
@media(min-width:1251px){
  .shell-logo{left:-20px;top:5px}
  .shell-nav{margin-left:-30px;gap:20px}
  .shell-nav [data-route="explore.html"]{top:12px}
  .shell-nav [data-route="learning.html"]{top:22px}
  .shell-nav [data-route="practice.html"]{top:14px}
  .shell-nav [data-route="activities.html"]{top:3px}
}

/* The foreground stays registered to the original homepage composition. */
.home-canopy{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;will-change:transform}
.home-canopy[hidden]{display:none}
.home-canopy picture{position:absolute;inset:0;display:block}
.home-canopy img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media(min-aspect-ratio:8/5){.home-canopy img{object-position:right center}}
@media(max-aspect-ratio:6/5){.home-canopy{display:none}}
@media(min-width:1001px) and (max-width:1250px){
  .shell-header{--logo-left:330px}
  .shell-bar{gap:24px;padding-right:24px}
  .shell-nav{gap:4px}.shell-nav a,.shell-nav button{padding:10px 12px}
}
@media(max-width:1000px){
  .shell-header{--logo-left:38px}
  .shell-bar{padding-right:26px;gap:24px}
  .shell-nav{gap:4px}.shell-nav a,.shell-nav button{padding:10px 12px}
  .home-canopy{display:none}
}
@media(max-width:720px){
  .shell-header{--logo-left:21px}
  .shell-bar{height:116px;flex-wrap:wrap;padding:15px 21px 8px;gap:10px}
  .cloud{left:calc(50% - 350px);top:-65px;width:700px;height:187px;background-image:url(assets/nav-cloud-painted-mobile.png)}
  .shell-logo span{font-size:38px}.shell-logo img{width:20px;height:22px}
  .shell-account{padding:6px 12px;font-size:12px}.shell-account img{width:23px;height:23px}
  .shell-nav{order:3;width:100%;justify-content:space-between;gap:6px}
  .shell-nav a,.shell-nav button{font-size:14px;padding:7px 17px}
  .selected-marker{height:34px;top:0}
}

.shell-preferences{position:fixed;z-index:25;right:16px;bottom:14px;display:flex;gap:7px}
.shell-legal{position:fixed;z-index:24;left:14px;bottom:14px;display:flex;flex-wrap:wrap;gap:5px 12px;max-width:min(760px,calc(100vw - 300px));color:#56483d99;font:11px/1.5 system-ui,sans-serif}
.shell-legal a{color:inherit;text-underline-offset:2px}
.comparison-mode .shell-preferences{display:none}
.shell-preferences button{border:1px solid #71584044;border-radius:24px;background:#fff8e5ed;padding:6px 11px;font-size:12px}
.shell-notice{position:fixed;z-index:30;left:50%;bottom:65px;transform:translateX(-50%);padding:10px 20px;background:#fff8eb;border:1px solid #d7c8ad;border-radius:24px;font-size:14px}
.shell-dialog{max-width:440px;width:calc(100% - 36px);border:1px solid #d7c8ad;border-radius:22px;background:#faf7ef;padding:28px;color:#39251e;line-height:1.8}
.shell-dialog::backdrop{background:#2c302e70}.shell-dialog button{border:1px solid #604838;border-radius:25px;background:#ffda77;padding:7px 24px}.shell-dialog h2{margin-top:0}
@media(max-width:720px){.shell-preferences{bottom:10px;right:10px}.shell-preferences button{font-size:11px}.shell-legal{left:10px;bottom:10px;max-width:calc(100vw - 230px);gap:2px 8px;font-size:10px}}