/* ============================================================
   Phos · Background study
   预览专用覆盖样式，不参与线上站点。
   方向：暖石墨 + 骨白 + 香槟沙（冷色方案已废弃）
   ============================================================ */

/* ------------------------------------------------------------
   A. 暖石墨 / 骨白
   取色逻辑：暗部不用纯黑，亮部不用纯白。
   所有中性色都带一点暖，和品牌金 C9A876 同温。
   ------------------------------------------------------------ */
html[data-theme="warm"]{
  --ink:#1C1915;
  --ink-80:rgba(28,25,21,.86);
  --ink-64:rgba(28,25,21,.74);
  --ink-48:rgba(28,25,21,.66);
  --light:#F7F2E9;
  --black:#13110E;
  --w-80:rgba(247,242,233,.84);
  --w-56:rgba(247,242,233,.60);
  --w-32:rgba(247,242,233,.34);
  --gold:#C9A876;
  --gold-hi:#DDC094;
  --gold-glow:#E6CDA4;
  --gold-ink:#6F5832;
  --shadow:0 3px 30px rgba(40,30,18,.14);
  --shadow-lg:0 40px 100px -20px rgba(10,8,6,.55),0 0 0 1px rgba(255,255,255,.06);
  --paper:#FDFBF7;
  --bone:#F7F2E9;
  --stone:#F1EADD;
  --sand:#E7DED0;
  --line-l:rgba(111,88,50,.13);
  --line-d:rgba(255,255,255,.07);
}

html[data-theme="warm"] body{background:var(--paper)}
html[data-theme="warm"] .dark{
  background:var(--black);color:#F7F2E9;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="warm"] .light{
  background:var(--bone);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38);
}

