:root {
  --ink: #111315;
  --muted: #5b626b;
  --line: #d8dde3;
  --paper: #fbfaf7;
  --panel: #ffffff;
  --accent: #0f766e;
  --accent-dark: #0a4f49;
  --warm: #f2b84b;
  --rose: #d95f59;
  --shadow: 0 20px 50px rgba(17, 19, 21, 0.10);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html.scroll-locked,
body.scroll-locked {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 20%, rgba(242, 184, 75, 0.16), transparent 28rem),
    linear-gradient(180deg, #fbfaf7 0%, #f3f6f5 48%, #fbfaf7 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

body.home-page {
  --ink: #ffffff;
  --muted: #78716c;
  --line: rgba(255, 255, 255, 0.16);
  --panel: rgba(6, 5, 10, 0.74);
  --accent: #d43d17;
  --accent-dark: #d43d17;
  --warm: #e5d011;
  --rose: #f87171;
  --shadow: 0 26px 52px rgba(15, 12, 10, 0.35), 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  background: #06050a;
  color: var(--ink);
  min-height: 100svh;
  overflow-x: hidden;
  overflow-x: clip;
}

body.home-page.scroll-locked {
  position: fixed;
  inset: 0;
  width: 100%;
}

body.home-page::before {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 50% 15%, rgba(120, 113, 108, 0.2), transparent 22rem),
    radial-gradient(circle at 14% 48%, rgba(212, 61, 23, 0.2), transparent 20rem),
    linear-gradient(180deg, rgba(6, 5, 10, 0.12), rgba(6, 5, 10, 0.76));
}

.home-page main,
.home-page .site-footer {
  position: relative;
  z-index: 2;
}

.home-page .site-header {
  z-index: 10;
}

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

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

.glass-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1rem 0;
  background: rgba(251, 250, 247, 0.88);
  backdrop-filter: blur(18px);
}

.brand,
nav,
.actions,
.contact-band,
.cv-contact {
  display: flex;
  align-items: center;
}

.brand {
  gap: 0.6rem;
  font-weight: 800;
}

nav {
  gap: 0.35rem;
}

nav a {
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 650;
  padding: 0.55rem 0.7rem;
}

nav a:hover {
  background: rgba(15, 118, 110, 0.08);
  color: var(--ink);
}

.home-page .site-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(6, 5, 10, 0.72);
}

.home-page nav a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.section {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 5rem 0;
}

.portal-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(340px, 1fr);
  gap: 64px;
  align-items: center;
  min-height: calc(100svh - 74px);
  padding-top: 64px;
  padding-bottom: 64px;
}

.portal-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.portal-copy h1 {
  max-width: 8ch;
  margin-bottom: 24px;
  color: #ffffff;
  font-size: 6rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.92;
}

.portal-lead {
  max-width: 45ch;
  margin-bottom: 0;
  color: #78716c;
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.025em;
  line-height: 1.65;
}

.portal-actions,
.axiom-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.engage-button {
  display: block;
  width: 264px;
  height: 78px;
  border-radius: 24px;
  padding: 7px;
  background: linear-gradient(180deg, #3c3f46 0%, #15171b 55%, #2a2d33 100%);
  box-shadow: var(--shadow), inset 0 -2px 8px rgba(0, 0, 0, 0.9);
  transition: transform 300ms cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 300ms ease;
}

.engage-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 62px rgba(15, 12, 10, 0.46), 0 5px 18px rgba(212, 61, 23, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.engage-button:active {
  transform: translateY(1px) scale(0.985);
}

.engage-button:focus-visible,
.axiom-button:focus-visible,
.northgrid-button:focus-visible {
  outline: 2px solid #d43d17;
  outline-offset: 5px;
}

.engage-button-surface {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(229, 208, 17, 0.92), rgba(212, 61, 23, 0.94)),
    #d43d17;
  color: #292524;
  padding: 0 24px;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
}

.engage-button-surface span:last-child {
  color: rgba(41, 37, 36, 0.62);
  font-size: 0.82rem;
}

.portal-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  width: min(100%, 450px);
  margin: 32px 0 0;
}

.portal-status div {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 17px;
  background: rgba(6, 5, 10, 0.68);
  padding: 16px;
  box-shadow: var(--shadow);
}

.portal-status dt {
  color: #d43d17;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}

.portal-status dd {
  margin-top: 7px;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 500;
}

.portal-visual {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: #06050a;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.portal-field,
.axiom-field,
.northgrid-field,
.smoke-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.portal-fallback {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(120, 113, 108, 0.38) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.38;
}

.portal-readout {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.portal-readout div {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  background: rgba(6, 5, 10, 0.7);
  padding: 14px;
  backdrop-filter: blur(12px);
}

.portal-readout span {
  color: #d43d17;
  font-size: 0.74rem;
  font-weight: 700;
}

.portal-readout p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
}

.axiom-presence,
.northgrid-page {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.axiom-presence {
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 50% 10%, rgba(79, 70, 229, 0.2), transparent 28rem),
    #050505;
  color: #ffffff;
}

.axiom-grid-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.12;
  transform: perspective(520px) rotateX(63deg) translateY(160px);
  transform-origin: bottom center;
}

.axiom-field,
.northgrid-field {
  z-index: 0;
}

.axiom-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 96px 32px;
}

.axiom-card {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.78fr);
  gap: 48px;
  width: min(1180px, 100%);
  min-height: 620px;
  margin: 0 auto;
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(rgba(15, 23, 42, 0.48), rgba(15, 23, 42, 0.26)) padding-box,
    linear-gradient(to right bottom, rgba(79, 70, 229, 0.6), rgba(255, 255, 255, 0.2), rgba(79, 70, 229, 0.1)) border-box;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3), 0 100px 80px rgba(0, 0, 0, 0.12);
  padding: 48px;
  backdrop-filter: blur(12px);
}

.axiom-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.axiom-kicker,
.northgrid-kicker {
  margin-bottom: 0;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.axiom-kicker {
  color: rgba(255, 255, 255, 0.72);
}

.axiom-copy h2 {
  max-width: 8ch;
  margin-bottom: 16px;
  font-family: "Bebas Neue", Impact, Haettenschweiler, "Arial Narrow", sans-serif;
  font-size: 5.5rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.9;
}

.axiom-copy p {
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.92rem;
  line-height: 1.65;
}

.axiom-button,
.northgrid-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  font-weight: 700;
  transition: color 300ms ease, background 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.axiom-button {
  min-height: 48px;
  background: #4f46e5;
  color: #ffffff;
  padding: 0 24px;
}

.axiom-button:hover {
  background: #ffffff;
  color: #0f172a;
}

.axiom-text-link {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  font-weight: 700;
}

.axiom-text-link:hover {
  color: #ffffff;
}

.axiom-stack {
  display: grid;
  gap: 8px;
}

.axiom-stack div {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(248, 249, 250, 0.08);
  padding: 32px;
}

.axiom-stack span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 24px;
  border-radius: 9999px;
  background: rgba(79, 70, 229, 0.3);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
}

.axiom-stack h3 {
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 1.15rem;
}

.axiom-stack p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.82rem;
  line-height: 1.55;
}

.northgrid-page {
  display: grid;
  place-items: center;
  padding: 40px;
  background:
    radial-gradient(circle at 76% 12%, rgba(248, 113, 113, 0.22), transparent 20rem),
    radial-gradient(circle at 18% 80%, rgba(251, 191, 36, 0.18), transparent 18rem),
    #fafafa;
  color: #ffffff;
}

.northgrid-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  border-radius: 24.8px;
  padding: 1px;
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 32px 112px rgba(84, 62, 170, 0.16), 0 12.8px 32px rgba(222, 232, 255, 0.45);
}

.northgrid-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  background: rgba(23, 20, 39, 0.92);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(24px);
}

.northgrid-card::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(180deg, transparent, rgba(16, 16, 16, 0.9), transparent),
    radial-gradient(circle at 58% 20%, rgba(139, 92, 246, 0.2), transparent 22rem);
}

.northgrid-topline,
.northgrid-dashboard {
  position: relative;
  z-index: 1;
}

.northgrid-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding: 16px;
}

.northgrid-topline p {
  margin-bottom: 0;
  color: #e4e4e7;
  font-size: 0.88rem;
  font-weight: 650;
}

.northgrid-button {
  min-height: 44px;
  background: #fafafa;
  color: #020617;
  padding: 0 16px;
  font-size: 0.88rem;
}

.northgrid-button:hover {
  box-shadow: 0 12px 26px rgba(250, 250, 250, 0.18);
  transform: translateY(-1px);
}

.northgrid-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
  gap: 16px;
  padding: 40px;
}

.northgrid-copy {
  display: flex;
  min-height: 460px;
  flex-direction: column;
  justify-content: end;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.04);
  padding: 40px;
}

.northgrid-kicker {
  color: #fbbf24;
}

.northgrid-copy h2 {
  max-width: 9ch;
  margin: 16px 0;
  color: #ffffff;
  font-size: 4.75rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

.northgrid-copy p {
  max-width: 44ch;
  margin-bottom: 0;
  color: #e4e4e7;
  font-size: 1.125rem;
  line-height: 1.55;
}

.northgrid-metrics,
.northgrid-panels {
  display: grid;
  gap: 8px;
}

.northgrid-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column: 1 / -1;
}

.northgrid-metrics article,
.northgrid-panels article {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  padding: 16px;
}

.northgrid-metrics span {
  color: #e4e4e7;
  font-size: 0.78rem;
  font-weight: 650;
}

.northgrid-metrics strong {
  display: block;
  margin: 8px 0 4px;
  color: #ffffff;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}

.northgrid-metrics p,
.northgrid-panels p {
  margin-bottom: 0;
  color: #e4e4e7;
  font-size: 0.86rem;
  line-height: 1.45;
}

.northgrid-chart {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  min-height: 460px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    rgba(255, 255, 255, 0.04);
  background-size: 100% 25%;
  padding: 20px;
}

.northgrid-chart span {
  display: block;
  height: var(--bar);
  min-height: 30px;
  border-radius: 9999px 9999px 8px 8px;
  background: linear-gradient(180deg, #f87171, #fbbf24);
  box-shadow: 0 14px 24px rgba(248, 113, 113, 0.18);
}

.northgrid-panels {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column: 1 / -1;
}

.northgrid-panels h3 {
  margin-bottom: 8px;
  color: #ffffff;
}

.smoke-projects {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #080808;
  color: #ffffff;
  padding: 64px 32px;
}

.smoke-field {
  z-index: 0;
  background: #080808;
}

.smoke-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 18%, rgba(212, 61, 23, 0.18), transparent 24rem),
    radial-gradient(circle at 76% 76%, rgba(79, 70, 229, 0.2), transparent 28rem),
    linear-gradient(180deg, rgba(8, 8, 8, 0.1), rgba(8, 8, 8, 0.72));
}

.smoke-shell {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background: rgba(8, 8, 8, 0.48);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 40px;
  backdrop-filter: blur(18px);
}

.smoke-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(280px, 0.6fr);
  gap: 32px;
  align-items: end;
  margin-bottom: 32px;
}

.smoke-kicker {
  grid-column: 1 / -1;
  margin-bottom: 0;
  color: #d43d17;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.smoke-heading h2 {
  max-width: 9ch;
  margin-bottom: 0;
  color: #ffffff;
  font-size: clamp(3.2rem, 8vw, 6.8rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 0.9;
}

.smoke-heading p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.7;
}

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

.smoke-project-grid article {
  display: flex;
  min-height: 240px;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.055);
  padding: 24px;
  transition: border-color 300ms ease, background 300ms ease, transform 300ms ease;
}

.smoke-project-grid article:hover {
  border-color: rgba(212, 61, 23, 0.48);
  background: rgba(212, 61, 23, 0.12);
  transform: translateY(-2px);
}

.smoke-project-grid span {
  margin-bottom: auto;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.78rem;
  font-weight: 800;
}

.smoke-project-grid h3 {
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 1.25rem;
}

.smoke-project-grid p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
}

.smoke-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 32px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.9);
  color: #080808;
  padding: 0 22px;
  font-weight: 800;
  transition: background 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}

.smoke-button:hover {
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(212, 61, 23, 0.18);
  transform: translateY(-1px);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.62fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  min-height: calc(100svh - 74px);
  padding-top: 3rem;
}

.flow-art {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  position: relative;
  margin: 0;
  overflow: visible;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: #06050a;
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.flow-panel {
  position: relative;
  display: block;
  min-height: auto;
  overflow: visible;
  padding: 0;
}

.flow-panel.is-expanded {
  grid-column: 1 / -1;
  min-height: auto;
  padding: 0;
}

.flow-summary {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 210px;
  align-content: space-between;
  gap: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 34%),
    rgba(255, 255, 255, 0.055);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
  color: #ffffff;
  cursor: pointer;
  padding: 1rem;
  text-align: left;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.flow-summary:hover,
.flow-summary:focus-visible {
  border-color: rgba(244, 191, 69, 0.48);
  background-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.flow-summary span {
  color: #f4bf45;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.flow-summary strong {
  display: block;
  max-width: none;
  color: #ffffff;
  font-size: clamp(1.05rem, 1.65vw, 1.55rem);
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.flow-summary small {
  max-width: none;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.86rem;
  line-height: 1.4;
}

.flow-summary em {
  width: max-content;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  padding: 0.42rem 0.58rem;
  text-transform: uppercase;
}

.flow-panel.is-expanded .flow-summary {
  display: none;
}

.flow-close {
  align-self: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  color: currentColor;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
  padding: 0.5rem 0.72rem;
  text-transform: uppercase;
}

.flow-close:hover,
.flow-close:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

.flow-paper .flow-summary {
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.34), transparent 14rem),
    linear-gradient(135deg, rgba(245, 240, 232, 0.92), rgba(139, 131, 120, 0.78));
  color: #080808;
}

.flow-paper .flow-summary strong,
.flow-paper .flow-summary small,
.flow-paper .flow-summary em {
  color: #080808;
}

#story-crypto .flow-summary,
#story-games .flow-summary {
  background:
    radial-gradient(circle at 82% 12%, rgba(95, 129, 255, 0.28), transparent 16rem),
    linear-gradient(135deg, rgba(26, 61, 232, 0.82), rgba(3, 6, 20, 0.96));
}

