/* =============================================================================
   RAYCHEL 在线体验模拟器 — 可嵌入的固定尺寸 UI
   -----------------------------------------------------------------------------
   布局原则
     · .nb-frame  锁定 1160×890 比例，overflow hidden，不产生宿主页面滚动
     · .nb-stage  永远按 1160×890 布局，由 js/fit.js 用一个 scale() 等比缩放
     · 三区：左=真机图案（实时更新） · 右=交互按钮+文案 · 下=一排状态栏
       → 布局在任何宽度下都不会折行错位，嵌进 iframe / 官网容器只需给宽度
     · 所有间距走 8px 基线（4 / 8 / 12 / 16 / 24 / 32）
     · 动效只动 transform 与 opacity，200ms 左右，尊重 prefers-reduced-motion
   ========================================================================== */

:root{
  /* 中性 —— 暖纸感 */
  --paper-0:#FFFFFF;
  --paper-1:#FCFBF8;
  --paper-2:#F7F5EF;
  --paper-3:#F1EEE6;
  --paper-4:#EAE6DC;
  --line:#E5E0D5;
  --line-2:#D6CFC1;

  /* 文字（全部 ≥4.5:1 on white，满足 WCAG 2.2 AA） */
  --ink:#1A1815;      /* 15.2:1 */
  --ink-2:#57524A;    /*  7.7:1 */
  --ink-3:#7A7365;    /*  4.7:1 */

  /* 品牌色阶 50–900 */
  --brand-50:#FBF2EA;
  --brand-100:#F5E2CF;
  --brand-200:#E9C3A0;
  --brand-300:#DC9F6E;
  --brand-400:#C96F35;  /* UI 强调，≥3:1 */
  --brand-500:#B4531F;  /* 主色，白字 4.99:1 */
  --brand-600:#9A4418;
  --brand-700:#7C3613;
  --brand-800:#5E290F;
  --brand-900:#401C0A;

  /* 前景色：填在品牌色 / 墨色底上的文字（深色外观下会反过来） */
  --on-accent:#FFFFFF;
  --on-ink:#FFFFFF;

  /* 语义 */
  --ok:#1F6F45;      --ok-bg:#E8F3ED;
  --warn:#8A5A00;    --warn-bg:#FBF2DF;
  --danger:#A32A22;  --danger-bg:#FBE9E5;

  /* 外壳 */
  --shell-shadow:0 10px 22px rgba(44,35,22,.10), 0 30px 60px rgba(44,35,22,.16);

  /* 电子墨水「白」——视窗玻璃与屏幕必须是同一个白，接缝才看不见 */
  --epd-paper:#F4F1EA;

  /* 尺度 —— 8px 基线 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* 圆角 */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* 字阶 12 → 32 */
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-lg:14px; --fs-xl:16px;
  --fs-2xl:19px; --fs-3xl:24px; --fs-4xl:32px;

  /* 动效 */
  --dur:200ms; --dur-fast:120ms; --dur-slow:320ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}

/* --------------------------------- reset ---------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
/* 作者样式的 display 会盖掉 UA 的 [hidden]{display:none}（开发者入口曾因此在
   正式页面上露出来），这里统一补回，保证 hidden 永远是隐藏 */
[hidden]{display:none !important}

/* 触屏卫生：去掉 iOS 点击时那层灰色高亮，并关掉双击缩放带来的 300ms 延迟。
   注意只给控件，#screen 自己要 touch-action:none（TOF 拖拽不能被滚动抢走） */
