/* ==========================================================================
   JiangLue.com · 将略观察  ——  v2 融合版样式
   两套完整配色，头部小按钮切换：
     · 深蓝（默认）= 我方配色
     · 墨黑        = 原 deck 原版数值，逐项还原（含它调过的细节）
   内容页沿用 deck 的版式系统，头部与底部是我方组件
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
/* 切换靠 <html class="theme-deck">。
   墨黑主题不是只换 --bg，而是把当初从原 deck 改过的每一个值都还原回去：
   panel / panel-2 / line / line-2 / 三档文字灰阶 / 网格颜色与两级透明度 /
   终端与输入框底色 / 输入框占位符 / 聚焦底色 / 飞轮 SVG 线色 / 层与提示条底色。
   头部与页脚始终是我方组件，只跟随整体明暗，不套用它的头部页脚实现。 */
:root{
  /* ---------- 深蓝（默认） ---------- */
  --bg:#14253D;
  --bg-deep:#0E1B2E;
  --ink:#0B1728;

  --panel:#1B2F4A;
  --panel-2:#22395A;
  --line:rgba(222,230,237,.13);
  --line-2:rgba(222,230,237,.24);

  --txt:#EAF1F8;
  --txt-2:#A3B4C9;
  --txt-3:#8798AE;

  --grid:150,175,210;          /* 网格颜色通道 */
  --grid-fine:.026;            /* 8px 细网格 */
  --grid-coarse:.062;          /* 64px 粗网格 */

  --glow-1:rgba(11,202,211,.13);
  --glow-2:rgba(3,114,229,.12);
  --glow-3:rgba(11,202,211,.06);

  --term-bar:rgba(34,57,90,.6);
  --layer-bg:rgba(20,37,61,.5);
  --layer-hd:rgba(34,57,90,.8);
  --core-in:rgba(20,37,61,.96);
  --svg-a:#2E3E54;
  --svg-b:#445367;
  --ph:#71829A;
  --focus-bg:#0F2036;
  --hint-bg:rgba(11,22,38,.9);
  --pick-bg:rgba(11,22,38,.7);
  --drawer-bg:#0B1626;
  --hdr-bg:rgba(14,27,46,.72);
  --hdr-solid:rgba(11,22,38,.94);

  /* ---------- 两套主题共用 ---------- */
  --brand:#0BCAD3;
  --brand-d:#0372E5;
  --brand-soft:rgba(11,202,211,.10);
  --human:#D9A03C;
  --human-soft:rgba(217,160,60,.10);
  --grad:linear-gradient(96deg,var(--brand),var(--brand-d));

  --mono:"JetBrains Mono","Cascadia Mono",Consolas,"SFMono-Regular",monospace;
  --sans:"Noto Sans SC","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;

  --r-s:6px; --r-m:10px; --r-l:16px;
  --hdr-h:68px;
  --gutter:clamp(18px,4vw,40px);
  --maxw:1120px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 墨黑：原 deck 原版数值 ---------- */
html.theme-deck{
  --bg:#05080F;
  --bg-deep:#02050A;
  --ink:#04070D;

  --panel:#111D30;
  --panel-2:#1A2740;
  --line:#2A3B58;
  --line-2:#3D5175;

  --txt:#E6EDF7;
  --txt-2:#93A3BB;
  --txt-3:#5D6D86;

  --grid:120,140,170;
  --grid-fine:.05;
  --grid-coarse:.085;

  /* 原版背景是纯网格、没有光晕 —— 这里置空以还原 */
  --glow-1:transparent;
  --glow-2:transparent;
  --glow-3:transparent;

  --term-bar:rgba(26,39,64,.6);
  --layer-bg:rgba(17,29,48,.5);
  --layer-hd:rgba(26,39,64,.8);
  --core-in:rgba(5,8,15,.96);
  --svg-a:#2A3B58;
  --svg-b:#3D5175;
  --ph:#3E4C63;
  --focus-bg:#070E1A;
  --hint-bg:rgba(17,29,48,.85);
  --pick-bg:rgba(17,29,48,.8);
  --drawer-bg:#05080F;
  --hdr-bg:rgba(6,10,18,.72);
  --hdr-solid:rgba(4,8,14,.93);
}

/* ---------- 2. 基础 ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--bg);color:var(--txt);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
::selection{background:rgba(11,202,211,.3);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:300;background:var(--brand);color:#04121A;
  font-weight:700;padding:10px 18px;border-radius:var(--r-m);text-decoration:none;transition:top .2s var(--ease);
}
.skip-link:focus{top:12px}

/* ---------- 3. 背景：底色 + 光晕 + 双层工程网格 ---------- */
/* 光晕在下（墨黑主题下自动置空，还原原版纯净底） */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(920px 520px at 12% -8%,var(--glow-1),transparent 62%),
    radial-gradient(840px 500px at 88%  2%,var(--glow-2),transparent 60%),
    radial-gradient(760px 700px at 50% 106%,var(--glow-3),transparent 62%);
}
/* 网格在上：细网格 8px + 粗网格 64px。
   颜色与两级透明度都走变量，切主题时整套还原成原 deck 的数值。 */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(var(--grid),var(--grid-fine)) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--grid),var(--grid-fine)) 1px,transparent 1px),
    linear-gradient(rgba(var(--grid),var(--grid-coarse)) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--grid),var(--grid-coarse)) 1px,transparent 1px);
  background-size:8px 8px,8px 8px,64px 64px,64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 130% 80% at 50% 0%,#000 25%,transparent 100%);
  mask-image:radial-gradient(ellipse 130% 80% at 50% 0%,#000 25%,transparent 100%);
}

/* ---------- 4. 头部 ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;height:var(--hdr-h);z-index:150;
  background:var(--hdr-bg);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.hdr.is-scrolled{background:var(--hdr-solid);border-bottom-color:var(--line)}

/* 顶部进度条：贴在头部最上沿 */
.hdr-prog{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(222,230,237,.08)}
.hdr-prog u{display:block;height:100%;width:0;background:var(--grad);text-decoration:none;transition:width .5s var(--ease)}

.hdr-in{
  height:100%;width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;gap:18px;
}

/* 品牌 */
.brand{display:flex;align-items:center;gap:11px;min-height:44px;text-decoration:none;flex:0 0 auto}
/* logo.png 固有 644×652 —— 只用 34px，纯下采样，绝不放大 */
/* logo.png 固有 644×652 —— 显示 42px，仍是 15 倍下采样，绝不放大。
   42 ≈ 文字块高度（字标 20.4 + 间距 7 + 副标 16.5 = 43.9），
   图标与两行文字齐平，整组读起来是一个规整的矩形。 */
.brand img{width:42px;height:42px;flex:none}
.brand .bt{display:flex;flex-direction:column;align-items:center;gap:7px;line-height:1}
.brand b{font-size:17px;font-weight:900;letter-spacing:-.02em;line-height:1.2}
.brand b i{color:var(--brand);font-style:normal}
/* 中文副标：居中于字标下方，用疏排撑开宽度。
   汉字只有 4 个，靠字距把它做到字标宽度的约一半 —— 再宽就得让汉字比拉丁字标还大，层级会翻。
   行高给足，别让上面那行 g 的下伸部压到中文。 */
.brand .sub{
  font-family:var(--sans);font-size:15px;font-weight:500;
  letter-spacing:.4em;margin-right:-.4em;   /* 抵消末字后的字距，保证视觉居中 */
  color:var(--txt-3);white-space:nowrap;line-height:1.1;
}

/* 章节导航 */
.topnav{display:flex;align-items:center;gap:2px;margin-left:auto}
.topnav a{
  font-size:14px;font-weight:700;color:var(--txt-2);text-decoration:none;
  padding:0 13px;height:38px;display:inline-flex;align-items:center;border-radius:var(--r-m);
  transition:color .22s var(--ease),background .22s var(--ease);white-space:nowrap;
}
.topnav a:hover{color:var(--txt);background:rgba(222,230,237,.07)}
.topnav a.on{color:var(--brand);background:var(--brand-soft)}

/* 头部右侧的小按钮（关于我页用） */
.hdr-cta{
  display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;
  border-radius:var(--r-m);border:1px solid var(--line-2);background:rgba(222,230,237,.05);
  color:var(--txt);text-decoration:none;font-size:14px;font-weight:700;white-space:nowrap;
  transition:border-color .22s var(--ease),background .22s var(--ease),color .22s var(--ease);
}
.hdr-cta:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}