#story-content .flow-summary {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.12), transparent 14rem),
    linear-gradient(135deg, rgba(37, 37, 37, 0.98), rgba(2, 2, 2, 0.96));
}

.flow-paper .flow-inner {
  border-color: rgba(245, 240, 232, 0.68);
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.72), transparent 24rem),
    linear-gradient(135deg, #f5f0e8 0%, #d8d1c4 62%, #8b8378 100%);
  color: #080808;
}

#story-crypto .flow-inner {
  border-color: rgba(92, 124, 255, 0.78);
  background:
    radial-gradient(circle at 82% 12%, rgba(95, 129, 255, 0.55), transparent 26rem),
    linear-gradient(135deg, #1a3de8 0%, #071c74 60%, #030614 100%);
  color: #ffffff;
}

#story-content .flow-inner {
  border-color: rgba(236, 72, 153, 0.54);
  background:
    radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.32), transparent 28rem),
    linear-gradient(135deg, #42123b 0%, #22112f 54%, #07040d 100%);
  color: #ffffff;
}

#story-games .flow-inner {
  border-color: rgba(251, 113, 133, 0.5);
  background:
    radial-gradient(circle at 82% 72%, rgba(251, 113, 133, 0.32), transparent 24rem),
    linear-gradient(135deg, #5c1824 0%, #280912 58%, #080205 100%);
  color: #ffffff;
}

.flow-agentic .flow-summary {
  background: radial-gradient(circle at 80% 15%, rgba(94, 236, 169, 0.35), transparent 15rem), linear-gradient(135deg, #124c3b, #061712 88%);
}

.flow-agentic .flow-inner {
  border-color: rgba(116, 218, 164, 0.66);
  background: radial-gradient(circle at 80% 10%, rgba(116, 218, 164, 0.32), transparent 25rem), linear-gradient(135deg, #13553d, #092a24 60%, #04110e);
  color: #ffffff;
}

.flow-security .flow-summary {
  background: radial-gradient(circle at 78% 15%, rgba(236, 164, 204, 0.32), transparent 15rem), linear-gradient(135deg, #4a1f43, #150c1e 88%);
}

.flow-security .flow-inner {
  border-color: rgba(236, 164, 204, 0.66);
  background: radial-gradient(circle at 78% 15%, rgba(236, 164, 204, 0.3), transparent 25rem), linear-gradient(135deg, #4e234a, #22162d 60%, #0e0a16);
  color: #ffffff;
}

.flow-panel:last-child,
.flow-panel.is-expanded:last-child {
  min-height: auto;
}

.flow-inner {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  min-height: auto;
  overflow: hidden;
  border: 2px solid rgba(108, 108, 108, 0.82);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 3.2vw, 3rem);
  transform-origin: center top;
}

.flow-panel.is-expanded .flow-inner {
  display: flex;
}

.flow-inner::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.12), transparent 22rem);
  opacity: 0.78;
}

.flow-inner > * {
  position: relative;
  z-index: 1;
}

.flow-kicker {
  margin-bottom: 0;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.flow-rule {
  border-top: 1px solid currentColor;
  opacity: 0.58;
}

.flow-title {
  max-width: 15ch;
  margin-bottom: 0;
  font-size: clamp(3rem, 7.2vw, 6rem);
  font-weight: 950;
  line-height: 0.86;
  text-transform: uppercase;
}

.flow-copy {
  max-width: 62ch;
  margin-bottom: 0;
  color: currentColor;
  font-size: 1.18rem;
  line-height: 1.35;
}

.flow-principle {
  max-width: 18ch;
  margin: clamp(2rem, 5vw, 4rem) 0 0;
  color: currentColor;
  font-size: clamp(2.2rem, 5.2vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-wrap: balance;
}

.flow-principle-detail {
  max-width: 42ch;
  margin: 1rem 0 0;
  color: currentColor;
  font-size: 1rem;
  line-height: 1.4;
  opacity: 0.68;
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.2rem);
}

.flow-grid-dense {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.7rem, 1.8vw, 1.1rem);
}

.flow-grid > div {
  border-top: 1px solid currentColor;
  padding-top: 0.8rem;
}

.flow-grid h3 {
  margin-bottom: 0.45rem;
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
}

.flow-grid-dense h3 {
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
}

.flow-grid p {
  margin-bottom: 0;
  color: currentColor;
  opacity: 0.75;
}

.flow-grid-dense p {
  font-size: 0.86rem;
  line-height: 1.35;
}

.flow-grid a {
  color: currentColor;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.eyebrow {
  margin: 0 0 0.9rem;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 13ch;
  margin-bottom: 1.2rem;
  font-size: clamp(3.1rem, 9vw, 7.4rem);
  letter-spacing: 0;
  line-height: 0.9;
}

h2 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 3.6rem);
  letter-spacing: 0;
  line-height: 1;
}

h3 {
  margin-bottom: 0.45rem;
  font-size: 1.15rem;
  letter-spacing: 0;
}

.lead {
  max-width: 62ch;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.actions {
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.8rem;
}

.button,
button {
  border: 1px solid var(--ink);
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.8rem 1.05rem;
  font: inherit;
  font-weight: 800;
}

.button.primary,
button {
  background: var(--ink);
  color: white;
}

.button.secondary {
  background: transparent;
}

.home-page .button.primary {
  border-color: white;
  background: white;
  color: #050505;
}

.home-page .button.secondary {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.home-page .button.secondary:hover {
  background: rgba(255, 255, 255, 0.11);
}

.home-page .button,
.home-page button,
.engage-button,
.axiom-button,
.northgrid-button,
.smoke-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.24);
  transition:
    border-color 700ms cubic-bezier(0.175, 0.885, 0.32, 2.2),
    border-radius 700ms cubic-bezier(0.175, 0.885, 0.32, 2.2),
    box-shadow 700ms cubic-bezier(0.175, 0.885, 0.32, 2.2),
    color 700ms cubic-bezier(0.175, 0.885, 0.32, 2.2),
    padding 700ms cubic-bezier(0.175, 0.885, 0.32, 2.2),
    transform 700ms cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.home-page .button::before,
.home-page button::before,
.engage-button::before,
.axiom-button::before,
.northgrid-button::before,
.smoke-button::before,
.home-page .button::after,
.home-page button::after,
.engage-button::after,
.axiom-button::after,
.northgrid-button::after,
.smoke-button::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
}

.home-page .button::before,
.home-page button::before,
.engage-button::before,
.axiom-button::before,
.northgrid-button::before,
.smoke-button::before {
  z-index: -2;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px) saturate(1.3);
  filter: url("#glass-distortion");
}

.home-page .button::after,
.home-page button::after,
.engage-button::after,
.axiom-button::after,
.northgrid-button::after,
.smoke-button::after {
  z-index: -1;
  background:
    radial-gradient(circle at 24% 12%, rgba(255, 255, 255, 0.52), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0.18));
  box-shadow:
    inset 2px 2px 1px rgba(255, 255, 255, 0.5),
    inset -1px -1px 1px rgba(255, 255, 255, 0.45);
}

.home-page .button > *,
.home-page button > *,
.engage-button > *,
.axiom-button > *,
.northgrid-button > *,
.smoke-button > * {
  position: relative;
  z-index: 1;
}

.home-page .button:hover,
.home-page button:hover,
.engage-button:hover,
.axiom-button:hover,
.northgrid-button:hover,
.smoke-button:hover {
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.24), 0 0 30px rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.home-page .button:active,
.home-page button:active,
.engage-button:active,
.axiom-button:active,
.northgrid-button:active,
.smoke-button:active {
  transform: translateY(1px) scale(0.985);
}

.engage-button {
  background: rgba(255, 255, 255, 0.12);
}

.engage-button-surface {
  position: relative;
  z-index: 1;
  background: transparent;
  color: #ffffff;
}

.engage-button-surface span:last-child {
  color: rgba(255, 255, 255, 0.64);
}

.axiom-button,
.northgrid-button,
.smoke-button {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.axiom-button:hover,
.northgrid-button:hover,
.smoke-button:hover {
  color: #ffffff;
}

.home-page .button:focus-visible,
.home-page button:focus-visible,
.engage-button:focus-visible,
.axiom-button:focus-visible,
.northgrid-button:focus-visible,
.smoke-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.86);
  outline-offset: 5px;
}

.portal-start {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  background: #06050a;
  padding-top: 64px;
  padding-bottom: 64px;
}

.portal-start::before {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
  opacity: 0.38;
}

.portal-start::after {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  content: "";
  background:
    repeating-linear-gradient(
      118deg,
      transparent 0,
      transparent 42px,
      rgba(255, 255, 255, 0.05) 43px,
      transparent 45px
    );
  opacity: 0.2;
  transform: translate3d(0, 0, 0);
  animation: portalScan 14s linear infinite;
}

.portal-orbit-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  pointer-events: none;
}

.portal-nav {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}

.portal-nav .theme-picker {
  max-width: 7rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
  padding: 0.42rem 0.65rem;
  transition: background 180ms ease, border-color 180ms ease;
}

.portal-nav .theme-picker:hover,
.portal-nav .theme-picker:focus-visible {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.13);
}

.theme-menu {
  position: relative;
}

.theme-options {
  position: absolute;
  top: 100%;
  left: 0;
  display: grid;
  gap: 5px;
  min-width: 155px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: #15131a;
  color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.theme-options[hidden] {
  display: none;
}

.theme-options button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.theme-options button:is(:hover, [aria-pressed="true"]) {
  border-color: currentColor;
  background: rgba(150, 150, 150, 0.15);
}

.theme-options button:focus-visible,
.theme-picker:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.theme-options button span {
  font-size: 1.2rem;
}

.home-page[data-theme="grove"] .theme-options {
  background: #122c22;
}

.portal-nav a {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.55rem 0.7rem;
}

.portal-nav a::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: translateX(-125%);
}

.portal-nav a:hover {
  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;
}

.portal-nav a:hover::after {
  transform: translateX(125%);
  transition: transform 620ms ease;
}

.portal-enter {
  opacity: 1;
  z-index: 1;
}

.text-flip {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(820px, calc(100vw - 32px));
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.65rem, 9vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  isolation: isolate;
  padding: 0.12em 0.18em;
  transform-origin: center;
}

.text-flip::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--title-glow, transparent), transparent 70%);
  filter: blur(20px);
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 350ms ease, transform 550ms ease;
}

.text-flip[data-title-theme]::before {
  opacity: 1;
  transform: scale(1);
}

.home-page .text-flip .text-flip-trigger,
.home-page .text-flip .text-flip-trigger:hover,
.home-page .text-flip .text-flip-trigger:active {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--title-face, #fff);
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  padding: 0;
  text-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
  touch-action: auto;
  transform: perspective(900px) rotateX(var(--title-x, 0deg)) rotateY(var(--title-y, 0deg)) rotateZ(var(--title-z, 0deg));
  transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), color 300ms ease, text-shadow 300ms ease;
  -webkit-tap-highlight-color: transparent;
}

.home-page .text-flip .text-flip-trigger::before,
.home-page .text-flip .text-flip-trigger::after {
  display: none;
}

.home-page .text-flip .text-flip-trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 10px;
}

.home-page .text-flip[data-title-theme] .text-flip-trigger {
  text-shadow:
    1px 1px var(--title-edge),
    2px 2px var(--title-edge),
    3px 3px var(--title-edge),
    4px 4px var(--title-edge),
    5px 5px var(--title-edge),
    7px 9px 2px rgba(0, 0, 0, 0.28),
    12px 18px 30px var(--title-glow);
}

.home-page .text-flip[data-title-theme] .text-flip-trigger span {
  color: inherit;
}

.home-page .text-flip[data-title-theme="signal"] {
  --title-face: #ffd082;
  --title-edge: #9e351e;
  --title-glow: rgba(255, 99, 55, 0.48);
  --title-x: 8deg;
  --title-y: -8deg;
  --title-z: -3deg;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
}

.home-page .text-flip[data-title-theme="paper"] {
  --title-face: #ffe6c3;
  --title-edge: #80526b;
  --title-glow: rgba(219, 149, 187, 0.42);
  --title-x: -6deg;
  --title-y: 7deg;
  --title-z: 2deg;
  font-family: "DM Serif Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.06em;
}

