/* ==========================================================================
   image-to-ascii v3 重设计（提案 demo）—— 覆盖层。
   思路同 image-splitter-v3：把 image-to-ascii.css 的 --ia-* 变量整套重映射到
   blkswn（白/黑/发丝线/荧光黄记号），再逐面重画可见控件；机制样式（画布容器、
   对比滑块的 clip-path/把手定位）原样复用。chrome 与正文区块直接用 theme.css
   的 .bs-*，页面自有区块用 .ia3-* 前缀，避免和生产终端主题的类名打架。
   ========================================================================== */

:root {
  /* 底色 / 面板 */
  --ia-bg: #ffffff;
  --ia-panel: var(--bs-bg-sub);
  --ia-ink: #ffffff;              /* 落在黑底填充上的字 */
  /* 磷光绿一族 → 全部收黑（老 CSS 里它们只剩「正文/强调」这一个角色） */
  --ia-fg: var(--bs-text);
  --ia-fg-80: var(--bs-text);
  --ia-fg-70: var(--bs-text-sub);
  --ia-fg-50: var(--bs-text-sub);
  --ia-fg-40: var(--bs-text-sub);
  --ia-phos: var(--bs-text);
  --ia-phos-55: var(--bs-border);
  --ia-phos-38: var(--bs-border);
  --ia-phos-22: var(--bs-border);
  --ia-phos-20: var(--bs-border);
  --ia-phos-16: var(--bs-border);
  /* 琥珀/青 强调色 → 荧光黄只留给「记号」，其余收黑 */
  --ia-amber: var(--bs-accent);
  --ia-amber-hi: var(--bs-accent);
  --ia-cyan: var(--bs-text);
  --ia-edge: var(--bs-border);
  --ia-edge-faint: var(--bs-border);
  /* 灰阶 / 发丝线 */
  --ia-mute-62: var(--bs-text-sub);
  --ia-mute-50: var(--bs-text-sub);
  --ia-mute-42: var(--bs-text-sub);
  --ia-hair: var(--bs-border);
  --ia-white: var(--bs-text);      /* 老值是纯白，在白底上会隐形 */
  /* 造型 / 字体 */
  --ia-glow: none;                 /* h1/h2/h3 的磷光外发光：blkswn 不做投影 */
  --ia-display: var(--bs-font-condensed);
  --ia-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Courier New", monospace;
  /* 版心：交给 .bs-wrap，这里只把老栅格收窄到不影响任何东西 */
  --ia-artboard: 84rem;
  --ia-pad: 2rem;
  --ia-band: 80rem;
  --ia-inset: 0px;
}

/* 生产的终端外壳：全屏 CRT 扫描线遮罩 + 底部状态栏留白，v3 一律不要。
   `body::after` 是第二层暗角遮罩（radial-gradient + z-index:99998），
   一并关掉 —— 不关的话整页四角发灰、蒙一层，与 blkswn 的纯白基底冲突。 */
body::before, body::after { display: none !important; }
/* image-to-ascii.css 的 body 还钉了 font-size:16px + line-height:20px，而 theme.css
   的 body 规则不写这两个属性 —— 值是活的，全站标准（html clamp→14.4px、行高 1.6）
   被顶掉，共享站头/站尾/FAQ/相关工具会整体大一号、行距偏紧。 */
body { padding-bottom: 0; font-size: 1rem; line-height: 1.6; }
::-moz-selection { background: var(--bs-accent); color: var(--bs-text); }
:focus-visible { outline: 2px solid var(--bs-text); outline-offset: 2px; border-radius: 0; }

/* ==========================================================================
   hero
   ========================================================================== */
.ia3-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
.ia3-hero-cta { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.5rem; }
/* 提高一级：theme.css 的 .bs-page-hero p { margin: 0 } 会盖过裸类选择器 */
.bs-page-hero .ia3-hero-note { margin: 2.5rem 0 0; font-size: 0.8rem; color: var(--bs-text-sub); }

/* 标题里的轮播词：{ 花括号 } 用荧光黄记号，词本身保持黑字 */
.ia-rotator { min-width: 9ch; text-shadow: none; }
.ia-brace { color: var(--bs-text-sub); font-weight: 300; }
.ia-word { background: var(--bs-accent); padding: 0 0.15em; }