/* 头部右侧控件 */
.hdr-right{display:flex;align-items:center;gap:14px;flex:0 0 auto;padding-left:14px;margin-left:2px;border-left:1px solid var(--line)}

.modetoggle{display:flex;gap:2px;background:var(--pick-bg);border:1px solid var(--line);border-radius:100px;padding:3px}
.modetoggle button{
  font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--txt-2);
  background:none;border:none;padding:5px 12px;border-radius:100px;cursor:pointer;
  transition:color .22s var(--ease),background .22s var(--ease);
}
.modetoggle button.on{background:var(--brand-soft);color:var(--brand)}
.modetoggle button:not(.on):hover{color:var(--txt)}
.modetoggle button:disabled{cursor:default}

/* 背景切换：两个色块 + 文案，与模式开关同一套胶囊语言 */
.themepick{display:flex;gap:2px;background:var(--pick-bg);border:1px solid var(--line);border-radius:100px;padding:3px}
.themepick button{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--txt-2);
  background:none;border:none;padding:5px 11px;border-radius:100px;cursor:pointer;
  transition:color .22s var(--ease),background .22s var(--ease);
}
.themepick button.on{background:var(--brand-soft);color:var(--brand)}
.themepick button:not(.on):hover{color:var(--txt)}
.themepick i{width:13px;height:13px;border-radius:50%;flex:none;border:1px solid transparent}
/* 两个色块要一眼分得开：深蓝带青玉环，墨黑带冷灰环 */
.sw-azure i{background:#16283F;border-color:rgba(34,188,185,.75)}
.sw-ink i{background:#05080F;border-color:rgba(150,165,190,.5)}
@media(max-width:1080px){ .themepick span{display:none} .themepick button{padding:5px 9px} }

/* 飞轮 SVG 的辅助线：颜色随主题 */
.fw-ring-a{stroke:var(--svg-a)}
.fw-ring-b{stroke:var(--svg-b)}

.pager{font-family:var(--mono);font-size:12px;color:var(--txt-3);letter-spacing:.08em;display:flex;align-items:center;gap:8px}
.pager b{color:var(--txt);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.pager .sp{width:18px;height:1px;background:var(--line-2)}

/* 汉堡按钮（移动端） */
.menu-btn{
  display:none;width:42px;height:42px;flex:none;border-radius:var(--r-m);
  border:1px solid var(--line-2);background:rgba(222,230,237,.05);
  color:var(--txt);cursor:pointer;place-items:center;padding:0;
}
.menu-btn span{display:block;width:18px;height:1.6px;background:currentColor;border-radius:2px;position:relative}
.menu-btn span::before,.menu-btn span::after{
  content:"";position:absolute;left:0;width:18px;height:1.6px;background:currentColor;
  border-radius:2px;transition:transform .25s var(--ease);
}
.menu-btn span::before{top:-6px}
.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* 抽屉里的分屏清单（仅移动端） */
.navpanel{display:none}

/* ---------- 5. 右侧进度点 ---------- */
.dots{
  position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:140;
  display:flex;flex-direction:column;gap:13px;
}
.dots button{
  width:10px;height:10px;border-radius:50%;border:1px solid var(--line-2);
  background:transparent;cursor:pointer;padding:0;position:relative;transition:.3s var(--ease);
}
.dots button::after{
  content:attr(data-t);position:absolute;right:22px;top:50%;transform:translateY(-50%) translateX(6px);
  font-family:var(--mono);font-size:10.5px;color:var(--txt-2);white-space:nowrap;
  background:rgba(11,22,38,.95);border:1px solid var(--line);padding:5px 10px;border-radius:var(--r-s);
  opacity:0;pointer-events:none;transition:.24s var(--ease);
}
.dots button:hover{border-color:var(--brand);transform:scale(1.25)}
.dots button:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.dots button.on{background:var(--brand);border-color:var(--brand);box-shadow:0 0 12px rgba(11,202,211,.55)}
.dots button.done{border-color:var(--brand-d);background:rgba(3,114,229,.45)}

/* ---------- 6. 幻灯片容器 ---------- */
.deck{position:relative;z-index:1}
/* 每屏高度：优先 100dvh，异常长视口由 JS 写 --vh 锁定。
   竖直内边距跟随视口高度伸缩 —— 矮屏收紧，高屏给足呼吸，
   保证"一屏一页"在任何常见尺寸下都成立。 */
.slide{
  min-height:var(--vh,100dvh);display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--hdr-h) + clamp(14px,3vh,44px)) 0 clamp(16px,3.6vh,84px);position:relative;
}
@supports not (height:100dvh){ .slide{min-height:var(--vh,100vh)} }
.slide-in{max-width:var(--maxw);width:100%;margin:0 auto;padding:0 var(--gutter)}

/* 滚动吸附 */
body.snap{scroll-snap-type:y proximity}
body.snap .slide{scroll-snap-align:start}
body.snap .slide:last-of-type{scroll-snap-align:none}   /* 最后一屏不吸附，页脚才露得出来 */
body.snap .foot{scroll-snap-align:end}

/* ---------- 7. 进入动画 ---------- */
/* 默认全部可见；JS 判定环境可用时才启用"浮入"，任何情况下都不会出现空白页 */
.rv{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
body.anim .rv{opacity:0;transform:translateY(22px)}
body.anim .rv.in{opacity:1;transform:none}          /* 关于我页：滚动入场 */
body.anim .slide.act .rv{opacity:1;transform:none}  /* 首页：当前屏整屏入场 */
body.anim .slide.act .rv:nth-child(1){transition-delay:.02s}
body.anim .slide.act .rv:nth-child(2){transition-delay:.09s}
body.anim .slide.act .rv:nth-child(3){transition-delay:.16s}
body.anim .slide.act .rv:nth-child(4){transition-delay:.23s}
body.anim .slide.act .rv:nth-child(5){transition-delay:.30s}
body.anim .slide.act .rv:nth-child(6){transition-delay:.37s}
body.anim .slide.act .rv:nth-child(7){transition-delay:.44s}

/* ---------- 8. 内容页通用组件（沿用 deck 版式） ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--txt-3);
  display:flex;align-items:center;gap:12px;margin-bottom:clamp(12px,2vh,22px);
}
.eyebrow em{font-style:normal;color:var(--brand)}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent);max-width:180px}

.claim{font-size:clamp(26px,min(4.2vw,5.3vh),48px);font-weight:900;letter-spacing:-.04em;line-height:1.2;text-wrap:balance}
.claim-hero{font-size:clamp(30px,min(5.2vw,7vh),60px);line-height:1.16}
.claim .g,.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.claim .u{border-bottom:3px solid var(--brand);padding-bottom:4px}
.claim-sub{margin-top:clamp(12px,2.2vh,22px);font-size:clamp(15px,1.5vw,17px);color:var(--txt-2);max-width:720px;line-height:1.85}
.claim-sub b{color:var(--txt);font-weight:500}

.claim-sm{font-size:clamp(20px,min(3.1vw,4vh),34px);line-height:1.28}
.bignum{
  font-family:var(--mono);font-size:clamp(64px,10vw,128px);font-weight:700;
  letter-spacing:-.05em;line-height:.95;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bignum.warm{background:linear-gradient(160deg,#E8B364,var(--human));-webkit-background-clip:text;background-clip:text;color:transparent}
.bignum u{text-decoration:none;font-size:.42em;margin-left:4px}

/* 卡片 */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(16px,2.4vh,22px);transition:.26s var(--ease);position:relative}
.card:hover{background:var(--panel-2);border-color:var(--line-2);transform:translateY(-3px)}
.card-t{font-size:16px;font-weight:800;display:flex;align-items:center;gap:11px}
.card-t i{width:31px;height:31px;border-radius:var(--r-s);display:grid;place-items:center;flex:none;font-style:normal;font-family:var(--mono);font-size:13px}
.card .d{margin-top:12px;font-size:13.5px;color:var(--txt-2);line-height:1.82}
.card .d b{color:var(--txt);font-weight:500}

.lv1{border-color:rgba(11,202,211,.35);box-shadow:0 20px 60px -34px rgba(11,202,211,.45)}
.lv1::after{content:"";position:absolute;top:-1px;left:-1px;width:22px;height:22px;border-top:2px solid var(--brand);border-left:2px solid var(--brand);border-radius:var(--r-l) 0 0 0;pointer-events:none}
.lv1::before{content:"";position:absolute;bottom:-1px;right:-1px;width:22px;height:22px;border-bottom:2px solid var(--brand);border-right:2px solid var(--brand);border-radius:0 0 var(--r-l) 0;pointer-events:none}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.8vh,18px)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vh,18px)}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}

