/* Header banners: animated promotions that run in .workspace-top-banner.
   Chosen in Settings -> Header banner (assets/header-banners.js). Every banner
   has a light and a dark variant that follows the workspace theme (Halloween is
   dark only), and the active banner re-tints the interface accent. */

/* ── Self-hosted faces (the server CSP blocks Google Fonts). OFL/Apache licenses
   sit beside the files in assets/fonts/google. ── */
@font-face{ font-family:'HB Archivo'; src:url(/assets/fonts/google/archivo-variable.woff2) format('woff2'); font-weight:100 900; font-stretch:62% 125%; font-display:swap; }
@font-face{ font-family:'HB Instrument Serif'; src:url(/assets/fonts/google/instrument-serif-italic.woff2) format('woff2'); font-style:italic; font-weight:400; font-display:swap; }
@font-face{ font-family:'HB Fraunces'; src:url(/assets/fonts/google/fraunces-variable.woff2) format('woff2'); font-weight:100 900; font-display:swap; }
@font-face{ font-family:'HB Michroma'; src:url(/assets/fonts/google/michroma-regular.woff2) format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'HB JetBrains Mono'; src:url(/assets/fonts/google/jetbrains-mono-variable.woff2) format('woff2'); font-weight:400 800; font-display:swap; }
@font-face{ font-family:'HB Creepster'; src:url(/assets/fonts/google/creepster-regular.woff2) format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'HB Caprasimo'; src:url(/assets/fonts/google/caprasimo-regular.woff2) format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'HB Mountains of Christmas'; src:url(/assets/fonts/google/mountains-of-christmas-bold.woff2) format('woff2'); font-weight:700; font-display:swap; }

