:root {
  color-scheme: dark;
  --bg: #090806;
  --bg-strong: #100f0b;
  --surface: #15130f;
  --surface-soft: #1e1a13;
  --ink: #f1eee3;
  --muted: #aba28f;
  --line: #302b22;
  --cyan: #f3c969;
  --cyan-soft: rgba(243, 201, 105, 0.14);
  --rose: #ff8a6b;
  --rose-soft: rgba(255, 138, 107, 0.13);
  --mustard: #f3c969;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
  --radius: 8px;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7fafc;
  --bg-strong: #eef6fb;
  --surface: #ffffff;
  --surface-soft: #f2f7fb;
  --ink: #101828;
  --muted: #5f6b7a;
  --line: #d9e4ed;
  --cyan: #007ea7;
  --cyan-soft: rgba(0, 126, 167, 0.1);
  --rose: #c73a64;
  --rose-soft: rgba(199, 58, 100, 0.1);
  --mustard: #8d741e;
  --shadow: 0 16px 50px rgba(30, 50, 70, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  --pointer-x: 50%;
  --pointer-y: 45%;
  background:
    linear-gradient(color-mix(in srgb, var(--mustard) 3.6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--mustard) 3.6%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--cyan) 13%, transparent), transparent 30rem),
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--rose) 8%, transparent), transparent 26rem),
    var(--bg);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
  background-position: 0 0, 0 0, center top, right top, 0 0;
  font-family: var(--sans);
  line-height: 1.6;
  animation: gridDrift 28s linear infinite;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--cyan) 20%, transparent) 46%, rgba(255, 255, 255, 0.18) 50%, color-mix(in srgb, var(--mustard) 18%, transparent) 54%, transparent 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  animation: scanBoot 360ms var(--ease-out) both;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), color-mix(in srgb, var(--cyan) 20%, transparent), color-mix(in srgb, var(--rose) 5%, transparent) 16rem, transparent 34rem);
  opacity: 0;
  mix-blend-mode: normal;
  transition: opacity 220ms var(--ease-snap);
}

body.is-pointer-lit::after {
  opacity: 1;
}

:root[data-theme="light"] body::after {
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(0, 126, 167, 0.18), rgba(0, 126, 167, 0.07) 15rem, transparent 33rem);
  mix-blend-mode: normal;
}

:root[data-theme="light"] body {
  background:
    linear-gradient(rgba(0, 126, 167, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 126, 167, 0.035) 1px, transparent 1px),
    radial-gradient(circle at center top, rgba(0, 126, 167, 0.12), transparent 34rem),
    var(--bg);
  background-size: 48px 48px, 48px 48px, auto, auto;
  background-position: 0 0, 0 0, center top, 0 0;
}

@keyframes gridDrift {
  from {
    background-position: 0 0, 0 0, center top, right top, 0 0;
  }

  to {
    background-position: 48px 48px, 48px 48px, center top, right top, 0 0;
  }
}

@keyframes pageRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroGlow {
  0%,
  100% {
    opacity: 0.22;
    transform: scale(1.06);
  }

  50% {
    opacity: 0.3;
    transform: scale(1.09);
  }
}

@keyframes avatarFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes caretBlink {
  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}

@keyframes dialogIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dialogOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

@keyframes backdropIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scanBoot {
  0% {
    opacity: 0.72;
    transform: translateY(-100%);
  }

  48% {
    opacity: 0.55;
  }

  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  line-height: 1.05;
  letter-spacing: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  min-height: 58px;
  padding: 8px clamp(18px, 4vw, 52px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px);
  animation: pageRise 420ms var(--ease-out) both;
}

main,
.site-footer {
  position: relative;
  z-index: 1;
}

main {
  flex: 1 0 auto;
}

.brand,
.site-nav,
.header-actions,
.footer-links,
.hero-actions,
.tag-row,
.ctf-controls,
.article-meta,
.toolbar-actions,
.language-toggle,
.identity-pills {
  display: flex;
  align-items: center;
}

.brand {
  gap: 0;
  font-weight: 900;
  justify-self: start;
  width: fit-content;
}

.brand:hover .brand-mark {
  transform: translateY(-1px);
  box-shadow: 0 0 28px color-mix(in srgb, var(--cyan) 34%, transparent);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 28px;
  color: var(--bg);
  background: var(--cyan);
  border: 1px solid color-mix(in srgb, var(--cyan) 70%, #fff);
  border-radius: 7px;
  box-shadow: 0 0 22px color-mix(in srgb, var(--cyan) 22%, transparent);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 900;
  transition: transform 180ms var(--ease-snap), box-shadow 180ms var(--ease-snap);
}

.site-nav {
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.site-nav a,
.header-button,
.chip {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  transition: color 160ms var(--ease-snap), border-color 160ms var(--ease-snap), background 160ms var(--ease-snap), transform 160ms var(--ease-snap);
}

.site-nav a.is-active,
.site-nav a:hover,
.header-button:hover,
.chip.is-active,
.chip:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--cyan) 42%, var(--line));
  background: var(--cyan-soft);
}

.site-nav a:hover,
.header-button:hover,
.chip:hover {
  transform: translateY(-1px);
}

.header-actions {
  justify-content: flex-end;
  gap: 8px;
}