/* 变 / 不变 */
.k-var{border:1px dashed rgba(11,202,211,.42);background:linear-gradient(180deg,rgba(11,202,211,.055),transparent 60%)}
.k-var:hover{border-color:var(--brand);border-style:solid;background:linear-gradient(180deg,rgba(11,202,211,.09),transparent 60%)}
.k-fix{border:1px solid rgba(217,160,60,.34);background:linear-gradient(180deg,rgba(217,160,60,.05),transparent 60%)}
.k-fix:hover{border-color:var(--human)}
.k-badge{position:absolute;top:0;right:20px;transform:translateY(-50%);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;padding:4px 10px;border-radius:3px;background:var(--bg)}
.k-var .k-badge{color:var(--brand);border:1px dashed rgba(11,202,211,.5)}
.k-fix .k-badge{color:var(--human);border:1px solid rgba(217,160,60,.45)}
.k-var .card-t i{background:var(--brand-soft);color:var(--brand)}
.k-fix .card-t i{background:var(--human-soft);color:var(--human)}

/* 终端 */
.term{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--ink);font-family:var(--mono);margin-top:16px}
.term-b{display:flex;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--term-bar)}
.term-b u{width:8px;height:8px;border-radius:50%;background:var(--line-2);text-decoration:none}
.term-b u:first-child{background:rgba(217,160,60,.5)}
.term-b u:nth-child(2){background:rgba(11,202,211,.4)}
.term-b span{margin-left:8px;font-size:10px;color:var(--txt-3);letter-spacing:.08em}
.term-p{padding:13px 14px;font-size:11.5px;line-height:2;color:var(--txt-2)}
.term-p em{color:var(--brand);font-style:normal}
.term-p b{color:var(--txt);font-weight:500}

/* 飞轮 */
.loop-box{
  border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(16px,2.4vh,28px) 24px clamp(12px,1.9vh,22px);
  background:radial-gradient(ellipse 60% 90% at 50% 50%,rgba(11,202,211,.06),transparent 70%),var(--panel);
  position:relative;
}
.loop-box .corner{position:absolute;font-family:var(--mono);font-size:12px;color:var(--line-2);line-height:1}
.loop-box .corner.tl{top:8px;left:10px}.loop-box .corner.tr{top:8px;right:10px}
.loop-box .corner.bl{bottom:8px;left:10px}.loop-box .corner.br{bottom:8px;right:10px}
.loop{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap}
.side{text-align:center;width:132px;flex:none}
.side .ring{width:72px;height:72px;border-radius:50%;margin:0 auto;display:grid;place-items:center;position:relative;background:var(--panel-2)}
.side.h .ring{border:1px solid rgba(217,160,60,.5);box-shadow:0 0 0 6px rgba(217,160,60,.045),0 0 28px rgba(217,160,60,.12)}
.side.h .ring svg{color:var(--human)}
.side.o .ring{border:1px solid rgba(11,202,211,.5);box-shadow:0 0 0 6px rgba(11,202,211,.045),0 0 28px rgba(11,202,211,.12)}
.side.o .ring svg{color:var(--brand)}
.side h4{margin-top:12px;font-size:13px;font-weight:800}
.side p{font-family:var(--mono);font-size:9px;color:var(--txt-3);margin-top:4px}
.link{flex:1;min-width:26px;height:1px;position:relative;background:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 9px)}
.link u{position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--brand);box-shadow:0 0 9px var(--brand);animation:run 2.2s linear infinite;text-decoration:none}
@keyframes run{from{left:-4%}to{left:100%}}
.link.h u{background:var(--human);box-shadow:0 0 9px var(--human)}

/* 飞轮整体按视口高度缩放：矮屏自动收小，保证整屏装得下。
   所有内部尺寸都由 --fly 推导，改一个值即可等比缩放。 */
.fly{--fly:min(310px,34vh);--orb-r:calc(var(--fly) * .387);position:relative;width:var(--fly);height:var(--fly);flex:none}
.fly>svg{position:absolute;inset:0;width:100%;height:100%}
.fly .core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(var(--fly) * .342);height:calc(var(--fly) * .342);
  border-radius:50%;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 50% 38%,rgba(11,202,211,.2),var(--core-in));
  border:1px solid rgba(11,202,211,.45);
  box-shadow:0 0 40px rgba(11,202,211,.16),inset 0 0 26px rgba(11,202,211,.12);
}
.fly .core b{font-size:clamp(12.5px,calc(var(--fly) * .0484),15px);font-weight:900}
.fly .core span{display:block;font-family:var(--mono);font-size:clamp(7.5px,calc(var(--fly) * .0274),8.5px);color:var(--brand);letter-spacing:.16em;margin-top:3px}
.orb{position:absolute;left:50%;top:50%;width:0;height:0;animation:orbit 13s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
.orb>div{
  position:absolute;top:calc(var(--orb-r) * -1);transform:translate(-50%,-50%);
  width:clamp(64px,calc(var(--fly) * .258),80px);padding:9px 4px;border-radius:var(--r-m);
  text-align:center;background:var(--panel-2);border:1px solid var(--line-2);animation:up 13s linear infinite;
}
@keyframes up{to{transform:translate(-50%,-50%) rotate(-360deg)}}
.orb svg{display:block;margin:0 auto}
.orb b{display:block;font-size:11.5px;font-weight:800;margin-top:3px}
.o1>div{border-color:rgba(11,202,211,.5);box-shadow:0 0 20px rgba(11,202,211,.14)}
.o1 b{color:var(--brand)}
.o2{animation-delay:-3.25s}
.o2>div{animation-delay:-3.25s;border-color:rgba(3,114,229,.5)}
.o2 b{color:#5BA8FF}
.o3{animation-delay:-6.5s}
.o3>div{animation-delay:-6.5s}
.o3 b{color:var(--txt-2)}
.o4{animation-delay:-9.75s}
.o4>div{animation-delay:-9.75s;border-color:rgba(217,160,60,.42)}
.o4 b{color:var(--human)}
.loop-cap{margin-top:clamp(12px,1.9vh,20px);padding-top:clamp(10px,1.6vh,16px);border-top:1px solid var(--line);text-align:center;font-size:13px;color:var(--txt-2)}
.loop-cap code{font-family:var(--mono);font-size:11px;color:var(--brand);background:var(--brand-soft);padding:3px 9px;border-radius:3px;border:1px solid rgba(11,202,211,.25);margin-right:8px}

/* 层 */
.layer{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:linear-gradient(180deg,var(--panel),var(--layer-bg))}
.layer-h{display:flex;align-items:center;gap:13px;padding:clamp(12px,1.8vh,17px) 24px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--layer-hd),transparent)}
.layer-h i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--brand);letter-spacing:.1em}
.layer-h h3{font-size:18px;font-weight:900;letter-spacing:-.02em}
.layer-h .spec{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--txt-3);letter-spacing:.16em}
.layer-b{padding:clamp(15px,2.1vh,24px)}

/* 技能卡 */
.skill{padding:clamp(11px,1.6vh,15px) 17px;border-radius:var(--r-m);background:var(--panel-2);border:1px solid var(--line);margin-bottom:clamp(7px,1vh,9px);transition:.24s var(--ease);position:relative;overflow:hidden}
.skill::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line-2);transition:.24s var(--ease)}
.skill:hover{border-color:rgba(11,202,211,.4);transform:translateX(3px)}
.skill:hover::before{background:var(--brand)}
.skill h5{font-size:14px;font-weight:800}
.skill p{margin-top:6px;font-size:13px;color:var(--txt-2);line-height:1.75}
.skill p s{color:var(--txt-3);opacity:.6;margin-right:7px}
.skill p em{color:var(--brand);font-style:normal;font-weight:500}

.hlist{border:1px solid rgba(217,160,60,.24);background:rgba(217,160,60,.03);border-radius:var(--r-m);padding:8px 18px}
.hlist .row{display:flex;gap:12px;padding:clamp(9px,1.3vh,12px) 0;border-bottom:1px dashed rgba(217,160,60,.15)}
.hlist .row:last-child{border-bottom:none}
.hlist .row i{width:26px;height:26px;border-radius:var(--r-s);display:grid;place-items:center;flex:none;font-style:normal;background:var(--human-soft);color:var(--human);font-family:var(--mono);font-size:11px;border:1px solid rgba(217,160,60,.2)}
.hlist h5{font-size:13.5px;font-weight:800}
.hlist p{font-size:12.5px;color:var(--txt-2);margin-top:4px;line-height:1.7}

