/* DiviDen's galaxy, live: the page round the 3D (its top line, the labels on things, the feed of what happens, Divi's panel, a card) */
:root { --sky: #04050c; --ink: #f3f1fd; --ink2: #cac9e4; --ink3: #9a94b6; --line: rgba(214, 196, 255, 0.2); --glass: rgba(14, 11, 34, 0.78); --violet: #9b6bff; --violet2: #6933ff; --gold: #ffd36b; --green: #6ef0b0; --serif: 'Fraunces', Georgia, serif }
* { box-sizing: border-box }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sky); color: var(--ink); font-family: 'Hanken Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overscroll-behavior: none }
button { font: inherit; color: inherit }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab } #gl:active { cursor: grabbing }
/* A separate transparent scene keeps the guide above planets, labels and video.
   The layer passes every click through; dialogue and controls keep their space. */
.gx-guide-layer { position: fixed; inset: 0; z-index: 8; pointer-events: none; overflow: hidden }
.gx-guide-layer[hidden] { display: none }
.gx-guide-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .72)) }
.gx-guide-shadow { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -42%); background: radial-gradient(ellipse, rgba(2, 2, 10, .82) 0%, rgba(2, 2, 10, .58) 34%, rgba(2, 2, 10, .22) 57%, transparent 74%); pointer-events: none }

/* the top line: the logo, what is live, an example mark */
.gx-top { position: fixed; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; background: linear-gradient(rgba(4, 5, 12, 0.85), rgba(4, 5, 12, 0)); pointer-events: none }
.gx-logo { height: 26px; width: auto }
.gx-live { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink2); white-space: nowrap } .gx-live b { color: var(--ink); font-variant-numeric: tabular-nums } .gx-sep { color: var(--ink3) }
.gx-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5b6e; box-shadow: 0 0 10px #ff5b6e; margin-right: 2px; animation: gx-pulse 1.6s ease-in-out infinite } @keyframes gx-pulse { 50% { opacity: 0.35 } }
.gx-ex { margin-left: auto; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line); font: 500 10.5px/1 'JetBrains Mono', monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink3) }
@media (max-width: 640px) { .gx-top { flex-wrap: wrap; gap: 6px 10px } .gx-logo { height: 22px } .gx-wide { display: none } .gx-live { order: 3; width: 100%; font-size: 13px } }

/* labels on things in the galaxy (placed each frame) */
.gx-labels { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden }
.gx-lab { position: absolute; left: 0; top: 0; transform: translate(-50%, 0); white-space: nowrap; text-align: center; transition: opacity 0.25s; will-change: transform }
.gx-lab b { display: block; font: 700 13px/1.2 'Hanken Grotesk', sans-serif; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9) }
.gx-lab small { display: block; margin-top: 2px; font: 500 10.5px/1.2 'JetBrains Mono', monospace; letter-spacing: 0.06em; color: var(--ink2); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9) }
.gx-lab.comp b { font-size: 14px } .gx-lab.comp small i { font-style: normal; color: var(--gold) }
.gx-lab.arena b { font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.32em; color: #ffe9c4 }
.gx-lab.live b::before { content: 'LIVE'; display: inline-block; margin-right: 6px; padding: 1px 5px; border-radius: 5px; background: #ff5b6e; font: 700 9.5px/1.4 'JetBrains Mono', monospace; letter-spacing: 0.08em; vertical-align: 1px }
.gx-lab.star b { color: var(--gold) } .gx-lab.you b { color: #fff; font-size: 14px } .gx-lab.you small { color: var(--green) }
.gx-lab.pop { animation: gx-pop 1.4s ease-out forwards } .gx-lab.pop b { font-size: 12px; color: var(--green) } .gx-lab.pop.gold b { color: var(--gold) }
@keyframes gx-pop { from { opacity: 0; margin-top: 6px } 15% { opacity: 1 } 70% { opacity: 1 } to { opacity: 0; margin-top: -22px } }

/* what just happened: the newest three */
.gx-feed { position: fixed; left: 16px; top: 64px; z-index: 4; width: min(340px, calc(100vw - 32px)); margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; pointer-events: none }
.gx-feed li { padding: 8px 12px; border-radius: 12px; background: rgba(14, 11, 34, 0.6); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; line-height: 1.35; color: var(--ink2); animation: gx-in 0.3s ease-out both }
.gx-feed li b { color: var(--ink) } .gx-feed li i { font-style: normal; color: var(--gold) } .gx-feed li.raid { border-color: rgba(255, 211, 107, 0.5) }
@keyframes gx-in { from { opacity: 0; transform: translateY(-6px) } }
@media (max-width: 640px) { .gx-feed { top: 78px; gap: 4px } .gx-feed li { padding: 6px 10px; font-size: 12px } .gx-feed li:nth-child(n+3) { display: none } }

/* Divi's panel: what is being shown, and what to do */
.gx-panel { position: fixed; z-index: 6; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: min(430px, calc(100vw - 32px)); padding: 16px 16px 14px; border-radius: 24px; background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8), 0 0 40px -20px rgba(155, 107, 255, 0.6); transition: opacity 0.3s, transform 0.3s }
.gx-panel.off { opacity: 0; transform: translateY(12px); pointer-events: none }
.gx-ph { display: flex; gap: 12px; align-items: center }
.gx-divi { width: 54px; height: 54px; flex: none; margin: -6px -2px -6px -6px }
.gx-ph small { display: block; font: 500 10.5px/1 'JetBrains Mono', monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--violet) }
.gx-ph h2 { margin: 4px 0 0; font: 400 26px/1.08 var(--serif); letter-spacing: -0.015em; text-wrap: balance }
.gx-pt { margin: 10px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--ink2); text-wrap: pretty } .gx-pt b { color: var(--ink) } .gx-pt i { font-style: normal; color: var(--gold) }
.gx-row { display: flex; gap: 8px; margin-top: 14px; align-items: center }
.gx-go { flex: 1; height: 48px; border: 0; border-radius: 24px; background: linear-gradient(180deg, #b48bff, #7442f0); color: #fff; font: 700 16px 'Hanken Grotesk', sans-serif; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 28px -12px rgba(155, 107, 255, 0.9) }
.gx-go:disabled { opacity: 0.45; cursor: default }
.gx-alt { height: 48px; padding: 0 14px; border: 0; background: none; color: var(--ink3); font: 600 15px 'Hanken Grotesk', sans-serif; cursor: pointer; white-space: nowrap }
.gx-dots { display: flex; gap: 5px; margin-right: auto } .gx-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.22) } .gx-dots i.on { width: 16px; background: var(--violet) }
.gx-earn { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px }
.gx-earn li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.4; color: var(--ink2) } .gx-earn li b { color: var(--ink) }
.gx-earn li span:first-child { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; background: rgba(255, 255, 255, 0.07) }
.gx-crafts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px }
.gx-craft { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--ink); font: 600 15.5px 'Hanken Grotesk', sans-serif; text-align: left; cursor: pointer; white-space: nowrap }
.gx-craft i { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c) } .gx-craft:hover { border-color: rgba(214, 196, 255, 0.5) } .gx-craft.wide { grid-column: 1 / -1; justify-content: center; color: var(--ink3) }
.gx-people { display: grid; gap: 8px; margin-top: 12px; max-height: 36vh; overflow-y: auto }
.gx-person { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: 16px; border: 1.5px solid var(--line); background: rgba(255, 255, 255, 0.04); text-align: left; cursor: pointer }
.gx-person i { width: 30px; height: 30px; flex: none; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff 0, var(--c) 45%, transparent 72%) } .gx-person span { flex: 1; min-width: 0 } .gx-person b { display: block; font-size: 15.5px } .gx-person small { display: block; font-size: 13px; color: var(--ink3) }
.gx-person em { font-style: normal; font: 700 10px/1 'JetBrains Mono', monospace; padding: 3px 6px; border-radius: 6px; background: #ff5b6e; color: #fff; letter-spacing: 0.06em }
.gx-person.on { border-color: var(--violet); background: rgba(155, 107, 255, 0.14) } .gx-person.on::after { content: '✓'; color: var(--violet); font-weight: 800 }
.gx-ways { display: grid; gap: 8px; margin-top: 12px }
.gx-way { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: 26px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--ink); font: 600 16px 'Hanken Grotesk', sans-serif; cursor: pointer; white-space: nowrap } .gx-way.main { background: #f6f3ff; color: #120d2a; border-color: transparent }
.gx-in { display: flex; align-items: center; gap: 8px; height: 54px; margin-top: 12px; padding: 0 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line) } .gx-in:focus-within { border-color: var(--violet) }
.gx-in i { font-style: normal; color: var(--ink3); font-size: 18px } .gx-in input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--ink); font: 600 18px 'Hanken Grotesk', sans-serif }
.gx-fine { margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink3) }
.gx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }
.gx-chip { height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--ink); font: 600 14.5px 'Hanken Grotesk', sans-serif; cursor: pointer; white-space: nowrap } .gx-chip.done { border-color: rgba(110, 240, 176, 0.5); color: var(--green) } .gx-chip.done::before { content: '✓ ' }
@media (max-width: 640px) { .gx-panel { left: 10px; right: 10px; width: auto; bottom: max(10px, env(safe-area-inset-bottom)); padding: 14px 14px 12px; border-radius: 22px } .gx-ph h2 { font-size: 23px } .gx-pt { font-size: 14.5px } }

