@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root {
  --bg: #161229;
  --text: #fff7d6;
  --grid: rgba(255, 255, 255, 0.05);
  --nav-bg: #221a40;
  --panel-bg: #2b2150;
  --soft-bg: #35285f;
  --text-dim: #cabef5;
  --accent: #56d6ff;
  --accent2: #ff93c2;
  --button-bg: #ffe066;
  --button-text: #1a1530;
  --tag-bg: #3d2f6b;
  --outline: #fff7d6;
  --pink: #ff4f8b;
  --blue: #56d6ff;
  --yellow: #ffe066;
  --shadow-strong: 8px 8px 0 rgba(0, 0, 0, 0.45);
  --shadow-mid: 6px 6px 0 rgba(0, 0, 0, 0.35);
  --shadow-btn: 4px 4px 0 rgba(0, 0, 0, 0.45);
  --input-bg: #221a40;
  --input-text: #fff7d6;
  --placeholder: #a79acb;
}

body.light {
  --bg: #f8f2dc;
  --text: #2f2548;
  --grid: rgba(47, 37, 72, 0.08);
  --nav-bg: #fff9ea;
  --panel-bg: #fff9ea;
  --soft-bg: #fef3ff;
  --text-dim: #65577f;
  --accent: #0077c8;
  --accent2: #d24482;
  --button-bg: #ffd84d;
  --button-text: #2f2548;
  --tag-bg: #fff1b8;
  --outline: #2f2548;
  --pink: #ff7cab;
  --blue: #4cb5ff;
  --yellow: #ffd84d;
  --shadow-strong: 8px 8px 0 rgba(47, 37, 72, 0.25);
  --shadow-mid: 6px 6px 0 rgba(47, 37, 72, 0.18);
  --shadow-btn: 4px 4px 0 rgba(47, 37, 72, 0.28);
  --input-bg: #fffdf6;
  --input-text: #2f2548;
  --placeholder: #85789c;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "VT323", monospace;
  position: relative;
  overflow-x: hidden;
}

.bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: 0;
}

.container {
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 24px 0 40px;
}

.pixel-label,
.hero-title,
.project-name,
.archive-box span,
.footer-title {
  font-family: "Press Start 2P", monospace;
}