.home-page .text-flip[data-title-theme="grove"] {
  --title-face: #bcffe0;
  --title-edge: #176e72;
  --title-glow: rgba(53, 222, 169, 0.45);
  --title-x: 7deg;
  --title-y: 7deg;
  --title-z: -2deg;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: clamp(2rem, 7vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.08em;
}

.home-page .text-flip[data-title-theme="arcade"] {
  --title-face: #f7bcff;
  --title-edge: #6135a2;
  --title-glow: rgba(180, 91, 255, 0.48);
  --title-x: -8deg;
  --title-y: -7deg;
  --title-z: 3deg;
  font-family: Bungee, Impact, sans-serif;
  font-size: clamp(1.85rem, 6.8vw, 5.4rem);
  font-weight: 400;
  letter-spacing: -0.075em;
}

.home-page .text-flip[data-title-theme="lava"] {
  --title-face: #ff9839;
  --title-edge: #721c0a;
  --title-glow: rgba(255, 70, 10, 0.68);
  --title-x: 10deg;
  --title-y: -6deg;
  --title-z: -2deg;
  font-family: Bungee, Impact, sans-serif;
  font-size: clamp(1.85rem, 6.8vw, 5.4rem);
  font-weight: 400;
  letter-spacing: -0.075em;
}

.home-page .text-flip[data-title-theme="ice"] {
  --title-face: #d6faff;
  --title-edge: #246888;
  --title-glow: rgba(74, 203, 255, 0.64);
  --title-x: -8deg;
  --title-y: 8deg;
  --title-z: 2deg;
  font-family: Orbitron, ui-sans-serif, sans-serif;
  font-size: clamp(1.7rem, 6.1vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.085em;
}

.home-page .text-flip[data-title-theme="chrome"] {
  --title-face: #e6f0f8;
  --title-edge: #3b465b;
  --title-glow: rgba(142, 186, 226, 0.5);
  --title-x: 9deg;
  --title-y: 5deg;
  --title-z: -3deg;
  font-family: Orbitron, ui-sans-serif, sans-serif;
  font-size: clamp(1.7rem, 6.1vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.085em;
}

.home-page .text-flip[data-title-theme="neon"] {
  --title-face: #a9fff4;
  --title-edge: #11687b;
  --title-glow: rgba(46, 241, 218, 0.7);
  --title-x: -5deg;
  --title-y: -10deg;
  --title-z: 2deg;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: clamp(2rem, 7vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.08em;
}

.home-page .text-flip[data-title-theme="gold"] {
  --title-face: #ffe0a1;
  --title-edge: #76501c;
  --title-glow: rgba(255, 194, 80, 0.55);
  --title-x: 6deg;
  --title-y: -8deg;
  --title-z: -2deg;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.75rem, 6.4vw, 5.2rem);
  font-weight: 900;
  letter-spacing: -0.07em;
}

.home-page .text-flip[data-title-theme="hologram"] {
  --title-face: #d5c4ff;
  --title-edge: #6a46a6;
  --title-glow: rgba(179, 125, 255, 0.55);
  --title-x: -9deg;
  --title-y: 7deg;
  --title-z: 3deg;
  font-family: Orbitron, ui-sans-serif, sans-serif;
  font-size: clamp(1.7rem, 6.1vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.085em;
}

.home-page .text-flip[data-title-theme="candy"] {
  --title-face: #ffd5eb;
  --title-edge: #a32869;
  --title-glow: rgba(255, 92, 173, 0.56);
  --title-x: 7deg;
  --title-y: 8deg;
  --title-z: -3deg;
  font-family: Righteous, ui-sans-serif, sans-serif;
  font-size: clamp(2.1rem, 8vw, 6.2rem);
  font-weight: 400;
  letter-spacing: -0.055em;
}

.home-page .text-flip[data-title-theme="noir"] {
  --title-face: #fff9f0;
  --title-edge: #4b4854;
  --title-glow: rgba(245, 230, 214, 0.38);
  --title-x: -6deg;
  --title-y: -7deg;
  --title-z: 2deg;
  font-family: "DM Serif Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.06em;
}

.home-page .text-flip[data-title-theme="sunset"] {
  --title-face: #ffc09d;
  --title-edge: #8f315e;
  --title-glow: rgba(255, 105, 139, 0.58);
  --title-x: 8deg;
  --title-y: -7deg;
  --title-z: -2deg;
  font-family: Righteous, ui-sans-serif, sans-serif;
  font-size: clamp(2.1rem, 8vw, 6.2rem);
  font-weight: 400;
  letter-spacing: -0.055em;
}

.home-page .text-flip[data-title-theme="ocean"] {
  --title-face: #abf6ff;
  --title-edge: #176a9e;
  --title-glow: rgba(46, 186, 246, 0.55);
  --title-x: -7deg;
  --title-y: 9deg;
  --title-z: 2deg;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
}

.home-page .text-flip[data-title-theme="matrix"] {
  --title-face: #c7ff86;
  --title-edge: #245b18;
  --title-glow: rgba(113, 239, 77, 0.58);
  --title-x: 5deg;
  --title-y: 8deg;
  --title-z: -1deg;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: clamp(2rem, 7vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.08em;
}

.home-page .text-flip[data-title-theme="rose"] {
  --title-face: #ffe1ee;
  --title-edge: #954367;
  --title-glow: rgba(255, 126, 181, 0.5);
  --title-x: -6deg;
  --title-y: -8deg;
  --title-z: 2deg;
  font-family: "DM Serif Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.06em;
}

.home-page .text-flip[data-title-theme="electric"] {
  --title-face: #fff998;
  --title-edge: #8b6917;
  --title-glow: rgba(255, 231, 67, 0.62);
  --title-x: 10deg;
  --title-y: -5deg;
  --title-z: -3deg;
  font-family: Orbitron, ui-sans-serif, sans-serif;
  font-size: clamp(1.7rem, 6.1vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.085em;
}

.home-page .text-flip[data-title-theme="emerald"] {
  --title-face: #c8ffd8;
  --title-edge: #206948;
  --title-glow: rgba(73, 215, 139, 0.52);
  --title-x: -8deg;
  --title-y: 6deg;
  --title-z: 2deg;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.75rem, 6.4vw, 5.2rem);
  font-weight: 900;
  letter-spacing: -0.07em;
}

.home-page .text-flip[data-title-theme="orbit"] {
  --title-face: #d2dcff;
  --title-edge: #4b5aa2;
  --title-glow: rgba(137, 152, 255, 0.6);
  --title-x: 6deg;
  --title-y: -7deg;
  --title-z: 0deg;
  font-family: Orbitron, ui-sans-serif, sans-serif;
  font-size: clamp(1.7rem, 6.1vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.085em;
}

.home-page .text-flip[data-title-theme="prism"] {
  --title-face: #fff0fe;
  --title-edge: #67429c;
  --title-glow: rgba(193, 116, 255, 0.62);
  --title-x: 5deg;
  --title-y: 0deg;
  --title-z: 0deg;
  font-family: Bungee, Impact, sans-serif;
  font-size: clamp(1.85rem, 6.8vw, 5.4rem);
  font-weight: 400;
  letter-spacing: -0.075em;
}

.home-page .text-flip[data-title-theme="vinyl"] {
  --title-face: #fff4dc;
  --title-edge: #69563e;
  --title-glow: rgba(255, 220, 145, 0.5);
  --title-x: 0deg;
  --title-y: 0deg;
  --title-z: 0deg;
  font-family: Bungee, Impact, sans-serif;
  font-size: clamp(1.85rem, 6.8vw, 5.4rem);
  font-weight: 400;
  letter-spacing: -0.075em;
}

.home-page .text-flip[data-title-theme="sakura"] {
  --title-face: #ffe4ed;
  --title-edge: #9c5b79;
  --title-glow: rgba(255, 165, 199, 0.53);
  --title-x: 7deg;
  --title-y: 7deg;
  --title-z: -2deg;
  font-family: "DM Serif Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.06em;
}

.home-page .text-flip[data-title-theme="lava"] .text-flip-trigger span,
.home-page .text-flip[data-title-theme="ice"] .text-flip-trigger span,
.home-page .text-flip[data-title-theme="chrome"] .text-flip-trigger span,
.home-page .text-flip[data-title-theme="gold"] .text-flip-trigger span,
.home-page .text-flip[data-title-theme="hologram"] .text-flip-trigger span,
.home-page .text-flip[data-title-theme="candy"] .text-flip-trigger span,
.home-page .text-flip[data-title-theme="sunset"] .text-flip-trigger span,
.home-page .text-flip[data-title-theme="ocean"] .text-flip-trigger span,
.home-page .text-flip[data-title-theme="matrix"] .text-flip-trigger span,
.home-page .text-flip[data-title-theme="rose"] .text-flip-trigger span,
.home-page .text-flip[data-title-theme="electric"] .text-flip-trigger span,
.home-page .text-flip[data-title-theme="emerald"] .text-flip-trigger span,
.home-page .text-flip[data-title-theme="orbit"] .text-flip-trigger span,
.home-page .text-flip[data-title-theme="prism"] .text-flip-trigger span,
.home-page .text-flip[data-title-theme="vinyl"] .text-flip-trigger span,
.home-page .text-flip[data-title-theme="sakura"] .text-flip-trigger span {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-page .text-flip[data-title-theme="lava"] .text-flip-trigger span {
  background-image: linear-gradient(135deg, rgba(255, 212, 73, 0.2), rgba(255, 56, 5, 0.1)), url("assets/title-lava.webp");
  background-size: auto, 360px 360px;
  background-position: center, calc(var(--i) * -45px) 50%;
  -webkit-text-stroke: 1px #ff9a3a;
}

.home-page .text-flip[data-title-theme="ice"] .text-flip-trigger span {
  background-image: url("assets/title-ice.webp");
  background-size: 380px 380px;
  background-position: calc(var(--i) * -42px) 50%;
  -webkit-text-stroke: 1px #d9faff;
}

.home-page .text-flip[data-title-theme="chrome"] .text-flip-trigger span {
  background-image: linear-gradient(180deg, #fff 4%, #a6b5c4 22%, #33475d 46%, #f4fbff 53%, #9caebd 74%, #e5f0f6 100%);
  -webkit-text-stroke: 0.7px #b9d1e0;
}

.home-page .text-flip[data-title-theme="gold"] .text-flip-trigger span {
  background-image: linear-gradient(170deg, #fff7d2 8%, #eebc58 30%, #7d4f16 48%, #ffe8a6 56%, #c78e31 82%, #fff0bd);
  -webkit-text-stroke: 0.7px #f7d78a;
}

.home-page .text-flip[data-title-theme="hologram"] .text-flip-trigger span {
  background-image: linear-gradient(135deg, #9afaff, #f9a6e8 34%, #a1a1ff 59%, #b5ffda 82%, #ffdcaa);
  -webkit-text-stroke: 0.7px #e9dbff;
}

.home-page .text-flip[data-title-theme="candy"] .text-flip-trigger span {
  background-image: linear-gradient(160deg, #fff0f8 8%, #ff8dc9 44%, #ffba70 78%, #fff0b1);
  -webkit-text-stroke: 0.7px #ffd7ed;
}

.home-page .text-flip[data-title-theme="sunset"] .text-flip-trigger span {
  background-image: linear-gradient(150deg, #fff0a7, #ff9e71 42%, #e24b8c 85%);
  -webkit-text-stroke: 0.7px #ffd0ad;
}

.home-page .text-flip[data-title-theme="ocean"] .text-flip-trigger span {
  background-image: linear-gradient(165deg, #e9ffff, #77def2 40%, #2689c4 75%, #a9f5e8);
  -webkit-text-stroke: 0.7px #b9faff;
}

.home-page .text-flip[data-title-theme="matrix"] .text-flip-trigger span {
  background-image: repeating-linear-gradient(180deg, #d6ffac 0 5px, #4bca50 6px 8px, #164c20 9px 10px);
  -webkit-text-stroke: 0.7px #b4ff83;
}

.home-page .text-flip[data-title-theme="rose"] .text-flip-trigger span {
  background-image: linear-gradient(160deg, #fff8f2, #e4a5bb 42%, #a95078 60%, #ffd9d8);
  -webkit-text-stroke: 0.7px #ffe4ed;
}

.home-page .text-flip[data-title-theme="electric"] .text-flip-trigger span {
  background-image: linear-gradient(160deg, #fffed4, #f7e637 44%, #59d7eb 48%, #d0fff8 62%, #fff16a);
  -webkit-text-stroke: 0.7px #fffdb7;
}

.home-page .text-flip[data-title-theme="emerald"] .text-flip-trigger span {
  background-image: linear-gradient(165deg, #eaffd3, #78dfa4 34%, #176f61 54%, #a3f7c2 75%, #f7e4a0);
  -webkit-text-stroke: 0.7px #d8ffd9;
}

.home-page .text-flip[data-title-theme="orbit"] .text-flip-trigger span {
  background-image: linear-gradient(155deg, #f8f8ff, #9ebdff 38%, #7867d5 65%, #d2f7ff);
  -webkit-text-stroke: 0.7px #e0eaff;
}

.home-page .text-flip[data-title-theme="prism"] .text-flip-trigger span {
  background-image: linear-gradient(135deg, #ff8da8, #ffdf86 25%, #a2ffcb 50%, #8bd5ff 72%, #d2a6ff);
  -webkit-text-stroke: 0.7px #fff0fe;
}

.home-page .text-flip[data-title-theme="vinyl"] .text-flip-trigger span {
  background-image: repeating-linear-gradient(155deg, #fff5d7 0 8px, #d7b474 9px 12px, #78664d 13px 14px);
  -webkit-text-stroke: 0.7px #fff4dc;
}

.home-page .text-flip[data-title-theme="sakura"] .text-flip-trigger span {
  background-image: linear-gradient(160deg, #fff9f5, #ffd2e0 34%, #ed8eb0 62%, #fff0e6);
  -webkit-text-stroke: 0.7px #fff0f3;
}

.home-page .text-flip[data-title-theme="neon"] .text-flip-trigger {
  text-shadow: 0 0 4px #d2fff9, 0 0 14px #40eddf, 0 0 34px #00bca9, 4px 5px #0b4558;
}

@media (prefers-reduced-motion: no-preference) {
  .home-page .text-flip[data-title-theme="orbit"]:hover .text-flip-trigger {
    animation: titleOrbitSpin 4.8s linear 650ms infinite;
  }

  .home-page .text-flip[data-title-theme="prism"]:hover .text-flip-trigger {
    animation: titlePrismFlip 4.2s ease-in-out 650ms infinite;
  }

  .home-page .text-flip[data-title-theme="vinyl"]:hover .text-flip-trigger {
    animation: titleVinylSpin 6s linear 650ms infinite;
  }
}

@keyframes titleOrbitSpin {
  from { transform: perspective(900px) rotateX(6deg) rotateY(-7deg) rotateZ(0deg); }
  to { transform: perspective(900px) rotateX(6deg) rotateY(-7deg) rotateZ(360deg); }
}

@keyframes titlePrismFlip {
  0%, 100% { transform: perspective(900px) rotateX(5deg) rotateY(0deg); }
  50% { transform: perspective(900px) rotateX(5deg) rotateY(180deg); }
}

@keyframes titleVinylSpin {
  from { transform: perspective(900px) rotateZ(0deg); }
  to { transform: perspective(900px) rotateZ(-360deg); }
}

.text-flip span {
  display: inline-block;
  opacity: 1;
  user-select: none;
}

.portal-start .portal-slide {
  --slide-x: 0px;
  z-index: 2;
  width: min(348px, calc(100vw - 48px));
  height: 80px;
  padding: 5px;
  border: 1px solid rgba(218, 228, 255, 0.46);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(242, 246, 255, 0.22), rgba(80, 111, 182, 0.12) 42%, rgba(20, 24, 45, 0.48));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 8px 0 rgba(5, 8, 20, 0.84),
    0 24px 42px rgba(0, 0, 0, 0.45),
    0 0 35px rgba(116, 159, 255, 0.19);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  transform: perspective(900px) rotateX(7deg);
  transition: border-color 240ms ease, box-shadow 300ms ease;
}

.portal-start .portal-slide:hover,
.portal-start .portal-slide:focus-within {
  border-color: rgba(240, 247, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 8px 0 rgba(5, 8, 20, 0.84),
    0 24px 45px rgba(0, 0, 0, 0.48),
    0 0 42px rgba(122, 171, 255, 0.42);
}

.portal-slide-track {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(228, 239, 255, 0.2);
  border-radius: 19px;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(255, 255, 255, 0.2), transparent 58%),
    radial-gradient(ellipse at 80% 110%, rgba(115, 153, 255, 0.23), transparent 55%),
    linear-gradient(110deg, rgba(28, 36, 66, 0.78), rgba(13, 17, 36, 0.86));
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.16);
  user-select: none;
  touch-action: pan-y pinch-zoom;
}

.portal-slide-track::before {
  position: absolute;
  inset: 2px 9px auto;
  height: 45%;
  border-radius: 18px 18px 60% 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
  pointer-events: none;
  content: "";
}

.portal-slide-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(66px + var(--slide-x));
  background: linear-gradient(90deg, rgba(222, 239, 255, 0.34), rgba(126, 172, 255, 0.24) 72%, rgba(198, 222, 255, 0.12));
  box-shadow: 0 0 26px rgba(133, 182, 255, 0.36), inset -1px 0 0 rgba(255, 255, 255, 0.25);
  transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.portal-slide.is-dragging .portal-slide-fill,
.portal-slide.is-dragging .portal-slide-thumb {
  transition: none;
}

.portal-slide-label {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  color: #f7fbff;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-shadow: 0 0 9px rgba(236, 246, 255, 0.95), 0 0 26px rgba(120, 179, 255, 0.8), 0 0 50px rgba(105, 132, 255, 0.65);
  opacity: var(--slide-label-opacity, 1);
  pointer-events: none;
  animation: portalSlideGlow 2.3s ease-in-out infinite alternate;
}

.portal-slide-thumb {
  position: absolute;
  top: 6px;
  left: 6px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 15px;
  background:
    radial-gradient(circle at 30% 12%, rgba(255, 255, 255, 0.95), transparent 42%),
    linear-gradient(145deg, rgba(221, 239, 255, 0.76), rgba(137, 179, 247, 0.56) 55%, rgba(88, 112, 191, 0.7));
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.8),
    inset 0 -4px 7px rgba(29, 54, 116, 0.25),
    0 5px 16px rgba(91, 146, 255, 0.45),
    0 0 18px rgba(151, 199, 255, 0.38);
  backdrop-filter: blur(12px) saturate(175%);
  -webkit-backdrop-filter: blur(12px) saturate(175%);
  color: #15315b;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  cursor: grab;
  user-select: none;
  touch-action: pan-y pinch-zoom;
  transform: translateX(var(--slide-x));
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease;
}

.portal-slide-thumb:hover,
.portal-slide-thumb:focus-visible {
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.9), 0 7px 22px rgba(131, 183, 255, 0.68), 0 0 26px rgba(159, 208, 255, 0.6);
}

.portal-slide-thumb:focus-visible {
  outline: 2px solid #e9f6ff;
  outline-offset: 3px;
}

.portal-slide.is-dragging .portal-slide-thumb { cursor: grabbing; }
.portal-slide.is-complete .portal-slide-thumb { cursor: default; }

@keyframes portalSlideGlow {
  from { filter: brightness(0.62); text-shadow: 0 0 5px rgba(195, 221, 255, 0.7), 0 0 16px rgba(104, 148, 255, 0.56); }
  to { filter: brightness(1.28); text-shadow: 0 0 12px #fff, 0 0 32px rgba(138, 197, 255, 0.95), 0 0 58px rgba(111, 146, 255, 0.8); }
}

.about-intro {
  min-height: 100svh;
  padding-top: clamp(64px, 9vw, 112px);
  padding-bottom: clamp(64px, 9vw, 112px);
}

.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}

.about-story {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}

.about-profile {
  position: sticky;
  top: 104px;
  align-self: start;
}

.about-profile h2 {
  max-width: 10ch;
  margin: 0;
  color: #ffffff;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 850;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.about-details {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: start;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: clamp(24px, 4vw, 40px);
}

.travel-map {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  border: 1px solid rgba(247, 213, 138, 0.2);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(247, 213, 138, 0.075), rgba(23, 29, 42, 0.82) 42%, rgba(11, 14, 23, 0.96));
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  padding: clamp(16px, 3vw, 30px);
}

.travel-map-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.travel-map-heading div > span {
  color: #f7d58a;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.travel-map-heading h3 {
  margin: 4px 0 3px;
  color: #fff;
  font-size: clamp(1.7rem, 3.4vw, 2.65rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.travel-map-heading p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.9rem;
}

.travel-map-key {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(247, 213, 138, 0.25);
  border-radius: 999px;
  background: rgba(247, 213, 138, 0.08);
  color: #fff1bd;
  font-size: 0.76rem;
  font-weight: 750;
  padding: 7px 10px;
}

.travel-map-key i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f7d58a;
  box-shadow: 0 0 12px #f7d58a;
}

.travel-map-canvas {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(163, 202, 216, 0.25);
  border-radius: 18px;
  background: #0b141d;
}

.travel-map-canvas img,
.travel-map-canvas svg {
  display: block;
  width: 100%;
  height: auto;
}

.travel-map-canvas svg #countries path {
  cursor: pointer;
  transition: fill 160ms ease, stroke 160ms ease;
}

.travel-map-canvas svg #countries path:hover,
.travel-map-canvas svg #countries path:focus-visible {
  fill: #9bb7bd;
  stroke: #e9f7e9;
  stroke-opacity: 1;
  outline: none;
}

.travel-map-canvas svg #countries path.is-visited,
.travel-map-canvas svg #countries path.is-visited:hover,
.travel-map-canvas svg #countries path.is-visited:focus-visible {
  fill: #efc773;
  stroke: #fff3ce;
  stroke-opacity: 1;
}

.travel-map-tooltip {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(247, 213, 138, 0.45);
  border-radius: 9px;
  background: #151b24;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 750;
  padding: 6px 9px;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  white-space: nowrap;
}

.travel-map-editor {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}

.travel-map-picker {
  display: grid;
  gap: 6px;
  min-width: min(100%, 410px);
}

.travel-map-picker label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.74rem;
  font-weight: 750;
}

.travel-map-picker > div,
.travel-map-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.travel-map-picker input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 11px;
  background: rgba(5, 10, 17, 0.62);
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  padding: 10px 12px;
}

.travel-map-picker input:focus-visible {
  border-color: #f7d58a;
  outline: 2px solid rgba(247, 213, 138, 0.35);
}

.travel-map-actions {
  flex: none;
}

.travel-map-actions > span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
  white-space: nowrap;
}

.home-page .travel-map button {
  flex: none;
  min-height: 40px;
  border: 1px solid rgba(247, 213, 138, 0.45);
  border-radius: 10px;
  background: rgba(247, 213, 138, 0.1);
  box-shadow: none;
  color: #fff1bd;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 8px 12px;
  text-shadow: none;
  transform: none;
  transition: background 160ms ease, border-color 160ms ease;
}

.home-page .travel-map button::before,
.home-page .travel-map button::after { display: none; }

.home-page .travel-map button:hover,
.home-page .travel-map button:focus-visible {
  border-color: #f7d58a;
  background: rgba(247, 213, 138, 0.2);
  box-shadow: none;
  transform: none;
}

.home-page .travel-map button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.travel-map-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.travel-map-selected:empty { display: none; }

.home-page .travel-map-selected button {
  min-height: 32px;
  border-color: rgba(247, 213, 138, 0.32);
  border-radius: 999px;
  font-size: 0.72rem;
  padding: 5px 10px;
}

.travel-map-status {
  min-height: 1.2em;
  margin: 10px 2px 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.75rem;
}

.travel-map-source {
  margin: 11px 2px 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.72rem;
  text-align: right;
}

.travel-map-source a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bio-facts {
  display: grid;
  gap: 8px;
  margin: 0;
}

.profile-persona {
  margin-top: 0;
  border: 1px solid rgba(244, 191, 69, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 10%, rgba(244, 191, 69, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.045);
  padding: 18px;
}

.profile-persona h3 {
  margin: 0 0 0.7rem;
  color: #ffffff;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.05;
}

.profile-persona p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.98rem;
  line-height: 1.7;
}

.bio-facts div,
.journey-list article {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.bio-facts div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}

.bio-facts dt,
.journey-list span {
  color: #f7d58a;
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.bio-facts dd {
  color: #ffffff;
  font-weight: 750;
}

.bio-facts .bio-skills-row {
  display: block;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.bio-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bio-skills span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  padding: 7px 11px 7px 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1;
}

.bio-skills i {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: #d43d17;
  color: #ffffff;
  font-size: 0.9rem;
  font-style: normal;
  line-height: 1;
}

.journey-panel {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.journey-heading {
  margin: 0;
  color: #f7d58a;
  font-size: clamp(1.2rem, 2.3vw, 1.65rem);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.journey-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.journey-list article {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 4px 16px;
  min-height: 0;
  border-left: 3px solid rgba(247, 213, 138, 0.72);
  background: linear-gradient(110deg, rgba(247, 213, 138, 0.1), rgba(255, 255, 255, 0.035) 45%);
  padding: 18px 20px;
  transition:
    border-color 240ms ease,
    background 240ms ease,
    box-shadow 240ms ease,
    transform 240ms ease;
}

.journey-list article:hover {
  border-color: #f7d58a;
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-4px) scale(1.01);
}

.journey-list h3 {
  grid-column: 2;
  margin: 0;
  color: #ffffff;
  font-size: 1.08rem;
  line-height: 1.2;
}

.journey-list p {
  grid-column: 2;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
}

.journey-list p {
  font-size: 0.92rem;
  line-height: 1.5;
}

@keyframes portalScan {
  from {
    transform: translate3d(-5%, -5%, 0);
  }

  to {
    transform: translate3d(5%, 5%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-flip,
  .text-flip span,
  .portal-enter,
  .portal-start::after,
  .game-preview-player,
  .portal-nav,
  .home-page .about-profile,
  .home-page .chapters-grid,
  .home-page .flow-panel,
  .home-page .career-profile,
  .home-page .career-grid article,
  .home-page .career-split > section,
  .home-page .experience-timeline article,
  .home-page .oss-grid article,
  .home-page .project-card,
  .home-page .game-entry {
    animation: none;
    filter: none;
    opacity: 1;
    transform: none;
  }

  .text-flip::before,
  .home-page .text-flip .text-flip-trigger,
  .portal-slide,
  .portal-slide-fill,
  .portal-slide-thumb {
    transition: none;
  }

  .portal-slide-label { animation: none; }

  .home-page .chapter-card,
  .home-page .flow-summary,
  .home-page .career-profile,
  .home-page .career-grid article,
  .home-page .career-split > section,
  .home-page .experience-timeline article,
  .home-page .oss-grid article,
  .home-page .project-card {
    transition: none;
  }
}

@keyframes siteRevealUp {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
  }

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

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

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

@media (prefers-reduced-motion: no-preference) {
  .portal-nav {
    animation: navHoverFloat 5.5s ease-in-out infinite;
  }

  .home-page .chapter-card,
  .home-page .flow-summary,
  .home-page .career-profile,
  .home-page .career-grid article,
  .home-page .career-split > section,
  .home-page .experience-timeline article,
  .home-page .oss-grid article,
  .home-page .project-card {
    transition:
      border-color 220ms ease,
      background-color 220ms ease,
      box-shadow 220ms ease,
      transform 220ms ease;
  }

  .home-page .chapter-card:hover,
  .home-page .flow-summary:hover,
  .home-page .career-profile:hover,
  .home-page .career-grid article:hover,
  .home-page .career-split > section:hover,
  .home-page .experience-timeline article:hover,
  .home-page .oss-grid article:hover,
  .home-page .project-card:hover {
    border-color: rgba(244, 191, 69, 0.38);
    box-shadow:
      0 24px 52px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: translateY(-5px);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .home-page .about-profile,
    .home-page .chapters-grid,
    .home-page .flow-panel,
    .home-page .career-profile,
    .home-page .career-grid article,
    .home-page .career-split > section,
    .home-page .experience-timeline article,
    .home-page .oss-grid article,
    .home-page .game-entry {
      animation: siteRevealUp both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
  }
}

.identity-panel {
  border: 1px solid rgba(17, 19, 21, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--shadow);
  padding: clamp(1.2rem, 4vw, 2rem);
}

.panel-label,
.tag {
  margin: 1.4rem 0 0.35rem;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.panel-title {
  margin-bottom: 1.6rem;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 850;
  line-height: 1.06;
}

.quick-facts {
  display: grid;
  gap: 0.8rem;
  margin: 0;
}

.quick-facts div {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1rem;
  padding-top: 0.8rem;
}

dt {
  color: var(--muted);
  font-weight: 700;
}

dd {
  margin: 0;
  font-weight: 750;
}

.split {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}

.stack,
.project-grid,
.note-grid,
.link-grid,
.status-board {
  display: grid;
  gap: 1rem;
}

.feature,
.project-card,
.note-card,
.status-board article {
  border: 1px solid rgba(17, 19, 21, 0.12);
  border-radius: 8px;
  background: var(--panel);
  padding: 1.2rem;
}

.home-page .identity-panel,
.home-page .feature,
.home-page .project-card,
.home-page .note-card,
.home-page .status-board article,
.home-page .link-grid a,
.home-page .repo-card {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(8, 8, 8, 0.58);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.feature p,
.project-card p,
.note-card p,
.status-board p,
.cv-section p,
.cv-section li {
  color: var(--muted);
}

.small {
  font-size: 1.03rem;
}

.section-heading {
  max-width: 720px;
}

.project-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-card {
  display: flex;
  flex-direction: column;
  min-height: 220px;
}

.project-card a {
  color: var(--accent-dark);
  font-weight: 850;
  margin-top: auto;
  padding-top: 1rem;
}

.tag {
  margin-top: 0;
  color: var(--rose);
}

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

.link-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.link-grid a {
  border: 1px solid rgba(17, 19, 21, 0.12);
  border-radius: 8px;
  background: var(--panel);
  color: var(--accent-dark);
  font-weight: 800;
  min-height: 76px;
  padding: 1rem;
}

.link-grid a:hover,
.project-card a:hover {
  color: var(--ink);
}

.status-board {
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.status-board h3 {
  font-size: 1.35rem;
  line-height: 1.15;
}

.github-panel {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(220px, 0.35fr);
  gap: 1.5rem;
}

.github-stats {
  display: grid;
  gap: 1rem;
}

.github-stats div {
  border: 1px solid rgba(17, 19, 21, 0.12);
  border-radius: 8px;
  background: var(--ink);
  color: white;
  padding: 1.1rem;
}

.home-page .github-stats div {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  backdrop-filter: blur(18px);
}

.github-stats span {
  display: block;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
}

.github-stats p,
.muted {
  color: var(--muted);
}

.github-stats p {
  color: rgba(255, 255, 255, 0.72);
  margin: 0.4rem 0 0;
}

.github-repos {
  display: grid;
  gap: 1rem;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.repo-card {
  border: 1px solid rgba(17, 19, 21, 0.12);
  border-radius: 8px;
  background: var(--panel);
  min-height: 160px;
  padding: 1rem;
}

.repo-card a {
  color: var(--accent-dark);
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 850;
  margin-bottom: 0.6rem;
}

.repo-card p {
  color: var(--muted);
}

.crypto-section {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 2rem;
  padding-bottom: 6rem;
}

.crypto-heading {
  max-width: 780px;
}

.crypto-heading h2 {
  max-width: 11ch;
  color: #ffffff;
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 900;
  line-height: 0.92;
}

.crypto-heading p {
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.68);
  font-size: 1.08rem;
}

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

.crypto-grid article {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 17px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 36%),
    rgba(255, 255, 255, 0.055);
  box-shadow: var(--shadow);
  padding: 22px;
  backdrop-filter: blur(18px);
  transition:
    border-color 240ms ease,
    background 240ms ease,
    box-shadow 240ms ease,
    transform 240ms ease;
}

.crypto-grid article:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 36%),
    rgba(255, 255, 255, 0.09);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-4px);
}

.crypto-grid span {
  color: #d43d17;
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.crypto-grid p {
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.7);
}

.system-map,
.proof-section,
.oss-section,
.game-entry {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: clamp(4rem, 9vw, 7rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}

.system-map,
.oss-section,
.proof-section {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2rem);
}

.system-map-heading,
.oss-heading,
.proof-heading {
  max-width: 840px;
}

.system-map-heading h2,
.oss-heading h2,
.proof-heading h2,
.game-entry h2 {
  max-width: 12ch;
  color: #ffffff;
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 900;
  line-height: 0.92;
}

.system-map-heading h2 {
  max-width: none;
  font-size: clamp(2.65rem, 6.2vw, 4.5rem);
  line-height: 1;
}

.system-map-heading p,
.oss-heading p,
.proof-heading p,
.game-entry p {
  max-width: 68ch;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.08rem;
}

.proof-jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.4rem;
  margin-top: 1.2rem;
}

.proof-jump-links a {
  color: #f7d58a;
  font-size: 0.92rem;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

.proof-jump-links a:hover,
.proof-jump-links a:focus-visible {
  color: #ffffff;
}

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

.system-map-grid a {
  display: grid;
  min-height: 250px;
  align-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.055);
  box-shadow: var(--shadow);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  text-decoration: none;
  backdrop-filter: blur(18px);
  transition:
    border-color 220ms ease,
    background 220ms ease,
    transform 220ms ease;
}

.system-map-grid a:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background-color: rgba(255, 255, 255, 0.09);
  transform: translateY(-4px);
}

.system-map-grid span {
  width: max-content;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #f2b84b;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 0.28rem 0.6rem;
}

.system-map-grid h3 {
  margin: 2.7rem 0 0.7rem;
  color: #ffffff;
  font-size: clamp(1.55rem, 2.65vw, 2.45rem);
  line-height: 0.98;
}

.system-map-grid p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
}

.chapters-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.12fr) minmax(0, 0.92fr);
  grid-template-areas:
    "crypto agentic security"
    "ai agentic security"
    "content agentic security";
  gap: 12px 22px;
  align-items: stretch;
}

.chapters-grid .chapter-card {
  --chapter-accent: #f7d58a;
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 150px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--chapter-accent) 36%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--chapter-accent) 25%, transparent), transparent 67%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 38%),
    #111018;
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--chapter-accent) 58%, transparent), 0 15px 34px rgba(0, 0, 0, 0.2);
  padding: clamp(20px, 2.5vw, 28px);
  text-decoration: none;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.chapters-grid .chapter-card::before {
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  pointer-events: none;
  content: "";
}

.chapters-grid .chapter-card:hover,
.chapters-grid .chapter-card:focus-visible {
  border-color: var(--chapter-accent);
  box-shadow: inset 0 2px 0 var(--chapter-accent), 0 18px 40px rgba(0, 0, 0, 0.32), 0 0 30px color-mix(in srgb, var(--chapter-accent) 18%, transparent);
  transform: translateY(-3px);
}

.chapters-grid .chapter-card:focus-visible {
  outline: 2px solid var(--chapter-accent);
  outline-offset: 4px;
}

.chapters-grid .chapter-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: clamp(1.45rem, 2.55vw, 2.35rem);
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-transform: uppercase;
}

.chapters-grid .chapter-card span {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--chapter-accent) 55%, transparent);
  border-radius: 50%;
  color: var(--chapter-accent);
  font-size: 1rem;
  line-height: 1;
  transition: background 200ms ease, transform 200ms ease;
}

.chapters-grid .chapter-card:hover span,
.chapters-grid .chapter-card:focus-visible span {
  background: color-mix(in srgb, var(--chapter-accent) 17%, transparent);
  transform: translate(2px, -2px);
}

.chapters-grid .crypto-lane { --chapter-accent: #f2b84b; grid-area: crypto; }
.chapters-grid .ai-lane { --chapter-accent: #8fa9ff; grid-area: ai; }
.chapters-grid .content-lane { --chapter-accent: #ff9a6b; grid-area: content; }
.chapters-grid .agentic-commerce-lane { --chapter-accent: #74daa4; grid-area: agentic; }
.chapters-grid .security-lane { --chapter-accent: #eca4cc; grid-area: security; }

.chapters-grid .agentic-commerce-lane,
.chapters-grid .security-lane { align-items: flex-end; }

.chapters-grid .crypto-lane::after,
.chapters-grid .ai-lane::after {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 22px;
  height: 2px;
  background: linear-gradient(90deg, var(--chapter-accent), rgba(255, 255, 255, 0.2));
  pointer-events: none;
  content: "";
}

.system-map > .flow-art {
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: 0;
}

.system-map .flow-summary { min-height: 165px; }
.system-map .flow-summary small { display: none; }
.system-map .flow-panel { scroll-margin-top: 88px; }

.proof-grid span {
  color: #d43d17;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.proof-grid .proof-commit-count {
  align-self: flex-start;
  margin-top: 0.45rem;
  border: 1px solid rgba(242, 184, 75, 0.32);
  border-radius: 999px;
  background: rgba(242, 184, 75, 0.1);
  color: #f7d58a;
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1.2;
  padding: 0.3rem 0.6rem;
  text-decoration: none;
  text-transform: uppercase;
}

.proof-grid .proof-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-top: 0.45rem;
}

.proof-grid .proof-meta .proof-commit-count {
  margin-top: 0;
}

.proof-grid .proof-last-commit {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.proof-grid a.proof-commit-count:hover,
.proof-grid a.proof-commit-count:focus-visible {
  background: rgba(242, 184, 75, 0.2);
  text-decoration: underline;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

.github-live {
  min-width: 0;
  margin: 2rem 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: var(--shadow);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}

.github-live-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.github-live-heading h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.65rem, 3vw, 2.3rem);
}

.github-live-heading p {
  max-width: 60ch;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.68);
}

.home-page .github-live .github-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  border: 1px solid rgba(247, 213, 138, 0.38);
  border-radius: 999px;
  background: rgba(247, 213, 138, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #f7d58a;
  font-size: 0.88rem;
  font-weight: 850;
  padding: 0.65rem 0.85rem;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.home-page .github-live .github-profile-link:hover,
.home-page .github-live .github-profile-link:focus-visible {
  border-color: #f7d58a;
  background: rgba(247, 213, 138, 0.18);
  transform: translateY(-2px);
}

.github-profile-link svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

.home-page .github-live .github-profile-link span {
  color: inherit;
}

.github-live-grid {
  position: relative;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  cursor: grab;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: auto;
}

.github-carousel {
  min-width: 0;
  max-width: 100%;
}

.github-live-grid::-webkit-scrollbar {
  display: none;
}

.github-live-grid.is-dragging,
.github-live-grid.is-dragging * {
  cursor: grabbing;
  user-select: none;
}

.github-live-grid.is-dragging {
  scroll-snap-type: none;
}

.github-carousel:focus-visible {
  outline: 2px solid #f7d58a;
  outline-offset: 5px;
}

.github-live-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(6, 5, 10, 0.54);
  padding: 1rem;
}

.github-live-card {
  display: flex;
  flex: 0 0 calc((100% - 16px) / 3);
  min-width: 0;
  min-height: 210px;
  flex-direction: column;
  scroll-snap-align: start;
  animation: github-card-enter 420ms ease both;
  transition: border-color 250ms ease, background-color 250ms ease, box-shadow 250ms ease;
}

.github-live-card.is-current {
  border-color: rgba(247, 213, 138, 0.65);
  background: rgba(247, 213, 138, 0.075);
  box-shadow: inset 0 3px 0 rgba(247, 213, 138, 0.7);
}

@media (max-width: 980px) {
  .github-live-card {
    flex-basis: calc((100% - 8px) / 2);
  }
}

@media (max-width: 760px) {
  .github-live-card {
    flex-basis: min(86%, 360px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .github-live-grid {
    flex-wrap: wrap;
    overflow: visible;
    cursor: default;
    scroll-snap-type: none;
  }

  .github-live-card {
    flex: 1 1 min(240px, 100%);
    animation: none;
  }
}

@keyframes github-card-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.github-live-card h4 {
  margin: 0 0 0.75rem;
  color: #ffffff;
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.github-live-card h4 a {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
}

.github-live-card h4 a:hover,
.github-live-card h4 a:focus-visible {
  color: #f7d58a;
}

.github-live-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow-wrap: anywhere;
}

.home-page .github-live .github-commit-preview,
.home-page .github-live .github-commit-preview:hover,
.home-page .github-live .github-commit-preview:active {
  display: inline-flex;
  width: auto;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f7d58a;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.45;
  padding: 0;
  text-align: left;
  text-shadow: none;
  transform: none;
  cursor: pointer;
}

.home-page .github-live .github-commit-preview:hover,
.home-page .github-live .github-commit-preview:focus-visible {
  color: #fff4d8;
}

.home-page .github-live .github-commit-preview:focus-visible {
  outline: 2px solid #f7d58a;
  outline-offset: 4px;
}

.home-page .github-live .github-commit-preview::before,
.home-page .github-live .github-commit-preview::after { display: none; }

.github-live-card footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: auto;
  padding-top: 1rem;
}

.github-live-card time,
.github-live-card a {
  color: #f7d58a;
  font-size: 0.8rem;
  font-weight: 850;
}

.home-page .github-live .github-history-heading button {
  min-height: 0;
  border: 1px solid rgba(247, 213, 138, 0.32);
  border-radius: 999px;
  background: rgba(247, 213, 138, 0.09);
  box-shadow: none;
  color: #f7d58a;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 0.45rem 0.7rem;
  text-shadow: none;
  transition: background 180ms ease, border-color 180ms ease;
}

.home-page .github-live .github-history-heading button:hover,
.home-page .github-live .github-history-heading button:focus-visible {
  border-color: rgba(247, 213, 138, 0.72);
  background: rgba(247, 213, 138, 0.2);
  box-shadow: none;
  color: #fff0c7;
  transform: none;
}

.home-page .github-live .github-history-heading button::before,
.home-page .github-live .github-history-heading button::after {
  display: none;
}

.github-history-panel {
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid rgba(247, 213, 138, 0.38);
  border-radius: 18px;
  background: radial-gradient(circle at 4% 0, rgba(247, 213, 138, 0.11), transparent 38%), linear-gradient(145deg, #1d1a20, #0c0b11 75%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 20px 46px rgba(0, 0, 0, 0.34);
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.github-history-panel[hidden],
.github-history-panel [hidden] {
  display: none;
}

.github-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(247, 213, 138, 0.18);
}

.home-page .github-live .github-history-heading h4 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  letter-spacing: -0.02em;
}

.home-page .github-live .github-history-heading button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 1.25rem;
  padding: 0;
}

.github-history-panel ol {
  display: grid;
  gap: 0;
  max-height: 360px;
  margin: 0;
  overflow-y: auto;
  padding: 0;
  list-style: none;
}

.github-history-panel li {
  position: relative;
  padding: 0.85rem 0.35rem 0.9rem 2.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.github-history-panel li:last-child { border-bottom: 0; }

.github-history-panel li::before {
  position: absolute;
  top: 1.1rem;
  left: 0.45rem;
  width: 9px;
  height: 9px;
  border: 2px solid #f7d58a;
  border-radius: 50%;
  background: #231c18;
  box-shadow: 0 0 12px rgba(247, 213, 138, 0.5);
  content: "";
}

.github-history-panel li:not(:last-child)::after {
  position: absolute;
  top: 1.75rem;
  bottom: -0.35rem;
  left: 0.72rem;
  width: 1px;
  background: linear-gradient(rgba(247, 213, 138, 0.4), rgba(247, 213, 138, 0.08));
  content: "";
}

.github-history-panel li > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}

.home-page .github-live .github-history-panel a {
  color: #f7d58a;
  font-size: 0.78rem;
  font-weight: 850;
}

.home-page .github-live .github-history-panel time {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
}

.home-page .github-live .github-history-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.proof-grid article {
  display: flex;
  min-width: 0;
  min-height: 390px;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 36%),
    rgba(255, 255, 255, 0.055);
  box-shadow: var(--shadow);
  padding: 22px;
  backdrop-filter: blur(12px);
  transition:
    border-color 240ms ease,
    background 240ms ease,
    box-shadow 240ms ease,
    transform 240ms ease;
}

.proof-grid article:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 36%),
    rgba(255, 255, 255, 0.09);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-4px);
}

