/* 自托管可变字体（latin 子集）。原先的 Google Fonts @import 在国内实测 3ms 即失败，
   且 @import 会拖住 styles.css 完成、连带阻塞 body 末尾的 script.js 执行。
   unicode-range 限定 latin，中文直接走系统字体，不等这三个文件。 */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('./assets/fonts/inter-latin-wght.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('./assets/fonts/space-grotesk-latin-wght.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Orbitron';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('./assets/fonts/orbitron-latin-wght.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#ffffff;
  --text:#16222c;
  --muted:#5c6b78;
  --accent:#0d9488;
  --accent-ice:#3d8ec9;
  --line:rgba(22,34,44,.10);
  --glass:rgba(255,255,255,.66);
  --radius:28px;
  --max:1240px;
}
*{box-sizing:border-box}
section[id]{scroll-margin-top:118px}
body{
  margin:0;
  background:
    radial-gradient(circle at 12% 30%, rgba(214,238,255,.40), transparent 26%),
    radial-gradient(circle at 90% 68%, rgba(224,216,255,.30), transparent 24%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 45%,#f6fafd 100%);
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  line-height:1.5;
  /* body 的 overflow 管不到 position:fixed 的极光团：它们 right:-90px / left:-150px
     会把视口的可滚动宽度撑大，手机上顶栏和弹窗就跟着整体右移被裁。裁切要落在根元素上。 */
  overflow-x:clip;
}
html{overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit}
.noise{
  position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}
.aurora{position:fixed;pointer-events:none;border-radius:999px;filter:blur(90px);opacity:.28;z-index:-1}
.aurora-a{width:420px;height:420px;background:#cdeaff;top:40px;right:-90px;animation:drift 18s ease-in-out infinite}
.aurora-b{width:360px;height:360px;background:#ccf2e8;left:-150px;top:45%;animation:drift 23s ease-in-out infinite reverse}
.aurora-c{width:320px;height:320px;background:#e6dcff;right:15%;bottom:10%;animation:drift 21s ease-in-out infinite}
@keyframes drift{50%{transform:translate3d(-20px,35px,0) scale(1.08)}}

.glass{
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.42));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 24px 70px rgba(96,120,140,.14);
  backdrop-filter:blur(25px) saturate(125%);
  -webkit-backdrop-filter:blur(25px) saturate(125%);
}
.glass-inset{
  background:rgba(244,249,252,.72);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(18px);
}

/* ---------- topbar / nav ---------- */
.topbar{
  position:fixed;z-index:30;left:50%;top:18px;transform:translateX(-50%);
  width:min(calc(100% - 32px), var(--max));height:66px;padding:0 14px 0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:20px;
}
.brand{display:flex;gap:12px;align-items:center;flex-shrink:0;white-space:nowrap;font-family:"Orbitron","Space Grotesk",sans-serif;font-weight:700;letter-spacing:.14em;font-size:15px}
/* UNION 字：冰蓝渐变 + 全息辉光，呼应六边形晶核 */
.brand > span:last-child{
  background:linear-gradient(96deg,#2b6f8f,#0d9488 46%,#3d8ec9);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 8px rgba(126,240,220,.4));
}
.brand-mark{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center}
.brand-mark svg{width:34px;height:34px;overflow:visible;filter:drop-shadow(0 3px 6px rgba(61,142,201,.28))}
.sf-float{animation:sfFloat 5s ease-in-out infinite;transform-origin:32px 32px}
@keyframes sfFloat{50%{transform:translateY(-2.5px) rotate(2deg)}}
.sf-shine{animation:sfShine 3.2s ease-in-out infinite}
@keyframes sfShine{50%{opacity:.45}}
.nav{display:flex;gap:30px;font-size:13px;color:#667888}
.nav a{position:relative;padding:6px 2px;transition:color .25s}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-ice));transition:right .3s ease;
}
.nav a:hover{color:var(--text)}
.nav a:hover::after{right:0}
.nav a.active{color:var(--text);font-weight:600}
.nav a.active::after{right:0}
.nav-toggle{
  display:none;flex-shrink:0;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.8);cursor:pointer;place-items:center;padding:0;
}
.nav-toggle span{display:block;width:16px;height:2px;border-radius:2px;background:var(--text);transition:.25s}
.nav-toggle span+span{margin-top:4px}
.nav-toggle.open span:first-child{transform:translateY(3px) rotate(45deg)}
.nav-toggle.open span:last-child{transform:translateY(-3px) rotate(-45deg)}
.mobile-menu{
  position:fixed;z-index:29;left:50%;top:94px;transform:translateX(-50%) translateY(-14px);
  width:min(calc(100% - 32px), 340px);padding:10px;border-radius:18px;
  display:flex;flex-direction:column;gap:2px;opacity:0;pointer-events:none;
  transition:opacity .28s ease,transform .32s cubic-bezier(.22,1,.36,1);
  max-height:calc(100vh - 116px);overflow-y:auto;
}
.mobile-menu.open{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.mobile-menu a{padding:12px 14px;border-radius:12px;font-size:14px;color:var(--muted);transition:background .2s,color .2s}
.mobile-menu a:hover{background:rgba(22,34,44,.05);color:var(--text)}
.mobile-menu a.active{background:rgba(61,142,201,.1);color:var(--text);font-weight:600}

/* ---------- language switch ---------- */
.lang-switch{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:999px;
  border:1px solid rgba(22,34,44,.10);background:rgba(255,255,255,.95);color:#18303e;
  font-size:12px;font-weight:600;cursor:pointer;transition:.25s;box-shadow:0 4px 16px rgba(23,66,94,.08);
}
.lang-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(23,66,94,.14)}
.lang-btn svg{width:15px;height:15px;color:#4a8db8}
.lang-caret{width:11px !important;height:11px !important;color:#7c8894 !important;transition:transform .25s}
.lang-switch.open .lang-caret{transform:rotate(180deg)}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 10px);min-width:156px;padding:6px;border-radius:14px;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:.25s;z-index:40;
}
.lang-switch.open .lang-menu{opacity:1;transform:translateY(0);pointer-events:auto}
.lang-option{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:0;background:transparent;color:var(--muted);font-size:13px;padding:10px 12px;
  border-radius:10px;cursor:pointer;text-align:left;transition:.2s;
}
.lang-option:hover{background:rgba(22,34,44,.05);color:var(--text)}
.lang-check{font-size:11px;color:var(--accent);opacity:0;transition:.2s}
.lang-option.active{color:var(--text);font-weight:600}
.lang-option.active .lang-check{opacity:1}
.mobile-lang{margin-top:8px;padding:10px 6px 4px;border-top:1px solid rgba(22,34,44,.08)}
.mobile-lang small{display:block;font-size:10px;letter-spacing:.16em;color:#7d8a97;margin:0 4px 6px}
.mobile-lang-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mobile-lang-row .lang-option{border:1px solid rgba(22,34,44,.08);border-radius:12px;justify-content:center;background:rgba(255,255,255,.7)}

.pill-btn{
  display:inline-flex;align-items:center;gap:20px;border-radius:999px;padding:13px 17px;
  border:1px solid rgba(22,34,44,.10);background:rgba(255,255,255,.95);color:#18303e;
  font-size:13px;font-weight:600;box-shadow:0 8px 26px rgba(23,66,94,.12);transition:transform .25s,box-shadow .25s;
}
.pill-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(23,66,94,.18)}
.pill-btn.compact{padding:10px 14px;gap:12px}
.text-btn{color:#486172;font-size:13px}
.text-btn:hover{color:var(--text)}

.section-shell{width:min(calc(100% - 40px),var(--max));margin-inline:auto}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;padding-top:clamp(180px,20vh,260px);padding-bottom:clamp(60px,8vh,110px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:60px}

/* ---------- 变身影院：hero 背景循环视频层（影视门户式演出） ----------
   默认隐藏，.is-on（人形态）时淡入接管背景；z-index 低于 hero-copy/hero-stage。
   视频接口见 script.js 的 MORPH_VIDEO_SRC。 */
.hero-cinema{
  /* 满屏出血：突破 .section-shell 的 1240px 限宽，左右铺到视口边缘 */
  position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;z-index:0;
  overflow:hidden;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .7s ease,visibility .7s ease;
  background:radial-gradient(ellipse at 50% 42%,#0e2233 0%,#060d15 72%);
  box-shadow:inset 0 0 120px rgba(6,13,21,.9);
}
.hero-cinema.is-on{opacity:1;visibility:visible}
.hero-cinema video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 平板/竖屏：满屏出血会裁掉画面，收成居中的 16:9 圆角"屏"，
   用 calc 把屏的中心精确对准卡牌原来的位置（舞台几何：padding-top + 舞台高/2）。 */
@media (max-width:980px){
  .hero-cinema{
    --cin-w:min(88vw,480px);
    bottom:auto;left:50%;margin-left:0;transform:translateX(-50%);
    width:var(--cin-w);height:auto;aspect-ratio:16/9;border-radius:22px;
    top:calc(155px + 250px - var(--cin-w)*9/32);   /* 舞台中心 405 − 屏高一半 */
    box-shadow:inset 0 0 0 1px rgba(126,240,220,.28),0 24px 60px rgba(6,13,21,.5);
  }
  .cinema-caption{left:14px;bottom:12px;font-size:10px;letter-spacing:.18em}
}
@media (max-width:720px){
  .hero-cinema{
    top:calc(122px + min(132vw,540px)/2 - var(--cin-w)*9/32);   /* 手机端舞台几何 */
  }
}
/* 影院开启时，hero 前景文字/舞台浮在视频之上 */
.hero-copy,.hero-stage{position:relative;z-index:2}
/* 暗角纱幔：保证前景文字在任意画面上都可读 */
.cinema-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 50%,transparent 42%,rgba(4,10,17,.55) 100%),
    linear-gradient(180deg,rgba(4,10,17,.4),transparent 22%,transparent 72%,rgba(4,10,17,.5));
}
/* 视频未就位时的占位光幕 */
.cinema-fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;color:#9fc7dd;
}
.cinema-fb-icon{
  width:64px;height:64px;display:grid;place-items:center;border-radius:50%;font-size:22px;color:#bff5ea;
  border:1px solid rgba(126,240,220,.4);background:rgba(126,240,220,.08);
  box-shadow:0 0 30px rgba(126,240,220,.25);animation:fbPulse 2.4s ease-in-out infinite;
}
@keyframes fbPulse{50%{box-shadow:0 0 46px rgba(126,240,220,.45);border-color:rgba(126,240,220,.7)}}
.cinema-fallback b{font-family:"Orbitron",sans-serif;font-size:14px;letter-spacing:.22em;color:#d8f1ff}
.cinema-fallback small{font-size:12px;letter-spacing:.04em;color:#7191a6;max-width:340px;line-height:1.7}
.hero-cinema:not(.no-video) .cinema-fallback{display:none}
/* 场记条：影视门户的"正在放映"氛围 */
.cinema-caption{
  position:absolute;left:22px;bottom:18px;margin:0;z-index:2;
  font-family:"Orbitron",sans-serif;font-size:10px;letter-spacing:.24em;color:rgba(191,245,234,.85);
  display:flex;align-items:center;gap:10px;
}
.cinema-caption i{font-style:normal;color:#ff6b6b;animation:recBlink 1.4s steps(1) infinite}
@keyframes recBlink{50%{opacity:0}}
/* 影院开启时前景适配（仅桌面满屏影院）：舞台撤掉白色圆底，文案转浅色。
   平板/手机是居中矩形屏，文案落在浅色页面上，必须保持原深色，故整组限定 min-width。 */
.hero:has(.hero-cinema.is-on) .hero-stage{background:none}
@media (min-width:981px){
  /* 浮动全息标题：静态渐变字 + text-shadow 辉光 + transform 悬浮。
     性能：辉光不能用 filter:drop-shadow + 逐帧 background-position ——
     那会让巨字层每帧重绘+重跑滤镜，视频播放期直接拖垮帧率。
     渐变保持静态（一次光栅化），悬浮走合成器 transform，辉光走 text-shadow。
     注意选择器不能写成 `.hero:has(...) .hero h1`（多一层 .hero 永不命中）。 */
  .hero:has(.hero-cinema.is-on) h1{
    background:linear-gradient(100deg,#eafcff 0%,#7ef0dc 24%,#8fb8ff 50%,#c9a6ff 72%,#eafcff 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    text-shadow:0 0 28px rgba(126,240,220,.32),0 0 80px rgba(160,130,255,.2);
    animation:h1Float 7s ease-in-out infinite;
    will-change:transform;
  }
  .hero:has(.hero-cinema.is-on) .hero-lead{color:rgba(216,238,250,.88)}
  .hero:has(.hero-cinema.is-on) .hero-copy .eyebrow{color:#9fd8cc}
    .hero:has(.hero-cinema.is-on) .text-btn{color:#bfe4f2}
  .hero:has(.hero-cinema.is-on) .text-btn:hover{color:#ffffff}
}
@keyframes h1Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.eyebrow{font-size:11px;letter-spacing:.19em;color:#63757f;margin:0 0 18px;font-weight:700}
.pulse,.mini-dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:#0d9488;box-shadow:0 0 12px rgba(13,148,136,.55);margin-right:7px}
.hero h1,.system-copy h2,.about-card h2,.section-heading h2{font-family:"Space Grotesk",sans-serif;line-height:.94;letter-spacing:-.055em;margin:0}
.hero h1{font-size:clamp(68px,9vw,132px);max-width:840px}
/* 中文展示标题：拉丁字号 + 负字距会把 CJK 顶到半词断行（"想法落/地，"），
   中文环境整体降一档并回正字距，让字典里 <br> 预设的两行各自放得下 */
html[lang="zh-CN"] .hero h1{font-size:clamp(52px,6.8vw,96px);letter-spacing:.01em;line-height:1.08}
html[lang="zh-CN"] .section-heading h2{font-size:clamp(40px,5.2vw,68px);letter-spacing:0;line-height:1.06}
html[lang="zh-CN"] .system-copy h2{font-size:clamp(38px,4.6vw,58px);letter-spacing:0;line-height:1.1}
html[lang="zh-CN"] .about-card h2{font-size:clamp(42px,5.4vw,70px);letter-spacing:0;line-height:1.08}
h1 em,h2 em{font-style:normal;color:var(--accent)}
.hero-lead{max-width:620px;color:#5c6b78;font-size:16px;line-height:1.85;margin:28px 0 30px}
.hero-actions{display:flex;gap:22px;align-items:center}
.hero-stage{height:610px;display:grid;place-items:center;position:relative;background:radial-gradient(circle,rgba(255,255,255,.6),transparent 58%);border-radius:50%}
/* ---------- 六重对称几何环：常驻卡牌修饰 ----------
   呼应品牌雪花的六芒结构：双六边形互叠成十二芒星 + HUD 刻度盘 + 巡航光点。
   三层不同速/反向旋转，静止时也有机械表的层次动感。 */
.hex-ring{
  position:absolute;top:50%;left:50%;width:560px;height:560px;margin:-280px 0 0 -280px;
  pointer-events:none;color:rgba(61,142,201,.42);
  filter:drop-shadow(0 0 18px rgba(13,148,136,.12));
}
/* transform-box:view-box 锁定旋转基准为 viewBox 坐标系（中心 300,300），
   否则部分引擎按 fill-box 解释，300px 会落到错误原点。 */
.hex-ring g{transform-box:view-box;transform-origin:300px 300px}
.ring-star{animation:spin 46s linear infinite}
.ring-ticks{animation:spin 34s linear infinite reverse}
.ring-orbit{animation:spin 16s linear infinite}
.ring-orbit circle{fill:#7ef0dc;filter:drop-shadow(0 0 10px rgba(13,148,136,.9))}
/* 顶点光点：错峰脉冲，像能量沿星阵流动。
   circle 在 g 内占第 3~8 个子元素（前两个是 polygon），nth-child 序号从 3 起。 */
.ring-star .vx{fill:#bfe9ff;animation:vxPulse 3.6s ease-in-out infinite}
.ring-star .vx:nth-child(4){animation-delay:.6s}
.ring-star .vx:nth-child(5){animation-delay:1.2s}
.ring-star .vx:nth-child(6){animation-delay:1.8s}
.ring-star .vx:nth-child(7){animation-delay:2.4s}
.ring-star .vx:nth-child(8){animation-delay:3s}
@keyframes vxPulse{0%,100%{opacity:.25}50%{opacity:1}}
/* 卡片背后的雷达扫掠光扇 */
.hero-stage::before{
  content:"";position:absolute;inset:0;margin:auto;width:600px;height:600px;border-radius:50%;
  pointer-events:none;filter:blur(8px);
  background:conic-gradient(from 0deg,
    rgba(13,148,136,.18) 0deg,
    rgba(61,142,201,.09) 26deg,
    rgba(13,148,136,.02) 52deg,
    transparent 70deg);
  animation:spin 7.5s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 章节标题：无人机巡航 + 光锥点亮单词 ---------- */
.holo-eyebrow{color:#2e8ba1;text-shadow:0 0 14px rgba(126,240,220,.35)}
/* 标题全息渐变字：作为无人机装置的定位父级 */
.section-heading h2,.system-copy h2,.about-card h2{
  position:relative;
  /* padding-bottom 把渐变背景画布向下延伸：line-height .94 时 g/y 等降部
     会探出内容盒底缘，background-clip:text 下超出部分无底色可裁 → 显示残缺 */
  padding-bottom:.14em;
  background:linear-gradient(105deg,#243b4d 0%,#2b6f8f 32%,#12a394 52%,#3d8ec9 72%,#243b4d 100%);
  background-size:230% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:h2Sheen 8s ease-in-out infinite;
}
h2 em{-webkit-text-fill-color:#0d9488}
@keyframes h2Sheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
/* 被光锥照到的单词：实心冰蓝高亮 + 辉光；未照到的保持渐变 */
.h2-word{transition:-webkit-text-fill-color .3s ease,text-shadow .3s ease}
.h2-word.is-lit{-webkit-text-fill-color:#8ff5e4;text-shadow:0 0 24px rgba(126,240,220,.95)}
/* 无人机装置：JS 注入到 h2 顶部，横向巡航，光锥向下扫过标题文字。
   top 值已下移，避免机身探入上方 hero 影院画面 */
.drone-rig{position:absolute;left:0;top:-30px;width:52px;margin-left:-26px;pointer-events:none;z-index:4;will-change:transform}
.drone-rig svg{width:52px;height:78px;overflow:visible;display:block}
.drone-rig .drone-craft{animation:droneBob 2.4s ease-in-out infinite}
.drone-rig .drone-beam{animation:beamPulse 2.4s ease-in-out infinite}
.drone-rig .rotor{transform-box:fill-box;transform-origin:center;animation:spin .6s linear infinite}
.drone-rig .r2{animation-duration:.52s;animation-direction:reverse}
.drone-rig .r3{animation-duration:.57s;animation-direction:reverse}
.drone-rig .r4{animation-duration:.64s}
@keyframes droneBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes beamPulse{0%,100%{opacity:.5}50%{opacity:1}}
@media (max-width:720px){
  .drone-rig{top:-26px;width:44px;margin-left:-22px}
  .drone-rig svg{width:44px;height:66px}
}

/* 惊喜① 作品卡：hover 浮现 HUD 取景角标（目标锁定感） */
.work-card{position:relative}
.work-card::before,.work-card::after{
  content:"";position:absolute;width:20px;height:20px;pointer-events:none;z-index:3;
  opacity:0;transition:opacity .25s ease,transform .25s ease;
}
.work-card::before{top:8px;left:8px;border-top:2px solid #7ef0dc;border-left:2px solid #7ef0dc;transform:translate(8px,8px)}
.work-card::after{bottom:8px;right:8px;border-bottom:2px solid #7ef0dc;border-right:2px solid #7ef0dc;transform:translate(-8px,-8px)}
.work-card:hover::before,.work-card:hover::after{opacity:1;transform:translate(0,0)}

/* 惊喜② 演示舱：进入视口时一道全息扫描光掠过（JS 加 .is-scanned，只播一次） */
.demo-shell{position:relative}
.demo-shell::after{
  content:"";position:absolute;top:0;bottom:0;left:-25%;width:16%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(126,240,220,.16) 45%,rgba(255,255,255,.3) 50%,rgba(126,240,220,.16) 55%,transparent);
  transform:skewX(-14deg);
}
.demo-shell.is-scanned::after{animation:shellScan 1.5s ease .25s 1 both}
@keyframes shellScan{0%{left:-25%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:112%;opacity:0}}

/* 惊喜③ 系统栈卡：hover 左侧能量条充能 */
.stack-card{position:relative;overflow:hidden}
.stack-card::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;
  background:linear-gradient(180deg,#7ef0dc,#3d8ec9);
  transform:scaleY(0);transform-origin:top;transition:transform .35s ease;
}
.stack-card:hover::after{transform:scaleY(1)}
.stack-card:hover strong{color:#0d9488}

/* 惊喜④ 关于卡：在线状态 + 本地时钟（复用 script.js 的 updateClock） */
.about-card > p.holo-status{
  display:flex;align-items:center;gap:8px;margin:26px 0 0;max-width:none;
  font-size:10px;letter-spacing:.18em;color:#4d8ba6;line-height:1;
}
.holo-status .status-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;background:#12b886;
  box-shadow:0 0 10px rgba(18,184,134,.8);animation:statusPulse 2s ease-in-out infinite;
}
.holo-status span{font-family:"Space Grotesk",sans-serif;font-variant-numeric:tabular-nums;color:#2b6f8f}
@keyframes statusPulse{50%{opacity:.4}}
/* ---------- hero core stage: 全息投影启动 -> SSR 卡牌 ---------- */
.core-stage{
  position:absolute;inset:0;display:grid;place-items:center;
  cursor:pointer;outline:none;perspective:760px;
}

/* 投影仪整体：boot 阶段可见，收束后淡出交棒卡牌 */
.holo-projector{
  position:absolute;top:50%;left:50%;width:260px;height:340px;
  margin:-190px 0 0 -130px;pointer-events:none;z-index:2;
  opacity:0;transition:opacity .5s ease,transform .5s ease;
}
.core-stage[data-stage="boot"] .holo-projector{opacity:1}
/* 收束：投影仪向内塌缩并消失，冲击环/光屑同时炸开 */
.core-stage[data-stage="burst"] .holo-projector{opacity:0;transform:scale(.35)}
.core-stage[data-stage="cat"] .holo-projector{opacity:0;pointer-events:none}
/* 交棒卡牌后投影仪只是 opacity:0，CSS 动画并不会因此停摆：
   扫描线/粒子/底座脉冲会在整个常驻期继续逐帧跑（扫描线动 top 还是布局级重排）。
   显式暂停，回到 boot/burst（还原重播）时自动恢复。 */
.core-stage[data-stage="cat"] .holo-projector *{animation-play-state:paused}

/* 发射台：底座椭圆光环 */
.holo-base{
  position:absolute;left:50%;bottom:0;width:150px;height:34px;margin-left:-75px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(126,240,220,.55),rgba(61,142,201,.12) 55%,transparent 72%);
  box-shadow:0 0 26px rgba(126,240,220,.5);
  animation:basePulse 1.8s ease-in-out infinite;
}
.holo-base::after{
  content:'';position:absolute;inset:38% 22%;border-radius:50%;
  border:1px solid rgba(191,233,255,.7);
}
@keyframes basePulse{50%{filter:brightness(1.35);transform:scale(1.04)}}

/* 光锥：从底座向上张开的体积光（clip-path 梯形 + 纵向渐变） */
.holo-cone{
  position:absolute;left:50%;bottom:14px;width:230px;height:250px;margin-left:-115px;
  clip-path:polygon(43% 100%,57% 100%,100% 0,0 0);
  background:linear-gradient(to top,rgba(126,240,220,.42),rgba(140,200,255,.16) 55%,rgba(191,233,255,.02));
  filter:blur(2px);transform-origin:bottom center;
  /* 周期与 BOOT_MS=1200 的紧凑演出对齐（原 3.2s 在 1.2s 内演不完一个呼吸） */
  animation:coneInject 1.6s ease-in-out infinite;
}
@keyframes coneInject{
  0%{opacity:0;transform:scaleY(.1)}
  18%{opacity:.9;transform:scaleY(1)}
  82%{opacity:.9;transform:scaleY(1)}
  100%{opacity:0;transform:scaleY(1.05)}
}

/* 全息体：线稿猫悬浮在锥口，青色高热 + 闪烁 + 上下浮动 */
/* 扫描线是 figure 的子元素，由 figure 的 overflow 裁出"扫过投影"的效果；
   猫素材在 512 画框内居中、四周透明留白，img 的 drop-shadow 辉光不会贴边被裁。 */
.holo-figure{
  position:absolute;left:50%;top:6px;width:170px;height:170px;margin-left:-85px;overflow:hidden;
  animation:figureFloat 1.6s ease-in-out infinite;
}
.holo-figure img{
  position:relative;width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block;
  filter:drop-shadow(0 0 10px rgba(126,240,220,.9)) brightness(1.35) saturate(1.3);
  animation:holoFlicker 1.6s steps(1,end) infinite;
}
@keyframes figureFloat{0%,100%{transform:translateY(6px)}50%{transform:translateY(-8px)}}
/* 全息闪烁：整体亮度随机抖动，模拟投影不稳定 */
@keyframes holoFlicker{
  0%{opacity:.15}4%{opacity:.9}7%{opacity:.35}11%{opacity:1}16%{opacity:.6}
  22%{opacity:1}40%{opacity:.85}43%{opacity:1}60%{opacity:.9}63%{opacity:.5}
  66%{opacity:1}88%{opacity:.95}100%{opacity:.7}
}
/* 扫描线：一道亮带沿全息体自上而下反复扫。
   性能：走 translateY（合成器）而不是 top（布局属性）；
   扫程 = 父高 126% = 自身高(26%)的 485%。 */
.holo-scanline{
  position:absolute;left:0;right:0;height:26%;top:-26%;
  background:linear-gradient(to bottom,transparent,rgba(191,247,236,.55) 45%,rgba(255,255,255,.7) 50%,rgba(191,247,236,.55) 55%,transparent);
  mix-blend-mode:screen;pointer-events:none;
  animation:holoSweep 0.8s ease-in-out infinite;
}
@keyframes holoSweep{0%{transform:translateY(0)}100%{transform:translateY(485%)}}

/* 汇聚粒子：光屑从四周向全息体收拢 */
.holo-particles{position:absolute;inset:0}
.holo-particles i{
  position:absolute;left:50%;top:38%;width:4px;height:4px;margin:-2px;border-radius:50%;
  background:radial-gradient(circle,#fff,rgba(126,240,220,.9) 45%,transparent 70%);
  box-shadow:0 0 8px rgba(126,240,220,.9);opacity:0;
  animation:particleIn 1.1s ease-in var(--pd,0ms) infinite;
}
@keyframes particleIn{
  0%{opacity:0;transform:translate(var(--px,0),var(--py,0)) scale(.4)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(0,0) scale(.2)}
}

/* 仪式期间几何环动态化：三层一起提速、整体变亮，交棒后恢复慢速呼吸。
   hex-ring 是 core-stage 的前置兄弟，只能靠父级 :has() 反向命中。 */
.hero-stage:has(.core-stage[data-stage="boot"]) .hex-ring,
.hero-stage:has(.core-stage[data-stage="burst"]) .hex-ring{
  color:rgba(126,240,220,.75);
  filter:drop-shadow(0 0 26px rgba(13,148,136,.35));
}
.hero-stage:has(.core-stage[data-stage="boot"]) .ring-star,
.hero-stage:has(.core-stage[data-stage="burst"]) .ring-star{animation-duration:9s}
.hero-stage:has(.core-stage[data-stage="boot"]) .ring-ticks,
.hero-stage:has(.core-stage[data-stage="burst"]) .ring-ticks{animation-duration:7s}
.hero-stage:has(.core-stage[data-stage="boot"]) .ring-orbit,
.hero-stage:has(.core-stage[data-stage="burst"]) .ring-orbit{animation-duration:3.2s}

.burst{
  position:absolute;top:50%;left:50%;width:126px;height:126px;margin:-63px 0 0 -63px;border-radius:50%;
  border:2px solid rgba(126,240,220,.85);opacity:0;pointer-events:none;z-index:3;
  box-shadow:0 0 40px rgba(126,240,220,.35),inset 0 0 30px rgba(191,233,255,.5);
}
.core-stage.is-bursting .burst{animation:burstRing .85s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes burstRing{
  0%{opacity:1;transform:scale(.22)}
  65%{opacity:.4}
  100%{opacity:0;transform:scale(2.7)}
}
.shards{position:absolute;inset:0;pointer-events:none;z-index:3}
.shards i{
  position:absolute;top:50%;left:50%;width:2px;height:16px;margin:-8px 0 0 -1px;border-radius:2px;
  background:linear-gradient(180deg,rgba(191,233,255,0),rgba(126,240,220,.95));
  opacity:0;transform:rotate(var(--a)) translateY(-6px) scaleY(.4);pointer-events:none;
}
.core-stage.is-bursting .shards i{animation:shardOut .9s cubic-bezier(.25,.8,.35,1) forwards}
@keyframes shardOut{
  0%{opacity:0;transform:rotate(var(--a)) translateY(-6px) scaleY(.4)}
  22%{opacity:1}
  100%{opacity:0;transform:rotate(var(--a)) translateY(-104px) scaleY(1.6)}
}

/* ---------- 小小的 SSR 卡牌：显影后常驻展示（无帧猫、无踱步） ---------- */
.pet-card-stage{
  position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  opacity:0;transition:opacity .55s ease;
}
.core-stage[data-stage="cat"] .pet-card-stage{opacity:1}
/* 互动按钮的可见性只由「显影完成 + 不在仪式中」决定，见下方 .pet-actions 规则 */

.pet-card{
  position:relative;width:min(370px,88%);aspect-ratio:3/4.1;border-radius:26px;
  padding:22px 22px 16px;display:flex;flex-direction:column;
  background:linear-gradient(165deg,#f4fbff 0%,#e8f4fb 55%,#dceef8 100%);
  border:1px solid rgba(61,142,201,.45);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.65) inset,
    0 0 34px rgba(126,240,220,.35),
    0 0 90px rgba(61,142,201,.22),
    0 18px 40px rgba(46,86,120,.25);
  opacity:0;transform:translateY(26px) scale(.86);
  transition:opacity .7s ease,transform .75s cubic-bezier(.2,.9,.3,1.25);
}
.pet-card.is-in{opacity:1;transform:translateY(0) scale(1)}
/* 变身：卡牌淡出让位给影院视频层 */
.pet-card-stage.is-transforming .pet-card{
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
}
/* 卡面顶部弧形高光，卡片质感 */
.pet-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 26%);
}
.pet-card-rarity,.pet-card-no{
  position:absolute;top:14px;font-size:10px;letter-spacing:.16em;font-weight:700;
  color:#c9962e;text-shadow:0 0 8px rgba(201,150,46,.45);z-index:3;
}
.pet-card-rarity{left:22px}
.pet-card-no{right:22px;color:#5d84a6;text-shadow:none}
.pet-card-name{
  position:relative;z-index:2;margin:auto 0;text-align:center;   /* 上下 auto：在画框与卡底之间垂直居中 */
  padding-top:12px;border-top:1px solid rgba(61,142,201,.28);
}
.pet-card-name b{display:block;font-size:17px;letter-spacing:.32em;text-indent:.32em;color:#2b6f8f}
.pet-card-name i{display:block;font-style:normal;font-size:10px;letter-spacing:.24em;color:#7e99ad;margin-top:4px}
/* 卡面立绘：线稿层与彩稿层完全重叠，逐帧替换 src 换帧（没有平移步进） */
.pet-card-art{
  position:relative;flex:none;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:16px;
  background:radial-gradient(circle at 50% 42%,#eef8fd 0%,#dceef8 100%);
}
/* 原地契约：桌宠只"原地"表现情绪，素材层不做任何位移。
   换帧 = 逐帧替换 img.src（见 script.js），所以这里连 translateX 步进都不存在；
   --art-nudge-x / --art-nudge-y 只是"整个状态的素材没对齐"时留的补正旋钮，默认 0。
   帧是 512×512、内容已在素材管线里居中（bbox 中心 ≈ 256），
   object-fit:contain + 方形画框 = 1:1 铺满，不裁切不拉伸。 */
.pet-card-line,.pet-card-color{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center bottom;
  display:block;user-select:none;pointer-events:none;
  translate:var(--art-nudge-x,0px) var(--art-nudge-y,0px);
}
.pet-card-color{opacity:0}
/* 显影仪式：线稿自上而下"画"出来，彩稿随后拍立得式显影。
   纯 CSS 动画——不再创建 WAAPI Animation 对象，也就不存在动画句柄泄漏。 */
.pet-card-stage.is-ceremony .pet-card-line{opacity:1;animation:lineDraw 500ms ease-out both}
.pet-card-stage.is-ceremony .pet-card-color{animation:cardDevelop 400ms ease-out 500ms both}
@keyframes lineDraw{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0% 0)}}
@keyframes cardDevelop{
  0%{opacity:0;filter:brightness(1.7) saturate(.35)}
  100%{opacity:1;filter:brightness(1) saturate(1)}
}

/* ---------- 全息投影：显影完成后的一次性演出（只在首次进入页面播一次） ----------
   与 lineDraw / cardDevelop 同一视觉语言：霓虹青 #7ef0dc + 白芯。
   组成：① 猫的高热描边扫描 + 萦绕  ② 卡面玻璃反光  ③ 按钮描边环错峰。

   ⚠ 实现硬约束：这里【禁止用 CSS mask-image: url(图片)】—— mask 走 CORS 拉取，
   file:// 直开（origin=null）会被浏览器拦成 ERR_FAILED，整层直接消失；
   而 <img> 标签、clip-path、CSS 渐变都不受限，file:// 与 http:// 通用。
   所以猫的描边 = 线稿 <img> 克隆 + clip-path 扫描带；卡面反光 = 纯渐变背景。 */

/* ① 猫：线稿的高热克隆层。平时不可见；.is-holo 期间亮起、被扫描带扫过、萦绕、淡出。
   src 由 script.js 的 writeFrame() 随 idle 换帧同步，永远贴着当前帧的轮廓，不会错位。 */
.pet-card-holo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center bottom;
  display:block;user-select:none;pointer-events:none;opacity:0;
}
.core-stage.is-holo .pet-card-holo{animation:holoScan 3300ms ease-in-out both}
/* clip-path 扫描带：0→46% 自上而下走一遍，46→56% 整圈亮起萦绕，78→100% 淡出 */
@keyframes holoScan{
  0%  {opacity:0;clip-path:inset(0 0 66% 0);
       filter:drop-shadow(0 0 2px rgba(126,240,220,.45)) brightness(1.25) saturate(1.2)}
  12% {opacity:1}
  46% {opacity:1;clip-path:inset(66% 0 0 0);
       filter:drop-shadow(0 0 9px rgba(126,240,220,.95)) brightness(1.3) saturate(1.3)}
  56% {opacity:1;clip-path:inset(0 0 0 0);
       filter:drop-shadow(0 0 11px rgba(126,240,220,.95)) brightness(1.32) saturate(1.3)}
  78% {opacity:.92;clip-path:inset(0 0 0 0);
       filter:drop-shadow(0 0 8px rgba(126,240,220,.8)) brightness(1.28) saturate(1.25)}
  100%{opacity:0;clip-path:inset(0 0 0 0);
       filter:drop-shadow(0 0 0 rgba(126,240,220,0)) brightness(1) saturate(1)}
}
/* 扫描经过时，静态线稿整圈同步泛起辉光，再一起退干净 */
.core-stage.is-holo .pet-card-line{animation:holoGlow 3300ms ease-in-out both}
@keyframes holoGlow{
  0%  {filter:drop-shadow(0 0 0 rgba(126,240,220,0))}
  20% {filter:drop-shadow(0 0 6px rgba(126,240,220,.8))}
  70% {filter:drop-shadow(0 0 6px rgba(126,240,220,.8))}
  100%{filter:drop-shadow(0 0 0 rgba(126,240,220,0))}
}

/* ② 卡面玻璃反光：一道斜向高光扫过整张卡（纯渐变，无图片依赖，file:// 可用） */
.core-stage.is-holo .pet-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 42%,
    rgba(214,242,255,.38) 52%,rgba(255,255,255,0) 66%);
  background-size:220% 100%;background-repeat:no-repeat;background-position:105% 0;
  animation:cardGlare 1700ms ease-in-out 300ms both;
}
@keyframes cardGlare{
  0%  {opacity:0;background-position:105% 0}
  22% {opacity:.95}
  78% {opacity:.95}
  100%{opacity:0;background-position:-35% 0}
}
/* 按钮描边环：两层遮罩相减只留 1.4px 环，扫描带沿环自上而下走 */
.pet-actions button::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  padding:1.4px;
  background-image:linear-gradient(180deg,
    rgba(126,240,220,0) 0%,rgba(126,240,220,0) 42%,
    rgba(126,240,220,.85) 46%,rgba(255,255,255,.98) 50%,
    rgba(126,240,220,.85) 54%,rgba(126,240,220,0) 58%,rgba(126,240,220,0) 100%);
  background-size:100% 300%;background-repeat:no-repeat;background-position:0 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.core-stage.is-holo .pet-actions button::before{
  animation:holoRing 1400ms ease-in-out both;
  animation-delay:calc(620ms + var(--holo-i, 0) * 90ms);   /* 等按钮组淡入完成再依次点亮 */
}
@keyframes holoRing{
  0%{opacity:0;background-position:0 100%}
  20%{opacity:1}
  72%{opacity:1}
  100%{opacity:0;background-position:0 0%}
}
.pet-actions button:nth-child(1){--holo-i:0}
.pet-actions button:nth-child(2){--holo-i:1}
.pet-actions button:nth-child(3){--holo-i:2}
.pet-actions button:nth-child(4){--holo-i:3}
.pet-actions button:nth-child(5){--holo-i:4}
.pet-actions button:nth-child(6){--holo-i:5}
/* 稀有度流光：一条高光斜扫卡面。
   性能：用 translateX 扫过（合成器动画），不能动 left —— left 是布局属性，
   无限动画逐帧重排是全站最大的常驻开销。位移换算：扫程 = 父宽 200%
   = 自身宽(46%)的 435%。 */
.pet-card-shine{
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:2;
}
.pet-card-shine::before{
  content:'';position:absolute;top:-30%;bottom:-30%;left:-70%;width:46%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55) 50%,transparent);
  transform:skewX(-18deg);will-change:transform;
}
.is-ceremony .pet-card-shine::before,.pet-card.is-ready .pet-card-shine::before{
  animation:cardShine 2.6s ease-in-out .2s infinite;
}
/* 变身期间卡牌已淡出，流光停摆，别和视频抢合成器 */
.pet-card-stage.is-transforming .pet-card-shine::before{animation-play-state:paused}
@keyframes cardShine{0%{transform:skewX(-18deg) translateX(0)}55%{transform:skewX(-18deg) translateX(435%)}100%{transform:skewX(-18deg) translateX(435%)}}

/* ③ 萦绕分身：四张线稿素材作为全息幽灵，.is-holo 期间错峰从卡缘浮现、
   轻微浮动后消散。位置/延迟由内联 --gx/--gy/--gd 控制，纯 transform+opacity。 */
.pet-holo-ghosts{position:absolute;inset:0;z-index:1;pointer-events:none}
.pet-holo-ghosts img{
  position:absolute;left:var(--gx,0%);top:var(--gy,0%);width:34%;
  opacity:0;pointer-events:none;user-select:none;
  filter:drop-shadow(0 0 6px rgba(126,240,220,.9)) brightness(1.4) saturate(1.4) hue-rotate(-8deg);
}
.core-stage.is-holo .pet-holo-ghosts img{animation:holoGhost 2600ms ease-in-out var(--gd,0ms) both}
@keyframes holoGhost{
  0%  {opacity:0;transform:translateY(14px) scale(.92)}
  18% {opacity:.5}
  40% {opacity:.85;transform:translateY(-4px) scale(1.03)}
  62% {opacity:.55;transform:translateY(3px) scale(.99)}
  82% {opacity:.7;transform:translateY(-7px) scale(1.02)}
  100%{opacity:0;transform:translateY(-16px) scale(1.06)}
}

/* 对话气泡（挂在卡顶） */
.pet-bubble{
  position:absolute;left:50%;top:4px;transform:translate(-50%,-110%);
  z-index:6;white-space:nowrap;pointer-events:none;
  background:rgba(255,255,255,.94);border:1px solid rgba(61,142,201,.28);
  border-radius:14px;padding:8px 14px;font-size:12px;color:#2b6f8f;letter-spacing:.04em;
  box-shadow:0 6px 18px rgba(46,86,120,.14);
  animation:bubblePop .28s cubic-bezier(.3,1.4,.5,1);
}
.pet-bubble[hidden]{display:none}
.pet-bubble::after{
  content:'';position:absolute;left:50%;bottom:-4.5px;width:9px;height:9px;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(255,255,255,.94);
  border-right:1px solid rgba(61,142,201,.28);border-bottom:1px solid rgba(61,142,201,.28);
}
@keyframes bubblePop{0%{opacity:0;transform:translate(-50%,-90%) scale(.7)}100%{opacity:1;transform:translate(-50%,-110%) scale(1)}}

/* 互动按钮：摸摸头 / 喂小鱼干 / 逗猫棒 / 哄睡觉 / 变身 / 还原（线性图标 · 冰蓝科技风） */
.pet-actions{
  position:absolute;left:50%;bottom:5%;transform:translateX(-50%);
  display:flex;gap:12px;z-index:4;transition:opacity .6s ease;
  opacity:0;pointer-events:none;
}
/* 只在「显影完成（data-stage=cat）且不在仪式中」出现。
   隐藏时 pointer-events:none，点到按钮位置等于点卡面本体（撸猫）。 */
.core-stage[data-stage="cat"]:not(.is-ceremony) .pet-actions{opacity:1;pointer-events:auto}
.pet-actions button{
  position:relative;   /* 供全息描边环 ::before 定位 */
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;padding:0;
  color:#3d8ec9;
  background:linear-gradient(180deg,#ffffff,#eef7fd);
  border:1px solid rgba(61,142,201,.32);
  box-shadow:0 4px 10px rgba(46,86,120,.12),inset 0 1px 0 rgba(255,255,255,.9);
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease;
}
.pet-actions button svg{width:20px;height:20px;display:block}
.pet-actions button:hover{
  color:#19cbdb;border-color:rgba(61,142,201,.55);
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(46,86,120,.2),0 0 14px rgba(126,240,220,.4),inset 0 1px 0 rgba(255,255,255,.9);
}
.pet-actions button:active{transform:translateY(-1px) scale(.92)}
.pet-actions button:focus-visible{outline:2px solid rgba(61,142,201,.6);outline-offset:2px}
/* 不可用：变身态下情绪按钮置灰，还原按钮在桌宠态置灰（保留占位，避免按钮跳位） */
.pet-actions button:disabled{
  opacity:.26;cursor:not-allowed;transform:none;
  box-shadow:0 4px 10px rgba(46,86,120,.08),inset 0 1px 0 rgba(255,255,255,.9);
}
.pet-actions button:disabled:hover{
  color:#3d8ec9;border-color:rgba(61,142,201,.32);transform:none;
  box-shadow:0 4px 10px rgba(46,86,120,.08),inset 0 1px 0 rgba(255,255,255,.9);
}

/* 硬约束：卡牌显影仪式、全息投影、桌宠动画、六芒星环（卡牌修饰）必须无条件播放。
   系统「减少动态效果」只允许关掉远景氛围动画（极光/品牌 logo/雷达光扇），
   不许碰 hero 舞台上的任何演出元素。 */
@media (prefers-reduced-motion: reduce){
  .aurora,.sf-float,.sf-shine{animation:none !important}
  .hero-stage::before{animation:none !important;opacity:.5}
}
@media (max-width:720px){
  .holo-projector{transform:scale(.72);transform-origin:50% 100%}
  .core-stage[data-stage="burst"] .holo-projector{transform:scale(.26)}
  .pet-card{width:min(330px,86%)}
  .pet-actions button{width:38px;height:38px;border-radius:12px}
  .pet-actions button svg{width:18px;height:18px}
  .pet-bubble{font-size:11px;padding:6px 10px}
}

/* ---------- sections ---------- */
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:34px}
.section-heading h2{font-size:clamp(46px,6vw,86px)}
.section-note{max-width:330px;color:#5f6b78;font-size:13px;line-height:1.75;text-align:right}
.works-grid{display:grid;grid-template-columns:.9fr 1.35fr .825fr;gap:18px}
.work-card{border-radius:28px;padding:14px;min-height:470px;display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s}
.work-card:hover{transform:translateY(-5px);box-shadow:0 30px 80px rgba(96,120,140,.22)}
.work-top{display:flex;justify-content:space-between;align-items:center;padding:5px 4px 12px}
.index{font-size:11px;color:#5f6975;letter-spacing:.14em}
.status-chip{font-size:10px;letter-spacing:.14em;color:#54677a;border:1px solid rgba(22,34,44,.14);padding:5px 9px;border-radius:999px}
.mock-window,.gradient-preview{flex:none;height:250px;border-radius:20px;overflow:hidden;position:relative;background:linear-gradient(145deg,rgba(214,240,255,.75),rgba(228,222,255,.65));border:1px solid rgba(255,255,255,.5)}
.window-bar{height:30px;padding:0 11px;display:flex;align-items:center;gap:5px;border-bottom:1px solid rgba(22,34,44,.08);background:rgba(255,255,255,.5);font-size:10px;color:#6d7884}
.window-bar i{width:6px;height:6px;border-radius:50%;background:rgba(22,34,44,.16)}
.window-bar span{margin-left:7px}
.window-body{display:grid;grid-template-columns:72px 1fr;height:calc(100% - 28px)}
.mock-sidebar{border-right:1px solid rgba(22,34,44,.07);background:rgba(226,236,243,.5)}
.mock-content{padding:22px}
.mock-line{width:44%;height:7px;border-radius:999px;background:rgba(22,34,44,.10);margin:8px 0}
.mock-line.wide{width:78%;height:12px;background:rgba(255,255,255,.95);box-shadow:0 1px 4px rgba(22,34,44,.08)}
.mock-block{height:135px;border-radius:16px;margin-top:22px;background:linear-gradient(140deg,rgba(255,255,255,.85),rgba(255,255,255,.4));border:1px solid rgba(22,34,44,.07)}
.mock-row{display:flex;gap:7px;margin-top:12px}.mock-row span{height:40px;flex:1;border-radius:12px;background:rgba(22,34,44,.07)}
.gradient-preview{background:radial-gradient(circle at 50% 45%,rgba(174,228,251,.7),transparent 30%),radial-gradient(circle at 25% 75%,rgba(190,178,240,.35),transparent 30%),#f2f8fc}
.grid-glow{position:absolute;inset:15% 10%;background-image:linear-gradient(rgba(22,34,44,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(22,34,44,.07) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle,black,transparent 72%)}
.preview-core{position:absolute;inset:0;display:grid;place-items:center;font-family:"Space Grotesk";font-size:86px;color:#57a8d4;text-shadow:0 0 40px rgba(120,200,240,.45)}
.floating-tag{position:absolute;top:20%;left:14%;font-size:10px;padding:6px 10px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.78);backdrop-filter:blur(12px);border-radius:9px;letter-spacing:.08em;color:#41505e;transform:rotate(-8deg);box-shadow:0 4px 14px rgba(23,66,94,.10)}
.tag-2{top:auto;left:auto;right:11%;bottom:22%;transform:rotate(8deg)}
.tag-3{top:58%;left:18%;transform:rotate(5deg)}
.warm{background:radial-gradient(circle at 50% 48%,rgba(214,232,255,.72),transparent 30%),radial-gradient(circle at 80% 20%,rgba(226,214,255,.5),transparent 28%),#f4f8fc}
.orbit-text{position:absolute;inset:19% 0 auto;text-align:center;font-size:10px;letter-spacing:.28em;color:#68788a}
.orbit-main{position:absolute;inset:0;display:grid;place-items:center;font-family:"Space Grotesk";font-size:28px;letter-spacing:.1em;color:#3f5b6e;text-shadow:0 0 40px rgba(160,140,240,.25)}
.work-info{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:16px 4px 3px;flex:1}
.work-info h3{margin:0 0 4px;font-family:"Space Grotesk";font-size:18px}
.work-info p{margin:0;color:#66727f;font-size:12px;line-height:1.6}
.circle-btn{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid rgba(22,34,44,.12);background:rgba(255,255,255,.7);color:#425c6d;cursor:pointer;transition:.25s}
.circle-btn:hover{background:#16222c;color:#fff;transform:rotate(8deg)}
.circle-btn:disabled{opacity:.35;cursor:default;background:transparent;border-style:dashed}
.circle-btn:disabled:hover{background:transparent;color:#425c6d;transform:none}

/* ---------- Connect 流水线图表（速览面板：图 + 终端文字 = 图文结合） ---------- */
.flow-chart{
  display:flex;align-items:stretch;justify-content:space-between;gap:4px;
  margin:2px 0 14px;padding:12px 14px;border-radius:14px;
  border:1px solid rgba(255,255,255,.75);
  background:linear-gradient(120deg,rgba(214,240,255,.45),rgba(226,238,250,.35));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.flow-node{
  flex:none;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;
  text-align:center;padding:9px 13px;border-radius:12px;
  border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.66);
  box-shadow:0 4px 14px rgba(23,66,94,.07);
}
.flow-node b{font-size:12.5px;font-weight:600;color:#1d3242;letter-spacing:.01em;white-space:nowrap}
.flow-node small{font-size:9.5px;color:#6b7c8a;letter-spacing:.04em;white-space:nowrap}
.flow-src{background:rgba(224,242,254,.6)}
.flow-end{
  border-color:rgba(13,148,136,.35);
  background:linear-gradient(135deg,rgba(13,148,136,.14),rgba(42,157,181,.10));
}
.flow-end b{color:#0b7a70}
.flow-arrow{
  flex:none;width:22px;height:2px;align-self:center;border-radius:2px;position:relative;
  background:linear-gradient(90deg,rgba(61,142,201,.3),rgba(13,148,136,.6));
}
.flow-arrow::after{
  content:"";position:absolute;right:-1px;top:-3.5px;
  border:4.5px solid transparent;border-left:6px solid rgba(13,148,136,.7);border-right:none;
}

/* ---------- 产品 UI mock（速览面板：画"产品长什么样"，不是讲稿） ---------- */
.ui-mock{
  margin:2px 0 14px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(22,34,44,.09);background:rgba(250,253,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 32px rgba(23,66,94,.09);
}
.mock-bar{
  display:flex;align-items:center;gap:5px;height:34px;padding:0 12px;
  border-bottom:1px solid rgba(22,34,44,.07);background:rgba(255,255,255,.65);
}
.mock-bar i{width:7px;height:7px;border-radius:50%;background:rgba(22,34,44,.14)}
.mb-title{margin-left:8px;font-size:10.5px;font-weight:600;color:#41505e;letter-spacing:.03em}
.mb-live{margin-left:auto;font-size:9px;color:#0d9488;letter-spacing:.08em}

/* Connect：协同看板 */
.mock-board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px}
.mb-col{min-width:0}
.mb-col h6{
  margin:0 0 6px;display:flex;align-items:center;gap:5px;
  font-size:9px;font-weight:600;letter-spacing:.12em;color:#66727f;
}
.mb-col h6 b{
  margin-left:auto;font-size:9px;color:#5f6975;background:rgba(22,34,44,.06);
  border-radius:999px;padding:1px 6px;font-variant-numeric:tabular-nums;
}
.mb-card{
  border-radius:10px;padding:8px 9px;margin-bottom:6px;position:relative;
  border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.78);
  box-shadow:0 3px 10px rgba(23,66,94,.06);
}
.mb-card p{margin:0 0 5px;font-size:10.5px;line-height:1.45;color:#243544;font-weight:500}
.mb-card.quiet{opacity:.62}
.mb-card.claimed{border-color:rgba(61,142,201,.35)}
.mb-card.flagged{border-color:rgba(224,90,58,.35)}
.mb-card.done{border-color:rgba(13,148,136,.3)}
.mb-chip{
  display:inline-block;font-size:8.5px;letter-spacing:.04em;color:#5a7183;
  background:rgba(61,142,201,.1);border-radius:999px;padding:2px 7px;
}
.mb-chip.warn{color:#b04a2e;background:rgba(224,90,58,.1)}
.mb-chip.ok{color:#0b7a70;background:rgba(13,148,136,.12)}
.mb-user{
  position:absolute;top:7px;right:7px;width:17px;height:17px;border-radius:50%;
  display:grid;place-items:center;font-size:8.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#3d8ec9,#0d9488);
}

/* 工作台：办公编辑器 + 插件栏 */
.mock-office{display:grid;grid-template-columns:108px 1fr;min-height:196px}
.mo-rail{border-right:1px solid rgba(22,34,44,.07);background:rgba(235,244,250,.55);padding:8px}
.mo-tab{
  font-size:10.5px;color:#5a6a78;padding:6px 9px;border-radius:8px;margin-bottom:3px;
}
.mo-tab.active{background:#fff;color:#1d3242;font-weight:600;box-shadow:0 2px 8px rgba(23,66,94,.08)}
.mo-rail-label{margin:10px 0 4px;font-size:8.5px;letter-spacing:.14em;color:#8b9aa7}
.mo-plugin{display:flex;align-items:center;gap:6px;font-size:9.5px;color:#8b9aa7;padding:4px 9px}
.mo-plugin i{width:6px;height:6px;border-radius:50%;border:1px solid rgba(22,34,44,.2)}
.mo-plugin.on{color:#41505e}
.mo-plugin.on i{background:#0d9488;border-color:transparent}
.mo-editor{padding:12px 16px}
.mo-toolbar{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid rgba(22,34,44,.06);font-size:10.5px;color:#5a6a78}
.mo-toolbar b,.mo-toolbar em,.mo-toolbar u{font-size:11px;color:#41505e}
.mo-toolbar .mo-sep{width:1px;height:12px;background:rgba(22,34,44,.1)}
.mo-toolbar .mo-ins{margin-left:auto;font-size:9px;color:#3d8ec9}
.mo-h{margin:12px 0 8px;font-size:13.5px;font-weight:650;color:#1d3242}
.mo-line{height:6px;border-radius:999px;background:rgba(22,34,44,.08);margin:6px 0}
.mo-line.w90{width:90%}.mo-line.w70{width:70%}.mo-line.w80{width:80%}
.mo-table{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:10px 0;
  border:1px solid rgba(22,34,44,.1);border-radius:8px;overflow:hidden;background:rgba(22,34,44,.06);
}
.mo-table span{height:16px;background:rgba(255,255,255,.9)}
.mo-table span:nth-child(-n+3){background:rgba(214,238,255,.7)}

/* JEV：评分榜单 */
.mock-rank{padding:6px 12px 10px}
/* 六个单元格：序号 / 姓名 / 依据 / 分数条 / 得分 / 决策。
   列数必须等于子元素数，否则决策胶囊会换行并被 justify-self:end 反向推出左侧 */
.mr-row{
  display:grid;grid-template-columns:26px 64px minmax(0,1fr) 34px 30px auto;align-items:center;gap:8px;
  padding:7px 4px;border-bottom:1px solid rgba(22,34,44,.05);font-size:10.5px;color:#33414e;
}
.mr-row:last-child{border-bottom:none}
.mr-head{font-size:8.5px;letter-spacing:.12em;color:#8b9aa7}
.mr-head span:first-child{grid-column:1/span 2}
.mr-head span:nth-child(3){grid-column:4/span 2}
.mr-row b{font-size:9.5px;color:#8b9aa7;font-variant-numeric:tabular-nums}
.mr-name{font-weight:600;color:#1d3242;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr-bar{height:5px;border-radius:999px;background:rgba(22,34,44,.07);overflow:hidden}
.mr-bar i{display:block;height:100%;width:var(--w,50%);border-radius:999px;background:linear-gradient(90deg,#3d8ec9,#0d9488)}
.mr-row.out .mr-bar i{background:rgba(224,90,58,.55)}
.mr-score{font-variant-numeric:tabular-nums;font-weight:600;color:#41505e;text-align:right}
.mr-chip{justify-self:end;font-size:8.5px;border-radius:999px;padding:2.5px 8px;white-space:nowrap}
.mr-chip.ok{color:#0b7a70;background:rgba(13,148,136,.12)}
.mr-chip.out{color:#b04a2e;background:rgba(224,90,58,.1)}

/* ---------- video slot ---------- */
.video-slot{
  flex:none;margin:10px 4px 0;height:104px;border-radius:16px;cursor:pointer;position:relative;overflow:hidden;
  display:flex;align-items:center;gap:14px;padding:0 16px;
  background:linear-gradient(120deg,rgba(214,240,255,.85),rgba(226,238,250,.8));
  border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 24px rgba(23,66,94,.08);
  transition:transform .25s,box-shadow .25s;outline:none;
}
.video-slot:hover,.video-slot:focus-visible{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 34px rgba(23,66,94,.16)}
.video-slot:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(22,34,44,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(22,34,44,.05) 1px,transparent 1px);
  background-size:22px 22px;mask-image:radial-gradient(circle at 82% 50%,black,transparent 75%);
}
.play-btn{
  width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#0d9488,#2a9db5);box-shadow:0 8px 22px rgba(13,148,136,.35);
  transition:transform .25s;position:relative;z-index:1;
}
.video-slot:hover .play-btn{transform:scale(1.08)}
.play-btn svg{width:18px;height:18px;fill:#fff;margin-left:2px}
.video-meta{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.video-meta strong{font-size:13px;color:#1d3242;font-weight:600}
.video-meta span{font-size:11.5px;color:#5f7180;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.video-chip{
  position:absolute;top:10px;right:12px;z-index:1;font-size:10px;letter-spacing:.14em;color:#0d9488;
  border:1px solid rgba(13,148,136,.3);padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.7);
}
.video-duration{
  margin-left:auto;position:relative;z-index:1;font-family:ui-monospace,Menlo,monospace;font-size:11px;
  color:#5c6b78;background:rgba(255,255,255,.8);border:1px solid rgba(22,34,44,.08);
  padding:4px 8px;border-radius:8px;flex:none;
}

/* ---------- demos ---------- */
.demos-section{padding-top:180px}
.demo-shell{border-radius:30px;display:grid;grid-template-columns:240px 1fr;min-height:520px;overflow:hidden}
.demo-tabs{padding:16px;border-right:1px solid rgba(22,34,44,.08);background:rgba(233,242,248,.55)}
.demo-tab{width:100%;border:0;background:transparent;color:#4f626f;display:flex;gap:12px;align-items:center;text-align:left;padding:16px 10px;border-radius:14px;cursor:pointer;font-size:15px;margin-bottom:5px;transition:.25s}
.demo-tab span:first-child{font-size:11px;color:#6d7a86;letter-spacing:.08em}
.demo-tab:hover{background:rgba(22,34,44,.04)}
.demo-tab.active{background:rgba(22,34,44,.08);color:var(--text);font-weight:600}
.demo-tab.active span:first-child{color:var(--accent)}
.demo-content{padding:34px}
.demo-pane{display:none;animation:fade .35s ease}.demo-pane.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.demo-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.demo-title-row h3{font-family:"Space Grotesk";font-size:34px;margin:0}
.run-state{font-size:11px;letter-spacing:.12em;color:#0e9f6e;font-weight:700}
.terminal{border-radius:19px;padding:20px;min-height:260px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:2}
.terminal-line{display:flex;gap:14px;color:#33414d}.terminal-line .muted{color:#8494a1}
.terminal-line.success{color:#0e9f6e;font-weight:600}.terminal-line.cursor{opacity:.4;animation:blink 1.1s infinite}
@keyframes blink{50%{opacity:.1}}
.demo-metrics{display:flex;gap:10px;margin:14px 0 18px}
.demo-metrics div{flex:1;padding:13px 15px;border-radius:15px;background:rgba(226,236,244,.6);border:1px solid rgba(22,34,44,.08)}
.demo-metrics small{display:block;color:#626c79;font-size:10px;letter-spacing:.13em}.demo-metrics strong{font-family:"Space Grotesk";font-size:19px}
.builder-layout{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin-top:48px}
.prompt-card,.tool-card{padding:22px;border-radius:20px;min-height:190px}
.prompt-card small,.tool-card small{display:block;font-size:10px;letter-spacing:.14em;color:#5d6875}
.prompt-card p{font-size:15px;line-height:1.7;color:#33414d;margin:18px 0}
.mini-run{border:1px solid rgba(22,34,44,.12);background:rgba(255,255,255,.85);color:#16222c;font-weight:600;border-radius:10px;padding:9px 13px;cursor:pointer;transition:.25s}
.mini-run:hover{background:#16222c;color:#fff}
.builder-arrow{font-size:30px;color:#8494a1}
.tool-card strong{display:block;font-family:"Space Grotesk";font-size:24px;margin-top:18px}
.tool-card span{display:block;color:#66717e;font-size:11.5px;margin-top:4px}
.tool-state{margin-top:20px;font-size:11px;color:#0e9f6e;letter-spacing:.12em;font-weight:700}
.world-map{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:center;margin-top:80px}
.world-node{padding:22px;border-radius:18px;background:rgba(255,255,255,.8);border:1px solid rgba(22,34,44,.08);position:relative;z-index:2}
.world-node.selected{border-color:rgba(13,148,136,.4);box-shadow:0 0 35px rgba(13,148,136,.10)}
.world-node small{display:block;color:#5f6a76;font-size:10px;letter-spacing:.12em}
.world-node strong{display:block;margin-top:7px;font-family:"Space Grotesk";font-size:18px}
.world-line{height:1px;background:linear-gradient(90deg,transparent,rgba(22,34,44,.2),transparent);position:absolute;left:12%;right:12%;top:50%}

/* ---------- system / about ---------- */
.system-section{padding-top:190px;display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.system-copy h2{font-size:clamp(50px,6vw,88px)}
.system-copy > p:last-child{color:#5f6c79;max-width:470px;line-height:1.85;margin-top:28px}
.system-stack{display:grid;gap:10px}
.stack-card{min-height:98px;border-radius:22px;display:grid;grid-template-columns:60px 1fr auto;align-items:center;padding:0 22px;transition:transform .25s}
.stack-card:hover{transform:translateX(4px)}
.stack-card span{font-size:10px;color:#59636f}
.stack-card strong{font-family:"Space Grotesk";font-size:22px}
.stack-card small{color:#646f7c;font-size:12px;letter-spacing:.03em}

.about-section{padding:190px 0 80px}
.about-card{border-radius:34px;padding:54px 58px;min-height:390px;display:flex;flex-direction:column;justify-content:space-between}
.about-card h2{font-size:clamp(52px,7vw,94px)}
.about-card > p:not(.eyebrow){max-width:620px;color:#54616e;line-height:1.85;font-size:15px}
.about-links{display:flex;gap:28px;font-size:13px;color:#3d4e5c}
.about-links a{border-bottom:1px solid rgba(22,34,44,.2);padding-bottom:4px;transition:.25s}
.about-links a:hover{color:var(--accent);border-color:rgba(13,148,136,.5)}
.footer{padding:28px 0 36px;display:flex;justify-content:space-between;color:#5f6b76;font-size:11px;letter-spacing:.11em}

/* ---------- modal & toast ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(228,236,242,.66);backdrop-filter:blur(12px);display:none;place-items:center;z-index:50;padding:20px}
.modal-backdrop.open{display:grid}
.modal{width:min(600px,100%);padding:34px;border-radius:28px;position:relative}
.modal-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(22,34,44,.12);background:rgba(255,255,255,.8);color:#425c6d;cursor:pointer;font-size:20px;transition:.25s}
.modal-close:hover{background:#16222c;color:#fff}
.modal h3{font-family:"Space Grotesk";font-size:36px;line-height:1.1;margin:10px 0 18px}
.modal p:not(.eyebrow){color:#5f6a76;line-height:1.85;font-size:14px}
.video-modal{width:min(760px,100%)}
.video-frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0f1c26;margin-top:6px}
.video-frame video{width:100%;height:100%;display:block;object-fit:contain}
.video-fallback{
  position:absolute;inset:0;display:none;flex-direction:column;gap:10px;align-items:center;justify-content:center;
  text-align:center;padding:24px;color:#9fb2c2;
}
.video-fallback strong{color:#dceaf5;font-size:15px}
.video-fallback code{background:rgba(255,255,255,.1);padding:2px 7px;border-radius:6px;font-size:12px}

/* ---------- 可交互演示浮层（作品卡片带 data-demo 时使用） ---------- */
.demo-frame-backdrop{padding:clamp(10px,1.8vw,26px);place-items:stretch}
.demo-frame-shell{
  width:100%;height:100%;min-height:0;display:flex;flex-direction:column;gap:12px;
  padding:18px 20px 14px;border-radius:26px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(240,248,253,.82));
}
.demo-frame-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex:none}
.demo-frame-bar h3{font-family:"Space Grotesk";font-size:clamp(19px,2.1vw,26px);line-height:1.15;margin:6px 0 0}
.demo-frame-actions{display:flex;align-items:center;gap:8px;flex:none}
.demo-frame-btn{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(22,34,44,.12);flex:none;
  background:rgba(255,255,255,.86);color:#425c6d;cursor:pointer;font-size:17px;line-height:1;transition:.25s;
  display:grid;place-items:center;padding:0;
}
.demo-frame-btn:hover{background:#16222c;color:#fff}
.demo-frame-btn[hidden]{display:none}
.demo-frame-close:hover{transform:rotate(90deg)}
.demo-frame-btn svg{width:17px;height:17px;fill:currentColor}
.demo-frame-btn .ico-collapse{display:none}
.demo-frame-btn.is-full .ico-expand{display:none}
.demo-frame-btn.is-full .ico-collapse{display:block}
.demo-frame-backdrop:fullscreen{background:#e2eef7;padding:clamp(10px,1.8vw,26px)}
.demo-frame-backdrop:-webkit-full-screen{background:#e2eef7;padding:clamp(10px,1.8vw,26px)}
.demo-frame-stage{
  position:relative;flex:1;min-height:0;overflow:hidden;border-radius:18px;background:#f4f3ef;
  box-shadow:inset 0 0 0 1px rgba(22,34,44,.09),0 14px 30px -22px rgba(23,66,94,.4);
}
.demo-frame-stage iframe{width:100%;height:100%;border:0;display:block}
/* 窄屏：演示页是桌面版心，按屏宽整体缩放显示，避免左右被裁（缩放后仍可点按，横屏更清晰） */
.demo-frame-stage.is-scaled iframe{position:absolute;top:0;left:0;transform-origin:0 0}
.demo-frame-tip{flex:none;margin:0;font-size:11.5px;letter-spacing:.02em;color:#6b7c8a}
/* 竖屏时把操作提示换成横屏建议：这几个演示页都只做了桌面版心 */
.demo-frame-tip .tip-portrait{display:none}
@media (max-width:900px) and (orientation:portrait){
  .demo-frame-tip .tip-wide{display:none}
  .demo-frame-tip .tip-portrait{display:block;color:#0d7d76;font-weight:600}
}
body.demo-frame-open{overflow:hidden}
@media (max-width:720px){
  .demo-frame-backdrop{padding:0}
  .demo-frame-shell{border-radius:0;border-color:transparent;padding:12px 12px 8px}
  .demo-frame-tip{font-size:10.5px;line-height:1.5}
  .gallery-thumbs{gap:6px}
  .gallery-item figcaption{padding:10px 12px 12px}
}

/* ---------- 功能介绍图集（作品卡片带 data-gallery 时使用） ---------- */
.gallery-stage{position:relative;flex:1;min-height:0;border-radius:18px;overflow:hidden;background:#eef3f7;box-shadow:inset 0 0 0 1px rgba(22,34,44,.09)}
.gallery-item{position:absolute;inset:0;display:none;flex-direction:column;margin:0}
.gallery-item.is-active{display:flex}
.gallery-item img{flex:1;min-height:0;width:100%;object-fit:contain;display:block}
.gallery-item figcaption{flex:none;padding:12px 18px 14px;background:rgba(255,255,255,.94);border-top:1px solid rgba(22,34,44,.08)}
.gallery-item figcaption strong{display:block;font-size:14.5px;color:#1d3242;margin-bottom:5px}
.gallery-item figcaption p{margin:0;font-size:12.5px;line-height:1.75;color:#5f6a76;max-width:86ch}
.gallery-thumbs{display:flex;gap:10px;flex:none}
.gallery-thumb{
  position:relative;flex:1;max-width:158px;aspect-ratio:2/1;border-radius:10px;overflow:hidden;padding:0;
  border:1px solid rgba(22,34,44,.1);background:#f4f3ef;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;
}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-thumb span{
  position:absolute;left:7px;bottom:5px;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:#fff;
  text-shadow:0 1px 5px rgba(0,0,0,.65);
}
.gallery-thumb.is-active{border-color:#0d9488;box-shadow:0 0 0 2px rgba(13,148,136,.28)}
.gallery-thumb:hover{transform:translateY(-2px)}

/* ---------- 涉密席位：只说明，不给演示 ---------- */
.video-slot.sealed{
  background:linear-gradient(120deg,rgba(226,233,239,.92),rgba(234,240,245,.86));
  border-style:dashed;border-color:rgba(22,34,44,.18);cursor:help;
}
.video-slot.sealed:hover,.video-slot.sealed:focus-visible{transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 24px rgba(23,66,94,.08)}
.video-slot.sealed:before{opacity:.25}
.video-slot.sealed .video-chip{color:#5c6b77;border-color:rgba(22,34,44,.16)}
.sealed-btn{background:linear-gradient(135deg,#7a8794,#9aa7b3);box-shadow:0 8px 22px rgba(96,111,124,.26)}
.pill-btn.demo-run.sealed{background:rgba(255,255,255,.62);border:1px dashed rgba(22,34,44,.2);color:#5c6b77;box-shadow:none;gap:0}
.pill-btn.demo-run.sealed:hover{transform:none;box-shadow:none;background:rgba(255,255,255,.85)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:60;background:rgba(255,255,255,.96);border:1px solid rgba(22,34,44,.12);backdrop-filter:blur(15px);padding:12px 16px;border-radius:12px;font-size:12.5px;color:#2f4958;transition:.3s;box-shadow:0 12px 34px rgba(23,66,94,.16)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .8s ease,transform .8s ease}
.reveal.is-visible{opacity:1;transform:none}
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}

@media (max-width:980px){
  .nav{gap:15px;font-size:12px}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:155px;padding-bottom:100px}
  .hero-stage{height:500px;order:-1}
  .hero-copy{text-align:left}
  .works-grid{grid-template-columns:1fr}
  .work-card{min-height:auto}
  .mock-window,.gradient-preview{height:230px}
  .system-section{grid-template-columns:1fr}
}
@media (max-width:720px){
  /* 顶部导航：手机上只留【品牌 + 汉堡按钮】。
     语言切换 / Explore 都已在移动菜单里，留在顶栏会撑破宽度，
     被 body 的 overflow-x:hidden 裁掉右侧的汉堡按钮。 */
  .topbar{height:58px;padding:0 10px 0 14px}
  .brand{gap:8px;font-size:13px;letter-spacing:.16em}
  .brand-mark,.brand-mark svg{width:30px;height:30px}
  .nav,.lang-switch,.pill-btn.compact{display:none}
  .nav-toggle{display:grid;width:40px;height:40px}
  /* iOS 上 fixed + backdrop-filter 会在滚动时脱层，菜单看起来「跟着页面滑走」：
     手机上改成不透明底 + 独立合成层，并禁止滚动穿透。 */
  .mobile-menu{top:86px;width:calc(100% - 24px);max-height:calc(100vh - 106px);
    background:rgba(248,251,254,.985);backdrop-filter:none;-webkit-backdrop-filter:none;
    will-change:transform;overscroll-behavior:contain}
  section[id]{scroll-margin-top:86px}
  .hero h1{font-size:60px}.hero-lead{font-size:14px}
  /* .hero-stage 手机端尺寸/overflow 的唯一真相源在 index.html 内联样式块（后加载、优先级更高） */
  /* 几何环：保持 560 布局盒，用 transform 缩放（默认以自身中心缩放，不会偏心） */
  .hex-ring{transform:scale(.62)}
  .hero-stage::before{width:400px;height:400px}
  .section-heading{display:block}.section-note{text-align:left;margin-top:18px}
  .demo-shell{grid-template-columns:1fr}.demo-tabs{border-right:0;border-bottom:1px solid rgba(22,34,44,.08);display:grid;grid-template-columns:repeat(3,1fr)}
  .demo-tab{font-size:13px;padding:11px 8px}.demo-content{padding:22px}
  .demo-title-row{display:block}.run-state{display:inline-block;margin-top:10px}
  .demo-title-row h3{font-size:26px}.builder-layout{grid-template-columns:1fr}.builder-arrow{transform:rotate(90deg);justify-self:center}
  .world-map{grid-template-columns:1fr;gap:11px}.world-line{display:none}
  .about-card{padding:34px 28px;min-height:430px}.about-links{flex-wrap:wrap}
  .footer{flex-direction:column;gap:10px}
  .modal-backdrop{padding:12px}
  .modal{padding:26px 20px 22px;border-radius:22px}
  .modal h3{font-size:28px;margin:8px 0 14px}
  .modal-close{top:12px;right:12px}
  .video-slot{height:92px;padding:0 12px;gap:10px}
  /* 手机上演示条只留一行可读文案：圆点按钮缩小，时长位让给角标 */
  .play-btn{width:36px;height:36px}
  .play-btn svg{width:15px;height:15px}
  .video-duration{display:none}
  .video-meta strong{font-size:12px}
  .video-chip{top:8px;right:8px;padding:3px 7px;font-size:9px}
  .flow-chart{flex-wrap:wrap;gap:8px;justify-content:flex-start}
  .flow-arrow{display:none}
  .flow-node{flex:1 1 44%}
}