/* 护城河清单 */
.moat{list-style:none}
.moat li{display:flex;gap:12px;padding:clamp(9px,1.3vh,12px) 0;border-bottom:1px dashed var(--line)}
.moat li:last-child{border:none}
.moat li>u{width:7px;height:7px;margin-top:9px;flex:none;text-decoration:none}
.moat.var li>u{background:var(--brand);box-shadow:0 0 8px rgba(11,202,211,.6);transform:rotate(45deg)}
.moat.fix li>u{background:var(--human);box-shadow:0 0 8px rgba(217,160,60,.6);border-radius:1px}
.moat b{display:block;font-size:14px;font-weight:800}
.moat span{display:block;font-size:12.5px;color:var(--txt-2);margin-top:4px;line-height:1.7}
.moat.var b{color:#8FE6EA}
.moat.fix b{color:#E8C382}

/* 从内容屏通向完整页面的链接 */
.more-link{
  display:inline-flex;align-items:center;gap:9px;margin-top:26px;min-height:44px;
  color:var(--brand);font-size:14.5px;font-weight:700;text-decoration:none;
  transition:gap .22s var(--ease);
}
.more-link:hover{gap:14px}
.more-link svg{flex:none}

/* 引言块 */
.quote{
  margin-top:clamp(13px,2vh,22px);padding:clamp(14px,2vh,20px) 24px;border-radius:var(--r-m);
  background:linear-gradient(100deg,rgba(11,202,211,.09),rgba(217,160,60,.05) 60%,transparent);
  border:1px solid var(--line);border-left:2px solid var(--brand);font-size:15px;line-height:1.9;
}
.quote b{color:var(--brand)}

/* 约束 */
.cons{padding:16px 12px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--panel);text-align:center;transition:.24s var(--ease);position:relative;overflow:hidden}
.cons::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line-2);transform:scaleX(0);transition:transform .3s var(--ease)}
.cons:hover{border-color:rgba(11,202,211,.4);transform:translateY(-4px);background:var(--panel-2)}
.cons:hover::after{transform:scaleX(1);background:var(--brand)}
.cons i{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 10px;border-radius:var(--r-s);background:var(--panel-2);color:var(--brand);font-style:normal;font-family:var(--mono);font-size:14px;border:1px solid var(--line)}
.cons b{display:block;font-size:13px;font-weight:800}
.cons span{display:block;font-family:var(--mono);font-size:9.5px;color:var(--txt-3);margin-top:5px;letter-spacing:.04em}

/* 收尾 */
.outro{text-align:center}
.outro .big{font-size:clamp(30px,4.2vw,48px);font-weight:900;letter-spacing:-.035em;line-height:1.3}
.outro p{margin-top:clamp(16px,2.8vh,24px);font-size:15px;color:var(--txt-2)}
.contacts{display:flex;gap:14px;justify-content:center;margin-top:clamp(20px,3.6vh,34px);flex-wrap:wrap}
.contacts div{font-family:var(--mono);font-size:11.5px;color:var(--txt-2);border:1px solid var(--line-2);border-radius:var(--r-m);padding:11px 18px;transition:.24s var(--ease)}
.contacts div:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}

/* 首屏底栏信息 */
.hero-foot{display:flex;gap:32px;flex-wrap:wrap;margin-top:clamp(22px,4.6vh,44px);padding-top:clamp(14px,2.4vh,24px);border-top:1px solid var(--line)}
.hf{flex:1;min-width:172px}
.hf .k{font-size:12.5px;font-weight:700;color:var(--txt-2);letter-spacing:.01em}
.hf .v{font-size:15px;font-weight:800;margin-top:6px}
.hf .v em{font-style:normal;font-family:var(--mono);color:var(--brand)}

/* ---------- 9. 表单 ---------- */
.formbox{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--panel)}
.formbox-h{padding:clamp(12px,1.8vh,22px) 26px;border-bottom:1px solid var(--line);background:linear-gradient(100deg,rgba(11,202,211,.07),transparent 70%);position:relative}
.formbox-h::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--brand),transparent)}
.formbox-h h3{font-size:20px;font-weight:900;letter-spacing:-.02em}
.formbox-h p{margin-top:6px;font-size:13px;color:var(--txt-2);line-height:1.75}
.form-p{padding:clamp(13px,1.9vh,24px) 26px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.fg{margin-bottom:clamp(8px,1.35vh,17px)}
label{display:block;font-size:12px;font-weight:700;margin-bottom:6px;color:var(--txt-2)}
label u{text-decoration:none;font-family:var(--mono);font-size:9.5px;margin-left:6px;color:var(--brand)}
input,select,textarea{
  width:100%;background:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-m);
  padding:11px 13px;color:var(--txt);font-family:var(--sans);font-size:13.5px;outline:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--ph)}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,202,211,.13);background:var(--focus-bg)}
textarea{resize:vertical;min-height:clamp(42px,6.4vh,74px);line-height:1.7}
.btn-send{
  width:100%;padding:clamp(11px,1.7vh,15px);border:none;cursor:pointer;border-radius:var(--r-m);
  background:var(--grad);color:#04121A;font-size:14px;font-weight:900;font-family:var(--sans);
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease);
}
.btn-send:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(11,202,211,.3)}
.fnote{margin-top:10px;text-align:center;font-family:var(--mono);font-size:10px;color:var(--txt-3)}

/* ---------- 10. 提示条 ---------- */
.hint{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:140;
  font-family:var(--mono);font-size:11px;color:var(--txt-2);letter-spacing:.08em;
  display:flex;align-items:center;gap:9px;opacity:0;
  transition:opacity .5s var(--ease);
  background:var(--hint-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);padding:9px 17px;border-radius:100px;pointer-events:none;
}
.hint.on{opacity:1}
.hint u{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:blink 1.8s infinite;text-decoration:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* ---------- 11. 页脚（重新设计） ---------- */
.foot{
  position:relative;z-index:1;background:var(--bg-deep);
  border-top:1px solid var(--line);
  padding:clamp(40px,5vw,60px) 0 26px;
}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
/* logo-full.png 固有 2072×689 —— 显示 ≤235px 宽，纯下采样 */
.foot-logo{width:clamp(165px,19vw,235px);height:auto}
.foot-desc{margin-top:18px;max-width:390px;font-size:14px;color:var(--txt-2);line-height:1.75}
/* 页脚导航：去掉原来那个孤零零的「导航」标签 —— 它和下面的链接不在一个视觉系统里。
   改成与顶栏呼应的一行文字链，用同样的胶囊悬停。 */
.foot-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 8px}
.foot-nav a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 14px;
  border-radius:var(--r-m);font-size:14.5px;font-weight:700;color:var(--txt-2);
  text-decoration:none;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.foot-nav a:hover{color:var(--brand);background:var(--brand-soft)}
.foot-bottom{
  margin-top:clamp(30px,4vw,44px);padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--txt-3);line-height:1.7;
}
.foot-bottom a{display:inline-flex;align-items:center;min-height:32px;color:var(--txt-3);text-decoration:none;transition:color .2s var(--ease)}
.foot-bottom a:hover{color:var(--brand)}

/* 旧版存档入口：刻意做轻，只作历史留档，不抢底栏其它信息 */
.foot-old{font-size:12px;opacity:.6;letter-spacing:.02em}
.foot-old:hover{opacity:1}
@media (max-width:640px){.foot-old{opacity:.5}}

/* 两枚备案号并排成一组。
   按公安备案的展示规范：ICP 与公安备案号并列；图标在编号之前，建议 16×17。
   成组是为了窄屏换行时两枚号不会被打散。 */
.foot-beian{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.foot-police{gap:5px}
.foot-police img{width:16px;height:17px;flex:none;display:block}

/* ---------- 12. 关于我页 ---------- */
.page{position:relative;z-index:1}
.page-hero{padding:calc(var(--hdr-h) + clamp(52px,7vw,88px)) 0 clamp(24px,3vw,40px)}
.page-sec{padding:clamp(28px,4vw,48px) 0}
.prose p{font-size:14.5px;color:var(--txt-2);line-height:1.85}
.prose p + p{margin-top:12px}
.prose strong{color:var(--txt);font-weight:500}
.backbar{display:flex;justify-content:center;padding:clamp(30px,4vw,52px) 0 clamp(20px,3vw,36px)}
.backbar a{
  display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;
  border-radius:100px;border:1px solid var(--line-2);background:rgba(222,230,237,.04);
  color:var(--txt);text-decoration:none;font-size:14.5px;font-weight:700;
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.backbar a:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-2px)}
.backbar svg{width:17px;height:17px;color:var(--brand)}

