/* 「30秒看懂」：大字号、少文字、一次只动一件事。深浅色都用站点变量。 */
.qs { margin:26px 0 40px; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.qs-kicker { margin:0; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--accent); }
.qs h2 { margin:6px 0 16px; font-size:22px; line-height:1.4; }
.qs-stage { border-radius:12px; background:var(--bg); padding:16px; }
.qs-scene { position:relative; display:grid; grid-template-columns:1.5fr 1fr; gap:14px; align-items:stretch; }
.qs-board { display:grid; grid-template-columns:1fr 1fr; gap:10px; grid-column:1; }
.qs-cell, .qs-wallet, .qs-paper { padding:12px; border-radius:10px; background:var(--card); border:1px solid var(--line); }
.qs-cell small, .qs-wallet small, .qs-paper small { display:block; font-size:12px; color:var(--sub); }
.qs-cell b { display:block; font-size:26px; font-variant-numeric:tabular-nums; transition:color .3s; }
.qs-wallet { grid-column:2; grid-row:1 / span 2; display:flex; flex-direction:column; justify-content:center; text-align:center; border-color:var(--accent); }
.qs-big { font-size:44px; line-height:1.2; color:var(--accent); font-variant-numeric:tabular-nums; }
.qs-note { font-size:13px; color:var(--sub); margin-top:6px; }
.qs-paper { grid-column:1; border-style:dashed; border-color:#d97706; }
.qs-paper b { font-size:28px; color:#d97706; font-variant-numeric:tabular-nums; }
.qs-paper span { display:block; font-size:12px; color:#d97706; }
.qs-flow { grid-column:1; display:flex; flex-wrap:wrap; gap:6px; }
.qs-chip { padding:6px 10px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:14px; }
.qs-chip b { color:var(--accent); }
.qs-chip.qs-cost b { color:#dc2626; }
.qs-chip.qs-cash { border-style:dashed; }
.qs-chip.qs-cash b { color:var(--sub); }
/* 按帧显隐：淡入加轻微上移；减少动态效果时直接切换 */
[data-on] { opacity:0; transform:translateY(6px); transition:opacity .45s, transform .45s; pointer-events:none; }
[data-on].is-on { opacity:1; transform:none; pointer-events:auto; }
[data-on]:not(.is-on) { visibility:hidden; position:absolute; }
.qs-flow [data-on]:not(.is-on) { position:static; display:none; }
.qs-guide { display:flex; gap:12px; align-items:flex-start; margin-top:14px; }
.qs-dog { width:56px; height:56px; flex:0 0 56px; }
.qs-lines { list-style:none; margin:0; padding:12px 14px; flex:1; border-radius:12px 12px 12px 4px; background:var(--card); border:1px solid var(--line); font-size:16px; line-height:1.7; min-height:3.4em; }
.qs-controls { display:flex; align-items:center; gap:10px; margin-top:12px; }
.qs-controls > button { padding:8px 14px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--text); font:inherit; font-size:14px; cursor:pointer; }
.qs-play { background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; }
.qs-dots { display:flex; gap:6px; flex:1; justify-content:center; }
.qs-dots button { width:12px; height:12px; padding:0; border-radius:50%; border:1px solid var(--accent); background:transparent; cursor:pointer; }
.qs-dots button[aria-current="step"] { background:var(--accent); }
.qs-layers { display:grid; gap:12px; margin-top:18px; }
.qs-layer { display:grid; grid-template-columns:40px 1fr; gap:12px; padding:14px; border:1px solid var(--line); border-radius:12px; }
.qs-tag { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; font-size:16px; }
.qs-layer h3 { margin:4px 0 6px; font-size:16px; }
.qs-dao { font-size:17px; line-height:1.8; margin:0; font-weight:600; }
.qs-fa { margin:0; padding-left:20px; }
.qs-fa li { margin:6px 0; }
.qs-fa b { display:block; }
.qs-fa span { color:var(--sub); font-size:14px; }
.qs-real { display:grid; grid-template-columns:220px 1fr; gap:14px; align-items:start; }
.qs-real-fig svg { width:100%; height:auto; color:var(--sub); }
.qs-real-fig small { display:block; text-align:center; font-size:11px; color:var(--sub); }
.qs-svg-t { font-size:11px; fill:var(--sub); }
.qs-real p { margin:0 0 6px; font-size:14px; line-height:1.8; }
.qs-calc { margin:0; padding-left:18px; font-size:14px; line-height:1.9; }
.qs-calc b { font-variant-numeric:tabular-nums; }
.qs-neg { color:#dc2626; } .qs-pos { color:#059669; }
.qs-sub { margin:12px 0 4px; font-weight:700; font-size:14px; }
.qs-steps { margin:0; padding-left:20px; font-size:14px; line-height:1.8; }
.qs-foot { margin:10px 0 0; font-size:12px; color:var(--sub); }
.qs-tools { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.qs-tool { display:block; padding:10px; border:1px solid var(--line); border-radius:10px; text-decoration:none; }
.qs-tool b { display:block; color:var(--accent); font-size:14px; }
.qs-tool span { font-size:12px; color:var(--sub); line-height:1.6; }
.qs-deeper { margin:18px 0 0; text-align:center; font-size:13px; color:var(--sub); }
@media (max-width: 650px) {
  .qs { padding:16px; margin-left:-4px; margin-right:-4px; }
  .qs h2 { font-size:19px; }
  .qs-scene { grid-template-columns:1fr; min-height:300px; }
  .qs-board, .qs-paper, .qs-flow, .qs-wallet { grid-column:1; }
  .qs-wallet { grid-row:auto; }
  .qs-big { font-size:38px; }
  .qs-real { grid-template-columns:1fr; }
  .qs-real-fig { max-width:300px; margin:0 auto; width:100%; }
  .qs-tools { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) { [data-on] { transition:none; transform:none; } }

/* 第二版：价格小图、侧栏、先猜一下、自测、完整讲解折叠 */
.qs-chart { padding:8px; border-radius:10px; background:var(--card); border:1px solid var(--line); }
.qs-chart svg { width:100%; height:auto; display:block; }
.qs-base { stroke:var(--line); stroke-width:1.5; stroke-dasharray:4 4; }
.qs-seg { stroke:var(--accent); stroke-width:3; stroke-linecap:round; fill:none; }
.qs-t { font-size:12px; fill:var(--sub); }
.qs-bt { font-size:13px; font-weight:700; fill:#b45309; }
.qs-bubble { fill:#fef3c7; stroke:#d97706; stroke-dasharray:3 2; }
.qs-buy { fill:var(--accent); }
.qs-sell { fill:#fff; stroke:var(--accent); stroke-width:3; }
.qs-now { fill:#d97706; }
.qs-side { display:flex; flex-direction:column; gap:10px; }
.qs-side .qs-wallet { flex:1; grid-row:auto; grid-column:auto; }
.qs-guess { display:flex; gap:12px; align-items:flex-start; padding:14px; margin-bottom:14px; border-radius:12px; background:var(--bg); border:1px solid var(--line); }
.qs-guess p { margin:0 0 10px; font-size:16px; line-height:1.7; }
.qs-guess.is-done { opacity:.75; }
.qs-guess.is-done .qs-skip { display:none; }
.qs-opts { display:flex; flex-wrap:wrap; gap:8px; }
.qs-opt { min-width:84px; padding:9px 14px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--text); font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
.qs-opt[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
.qs-opt.is-right { border-color:#059669; color:#059669; }
.qs-opt.is-wrong { border-color:#dc2626; color:#dc2626; }
.qs-opt:disabled { cursor:default; }
.qs-skip { margin-top:8px; padding:0; border:0; background:none; color:var(--sub); font:inherit; font-size:13px; text-decoration:underline; cursor:pointer; }
.qs-verdict { margin:10px 0 0; padding:10px 12px; border-radius:10px; background:var(--card); border-left:3px solid var(--accent); font-size:15px; line-height:1.7; }
.qs-cost-line { margin:8px 0 0; font-size:14px; line-height:1.8; color:var(--sub); }
.qs-check { margin-top:18px; padding:16px; border-radius:12px; background:var(--bg); }
.qs-check h3 { margin:0 0 10px; font-size:16px; }
.qs-q + .qs-q { margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }
.qs-q p { margin:0 0 8px; font-size:15px; line-height:1.7; }
.qs-fb { margin-top:8px !important; font-size:14px !important; color:var(--sub); }
.qs-full { margin:8px 0 28px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.qs-full > summary { list-style:none; cursor:pointer; padding:16px 18px; display:flex; flex-direction:column; gap:4px; }
.qs-full > summary::-webkit-details-marker { display:none; }
.qs-full > summary b { font-size:17px; color:var(--text); }
.qs-full > summary b::after { content:" ▾"; color:var(--accent); }
.qs-full[open] > summary b::after { content:" ▴"; }
.qs-full > summary span { font-size:13px; color:var(--sub); line-height:1.7; }
.qs-full[open] { padding:0 18px 18px; }
.qs-full[open] > summary { padding-left:0; padding-right:0; }
@media (max-width: 650px) {
  .qs-scene { grid-template-columns:1fr; }
  .qs-guess { flex-direction:column; }
  .qs-guess .qs-dog { width:44px; height:44px; }
  .qs-opt { flex:1; min-width:0; }
}

/* 讲解区可见时，隐去页面角落的浮动小狗 */
.qs-in-view #tl-learning-dog { opacity:0; pointer-events:none; transition:opacity .3s; }
.qs-real-text { grid-template-columns:1fr !important; }
.qs-link { margin:10px 0 0; font-size:14px; font-weight:600; }

/* ---------- 手绘线稿画面（sketch）：方格纸、一笔画出、底部字幕、网址落款 ---------- */
.sk-stage { padding:0; background:none; }
.sk-frame { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.sk-svg { display:block; width:100%; height:auto; }
.sk-paper { fill:#fbf8f1; }
.sk-grid { fill:none; stroke:#e9e2d2; stroke-width:1; }
.sk-no { font-size:22px; font-weight:800; fill:#c2410c; }
.sk-title { font-size:22px; font-weight:800; fill:#2b2b2b; }
.sk-under { fill:none; stroke:#f59e0b; stroke-width:4; stroke-linecap:round; opacity:.75; }
.sk-tag { font-size:13px; fill:#8a8272; }
.sk-mark { font-size:13px; font-weight:700; fill:#a39a86; letter-spacing:.04em; }
.sk-ink { fill:none; stroke:#2b2b2b; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.sk-thin { fill:none; stroke:#2b2b2b; stroke-width:1.6; stroke-linecap:round; }
.sk-dash { fill:none; stroke:#8a8272; stroke-width:1.6; stroke-dasharray:6 6; }
.sk-green { stroke:#15803d; } .sk-red { stroke:#dc2626; } .sk-orange { stroke:#d97706; } .sk-blue { stroke:#2563eb; }
.sk-t { font-size:17px; fill:#2b2b2b; } .sk-s { font-size:14px; fill:#6b6455; }
.sk-big { font-size:44px; font-weight:800; fill:#15803d; }
.sk-tg { fill:#15803d; } .sk-tr { fill:#dc2626; } .sk-to { fill:#b45309; } .sk-tb { fill:#2563eb; }
.sk-note { fill:#fff7d6; stroke:#d97706; stroke-width:1.8; stroke-dasharray:5 3; }
.sk-fill-dot { fill:#2b2b2b; } .sk-sell-dot { fill:#fbf8f1; stroke:#15803d; stroke-width:3; }
/* 一笔画出：路径设 pathLength="1"，出现时从 1 画到 0 */
.sk-scene .draw { stroke-dasharray:1; stroke-dashoffset:1; }
.sk-scene [data-on].is-on .draw, .sk-scene .draw.is-on, .sk-scene .draw.always { animation:sk-draw .9s ease-out forwards; }
@keyframes sk-draw { to { stroke-dashoffset:0; } }
.sk-scene [data-on] { transform:none; transition:opacity .35s; }
.sk-scene { display:block !important; min-height:0 !important; }
.sk-frame { display:grid; grid-template-columns:56px 1fr; gap:10px 12px; align-items:center; padding-bottom:12px; background:var(--card); }
.sk-scene { grid-column:1 / -1; }
.sk-dog { width:52px; height:52px; margin-left:12px; }
.sk-sub { margin:0 12px 0 0; min-height:3.2em; padding:10px 14px; border-radius:10px; background:var(--card); border:1.5px solid var(--text); font-size:16px; line-height:1.65; color:var(--text); box-shadow:2px 3px 0 rgba(0,0,0,.08); }
:root[data-theme="dark"] .sk-paper { fill:#1f2126; }
:root[data-theme="dark"] .sk-grid { stroke:#2c2f36; }
:root[data-theme="dark"] .sk-title, :root[data-theme="dark"] .sk-t { fill:#ece8df; }
:root[data-theme="dark"] .sk-ink, :root[data-theme="dark"] .sk-thin { stroke:#ece8df; }
:root[data-theme="dark"] .sk-fill-dot { fill:#ece8df; }
:root[data-theme="dark"] .sk-sell-dot { fill:#1f2126; }
:root[data-theme="dark"] .sk-s, :root[data-theme="dark"] .sk-tag { fill:#a8a294; }
:root[data-theme="dark"] .sk-note { fill:#3a3120; }
@media (max-width: 650px) { .sk-frame { grid-template-columns:46px 1fr; } .sk-dog { width:42px; height:42px; margin-left:8px; } .sk-sub { font-size:15px; } }
@media (prefers-reduced-motion: reduce) { .sk-scene .draw { stroke-dashoffset:0 !important; animation:none !important; } }
/* 手绘抖动只作用于线条，文字保持清晰 */
.sk-ink, .sk-thin, .sk-note, .sk-under { filter:url(#skWobble); }
/* 底部左侧心里话、右侧访问引导 */
.sk-slogan { font-size:15px; font-weight:800; fill:#c2410c; }
.sk-invite { font-size:14px; font-weight:800; fill:#15803d; }
.sk-mark { font-size:15px; }
:root[data-theme="dark"] .sk-slogan { fill:#fb923c; }
:root[data-theme="dark"] .sk-invite { fill:#4ade80; }
/* 深色主题：彩色文字与彩色线条的优先级要高于通用的墨色规则 */
:root[data-theme="dark"] .sk-tg, :root[data-theme="dark"] .sk-t.sk-tg { fill:#4ade80; }
:root[data-theme="dark"] .sk-tr, :root[data-theme="dark"] .sk-t.sk-tr { fill:#f87171; }
:root[data-theme="dark"] .sk-to, :root[data-theme="dark"] .sk-t.sk-to { fill:#fbbf24; }
:root[data-theme="dark"] .sk-tb, :root[data-theme="dark"] .sk-t.sk-tb { fill:#60a5fa; }
:root[data-theme="dark"] .sk-green, :root[data-theme="dark"] .sk-ink.sk-green, :root[data-theme="dark"] .sk-thin.sk-green { stroke:#4ade80; }
:root[data-theme="dark"] .sk-red, :root[data-theme="dark"] .sk-ink.sk-red, :root[data-theme="dark"] .sk-thin.sk-red { stroke:#f87171; }
:root[data-theme="dark"] .sk-orange, :root[data-theme="dark"] .sk-ink.sk-orange, :root[data-theme="dark"] .sk-thin.sk-orange { stroke:#fbbf24; }
:root[data-theme="dark"] .sk-blue, :root[data-theme="dark"] .sk-ink.sk-blue, :root[data-theme="dark"] .sk-thin.sk-blue { stroke:#60a5fa; }
:root[data-theme="dark"] .sk-big { fill:#4ade80; }
:root[data-theme="dark"] .sk-sell-dot { stroke:#4ade80; }
/* 开声音按钮与动态水印 */
.qs-controls > .qs-sound { border-color:var(--accent); color:var(--accent); font-weight:700; }
.qs-controls > .qs-sound[aria-pressed="true"] { background:var(--accent); color:#fff; }
.sk-wm { position:absolute; z-index:2; pointer-events:none; user-select:none; font-size:clamp(12px,1.8vw,17px); font-weight:800; letter-spacing:.04em; color:#8a8272; opacity:.28; white-space:nowrap; transform:rotate(-8deg); transition:left 1.4s ease, top 1.4s ease; }
:root[data-theme="dark"] .sk-wm { color:#cfc8b8; opacity:.2; }
@media (prefers-reduced-motion: reduce) { .sk-wm { transition:none; } }