* {
  box-sizing: border-box;
}

.wine-intro {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  animation: intro-fade 2.5s ease 2.35s forwards;
}

.wine-scene {
  position: relative;
  z-index: 2;
  width: min(82vw, 520px);
  height: min(72vh, 430px);
  --swoop: clamp(180px, 43vw, 260px);
}

.wine-glass {
  position: absolute;
  bottom: 34px;
  width: 82px;
  height: 122px;
  border: 3px solid rgba(255, 217, 225, 0.78);
  border-radius: 8px 8px 42px 42px;
  background:
    linear-gradient(
      78deg,
      transparent 12%,
      rgba(255, 255, 255, 0.42) 18%,
      transparent 25%
    ),
    linear-gradient(
      to top,
      rgba(128, 7, 49, 0.96) 0 45%,
      rgba(113, 16, 53, 0.22) 46% 100%
    );
  box-shadow:
    inset 8px 0 10px rgba(255, 255, 255, 0.13),
    inset -10px 0 14px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(255, 151, 177, 0.3);
}

.wine-glass::before {
  content: "";
  position: absolute;
  top: 119px;
  left: 36px;
  width: 4px;
  height: 58px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.8),
    rgba(183, 132, 151, 0.45)
  );
}

.wine-glass::after {
  content: "";
  position: absolute;
  top: 174px;
  left: 4px;
  width: 74px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 217, 225, 0.8);
  box-shadow: 0 0 8px rgba(255, 151, 177, 0.45);
}

