:root {

  color-scheme: dark;

  --bg: #0b060a;

  --fg: #f4d8eb;

  --muted: rgba(244, 216, 235, 0.55);

  --subtle-ui: rgba(255, 240, 250, 0.08);

  --subtle-ui-hover: rgba(255, 240, 250, 0.13);

  --focus-ring: rgba(255, 154, 223, 0.55);

  --safe-top: env(safe-area-inset-top, 0px);

  --safe-right: env(safe-area-inset-right, 0px);

  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --safe-left: env(safe-area-inset-left, 0px);

}



* {

  box-sizing: border-box;

  -webkit-tap-highlight-color: transparent;

}



html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family:
    "IBM Plex Sans", "Avenir Next", "Segoe UI", ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, sans-serif;
}


body {

  min-height: 100dvh;

  overscroll-behavior: none;

  touch-action: none;

}



#app {

  position: fixed;

  inset: 0;

  width: 100vw;

  height: 100dvh;

  overflow: hidden;

  background:

    radial-gradient(

      130vmax 130vmax at 50% 50%,

      rgba(36, 9, 29, 0.45) 0%,

      rgba(17, 6, 14, 0.52) 42%,

      rgba(6, 4, 7, 0.94) 100%

    ),

    #090508;

}



#sceneCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;

  outline: none;

  cursor: default;

}



#pasteReceiver:focus-visible {
  outline: none;
}

#muteToggle {
  position: absolute;
  right: calc(14px + var(--safe-right));

  bottom: calc(14px + var(--safe-bottom));

  z-index: 3;

  border: 1px solid rgba(255, 220, 243, 0.14);

  background:

    linear-gradient(

      180deg,

      rgba(255, 233, 248, 0.06),

      rgba(255, 233, 248, 0.03)

    );

  color: rgba(255, 233, 248, 0.75);

  padding: 8px 12px;

  border-radius: 999px;

  font-size: 12px;

  letter-spacing: 0.06em;

  text-transform: lowercase;

  backdrop-filter: blur(8px);

  box-shadow:

    0 1px 0 rgba(255, 255, 255, 0.04) inset,

    0 6px 18px rgba(0, 0, 0, 0.18);

  transition:

    background-color 140ms ease,

    border-color 140ms ease,

    color 140ms ease,

    transform 140ms ease,

    opacity 180ms ease;

  opacity: 0.82;
}

#ambientHint {
  position: absolute;
  left: calc(16px + var(--safe-left));
  bottom: calc(16px + var(--safe-bottom));
  z-index: 3;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 220, 243, 0.08);
  background:
    linear-gradient(
      180deg,
      rgba(255, 233, 248, 0.05),
      rgba(255, 233, 248, 0.02)
    );
  color: rgba(255, 230, 244, 0.56);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  backdrop-filter: blur(8px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0.78;
  transform: translateY(0);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    border-color 220ms ease;
  pointer-events: none;
}

#ambientHint[data-hidden="true"] {
  opacity: 0;
  transform: translateY(8px);
}

#ambientHint[data-dimmed="true"] {
  opacity: 0.42;
  border-color: rgba(255, 220, 243, 0.05);
}

#muteToggle:hover {
  background:
    linear-gradient(
      180deg,
      rgba(255, 233, 248, 0.1),

      rgba(255, 233, 248, 0.05)

    );

  border-color: rgba(255, 220, 243, 0.2);

  color: rgba(255, 245, 250, 0.9);

}



#muteToggle:active {

  transform: translateY(1px);

}



#muteToggle:focus-visible {

  outline: 2px solid var(--focus-ring);

  outline-offset: 2px;

}



#subtleStatus {

  position: absolute;

  top: calc(14px + var(--safe-top));

  left: 50%;

  z-index: 3;

  transform: translateX(-50%);

  max-width: min(70vw, 540px);

  padding: 8px 12px;

  border-radius: 999px;

  font-size: 12px;

  letter-spacing: 0.02em;

  color: rgba(255, 234, 247, 0.82);

  background:

    linear-gradient(

      180deg,

      rgba(255, 232, 246, 0.08),

      rgba(255, 232, 246, 0.04)

    );

  border: 1px solid rgba(255, 225, 242, 0.1);

  backdrop-filter: blur(12px);

  box-shadow:

    0 10px 30px rgba(0, 0, 0, 0.16),

    0 1px 0 rgba(255, 255, 255, 0.04) inset;

  opacity: 0;

  transition:

    opacity 220ms ease,

    transform 220ms ease;

  pointer-events: none;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



#subtleStatus[data-visible="true"] {

  opacity: 1;

  transform: translateX(-50%) translateY(0);

}



.sr-only {

  position: absolute !important;

  width: 1px;

  height: 1px;

  margin: -1px;

  overflow: hidden;

  padding: 0;

  border: 0;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

}



@media (hover: none) and (pointer: coarse) {
  #ambientHint,
  #muteToggle {
    padding: 10px 14px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ambientHint,
  #muteToggle,
  #subtleStatus {
    transition: none;
  }
}