.raccoon-page { position: relative; isolation: isolate; }
.raccoon-page::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--purple-soft) 72%, transparent), transparent 27%),
    radial-gradient(circle at 88% 34%, color-mix(in srgb, var(--orange-soft) 72%, transparent), transparent 24%),
    var(--outside);
}

.raccoon-page .more-menu summary { color: var(--orange); }
.raccoon-page .site-header { border-bottom: 1px solid var(--line); }
.raccoon-main { padding: 0 30px 14px; }

.room-hero {
  position: relative;
  min-height: 285px;
  padding: clamp(36px, 6vw, 68px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--orange-soft) 56%, transparent), transparent 40%),
    linear-gradient(135deg, color-mix(in srgb, var(--purple-soft) 46%, var(--shell)), var(--shell) 58%);
  text-align: center;
}
.room-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border: 1px solid color-mix(in srgb, var(--purple) 11%, transparent);
  border-radius: 46% 54% 58% 42%;
  animation: room-orbit 16s linear infinite;
}
.room-hero::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  left: 13%;
  top: 31%;
  border-radius: 3px;
  background: var(--orange);
  box-shadow: 720px 82px 0 var(--purple), 130px 155px 0 var(--yellow), 835px -42px 0 var(--blue);
  transform: rotate(25deg);
}
.room-hero-copy { position: relative; z-index: 1; max-width: 720px; }
.room-kicker { margin: 0 0 .5rem; color: var(--orange-deep); font: 800 .74rem var(--display); letter-spacing: .13em; }
.room-hero h1 { margin: 0; color: var(--ink); font: 800 clamp(3.35rem, 7vw, 6.2rem)/.92 var(--display); letter-spacing: -.055em; }
.room-hero p:not(.room-kicker) { max-width: 610px; margin: 1rem auto 0; color: var(--muted); font-size: 1rem; }
.room-tags { margin-top: 1.35rem; display: flex; justify-content: center; flex-wrap: wrap; gap: .55rem; }
.room-tags span { padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--purple-deep); font-size: .7rem; font-weight: 800; box-shadow: 0 4px 12px color-mix(in srgb, var(--purple) 8%, transparent); }

.lab {
  margin: 20px 0;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--section);
  box-shadow: var(--shadow);
}
.lab-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.lab-heading .eyebrow { margin: 0 0 .25rem; color: var(--orange-deep); font: 800 .7rem var(--display); letter-spacing: .12em; }
.lab-heading h2 { margin: 0; color: var(--ink); font: 800 clamp(1.75rem, 4vw, 2.55rem)/1 var(--display); letter-spacing: -.035em; }
.lab-heading > p { max-width: 480px; margin: 0; color: var(--muted); font-size: .83rem; text-align: right; }