.header-button {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(500px, 70svh, 640px);
  overflow: hidden;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 8%, color-mix(in srgb, var(--cyan) 9%, transparent) 34%, transparent 58%),
    linear-gradient(250deg, transparent 18%, color-mix(in srgb, var(--rose) 7%, transparent) 48%, transparent 72%);
  opacity: 0.8;
  mix-blend-mode: screen;
  transform: translateX(-8%);
  animation: lightSweep 12s var(--ease-in-out, ease-in-out) infinite alternate;
}

.hero-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(760px, 84vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(5, 7, 11, 0.1), rgba(5, 7, 11, 0.46)),
    url("/assets/mascot.png") center / cover no-repeat;
  filter: blur(18px) saturate(0.9);
  opacity: 0.26;
  overflow: hidden;
  translate: -50% -50%;
  transform: scale(1.06);
  animation: heroGlow 9s var(--ease-in-out, ease-in-out) infinite;
}

:root[data-theme="light"] .hero-bg {
  opacity: 0.14;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(color-mix(in srgb, var(--cyan) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 6%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: gridDrift 32s linear infinite;
}

@keyframes lightSweep {
  from {
    transform: translateX(-8%);
  }

  to {
    transform: translateX(8%);
  }
}

.hero-inner,
.page-hero,
.section-shell,
.article-shell {
  width: min(1120px, calc(100% - 36px));
  margin: 0 auto;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  padding: 56px 0 64px;
}

.hero-inner > * {
  animation: pageRise 620ms var(--ease-out) both;
}

.hero-inner > :nth-child(1) {
  animation-delay: 40ms;
}

.hero-inner > :nth-child(2) {
  animation-delay: 120ms;
}

.hero-inner > :nth-child(3) {
  animation-delay: 200ms;
}

.hero-inner > :nth-child(4) {
  animation-delay: 280ms;
}

.hero-avatar {
  display: block;
  width: clamp(220px, 30vw, 360px);
  aspect-ratio: 1;
  margin-bottom: 0;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--cyan) 62%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 0 0 13px color-mix(in srgb, var(--cyan) 6%, transparent), 0 0 70px color-mix(in srgb, var(--cyan) 14%, transparent), var(--shadow);
  transition: transform 220ms var(--ease-snap), border-color 220ms var(--ease-snap), box-shadow 220ms var(--ease-snap);
  animation-name: pageRise, avatarFloat;
  animation-duration: 620ms, 6s;
  animation-timing-function: var(--ease-out), ease-in-out;
  animation-fill-mode: both, none;
  animation-iteration-count: 1, infinite;
  animation-delay: 40ms, 900ms;
}

.hero-avatar:hover {
  border-color: color-mix(in srgb, var(--cyan) 80%, #fff);
  box-shadow: 0 0 0 13px color-mix(in srgb, var(--cyan) 8%, transparent), 0 0 92px color-mix(in srgb, var(--cyan) 20%, transparent), var(--shadow);
}

.hero-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.hero h1 {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 88%, var(--cyan));
  font-size: clamp(34px, 5.2vw, 64px);
}

.terminal-line {
  display: inline-flex;
  margin: 14px 0 0;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: clamp(19px, 3vw, 28px);
  font-weight: 900;
}

.terminal-line span {
  color: var(--mustard);
}

.terminal-link {
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  position: relative;
  transition: background 160ms var(--ease-snap), transform 160ms var(--ease-snap), color 160ms var(--ease-snap);
}

.terminal-link:hover {
  background: var(--cyan-soft);
  transform: translateY(-1px);
}

.terminal-link::after {
  content: "";
  width: 10px;
  height: 1.05em;
  border-radius: 1px;
  background: currentColor;
  animation: caretBlink 1.05s steps(1, end) infinite;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 64%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 50px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px);
}

.social-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--cyan) 12%, transparent);
  transition: transform 180ms var(--ease-snap), border-color 180ms var(--ease-snap), background 180ms var(--ease-snap), box-shadow 180ms var(--ease-snap);
}

.social-link:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--cyan) 62%, var(--line));
  background: var(--cyan-soft);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--cyan) 20%, transparent);
}

.social-link img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  transition: transform 180ms var(--ease-snap);
}

.social-link:hover img {
  transform: scale(1.08);
}

.social-link[aria-label="X"] {
  background: #fff;
}

.social-link[aria-label="X"] img {
  width: 16px;
  height: 16px;
}

.social-link::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 4;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 160ms var(--ease-snap), transform 160ms var(--ease-snap);
}

.social-link:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hero-copy,
.page-hero p,
.lead,
.section-head > p:not(.eyebrow) {
  max-width: 760px;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 22px);
}

.identity-pills {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 26px;
}

.identity-pills span,
.language-pill,
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  font-size: 12px;
  font-weight: 900;
}

.hero-actions {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.primary-link,
.secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-weight: 900;
  transition: transform 160ms var(--ease-snap), border-color 160ms var(--ease-snap), background 160ms var(--ease-snap), box-shadow 160ms var(--ease-snap);
}

.primary-link:hover,
.secondary-link:hover {
  transform: translateY(-2px);
}