/* ---- hero 对比滑块：机制沿用 prod（--split / clip-path / 把手定位） ---- */
.ia-compare { aspect-ratio: 4 / 3; background: #101010; border: 1px solid var(--bs-border); }
.ia-compare-veil { display: none; }
/* 角标：黑底白字压缩体（同 v3 的 .tile-badge 语汇），不再靠渐变遮罩压底 */
.ia-compare-tag {
  top: 8px; padding: 2px 8px; color: var(--bs-invert-text); background: rgba(0, 0, 0, 0.72);
  font-family: var(--bs-font-condensed); font-weight: 400; font-size: 10px; line-height: 16px;
  letter-spacing: 0.08em; text-transform: uppercase; text-shadow: none;
}
.ia-compare-tag--before { left: 8px; }
.ia-compare-tag--after { right: 8px; }
/* 分割线 = 唯一的记号色 */
.ia-compare-line { background: var(--bs-accent); width: 2px; }
.ia-compare-grip {
  background: var(--bs-accent); color: var(--bs-text); border: 1px solid var(--bs-text);
  box-shadow: none; transition: none; width: 2.4rem; height: 2.4rem;
}
/* 把手靠 left + translate(-50%,-50%) 定位，hover/active 只能去掉 scale，
   不能写 transform:none（会整个掉出画面）。 */
.ia-compare-grip:hover,
.ia-compare-grip:active { transform: translate(-50%, -50%); box-shadow: none; }
.ia-compare-grip:focus-visible { outline: 2px solid var(--bs-text); outline-offset: 3px; }
.ia-compare-arrows svg { width: 14px; height: 14px; }

/* ==========================================================================
   工具工作台（.tool__* 由生产 app.js 依赖的 DOM 保留，这里整面重画）
   —— prod 的这些规则用的是写死色值（#FF8A3C / rgba(255,255,255,…)），
      重映射变量救不了，必须逐条同权重覆盖（本 <style> 后载即胜出）。
   ========================================================================== */
.tool__wrap { max-width: none; padding: 1.5rem; }
.tool__panel { max-width: none; }
.tool__result { margin-top: 1.5rem; }
/* prod 把工具区整体居中排版（编辑部风格是左对齐的） */
.tool__controls { justify-content: flex-start; }
/* 「Try a sample photo」整块、以及 Download PNG / Copy as text 按钮组，都水平居中
   （用户 2026-07-20）——机制层本来就是 text-align:center / justify-content:center，
   v3 层此前刻意改成了左对齐，撤回。参数行 .tool__controls 保持左对齐。 */

.ia3-panel-title {
  font-family: var(--bs-font-condensed); font-weight: 500; font-size: 1.1rem;
  letter-spacing: 0.04rem; text-transform: uppercase;
}

/* 拖放区 */
.tool__drop {
  border: 1px dashed var(--bs-border); border-radius: 0; background: var(--bs-surface);
  color: var(--bs-text-sub); padding: 3rem 1.5rem; transition: none;
}
.tool__drop:hover, .tool__drop--over {
  border-color: var(--bs-text); color: var(--bs-text); background: var(--bs-bg-sub); outline: none;
}
/* prod 把 :focus-visible 的 outline 关掉了（连同 hover 一条规则），drop 是
   tabindex=0，必须把键盘焦点环还回来 */
.tool__drop:focus-visible {
  border-color: var(--bs-text); color: var(--bs-text); background: var(--bs-bg-sub);
  outline: 2px solid var(--bs-text); outline-offset: 2px;
}
.tool__drop-icon { opacity: 1; color: var(--bs-text); }
.tool__drop--over .tool__drop-icon { transform: none; }
.tool__drop-title {
  font-family: var(--bs-font-condensed); font-weight: 500; font-size: 1.05rem;
  letter-spacing: 0.04rem; text-transform: uppercase; color: var(--bs-text);
}
.tool__drop-sub { color: var(--bs-text-sub); }

/* 样例缩略图 */
.tool__samples { margin-top: 1.5rem; }
.tool__samples-title {
  font-family: var(--bs-font-condensed); font-weight: 500; font-size: 0.95rem;
  letter-spacing: 0.04rem; text-transform: uppercase; color: var(--bs-text);
}
.tool__samples-lead { color: var(--bs-text-sub); }
.tool__sample {
  border: 1px solid var(--bs-border); border-radius: 0; background: var(--bs-surface);
  transition: none;
}
.tool__sample:hover { border-color: var(--bs-text); transform: none; }
.tool__sample:focus-visible { border-color: var(--bs-text); transform: none; }
/* 选中 = 荧光黄，全站唯一的选中信号 */
.tool__sample.is-active { border-color: var(--bs-text); background: var(--bs-accent); transform: none; }
.tool__sample img { border-radius: 0; }
.tool__sample span { color: var(--bs-text); font-size: 0.75rem; }

/* 控件行 */
.tool__controls { color: var(--bs-text); margin-bottom: 1.25rem; }
.tool__ctl {
  font-family: var(--bs-font-condensed); font-weight: 400;
  font-size: clamp(11px, 0.75vw, 13px); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--bs-text);
}
.tool__ctl input[type="range"] { accent-color: var(--bs-text); }
.tool__ctl input[type="checkbox"] { accent-color: var(--bs-text); }
.tool__select {
  background: var(--bs-bg); color: var(--bs-text); border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius-pill); padding: 0.25rem 0.9rem;
  font-family: var(--bs-font-body); letter-spacing: 0.02rem; text-transform: none;
}
.tool__select:hover { background: var(--bs-bg-sub); }