/* a card on a thing you tapped: a competition, or somebody building live */
.gx-card { position: fixed; z-index: 7; right: 16px; top: 70px; width: min(360px, calc(100vw - 32px)); padding: 16px; border-radius: 22px; background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8) }
.gx-card[hidden] { display: none }
.gx-card .k { display: flex; align-items: center; gap: 8px; font: 500 10.5px/1 'JetBrains Mono', monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink3) } .gx-card .k i { width: 9px; height: 9px; border-radius: 50%; background: var(--c) }
.gx-card h3 { margin: 8px 0 4px; font: 700 19px/1.2 'Hanken Grotesk', sans-serif } .gx-card p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink2) } .gx-card p i { font-style: normal; color: var(--gold) }
.gx-card .x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); cursor: pointer; font-size: 18px; line-height: 1 }
.gx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px } .gx-stats div { padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.05) } .gx-stats small { display: block; font: 500 9.5px/1 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3) } .gx-stats b { display: block; margin-top: 5px; font-size: 16px; font-variant-numeric: tabular-nums }
.gx-screen { position: relative; height: 120px; margin-top: 12px; border-radius: 14px; overflow: hidden; background: #0b0920; border: 1px solid var(--line) } .gx-screen canvas { width: 100%; height: 100%; display: block }
.gx-card .gx-row { margin-top: 12px }
@media (max-width: 640px) { .gx-card { left: 10px; right: 10px; top: auto; bottom: max(10px, env(safe-area-inset-bottom)); width: auto } }

.gx-toast { position: fixed; z-index: 9; left: 50%; top: 70px; transform: translate(-50%, -6px); max-width: min(380px, calc(100vw - 32px)); margin: 0; padding: 10px 16px; border-radius: 14px; background: rgba(243, 241, 253, 0.95); color: #120d2a; font-size: 14px; line-height: 1.35; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s }
.gx-toast.on { opacity: 1; transform: translate(-50%, 0) }
button:focus-visible { outline: 2px solid #c9a6ff; outline-offset: 2px }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important } }

/* labels as the landing has them: a dark pill with a fine edge */
.gx-lab b { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: rgba(16, 12, 36, 0.74); border: 1px solid rgba(255, 255, 255, 0.16); font: 600 13.5px/1.2 'Hanken Grotesk', sans-serif; text-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) }
.gx-lab b i { width: 9px; height: 9px; border-radius: 3px }
.gx-lab b em { font-style: normal; padding: 1px 5px; border-radius: 5px; background: #ff5b6e; font: 700 9.5px/1.4 'JetBrains Mono', monospace; letter-spacing: 0.08em; color: #fff }
.gx-lab small { margin-top: 4px } .gx-lab small .pz { color: var(--gold) }
.gx-lab.person b { padding: 3px 10px; font-size: 12px; background: rgba(16, 12, 36, 0.55); color: var(--ink2) }
.gx-lab.arena b { padding: 6px 14px; border-color: rgba(255, 217, 160, 0.45); font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.32em; color: #ffe9c4 }
.gx-lab.star b { border-color: rgba(255, 211, 107, 0.5); color: var(--gold) }
.gx-lab.you b { border-color: rgba(233, 72, 43, 0.7); box-shadow: 0 0 18px -4px rgba(233, 72, 43, 0.8) }
.gx-lab.live::before, .gx-lab.live b::before { content: none }
.gx-lab.pop b { background: rgba(10, 40, 30, 0.75); border-color: rgba(110, 240, 176, 0.5) } .gx-lab.pop.gold b { background: rgba(50, 36, 6, 0.8); border-color: rgba(255, 211, 107, 0.6) }
.gx-login { margin-left: 4px; height: 40px; padding: 0 18px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(16, 12, 36, 0.6); color: var(--ink); font: 600 15px 'Hanken Grotesk', sans-serif; cursor: pointer; pointer-events: auto; white-space: nowrap }
@media (max-width: 640px) { .gx-login { height: 34px; padding: 0 14px; font-size: 14px } .gx-ex { margin-left: auto } }

/* the opening words, over the galaxy (on a computer at the left, as the landing has them) */
.gx-panel.hero { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0 }
.gx-hero h1 { margin: 0; font: 800 clamp(34px, min(5.6vw, 8.6vh), 76px)/1.02 'Hanken Grotesk', sans-serif; letter-spacing: -0.035em; color: #fff; text-shadow: 0 4px 40px rgba(10, 5, 40, 0.9); text-wrap: balance }
.gx-hero .gx-pt { max-width: 34ch; font-size: 17px; text-shadow: 0 2px 16px rgba(5, 3, 20, 0.95) }
.gx-hero .gx-row { margin-top: 22px } .gx-hero .gx-go { flex: none; height: 56px; padding: 0 28px; border-radius: 28px; font-size: 18px }
.gx-alt.ghost { height: 56px; padding: 0 24px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(16, 12, 36, 0.5); color: var(--ink); font-size: 17px }
@media (min-width: 900px) { .gx-panel.hero { left: 5vw; bottom: auto; top: 50%; transform: translateY(-40%); width: min(620px, 46vw) } .gx-panel.hero.off { transform: translateY(-36%) } }
@media (max-width: 640px) { .gx-panel.hero { padding: 0 6px } .gx-hero h1 { font-size: 40px } .gx-hero .gx-pt { font-size: 15.5px } .gx-hero .gx-go { padding: 0 22px; font-size: 17px } .gx-alt.ghost { padding: 0 18px } }
.gx-panel.mini { padding: 10px 10px 10px 16px } .gx-panel.mini .gx-row { margin-top: 0 }
.gx-earn li span:first-child svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.gx-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.gx-screen { height: auto; aspect-ratio: 16 / 9 }
/* no overlap: on a computer the feed keeps to the top right, clear of the opening words; a card there takes its place */
@media (min-width: 900px) { .gx-feed { left: auto; right: 16px; top: 66px } }
.gx-feed { transition: opacity 0.2s } body.carding .gx-feed { opacity: 0 }

/* the work you can start now */
.gx-briefs { display: grid; gap: 6px; margin-top: 12px; max-height: min(40vh, 330px); overflow-y: auto; overscroll-behavior: contain }
.gx-brief { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px 8px 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--ink); text-align: left; cursor: pointer }
.gx-brief:hover { border-color: rgba(214, 196, 255, 0.5); background: rgba(255, 255, 255, 0.07) }
.gx-brief i { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c) }
.gx-brief span { flex: 1; min-width: 0 } .gx-brief b { display: block; font-size: 15px; line-height: 1.25 } .gx-brief small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink3) }
.gx-brief em { flex: none; font: 700 13px/1 'JetBrains Mono', monospace; font-style: normal; color: var(--gold) } .gx-brief em::after { content: ' D'; color: var(--ink3); font-weight: 500 }
/* what goes round a den */
.gx-runs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px } .gx-runs li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 13px; color: var(--ink2) } .gx-runs i { width: 8px; height: 8px; border-radius: 50% }
/* labels for what is new in the sky */
.gx-lab.work b { font-size: 14px } .gx-lab.den b { padding: 3px 10px; font-size: 12px; background: rgba(16, 12, 36, 0.55); color: var(--ink2) }
.gx-lab.world b, .gx-lab.station b { border-color: rgba(255, 204, 77, 0.4) } .gx-lab.station b { font-size: 14px }
.gx-lab.live b { padding: 4px 10px; font-size: 12.5px }
.gx-lab.kind b { padding: 2px 9px; font: 500 11px/1.3 'JetBrains Mono', monospace; letter-spacing: 0.04em; background: rgba(16, 12, 36, 0.6); color: var(--ink2); border-color: rgba(255, 255, 255, 0.12) } .gx-lab.agent b { color: #d9ccff }

/* streams on screens over their planets */
.gx-tvs { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden }
.gx-tv { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.35s; will-change: transform }
.gx-tv.show { opacity: 1 }
.gx-tv-box { position: relative; overflow: hidden; border-radius: 16px; background: #0b0920; border: 1.5px solid rgba(255, 255, 255, 0.28); box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.9), 0 0 36px -8px var(--c, #9b6bff); pointer-events: auto; cursor: pointer }
.gx-tv.small .gx-tv-box { border-radius: 11px }
.gx-tv-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.42) }
.gx-tv-vid { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s } .gx-tv-vid.on { opacity: 1 }
.gx-tv-vid iframe { position: absolute; left: 50%; top: 50%; width: 480px; height: 270px; margin: -135px 0 0 -240px; border: 0; pointer-events: none }
.gx-tv-live { position: absolute; left: 8px; top: 8px; padding: 2px 6px; border-radius: 5px; background: #ff5b6e; font: 700 10px/1.4 'JetBrains Mono', monospace; letter-spacing: 0.08em; color: #fff }
.gx-tv.small .gx-tv-live { left: 5px; top: 5px; font-size: 8.5px; padding: 1px 4px }
.gx-tv-snd { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(10, 8, 26, 0.7); display: grid; place-items: center; cursor: pointer; padding: 0 }
.gx-tv-snd svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round } .gx-tv-snd svg path:first-child { fill: #fff } .gx-tv-snd .w { display: none } .gx-tv-snd.on .w { display: inline } .gx-tv-snd.on .x { display: none }
.gx-tv.small .gx-tv-snd { display: none }
.gx-tv-beam { position: absolute; width: 2px; margin-left: -1px; background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); box-shadow: 0 0 10px 2px rgba(200, 180, 255, 0.35); pointer-events: none }

/* feed or map */
.gx-mode { position: fixed; z-index: 5; left: 50%; top: 14px; transform: translateX(-50%); display: flex; padding: 3px; border-radius: 999px; background: rgba(16, 12, 36, 0.72); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px) }
.gx-mode[hidden] { display: none }
.gx-mode button { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--ink3); font: 600 14px 'Hanken Grotesk', sans-serif; cursor: pointer }
.gx-mode button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); color: var(--ink) }
@media (max-width: 640px) { .gx-mode { top: auto; bottom: auto; top: 84px } }
.gx-pv[hidden] { display: none }

/* the feed's card: what you are looking at, and how to move on */
.gx-panel.feedc .gx-pt { margin-top: 8px }
.gx-fnav { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08) }
.gx-fnav > span { flex: 1 }
.gx-fb { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--ink2); font: 600 14px 'Hanken Grotesk', sans-serif; cursor: pointer; white-space: nowrap }
.gx-fb.ic { width: 36px; padding: 0; justify-content: center } .gx-fb:disabled { opacity: 0.35; cursor: default }
.gx-fb:nth-child(2) { margin-right: auto }
.gx-fb.go { color: var(--ink); border-color: rgba(180, 139, 255, 0.55); background: rgba(155, 107, 255, 0.18) }
.gx-fb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.gx-hint { margin: 10px 0 0; font: 500 11px/1.3 'JetBrains Mono', monospace; letter-spacing: 0.08em; color: var(--ink3); text-transform: uppercase }
.gx-hero .gx-hint { margin-top: 16px; text-shadow: 0 2px 12px rgba(5, 3, 20, 0.9) }
@media (max-width: 640px) { body.feeding .gx-feed { display: none } .gx-feed { top: 130px } .gx-panel.feedc { touch-action: none } .gx-panel.feedc .gx-pt { font-size: 14px } }

/* a computer looking at the phone */
.gx-device { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; background: radial-gradient(120% 80% at 50% 10%, #1a1040 0, #07051a 60%, #03030a 100%) }
.gx-dev-top { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--ink3); font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.16em; text-transform: uppercase }
.gx-dev-top .gx-login { margin-left: auto; display: inline-flex; align-items: center; text-decoration: none; letter-spacing: 0; text-transform: none }
.gx-phone { width: 406px; height: 860px; flex: none; transform-origin: 50% 0; padding: 8px; border-radius: 58px; background: #0d0b16; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9), 0 0 0 6px #1c1830 }
.gx-phone iframe { width: 390px; height: 844px; border: 0; border-radius: 50px; display: block; background: #03030a }

/* a picture over its planet: what was entered, on a canvas edge, its title under it */
.gx-tv.pic .gx-tv-box { border-radius: 3px; border: 3px solid #f4efe6; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.95), 0 0 26px -8px var(--c, #ff5cc8) }
.gx-tv.pic.live .gx-tv-box { border-radius: 16px; border: 1.5px solid rgba(255, 255, 255, 0.28) }
.gx-tv.pic .gx-tv-box img { transform: none } .gx-tv.pic.live .gx-tv-box img { transform: scale(1.42) }
.gx-tv.pic .gx-tv-live { display: none } .gx-tv.pic.live .gx-tv-live { display: block }
.gx-tv-box img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none }
.gx-pic-cap { position: absolute; left: 0; text-align: center; font: italic 400 12.5px/1.2 'Fraunces', Georgia, serif; color: var(--ink2); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95); pointer-events: none }
.gx-tv.small .gx-pic-cap { display: none } .gx-tv:not(.pic) .gx-pic-cap { display: none }

/* watching together: the chat beside the screen, reactions under it, a box to say something */
.gx-room { position: fixed; left: 0; top: 0; z-index: 4; display: flex; flex-direction: column; gap: 8px; pointer-events: none }
.gx-room[hidden] { display: none }
.gx-chat { flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 28%); mask-image: linear-gradient(transparent, #000 28%) }
.gx-chat li { align-self: flex-start; max-width: 100%; padding: 5px 10px; border-radius: 12px; background: rgba(12, 9, 30, 0.72); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; line-height: 1.35; color: var(--ink2); animation: gx-in 0.25s ease-out both; overflow-wrap: anywhere }
.gx-chat li i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px }
.gx-chat li b { color: var(--ink); font-weight: 700 } .gx-chat li.gold { border-color: rgba(255, 211, 107, 0.5); color: var(--gold) } .gx-chat li.mine { border-color: rgba(233, 72, 43, 0.55) } .gx-chat li.star b { color: var(--gold) }
.gx-react { display: flex; gap: 6px; pointer-events: auto }
.gx-react button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(16, 12, 36, 0.75); font-size: 19px; line-height: 1; cursor: pointer; padding: 0; transition: transform 0.12s }
.gx-react button:active { transform: scale(0.88) }
.gx-say { display: flex; gap: 6px; pointer-events: auto }
.gx-say input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(16, 12, 36, 0.75); color: var(--ink); font: 500 14px 'Hanken Grotesk', sans-serif; outline: 0 } .gx-say input:focus { border-color: var(--violet) }
.gx-say button { height: 40px; padding: 0 16px; border-radius: 20px; border: 0; background: rgba(155, 107, 255, 0.35); color: #fff; font: 600 14px 'Hanken Grotesk', sans-serif; cursor: pointer }
.gx-room.tight .gx-chat li:nth-last-child(n+3) { display: none }
.gx-floats { position: absolute; left: 0; bottom: 100px; width: 1px; height: 1px; pointer-events: none }
.gx-float { position: absolute; left: 0; bottom: 0; font-size: 26px; animation: gx-float 1.7s ease-out forwards; --x: 0px; --r: 0deg }
.gx-float.mine { font-size: 32px }
@keyframes gx-float { from { opacity: 0; transform: translate(0, 0) scale(0.6) rotate(0) } 12% { opacity: 1; transform: translate(calc(var(--x) * 0.2), -20px) scale(1.1) } to { opacity: 0; transform: translate(var(--x), -190px) scale(0.9) rotate(var(--r)) } }
@media (max-width: 640px) { .gx-room { gap: 6px } .gx-chat li { font-size: 12.5px; padding: 4px 9px } .gx-react button { width: 36px; height: 36px; font-size: 17px } .gx-say input, .gx-say button { height: 36px } .gx-floats { left: auto; right: 22px; bottom: 90px } }

/* a poll on a stream */
.gx-poll { margin-top: 12px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08) }
.gx-poll > b { display: block; font-size: 14.5px } .gx-poll small { display: block; margin-top: 8px; font-size: 12px; color: var(--ink3) }
.gx-opts { display: grid; gap: 6px; margin-top: 8px }
.gx-opt { position: relative; display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--ink); font: 600 14px 'Hanken Grotesk', sans-serif; cursor: pointer; overflow: hidden; text-align: left }
.gx-opt span { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(155, 107, 255, 0.26); transition: width 0.5s } .gx-opt em, .gx-opt i { position: relative; font-style: normal } .gx-opt i { color: var(--ink2); font: 500 12.5px 'JetBrains Mono', monospace }
.gx-opt.mine { border-color: var(--violet) } .gx-opt.mine span { background: rgba(155, 107, 255, 0.45) } .gx-opt.mine em::after { content: ' ✓'; color: var(--violet) }
.gx-pt .gx-fine { display: block; margin-top: 6px }