.proof-grid article > * {
  max-width: 100%;
}

.proof-grid article > span:first-of-type {
  margin-top: 0.1rem;
  line-height: 1.35;
}

.proof-grid h3 {
  overflow-wrap: anywhere;
}

.proof-artifact {
  min-height: 132px;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    rgba(6, 5, 10, 0.74);
  background-size: 24px 24px;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 900;
}

.proof-artifact img {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
}

.proof-artifact-logo {
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    rgba(6, 5, 10, 0.74);
  background-size: 24px 24px;
}

.proof-artifact-logo img {
  width: min(70%, 180px);
  height: 132px;
  object-fit: contain;
}

.proof-artifact-wordmark {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.45rem;
  text-align: center;
  background:
    radial-gradient(circle at 18% 14%, rgba(242, 184, 75, 0.32), transparent 34%),
    radial-gradient(circle at 82% 86%, rgba(34, 197, 94, 0.24), transparent 32%),
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    rgba(6, 5, 10, 0.82);
  background-size: auto, auto, 24px 24px, 24px 24px, auto;
}

.proof-artifact-wordmark b {
  max-width: 8ch;
  color: #ffffff;
  font-size: clamp(1.6rem, 2.4vw, 2.35rem);
  line-height: 0.92;
}

.proof-artifact-wordmark small {
  border: 1px solid rgba(242, 184, 75, 0.34);
  border-radius: 999px;
  background: rgba(242, 184, 75, 0.12);
  color: #f7d58a;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0;
  padding: 0.32rem 0.58rem;
  text-transform: uppercase;
}

