/* 星辰学会 · 数形结合训练（2026-10-29 原型，先用在预览站 /lab/shuxing/）
   只追加新类名（前缀 sx-），沿用 tokens.css 与 site.css。董事长认可后整节并入 site.css 第 28 节。
   画板与讲题视频同一块石板、同一套颜色：一种量一种颜色，图上和公式里一致（engine/std/lecture/theme.py）。 */

:root {
  /* 石板上的颜色（与视频一致） */
  --sx-bg0: #151B22;
  --sx-bg1: #0D1015;
  --sx-chalk: #EBE8DE;
  --sx-chalk-2: #C9C5BB;
  --sx-dim: #A09990;
  --sx-line: rgba(235, 232, 222, .12);
  --sx-line-2: rgba(235, 232, 222, .22);
  --sx-violet: #A380FF;
  --sx-rose: #FF85AD;
  --sx-sky: #73C4FF;
  --sx-teal: #57DEC2;
  --sx-lime: #ADE65C;
  --sx-gold: #FFBD57;
  --sx-amber: #FA8C38;
  --sx-ok: #6FD3BC;
  --sx-bad: #F28B82;
  /* 纸上的同色深一档：白底、米色底上文字对比度都 ≥5:1 */
  --sx-violet-ink: #5B3FB0;
  --sx-rose-ink: #A8285F;
  --sx-sky-ink: #1D5F9E;
  --sx-teal-ink: #0B6A5E;
  --sx-lime-ink: #4A6B10;
  --sx-gold-ink: #8A5A00;
  --sx-amber-ink: #9E4708;
}

/* ===== 页面 ===== */
.sx-page { padding-bottom: var(--sp-7); }
.sx-proto { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-pill); border: 1px dashed var(--line-strong); color: var(--ink-3); font-size: var(--fs-14); }

/* 四步：看一看 · 动一动 · 挑战 · 小结 */
.sx-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: var(--sp-4) 0 var(--sp-3); padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); }
.sx-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 6px; border: 0;
  border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-size: var(--fs-15); white-space: nowrap; }
.sx-tabs button i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2);
  color: var(--ink-3); font: 700 12px/1 var(--font); font-style: normal; }
