/* RGBable · 皮肤
   黑 + RGB。整页是黑底白字（浅色 / 深色模式都一样），直角。
   光只出现在两处：开场首图背后的 conic-gradient 光环（20s 一圈，只转 transform，模糊是静态的），
   和「官网」区块的大标题描边（同一组渐变）。其余全部黑白；调研是一张白纸档案，出血到左缘。
   主手法：叠压（官网窗口压住大标题下沿；图注是浮在图边的 mono 标签）。 */

:root[data-skin="rgbable"]{
  --rg-black:#0A0A0A;
  --rg-paper:#F3F2EE;
  --rg-ring:#FF5C7A,#FFB45C,#7CF2B0,#5CB8FF,#A77CFF,#FF5C7A;   /* 与 scenes/rgbable.py 的 STOPS 一致 */
  --paper:var(--rg-black); --surface:#141414; --ink:#ECECE8; --mute:#9A9A95; --line:#2A2A28;
  --deep:#141414; --deep-fg:#ECECE8; --deep-mute:#A3A39E;
  --ba:#FFFFFF;
  --skin-paper:var(--rg-black);
  --skin-accent:#ECECE8;
  --skin-ground:var(--rg-black);
  --skin-ground-fg:#FFFFFF;
  color-scheme:dark;
}

.rg-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 开场首图：手机背后一圈 RGB 光环 ---------- */
html[data-skin="rgbable"] .chero__fig{position:relative;isolation:isolate;overflow:clip}
html[data-skin="rgbable"] .chero__fig img{position:relative;z-index:1;aspect-ratio:16 / 9;object-position:50% 82%;
  /* 只留手机那一竖条：横向一条带 × 纵向上下淡出，光环从两侧和手机背后透出来 */
  -webkit-mask-image:linear-gradient(90deg,transparent 30.5%,#000 33.8%,#000 66.2%,transparent 69.5%),linear-gradient(180deg,transparent 0%,#000 7%,#000 72%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 30.5%,#000 33.8%,#000 66.2%,transparent 69.5%),linear-gradient(180deg,transparent 0%,#000 7%,#000 72%,transparent 100%);
  mask-composite:intersect}
html[data-skin="rgbable"] .chero__fig::before{content:"";position:absolute;left:50%;top:50%;z-index:0;width:min(64vw,86vh,900px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,var(--rg-ring));
  -webkit-mask-image:radial-gradient(closest-side,transparent 50%,#000 62%,#000 74%,transparent 92%);
  mask-image:radial-gradient(closest-side,transparent 50%,#000 62%,#000 74%,transparent 92%);
  filter:blur(18px) saturate(.72);opacity:.7;transform:translate(-50%,-50%)}
.scn-m[data-skin="rgbable"] .chero__fig::before{animation:rg-spin 20s linear infinite;will-change:transform}
@keyframes rg-spin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---------- 01 调研 · 白纸档案 ---------- */
.rg-archive__grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,4vw,64px);align-items:start}
.rg-sheet{margin-left:calc(var(--page) * -1);padding:clamp(20px,2.6vw,40px) clamp(20px,2.6vw,40px) clamp(20px,2.6vw,40px) calc(var(--page) + clamp(4px,1vw,16px));background:var(--rg-paper);color:var(--rg-black);--tag-bg:var(--rg-paper);--tag-fg:var(--rg-black)}
.rg-sheet__meta,.rg-sheet__foot{display:flex;justify-content:space-between;gap:16px;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;line-height:1.4}
.rg-sheet__meta{padding-bottom:12px;margin-bottom:clamp(16px,2vw,28px);border-bottom:1px solid var(--rg-black)}
.rg-sheet__meta span:last-child,.rg-sheet__foot span:last-child{opacity:.55}
.rg-sheet__foot{padding-top:12px;margin-top:clamp(16px,2vw,28px);border-top:1px solid color-mix(in srgb,var(--rg-black) 24%,transparent)}
.rg-sheet__fig .pic__btn{background:var(--rg-black)}
.rg-archive__side{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);min-width:0}
.rg-archive__side .gsec__head{grid-template-columns:minmax(0,1fr);margin-bottom:0}
.rg-archive__side .gsec__head h2,.rg-archive__side .gsec__head p{grid-column:1 / -1}
.rg-index{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rg-index li{display:grid;grid-template-columns:3em minmax(0,1fr);gap:2px 12px;padding:14px 0;border-bottom:1px solid var(--line)}
.rg-index b{grid-row:1 / span 2;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.1em;color:var(--mute);padding-top:.5em}
.rg-index span{font-family:var(--cn);font-weight:800;font-size:clamp(20px,1.8vw,26px);line-height:1.3}
.rg-index small{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--mute)}

