:root {
  --ink: #e9f0ff;
  --muted: #91a2bb;
  --surface: #0d1829;
  --surface-light: #132238;
  --line: rgba(172, 198, 235, 0.14);
  --cyan: #68e4ff;
  --lime: #baff73;
  --red: #ff6176;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: #07111f;
  font-family: var(--sans);
  overflow-x: hidden;
}

body::before {
  position: fixed;
  z-index: -3;
  inset: 0;
  content: "";
  background:
    linear-gradient(rgba(81, 130, 192, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(81, 130, 192, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}
.noise { position: fixed; z-index: 5; inset: 0; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.glow { position: fixed; z-index: -2; width: 38rem; height: 38rem; border-radius: 50%; filter: blur(18px); opacity: .12; pointer-events: none; }
.glow-one { top: -19rem; left: -16rem; background: var(--cyan); }
.glow-two { right: -20rem; bottom: -10rem; background: #754cff; }

main { width: min(1160px, calc(100% - 48px)); margin: auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 32px 0 24px; }
.wordmark, .availability { color: var(--ink); text-decoration: none; font: 500 14px var(--mono); letter-spacing: -.4px; }
.wordmark-mark { color: var(--lime); margin-right: 6px; }
.availability { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.availability span { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }

.hero { padding: clamp(54px, 10vw, 140px) 0 110px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--cyan); font: 500 11px var(--mono); letter-spacing: .12em; }
.pulse-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(186,255,115,.5); animation: ping 1.8s infinite; }
@keyframes ping { 65% { box-shadow: 0 0 0 8px rgba(186,255,115,0); } 100% { box-shadow: 0 0 0 0 rgba(186,255,115,0); } }
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: clamp(35px, 7vw, 110px); }
h1, h2 { margin: 0; letter-spacing: -.075em; font-weight: 700; line-height: .99; }
h1 { max-width: 760px; font-size: clamp(54px, 7vw, 94px); }
h1 em, h2 em { color: var(--cyan); font-family: Georgia, serif; font-weight: 400; letter-spacing: -.1em; }
h1 span { color: var(--lime); }
.intro { max-width: 555px; margin: 31px 0; color: var(--muted); font-size: 17px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 13px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 5px; font: 700 12px var(--sans); letter-spacing: .01em; cursor: pointer; text-decoration: none; transition: transform .2s, background .2s, border-color .2s; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: #07111f; background: var(--lime); box-shadow: 0 0 26px rgba(186,255,115,.1); }
.button-primary:hover { background: #d1ff9f; }
.button-ghost { color: var(--ink); border-color: var(--line); background: rgba(13,24,41,.3); }
.button-ghost:hover { border-color: var(--cyan); background: rgba(104,228,255,.07); }

.terminal-card { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(135deg, rgba(17,34,57,.92), rgba(10,20,35,.74)); box-shadow: 0 18px 50px rgba(0,0,0,.21); }
.terminal-head { display: flex; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font: 10px var(--mono); }
.terminal-dots { display: flex; gap: 5px; }
.terminal-dots i { width: 7px; height: 7px; border-radius: 50%; background: #ff7181; }
.terminal-dots i:nth-child(2) { background: #ffd56a; }.terminal-dots i:last-child { background: #91e878; }
.terminal-body { padding: 22px 22px 19px; font: 11px/1.7 var(--mono); }
.terminal-body p { margin: 0; }.terminal-prompt { padding-right: 7px; color: var(--lime); }.terminal-output { margin-bottom: 14px !important; color: #a8b9d0; }
.terminal-output b { color: var(--cyan); }.tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }.tags li { padding: 1px 6px; border: 1px solid rgba(104,228,255,.25); border-radius: 3px; color: var(--cyan); }.cursor-line { color: var(--ink); }.cursor { display: inline-block; width: 7px; height: 13px; margin-left: 3px; vertical-align: -2px; background: var(--lime); animation: blink 1s step-end infinite; }@keyframes blink { 50% { opacity: 0; } }

.signal-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; margin: 0 calc((100vw - min(1160px, calc(100vw - 48px))) / -2); padding: 18px max(24px, calc((100vw - min(1160px, calc(100vw - 48px))) / 2)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #6c809d; font: 10px var(--mono); letter-spacing: .08em; white-space: nowrap; }.signal-strip i { flex: 0 0 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); }
.profile-section, .links-section, .game-section, .portfolio-section, .experience-section { padding: 128px 0; }.profile-section, .links-section, .portfolio-section { display: grid; grid-template-columns: .74fr 1.26fr; gap: 12vw; }.section-heading h2 { font-size: clamp(40px, 5vw, 66px); }.profile-content { align-self: end; }.profile-lead, .portfolio-lead { max-width: 580px; margin: 0 0 42px; font-size: clamp(18px, 2.15vw, 27px); line-height: 1.55; letter-spacing: -.03em; }.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }.stat-card { min-height: 130px; padding: 22px 15px 10px 0; border-right: 1px solid var(--line); }.stat-card:not(:first-child) { padding-left: 17px; }.stat-card:last-child { border: 0; }.stat-card strong { display: block; margin-bottom: 12px; color: var(--lime); font: 500 24px var(--mono); }.stat-card span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.portfolio-section { padding-top: 0; }.portfolio-content { min-width: 0; }.portfolio-lead { max-width: 650px; }.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.work-card { position: relative; min-height: 350px; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: rgba(13,24,41,.56); transition: transform .2s, border-color .2s, background .2s; }.work-card:hover { transform: translateY(-5px); border-color: rgba(104,228,255,.4); background: rgba(18,37,62,.66); }.featured-card { border-color: rgba(186,255,115,.3); background: linear-gradient(160deg, rgba(35,58,49,.43), rgba(13,24,41,.63)); }.card-number { display: block; color: var(--muted); font: 10px var(--mono); }.work-card h3 { margin: 24px 0 10px; font-size: 19px; letter-spacing: -.045em; }.work-card p { min-height: 76px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }.work-card ul { margin: 18px 0 0; padding: 0; list-style: none; }.work-card li { padding: 6px 0; border-top: 1px solid var(--line); color: #b8c9df; font: 9px var(--mono); letter-spacing: .035em; }.work-card li::before { margin-right: 7px; color: var(--cyan); content: "↳"; }.hardware-icon { display: grid; grid-template-columns: repeat(2, 9px); gap: 5px; width: 42px; height: 42px; margin-top: 35px; padding: 9px; border: 1px solid var(--cyan); border-radius: 5px; transform: rotate(45deg); }.hardware-icon i { display: block; border: 1px solid rgba(104,228,255,.75); }.terminal-mini { width: max-content; min-width: 112px; margin-top: 34px; color: var(--lime); font: 10px/1.55 var(--mono); }.terminal-mini span { color: var(--cyan); }.network-icon { position: relative; width: 65px; height: 42px; margin-top: 35px; }.network-icon::before, .network-icon::after { position: absolute; top: 20px; left: 11px; width: 44px; height: 1px; background: rgba(104,228,255,.6); content: ""; transform: rotate(25deg); }.network-icon::after { transform: rotate(-25deg); }.network-icon b { position: absolute; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(104,228,255,.6); }.network-icon b:nth-child(1) { left: 0; top: 16px; }.network-icon b:nth-child(2) { left: 27px; top: 0; }.network-icon b:nth-child(3) { right: 0; top: 16px; }.network-icon b:nth-child(4) { left: 27px; bottom: 0; }
.experience-section { padding-top: 5px; }.experience-card { display: grid; grid-template-columns: .55fr 1fr; gap: 42px; padding: clamp(27px, 5vw, 62px); border: 1px solid rgba(104,228,255,.25); border-radius: 10px; background: radial-gradient(circle at top right, rgba(104,228,255,.1), transparent 36%), rgba(13,24,41,.63); }.experience-label .eyebrow { margin-bottom: 20px; }.experience-duration { color: var(--lime); font: 500 12px var(--mono); letter-spacing: .1em; }.experience-copy h2 { font-size: clamp(34px, 4vw, 55px); }.experience-copy p { max-width: 590px; margin: 25px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }.experience-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 7px; margin-top: -12px; }.experience-tags span { padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px; color: #a7b8cf; font: 9px var(--mono); letter-spacing: .05em; }
.links-section { padding-top: 42px; }.compact { align-self: start; }.link-list { border-top: 1px solid var(--line); }.link-list a { display: grid; grid-template-columns: 55px 1fr auto; align-items: center; min-height: 76px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 18px; text-decoration: none; transition: padding .2s, color .2s, background .2s; }.link-list a:hover { padding: 0 13px; color: var(--cyan); background: rgba(104,228,255,.035); }.link-index { color: var(--muted); font: 10px var(--mono); }.link-list b { font-size: 22px; font-weight: 400; }

.game-section { padding-top: 50px; }.game-intro { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding-bottom: 48px; }.game-open { flex: 0 0 auto; }.game-panel { padding: 18px; border: 1px solid rgba(104,228,255,.24); border-radius: 10px; background: rgba(10,24,41,.85); box-shadow: 0 0 60px rgba(0,0,0,.28), inset 0 0 44px rgba(104,228,255,.025); }.game-panel[hidden] { display: none; }.game-head { display: flex; justify-content: space-between; gap: 20px; padding: 2px 3px 17px; }.game-kicker { margin: 0 0 8px; color: var(--cyan); font: 500 12px var(--mono); letter-spacing: .08em; }.game-kicker span { color: var(--muted); }.game-instruction { margin: 0; color: var(--muted); font-size: 11px; }.mobile-instruction { display: none; }kbd { padding: 1px 4px; border: 1px solid #607594; border-radius: 3px; color: #d6e6ff; font: 10px var(--mono); }.icon-button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: transparent; font-size: 21px; line-height: 1; cursor: pointer; }.icon-button:hover { color: var(--ink); border-color: var(--cyan); }.game-shell { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #06101d; }.hud { position: absolute; z-index: 2; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; pointer-events: none; }.hud div { display: flex; flex-direction: column; gap: 3px; }.hud span { color: #7f95b4; font: 9px var(--mono); letter-spacing: .1em; }.hud strong { color: var(--ink); font: 500 16px var(--mono); }.hud div:last-child { text-align: right; }.hud div:last-child strong { color: var(--lime); font-size: 12px; letter-spacing: 1px; }canvas { display: block; width: 100%; height: auto; aspect-ratio: 760 / 420; }.game-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; background: rgba(5,14,26,.56); backdrop-filter: blur(2px); }.game-overlay p { margin: 0; color: var(--cyan); font: 500 clamp(22px, 4vw, 34px) var(--mono); letter-spacing: .12em; text-shadow: 0 0 28px var(--cyan); }.game-overlay span { margin-bottom: 5px; color: var(--muted); font-size: 12px; }.game-overlay.is-hidden { display: none; }.touch-controls { display: none; justify-content: center; gap: 12px; padding: 18px 0 2px; }.touch-controls button { min-width: 64px; min-height: 46px; padding: 0 16px; border: 1px solid rgba(104,228,255,.3); border-radius: 5px; color: var(--ink); background: #102036; font: 600 14px var(--mono); touch-action: manipulation; }.touch-controls button:active { transform: scale(.95); color: #07111f; background: var(--cyan); }
footer { display: flex; justify-content: space-between; padding: 29px 0 38px; border-top: 1px solid var(--line); color: var(--muted); font: 10px var(--mono); }footer p { margin: 0; }footer a { color: var(--cyan); text-decoration: none; }

@media (max-width: 760px) { main { width: min(100% - 32px, 600px); }.topbar { padding-top: 21px; }.availability { font-size: 9px; }.hero { padding: 60px 0 76px; }.hero-grid, .profile-section, .links-section, .portfolio-section { grid-template-columns: 1fr; gap: 43px; }.terminal-card { max-width: 480px; }.intro { font-size: 15px; }.signal-strip { margin: 0 -16px; padding: 15px 16px; justify-content: flex-start; }.signal-strip span:nth-of-type(n+5), .signal-strip i:nth-of-type(n+5) { display: none; }.profile-section, .links-section, .game-section, .portfolio-section, .experience-section { padding: 80px 0; }.profile-section { gap: 34px; }.profile-lead, .portfolio-lead { margin-bottom: 32px; }.stat-card { min-height: 112px; }.portfolio-section { padding-top: 0; }.portfolio-grid { grid-template-columns: 1fr; }.work-card { min-height: 0; }.work-card p { min-height: 0; }.experience-section { padding-top: 0; }.experience-card { display: block; padding: 28px 22px; }.experience-copy h2 { margin-top: 42px; }.experience-tags { margin-top: 28px; }.links-section { padding-top: 0; }.game-section { padding-top: 32px; }.game-intro { display: block; padding-bottom: 30px; }.game-open { width: 100%; margin-top: 29px; }.game-panel { margin: 0 -8px; padding: 12px; }.desktop-instruction { display: none; }.mobile-instruction, .touch-controls { display: flex; }.mobile-instruction { display: block; max-width: 240px; line-height: 1.5; }.game-head { padding-bottom: 12px; }.hud { top: 11px; left: 11px; right: 11px; }.hud strong { font-size: 12px; }.hud span { font-size: 7px; }.hud div:last-child strong { font-size: 9px; }.game-overlay span { font-size: 10px; }footer { padding-top: 25px; }.link-list a { min-height: 67px; font-size: 17px; } }
@media (max-width: 390px) { .availability { font-size: 0; }.availability span { margin: 0; }.stat-card { padding-right: 7px; }.stat-card:not(:first-child) { padding-left: 8px; }.stat-card strong { font-size: 20px; }.stat-card span { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }