/* AVA.SPRITE — cyberpunk pixel terminal */

:root {
  --bg-deep: #020914;
  --cyan: #36f5ff;
  --cyan-dim: #178bb8;
  --magenta: #ff2fb3;
  --magenta-deep: #9b1d70;
  --purple: #6338ff;
  --purple-deep: #091a3a;
  --orange: #ffcc4d;
  --yellow: #f6ff7a;
  --term-green: #a8eaff;
  --term-green-dim: #1c6f9a;
  --term-bg: #082d46;
  --term-bg-dark: #031321;
  --frame-cyan: #36f5ff;
  --frame-mag: #ff2fb3;
  --card: #071d32;
  /* Readable copy: slightly muted vs full neon UI */
  --text-body: #c4e2f0;
  --text-body-soft: #a8ccdd;
  --text-heading-soft: #dff4fc;
  --text-crisp-shadow: 0 1px 0 rgba(0, 0, 0, 0.85), 0 2px 4px rgba(0, 0, 0, 0.45);
}

body.theme-amber {
  --cyan: #ffb84d;
  --cyan-dim: #b87820;
  --term-green: #ffe4b0;
  --term-green-dim: #8a6020;
  --term-bg: #2a1a08;
  --term-bg-dark: #120a04;
  --frame-cyan: #ffb84d;
  --text-body: #e8d4b8;
  --text-body-soft: #c9b896;
  --text-heading-soft: #fff0d0;
}
body.theme-green {
  --cyan: #44ff88;
  --cyan-dim: #1a9955;
  --magenta: #66ffcc;
  --term-green: #b8ffd4;
  --term-green-dim: #1a6644;
  --term-bg: #062818;
  --term-bg-dark: #021408;
  --frame-cyan: #44ff88;
  --frame-mag: #66ffcc;
  --text-body: #b8e8c8;
  --text-body-soft: #98c8a8;
  --text-heading-soft: #e0ffe8;
}
body.theme-mono {
  --cyan: #c8d0d8;
  --cyan-dim: #687078;
  --magenta: #e8ecf0;
  --term-green: #d8e0e8;
  --term-green-dim: #505860;
  --term-bg: #141820;
  --term-bg-dark: #080a0e;
  --frame-cyan: #c8d0d8;
  --frame-mag: #9098a0;
  --text-body: #b0b8c0;
  --text-body-soft: #9098a0;
  --text-heading-soft: #e8ecf0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--bg-deep);
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: var(--term-green);
  -webkit-font-smoothing: none;
}
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ===== BACKGROUND + CRT ===== */
.bg-parallax {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  will-change: transform;
  transform-origin: center center;
}
.bg-parallax canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#bg-sky {
  z-index: 0;
  pointer-events: none;
}
#bg-city3d {
  z-index: 1;
  pointer-events: none;
}
.bg-parallax #bg {
  z-index: 2;
}
#bg-fx {
  z-index: 3;
  pointer-events: none;
}

.scanlines {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.09) 3px,
    rgba(0,0,0,0) 4px
  );
}
.scanlines::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(54,245,255,0.018) 50%, transparent 100%);
  animation: scan 8s linear infinite;
}
@keyframes scan { 0% { transform: translateY(-100%);} 100% { transform: translateY(100%);} }
.vignette {
  position: fixed; inset: 0; z-index: 49; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(2,9,20,0.76) 100%);
}

/* ===== Minimize toggle ===== */
.scanlines, .vignette { pointer-events: none; }
.minimize-btn {
  position: fixed; top: 14px; right: 14px; z-index: 9999;
  display: flex; align-items: center; gap: 8px;
  background: rgba(3, 13, 26, 0.86);
  border: 2px solid var(--cyan);
  color: var(--cyan);
  padding: 10px 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px; letter-spacing: 1.5px;
  cursor: pointer;
  text-shadow: 0 0 6px rgba(54,245,255,0.8);
  box-shadow: 0 0 16px rgba(54,245,255,0.45), 0 0 0 1px #000;
  transition: all 0.15s;
}
.minimize-btn:hover { color: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 16px rgba(246,255,122,0.5); transform: translateY(-1px); }
.minimize-btn .mb-icon { width: 12px; height: 12px; border: 2px solid currentColor; box-shadow: inset 0 0 4px currentColor; }
.minimize-btn.is-min .mb-icon { background: currentColor; }
.minimize-btn.is-min { color: var(--magenta); border-color: var(--magenta); text-shadow: 0 0 6px rgba(255,47,179,0.6); box-shadow: 0 0 12px rgba(255,47,179,0.35); }
.minimize-btn.is-min:hover { color: var(--yellow); border-color: var(--yellow); }

.theme-btn {
  position: fixed; top: 14px; right: 148px; z-index: 9999;
  display: flex; align-items: center; gap: 8px;
  background: rgba(3, 13, 26, 0.86);
  border: 2px solid var(--magenta);
  color: var(--magenta);
  padding: 10px 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px; letter-spacing: 1px;
  cursor: pointer;
  text-shadow: 0 0 6px rgba(255,47,179,0.6);
  box-shadow: 0 0 12px rgba(255,47,179,0.35), 0 0 0 1px #000;
  transition: all 0.15s;
}
.theme-btn:hover { color: var(--yellow); border-color: var(--yellow); transform: translateY(-1px); }
.theme-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}
body.theme-amber .theme-dot { background: #ffb84d; box-shadow: 0 0 8px #ffb84d; }
body.theme-green .theme-dot { background: #44ff88; box-shadow: 0 0 8px #44ff88; }
body.theme-mono .theme-dot { background: #c8d0d8; box-shadow: 0 0 8px #c8d0d8; }

.weather-btn {
  position: fixed; top: 14px; right: 300px; z-index: 9999;
  display: flex; align-items: center; gap: 8px;
  background: rgba(3, 13, 26, 0.86);
  border: 2px solid var(--yellow);
  color: var(--yellow);
  padding: 10px 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px; letter-spacing: 1px;
  cursor: pointer;
  text-shadow: 0 0 6px rgba(246,255,122,0.5);
  box-shadow: 0 0 12px rgba(246,255,122,0.3), 0 0 0 1px #000;
  transition: all 0.15s;
}
.weather-btn:hover { color: var(--cyan); border-color: var(--cyan); transform: translateY(-1px); }
.weather-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #5a6675;
  box-shadow: none;
}
.weather-btn.wx-rain .weather-dot { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.weather-btn.wx-snow .weather-dot { background: #eafcff; box-shadow: 0 0 8px #eafcff; }
.weather-btn.wx-wind .weather-dot { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.weather-btn.wx-fog .weather-dot { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }

.city-speed {
  position: fixed; top: 66px; right: 14px; z-index: 9999;
  width: 190px;
  display: grid; grid-template-columns: 1fr auto; gap: 7px 8px; align-items: center;
  background: rgba(3, 13, 26, 0.84);
  border: 2px solid var(--purple);
  padding: 9px 10px;
  box-shadow: 0 0 14px rgba(40,85,125,0.42), inset 0 0 10px rgba(54,245,255,0.08);
  font-family: 'Share Tech Mono', monospace;
  color: var(--cyan);
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.city-speed label {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--yellow);
  text-shadow: 0 0 5px rgba(246,255,122,0.35);
}
.city-speed span {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--magenta);
  text-shadow: 0 0 5px rgba(255,47,179,0.45);
}
.city-speed input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--cyan);
  cursor: pointer;
}

.arcade-hud button {
  border: 1px solid rgba(54,245,255,0.45);
  background: rgba(0,0,0,0.34);
  color: var(--cyan);
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  letter-spacing: 0.8px;
  padding: 6px 5px;
  cursor: pointer;
}
.arcade-hud button:hover {
  border-color: var(--yellow);
  color: var(--yellow);
  box-shadow: 0 0 10px rgba(246,255,122,0.24);
}

.env-hud {
  position: fixed; top: 140px; right: 14px; z-index: 9999;
  width: 190px;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(3, 13, 26, 0.84);
  border: 2px solid var(--cyan-dim);
  padding: 8px 10px;
  box-shadow: 0 0 12px rgba(54,245,255,0.25), inset 0 0 8px rgba(54,245,255,0.06);
  font-family: 'Share Tech Mono', monospace;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

body.skyline-mode .city-speed,
body.skyline-mode .env-hud {
  opacity: 1;
  transform: translateX(0);
}
body.skyline-mode .city-speed {
  pointer-events: auto;
}
.env-phase {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--yellow);
  text-shadow: 0 0 6px rgba(246,255,122,0.45);
}
.env-phosphor {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(54,245,255,0.5);
  margin-top: 2px;
}

.bg-parallax.theme-sweep::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(54, 245, 255, 0.22) 48%,
    rgba(54, 245, 255, 0.38) 50%,
    rgba(54, 245, 255, 0.22) 52%,
    transparent 100%
  );
  animation: theme-sweep 0.65s ease-out forwards;
  mix-blend-mode: screen;
}
@keyframes theme-sweep {
  0% { transform: translateY(-100%); opacity: 0.9; }
  100% { transform: translateY(100%); opacity: 0; }
}
body.theme-amber .bg-parallax.theme-sweep::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 184, 77, 0.2) 48%,
    rgba(255, 184, 77, 0.35) 50%,
    rgba(255, 184, 77, 0.2) 52%,
    transparent 100%
  );
}
body.theme-green .bg-parallax.theme-sweep::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(68, 255, 136, 0.18) 48%,
    rgba(68, 255, 136, 0.32) 50%,
    rgba(68, 255, 136, 0.18) 52%,
    transparent 100%
  );
}
body.theme-mono .bg-parallax.theme-sweep::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(200, 208, 216, 0.15) 48%,
    rgba(200, 208, 216, 0.28) 50%,
    rgba(200, 208, 216, 0.15) 52%,
    transparent 100%
  );
}

