/* Load after playground.css. Every rule is confined to the floating view. */
.floating-wallpaper { display: none; }
body[data-view="floating"] .floating-wallpaper {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
body[data-view="floating"] .wallpaper-parallax {
  position: absolute;
  inset: -42px;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
body[data-view="floating"] .wallpaper-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center;
  will-change: transform;
  animation: wallpaper-drift 32s ease-in-out infinite;
}
body[data-view="floating"] .ambient { display: none; }
body.motion-paused .wallpaper-image,
body.page-hidden .wallpaper-image { animation-play-state: paused; }
@keyframes wallpaper-drift {
  0%, 100% { transform: translate3d(-10px, -6px, 0) scale(1.025); }
  35% { transform: translate3d(10px, -3px, 0) scale(1.04); }
  68% { transform: translate3d(3px, 8px, 0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-view="floating"] .wallpaper-image { animation: none !important; transform: none; }
  body[data-view="floating"] .wallpaper-parallax { transform: none !important; will-change: auto; }
}
body[data-view="floating"] .reference-mascot { position:absolute;top:0;height:100%;background-repeat:no-repeat;clip-path:url(#mascot-silhouette);pointer-events:none; }
body[data-view="floating"] {
  color-scheme: light;
  --ink: #06244d;
  --muted: #6a879f;
  --cyan: #0dbddf;
  --navy: #deefff;
  color: var(--ink);
  background: #deefff;
}

body[data-view="floating"] .world {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(250, 253, 255, .95) 0%, rgba(239, 248, 255, .75) 29%, transparent 64%),
    radial-gradient(ellipse at 8% 83%, rgba(193, 225, 250, .52), transparent 49%),
    linear-gradient(140deg, #d7edff 0%, #e5f3ff 49%, #d4eaff 100%);
}

body[data-view="floating"] .wordmark,
body[data-view="floating"] .wordmark span { color: #06244d; }
body[data-view="floating"] .coming { color: #53748f; }
body[data-view="floating"] .coming i { background: #0dbfe8; box-shadow: 0 0 8px rgba(13, 191, 232, .16); }
body[data-view="floating"] .view-switch {
  background: rgba(245, 251, 255, .72);
  border-color: rgba(60, 113, 151, .17);
  box-shadow: 0 2px 10px rgba(39, 85, 126, .035);
}
body[data-view="floating"] .view-switch button { color: #55758f; }
body[data-view="floating"] .view-switch button:hover { color: #06244d; background: rgba(207, 229, 247, .55); }
body[data-view="floating"] .view-switch button[aria-pressed="true"] { color: #f5fcff; background: #113655; }

body[data-view="floating"] .center-copy {
  top: 49%;
  width: min(560px, calc(100% - 48px));
  color: #06244d;
}
body[data-view="floating"] .center-copy > :not(button) { pointer-events: none; }
body[data-view="floating"] .center-copy .hero-brand {
  display: block;
  width: clamp(310px, 27.78vw, 430px);
  max-width: 90%;
  margin: 0 auto 27px;
  line-height: 0;
}
body[data-view="floating"] .center-copy .hero-brand img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 116px;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}
body[data-view="floating"] .center-copy .eyebrow,
body[data-view="floating"] .center-copy .description { display: none; }
body[data-view="floating"] .center-copy h1 {
  margin: 0;
  color: #06244d;
  font-size: clamp(40px, 3.61vw, 52px);
  line-height: 1.065;
  letter-spacing: -2.1px;
  font-weight: 850;
}
body[data-view="floating"] .center-copy h1 span { color: inherit; background: none; }
body[data-view="floating"] .center-copy .connect-button {
  min-width: 238px;
  height: 56px;
  margin-top: 29px;
  padding: 0 27px;
  gap: 24px;
  border: 1px solid #06244d;
  border-radius: 34px;
  color: #fff;
  background: #06244d;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 7px 18px rgba(7, 47, 82, .12);
}
body[data-view="floating"] .center-copy .connect-button:hover { background: #103b64; box-shadow: 0 9px 24px rgba(7, 47, 82, .17); }
body[data-view="floating"] .center-copy .connect-button svg,
body[data-view="floating"] .center-copy .connect-button .x-letter { display: none; }
body[data-view="floating"] .center-copy .connect-button .arrow { color: #21d4ed; font-size: 25px; margin-left: 15px; }
body[data-view="floating"] .center-copy .join-steps { color: #587991; font-size: 10px; gap: 22px; margin-top: 28px; }
body[data-view="floating"] .center-copy .join-steps li { gap: 7px; }
body[data-view="floating"] .center-copy .join-steps b {
  display: inline;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #00aecd;
  background: none;
  font-size: 10px;
  font-weight: 750;
}

body[data-view="floating"] .draggable { mix-blend-mode: normal; color: #385e7c; }
body[data-view="floating"] .draggable::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 82%;
  height: 17%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(31, 89, 143, .16) 0%, rgba(31, 89, 143, .065) 38%, transparent 73%);
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
}
body[data-view="floating"] .object-drift { position: relative; z-index: 1; }
body[data-view="floating"] .draggable .object-art img.object-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 4px 7px rgba(29, 80, 119, .045));
}
body[data-view="floating"] .object-label {
  color: #315976;
  background: rgba(248, 252, 255, .91);
  border: 1px solid rgba(105, 153, 187, .18);
  box-shadow: 0 3px 9px rgba(38, 82, 119, .045);
}
body[data-view="floating"] .draggable:focus-visible { outline-color: #088db5; }
body[data-view="floating"] .evolution-ring { border-color: #20b4dc; }
body[data-view="floating"] .spark { background: #16bde6; }

body[data-view="floating"] .ambient div {
  border: 0;
  background: radial-gradient(circle at 43% 39%, rgba(185, 221, 249, .035) 27%, rgba(150, 204, 244, .12) 66%, rgba(177, 219, 250, .055) 76%, transparent 86%);
  box-shadow: none;
  filter: blur(13px);
}
body[data-view="floating"] .site-footer { color: #68879e; }
body[data-view="floating"] .interaction-hint strong { color: #355e7c; }
body[data-view="floating"] .mouse-icon { border-color: #7395ad; }
body[data-view="floating"] .mouse-icon::before { background: #0ebbdc; }
body[data-view="floating"] .scene-actions button { color: #476e8a; }
body[data-view="floating"] .scene-actions a { color: #6a8aa2; }
body[data-view="floating"] .scene-actions button:hover,
body[data-view="floating"] .scene-actions a:hover { color: #06244d; }
body[data-view="floating"] .preview-note { color: #68879c; background: #d4e9f9; }
body[data-view="floating"] .preview-note span { color: #95b2c8; }
body[data-view="floating"] .toast { border-color: #adcbdf; color: #153e60; background: rgba(246, 252, 255, .98); box-shadow: 0 8px 28px rgba(14, 61, 99, .1); }
body[data-view="floating"] button:focus-visible,
body[data-view="floating"] a:focus-visible { outline-color: #008cb8; }

@media (max-width: 900px) {
  body[data-view="floating"] .center-copy { width: min(480px, calc(100% - 48px)); }
  body[data-view="floating"] .center-copy .hero-brand { width: min(340px, 81%); margin-bottom: 24px; }
  body[data-view="floating"] .center-copy h1 { font-size: clamp(34px, 5.2vw, 46px); letter-spacing: -1.7px; }
  body[data-view="floating"] .center-copy .join-steps { font-size: 9px; gap: 17px; }
  body[data-view="floating"] .center-copy .join-steps b { font-size: 9px; }
}

@media (max-width: 600px) {
  body[data-view="floating"] .center-copy { top: 47%; width: calc(100% - 42px); }
  body[data-view="floating"] .center-copy .hero-brand { width: min(240px, 82%); margin-bottom: 21px; }
  body[data-view="floating"] .center-copy .hero-brand img { max-height: 77px; }
  body[data-view="floating"] .center-copy h1 { font-size: clamp(30px, 8.2vw, 34px); line-height: 1.075; letter-spacing: -1.15px; }
  body[data-view="floating"] .center-copy .connect-button { min-width: 204px; height: 49px; margin-top: 24px; padding: 0 23px; font-size: 14px; gap: 20px; }
  body[data-view="floating"] .center-copy .connect-button .arrow { font-size: 23px; margin-left: 10px; }
  body[data-view="floating"] .center-copy .join-steps { margin-top: 23px; font-size: 8px; gap: 12px; }
  body[data-view="floating"] .center-copy .join-steps li { gap: 5px; }
  body[data-view="floating"] .center-copy .join-steps b { font-size: 8px; }
  body[data-view="floating"] .object-label { font-size: 8px; }
  body[data-view="floating"] .draggable::before { filter: blur(4px); height: 15%; top: 84%; }
  body[data-view="floating"] .ambient div { filter: blur(9px); }
}