/* theme tokens (dark = default; light overrides live at the end of pages.css, :root[data-theme=light]) */
:root{--tw:255,255,255;--tk:0,0,0;--ts:0,0,0;--sa:1;--k-0a0c11:10,12,17;--k-08090d:8,9,13;--k-06070a:6,7,10;--k-050507:5,5,7;--kt-b9bec7:185,190,199;--k-0c0e12:12,14,18;--k-08090c:8,9,12;--k-050609:5,6,9;--k-0c0e13:12,14,19;--k-0e1015:14,16,21;--k-07080b:7,8,11;--k-0a0b0f:10,11,15;--k-0b0d12:11,13,18;--k-141824:20,24,36;--k-1b2030:27,32,48;--kt-dfe3ea:223,227,234;--k-090a0e:9,10,14;--k-0d1b2a:13,27,42;--k-1b1033:27,16,51;--k-2a0f24:42,15,36;--k-a078ff:160,120,255;--k-07080d:7,8,13;--k-0f3326:15,51,38;--k-0b1a22:11,26,34;--k-24163f:36,22,63;--k-3a1420:58,20,32;--k-0e2a33:14,42,51;--kt-e8ebf0:232,235,240;--k-030408:3,4,8;--k-05060a:5,6,10;--k-080a0f:8,10,15;--kt-7ff7c0:127,247,192;--k-030407:3,4,7;--k-9d8cf8:157,140,248;--kt-9aa1ad:154,161,173;--k-ff78c6:255,120,198;--kt-b4bac5:180,186,197;--kt-c3c8d0:195,200,208;--k-b99bff:185,155,255;--kt-d4d8df:212,216,223;--kt-e3e6ec:227,230,236;--kt-3df29a:61,242,154;--kt-e6e9ef:230,233,239;--kt-eafff4:234,255,244;--kt-aab1bd:170,177,189;--kt-aeb4be:174,180,190;--kt-9ff9cf:159,249,207;--k-090b10:9,11,16;--k-f0e9ff:240,233,255;--k-7ff7c0:127,247,192;--k-0a0c12:10,12,18;--k-0e1614:14,22,20;--k-0f131b:15,19,27;--k-3a4150:58,65,80;--k-1e828c:30,130,140;--k-081a22:8,26,34;--k-0c1016:12,16,22;--k-161e2c:22,30,44;--k-222c3e:34,44,62;--k-1a2230:26,34,48;--k-1e283a:30,40,58;--k-101622:16,22,34;--k-141a28:20,26,40;--k-141a26:20,26,38;--k-222b40:34,43,64;--k-2c3650:44,54,80;--k-1e2638:30,38,56;--kt-e3e7ee:227,231,238;--kt-d3d8e0:211,216,224;--k-28344a:40,52,74;--k-2c3a54:44,58,84;--k-1a2438:26,36,56;--k-1b2333:27,35,51}
/* Homepage H-F: the front door of direction F. Loaded after site.css, d.css (stage, glass, pixel type, cursor, glitch) and
   f.css (menu cards, sign-up block, sticky bar). Uses the same tokens: --accent, --glow, --vio, --d-cyan, --d-pink, --d-iri,
   --d-pixel, --mono, --ease, --text, --text-2, --text-3, --hair, --s*. The WebGL stage (d-fx.js) and cursor effects come from
   d-boot.js and only run on wide, fine-pointer, motion-OK screens; everything here works without them (calm version). */

:root{--hf-glass:rgba(var(--k-0a0c11),.62);--hf-line:rgba(var(--tw),.10)}
html{scroll-padding-top:calc(var(--header) + 16px)}
.hf-body a:focus-visible,.hf-body button:focus-visible,.hf-body summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- header ---------- */
.hf-nav{gap:var(--s2)}
.hf-nav .btn{margin-top:0}
.hf-tabs{position:relative}
.hf-tabs>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:500 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);padding:10px 4px}
.hf-tabs>summary::-webkit-details-marker{display:none}
.hf-tabs>summary:hover,.hf-tabs[open]>summary{color:var(--accent)}
.hf-tabs>summary svg{transition:transform .2s var(--ease)}
.hf-tabs[open]>summary svg{transform:rotate(180deg)}
.hf-tabs-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(520px,calc(100vw - 32px));padding:14px;border-radius:12px;z-index:60;
  background:rgba(var(--k-08090d),.94);border:1px solid var(--hf-line);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 30px 70px -30px rgba(var(--ts),var(--sa)),0 0 60px -30px rgba(var(--vio),.6)}
.hf-tabs-panel ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.hf-tabs-panel li a{display:block;padding:9px 10px;border-radius:6px;color:var(--text);font-size:15px;text-decoration:none}
.hf-tabs-panel li a:hover,.hf-tabs-panel li a:focus-visible{background:rgba(var(--tw),.06);color:var(--accent)}
.hf-tabs-all{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px;border-top:1px solid var(--hf-line);color:var(--text);font-weight:600;text-decoration:none}
.hf-tabs-all svg:first-child{color:var(--accent)}
.hf-tabs-all span{flex:1}
.hf-tabs-all:hover{color:var(--accent)}

/* ---------- hero: copy left, the product video on a floating glass screen right ---------- */
main>.layer.hf-hero{padding-bottom:clamp(40px,8vh,96px);overflow-x:clip}
.hf-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);align-items:center}
.hf-hero .hero-copy h1{font-size:clamp(38px,4.6vw,68px);line-height:.98;letter-spacing:-.045em;max-width:13em}
.hf-hero .hero-copy .lede{max-width:50ch}
.hf-hero .actions{gap:12px}
.hf-hero .actions .btn{margin-top:0}
.hf-tour-btn{gap:10px;cursor:pointer}
.hf-tour-btn svg{color:var(--accent)}
.hf-stage{position:relative;perspective:1400px}
.hf-screen{position:relative;margin:0;border-radius:12px;transform-style:preserve-3d;transform:rotateY(var(--ry,-11deg)) rotateX(var(--rx,4deg));transform-origin:30% 50%;
  transition:transform .9s var(--ease),box-shadow .5s}
.hf-media{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:rgb(var(--k-06070a));border:1px solid rgba(var(--tw),.14);
  box-shadow:0 0 0 1px rgba(var(--tw),.04),0 60px 110px -40px rgba(var(--ts),calc(.95*var(--sa))),0 0 140px -40px rgba(var(--vio),.6),-40px 40px 120px -60px rgba(var(--glow),.6)}
.hf-media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;background:var(--d-iri);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6}
.hf-media img,.hf-media video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.hf-video{opacity:0;transition:opacity .5s}
.hf-screen.is-live .hf-video{opacity:1}
.hf-end{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(60% 70% at 50% 60%,rgba(var(--k-050507),.55),rgba(var(--k-050507),.85))}
.hf-screen.is-end .hf-end{opacity:1}
/* sheen over the screen */
.hf-media>picture::after{content:""}
.hf-screen::before{content:"";position:absolute;inset:0;z-index:1;border-radius:12px;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(var(--tw),.07) 45%,transparent 58%)}
/* caption: one line per beat, under the screen on narrow widths, overlaid bottom-left on wide */
.hf-cap{margin:14px 0 0;min-height:1.5em}
.hf-caps{list-style:none;margin:0;padding:0;display:grid}
.hf-caps li{grid-area:1/1;display:flex;align-items:baseline;gap:10px;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--text);opacity:0;translate:0 6px;transition:opacity .45s,translate .45s var(--ease)}
.hf-caps li.on{opacity:1;translate:0 0}
.hf-cap-n{font:400 16px/1 var(--d-pixel);color:var(--accent)}
.hf-beats{display:flex;gap:6px;margin-top:10px}
.hf-beats i{flex:1;height:2px;background:rgba(var(--tw),.14);overflow:hidden;border-radius:2px}
.hf-beats b{display:block;height:100%;width:0;background:var(--accent)}
.hf-beats i.done b{width:100%}
.hf-toggle{z-index:3;right:12px;top:12px;bottom:auto}
.hf-toggle .i-play{display:none}
.hf-screen.is-paused .hf-toggle .i-pause{display:none}
.hf-screen.is-paused .hf-toggle .i-play{display:block}
.hf-screen.is-tour{--ry:0deg;--rx:0deg}

@media (min-width:1100px){
  .hf-hero-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:var(--s6)}
  .hf-cap{position:absolute;left:18px;bottom:16px;z-index:2;margin:0;padding:10px 14px;border-radius:8px;background:rgba(var(--k-050507),.72);border:1px solid var(--hf-line);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translateZ(30px);max-width:calc(100% - 36px)}
  .hf-beats{position:absolute;left:18px;right:18px;bottom:-14px;margin:0}
}
@media (max-width:1099px){
  .hf-screen{--ry:0deg;--rx:0deg}
  .hf-hero .hero-copy h1{max-width:none}
}

/* ---------- proof strip ---------- */
.hf-proof{padding:var(--s4) 0 var(--s6)}
.hf-proof-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:1px;margin:0;border-radius:14px;overflow:hidden;background:var(--hf-line);border:1px solid var(--hf-line);
  box-shadow:0 30px 70px -40px rgba(var(--ts),var(--sa))}
.hf-fig{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px;padding:22px 20px;background:rgba(var(--k-08090d),.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hf-fig dd{margin:0;font-size:clamp(30px,3.2vw,46px);line-height:1;font-weight:700;letter-spacing:-.045em;color:var(--text);
  background:linear-gradient(100deg,rgb(var(--tw)) 20%,rgb(var(--d-cyan)) 60%,rgb(var(--vio)) 85%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hf-fig dt{font-size:14px;line-height:1.4;color:var(--text-2)}
.hf-proof-line{margin:var(--s2) 0 0;font:500 13px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);text-align:center}

/* ---------- section heads ---------- */
.hf-head{position:relative;max-width:780px;margin-bottom:var(--s6)}
/* soft dark pool behind section heads so the WebGL cards drifting at the sides never sit on the type (same idea as d.css .hero-copy) */
.hf-head::before{content:"";position:absolute;z-index:-1;inset:-40% -16% -40% -40%;pointer-events:none;background:linear-gradient(90deg,rgba(var(--k-050507),.94),rgba(var(--k-050507),.86) 62%,transparent);-webkit-mask:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.hf-head h2,.hf-head .hf-sub{text-shadow:0 0 18px rgba(var(--ts),var(--sa)),0 0 4px rgba(var(--ts),var(--sa))}
html.hf-pin .hf-ta-side .hf-head::before{display:none}
.hf-head h2{margin:0}
.hf-sub{margin:var(--s2) 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:rgb(var(--kt-b9bec7));max-width:52ch}
.hf-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin-top:var(--s5)}
.hf-row .btn{margin-top:0}
.hf-link{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(var(--tw),.2);padding:4px 0}
.hf-link:hover,.hf-link:focus-visible{color:var(--accent);border-color:var(--accent)}
.hf-link svg{transition:transform .25s var(--ease)}
.hf-link:hover svg{transform:translateX(3px)}

/* ---------- tabs showcase (F menu cards, grouped) ---------- */
.hf-group+.hf-group{margin-top:var(--s6)}
.hf-group-h{margin:0 0 var(--s3);font:400 16px/1 var(--d-pixel);text-transform:uppercase;letter-spacing:.02em;color:var(--text-2)}
.hf-group-h::before{content:"[ ";color:var(--accent);opacity:.8}
.hf-group-h::after{content:" ]";color:var(--accent);opacity:.8}
.hf-tabs-sec .f-grid{margin:0}
.hf-tabs-nav{margin-top:var(--s6)}
.hf-tabs-nav .f-jump svg:first-child{width:22px;height:22px}
.hf-soon{margin:var(--s3) 0 0;font-size:14px;color:var(--text-3)}
.hf-cml{margin:var(--s4) auto 0;max-width:760px;color:var(--text-2);font-size:15px;line-height:1.6;text-align:center}
.hf-cml .hf-link{margin:0 var(--s2)}

/* ---------- workspace bento ---------- */
.hf-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.hf-b{position:relative;display:flex;flex-direction:column;padding:0;min-height:220px;overflow:hidden}
.hf-b-copy{position:relative;z-index:1;padding:22px 22px 24px}
.hf-b h3{margin:0;font-size:20px;line-height:1.25;letter-spacing:-.02em}
.hf-b p{margin:8px 0 0;font-size:15px;line-height:1.55;color:rgb(var(--kt-b9bec7))}
.hf-b .fineprint{font-size:13px;color:var(--text-3)}
.hf-b-side_by_side{grid-column:span 4}
.hf-b-workspaces{grid-column:span 2}
.hf-b-share{grid-column:span 2}
.hf-b-customize{grid-column:span 4}
.hf-b-alerts{grid-column:span 4}
.hf-b-modes{grid-column:span 2;justify-content:flex-start}
.hf-b-modes .hf-mode{align-self:flex-start}
.hf-b-art{position:relative;overflow:hidden;border-bottom:1px solid rgba(var(--tw),.06);background:rgb(var(--k-0c0e12))}
.hf-b-art img{display:block;width:100%;height:auto;filter:saturate(.9) brightness(.9);transition:transform .8s var(--ease),filter .4s}
.hf-b-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--k-08090c),.7),transparent 45%)}
.hf-b:hover .hf-b-art img{transform:scale(1.03);filter:none}
.hf-b-side_by_side .hf-b-art{flex:1;display:flex;align-items:center}
.hf-b-customize .hf-b-art{max-height:170px}
.hf-b-customize .hf-b-art img{object-fit:cover;object-position:top left}
.hf-ws{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:22px 22px 0}
.hf-ws i{display:block;aspect-ratio:16/10;border-radius:5px;border:1px solid var(--hf-line);background:
  linear-gradient(rgba(var(--tw),.06),rgba(var(--tw),.06)) 12% 22%/34% 56% no-repeat,
  linear-gradient(rgba(var(--tw),.06),rgba(var(--tw),.06)) 82% 22%/38% 26% no-repeat,rgba(var(--tw),.02)}
.hf-ws i.on{border-color:rgba(var(--glow),.6);box-shadow:0 0 18px -4px rgba(var(--glow),.5);background-color:rgba(var(--glow),.06)}
.hf-mode{flex:none;display:inline-flex;margin:22px 0 22px 22px;padding:4px;border-radius:8px;border:1px solid var(--hf-line);background:rgba(var(--tw),.03);font:600 13px/1 var(--mono);letter-spacing:.06em}
.hf-mode span{padding:9px 14px;border-radius:5px;color:var(--text-3)}
.hf-mode span.on{background:rgba(var(--glow),.14);color:var(--accent)}
.hf-b-modes .hf-b-copy{padding-left:22px}
.hf-toasts{position:relative;z-index:1;padding:0 22px 24px;margin-top:auto}
.hf-toast{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;background:rgba(var(--k-050609),.8);border:1px solid var(--hf-line);
  box-shadow:0 18px 40px -20px rgba(var(--ts),var(--sa)),0 0 0 1px rgba(var(--glow),.12);font-size:14px}
.hf-toast-src{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--accent);padding:5px 7px;border-radius:4px;background:rgba(var(--glow),.1)}
.hf-toast-t{color:var(--text);line-height:1.35}
.hf-toast-ch{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-2)}
html.d-fx .hf-toast{animation:hf-ping 4.5s var(--ease) 1.2s infinite}
@keyframes hf-ping{0%,70%,100%{box-shadow:0 18px 40px -20px rgba(var(--ts),var(--sa)),0 0 0 1px rgba(var(--glow),.12)}78%{box-shadow:0 18px 40px -20px rgba(var(--ts),var(--sa)),0 0 0 1px rgba(var(--glow),.6),0 0 30px -6px rgba(var(--glow),.6)}}