/* your Dokens */
.gx-wallet { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; background: rgba(35, 163, 107, 0.16); border: 1px solid rgba(110, 240, 176, 0.4); color: var(--green); font: 600 13.5px 'Hanken Grotesk', sans-serif; white-space: nowrap; margin-left: auto }
.gx-wallet[hidden] { display: none } .gx-wallet b { color: #fff; font-variant-numeric: tabular-nums } .gx-wallet i { width: 18px; height: 18px; margin-left: -3px; background: url(img/coin-spin.png) 0 0 / 2400% 100% no-repeat }          /* the Doken coin: still, and one turn when Dokens come in */
.gx-wallet.up i { animation: gx-coin-turn 0.8s steps(24, jump-none) 1 } @keyframes gx-coin-turn { to { background-position: 100% 0 } }
@media (prefers-reduced-motion: reduce) { .gx-wallet.up i { animation: none } }
.gx-wallet:not([hidden]) + .gx-ex { margin-left: 0 }
.gx-wallet.up { animation: gx-up 0.6s ease-out } @keyframes gx-up { 40% { transform: scale(1.12); box-shadow: 0 0 20px rgba(110, 240, 176, 0.6) } }
@media (max-width: 640px) { .gx-wallet { height: 30px; padding: 0 10px; font-size: 12.5px } }
.gx-hero .gx-pt.gx-one { max-width: none; text-wrap: balance }

/* the poll, pinned over the stream's chat */
.gx-room-poll { pointer-events: auto } .gx-room-poll:empty { display: none }
.gx-room .gx-poll { margin: 0; padding: 10px; border-radius: 14px; background: rgba(12, 9, 30, 0.82); border-color: rgba(180, 139, 255, 0.35) }
.gx-poll > b em { font-style: normal; margin-right: 7px; padding: 1px 5px; border-radius: 5px; background: rgba(155, 107, 255, 0.4); font: 700 9.5px/1.4 'JetBrains Mono', monospace; letter-spacing: 0.08em; vertical-align: 1px }
.gx-room .gx-poll > b { font-size: 13.5px } .gx-room .gx-opts { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; margin-top: 7px }
.gx-room .gx-opt { height: 34px; padding: 0 8px; font-size: 13px; border-radius: 10px } .gx-room .gx-opt i { font-size: 11px } .gx-room .gx-poll small { margin-top: 6px; font-size: 11px }
/* on a phone, a card is a slim bar: who, what, and what you can do */
@media (max-width: 640px) {
  .gx-card { padding: 12px 14px; border-radius: 20px }
  .gx-card .k { font-size: 9.5px } .gx-card h3 { margin: 5px 0 2px; font-size: 17px } .gx-card .x { top: 8px; right: 8px; width: 28px; height: 28px; font-size: 16px }
  .gx-card p { font-size: 13.5px } .gx-card .gx-fine { display: none }
  .gx-card .gx-row { margin-top: 10px } .gx-card .gx-go, .gx-card .gx-alt { height: 42px; font-size: 15px }
  .gx-card .gx-runs li { padding: 3px 8px; font-size: 12px } .gx-card .gx-stats div { padding: 6px }
  .gx-panel.feedc { padding: 12px 14px 10px } .gx-panel.feedc .gx-divi { width: 42px; height: 42px } .gx-panel.feedc .gx-ph h2 { font-size: 20px }
   .gx-panel.feedc .gx-pt .gx-fine { display: none }
  .gx-panel.feedc .gx-row { margin-top: 10px } .gx-panel.feedc .gx-go, .gx-panel.feedc .gx-alt { height: 42px; font-size: 15px } .gx-panel.feedc .gx-fnav { margin-top: 8px; padding-top: 8px } .gx-panel.feedc .gx-fb { height: 32px }
  .gx-panel.feedc .gx-earn { gap: 6px } .gx-panel.feedc .gx-earn li { font-size: 13.5px } .gx-panel.feedc .gx-hint { margin-top: 6px }
}

/* ── watching: the stream as big as the room allows, who and what right under it, the chat and poll beside it (under it on a phone).
   Nothing of the galaxy between the stream and its panel: if you watch, you watch ── */
.gx-watch { position: fixed; z-index: 5; left: 20px; right: 20px; top: 72px; bottom: 20px; display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "stage side" "info side" "nav side"; column-gap: 16px; row-gap: 10px; pointer-events: none; touch-action: none }
.gx-watch[hidden] { display: none }
.wv-stage { grid-area: stage; min-height: 0; display: flex; justify-content: center; align-items: flex-end; container-type: size }
.wv-slot { width: min(100cqw, 100cqh * 16 / 9); height: min(100cqh, min(100cqw, 100cqh * 16 / 9) * 0.75) }          /* (the biggest 16:9 that fits, sitting on the row under it; with room above, it grows as far as 4:3 and fills it) */
.wv-panel { display: contents }
.wv-info { grid-area: info; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: auto }
.wv-note { flex: 1 0 100%; margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink2) } .wv-note b { color: var(--ink) }
.wv-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px }
.wv-live { flex: none; padding: 3px 7px; border-radius: 6px; background: #ff5b6e; font: 700 10.5px/1.3 'JetBrains Mono', monospace; letter-spacing: 0.08em; color: #fff }
.wv-id { min-width: 0 } .wv-id b { display: block; font-size: 17px; line-height: 1.2 } .wv-id span { display: block; font-size: 13.5px; color: var(--ink3) }
.wv-n { flex: none; margin-left: auto; font-size: 13px; color: var(--ink3); white-space: nowrap } .wv-n b { color: var(--ink); font-variant-numeric: tabular-nums }
.wv-acts { display: flex; gap: 8px; flex: none } .wv-acts .gx-go { flex: none; height: 42px; padding: 0 18px; font-size: 15px } .wv-acts .gx-alt { height: 42px; padding: 0 14px; border-radius: 21px; border: 1px solid var(--line); color: var(--ink2); font-size: 14px }
.wv-nav { grid-area: nav; display: flex; gap: 8px; align-items: center; pointer-events: auto } .wv-nav .gx-fb:nth-child(2) { margin-right: auto } .wv-nav .gx-fb:only-child { width: auto; padding: 0 14px }
.wv-side { grid-area: side; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 20px; background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: auto }
.wv-side .gx-chat { -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%) }
.wv-side .gx-chat li { background: rgba(255, 255, 255, 0.05); border-color: transparent }
.wv-as { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--ink3) }
.gx-watch .gx-floats { position: fixed; left: 0; top: 0; bottom: auto; width: 1px; height: 1px; z-index: 6 }
.gx-tv.docked { z-index: 4 } .gx-tv.docked .gx-tv-box { border-radius: 18px; border-width: 1px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.95), 0 0 60px -20px var(--c, #9b6bff) }
.gx-tv.docked .gx-tv-live { left: 12px; top: 12px; font-size: 11px; padding: 2px 7px }
body.watching .gx-tvs { z-index: 6 } body.watching .gx-tv:not(.docked) { z-index: 1 }
@media (max-width: 640px) {
  .gx-watch { left: 0; right: 0; top: 84px; bottom: 0; display: flex; flex-direction: column; gap: 0 }
  .wv-stage { padding: 0; flex: 1000 1 0px; min-height: 56.25vw; max-height: 80vw }          /* (the room the panel leaves goes to the stream first, up to a little taller than 4:3, then to the chat) */
  .wv-slot { width: 100%; height: 100%; aspect-ratio: auto }
  .wv-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px max(10px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: var(--glass); border: 1px solid var(--line); border-bottom: 0; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); pointer-events: auto }
  .wv-info { padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; gap: 8px 10px }
  .wv-note { font-size: 13px } .wv-id b { font-size: 16px } .wv-id span { font-size: 12.5px } .wv-acts { flex: 1 0 100% } .wv-acts .gx-go { flex: 1; height: 40px } .wv-acts .gx-alt { height: 40px }
  .wv-side { flex: 1 1 auto; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; gap: 6px }
  .wv-side .gx-chat { height: 21vh; flex: none } .wv-as { display: none }
  .wv-nav { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08) }
  .gx-tv.docked .gx-tv-box { border-radius: 0; border-left: 0; border-right: 0 }
}
.wv-id span b { color: var(--ink2); font-weight: 600 }
@media (max-width: 640px) {
  .wv-panel { gap: 7px; padding-top: 10px }
  .wv-note { font-size: 12.5px }
  .wv-info { flex-wrap: nowrap; gap: 8px } .wv-info:has(.wv-note) { flex-wrap: wrap }
  .wv-acts { flex: none } .wv-acts .gx-go { flex: none; height: 38px; padding: 0 16px; font-size: 14.5px } .wv-acts .wv-snd { display: none }
  .wv-id b { font-size: 15.5px } .wv-id span { font-size: 12px }
  .gx-watch .gx-poll { margin-top: 0; padding: 8px 10px; border-radius: 12px } .gx-watch .gx-poll > b { font-size: 13px } .gx-watch .gx-poll small { display: none }
  .gx-watch .gx-opts { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; margin-top: 6px } .gx-watch .gx-opt { height: 32px; padding: 0 8px; font-size: 12.5px; border-radius: 9px } .gx-watch .gx-opt i { font-size: 10.5px }
  .wv-side .gx-chat { flex: 1 1 84px; height: auto; min-height: 56px; gap: 4px } .wv-side .gx-chat li { padding: 3px 9px; font-size: 12.5px }
  .gx-watch .gx-react button { width: 34px; height: 34px; font-size: 16px } .gx-watch .gx-say input, .gx-watch .gx-say button { height: 38px }
  .wv-nav { padding-top: 6px } .wv-nav .gx-fb { height: 32px }
}
.wv-id span b { display: inline }
/* the screen's own full-screen button (only on the one you watch) */
.gx-tv-fs { display: none; position: absolute; right: 50px; bottom: 8px; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(10, 8, 26, 0.7); cursor: pointer; place-items: center }
.gx-tv.docked .gx-tv-fs { display: grid } .gx-tv-fs svg, .wv-x svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.wv-x { display: none }

/* ── full screen: the stream fills it; who, Tip and the chat stay, quietly; reactions down the side; buttons fade until you touch ── */
body.theater::before { content: ''; position: fixed; inset: 0; z-index: 5; background: #000 }
body.theater .gx-top, body.theater .gx-mode, body.theater .gx-feed, body.theater .gx-labels, body.theater .wv-nav, body.theater .gx-room-poll, body.theater .wv-as, body.theater .wv-note, body.theater .gx-tv:not(.docked), body.theater .gx-toast:not(.on) { display: none !important }
body.theater .gx-watch { inset: 0; display: block; z-index: 7 }
body.theater .wv-panel, body.theater .wv-stage { display: contents }
body.theater .wv-slot { display: none }
body.theater .gx-tv.docked .gx-tv-box { border-radius: 0; border: 0; box-shadow: none } body.theater .gx-tv.docked .gx-tv-live, body.theater .gx-tv.docked .gx-tv-fs { display: none }
body.theater .gx-tv.docked .gx-tv-snd { right: max(14px, env(safe-area-inset-right)); bottom: auto; top: max(12px, env(safe-area-inset-top)) }
body.theater .wv-info { position: absolute; left: max(12px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); flex-wrap: nowrap; gap: 10px; padding: 6px 6px 6px 10px; border-radius: 16px; border: 0; background: rgba(8, 6, 20, 0.5); max-width: min(560px, 70vw) }
body.theater .wv-id b { font-size: 14.5px } body.theater .wv-id span { font-size: 12px } body.theater .wv-acts .wv-snd { display: none } body.theater .wv-acts .gx-go { height: 34px; padding: 0 14px; font-size: 13.5px; box-shadow: none }
body.theater .wv-side { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); width: min(360px, 44vw); padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; gap: 6px }
body.theater .wv-side .gx-chat { flex: none; height: auto; max-height: 38vh; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%) }
body.theater .wv-side .gx-chat li { background: rgba(8, 6, 20, 0.42); border: 0; font-size: 12.5px; padding: 4px 9px; color: rgba(243, 241, 253, 0.85) }
body.theater .gx-react { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); flex-direction: column; gap: 6px }
body.theater .gx-react button { width: 38px; height: 38px; font-size: 17px; background: rgba(8, 6, 20, 0.42); border-color: rgba(255, 255, 255, 0.12) }
body.theater .gx-say input { height: 36px; background: rgba(8, 6, 20, 0.45); border-color: rgba(255, 255, 255, 0.12) } body.theater .gx-say button { height: 36px; background: rgba(155, 107, 255, 0.4) }
body.theater .wv-x { display: grid; place-items: center; position: absolute; right: max(56px, calc(env(safe-area-inset-right) + 44px)); top: max(12px, env(safe-area-inset-top)); width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(8, 6, 20, 0.55); cursor: pointer; pointer-events: auto }
body.theater .wv-info, body.theater .gx-react, body.theater .gx-say, body.theater .wv-x, body.theater .gx-tv-snd { transition: opacity 0.4s }
body.theater.ui-calm .wv-info, body.theater.ui-calm .gx-react, body.theater.ui-calm .gx-say, body.theater.ui-calm .wv-x, body.theater.ui-calm .gx-tv-snd { opacity: 0 }
body.theater.ui-calm .wv-side .gx-chat { opacity: 0.8 }
.gx-hint-b { display: block; padding: 6px 0; border: 0; background: none; cursor: pointer; text-align: left } .gx-hint-b:hover { color: var(--ink2) }
/* what the Divis watching say, over their heads */
.gx-bubs { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden }
.gx-bub { position: absolute; left: 0; top: 0; max-width: 210px; padding: 5px 10px; border-radius: 12px; background: rgba(250, 248, 255, 0.94); color: #15102c; font: 600 12.5px/1.3 'Hanken Grotesk', sans-serif; box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.6); transition: opacity 0.2s }
.gx-bub::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 2px }
.gx-bub.maker { background: #b48bff; color: #fff } .gx-bub.mine { background: #e9482b; color: #fff }
@media (max-width: 640px) { .gx-bub { font-size: 11.5px; max-width: 170px; padding: 4px 9px } }
/* leaving for Today: the sky closes over */
body.leaving::after { content: ''; position: fixed; inset: 0; z-index: 50; background: #04050c; animation: gx-leave 0.95s ease-in forwards; pointer-events: all }
@keyframes gx-leave { from { opacity: 0 } to { opacity: 1 } }
/* what you get, above the ways to sign up */
.gx-get .gx-earn { margin-top: 10px; gap: 6px } .gx-get .gx-earn li { font-size: 14px }
.gx-get + .gx-ways { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08) }
@media (max-width: 640px) { .gx-get .gx-earn li { font-size: 13px; grid-template-columns: 26px 1fr; gap: 8px } .gx-get .gx-earn li span:first-child { width: 26px; height: 26px; border-radius: 8px } .gx-get + .gx-ways .gx-way { height: 46px } }
/* small, far-off previews: the beam reads as coming up out of the planet */
.gx-tv-beam { background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.85)) }
.gx-tv-beam::after { content: ''; position: absolute; left: 50%; bottom: -3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(210, 190, 255, 0.8) }
.gx-tv.tiny .gx-tv-box { border-radius: 8px; border-width: 1px } .gx-tv.pic.tiny .gx-tv-box { border-radius: 2px; border-width: 2px }
.gx-tv.tiny .gx-tv-live { left: 4px; top: 4px; width: 8px; height: 8px; padding: 0; border-radius: 50%; font-size: 0; box-shadow: 0 0 6px #ff5b6e }
/* a pop rises and fades on its words, so a pop that has nowhere to show stays hidden (the label's own opacity is placed each frame) */
.gx-lab.pop { animation: none } .gx-lab.pop b { animation: gx-pop 1.4s ease-out forwards }
/* this or that: two entries side by side */
.gx-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px }
.gx-vsb { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 16px; border: 1.5px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--ink); text-align: left; cursor: pointer; transition: transform 0.15s, border-color 0.15s }
.gx-vsb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; -webkit-user-select: none; user-select: none }
.gx-vsb b { display: block; font-size: 14px } .gx-vsb small { display: block; font-size: 12px; color: var(--ink3) }
.gx-vsb:hover { border-color: rgba(214, 196, 255, 0.55) } .gx-vsb.on { border-color: var(--violet); transform: scale(1.03); background: rgba(155, 107, 255, 0.16) }
.gx-vs + .gx-row { justify-content: center }
@media (max-width: 640px) { .gx-vsb img { aspect-ratio: 4 / 3 } }

