/* space.la: DDR / StepMania theme.
   With WebGPU the game owns the screen (html.gpu-on) and this HTML stays focusable for screen readers and
   keyboard users but invisible. Without it (html.no-gpu, no JS) these styles ARE the game: same screens,
   CSS transforms instead of shaders. Plain pages (blog, code, drinks...) sit over the game's background
   (html.gpu-bg). */

:root {
  --pink: #ff4fb8; --cyan: #4ff3ff; --yellow: #ffe14f; --purple: #b58cff; --green: #6cff8e;
  --ink: #05030f; --night: #0b0820; --glass: rgba(10, 7, 30, .82); --line: rgba(255, 255, 255, .14);
  --text: #f4f1ff; --dim: #a6a1cf;
  --display: 'Russo One', 'Chakra Petch', system-ui, sans-serif;
  --ui: 'Chakra Petch', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --skew: -14deg;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--text); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; font: 500 16px/1.6 var(--ui); background:
    radial-gradient(1200px 700px at 20% -10%, rgba(255, 79, 184, .22), transparent 60%),
    radial-gradient(900px 600px at 110% 20%, rgba(79, 243, 255, .16), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 22px),
    var(--ink);
  background-attachment: fixed;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { color: #fff; }
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: .02em; line-height: 1.1; margin: 0 0 .5em; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
:root { --sel: 255 79 184; }
::selection { background: rgb(var(--sel)); color: var(--ink); text-shadow: 0 0 10px rgb(var(--sel) / .9); -webkit-text-stroke: 0; }
a::selection, a *::selection { color: var(--ink); text-decoration: underline; text-decoration-color: rgb(5 3 15 / .5); }
code::selection, pre ::selection { background: rgb(var(--sel) / .85); }
img::selection, svg::selection { background: rgb(var(--sel) / .35); }

/* ---------- game layers ---------- */
.game-root { display: contents; }
.game-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; z-index: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
html.gpu-on, html.gpu-on body { overflow: hidden; overscroll-behavior: none; height: 100%; }
html.gpu-on body { background: var(--ink); }

/* visually hidden, still in the accessibility tree and focusable */
html.gpu-on #site, html.gpu-boot #site {
  position: fixed !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
  clip-path: inset(50%) !important; white-space: nowrap; top: 0; left: 0; z-index: -1;
}
html.gpu-boot body::after {
  content: ''; position: fixed; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%;
  border: 3px solid rgba(255, 79, 184, .25); border-top-color: var(--pink); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* page mode: real pages float on the game background */
html.gpu-bg .game-canvas { pointer-events: none; }
html.gpu-bg body { background: var(--ink); }
html.gpu-bg #site { position: relative; z-index: 1; }

.overlay-host { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.overlay-panel {
  position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; overflow: auto; overscroll-behavior: contain;
  padding: 18px 26px 40px; pointer-events: none; will-change: transform, opacity; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent;
  -webkit-overflow-scrolling: touch; outline: none;
}
.overlay-panel:not(.on) { display: none; }
.overlay-panel::-webkit-scrollbar { width: 6px; }
.overlay-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 3px; }
@media (max-width: 760px) { .overlay-panel { padding: 14px 16px 32px; } }

.lightbox {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; gap: 12px; align-content: center; padding: 4vmin;
  background: rgba(3, 2, 10, .88); backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s ease;
}
.lightbox.on { opacity: 1; }
.lightbox img, .lightbox video { max-width: min(1400px, 94vw); max-height: 82vh; width: auto; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 0 40px rgba(255, 79, 184, .45); border-radius: 6px; }
.lightbox p { margin: 0; font: 600 12px var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--dim); }
.game-toast {
  position: fixed; left: 50%; bottom: 90px; z-index: 30; transform: translate(-50%, 20px) skewX(var(--skew)); opacity: 0;
  padding: 10px 18px; background: var(--yellow); color: var(--ink); font: 700 13px var(--ui); letter-spacing: .15em; transition: .3s ease;
}
.game-toast.on { opacity: 1; transform: translate(-50%, 0) skewX(var(--skew)); }

