/* ============================================================
   Floating capsule navigation, standalone bundle.
   Centered fixed capsule that expands into a full menu (an
   original take on Skiper UI's Nike menu); the active-tab pill
   slides between section tabs per the Transitions.dev
   "tabs sliding" recipe. Pairs with cnav.js.
   Self-contained: scoped --cn-* tokens, no dependency on the
   host page's design system (used by the shell AND the
   self-contained AIVI / Fitbroidit case systems).
   ============================================================ */
.cnav,.cnav-veil,.crail{
  --cn-ink:#161b3a; --cn-text:#3b4160; --cn-muted:#6f7590; --cn-dim:#9da3b8;
  --cn-indigo:#4b4ed9; --cn-indigo-deep:#3f42c6; --cn-indigo-soft:#eeeefc;
  --cn-line:#e6e8f0; --cn-line-2:#d9dce8; --cn-card:#f5f6fa;
  --cn-display:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --cn-label:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --cn-num:"DM Sans","Figtree",system-ui,sans-serif;
  --cn-ease:cubic-bezier(.2,.7,.2,1);
  --cn-slide:cubic-bezier(.22,1,.36,1);
}
.cnav{position:fixed;top:16px;left:0;right:0;z-index:80;display:flex;justify-content:center;pointer-events:none;font-family:var(--cn-display);font-size:16px;line-height:1.6}
.cnav-bar{pointer-events:auto;position:relative;z-index:2;display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;background:rgba(255,255,255,.86);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border:1px solid var(--cn-line);box-shadow:0 12px 34px rgba(22,27,58,.12)}
.cnav-brand{display:flex;align-items:center;gap:9px;padding:0 12px 0 4px;font-family:var(--cn-display);font-weight:600;font-size:16.5px;letter-spacing:-.02em;color:var(--cn-ink);text-decoration:none}
.cnav-brand .brand-mark{width:30px;height:30px;border-radius:9px;background:var(--cn-indigo);display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700;letter-spacing:0}
.cnav-brand .brand-smile{background:transparent;border-radius:0;color:var(--cn-ink)}
/* brand hover: TextRoll (skiper-ui skiper58). One clipped box holding two
   stacked copies of the wordmark; on hover the top copy rolls up a full
   line and the bottom copy rolls in from a full line below, staggered
   35ms per glyph outward from the centre. Spaces keep their width via
   white-space:pre, which a bare inline-block would collapse. */
.cnav-name.tr{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom}
.tr-row{display:block;white-space:pre}
.tr-row.tr-b{position:absolute;inset:0}
.tr-row>span{display:inline-block;white-space:pre;backface-visibility:hidden;
  transition:transform .3s ease-in-out;transition-delay:calc(var(--d,0)*35ms)}
