/* =====================================================================
   Ether Core Labs — ZZZ Proxy UI theme (zzz.css)
   Loaded after app.css + menu3d.css. Re-skins the whole site to match
   Zenless Zone Zero's in-game UI: black stage, carbon panels, slanted
   agent tiles, pill buttons, yellow selection frames, lime progress.
   Remove the <link> to this file to go back to the previous look.
   ===================================================================== */

:root {
  --zz-yel: #ffd60a;          /* selection frame / confirm */
  --zz-lime: #c4f02a;         /* progress, live, success */
  --zz-red: #f2361d;          /* back / close */
  --zz-s: #ff8a00;            /* S rank */
  --zz-a: #b86bff;            /* A rank */
  --zz-panel: #121212;
  --zz-panel-2: #1a1a1a;
  --zz-edge: #2a2a2a;
  --zz-carbon:
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 4px);
  --ink: #000; --ink-2: #111; --ink-3: #1b1b1b; --line: #262626;
  --paper: #fff; --muted: #9b9b9b;
  --signal: var(--zz-yel); --hazard: var(--zz-lime); --lime: var(--zz-lime); --accent: var(--zz-yel);
  --display: "Rubik", "Saira", system-ui, sans-serif;
  --body: "Rubik", "Saira", system-ui, sans-serif;
  --radius: 16px;
  --hard: 0 10px 26px rgba(0,0,0,.55);
}
html, body { background: #000; }
body { font-family: var(--body); color: #fff; font-weight: 500; }

/* ---------- Clean the stage: drop noise, scanlines, ghost runs, tapes ---------- */
body::before, body::after, #bg-run, #cursor-glow,
.zh-run, .zh-sweep, .zh-bars, .zh-sticker, .zh-tape, .page-head::after,
.section-head .h2::after, .desks-head .h2::after, .faq-head .h2::after,
.modal::before, .mega::before, .stats-strip::before,
.desk::after, .eg-card::after, .agent-card .meta::after,
.m3d-stage, .m3d-frame, .m3d-cursor, .tm-label::after,
.map-view::after { display: none !important; }
.sec-t::before, .section-head .h2::before { content: none !important; }
.zh-code, .hero-kicker, .fc-kicker { animation: none !important; }

/* ZZZ-style ghost lettering: huge, solid, barely there (no outlines, no motion) */
.hero-name, .ghost-run {
  color: #0f0f0f !important; -webkit-text-stroke: 0 !important; opacity: 1 !important;
  animation: none !important; text-shadow: none !important;
}
.hero-name .gr-row, .ghost-run .gr-row { animation-duration: 120s !important; }
.hero-name span, .ghost-run span { color: #101010 !important; -webkit-text-stroke: 0 !important; }

/* ---------- Typography ---------- */
.display, .h1, .h2, .zh-title, .h1.zh-title, .feat b, .desk b, .agent-card .meta b,
.box h3, .tm-label b, .ss-in b, .qb-h1, .bs-head h2, .fa-name, .uid-hero .uid-name {
  font-family: var(--display) !important; font-style: italic; letter-spacing: -.01em;
}
.zh-title, .h1.zh-title {
  font-weight: 900 !important; font-size: clamp(40px, 5.6vw, 76px) !important; line-height: .95 !important;
  text-transform: none !important; transform: none !important; color: #fff;
  text-shadow: 0 4px 0 #000, 0 0 2px #000 !important; animation: none !important;
}
html:not(.m3d-off) :is(.zh-title, .h1.zh-title, .hero .display span:first-child, .dossier-hero .copy .display) { animation: none !important; }
.h2 { font-weight: 800; text-transform: none; text-shadow: 0 3px 0 #000 !important; }
html:not(.m3d-off) :is(.h2, .feat b, .agent-card .meta b) { text-shadow: 0 3px 0 #000 !important; }
.kicker, .zh-code, .mega-k {
  font: 700 12px/1 var(--body) !important; font-style: normal !important; letter-spacing: .14em !important;
  color: var(--zz-yel) !important; text-transform: uppercase;
}
.lede, .zzz-head .lede { color: #b8b8b8 !important; font-size: 16px !important; }

/* ---------- Page header: back button + location pill, like the in-game top bar ---------- */
.zzz-head { padding: 26px 0 30px !important; }
.zzz-head::before {
  background: none !important;
}
.zh-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.zz-back {
  display: inline-grid; place-items: center; width: 64px; height: 42px; flex: none;
  border: 3px solid var(--zz-red); border-radius: 14px 22px 22px 14px; background: #0a0a0a;
  color: var(--zz-red); cursor: pointer; transform: skewX(-8deg);
  box-shadow: 0 3px 0 #000;
  transition: background .15s, transform .12s;
}
.zz-back svg { width: 24px; height: 24px; transform: skewX(8deg); }
.zz-back:hover { background: var(--zz-red); color: #000; }
.zz-back:active { transform: skewX(-8deg) translateY(2px); }
.zh-code {
  display: inline-flex !important; align-items: center; gap: 12px; height: 42px; padding: 0 22px 0 4px !important;
  background: #0d0d0d !important; border: 3px solid #333 !important; border-radius: 999px !important;
  color: #fff !important; font: 800 16px/1 var(--display) !important; font-style: italic !important;
  letter-spacing: 0 !important; text-transform: none !important; clip-path: none !important; transform: none !important;
}
.zh-code::before {
  content: ""; width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3 2 11h3v9h5v-6h4v6h5v-9h3z' fill='%23000'/></svg>") center/18px no-repeat;
}

/* ---------- Top navigation bar ---------- */
.bar { background: rgba(0,0,0,.94) !important; border-bottom: 1px solid #1d1d1d !important; box-shadow: none !important; backdrop-filter: blur(8px); }
.bar::after, .bar::before { display: none !important; }
.nav-code { display: none !important; }
.nav-btn {
  font: 700 15px/1 var(--body) !important; font-style: italic !important; color: #bdbdbd !important;
  border-radius: 999px !important; padding: 10px 14px !important; transform: none !important;
  background: transparent !important; box-shadow: none !important; text-transform: none !important;
}
.nav-btn:hover, .nav-btn[aria-expanded="true"] { color: #fff !important; background: #1a1a1a !important; }
.nav-btn[aria-current="page"] { color: #000 !important; background: #fff !important; }
html:not(.m3d-off) :is(.nav-btn, .nav a)[aria-current="page"] { box-shadow: 0 3px 0 #000 !important; }
.cs-btn {
  background: var(--zz-yel) !important; color: #000 !important; border: 0 !important;
  border-radius: 999px !important; clip-path: none !important; box-shadow: 0 3px 0 #000 !important;
  transform: skewX(-8deg) !important;
}
.cs-btn > * { transform: skewX(8deg); }
.search-btn { border: 2px solid #333 !important; background: #0d0d0d !important; border-radius: 50% !important; }

/* dropdown menus: dark carbon slab, rows highlight with a yellow bar */
.mega, .cs-menu {
  background: var(--zz-carbon), #111 !important; border: 2px solid #2e2e2e !important;
  border-radius: 20px !important; padding: 14px !important;
}
html:not(.m3d-off) :is(.mega, .cs-menu) { box-shadow: 0 24px 60px rgba(0,0,0,.8) !important; }
.mega a, .cs-menu a { border-radius: 12px !important; position: relative; border: 0 !important; }
.mega a:hover, .cs-menu a:hover, .mega a:focus-visible, .cs-menu a:focus-visible {
  background: #1f1f1f !important; box-shadow: inset 4px 0 0 var(--zz-yel) !important;
}
.mega a b, .cs-menu a b { font-family: var(--display) !important; font-style: italic; font-weight: 800; }

/* ---------- Buttons: pills ---------- */
.btn {
  font: 800 15px/1 var(--display) !important; font-style: italic !important; text-transform: none !important;
  letter-spacing: 0 !important; border-radius: 999px !important; clip-path: none !important;
  background: #0f0f0f !important; color: #fff !important; border: 3px solid #3a3a3a !important;
  padding: 12px 26px !important;
}
html:not(.m3d-off) .btn, html:not(.m3d-off) .btn:hover { box-shadow: 0 4px 0 #000, inset 0 0 0 1px rgba(255,255,255,.04) !important; }
.btn:hover { border-color: #fff !important; animation: none !important; transform: translateY(-2px) !important; }
.btn-primary { background: var(--zz-yel) !important; color: #000 !important; border-color: var(--zz-yel) !important; }
.btn-primary:hover { border-color: #fff !important; }
html:not(.m3d-off) .btn:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 #000 !important; }

.chip, .tier-tab {
  font: 700 14px/1 var(--body) !important; font-style: italic !important; border-radius: 999px !important;
  background: #0f0f0f !important; border: 2px solid #2e2e2e !important; color: #d6d6d6 !important; clip-path: none !important;
}
html:not(.m3d-off) :is(.chip, .tier-tab) { box-shadow: 0 3px 0 #000 !important; }
.chip:hover, .tier-tab:hover { border-color: #777 !important; color: #fff !important; }
.chip[aria-pressed="true"], .tier-tab[aria-pressed="true"], .tier-tab.on, .chip.on {
  background: var(--zz-yel) !important; color: #000 !important; border-color: var(--zz-yel) !important;
}
html:not(.m3d-off) :is(.chip, .tier-tab)[aria-pressed="true"] { box-shadow: 0 3px 0 #000 !important; }
.chip[aria-pressed="true"] img { filter: brightness(0); }
.field input, .sel, input[type=search], input[type=text], select {
  border-radius: 999px !important; background: #0d0d0d !important; border: 2px solid #2e2e2e !important;
}
.field input:focus, .sel:focus { border-color: var(--zz-yel) !important; outline: none; }

/* ---------- Panels & modals: carbon fibre slabs ---------- */
.box {
  background: var(--zz-carbon), linear-gradient(180deg, #151515, #0c0c0c) !important;
  border: 2px solid #232323 !important; border-radius: 22px !important;
}
html:not(.m3d-off) .box { box-shadow: 0 16px 40px rgba(0,0,0,.6) !important; }
.box h3 { text-transform: none !important; font-weight: 800; }
.modal {
  background: var(--zz-carbon), #151515 !important; border: 2px solid #2b2b2b !important; border-radius: 26px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.85) !important;
}
.modal-x {
  width: 58px !important; height: 40px !important; border-radius: 12px 18px 18px 12px !important;
  background: var(--zz-red) !important; color: #000 !important; font-weight: 900 !important;
  transform: skewX(-8deg); box-shadow: 0 3px 0 #000 !important; border: 2px solid #ff6a50 !important;
}
.modal-back { background: rgba(0,0,0,.72) !important; backdrop-filter: blur(6px); }

/* ---------- Slabs: flat ZZZ tiles, yellow selection frame ---------- */
html:not(.m3d-off) :is(.desk,.feat,.agent-card,.cat-card,.boo-card,.enemy,.disc,.loc,.guide,.tcard,.slot-card,.eg-card,.quick a,.live-card) {
  --rw: 0px;
  box-shadow: 0 0 0 var(--rw) var(--zz-yel), 0 14px 30px rgba(0,0,0,.6) !important;
  border-color: #242424 !important;
}
html:not(.m3d-off) :is(.desk,.feat,.agent-card,.cat-card,.boo-card,.enemy,.disc,.loc,.guide,.tcard,.slot-card,.eg-card,.quick a,.live-card):is(:hover,:focus-visible) {
  --rw: 4px; border-color: #000 !important; --pop: 16px;
}
:is(.desk,.feat,.agent-card,.cat-card,.boo-card,.enemy,.loc,.tcard,.slot-card,.eg-card,.quick a,.live-card):focus-visible { outline: none !important; }

/* Agent tiles: slanted like the in-game roster */
.agent-grid { gap: 14px 10px !important; padding: 6px 14px; }
.agent-card { --sk: -7deg; border-radius: 14px !important; border: 3px solid #1e1e1e !important; background: #161616 !important; overflow: hidden; }
html.m3d-off .agent-card { transform: skewX(-7deg) !important; }
.agent-card > img { transform: skewX(7deg) scale(1.22) !important; transform-origin: 50% 30%; }
.agent-card:hover > img { transform: skewX(7deg) scale(1.3) !important; }
.agent-card .meta { transform: skewX(7deg); left: -8px !important; right: -8px !important; padding: 28px 18px 10px !important; background: linear-gradient(transparent, rgba(0,0,0,.9) 55%) !important; }
.agent-card .meta b { font-size: 19px !important; text-transform: none !important; font-weight: 800 !important; }
.agent-card .meta small { color: #cfcfcf !important; font-weight: 600 !important; }
.agent-card .rank, .rank-badge {
  transform: skewX(7deg) !important; clip-path: none !important; border-radius: 6px !important;
  background: linear-gradient(180deg, #ffb13a, var(--zz-s)) !important; color: #000 !important;
  font: 900 italic 18px/1 var(--display) !important; padding: 4px 8px !important;
  box-shadow: 0 0 0 2px #000, 0 3px 0 2px #000 !important; left: 14px !important; top: 10px !important;
}
.agent-card .rank.a { background: linear-gradient(180deg, #d39bff, var(--zz-a)) !important; }
.agent-card .new {
  transform: skewX(7deg) !important; clip-path: none !important; border-radius: 999px !important;
  background: var(--zz-lime) !important; color: #000 !important; right: 14px !important; font-style: italic;
}
.agent-card .new.up { background: #fff !important; }
.agent-card::after { display: none !important; }

/* Desks + feature tiles: location-select cards (art fills, title bottom-right) */
.desk {
  border-radius: 18px !important; border: 3px solid #242424 !important; background: #0d0d0d !important;
  justify-content: flex-end; text-align: right;
}
.desk::before { background: linear-gradient(0deg, rgba(0,0,0,.85) 8%, rgba(0,0,0,0) 60%) !important; }
.desk > div b {
  font-size: clamp(28px, 2.6vw, 40px) !important; font-weight: 900 !important; text-transform: none !important;
  text-shadow: 0 3px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000 !important;
}
html:not(.m3d-off) :is(.desk b, .faq-head .h2) { text-shadow: 0 3px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000 !important; }
.desk > div span { color: #d0d0d0 !important; }
.desk-n { font: 900 italic 14px/1 var(--display) !important; background: #000; color: #fff !important; padding: 6px 10px; border-radius: 999px; }
.desk-go { background: var(--zz-yel) !important; color: #000 !important; border: 0 !important; }
html:not(.m3d-off) .desk-go { box-shadow: 0 3px 0 #000 !important; }
.desk-go { display: none !important; }

.feat { border-radius: 18px !important; border: 3px solid #242424 !important; background: #0d0d0d !important; }
.feat::after { background: linear-gradient(0deg, rgba(0,0,0,.88) 10%, rgba(0,0,0,.1) 70%) !important; }
.feat > img { opacity: .9 !important; }
.feat b { font-size: 24px !important; text-transform: none !important; font-weight: 900 !important; }
.feat-n { color: var(--zz-yel) !important; font-style: italic; }

/* Stats: HoYoLAB-style yellow card with a black inset */
.stats-strip { background: transparent !important; border: 0 !important; padding: 10px 0; }
.stats-strip .ss-in {
  background: #000; border: 6px solid var(--zz-yel); border-radius: 22px; padding: 18px 10px !important;
  box-shadow: 0 0 0 4px var(--zz-yel);
}
.ss-in div { color: #fff !important; }
.ss-in b { color: var(--zz-yel) !important; font-weight: 900 !important; text-shadow: none !important; }
html:not(.m3d-off) .ss-in b { text-shadow: none !important; }
.ss-in span { font-family: var(--body) !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: none !important; color: #e8e8e8; }

/* Hero: black stage, clean title card */
.hero { background: #000 !important; }
.hero-kicker {
  background: #fff !important; color: #000 !important; border-radius: 999px !important; clip-path: none !important;
  transform: none !important; font: 800 italic 13px/1 var(--display) !important; letter-spacing: .02em !important; text-transform: none !important;
}
.hero .display { font-weight: 900 !important; text-transform: none !important; }
.hero .display span { text-shadow: 0 5px 0 #000 !important; }
html:not(.m3d-off) .hero .display span:first-child { text-shadow: 0 5px 0 #000, 0 0 2px #000 !important; }
.hero .display span:nth-child(2) { color: var(--zz-yel) !important; -webkit-text-stroke: 0 !important; }
.tape, .hero-tape {
  background: #0b0b0b !important; color: #cfcfcf !important; border-top: 1px solid #222 !important; border-bottom: 1px solid #222 !important;
  font-family: var(--display) !important; font-style: italic;
}
html:not(.m3d-off) .tape { box-shadow: none !important; transform: none !important; }
.spot-card { border-radius: 999px !important; background: #0d0d0d !important; border: 2px solid #2e2e2e !important; }

/* Tier list labels: rounded tags */
.tm-label { border-radius: 16px !important; border: 0 !important; box-shadow: 0 4px 0 #000 !important; }
.tm-label b { text-shadow: none !important; }

/* Dossier / UID: black stage with soft agent colour, neutral pedestal */
.dossier-hero { background: radial-gradient(50% 80% at 76% 55%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), #000 !important; }
.dossier-hero::before { opacity: .35; }
.m3d-pad { opacity: .55; }

/* ---------- Footer & mobile tab bar ---------- */
.foot { background: #000 !important; border-top: 1px solid #1d1d1d !important; }
.tabs-m { background: rgba(0,0,0,.96) !important; border-top: 1px solid #1d1d1d !important; }
.tabs-m a[aria-current="page"] { color: var(--zz-yel) !important; }

/* ---------- Controls HUD: in-game prompt pill ---------- */
.m3d-hud { background: rgba(0,0,0,.9) !important; border: 2px solid #2e2e2e !important; border-radius: 999px !important; transform: none !important; box-shadow: 0 10px 30px rgba(0,0,0,.6) !important; font-family: var(--body) !important; }
.m3d-hud kbd { border-radius: 8px !important; background: #fff !important; color: #000 !important; border: 0 !important; box-shadow: 0 2px 0 #777 !important; }
.m3d-hud button { background: var(--zz-yel) !important; box-shadow: 0 2px 0 #000 !important; }

/* Labyrinth: map frame + camera controls in the same language */
.map-view { border: 3px solid #2a2a2a !important; border-radius: 22px !important; box-shadow: 0 20px 50px rgba(0,0,0,.6) !important; }
.m3d-labctl { border-radius: 999px !important; }
.m3d-labctl button { border-radius: 999px !important; }
.m3d-labctl button[data-lab=toggle] { background: var(--zz-yel) !important; border-color: var(--zz-yel) !important; }

/* selection colour */
::selection { background: var(--zz-yel); color: #000; }

/* ---------- Tool page headers: same clean title treatment everywhere ---------- */
.uid-hero .uid-name, .qb-h1, .bs-head h2, .fa-name, .prof-id h2, .ld-title, .uid-bar h1, .lab-head h1, .tb-head h1 {
  font-family: var(--display) !important; font-style: italic !important; font-weight: 900 !important;
  text-transform: none !important; letter-spacing: -.01em !important;
  text-shadow: 0 4px 0 #000, 0 0 2px #000 !important; transform: none !important; animation: none !important; color: #fff;
}
.uid-bar, .bs-head { border-bottom: 1px solid #222 !important; border-image: none !important; }
.prof-av { border-color: #fff !important; box-shadow: 0 0 0 3px #000, 0 6px 18px rgba(0,0,0,.6) !important; }
.uid-card { background: var(--zz-carbon), #121212 !important; border: 2px solid #262626 !important; border-radius: 22px !important; }
.uid-card::before, .uid-card::after { border-color: #444 !important; }
.uid-hero { border-radius: 24px !important; border: 2px solid #262626 !important; overflow: hidden; }

/* ---------- Sweep leftover orange: panels, active tabs, glows ---------- */
.box, .feat, .bs-panel, .board-col, .egl, .upd, .disc-slot {
  background-image: var(--zz-carbon), linear-gradient(180deg, #151515, #0c0c0c) !important;
  background-size: auto !important;
}
.board-col { border-radius: 20px !important; }
.bs-panel, .disc-slot, .egl, .upd { border-radius: 18px !important; }
:is(.pill, .atab, .mem-tab, .roll, .seg button, .leader-tabs button).on,
:is(.pill, .atab, .mem-tab, .roll)[aria-pressed="true"] {
  background: var(--zz-yel) !important; color: #000 !important; border-color: var(--zz-yel) !important;
  box-shadow: 0 3px 0 #000 !important; text-shadow: none !important;
}
:is(.pill, .atab, .mem-tab, .roll) { border-radius: 999px !important; clip-path: none !important; }
.qb-tile.on { border-color: var(--zz-yel) !important; box-shadow: 0 0 0 3px var(--zz-yel), 0 8px 20px rgba(0,0,0,.6) !important; background-color: #1a1a1a !important; }
.import-btn { background: var(--zz-yel) !important; color: #000 !important; border-radius: 999px !important; box-shadow: 0 4px 0 #000 !important; }
.prof, section.prof { box-shadow: 0 16px 40px rgba(0,0,0,.6) !important; border-color: #2a2a2a !important; }
.big, .big.pop, .rank-num, .rank-letter, .chainline.big { text-shadow: 0 3px 0 #000 !important; }
.bs-row.best { background: color-mix(in srgb, var(--zz-yel) 14%, #111) !important; }
.kicker { text-shadow: none !important; }

/* multi-line text boxes keep a panel shape (pills hide the text) */
textarea, textarea.sel, .field textarea {
  border-radius: 18px !important; padding: 14px 18px !important;
  min-height: 140px; line-height: 1.5; resize: vertical;
}
.btn { justify-content: center; text-align: center; }

/* picture tiles and tall buttons: rounded squares, not pills */
.bp, .tbb { border-radius: 18px !important; overflow: hidden; }
.bp.on, .tbb.on, .bp[aria-pressed="true"], .tbb[aria-pressed="true"] {
  background-color: #111 !important; background-image: none !important;
  border-color: var(--zz-yel) !important; color: #fff !important;
  box-shadow: 0 0 0 3px var(--zz-yel), 0 8px 20px rgba(0,0,0,.6) !important;
}
.spot-card, .pills.mini, #r-mode.btn, .ld-route .btn { border-radius: 18px !important; }

/* =====================================================================
   Featured agent: ZZZ "new agent" reveal banner
   ===================================================================== */
.featured {
  --fx: var(--zz-yel);
  overflow: visible !important; isolation: isolate; border: 0 !important; background: none !important;
  min-height: 460px !important; margin-top: 40px !important; border-radius: 26px !important;
  box-shadow: none !important;
}
/* stage: speed lines + ray burst + halftone, clipped to the card */
.featured .fx-stage {
  position: absolute; inset: 0; z-index: -3; border-radius: 26px; overflow: hidden;
  background:
    radial-gradient(60% 90% at 26% 55%, color-mix(in srgb, var(--fx) 34%, transparent), transparent 70%),
    linear-gradient(115deg, #0b0b0b 0 52%, #050505 52%);
}
.featured .fx-rays {
  position: absolute; left: 26%; top: 55%; width: 1600px; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--fx) 26%, transparent) 0 5deg, transparent 5deg 14deg);
  -webkit-mask: radial-gradient(circle, #000 0 12%, transparent 46%); mask: radial-gradient(circle, #000 0 12%, transparent 46%);
  animation: fxSpin 60s linear infinite; will-change: rotate;
}
.featured .fx-lines {
  position: absolute; inset: -20%;
  background: repeating-linear-gradient(-62deg, transparent 0 46px, rgba(255,255,255,.035) 46px 48px, transparent 48px 120px, color-mix(in srgb, var(--fx) 18%, transparent) 120px 123px);
  animation: fxSlide 6s linear infinite; will-change: transform;
}
.featured .fx-dots {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,.11) 1.2px, transparent 1.6px) 0 0 / 11px 11px;
  -webkit-mask: linear-gradient(115deg, transparent 50%, #000 75%); mask: linear-gradient(115deg, transparent 50%, #000 75%);
}
.featured .fx-ghost {
  position: absolute; right: -4%; bottom: -6%; z-index: 0; white-space: nowrap; pointer-events: none;
  font: 900 italic clamp(140px, 19vw, 300px)/.8 var(--display); letter-spacing: -.03em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--fx) 35%, transparent); opacity: .7;
  transform: skewX(-8deg);
}
.featured .fx-sweep {
  position: absolute; top: 0; bottom: 0; width: 30%; left: -40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent);
  transform: skewX(-20deg); animation: fxSweep 5.5s ease-in-out infinite;
}
/* animated frame: yellow into the agent's element colour */
.featured .fx-frame {
  position: absolute; inset: 0; z-index: 2; border-radius: 26px; padding: 3px; pointer-events: none;
  background: linear-gradient(var(--fx-a, 120deg), var(--zz-yel), var(--fx) 45%, #fff 55%, var(--zz-yel));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: fxFrame 6s linear infinite;
}
@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 120deg; }
@keyframes fxFrame { to { --fx-a: 480deg; } }
@keyframes fxSpin { to { rotate: 360deg; } }
@keyframes fxSlide { to { transform: translateX(246px); } }
@keyframes fxSweep { 0%, 55% { left: -40%; } 100% { left: 130%; } }

/* character pops out of the top of the card */
.featured .fa-art { position: relative; align-self: stretch; z-index: 1; overflow: hidden !important; border-radius: 26px 0 0 26px; clip-path: none !important; -webkit-mask: none !important; mask: none !important; }
.featured .fa-art img {
  position: absolute !important; left: auto !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  height: 100% !important; width: 100% !important; max-width: 100% !important; object-fit: contain !important; object-position: center center !important;
  inset: 0 !important;
  translate: calc(var(--fx-x, 0) * -18px) calc(var(--fx-y, 0) * -10px);
  filter: drop-shadow(0 0 0 #fff) drop-shadow(4px 0 0 var(--fx)) drop-shadow(-2px 0 0 #000) drop-shadow(0 24px 30px rgba(0,0,0,.7)) !important;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 16%), linear-gradient(to bottom, transparent 0, #000 9%), linear-gradient(to left, transparent 0, #000 12%), linear-gradient(to right, transparent 0, #000 10%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, transparent 0, #000 16%), linear-gradient(to bottom, transparent 0, #000 9%), linear-gradient(to left, transparent 0, #000 12%), linear-gradient(to right, transparent 0, #000 10%);
  mask-composite: intersect;
  transition: translate .5s cubic-bezier(.2,.8,.2,1), scale .5s;
}
.featured .fa-art img { transform: none !important; animation: fxFloat 5s ease-in-out infinite !important; }
@keyframes fxFloat { 50% { transform: translateY(-10px); } }
.featured:hover .fa-art img { scale: 1.03; }
.featured .fx-stamp {
  position: absolute; left: 7%; top: 9%; z-index: 3;
  padding: 10px 18px 10px 14px; border-radius: 10px;
  background: var(--zz-yel); color: #000; transform: rotate(-8deg) skewX(-10deg);
  font: 900 italic 20px/1 var(--display); letter-spacing: .02em; text-transform: uppercase;
  box-shadow: 0 4px 0 #000, 0 0 0 3px #000, 0 10px 30px rgba(255,214,10,.4);
  animation: fxStamp .7s cubic-bezier(.2,1.6,.4,1) both .3s;
}
.featured .fx-stamp small { display: block; font: 800 10px/1.2 var(--body); font-style: normal; letter-spacing: .12em; opacity: .75; }
@keyframes fxStamp { from { opacity: 0; transform: rotate(-8deg) skewX(-10deg) scale(2.4); } }

/* copy side */
.featured .fa-copy { position: relative; z-index: 3; padding: 40px 44px 40px 10px !important; }
.featured .kicker {
  display: flex !important; width: fit-content; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: #000; border: 2px solid var(--fx); color: var(--fx) !important;
}
.featured .kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fx); box-shadow: 0 0 10px var(--fx); animation: fxPulse 1.4s infinite; }
@keyframes fxPulse { 50% { opacity: .3; } }
.featured .fa-name {
  position: relative; display: block; width: fit-content; padding-right: .12em; margin: 12px 0 2px !important;
  font-size: clamp(64px, 8vw, 118px) !important; line-height: .9 !important;
  background: linear-gradient(100deg, #fff 0 40%, var(--fx) 50%, #fff 60% 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  text-shadow: none !important; filter: drop-shadow(5px 5px 0 #000) drop-shadow(0 0 22px color-mix(in srgb, var(--fx) 40%, transparent));
  animation: fxShine 4s linear infinite !important; transform: skewX(-6deg) !important;
}
@keyframes fxShine { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.featured .fa-meta {
  display: block; width: fit-content; margin: 4px 0 14px !important; padding: 6px 12px; border-radius: 8px;
  background: var(--fx); color: #000 !important; font: 800 italic 14px/1 var(--display) !important; letter-spacing: .02em !important;
  transform: skewX(-8deg);
}
.featured .fa-quote {
  border-left: 0 !important; padding: 14px 18px !important; border-radius: 16px;
  background: rgba(255,255,255,.04); box-shadow: inset 4px 0 0 var(--fx); color: #e6e6e6 !important;
}
.featured .fa-build { gap: 10px !important; }
.featured .fa-build > div {
  border-radius: 14px !important; background: linear-gradient(135deg, #151515, #0b0b0b) !important;
  border: 2px solid #262626 !important; box-shadow: inset 0 3px 0 var(--fx) !important;
  transform: skewX(-6deg); transition: transform .2s, border-color .2s;
}
.featured .fa-build > div > * { transform: skewX(6deg); }
.featured .fa-build > div:hover { transform: skewX(-6deg) translateY(-3px); border-color: var(--fx) !important; }
.featured .fa-build small { color: var(--fx) !important; }
.featured .hero-cta .btn-primary { box-shadow: 0 4px 0 #000, 0 0 24px rgba(255,214,10,.45) !important; }

@media (max-width: 900px) {
  .featured { margin-top: 30px !important; }
  .featured .fa-art { min-height: 360px; border-radius: 26px 26px 0 0; }
  .featured .fa-copy { padding: 10px 20px 30px !important; }
  .featured .fx-stamp { left: 6%; top: 6%; font-size: 16px; }
}
html.rm .featured *, html.rm .featured *::before { animation: none !important; }