button,select,input[type=range],a,[role=tab]{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

html{
  /* 由于后面会整体 scale()，这里固定 rem 换算，避免宿主页面字号影响内部布局 */
  font-size:16px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.nb-body{
  background:
    radial-gradient(1200px 620px at 50% -8%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    var(--paper-3);
  color:var(--ink);
  font:var(--fs-md)/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:var(--sp-5);
}

/* --------------------------------------------------------------------------
   可嵌入的固定比例容器
   ------------------------------------------------------------------------- */
.nb-frame{
  position:relative;
  width:100%;
  max-width:1160px;
  aspect-ratio:1160 / 890;
  overflow:hidden;
  contain:layout paint;
  border-radius:var(--r-xl);
  background:var(--paper-0);
  box-shadow:var(--shell-shadow);
}

.nb-stage{
  position:absolute;
  top:0; left:0;
  width:1160px;          /* 设计基准宽度，js/fit.js 负责缩放 */
  height:890px;
  transform-origin:0 0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 18% -10%, var(--paper-1) 0%, rgba(252,251,248,0) 60%),
    linear-gradient(180deg,#FDFCFA 0%,#F8F6F0 58%,#F3F0E8 100%);
}

/* 嵌入模式（?embed=1）：贴满宿主容器，不要额外的圆角/留白 */
.nb-embed body.nb-body{padding:0;background:transparent}
.nb-embed .nb-frame{max-width:none;border-radius:0;box-shadow:none}
.nb-embed .nb-body{align-items:stretch}

/* ------------------------------- 通用控件 -------------------------------- */
button,select,input,textarea{font:inherit;color:inherit}

.nb-btn{
  display:inline-flex;align-items:center;gap:6px;
  min-height:30px;padding:0 11px;
  background:var(--paper-0);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);
  cursor:pointer;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease),
             background var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.nb-btn:hover{background:var(--paper-2);border-color:var(--line-2);color:var(--ink)}
.nb-btn:active{transform:scale(.96)}
.nb-btn.is-on,.nb-btn:active:focus-visible{background:var(--brand-500);border-color:var(--brand-500);color:var(--on-accent)}
.nb-btn.is-on:hover{background:var(--brand-600);border-color:var(--brand-600)}

.nb-btnPrimary{background:var(--brand-500);border-color:var(--brand-500);color:var(--on-accent)}
.nb-btnPrimary:hover{background:var(--brand-600);border-color:var(--brand-600);color:var(--on-accent)}
.nb-btnGhost{background:transparent}
.nb-btnSoft{border-color:var(--brand-200);color:var(--brand-700);background:var(--brand-50)}
.nb-btnSoft:hover{background:var(--brand-100);border-color:var(--brand-300);color:var(--brand-800)}
.nb-btnIcon{width:30px;padding:0;justify-content:center;font-size:var(--fs-lg)}
.nb-btnSm{min-height:26px;padding:0 9px;font-size:var(--fs-xs)}

:where(button,select,input,textarea,a,[tabindex]):focus-visible{
  outline:2px solid var(--brand-500);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

select{
  height:30px;padding:0 26px 0 9px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper-0) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7'><path d='M1 1l4 4 4-4' fill='none' stroke='%237A7365' stroke-width='1.5' stroke-linecap='round'/></svg>") no-repeat right 8px center;
  -webkit-appearance:none;appearance:none;
  font-size:var(--fs-sm);color:var(--ink-2);cursor:pointer;
}

.nb-check{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--ink-2);cursor:pointer}
.nb-check input{accent-color:var(--brand-500);width:14px;height:14px}

.nb-range{display:inline-flex;align-items:center;gap:8px}
.nb-range input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:132px;height:20px;background:transparent;cursor:pointer;
}
.nb-range input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--paper-4)}
.nb-range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-5px;
  border-radius:50%;background:var(--brand-500);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.nb-range input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--paper-4)}
.nb-range input[type=range]::-moz-range-thumb{width:12px;height:12px;border:2px solid #fff;border-radius:50%;background:var(--brand-500)}
.nb-range b{font:600 var(--fs-xs)/1 var(--mono);color:var(--ink-3);min-width:20px}

.nb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nb-sel{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--ink-3)}

/* --------------------------------- 顶栏 ---------------------------------- */
.nb-top{
  flex:0 0 64px;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:0 var(--sp-5);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(140%) blur(8px);
}
.nb-brand{display:flex;align-items:center;gap:11px;min-width:0}
.nb-mark{display:inline-flex;align-items:center;justify-content:center;color:var(--brand-500);flex:0 0 auto}
.nb-brandTxt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.nb-brandTxt b{
  font-size:17px;letter-spacing:.06em;font-weight:700;color:var(--ink);
  white-space:nowrap;
}
.nb-brandTxt i{font-style:normal;font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.02em;white-space:nowrap}
.nb-topRight{display:flex;align-items:center;gap:10px;flex:0 0 auto}