.sx-tabs button[aria-selected="true"] { background: var(--night); color: #fff; font-weight: 600; }
.sx-tabs button[aria-selected="true"] i { background: rgba(255, 255, 255, .2); color: #fff; }
.sx-tabs button.is-done i { background: var(--star); color: #fff; }
@media (min-width: 640px) { .sx-tabs { display: inline-grid; grid-template-columns: repeat(4, auto); } .sx-tabs button { padding: 0 16px; } }

/* ===== 交互板（深色石板，和视频同一块板） ===== */
.sx-lab { position: relative; color: var(--sx-chalk); background: linear-gradient(180deg, var(--sx-bg0), var(--sx-bg1));
  border-radius: var(--r-m); box-shadow: var(--shadow-2); overflow: hidden; }
@media (max-width: 639px) { .sx-lab { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; box-shadow: none; } }
.sx-stage { display: grid; }
@media (min-width: 1024px) { .sx-stage { grid-template-columns: minmax(0, 1.42fr) minmax(320px, 1fr); } }
.sx-view { position: relative; min-width: 0; }
.sx-canvas { display: block; width: 100%; aspect-ratio: 1 / 1; touch-action: none; -webkit-tap-highlight-color: transparent; cursor: default; }
.sx-canvas.is-grab { cursor: grab; }
.sx-canvas.is-grabbing { cursor: grabbing; }
@media (min-width: 640px) { .sx-canvas { aspect-ratio: 4 / 3; } }
.sx-canvas--fig { aspect-ratio: 4 / 3; }
.sx-canvas--chart { aspect-ratio: 16 / 9; border-top: 1px solid var(--sx-line); }
@media (min-width: 640px) { .sx-canvas--fig { aspect-ratio: 16 / 10; } .sx-canvas--chart { aspect-ratio: 16 / 8; } }
.sx-side { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding: var(--sp-4); border-top: 1px solid var(--sx-line); }
@media (min-width: 1024px) { .sx-side { border-top: 0; border-left: 1px solid var(--sx-line); padding: var(--sp-5) var(--sp-5) var(--sp-4); } }

/* 板上的颜色类：KaTeX 里用 \htmlClass 套上（深色板用亮色，纸上用深一档） */
.sx-a, .sx-violet { color: var(--sx-violet); }
.sx-b, .sx-sky { color: var(--sx-sky); }
.sx-c, .sx-teal { color: var(--sx-teal); }
.sx-k, .sx-gold { color: var(--sx-gold); }
.sx-r, .sx-rose { color: var(--sx-rose); }
.sx-l, .sx-lime { color: var(--sx-lime); }
.sx-m, .sx-amber { color: var(--sx-amber); }
.sx-dimc { color: var(--sx-dim); }
.sx-paper .sx-a, .sx-paper .sx-violet { color: var(--sx-violet-ink); }
.sx-paper .sx-b, .sx-paper .sx-sky { color: var(--sx-sky-ink); }
.sx-paper .sx-c, .sx-paper .sx-teal { color: var(--sx-teal-ink); }
.sx-paper .sx-k, .sx-paper .sx-gold { color: var(--sx-gold-ink); }
.sx-paper .sx-r, .sx-paper .sx-rose { color: var(--sx-rose-ink); }
.sx-paper .sx-l, .sx-paper .sx-lime { color: var(--sx-lime-ink); }
.sx-paper .sx-m, .sx-paper .sx-amber { color: var(--sx-amber-ink); }
.sx-paper .sx-dimc { color: var(--ink-3); }
.sx-lab .katex { font-size: 1.08em; }
.sx-nb { white-space: nowrap; }

/* 字幕条（看一看）：一句一行，读完再动 */
.sx-say { min-height: calc(2 * 1.7em + 2 * var(--sp-3)); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--sx-line);
  font-size: var(--fs-17); line-height: 1.7; color: var(--sx-chalk); }
.sx-say p { opacity: 0; transform: translateY(4px); transition: opacity .45s ease, transform .45s ease; }
.sx-say p.is-on { opacity: 1; transform: none; }
.sx-say p + p { margin-top: 2px; }
.sx-say b { font-weight: 600; }
@media (min-width: 1024px) { .sx-say { font-size: var(--fs-18); padding: var(--sp-3) var(--sp-5); } }
.sx-lec { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-3); }
@media (min-width: 1024px) { .sx-lec { padding: 0 var(--sp-5) var(--sp-4); } }
.sx-dots { display: flex; flex: 1; gap: 4px; min-width: 0; }
.sx-dots span { flex: 1; height: 4px; border-radius: 2px; background: var(--sx-line-2); }
.sx-dots span.done { background: var(--sx-chalk-2); }
.sx-dots span.now { background: var(--sx-gold); }

/* 板上的按钮 */
.sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 16px;
  border: 1px solid var(--sx-line-2); border-radius: var(--r-pill); background: rgba(235, 232, 222, .06); color: var(--sx-chalk);
  font-size: var(--fs-15); font-weight: 600; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast); }
.sx-btn:hover { background: rgba(235, 232, 222, .12); }
.sx-btn:disabled { opacity: .45; cursor: default; }
.sx-btn svg { width: 16px; height: 16px; fill: currentColor; }
.sx-btn--icon { padding: 0; width: 44px; }
.sx-btn--go { background: var(--sx-chalk); border-color: var(--sx-chalk); color: #141A22; }
.sx-btn--go:hover { background: #fff; }
.sx-btn--small { min-height: 36px; padding: 0 12px; font-size: var(--fs-14); }
.sx-btn:focus-visible, .sx-opt:focus-visible, .sx-slider input:focus-visible { outline: 2px solid var(--sx-sky); outline-offset: 2px; }
.sx-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.sx-row--end { justify-content: flex-end; }

/* 公式条 */
.sx-formula { display: flex; flex-direction: column; gap: 2px; min-height: 64px; }
.sx-formula__main { font-size: var(--fs-22); line-height: 1.5; white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
.sx-formula__sub { font-size: var(--fs-15); color: var(--sx-chalk-2); white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
.sx-formula__sub > span:first-child { margin-right: 6px; color: var(--sx-dim); }

/* 参数滑块：滑块的颜色 = 参数在图上的颜色 */
.sx-sliders { display: grid; gap: 2px; }
.sx-slider { display: grid; grid-template-columns: 34px minmax(0, 1fr) 52px; align-items: center; gap: var(--sp-3); min-height: 48px; --c: var(--sx-chalk); }
.sx-slider--a { --c: var(--sx-violet); }
.sx-slider--b { --c: var(--sx-sky); }
.sx-slider--c { --c: var(--sx-teal); }
.sx-slider__name { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--c); color: var(--c);
  font: italic 21px/1 KaTeX_Math, "Times New Roman", serif; }
.sx-slider__val { text-align: right; font-size: var(--fs-18); color: var(--c); font-variant-numeric: tabular-nums; }
.sx-slider input { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.sx-slider input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--c) 0 var(--p, 50%), rgba(235, 232, 222, .16) var(--p, 50%) 100%); }
.sx-slider input::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(235, 232, 222, .16); }
.sx-slider input::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--c); }
.sx-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: var(--c); border: 3px solid #10151C; box-shadow: 0 0 0 1px var(--c); }
.sx-slider input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 3px solid #10151C; }
.sx-slider input:disabled { cursor: default; }
.sx-note { font-size: var(--fs-14); color: var(--sx-amber); min-height: 1.5em; }