.proof-grid h3 {
  margin-top: 0.55rem;
  color: #ffffff;
  font-size: 1.45rem;
}

.proof-grid p,
.proof-grid li {
  color: rgba(255, 255, 255, 0.68);
}

.proof-grid ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: auto 0 1.1rem;
  padding: 0;
  list-style: none;
}

.proof-grid li {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 800;
}

.proof-actions {
  display: flex;
  margin-top: 0.6rem;
  flex-wrap: wrap;
  gap: 8px;
}

.proof-grid a {
  color: #ffffff;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

.proof-actions a {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.48rem 0.68rem;
  font-size: 0.82rem;
  text-decoration: none;
}

.proof-actions a:first-child {
  border-color: rgba(242, 184, 75, 0.44);
  background: rgba(242, 184, 75, 0.12);
  color: #f7d58a;
}

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

.oss-grid article {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 36%),
    rgba(255, 255, 255, 0.055);
  box-shadow: var(--shadow);
  padding: 18px;
  backdrop-filter: blur(18px);
}

.oss-grid span {
  color: #f2b84b;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.oss-grid h3 {
  margin: 1.2rem 0 0.65rem;
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1;
  overflow-wrap: anywhere;
}

.oss-grid p {
  margin: 0 0 1.1rem;
  color: rgba(255, 255, 255, 0.68);
}

