/* ==========================================================================
首页专用样式（2026-10-14）· 「1 级」起点引导
--------------------------------------------------------------------------
为什么单独一个文件：app.css 当时正被另一路会话改着，首页这几条规则独立成
一个文件就不会互相打架；只在首页 一次（view.layout 的 css 选项），
其它页面零成本。
★ 设计约束（照抄全站设计系统）：方角 · 2px 实描边 · **硬投影、零模糊**。
所以"呼吸微光"在这里不是模糊外发光，而是**零模糊的硬边光圈**
（box-shadow 的 blur 半径 = 0，只走 spread），并且
**不缩放文字**（缩放会让像素描边与汉字亚像素发糊，还会把 8 格刻度尺撑歪）。
★ 动效预算（用户要求"抓眼但耐看"，别高频闪）：
· 入场：2 次像素弹跳（steps 硬边缓动，共 1.2 秒）——抓眼只在这 1.2 秒；
· 常驻：硬边光圈 + 底部强调条 2.6 秒一个来回（比 2 秒慢，不催人）；
· 悬停/聚焦：暂停呼吸（不跟 hover 的硬投影抢戏）；
· 系统开启"减少动态效果"：全部静止，只留一圈静态硬环与气泡（气泡不是动效）。
========================================================================== */
/* 格子本身要抬起一层，气泡才能盖住下面的内容；.seg 本来就是 position:relative */
.ruler .seg.start{z-index:4}
/* 眼球先落在"起点"上：数字用强调色加粗（与其它免费级别区分的是光圈，不是颜色） */
.ruler .seg.start .num{color:var(--accent-d)}
/* 硬边光圈（inset = 画在格子内部，绝不越过相邻格、也不会歪掉网格）
★ 呼吸区间取 1px→3px（**不归零**）：归零的话一圈会周期性完全消失，
看起来像"闪了一下又没了"；留 1px 底线 = 常驻可见 + 缓慢起伏。 */
.ruler .seg.start::after{
content:'';position:absolute;inset:0;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(34,160,107,.9);
animation:startRing 2.6s ease-in-out infinite;
}
/* 底部强调条跟着一起呼吸（与 hover 态的 inset 底条同一套语言），同样留 1px 底线 */
.ruler .seg.start::before{
content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
pointer-events:none;animation:startBar 2.6s ease-in-out infinite;
}
@keyframes startRing{
0%,100%{box-shadow:inset 0 0 0 1px rgba(34,160,107,.9)}
50%{box-shadow:inset 0 0 0 3px rgba(34,160,107,.6)}
}
@keyframes startBar{0%,100%{height:1px}50%{height:4px}}
/* 入场：两次像素弹跳（第一印象；之后交给慢呼吸） */
.ruler .seg.start.guiding{animation:startNudge 1.2s steps(3,end) 2}
@keyframes startNudge{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px)}}
/* 悬停/键盘聚焦：呼吸暂停（保持当前帧），点击手感交给 .seg:hover 自己的硬投影 */
.ruler .seg.start:hover::after,.ruler .seg.start:focus-visible::after,
.ruler .seg.start:hover::before,.ruler .seg.start:focus-visible::before{animation-play-state:paused}
/* ---------- 首访一次性气泡「从这里开始 →」 ----------
位置：贴在 1 级格子的**正上方**。为什么不用下方：刻度尺下面紧接着就是
「HOW IT WORKS」小标题，气泡放下面会压住它；而 .ruler 有 margin-top:34px，
上方这 34px 是**保证空白**的，放得下（气泡约 30px 高）。 */
.ruler .startpop{
position:absolute;left:50%;bottom:100%;margin-bottom:6px;transform:translateX(-50%);z-index:6;
display:flex;align-items:center;gap:6px;white-space:nowrap;
background:var(--ink);color:#fff;border:2px solid var(--ink);
padding:6px 11px;font-size:13px;font-family:var(--sans);font-weight:700;
box-shadow:4px 4px 0 rgba(27,36,48,.22);
}
.ruler .startpop i{font-style:normal;font-weight:400;animation:startArrow 1.3s steps(2,end) infinite}
@keyframes startArrow{0%,60%{transform:translateX(0)}80%{transform:translateX(3px)}100%{transform:translateX(0)}}
/* 朝下的小方块（像素风不用三角形，用一格方块），指向 1 级那格 */
.ruler .startpop::before{content:'';position:absolute;left:50%;margin-left:-4px;bottom:-7px;width:8px;height:8px;background:var(--ink)}
.ruler .startpop:hover{background:var(--accent-d);border-color:var(--accent-d)}
.ruler .startpop:hover::before{background:var(--accent-d)}
/* 窄屏：格子只剩 ~40px 宽，气泡居中会顶出屏幕左边 → 改成贴着 1 级格子左缘 */
@media(max-width:900px){
.ruler .startpop{left:0;transform:none;font-size:12.5px;padding:5px 9px}
.ruler .startpop::before{left:16px;margin-left:0}
}
/* 无障碍：系统要求"减少动态效果"时完全静止（静态硬环 + 静态底条 + 气泡仍可见） */
@media (prefers-reduced-motion:reduce){
.ruler .seg.start.guiding{animation:none}
.ruler .seg.start::after{animation:none;box-shadow:inset 0 0 0 3px rgba(34,160,107,.6)}
.ruler .seg.start::before{animation:none;height:4px}
.ruler .startpop i{animation:none}
}
/* ============================================================================
「数字条 + 学 → 练 → 改」（★ 2026-10-16 用户要求改版）
----------------------------------------------------------------------------
起因（用户原话）："首页 4–8 级每个都有 499 的价格…像一个商品网站，不是学习网站"。
这一块改成两段：**先给体量（数字条）**，**再讲闭环（学→练→改）**。
设计原则（不靠加装饰，靠结构 / 动线 / 证据）：
· 编号徽章把"三个并列"变成"三个步骤"（01 学 / 02 练 / 03 改）；
· 卡片之间放像素箭头 → 让"闭环"在视觉上成立（窄屏隐藏，靠徽章保序）；
· 每张卡底部一条虚线 + **可点的证据位**（卡片本身是 ，不是装饰）；
· 三张插画基线对齐（同一个 .ic 盒子、同尺寸）；
· hover 沿用全站硬边投影语言（4px → 8px），不引入第二种投影风格；
· 只有第一张（学＝入口）的徽章填充主题绿，形成阅读起点。
★ 变量纪律：只用 app.css / tokens.css 里**真实存在**的变量
（--ink --ink-2 --text-2 --text-3 --panel --panel-2 --panel-3 --bd --sh --mono
--accent --accent-d --accent-bg --accent-wash）。踩过的坑：我曾写过 --bd2/--line/--emerald，
它们**都不存在** ⇒ 徽章变"白底白字"（看不见）、虚线消失。改动时请先 grep 变量是否存在。
禁止：卡片里放数字（数字归数字条）、放价格（价格归页脚）、放金币宠物、提"家长可查看记录"。
============================================================================ */
.feats{margin-top:26px}
/* ---------- 数字条：无边框，只有上下两条细线（细描边用 1px + 半透明墨色） ---------- */
.fstat{border-top:1px solid rgba(27,36,48,.18);border-bottom:1px solid rgba(27,36,48,.18);padding:10px 2px}
.fstat .statbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 4px}
.fstat .sn{display:inline-flex;align-items:baseline;gap:5px}
.fstat .sn b{font-family:var(--mono);font-size:20px;font-weight:800;color:var(--ink);letter-spacing:.02em}
.fstat .sn i{font-style:normal;font-size:12.5px;color:var(--text-2)}
/* 项与项之间用中点分隔（::before 画，不占 HTML 结构、也不影响读屏） */
.fstat .sn + .sn::before{content:'·';color:var(--text-3);margin:0 10px 0 4px}
/* ---------- 三张卡：学 → 练 → 改 ---------- */
.feats .fgrid{display:flex;align-items:stretch;gap:8px;margin-top:14px}
.feats .farrow{flex:0 0 auto;align-self:center;font-weight:800;font-size:17px;color:var(--text-3);
padding:0 1px;user-select:none}
/* 卡片本体：（可点） */
.feats .fcard{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
padding:14px 15px 12px;background:var(--panel);border:var(--bd);box-shadow:var(--sh);
text-decoration:none;color:inherit;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.feats .fcard .ic{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
background:var(--panel-2);border:1.5px solid rgba(27,36,48,.2);margin-top:12px}
.feats .fcard .t{font-size:15px;font-weight:800;margin-top:10px}
.feats .fcard .d{font-size:12.5px;color:var(--text-2);margin-top:6px;line-height:1.7;text-wrap:pretty;flex:1}
/* 编号徽章：流式第一行（不用绝对定位，否则会压在图标上） */
.feats .fcard .badge{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
border:1.5px solid rgba(27,36,48,.2);background:var(--panel-2);padding:2px 7px 2px 6px;
font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--ink-2)}
.feats .fcard .badge b{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--text-2)}
/* 第一张卡（学＝入口）：徽章填充主题绿（--accent 是真实存在的变量） */
.feats .fcard.lead .badge{background:var(--accent);border-color:var(--accent-d);color:#fff}
.feats .fcard.lead .badge b{color:rgba(255,255,255,.86)}
/* 证据位：虚线上方是说明、下方一行小字（有去处，卡片才不是装饰） */
.feats .fcard .ev{margin-top:10px;padding-top:9px;border-top:1px dashed rgba(27,36,48,.25);
font-size:12.5px;font-weight:700;color:var(--accent-d)}
.feats .fcard:hover{transform:translate(-1px,-1px);border-color:var(--accent-d);
box-shadow:8px 8px 0 rgba(27,36,48,.22)}
.feats .fcard:hover .badge{border-color:var(--accent-d)}
.feats .fcard:hover .ev{text-decoration:underline}
/* 窄屏：箭头隐藏 + 单列（**徽章保留**，否则"学→练→改"的顺序感就没了） */
@media(max-width:900px){
.feats{margin-top:20px}
.feats .fgrid{display:grid;grid-template-columns:1fr;gap:12px}
.feats .farrow{display:none}
.feats .fcard{padding:13px 14px 12px}
.feats .fcard .ic{margin-top:10px}
}