:root {
  color-scheme: dark;
  --bg: #07090c;
  --surface: #0e1217;
  --surface-raised: #151b22;
  --ink: #ffffff;
  --muted: #a6b1bb;
  --faint: #6c7986;
  --line: #242c35;
  --accent: #ffd700;
  --accent-dim: #2b2405;
  --blue: #f5c518;
  --purple: #ffe57f;
  --on-accent: #000000;
  --accent-hover: #ffe44d;
  --accent-glow-55: rgba(255, 215, 0, 0.55);
  --accent-glow-18: rgba(255, 215, 0, 0.18);
  --accent-glow-12: rgba(255, 215, 0, 0.12);
  --accent-line-15: rgba(255, 215, 0, 0.15);
  --accent-wash-045: rgba(255, 215, 0, 0.045);
  --accent-glow-65: rgba(255, 215, 0, 0.65);
  --accent-halo-035: rgba(255, 215, 0, 0.035);
  --accent-halo-025: rgba(255, 215, 0, 0.025);
  --accent-wash-09: rgba(255, 215, 0, 0.09);
  --hero-glow: rgba(255, 215, 0, 0.08);
  --grid-line: rgba(255, 255, 255, 0.025);
  --art-grid-line: rgba(255, 215, 0, 0.05);
  --surface-glass: rgba(18, 22, 28, 0.94);
  --surface-glass-soft: rgba(10, 13, 17, 0.76);
  --terminal-glass: rgba(12, 16, 21, 0.95);
  --surface-overlay: rgba(14, 18, 23, 0.8);
  --surface-transparent: rgba(14, 18, 23, 0.65);
  --project-glass: rgba(18, 24, 30, 0.92);
  --project-glass-soft: rgba(11, 15, 20, 0.85);
  --black-shadow-28: rgba(0, 0, 0, 0.35);
  --black-shadow-35: rgba(0, 0, 0, 0.45);
  --black-shadow-45: rgba(0, 0, 0, 0.6);
  --accent-grid-muted: rgba(255, 215, 0, 0.2);
  --terminal-border: #333d47;
  --terminal-dot: #485663;
  --terminal-red: #ff5f56;
  --terminal-yellow: #ffbd2e;
  --terminal-green: #ffd700;
  --code-muted: #6c7986;
  --skill-border-hover: #b39700;
  --skill-status: #ffd700;
  --preview-start: #231e05;
  --preview-end: #0e1217;
  --preview-window-border: #4d4416;
  --preview-window-bg: #090c0f;
  --preview-window-line: #302b11;
  --preview-window-muted: #998a44;
  --tag-ink: #f0f3f5;
  --contact-decoration: rgba(255, 215, 0, 0.04);
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
  --page-width: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(ellipse at 76% 11%, var(--hero-glow), transparent 31rem),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 42px 42px, 42px 42px, auto;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body, button, a { -webkit-tap-highlight-color: transparent; }
main { flex: 1; }
button, a { color: inherit; }
a { text-decoration: none; }
button { font: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin-top: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.12; }
p { margin-bottom: 0; }
::selection { color: var(--bg); background: var(--accent); }

.section-shell { width: min(100% - var(--gutter) * 2, var(--page-width)); margin-inline: auto; }
.section-space { padding-block: clamp(5.5rem, 10vw, 8.5rem); }
.skip-link {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: 1rem;
  padding: 0.7rem 1rem;
  transform: translateY(-160%);
  background: var(--accent);
  color: var(--bg);
  font-weight: 800;
}
.skip-link:focus { transform: translateY(0); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { color: var(--bg); background: var(--accent); }

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