/* 实时读数：一行一个量，左边色点 = 图上的颜色 */
.sx-read { display: grid; gap: 0; }
.sx-read li { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); align-items: baseline; gap: var(--sp-2); padding: 5px 0;
  border-top: 1px solid var(--sx-line); font-size: var(--fs-15); }
.sx-read li:first-child { border-top: 0; }
.sx-read__k { display: inline-flex; align-items: center; gap: 6px; color: var(--sx-dim); white-space: nowrap; }
.sx-read__k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--sx-dim)); flex: none; }
.sx-read__v { min-width: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; color: var(--sx-chalk); }
.sx-read--violet { --c: var(--sx-violet); }
.sx-read--sky { --c: var(--sx-sky); }
.sx-read--teal { --c: var(--sx-teal); }
.sx-read--gold { --c: var(--sx-gold); }
.sx-read--rose { --c: var(--sx-rose); }
.sx-read--lime { --c: var(--sx-lime); }
.sx-read--dim { --c: var(--sx-dim); }
.sx-read__v--wrap { white-space: normal; }

/* 开关 */
.sx-toggles { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sx-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--sx-line-2);
  border-radius: var(--r-pill); background: transparent; color: var(--sx-chalk-2); font-size: var(--fs-14); }
.sx-toggle::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--c, var(--sx-chalk-2)); }
.sx-toggle[aria-pressed="true"] { color: var(--sx-chalk); border-color: var(--c, var(--sx-chalk-2)); }
.sx-toggle--violet { --c: var(--sx-violet); }
.sx-toggle--gold { --c: var(--sx-gold); }
.sx-toggle--lime { --c: var(--sx-lime); }
.sx-toggle--teal { --c: var(--sx-teal); }
.sx-toggle[aria-pressed="true"]::before { background: var(--c, var(--sx-chalk-2)); }

/* 试一试（动一动里的小目标） */
.sx-goals { display: grid; gap: 6px; }
.sx-goals__head { font-size: var(--fs-14); color: var(--sx-dim); }
.sx-goal { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--sp-2); align-items: start; font-size: var(--fs-15); color: var(--sx-chalk-2); }
.sx-goal i { width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; border: 1.5px solid var(--sx-line-2); display: grid; place-items: center; }
.sx-goal.is-done { color: var(--sx-chalk); }
.sx-goal.is-done i { border-color: var(--sx-ok); background: var(--sx-ok); }
.sx-goal.is-done i::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid #10151C; border-bottom: 2px solid #10151C; transform: rotate(-45deg); }
.sx-goal small { display: block; color: var(--sx-ok); font-size: var(--fs-14); }

/* 挑战 */
.sx-pick { display: grid; gap: var(--sp-2); }
.sx-pick button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); align-items: center; width: 100%; padding: var(--sp-3) var(--sp-4);
  text-align: left; border: 1px solid var(--sx-line-2); border-radius: var(--r-m); background: rgba(235, 232, 222, .05); color: var(--sx-chalk); }