/* no stacked hero, no cut-off words: everything says all of itself */
.gx-hero h1 { font-size: clamp(34px, 4.3vw, 64px); text-wrap: balance } .gx-hero h1 .nw { white-space: nowrap }
.gx-panel .nw, .gx-card .nw { white-space: nowrap }          /* (a short phrase moves to the next line whole) */
@media (min-width: 900px) { .gx-panel.hero { width: min(1000px, 72vw) } .gx-hero .gx-pt { max-width: 46ch } }
.wv-id span, .gx-brief small, .gx-pic-cap { white-space: normal; overflow: visible; text-overflow: clip }
.gx-bub { white-space: normal; max-width: 220px; overflow: visible; text-overflow: clip; text-wrap: pretty }
.gx-pic-cap { text-wrap: balance }
/* a still waiting for its stream is never a stopped picture: it pushes in slowly, and LIVE breathes, until the video crossfades over it */
.gx-tv:not(.pic) .gx-tv-box img { animation: gx-still 9s ease-out both } @keyframes gx-still { from { transform: scale(1.42) translate(0, 0) } to { transform: scale(1.56) translate(-1.5%, -1%) } }
.gx-tv:not(.pic) .gx-tv-live { animation: gx-pulse 1.6s ease-in-out infinite } .gx-tv-vid.on ~ .gx-tv-live { animation: none }
.gx-tv-vid { transition: opacity 0.9s }
@media (prefers-reduced-motion: reduce) { .gx-tv:not(.pic) .gx-tv-box img, .gx-tv:not(.pic) .gx-tv-live { animation: none } }