.nb-seg{display:inline-flex;padding:2px;background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r-pill)}
.nb-seg button{
  border:0;background:transparent;cursor:pointer;white-space:nowrap;
  padding:4px 12px;border-radius:var(--r-pill);
  font-size:var(--fs-sm);color:var(--ink-3);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nb-seg button:hover{color:var(--ink)}
.nb-seg button.is-on{background:var(--brand-500);color:var(--on-accent)}
.nb-segSm button{padding:3px 12px;font-size:var(--fs-xs)}

.nb-ver{font:600 10.5px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.nb-link{font-size:var(--fs-sm);color:var(--brand-600);text-decoration:none;white-space:nowrap}
.nb-link:hover{text-decoration:underline}

/* ------------------------------- 错误横幅 -------------------------------- */
.nb-err{
  position:absolute;left:0;right:0;top:64px;z-index:40;
  margin:0;padding:10px var(--sp-5);
  background:var(--danger-bg);color:var(--danger);
  border-bottom:1px solid #EFC9C2;
  font:var(--fs-xs)/1.6 var(--mono);white-space:pre-wrap;max-height:120px;overflow:auto;
}

/* --------------------------------- 主体 ---------------------------------- */
.nb-main{
  flex:1 1 auto;min-height:0;
  display:grid;
  grid-template-columns:660px 1fr;
  gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-5) var(--sp-3);
}

/* =========================== 左：真机 =========================== */
.nb-left{display:flex;flex-direction:column;align-items:center;min-width:0}

/* 机身 = 产品正视图（js/shell.js 注入 <img> 并给出裁切百分比）
   712:760 是图上机身的墨迹包围盒比例；660px 宽时屏幕 ≈484 CSS px（≥ 物理 400） */
.nb-shell{
  position:relative;
  width:660px;height:704.5px;
  flex:0 0 auto;
  overflow:hidden;
}
.nb-devImg{
  /* 原图白底：multiply 让白色融进纸色，四周不会出现白方块 */
  mix-blend-mode:multiply;
  user-select:none;-webkit-user-drag:none;
  pointer-events:none;
}
.nb-defs{position:absolute;width:0;height:0;overflow:hidden}

/* 显示区：按「长边画圆 + 上下两边切掉四角」裁出来的形状
   clip-path 由 js/shell.js 给的 objectBoundingBox 椭圆驱动 */
.nb-window{
  position:absolute;
  overflow:hidden;
  touch-action:none;               /* 让触摸拖拽不被浏览器滚动抢走 */
}
.nb-glass{
  position:absolute;inset:0;display:block;
  background:var(--epd-paper);
  box-shadow:inset 0 1px 4px rgba(40,32,20,.10);
}

.nb-screenWrap{
  position:absolute;
  overflow:hidden;
  background:var(--epd-paper);
}
#screen{display:block;width:100%;height:100%;cursor:crosshair;background:var(--epd-paper);touch-action:none}

/* 全刷 / 初始化结束后的一次「墨迹沉降」：只动 opacity，
   观感是画面从纸色里浮出来，不会像弹窗一样闪一下 */
#screen.is-settling{animation:nbSettle 260ms var(--ease)}
@keyframes nbSettle{from{opacity:.58}to{opacity:1}}

/* 高亮提示层：只存在于网页，不参与屏幕渲染 */
.nb-hl{
  position:absolute;pointer-events:none;
  border:2px dashed var(--brand-500);border-radius:var(--r-xs);
  box-shadow:0 0 0 9999px rgba(0,0,0,0);
  animation:nbBreathe 1.5s ease-in-out infinite;
}
@keyframes nbBreathe{0%,100%{opacity:.4}50%{opacity:1}}

.nb-hint{
  margin:var(--sp-2) 0 0;text-align:center;
  font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.01em;
}
/* 手机版提示文案单独一份（桌面的「滚轮」在手机上不存在） */
.nb-hintM{display:none}

/* 状态 chip —— 底部状态栏与右侧通用 */
.nb-chip{
  flex:0 0 auto;
  font:600 var(--fs-xs)/1 var(--mono);letter-spacing:.06em;
  color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 11px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nb-chipAct{background:var(--brand-50);border-color:var(--brand-200);color:var(--brand-700)}
.nb-chipAct.hit{background:var(--brand-500);border-color:var(--brand-500);color:var(--on-accent)}

/* ===================== 右：卡片式面板（按钮 + 文案） =====================
   右栏固定 ~436px（= 1160 − 左右内边距 48 − 机身 660 − 列间距 16），
   所以两张卡片共用同一套头部节奏：标题 + 一句说明 + 分隔线，操作区再往下排。 */
.nb-right{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}

.nb-card{
  background:var(--paper-0);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-3);
  min-width:0;
  box-shadow:0 1px 2px rgba(44,35,22,.04);
}
.nb-cardHead{padding-bottom:9px;border-bottom:1px solid var(--line)}
.nb-cardTitle{
  margin:0;font-size:var(--fs-lg);font-weight:700;letter-spacing:.02em;color:var(--ink);
}
.nb-cardLead{margin:3px 0 0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}

/* ---------------------------- 交互操作台 -------------------------------- */
.nb-ctl{flex:0 0 auto;display:flex;flex-direction:column;gap:7px}
.nb-ctlRow{display:flex;align-items:center;gap:10px;min-height:30px}
.nb-ctlLabel{
  flex:0 0 54px;font-size:10.5px;letter-spacing:.05em;
  color:var(--ink-3);text-align:right;white-space:nowrap;
}
.nb-ctlBtns{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
/* 手势按钮的容器：桌面横排，手机竖排（见手机模式段） */
.nb-ctlCol{display:inline-flex;gap:6px;align-items:center}

/* TOF 方向键排成十字，省横向空间 */
.nb-pad{
  display:grid;grid-template-columns:repeat(3,30px);grid-template-rows:repeat(2,30px);
  gap:3px;margin-right:2px;
}
.nb-pad .nb-btnIcon{width:30px;padding:0;justify-content:center}
.nb-padUp{grid-column:2;grid-row:1}
.nb-pad button[data-gesture="LEFT"]{grid-column:1;grid-row:2}
.nb-pad button[data-gesture="RIGHT"]{grid-column:3;grid-row:2}
.nb-pad button[data-gesture="DOWN"]{grid-column:2;grid-row:2}

/* ------------------------------ 导览卡片 -------------------------------- */
.nb-tour{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  padding:var(--sp-3) var(--sp-2) var(--sp-2) var(--sp-3);
}
.nb-tourHead{
  flex:0 0 auto;
  padding-bottom:9px;border-bottom:1px solid var(--line);
}
.nb-railTitle p{margin:3px 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.nb-railCtl{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.nb-navGroup{display:inline-flex;gap:4px}

.nb-tabs{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.nb-tab{
  border:1px solid var(--line);background:var(--paper-0);border-radius:var(--r-pill);
  padding:4px 10px;font-size:var(--fs-xs);color:var(--ink-2);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.nb-tab:hover{background:var(--paper-2);border-color:var(--line-2)}
.nb-tab.is-on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}

.nb-railList{
  flex:1 1 auto;min-height:0;
  margin-top:10px;
  overflow-y:auto;overscroll-behavior:contain;
  scroll-behavior:smooth;                  /* 自动跟随正在演示的词条时是滑过去的 */
  padding-right:4px;
  display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.nb-railList::-webkit-scrollbar{width:8px}
.nb-railList::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.nb-railList::-webkit-scrollbar-track{background:transparent}

.nb-group{
  background:var(--paper-0);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-3) 10px;
}
.nb-group[hidden]{display:none}
.nb-groupHead{
  display:flex;align-items:baseline;gap:8px;margin:0 0 4px;
}
.nb-groupHead b{font-size:var(--fs-md);font-weight:700;letter-spacing:.04em;color:var(--ink)}
.nb-groupHead s{text-decoration:none;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.nb-groupDesc{margin:0 0 8px;font-size:var(--fs-sm);color:var(--ink-2)}

.nb-entry{
  display:block;width:100%;text-align:left;position:relative;
  background:var(--paper-1);border:1px solid var(--line);
  border-radius:var(--r-md);padding:9px 11px;margin-top:6px;cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),
             transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease);
}
.nb-entry:hover{border-color:var(--line-2);background:var(--paper-0)}
.nb-entry:active{transform:scale(.995)}
.nb-entry.is-on{border-color:var(--brand-400);box-shadow:0 0 0 3px var(--brand-50)}
.nb-entry.is-playing{border-color:var(--brand-500);background:var(--brand-50)}
.nb-entry.is-done{background:var(--paper-0)}
.nb-entry.is-done .nb-num{background:var(--ok)}

.nb-entryHead{display:flex;align-items:baseline;gap:9px}
.nb-num{
  flex:0 0 auto;font:700 var(--fs-xs)/19px var(--mono);
  color:var(--on-ink);background:var(--ink-3);border-radius:var(--r-xs);
  width:26px;text-align:center;transition:background var(--dur) var(--ease);
}
.nb-entry.is-on .nb-num,.nb-entry.is-playing .nb-num{background:var(--brand-500)}
.nb-ttl{flex:1 1 auto;min-width:0;font-size:var(--fs-lg);font-weight:600;color:var(--ink)}
.nb-sub{flex:0 0 auto;font-size:var(--fs-xs);color:var(--ink-3)}
.nb-entryExpand{display:none;margin:8px 0 0 35px}
.nb-entry.is-on .nb-entryExpand{display:block;animation:nbExpand 200ms var(--ease)}
@keyframes nbExpand{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
/* 正在演示的那条：序号轻轻呼吸（只动 transform） */
.nb-entry.is-playing .nb-num{animation:nbPulse 1.6s ease-in-out infinite}
@keyframes nbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.nb-kv{display:flex;gap:8px;margin-top:5px;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
.nb-kv i{
  flex:0 0 62px;font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding-top:2px;
}
.nb-kv b{font-weight:500}
.nb-kvSay b{font-weight:600;color:var(--brand-700)}
.nb-bar{display:block;height:2px;margin-top:8px;border-radius:2px;background:var(--brand-200);overflow:hidden}
.nb-bar i{display:block;height:100%;width:0;background:var(--brand-500);transition:width var(--dur-slow) var(--ease)}

/* =========================== 底部：状态栏 + 版权 =========================== */
.nb-status{
  flex:0 0 64px;height:64px;
  display:flex;align-items:center;gap:8px;
  padding:0 var(--sp-5);
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(140%) blur(8px);
}

/* 桌面：chip 带是一条不伸缩的横排，台词行吃掉剩下的宽度，版权靠右；
   手机：变成「台词 → chip → 版权」三行（见手机模式段） */
.nb-statusChips{
  flex:0 0 auto;min-width:0;
  display:flex;align-items:center;gap:8px;
}

/* 只在手机模式出现的入口（导览卡的「手动操作」/ 操作台的「返回导览」）：
   桌面两张卡片本来就并排全显示，不需要这两个按钮 */
.nb-onlyMobile{display:none}
.nb-cardHeadTxt{min-width:0}

/* 屏幕台词镜像（纯网页侧可读性镜像，不参与屏幕渲染）
   长台词最多两行，超出才省略；全文同时写进 title，不会「看不到」 */
.nb-statusLine{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:8px;
  padding:0 var(--sp-2);
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  min-height:36px;
}
.nb-statusLine i{
  flex:0 0 auto;font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;
}
.nb-statusLine b{
  flex:1 1 auto;min-width:0;
  font-size:var(--fs-md);font-weight:500;color:var(--ink);
  line-height:1.36;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}

/* 公司版权声明：正式页脚，桌面靠右单行，手机居中一行 */
.nb-legal{
  flex:0 0 auto;
  display:inline-flex;align-items:baseline;gap:6px;
  font-size:10.5px;line-height:1.2;letter-spacing:.02em;
  color:var(--ink-3);white-space:nowrap;
}
.nb-legal b{font-weight:700;letter-spacing:.12em;color:var(--ink-2)}

.nb-note{margin:8px 0 0;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.5}

/* =========================== 开发者抽屉 =========================== */
.nb-drawer{
  position:absolute;left:0;right:0;bottom:0;z-index:50;
  max-height:64%;
  display:flex;flex-direction:column;
  background:var(--paper-0);
  border-top:1px solid var(--line-2);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:0 -12px 40px rgba(44,35,22,.20);
  transform:translateY(100%);
  transition:transform var(--dur-slow) var(--ease);
}
/* 作者样式的 display:flex 会盖掉 UA 的 [hidden]{display:none}，这里显式补回来，
   否则收起的抽屉仍然留在无障碍树里 */
.nb-drawer[hidden]{display:none}
.nb-drawer.is-open{transform:translateY(0)}
.nb-drawerHead{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:10px var(--sp-4);border-bottom:1px solid var(--line);
}
.nb-drawerHead b{font-size:var(--fs-lg)}
.nb-drawerBody{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--sp-3) var(--sp-5) var(--sp-5);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--sp-4);
  align-items:start;
}
.nb-dsec{min-width:0}
.nb-dsec h3{
  margin:0 0 8px;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;
}
.nb-drow{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.nb-btnWrap{display:flex;flex-wrap:wrap;gap:6px}
.nb-btnWrap button{font:inherit;font-size:var(--fs-sm);padding:5px 11px;background:var(--paper-0);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;color:var(--ink-2)}
.nb-btnWrap button:hover{background:var(--paper-2);border-color:var(--line-2)}
.nb-btnWrap button.is-on{background:var(--brand-500);border-color:var(--brand-500);color:var(--on-accent)}

textarea{
  width:100%;min-height:74px;margin-top:8px;padding:8px 10px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper-1);color:var(--ink);
  font:var(--fs-xs)/1.55 var(--mono);resize:vertical;
}
textarea.vars{min-height:56px}
.nb-validate{margin-top:8px;font:var(--fs-xs)/1.5 var(--mono);color:var(--ink-3)}
.nb-validate.ok{color:var(--ok)}
.nb-validate.err{color:var(--danger)}

.nb-legend{margin:0}
.nb-legend summary{cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.nb-legend ul{margin:8px 0 0;padding-left:18px}
.nb-legend li{font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:4px}
.nb-legend li b{color:var(--ink);font-weight:600}

/* =============================================================================
   深色外观（跟随系统）
   -----------------------------------------------------------------------------
   只换「网页外壳」的纸与墨：页面底、顶栏、卡片、按钮、文字。
   墨水屏（--epd-paper）永远是纸白 —— 真机面板的物理颜色不跟着系统变，
   产品照放在深色页面上本来也该是「一块亮的屏」。
   产品正视图是**纯白底线稿**，所以深色下 invert + screen：底变透明、线条变白。
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root{
    --paper-0:#1E1D1B; --paper-1:#25241F; --paper-2:#2C2A26; --paper-3:#131211; --paper-4:#3A3834;
    --line:#37352F; --line-2:#4C4942;
    --ink:#F4F1EA; --ink-2:#C8C2B7; --ink-3:#A29B8E;
    --brand-50:#2E2015; --brand-100:#3A281A; --brand-200:#4E3620; --brand-300:#6B4A2A;
    --brand-400:#F0A868; --brand-500:#E9A063; --brand-600:#D98F4E; --brand-700:#C77C3C;
    --brand-800:#E9C49C; --brand-900:#F2DCC4;
    --on-accent:#3A1E08; --on-ink:#15140F;
    --ok:#7FCFA1; --ok-bg:#16301F;
    --warn:#E7C063; --warn-bg:#32270D;
    --danger:#F0A79F; --danger-bg:#3A1A16;
    --shell-shadow:0 10px 22px rgba(0,0,0,.34), 0 30px 60px rgba(0,0,0,.46);
  }
  body.nb-body{
    background:
      radial-gradient(1200px 620px at 50% -8%, #26241F 0%, rgba(38,36,31,0) 62%),
      var(--paper-3);
  }
  .nb-stage{
    background:
      radial-gradient(900px 420px at 18% -10%, #26241F 0%, rgba(38,36,31,0) 60%),
      linear-gradient(180deg,#1C1B19 0%,#171614 58%,#131211 100%);
  }
  .nb-top,.nb-status{background:rgba(28,27,25,.76)}
  .nb-err{background:var(--danger-bg);border-bottom-color:#4E2A24}
  .nb-devImg{mix-blend-mode:screen;filter:invert(1)}
  .nb-entry.is-on{box-shadow:0 0 0 3px var(--brand-100)}
}

/* =============================================================================
   手机模式（html[data-layout="mobile"]）—— 照 iOS 的排版习惯重排
   -----------------------------------------------------------------------------
   触发方式：URL ?layout=mobile（或 ?mode=phone），或外部控制
             NODBOT_SIM.setLayout('mobile') / postMessage {action:'setLayout'}。

   · 安全区  .nb-frame 吃 env(safe-area-inset-*)，js/fit.js 把舞台放进它的内容盒，
             刘海和底部横条压不到顶栏 / 状态栏 —— 这条不做，iPhone 上一眼就看得出是网页
   · 竖向    画布高度由 fit.js 按真实视口反算（CSS 里的 844 只是 JS 没跑时的兜底），
             面板吃掉剩下的全部高度 —— 每台手机都是「刚好一屏」，不会有上下黑边
   · 竖向2   默认只显示「导览」一张卡片，并自动连续播放 —— 手机上要的是打开就看，
             手动入口收进导览卡的「手动操作」（不摆分段切换，省下 54px 给面板）
   · 触控    分段内芯 44（轨道 48）· 按钮 48 · 十字键 58 · 滑杆拇指 24 · 词条 52
             → 全部 ≥ WCAG 2.2 SC 2.5.8 的 44×44
   · 组件    分段控件用 iOS 13+ 的「灰轨道 + 白药丸 + 一层轻阴影」；
             按压反馈是整块变暗而不是缩放（缩放是 Material 的手感，iOS 是整块高亮）
   ========================================================================== */

html[data-layout="mobile"],
html[data-layout="mobile"] body.nb-body{height:100%}
/* iOS 16.4+ 有 dvh：地址栏收放时高度跟着变，不会再被裁掉一块 */
@supports (height:100dvh){
  html[data-layout="mobile"],
  html[data-layout="mobile"] body.nb-body{height:100dvh}
}
html[data-layout="mobile"] body.nb-body{
  min-height:100%;padding:0;overflow:hidden;
  align-items:stretch;justify-content:center;
  overscroll-behavior:none;
}
html[data-layout="mobile"] .nb-frame{
  aspect-ratio:auto;height:100%;min-height:0;
  max-width:none;border-radius:0;box-shadow:none;
  /* 安全区：舞台由 fit.js 放进这四个内边距围出来的内容盒里 */
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px)
          env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}
/* 390 = iPhone 12–16 的逻辑宽度：不缩放时 44 的设计尺寸就是 44pt 的拇指热区 */
html[data-layout="mobile"] .nb-stage{width:390px;height:844px}

/* 顶栏 52：logo + NODBOT 模拟器 + 聚焦框 + 中/EN，其余让位 */
html[data-layout="mobile"] .nb-top{flex:0 0 52px;height:52px;padding:0 12px;gap:8px}
html[data-layout="mobile"] .nb-brand{gap:8px}
html[data-layout="mobile"] .nb-brand .nb-mark svg{width:26px;height:26px}
html[data-layout="mobile"] .nb-brandTxt{min-width:0}
html[data-layout="mobile"] .nb-brandTxt b{
  font-size:15.5px;letter-spacing:.03em;
  white-space:nowrap;   /* 品牌不再省略成「NODBOT N…」 */
}
html[data-layout="mobile"] .nb-brandTxt i,
html[data-layout="mobile"] .nb-ver,
html[data-layout="mobile"] .nb-link{display:none}
/* 聚焦框在顶栏里收成一个 44×44 的图标按钮（放在状态 chip 带里会和读数混在一起） */
html[data-layout="mobile"] #btnFocus{width:44px;min-height:44px;padding:0;justify-content:center;font-size:0;flex:0 0 44px}
html[data-layout="mobile"] #btnFocus::before{content:"◎";font-size:17px;line-height:1}

/* 开发者入口在手机顶栏收成一枚 44 宽的 DEV 小按钮（正常用户看不到） */
html[data-layout="mobile"] #btnDev{
  width:44px;min-height:44px;padding:0;font-size:0;flex:0 0 44px;
  justify-content:center;
}
html[data-layout="mobile"] #btnDev::before{content:"DEV";font-size:9px;font-weight:700;letter-spacing:.04em}

/* iOS 13+ 分段控件：灰轨道 + 白药丸 + 一层很轻的阴影 */
html[data-layout="mobile"] .nb-seg{
  padding:2px;background:var(--paper-3);border-color:transparent;border-radius:11px;
}
html[data-layout="mobile"] .nb-seg button{
  min-height:44px;padding:0 14px;border-radius:9px;
  font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;
}
html[data-layout="mobile"] .nb-seg button.is-on{
  background:var(--paper-0);color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.05);
}

/* 主体：单列从上往下排（左右分栏 → 上下结构） */
html[data-layout="mobile"] .nb-main{
  display:flex;flex-direction:column;gap:10px;
  padding:8px 10px;
}
html[data-layout="mobile"] .nb-left{flex:0 0 auto;align-items:stretch}
/* 370 宽（矮屏会自动降到 250–370，见 fit.js）：屏幕在 390 画布里左右留白，
   机身不会贴边；高度按机身图比例 = 宽 × 1.0674 */
html[data-layout="mobile"] .nb-shell{
  width:var(--nb-dev-w,370px);
  height:calc(var(--nb-dev-w,370px) * 1.0674);
  margin:0 auto;
}
html[data-layout="mobile"] .nb-hint{margin:6px 0 0;font-size:11px;line-height:1.45;padding:0 2px}
html[data-layout="mobile"] .nb-hint[data-hint="desktop"]{display:none}
html[data-layout="mobile"] .nb-hintM{display:block}

/* 手机模式默认只显示导览，不再摆「操作 / 导览」分段（省下 54px 给面板）：
   两个低打扰入口只在手机上出现 —— 导览卡的「手动操作」、操作台的「返回导览」 */
html[data-layout="mobile"] .nb-onlyMobile{display:inline-flex}
html[data-layout="mobile"] .nb-ctl .nb-cardHead{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
}
html[data-layout="mobile"] #btnManual{margin-left:auto}

/* 面板区：占满剩余高度，是手机模式下唯一的滚动容器 */
html[data-layout="mobile"] .nb-right{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;gap:10px;
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;scrollbar-width:none;
}
html[data-layout="mobile"] .nb-right::-webkit-scrollbar{width:0;height:0}
html[data-layout="mobile"] .nb-right[data-mpanel="ctl"] .nb-tour{display:none}
html[data-layout="mobile"] .nb-right[data-mpanel="tour"] .nb-ctl{display:none}
/* 面板是一屏里唯一的滚动区：底部留 12px 渐隐，卡片被截断时一眼能看出「下面还有」 */
html[data-layout="mobile"] .nb-right{
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 12px),transparent);
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 12px),transparent);
}
html[data-layout="mobile"] .nb-card{padding:10px;border-radius:14px}
html[data-layout="mobile"] .nb-cardHead{padding-bottom:8px}
html[data-layout="mobile"] .nb-cardTitle{font-size:16px}
html[data-layout="mobile"] .nb-cardLead{font-size:12.5px;line-height:1.45}
html[data-layout="mobile"] .nb-tour{padding:10px 8px 8px 10px}