.primary-link {
  color: var(--bg);
  background: var(--cyan);
  box-shadow: 0 0 28px color-mix(in srgb, var(--cyan) 22%, transparent);
}

.secondary-link {
  color: var(--ink);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

.page-hero {
  padding: 78px 0 30px;
  animation: pageRise 520ms var(--ease-out) both;
}

.page-hero.slim {
  padding-bottom: 18px;
}

.page-hero h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(52px, 9vw, 116px);
}

.posts .page-hero h1 {
  font-size: clamp(34px, 5vw, 56px);
}

.eyebrow,
.post-date,
.timeline-item > span,
.info-card span,
.contest-body p,
.contest-scoreboard span,
.contest-foot small,
.ctf-highlight span,
.search-result span {
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 12px;
}

.section-shell {
  padding: 78px 0;
}

.motion-ready .motion-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.home-signal,
.two-column,
.profile-grid,
.split-section {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 24px;
  align-items: start;
}

.section-head {
  max-width: 760px;
  margin-bottom: 24px;
}

.section-head.compact {
  margin-bottom: 16px;
}

.section-head h2 {
  margin: 0;
  font-size: clamp(34px, 4.8vw, 62px);
}

.section-head.compact h2 {
  font-size: clamp(32px, 4vw, 50px);
}

.about .section-head h2 {
  color: var(--cyan);
  font-size: clamp(28px, 3.4vw, 44px);
}

.section-head p:not(.eyebrow) {
  margin: 12px 0 0;
}

.metric,
.post-card,
.signal-panel,
.profile-card,
.info-card,
.contest-card,
.ctf-highlight,
.timeline-item,
.credential-list li,
.cve-list li,
.dense-list li,
.result-item,
.toc,
.empty-state,
.search-result {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.post-card,
.contest-card,
.ctf-highlight,
.credential-list li,
.cve-list li,
.result-item {
  position: relative;
  transition: opacity 220ms var(--ease-snap), transform 220ms var(--ease-snap), border-color 220ms var(--ease-snap), background 220ms var(--ease-snap), box-shadow 220ms var(--ease-snap);
}

.post-card:hover,
.contest-card:hover,
.ctf-highlight:hover,
.credential-list li:hover,
.cve-list li:hover,
.result-item:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--cyan) 55%, var(--line));
  background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18), 0 0 32px color-mix(in srgb, var(--cyan) 8%, transparent);
}

.post-list,
.featured-strip,
.info-grid,
.result-list,
.ctf-highlight-grid,
.contest-grid,
.timeline,
.credential-list,
.cve-list,
.dense-list,
.bounty-list,
.bounty-link-grid,
.bounty-grid {
  display: grid;
  gap: 12px;
}

.post-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.posts .section-shell {
  padding-top: 46px;
}

.post-archive-shell {
  display: grid;
  gap: 14px;
  max-width: 920px;
}

.post-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.posts .post-list {
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 920px;
}

.compact-list,
.featured-strip,
.result-list,
.contest-grid,
.timeline,
.credential-list,
.cve-list,
.dense-list,
.bounty-list {
  grid-template-columns: 1fr;
}

.post-card[hidden],
[data-ctf-row][hidden] {
  display: none;
}

.post-card.is-filtering-out,
[data-ctf-row].is-filtering-out {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
}

.post-card-link {
  display: flex;
  min-height: 238px;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.posts .post-card-link {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: auto;
  gap: 8px 24px;
  padding: 22px 24px;
}

.posts .post-date {
  grid-row: 1 / 4;
  padding-top: 4px;
}

.posts .post-card .tag-row {
  margin-top: 4px;
}

.post-card::after,
.contest-card::after,
.ctf-highlight::after,
.team-card::after,
.bounty-card::after,
.bounty-link-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 32%, color-mix(in srgb, var(--mustard) 12%, transparent));
  transition: opacity 220ms var(--ease-snap);
}

.post-card:hover::after,
.contest-card:hover::after,
.ctf-highlight:hover::after,
.team-card:hover::after,
.bounty-card:hover::after,
.bounty-link-card:hover::after {
  opacity: 1;
}

.post-card.is-compact .post-card-link {
  min-height: 154px;
}

.post-card h3 {
  margin: 0;
  font-size: 23px;
}

.post-card p,
.result-item small,
.timeline-item p,
.credential-list span,
.cve-list span,
.cve-list small,
.info-card p,
.ctf-highlight p,
.contest-team span,
.search-result small,
.empty-state p,
.bounty-card span {
  color: var(--muted);
}

.tag-row {
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
}

.tag {
  color: color-mix(in srgb, var(--ink) 82%, var(--cyan));
  background: var(--cyan-soft);
}

.signal-panel {
  padding: 22px;
}

.result-item {
  display: grid;
  gap: 4px;
  padding: 16px;
}