.wine-glass span {
  position: absolute;
  top: 40px;
  left: 9px;
  width: 58px;
  height: 4px;
  border-radius: 50%;
  background: linear-gradient(90deg, #65062c, #ff9bae 45%, #7e0c39);
  box-shadow:
    0 0 7px rgba(255, 168, 195, 0.7),
    inset 0 1px 1px rgba(255, 239, 243, 0.65);
  transform-origin: 50% 50%;
}

.wine-glass-left {
  left: -90px;
  transform: rotate(-32deg);
  transform-origin: 50% 100%;
  animation: glass-left 2s cubic-bezier(0.45, 0, 0.55, 1) 0s forwards;
}

.wine-glass-left span {
  animation: wine-slosh-left 0.85s ease-out 1.35s forwards;
}

.wine-glass-right {
  right: -90px;
  transform: rotate(32deg);
  transform-origin: 50% 100%;
  animation: glass-right 2s cubic-bezier(0.45, 0, 0.55, 1) 0s forwards;
}

.wine-glass-right span {
  animation: wine-slosh-right 0.85s ease-out 1.35s forwards;
}

.wine-bottle {
  position: absolute;
  width: 70px;
  height: 230px;
  border: 3px solid rgba(255, 146, 169, 0.8);
  border-radius: 22px 22px 12px 12px;
  background:
    linear-gradient(
      78deg,
      transparent 12%,
      rgba(255, 211, 220, 0.26) 18%,
      transparent 25%
    ),
    linear-gradient(
      90deg,
      #17000d 0%,
      #590526 18%,
      #a51d4f 46%,
      #4b0523 76%,
      #12000a 100%
    );
  box-shadow:
    inset 8px 0 10px rgba(255, 194, 207, 0.16),
    inset -10px 0 14px rgba(0, 0, 0, 0.52),
    0 0 26px rgba(233, 69, 96, 0.35);
}

.wine-bottle::before {
  content: "";
  position: absolute;
  top: -72px;
  left: 17px;
  width: 30px;
  height: 75px;
  border: 3px solid rgba(255, 146, 169, 0.8);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background:
    linear-gradient(
      78deg,
      transparent 10%,
      rgba(255, 211, 220, 0.3) 19%,
      transparent 28%
    ),
    linear-gradient(90deg, #16000d, #69082e 48%, #260014);
  box-shadow: inset 5px 0 7px rgba(255, 202, 215, 0.16);
}

.wine-bottle::after {
  content: "WINE";
  position: absolute;
  top: 92px;
  left: 7px;
  width: 50px;
  padding: 8px 0;
  color: #ffd6df;
  background: linear-gradient(90deg, #8f123d, #e94560 48%, #94133e);
  border: 1px solid rgba(255, 214, 223, 0.55);
  box-shadow: 0 2px 7px rgba(20, 0, 10, 0.35);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: center;
}

.wine-bottle span {
  position: absolute;
  top: -82px;
  left: 16px;
  width: 34px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(90deg, #57002e, #d4247f 48%, #680039);
  box-shadow: inset 3px 2px 4px rgba(255, 180, 214, 0.3);
}

.wine-bottle-left {
  left: 86px;
  transform: rotate(-24deg);
  transform-origin: 50% 100%;
  animation: bottle-left 2s cubic-bezier(0.45, 0, 0.55, 1) 0s forwards;
}

.wine-bottle-right {
  right: 86px;
  transform: rotate(24deg);
  transform-origin: 50% 100%;
  animation: bottle-right 2s cubic-bezier(0.45, 0, 0.55, 1) 0s forwards;
}

.wine-clink {
  position: absolute;
  top: 38%;
  left: 50%;
  color: #ffd6df;
  font-size: clamp(1.2rem, 4vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.2em;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  animation: clink 0.55s ease 1.3s forwards;
}

.wine-burst {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 12px;
  height: 12px;
  opacity: 0;
  animation: burst 0.9s ease 1.8s forwards;
}

.wine-burst i {
  position: absolute;
  width: 10px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(90deg, #7b0a35, #ff9bad 48%, #c61c5b);
  box-shadow: 0 0 10px rgba(255, 130, 153, 0.75);
  transform-origin: 50% 80px;
  transform: rotate(calc(var(--angle) * 1deg)) translateY(-54px);
}

.wine-burst i:nth-child(1) {
  --angle: 0;
}
.wine-burst i:nth-child(2) {
  --angle: 45;
}
.wine-burst i:nth-child(3) {
  --angle: 90;
}
.wine-burst i:nth-child(4) {
  --angle: 135;
}
.wine-burst i:nth-child(5) {
  --angle: 180;
}
.wine-burst i:nth-child(6) {
  --angle: 225;
}
.wine-burst i:nth-child(7) {
  --angle: 270;
}
.wine-burst i:nth-child(8) {
  --angle: 315;
}

.wine-liquid {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.wine-drop,
.wine-drip {
  position: absolute;
  top: -50px;
  display: block;
  border-radius: 50% 50% 55% 55%;
  background: linear-gradient(135deg, #ff9bad, #9b1245 55%, #4d0626);
  box-shadow: 0 0 12px rgba(255, 130, 153, 0.45);
  animation: liquid-fall 4.8s linear infinite;
}

.wine-drop {
  width: 10px;
  height: 18px;
}

.wine-drip {
  width: 16px;
  height: 46px;
  opacity: 0.78;
}

.drop-one {
  left: 8%;
  animation-delay: 0.2s;
}

.drop-two {
  left: 22%;
  animation-delay: 1.7s;
}

.drop-three {
  left: 41%;
  animation-delay: 0.9s;
}

.drop-four {
  left: 63%;
  animation-delay: 2.4s;
}

.drop-five {
  left: 79%;
  animation-delay: 1.2s;
}

.drop-six {
  left: 93%;
  animation-delay: 3s;
}

.drip-one {
  left: 15%;
  animation-delay: 2.1s;
}

.drip-two {
  left: 34%;
  animation-delay: 3.2s;
}

.drip-three {
  left: 55%;
  animation-delay: 1.5s;
}

.drip-four {
  left: 73%;
  animation-delay: 2.8s;
}

.drip-five {
  left: 87%;
  animation-delay: 0.6s;
}

.site-content {
  opacity: 1;
}

.white-flakes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.white-flakes i {
  position: absolute;
  top: -14px;
  left: var(--flake-left);
  width: var(--flake-size);
  height: var(--flake-size);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.5);
  animation: flake-fall var(--flake-duration) linear var(--flake-delay) infinite;
}

nav > h1,
nav > #nav-ul {
  position: relative;
  z-index: 2;
}

.white-flakes i:nth-child(1) {
  --flake-left: 5%;
  --flake-size: 4px;
  --flake-duration: 8s;
  --flake-delay: -1s;
}
.white-flakes i:nth-child(2) {
  --flake-left: 14%;
  --flake-size: 7px;
  --flake-duration: 11s;
  --flake-delay: -6s;
}
.white-flakes i:nth-child(3) {
  --flake-left: 25%;
  --flake-size: 3px;
  --flake-duration: 7s;
  --flake-delay: -3s;
}
.white-flakes i:nth-child(4) {
  --flake-left: 36%;
  --flake-size: 6px;
  --flake-duration: 10s;
  --flake-delay: -8s;
}
.white-flakes i:nth-child(5) {
  --flake-left: 47%;
  --flake-size: 4px;
  --flake-duration: 9s;
  --flake-delay: -4s;
}
.white-flakes i:nth-child(6) {
  --flake-left: 58%;
  --flake-size: 8px;
  --flake-duration: 12s;
  --flake-delay: -10s;
}
.white-flakes i:nth-child(7) {
  --flake-left: 70%;
  --flake-size: 3px;
  --flake-duration: 7.5s;
  --flake-delay: -2s;
}
.white-flakes i:nth-child(8) {
  --flake-left: 82%;
  --flake-size: 5px;
  --flake-duration: 10.5s;
  --flake-delay: -7s;
}
.white-flakes i:nth-child(9) {
  --flake-left: 91%;
  --flake-size: 4px;
  --flake-duration: 8.5s;
  --flake-delay: -5s;
}
.white-flakes i:nth-child(10) {
  --flake-left: 19%;
  --flake-size: 3px;
  --flake-duration: 9.5s;
  --flake-delay: -9s;
}
.white-flakes i:nth-child(11) {
  --flake-left: 64%;
  --flake-size: 5px;
  --flake-duration: 11.5s;
  --flake-delay: -11s;
}
.white-flakes i:nth-child(12) {
  --flake-left: 98%;
  --flake-size: 6px;
  --flake-duration: 13s;
  --flake-delay: -4s;
}

@keyframes flake-fall {
  0% {
    top: -14px;
    transform: translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.85;
  }
  50% {
    top: 50%;
    transform: translateX(24px) rotate(180deg);
  }
  90% {
    opacity: 0.85;
  }
  100% {
    top: calc(100% + 20px);
    transform: translateX(-18px) rotate(360deg);
    opacity: 0;
  }
}

.soundtrack-widget {
  position: fixed;
  bottom: 24px;
  right: 28px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 8px;
  border: 1px solid rgba(255, 188, 204, 0.45);
  background: rgba(19, 0, 13, 0.88);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.music-visualizer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 100vh;
  padding: 10px 12px 0;
  opacity: 0.48;
  pointer-events: none;
}

.music-visualizer-bar {
  flex: 1 1 0;
  min-width: 3px;
  height: 5%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, #e94560, #ffb2c5);
  box-shadow: 0 0 8px rgba(233, 69, 96, 0.5);
  transition: height 80ms ease-out;
}

.neo-triangle-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.neo-triangle-layer {
  z-index: 2;
  overflow: hidden;
}

.neo-triangle {
  position: absolute;
  top: var(--triangle-top);
  right: -24px;
  width: calc(var(--triangle-size) + 4px);
  height: calc(var(--triangle-size) + 4px);
  background: #ff1493;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 4px #ff69b4) drop-shadow(0 0 11px #ff1493);
  opacity: 0;
  transform: rotate(var(--triangle-tilt)) scale(calc(0.62 * var(--beat-pulse)));
  animation: neo-triangle-flight 4.2s linear var(--triangle-delay) forwards;
}

.neo-triangle::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: rgba(11, 7, 11, 0.86);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.neo-triangle.is-solid::after {
  display: none;
}

@keyframes neo-triangle-flight {
  0% {
    opacity: 0;
    transform: translateX(0) rotate(var(--triangle-tilt))
      skewX(calc(var(--beat-warp) * 18deg))
      skewY(calc(var(--beat-warp) * -10deg))
      scale(calc(0.62 * var(--beat-pulse)));
  }
  10% {
    opacity: 0.92;
  }
  55% {
    opacity: 0.8;
  }
  78% {
    opacity: 0.42;
  }
  100% {
    opacity: 0;
    transform: translateX(var(--triangle-travel)) rotate(220deg)
      skewX(calc(var(--beat-warp) * 18deg))
      skewY(calc(var(--beat-warp) * -10deg))
      scale(calc(0.82 * var(--beat-pulse)));
  }
}

.record-disc {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 2px solid #ffb2c5;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #1a0711 0 3px, #5d062d 4px 5px);
  animation: record-spin 4s linear infinite;
}

.record-disc span {
  width: 9px;
  height: 9px;
  border: 2px solid #ffb2c5;
  border-radius: 50%;
  background: #13000d;
}

.soundtrack-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.soundtrack-controls button {
  border: 1px solid #e94560;
  padding: 6px 8px;
  cursor: pointer;
  background: #e94560;
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
}

.volume-control input {
  width: 68px;
  accent-color: #ffb2c5;
  cursor: pointer;
}

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

@keyframes record-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes glass-left {
  0%,
  18% {
    transform: translate(-20px, 90px) rotate(-32deg) scale(0.86);
    opacity: 1;
  }
  68% {
    transform: translate(var(--swoop), -20px) rotate(-9deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--swoop), -20px) rotate(-9deg) scale(0.35);
    opacity: 0;
  }
}

@keyframes glass-right {
  0%,
  18% {
    transform: translate(20px, 90px) rotate(32deg) scale(0.86);
    opacity: 1;
  }
  68% {
    transform: translate(calc(var(--swoop) * -1), -20px) rotate(9deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--swoop) * -1), -20px) rotate(9deg)
      scale(0.35);
    opacity: 0;
  }
}

@keyframes wine-slosh-left {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  24% {
    transform: rotate(-16deg) translateY(-7px);
  }
  52% {
    transform: rotate(13deg) translateY(5px);
  }
  78% {
    transform: rotate(-6deg) translateY(-2px);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}

@keyframes wine-slosh-right {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  24% {
    transform: rotate(16deg) translateY(-7px);
  }
  52% {
    transform: rotate(-13deg) translateY(5px);
  }
  78% {
    transform: rotate(6deg) translateY(-2px);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}

@keyframes clink {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  35%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes burst {
  0% {
    opacity: 1;
    transform: scale(0.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

@keyframes site-reveal {
  to {
    opacity: 1;
  }
}

@keyframes intro-fade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes liquid-fall {
  0%,
  3% {
    transform: translateY(0);
    opacity: 0;
  }
  12%,
  40% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100vh + 100px));
    opacity: 0;
  }
}

@keyframes drip-stretch {
  0% {
    transform: scaleY(0.1);
  }
  55% {
    transform: scaleY(1.12);
  }
  100% {
    transform: scaleY(0.95);
  }
}

@keyframes liquid-shimmer {
  from {
    transform: translateX(-16%);
    opacity: 0.25;
  }
  to {
    transform: translateX(16%);
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wine-intro {
    display: none;
  }
  .wine-liquid {
    display: none;
  }
  .site-content {
    opacity: 1;
  }
  nav::before {
    animation: none;
  }
  .neo-triangle-layer {
    display: none;
  }
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: #13000d;
  color: #000000;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.mouse-trail-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.mouse-trail {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 112, 188, 0.95);
  box-shadow: 0 0 8px rgba(255, 112, 188, 0.8);
  transform: translate(-50%, -50%);
  animation: mouse-trail 0.45s ease-out forwards;
}

@keyframes mouse-trail {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: 0;
  background:
    linear-gradient(
      115deg,
      transparent 0 18%,
      rgba(177, 15, 94, 0.12) 19%,
      transparent 20% 46%,
      rgba(255, 50, 125, 0.08) 47%,
      transparent 48%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 42px,
      rgba(255, 112, 166, 0.055) 43px,
      transparent 44px 86px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 42px,
      rgba(255, 112, 166, 0.04) 43px,
      transparent 44px 86px
    ),
    radial-gradient(
      ellipse at 50% -15%,
      rgba(184, 9, 94, 0.45),
      transparent 48%
    ),
    linear-gradient(135deg, #16000f, #4a052c 48%, #10000b);
  background-size:
    180% 180%,
    86px 86px,
    86px 86px,
    100% 100%,
    100% 100%;
  animation: gothic-drift 18s ease-in-out infinite alternate;
}

body::after {
  z-index: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 35%,
    rgba(0, 0, 0, 0.52) 100%
  );
}

#all-contents {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 32px 40px;
}

@keyframes gothic-drift {
  from {
    background-position:
      0% 0%,
      0 0,
      0 0,
      50% 0,
      0 0;
  }
  to {
    background-position:
      12% 8%,
      43px 22px,
      -22px 43px,
      50% 8%,
      0 0;
  }
}
main {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(420px, 1.6fr);
  align-items: center;
  min-height: calc(100vh - 160px);
  gap: clamp(32px, 5vw, 80px);
}

.sidebar {
  width: 100%;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
h2 {
  margin: 0;
  font-size: clamp(4rem, 10vw, 7rem);
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #000;
}

.name-word {
  display: inline-block;
  color: transparent;
  background-size: 240% 100%;
  background-position: 200% 0;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 7px rgba(255, 72, 132, 0.32));
  transition: filter 0.4s ease;
}

.name-jacob {
  background-image: linear-gradient(
    110deg,
    #5d062d 0 40%,
    #a11f4a 50%,
    #7c0f35 60% 100%
  );
}

.name-gardner {
  background-image: linear-gradient(
    110deg,
    #036b4c 0 40%,
    #05a364 50%,
    #06643d 60% 100%
  );
  filter: drop-shadow(0 0 7px rgba(43, 191, 136, 0.34));
}

.name-word:hover {
  animation: name-flash 7s ease-in-out infinite;
}

.name-jacob:hover {
  filter: drop-shadow(0 0 13px rgba(255, 72, 132, 0.75));
}

.name-gardner:hover {
  filter: drop-shadow(0 0 13px rgba(43, 191, 136, 0.78));
}

@keyframes name-flash {
  0%,
  38%,
  100% {
    background-position: 200% 0;
  }
  78% {
    background-position: -40% 0;
  }
}

.content > p {
  margin: 0;
  color: #999;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1.4;
}
h2 {
  color: #e94560; /* bright accent */
}

.content p {
  color: #a8b2d8;
}
#interests {
  margin-top: 32px;
  width: 100%;
}

#interests h3 {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #ffffff;
}

#interests ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#interests li {
  color: #ca007d;
  font-size: 1rem;
  font-weight: 600;
  padding: 10px 20px;
  background: #47002c;
  border: 1px solid #ca007d;
  border-radius: 100px;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
  cursor: default;
}

#interests li:hover {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
  transform: translateY(-2px);
}

.sidebar-img {
  width: 100%;
  max-width: 760px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  filter: grayscale(0%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transition:
    filter 0.4s ease,
    transform 0.4s ease,
    box-shadow 0.4s ease;
}
.sidebar-img:hover {
  filter: saturate(110%);
  transform: translateY(-4px);
  box-shadow: 0 90px 80px rgba(0, 0, 0, 0.18);
}
.sidebar-img {
  width: 100%;
  max-width: 760px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
nav {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
  padding: 16px 24px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
}
nav h1 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #000;
}
#nav-ul {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.nav-li a {
  color: #666;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 8px;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}
.nav-li a:hover {
  background: #000;
  color: #fff;
}
nav {
  background: #1a1a2e;
  border-color: #1a1a2e;
}
nav::before {
  content: "";
  position: absolute;
  top: 8px;
  right: -20px;
  width: 230px;
  height: calc(100% - 16px);
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      circle at 8% 22%,
      rgba(255, 255, 255, 0.9) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 26% 72%,
      rgba(255, 255, 255, 0.65) 0 1.5px,
      transparent 2.5px
    ),
    radial-gradient(
      circle at 48% 38%,
      rgba(255, 255, 255, 0.8) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 70% 84%,
      rgba(255, 255, 255, 0.55) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 88% 12%,
      rgba(255, 255, 255, 0.8) 0 1.5px,
      transparent 2.5px
    );
  background-size: 100% 100%;
  filter: blur(0.2px);
  animation: ash-flight 5.5s linear infinite;
}
nav h1 {
  color: #e94560;
}
.nav-li a {
  color: #a8b2d8;
  position: relative;
  z-index: 1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  font-style: italic;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.nav-li a:hover {
  background: #e94560;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.75);
}

@keyframes ash-flight {
  0% {
    opacity: 0;
    transform: translateX(30px) translateY(2px) rotate(0deg);
  }
  12%,
  72% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateX(-430px) translateY(-7px) rotate(16deg);
  }
}
/* Portfolio styles */
.portfolio-main {
  display: block;
  min-height: auto;
}

.portfolio-content {
  align-items: center;
  width: 100%;
  text-align: center;
}

.portfolio-content h1 {
  margin: 0;
  color: #f7d6e5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-style: italic;
  letter-spacing: 0.02em;
}

#portfolio {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(100%, 760px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#portfolio li {
  border-radius: 12px;
  overflow: hidden;
}

#portfolio a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #444;
  text-align: center;
  padding: 16px 20px;
  font-size: 1.1rem;
  font-weight: 500;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

#portfolio a:hover {
  background: #000;
  color: #fff;
  transform: translateX(4px);
}