/* 只留一个滚动容器（.nb-right 自己），不再嵌套滚动：
   列表自然撑开，手指一划到底，不会出现「里面还能滑」的困惑 */
html[data-layout="mobile"] .nb-tour{flex:0 0 auto}
html[data-layout="mobile"] .nb-railList{overflow:visible;flex:0 0 auto;margin-top:8px}
/* 分组标签改成一排可横滑；右端渐隐提示「还有更多」，不会看起来像被裁掉 */
html[data-layout="mobile"] .nb-tabs{
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
  margin-top:8px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
}
html[data-layout="mobile"] .nb-tabs::-webkit-scrollbar{display:none}
html[data-layout="mobile"] .nb-tab{flex:0 0 auto}
/* 导览卡那句长说明在手机上让位给列表；英文副标题也不再挤占标题宽度 */
html[data-layout="mobile"] .nb-tour .nb-cardLead{display:none}
html[data-layout="mobile"] .nb-sub,
html[data-layout="mobile"] .nb-groupHead s{display:none}

/* 播放控制：手机上隐藏「上一条 / 停止 / 下一条」，点词条本身就能导航；
   保留下来的播放、速度、手动操作刚好排成一行 */
html[data-layout="mobile"] .nb-railCtl{flex-wrap:nowrap;gap:8px;margin-top:8px;overflow-x:auto;scrollbar-width:none}
html[data-layout="mobile"] .nb-railCtl::-webkit-scrollbar{display:none}
html[data-layout="mobile"] .nb-navGroup{display:none}
html[data-layout="mobile"] #btnTourPlay{min-height:44px;padding:0 14px}
html[data-layout="mobile"] #btnManual{margin-left:auto;min-height:44px}
html[data-layout="mobile"] .nb-railCtl .nb-sel{flex:0 0 auto}
html[data-layout="mobile"] .nb-railCtl .nb-sel select{height:44px;font-size:13px}