.result-item span {
  color: var(--rose);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 900;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metric {
  min-height: 92px;
  padding: 16px;
}

.metric strong {
  display: block;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
}

.metric span,
.metric small {
  display: block;
  color: var(--muted);
}

.metric span {
  margin-top: 10px;
  font-weight: 900;
}

.metric small {
  margin-top: 2px;
  font-size: 13px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  transition: border-color 180ms var(--ease-snap), box-shadow 180ms var(--ease-snap);
}

.posts .toolbar {
  max-width: 920px;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  backdrop-filter: blur(14px);
}

.toolbar span {
  color: var(--muted);
  font-weight: 900;
}

.toolbar-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.language-toggle {
  gap: 6px;
}

.toolbar input,
.search-shell input {
  min-height: 42px;
  width: min(330px, 100%);
  padding: 0 13px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 160ms var(--ease-snap), box-shadow 160ms var(--ease-snap), background 160ms var(--ease-snap);
}

.toolbar:focus-within,
.search-shell:focus-within {
  border-color: color-mix(in srgb, var(--cyan) 38%, var(--line));
}

.toolbar input:focus,
.search-shell input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--cyan) 68%, var(--line));
  box-shadow: 0 0 0 4px var(--cyan-soft);
}

.language-switch {
  display: inline-flex;
  gap: 6px;
}

.language-pill.is-active {
  color: var(--bg);
  border-color: var(--cyan);
  background: var(--cyan);
}

button.language-pill {
  cursor: pointer;
}

.language-pill.is-disabled {
  opacity: 0.45;
}

.ctf-page .page-hero {
  padding: 44px 0 8px;
}

.ctf-page .page-hero h1 {
  font-size: clamp(32px, 4vw, 46px);
}

.ctf-page .page-hero.motion-reveal,
.ctf-page .team-strip.motion-reveal,
.ctf-page #ctf-history.motion-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.ctf-page #ctf-history {
  padding-top: 28px;
}

.ctf-page #ctf-history > .section-head {
  display: none;
}

.ctf-page .metric {
  min-height: 74px;
  padding: 14px;
}

.ctf-page .metric strong {
  font-size: clamp(26px, 3vw, 36px);
}

.ctf-controls {
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}

.team-strip {
  padding-top: 28px;
  padding-bottom: 24px;
}

.ctf-page .section-shell {
  border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}

.ctf-timeline {
  display: grid;
  gap: 34px;
}

.ctf-year-group {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.ctf-year-group[hidden],
.ctf-month-group[hidden] {
  display: none;
}

.ctf-year-label {
  position: sticky;
  top: 94px;
  color: color-mix(in srgb, var(--ink) 82%, var(--cyan));
  font-family: var(--mono);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  line-height: 1;
}

.ctf-year-content {
  position: relative;
  display: grid;
  gap: 26px;
  padding-left: 24px;
}

.ctf-year-content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--cyan), color-mix(in srgb, var(--line) 70%, transparent));
}

.ctf-month-group {
  position: relative;
  display: grid;
  gap: 12px;
}

.ctf-month-group::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 9px;
  width: 9px;
  aspect-ratio: 1;
  border: 2px solid var(--cyan);
  border-radius: 999px;
  background: var(--bg);
  box-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 22%, transparent);
}

.ctf-month-label {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.team-card {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 110px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  overflow: hidden;
  transition: transform 200ms var(--ease-snap), border-color 200ms var(--ease-snap), background 200ms var(--ease-snap), box-shadow 200ms var(--ease-snap);
}

.team-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--cyan) 52%, var(--line));
  background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18), 0 0 32px color-mix(in srgb, var(--cyan) 8%, transparent);
}

.team-card img {
  width: 70px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  object-fit: cover;
  transition: transform 200ms var(--ease-snap), border-color 200ms var(--ease-snap);
}

.team-card:hover img {
  transform: scale(1.04);
  border-color: color-mix(in srgb, var(--cyan) 46%, var(--line));
}

.team-card h2 {
  margin: 0 0 4px;
  color: var(--cyan);
  font-size: 21px;
}

.team-card span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.team-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.contest-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
  gap: 16px;
  align-items: center;
  padding: 14px;
  overflow: hidden;
}

.contest-card::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cyan), color-mix(in srgb, var(--mustard) 28%, transparent));
  opacity: 0.58;
}

.contest-card.has-ctftime {
  cursor: pointer;
}

.contest-main {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-width: 0;
}

.contest-media {
  position: relative;
  width: 96px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  overflow: hidden;
}

.contest-media img {
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
  transition: transform 220ms var(--ease-snap), filter 220ms var(--ease-snap);
}

.contest-card:hover .contest-media img {
  transform: scale(1.06);
  filter: saturate(1.08);
}

.contest-media a {
  display: block;
  width: 100%;
  height: 100%;
}

.contest-media span {
  position: absolute;
  left: 7px;
  top: 7px;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--bg);
  background: var(--cyan);
  font-size: 11px;
  font-weight: 900;
}

.contest-body {
  min-width: 0;
}

.contest-body p,
.contest-body h3 {
  margin: 0;
}

.contest-body h3 {
  margin-top: 5px;
  font-size: clamp(22px, 3vw, 34px);
}

.contest-body h3 a {
  color: inherit;
}

.contest-team {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: baseline;
  margin-top: 10px;
}

.contest-team strong {
  color: color-mix(in srgb, var(--ink) 84%, var(--mustard));
  font-size: 18px;
}

.contest-scoreboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(84px, 1fr));
  gap: 10px;
}

.contest-scoreboard div {
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-strong);
  transition: border-color 200ms var(--ease-snap), background 200ms var(--ease-snap);
}