#portfolio a::after {
  content: "->";
  font-size: 0.85rem;
  opacity: 0.4;
  transition: opacity 0.25s ease;
  white-space: nowrap;
}

#portfolio a:hover::after {
  opacity: 1;
}

/* Portfolio page */
.portfolio-page {
  background: #0b070b;
  color: #ead8d0;
  font-family: Georgia, "Times New Roman", serif;
}

.portfolio-page::before {
  background:
    linear-gradient(
      135deg,
      transparent 0 46%,
      rgba(214, 90, 102, 0.12) 47%,
      transparent 48%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 84px,
      rgba(210, 163, 124, 0.045) 85px,
      transparent 86px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 84px,
      rgba(214, 90, 102, 0.035) 85px,
      transparent 86px
    ),
    radial-gradient(
      circle at 20% 30%,
      rgba(214, 90, 102, 0.18),
      transparent 22%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(210, 163, 124, 0.13),
      transparent 24%
    ),
    linear-gradient(145deg, #090609, #260d1a 52%, #080508);
  animation: portfolio-drift 16s ease-in-out infinite alternate;
}

.portfolio-page::after {
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(0, 0, 0, 0.72) 100%
  );
}

.portfolio-page nav {
  background: rgba(12, 7, 12, 0.94);
  border: 1px solid #70404c;
  border-radius: 2px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.42),
    inset 0 -2px 0 #2b111c;
}

