/* 门户 /portal 与实验室 /lab 共用: 比主站活泼, 粗黑描边 + 硬投影 + 歪着放的卡片, 呼应吉祥物的手绘描边
   颜色仍只用品牌色; 吉祥物自身的黄色只出现在图片里 */
:root{
  --orange:#E85C33;--orange-deep:#C94A25;--orange-light:#FF8A5B;--tint:#FCE9E2;
  --black:#0B0B0B;--ink:#161616;--g2a:#2A2A2A;--g3a:#3A3A3A;--g6b:#6B6B6B;--ga3:#A3A3A3;--ged:#EDEDED;--gf3:#F3F3F3;--white:#FFFFFF;
  --sans:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Noto Sans SC",system-ui,sans-serif;
  --mono:"JetBrains Mono","Cascadia Mono",Consolas,monospace;
  --gutter:clamp(16px,4vw,48px);
  --line:3px solid var(--black);
}
*{box-sizing:border-box;margin:0}
html{overflow-x:hidden}
body{background:var(--white);color:var(--black);font:16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
img{display:block;max-width:100%}
a{color:inherit}
.inner{max-width:1180px;margin:0 auto;padding:0 var(--gutter);position:relative}
.label{font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--g6b);text-transform:uppercase}
.label b{color:var(--orange);font-weight:500}

/* 底纹: 点阵 + 三团慢慢变形的橙色色块 */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(var(--ged) 1.6px,transparent 1.8px);background-size:22px 22px}
.blob{position:absolute;border-radius:42% 58% 63% 37%/45% 41% 59% 55%;animation:morph 18s ease-in-out infinite alternate}
.blob.b1{width:42vmax;height:42vmax;background:var(--tint);top:-14vmax;right:-12vmax}
.blob.b2{width:18vmax;height:18vmax;background:var(--orange);opacity:.14;bottom:6vh;left:-6vmax;animation-duration:23s}
.blob.b3{width:9vmax;height:9vmax;border:3px solid var(--black);opacity:.08;top:46vh;right:12vw;animation-duration:15s}
@keyframes morph{
  0%{border-radius:42% 58% 63% 37%/45% 41% 59% 55%;transform:rotate(0) translate(0,0)}
  100%{border-radius:61% 39% 35% 65%/58% 63% 37% 42%;transform:rotate(40deg) translate(2vmax,3vmax)}
}

/* 顶栏 */
.top{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.pill{display:inline-flex;align-items:center;gap:8px;font:700 14px var(--sans);text-decoration:none;padding:9px 16px;border:var(--line);border-radius:999px;background:var(--white);box-shadow:3px 3px 0 var(--black);transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.pill:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--black);background:var(--tint)}
.pill:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--black)}
.pill.solid{background:var(--orange);color:#fff}
.pill.solid:hover{background:var(--orange-deep)}
.pill.dark{background:var(--black);color:#fff;box-shadow:3px 3px 0 var(--orange)}
.pill.dark:hover{box-shadow:5px 5px 0 var(--orange)}

/* 大标题: 每个字单独轻跳 */
.title{font:900 clamp(40px,7.4vw,96px)/1.05 var(--sans);letter-spacing:-.03em}
.title .w{display:inline-block;animation:hop 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * .12s)}
.title .o{color:var(--orange)}
@keyframes hop{0%,70%,100%{transform:none}78%{transform:translateY(-.12em) rotate(-4deg)}86%{transform:translateY(.02em)}}
.sub{font-size:clamp(15px,1.6vw,19px);color:var(--g3a);max-width:34em}
.sub b{color:var(--black);background:linear-gradient(transparent 60%,var(--tint) 60%)}

/* 吉祥物待机: 上下晃 + 轻微点头 */
.bob{animation:bob 3.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-3deg)}}

footer{margin-top:clamp(64px,10vw,120px);border-top:var(--line);padding:28px 0 40px;font-size:13px;color:var(--g6b)}
footer .inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer a{text-decoration:none;color:var(--g3a)}
footer a:hover{color:var(--orange)}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .blob,.title .w,.bob{animation:none}
}
@media (max-width:560px){
  .top .pill span.long{display:none}
}