@charset "UTF-8";
/* ============================================================
   续缘 · 风格 B —— 电子词典 · 灰阶屏
   只在 <html data-theme="b"> 下生效；默认风格 A 完全不受影响。
   结构：① 覆写通道令牌（把整站底子换成 LCD 灰阶屏 + 塑料机身）
         ② 少量 B 专属覆写（宋体、方括号导航、灰度配图、实体键）
   约定：琥珀色只用在深色底上；灰阶屏上唯一强调色是朱砂 --cinnabar（印泥红）
   注意：不加任何点阵 / 扫描线 / 像素化纹理——站主反馈这类马赛克伤眼
   ============================================================ */

html[data-theme="b"]{
  /* —— 机身与屏 —— */
  --plastic:#2b2e31;
  --plastic-lo:#1e2124;
  --led:#e2564a;
  --amber:#e0b25c;
  --lcd:#ccd0d3;
  /* —— 覆写主设计系统令牌：纸墨 → 灰阶屏 —— */
  --paper:#ccd0d3;
  --paper-2:#c1c6ca;
  --paper-3:#adb2b7;
  --paper-card:rgba(38,41,44,.035);
  --paper-card-hover:rgba(38,41,44,.09);
  --ink:#26292c;
  --ink-2:#363a3e;
  --ink-3:#494d51;
  --ink-4:#505458;
  --ink-rgb:38,41,44;
  --paper-rgb:204,208,211;
  --cinnabar:#9a3524;
  --cinnabar-soft:#ad4030;
  --cinnabar-wash:rgba(154,53,36,.08);
  --gold:#6f5a1c;
  --line:rgba(38,41,44,.20);
  --line-strong:rgba(38,41,44,.42);
  --head-bg:rgba(43,46,49,.95);
  --head-blur:0px;
  --band-bg:#26292c;
  --band-fg:#ccd0d3;
  --on-accent:#ccd0d3;
  --qr-bg:#fff;
  --shadow-seal:0 0 10px rgba(226,86,74,.45);
  --shadow-soft:none;
  /* —— 字体：正文宋体点阵，标签等宽 —— */
  --bit:"SimSun","宋体","Songti SC","Noto Serif SC",serif;
  --mono:"Consolas","Menlo","Courier New","SimSun","宋体",monospace;
  --kai:var(--bit);
  --song:var(--bit);
  --sans:var(--mono)
}/* ============ 机身（页）============ */
html[data-theme="b"] body{
  background:var(--plastic);
  background-image:radial-gradient(120% 80% at 50% -10%,#41464b 0%,#24272a 62%,#191b1d 100%);
  background-attachment:fixed;
  color:var(--ink)
}/* ============ 灰阶屏（正文区）============ */
html[data-theme="b"] main{
  position:relative;
  isolation:isolate;
  background:var(--lcd);
  box-shadow:inset 0 0 0 1px rgba(38,41,44,.28),inset 0 0 70px rgba(38,41,44,.10)
}/* ============ 顶栏（机身塑料）============ */
html[data-theme="b"] .site-head{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 0 rgba(0,0,0,.45);
  border-bottom-color:rgba(0,0,0,.5);
  color:#c9ced3
}/* 丝印型号那条线 */
html[data-theme="b"] .site-head::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(204,208,211,.3),transparent)
}html[data-theme="b"] .brand-txt strong{
  color:#d5d9dd
}html[data-theme="b"] .brand-txt span{
  color:#8f959b
}/* 印章 → 电源指示灯 */
html[data-theme="b"] .seal{
  transform:none;
  text-shadow:0 1px 0 rgba(0,0,0,.35)
}html[data-theme="b"] .seal.sm{
  background:var(--plastic-lo);
  color:#c9ced3;
  box-shadow:0 0 0 1px rgba(204,208,211,.18) inset
}/* 导航 → 方括号菜单
   ⚠️ 方括号是「永远占位」的（隐藏时也只透明，不回收宽度），6 个标签时它比其他主题宽 170px+，
   所以本主题字号与间距都要比水墨主题紧一档，否则顶栏会把中文标签挤到按字断行。 */