.sx-pick button:hover { background: rgba(235, 232, 222, .1); }
.sx-pick b { font-size: var(--fs-17); }
.sx-pick span { grid-column: 1; font-size: var(--fs-14); color: var(--sx-dim); }
.sx-pick em { grid-row: 1 / 3; grid-column: 2; font-style: normal; font-size: var(--fs-14); color: var(--sx-chalk-2); text-align: right; }
.sx-pick em strong { display: block; font-size: var(--fs-20); color: var(--sx-chalk); font-variant-numeric: tabular-nums; }
.sx-chal { display: flex; flex-direction: column; gap: var(--sp-3); }
.sx-chal__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-14); color: var(--sx-dim); }
.sx-chal__top b { color: var(--sx-chalk); font-size: var(--fs-18); font-variant-numeric: tabular-nums; }
.sx-chal__q { font-size: var(--fs-18); line-height: 1.65; }
.sx-chal__hint { font-size: var(--fs-14); color: var(--sx-dim); }
.sx-timer { position: relative; height: 4px; border-radius: 2px; background: var(--sx-line-2); overflow: hidden; }
.sx-timer span { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--sx-chalk-2); transform-origin: left; transition: transform .1s linear; }
.sx-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.sx-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-opts--1 { grid-template-columns: minmax(0, 1fr); }
.sx-opt { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 6px 10px;
  border: 1.5px solid var(--sx-line-2); border-radius: var(--r-m); background: rgba(235, 232, 222, .05); color: var(--sx-chalk);
  font-size: var(--fs-16); text-align: center; line-height: 1.4; }
.sx-opt:hover { background: rgba(235, 232, 222, .1); }
.sx-opt:disabled { cursor: default; }
.sx-opt > b { position: absolute; left: 8px; top: 6px; font-size: var(--fs-14); color: var(--sx-dim); }
.sx-opt canvas { width: 100%; aspect-ratio: 16 / 11; display: block; }
.sx-opt--fig { padding: 22px 6px 6px; }
.sx-opt.is-right { border-color: var(--sx-ok); background: rgba(111, 211, 188, .12); }
.sx-opt.is-wrong { border-color: var(--sx-bad); background: rgba(242, 139, 130, .1); }
.sx-opt.is-right::after, .sx-opt.is-wrong::after { position: absolute; right: 8px; top: 4px; font-size: var(--fs-14); font-weight: 700; }
.sx-opt.is-right::after { content: "✓"; color: var(--sx-ok); }
.sx-opt.is-wrong::after { content: "✗"; color: var(--sx-bad); }
.sx-feed { padding: var(--sp-3); border-radius: var(--r-m); background: rgba(235, 232, 222, .06); font-size: var(--fs-15); line-height: 1.7; }
.sx-feed__head { display: block; font-weight: 700; }
.sx-feed--ok .sx-feed__head { color: var(--sx-ok); }
.sx-feed--no .sx-feed__head { color: var(--sx-chalk); }
.sx-score { display: grid; gap: var(--sp-3); }
.sx-score__big { display: flex; align-items: baseline; gap: var(--sp-2); }
.sx-score__big b { font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.sx-score__big span { color: var(--sx-dim); }
.sx-score__rows li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 6px 0; border-top: 1px solid var(--sx-line); font-size: var(--fs-15); }
.sx-score__rows li span:last-child { color: var(--sx-chalk-2); font-variant-numeric: tabular-nums; }
.sx-pop { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 4px 12px; border-radius: var(--r-pill);
  background: rgba(16, 21, 28, .86); border: 1px solid var(--sx-line-2); font-size: var(--fs-15); font-weight: 700; pointer-events: none;
  transition: opacity .3s ease; white-space: nowrap; }
.sx-pop[hidden] { display: block !important; opacity: 0; }
.sx-pop--ok { color: var(--sx-ok); }
.sx-pop--no { color: var(--sx-chalk); }