/* the map's key: every kind of thing, what it is, how many; tap one and they are all marked */
.gx-panel.keyp { width: min(340px, calc(100vw - 32px)); top: 72px; bottom: 16px; display: flex; flex-direction: column; padding: 14px 10px 10px 14px }
.gx-keyh b { display: block; font: 400 24px/1.1 var(--serif) } .gx-keyh small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--ink3) }
.gx-key { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 4px; margin-top: 10px; padding-right: 4px }
.gx-krow { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 6px 10px; border-radius: 14px; border: 1px solid transparent; background: none; color: var(--ink); text-align: left; cursor: pointer }
.gx-krow:hover { background: rgba(255, 255, 255, 0.05) } .gx-krow[aria-pressed="true"] { background: rgba(255, 255, 255, 0.08); border-color: color-mix(in srgb, var(--c) 60%, transparent) }
.gx-krow span { flex: 1; min-width: 0 } .gx-krow b { display: block; font-size: 14.5px; line-height: 1.25 } .gx-krow small { display: block; font-size: 12px; line-height: 1.3; color: var(--ink3) }
.gx-krow em { flex: none; font: 500 12px 'JetBrains Mono', monospace; font-style: normal; color: var(--ink2); font-variant-numeric: tabular-nums }
/* each kind drawn the way it looks in the galaxy */
.sw { flex: none; position: relative; width: 26px; height: 26px; border-radius: 50%; display: block }
.sw-dens { background: radial-gradient(circle, #fff 0 22%, #f4efe6 30%, rgba(244, 239, 230, 0) 70%) }
.sw-work { background: radial-gradient(circle, #fff 0 16%, #ffd36b 26%, rgba(255, 211, 107, 0) 46%); box-shadow: inset 0 0 0 1.5px rgba(255, 211, 107, 0.6) }
.sw-remix { background: radial-gradient(circle, #fff 0 16%, #ffb347 28%, rgba(255, 179, 71, 0) 46%); box-shadow: inset 0 0 0 2.5px #ffd36b }
.sw-live { border-radius: 5px; width: 28px; height: 18px; background: linear-gradient(135deg, #5a3d8a, #c27a5a); border: 1px solid rgba(255, 255, 255, 0.4) } .sw-live::after { content: ''; position: absolute; left: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: #ff5b6e }
.sw-entries { border-radius: 2px; width: 22px; height: 22px; background: linear-gradient(135deg, #ff8fd1, #4f9bff 60%, #ffd84a); border: 2px solid #f4efe6 }
.sw-stars { background: none } .sw-stars::after { content: '★'; position: absolute; inset: 0; display: grid; place-items: center; color: #ffd36b; font-size: 20px; text-shadow: 0 0 10px rgba(255, 211, 107, 0.8) }
.sw-stations { background: radial-gradient(circle, #ffcc4d 0 22%, transparent 24%); box-shadow: inset 0 0 0 3px #5fd6e6 }
.sw-worlds { background: radial-gradient(circle, #b7f28a 0 34%, transparent 36%) } .sw-worlds::after { content: ''; position: absolute; left: -2px; right: -2px; top: 10px; height: 6px; border-radius: 50%; border: 2px solid #eaffd6; transform: rotate(-18deg) }
.sw-rooms { background: radial-gradient(circle, #dfe4ff 0 30%, transparent 32%); box-shadow: inset 0 0 0 1.5px rgba(238, 240, 255, 0.7) }
.sw-agents { background: radial-gradient(circle at 40% 40%, #9a6bff 0 22%, transparent 24%), radial-gradient(circle at 76% 70%, #e2d6ff 0 11%, transparent 13%) }
.sw-divis { background: radial-gradient(circle at 30% 40%, #e9482b 0 12%, transparent 14%), radial-gradient(circle at 66% 30%, #19c2c9 0 10%, transparent 12%), radial-gradient(circle at 58% 72%, #ffd84a 0 11%, transparent 13%) }
.sw-outside { background: radial-gradient(circle, #fff 0 10%, #D97757 22%, rgba(217, 119, 87, 0) 60%) }
/* a mark on everything of the kind you picked */
.gx-marks { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden }
.gx-mark { position: absolute; left: 0; top: 0; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1.5px solid var(--c); background: none; box-shadow: 0 0 10px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 6px color-mix(in srgb, var(--c) 30%, transparent); cursor: pointer; transition: scale 0.15s ease-out; animation: gx-mark-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) backwards }
.gx-mark:hover, .gx-mark:focus-visible { scale: 1.18 }
@keyframes gx-mark-in { from { scale: 0.35 } }          /* (the rings land once, in a quick sweep, then hold still: no pulsing) */
@media (prefers-reduced-motion: reduce) { .gx-mark { animation: none } }
@media (max-width: 640px) {
  .gx-panel.keyp { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 46vh; border-radius: 22px 22px 0 0; padding: 12px 10px max(10px, env(safe-area-inset-bottom)) 12px }
  .gx-keyh b { font-size: 20px } .gx-key { grid-template-columns: 1fr 1fr; gap: 2px 4px }
  .gx-krow { min-height: 46px; gap: 8px; padding: 5px 7px } .gx-krow small { display: none } .gx-krow b { font-size: 13.5px } .sw { width: 22px; height: 22px }
}
/* the key's list of one kind */
.gx-keyl { display: flex; align-items: center; gap: 10px } .gx-keyl > div { flex: 1; min-width: 0 }
.gx-klist .gx-krow.li img { flex: none; width: 44px; height: 30px; border-radius: 6px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.2) }
@media (max-width: 640px) { .gx-klist { grid-template-columns: 1fr } .gx-klist .gx-krow small { display: block } }
/* what you're into: picked ones glow in their colour */
.gx-into .gx-craft { height: 46px; font-size: 14.5px } .gx-into .gx-craft[aria-pressed="true"] { border-color: var(--c, var(--violet)); background: color-mix(in srgb, var(--c, #9b6bff) 20%, transparent) }
.gx-into .gx-craft.wide[aria-pressed="true"] { color: var(--ink); border-color: var(--violet); background: rgba(155, 107, 255, 0.18) }

/* judged by: three faces on every contest */
.gx-judges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px } .gx-judges > small { flex: 1 0 100%; font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3) }
.gx-judge { display: inline-flex; align-items: center; gap: 7px } .gx-judge i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #15102c; font: 800 12px 'Hanken Grotesk', sans-serif; font-style: normal }
.gx-judge.star i { box-shadow: 0 0 0 2px #ffd36b } .gx-judge span b { display: block; font-size: 13px; line-height: 1.2 } .gx-judge span em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink3) }
/* who won */
.gx-podium { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px }
.gx-podium li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 14px; background: rgba(255, 211, 107, 0.08); border: 1px solid rgba(255, 211, 107, 0.25) }
.gx-podium li:first-child { background: rgba(255, 211, 107, 0.16); border-color: rgba(255, 211, 107, 0.55) }
.gx-podium em { flex: none; width: 30px; font: 700 12px 'JetBrains Mono', monospace; font-style: normal; color: var(--gold) } .gx-podium img { flex: none; width: 38px; height: 38px; border-radius: 6px; object-fit: cover }
.gx-podium span { flex: 1; min-width: 0 } .gx-podium b { display: block; font-size: 14px } .gx-podium small { display: block; font-size: 12px; color: var(--ink3) } .gx-podium i { flex: none; font-style: normal; font-weight: 700; color: var(--gold) }
/* a contest just ended */
.gx-ended { position: fixed; z-index: 8; left: 50%; top: 62px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(50, 36, 6, 0.9); border: 1px solid rgba(255, 211, 107, 0.6); color: #fff4d6; font-size: 14px; box-shadow: 0 10px 40px -10px rgba(255, 211, 107, 0.5); animation: gx-in 0.3s ease-out both; white-space: nowrap }
.gx-ended[hidden] { display: none } .gx-ended button { height: 34px; padding: 0 14px; border-radius: 17px; border: 0; background: #ffd36b; color: #2a1d05; font: 700 13.5px 'Hanken Grotesk', sans-serif; cursor: pointer }
@media (max-width: 640px) { .gx-ended { top: 128px; font-size: 13px } }

/* Divi, DiviDen's guide, handing you yours */
.gx-og .og-s { display: inline-block; quotes: none }
.gx-pt .gx-won { display: block; margin-top: 8px; color: var(--gold); font-weight: 600 }          /* (back from Today: how the contest by your den ended) */          /* (a sentence of Divi's moves to the next line whole) */
.gx-og { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(155, 107, 255, 0.12); border: 1px solid rgba(180, 139, 255, 0.35); font: italic 400 16px/1.35 var(--serif); color: var(--ink) } .gx-og span { display: block; margin-top: 4px; font: 500 10.5px/1 'JetBrains Mono', monospace; font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet) }
/* what's happening: one quiet line, then gone */
.gx-feed li { padding: 5px 12px; border-radius: 999px; border: 0; background: rgba(10, 8, 26, 0.5); font-size: 12.5px; transition: opacity 0.6s, transform 0.6s } .gx-feed li.out { opacity: 0; transform: translateY(-4px) }
.gx-feed { width: auto; max-width: min(440px, calc(100vw - 32px)) } @media (min-width: 900px) { .gx-feed { left: auto; right: 16px; top: 66px; justify-items: end } }
.gx-feed li.raid { border: 1px solid rgba(255, 211, 107, 0.5); background: rgba(50, 36, 6, 0.6) }
/* Feed | Map: easy to see, and Map calls you until you've opened it once */
.gx-mode { padding: 4px; border-color: rgba(214, 196, 255, 0.35); background: rgba(22, 16, 48, 0.82); box-shadow: 0 8px 30px -10px rgba(0, 0, 0, 0.8), 0 0 24px -8px rgba(155, 107, 255, 0.6) }
.gx-mode button { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 18px; font-size: 15px; color: var(--ink2) } .gx-mode button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.gx-mode button[aria-pressed="true"] { background: linear-gradient(180deg, #b48bff, #7442f0); color: #fff }
.gx-mode:not(.used) button[data-m="map"][aria-pressed="false"] { animation: gx-call 2.4s ease-in-out infinite } @keyframes gx-call { 50% { box-shadow: 0 0 0 2px rgba(180, 139, 255, 0.55), 0 0 18px rgba(180, 139, 255, 0.5); color: #fff } }
@media (prefers-reduced-motion: reduce) { .gx-mode button { animation: none !important } }
/* (test switch ?pv=) round previews: a bubble in place of the planet, a window in it, or a moon going round it */
.gx-tv.round .gx-tv-box { border-radius: 50% !important; border: 2px solid var(--c, #fff) !important; box-shadow: 0 0 0 3px rgba(10, 8, 26, 0.7), 0 0 26px -4px var(--c, #9b6bff) !important }
.gx-tv.round .gx-tv-live { left: 50%; top: auto; bottom: 6%; transform: translateX(-50%) } .gx-tv.round .gx-pic-cap, .gx-tv.round .gx-tv-snd, .gx-tv.round .gx-tv-fs { display: none }
.gx-tv.round .gx-tv-box img { transform: scale(1.15) }

/* sponsored by */
.gx-sponsors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px } .gx-sponsors > small { flex: 1 0 100%; font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3) }
.gx-sp { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 211, 107, 0.1); border: 1px solid rgba(255, 211, 107, 0.3); font-size: 13px } .gx-sp i { font-style: normal; color: var(--gold); font-weight: 700 } .gx-sp.mine { border-color: rgba(233, 72, 43, 0.6); background: rgba(233, 72, 43, 0.14) }
.gx-amts { display: grid; grid-template-columns: repeat(3, 1fr) } .gx-amts .gx-chip { text-align: center } .gx-chip[aria-pressed="true"] { border-color: var(--violet); background: rgba(155, 107, 255, 0.2) }
.gx-sub { display: block; margin-top: 12px; font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3) } .gx-sub + .gx-crafts, .gx-sub + .gx-chips { margin-top: 6px }
.gx-own { color: var(--gold) !important }
/* learning tracks */
.gx-tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px } .gx-tracks > small { grid-column: 1 / -1; font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3) }
.gx-track { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 9px 10px; border-radius: 14px; border: 1px solid rgba(207, 232, 255, 0.3); background: rgba(207, 232, 255, 0.06); color: var(--ink); text-align: left; cursor: pointer }
.gx-track i { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px var(--c), 0 0 0 3px color-mix(in srgb, var(--c) 40%, transparent) } .gx-track b { display: block; font-size: 13.5px; line-height: 1.2 } .gx-track small { display: block; font-size: 11.5px; color: var(--ink3) }
.gx-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px } .gx-steps li { display: flex; align-items: center; gap: 10px } .gx-steps em { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(207, 232, 255, 0.5); font: 700 12px 'JetBrains Mono', monospace; font-style: normal; color: #cfe8ff }
.gx-steps li.done em { background: #cfe8ff; color: #15102c } .gx-steps b { display: block; font-size: 14px } .gx-steps small { display: block; font-size: 12px; color: var(--ink3) }
.gx-lesson { position: relative; margin-top: 12px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0b0920; border: 1px solid var(--line) } .gx-lesson iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.gx-lab.track b { border-color: rgba(207, 232, 255, 0.45); color: #e6f3ff }
.sw-tracks { background: radial-gradient(circle at 25% 70%, #fff 0 9%, transparent 11%), radial-gradient(circle at 55% 45%, #fff 0 9%, transparent 11%), radial-gradient(circle at 82% 24%, #cfe8ff 0 12%, transparent 14%) }
@media (max-width: 640px) { .gx-tracks { grid-template-columns: 1fr } .gx-track { flex-direction: row; align-items: center } }

/* Show me around: it plays itself, a caption at a time */
.gx-auto { position: fixed; z-index: 9; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(620px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 12px 12px 16px 14px; border-radius: 20px; background: rgba(14, 11, 34, 0.86); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.9) }
.gx-auto[hidden] { display: none }
.gx-auto-d { flex: none; width: 48px; height: 48px; margin: -8px -4px -8px -6px } .gx-auto-d .gx-divi { display: block; width: 100%; height: 100%; margin: 0 }
.gx-auto-t { flex: 1; margin: 0; font: 400 17px/1.35 var(--serif); color: var(--ink); text-wrap: balance }
.gx-auto-word { display: inline-block; color: #a59bb8; transition: color .16s ease }
.gx-auto-word.is-read { color: var(--ink) }
.gx-auto-word.is-current { color: #ffe0a6 }
.gx-auto-readable { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 }
@media (prefers-reduced-motion: reduce) { .gx-auto-word { transition: none } }
@media (max-width: 640px) { .gx-auto-t { font-size: 15.5px } }
.gx-auto button { flex: none; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: var(--ink2); font: 600 13.5px 'Hanken Grotesk', sans-serif; cursor: pointer }
.gx-auto-p { position: absolute; left: 16px; right: 16px; bottom: 7px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden } .gx-auto-p i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b48bff, #ffd36b) }
body.autoing .gx-feed { display: none }
@media (max-width: 640px) { .gx-auto-t { font-size: 15px } }
/* Divi's nudge */
.gx-nudge { position: fixed; z-index: 8; left: 50%; top: 70px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(250, 248, 255, 0.95); color: #15102c; font: 600 14px 'Hanken Grotesk', sans-serif; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7); transition: opacity 0.4s, transform 0.4s; white-space: nowrap }
.gx-nudge[hidden] { display: none } .gx-nudge.out { opacity: 0; transform: translate(-50%, -6px); pointer-events: none }
.gx-nudge img { flex: none; width: 28px; height: 28px; margin: -4px 0; object-fit: contain }
body:has(#gxMode:not([hidden])) .gx-nudge { top: 66px } @media (min-width: 900px) { body:has(#gxMode:not([hidden])) .gx-nudge { top: 64px } }
@media (max-width: 640px) { .gx-nudge { top: 132px; font-size: 13px } }

/* hive coding: the screen is the build itself, the app on the left and its code on the right (sized to the screen it is in) */
.gx-hive { position: absolute; inset: 0; z-index: 2; container-type: size; display: grid; grid-template-columns: 30cqw 1fr; gap: 3.5cqw; align-items: center; padding: 0 4cqw 0 6cqw; background: radial-gradient(120% 100% at 18% 30%, #221848, #0b0920 72%); font-family: 'Hanken Grotesk', system-ui, sans-serif; pointer-events: none }
.gx-tv.hive .gx-tv-box { container-type: size }          /* (the build's own sizes are measured against its screen, at any size) */
.gx-tv.hive .gx-tv-live, .gx-tv.hive .gx-tv-fs { z-index: 3 } .gx-tv.hive .gx-tv-snd { display: none }
.hv-phone { height: 80cqh; aspect-ratio: 10 / 17; justify-self: center; margin-top: 4cqh; display: flex; flex-direction: column; gap: 1.7cqh; padding: 4cqh 2.6cqh 3cqh; border-radius: 5cqh; background: #f6f4ff; color: #15102c; box-shadow: 0 2cqh 6cqh rgba(0, 0, 0, 0.55); overflow: hidden; transition: background 0.4s, color 0.4s }
.hv-phone.dk { background: #19142f; color: #f1edff }
.hv-t { font: 800 5.6cqh/1 'Hanken Grotesk', sans-serif; letter-spacing: -0.01em } .hv-sub { margin-top: -0.8cqh; font-size: 3.2cqh; opacity: 0.6 }
.hv-slots { display: flex; flex-wrap: wrap; gap: 1cqh } .hv-slots i { font-style: normal; font-size: 2.7cqh; padding: 0.9cqh 1.5cqh; border-radius: 99px; background: rgba(108, 56, 156, 0.13) } .dk .hv-slots i { background: rgba(255, 255, 255, 0.1) }
.hv-stars { font-size: 3cqh; color: #e8a400 } .hv-stars em { font-style: normal; color: inherit; opacity: 0.75; color: currentColor } .hv-phone .hv-stars em { color: #6d6690 } .dk .hv-stars em { color: #b9b1da }
.hv-map { position: relative; height: 13cqh; flex: none; border-radius: 1.8cqh; background: repeating-linear-gradient(90deg, rgba(108, 56, 156, 0.1) 0 1px, transparent 1px 4cqh), repeating-linear-gradient(0deg, rgba(108, 56, 156, 0.1) 0 1px, transparent 1px 4cqh), #e7f3ea } .dk .hv-map { background-color: #243328 }
.hv-map i { position: absolute; width: 2cqh; height: 2cqh; border-radius: 50%; background: #ff5c6c; box-shadow: 0 0 0 0.6cqh rgba(255, 92, 108, 0.25) } .hv-map i:nth-child(1) { left: 22%; top: 30% } .hv-map i:nth-child(2) { left: 58%; top: 55% } .hv-map i:nth-child(3) { left: 78%; top: 22% }
.hv-photo { padding: 1.4cqh; border-radius: 1.6cqh; border: 0.35cqh dashed rgba(108, 56, 156, 0.45); font-size: 2.8cqh; text-align: center; opacity: 0.85 }
.hv-tog { display: flex; align-items: center; gap: 1.2cqh; font-size: 2.8cqh } .hv-tog i { width: 5cqh; height: 2.8cqh; border-radius: 99px; background: #62d26f; position: relative } .hv-tog i::after { content: ''; position: absolute; right: 0.4cqh; top: 0.4cqh; width: 2cqh; height: 2cqh; border-radius: 50%; background: #fff }
.hv-card { padding: 1.2cqh 1.5cqh; border-radius: 1.6cqh; background: rgba(110, 240, 176, 0.18); font-size: 2.8cqh; line-height: 1.3 }
.hv-price { font: 700 3.2cqh 'Hanken Grotesk', sans-serif }
.hv-open { display: flex; align-items: center; gap: 1.2cqh; font: 600 2.9cqh 'Hanken Grotesk', sans-serif; color: #1f8a4c } .hv-open i { width: 1.6cqh; height: 1.6cqh; border-radius: 50%; background: #2fbf6a; box-shadow: 0 0 0 0.6cqh rgba(47, 191, 106, 0.25) } .dk .hv-open { color: #6ef0b0 }
@container (max-width: 460px) { .hv-open { font-size: 3.8cqh } }
.hv-btn { margin-top: auto; padding: 1.7cqh; border-radius: 99px; background: #15102c; color: #fff; text-align: center; font: 700 3.4cqh 'Hanken Grotesk', sans-serif; transition: background 0.4s } .hv-btn.pu { background: #6c389c } .dk .hv-btn:not(.pu) { background: #f1edff; color: #15102c }
.hv-new { animation: hv-in 0.9s ease-out } @keyframes hv-in { 0% { opacity: 0; transform: scale(0.8); box-shadow: 0 0 0 1.2cqh rgba(110, 240, 176, 0.7) } 60% { opacity: 1; transform: scale(1.03) } 100% { box-shadow: 0 0 0 0 rgba(110, 240, 176, 0) } }
.hv-code { height: 80cqh; margin-top: 4cqh; display: flex; flex-direction: column; min-width: 0; border-radius: 3cqh; background: rgba(6, 4, 20, 0.88); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden }
.hv-bar { display: flex; align-items: center; gap: 1cqh; padding: 2cqh 2.6cqh 1.4cqh; font: 500 2.7cqh 'JetBrains Mono', monospace; color: #8f86b8 } .hv-bar i { width: 1.7cqh; height: 1.7cqh; border-radius: 50%; background: #3a3260 } .hv-bar span { margin-left: 1cqh }
.hv-lines { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; margin: 0; padding: 0 2.6cqh 1.4cqh; font: 500 2.6cqh/1.5 'JetBrains Mono', monospace; color: #b9b0e0; white-space: pre-wrap; overflow: hidden }
.hv-lines .add { color: #6ef0b0; background: rgba(110, 240, 176, 0.07); border-radius: 0.6cqh } .hv-lines .cur::after { content: '▍'; color: #fff; animation: gx-pulse 0.9s steps(1) infinite }
.hv-now { margin: 0; padding: 1.8cqh 7cqw 1.8cqh 2.6cqh; font-size: 3.1cqh; line-height: 1.35; color: #fff; background: rgba(108, 56, 156, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.08) } .hv-now em { font-style: normal; color: #cfc2ff; white-space: nowrap }
.hv-tag { position: absolute; right: 4cqw; top: 2.2cqh; padding: 0.6cqh 1.4cqh; border-radius: 99px; background: rgba(110, 240, 176, 0.16); border: 1px solid rgba(110, 240, 176, 0.4); font: 700 2.5cqh 'JetBrains Mono', monospace; letter-spacing: 0.06em; color: #6ef0b0; white-space: nowrap }
.gx-tv.small .hv-tag, .gx-tv.tiny .hv-tag { display: none }
/* the queue, where a poll would be */
.gx-hiveq > b em { background: #6ef0b0; color: #08261a }
.hv-q { display: grid; gap: 6px; margin-top: 8px }
.hv-qi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: var(--ink); font: 600 13.5px/1.3 'Hanken Grotesk', sans-serif; text-align: left; cursor: pointer }
.hv-qi span { flex: 1; min-width: 0 } .hv-qi small { display: block; margin-top: 1px; font: 500 11px 'JetBrains Mono', monospace; color: var(--ink3) }
.hv-qi em { flex: none; font: 700 12px 'JetBrains Mono', monospace; font-style: normal; color: var(--ink2); padding: 4px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.07) }
.hv-qi.on em { background: #6ef0b0; color: #08261a } .hv-qi.mine { border-color: rgba(233, 72, 43, 0.6); background: rgba(233, 72, 43, 0.12) } .hv-qi:hover { background: rgba(255, 255, 255, 0.09) }
.gx-hiveq > small { display: block; margin-top: 8px }
@media (max-width: 640px) { .hv-qi { padding: 6px 9px; font-size: 13px } .gx-watch .gx-hiveq > small { display: block } }
@media (prefers-reduced-motion: reduce) { .hv-new, .hv-lines .cur::after { animation: none } }
.hv-lines { -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%) }          /* (older lines scroll away under a fade, never cut in half) */
@container (max-width: 460px) { .gx-hive { grid-template-columns: 40cqw 1fr; gap: 3cqw; padding: 0 3cqw 0 4cqw } .hv-phone { height: 84cqh; margin-top: 6cqh; padding: 3.4cqh 2.4cqh 2.6cqh; gap: 2cqh } .hv-t { font-size: 7cqh } .hv-sub { font-size: 4.2cqh } .hv-slots i, .hv-card, .hv-photo, .hv-tog, .hv-stars { font-size: 3.8cqh } .hv-price { font-size: 4.2cqh } .hv-btn { font-size: 4.4cqh; padding: 2cqh } .hv-slots i:nth-child(3) { display: none } .hv-code { height: 84cqh; margin-top: 6cqh } .hv-bar { display: none } .hv-lines { padding-top: 1.6cqh; font-size: 4cqh } .hv-now { font-size: 4.2cqh; padding: 1.8cqh 13cqw 1.8cqh 2.4cqh } .hv-tag { font-size: 3.4cqh; top: 1.2cqh } }

/* the featured contests' prize, floating big over the star (the contest is the destination) */
.gx-lab.prize b { gap: 8px; padding: 6px 15px 6px 9px; background: rgba(38, 27, 5, 0.78); border-color: rgba(255, 211, 107, 0.62); box-shadow: 0 0 34px -8px rgba(255, 211, 107, 0.75); color: #fff4d6; font: 800 22px/1 'Hanken Grotesk', sans-serif; font-variant-numeric: tabular-nums }
.gx-lab.prize b em { padding: 0; border-radius: 0; background: none; font: 600 0.62em/1 'Hanken Grotesk', sans-serif; letter-spacing: 0; color: #ffd36b }
.gx-lab.prize b i.lab-coin { flex: none; width: 1.05em; height: 1.05em; border-radius: 0; background: url(img/coin.png) center / contain no-repeat }
.gx-lab.prize small { margin-top: 6px; font: 600 12.5px/1.2 'Hanken Grotesk', sans-serif; letter-spacing: 0; color: #fff4d6 }
.gx-lab.prize.big b { gap: 10px; padding: 9px 20px 9px 11px; font-size: 36px }
.gx-lab.prize.big small { font-size: 15px }
@media (max-width: 640px) { .gx-lab.prize b { font-size: 16px } .gx-lab.prize.big b { font-size: 25px; padding: 7px 15px 7px 9px } .gx-lab.prize small { font-size: 11px } .gx-lab.prize.big small { font-size: 12.5px } }
/* inside a contest: who made each planet, and how much it is used */
.gx-lab.ent b { padding: 3px 10px; font-size: 12px; background: rgba(16, 12, 36, 0.62) } .gx-lab.ent small { margin-top: 3px; font-size: 10px; color: var(--ink2) }
.gx-klist.gx-sys .gx-krow.li img { flex: none; width: 34px; height: 34px; border-radius: 8px; object-fit: cover }
.gx-panel.sysp .gx-fnav { margin-top: 10px }
.gx-lab.prize { cursor: pointer } .gx-lab.prize:hover b { border-color: rgba(255, 211, 107, 0.95) }
.gx-raids { display: grid; grid-template-columns: 1fr; gap: 6px } .gx-raids > small { margin-bottom: 2px } .gx-raids .gx-judge i { width: 30px; height: 30px; font-size: 11px }          /* (three raids as a list: never two and one left alone) */
@media (max-width: 640px) { .wv-info:has(.wv-contest) { flex-wrap: wrap } .wv-info:has(.wv-contest) .wv-acts { flex: 1 0 100% } .wv-acts .wv-contest { flex: 1; height: 38px } .wv-info:has(.wv-contest) .wv-acts .gx-go { flex: 1 } }          /* (a stream in a featured contest: its buttons get their own row) */
@media (max-width: 360px) { .gx-hero .gx-row > button { flex: 1 1 0; min-width: 0; height: 50px; padding: 0 10px; font-size: 15.5px } }          /* (the smallest phones: both buttons fit) */
/* a featured contest's stream, drawn (media/live.js): fills its screen; no sound button */
.gx-live-cv { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block }
.gx-tv.drawn .gx-tv-live, .gx-tv.drawn .gx-tv-fs { z-index: 3 } .gx-tv.drawn .gx-tv-snd { display: none }
.gx-row .gx-go.gx-big { flex: 1; height: 56px; border-radius: 28px; font-size: 18px }          /* (the one big button: open the contest, make your den) */
.gx-row.gx-row-small { margin-top: 10px; justify-content: space-between } .gx-row-small .gx-hint-b { margin: 0 }
@media (max-height: 520px) { .gx-panel.sysp { max-height: calc(100vh - 70px); overflow-y: auto } }          /* (a phone on its side: who's in scrolls inside its panel) */
@media (max-width: 900px) { #gxPhone { display: none } }          /* (a tablet has no need of "Phone view", and the header keeps room for Today) */
@media (min-width: 641px) and (max-width: 760px) { .gx-top { flex-wrap: wrap; gap: 6px 10px } .gx-wide { display: none } .gx-live { order: 3; width: 100%; font-size: 13px } }          /* (a small phone on its side: the counts take their own row, so Today stays on screen) */
/* the heart: the three featured contests, each with its prize big; under its star who runs it, the time left, the entries and who is on it now */
.gx-lab.prize.heart b { gap: 9px; padding: 8px 18px 8px 10px; font-size: 30px }
.gx-lab.prize.heart.big b { gap: 10px; padding: 9px 20px 9px 11px; font-size: 38px }
.gx-lab small.now { display: flex; align-items: center; justify-content: center; gap: 6px; color: #e9fff4 }
.gx-lab small.now i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: gx-now 1.6s ease-in-out infinite }
@keyframes gx-now { 50% { opacity: 0.35 } }
@media (prefers-reduced-motion: reduce) { .gx-lab small.now i { animation: none } }
@media (max-width: 640px) { .gx-lab.prize.heart b { padding: 6px 13px 6px 8px; font-size: 21px } .gx-lab.prize.heart.big b { font-size: 26px } .gx-lab.prize.heart small { margin-top: 5px; font-size: 11.5px } .gx-lab.prize.heart small.now { margin-top: 3px; font: 600 11px/1.2 'Hanken Grotesk', sans-serif; color: var(--ink2) } }
.gx-lab.prize b img.lab-ip { flex: none; width: 1.25em; height: 1.25em; margin: -2px 2px -2px -2px; border-radius: 7px; object-fit: cover; border: 1px solid rgba(255, 244, 214, 0.55) }
@media (min-width: 900px) { .gx-panel.hero { top: auto; bottom: max(40px, 5vh); transform: none } .gx-panel.hero.off { transform: translateY(10px) } }          /* (on a computer the words sit low on the left: the middle is the contests') */
@media (min-width: 900px) and (max-height: 700px) { .gx-hero h1 { font-size: clamp(34px, 7.4vh, 56px) } .gx-hero .gx-row { margin-top: 14px } .gx-hero .gx-hint { margin-top: 8px } .gx-panel.hero { bottom: 24px } }
@media (max-width: 640px) { .gx-lab.prize.heart { white-space: normal; max-width: calc(100vw - 20px) } .gx-lab.prize.heart small { text-wrap: balance } .gx-lab.prize.heart .nw { white-space: nowrap } }          /* (a narrow phone: what it is and who runs it take two lines, each whole) */
@media (max-width: 640px) and (max-height: 700px) { .gx-hero h1 { font-size: 34px } .gx-hero .gx-pt { font-size: 14.5px } .gx-hero .gx-row { margin-top: 14px } .gx-hero .gx-go, .gx-hero .gx-alt { height: 48px } .gx-hero .gx-hint { margin-top: 8px } }          /* (a small phone: the words take less room, so all three contests fit above them) */
@media (max-height: 520px) and (min-width: 560px) { .gx-panel.hero { width: min(560px, calc(100vw - 32px)); bottom: max(8px, env(safe-area-inset-bottom)) } .gx-hero h1 { font-size: 30px } .gx-hero .gx-pt { margin-top: 4px; font-size: 14px } .gx-hero .gx-row { margin-top: 10px } .gx-hero .gx-go, .gx-hero .gx-alt { height: 44px; font-size: 16px } .gx-hero .gx-hint { display: none } .gx-lab.prize.heart { max-width: 28vw } }          /* (a phone on its side: the words low and small, the three contests side by side above them) */
/* a featured contest, opened up in the galaxy: the brief, the prize split, the board, the next raid, the kit and the tools; the one big button
   stays put under them while they scroll */
.gx-panel.cxp { display: flex; flex-direction: column; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 92px); max-height: calc(100dvh - 92px) }
.cxp .cx-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; margin: 4px -8px 0 0; padding: 0 8px 4px 0; overscroll-behavior: contain }
.cxp .gx-row { flex: none; margin-top: 12px } .cxp .gx-fnav { flex: none; justify-content: space-between }
.cx-brief { margin-top: 8px }
.cx-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 12px 0 0 }
.cx-meta > * { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); font: 600 13.5px/1.2 'Hanken Grotesk', sans-serif; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap }
.cx-meta b { background: rgba(38, 27, 5, 0.7); border-color: rgba(255, 211, 107, 0.5); color: #fff4d6; font-weight: 800 } .cx-meta b i.lab-coin { flex: none; width: 17px; height: 17px; background: url(img/coin.png) center / contain no-repeat }
.cx-now i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: gx-now 1.6s ease-in-out infinite } .cx-now { color: #e9fff4 }
.cx-sec { margin-top: 16px }
.cx-sec h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 7px; font: 500 10.5px/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--violet) } .cx-sec h3 small { font: inherit; letter-spacing: 0.08em; text-transform: none; color: var(--ink3) }
.cx-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none }
.cx-split li { padding: 8px 10px; border-radius: 12px; background: rgba(255, 211, 107, 0.07); border: 1px solid rgba(255, 211, 107, 0.22) } .cx-split li:first-child { background: rgba(255, 211, 107, 0.13); border-color: rgba(255, 211, 107, 0.45) }
.cx-split em { display: block; font: 500 10.5px/1 'JetBrains Mono', monospace; font-style: normal; letter-spacing: 0.08em; color: var(--gold) } .cx-split b { display: block; margin-top: 5px; font: 800 19px/1 'Hanken Grotesk', sans-serif; color: #fff4d6; font-variant-numeric: tabular-nums } .cx-split small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink3) }
.cx-board { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none }
.cx-board button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px 6px 8px; border-radius: 14px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.04); color: var(--ink); text-align: left; cursor: pointer }
.cx-board button:hover { background: rgba(255, 255, 255, 0.08) } .cx-board button:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px }
.cx-board em { flex: none; width: 30px; font: 500 11px 'JetBrains Mono', monospace; font-style: normal; color: var(--gold) } .cx-board img { flex: none; width: 34px; height: 34px; border-radius: 8px; object-fit: cover }
.cx-board span { flex: 1; min-width: 0 } .cx-board span b { display: block; font-size: 14px; line-height: 1.25 } .cx-board span small { display: block; font-size: 12px; color: var(--ink3) }
.cx-board i { flex: none; font: 500 12.5px 'JetBrains Mono', monospace; font-style: normal; color: var(--ink2); font-variant-numeric: tabular-nums }
.cx-raid { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink2); text-wrap: pretty } .cx-raid b { color: var(--ink) } .cx-raid i { font-style: normal; color: var(--gold) }
.cx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px }
.cx-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none } .cx-list b { display: block; font-size: 13.5px; line-height: 1.25; color: var(--ink) } .cx-list small { display: block; font-size: 12px; line-height: 1.3; color: var(--ink3) }
.gx-lab.ent.top b { border-color: rgba(255, 211, 107, 0.55); color: #fff4d6 }
@media (prefers-reduced-motion: reduce) { .cx-now i { animation: none } }
@media (max-width: 640px) { .gx-panel.cxp { width: auto; max-height: 60vh; max-height: 60dvh; padding: 12px 14px 10px } .cxp .gx-divi { width: 42px; height: 42px } .cxp .gx-ph h2 { font-size: 21px } .cx-meta > * { min-height: 32px; padding: 0 9px; font-size: 13px } .cx-two { grid-template-columns: 1fr } .cxp .gx-row { margin-top: 10px } .cxp .gx-fnav { margin-top: 8px; padding-top: 8px } .cxp .gx-fb { height: 32px; padding: 0 12px } }
@media (max-height: 520px) { .gx-panel.cxp { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: visible } .cxp .gx-row .gx-go.gx-big { height: 46px } }
.cxp .cx-body { padding-bottom: 22px; -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent); mask-image: linear-gradient(#000 calc(100% - 26px), transparent) }          /* (more below fades out: no line cut in half at the edge) */
@media (max-height: 520px) { .gx-lab.prize.heart b { padding: 5px 12px 5px 7px; font-size: 18px } .gx-lab.prize.heart.big b { font-size: 22px } .gx-lab.prize.heart small { margin-top: 4px; font-size: 11px } .gx-lab.prize.heart small.now { margin-top: 2px; font: 600 10.5px/1.2 'Hanken Grotesk', sans-serif; color: var(--ink2) } .gx-lab.prize.heart { white-space: normal } .gx-lab.prize.heart small { text-wrap: balance } .gx-lab.prize.heart .nw { white-space: nowrap } }          /* (a phone on its side) */
@media (max-width: 640px) and (max-height: 700px) { .gx-lab.prize.heart b { padding: 5px 12px 5px 7px; font-size: 18px } .gx-lab.prize.heart.big b { font-size: 22px } .gx-lab.prize.heart small { margin-top: 4px } }          /* (a small phone: smaller, so three fit one above another) */
@media (min-width: 641px) and (max-height: 720px) { .gx-lab.prize.heart b { padding: 6px 15px 6px 9px; font-size: 24px } .gx-lab.prize.heart.big b { font-size: 30px } .gx-lab.prize.heart small { margin-top: 4px; font-size: 13px } }          /* (a short window) */
@media (max-width: 640px) and (max-height: 600px) { .gx-hero h1 { font-size: 30px } .gx-hero .gx-row { margin-top: 10px } .gx-hero .gx-go, .gx-hero .gx-alt { height: 44px } .gx-hero .gx-hint { margin-top: 6px } }          /* (the smallest phones: the words smaller still) */

/* ── a thing you look at, joined to its panel: a picture (or a stream you have not gone into yet) sits right on the panel's top edge, the
   width of the panel, nothing of the galaxy between. A picture shows whole; if the room cuts its height, the rest is its own colours, blurred ── */
.gx-tv.pdock { z-index: 4 }
.gx-tv.pdock .gx-tv-box { border-radius: 22px 22px 0 0 !important; border: 1px solid var(--line) !important; border-bottom: 0 !important; box-shadow: 0 -18px 50px -26px rgba(0, 0, 0, 0.9) !important; cursor: default }
.gx-tv.pdock.live .gx-tv-box, .gx-tv.pdock:not(.pic) .gx-tv-box { cursor: pointer }
.gx-tv.pic.pdock .gx-tv-box { background: #07060f }
.gx-tv.pic.pdock .gx-tv-box::before { content: ''; position: absolute; inset: -30px; background: var(--pbg) center / cover; filter: blur(24px) brightness(0.5) }
.gx-tv.pic.pdock:not(.live) .gx-tv-box img { object-fit: contain; transform: none }
.gx-tv.pdock .gx-pic-cap, .gx-tv.pdock .gx-tv-beam { display: none }
.gx-panel.pjoin, .gx-card.pjoin { border-top-left-radius: 0; border-top-right-radius: 0; border-top-color: transparent }

/* a short phone watching: the stream may be a little wider than 16:9, and the vote loses its small print, so the chat, reactions, say box
   and the buttons under them all stay on the screen */
@media (max-width: 640px) and (max-height: 760px) {
  .wv-stage { min-height: 50vw }
  .gx-watch .gx-hiveq > small, .gx-watch .hv-qi small { display: none }
  .gx-watch .hv-qi { padding: 4px 9px; line-height: 1.25 } .gx-watch .hv-q { gap: 4px; margin-top: 6px } .gx-watch .hv-qi em { padding: 3px 8px }
}
@media (max-width: 640px) and (max-height: 700px) { .wv-note .wv-long { display: none } .wv-side .gx-chat { min-height: 48px } .wv-stage { min-height: 46vw } }          /* (a short phone: the note's one line) */
/* a tablet held upright: the stream across the top; under it who and what, then the poll, reactions and say box beside a tall chat
   (side by side, the stream would be small with the sky empty above it) */
@media (min-width: 641px) and (max-aspect-ratio: 1 / 1) {
  .gx-watch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto; grid-template-areas: "stage stage" "info info" "poll chat" "react chat" "say chat" "as chat" "nav nav"; row-gap: 8px }
  .wv-stage { height: min(calc((100vw - 40px) * 0.625), 52vh) }
  .wv-side { display: contents }
  .gx-watch .gx-room-poll { grid-area: poll; align-self: start } .gx-watch .gx-room-poll .gx-poll { margin: 0; background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px) }
  .gx-watch .gx-chat { grid-area: chat; min-height: 0; height: auto; margin: 0; pointer-events: auto } .gx-watch .gx-chat li { background: rgba(12, 9, 30, 0.72) }          /* (each line its own pill, fading out at the top) */
  .gx-watch .gx-react { grid-area: react; pointer-events: auto } .gx-watch .gx-say { grid-area: say; pointer-events: auto } .gx-watch .wv-as { grid-area: as; align-self: end }
}
@media (min-width: 641px) and (max-width: 1180px) and (min-aspect-ratio: 1 / 1) { .gx-watch { grid-template-columns: minmax(0, 1fr) 300px } }          /* (a small computer: the chat a little narrower, the stream a little bigger) */
@media (max-width: 640px) and (max-height: 600px) {          /* (the smallest phones: everything a little tighter) */
  .wv-stage { min-height: 42vw }
  .wv-side .gx-chat { min-height: 44px }
  .gx-watch .hv-qi { padding: 3px 8px; font-size: 12.5px } .gx-watch .hv-qi em { padding: 2px 7px }
  .gx-watch .gx-react button { width: 30px; height: 30px; font-size: 15px } .gx-watch .gx-say input, .gx-watch .gx-say button { height: 34px }
  .wv-nav .gx-fb { height: 30px } .wv-panel { gap: 6px; padding-top: 8px }
  .wv-id span { display: none } .wv-side .gx-chat { min-height: 36px }
  .gx-watch .gx-poll { padding: 6px 8px } .gx-watch .hv-q { gap: 3px; margin-top: 4px }          /* (the name and Tip stay; what they make is on the screen above) */
}

/* someone's @name in a card or panel: a link to their profile (profile.js draws the profile itself) */
.gx-who { display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: rgba(201, 182, 255, 0.55) }
.gx-who:hover { text-decoration-color: currentColor } .gx-who:focus-visible { outline: 2px solid #c9b6ff; outline-offset: 2px; border-radius: 4px }
/* the ask for where you build from, in the claim panel: the panel's own heading asks it, so the ask's heading stays out */
.gx-place .pf-askh { display: none } .gx-place .pf-ask { margin: 2px 0 0 }

/* the Dokens pills, about a third smaller than they were: the suns are the show, the pill only says what it pays */
.gx-lab.prize b { padding: 5px 12px 5px 7px; font-size: 17px } .gx-lab.prize.big b { gap: 8px; padding: 6px 14px 6px 8px; font-size: 24px } .gx-lab.prize.big small { font-size: 13px }
.gx-lab.prize.heart b { gap: 7px; padding: 6px 13px 6px 8px; font-size: 21px } .gx-lab.prize.heart.big b { gap: 8px; padding: 7px 15px 7px 9px; font-size: 26px }
@media (max-width: 640px) { .gx-lab.prize b { font-size: 14px } .gx-lab.prize.big b { font-size: 18px; padding: 5px 12px 5px 7px } .gx-lab.prize.heart b { padding: 5px 11px 5px 7px; font-size: 16px } .gx-lab.prize.heart.big b { font-size: 19px } }
@media (max-width: 640px) and (max-height: 700px) { .gx-lab.prize.heart b { padding: 4px 10px 4px 6px; font-size: 14px } .gx-lab.prize.heart.big b { font-size: 17px } }
@media (min-width: 641px) and (max-height: 720px) { .gx-lab.prize.heart b { padding: 5px 12px 5px 7px; font-size: 18px } .gx-lab.prize.heart.big b { font-size: 22px } }
@media (max-height: 520px) { .gx-lab.prize.heart b { padding: 4px 10px 4px 6px; font-size: 14px } .gx-lab.prize.heart.big b { font-size: 17px } }

/* ── building it together, as a stream from a vibe coder's desk (a stand-in until a real one is live): the room's glow, the monitor with the app
   and the terminal (the Divi terminal art at its top), the desk with its keyboard and mug, and the coder, seen from behind, low in the frame ── */
.gx-hive.vibe { display: block; padding: 0; background: radial-gradient(70% 62% at 50% 36%, #2b1e57 0%, #120d28 62%, #07051a 100%) }
.gx-hive.vibe .hv-mon { position: absolute; left: 7cqw; right: 7cqw; top: 7cqh; bottom: 20cqh; border-radius: 2.4cqh; background: #04030c; border: 1.1cqh solid #1d1830; box-shadow: 0 0 9cqh -2cqh rgba(155, 107, 255, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.06) }
.gx-hive.vibe .hv-mon::after { content: ''; position: absolute; left: 50%; bottom: -5.2cqh; width: 9cqw; height: 4.2cqh; transform: translateX(-50%); border-radius: 0 0 1cqh 1cqh; background: linear-gradient(#211b33, #15111f) }
.gx-hive.vibe .hv-screen { position: absolute; inset: 0; container-type: size; display: grid; grid-template-columns: 30cqw 1fr; gap: 3cqw; align-items: center; padding: 0 3cqw 0 4cqw }
.gx-hive.vibe .hv-phone { height: 86cqh; margin-top: 0 } .gx-hive.vibe .hv-code { height: 88cqh; margin-top: 0 }
.gx-hive.vibe .hv-art { display: block; flex: none; width: 100%; height: auto !important; aspect-ratio: 114 / 60; background: #16131f }
.gx-hive.vibe.no-art .hv-art { display: none }
.gx-hive.vibe .hv-lines .ask { color: #ece8ff } .gx-hive.vibe .hv-lines .ok { color: #6ef0b0 } .gx-hive.vibe .hv-lines .run { color: #c9b6ff }
.gx-hive.vibe .hv-desk { position: absolute; left: 0; right: 0; bottom: 0; height: 17cqh; background: linear-gradient(#2a2038, #120d1d); box-shadow: 0 -0.4cqh 2cqh rgba(0, 0, 0, 0.5) }
.gx-hive.vibe .hv-kb { position: absolute; left: 50%; bottom: 4.6cqh; width: 30cqw; height: 6cqh; transform: translateX(-50%); border-radius: 1cqh; background: repeating-linear-gradient(0deg, transparent 0 1.75cqh, #251f38 1.75cqh 2cqh), repeating-linear-gradient(90deg, #3d3454 0 2.1cqw, #251f38 2.1cqw 2.5cqw); box-shadow: 0 0.6cqh 0 #0d0a15 }
.gx-hive.vibe .hv-mug { position: absolute; right: 14cqw; bottom: 4.6cqh; width: 4.8cqh; height: 6.2cqh; border-radius: 0.6cqh 0.6cqh 1.4cqh 1.4cqh; background: linear-gradient(90deg, #6c389c, #9b6bff) }
.gx-hive.vibe .hv-mug::after { content: ''; position: absolute; right: -2.2cqh; top: 1.3cqh; width: 2.5cqh; height: 3cqh; border: 0.7cqh solid #7d4ac0; border-left: 0; border-radius: 0 1.6cqh 1.6cqh 0 }
.gx-hive.vibe .hv-me { position: absolute; left: 3cqw; bottom: -3cqh; width: 24cqw; height: 27cqh }
.gx-hive.vibe .hv-me::before { content: ''; position: absolute; left: 7cqw; top: 0; width: 11.5cqh; height: 13cqh; border-radius: 50% 50% 46% 46%; background: #0a0714; box-shadow: 0.5cqh -0.4cqh 1.4cqh -0.3cqh rgba(190, 160, 255, 0.5) }
.gx-hive.vibe .hv-me::after { content: ''; position: absolute; left: 0; bottom: 0; width: 24cqw; height: 17cqh; border-radius: 48% 52% 0 0 / 72% 72% 0 0; background: #0a0714; box-shadow: 0.6cqh -0.5cqh 1.6cqh -0.4cqh rgba(190, 160, 255, 0.42) }
.gx-tv.small .gx-hive.vibe .hv-me, .gx-tv.tiny .gx-hive.vibe .hv-me, .gx-tv.tiny .gx-hive.vibe .hv-desk { display: none }

/* the button that sends someone Dokens: "Send 10" and the coin (it was Tip) */
.gx-coin-i { display: inline-block; width: 1.05em; height: 1.05em; margin-left: 0.3em; vertical-align: -0.17em; background: url(img/coin.png) center / contain no-repeat }
/* where the person you are watching builds from: small and quiet, after their name */
.wv-from { margin-left: 0.5em; font: 500 0.72em/1 'Hanken Grotesk', sans-serif; color: var(--ink3); white-space: nowrap }
.wv-from::before { content: ''; display: inline-block; width: 0.62em; height: 0.78em; margin-right: 0.3em; vertical-align: -0.05em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 13'%3E%3Cpath d='M5 0a5 5 0 0 0-5 5c0 3.6 5 8 5 8s5-4.4 5-8a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 13'%3E%3Cpath d='M5 0a5 5 0 0 0-5 5c0 3.6 5 8 5 8s5-4.4 5-8a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E") center / contain no-repeat }

/* Pause, for Show me around: a round button right before Skip, in the caption bar where your eye already is. Filled, so it is seen; while
   paused it turns to Play and the bar says so (its line stops, and goes a little dim) */
.gx-auto .gx-auto-pz { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 0; background: #f3f0ff; color: #2a1a52; box-shadow: 0 6px 18px -6px rgba(155, 107, 255, 0.8); cursor: pointer }
.gx-auto .gx-auto-pz svg { width: 18px; height: 18px; fill: currentColor } .gx-auto-pz .pl, .gx-auto.paused .gx-auto-pz .pz { display: none } .gx-auto.paused .gx-auto-pz .pl { display: block }
.gx-auto .gx-auto-pz:hover { background: #ffffff } .gx-auto .gx-auto-pz:focus-visible { outline: 2px solid #c9b6ff; outline-offset: 3px }
.gx-auto.paused .gx-auto-p i { opacity: 0.5 } .gx-auto.paused .gx-auto-t { opacity: 0.75 }
@media (max-width: 640px) { .gx-auto .gx-auto-pz { width: 36px; height: 36px } }

/* ── a den up close: small cards in orbit round its sun (who, trophies, their Divi, their best work, their numbers) ── */
.gx-sats { position: fixed; inset: 0; z-index: 4; pointer-events: none; transition: opacity 0.3s }
.gx-satw { position: absolute; left: 0; top: 0; will-change: transform, opacity }
.gx-sat { display: flex; align-items: center; gap: 8px; padding: 6px 11px 6px 7px; border-radius: 14px; border: 1px solid rgba(201, 182, 255, 0.28); background: rgba(14, 10, 34, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.9), 0 0 22px -10px rgba(155, 107, 255, 0.6); color: var(--ink); font: 600 12.5px/1.2 'Hanken Grotesk', sans-serif; text-align: left; white-space: nowrap; pointer-events: auto }
button.gx-sat { cursor: pointer } button.gx-sat:hover { border-color: rgba(201, 182, 255, 0.6) } button.gx-sat:focus-visible { outline: 2px solid #c9b6ff; outline-offset: 2px }
.gx-sat img { flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover } .gx-sat.divi img { border-radius: 8px; background: rgba(255, 255, 255, 0.08) }
.gx-sat span { display: flex; flex-direction: column; gap: 2px } .gx-sat b { font-weight: 700 } .gx-sat small { font: 500 10.5px/1.2 'JetBrains Mono', monospace; color: var(--ink3) }
.gx-sat svg { flex: none; width: 22px; height: 22px; fill: none; stroke: #ffd36b; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round } .gx-sat.work svg { stroke: #c9b6ff } .gx-sat.work svg path { fill: #c9b6ff; stroke: none }
.gx-sat.trophy { border-color: rgba(255, 211, 107, 0.45); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.9), 0 0 24px -10px rgba(255, 211, 107, 0.7) } .gx-sat.trophy b { color: #ffe7a8 }
.gx-sat.stats { gap: 14px; padding: 7px 13px } .gx-sat.stats span { align-items: flex-start }
@media (max-width: 640px) { .gx-sat { padding: 5px 9px 5px 6px; gap: 6px; font-size: 11.5px } .gx-sat img { width: 22px; height: 22px } .gx-sat svg { width: 18px; height: 18px } .gx-sat small { font-size: 9.5px } }
@media (prefers-reduced-motion: reduce) { .gx-sats { transition: none } }
@media (max-width: 640px) and (max-height: 700px) { .wv-from { display: none } }          /* (a short phone: the name alone on its line, so the panel still fits; the place is on their profile) */
@media (max-width: 640px) and (max-height: 700px) { .wv-id .wv-long { display: none } }          /* (a short phone: what they are making, without the aside, so the panel fits) */

/* Divi's voice for Show me around: a quiet round button before Pause; the speaker shows a cross while it is off, its waves while it is on */
.gx-auto .gx-auto-snd { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer }
.gx-auto .gx-auto-snd svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }
.gx-auto .gx-auto-snd .w { display: none } .gx-auto.voiced .gx-auto-snd .w { display: inline } .gx-auto.voiced .gx-auto-snd .x { display: none } .gx-auto.voiced .gx-auto-snd { color: #f3f0ff; border-color: rgba(201, 182, 255, 0.6) }
@media (max-width: 640px) { .gx-auto .gx-auto-snd { width: 32px; height: 32px } }
/* how plays pay, under a contest's prize: half to the maker, half to whoever owns what it is made from */
.cx-half { margin: 9px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink2) } .cx-half b { color: var(--ink) }
/* on a computer the caption bar is wider: with Sound, Pause and Skip in it, a caption still reads as one line or two, never a stack of sentences */
@media (min-width: 900px) { .gx-auto { width: min(820px, calc(100vw - 48px)) } }

/* Show me around on a phone: the caption sits up under the top bar, near what you are watching, with Divi's face and the words across the
   whole bar; Sound, Pause and Skip go in a small row under them */
@media (max-width: 640px) and (orientation: portrait) {
  .gx-auto { top: calc(env(safe-area-inset-top) + 82px); bottom: auto; flex-wrap: wrap; row-gap: 4px; column-gap: 8px; padding-bottom: 14px }
  .gx-auto .gx-auto-t { flex: 1 1 calc(100% - 64px); font-size: 15.5px }
  .gx-auto .gx-auto-snd { margin-left: auto } .gx-auto .gx-auto-snd, .gx-auto .gx-auto-pz { width: 32px; height: 32px } .gx-auto button[data-act="autoskip"] { height: 32px; padding: 0 12px; font-size: 13px }
}

/* every kind of work, in the first moments of Show me around: the nine suns' names, under each; the galaxy's own labels step back meanwhile */
.gx-nine { position: fixed; inset: 0; z-index: 7; pointer-events: none; overflow: hidden }
.gx-nine[hidden] { display: none }
.gx-nine canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .85)) drop-shadow(0 0 3px rgba(0, 0, 0, .7)) }
.gx-nine-shadow { position: absolute; left: 0; top: 0; opacity: 0; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(1, 2, 8, .94) 0%, rgba(1, 2, 8, .82) 28%, rgba(1, 2, 8, .48) 47%, rgba(1, 2, 8, .12) 64%, transparent 76%) }
.gx-nine-lab { position: absolute; z-index: 2; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; opacity: 0; white-space: nowrap; text-align: center; text-shadow: 0 2px 4px #020208, 0 3px 14px #020208 }
.gx-nine-lab b { font: 700 15px/1.1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #fff }
.gx-nine-lab small { font: 500 12px/1.2 'Hanken Grotesk', system-ui, sans-serif; color: rgba(236, 232, 255, 0.72) }
@media (max-width: 640px) { .gx-nine-lab b { font-size: 12.5px } }
.gx-nine.compact .gx-nine-lab b { font-size: 10px; letter-spacing: .05em }
.gx-labels, .gx-tvs, .gx-marks { transition: opacity 0.3s }
body.gx-nining .gx-labels, body.gx-nining .gx-tvs, body.gx-nining .gx-marks { opacity: 0 }

/* on a computer, a den's card beside the den, and the thin line that joins them (a dot where it meets the den) */
.gx-panel.beside, .gx-card.beside { transition: opacity 0.3s }
.gx-lead { position: fixed; left: 0; top: 0; z-index: 5; height: 1px; transform-origin: 0 50%; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(214, 196, 255, 0.5), color-mix(in srgb, var(--c, #c9b6ff) 80%, white)); transition: opacity 0.3s }
.gx-lead i { position: absolute; right: -4px; top: -3.5px; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--c, #c9b6ff) 70%, white); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--c, #c9b6ff) 60%, transparent) }
.gx-runs .gx-more { color: var(--ink3) }
.gx-lab.kind.spot b { color: #fff; border-color: rgba(110, 240, 176, 0.5); background: rgba(10, 40, 30, 0.72) }          /* (Show me around names your den's things one at a time: "your game") */
.gx-spot { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: rgba(3, 3, 10, 0.66); opacity: 0; transition: opacity 0.8s ease; -webkit-mask-composite: source-in; mask-composite: intersect }          /* (Show me around's light on your den: the rest of the galaxy darkens; the names and screens sit above it) */
.gx-spot.on { opacity: 1 }
@media (prefers-reduced-motion: reduce) { .gx-spot { transition: none } }
.cx-rule { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink) } .cx-fine { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink3); text-wrap: pretty }          /* (how a contest is won: use, in Dokens, and the example rule's small print) */
/* a featured contest, opened round its own sun (27 Oct) */
.gx-around { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.35s ease } .gx-around.on { opacity: 1 }
.gx-around.on .ar-card, .gx-around.on .ar-bot, .gx-around.on .ar-strip { pointer-events: auto }
.ar-ties { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible } .ar-ties line { stroke: rgba(214, 196, 255, 0.28); stroke-width: 1; stroke-dasharray: 2 5 } .ar-ties circle { fill: none; stroke: rgba(255, 211, 107, 0.22); stroke-width: 1 }
.ar-col { position: absolute; left: 0; top: 0; display: grid; gap: 16px; will-change: transform }
.ar-card { padding: 12px 14px; border-radius: 18px; background: rgba(14, 11, 34, 0.84); border: 1px solid var(--line); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); font-size: 13px; line-height: 1.42; transition: transform 0.2s ease-out }
.ar-card h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 7px; font: 500 10.5px/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--violet) } .ar-card h3 small { letter-spacing: 0.04em; text-transform: none; color: var(--ink3) } .ar-card .ar-h2 { margin-top: 10px }
.ar-card p { margin: 0; color: var(--ink2); text-wrap: pretty } .ar-card p + p { margin-top: 6px } .ar-card p b { color: var(--ink) } .ar-card p i { font-style: normal; color: var(--gold) }
.ar-k { font: 500 11px/1.3 'JetBrains Mono', monospace; letter-spacing: 0.08em; color: var(--ink3) !important }
.ar-prize h2 { margin: 3px 0 2px; font: 600 21px/1.15 var(--serif); color: var(--ink); text-wrap: balance } .ar-big { margin: 2px 0 10px !important; font: 800 38px/1 'Hanken Grotesk', sans-serif; letter-spacing: -0.01em; color: var(--gold) !important; text-shadow: 0 0 22px rgba(255, 211, 107, 0.35) }
.ar-prize .cx-meta { margin-top: 8px } .ar-sm { font-size: 12.5px !important } .ar-fine { font-size: 11.5px !important; color: var(--ink3) !important }
.ar-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none } .ar-chips li { padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); font-size: 12px; color: var(--ink2); white-space: nowrap } .ar-chips small { color: var(--ink3) }
.ar-bot { position: absolute; left: 50%; top: 0; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; will-change: transform } .ar-bot .gx-go { height: 46px; padding: 0 22px }
.gx-around.port .ar-top { position: absolute; left: 0; top: 0; width: min(330px, calc(100vw - 32px)) } .gx-around.port .ar-big { font-size: 30px; margin: 2px 0 8px !important } .gx-around.port .ar-prize h2 { font-size: 18px } .gx-around.port .cx-split b { font-size: 16px }
.gx-around.port .ar-strip { position: absolute; left: 0; right: 0; display: flex; gap: 10px; padding: 0 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; align-items: flex-start } .gx-around.port .ar-strip::-webkit-scrollbar { display: none }
.gx-around.port .ar-strip .ar-card { flex: 0 0 min(360px, 80%); max-height: 100%; overflow-y: auto; scroll-snap-align: center }
.ar-bot .gx-fb { background: rgba(14, 11, 34, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px) }          /* (solid enough that what goes round the sun never shows through) */
@media (prefers-reduced-motion: reduce) { .gx-around { transition: none } }

/* the prize over a featured sun (27 Oct): the one amount on it, "to win" small in its pill; what it is and whose are on the plate under it */
.gx-lab.prize.heart b em { margin-left: 2px; font-size: 0.5em; letter-spacing: 0.04em; text-transform: uppercase }
/* in a system, the feed of what's happening elsewhere waits (27 Oct, "turn down the labels when you're in a given system") */
.gx-insys .gx-feed { opacity: 0; pointer-events: none; transition: opacity 0.25s }

/* Divi's guided introduction: the existing caption becomes a small dialogue HUD. */
.gx-auto { width: min(880px, calc(100vw - 32px)); gap: 14px; padding: 16px 16px 21px; align-items: center }
.gx-auto-copy { flex: 1; min-width: 0 }
.gx-auto-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 7px; font: 500 10px/1.4 'JetBrains Mono', monospace; color: var(--ink3) }
.gx-auto-meta b { color: #d2bbff; letter-spacing: .12em }
.gx-auto-voice-note { opacity: .8; font: 400 10px/1.4 'Hanken Grotesk', sans-serif }
.gx-auto-chapter { margin-left: auto; font-size: 10px }
.gx-auto .gx-auto-t { font: 500 16px/1.5 'Hanken Grotesk', sans-serif; text-wrap: pretty; min-height: 48px }
.gx-auto-controls { display: flex; align-items: center; gap: 7px }
.gx-auto .gx-auto-replay { display: grid; place-items: center; width: 34px; padding: 0 }
.gx-auto-replay svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.gx-auto-d { width: 58px; height: 58px; margin: 0; border-radius: 50%; transition: box-shadow .25s }
.gx-auto.speaking .gx-auto-d { box-shadow: 0 0 0 1px rgba(201,182,255,.45), 0 0 0 5px rgba(201,182,255,.05) }
.gx-auto button:focus-visible { outline: 2px solid #d2bbff; outline-offset: 3px }
.gx-tour-invite { margin: 10px 0 0; font: 500 12px/1.4 'Hanken Grotesk', sans-serif; color: var(--ink3) }
@media (max-width: 700px) {
  .gx-auto { flex-wrap: wrap; gap: 8px 10px; padding: 12px 12px 18px }
  .gx-auto-copy { flex: 1 1 calc(100% - 68px) }
  .gx-auto .gx-auto-t { font-size: 14px; line-height: 1.45; min-height: 61px }
  .gx-auto-chapter { flex-basis: 100%; margin-left: 0; font-size: 9px }
  .gx-auto-meta { margin-bottom: 5px; gap: 2px 8px }
  .gx-auto-controls { margin-left: auto }
  .gx-auto .gx-auto-snd, .gx-auto .gx-auto-pz, .gx-auto .gx-auto-replay { width: 40px; height: 40px }
  .gx-auto button[data-act="autoskip"] { height: 40px }
  .gx-auto-d { align-self: flex-start; margin-top: 8px; width: 48px; height: 48px }
}
@media (max-height: 520px) and (orientation: landscape) {
  .gx-auto { flex-wrap: nowrap; bottom: 10px; padding: 10px 12px 16px }
  .gx-auto .gx-auto-t { min-height: 0; font-size: 13px }
  .gx-auto-copy { flex: 1 }
  .gx-auto-d { width: 38px; height: 38px }
  .gx-auto-chapter { flex-basis: auto }
}