/* ---------- 13. 响应式 ---------- */
/* 中文副标比字标窄，不占额外宽度；只在窄屏（头部降到 60px）时收起 */
@media(max-width:860px){
  .brand .sub{display:none}
}
@media(max-width:1024px){
  .grid5{grid-template-columns:repeat(3,1fr)}
  .grid3{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .slide-in{padding:0 22px}
  .grid2,.frow{grid-template-columns:1fr}
  .grid5{grid-template-columns:repeat(2,1fr)}
  .fly{--fly:min(250px,32vh)}
  .foot-top{grid-template-columns:1fr}
  .foot-nav{justify-content:flex-start;margin-top:6px}
}

/* ---- 移动端头部：导航收进抽屉 ---- */
@media(max-width:860px){
  :root{--hdr-h:60px}
  .menu-btn{display:grid}
  .brand img{width:30px;height:30px}   /* 副标收起后文字块只剩一行 18.6px，图标同比缩小 */
  .brand b{font-size:15.5px}
  .hdr-right{border-left:none;padding-left:0;gap:10px;margin-left:auto}

  .topnav{
    position:fixed;left:0;right:0;top:var(--hdr-h);margin-left:0;
    display:block;padding:16px var(--gutter) 22px;
    background:var(--drawer-bg);
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 50px rgba(0,0,0,.45);
    max-height:calc(100dvh - var(--hdr-h));overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  }
  .topnav.is-open{opacity:1;visibility:visible;transform:none}
  .topnav > a{display:flex;height:50px;font-size:16px;padding:0 12px}

  .navpanel{display:block;margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
  .navpanel .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--txt-3);margin-bottom:8px}
  .navpanel a{
    display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;
    border-radius:var(--r-m);color:var(--txt-2);text-decoration:none;font-size:14.5px;
  }
  .navpanel a b{font-family:var(--mono);font-size:10.5px;color:var(--txt-3);font-weight:400;min-width:20px}
  .navpanel a:hover{background:rgba(222,230,237,.06);color:var(--txt)}
  .navpanel a.on{background:var(--brand-soft);color:var(--brand)}
  .navpanel a.on b{color:var(--brand)}
}

@media(max-width:760px){
  .dots{display:none}                 /* 手机端由抽屉承担章节跳转，右侧竖点让位给正文 */
  .hint{font-size:10px;padding:7px 13px;bottom:16px;max-width:92vw;text-align:center}
  .pager .sp{width:12px}
}

/* ---- 手机端（≤560）：飞轮纵向重排，否则整块溢出 ---- */
@media(max-width:560px){
  .slide{padding:calc(var(--hdr-h) + clamp(12px,2.6vh,30px)) 0 clamp(18px,3.4vh,64px)}
  .slide-in{padding:0 18px}

  .brand .bt{gap:2px}
  .hdr-in{gap:10px}
  .modetoggle{display:none}           /* 手机默认阅读模式，模式开关无意义 */
  .hdr-cta{display:none}              /* 手机端由抽屉承担导航 */
  .pager{font-size:11px}
  .pager b{font-size:13px}

  .claim{font-size:clamp(27px,7.6vw,38px);line-height:1.22}
  .claim-hero{font-size:clamp(30px,8.8vw,44px);line-height:1.18}
  .claim-sub{margin-top:16px;font-size:15px;line-height:1.8}
  .eyebrow{font-size:10px;margin-bottom:16px}
  .eyebrow::after{max-width:90px}

  .loop-box{padding:18px 14px 16px}
  .loop{flex-direction:column;gap:14px}
  .side{width:100%;display:flex;align-items:center;justify-content:center;gap:14px;text-align:left}
  .side .ring{width:52px;height:52px;margin:0;flex:none}
  .side .ring svg{width:22px;height:22px}
  .side h4{margin-top:0;font-size:13px}
  .side p{margin-top:2px}
  .side > div:last-child{display:flex;flex-direction:column;justify-content:center}
  .link{display:none}
  .fly{--fly:min(230px,30vh);margin:2px auto}
  .loop-cap{margin-top:14px;padding-top:13px;font-size:12px;line-height:1.7}
  .loop-cap code{padding:2px 7px;margin-right:6px;font-size:10px}

  .card{padding:18px;border-radius:var(--r-m)}
  .layer-b{padding:18px}
  .layer-h{padding:14px 18px;gap:10px}
  .layer-h h3{font-size:16px}
  .layer-h .spec{display:none}
  .hlist{padding:6px 14px}
  .quote{padding:16px 18px;font-size:14px;line-height:1.8}

  .grid5{grid-template-columns:repeat(2,1fr);gap:9px}
  .grid3{grid-template-columns:1fr}
  .cons{padding:13px 9px}
  .cons b{font-size:12.5px}
  .cons span{font-size:9px}

  input,select,textarea{font-size:16px;padding:10px 12px}   /* ≥16px 防 iOS 聚焦缩放 */
  .btn-send{padding:14px;font-size:13.5px}

  .contacts{gap:9px;margin-top:24px}
  .contacts div{font-size:11px;padding:9px 13px}
  .outro p{font-size:14px}

  .skill{padding:13px 14px}
  .skill h5{font-size:13px}
  .skill p{font-size:12.5px}

  .foot{padding:34px 0 22px}
  .foot-logo{width:180px}
  .foot-bottom{font-size:12px}
}

@media(max-width:400px){
  .brand b{font-size:14.5px}
  .pager{letter-spacing:.04em}
}

/* ---- 极矮视口（高度 ≤760px）：整条竖直节奏再收一档。
   这个查询放在所有宽度查询之后，所以在"又窄又矮"的屏上也以它为准。
   目标是无论投影仪、笔记本还是手机横屏，每一屏都能一屏看全。 ---- */
@media (max-height:760px){
  .slide{padding:calc(var(--hdr-h) + 12px) 0 16px}
  .eyebrow{margin-bottom:10px}
  .claim-sub{margin-top:10px}
  .card{padding:15px}
  .grid2,.grid3{gap:12px}
  .loop-box{padding:14px 20px 12px}
  .fly{--fly:min(300px,32vh)}
  .loop-cap{margin-top:10px;padding-top:9px}
  .layer-h{padding:11px 20px}
  .layer-b{padding:14px 20px}
  .skill{padding:10px 15px;margin-bottom:6px}
  .hlist{padding:4px 14px}
  .hlist .row{padding:8px 0}
  .moat li{padding:8px 0}
  .quote{margin-top:11px;padding:12px 20px;font-size:14px;line-height:1.8}
  .formbox-h{padding:11px 22px}
  .form-p{padding:11px 22px}
  .fg{margin-bottom:7px}
  label{margin-bottom:5px}
  input,select,textarea{padding:8px 12px}
  textarea{min-height:38px}
  .btn-send{padding:10px;font-size:13.5px}
  .fnote{margin-top:8px}
  .hero-foot{margin-top:18px;padding-top:12px}
  .contacts{margin-top:16px}
  .outro p{margin-top:14px}
}

/* ---------- 14. 作品页（works.html） ---------- */
/* 只做三件事：给作品一个信息头、给产品一个可走查的机身、给"决策"一块可扫读的版面。
   配色仍走全局令牌，不引入新色，免得和两套主题打架。 */

/* 信息头：四格表格，1px 缝隙由底色透出来 */
.wk-meta{
  margin-top:clamp(26px,3.6vw,42px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
}
.wk-meta > div{background:var(--bg);padding:clamp(13px,1.6vw,18px) clamp(14px,1.6vw,18px);display:flex;flex-direction:column;gap:7px;min-width:0}
.wk-meta span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--txt-3)}
.wk-meta b{font-size:clamp(13px,1.2vw,14.5px);font-weight:700;letter-spacing:-.01em;line-height:1.5}
.wk-meta a{color:var(--brand);text-decoration:none;border-bottom:1px solid rgba(11,202,211,.35);padding-bottom:1px}
.wk-meta a:hover{border-color:var(--brand)}

