/* 楠哥声音研究所 · 官网样式（2026-09-29 首版）
   规则照《阿楠UI规范》：主页蓝底、内容页黑底（日间白底）；三色 + 透明度阶；
   字号 12/15/20/32/60；字重 400/700；圆角只有四档 胶囊 999 / 卡片 12 / 浮层 14 / 直角 0；
   禁投影、禁第三色（红只给危险动作）、禁 hover 位移；图形只用元素库 SVG symbol。 */
/* 规范令牌（--kb --w70 --f2 …）一律引 ui.css 正本（2026-10-01 全站统一，本文件一个都不再抄）。
   已删自造令牌：--on（全站无一处使用）；--fs / --disc / --wrap 已在用处写成字面量。 */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bk);color:var(--w);font-family:"Inter",system-ui,-apple-system,"Segoe UI","Microsoft YaHei UI","PingFang SC",sans-serif;font-size:var(--f2);line-height:1.6;
     -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg.defs{position:absolute;width:0;height:0;overflow:hidden}
.sp{flex:1}
.en{font-size:var(--f1);letter-spacing:.18em;text-transform:uppercase;color:var(--w50)}

/* ── 主页（全站唯一蓝底；不挂页眉）────────────────── */
.home{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
      background:var(--kb);color:#FFFFFF;padding:24px 0;overflow:hidden}
.homedeco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.homedeco svg{position:absolute;fill:none;stroke:#FFFFFF;stroke-width:1}
.homedeco .b1{left:-14vmin;bottom:-18vmin;width:78vmin;height:78vmin;opacity:.10;animation:turn 210s linear infinite}
.homedeco .b2{right:-12vmin;top:-16vmin;width:62vmin;height:62vmin;opacity:.08;animation:turn 270s linear infinite reverse}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.home .inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:calc(min(72vmin,700px) * .11)}
.home .disc{position:relative;width:min(72vmin,700px);height:min(72vmin,700px);flex:none;display:flex;align-items:center;justify-content:center}
.home .disc svg{position:absolute;fill:none;stroke:#FFFFFF}
.home .disc .discRings{width:100%;height:100%;opacity:.30;animation:spin 88s linear infinite}
.home .disc .discGroove{width:46%;height:46%;opacity:.34;animation:spin 88s linear infinite}
.home .disc .discFace{width:52.3%;height:52.3%;opacity:1}
.home .discName{position:absolute;left:0;right:0;bottom:calc(min(72vmin,700px) * .055);text-align:center;white-space:nowrap;
  font-size:calc(min(72vmin,700px) * .078);font-weight:700;letter-spacing:.02em;color:#FFFFFF;line-height:1}
.home .enter{flex:none;width:44px;height:44px;padding:0;border-radius:999px;display:flex;align-items:center;justify-content:center;
  opacity:.85;transition:opacity .18s var(--ease)}
.home .enter svg{display:block;width:100%;height:100%}
.home .enter:hover{opacity:1}
/* 首页底部：备案号（工信部要求首页必须显示，链到 beian.miit.gov.cn；小字、不加任何装饰） */
.home .homefoot{position:absolute;left:0;right:0;bottom:14px;text-align:center;z-index:2;
  font-size:var(--f1);letter-spacing:.08em}
.home .homefoot a{color:rgba(255,255,255,.45)}
.home .homefoot a:hover{color:rgba(255,255,255,.7)}

/* ── 内容页背景：摩尔纹渐变垫底（2026-09-29 第 30 轮）──
   只用元素库的 s-moireg，不许另造图形；慢慢转，压得很低，不抢正文。 */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg .mg{position:absolute;fill:none;transform-origin:50% 50%}
.bg .m1{width:104vmin;height:104vmin;left:-34vmin;top:-30vmin;opacity:.090;animation:spin 260s linear infinite}
.bg .m2{width:82vmin;height:82vmin;right:-26vmin;bottom:-30vmin;opacity:.080;animation:spin 320s linear infinite reverse}
.bg .m3{width:52vmin;height:52vmin;right:10vmin;top:-16vmin;opacity:.070;animation:spin 300s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
html[data-theme="light"] .bg .mg{filter:invert(1)}

/* ══ 站点头尾 · 唯一来源（阿楠 2026-09-29 第 40 轮：全站页眉页脚统一）════════
   主页 index.html 是独立定稿文件、不引 site.css；build.py 会把
   ==SITE-CHROME-START== 到 ==SITE-CHROME-END== 之间这段原样注进主页的 <style>。
   所以：改页眉/页脚只改这一段，四个页面一定同步。 */
/* ==SITE-CHROME-START== */
.sp{flex:1}
/* 页眉：蓝色磨玻璃渐变 —— 蓝只铺最上面一小截就化开（0% 全实 → 34% 90% → 72% 40% → 100% 透明）。
   2026-10-02 阿楠标注清单第三版：以上线官网那版为准，化开范围收窄，蓝从文字行往下化到背景，
   不要一大片（取代 10-01「实到文字行」口径）。不分滚动与否。内容抬在渐变之上
   （负 z-index 会连 backdrop-filter 一起压到页面背后，第 36 轮踩过）。 */
.bar{flex:none;display:flex;align-items:center;gap:20px;height:58px;padding:0 32px;line-height:1.4;
     position:sticky;top:0;z-index:30;color:#FFFFFF;background:none;border:0}
.bar::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
     background:linear-gradient(180deg,#083988 0%,rgba(8,57,136,.90) 34%,rgba(8,57,136,.40) 72%,rgba(8,57,136,0) 100%);
     -webkit-backdrop-filter:blur(16px) saturate(140%);
     backdrop-filter:blur(16px) saturate(140%);
     -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 56%,rgba(0,0,0,0) 100%);
     mask-image:linear-gradient(180deg,#000 0%,#000 56%,rgba(0,0,0,0) 100%)}
.bar>*{position:relative;z-index:1}
.bar a{text-decoration:none}
.bar .brand{display:flex;align-items:center;gap:10px;min-width:0;color:#FFFFFF;text-decoration:none}
.bar .brand svg{display:block;width:58px;height:29px;fill:none;stroke:#FFFFFF;filter:none}
.bar .brand b{font-size:20px;font-weight:700;letter-spacing:.06em;white-space:nowrap;color:#FFFFFF}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{font-size:15px;letter-spacing:.08em;padding:7px 13px;border-radius:999px;color:rgba(255,255,255,.78);white-space:nowrap;text-decoration:none}
.nav a:hover{color:#FFFFFF}
.nav a.on{background:rgba(255,255,255,.20);color:#FFFFFF}
/* 日夜按钮：跟 Volume 那套圆形功能图标统一 —— 外面一圈、里面是图形（第 48 轮 · 阿楠定）
   圈 = 30px 白色空心描边（不填色），图形纯白；只用元素库里的 i-sun / i-moon，不自造图形 */
.ibtn{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  position:relative;opacity:1;color:#FFFFFF;font-family:inherit;-webkit-appearance:none;appearance:none;
  background:none;border:0;padding:0;cursor:pointer}
.ibtn::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:50%;background:none;
  border:1.4px solid rgba(255,255,255,.92)}
.ibtn svg{position:relative;z-index:1}
.ibtn svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;filter:none}
.ibtn:hover{opacity:1}
/* 电话按钮（2026-10-07）：i-phone 是描边听筒，跟 .ibtn 的 fill:none;stroke:currentColor 天生一对，
   不用再放行填充 */
/* 主页不挂日夜按钮，但占住同样宽度：切页面时导航不会左右跳 */
/* 账号按钮：和日夜按钮同一套圈。圈里永远是那个小人头像（#i-user，2026-10-01 定稿），
   登录与否只改点进去跳哪儿（登录页 / 个人中心） */
.acct{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  position:relative;color:#FFFFFF;font-size:var(--f1);font-weight:700;letter-spacing:0;text-decoration:none}
.acct::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:50%;background:none;border:1.4px solid rgba(255,255,255,.92)}
.acct span{position:relative;z-index:1}
.acct svg{position:relative;z-index:1;display:block;width:17px;height:17px;fill:none;stroke:currentColor}
.acct:hover{opacity:1}
.ibtw{flex:none;width:38px;height:38px;border-radius:999px;display:flex;align-items:center;justify-content:center;opacity:.8}
/* 返回：全站页眉最左那一个（2026-10-05 第 272 轮 · 阿楠定「全站统一」）。
   只在非顶级页出现（主页/软件/联系楠哥不挂）；图形仍是元素库 s-caret 转 90°＝左箭头，不自造图形。
   兜底是链接：没 JS 也能用；有站内来路时 JS 改成 history.back()。 */
.bar .bnav{text-decoration:none}
.bar .bnav svg{width:15px;height:15px;transform:rotate(90deg)}
/* 页脚：四个页面一模一样 —— 左边厂牌，右边备案号 */
.sitefoot{position:relative;z-index:1;flex:none;display:flex;align-items:center;gap:12px;
  padding:18px 32px;border-top:1px solid var(--w12);
  font-size:var(--f1);letter-spacing:.06em;color:var(--w50)}
.sitefoot a{color:var(--w50);text-decoration:none}
.sitefoot a:hover{color:var(--w70)}
#toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);background:var(--kb);color:#FFFFFF;
  font-size:var(--f1);letter-spacing:.06em;border-radius:999px;padding:9px 18px;opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:60}
#toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:374px){
  .bar .brand b{display:none}
}

@media (max-width:700px){
  /* 页眉高度 58 → 52、图标钮 38 → 32 可以缩；字号一律不缩，靠减项（藏厂牌文字、藏次要导航） */
  .bar{height:52px;padding:0 16px;gap:10px}
  /* 窄屏藏第三项导航（华山论剑榜）：手机从「软件」页的游戏入口 / 练耳页底部的「看榜」进 */
  .nav a.ranknav{display:none}
  .bar .brand svg{width:46px;height:23px}
  .bar .brand b{display:none}
  .nav a{padding:5px 10px}
  .ibtn{width:32px;height:32px}
  .ibtn::before{width:26px;height:26px}
  .ibtn svg{width:18px;height:18px}
  .ibtw{width:32px;height:32px}
  .acct{width:32px;height:32px}
  .acct::before{width:26px;height:26px}
  .sitefoot{padding:14px 16px;flex-wrap:wrap;gap:6px}
}
/* ==SITE-CHROME-END== */
main{position:relative;z-index:1;flex:1;width:100%;max-width:100%;margin:0 auto;padding:34px 28px 56px;display:flex;flex-direction:column;gap:26px}
.lead{font-size:var(--f3);font-weight:700;letter-spacing:.04em}
.sub{color:var(--w50);font-size:var(--f2)}
.cards{display:grid;grid-template-columns:1fr;gap:14px}
.card{border:1px solid var(--w12);border-radius:12px;padding:18px;display:flex;gap:16px;align-items:flex-start}
.card .ic{flex:none;width:56px;height:56px;border-radius:var(--r-card);border:1px solid var(--w12);display:flex;align-items:center;justify-content:center}
.card .ic svg{width:40px;height:40px;fill:none;stroke:var(--w)}
.home .discName{font-weight:700}
.card .tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.card .tt b{font-size:var(--f2);font-weight:700;letter-spacing:.04em}
.card .tt p{color:var(--w50);font-size:var(--f1);line-height:1.8}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.tag{font-size:var(--f1);letter-spacing:.06em;color:var(--w70);border:1px solid var(--w12);border-radius:999px;padding:2px 10px}
/* 已上线：实心反色（浅色主题黑底白字 / 夜间白底黑字）——不然和「内测中」长得一模一样 */
.tag.blue{background:var(--w);color:var(--bk);border-color:transparent}
/* 内测中 / 暂未开放：一律蓝色实心白字，不再镂空（镂空在浅色主题下会被黑图吃掉） */
.tag.pend{background:var(--kb);color:#FFFFFF;border-color:transparent}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.gbtn,.bbtn{font-size:var(--f1);letter-spacing:.06em;border-radius:999px;padding:8px 14px;white-space:nowrap}
.gbtn{background:var(--kb);color:#FFFFFF}
.bbtn{border:1px solid var(--w25);color:var(--w70)}
.bbtn[disabled]{opacity:.45}
.sect{display:flex;flex-direction:column;gap:10px}
.sect h2{font-size:var(--f2);font-weight:700;letter-spacing:.06em;padding-bottom:8px;border-bottom:1px solid var(--w12)}
dl.kv{display:grid;grid-template-columns:96px 1fr;gap:8px 12px;font-size:var(--f2)}
dl.kv dt{color:var(--w50);font-size:var(--f1);letter-spacing:.06em;padding-top:3px}
.steps{margin:0;padding-left:18px;color:var(--w70);font-size:var(--f2);line-height:2}

@media (max-width:700px){
  :root{--disc:min(84vw,420px)}
  main{padding:22px 16px 40px;gap:20px}
  .lead{font-size:var(--f2)}
  .card{flex-direction:column;gap:10px}
}

/* ── 工具页：四宫格入口（2026-09-29 第 30 轮 · 黑出血）──────
   一格一个工具：主体是真实界面（16:9 出血）+ 名字 + 一句话 + 状态 + 动作。
   不描边、不垫白、不投影；未上线的**不压灰**，状态与动作走蓝色。 */
.entrygrid{display:grid;grid-template-columns:repeat(3,minmax(0,380px));justify-content:center;
  gap:104px 84px;margin-top:74px}
.ecard{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:13px;row-gap:14px;padding:0;border:0;background:none}
.ecard .emat{grid-column:1/-1;position:relative;aspect-ratio:16/9;border-radius:var(--r-card);background:#000;
  overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  /* 蓝色光晕（2026-10-06 阿楠）：跟声链页手机屏同一组投影，图片元素下面衬一层蓝光 */
  box-shadow:0 8px 24px -8px rgba(8,57,136,.50),0 0 28px -6px rgba(8,57,136,.35)}
.ecard .emat img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .25s var(--ease)}
.ecard:hover .emat{transform:scale(1.028);
  box-shadow:0 10px 28px -8px rgba(8,57,136,.55),0 0 34px -6px rgba(8,57,136,.40)}
.ecard:hover .emat img{opacity:.72}
.ecard .hit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);
  background:var(--kb);color:#FFFFFF;border-radius:999px;padding:10px 22px;white-space:nowrap;
  font-size:var(--f1);letter-spacing:.14em;opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.ecard .hit.off{background:var(--kb);border:0;color:#FFFFFF}
.ecard:hover .hit{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* 工作流 logo（第 223 轮）：垫一枚蓝盘，摆在名字左边。
   为什么垫盘：元素库的图形全是写死的白描边，浅色主题下直接放白底上等于看不见。*/
.ecard .eic{grid-column:1;grid-row:2;align-self:start;display:flex;flex:none;
  width:40px;height:40px;align-items:center;justify-content:center;border-radius:999px;background:var(--kb)}
.ecard .eic svg{display:block;width:22px;height:22px;fill:none;stroke:#FFFFFF}
.ecard .eic svg.wide{width:28px;height:28px}   /* 宽扁那枚（增益架构 rib）放宽一档 */
.ecard .eic.plain{overflow:hidden}
.ecard .eic img{display:block;width:100%;height:100%;object-fit:contain}
.ecard .ett{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:6px}
.ecard .ett b{font-size:var(--f3);font-weight:700;letter-spacing:.04em}
.ecard .ett p{color:var(--w70);font-size:var(--f2);line-height:1.8}
.ecard .efoot{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:auto;
  padding-top:12px;border-top:1px solid var(--w12)}

.ecard .soonhit{position:absolute;inset:0;border-radius:var(--r-card)}
.ecard.more .emat{display:flex;align-items:center;justify-content:center}
.ecard.more .emat svg{width:26%;height:26%;fill:none;stroke:var(--w);opacity:.34}
.ecard.more .ett{margin-bottom:auto}
.ecard.more .ett p{color:var(--w50)}
/* 手机版（≤700px）：一格一格的横条 —— 左边工作流 logo，右边名字/一句话/状态。
   为什么撤掉截图：那张 16:9 的界面截图在手机上只有 390 宽，黑底上的字一个也看不清，
   白占一屏 220 高。手机上认的是 logo + 名字。
   为什么 logo 垫蓝盘：元素库的图形是写死白描边的，浅色主题下直接放白底上看不见（已知坑）。*/
@media (max-width:700px){
  .entrygrid{grid-template-columns:1fr;gap:0;margin-top:18px}
  .ecard{grid-template-columns:auto minmax(0,1fr) auto;column-gap:13px;row-gap:0;
         padding:15px 0;border-bottom:1px solid var(--w12)}
  .ecard .emat{display:none}
  .ecard .eic{grid-column:1;grid-row:1;width:46px;height:46px}
  .ecard .eic svg{width:26px;height:26px}
  .ecard .eic svg.wide{width:32px;height:32px}
  .ecard .ett{grid-column:2;grid-row:1;min-width:0;gap:5px}
  .ecard .ett b{font-size:var(--f2);line-height:1.4}
  .ecard .ett p{font-size:var(--f1);line-height:1.75}
  .ecard .efoot{grid-column:3;grid-row:1;align-self:start;margin:0;padding:3px 0 0;border:0}
  .ecard .soonhit{border-radius:12px}
  .ecard.more .emat{display:none}          /* 「更多」那张黑方块手机上也不要 */
  .ecard.more{padding-bottom:22px;border-bottom:0}
  .ecard.more .eic{background:var(--w12)}
}