html[data-theme="b"] .nav{
  gap:16px
}html[data-theme="b"] .nav a{
  color:#a4a9ae
}html[data-theme="b"] .nav a::before{
  content:"[";
  opacity:0;
  transition:opacity .2s var(--ease)
}html[data-theme="b"] .nav a::after{
  content:"]";
  position:static;
  left:auto;
  right:auto;
  bottom:auto;
  height:auto;
  background:none;
  opacity:0;
  transition:opacity .2s var(--ease)
}html[data-theme="b"] .nav a:hover,.nav a.on{
  color:var(--lcd)
}html[data-theme="b"] .nav a:hover::before,html[data-theme="b"] .nav a:hover::after,
html[data-theme="b"] .nav a.on::before,html[data-theme="b"] .nav a.on::after{
  opacity:1
}html[data-theme="b"] .nav a.on{
  color:var(--amber)
}/* 汉堡 → 实体键 */
html[data-theme="b"] .nav-toggle{
  font-family:var(--bit);
  color:#c9ced3;
  border:0;
  background:linear-gradient(180deg,#45494e,#2f3236);
  box-shadow:0 3px 0 rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07) inset;
  text-shadow:0 1px 0 rgba(0,0,0,.5)
}html[data-theme="b"] .nav-toggle:hover{
  background:linear-gradient(180deg,#51565c,#383c41);
  color:var(--amber);
  border:0
}html[data-theme="b"] .nav-toggle i,html[data-theme="b"] .nav-toggle i::before,html[data-theme="b"] .nav-toggle i::after{
  background:#c9ced3
}html[data-theme="b"] .nav-toggle[aria-expanded="true"] i{
  background:transparent
}/* 风格切换器 → 三个小按键 */
html[data-theme="b"] .themes{
  border-color:rgba(204,208,211,.18);
  background:rgba(0,0,0,.22)
}html[data-theme="b"] .themes button{
  color:#8f959b;
  border-right-color:rgba(204,208,211,.12)
}html[data-theme="b"] .themes button:hover{
  background:rgba(204,208,211,.1);
  color:var(--lcd)
}html[data-theme="b"] .themes button[aria-pressed="true"]{
  background:var(--plastic-lo);
  color:var(--amber);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6)
}html[data-theme="b"] .themes i{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)
}/* ============ 抽屉菜单（屏上菜单）============ */
html[data-theme="b"] .drawer{
  background:var(--lcd);
  border-top-color:rgba(38,41,44,.4);
  box-shadow:inset 0 0 0 1px rgba(38,41,44,.25)
}html[data-theme="b"] .drawer nav a{
  border-bottom:1px dotted rgba(38,41,44,.45)
}html[data-theme="b"] .drawer nav a::before{
  content:"▸ ";
  opacity:0;
  transition:opacity .18s var(--ease)
}html[data-theme="b"] .drawer nav a.on{
  color:var(--ink)
}html[data-theme="b"] .drawer nav a.on::before{
  opacity:1
}html[data-theme="b"] .drawer nav a:active{
  background:var(--ink);
  color:var(--lcd);
  padding-left:14px
}/* ============ 首屏（开机画面）============ */
html[data-theme="b"] .hero-bg{
  opacity:.74;
  filter:contrast(1.1)
}html[data-theme="b"] .hero-bg img{
  filter:grayscale(1) contrast(1.24);
  mix-blend-mode:multiply
}html[data-theme="b"] .kicker{
  color:var(--ink-2)
}html[data-theme="b"] .kicker::after{
  content:"";
  display:inline-block;
  width:8px;
  height:12px;
  background:var(--ink);
  margin-left:9px;
  vertical-align:-2px;
  animation:b-blink 1.05s steps(1) infinite
}
@keyframes b-blink{0%,49%{
  opacity:1
}50%,100%{
  opacity:0
}}html[data-theme="b"] .hero h1{
  text-shadow:1px 1px 0 rgba(38,41,44,.22)
}html[data-theme="b"] .hero h1 .stamp{
  background:none;
  color:var(--ink);
  border:2px solid var(--ink);
  transform:translateY(6px);
  box-shadow:none
}html[data-theme="b"] .hero .sub{
  color:var(--ink-2)
}html[data-theme="b"] .hero-stats{
  border-top:2px solid var(--ink)
}html[data-theme="b"] .hero-stats span{
  color:var(--ink-3)
}html[data-theme="b"] .page-head .hero-bg{
  opacity:.4
}html[data-theme="b"] .crumb{
  color:var(--ink-3)
}html[data-theme="b"] .page-head .lead{
  color:var(--ink-2)
}/* ============ 按钮 → 屏上硬边按键 ============ */
html[data-theme="b"] .btn{
  font-family:var(--bit);
  border:1px solid var(--ink);
  background:rgba(38,41,44,.06);
  color:var(--ink);
  box-shadow:3px 3px 0 rgba(38,41,44,.3)
}html[data-theme="b"] .btn:hover{
  background:var(--ink);
  color:var(--lcd);
  border-color:var(--ink);
  transform:none;
  box-shadow:3px 3px 0 rgba(38,41,44,.5)
}html[data-theme="b"] .btn-solid{
  background:var(--ink);
  color:var(--lcd);
  box-shadow:3px 3px 0 rgba(38,41,44,.35)
}html[data-theme="b"] .btn-solid:hover{
  background:#1a1d20;
  border-color:#1a1d20;
  color:var(--lcd)
}html[data-theme="b"] .btn-ghost:hover{
  background:var(--ink);
  color:var(--lcd)
}html[data-theme="b"] .more{
  color:var(--ink-2)
}html[data-theme="b"] .more:hover{
  color:var(--ink);
  border-color:var(--ink)
}/* ============ 三步 / 卡片 / 面板 ============ */
html[data-theme="b"] .steps{
  background:rgba(38,41,44,.04)
}html[data-theme="b"] .step b{
  font-family:var(--mono)
}html[data-theme="b"] .step p{
  color:var(--ink-2)
}html[data-theme="b"] .card,html[data-theme="b"] .pick,html[data-theme="b"] .feature,
html[data-theme="b"] .panel,html[data-theme="b"] .side,html[data-theme="b"] .notice{
  background:rgba(38,41,44,.035)
}html[data-theme="b"] .card:hover,html[data-theme="b"] .feature:hover{
  transform:none;
  background:var(--ink);
  color:var(--lcd);
  box-shadow:none;
  border-color:var(--ink)
}html[data-theme="b"] .card:hover .card-body h3,html[data-theme="b"] .card:hover .card-body h4,
html[data-theme="b"] .feature:hover .feature-body h3,
html[data-theme="b"] .feature:hover .feature-body h4{
  color:var(--amber)
}html[data-theme="b"] .card:hover .card-body p,html[data-theme="b"] .card:hover .card-body .meta,
html[data-theme="b"] .feature:hover .feature-body p,html[data-theme="b"] .feature:hover .feature-body .meta,
html[data-theme="b"] .card:hover .card-foot .plat{
  color:rgba(204,208,211,.72)
}html[data-theme="b"] .card:hover .card-foot{
  border-top-color:rgba(204,208,211,.35)
}html[data-theme="b"] .card:hover .card-foot .go,html[data-theme="b"] .card:hover .card-foot .go.off{
  color:var(--amber)
}/* 截图 / 配图统一灰度化，悬停不变彩、只提亮 */
html[data-theme="b"] .card-shot img,html[data-theme="b"] .feature img,html[data-theme="b"] .pick-card img,
html[data-theme="b"] .prose img{
  filter:grayscale(1) contrast(1.24);
  mix-blend-mode:multiply
}html[data-theme="b"] .card:hover .card-shot img,html[data-theme="b"] .feature:hover img,
html[data-theme="b"] .pick-card:hover img{
  filter:grayscale(1) contrast(1.34) brightness(1.06);
  transform:none
}html[data-theme="b"] .pick-card:hover .pick-body h3{
  color:var(--cinnabar)
}html[data-theme="b"] .pick-dots{
  background:rgba(38,41,44,.05)
}/* 无截图的封面 → 不加点阵底纹（覆写掉默认风格的网点） */
html[data-theme="b"] .cover::before{
  content:none
}html[data-theme="b"] .cover .en{
  color:var(--ink-4)
}html[data-theme="b"] .cover .rule{
  background:var(--ink)
}html[data-theme="b"] .card:hover .cover{
  background:var(--ink)
}html[data-theme="b"] .card:hover .cover .cat,html[data-theme="b"] .card:hover .cover .name,
html[data-theme="b"] .card:hover .cover .en{
  color:var(--lcd)
}html[data-theme="b"] .card:hover .cover .rule{
  background:var(--amber)
}/* 标签 / 进入按钮 → 方括号 */
html[data-theme="b"] .card-tag{
  font-family:var(--bit)
}html[data-theme="b"] .card-foot .go::before{
  content:"[ "
}html[data-theme="b"] .card-foot .go::after{
  content:" ]"
}html[data-theme="b"] .card:hover .card-foot .go::after{
  margin-left:0
}html[data-theme="b"] .card-foot .go.off{
  font-family:var(--sans)
}html[data-theme="b"] .chip:hover{
  background:rgba(38,41,44,.14);
  border-color:var(--ink);
  color:var(--ink)
}html[data-theme="b"] .chip.on{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--lcd)
}html[data-theme="b"] .tabs button.on{
  color:var(--ink);
  border-color:var(--ink)
}/* 资讯列表 → 选中即反白（真机菜单手感） */
html[data-theme="b"] .list li{
  border-bottom-style:dotted
}html[data-theme="b"] .list a:hover{
  padding-left:10px;
  background:var(--ink);
  color:var(--lcd)
}html[data-theme="b"] .list a:hover .t{
  color:var(--lcd)
}html[data-theme="b"] .list a:hover .d{
  color:rgba(204,208,211,.72)
}html[data-theme="b"] .list a:hover .dot{
  background:var(--amber);
  opacity:1
}html[data-theme="b"] .notice ol li::before{
  border-radius:var(--radius);
  font-family:var(--mono)
}html[data-theme="b"] .side .k{
  color:var(--cinnabar)
}html[data-theme="b"] .side ul a:hover{
  color:var(--ink)
}html[data-theme="b"] .prose blockquote{
  background:rgba(38,41,44,.06);
  border-left-color:var(--ink)
}html[data-theme="b"] .prose .prose-tip::before{
  color:var(--gold)
}html[data-theme="b"] .prose a{
  color:var(--cinnabar);
  border-bottom-color:rgba(154,53,36,.4)
}html[data-theme="b"] .prose .kv dt,html[data-theme="b"] .prose thead th{
  background:rgba(38,41,44,.08)
}html[data-theme="b"] .prose tbody tr:hover{
  background:rgba(38,41,44,.06)
}html[data-theme="b"] .art-head .meta .k{
  color:var(--cinnabar)
}html[data-theme="b"] .art-head .abstract{
  border-left-color:var(--line-strong)
}/* ============ 加入我们（灰阶屏上的一节，不另铺一块机身）============
   底色 = 本主题正文那块灰阶屏（main 的 --lcd），这块不再自铺塑料；
   卡片 = 屏上的浅凹槽（白高光 + 淡内阴影），hover 不抬起（实体键手感）；
   小标签走等宽 + 方括号，标题前那颗圆点 = 电源指示灯（LED 红 + 微光）。
   本主题约定「琥珀不上浅底」⇒ 这块的强调色一律用 --cinnabar。 */
