@font-face {
  font-family: "Comfortaa";
  src: url("../fonts/Comfortaa.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --blue: #4c99d3;
  --sky: #afdffe;
  --light-blue: #a9d9fb;
  --page-blue: #cbeafe;
  --pink: #ff66ba;
  --white: #fff;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--page-blue);
  color: var(--blue);
  font-family: "Comfortaa", "Segoe UI", sans-serif;
  font-weight: 450;
}

button,
a,
input {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.page-stage {
  position: relative;
  width: 100%;
  overflow: clip;
  background: var(--page-blue);
  isolation: isolate;
}

.stage-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

[data-image-scene] {
  transition: opacity 160ms linear;
}
[data-image-scene][data-scene-state="loading"] {
  visibility: hidden;
  opacity: 0;
}
[data-image-scene][data-scene-state="ready"] {
  visibility: visible;
  opacity: 1;
}

.hero-stage,
.lower-stage {
  width: min(100%, 1440px, calc(148.0744dvh - 35.5379px));
}

.hero-stage {
  --hero-shell-left: 1.44%;
  --hero-shell-width: 95.86%;
  position: relative;
  z-index: 2;
  aspect-ratio: 1115 / 753;
  margin: 0 auto 24px;
  container-type: inline-size;
}

.lower-stage {
  --footer-lift: 4cqw;
  position: relative;
  z-index: 2;
  aspect-ratio: 2106 / 2786;
  margin: 0 auto;
  container-type: inline-size;
}

.anchor-target {
  position: absolute;
  top: var(--anchor-top);
  left: 0;
  width: 1px;
  height: 1px;
  scroll-margin-top: 1rem;
}

.hero-shell {
  position: absolute;
  z-index: 10;
  top: 2.33cqw;
  left: var(--hero-shell-left);
  width: var(--hero-shell-width);
  height: 64.55cqw;
  overflow: hidden;
  border-radius: 4.5cqw;
  background: var(--white);
  box-shadow: 0 0.8cqw 1.5cqw rgb(65 126 178 / 12%);
}

.hero-shell::after {
  position: absolute;
  z-index: 29;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3.72cqw;
  background: #fff;
  content: "";
  pointer-events: none;
}

.hero-shell::before {
  position: absolute;
  z-index: 31;
  inset: 9.9% 0 0;
  border-inline: 0.12cqw solid #fff;
  content: "";
  pointer-events: none;
}

.site-header {
  position: relative;
  z-index: 20;
  height: 9.9%;
  border-bottom: 0.12cqw solid rgb(76 153 211 / 8%);
  background: #fff;
  box-shadow:
    inset 0 -0.15cqw 1.05cqw rgb(0 0 0 / 11%),
    0 0.72cqw 1.15cqw rgb(42 91 130 / 3%);
}

.brand-link {
  position: absolute;
  top: 1.7cqw;
  left: 2.95cqw;
  z-index: 2;
  font-size: 1.1cqw;
}

.header-mascot {
  position: absolute;
  z-index: 3;
  top: 3.13cqw;
  left: 2.15cqw;
  width: 15.85cqw;
  height: 15.85cqw;
  object-fit: contain;
}

.site-nav {
  position: absolute;
  inset: 0;
  top: 2.48cqw;
  display: block;
  font-size: 1.45cqw;
}

.site-nav a {
  position: absolute;
}

.site-nav a:nth-child(1) { left: 27.07cqw; }
.site-nav a:nth-child(2) { left: 36.14cqw; }
.site-nav a:nth-child(3) { left: 44.48cqw; }
.site-nav a:nth-child(5) { left: 63.86cqw; }
.site-nav a:nth-child(6) { left: 73.18cqw; }

.site-nav a:nth-child(3) { letter-spacing: 0.05cqw; }
.site-nav a:nth-child(4) { left: 54.8cqw; letter-spacing: -0.03cqw; }
.site-nav a:nth-child(5) { letter-spacing: -0.03cqw; }
.site-nav a:nth-child(6) { letter-spacing: 0; }

.site-nav a,
.pill-link,
.projects-content a,
.social-grid a,
.live-label,
.live-play,
button:not(:disabled) {
  transition: color 160ms ease, filter 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.site-nav a:hover,
.pill-link:hover,
.projects-content a:hover,
.social-grid a:hover,
.live-label:hover {
  color: #3186c5;
  transform: scale(1.04);
}

.mini-player-controls button:not(:disabled):hover,
.long-player-toggle:not(:disabled):hover,
.faq-controls button:not(:disabled):hover {
  filter: saturate(1.25) drop-shadow(0 0 0.35cqw rgb(255 102 186 / 32%));
  transform: scale(1.04);
}

.site-nav a:active,
.pill-link:active,
.projects-content a:active,
.social-grid a:active,
.live-label:active,
.live-play:active,
button:not(:disabled):active {
  transform: scale(0.96);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 0.24cqw solid var(--pink);
  outline-offset: 0.24cqw;
  border-radius: 0.45cqw;
}

html[data-input-method="pointer"] button:focus-visible,
html[data-input-method="pointer"] input:focus-visible {
  outline: none;
}

.hero-visual {
  position: absolute;
  inset: 9.9% 0 0;
  overflow: hidden;
  border-radius: 0;
  clip-path: inset(0 0 3.5cqw 0);
}

.hero-landscape {
  position: absolute;
  inset: 0 0 3.5cqw;
  width: 100%;
  height: calc(100% - 3.5cqw);
  object-fit: cover;
  object-position: center 43%;
  filter: saturate(1.12) brightness(1.28);
}

.hero-visual::before {
  position: absolute;
  z-index: 6;
  top: -5.7%;
  left: -0.18%;
  width: 22.1%;
  aspect-ratio: 6501 / 4200;
  content: "";
  background: url("../img/ui-6.webp") center / contain no-repeat;
  pointer-events: none;
}

.hero-character {
  position: absolute;
  z-index: 2;
  top: 0.98%;
  left: 4.75%;
  width: 40.63%;
  height: auto;
  filter:
    drop-shadow(0 0 0.55cqw rgb(112 205 255 / 88%))
    drop-shadow(0 0 1.65cqw rgb(85 181 245 / 58%))
    drop-shadow(0 0.6cqw 0.8cqw rgb(53 126 180 / 13%));
}

.hero-mist {
  position: absolute;
  z-index: 3;
  left: -1.5cqw;
  bottom: -15.04cqw;
  width: 82%;
  height: auto;
  opacity: .75;
  pointer-events: none;
}

.hero-dots {
  position: absolute;
  z-index: 5;
  height: auto;
  pointer-events: none;
}

.hero-dots-left {
  top: 7.85%;
  left: -0.75%;
  width: 10.4%;
}

.hero-dots-lower-left {
  top: 75.5%;
  left: 6.9%;
  width: 6.4%;
  opacity: 0.26;
  transform: none;
}

.hero-dots-right {
  top: 5%;
  right: 5%;
  width: 7.5%;
}

.hero-pixels {
  position: absolute;
  z-index: 5;
  height: auto;
  pointer-events: none;
}

.hero-pixels-character {
  top: 14.7%;
  left: 43.2%;
  width: 1.73%;
}

.hero-pixels-right {
  top: 46.75%;
  right: 7.35%;
  width: 5.2%;
}

.hero-star,
.hero-cloud {
  position: absolute;
  z-index: 6;
  pointer-events: none;
}

.hero-star-left-small {
  top: 19.5%;
  left: 3.35%;
  z-index: 7;
  width: 3.2%;
  transform: rotate(15deg);
}

.hero-cloud-left {
  z-index: 2;
  bottom: 6.3%;
  left: -1.1%;
  width: 24%;
}

.hero-cloud-right {
  top: -3.2%;
  right: -2%;
  width: 23.2%;
}

.hero-cloud-bottom-right {
  content: url("../img/ui-5-a.png");
  right: -0.4%;
  bottom: -7%;
  z-index: 7;
  width: 22%;
  height: auto;
  transform: none;
}

.hero-star-overflow,
.hero-star-left-overflow {
  position: absolute;
  z-index: 42;
  height: auto;
  pointer-events: none;
}

.hero-star-left-overflow {
  top: 23.81cqw;
  left: 0.65cqw;
  width: 6.6cqw;
  transform: rotate(-8deg);
}

.hero-star-overflow {
  top: 48cqw;
  right: -1.3cqw;
  width: 13.3cqw;
  transform: rotate(17deg);
}

.window {
  --window-bar-height: 2.9cqw;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0.45cqw 0.9cqw rgb(65 129 176 / 8%);
}

.window-bar {
  position: relative;
  display: flex;
  height: var(--window-bar-height);
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2cqw;
  background: linear-gradient(100deg, #afdffe 0%, #4c99d3 100%);
  color: #fff;
  font-size: 1.12cqw;
  font-weight: 450;
}

.window-bar h2 {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.window > .window-bar,
.music-screen-bar {
  border-radius: 4px 4px 0 0;
}

.window > .window-content,
.profile-content,
.about-content,
.mini-player-body,
.live-body,
.projects-content,
.social-grid,
.faq-content,
.contact-content,
.music-photo {
  border-radius: 0 0 4px 4px;
}

.window-controls {
  display: flex;
  gap: calc(var(--window-bar-height) * 0.025);
  align-items: center;
  align-self: stretch;
  flex: 0 0 auto;
  height: var(--window-bar-height);
  margin-left: auto;
}

.window-controls img {
  width: calc(var(--window-bar-height) * 0.6);
  height: calc(var(--window-bar-height) * 0.6);
  object-fit: contain;
}

.profile-window > .window-bar,
.about-window > .window-bar {
  --window-bar-height: 2.55cqw;
}

.profile-window {
  position: absolute;
  z-index: 7;
  top: 2.14%;
  left: 59.42%;
  width: 30.88%;
  height: 32.4%;
}

.profile-content {
  position: relative;
  height: calc(100% - 2.55cqw);
  padding: 0;
  text-align: left;
}

.profile-content h1 {
  position: absolute;
  top: 1.58cqw;
  left: 2.58cqw;
  margin: 0;
  color: var(--blue);
  font-size: 1.8cqw;
  font-weight: 450;
}

.profile-content > img {
  position: absolute;
  top: 4.26cqw;
  left: 2.27cqw;
  display: block;
  width: 24.9cqw;
  height: auto;
  margin: 0;
  object-fit: contain;
}

.profile-content p {
  position: absolute;
  top: calc(12.17cqw + 2px);
  left: -0.9cqw;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 1.64cqw;
  white-space: nowrap;
}

.profile-content .profile-separator {
  display: inline-block;
  width: 1.05cqw;
  height: 1.05cqw;
  margin: 0 .35cqw;
  vertical-align: .02cqw;
  object-fit: contain;
}

.mini-player {
  position: absolute;
  z-index: 6;
  top: 22.66%;
  left: 41.07%;
  width: 16.42%;
  height: 16.98%;
  border-radius: 4px;
}

.mini-player .window-bar,
.music-note-window .window-bar,
.live-status-window .window-bar {
  --window-bar-height: 1.7cqw;
  padding: 0 0.5cqw;
  font-size: 0.62cqw;
}

.mini-player .window-bar {
  --window-bar-height: 1.68cqw;
  padding-right: 0.67cqw;
}

.mini-player-body {
  display: grid;
  grid-template-columns: 42.5% 1fr;
  height: calc(100% - 1.68cqw);
  gap: 0.69cqw;
  padding: 0.34cqw 0.15cqw 0.62cqw 0.95cqw;
}

.track-cover {
  align-self: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.15cqw;
  object-fit: cover;
}

.mini-player-copy {
  position: relative;
  top: 0.35cqw;
  left: 0.55cqw;
  min-width: 0;
}

.track-title,
.track-artist,
.player-status {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-title {
  position: relative;
  top: 0;
  font-size: 0.9cqw;
}

.track-artist {
  color: var(--light-blue);
  font-size: 0.72cqw;
}

.player-status {
  min-height: 1.2em;
  color: var(--pink);
  font-size: 0.54cqw;
}

.mini-player-controls {
  position: absolute;
  right: auto;
  bottom: 1.52cqw;
  left: calc(50% - 0.42cqw);
  display: flex;
  width: auto;
  gap: 1.18cqw;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  transform: translateX(-50%);
}

.mini-player-controls button,
.long-player-toggle,
.faq-controls button {
  display: inline-grid;
  border: 0;
  padding: 0;
  place-items: center;
  background: transparent;
  cursor: pointer;
}

.mini-player-controls button {
  width: 1.2cqw;
  height: 0.88cqw;
}

.mini-player-controls button:nth-child(2) {
  width: 0.86cqw;
}

.mini-player-controls img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-window {
  position: absolute;
  z-index: 5;
  top: 44.42%;
  left: 46.87%;
  width: 37.9%;
  height: 39.8%;
}

.about-window > .window-bar {
  --window-bar-height: 3.05cqw;
  padding-right: 1.55cqw;
  padding-left: 0.9cqw;
}

.about-content {
  position: relative;
  height: calc(100% - 3.05cqw);
  padding: 2.16cqw 2cqw 1.65cqw 1.65cqw;
  font-size: 1.5cqw;
  line-height: 1.25;
}

.about-content p {
  position: relative;
  z-index: 2;
  width: 62%;
  margin: 0 0 3.1cqw;
}

.about-content p:first-of-type {
  margin-bottom: 3.52cqw;
  letter-spacing: -0.04cqw;
}

.about-content p:nth-of-type(2) {
  line-height: 1.3;
  letter-spacing: 0.04cqw;
}

.about-content img {
  position: absolute;
  right: -6.4%;
  bottom: -16.9%;
  width: 45.7%;
  height: auto;
  object-fit: contain;
  object-position: bottom right;
}

.long-player {
  position: absolute;
  z-index: 30;
  bottom: 0;
  left: 4%;
  width: 92%;
  height: 3.6cqw;
  background: #fff;
}

.long-player-source {
  display: none;
}

.long-player-toggle {
  position: absolute;
  top: 0.78cqw;
  left: 0.2cqw;
  width: 1.65cqw;
  height: 1.65cqw;
}

.long-player-toggle img {
  width: 100%;
  height: 100%;
}

.player-seek {
  --progress: 0%;
  position: absolute;
  top: 1.2cqw;
  left: 2.6cqw;
  width: calc(100% - 2.6cqw);
  height: 1.2cqw;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  cursor: pointer;
}

.player-seek::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 0.5cqw;
  border-radius: 1cqw;
  background: linear-gradient(to right, var(--pink) 0 var(--progress), var(--blue) var(--progress) 100%);
}

.player-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3cqw;
  height: 3cqw;
  margin-top: -1.25cqw;
  border: 0;
  appearance: none;
  background: url("../img/ui-12-star.webp") center / contain no-repeat;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(.16cqw 0 0 #fff) drop-shadow(-.16cqw 0 0 #fff)
    drop-shadow(0 .16cqw 0 #fff) drop-shadow(0 -.16cqw 0 #fff);
}

button:disabled,
input:disabled,
.is-disabled {
  cursor: default !important;
  opacity: 0.57;
  pointer-events: none;
}

.pill-link {
  display: inline-flex;
  min-width: 8.8cqw;
  min-height: 2.2cqw;
  align-items: center;
  justify-content: center;
  border: 0.13cqw solid #77bced;
  border-radius: 1cqw;
  background: #fff;
}

/* R4: source coordinates are measured on the 2106 px reference.
   Each object scales with lower-stage; no transform of the middle scene. */
.middle-scene {
  position: absolute;
  z-index: 2;
  top: -24px;
  left: 0;
  width: 100%;
  height: 59.04%;
  clip-path: inset(-2cqw 0 calc(-2.85cqw - 24px) -10cqw);
}
.footer-cloud-bank {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.middle-scene > img {
  position: absolute;
  pointer-events: none;
  height: auto;
}
.middle-scene .cloud-column {
  z-index: -1;
  left: -5%;
  top: -22cqw;
  width: 45%;
  transform: scaleX(-1);
}
.middle-scene .cloud-bank {
  z-index: -1;
  right: -1%;
  top: 39cqw;
  width: 35%;
  transform: none;
}
.middle-scene .middle-cloud-bottom {
  z-index: -1;
  left: -13%;
  top: 55cqw;
  width: 44%;
  transform: none;
}
.middle-scene .decor-star,
.middle-scene .decor-spark { z-index: 20; }
.middle-scene .star-a { top: 3.2cqw; left: 23.8%; width: 3.9%; transform: rotate(24deg); }
.middle-scene .star-b { top: 31.8cqw; left: 55.4%; width: 11.2%; transform: rotate(15deg); }
.footer-composition > .star-c { position: absolute; z-index: 7; height: auto; pointer-events: none; top: calc(59.8cqw - 24px); right: -3.6%; width: 10.8%; transform: rotate(-18deg); }
.middle-scene .star-phone-bottom { top: 57cqw; left: 2.6%; width: 12%; transform: rotate(-15deg); }
.middle-scene .star-projects-small { top: 45.5cqw; left: 60.3%; width: 4.4%; transform: rotate(15deg); }
.middle-scene .spark-a { top: 14.25cqw; left: 39.3%; width: 4.8%; transform: none; z-index: 20; }
.middle-scene .spark-b { top: 40.8cqw; right: 8%; width: 2.3%; }
.middle-scene .spark-right-bottom { top: 52.2cqw; right: 3.4%; width: 3.1%; }
.middle-scene .spark-phone-bottom { top: 75cqw; left: 16.5%; width: 4%; }
.middle-scene .spark-projects { top: 53.8cqw; left: 23.7%; width: 2.2%; }
.middle-scene .dots-phone { display: none; }
.middle-scene .dots-social { top: 59cqw; right: 3%; width: 4%; z-index: 0; opacity: .2; }

/* 23.png already contains a 10 degree tilt and transparent screen.
   The screen rectangle follows its four measured inner corners. */
.middle-scene .music-device {
  position: absolute;
  top: -1cqw;
  left: -8.5%;
  width: 40.8%;
  height: auto;
  aspect-ratio: 1900 / 2964;
  transform: none;
}
.middle-scene .device-shell {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
}
.middle-scene .music-screen {
  --window-bar-height: 3.6cqw;
  position: absolute;
  top: 11.6%;
  left: 28.1%;
  width: 60.5%;
  height: 71.95%;
  transform: rotate(10.094deg);
  transform-origin: top left;
  overflow: hidden;
  border-radius: 4px;
}
.middle-scene .music-screen-bar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--window-bar-height);
  padding: 0 .9cqw;
  background: #bedcff;
  color: white;
}
.middle-scene .music-screen-bar h2 { margin: 0; font-size: 1.5cqw; font-weight: 450; }
.middle-scene .music-photo { position: relative; height: calc(100% - var(--window-bar-height)); overflow: hidden; }
.middle-scene .music-landscape {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 55% center;
}
.middle-scene .music-character {
  position: absolute; top: 1%; left: -25%; width: 142%; height: auto;
  transform: rotate(-10deg); transform-origin: 50% 25%;
}
.middle-scene .music-note-window {
  position: absolute; z-index: 9; top: 17.85cqw; left: 21.6%;
  width: 16.1%; height: 10.3cqw; border-radius: 4px;
  transform: rotate(-.4deg);
}
.middle-scene .music-note-window .window-bar,
.middle-scene .live-status-window .window-bar {
  --window-bar-height: 1.4cqw; padding: 0 .6cqw; font-size: .55cqw;
}
.middle-scene .music-note-window .window-content {
  padding: 1.05cqw 1.35cqw .6cqw; text-align: left; font-size: 1.03cqw; line-height: 1.2;
}
.middle-scene .music-note-window p { margin: 0 0 1.45cqw; }
.middle-scene .pill-link {
  min-width: 9.75cqw; min-height: 2.75cqw; border: .1cqw solid #91cdf8;
  border-radius: 1.05cqw; font-size: 1.2cqw;
}
.middle-scene .music-note-window .pill-link { display: flex; width: 9.75cqw; margin: 0 auto; }

.middle-scene .live-window {
  position: absolute; z-index: 12; top: 1.4cqw; left: 46.25%;
  width: 50.45%; height: 32.25cqw; border-radius: 4px;
  overflow: visible; background: transparent; box-shadow: none;
}
.middle-scene .live-window > .window-bar {
  --window-bar-height: 4.3cqw; padding: 0 2.1cqw 0 1.5cqw; font-size: 1.45cqw;
}
.middle-scene .live-body { position: relative; height: calc(100% - var(--window-bar-height)); overflow: visible; }
.middle-scene .live-picture {
  position: absolute; inset: -7cqw 0 0; overflow: hidden;
  border-radius: 0 0 4px 4px; pointer-events: none;
}
.middle-scene .live-backdrop {
  position: absolute; inset: 7cqw 0 0; overflow: hidden; background: #e5d9ff;
}
.middle-scene .live-landscape {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  transform: scale(1.65); transform-origin: 65% 65%;
  filter: saturate(.48) brightness(1.45); opacity: .64;
}
.middle-scene .live-character {
  position: absolute; top: 1.05cqw; left: -17.2%; width: 103%; height: auto;
}
.middle-scene .live-label {
  position: absolute; z-index: 8; top: 1.9cqw; left: -2.8cqw;
  min-width: 6.1cqw; padding: .6cqw 1cqw; border-radius: .65cqw;
  background: #9fd4f7; color: white; text-align: center; font-size: 1.2cqw;
}
.middle-scene .live-play {
  position: absolute; z-index: 8; top: 8.1cqw; left: 41.8%; width: 18.9%;
  isolation: isolate;
  container-type: inline-size;
}

.atmosphere-clouds {
  position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none;
}
.atmosphere-cloud {
  position: absolute; display: block; left: 0 !important; width: var(--cloud-width); height: auto; max-width: none;
  opacity: calc(var(--cloud-opacity, .82) + .12); pointer-events: none; will-change: transform;
}
.cloud-1 { top: 4cqw; left: -10%; --cloud-width: 34%; }
.cloud-2 { top: 21cqw; left: 74%; --cloud-width: 16%; --cloud-opacity: .75; }
.cloud-3 { top: 38cqw; left: 2%; --cloud-width: 11%; }
.cloud-4 { top: 53cqw; left: 76%; --cloud-width: 30%; --cloud-opacity: .72; }
.cloud-5 { top: 69cqw; left: -6%; --cloud-width: 21%; --cloud-opacity: .77; }
.cloud-6 { top: 83cqw; left: 63%; --cloud-width: 10%; }
.cloud-7 { top: 96cqw; left: 15%; --cloud-width: 28%; --cloud-opacity: .74; }
.cloud-8 { top: 108cqw; left: -3%; --cloud-width: 14%; --cloud-opacity: .76; }
.cloud-9 { top: 118cqw; left: 73%; --cloud-width: 36%; --cloud-opacity: .72; }
.cloud-10 { top: 130cqw; left: 38%; --cloud-width: 9%; }
.cloud-11 { top: 140cqw; left: 3%; --cloud-width: 22%; --cloud-opacity: .76; }
.cloud-12 { top: 149cqw; left: 69%; --cloud-width: 12%; }
.cloud-13 { top: 157cqw; left: -8%; --cloud-width: 33%; --cloud-opacity: .74; }
.cloud-14 { top: 164cqw; left: 57%; --cloud-width: 18%; --cloud-opacity: .78; }
.cloud-15 { top: 170cqw; left: 16%; --cloud-width: 8%; }
.cloud-16 { top: 176cqw; left: 75%; --cloud-width: 29%; --cloud-opacity: .73; }
.cloud-17 { top: 179cqw; left: -4%; --cloud-width: 15%; }
.cloud-18 { top: 181cqw; left: 49%; --cloud-width: 37%; --cloud-opacity: .71; }
.cloud-19 { top: 11cqw; left: 54%; --cloud-width: 8%; --cloud-opacity: .72; }
.cloud-20 { top: 28cqw; left: -9%; --cloud-width: 26%; --cloud-opacity: .76; }
.cloud-21 { top: 32cqw; left: 66%; --cloud-width: 13%; --cloud-opacity: .74; }
.cloud-22 { top: 47cqw; left: 35%; --cloud-width: 17%; --cloud-opacity: .68; }
.cloud-23 { top: 61cqw; left: 78%; --cloud-width: 34%; --cloud-opacity: .73; }
.cloud-24 { top: 75cqw; left: -2%; --cloud-width: 9%; --cloud-opacity: .77; }
.middle-scene .live-play img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  filter:
    drop-shadow(0 .28cqw .1cqw rgb(94 25 69 / 84%))
    drop-shadow(0 .82cqw .62cqw rgb(80 28 68 / 62%));
}
.middle-scene .live-play:hover {
  transform: scale(1.04);
}
.middle-scene .live-play:hover img {
  filter:
    saturate(1.25)
    drop-shadow(0 .28cqw .1cqw rgb(94 25 69 / 84%))
    drop-shadow(0 .82cqw .62cqw rgb(80 28 68 / 62%));
}
.middle-scene .live-play:active { transform: scale(.96); }
.middle-scene .live-status-window {
  position: absolute; z-index: 9; top: 1.4cqw; right: -1.2cqw;
  width: 16.25cqw; height: 10.4cqw; border-radius: 4px;
}
.middle-scene .live-status-window .window-content { padding: 1.8cqw 1.2cqw .7cqw; text-align: center; }
.middle-scene .live-status-window p { margin: 0 0 1.2cqw; font-size: 1.2cqw; white-space: nowrap; }

.middle-scene .viewer-count {
  position: absolute; z-index: 8; right: 2.3cqw; bottom: 1.3cqw;
  display: flex; flex-direction: column; align-items: center; color: var(--pink); font-size: 1.1cqw;
}
.middle-scene .viewer-count img { width: 1.6cqw; height: 1.6cqw; }

.middle-scene .projects-window {
  position: absolute; z-index: 10; top: 30.8cqw; left: 27.55%;
  width: 31.45%; height: 49.2cqw; border-radius: 4px;
}
.middle-scene .projects-window > .window-bar { --window-bar-height: 3.6cqw; padding: 0 1.3cqw; font-size: 1.5cqw; }
.middle-scene .projects-content { height: calc(100% - var(--window-bar-height)); padding: 2.5cqw 1.7cqw 2.35cqw; }
.middle-scene .projects-intro { margin: 0 0 2.6cqw .5cqw; font-size: 1.7cqw; }
.middle-scene .projects-content ul {
  display: flex; height: calc(100% - 4.65cqw); margin: 0; padding: 0 .6cqw 3.35cqw;
  flex-direction: column; justify-content: space-between;
  border-bottom: .1cqw solid #75b9ea; list-style: none;
}
.middle-scene .projects-content li {
  display: grid; grid-template-columns: 4.8cqw 1fr; gap: 1.85cqw;
  align-items: center; font-size: 1.2cqw; line-height: 1.25;
}
.middle-scene .project-icon { display: grid; width: 4.8cqw; height: 4.6cqw; place-items: center; }
.middle-scene .project-icon img { width: 100%; height: 100%; object-fit: contain; }
/* These three supplied icons already contain their blue tiles. */
.middle-scene .projects-content li:nth-child(2) .project-icon { background: #a9d9fb; border: .08cqw solid #a1bade; border-radius: 1cqw; }
.middle-scene .projects-content li:nth-child(2) .project-icon img { width: 80%; height: 80%; }
.middle-scene .projects-content a { display: block; }

.middle-scene .social-window {
  position: absolute; z-index: 11; top: 40.45cqw; left: 65.6%;
  width: 22.55%; height: 35.3cqw; border-radius: 4px;
}
.middle-scene .social-window > .window-bar { --window-bar-height: 2.55cqw; padding: 0 1.35cqw; }
.middle-scene .social-window > .window-bar > span { position: relative; top: 1px; }
.middle-scene .social-grid {
  display: grid; height: calc(100% - var(--window-bar-height)); padding: 4cqw 3.6cqw 4.9cqw;
  grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3,1fr); gap: 2.2cqw 2.5cqw;
}
.middle-scene .social-grid a,
.middle-scene .social-item { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; color: #a9d9fb; font-size: 1cqw; text-align: center; }
.middle-scene .social-grid img { width: 4.1cqw; height: 4.1cqw; margin-bottom: .75cqw; object-fit: contain; border: 0; outline: 0; box-shadow: none; }
/* R5: reference coordinates below y=1409 on the 2106 px source. */
/* Client decision: hide photographic background clouds until replacement
   uncut assets arrive. Keep source files and the interactive smile intact. */
.middle-scene > .cloud-column,
.middle-scene > .cloud-bank,
.middle-scene > .middle-cloud-bottom,
.footer-cloud-bank {
  display: none;
}

.river-section {
  position: absolute; z-index: 4;
  top: 83.14cqw; left: .95%; width: 99%; height: 27.25cqw;
  overflow: hidden; border: .16cqw solid #fff;
  border-radius: 5.25cqw; background: #fff;
}
.footer-composition {
  position: absolute; z-index: 4; inset: 0;
  transform: translate3d(0, calc(-1 * var(--footer-lift)), 0); pointer-events: none;
}
.footer-composition .river-section { z-index: 0; }
.footer-composition .footer-scene { z-index: 2; }
.footer-composition > .star-c { z-index: 3; }
.river-landscape {
  position: absolute; left: -11.6616%; top: -99.1169%;
  width: 120.6942%; height: 265.9278%; max-width: none;
  object-fit: fill;
}
.river-figures { position: absolute; height: auto; pointer-events: none; }
.river-figures-stairs { left: 8.3%; top: 11%; width: 5.75%; }
.river-figures-right { left: 73.6%; top: -1%; width: 8.9%; }
.footer-scene { position: absolute; z-index: 6; inset: 0; pointer-events: none; }
.footer-cloud-bank { right: -3%; bottom: -4%; width: 60%; opacity: .9; }
.footer-character {
  position: absolute; z-index: 5; left: 88.63%; top: 44.25cqw;
  width: 44.33%; height: auto; transform: rotate(19.84deg); transform-origin: top left;
  pointer-events: none;
}
.footer-spark { position: absolute; z-index: 8; height: auto; pointer-events: none; }
.spark-one { left: 60.5%; top: 119.7cqw; width: 3.9%; }
.spark-river { left: 29.45%; top: 109.3cqw; width: 1.7%; }
.footer-shooting-star {
  position: absolute; z-index: 9; left: 79%; top: 113.2cqw;
  width: 26%; height: auto; object-fit: contain;
  transform: rotate(-1deg); transform-origin: center; pointer-events: none;
}
.faq-window, .contact-window {
  position: absolute; z-index: 10; top: 112.1cqw; height: 16.5cqw;
  border-radius: 4px; box-shadow: none; pointer-events: auto;
}
.faq-window { left: 3.7%; width: 25.9%; }
.contact-window { left: 31.3%; width: 25.9%; }
.footer-scene .window-bar { --window-bar-height: 2.25cqw; padding: 0 .9cqw; font-size: 1.3cqw; }
.faq-content,
.contact-content {
  padding: 1.45cqw 1.55cqw .65cqw;
  font-size: 1.15cqw;
  line-height: 1.28;
}
.faq-content {
  display: flex; height: calc(100% - 2.25cqw);
  flex-direction: column; min-height: 0;
}
.faq-copy { flex: 1; min-height: 0; overflow: hidden; }
.faq-copy:focus-visible { outline: .15cqw solid var(--pink); outline-offset: .1cqw; }
.faq-opening { display: block; }
.faq-question, .faq-answer { margin: 0; white-space: pre-line; }
.faq-question { padding-right: 3.6cqw; padding-left: 1.5cqw; text-indent: -1.5cqw; }
.faq-answer { margin-top: .8cqw; padding-left: 1cqw; text-indent: -1cqw; }
.faq-controls {
  display: grid; flex: 0 0 1.8cqw; margin-top: auto; padding: 0 1.9cqw;
  grid-template-columns: 1.25cqw minmax(0, 1fr) 1.25cqw; align-items: center;
}
.faq-controls button {
  position: relative; z-index: 1; width: 1.25cqw; height: 1.25cqw;
  transform: none;
}
.faq-arrow {
  position: absolute; top: 50%; width: 0; height: 0;
  transform: translateY(-50%); border-top: .48cqw solid transparent; border-bottom: .48cqw solid transparent;
}
.faq-controls [data-faq-previous] .faq-arrow { right: 0; border-right: .82cqw solid var(--blue); }
.faq-controls [data-faq-next] .faq-arrow { left: 0; border-left: .82cqw solid var(--blue); }
.faq-line {
  grid-column: 2; grid-row: 1;
  width: 100%; height: max(1px, .1cqw); background: var(--blue);
}
.faq-controls button:not(:disabled):hover,
.faq-controls button:not(:disabled):active { transform: none; }
.faq-controls [data-faq-counter] {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.contact-content {
  display: flex; height: calc(100% - 2.25cqw);
  flex-direction: column; align-items: stretch; text-align: left;
}
.contact-content p { margin: 0; font-size: inherit; line-height: inherit; }
.contact-content p span { display: block; }
.contact-content p span + span { margin-left: 4.15cqw; }
.contact-content small { margin-top: .7cqw; align-self: flex-end; font-size: 1.05cqw; }
.contact-link {
  align-self: center; margin-top: auto; gap: .65cqw; padding: 0 .9cqw;
  min-height: 2.65cqw; font-size: 1.3cqw; translate: 0 -70%;
}
.contact-link img { width: 1.1cqw; height: 1.1cqw; }
.bubble-decoration {
  position: absolute; z-index: 12; top: 110.2cqw; left: 59.7%; width: 11.5%;
  display: block; padding: 0; border: 0; background: none; line-height: 0; cursor: pointer;
  pointer-events: auto;
}
.bubble-decoration:active { transform: none; }
.bubble-decoration img { display: block; width: 100%; }
.bubble-active { position: absolute; inset: 0; opacity: 0; }

/* Approved desktop spacing: move only the three Hero windows and pond/footer windows. */
@media (min-width: 1280px) {
  .hero-stage .profile-window { left: calc(59.42% + 80px); }
  .hero-stage .mini-player {
    left: calc(41.07% + 56px);
    top: calc(22.66% - 24px);
  }
  .hero-stage .about-window {
    left: calc(46.87% + 24px);
    top: calc(44.42% + 24px);
  }

  .lower-stage {
    box-sizing: content-box;
    padding-bottom: 120px;
  }
  /* Preserve middle-scene geometry and anchors when the containing block gains padding. */
  .lower-stage .middle-scene { height: calc((100% - 120px) * .5904); }
  .lower-stage > #music { top: calc(1.05% - 1.26px); }
  .lower-stage > #projects { top: calc(22.44% - 26.928px); }
  .lower-stage > #links { top: calc(28.46% - 34.152px); }
  .lower-stage > #contact { top: calc(78.92% + 25.296px - var(--footer-lift)); }

  .lower-stage .river-section { top: calc(83.14cqw + 64px); }
  .footer-scene .faq-window,
  .footer-scene .contact-window { top: calc(112.1cqw + 120px); }
}

/* A phone or tablet displays the same desktop artboard at its available width.
   Offsets above are expressed as artboard-width ratios here; no child is
   independently reflowed or enlarged. The desktop fit-to-height stays intact. */
@media (max-width: 1279px) {
  .hero-stage, .lower-stage { width: min(100%, 1440px); }
  .hero-stage { margin-bottom: 1.85%; }
  .window,
  .mini-player,
  .middle-scene .music-screen,
  .middle-scene .music-note-window,
  .middle-scene .live-window,
  .middle-scene .live-status-window,
  .middle-scene .projects-window,
  .middle-scene .social-window,
  .faq-window,
  .contact-window { border-radius: .308cqw; }
  .window:not(.live-window) > .window-bar { border-radius: .308cqw .308cqw 0 0; }
  .music-photo, .middle-scene .live-landscape { border-radius: 0 0 .308cqw .308cqw; }

  .hero-stage .profile-window { left: calc(59.42% + 6.167cqw); }
  .hero-stage .profile-content p { top: 12.324cqw; }
  .hero-stage .mini-player {
    left: calc(41.07% + 4.317cqw);
    top: calc(22.66% - 1.85cqw);
  }
  .hero-stage .about-window {
    left: calc(46.87% + 1.85cqw);
    top: calc(44.42% + 1.85cqw);
  }

  .lower-stage { box-sizing: content-box; padding-bottom: 9.251%; }
  .lower-stage .middle-scene {
    top: -1.85cqw;
    height: calc((100% - 9.251cqw) * .5904);
    clip-path: inset(-2cqw 0 -4.7cqw -10cqw);
  }
  .footer-composition > .star-c { top: 57.95cqw; }
  .lower-stage > #music { top: calc(1.05% - .097cqw); }
  .lower-stage > #projects { top: calc(22.44% - 2.076cqw); }
  .lower-stage > #links { top: calc(28.46% - 2.633cqw); }
  .lower-stage > #contact { top: calc(78.92% + 1.95cqw - var(--footer-lift)); }
  .middle-scene .social-window > .window-bar > span { top: .077cqw; }
  .lower-stage .river-section { top: 88.074cqw; }
  .footer-scene .faq-window,
  .footer-scene .contact-window { top: 121.351cqw; }
}

/* Decorative motion leaves layout geometry untouched. */
@keyframes yellow-star-float {
  0%, 100% { transform: translateY(0) rotate(var(--star-angle)) scale(1); }
  50% {
    transform: translateY(var(--star-drift)) rotate(calc(var(--star-angle) + var(--star-tilt))) scale(var(--star-peak-scale, 1));
  }
}

.hero-star-left-small,
.hero-star-left-overflow,
.hero-star-overflow,
.middle-scene .star-a,
.middle-scene .star-b,
.middle-scene .star-phone-bottom,
.middle-scene .star-projects-small,
.footer-composition > .star-c {
  animation: yellow-star-float var(--star-duration) ease-in-out var(--star-delay) infinite alternate;
  transform-origin: center;
  aspect-ratio: 1;
  object-fit: contain;
}

.hero-star-left-small { --star-angle: 15deg; --star-drift: -6px; --star-tilt: 4deg; --star-duration: 4.4s; --star-delay: -.6s; }
.hero-star-left-overflow { --star-angle: -8deg; --star-drift: 7px; --star-tilt: -4.5deg; --star-duration: 5.8s; --star-delay: -2s; }
.hero-star-overflow { --star-angle: 17deg; --star-drift: -8px; --star-tilt: 4.5deg; --star-duration: 5.2s; --star-delay: -3.4s; --star-peak-scale: 1.025; }
.middle-scene .star-a { --star-angle: 24deg; --star-drift: -6px; --star-tilt: 4deg; --star-duration: 4.8s; --star-delay: -1.2s; }
.middle-scene .star-b { --star-angle: 15deg; --star-drift: 7px; --star-tilt: -4.5deg; --star-duration: 5.6s; --star-delay: -4.1s; --star-peak-scale: 1.025; }
.middle-scene .star-phone-bottom { --star-angle: -15deg; --star-drift: 8px; --star-tilt: -4.5deg; --star-duration: 5.1s; --star-delay: -3s; --star-peak-scale: 1.025; }
.middle-scene .star-projects-small { --star-angle: 15deg; --star-drift: -5px; --star-tilt: 4deg; --star-duration: 3.9s; --star-delay: -.9s; }
.footer-composition > .star-c { --star-angle: -18deg; --star-drift: -7px; --star-tilt: 4.5deg; --star-duration: 5.9s; --star-delay: -2.3s; --star-peak-scale: 1.025; }

@media (max-width: 1279px) {
  .hero-star-left-small, .middle-scene .star-a { --star-drift: -.463cqw; }
  .hero-star-left-overflow, .middle-scene .star-b { --star-drift: .54cqw; }
  .hero-star-overflow { --star-drift: -.617cqw; }
  .middle-scene .star-phone-bottom { --star-drift: .617cqw; }
  .middle-scene .star-projects-small { --star-drift: -.385cqw; }
  .footer-composition > .star-c { --star-drift: -.54cqw; }
}

@keyframes pixel-sparkle-glow {
  0% { opacity: .2; transform: scale(.85); }
  55% { opacity: 1; transform: scale(1.15); }
  100% { opacity: .4; transform: scale(.95); }
}

.hero-pixels-character,
.hero-pixels-right,
.middle-scene .spark-a,
.middle-scene .spark-b,
.middle-scene .spark-right-bottom,
.middle-scene .spark-phone-bottom,
.middle-scene .spark-projects,
.footer-spark.spark-one,
.footer-spark.spark-river {
  animation: pixel-sparkle-glow var(--spark-duration) ease-in-out var(--spark-delay) infinite alternate;
  transform-origin: center;
}

.hero-pixels-character { --spark-duration: 2.1s; --spark-delay: -.4s; }
.hero-pixels-right { --spark-duration: 3.2s; --spark-delay: -1.7s; }
.middle-scene .spark-a { --spark-duration: 2.9s; --spark-delay: -2.1s; }
.middle-scene .spark-b { --spark-duration: 1.9s; --spark-delay: -.8s; }
.middle-scene .spark-right-bottom { --spark-duration: 3.5s; --spark-delay: -3.3s; }
.middle-scene .spark-phone-bottom { --spark-duration: 2.4s; --spark-delay: -1.4s; }
.middle-scene .spark-projects { --spark-duration: 2.2s; --spark-delay: -2.5s; }
.footer-spark.spark-one { --spark-duration: 3.1s; --spark-delay: -1.1s; }
.footer-spark.spark-river { --spark-duration: 1.8s; --spark-delay: -1.9s; }

@keyframes live-play-glow {
  0%, 100% { opacity: .12; transform: scale(.88); }
  50% { opacity: .55; transform: scale(1.18); }
}

.middle-scene .live-play::before {
  position: absolute;
  z-index: 0;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 117 205 / 82%) 0 28%, rgb(193 100 255 / 48%) 52%, transparent 74%);
  content: "";
  pointer-events: none;
  animation: live-play-glow 2.6s ease-in-out -1.1s infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

}