/* 走查台：左步骤、右机身 */
.wk-stage{
  margin-top:clamp(20px,2.8vw,32px);
  display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,25vw,318px);
  gap:clamp(26px,4.6vw,64px);align-items:center;
}
.wk-steps{list-style:none;display:flex;flex-direction:column;gap:1px}
.wk-steps button{
  display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;width:100%;text-align:left;
  background:none;border:0;color:inherit;cursor:pointer;position:relative;
  padding:12px 14px 12px 12px;border-radius:var(--r-m);
  transition:background .25s var(--ease);
}
.wk-steps button:hover{background:rgba(222,230,237,.035)}
.wk-steps button:focus-visible{outline-offset:-2px}
.wk-steps li.on button{background:rgba(222,230,237,.05)}
.wk-steps li.on button::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:var(--brand);box-shadow:0 0 12px rgba(11,202,211,.55);
}
.wk-steps i{
  font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.1em;
  color:var(--txt-3);padding-top:5px;transition:color .25s var(--ease);
}
.wk-steps li.on i{color:var(--brand)}
.wk-steps h4{font-size:clamp(15px,1.35vw,16.5px);font-weight:800;letter-spacing:-.015em;color:var(--txt-2);transition:color .25s var(--ease)}
.wk-steps li.on h4{color:var(--txt)}
/* 只有当前步展开细节：一屏内讲完，不让人先读五段 */
.wk-steps .wx{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .42s var(--ease),opacity .3s var(--ease),margin-top .42s var(--ease);
}
.wk-steps li.on .wx{max-height:210px;opacity:1;margin-top:8px}
.wk-steps .wx p{font-size:13px;line-height:1.8;color:var(--txt-2)}
.wk-chip{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:4px 10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--brand);
  background:var(--brand-soft);border:1px solid rgba(11,202,211,.26);border-radius:100px;
}
.wk-prog{margin:16px 14px 0 54px;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.wk-prog u{display:block;height:100%;width:0;background:var(--grad)}
.wk-tour-ft{
  display:flex;align-items:center;gap:12px;margin:14px 0 0 54px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--txt-3);
}
.wk-play{
  display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:0 11px;
  background:none;border:1px solid var(--line-2);border-radius:100px;color:var(--txt-2);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.wk-play:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.wk-play svg{width:9px;height:9px;flex:none}
/* 左右箭头：桌面不显示（桌面右侧有完整步骤列表），手机端贴在机身两侧 */
.wk-arrow{display:none}
.wk-try{margin:26px 14px 0 54px;padding-left:14px;border-left:2px solid rgba(11,202,211,.32)}
.wk-try span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--brand)}
.wk-try p{margin-top:7px;font-size:12.5px;line-height:1.8;color:var(--txt-3)}
.wk-try a{color:var(--txt-2);text-decoration:none;border-bottom:1px solid var(--line-2);transition:color .2s var(--ease),border-color .2s var(--ease)}
.wk-try a:hover{color:var(--brand);border-color:var(--brand)}