/* 读数 / 量的切换（动点关） */
.sx-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--sx-line-2); border-radius: var(--r-pill); }
.sx-seg button { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--sx-chalk-2); font-size: var(--fs-14); }
.sx-seg button[aria-pressed="true"] { background: var(--sx-chalk); color: #141A22; font-weight: 600; }
.sx-pieces { display: grid; gap: 4px; }
.sx-piece { padding: 6px 10px; border-radius: var(--r-s); border: 1px solid transparent; color: var(--sx-dim); font-size: var(--fs-15); line-height: 1.6;
  overflow-x: auto; overflow-y: hidden; }
.sx-piece.is-on { border-color: var(--sx-line-2); background: rgba(235, 232, 222, .06); color: var(--sx-chalk); }
.sx-live { font-size: var(--fs-20); line-height: 1.5; min-height: 1.6em; white-space: nowrap; overflow-x: auto; overflow-y: hidden; }

/* ===== 板下：纸面区块 ===== */
.sx-below { display: grid; gap: var(--sp-4); padding-top: var(--sp-5); }
@media (min-width: 1024px) { .sx-below { grid-template-columns: minmax(0, 1.42fr) minmax(320px, 1fr); align-items: start; gap: var(--sp-5); } }
.sx-paper { background: #FBF7EC; color: #2A2723; border: 1px solid #E6DDC6; border-radius: var(--r-m); padding: var(--sp-4) var(--sp-5); }
.sx-paper__kicker { font-size: var(--fs-14); font-weight: 700; letter-spacing: .06em; color: var(--sx-gold-ink); }
.sx-paper__title { margin-top: 2px; font-size: var(--fs-18); font-weight: 700; }
.sx-paper ol { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); counter-reset: sxp; }
.sx-paper ol li { counter-increment: sxp; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-2); font-size: var(--fs-16); line-height: 1.75; }
.sx-paper ol li::before { content: counter(sxp); display: grid; place-items: center; width: 22px; height: 22px; margin-top: 4px; border-radius: 50%;
  background: #EFE6CF; color: var(--sx-gold-ink); font-size: 12px; font-weight: 700; }
.sx-paper__src { margin-top: var(--sp-3); font-size: var(--fs-14); color: #6B655B; }
.sx-rhyme { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-s); background: #F3EBD6; text-align: center; font-size: var(--fs-18); font-weight: 600; letter-spacing: .04em; }
.sx-rhyme small { display: block; font-size: var(--fs-14); font-weight: 400; color: #6B655B; letter-spacing: 0; }
.sx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.sx-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface-2);
  color: var(--ink-2); font-size: var(--fs-14); }
.sx-tag--main { background: var(--night-tint); color: var(--night); font-weight: 600; }
.sx-links li + li { border-top: 1px solid var(--line); }
.sx-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 48px; color: var(--night); font-weight: 600; }
.sx-links a span { font-weight: 400; font-size: var(--fs-14); color: var(--ink-3); }
.sx-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); }

/* ===== 训练入口：三级路径 ===== */
.sx-how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-4); }
@media (min-width: 640px) { .sx-how { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sx-how li { padding: var(--sp-3); border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); }
.sx-how b { display: block; color: var(--night); }
.sx-how span { font-size: var(--fs-14); color: var(--ink-3); }
.sx-tier { padding-top: var(--sp-6); }
.sx-tier__head { display: flex; align-items: center; gap: var(--sp-3); }
.sx-tier__badge { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--night); color: #fff; font-weight: 700; }
.sx-tier__title { font-size: var(--fs-20); font-weight: 700; }
.sx-tier__lead { margin-top: 2px; color: var(--ink-2); font-size: var(--fs-15); }
.sx-stations { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
@media (min-width: 640px) { .sx-stations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } }
@media (min-width: 1024px) { .sx-stations { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sx-station { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
a.sx-station { box-shadow: var(--shadow-1); transition: box-shadow var(--t-fast), transform var(--t-fast); border-color: var(--line-strong); }
a.sx-station:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.sx-station--soon { background: transparent; border-style: dashed; }
.sx-station__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-14); color: var(--ink-3); }
.sx-station__no { font-weight: 700; color: var(--night); font-variant-numeric: tabular-nums; }
.sx-station__state { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: var(--r-pill); font-size: 13px; }
.sx-station__state--on { background: var(--night); color: #fff; }
.sx-station__state--soon { border: 1px dashed var(--line-strong); }
.sx-station__title { font-size: var(--fs-17); font-weight: 700; line-height: var(--lh-title); }
.sx-station__what { font-size: var(--fs-15); color: var(--ink-2); }
.sx-station__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-14); color: var(--ink-3); }
.sx-pips { display: inline-flex; gap: 3px; align-items: center; }
.sx-pips i { width: 16px; height: 4px; border-radius: 2px; background: var(--line); }
.sx-pips i.on { background: var(--star); }
.sx-fine { margin-top: var(--sp-6); font-size: var(--fs-14); color: var(--ink-3); max-width: 46em; }
.sx-fine p + p { margin-top: var(--sp-1); }