/* ---------- 02 官网 · 渐变描边大标题 ---------- */
.rg-webhead{padding-bottom:0}
.rg-slogan{margin:0;position:relative;z-index:0}
.rg-slogan__svg{display:block;width:100%;height:auto;overflow:visible}
.rg-slogan__svg text{font-family:"Archivo",var(--cn);font-weight:800;font-stretch:62%;letter-spacing:0;stroke-width:1.4px;vector-effect:non-scaling-stroke}
.rg-slogan__svg.is-tall{display:none}

/* ---------- 02 官网 · 长图 scrub（窗口压住标题下沿） ---------- */
.rg-web{--scrub-len:280vh;--win-h:min(76svh,calc(100svh - 150px),760px);--rg-over:clamp(40px,5.2vw,88px);position:relative;z-index:1}
/* 静态版式：窗口上提压住标题；动效版式：整段上提抵消 sticky 舞台的上内边距，标题与说明错开 */
.rg-wins{margin-top:calc(var(--rg-over) * -1)}
.scn-m .rg-web{margin-top:calc(var(--rg-over) * -1 - 56px - 3svh)}
.scn-m .rg-wins{margin-top:0}
.scn-m .rg-web .scrub__side{padding-top:calc(var(--rg-over) + 8px)}
.rg-web .scrub__stage{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.rg-wins{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(16px,2vw,32px);align-items:end;min-width:0}
.rg-screen{position:relative;--win-w:100%;min-width:0}
.rg-screen .scrub__win{width:100%;background:var(--rg-black)}
.rg-screen .scrub__bar{background:color-mix(in srgb,#fff 16%,transparent)}
.rg-screen .scrub__bar i{background:#fff}
.rg-screen__tag{position:absolute;left:0;top:0;z-index:2;transform:translateY(-50%);line-height:0}
.rg-web .tag{background:var(--rg-black);color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 22%,transparent)}
.rg-pdp .pic__btn{background:#fff}
.rg-pdp-m{display:none}
.rg-web .scrub__notes li::before{background:#fff}

/* ---------- 窄屏 ---------- */
@media (max-width: 899px){
  html[data-skin="rgbable"] .chero__fig{aspect-ratio:1 / 1.08}
  html[data-skin="rgbable"] .chero__fig img{aspect-ratio:auto;width:190%;max-width:none;height:auto;max-height:none;margin:-77% 0 0 -45%}
  html[data-skin="rgbable"] .chero__fig::before{width:min(108vw,520px);top:52%}

  .rg-archive__grid{grid-template-columns:minmax(0,1fr)}
  .rg-archive__side{order:-1}
  .rg-sheet{margin-right:0}

  .rg-slogan__svg.is-wide{display:none}
  .rg-slogan__svg.is-tall{display:block;width:78%}
  .rg-web{--scrub-len:240vh;--win-h:min(calc(100svh - 300px),600px);--rg-over:0px;margin-top:28px}
  .rg-wins{margin-top:14px}
  .scn-m .rg-web .scrub__side{padding-top:28px}
  .rg-web .scrub__stage{grid-template-columns:minmax(0,1fr)}
  .rg-wins{grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
  .rg-pdp--d{display:none}
  .rg-pdp-m{display:block;padding-bottom:clamp(40px,12vw,72px)}
  .scn-m .rg-wins{margin-top:14px}
  .rg-web .tag{font-size:10px;padding:4px 8px 3px}
}

/* 版心像素值：site.css 的 --page 含 100%，在子元素的 margin/padding/width 里会按父盒宽度算，出血量会错；这里用 100vw 的版本 */

/* ---------- 2026-10-13 首图改为描边大字（丘丘第 1 轮意见） ---------- */
html[data-skin="rgbable"] .rg-hero{aspect-ratio:auto;display:block;padding-block:clamp(28px,4.5vw,72px) clamp(8px,2vw,32px)}
html[data-skin="rgbable"] .rg-hero::before{display:none}
html[data-skin="rgbable"] .rg-hero .rg-slogan{position:relative;z-index:1}
@media (max-width: 899px){
  html[data-skin="rgbable"] .rg-hero{aspect-ratio:auto;padding-block:24px 8px}
  html[data-skin="rgbable"] .rg-hero .rg-slogan__svg.is-tall{width:100%}
}