/* 机身：只做素壳，不加刘海与贴膜光，免得抢画面 */
.wk-device{display:flex;flex-direction:column;align-items:center;gap:14px}
.phone{
  position:relative;width:100%;padding:9px;border-radius:46px;
  background:linear-gradient(158deg,#1D2A3E,#060A12 52%,#131E2E);
  box-shadow:
    0 48px 96px -46px rgba(0,0,0,.95),
    0 2px 10px rgba(0,0,0,.35),
    0 0 0 1px rgba(222,230,237,.17),
    inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone::before,.phone::after{content:"";position:absolute;border-radius:2px;background:rgba(222,230,237,.22)}
.phone::before{right:-2px;top:23%;width:2px;height:9%}     /* 音量键 */
.phone::after{right:-2px;top:36%;width:2px;height:13%}     /* 电源键 */
/* 比例挂在内屏上：外框多了 9px 内边距，若把比例写在外框会横向量裁掉约 3% */
.phone-scr{position:relative;width:100%;aspect-ratio:390/844;border-radius:37px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.wk-shot{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transform:scale(1.018);
  transition:opacity .55s var(--ease),transform .9s var(--ease);
}
.wk-shot.on{opacity:1;transform:none}
.wk-device-cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--txt-3);text-align:center}

/* ---- 故事播放器 ----
   机身里的一切用 cqw 定位：1cqw = 内屏宽的 1%，屏多大字号就多大，
   不用为桌面/手机各写一套。基准 390 宽时 1cqw ≈ 3.9px。 */
.wk-player{
  margin-top:clamp(20px,2.8vw,32px);
  display:grid;grid-template-columns:clamp(250px,25vw,318px) minmax(0,1fr);
  gap:clamp(26px,4.4vw,60px);align-items:center;
}
.wk-player-l{display:flex;flex-direction:column;gap:16px;align-items:center;min-width:0}
.pl-phone .phone-scr{container-type:inline-size;background:#F2FAF8}
.pl{position:absolute;inset:0;display:flex;flex-direction:column;color:#1E3A35;padding:4.4cqw 4.1cqw 3.6cqw}

.pl-top{display:flex;align-items:center;justify-content:space-between;height:5.2cqw;flex:none}
.pl-dots{display:flex;align-items:center;gap:1.5cqw}
.pl-dots u{display:block;width:1.7cqw;height:1.7cqw;border-radius:50%;background:rgba(11,122,110,.2);transition:width .3s var(--ease),background .3s var(--ease)}
.pl-dots u.done{background:rgba(11,122,110,.5)}
.pl-dots u.on{width:5.6cqw;border-radius:2.2cqw;background:#0B7A6E}
.pl-n{font-family:var(--mono);font-size:3.1cqw;letter-spacing:.08em;color:rgba(11,122,110,.45)}
.pl-n b{font-size:3.7cqw;color:#0B7A6E}

.pl-prog{margin-top:2.6cqw;height:.55cqw;border-radius:2cqw;background:rgba(11,122,110,.13);overflow:hidden;flex:none}
.pl-prog u{display:block;height:100%;width:0;border-radius:2cqw;background:#0B7A6E}

.pl-card{
  position:relative;flex:0 0 auto;aspect-ratio:720/1213;margin-top:3.2cqw;border-radius:5cqw;overflow:hidden;background:#fff;
  box-shadow:0 2cqw 5.5cqw -2.4cqw rgba(11,60,55,.22);
}
.pl-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .5s var(--ease);will-change:transform;
}
.pl-img.on{opacity:1}
/* 缓推缓拉：奇偶页方向相反，读起来不像在"翻同一张图" */
@keyframes plkbA{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.17) translate3d(-1.4%,-1.2%,0)}}
@keyframes plkbB{from{transform:scale(1.15) translate3d(1.2%,1%,0)}to{transform:scale(1.03) translate3d(0,0,0)}}
.pl-img.on:nth-of-type(odd){animation:plkbA 14s linear both}
.pl-img.on:nth-of-type(even){animation:plkbB 14s linear both}
.pl.is-paused .pl-img.on{animation-play-state:paused}

.pl-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:36%;pointer-events:none;
  background:linear-gradient(to top,rgba(6,36,33,.42),rgba(6,36,33,0));
  opacity:0;transition:opacity .3s var(--ease);
}
.pl.is-idle .pl-card::after{opacity:1}
.pl-start{
  position:absolute;left:50%;bottom:8cqw;transform:translateX(-50%);
  display:flex;align-items:center;gap:2.8cqw;padding:3.4cqw 4.6cqw;
  border:0;border-radius:100px;background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 2.4cqw 6cqw -2cqw rgba(0,0,0,.4);
  color:#0B3B35;font-family:inherit;text-align:left;cursor:pointer;
  transition:transform .25s var(--ease),opacity .3s var(--ease),visibility .3s;
}
.pl-start:hover{transform:translateX(-50%) scale(1.035)}
.pl-start svg{width:6.4cqw;height:6.4cqw;color:#0B7A6E;flex:none}
.pl-start b{display:block;font-size:3.9cqw;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.pl-start i{display:block;margin-top:.8cqw;font-style:normal;font-size:2.9cqw;color:rgba(11,59,53,.55);white-space:nowrap}
.pl-start.hide{opacity:0;visibility:hidden;transform:translateX(-50%) scale(.94)}

.pl-text{
  margin:auto 0 0;padding:3.8cqw 1.2cqw 3.2cqw;flex:none;
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:13cqw;font-size:4.7cqw;line-height:1.6;font-weight:500;letter-spacing:-.01em;color:#17332E;
}
.pl-bar{display:flex;gap:2.2cqw;flex:none}
.pl-bar button{
  flex:1;height:12.4cqw;border-radius:100px;border:1px solid rgba(11,122,110,.22);background:#fff;
  color:#0B7A6E;font-family:inherit;font-size:3.9cqw;font-weight:700;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.pl-bar button:hover{border-color:#0B7A6E}
.pl-bar button.main{background:#0B7A6E;border-color:#0B7A6E;color:#fff}
.pl-bar button.main:hover{background:#0A6A60}
.pl-bar button:disabled{opacity:.35;cursor:default}

/* 句角色图例：跟着翻页高亮 */
.pl-roles{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.04em}
.pl-roles span{border:1px solid var(--line);border-radius:100px;padding:5px 10px;color:var(--txt-3);transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.pl-roles span b{font-weight:700;color:var(--txt-2);margin-left:2px}
.pl-roles span.on{border-color:rgba(11,202,211,.45);background:var(--brand-soft);color:var(--brand)}
.pl-roles span.on b{color:var(--brand)}
.pl-roles i{font-style:normal;color:var(--txt-3);padding:0 2px}

.wk-player-r{min-width:0}
.pl-notes{list-style:none}
.pl-notes li{border-top:1px solid var(--line);padding-top:clamp(12px,1.4vw,16px);margin-top:clamp(12px,1.4vw,16px)}
.pl-notes li:first-child{border-top:0;margin-top:0;padding-top:0}
.pl-notes b{display:block;font-size:15px;font-weight:800;letter-spacing:-.015em}
.pl-notes b::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--brand);margin-right:9px;vertical-align:middle;transform:translateY(-1px)}
.pl-notes span{display:block;margin-top:6px;font-size:13px;line-height:1.82;color:var(--txt-2)}
.pl-cap{margin-top:clamp(16px,2vw,22px);padding-left:13px;border-left:2px solid var(--line);font-size:11.5px;line-height:1.9;color:var(--txt-3)}
.pl-cap b{color:var(--txt-2);font-weight:500}

@media(max-width:900px){
  .wk-player{grid-template-columns:1fr;gap:24px}
  .wk-player-l{order:-1}
  .wk-player-l .pl-phone{width:min(300px,78vw)}
}

/* 技术底盘：六格，同样用 1px 缝 */
.wk-tech{
  margin-top:clamp(22px,3vw,32px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
}
.wk-tech > div{background:var(--panel);padding:clamp(16px,2vw,22px);min-width:0}
.wk-tech span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--brand)}
.wk-tech b{display:block;margin-top:9px;font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.wk-tech p{margin-top:7px;font-size:12.5px;line-height:1.78;color:var(--txt-3)}

/* 其他作品 */
.wk-works{display:grid;grid-template-columns:1.32fr 1fr;gap:clamp(14px,1.8vw,20px);margin-top:clamp(22px,3vw,32px)}
.wk-work{
  display:flex;flex-direction:column;gap:0;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(20px,2.4vw,28px);
  background:linear-gradient(180deg,var(--panel),rgba(27,47,74,0) 78%);
  transition:border-color .26s var(--ease),transform .26s var(--ease),background .26s var(--ease);
}
a.wk-work:hover{border-color:var(--line-2);transform:translateY(-3px)}
.wk-work .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--txt-3)}
.wk-work h3{margin-top:10px;font-size:clamp(18px,2vw,22px);font-weight:900;letter-spacing:-.02em}
.wk-work .d{margin-top:10px;font-size:13px;line-height:1.8;color:var(--txt-2);flex:1}
.wk-work .d b{color:var(--txt);font-weight:500}
.wk-work .go{
  margin-top:18px;display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;color:var(--brand);letter-spacing:.01em;
}
.wk-work .go svg{width:14px;height:14px;transition:transform .26s var(--ease)}
a.wk-work:hover .go svg{transform:translateX(4px)}
.wk-work.doing{border-style:dashed;background:none}
.wk-work.doing .k{color:var(--txt-3)}

/* 收尾 */
.wk-cta{
  margin-top:clamp(26px,3.6vw,40px);padding:clamp(24px,3.2vw,36px);
  border:1px solid var(--line);border-radius:var(--r-l);
  background:radial-gradient(120% 130% at 12% 0%,rgba(11,202,211,.10),transparent 62%),var(--panel);
}
.wk-cta h3{font-size:clamp(19px,2.3vw,26px);font-weight:900;letter-spacing:-.025em;line-height:1.35}
.wk-cta p{margin-top:10px;font-size:13.5px;line-height:1.8;color:var(--txt-2);max-width:640px}
.wk-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.wk-btn{
  display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 22px;
  border-radius:100px;text-decoration:none;font-size:14px;font-weight:700;
  border:1px solid var(--line-2);color:var(--txt);background:rgba(222,230,237,.04);
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.wk-btn:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-2px)}
.wk-btn.solid{background:var(--grad);border-color:transparent;color:#04202C}
.wk-btn.solid:hover{filter:brightness(1.06);background:var(--grad)}
.wk-btn svg{width:15px;height:15px;flex:none}

/* 版权与来源注脚 */
.wk-note{
  margin-top:clamp(20px,2.6vw,30px);padding-top:18px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.9;color:var(--txt-3);max-width:820px;
}
.wk-note b{color:var(--txt-2);font-weight:500}

@media(max-width:1024px){
  .wk-tech{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .wk-stage{grid-template-columns:1fr;gap:26px}
  /* 手机端不做"长列表 + 上方图片"：一次只显示一步，图片与说明同屏，左右滑动切换。
     手机宽压到 66vw，保证 390×844 下"机身 + 说明 + 翻页条"一屏放得下。 */
  /* 机身三列：箭头贴在图片两侧、与图片垂直居中对齐 —— 不用再往下找按钮 */
  .wk-device{
    order:-1;justify-self:center;width:100%;display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px;column-gap:2px;row-gap:10px;
    align-items:center;justify-items:center;
  }
  .wk-device .phone{grid-column:2;grid-row:1;width:100%;max-width:min(252px,66vw)}
  .wk-device-cap{grid-column:1 / -1;grid-row:2}
  .wk-arrow{
    display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
    border:1px solid var(--line-2);background:rgba(222,230,237,.04);
    color:var(--txt-2);font-size:22px;line-height:1;font-family:inherit;cursor:pointer;
    transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
  }
  .wk-arrow:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
  .wk-arrow:disabled{opacity:.3;cursor:default}
  #wkPrev{grid-column:1;grid-row:1}
  #wkNext{grid-column:3;grid-row:1}
  .wk-meta{grid-template-columns:1fr 1fr}
  .wk-works{grid-template-columns:1fr}
  .wk-steps li{display:none}
  .wk-steps li.on{display:block}
  .wk-steps button{grid-template-columns:80px minmax(0,1fr);gap:6px;padding:0}
  .wk-steps i{white-space:nowrap}
  .wk-steps i::after{content:var(--wk-total," / 5");color:var(--txt-3);font-size:9.5px;letter-spacing:.02em}
  .wk-steps li.on button{background:none}
  .wk-steps li.on button::before{display:none}
  .wk-steps li.on button:hover{background:none}
  .wk-steps .wx{max-height:none;opacity:1;margin-top:7px;overflow:visible}
  .wk-prog{display:none}   /* 自动播在手机端默认关闭，进度条没有意义，别当成分隔线 */
  .wk-tour-ft{display:none}
  .wk-try{margin-left:0}
}
@media(max-width:560px){
  .wk-meta{grid-template-columns:1fr}
  .wk-tech{grid-template-columns:1fr}
  .phone{border-radius:40px}
  .phone-scr{border-radius:31px}
  .wk-steps button{padding:11px 10px}   /* 列宽统一由 ≤900 那条管，别在这里再写一遍 */
}

/* ---------- 15. 动效偏好 / 打印 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{opacity:1 !important;transform:none !important}
}

@media print{
  .hdr,.dots,.hint,.progress,.hdr-prog,.menu-btn{display:none !important}
  body{background:#fff;color:#111}
  body::before,body::after{display:none}
  .rv{opacity:1 !important;transform:none !important}
  .slide{min-height:0;padding:12mm 0;page-break-after:always}
  .slide-in{padding:0}
  .card,.layer,.formbox,.loop-box,.quote,.cons,.term{
    background:#fff !important;border-color:#ccc !important;box-shadow:none !important;
  }
  .claim,.claim-sub,.card-t,.card .d,.moat b,.moat span,.skill p,.hlist p,
  .quote,.cons b,.cons span,.layer-h h3,.side h4,.side p{color:#111 !important}
  .g,.claim .g,.bignum,.outro .big .g{
    background:none !important;-webkit-text-fill-color:#111;color:#111 !important;
  }
}

/* ---------- 16. 作品集 / 桌面产品页 ---------- */
/* 索引页：一张横卡一件作品，图在左、字在右 */
.wk-list{display:grid;gap:clamp(16px,2.2vw,24px);margin-top:clamp(24px,3vw,36px)}
.wk-item{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  background:linear-gradient(180deg,var(--panel),rgba(27,47,74,0) 82%);
  text-decoration:none;color:inherit;
  transition:border-color .28s var(--ease),transform .28s var(--ease);
}
.wk-item:hover{border-color:var(--line-2);transform:translateY(-3px)}
.wk-item-pic{position:relative;overflow:hidden;background:#0B1220;min-height:100%}
.wk-item-pic img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block;opacity:.92;transition:opacity .3s var(--ease)}
.wk-item:hover .wk-item-pic img{opacity:1}
.wk-item-pic.is-phone{display:flex;align-items:center;justify-content:center;padding:22px;background:radial-gradient(120% 120% at 30% 0%,rgba(11,202,211,.14),transparent 60%),#0E1B2E}
.wk-item-pic.is-phone img{width:auto;height:100%;max-height:340px;object-fit:contain;border-radius:22px;box-shadow:0 22px 44px -22px rgba(0,0,0,.9);border:1px solid rgba(222,230,237,.14)}
/* 整屏截图用 contain：卡片图区比例随视口变（1440 下 1.76、1024 下 1.54），
   用 cover 会在窄屏横向裁掉两成，把登录框切掉半边。留白用与截图同向的渐变兜住。 */
.wk-item-pic.is-fit{background:linear-gradient(135deg,#0B213A 0%,#123053 100%)}
/* 深色整屏截图：底色与截图一致，contain 让画面完整、不留白边 */
.wk-item-pic.is-dark{background:#161920}
.wk-item-pic.is-dark img{width:100%;height:100%;object-fit:contain;object-position:center;opacity:1}
.wk-item-pic.is-fit img{width:100%;height:100%;object-fit:contain;object-position:center;opacity:1}
.wk-item-body{padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column}
.wk-item-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--txt-3)}
.wk-item-body h3{margin-top:10px;font-size:clamp(19px,2.1vw,24px);font-weight:900;letter-spacing:-.025em}
.wk-item-body p{margin-top:10px;font-size:13.5px;line-height:1.85;color:var(--txt-2);flex:1}
.wk-item-body p b{color:var(--txt);font-weight:500}
.wk-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.wk-tags span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--txt-3);border:1px solid var(--line);border-radius:100px;padding:4px 9px}
.wk-item-go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--brand)}
.wk-item-go svg{width:14px;height:14px;transition:transform .26s var(--ease)}
.wk-item:hover .wk-item-go svg{transform:translateX(4px)}

/* 桌面产品走查：左侧步骤按钮，右侧一个"窗口" */
.lc-stage{margin-top:clamp(20px,2.8vw,30px);display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.lc-tabs{display:flex;flex-direction:column;gap:4px}
.lc-tabs button{
  display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:baseline;
  text-align:left;background:none;border:0;color:var(--txt-2);font-family:inherit;cursor:pointer;
  padding:13px 12px;border-radius:var(--r-m);position:relative;
  transition:background .24s var(--ease),color .24s var(--ease);
}
.lc-tabs button:hover{background:rgba(222,230,237,.035)}
.lc-tabs button.on{background:rgba(222,230,237,.05);color:var(--txt)}
.lc-tabs button.on::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--brand)}
.lc-tabs i{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.1em;color:var(--txt-3)}
.lc-tabs button.on i{color:var(--brand)}
.lc-tabs b{font-size:15px;font-weight:800;letter-spacing:-.015em}

.lc-view{min-width:0}
.lc-win{
  border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:#0B1220;
  box-shadow:0 40px 80px -46px rgba(0,0,0,.9);
}
.lc-bar{height:32px;display:flex;align-items:center;gap:7px;padding:0 13px;background:rgba(222,230,237,.055);border-bottom:1px solid var(--line)}
.lc-bar i{width:9px;height:9px;border-radius:50%;background:rgba(222,230,237,.2)}
.lc-bar i:first-child{background:rgba(217,160,60,.5)}
.lc-bar span{margin-left:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--txt-3)}
.lc-shots{position:relative;aspect-ratio:1500/888;background:#fff}
/* 剪敏页的截图是 1440×900（16:10），单独覆盖 */
.lc-stage.is-jm .lc-shots{aspect-ratio:1440/900}
/* 剪敏每步的说明是「小标题 + 正文 + 小字」，小标题要独立成行 */
.lc-stage.is-jm .lc-cap b{display:block;margin-bottom:6px;font-size:15px;letter-spacing:-.01em}
.lc-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;opacity:0;transition:opacity .4s var(--ease)}
.lc-shot.on{opacity:1}
.lc-cap{margin-top:12px;font-size:12.5px;line-height:1.8;color:var(--txt-2);min-height:3.4em}
.lc-cap b{color:var(--txt);font-weight:500}
.lc-cap em{display:block;margin-top:4px;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--txt-3)}

