/* Article reading components (rtx-*) + outline. 2026-11-12. Spec: .claude/skills/article-restyle/SKILL.md */
html{--rtx-ink:#16181d;--rtx-ink2:#4a4f59;--rtx-muted:#8a8f98;--rtx-card:#ffffff;--rtx-line:#ece7dc;--rtx-tint:#faf8f3;
 --rtx-up:#2563eb;--rtx-up2:#60a5fa;--rtx-down:#12a150;--rtx-alert:#d97706;--rtx-bad:#dc2626;--rtx-past:#c4c8cf;--rtx-hl:#fde68a;--rtx-track:#f1ede5}
html[data-theme="dark"]{--rtx-ink:#f1f5f9;--rtx-ink2:#c3cdd6;--rtx-muted:#8aa0b2;--rtx-card:#0c1d33;--rtx-line:#1e3a5f;--rtx-tint:#0a1829;
 --rtx-up:#4b93ea;--rtx-up2:#93c5fd;--rtx-down:#22c55e;--rtx-alert:#f59e0b;--rtx-bad:#f87171;--rtx-past:#3b5576;--rtx-hl:rgba(245,158,11,.38);--rtx-track:#132a45}
.article-prose{counter-reset:rtxh2}
.article-prose h2{counter-increment:rtxh2;--c:#2563eb;padding-top:18px;margin-top:64px!important}
.article-prose h2:nth-of-type(8n+2){--c:#7c3aed}.article-prose h2:nth-of-type(8n+3){--c:#db2777}.article-prose h2:nth-of-type(8n+4){--c:#ea580c}
.article-prose h2:nth-of-type(8n+5){--c:#0d9488}.article-prose h2:nth-of-type(8n+6){--c:#0e7490}.article-prose h2:nth-of-type(8n+7){--c:#4f46e5}.article-prose h2:nth-of-type(8n+8){--c:#be185d}
html[data-theme] body.ide-body .article-prose h2::before{content:counter(rtxh2,decimal-leading-zero);display:inline-grid;place-items:center;width:1.9em;height:1.9em;margin-right:.55em;border-radius:.45em;background:var(--c);color:#fff;font-size:.72em;font-weight:900;vertical-align:.18em;font-family:inherit}
.article-prose .rtx-key{font-size:calc(23px * var(--art-scale,1));line-height:1.55;font-weight:800;color:var(--rtx-ink);margin:14px 0 26px;letter-spacing:-.005em}
.article-prose mark{color:inherit;background:linear-gradient(transparent 58%,var(--rtx-hl) 58%);padding:0;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.article-prose .rtx-end{font-size:calc(21px * var(--art-scale,1));line-height:1.65;font-weight:800;color:var(--rtx-ink);padding:24px 26px;border-radius:18px;background:var(--rtx-tint);border:1px solid var(--rtx-line);margin-top:30px}
/* stats */
.article-prose .rtx-stats{list-style:none;padding:0!important;margin:22px 0 28px!important;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.article-prose .rtx-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.article-prose .rtx-stats li{margin:0!important;padding:16px 16px 14px!important;background:var(--rtx-card);border:1px solid var(--rtx-line);border-radius:16px;list-style:none}
.article-prose .rtx-stats li::before,.article-prose .rtx-stats li::marker{content:none!important;display:none!important}
.article-prose .rtx-stats b{display:block;font-size:calc(30px * var(--art-scale,1));line-height:1.1;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--rtx-ink)}
.article-prose .rtx-stats b{color:var(--rtx-ink)!important}.article-prose .rtx-stats .is-up b{color:var(--rtx-up)!important}.article-prose .rtx-stats .is-down b{color:var(--rtx-down)!important}.article-prose .rtx-stats .is-alert b{color:var(--rtx-alert)!important}
.article-prose .rtx-stats span{display:block;font-size:14px;font-weight:700;margin-top:8px;line-height:1.4;color:var(--rtx-ink)}
.article-prose .rtx-stats small{display:block;font-size:12px;color:var(--rtx-muted);margin-top:4px}
/* bars & diverge (tables enhanced) */
.article-prose table.rtx-bars,.article-prose table.rtx-diverge{display:block;border:1px solid var(--rtx-line)!important;border-radius:16px;background:var(--rtx-card);padding:16px 18px 10px;margin:22px 0 28px;overflow:hidden}
.article-prose table.rtx-bars caption,.article-prose table.rtx-diverge caption{display:block;text-align:left;font-weight:800;font-size:15px;color:var(--rtx-ink);margin-bottom:12px;padding:0}
.article-prose table.rtx-bars tbody,.article-prose table.rtx-diverge tbody{display:block}
.article-prose table.rtx-bars tr,.article-prose table.rtx-diverge tr{display:grid;grid-template-columns:minmax(8em,13em) 1fr;gap:12px;align-items:center;padding:7px 0;border:0!important;background:none!important}
.article-prose table.rtx-bars th,.article-prose table.rtx-diverge th{background:none!important;color:var(--rtx-ink2)!important;font-weight:500!important;font-size:14.5px;text-align:left;padding:0!important;border:0!important;line-height:1.4}
.article-prose table.rtx-bars td,.article-prose table.rtx-diverge td{padding:0!important;border:0!important;background:none!important;display:grid;grid-template-columns:1fr 4.6em;gap:10px;align-items:center;font-weight:800;color:var(--rtx-ink);font-variant-numeric:tabular-nums;font-size:14.5px;text-align:right}
.rtx-track{position:relative;display:block;height:16px;background:var(--rtx-track);border-radius:5px;overflow:hidden}
.rtx-track i{position:absolute;left:0;top:0;bottom:0;border-radius:0 5px 5px 0;background:var(--rtx-up)}
td[data-tone="up2"] .rtx-track i{background:var(--rtx-up2)}td[data-tone="down"] .rtx-track i{background:var(--rtx-down)}td[data-tone="alert"] .rtx-track i{background:var(--rtx-alert)}td[data-tone="past"] .rtx-track i{background:var(--rtx-past)}
.rtx-dtrack{position:relative;display:block;height:16px;background:linear-gradient(var(--rtx-line),var(--rtx-line)) center/2px 100% no-repeat}
.rtx-dtrack i{position:absolute;top:0;bottom:0}
.rtx-dtrack i.pos{left:50%;background:var(--rtx-up);border-radius:0 5px 5px 0}.rtx-dtrack i.neg{right:50%;background:var(--rtx-down);border-radius:5px 0 0 5px}
.article-prose table.rtx-diverge td.pos{color:var(--rtx-up)}.article-prose table.rtx-diverge td.neg{color:var(--rtx-down)}
@media(max-width:560px){.article-prose table.rtx-bars tr,.article-prose table.rtx-diverge tr{grid-template-columns:1fr;gap:4px}}
/* note */
.article-prose .rtx-note{margin:24px 0 28px;padding:18px 22px;border-radius:16px;background:var(--rtx-tint);border:2px solid var(--rtx-up)}
.article-prose .rtx-note>b{display:block;font-size:13px;font-weight:800;color:var(--rtx-up);margin-bottom:6px}
.article-prose .rtx-note p{margin:0!important;font-weight:600;color:var(--rtx-ink)}
/* vs */
.article-prose .rtx-vs{display:grid;gap:12px;margin:22px 0 28px}
@media(min-width:760px){.article-prose .rtx-vs{grid-template-columns:1fr 1fr}}
.article-prose .rtx-vs>div{border-radius:18px;padding:20px 22px}
.article-prose .rtx-vs .is-down{background:#e3f5ea}.article-prose .rtx-vs .is-up{background:#e0eafd}
html[data-theme="dark"] .article-prose .rtx-vs .is-down{background:#0f2e22}html[data-theme="dark"] .article-prose .rtx-vs .is-up{background:#12264a}
.article-prose .rtx-vs h4{margin:0 0 10px!important;font-size:18px}
.article-prose .rtx-vs .is-down h4{color:#0f7a3d}.article-prose .rtx-vs .is-up h4{color:var(--rtx-up)}
html[data-theme="dark"] .article-prose .rtx-vs .is-down h4{color:#4ade80}
.article-prose .rtx-vs ul{margin:0!important}
/* cards */
.article-prose .rtx-cards{list-style:none;padding:0!important;margin:22px 0 28px!important;display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.article-prose .rtx-cards{grid-template-columns:1fr 1fr}}
.article-prose .rtx-cards li{margin:0!important;display:flex;flex-direction:column;background:var(--rtx-card);border:1px solid var(--rtx-line);border-radius:16px;padding:16px 18px!important}
.article-prose .rtx-cards li::before,.article-prose .rtx-cards li::marker{content:none!important;display:none!important}
.article-prose .rtx-cards .no{align-self:flex-start;font-size:12px;font-weight:800;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);padding:2px 9px;border-radius:6px;margin-bottom:8px}
.article-prose .rtx-cards b{font-size:17px;color:var(--rtx-ink)}
.article-prose .rtx-cards p{margin:4px 0 10px!important;font-size:14.5px;color:var(--rtx-ink2);line-height:1.65}
.article-prose .rtx-cards small{margin-top:auto;padding-top:10px;border-top:1px solid var(--rtx-line);font-size:12.5px;font-weight:800;color:var(--c)}
/* quotes */
.article-prose blockquote{position:relative;background:var(--rtx-card)!important;border:1px solid var(--rtx-line)!important;border-left:0!important;border-radius:16px;padding:22px 24px 14px 56px!important;margin:24px 0 6px!important}
.article-prose blockquote::before{content:"“";position:absolute;left:16px;top:6px;font-size:54px;line-height:1;color:var(--rtx-alert);font-family:Georgia,serif}
.article-prose blockquote p{font-size:calc(17px * var(--art-scale,1));font-weight:600;color:var(--rtx-ink)!important;font-style:normal}
.article-prose blockquote + p.rtx-cite{font-size:13px;color:var(--rtx-muted);margin:0 0 24px 24px!important}

/* diagram: shift */
.article-prose .rtx-shift{margin:26px 0 30px;padding:20px;border-radius:18px;background:var(--rtx-card);border:1px solid var(--rtx-line);display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:720px){.article-prose .rtx-shift{grid-template-columns:1fr 130px 1fr;align-items:center}}
.article-prose .rtx-shift figcaption,.article-prose .rtx-flow figcaption{grid-column:1/-1;font-weight:900;font-size:calc(19px * var(--art-scale,1));color:var(--rtx-ink);text-align:center}
.article-prose .rtx-shift .col{border-radius:14px;padding:14px;border:2px solid}
.article-prose .rtx-shift .is-down{border-color:var(--rtx-alert);background:color-mix(in srgb,var(--rtx-alert) 7%,transparent)}
.article-prose .rtx-shift .is-up{border-color:var(--rtx-down);background:color-mix(in srgb,var(--rtx-down) 7%,transparent)}
.article-prose .rtx-shift h4{margin:0 0 10px!important;text-align:center;font-size:16px}
.article-prose .rtx-shift .is-down h4{color:var(--rtx-alert)}.article-prose .rtx-shift .is-up h4{color:var(--rtx-down)}
.article-prose .rtx-shift ul{list-style:none;margin:0!important;padding:0!important;display:grid;gap:8px}
.article-prose .rtx-shift li{margin:0!important;display:flex;justify-content:space-between;align-items:center;padding:9px 12px!important;border-radius:10px;background:var(--rtx-card);border:1px solid var(--rtx-line);font-weight:700;color:var(--rtx-ink)}
.article-prose .rtx-shift li::before,.article-prose .rtx-shift li::marker{content:none!important;display:none!important}
.article-prose .rtx-shift li i{font-style:normal;font-weight:900}
.article-prose .rtx-shift .is-down li i{color:var(--rtx-alert)}.article-prose .rtx-shift .is-up li i{color:var(--rtx-down)}
.article-prose .rtx-shift .mid{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:800;color:var(--rtx-up);font-size:14px}
.rtx-shift .flow{display:block;width:100%;height:12px;border-radius:6px;background:repeating-linear-gradient(90deg,var(--rtx-up) 0 14px,transparent 14px 22px);background-size:22px 100%;position:relative}
.rtx-shift .flow::after{content:"";position:absolute;right:-8px;top:50%;transform:translateY(-50%);border-left:12px solid var(--rtx-up);border-top:10px solid transparent;border-bottom:10px solid transparent}
@media(max-width:719px){.rtx-shift .flow{width:12px;height:44px;background:repeating-linear-gradient(180deg,var(--rtx-up) 0 10px,transparent 10px 16px);background-size:100% 16px}.rtx-shift .flow::after{right:auto;left:50%;top:auto;bottom:-10px;transform:translateX(-50%);border-left:10px solid transparent;border-right:10px solid transparent;border-top:12px solid var(--rtx-up);border-bottom:0}}
.article-prose .rtx-shift .cap,.article-prose .rtx-flow .cap{grid-column:1/-1;margin:2px 0 0!important;text-align:center;font-size:13.5px;color:var(--rtx-muted)}
/* diagram: flow */
.article-prose .rtx-flow{margin:26px 0 30px;padding:20px;border-radius:18px;background:var(--rtx-card);border:1px solid var(--rtx-line)}
.rtx-flow .grid{display:grid;gap:10px;margin-top:14px;grid-template-columns:1fr}
.rtx-flow .nd{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:2px solid var(--rtx-up);background:var(--rtx-card);font-weight:800;color:var(--rtx-ink);font-size:14.5px;position:relative;flex-wrap:wrap}
.rtx-flow .nd svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--rtx-up);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rtx-flow .nd.hub{background:color-mix(in srgb,var(--rtx-up) 9%,var(--rtx-card))}
.rtx-flow .nd.bad{border-color:var(--rtx-bad)}.rtx-flow .nd.bad svg{stroke:var(--rtx-bad)}
.rtx-flow .nd.warn{border-color:var(--rtx-alert)}.rtx-flow .nd.warn svg{stroke:var(--rtx-alert)}
.article-prose .rtx-flow em.ro{font-style:normal!important;margin-left:auto;font-size:11.5px;font-weight:800;color:#fff!important;background:var(--rtx-down);padding:1px 7px;border-radius:5px}
.article-prose .rtx-flow em.tg{font-style:normal!important;width:100%;font-size:11.5px;font-weight:700;color:var(--rtx-muted)!important}
.rtx-flow .stack{display:grid;gap:8px}
.rtx-flow .ar,.rtx-flow .vr{display:block;justify-self:center}
.rtx-flow .ar{width:3px;height:22px;background:repeating-linear-gradient(180deg,var(--rtx-up) 0 6px,transparent 6px 10px);background-size:100% 10px}
.rtx-flow .ar.amber{background-image:repeating-linear-gradient(180deg,var(--rtx-alert) 0 6px,transparent 6px 10px)}
.rtx-flow .vr{display:none}
@media(min-width:900px){
  .rtx-flow .grid{grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1.3fr;grid-template-rows:auto 38px auto;align-items:start;row-gap:0;column-gap:6px}
  .rtx-flow .nd{flex-direction:column;justify-content:center;text-align:center;gap:5px;padding:12px 8px;z-index:1;min-height:76px}
  .rtx-flow .nd svg{width:22px;height:22px}
  .rtx-flow .nd span{white-space:nowrap}
  .article-prose .rtx-flow em.ro,.article-prose .rtx-flow em.tg{margin-left:0;width:auto}
  .rtx-flow .stack .nd{min-height:0;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;text-align:left;padding:10px 10px;gap:6px}
  .article-prose .rtx-flow .stack em.ro{margin-left:auto}
  .rtx-flow .a1{grid-area:1/1}.rtx-flow .a2{grid-area:1/2}.rtx-flow .a3{grid-area:1/3}.rtx-flow .a4{grid-area:1/4}.rtx-flow .a6{grid-area:1/6}.rtx-flow .a7{grid-area:1/7}
  .rtx-flow .a5{grid-area:1/5;align-self:stretch}
  .rtx-flow .a2,.rtx-flow .a4,.rtx-flow .a6{margin-top:36px}
  .rtx-flow .b3{grid-area:1/3/3/4;align-self:stretch;z-index:0}
  .rtx-flow .b5{grid-area:2/5;align-self:stretch}
  .rtx-flow .c3{grid-area:3/3}.rtx-flow .c5{grid-area:3/5}.rtx-flow .c6{grid-area:3/6;align-self:center}.rtx-flow .c7{grid-area:3/7;align-self:center}
  .rtx-flow .ar{width:100%;height:4px;background:repeating-linear-gradient(90deg,var(--rtx-up) 0 8px,transparent 8px 13px);background-size:13px 100%}
  .rtx-flow .ar.amber{background-image:repeating-linear-gradient(90deg,var(--rtx-alert) 0 8px,transparent 8px 13px)}
  .rtx-flow .vr{display:block;width:4px;height:100%}
  .rtx-flow .vr.up{background:repeating-linear-gradient(0deg,var(--rtx-bad) 0 6px,transparent 6px 10px);background-size:100% 10px}
  .rtx-flow .vr.down{background:repeating-linear-gradient(180deg,var(--rtx-alert) 0 6px,transparent 6px 10px);background-size:100% 10px}
}
@media (prefers-reduced-motion:no-preference){
  .rtx-shift .flow{animation:rtxH 0.9s linear infinite}
  .rtx-flow .ar{animation:rtxV 0.8s linear infinite}
  .rtx-flow .vr.down{animation:rtxV 0.8s linear infinite}
  .rtx-flow .vr.up{animation:rtxV 0.8s linear infinite reverse}
  @media(min-width:900px){.rtx-flow .ar{animation:rtxH 0.8s linear infinite}}
  .rtx-shift li{opacity:0;transform:translateX(-8px);transition:opacity .5s ease calc(var(--i)*.12s + .2s),transform .5s ease calc(var(--i)*.12s + .2s)}
  .rtx-shift.in li{opacity:1;transform:none}
}
@keyframes rtxH{to{background-position:22px 0}}
@keyframes rtxV{to{background-position:0 20px}}
/* share-style outline */
.rtx-outline{display:none}
@media (min-width:1280px){
  #main{padding-right:262px}
  .toc-rail{display:none!important}
  .rtx-outline{display:block;position:fixed;right:18px;top:72px;width:232px;max-height:calc(100vh - 96px);overflow:auto;z-index:70;padding:14px 0 16px;scrollbar-width:thin}
  .rtx-outline .hd{font-size:12px;font-weight:800;color:var(--rtx-muted);margin:0 0 10px 12px}
  .rtx-outline .bar{height:3px;margin:0 12px 12px;background:var(--rtx-track);border-radius:2px;overflow:hidden}
  .rtx-outline .bar span{display:block;height:100%;width:0;background:var(--rtx-up)}
  .rtx-outline ol{list-style:none;margin:0;padding:0}
  .rtx-outline a{display:flex;gap:8px;align-items:baseline;padding:7px 12px;border-radius:9px;font-size:14px;line-height:1.4;color:var(--rtx-ink2);text-decoration:none}
  .rtx-outline a span{flex:none;width:1.9em;font-weight:800;color:var(--rtx-muted);font-variant-numeric:tabular-nums}
  .rtx-outline a:hover{background:var(--rtx-track);color:var(--rtx-ink)}
  .rtx-outline a.on{background:var(--rtx-ink);color:var(--rtx-card)}
  .rtx-outline a.on span{color:#fcd34d}
  .rtx-outline .top{display:block;margin:12px 12px 0;font-size:12.5px;color:var(--rtx-muted);text-decoration:none}
}
.article-prose h2{scroll-margin-top:70px}
/* motion */
@media (prefers-reduced-motion:no-preference){
  .rtx-anim{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
  .rtx-anim.in{opacity:1;transform:none}
  .rtx-track i,.rtx-dtrack i{transition:width 1s cubic-bezier(.2,.7,.2,1) .15s}
}

/* steps */
.article-prose ol.rtx-steps{list-style:none;counter-reset:rtxs;padding:0!important;margin:24px 0 30px!important;display:grid;gap:0}
.article-prose ol.rtx-steps>li{counter-increment:rtxs;position:relative;margin:0!important;padding:0 0 22px 58px!important;list-style:none}
.article-prose ol.rtx-steps>li::marker{content:none}
.article-prose ol.rtx-steps>li::before{content:counter(rtxs);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:12px;background:var(--rtx-up);color:#fff;font-weight:900;display:grid;place-items:center;font-size:16px;z-index:1}
.article-prose ol.rtx-steps>li::after{content:"";position:absolute;left:17px;top:38px;bottom:0;width:4px;background:repeating-linear-gradient(180deg,var(--rtx-up) 0 6px,transparent 6px 10px);background-size:100% 10px;opacity:.55}
.article-prose ol.rtx-steps>li:last-child{padding-bottom:0!important}
.article-prose ol.rtx-steps>li:last-child::after{content:none}
.article-prose ol.rtx-steps>li>b{display:block;font-size:calc(17.5px * var(--art-scale,1));color:var(--rtx-ink);padding-top:5px}
.article-prose ol.rtx-steps>li>p{margin:4px 0 0!important;color:var(--rtx-ink2);font-size:.95em}
/* chain */
.article-prose .rtx-chain{margin:26px 0 30px;padding:20px;border-radius:18px;background:var(--rtx-card);border:1px solid var(--rtx-line)}
.article-prose .rtx-chain figcaption{font-weight:900;font-size:calc(19px * var(--art-scale,1));color:var(--rtx-ink);text-align:center;margin:0 0 16px}
.article-prose .rtx-chain ol{list-style:none;margin:0!important;padding:0!important;display:flex;flex-direction:column;gap:26px}
.article-prose .rtx-chain li{position:relative;margin:0!important;padding:12px 14px!important;border-radius:12px;border:2px solid var(--rtx-up);background:var(--rtx-card);font-weight:800;color:var(--rtx-ink);text-align:center;font-size:15px;line-height:1.4;flex:1 1 0;min-width:0}
.article-prose .rtx-chain li::marker{content:none}
.article-prose .rtx-chain li small{display:block;font-weight:600;font-size:12px;color:var(--rtx-muted);margin-top:3px}
.article-prose .rtx-chain li.is-ok{border-color:var(--rtx-down)}.article-prose .rtx-chain li.is-warn{border-color:var(--rtx-alert)}.article-prose .rtx-chain li.is-bad{border-color:var(--rtx-bad)}
.article-prose .rtx-chain li.is-hub{background:color-mix(in srgb,var(--rtx-up) 9%,var(--rtx-card))}
.article-prose .rtx-chain li+li::before{content:"";position:absolute;left:50%;top:-24px;width:4px;height:20px;margin-left:-2px;background:repeating-linear-gradient(180deg,var(--rtx-up) 0 6px,transparent 6px 10px);background-size:100% 10px}
.article-prose .rtx-chain .cap{margin:14px 0 0!important;text-align:center;font-size:13.5px;color:var(--rtx-muted)}
@media(min-width:820px){
  .article-prose .rtx-chain ol{flex-direction:row;align-items:stretch;gap:30px}
  .article-prose .rtx-chain li{display:flex;flex-direction:column;justify-content:center}
  .article-prose .rtx-chain li+li::before{left:-28px;top:50%;width:26px;height:4px;margin:-2px 0 0;background:repeating-linear-gradient(90deg,var(--rtx-up) 0 8px,transparent 8px 13px);background-size:13px 100%}
}
/* check list */
.article-prose ul.rtx-check{list-style:none;padding:0!important;margin:20px 0 26px!important;display:grid;gap:8px}
.article-prose ul.rtx-check>li{margin:0!important;padding:11px 14px 11px 46px!important;position:relative;background:var(--rtx-card);border:1px solid var(--rtx-line);border-radius:12px;color:var(--rtx-ink)}
.article-prose ul.rtx-check>li::marker{content:none}
.article-prose ul.rtx-check>li::before{content:"✓";position:absolute;left:14px;top:11px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff;background:var(--rtx-up)}
.article-prose ul.rtx-check>li.is-no::before{content:"✕";background:var(--rtx-bad)}
.article-prose ul.rtx-check>li.is-warn::before{content:"!";background:var(--rtx-alert)}
@media (prefers-reduced-motion:no-preference){
  .article-prose .rtx-chain li+li::before,.article-prose ol.rtx-steps>li::after{animation:rtxV .8s linear infinite}
  @media(min-width:820px){.article-prose .rtx-chain li+li::before{animation:rtxH .8s linear infinite}}
}
/* inline service card (2026-11-12 老闆同意內文放對應服務小卡) */
.article-prose .rtx-cta{margin:28px 0 32px;padding:20px 22px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--rtx-up) 10%,var(--rtx-card)),var(--rtx-card));border:1px solid color-mix(in srgb,var(--rtx-up) 35%,var(--rtx-line));display:grid;gap:6px 18px;align-items:center}
@media(min-width:720px){.article-prose .rtx-cta{grid-template-columns:1fr auto}.article-prose .rtx-cta a{grid-row:1/3;grid-column:2}}
.article-prose .rtx-cta>b{font-size:calc(18.5px * var(--art-scale,1));font-weight:900;color:var(--rtx-ink);line-height:1.45}
.article-prose .rtx-cta>span{font-size:14.5px;color:var(--rtx-ink2);line-height:1.6}
.article-prose .rtx-cta a{display:inline-block;justify-self:start;margin-top:6px;padding:10px 18px;border-radius:999px;background:var(--rtx-up);color:#fff!important;font-weight:800;font-size:14.5px;border:0!important;text-decoration:none!important;white-space:nowrap}
.article-prose .rtx-cta a::after{content:" →"}
.article-prose .rtx-cta a:hover{filter:brightness(1.08)}

/* ===== 2026-11-12 簡報感：大標題、大字結論、加寬、卡片浮在底色上（老闆要分享版的閱讀感） ===== */
html[data-theme] body.ide-body article.pane:has(.article-prose){background:transparent!important;border-color:transparent!important;box-shadow:none!important;padding:8px 0 40px!important;max-width:none}
html[data-theme="light"] body.ide-body #main:has(.article-prose){background:#f7f5f0}
html[data-theme] body.ide-body .article-prose{font-size:calc(18px * var(--art-scale,1));line-height:1.85}
html[data-theme] body.ide-body .article-prose h2{font-size:clamp(30px,3.3vw,42px)!important;line-height:1.25!important;font-weight:900!important;letter-spacing:-.02em;border-bottom:0!important;padding:0!important;margin:96px 0 18px!important}
html[data-theme] body.ide-body .article-prose h2::before{display:grid;width:52px;height:52px;margin:0 0 16px;border-radius:14px;font-size:20px;vertical-align:baseline}
html[data-theme] body.ide-body .article-prose h3{font-size:clamp(22px,2.2vw,27px)!important;font-weight:800!important;margin:52px 0 14px!important;color:var(--rtx-ink)!important}
.article-prose .rtx-key{font-size:clamp(22px,2.5vw,30px)!important;line-height:1.55!important;margin:10px 0 30px!important}
.article-prose .rtx-end{font-size:clamp(20px,2.1vw,25px)!important}
.article-prose .rtx-stats li,.article-prose table.rtx-bars,.article-prose table.rtx-diverge,.article-prose .rtx-cards li,.article-prose .rtx-shift,.article-prose .rtx-flow,.article-prose .rtx-chain,.article-prose blockquote,.article-prose ul.rtx-check>li{border-color:transparent!important;box-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 32px -20px rgba(20,20,40,.28)}
html[data-theme="dark"] .article-prose .rtx-stats li,html[data-theme="dark"] .article-prose table.rtx-bars,html[data-theme="dark"] .article-prose table.rtx-diverge,html[data-theme="dark"] .article-prose .rtx-cards li,html[data-theme="dark"] .article-prose .rtx-shift,html[data-theme="dark"] .article-prose .rtx-flow,html[data-theme="dark"] .article-prose .rtx-chain,html[data-theme="dark"] .article-prose blockquote{border-color:var(--rtx-line)!important;box-shadow:none}
.article-prose .rtx-stats li{padding:22px 20px 18px!important;border-radius:20px}
.article-prose .rtx-stats b{font-size:clamp(34px,3.6vw,48px)!important}
.article-prose .rtx-stats span{font-size:15.5px}
.article-prose table.rtx-bars,.article-prose table.rtx-diverge{padding:24px 26px 16px;border-radius:20px}
.article-prose table.rtx-bars caption,.article-prose table.rtx-diverge caption{font-size:18.5px;margin-bottom:16px}
.article-prose table.rtx-bars th,.article-prose table.rtx-diverge th,.article-prose table.rtx-bars td,.article-prose table.rtx-diverge td{font-size:16px}
.article-prose table.rtx-bars tr,.article-prose table.rtx-diverge tr{padding:9px 0}
.rtx-track,.rtx-dtrack{height:20px}
.article-prose .rtx-cards li{padding:20px 22px!important;border-radius:20px}
.article-prose .rtx-cards b{font-size:19px}
.article-prose .rtx-cards p{font-size:15.5px}
.article-prose .rtx-note{padding:22px 26px;border-radius:20px}
.article-prose .rtx-note p{font-size:calc(18.5px * var(--art-scale,1));font-weight:700;line-height:1.75}
.article-prose .rtx-vs>div{padding:24px 26px;border-radius:20px}
.article-prose .rtx-vs h4{font-size:21px}
.article-prose > table:not([class]){background:var(--rtx-card);border-radius:16px;overflow:hidden;box-shadow:0 12px 32px -20px rgba(20,20,40,.28)}
/* 兩欄並排：把兩張圖表包在 <div class="rtx-grid"> 裡 */
.article-prose .rtx-grid{display:grid;gap:18px;margin:24px 0 30px}
.article-prose .rtx-grid>*{margin:0!important}
@media(min-width:1100px){.article-prose .rtx-grid{grid-template-columns:1fr 1fr;align-items:start}
  .article-prose .rtx-grid table.rtx-bars tr,.article-prose .rtx-grid table.rtx-diverge tr{grid-template-columns:minmax(6em,9.5em) 1fr}}
@media(max-width:640px){html[data-theme] body.ide-body .article-prose h2{margin-top:64px!important}html[data-theme] body.ide-body .article-prose h2::before{width:44px;height:44px;font-size:17px}}
/* 2026-11-12 w1 回饋：3 張卡排三欄；奇數張的最後一張橫跨整列；流程圖節點的英文識別字不從中間斷開 */
@media(min-width:1000px){.article-prose .rtx-cards:has(>li:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}}
@media(min-width:640px){.article-prose .rtx-cards:not(:has(>li:nth-child(3):last-child))>li:last-child:nth-child(odd){grid-column:1/-1}}
.article-prose .rtx-chain li{overflow-wrap:break-word;word-break:keep-all;hyphens:none}
@media(min-width:820px){.article-prose .rtx-chain ol:has(>li:nth-child(5)){gap:22px}.article-prose .rtx-chain ol:has(>li:nth-child(5)) li{font-size:13.5px;padding:10px 8px!important}.article-prose .rtx-chain ol:has(>li:nth-child(5)) li+li::before{left:-21px;width:19px}}
/* 2026-11-12 wave1 回饋：時間軸、分支圖、中性對照、卡片圖說、長數字不拆字 */
.article-prose ol.rtx-timeline{list-style:none;margin:24px 0 30px!important;padding:0 0 0 8px!important;display:grid;gap:0}
.article-prose ol.rtx-timeline>li{position:relative;margin:0!important;padding:0 0 22px 30px!important;list-style:none;border-left:3px solid color-mix(in srgb,var(--rtx-up) 35%,transparent)}
.article-prose ol.rtx-timeline>li::marker{content:none}
.article-prose ol.rtx-timeline>li::before{content:"";position:absolute;left:-9.5px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--rtx-up);box-shadow:0 0 0 4px var(--rtx-tint)}
.article-prose ol.rtx-timeline>li:last-child{padding-bottom:2px!important;border-left-color:transparent}
.article-prose ol.rtx-timeline>li>b{display:block;font-size:14.5px;font-weight:900;color:var(--rtx-up);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.article-prose ol.rtx-timeline>li>span{display:block;color:var(--rtx-ink);font-weight:600;margin-top:2px}
.article-prose ol.rtx-timeline>li.is-warn::before{background:var(--rtx-alert)}.article-prose ol.rtx-timeline>li.is-bad::before{background:var(--rtx-bad)}
.article-prose .rtx-branch{margin:26px 0 30px;padding:22px 20px;border-radius:20px;background:var(--rtx-card);box-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 32px -20px rgba(20,20,40,.28)}
html[data-theme="dark"] .article-prose .rtx-branch{border:1px solid var(--rtx-line);box-shadow:none}
.article-prose .rtx-branch figcaption{font-weight:900;font-size:calc(19px * var(--art-scale,1));color:var(--rtx-ink);text-align:center;margin:0 0 16px}
.article-prose .rtx-branch .rtx-branch-from{width:min(100%,320px);margin:0 auto;padding:12px 16px;border-radius:12px;border:2px solid var(--rtx-up);background:color-mix(in srgb,var(--rtx-up) 9%,var(--rtx-card));font-weight:900;text-align:center;color:var(--rtx-ink);position:relative}
.article-prose .rtx-branch .rtx-branch-from::after{content:"";position:absolute;left:50%;bottom:-26px;width:4px;height:24px;margin-left:-2px;background:repeating-linear-gradient(180deg,var(--rtx-up) 0 6px,transparent 6px 10px);background-size:100% 10px}
.article-prose .rtx-branch small{display:block;font-weight:600;font-size:12px;color:var(--rtx-muted);margin-top:3px}
.article-prose .rtx-branch ul{list-style:none;margin:28px 0 0!important;padding:14px 0 0!important;display:grid;gap:10px;grid-template-columns:1fr;border-top:3px dashed color-mix(in srgb,var(--rtx-up) 45%,transparent)}
@media(min-width:720px){.article-prose .rtx-branch ul{grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column}}
.article-prose .rtx-branch li{margin:0!important;padding:12px 12px!important;border-radius:12px;border:2px solid var(--rtx-up);font-weight:800;text-align:center;color:var(--rtx-ink);font-size:15px;line-height:1.4;overflow-wrap:break-word}
.article-prose .rtx-branch li::marker{content:none}
.article-prose .rtx-branch li.is-ok{border-color:var(--rtx-down)}.article-prose .rtx-branch li.is-warn{border-color:var(--rtx-alert)}.article-prose .rtx-branch li.is-bad{border-color:var(--rtx-bad)}
.article-prose .rtx-branch .cap,.article-prose p.cap{margin:14px 0 0!important;text-align:center;font-size:13.5px;color:var(--rtx-muted)}
.article-prose .rtx-cards + p.cap,.article-prose .rtx-stats + p.cap{margin:-16px 0 28px!important}
.article-prose .rtx-vs.is-neutral>div{background:var(--rtx-card)!important;box-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 32px -20px rgba(20,20,40,.28);border-top:5px solid var(--rtx-up)}
.article-prose .rtx-vs.is-neutral>div+div{border-top-color:#7c3aed}
.article-prose .rtx-vs.is-neutral h4{color:var(--rtx-ink)!important}
html[data-theme="dark"] .article-prose .rtx-vs.is-neutral>div{border:1px solid var(--rtx-line);border-top:5px solid var(--rtx-up)}
.article-prose .rtx-stats b{word-break:keep-all;overflow-wrap:normal;white-space:nowrap}
.article-prose .rtx-stats li{min-width:0;container-type:inline-size}
@container (max-width:170px){.article-prose .rtx-stats b{font-size:26px!important}}
@container (max-width:130px){.article-prose .rtx-stats b{font-size:21px!important}}
.article-prose .rtx-stats span,.article-prose .rtx-stats small{overflow-wrap:break-word;word-break:normal}
.article-prose .rtx-grid .rtx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (prefers-reduced-motion:no-preference){.article-prose .rtx-branch .rtx-branch-from::after{animation:rtxV .8s linear infinite}}
/* 2026-11-12 AEO：品牌做法框（固定文案，讓每篇都有「浪花科技＋做法＋服務頁」的實體關聯） */
.article-prose .rtx-brand{margin:28px 0 30px;padding:20px 24px;border-radius:20px;background:var(--rtx-card);border-left:6px solid #1E9AD1;box-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 32px -20px rgba(20,20,40,.28)}
html[data-theme="dark"] .article-prose .rtx-brand{box-shadow:none;border:1px solid var(--rtx-line);border-left:6px solid #1E9AD1}
.article-prose .rtx-brand>b{display:block;font-size:13.5px;font-weight:900;color:#1E9AD1;margin-bottom:6px}
.article-prose .rtx-brand p{margin:0!important;color:var(--rtx-ink);font-size:calc(17px * var(--art-scale,1));line-height:1.8}
/* w2 回饋：vs 欄內清單縮排收小、加項目符號；timeline 說明用一般字重 */
.article-prose .rtx-vs ul{padding-left:1.15em!important;list-style:disc}
.article-prose .rtx-vs li{margin:.35em 0!important}
.article-prose .rtx-vs>div>p{margin:.3em 0!important}
.article-prose ol.rtx-timeline>li>span{font-weight:500}
/* 短詞標籤列 */
.article-prose ul.rtx-tags{list-style:none;padding:0!important;margin:18px 0 26px!important;display:flex;flex-wrap:wrap;gap:8px}
.article-prose ul.rtx-tags>li{margin:0!important;padding:6px 14px!important;border-radius:999px;background:var(--rtx-card);border:1px solid var(--rtx-line);font-size:14.5px;font-weight:700;color:var(--rtx-ink)}
.article-prose ul.rtx-tags>li::marker{content:none}
.article-prose ul.rtx-tags>li.is-no{border-color:var(--rtx-bad);color:var(--rtx-bad)}
/* 色盲規則：成長／現在＝藍（原本誤用綠） */
.article-prose .rtx-shift .is-up{border-color:var(--rtx-up)!important;background:color-mix(in srgb,var(--rtx-up) 7%,transparent)!important}
.article-prose .rtx-shift .is-up h4,.article-prose .rtx-shift .is-up li i{color:var(--rtx-up)!important}
/* 不該做（紅）／該做（藍）對照：<div class="rtx-vs"><div class="is-bad">…</div><div class="is-up">…</div></div> */
.article-prose .rtx-vs .is-bad{background:#fdecec}
.article-prose .rtx-vs .is-bad h4{color:#b91c1c}
html[data-theme="dark"] .article-prose .rtx-vs .is-bad{background:#3a1d1d}
html[data-theme="dark"] .article-prose .rtx-vs .is-bad h4{color:#f87171}
/* 有編號的檢查清單 ol.rtx-check；卡片與清單裡的長字串可斷行 */
.article-prose ol.rtx-check{list-style:none;counter-reset:rtxc;padding:0!important;margin:20px 0 26px!important;display:grid;gap:8px}
.article-prose ol.rtx-check>li{counter-increment:rtxc;margin:0!important;padding:11px 14px 11px 46px!important;position:relative;background:var(--rtx-card);border-radius:12px;color:var(--rtx-ink);box-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 32px -20px rgba(20,20,40,.28)}
.article-prose ol.rtx-check>li::marker{content:none}
.article-prose ol.rtx-check>li::before{content:counter(rtxc);position:absolute;left:12px;top:10px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff;background:var(--rtx-up)}
.article-prose .rtx-cards code,.article-prose .rtx-check code,.article-prose .rtx-steps code{overflow-wrap:anywhere;word-break:break-all;white-space:normal}
/* 循環流程：<figure class="rtx-chain is-loop"> 會在最後標出「回到第一步」 */
.article-prose .rtx-chain.is-loop ol{position:relative;padding-bottom:34px!important}
.article-prose .rtx-chain.is-loop ol::after{content:"↻ 回到第一步，持續循環";position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:13px;font-weight:800;color:var(--rtx-up);border-top:3px dashed color-mix(in srgb,var(--rtx-up) 45%,transparent);padding-top:6px}
/* 數字卡：is-bad 用紅色（原本只有 up／down／alert） */
.article-prose .rtx-stats .is-bad b{color:var(--rtx-bad)!important}
/* 重點框輕量版：長段落用 <aside class="rtx-note is-soft">，內文一般字重、細框 */
.article-prose .rtx-note.is-soft{border-width:1px;border-color:color-mix(in srgb,var(--rtx-up) 45%,transparent)}
.article-prose .rtx-note.is-soft p{font-weight:400!important;font-size:calc(17px * var(--art-scale,1))!important}
/* 卡片欄數：is-two 桌機兩欄、is-one 單欄直排（標題是長英文參數名時用） */
@media(min-width:760px){.article-prose .rtx-cards.is-two{grid-template-columns:repeat(2,minmax(0,1fr))!important}.article-prose .rtx-cards.is-two>li{grid-column:auto!important}}
.article-prose .rtx-cards.is-one{grid-template-columns:minmax(0,1fr)!important}.article-prose .rtx-cards.is-one>li{grid-column:auto!important}
/* 舊文的 <code><pre>…</pre></code>：外層 code 不畫框，避免程式碼框旁多一個小空框 */
.article-prose code:has(> pre){display:contents;background:none!important;border:0!important;padding:0!important}
/* 元件裡的行內程式碼：只在放不下時才斷行，不把短名稱切在字中間 */
.article-prose .rtx-cards code,.article-prose .rtx-check code,.article-prose .rtx-steps code,.article-prose .rtx-vs code{word-break:normal!important;overflow-wrap:anywhere;white-space:normal}
/* 步驟裡的子清單：補回項目符號與正常縮排 */
.article-prose ol.rtx-steps>li ul,.article-prose ol.rtx-steps>li ol{margin:8px 0 0!important;padding-left:1.3em!important}
.article-prose ol.rtx-steps>li ul>li{list-style:disc!important;margin:4px 0!important;padding:0!important}
.article-prose ol.rtx-steps>li ol>li{list-style:decimal!important;margin:4px 0!important;padding:0!important}
/* 兩欄卡片剛好奇數張：最後一張撐滿整列，右邊不留空 */
@media(min-width:760px){.article-prose .rtx-cards.is-two>li:last-child:nth-child(odd){grid-column:1/-1!important}}
/* 程式碼對照：<div class="rtx-codevs"><div class="is-bad"><b>錯誤寫法</b><pre>…</pre></div><div class="is-up"><b>正確寫法</b><pre>…</pre></div></div> */
.article-prose .rtx-codevs{display:grid;gap:12px;margin:24px 0 30px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1100px){.article-prose .rtx-codevs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.article-prose .rtx-codevs>div{min-width:0;border-radius:16px;padding:14px 14px 12px;background:var(--rtx-card);border:2px solid var(--rtx-line)}
.article-prose .rtx-codevs>div>b{display:block;font-size:14px;font-weight:800;margin:0 2px 8px;color:var(--rtx-ink)}
.article-prose .rtx-codevs>.is-bad{border-color:var(--rtx-bad)}.article-prose .rtx-codevs>.is-bad>b{color:var(--rtx-bad)}
.article-prose .rtx-codevs>.is-up{border-color:var(--rtx-up)}.article-prose .rtx-codevs>.is-up>b{color:var(--rtx-up)}
.article-prose .rtx-codevs>.is-bad>b::before{content:"✕ "}.article-prose .rtx-codevs>.is-up>b::before{content:"✓ "}
.article-prose .rtx-codevs pre{margin:0!important;max-width:100%;overflow-x:auto;font-size:13.5px}
.article-prose .rtx-codevs>div>p{margin:8px 2px 0!important;font-size:.92em}
/* 數字卡手機兩欄、剛好奇數張：最後一張撐滿整列 */
@media(max-width:759px){.article-prose .rtx-stats>li:last-child:nth-child(odd){grid-column:1/-1}}
/* 參數／指令清單：<ul class="rtx-params"><li><code>名稱</code><span>說明</span></li></ul>（可加 <small>型別或預設值</small>） */
.article-prose ul.rtx-params{list-style:none;padding:0!important;margin:22px 0 28px!important;border-radius:16px;background:var(--rtx-card);border:1px solid var(--rtx-line);overflow:hidden}
.article-prose ul.rtx-params>li{list-style:none;margin:0!important;padding:14px 18px!important;display:grid;gap:4px 18px;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rtx-line)}
.article-prose ul.rtx-params>li:first-child{border-top:0}
.article-prose ul.rtx-params>li::before,.article-prose ul.rtx-params>li::marker{content:none!important;display:none!important}
@media(min-width:760px){.article-prose ul.rtx-params>li{grid-template-columns:minmax(0,38%) minmax(0,1fr);align-items:baseline}}
.article-prose ul.rtx-params>li>code{justify-self:start;max-width:100%;white-space:normal;word-break:normal;overflow-wrap:anywhere;font-size:.9em;font-weight:700}
.article-prose ul.rtx-params>li>span{color:var(--rtx-ink);line-height:1.65}
.article-prose ul.rtx-params>li>small{grid-column:1/-1;color:var(--rtx-muted);font-size:12.5px}
@media(min-width:760px){.article-prose ul.rtx-params>li>small{grid-column:2}}
/* 一般清單的項目符號：舊樣式只設了 ::marker 顏色，沒把 list-style 打開（Tailwind 預設關掉），圓點與編號一直沒顯示。
   只恢復「沒有 class、也不在任何 rtx 元件裡」的清單。 */
.article-prose ul:not([class]):not(:is([class*="rtx-"],.faq-section,nav) *){list-style:disc outside}
.article-prose ol:not([class]):not(:is([class*="rtx-"],.faq-section,nav) *){list-style:decimal outside}
.article-prose ul:not([class]):not(:is([class*="rtx-"],.faq-section,nav) *) ul:not([class]){list-style:circle outside}
/* 有編號的檢查清單也支援警示色：保留編號，圓圈改色 */
.article-prose ol.rtx-check>li.is-no::before{background:var(--rtx-bad)!important;color:#fff!important}
.article-prose ol.rtx-check>li.is-warn::before{background:var(--rtx-alert)!important;color:#fff!important}
/* 問題→解法配對：<ul class="rtx-pairs"><li><span>問題</span><b>解法</b></li></ul>；每列一組，左問題右解法，手機上下排 */
.article-prose ul.rtx-pairs{list-style:none;padding:0!important;margin:22px 0 28px!important;display:grid;gap:10px}
.article-prose ul.rtx-pairs>li{list-style:none;margin:0!important;padding:0!important;display:grid;gap:0;grid-template-columns:minmax(0,1fr);border-radius:16px;overflow:hidden;background:var(--rtx-card);border:1px solid var(--rtx-line)}
.article-prose ul.rtx-pairs>li::before,.article-prose ul.rtx-pairs>li::marker{content:none!important;display:none!important}
@media(min-width:760px){.article-prose ul.rtx-pairs>li{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.article-prose ul.rtx-pairs>li>span,.article-prose ul.rtx-pairs>li>b{display:block;padding:14px 18px 14px 44px;position:relative;line-height:1.65;font-size:.97em}
.article-prose ul.rtx-pairs>li>span{color:var(--rtx-ink);font-weight:500;background:color-mix(in srgb,var(--rtx-bad) 8%,transparent)}
.article-prose ul.rtx-pairs>li>b{color:var(--rtx-ink);font-weight:700;background:color-mix(in srgb,var(--rtx-up) 9%,transparent)}
.article-prose ul.rtx-pairs>li>span::before,.article-prose ul.rtx-pairs>li>b::before{position:absolute;left:14px;top:15px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;color:#fff}
.article-prose ul.rtx-pairs>li>span::before{content:"✕";background:var(--rtx-bad)}
.article-prose ul.rtx-pairs>li>b::before{content:"→";background:var(--rtx-up)}
.article-prose ul.rtx-pairs.is-neutral>li>span{background:transparent}.article-prose ul.rtx-pairs.is-neutral>li>span::before{content:"?";background:var(--rtx-muted)}
/* 參數清單單項警示：<li class="is-no"> 紅、<li class="is-warn"> 琥珀（左邊一條色帶，名稱同色） */
.article-prose ul.rtx-params>li.is-no{box-shadow:inset 4px 0 0 var(--rtx-bad)}.article-prose ul.rtx-params>li.is-no>code{color:var(--rtx-bad)}
.article-prose ul.rtx-params>li.is-warn{box-shadow:inset 4px 0 0 var(--rtx-alert)}.article-prose ul.rtx-params>li.is-warn>code{color:var(--rtx-alert)}
/* 左右對照、配對、參數清單、程式碼對照後面也可以接一行圖說 <p class="cap"> */
.article-prose .rtx-vs + p.cap,.article-prose .rtx-pairs + p.cap,.article-prose .rtx-params + p.cap,.article-prose .rtx-codevs + p.cap{margin:-14px 0 28px!important}
.article-prose .rtx-codevs>.is-bad>b{color:var(--rtx-bad)!important}.article-prose .rtx-codevs>.is-up>b{color:var(--rtx-up)!important}
/* 程式碼關掉字型連字：=> === != 要顯示成實際要打的字元，不是箭頭或三條線 */
.article-prose pre,.article-prose code,.article-prose kbd,.article-prose samp{font-variant-ligatures:none!important;font-feature-settings:"liga" 0,"calt" 0!important}
/* 對照框淡紅／淡藍底上的行內程式碼：加深字色、用白底 */
.article-prose .rtx-vs code{background:var(--rtx-card)!important;color:var(--rtx-ink)!important;border:1px solid var(--rtx-line)}
/* 檢查清單裡的小字附註另起一行 */
.article-prose .rtx-check>li>small{display:block;margin-top:3px;font-size:12.5px;color:var(--rtx-muted)}
/* 參數清單名稱欄也可以放 <b>（非程式字的名稱） */
.article-prose ul.rtx-params>li>b{justify-self:start;font-weight:800;color:var(--rtx-ink)}
/* 程式碼框右上角的「複製」鈕：替它留出上方空間，單行長程式碼才不會被壓到 */
.article-prose .code-wrap>pre{padding-top:40px!important}
/* 步驟、清單、卡片裡的文字：行尾的全形標點不可撐出邊界 */
.article-prose ol.rtx-steps>li,.article-prose ol.rtx-steps>li>p,.article-prose ol.rtx-steps>li>b,.article-prose .rtx-check>li,.article-prose .rtx-cards>li,.article-prose .rtx-pairs>li>span,.article-prose .rtx-pairs>li>b{min-width:0;overflow-wrap:anywhere;line-break:auto}
/* 步驟也可以標警示：<li class="is-warn"> 琥珀、<li class="is-bad"> 紅（編號圓角方塊變色） */
.article-prose ol.rtx-steps>li.is-warn::before{background:var(--rtx-alert)}.article-prose ol.rtx-steps>li.is-bad::before{background:var(--rtx-bad)}

/* 2026-11-12 老闆規定：卡片不可用「上緣或左緣一條彩色線＋圓角」（AI 模板味）。
   區分一律靠整圈細框、底色、標題顏色；以下覆寫所有舊規則，新元件不得再用。 */
.article-prose .rtx-vs.is-neutral>div,html[data-theme="dark"] .article-prose .rtx-vs.is-neutral>div{border:1px solid var(--rtx-line)!important;border-top-width:1px!important}
.article-prose .rtx-vs.is-neutral>div>h4{color:var(--rtx-up)!important}
.article-prose .rtx-vs.is-neutral>div+div>h4{color:#7c3aed!important}
html[data-theme="dark"] .article-prose .rtx-vs.is-neutral>div+div>h4{color:#a78bfa!important}
.article-prose .rtx-brand,html[data-theme="dark"] .article-prose .rtx-brand{border:1px solid color-mix(in srgb,#1E9AD1 35%,var(--rtx-line))!important;background:color-mix(in srgb,#1E9AD1 6%,var(--rtx-card))}
.article-prose ul.rtx-params>li.is-no{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rtx-bad) 55%,transparent)!important}
.article-prose ul.rtx-params>li.is-warn{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rtx-alert) 55%,transparent)!important}
html[data-theme] .ide-body .article-prose blockquote{border-left:0!important;border-radius:10px!important}
.article-prose [style*="border-left"]:not(.rtx-timeline *){border-left:0!important;border-radius:10px!important}

/* 符號統一規格（2026-11-12）：勾藍、叉紅、警示琥珀；由 Article::unifySymbols 產生 */
.article-prose .rt-sym{display:inline-block;font-weight:900;font-style:normal;margin:0 .15em;font-family:system-ui,"Segoe UI Symbol","Noto Sans Symbols 2",sans-serif}
.article-prose .rt-sym.is-ok{color:var(--rtx-up,#1E9AD1)}
.article-prose .rt-sym.is-no{color:var(--rtx-bad,#dc2626)}
.article-prose .rt-sym.is-warn{color:var(--rtx-alert,#d97706)}