/* 每一段一个色阶：0B → 13 → 骨白 → 1A → 纸白 → 1E → 骨白 → 沙 */
html[data-theme="warm"] .hero.dark{
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(201,168,118,.10), transparent 62%),
    linear-gradient(180deg,#0D0B09 0%,#090807 100%);
  box-shadow:none;
}
html[data-theme="warm"] #studio.dark{
  background:
    radial-gradient(900px 540px at 50% 0%, rgba(201,168,118,.065), transparent 68%),
    #13110E;
}
html[data-theme="warm"] #gallery.light{
  background:linear-gradient(180deg,#F9F4EB 0%,#F4EEE2 100%);
}
html[data-theme="warm"] #design.dark{
  background:
    radial-gradient(1100px 620px at 50% 0%, rgba(201,168,118,.085), transparent 68%),
    #1A1714;
}
html[data-theme="warm"] #features.light{
  background:linear-gradient(180deg,#FEFCF8 0%,#FBF7EF 100%);
}
html[data-theme="warm"] #install.dark{
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(201,168,118,.06), transparent 72%),
    #1E1A15;
}
html[data-theme="warm"] #faq.light{
  background:linear-gradient(180deg,#F8F3EA 0%,#F5EFE4 100%);
}
html[data-theme="warm"] .dl.light{
  background:
    radial-gradient(900px 480px at 50% 0%, rgba(255,255,255,.22), transparent 62%),
    linear-gradient(180deg,#E8DFCF 0%,#E0D6C4 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}

html[data-theme="warm"] footer{background:#080706}


/* 演示面板自带大阴影，而 .demo-intro 原本没有下内边距，
   阴影会漏到下一段骨白背景上。补一段留白，让两段干净地换气。 */
html[data-theme="warm"] #studio.dark{padding-bottom:120px}
/* 原生导航条也跟着变暖 */
html[data-theme="warm"] .nav{background:rgba(12,10,8,.74)}
html[data-theme="warm"] .nav.scrolled{
  background:rgba(12,10,8,.90);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="warm"] .nav .links a:hover,
html[data-theme="warm"] .nav .act a:hover,
html[data-theme="warm"] .nav .lang:hover{color:#FFF8EC}

/* 首屏：暖白光晕 + 米白标题 */
html[data-theme="warm"] .hero::after{
  background:radial-gradient(circle,rgba(201,168,118,.15),transparent 62%);
}
html[data-theme="warm"] .hero h1{
  background:linear-gradient(180deg,#FFF9ED 18%,rgba(247,242,233,.60) 100%);
  -webkit-background-clip:text;background-clip:text;
}
html[data-theme="warm"] .stat b{color:#FBF6EC}
html[data-theme="warm"] ::selection{background:rgba(201,168,118,.32);color:#231C12}

/* 卡片：纸白 + 暖阴影，不再用纯白 + 冷黑投影 */
html[data-theme="warm"] .tile,
html[data-theme="warm"] .feat{
  background:#FFFDF9;
  border:1px solid rgba(111,88,50,.08);
  box-shadow:0 1px 2px rgba(46,33,18,.035),0 22px 44px -34px rgba(46,33,18,.28);
}
html[data-theme="warm"] .dark .tile{
  background:#201C17;
  border-color:rgba(255,255,255,.065);
  box-shadow:none;
}
html[data-theme="warm"] .tile:hover,
html[data-theme="warm"] .feat:hover{
  box-shadow:0 18px 44px -26px rgba(46,33,18,.30);
}
html[data-theme="warm"] .dark .tile:hover{box-shadow:0 14px 44px rgba(0,0,0,.5)}

/* FAQ 卡片 */
html[data-theme="warm"] .faq details{
  background:#FFFDF9;
  border-color:rgba(111,88,50,.14);
}
html[data-theme="warm"] .faq details:hover{border-color:rgba(201,168,118,.50)}
html[data-theme="warm"] .faq details[open]{
  border-color:rgba(201,168,118,.60);
  box-shadow:0 10px 28px -20px rgba(46,33,18,.35);
}

/* 下载区：香槟沙，和上面的骨白 FAQ 明确分开 */
html[data-theme="warm"] .channels li{border-color:rgba(111,88,50,.16)}
html[data-theme="warm"] .channels li:last-child{border-bottom-color:rgba(111,88,50,.16)}
html[data-theme="warm"] .channels code{background:rgba(111,88,50,.09)}
html[data-theme="warm"] .btn-outline-l:hover{background:rgba(111,88,50,.06)}

/* 演示面板、解剖图：暖石墨，避免和纯黑撞在一起 */
html[data-theme="warm"] .demo{
  background:#181512;
  box-shadow:0 40px 100px -20px rgba(10,8,6,.60),0 0 0 1px rgba(255,255,255,.06);
}
html[data-theme="warm"] .panel{
  background:#1B1714;
  border-left-color:rgba(255,255,255,.06);
}
html[data-theme="warm"] .panel .tabs{border-bottom-color:rgba(255,255,255,.06)}
html[data-theme="warm"] .stage{background:#0C0A08}
html[data-theme="warm"] .anatomy{
  background:#1D1914;
  border-color:rgba(255,255,255,.06);
}
html[data-theme="warm"] .install-shots .shot{
  box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.07);
}

/* 本地 AI：在纸白 Features 里挖一个石色调的实验区 */
.ai-zone{
  position:relative;
  margin:72px -24px 0;
  padding:56px 24px 40px;
  border-radius:28px;
  overflow:hidden;
}
.ai-zone #ai{margin-top:0 !important}
.ai-zone .feats{margin-top:44px}
html[data-theme="warm"] .ai-zone{
  background:
    radial-gradient(760px 320px at 50% 0%, rgba(255,255,255,.62), transparent 72%),
    linear-gradient(180deg,#F2EBDE 0%,#EDE3D2 100%);
  border:1px solid rgba(111,88,50,.17);
  box-shadow:0 30px 60px -50px rgba(46,33,18,.42);
}
html[data-theme="warm"] .ai-zone::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}

@media (max-width:600px){
  .ai-zone{margin:56px -20px 0;padding:36px 20px 28px;border-radius:20px}
}

/* ------------------------------------------------------------
   B. 冷石墨 / 云灰
   更接近 Apple 官网的 #000 / #f5f5f7 / #fff，
   只把原来融在一起的两段拉开半档。
   ------------------------------------------------------------ */
/* 锚点跳转时给吸顶导航留出高度（含 AI 小节的实验区面板） */
section[id], #ai-model, #windows{scroll-margin-top:64px}
#ai{scroll-margin-top:120px}

/* ------------------------------------------------------------
   预览工具条（只在预览页出现）
   ------------------------------------------------------------ */
.theme-dock{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
  z-index:300;display:flex;align-items:center;gap:14px;
  padding:9px 10px 9px 16px;border-radius:980px;
  background:rgba(16,15,14,.86);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.70);
  color:#F7F2E9;font-size:12px;letter-spacing:-.01em;
}
.theme-dock .tdot{
  width:6px;height:6px;border-radius:50%;background:#C9A876;flex:none;
  box-shadow:0 0 0 4px rgba(201,168,118,.12);
}
.theme-dock .tlabel{color:rgba(247,242,233,.55);white-space:nowrap}
.theme-dock .tbtns{
  display:flex;gap:3px;padding:3px;border-radius:980px;background:rgba(255,255,255,.06);
}
.theme-dock button{
  appearance:none;border:0;background:transparent;color:rgba(247,242,233,.66);
  font:inherit;font-size:11.5px;line-height:1;padding:6px 12px;border-radius:980px;
  cursor:pointer;white-space:nowrap;transition:background-color .2s ease,color .2s ease;
}
.theme-dock button:hover{color:#fff}
.theme-dock button[aria-pressed="true"]{background:#C9A876;color:#17120C}
.theme-dock .tlink{
  color:#E6CDA4;text-decoration:none;white-space:nowrap;padding:5px 9px;border-radius:8px;
  transition:background-color .2s ease,color .2s ease;
}
.theme-dock .tlink:hover{background:rgba(255,255,255,.08);color:#fff}
@media (max-width:680px){
  .theme-dock{
    width:calc(100% - 24px);justify-content:space-between;gap:8px;
    padding:8px 10px;bottom:12px;border-radius:18px;
  }
  .theme-dock .tlabel{display:none}
  .theme-dock button{font-size:11px;padding:7px 6px}
  .theme-dock .tlink{font-size:11px;padding:4px 6px}
}

/* ------------------------------------------------------------
   段落卡片化
   参考 .ai-zone 的做法：28px 圆角 + 1px 描边 + 下沉阴影 + 顶部内高光。
   每段变成独立卡片后，桌面底色从缝里露出来，
   亮↔暗之间不再有「一条硬边」，也就不需要渐隐了。
   ------------------------------------------------------------ */
html[data-theme="warm"] body{background:#EFE7DA}

html[data-theme="warm"] header.hero,
html[data-theme="warm"] main > section,
html[data-theme="warm"] footer{
  position:relative;
  margin:0 24px 20px;
  border-radius:28px;
  /* 不用 overflow:hidden：圆角本来就会裁背景，
     而 overflow 裁剪会让 sticky 掉出合成线程，快速滚动时钉不住。 */
  overflow:visible;
}
html[data-theme="warm"] header.hero{margin-top:0}

/* 亮卡 */
html[data-theme="warm"] #gallery,
html[data-theme="warm"] #features,
html[data-theme="warm"] #faq,
html[data-theme="warm"] main > section.dl.light{
  border:1px solid rgba(111,88,50,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
/* 暗卡 */
html[data-theme="warm"] header.hero,
html[data-theme="warm"] #studio,
html[data-theme="warm"] #design,
html[data-theme="warm"] #install{
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 40px 80px -60px rgba(0,0,0,.85),
             inset 0 1px 0 rgba(255,255,255,.10);
}
/* 页脚 */
html[data-theme="warm"] footer{
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 80px -60px rgba(0,0,0,.85),
             inset 0 1px 0 rgba(255,255,255,.08);
}
/* 卡片里再套卡片时，内圆角要收一档，否则像双边框 */
html[data-theme="warm"] .ai-zone{border-radius:20px}

@media (max-width:720px){
  html[data-theme="warm"] header.hero,
  html[data-theme="warm"] main > section,
  html[data-theme="warm"] footer{
    margin:0 12px 14px;
    border-radius:20px;
  }
  html[data-theme="warm"] header.hero{margin-top:0}
  html[data-theme="warm"] .ai-zone{border-radius:16px}
}

/* ------------------------------------------------------------
   首屏全屏进入 → 下滑才浮出上栏与圆角
   默认（无 JS）就是卡片态，不会出现「导航消失但页面没动」的坏状态。
   <html class="is-top"> 在标记里直接写死，避免加载瞬间闪一下卡片边。
   ------------------------------------------------------------ */
html[data-theme="warm"] .nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;
  transform:translateY(0);
  transition:transform .5s cubic-bezier(.16,1,.3,1),
             background-color .35s ease,box-shadow .35s ease;
}
html.is-top .nav{transform:translateY(-100%)}
html[data-theme="warm"] .nav.scrolled{
  /* 不用 backdrop-filter：它要求每帧重新采样背后的画面，
     桌面大窗口下是最大的一笔绘制开销，快速滚动时会让下面的卡片露出来。 */
  background:rgba(12,10,8,.92);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
/* hero：顶部贴边，滚过 24px 才收成圆角卡片 */
html[data-theme="warm"] header.hero{
  transition:margin .5s cubic-bezier(.16,1,.3,1),
             border-radius .5s cubic-bezier(.16,1,.3,1);
}
html.is-top header.hero{
  margin:0 !important;
  border:0;
  border-radius:0;
  box-shadow:none;
}

@media (prefers-reduced-motion:reduce){
  html[data-theme="warm"] .nav,
  html[data-theme="warm"] header.hero{transition:none}
}

/* ------------------------------------------------------------
   整页堆叠：每一段都是一张钉住的卡片
   短的段落在顶边钉住；比视口高的段落等滚到底、底边对齐后再钉住
   （top 由脚本按 min(0, vh - 段高) 算），随后下一段从底部浮上来盖住。
   ------------------------------------------------------------ */
html[data-theme="warm"] main > section{
  position:sticky;
  top:0;
  min-height:100vh;
}
/* hero 不参与堆叠：它是深色的，钉住会让界面序列期间四周露出一圈深色，
   和后面各段的奶油色外框不一致，所以让它自然滚走。 */
/* 钉住的那张始终压在下一张下面，DOM 顺序天然决定层叠，不用 z-index */

/* ------------------------------------------------------------
   修 sticky 失效：body 上的 overflow-x:hidden 会把它变成滚动容器
   （一个轴不是 visible，另一个轴就会被算成 auto），
   里面的 position:sticky 于是不再相对视口工作 ——
   表现就是滚动时下面那一层冒出来 / 跳动。
   overflow-x:clip 只裁剪、不建立滚动容器，是正确解法。
   先写 visible 做兜底：老浏览器不支持 clip 时至少 sticky 是好的。
   ------------------------------------------------------------ */
html[data-theme="warm"] body{overflow-x:visible;overflow-x:clip;}
/* 不设 isolation：多余的层叠上下文会影响合成线程处理 sticky。 */

/* 叠卡滚动补强：只留 1px 重叠，消掉亚像素级别的缝
   （相邻两个圆角卡片之间会有半像素空档，快速滚动时最容易被看成一条闪线）。
   注意：这里刻意不加 will-change / isolation —— 它们会让 sticky 掉回主线程，
   快速滚动时钉不住、被甩上去，反而更容易露出下层。 */
html[data-theme="warm"] main > section{margin-top:-1px;}
/* ------------------------------------------------------------
   桌面降级：不叠卡，回到普通滚动
   手机视口小，叠卡很流畅；桌面全屏像素是手机的数倍，快速滚动时
   sticky 跟不上，会把下面一层甩出来。所以只在触屏/小屏保留叠卡。
   ------------------------------------------------------------ */
@media (hover:hover) and (pointer:fine){
  html[data-theme="warm"] main > section{
    position:relative;
    min-height:0;
    margin-top:0;
    top:auto !important;   /* 压掉脚本写在行内的 top */
  }
}