.contest-card:hover .contest-scoreboard div {
  border-color: color-mix(in srgb, var(--cyan) 36%, var(--line));
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--bg-strong));
}

.contest-scoreboard strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 32px;
  line-height: 1;
}

.contest-foot {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.mini-button {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--cyan) 44%, var(--line));
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--cyan-soft);
  font-size: 13px;
  font-weight: 900;
  transition: transform 160ms var(--ease-snap), border-color 160ms var(--ease-snap), background 160ms var(--ease-snap);
}

.mini-button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--cyan) 70%, var(--line));
  background: color-mix(in srgb, var(--cyan-soft) 72%, var(--surface));
}

.ctf-highlight-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ctf-highlight {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 116px;
  padding: 12px;
}

.ctf-highlight img {
  width: 88px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  padding: 8px;
  object-fit: contain;
  transition: transform 220ms var(--ease-snap), border-color 220ms var(--ease-snap);
}

.ctf-highlight:hover img {
  transform: scale(1.05);
  border-color: color-mix(in srgb, var(--cyan) 46%, var(--line));
}

.ctf-highlight h3 {
  margin: 4px 0 8px;
}

.about-hero {
  position: relative;
  overflow: hidden;
  min-height: 260px;
}

.about-hero h1 {
  font-size: clamp(36px, 5vw, 56px);
}

.about-hero::after {
  display: none;
}

.evidence-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding-top: 24px;
  padding-bottom: 54px;
}

.evidence-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 106px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  overflow: hidden;
  transition: transform 200ms var(--ease-snap), border-color 200ms var(--ease-snap), background 200ms var(--ease-snap), box-shadow 200ms var(--ease-snap);
}

.evidence-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--cyan) 54%, var(--line));
  background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18), 0 0 32px color-mix(in srgb, var(--cyan) 8%, transparent);
}

.evidence-card img,
.evidence-mark {
  width: 52px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  object-fit: contain;
}

.evidence-card img {
  padding: 7px;
}

.evidence-mark {
  display: grid;
  place-items: center;
  color: var(--bg);
  background: var(--cyan);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 900;
}

.evidence-card div > span {
  display: block;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.evidence-card strong,
.evidence-card p {
  display: block;
  margin: 0;
}

.evidence-card strong {
  margin-top: 2px;
  font-size: 17px;
}

.evidence-card p {
  color: var(--muted);
  font-size: 13px;
}

.about .profile-grid {
  align-items: stretch;
}

.about .section-shell {
  border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}

.about .section-head {
  margin-bottom: 28px;
}

.about .section-head h2 {
  letter-spacing: 0;
}

.profile-card {
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.22);
}

.profile-card img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
}

.profile-card > div {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.check-list,
.dense-list,
.bounty-list,
.credential-list,
.cve-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.check-list li {
  padding: 14px 16px;
  border-left: 4px solid var(--cyan);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  transition: transform 180ms var(--ease-snap), background 180ms var(--ease-snap), border-color 180ms var(--ease-snap);
}

.check-list li:hover {
  transform: translateX(4px);
  border-color: color-mix(in srgb, var(--mustard) 74%, var(--cyan));
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
}

.timeline-item {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
}

.timeline-item > span {
  font-size: 14px;
}

.timeline-item h3,
.info-card h3,
.bounty-grid h3,
.bounty-platform-block h3 {
  margin: 0 0 6px;
}

.timeline-item strong {
  display: block;
}

.bounty-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.bounty-link-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 26px;
}

.bounty-platform-block h3 {
  font-size: 20px;
}

.dense-list li,
.info-card {
  padding: 15px;
}

.info-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.info-links a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--cyan) 36%, var(--line));
  border-radius: 999px;
  color: var(--ink);
  background: var(--cyan-soft);
  font-size: 13px;
  font-weight: 900;
  transition: transform 160ms var(--ease-snap), border-color 160ms var(--ease-snap), background 160ms var(--ease-snap);
}

.info-links a:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--cyan) 64%, var(--line));
  background: color-mix(in srgb, var(--cyan-soft) 68%, var(--surface));
}

.credential-list li,
.cve-list li {
  overflow: hidden;
}

.credential-card,
.cve-card {
  display: block;
  min-height: 100%;
  padding: 15px;
  color: inherit;
}

.credential-card:hover,
.cve-card:hover {
  color: inherit;
}

.bounty-card,
.bounty-link-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  overflow: hidden;
  transition: transform 200ms var(--ease-snap), border-color 200ms var(--ease-snap), background 200ms var(--ease-snap), box-shadow 200ms var(--ease-snap);
}

.bounty-card:hover,
.bounty-link-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--cyan) 52%, var(--line));
  background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18), 0 0 32px color-mix(in srgb, var(--cyan) 8%, transparent);
}

.bounty-card > a,
.bounty-card-inner,
.bounty-link-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 13px;
}

.bounty-card-inner {
  width: 100%;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
}

.bounty-card img,
.bounty-link-card img {
  width: 48px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px;
  background: #fff;
  object-fit: contain;
  transition: transform 200ms var(--ease-snap), border-color 200ms var(--ease-snap);
}

.bounty-card:hover img,
.bounty-link-card:hover img {
  transform: scale(1.05);
  border-color: color-mix(in srgb, var(--cyan) 46%, var(--line));
}

