/* Values and icon geometry from the owner-provided Claude artifact, 29 October 2026.
   Scoped tokens avoid changing existing theme colors. Illustrations await Claude delivery. */
.hb-icon,.hb-illo-frame,.hb-illo-frame--warm,.hb-illo-frame--cool{
 --hb-coral:#F98C84;--hb-slate:#7A8CAD;--hb-peach:#F4C1A8;--hb-mist:#C9D3D8;
 --hb-ink:#1F2A44;--hb-paper:#FBF8F6;--hb-tint-warm:#FBF0EB;--hb-tint-cool:#EEF1F5;
}
.hb-icon{display:inline-block;width:24px;height:24px;fill:none;stroke:var(--hb-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.hb-icon .hb-dot{fill:var(--hb-coral);stroke:none}
.hb-icon--lg{width:40px;height:40px}
.hb-topic-links a:has(>.hb-icon){display:flex;align-items:center;gap:12px}
.hb-topic-links a>span{min-width:0}
.hb-topic-links a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
body.dark .hb-icon{--hb-ink:#EEF1F5}
.hb-illo{display:block;width:100%;height:auto}
.hb-illo-frame{background:#fff;border-radius:20px;overflow:hidden}
.hb-illo-frame--warm{background:var(--hb-tint-warm);border-radius:20px;overflow:hidden}
.hb-illo-frame--cool{background:var(--hb-tint-cool);border-radius:20px;overflow:hidden}
/* Light illustration canvases preserve source palette in either reading theme. */
.hb-no-motion *{animation:none!important}
@media(prefers-reduced-motion:reduce){[class*="hb-a-"]{animation:none!important}}
/* Owner-supplied hb-topic-icons.html: compact horizontal related-topic cards. */
body .hb-topic-hub .hb-topic-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:12px;padding:0;list-style:none}
body .hb-topic-hub .hb-topic-links li{margin:0;border:0;border-radius:0;background:transparent}
body .hb-topic-hub .hb-topic-links .hb-topic{box-sizing:border-box;display:flex;align-items:center;gap:16px;min-height:102px;height:100%;padding:12px 16px 12px 12px;background:#fff;border:1px solid #ede6df;border-radius:20px;color:#1f2a44;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s}
body .hb-topic-hub .hb-topic-links .hb-topic:hover,body .hb-topic-hub .hb-topic-links .hb-topic:focus-visible{border-color:#f98c84;transform:translateY(-2px);box-shadow:0 6px 18px -10px rgba(31,42,68,.35);color:#1f2a44}
body .hb-topic-hub .hb-topic-links .hb-topic:focus-visible{outline:2px solid #1f2a44;outline-offset:2px}
.hb-topic__tile{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--hb-tint,#fce4df);flex:none;transition:transform .25s}
.hb-topic-links li:nth-child(4n+2){--hb-tint:#e6eaf2}.hb-topic-links li:nth-child(4n+3){--hb-tint:#fbebdd}.hb-topic-links li:nth-child(4n){--hb-tint:#eef1f3}
.hb-topic__tile .hb-icon{width:28px;height:28px;stroke:#1f2a44}
.hb-topic:hover .hb-topic__tile{transform:rotate(-6deg)}
.hb-topic__name{flex:1;min-width:0;font-family:inherit;font-weight:500;font-size:17px;line-height:1.3;text-wrap:pretty;overflow-wrap:normal}
.hb-topic__arrow{width:20px;height:20px;fill:none;stroke:#1f2a44;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.35;flex:none;transition:opacity .2s,transform .2s}
.hb-topic:hover .hb-topic__arrow{opacity:1;stroke:#d9776a;transform:translateX(3px)}
body.dark .hb-topic-hub .hb-topic-links .hb-topic{background:#203044;border-color:#526277;color:#eef1f5}
body.dark .hb-topic-hub .hb-topic-links .hb-topic:hover{background:#31445d;border-color:#f98c84;color:#fff}
body.dark .hb-topic-hub .hb-topic-links .hb-topic:focus-visible{outline-color:#eef1f5}
body.dark .hb-topic__arrow{stroke:#eef1f5}
@media(prefers-reduced-motion:reduce){body .hb-topic-hub .hb-topic-links .hb-topic,.hb-topic__tile,.hb-topic__arrow{transition:none!important;transform:none!important}}

body .hb-topic-hub h2:has(+.hb-topic-links){font-size:28px;font-weight:800;line-height:1.1;margin-bottom:18px}