#viewer {
  position: relative;
  width: min(760px, 100%);
  height: min(68vh, 680px);
  min-height: 540px;
  margin: 26px auto 0;
  overflow: hidden;
  border: 1px solid #634ba0;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 38%, #263474 0, #0b102c 54%, #050713 100%);
  box-shadow: 0 26px 62px rgba(28, 15, 56, .28), inset 0 1px rgba(255, 255, 255, .16);
}
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#viewer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 22%, transparent 78%, rgba(0,0,0,.48)); mix-blend-mode: screen; }
#loader { position: absolute; z-index: 10; inset: 0; display: grid; place-content: center; gap: 8px; text-align: center; background: rgba(9,12,32,.92); color: #eadcff; font-weight: 900; letter-spacing: .04em; transition: opacity .35s, visibility 0s .35s; }
#loader small { color: #9ca8d3; font-weight: 700; letter-spacing: 0; }
#loader button { margin-top: 8px; padding: 10px 14px; border: 1px solid #b88aff; border-radius: 10px; background: #43266e; color: #fff; font: inherit; cursor: pointer; }
#loader span { width: 46px; height: 46px; margin: auto; border: 4px solid #7659c5; border-top-color: #ff5eaf; border-radius: 50%; animation: spin .8s linear infinite; }
#loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#hud { position: absolute; z-index: 4; inset: 18px 20px auto; display: flex; justify-content: space-between; pointer-events: none; color: #d5c6ff; font-size: .72rem; font-weight: 1000; letter-spacing: .14em; }
#hud span { padding: 9px 11px; border: 1px solid rgba(137,109,226,.34); border-radius: 999px; background: rgba(8,12,36,.72); backdrop-filter: blur(8px); }
#impact-word { position: absolute; z-index: 5; left: 50%; top: 42%; opacity: 0; pointer-events: none; color: #fff5a9; font: 1000 italic clamp(2.7rem, 11vw, 6rem)/1 var(--display); letter-spacing: -.1em; text-shadow: 6px 7px #fc417b, -5px -4px #765fff; transform: translate(-50%, -50%) scale(.2) rotate(-14deg); }
#impact-word.show { animation: word .54s cubic-bezier(.17,.79,.3,1) forwards; }
.controls { position: absolute; z-index: 6; right: 20px; bottom: 20px; left: 20px; display: flex; align-items: center; justify-content: center; gap: 20px; }
.controls p { min-width: 170px; margin: 0; color: #efc5e6; font-weight: 900; text-shadow: 0 2px 12px #000; }
#launch { display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px; border: 1px solid #ff89c3; border-radius: 16px; background: linear-gradient(135deg, #ff4eaa, #7d65ff); color: #fff; font: 800 1rem/1 var(--body); cursor: pointer; box-shadow: 0 12px 30px rgba(0,0,0,.38); transition: transform .18s, filter .18s; }
#launch:hover:not(:disabled), #launch:focus-visible:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); outline: 3px solid rgba(255,255,255,.72); outline-offset: 3px; }
#launch:disabled { opacity: .58; cursor: wait; }
kbd { padding: 4px 7px; border-radius: 7px; background: rgba(255,255,255,.17); font: 800 .68rem/1 var(--body); }
.note { max-width: 760px; margin: 0 auto; padding: 16px 4px 0; display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .7rem; }
.note strong { color: var(--purple-deep); }
.mobile-hit::before { content: ""; position: absolute; z-index: 5; inset: 0; pointer-events: none; background: #ff315f; opacity: 0; animation: mobile-flash .28s ease-out; }

@keyframes spin { to { transform: rotate(1turn); } }
@keyframes room-orbit { to { transform: rotate(1turn); } }
@keyframes word { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-25deg); } 22% { opacity: 1; transform: translate(-50%, -50%) scale(1.22) rotate(8deg); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1.65) rotate(0); } }
@keyframes mobile-flash { 0% { opacity: .42; } 100% { opacity: 0; } }

@media (max-width: 720px) {
  .raccoon-main { padding: 0 12px 10px; }
  .room-hero { min-height: 310px; margin-inline: -12px; padding: 46px 18px; }
  .room-hero::after { left: 6%; box-shadow: 270px 95px 0 var(--purple), 82px 175px 0 var(--yellow); }
  .room-hero p:not(.room-kicker) { font-size: .88rem; }
  .room-tags { margin-top: 1.05rem; }
  .lab { margin: 14px 0; padding: 18px 16px; border-radius: 16px; }
  .lab-heading { display: block; }
  .lab-heading > p { margin-top: .55rem; text-align: left; }
  #viewer { height: 67vh; min-height: 500px; margin-top: 20px; border-radius: 22px; }
  #hud { inset: 14px 14px auto; gap: 5px; font-size: .58rem; letter-spacing: .08em; }
  #hud span { padding: 7px 8px; }
  .controls { right: 14px; bottom: 14px; left: 14px; display: grid; gap: 8px; }
  .controls p { min-width: 0; text-align: center; font-size: .85rem; }
  #launch { width: 100%; min-height: 56px; justify-content: center; }
  .note { display: block; line-height: 1.55; }
  .note span { display: block; margin-top: .2rem; }
}

@media (max-width: 420px) {
  .room-hero h1 { font-size: 3rem; }
  .room-tags span:last-child { display: none; }
  #viewer { min-height: 480px; }
  #hud span:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .room-hero::before, #loader span, #impact-word.show, .mobile-hit::before { animation: none !important; }
}