:root { color-scheme:light; --bg:#f4f6f9; --surface:#fff; --ink:#202e3c; --muted:#637282; --accent:#236aa5; --accent-soft:#eaf2fa; --line:#e0e7ee; --dark:#152b40; --ease:cubic-bezier(.2,.7,.25,1); font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--bg); font-synthesis:none; text-rendering:optimizeLegibility; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; font-size:15px; line-height:1.65; }
a { color:inherit; }
button,select { font:inherit; }
a,button,select { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
::selection { background:#cce3fb; color:var(--ink); }
a:focus-visible,button:focus-visible,select:focus-visible { outline:3px solid #559cda; outline-offset:4px; }
.page-shell { width:min(1080px,calc(100% - 64px)); margin-inline:auto; }
#more-bots,#articles { scroll-margin-top:84px; }
.skip-link { position:fixed; z-index:20; top:-80px; left:20px; padding:10px 16px; background:var(--dark); color:#fff; }
.skip-link:focus { top:14px; }
.site-header { position:sticky; top:0; z-index:30; background:rgb(255 255 255 / 96%); transition:box-shadow .2s var(--ease),background-color .2s var(--ease); }
.site-header.is-scrolled { background:rgb(255 255 255 / 98%); box-shadow:0 1px 0 rgb(31 55 81 / 8%),0 8px 18px rgb(31 55 81 / 8%); } /* taste-skill-ignore: sticky header elevation */
.site-header-inner { display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:24px; }
.article-brand-switch { display:grid; min-width:140px; }
.article-brand-switch > * { grid-area:1 / 1; }
.article-page .brand--default { transition:opacity .16s var(--ease),transform .16s var(--ease); }
.article-scroll-back { display:inline-flex; align-items:center; justify-self:start; gap:10px; min-height:38px; color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-13px); }
.article-scroll-back-icon { display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:7px; background:#eaf2f8; color:var(--accent); font-size:18px; line-height:1; transition:background-color .16s var(--ease),color .16s var(--ease),transform .16s var(--ease); }
.article-scroll-back:hover { color:var(--accent); }
.article-scroll-back:hover .article-scroll-back-icon { background:var(--accent); color:#fff; transform:translateX(-2px); }
.article-page .site-header.is-scrolled .brand--default { opacity:0; transform:translateY(-10px); pointer-events:none; }
.article-page .site-header.is-scrolled .article-scroll-back { visibility:visible; pointer-events:auto; opacity:1; transform:translateY(0); animation:article-back-drop .32s var(--ease) both; }
@keyframes article-back-drop { from { opacity:0; transform:translateY(-18px); } to { opacity:1; transform:translateY(0); } }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-size:18px; font-weight:650; letter-spacing:-.02em; }
.brand-mark { display:block; flex:0 0 auto; width:33px; height:33px; border-radius:9px; object-fit:cover; }
.site-nav { display:flex; align-items:center; gap:30px; }
.site-nav a { position:relative; padding:23px 0; color:var(--muted); text-decoration:none; font-size:13px; }
.site-nav a:hover,.site-nav a[aria-current] { color:var(--accent); }
.site-nav a[aria-current]::after { content:""; position:absolute; inset:auto 0 14px; height:2px; background:var(--accent); }
.language-switch-slot { display:inline-flex; align-items:center; margin-left:2px; padding-left:18px; border-left:1px solid #d8e3eb; }
.language-switch { color:var(--muted); text-decoration:none; font-size:12px; font-weight:650; letter-spacing:.04em; }
.language-switch:hover { color:var(--accent); }
.nav-toggle { display:none; place-items:center; width:42px; height:42px; border:1px solid #d8e3eb; border-radius:12px; background:#f7fafc; color:var(--ink); cursor:pointer; transition:background-color .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease); }
.nav-toggle:hover,.nav-toggle[aria-expanded="true"] { border-color:#b7d2e5; background:var(--accent-soft); color:var(--accent); box-shadow:0 7px 16px rgb(31 55 81 / 10%); }
.nav-toggle-icon { display:grid; gap:4px; width:19px; }
.nav-toggle-icon i { display:block; height:2px; border-radius:2px; background:currentColor; transition:transform .22s var(--ease),opacity .16s var(--ease),width .22s var(--ease); }
.nav-toggle-icon i:nth-child(3) { width:13px; justify-self:end; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:first-child { transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:nth-child(2) { opacity:0; transform:scaleX(.5); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:last-child { width:19px; transform:translateY(-6px) rotate(-45deg); }
.nav-scrim { display:none; }
.intro { padding:52px 0 37px; }
.intro-top { display:flex; justify-content:space-between; align-items:center; gap:24px; }
h1 { margin:0; font-size:32px; font-weight:650; line-height:1.3; letter-spacing:-.035em; }
.intro-copy { margin:12px 0 0; color:var(--muted); font-size:15px; }
.intro-action { display:inline-flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:26px; padding:11px 16px; color:var(--accent); background:var(--accent-soft); text-decoration:none; font-size:13px; border-radius:6px; }
.intro-action:hover { background:#d9e9f9; }
.directory { padding:10px 0 60px; }
.directory-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:20px; }
.directory-heading h2,.articles-heading h2 { margin:0; font-size:24px; font-weight:650; line-height:1.4; letter-spacing:-.025em; }
.directory-count { margin-left:9px; color:var(--muted); font-size:13px; font-weight:400; letter-spacing:0; }
.directory-tools { display:flex; align-items:center; gap:10px; }
.directory-tools label { color:var(--muted); font-size:13px; }
.select-wrap { position:relative; width:132px; }
.select-wrap select { appearance:none; width:100%; min-height:38px; padding:7px 31px 7px 12px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); font-size:13px; cursor:pointer; }
.select-wrap svg { position:absolute; right:10px; top:11px; pointer-events:none; }
.filter-status { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
.bot-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.bot-item { display:flex; flex-direction:column; min-height:184px; padding:22px 24px 19px; background:var(--surface); border-radius:10px; transition:transform .2s var(--ease),box-shadow .2s var(--ease); }
.bot-item:hover,.bot-item:focus-within { transform:translateY(-4px); box-shadow:0 12px 28px rgb(31 55 81 / 12%); } /* taste-skill-ignore: raised hover/focus explicitly requested */
.no-js .bot-item:last-child:nth-child(odd),.bot-item.is-last-visible { grid-column:1 / -1; width:calc(50% - 7px); justify-self:center; }
.bot-item-head { display:flex; align-items:center; gap:12px; }
.bot-avatar { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border-radius:10px; object-fit:cover; }
.bot-avatar--placeholder { background:#eaf0f6; color:#4b6c90; font-size:18px; font-weight:650; letter-spacing:-.04em; }
.bot-identity { min-width:0; }
.bot-item h3 { margin:0; font-size:17px; font-weight:650; line-height:1.3; }
.bot-handle { display:block; margin-top:2px; color:var(--muted); font-size:13px; line-height:1.35; }
.bot-handle { width:fit-content; color:var(--accent); text-decoration:underline; text-decoration-color:#b6cce0; text-underline-offset:3px; }
.bot-handle:hover { text-decoration-color:currentColor; }
.bot-item .action { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; gap:6px; margin-left:auto; min-height:36px; padding:7px 11px; color:var(--accent); background:var(--accent-soft); border-radius:5px; font-size:13px; text-decoration:none; }
.bot-item .action:hover { background:var(--accent); color:#fff; }
.bot-item .action svg { width:13px; height:13px; order:1; }
.bot-description { max-width:60ch; margin:12px 0 0; color:#394b5a; font-size:16px; line-height:1.65; }
.bot-item-bottom { margin-top:auto; padding-top:14px; }
.bot-types { display:flex; flex-wrap:wrap; gap:8px; }
.bot-type { color:var(--muted); font-size:14px; line-height:1.4; }
.bot-type + .bot-type::before { content:"·"; margin-right:8px; color:#9daab9; }
.empty-result { margin:0; padding:36px 0; color:var(--muted); text-align:center; }
.articles { padding:44px 0 38px; background:var(--dark); color:#f4f8fc; overflow:hidden; }
.articles-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:25px; }
.articles-heading p { max-width:50ch; margin:7px 0 0; color:#b5c5d5; font-size:15px; }
.articles-actions { display:flex; align-items:center; flex-shrink:0; gap:18px; }
.articles-all { color:#edf3fa; font-size:13px; text-decoration:none; }
.articles-all:hover { text-decoration:underline; text-underline-offset:4px; }
.articles-all span { margin-left:5px; }
.article-motion-toggle { display:inline-flex; align-items:center; flex-shrink:0; gap:7px; min-height:36px; padding:7px 11px; border:0; border-radius:5px; background:#2a4057; color:#edf3fa; font-size:13px; cursor:pointer; }
.article-motion-toggle:hover { background:#3a546f; }
.article-motion-toggle svg { width:13px; height:13px; }
.article-rails { display:grid; gap:2px; }
.article-track { overflow:hidden; padding:7px 0 17px; }
.article-track-inner { width:100%; }
.article-track-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.article-track-group--clone { display:none; }
.article-card { display:grid; grid-template-columns:94px 1fr; min-height:224px; background:#fff; border-radius:8px; overflow:hidden; color:var(--ink); text-decoration:none; transition:transform .2s var(--ease),box-shadow .2s var(--ease); }
.article-card:hover,.article-card:focus-visible { transform:translateY(-5px); box-shadow:0 14px 27px rgb(0 0 0 / 24%); } /* taste-skill-ignore: raised hover/focus explicitly requested */
.article-card-visual { display:grid; place-items:center; background:#e1edf7; }
.article-card-visual svg { width:90px; height:136px; }
.article-card-content { display:flex; flex-direction:column; min-width:0; padding:20px 20px 17px; }
.article-card-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; line-height:1.4; }
.article-card-category { color:#2c6599; }
.article-card-example { color:#6c7c8b; }
.article-card-title { margin-top:13px; font-size:18px; font-weight:600; line-height:1.5; }
.article-card-excerpt { margin-top:8px; color:var(--muted); font-size:15px; line-height:1.65; }
.article-card-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; margin-top:auto; color:#326caa; font-size:13px; }
.article-card-arrow { font-size:18px; line-height:1; }
.js .article-track-inner { display:flex; width:max-content; animation:rail-left 72s linear infinite; }
.js .article-track-group { display:flex; flex:0 0 auto; gap:14px; padding-right:14px; }
.js .article-track-group--clone { display:flex; }
.js .article-card--rail { flex:0 0 420px; width:420px; }
.js .article-track--right .article-track-inner { animation-name:rail-right; animation-duration:80s; }
.js .articles.is-paused .article-track-inner,.js .article-track:hover .article-track-inner,.js .article-track:focus-within .article-track-inner { animation-play-state:paused; }
.article-track:focus-within { overflow-x:auto; }
.article-track:focus-within .article-track-inner { animation:none; transform:none; }
@keyframes rail-left { to { transform:translateX(-50%); } }
@keyframes rail-right { from { transform:translateX(-50%); } to { transform:translateX(0); } }
.site-footer { padding:30px 0; background:#102235; color:#edf3fa; }
.site-footer-inner { width:min(1080px,calc(100% - 64px)); margin-inline:auto; }
.footer-catalog-top { display:grid; grid-template-columns:minmax(240px,1.1fr) minmax(0,1.9fr); gap:56px; padding:8px 0 29px; }
.footer-catalog-brand { max-width:280px; }
.footer-brand { display:inline-flex; align-items:center; gap:12px; color:#edf3fa; font-size:18px; font-weight:600; text-decoration:none; }
.footer-brand-mark { display:block; flex:0 0 auto; width:34px; height:34px; border-radius:50%; object-fit:cover; }
.footer-brand-copy { display:flex; flex-direction:column; gap:2px; }
.footer-brand-copy strong { color:#edf3fa; font-size:18px; line-height:1.2; }
.footer-brand-copy small { color:#b0c2d4; font-size:12px; font-weight:400; line-height:1.35; }
.footer-catalog-intro { margin:15px 0 0; color:#b0c2d4; font-size:13px; line-height:1.75; }
.footer-catalog-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.footer-catalog-nav div { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.footer-catalog-nav h2 { margin:0 0 5px; color:#7f9bb4; font-size:11px; font-weight:600; letter-spacing:.08em; }
.footer-catalog-nav a,.footer-catalog-bottom a { color:#d5e2ed; font-size:13px; text-decoration:none; }
.footer-catalog-nav a:hover,.footer-catalog-bottom a:hover { color:#fff; }
.footer-catalog-bottom { display:flex; align-items:end; justify-content:space-between; gap:30px; padding-top:18px; border-top:1px solid #304960; }
.footer-disclosure { max-width:60ch; margin:0; color:#aebfd0; font-size:12px; line-height:1.8; }
.footer-copyright { flex-shrink:0; color:#aebfd0; font-size:12px; }
.article-main { padding-block:50px 80px; }
.reading-article { max-width:760px; margin-inline:auto; padding:42px; background:var(--surface); border-radius:10px; }
.reading-article h1 { max-width:24em; font-size:32px; line-height:1.45; }
.article-excerpt { margin:18px 0 0; color:var(--muted); font-size:18px; line-height:1.8; }
.article-labels { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; color:var(--accent); font-size:13px; }
.article-labels .example-label { color:var(--muted); }
.article-body { margin-top:36px; }
.article-body section + section { margin-top:30px; }
.article-body h2 { margin:0; font-size:24px; line-height:1.5; font-weight:600; }
.article-body p { margin:13px 0 0; font-size:16px; line-height:1.95; }
.article-footer { margin-top:38px; }
.article-footer a { color:var(--accent); font-size:15px; text-underline-offset:.2em; }
.article-index-main { padding-block:36px 64px; }
.article-index-heading { margin-bottom:36px; }
.article-index-back { display:inline-block; margin-bottom:24px; color:var(--muted); font-size:13px; text-decoration:none; }
.article-index-back:hover { color:var(--accent); }
.article-index-heading p { max-width:50ch; margin:10px 0 0; color:var(--muted); font-size:15px; }
.article-index-count { display:flex; align-items:baseline; gap:12px; margin-bottom:18px; }
.article-index-count h2 { margin:0; font-size:18px; font-weight:600; }
.article-index-count > span { color:var(--muted); font-size:13px; }
.article-index-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.article-index-grid .article-card { min-height:224px; }
.article-index-grid .article-card:hover,.article-index-grid .article-card:focus-visible { box-shadow:0 12px 28px rgb(31 55 81 / 12%); } /* taste-skill-ignore: raised hover/focus explicitly requested */
@media (prefers-reduced-motion:no-preference) {
 .is-entering { animation:arrive .4s var(--ease) both; animation-delay:var(--arrival-delay,0ms); }
 @keyframes arrive { from { opacity:.5; transform:translateY(6px); } to { opacity:1; transform:none; } }
}
@media (prefers-reduced-motion:reduce) {
 .article-page .site-header.is-scrolled .article-scroll-back { animation:none; }
 .js.nav-open .site-nav { animation:none; }
}
@media (max-width:850px) {
 .page-shell { width:calc(100% - 48px); }
 .intro { padding-top:38px; }
 .intro-top { gap:20px; }
 h1 { font-size:28px; }
 .intro-action { gap:12px; padding-inline:12px; }
 .bot-item { min-height:190px; padding:19px; }
 .article-card { grid-template-columns:80px 1fr; }
 .article-card-visual svg { width:76px; }
 .article-card-content { padding:18px; }
 .footer-catalog-top { gap:28px; }
}
@media (max-width:600px) {
 .page-shell { width:calc(100% - 36px); }
 .site-header-inner { min-height:64px; gap:16px; }
 .brand { gap:8px; font-size:15px; }
 .article-brand-switch { min-width:116px; }
 .article-scroll-back { gap:7px; font-size:13px; }
 .article-scroll-back-icon { width:28px; height:28px; border-radius:6px; font-size:17px; }
 .brand-mark { width:28px; height:28px; border-radius:7px; }
 .js .nav-toggle { display:inline-flex; }
 .js.nav-open .nav-scrim { display:block; position:fixed; z-index:20; inset:64px 0 0; width:100%; height:calc(100vh - 64px); border:0; background:rgb(15 38 58 / 18%); cursor:default; }
 .js .site-nav { position:absolute; z-index:31; top:calc(100% + 10px); left:auto; right:18px; display:none; width:min(292px,calc(100vw - 36px)); flex-direction:column; align-items:stretch; gap:4px; padding:9px; border:1px solid #dce6ed; border-radius:14px; background:rgb(255 255 255 / 98%); box-shadow:0 18px 42px rgb(22 48 71 / 20%); transform-origin:top right; } /* taste-skill-ignore: mobile navigation overlay */
 .js.nav-open .site-nav { display:flex; animation:nav-drawer-in .2s var(--ease) both; }
 .js .site-nav a { padding:12px 13px; border:0; border-radius:9px; font-size:14px; } /* taste-skill-ignore: drawer item separation */
 .js .language-switch-slot { margin:4px 4px 0; padding:10px 13px 4px; border-top:1px solid #e3ebf1; border-left:0; }
 .js .site-nav a:hover,.js .site-nav a[aria-current] { background:#edf5fa; color:var(--accent); }
 .js .site-nav a[aria-current]::after { display:none; }
 @keyframes nav-drawer-in { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }
 .intro { padding:30px 0 27px; }
 .intro-top { align-items:start; flex-direction:column; gap:17px; }
 h1 { font-size:28px; line-height:1.35; }
 .intro-copy { margin-top:9px; font-size:15px; }
 .intro-action { padding:0; background:none; gap:12px; min-height:36px; }
 .directory { padding:4px 0 38px; }
 .directory-heading { margin-bottom:17px; gap:12px; }
 .directory-heading h2,.articles-heading h2 { font-size:24px; }
 .directory-count { margin-left:4px; }
 .directory-tools label { display:none; }
 .select-wrap { width:109px; }
 .select-wrap select { min-height:36px; }
 .select-wrap svg { top:10px; }
 .bot-list { grid-template-columns:1fr; gap:12px; }
 .bot-item,.no-js .bot-item:last-child:nth-child(odd),.bot-item.is-last-visible { grid-column:auto; width:auto; justify-self:stretch; min-height:0; padding:20px; }
 .bot-description { margin-top:14px; }
 .bot-item-bottom { padding-top:14px; }
 .articles { padding:32px 0 26px; }
 .articles-heading { align-items:start; gap:12px; margin-bottom:18px; }
 .articles-heading p { font-size:13px; }
 .articles-actions { align-items:flex-end; flex-direction:column; gap:10px; }
 .article-motion-toggle { padding-inline:9px; }
 .js .article-card { flex-basis:min(315px,calc(100vw - 64px)); width:min(315px,calc(100vw - 64px)); }
 .article-card { grid-template-columns:64px 1fr; min-height:248px; }
 .article-card-visual svg { width:62px; height:112px; }
 .article-card-content { padding:17px 16px; }
 .article-card-title { font-size:18px; }
 .article-card-excerpt { font-size:13px; }
 .site-footer { padding-block:26px; }
 .site-footer-inner { width:calc(100% - 36px); }
 .footer-catalog-top { grid-template-columns:1fr; gap:25px; padding-bottom:24px; }
 .footer-catalog-nav { gap:16px; }
 .footer-catalog-bottom { flex-direction:column; align-items:flex-start; gap:9px; }
 .article-main { padding-block:28px 50px; }
 .reading-article { padding:25px 21px; }
 .reading-article h1 { font-size:28px; }
 .article-excerpt { font-size:15px; }
 .article-body { margin-top:30px; }
 .article-index-main { padding-block:26px 42px; }
 .article-index-heading { margin-bottom:28px; }
 .article-index-grid { grid-template-columns:1fr; gap:16px; }
 .article-index-grid .article-card { min-height:224px; grid-template-columns:70px 1fr; }
}

/* Article reading view: an editorial lead image, a practical example, then a calm reading column. */
.article-page { background:#eef2f5; }
.article-main { padding-block:42px 76px; }
.reading-article {
  max-width:960px;
  padding:28px 30px 48px;
  border-radius:10px;
  background:var(--surface);
}
.article-hero {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);
  align-items:stretch;
  gap:34px;
  padding-bottom:30px;
}
.article-hero-visual {
  position:relative;
  min-width:0;
  margin:0;
  overflow:hidden;
  border-radius:8px;
  background:#dfeaf2;
}
.article-hero-visual svg { display:block; width:100%; height:auto; aspect-ratio:2 / 1; }
.article-hero-visual figcaption {
  position:absolute;
  right:12px;
  bottom:10px;
  padding:3px 7px;
  background:rgb(255 255 255 / 82%);
  color:#557086;
  font-size:11px;
  line-height:1.3;
}
.article-hero-copy { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.article-hero-copy .article-labels { margin-bottom:14px; }
.article-hero-copy h1 { max-width:20em; margin:0; font-size:27px; line-height:1.42; letter-spacing:0; }
.article-excerpt { max-width:34em; margin:16px 0 0; font-size:16px; line-height:1.75; }
.article-keywords {
  display:flex;
  flex-wrap:wrap;
  gap:7px 14px;
  margin-top:22px;
  color:#56738a;
  font-size:12px;
  line-height:1.5;
}
.article-keywords span { font-weight:550; }
.article-scenario {
  max-width:720px;
  margin:30px auto 0;
  padding:17px 20px 18px;
  border-left:3px solid #4b89b5;
  background:#f2f7fa;
}
.article-scenario p { margin:0; }
.article-scenario-label { color:#315f7e; font-size:13px; font-weight:650; }
.article-scenario-query { margin-top:9px !important; }
.article-scenario code {
  display:inline-block;
  padding:4px 8px;
  background:#e3eef4;
  color:#234c67;
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  font-size:13px;
  line-height:1.5;
}
.article-scenario p:last-child { margin-top:10px; color:#526978; font-size:14px; line-height:1.75; }
.article-body { max-width:720px; margin:34px auto 0; }
.article-body section + section { margin-top:32px; padding-top:4px; }
.article-body h2 { margin:0; font-size:21px; line-height:1.45; font-weight:650; letter-spacing:-.015em; }
.article-body p { margin:13px 0 0; color:#3c4d5b; font-size:16px; line-height:1.9; }
.article-footer {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  max-width:720px;
  margin:42px auto 0;
  padding-top:26px;
}
.article-neighbor {
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:88px;
  padding:15px 42px 14px 16px;
  border-radius:6px;
  background:#f2f6f9;
  color:var(--ink);
  text-decoration:none;
  transition:background-color .2s var(--ease),transform .2s var(--ease);
}
.article-neighbor:hover,.article-neighbor:focus-visible { background:#e6f0f6; transform:translateY(-2px); }
.article-neighbor--next { padding-right:42px; }
.article-neighbor-label { color:#5c7e96; font-size:12px; line-height:1.4; }
.article-neighbor strong { margin-top:7px; font-size:14px; font-weight:600; line-height:1.55; }
.article-neighbor-arrow { position:absolute; right:16px; bottom:15px; color:var(--accent); font-size:18px; line-height:1; }
.article-neighbor--empty { visibility:hidden; }

@media (max-width:850px) {
  .article-main { padding-block:30px 58px; }
  .reading-article { padding:22px 22px 38px; }
  .article-hero { grid-template-columns:1fr; gap:22px; }
  .article-hero-visual svg { aspect-ratio:2.2 / 1; }
  .article-hero-copy h1 { max-width:24em; font-size:26px; line-height:1.4; }
}

@media (max-width:600px) {
  .article-main { padding-block:20px 42px; }
  .reading-article { padding:14px 15px 30px; border-radius:8px; }
  .article-hero { gap:18px; padding-bottom:24px; }
  .article-hero-visual figcaption { right:8px; bottom:7px; font-size:10px; }
  .article-hero-copy .article-labels { margin-bottom:11px; }
  .article-hero-copy h1 { font-size:24px; line-height:1.4; }
  .article-excerpt { margin-top:12px; font-size:15px; line-height:1.72; }
  .article-keywords { margin-top:17px; font-size:11px; gap:6px 12px; }
  .article-scenario { margin-top:22px; padding:14px 15px 15px; }
  .article-scenario-query { overflow-wrap:anywhere; }
  .article-scenario p:last-child { font-size:13px; }
  .article-body { margin-top:26px; }
  .article-body section + section { margin-top:23px; padding-top:22px; }
  .article-body h2 { font-size:19px; }
  .article-body p { font-size:15px; line-height:1.88; }
  .article-footer { grid-template-columns:1fr; gap:10px; margin-top:30px; padding-top:18px; }
  .article-neighbor--empty { display:none; }
}
@media (max-width:360px) {
  .article-hero-copy h1 { font-size:18px; line-height:1.5; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none !important; transition:none !important; }
 .article-motion-toggle { display:none !important; }
 .article-track { overflow:visible; }
 .article-track-inner { display:block !important; width:100% !important; transform:none !important; }
 .article-track-group { display:grid !important; padding:0 !important; }
 .article-track-group--clone { display:none !important; }
 .js .article-card { width:auto; min-width:0; }
}
@media (max-width:600px) and (prefers-reduced-motion:reduce) { .article-track-group { grid-template-columns:1fr; } }

/* Approved article card directions: compact rail cards for the home page and illustrated covers for the archive. */
.article-card--rail {
  grid-template-columns:minmax(0,1fr) 142px;
  min-height:230px;
  border-radius:9px;
}
.article-card--rail .article-card-content { order:1; padding:20px 18px 17px 21px; }
.article-card--rail .article-card-visual { order:2; min-width:0; overflow:hidden; border-radius:72px 0 0 72px; }
.article-card--rail .article-card-visual svg { width:270px; max-width:none; height:160px; transform:translateX(-78px); }
.article-card--rail .article-card-title { margin-top:12px; font-size:17px; line-height:1.45; }
.article-card--rail .article-card-excerpt { font-size:13px; line-height:1.7; }
.article-card--rail .article-card-example { display:none; }

.article-card--archive {
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  min-height:374px;
  border-radius:9px;
}
.article-card--archive .article-card-visual { flex:0 0 178px; width:100%; overflow:hidden; }
.article-card--archive .article-card-visual svg { width:100%; height:100%; }
.article-card--archive .article-card-content { flex:1; padding:19px 22px 20px; }
.article-card--archive .article-card-title { margin-top:12px; font-size:19px; line-height:1.45; }
.article-card--archive .article-card-excerpt { font-size:14px; line-height:1.75; }
.article-checklist,
.article-comparison,
.related-articles { margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.article-checklist h2,
.article-comparison h2,
.related-articles h2 { margin:0 0 14px; font-size:20px; line-height:1.35; }
.article-checklist ol { margin:0; padding-left:24px; }
.article-checklist li { padding:5px 0 5px 6px; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:8px; }
.article-comparison table { width:100%; border-collapse:collapse; min-width:520px; font-size:14px; line-height:1.6; }
.article-comparison th,
.article-comparison td { padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.article-comparison th { background:#eef4f8; color:var(--ink); font-weight:700; }
.article-comparison tr:last-child td { border-bottom:0; }
.related-articles > div { display:grid; gap:8px; }
.related-articles a { display:flex; justify-content:space-between; gap:14px; padding:11px 14px; border:1px solid var(--line); border-radius:7px; color:var(--accent); text-decoration:none; background:#fff; }
.related-articles a:hover,.related-articles a:focus-visible { box-shadow:0 8px 18px rgb(31 55 81 / 10%); transform:translateY(-1px); }
.article-index-grid--remainder-1 .article-card:last-child { grid-column:2; }

@media (max-width:850px) {
  .article-index-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-index-grid--remainder-1 .article-card:last-child { grid-column:auto; width:100%; justify-self:stretch; }
  .article-card--rail { grid-template-columns:minmax(0,1fr) 122px; }
  .article-card--rail .article-card-visual svg { transform:translateX(-92px); }
}

@media (max-width:600px) {
 .article-index-grid { grid-template-columns:1fr; }
 .article-index-grid--remainder-1 .article-card:last-child { grid-column:auto; width:100%; }
 .js .article-card--rail { flex-basis:min(286px,calc(100vw - 92px)); width:min(286px,calc(100vw - 92px)); }
 .article-card--archive { width:100%; min-width:0; }
  .article-card--rail { grid-template-columns:minmax(0,1fr) 92px; min-height:182px; }
  .article-card--rail .article-card-content { padding:14px 10px 12px 14px; }
  .article-card--rail .article-card-visual { border-radius:48px 0 0 48px; }
  .article-card--rail .article-card-visual svg { height:118px; transform:translateX(-116px); }
  .article-card--rail .article-card-title { margin-top:8px; font-size:15px; line-height:1.38; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .article-card--rail .article-card-excerpt { margin-top:5px; font-size:12px; line-height:1.5; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .article-card--rail .article-card-footer { padding-top:8px; font-size:11px; }
  .article-card--rail .article-card-arrow { font-size:15px; }
  .article-card--archive { min-height:350px; }
  .article-card--archive .article-card-visual { flex-basis:178px; }
  .article-card--archive .article-card-content { padding:17px 18px 18px; }
  .article-card--archive .article-card-title { font-size:18px; }
  .article-index-grid--complete,
  .article-index-grid--remainder-1,
  .article-index-grid--remainder-2 { grid-template-columns:1fr; }
  .article-index-grid--complete .article-card,
  .article-index-grid--remainder-1 .article-card,
  .article-index-grid--remainder-2 .article-card,
  .article-index-grid--remainder-1 .article-card:last-child,
  .article-index-grid--remainder-2 .article-card:last-child { grid-column:auto; width:auto; justify-self:stretch; }
}