@media(max-width:900px){
  .wk-item{grid-template-columns:1fr}
  .wk-item-pic.is-phone{padding:18px}
  .wk-item-pic.is-phone img{max-height:300px}
  .lc-stage{grid-template-columns:1fr;gap:14px}
  .lc-tabs{flex-direction:row;flex-wrap:wrap;gap:6px}
  .lc-tabs button{grid-template-columns:auto auto;gap:6px;padding:9px 12px;border:1px solid var(--line);border-radius:100px;font-size:13px}
  .lc-tabs button.on{border-color:rgba(11,202,211,.45)}
  .lc-tabs button.on::before{display:none}
  .lc-tabs b{font-size:13px}
  .lc-win{border-radius:10px}
  .lc-bar{height:26px}
}

/* 取舍条目为奇数时，最后一条通栏；正文限宽，避免一行过长读不动 */
.grid2 > .card.wide{grid-column:1 / -1}
.grid2 > .card.wide .d{max-width:82ch}

/* ---------- 17. 荣誉条（星伴 · 决赛入围） ---------- */
.award{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,272px);
  gap:clamp(20px,4vw,52px);align-items:center;
  padding:clamp(20px,3vw,34px);
  border:1px solid var(--line);border-radius:var(--r-l);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(11,202,211,.09), transparent 58%),
    var(--panel);
}
.award-k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--brand)}
.award-k em{font-style:normal;opacity:.55;margin:0 5px}
.award-h{margin-top:10px;font-size:clamp(18px,2.1vw,25px);font-weight:900;letter-spacing:-.022em;line-height:1.32}
.award-sub{margin-top:7px;font-size:12.5px;color:var(--txt-3);letter-spacing:.02em}
.award-facts{margin-top:18px;display:grid;gap:9px}
.award-facts div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:baseline}
.award-facts span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--txt-3)}
.award-facts b{font-size:13px;font-weight:500;color:var(--txt);letter-spacing:-.005em}
.award-d{margin-top:14px;font-size:13.5px;line-height:1.9;color:var(--txt-2)}
.award-link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:12.5px;font-weight:700;color:var(--brand);text-decoration:none}
.award-link svg{width:13px;height:13px;transition:transform .24s var(--ease)}
.award-link:hover svg{transform:translate(2px,-2px)}
.award-pic{
  position:relative;display:block;width:100%;justify-self:end;
  border-radius:10px;overflow:hidden;border:1px solid var(--line-2);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.92);
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.award-pic:hover{transform:translateY(-3px);border-color:rgba(11,202,211,.5)}
.award-pic img{display:block;width:100%;height:auto}
.award-pic::after{
  content:"点击看原图";position:absolute;left:0;right:0;bottom:0;
  padding:18px 8px 9px;text-align:center;pointer-events:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:#fff;
  background:linear-gradient(to top,rgba(4,14,24,.62),transparent);
  opacity:0;transition:opacity .26s var(--ease);
}
.award-pic:hover::after{opacity:1}

@media(max-width:900px){
  .award{grid-template-columns:1fr;gap:18px;padding:18px}
  .award-txt{order:1}
  .award-pic{order:2;max-width:240px;justify-self:center}
  .award-d{font-size:13px}
}

/* ---------- 18. 剪敏页（02 深入 / 收尾状态） ---------- */