.portfolio-page nav h1 {
  color: #d6a47e;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.28em;
}

.portfolio-page .nav-li a {
  color: #cbaeb0;
  border-radius: 0;
  font-style: normal;
  letter-spacing: 0.08em;
}

.portfolio-page .nav-li a[aria-current="page"] {
  color: #f0c69f;
  box-shadow: inset 0 -1px 0 #d65a66;
}

.portfolio-page .nav-li a:hover {
  background: #651b2d;
  color: #f7e5d4;
}

.portfolio-page .portfolio-content {
  gap: 22px;
}

.portfolio-page .portfolio-content h1 {
  color: #f0d6c6;
  text-shadow:
    2px 3px 0 #4e1726,
    0 0 24px rgba(212, 82, 92, 0.32);
}

.portfolio-page .portfolio-content h3 {
  margin: 0;
  color: #d6a47e;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.portfolio-page #portfolio {
  gap: 14px;
}

.portfolio-page #portfolio li {
  width: 100%;
}

.portfolio-page #portfolio a {
  justify-content: space-between;
  padding: 20px 24px;
  border: 1px solid #754354;
  border-radius: 2px;
  background: linear-gradient(145deg, #25121c, #09070c 72%);
  color: #edd6cc;
  box-shadow:
    0 9px 20px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(214, 164, 126, 0.08);
  text-align: left;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.portfolio-page #portfolio a:hover {
  background: linear-gradient(145deg, #461727, #160b12 72%);
  border-color: #d65a66;
  color: #fff1e7;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.48),
    0 0 18px rgba(214, 90, 102, 0.22);
  transform: translateX(8px);
}

.portfolio-page #portfolio a::after {
  color: #d6a47e;
  content: "[ open ]";
  letter-spacing: 0.08em;
}

@keyframes portfolio-drift {
  from {
    background-position:
      0% 0%,
      0 0,
      0 0,
      20% 30%,
      80% 70%,
      50% 0;
  }
  to {
    background-position:
      12% 8%,
      43px 22px,
      -22px 43px,
      28% 38%,
      72% 62%,
      50% 8%;
  }
}

/* Music page */
.music-page {
  background: #0b070b;
  color: #ead8d0;
  font-family: Georgia, "Times New Roman", serif;
}

.music-page::before {
  background:
    linear-gradient(
      135deg,
      transparent 0 47%,
      rgba(173, 29, 58, 0.12) 48%,
      transparent 49%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 84px,
      rgba(210, 163, 124, 0.035) 85px,
      transparent 86px
    ),
    radial-gradient(
      ellipse at 50% 0%,
      rgba(122, 17, 39, 0.56),
      transparent 52%
    ),
    linear-gradient(145deg, #090609, #260d1a 52%, #080508);
}

.music-page::after {
  background:
    linear-gradient(
      90deg,
      rgba(8, 4, 8, 0.48),
      transparent 18% 82%,
      rgba(8, 4, 8, 0.48)
    ),
    radial-gradient(
      ellipse at center,
      transparent 30%,
      rgba(0, 0, 0, 0.72) 100%
    );
}

.music-page nav {
  background: rgba(12, 7, 12, 0.94);
  border: 1px solid #70404c;
  border-radius: 2px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.42),
    inset 0 -2px 0 #2b111c;
}

.music-page nav h1 {
  color: #d6a47e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.88rem;
  letter-spacing: 0.28em;
}

.music-page .nav-li a {
  color: #cbaeb0;
  border-radius: 0;
  font-style: normal;
  letter-spacing: 0.08em;
}

.music-page .nav-li a[aria-current="page"] {
  color: #f0c69f;
  box-shadow: inset 0 -1px 0 #d65a66;
}

.music-page .nav-li a:hover {
  background: #651b2d;
  color: #f7e5d4;
}