html[data-theme="b"] .join{
  box-shadow:inset 0 1px 0 var(--line),inset 0 -2px 0 rgba(38,41,44,.14)
}html[data-theme="b"] .jcard{
  border-color:var(--line-strong);
  background:var(--paper-card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 2px 10px rgba(38,41,44,.09)
}html[data-theme="b"] .jcard:hover{
  transform:none;
  border-color:var(--cinnabar);
  background:var(--paper-card-hover)
}html[data-theme="b"] .jcard p b{
  color:var(--cinnabar)
}html[data-theme="b"] .jcard .qr{
  border-color:var(--line-strong);
  box-shadow:0 0 0 1px rgba(255,255,255,.5)
}html[data-theme="b"] .join .sec-head{
  border-bottom-color:var(--line)
}html[data-theme="b"] .join .sec-head h3::before{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--led);
  box-shadow:0 0 8px rgba(226,86,74,.5)
}html[data-theme="b"] .join .sec-head p{
  font-family:var(--mono);
  color:var(--ink-3);
  letter-spacing:.14em
}html[data-theme="b"] .join .sec-head p::before{
  content:"[ "
}html[data-theme="b"] .join .sec-head p::after{
  content:" ]"
}html[data-theme="b"] .join .contact-line a:hover{
  color:var(--cinnabar)
}/* ============ 页脚（机身下缘 + 电源灯）============ */
html[data-theme="b"] .site-foot{
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.22));
  border-top-color:rgba(0,0,0,.5);
  color:#8b9199
}html[data-theme="b"] .foot-brand::after{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--led);
  flex:none;
  margin-left:2px;
  box-shadow:0 0 9px 2px rgba(226,86,74,.65),0 0 0 2px rgba(0,0,0,.5);
  animation:b-pulse 3.2s infinite ease-in-out
}
@keyframes b-pulse{0%,100%{
  opacity:1
}50%{
  opacity:.4
}}html[data-theme="b"] .foot-brand b{
  color:#d5d9dd
}html[data-theme="b"] .foot-col h4{
  color:#b9bfc3
}html[data-theme="b"] .foot-grid,html[data-theme="b"] .foot-bottom{
  border-color:rgba(0,0,0,.4)
}html[data-theme="b"] .site-foot a:hover,html[data-theme="b"] .foot-col a:hover{
  color:var(--amber)
}html[data-theme="b"] .foot-bottom{
  font-family:var(--mono)
}html[data-theme="b"] .err .cta{
  justify-content:center
}html[data-theme="b"] ::selection{
  background:var(--ink);
  color:var(--lcd)
}

@media(prefers-reduced-motion:reduce){html[data-theme="b"] .kicker::after,html[data-theme="b"] .foot-brand::after{
  animation:none
}
}

/* ============ 移动端：LCD 风格的大字距在窄屏会撑破布局 ============
   本主题多处用 .2em~.3em 字距做「电子词典点阵」观感，字号收缩后字距不跟着收缩，
   在 620px 以下会让文字实际宽度膨胀 20%~30%（标题、导航尤其明显）。
   这里统一收敛字距，观感仍是等宽点阵风。 */
@media(max-width:620px){html[data-theme="b"] .brand-txt span{
  display:none
}
}