@font-face{font-family:"MQ Pixel SC";src:url("/assets/fonts/ark-pixel-16px-proportional-zh_cn.otf.woff2") format("woff2");font-display:swap;font-weight:400}
@font-face{font-family:"MQ Pixel Latin";src:url("/assets/fonts/ark-pixel-16px-proportional-latin.otf.woff2") format("woff2");font-display:swap;font-weight:400}

:root{
  --px-ink:#071a2e;
  --px-navy:#082642;
  --px-navy-soft:#0d3859;
  --px-sky:#61c7ed;
  --px-blue:#1769a8;
  --px-cyan:#2ca4b5;
  --px-green:#4f9b45;
  --px-green-bright:#72b94b;
  --px-red:#b94034;
  --px-gold:#e3ad45;
  --px-cream:#f4e8c5;
  --px-paper:#fff7df;
  --px-violet:#64528c;
  --px-line:#041322;
  --px-shadow:0 12px 26px rgba(2,15,28,.28);
  --px-font:"MQ Pixel SC","MQ Pixel Latin","PingFang SC","Microsoft YaHei",sans-serif;
  --px-ui:"Geist","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--px-ink)}
body{margin:0;color:var(--px-cream);background-color:var(--px-ink);font-family:var(--px-ui);text-rendering:optimizeLegibility;overflow-x:hidden}
body::selection,*::selection{color:var(--px-ink);background:var(--px-gold)}
body::-webkit-scrollbar{width:10px}
body::-webkit-scrollbar-track{background:#061729}
body::-webkit-scrollbar-thumb{background:var(--px-gold);border:3px solid #061729}
a{text-underline-offset:.2em}
img{max-width:100%}
:where(a,button,input,select,textarea):focus-visible{outline:4px solid var(--px-gold)!important;outline-offset:3px!important}
:where(button,input,select,textarea){font-family:var(--px-ui)}

.px-shell{min-height:100vh;background:linear-gradient(180deg,#0b2e4e 0 92px,transparent 92px)}
.px-nav{position:relative;z-index:30;display:grid;grid-template-columns:minmax(210px,1fr) auto;align-items:center;gap:22px;width:min(1360px,calc(100% - 36px));min-height:92px;margin:auto;border-inline:2px solid rgba(227,173,69,.22)}
.px-brand{display:flex;align-items:center;gap:14px;min-width:0;color:var(--px-cream);text-decoration:none;padding-left:18px}
.px-brand img{display:block;width:112px;filter:drop-shadow(0 0 1px rgba(255,255,255,.9));image-rendering:auto}
.px-brand span{max-width:170px;color:#d8cda9;font:700 12px/1.4 var(--px-ui);letter-spacing:.12em}
.px-skins{display:flex;align-items:center;gap:6px;padding:8px;border:2px solid #04192d;background:#061e34;box-shadow:inset 0 0 0 2px #16466d;font:400 12px/1 var(--px-font)}
.px-skins span{padding:0 8px;color:#b9c8cb}
.px-skins a{display:grid;place-items:center;min-width:52px;min-height:44px;border:2px solid transparent;color:#dce7df;text-decoration:none}
.px-skins a:hover,.px-skins a.active{border-color:var(--px-gold);color:#071a2e;background:var(--px-gold);box-shadow:inset -3px -3px 0 #a56d20}
.px-admin{display:grid;place-items:center;min-height:44px;padding:0 18px;margin-right:16px;border:2px solid #081522;background:#b94034;color:#fff;text-decoration:none;font:700 13px/1 var(--px-ui);box-shadow:inset -4px -4px 0 #7e2724}

.px-hero{position:relative;display:grid;grid-template-columns:minmax(340px,.85fr) minmax(520px,1.15fr);min-height:690px;overflow:hidden;background:linear-gradient(180deg,#63c9ef 0 66%,#bceaf3 66% 68%,#d9e6c2 68%);border-block:4px solid #041322}
.px-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,247,223,.96) 0 42%,rgba(255,247,223,.72) 47%,transparent 59%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 4px)}
.px-hero-copy{position:relative;z-index:6;align-self:center;width:min(720px,100%);padding:70px clamp(30px,6vw,92px)}
.px-hero h1{max-width:min(58vw,920px);margin:0;color:var(--px-navy);font:400 clamp(54px,7.4vw,104px)/.98 var(--px-font);letter-spacing:.015em;text-wrap:balance;text-shadow:4px 4px 0 #fff1bf}
.px-hero h1 span{color:var(--px-red)}
.px-hero-copy>p{max-width:31em;margin:30px 0 0;color:#17344d;font:700 17px/1.85 var(--px-ui)}
.px-hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.px-hero-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border:3px solid #061729;background:#fff7df;color:#082642;text-decoration:none;font:700 15px/1 var(--px-ui);box-shadow:inset -4px -4px 0 #d5be88,5px 5px 0 rgba(4,19,34,.22)}
.px-hero-actions a.px-primary{background:var(--px-red);color:#fff;box-shadow:inset -5px -5px 0 #7a2824,5px 5px 0 rgba(4,19,34,.22)}
.px-hero-actions a:hover{transform:translateY(-2px)}
.px-hero-world{position:relative;z-index:2;min-height:690px;background-image:linear-gradient(180deg,rgba(6,36,62,.02),rgba(6,36,62,.12)),url("/assets/pixel/academy-landscape.webp");background-position:center;background-size:cover;image-rendering:pixelated}
.px-cloud{display:none}
.cloud-one{top:90px;right:10%}.cloud-two{top:180px;left:8%;transform:scale(.7)}
.px-mountain{display:none}
.mountain-back{right:4%;opacity:.5;transform:scale(1.25)}.mountain-front{left:0;border-bottom-color:#317956}
.px-academy{position:absolute;left:50%;bottom:54px;width:240px;height:180px;transform:translateX(-50%);background:#d9be79;border:7px solid #071a2e;box-shadow:inset 0 -16px 0 #9e6b31,12px 12px 0 rgba(7,26,46,.25)}
.px-academy::before{content:"";position:absolute;left:-37px;top:-55px;width:300px;height:50px;background:#1769a8;border:7px solid #071a2e;clip-path:polygon(8% 0,92% 0,100% 70%,64% 70%,59% 100%,41% 100%,36% 70%,0 70%)}
.px-academy::after{content:"";position:absolute;left:84px;bottom:0;width:58px;height:90px;background:#70332c;border:7px solid #071a2e}
.px-academy i{position:absolute;left:32px;top:48px;width:38px;height:46px;background:#aee0e8;border:6px solid #071a2e;box-shadow:132px 0 0 #aee0e8,132px 0 0 6px #071a2e}
.px-academy b{position:absolute;z-index:2;left:63px;top:-25px;width:104px;padding:8px 5px;background:var(--px-gold);border:5px solid #071a2e;color:#071a2e;text-align:center;font:400 18px/1 var(--px-font)}
.px-path{position:absolute;left:calc(50% - 75px);bottom:-80px;width:150px;height:190px;background:repeating-linear-gradient(90deg,#dfc985 0 28px,#b99d5b 28px 32px);clip-path:polygon(26% 0,74% 0,100% 100%,0 100%)}

.px-district{position:relative;padding:112px 24px 132px;background:#f7edcf;color:#071a2e;background-image:linear-gradient(rgba(8,38,66,.045) 2px,transparent 2px),linear-gradient(90deg,rgba(8,38,66,.045) 2px,transparent 2px);background-size:24px 24px;border-bottom:4px solid #041322}
.px-section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;width:min(1280px,100%);margin:0 auto 46px}
.px-section-heading h2{max-width:16ch;margin:0;font:400 clamp(38px,5vw,70px)/1.05 var(--px-font);color:#082642;text-wrap:balance}
.px-section-heading p{max-width:440px;margin:0;color:#4f5e60;font:15px/1.8 var(--px-ui)}
.px-stage-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(206px,auto);grid-auto-flow:dense;gap:18px;width:min(1280px,100%);margin:auto}
.px-stage{--stage:#0f558e;--roof:#e3ad45;position:relative;display:grid;grid-template-columns:108px minmax(0,1fr) auto;align-items:center;gap:24px;grid-column:span 6;min-width:0;padding:44px 28px 28px;border:5px solid #061729;background:var(--stage);color:#fff;text-decoration:none;box-shadow:inset -8px -8px 0 rgba(3,18,32,.26),inset 8px 8px 0 rgba(255,255,255,.13),var(--px-shadow);transition:transform .35s cubic-bezier(.16,1,.3,1),filter .25s ease}
.px-stage::before{content:"";position:absolute;inset:8px;border:2px solid rgba(255,255,255,.34);pointer-events:none}
.px-stage::after{content:"";position:absolute;z-index:1;left:18px;right:18px;top:10px;height:24px;background:var(--roof);border:4px solid #061729;box-shadow:inset 0 -5px 0 rgba(3,18,32,.22);clip-path:polygon(3% 0,97% 0,100% 44%,92% 44%,88% 100%,12% 100%,8% 44%,0 44%)}
.px-stage:hover{transform:translateY(-5px);filter:brightness(1.08)}
.px-stage-art{position:relative;z-index:2;display:grid;place-items:center;width:96px;height:96px;border:4px solid #061729;background:#f7edcf;color:var(--stage);box-shadow:inset -6px -6px 0 #cbbd94}
.px-stage-art svg{width:64px;height:64px;fill:currentColor;stroke:#061729;stroke-width:2}
.px-stage-copy{position:relative;z-index:2;min-width:0}.px-stage-copy strong{display:block;font:400 clamp(24px,2.8vw,36px)/1.1 var(--px-font);text-shadow:3px 3px 0 rgba(3,18,32,.48)}
.px-stage-copy small{display:block;margin-top:13px;color:#fff;font:700 13px/1.5 var(--px-ui);text-shadow:1px 1px 0 rgba(3,18,32,.72)}
.px-enter{position:relative;z-index:2;display:grid;place-items:center;min-width:58px;min-height:44px;padding:0 10px;border:3px solid #061729;background:#f2d57b;color:#061729;font:700 13px/1 var(--px-ui);box-shadow:inset -4px -4px 0 #a87826}
.stage-green{--stage:#35683b;--roof:#74a45d}.stage-green::after{left:42px;right:42px;height:28px;clip-path:polygon(12% 0,88% 0,100% 58%,78% 58%,72% 100%,28% 100%,22% 58%,0 58%)}
.stage-cyan{--stage:#146575;--roof:#63c8d2}.stage-cyan::after{height:26px;background:repeating-linear-gradient(90deg,#63c8d2 0 34px,#f7edcf 34px 52px);clip-path:polygon(0 0,100% 0,96% 100%,4% 100%)}
.stage-gold{--stage:#71501b;--roof:#d2a443}.stage-gold::after{left:64px;right:64px;height:30px;clip-path:polygon(8% 0,92% 0,100% 25%,100% 75%,92% 100%,8% 100%,0 75%,0 25%)}
.stage-red{--stage:#87352d;--roof:#bf5947}.stage-red::after{left:10px;right:10px;height:30px;clip-path:polygon(8% 0,92% 0,100% 54%,70% 54%,64% 100%,36% 100%,30% 54%,0 54%)}
.stage-violet{--stage:#4f416f;--roof:#8f79b3}.stage-violet::after{left:34px;right:34px;height:29px;clip-path:polygon(0 42%,10% 42%,14% 0,86% 0,90% 42%,100% 42%,94% 100%,6% 100%)}

.px-co-create{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);gap:7vw;align-items:center;padding:130px max(24px,calc((100vw - 1280px)/2));background:#071a2e;color:#f4e8c5}
.px-create-copy h2{max-width:12ch;margin:0;font:400 clamp(38px,5vw,68px)/1.06 var(--px-font);color:#f2d57b;text-wrap:balance}
.px-create-copy p{max-width:42em;margin:27px 0 0;color:#b9c9ca;font:15px/1.9 var(--px-ui)}
.px-create-copy a{display:inline-flex;align-items:center;min-height:48px;margin-top:30px;padding:0 20px;border:3px solid #e3ad45;background:#b94034;color:#fff;text-decoration:none;font:700 14px/1 var(--px-ui);box-shadow:inset -4px -4px 0 #76231f}
.px-skin-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-width:0}
.px-skin-card{position:relative;min-height:330px;border:5px solid #020f1b;background-color:#1c6581;overflow:hidden;box-shadow:inset -8px -8px 0 rgba(0,0,0,.28);image-rendering:pixelated}
.px-skin-card::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 45%,rgba(255,255,255,.12) 46% 50%,transparent 51%),repeating-linear-gradient(90deg,transparent 0 18px,rgba(2,15,27,.15) 18px 21px)}
.px-skin-card span{position:absolute;left:12px;right:12px;bottom:12px;padding:12px 8px;border:3px solid #020f1b;background:#f2d57b;color:#061729;text-align:center;font:400 18px/1 var(--px-font)}
.skin-spring{background:linear-gradient(#55bfe8 0 44%,#6eb44b 44% 72%,#275e4b 72%)}.skin-night{background:linear-gradient(#151d55 0 55%,#23528a 55% 70%,#1d403b 70%)}.skin-workshop{background:linear-gradient(#cf743e 0 45%,#8d5537 45% 68%,#4b342b 68%)}

.px-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:48px max(24px,calc((100vw - 1280px)/2));background:#041321;color:#b9c9ca;border-top:4px solid #e3ad45}
.px-footer>div:first-child{display:grid;gap:8px}.px-footer strong{color:#f4e8c5;font:400 18px/1.2 var(--px-font)}.px-footer span{font:12px/1.5 var(--px-ui)}
.px-footer>img{width:170px;filter:drop-shadow(0 0 1px #fff);image-rendering:auto}
.px-dev{display:flex;align-items:center;justify-content:flex-end;gap:12px}.px-dev img{width:190px;height:42px;object-fit:contain;image-rendering:auto}
.px-footer-right{display:grid;justify-items:end;gap:12px}.px-footer-admin{color:#829597;text-decoration:none;font:400 10px/1 var(--px-font);opacity:.68}.px-footer-admin:hover,.px-footer-admin:focus{color:#f2d57b;opacity:1}

/* Operation surfaces: the learning-console grammar from the approved secondary-page comp. */
body:not([data-surface="pixel-portal"]){min-height:100vh;background-color:#071a2e!important;background-image:linear-gradient(rgba(97,199,237,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(97,199,237,.045) 1px,transparent 1px)!important;background-size:16px 16px!important;color:#f4e8c5!important;font-family:var(--px-ui)!important}
body:not([data-surface="pixel-portal"]) :where(.wrap,main){position:relative;width:min(1120px,calc(100% - 32px))!important;margin-inline:auto!important}
body:not([data-surface="pixel-portal"]) :where(.top,.toolbar,.module-nav,.header){border:3px solid #041321!important;background:#0a2d4a!important;color:#f4e8c5!important;box-shadow:inset -5px -5px 0 rgba(0,0,0,.22)!important}
body:not([data-surface="pixel-portal"]) :where(.top a,.toolbar a,.module-nav a,.back,.home-link){color:#f4e8c5!important}
body:not([data-surface="pixel-portal"]) :where(.hero,.head){position:relative;border:4px solid #041321!important;border-radius:0!important;background:#0d3859!important;color:#fff!important;box-shadow:inset -8px -8px 0 rgba(0,0,0,.25),var(--px-shadow)!important;overflow:hidden}
body:not([data-surface="pixel-portal"]) :where(.hero,.head)::after{content:"";position:absolute;inset:8px;border:2px solid rgba(227,173,69,.42);pointer-events:none}
body:not([data-surface="pixel-portal"]) :where(h1,h2,h3,.brand,.title){font-family:var(--px-font)!important;font-weight:400!important;letter-spacing:0!important}
body:not([data-surface="pixel-portal"]) :where(.card,.panel,.bank-box,.module-card,.invite-box,.question-card,.result-card,.modal,.box){border:4px solid #041321!important;border-radius:0!important;background:#f7edcf!important;color:#071a2e!important;box-shadow:inset -6px -6px 0 rgba(105,82,38,.14),var(--px-shadow)!important}
body:not([data-surface="pixel-portal"]) :where(.card,.panel,.bank-box,.module-card,.question-card,.result-card){position:relative}
body:not([data-surface="pixel-portal"]) :where(.primary,.pk-action,button:not(.secondary):not(.ghost):not(.back):not(.logout):not(.option):not(.decline):not(.pk-cancel)){min-height:44px!important;border:3px solid #041321!important;border-radius:0!important;background:#b94034!important;color:#fff!important;box-shadow:inset -4px -4px 0 #78251f!important;font-weight:800!important}
body:not([data-surface="pixel-portal"]) :where(.secondary,.ghost,.back,.logout,.decline,.pk-cancel){min-height:44px;border:3px solid #041321!important;border-radius:0!important;background:#e3ad45!important;color:#071a2e!important;box-shadow:inset -4px -4px 0 #9d6b22!important}
body:not([data-surface="pixel-portal"]) :where(input,select,textarea){border:3px solid #041321!important;border-radius:0!important;background:#fff9e8!important;color:#071a2e!important;box-shadow:inset 3px 3px 0 rgba(8,38,66,.12)!important}
body:not([data-surface="pixel-portal"]) :where(.option){border:3px solid #041321!important;border-radius:0!important;background:#fff9e8!important;color:#071a2e!important;box-shadow:inset -3px -3px 0 rgba(8,38,66,.12)!important}
body:not([data-surface="pixel-portal"]) .option.correct{background:#b9df9d!important;color:#173b24!important}body:not([data-surface="pixel-portal"]) .option.wrong{background:#f2b0a7!important;color:#67221e!important}
body:not([data-surface="pixel-portal"]) :where(.stat,.summary div,.test-stats div,.bank-stats div){border:3px solid #041321!important;border-radius:0!important;background:#ead49a!important;color:#071a2e!important}
body:not([data-surface="pixel-portal"])[data-surface^="admin"]{background-color:#071a2e!important}
body[data-surface^="admin"] table{background:#fff9e8!important;color:#071a2e!important;border-collapse:collapse!important}
body[data-surface^="admin"] th{position:sticky;top:0;background:#0d3859!important;color:#fff!important;font-weight:800!important}
body[data-surface^="admin"] td,body[data-surface^="admin"] th{border:2px solid #041321!important}
body[data-surface^="admin"] tr:hover td{background:#f2d57b!important}
body[data-surface^="admin"] .module-card{background:#f7edcf!important}

body[data-surface="reflection"] .arena{border:5px solid #041321!important;border-radius:0!important;background:#2e6d46!important;box-shadow:inset 0 8px 0 rgba(0,0,0,.25)!important}
body[data-surface="reflection"] .hole{border:3px solid #041321!important;background:radial-gradient(ellipse at center,#061018 0 43%,#3e2b21 44% 61%,#a46e36 62% 70%,#704726 71%)!important}
body[data-surface="reflection"] .target{border:3px solid #041321!important;border-radius:0!important;background:#f2d57b!important;color:#071a2e!important;font-family:var(--px-font)!important}

.pixel-theme-bar{position:fixed;z-index:10000;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));display:flex;gap:4px;padding:5px;border:3px solid #020f1b;background:#082642;box-shadow:4px 4px 0 rgba(2,15,27,.38)}
.pixel-theme-bar a{display:grid;place-items:center;min-width:58px;min-height:44px;padding:0 9px;border:2px solid transparent;color:#f4e8c5;text-decoration:none;font:400 12px/1 var(--px-font)}
.pixel-theme-bar a:hover,.pixel-theme-bar a[aria-current="page"]{border-color:#e3ad45;background:#e3ad45;color:#071a2e}
.pixel-developer-footer{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;gap:14px;width:min(92%,900px);margin:36px auto 16px;padding:18px 0 5px;border-top:3px solid #e3ad45;color:#b9c9ca;font:700 11px/1.5 var(--px-ui);letter-spacing:.08em}
.pixel-developer-footer img{display:block;width:min(210px,48vw);height:40px;object-fit:contain;image-rendering:auto}

@media(max-width:980px){
  .px-nav{grid-template-columns:1fr auto}.px-brand span{display:none}.px-admin{display:none}.px-skins span{display:none}
  .px-hero{grid-template-columns:1fr;min-height:auto}.px-hero::after{background:linear-gradient(180deg,rgba(255,247,223,.95) 0 39%,rgba(255,247,223,.48) 51%,transparent 67%)}
  .px-hero-copy{padding:58px 28px 30px}.px-hero h1{max-width:920px}.px-hero-world{min-height:520px}
  .px-stage{grid-column:span 12}.px-co-create{grid-template-columns:1fr}.px-skin-card{min-height:280px}
}
@media(max-width:640px){
  .px-shell{background-size:auto}.px-nav{width:calc(100% - 16px);min-height:76px;gap:8px}.px-brand{padding-left:6px}.px-brand img{width:84px}.px-skins{padding:4px}.px-skins a{min-width:43px;min-height:44px;font-size:11px}
  .px-hero{border-block-width:3px}.px-hero-copy{padding:50px 20px 24px}.px-hero h1{max-width:100%;font-size:clamp(43px,14vw,64px);line-height:1.02}.px-hero-copy>p{font-size:15px}.px-hero-actions{display:grid}.px-hero-actions a{width:100%}.px-hero-world{min-height:390px}.px-academy{transform:translateX(-50%) scale(.74);transform-origin:bottom}.px-cloud{transform:scale(.65)}.cloud-two{transform:scale(.48)}
  .px-district{padding:76px 14px 90px}.px-section-heading{display:block;margin-bottom:30px}.px-section-heading h2{font-size:38px}.px-section-heading p{margin-top:16px}
  .px-stage-grid{gap:14px}.px-stage{grid-template-columns:74px minmax(0,1fr);gap:15px;padding:42px 16px 18px;min-height:168px;border-width:4px}.px-stage::after{left:12px;right:12px;top:8px}.stage-green::after,.stage-violet::after{left:28px;right:28px}.stage-gold::after{left:44px;right:44px}.stage-red::after{left:7px;right:7px}.px-stage-art{width:66px;height:66px}.px-stage-art svg{width:45px;height:45px}.px-stage-copy strong{font-size:24px}.px-stage-copy small{font-size:12px}.px-enter{grid-column:2;width:max-content;min-height:44px}
  .px-co-create{padding:88px 18px}.px-create-copy h2{font-size:40px}.px-skin-rail{grid-template-columns:1fr}.px-skin-card{min-height:190px}
  .px-footer{grid-template-columns:1fr;text-align:center;padding-bottom:112px}.px-footer>img{margin:auto}.px-footer-right{justify-items:center}.px-dev{justify-content:center;flex-direction:column}
  body:not([data-surface="pixel-portal"]) :where(.wrap,main){width:calc(100% - 18px)!important}
  .pixel-theme-bar{top:auto;right:10px;bottom:max(10px,env(safe-area-inset-bottom))}.pixel-theme-bar a{min-width:50px;padding:0 6px}
  .pixel-developer-footer{flex-direction:column;gap:8px;padding-bottom:64px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}