.oss-grid a {
  color: #ffffff;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

.oss-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.oss-actions a,
.oss-grid article > a {
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.48rem 0.68rem;
  font-size: 0.82rem;
  text-decoration: none;
}

.game-entry {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 0.68fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.game-entry-copy {
  display: grid;
  justify-items: start;
  gap: 0.4rem;
}

.game-entry-copy .button {
  margin-top: 1rem;
}

.game-entry-preview {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 22% 26%, rgba(212, 61, 23, 0.28), transparent 18rem),
    radial-gradient(circle at 78% 68%, rgba(92, 124, 255, 0.28), transparent 20rem),
    #06050a;
  box-shadow: var(--shadow);
  padding: 18px;
}

.game-preview-screen {
  position: relative;
  height: 100%;
  min-height: 384px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  background-size: 40px 40px, 40px 40px, auto;
}

.game-preview-screen::before {
  position: absolute;
  right: 8%;
  bottom: 21%;
  left: 8%;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d43d17, #e5d011, #22c55e);
  content: "";
}

.game-preview-player,
.game-preview-screen i,
.game-preview-screen b {
  position: absolute;
}

.game-preview-player {
  bottom: 24%;
  left: 18%;
  width: 34px;
  height: 48px;
  border-radius: 9px 9px 5px 5px;
  background: #ffffff;
  box-shadow: 0 0 34px rgba(255, 255, 255, 0.34);
  animation: gamePreviewBob 1.8s ease-in-out infinite;
}

.game-preview-screen i {
  top: var(--y);
  left: var(--x);
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #e5d011;
  box-shadow: 0 0 20px rgba(229, 208, 17, 0.56);
}

.game-preview-screen b {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  text-transform: uppercase;
}

.game-preview-screen b:nth-of-type(1) {
  top: 22%;
  left: 21%;
}

.game-preview-screen b:nth-of-type(2) {
  top: 42%;
  right: 18%;
}

.game-preview-screen b:nth-of-type(3) {
  right: 22%;
  bottom: 32%;
}

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

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

.career-data {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: clamp(4rem, 9vw, 7rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}

.career-heading {
  max-width: 840px;
}

.career-heading h2 {
  max-width: 12ch;
  color: #ffffff;
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 900;
  line-height: 0.92;
}

.career-heading p {
  max-width: 68ch;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.08rem;
}

.career-contact,
.career-grid,
.career-split,
.career-links {
  display: grid;
  gap: 8px;
}

.career-contact {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.career-contact a,
.career-contact span,
.career-links a {
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
  padding: 0.95rem 1rem;
  backdrop-filter: blur(18px);
}

.career-contact a:hover,
.career-links a:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.career-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.career-profile,
.career-grid article,
.career-split > section {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 17px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 36%),
    rgba(255, 255, 255, 0.055);
  box-shadow: var(--shadow);
  padding: 22px;
  backdrop-filter: blur(18px);
}

.career-profile {
  display: grid;
  gap: 0.8rem;
}

.role-focus {
  border-color: rgba(244, 191, 69, 0.28);
  border-radius: 28px;
  background:
    radial-gradient(circle at 10% 8%, rgba(244, 191, 69, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(244, 191, 69, 0.12), transparent 44%),
    rgba(255, 255, 255, 0.06);
}

.role-focus > span {
  color: #f4bf45;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.role-focus h4 {
  margin: 0.4rem 0 0;
  color: #ffffff;
  font-size: 0.92rem;
  text-transform: uppercase;
}

.role-focus .career-list {
  columns: 2;
  column-gap: 2rem;
}

.career-thesis {
  border-top: 1px solid rgba(244, 191, 69, 0.32);
  border-bottom: 1px solid rgba(244, 191, 69, 0.32);
  padding: clamp(2rem, 5vw, 4rem) 0;
}

.career-thesis p {
  max-width: 980px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.35rem, 6vw, 5.6rem);
  font-weight: 950;
  line-height: 0.95;
}

.career-profile h3 {
  margin-bottom: 0;
  color: #ffffff;
  font-size: 1.22rem;
}

.career-profile p,
.career-note {
  max-width: 82ch;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.68);
}

.career-section-label {
  color: #f4bf45;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.career-grid article {
  min-height: 220px;
}

.career-grid article > h3:first-child {
  margin-top: 0;
}

.career-grid-compact article {
  min-height: 180px;
}

.career-grid span {
  color: #d43d17;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.career-grid h3,
.career-split h3 {
  color: #ffffff;
  font-size: 1.12rem;
}

.career-grid h3 {
  margin-top: 0.7rem;
}

.career-grid p,
.career-list {
  color: rgba(255, 255, 255, 0.68);
}

.career-grid p {
  margin-bottom: 0;
  font-size: 0.92rem;
}

.career-grid .career-meta {
  margin: -0.15rem 0 0.8rem;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.78rem;
  font-weight: 800;
}

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

.proof-strip article,
.experience-timeline {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.proof-strip article {
  min-height: 150px;
  padding: 20px;
}

.proof-strip span {
  display: block;
  color: #ffffff;
  font-size: clamp(1.75rem, 4vw, 3.2rem);
  font-weight: 950;
  line-height: 0.95;
}

.proof-strip p {
  margin: 0.75rem 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.9rem;
}

.proof-strip article:nth-child(1) {
  border-color: rgba(92, 124, 255, 0.34);
  background:
    radial-gradient(circle at 18% 12%, rgba(92, 124, 255, 0.22), transparent 35%),
    linear-gradient(145deg, rgba(26, 61, 232, 0.16), rgba(255, 255, 255, 0.055));
}

.proof-strip article:nth-child(1) span {
  color: #9fb2ff;
}

.proof-strip article:nth-child(2) {
  border-color: rgba(34, 197, 94, 0.34);
  background:
    radial-gradient(circle at 18% 12%, rgba(34, 197, 94, 0.2), transparent 35%),
    linear-gradient(145deg, rgba(13, 59, 46, 0.18), rgba(255, 255, 255, 0.055));
}

.proof-strip article:nth-child(2) span {
  color: #7ee69c;
}

.proof-strip article:nth-child(3) {
  border-color: rgba(236, 72, 153, 0.34);
  background:
    radial-gradient(circle at 18% 12%, rgba(236, 72, 153, 0.18), transparent 35%),
    linear-gradient(145deg, rgba(92, 24, 64, 0.18), rgba(255, 255, 255, 0.055));
}

.proof-strip article:nth-child(3) span {
  color: #f4a0c9;
}

.proof-strip .proof-workshops {
  border-color: rgba(244, 191, 69, 0.34);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 12%, rgba(244, 191, 69, 0.2), transparent 35%),
    linear-gradient(145deg, rgba(212, 61, 23, 0.13), rgba(255, 255, 255, 0.055));
}

.proof-strip .proof-workshops span {
  color: #f4bf45;
  font-size: clamp(1.5rem, 3vw, 2.65rem);
}

.proof-strip .proof-workshops p {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 750;
}

.experience-timeline {
  display: grid;
  gap: 0;
  padding: 22px;
}

.experience-timeline h3 {
  margin-bottom: 0.4rem;
  color: #ffffff;
  font-size: 1.22rem;
}

.experience-timeline article {
  display: grid;
  grid-template-columns: minmax(120px, 0.24fr) 1fr;
  gap: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1rem 0;
}

.experience-timeline article:last-child {
  padding-bottom: 0;
}

.experience-timeline article > span,
.worked-place-grid span {
  color: #f4bf45;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.experience-timeline h4,
.worked-place-grid h4 {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
}

.experience-timeline p,
.worked-place-grid p,
.proof-links p {
  margin: 0.35rem 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.92rem;
}

.case-study-grid article {
  min-height: 250px;
}

.teaching-bubbles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.teaching-bubbles article {
  display: flex;
  min-height: 320px;
  flex-direction: column;
  justify-content: center;
  border-color: rgba(244, 191, 69, 0.24);
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 16%, rgba(244, 191, 69, 0.18), transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(212, 61, 23, 0.16), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
  padding: clamp(24px, 3vw, 34px);
}

.teaching-bubbles h3 {
  margin-top: 0;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.08;
}

.teaching-bubbles .career-meta {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(244, 191, 69, 0.28);
  border-radius: 999px;
  background: rgba(244, 191, 69, 0.08);
  color: rgba(255, 255, 255, 0.72);
  padding: 0.48rem 0.7rem;
  line-height: 1.35;
}

.teaching-bubbles p:last-child {
  font-size: 0.95rem;
  line-height: 1.65;
}

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

.career-split .pill-list li {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
}

.worked-places .pill-list {
  gap: 0.65rem;
}

.worked-places .pill-list li {
  border-color: rgba(244, 191, 69, 0.32);
  background: rgba(244, 191, 69, 0.08);
  color: #ffffff;
  font-size: 0.98rem;
}

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

.worked-place-grid article {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  padding: 16px;
}

.career-list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding-left: 1.1rem;
}

.career-links {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.career-note {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 1rem;
}

.social-end {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding-top: 1rem;
  padding-bottom: 5rem;
}

.ats-page {
  min-height: 100vh;
  background: #f4f1ea;
  color: #171717;
}

.ats-document {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0;
}

.ats-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
  border-bottom: 2px solid #171717;
  padding-bottom: 1.5rem;
}

.ats-kicker {
  margin-bottom: 0.25rem;
  color: #8a321c;
  font-weight: 900;
  text-transform: uppercase;
}

.ats-header h1 {
  max-width: 22ch;
  margin-bottom: 0.75rem;
  color: #171717;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1;
}

.ats-header p,
.ats-document p,
.ats-document li {
  color: #333333;
}

.ats-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.ats-actions a,
.ats-actions button {
  border: 1px solid #171717;
  border-radius: 6px;
  background: transparent;
  color: #171717;
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  padding: 0.65rem 0.8rem;
}

.ats-document section {
  border-bottom: 1px solid rgba(23, 23, 23, 0.18);
  padding: 1.4rem 0;
}

.ats-document h2 {
  margin-bottom: 0.75rem;
  color: #171717;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ats-document h3 {
  margin-bottom: 0.15rem;
  color: #171717;
  font-size: 1.05rem;
}

.ats-document article + article {
  margin-top: 1rem;
}

.ats-document ul {
  margin: 0;
  padding-left: 1.2rem;
}

.ats-contact-block p,
.ats-skill-line {
  line-height: 1.55;
}

.ats-tight-list {
  display: grid;
  gap: 0.35rem;
}

.ats-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}

.ats-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.ats-entry-head p {
  margin: 0;
  color: #6d6d6d;
  font-size: 0.88rem;
  font-weight: 850;
  white-space: nowrap;
}

.ats-two-column article {
  margin: 0;
}

@page {
  size: A4;
  margin: 14mm;
}

.teaching-page {
  min-height: 100vh;
  background: #f4f1ea;
  color: #171717;
}

.teaching-document {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0;
}

.teaching-hero {
  position: relative;
  border-bottom: 2px solid #171717;
  padding-bottom: 2rem;
}

.teaching-hero h1 {
  max-width: 12ch;
  margin-bottom: 0.75rem;
  color: #171717;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.92;
}

.teaching-hero p,
.teaching-section p,
.teaching-section li {
  color: #333333;
}

.teaching-nav {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.teaching-nav a,
.teaching-nav button {
  border: 1px solid #171717;
  border-radius: 6px;
  background: transparent;
  color: #171717;
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  padding: 0.65rem 0.8rem;
}

.teaching-section {
  border-bottom: 1px solid rgba(23, 23, 23, 0.18);
  padding: 2rem 0;
}

.teaching-section h2 {
  margin-bottom: 0.75rem;
  color: #171717;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.teaching-section h3 {
  color: #171717;
  font-size: 1.05rem;
}

.teaching-grid,
.radar-grid,
.rubric-grid {
  display: grid;
  gap: 8px;
  margin-top: 1rem;
}

.teaching-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.radar-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rubric-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.teaching-grid article,
.radar-grid article,
.rubric-grid article,
.prompt-box {
  border: 1px solid rgba(23, 23, 23, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.38);
  padding: 16px;
}

.teaching-grid span,
.radar-grid span,
.rubric-grid span {
  color: #8a321c;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.prompt-box {
  margin-top: 1rem;
}

.audit-table {
  display: grid;
  margin-top: 1rem;
  border: 1px solid rgba(23, 23, 23, 0.18);
  border-radius: 8px;
  overflow: hidden;
}

.audit-table [role="row"] {
  display: grid;
  grid-template-columns: 0.7fr 1.5fr 1fr;
}

.audit-table [role="row"] + [role="row"] {
  border-top: 1px solid rgba(23, 23, 23, 0.14);
}

.audit-table strong,
.audit-table span {
  padding: 12px;
}

.audit-table strong {
  background: #171717;
  color: #ffffff;
}

.audit-table span {
  color: #333333;
}

.audit-table span + span,
.audit-table strong + strong {
  border-left: 1px solid rgba(23, 23, 23, 0.14);
}

.teaching-steps {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0 0;
  padding-left: 1.2rem;
}

.social-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: var(--shadow);
  color: #ffffff;
  backdrop-filter: blur(18px);
  transition:
    border-color 240ms ease,
    background 240ms ease,
    box-shadow 240ms ease,
    transform 240ms ease;
}

.social-icon-link:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-4px);
}

