/* =============================================================================
   徐军 · AIGC 作品集 — vortex.css
   -----------------------------------------------------------------------------
   01 基础与令牌        02 导航
   03 开场（含入场时间轴）  04 自我介绍与目录连线
   05 数据成果          06 章节与作品
   07 经历              08 页脚
   09 弹窗              10 动效 / 减少动态
   -----------------------------------------------------------------------------
   约定：一个选择器只在所属区块出现一次；状态类（.opening-intro /
        .thread-in / .revealed …）写在基础样式之后；断点就近写在组件内，
        顺序为「基础 → 900 → 600 → 窄屏」。
   ========================================================================== */

/* ---------- 01 基础与令牌 ---------- */
:root{
  color-scheme:dark;
  --bg:#05090b;
  --ink:#e9e6de;
  --blue:#aec8dc;
  --serif:"Songti SC","SimSun",serif;
  --display:"Helvetica Neue",Arial,"Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:95px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,"Microsoft YaHei",sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid #b2daff;outline-offset:7px}
img{display:block;max-width:100%}
::selection{background:#7895ad;color:#fff}

/* 辅助类 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-content{position:fixed;left:20px;top:-100px;z-index:100;background:#101b22;padding:16px}
.skip-content:focus{top:20px}
.micro{font-size:11px;letter-spacing:3px;line-height:1.8}
.hairline{display:block;width:30px;height:1px;background:#adbdc5;margin:0 auto 18px}

/* 文字链接：下划线由 :after 承担，便于做拉伸动效 */
.text-link{
  position:relative;display:inline-flex;align-items:center;gap:24px;
  padding:6px 0 9px;font-size:12px;letter-spacing:2px;color:var(--blue);
  border-bottom:1px solid transparent;
}
.text-link::after{
  content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;
  background:#8298a8;transform-origin:left;transform:scaleX(.72);
  transition:transform .35s;
}
.text-link:hover::after,.text-link:focus-visible::after{transform:scaleX(1)}
.text-link span{transition:transform .3s}
.text-link:hover span{transform:translate(3px,-3px)}

/* 按钮 */
.cta-primary,.cta-ghost,.cta-link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;font-size:12px;letter-spacing:1.4px;line-height:1;
  transition:transform .3s,background .3s,border-color .3s,color .3s;
}
.cta-primary{padding:13px 22px;background:#e9e6de;color:#05090b;border:1px solid #e9e6de}
.cta-primary:hover{background:#fff;transform:translateY(-2px)}
.cta-ghost{padding:12px 20px;color:#e9e6de;border:1px solid #7f8d96;background:#05090b33}
.cta-ghost:hover{border-color:#e9e6de;background:#ffffff0f;transform:translateY(-2px)}
.cta-link{padding:8px 6px;color:#e2e8ea;border-bottom:1px solid #aab6bd;text-shadow:0 1px 8px #000}
.cta-link:hover{color:#fff;border-bottom-color:#fff}
@media(max-width:600px){
  .cta-link{font-size:10px;padding:5px 0}
}

/* 站点字体：系统已安装则优先用本地字，放到 assets/fonts/ 后自动启用文件版 */
@font-face{
  font-family:"RX NuFangHei";
  src:local("锐字锐线怒放黑简1.0"),local("锐字锐线怒放黑简"),local("锐字锐线怒放黑"),
      local("REEJI-RuixianNuFangHeiJian"),local("RuixianNuFangHeiJian");
  font-display:swap;
}

/* ---------- 02 导航 ---------- */
.navigation{
  position:fixed;z-index:20;top:0;left:0;width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:30px 3.8%;font-size:12px;letter-spacing:2px;
  background:linear-gradient(#05090be6,#05090b66 55%,transparent);
  text-shadow:0 1px 10px #000;
  transition:opacity .8s ease;
}
.nav-tools{display:flex;align-items:center;gap:16px;flex-shrink:0}
.nav-actions{position:relative;width:230px;height:20px;flex-shrink:0}
/* 链接由 JS 逐步显影：--nav-in 由时间轴写入 */
.navigation nav{position:absolute;inset:0;display:flex;justify-content:flex-end;gap:28px;opacity:var(--nav-in,0)}
.navigation [inert]{pointer-events:none}
/* 入场黑场期间隐藏导航，黑场退场时一起出现 */
.opening-intro .navigation{opacity:0;pointer-events:none}
.opening-intro.opening-reveal .navigation{opacity:1;pointer-events:auto}

@media(max-width:600px){
  .navigation{padding:25px 6%;font-size:10px;letter-spacing:1px}
  .navigation nav{gap:18px}
  .nav-actions{width:170px}
}
@media(max-width:380px){
  .nav-actions{width:140px}
  .nav-tools{gap:8px}
}

/* ---------- 03 开场 ---------- */
/* 桌面：sticky 舞台 + 可滚动时间轴；手机：自然文档流 */
.journey{position:relative;height:280svh}
.stage{height:100svh;position:sticky;top:0;overflow:hidden;isolation:isolate}
.opening{position:relative;height:100svh;overflow:hidden}

/* 背景层 */
.opening-scene{position:absolute;inset:0;background:url('assets/cover-poster.webp') center 48%/cover no-repeat;will-change:transform,opacity}
.opening-shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 26% 22% at 50% 41%,#03070988,transparent 100%)}
.opening-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;pointer-events:none;--intro-blur:14px;--intro-scale:1.045}
.opening-black{position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none}
.opening-copy,.enter{position:absolute;z-index:3}

/* 装饰光效 */
.vortex-sheen{
  position:absolute;inset:-12%;pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(from 0deg at 50% 41%,
  transparent 0deg,
  #8fb8d812 40deg, transparent 90deg,
  #aec8dc0d 160deg, transparent 220deg,
  #8fb8d812 300deg, transparent 360deg);
  animation:vortex-spin 96s linear infinite;
  will-change:transform;
}
.sun-glow{
  position:absolute;inset:-10%;pointer-events:none;
  background:radial-gradient(ellipse 26% 22% at 50% 41%,#aac8dd14,transparent 70%);
  animation:sun-drift 23s ease-in-out infinite alternate;
  will-change:transform,opacity;
}
/* 实验层：环形遮罩慢速旋转，默认关闭，?swirl 开启 */
.vortex-turn{
  display:none;position:absolute;inset:-14%;pointer-events:none;
  background:url('assets/vortex-opening-1586.webp') center 48%/cover no-repeat;
  transform-origin:50% 41%;mix-blend-mode:screen;opacity:.30;
  -webkit-mask-image:radial-gradient(ellipse 50% 42% at 50% 41%,transparent 27%,#000 35%,#000 54%,transparent 69%);
  mask-image:radial-gradient(ellipse 50% 42% at 50% 41%,transparent 27%,#000 35%,#000 54%,transparent 69%);
  animation:vortex-turn 120s linear infinite;
  will-change:transform;
}
.swirl .vortex-turn{display:block}

/* 顶部信息条：两侧细线由中心展开 */
.opening-tags{position:absolute;top:30px;left:0;width:100%;z-index:3;display:flex;align-items:center;gap:30px;padding:0 4%;pointer-events:none}
.opening-tags::before,.opening-tags::after{content:"";flex:1;height:1px;transform:scaleX(1);transition:transform 1s cubic-bezier(.16,.84,.3,1)}
.opening-tags::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7));transform-origin:right center}
.opening-tags::after{background:linear-gradient(90deg,rgba(255,255,255,.7),transparent);transform-origin:left center}
.opening-tags .tags-cn{display:none;font-size:11px;letter-spacing:.5px;color:#9fb0bb;text-shadow:0 1px 8px #000,0 0 4px #000}
.opening-tags .tags-en{
  font-family:"RX NuFangHei","Noto Sans SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  font-size:12px;letter-spacing:.42em;color:#e6edf2;margin-top:5px;text-shadow:0 1px 8px #000,0 0 4px #000;
}
.opening-tags p{margin:0;white-space:nowrap}

/* 首屏文案 */
.opening-copy{top:32%;left:0;width:100%;text-align:center;will-change:opacity,transform}
.opening-kicker p,.opening-lead p,.opening-sub p,.opening-tags p{margin:0}
.opening-kicker,.opening-lead,.opening-sub,.opening-tags{text-shadow:0 1px 14px #000,0 0 5px #000}
.opening-kicker .kicker-cn{font-size:15px;letter-spacing:3px;color:#fff;font-weight:500}
.opening-copy .opening-title{
  font-family:"Noto Sans SC","Source Han Sans SC","Helvetica Neue",Arial,sans-serif;
  font-weight:100;font-size:clamp(48px,6vw,90px);letter-spacing:.06em;line-height:1.06;
  margin:16px 0 20px;
}
.opening-title .title-cn{display:block}
.opening-lead{margin-top:14px}
.opening-lead .lead-cn{font-size:clamp(16px,1.4vw,21px);font-weight:500;letter-spacing:.4px;line-height:1.7;color:#eef0ec}
/* 中间：线先展开，副标题随后出现 */
.opening-sub{position:relative;max-width:780px;margin:16px auto 0;padding-top:20px}
.opening-sub::before{
  content:"";position:absolute;top:0;left:10%;width:80%;height:1px;
  background:rgba(255,255,255,.6);box-shadow:0 0 8px rgba(255,255,255,.2);
  transform:scaleX(1);
  transition:transform .45s cubic-bezier(.16,.84,.3,1);
}
.opening-sub .sub-cn{font-size:13px;letter-spacing:.3px;line-height:1.7;color:#b9c9d3}
.opening-sub .sub-en{font-family:var(--mono);font-size:10px;letter-spacing:.05em;line-height:1.7;color:#a9c0cf;margin-top:4px}

/* 行动区 */
.opening-actions{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:10px;width:max-content;max-width:94%;
  margin:26px auto 0;padding:8px 10px;
  border:1px solid #ffffff24;border-radius:999px;
  background:#03070b99;backdrop-filter:blur(12px);
  box-shadow:0 16px 50px #0005;
}
.opening-actions-single{gap:6px;padding:6px 8px;margin:24px auto 0;border-color:rgba(255,255,255,.3);background:rgba(3,7,11,.6);box-shadow:none}
.opening-actions-single .opening-cta{flex-direction:row;gap:0;padding:10px 22px;font-size:13px;letter-spacing:1.2px}
.opening-actions-single .cta-ghost{padding:10px 20px;font-size:13px;letter-spacing:1.2px}

/* 滚动提示 */
.enter{
  bottom:5%;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;flex-direction:column;gap:10px;
  font-size:13px;letter-spacing:4px;pointer-events:none;
}
.enter small{font-size:8px;letter-spacing:2.4px;color:#9daab2}
.enter .scroll-line{
  display:block;width:1px;height:46px;
  background:linear-gradient(#e9e6de,#e9e6de00);
  transform-origin:top;
  animation:line-drop 2.4s cubic-bezier(.4,0,.2,1) infinite;
}

@media(max-width:900px){
  .opening-copy{top:31%}
  .opening-tags{gap:18px}
  .opening-tags .tags-en{font-size:10.5px;letter-spacing:.3em}
}
@media(max-width:600px){
  .opening-scene{background-position:50% center}
  .opening-shade{background:radial-gradient(ellipse 46% 18% at 50% 39%,#03070999,transparent 100%)}
  .opening-video{object-position:50% center;--intro-blur:9px;--intro-scale:1.03}
  .opening-copy{top:28%}
  .opening-copy .opening-title{font-size:clamp(36px,10vw,52px)}
  .opening-kicker .kicker-cn{font-size:13px;letter-spacing:2px}
  .opening-actions{gap:6px;width:auto;max-width:95%;margin-top:20px;padding:7px 8px}
  .opening-actions-single{padding:4px 6px;margin-top:20px}
  .opening-actions-single .opening-cta,
  .opening-actions-single .cta-ghost{padding:9px 16px;font-size:12px}
  .opening-tags{top:64px;padding:0 6%}
  .opening-tags .tags-en{display:none}
.opening-tags .tags-cn{
  display:block;
  font-family:"RX NuFangHei","Noto Sans SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  font-size:10.5px;letter-spacing:.18em;color:#dbe5ec;
}
  .opening-sub .sub-cn{font-size:11px}
  .opening-sub .sub-en{font-size:8.5px}
  .enter{bottom:5%;font-size:9px}
  .enter .scroll-line{height:30px;animation:none;transform:none}
  .vortex-sheen,.sun-glow{display:none}
  .vortex-turn{display:none!important}
}

/* 入场时间轴：黑场 → 顶部信息条 → 标题 → 人物/主张 → 白线 → 副标题 → 按钮 */
.opening-intro .opening-black{opacity:1}
.opening-intro.opening-reveal .opening-black{opacity:0;transition:opacity 1.2s cubic-bezier(.2,.7,.2,1)}
.opening-intro.opening-skip .opening-black{transition-duration:.25s}
.opening-intro .opening-tags{opacity:0}
.opening-intro.opening-play .opening-tags{opacity:1;transition:opacity .3s ease .1s}
.opening-intro .opening-tags::before,.opening-intro .opening-tags::after{transform:scaleX(0)}
.opening-intro .opening-tags p{opacity:0;filter:blur(6px) brightness(2.2);transition:none}
.opening-intro.opening-play .opening-tags p{opacity:1;filter:blur(0) brightness(1);transition:opacity .9s ease .1s,filter .9s ease .1s}
.opening-intro.opening-play .opening-tags::before,.opening-intro.opening-play .opening-tags::after{transform:scaleX(1);transition-delay:.1s}

.opening-intro .opening-copy>*{opacity:0;transform:translateY(16px);filter:blur(7px);will-change:opacity,transform,filter}
.opening-intro .opening-copy>.opening-actions{filter:none}
/* 副标题块本身不整体淡入，由内部白线与文字分别出现 */
.opening-intro .opening-copy>.opening-sub{opacity:1;transform:none;filter:none;animation:none}
.opening-intro .opening-sub::before{transform:scaleX(0)}
.opening-intro .opening-sub .sub-cn,.opening-intro .opening-sub .sub-en{opacity:0;transform:translateY(10px);filter:blur(5px);transition:none}

.opening-intro.opening-play .opening-copy>.opening-title{animation:opening-title .8s cubic-bezier(.16,.84,.3,1) .4s both}
.opening-intro.opening-play .opening-copy>.opening-kicker,.opening-intro.opening-play .opening-copy>.opening-lead{animation:opening-line .6s cubic-bezier(.16,.84,.3,1) .7s both}
.opening-intro.opening-play .opening-sub::before{transform:scaleX(1);transition-delay:.9s}
.opening-intro.opening-play .opening-sub .sub-cn,.opening-intro.opening-play .opening-sub .sub-en{animation:opening-line .6s cubic-bezier(.16,.84,.3,1) 1.2s both}
.opening-intro.opening-play .opening-actions{animation:opening-rise .6s cubic-bezier(.16,.84,.3,1) 1.5s both}

.opening-intro .enter{visibility:hidden}
.opening-intro.opening-reveal .enter{visibility:visible;animation:opening-enter .8s .2s both}
.opening-intro.opening-reveal .opening-video{animation:opening-focus 1.35s cubic-bezier(.2,.7,.2,1) both}
.opening-intro.opening-skip .opening-video{animation-duration:.3s}

.arrow-jump{display:inline-block;font-style:normal;animation:arrow-bounce 1.6s ease-in-out 2.2s infinite}

/* ---------- 05 数据成果 ---------- */
.stats{padding:64px 6% 50px;border-top:1px solid #22313a;border-bottom:1px solid #22313a;background:linear-gradient(180deg,#05090b,#071016 55%,#05090b)}
.stats-head{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.stats-head .micro{margin:0;color:#8fa4b2;font-size:9px;letter-spacing:2.5px}
.stats-note{margin:0;font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:#5f7684}
.stats-row{max-width:1280px;margin:26px auto 0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #2a3942}
.stat{padding:20px 20px 18px;border-right:1px solid #1f2c34;min-width:0}
.stat:last-child{border-right:0}
.stat-value{display:block;font-family:var(--mono);font-weight:600;line-height:1;font-size:clamp(26px,2.8vw,40px);letter-spacing:-.02em;color:#eef4f7}
.stat-value.is-text{font-size:clamp(16px,1.5vw,24px);letter-spacing:.02em;line-height:1.3}
.stat-label{display:block;margin-top:10px;font-family:var(--mono);font-size:8.5px;line-height:1.6;letter-spacing:.08em;color:#91a8b6}
.stat-cn{display:block;margin-top:5px;font-size:10px;letter-spacing:.4px;color:#657b88}

@media(max-width:900px){
  .stats-row{grid-template-columns:1fr 1fr}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(n+3){border-top:1px solid #1f2c34}
  .stat:last-child{grid-column:span 2;border-right:0}
}
@media(max-width:600px){
  .stats{padding:48px 6% 40px}
  .stats-head{display:block}
  .stats-note{margin-top:8px}
  .stat{padding:16px 12px}
  .stat-value{font-size:26px}
  .stat-value.is-text{font-size:15px}
  .stat-label{font-size:7.5px}
  .stat-cn{font-size:9px}
}

/* ---------- 06 章节与作品 ---------- */
.chapters{position:relative;overflow:hidden;isolation:isolate}
/* 贯穿全站的银线 + 游走光段 */
.continuity{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;opacity:.65}
.continuity path{fill:none;stroke:url(#silver);stroke-width:1}
.continuity .travelling-light{stroke:#d3eaff;stroke-width:2;stroke-dasharray:100 5000;filter:drop-shadow(0 0 5px #77b8fa)}

.chapter{position:relative;padding:100px 6% 40px;max-width:1600px;margin:auto;scroll-margin-top:20px}
/* 每章背景：同一张金属图旋转裁切，避免重复下载大图 */
.chapter::before{
  content:"";position:absolute;z-index:-1;inset:-120px -35% auto -45%;height:600px;
  background:url('assets/chrome-orbit-1536.webp') center/cover;
  opacity:.34;transform:rotate(-12deg);
  mask-image:linear-gradient(transparent,black 40%,transparent);
}

.chapter-heading{width:80%;margin-bottom:10px}
.chapter-heading>.micro{margin-left:15px;transform:rotate(-8deg);transform-origin:left}
.chapter-heading svg{width:100%;height:auto;overflow:visible;margin-top:-20px}
.chapter-heading text{fill:var(--ink);font-family:var(--serif);font-size:90px;letter-spacing:8px}

/* 案例事实行：不点开也能判断 */
.case-meta{
  display:flex;flex-wrap:wrap;gap:6px 0;
  border-top:1px solid #26343d;padding-top:14px;margin:20px 0 18px;
  font-size:11px;letter-spacing:.4px;line-height:1.8;color:#93a3ae;
}
.case-meta span+span::before{content:"·";margin:0 12px;color:#5f727e}
.motion-meta{max-width:900px;margin-top:22px}

.editorial-copy h3{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3vw,46px);line-height:1.4;letter-spacing:2px;margin:24px 0}
.editorial-copy>p:not(.micro):not(.case-meta){color:#a8b0b5;font-size:13px;line-height:2.2}
/* 案例事实行：正文段落规则已排除它，两者可各自覆盖字号 */
.editorial-copy p.case-meta{font-size:11px;line-height:1.8;color:#93a3ae;margin:20px 0 18px}
.editorial-copy .micro{color:#8397a5;font-size:9px;letter-spacing:2px}
.tool-note{margin-top:60px;font-size:13px;letter-spacing:2px;color:#aab7bf}
.tool-note .hairline{margin:0 0 20px}
.tool-note small{display:block;margin-top:10px;font-size:8px;line-height:2;letter-spacing:2px}

.workflow-layout{display:grid;grid-template-columns:1fr 2fr;gap:6%;align-items:center}
.graphic-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:11%;align-items:center}
.graphic{padding-top:150px}
.graphic .chapter-heading{margin-bottom:-10px}
.graphic .editorial-copy{padding-top:80px}
.motion{padding-top:150px;padding-bottom:100px}
.workflow{padding-top:60px}

/* 作品图：轻微视差由 JS 写入 --py，悬停放大仍归 CSS */
.artwork,.motion-art{transform:translate3d(0,var(--py,0px),0);will-change:transform}
.artwork{width:100%;padding:0;display:block;text-align:left;overflow:hidden}
.artwork img{width:100%;height:auto;transition:transform .7s}
.artwork:hover img,.motion-art:hover img{transform:scale(1.04)}
.artwork-caption{display:flex;justify-content:space-between;position:relative;background:var(--bg);padding:18px 0;font-size:9px;letter-spacing:2px;color:#a3aeb6}
.artwork-caption>span,.more-work button>span{display:inline-block;transition:transform .4s}
.artwork:hover .artwork-caption>span,.more-work button:hover>span{transform:translate(3px,-3px)}
.more-work{display:flex;justify-content:flex-end;gap:40px;margin-top:45px;border-top:1px solid #35434c;padding:22px 0}
.more-work button{font-size:12px;color:#a9b7c2;padding:12px 0}
.more-work span{margin-left:30px}

/* 影像 */
.motion-art{padding:0;display:block;width:100%;position:relative;text-align:left;overflow:hidden}
.motion-art img{width:100%;max-height:660px;object-fit:cover;transition:transform 1s}
.motion-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#05090b80),linear-gradient(transparent 50%,#05090bdd)}
.motion-caption{position:absolute;z-index:1;right:6%;bottom:14%;display:flex;flex-direction:column;gap:20px}
.motion-caption strong{font-family:var(--serif);font-size:40px;font-weight:400;letter-spacing:4px}
.motion-caption>span:not(.micro){font-size:13px}
.motion-caption .text-link{width:max-content}
.source-note{margin-top:20px;color:#82929d;font-size:11px;line-height:1.8}

/* 让想象，有形 */
.floating-phrase{font-family:var(--serif);font-size:clamp(35px,4.2vw,65px);line-height:1.6;margin:65px 0 0;transform:none}
.floating-phrase svg{width:100%;overflow:visible}
.floating-phrase text{font-family:var(--serif);font-size:55px;fill:var(--ink);letter-spacing:3px}
.floating-phrase>span{margin-left:100px}
.floating-phrase small{display:block;margin-top:-10px;text-align:right;font:8px Arial;letter-spacing:3px;color:#9aabb6}

@media(max-width:900px){
  .chapter{padding-inline:5%}
  .workflow-layout{gap:5%}
  .graphic-layout{gap:7%}
  .editorial-copy h3{font-size:28px}
  .editorial-copy>p:not(.micro):not(.case-meta){font-size:12px}
  .floating-phrase{margin-top:65px}
}
@media(max-width:600px){
  .chapter{padding:70px 6% 30px}
  .chapter::before{background-image:url('assets/chrome-orbit-900.webp')}
  .chapter-heading{width:110%;margin-left:-3%;margin-bottom:20px}
  .chapter-heading>.micro{font-size:9px;letter-spacing:2px}
  .chapter-heading text{font-size:100px}
  .workflow{padding-top:45px}
  .workflow-layout,.graphic-layout{display:flex;flex-direction:column;gap:30px;align-items:stretch}
  .workflow .editorial-copy{order:2}
  .workflow .montage{order:1}
  .editorial-copy h3{font-size:29px;margin:15px 0}
  .workflow .editorial-copy h3 br{display:none}
  .editorial-copy .micro{font-size:8px}
  .editorial-copy>p:not(.micro):not(.case-meta){font-size:12px}
  .editorial-copy p.case-meta{font-size:10.5px}
  .tool-note{margin-top:30px}
  .tool-note .hairline{display:none}
  .case-meta{font-size:10.5px}
  .case-meta span+span::before{margin:0 9px}
  .more-work{gap:10px;justify-content:space-between;flex-wrap:wrap;margin-top:25px;padding-top:10px}
  .more-work button{font-size:10px}
  .more-work span{margin-left:8px}
  .silk{width:92%;margin:auto}
  .graphic .editorial-copy{padding-top:15px}
  .floating-phrase{font-size:38px;margin:30px 0 25px;text-align:center}
  .floating-phrase>span{margin-left:90px}
  .floating-phrase text{font-size:49px}
  .floating-phrase small{text-align:center}
  .motion-art img{height:440px;object-position:42% center}
  .motion-caption{bottom:10%;left:7%;right:auto;gap:17px}
  .motion-caption strong{font-size:31px}
  .motion-caption .micro{font-size:8px;letter-spacing:2px}
  .motion-caption>span:not(.micro){font-size:11px}
  .source-note{font-size:10px}
  .artwork,.motion-art{transform:none}
}

/* ---------- 07 经历 ---------- */
.experience{padding:100px 6% 90px;border-top:1px solid #1a2830;background:linear-gradient(#05090b,#070d11 60%,#05090b)}
.experience-head{max-width:1280px;margin:0 auto 46px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end}
.experience-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.2vw,58px);line-height:1.25;letter-spacing:2px;margin:12px 0 0}
.experience-lead{max-width:470px;margin:0 0 6px;color:#a9b7c0;font-size:14px;line-height:2}
.experience-body{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.55fr .85fr;gap:60px}
.experience-list{border-top:1px solid #2b3a44}
.experience-item{display:grid;grid-template-columns:150px 1fr;gap:26px;padding:24px 0;border-bottom:1px solid #1d2a32}
.experience-time{margin:3px 0 0;font-size:11px;letter-spacing:1.2px;color:#8fa2ae}
.experience-item h3{margin:0 0 6px;font-size:17px;font-weight:500;letter-spacing:.5px}
.experience-item h3 span{margin-left:10px;font-size:11px;font-weight:400;letter-spacing:1px;color:#93a4b0}
.experience-item p{margin:0;font-size:13px;line-height:1.9;color:#aebbc4}
.capability-list{border-top:1px solid #2b3a44;padding-top:22px}
.capability-list .micro{margin:0 0 18px}
.capability-list>div{padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid #1d2a32}
.capability-list span{display:block;margin-bottom:4px;font-size:13px;color:#e2e6e4}
.capability-list p{margin:0;font-size:11.5px;line-height:1.8;color:#8fa0ac}

@media(max-width:900px){
  .experience-head{grid-template-columns:1fr;gap:18px}
  .experience-body{grid-template-columns:1fr;gap:40px}
  .experience-item{grid-template-columns:120px 1fr}
}
@media(max-width:600px){
  .experience{padding:70px 6% 60px}
  .experience-head h2{font-size:34px}
  .experience-lead{font-size:13px}
  .experience-item{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .experience-time{font-size:10px}
  .experience-item h3{font-size:15px}
  .experience-item h3 span{display:block;margin:4px 0 0}
  .experience-item p{font-size:12px}
}

/* ---------- 08 页脚 ---------- */
footer{padding:100px 6% 30px;max-width:1600px;margin:auto;border-top:1px solid #35434c}
.footer-main{display:flex;align-items:center;justify-content:space-between}
.footer-main h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,62px);line-height:1.6}
.arrow-circle{display:grid;place-items:center;width:54px;height:54px;border:1px solid #e6e6e4;border-radius:50%;font-size:25px;transition:background .3s,transform .3s}
.footer-main .arrow-circle{width:75px;height:75px}
.footer-facts{margin:0 0 18px;font-size:11px;letter-spacing:1.5px;color:#9aabb6}
.footer-links{display:flex;align-items:center;flex-wrap:wrap;gap:18px 28px;margin:25px 0 70px;font-size:12px;letter-spacing:1px;color:#b1c1cc}
.copy-email{
  border:1px solid #4b5b66;border-radius:999px;padding:7px 14px;
  font-size:11px;letter-spacing:1px;color:#dbe3e8;white-space:nowrap;
  transition:border-color .3s,background .3s;
}
.copy-email:hover,.copy-email:focus-visible{border-color:#cfd8dd;background:#ffffff0d}
.copy-email.copied{border-color:#9fc3a8;color:#cde8d4}
.footer-quick{border-bottom:1px solid #5d707c;padding:2px 0;font-size:11px;letter-spacing:1px;color:#b9c6ce}
.footer-quick:hover{color:#fff;border-bottom-color:#fff}
.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid #35434c;padding-top:25px;font-size:9px;letter-spacing:2px;color:#a5b0b8}

@media(max-width:600px){
  footer{padding:65px 6% 25px}
  .footer-main h2{font-size:28px}
  .footer-main .arrow-circle{width:52px;height:52px;flex-shrink:0}
  .footer-links{margin-bottom:45px;font-size:11px}
  .footer-links a:first-child{width:100%}
  .footer-bottom{font-size:8px;letter-spacing:1px}
}

/* ---------- 09 弹窗 ---------- */
dialog{width:min(1100px,94vw);max-height:90svh;border:1px solid #55646e;background:#0b1115;color:var(--ink);padding:55px;overscroll-behavior:contain}
dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}
.dialog-close{position:sticky;top:0;display:block;margin-left:auto;padding:12px 20px;background:#19252e;z-index:2}
.dialog-content h2{font-family:var(--serif);font-size:36px;font-weight:400}

/* 30 秒摘要 + 四项事实 */
.case-tldr{border-left:2px solid #7f9bb0;padding:2px 0 2px 18px;margin:18px 0 26px;max-width:780px}
.case-tldr .micro{color:#8fa4b2;margin:0 0 6px}
.case-tldr p{margin:0;font-size:15px;line-height:1.9;color:#dbe3e8}
.case-intro{max-width:700px;font-size:14px;line-height:2;color:#bdc8d0}
.case-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-block:1px solid #35434c;padding:20px 0;margin:30px 0}
.case-facts small{display:block;margin-bottom:8px;font-size:11px;letter-spacing:1px;color:#8fa4b2}
.case-facts p{margin:0;font-size:12px;line-height:1.8;color:#c3ced5}
.case-source{color:#8499a7;font-size:11px}
.case-images{display:grid;gap:24px;overflow:auto}
.case-images img{width:100%;height:auto;background:#10181d;cursor:zoom-in}
.case-images img.zoomed{width:auto;max-width:none;cursor:zoom-out}
.modal-open{overflow:hidden}

/* 项目详情：共享元素飞入 */
.case-flight{position:fixed;z-index:5;pointer-events:none;background:#10181d;overflow:hidden;box-shadow:0 30px 90px #000c;will-change:transform}
.case-flight img{width:100%;height:100%;object-fit:cover;display:block}
#project-dialog[open]{animation:dialog-in .45s cubic-bezier(.2,.7,.3,1)}
#project-dialog.flying{overflow:visible}
#project-dialog .dialog-content{transition:opacity .35s ease}
#project-dialog.flying .dialog-content{opacity:0}

/* 30 秒速览 */
.quick-view{width:min(1080px,94vw);max-height:90svh;padding:0;border:1px solid #4b5b66;background:#0a1014;color:var(--ink);overflow:auto;overscroll-behavior:contain}
.quick-view::backdrop{background:#000d;backdrop-filter:blur(10px)}
.quick-close{
  position:sticky;top:0;z-index:3;width:100%;margin:0;padding:12px 20px;
  text-align:right;background:#0a1014ee;backdrop-filter:blur(6px);
  border-bottom:1px solid #22313a;
}
.quick-shell{padding:40px 48px 36px}
.quick-top h2{margin:10px 0 6px;font-size:clamp(38px,5vw,62px);font-weight:300;letter-spacing:.12em;line-height:1.1}
.quick-top h2 span{margin-left:12px;font-size:12px;letter-spacing:3px;color:#93a4b0;vertical-align:middle}
.quick-role{margin:0 0 16px;font-size:13px;letter-spacing:2px;color:#b9c6ce}
.quick-value{max-width:780px;margin:0 0 32px;font-size:15px;line-height:1.9;color:#d4dde2}
.quick-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:36px;border-top:1px solid #2b3a44;padding-top:26px}
.quick-col .micro{margin:0 0 12px;color:#8fa4b2}
.quick-col ul{list-style:none;padding:0;margin:0}
.quick-col li{padding:7px 0;font-size:12.5px;line-height:1.9;color:#b9c5cd;border-bottom:1px solid #1b272f}
.quick-col li strong{display:block;margin-bottom:2px;font-size:12px;font-weight:500;color:#e6e8e4}
.quick-case{display:block;width:100%;padding:9px 0;text-align:left;border-bottom:1px solid #1b272f;font-size:12.5px;line-height:1.6;color:#dbe2e6}
.quick-case small{display:block;margin-top:2px;font-size:10px;letter-spacing:1px;color:#8498a5}
.quick-case:hover,.quick-case:focus-visible{color:#fff}
.quick-exp li{font-size:11.5px}
.quick-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:28px;padding-top:24px;border-top:1px solid #2b3a44}
.quick-actions .cta-primary,.quick-actions .cta-ghost{padding:10px 16px;font-size:11px}
.quick-actions-mobile{display:none}

@media(max-width:900px){
  .case-facts{grid-template-columns:1fr 1fr}
  .quick-grid{grid-template-columns:1fr;gap:26px}
  .quick-shell{padding:30px 26px 28px}
}
@media(max-width:600px){
  dialog{padding:20px}
  .dialog-content h2{font-size:28px}
  .case-intro{font-size:12px}
  .case-tldr p{font-size:13px}
  .case-facts{grid-template-columns:1fr;gap:12px}
  .quick-view{width:94vw;max-height:92svh}
  .quick-top h2{font-size:34px}
  .quick-top h2 span{display:block;margin:6px 0 0}
  .quick-value{font-size:13.5px}
  .quick-actions .cta-primary,.quick-actions .cta-ghost{flex:1;text-align:center}
  .quick-shell>.quick-actions:not(.quick-actions-mobile){display:none}
  .quick-actions-mobile{display:flex;margin:18px 0 0;padding:0;border-top:0}
  .quick-actions-mobile .cta-primary,.quick-actions-mobile .cta-ghost{flex:1}
}

/* ---------- 10 动效 ---------- */
.reveal{
  transition:opacity var(--reveal-duration,700ms) cubic-bezier(.2,.7,.3,1),
  translate var(--reveal-duration,700ms) cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--reveal-delay,0ms);
}
.js .reveal:not(.revealed){opacity:0;translate:0 18px}

@keyframes vortex-spin{to{transform:rotate(360deg)}}
@keyframes vortex-turn{to{transform:rotate(360deg)}}
@keyframes sun-drift{
  from{transform:translate3d(-1.5%,-1%,0);opacity:.65}
  to{transform:translate3d(1.5%,1%,0);opacity:1}
}
@keyframes line-drop{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@keyframes thread-travel{to{stroke-dashoffset:-1}}
@keyframes dialog-in{from{opacity:0}to{opacity:1}}
@keyframes arrow-bounce{
  0%,100%{transform:translateY(-1px)}
  40%{transform:translateY(5px)}
  70%{transform:translateY(-3px)}
  85%{transform:translateY(1px)}
}
@keyframes opening-line{
  from{opacity:0;transform:translateY(16px);filter:blur(7px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes opening-rise{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
@keyframes opening-title{
  from{opacity:0;transform:translateY(10px) scale(1.05);filter:blur(10px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes opening-enter{
  from{opacity:0;transform:translate(-50%,12px)}
  to{opacity:1;transform:translate(-50%,0)}
}
@keyframes opening-focus{
  from{filter:blur(var(--intro-blur,14px)) brightness(.45);transform:scale(var(--intro-scale,1.045))}
  to{filter:blur(0) brightness(1);transform:scale(1)}
}

/* ---------- 减少动态：只保留静态版式 ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}

  .journey{height:200svh}
  .enter{top:78svh;bottom:auto}
  .introduction{mask-image:none!important;will-change:auto;opacity:1;visibility:visible}
  .intro-type text{opacity:1!important;visibility:visible!important}
  .intro-metal{transform:none!important}
  .intro-copy,.intro-index,.orbit-anchor{opacity:1!important;visibility:visible!important;translate:none!important}
  .intro-thread{opacity:1}
  .thread-base{transition:none;stroke-dashoffset:0}
  .thread-light{display:none}
  .thread-node{opacity:1}
  .reveal{transition:none!important}
  .artwork,.motion-art{transform:none}
  .vortex-sheen,.sun-glow{animation:none!important}
  .enter .scroll-line{animation:none!important;transform:none}
  .vortex-turn{display:none!important}
  .opening-video{display:none}
  #project-dialog[open]{animation:none}
  .arrow-jump{animation:none!important}
  /* 万一在入场过程中切到减少动态，直接落到终态 */
  .opening-intro .opening-black{display:none}
  .opening-intro .navigation{opacity:1;pointer-events:auto}
  .opening-intro .opening-copy>*{opacity:1;transform:none;filter:none;animation:none}
  .opening-intro .enter{visibility:visible;animation:none}
  .opening-intro.opening-reveal .opening-video{animation:none}
  .opening-intro .opening-tags{opacity:1;transition:none}
  .opening-intro .opening-tags p{opacity:1;filter:none;transition:none}
  .opening-intro .opening-tags .tags-cn,
  .opening-intro .opening-tags .tags-en{animation:none!important;filter:none;opacity:1}
  .opening-tags::before,.opening-tags::after{transform:scaleX(1);transition:none}
}
/* 减少动态 + 桌面：取消整屏 pin，自我介绍占满下半屏 */
@media(prefers-reduced-motion:reduce) and (min-width:601px){
  .stage{position:relative;height:200svh}
  .introduction{inset:100svh 0 0}
}
/* 减少动态 + 手机：底部提示回到自然文档流高度 */
@media(prefers-reduced-motion:reduce) and (max-width:600px){
  .enter{bottom:5%}
}

/* 内容优先：开场后直接进入作品，取消原目录屏的固定滚动距离。 */
.journey{height:auto!important}
.stage{position:relative;height:auto;overflow:hidden}
.workflow{padding-top:65px;padding-bottom:85px}
.workflow .workflow-layout{grid-template-columns:.85fr 1.65fr;gap:5%;align-items:center}
.workflow .editorial-copy h3{font-size:clamp(28px,2.8vw,44px);margin-top:18px}
.workflow .case-meta{display:block}
.workflow .case-meta span{display:block;margin:7px 0}
.workflow .case-meta span+span::before{content:none}
.workflow-proof{display:grid;grid-template-columns:.65fr 30px 2fr;gap:12px;align-items:center}
.workflow-proof figure{margin:0}
.product-input img{width:100%;height:auto}
.product-input figcaption,.proof-caption{font-size:11px;line-height:1.8;color:#bbc6ce}
.product-input figcaption span,.proof-caption span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:1px;color:#7e98a8;margin-top:12px}
.proof-arrow{font-size:24px;color:#a6bfcc;text-align:center}
.product-outputs{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.product-outputs .artwork{transform:none}
.proof-caption{grid-column:1 / -1;margin:0}
.proof-caption span{margin-top:0}
.workflow-method{display:grid;grid-template-columns:.85fr 1.65fr;gap:5%;align-items:center;margin-top:70px;padding-top:40px;border-top:1px solid #2a3942}
.workflow-method h3,.application-heading h3{font-family:var(--serif);font-size:clamp(23px,2vw,31px);font-weight:400;line-height:1.5;letter-spacing:1px;margin:12px 0 16px}
.workflow-method p:not(.micro),.application-heading>p:not(.micro){font-size:13px;line-height:2;color:#a8b5be;margin-bottom:24px}
.workflow-method .micro,.application-heading .micro{font-size:9px;color:#8aa5b7;letter-spacing:2px}
.process-steps{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:12px;color:#c2cdd4}
.process-steps span{font-family:var(--mono);font-size:10px;color:#7793a5;margin-right:12px}
.workflow-capture{border:1px solid #27343b;padding:12px 12px 0;background:#0a1014}
.workflow-capture .artwork-caption{background:none;padding:14px 0;font-size:9px;letter-spacing:1px}
.workflow-secondary{display:grid;grid-template-columns:1fr 1fr;gap:6%;margin-top:80px}
.workflow-application{border-top:1px solid #2a3942;padding-top:26px;display:flex;flex-direction:column;min-width:0}
.application-heading{min-height:180px}
.fashion-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0;width:100%;overflow:hidden}
.fashion-pair img{width:100%;height:clamp(240px,28vw,410px);object-fit:cover;object-position:center}
.fashion-pair img:first-child{object-fit:contain;background:#fff}
.tool-preview{display:flex;align-items:center;justify-content:center;padding:18px;background:#101517;border:1px solid #29353e;min-height:clamp(240px,28vw,410px)}
.tool-preview img{width:100%;height:auto}
.workflow-application>.text-link{align-self:flex-start;margin-top:24px}
.experience-lead>p{margin:0 0 20px}
@media(max-width:1000px){
 .workflow .workflow-layout,.workflow-method{grid-template-columns:1fr;gap:30px}
 .workflow .editorial-copy{max-width:650px}
 .workflow-proof{width:100%}
 .application-heading{min-height:205px}
}
@media(max-width:600px){
 .stage{height:auto}
 .workflow{padding-top:40px;padding-bottom:45px}
 .workflow .workflow-layout{display:flex;flex-direction:column;gap:28px}
 .workflow .editorial-copy{order:0}
 .workflow-proof{grid-template-columns:.6fr 18px 2fr;gap:7px}
 .product-outputs{gap:7px}
 .proof-arrow{font-size:17px}
 .product-input figcaption,.proof-caption{font-size:9px}
 .product-input figcaption span,.proof-caption span{font-size:7px;letter-spacing:.5px}
 .workflow-method{margin-top:40px;padding-top:28px;gap:24px}
 .workflow-secondary{grid-template-columns:1fr;gap:45px;margin-top:45px}
 .application-heading{min-height:0}
 .fashion-pair img{height:320px}
 .tool-preview{min-height:200px}
 .workflow-capture{padding:7px 7px 0}
 .workflow-capture .artwork-caption{font-size:8px;letter-spacing:0}
}

@media(max-width:600px){
 .workflow .editorial-copy h3 br{display:block}
 .workflow-proof{grid-template-columns:85px 1fr;gap:18px;align-items:center}
 .proof-arrow{text-align:left;font-size:28px;padding-left:5px}
 .product-outputs{grid-column:1 / -1;gap:10px}
}

/* 桌面：首屏停留，作品画布覆盖展开；手机沿用现有自然滚动。 */
.node-flow{display:none}
@media(min-width:601px){
 .desktop-interaction .journey{height:160svh!important}
 .desktop-interaction .stage{position:sticky;top:0;height:100svh}
 .desktop-interaction .chapters{
  margin-top:-60svh;z-index:4;background:var(--bg);
  transform:translate3d(0,var(--entrance-lag,0px),0) scale(calc(.94 + var(--entrance,0) * .06));transform-origin:center top;
  border-radius:calc((1 - var(--entrance,0)) * 28px) calc((1 - var(--entrance,0)) * 28px) 0 0;
  box-shadow:0 -25px 100px #0008;will-change:transform;
 }
 .workflow-method.has-node-flow{grid-template-columns:1fr;gap:24px}
 .has-node-flow>.workflow-capture{order:3;border:0;padding:0;max-width:320px;transform:none}
 .has-node-flow>.workflow-capture>img{display:none}
 .has-node-flow>.workflow-capture .artwork-caption{font-size:10px;color:#acc5d4}
 .has-node-flow>.workflow-capture .artwork-caption>span{font-size:0}
 .has-node-flow>.workflow-capture .artwork-caption>span::after{content:'查看完整截图 ↗';font-size:10px}
 .has-node-flow>.workflow-capture:hover{background:#0d151b}
 .has-node-flow>.node-flow{order:2}
 .has-node-flow .process-steps{display:flex;gap:30px;flex-wrap:wrap;margin:24px 0 8px}
 .has-node-flow .process-steps li{transition:color .3s;color:#657783}
 .has-node-flow .process-steps li.is-current{color:#e3f1fa}
 .has-node-flow .process-steps li.is-current span{color:#8ed8f9}
 .node-flow{display:block;border:1px solid #30434e;background:#091015;border-radius:10px;overflow:hidden}
 .flow-toolbar,.flow-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:16px 22px;font:10px var(--mono);letter-spacing:1px;color:#8197a5}
 .flow-toolbar{border-bottom:1px solid #26343d}
 .flow-toolbar>span:first-child{color:#c2d3de}
 .flow-toolbar i{display:inline-block;width:5px;height:5px;background:#8bcae3;border-radius:50%;margin-right:9px}
 .flow-canvas{height:440px;position:relative;isolation:isolate;background-image:radial-gradient(#34424c80 .8px,transparent .8px);background-size:20px 20px}
 .flow-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
 .flow-wires path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
 .wire-base{stroke:#3f5969;stroke-width:1.4;transition:stroke .25s,opacity .25s}
 .wire-stream{stroke:#b8e6fb;stroke-width:2.5;stroke-dasharray:.035 .965;opacity:0}
 .flow-wires .is-lit .wire-base{stroke:#88b3cb}
 .flow-wires .is-lit .wire-stream,.flow-wires .is-related .wire-stream{opacity:1;animation:node-data-flow 2.8s linear infinite}
 .flow-wires .is-related .wire-base{stroke:#b5e5fc;stroke-width:2}
 .flow-wires .is-muted{opacity:.2}
 .flow-node{
  position:absolute;width:26%;height:142px;padding:15px 16px 12px;text-align:left;
  border:1px solid #344550;border-radius:6px;background:#10191f;z-index:1;
  display:flex;flex-direction:column;gap:9px;
  box-shadow:0 8px 22px #0003;transition:border-color .25s,background .25s,opacity .25s,box-shadow .25s;
 }
 .node-label{font:9px var(--mono);letter-spacing:1px;color:#8199a9}
 .flow-node strong{font-size:17px;font-weight:400;color:#cdd9e0;letter-spacing:1px}
 .node-description{font-size:11px;line-height:1.7;color:#8b9eaa;display:block}
 .node-footer{display:flex;justify-content:space-between;gap:6px;margin-top:auto;font:8px var(--mono);color:#758e9d}
 .flow-node.is-lit{border-color:#587a91;background:#13202a}
 .flow-node.is-active,.flow-node.is-hovered{border-color:#b0d7ed;box-shadow:0 0 0 1px #82c3e02b,0 6px 25px #0004;background:#172834}
 .flow-node.is-active strong{color:#f0f6fa}
 .flow-node.is-muted{opacity:.36}
 .port{position:absolute;top:calc(50% - 4px);width:8px;height:8px;border:1px solid #84abc0;background:#162832;border-radius:50%}
 .port-in{left:-5px}.port-out{right:-5px}
 .flow-node[data-node='0'] .port-in,.flow-node[data-node='5'] .port-out{display:none}
 .flow-node[data-node='3'] .port-in,.flow-node[data-node='4'] .port-in,.flow-node[data-node='5'] .port-in{left:auto;right:-5px}
 .flow-node[data-node='3'] .port-out,.flow-node[data-node='4'] .port-out{right:auto;left:-5px}
 .flow-node[data-node='2'] .port-out{top:auto;bottom:-5px;right:calc(50% - 4px)}
 .flow-node[data-node='3'] .port-in{top:-5px;right:calc(50% - 4px)}
 .flow-detail{display:grid;grid-template-columns:1fr 1.6fr 110px;gap:28px;min-height:210px;padding:26px;border-top:1px solid #30434e;background:#0c151c}
 .detail-heading h4{font-family:var(--serif);font-size:25px;font-weight:400;margin:12px 0}
 .flow-detail .detail-heading p{font-size:12px;line-height:1.9;margin:0;color:#8ea4b2}
 .flow-detail dl{margin:0;display:grid;gap:12px;align-content:start}
 .flow-detail dl>div{display:grid;grid-template-columns:60px 1fr;gap:12px;font-size:11px;line-height:1.8}
 .flow-detail dt{color:#7e98a8}.flow-detail dd{margin:0;color:#c0ced8}
 .flow-detail>img{width:110px;height:148px;object-fit:contain;background:#111c23}
 .detail-symbol{font-size:65px;color:#334f62;text-align:center;align-self:center}
 .flow-bottom{border-top:1px solid #20313c;font-size:9px;min-height:46px}
 .flow-follow{font-size:10px;padding:5px;color:#c4e5f7}
 .flow-follow[hidden]{display:none}
}
@media(min-width:601px) and (max-width:1000px){
 .flow-node{padding:12px 10px;gap:8px;height:142px}
 .node-label{font-size:7px;letter-spacing:0}
 .flow-node strong{font-size:15px}
 .node-description{font-size:10px}
 .node-footer{font-size:7px}
 .flow-detail{grid-template-columns:1fr 1.5fr;gap:20px;padding:22px}
 .flow-detail>img,.detail-symbol{display:none}
}
@keyframes node-data-flow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.wire-stream{display:none}.flow-node{transition:none}}

/* 真实作品的前端交互预览，仅桌面显示。 */
.live-preview{display:none}
@media(min-width:601px){
 .has-node-flow>.live-preview{display:block;order:1;border:1px solid #30434e;border-radius:10px;background:#0c151c;overflow:hidden}
 .live-heading{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;gap:25px}
 .live-heading h4{font:400 24px var(--serif);margin:10px 0 0;color:#dce6eb}
 .live-toggle{font-size:11px;color:#c4e5f7;padding:12px;border:1px solid #3c5564;border-radius:4px;white-space:nowrap}
 .live-toggle:hover{background:#192b36;border-color:#8dbbd0}
 .live-body{border-top:1px solid #263c49;padding:26px}
 .live-body[hidden]{display:none}
 .live-board{position:relative;display:grid;grid-template-columns:.65fr .95fr 1.35fr;gap:6%;align-items:center;isolation:isolate}
 .live-connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
 .live-connections path{fill:none;stroke:#8aaec2;stroke-width:1;vector-effect:non-scaling-stroke}
 .live-input,.live-output{margin:0;border:1px solid #3b5260;border-radius:7px;overflow:hidden;background:#101c25}
 .live-input>.node-label{display:block;padding:13px}
 .live-input img{width:100%;height:auto}
 .live-board figcaption{font-size:10px;line-height:1.6;color:#a9bfcb;padding:13px}
 .live-controls{background:#15232e;border:1px solid #5e8398;border-radius:6px;padding:20px 18px}
 .live-controls h5{font-size:18px;font-weight:400;margin:10px 0 25px;color:#e0ebf2}
 .live-controls label{display:block;font-size:11px;color:#b9cedb;margin:20px 0}
 .live-controls output{float:right;font:10px var(--mono);color:#d9ecf5}
 .live-controls input{display:block;width:100%;margin:12px 0 0;accent-color:#add8ec;cursor:ew-resize}
 .live-reset{font-size:10px;color:#a7c3d2;border-top:1px solid #3b5361;padding:15px 0 0;width:100%;text-align:left}
 .live-output{position:relative}
 .live-output-label{position:absolute;left:12px;top:12px;z-index:1;font:9px var(--mono);letter-spacing:1px;color:#e3f4fd;background:#071017c9;padding:7px 10px;border-radius:3px;pointer-events:none}
 .live-image{overflow:hidden;aspect-ratio:896/1200;background:#101c25}
 .live-image img{width:100%;height:100%;object-fit:cover;will-change:transform,filter}
 .workflow-method .live-note{font-size:10px;line-height:1.8;color:#7e98a8;margin:20px 0 0}
}
@media(min-width:601px) and (max-width:900px){
 .live-body{padding:18px}
 .live-board{grid-template-columns:.6fr 1fr 1.1fr;gap:3%}
 .live-controls{padding:14px 10px}
 .live-heading{padding:20px}
 .live-heading h4{font-size:21px}
}

/* Apple-inspired image sequence: large visuals, quiet captions, horizontal browsing. */
.workflow-method.has-look-gallery{border-top:0;display:block;padding-top:0;position:relative;z-index:2;}
.has-look-gallery>div:first-child{max-width:900px}
.has-look-gallery h3{font-family:Arial,"Microsoft YaHei",sans-serif;font-size:clamp(30px,3.4vw,54px);font-weight:600;letter-spacing:-1.5px;line-height:1.2;margin:20px 0 22px}
.has-look-gallery>div:first-child>p:last-of-type{max-width:760px;color:#8c989e;line-height:1.8}
.has-look-gallery .process-steps,.has-look-gallery>.workflow-capture{display:none}
.look-gallery{margin-top:44px;width:calc(100vw - 1px);margin-left:calc((100% - 100vw)/2);overflow:hidden}
.look-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:max(36px,calc((100vw - 1440px)/2));padding:0 max(36px,calc((100vw - 1440px)/2)) 12px;scrollbar-width:none;overscroll-behavior-x:contain}
.look-track::-webkit-scrollbar{display:none}
.look-track:focus-visible{outline:1px solid #a6bfca;outline-offset:-2px}
.look-slide{flex:0 0 min(62vw,900px);margin:0;scroll-snap-align:start;min-width:0}
.look-image{display:block;position:relative;width:100%;aspect-ratio:1.55;border-radius:24px;overflow:hidden;background:#eff0f2;border:0;padding:0;cursor:zoom-in}
.look-image img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .6s}
.look-image:hover img{transform:scale(1.025)}
.look-product img{padding:30px;background:#fff;mix-blend-mode:multiply}
.look-workflow{background:#171a1d}.look-workflow img{padding:24px}
.look-result{background:#eae5db}.look-result img{object-fit:contain;padding:18px}
.look-index{position:absolute;left:24px;top:22px;font:10px var(--mono);letter-spacing:2px;color:#535b60;background:#f3f4f5d9;padding:8px 10px;border-radius:20px}
.look-expand{position:absolute;right:20px;bottom:20px;width:36px;height:36px;border:1px solid #61656a;border-radius:50%;display:grid;place-items:center;color:#53585c;background:#f3f4f5dd;font-size:20px}
.look-slide figcaption{font:500 16px/1.55 Arial,"Microsoft YaHei",sans-serif;color:#899399;max-width:94%;padding:24px 0 0;min-height:100px}
.look-slide figcaption strong{color:#e8edef;font-weight:600}
.look-controls{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:30px max(36px,calc((100vw - 1440px)/2)) 0}
.look-controls button{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#242b30;color:#e1e6e8;font:30px/1 Arial;transition:background .2s}
.look-controls button:hover:not(:disabled){background:#3a454c}.look-controls button:disabled{opacity:.3;cursor:default}
.look-position{font:11px var(--mono);letter-spacing:2px;color:#80929e;margin-right:12px}
@media(max-width:600px){.workflow-method.has-look-gallery{padding-top:36px}.look-gallery{margin-top:28px}.look-slide{flex-basis:84vw}.look-track{gap:24px;padding-left:24px;padding-right:24px;scroll-padding-left:24px}.look-image{aspect-ratio:1.1;border-radius:18px}.look-slide figcaption{font-size:13px;min-height:115px;padding-top:18px}.look-controls{padding:16px 24px 0}.look-index{left:14px;top:14px}.look-result img,.look-workflow img{padding:10px}}
@media(prefers-reduced-motion:reduce){.look-image img{transition:none}}

/* 去掉文字区域上方的间距 */
.workflow-method.has-look-gallery {
  margin-top: 0;
  padding-top: 0;
}

/* 去掉上方画布底部的间距 */
.playground-story {
  margin-bottom: 0;
}

.playground-story > .workflow-playground {
  margin-bottom: 0;
}
/* 防止首行段落的上边距折叠到画布与文字之间。 */
.workflow-method.has-look-gallery > div:first-child > .micro { margin-top: 0; }

.workflow-method.has-look-gallery h3 {
  font-family: "Songti SC", "SimSun", "STSong", serif;
  font-size: 50px;         /* 宋体通常偏小，可以稍微放大 1~2px */
  font-weight: 250;        /* 宋体用正常粗细（不要用 500/粗体）视觉更优雅 */
  line-height: 1.4;
  margin: 12px 0;
  color: #e8edef;
  letter-spacing: 1px; 
}
/* 先依次呈现文字，再从左到右呈现案例卡片。 */
.look-gallery .look-track{padding-left:var(--gallery-inset);padding-right:var(--gallery-inset);scroll-padding-left:var(--gallery-inset)}
.look-gallery .look-controls{padding-right:var(--gallery-inset)}
.js .workflow-method.look-entrance{opacity:1;translate:none;transition:none}
.js .look-entrance:not(.revealed)>div:first-child>p,
.js .look-entrance:not(.revealed)>div:first-child>h3{opacity:0;transform:translateY(18px)}
.js .look-entrance:not(.revealed) .look-slide{opacity:0;transform:translateY(32px)}
.js .look-entrance.revealed>div:first-child>p,
.js .look-entrance.revealed>div:first-child>h3{animation:look-copy-in .6s cubic-bezier(.2,.7,.3,1) var(--copy-delay,0ms) both}
.js .look-entrance.revealed .look-slide{animation:look-card-in 1.25s cubic-bezier(.22,.61,.36,1) var(--card-delay,1050ms) both}
.js .look-entrance:not(.revealed) .look-controls{opacity:0}
.js .look-entrance.revealed .look-controls{animation:look-copy-in .5s ease 1.3s both}
@keyframes look-copy-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes look-card-in{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){
 .js .workflow-method.look-entrance p,.js .workflow-method.look-entrance h3,
 .js .workflow-method.look-entrance .look-slide,.js .workflow-method.look-entrance .look-controls{animation:none;opacity:1;transform:none}
}

/* 案例图片区域统一白底，说明文字沿用页面样式。 */
.look-gallery .look-image{background:#fff}

/* 按用户提供的完整案例页展示，避免裁切页面内容。 */
.look-gallery .look-page img{object-fit:contain;padding:0}

/* 宽度保持不变，高度贴近完整案例页比例，减少上下留白。 */
.look-gallery .look-page{aspect-ratio:16 / 9}


/* 为末张卡片保留足够尾部空间，使它也能停在文字左基线。 */
.look-gallery .look-track{padding-right:calc(100vw - var(--gallery-inset) - min(62vw,900px))}
@media(max-width:600px){.look-gallery .look-track{padding-right:calc(100vw - var(--gallery-inset) - 84vw)}}


/* 简洁的圆形展开按钮与白色案例详情。 */
.look-gallery .look-expand{width:36px;height:36px;right:20px;bottom:20px;border:0;background:#1d1d1f;color:#fff;font:500 27px/1 Arial;box-shadow:0 1px 5px #0001}
.look-image:hover .look-expand{background:#353537}
#project-dialog.apple-case{width:min(1120px,calc(100vw - 80px));max-width:none;max-height:calc(100svh - 80px);margin:auto;padding:0 0 64px;border:0;border-radius:28px;background:#fff;color:#1d1d1f;box-shadow:0 24px 100px #0003;overflow:auto;scrollbar-width:thin;scrollbar-color:#ccc transparent}
#project-dialog.apple-case::backdrop{background:#0006;backdrop-filter:blur(14px)}
#project-dialog.apple-case .dialog-close{position:sticky;top:20px;width:36px;height:36px;display:block;margin:20px 20px 0 auto;padding:0;border-radius:50%;background:#1d1d1f;color:transparent;font-size:0;z-index:5}
#project-dialog.apple-case .dialog-close::after{content:'×';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:26px/1 Arial}
#project-dialog.apple-case .dialog-close:focus-visible{outline:3px solid #0071e3;outline-offset:4px}
.apple-case .dialog-content{padding:18px 72px 0}
.apple-case-heading{max-width:850px;margin:0 0 44px}
.apple-case-heading .micro{color:#555;font:600 15px/1.5 Arial,"Microsoft YaHei",sans-serif;letter-spacing:0;margin:0 0 14px}
#project-dialog .apple-case-heading h2{font:600 clamp(32px,4vw,54px)/1.16 Arial,"Microsoft YaHei",sans-serif;letter-spacing:-1.5px;margin:0 0 28px;color:#1d1d1f}
.apple-case-lead{font:400 19px/1.7 Arial,"Microsoft YaHei",sans-serif;color:#6e6e73;margin:0;max-width:800px}
.apple-case .apple-case-images{display:block;overflow:auto;border-radius:16px;background:#f5f5f7}
.apple-case .apple-case-images img{display:block;width:100%;height:auto;background:#fff;margin:0}
.apple-case .apple-case-images img.zoomed{width:160%;max-width:none}
.apple-case-notes{display:grid;grid-template-columns:1.2fr 1fr;gap:32px 48px;padding-top:42px;margin-top:8px}
.apple-case-notes h3{font:600 17px/1.5 Arial,"Microsoft YaHei",sans-serif;color:#1d1d1f;margin:0 0 10px}
.apple-case-notes p{font:400 16px/1.7 Arial,"Microsoft YaHei",sans-serif;color:#6e6e73;margin:0}
.apple-case-process{grid-column:1/-1;border-top:1px solid #e8e8ed;padding-top:26px}
@media(max-width:600px){
 #project-dialog.apple-case{width:calc(100vw - 24px);max-height:calc(100svh - 32px);border-radius:22px;padding-bottom:32px}
 .apple-case .dialog-content{padding:16px 24px 0}
 #project-dialog.apple-case .dialog-close{top:14px;margin:14px 14px 0 auto}
 #project-dialog .apple-case-heading h2{font-size:32px;letter-spacing:-.7px;margin-bottom:22px}
 .apple-case-heading{margin-bottom:28px}.apple-case-lead{font-size:16px}
 .apple-case-heading .micro{font-size:12px}
 .apple-case-notes{grid-template-columns:1fr;gap:24px;padding-top:28px}
 .apple-case-notes p{font-size:14px}.apple-case-process{grid-column:auto}
}

/* 详情轻缓淡入，避免打开时突然跳出。 */
#project-dialog.apple-case[open]{animation:apple-case-in .7s cubic-bezier(.22,.61,.36,1) both}
#project-dialog.apple-case[open]::backdrop{animation:apple-backdrop-in .7s ease both}
@keyframes apple-case-in{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes apple-backdrop-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#project-dialog.apple-case[open],#project-dialog.apple-case[open]::backdrop{animation:none}}

/* 参考图：职责与交付并排，制作路径独占下一行。 */
.apple-case-notes{width:100%;padding-left:0;padding-right:0;align-items:start}
.apple-case-notes>div{min-width:0;text-align:left}
.apple-case-process{grid-column:1 / -1}
@media(max-width:600px){
 .apple-case-notes{grid-template-columns:1.2fr 1fr;column-gap:24px;row-gap:24px}
 .apple-case-notes h3{font-size:14px}
 .apple-case-notes p{font-size:12px;line-height:1.7}
 .apple-case-process{grid-column:1 / -1}
}

/* 案例卡片与详情图片保持原尺寸，不提供图片放大。 */
.look-gallery .look-image{cursor:pointer}
.look-gallery .look-image:hover img{transform:none}
.apple-case .apple-case-images img{cursor:default}

/* 使用几何居中的矢量符号，排除字体基线造成的偏移。 */
.look-gallery .look-expand,.look-gallery .look-controls button{display:flex;align-items:center;justify-content:center;padding:0;line-height:0}
.look-gallery .look-expand svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.look-gallery .look-controls button svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* 案例与详情均向上轻缓呈现，内容进入可视区域后再播放。 */
#project-dialog.apple-case .detail-entrance{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1);transition-delay:var(--detail-delay,0ms)}
#project-dialog.apple-case .detail-entrance.detail-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){#project-dialog.apple-case .detail-entrance{opacity:1;transform:none;transition:none}}


/* Sticky scene must not live inside an overflow:hidden scroll container. */
.chapters{overflow:clip}
#graphic{max-width:none;margin:0;padding:0 4.5%;height:340vh;position:relative}
#graphic::before{display:none}
.graphic-pin{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(240px,25%) minmax(0,1fr);gap:4%;align-items:center;max-width:1800px;margin:auto}
.graphic-info{align-self:center;position:relative;z-index:2;padding:20px 0}
#graphic .chapter-heading{width:100%;margin:0 0 12px}
#graphic .chapter-heading>.micro{margin:0 0 12px;transform:none;font-size:9px;letter-spacing:2.4px}
#graphic .chapter-heading svg{width:100%;margin:0;overflow:visible}
#graphic .chapter-heading text{font-size:78px;letter-spacing:8px}
.graphic-intro{font-family:var(--serif);font-size:18px;line-height:1.9;color:#b1bec4;margin:16px 0 30px}
.graphic-index{list-style:none;padding:0;margin:0;display:grid;gap:17px}
#graphic .orbit-anchor{display:flex;align-items:center;gap:12px;font-size:12px;color:#a6b7c0;position:relative}
#graphic .orbit-dot{width:5px;height:5px;border-radius:50%;background:#b0dcf4;box-shadow:0 0 8px #81bfe9,0 0 20px #81bfe955}
#graphic .orbit-anchor small{margin-left:auto;font-size:10px;letter-spacing:2px;color:#687f8b;font-variant-numeric:tabular-nums}
.graphic-status{display:flex;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:1px;color:#7f98a6;margin-top:38px}
.graphic-progress{height:1px;background:#23313b;margin-top:12px}
.graphic-progress span{display:block;height:100%;background:#b8d9e9;transform-origin:left;transform:scaleX(0)}
.graphic-scroll-note{display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#637c8b;margin-top:18px}
.graphic-space{height:78vh;min-width:0;position:relative}
.graphic-wall{position:relative;transform-style:preserve-3d;transform-origin:center;will-change:transform}
.galaxy-slot{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform}
.galaxy-breath{height:100%;transform-style:preserve-3d;animation:galaxy-breathe var(--breath-duration) ease-in-out var(--breath-delay) infinite alternate}
@keyframes galaxy-breathe{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
.galaxy-card{display:block;position:relative;width:100%;height:100%;padding:7px;background:#0c141a;border:1px solid #758e9c33;border-radius:3px;box-shadow:0 8px 24px #0008;transform-style:preserve-3d;transition:transform .35s ease,filter .3s,box-shadow .35s,border-color .35s;cursor:pointer}
.galaxy-card img{display:block;width:100%;height:100%;object-fit:contain;background:#080e12}
.galaxy-caption{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;gap:8px;padding:22px 10px 9px;background:linear-gradient(transparent,#03080aee);color:#e5edf1;font-size:9px;opacity:0;transition:opacity .3s;pointer-events:none}
.galaxy-slot.is-active{z-index:10}
.galaxy-slot.is-active .galaxy-breath{animation-play-state:paused}
.galaxy-slot.is-active .galaxy-card{transform:rotateZ(var(--unrotate,0deg)) rotateX(var(--wall-tilt,0deg)) translateZ(75px) scale(1.1);border-color:#b3ddf4;box-shadow:0 0 20px #8ecff36b,0 18px 48px #000b}
.galaxy-slot.is-active .galaxy-caption{opacity:1}
.galaxy-slot.is-neighbor .galaxy-card{filter:brightness(.4) saturate(.65)}
.galaxy-card:focus-visible{outline:2px solid #d6edff;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.galaxy-breath{animation:none}.galaxy-card{transition:none}}

/* 参考悬浮桌面：作品独立漂浮、留出中央呼吸空间。 */
.graphic-floating-title{position:absolute;left:55%;top:46%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;white-space:nowrap;z-index:-1}
.graphic-floating-title>span{display:block;font-family:var(--serif);font-style:italic;font-size:25px;letter-spacing:2px;color:#77939f;text-align:left;margin-bottom:-8px}
.graphic-floating-title strong{display:block;font:600 clamp(45px,6.3vw,110px)/1.1 Arial,sans-serif;letter-spacing:-.065em;color:#d4dedc}
.graphic-floating-title small{display:block;font-family:var(--serif);font-size:17px;letter-spacing:6px;color:#7f969f;margin-top:20px}
.galaxy-card{padding:0;background:transparent;border-color:transparent;box-shadow:none;border-radius:0}
.galaxy-card img{background:transparent;filter:drop-shadow(0 12px 10px #0005)}
.galaxy-caption{inset:100% 0 auto;padding:9px 0 0;background:none;justify-content:center;text-align:center;font-size:14px;line-height:1.3;opacity:calc(var(--float,1)*.85);color:#b7c5ca}
.galaxy-caption>span{display:none}
.galaxy-slot.is-active .galaxy-card{border-color:transparent;box-shadow:none;filter:drop-shadow(0 0 12px #91c9ed66)}
.galaxy-slot.is-active .galaxy-caption{opacity:1}

/* 全幅悬浮 → 左侧倾斜作品墙 / 右侧介绍，全部由滚动推进。 */
#graphic{padding:0 3%;height:360vh}
.graphic-pin{display:block;max-width:1900px;isolation:isolate}
.graphic-space{position:absolute;left:0;top:10vh;width:100%;height:80vh;opacity:var(--arrival,0);}
.graphic-info{position:absolute;left:64%;right:2%;top:50%;margin-top:-310px;padding:0;opacity:0;will-change:transform,opacity;z-index:3}
#graphic .graphic-info .chapter-heading{margin-bottom:16px}
#graphic .graphic-info .chapter-heading text{font-size:82px}
.graphic-intro{font-size:24px;margin:10px 0 28px}
.graphic-index{gap:13px}
.graphic-status{margin-top:25px}
.graphic-floating-title{left:52%;top:46%;z-index:0}
.galaxy-slot{z-index:1}
.galaxy-breath{animation-play-state:paused}
.graphic-is-visible .galaxy-breath{animation-play-state:running}
.galaxy-slot.is-active .galaxy-breath{animation-play-state:paused}
.galaxy-slot.is-active .galaxy-card{transform:rotateZ(var(--unrotate,0deg)) rotateZ(var(--wall-z,0deg)) rotateY(var(--wall-y,0deg)) rotateX(var(--wall-tilt,0deg)) translateZ(75px) scale(1.1)}
.graphic-wall-ready .galaxy-card{background:#b9c8ce0b;border-radius:5px}
.graphic-wall-ready .galaxy-card img{border-radius:5px}

.graphic-wall{pointer-events:none}
.galaxy-card{pointer-events:auto}

/* 散布与倾斜同步完成，缩短过渡滚动距离。 */
#graphic{height:280vh}

/* 2026-11-05：按用户 Photoshop 构图还原位置与实际图像尺寸。 */
.graphic-space{top:4vh;height:92vh}
.graphic-floating-title{left:51.4%;top:47.6%}
.galaxy-card[data-image="graphic-cf-banner"] .galaxy-caption,
.galaxy-card[data-image="graphic-mc-banner"] .galaxy-caption,
.galaxy-card[data-image="graphic-food-truck"] .galaxy-caption{display:none}

.graphic-floating-title strong{font-size:clamp(42px,4.5vw,82px)}
.graphic-floating-title>span{font-size:20px}
.graphic-floating-title small{font-size:11px;letter-spacing:5px;margin-top:18px}

.galaxy-caption{font-size:var(--caption-size,12px)}

/* Full viewport canvas: no max-width mismatch on wide displays. */
#graphic{width:100%;padding:0;max-width:none}
.graphic-pin{width:100%;max-width:none;margin:0}
.graphic-space{left:0;top:0;width:100%;height:100vh}
.graphic-floating-title{left:51.4%;top:47.6%}
.graphic-info{left:64%;right:4%}
.galaxy-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.galaxy-slot.is-active .galaxy-card{transform:translate(-50%,-50%) rotateZ(var(--unrotate,0deg)) rotateZ(var(--wall-z,0deg)) rotateY(var(--wall-y,0deg)) rotateX(var(--wall-tilt,0deg)) translateZ(75px) scale(1.1)}

.galaxy-caption{left:50%;right:auto;width:max-content;max-width:220%;transform:translateX(-50%);white-space:nowrap}

/* Dense natural-aspect masonry wall. Lift cards in the same plane instead of counter-rotating. */
.galaxy-slot.is-active .galaxy-card,.galaxy-slot.is-selected .galaxy-card{
 transform:translate(-50%,-50%) translateZ(48px) scale(1.06);
 filter:drop-shadow(0 6px 16px #91c9ed66);
}
.galaxy-slot.is-selected{z-index:12}
.galaxy-slot.is-selected .galaxy-breath{animation-play-state:paused}
.galaxy-slot.is-selected .galaxy-caption{opacity:1}
.graphic-wall-ready .galaxy-card{background:transparent}

/* Small full-artwork tiles, four continuous rows alternating direction. */
.graphic-rows{position:absolute;inset:0;transform-style:preserve-3d;opacity:0;pointer-events:none}
.graphic-row-track{position:absolute;display:flex;gap:var(--row-gap);transform-style:preserve-3d;animation:graphic-row-left 32s linear infinite;animation-play-state:paused;will-change:transform}
.graphic-row-track[data-direction="right"]{animation-name:graphic-row-right}
.graphic-rows.is-running .graphic-row-track{animation-play-state:running}
.graphic-rows:has(.row-card:hover) .graphic-row-track,.graphic-rows:has(.row-card:focus-visible) .graphic-row-track,.graphic-rows.has-selected .graphic-row-track{animation-play-state:paused}
@keyframes graphic-row-left{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--cycle)))}}
@keyframes graphic-row-right{from{transform:translateX(calc(-1 * var(--cycle)))}to{transform:translateX(0)}}
.row-card{flex:none;position:relative;padding:5px;border:1px solid #a8c3d126;border-radius:5px;background:#111c22;transform-style:preserve-3d;cursor:pointer;transition:transform .3s,filter .3s,box-shadow .3s;pointer-events:auto}
.row-card img{width:100%;height:100%;display:block;object-fit:contain;border-radius:2px}
.row-card .galaxy-caption{display:none}
.row-card:hover,.row-card:focus-visible,.row-card.is-selected{transform:translateZ(38px) scale(1.07);box-shadow:0 0 20px #92d0ec77;z-index:2;filter:brightness(1.12)}
@media(prefers-reduced-motion:reduce){.graphic-row-track{animation:none}}

.graphic-rows .row-card{pointer-events:none}
.graphic-rows.is-interactive .row-card{pointer-events:auto}

/* Equal image heights with native widths; repeated rows cover every edge. */
.row-card{padding:0;border:0;background:transparent;border-radius:3px;box-shadow:none}
.row-card img{width:100%;height:100%;object-fit:contain;border-radius:3px}

/* Direct half-screen carousel and animated editorial introduction. */
#graphic{height:140vh}
.graphic-info{left:64%;right:4%;top:50%;margin-top:0;translate:0 -50%}
#graphic .graphic-info .chapter-heading .graphic-english{height:auto;margin-bottom:2px}
#graphic .graphic-info .chapter-heading .graphic-english text{font:500 19px Arial,sans-serif;letter-spacing:6px;fill:#b7c9d1}
.graphic-intro{font-size:clamp(25px,2.2vw,38px);line-height:1.6;color:#e2e8e7;margin:10px 0 28px}
.graphic-intro>span{display:block;margin-top:20px;font-family:var(--sans,Arial,sans-serif);font-size:clamp(16px,1.12vw,20px);line-height:1.9;color:#aabac2}
#graphic .orbit-anchor{font-size:clamp(14px,1vw,17px)}
.graphic-index{gap:14px}
.graphic-info>.chapter-heading,.graphic-info>.graphic-intro,.graphic-info>.graphic-index{opacity:0;transform:translateY(26px);filter:blur(5px)}
.graphic-copy-visible .graphic-info>.chapter-heading{animation:graphic-copy-in .9s .12s both}
.graphic-copy-visible .graphic-info>.graphic-intro{animation:graphic-copy-in .9s .3s both}
.graphic-copy-visible .graphic-info>.graphic-index{animation:graphic-copy-in .9s .48s both}
@keyframes graphic-copy-in{to{opacity:1;transform:translateY(0);filter:blur(0)}}

.graphic-rows.has-selected .row-card.is-selected{filter:none;z-index:3}
@media(prefers-reduced-motion:reduce){.graphic-copy-visible .graphic-info>*{animation:none;opacity:1;transform:none;filter:none}}

#graphic .graphic-info .chapter-heading>svg:not(.graphic-english){height:clamp(120px,18vh,160px)}
#graphic .graphic-info .chapter-heading>.graphic-english{height:clamp(45px,7vh,65px)}

/* Preserve the floating opening and scroll directly into the half-screen wall. */
#graphic{height:280vh}

/* Hover isolates a work through opacity while retaining its original colors. */
.row-card{transition:transform .3s,filter .3s,box-shadow .3s,opacity .3s}
.graphic-rows:has(.row-card:hover) .row-card:not(:hover),
.graphic-rows:has(.row-card:focus-visible) .row-card:not(:focus-visible){opacity:.24}
#graphic .graphic-info .chapter-heading>.graphic-english{overflow:visible}
#graphic .graphic-info .chapter-heading .graphic-english text{font-size:18px;letter-spacing:4px}
.graphic-info>.chapter-heading{opacity:1;transform:none;filter:none}
.graphic-copy-visible .graphic-info>.chapter-heading{animation:none}
.graphic-info>.graphic-intro,.graphic-info>.graphic-index{opacity:1;transform:none;filter:none}
.graphic-copy-visible .graphic-info>.graphic-intro,.graphic-copy-visible .graphic-info>.graphic-index{animation:none}
.graphic-intro>.graphic-lead-line{display:block;overflow:hidden;margin:0;font:inherit;color:inherit;line-height:1.6}
.graphic-lead-line b{display:block;font-weight:400;opacity:0;transform:translateY(110%) rotate(3deg);transform-origin:left}
.graphic-copy-visible .graphic-lead-line b{animation:graphic-line-in .95s cubic-bezier(.16,1,.3,1) .12s both}
.graphic-copy-visible .graphic-lead-line:nth-child(2) b{animation-delay:.27s}
.graphic-intro>.graphic-description{margin-top:20px}
.graphic-description>span{display:block;opacity:0;filter:blur(5px);transform:translateY(15px)}
.graphic-copy-visible .graphic-description>span{animation:graphic-copy-in .85s .42s both}
.graphic-copy-visible .graphic-description>span:nth-child(2){animation-delay:.56s}
.graphic-index>.orbit-anchor{opacity:0;transform:translateX(20px)}
.graphic-copy-visible .graphic-index>.orbit-anchor{animation:graphic-item-in .7s var(--item-delay) both}
@keyframes graphic-line-in{to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes graphic-item-in{to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.graphic-lead-line b,.graphic-description>span,.graphic-index>.orbit-anchor{animation:none!important;opacity:1;transform:none;filter:none}}

/* Shorten the trailing hold without changing scroll-to-gather or loop speed. */
#graphic{height:250vh}
.graphic-floating-title strong{font-size:clamp(52px,5.5vw,98px)}
.graphic-floating-title>span{font-size:clamp(22px,1.8vw,30px)}
.graphic-floating-title small{font-size:clamp(17px,1.35vw,23px);letter-spacing:4px}
.graphic-floating-title small>span{display:inline-block;opacity:0;clip-path:inset(0 100% 0 0)}
.graphic-entered .graphic-floating-title small>span{animation:graphic-write-char .4s ease var(--char-delay) both}
.graphic-ink-line{display:block;width:85%;height:16px;margin:8px auto 0;overflow:visible}
.graphic-ink-line path{fill:none;stroke:#9cb7c6;stroke-width:1.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.graphic-entered .graphic-ink-line path{animation:graphic-ink-draw .9s 1.3s both}
.graphic-floating-title>span,.graphic-floating-title strong{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(12px)}
.graphic-entered .graphic-floating-title>span{animation:graphic-title-write 1s .1s both}
.graphic-entered .graphic-floating-title strong{animation:graphic-title-write 1.15s .25s both}
.galaxy-slot .galaxy-card img{opacity:0;transform:translateY(25px) scale(.88);filter:blur(7px)}
.graphic-entered .galaxy-slot .galaxy-card img{animation:graphic-art-enter 1.1s cubic-bezier(.16,1,.3,1) var(--entrance-delay) both}
@keyframes graphic-art-enter{to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes graphic-write-char{to{opacity:1;clip-path:inset(0)}}
@keyframes graphic-title-write{to{opacity:1;clip-path:inset(0);transform:translateY(0)}}
@keyframes graphic-ink-draw{to{stroke-dashoffset:0}}
.graphic-intro>.graphic-description,#graphic .orbit-anchor{font-family:var(--serif);font-size:clamp(18px,1.25vw,22px)}
@media(prefers-reduced-motion:reduce){.galaxy-slot .galaxy-card img,.graphic-floating-title>span,.graphic-floating-title strong,.graphic-floating-title small>span{animation:none!important;opacity:1;transform:none;filter:none;clip-path:none}.graphic-ink-line path{animation:none!important;stroke-dashoffset:0}}

.graphic-floating-title small{text-align:right;margin-top:12px;margin-right:0;letter-spacing:3px}

/* Tight subtitle spacing matching the supplied DESIGN reference. */
.graphic-floating-title small{margin-top:0;line-height:1.2;text-align:right}

.graphic-floating-title strong{line-height:1}
.graphic-floating-title small{margin-top:0;padding-top:0}

/* Match the workflow paragraph typeface shown in the reference. */
.graphic-intro>.graphic-description,#graphic .orbit-anchor{font-family:Arial,"Microsoft YaHei",sans-serif;font-weight:400}

/* Contain rotated artwork within its sticky panel before the motion chapter. */
.graphic-pin{overflow:clip}
#motion{padding-top:120px}

/* Unified about layout and staggered entrance. */
.experience{padding-bottom:30px}
.experience-head{display:block;margin-bottom:28px}
.experience-head h2{margin:14px 0 22px}
.experience-intro{max-width:940px;margin:0 0 8px;font-size:13px;line-height:1.9;color:#a9b7c0}
.experience-connect{scroll-margin-top:110px}
.experience-connect .footer-facts{margin:0 0 10px;line-height:1.8}
.experience-links{display:flex;flex-wrap:wrap;gap:10px 12px}
.experience-links a{display:inline-flex;align-items:center;min-height:30px;padding:5px 15px;border:1px solid #40545f;border-radius:30px;font-size:12px;letter-spacing:.5px;color:#b1c1cc;transition:background .25s,border-color .25s,color .25s}
.experience-links a:hover{background:#14232b;border-color:#94b5c7;color:#fff}
.experience-contact{max-width:1280px;margin:28px auto 0;padding:0;border-top:0}
.experience-contact .footer-bottom{padding-top:22px}
.experience-contact .footer-bottom>a{text-align:center}
.js .experience-head{transition:none;translate:none}
.js .experience-head:not(.revealed)>*{opacity:0;transform:translateY(22px)}
.js .experience-head.revealed>*{animation:about-enter .8s cubic-bezier(.22,.61,.36,1) both}
.experience-head>*:nth-child(2){animation-delay:100ms!important}
.experience-head>*:nth-child(3){animation-delay:220ms!important}
.experience-head>*:nth-child(4){animation-delay:340ms!important}
.experience-item{--reveal-duration:850ms}
.experience-item:nth-child(2){--reveal-delay:100ms}
.experience-item:nth-child(3){--reveal-delay:200ms}
.experience-item:nth-child(4){--reveal-delay:300ms}
.js .capability-list.revealed>div{animation:about-enter .75s cubic-bezier(.22,.61,.36,1) both}
.capability-list>div:nth-of-type(2){animation-delay:100ms!important}
.capability-list>div:nth-of-type(3){animation-delay:200ms!important}
.capability-list>div:nth-of-type(4){animation-delay:300ms!important}
@keyframes about-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){
 .experience{padding-bottom:24px}
 .experience-intro{font-size:12px}
 .experience-connect .footer-facts{font-size:10px;letter-spacing:.5px}
 .experience-links{gap:8px}
 .experience-links a{font-size:11px;padding:5px 12px}
 .experience-contact{margin-top:24px;padding:0}
}
@media(prefers-reduced-motion:reduce){
 .js .experience-head>* , .js .capability-list>div{animation:none!important;opacity:1!important;transform:none!important}
}

/* Results attach directly to the experience grid, matching the layout reference. */
.experience-head{margin-bottom:60px}
.experience-list .experience-item:last-child{border-bottom:0}
.experience .stats-final{max-width:1280px;margin:0 auto;padding:0;border:0;background:none}
.stats-final .stats-row{margin:0;max-width:none;border-top:1px solid #2b3a44}
.stats-final .stat{padding:24px 20px 18px}
.stats-final+.experience-contact{margin-top:0;padding:0}
.stats-final+.experience-contact .footer-bottom{padding-top:22px}
@media(max-width:900px){
 .experience .stats-final{margin-top:28px}
}
@media(max-width:600px){
 .experience-head{margin-bottom:36px}
 .stats-final .stat{padding:20px 12px 16px}
 .stats-final+.experience-contact{margin-top:0;padding:0}
}

/* Tighten the transition into About and the gap below contact links. */
#motion{padding-bottom:0}
#motion>:last-child{margin-bottom:0}
#about{border-top:1px solid #2b3a44;margin-top:0;padding-top:56px}
#about .experience-head{margin-top:0;margin-bottom:24px}
#about .experience-head>.micro{margin-top:0}
@media(max-width:600px){
 #about{padding-top:36px}
 #about .experience-head{margin-bottom:20px}
}

/* Closing credits must remain visible at the document's scroll limit. */
.experience-contact .footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;border-top:1px solid #35434c;color:#a5b0b8}
.experience-contact .footer-bottom>span:last-child{text-align:right}

/* Resume-backed highlights in the 30-second overview. */
.quick-results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:0 0 26px;border-top:1px solid #2b3a44;border-bottom:1px solid #2b3a44}
.quick-results li{padding:16px 12px;border-right:1px solid #2b3a44;min-width:0}
.quick-results li:first-child{padding-left:0}
.quick-results li:last-child{border-right:0}
.quick-results strong{display:block;font:500 clamp(19px,2.4vw,28px) var(--mono);color:#eef4f7}
.quick-results span{display:block;margin-top:8px;font-size:10px;line-height:1.7;color:#91a8b6}
.quick-exp small{display:block;margin-top:3px;font-size:10px;line-height:1.7;color:#8498a5}
.quick-top .quick-value{margin-bottom:22px}
@media(max-width:600px){
 .quick-role{font-size:11px;letter-spacing:1px;line-height:1.9}
 .quick-results{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:20px}
 .quick-results li:nth-child(2n){border-right:0}
 .quick-results li:nth-child(n+3){border-top:1px solid #2b3a44}
 .quick-results li:nth-child(3){padding-left:0}
 .quick-actions-mobile{margin-bottom:24px}
}

/* Right-aligned navigation enters on the second screen and stays off the cover. */
.navigation{justify-content:flex-end;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s}
.navigation .nav-tools{margin-left:auto}
.navigation .nav-actions{width:auto;height:auto}
.navigation nav{position:static;opacity:1;align-items:center;gap:28px;white-space:nowrap}
.navigation.nav-visible{opacity:1;visibility:visible;pointer-events:auto}
.navigation:not(.nav-visible) nav a{opacity:0;transform:translateY(-14px)}
.navigation.nav-visible nav a{animation:nav-link-enter .65s cubic-bezier(.22,.61,.36,1) both}
.navigation.nav-visible nav a:nth-child(2){animation-delay:100ms}
.navigation.nav-visible nav a:nth-child(3){animation-delay:200ms}
.opening-intro .navigation:not(.nav-visible){opacity:0;visibility:hidden;pointer-events:none}
@keyframes nav-link-enter{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.navigation nav{gap:18px}}
@media(prefers-reduced-motion:reduce){.navigation{transition:none}.navigation.nav-visible nav a{animation:none}}

/* AI film gallery: cinematic cards with room for the next frame. */
#motion{max-width:none;padding-left:0;padding-right:0;padding-bottom:64px}
#motion .chapter-heading{max-width:1280px;margin-left:auto;margin-right:auto;width:88%}
.motion-gallery{width:100%;overflow:hidden}
.motion-track{display:flex;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:6%;padding:0 6% 8px;scrollbar-width:none}
.motion-track::-webkit-scrollbar{display:none}
.motion-card{flex:0 0 min(66vw,920px);min-width:0;margin:0;scroll-snap-align:start}
.motion-media{position:relative;aspect-ratio:16/10;isolation:isolate;overflow:hidden;border-radius:24px;background:#101820}
.motion-media::before{content:'';position:absolute;inset:-30px;z-index:-1;background-image:var(--motion-poster);background-size:cover;background-position:center;filter:blur(28px) brightness(.35)}
.motion-media video{display:block;width:100%;height:100%;object-fit:contain}
.motion-watch{position:absolute;inset:0;width:100%;text-align:left}
.motion-watch span{position:absolute;left:24px;top:24px;padding:8px 13px;border:1px solid #ffffff40;border-radius:24px;background:#0005;backdrop-filter:blur(12px);font-size:11px;letter-spacing:1px;color:#fff;opacity:0;transition:opacity .25s}
.motion-media:hover .motion-watch span,.motion-watch:focus-visible span{opacity:1}
.motion-duration{position:absolute;bottom:23px;left:24px;pointer-events:none;color:#fff;font:11px var(--mono);text-shadow:0 1px 8px #000}
.motion-preview{position:absolute;right:20px;bottom:18px;display:grid;place-items:center;width:40px;height:40px;border:2px solid #ffffffb3;border-radius:50%;background:#0005;backdrop-filter:blur(12px);color:#fff;font-size:18px;transition:background .2s}
.motion-preview:hover{background:#000b}
.motion-card figcaption{max-width:760px;margin:22px 0 0;font-size:15px;line-height:1.7;color:#8598a5}
.motion-card figcaption strong{font-weight:600;color:#e6e8e4;margin-right:.4em}
.motion-gallery-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:32px 6% 0}
.motion-gallery-bottom>p{font-size:12px;color:#8598a5;letter-spacing:1px}
.motion-controls{display:flex;align-items:center;gap:12px}
.motion-count{font:10px var(--mono);color:#91a8b6;margin-right:14px;white-space:nowrap}
.motion-controls button{display:grid;place-items:center;width:38px;height:38px;background:#24313a;border-radius:50%;color:#dae4eb;font:28px/1 sans-serif}
.motion-controls button:disabled{opacity:.3;cursor:default}
#motion-player{width:min(1200px,94vw);max-height:94svh;padding:18px;background:#080d11;color:#e6e8e4;border:1px solid #35434c;border-radius:16px;overflow:auto}
#motion-player::backdrop{background:#000e;backdrop-filter:blur(14px)}
.motion-player-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px}
.motion-player-head h2{margin:0;font-size:16px;font-weight:500}
.motion-player-head button{padding:8px 12px;font-size:12px;color:#c4d1da}
#motion-player>video{display:block;width:100%;max-height:76svh;background:#000}
.motion-player-error{font-size:13px;color:#b6c4ce}
.motion-player-error a{text-decoration:underline}
@media(max-width:600px){
 #motion{padding-bottom:36px}
 .motion-track{gap:16px}
 .motion-card{flex-basis:86vw}
 .motion-media{border-radius:18px;aspect-ratio:4/3}
 .motion-card figcaption{font-size:13px;margin-top:16px}
 .motion-gallery-bottom{margin-top:24px;gap:12px}
 .motion-gallery-bottom>p{max-width:130px;font-size:11px;line-height:1.8}
 .motion-controls{gap:8px}
 .motion-count{margin-right:4px}
 .motion-watch span{opacity:1;left:16px;top:16px;font-size:10px}
 .motion-duration{left:16px}
 .motion-preview{right:14px;bottom:14px}
}

/* Equal-height, native-ratio frames and geometric player controls. */
#motion{--film-height:clamp(280px,38vw,560px);--film-inset:max(6%,calc((100% - 1280px)/2))}
#motion .motion-track{padding-left:var(--film-inset);padding-right:var(--film-inset);scroll-padding-left:var(--film-inset);position:relative}
.motion-card{flex:0 0 auto;width:calc(var(--film-height) * var(--film-ratio))}
.motion-media{height:var(--film-height);aspect-ratio:auto;border:0;box-shadow:none;background:#080d11}
.motion-media::before{display:none}
.motion-media video{width:100%;height:100%;object-fit:cover;border:0;box-shadow:none}
.motion-preview{display:flex;align-items:center;justify-content:center;padding:0;width:40px;height:40px;border:2px solid #fff;background:#0004;line-height:0;backdrop-filter:none}
.motion-preview svg{display:block;flex:none;width:24px;height:24px;fill:currentColor}
.motion-preview .preview-pause{display:none}
.motion-preview[aria-pressed="true"] .preview-play{display:none}
.motion-preview[aria-pressed="true"] .preview-pause{display:block}
.motion-controls button{display:flex;align-items:center;justify-content:center;padding:0;line-height:0}
.motion-controls button svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.motion-card figcaption{max-width:100%}
@media(max-width:600px){#motion{--film-height:clamp(220px,54vw,320px)}}

.motion-gallery-bottom{justify-content:flex-end}

/* The full player is only the rounded film, without an extra panel. */
#motion-player{width:fit-content;max-width:94vw;max-height:90svh;padding:0;border:0;border-radius:20px;background:transparent;overflow:hidden;outline:none;box-shadow:none}
#motion-player>video{display:block;width:auto;height:auto;max-width:min(1200px,94vw);max-height:90svh;border-radius:20px;background:#000}