/* 画布框：ASCII 渲染本身是深色画布，框保持发丝线方角 */
.tool__canvas-wrap {
  border: 1px solid var(--bs-border); border-radius: 0; background: #040406; padding: 0.6rem;
}

/* 按钮：黑白胶囊 */
.tool__btn {
  background: var(--bs-invert-bg); color: var(--bs-invert-text); border: 1px solid var(--bs-invert-bg);
  border-radius: var(--bs-radius-pill); font-family: var(--bs-font-body); font-weight: 500;
  padding: 0.5rem 1.5rem; transition: none;
}
.tool__btn:hover { background: var(--bs-surface); color: var(--bs-text); }
.tool__btn--ghost { background: var(--bs-surface); color: var(--bs-text); border-color: var(--bs-border); }
.tool__btn--ghost:hover { background: var(--bs-bg-sub); color: var(--bs-text); }

.tool__status { color: var(--bs-text-sub); font-size: 0.85rem; margin-top: 0.75rem; }
/* 错误态：blkswn 不用红色，改成荧光黄记号条 */
.tool__status--err {
  color: var(--bs-text); border-left: 3px solid var(--bs-accent);
  padding-left: 0.6rem; font-weight: 500;
}

/* ==========================================================================
   usecases —— 发丝线方格，hover 交叉淡出到彩色渲染（沿用 prod 的两图机制思路，
   但不吃 .ia-case* 的跑马灯/亮度滤镜，改用本页自有类）
   ========================================================================== */
.ia3-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1px; background: var(--bs-border); border: 1px solid var(--bs-border);
}
.ia3-grid > * { background: var(--bs-surface); padding: 1.5rem; margin: 0; }
/* usecases 自动跑马灯（用户 2026-07-20 选定：恢复本页改造前的效果）。
   纯 CSS 无限循环、无 JS：轨道里把卡片复制一份，位移到 -50% 时正好与起点重合。
   **卡片用 margin-right 而不是 track 的 gap 撑发丝线**：gap 会让 12 张卡之间只有
   11 道缝，-50% 就不等于「前 6 张的宽度」，每圈接缝处会跳半像素；margin 让每张卡
   自带一道缝，两半严格等宽。 */
.ia3-ticker { overflow: hidden; border: 1px solid var(--bs-border); }
.ia3-track {
  display: flex; width: max-content; background: var(--bs-border);
  animation: ia3TickerX 46s linear infinite; will-change: transform;
}
.ia3-ticker:hover .ia3-track { animation-play-state: paused; }
.ia3-track > .ia3-case {
  flex: 0 0 clamp(18rem, 24vw, 22rem); margin: 0 1px 0 0;
  background: var(--bs-surface); padding: 1.5rem;
}
@keyframes ia3TickerX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* 不滚就得让人能手动滑，否则副本之后的卡片永远够不着 */
  .ia3-track { animation: none; }
  .ia3-ticker { overflow-x: auto; }
}

.ia3-case-bar {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;
  font-family: var(--ia-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--bs-text-sub);
}
.ia3-case-bar::before { content: ">_"; color: var(--bs-text); }
.ia3-case-media {
  position: relative; width: 100%; aspect-ratio: 579 / 389; background: #101010;
  overflow: hidden; border: 1px solid var(--bs-border);
}
.ia3-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity 0.2s linear;
}
.ia3-shot--hover { opacity: 0; }
.ia3-case:hover .ia3-shot { opacity: 0; }
.ia3-case:hover .ia3-shot--hover { opacity: 1; }
.ia3-case h3 {
  font-family: var(--bs-font-condensed); font-weight: 500; font-size: 1.05rem;
  letter-spacing: 0.04rem; text-transform: uppercase; margin: 1rem 0 0.4rem;
}
.ia3-case p { margin: 0; font-size: 0.85rem; color: var(--bs-text-sub); }

/* ==========================================================================
   charsets / color modes
   ========================================================================== */
.ia3-card h3 {
  font-family: var(--bs-font-condensed); font-weight: 500; font-size: 1.05rem;
  letter-spacing: 0.04rem; text-transform: uppercase; margin: 0 0 0.75rem;
}
.ia3-card p { margin: 0; font-size: 0.85rem; color: var(--bs-text-sub); }
/* 字符坡度样本：黑底反白等宽（blkswn 的 invert 语汇），方角 */
.ia3-ramp {
  margin: 0 0 0.75rem; padding: 0.6rem 0.75rem; border-radius: 0;
  background: var(--bs-invert-bg); color: var(--bs-invert-text);
  font-family: var(--ia-mono); font-size: 0.8rem; line-height: 1.5;
  overflow-x: auto; white-space: pre-wrap; word-break: break-all;
}

