/* BORING 官网 · 第八版 · 支持中心（guide.css）——先引 site.css 再引本文件。
   UI 树：页头 → 下载卡（暖白）→ 开始使用（三条路径）→ 问题栏（暖白可展开列表，#help-xxx 直达）→ 联系支持（二维码 + 求助信息）→ 开发与扩展（线框）。
   控件只有：分段选择（系统）、可展开列表（问题 / 首次打开提示）、按钮与点阵下划线链接、复制按钮、图片放大。
   可展开列表的高度用 Bencho image-accordion 的弹簧（springOf(10)：k .096 / 每帧阻尼 .64），开合同一时刻、同一弹簧，
   被点的那一行钉在原位（指着的东西不从指针下溜走）。 */

/* ── 页头 ── */
.page-head .lead{margin-top:16px}
.page-head{padding-bottom:8px}

/* ══ 下载卡 ══ */
.gd-dl{padding-top:28px}
.get{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px clamp(22px,3vw,44px);padding:clamp(24px,2.8vw,40px)}
.get .h2{margin-top:0}
.get__act{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.get .ctas{margin-top:0;align-items:center;justify-content:flex-end}
.get__help{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 22px}
.get__icon{width:64px;height:64px;border-radius:15px;box-shadow:0 0 0 1px rgba(14,12,10,.12),0 10px 22px -12px rgba(14,12,10,.6)}
.get .lk{color:var(--ink)}

/* 暖白卡里的分段选择用共用 .segs--paper；这里的卡底是 paper-2，凹槽改回暖白并加细框以区分 */

/* 首次打开提示：同一套可展开机制的小号版本 */

/* 加号 .pm、展开体 .xp__body 与开合手感都来自共用可展开 .xp（site.css / site.js） */

/* ══ 开始使用：三条路径（与首页「下一步」路径卡同一外观）══ */

/* ══ 问题栏 ══ */
.pr__grid{display:grid;grid-template-columns:minmax(300px,34fr) 66fr;gap:24px clamp(28px,3.6vw,60px);align-items:start}
.pr__side{position:sticky;top:124px;display:flex;flex-direction:column;align-items:flex-start}
.pr__head .h2{margin-top:0}
.pr__head .lead{max-width:20em}
.pr__gap{margin-top:18px;max-width:24em}   /* 第八版：全站唯一一句边界说明（原首页 #next 的 .gap，原句照抄） */
.pr__end{margin-top:28px;flex-direction:column;align-items:flex-start;gap:6px}
.pr__end .btn{white-space:normal;text-align:left;line-height:1.3;min-height:52px;padding-block:10px}

.qa{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:10px;display:grid;gap:4px}
.qa__item{position:relative;border-radius:15px}
.qa__item::before{content:"";position:absolute;inset:0;border-radius:15px;background:var(--paper-2);clip-path:inset(0 12px round 13px);transition:clip-path .3s var(--snap),background-color .22s ease;pointer-events:none}
.qa__item>*{position:relative}
.qa__q{display:grid;grid-template-columns:var(--numbox) 1fr 14px;align-items:center;column-gap:16px;min-height:58px;padding:10px 30px 10px 26px;list-style:none;cursor:pointer;border-radius:15px;font:900 16.5px/1.35 var(--mix);color:var(--ink);transition:color .2s ease,padding .34s var(--snap)}
.qa__q:focus-visible{outline-offset:2px}
.qa .num{box-shadow:inset 0 0 0 1px #b2a998;color:var(--ink)}
@media (hover:hover){.qa__item:not(.is-open):hover::before{background:#d1c9ba}}
.qa__item:not(.is-open)>.qa__q:active{transform:scale(.995)}
.qa__item.is-open::before{background:var(--ink);clip-path:inset(0 0 round 15px)}
.qa__item.is-open>.qa__q{color:var(--paper);padding-block:16px 8px;font-size:17.5px}
.qa__item.is-open .num{background:var(--paper);color:var(--ink);box-shadow:none}

.qa__in{display:grid;grid-template-columns:minmax(0,1fr);gap:0 28px;padding:4px 30px 26px 76px;color:var(--paper)}
.qa__in--fig{grid-template-columns:minmax(0,1fr) clamp(150px,15vw,210px)}
.qa__in>*{grid-column:1}
.qa__t{font:900 var(--h3s)/1.3 var(--mix);letter-spacing:-.01em}
.qa__text{margin-top:12px;display:grid;gap:12px;max-width:36em}
.qa__text p,.qa__cases dd{font:300 16px/1.75 var(--mix);color:#cfc7b9}
.qa__cases{display:grid;gap:10px;margin:0}
.qa__cases>div{padding:12px 16px 13px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.qa__cases dt{font:900 15px/1.5 var(--mix);color:var(--paper)}
.qa__cases dd{margin:2px 0 0}
.qa__fig{grid-column:2;grid-row:1 / span 2;align-self:start;margin-top:4px;display:grid;gap:8px}
.qa__fig img{width:100%;height:auto}
.qa__fig--shot{align-self:start}
.qa__zoom{display:block;width:100%;padding:0;border:0;border-radius:8px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line);cursor:zoom-in;transition:transform .3s var(--snap)}
@media (hover:hover){.qa__zoom:hover{transform:translateY(-2px)}}
.qa__zoom:focus-visible{outline-offset:3px}
.qa__foot{margin-top:18px;display:grid;gap:4px}
.qa__go{display:flex;flex-wrap:wrap;align-items:center;gap:0 28px}
.qa .lk{color:var(--paper)}

/* 返回链接 .lk--back 已收编进 site.css */

/* ══ 联系支持 ══ */
.ct__head .lead{max-width:34em}
.ct__limit{margin-top:16px;max-width:40em}
.ct{display:grid;grid-template-columns:minmax(260px,30fr) 70fr;gap:14px;align-items:stretch}
.ct__qr{display:flex;flex-direction:column;align-items:center;gap:14px}
.ct__zoom{position:relative;display:block;width:min(100%,260px);padding:0;border:0;border-radius:16px;background:var(--paper);box-shadow:0 0 0 1px rgba(14,12,10,.1);cursor:zoom-in;transition:transform .3s var(--snap)}
.ct__zoom img{display:block;width:100%;height:auto;border-radius:16px}
.ct__cap{margin:2px 0 0;font:900 14px/1.5 var(--mix);color:var(--ink);text-align:center;text-wrap:balance}
.ct__exp{margin:-8px 0 0;font-size:13px;color:rgba(14,12,10,.6)}
.ct__zi{position:absolute;right:-10px;bottom:-10px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--paper);transition:transform .3s var(--snap)}
@media (hover:hover){.ct__zoom:hover{transform:translateY(-2px)}.ct__zoom:hover .ct__zi{transform:scale(1.08)}}
.ct__zoom:focus-visible{outline-offset:4px}
.ct__links{align-self:stretch;margin-top:auto;display:grid;gap:0;justify-items:start}
.ct__links .lk{font-size:14.5px;white-space:normal}
.ct__ask{display:flex;flex-direction:column;align-items:flex-start}
.ct__ask .text{margin-top:8px}
.ct__ta{align-self:stretch;margin-top:18px;min-height:148px;padding:16px 18px;border:0;border-radius:14px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--line);color:var(--paper);font:500 15px/1.75 var(--mix);word-spacing:normal;resize:vertical;transition:box-shadow .2s ease}
.ct__ta:focus{outline:none;box-shadow:inset 0 0 0 2px var(--paper)}
.ct__ta:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.ct__row{margin-top:16px;margin-bottom:12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.ct__status{font:500 13.5px/1.5 var(--mix);color:var(--mute);min-height:1.5em}

/* 复制按钮：成功后按钮内的字整条上移，露出「已复制」（同首页裁切窗口滚轮的做法），2.4 秒后回位 */
.cp__reel{position:relative;display:block;height:1.2em;overflow:hidden;line-height:1.2}
.cp__a,.cp__b{display:block;transition:transform .42s cubic-bezier(.7,0,.15,1)}
.cp__b{position:absolute;left:0;right:0;top:100%;text-align:center}
.cp.is-done .cp__a,.cp.is-done .cp__b{transform:translateY(-100%)}

/* ══ 开发与扩展 ══ */
.dev{display:grid;grid-template-columns:minmax(0,58fr) 42fr;gap:20px clamp(24px,3.4vw,56px);align-items:end}
.dev .h2{margin-top:0}
.dev .text{margin-top:14px}
.dev__links{display:flex;flex-wrap:wrap;gap:0 28px}
.dev__side .fine{margin-top:8px;max-width:28em}

/* ══ 字体署名：HarmonyOS Sans SC 许可要求注明；页脚说明块删除后，全站只在本页最底（页脚之上）保留这一行 ══ */
.fontnote{margin:28px var(--pad) 0;padding-inline:clamp(4px,1vw,14px);font:500 12.5px/1.6 var(--mix);color:var(--mute)}

/* ══ 中屏 ══ */
@media (max-width:1100px){
  .get{grid-template-columns:auto minmax(0,1fr)}
  .get__act{grid-column:1/-1;align-items:flex-start}
  .get .ctas,.get__help{justify-content:flex-start}
  .pr__grid{grid-template-columns:1fr}
  .pr__side{position:static}
  .pr__end{flex-direction:row;flex-wrap:wrap;align-items:center;margin-top:20px}
}
/* ══ 窄屏 ══ */
@media (max-width:760px){
  .page-head{padding-bottom:4px}
  .gd-dl{padding-top:20px}
  .get{grid-template-columns:1fr;gap:14px;padding:20px 18px 18px}
  .get__icon{width:52px;height:52px;border-radius:12px}
  .get__act{grid-column:auto}
  .pr__grid{display:flex;flex-direction:column;gap:18px}
  .pr__side{display:contents}
  .pr__head{order:1;padding-inline:8px}
  .qa{order:2;padding:6px;border-radius:18px}
  .pr__end{order:3;padding-inline:8px;margin-top:4px;flex-direction:column;align-items:flex-start}
  .pr__end .btn{max-width:100%}
  .qa__item::before{clip-path:inset(0 6px round 12px)}
  .qa__q{grid-template-columns:var(--numbox) 1fr 14px;column-gap:12px;min-height:54px;padding:8px 18px 8px 16px;font-size:15.5px}
  .qa__item.is-open>.qa__q{font-size:16px;padding-block:14px 6px}
  .qa__in,.qa__in--fig{grid-template-columns:1fr;padding:2px 16px 20px}
  .qa__fig{grid-column:1;grid-row:auto;margin-top:16px;width:min(100%,230px)}
  .qa__fig--shot{width:100%}
  .qa__text p,.qa__cases dd{font-size:15px}
  .qa__cases>div{padding:10px 12px 11px}
  .qa__go{flex-direction:column;align-items:flex-start}
  .ct{grid-template-columns:1fr}
  .ct__qr{padding:20px 18px 12px}
  .ct__zoom{width:min(100%,220px)}
  .dev{grid-template-columns:1fr;align-items:start}
  .fontnote{margin:20px 12px 0;padding-inline:8px}
  .sec__head{margin-bottom:18px}
}