.tr-b>span{transform:translateY(100%)}
@media (hover:hover){
  .cnav-brand:hover .tr-a>span,.cnav-brand:focus-visible .tr-a>span{transform:translateY(-100%)}
  .cnav-brand:hover .tr-b>span,.cnav-brand:focus-visible .tr-b>span{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){.tr-row>span{transition:none}.tr-b{display:none}}

.cnav-tabs{position:relative;display:flex;align-items:center}
.cnav-tab{position:relative;z-index:1;display:grid;place-items:center;width:42px;height:38px;border-radius:999px;color:var(--cn-text);transition:color .2s;text-decoration:none}
/* hover: the icon rises a little as its name arrives in the tag below. No
   frame, no fill, nothing that reads as a selection: the pair of movements is
   the whole effect. */
.cnav-tab svg{display:block;transition:transform .34s cubic-bezier(.34,1.3,.64,1)}
@media (hover:hover){
  .cnav-tab:hover svg{transform:translateY(-3px) scale(1.07)}
}
.cnav-tab:active svg{transform:translateY(-1px) scale(1);transition-duration:.1s}
@media (prefers-reduced-motion:reduce){.cnav-tab svg{transition:none}.cnav-tab:hover svg{transform:none}}
.cnav-tab:hover{color:var(--cn-ink)}
.cnav-menu{position:relative;display:grid;place-items:center;width:38px;height:38px;padding:0;margin-left:6px;border:0;border-radius:999px;background:var(--cn-ink);color:#fff;cursor:pointer;transition:background .2s}
.cnav-menu:hover{background:var(--cn-indigo)}
.cnav-menu svg{display:block;grid-area:1/1;transition:opacity .2s,transform .3s var(--cn-slide)}
.cnav-menu .i-close{opacity:0;transform:rotate(-45deg)}
.cnav.open .cnav-menu .i-menu{opacity:0;transform:rotate(45deg)}
.cnav.open .cnav-menu .i-close{opacity:1;transform:rotate(0)}

/* shared tooltip under the bar (an original take on Skiper UI's Vercel
   tooltip, skiper43): the pill is a clipped window that travels and
   resizes between icons while the old label slides out one side and
   the new one slides in from the other */

.cnav-tip{position:absolute;top:calc(100% + 9px);left:0;z-index:3;height:20px;width:60px;background:var(--cn-indigo);color:#fff;font-size:10.5px;font-weight:500;letter-spacing:.03em;line-height:1;border-radius:3px;overflow:hidden;pointer-events:none;opacity:0;transform:translateX(var(--tx,0px)) translateY(-4px);transform-origin:top left;transition:transform .28s cubic-bezier(.34,1.3,.64,1),opacity .2s ease,width .28s cubic-bezier(.34,1.3,.64,1)}
.cnav-tip.show{opacity:1;transform:translateX(var(--tx,0px)) translateY(0)}
.cnav-tip .tl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;transition:transform .32s cubic-bezier(.3,1,.4,1),opacity .24s ease}
.cnav-tip .tm{position:absolute;visibility:hidden;white-space:nowrap}

/* the expanding menu panel */
.cnav-panel{pointer-events:auto;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:min(620px,calc(100vw - 24px));border-radius:26px;background:rgba(255,255,255,.92);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border:1px solid var(--cn-line);box-shadow:0 34px 90px rgba(22,27,58,.20);display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .34s var(--cn-ease),visibility 0s linear .34s}
.cnav.open .cnav-panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .5s var(--cn-slide)}
.cnav-sheet{min-height:0;overflow:hidden}
.cnav-inner{padding:34px 30px 26px;text-align:center}
.cnav-k{font-family:var(--cn-label);font-weight:600;font-size:11.5px;letter-spacing:.12em;color:var(--cn-dim);text-transform:uppercase}
.cnav-big{margin-top:16px;display:grid;justify-items:center}
.cnav-big a{position:relative;display:inline-block;padding:6px 0;font-family:var(--cn-display);font-weight:400;font-size:clamp(25px,4.4vw,33px);letter-spacing:-.02em;line-height:1.15;color:var(--cn-ink);text-decoration:none;transition:color .18s,opacity .18s}
.cnav-big a sup{font-family:var(--cn-num);font-weight:600;font-size:11.5px;letter-spacing:.02em;color:var(--cn-dim);margin-left:8px}
.cnav-big:hover a{opacity:.35}
/* the cursor-following case preview inside the menu */
.cnav-prev{position:fixed;top:0;left:0;z-index:90;width:266px;pointer-events:none;
  opacity:0;visibility:hidden;will-change:transform;
  transition:opacity .32s var(--cn-ease),visibility 0s linear .32s}
.cnav-prev.on{transition:opacity .32s var(--cn-ease),visibility 0s}
.cnav-prev img{display:block;width:100%;height:170px;object-fit:cover;object-position:top;
  border-radius:12px;border:1px solid var(--cn-line);background:#fff;
  box-shadow:0 22px 60px rgba(22,27,58,.22);
  transform:scale(.94) rotate(-1.4deg);transform-origin:0 0;
  transition:transform .5s var(--cn-slide),opacity .3s var(--cn-ease)}
.cnav-prev.on{opacity:1;visibility:visible}
.cnav-prev.on img{transform:scale(1) rotate(0deg)}
@media (max-width:1100px){.cnav-prev{display:none}}
.cnav-big a:hover{opacity:1;color:var(--cn-indigo)}
.cnav-small{margin-top:20px;padding-top:18px;border-top:1px solid var(--cn-line);display:flex;justify-content:center;flex-wrap:wrap;gap:4px 6px}
.cnav-small a{padding:7px 12px;border-radius:999px;font-size:14.5px;color:var(--cn-muted);text-decoration:none;transition:color .18s,background .18s}
.cnav-small a:hover{color:var(--cn-ink);background:var(--cn-card)}
.cnav-foot{margin-top:18px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
/* the menu's two CTAs run the same selection as the shell's .btn: quiet type
   in a hairline box, and on hover a 1px accent outline with four corner
   handles. No name tag down here, the panel only leaves 26px below the row
   and the tag needs ~25px, so it would sit on the panel edge. */
.cnav-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:38px;padding:0 14px;border-radius:5px;border:1px solid var(--cn-line-2);
  background:#fff;color:var(--cn-ink);
  font-family:var(--cn-display);font-weight:500;font-size:14.5px;white-space:nowrap;
  text-decoration:none;cursor:pointer;
  transition:border-color .2s var(--cn-ease),box-shadow .2s var(--cn-ease),
             background .2s var(--cn-ease),color .2s var(--cn-ease)}
.cnav-btn-primary{background:var(--cn-ink);color:#fff;border-color:transparent}
.cnav-btn::before,.cnav-btn::after,.cnav-btn .lbl::before,.cnav-btn .lbl::after{
  content:"";position:absolute;width:7px;height:7px;border-radius:1px;
  background:#fff;border:1px solid var(--cn-indigo);
  opacity:0;pointer-events:none;transition:opacity .16s var(--cn-ease)}
.cnav-btn::before{left:-4px;top:-4px}
.cnav-btn::after{right:-4px;top:-4px}
.cnav-btn .lbl::before{left:-4px;bottom:-4px}
.cnav-btn .lbl::after{right:-4px;bottom:-4px}
.cnav-btn .ext{flex:none;font-size:12px;line-height:1;opacity:.5;
  transition:opacity .2s var(--cn-ease),transform .3s cubic-bezier(.34,1.3,.64,1)}
@media (hover:hover){
  .cnav-btn:hover{border-color:var(--cn-indigo);box-shadow:0 0 0 1px var(--cn-indigo)}
  .cnav-btn:hover::before,.cnav-btn:hover::after,
  .cnav-btn:hover .lbl::before,.cnav-btn:hover .lbl::after{opacity:1}
  .cnav-btn:hover .ext{opacity:.9;transform:translate(1px,-1px)}
}
.cnav-btn:focus-visible{border-color:var(--cn-indigo)}
.cnav-btn:focus-visible::before,.cnav-btn:focus-visible::after,
.cnav-btn:focus-visible .lbl::before,.cnav-btn:focus-visible .lbl::after{opacity:1}

/* items rise in as the panel opens (fill-backwards animations so
   hover transitions stay instant afterwards); exits go with the panel */
@keyframes cnav-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cnav.open .cnav-k{animation:cnav-rise .3s var(--cn-ease) .08s backwards}
.cnav.open .cnav-big a{animation:cnav-rise .32s var(--cn-ease) backwards}
.cnav.open .cnav-big a:nth-child(1){animation-delay:.12s}
.cnav.open .cnav-big a:nth-child(2){animation-delay:.16s}
.cnav.open .cnav-big a:nth-child(3){animation-delay:.20s}
.cnav.open .cnav-big a:nth-child(4){animation-delay:.24s}
.cnav.open .cnav-big a:nth-child(5){animation-delay:.28s}
.cnav.open .cnav-small{animation:cnav-rise .3s var(--cn-ease) .34s backwards}
.cnav.open .cnav-foot{animation:cnav-rise .3s var(--cn-ease) .40s backwards}

/* ---------- case chapter rail ----------
   Fixed vertical navigation on case pages: one entry per chapter,
   the active one marked, and an indigo spine that fills as you
   move down the page. Built by cnav.js from the sections. */
.crail{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:60;display:none;flex-direction:column;align-items:flex-end;gap:9px;padding-right:14px}
@media (min-width:1500px){.crail{display:flex}}
.crail .crail-spine{position:absolute;right:0;top:2px;bottom:2px;width:1px;background:var(--cn-line-2)}
.crail .crail-spine i{position:absolute;left:-1px;top:0;width:3px;border-radius:3px;background:var(--cn-indigo);height:var(--p,0%);transition:height .2s linear}
.crail a{position:relative;font-family:var(--cn-label);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cn-dim);text-decoration:none;line-height:1.6;padding-right:12px;transition:color .2s;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.crail a::after{content:"";position:absolute;right:-14px;top:50%;width:7px;height:1px;background:var(--cn-line-2);transform:translateY(-50%);transition:width .25s var(--cn-ease),background .25s}
.crail a:hover{color:var(--cn-ink)}
.crail a.on{color:var(--cn-indigo)}
.crail a.on::after{width:13px;background:var(--cn-indigo)}

/* page veil behind the open menu */
.cnav-veil{position:fixed;inset:0;z-index:70;background:rgba(245,246,250,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .25s var(--cn-ease)}
html.menu-open .cnav-veil{opacity:1;pointer-events:auto}
html.menu-open{overflow:hidden}
/* the moment a page transition starts, all menu chrome vanishes
   instantly so no white blur rides over the slat cascade */
html.navving .cnav-veil{opacity:0!important;transition:none!important}
html.navving .cnav-panel{visibility:hidden!important;transition:none!important}

@media (max-width:860px){
  .cnav{top:10px}
  .cnav-tabs{display:none}
}

/* ============================================================
   Page transition: "Different easing / from top", copied from
   Codrops' PageTransitions demo (tympanus.net, animation 16):
   the outgoing page stays ON TOP and slides down out of view
   (moveToBottom, .7s ease-in-out) while the incoming page slides
   in from the top beneath it (moveFromTop, .6s ease); the two
   different easings are the effect's signature. Driven by
   cross-document view transitions, so the browser holds the old
   frame until the destination can render: no flash, and the
   whole thing plays once. Non-supporting browsers get a plain
   instant navigation.
   ============================================================ */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-moveToBottom .7s ease-in-out both;z-index:2}
::view-transition-new(root){animation:vt-moveFromTop .6s ease both;z-index:1}
@keyframes vt-moveToBottom{to{transform:translateY(100%)}}
@keyframes vt-moveFromTop{from{transform:translateY(-100%)}}
/* Same transition, aimed. The default (old frame exits downward, new arrives
   from above) reads as travelling UP, which is right for a normal navigation
   but backwards for a hero CTA jumping to a section further DOWN the page.
   site.js stamps the direction on <html> before starting the transition. */
html.vt-down::view-transition-old(root){animation:vt-moveToTop .7s ease-in-out both;z-index:2}
html.vt-down::view-transition-new(root){animation:vt-moveFromBottom .6s ease both;z-index:1}
@keyframes vt-moveToTop{to{transform:translateY(-100%)}}
@keyframes vt-moveFromBottom{from{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}
@media (prefers-reduced-motion:reduce){
  .cnav-panel{transition:none!important}
  .cnav.open .cnav-k,.cnav.open .cnav-big a,.cnav.open .cnav-small,.cnav.open .cnav-foot{animation:none!important}
}

/* ============================================================
   Shared site footer. Lives here, next to the capsule, because
   this bundle is the only stylesheet every page loads: the shell,
   the three shell case pages, and the two self-contained case
   systems (AIVI / Fitbroidit) that carry their own design system.
   Fully scoped and self-contained for the same reason, so the
   footer is byte-for-byte the same object on every page.
   ============================================================ */
.ngf{
  --cn-ink:#161b3a; --cn-text:#3b4160; --cn-muted:#6f7590; --cn-dim:#9da3b8;
  --cn-indigo:#4b4ed9; --cn-line:#e6e8f0; --cn-card:#f5f6fa;
  --cn-display:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --cn-label:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --cn-num:"DM Sans","Figtree",system-ui,sans-serif;
  --cn-ease:cubic-bezier(.2,.7,.2,1);
  border-top:1px solid var(--cn-line);background:#fff;
  padding:82px 0 44px;
  font-family:var(--cn-display);font-size:15px;line-height:1.6;color:var(--cn-muted)
}
.ngf-in{max-width:1120px;margin:0 auto;padding:0 28px}
.ngf a{color:inherit;text-decoration:none}
.ngf-top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
.ngf-brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:19px;letter-spacing:-.02em;color:var(--cn-ink)}
.ngf-brand svg{display:block;width:30px;height:30px;flex:none}
.ngf-say{margin:18px 0 0;max-width:30em}
.ngf-status{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:13.5px;color:var(--cn-text)}
.ngf-status i{width:7px;height:7px;border-radius:50%;background:#2f8a5b;flex:none}
.ngf-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 40px}
.ngf-cols h4{margin:0 0 16px;font-family:var(--cn-label);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cn-dim)}
.ngf-cols ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.ngf-cols a{color:var(--cn-text);transition:color .2s}
.ngf-cols li{overflow:hidden}
.ngf-cols a{display:inline-block;transition:color .24s var(--cn-ease),transform .42s cubic-bezier(.34,1.3,.64,1)}
@media (hover:hover){
  .ngf-cols a:hover{color:var(--cn-indigo);transform:translateX(6px)}
  /* the smiley gives a small nod when the footer brand is hovered */
  .ngf-brand svg{transition:transform .55s cubic-bezier(.34,1.3,.64,1)}
  .ngf-brand:hover svg{transform:rotate(-14deg) scale(1.08)}
  .ngf-brand{transition:color .24s var(--cn-ease)}
  .ngf-brand:hover{color:var(--cn-indigo)}
  /* the status dot breathes once on hover of the whole block */
  .ngf-status:hover i{animation:ngf-pulse 1.4s var(--cn-ease) infinite}
  .ngf-built:hover svg{transform:rotate(90deg)}
}
.ngf-built svg{transition:transform .6s cubic-bezier(.34,1.3,.64,1)}
@keyframes ngf-pulse{0%,100%{box-shadow:0 0 0 0 rgba(47,138,91,.45)}55%{box-shadow:0 0 0 6px rgba(47,138,91,0)}}
@media (prefers-reduced-motion:reduce){
  .ngf-cols a,.ngf-brand svg,.ngf-built svg,.cnav-btn,.cnav-prev img{transition:none!important}
  .ngf-cols a:hover{transform:none}
  .ngf-status:hover i{animation:none}
}
.ngf-bottom{margin-top:56px;padding-top:26px;border-top:1px solid var(--cn-line);
  display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;font-size:13px;color:var(--cn-dim)}
.ngf-built{display:inline-flex;align-items:center;gap:7px}
.ngf-built svg{flex:none}
@media (max-width:860px){
  .ngf{padding:60px 0 40px}
  .ngf-top{grid-template-columns:1fr;gap:40px;align-items:start}
  .ngf-cols{grid-template-columns:1fr 1fr;gap:32px}
  .ngf-bottom{margin-top:52px}
}
@media (max-width:520px){.ngf-cols{grid-template-columns:1fr}}

/* ============================================================
   Dark world for the shared chrome. This bundle scopes its own
   --cn-* tokens (so it can sit on top of three different design
   systems), which means it needs its own restatement rather than
   inheriting the shell's. The ABLab product site keeps its local
   overrides: it was always dark and is unaffected.
   ============================================================ */
:root[data-theme="dark"] .cnav,
:root[data-theme="dark"] .cnav-veil,
:root[data-theme="dark"] .crail,
:root[data-theme="dark"] .ngf{
  --cn-ink:#eceffa; --cn-text:#c0c7da; --cn-muted:#929ab3; --cn-dim:#6c7590;
  --cn-indigo:#7d80f2; --cn-indigo-deep:#9093f5; --cn-indigo-soft:#1c1f3a;
  --cn-line:#262a36; --cn-line-2:#343a4a; --cn-card:#161923;
}
:root[data-theme="dark"] .cnav-bar{background:rgba(22,25,35,.86);box-shadow:0 10px 34px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05)}
:root[data-theme="dark"] .cnav-panel{background:rgba(22,25,35,.94);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05)}
:root[data-theme="dark"] .cnav-veil{background:rgba(4,6,12,.5)}
:root[data-theme="dark"] .cnav-btn-ghost{background:#20242f;color:var(--cn-ink)}
:root[data-theme="dark"] .cnav-btn-primary{color:#0e1016}
:root[data-theme="dark"] .cnav-menu{background:#eceffa;color:#0e1016}
:root[data-theme="dark"] .ngf{background:#0e1016}
:root[data-theme="dark"] .cnav-prev img{background:var(--cn-card);box-shadow:0 22px 60px rgba(0,0,0,.6)}
/* the tag is the selection's name now, so it takes the frame colour rather
   than the old neutral tooltip grey. Dark indigo is light, so the ink flips. */
:root[data-theme="dark"] .cnav-tip{background:var(--cn-indigo);color:#0e1016}

/* ============================================================
   Theme toggle, an original take on skiper-ui's skiper26
   (@skiper-ui/skiper26). Its two signatures are kept: the mark
   is a ring whose inner half-disc rotates 180 degrees on switch,
   and the new theme arrives as a clip-path wipe travelling
   bottom-up across a same-document view transition. It hangs
   from the bottom right on a short stem, clear of the rail.
   ============================================================ */
.ttog{position:fixed;right:26px;bottom:0;z-index:70;display:flex;flex-direction:column;align-items:center;
  font-family:var(--cn-display);pointer-events:none}
.ttog::before{content:"";width:1px;height:26px;background:var(--cn-line-2);flex:none}
.ttog button{pointer-events:auto;width:44px;height:44px;margin-bottom:22px;padding:0;border:1px solid var(--cn-line);
  border-radius:999px;background:var(--cn-card);color:var(--cn-ink);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(22,27,58,.14);
  transition:transform .32s cubic-bezier(.34,1.3,.64,1),box-shadow .32s var(--cn-ease),background .25s var(--cn-ease)}
.ttog svg{width:20px;height:20px;display:block;overflow:visible}
.ttog .tt-half{transform-origin:50% 50%;transition:transform .5s ease-in-out}
:root[data-theme="dark"] .ttog .tt-half{transform:rotate(-180deg)}
@media (hover:hover){.ttog button:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(22,27,58,.2)}}
.ttog button:active{transform:translateY(0) scale(.94);transition-duration:.09s}
:root[data-theme="dark"] .ttog button{box-shadow:0 8px 24px rgba(0,0,0,.5)}
:root[data-theme="dark"] .ttog button:hover{box-shadow:0 14px 32px rgba(0,0,0,.6)}
@media (max-width:860px){.ttog{right:14px}.ttog button{width:40px;height:40px;margin-bottom:16px}.ttog::before{height:18px}}

/* the wipe. Scoped to html.theming so it never touches the
   cross-document page transition, which owns the same pseudos. */
html.theming::view-transition-old(root){animation:none;z-index:1}
html.theming::view-transition-new(root){animation:tt-wipe .62s cubic-bezier(.65,.05,.35,1) both;z-index:2}
@keyframes tt-wipe{
  from{clip-path:polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)}
  to{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}
}
@media (prefers-reduced-motion:reduce){
  .ttog .tt-half{transition:none}
  html.theming::view-transition-new(root){animation:none}
}

/* ============================================================
   Figma-style pointer (pairs with cursor.js). The native arrow
   is only hidden once the custom one is actually running, so a
   browser that bails out keeps a normal cursor.
   ============================================================ */
.fcur{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;will-change:transform;opacity:0;transition:opacity .15s}
html.fcur-on .fcur{opacity:1}
.fcur-arrow{position:absolute;top:-2px;left:-2px;display:block;
  fill:#161b3a;stroke:#fff;stroke-width:1.4;stroke-linejoin:round;
  filter:drop-shadow(0 2px 5px rgba(11,17,22,.34));
  transition:transform .22s cubic-bezier(.34,1.3,.64,1)}
.fcur-halo{position:absolute;top:0;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;background:rgba(22,27,58,.10);border:1px solid rgba(22,27,58,.16);
  opacity:0;transform:scale(.4);
  transition:opacity .26s var(--cn-ease),transform .34s cubic-bezier(.34,1.3,.64,1)}
.fcur.hot .fcur-halo{opacity:1;transform:scale(1)}
.fcur.hot .fcur-arrow{transform:scale(.82)}
.fcur.down .fcur-arrow{transform:scale(.7)}
.fcur.down .fcur-halo{transform:scale(.82)}
:root[data-theme="dark"] .fcur-arrow{fill:#eceffa;stroke:#0e1016;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
:root[data-theme="dark"] .fcur-halo{background:rgba(236,239,250,.12);border-color:rgba(236,239,250,.2)}
/* only once the custom pointer is live */
html.fcur-on,html.fcur-on *{cursor:none!important}
html.fcur-on iframe,html.fcur-on iframe *{cursor:auto!important}
@media (max-width:860px),(hover:none),(pointer:coarse){.fcur{display:none}}
@media (prefers-reduced-motion:reduce){.fcur{display:none}html.fcur-on,html.fcur-on *{cursor:auto!important}}