/* ==========================================================================
   how-it-works 长文
   ========================================================================== */
/* prod 有 #learn { padding-bottom: 48px }（ID 选择器，裸类 .bs-section 盖不过），
   会让这一段和其他区块留白不齐 —— 用同权重的 #learn 拉回 v3 节奏 */
#learn { padding-bottom: 3.5rem; }
.ia3-prose { max-width: 52rem; }
.ia3-prose > p { margin: 0 0 1.25rem; font-size: 0.95rem; line-height: 1.75; color: var(--bs-text-sub); }
.ia3-prose h3 {
  font-family: var(--bs-font-condensed); font-weight: 500; font-size: 1.1rem;
  letter-spacing: 0.04rem; text-transform: uppercase; margin: 2rem 0 0.6rem; color: var(--bs-text);
}
.ia3-prose strong { color: var(--bs-text); font-weight: 500; }
.ia3-prose code {
  font-family: var(--ia-mono); font-size: 0.85em; background: var(--bs-accent);
  color: var(--bs-text); padding: 0 0.3em; border-radius: 0;
}

/* ==========================================================================
   收尾 CTA：黑反转面板 + 压暗的 ASCII 底图
   ========================================================================== */
.ia3-final { position: relative; overflow: hidden; background: var(--bs-invert-bg); padding: 4rem 2rem; }
.ia3-final-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.28; filter: grayscale(1); }
.ia3-final-inner { position: relative; z-index: 2; max-width: 40rem; }
.ia3-final h2 {
  font-family: var(--bs-font-condensed); font-weight: 500; font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  letter-spacing: 0.02rem; text-transform: uppercase; color: var(--bs-invert-text); margin: 0 0 0.75rem;
}
.ia3-final p { color: var(--bs-invert-text); opacity: 0.8; margin: 0 0 1.5rem; font-size: 0.9rem; }
.ia3-final-eyebrow {
  display: inline-block; margin: 0 0 1rem; padding: 0.1rem 0.6rem;
  background: var(--bs-accent); color: var(--bs-text);
  font-family: var(--bs-font-condensed); font-size: 0.75rem;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.ia3-final .bs-btn { background: var(--bs-surface); color: var(--bs-text); border-color: var(--bs-surface); }
.ia3-final .bs-btn:hover { background: var(--bs-accent); border-color: var(--bs-accent); color: var(--bs-text); }

/* ==========================================================================
   共享 chrome 复位（生产专用；demo 里这些元素不存在，规则惰性）
   --------------------------------------------------------------------------
   同 image-splitter-v3 的同名段，理由与写法一并照搬：生产把站头/面包屑/FAQ/
   相关工具/站尾交给共享组件，它们必须跟全站其他 v3 页一模一样；而
   image-to-ascii.css 是给独立终端布局写的，裸元素选择器会整片够到这些组件。

   作用域一律用 `:where()` 包 —— **特异性归零**，只压得过裸元素选择器
   （同为 0-0-1，本文件后载即胜），压不过 app.css 的任何类规则。

   **demo 在这件事上不是基准**：demo 页吃的是同一份 image-to-ascii.css，两边一起
   被污染，demo↔生产对照器会报 0 差异却都是错的。基准是 /compress-image，
   用 scripts/blkswn-v3/prod-chrome-diff.mjs 验收。
   ========================================================================== */
/* ① 裸 `a{...}`：把共享 chrome 里没写字重/字色的链接一起染掉 */
:where(.site-header-bar, .bs-breadcrumb, #faq, .related-tools, .bs-footer) a { font-weight: inherit; }
/* ② 裸 `button{font-family:inherit}` 无害，但字体栈还是还回 tokens 的 --sans，
      免得 image-to-ascii.css 的 :root 等宽变量顺着继承漏进共享组件 */
:where(.site-header-bar, .bs-breadcrumb, #faq, .related-tools, .bs-footer) { font-family: var(--sans); }
/* ③ 裸 `h1,h2,h3{...}` 会够到共享 FAQ / 相关工具的标题 */
:where(#faq, .related-tools, .bs-footer) :where(h1, h2, h3) { font-family: inherit; }
/* ④ 共享 FAQ / 相关工具组件自带 .wrap（平时它们是页面顶层区块）；本页把它们放进
      demo 的 main.bs-wrap.bs-main 里，会套出第二层更窄的容器（实测 1152→1094）。 */
.bs-main > .wrap { width: auto; max-width: none; padding-left: 0; padding-right: 0; }

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 960px) {
  .ia3-hero { grid-template-columns: 1fr; gap: 2rem; }
}