.bounty-card span,
.bounty-link-card span {
  font-weight: 900;
}

.bounty-card.is-accent,
.bounty-card.is-accent > a,
.bounty-card.is-accent .bounty-card-inner {
  border-color: color-mix(in srgb, var(--rose) 45%, var(--line));
  background: var(--rose-soft);
}

.dense-list.accent li {
  border-color: color-mix(in srgb, var(--rose) 45%, var(--line));
  background: var(--rose-soft);
}

.credential-list strong,
.credential-list span,
.cve-list strong,
.cve-list span,
.cve-list small {
  display: block;
}

.cve-list a {
  color: inherit;
}

.cve-card strong {
  color: var(--cyan);
}

.translation-status {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.article-shell {
  padding: 62px 0 90px;
}

.article-head {
  max-width: 860px;
  margin-bottom: 40px;
}

.back-link {
  display: inline-flex;
  margin-bottom: 24px;
  color: var(--cyan);
  font-weight: 900;
}

.article-head h1 {
  margin: 0;
  font-size: clamp(42px, 7vw, 84px);
}

.article-head p {
  color: var(--muted);
  font-size: 20px;
}

.article-meta {
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(220px, 1fr);
  gap: 44px;
  align-items: start;
}

.prose {
  min-width: 0;
}

.prose h2,
.prose h3 {
  margin: 42px 0 14px;
}

.prose p,
.prose li {
  color: color-mix(in srgb, var(--ink) 84%, var(--muted));
  font-size: 18px;
}

.prose a {
  color: var(--cyan);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.prose pre {
  overflow-x: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #02040a;
  color: #f7fbff;
}

.prose code {
  font-family: var(--mono);
}

.prose :not(pre) > code {
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--mustard) 18%, transparent);
}

.toc {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 8px;
  padding: 18px;
}

.toc strong {
  margin-bottom: 6px;
}

.toc a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  border-left: 2px solid transparent;
  padding-left: 8px;
  transition: color 160ms var(--ease-snap), border-color 160ms var(--ease-snap), transform 160ms var(--ease-snap);
}

.toc a.is-active,
.toc a:hover {
  color: var(--cyan);
  border-left-color: var(--cyan);
  transform: translateX(2px);
}

.toc-level-3 {
  padding-left: 14px;
}

.site-footer {
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 20px clamp(18px, 4vw, 54px);
  border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}

.site-footer div:first-child {
  display: grid;
  gap: 3px;
}

.site-footer span,
.footer-links {
  color: var(--muted);
}

.footer-links {
  flex-wrap: wrap;
  gap: 16px;
  font-weight: 800;
}

.search-dialog,
.ctf-dialog,
.proof-dialog {
  width: min(760px, calc(100% - 28px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.42);
}

.ctf-dialog {
  width: min(920px, calc(100% - 28px));
}

.search-dialog[open],
.ctf-dialog[open],
.proof-dialog[open] {
  animation: dialogIn 220ms var(--ease-out) both;
}

.search-dialog.is-closing,
.ctf-dialog.is-closing,
.proof-dialog.is-closing {
  animation: dialogOut 170ms var(--ease-snap) both;
}

.search-dialog::backdrop,
.ctf-dialog::backdrop,
.proof-dialog::backdrop {
  background: rgba(2, 4, 10, 0.66);
  backdrop-filter: blur(4px);
  animation: backdropIn 180ms ease both;
}

.search-shell,
.ctf-dialog-shell,
.proof-shell {
  padding: 18px;
}

.proof-shell img {
  width: 100%;
  max-height: min(720px, 74vh);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  object-fit: contain;
  background: #fff;
}

.search-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.search-head small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.search-head button {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--surface-soft);
  transition: color 160ms var(--ease-snap), border-color 160ms var(--ease-snap), background 160ms var(--ease-snap), transform 160ms var(--ease-snap);
}

.search-head button:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--cyan) 48%, var(--line));
  background: var(--cyan-soft);
  transform: translateY(-1px);
}

.ctf-dialog-body {
  max-height: min(620px, 68vh);
  overflow-y: auto;
  padding-top: 4px;
}

.solved-prose h2:first-child,
.solved-prose h3:first-child,
.solved-prose p:first-child {
  margin-top: 0;
}

.solved-prose {
  display: grid;
  gap: 20px;
}

.solve-section {
  display: grid;
  gap: 14px;
}

.solve-section + .solve-section {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.solve-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.solve-section-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.1;
}

.solve-section-head span {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--cyan) 44%, var(--line));
  border-radius: 999px;
  color: var(--cyan);
  background: var(--cyan-soft);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
}

.solve-table {
  display: grid;
  gap: 8px;
}

.solve-table-head,
.solve-row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(138px, 0.62fr) minmax(112px, 0.42fr);
  gap: 10px;
  align-items: center;
}

.solve-table-head {
  padding: 0 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.solve-row {
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 55%),
    var(--bg-strong);
  transition: border-color 180ms var(--ease-snap), background 180ms var(--ease-snap), transform 180ms var(--ease-snap);
}

.solve-row:hover {
  border-color: color-mix(in srgb, var(--cyan) 42%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyan) 13%, transparent), transparent 55%),
    var(--surface-soft);
  transform: translateY(-1px);
}

