/* gencrash — the genius.fun register laid over the motion system: deep violet field with a pixel-check
   texture, panels #090014 with #2e2145 hairlines, 4px radii, pink oklab CTAs, italic 800 display type,
   JetBrains Mono for every label and number, buy-green for wins. Loaded after site.css. */
:root {
  --bg: #0b0716; --bg2: #0e0a1c; --panel: #090014; --panel2: #14102a;
  --line: #2e2145; --line2: #46356a;
  --y: #ff3884; --y2: #fe86b4; --amber: #ff5fa2; --o: #c05cff; --r: #ff3884;
  --txt: #f2f0ff; --mut: #a99cc4; --mut2: #6d6190;
  --grad: linear-gradient(in oklab 90deg, #fe86b4, #ff3884);
  --green: #00ff88;
}
html { background: var(--bg); }
body.landing { background: var(--bg); background-image: linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%), linear-gradient(45deg, rgba(255,255,255,.028) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.028) 75%); background-size: 10px 10px; background-position: 0 0, 5px 5px; }
.sec { background: transparent !important; }
.quote, .account, .watch { background: rgba(9,0,20,.55) !important; }
.h-xl, .h-lg, .h-md, .quote-txt, .blk h3, .card h3, .hc h3, .ht { font-family: var(--ff); font-weight: 800; font-style: italic; letter-spacing: -.03em; }
.h-md { font-weight: 700; }
.eyebrow, .quote-by, .best-card span, .best-card small, .t-row, .fnode small, .result .tag, .ht small, .wc h4, .ftr-col h5, .ftr-col a, .ftr-bottom, .chips-marquee .row span, .hood-live, .card p, .blk > p, .lead, .wc p, .diag .nd text { font-family: var(--fm); }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: calc(var(--u) * 11.5); color: var(--y2); }
.eyebrow .sx-wipe { color: var(--y2); }
.quote-by { color: var(--y2); text-transform: uppercase; letter-spacing: .1em; font-size: calc(var(--u) * 11.5); }
.lead, .card p, .blk > p, .wc p, .built-txt p.sx-lines, .account-side p.sx-lines, .hc p { font-family: var(--ff); }
.btn, .xbtn, .t-go, .best-card b { border-radius: 4px; }
.btn { font-family: var(--fm); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: calc(var(--u) * 12); }
.btn.open { background: var(--grad); color: #0b0716; box-shadow: 0 0 24px rgba(255,56,132,.35); }
.btn.open:hover { background: linear-gradient(in oklab 90deg, #ffa3c8, #ff5a9c); box-shadow: 0 0 34px rgba(255,56,132,.5); }
.btn.ghost { background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--grad); color: #0b0716; border-color: transparent; }
.btn .arr { border-radius: 3px; }
.xbtn { background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.hdr-pill, .menu { border-radius: 4px !important; }
.hdr-pill { background: rgba(9,0,20,.85) !important; border: 1px solid var(--line); }
.brand span { font-family: var(--ff); font-weight: 800; font-style: italic; letter-spacing: -.02em; }
.menu a { font-family: var(--fm); text-transform: uppercase; letter-spacing: .06em; font-size: calc(var(--u) * 11.5); }
.hdr-home { font-family: var(--fm); text-transform: uppercase; letter-spacing: .08em; font-size: calc(var(--u) * 11.5); color: var(--mut); }
/* panels */
.card-vis, .blk-vis, .result, .best-card, .ticket, .wc, .cta-card, .ftr-open, .pos-card, .diag .nd rect, .card-vis.steps .step, .flow .fnode b, .fnode.k, .fnode small, .out span, .chips-marquee .row span { border-radius: 4px !important; }
.card-vis, .blk-vis, .result, .wc, .cta-card, .ftr-open { background: var(--panel) !important; border-color: var(--line) !important; }
.best-card, .ticket, .card-vis.steps .step, .diag .nd rect { background: #0b0716 !important; border-color: var(--line) !important; }
.wc:hover { border-color: var(--y) !important; box-shadow: 0 0 22px rgba(255,56,132,.22); }
.wc h4 { font-family: var(--ff); font-weight: 700; font-style: normal; }
.chips-marquee { background: rgba(9,0,20,.7) !important; border-color: var(--line) !important; }
.chips-marquee .row span { background: #14102a; font-size: calc(var(--u) * 11.5); text-transform: uppercase; letter-spacing: .06em; }
.chips-marquee .row span.hl { background: var(--grad); color: #0b0716; }
.chips-marquee .row span.lt { background: #f2f0ff; color: #0b0716; }
.result .tag { background: var(--grad); color: #0b0716; text-transform: uppercase; letter-spacing: .08em; font-size: calc(var(--u) * 10.5); }
.ic { background: var(--grad); border-radius: 3px; }
.ic::after { background: #0b0716; }
.wi { background: var(--y); }
.best-card b { color: var(--green); font-family: var(--fm); font-weight: 600; }
.fnode b.y, .out .y, .t-go { background: var(--grad); color: #0b0716; }
.fnode b.o, .out .o { background: #c05cff; color: #0b0716; }
.fnode b.r { background: var(--y); color: #0b0716; }
.t-row b.y { color: var(--y2); }
.t-go { font-family: var(--fm); text-transform: uppercase; letter-spacing: .08em; font-size: calc(var(--u) * 11.5); }
.pos-card { background: #f2f0ff; }
.hood { background: var(--bg) !important; }
.hood-left { background: linear-gradient(160deg, #1a0f3a 0%, #2b1856 45%, #6a2a6e 100%) !important; border-radius: 0; }
.hood-left .eyebrow { background: var(--grad); color: #0b0716; border-radius: 4px; }
.ht { font-style: normal; font-weight: 700; }
.ht.on small { color: var(--y2); }
.hood-live { background: rgba(9,0,20,.8); border: 1px solid var(--line); border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; font-size: calc(var(--u) * 11); }
.hood-live .dot { background: var(--green); box-shadow: 0 0 0 0 rgba(0,255,136,.6); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,255,136,.6); } 70% { box-shadow: 0 0 0 10px rgba(0,255,136,0); } 100% { box-shadow: 0 0 0 0 rgba(0,255,136,0); } }
.hood-right { background: var(--panel) !important; }
/* the big "book" headline block gets genius's hero-panel treatment */
.book .wrap { position: relative; }
.book-panel { position: relative; padding: calc(var(--u) * 60) calc(var(--u) * 56); border-radius: 6px; border: 1px solid #5a3f8a; background: radial-gradient(120% 160% at 100% 100%, rgba(255,120,190,.55) 0%, rgba(170,80,200,.38) 32%, rgba(60,30,110,.55) 62%, rgba(20,10,40,.9) 100%), #1a0f3a; box-shadow: 0 0 60px rgba(255,56,132,.12), inset 0 0 0 1px rgba(255,255,255,.04); overflow: hidden; }
.book-panel::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.05) 75%), linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.05) 75%); background-size: 8px 8px; background-position: 0 0, 4px 4px; opacity: .35; pointer-events: none; mix-blend-mode: overlay; }
.book-panel > * { position: relative; z-index: 1; }
.book-panel .h-xl { text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 30px rgba(255,56,132,.25); }
.book-panel .lead { color: #f2f0ff; }
.cta-in .h-xl { text-shadow: 0 0 30px rgba(255,56,132,.35); }
.cta-card { background: radial-gradient(120% 160% at 100% 100%, rgba(255,120,190,.5) 0%, rgba(120,60,180,.4) 40%, rgba(20,10,40,.95) 100%), #1a0f3a !important; }
/* footer */
.ftr { background: #06000f !important; }
.ftr-word span { font-family: var(--ff); font-weight: 800; font-style: italic; }
.ftr-word em { font-family: var(--fm); text-transform: uppercase; letter-spacing: .08em; font-size: calc(var(--u) * 11); }
.ftr-open span { font-family: var(--ff); font-weight: 800; font-style: italic; }
.ftr-open:hover span { color: var(--y2); }
.ftr-col a::after { color: var(--y2) !important; }
.ftr-bottom { text-transform: uppercase; letter-spacing: .06em; font-size: calc(var(--u) * 11); }
/* loader + wipe */
#sxEnter { background: var(--bg); }
#sxLoader { font-family: var(--fm); text-transform: uppercase; letter-spacing: .12em; font-size: calc(var(--u) * 12); }
#sxFill { background: var(--grad); }
#sx-wipe { background: var(--y); }
.sx-wipe .sx-wipe-cv { image-rendering: pixelated; }

.hdr-right .btn { padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 14); font-size: calc(var(--u) * 11); }
.book-panel .h-xl { font-size: calc(var(--u) * 58); max-width: calc(var(--u) * 1100); }
@media (max-width: 1000px) { .book-panel { padding: calc(var(--u) * 40) calc(var(--u) * 28); } .book-panel .h-xl { font-size: calc(var(--u) * 44); } .hdr-right .btn { font-size: calc(var(--u) * 10); } }

.hood-left .eyebrow, .hood-left .eyebrow .sx-wipe { color: #0b0716; }
@media (max-width: 1000px) { .h-lg { font-size: calc(var(--u) * 38); } .reach-head { flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 18); } }