/* 操作台改成 iOS 的分组列表：一行一个语义，行间一条分隔线 */
html[data-layout="mobile"] .nb-ctl{gap:0}
html[data-layout="mobile"] .nb-ctlRow{
  flex-wrap:wrap;align-items:flex-start;gap:8px;
  padding:10px 0;border-top:1px solid var(--line);
}
html[data-layout="mobile"] .nb-cardHead + .nb-ctlRow{border-top:0;padding-top:2px}
html[data-layout="mobile"] .nb-ctlLabel{
  flex:0 0 100%;text-align:left;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}
html[data-layout="mobile"] .nb-ctlBtns{flex:1 1 100%}
/* BOOT 四颗排成 2×2 等宽网格 —— 中英文都不会因为字宽不同而错位 */
html[data-layout="mobile"] .nb-ctlBtns[data-grid="2"]{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html[data-layout="mobile"] .nb-ctlCol{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}

/* TOF 十字键：58 一格，和右边的三颗手势按钮并排（不用上下叠，省一整行） */
html[data-layout="mobile"] .nb-pad{
  flex:0 0 auto;
  grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,58px);
  gap:6px;margin:0;
}
html[data-layout="mobile"] .nb-pad .nb-btnIcon{width:58px;min-height:58px;font-size:20px}