.music-page .music-content h2 {
  color: #f0d6c6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem, 7vw, 5.8rem);
  font-style: normal;
  letter-spacing: 0.08em;
  text-shadow:
    2px 3px 0 #4e1726,
    0 0 24px rgba(212, 82, 92, 0.32);
  text-transform: uppercase;
}

.music-page .music-subtitle {
  color: #d6a47e;
  letter-spacing: 0.3em;
}

.music-page .music-description {
  color: #d8c0bd;
}

.music-page .artist-name {
  color: #df6870;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  text-transform: uppercase;
}

.music-page .boombox {
  border-color: #7f3948;
  border-radius: 2px;
  background: linear-gradient(145deg, #25121c, #09070c 72%);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.58),
    0 0 30px rgba(142, 31, 53, 0.22);
}

.music-page .boombox-label {
  color: #d6a47e;
  letter-spacing: 0.28em;
}

.music-page .boombox-controls button {
  border-radius: 0;
  border-color: #a64c58;
  background: #641b2d;
  color: #f3dfd0;
}

.music-page .boombox-controls button:hover:not(:disabled) {
  background: #a33a4a;
}

.music-page .tape-shelf {
  border-color: #754354;
  border-radius: 2px;
  color: #d6a47e;
  background: rgba(10, 5, 10, 0.34);
}

.music-page .vhs-tape {
  border-color: #8e3c4d;
  border-radius: 2px;
  background: linear-gradient(145deg, #301521, #0b070d);
  color: #edd6cc;
  box-shadow:
    0 9px 20px rgba(0, 0, 0, 0.48),
    inset 0 0 0 1px rgba(214, 164, 126, 0.16);
}

.music-page .music-status {
  color: #caa5a5;
}

.music-main {
  display: block;
  min-height: auto;
}

.music-page-visualizer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 30vh;
  padding: 10px 12px 0;
  opacity: 0.55;
  pointer-events: none;
}

.music-page-visualizer-bar {
  flex: 1 1 0;
  min-width: 3px;
  height: 4%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, #e94560, #ffb2c5);
  box-shadow: 0 0 8px rgba(233, 69, 96, 0.45);
  transition: height 90ms ease-out;
}

.music-content {
  align-items: center;
  width: 100%;
  text-align: center;
}

.music-content h2 {
  color: #f7d6e5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
}

.music-subtitle {
  color: #d6a6bd;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.music-description {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 28px;
  width: 100%;
  margin-top: 4px;
  color: #f7d6e5;
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.music-description p {
  margin: 0;
}

.artist-name {
  color: #ffb2c5;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 1.25em;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.music-stage {
  display: grid;
  place-items: center;
  gap: 28px;
  width: min(100%, 760px);
  margin: 28px auto 0;
}

.boombox {
  position: relative;
  width: min(100%, 620px);
  padding: 28px 150px 30px 34px;
  border: 3px solid #e94560;
  border-radius: 10px;
  background: linear-gradient(145deg, #2c1b2c, #100b19 70%);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.42),
    0 0 26px rgba(233, 69, 96, 0.18);
}

.boombox::before,
.boombox::after {
  content: "";
  position: absolute;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f7d6e5;
  box-shadow: 0 0 8px #e94560;
}

.boombox::before {
  left: 16px;
}

.boombox::after {
  right: 16px;
}

.boombox-label {
  margin: 0 0 22px;
  color: #f7d6e5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.speaker-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.boombox-controls {
  display: flex;
  position: absolute;
  top: 50%;
  right: 18px;
  width: 112px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-left: 10px;
  border-left: 1px solid #5b334f;
  transform: translateY(-50%);
}

.boombox-controls button {
  width: 78px;
  border: 1px solid #e94560;
  padding: 7px 12px;
  cursor: pointer;
  background: #e94560;
  color: #fff;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
}

.boombox-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.boombox-volume {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 7px;
  color: #d6a6bd;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.boombox-volume input {
  width: 88px;
  accent-color: #ffb2c5;
}

.speaker {
  width: clamp(92px, 18vw, 140px);
  aspect-ratio: 1;
  border: 8px solid #4b2744;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #2b162b 0 5px, #542342 6px 8px);
  box-shadow:
    inset 0 0 0 4px #120b18,
    0 0 0 2px #8b4260;
}

.tape-deck {
  display: grid;
  place-items: center;
  width: min(42%, 220px);
  aspect-ratio: 1.7;
  border: 2px solid #9d5675;
  border-radius: 5px;
  background: #0a0710;
  box-shadow: inset 0 0 18px rgba(233, 69, 96, 0.16);
}

.deck-window {
  display: grid;
  place-items: center;
  width: 84%;
  height: 58%;
  border: 1px solid #5b334f;
  color: #d6a6bd;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.deck-window.loaded {
  color: #f7d6e5;
  background: rgba(233, 69, 96, 0.22);
}

.tape-shelf {
  display: grid;
  place-items: center;
  gap: 10px;
  width: min(100%, 400px);
  min-height: 140px;
  border: 1px dashed #9d5675;
  border-radius: 8px;
  color: #d6a6bd;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tape-list {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.vhs-tape {
  position: relative;
  width: 165px;
  height: 94px;
  padding: 12px;
  cursor: grab;
  border: 3px solid #e94560;
  border-radius: 6px;
  background: linear-gradient(145deg, #241527, #0d0913);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  color: #f7d6e5;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
}

.vhs-tape:active {
  cursor: grabbing;
}

.reel {
  position: absolute;
  top: 25px;
  width: 27px;
  height: 27px;
  border: 6px dotted #d6a6bd;
  border-radius: 50%;
}

.reel-left {
  left: 18px;
}

.reel-right {
  right: 18px;
}

.tape-name {
  display: block;
  margin-top: 2px;
  text-align: center;
}

.music-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.music-controls button {
  border: 1px solid #e94560;
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
  background: #e94560;
  color: #fff;
  font: inherit;
  font-weight: 700;
}

.music-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.music-status {
  margin: 0;
  color: #d6a6bd;
  font-size: 0.85rem;
}

.native-audio {
  display: none;
}

/* Coding page */
.coding-page {
  background: #0d0b0a;
  color: #e8e0da;
}

.coding-page::before {
  display: block;
  z-index: 7;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.coding-page #all-contents {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 0 34px;
}

.coding-page nav {
  position: relative;
  z-index: 8;
  margin: 0 -34px;
  padding: 18px 34px;
  background: rgba(15, 12, 12, 0.74);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

.coding-main {
  display: block;
  min-height: calc(100vh - 83px);
}

.coding-content {
  align-items: center;
  width: 100%;
  text-align: center;
}

.desk-scene {
  position: relative;
  min-height: calc(100vh - 83px);
  overflow: hidden;
  perspective: 900px;
  isolation: isolate;
}

.desk-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 48%,
    rgba(0, 0, 0, 0.3) 100%
  );
  mix-blend-mode: multiply;
}

.room-wall {
  position: absolute;
  inset: 0 0 34%;
  z-index: -3;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035),
      transparent 28%,
      rgba(0, 0, 0, 0.18)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 118px,
      rgba(255, 255, 255, 0.025) 119px 120px
    ),
    radial-gradient(
      circle at 37% 25%,
      rgba(255, 255, 255, 0.06) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 74% 66%,
      rgba(0, 0, 0, 0.12) 0 1px,
      transparent 2px
    ),
    linear-gradient(135deg, #171b1a, #0b100f 62%, #050807);
  background-size:
    17px 19px,
    23px 21px,
    auto;
}

.room-wall::after {
  content: "";
  position: absolute;
  right: 11%;
  top: 14%;
  width: 1px;
  height: 34%;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 45px 18px rgba(76, 214, 143, 0.035);
}

.wall-binary {
  position: absolute;
  inset: 0 0 40% 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  filter: blur(0.2px);
}

.wall-binary span {
  position: absolute;
  top: -12%;
  left: var(--x);
  display: block;
  color: rgba(120, 255, 185, 0.2);
  font-family: "Courier New", monospace;
  font-size: clamp(3.4rem, 7vw, 8.2rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 0 18px rgba(120, 255, 185, 0.18);
  opacity: 0;
  animation: wall-binary-fall var(--duration) linear infinite;
  animation-delay: var(--delay);
}

@keyframes wall-binary-fall {
  0% {
    transform: translate3d(0, -18%, 0) scale(0.75);
    opacity: 0;
  }
  12% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: translate3d(0, 130vh, 0) scale(1.2);
    opacity: 0;
  }
}

.desk-light {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 50%;
  height: 70%;
  z-index: -2;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse,
    rgba(53, 205, 131, 0.095),
    transparent 67%
  );
}

.monitor {
  position: absolute;
  z-index: 2;
  bottom: 30%;
  width: clamp(150px, 20vw, 285px);
  transform: rotateY(var(--tilt));
  transform-style: preserve-3d;
}

.monitor-left {
  left: 12%;
  --tilt: 3deg;
}
.monitor-right {
  right: 12%;
  --tilt: -3deg;
}

.laptop-computer {
  position: absolute;
  bottom: 29%;
  left: 50%;
  z-index: 3;
  width: clamp(190px, 29vw, 380px);
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 15px rgba(0, 0, 0, 0.44));
}