.social-icon-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.86);
  outline-offset: 5px;
}

.social-icon-link svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.portal-socials {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: calc(100% - 32px);
}

.portal-socials .social-icon-link {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.24), rgba(165, 190, 255, 0.07) 65%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 8px 20px rgba(0, 0, 0, 0.18);
  transition:
    transform 320ms cubic-bezier(0.2, 0.8, 0.3, 1.4),
    background 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease;
}

.portal-socials .social-icon-link:is(:hover, :focus-visible) {
  transform: translateY(-7px) scale(1.16);
  border-color: rgba(210, 228, 255, 0.8);
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.42), rgba(144, 181, 255, 0.16) 65%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5), 0 14px 28px rgba(0, 0, 0, 0.24), 0 0 24px rgba(144, 181, 255, 0.2);
}

.home-page[data-theme="paper"] .portal-socials .social-icon-link {
  color: #39332c;
  border-color: rgba(63, 53, 41, 0.3);
  outline-color: #39332c;
}

@media (prefers-reduced-motion: reduce) {
  .portal-socials .social-icon-link {
    transition: none;
  }

  .portal-socials .social-icon-link:is(:hover, :focus-visible) {
    transform: none;
  }
}

.contact-band {
  border-top: 1px solid var(--line);
  justify-content: space-between;
  gap: 1.5rem;
}

.contact-band h2 {
  margin-bottom: 0;
}

.site-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.4rem 0 2rem;
}

.cv-page {
  background: var(--paper);
}

.cv-shell {
  width: min(980px, calc(100% - 2rem));
  margin: 0 auto 4rem;
  border: 1px solid rgba(17, 19, 21, 0.12);
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 4vw, 3rem);
}

.cv-hero {
  border-bottom: 2px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  padding-bottom: 2rem;
}

.cv-hero h1 {
  max-width: none;
  margin-bottom: 0.7rem;
  font-size: clamp(3.2rem, 8vw, 6rem);
}

.cv-contact {
  align-items: flex-end;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  color: var(--muted);
  font-weight: 700;
  text-align: right;
}

.cv-section {
  border-bottom: 1px solid var(--line);
  padding: 1.7rem 0;
}

.cv-section h2 {
  margin-bottom: 1rem;
  font-size: 1.35rem;
}

.cv-item {
  display: grid;
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1rem 0;
}

.cv-item + .cv-item {
  border-top: 1px solid var(--line);
}

.cv-meta h3 {
  margin-bottom: 0.2rem;
}

.cv-meta span {
  color: var(--muted);
  display: block;
  font-weight: 700;
}

.cv-item ul {
  margin: 0;
  padding-left: 1.15rem;
}

.cv-item.compact p {
  margin-bottom: 0;
}

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pill-list li {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 750;
  padding: 0.45rem 0.7rem;
}

.print-actions {
  padding-top: 1.5rem;
}

@media (max-width: 980px) {
  .portal-hero,
  .axiom-card,
  .northgrid-dashboard,
  .smoke-heading {
    grid-template-columns: 1fr;
  }

  .about-story {
    grid-template-columns: 1fr;
  }

  .about-details {
    grid-template-columns: 1fr;
  }

  .about-profile {
    position: static;
  }

  .portal-hero {
    gap: 32px;
  }

  .portal-copy h1 {
    font-size: 4.75rem;
  }

  .portal-visual,
  .northgrid-copy,
  .northgrid-chart {
    min-height: 420px;
  }

  .axiom-card {
    min-height: auto;
  }

  .axiom-copy h2,
  .northgrid-copy h2 {
    font-size: 4.25rem;
  }

  .northgrid-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .career-contact,
  .career-grid,
  .proof-strip,
  .worked-place-grid,
  .career-links,
  .oss-grid,
  .proof-grid,
  .system-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-entry {
    grid-template-columns: 1fr;
  }

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

  .chapters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "crypto ai"
      "content content"
      "agentic security";
  }

  .chapters-grid .crypto-lane::after,
  .chapters-grid .ai-lane::after { display: none; }

  .system-map > .flow-art { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .flow-panel,
  .flow-panel.is-expanded {
    min-height: auto;
    padding: 0;
  }

  .flow-inner {
    width: 100%;
    min-height: auto;
  }

  .flow-title {
    font-size: 4.2rem;
  }

  .flow-copy {
    font-size: 1.05rem;
  }
}

@media (max-width: 760px) {
  .site-header,
  .contact-band,
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  nav a {
    padding-right: 0.42rem;
    padding-left: 0.42rem;
  }

  .portal-nav {
    top: 10px;
    right: 10px;
    left: 10px;
    width: auto;
    justify-content: center;
  }

  .portal-nav a {
    padding: 0.5rem 0.55rem;
  }

  .portal-start {
    gap: 24px;
  }

  .hero,
  .split,
  .project-grid,
  .note-grid,
  .link-grid,
  .status-board,
  .github-panel,
  .github-repos,
  .journey-list,
  .flow-grid,
  .crypto-grid,
  .oss-grid,
  .proof-grid,
  .system-map-grid,
  .game-entry,
  .career-contact,
  .career-grid,
  .proof-strip,
  .worked-place-grid,
  .career-split,
  .career-links,
  .cv-hero,
  .cv-item,
  .two-column {
    grid-template-columns: 1fr;
  }

  .experience-timeline article,
  .ats-header,
  .teaching-grid,
  .radar-grid,
  .rubric-grid,
  .audit-table [role="row"] {
    grid-template-columns: 1fr;
  }

  .role-focus .career-list {
    columns: 1;
  }

  .ats-actions,
  .teaching-nav {
    justify-content: flex-start;
  }

  .teaching-nav {
    position: static;
    margin-bottom: 2rem;
  }

  .proof-grid article {
    min-height: auto;
  }

  .github-live-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .game-entry-preview {
    min-height: 320px;
  }

  .game-preview-screen {
    min-height: 284px;
  }

  .about-intro {
    min-height: auto;
    padding-top: 88px;
    padding-bottom: 56px;
  }

  .about-profile h2 {
    font-size: 3.2rem;
  }

  .travel-map-heading {
    align-items: start;
    flex-direction: column;
  }

  .travel-map-editor {
    align-items: stretch;
    flex-direction: column;
  }

  .travel-map-actions {
    justify-content: space-between;
  }

  .bio-facts div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .portal-hero {
    min-height: auto;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .portal-copy h1 {
    font-size: 3.35rem;
  }

  .portal-lead,
  .northgrid-copy p {
    font-size: 1rem;
  }

  .portal-actions {
    width: 100%;
  }

  .engage-button {
    width: min(264px, 100%);
  }

  .portal-status,
  .portal-readout,
  .northgrid-metrics,
  .northgrid-panels {
    grid-template-columns: 1fr;
  }

  .portal-visual {
    min-height: 460px;
  }

  .portal-readout {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }

  .axiom-shell,
  .northgrid-page,
  .smoke-projects {
    padding: 32px 16px;
  }

  .axiom-card,
  .northgrid-dashboard,
  .northgrid-copy,
  .axiom-stack div,
  .smoke-shell {
    padding: 24px;
  }

  .axiom-copy h2,
  .northgrid-copy h2 {
    font-size: 3.4rem;
  }

  .axiom-actions {
    margin-top: 8px;
  }

  .northgrid-topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .northgrid-copy,
  .northgrid-chart {
    min-height: 340px;
  }

  .smoke-project-grid {
    grid-template-columns: 1fr;
  }

  .smoke-project-grid article {
    min-height: 210px;
  }

  .northgrid-chart {
    gap: 4px;
    padding: 16px;
  }

  .hero {
    min-height: auto;
  }

  h1 {
    font-size: clamp(3rem, 16vw, 5rem);
  }

  .flow-art {
    grid-template-columns: 1fr;
  }

  .chapters-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "crypto" "ai" "content" "agentic" "security";
    gap: 10px;
  }

  .chapters-grid .chapter-card { min-height: 130px; }
  .system-map > .flow-art { grid-template-columns: minmax(0, 1fr); }

  .flow-panel,
  .flow-panel.is-expanded,
  .flow-panel.is-expanded:last-child,
  .flow-panel:last-child {
    min-height: auto;
    padding: 0;
  }

  .flow-summary {
    min-height: 150px;
  }

  .flow-inner {
    width: 100%;
    min-height: auto;
    border-width: 2px;
    border-radius: 18px;
    padding: 1.25rem;
  }

  .flow-title {
    font-size: 2.45rem;
  }

  .flow-copy {
    font-size: 0.95rem;
  }

  .flow-grid-dense p {
    font-size: 0.84rem;
  }

  .cv-contact {
    align-items: flex-start;
    text-align: left;
  }

}