/* ── Mount inside the fixed header. Brand and account actions stay above it. ── */
.hb-host{ --hb-safe-l:200px; --hb-safe-r:348px; --hb-h:68px; --hb-cap:calc(var(--hb-h) - 16px);
  position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hb-host > .hb-take-slot{ position:absolute; inset:0; overflow:hidden; }
.hb-host[data-narrow] > .hb-slot,.hb-host[data-narrow] .hb-take__content{ display:none; }
.hb-host > .hb-slot{ position:absolute; top:0; bottom:0; left:var(--hb-safe-l); right:var(--hb-safe-r);
  display:flex; align-items:center; justify-content:center; container:hbslot / inline-size; }

/* ── Shared banner parts ── */
.hb-banner{ font-family:'Hive Inter',Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
.hb-banner,.hb-banner *,.hb-banner *::before,.hb-banner *::after{ box-sizing:border-box; }
.hb-banner svg{ overflow:visible; }
.hb-cap{ position:relative; width:100%; max-width:900px; height:var(--hb-cap); border-radius:14px; overflow:hidden; display:flex; align-items:center; pointer-events:auto; }
.hb-take{ position:absolute; inset:0; overflow:hidden; pointer-events:auto; }
.hb-take__content{ position:absolute; top:0; bottom:0; left:var(--hb-safe-l); right:var(--hb-safe-r); display:flex; align-items:center; gap:16px; container:hbslot / inline-size; }
.hb-copy{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.hb-copy h4,.hb-copy p{ margin:0; }
.hb-copy p{ font:500 12px/1.3 'Hive Inter',Inter,sans-serif; }
.hb-cta{ appearance:none; -webkit-appearance:none; margin:0; border:0; cursor:pointer; flex:none; display:inline-flex; align-items:center; gap:7px;
  height:34px; padding:0 15px; border-radius:999px; font:600 13px/1 'Hive Inter',Inter,sans-serif; white-space:nowrap; transition:filter .15s,transform .15s; }
.hb-cta:hover{ filter:brightness(1.07); }
.hb-cta:active{ transform:translateY(1px); }
.hb-cta:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
.hb-cta svg{ width:14px; height:14px; flex:none; }
.hb-count{ flex:none; display:flex; align-items:center; gap:7px; padding:5px 11px 5px 9px; border-radius:12px; background:var(--cc-bg); border:1px solid var(--cc-bd); }
.hb-count b{ font:400 27px/1 var(--cc-font); color:var(--cc-num); min-width:1.4ch; text-align:center; font-variant-numeric:tabular-nums; }
.hb-count span{ font:600 9.5px/1.25 'Hive Inter',Inter,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--cc-lbl); }

/* ══════════ Print money (inset) ══════════ */
.hb-money{ --m-bg:linear-gradient(100deg,#fff1cc 0%,#fff9ec 30%,#fffdf8 62%,#fff 100%); --m-bd:#efd9a0; --m-sh:inset 0 1px 0 #fff,0 10px 20px -14px rgba(150,95,0,.55);
  --m-h:#1a1407; --m-p:#7a6431; --m-lbl:#a07a2a; --m-val:#1a1407; --m-rule:#e6d197; --m-cta-bg:#14171c; --m-cta-fg:#fff; --m-cta-ic:#f4b942;
  --m-post:#2b2f36; --m-base:#1d2026; --m-bed:#454c57; --m-sheet:#c3cad5; --m-gantry:#6a7482; --m-shadow:rgba(138,90,0,.16); --m-plus:#8a5300;
  gap:14px; padding:0 8px 0 4px; background:var(--m-bg); border:1px solid var(--m-bd); box-shadow:var(--m-sh); }
.hb-money[data-variant="dark"]{ --m-bg:linear-gradient(100deg,#2b2109 0%,#1d170b 36%,#15120c 70%,#121110 100%); --m-bd:#4a3a15; --m-sh:inset 0 1px 0 rgba(255,255,255,.05),0 10px 22px -14px rgba(0,0,0,.8);
  --m-h:#fff3d4; --m-p:#c8ad6d; --m-lbl:#b99443; --m-val:#fff; --m-rule:#4a3a15; --m-cta-bg:#f4b942; --m-cta-fg:#1a1206; --m-cta-ic:#1a1206;
  --m-post:#7a8494; --m-base:#08090b; --m-bed:#8b95a4; --m-sheet:#d5dbe4; --m-gantry:#a3adbb; --m-shadow:rgba(0,0,0,.45); --m-plus:#f4c35a; }
.hb-money .hbm-scene{ overflow:hidden; }
.hbm-scene{ flex:none; display:block; height:var(--hb-cap); width:calc(var(--hb-cap) * 150 / 52); }
.hbm-post{ fill:var(--m-post); } .hbm-base{ fill:var(--m-base); } .hbm-bed{ fill:var(--m-bed); } .hbm-sheet{ fill:var(--m-sheet); }
.hbm-gantry{ fill:var(--m-gantry); } .hbm-shadow{ fill:var(--m-shadow); }
.hbm-dollar{ font:900 16px/1 'HB Archivo',sans-serif; font-stretch:75%; fill:#9a5a00; }
.hbm-plus{ font:800 8.5px/1 'HB Archivo',sans-serif; font-stretch:85%; fill:var(--m-plus); }
.hbm-copy h4{ font:800 17px/1.12 'HB Archivo','Hive Inter',sans-serif; font-stretch:84%; letter-spacing:-.005em; color:var(--m-h); }
.hbm-copy p{ color:var(--m-p); }
.hbm-meter{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; padding:0 14px 0 12px; border-left:1px dashed var(--m-rule); }
.hbm-meter small{ font:600 9.5px/1 'Hive Inter',Inter,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--m-lbl); }
.hbm-meter b{ font:800 19px/1 'HB Archivo','Hive Inter',sans-serif; font-stretch:88%; font-variant-numeric:tabular-nums; color:var(--m-val); }
.hbm-cta{ background:var(--m-cta-bg); color:var(--m-cta-fg); } .hbm-cta svg{ color:var(--m-cta-ic); }
@container hbslot (max-width:749px){ .hb-money .hbm-meter{ display:none; } }
@container hbslot (max-width:639px){ .hb-money .hbm-copy p{ display:none; } }
@container hbslot (max-width:459px){ .hb-money .hbm-cta{ display:none; } .hb-money .hbm-copy h4{ font-size:14.5px; line-height:1.05; } }
@container hbslot (max-width:329px){ .hb-money{ gap:8px; } .hb-money .hbm-scene{ width:calc(var(--hb-cap) * 90 / 52); } }

/* ══════════ Night shift (takeover) ══════════ */
.hb-night{ --n-sky:linear-gradient(180deg,#c9d2ff 0%,#dfe2ff 52%,#f6ebf3 100%); --n-star-glow:0 0 3px 1px rgba(96,108,214,.75);
  --n-roofs:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 14'%3E%3Cpath d='M0 14V9h12V6l6-4 6 4v3h10v2h14V7h4V4h3v3h11v3h14V6l8-5 8 5v4h14V8h14v3h12V5h4V3h3v2h7v4h16V6l7-4 7 4v3h16v2h14V7h16v3h14V6l6-3 6 3v3h8v5z' fill='%23a6aedb'/%3E%3Crect x='15.5' y='7.5' width='1.6' height='1.6' fill='%23f0a33a'/%3E%3Crect x='86' y='6.5' width='1.6' height='1.6' fill='%23f0a33a' opacity='.7'/%3E%3Crect x='171' y='6.5' width='1.6' height='1.6' fill='%23f0a33a' opacity='.85'/%3E%3C/svg%3E");
  --n-house:#2b3264; --n-wall:#313a70; --n-bedroom:#454f8c; --n-bedroom-bd:#5a64a0; --n-door:#252c59;
  --n-h:#1d2455; --n-p:#535b8f; --n-card:rgba(255,255,255,.74); --n-card-bd:#fff; --n-card-sh:0 10px 22px -12px rgba(40,50,120,.45);
  --n-small:#6870a6; --n-b:#1d2455; --n-gold:#a86b00; --n-moon:#ffffff; --n-moon-glow:rgba(255,255,255,.95); --n-z:#5d67a8;
  --n-dawn:radial-gradient(120% 150% at 72% 135%,rgba(255,168,118,.75),rgba(255,160,150,.28) 46%,rgba(255,160,150,0) 72%);
  --n-pop-bg:rgba(255,255,255,.88); --n-pop-bd:#fff; --n-pop-fg:#1d2455;
  background:var(--n-sky); }
.hb-night[data-variant="dark"]{ --n-sky:linear-gradient(180deg,#050919 0%,#0b1331 55%,#16214a 100%); --n-star-glow:none;
  --n-roofs:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 14'%3E%3Cpath d='M0 14V9h12V6l6-4 6 4v3h10v2h14V7h4V4h3v3h11v3h14V6l8-5 8 5v4h14V8h14v3h12V5h4V3h3v2h7v4h16V6l7-4 7 4v3h16v2h14V7h16v3h14V6l6-3 6 3v3h8v5z' fill='%2303050d'/%3E%3Crect x='15.5' y='7.5' width='1.6' height='1.6' fill='%23ffcf7a' opacity='.8'/%3E%3Crect x='86' y='6.5' width='1.6' height='1.6' fill='%23ffcf7a' opacity='.55'/%3E%3Crect x='171' y='6.5' width='1.6' height='1.6' fill='%23ffcf7a' opacity='.7'/%3E%3C/svg%3E");
  --n-house:#060a18; --n-wall:#0a1024; --n-bedroom:#121936; --n-bedroom-bd:#1c2550; --n-door:#141b38;
  --n-h:#f7eedc; --n-p:#a9b3d8; --n-card:rgba(255,255,255,.1); --n-card-bd:rgba(255,255,255,.17); --n-card-sh:0 10px 22px -12px rgba(0,0,0,.7);
  --n-small:#aab4dc; --n-b:#fff; --n-gold:#f4b942; --n-moon:#f3e6c4; --n-moon-glow:rgba(243,230,196,.65); --n-z:#8e9ad0;
  --n-dawn:radial-gradient(120% 150% at 72% 135%,rgba(255,154,92,.62),rgba(255,120,110,.2) 46%,rgba(255,120,110,0) 72%);
  --n-pop-bg:rgba(255,255,255,.14); --n-pop-bd:rgba(255,255,255,.2); --n-pop-fg:#fff; }
.hb-night .hb-take__content{ gap:14px; }
.hbn-stars{ position:absolute; inset:0; }
.hbn-stars i{ position:absolute; width:var(--s); height:var(--s); border-radius:50%; background:#fff; box-shadow:var(--n-star-glow); opacity:.3; animation:hbn-tw var(--d) ease-in-out var(--dl) infinite; }
@keyframes hbn-tw{ 0%,100%{ opacity:.18; } 50%{ opacity:.95; } }
.hbn-dawn{ position:absolute; inset:0; opacity:0; background:var(--n-dawn); animation:hbn-dawn 12s linear infinite; }
@keyframes hbn-dawn{ 0%,60%{ opacity:0; } 84%,94%{ opacity:1; } 100%{ opacity:0; } }
.hbn-roofs{ position:absolute; left:0; right:0; bottom:0; height:14px; background:var(--n-roofs) repeat-x left bottom / 260px 14px; }
.hbn-copy h4{ font:italic 400 23px/1.05 'HB Instrument Serif',Georgia,serif; color:var(--n-h); letter-spacing:.005em; white-space:nowrap; }
.hbn-copy p{ color:var(--n-p); white-space:nowrap; }
.hbn-notes{ position:relative; flex:none; width:236px; height:40px; }
.hbn-note{ position:absolute; inset:0; display:flex; align-items:center; gap:9px; padding:0 12px 0 7px; border-radius:12px; background:var(--n-card); border:1px solid var(--n-card-bd);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--n-card-sh); transform-origin:50% 0; opacity:0; }
.hbn-ico{ width:24px; height:24px; border-radius:7px; background:#14171c; display:grid; place-items:center; flex:none; }
.hbn-ico img{ width:18px; height:18px; display:block; }
.hbn-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.hbn-txt small{ font:500 9.5px/1 'Hive Inter',Inter,sans-serif; color:var(--n-small); letter-spacing:.02em; }
.hbn-txt b{ font:600 11.5px/1.1 'Hive Inter',Inter,sans-serif; color:var(--n-b); white-space:nowrap; }
.hbn-txt b span,.hbn-pop b{ color:var(--n-gold); }
.hbn-n1{ animation:hbn-n1 12s cubic-bezier(.3,.7,.3,1) infinite; }
.hbn-n2{ animation:hbn-n2 12s cubic-bezier(.3,.7,.3,1) infinite; }
.hbn-n3{ animation:hbn-n3 12s cubic-bezier(.3,.7,.3,1) infinite; }
@keyframes hbn-n1{ 0%,5%{ opacity:0; transform:translateX(26px); } 9%,34%{ opacity:1; transform:none; } 39%,63%{ opacity:.45; transform:translateY(-7px) scale(.93); } 68%,100%{ opacity:0; transform:translateY(-12px) scale(.86); } }
@keyframes hbn-n2{ 0%,35%{ opacity:0; transform:translateX(26px); } 39%,63%{ opacity:1; transform:none; } 68%,93%{ opacity:.45; transform:translateY(-7px) scale(.93); } 97%,100%{ opacity:0; transform:translateY(-12px) scale(.86); } }
@keyframes hbn-n3{ 0%,65%{ opacity:0; transform:translateX(26px); } 69%,93%{ opacity:1; transform:none; } 97%,100%{ opacity:0; transform:translateY(-5px); } }
.hbn-scene{ position:relative; flex:none; width:112px; align-self:stretch; }
.hbn-house{ position:absolute; left:0; bottom:0; width:100px; height:68px; display:block; }
.hbn-moon{ position:absolute; right:4px; top:7px; width:18px; height:18px; border-radius:50%; box-shadow:inset -5px 2px 0 0 var(--n-moon);
  filter:drop-shadow(0 0 6px var(--n-moon-glow)); animation:hbn-moon 12s ease-in-out infinite; }
@keyframes hbn-moon{ 0%{ transform:none; opacity:1; } 60%{ transform:translate(-9px,2px); opacity:1; } 88%{ transform:translate(-15px,30px); opacity:0; } 96%{ transform:none; opacity:0; } 100%{ opacity:1; } }
.hbn-roof,.hbn-chimney{ fill:var(--n-house); } .hbn-wall{ fill:var(--n-wall); } .hbn-door{ fill:var(--n-door); }
.hbn-bedroom{ fill:var(--n-bedroom); stroke:var(--n-bedroom-bd); }
.hbn-glint{ animation:hbn-glint .8s ease-in-out infinite alternate; }
@keyframes hbn-glint{ from{ transform:translateX(-5px); } to{ transform:translateX(5px); } }
.hbn-print{ transform-box:fill-box; transform-origin:50% 100%; animation:hbn-grow 12s linear infinite; }
@keyframes hbn-grow{ 0%{ transform:scaleY(.08); } 92%,100%{ transform:scaleY(1); } }
.hbn-z text{ font:italic 400 9px/1 'HB Instrument Serif',Georgia,serif; fill:var(--n-z); opacity:0; animation:hbn-z 2.7s ease-out infinite; }
.hbn-z text:nth-child(2){ animation-delay:.9s; } .hbn-z text:nth-child(3){ animation-delay:1.8s; font-size:11px; }
@keyframes hbn-z{ 0%{ opacity:0; transform:translate(0,4px); } 30%{ opacity:.9; } 100%{ opacity:0; transform:translate(5px,-6px); } }
.hbn-pop{ position:absolute; left:18px; top:12px; display:none; z-index:2; }
.hbn-pop span{ position:absolute; left:0; top:0; white-space:nowrap; padding:3px 7px; border-radius:999px; background:var(--n-pop-bg); border:1px solid var(--n-pop-bd);
  font:600 10px/1 'Hive Inter',Inter,sans-serif; color:var(--n-pop-fg); opacity:0; }
.hbn-pop span:nth-child(1){ animation:hbn-p1 12s ease-out infinite; }
.hbn-pop span:nth-child(2){ animation:hbn-p2 12s ease-out infinite; }
.hbn-pop span:nth-child(3){ animation:hbn-p3 12s ease-out infinite; }
@keyframes hbn-p1{ 0%,6%{ opacity:0; transform:translateY(8px); } 10%,28%{ opacity:1; transform:none; } 34%,100%{ opacity:0; transform:translateY(-8px); } }
@keyframes hbn-p2{ 0%,36%{ opacity:0; transform:translateY(8px); } 40%,58%{ opacity:1; transform:none; } 64%,100%{ opacity:0; transform:translateY(-8px); } }
@keyframes hbn-p3{ 0%,66%{ opacity:0; transform:translateY(8px); } 70%,92%{ opacity:1; transform:none; } 97%,100%{ opacity:0; transform:translateY(-8px); } }
.hbn-cta{ background:#f4b942; color:#1a1206; box-shadow:0 0 0 4px rgba(244,185,66,.13); }
@container hbslot (max-width:999px){ .hb-night .hbn-copy p{ display:none; } }
@container hbslot (max-width:759px){ .hb-night .hbn-notes{ display:none; } .hb-night .hbn-pop{ display:block; } }
@container hbslot (max-width:419px){ .hb-night .hbn-cta{ display:none; } .hb-night .hbn-copy h4{ font-size:18px; white-space:normal; } }

/* ══════════ Snap your house (inset) ══════════ */
.hb-house{ --h-bg:linear-gradient(180deg,#eaf2ff 0%,#f7faff 100%); --h-bd:#d3e0f5; --h-sh:inset 0 1px 0 #fff,0 10px 20px -14px rgba(23,70,160,.45);
  --h-h:#0f2a55; --h-p:#4b6186; --h-flow:#8fb0e8; --h-dot:#1766e8; --h-ring:rgba(15,42,85,.14); --h-cta:#1766e8;
  gap:8px; padding:0 8px 0 5px; background:var(--h-bg); border:1px solid var(--h-bd); box-shadow:var(--h-sh); }
.hb-house[data-variant="dark"]{ --h-bg:linear-gradient(180deg,#0f1a2c 0%,#0b1422 100%); --h-bd:#243552; --h-sh:inset 0 1px 0 rgba(255,255,255,.05),0 10px 22px -14px rgba(0,0,0,.8);
  --h-h:#eaf2ff; --h-p:#93a8c9; --h-flow:#48648f; --h-dot:#5b9bff; --h-ring:rgba(255,255,255,.16); --h-cta:#2f7cf6; }
.hbh-photo{ position:relative; flex:none; width:42px; height:42px; border-radius:9px; overflow:hidden; box-shadow:0 0 0 1px var(--h-ring),0 4px 10px -4px rgba(15,42,85,.4); }
.hbh-photo img{ width:100%; height:100%; display:block; object-fit:cover; }
.hbh-maskwrap{ position:absolute; inset:0; filter:drop-shadow(0 0 .6px #1d4ed8) drop-shadow(0 0 .6px #1d4ed8); }
.hbh-mask{ position:absolute; inset:0; background:rgba(47,107,255,.5);
  -webkit-mask:url(/assets/header-banners/house-mask.png) center/100% 100% no-repeat; mask:url(/assets/header-banners/house-mask.png) center/100% 100% no-repeat;
  clip-path:circle(0% at 72% 49%); animation:hbh-mask 9s linear infinite; }
@keyframes hbh-mask{ 0%,17%{ clip-path:circle(0% at 72% 49%); opacity:1; } 27%{ clip-path:circle(100% at 72% 49%); } 90%{ clip-path:circle(100% at 72% 49%); opacity:1; } 96%,100%{ clip-path:circle(100% at 72% 49%); opacity:0; } }
.hbh-ripple{ position:absolute; left:72%; top:49%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; border:1.5px solid #fff; opacity:0; animation:hbh-rip 9s ease-out infinite; }
@keyframes hbh-rip{ 0%,15.5%{ opacity:0; transform:scale(.2); } 16.5%{ opacity:1; transform:scale(.3); } 24%,100%{ opacity:0; transform:scale(1.6); } }
.hbh-cursor{ position:absolute; left:0; top:0; width:10px; height:13px; transform-origin:1.25px 1.25px; animation:hbh-cur 9s infinite; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
@keyframes hbh-cur{ 0%{ transform:translate(44px,40px); opacity:0; } 4%{ opacity:1; } 14%{ transform:translate(29px,19.3px); animation-timing-function:ease-in-out; } 16%{ transform:translate(29px,19.3px) scale(.82); } 18%{ transform:translate(29px,19.3px) scale(1); } 25%{ transform:translate(37px,31px); opacity:1; } 29%,100%{ transform:translate(44px,40px); opacity:0; } }
.hbh-flow{ flex:none; width:26px; height:10px; }
.hbh-flow path{ stroke:var(--h-flow); }
.hbh-dot{ fill:var(--h-dot); opacity:0; animation:hbh-dot 9s infinite; }
@keyframes hbh-dot{ 0%,25%{ opacity:0; transform:translateX(0); } 26%{ opacity:1; } 32%{ opacity:1; transform:translateX(19px); } 33%,100%{ opacity:0; transform:translateX(19px); } }
.hbh-3d{ position:relative; flex:none; width:80px; height:var(--hb-cap); }
.hbh-3d canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hbh-fallback{ position:absolute; left:8px; top:4px; width:64px; height:calc(100% - 8px); object-fit:contain; animation:hbh-fb 9s infinite; }
@keyframes hbh-fb{ 0%,33%{ clip-path:inset(100% 0 0 0); opacity:1; } 70%,92%{ clip-path:inset(0 0 0 0); opacity:1; } 97%,100%{ clip-path:inset(0 0 0 0); opacity:0; } }
.hbh-copy{ padding-left:6px; }
.hbh-copy h4{ font:700 15.5px/1.12 'HB Archivo','Hive Inter',sans-serif; font-stretch:108%; letter-spacing:-.01em; color:var(--h-h); }
.hbh-copy p{ color:var(--h-p); }
.hbh-cta{ background:var(--h-cta); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 10px -4px rgba(23,102,232,.6); }
@container hbslot (max-width:869px){ .hb-house .hbh-copy p{ display:none; } }
@container hbslot (max-width:659px){ .hb-house .hbh-cta{ display:none; } }
@container hbslot (max-width:499px){ .hb-house .hbh-flow{ display:none; } }
@container hbslot (max-width:419px){ .hb-house .hbh-copy h4{ font-size:13.5px; font-stretch:100%; } .hb-house .hbh-copy{ padding-left:2px; } }
@container hbslot (max-width:299px){ .hb-house .hbh-photo{ display:none; } }

/* ══════════ Family figurines (inset) ══════════ */
.hb-family{ --f-bg:radial-gradient(120% 180% at 12% 0%,#f1e3f8 0%,#f8f2fb 50%,#fff 100%); --f-bd:#e2d1ee; --f-sh:inset 0 1px 0 #fff,0 10px 22px -14px rgba(90,40,120,.4);
  --f-h:#361c48; --f-p:#6d587e; --f-route:#c98a0c; --f-mi:#6d587e; --f-ring:#d9971a; --f-ring-track:rgba(201,138,12,.2);
  --f-chip-bg:rgba(54,28,72,.08); --f-chip-bd:rgba(54,28,72,.22); --f-chip-fg:#361c48; --f-cta-bg:#4a2a61; --f-cta-fg:#fff; --f-drop:rgba(60,30,80,.28);
  gap:0; padding:0 8px; background:var(--f-bg); border:1px solid var(--f-bd); box-shadow:var(--f-sh); }
.hb-family[data-variant="dark"]{ --f-bg:radial-gradient(120% 180% at 12% 0%,#4a2d55 0%,#2f1f3c 45%,#231730 100%); --f-bd:#4a3458; --f-sh:inset 0 1px 0 rgba(255,255,255,.08),0 10px 22px -14px rgba(40,10,60,.8);
  --f-h:#fff4e8; --f-p:#d6c4e4; --f-route:#f4b942; --f-mi:#d6c4e4; --f-ring:#f4b942; --f-ring-track:rgba(244,185,66,.18);
  --f-chip-bg:rgba(255,255,255,.14); --f-chip-bd:rgba(255,255,255,.22); --f-chip-fg:#fff; --f-cta-bg:#f4b942; --f-cta-fg:#2b1d3a; --f-drop:rgba(0,0,0,.45); }
.hbf-polaroid{ flex:none; width:40px; height:46px; transform:rotate(-6deg); filter:drop-shadow(0 3px 4px var(--f-drop)); }
.hbf-mask{ opacity:0; }
.hbf-mask.m1{ animation:hbf-m1 10s infinite; } .hbf-mask.m2{ animation:hbf-m2 10s infinite; }
.hbf-mask.m3{ animation:hbf-m3 10s infinite; } .hbf-mask.m4{ animation:hbf-m4 10s infinite; }
@keyframes hbf-m1{ 0%,5%{ opacity:0; } 8%,94%{ opacity:1; } 98%,100%{ opacity:0; } }
@keyframes hbf-m2{ 0%,12%{ opacity:0; } 15%,94%{ opacity:1; } 98%,100%{ opacity:0; } }
@keyframes hbf-m3{ 0%,19%{ opacity:0; } 22%,94%{ opacity:1; } 98%,100%{ opacity:0; } }
@keyframes hbf-m4{ 0%,26%{ opacity:0; } 29%,94%{ opacity:1; } 98%,100%{ opacity:0; } }
.hbf-tap{ fill:none; stroke:#fff; stroke-width:.9; opacity:0; transform-box:fill-box; transform-origin:center; }
.hbf-tap.t1{ animation:hbf-t1 10s infinite; } .hbf-tap.t2{ animation:hbf-t2 10s infinite; }
.hbf-tap.t3{ animation:hbf-t3 10s infinite; } .hbf-tap.t4{ animation:hbf-t4 10s infinite; }
@keyframes hbf-t1{ 0%,5%{ opacity:0; transform:scale(.3); } 6%{ opacity:1; } 11%,100%{ opacity:0; transform:scale(1.8); } }
@keyframes hbf-t2{ 0%,12%{ opacity:0; transform:scale(.3); } 13%{ opacity:1; } 18%,100%{ opacity:0; transform:scale(1.8); } }
@keyframes hbf-t3{ 0%,19%{ opacity:0; transform:scale(.3); } 20%{ opacity:1; } 25%,100%{ opacity:0; transform:scale(1.8); } }
@keyframes hbf-t4{ 0%,26%{ opacity:0; transform:scale(.3); } 27%{ opacity:1; } 32%,100%{ opacity:0; transform:scale(1.8); } }
.hbf-route{ flex:none; width:104px; height:var(--hb-cap); margin-right:-4px; }
.hbf-path{ stroke:var(--f-route); }
.hbf-pin{ flex:none; width:72px; height:var(--hb-cap); }
.hbf-ringtrack{ stroke:var(--f-ring-track); } .hbf-ring{ stroke:var(--f-ring); }
.hbf-pulse{ fill:none; stroke:var(--f-ring); stroke-width:1.2; opacity:0; transform-box:fill-box; transform-origin:center; animation:hbf-pulse 10s infinite; }
@keyframes hbf-pulse{ 0%,49%{ opacity:0; transform:scale(.6); } 50%{ opacity:.9; } 57%,100%{ opacity:0; transform:scale(1.7); } }
.hbf-mi{ fill:var(--f-mi); }
.hbf-chip{ opacity:0; animation:hbf-chip 10s infinite; }
.hbf-chip rect{ fill:var(--f-chip-bg); stroke:var(--f-chip-bd); } .hbf-chip text{ fill:var(--f-chip-fg); }
@keyframes hbf-chip{ 0%,71%{ opacity:0; transform:translateY(3px); } 74%,93%{ opacity:1; transform:none; } 97%,100%{ opacity:0; } }
.hbf-copy{ padding-left:14px; }
.hbf-copy h4{ font:600 18px/1.1 'HB Fraunces',Georgia,serif; font-variation-settings:"SOFT" 100,"opsz" 36; color:var(--f-h); letter-spacing:-.005em; }
.hbf-copy p{ color:var(--f-p); }
.hbf-cta{ margin-left:12px; background:var(--f-cta-bg); color:var(--f-cta-fg); }
@container hbslot (max-width:819px){ .hb-family .hbf-copy p{ display:none; } }
@container hbslot (max-width:629px){ .hb-family .hbf-cta{ display:none; } }
@container hbslot (max-width:499px){ .hb-family .hbf-route{ display:none; } .hb-family .hbf-pin{ margin-left:8px; } }
@container hbslot (max-width:379px){ .hb-family .hbf-pin{ display:none; } .hb-family .hbf-copy{ padding-left:12px; } .hb-family .hbf-copy h4{ font-size:15.5px; } }

/* ══════════ Your hive (takeover) ══════════ */
.hb-hive{ --v-bg:#fbf5e6; --v-h:#2a1c04; --v-p:#8a5f14; --v-b:#b36b00; --v-cta-bg:rgba(232,151,26,.14); --v-cta-bd:#c07b0d; --v-cta-fg:#6f4300; background:var(--v-bg); }
.hb-hive[data-variant="dark"]{ --v-bg:#0e0b06; --v-h:#ffe2a0; --v-p:#c99a45; --v-b:#ffd27a; --v-cta-bg:rgba(244,185,66,.1); --v-cta-bd:rgba(244,185,66,.75); --v-cta-fg:#f4b942; }
.hbv-cv{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hbv-edges{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,var(--v-bg) 0,color-mix(in srgb,var(--v-bg) 90%,transparent) calc(var(--hb-safe-l) - 12px),transparent calc(var(--hb-safe-l) + 36px),
    transparent calc(100% - var(--hb-safe-r) - 36px),color-mix(in srgb,var(--v-bg) 90%,transparent) calc(100% - var(--hb-safe-r) + 10px),var(--v-bg) 100%); }
.hbv-copy{ position:relative; isolation:isolate; flex:none; padding:6px 18px 6px 0; }
.hbv-copy::before{ content:''; position:absolute; inset:-14px -44px -14px -34px; z-index:-1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--v-bg) 94%,transparent),color-mix(in srgb,var(--v-bg) 80%,transparent) 62%,transparent); }
.hbv-copy h4{ font:400 14px/1.25 'HB Michroma','Hive Inter',sans-serif; color:var(--v-h); letter-spacing:.01em; white-space:nowrap; }
.hbv-copy p{ font:500 11px/1.3 'HB JetBrains Mono',ui-monospace,monospace; color:var(--v-p); white-space:nowrap; margin-top:4px; }
.hbv-copy p b{ color:var(--v-b); font-weight:700; display:inline-block; min-width:2ch; text-align:right; }
.hbv-space{ flex:1 1 auto; }
.hbv-cta{ background:var(--v-cta-bg); color:var(--v-cta-fg); border:1px solid var(--v-cta-bd); }
@container hbslot (max-width:639px){ .hb-hive .hbv-cta{ display:none; } }
@container hbslot (max-width:459px){ .hb-hive .hbv-copy h4{ font-size:11.5px; white-space:normal; } .hb-hive .hbv-copy p{ font-size:10px; } .hb-hive .hbv-copy{ flex:0 1 auto; padding-right:6px; } }
@container hbslot (max-width:329px){ .hb-hive .hbv-copy p{ display:none; } }

/* ══════════ Reprint it (inset) ══════════ */
.hb-reprint{ --r-bg:#f6f9fe; --r-major:rgba(15,74,168,.11); --r-minor:rgba(15,74,168,.05); --r-bd:#c6d6ef; --r-sh:inset 0 0 0 1px rgba(255,255,255,.6),0 10px 22px -14px rgba(15,74,168,.45);
  --r-ink:#0f4aa8; --r-thin:#5f88c9; --r-crack:#d97706; --r-dimtx:#0f4aa8; --r-dimbg:#f6f9fe; --r-vf:#0f4aa8; --r-flash:#cfe0ff; --r-hatch:#0f4aa8; --r-scan:#d97706;
  --r-stamp:#15803d; --r-stamp-bg:rgba(21,128,61,.1); --r-h:#0b2f6b; --r-p:#4a6594; --r-tb-bd:rgba(15,74,168,.35); --r-tb-bg:rgba(15,74,168,.04); --r-meta:#4a6594; --r-cta-bg:#0f4aa8; --r-cta-fg:#fff;
  gap:14px; padding:0 8px 0 4px; border:1px solid var(--r-bd); background-color:var(--r-bg); box-shadow:var(--r-sh);
  background-image:linear-gradient(var(--r-major) 1px,transparent 1px),linear-gradient(90deg,var(--r-major) 1px,transparent 1px),linear-gradient(var(--r-minor) 1px,transparent 1px),linear-gradient(90deg,var(--r-minor) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,8px 8px,8px 8px; background-position:-1px -1px; }
.hb-reprint[data-variant="dark"]{ --r-bg:#0f4aa8; --r-major:rgba(255,255,255,.13); --r-minor:rgba(255,255,255,.055); --r-bd:#2d66c7; --r-sh:inset 0 0 24px rgba(0,20,70,.45),0 10px 22px -14px rgba(10,40,110,.8);
  --r-ink:#e8f1ff; --r-thin:#bcd6ff; --r-crack:#ffd166; --r-dimtx:#e1edff; --r-dimbg:#0f4aa8; --r-vf:#fff; --r-flash:#fff; --r-hatch:#bfdcff; --r-scan:#ffd166;
  --r-stamp:#5eea94; --r-stamp-bg:rgba(74,222,128,.14); --r-h:#fff; --r-p:#c4d9ff; --r-tb-bd:rgba(200,222,255,.55); --r-tb-bg:rgba(8,40,100,.35); --r-meta:#bcd6ff; --r-cta-bg:#fff; --r-cta-fg:#0f4aa8; }
.hb-reprint .hbr-draw{ overflow:hidden; }
.hbr-draw{ flex:none; display:block; height:var(--hb-cap); width:calc(var(--hb-cap) * 176 / 52); }
.hbr-ink{ fill:none; stroke:var(--r-ink); stroke-width:1.1; stroke-linejoin:round; stroke-linecap:round; }
.hbr-thin{ fill:none; stroke:var(--r-thin); stroke-width:.55; }
.hbr-dash{ stroke-dasharray:1 2; stroke-dashoffset:1.01; }
.hbr-hatchline{ fill:var(--r-hatch); } .hbr-arrowhead{ fill:var(--r-thin); } .hbr-dimbg{ fill:var(--r-dimbg); } .hbr-dimtext{ fill:var(--r-dimtx); }
.hbr-intact{ animation:hbr-intact 9s linear infinite; }
@keyframes hbr-intact{ 0%{ stroke-dashoffset:1.01; opacity:1; } 7%{ stroke-dashoffset:0; } 13.4%{ opacity:1; } 13.5%,100%{ stroke-dashoffset:0; opacity:0; } }
.hbr-crack{ stroke:var(--r-crack); animation:hbr-crack 9s linear infinite; }
@keyframes hbr-crack{ 0%,9%{ stroke-dashoffset:1.01; opacity:1; } 13%{ stroke-dashoffset:0; } 13.4%{ opacity:1; } 13.5%,100%{ stroke-dashoffset:0; opacity:0; } }
.hbr-piece{ opacity:0; animation:hbr-piece 9s linear infinite; }
@keyframes hbr-piece{ 0%,13.4%{ opacity:0; } 13.5%,90%{ opacity:1; } 95%,100%{ opacity:0; } }
.hbr-top{ transform-origin:34px 27px; animation:hbr-piece 9s linear infinite,hbr-tilt 9s ease-out infinite; }
@keyframes hbr-tilt{ 0%,13.5%{ transform:none; } 17%,100%{ transform:translate(-2px,-3px) rotate(-10deg); } }
.hbr-vf{ fill:none; stroke:var(--r-vf); stroke-width:1.3; opacity:0; transform-box:fill-box; transform-origin:center; animation:hbr-vf 9s linear infinite; }
@keyframes hbr-vf{ 0%,18%{ opacity:0; transform:scale(1.25); } 20%,26%{ opacity:1; transform:scale(1); } 29%,100%{ opacity:0; transform:scale(1); } }
.hbr-flash{ fill:var(--r-flash); opacity:0; animation:hbr-flash 9s linear infinite; }
@keyframes hbr-flash{ 0%,20.9%{ opacity:0; } 21%{ opacity:.85; } 25%,100%{ opacity:0; } }
.hbr-dim{ animation:hbr-dim 9s linear infinite; }
@keyframes hbr-dim{ 0%,26%{ stroke-dashoffset:1.01; opacity:1; } 34%{ stroke-dashoffset:0; } 90%{ opacity:1; } 95%,100%{ stroke-dashoffset:0; opacity:0; } }
.hbr-dimtx{ opacity:0; animation:hbr-dimtx 9s linear infinite; }
@keyframes hbr-dimtx{ 0%,31%{ opacity:0; } 35%,90%{ opacity:1; } 95%,100%{ opacity:0; } }
.hbr-arrow{ stroke:var(--r-ink); stroke-width:.9; animation:hbr-arrow 9s linear infinite; }
@keyframes hbr-arrow{ 0%,37%{ stroke-dashoffset:1.01; opacity:1; } 41%{ stroke-dashoffset:0; } 90%{ opacity:1; } 95%,100%{ stroke-dashoffset:0; opacity:0; } }
.hbr-arrowtx{ fill:var(--r-thin); opacity:0; animation:hbr-arrowtx 9s linear infinite; }
@keyframes hbr-arrowtx{ 0%,39%{ opacity:0; } 42%,90%{ opacity:1; } 95%,100%{ opacity:0; } }
.hbr-new{ animation:hbr-new 9s linear infinite; }
@keyframes hbr-new{ 0%,41%{ stroke-dashoffset:1.01; opacity:1; } 47%{ stroke-dashoffset:0; } 90%{ opacity:1; } 95%,100%{ stroke-dashoffset:0; opacity:0; } }
.hbr-fill{ transform-box:fill-box; transform-origin:50% 100%; animation:hbr-fill 9s linear infinite; }
@keyframes hbr-fill{ 0%,47%{ transform:scaleY(0); opacity:1; } 68%{ transform:scaleY(1); } 90%{ opacity:1; } 95%,100%{ transform:scaleY(1); opacity:0; } }
.hbr-scan{ fill:var(--r-scan); opacity:0; animation:hbr-scan 9s linear infinite; }
@keyframes hbr-scan{ 0%,47%{ opacity:0; transform:translateY(0); } 48%{ opacity:1; } 67.5%{ opacity:1; transform:translateY(-37px); } 68.5%,100%{ opacity:0; transform:translateY(-37px); } }
.hbr-stamp{ opacity:0; transform-box:fill-box; transform-origin:center; animation:hbr-stamp 9s infinite; }
.hbr-stamp rect{ fill:var(--r-stamp-bg); stroke:var(--r-stamp); } .hbr-stamp text{ fill:var(--r-stamp); }
@keyframes hbr-stamp{ 0%,69%{ opacity:0; transform:rotate(-10deg) scale(1.6); } 72%{ opacity:1; transform:rotate(-10deg) scale(.94); } 74%,90%{ opacity:1; transform:rotate(-10deg) scale(1); } 95%,100%{ opacity:0; transform:rotate(-10deg) scale(1); } }
.hbr-copy h4{ font:700 15px/1.15 'HB JetBrains Mono',ui-monospace,monospace; letter-spacing:-.02em; color:var(--r-h); white-space:nowrap; }
.hbr-copy p{ font-size:11.5px; color:var(--r-p); }
.hbr-title{ flex:none; display:flex; align-items:center; gap:10px; padding:4px 4px 4px 9px; border:1px solid var(--r-tb-bd); border-radius:4px; background:var(--r-tb-bg); }
.hbr-meta{ font:500 8.5px/1.35 'HB JetBrains Mono',ui-monospace,monospace; color:var(--r-meta); letter-spacing:.04em; white-space:nowrap; }
.hbr-cta{ background:var(--r-cta-bg); color:var(--r-cta-fg); height:30px; }
@container hbslot (max-width:839px){ .hb-reprint .hbr-copy p{ display:none; } }
@container hbslot (max-width:639px){ .hb-reprint .hbr-meta{ display:none; } .hb-reprint .hbr-title{ padding:4px; } }
@container hbslot (max-width:539px){ .hb-reprint .hbr-title{ display:none; } }
@container hbslot (max-width:399px){ .hb-reprint .hbr-draw{ width:calc(var(--hb-cap) * 94 / 52); } .hb-reprint .hbr-copy h4{ white-space:normal; font-size:13px; } .hb-reprint{ gap:8px; } }

/* ══════════ Halloween countdown (takeover, dark only) ══════════ */
.hb-boo{ --cc-bg:#3b1c45; --cc-bd:rgba(255,138,31,.4); --cc-num:#ffb35c; --cc-lbl:#e8d5f5; --cc-font:'HB Creepster','Archivo Black',cursive;
  background:linear-gradient(180deg,#2a1747 0%,#351a52 55%,#4d1f47 100%); }
.hb-boo .hb-take__content{ gap:16px; }
.hbb-hills{ position:absolute; left:0; right:0; bottom:0; height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16'%3E%3Cpath d='M0 16V10Q40 3 80 9T160 8T240 10T300 9V16Z' fill='%230c0515'/%3E%3Cpath d='M52 9.5V5.2a3 3 0 0 1 6 0V9ZM196 9V6a2.4 2.4 0 0 1 4.8 0v3ZM120 9V3.6h1.2V6h2V3.6h1.2V9Z' fill='%230c0515'/%3E%3Cpath d='M228 10V6h1v4M233 10V6h1v4M238 10V6h1v4M226 7.4h14' stroke='%230c0515' stroke-width='.9'/%3E%3C/svg%3E") repeat-x left bottom / 300px 16px; }
.hbb-fog{ position:absolute; left:-10%; right:-10%; bottom:-6px; height:22px; pointer-events:none;
  background:radial-gradient(40% 60% at 25% 60%,rgba(200,170,255,.18),transparent 70%),radial-gradient(35% 55% at 70% 50%,rgba(200,170,255,.14),transparent 70%);
  animation:hbb-fog 14s ease-in-out infinite alternate; }
@keyframes hbb-fog{ from{ transform:translateX(-4%); } to{ transform:translateX(4%); } }
.hbb-bat{ position:absolute; left:0; width:24px; height:12px; z-index:1; animation:hbb-fly var(--dur) linear infinite; animation-delay:var(--dl); }
@keyframes hbb-fly{ from{ transform:translateX(calc(100cqw + 30px)); } to{ transform:translateX(-40px); } }
.hbb-bat svg{ width:100%; height:100%; animation:hbb-bob 1.6s ease-in-out infinite alternate; }
@keyframes hbb-bob{ from{ transform:translateY(-4px); } to{ transform:translateY(4px); } }
.hbb-wing{ transform-box:fill-box; transform-origin:50% 100%; animation:hbb-flap .22s ease-in-out infinite alternate; }
@keyframes hbb-flap{ from{ transform:scaleY(1); } to{ transform:scaleY(-.35); } }
.hbb-scene{ flex:none; width:120px; height:68px; align-self:stretch; display:block; }
.hbb-face-lit{ opacity:0; }
.hbb-copy h4{ font:400 26px/1 'HB Creepster','Archivo Black',cursive; color:#ff8a1f; letter-spacing:.02em; white-space:nowrap; text-shadow:0 0 12px rgba(255,110,20,.55); }
.hbb-copy p{ color:#d9c6e8; margin-top:4px; }
.hbb-cta{ background:#ff7a1a; color:#1b0f2e; }
@container hbslot (max-width:699px){ .hb-boo .hbb-copy p{ display:none; } }
@container hbslot (max-width:659px){ .hb-boo .hb-count{ display:none; } }
@container hbslot (max-width:559px){ .hb-boo .hbb-cta{ display:none; } }
@container hbslot (max-width:419px){ .hb-boo .hb-take__content{ gap:8px; } .hb-boo .hbb-scene{ width:98px; } .hb-boo .hbb-copy h4{ font-size:19px; white-space:normal; line-height:1; } }

/* ══════════ Thanksgiving countdown (inset) ══════════ */
.hb-thanks{ --t-bg:linear-gradient(100deg,#ffedd8 0%,#fff5ea 42%,#fffcf8 100%); --t-bd:#efd1ae; --t-sh:inset 0 1px 0 #fff,0 10px 22px -14px rgba(150,70,10,.45);
  --t-h:#5a2a0c; --t-p:#8a5a3a; --t-table:#b98a5e; --t-table-top:#d9ad7f; --t-cta-bg:#7c2d12; --t-cta-fg:#fff4e6;
  --cc-bg:#fdeee0; --cc-bd:rgba(194,65,12,.25); --cc-num:#c2410c; --cc-lbl:#8a5a3a; --cc-font:'HB Caprasimo',Georgia,serif;
  gap:14px; padding:0 8px 0 6px; background:var(--t-bg); border:1px solid var(--t-bd); box-shadow:var(--t-sh); }
.hb-thanks[data-variant="dark"]{ --t-bg:linear-gradient(100deg,#2c170a 0%,#21130b 42%,#17100b 100%); --t-bd:#4d2c15; --t-sh:inset 0 1px 0 rgba(255,255,255,.05),0 10px 22px -14px rgba(0,0,0,.8);
  --t-h:#ffe6cc; --t-p:#d4a67f; --t-table:#4a2d17; --t-table-top:#6b4424; --t-cta-bg:#ea8a1f; --t-cta-fg:#1f1006;
  --cc-bg:#34200f; --cc-bd:rgba(234,138,31,.4); --cc-num:#f5a352; --cc-lbl:#e8c9a8; }
.hbt-leaves{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.hbt-leaf{ position:absolute; top:0; width:11px; height:11px; opacity:.6; animation:hbt-fall var(--dur) linear infinite; animation-delay:var(--dl); }
.hbt-leaf svg{ width:100%; height:100%; display:block; animation:hbt-spin var(--spin) ease-in-out infinite alternate; }
@keyframes hbt-fall{ from{ transform:translate(0,-16px); } to{ transform:translate(var(--dx),64px); } }
@keyframes hbt-spin{ from{ transform:rotate(-40deg); } to{ transform:rotate(120deg); } }
.hbt-scene{ position:relative; z-index:1; flex:none; display:block; height:var(--hb-cap); width:calc(var(--hb-cap) * 100 / 52); }
.hbt-table{ fill:var(--t-table); } .hbt-tabletop{ fill:var(--t-table-top); }
.hbt-f{ transform-box:fill-box; transform-origin:50% 100%; animation:hbt-fan 8s cubic-bezier(.3,.7,.3,1) infinite; animation-delay:var(--dl); }
@keyframes hbt-fan{ 0%,6%{ transform:rotate(0deg) scale(.35); opacity:0; } 12%{ opacity:1; } 28%,80%{ transform:rotate(var(--a)) scale(1); opacity:1; } 90%,100%{ transform:rotate(0deg) scale(.35); opacity:0; } }
.hbt-head{ transform-box:fill-box; transform-origin:50% 100%; animation:hbt-gobble 8s ease-in-out infinite; }
@keyframes hbt-gobble{ 0%,44%,60%,100%{ transform:none; } 47%{ transform:rotate(-10deg) translateY(1px); } 50%{ transform:rotate(8deg); } 53%{ transform:rotate(-6deg); } 56%{ transform:rotate(3deg); } }
.hbt-copy{ position:relative; z-index:1; }
.hbt-copy h4{ font:400 19px/1.05 'HB Caprasimo',Georgia,serif; color:var(--t-h); letter-spacing:.005em; }
.hbt-copy p{ color:var(--t-p); margin-top:2px; }
.hb-thanks .hb-count{ position:relative; z-index:1; }
.hbt-cta{ position:relative; z-index:1; background:var(--t-cta-bg); color:var(--t-cta-fg); }
@container hbslot (max-width:819px){ .hb-thanks .hbt-copy p{ display:none; } }
@container hbslot (max-width:669px){ .hb-thanks .hb-count{ display:none; } }
@container hbslot (max-width:529px){ .hb-thanks .hbt-cta{ display:none; } }
@container hbslot (max-width:379px){ .hb-thanks .hbt-copy h4{ font-size:15.5px; } .hb-thanks{ gap:8px; } }

/* ══════════ Christmas countdown (takeover) ══════════ */
.hb-xmas{ --x-sky:linear-gradient(180deg,#dbe8f4 0%,#e9f0f8 58%,#f6f9fc 100%); --x-bank:#ffffff; --x-bank-edge:#cfdceb; --x-tree:#1f6b45; --x-tree-dark:#17583a; --x-trunk:#7a4b2a; --x-cap:#ffffff;
  --x-h:#0f3d2a; --x-p:#48665a; --x-scrim:rgba(233,240,248,.92); --x-cta-bg:#c81f30; --x-cta-fg:#fff; --x-light:#f2a900;
  --cc-bg:#fbecee; --cc-bd:rgba(200,31,48,.25); --cc-num:#c81f30; --cc-lbl:#48665a; --cc-font:'HB Mountains of Christmas',Georgia,serif;
  background:var(--x-sky); }
.hb-xmas[data-variant="dark"]{ --x-sky:linear-gradient(180deg,#061421 0%,#0b2031 58%,#11303f 100%); --x-bank:#dbe7f1; --x-bank-edge:#9fb6c9; --x-tree:#1c6340; --x-tree-dark:#144d31; --x-trunk:#5e3a20; --x-cap:#e8f1f8;
  --x-h:#f2fbf5; --x-p:#a8c4d3; --x-scrim:rgba(11,32,49,.88); --x-cta-bg:#d62839; --x-cta-fg:#fff; --x-light:#ffe28a;
  --cc-bg:#10293b; --cc-bd:rgba(255,255,255,.2); --cc-num:#ff6b78; --cc-lbl:#cfe1ea; }
.hb-xmas .hb-take__content{ gap:16px; }
.hbx-cv{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.hbx-bank{ position:absolute; left:0; right:0; bottom:0; width:100%; height:12px; display:block; }
.hbx-bank path{ fill:var(--x-bank); stroke:var(--x-bank-edge); stroke-width:.6; }
.hbx-scene{ flex:none; width:110px; height:68px; align-self:stretch; display:block; position:relative; z-index:1; }
.hbx-tree{ fill:var(--x-tree); } .hbx-tree-dark{ fill:var(--x-tree-dark); } .hbx-trunk{ fill:var(--x-trunk); } .hbx-cap{ fill:none; stroke:var(--x-cap); stroke-width:1.6; stroke-linecap:round; }
.hbx-mound{ fill:var(--x-bank); }
.hbx-orn{ animation:hbx-drop 10s cubic-bezier(.3,.7,.3,1) infinite; animation-delay:var(--dl); }
@keyframes hbx-drop{ 0%,6%{ transform:translateY(-44px); opacity:0; } 9%{ opacity:1; } 14%{ transform:translateY(1.5px); } 17%,88%{ transform:none; opacity:1; } 94%,100%{ transform:none; opacity:0; } }
.hbx-light{ fill:var(--x-light); animation:hbx-twinkle 1.3s ease-in-out infinite alternate; animation-delay:var(--dl); }
@keyframes hbx-twinkle{ from{ opacity:.25; } to{ opacity:1; } }
.hbx-star{ fill:#f4b942; animation:hbx-star 10s linear infinite; }
@keyframes hbx-star{ 0%,52%{ opacity:.4; filter:none; } 58%,90%{ opacity:1; filter:drop-shadow(0 0 4px rgba(255,210,90,.95)); } 96%,100%{ opacity:.4; filter:none; } }
.hbx-copy{ position:relative; z-index:1; isolation:isolate; }
.hbx-copy::before{ content:''; position:absolute; inset:-12px -30px; z-index:-1; background:radial-gradient(closest-side,var(--x-scrim),transparent); }
.hbx-copy h4{ font:700 25px/1 'HB Mountains of Christmas',Georgia,serif; color:var(--x-h); white-space:nowrap; }
.hbx-copy p{ color:var(--x-p); margin-top:4px; }
.hb-xmas .hb-count{ position:relative; z-index:1; }
.hbx-cta{ position:relative; z-index:1; background:var(--x-cta-bg); color:var(--x-cta-fg); }
@container hbslot (max-width:719px){ .hb-xmas .hbx-copy p{ display:none; } }
@container hbslot (max-width:659px){ .hb-xmas .hb-count{ display:none; } }
@container hbslot (max-width:559px){ .hb-xmas .hbx-cta{ display:none; } }
@container hbslot (max-width:419px){ .hb-xmas .hb-take__content{ gap:8px; } .hb-xmas .hbx-scene{ width:92px; } .hb-xmas .hbx-copy h4{ font-size:19px; white-space:normal; line-height:1; } }

/* ── Takeover chrome: dark scenes need the silver "3D" and a see-through Sign in ── */
:root[data-header-chrome="dark"] #workspaceBrand .banner-wordmark-ink{ filter:none; }
:root[data-header-chrome="dark"] .workspace-footer :is(#workspaceAuth,.top-panel__home){
  background:rgba(8,10,18,.42)!important; border-color:rgba(255,255,255,.26)!important; color:#f2f2f4!important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
:root[data-header-chrome="dark"] .workspace-footer #workspaceAuth :is(.profile-menu-trigger__label,svg){ color:#f2f2f4!important; }
:root[data-header-chrome="light"] .workspace-footer :is(#workspaceAuth,.top-panel__home){ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

/* ── Interface tint. Each banner re-colors the accent family (buttons, selected
   chips, links, focus) and nudges the canvas background, in both themes. Only
   the Default style is tinted; Soft, Mono and Terminal keep their own palettes. ── */
:root[data-style="default"][data-theme="light"][data-header-banner="money"]{ --accent:#a26400; --accent-soft:#fff3d6; --accent-ink:#7d4c00; --on-accent:#fff; --on-accent-ink:#fff; --bg:#f4f1e8; }
:root[data-style="default"][data-theme="dark"][data-header-banner="money"]{ --accent:#e8b43c; --accent-soft:#2a2210; --accent-ink:#f6cf6e; --on-accent:#1a1206; --on-accent-ink:#1a1206; --bg:#0a0904; }
:root[data-style="default"][data-theme="light"][data-header-banner="night"]{ --accent:#4450c8; --accent-soft:#eceefe; --accent-ink:#343fa8; --on-accent:#fff; --on-accent-ink:#fff; --bg:#eef0f8; }
:root[data-style="default"][data-theme="dark"][data-header-banner="night"]{ --accent:#4f5de0; --accent-soft:#171b3a; --accent-ink:#aeb7ff; --on-accent:#fff; --on-accent-ink:#0b0e22; --bg:#05070f; }
:root[data-style="default"][data-theme="light"][data-header-banner="house"]{ --accent:#0b6fc4; --accent-soft:#e5f1fb; --accent-ink:#095a9f; --on-accent:#fff; --on-accent-ink:#fff; --bg:#ecf2f8; }
:root[data-style="default"][data-theme="dark"][data-header-banner="house"]{ --accent:#2f7cf6; --accent-soft:#0f1d33; --accent-ink:#93c2ff; --on-accent:#fff; --on-accent-ink:#081427; --bg:#060a10; }
:root[data-style="default"][data-theme="light"][data-header-banner="family"]{ --accent:#7b3f98; --accent-soft:#f4ebf8; --accent-ink:#62307d; --on-accent:#fff; --on-accent-ink:#fff; --bg:#f3eff6; }
:root[data-style="default"][data-theme="dark"][data-header-banner="family"]{ --accent:#9559bb; --accent-soft:#24172d; --accent-ink:#dcb8f0; --on-accent:#fff; --on-accent-ink:#1a0f22; --bg:#0a070d; }
:root[data-style="default"][data-theme="light"][data-header-banner="hive"]{ --accent:#e8961a; --accent-soft:#fff1dc; --accent-ink:#9a5600; --on-accent:#1d1203; --on-accent-ink:#fff; --bg:#f4f0e7; }
:root[data-style="default"][data-theme="dark"][data-header-banner="hive"]{ --accent:#e8971a; --accent-soft:#2a1c08; --accent-ink:#f6b456; --on-accent:#140c02; --on-accent-ink:#140c02; --bg:#0b0804; }
:root[data-style="default"][data-theme="light"][data-header-banner="reprint"]{ --accent:#0f4aa8; --accent-soft:#e7eefb; --accent-ink:#0d3f8f; --on-accent:#fff; --on-accent-ink:#fff; --bg:#ecf1f9; }
:root[data-style="default"][data-theme="dark"][data-header-banner="reprint"]{ --accent:#2b6fe0; --accent-soft:#0f1f3d; --accent-ink:#9cc2ff; --on-accent:#fff; --on-accent-ink:#07142b; --bg:#050a14; }
:root[data-style="default"][data-theme="light"][data-header-banner="boo"]{ --accent:#c2500a; --accent-soft:#fff0e4; --accent-ink:#a34306; --on-accent:#fff; --on-accent-ink:#fff; --bg:#f3eef1; }
:root[data-style="default"][data-theme="dark"][data-header-banner="boo"]{ --accent:#ff7a1a; --accent-soft:#2b1320; --accent-ink:#ffa05a; --on-accent:#1b0f2e; --on-accent-ink:#1b0f2e; --bg:#0c0712; }
:root[data-style="default"][data-theme="light"][data-header-banner="thanks"]{ --accent:#a84b16; --accent-soft:#fcede2; --accent-ink:#8a3b0f; --on-accent:#fff; --on-accent-ink:#fff; --bg:#f5f0ea; }
:root[data-style="default"][data-theme="dark"][data-header-banner="thanks"]{ --accent:#e0802f; --accent-soft:#2a1709; --accent-ink:#f3a868; --on-accent:#1a0d05; --on-accent-ink:#1a0d05; --bg:#0c0805; }
:root[data-style="default"][data-theme="light"][data-header-banner="xmas"]{ --accent:#c81f30; --accent-soft:#fdecee; --accent-ink:#9f1826; --on-accent:#fff; --on-accent-ink:#fff; --bg:#eef3ef; }
:root[data-style="default"][data-theme="dark"][data-header-banner="xmas"]{ --accent:#d62839; --accent-soft:#2a1014; --accent-ink:#ff959e; --on-accent:#fff; --on-accent-ink:#200a0d; --bg:#050b08; }

/* ── Settings picker ── */
.hb-picker-wrap,.hb-picker{ display:grid; gap:10px; }
.hb-picker__bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; }
.hb-picker__note{ margin:0; color:var(--dim); font:500 12px/1.45 var(--font); }
.hb-picker__seg{ display:inline-flex; padding:2px; border:1px solid var(--line); border-radius:999px; background:var(--raised); }
.hb-picker__seg button{ height:26px; padding:0 11px; border:0; border-radius:999px; background:transparent; color:var(--dim); font:600 12px/1 var(--font); cursor:pointer; }
.hb-picker__seg button[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); }
.hb-picker__seg button:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:1px; }
.hb-opt{ position:relative; display:grid; gap:8px; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--raised); cursor:pointer;
  transition:border-color .15s,box-shadow .15s,background .15s; }
.hb-opt:hover{ border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.hb-opt:has(input:checked){ border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 1px var(--accent); }
.hb-opt:has(input:focus-visible){ outline:2px solid var(--accent-ink); outline-offset:2px; }
.hb-opt > input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.hb-opt__head{ display:flex; align-items:center; gap:10px; min-width:0; }
.hb-opt__radio{ flex:none; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface); display:grid; place-items:center; }
.hb-opt:has(input:checked) .hb-opt__radio{ border-color:var(--accent); }
.hb-opt:has(input:checked) .hb-opt__radio::after{ content:''; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.hb-opt__text{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; min-width:0; }
.hb-opt__name{ color:var(--ink); font:700 13.5px/1.2 var(--font); }
.hb-opt__meta{ color:var(--dim); font:500 11.5px/1.3 var(--font); }
.hb-opt__badge{ margin-left:auto; flex:none; padding:4px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink); font:700 10.5px/1 var(--font); letter-spacing:.04em; visibility:hidden; }
.hb-opt:has(input:checked) .hb-opt__badge{ visibility:visible; }
.hb-opt__frame{ position:relative; height:68px; border-radius:11px; overflow:hidden; border:1px solid var(--line); background:var(--surface); }
.hb-picker[data-preview="light"] .hb-opt__frame{ background:#fff; border-color:#dce1e8; }
.hb-picker[data-preview="dark"] .hb-opt__frame{ background:#111; border-color:#363636; }
.hb-opt__frame .hb-host{ --hb-safe-l:12px; --hb-safe-r:12px; }
.hb-opt__plain{ position:absolute; inset:0; display:flex; align-items:center; gap:10px; padding:0 16px; }
.hb-opt__plain img{ width:30px; height:30px; flex:none; }
.hb-opt__plain span{ color:var(--dim); font:500 12px/1.4 var(--font); }
.hb-picker[data-preview="light"] .hb-opt__plain span{ color:#5d6775; }
.hb-picker[data-preview="dark"] .hb-opt__plain span{ color:#adadad; }
@media (prefers-reduced-motion:reduce){ .hb-opt{ transition:none; } }