.pixel-label {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.no-margin {
  margin: 0;
}

.accent {
  color: var(--accent);
}

.accent-2 {
  color: var(--accent2);
}

.dim {
  color: var(--text-dim);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.site-header,
.card,
.small-card,
.inner-card,
.archive-box,
.site-footer,
.theme-toggle,
.email-link,
.main-button,
.message-form input,
.message-form textarea,
.nav-btn,
.status-tag {
  border: 3px solid var(--outline);
}

.site-header {
  background: var(--nav-bg);
  box-shadow: var(--shadow-mid);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.site-name {
  margin: 10px 0 0;
  font-size: 28px;
  font-weight: normal;
  line-height: 1;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.main-nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.nav-btn {
  background: transparent;
  color: var(--text);
  padding: 10px 14px;
  font-family: "VT323", monospace;
  font-size: 22px;
  cursor: pointer;
}

.nav-btn.active {
  color: var(--accent);
}

.theme-toggle {
  background: var(--soft-bg);
  box-shadow: var(--shadow-mid);
  padding: 4px;
  display: flex;
  gap: 4px;
}

.theme-toggle button {
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: "VT323", monospace;
  font-size: 18px;
  padding: 6px 12px;
  cursor: pointer;
}

.theme-toggle button.active {
  background: var(--blue);
  color: var(--button-text);
}

.page {
  display: none;
}

.page.active {
  display: block;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: start;
  padding: 32px 0 8px;
  position: relative;
}

.hero-title {
  margin: 24px 0 0;
  max-width: 700px;
  font-size: 28px;
  line-height: 1.7;
  font-weight: normal;
}

.main-button {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--button-bg);
  color: var(--button-text);
  padding: 16px 20px;
  box-shadow: var(--shadow-btn);
  font-family: "Press Start 2P", monospace;
  font-size: 12px;
  cursor: pointer;
}

.card {
  background: var(--panel-bg);
  box-shadow: var(--shadow-strong);
}

.card-header {
  border-bottom: 3px solid var(--outline);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.status-tag {
  background: var(--tag-bg);
  padding: 6px 12px;
  font-size: 18px;
}

.card-body {
  padding: 20px;
}

.inner-card,
.small-card,
.archive-box,
.email-card {
  background: var(--soft-bg);
  box-shadow: var(--shadow-mid);
}

.inner-card {
  padding: 24px;
}

.update-title {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: normal;
}

.color-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.color-box {
  height: 80px;
  border: 3px solid var(--outline);
  animation: pixelFloat 3.6s steps(6) infinite;
}

.color-box.pink { background: var(--pink); }
.color-box.blue { background: var(--blue); animation-duration: 2.8s; }
.color-box.yellow { background: var(--yellow); }

.dots {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  animation: pixelBlink 1.2s steps(2) infinite;
}

.dot {
  width: 8px;
  height: 8px;
}

.small-cards {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.small-card {
  padding: 16px;
}

.icon {
  margin: 0 0 10px;
  color: var(--accent2);
  font-size: 18px;
}

.small-title {
  margin: 0;
  font-size: 22px;
  line-height: 1;
  font-weight: normal;
}

.small-text,
.bio-card p {
  margin: 10px 0 0;
  font-size: 20px;
  line-height: 1.15;
  color: var(--text-dim);
}

.bio-card {
  display: grid;
  gap: 10px;
}

.bio-card p {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
}

.projects-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.portfolio-link {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: "VT323", monospace;
  font-size: 24px;
  cursor: pointer;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.project-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.project-card {
  min-height: 100%;
}

.video-preview {
  position: relative;
  height: 144px;
  overflow: hidden;
  border: 3px solid var(--outline);
  margin-bottom: 16px;
}

.gradient-1 {
  background: radial-gradient(circle at top, #ff8a5b 0%, #d24482 35%, #3b184f 72%, #120f1e 100%);
}

.gradient-2 {
  background: radial-gradient(circle at top, #7df9ff 0%, #4cb5ff 32%, #355cdd 68%, #161229 100%);
}

.gradient-4 {
  background: radial-gradient(circle at top, #9cffb1 0%, #55d6a9 32%, #2f8f83 70%, #13202c 100%);
}

.play-circle {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border: 3px solid #fff7d6;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff7d6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.progress {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 8px;
  border: 2px solid #fff7d6;
  background: rgba(0, 0, 0, 0.35);
}

.bar {
  display: block;
  height: 100%;
  background: #fff7d6;
}

.w38 { width: 38%; }
.w56 { width: 56%; }
.w72 { width: 72%; }

.project-name {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  font-weight: normal;
}

.soundcloud-wrap {
  margin-bottom: 16px;
  overflow: hidden;
  border: 3px solid var(--outline);
  background: #000;
}

.archive-stack {
  display: grid;
  gap: 16px;
}

.archive-box {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.archive-box span {
  font-size: 28px;
  line-height: 1.4;
  font-weight: normal;
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 24px;
  align-items: stretch;
}

.contact-left {
  height: 100%;
}

.center-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.email-card {
  width: 100%;
  padding: 24px;
}

.center-dots {
  justify-content: center;
}

.email-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 24px 16px;
  background: var(--tag-bg);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
}

.message-form {
  margin-top: 20px;
  display: grid;
  gap: 16px;
}

.message-form input,
.message-form textarea {
  width: 100%;
  background: var(--input-bg);
  color: var(--input-text);
  padding: 14px 16px;
  font-family: "VT323", monospace;
  font-size: 22px;
  outline: none;
}

.message-form input::placeholder,
.message-form textarea::placeholder {
  color: var(--placeholder);
}

.message-form textarea {
  min-height: 150px;
  resize: vertical;
}

.submit-btn {
  width: fit-content;
}

.site-footer {
  margin-top: 32px;
  background: var(--nav-bg);
  box-shadow: var(--shadow-mid);
  padding: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.footer-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: normal;
}

.site-footer p {
  margin: 0;
  font-size: 20px;
}

.footer-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--accent);
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.pixel-pianist {
  position: absolute;
  left: 42%;
  top: 23rem;
  z-index: 10;
  width: 126px;
  height: 104px;
  pointer-events: none;
  animation: avatarBob 2.8s steps(4) infinite;
}

.pixel-pianist-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.fish {
  position: fixed;
  display: grid;
  grid-template-columns: repeat(6, 6px);
  grid-template-rows: repeat(5, 6px);
  gap: 1px;
  z-index: 1;
  opacity: 0.85;
  pointer-events: none;
}

.fish span {
  width: 5px;
  height: 5px;
  background: var(--pink);
}

.fish-a span:nth-child(1),
.fish-b span:nth-child(1) { grid-column: 3; grid-row: 1; }
.fish-a span:nth-child(2),
.fish-b span:nth-child(2) { grid-column: 2; grid-row: 2; }
.fish-a span:nth-child(3),
.fish-b span:nth-child(3) { grid-column: 3; grid-row: 2; }
.fish-a span:nth-child(4),
.fish-b span:nth-child(4) { grid-column: 4; grid-row: 2; }
.fish-a span:nth-child(5),
.fish-b span:nth-child(5) { grid-column: 1; grid-row: 3; }
.fish-a span:nth-child(6),
.fish-b span:nth-child(6) { grid-column: 2; grid-row: 3; }
.fish-a span:nth-child(7),
.fish-b span:nth-child(7) { grid-column: 3; grid-row: 3; }
.fish-a span:nth-child(8),
.fish-b span:nth-child(8) { grid-column: 4; grid-row: 3; }
.fish-a span:nth-child(9),
.fish-b span:nth-child(9) { grid-column: 5; grid-row: 3; }
.fish-a span:nth-child(10),
.fish-b span:nth-child(10) { grid-column: 2; grid-row: 4; }
.fish-a span:nth-child(11),
.fish-b span:nth-child(11) { grid-column: 3; grid-row: 4; }
.fish-a span:nth-child(12),
.fish-b span:nth-child(12) { grid-column: 4; grid-row: 4; }
.fish-a span:nth-child(13),
.fish-b span:nth-child(13) { grid-column: 3; grid-row: 5; }

.fish-a {
  left: 32px;
  top: 96px;
  animation: fishSwimA 18s steps(18) infinite;
}

.fish-b {
  right: 96px;
  top: 176px;
  transform: scaleX(-1);
  animation: fishSwimB 16s steps(16) infinite;
}

.fish-b span {
  background: var(--blue);
}

@keyframes pixelFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes pixelBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes fishSwimA {
  0% { transform: translate(0px, 0px); }
  25% { transform: translate(140px, -16px); }
  50% { transform: translate(300px, 10px); }
  75% { transform: translate(430px, -14px); }
  100% { transform: translate(620px, 0px); }
}

@keyframes fishSwimB {
  0% { transform: scaleX(-1) translate(0px, 0px); }
  20% { transform: scaleX(-1) translate(-90px, 12px); }
  45% { transform: scaleX(-1) translate(-220px, -10px); }
  70% { transform: scaleX(-1) translate(-360px, 8px); }
  100% { transform: scaleX(-1) translate(-520px, -4px); }
}

@keyframes avatarBob {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

@media (max-width: 1100px) {
  .pixel-pianist {
    display: none;
  }
}

@media (max-width: 980px) {
  .hero-grid,
  .contact-grid,
  .projects-grid,
  .small-cards {
    grid-template-columns: 1fr;
  }

  .header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .site-header {
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 24px, 1200px);
  }

  .site-name {
    font-size: 24px;
  }

  .hero-title {
    font-size: 22px;
  }

  .update-title {
    font-size: 24px;
  }

  .project-name {
    font-size: 22px;
  }

  .archive-box span {
    font-size: 20px;
  }

  .email-link {
    font-size: 20px;
    word-break: break-word;
  }

  .fish {
    display: none;
  }
}