/* ---------- how it works ---------- */
.hf-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:s}
.hf-steps li{position:relative;padding:26px 24px 28px}
.hf-step-n{display:block;font:400 16px/1 var(--d-pixel);color:var(--accent);margin-bottom:18px}
.hf-steps h3{margin:0;font-size:22px;letter-spacing:-.02em}
.hf-steps p{margin:8px 0 0;font-size:15px;line-height:1.55;color:rgb(var(--kt-b9bec7))}
.hf-steps li:not(:last-child)::before{content:"";position:absolute;top:33px;left:calc(24px + 3.2em);right:-18px;height:1px;background:linear-gradient(90deg,rgba(var(--glow),.6),rgba(var(--vio),.35) 70%,transparent)}

/* ---------- FAQ ---------- */
.hf-faq-line{margin-top:var(--s2);font-size:15px}
.hf-faq-line a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.hf-faq .faq-a p{margin:0 0 var(--s3);max-width:68ch}

/* ---------- final sign-up ---------- */
.hf-final .eyebrow{margin-bottom:var(--s2)}
.hf-final .actions{justify-content:flex-start;margin-top:var(--s4);gap:12px}
.hf-final .actions .btn{margin-top:0}
.hf-final .f-btn-xl{margin-top:0}
.hf-demo-btn{height:56px;gap:10px}