.solve-row.is-contributed {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rose) 9%, transparent), transparent 56%),
    var(--bg-strong);
}

.solve-name {
  display: flex;
  min-width: 0;
  gap: 10px;
  align-items: center;
}

.solve-name strong {
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.solve-status-icon,
.solve-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.solve-status-icon {
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--cyan) 46%, var(--line));
  border-radius: 999px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
}

.solve-status-icon svg,
.solve-icon svg,
.solve-role svg {
  width: 16px;
  height: 16px;
}

.solve-icon-text {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.defcon-icon {
  --defcon: #64748b;
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  color: #fff;
  background: var(--defcon);
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 22%, transparent) inset;
  transform: rotate(45deg);
}

.defcon-icon > span {
  display: inline-grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
}

.defcon-icon svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
}

.defcon-icon .solve-icon-text {
  width: auto;
  height: auto;
  color: #fff;
  font-size: 8px;
  letter-spacing: -0.04em;
}

.defcon-icon-pwnable {
  --defcon: #ff3b49;
}

.defcon-icon-reverse,
.defcon-icon-orange {
  --defcon: #ff8a13;
}

.defcon-icon-web {
  --defcon: #1684ff;
}

.defcon-icon-crypto,
.defcon-icon-web3 {
  --defcon: #07934f;
}

.defcon-icon-misc,
.defcon-icon-misc-ai {
  --defcon: #00aeba;
}

.defcon-icon-koth {
  --defcon: #f6c400;
  color: #4b3300;
}

.defcon-category-icon {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.solve-category,
.solve-points,
.solve-role {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.solve-category {
  --cat: #64748b;
  border: 1px solid color-mix(in srgb, var(--cat) 54%, var(--line));
  color: color-mix(in srgb, var(--cat) 74%, var(--ink));
  background: color-mix(in srgb, var(--cat) 12%, var(--surface-soft));
}

.solve-points {
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--cyan) 36%, var(--line));
  color: color-mix(in srgb, var(--ink) 92%, var(--cyan));
  background: color-mix(in srgb, var(--surface-soft) 78%, var(--cyan-soft));
  font-family: var(--mono);
}

.solve-points .solve-icon {
  color: var(--cyan);
}

.solve-points.is-empty {
  color: var(--muted);
  background: var(--surface-soft);
}

.solve-role {
  min-height: 28px;
  padding: 6px 9px;
  color: #fff;
  background: #6b7280;
  font-size: 12px;
}

.solve-cat-web,
.solve-cat-web3 {
  --cat: #0177ed;
}

.solve-cat-reverse {
  --cat: #ff8e0d;
}

.solve-cat-pwnable {
  --cat: #ee3b46;
}

.solve-cat-crypto {
  --cat: #009647;
}

.solve-cat-misc,
.solve-cat-misc-ai {
  --cat: #00bab8;
}

.solve-cat-forensics {
  --cat: #16a34a;
}

.solve-cat-osint {
  --cat: #0f9f8f;
}

.solve-cat-ai {
  --cat: #8b5cf6;
}

.solve-cat-koth,
.solve-cat-orange {
  --cat: #f9ca0c;
}

.solve-cat-koth {
  color: #7a5200;
}

.solve-cat-orange {
  --cat: #ff8e0d;
}

.solve-cat-speedrun,
.solve-cat-warmup {
  --cat: #ca8a04;
}

.solve-cat-network {
  --cat: #0891b2;
}

.solve-cat-beginner {
  --cat: #64748b;
}

.solve-cat-hash-cracking {
  --cat: #dc2626;
}

.empty-state {
  padding: 18px;
}

.empty-state p {
  margin-bottom: 0;
}

.search-shell input {
  width: 100%;
}

.search-results {
  display: grid;
  gap: 8px;
  max-height: min(520px, 60vh);
  margin-top: 12px;
  overflow-y: auto;
}

.search-result {
  display: grid;
  gap: 2px;
  padding: 14px;
}

.search-result strong,
.post-card h3,
.contest-body h3,
.ctf-highlight h3,
.team-card h2,
.bounty-card span,
.bounty-link-card span {
  transition: color 180ms var(--ease-snap);
}

.search-result:hover strong,
.post-card:hover h3,
.contest-card:hover .contest-body h3,
.ctf-highlight:hover h3,
.team-card:hover h2,
.bounty-card:hover span,
.bounty-link-card:hover span {
  color: color-mix(in srgb, var(--ink) 82%, var(--cyan));
}