.monitor-bezel {
  position: relative;
  height: clamp(120px, 18vw, 235px);
  padding: 10px;
  border: 3px solid #343439;
  border-radius: 8px;
  background: linear-gradient(
    145deg,
    #55565a 0%,
    #242529 19%,
    #111216 52%,
    #36373a 100%
  );
  box-shadow:
    0 20px 27px rgba(0, 0, 0, 0.45),
    inset 2px 2px 4px rgba(255, 255, 255, 0.18),
    inset -3px -4px 6px rgba(0, 0, 0, 0.45);
}

.monitor-bezel::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #7de8c2;
  box-shadow: 0 0 8px #7de8c2;
}

.monitor-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  height: 100%;
  overflow: hidden;
  padding: 9%;
  color: #b8ffd8;
  background:
    linear-gradient(
      103deg,
      rgba(255, 255, 255, 0.1),
      transparent 12% 79%,
      rgba(255, 255, 255, 0.035) 88%,
      transparent 94%
    ),
    #020604;
  box-shadow:
    inset 0 0 28px rgba(43, 231, 158, 0.24),
    0 0 14px rgba(65, 245, 173, 0.13);
  font-family: "Courier New", monospace;
  text-align: left;
}

.monitor-screen::before {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 4px,
    rgba(255, 255, 255, 0.035) 5px
  );
  box-shadow:
    inset 18px 0 20px rgba(255, 255, 255, 0.025),
    inset -18px 0 20px rgba(0, 0, 0, 0.16);
}

.monitor-screen span {
  color: #7de8c2;
  font-size: clamp(0.42rem, 0.9vw, 0.68rem);
}
.monitor-screen b {
  color: #8dffb9;
  font-size: clamp(0.48rem, 1.2vw, 0.85rem);
  font-weight: 400;
  white-space: nowrap;
}
.monitor-screen em {
  color: #5fbd86;
  font-size: clamp(0.42rem, 1vw, 0.68rem);
  font-style: normal;
}

.binary-stream {
  position: absolute;
  top: -55%;
  left: 9%;
  display: flex;
  justify-content: space-between;
  width: 82%;
  height: 155%;
  color: #52ff98;
  font-family: "Courier New", monospace;
  font-size: clamp(0.32rem, 0.76vw, 0.58rem);
  letter-spacing: 0.04em;
  opacity: 0.84;
  white-space: normal;
  line-height: 1.45;
  text-shadow: 0 0 5px rgba(101, 217, 181, 0.7);
  animation: binary-fall 7s linear -1.4s infinite;
  text-shadow: 0 0 5px rgba(82, 255, 152, 0.82);
}

.binary-stream span {
  display: block;
  width: 30%;
}

.monitor-left .binary-stream {
  animation-duration: 8.5s;
  animation-delay: -4.2s;
}

.monitor-left .binary-stream span:nth-child(2) {
  transform: translateY(22%);
}

.monitor-left .binary-stream span:nth-child(3) {
  transform: translateY(-12%);
}

.laptop-computer .binary-stream {
  animation-duration: 6.3s;
  animation-delay: -1.1s;
}

.laptop-computer .binary-stream span:nth-child(2) {
  transform: translateY(-18%);
}

.laptop-computer .binary-stream span:nth-child(3) {
  transform: translateY(16%);
}

.monitor-right .binary-stream {
  animation-duration: 10.2s;
  animation-delay: -7.4s;
}

.monitor-right .binary-stream span:nth-child(2) {
  transform: translateY(14%);
}

.monitor-right .binary-stream span:nth-child(3) {
  transform: translateY(-20%);
}

.laptop-screen-bezel {
  height: clamp(130px, 20vw, 255px);
  padding: 11px;
  border-radius: 10px 10px 4px 4px;
}

.laptop-hinge {
  width: 12%;
  height: 8px;
  margin: auto;
  background: #1e2022;
}

.laptop-base {
  position: relative;
  height: 25px;
  margin: 0 -5%;
  border: 2px solid #4c4e51;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(#77797a, #292b2e 55%, #17191b);
  box-shadow: 0 8px 9px rgba(0, 0, 0, 0.36);
}