/* 触控尺寸 + iOS 的按压反馈（整块变暗，不缩放） */
html[data-layout="mobile"] .nb-btn{min-height:48px;padding:0 16px;font-size:15px;font-weight:500;border-radius:12px}
html[data-layout="mobile"] .nb-btn:active{transform:none;background:var(--paper-3);border-color:var(--line-2)}
html[data-layout="mobile"] .nb-btnPrimary:active{background:var(--brand-600)}
html[data-layout="mobile"] .nb-btnIcon{width:48px;min-height:48px;font-size:18px}
html[data-layout="mobile"] .nb-btnSm{min-height:36px;padding:0 12px}
html[data-layout="mobile"] .nb-tab{min-height:40px;padding:8px 14px;font-size:13px;white-space:nowrap}
html[data-layout="mobile"] .nb-entry{min-height:52px;padding:12px;border-radius:12px}
html[data-layout="mobile"] .nb-entry:active{transform:none;background:var(--paper-2)}
html[data-layout="mobile"] .nb-ttl{font-size:15px}
html[data-layout="mobile"] .nb-num{width:28px;line-height:24px}
html[data-layout="mobile"] .nb-entryExpand{margin-left:0;margin-top:8px}
html[data-layout="mobile"] .nb-kv{font-size:12.5px;gap:8px}
html[data-layout="mobile"] .nb-kv i{
  flex:0 0 64px;font-size:10px;letter-spacing:.04em;white-space:nowrap;padding-top:3px;
}

