/* 全站仅两款字体：大标题 = 抖音美好体（DouyinSans），其余 = 小米 MiSans */
@import url("https://fontsapi.zeoseven.com/84/main/result.css");
@import url("https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Regular.min.css");

:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --grey:#8a8a8a;
  --hair:rgba(10,10,10,.1);
  --font-t:"DouyinSans","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  --font-b:"MiSans","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.5,1.6,.35,.9);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;overflow-x:clip}
/* 用 clip 而不是 hidden：hidden 会生成滚动容器，导致子元素 position:sticky 失效 */
body{background:var(--paper);color:var(--ink);font-family:var(--font-b);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--ink);color:var(--paper)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ============ 灵动岛胶囊页眉 ============ */
header{position:fixed;top:18px;left:0;right:0;z-index:100;display:flex;justify-content:center;pointer-events:none}
.capsule{
  pointer-events:auto;position:relative;display:flex;align-items:center;gap:4px;
  padding:7px 10px;border-radius:999px;--dm:0;
  background:color-mix(in srgb, rgba(255,255,255,.42) calc((1 - var(--dm)) * 100%), rgba(22,22,23,.55));
  -webkit-backdrop-filter:blur(32px) saturate(180%);
  backdrop-filter:blur(32px) saturate(180%);
  border:1px solid color-mix(in srgb, rgba(10,10,10,.07) calc((1 - var(--dm)) * 100%), rgba(255,255,255,.14));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, rgba(255,255,255,.7) calc((1 - var(--dm)) * 100%), rgba(255,255,255,.16)),
    0 12px 40px color-mix(in srgb, rgba(10,10,10,.1) calc((1 - var(--dm)) * 100%), rgba(0,0,0,.45));
}
.cap-logo{display:flex;align-items:center;padding:6px 12px 6px 8px;position:relative;z-index:2}
.logo-mark{width:26px;height:26px;display:block}
/* 随 --dm 在黑白两套配色间连续插值（JS 按胶囊与黑场重叠度驱动） */
.logo-mark rect{fill:color-mix(in srgb, #0a0a0a calc((1 - var(--dm)) * 100%), #f5f5f7)}
.logo-mark text{fill:color-mix(in srgb, #ffffff calc((1 - var(--dm)) * 100%), #0a0a0a)}
.cap-nav{display:flex;position:relative;z-index:1}
.cap-nav a{
  position:relative;z-index:2;font-size:13.5px;letter-spacing:.12em;
  color:color-mix(in srgb, #3d3d3d calc((1 - var(--dm)) * 100%), rgba(245,245,247,.72));
  padding:10px 18px;border-radius:999px;white-space:nowrap;
}
.cap-nav a:hover,.cap-nav a.act{color:color-mix(in srgb, var(--ink) calc((1 - var(--dm)) * 100%), #f5f5f7)}
/* 液态玻璃指示器 */
.nav-blob{
  position:absolute;top:3px;bottom:3px;left:0;width:0;z-index:1;border-radius:999px;
  background:color-mix(in srgb, rgba(255,255,255,.4) calc((1 - var(--dm)) * 100%), rgba(255,255,255,.14));
  -webkit-backdrop-filter:blur(10px) saturate(200%) brightness(1.12);
  backdrop-filter:blur(10px) saturate(200%) brightness(1.12);
  border:1px solid color-mix(in srgb, rgba(255,255,255,.75) calc((1 - var(--dm)) * 100%), rgba(255,255,255,.22));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, rgba(255,255,255,.95) calc((1 - var(--dm)) * 100%), rgba(255,255,255,.2)),
    inset 0 -1px 2px rgba(255,255,255,.3),
    0 2px 10px color-mix(in srgb, rgba(10,10,10,.1) calc((1 - var(--dm)) * 100%), rgba(0,0,0,.3));
  opacity:0;transform-origin:center;
  transition:left .55s var(--spring),width .55s var(--spring),opacity .6s var(--ease);
}
.nav-blob.show{opacity:1}
.nav-blob.squish{animation:squish .55s var(--spring)}
@keyframes squish{0%{transform:scale(1)}30%{transform:scaleX(1.15) scaleY(.9)}65%{transform:scaleX(.96) scaleY(1.03)}100%{transform:scale(1)}}

/* ============ 液态玻璃按钮 ============ */
.glass-btn{
  position:relative;display:inline-flex;align-items:center;
  padding:13px 30px;border-radius:999px;font-size:14px;letter-spacing:.14em;
  color:var(--ink);cursor:pointer;user-select:none;
  background:rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(18px) saturate(190%) brightness(1.06);
  backdrop-filter:blur(18px) saturate(190%) brightness(1.06);
  border:1px solid rgba(10,10,10,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.4),0 8px 24px rgba(10,10,10,.08);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.glass-btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 14px 34px rgba(10,10,10,.12)}
.glass-btn:active{transform:scale(.96)}
.glass-btn.solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.glass-btn.solid:hover{box-shadow:0 14px 34px rgba(10,10,10,.28)}

/* ============ 通用版式 ============ */
section{padding:clamp(90px,13vh,160px) clamp(20px,6vw,90px)}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(44px,6vh,72px)}
.sec-no{font-size:12px;letter-spacing:.3em;color:var(--grey)}
.sec-title{font-family:var(--font-t);font-size:clamp(30px,4.8vw,54px);letter-spacing:.03em;line-height:1.1}
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============ 首屏 ============ */
#hero{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:100px;overflow:hidden}
/* 列宽锁定为 100%，避免超宽的 LIULINXUAN 把 grid 列撑宽、导致中文名居中基准偏移 */
.hero-stack{display:grid;grid-template-columns:100%;place-items:center;text-align:center;width:100%}
.hero-stack>*{grid-area:1/1;width:100%}
.hero-en{
  /* 用 max-content + 居中对齐，超宽时向两侧均分溢出，而不是只向右溢 */
  width:max-content;max-width:none;
  font-family:var(--font-t);font-weight:800;font-size:clamp(72px,20vw,360px);
  line-height:.9;letter-spacing:.02em;color:#f1f1f1;
  text-transform:uppercase;user-select:none;white-space:nowrap;
  padding-left:.02em;text-align:center;
}
.hero-name{
  font-family:var(--font-t);font-size:clamp(36px,6vw,88px);line-height:1;
  /* padding-left 补偿尾部多出的一个字距，使字形视觉居中 */
  letter-spacing:.34em;padding-left:.34em;position:relative;z-index:2;
  animation:nameIn 2s ease 1s both;
}
.hero-sub{
  margin-top:clamp(26px,4.5vh,44px);font-size:clamp(13px,1.6vw,17px);
  letter-spacing:.3em;padding-left:.3em;color:var(--grey);
  width:100%;text-align:center;
  animation:subIn 2.4s ease 2s both;
}
@keyframes nameIn{from{opacity:0}to{opacity:1}}
@keyframes subIn{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:blur(0)}}

/* ============ 关于 ============ */
/* 整页 pin 住：所有行堆叠在同一位置，滚动逐行切换，一次只存在一行 */
#about{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0;--dark:0}
#about .about-center{display:grid;text-align:center;max-width:92vw}
.about-line{grid-area:1/1;font-family:var(--font-t);font-size:clamp(24px,4.4vw,54px);line-height:1.4;letter-spacing:.06em;color:var(--ink)}
/* 「先看短剧」复刻 vivo ai-section-title__gradient：实色底字 + 渐变层按 --gp 用 mask 从左扫入 */
.ag-wrap{position:relative;display:inline-block}
.ag-grad{position:absolute;inset:0;color:transparent;--gp:-12%;
  background:linear-gradient(90deg,#72c8ff 0%,#ff96db 49%,#ffd99c 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(var(--gp) - 12%),transparent calc(var(--gp) + 12%),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 calc(var(--gp) - 12%),transparent calc(var(--gp) + 12%),transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;will-change:mask-image}

/* ============ 地图 · 坐标 ============ */
/* 静态展示：陕西高亮 + 西安落点 + 坐标，无任何动画 */
#map{background:#f6f6f6;min-height:100vh;min-height:100dvh;height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:0}
.map-stage{width:100%;display:flex;align-items:center;justify-content:center;position:relative}
.map-frame{position:relative;width:min(82vw,1100px,125vh);transform-origin:57.75% 40.15%;z-index:1}
.china-layer svg{display:block;width:100%;height:auto;fill:#d9d9d9}
.shaanxi{fill:#0a0a0a}
.map-pin{position:absolute;pointer-events:none;left:57.75%;top:40.15%;width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--ink);border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.92),0 1px 5px rgba(10,10,10,.26)}
.map-meta{text-align:left;white-space:nowrap;overflow:hidden;
  position:absolute;left:75%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:0;z-index:2}
.map-label{font-family:var(--font-t);font-size:clamp(26px,3.4vw,44px);letter-spacing:.32em;white-space:nowrap}
.map-coord{margin-top:10px;font-size:12px;letter-spacing:.3em;color:var(--grey);font-variant-numeric:tabular-nums}
@media(max-width:900px){
  .map-stage{flex-direction:column;gap:clamp(26px,4vh,44px)}
  .map-frame{width:min(88vw,860px)}
  .map-meta{position:static;transform:none;text-align:center}
  .map-label{padding-left:.32em}
  .map-coord{padding-left:.3em}
}

/* ============ AI 短剧（复刻 Apple iOS "Explore what's new" media-card-gallery）============ */
/* 黑场直切，不做渐变过渡 */
#drama{background:#000;color:#f5f5f7;padding-left:0;padding-right:0;position:relative}
.drama-head{padding:0 clamp(20px,6vw,90px);text-align:left}
.drama-title{font-family:var(--font-t);font-size:clamp(30px,4.6vw,52px);line-height:1.1;font-weight:600;letter-spacing:.02em;color:#f5f5f7;white-space:nowrap}
/* 横向 scroll-snap 画廊：full-bleed，首卡左缘与标题对齐，两侧露出下一张 */
.drama-stage{position:relative}
.drama-gallery{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:clamp(36px,6vh,64px) clamp(20px,6vw,90px) 10px;scrollbar-width:none;-ms-overflow-style:none}
.drama-gallery::-webkit-scrollbar{display:none}
.drama-card{position:relative;flex:0 0 auto;width:min(1024px,78vw);aspect-ratio:1260/680;border-radius:18px;overflow:hidden;scroll-snap-align:center;background:#161617;list-style:none;cursor:pointer}
/* 封面两侧高斯模糊底（播放时填充黑边） */
.drama-card-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(46px) brightness(.5) saturate(1.25);transform:scale(1.3);opacity:0;transition:opacity .5s}
.drama-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .45s;z-index:1}
.drama-card-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .5s,transform 1.2s var(--ease)}
.drama-card:hover .drama-card-poster{transform:scale(1.03)}
.drama-card.playing .drama-card-bg{opacity:1}
.drama-card.playing video{opacity:1}
.drama-card.playing .drama-card-poster{opacity:0}
/* 播放态信息：抖音式左下角排版（作品名 + 导演/制作），播放时淡入 */
.drama-info{position:absolute;left:clamp(18px,3vw,36px);right:clamp(76px,9vw,120px);bottom:clamp(18px,3vw,32px);z-index:4;text-align:left;color:#f5f5f7;pointer-events:none;
  text-shadow:0 2px 14px rgba(0,0,0,.65);
  opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s var(--ease)}
.drama-card.playing .drama-info{opacity:1;transform:none}
.drama-info h3{font-family:var(--font-t);font-size:clamp(17px,2vw,24px);font-weight:500;letter-spacing:.06em}
.drama-info p{margin-top:7px;font-size:clamp(11px,1.2vw,13px);letter-spacing:.1em;color:rgba(245,245,247,.78)}
/* 卡内二维码弹层：覆盖正在播放的视频，无关闭钮，点按任意处关闭 */
.drama-qr{position:absolute;inset:0;z-index:6;display:grid;place-items:center;cursor:pointer;
  background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.drama-qr.show{opacity:1;visibility:visible}
.drama-qr img{max-width:min(62%,300px);max-height:84%;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.6);
  transform:scale(.9) translateY(10px);transition:transform .4s var(--spring)}
.drama-qr.show img{transform:none}
/* 卡片右侧操作组：开声音 / 手机观看全集（液态玻璃圆钮竖排） */
.drama-side{position:absolute;right:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:4;display:flex;gap:10px;opacity:0;transition:opacity .35s}
.drama-card.playing .drama-side{opacity:1}
.drama-side button{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(16px) saturate(180%) brightness(1.15);backdrop-filter:blur(16px) saturate(180%) brightness(1.15);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 2px rgba(255,255,255,.1),0 8px 22px rgba(0,0,0,.35);
  transition:transform .35s var(--spring),background .3s}
.drama-side button:hover{transform:scale(1.1);background:rgba(255,255,255,.22)}
.drama-side button:active{transform:scale(.92)}
.drama-side svg{width:19px;height:19px;fill:currentColor}
.drama-side .i-sound-on{display:none}
.drama-card.sound .drama-side .i-sound-off{display:none}
.drama-card.sound .drama-side .i-sound-on{display:block}
/* 控制条：1:1 复刻 all-access-pass —— 容器覆盖画廊区并下探到黑底条，
   上升不越过封面上缘，静止时居中固定在封面下方黑条的中线 */
.aap-container{position:absolute;top:0;left:0;width:100%;bottom:-96px;display:flex;align-items:flex-end;justify-content:center;overflow:clip;pointer-events:none;z-index:60}
.aap{position:sticky;bottom:22px;display:flex;align-items:center;gap:14px;pointer-events:auto;margin-bottom:22px}
.aap-pill{display:flex;align-items:center;height:52px;border-radius:999px;
  background:rgba(30,30,32,.42);
  -webkit-backdrop-filter:blur(26px) saturate(180%) brightness(1.12);backdrop-filter:blur(26px) saturate(180%) brightness(1.12);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 2px rgba(255,255,255,.06),0 12px 36px rgba(0,0,0,.5)}
.aap-pill.dots{padding:0 18px}
.aap-pill.pp{width:52px;justify-content:center;cursor:pointer;transition:transform .35s var(--spring),background .3s}
.aap-pill.pp:hover{transform:scale(1.08);background:rgba(255,255,255,.14)}
.aap-pill.pp:active{transform:scale(.92)}
.drama-dots{display:flex;gap:10px;align-items:center}
.drama-dots i{position:relative;width:8px;height:8px;border-radius:10px;background:rgba(255,255,255,.3);cursor:pointer;overflow:hidden;transition:width .3s ease,background .3s ease}
.drama-dots i:hover:not(.on){background:rgba(255,255,255,.55)}
.drama-dots i.on{width:48px;background:rgba(255,255,255,.3);cursor:pointer;touch-action:none}
.drama-dots i.on:hover{width:64px}
.drama-dots i.on::after{content:"";position:absolute;inset:0;background:#f5f5f7;border-radius:10px;transform-origin:0 50%;transform:scaleX(var(--p,0))}
.drama-pp{display:grid;place-items:center;color:#f5f5f7}
.drama-pp svg{width:34px;height:34px;fill:currentColor}
.drama-pp .i-pause{display:none}
.aap.playing .drama-pp .i-pause{display:block}
.aap.playing .drama-pp .i-play{display:none}
/* 二维码：卡内弹层（.drama-qr，见 AI 短剧区） */
/* 灵动岛媒体指示：菜单胶囊内、联系我右侧的小圆封面 */
.cap-media{width:34px;height:34px;border-radius:50%;overflow:hidden;cursor:pointer;flex:0 0 auto;
  margin-left:6px;pointer-events:auto;align-self:center;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.4),0 4px 14px rgba(0,0,0,.3);
  opacity:0;transform:scale(.3);
  transition:opacity .5s var(--spring),transform .5s var(--spring),width .5s var(--spring),margin .5s var(--spring)}
.cap-media.show{opacity:1;transform:scale(1)}
.cap-media:not(.show){pointer-events:none;width:0;margin-left:0}
.cap-media img{width:100%;height:100%;object-fit:cover;display:block}
/* 灵动岛播放器卡片（液态玻璃，从右上圆标展开，不压菜单） */
.island-player{position:fixed;top:84px;left:50%;z-index:300;--dm:0;
  width:min(92vw,430px);border-radius:26px;padding:18px 20px 16px;
  color:color-mix(in srgb, var(--ink) calc((1 - var(--dm)) * 100%), #f5f5f7);
  background:color-mix(in srgb, rgba(255,255,255,.62) calc((1 - var(--dm)) * 100%), rgba(28,28,32,.62));
  -webkit-backdrop-filter:blur(34px) saturate(190%) brightness(1.14);backdrop-filter:blur(34px) saturate(190%) brightness(1.14);
  border:1px solid color-mix(in srgb, rgba(10,10,10,.08) calc((1 - var(--dm)) * 100%), rgba(255,255,255,.16));
  box-shadow:inset 0 1px 0 color-mix(in srgb, rgba(255,255,255,.85) calc((1 - var(--dm)) * 100%), rgba(255,255,255,.28)),
    inset 0 -1px 2px rgba(255,255,255,.06),
    0 26px 70px color-mix(in srgb, rgba(10,10,10,.18) calc((1 - var(--dm)) * 100%), rgba(0,0,0,.55));
  opacity:0;visibility:hidden;transform-origin:top center;
  transform:translateX(-50%) translateY(-14px) scale(.9);
  transition:opacity .45s var(--ease),transform .5s var(--spring),visibility .45s}
.island-player.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1)}
.ip-top{display:flex;align-items:center;gap:14px}
.ip-art{width:52px;height:52px;border-radius:12px;object-fit:cover;flex:0 0 auto;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.ip-info{min-width:0;flex:1}
.ip-info b{display:block;font-size:15.5px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-info span{display:block;margin-top:3px;font-size:12px;letter-spacing:.06em;
  color:color-mix(in srgb, rgba(61,61,61,.75) calc((1 - var(--dm)) * 100%), rgba(245,245,247,.62))}
.ip-ctrl{display:flex;justify-content:center;align-items:center;gap:38px;margin:18px 0 16px}
.ip-ctrl button{background:none;border:0;color:inherit;cursor:pointer;display:grid;place-items:center;transition:transform .3s var(--spring),opacity .3s;opacity:.92}
.ip-ctrl button:hover{transform:scale(1.12);opacity:1}
.ip-ctrl button:active{transform:scale(.9)}
.ip-ctrl svg{fill:currentColor}
.ip-ctrl .ip-play{width:60px;height:60px}
.ip-ctrl .ip-play svg{width:42px;height:42px}
.ip-ctrl .ip-prev svg,.ip-ctrl .ip-next svg{width:30px;height:30px}
.ip-ctrl .ip-play .i-pause{display:none}
.island-player.playing .ip-play .i-pause{display:block}
.island-player.playing .ip-play .i-play{display:none}
.ip-bar{display:flex;align-items:center;gap:10px;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.04em;
  color:color-mix(in srgb, rgba(61,61,61,.68) calc((1 - var(--dm)) * 100%), rgba(245,245,247,.6))}
.ip-track{position:relative;flex:1;height:4px;border-radius:4px;cursor:pointer;
  background:color-mix(in srgb, rgba(10,10,10,.14) calc((1 - var(--dm)) * 100%), rgba(255,255,255,.18))}
.ip-track i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;
  background:color-mix(in srgb, #0a0a0a calc((1 - var(--dm)) * 100%), #f5f5f7)}
.ip-track::after{content:"";position:absolute;top:50%;left:var(--x,0);width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 1px 6px rgba(0,0,0,.4);
  background:color-mix(in srgb, #0a0a0a calc((1 - var(--dm)) * 100%), #ffffff)}
@media(max-width:900px){
  .drama-title{white-space:normal}
  .drama-gallery{padding-left:20px;padding-right:20px}
  .drama-card{width:86vw;aspect-ratio:420/480;scroll-snap-align:center}
}

/* ============ Web 作品 ============ */
/* 开场：sticky 舞台 —— 图卡滑到中央 → 高斯模糊浮现标题 → 玻璃球上升页面渐白 */
#web{padding-left:0;padding-right:0;padding-top:0;--dark:0}
.web-intro{position:relative;height:360vh;background:#000}
.web-intro-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.web-intro-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.web-intro-img{position:relative;z-index:1;width:min(1024px,78vw);aspect-ratio:1260/680;object-fit:cover;border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);will-change:transform,filter,opacity}
.web-intro-title{position:absolute;z-index:2;margin:0;color:#fff;font-family:var(--font-t);font-weight:500;
  font-size:clamp(40px,calc(100 / 1080 * 100vh),120px);letter-spacing:.08em;line-height:1.15;opacity:0;will-change:transform,opacity}
@media(max-width:900px){.web-intro-img{width:86vw;aspect-ratio:420/480}}
/* 帧野 AI：标题 + 一排截图 */
.zy{margin:0 clamp(20px,6vw,90px);border-top:1px solid var(--hair);padding:clamp(40px,7vh,80px) 0 0}
.zy-head{max-width:760px;margin-bottom:clamp(24px,4vh,40px)}
.zy-name{font-family:var(--font-t);font-size:clamp(28px,3.4vw,36px);font-weight:500;letter-spacing:-.01em}
.zy-desc{margin-top:12px;color:var(--grey);font-size:15px;line-height:1.8;letter-spacing:.02em;max-width:640px}
.zy-row{display:flex;gap:clamp(10px,1.4vw,18px)}
.zy-row figure{flex:1;min-width:0;margin:0}
.zy-row img{width:100%;display:block;border-radius:12px;aspect-ratio:1920/1012;object-fit:cover;object-position:top}
.zy-row figcaption{margin-top:12px}
.zy-row b{display:block;font-size:14.5px;font-weight:600;letter-spacing:.02em}
.zy-row span{display:block;margin-top:4px;color:var(--grey);font-size:12.5px;letter-spacing:.03em}
/* Web 小工具：独立模块 */
.tool-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);
  padding:clamp(26px,4.4vh,44px) 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.tool-cell b{font-family:var(--font-t);font-weight:500;font-size:16px;letter-spacing:.03em;display:block;margin-bottom:8px}
.tool-cell span{color:var(--grey);font-size:13px;letter-spacing:.05em}
@media(max-width:900px){
  .zy-row{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .zy-row figure{flex:0 0 72vw;scroll-snap-align:start}
}

/* ============ Skill（模块已移除）============ */

/* ============ 媒体鉴赏 ============ */
#media .media-list{border-top:1px solid var(--hair)}
.media-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:24px 4px;border-bottom:1px solid var(--hair);
  transition:padding-left .45s var(--ease),background .45s;cursor:default;
}
.media-row:hover{padding-left:22px;background:#f6f6f6}
.media-row b{font-family:var(--font-t);font-size:clamp(16px,2vw,22px);letter-spacing:.04em;font-weight:400}
.media-row span{font-size:12px;letter-spacing:.22em;color:var(--grey);white-space:nowrap}

/* ============ 图片作品 ============ */
.photo-grid{columns:3;column-gap:14px}
.photo-grid figure{margin-bottom:14px;break-inside:avoid;overflow:hidden;position:relative;background:#f2f2f2;border-radius:6px}
.photo-grid img{width:100%;transition:transform .8s var(--ease)}
.photo-grid figure:hover img{transform:scale(1.045)}
.photo-grid figcaption{
  position:absolute;left:12px;bottom:12px;padding:7px 14px;font-size:12px;letter-spacing:.18em;color:#fff;
  background:rgba(10,10,10,.32);border-radius:999px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;
}
.photo-grid figure:hover figcaption{opacity:1;transform:none}

/* ============ 联系 ============ */
/* end-stack：联系+页脚合计正好一屏 */
.end-stack{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
#contact{background:#f6f6f6;flex:1;display:flex;flex-direction:column;justify-content:center}
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.contact-lede{font-family:var(--font-t);font-size:clamp(28px,4.2vw,50px);line-height:1.4;letter-spacing:.04em;font-weight:400;color:var(--grey)}
.contact-links{display:flex;gap:16px;margin-top:38px}
.icon-btn{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(14px) saturate(200%);backdrop-filter:blur(14px) saturate(200%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.95),0 6px 18px rgba(10,10,10,.08);
  transition:transform .35s var(--ease),box-shadow .3s;cursor:pointer;
}
.icon-btn:hover{transform:translateY(-4px);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.95),0 12px 26px rgba(10,10,10,.12)}
.icon-btn svg{width:22px;height:22px;fill:var(--ink)}
.qr-row{display:flex;gap:18px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.qr-card{
  padding:16px 16px 14px;border-radius:16px;text-align:center;
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 20px 40px -24px rgba(10,10,10,.18);
  transition:transform .45s var(--ease);
}
.qr-card:hover{transform:translateY(-6px)}
.qr-card img{width:116px;height:116px;border-radius:10px;background:#fff;object-fit:cover}
.qr-card p{font-size:12px;letter-spacing:.24em;margin-top:12px;color:#6a6a6a}

footer{
  background:#f6f6f6;color:var(--grey);
  padding:26px clamp(20px,6vw,90px) 34px;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:12px;letter-spacing:.26em;
}
.beian{color:var(--grey);transition:color .3s}
.beian:hover{color:var(--ink)}
.beian-gab{display:inline-flex;align-items:center;gap:5px}
.beian-gab img{width:14px;height:15px;flex:0 0 auto;object-fit:contain}

/* ============ 页尾品牌揭示（复刻 trae.cn 帘幕机制，本站黑白配色）============ */
/* 主体内容层：不透明背景作帘，盖住钉在视口底部的品牌块 */
.page{position:relative;z-index:1;background:var(--paper)}
/* 预留等高占位，透明窗口让固定的品牌块透出 */
.brand-reveal{position:relative;z-index:0;height:calc(min(100vw,1600px)/5.6)}
.brand-reveal-inner{
  position:fixed;left:0;bottom:0;width:100%;height:calc(min(100vw,1600px)/5.6);
  background:var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.brand-reveal-inner span{
  font-family:var(--font-t);font-weight:700;line-height:1;color:var(--paper);
  font-size:calc(min(100vw,1600px)/7);letter-spacing:.04em;padding-left:.04em;
}
.brand-reveal-inner canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ============ 响应式 ============ */
@media(max-width:1180px){
  .contact-wrap{gap:clamp(20px,4vw,40px)}
  .contact-lede{font-size:clamp(24px,3.4vw,38px)}
  .qr-row{gap:14px}
  .qr-card{padding:12px 12px 10px}
  .qr-card img{width:96px;height:96px}
}
@media(max-width:900px){
  .cap-nav a{padding:9px 13px;font-size:13px}
  .contact-wrap{grid-template-columns:1fr}
  .tool-row{grid-template-columns:1fr}
  .photo-grid{columns:2}
  .qr-row{justify-content:flex-start}
  .hero-en{white-space:normal}
}
@media(max-width:640px){
  .cap-nav a:nth-child(n+5){display:none}
  .photo-grid{columns:1}
}