/* Boot sequence */
.boot-screen {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: #010408;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
.boot-screen.is-done {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.boot-inner {
  width: min(640px, 92vw);
  padding: 24px;
  border: 2px solid var(--cyan-dim);
  background: rgba(3, 12, 24, 0.96);
  box-shadow: 0 0 40px rgba(54,245,255,0.15), inset 0 0 30px rgba(0,0,0,0.5);
}
.boot-logo {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  color: var(--cyan);
  letter-spacing: 3px;
  margin-bottom: 16px;
  text-shadow: 0 0 12px rgba(54,245,255,0.7);
  animation: boot-pulse 1.2s steps(2) infinite;
}
@keyframes boot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}
.boot-log {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  line-height: 1.55;
  color: var(--term-green);
  min-height: 180px;
  white-space: pre-wrap;
  margin-bottom: 12px;
}
.boot-bar-wrap {
  height: 6px;
  background: rgba(54,245,255,0.12);
  border: 1px solid rgba(54,245,255,0.25);
}
.boot-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan), var(--magenta));
  box-shadow: 0 0 8px rgba(54,245,255,0.6);
  transition: width 0.15s linear;
}
.boot-skip {
  margin-top: 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #537b8d;
  letter-spacing: 1px;
  text-align: center;
}

/* Project detail modal */
.prj-modal-backdrop {
  position: fixed; inset: 0; z-index: 8000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(2, 9, 20, 0.72);
  backdrop-filter: blur(4px);
  animation: modal-in 0.2s ease;
}
@keyframes modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.prj-modal {
  width: min(560px, 96vw);
  max-height: 85vh;
  overflow: auto;
  border: 2px solid var(--magenta);
  background: var(--term-bg-dark);
  box-shadow: 0 0 30px rgba(255,47,179,0.35), 4px 4px 0 var(--magenta-deep);
  padding: 16px;
}
.prj-modal-hd {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  margin-bottom: 12px;
}
.prj-modal-hd h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: var(--cyan);
  line-height: 1.5;
  text-shadow: var(--text-crisp-shadow), 2px 2px 0 var(--magenta-deep);
}
.prj-modal-close {
  flex: 0 0 auto;
  background: transparent;
  border: 2px solid var(--cyan);
  color: var(--cyan);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  padding: 6px 8px;
  cursor: pointer;
}
.prj-modal-close:hover { border-color: var(--yellow); color: var(--yellow); }
.prj-modal-body p {
  font-family: 'Share Tech Mono', monospace;
  font-size: 17px;
  color: var(--text-body);
  line-height: 1.5;
  margin-bottom: 12px;
}
.prj-modal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.prj-modal-chips span {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 3px 6px;
  border: 1px solid var(--yellow);
  color: var(--yellow);
}
.prj-modal-foot {
  margin-top: 14px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  color: #537b8d;
}
.prj-modal-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
.prj-modal-actions a,
.prj-modal-actions button {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 8px 10px;
  border: 2px solid var(--cyan);
  background: rgba(3, 13, 26, 0.6);
  color: var(--cyan);
  text-decoration: none;
  cursor: pointer;
}
.prj-modal-actions a:hover,
.prj-modal-actions button:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}
.term-screen.view-glitch {
  animation: view-glitch 0.22s steps(2) 1;
}
@keyframes view-glitch {
  0% { filter: none; transform: translate(0); }
  25% { filter: hue-rotate(90deg) contrast(1.2); transform: translate(-2px, 1px); }
  50% { filter: none; transform: translate(2px, -1px); }
  75% { filter: saturate(1.4); transform: translate(-1px, 0); }
  100% { filter: none; transform: translate(0); }
}
.terminal-lines pre,
.terminal-pre {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  line-height: 1.35;
  color: var(--term-green);
  white-space: pre;
  margin: 8px 0;
}
.prj { cursor: pointer; }
.prj:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* Overdrive (Konami / matrix command) */
body.overdrive-mode .scanlines::after { animation-duration: 2s; opacity: 1.2; }
body.overdrive-mode .vignette {
  background: radial-gradient(ellipse at center, transparent 35%, rgba(255,47,179,0.15) 100%);
}
body.overdrive-mode .term-screen {
  box-shadow: inset 0 0 40px rgba(255,47,179,0.12), 0 0 24px rgba(54,245,255,0.25);
}
body.overdrive-mode::before {
  content: "";
  position: fixed; inset: 0; z-index: 48; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(54,245,255,0.03) 0,
    rgba(54,245,255,0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: matrix-drift 8s linear infinite;
}
@keyframes matrix-drift {
  0% { transform: translateY(0); }
  100% { transform: translateY(12px); }
}
.overdrive-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 10001;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--magenta);
  background: rgba(3, 13, 26, 0.92);
  border: 2px solid var(--magenta);
  padding: 10px 16px;
  box-shadow: 0 0 20px rgba(255,47,179,0.45);
  animation: toast-pop 0.35s ease;
}
@keyframes toast-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== ADMIN CONTENT EDITOR ===== */
.admin-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: rgba(3, 13, 26, 0.95);
  border-bottom: 2px solid var(--yellow);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
}
.admin-bar-label {
  color: var(--yellow);
  letter-spacing: 1px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
}
.admin-bar-hint {
  color: var(--text-dim);
  flex: 1;
}
.admin-bar-actions {
  display: flex;
  gap: 8px;
}
.admin-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.5px;
  padding: 8px 12px;
  border: 1px solid var(--cyan);
  background: rgba(0, 199, 229, 0.12);
  color: var(--cyan);
  cursor: pointer;
}
.admin-btn:hover {
  background: rgba(0, 199, 229, 0.22);
  box-shadow: 0 0 12px rgba(0, 199, 229, 0.25);
}
.admin-btn-ghost {
  border-color: var(--text-dim);
  color: var(--text-dim);
  background: transparent;
}
.admin-login-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10003;
  display: grid;
  place-items: center;
  background: rgba(2, 8, 18, 0.72);
  backdrop-filter: blur(4px);
}
.admin-login-backdrop[hidden] {
  display: none;
}
.admin-login {
  width: min(420px, 92vw);
  padding: 22px;
  border: 2px solid var(--magenta);
  background: rgba(3, 13, 26, 0.96);
  box-shadow: 0 0 30px rgba(255, 47, 179, 0.25);
}
.admin-login-hd {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--magenta);
  margin-bottom: 10px;
}
.admin-login-copy {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.admin-login label {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.admin-login label span {
  font-size: 11px;
  color: var(--cyan);
  letter-spacing: 1px;
}
.admin-login input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0, 199, 229, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
}
.admin-login-error {
  color: #ff6b6b;
  font-size: 12px;
  margin-bottom: 10px;
}
.admin-login-actions {
  display: flex;
  gap: 8px;
}
body.admin-edit-mode {
  padding-top: 46px;
}
body.admin-edit-mode [data-edit].is-editing {
  outline: 1px dashed rgba(255, 230, 109, 0.55);
  outline-offset: 2px;
  cursor: text;
}
body.admin-edit-mode [data-edit].is-editing:focus {
  outline-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(255, 230, 109, 0.15);
}

.stage { transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease; }
.stage.minimized { opacity: 0; transform: scale(0.92) translateY(20px); filter: blur(6px); pointer-events: none; }

/* ===== STAGE ===== */
.stage {
  position: relative; z-index: 10;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.unit {
  position: relative;
  width: var(--win-w, min(1320px, 96vw));
  height: var(--win-h, min(820px, 94vh));
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  /* --win-x/--win-y are the drag offset, applied as the OUTERMOST transform so
     the move tracks the cursor 1:1 despite the perspective tilt. */
  transform:
    translate3d(var(--win-x, 0px), var(--win-y, 0px), 0)
    perspective(1800px) rotateX(calc(5deg + var(--tilt-x))) rotateY(calc(-7deg + var(--tilt-y)));
  transform-style: preserve-3d;
  filter:
    drop-shadow(0 30px 40px rgba(255, 63, 166, 0.18))
    drop-shadow(0 0 24px rgba(54,245,255,0.22));
}

/* ===== DRAGGABLE / RESIZABLE WINDOW ===== */
/* The chrome bar is the drag handle (desktop only). */
.unit.win-enabled .term-chrome {
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.unit.win-dragging .term-chrome { cursor: grabbing; }
.unit.win-dragging,
.unit.win-resizing { user-select: none; }

/* Smooth ease back to default on reset (double-click the chrome bar). */
.unit.win-resetting {
  transition: transform 0.35s ease, width 0.35s ease, height 0.35s ease;
}

/* Eight resize handles — hidden until the desktop gate enables the window. */
.win-handle {
  position: absolute;
  z-index: 6;
  display: none;
  touch-action: none;
}
.unit.win-enabled .win-handle { display: block; }

/* A faint neon nub appears on hover/drag so the frame stays clean at rest. */
.win-handle::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
  background: var(--cyan, #36f5ff);
  box-shadow: 0 0 8px var(--cyan, #36f5ff);
}
.win-handle:hover::after,
.unit.win-resizing .win-handle::after { opacity: 0.5; }

/* Corner handles: small squares that overhang the frame slightly. */
.win-handle-ne, .win-handle-nw, .win-handle-se, .win-handle-sw {
  width: 18px; height: 18px;
}
.win-handle-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.win-handle-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.win-handle-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.win-handle-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
/* Corner nubs read as little L-brackets rather than full squares. */
.win-handle-nw::after, .win-handle-ne::after,
.win-handle-se::after, .win-handle-sw::after { inset: auto; width: 10px; height: 10px; }
.win-handle-nw::after { top: 6px; left: 6px; }
.win-handle-ne::after { top: 6px; right: 6px; }
.win-handle-se::after { bottom: 6px; right: 6px; }
.win-handle-sw::after { bottom: 6px; left: 6px; }

/* Edge handles: thin strips inset from the corners. */
.win-handle-n, .win-handle-s { left: 18px; right: 18px; height: 12px; cursor: ns-resize; }
.win-handle-e, .win-handle-w { top: 18px; bottom: 18px; width: 12px; cursor: ew-resize; }
.win-handle-n { top: -6px; }
.win-handle-s { bottom: -6px; }
.win-handle-w { left: -6px; }
.win-handle-e { right: -6px; }
.win-handle-n::after, .win-handle-s::after { left: 30%; right: 30%; top: 4px; bottom: 4px; }
.win-handle-e::after, .win-handle-w::after { top: 30%; bottom: 30%; left: 4px; right: 4px; }

/* ===== LEFT PANEL ===== */
.left {
  background:
    radial-gradient(ellipse at 30% 12%, rgba(54,245,255,0.16), transparent 34%),
    linear-gradient(180deg, rgba(8,45,70,0.96) 0%, rgba(5,26,46,0.98) 54%, rgba(3,11,23,0.98) 100%);
  border: 3px solid var(--frame-cyan);
  box-shadow:
    inset 0 0 0 1px #020914,
    inset 0 0 28px rgba(54, 245, 255, 0.11),
    inset 0 0 48px rgba(21, 141, 255, 0.14),
    0 0 0 3px #020914,
    0 0 22px rgba(54,245,255,0.28);
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  overflow: hidden;
}
/* L-bracket corners */
.corner {
  position: absolute; width: 14px; height: 14px;
  border-color: var(--magenta);
  border-style: solid;
  z-index: 2;
}
.corner.tl { top: 6px; left: 6px; border-width: 2px 0 0 2px; }
.corner.tr { top: 6px; right: 6px; border-width: 2px 2px 0 0; }
.corner.bl { bottom: 6px; left: 6px; border-width: 0 0 2px 2px; }
.corner.br { bottom: 6px; right: 6px; border-width: 0 2px 2px 0; }

/* portrait */
.portrait {
  background: linear-gradient(180deg, rgba(9,49,75,0.9) 0%, rgba(3,19,33,0.96) 100%);
  border: 2px solid var(--frame-cyan);
  padding: 14px 10px 12px;
  text-align: center;
  box-shadow: inset 0 0 12px rgba(54,245,255,0.18);
  position: relative;
}
.portrait::before {
  content: ""; position: absolute; top: -1px; right: -1px;
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-top: 14px solid var(--frame-cyan);
}
.avatar {
  width: 120px; height: 120px; margin: 0 auto;
  border: 1px solid rgba(54,245,255,0.4);
  background: #020914;
  display: block;
  position: relative;
  box-shadow: 0 0 10px rgba(54,245,255,0.35);
  flex: 0 0 auto;
  max-width: 120px;
  max-height: 120px;
  overflow: hidden;
}
.avatar canvas { width: 100%; height: 100%; display: block; }

/* Photo avatar with synthwave animations */
.avatar-photo {
  overflow: hidden;
  position: relative;
  animation: avatar-float 4s ease-in-out infinite, avatar-glow 3.5s ease-in-out infinite;
}
.avatar-img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  image-rendering: pixelated;
  filter: saturate(1.1) contrast(1.05);
}
.avatar-photo:hover .avatar-img { animation: avatar-glitch 0.45s steps(2) infinite; }
.avatar-visor {
  position: absolute;
  /* Aligns with the visor band on the sprite (~38-46% down) */
  left: 18%; right: 18%;
  top: 38%; height: 9%;
  background: linear-gradient(90deg,
    rgba(54,245,255,0) 0%,
    rgba(54,245,255,0.35) 20%,
    rgba(246,255,122,0.45) 50%,
    rgba(255,47,179,0.4) 80%,
    rgba(54,245,255,0) 100%);
  mix-blend-mode: screen;
  animation: visor-sweep 2.4s linear infinite;
  pointer-events: none;
}
.avatar-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.18) 2px 3px);
}
.avatar-scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px;
  background: linear-gradient(180deg, transparent, rgba(54,245,255,0.45), transparent);
  animation: avatar-scanline 3s linear infinite;
}
.avatar-blink {
  position: absolute; left: 30%; right: 30%;
  top: 41%; height: 4%;
  background: rgba(20, 5, 35, 0.85);
  transform: scaleY(0);
  transform-origin: center;
  animation: avatar-blink 5.5s steps(1) infinite;
  pointer-events: none;
  border-radius: 1px;
}
.avatar-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,47,179,0.08) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(54,245,255,0.08) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(246,255,122,0.06) 0 1px, transparent 2px);
  mix-blend-mode: screen;
  animation: avatar-grain 0.6s steps(4) infinite;
}
@keyframes avatar-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes avatar-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(54,245,255,0.4); }
  50% { box-shadow: 0 0 22px rgba(255,47,179,0.55), 0 0 8px rgba(54,245,255,0.5); }
}
@keyframes visor-sweep {
  0% { background-position: -100% 0; opacity: 0.6; }
  50% { opacity: 1; }
  100% { background-position: 200% 0; opacity: 0.6; }
}
@keyframes avatar-scanline {
  0% { top: -10%; }
  100% { top: 110%; }
}
@keyframes avatar-blink {
  0%, 92%, 100% { transform: scaleY(0); }
  93%, 95% { transform: scaleY(1); }
  96%, 98% { transform: scaleY(0); }
}
@keyframes avatar-grain {
  0% { transform: translate(0,0); }
  25% { transform: translate(1px,-1px); }
  50% { transform: translate(-1px,1px); }
  75% { transform: translate(1px,1px); }
  100% { transform: translate(0,0); }
}
@keyframes avatar-glitch {
  0% { transform: translate(0,0); filter: saturate(1.1); }
  25% { transform: translate(-2px,1px); filter: hue-rotate(20deg) saturate(1.4); }
  50% { transform: translate(2px,-1px); filter: hue-rotate(-15deg) saturate(1.2); }
  75% { transform: translate(-1px,0); filter: hue-rotate(10deg); }
  100% { transform: translate(0,0); }
}
.name {
  font-family: 'Press Start 2P', monospace;
  font-size: 15px; color: #5eefff;
  margin-top: 12px; letter-spacing: 1px;
  text-shadow: var(--text-crisp-shadow), 2px 2px 0 var(--magenta-deep);
}
.handle {
  font-size: 18px; color: #ff6fc4; margin-top: 4px;
  text-shadow: var(--text-crisp-shadow);
  letter-spacing: 1px;
}
.bio {
  font-family: 'Share Tech Mono', monospace;
  font-size: 16px; color: var(--text-body); margin-top: 8px; line-height: 1.5;
  letter-spacing: 0.02em;
  text-shadow: var(--text-crisp-shadow);
}

