:root {
  --ink: #18161b;
  --paper: #f4f0e7;
  --purple: #6c47e8;
  --lime: #c9ff52;
  --coral: #ff6d5c;
  --yellow: #ffd447;
  --blue: #75d7ff;
  --pink: #ff9fce;
  --green: #89e6b0;
  --border: 2px solid var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 72% 7%, rgba(108, 71, 232, .12), transparent 22rem),
    var(--paper);
  overflow-x: hidden;
}

button, a { -webkit-tap-highlight-color: transparent; }

button { font: inherit; color: inherit; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 20;
  opacity: .055;
  pointer-events: none;
  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='.6'/%3E%3C/svg%3E");
}

.site-header {
  width: min(1180px, calc(100% - 40px));
  height: 92px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid rgba(24, 22, 27, .28);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.16rem;
  font-weight: 950;
  letter-spacing: .13em;
}

.brand-mark {
  width: 33px;
  height: 31px;
  padding: 5px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: var(--lime);
  border: var(--border);
  border-radius: 50%;
  transform: rotate(-5deg);
}

.brand-mark i { display: block; width: 3px; border-radius: 5px; background: var(--ink); }
.brand-mark i:nth-child(1) { height: 8px; }
.brand-mark i:nth-child(2) { height: 17px; }
.brand-mark i:nth-child(3) { height: 12px; }
.brand-mark i:nth-child(4) { height: 6px; }

.stop-all {
  border: var(--border);
  border-radius: 999px;
  background: transparent;
  padding: 10px 17px;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .02em;
  cursor: pointer;
  transition: .18s ease;
}

.stop-all:not(:disabled):hover { background: var(--coral); transform: translateY(-2px); }
.stop-all:disabled { opacity: .35; cursor: default; }

main { width: min(1180px, calc(100% - 40px)); margin: auto; }

.hero {
  position: relative;
  min-height: 455px;
  padding: 72px 0 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  align-items: end;
}

.eyebrow, .kicker {
  margin: 0 0 18px;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.eyebrow { position: absolute; top: 70px; left: 3px; }
.eyebrow span { display: inline-block; width: 23px; height: 3px; margin: 0 8px 3px 0; background: var(--purple); }

h1 {
  margin: 0;
  max-width: 790px;
  font-size: clamp(4.7rem, 10.5vw, 9.5rem);
  font-weight: 950;
  line-height: .77;
  letter-spacing: -.075em;
}

h1 em {
  position: relative;
  color: var(--purple);
  font-style: normal;
}

h1 em::after {
  content: "";
  position: absolute;
  left: 1%;
  right: -2%;
  bottom: -9px;
  height: 11px;
  border-radius: 50%;
  border-top: 5px solid var(--coral);
  transform: rotate(-1.5deg);
}

.intro {
  align-self: end;
  justify-self: end;
  max-width: 295px;
  margin: 0 0 8px;
  font-size: 1.02rem;
  line-height: 1.55;
  font-weight: 620;
}

.hero-sticker {
  position: absolute;
  top: 67px;
  right: 8%;
  width: 92px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--yellow);
  border: var(--border);
  clip-path: polygon(50% 0, 61% 11%, 76% 5%, 82% 20%, 98% 23%, 91% 39%, 100% 51%, 88% 61%, 94% 78%, 77% 81%, 72% 97%, 56% 89%, 43% 100%, 33% 87%, 16% 92%, 15% 74%, 0 66%, 10% 51%, 2% 36%, 18% 27%, 18% 10%, 36% 15%);
  transform: rotate(9deg);
}

.hero-sticker::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--ink); clip-path: inherit; }
.hero-sticker span { font-size: 1.25rem; line-height: 1; font-weight: 950; }
.hero-sticker small { margin-top: 3px; font-size: .58rem; font-weight: 900; letter-spacing: .12em; }

.sound-section { padding: 63px 0 100px; border-top: 1.5px solid rgba(24, 22, 27, .28); }

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 35px;
}

.kicker { margin-bottom: 7px; color: var(--purple); }