@media print {
  body,
  .cv-page,
  .ats-page,
  .teaching-page {
    background: white;
  }

  .site-header,
  .print-actions,
  .ats-actions,
  .teaching-nav {
    display: none;
  }

  .cv-shell,
  .ats-document,
  .teaching-document {
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .cv-section,
  .ats-document section,
  .teaching-section {
    break-inside: avoid;
    padding: 1rem 0;
  }

  a {
    text-decoration: none;
  }
}

/* Homepage themes keep the same content and layout while changing the palette. */
.home-page[data-theme="paper"] {
  --ink: #29251f;
  --muted: #6a6258;
  --line: rgba(63, 53, 41, 0.18);
  --panel: rgba(255, 252, 245, 0.88);
  --accent: #bc4829;
  --accent-dark: #a83c22;
  --warm: #b88123;
  --shadow: 0 18px 42px rgba(66, 52, 35, 0.12);
  background: #f3eee4;
  color: #29251f;
}

.home-page[data-theme="paper"]::before {
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.78), transparent 24rem),
    radial-gradient(circle at 14% 48%, rgba(188, 72, 41, 0.08), transparent 20rem),
    linear-gradient(180deg, rgba(243, 238, 228, 0.08), rgba(243, 238, 228, 0.58));
}

.home-page[data-theme="paper"] .site-header {
  border-color: rgba(63, 53, 41, 0.14);
  background: rgba(250, 247, 239, 0.84);
}

.home-page[data-theme="paper"] .portal-start {
  background: #f3eee4;
}

.home-page[data-theme="paper"] .portal-start::before {
  background:
    linear-gradient(rgba(63, 53, 41, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 53, 41, 0.045) 1px, transparent 1px);
}

.home-page[data-theme="paper"] .portal-nav a,
.home-page[data-theme="paper"] .theme-picker {
  color: #39332c;
}

.home-page[data-theme="paper"] .theme-picker {
  border-color: rgba(63, 53, 41, 0.2);
  background: rgba(63, 53, 41, 0.06);
}

.home-page[data-theme="paper"] .theme-options {
  background: #faf7ef;
  color: #29251f;
}

.home-page[data-theme="paper"] .theme-picker:hover,
.home-page[data-theme="paper"] .theme-picker:focus-visible {
  background: rgba(63, 53, 41, 0.1);
}

.home-page[data-theme="paper"] .portal-start,
.home-page[data-theme="paper"] .portal-hero,
.home-page[data-theme="paper"] .section-heading,
.home-page[data-theme="paper"] .proof-heading,
.home-page[data-theme="paper"] .about-profile,
.home-page[data-theme="paper"] .career-profile,
.home-page[data-theme="paper"] .chapters-grid article,
.home-page[data-theme="paper"] .career-grid article,
.home-page[data-theme="paper"] .career-split > section,
.home-page[data-theme="paper"] .experience-timeline article,
.home-page[data-theme="paper"] .oss-grid article,
.home-page[data-theme="paper"] .project-card,
.home-page[data-theme="paper"] .game-entry,
.home-page[data-theme="paper"] .proof-grid article,
.home-page[data-theme="paper"] .github-live {
  border-color: rgba(63, 53, 41, 0.16);
  background-color: rgba(255, 252, 245, 0.78);
  box-shadow: var(--shadow);
}

.home-page[data-theme="paper"] :is(h1, h2, h3, h4),
.home-page[data-theme="paper"] :is(span, strong, small, time, label),
.home-page[data-theme="paper"] .proof-grid h3,
.home-page[data-theme="paper"] .proof-grid a,
.home-page[data-theme="paper"] .site-footer,
.home-page[data-theme="paper"] .site-header,
.home-page[data-theme="paper"] .portal-nav a:hover {
  color: #29251f;
}

.home-page[data-theme="paper"] :is(p, li, .proof-last-commit, .proof-grid p, .proof-grid li) {
  color: #665e53;
}

.home-page[data-theme="paper"] .proof-grid li,
.home-page[data-theme="paper"] .proof-actions a {
  border-color: rgba(63, 53, 41, 0.15);
  background: rgba(63, 53, 41, 0.045);
}

.home-page[data-theme="paper"] .proof-grid .proof-commit-count,
.home-page[data-theme="paper"] .proof-actions a:first-child {
  border-color: rgba(184, 129, 35, 0.3);
  background: rgba(184, 129, 35, 0.1);
  color: #795313;
}

.home-page[data-theme="grove"] {
  --accent: #49b99a;
  --accent-dark: #42a98e;
  --warm: #e9c878;
  background: #07120f;
}

.home-page[data-theme="grove"]::before {
  background:
    radial-gradient(circle at 50% 15%, rgba(41, 112, 85, 0.24), transparent 24rem),
    radial-gradient(circle at 14% 48%, rgba(35, 146, 112, 0.16), transparent 20rem),
    linear-gradient(180deg, rgba(7, 18, 15, 0.06), rgba(7, 18, 15, 0.76));
}

.home-page[data-theme="grove"] .site-header {
  border-color: rgba(125, 207, 174, 0.18);
  background: rgba(7, 18, 15, 0.78);
}

.home-page[data-theme="grove"] .portal-start {
  background: #07120f;
}

.home-page[data-theme="grove"] .proof-grid article,
.home-page[data-theme="grove"] .github-live,
.home-page[data-theme="grove"] .about-profile,
.home-page[data-theme="grove"] .career-profile,
.home-page[data-theme="grove"] .chapters-grid article,
.home-page[data-theme="grove"] .career-grid article,
.home-page[data-theme="grove"] .career-split > section,
.home-page[data-theme="grove"] .experience-timeline article,
.home-page[data-theme="grove"] .oss-grid article,
.home-page[data-theme="grove"] .project-card,
.home-page[data-theme="grove"] .game-entry {
  border-color: rgba(125, 207, 174, 0.2);
  background-image: linear-gradient(135deg, rgba(125, 207, 174, 0.09), transparent 48%);
  background-color: rgba(13, 36, 29, 0.78);
}

.home-page[data-theme="grove"] .proof-grid .proof-commit-count,
.home-page[data-theme="grove"] .proof-actions a:first-child {
  border-color: rgba(125, 207, 174, 0.34);
  background: rgba(73, 185, 154, 0.12);
  color: #a4e3cd;
}

.home-page[data-theme="grove"] .proof-grid .proof-last-commit {
  color: rgba(216, 238, 228, 0.64);
}

@media (max-width: 760px) {
  .portal-nav .theme-picker {
    max-width: 6.2rem;
    padding-right: 1.35rem;
    padding-left: 0.5rem;
  }
}

@media (min-width: 761px) and (max-width: 960px) {
  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.portal-nav .quest-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 9px 4px 5px;
  border: 1px solid rgba(164, 160, 255, 0.35);
  background: rgba(119, 114, 232, 0.12);
}

.quest-play img {
  flex-shrink: 0;
}

.quest-play-copy {
  display: grid;
  gap: 3px;
  line-height: 1;
}

.quest-name {
  font-size: 0.6rem;
  letter-spacing: 0.02em;
}

.quest-action {
  font-size: 0.8rem;
}

.quest-action span {
  margin-left: 3px;
  font-size: 0.6rem;
}

.portal-nav .quest-play:hover {
  border-color: #a4a0ff;
  background: rgba(119, 114, 232, 0.25);
}

.portal-nav .pdf-cv {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(164, 160, 255, 0.35);
  background: rgba(119, 114, 232, 0.12);
  white-space: nowrap;
}

.pdf-cv svg {
  flex-shrink: 0;
}

.portal-nav .pdf-cv:hover {
  border-color: #a4a0ff;
  background: rgba(119, 114, 232, 0.25);
}

.portal-nav .pdf-cv:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.portal-nav > a,
.portal-nav .theme-picker,
.portal-nav .language-menu summary {
  backdrop-filter: blur(18px);
}

.home-page[data-theme="paper"] .portal-nav .pdf-cv {
  border-color: rgba(63, 53, 41, 0.2);
  background: rgba(250, 247, 239, 0.84);
}

.home-page[data-theme="paper"] .portal-nav .pdf-cv:hover {
  background: rgba(63, 53, 41, 0.1);
}

.home-page[data-theme="grove"] .portal-nav .pdf-cv {
  border-color: rgba(125, 207, 174, 0.35);
  background: rgba(7, 18, 15, 0.78);
}

.home-page[data-theme="grove"] .portal-nav .pdf-cv:hover {
  background: rgba(35, 146, 112, 0.25);
}

.github-live-card h4 a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.github-business-logo {
  display: inline-flex;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(160, 160, 180, 0.3);
  border-radius: 9px;
  background: rgba(160, 160, 180, 0.12);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}

.github-business-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 5px;
}

.language-menu {
  position: relative;
}

.language-menu summary {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.42rem 0.65rem;
  border: 1px solid rgba(160, 160, 180, 0.3);
  border-radius: 999px;
  background: rgba(160, 160, 180, 0.08);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
}

.language-menu summary::-webkit-details-marker {
  display: none;
}

.language-menu summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.language-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1;
  display: grid;
  width: 195px;
  padding: 8px;
  border: 1px solid rgba(160, 160, 180, 0.3);
  border-radius: 16px;
  background: #15131a;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.language-options p {
  margin: 8px 6px 4px;
  color: #b8b4c7;
  font-size: 0.68rem;
  line-height: 1.4;
}

.home-page[data-theme="paper"] .language-options {
  background: #faf7ef;
}

.home-page[data-theme="grove"] .language-options {
  background: #122c22;
}

@media (max-width: 480px) {
  .portal-nav {
    right: 8px;
    left: 8px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  .language-menu summary {
    padding-inline: 0.5rem;
  }
}

.travel-map-zoom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.travel-map-zoom output {
  min-width: 4ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.travel-map-zoom > span {
  color: var(--muted);
  font-size: 0.8rem;
}

.travel-map-canvas svg {
  aspect-ratio: 20 / 9;
}

.travel-map-canvas svg.is-zoomed {
  touch-action: pinch-zoom;
  cursor: grab;
}

.travel-map-canvas svg.is-zoomed:active,
.travel-map-canvas svg.is-zoomed:active #countries path {
  cursor: grabbing;
}

.home-page .language-options button {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  text-shadow: none;
  transform: none;
  cursor: pointer;
}

.home-page .language-options button::before,
.home-page .language-options button::after {
  display: none;
}

.home-page .language-options button:is(:hover, [aria-pressed="true"]) {
  background: rgba(150, 150, 150, 0.15);
  border-color: currentColor;
}

.home-page .language-options button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.language-options p:empty {
  display: none;
}

.travel-map-editor[hidden],
.travel-map-owner-controls button[hidden] {
  display: none;
}

.travel-map-owner-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.travel-map-auth {
  width: min(420px, calc(100% - 32px));
  padding: 24px;
  border: 1px solid #637b8b;
  border-radius: 18px;
  background: #101c26;
  color: #fff;
}

.travel-map-auth::backdrop {
  background: rgba(0, 0, 0, 0.65);
}

.travel-map-auth form {
  display: grid;
  gap: 12px;
}

.travel-map-auth h3,
.travel-map-auth p {
  margin: 0;
}

.travel-map-auth input {
  width: 100%;
  padding: 12px;
  border: 1px solid #637b8b;
  border-radius: 8px;
  background: #071018;
  color: #fff;
  font: inherit;
}

.travel-map-selected > span {
  padding: 6px 10px;
  border: 1px solid rgba(163, 202, 216, 0.25);
  border-radius: 999px;
  font-size: 0.8rem;
}

.travel-map-canvas svg[data-editing="false"] #countries path {
  cursor: inherit;
}

.home-page[data-theme="paper"] .travel-map-auth,
.home-page[data-theme="paper"] .travel-map-auth input {
  background: #faf7ef;
  color: #29251f;
}

.language-flag {
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(150, 150, 150, 0.35);
}

.home-page .language-options button {
  display: flex;
  align-items: center;
  gap: 8px;
}