/* ---------- prose (overlay panels + plain pages) ---------- */
.prose { color: #e9e6ff; font: 400 16px/1.7 var(--ui); max-width: 72ch; }
.prose > :first-child { margin-top: 0; }
.prose h1, .prose h2 { font-size: 1.45em; margin: 1.6em 0 .55em; color: #fff; }
.prose h2::before { content: '▶ '; color: var(--pink); font-size: .7em; vertical-align: .15em; }
.prose h3 { font: 700 1.05em var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--yellow); margin: 1.4em 0 .4em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
.prose a { color: var(--cyan); border-bottom: 1px solid rgba(79, 243, 255, .35); }
.prose a:hover { color: #fff; border-color: #fff; }
.prose strong { color: #fff; }
.prose code { font: 500 .88em var(--mono); background: rgba(255, 255, 255, .08); padding: .1em .35em; border-radius: 4px; }
.prose pre { font: 500 13px/1.55 var(--mono); background: rgba(0, 0, 0, .45); border: 1px solid var(--line); padding: 14px 16px; border-radius: 6px; overflow: auto; }
.prose pre code { background: none; padding: 0; }
.prose blockquote { margin: 0 0 1em; padding: .2em 0 .2em 1em; border-left: 3px solid var(--pink); color: var(--dim); }
.prose img { border-radius: 6px; border: 1px solid var(--line); margin: 1em 0; }
.prose hr { border: 0; height: 2px; background: linear-gradient(90deg, var(--pink), transparent); margin: 2em 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: .92em; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: .45em .6em; text-align: left; }
.overlay-panel .prose { max-width: none; font-size: 15.5px; }
.prose .moment + .moment, .prose .writeup, .prose .history { margin-top: 1.6em; }
.prose .history ol { list-style: none; padding: 0; font-size: .9em; }
.prose .history li { display: flex; gap: .8em; padding: .3em 0; border-bottom: 1px dashed var(--line); }
.prose .history li.major { color: var(--yellow); }
.prose .history time { font: 500 .85em var(--mono); color: var(--dim); min-width: 8.5em; }
.prose .lineage { margin-top: 1.6em; }
.prose .lineage ul { list-style: none; padding: 0; font-size: .9em; }
.prose .lineage li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .7em; padding: .3em 0; border-bottom: 1px dashed var(--line); }
.prose .lineage .year { font: 500 .85em var(--mono); color: var(--dim); }
.prose .lineage .why { color: var(--dim); flex-basis: 100%; font-size: .92em; }
.prose .stack div { margin-bottom: .6em; }
.prose .stack h3 { margin: 0; }
.prose .stack p { margin: 0; color: var(--dim); font-size: .92em; }

/* ---------- shell (fallback + page mode) ---------- */
.site { min-height: 100dvh; display: flex; flex-direction: column; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--yellow); color: var(--ink); padding: 6px 12px; z-index: 50; font-weight: 700; }
.skip:focus { left: 8px; }
.bar {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(14px, 3vw, 32px);
  background: linear-gradient(180deg, rgba(5, 3, 15, .95), rgba(5, 3, 15, .7)); border-bottom: 2px solid var(--pink); box-shadow: 0 0 24px rgba(255, 79, 184, .35); backdrop-filter: blur(8px);
}
.brand { font: 400 22px var(--display); color: #fff; letter-spacing: .04em; transform: skewX(var(--skew)); text-shadow: 0 0 12px rgba(255, 79, 184, .9); }
.brand span { color: var(--yellow); }
.modes-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.modes-nav a {
  font: 700 12px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: #fff; padding: 7px 14px;
  border: 1px solid rgba(79, 243, 255, .5); background: rgba(5, 3, 15, .6); transform: skewX(var(--skew)); transition: .15s;
}
.modes-nav a:hover, .modes-nav a.on { background: var(--cyan); color: var(--ink); box-shadow: 0 0 14px rgba(79, 243, 255, .7); }
.modes-nav a.icon { padding: 7px 10px; display: inline-flex; }
.modes-nav svg { width: 15px; height: 15px; }
main.screen { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(18px, 4vw, 44px) clamp(14px, 3vw, 32px) 64px; }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px clamp(14px, 3vw, 32px); border-top: 1px solid var(--line); font: 500 12px var(--mono); color: var(--dim); letter-spacing: .08em; }
.foot a { color: var(--dim); }
.foot a:hover { color: #fff; }
.foot .sep { opacity: .4; margin: 0 .3em; }
.socials { display: flex; gap: 12px; align-items: center; }
.socials svg { width: 18px; height: 18px; }
.socials a { color: var(--dim); }
.socials a:hover { color: var(--pink); }
html.gpu-bg main.screen { background: rgba(5, 3, 15, .72); backdrop-filter: blur(6px); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }

.screen-head { margin-bottom: 24px; }
.screen-head h1 {
  display: inline-block; font-size: clamp(28px, 5vw, 46px); padding: 6px 28px 6px 18px; margin-bottom: 8px;
  background: linear-gradient(90deg, rgba(255, 79, 184, .55), rgba(255, 79, 184, 0) 80%); border-left: 6px solid var(--pink); transform: skewX(var(--skew));
  text-shadow: 0 0 18px rgba(255, 79, 184, .8);
}
.screen-head p { margin: 0; font: 600 13px var(--mono); letter-spacing: .12em; color: var(--dim); text-transform: uppercase; }
.crumbs { font: 600 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c, var(--pink)); margin-bottom: 6px; }
.lede { color: #dcd8ff; font-size: 1.08em; max-width: 62ch; }

/* ---------- title ---------- */
.title-screen { text-align: center; padding-top: clamp(20px, 8vh, 90px); }
.logo {
  font-size: clamp(64px, 15vw, 190px); margin: 0; transform: skewX(var(--skew)); color: #fff; line-height: .95;
  background: linear-gradient(180deg, #fff 30%, #ffd1f0 55%, #ff4fb8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 79, 184, .75)); animation: slam .7s cubic-bezier(.2, 1.6, .4, 1) both;
}
.logo span { -webkit-text-fill-color: var(--yellow); }
@keyframes slam { from { transform: skewX(var(--skew)) scale(2.6); opacity: 0; } to { transform: skewX(var(--skew)) scale(1); opacity: 1; } }
.tagline { font: 600 clamp(12px, 1.6vw, 15px) var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--dim); margin: 22px 0 34px; }
.press-start {
  display: inline-block; font: 400 clamp(24px, 4vw, 38px) var(--display); color: #fff; letter-spacing: .14em; text-shadow: 0 0 14px var(--pink), 0 0 2px #000;
  animation: blink .9s steps(2, start) infinite;
}
.press-start::before { content: '▶ '; color: var(--pink); }
.press-start::after { content: ' ◀'; color: var(--pink); }
@keyframes blink { 50% { opacity: .25; } }
.mode-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 48px auto 40px; max-width: 1100px; text-align: left; }
.mode-tile {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 18px 22px; color: #fff;
  background: linear-gradient(100deg, rgba(255, 79, 184, .35), rgba(5, 3, 15, .85) 60%); border: 2px solid rgba(255, 79, 184, .6);
  transform: skewX(var(--skew)) rotate(-1.5deg); transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), box-shadow .2s;
}
.mode-tile:nth-child(2) { background: linear-gradient(100deg, rgba(79, 243, 255, .32), rgba(5, 3, 15, .85) 60%); border-color: rgba(79, 243, 255, .6); }
.mode-tile:nth-child(3) { background: linear-gradient(100deg, rgba(255, 225, 79, .3), rgba(5, 3, 15, .85) 60%); border-color: rgba(255, 225, 79, .6); }
.mode-tile:nth-child(4) { background: linear-gradient(100deg, rgba(181, 140, 255, .35), rgba(5, 3, 15, .85) 60%); border-color: rgba(181, 140, 255, .6); }
.mode-tile:hover, .mode-tile:focus-visible { transform: skewX(var(--skew)) rotate(-1.5deg) scale(1.05); box-shadow: 0 0 26px rgba(255, 255, 255, .25); color: #fff; }
.mode-tile .n { grid-row: span 2; font: 400 46px var(--display); opacity: .75; }
.mode-tile .name { font: 400 22px var(--display); }
.mode-tile .blurb { font-size: 13px; color: #d9d5ff; }
.featured { max-width: 900px; margin: 0 auto; text-align: left; }
.featured h2 { font: 700 13px var(--mono); letter-spacing: .3em; color: var(--cyan); }
.featured ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.featured a { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 14px; border-left: 4px solid var(--c, var(--pink)); background: rgba(5, 3, 15, .7); color: #fff; }
.featured .t { font-weight: 700; }
.featured .bpm { font: 600 12px var(--mono); color: var(--c, var(--pink)); }
.featured .ds { grid-column: 1 / -1; font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- music select (CSS wheel) ---------- */
.folders { display: flex; flex-direction: column; gap: 8px; max-width: 900px; margin-left: auto; perspective: 900px; }
.folder > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 12px 24px;
  font: 400 22px var(--display); color: #fff; background: linear-gradient(100deg, rgba(255, 79, 184, .45), rgba(5, 3, 15, .9) 70%);
  border: 2px solid rgba(255, 79, 184, .7); transform: skewX(var(--skew)); transition: transform .18s, box-shadow .18s;
}
.folder > summary::-webkit-details-marker { display: none; }
.folder > summary::before { content: '▶'; font-size: 14px; color: var(--yellow); margin-right: 12px; transition: transform .2s; }
.folder[open] > summary::before { transform: rotate(90deg); }
.folder > summary:hover, .folder > summary:focus-visible { transform: skewX(var(--skew)) translateX(-10px); box-shadow: 0 0 22px rgba(255, 79, 184, .55); }
.folder-name { flex: 1; }
.count { font: 600 12px var(--mono); letter-spacing: .12em; color: rgba(255, 255, 255, .8); }
.songs { list-style: none; margin: 8px 0 8px 40px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.folder[open] .songs li { animation: slidein .35s cubic-bezier(.2, 1.3, .4, 1) both; }
.folder[open] .songs li:nth-child(2) { animation-delay: .03s; } .folder[open] .songs li:nth-child(3) { animation-delay: .06s; }
.folder[open] .songs li:nth-child(4) { animation-delay: .09s; } .folder[open] .songs li:nth-child(5) { animation-delay: .12s; }
.folder[open] .songs li:nth-child(n+6) { animation-delay: .15s; }
@keyframes slidein { from { opacity: 0; transform: translateX(80px); } }
.song {
  display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 10px 20px 10px 22px; color: #fff; position: relative;
  background: rgba(11, 8, 32, .88); border: 1px solid color-mix(in srgb, var(--c, var(--pink)) 55%, transparent); border-left: 8px solid var(--c, var(--pink));
  transform: skewX(var(--skew)); transition: transform .15s, background .15s, box-shadow .15s;
}
.song:hover, .song:focus-visible { transform: skewX(var(--skew)) translateX(-14px) scale(1.02); background: color-mix(in srgb, var(--c, var(--pink)) 22%, var(--night)); box-shadow: 0 0 18px color-mix(in srgb, var(--c, var(--pink)) 60%, transparent); color: #fff; }
.song .t { font-weight: 700; font-size: 17px; }
.song .grade { font: 400 18px var(--display); color: var(--yellow); text-shadow: 0 0 8px rgba(255, 225, 79, .6); }
.song .meta { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c, var(--pink)); }
.song .ds { grid-column: 1 / -1; font-size: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- stage ---------- */
.stage .back, .stage .back:visited { display: inline-block; font: 700 12px var(--ui); letter-spacing: .14em; text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--c, var(--pink)); color: #fff; transform: skewX(var(--skew)); margin-bottom: 22px; }
.stage-head h1 { font-size: clamp(34px, 6vw, 64px); text-shadow: 0 0 22px color-mix(in srgb, var(--c, var(--pink)) 80%, transparent); }
.stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; padding: 0; }
.stats > div { padding: 8px 16px; min-width: 96px; background: rgba(5, 3, 15, .75); border: 1px solid color-mix(in srgb, var(--c, var(--pink)) 50%, transparent); transform: skewX(var(--skew)); }
.stats dt { font: 600 10px var(--mono); letter-spacing: .16em; color: var(--dim); }
.stats dd { margin: 0; font: 400 22px var(--display); color: #fff; }
.stats > div:first-child dd { color: var(--yellow); }
.links { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.links a { display: inline-flex; gap: 8px; align-items: center; padding: 8px 16px; font: 700 13px var(--ui); letter-spacing: .06em; color: #fff; border: 1.5px solid var(--cyan); background: rgba(5, 3, 15, .7); transform: skewX(var(--skew)); }
.links a:hover { background: var(--cyan); color: var(--ink); }
.links svg { width: 15px; height: 15px; }
.media { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0 0 28px; }
.media figure { margin: 0; }
.media img, .media video { border: 2px solid rgba(255, 255, 255, .8); border-radius: 6px; box-shadow: 0 0 22px color-mix(in srgb, var(--c, var(--pink)) 45%, transparent); }
.media figcaption { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-top: 6px; }
.stage-prose, .player-prose { padding: 22px 26px; background: var(--glass); border: 2px solid color-mix(in srgb, var(--c, var(--pink)) 60%, transparent); border-radius: 8px; max-width: none; }
.overlay-panel .stage-prose, .overlay-panel .player-prose, .overlay-panel .prose { padding: 0; background: none; border: 0; }

/* ---------- player data ---------- */
.player-card { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: 22px; margin-bottom: 22px; background: linear-gradient(110deg, rgba(255, 225, 79, .14), var(--glass) 50%); border: 2px solid var(--yellow); border-radius: 10px; box-shadow: 0 0 26px rgba(255, 225, 79, .25); --c: var(--yellow); }
.player-card img { width: 180px; height: 180px; object-fit: cover; border-radius: 50%; border: 3px solid var(--yellow); box-shadow: 0 0 22px rgba(255, 225, 79, .6); }
.player-card h1 { font-size: clamp(30px, 5vw, 50px); margin: 0; }
@media (max-width: 640px) { .player-card { grid-template-columns: 1fr; text-align: center; justify-items: center; } .player-card img { width: 128px; height: 128px; } .player-card .stats { justify-content: center; } }

/* ---------- nonstop course ---------- */
.course-stages { list-style: none; padding: 0 0 0 34px; margin: 0; position: relative; counter-reset: st; }
.course-stages::before { content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--cyan), var(--pink)); opacity: .5; }
.course-stage { position: relative; margin-bottom: 18px; padding: 18px 22px; background: var(--glass); border: 1.5px solid rgba(79, 243, 255, .45); border-radius: 8px; }
.course-stage::before { content: ''; position: absolute; left: -28px; top: 24px; width: 14px; height: 14px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.stage-no { font: 700 12px var(--ui); font-style: italic; letter-spacing: .25em; color: var(--cyan); }
.course-stage h2 { font-size: clamp(22px, 3vw, 30px); margin: 4px 0; }
.company { font: 600 .6em var(--ui); color: var(--yellow); letter-spacing: .04em; }
.dates { font: 500 12px var(--mono); color: var(--dim); margin-bottom: 10px; }

/* ---------- generic content pages (blog, code, drinks, tags, search) ---------- */
main.screen-page h1 { font-size: clamp(30px, 5vw, 52px); text-shadow: 0 0 18px rgba(255, 79, 184, .6); }
main.screen-page article .prose, main.screen-page .prose { margin-inline: auto; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .press-start { animation: none; }
}
@media (max-width: 760px) {
  .bar { flex-wrap: wrap; }
  .modes-nav a { padding: 6px 9px; font-size: 10.5px; letter-spacing: .1em; }
  .songs { margin-left: 14px; }
  .song, .folder > summary, .mode-tile, .screen-head h1 { transform: none; }
  .song:hover, .song:focus-visible { transform: translateX(-6px); }
  .folder > summary:hover { transform: translateX(-6px); }
}

@keyframes pulse{50%{opacity:.5}}
.py-20{padding-top:5rem;padding-bottom:5rem}
.text-center{text-align:center}
.font-mono{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace)}
.text-primary{color:#FF4FB8}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.mb-3{margin-bottom:0.75rem}
.text-5xl{font-size:3rem;line-height:1}
.font-bold{font-weight:700}
.tracking-tight{letter-spacing:-0.025em}
.mt-4{margin-top:1rem}
.text-ink-400{color:#bfc3e6}
.text-link{color:#4FF3FF}
.underline{text-decoration-line:underline}
.w-4{width:1rem}
.h-4{height:1rem}
.max-w-3xl{max-width:48rem}
.text-ink-500{color:#8f93bf}
.mb-6{margin-bottom:1.5rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.max-w-none{max-width:none}
.mt-6{margin-top:1.5rem}
.table{display:table}
.static{position:static}
.rounded{border-radius:0.25rem}
.border{border-width:1px}
.border-space-600{border-color:#221b4a}
.px-1\.5{padding-left:0.375rem;padding-right:0.375rem}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.text-\[10px\]{font-size:10px}
.bg-space-500{background-color:#342a66}
.bg-secondary{background-color:#FFE14F}
.bg-green-400{background-color:#4ade80}
.border-t{border-top-width:1px}
.border-space-800{border-color:#0d0a24}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.grid{display:grid}
.gap-x-4{column-gap:1rem}
.gap-y-1{row-gap:0.25rem}
.min-w-0{min-width:0px}
.flex{display:flex}
.items-center{align-items:center}
.gap-2{gap:0.5rem}
.w-1\.5{width:0.375rem}
.h-1\.5{height:0.375rem}
.rounded-full{border-radius:9999px}
.font-semibold{font-weight:600}
.text-ink-600{color:#62668f}
.mt-0\.5{margin-top:0.125rem}
.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.mt-1{margin-top:0.25rem}
.flex-wrap{flex-wrap:wrap}
.gap-1{gap:0.25rem}
.text-\[11px\]{font-size:11px}
.inline{display:inline}
.hidden{display:none}
.text-ink-300{color:#eef0ff}
.block{display:block}
.mb-4{margin-bottom:1rem}
.gap-1\.5{gap:0.375rem}
.px-2\.5{padding-left:0.625rem;padding-right:0.625rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.border-b{border-bottom-width:1px}
.mt-10{margin-top:2.5rem}
.text-xs{font-size:0.75rem;line-height:1rem}
.mb-10{margin-bottom:2.5rem}
.space-y-10 > :not([hidden]) ~ :not([hidden]){margin-top:2.5rem}
.scroll-mt-24{scroll-margin-top:6rem}
.items-baseline{align-items:baseline}
.gap-3{gap:0.75rem}
.mb-2{margin-bottom:0.5rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.inline-flex{display:inline-flex}
.justify-center{justify-content:center}
.bg-space-600{background-color:#221b4a}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.uppercase{text-transform:uppercase}
.-mt-6{margin-top:-1.5rem}
.w-full{width:100%}
.text-left{text-align:left}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.border-space-700{border-color:#171236}
.inline-block{display:inline-block}
.w-2{width:0.5rem}
.h-2{height:0.5rem}
.mr-2{margin-right:0.5rem}
.gap-4{gap:1rem}
.max-w-xl{max-width:36rem}
.flex-1{flex:1 1 0%}
.rounded-lg{border-radius:0.5rem}
.bg-space-800{background-color:#0d0a24}
.px-4{padding-left:1rem;padding-right:1rem}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.outline-none{outline:2px solid transparent;outline-offset:2px}
.bg-primary{background-color:#FF4FB8}
.text-space{color:#05030f}
.animate-pulse{animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite}
.-mt-4{margin-top:-1rem}
.tracking-wider{letter-spacing:0.05em}
.text-secondary{color:#FFE14F}
.ml-auto{margin-left:auto}
.normal-case{text-transform:none}
.tracking-normal{letter-spacing:0em}
.rounded-md{border-radius:0.375rem}
.border-space-700\/60{border-color:rgb(23 18 54 / 0.6)}
.bg-space-800\/60{background-color:rgb(13 10 36 / 0.6)}
.bg-green-900\/50{background-color:rgb(20 83 45 / 0.5)}
.text-green-300{color:#86efac}
.border-green-700{border-color:#15803d}
.bg-red-900\/40{background-color:rgb(127 29 29 / 0.4)}
.text-red-300{color:#fca5a5}
.border-red-800{border-color:#991b1b}
.bg-space-700\/60{background-color:rgb(23 18 54 / 0.6)}
.border-space-700\/70{border-color:rgb(23 18 54 / 0.7)}
.p-4{padding:1rem}
.w-2\.5{width:0.625rem}
.h-2\.5{height:0.625rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.leading-snug{line-height:1.375}
.ml-2{margin-left:0.5rem}
.font-normal{font-weight:400}
.break-words{overflow-wrap:break-word}
.mt-2{margin-top:0.5rem}
.cursor-pointer{cursor:pointer}
.space-y-1 > :not([hidden]) ~ :not([hidden]){margin-top:0.25rem}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){margin-top:0.125rem}
.max-w-2xl{max-width:42rem}
.w-10{width:2.5rem}
.bg-primary\/70{background-color:rgb(255 79 184 / 0.7)}
.mb-8{margin-bottom:2rem}
.mb-14{margin-bottom:3.5rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.mb-1{margin-bottom:0.25rem}
.space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top:0.75rem}
.w-5{width:1.25rem}
.h-5{height:1.25rem}
.leading-tight{line-height:1.25}
.w-3\.5{width:0.875rem}
.h-3\.5{height:0.875rem}
.rounded-xl{border-radius:0.75rem}
.mt-3{margin-top:0.75rem}
.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.aspect-\[3\/2\]{aspect-ratio:3/2}
.object-cover{object-fit:cover}
.object-top{object-position:top}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.opacity-80{opacity:0.8}
.border-space-500{border-color:#342a66}
.p-5{padding:1.25rem}
.flex-col{flex-direction:column}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.justify-between{justify-content:space-between}
.w-7{width:1.75rem}
.h-7{height:1.75rem}
.w-9{width:2.25rem}
.h-9{height:2.25rem}
.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.mt-auto{margin-top:auto}
.pt-1{padding-top:0.25rem}
.items-end{align-items:flex-end}
.animate-fadeup{animation:fadeup .7s cubic-bezier(.21,.82,.34,1) both}
.mt-14{margin-top:3.5rem}
.text-right{text-align:right}
.resize{resize:both}
.blur{filter:blur(8px)}
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.italic{font-style:italic}
.collapse{visibility:collapse}
.shrink{flex-shrink:1}
.bg-transparent{background-color:transparent}
.fixed{position:fixed}
.contents{display:contents}
.container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;max-width:80rem}
.visible{visibility:visible}
.lowercase{text-transform:lowercase}
.relative{position:relative}
.shadow{box-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)}
.ring{box-shadow:0 0 0 3px rgb(59 130 246 / 0.5)}
.invert{filter:invert(100%)}
.placeholder\:text-ink-600::placeholder{color:#62668f}
.hover\:text-primary:hover{color:#FF4FB8}
.hover\:border-primary:hover{border-color:#FF4FB8}
.hover\:text-ink-300:hover{color:#eef0ff}
.hover\:bg-primary-300:hover{background-color:#ff9ad6}
.hover\:border-primary\/60:hover{border-color:rgb(255 79 184 / 0.6)}
.hover\:-translate-y-0\.5:hover{--tw-ty:-0.125rem;transform:translate(var(--tw-tx,0),var(--tw-ty,0)) rotate(var(--tw-r,0)) scale(var(--tw-s,1))}
.focus\:border-primary:focus{border-color:#FF4FB8}
@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (min-width: 640px){.sm\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}}
@media (min-width: 768px){.md\:grid-cols-\[minmax\(0\,1fr\)_10rem_9rem\]{grid-template-columns:minmax(0,1fr) 10rem 9rem}}
@media (min-width: 768px){.md\:text-right{text-align:right}}
@media (min-width: 768px){.md\:hidden{display:none}}
@media (min-width: 768px){.md\:block{display:block}}
@media (min-width: 768px){.md\:text-5xl{font-size:3rem;line-height:1}}
@media (min-width: 768px){.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}}
@media (min-width: 1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}}