h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.055em; }
.sound-count { margin: 0 0 5px; font-size: .8rem; font-weight: 800; letter-spacing: .08em; }

.sound-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.sound-card {
  --accent: var(--lime);
  position: relative;
  min-width: 0;
  min-height: 250px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  text-align: left;
  background: #fffdfa;
  border: var(--border);
  border-radius: 19px;
  box-shadow: 4px 5px 0 var(--ink);
  cursor: pointer;
  isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.sound-card:nth-child(1) { --accent: #c9ff52; --tilt: -6deg; }
.sound-card:nth-child(2) { --accent: #ffd447; --tilt: 6deg; }
.sound-card:nth-child(3) { --accent: #ff6d5c; --tilt: -6deg; }
.sound-card:nth-child(4) { --accent: #89e6b0; --tilt: 6deg; }
.sound-card:nth-child(5) { --accent: #75d7ff; --tilt: -6deg; }
.sound-card:nth-child(6) { --accent: #ff9fce; --tilt: 6deg; }
.sound-card:nth-child(7) { --accent: #c5a7ff; --tilt: -6deg; }
.sound-card:nth-child(8) { --accent: #ffd447; --tilt: 6deg; }
.sound-card:nth-child(9) { --accent: #ff6d5c; --tilt: -6deg; }
.sound-card:nth-child(10) { --accent: #75d7ff; --tilt: 6deg; }
.sound-card:nth-child(11) { --accent: #c9ff52; --tilt: -6deg; }

.sound-card:hover { transform: translate(-2px, -3px); box-shadow: 7px 8px 0 var(--ink); }
.sound-card:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.sound-card:focus-visible { outline: 4px solid var(--purple); outline-offset: 4px; }
.sound-card.is-playing { background: var(--accent); transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--ink); }

.sound-card.featured {
  grid-column: span 2;
  background: var(--purple);
  color: white;
}

.sound-card.featured.is-playing { background: var(--lime); color: var(--ink); }
.sound-card.featured .play-button { background: var(--lime); color: var(--ink); }
.sound-card.featured.is-playing .play-button { background: var(--ink); color: white; }

.card-top, .card-bottom { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-number { font-size: .69rem; font-weight: 900; letter-spacing: .11em; opacity: .72; }
.card-length { padding: 5px 8px; border: 1.5px solid currentColor; border-radius: 999px; font-size: .63rem; font-weight: 850; }

.sound-illustration {
  position: absolute;
  inset: 38px 12px 56px;
  display: grid;
  place-items: center;
  z-index: 1;
  font-size: 5rem;
  line-height: 1;
  filter: grayscale(.05);
  transform: rotate(var(--tilt, -5deg));
  text-shadow: 3px 3px 0 rgba(24, 22, 27, .18);
  transition: transform .2s ease;
}

.sound-card:hover .sound-illustration { transform: rotate(calc(var(--tilt, -5deg) * -1)) scale(1.06); }
.sound-card.is-playing .sound-illustration { animation: wobble .55s ease-in-out infinite alternate; }

.sound-info { min-width: 0; }
.sound-info h3 { margin: 0 0 4px; font-size: 1.04rem; line-height: 1.05; letter-spacing: -.025em; }
.sound-info p { margin: 0; max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; font-weight: 650; opacity: .65; }

.play-button {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--accent);
  border: var(--border);
  border-radius: 50%;
  font-size: .9rem;
  font-weight: 950;
  box-shadow: 2px 2px 0 var(--ink);
}

.is-playing .play-button { background: var(--ink); color: white; box-shadow: none; }

.now-playing {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  width: min(520px, calc(100% - 32px));
  min-height: 72px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 54px 1fr auto 44px;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: white;
  border: 2px solid white;
  border-radius: 16px;
  box-shadow: 5px 6px 0 rgba(24, 22, 27, .28);
  transform: translate(-50%, calc(100% + 40px));
  opacity: 0;
  transition: .28s cubic-bezier(.2, .9, .25, 1.2);
}

.now-playing.is-visible { transform: translate(-50%, 0); opacity: 1; }
.mini-art { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 10px; background: var(--lime); color: var(--ink); font-size: 1.8rem; }
.mini-art[data-sound="applause"], .mini-art[data-sound="magic"] { background: var(--yellow); }
.mini-art[data-sound="airhorn"], .mini-art[data-sound="buzzer"] { background: var(--coral); }
.mini-art[data-sound="crickets"] { background: var(--green); }
.mini-art[data-sound="trombone"], .mini-art[data-sound="drumroll"] { background: var(--blue); }
.mini-art[data-sound="rimshot"] { background: var(--pink); }
.mini-art[data-sound="laugh"] { background: #c5a7ff; }
.track-copy { min-width: 0; }
.track-copy span { display: block; margin-bottom: 3px; color: var(--lime); font-size: .57rem; font-weight: 900; letter-spacing: .14em; }
.track-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.now-playing > button { width: 38px; height: 38px; padding: 0; border: 1px solid white; border-radius: 50%; background: transparent; color: white; cursor: pointer; }

.equalizer { height: 25px; display: flex; align-items: center; gap: 3px; }
.equalizer i { width: 3px; height: 35%; background: var(--lime); animation: equalize .55s ease-in-out infinite alternate; }
.equalizer i:nth-child(2) { animation-delay: -.2s; }
.equalizer i:nth-child(3) { animation-delay: -.4s; }
.equalizer i:nth-child(4) { animation-delay: -.1s; }

footer {
  min-height: 160px;
  padding: 44px max(20px, calc((100vw - 1180px) / 2));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 30px;
  background: var(--ink);
  color: white;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
}

footer p { margin: 0; text-align: center; font-weight: 550; letter-spacing: .02em; opacity: .64; }
.footer-wave { justify-self: end; color: var(--lime); font-size: 1.3rem; letter-spacing: -.2em; }

@keyframes wobble { from { transform: rotate(-7deg) scale(.98); } to { transform: rotate(7deg) scale(1.06); } }
@keyframes equalize { from { height: 25%; } to { height: 95%; } }

@media (max-width: 900px) {
  .sound-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr; padding-bottom: 58px; }
  .intro { justify-self: start; margin-top: 43px; max-width: 420px; }
  .hero-sticker { right: 2%; }
}

@media (max-width: 580px) {
  .site-header, main { width: min(100% - 28px, 1180px); }
  .site-header { height: 73px; }
  .brand { font-size: .95rem; }
  .brand-mark { width: 29px; height: 28px; }
  .stop-all { padding: 8px 12px; font-size: .69rem; }
  .hero { min-height: 420px; padding-top: 76px; }
  .eyebrow { top: 43px; font-size: .65rem; }
  h1 { font-size: clamp(4rem, 24vw, 6.2rem); }
  .hero-sticker { top: 58px; right: -4px; width: 70px; }
  .hero-sticker span { font-size: 1rem; }
  .hero-sticker small { font-size: .48rem; }
  .intro { margin-top: 40px; font-size: .9rem; }
  .sound-section { padding-top: 46px; }
  .section-heading { align-items: start; }
  .sound-count { margin-top: 4px; text-align: right; }
  .sound-grid { gap: 12px; }
  .sound-card { min-height: 205px; padding: 14px; border-radius: 15px; box-shadow: 3px 4px 0 var(--ink); }
  .sound-card.featured { grid-column: span 2; min-height: 230px; }
  .sound-illustration { inset: 37px 8px 54px; font-size: 4rem; }
  .sound-info h3 { font-size: .86rem; }
  .sound-info p { max-width: 110px; font-size: .6rem; }
  .play-button { width: 35px; height: 35px; font-size: .75rem; }
  .card-length { display: none; }
  .now-playing { grid-template-columns: 48px 1fr auto 40px; gap: 9px; }
  .mini-art { width: 48px; height: 48px; }
  footer { min-height: 180px; grid-template-columns: 1fr auto; }
  footer p { grid-column: 1 / -1; grid-row: 2; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}