.search-empty {
  margin: 0;
  padding: 14px;
  color: var(--muted);
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "brand actions"
      "nav nav";
    justify-items: stretch;
    min-height: auto;
    padding: 10px 14px;
    gap: 8px 12px;
  }

  .brand {
    grid-area: brand;
  }

  .site-nav {
    grid-area: nav;
  }

  .header-actions {
    grid-area: actions;
  }

  .site-nav,
  .header-actions {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .header-actions {
    justify-content: flex-end;
  }

  .home-signal,
  .two-column,
  .profile-grid,
  .split-section,
  .article-layout,
  .bounty-grid,
  .bounty-link-grid,
  .evidence-strip,
  .team-grid,
  .metrics-grid,
  .post-list,
  .ctf-highlight-grid {
    grid-template-columns: 1fr;
  }

  .ctf-year-group {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ctf-year-label {
    position: static;
  }

  .contest-card {
    grid-template-columns: 1fr;
  }

  .contest-foot {
    grid-column: auto;
  }

  .toc {
    position: static;
  }

  .ctf-page .page-hero {
    padding: 30px 0 0;
  }

  .ctf-page .team-strip {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .ctf-page .team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    overflow-x: visible;
  }

  .ctf-page .team-card {
    grid-template-columns: 50px minmax(0, 1fr);
    min-height: 76px;
    gap: 10px;
    padding: 10px;
  }

  .ctf-page .team-card img {
    width: 50px;
  }

  .ctf-page .team-card h2 {
    font-size: clamp(18px, 3.8vw, 22px);
    line-height: 1.08;
  }

  .ctf-page .team-card span {
    font-size: 10px;
  }

  .ctf-page .team-card p {
    display: block;
    margin-top: 3px;
    font-size: 12px;
  }

  .ctf-page #ctf-history {
    padding-top: 16px;
  }

  .ctf-page .metrics-grid {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .ctf-page .metrics-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .ctf-page .metric {
    flex: 0 0 136px;
    display: grid;
    align-content: center;
    gap: 2px;
    min-height: 76px;
    padding: 10px;
    scroll-snap-align: start;
  }

  .ctf-page .metric strong {
    font-size: clamp(22px, 3.8vw, 28px);
  }

  .ctf-page .metric span,
  .ctf-page .metric small {
    margin-top: 0;
    font-size: 11px;
    line-height: 1.2;
  }

  .ctf-controls {
    flex-wrap: nowrap;
    margin: 14px 0 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .ctf-page .ctf-controls::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .ctf-controls .chip {
    flex: 0 0 auto;
  }
}

@media (max-width: 640px) {
  .hero-inner,
  .page-hero,
  .section-shell,
  .article-shell {
    width: min(100% - 28px, 1120px);
  }

  .hero {
    min-height: 560px;
  }

  .hero-avatar {
    width: clamp(210px, 68vw, 300px);
  }

  .hero h1,
  .page-hero h1 {
    font-size: clamp(44px, 16vw, 68px);
  }

  .home .hero h1 {
    font-size: clamp(32px, 10vw, 46px);
  }

  .posts .page-hero h1 {
    font-size: clamp(32px, 10vw, 44px);
  }

  .about-hero h1 {
    font-size: clamp(34px, 12vw, 48px);
  }

  .ctf-page .page-hero h1 {
    font-size: clamp(30px, 9vw, 40px);
  }

  .section-shell {
    padding: 54px 0;
  }

  .ctf-page .page-hero {
    padding: 24px 0 0;
  }

  .ctf-page .team-strip {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .ctf-page .team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    overflow-x: visible;
  }

  .ctf-page .team-card {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 74px;
    gap: 9px;
    padding: 9px;
  }

  .ctf-page .team-card img {
    width: 48px;
  }

  .ctf-page .team-card h2 {
    font-size: clamp(17px, 5.3vw, 21px);
    line-height: 1.05;
  }

  .ctf-page .team-card span {
    font-size: 10px;
  }

  .ctf-page .team-card p {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.25;
  }

  .ctf-page #ctf-history {
    padding-top: 16px;
    padding-bottom: 42px;
  }

  .ctf-page .metrics-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .ctf-page .metrics-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .ctf-page .metric {
    flex: 0 0 136px;
    display: grid;
    align-content: center;
    gap: 2px;
    min-height: 76px;
    padding: 10px;
    scroll-snap-align: start;
  }

  .ctf-page .metric strong {
    font-size: clamp(22px, 6vw, 26px);
  }

  .ctf-page .metric span {
    margin-top: 0;
    font-size: 11px;
    line-height: 1.2;
  }

  .ctf-page .metric small {
    margin-top: 0;
    font-size: 11px;
    line-height: 1.2;
  }

  .ctf-controls {
    flex-wrap: nowrap;
    margin: 14px 0 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .ctf-page .ctf-controls::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .ctf-controls .chip {
    flex: 0 0 auto;
  }

  .ctf-timeline {
    gap: 24px;
  }

  .toolbar,
  .site-footer {
    display: grid;
    align-items: stretch;
  }

  .site-footer {
    gap: 10px;
    padding: 18px;
  }

  .footer-links {
    gap: 14px;
  }

  .posts .post-card-link {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .posts .post-date {
    grid-row: auto;
  }

  .toolbar-actions {
    justify-content: flex-start;
  }

  .toolbar input {
    width: 100%;
  }

  .contest-main {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .contest-media {
    width: 72px;
  }

  .contest-scoreboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solve-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .solve-table-head {
    display: none;
  }

  .solve-row {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .solve-category,
  .solve-points {
    justify-self: start;
  }

  .timeline-item {
    grid-template-columns: 1fr;
  }

  .ctf-highlight {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .ctf-highlight img {
    width: 70px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  body {
    animation: none !important;
  }

  body::before {
    display: none;
  }

  body::after {
    display: none;
  }

  .motion-ready .motion-reveal {
    opacity: 1;
    transform: none;
  }
}