/* 滑杆：6px 轨道 + 24px 拇指（iOS 的拇指是「能捏住」的大小） */
html[data-layout="mobile"] .nb-range{flex:1 1 auto}
html[data-layout="mobile"] .nb-range input[type=range]{width:100%;height:28px}
html[data-layout="mobile"] .nb-range input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px}
html[data-layout="mobile"] .nb-range input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-9px}
html[data-layout="mobile"] .nb-range input[type=range]::-moz-range-track{height:6px;border-radius:3px}
html[data-layout="mobile"] .nb-range input[type=range]::-moz-range-thumb{width:22px;height:22px}

/* 错误横幅跟着变矮的顶栏走 */
html[data-layout="mobile"] .nb-err{top:52px}

/* 状态栏：台词在上（可两行），chip 带在中可横滑，版权在最底一行 */
html[data-layout="mobile"] .nb-status{
  flex:0 0 auto;min-height:86px;
  flex-direction:column;align-items:stretch;gap:3px;padding:6px 12px;
}
html[data-layout="mobile"] .nb-statusLine{
  order:1;
  flex:0 0 auto;min-height:0;padding:0;align-items:flex-start;
  border:0;
}
html[data-layout="mobile"] .nb-statusLine i{flex:0 0 auto;font-size:10px;padding-top:2px}
html[data-layout="mobile"] .nb-statusLine b{font-size:13.5px;font-weight:500;line-height:1.35}
html[data-layout="mobile"] .nb-statusChips{
  order:2;
  display:flex;flex:0 0 24px;height:24px;align-items:center;gap:5px;
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);
}
html[data-layout="mobile"] .nb-statusChips::-webkit-scrollbar{display:none}
html[data-layout="mobile"] .nb-statusChips .nb-chip{flex:0 0 auto;padding:3px 7px;font-size:10px;letter-spacing:0}
/* 色阶 chip 在手机上让位给「就绪」，保证英文版 6 枚 chip 也能整排放下 */
html[data-layout="mobile"] #grayTag{display:none}
html[data-layout="mobile"] .nb-legal{
  order:3;justify-content:center;
  font-size:9.5px;letter-spacing:.01em;
}
html[data-layout="mobile"] .nb-legal b{letter-spacing:.1em}

/* ---------------------------- 减少动效偏好 ------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .nb-railList{scroll-behavior:auto}
}

/* --------------------------- 宿主页面很窄时 ----------------------------- */
@media (max-width:1180px){
  body.nb-body{padding:var(--sp-3)}
}
@media (max-width:640px){
  body.nb-body{padding:0}
  .nb-frame{border-radius:0;box-shadow:none}
}