/* status grid */
.status-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 8px;
  background: rgba(3, 19, 33, 0.72);
  border: 1px solid rgba(54,245,255,0.3);
}
.stat { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.stat .k { color: var(--orange); letter-spacing: 1px; font-size: 11px; font-family: 'Press Start 2P', monospace; }
.stat .v { color: var(--cyan); font-size: 16px; }
.stat .v.ok { color: var(--term-green); }

/* nav */
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px; color: var(--orange); letter-spacing: 1px;
  padding: 4px 0 6px; border-bottom: 1px dashed rgba(255,204,77,0.4);
  margin-bottom: 4px;
}
.nav-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(54,245,255,0.25);
  background: linear-gradient(90deg, rgba(3,19,33,0.74), rgba(8,45,70,0.42));
  color: #8aefff;
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-shadow: var(--text-crisp-shadow);
  transition: transform 0.08s ease, background 0.15s, border-color 0.15s, color 0.15s;
  text-align: left;
}
.nav-item .num { color: var(--magenta); font-size: 12px; font-family: 'Press Start 2P', monospace; }
.nav-item .lbl { color: inherit; }
.nav-item .dot {
  width: 8px; height: 8px; background: rgba(54,245,255,0.3);
  box-shadow: 0 0 3px var(--cyan);
}
.nav-item:hover {
  background: linear-gradient(90deg, rgba(21,141,255,0.22), rgba(255,47,179,0.13));
  border-color: var(--magenta);
  color: var(--yellow);
  transform: translateX(3px);
}
.nav-item:hover .dot { background: var(--magenta); box-shadow: 0 0 6px var(--magenta); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(54,245,255,0.22), rgba(21,141,255,0.2), rgba(255,47,179,0.13));
  border-color: var(--magenta);
  color: var(--yellow);
  box-shadow: 0 0 12px rgba(255,47,179,0.34), inset 0 0 12px rgba(54,245,255,0.12);
}
.nav-item.active .dot { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

/* mini bars */
.mini-bars { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid rgba(54,245,255,0.25); background: rgba(3,19,33,0.66); }
.bar { display: grid; grid-template-columns: 34px 1fr 40px; align-items: center; gap: 6px; font-size: 12px; font-family: 'Press Start 2P', monospace; }
.bar .bl { color: var(--orange); }
.bar .bv { color: var(--cyan); text-align: right; }
.bar .track { height: 8px; background: rgba(0,0,0,0.6); border: 1px solid rgba(54,245,255,0.25); position: relative; }
.bar .fill { height: 100%; box-shadow: 0 0 6px currentColor; }
.bar .fill.cyan { background: var(--cyan); color: var(--cyan); }
.bar .fill.mag  { background: var(--magenta); color: var(--magenta); animation: bar-pulse 2s ease-in-out infinite; }
.bar .fill.yel  { background: var(--yellow); color: var(--yellow); }
@keyframes bar-pulse { 50% { width: 83%; } }

/* floppy motif */
.floppy {
  margin-top: auto;
  background: linear-gradient(180deg, #0c3657 0%, #031321 100%);
  border: 2px solid var(--frame-mag);
  padding: 8px 10px;
  position: relative;
  display: flex; align-items: center; gap: 10px;
  box-shadow: inset 0 0 10px rgba(54, 245, 255, 0.12), 0 0 12px rgba(255,47,179,0.18);
  cursor: pointer;
  font: inherit;
  width: 100%;
  text-align: left;
  color: inherit;
}
.floppy.is-saving .floppy-shutter { transform: translateY(8px); background: var(--cyan); }
.floppy.is-saving .floppy-label { color: var(--yellow); }
.floppy-shutter {
  width: 34px; height: 22px;
  background: linear-gradient(180deg, #3d3d3d 0%, #888 50%, #3d3d3d 100%);
  border: 1px solid #000;
  box-shadow: inset -2px 0 0 rgba(0,0,0,0.4);
}
.floppy-label {
  flex: 1;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px; color: var(--yellow);
  letter-spacing: 1px;
}

/* ===== TERMINAL (right) ===== */
.term {
  background:
    radial-gradient(ellipse at 28% 0%, rgba(54,245,255,0.12), transparent 34%),
    linear-gradient(180deg, #082d46 0%, #041b31 58%, #020914 100%);
  border: 3px solid var(--frame-cyan);
  box-shadow:
    inset 0 0 0 1px #020914,
    0 0 0 3px #020914,
    0 0 30px rgba(54,245,255,0.35);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}

.term-chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 8px 14px;
  background: linear-gradient(180deg, #0b3d61 0%, #061f38 100%);
  border-bottom: 2px solid var(--frame-cyan);
  gap: 16px;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-shadow: var(--text-crisp-shadow);
}
.chrome-dots { display: flex; gap: 6px; }
.chrome-dots span { width: 12px; height: 12px; background: var(--magenta); box-shadow: 0 0 6px var(--magenta); }
.chrome-dots span:nth-child(2) { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
.chrome-dots span:nth-child(3) { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.chrome-title { color: var(--cyan); text-align: center; letter-spacing: 1.5px; }
.chrome-title #crumb { color: var(--yellow); }
.chrome-meta { color: var(--orange); display: flex; gap: 10px; align-items: center; }
.chrome-meta .blink { color: var(--magenta); animation: blink 1.1s steps(2) infinite; }

.term-bezel {
  flex: 1;
  background: var(--term-bg-dark);
  padding: 10px;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.term-screen {
  flex: 1;
  background:
    radial-gradient(ellipse at 45% 16%, rgba(54,245,255,0.12), transparent 56%),
    linear-gradient(180deg, rgba(8,45,70,0.94) 0%, rgba(4,27,49,0.97) 54%, var(--term-bg-dark) 100%);
  border: 2px solid var(--term-green-dim);
  padding: 22px 26px;
  overflow-y: auto;
  position: relative;
  color: var(--text-body);
  /* Avoid CRT bloom on every glyph — kills legibility */
  text-shadow: var(--text-crisp-shadow);
  font-size: 22px;
  line-height: 1.55;
  scroll-behavior: smooth;
}
.term-screen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0,0,0,0.07) 3px, transparent 4px);
}
.term-screen,
.bio,
.term-footer {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.term-screen::-webkit-scrollbar { width: 10px; }
.term-screen::-webkit-scrollbar-track { background: var(--term-bg-dark); }
.term-screen::-webkit-scrollbar-thumb { background: var(--term-green-dim); border: 1px solid #000; }

.term-footer {
  padding: 8px 12px 4px;
  display: block;
  font-size: 20px;
  line-height: 1.3;
  color: var(--text-body);
  text-shadow: var(--text-crisp-shadow);
  border-top: 1px dashed rgba(54,245,255,0.24);
  margin-top: 4px;
}
.term-footer .prompt { color: var(--cyan); margin-right: 8px; }
.term-footer .cmdline {
  display: inline;
  min-width: 1ch;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  caret-color: transparent;
}
.term-footer .cmdline:empty::before {
  content: "type help";
  color: rgba(159, 255, 208, 0.45);
}
.term-footer:focus-within {
  border-top-color: rgba(246,255,122,0.55);
}
.term-footer .caret {
  display: inline-block;
  color: var(--yellow);
  margin-left: 1px;
  line-height: 1;
  vertical-align: -0.08em;
  animation: blink 1s steps(2) infinite;
}

/* ===== VIEW CONTENT ===== */
.view { animation: view-in 0.45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes view-in {
  0% { opacity: 0; transform: translateY(4px); filter: blur(1px); }
  40% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}

.ascii-banner {
  font-family: 'Share Tech Mono', monospace;
  color: var(--cyan);
  font-size: 11px;
  line-height: 1.1;
  margin-bottom: 16px;
  text-shadow: var(--text-crisp-shadow);
  white-space: pre;
  overflow: hidden;
}

.tag {
  padding: 4px 8px;
  border: 1px solid currentColor;
  background: rgba(0,0,0,0.35);
}
.tag-cyan { color: var(--cyan); }
.tag-mag { color: var(--magenta); }
.tag-yel { color: var(--yellow); }
.tag-ghost { color: #a090c0; }

h1.glitch, .h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: 26px; line-height: 1.35;
  color: #6ef7ff;
  margin: 14px 0 16px;
  letter-spacing: 1px;
  text-shadow:
    var(--text-crisp-shadow),
    2px 0 0 var(--magenta-deep),
    -2px 0 0 rgba(54,245,255,0.35);
  animation: glitch-shift 5s steps(1) infinite;
}
.h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: 21px; color: #6ef7ff;
  margin: 6px 0 16px; letter-spacing: 2px;
  text-shadow: var(--text-crisp-shadow), 2px 2px 0 var(--magenta-deep);
}
h1.glitch .hl { color: var(--yellow); text-shadow: var(--text-crisp-shadow), 2px 0 0 var(--magenta); }
@keyframes glitch-shift {
  0%, 92%, 100% { transform: none; }
  93% { transform: translate(-2px, 0) skewX(-2deg); }
  94% { transform: translate(2px, 0) skewX(2deg); }
  95% { transform: none; }
  96% { transform: translate(-1px, 1px); }
  97% { transform: none; }
}

.lede {
  font-family: 'Share Tech Mono', monospace;
  font-size: 25px;
  color: var(--text-heading-soft);
  line-height: 1.58;
  margin-bottom: 14px;
  max-width: 70ch;
  text-shadow: var(--text-crisp-shadow);
}
.body {
  font-family: 'Share Tech Mono', monospace;
  font-size: 21px;
  color: var(--text-body-soft);
  line-height: 1.6;
  margin-bottom: 14px;
  max-width: 70ch;
  text-shadow: var(--text-crisp-shadow);
}
.u-cy { color: #7eebff; }
.u-mg { color: #ff7cc8; }
.u-yl { color: #faf99a; }
b { color: var(--yellow); font-weight: normal; }

.kv {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px dashed rgba(54,245,255,0.24);
  background: rgba(0,0,0,0.25);
}
.kv > div { display: flex; gap: 10px; align-items: center; font-size: 16px; }
.kvk { color: var(--orange); font-family: 'Press Start 2P', monospace; font-size: 10px; min-width: 68px; letter-spacing: 1px; }
.kvv { color: var(--cyan); }
.kvv.ok { color: var(--yellow); }

.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 18px; }
.home-social { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 18px; }
.home-social .slot { width: 46px; }
.btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px; letter-spacing: 1.5px;
  padding: 10px 14px; cursor: pointer;
  border: 2px solid currentColor;
  background: rgba(0,0,0,0.35);
  transition: transform 0.08s, background 0.15s, box-shadow 0.15s;
  position: relative;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 currentColor, 0 0 14px currentColor; }
.btn:active { transform: translate(0, 0); box-shadow: 0 0 6px currentColor; }
.btn-cy { color: var(--cyan); }
.btn-mg { color: var(--magenta); }
.btn-ghost { color: #b6ffe0; border-style: dashed; }

.ticker {
  display: flex; gap: 28px; overflow: hidden; white-space: nowrap;
  border-top: 1px dashed rgba(54,245,255,0.24);
  border-bottom: 1px dashed rgba(54,245,255,0.24);
  padding: 8px 0;
  font-size: 16px;
  color: #9fffd0;
  animation: ticker 22s linear infinite;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ticker span { flex: 0 0 auto; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* PROJECTS */
.prj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prj {
  border: 2px solid rgba(54,245,255,0.35);
  background: rgba(0,0,0,0.4);
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  padding: 10px;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  position: relative;
}
.prj::after {
  content: "SN/" attr(data-sn);
  position: absolute; top: 4px; right: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px; color: var(--orange); opacity: 0.7;
}
.prj:hover { border-color: var(--magenta); transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--magenta), 0 0 18px rgba(255,47,179,0.3); }
.prj-thumb {
  width: 100%; height: 90px;
  background: #020914;
  border: 1px solid var(--cyan-dim);
  image-rendering: pixelated;
  background-size: 16px 16px;
}
.prj-thumb[data-thumb="http"] {
  background:
    linear-gradient(135deg, #ff2fb3 25%, transparent 25%) 0 0/14px 14px,
    linear-gradient(225deg, #36f5ff 25%, transparent 25%) 0 0/14px 14px,
    linear-gradient(315deg, #f6ff7a 25%, transparent 25%) 0 0/14px 14px,
    #020914;
}
.prj-thumb[data-thumb="auth"] {
  background:
    repeating-linear-gradient(0deg, #36f5ff 0 2px, transparent 2px 8px),
    repeating-linear-gradient(90deg, #36f5ff 0 2px, transparent 2px 8px),
    #020914;
  opacity: 0.9;
}
.prj-thumb[data-thumb="privacy"] {
  background:
    radial-gradient(circle at 50% 80%, #ff2fb3 0 4px, transparent 5px),
    radial-gradient(circle at 20% 60%, #36f5ff 0 3px, transparent 4px),
    radial-gradient(circle at 80% 70%, #f6ff7a 0 3px, transparent 4px),
    linear-gradient(180deg, #071d32 0%, #020914 100%);
}
.prj-thumb[data-thumb="chat"] {
  background:
    repeating-conic-gradient(#ff2fb3 0% 25%, #f6ff7a 0% 50%, #36f5ff 0% 75%, #ffcc4d 0% 100%);
  background-size: 30px 30px;
  background-position: center;
  opacity: 0.85;
}
.prj-thumb[data-thumb="database"] {
  background:
    repeating-linear-gradient(0deg, #0d3451 0 8px, #36f5ff 9px 10px, #020914 11px 16px),
    linear-gradient(90deg, transparent 0 40%, #ff2fb3 41% 45%, transparent 46% 100%);
  background-size: 100% 18px, 18px 100%;
}
.prj-thumb[data-thumb="landmarks"] {
  background:
    radial-gradient(circle at 30% 40%, #f6ff7a 0 6px, transparent 7px),
    radial-gradient(circle at 70% 55%, #36f5ff 0 8px, transparent 9px),
    radial-gradient(circle at 50% 75%, #ff2fb3 0 5px, transparent 6px),
    linear-gradient(180deg, #0a2840 0%, #020914 100%);
}
.prj-thumb[data-thumb="canny"] {
  background:
    repeating-linear-gradient(45deg, #36f5ff 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, #ff2fb3 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #071d32 0%, #020914 100%);
}
.prj-thumb[data-thumb="swarm"] {
  background:
    radial-gradient(circle at 25% 65%, #36f5ff 0 4px, transparent 5px),
    radial-gradient(circle at 50% 50%, #f6ff7a 0 4px, transparent 5px),
    radial-gradient(circle at 75% 60%, #ff2fb3 0 4px, transparent 5px),
    repeating-linear-gradient(0deg, #0d3451 0 12px, transparent 12px 24px),
    #020914;
}
.prj-thumb[data-thumb="mosaic"] {
  background:
    linear-gradient(90deg, #ff2fb3 0 20%, #36f5ff 20% 40%, #f6ff7a 40% 55%, #ffcc4d 55% 70%, #36f5ff 70% 85%, #ff2fb3 85% 100%),
    linear-gradient(180deg, #071d32 0%, #020914 100%);
  background-blend-mode: overlay;
  opacity: 0.92;
}
.prj-thumb[data-thumb="xr"] {
  background:
    conic-gradient(from 45deg, #36f5ff 0 25%, transparent 25% 50%, #ff2fb3 50% 75%, transparent 75% 100%),
    radial-gradient(circle at 50% 50%, #f6ff7a 0 8px, transparent 9px),
    #020914;
}
.prj-thumb[data-thumb="robot-nav"] {
  background:
    repeating-linear-gradient(90deg, #0d3451 0 10px, #36f5ff 10px 11px, transparent 11px 20px),
    repeating-linear-gradient(0deg, #0d3451 0 10px, #ff2fb3 10px 11px, transparent 11px 20px),
    #020914;
}
.prj-thumb[data-thumb="rover"] {
  background:
    linear-gradient(90deg, #36f5ff 0 30%, transparent 30% 35%, #ff2fb3 35% 65%, transparent 65% 70%, #f6ff7a 70% 100%),
    repeating-linear-gradient(0deg, #071d32 0 6px, #020914 6px 12px);
}
.prj-thumb[data-thumb="network"] {
  background:
    radial-gradient(circle at 18% 26%, #36f5ff 0 4px, transparent 5px),
    radial-gradient(circle at 76% 34%, #f6ff7a 0 4px, transparent 5px),
    radial-gradient(circle at 52% 76%, #ff2fb3 0 4px, transparent 5px),
    linear-gradient(45deg, transparent 0 47%, #36f5ff 48% 50%, transparent 51%),
    linear-gradient(135deg, transparent 0 47%, #ff2fb3 48% 50%, transparent 51%),
    #020914;
}
.prj-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-right: 64px; font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--orange); letter-spacing: 1px; }
.prj h3 { font-family: 'Press Start 2P', monospace; font-size: 15px; color: #6ef7ff; margin: 4px 0; letter-spacing: 1px; text-shadow: var(--text-crisp-shadow), 2px 2px 0 var(--magenta-deep); }
.prj p { font-family: 'Share Tech Mono', monospace; font-size: 18px; color: var(--text-body-soft); line-height: 1.45; text-shadow: var(--text-crisp-shadow); }
.prj-chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.prj-chips span { font-family: 'Press Start 2P', monospace; font-size: 8px; padding: 3px 6px; border: 1px solid var(--yellow); color: var(--yellow); letter-spacing: 1px; }

/* ABOUT */
.about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.about-portrait {
  margin: 0 0 18px;
  max-width: 240px;
}
.about-portrait--sidebar {
  max-width: 100%;
  margin: 0 0 10px;
}
.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--cyan-dim);
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.45),
    0 0 24px rgba(61, 252, 229, 0.12);
}
.quote { border-left: 3px solid var(--magenta); padding: 10px 12px; margin: 12px 0; background: rgba(255,47,179,0.06); position: relative; }
.quote .q-mark { font-family: 'Press Start 2P', monospace; color: var(--magenta); position: absolute; top: -4px; left: 6px; font-size: 22px; opacity: 0.6; }
.quote p {
  font-family: 'Share Tech Mono', monospace;
  font-size: 20px;
  font-style: italic;
  color: #e8b8d8;
  padding-left: 14px;
  text-shadow: var(--text-crisp-shadow);
}
.sub { font-family: 'Press Start 2P', monospace; font-size: 12px; color: var(--orange); letter-spacing: 1.5px; margin: 14px 0 8px; text-shadow: var(--text-crisp-shadow); }
.bullet { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.bullet li {
  padding-left: 20px;
  position: relative;
  font-family: 'Share Tech Mono', monospace;
  font-size: 20px;
  color: var(--text-body-soft);
  text-shadow: var(--text-crisp-shadow);
}
.bullet li::before { content: "▸"; position: absolute; left: 2px; color: var(--cyan); }

.specs { display: flex; flex-direction: column; gap: 10px; }
.spec-card { border: 2px solid var(--cyan-dim); background: rgba(0,0,0,0.35); padding: 10px 12px; position: relative; }
.spec-card::before, .spec-card::after { content: ""; position: absolute; width: 8px; height: 8px; border: 2px solid var(--magenta); }
.spec-card::before { top: -4px; left: -4px; border-right: none; border-bottom: none; }
.spec-card::after { bottom: -4px; right: -4px; border-left: none; border-top: none; }
.spec-hd { font-family: 'Press Start 2P', monospace; font-size: 10px; color: var(--magenta); letter-spacing: 1.5px; margin-bottom: 8px; border-bottom: 1px dashed rgba(255,47,179,0.4); padding-bottom: 6px; }
.spec-row {
  display: flex;
  justify-content: space-between;
  font-family: 'Share Tech Mono', monospace;
  font-size: 17px;
  padding: 2px 0;
  color: var(--text-body-soft);
  text-shadow: var(--text-crisp-shadow);
}
.spec-row span:first-child { color: var(--orange); font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: 1px; }
.spec-row span:last-child { color: var(--cyan); }

.skill { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
.skill > span { color: var(--orange); font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: 1px; }
.skill .tr { height: 8px; background: rgba(0,0,0,0.5); border: 1px solid rgba(54,245,255,0.3); }
.skill .fi { height: 100%; box-shadow: 0 0 6px currentColor; }
.skill .fi.cy { background: var(--cyan); color: var(--cyan); }
.skill .fi.mg { background: var(--magenta); color: var(--magenta); }
.skill .fi.yl { background: var(--yellow); color: var(--yellow); }

.inv { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.slot { aspect-ratio: 1; border: 1px solid var(--cyan-dim); background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--cyan); text-shadow: 0 0 6px var(--cyan); }
.slot.empty { opacity: 0.3; }
a.slot {
  text-decoration: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease, text-shadow 0.12s ease;
}
a.slot:hover {
  border-color: var(--magenta);
  background: rgba(255,47,179,0.12);
  color: var(--magenta);
  text-shadow: 0 0 8px rgba(255,47,179,0.55);
}
a.slot:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
/* Brand logo icons inside the social slots: inherit the slot's neon
   color via currentColor and reproduce its glow with a drop-shadow
   (so they also shift to magenta on hover, just like the old text). */
.slot-ico {
  width: 58%; height: 58%;
  fill: currentColor;
  filter: drop-shadow(0 0 5px currentColor);
  transition: filter 0.12s ease, fill 0.12s ease;
  pointer-events: none;
}

/* LOG */
.timeline { list-style: none; display: flex; flex-direction: column; gap: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 160px 64px 1fr;
  align-items: start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(54,245,255,0.16);
  font-size: 16px;
}
.timeline li:last-child { border-bottom: none; }
.timeline .ts { font-family: 'Share Tech Mono', monospace; color: var(--orange); font-size: 14px; letter-spacing: 0.5px; padding-top: 2px; }
.timeline .ev {
  font-family: 'Press Start 2P', monospace; font-size: 9px; padding: 4px 6px; text-align: center; letter-spacing: 1px;
  border: 1px solid currentColor; justify-self: start;
}
.timeline .ev-ship  { color: var(--cyan); }
.timeline .ev-talk  { color: var(--yellow); }
.timeline .ev-write { color: var(--magenta); }
.timeline .ev-join  { color: var(--orange); }
.timeline .ev-body { color: #c8f0d8; }
.timeline .ev-body b { color: var(--yellow); }

/* GALLERY */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.frame {
  aspect-ratio: 1;
  background: #020914;
  border: 2px solid var(--cyan-dim);
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.1s;
  background-size: 8px 8px;
}
.frame::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.3) 3px, transparent 4px); pointer-events: none; }
.frame::after { content: attr(data-pat); position: absolute; left: 4px; bottom: 2px; font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--yellow); text-shadow: 1px 1px 0 #000; letter-spacing: 1px; }
.frame:hover { border-color: var(--magenta); transform: translate(-2px,-2px); }
.frame[data-pat="city"]   { background: linear-gradient(180deg, #071d32 0%, #3a0f5a 60%, #ff2fb3 100%); }
.frame[data-pat="moon"]   { background: radial-gradient(circle at 50% 40%, #f6ff7a 0 18%, #071d32 19% 100%); }
.frame[data-pat="sun"]    { background: repeating-linear-gradient(0deg, #ff2fb3 0 8px, #ffcc4d 8px 16px, #f6ff7a 16px 24px); }
.frame[data-pat="ship"]   { background:
  radial-gradient(circle at 50% 50%, #36f5ff 0 6%, transparent 7%),
  linear-gradient(180deg, #020914 0%, #2a0f55 100%); }
.frame[data-pat="robo"]   { background:
  linear-gradient(90deg, transparent 40%, #36f5ff 40% 45%, transparent 45% 55%, #36f5ff 55% 60%, transparent 60%),
  linear-gradient(180deg, #0d3451 0%, #020914 100%); }
.frame[data-pat="cat"]    { background:
  radial-gradient(circle at 30% 40%, #ff2fb3 0 6%, transparent 7%),
  radial-gradient(circle at 70% 40%, #ff2fb3 0 6%, transparent 7%),
  linear-gradient(180deg, #071d32, #020914); }
.frame[data-pat="glyph"]  { background:
  repeating-linear-gradient(45deg, #36f5ff 0 2px, transparent 2px 10px),
  #071d32; }
.frame[data-pat="arcade"] { background:
  linear-gradient(180deg, #ffcc4d 0 20%, #071d32 20% 100%),
  #020914; }
.frame[data-pat="grid"]   { background:
  linear-gradient(0deg, transparent 0 1px, #36f5ff 1px 2px, transparent 2px 14px),
  linear-gradient(90deg, transparent 0 1px, #36f5ff 1px 2px, transparent 2px 14px),
  #020914; }
.frame[data-pat="python"] { background:
  radial-gradient(circle at 28% 35%, #36f5ff 0 10%, transparent 11%),
  linear-gradient(135deg, #082744 0 45%, #f6ff7a 46% 54%, #020914 55% 100%); }
.frame[data-pat="react"] { background:
  repeating-radial-gradient(ellipse at 50% 50%, transparent 0 8px, #36f5ff 9px 10px, transparent 11px 18px),
  radial-gradient(circle at 50% 50%, #ff2fb3 0 8%, transparent 9%),
  #020914; }
.frame[data-pat="java"] { background:
  repeating-linear-gradient(0deg, transparent 0 8px, #ffcc4d 9px 10px, transparent 11px 16px),
  linear-gradient(180deg, #4f1480 0%, #020914 100%); }
.frame[data-pat="aws"] { background:
  linear-gradient(90deg, transparent 15%, #f6ff7a 16% 22%, transparent 23% 38%, #f6ff7a 39% 45%, transparent 46%),
  radial-gradient(circle at 50% 70%, #ffcc4d 0 18%, transparent 19%),
  #071d32; }
.frame[data-pat="ros2"] { background:
  repeating-conic-gradient(from 45deg, #36f5ff 0% 12.5%, transparent 0% 25%, #ff2fb3 0% 37.5%, transparent 0% 50%);
  background-size: 22px 22px; }
.frame[data-pat="docker"] { background:
  linear-gradient(0deg, #36f5ff 0 10%, transparent 11%),
  repeating-linear-gradient(90deg, #0d3451 0 10px, #36f5ff 11px 13px, #020914 14px 20px); }
.frame[data-pat="security"] { background:
  radial-gradient(circle at 50% 30%, #f6ff7a 0 12%, transparent 13%),
  linear-gradient(135deg, transparent 35%, #ff2fb3 36% 45%, transparent 46%),
  #020914; }
.frame[data-pat="network"] { background:
  radial-gradient(circle at 20% 20%, #36f5ff 0 5%, transparent 6%),
  radial-gradient(circle at 75% 35%, #f6ff7a 0 5%, transparent 6%),
  radial-gradient(circle at 45% 75%, #ff2fb3 0 5%, transparent 6%),
  linear-gradient(45deg, transparent 0 48%, #36f5ff 49% 51%, transparent 52%),
  #071d32; }
.frame[data-pat="database"] { background:
  repeating-linear-gradient(0deg, #071d32 0 9px, #36f5ff 10px 11px, #020914 12px 18px),
  radial-gradient(ellipse at 50% 20%, #f6ff7a 0 16%, transparent 17%); }
.caption { text-align: center; color: #9fffd0; font-size: 14px; margin-top: 12px; font-family: 'Share Tech Mono', monospace; letter-spacing: 0.5px; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.photo-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 2px solid var(--cyan-dim);
  background: #020914;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.photo-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  image-rendering: auto;
  filter: saturate(1.05) contrast(1.02);
}
.photo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 58%, rgba(2,9,20,0.82) 100%),
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.16) 3px, transparent 4px);
  pointer-events: none;
}
.photo-card span {
  position: absolute;
  left: 8px;
  bottom: 7px;
  right: 8px;
  color: var(--yellow);
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  text-align: left;
  text-shadow: 1px 1px 0 #000, 0 0 8px rgba(246,255,122,0.38);
}
.photo-card:hover,
.photo-card:focus-visible {
  border-color: var(--magenta);
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 var(--magenta), 0 0 20px rgba(255,47,179,0.25);
  outline: none;
}

.photo-modal {
  position: relative;
  width: min(860px, 94vw);
  max-height: 90vh;
  margin: 0;
  border: 2px solid var(--cyan);
  background: var(--term-bg-dark);
  padding: 12px;
  box-shadow: 0 0 30px rgba(54,245,255,0.34), 4px 4px 0 var(--magenta-deep);
}
.photo-modal img {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  image-rendering: auto;
  background: #020914;
}
.photo-modal figcaption {
  margin-top: 10px;
  color: var(--yellow);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 1px;
}
.photo-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(2,9,20,0.82);
}

.prj-modal-date {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--orange);
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.arcade-cabinet {
  width: min(560px, 96vw);
  border: 2px solid var(--yellow);
  background: linear-gradient(180deg, rgba(8,45,70,0.98), rgba(3,13,26,0.98));
  padding: 16px;
  box-shadow: 0 0 34px rgba(246,255,122,0.24), 4px 4px 0 rgba(255,47,179,0.45);
}
.arcade-head,
.arcade-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.arcade-head h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: var(--yellow);
  letter-spacing: 1px;
}
.arcade-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 14px 0 10px;
  border: 2px solid var(--cyan);
  background: #020914;
  image-rendering: pixelated;
}
.arcade-hud {
  color: var(--cyan);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 1px;
}
.arcade-cabinet p {
  margin-top: 10px;
  color: var(--text-body-soft);
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  text-align: center;
}

.terminal-output .terminal-lines {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  color: #c9f0db;
  font-family: 'Share Tech Mono', monospace;
  font-size: 16px;
  line-height: 1.6;
}
.terminal-output .terminal-lines li::before {
  content: "> ";
  color: var(--yellow);
}

/* CONTACT */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.uplink { display: flex; flex-direction: column; gap: 10px; }
.uplink label { display: flex; flex-direction: column; gap: 4px; }
.uplink .lab { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--orange); letter-spacing: 1px; }
.uplink input, .uplink textarea {
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--cyan-dim);
  color: var(--cyan);
  padding: 10px 12px;
  font-family: 'VT323', monospace; font-size: 18px;
  outline: none;
  letter-spacing: 0.5px;
  text-shadow: 0 0 4px rgba(54,245,255,0.4);
  caret-color: var(--yellow);
}
.uplink input:focus, .uplink textarea:focus {
  border-color: var(--yellow); color: var(--yellow);
  box-shadow: 0 0 10px rgba(246,255,122,0.35);
}
.uplink textarea { resize: vertical; }
.sent { color: var(--yellow); font-family: 'Press Start 2P', monospace; font-size: 10px; letter-spacing: 1px; padding: 6px 0; }

.channels { display: flex; flex-direction: column; gap: 8px; }
.chan {
  display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(54,245,255,0.3);
  background: rgba(0,0,0,0.35);
  color: inherit; text-decoration: none;
  transition: border-color 0.15s, transform 0.1s, background 0.15s;
}
.chan:hover { border-color: var(--magenta); background: rgba(255,47,179,0.08); transform: translateX(3px); }
.chan.disabled { opacity: 0.5; pointer-events: none; }
.c-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--yellow); color: var(--yellow); font-family: 'Press Start 2P', monospace;
  font-size: 14px; text-shadow: 0 0 6px var(--yellow); }
.chan b { color: var(--cyan); font-family: 'Press Start 2P', monospace; font-size: 11px; letter-spacing: 1.5px; display: block; text-shadow: 0 0 5px rgba(54,245,255,0.4); }
.chan em { color: #c9f0db; font-style: normal; font-size: 15px; }
.disclaimer { margin-top: 14px; padding: 8px 10px; border: 1px dashed rgba(255,204,77,0.4); color: var(--orange); font-size: 13px; font-family: 'Share Tech Mono', monospace; letter-spacing: 0.5px; }

/* Home panels (github + monkeytype) */
.panels { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 12px; margin-top: 16px; }
.panel { border: 2px solid var(--cyan-dim); background: rgba(0,0,0,0.4); padding: 10px 12px; position: relative; }
.panel::before, .panel::after { content: ""; position: absolute; width: 8px; height: 8px; border: 2px solid var(--magenta); }
.panel::before { top: -4px; left: -4px; border-right: none; border-bottom: none; }
.panel::after { bottom: -4px; right: -4px; border-left: none; border-top: none; }
.panel-hd { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed rgba(54,245,255,0.24); padding-bottom: 6px; margin-bottom: 8px; gap: 10px; flex-wrap: wrap; }
.panel-title { font-family: 'Press Start 2P', monospace; font-size: 10px; color: var(--cyan); letter-spacing: 1px; text-shadow: 0 0 6px rgba(54,245,255,0.4); }
.panel-meta { font-family: 'Share Tech Mono', monospace; font-size: 12px; color: var(--orange); letter-spacing: 0.5px; }

/* GitHub heatmap */
.github-panel { grid-column: 1 / -1; }
.gh-browser { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 12px; align-items: start; }
.gh-calendar-pane {
  min-width: 0;
  --gh-cell: 16px;
  --gh-week: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
}
.gh-calendar-pane::-webkit-scrollbar { height: 8px; }
.gh-calendar-pane::-webkit-scrollbar-track { background: rgba(0,0,0,0.25); }
.gh-calendar-pane::-webkit-scrollbar-thumb { background: var(--cyan-dim); border: 1px solid #000; }
.gh-months {
  display: grid;
  grid-template-columns: repeat(var(--gh-weeks, 53), var(--gh-week));
  gap: 2px;
  margin: 0 0 4px 36px;
  width: max-content;
  min-width: calc((var(--gh-week) + 2px) * var(--gh-weeks, 53));
  min-height: 15px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  color: #c9f0db;
}
.gh-months span {
  grid-row: 1;
  overflow: visible;
  white-space: nowrap;
}
.gh-calendar-row { display: grid; grid-template-columns: 28px 1fr; gap: 8px; }
.gh-weekdays {
  display: grid;
  grid-template-rows: repeat(7, var(--gh-cell));
  gap: 2px;
  padding-top: 9px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #c9f0db;
}
.gh-weekdays span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 2px;
  line-height: 1;
  transform: translateY(-2px);
}
.gh-weekdays span:nth-child(1) { grid-row: 2; }
.gh-weekdays span:nth-child(2) { grid-row: 4; }
.gh-weekdays span:nth-child(3) { grid-row: 6; }
.gh-grid {
  display: grid;
  grid-template-columns: repeat(var(--gh-weeks, 53), var(--gh-week));
  grid-template-rows: repeat(7, var(--gh-cell));
  gap: 2px;
  margin: 6px 0;
  width: max-content;
  min-width: calc((var(--gh-week) + 2px) * var(--gh-weeks, 53));
}
.gh-grid .cell { width: 100%; height: var(--gh-cell); background: rgba(54,245,255,0.08); border: 1px solid rgba(0,0,0,0.3); }
.gh-grid .cell.blank { background: transparent; border-color: transparent; }
.gh-grid .cell.s1 { background: rgba(54,245,255,0.25); }
.gh-grid .cell.s2 { background: rgba(54,245,255,0.5); }
.gh-grid .cell.s3 { background: var(--cyan); box-shadow: 0 0 3px rgba(54,245,255,0.6); }
.gh-grid .cell.s4 { background: var(--magenta); box-shadow: 0 0 4px rgba(255,47,179,0.6); }
.gh-legend { display: flex; gap: 4px; align-items: center; font-family: 'Share Tech Mono', monospace; font-size: 11px; color: #9fffd0; justify-content: flex-end; margin-bottom: 6px; }
.gh-legend .sw { width: 10px; height: 10px; display: inline-block; }
.gh-legend .sw.s0 { background: rgba(54,245,255,0.08); }
.gh-legend .sw.s1 { background: rgba(54,245,255,0.25); }
.gh-legend .sw.s2 { background: rgba(54,245,255,0.5); }
.gh-legend .sw.s3 { background: var(--cyan); }
.gh-legend .sw.s4 { background: var(--magenta); }
.gh-years { display: flex; flex-direction: column; gap: 6px; }
.gh-year-btn {
  border: 1px solid transparent;
  background: transparent;
  color: #a9b7c9;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  font-family: 'Share Tech Mono', monospace;
  font-size: 15px;
  letter-spacing: 0.5px;
}
.gh-year-btn:hover { color: var(--cyan); border-color: rgba(54,245,255,0.3); }
.gh-year-btn.active { background: rgba(54,245,255,0.18); border-color: var(--cyan); color: var(--yellow); box-shadow: inset 0 0 10px rgba(54,245,255,0.18); }
.gh-commits { list-style: none; display: flex; flex-direction: column; gap: 2px; font-family: 'Share Tech Mono', monospace; font-size: 13px; color: #c9f0db; max-height: 165px; overflow-y: auto; padding-right: 4px; }
.gh-commits::-webkit-scrollbar { width: 8px; }
.gh-commits::-webkit-scrollbar-track { background: rgba(0,0,0,0.25); }
.gh-commits::-webkit-scrollbar-thumb { background: var(--cyan-dim); border: 1px solid #000; }
.gh-commits li { display: grid; grid-template-columns: 50px 130px 1fr; gap: 8px; padding: 2px 0; border-bottom: 1px dashed rgba(54,245,255,0.12); }
.gh-commits .cdate { color: var(--orange); }
.gh-commits .crepo { color: var(--yellow); }
.gh-commits a { color: #c9f0db; text-decoration: none; }
.gh-commits a:hover { color: var(--cyan); text-shadow: 0 0 6px rgba(54,245,255,0.55); }

/* Cursor dashboard card */
.cursor-panel { grid-column: 1 / -1; }
.panel-link { color: var(--orange); text-decoration: none; }
.panel-link:hover { color: var(--cyan); text-shadow: 0 0 6px rgba(54,245,255,0.55); }
.cursor-card {
  display: block;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(54,245,255,0.16);
  background: rgba(255,255,255,0.025);
  padding: 12px;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.cursor-card:hover {
  border-color: rgba(54,245,255,0.55);
  background: rgba(54,245,255,0.04);
  transform: translateY(-1px);
}
.cursor-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cursor-label { display: block; color: #9aa6b2; font-family: 'Share Tech Mono', monospace; font-size: 12px; margin-bottom: 4px; }
.cursor-card strong {
  display: block;
  color: #e6ebf0;
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  letter-spacing: 1px;
}
.cursor-tabs { display: flex; gap: 5px; color: #9aa6b2; font-family: 'Share Tech Mono', monospace; font-size: 11px; }
.cursor-tabs span:first-child { color: #e6ebf0; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 3px; }
.cursor-map-wrap { margin: 12px auto 14px; max-width: 710px; }
.cursor-months {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  margin-left: 24px;
  color: #848c95;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
}
.cursor-map-row { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: center; }
.cursor-weekdays {
  display: grid;
  grid-template-rows: repeat(3, 18px);
  gap: 8px;
  color: #a1aab3;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
}
.cursor-grid {
  display: grid;
  grid-template-columns: repeat(53, minmax(6px, 1fr));
  grid-template-rows: repeat(7, 10px);
  gap: 3px;
}
.cursor-cell { display: block; min-width: 6px; background: rgba(54,245,255,0.06); border: 1px solid rgba(255,255,255,0.02); }
.cursor-cell.s1 { background: rgba(23,122,98,0.55); }
.cursor-cell.s2 { background: rgba(28,161,126,0.7); }
.cursor-cell.s3 { background: rgba(42,198,154,0.85); }
.cursor-cell.s4 { background: rgba(61,252,181,0.95); box-shadow: 0 0 4px rgba(61,252,181,0.35); }
.cursor-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 10px;
}
.cursor-stats span { display: block; color: #8c98a5; font-family: 'Share Tech Mono', monospace; font-size: 12px; margin-bottom: 3px; }
.cursor-stats b { color: #e6ebf0; font-family: 'Share Tech Mono', monospace; font-size: 16px; font-weight: 400; }

/* Wispr Flow streak card */
.wispr-panel { grid-column: 1 / -1; }
.wispr-card {
  display: block;
  color: #ecf4ef;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(10,18,24,0.96), rgba(6,12,16,0.98));
  border: 1px solid rgba(54,245,255,0.22);
  border-radius: 12px;
  padding: 18px 24px 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 12px 24px rgba(0,0,0,0.28);
  transition: transform 0.12s, box-shadow 0.15s;
}
.wispr-card:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(54,245,255,0.36) inset, 0 14px 28px rgba(0,0,0,0.34); }
.wispr-top { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 16px; }
.wispr-top strong {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1;
  letter-spacing: -1.4px;
}
.wispr-top span {
  margin-top: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(9px, 1vw, 12px);
  letter-spacing: 1.5px;
  color: #d7f5ee;
}
.wispr-months {
  display: grid;
  grid-template-columns: 38px repeat(4, 1fr) 38px;
  align-items: center;
  margin-bottom: 16px;
  color: #a9c7c0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
}
.wispr-months span:first-child, .wispr-months span:last-child { color: rgba(215,245,238,0.32); font-size: 32px; line-height: 1; }
.wispr-months span:not(:first-child):not(:last-child) { text-align: center; }
.wispr-chart {
  display: grid;
  grid-template-columns: 40px minmax(560px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.wispr-chart::-webkit-scrollbar { height: 8px; }
.wispr-chart::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
.wispr-chart::-webkit-scrollbar-thumb { background: rgba(54,245,255,0.35); border-radius: 999px; }
.wispr-days {
  display: grid;
  grid-template-rows: repeat(7, 22px);
  gap: 11px;
  color: #9bbdb5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}
.wispr-grid {
  display: grid;
  grid-template-columns: repeat(18, 22px);
  grid-template-rows: repeat(7, 22px);
  gap: 11px;
  width: max-content;
}
.wispr-cell {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(54,245,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
}
.wispr-cell.s1 { background: rgba(112,221,211,0.3); }
.wispr-cell.s2 { background: rgba(112,221,211,0.58); }
.wispr-cell.s3 { background: rgba(39,163,151,0.82); }
.wispr-cell.s4 { background: #1d8077; }
.wispr-cell.smuted { background: rgba(188,183,168,0.36); }
.wispr-cell.current {
  outline: 2px solid rgba(246,181,106,0.58);
  box-shadow: 0 0 18px rgba(246,181,106,0.58), inset 0 0 0 1px rgba(255,255,255,0.12);
}
.wispr-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; color: #a9c7c0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 17px; }
.wispr-legend, .wispr-current { display: flex; align-items: center; gap: 10px; }
.wispr-legend i, .wispr-current i { width: 22px; height: 22px; border-radius: 4px; display: inline-block; }
.wispr-legend i.s1 { background: rgba(112,221,211,0.3); }
.wispr-legend i.s2 { background: rgba(112,221,211,0.58); }
.wispr-legend i.s3 { background: rgba(39,163,151,0.82); }
.wispr-legend i.s4 { background: #1d8077; }
.wispr-current i { background: rgba(255,255,255,0.04); outline: 2px solid rgba(246,181,106,0.58); box-shadow: 0 0 18px rgba(246,181,106,0.58); }

/* Monkeytype activity calendar */
.monkeytype-panel { grid-column: 1 / -1; background: rgba(24,37,58,0.76); border-color: rgba(75,103,150,0.42); }
.mk-activity-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  max-width: 850px;
  margin: 2px auto 10px;
}
.mk-range {
  border: 1px solid rgba(118,139,178,0.35);
  background: rgba(12,18,32,0.5);
  color: #f2f1f5;
  border-radius: 4px;
  padding: 8px 12px;
  min-width: 134px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.16);
}
.mk-range span { color: #a9b9d0; float: right; }
.mk-total { color: #567f96; font-family: 'Share Tech Mono', monospace; font-size: 13px; }
.mk-legend { display: flex; align-items: center; gap: 5px; color: #5d8799; font-family: 'Share Tech Mono', monospace; font-size: 12px; }
.mk-legend .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.mk-legend .sw.s1 { background: rgba(255,101,142,0.26); }
.mk-legend .sw.s2 { background: rgba(255,101,142,0.44); }
.mk-legend .sw.s3 { background: rgba(255,101,142,0.68); }
.mk-legend .sw.s4 { background: #ff668b; box-shadow: 0 0 6px rgba(255,102,139,0.45); }
.mk-activity {
  display: grid;
  grid-template-columns: 78px minmax(700px, 1fr);
  gap: 10px;
  max-width: 850px;
  margin: 0 auto;
  overflow-x: auto;
  padding-bottom: 4px;
}
.mk-activity::-webkit-scrollbar { height: 8px; }
.mk-activity::-webkit-scrollbar-track { background: rgba(0,0,0,0.18); }
.mk-activity::-webkit-scrollbar-thumb { background: rgba(255,101,142,0.45); border: 1px solid rgba(12,18,32,0.8); }
.mk-weekdays {
  display: grid;
  grid-template-rows: repeat(7, 12px);
  gap: 3px;
  padding-top: 1px;
  color: #679ab0;
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  text-align: right;
}
.mk-weekdays span:nth-child(1) { grid-row: 2; }
.mk-weekdays span:nth-child(2) { grid-row: 4; }
.mk-weekdays span:nth-child(3) { grid-row: 6; }
.mk-grid {
  display: grid;
  grid-template-columns: repeat(53, 10px);
  grid-template-rows: repeat(7, 12px);
  gap: 3px;
  width: max-content;
}
.mk-cell { display: block; width: 10px; height: 12px; border-radius: 2px; background: rgba(29,45,70,0.72); border: 1px solid rgba(8,15,28,0.16); }
.mk-cell.s1 { background: rgba(255,101,142,0.26); }
.mk-cell.s2 { background: rgba(255,101,142,0.44); }
.mk-cell.s3 { background: rgba(255,101,142,0.68); }
.mk-cell.s4 { background: #ff668b; box-shadow: 0 0 7px rgba(255,102,139,0.45); }
.mk-note {
  margin: 10px 0 0;
  text-align: center;
  color: #537b8d;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
}

/* ===== RESPONSIVE / SMALL SCREENS =====
   The desktop 3D-tilt two-column layout is left untouched above 900px.
   Below it, the unit collapses into a single stacked column
   (profile + nav on top, terminal below) and the page becomes scrollable. */

/* Tablets & smaller: stack the layout and let the page scroll */
@media (max-width: 900px) {
  html, body { overflow: auto; overflow-x: hidden; height: auto; }
  .stage { height: auto; min-height: 100vh; padding: 14px; }
  .unit {
    grid-template-columns: 1fr;
    width: 100%;
    height: auto;
    gap: 14px;
    transform: none;
    filter: none;
  }
  .term { min-height: 78vh; }

  /* Home dashboards and content grids collapse to a single column */
  .panels { grid-template-columns: 1fr; }
  .gh-browser { grid-template-columns: 1fr; }
  .gh-years { flex-direction: row; flex-wrap: wrap; }
  .cursor-stats, .mk-activity-head { grid-template-columns: repeat(2, 1fr); }
  .mk-legend { grid-column: 1 / -1; justify-content: flex-end; }
  .prj-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-portrait { margin-inline: auto; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Wide heatmap calendars scroll inside their own cards instead of
     pushing the whole page sideways */
  .gh-calendar-pane,
  .cursor-map-wrap,
  .mk-activity,
  .wispr-chart { overflow-x: auto; }

  /* Desktop-only floating controls are clutter on touch screens */
  .env-hud, .city-speed, .theme-btn, .weather-btn { display: none; }
}

/* Phones: scale type with the viewport, grow nav into comfortable
   touch targets, and reclaim horizontal space */
@media (max-width: 600px) {
  .stage { padding: 8px; }
  .unit { gap: 10px; }
  .left { padding: 12px 10px; }

  /* Larger, easier-to-tap navigation rows (~48px tall) */
  .nav-item { padding: 12px 12px; font-size: 24px; }
  .nav-item .num { font-size: 13px; }
  .nav-label { font-size: 11px; }

  /* Keep terminal copy readable while reclaiming side padding */
  .term-screen { padding: 16px 14px; font-size: 20px; }
  .term-footer { font-size: 16px; }

  /* Shrink the window chrome so the long path can't overflow */
  .term-chrome { font-size: 8px; gap: 8px; padding: 8px 10px; letter-spacing: 0.5px; }
  .chrome-dots span { width: 9px; height: 9px; }
  .chrome-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chrome-meta { gap: 6px; }

  /* Headings and body scale with screen width but never exceed
     their desktop sizes — adaptive across phone dimensions */
  h1.glitch, .h1 { font-size: clamp(17px, 5.2vw, 26px); line-height: 1.4; }
  .h2 { font-size: clamp(14px, 4vw, 21px); letter-spacing: 1px; }
  .lede { font-size: clamp(16px, 4.6vw, 25px); }
  .body { font-size: clamp(15px, 4.2vw, 21px); }
  .ascii-banner { font-size: 7px; overflow-x: auto; }

  /* Experience timeline: the desktop 3-column row (date | badge | text)
     crushes the description into a sliver on phones and leaves big empty
     gaps beside the short date/badge. Stack date + badge on a top row and
     let the description span the full width below. */
  .timeline li {
    grid-template-columns: auto auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
    padding: 12px 0;
  }
  .timeline .ts { white-space: nowrap; }
  .timeline .ev { justify-self: start; }
  .timeline .ev-body { grid-column: 1 / -1; font-size: 17px; line-height: 1.5; }

  /* Compact the persistent HIDE control so it doesn't crowd content */
  .minimize-btn { top: 10px; right: 10px; padding: 8px 10px; font-size: 10px; }
}