@font-face { font-family: "Fira Code"; font-weight: 400; font-display: block; src: url(/assets/fonts/fira-code-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Fira Code"; font-weight: 500; font-display: block; src: url(/assets/fonts/fira-code-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Saira XC"; font-weight: 500; font-display: block; src: url(/assets/fonts/saira-extra-condensed-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Saira XC"; font-weight: 600; font-display: block; src: url(/assets/fonts/saira-extra-condensed-latin-600-normal.woff2) format("woff2"); }

/* pre-intro: hide the real site until the overlay has mounted; failsafe un-hides after 14 s if JS never runs */
html.ab-pre body > *:not(#ab-host) { visibility: hidden; animation: ab-failsafe 0s 14s forwards; }
@keyframes ab-failsafe { to { visibility: visible; } }
html.ab-pre.ab-live body > *:not(#ab-host) { visibility: visible; animation: none; }
html.ab-pre body > *:not(#ab-host) { opacity: 0; }
html.ab-pre.ab-live body > *:not(#ab-host) { opacity: 1; transition: opacity 0.9s ease 0.1s; }
html.ab-pre.ab-live header { animation: ab-drop 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s backwards; }
@keyframes ab-drop { from { opacity: 0; transform: translateY(-14px); } }
html.ab-pre.ab-live::after { content: ""; position: fixed; inset: 0 auto 0 0; width: 2px; background: linear-gradient(#fff0, #fffc, #fff0); box-shadow: 0 0 24px 6px #fff4; z-index: 9990; pointer-events: none; animation: ab-sweep 1.1s cubic-bezier(0.5, 0, 0.2, 1) 0.15s both; }
@keyframes ab-sweep { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100vw); opacity: 0; } }

.ab { position: fixed; inset: 0; z-index: 9999; background: #000; overflow: hidden; color: #ececec; font-family: "Fira Code", ui-monospace, monospace; transition: opacity 0.7s ease; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.ab.pushing { animation: ab-fade 0.8s ease 0.45s forwards; }
.ab.leaving { animation: ab-fade 0.5s ease forwards; }
@keyframes ab-fade { to { opacity: 0; } }
.ab-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 45%, #000c 100%); pointer-events: none; z-index: 5; }

/* boot log */
.ab-log { position: absolute; left: 3vw; bottom: 7vh; height: 90vh; display: flex; flex-direction: column; justify-content: flex-end; margin: 0; font: 400 clamp(8px, 0.72vw, 13px) / 1.28 "Fira Code", monospace; color: #e9e9e9; white-space: pre; width: 94vw; overflow: hidden; transition: opacity 0.18s; z-index: 2; -webkit-mask-image: linear-gradient(#0000, #000 12%); mask-image: linear-gradient(#0000, #000 12%); }
.ab-log.off { opacity: 0; }

/* logo */
.ab-logo { position: absolute; left: 50%; top: 44%; width: min(88vw, 960px); aspect-ratio: 1360 / 596; transform: translate(-50%, -50%); opacity: 0; z-index: 3; mix-blend-mode: screen; }
.ab-logo video, .ab-logo .ab-seq { position: absolute; inset: 0; width: 100%; height: 100%; filter: contrast(1.28) brightness(1.04); -webkit-mask-image: linear-gradient(90deg, #0000, #000 7%, #000 93%, #0000), linear-gradient(#0000, #000 14%, #000 86%, #0000); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #0000, #000 7%, #000 93%, #0000), linear-gradient(#0000, #000 14%, #000 86%, #0000); mask-composite: intersect; }
.ab-logo-glow { position: absolute; inset: -12%; display: none; background: none; mix-blend-mode: screen; pointer-events: none; }
.ab-logo.on { opacity: 1; animation: ab-glitch-in 0.42s steps(1) both; }
.ab-logo.out { animation: ab-glitch-out 0.3s steps(1) forwards; }
@keyframes ab-glitch-in { 0% { opacity: 0; } 10% { opacity: 1; clip-path: inset(40% 0 38% 0); transform: translate(-50.8%, -50%); } 22% { opacity: 0.2; } 34% { opacity: 1; clip-path: inset(8% 0 62% 0); transform: translate(-49.4%, -50%); } 50% { clip-path: inset(0); transform: translate(-50%, -50%); opacity: 0.5; } 66% { opacity: 1; clip-path: inset(52% 0 10% 0); transform: translate(-50.5%, -50%); } 100% { clip-path: inset(0); transform: translate(-50%, -50%); opacity: 1; } }
@keyframes ab-glitch-out { 0% { opacity: 1; } 25% { opacity: 0.3; clip-path: inset(30% 0 40% 0); transform: translate(-49.3%, -50%); } 50% { opacity: 0.9; clip-path: inset(0); } 75% { opacity: 0.2; transform: translate(-50.6%, -50%); } 100% { opacity: 0; } }

/* camera + plane */
.ab-cam { position: absolute; inset: 0; transform-origin: 42% 30%; transition: transform 1.05s cubic-bezier(0.55, 0, 0.2, 1), filter 1.05s ease; z-index: 4; }
.ab-cam.push { transform: scale(3.6); filter: blur(8px); }
.ab-plane { position: absolute; inset: 0; transform-origin: 50% 70%; transition: transform 1.6s ease; }
.ab-plane.tilt { transform: rotateX(6deg) rotateZ(-0.3deg); }
.ab-scr { --u: calc(var(--sw, 900px) / 100); position: absolute; left: 50%; top: max(2vh, calc((100vh - var(--sw) * 0.62) / 2)); width: var(--sw); height: calc(var(--u) * 62); transform: translateX(-50%); opacity: 0; }
.ab-scr.show { opacity: 1; }
.ab-tall .ab-scr { top: 6vh; height: calc(var(--u) * 160); }
.ab-tall .ab-logo { width: 100vw; top: 40%; }

/* terminal frame */
.ab-term { position: absolute; left: 17%; top: 0; width: 53%; height: 66%; }
.ab-term { transition: left 0.75s cubic-bezier(0.65, 0, 0.2, 1), top 0.75s cubic-bezier(0.65, 0, 0.2, 1), width 0.75s cubic-bezier(0.65, 0, 0.2, 1), height 0.75s cubic-bezier(0.65, 0, 0.2, 1); }
/* small box for the welcome beat: same centre as the full terminal, so the text does not move */
.ab-term.ab-small { left: 27.5%; top: 22%; width: 32%; height: 22%; }
.ab-tall .ab-term.ab-small { left: 12%; top: 32%; width: 76%; height: 16%; }
.ab-frame { position: absolute; inset: 0; transform: scaleY(0.004) scaleX(0); transform-origin: 50% 50%; opacity: 0; }
.ab-frame.line { opacity: 1; transform: scaleY(0.004) scaleX(1); transition: transform 0.4s cubic-bezier(0.6, 0, 0.2, 1); }
.ab-frame.rect { transform: scale(1); transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1); }
.ab-outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab-outline polygon { fill: #000; stroke: #dcdcdc; stroke-width: 1.5px; filter: drop-shadow(0 0 2px #fff5); }
.ab-welcome { position: absolute; inset: 0; display: grid; place-items: center; font: 500 max(15px, calc(var(--u) * 1.3)) "Fira Code", monospace; letter-spacing: 0.01em; opacity: 0; transition: opacity 0.7s; }
.ab-welcome.on { opacity: 1; }
.ab-tabs { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 2.5); display: flex; opacity: 0; transition: opacity 0.4s; }
.ab-tabs.on { opacity: 1; animation: ab-flick 0.5s steps(1) both; }
.ab-tab { flex: 1; display: grid; place-items: center; font: 500 max(11.5px, calc(var(--u) * 0.9)) "Saira XC", sans-serif; letter-spacing: 0.12em; color: #d0d0d0; text-decoration: none; border-right: 1px solid #8884; }
.ab-tab-on { background: #e8e8e8; color: #050505; flex: 1.25; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
.ab-out { position: absolute; left: calc(var(--u) * 1.4); top: calc(var(--u) * 3.6); right: calc(var(--u) * 1.4); bottom: calc(var(--u) * 1.2); margin: 0; font: 400 max(11.5px, calc(var(--u) * 0.94)) / 1.42 "Fira Code", monospace; color: #fff; white-space: pre-wrap; overflow: hidden; }
.ab-cur { display: inline-block; width: 0.55em; height: 1.05em; background: #f2f2f2; vertical-align: text-bottom; animation: ab-blink 1s steps(1) infinite; }
@keyframes ab-blink { 50% { opacity: 0; } }

/* HUD panels */
.hud-i { opacity: 0; }
.hud-i.on { opacity: 1; animation: ab-flick 0.45s steps(1) both; }
@keyframes ab-flick { 0% { opacity: 0; } 12% { opacity: 1; } 24% { opacity: 0.15; } 40% { opacity: 1; } 56% { opacity: 0.55; } 100% { opacity: 1; } }
.ab-left { position: absolute; left: 0; top: 0; width: 15.5%; height: 66%; display: flex; flex-direction: column; gap: calc(var(--u) * 0.7); }
.ab-right { position: absolute; right: 0; top: 0; width: 28.5%; height: 66%; display: flex; flex-direction: column; gap: calc(var(--u) * 0.8); padding-left: calc(var(--u) * 1.2); }
.ab-clock { font: 600 max(24px, calc(var(--u) * 2.3)) / 1 "Saira XC", sans-serif; letter-spacing: 0.08em; }
.ab-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 0.3); border-top: 1px solid #fff4; padding-top: calc(var(--u) * 0.4); }
.ab-stat-2 { grid-template-columns: repeat(2, 1fr); }
.ab-sc i, .ab-bt, .ab-sub { font: 400 max(9.5px, calc(var(--u) * 0.62)) "Fira Code", monospace; font-style: normal; letter-spacing: 0.08em; color: #9a9a9a; text-transform: uppercase; display: block; }
.ab-sc b { font: 500 max(12px, calc(var(--u) * 0.88)) "Saira XC", sans-serif; letter-spacing: 0.06em; display: block; color: #f2f2f2; }
.ab-blk { border-top: 1px solid #fff4; padding-top: calc(var(--u) * 0.4); display: flex; flex-direction: column; gap: calc(var(--u) * 0.3); }
.ab-bt { display: flex; justify-content: space-between; }
.ab-cv { width: 100%; display: block; }
.ab-cpu { height: calc(var(--u) * 3.4); }
.ab-trf { height: calc(var(--u) * 5.6); }
.ab-globe { height: calc(var(--u) * 12.2); }
.ab-mem { display: grid; grid-template-columns: repeat(16, 1fr); gap: calc(var(--u) * 0.22); }
.ab-mem i { aspect-ratio: 1; background: #fff2; }
.ab-mem i.on { background: #f0f0f0; box-shadow: 0 0 3px #fff6; }
.ab-proc { gap: calc(var(--u) * 0.2); }
.ab-pr { display: grid; grid-template-columns: 1.2fr 3fr 1fr; font: 400 max(10px, calc(var(--u) * 0.66)) "Fira Code", monospace; color: #e8e8e8; }
.ab-pr span:last-child { text-align: right; }

/* files + keyboard */
.ab-files { position: absolute; left: 0; bottom: 0; width: 36%; height: 31%; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: calc(var(--u) * 0.5); align-content: start; border: 1px solid #fff5; border-top: 0; padding: calc(var(--u) * 1) calc(var(--u) * 0.8); }
.ab-file { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.2); text-decoration: none; color: #eaeaea; opacity: 0; font: 400 max(9.5px, calc(var(--u) * 0.58)) "Fira Code", monospace; text-align: center; overflow: hidden; }
.ab-file.on { opacity: 1; animation: ab-flick 0.4s steps(1) both; }
.ab-dead { color: #888; }
.ab-ic { width: 100%; aspect-ratio: 1.15; display: grid; place-items: center; background: #ffffff0f; border: 1px solid #fff3; }
.ab-ic i { display: block; width: 46%; height: 36%; background: #f2f2f2; clip-path: polygon(0 12%, 38% 12%, 46% 0, 100% 0, 100% 100%, 0 100%); }
.ab-ic .ab-ic-file { height: 52%; width: 36%; clip-path: polygon(0 0, 70% 0, 100% 26%, 100% 100%, 0 100%); }
a.ab-file:hover .ab-ic { background: #fff; }
a.ab-file:hover .ab-ic i { background: #000; }
.ab-keys { position: absolute; right: 0; bottom: 0; width: 61%; height: 31%; display: flex; flex-direction: column; gap: calc(var(--u) * 0.32); padding: calc(var(--u) * 0.5) 0 0 calc(var(--u) * 0.5); opacity: 0; }
.ab-keys.on { opacity: 1; }
.ab-kr { display: flex; gap: calc(var(--u) * 0.32); flex: 1; }
.ab-k { display: grid; place-items: center; border: 1px solid #fff8; border-radius: calc(var(--u) * 0.15); font: 500 max(9px, calc(var(--u) * 0.58)) "Saira XC", sans-serif; letter-spacing: 0.06em; color: #f4f4f4; opacity: 0; transition: opacity 0.2s, background 0.1s, color 0.1s; }
.ab-keys.on .ab-k { opacity: 1; }
.ab-k.hit { background: #f2f2f2; color: #050505; }

.ab-skip { position: absolute; right: 22px; bottom: 20px; z-index: 20; background: none; border: 1px solid #fff3; color: #cfcfcf; font: 500 11px "Fira Code", monospace; letter-spacing: 0.22em; padding: 9px 14px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.ab-skip:hover, .ab-skip:focus-visible { background: #fff; color: #000; outline: none; }

/* tall (phone portrait): HUD re-flowed vertically */
.ab-tall .ab-log { left: 4vw; width: 94vw; bottom: 6vh; height: 92vh; font-size: clamp(7px, 1.9vw, 11px); }
.ab-tall .ab-term { left: 0; top: 21%; width: 100%; height: 37%; }
.ab-tall .ab-left { width: 48%; height: 18%; }
.ab-tall .ab-left .ab-blk, .ab-tall .ab-left .ab-stat:nth-of-type(2) { display: none; }
.ab-tall .ab-right { width: 46%; height: 18%; right: 0; }
.ab-tall .ab-right .ab-blk:not(.ab-wv) { display: none; }
.ab-tall .ab-globe { height: calc(var(--u) * 19); }
.ab-tall .ab-clock { font-size: max(24px, calc(var(--u) * 5.2)); }
.ab-tall .ab-sc i, .ab-tall .ab-bt, .ab-tall .ab-sub { font-size: max(9px, calc(var(--u) * 1.3)); }
.ab-tall .ab-sc b { font-size: max(11px, calc(var(--u) * 1.9)); }
.ab-tall .ab-tab { font-size: max(10px, calc(var(--u) * 2)); }
.ab-tall .ab-tabs { height: calc(var(--u) * 6.6); }
.ab-tall .ab-out { font-size: max(10.5px, calc(var(--u) * 1.95)); top: calc(var(--u) * 9); left: calc(var(--u) * 3); right: calc(var(--u) * 3); }
.ab-tall .ab-welcome { font-size: max(15px, calc(var(--u) * 3.1)); }
.ab-tall .ab-files { left: 0; width: 100%; top: 61%; bottom: auto; height: 27%; grid-template-columns: repeat(6, 1fr); }
.ab-tall .ab-file { font-size: max(8.5px, calc(var(--u) * 1.4)); }
.ab-tall .ab-keys { display: none; }


@media (prefers-reduced-motion: reduce) { .ab { display: none; } }

/* site build-in after the push-in: nav items flicker on one at a time like HUD panels */
html.ab-pre.ab-live header nav a, html.ab-pre.ab-live header > a:last-child { animation: ab-flick 0.55s steps(1) both; }
html.ab-pre.ab-live header nav a:nth-child(1) { animation-delay: 0.55s; }
html.ab-pre.ab-live header nav a:nth-child(2) { animation-delay: 0.7s; }
html.ab-pre.ab-live header nav a:nth-child(3) { animation-delay: 0.85s; }
html.ab-pre.ab-live header nav a:nth-child(4) { animation-delay: 1s; }
html.ab-pre.ab-live header > a:last-child { animation-delay: 1.15s; }

.ab-cam.gone { opacity: 0; transition: none; }
.ab-shake { position: absolute; inset: 0; perspective: 1500px; }




/* terminal finale line: the HUD's own display face, wide-tracked, framed like the active tab */



/* takeover helpers */
.ab-scr .drop { opacity: 0 !important; animation: none !important; }
.ab-cam.lunge { transform: scale(1.3); filter: blur(1.5px); }
.ab-logo.on2 { opacity: 1; animation: ab-line-open 0.8s steps(1) both; }
@keyframes ab-line-open {
  0% { opacity: 1; clip-path: inset(49.6% 0 49.6% 0); filter: brightness(3); transform: translate(-50%, -50%); }
  16% { clip-path: inset(49.6% 0 49.6% 0); filter: brightness(3); }
  30% { clip-path: inset(42% 0 42% 0); filter: brightness(2.2); transform: translate(-50.7%, -50%); }
  42% { clip-path: inset(10% 0 62% 0); transform: translate(-49.4%, -50%); }
  54% { clip-path: inset(56% 0 8% 0); transform: translate(-50.5%, -50%); }
  66% { clip-path: inset(0); filter: brightness(1.7); transform: translate(-50%, -50%); }
  78% { clip-path: inset(34% 0 30% 0); transform: translate(-49.6%, -50%); filter: brightness(1.3); }
  100% { clip-path: inset(0); filter: none; transform: translate(-50%, -50%); opacity: 1; }
}

/* ===== entry gate ===== */
.ab-gate { position: absolute; inset: 0; z-index: 30; background: #000; display: grid; place-content: center; gap: 14px; text-align: center; font-family: "Fira Code", monospace; }
.ab-gate-t { font: 600 clamp(20px, 3vw, 34px) "Saira XC", sans-serif; letter-spacing: 0.4em; padding-left: 0.4em; color: #fff; }
.ab-gate-s { font-size: 12px; letter-spacing: 0.18em; color: #9a9a9a; text-transform: uppercase; }
.ab-gate-s::after { content: "_"; animation: ab-blink 1s steps(1) infinite; }
.ab-gate-b { display: flex; gap: 14px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.ab-gbtn { font: 500 12px "Fira Code", monospace; letter-spacing: 0.22em; color: #000; background: #fff; border: 1px solid #fff; padding: 13px 20px; cursor: pointer; }
.ab-gbtn-dim { background: transparent; color: #d0d0d0; border-color: #fff5; }
.ab-gbtn:hover, .ab-gbtn:focus-visible { background: #d8d8d8; outline: none; }
.ab-gbtn-dim:hover, .ab-gbtn-dim:focus-visible { background: #fff2; color: #fff; }

/* ===== sound toggle ===== */
.ab-snd { position: absolute; right: 22px; bottom: 20px; z-index: 20; background: none; border: 1px solid #fff3; color: #cfcfcf; font: 500 11px "Fira Code", monospace; letter-spacing: 0.22em; padding: 9px 14px; cursor: pointer; }
.ab-snd:hover, .ab-snd:focus-visible { background: #fff; color: #000; outline: none; }

/* ===== typeable terminal on the logo screen ===== */
.ab-t2 { position: absolute; left: max(18px, 4vw); bottom: max(18px, 6vh); width: min(640px, calc(100vw - 36px)); z-index: 6; opacity: 0; transition: opacity 1.2s ease; font: 400 13px/1.5 "Fira Code", monospace; color: #e9e9e9; }
.ab-t2.on { opacity: 1; }
/* keyboard open (set from the visual viewport): lift the terminal above the keys and tuck the footer/Instagram away */
.ab-t2 { translate: 0 calc(var(--kb, 0px) * -1); transition: opacity 1.2s ease, translate 0.2s ease-out; }
/* only while the keyboard is open, and with plain top/width (no extra transforms on the masked, blended video element: iOS drops its frames) */
.ab-kb .ab-logo { top: var(--kb-top, 44%); width: var(--kb-w, min(88vw, 960px)); transition: top 0.25s ease-out, width 0.25s ease-out; }
.ab-kb .ab-foot, .ab-kb .ab-ig { opacity: 0 !important; pointer-events: none; }
.ab-t2-out { margin: 0 0 6px; white-space: pre-wrap; word-break: break-word; font: inherit; color: #bdbdbd; max-height: min(46vh, 430px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.ab-t2-line { display: flex; flex-wrap: wrap; align-items: baseline; }
.ab-t2-p { color: #fff; white-space: pre; }
.ab-t2-in { white-space: pre-wrap; word-break: break-all; color: #fff; }
.ab-t2-cur { display: inline-block; width: 0.6em; height: 1.1em; background: #fff; margin-left: 1px; transform: translateY(2px); animation: ab-blink 1s steps(1) infinite; }
.ab-t2-hint { color: #777; margin-left: 0.4em; opacity: 0; transition: opacity 0.8s; }
.ab-t2-hint.show { opacity: 1; }
.ab-t2-input { position: absolute; left: 0; bottom: 0; width: 100%; height: 1.6em; opacity: 0; font-size: 16px; border: 0; padding: 0; background: transparent; color: transparent; caret-color: transparent; }
.ab-logo.still video { visibility: visible; }

/* ===== HUD panel corner brackets ===== */
.ab-blk { position: relative; }
.ab-blk::before, .ab-blk::after { content: ""; position: absolute; width: calc(var(--u) * 0.75); height: calc(var(--u) * 0.75); pointer-events: none; }
.ab-blk::before { left: 0; top: 0; border-left: 1px solid #ffffffcc; border-top: 1px solid #ffffffcc; }
.ab-blk::after { right: 0; bottom: 0; border-right: 1px solid #ffffff99; border-bottom: 1px solid #ffffff99; }

/* ===== page base (moved out of inline <style> so a strict CSP can forbid inline styles) ===== */
html { color-scheme: dark; }
html, body { margin: 0; background: #000; color: #eee; font-family: system-ui, sans-serif; }
.ab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ab-nojs { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; background: #000; color: #fff; font: 600 20px/1.6 system-ui, sans-serif; letter-spacing: 0.3em; }
.ab-nojs span { font-weight: 400; font-size: 12px; letter-spacing: 0.2em; color: #999; }


/* ===== Instagram link, bottom right, black and white: the icon alone, no box ===== */
.ab-ig { position: absolute; right: max(14px, 2vw); bottom: max(14px, 2.6vh); z-index: 20; width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: none; opacity: 0; transition: opacity 1.4s ease; }
.ab-ig.on { opacity: 0.85; }
.ab-ig svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.ab-ig .ab-ig-dot { fill: #fff; stroke: none; }
.ab-ig:hover, .ab-ig:focus-visible { opacity: 1; outline: none; }
.ab-ig:hover svg, .ab-ig:focus-visible svg { transform: scale(1.12); }

/* ===== brand-logo glitch flash (~0.5 s at transitions) ===== */
.ab-gl { position: absolute; left: 50%; top: 46%; width: min(60vw, 620px); transform: translate(-50%, -50%); z-index: 8; opacity: 0; pointer-events: none; }
.ab-gl.on { opacity: 1; }
.ab-gl img { display: block; width: 100%; height: auto; }

/* ===== terminal links + the animated consent document ===== */
.ab-t2-l { white-space: pre-wrap; word-break: break-word; }
.ab-t2-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.ab-t2-link:hover, .ab-t2-link:focus-visible { background: #fff; color: #000; outline: none; }
.ab-doc { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: #000c; padding: 4vh 4vw; }
.ab-doc-frame { position: relative; width: min(780px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: #020202; border: 1px solid #ffffffcc; box-shadow: 0 0 28px #ffffff22, inset 0 0 40px #ffffff08; animation: ab-doc-open 0.5s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
@keyframes ab-doc-open { 0% { transform: scale(1, 0.004); opacity: 1; } 100% { transform: scale(1, 1); } }
.ab-doc-bar { display: flex; justify-content: space-between; align-items: center; background: #e8e8e8; color: #000; font: 600 12px "Saira XC", sans-serif; letter-spacing: 0.16em; padding: 8px 14px; clip-path: polygon(0 0, 100% 0, 98% 100%, 0 100%); }
.ab-doc-x { background: none; border: 0; color: #000; font: 600 11px "Saira XC", sans-serif; letter-spacing: 0.16em; cursor: pointer; padding: 4px 6px; }
.ab-doc-x:hover, .ab-doc-x:focus-visible { background: #000; color: #fff; outline: none; }
.ab-doc-body { padding: 18px 24px 24px; overflow: auto; font: 400 13px/1.65 "Fira Code", monospace; color: #e6e6e6; }
.ab-doc-h { color: #fff; font-weight: 500; letter-spacing: 0.14em; margin-top: 1.25em; min-height: 1.65em; }
.ab-doc-h:first-child { margin-top: 0; }
.ab-doc-t { min-height: 1.65em; }

/* ===== footer legal links, bottom centre ===== */
.ab-foot { position: absolute; left: 50%; bottom: max(16px, 2.8vh); transform: translateX(-50%); z-index: 20; display: flex; gap: 0.6em; align-items: center; font: 400 11px/1 "Fira Code", monospace; letter-spacing: 0.16em; color: #8e8e8e; opacity: 0; transition: opacity 1.2s ease; white-space: nowrap; }
.ab-foot.on { opacity: 1; }
.ab-foot a { color: #b8b8b8; text-decoration: none; padding: 10px 4px; }
.ab-foot a:hover, .ab-foot a:focus-visible { color: #000; background: #fff; outline: none; }
.ab-foot-sep { color: #555; }
@media (max-width: 760px) { .ab-t2 { bottom: calc(max(18px, 6vh) + 34px); } .ab-foot { bottom: 10px; font-size: 10.5px; } }