.laptop-keyboard {
  position: absolute;
  top: 5px;
  left: 21%;
  width: 48%;
  height: 7px;
  background: repeating-linear-gradient(90deg, #57d8b0 0 6px, #202326 6px 8px);
  box-shadow: 0 0 6px rgba(87, 216, 176, 0.48);
}

.laptop-trackpad {
  position: absolute;
  left: 45%;
  bottom: 3px;
  width: 11%;
  height: 5px;
  border: 1px solid #8d9090;
  border-radius: 2px;
}

.monitor-neck {
  width: 18%;
  height: 28px;
  margin: auto;
  background: linear-gradient(90deg, #222327, #68686a, #202125);
}
.monitor-foot {
  width: 48%;
  height: 8px;
  margin: auto;
  border-radius: 50%;
  background: #191a1d;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4);
}

.computer-tower {
  position: absolute;
  right: 9%;
  bottom: 20%;
  z-index: 3;
  width: 74px;
  height: 184px;
  border: 2px solid #37383b;
  border-radius: 5px;
  background: linear-gradient(90deg, #151619, #35363a 45%, #1b1c1f);
  box-shadow:
    13px 20px 22px rgba(0, 0, 0, 0.35),
    inset 5px 0 9px rgba(255, 255, 255, 0.06);
}
.computer-tower::before {
  content: "";
  position: absolute;
  inset: 14px 10px auto;
  height: 4px;
  background: #0d0e10;
  box-shadow:
    0 15px #0d0e10,
    0 30px #0d0e10;
}
.computer-tower span,
.computer-tower i,
.computer-tower b {
  position: absolute;
  left: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #65d9b5;
  box-shadow: 0 0 7px #65d9b5;
}
.computer-tower span {
  bottom: 27px;
}
.computer-tower i {
  bottom: 27px;
  left: 29px;
  background: #e9bd6e;
  box-shadow: 0 0 7px #e9bd6e;
}
.computer-tower b {
  bottom: 27px;
  left: 44px;
  background: #bf7181;
  box-shadow: 0 0 7px #bf7181;
}

.desk-surface {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 16%;
  z-index: 4;
  height: 16%;
  min-height: 78px;
  border-top: 3px solid #9a6340;
  background:
    radial-gradient(
      ellipse at 19% 38%,
      transparent 0 18px,
      rgba(44, 20, 11, 0.22) 19px 21px,
      transparent 22px
    ),
    radial-gradient(
      ellipse at 76% 67%,
      transparent 0 24px,
      rgba(42, 18, 10, 0.18) 25px 27px,
      transparent 28px
    ),
    repeating-linear-gradient(
      2deg,
      rgba(255, 192, 119, 0.04) 0 2px,
      transparent 2px 13px,
      rgba(48, 20, 11, 0.14) 14px 16px,
      transparent 16px 29px
    ),
    linear-gradient(178deg, #805034, #694027 42%, #75462c 72%, #5b3422);
  box-shadow:
    0 22px 20px rgba(0, 0, 0, 0.42),
    inset 0 5px 10px rgba(255, 193, 124, 0.14),
    inset 0 -8px 14px rgba(34, 14, 9, 0.22);
  transform: perspective(900px) rotateX(7deg);
  transform-origin: center top;
}

.desk-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 18% 6%,
      rgba(61, 255, 153, 0.24),
      transparent 26%
    ),
    radial-gradient(
      ellipse at 50% 4%,
      rgba(61, 255, 153, 0.3),
      transparent 29%
    ),
    radial-gradient(
      ellipse at 82% 6%,
      rgba(61, 255, 153, 0.24),
      transparent 26%
    );
  mix-blend-mode: screen;
}

.desk-edge {
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  border-top: 1px solid rgba(255, 184, 112, 0.12);
  background:
    repeating-linear-gradient(2deg, #603721 0 3px, #4b291b 3px 7px),
    linear-gradient(#673821, #2a1611);
  box-shadow: inset 0 2px 3px rgba(255, 190, 120, 0.08);
}

.desk-edge::before,
.desk-edge::after {
  content: "";
  position: absolute;
  bottom: -7px;
  width: 22px;
  height: 12px;
  background: linear-gradient(135deg, #4b291b, #1e120e);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.38);
}

.desk-edge::before {
  left: 0;
  border-radius: 0 0 0 16px;
}

.desk-edge::after {
  right: 0;
  border-radius: 0 0 16px 0;
}

.desk-drawer {
  position: absolute;
  bottom: 5%;
  left: 17%;
  width: 23%;
  height: 11%;
  border: 2px solid #3b1e15;
  background: #512819;
  box-shadow: inset 0 4px rgba(255, 178, 106, 0.08);
}
.desk-drawer::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 45%;
  width: 28px;
  height: 4px;
  background: #29140f;
}
.desk-leg {
  position: absolute;
  z-index: 1;
  bottom: -10%;
  width: 34px;
  height: 25%;
  background: linear-gradient(90deg, #291613, #633722, #321a14);
}
.desk-leg-left {
  left: 9%;
  transform: skewX(5deg);
}
.desk-leg-right {
  right: 9%;
  transform: skewX(-5deg);
}

.led-keyboard {
  position: absolute;
  left: 29%;
  top: 25%;
  width: 34%;
  height: 33%;
  padding: 7px 8px;
  border: 2px solid #28282b;
  border-radius: 5px;
  transform: rotate(-2deg);
  background: linear-gradient(145deg, #292c2d, #111415 58%, #242729);
  box-shadow:
    7px 9px 7px rgba(0, 0, 0, 0.3),
    inset 0 0 12px rgba(82, 232, 187, 0.12);
}
.key-row {
  display: flex;
  gap: 3px;
  height: 19%;
  margin-bottom: 3px;
}

.key-row i {
  display: block;
  flex: 1;
  min-width: 0;
  border: 1px solid #101719;
  border-radius: 2px;
  background: linear-gradient(145deg, #6eb99f, #315b50 48%, #172923);
  box-shadow:
    0 2px 1px #0d1112,
    inset 0 1px 1px rgba(225, 255, 244, 0.5),
    0 0 3px rgba(83, 214, 176, 0.3);
}

.key-row i::after {
  content: "";
  display: block;
  width: 2px;
  height: 2px;
  margin: 2px auto;
  border-radius: 50%;
  background: rgba(220, 255, 240, 0.32);
}

.key-row:nth-child(2) {
  padding: 0 3px;
}

.key-row:nth-child(3) {
  padding: 0 6px;
}

.key-row-bottom {
  gap: 3px;
  padding: 0 2px;
}

.key-row-bottom .key-wide {
  flex: 1.6;
}

.key-row-bottom .key-space {
  flex: 4.2;
}
.mouse {
  position: absolute;
  left: 67%;
  top: 29%;
  width: 45px;
  height: 63px;
  border-radius: 45% 45% 50% 50%;
  background: linear-gradient(110deg, #3f4146, #111216);
  box-shadow: 6px 9px 7px rgba(0, 0, 0, 0.3);
  transform: rotate(14deg);
}
.mouse span {
  position: absolute;
  left: 20px;
  top: 8px;
  width: 4px;
  height: 16px;
  border-radius: 3px;
  background: #7de8c2;
  box-shadow: 0 0 7px #7de8c2;
}

.paper,
.trash,
.coffee-cup {
  position: absolute;
  z-index: 2;
}
.paper {
  background: #d6c6a8;
  color: #523b2b;
  font:
    11px/1.3 "Courier New",
    monospace;
  box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.25);
}
.paper-one {
  left: 12%;
  top: 39%;
  width: 76px;
  height: 58px;
  padding: 8px;
  transform: rotate(-12deg);
}
.paper-two {
  left: 23%;
  top: 63%;
  width: 56px;
  height: 35px;
  transform: rotate(18deg);
  background: #bba98b;
}
.coffee-cup {
  left: 79%;
  top: 13%;
  width: 47px;
  height: 53px;
  border-radius: 6px 6px 15px 15px;
  background: linear-gradient(90deg, #d7d1c8, #8d8b85 55%, #e5dfd5);
  box-shadow: 5px 8px 6px rgba(0, 0, 0, 0.3);
}
.coffee-cup::before {
  content: "";
  position: absolute;
  inset: 6px 5px auto;
  height: 9px;
  border-radius: 50%;
  background: #302017;
}
.coffee-cup span {
  position: absolute;
  right: -19px;
  top: 12px;
  width: 23px;
  height: 23px;
  border: 6px solid #aaa69e;
  border-left: 0;
  border-radius: 0 50% 50% 0;
}
.coffee-cup i {
  position: absolute;
  left: 8px;
  top: -25px;
  width: 15px;
  height: 25px;
  border-radius: 50%;
  border-left: 2px solid rgba(255, 255, 255, 0.25);
  transform: rotate(20deg);
}
.trash-one {
  left: 9%;
  top: 75%;
  padding: 4px;
  color: #4d3b2a;
  font: 9px monospace;
  transform: rotate(25deg);
  background: #c8b797;
}
.trash-two {
  left: 75%;
  top: 72%;
  width: 31px;
  height: 18px;
  border-radius: 40%;
  background: #88785f;
  transform: rotate(-22deg);
  box-shadow:
    inset 5px 3px #b8a886,
    3px 4px 4px rgba(0, 0, 0, 0.3);
}

.desk-cable {
  position: absolute;
  z-index: 1;
  width: 115px;
  height: 42px;
  border: 3px solid rgba(25, 20, 17, 0.72);
  border-top: 0;
  border-left-color: transparent;
  border-radius: 0 0 55px 55px;
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.25));
}

.cable-left {
  left: 43%;
  top: 72%;
  transform: rotate(8deg);
}
.cable-right {
  left: 59%;
  top: 66%;
  width: 80px;
  transform: rotate(-21deg);
}

.coding-content h2 {
  margin: 0;
  color: #f7d6e5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-style: italic;
  letter-spacing: 0.02em;
}

.coding-subtitle {
  margin: 0;
  color: #d6a6bd;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.laptop {
  width: min(100%, 760px);
  margin-top: 26px;
  filter: drop-shadow(0 22px 25px rgba(0, 0, 0, 0.45));
}

.laptop-screen {
  position: relative;
  height: clamp(220px, 38vw, 360px);
  overflow: hidden;
  border: 12px solid #28182d;
  border-bottom-width: 18px;
  border-radius: 18px 18px 7px 7px;
  background: #05070a;
  box-shadow:
    inset 0 0 0 2px #a82c64,
    inset 0 0 28px rgba(233, 69, 96, 0.28);
}

.laptop-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 5px,
    rgba(255, 255, 255, 0.04) 6px
  );
}

.code-stream {
  position: absolute;
  left: 0;
  width: max-content;
  color: #ffb2c5;
  font-family: "Courier New", monospace;
  font-size: clamp(0.8rem, 2vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-shadow: 0 0 8px rgba(255, 100, 165, 0.8);
  white-space: nowrap;
  animation: code-scroll 2.2s linear infinite;
}

.stream-one {
  top: 12%;
  animation-delay: -0.2s;
}
.stream-two {
  top: 25%;
  animation-delay: -1.1s;
  color: #f7d6e5;
}
.stream-three {
  top: 38%;
  animation-delay: -1.8s;
}
.stream-four {
  top: 51%;
  animation-delay: -0.7s;
  color: #d95d91;
}
.stream-five {
  top: 64%;
  animation-delay: -1.5s;
}
.stream-six {
  top: 77%;
  animation-delay: -0.4s;
  color: #f7d6e5;
}

@keyframes code-scroll {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes binary-fall {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0);
  }
}

.laptop-base {
  position: relative;
  height: 17px;
  margin: 0 -5%;
  border: 2px solid #17191b;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(#303236, #08090a 62%);
}

.keyboard {
  position: absolute;
  top: 7px;
  left: 22%;
  width: 56%;
  height: 10px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    #c15c89 0 8px,
    transparent 8px 11px
  );
  opacity: 0.72;
}

.trackpad {
  position: absolute;
  left: 46%;
  bottom: 4px;
  width: 8%;
  height: 7px;
  border: 1px solid #c15c89;
  border-radius: 2px;
}

@media (max-width: 620px) {
  #all-contents {
    padding: 20px;
  }

  nav {
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
  }

  #nav-ul {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .speaker-row {
    gap: 10px;
  }

  .tape-deck {
    width: 40%;
  }

  .boombox {
    padding: 24px 16px;
  }

  .tape-list {
    flex-wrap: wrap;
  }

  .boombox-controls {
    position: static;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 22px;
    padding-top: 14px;
    padding-left: 0;
    border-top: 1px solid #5b334f;
    border-left: 0;
    transform: none;
  }

  .music-description {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .coding-page #all-contents {
    padding: 0 12px;
  }

  .coding-page nav {
    margin: 0 -12px;
    padding: 14px 12px;
  }

  .monitor {
    width: 30%;
    bottom: 34%;
  }

  .monitor-center {
    width: 38%;
  }

  .monitor-left {
    left: 0;
  }

  .monitor-right {
    right: 0;
  }

  .monitor-bezel {
    height: 112px;
    padding: 6px;
  }

  .computer-tower {
    right: 3%;
    width: 52px;
    height: 130px;
  }

  .led-keyboard {
    left: 22%;
    width: 42%;
  }
}