html, body { height: 100%; overflow: hidden; }
:root,
[data-theme="dark"] {
  --theme-bg: #09080B;
  --theme-page-bg: #16121A;
  --theme-card-bg: #16121A;
  --theme-accent-primary: #C2A06B;
  --theme-accent-secondary: #6F838E;
  --theme-text-primary: #F1EAE2;
  --theme-text-secondary: #B6AAA0;
  --theme-text-heading: #FBF5EE;
  --theme-border: #3A3138;
  --theme-glow: #C2A06B2E;
  --theme-glow-secondary: #6F838E24;
  --gh-surface: #11151A;
  --gh-tile-stroke: #2B3640;
  --gh-tile-0: #1A232A;
  --gh-tile-1: #263640;
  --gh-tile-2: #36505E;
  --gh-tile-3: #4A6C7E;
  --gh-tile-4: #6F838E;

  --page-bg: var(--theme-page-bg);
  --text-primary: var(--theme-text-primary);
  --text-muted: var(--theme-text-secondary);
  --border-subtle: var(--theme-border);
  --noise-op: 0.36;

  --card-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(194, 160, 107, 0.18);
  --card-hover-border: rgba(111, 131, 142, 0.45);
}
[data-theme="light"] {
  --theme-bg: #F7F2EC;
  --theme-page-bg: #FFFDF9;
  --theme-card-bg: #FFFDF9;
  --theme-accent-primary: #97663A;
  --theme-accent-secondary: #5F727E;
  --theme-text-primary: #231B17;
  --theme-text-secondary: #6D5F54;
  --theme-text-heading: #17110E;
  --theme-border: #D8C8B8;
  --theme-glow: #97663A1F;
  --theme-glow-secondary: #5F727E1A;
  --gh-surface: #FFFCF8;
  --gh-tile-stroke: #D9C9B8;
  --gh-tile-0: #F3E8DC;
  --gh-tile-1: #E4D0BA;
  --gh-tile-2: #CCAD8A;
  --gh-tile-3: #B5875B;
  --gh-tile-4: #97663A;

  --page-bg: var(--theme-page-bg);
  --text-primary: var(--theme-text-primary);
  --text-muted: var(--theme-text-secondary);
  --border-subtle: var(--theme-border);
  --noise-op: 0.11;

  --card-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  --card-hover-border: rgba(95, 114, 126, 0.4);
}
[data-theme="light"] body,
[data-theme="light"] body .page-inner {
  color: var(--text-primary);
}
body,
p,
li,
span,
div,
label,
input,
textarea,
button,
a {
  font-family: Outfit, system-ui, sans-serif;
}
.font-mono,
code,
pre {
  font-family: "IBM Plex Mono", monospace !important;
}
h1, h2, h3, h4, h5, h6, .font-display {
  font-family: "Cormorant Garamond", Georgia, serif;
}
.noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
.book-stage { perspective: 2000px; perspective-origin: 50% 42%; }
.preserve-3d { transform-style: preserve-3d; }
.page-sheet { transform-origin: left center; transform-style: preserve-3d; will-change: transform, opacity, filter; }
.page-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--page-bg);
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
html:not([data-theme="light"]) .page-face {
  background: rgba(22, 18, 26, 0.88);
  box-shadow: 0 25px 80px rgba(0,0,0,0.55), inset 0 0 80px #6F838E24;
}
[data-theme="light"] .page-face {
  background: rgba(255, 253, 249, 0.9);
  box-shadow: var(--tw-shadow-pageLight, 0 28px 90px rgba(28,25,23,0.08));
}
.page-edge {
  position: absolute; top: 0; right: 0; bottom: 0; width: 12px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.35));
  pointer-events: none; opacity: 0.55;
}
[data-theme="light"] .page-edge { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06)); opacity: 0.9; }
.ambient-line {
  position: fixed; font-family: 'IBM Plex Mono', monospace; font-size: 0.55rem;
  white-space: nowrap; pointer-events: none; z-index: 5;
  animation: drift 28s ease-in-out infinite;
}
html:not([data-theme="light"]) .ambient-line { color: rgba(111,131,142,0.22); }
[data-theme="light"] .ambient-line { color: rgba(95,114,126,0.15); }
@keyframes drift {
  0%, 100% { opacity: 0.2; transform: translate(0, 0); }
  50% { opacity: 0.5; transform: translate(10px, -15px); }
}
.ribbon-fill { transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
.magnetic {
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cover-cta-primary,
.cover-cta-secondary {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cover-cta-primary {
  box-shadow: 0 2px 0 rgba(28, 25, 23, 0.08);
}
[data-theme="light"] .cover-cta-primary:hover {
  box-shadow: 0 8px 24px rgba(28, 25, 23, 0.12), 0 0 0 1px #97663A1F;
  transform: translateY(-3px);
}
html:not([data-theme="light"]) .cover-cta-primary:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px #C2A06B2E;
  transform: translateY(-3px);
}
.cover-cta-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.glow-ring {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glow-ring:hover { box-shadow: 0 0 0 1px #6F838E24, 0 0 28px #C2A06B2E; }
[data-theme="light"] .glow-ring:hover { box-shadow: 0 0 0 1px #5F727E1A, 0 12px 32px #97663A1F; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.pipeline-shimmer {
  animation: shimmer 2.5s linear infinite;
  background: linear-gradient(90deg, transparent, #6F838E24, transparent);
  background-size: 200% 100%;
}
[data-theme="light"] .pipeline-shimmer {
  background: linear-gradient(90deg, transparent, #5F727E1A, transparent);
}
.experience-scroll {
  scrollbar-width: thin;
  scrollbar-color: #6F838E24 transparent;
  overflow-x: hidden;
  padding: 8px;
  margin: -8px;
}
.experience-scroll::-webkit-scrollbar { width: 5px; }
.experience-scroll::-webkit-scrollbar-thumb { background: rgba(111,131,142,0.25); border-radius: 99px; }
[data-theme="light"] .experience-scroll::-webkit-scrollbar-thumb { background: #5F727E1A; }
.experience-card {
  position: relative;
  isolation: isolate;
  padding: 24px;
  border-radius: 16px;
  background-clip: padding-box;
  transform: translate3d(0, 0, 0);
  will-change: transform, box-shadow, border-color;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px) {
  .experience-card { padding: 32px; }
}
.experience-card:hover,
.experience-card:focus-within {
  transform: translate3d(0, -3px, 0);
  border-color: var(--card-hover-border);
  box-shadow: var(--card-hover-shadow);
}
.experience-card h3 {
  font-size: 1.5rem;
  line-height: 1.3;
}
.experience-card p,
.experience-card li span {
  font-family: Outfit, system-ui, sans-serif;
}
.experience-card ul {
  margin-top: 1.75rem;
}
.experience-card ul li {
  font-size: 0.95rem;
  line-height: 1.75;
}
.page-inner a.group.block.rounded-2xl,
.page-inner a.group.rounded-2xl {
  background-clip: padding-box;
  transform: translate3d(0, 0, 0);
  will-change: transform, box-shadow, border-color, background-color;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-inner a.group.block.rounded-2xl:hover,
.page-inner a.group.block.rounded-2xl:focus-visible,
.page-inner a.group.rounded-2xl:hover,
.page-inner a.group.rounded-2xl:focus-visible {
  transform: translate3d(0, -4px, 0) scale(1.008);
  box-shadow: var(--card-hover-shadow);
  border-color: var(--card-hover-border);
}
.page-inner .rounded-2xl {
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.projects-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.projects-section .project-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(95, 114, 126, 0.3);
  background: linear-gradient(135deg, rgba(247, 242, 236, 0.92), rgba(255, 253, 249, 0.9));
  padding: 2rem;
  background-clip: padding-box;
  transform: translate3d(0, 0, 0);
  will-change: transform, box-shadow, border-color, background-color;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
html:not([data-theme="light"]) .projects-section .project-card {
  border-color: rgba(111, 131, 142, 0.28);
  background: linear-gradient(135deg, rgba(44, 37, 45, 0.7), rgba(9, 8, 11, 0.95));
}
.projects-section .project-card:hover,
.projects-section .project-card:focus-visible {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--card-hover-shadow);
  border-color: var(--card-hover-border);
}
.projects-section .project-card-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.projects-section .project-card:hover .project-card-inner,
.projects-section .project-card:focus-visible .project-card-inner {
  transform: perspective(900px) rotateY(-2deg);
}
.projects-section .project-card-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.55rem;
  color: #97663A;
}
html:not([data-theme="light"]) .projects-section .project-card-kicker {
  color: rgba(202, 170, 114, 0.9);
}
.projects-section .project-card-title {
  margin-top: 0.5rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.875rem;
  font-style: italic;
  line-height: 1.15;
  color: #303A40;
}
html:not([data-theme="light"]) .projects-section .project-card-title {
  color: #F1EAE2;
}
.projects-section .project-card-description {
  margin-top: 1rem;
  max-width: 42rem;
  color: #44403C;
}
html:not([data-theme="light"]) .projects-section .project-card-description {
  color: rgba(241, 234, 226, 0.78);
}
.projects-section .project-card-stack {
  margin-top: 1rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.55rem;
  color: rgba(95, 114, 126, 0.95);
}
html:not([data-theme="light"]) .projects-section .project-card-stack {
  color: rgba(111, 131, 142, 0.86);
}
#tocNav button {
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-inner a[aria-label] {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-inner a[aria-label]:hover {
  transform: translateY(-2px);
}
#codexAsk {
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#codexAsk:hover {
  transform: translateY(-1px);
}
#codexQ {
  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#codexClose {
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#github-years button {
  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-inner input,
.page-inner textarea {
  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#skillsCanvas {
  touch-action: none;
  transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#skillTooltip {
  pointer-events: none; opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 14rem; z-index: 200;
}
#skillTooltip.vis { opacity: 1; }
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #09080B;
  transition: opacity 0.85s cubic-bezier(0.76, 0, 0.24, 1), visibility 0.85s step-end;
}
[data-theme="light"] .page-loader {
  background: #F7F2EC;
}
.page-loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-pct {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(4rem, 18vw, 11rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  color: #F1EAE2;
}
[data-theme="light"] .loader-pct {
  color: #231B17;
}
.loader-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: rgba(241, 234, 226, 0.45);
  margin-bottom: 2rem;
}
[data-theme="light"] .loader-label {
  color: rgba(35, 27, 23, 0.45);
}
.loader-mark {
  margin-top: 2.5rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: #C2A06B2E;
}
[data-theme="light"] .loader-mark {
  color: #5F727E;
}

/* ── BG MOTION GRAPHICS ── */
#bgPulse {
  background: radial-gradient(ellipse 70% 55% at 50% 45%, rgba(95,114,126,0.08) 0%, transparent 70%);
  animation: bgBreath 8s ease-in-out infinite;
}
html:not([data-theme="light"]) #bgPulse {
  background: radial-gradient(ellipse 70% 55% at 50% 45%, rgba(194,160,107,0.07) 0%, transparent 70%);
}
@keyframes bgBreath {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

/* ── MOBILE & RESPONSIVE ── */
@media (max-width: 767px) {
  html, body { -webkit-text-size-adjust: 100%; }
  .book-stage { perspective: 1200px; }
  .page-inner { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.25rem 1rem; }
  .page-edge { width: 6px; }

  .experience-card { padding: 18px; }
  .experience-card h3 { font-size: 1.25rem; }
  .experience-card ul li { font-size: 0.88rem; line-height: 1.65; }
  .experience-scroll { padding: 6px; margin: -6px; }

  .projects-section .project-card { padding: 1.25rem; }
  .projects-section .project-card-title { font-size: 1.5rem; }

  #github-graph { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
  .book-stage { perspective: 900px; }
  .page-inner { padding: 1rem 0.75rem; }

  .experience-card { padding: 16px; border-radius: 12px; }
  .experience-card h3 { font-size: 1.15rem; }

  .projects-section .project-card { padding: 1rem; border-radius: 12px; }
  .projects-section .project-card-title { font-size: 1.35rem; }
  .projects-section .project-card-description { font-size: 0.9rem; }
}

@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .page-loader { padding-top: env(safe-area-inset-top); }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader { transition: opacity 0.2s ease; }
  .ambient-line, .noise-anim, #bgPulse { animation: none !important; }
  #netCanvas, #floatCanvas { display: none !important; }
  .page-sheet { transition: none !important; }
  .pipeline-shimmer { animation: none !important; opacity: 0.5; }
  .experience-card { transition: none !important; }
  .experience-card:hover, .experience-card:focus-within { transform: none !important; }
  .page-inner a.group.block.rounded-2xl,
  .page-inner a.group.rounded-2xl,
  .page-inner .rounded-2xl,
  #skillsCanvas { transition: none !important; }
  .projects-section .project-card,
  .projects-section .project-card-inner { transition: none !important; }
  .page-inner a.group.block.rounded-2xl:hover,
  .page-inner a.group.block.rounded-2xl:focus-visible,
  .page-inner a.group.rounded-2xl:hover,
  .page-inner a.group.rounded-2xl:focus-visible { transform: none !important; }
  .projects-section .project-card:hover,
  .projects-section .project-card:focus-visible,
  .projects-section .project-card:hover .project-card-inner,
  .projects-section .project-card:focus-visible .project-card-inner { transform: none !important; }
  .page-loader.done { transition: none; opacity: 0; visibility: hidden; }
  .magnetic, .cover-cta-primary, .cover-cta-secondary, .glow-ring,
  #tocNav button, .page-inner a[aria-label], #codexAsk, #codexQ,
  #codexClose, #github-years button, .page-inner input,
  .page-inner textarea { transition: none !important; }
}