/* ---------- footer ---------- */
.hf-footer{position:relative;z-index:1;padding:var(--s8) 0 calc(var(--s10) + 40px);border-top:1px solid rgba(var(--tw),.06);background:rgba(var(--k-050507),.86);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
.hf-foot-top{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s6)}
.hf-foot-brand{max-width:52ch}
.hf-foot-brand .logo{color:var(--text)}
.hf-foot-brand p{margin:var(--s2) 0 0;font-size:15px;line-height:1.6;color:var(--text-2)}
.hf-follow h3{margin:0 0 12px;font:400 16px/1 var(--d-pixel);text-transform:uppercase;color:var(--text-2)}
.hf-follow ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hf-follow li a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:8px;border:1px solid var(--hf-line);background:var(--hf-glass);color:var(--text);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .2s,color .2s}
.hf-follow li a:hover,.hf-follow li a:focus-visible{border-color:rgba(var(--glow),.55);color:var(--accent)}
.hf-follow-m{margin:10px 0 0;font-size:12px;color:var(--text-3)}
.hf-foot-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4)}
.hf-foot-h{margin:0 0 12px;font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.hf-foot-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hf-foot-nav a{color:var(--text-2);font-size:14px;text-decoration:none}
.hf-foot-nav a:hover,.hf-foot-nav a:focus-visible{color:var(--accent)}
.hf-footer .copyright{margin-top:var(--s6);font-size:13px;color:var(--text-3)}

/* ---------- responsive / calm ---------- */
@media (max-width:1099px){
  .hf-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf-b-side_by_side,.hf-b-modes{grid-column:span 2;grid-row:auto}
  .hf-b-workspaces,.hf-b-share,.hf-b-customize,.hf-b-alerts{grid-column:span 1}
  .hf-proof-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hf-foot-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:899px){
  .hf-nav-link{display:none}
  .hf-head::before{right:0}
  .hf-tabs:not([open]) .hf-tabs-panel{display:none}
  .hf-tabs-panel,.hf-fig,.hf-cap,.hf-footer{-webkit-backdrop-filter:none;backdrop-filter:none}
  .hf-tabs-panel{position:fixed;left:16px;right:16px;top:calc(var(--header) + 6px);width:auto;max-height:calc(100vh - var(--header) - 24px);max-height:calc(100dvh - var(--header) - 24px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .hf-fig{background:rgba(var(--k-0c0e13),.96)}
  .hf-b{background:rgba(var(--k-0e1015),.94)}
  .hf-steps{grid-template-columns:1fr}
  .hf-steps li:not(:last-child)::before{display:none}
  .hf-final .actions .btn{flex:1 1 220px}
}
@media (max-width:640px){
  .hf-hero .hero-copy h1{font-size:clamp(32px,9vw,40px);line-height:1.02}
  .hf-hero .actions .btn{flex:1 1 auto}
  .hf-proof-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf-fig:first-child{grid-column:span 2}
  .hf-fig{padding:16px 14px}
  .hf-bento{grid-template-columns:1fr}
  .hf-b-side_by_side,.hf-b-modes,.hf-b-workspaces,.hf-b-share,.hf-b-customize,.hf-b-alerts{grid-column:auto}
  .hf-b-modes{flex-direction:column;align-items:flex-start}
  .hf-b-modes .hf-b-copy{padding-left:22px;padding-top:0}
  .hf-tabs-panel ul{grid-template-columns:1fr 1fr}
  .hf-foot-nav{grid-template-columns:1fr 1fr}
  .hf-head{margin-bottom:var(--s4)}
}
@media (max-width:420px){.hf-nav .hf-tabs>summary{padding:10px 0}.hf-nav{gap:12px}}
@media (prefers-reduced-motion:reduce){
  .hf-screen,.hf-caps li,.hf-video,.hf-end,.hf-b-art img,.hf-link svg{transition:none}
  .hf-screen{--ry:-6deg;--rx:2deg}
  html.d-fx .hf-toast{animation:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:1099px){.hf-screen{--ry:0deg;--rx:0deg}}

/* =====================================================================================================================
   Tabs section: two public views, "Showcase" (A) and "Grid" (B). The view is chosen in <head> before first paint
   (html.hf-v-a | html.hf-v-b, from the visitor's stored choice), so the hidden one never paints and nothing shifts.
   ===================================================================================================================== */
.hf-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hf-tabs-top{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.hf-tabs-top .hf-head{margin-bottom:0}
.hf-view-b{display:none}
html.hf-v-b .hf-view-b{display:block}
html.hf-v-b .hf-view-a{display:none}
.hf-tabs-foot{margin-top:var(--s6)}
.hf-tabs-foot .hf-tabs-nav{margin-top:0}

/* ---------- A: Showcase ---------- */
.hf-ta-items{list-style:none;margin:0;padding:0}
.hf-ta-frame{display:block;position:relative;border-radius:12px;perspective:1400px;text-decoration:none}
.hf-ta-media{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:rgb(var(--k-06070a));border:1px solid rgba(var(--cat,61,242,154),.45);
  box-shadow:0 0 0 1px rgba(var(--tw),.04),0 50px 100px -40px rgba(var(--ts),calc(.95*var(--sa))),0 0 120px -40px rgba(var(--cat,124,92,255),.55);transition:border-color .5s,box-shadow .5s}
.hf-ta-media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(var(--cat),.10),transparent 30%,transparent 70%,rgba(var(--cat),.12))}
.hf-mi,.hf-mv{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.hf-mi-shot{object-position:0 0}
.hf-mv{opacity:0;transition:opacity .5s}
.hf-mv.is-live{opacity:1}
.hf-ta-sweep{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 30%,rgba(var(--cat),.0) 38%,rgba(var(--cat),.55) 48%,rgba(var(--tw),.35) 50%,rgba(var(--cat),.4) 52%,transparent 64%);transform:translateX(-100%)}
.hf-ta-cap{position:relative;margin-top:18px}
.hf-ta-k{display:flex;align-items:center;gap:12px;margin:0;font:400 16px/1 var(--d-pixel);color:rgb(var(--cat))}
.hf-ta-n{display:inline-flex;gap:.3em;overflow:hidden}
.hf-ta-n b{display:inline-block;font-weight:400}
.hf-ta-g{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--cat));padding:5px 8px;border-radius:4px;background:rgba(var(--cat),.12);border:1px solid rgba(var(--cat),.3)}
.hf-ta-cap .hf-t{margin:10px 0 0;font-size:clamp(24px,2.4vw,38px);line-height:1.05;letter-spacing:-.035em;font-weight:700}
.hf-ta-cap .hf-t a{color:var(--text);text-decoration:none}
.hf-ta-cap .hf-t a:hover{color:rgb(var(--cat))}
.hf-ta-note{margin:8px 0 0;color:var(--text-2);font-size:13px;line-height:1.5;max-width:56ch}
.hf-ta-note .hf-link{font-size:13px;padding:2px 0;margin-left:4px}
.hf-ta-l{margin:8px 0 0;color:rgb(var(--kt-b9bec7));font-size:16px;line-height:1.5;max-width:56ch}
.hf-ta-ctl{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.hf-ta-ctl .btn{margin-top:0;gap:8px}
.hf-ta-open svg{transition:transform .25s var(--ease)}
.hf-ta-open:hover svg,.hf-ta-open:focus-visible svg{transform:translateX(3px)}
.hf-ta-next{cursor:pointer}
.hf-ta-rail{display:none}

/* phones: swipe carousel, buttons work as "next card" */
@media (max-width:899px){
  .hf-ta-items{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin:0 calc(-1 * var(--gutter));padding:24px var(--gutter) 20px;scrollbar-width:none;scroll-padding-inline:var(--gutter)}
  .hf-ta-items::-webkit-scrollbar{display:none}
  .hf-ta-item{flex:0 0 86%;scroll-snap-align:start}
  .hf-ta-item{display:flex;flex-direction:column}
  .hf-ta-cap{flex:1 1 auto;display:flex;flex-direction:column}
  .hf-ta-ctl{margin-top:auto;padding-top:16px}
  .hf-ta-cap{margin-top:14px}
  .hf-ta-cap .hf-t{font-size:22px}
  .hf-ta-l{font-size:14px}
  .hf-ta-ctl .btn{height:40px;padding:0 14px;font-size:14px}
}
/* wide, not pinned (reduced motion / no JS): static two-column list */
@media (min-width:900px){
  html:not(.hf-pin) .hf-ta-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}
}

/* pinned */
html.hf-pin .hf-ta{height:calc(var(--n) * 34vh + 100vh - var(--header))}
html.hf-pin .hf-ta-pin{padding-bottom:56px;box-sizing:border-box;position:sticky;top:var(--header);height:calc(100vh - var(--header));height:calc(100svh - var(--header));display:flex;align-items:center}
html.hf-pin .hf-ta-grid{display:grid;grid-template-columns:minmax(270px,320px) minmax(0,1fr);gap:clamp(28px,3.4vw,64px);align-items:center;width:100%}
html.hf-pin .hf-ta-side{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--header) - 40px);padding:16px 14px 12px;border-radius:14px;background:rgba(var(--k-050609),.72);border:1px solid rgba(var(--tw),.07);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
html.hf-pin .hf-ta-rail{display:block;position:relative;overflow:auto;scrollbar-width:none;padding-left:10px}
html.hf-pin .hf-ta-rail::-webkit-scrollbar{display:none}
.hf-ta-grp{margin:0 0 8px;padding:8px 8px 6px;border-radius:10px;background:linear-gradient(90deg,rgba(var(--cat),.09),rgba(var(--cat),.02));border:1px solid rgba(var(--cat),.16)}
.hf-ta-chip{display:inline-flex;align-items:center;gap:8px;margin:0 0 4px;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--cat))}
.hf-ta-chip::before{content:"";width:8px;height:8px;border-radius:2px;background:rgb(var(--cat));box-shadow:0 0 10px rgba(var(--cat),.8)}
.hf-ta-grp ol{list-style:none;margin:0;padding:0}
.hf-ta-rb{display:flex;align-items:baseline;gap:10px;width:100%;padding:5px 8px;border:0;border-radius:6px;background:none;color:var(--text-2);font:500 15px/1.3 var(--font);text-align:left;cursor:pointer;transition:background .25s,color .25s,transform .35s var(--ease)}
.hf-ta-rb:hover,.hf-ta-rb:focus-visible{color:var(--text);background:rgba(var(--tw),.04)}
.hf-ta-rb.is-cur{color:var(--text);background:rgba(var(--cat),.18);box-shadow:inset 3px 0 0 rgb(var(--cat));transform:translateX(4px)}
.hf-ta-rn{font:400 16px/1 var(--d-pixel);color:var(--text-3);min-width:2ch}
.hf-ta-rb.is-cur .hf-ta-rn{color:rgb(var(--cat))}
.hf-ta-bar{position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;overflow:hidden;background:rgba(var(--tw),.06)}
.hf-ta-bar i{display:block;width:2px;height:100%;background:rgb(var(--cat-cur,61,242,154));box-shadow:0 0 10px rgba(var(--cat-cur,61,242,154),.9);transform-origin:50% 0;transform:scaleY(var(--p,0));transition:background .4s}
.hf-ta.is-pulse .hf-ta-bar i{animation:hf-pulse .7s var(--ease)}
@keyframes hf-pulse{0%{filter:brightness(1)}30%{filter:brightness(2.2) drop-shadow(0 0 6px #fff)}100%{filter:brightness(1)}}
html.hf-pin .hf-ta-items{position:relative;height:calc(100vh - var(--header) - 60px)}
html.hf-pin .hf-ta-item{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transform:translateY(40px);
  transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s linear .6s}
html.hf-pin .hf-ta-item.is-cur{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease) .05s,transform .6s var(--ease) .05s,visibility 0s}
html.hf-pin .hf-ta-item.is-prev{transform:translateY(-40px)}
html.hf-pin .hf-ta-frame,html.hf-pin .hf-ta-cap{width:min(100%,calc((100vh - var(--header) - 300px) * 16 / 9))}
html.hf-pin .hf-ta-frame .hf-ta-media{transform:rotateY(calc(3deg - var(--f,0) * 6deg)) rotateX(2.5deg) translateY(calc(8px - var(--f,0) * 16px));transition:transform .2s linear,border-color .5s,box-shadow .5s}
/* transition between tabs: clip-path wipe on the incoming frame + a glow sweep in the category colour + counter tick */
html.hf-pin .hf-ta-item.is-in .hf-mi,html.hf-pin .hf-ta-item.is-in .hf-mv{animation:hf-wipe .75s var(--ease) both}
html.hf-pin .hf-ta-item.is-in .hf-ta-sweep{animation:hf-sweep .95s var(--ease) .1s both}
html.hf-pin .hf-ta-item.is-in .hf-ta-n b{animation:hf-tick .5s var(--ease) both}
html.hf-pin .hf-ta-item.is-in .hf-t,html.hf-pin .hf-ta-item.is-in .hf-ta-l,html.hf-pin .hf-ta-item.is-in .hf-ta-ctl{animation:hf-up .6s var(--ease) both}
html.hf-pin .hf-ta-item.is-in .hf-ta-l{animation-delay:.06s}
html.hf-pin .hf-ta-item.is-in .hf-ta-ctl{animation-delay:.12s}
@keyframes hf-wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes hf-sweep{0%{opacity:1;transform:translateX(-100%)}80%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
@keyframes hf-tick{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes hf-up{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}

/* =====================================================================================================================
   Tabs section, variant B: editorial bento. Hairline tiles, media full-bleed, type over a soft gradient, glow on hover.
   ===================================================================================================================== */
.hf-tb-main,.hf-tb-rest{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.hf-tb-main{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,clamp(230px,20vw,300px)) clamp(280px,26vw,380px)}
.hf-tb-rest{margin-top:14px;grid-template-columns:repeat(5,minmax(0,1fr))}
.hf-tt{position:relative;min-width:0}
.hf-tt-xl{grid-column:span 8;grid-row:span 2}
.hf-tt-l{grid-column:span 4}
.hf-tt-m{grid-column:span 6}
.hf-tt-a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;border-radius:10px;overflow:hidden;color:var(--text);text-decoration:none;
  background:rgb(var(--k-07080b));border:1px solid rgba(var(--tw),.09);transition:border-color .3s,box-shadow .35s}
.hf-tt-mm{position:absolute;inset:0;display:block;overflow:hidden}
.hf-tt-mm .hf-mi{filter:saturate(.85) brightness(.82);transition:transform 1.2s var(--ease),filter .5s}
.hf-tt-mm::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--k-050609),.94) 0%,rgba(var(--k-050609),.7) 28%,rgba(var(--k-050609),0) 62%)}
.hf-tt-c{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:22px 64px 22px 22px}
.hf-tt-k{font:500 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:rgb(var(--cat,61,242,154))}
.hf-tt .hf-t{margin:0;font-size:22px;line-height:1.1;letter-spacing:-.03em}
.hf-tt-xl .hf-t{font-size:clamp(30px,3.2vw,48px);letter-spacing:-.045em}
.hf-tt-l .hf-t{font-size:clamp(20px,1.8vw,26px)}
.hf-tt-m .hf-t{font-size:clamp(24px,2.2vw,32px)}
.hf-tt-ln{font-size:15px;line-height:1.45;color:rgb(var(--kt-b9bec7));max-width:46ch}
.hf-tt-go{position:absolute;right:18px;bottom:22px;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(var(--tw),.18);color:var(--text-2);transition:background .3s,border-color .3s,color .3s}
.hf-tt-a::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;background:var(--d-iri);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
.hf-tt-a:hover,.hf-tt-a:focus-visible{border-color:rgba(var(--tw),.2);box-shadow:0 30px 70px -36px rgba(var(--ts),var(--sa)),0 0 70px -24px rgba(var(--glow),.55)}
.hf-tt-a:hover::after,.hf-tt-a:focus-visible::after{opacity:.85}
.hf-tt-a:hover .hf-mi,.hf-tt-a:focus-visible .hf-mi{transform:scale(1.035);filter:none}
.hf-tt-a:hover .hf-tt-go,.hf-tt-a:focus-visible .hf-tt-go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* compact tiles: image band on top, type below */
.hf-tt-s .hf-tt-a{justify-content:flex-start;background:rgba(var(--k-08090d),.78)}
.hf-tt-s .hf-tt-mm{position:relative;inset:auto;aspect-ratio:16/8;border-bottom:1px solid rgba(var(--tw),.07)}
.hf-tt-s .hf-tt-mm::after{background:linear-gradient(0deg,rgba(var(--k-08090d),.6),transparent 60%)}
.hf-tt-s .hf-tt-c{padding:16px 56px 18px 18px}
.hf-tt-s .hf-t{font-size:18px;letter-spacing:-.02em}
.hf-tt-s .hf-tt-ln{font-size:14px}
.hf-tt-s .hf-tt-go{width:30px;height:30px;bottom:18px;right:14px}
@media (max-width:1099px){
  .hf-tb-main{grid-template-rows:repeat(2,clamp(200px,24vw,260px)) clamp(260px,32vw,340px)}
  .hf-tb-rest{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .hf-tb-main{grid-template-columns:1fr;grid-template-rows:none}
  .hf-tt-xl,.hf-tt-l,.hf-tt-m{grid-column:auto;grid-row:auto}
  .hf-tt-xl .hf-tt-a,.hf-tt-l .hf-tt-a,.hf-tt-m .hf-tt-a{aspect-ratio:4/3;height:auto}
  .hf-tb-rest{grid-template-columns:1fr}
  .hf-tt-c{padding:18px 56px 18px 18px}
  .hf-tt-xl .hf-t{font-size:30px}
  .hf-tt-a{background:rgb(var(--k-0a0b0f))}
}
@media (prefers-reduced-motion:reduce){
  .hf-tt-a,.hf-tt-mm .hf-mi,.hf-tt-go,.hf-ta-item,.hf-ta-rb,.hf-ta-frame .hf-ta-media{transition:none}
  .hf-tt-a:hover .hf-mi{transform:none}
}

@media (prefers-reduced-motion:reduce){
  html .hf-ta-item .hf-mi,html .hf-ta-item .hf-mv,html .hf-ta-item .hf-ta-sweep,html .hf-ta-item .hf-ta-n b,html .hf-ta-item .hf-t,html .hf-ta-item .hf-ta-l,html .hf-ta-item .hf-ta-ctl{animation:none!important}
}

/* =====================================================================================================================
   Showcase category chips (rail filters): "All tabs" + one chip per category, in the category colour
   ===================================================================================================================== */
.hf-ta-item.is-filtered{display:none!important}
@media (min-width:900px){html.hf-pin .hf-ta-side{max-height:calc(100vh - var(--header) - 24px - 56px)}}

/* =====================================================================================================================
   Workspace micro-demos (CSS only). Static frame by default; .is-play (in view, motion OK) runs the loop.
   ===================================================================================================================== */
.hf-demo{position:relative;margin:0;padding:16px 16px 0}
.hf-demo-pair{display:grid;grid-template-columns:1fr 1fr;gap:0}
.hf-demo-stage{position:relative;aspect-ratio:16/9.5;border-radius:10px;overflow:hidden;background:rgb(var(--k-07080b));border:1px solid rgba(var(--tw),.08)}
.hf-demo figcaption{display:flex;flex-direction:column;gap:3px;padding:10px 2px 0}
.hf-demo-l{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.hf-demo-c{font-size:13px;line-height:1.45;color:var(--text-3)}
/* mini tab window */
.hf-mw{position:absolute;display:flex;flex-direction:column;border-radius:6px;overflow:hidden;background:rgb(var(--k-0b0d12));border:1px solid rgba(var(--tw),.12);box-shadow:0 14px 30px -14px rgba(var(--ts),var(--sa))}
.hf-mw-h{display:flex;align-items:center;justify-content:space-between;gap:6px;height:18px;padding:0 7px;background:linear-gradient(90deg,rgb(var(--k-141824)),rgb(var(--k-1b2030)));border-bottom:1px solid rgba(var(--tw),.06);flex:none}
.hf-mw-h b{font:600 9px/1 var(--font);color:rgb(var(--kt-dfe3ea));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-mw-h i{width:14px;height:4px;border-radius:2px;background:rgba(var(--tw),.18);flex:none}
.hf-mw-b{position:relative;flex:1;overflow:hidden}
.hf-mw-b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0;filter:saturate(.9) brightness(.85)}
.hf-mw-r{position:absolute;right:2px;bottom:2px;width:7px;height:7px;border-right:1.5px solid rgba(var(--tw),.4);border-bottom:1.5px solid rgba(var(--tw),.4)}
.hf-cur{position:absolute;z-index:5;width:14px;height:14px;margin:-2px 0 0 -2px;left:30%;top:16%;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 1l11 6.5-5 1.2L6 14z' fill='%23fff' stroke='%23000' stroke-width='.8'/%3E%3C/svg%3E");filter:drop-shadow(0 2px 3px #000)}

/* arrange: three layouts on a 9 s loop */
.hf-dx-arr{position:absolute;inset:0;background:radial-gradient(rgba(var(--tw),.06) 1px,transparent 1px) 0 0/14px 14px}
.hf-dx-arr .p1{left:4%;top:6%;width:44%;height:48%}
.hf-dx-arr .p2{left:52%;top:6%;width:44%;height:48%}
.hf-dx-arr .p3{left:4%;top:58%;width:44%;height:36%}
.hf-dx-arr .p4{left:52%;top:58%;width:44%;height:36%}
.hf-demo.is-play .hf-dx-arr .p1{animation:hf-a1 9s var(--ease) infinite}
.hf-demo.is-play .hf-dx-arr .p2{animation:hf-a2 9s var(--ease) infinite}
.hf-demo.is-play .hf-dx-arr .p3{animation:hf-a3 9s var(--ease) infinite}
.hf-demo.is-play .hf-dx-arr .p4{animation:hf-a4 9s var(--ease) infinite}
.hf-demo.is-play .hf-cur{animation:hf-cur 9s var(--ease) infinite}
@keyframes hf-a1{0%,18%{left:4%;top:6%;width:44%;height:48%}30%,52%{left:30%;top:8%;width:40%;height:44%;box-shadow:0 0 0 1px rgba(61,242,154,.7),0 20px 40px -14px rgba(var(--ts),var(--sa))}64%,86%{left:4%;top:6%;width:62%;height:56%}100%{left:4%;top:6%;width:44%;height:48%}}
@keyframes hf-a2{0%,18%{left:52%;top:6%;width:44%;height:48%}30%,52%{left:72%;top:6%;width:24%;height:88%}64%,86%{left:70%;top:6%;width:26%;height:56%}100%{left:52%;top:6%;width:44%;height:48%}}
@keyframes hf-a3{0%,18%{left:4%;top:58%;width:44%;height:36%}30%,52%{left:4%;top:56%;width:30%;height:38%}64%,86%{left:4%;top:66%;width:44%;height:28%}100%{left:4%;top:58%;width:44%;height:36%}}
@keyframes hf-a4{0%,18%{left:52%;top:58%;width:44%;height:36%}30%,52%{left:4%;top:8%;width:24%;height:44%}64%,86%{left:52%;top:66%;width:44%;height:28%}100%{left:52%;top:58%;width:44%;height:36%}}
@keyframes hf-cur{0%{left:30%;top:9%}12%{left:20%;top:9%;transform:scale(1)}16%{transform:scale(.85)}30%{left:44%;top:11%;transform:scale(.85)}36%{transform:scale(1)}50%{left:64%;top:60%}58%{left:65%;top:60%;transform:scale(.85)}72%{left:65%;top:61%;transform:scale(.85)}78%{transform:scale(1)}100%{left:30%;top:9%}}

/* background: four layers crossfade behind three tabs */
.hf-dx-bg{position:absolute;inset:0}
.hf-dx-bg .bg{position:absolute;inset:0;opacity:0}
.hf-dx-bg .bg0{background:rgb(var(--k-090a0e));opacity:1}
.hf-dx-bg .bg1{background:linear-gradient(135deg,rgb(var(--k-0d1b2a)),rgb(var(--k-1b1033)) 60%,rgb(var(--k-2a0f24)))}
.hf-dx-bg .bg2{background:radial-gradient(60% 80% at 20% 20%,rgba(56,214,255,.45),transparent 60%),radial-gradient(60% 80% at 80% 90%,rgba(var(--k-a078ff),.5),transparent 60%),rgb(var(--k-07080d))}
.hf-dx-bg .bg3{background:conic-gradient(from 200deg at 60% 40%,rgb(var(--k-0f3326)),rgb(var(--k-0b1a22)),rgb(var(--k-24163f)),rgb(var(--k-3a1420)),rgb(var(--k-0f3326)));filter:blur(6px) saturate(1.2);inset:-10px}
.hf-dx-bg .q1{left:6%;top:10%;width:40%;height:44%}
.hf-dx-bg .q2{left:52%;top:8%;width:42%;height:40%}
.hf-dx-bg .q3{left:28%;top:58%;width:42%;height:34%}
.hf-dx-sw{position:absolute;right:8px;bottom:8px;z-index:3;display:flex;gap:4px;padding:4px;border-radius:6px;background:rgba(var(--k-050609),.75);border:1px solid rgba(var(--tw),.1)}
.hf-dx-sw i{width:12px;height:12px;border-radius:3px;border:1px solid rgba(var(--tw),.18)}
.hf-dx-bg .hf-dx-sw i:nth-child(1){background:rgb(var(--k-090a0e))}.hf-dx-bg .hf-dx-sw i:nth-child(2){background:linear-gradient(135deg,rgb(var(--k-0d1b2a)),rgb(var(--k-2a0f24)))}
.hf-dx-bg .hf-dx-sw i:nth-child(3){background:radial-gradient(circle at 30% 30%,#38d6ff,rgb(var(--k-a078ff)))}.hf-dx-bg .hf-dx-sw i:nth-child(4){background:conic-gradient(rgb(var(--k-0f3326)),rgb(var(--k-24163f)),rgb(var(--k-3a1420)),rgb(var(--k-0f3326)))}
.hf-dx-bg .hf-dx-sw i:nth-child(1){box-shadow:0 0 0 1.5px var(--accent)}
.hf-demo.is-play .hf-dx-bg .bg1{animation:hf-l1 12s linear infinite}
.hf-demo.is-play .hf-dx-bg .bg2{animation:hf-l2 12s linear infinite}
.hf-demo.is-play .hf-dx-bg .bg3{animation:hf-l3 12s linear infinite}
.hf-demo.is-play .hf-dx-bg .hf-dx-sw i{animation:hf-sel 12s linear infinite;animation-delay:calc(var(--d,0) * 3s - 12s)}
.hf-dx-sw i:nth-child(1){--d:0}.hf-dx-sw i:nth-child(2){--d:1}.hf-dx-sw i:nth-child(3){--d:2}.hf-dx-sw i:nth-child(4){--d:3}
@keyframes hf-l1{0%,20%{opacity:0}27%,45%{opacity:1}52%,100%{opacity:0}}
@keyframes hf-l2{0%,45%{opacity:0}52%,70%{opacity:1}77%,100%{opacity:0}}
@keyframes hf-l3{0%,70%{opacity:0}77%,95%{opacity:1}100%{opacity:0}}
@keyframes hf-sel{0%,24%{box-shadow:0 0 0 1.5px var(--accent)}25.01%,100%{box-shadow:none}}

/* skin: one tab cycles through four skins (head + body + glow) */
.hf-dx-skin{position:absolute;inset:0;background:radial-gradient(rgba(var(--tw),.05) 1px,transparent 1px) 0 0/14px 14px,rgb(var(--k-08090d))}
.hf-dx-skin .s1{left:12%;top:12%;width:76%;height:72%;--h1:rgb(var(--k-141824));--h2:rgb(var(--k-1b2030));--g:255,255,255}
.hf-dx-skin .s1 .hf-mw-h{height:22px;background:linear-gradient(90deg,var(--h1),var(--h2));transition:background .6s}
.hf-dx-skin .s1{box-shadow:0 0 0 1px rgba(var(--g),.15),0 20px 40px -16px rgba(var(--ts),var(--sa)),0 0 40px -10px rgba(var(--g),.35)}
.hf-dx-skin .hf-dx-sw i:nth-child(1){background:rgb(var(--k-1b2030))}.hf-dx-skin .hf-dx-sw i:nth-child(2){background:linear-gradient(90deg,rgb(var(--k-0b1a22)),rgb(var(--k-0e2a33)))}
.hf-dx-skin .hf-dx-sw i:nth-child(3){background:linear-gradient(90deg,rgb(var(--k-3a1420)),rgb(var(--k-24163f)))}.hf-dx-skin .hf-dx-sw i:nth-child(4){background:linear-gradient(90deg,rgb(var(--k-0f3326)),#38d6ff,rgb(var(--k-a078ff)))}
.hf-dx-skin .hf-dx-sw i:nth-child(1){box-shadow:0 0 0 1.5px var(--accent)}
.hf-demo.is-play .hf-dx-skin .s1{animation:hf-skin 12s steps(1) infinite}
.hf-demo.is-play .hf-dx-skin .s1 .hf-mw-h{animation:hf-skinh 12s linear infinite;background-size:300% 100%}
.hf-demo.is-play .hf-dx-skin .hf-dx-sw i{animation:hf-sel 12s linear infinite;animation-delay:calc(var(--d,0) * 3s - 12s)}
@keyframes hf-skin{0%{--g:255,255,255}25%{--g:56,214,255}50%{--g:255,92,140}75%{--g:61,242,154}}
@keyframes hf-skinh{0%,24%{background-image:linear-gradient(90deg,rgb(var(--k-141824)),rgb(var(--k-1b2030)))}25%,49%{background-image:linear-gradient(90deg,rgb(var(--k-0b1a22)),rgb(var(--k-0e2a33)))}50%,74%{background-image:linear-gradient(90deg,rgb(var(--k-3a1420)),rgb(var(--k-24163f)))}75%{background-image:linear-gradient(90deg,rgb(var(--k-0f3326)),#38d6ff,rgb(var(--k-a078ff)),rgb(var(--k-0f3326)));background-position:0 0}100%{background-image:linear-gradient(90deg,rgb(var(--k-0f3326)),#38d6ff,rgb(var(--k-a078ff)),rgb(var(--k-0f3326)));background-position:100% 0}}

/* workspaces: 12 s loop. A strip of workspace tabs; the cursor clicks Macro, then Liquidations, then back to Scalping, and the three windows below
   slide/scale into that workspace's own arrangement. Default (no .is-play / reduced motion) = the end frame: Scalping active, its layout, no cursor. */
.hf-dx-wsx{position:absolute;inset:0;background:radial-gradient(rgba(var(--tw),.05) 1px,transparent 1px) 0 0/14px 14px,rgb(var(--k-08090d))}
.hf-dx-wsx .bar{position:absolute;left:0;right:0;top:0;height:17%;background:rgba(var(--k-050609),.7);border-bottom:1px solid rgba(var(--tw),.08)}
.hf-dx-wsx .t,.hf-dx-wsx .sel,.hf-dx-wsx .add{position:absolute;top:3.5%;height:10.5%;box-sizing:border-box;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:5px;font:600 10px/1 var(--font);white-space:nowrap}
.hf-dx-wsx .t{width:26%;color:rgb(var(--kt-dfe3ea));opacity:.55}
.hf-dx-wsx .t i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--c)}
.hf-dx-wsx .t0{left:3%;opacity:1}.hf-dx-wsx .t1{left:31%}.hf-dx-wsx .t2{left:59%}
.hf-dx-wsx .sel{left:3%;width:26%;z-index:0;background:rgba(61,242,154,.12);border:1px solid rgba(61,242,154,.5)}
.hf-dx-wsx .t{z-index:1}
.hf-dx-wsx .add{left:87%;width:10%;color:var(--text-3);border:1px dashed rgba(var(--tw),.22);font-size:12px}
.hf-dx-wsx .hf-ws{position:absolute;inset:0;opacity:0}
.hf-dx-wsx .hf-ws.s0{opacity:1}
.hf-dx-wsx .w{left:0;top:0;width:40%;height:38%;transform-origin:0 0}
.hf-dx-wsx .s0 .wa{transform:translate(7.5%,52.63%) scale(1.15)}.hf-dx-wsx .s0 .wb{transform:translate(130%,52.63%) scale(.95)}.hf-dx-wsx .s0 .wc{transform:translate(130%,157.89%) scale(.95)}
.hf-dx-wsx .s1 .wa{transform:translate(7.5%,52.63%) scale(1.2)}.hf-dx-wsx .s1 .wb{transform:translate(140%,57.89%) scale(.8)}.hf-dx-wsx .s1 .wc{transform:translate(140%,152.63%) scale(.8)}
.hf-dx-wsx .s2 .wa{transform:translate(7.5%,63.16%) scale(.78)}.hf-dx-wsx .s2 .wb{transform:translate(86.25%,126.32%) scale(.78)}.hf-dx-wsx .s2 .wc{transform:translate(165%,63.16%) scale(.78)}
.hf-dx-wsx .hf-cur{display:none}
.hf-demo.is-play .hf-dx-wsx .hf-cur{display:block;animation:hf-wscur 12s cubic-bezier(.2,.7,.2,1) infinite}
.hf-demo.is-play .hf-dx-wsx .sel{animation:hf-wssel 12s cubic-bezier(.2,.7,.2,1) infinite}
.hf-demo.is-play .hf-dx-wsx .t0{animation:hf-wst0 12s linear infinite}
.hf-demo.is-play .hf-dx-wsx .t1{animation:hf-wst1 12s linear infinite}
.hf-demo.is-play .hf-dx-wsx .t2{animation:hf-wst2 12s linear infinite}
.hf-demo.is-play .hf-dx-wsx .s0{animation:hf-wss0 12s cubic-bezier(.2,.7,.2,1) infinite}
.hf-demo.is-play .hf-dx-wsx .s1{animation:hf-wss1 12s cubic-bezier(.2,.7,.2,1) infinite}
.hf-demo.is-play .hf-dx-wsx .s2{animation:hf-wss2 12s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes hf-wscur{0%{left:60%;top:72%;transform:scale(1);opacity:0}5%{opacity:1}12%{left:44%;top:9%;transform:scale(1)}14%{left:44%;top:9%;transform:scale(.8)}16%{left:44%;top:9%;transform:scale(1)}38%{left:48%;top:30%;transform:scale(1)}43%{left:72%;top:9%;transform:scale(1)}45%{left:72%;top:9%;transform:scale(.8)}47%{left:72%;top:9%;transform:scale(1)}62%{left:66%;top:40%;transform:scale(1)}69%{left:16%;top:9%;transform:scale(1)}71%{left:16%;top:9%;transform:scale(.8)}73%{left:16%;top:9%;transform:scale(1);opacity:1}82%{left:30%;top:46%;opacity:0}100%{left:60%;top:72%;opacity:0}}
@keyframes hf-wssel{0%,14%{transform:translateX(0)}22%,44%{transform:translateX(107.7%)}52%,71%{transform:translateX(215.4%)}79%,100%{transform:translateX(0)}}
@keyframes hf-wst0{0%,14%{opacity:1}22%,71%{opacity:.55}79%,100%{opacity:1}}
@keyframes hf-wst1{0%,14%{opacity:.55}22%,44%{opacity:1}52%,100%{opacity:.55}}
@keyframes hf-wst2{0%,44%{opacity:.55}52%,71%{opacity:1}79%,100%{opacity:.55}}
@keyframes hf-wss0{0%,14%{opacity:1;transform:none}20%{opacity:0;transform:translateX(-14px)}71%{opacity:0;transform:translateX(14px)}79%,100%{opacity:1;transform:none}}
@keyframes hf-wss1{0%,15%{opacity:0;transform:translateX(14px)}22%,44%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes hf-wss2{0%,45%{opacity:0;transform:translateX(14px)}52%,71%{opacity:1;transform:none}77%,100%{opacity:0;transform:translateX(-14px)}}

/* alerts: one alert slides in at a time; the channel it is sent to lights up */
.hf-demo-alerts .hf-demo-stage{aspect-ratio:auto;min-height:220px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:16px;background:radial-gradient(80% 100% at 0% 0%,rgba(var(--k-a078ff),.12),transparent 60%),rgb(var(--k-07080b))}
.hf-dx-al{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:8px;align-content:start}
.hf-dx-al li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:rgba(var(--k-0a0c11),.9);border:1px solid rgba(var(--tw),.1);font-size:14px;color:var(--text)}
.hf-dx-al li:first-child{border-color:rgba(61,242,154,.5);box-shadow:0 0 30px -10px rgba(61,242,154,.6)}
.hf-al-b{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:rgba(61,242,154,.12);color:var(--accent)}
.hf-al-ch{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);padding:5px 7px;border-radius:4px;border:1px solid rgba(var(--tw),.12)}
.hf-dx-ch{display:flex;flex-direction:column;gap:8px;min-width:96px}
.hf-dx-chl{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.hf-dx-ch ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hf-dx-ch li{padding:7px 10px;border-radius:7px;border:1px solid rgba(var(--tw),.1);background:rgba(var(--tw),.03);font-size:13px;color:var(--text-2)}
.hf-dx-ch li.on{color:var(--text);border-color:rgba(61,242,154,.35)}
.hf-demo.is-play .hf-dx-al li{animation:hf-alin calc(var(--k) * 2.6s) var(--ease) infinite;animation-delay:calc(var(--i) * 2.6s - var(--k) * 2.6s)}
.hf-demo.is-play .hf-dx-ch li.on{animation:hf-chon calc(var(--k) * 2.6s) linear infinite;animation-delay:calc(var(--i) * 2.6s - var(--k) * 2.6s)}
@keyframes hf-alin{0%{opacity:.35;transform:translateX(0);border-color:rgba(var(--tw),.1);box-shadow:none}4%{opacity:1;transform:translateX(-6px);border-color:rgba(61,242,154,.6);box-shadow:0 0 30px -8px rgba(61,242,154,.7)}22%{opacity:1;transform:translateX(0);border-color:rgba(61,242,154,.4);box-shadow:0 0 20px -10px rgba(61,242,154,.5)}26%,100%{opacity:.35;transform:none;border-color:rgba(var(--tw),.1);box-shadow:none}}
@keyframes hf-chon{0%,1%{background:rgba(var(--tw),.03);color:var(--text-2)}5%,22%{background:rgba(61,242,154,.18);color:var(--text);box-shadow:0 0 16px -4px rgba(61,242,154,.6)}26%,100%{background:rgba(var(--tw),.03);color:var(--text-2);box-shadow:none}}

/* share: 8 s loop. cursor clicks the share icon, a link chip travels to the second workspace, the tab appears there, both copies stay live.
   Default (no .is-play / reduced motion) = the end frame: both tabs visible and live-marked, no chip, no cursor. */
.hf-dx-share{background:radial-gradient(rgba(var(--tw),.06) 1px,transparent 1px) 0 0/14px 14px,rgb(var(--k-07080b))}
.hf-dx-share .pn{position:absolute;top:5%;bottom:5%;width:45%;border-radius:8px;border:1px solid rgba(var(--tw),.1);background:rgba(var(--tw),.02)}
.hf-dx-share .pa{left:3%}.hf-dx-share .pb{right:3%;border-color:rgba(61,242,154,.5)}
.hf-dx-share .av{position:absolute;left:6px;top:-5px;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#b99bff,#6d4bff);box-shadow:0 0 0 2px rgb(var(--k-07080b))}
.hf-dx-share .pb .av{background:linear-gradient(135deg,#5ee7ff,#2f7bff)}
.hf-dx-share .slot{position:absolute;left:8%;right:8%;top:18%;bottom:10%;border-radius:5px;border:1px dashed rgba(var(--tw),.2);opacity:0}
.hf-dx-share .sh1{left:5.5%;top:14%;width:40%;height:70%}
.hf-dx-share .sh2{right:5.5%;top:14%;width:40%;height:70%;box-shadow:0 0 0 1px rgba(61,242,154,.45),0 0 26px -10px rgba(61,242,154,.6)}
.hf-dx-share .hf-cur{display:none}
.hf-sh-i{display:block;width:11px;height:11px;flex:none;color:var(--accent);border-radius:3px}
.hf-lvd{width:6px!important;height:6px!important;border-radius:50%!important;background:var(--accent)!important}
.hf-lv{position:absolute;left:6px;right:6px;bottom:4px;height:34%;display:flex;align-items:flex-end;justify-content:flex-end;gap:3px;pointer-events:none}
.hf-lv i{width:3px;height:100%;border-radius:1px;background:rgba(61,242,154,.85);transform:scaleY(.5);transform-origin:50% 100%}
.hf-lv i:nth-child(2){transform:scaleY(.8);background:rgba(255,92,120,.85)}.hf-lv i:nth-child(3){transform:scaleY(.35)}.hf-lv i:nth-child(4){transform:scaleY(.65);background:rgba(255,92,120,.85)}.hf-lv i:nth-child(5){transform:scaleY(.9)}.hf-lv i:nth-child(6){transform:scaleY(.55)}
.hf-sh-trk{position:absolute;left:34%;width:36%;top:36%;height:22px;display:none}
.hf-sh-chip{position:absolute;left:0;top:0;display:grid;place-items:center;width:22px;height:22px;padding:4px;border-radius:50%;background:rgba(61,242,154,.18);border:1px solid rgba(61,242,154,.6);color:var(--accent);box-shadow:0 0 14px -2px rgba(61,242,154,.7)}
.hf-demo.is-play.hf-demo-share .hf-cur{display:block;animation:hf-shcur 12s var(--ease,cubic-bezier(.2,.7,.2,1)) infinite}
.hf-demo.is-play .hf-sh-trk{display:block;animation:hf-shtrk 12s var(--ease,cubic-bezier(.2,.7,.2,1)) infinite}
.hf-demo.is-play .hf-dx-share .sh1 .hf-sh-i{animation:hf-shi 12s linear infinite}
.hf-demo.is-play .hf-dx-share .sh1{animation:hf-sh1 12s var(--ease,cubic-bezier(.2,.7,.2,1)) infinite}
.hf-demo.is-play .hf-dx-share .sh2{animation:hf-sh2 12s var(--ease,cubic-bezier(.2,.7,.2,1)) infinite}
.hf-demo.is-play .hf-dx-share .slot{animation:hf-shslot 12s linear infinite}
.hf-demo.is-play .hf-dx-share .pb{animation:hf-shpb 12s linear infinite}
.hf-demo.is-play .hf-lv i{animation:hf-lv 1.1s ease-in-out infinite}
.hf-demo.is-play .hf-lv i:nth-child(2){animation-delay:-.2s}.hf-demo.is-play .hf-lv i:nth-child(3){animation-delay:-.45s}.hf-demo.is-play .hf-lv i:nth-child(4){animation-delay:-.7s}.hf-demo.is-play .hf-lv i:nth-child(5){animation-delay:-.1s}.hf-demo.is-play .hf-lv i:nth-child(6){animation-delay:-.55s}
.hf-demo.is-play .hf-lvd{animation:hf-lvd 1.1s ease-in-out infinite}
@keyframes hf-lv{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes hf-lvd{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@keyframes hf-shcur{0%{left:52%;top:78%;transform:scale(1);opacity:0}6%{opacity:1}16%{left:40.5%;top:19%;transform:scale(1)}20%{left:40.5%;top:19%;transform:scale(.8)}24%{left:40.5%;top:19%;transform:scale(1)}32%{left:46%;top:58%;opacity:1}40%,100%{left:50%;top:80%;opacity:0}}
@keyframes hf-shi{0%,17%{transform:scale(1);box-shadow:none;background:none}20%{transform:scale(1.5);box-shadow:0 0 0 3px rgba(61,242,154,.35);background:rgba(61,242,154,.25)}28%,100%{transform:scale(1);box-shadow:none;background:none}}
@keyframes hf-sh1{0%,17%{box-shadow:0 14px 30px -14px rgba(var(--ts),var(--sa))}22%,30%{box-shadow:0 0 0 1px rgba(61,242,154,.6),0 0 24px -8px rgba(61,242,154,.7)}40%,100%{box-shadow:0 14px 30px -14px rgba(var(--ts),var(--sa))}}
@keyframes hf-shtrk{0%,21%{opacity:0;transform:translateX(0) scale(.5)}24%{opacity:1;transform:translateX(0) scale(1)}46%{opacity:1;transform:translateX(100%) scale(1)}52%,100%{opacity:0;transform:translateX(100%) scale(.4)}}
@keyframes hf-shslot{0%,44%{opacity:0}48%,52%{opacity:1}56%,100%{opacity:0}}
@keyframes hf-shpb{0%,44%{border-color:rgba(var(--tw),.1)}50%,100%{border-color:rgba(61,242,154,.5)}}
@keyframes hf-sh2{0%,48%{opacity:0;transform:scale(.9) translateY(6px)}56%{opacity:1;transform:none}92%{opacity:1;transform:none}98%,100%{opacity:0;transform:scale(.96)}}
.hf-ov-body .hf-demo-share{padding:0}

/* chat: grey bars only */
.hf-chat-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s6);align-items:center}
.hf-chat-h3{margin:12px 0 0;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em}
.hf-chat-copy .fineprint{margin-top:var(--s2);font-size:13px;color:var(--text-3)}
.hf-chat-mock{padding:0}
.hf-chat-win{position:relative;display:flex;flex-direction:column;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:rgba(var(--k-08090d),.9);border:1px solid rgba(var(--tw),.1);box-shadow:0 40px 90px -40px rgba(var(--ts),var(--sa)),0 0 100px -40px rgba(var(--vio),.6)}
.hf-chat-top{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid rgba(var(--tw),.06)}
.hf-chat-top i{width:9px;height:9px;border-radius:50%;background:rgba(var(--tw),.14)}
.hf-chat-msgs{list-style:none;margin:0;padding:16px;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;overflow:hidden}
.hf-chat-msgs li{display:flex;flex-direction:column;gap:6px;max-width:72%;padding:12px 14px;border-radius:14px 14px 14px 4px;background:rgba(var(--tw),.06);align-self:flex-start}
.hf-chat-msgs li.out{align-self:flex-end;border-radius:14px 14px 4px 14px;background:rgba(61,242,154,.14)}
.hf-chat-msgs li span{display:block;height:8px;width:calc(var(--w) * 2.6px + 40px);max-width:100%;border-radius:4px;background:rgba(var(--tw),.22)}
.hf-chat-msgs li span.l2{width:calc(var(--w) * 1.4px + 20px)}
.hf-chat-msgs li.out span{background:rgba(61,242,154,.45)}
.hf-chat-msgs li.typing{flex-direction:row;gap:5px;padding:12px 14px}
.hf-chat-msgs li.typing b{width:7px;height:7px;border-radius:50%;background:rgba(var(--tw),.4)}
.hf-chat-in{display:flex;align-items:center;gap:10px;margin:0 14px 14px;padding:10px 12px;border-radius:10px;border:1px solid rgba(var(--tw),.1)}
.hf-chat-in span{flex:1;height:8px;border-radius:4px;background:rgba(var(--tw),.1)}
.hf-chat-in i{width:26px;height:26px;border-radius:7px;background:rgba(61,242,154,.3)}
.hf-demo.is-play .hf-chat-msgs li{animation:hf-msg 14s var(--ease) infinite;animation-delay:calc(var(--i) * 1.5s - 14s)}
.hf-demo.is-play .hf-chat-msgs li.typing b{animation:hf-type 1s ease-in-out infinite}
.hf-demo.is-play .hf-chat-msgs li.typing b:nth-child(2){animation-delay:.15s}.hf-demo.is-play .hf-chat-msgs li.typing b:nth-child(3){animation-delay:.3s}
@keyframes hf-msg{0%{opacity:0;transform:translateY(12px) scale(.96);max-height:0;padding-block:0;margin-top:-10px}4%{opacity:1;transform:none;max-height:80px;padding-block:12px;margin-top:0}92%{opacity:1;max-height:80px}100%{opacity:0;max-height:80px}}
@keyframes hf-type{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-3px)}}

/* community gallery: data-driven cards; demo cards compose our own tab screenshots */
.hf-gal-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hf-gw figure{margin:0}
.hf-gw-m{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:rgb(var(--k-07080b));border:1px solid rgba(var(--cat),.25);transition:border-color .3s,box-shadow .35s,transform .45s var(--ease)}
.hf-gw-m>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0}
.hf-gw-c{position:absolute;inset:0;background:radial-gradient(70% 90% at 0% 0%,rgba(var(--cat),.18),transparent 60%),radial-gradient(rgba(var(--tw),.05) 1px,transparent 1px) 0 0/12px 12px,rgb(var(--k-08090d))}
.hf-gw-t{position:absolute;display:flex;flex-direction:column;border-radius:5px;overflow:hidden;background:rgb(var(--k-0b0d12));border:1px solid rgba(var(--tw),.12);box-shadow:0 10px 24px -12px rgba(var(--ts),var(--sa))}
.hf-gw-h{display:flex;align-items:center;height:15px;padding:0 6px;background:linear-gradient(90deg,rgba(var(--cat),.32),rgba(var(--cat),.08));flex:none}
.hf-gw-h b{font:600 8px/1 var(--font);color:rgb(var(--kt-e8ebf0));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-gw-t img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:0 0;filter:saturate(.9) brightness(.85)}
.n3 .t0{left:4%;top:6%;width:56%;height:88%}.n3 .t1{left:63%;top:6%;width:33%;height:42%}.n3 .t2{left:63%;top:52%;width:33%;height:42%}
.n2 .t0{left:4%;top:6%;width:56%;height:88%}.n2 .t1{left:63%;top:6%;width:33%;height:88%}
.n1 .t0{left:6%;top:8%;width:88%;height:84%}
.hf-gw figcaption{margin-top:10px;font-size:14px;line-height:1.4;color:var(--text-2)}
.hf-gw:hover .hf-gw-m{border-color:rgba(var(--cat),.6);box-shadow:0 0 50px -18px rgba(var(--cat),.7);transform:translateY(-3px)}
.hf-gal-cta{margin:0;color:var(--text-2);font-size:15px}
.hf-gal-fine{margin-top:var(--s3);font-size:13px;color:var(--text-3)}

@media (max-width:1099px){.hf-gal-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899px){
  .hf-chat-grid{grid-template-columns:1fr;gap:var(--s4)}
  .hf-demo-pair{grid-template-columns:1fr}
  .hf-chat-win,.hf-demo-stage{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (max-width:640px){
  .hf-gal-list{grid-template-columns:1fr}
  .hf-demo-alerts .hf-demo-stage{grid-template-columns:1fr}
  .hf-dx-ch ul{display:flex;flex-wrap:wrap}
  .hf-dx-al li{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .hf-demo *,.hf-demo.is-play *{animation:none!important;transition:none!important}
  .hf-gw-m{transition:none}.hf-gw:hover .hf-gw-m{transform:none}
  .hf-dx-wsx .hf-cur{display:none!important}
}

/* public floating "Tabs view" switch, bottom-left; synced with the in-section View toggle */
.hf-tvp{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:40;display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(var(--k-08090d),.92);border:1px solid var(--hf-line);box-shadow:0 10px 30px -10px rgba(var(--ts),var(--sa));transition:opacity .25s,bottom .25s}
.hf-tvp-k{padding:0 8px 0 10px;font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--text-2)}
.hf-tvp button{min-width:34px;padding:0 10px;height:32px;white-space:nowrap;border:0;border-radius:999px;background:transparent;color:var(--text-2);font:600 12px/1 var(--mono);cursor:pointer}
.hf-tvp button:hover{color:var(--text)}
.hf-tvp button[aria-pressed=true]{background:rgba(var(--vio),.3);color:var(--text)}
.hf-tvp button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:899px){body.f-sticky-on .hf-tvp{bottom:calc(76px + env(safe-area-inset-bottom))}}
.hf-tvp.away{opacity:0;pointer-events:none}
@media (min-width:900px) and (max-height:720px){html.hf-pin .hf-ta-side{max-height:calc(100vh - var(--header) - 24px - 96px)}html.hf-pin .hf-ta-pin{padding-bottom:84px}}


/* =====================================================================================================================
   ROUND 2 (2026-10-09)
   ===================================================================================================================== */
/* 1) tour lightbox: grows out of the hero screen (FLIP done in hf.js), blurred backdrop, one close button */
.hf-lb{position:fixed;inset:0;z-index:200;opacity:0;transition:opacity .35s}
.hf-lb.is-open{opacity:1}.hf-lb.is-closing{opacity:0;transition-duration:.5s}
.hf-lb-bg{position:absolute;inset:0;background:rgba(var(--k-030408),.72);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
.hf-lb-frame{position:absolute;border-radius:14px;overflow:hidden;background:rgb(var(--k-05060a));box-shadow:0 0 0 1px rgba(var(--tw),.12),0 40px 120px -20px rgba(var(--ts),calc(.9*var(--sa))),0 0 90px -20px rgba(61,242,154,.35)}
.hf-lb-frame img,.hf-lb-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hf-lb-frame video{opacity:0;transition:opacity .4s}.hf-lb-frame.is-live video{opacity:1}
.hf-lb-cap{position:absolute;margin:0;padding:6px 2px 0;font-size:clamp(15px,1.5vw,20px);font-weight:600;color:rgb(var(--tw));text-shadow:0 1px 14px rgba(var(--ts),calc(.9*var(--sa)));pointer-events:none}
.hf-lb-x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(var(--tw),.3);background:rgba(var(--k-080a0f),.78);color:rgb(var(--tw));cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,transform .2s}
.hf-lb-x:hover{background:rgba(236,0,140,.55);transform:rotate(90deg)}
.hf-lb-x:focus-visible{outline:3px solid rgb(var(--tw));outline-offset:3px}
html.hf-lb-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.hf-lb,.hf-lb.is-closing{transition:opacity .2s}.hf-lb-x:hover{transform:none}}

/* 2) "See the tabs" hero button + landing effect on the heading it scrolls to */
.hf-tabs-btn{gap:10px}.hf-tabs-btn svg{color:var(--accent);transition:transform .25s var(--ease)}.hf-tabs-btn:hover svg{transform:translateY(3px)}
@keyframes hf-arrive{0%{text-shadow:0 0 0 rgba(61,242,154,0);transform:translateY(10px)}40%{text-shadow:0 0 34px rgba(61,242,154,.75),0 0 60px rgba(236,0,140,.4)}100%{text-shadow:0 0 0 rgba(61,242,154,0);transform:none}}
.hf-arrive{animation:hf-arrive 1.3s var(--ease) both}
#tabs h2:focus{outline:none}

/* 3) proof numbers: count one after another; the label fades in after its number; the "+" glows; later one number gently floats */
.hf-fig dd{white-space:nowrap}
.hf-pre,.hf-suf{-webkit-text-fill-color:rgb(var(--tw));color:rgb(var(--tw))}
.hf-suf{color:rgb(var(--kt-7ff7c0));-webkit-text-fill-color:rgb(var(--kt-7ff7c0))}
.hf-count-pre .hf-fig dt{opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s var(--ease)}
.hf-count-pre .hf-fig.is-shown dt{opacity:1;transform:none}
.hf-count-pre .hf-fig dd{opacity:.35;transition:opacity .4s}
.hf-count-pre .hf-fig.is-counting dd,.hf-count-pre .hf-fig.is-shown dd{opacity:1}
@keyframes hf-plus{0%{text-shadow:none}35%{text-shadow:0 0 12px rgba(61,242,154,.95),0 0 26px rgba(236,0,140,.65)}100%{text-shadow:0 0 8px rgba(61,242,154,.55)}}
.hf-fig.is-done .hf-suf,.hf-fig.is-done .hf-pre{animation:hf-plus 1.1s ease-out both}
@keyframes hf-bump{0%,100%{transform:none}50%{transform:translateY(-6px) scale(1.07)}}
.hf-fig.is-bump dd{animation:hf-bump 1.8s ease-in-out;transform-origin:left bottom}

/* 6) scroll-linked dimming of what is above the viewport centre (fixed overlay, --hf-dim set from hf.js) */
.hf-dim{position:fixed;left:0;right:0;top:0;height:50vh;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(3,4,7,var(--hf-dim,0)),rgba(var(--k-030407),0))}
@media (max-width:899px){.hf-dim{display:none}}

/* 5) Skip next to Next */
.hf-ta-skipb{gap:8px}

/* 8) tabs showcase: per-category background panel that slides in and shifts colour (same as the F bottom showcase; --tr/--tg/--tb from hf.js) */
.hf-ta-pin,.hf-tb{position:relative;isolation:isolate}
.hf-ta-pin::before,.hf-tb::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
html.hf-pin .hf-ta-pin{position:sticky}
@media (min-width:900px){
  .hf-ta.hf-anim .hf-ta-pin::before,.hf-tb.hf-anim::before{transform:translateX(104%);opacity:0}
  .hf-ta.hf-anim.is-in .hf-ta-pin::before,.hf-tb.hf-anim.is-in::before{transform:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){.hf-ta.hf-anim .hf-ta-pin::before,.hf-tb.hf-anim::before{transform:none;opacity:1;transition:none}}

/* 7) bottom of the homepage: follow strip + footer */
.hf-footer{overflow:hidden;background:linear-gradient(180deg,rgba(var(--k-050507),.9),rgba(var(--k-030408),.98));border-top:0}
.hf-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#3df29a 25%,rgb(var(--k-9d8cf8)) 55%,#ec008c 80%,transparent);opacity:.85}
.hf-footer::after{content:"";position:absolute;left:50%;top:-180px;width:min(900px,90vw);height:260px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(61,242,154,.14),rgba(236,0,140,.08) 55%,transparent);filter:blur(10px)}
.hf-foot-bg{position:absolute;left:0;right:0;bottom:-.18em;z-index:0;text-align:center;font:700 clamp(80px,17vw,300px)/1 var(--d-pixel,var(--mono));letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;pointer-events:none;user-select:none;
  color:transparent;-webkit-text-stroke:1px rgba(var(--tw),.06)}
.hf-foot-in{position:relative;z-index:1}
.hf-foot-top{align-items:flex-start;padding-bottom:var(--s5);border-bottom:1px solid rgba(var(--tw),.07)}
.hf-follow{padding:18px 20px 16px;border-radius:16px;border:1px solid rgba(var(--tw),.09);background:linear-gradient(135deg,rgba(61,242,154,.07),rgba(236,0,140,.06));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hf-foot-nav{padding-top:var(--s5)}
.hf-foot-col{padding-left:14px;border-left:1px solid rgba(var(--tw),.07)}
.hf-foot-h{color:rgb(var(--kt-9aa1ad))}
.hf-foot-nav a{display:inline-block;padding:3px 0;position:relative;transition:color .2s,transform .2s var(--ease)}
.hf-foot-nav a:hover,.hf-foot-nav a:focus-visible{transform:translateX(3px);color:rgb(var(--tw))}
.hf-foot-nav a:focus-visible{outline:2px solid rgb(var(--tw));outline-offset:3px;border-radius:3px}
.hf-foot-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:var(--s6);padding-top:18px;border-top:1px solid rgba(var(--tw),.07)}
.hf-footer .hf-foot-bar .copyright{margin:0;color:rgb(var(--kt-9aa1ad))}
.hf-totop{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(var(--tw),.18);color:rgb(var(--tw));background:rgba(var(--tw),.05);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.hf-totop:hover{transform:translateY(-3px);border-color:rgba(var(--k-ff78c6),.6);box-shadow:0 10px 26px -10px rgba(236,0,140,.6)}
.hf-totop:focus-visible{outline:3px solid rgb(var(--tw));outline-offset:3px}
@media (max-width:899px){.hf-foot-bg{font-size:22vw}.hf-foot-col{padding-left:10px}}
@media (prefers-reduced-motion:reduce){.hf-foot-nav a,.hf-totop{transition:none}.hf-foot-nav a:hover,.hf-totop:hover{transform:none}.hf-arrive{animation:none}.hf-fig.is-bump dd,.hf-fig.is-done .hf-suf{animation:none}}

.hf-ta,.hf-tb{overflow-x:clip}

.hf-pre{white-space:pre}
.hf-foot-top{margin-bottom:0}
.hf-foot-nav{padding-top:var(--s4)}

/* ROUND 3: proof numbers sit directly on the scene (no box); with JS + motion OK (html.hf-cnt, set in <head>) a number and its label are invisible
   (opacity only: space is reserved, no layout shift) until their turn in the sequence; no JS / reduced motion = everything visible and static. */
.hf-proof-row{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;gap:var(--s3)}
.hf-fig{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:14px 8px 14px 0}
.hf-fig dd,.hf-fig dt{text-shadow:0 2px 24px rgba(var(--ts),calc(.7*var(--sa)))}
html.hf-cnt .hf-proof-row:not(.hf-count-done) .hf-fig dd,html.hf-cnt .hf-proof-row:not(.hf-count-done) .hf-fig dt{opacity:0}
html.hf-cnt .hf-proof-row:not(.hf-count-done) .hf-fig.is-counting dd,html.hf-cnt .hf-proof-row:not(.hf-count-done) .hf-fig.is-shown dd{opacity:1}
html.hf-cnt .hf-proof-row:not(.hf-count-done) .hf-fig.is-shown dt{opacity:1}
html.hf-cnt .hf-fig dt,html.hf-cnt .hf-fig dd{transition:opacity .5s,transform .5s var(--ease)}
@media (max-width:899px){.hf-fig{padding:10px 6px 10px 0}}

/* =====================================================================================================================
   ROUND 4: hero facts (keyword line + compact numbers under the sign-up line), exchange marquee band, tabs heading reveal
   ===================================================================================================================== */
.hf-facts{margin-top:var(--s3);max-width:34rem}
.hf-facts .hf-proof-line{margin:0 0 12px;font:500 12.5px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:rgb(var(--kt-b4bac5));text-align:left}
.hf-facts .hf-proof-row{gap:6px 22px;grid-template-columns:repeat(var(--n),auto);justify-content:start}
.hf-facts .hf-fig{padding:0;gap:4px}
.hf-facts .hf-fig dd{font-size:clamp(26px,2.3vw,34px)}
.hf-facts .hf-fig dt{font-size:13.5px;line-height:1.35;max-width:15ch;color:rgb(var(--kt-c3c8d0));text-shadow:0 1px 12px rgba(var(--ts),calc(.85*var(--sa)))}
@media (max-width:899px){.hf-facts{max-width:none}.hf-facts .hf-proof-row{gap:6px 16px}.hf-facts .hf-fig dt{max-width:12ch}}
/* the old proof section is now only a spacer (or the marquee band): keep its scroll length so the scene blend still happens */
.hf-proof{padding:0;min-height:10vh}
.hf-mq-band{min-height:0;padding:var(--s5) 0 var(--s6)}
.hf-mq{position:relative;overflow:hidden;display:flex;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hf-mq-track{--mq-slot:clamp(128px,9vw,184px);flex:none;display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none;animation:hf-mq 70s linear infinite;min-width:100%;justify-content:flex-start}
.hf-mq-track li{flex:none;display:grid;place-items:center;width:var(--mq-slot);height:40px}
.hf-mq-track img{display:block;height:auto;max-height:32px;width:auto;max-width:72%;object-fit:contain;opacity:.92;transition:opacity .3s,transform .3s var(--ease)}
.hf-mq-track li:hover img{opacity:1;transform:scale(1.06)}
.hf-mq:hover .hf-mq-track{animation-play-state:paused}
@keyframes hf-mq{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.hf-mq{-webkit-mask-image:none;mask-image:none;flex-wrap:wrap}.hf-mq-track{animation:none;flex-wrap:wrap;justify-content:center;row-gap:10px}.hf-mq-track[aria-hidden="true"]{display:none}}
/* the tabs heading + intro appear only once the section is scrolled to (JS adds .is-in; content stays in the HTML; no JS / reduced motion = visible) */
html.hf-cnt .hf-tabs-top .hf-head:not(.is-in){opacity:0;transform:translateY(22px);animation:hf-show 0s 40s forwards}
html.hf-cnt .hf-tabs-top .hf-head{transition:opacity .8s var(--ease),transform .9s var(--ease)}
html.hf-cnt .hf-tabs-top .hf-head.is-in{opacity:1;transform:none}
@keyframes hf-show{to{opacity:1;transform:none}}

/* the keyword line is already shown once (hero reassurance); the proof-strip line stays in the HTML for crawlers / screen readers only */
.hf-facts .hf-proof-line{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* =====================================================================================================================
   ROUND 4: community workspaces gallery with REAL screenshots: wider block, hero-size first card, zoom on hover
   ===================================================================================================================== */
.hf-gal .container{max-width:min(1500px,94vw)}
.hf-gal-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.hf-gx{list-style:none;min-width:0}
.hf-gx-big{grid-column:1/-1}
.hf-gx figure{margin:0;display:flex;flex-direction:column;gap:12px}
.hf-gx-m{position:relative;overflow:hidden;border-radius:clamp(10px,1.2vw,18px);border:1px solid rgba(var(--tw),.12);background:rgb(var(--k-05060a));aspect-ratio:2000/897;
  box-shadow:0 30px 80px -40px rgba(var(--ts),calc(.95*var(--sa))),0 0 0 1px rgba(var(--tw),.03) inset;transition:transform .5s var(--ease),border-color .3s,box-shadow .4s}
.hf-gx-m img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.hf-gx-m::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 60%,rgba(var(--k-030408),.55));opacity:.8;transition:opacity .4s}
.hf-gx:hover .hf-gx-m{transform:translateY(-4px);border-color:rgba(61,242,154,.55);box-shadow:0 40px 90px -40px rgba(var(--ts),calc(.95*var(--sa))),0 0 60px -20px rgba(61,242,154,.4),0 0 0 1px rgba(236,0,140,.25)}
.hf-gx:hover .hf-gx-m img{transform:scale(1.045)}
.hf-gx figcaption{font:500 12.5px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:rgb(var(--kt-b4bac5));padding:0 4px}
.hf-gx-big figcaption{font-size:14px}
@media (max-width:1099px){.hf-gal-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){.hf-gal-list{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.hf-gx-m,.hf-gx-m img{transition:none}.hf-gx:hover .hf-gx-m,.hf-gx:hover .hf-gx-m img{transform:none}}

/* =====================================================================================================================
   ROUND 5: "Explore Live Workspaces" gallery = one large featured card + thumbnail strip (data: src/gallery.json, DEMO values while "sample": true)
   ===================================================================================================================== */
.hf-gal-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:var(--s5)}
.hf-gal-pill{margin:0;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1px solid rgba(61,242,154,.45);background:rgba(61,242,154,.1);color:rgb(var(--kt-7ff7c0));font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.hf-gal-pill i{width:7px;height:7px;border-radius:50%;background:#3df29a;box-shadow:0 0 10px #3df29a;animation:hf-pulse 2s ease-in-out infinite}
@keyframes hf-pulse{50%{opacity:.35}}
.hf-gal-head h2{margin:0;font-size:clamp(34px,5.2vw,68px);line-height:1.04;letter-spacing:-.04em;background:linear-gradient(90deg,rgb(var(--k-b99bff)) 0%,#8a6bff 38%,#3df29a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hf-gal-head .hf-sub{margin:0;max-width:46rem}
.hf-gal .container{max-width:min(1400px,94vw)}
.hf-gf{position:relative;aspect-ratio:2000/897;border-radius:clamp(12px,1.4vw,20px);overflow:hidden;border:1px solid rgba(var(--tw),.14);background:rgb(var(--k-05060a));
  box-shadow:0 40px 100px -50px rgba(var(--ts),calc(.95*var(--sa))),0 0 80px -34px rgba(61,242,154,.35)}
.hf-gf-item{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s .7s}
.hf-gf-item.is-on{opacity:1;visibility:visible;transition:opacity .7s var(--ease)}
.hf-gf-m,.hf-gf-m picture,.hf-gf-m img{display:block;width:100%;height:100%}
.hf-gf-m img{object-fit:cover;transform:scale(1.001);transition:transform 1.4s var(--ease)}
.hf-gf-item.is-on:hover .hf-gf-m img{transform:scale(1.035)}
.hf-gf-item::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(var(--k-030408),.92) 0%,rgba(var(--k-030408),.55) 34%,transparent 62%),linear-gradient(90deg,rgba(var(--k-030408),.55),transparent 48%)}
.hf-gf-ov{position:absolute;z-index:1;left:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:clamp(16px,2.6vw,38px);max-width:min(560px,80%)}
.hf-gf-name{margin:0;font-size:clamp(26px,3.6vw,52px);line-height:1;letter-spacing:-.03em;color:rgb(var(--tw));text-shadow:0 2px 24px rgba(var(--ts),calc(.7*var(--sa)))}
.hf-gf-sub{margin:0;font-size:clamp(13px,1.1vw,16px);color:rgb(var(--kt-d4d8df))}
.hf-gf-user{margin:6px 0 0;display:flex;align-items:center;gap:10px;font:600 14px/1 var(--font);color:rgb(var(--tw))}
.hf-av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font:700 11px/1 var(--mono);color:rgb(var(--tw));background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 0 1px rgba(var(--tw),.25) inset}
.hf-gf-meta,.hf-gf-stats{margin:0;display:flex;flex-wrap:wrap;gap:6px 16px;font:500 13px/1.3 var(--mono);color:rgb(var(--kt-c3c8d0))}
.hf-gf-meta span+span::before{content:"\00b7";margin-right:16px;opacity:.6}
.hf-gf-stats span{display:inline-flex;align-items:center;gap:6px;color:rgb(var(--kt-e3e6ec))}
.hf-gf-stats svg{opacity:.85}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;font-style:normal}
.hf-gf-link{margin-top:6px;display:inline-flex;align-items:center;font:600 14px/1 var(--font);color:rgb(var(--kt-3df29a));text-decoration:none;padding:6px 0}
.hf-gf-link:hover,.hf-gf-link:focus-visible{color:rgb(var(--kt-7ff7c0));text-decoration:underline;text-underline-offset:4px}
.hf-gf-link:focus-visible{outline:2px solid rgb(var(--tw));outline-offset:4px;border-radius:4px}
.hf-gt{list-style:none;margin:clamp(12px,1.4vw,20px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.hf-gt-b{display:flex;flex-direction:column;gap:8px;width:100%;padding:0;border:0;background:none;cursor:pointer;color:rgb(var(--kt-b4bac5));font:600 13px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;text-align:left}
.hf-gt-m{display:block;aspect-ratio:2000/897;overflow:hidden;border-radius:10px;border:2px solid rgba(var(--tw),.1);opacity:.62;transition:opacity .3s,border-color .3s,transform .35s var(--ease),box-shadow .3s}
.hf-gt-m picture,.hf-gt-m img{display:block;width:100%;height:100%;object-fit:cover}
.hf-gt-b:hover .hf-gt-m,.hf-gt-b:focus-visible .hf-gt-m{opacity:.95;transform:translateY(-3px)}
.hf-gt-b.is-on{color:rgb(var(--tw))}
.hf-gt-b.is-on .hf-gt-m{opacity:1;border-color:#3df29a;box-shadow:0 0 0 1px rgba(61,242,154,.5),0 16px 40px -18px rgba(61,242,154,.6)}
.hf-gt-b:focus-visible{outline:3px solid rgb(var(--tw));outline-offset:4px;border-radius:12px}
.hf-gal .hf-row{margin-top:var(--s5);justify-content:center}
@media (max-width:699px){
  .hf-gf{aspect-ratio:auto;overflow:visible;border:0;box-shadow:none;background:none}
  .hf-gf-item{position:relative;display:none;opacity:1;visibility:visible}
  .hf-gf-item.is-on{display:block}
  .hf-gf-m{aspect-ratio:2000/897;border-radius:12px;overflow:hidden;border:1px solid rgba(var(--tw),.14)}
  .hf-gf-item::after{display:none}
  .hf-gf-ov{position:static;max-width:none;padding:14px 2px 0}
  .hf-gt{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.hf-gf-item,.hf-gf-item.is-on,.hf-gf-m img,.hf-gt-m{transition:none}.hf-gal-pill i{animation:none}.hf-gf-item.is-on:hover .hf-gf-m img{transform:none}}

.hf-gal-head{margin-left:auto;margin-right:auto;max-width:60rem}

/* weak machines (html.t-low from d-boot): sections below the fold are not laid out / painted until near the viewport */
html.t-low .hf-ws-sec,html.t-low .hf-chat,html.t-low .hf-gal,html.t-low .hf-how{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* footer: the LED wordmark never runs over the copyright line */
.hf-footer .hf-foot-bar,.hf-footer .copyright{position:relative;z-index:6}
.hf-footer .copyright{text-shadow:0 0 10px rgba(var(--ts),var(--sa)),0 0 3px rgba(var(--ts),var(--sa));color:rgb(var(--kt-c3c8d0))}

/* exchange marquee: gentle depth for every logo (shadow + faint glow, no blur on the marks) and a white pill behind HTX */
.hf-mq-track img{filter:drop-shadow(0 2px 5px rgba(0,0,0,.6)) drop-shadow(0 0 9px rgba(255,255,255,.1))}
.hf-mq-track li.plate img{background:rgb(var(--tw));border-radius:10px;padding:5px 12px;max-width:62%;box-sizing:content-box;box-shadow:0 4px 14px -4px rgba(var(--ts),calc(.7*var(--sa))),0 0 14px rgba(var(--tw),.12)}
.hf-mq-track li.plate img{filter:none}
/* equal-width slots: every mark is centred in the same slot (even rhythm, identical at the loop seam); wide wordmarks are capped by width so visual weight stays balanced */

/* MOBILE PASS 2 (2026-10-10): touch targets >= 44px on touch screens / narrow windows. Desktop with a mouse is untouched. */
@media (pointer:coarse),(max-width:899px){
  .hf-ta-ctl .btn{min-height:44px}
  .hf-t a{display:inline-flex;align-items:center;min-height:44px}
  .hf-link,.hf-gf-link,.hf-tvp button{min-height:44px;display:inline-flex;align-items:center}
  .hf-foot-col a,.hf-follow li a{min-height:44px;display:inline-flex;align-items:center}
  .f-sticky .btn{min-height:44px}
  .hf-gal-pill,.hf-faq summary,details>summary{min-height:44px}
  .hf-foot-brand .logo{min-height:44px;display:inline-flex;align-items:center}
}
/* the LED wordmark is intentionally cropped at the sides; on touch / short landscape it must never widen the page */
.hf-footer{overflow-x:clip}
@media (max-width:1199px){.hf-gal-head::before{right:0}} /* the head veil reached 16% past the right edge and widened the page at 900-1000px (phones on their side) */
@media (pointer:coarse),(max-width:899px){.hf-tabs-panel a{min-height:44px;display:flex;align-items:center}}
@media (pointer:coarse),(max-width:899px){.hf-ta-rb{min-height:44px}}
/* phones on their side: the static Tami in the hero corner would sit on the headline (the hero is only ~300px tall there), so it is not shown */
@media (max-height:520px) and (orientation:landscape){html main>.layer.hero::before{display:none}}

/* ---- chat: animated Tami conversation (hf.js drives .hf-chat-msgs; static state = last two exchanges) */
.hf-chat-top{align-items:center}
.hf-chat-top em{margin-left:auto;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--kt-7ff7c0));font-style:normal}
.hf-chat-msgs{position:relative;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%);mask-image:linear-gradient(180deg,transparent 0,#000 14%)}
.hf-chat-msgs li{max-width:84%;display:block;font:400 14px/1.45 var(--font);color:rgb(var(--kt-e6e9ef));flex:none}
.hf-chat-msgs li p{margin:0;height:auto;width:auto;background:none;border-radius:0;display:block}
.hf-chat-msgs li.out{color:rgb(var(--kt-eafff4))}
.hf-chat-who{display:block;margin-bottom:4px;font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--kt-3df29a))}
.hf-chat-msgs li.typing{display:flex}
.hf-chat-txt{flex:1;height:auto!important;background:none!important;font:400 13.5px/1.2 var(--font);color:rgba(var(--tw),.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-chat-txt.has-text{color:rgb(var(--kt-e6e9ef))}
.hf-chat-txt.has-text::after{content:"";display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-.15em;background:#3df29a;animation:hf-caret 1s steps(1) infinite}
.hf-chat-msgs li.is-new{animation:hf-chat-in .35s var(--ease) both}
.hf-chat-msgs li.is-stream::after{content:"";display:inline-block;width:6px;height:12px;margin-left:2px;vertical-align:-1px;background:#3df29a;opacity:.8}
@keyframes hf-chat-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hf-caret{50%{opacity:0}}
@media (max-width:700px){.hf-chat-msgs{padding:12px}.hf-chat-msgs li{font-size:13px;max-width:92%}.hf-chat-win{aspect-ratio:auto;height:380px}}
@media (prefers-reduced-motion:reduce){.hf-chat-msgs li.is-new{animation:none}.hf-chat-txt.has-text::after{animation:none}}
.hf-chat-msgs li.typing b{animation:hf-type 1s ease-in-out infinite}
.hf-chat-msgs li.typing b:nth-child(2){animation-delay:.15s}.hf-chat-msgs li.typing b:nth-child(3){animation-delay:.3s}

/* =====================================================================================================================
   ROUND 5b: group chat (users + Tami), calmer interactive workspace tiles (3D tilt, press, demo dialog), readable gallery heading
   ===================================================================================================================== */
/* chat: avatars + names; Tami has a green ring and an AI badge */
.hf-chat-msgs li.msg{display:flex;flex-direction:row;align-items:flex-start;gap:9px;max-width:94%;padding:0;background:none;border-radius:0;align-self:flex-start}
.hf-chat-av{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font:700 12px/1 var(--mono);color:#0a0c10;background:linear-gradient(135deg,var(--a),var(--b))}
.hf-chat-av.ai{box-shadow:0 0 0 2px rgba(61,242,154,.55),0 0 14px rgba(61,242,154,.4)}
.hf-chat-b{min-width:0;padding:9px 12px 10px;border-radius:4px 14px 14px 14px;background:rgba(var(--tw),.07)}
.hf-chat-msgs li.tami .hf-chat-b{background:rgba(61,242,154,.1);box-shadow:inset 0 0 0 1px rgba(61,242,154,.32)}
.hf-chat-msgs li.msg .hf-chat-who{margin-bottom:5px;color:rgb(var(--kt-b4bac5))}
.hf-chat-msgs li.tami .hf-chat-who{color:rgb(var(--kt-7ff7c0))}
.hf-chat-who em{margin-left:7px;padding:2px 5px;border-radius:4px;background:rgba(61,242,154,.2);color:rgb(var(--kt-7ff7c0));font:700 9px/1 var(--mono);letter-spacing:.08em}
.hf-chat-msgs li.msg.typing .hf-chat-b{display:flex;align-items:center;gap:8px}
.hf-chat-nm{font:500 12px/1 var(--mono);color:rgb(var(--kt-aab1bd))}
.hf-chat-dots{display:inline-flex;gap:4px}
.hf-chat-dots i{width:6px;height:6px;border-radius:50%;background:rgba(var(--tw),.45);animation:hf-type 1s ease-in-out infinite}
.hf-chat-dots i:nth-child(2){animation-delay:.15s}.hf-chat-dots i:nth-child(3){animation-delay:.3s}
.hf-chat-top em b{color:rgb(var(--kt-7ff7c0))}
.hf-chat-top em{margin-left:auto;color:rgb(var(--kt-e6e9ef));text-transform:none;font-size:12px;letter-spacing:.02em}
.hf-chat-on{display:inline-flex;margin-left:10px}
.hf-chat-on i{display:grid;place-items:center;width:20px;height:20px;margin-left:-6px;border-radius:50%;border:2px solid rgb(var(--k-0b0d12));font:700 9px/1 var(--mono);font-style:normal;color:#0a0c10;background:linear-gradient(135deg,var(--a),var(--b))}
.hf-chat-on i:first-child{margin-left:0}
.hf-chat-on i.ai{box-shadow:0 0 0 1px rgba(61,242,154,.6)}
@media (max-width:700px){.hf-chat-win{height:430px}.hf-chat-msgs li.msg{max-width:100%}}
@media (prefers-reduced-motion:reduce){.hf-chat-dots i{animation:none}}

/* workspace tiles: calmer (less text, more air), alerts spans the freed row */
.hf-bento{gap:clamp(18px,2vw,30px);perspective:1600px}
.hf-b-alerts{grid-column:span 6}
.hf-b-tilt{display:flex;flex-direction:column;flex:1;min-height:0}
.hf-b .hf-demo{padding:clamp(18px,2vw,28px) clamp(18px,2vw,28px) 0}
.hf-b .hf-demo figcaption,.hf-b .fineprint{display:none}
.hf-b .hf-demo-pair{grid-template-columns:1fr}
.hf-b .hf-demo-pair .hf-demo+.hf-demo{display:none}
.hf-b-copy{padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px) clamp(22px,2.2vw,30px)}
.hf-b h3{font-size:clamp(18px,1.5vw,21px)}
.hf-b-copy p:not(.fineprint){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;color:rgb(var(--kt-aeb4be))}
.hf-b-open{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 14px 8px 12px;border-radius:999px;border:1px solid rgba(61,242,154,.4);background:rgba(61,242,154,.08);color:rgb(var(--kt-9ff9cf));font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s}
.hf-b-open:hover{background:rgba(61,242,154,.18);border-color:rgba(61,242,154,.7)}
.hf-b-open:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hf-b[data-tile]{cursor:pointer;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease),box-shadow .4s,border-color .3s;-webkit-tap-highlight-color:transparent}
.hf-b[data-tile]::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),rgba(var(--tw),.11),transparent 62%);opacity:0;transition:opacity .3s}
.hf-b.is-tilt{transition:transform .12s linear,box-shadow .4s,border-color .3s;will-change:transform;border-color:rgba(61,242,154,.35);box-shadow:0 36px 70px -34px rgba(var(--ts),var(--sa)),0 0 60px -30px rgba(var(--glow),.55)}
.hf-b.is-tilt::after{opacity:1}
.hf-b[data-tile]:active{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(.985)}
.hf-b[data-tile]:focus-within{border-color:rgba(61,242,154,.45)}
/* the card hover zoom on the old art stays off: the tile itself moves now */
.hf-b:hover .hf-b-art img{transform:none}
@media (pointer:coarse),(hover:none){.hf-b[data-tile]{transform:none!important}.hf-b[data-tile]:active{transform:scale(.985)!important}}
@media (max-width:899px){.hf-b-alerts{grid-column:span 2}.hf-bento{perspective:none}}
@media (max-width:640px){.hf-b-alerts{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.hf-b[data-tile],.hf-b.is-tilt,.hf-b[data-tile]:active{transform:none!important;transition:none}.hf-b[data-tile]::after{display:none}}

/* demo dialog */
.hf-ov{width:min(960px,94vw);max-height:90vh;padding:0;border:1px solid rgba(var(--tw),.14);border-radius:18px;background:rgb(var(--k-090b10));color:var(--text);box-shadow:0 50px 120px -30px rgba(var(--ts),var(--sa)),0 0 120px -40px rgba(var(--vio),.6);overflow:auto;animation:hf-ov-in .28s var(--ease)}
.hf-ov::backdrop{background:rgba(var(--k-030408),.8);animation:hf-ov-bd .28s}
.hf-ov-in{padding:clamp(18px,2.4vw,30px)}
.hf-ov-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.hf-ov-hd h3{margin:0;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em}
.hf-ov-x{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--hf-line);background:rgba(var(--tw),.05);color:var(--text);cursor:pointer}
.hf-ov-x:hover{background:rgba(var(--tw),.12)}
.hf-ov-x:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hf-ov-body .hf-demo{padding:0;margin-bottom:14px}
.hf-ov-body .hf-demo figcaption{display:flex}
.hf-ov-body .hf-share{margin:0 0 14px}
.hf-ov-body p{margin:8px 0 0;font-size:16px;line-height:1.6;color:rgb(var(--kt-b9bec7))}
.hf-ov-body .fineprint{font-size:13px;color:var(--text-3)}
@keyframes hf-ov-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes hf-ov-bd{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hf-ov,.hf-ov::backdrop{animation:none}}

/* "Explore Live Workspaces": the dark veil text-shadow painted over the transparent gradient fill; removed, brighter gradient, glow, shimmer while on screen */
.hf-gal-head h2{text-shadow:none;font-weight:800;background:linear-gradient(100deg,rgb(var(--k-f0e9ff)) 0%,rgb(var(--k-b99bff)) 25%,#3df29a 50%,rgb(var(--k-b99bff)) 75%,rgb(var(--k-f0e9ff)) 100%) 0 0/200% 100% repeat-x;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 26px rgba(138,107,255,.5));animation:hf-shim 8s linear infinite paused}
.hf-gal-head h2.is-shine{animation-play-state:running}
@keyframes hf-shim{to{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.hf-gal-head h2{animation:none}}
/* the legacy grey-bar rule (.hf-chat-msgs li span) must not size the avatar / typing spans */
.hf-chat-msgs li .hf-chat-av{display:grid;width:30px;height:30px;max-width:none;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b))}
.hf-chat-msgs li .hf-chat-nm{display:inline;width:auto;height:auto;border-radius:0;background:none}
.hf-chat-msgs li .hf-chat-dots{display:inline-flex;width:auto;height:auto;border-radius:0;background:none}

/* mobile hit areas (r5 audit): Play >= 40px tall, A/B >= 40px wide, header logo wider tap area (padding offset by negative margin, visual size unchanged) */
.hf-b-open{min-height:44px;min-width:44px}
.hf-tvp button{min-width:40px}
.tp-header .logo{padding-inline:12px;margin-inline:-12px;min-height:44px}

/* ---------- r6: gallery hover / focus CTA (sign up or try the demo) ---------- */
.hf-gcta{display:flex;gap:10px;align-items:center;visibility:hidden;pointer-events:none}
.hf-gcta-a{position:relative;overflow:hidden;isolation:isolate;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;border-radius:999px;font:700 14px/1 var(--font);text-decoration:none;white-space:nowrap;border:1px solid transparent;transform:translateY(16px) scale(.96);opacity:0;transition:transform .5s var(--ease),opacity .4s var(--ease),box-shadow .3s,background .3s,border-color .3s}
.hf-gcta-p{color:#04120a;background:linear-gradient(135deg,rgb(var(--k-7ff7c0)),#3df29a 55%,#27d98a)}
.hf-gcta-s{color:rgb(var(--tw));background:rgba(var(--k-0a0c12),.72);border-color:rgba(var(--tw),.34);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hf-gcta-a::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(var(--tw),.55),transparent);transform:skewX(-20deg);opacity:0}
.hf-gcta-p:hover,.hf-gcta-p:focus-visible{box-shadow:0 0 28px 2px rgba(61,242,154,.55)}
.hf-gcta-s:hover,.hf-gcta-s:focus-visible{border-color:#3df29a;background:rgba(var(--k-0e1614),.88)}
.hf-gcta-a:focus-visible{outline:2px solid rgb(var(--tw));outline-offset:3px}
/* featured card: bottom-right */
.hf-gf-cta{position:absolute;z-index:3;right:clamp(16px,2.6vw,38px);bottom:clamp(16px,2.6vw,38px)}
.hf-gf-cta::before{content:"";position:absolute;z-index:-1;inset:-34px -40px -34px -80px;background:radial-gradient(closest-side,rgba(var(--k-030408),.78),transparent);opacity:0;transition:opacity .5s}
/* thumbnails: centred over the image, dark scrim */
.hf-gt-li{position:relative}
.hf-gt-cta{position:absolute;z-index:2;left:0;right:0;top:0;aspect-ratio:2000/897;flex-direction:column;justify-content:center;gap:7px;border-radius:10px;background:rgba(var(--k-030408),.62)}
.hf-gt-cta .hf-gcta-a{min-height:40px;padding:0 16px;font-size:12.5px}
/* reveal: hovered / keyboard-focused card */
.hf-gf:hover .hf-gf-item.is-on .hf-gf-cta,.hf-gf-item.is-on:focus-within .hf-gf-cta,.hf-gt-li:hover .hf-gt-cta,.hf-gt-li:focus-within .hf-gt-cta{visibility:visible}
.hf-gf:hover .hf-gf-item.is-on .hf-gf-cta::before,.hf-gf-item.is-on:focus-within .hf-gf-cta::before{opacity:1}
.hf-gf:hover .hf-gf-item.is-on .hf-gcta-a,.hf-gf-item.is-on:focus-within .hf-gcta-a,.hf-gt-li:hover .hf-gcta-a,.hf-gt-li:focus-within .hf-gcta-a{pointer-events:auto;opacity:1;transform:none}
.hf-gf:hover .hf-gf-item.is-on .hf-gcta-s,.hf-gf-item.is-on:focus-within .hf-gcta-s,.hf-gt-li:hover .hf-gcta-s,.hf-gt-li:focus-within .hf-gcta-s{transition-delay:.09s,.09s,0s,0s,0s}
.hf-gf:hover .hf-gf-item.is-on .hf-gcta-p::after,.hf-gf-item.is-on:focus-within .hf-gcta-p::after,.hf-gt-li:hover .hf-gcta-p::after,.hf-gt-li:focus-within .hf-gcta-p::after{animation:hf-gshine .9s .35s var(--ease) 1 both}
.hf-gf .hf-gcta-a:hover,.hf-gf .hf-gcta-a:focus-visible,.hf-gt-li .hf-gcta-a:hover,.hf-gt-li .hf-gcta-a:focus-visible{transform:translateY(-2px) scale(1.03)!important}
@keyframes hf-gshine{0%{left:-60%;opacity:1}100%{left:140%;opacity:1}}
@media (max-width:1099px){
  .hf-gf-cta{flex-direction:column;align-items:stretch}
  .hf-gf-cta .hf-gcta-a{min-height:40px;padding:0 16px;font-size:13px}
  .hf-gf-ov{max-width:56%}
}
@media (max-width:899px){.hf-gt-cta{display:none}}
/* touch: featured card always shows the buttons (compact), thumbnails never */
@media (hover:none){
  .hf-gt-cta{display:none}
  .hf-gf-item.is-on .hf-gf-cta{visibility:visible}
  .hf-gf-item.is-on .hf-gf-cta::before{opacity:1}
  .hf-gf-item.is-on .hf-gcta-a{pointer-events:auto;opacity:1;transform:none}
}
@media (max-width:699px){
  .hf-gf-ov{max-width:none}
  .hf-gf-cta{position:static;flex-direction:row;margin:10px 0 0;gap:8px}
  .hf-gf-cta::before{display:none}
  .hf-gf-cta .hf-gcta-a{flex:1 1 0;min-height:44px;padding:0 10px;white-space:normal;text-align:center;line-height:1.15;font-size:13px}
  .hf-gf-item.is-on .hf-gf-cta{visibility:visible}
  .hf-gf-item.is-on .hf-gcta-a{opacity:1;transform:none;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){
  .hf-gcta-a{transform:none!important;transition:opacity .2s!important}
  .hf-gcta-a::after{display:none}
}

/* ---------- r6: "Set up in three steps" looping sequence ---------- */
.hf-st{--dur:2.5s}
.hf-sv{position:relative;height:76px;margin:0 0 16px;border-radius:10px;border:1px solid rgba(var(--tw),.08);background:rgba(var(--tw),.025);overflow:hidden}
.hf-sv i,.hf-sv b{position:absolute;display:block;font-style:normal}
.hf-st-bar{position:absolute;left:18px;right:18px;bottom:10px;height:3px;border-radius:3px;background:rgba(var(--tw),.07);overflow:hidden;display:none}
.hf-st-bar::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,rgb(var(--glow)),rgb(var(--vio)))}
.hf-steps.is-live .hf-st{transition:transform .45s var(--ease),opacity .45s,box-shadow .45s,border-color .45s;opacity:.5}
.hf-steps.is-live .hf-st-bar{display:block}
.hf-steps.is-live .hf-st.is-act{opacity:1;transform:translateY(-6px);border-color:rgba(var(--glow),.55);box-shadow:0 22px 50px -24px rgba(var(--glow),.55),0 0 0 1px rgba(var(--glow),.25)}
.hf-steps.is-live .hf-st.is-act .hf-st-bar::after{animation:hf-sbar var(--dur) linear forwards}
.hf-steps.is-live .hf-st.is-act:not(:last-child)::after{content:"";position:absolute;top:33px;left:calc(24px + 3.2em);right:-18px;height:2px;transform-origin:left;background:rgb(var(--glow));box-shadow:0 0 10px rgba(var(--glow),.8);animation:hf-sbar var(--dur) linear forwards;z-index:1}
.hf-steps.is-hold .hf-st *,.hf-steps.is-hold .hf-st *::before,.hf-steps.is-hold .hf-st *::after,.hf-steps.is-hold .hf-st::after{animation-play-state:paused!important}
@keyframes hf-sbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hf-st.is-act .hf-step-n{text-shadow:0 0 14px rgba(var(--glow),.9)}
/* 1 sign-up card */
.hf-sv1{display:flex;align-items:center;justify-content:center}
.hf-sv .v1-card{position:relative;width:210px;height:54px;border-radius:10px;border:1px solid rgba(var(--tw),.16);background:rgb(var(--k-0f131b))}
.v1-av{left:10px;top:12px;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#8a6bff,#3df29a)}
.v1-l1{left:48px;top:14px;width:88px;height:6px;border-radius:3px;background:rgba(var(--tw),.4);transform-origin:left}
.v1-l2{left:48px;top:28px;width:58px;height:6px;border-radius:3px;background:rgba(var(--tw),.2);transform-origin:left}
.v1-btn{right:10px;top:13px;width:46px;height:28px;border-radius:8px;background:#3df29a;box-shadow:0 0 16px rgba(61,242,154,.6)}
.hf-steps.is-live .is-act .v1-card{animation:v1a .7s var(--ease) both}
.hf-steps.is-live .is-act .v1-l1{animation:v1l .5s .5s var(--ease) both}
.hf-steps.is-live .is-act .v1-l2{animation:v1l .5s .75s var(--ease) both}
.hf-steps.is-live .is-act .v1-btn{animation:v1b 2.5s linear both}
@keyframes v1a{from{opacity:0;transform:translateY(14px) scale(.94)}}
@keyframes v1l{from{transform:scaleX(0)}}
@keyframes v1b{0%,55%{background:rgb(var(--k-3a4150));box-shadow:none}65%{background:#3df29a;box-shadow:0 0 26px rgba(61,242,154,.95);transform:scale(1.12)}80%,100%{background:#3df29a;box-shadow:0 0 16px rgba(61,242,154,.6);transform:none}}
/* 2 tabs drop onto a grid */
.v2-g{left:calc(50% - 75px);top:10px;width:150px;height:56px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.hf-sv .v2-g b{position:static;border:1px dashed rgba(var(--tw),.2);border-radius:5px}
.v2-t{width:73px;height:26px;border-radius:5px;background:linear-gradient(135deg,rgba(138,107,255,.85),rgba(138,107,255,.45));border:1px solid rgba(var(--tw),.3)}
.v2-t1{left:calc(50% - 75px);top:10px}
.v2-t2{left:calc(50% + 2px);top:10px;background:linear-gradient(135deg,rgba(61,242,154,.8),rgba(61,242,154,.4))}
.v2-t3{left:calc(50% - 75px);top:40px;background:linear-gradient(135deg,rgba(255,184,77,.8),rgba(255,184,77,.4))}
.hf-steps.is-live .is-act .v2-t{animation:v2d .6s cubic-bezier(.3,1.5,.5,1) both}
.hf-steps.is-live .is-act .v2-t1{animation-delay:.2s}.hf-steps.is-live .is-act .v2-t2{animation-delay:.65s}.hf-steps.is-live .is-act .v2-t3{animation-delay:1.1s}
@keyframes v2d{from{opacity:0;transform:translateY(-52px)}}
/* 3 alerts pop */
.v3-w{left:calc(50% - 104px);top:10px;width:92px;height:56px;border-radius:7px;border:1px solid rgba(var(--tw),.16);background:rgb(var(--k-0f131b))}
.v3-w b{left:8px;height:5px;border-radius:3px;background:rgba(var(--tw),.28)}
.v3-w b:first-child{top:12px;width:60px}.v3-w b:last-child{top:26px;width:40px;background:rgba(var(--tw),.15)}
.v3-n{left:calc(50% + 2px);width:104px;height:16px;border-radius:8px;border:1px solid rgba(var(--tw),.18);background:rgba(var(--k-0f131b),.95)}
.v3-n::before{content:"";position:absolute;left:5px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--c,#3df29a);box-shadow:0 0 8px var(--c,#3df29a)}
.v3-n::after{content:"";position:absolute;left:17px;top:5px;width:60%;height:5px;border-radius:3px;background:rgba(var(--tw),.3)}
.v3-n1{top:8px}.v3-n2{top:30px;--c:#ffb84d}.v3-n3{top:52px;--c:#8a6bff}
.hf-steps.is-live .is-act .v3-n{animation:v3p .55s cubic-bezier(.3,1.6,.5,1) both}
.hf-steps.is-live .is-act .v3-n1{animation-delay:.3s}.hf-steps.is-live .is-act .v3-n2{animation-delay:.9s}.hf-steps.is-live .is-act .v3-n3{animation-delay:1.5s}
@keyframes v3p{from{opacity:0;transform:translateX(18px) scale(.6)}}
@media (max-width:899px){
  .hf-steps.is-live .hf-st.is-act{transform:translateY(-3px)}
  .hf-steps.is-live .hf-st.is-act:not(:last-child)::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hf-steps .hf-st,.hf-steps .hf-st *{animation:none!important;transition:none!important}
  .hf-steps .hf-st-bar{display:none!important}
  .hf-steps .hf-st{opacity:1!important;transform:none!important}
}

/* ---------- r7: workspace section — background tint, glass tiles, balanced bento, one-at-a-time autoplay ---------- */
.hf-bgx{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .8s var(--ease);
  background:radial-gradient(70% 60% at 18% 22%,rgba(var(--k-1e828c),.20),transparent 70%),radial-gradient(70% 60% at 85% 80%,rgba(110,80,200,.20),transparent 70%),rgba(var(--k-081a22),.30)}
html.hf-ws-in .hf-bgx{opacity:1}
/* 5 tiles: 3 on top, 2 below (6 columns) -> no holes */
.hf-bento{grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch}
.hf-b-side_by_side,.hf-b-workspaces,.hf-b-share{grid-column:span 2}
.hf-b-customize,.hf-b-alerts{grid-column:span 3}
.hf-b .hf-demo-stage{aspect-ratio:16/9.5;min-height:0;background:rgba(var(--k-07080b),.5)}
.hf-b-alerts .hf-demo-stage{aspect-ratio:16/9.5;min-height:0;overflow:hidden;align-content:center}
.hf-b-tilt{height:100%}
.hf-b-copy{margin-top:auto}
.hf-b-open{margin-top:14px}
/* glass */
.hf-b.card{background:rgba(var(--k-0c1016),.42);border:1px solid rgba(var(--tw),.07);-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hf-b.card{background:rgba(var(--k-0c1016),.82)}}
.hf-b.card.is-seq{border-color:rgba(61,242,154,.5);box-shadow:0 0 0 1px rgba(61,242,154,.22),0 24px 60px -34px rgba(61,242,154,.5)}
.hf-b.card{transition:border-color .5s,box-shadow .5s,transform .6s var(--ease)}
@media (max-width:1099px){
  .hf-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf-b-side_by_side{grid-column:span 2}
  .hf-b-workspaces,.hf-b-share,.hf-b-customize,.hf-b-alerts{grid-column:span 1}
}
@media (max-width:899px){.hf-b-alerts{grid-column:span 1}.hf-b.card{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(var(--k-0c1016),.58)}}
@media (max-width:640px){.hf-bento{grid-template-columns:minmax(0,1fr)}.hf-b-side_by_side,.hf-b-workspaces,.hf-b-share,.hf-b-customize,.hf-b-alerts{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.hf-bgx{transition:none}.hf-b.card{transition:none}}
.hf-steps li::before,.hf-steps li::after{max-width:100%}.hf-steps li:last-child::before{right:0}

/* ---------- r9: hero expand affordance + lightbox controls ---------- */
.hf-expand{position:absolute;inset:0;z-index:2;display:grid;place-items:center;border:0;padding:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hf-expand-l{display:inline-flex;align-items:center;gap:8px;padding:11px 20px 11px 16px;border-radius:999px;background:rgba(var(--k-080a0f),.78);border:1px solid rgba(var(--tw),.35);color:rgb(var(--tw));font:700 14px/1 var(--font);letter-spacing:.02em;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .3s,transform .4s var(--ease),background .3s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hf-expand-l svg{width:14px;height:14px}
.hf-expand:hover .hf-expand-l,.hf-expand:focus-visible .hf-expand-l{opacity:1;transform:none;background:rgba(61,242,154,.22);border-color:#3df29a}
.hf-expand:focus-visible{outline:3px solid rgb(var(--tw));outline-offset:-4px;border-radius:12px}
.hf-screen .hf-media{transition:transform .5s var(--ease)}
@media (hover:hover){.hf-screen:hover .hf-media{transform:scale(1.012)}}
@media (hover:none){.hf-expand{display:block}.hf-expand-l{opacity:1;transform:none;position:absolute;left:12px;bottom:12px;padding:9px 14px 9px 12px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.hf-screen:hover .hf-media{transform:none}.hf-screen .hf-media,.hf-expand-l{transition:opacity .2s}.hf-expand-l{transform:none}}
.hf-lb-ctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:26px 10px 8px;background:linear-gradient(transparent,rgba(var(--k-030408),.85))}
.hf-lb-b{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:rgba(var(--tw),.1);color:rgb(var(--tw));cursor:pointer}
.hf-lb-b:hover{background:rgba(61,242,154,.35)}
.hf-lb-b:focus-visible,.hf-lb-chip:focus-visible,.hf-lb-seek:focus-visible{outline:3px solid rgb(var(--tw));outline-offset:2px}
.hf-lb-seek{flex:1;min-width:0;height:40px;margin:0;background:transparent;accent-color:#3df29a;cursor:pointer}
.hf-lb-under{position:absolute}
.hf-lb-under .hf-lb-cap{position:static}
.hf-lb-ch{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.hf-lb-chip{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(var(--tw),.28);background:rgba(var(--k-080a0f),.6);color:rgb(var(--kt-e8ebf0));font:600 13px/1 var(--font);cursor:pointer;transition:background .2s,border-color .2s}
.hf-lb-chip:hover{border-color:#3df29a}
.hf-lb-chip.on{background:rgba(61,242,154,.2);border-color:#3df29a;color:rgb(var(--tw))}
.hf-lb-frame.is-fs,.hf-lb-frame:fullscreen,.hf-lb-frame:-webkit-full-screen{left:0!important;top:0!important;width:100vw!important;height:100vh!important;border-radius:0;transform:none!important;background:rgb(var(--tk))}
.hf-lb-frame:fullscreen video,.hf-lb-frame:-webkit-full-screen video{object-fit:contain}
@media (max-width:640px){.hf-lb-ch{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.hf-lb-chip{flex:none}}

/* r9 fixes (reviewer r7): alerts tile in the 2-column range stacks the channel row under the list; the section-head veil no longer widens the page at 900-1199px */
@media (max-width:1199px){.hf-head::before{right:0}}
@media (max-width:1099px){
  .hf-b-alerts .hf-demo-stage{grid-template-columns:minmax(0,1fr);aspect-ratio:auto;overflow:visible;align-content:start}
  .hf-b-alerts .hf-dx-ch{min-width:0}
  .hf-b-alerts .hf-dx-ch ul{display:flex;flex-wrap:wrap}
  .hf-b-alerts .hf-dx-al li{font-size:13px;min-width:0}
  .hf-b-alerts .hf-al-t{min-width:0;overflow-wrap:anywhere}
}

/* ---------- r10: workspace tiles brighter (lighter glass surface, clearer demo stage and mini windows, stronger border, better text contrast) ---------- */
.hf-b.card{background:linear-gradient(180deg,rgba(var(--tw),.10),rgba(var(--tw),.06)),rgba(var(--k-161e2c),.55);border:1px solid rgba(var(--tw),.16)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hf-b.card{background:rgba(var(--k-222c3e),.92)}}
@media (max-width:899px){.hf-b.card{background:linear-gradient(180deg,rgba(var(--tw),.10),rgba(var(--tw),.06)),rgba(var(--k-1a2230),.88)}}
.hf-b .hf-demo-stage{background:linear-gradient(180deg,rgba(var(--k-1e283a),.85),rgba(var(--k-101622),.85));border:1px solid rgba(var(--tw),.18)}
.hf-b-alerts .hf-demo-stage{background:radial-gradient(80% 100% at 0% 0%,rgba(var(--k-a078ff),.22),transparent 60%),rgba(var(--k-141a28),.88)}
.hf-b .hf-mw{background:rgb(var(--k-141a26));border-color:rgba(var(--tw),.28);box-shadow:0 10px 24px -12px rgba(var(--ts),calc(.7*var(--sa)))}
.hf-b .hf-mw-h{background:linear-gradient(90deg,rgb(var(--k-222b40)),rgb(var(--k-2c3650)))}
.hf-b .hf-mw-h b{color:rgb(var(--tw))}
.hf-b .hf-mw-h i{background:rgba(var(--tw),.4)}
.hf-b .hf-mw-b img{filter:saturate(1.1) brightness(1.2) contrast(1.05)}
.hf-b .hf-dx-al li{background:rgba(var(--k-1e2638),.95);border-color:rgba(var(--tw),.22)}
.hf-b .hf-dx-ch li{background:rgba(var(--tw),.08);border-color:rgba(var(--tw),.22);color:rgb(var(--kt-e3e7ee))}
.hf-b h3{color:rgb(var(--tw))}
.hf-b-copy p:not(.fineprint){color:rgb(var(--kt-d3d8e0))}
.hf-b:not(.is-seq):not(.is-tilt){filter:brightness(.94)}
.hf-b.is-seq,.hf-b.is-tilt{filter:none}
.hf-bgx{background:radial-gradient(70% 60% at 18% 22%,rgba(var(--k-1e828c),.16),transparent 70%),radial-gradient(70% 60% at 85% 80%,rgba(110,80,200,.16),transparent 70%),rgba(var(--k-081a22),.12)}

/* r10: while the showcase morphs the particle field, let it show: lighter overlay, translucent list panel */
html.hf-morph .hf-dim{opacity:.15}
@media (min-width:900px){html.hf-morph.hf-pin .hf-ta-side{background:rgba(var(--k-050609),.34);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}
/* r10b: brighter still */
.hf-b.card{background:linear-gradient(180deg,rgba(var(--tw),.16),rgba(var(--tw),.10)),rgba(var(--k-28344a),.62)}
@media (max-width:899px){.hf-b.card{background:linear-gradient(180deg,rgba(var(--tw),.16),rgba(var(--tw),.10)),rgba(var(--k-28344a),.9)}}
.hf-b:not(.is-seq):not(.is-tilt){filter:none}
.hf-b .hf-demo-stage{background:linear-gradient(180deg,rgba(var(--k-2c3a54),.9),rgba(var(--k-1a2438),.9))}
.hf-b .hf-mw{background:rgb(var(--k-1b2333))}
@media (min-width:900px){html.hf-morph.hf-pin .hf-ta-side{background:rgba(var(--k-050609),.2)}}
@media (prefers-reduced-motion:reduce){.hf-mq-track li[aria-hidden="true"]{display:none}} /* seamless-loop set B (make.mjs MQ_B): reduced motion shows one clean set */

/* homepage tabs showcase: whole tab window for the three tall tab images (2026-10-14) */
.hf-fit,.hf-ta-media img[src*="multi-exchange-orderbook"],.hf-ta-media img[src*="liquidation-tracker"],.hf-ta-media img[src*="coin-info"],.hf-ta-media img[src*="hyperliquid-whale-tracker"]{object-fit:contain;object-position:50% 50%} /* .hf-fit = any v4 take taller than 16:9 (poster + video) */

/* 2026-10-15 tour buttons: "All tabs" + overview live inside the tour section (pinned side panel / under the mobile cards) */
.hf-ta-side .hf-tabs-nav{margin:0;flex-direction:column;flex-wrap:nowrap;gap:8px}
.hf-ta-side .hf-tabs-nav .f-jump{width:100%;min-height:48px;padding:6px 14px 6px 8px;font-size:15px;box-sizing:border-box}
.hf-ta-side .hf-tabs-nav .f-jump span:nth-child(2){flex:1}
html:not(.hf-pin) .hf-ta-grid{display:flex;flex-direction:column}
html:not(.hf-pin) .hf-ta-side{order:2;margin-top:8px}
html.hf-pin .hf-ta-side .hf-tabs-nav{flex:0 0 auto;margin-top:10px}
html.hf-pin .hf-ta-rail{flex:1 1 auto;min-height:0}
@media (max-width:899px){
  .hf-ta-item{min-width:0}
  .hf-ta-k{flex-wrap:wrap;row-gap:6px}
}

/* 2026-10-15 mobile tour spacing: card glow not clipped by the scroller (room below, pulled back with a negative margin), clear space under the bottom nav button */
@media (max-width:899px){
  html:not(.hf-pin) .hf-ta-items{padding-bottom:56px;margin-bottom:-36px}
  html:not(.hf-pin) .hf-ta-side{margin-top:0;padding-bottom:40px}
}
/* Workspace section CTA row (2026-10-15): centred on every width; on phones the button is centred (up to 320px) and the two links stack centred below it. Scoped: other .hf-row CTA rows are untouched. */
.hf-ws-sec .hf-row{justify-content:center;text-align:center;gap:12px 24px}
@media (max-width:560px){
  .hf-ws-sec .hf-row{flex-direction:column;align-items:center;gap:12px}
  .hf-ws-sec .hf-row .btn{width:100%;max-width:320px;justify-content:center}
  .hf-ws-sec .hf-row .hf-link{justify-content:center}
}