html {
  height: 100%;
  overflow: hidden;
  background: #010705;
}

body[data-page="home"] {
  --realm-mint: #9cf7b7;
  --realm-mint-bright: #d2ffdf;
  --realm-ivory: #f5fff7;
  --realm-soft: rgba(230, 255, 237, 0.78);
  --realm-muted: rgba(235, 244, 239, 0.68);
  --realm-line: rgba(170, 255, 202, 0.2);
  --realm-panel: rgba(2, 12, 9, 0.74);
  --realm-panel-deep: rgba(1, 8, 7, 0.9);
  --realm-shadow: 0 24px 72px rgba(0, 0, 0, 0.55);
  --realm-stage-extra: 0px;
  --rina-topbar-height: 72px !important;
  --font-title: "Mountain King", serif;
  --font-ui: "JHC Rasbora", Georgia, "Times New Roman", serif;
  --font-accent: var(--font-ui);
  --font-realm-title: var(--font-title);
  --font-realm-ui: var(--font-ui);
  margin: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  color: var(--realm-ivory);
  font-family: var(--font-ui);
  letter-spacing: 0;
  background:
    radial-gradient(ellipse at 56% 46%, transparent 0 34%, rgba(0, 12, 8, 0.08) 64%, rgba(0, 6, 4, 0.34) 100%),
    linear-gradient(180deg, rgba(0, 8, 5, 0.18) 0%, transparent 28%, rgba(0, 5, 4, 0.34) 100%),
    url("Pages/ouija-assets/home-scene/rinaverse-background-hq.png") center bottom / cover no-repeat fixed,
    #010705 !important;
}

body[data-page="home"] .home-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

body[data-page="home"] .home-main {
  height: calc(100vh - 72px) !important;
  height: calc(100dvh - 72px) !important;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

body[data-page="home"] .home-topbar {
  min-height: 72px !important;
  display: grid !important;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr) !important;
  align-items: center !important;
  gap: 1.1rem !important;
  padding: 0.75rem 2rem !important;
  border: 0 !important;
  background:
    linear-gradient(180deg, rgba(0, 10, 7, 0.9), rgba(0, 10, 7, 0.28) 70%, rgba(0, 10, 7, 0)) !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
}

body[data-page="home"] .home-topbar::before {
  display: none !important;
}

body[data-page="home"] .home-topbar::after {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(148, 255, 184, 0.42), transparent) !important;
  opacity: 0.74 !important;
  box-shadow: 0 0 14px rgba(125, 255, 174, 0.24) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

body[data-page="home"] .home-brand {
  gap: 0.62rem !important;
  max-width: none !important;
  overflow: visible !important;
  color: var(--realm-mint-bright) !important;
  font: 400 1.05rem/1 var(--font-realm-title) !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 12px rgba(124, 255, 165, 0.48),
    0 0 24px rgba(44, 216, 96, 0.18) !important;
}

body[data-page="home"] .home-brand::before {
  display: none !important;
}

.home-brand-mark {
  position: relative;
  width: 2.32rem;
  height: 2.32rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  filter: none;
}

.home-brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

body[data-page="home"] .home-nav-links {
  position: relative !important;
  z-index: 32 !important;
  justify-self: center !important;
  gap: 1rem !important;
  color: rgba(244, 250, 246, 0.72) !important;
  font: 600 0.76rem/1 var(--font-accent) !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
  overflow: visible !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

body[data-page="home"] .home-nav-links a {
  position: relative;
  z-index: 2 !important;
  min-height: 2rem !important;
  padding: 0.35rem 0.1rem !important;
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: auto !important;
  transition:
    color 220ms ease,
    text-shadow 220ms ease !important;
}

body[data-page="home"] .home-nav-links a + a::before {
  content: none;
  display: none;
}

body[data-page="home"] .home-nav-links a.is-active,
body[data-page="home"] .home-nav-links a:hover,
body[data-page="home"] .home-nav-links a:focus-visible {
  color: var(--realm-mint-bright) !important;
}

body[data-page="home"] .home-nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: -0.1rem;
  right: -0.1rem;
  bottom: -0.54rem;
  height: 1px;
  border: 1px solid rgba(150, 255, 183, 0.54);
  border-inline: 0;
  background: linear-gradient(90deg, transparent, var(--realm-mint-bright), transparent);
  box-shadow: 0 0 16px rgba(140, 255, 178, 0.34);
}

body[data-page="home"] .home-nav-links.has-nav-indicator a.is-active::after {
  content: none !important;
}

body[data-page="home"] .topbar .rina-auth-cluster {
  justify-self: end !important;
}

body[data-page="home"] .topbar .rina-header-balance,
body[data-page="home"] .topbar .rina-auth-button,
body[data-page="home"] .topbar .rina-wallet-button {
  border-color: rgba(174, 255, 205, 0.2) !important;
  color: var(--realm-mint-bright) !important;
  background: rgba(4, 17, 13, 0.58) !important;
  border-radius: 8px !important;
  font-family: var(--font-accent) !important;
  font-weight: 600 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
}

body[data-page="home"] .home-menu-toggle {
  justify-self: end;
  width: 2.5rem !important;
  height: 2.5rem !important;
  border: 1px solid rgba(174, 255, 205, 0.2) !important;
  border-radius: 8px !important;
  background: rgba(4, 17, 13, 0.64) !important;
}

.home-menu-lines,
.home-menu-lines::before,
.home-menu-lines::after {
  display: block;
  width: 1.2rem;
  height: 1px;
  background: var(--realm-mint-bright);
  box-shadow: 0 0 10px rgba(151, 255, 186, 0.42);
}

.home-menu-lines {
  position: relative;
}

.home-menu-lines::before,
.home-menu-lines::after {
  content: "";
  position: absolute;
  left: 0;
}

.home-menu-lines::before {
  top: -0.36rem;
}

.home-menu-lines::after {
  top: 0.36rem;
}

body[data-page="home"] .home-mobile-menu {
  border-color: rgba(174, 255, 205, 0.14) !important;
  background: rgba(2, 11, 8, 0.94) !important;
}

.realm-home {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 56% 46%, transparent 0 34%, rgba(0, 12, 8, 0.08) 64%, rgba(0, 7, 5, 0.32) 100%),
    linear-gradient(180deg, rgba(0, 7, 5, 0.18) 0%, transparent 28%, rgba(0, 5, 4, 0.34) 100%),
    url("Pages/ouija-assets/home-scene/rinaverse-background-hq.png") center bottom / cover no-repeat,
    #010705;
}

.realm-home-bg,
.realm-home-bg img,
.realm-home-bg span {
  position: absolute;
  inset: 0;
}

.realm-home-bg {
  z-index: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #010705;
}

.realm-home-bg img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.realm-home-bg__scene {
  object-position: center bottom;
  filter: none;
  transform: scale(1.02);
}

.realm-home-bg__veil {
  z-index: 4;
  background:
    radial-gradient(ellipse at 56% 46%, transparent 0 38%, rgba(0, 12, 8, 0.04) 68%, rgba(0, 7, 5, 0.2) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.08) 20%, transparent 52%, rgba(0, 0, 0, 0.08) 78%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(180deg, rgba(0, 7, 5, 0.12) 0%, transparent 28%, rgba(0, 5, 4, 0.26) 100%);
}

.realm-home::before,
.realm-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.realm-home::before {
  background:
    radial-gradient(circle at 12% 27%, rgba(190, 255, 206, 0.82) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 68%, rgba(139, 255, 164, 0.38) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 18%, rgba(229, 255, 232, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 44%, rgba(132, 255, 163, 0.36) 0 1px, transparent 2px);
  background-size: 15rem 12rem, 19rem 16rem, 22rem 18rem, 26rem 20rem;
  opacity: 0.22;
  animation: realmStarsDrift 18s ease-in-out infinite alternate;
}

.realm-home::after {
  background: linear-gradient(180deg, rgba(1, 6, 4, 0) 0 78%, rgba(0, 3, 2, 0.18) 100%);
}

.realm-home__layout {
  position: relative;
  z-index: 5;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(31rem, 39rem) minmax(16rem, 1fr) minmax(22rem, 25.5rem);
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 2.25rem 2rem;
}

.realm-hero-copy {
  position: relative;
  z-index: 12;
  align-self: start;
  display: grid;
  justify-items: start;
  gap: 0.98rem;
  max-width: 42rem;
  padding-top: 0.35rem;
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.84);
}

.realm-title-stack {
  display: grid;
  justify-items: center;
  width: max-content;
  max-width: 100%;
  transform: translateX(var(--realm-title-stack-nudge, -3.3rem));
}

.realm-hero-copy__crest {
  width: clamp(27rem, 37vw, 33rem);
  max-width: 100%;
  height: clamp(5.4rem, 7.5vw, 6.5rem);
  display: block;
  opacity: 0.96;
  transform: translateY(-0.42rem);
  background: url("Pages/ouija-assets/home-ornaments/realm-divider-source.png") center / contain no-repeat;
  filter:
    brightness(0) saturate(100%) invert(86%) sepia(20%) saturate(653%) hue-rotate(76deg) brightness(108%) contrast(104%)
    drop-shadow(0 0 10px rgba(164, 255, 194, 0.3))
    drop-shadow(0 0 22px rgba(84, 255, 138, 0.18));
}

.realm-title-lockup {
  position: relative;
  display: inline-block;
  max-width: 100%;
  isolation: isolate;
}

.realm-hero-copy h1 {
  display: inline-block;
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--realm-ivory);
  font: 400 clamp(4.45rem, 5.85vw, 6.35rem)/0.82 var(--font-realm-title);
  text-transform: uppercase;
  white-space: nowrap;
  transform: scaleX(1.13);
  transform-origin: center;
  background: linear-gradient(180deg, #ffffff 0%, #f6fff8 50%, #d8ffe0 66%, #83dc94 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 10px rgba(221, 255, 230, 0.16),
    0 0 24px rgba(119, 255, 154, 0.24),
    0 10px 32px rgba(0, 0, 0, 0.9);
}

.realm-title-star {
  position: absolute;
  z-index: 3;
  display: block;
  width: 2.45rem;
  height: 2.45rem;
  background: url("Pages/ouija-assets/home-ornaments/realm-title-star.png") center / contain no-repeat;
  filter:
    brightness(0) saturate(100%) invert(88%) sepia(18%) saturate(667%) hue-rotate(75deg) brightness(108%) contrast(101%)
    drop-shadow(0 0 8px rgba(204, 255, 217, 0.44))
    drop-shadow(0 0 18px rgba(109, 255, 155, 0.22));
  opacity: 0.9;
  pointer-events: none;
}

.realm-title-star--right-top {
  left: calc(107% + 1.35rem);
  top: 24%;
  width: 2.32rem;
  height: 2.32rem;
  transform: translate(-50%, -50%);
}

.realm-title-star--right-low {
  left: calc(107% + 0.75rem);
  top: 71%;
  width: 1.72rem;
  height: 1.72rem;
  opacity: 0.78;
  transform: translate(-50%, -50%);
}

.realm-hero-copy p {
  margin: 0;
  max-width: 23rem;
  color: rgba(247, 250, 248, 0.86);
  font: 500 clamp(1.06rem, 1.35vw, 1.24rem)/1.45 var(--font-ui);
  letter-spacing: 0;
}

.realm-notification-panel {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  width: min(34rem, 100%);
  display: grid;
  gap: 0;
  margin-left: -0.35rem;
  padding: 1.36rem 1.42rem 1.5rem;
  border: 1px solid rgba(186, 255, 211, 0.28);
  border-radius: 7px;
  background:
    radial-gradient(circle at 18% 6%, rgba(157, 255, 189, 0.13), transparent 34%),
    radial-gradient(circle at 78% 64%, rgba(91, 231, 132, 0.07), transparent 42%),
    linear-gradient(180deg, rgba(2, 16, 11, 0.9), rgba(0, 9, 7, 0.82));
  box-shadow:
    0 22px 72px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(214, 255, 227, 0.04),
    inset 0 0 34px rgba(104, 255, 151, 0.05);
  backdrop-filter: blur(17px) saturate(130%);
}

.realm-notification-panel::before {
  content: "";
  position: absolute;
  inset: 0.34rem;
  z-index: 0;
  border: 1px solid rgba(195, 255, 214, 0.24);
  border-radius: 6px;
  clip-path: polygon(1rem 0, calc(100% - 1rem) 0, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 1rem 100%, 0 calc(100% - 1rem), 0 1rem);
  pointer-events: none;
}

.realm-notification-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.34rem;
  z-index: 2;
  width: 8.4rem;
  height: 1.05rem;
  background: url("Pages/ouija-assets/home-ornaments/realm-divider-source.png") center / contain no-repeat;
  opacity: 0.44;
  filter:
    brightness(0) saturate(100%) invert(86%) sepia(20%) saturate(653%) hue-rotate(76deg) brightness(108%) contrast(104%)
    drop-shadow(0 0 9px rgba(141, 255, 177, 0.2));
  transform: translateX(-50%) scaleY(0.54);
  transform-origin: center;
  pointer-events: none;
}

.realm-notification-panel > * {
  position: relative;
  z-index: 1;
}

.realm-notification-panel *,
.realm-notification-panel *::before,
.realm-notification-panel *::after {
  box-sizing: border-box;
}

.realm-rina-chat-notice {
  position: relative;
  min-height: 7.25rem;
  display: grid;
  grid-template-columns: 5.35rem minmax(0, 1fr) 6.8rem;
  gap: 1.14rem;
  align-items: center;
  padding: 0.52rem 1.02rem 1.12rem;
  border: 0;
  border-bottom: 1px solid rgba(186, 255, 210, 0.16);
  border-radius: 0;
  color: rgba(249, 255, 251, 0.92);
  background: transparent;
  text-align: left;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.75);
  cursor: pointer;
  appearance: none;
  transition: background 160ms ease, color 160ms ease;
}

.realm-rina-chat-notice::after {
  content: "";
  position: absolute;
  left: 5.58rem;
  bottom: 1.52rem;
  z-index: 3;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(2, 12, 9, 0.98);
  border-radius: 50%;
  background: #77f69b;
  box-shadow: 0 0 16px rgba(113, 255, 152, 0.76);
}

.realm-rina-chat-notice:hover,
.realm-rina-chat-notice:focus-visible,
.realm-rina-chat-notice[aria-expanded="true"] {
  background: rgba(119, 255, 157, 0.035);
  outline: none;
}

.realm-rina-chat-notice__avatar,
.realm-rina-chat-notice__avatar > img {
  width: 5.35rem;
  height: 5.35rem;
}

.realm-rina-chat-notice__avatar {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}

.realm-rina-chat-notice__avatar > img {
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(165, 255, 196, 0.48);
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(106, 255, 157, 0.1),
    inset 0 0 18px rgba(126, 255, 163, 0.18),
    0 0 28px rgba(115, 255, 161, 0.24);
}

.realm-rina-chat-notice__copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.realm-rina-chat-notice__eyebrow,
.realm-notification-heading span {
  color: rgba(199, 255, 216, 0.66);
  font: 600 0.72rem/1 var(--font-accent);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.realm-rina-chat-notice strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: rgba(249, 255, 251, 0.96);
  font: 700 1.26rem/1.08 var(--font-ui);
  letter-spacing: -0.02em;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realm-rina-chat-notice__copy > span:not(.realm-rina-chat-notice__eyebrow) {
  overflow: hidden;
  color: rgba(248, 251, 249, 0.74);
  font: 500 1rem/1.45 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realm-rina-chat-notice__action {
  width: 6.8rem;
  min-height: 3.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.75rem;
  border: 1px solid rgba(174, 255, 205, 0.32);
  border-radius: 8px;
  color: var(--realm-mint-bright) !important;
  background:
    linear-gradient(180deg, rgba(10, 43, 27, 0.54), rgba(0, 14, 10, 0.68));
  box-shadow:
    inset 0 0 0 1px rgba(214, 255, 227, 0.04),
    0 0 18px rgba(74, 255, 126, 0.08);
  font: 600 0.72rem/1 var(--font-accent) !important;
  letter-spacing: 0.045em !important;
  text-transform: none;
  white-space: nowrap;
}

.realm-notification-updates {
  display: grid;
  gap: 0;
}

.realm-notification-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  min-height: 3.55rem;
  padding: 1.08rem 1.02rem 0.72rem;
  border-bottom: 1px solid rgba(186, 255, 210, 0.13);
}

.realm-notification-heading h2 {
  margin: 0;
  color: rgba(211, 255, 225, 0.76);
  font: 600 0.74rem/1 var(--font-accent);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(149, 255, 187, 0.3);
}

.realm-notification-heading h2::after {
  content: " +";
  color: var(--realm-mint-bright);
  text-shadow: 0 0 12px rgba(149, 255, 187, 0.42);
}

.realm-update-row {
  min-height: 5.35rem;
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr) 5.9rem;
  gap: 0.72rem;
  align-items: center;
  padding: 0.88rem 0.72rem;
  border: 0;
  border-bottom: 1px solid rgba(186, 255, 210, 0.13);
  border-radius: 0;
  color: inherit;
  background: transparent;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}

.realm-update-row:hover,
.realm-update-row:focus-visible {
  background: rgba(119, 255, 157, 0.035);
  outline: none;
}

.realm-update-row__mark {
  width: clamp(2.55rem, 3.7vw, 2.82rem);
  height: clamp(2.55rem, 3.7vw, 2.82rem);
  justify-self: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0 12px rgba(127, 255, 162, 0.24));
  opacity: 0.94;
  transition: filter 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.realm-update-row:hover .realm-update-row__mark,
.realm-update-row:focus-visible .realm-update-row__mark {
  filter: drop-shadow(0 0 16px rgba(127, 255, 162, 0.36));
  opacity: 1;
  transform: scale(1.045);
}

.realm-update-row__mark--puzzle {
  background-image: url("Pages/ouija-assets/home-notices/notice-puzzle.png");
}

.realm-update-row__mark--shop {
  background-image: url("Pages/ouija-assets/home-notices/notice-shop.png");
}

.realm-update-row__mark--x-tools {
  background-image: url("Pages/ouija-assets/home-notices/notice-x-tools.png");
}

.realm-update-row__copy {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.realm-update-row__copy strong {
  color: rgba(249, 255, 251, 0.94);
  font: 700 1.08rem/1.12 var(--font-ui);
  letter-spacing: -0.02em;
  text-transform: none;
  white-space: normal;
}

.realm-update-row__copy span {
  color: rgba(248, 251, 249, 0.66);
  font: 500 0.92rem/1.45 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

.realm-update-row__cta {
  width: 5.9rem;
  min-height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.38rem 0.75rem;
  border: 1px solid rgba(174, 255, 205, 0.32);
  border-radius: 8px;
  color: var(--realm-mint-bright);
  background:
    linear-gradient(180deg, rgba(10, 43, 27, 0.5), rgba(0, 14, 10, 0.66));
  box-shadow:
    inset 0 0 0 1px rgba(214, 255, 227, 0.04),
    0 0 18px rgba(74, 255, 126, 0.08);
  font: 600 0.72rem/1 var(--font-accent);
  letter-spacing: 0.045em;
  text-transform: none;
  white-space: nowrap;
}

.realm-rina {
  position: absolute;
  left: 50.6%;
  bottom: -0.25rem;
  z-index: 8;
  width: min(43rem, 35.5vw);
  max-width: none;
  aspect-ratio: 1280 / 1552;
  margin: 0;
  transform: translate3d(calc(-50% + var(--realm-pointer-x, 0) * 0.85rem), calc(var(--realm-pointer-y, 0) * 0.45rem), 0);
  pointer-events: none;
}

.realm-rina::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: 74%;
  height: 78%;
  border-radius: 48% 52% 50% 50%;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(152, 255, 180, 0.32), transparent 42%),
    radial-gradient(ellipse at 52% 70%, rgba(66, 221, 101, 0.22), transparent 66%);
  filter: blur(18px);
  opacity: 0.72;
  transform: translateX(-50%);
}

.realm-rina__image {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter:
    drop-shadow(0 24px 28px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 18px rgba(176, 255, 200, 0.22))
    drop-shadow(0 0 42px rgba(78, 239, 115, 0.12));
  transform: translate3d(0, 0.65rem, 0) scale(0.997);
  transition:
    opacity 220ms ease,
    transform 420ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

.realm-rina__image.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.realm-feature-card {
  position: absolute;
  left: 2rem;
  right: auto;
  bottom: 7.55rem;
  z-index: 19;
  width: min(20.5rem, calc(100vw - 9rem));
  min-height: 5.35rem;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.68rem;
  align-items: center;
  padding: 0.72rem 2.75rem 0.72rem 0.78rem;
  border: 1px solid rgba(173, 255, 204, 0.2);
  border-radius: 8px;
  background:
    radial-gradient(circle at 9% 20%, rgba(154, 255, 190, 0.12), transparent 34%),
    rgba(1, 10, 8, 0.74);
  box-shadow: var(--realm-shadow);
  backdrop-filter: blur(14px) saturate(128%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.realm-feature-card.is-dismissed {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.6rem);
}

.realm-feature-card img {
  width: 3.15rem;
  height: 3.15rem;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 0 12px rgba(145, 255, 184, 0.36)) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.32));
}

.realm-feature-card div {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.realm-feature-card strong {
  color: var(--realm-mint-bright);
  font: 700 0.9rem/1.08 var(--font-ui);
  letter-spacing: -0.02em;
  text-transform: none;
  text-shadow: 0 0 14px rgba(149, 255, 187, 0.3);
}

.realm-feature-card p {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  color: rgba(246, 249, 247, 0.84);
  font: 500 0.8rem/1.45 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realm-feature-card a {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.3rem;
  min-height: 1.78rem;
  padding: 0.34rem 0.7rem;
  border: 1px solid rgba(174, 255, 205, 0.18);
  border-radius: 8px;
  color: var(--realm-mint-bright);
  background: rgba(5, 24, 16, 0.58);
  font: 600 0.62rem/1 var(--font-accent);
  letter-spacing: 0.045em;
  text-decoration: none;
  text-transform: uppercase;
}

.realm-feature-card__close {
  position: absolute;
  top: 0.62rem;
  right: 0.62rem;
  z-index: 2;
  width: 1.66rem;
  height: 1.66rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(226, 255, 236, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(245, 255, 248, 0.72);
}

.realm-feature-card__close::before,
.realm-feature-card__close::after {
  content: "";
  position: absolute;
  width: 0.68rem;
  height: 1px;
  background: currentColor;
}

.realm-feature-card__close::before {
  transform: rotate(45deg);
}

.realm-feature-card__close::after {
  transform: rotate(-45deg);
}

.realm-portal-arc {
  position: absolute;
  z-index: 30;
  grid-column: 1 / -1;
  align-self: stretch;
  justify-self: stretch;
  inset: 0;
  display: block;
  padding: 0;
  pointer-events: none;
  --realm-planet-size: clamp(13rem, 12vw, 15.5rem);
}

.realm-portal {
  position: absolute;
  left: calc(var(--portal-x) - (var(--realm-planet-size) / 2));
  top: calc(var(--portal-y) - (var(--realm-planet-size) / 2));
  width: var(--realm-planet-size);
  height: var(--realm-planet-size);
  min-height: 0;
  display: grid;
  place-items: center;
  color: var(--realm-soft);
  text-decoration: none;
  outline-offset: 0.35rem;
  pointer-events: auto;
}

.realm-portal:nth-of-type(1) {
  --portal-x: 72.5%;
  --portal-y: 17.5%;
}

.realm-portal:nth-of-type(2) {
  --portal-x: 79.2%;
  --portal-y: 34%;
}

.realm-portal:nth-of-type(3) {
  --portal-x: 81.2%;
  --portal-y: 52%;
}

.realm-portal:nth-of-type(4) {
  --portal-x: 79.2%;
  --portal-y: 70%;
}

.realm-portal:nth-of-type(5) {
  --portal-x: 72.5%;
  --portal-y: 86.5%;
}

.realm-portal__orb {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.realm-portal__orb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(134, 255, 177, 0.22));
  transition: filter 160ms ease;
}

.realm-portal:hover,
.realm-portal:focus-visible,
.realm-portal.is-active {
  color: var(--realm-ivory);
  outline: none;
}

.realm-portal:hover .realm-portal__orb img,
.realm-portal:focus-visible .realm-portal__orb img,
.realm-portal.is-active .realm-portal__orb img {
  filter:
    drop-shadow(0 0 15px rgba(213, 255, 223, 0.88))
    drop-shadow(0 0 34px rgba(87, 255, 137, 0.58));
}

.realm-chat-dock {
  position: absolute;
  left: 2rem;
  right: auto;
  bottom: 1.15rem;
  z-index: 20;
  display: grid;
  grid-template-columns: 4.45rem minmax(0, 1fr);
  gap: 0.95rem;
  align-items: center;
  width: min(26rem, calc(100vw - 4rem));
  min-height: 5.2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  text-align: left;
  color: rgba(249, 255, 251, 0.92);
  background: transparent;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.75);
  text-decoration: none;
  cursor: pointer;
  transform: translateZ(0);
  transition: filter 160ms ease, transform 160ms ease;
}

.realm-chat-dock::before {
  content: "";
  position: absolute;
  left: -0.95rem;
  right: -1.1rem;
  top: -0.82rem;
  bottom: -0.82rem;
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 32%, rgba(127, 255, 163, 0.14), transparent 42%),
    linear-gradient(90deg, rgba(0, 9, 6, 0.52), rgba(0, 9, 6, 0.08) 72%, transparent);
  opacity: 0;
  transition: opacity 160ms ease;
}

.realm-chat-dock::after {
  content: "";
  position: absolute;
  left: 3.48rem;
  bottom: 0.5rem;
  z-index: 3;
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid rgba(2, 12, 9, 0.98);
  border-radius: 50%;
  background: #77f69b;
  box-shadow: 0 0 16px rgba(113, 255, 152, 0.76);
}

.realm-chat-dock:hover,
.realm-chat-dock:focus-visible {
  filter: drop-shadow(0 0 18px rgba(127, 255, 162, 0.16));
  transform: translate3d(0.12rem, -0.05rem, 0);
  outline: none;
}

.realm-chat-dock:hover::before,
.realm-chat-dock:focus-visible::before {
  opacity: 1;
}

.realm-chat-dock__avatar {
  position: relative;
  z-index: 1;
  width: 4.45rem;
  height: 4.45rem;
  display: grid;
  place-items: center;
}

.realm-chat-dock__avatar > img,
.realm-chat-dock__avatar .rina-user-avatar {
  width: 4.45rem;
  height: 4.45rem;
}

.realm-chat-dock__avatar > img {
  object-fit: cover;
  border: 1px solid rgba(160, 255, 190, 0.52);
  border-radius: 50%;
  box-shadow:
    0 0 0 4px rgba(106, 255, 157, 0.08),
    inset 0 0 18px rgba(126, 255, 163, 0.18),
    0 0 24px rgba(115, 255, 161, 0.2);
}

.realm-chat-dock__avatar .rina-user-avatar {
  --rina-avatar-size: 4.45rem;
  --rina-avatar-ring-offset: 4px;
  border-color: rgba(160, 255, 190, 0.52);
  color: var(--realm-mint-bright);
  box-shadow:
    0 0 0 4px rgba(106, 255, 157, 0.08),
    inset 0 0 18px rgba(126, 255, 163, 0.18),
    0 0 24px rgba(115, 255, 161, 0.2);
}

.realm-chat-dock div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.38rem;
  min-width: 0;
}

.realm-chat-dock strong {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: rgba(249, 255, 251, 0.96);
  font: 700 1.02rem/1.08 var(--font-ui);
  letter-spacing: -0.02em;
  text-transform: none;
}

.realm-chat-dock span {
  color: rgba(248, 251, 249, 0.74);
  font: 500 0.9rem/1.35 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
}

.realm-chat-dock__crown {
  position: relative;
  width: 0.82rem;
  height: 0.7rem;
  display: inline-block;
  color: var(--realm-mint-bright) !important;
}

.realm-chat-dock__crown::before {
  content: "";
  position: absolute;
  inset: 0.18rem 0 0;
  border: 1px solid currentColor;
  border-top: 0;
  clip-path: polygon(0 32%, 25% 0, 50% 36%, 75% 0, 100% 32%, 88% 100%, 12% 100%);
  background: rgba(121, 255, 155, 0.18);
  box-shadow: 0 0 10px rgba(135, 255, 170, 0.28);
}

.realm-chat-dock__level {
  display: grid;
  grid-template-columns: auto minmax(5rem, 8.2rem) auto;
  align-items: center;
  gap: 0.72rem;
  width: min(100%, 15.8rem);
}

.realm-chat-dock__level span {
  white-space: nowrap;
}

.realm-chat-dock__meter {
  width: 100%;
  height: 0.35rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(233, 255, 240, 0.12);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.42);
}

.realm-chat-dock__meter i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6ee88f, #c4ffd1);
  box-shadow: 0 0 14px rgba(120, 255, 154, 0.44);
  transition: width 260ms ease;
}

body[data-page="home"] .rina-chat-root {
  left: clamp(1rem, 2vw, 2rem) !important;
  right: auto !important;
  bottom: clamp(0.85rem, 2vh, 1.15rem) !important;
  z-index: 120 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  pointer-events: none !important;
}

body[data-page="home"] .rina-chat-root.is-open {
  top: calc(var(--rina-topbar-height, 72px) + clamp(0.35rem, 1.2vh, 0.7rem)) !important;
  bottom: clamp(1.4rem, 4vh, 2.75rem) !important;
  width: min(430px, calc(100vw - 2rem)) !important;
}

body[data-page="home"] .rina-community-chat {
  left: auto !important;
  right: 1.5rem !important;
  top: var(--rina-topbar-height, 72px) !important;
  bottom: 0 !important;
  width: min(428px, calc(100vw - 0.25rem)) !important;
  z-index: 71 !important;
  transform: translateX(var(--rina-chat-panel-width)) !important;
}

body[data-page="home"] .rina-community-chat.is-open {
  top: var(--rina-topbar-height, 72px) !important;
  bottom: 0 !important;
  width: min(428px, calc(100vw - 0.25rem)) !important;
  transform: translateX(0) !important;
}

body[data-page="home"] .rina-community-launcher {
  left: 0 !important;
  right: auto !important;
  width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 !important;
  border: 1px solid rgba(126, 255, 190, 0.34) !important;
  border-radius: 50% !important;
  background: rgba(4, 9, 7, 0.9) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  bottom: 1.15rem !important;
}

@media (max-height: 520px) {
  body[data-page="home"] .rina-community-launcher {
    top: 0.75rem !important;
    bottom: auto !important;
  }
}

body[data-page="home"] .rina-chat-launcher {
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-page="home"] .rina-chat-launcher img {
  width: 1px !important;
  height: 1px !important;
}

body[data-page="home"] .rina-chat-toast-stack {
  display: none !important;
}

body[data-page="home"] .rina-chat-panel {
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  pointer-events: auto !important;
  transform-origin: left top !important;
}

body[data-page="home"] .rina-chat-root.is-open .rina-chat-panel {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

body[data-page="home"] .rina-chat-log {
  min-height: 0 !important;
}

body[data-page="home"] .rina-community-panel {
  display: none !important;
  left: auto !important;
  right: 0 !important;
}

body[data-page="home"] .rina-community-chat.is-open .rina-community-panel {
  display: grid !important;
}

body[data-page="home"] .rina-community-launcher-label,
body[data-page="home"] .rina-community-dot {
  display: none !important;
}

@keyframes realmStarsDrift {
  from { transform: translate3d(-0.25rem, -0.15rem, 0); }
  to { transform: translate3d(0.25rem, 0.15rem, 0); }
}

@media (max-width: 1320px) {
  body[data-page="home"] .home-topbar {
    grid-template-columns: minmax(170px, auto) minmax(0, 1fr) auto !important;
    gap: 0.8rem !important;
    padding-inline: 1.25rem !important;
  }

  body[data-page="home"] .home-nav-links {
    gap: 0.82rem !important;
    font-size: 0.8rem !important;
  }

  .realm-home__layout {
    grid-template-columns: minmax(27rem, 33rem) minmax(13rem, 1fr) minmax(20rem, 22.5rem);
    padding-inline: 1.6rem;
  }

  .realm-rina {
    width: min(36.5rem, 36.5vw);
    bottom: -0.2rem;
  }

  .realm-portal-arc {
    grid-column: 1 / -1;
    inset: 0;
    width: auto;
    height: auto;
    --realm-planet-size: clamp(11.5rem, 13vw, 13rem);
  }

  .realm-portal {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .realm-portal__orb {
    width: 100%;
    height: 100%;
  }

  .realm-notification-panel {
    width: min(29.5rem, 100%);
  }

  .realm-feature-card,
  .realm-chat-dock,
  body[data-page="home"] .rina-chat-root {
    right: auto !important;
  }

  .realm-feature-card {
    left: 1.6rem;
    width: 20rem;
  }

  .realm-chat-dock {
    left: 1.6rem;
    width: 23.5rem;
  }

  body[data-page="home"] .rina-chat-root {
    left: 1.6rem !important;
  }

  body[data-page="home"] .rina-community-chat {
    left: auto !important;
    right: 1.25rem !important;
  }

}

@media (max-width: 1060px) {
  body[data-page="home"] .home-topbar {
    grid-template-columns: minmax(170px, 1fr) auto auto !important;
  }

  body[data-page="home"] .home-nav-links {
    display: none !important;
  }

  body[data-page="home"] .home-menu-toggle {
    display: grid !important;
  }

  .realm-home {
    overflow: hidden;
  }

  .realm-home__layout {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 1.2rem;
    padding: 1.35rem 1rem 2rem;
  }

  .realm-hero-copy {
    justify-items: center;
    justify-self: center;
    text-align: center;
    padding-top: 0;
    width: 100%;
    max-width: min(42rem, 100%);
  }

  .realm-title-stack {
    width: 100%;
    --realm-title-stack-nudge: -1.9rem;
  }

  .realm-hero-copy__crest {
    width: min(27rem, calc(100vw - 2rem));
    height: 4.15rem;
  }

  .realm-hero-copy h1 {
    font-size: 4.05rem;
    white-space: normal;
    transform: scaleX(1.08);
    transform-origin: center;
  }

  .realm-hero-copy p {
    font-size: 1.05rem;
  }

  .realm-notification-panel {
    width: min(27rem, 100%);
    justify-self: center;
    text-align: left;
  }

  .realm-rina {
    position: absolute;
    left: 50%;
    top: clamp(17rem, 34vh, 20.5rem);
    bottom: auto;
    justify-self: center;
    order: 2;
    width: min(29rem, 72vw);
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
  }

  .realm-portal-arc {
    position: absolute;
    left: auto;
    right: 0.75rem;
    top: clamp(13rem, 27vh, 17rem);
    bottom: auto;
    height: min(38rem, 64vh);
    pointer-events: auto;
    order: 3;
    grid-column: 1;
    justify-self: auto;
    width: min(31rem, 46vw);
    display: block;
    padding: 0;
    transform: none;
    --realm-planet-size: clamp(6.5rem, 12vw, 8.25rem);
  }

  .realm-portal {
    position: absolute;
    left: calc(var(--portal-x) - (var(--realm-planet-size) / 2));
    top: calc(var(--portal-y) - (var(--realm-planet-size) / 2));
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    justify-self: center;
    gap: 0;
    width: var(--realm-planet-size);
    height: var(--realm-planet-size);
    min-height: 0;
    margin-inline: 0;
    padding: 0;
    transform: none;
  }

  .realm-portal:nth-of-type(n) {
    justify-self: center;
    margin-inline: 0;
  }

  .realm-portal:nth-of-type(1) {
    --portal-x: 54%;
    --portal-y: 17%;
  }

  .realm-portal:nth-of-type(2) {
    --portal-x: 75.2%;
    --portal-y: 27.25%;
  }

  .realm-portal:nth-of-type(3) {
    --portal-x: 84%;
    --portal-y: 52%;
  }

  .realm-portal:nth-of-type(4) {
    --portal-x: 75.2%;
    --portal-y: 76.75%;
  }

  .realm-portal:nth-of-type(5) {
    --portal-x: 54%;
    --portal-y: 87%;
  }

  .realm-portal:hover,
  .realm-portal:focus-visible,
  .realm-portal.is-active {
    transform: none;
  }

  .realm-portal__orb {
    width: 100%;
    height: 100%;
  }

  .realm-feature-card,
  .realm-chat-dock {
    position: absolute;
    left: 50%;
    right: auto !important;
    bottom: 8.8rem;
    justify-self: center;
    transform: translateX(-50%);
  }

  .realm-feature-card {
    order: 4;
    width: min(22rem, calc(100vw - 2rem));
  }

  .realm-chat-dock {
    display: none;
    order: 5;
    width: min(25rem, 100%);
    margin-top: 0.2rem;
  }
}

@media (max-width: 760px) {
  body[data-page="home"] {
    --rina-topbar-height: 62px !important;
    overflow: hidden;
  }

  body[data-page="home"] .home-main {
    height: calc(100vh - 62px) !important;
    height: calc(100dvh - 62px) !important;
  }

  body[data-page="home"] .home-topbar {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 0.38rem !important;
    min-height: 62px !important;
    padding: 0.55rem 0.7rem !important;
  }

  body[data-page="home"] .home-menu-toggle {
    position: absolute !important;
    top: 50% !important;
    right: max(0.7rem, calc(100vw - 380px)) !important;
    grid-column: 3 !important;
    display: grid !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
    visibility: visible !important;
  }

  body[data-page="home"] .home-brand {
    min-width: 0 !important;
    font-size: 0.78rem !important;
  }

  body[data-page="home"] .home-brand span:last-child {
    max-width: 7.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .home-brand-mark {
    width: 1.9rem;
    height: 1.9rem;
  }

  body[data-page="home"] .topbar .rina-auth-cluster {
    display: none !important;
  }

  body[data-page="home"] .rina-chat-root,
  body[data-page="home"] .rina-community-chat {
    display: none !important;
  }

  .realm-home__layout {
    padding: 0.9rem 0.75rem;
  }

  .realm-home-bg__scene {
    object-position: 63% bottom;
    filter: none;
    transform: scale(1.08);
  }

  .realm-hero-copy {
    gap: 0.9rem;
  }

  .realm-title-stack {
    --realm-title-stack-nudge: -2.65rem;
  }

  .realm-hero-copy h1 {
    font-size: 3.12rem;
    transform: scaleX(1.04);
  }

  .realm-title-star--right-top {
    left: auto;
    right: -0.05rem;
    top: 25%;
    width: 1.25rem;
    height: 1.25rem;
  }

  .realm-title-star--right-low {
    left: auto;
    right: 0.95rem;
    top: 65%;
    width: 1rem;
    height: 1rem;
  }

  .realm-hero-copy p {
    max-width: 18rem;
    font-size: 0.98rem;
  }

  .realm-notification-panel {
    width: min(19.4rem, calc(100vw - 4.75rem));
    gap: 0;
    padding: 0.72rem;
    transform: translateX(clamp(-2.75rem, -10vw, -1.25rem));
  }

  .realm-rina-chat-notice {
    min-height: 4.75rem;
    grid-template-columns: 3.12rem minmax(0, 1fr) 4.35rem;
    gap: 0.62rem;
    padding: 0.48rem 0.52rem 0.82rem;
  }

  .realm-rina-chat-notice::after {
    left: 2.88rem;
    width: 0.68rem;
    height: 0.68rem;
  }

  .realm-rina-chat-notice__avatar,
  .realm-rina-chat-notice__avatar > img {
    width: 3.12rem;
    height: 3.12rem;
  }

  .realm-rina-chat-notice__eyebrow {
    font-size: 0.52rem;
  }

  .realm-rina-chat-notice strong {
    font-size: 0.9rem;
  }

  .realm-rina-chat-notice__copy > span:not(.realm-rina-chat-notice__eyebrow) {
    font-size: 0.72rem;
  }

  .realm-rina-chat-notice__action {
    grid-column: auto;
    justify-self: end;
    width: 4.35rem;
    min-height: 2rem;
    padding-inline: 0.46rem;
    font-size: 0.5rem !important;
  }

  .realm-notification-heading {
    align-items: center;
    min-height: 2.44rem;
    padding: 0.62rem 0.52rem 0.46rem;
  }

  .realm-notification-heading h2 {
    font-size: 0.74rem;
  }

  .realm-update-row {
    min-height: 3.35rem;
    grid-template-columns: 2.05rem minmax(0, 1fr) 4.1rem;
    gap: 0.48rem;
    padding: 0.5rem 0.52rem;
  }

  .realm-update-row__mark {
    width: 1.96rem;
    height: 1.96rem;
  }

  .realm-update-row__copy strong {
    font-size: 0.7rem;
  }

  .realm-update-row__copy span {
    font-size: 0.62rem;
  }

  .realm-update-row__cta {
    width: 4.1rem;
    min-height: 2rem;
    padding-inline: 0.46rem;
    font-size: 0.5rem;
  }

  .realm-rina {
    position: absolute;
    display: block;
    left: 50%;
    top: clamp(21.5rem, 45vh, 24.2rem);
    z-index: 9;
    width: min(27rem, 92vw);
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
  }

  .realm-portal-arc {
    right: 3rem;
    top: clamp(28rem, 58vh, 31rem);
    bottom: auto;
    width: min(20rem, 82vw);
    height: min(17rem, 33vh);
    display: block;
    gap: 0;
    margin-top: 0;
    --realm-planet-size: clamp(4.35rem, 19vw, 5rem);
  }

  .realm-portal:nth-of-type(1) {
    --portal-x: 43%;
    --portal-y: 17%;
  }

  .realm-portal:nth-of-type(2) {
    --portal-x: 64.9%;
    --portal-y: 27.25%;
  }

  .realm-portal:nth-of-type(3) {
    --portal-x: 74%;
    --portal-y: 52%;
  }

  .realm-portal:nth-of-type(4) {
    --portal-x: 64.9%;
    --portal-y: 76.75%;
  }

  .realm-portal:nth-of-type(5) {
    --portal-x: 43%;
    --portal-y: 87%;
  }

  .realm-portal {
    width: var(--realm-planet-size);
    height: var(--realm-planet-size);
    min-height: 0;
    padding: 0;
  }

  .realm-portal:last-child {
    width: var(--realm-planet-size);
    justify-self: center;
  }

  .realm-portal__orb {
    width: 100%;
    height: 100%;
  }

  .realm-feature-card {
    display: none;
  }

  .realm-chat-dock {
    display: none;
  }
}

@media (max-width: 430px) {
  body[data-page="home"] .home-brand span:last-child {
    max-width: 6.6rem;
  }

  .realm-hero-copy h1 {
    font-size: 2.55rem;
    transform: scaleX(1.02);
  }

  .realm-hero-copy p {
    display: none;
  }

  .realm-notification-panel {
    width: min(19.4rem, calc(100vw - 4.75rem));
  }

  .realm-notification-heading span {
    width: 100%;
    text-align: center;
  }

  .realm-notification-heading h2 {
    width: 100%;
    text-align: center;
  }

  .realm-rina {
    width: min(25.5rem, 94vw);
  }

  .realm-portal-arc {
    right: 1.75rem;
    top: clamp(28.5rem, 58vh, 31rem);
    width: min(18.5rem, 80vw);
    height: min(16.5rem, 32vh);
    --realm-planet-size: clamp(4.25rem, 19vw, 4.85rem);
  }

  .realm-portal__orb {
    width: 100%;
    height: 100%;
  }
}

@media (max-height: 900px) and (min-width: 1061px) {
  .realm-notification-panel {
    width: min(31rem, 100%);
    padding: 0.78rem;
  }

  .realm-rina-chat-notice {
    min-height: 4.9rem;
    grid-template-columns: 4rem minmax(0, 1fr) 5.45rem;
    gap: 0.8rem;
    padding: 0.42rem 0.72rem 0.8rem;
  }

  .realm-rina-chat-notice::after {
    left: 4.08rem;
    bottom: 1.05rem;
    width: 0.78rem;
    height: 0.78rem;
  }

  .realm-rina-chat-notice__avatar,
  .realm-rina-chat-notice__avatar > img {
    width: 4rem;
    height: 4rem;
  }

  .realm-rina-chat-notice__eyebrow,
  .realm-notification-heading span {
    font-size: 0.74rem;
  }

  .realm-rina-chat-notice strong {
    font-size: 1.08rem;
  }

  .realm-rina-chat-notice__copy > span:not(.realm-rina-chat-notice__eyebrow) {
    font-size: 0.84rem;
  }

  .realm-rina-chat-notice__action {
    width: 5.45rem;
    min-height: 2.18rem;
    font-size: 0.68rem !important;
  }

  .realm-notification-heading {
    min-height: 2.5rem;
    padding: 0.64rem 0.72rem 0.48rem;
  }

  .realm-notification-heading h2 {
    font-size: 0.74rem;
  }

  .realm-update-row {
    min-height: 3.32rem;
    grid-template-columns: 2.42rem minmax(0, 1fr) 5rem;
    gap: 0.72rem;
    padding: 0.48rem 0.72rem;
  }

  .realm-update-row__copy {
    gap: 0.18rem;
  }

  .realm-update-row__mark {
    width: 2.26rem;
    height: 2.26rem;
  }

  .realm-update-row__copy strong {
    font-size: 0.92rem;
  }

  .realm-update-row__copy span {
    font-size: 0.74rem;
  }

  .realm-update-row__cta {
    width: 5rem;
    min-height: 2.04rem;
    font-size: 0.66rem;
  }

  .realm-rina {
    width: min(39rem, 34.5vw);
    bottom: -0.2rem;
  }
}

@media (max-height: 760px) and (min-width: 1061px) {
  .realm-home__layout {
    padding-block: 0.8rem 1.2rem;
  }

  .realm-hero-copy {
    gap: 0.9rem;
    padding-top: 0.4rem;
  }

  .realm-hero-copy__crest {
    height: 4.5rem;
  }

  .realm-hero-copy h1 {
    font-size: 4.85rem;
  }

  .realm-hero-copy p {
    font-size: 1.08rem;
  }

  .realm-notification-panel {
    width: min(30rem, 100%);
    gap: 0;
    padding: 0.72rem;
  }

  .realm-rina-chat-notice {
    min-height: 4.65rem;
  }

  .realm-update-row {
    min-height: 3.12rem;
    padding-block: 0.42rem;
  }

  .realm-rina {
    width: min(32.5rem, 34vw);
    bottom: -0.25rem;
  }

  .realm-portal-arc {
    inset: 0;
    width: auto;
    height: auto;
    margin-top: 0;
    padding-top: 0;
    gap: 0;
    --realm-planet-size: clamp(10.25rem, 22vh, 11.5rem);
  }

  .realm-portal {
    width: var(--realm-planet-size);
    height: var(--realm-planet-size);
    min-height: 0;
  }

  .realm-portal__orb {
    width: 100%;
    height: 100%;
  }

  .realm-feature-card {
    bottom: 8.4rem;
    width: 20rem;
  }

  .realm-chat-dock {
    bottom: 1.9rem;
    width: 23rem;
  }

  body[data-page="home"] .rina-chat-root {
    bottom: 1.9rem !important;
  }

  body[data-page="home"] .rina-community-launcher {
    bottom: 1.4rem !important;
  }

}

@media (max-width: 760px) and (max-height: 720px) {
  .realm-notification-panel {
    transform: translateX(clamp(-2.75rem, -10vw, -1.25rem)) scale(0.94);
    transform-origin: top center;
  }

  .realm-rina {
    top: clamp(18.4rem, 42vh, 20.5rem);
    width: min(22.5rem, 88vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .realm-rina__image,
  .realm-home::before,
  .realm-rina-chat-notice,
  .realm-update-row,
  .realm-portal,
  .realm-portal__orb img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Canonical header proportions shared with the rest of the site. */
:root {
  --rina-header-height: 72px;
  --rina-header-height-mobile: 62px;
  --rina-header-brand-mark: 37.12px;
  --rina-header-brand-mark-mobile: 30.4px;
  --rina-header-menu-size: 40px;
  --rina-header-auth-width: 300px;
  --rina-header-desktop-padding-y: 12px;
  --rina-header-desktop-padding-x: 32px;
  --rina-header-tablet-padding-x: 20px;
  --rina-header-mobile-padding-y: 8.8px;
  --rina-header-mobile-padding-x: 11.2px;
}

html {
  --rina-topbar-height: var(--rina-header-height);
}

html body .topbar.home-topbar {
  box-sizing: border-box !important;
  left: 0 !important;
  right: auto !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: var(--rina-header-height) !important;
  min-height: var(--rina-header-height) !important;
  max-height: var(--rina-header-height) !important;
  margin: 0 !important;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr) auto !important;
  gap: 1.1rem !important;
  padding: var(--rina-header-desktop-padding-y) var(--rina-header-desktop-padding-x) !important;
  overflow: visible !important;
}

html body .home-brand {
  gap: 0.62rem !important;
  height: calc(var(--rina-header-height) - (var(--rina-header-desktop-padding-y) * 2)) !important;
  white-space: nowrap !important;
}

html body .home-brand-mark {
  width: var(--rina-header-brand-mark) !important;
  height: var(--rina-header-brand-mark) !important;
}

html body .home-nav-links {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  gap: 1rem !important;
}

html body .home-nav-links a {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

html body .topbar.home-topbar .rina-auth-cluster {
  width: var(--rina-header-auth-width) !important;
  min-width: var(--rina-header-auth-width) !important;
  max-width: var(--rina-header-auth-width) !important;
  height: 40px !important;
  max-height: 40px !important;
  align-self: center !important;
  justify-content: flex-end !important;
}

html body .home-menu-toggle {
  width: var(--rina-header-menu-size) !important;
  height: var(--rina-header-menu-size) !important;
  min-width: var(--rina-header-menu-size) !important;
  min-height: var(--rina-header-menu-size) !important;
  max-width: var(--rina-header-menu-size) !important;
  max-height: var(--rina-header-menu-size) !important;
  box-sizing: border-box !important;
}

@media (max-width: 1500px) and (min-width: 1061px) {
  html body .topbar.home-topbar {
    grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr) auto !important;
    padding-inline: var(--rina-header-tablet-padding-x) !important;
  }
}

@media (max-width: 1060px) {
  html body .topbar.home-topbar {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  html body .topbar.home-topbar .rina-auth-cluster {
    grid-column: 2 !important;
  }

  html body .home-menu-toggle {
    grid-column: 3 !important;
  }
}

@media (max-width: 760px) {
  html {
    --rina-topbar-height: var(--rina-header-height-mobile);
  }

  html body .topbar.home-topbar {
    height: var(--rina-header-height-mobile) !important;
    min-height: var(--rina-header-height-mobile) !important;
    max-height: var(--rina-header-height-mobile) !important;
    padding: var(--rina-header-mobile-padding-y) var(--rina-header-mobile-padding-x) !important;
  }

  html body .home-brand {
    height: calc(var(--rina-header-height-mobile) - (var(--rina-header-mobile-padding-y) * 2)) !important;
  }

  html body .home-brand-mark {
    width: var(--rina-header-brand-mark-mobile) !important;
    height: var(--rina-header-brand-mark-mobile) !important;
  }
}

/* Homepage left rail matching the reference composition. */
body[data-page="home"] {
  --realm-card-border: rgba(178, 255, 204, 0.24);
  --realm-card-border-strong: rgba(181, 255, 204, 0.36);
  --realm-card-fill: rgba(1, 14, 10, 0.58);
  --realm-card-fill-deep: rgba(0, 8, 6, 0.82);
}

body[data-page="home"] .realm-home__layout {
  grid-template-columns: minmax(36rem, 43rem) minmax(13rem, 1fr) minmax(21rem, 25.5rem);
  gap: 0.4rem;
  padding: clamp(1rem, 2vh, 1.5rem) clamp(1.5rem, 2.45vw, 3.15rem) clamp(1.25rem, 2.6vh, 2.25rem);
}

body[data-page="home"] .realm-hero-copy {
  width: min(43rem, 100%);
  max-width: 43rem;
  gap: clamp(0.85rem, 1.45vh, 1.18rem);
  align-self: start;
  padding-top: clamp(0.4rem, 1.35vh, 1.3rem);
}

body[data-page="home"] .realm-title-stack {
  justify-self: center;
  width: min(41.5rem, 100%);
  transform: none;
}

body[data-page="home"] .realm-hero-copy__crest {
  width: min(37rem, 100%);
  height: clamp(4.9rem, 6.4vw, 6.35rem);
  transform: translateY(-0.35rem);
}

body[data-page="home"] .realm-hero-copy h1 {
  font-size: clamp(4.85rem, 5.9vw, 7.05rem);
  line-height: 0.82;
  transform: scaleX(1.1);
}

body[data-page="home"] .realm-title-tagline {
  position: relative;
  width: min(35.5rem, 92%);
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.78rem;
  margin: clamp(0.46rem, 0.85vh, 0.7rem) auto 0;
  color: rgba(199, 255, 216, 0.76);
  font: 700 clamp(0.72rem, 0.86vw, 0.94rem)/1 var(--font-accent);
  letter-spacing: 0.25em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow:
    0 0 12px rgba(147, 255, 182, 0.36),
    0 4px 18px rgba(0, 0, 0, 0.76);
}

body[data-page="home"] .realm-title-tagline::before,
body[data-page="home"] .realm-title-tagline::after {
  content: "";
  width: min(7.5rem, 22%);
  height: 1px;
  flex: 0 1 7.5rem;
  background: linear-gradient(90deg, transparent, rgba(188, 255, 210, 0.72));
  box-shadow: 0 0 10px rgba(121, 255, 164, 0.3);
}

body[data-page="home"] .realm-title-tagline::after {
  background: linear-gradient(90deg, rgba(188, 255, 210, 0.72), transparent);
}

body[data-page="home"] .realm-notification-panel {
  width: min(40.5rem, 100%);
  display: grid;
  gap: clamp(0.82rem, 1.35vh, 1.1rem);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-page="home"] .realm-notification-panel::before,
body[data-page="home"] .realm-notification-panel::after {
  display: none;
}

body[data-page="home"] .realm-rina-chat-notice {
  min-height: clamp(7.15rem, 13.5vh, 9.25rem);
  grid-template-columns: clamp(4.4rem, 6vw, 5.65rem) minmax(0, 1fr) clamp(6.6rem, 7.5vw, 7.95rem);
  gap: clamp(0.8rem, 1.3vw, 1.28rem);
  padding: clamp(0.85rem, 1.5vh, 1.18rem) clamp(0.95rem, 1.55vw, 1.45rem);
  border: 1px solid var(--realm-card-border);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 42%, rgba(129, 255, 169, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(5, 25, 17, 0.7), rgba(1, 11, 8, 0.68));
  box-shadow:
    inset 0 0 0 1px rgba(230, 255, 236, 0.04),
    inset 0 0 36px rgba(103, 255, 147, 0.055),
    0 18px 46px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(12px) saturate(125%);
}

body[data-page="home"] .realm-rina-chat-notice::before,
body[data-page="home"] .realm-update-row::before,
body[data-page="home"] .realm-profile-dock::before {
  content: "";
  position: absolute;
  inset: 0.34rem;
  z-index: 0;
  border: 1px solid rgba(205, 255, 221, 0.13);
  border-radius: 6px;
  pointer-events: none;
}

body[data-page="home"] .realm-rina-chat-notice::after {
  left: clamp(4.65rem, 6.25vw, 5.95rem);
  bottom: clamp(1.1rem, 1.75vh, 1.55rem);
}

body[data-page="home"] .realm-rina-chat-notice__avatar,
body[data-page="home"] .realm-rina-chat-notice__avatar > img {
  width: clamp(4.4rem, 6vw, 5.65rem);
  height: clamp(4.4rem, 6vw, 5.65rem);
}

body[data-page="home"] .realm-rina-chat-notice__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(181, 255, 207, 0.82);
  font-size: clamp(0.72rem, 0.78vw, 0.82rem);
}

body[data-page="home"] .realm-rina-chat-notice__eyebrow::after {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #77f69b;
  box-shadow: 0 0 12px rgba(113, 255, 152, 0.8);
}

body[data-page="home"] .realm-rina-chat-notice strong {
  font-size: clamp(1.02rem, 1.34vw, 1.28rem);
}

body[data-page="home"] .realm-rina-chat-notice__copy > span:not(.realm-rina-chat-notice__eyebrow) {
  font-size: clamp(0.82rem, 0.98vw, 1rem);
}

body[data-page="home"] .realm-rina-chat-notice__action,
body[data-page="home"] .realm-update-row__cta,
body[data-page="home"] .realm-chat-dock__action {
  border-color: rgba(129, 255, 168, 0.42);
  background:
    linear-gradient(180deg, rgba(17, 73, 38, 0.66), rgba(4, 24, 15, 0.78));
  box-shadow:
    inset 0 0 0 1px rgba(230, 255, 236, 0.05),
    0 0 22px rgba(94, 255, 135, 0.12);
  text-transform: uppercase;
}

body[data-page="home"] .realm-rina-chat-notice__action {
  width: clamp(6.6rem, 7.5vw, 7.95rem);
}

body[data-page="home"] .realm-notification-heading {
  display: none;
}

body[data-page="home"] .realm-notification-updates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.72rem, 1vw, 0.9rem);
}

body[data-page="home"] .realm-update-row {
  position: relative;
  min-height: clamp(12.2rem, 21vh, 15.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(3.3rem, 1fr) auto;
  justify-items: center;
  align-items: start;
  gap: clamp(0.52rem, 0.85vh, 0.76rem);
  padding: clamp(1.05rem, 1.7vh, 1.34rem) clamp(0.72rem, 1vw, 0.92rem) clamp(0.95rem, 1.55vh, 1.2rem);
  border: 1px solid var(--realm-card-border);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 16%, rgba(127, 255, 163, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(3, 19, 13, 0.68), rgba(0, 9, 7, 0.72));
  box-shadow:
    inset 0 0 0 1px rgba(230, 255, 236, 0.035),
    inset 0 0 34px rgba(104, 255, 151, 0.045),
    0 18px 42px rgba(0, 0, 0, 0.28);
  text-align: center;
}

body[data-page="home"] .realm-update-row:hover,
body[data-page="home"] .realm-update-row:focus-visible {
  border-color: var(--realm-card-border-strong);
  background:
    radial-gradient(circle at 50% 16%, rgba(142, 255, 178, 0.19), transparent 38%),
    linear-gradient(180deg, rgba(5, 26, 17, 0.78), rgba(0, 12, 8, 0.78));
  box-shadow:
    inset 0 0 0 1px rgba(230, 255, 236, 0.06),
    inset 0 0 38px rgba(104, 255, 151, 0.07),
    0 20px 46px rgba(0, 0, 0, 0.32);
}

body[data-page="home"] .realm-update-row__mark {
  width: clamp(4.35rem, 5.8vw, 5.6rem);
  height: clamp(4.35rem, 5.8vw, 5.6rem);
  filter:
    drop-shadow(0 0 13px rgba(173, 255, 198, 0.38))
    drop-shadow(0 0 25px rgba(78, 255, 135, 0.18));
}

body[data-page="home"] .realm-update-row__mark--puzzle {
  background-image: url("Pages/ouija-assets/home-notices/notice-puzzle.png");
}

body[data-page="home"] .realm-update-row__mark--shop {
  background-image: url("Pages/ouija-assets/home-notices/notice-shop.png");
}

body[data-page="home"] .realm-update-row__mark--x-tools {
  background-image: url("Pages/ouija-assets/home-notices/notice-x-tools.png");
}

body[data-page="home"] .realm-update-row__copy {
  align-self: stretch;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.45rem;
}

body[data-page="home"] .realm-update-row__copy strong {
  font-size: clamp(0.86rem, 1vw, 1.04rem);
  line-height: 1.18;
}

body[data-page="home"] .realm-update-row__copy span {
  font-size: clamp(0.74rem, 0.84vw, 0.86rem);
  line-height: 1.34;
}

body[data-page="home"] .realm-update-row__cta {
  width: 100%;
  min-height: clamp(2.55rem, 4.4vh, 3.05rem);
  padding-inline: 0.5rem;
  font-size: clamp(0.58rem, 0.68vw, 0.72rem);
}

body[data-page="home"] .realm-update-row__cta::after {
  content: ">";
  margin-left: 0.55rem;
  color: rgba(211, 255, 223, 0.88);
  font: 700 0.9em/1 var(--font-ui);
}

body[data-page="home"] .realm-notification-panel .realm-profile-dock {
  position: relative;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1;
  width: 100%;
  min-height: clamp(7.4rem, 13.5vh, 9.05rem);
  display: grid !important;
  grid-template-columns: clamp(4.85rem, 6vw, 5.65rem) minmax(0, 1fr) minmax(9.6rem, 11.65rem);
  gap: clamp(0.9rem, 1.45vw, 1.25rem);
  align-items: center;
  padding: clamp(0.98rem, 1.65vh, 1.25rem) clamp(1.05rem, 1.55vw, 1.45rem);
  border: 1px solid var(--realm-card-border);
  border-radius: 8px;
  color: rgba(249, 255, 251, 0.92);
  background:
    radial-gradient(circle at 13% 50%, rgba(127, 255, 163, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(3, 19, 13, 0.68), rgba(0, 9, 7, 0.74));
  box-shadow:
    inset 0 0 0 1px rgba(230, 255, 236, 0.04),
    inset 0 0 36px rgba(104, 255, 151, 0.05),
    0 18px 46px rgba(0, 0, 0, 0.3);
  transform: none;
}

body[data-page="home"] .realm-notification-panel .realm-profile-dock:hover,
body[data-page="home"] .realm-notification-panel .realm-profile-dock:focus-visible {
  border-color: var(--realm-card-border-strong);
  filter: drop-shadow(0 0 18px rgba(127, 255, 162, 0.16));
  transform: translateY(-0.06rem);
}

body[data-page="home"] .realm-notification-panel .realm-profile-dock::before {
  opacity: 1;
  background: transparent;
}

body[data-page="home"] .realm-notification-panel .realm-profile-dock::after {
  left: clamp(4.4rem, 5.7vw, 5.45rem);
  bottom: clamp(1.2rem, 2vh, 1.6rem);
}

body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar,
body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar > img,
body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar .rina-user-avatar {
  width: clamp(4.85rem, 6vw, 5.65rem);
  height: clamp(4.85rem, 6vw, 5.65rem);
}

body[data-page="home"] .realm-notification-panel .realm-chat-dock strong {
  font-size: clamp(1rem, 1.08vw, 1.16rem);
}

body[data-page="home"] .realm-notification-panel .realm-chat-dock span {
  font-size: clamp(0.82rem, 0.9vw, 0.96rem);
}

body[data-page="home"] .realm-chat-dock__level {
  grid-template-columns: auto minmax(5.8rem, 10rem) auto;
  width: min(100%, 16.8rem);
  margin-top: 0.4rem;
}

body[data-page="home"] .realm-chat-dock__action {
  position: relative;
  z-index: 1;
  min-height: clamp(3rem, 5.4vh, 3.75rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.62rem 0.7rem;
  border: 1px solid rgba(129, 255, 168, 0.42);
  border-radius: 8px;
  color: var(--realm-mint-bright) !important;
  font: 700 clamp(0.62rem, 0.72vw, 0.76rem)/1.1 var(--font-accent) !important;
  letter-spacing: 0.045em !important;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 1320px) and (min-width: 1061px) {
  body[data-page="home"] .realm-home__layout {
    grid-template-columns: minmax(31rem, 36.5rem) minmax(12rem, 1fr) minmax(19rem, 22.5rem);
    padding-inline: 1.55rem;
  }

  body[data-page="home"] .realm-hero-copy {
    width: min(36.5rem, 100%);
  }

  body[data-page="home"] .realm-hero-copy h1 {
    font-size: clamp(4.45rem, 5.2vw, 5.45rem);
  }

  body[data-page="home"] .realm-notification-panel {
    width: min(35.5rem, 100%);
  }

  body[data-page="home"] .realm-update-row {
    min-height: 12.4rem;
  }

  body[data-page="home"] .realm-notification-panel .realm-profile-dock {
    grid-template-columns: 4.9rem minmax(0, 1fr) 9.8rem;
  }
}

@media (max-width: 1060px) {
  body[data-page="home"] .realm-home__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="home"] .realm-hero-copy {
    width: min(42rem, 100%);
    max-width: min(42rem, 100%);
  }

  body[data-page="home"] .realm-title-stack {
    --realm-title-stack-nudge: 0;
  }

  body[data-page="home"] .realm-notification-panel {
    width: min(37.5rem, 100%);
    justify-self: center;
  }

  body[data-page="home"] .realm-update-row {
    min-height: 11.5rem;
  }

  body[data-page="home"] .realm-notification-panel .realm-profile-dock {
    display: grid !important;
    width: 100%;
  }
}

@media (max-width: 760px) {
  body[data-page="home"] .realm-hero-copy {
    gap: 0.66rem;
  }

  body[data-page="home"] .realm-title-stack {
    width: min(20.5rem, 100%);
    transform: translateX(clamp(-2.3rem, -8vw, -1.1rem));
  }

  body[data-page="home"] .realm-hero-copy__crest {
    width: min(20rem, calc(100vw - 4rem));
    height: 3.55rem;
  }

  body[data-page="home"] .realm-hero-copy h1 {
    font-size: 3.05rem;
    transform: scaleX(1.03);
  }

  body[data-page="home"] .realm-title-tagline {
    width: min(17rem, 100%);
    gap: 0.42rem;
    font-size: 0.52rem;
    letter-spacing: 0.18em;
  }

  body[data-page="home"] .realm-title-tagline::before,
  body[data-page="home"] .realm-title-tagline::after {
    width: 2.2rem;
    flex-basis: 2.2rem;
  }

  body[data-page="home"] .realm-notification-panel {
    width: min(19.4rem, calc(100vw - 4.75rem));
    gap: 0.48rem;
    transform: translateX(clamp(-2.75rem, -10vw, -1.25rem));
  }

  body[data-page="home"] .realm-rina-chat-notice {
    min-height: 4.75rem;
    grid-template-columns: 3.12rem minmax(0, 1fr) 4.35rem;
    gap: 0.62rem;
    padding: 0.48rem 0.52rem 0.82rem;
  }

  body[data-page="home"] .realm-rina-chat-notice::before,
  body[data-page="home"] .realm-update-row::before {
    inset: 0.22rem;
  }

  body[data-page="home"] .realm-rina-chat-notice::after {
    left: 2.88rem;
    bottom: 0.7rem;
    width: 0.68rem;
    height: 0.68rem;
  }

  body[data-page="home"] .realm-rina-chat-notice__avatar,
  body[data-page="home"] .realm-rina-chat-notice__avatar > img {
    width: 3.12rem;
    height: 3.12rem;
  }

  body[data-page="home"] .realm-rina-chat-notice__eyebrow {
    gap: 0.34rem;
    font-size: 0.52rem;
  }

  body[data-page="home"] .realm-rina-chat-notice__eyebrow::after {
    width: 0.34rem;
    height: 0.34rem;
  }

  body[data-page="home"] .realm-rina-chat-notice strong {
    font-size: 0.9rem;
  }

  body[data-page="home"] .realm-rina-chat-notice__copy > span:not(.realm-rina-chat-notice__eyebrow) {
    font-size: 0.72rem;
  }

  body[data-page="home"] .realm-rina-chat-notice__action {
    width: 4.35rem;
    min-height: 2rem;
    font-size: 0.5rem !important;
  }

  body[data-page="home"] .realm-notification-updates {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.42rem;
  }

  body[data-page="home"] .realm-update-row {
    min-height: 3.45rem;
    grid-template-columns: 2.05rem minmax(0, 1fr);
    grid-template-rows: auto;
    justify-items: start;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.58rem;
    text-align: left;
  }

  body[data-page="home"] .realm-update-row__mark {
    width: 2rem;
    height: 2rem;
  }

  body[data-page="home"] .realm-update-row__copy {
    gap: 0.16rem;
  }

  body[data-page="home"] .realm-update-row__copy strong {
    font-size: 0.7rem;
  }

  body[data-page="home"] .realm-update-row__copy span {
    font-size: 0.62rem;
  }

  body[data-page="home"] .realm-update-row__cta,
  body[data-page="home"] .realm-notification-panel .realm-profile-dock {
    display: none !important;
  }
}

@media (max-width: 430px) {
  body[data-page="home"] .realm-hero-copy h1 {
    font-size: 2.55rem;
  }

  body[data-page="home"] .realm-title-tagline {
    font-size: 0.48rem;
  }
}

@media (max-height: 900px) and (min-width: 1061px) {
  body[data-page="home"] .realm-hero-copy {
    gap: 0.58rem;
    padding-top: 0.2rem;
  }

  body[data-page="home"] .realm-hero-copy__crest {
    height: 3.85rem;
  }

  body[data-page="home"] .realm-hero-copy h1 {
    font-size: clamp(4.05rem, 4.8vw, 5.35rem);
  }

  body[data-page="home"] .realm-title-tagline {
    margin-top: 0.28rem;
  }

  body[data-page="home"] .realm-notification-panel {
    gap: 0.55rem;
  }

  body[data-page="home"] .realm-rina-chat-notice {
    min-height: 5.25rem;
    padding-block: 0.54rem;
  }

  body[data-page="home"] .realm-rina-chat-notice__avatar,
  body[data-page="home"] .realm-rina-chat-notice__avatar > img {
    width: 4rem;
    height: 4rem;
  }

  body[data-page="home"] .realm-update-row {
    min-height: 8.6rem;
    gap: 0.38rem;
    padding: 0.58rem 0.56rem 0.64rem;
  }

  body[data-page="home"] .realm-update-row__mark {
    width: 3rem;
    height: 3rem;
  }

  body[data-page="home"] .realm-update-row__copy {
    gap: 0.28rem;
  }

  body[data-page="home"] .realm-update-row__copy strong {
    font-size: 0.82rem;
  }

  body[data-page="home"] .realm-update-row__copy span {
    font-size: 0.7rem;
  }

  body[data-page="home"] .realm-update-row__cta {
    min-height: 2.12rem;
    font-size: 0.54rem;
  }

  body[data-page="home"] .realm-notification-panel .realm-profile-dock {
    min-height: 5.65rem;
    grid-template-columns: 4.25rem minmax(0, 1fr) 9.3rem;
    padding-block: 0.64rem;
  }

  body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar,
  body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar > img,
  body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar .rina-user-avatar {
    width: 4.25rem;
    height: 4.25rem;
  }

  body[data-page="home"] .realm-chat-dock__level {
    margin-top: 0.2rem;
  }

  body[data-page="home"] .realm-chat-dock__action {
    min-height: 2.75rem;
    font-size: 0.58rem !important;
  }
}

@media (min-width: 1061px) {
  body[data-page="home"] .realm-home__layout {
    grid-template-columns: clamp(31.5rem, 38vw, 37.5rem) minmax(14rem, 1fr) minmax(20rem, 25rem);
    align-items: stretch;
    gap: clamp(0.6rem, 1.15vw, 1.15rem);
    padding: clamp(0.9rem, 1.8vh, 1.35rem) clamp(1.25rem, 2vw, 2.4rem) clamp(0.9rem, 1.7vh, 1.25rem) clamp(1.15rem, 1.55vw, 1.7rem);
  }

  body[data-page="home"] .realm-hero-copy {
    align-self: stretch;
    width: min(37rem, 100%);
    max-width: 37rem;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    justify-items: start;
    gap: clamp(0.78rem, 1.25vh, 1.08rem);
    padding-top: 0;
  }

  body[data-page="home"] .realm-title-stack {
    justify-self: start;
    width: min(35.5rem, 100%);
  }

  body[data-page="home"] .realm-hero-copy__crest {
    width: min(33rem, 100%);
    height: clamp(4.4rem, 5.8vw, 5.75rem);
    transform: translateY(-0.28rem);
  }

  body[data-page="home"] .realm-hero-copy h1 {
    font-size: clamp(4.85rem, 6.1vw, 6.35rem);
    transform: scaleX(1.08);
  }

  body[data-page="home"] .realm-title-tagline {
    width: min(32rem, 94%);
    margin-top: clamp(0.34rem, 0.72vh, 0.52rem);
    font-size: clamp(0.68rem, 0.84vw, 0.9rem);
    letter-spacing: 0.23em;
  }

  body[data-page="home"] .realm-title-tagline::before,
  body[data-page="home"] .realm-title-tagline::after {
    width: min(6.3rem, 20%);
    flex-basis: min(6.3rem, 20%);
  }

  body[data-page="home"] .realm-title-star--right-top {
    left: calc(105% + 1rem);
  }

  body[data-page="home"] .realm-title-star--right-low {
    left: calc(105% + 0.6rem);
  }

  body[data-page="home"] .realm-notification-panel {
    width: min(36.25rem, 100%);
    height: 100%;
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
    gap: clamp(0.78rem, 1.25vh, 1.05rem);
  }

  body[data-page="home"] .realm-rina-chat-notice {
    min-height: clamp(6.75rem, 12.2vh, 8.1rem);
    grid-template-columns: clamp(4.6rem, 5.55vw, 5.35rem) minmax(0, 1fr) clamp(6.35rem, 7.1vw, 7.4rem);
    gap: clamp(0.82rem, 1.18vw, 1.1rem);
    padding: clamp(0.82rem, 1.45vh, 1.06rem) clamp(0.9rem, 1.35vw, 1.18rem);
  }

  body[data-page="home"] .realm-rina-chat-notice::after {
    left: clamp(4.54rem, 5.42vw, 5.28rem);
    bottom: clamp(1rem, 1.75vh, 1.34rem);
  }

  body[data-page="home"] .realm-rina-chat-notice__avatar,
  body[data-page="home"] .realm-rina-chat-notice__avatar > img {
    width: clamp(4.6rem, 5.55vw, 5.35rem);
    height: clamp(4.6rem, 5.55vw, 5.35rem);
  }

  body[data-page="home"] .realm-rina-chat-notice strong {
    font-size: clamp(1.08rem, 1.28vw, 1.28rem);
  }

  body[data-page="home"] .realm-rina-chat-notice__copy > span:not(.realm-rina-chat-notice__eyebrow) {
    font-size: clamp(0.84rem, 0.96vw, 1rem);
  }

  body[data-page="home"] .realm-rina-chat-notice__action {
    width: clamp(6.35rem, 7.1vw, 7.4rem);
    min-height: clamp(2.8rem, 4.8vh, 3.35rem);
    font-size: clamp(0.62rem, 0.7vw, 0.74rem) !important;
  }

  body[data-page="home"] .realm-notification-updates {
    min-height: 0;
    height: auto;
    align-items: stretch;
    gap: clamp(0.62rem, 1vw, 0.82rem);
  }

  body[data-page="home"] .realm-update-row {
    height: auto;
    min-height: clamp(10.4rem, 18vh, 13rem);
    grid-template-rows: auto minmax(3.2rem, 1fr) auto;
    padding: clamp(0.92rem, 1.55vh, 1.18rem) clamp(0.66rem, 0.95vw, 0.84rem);
    gap: clamp(0.5rem, 0.9vh, 0.68rem);
  }

  body[data-page="home"] .realm-update-row__mark {
    width: clamp(4rem, 5.1vw, 5.1rem);
    height: clamp(4rem, 5.1vw, 5.1rem);
  }

  body[data-page="home"] .realm-update-row__copy {
    justify-content: flex-start;
    gap: 0.38rem;
  }

  body[data-page="home"] .realm-update-row__copy strong {
    font-size: clamp(0.86rem, 0.98vw, 1rem);
  }

  body[data-page="home"] .realm-update-row__copy span {
    font-size: clamp(0.72rem, 0.82vw, 0.84rem);
  }

  body[data-page="home"] .realm-update-row__cta {
    min-height: clamp(2.42rem, 4.25vh, 2.85rem);
    font-size: clamp(0.56rem, 0.64vw, 0.68rem);
  }

  body[data-page="home"] .realm-notification-panel .realm-profile-dock {
    align-self: end;
    margin-top: clamp(0.45rem, 1vh, 0.85rem);
    min-height: clamp(6.9rem, 12vh, 8rem);
    grid-template-columns: clamp(4.65rem, 5.55vw, 5.35rem) minmax(0, 1fr) minmax(8.9rem, 10.8rem);
    gap: clamp(0.82rem, 1.2vw, 1.08rem);
    padding: clamp(0.82rem, 1.45vh, 1.08rem) clamp(0.9rem, 1.35vw, 1.18rem);
  }

  body[data-page="home"] .realm-notification-panel .realm-profile-dock::after {
    left: clamp(4.56rem, 5.42vw, 5.28rem);
    bottom: clamp(1rem, 1.75vh, 1.32rem);
  }

  body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar,
  body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar > img,
  body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar .rina-user-avatar {
    width: clamp(4.65rem, 5.55vw, 5.35rem);
    height: clamp(4.65rem, 5.55vw, 5.35rem);
  }

  body[data-page="home"] .realm-notification-panel .realm-chat-dock strong {
    font-size: clamp(0.98rem, 1.06vw, 1.12rem);
  }

  body[data-page="home"] .realm-notification-panel .realm-chat-dock span {
    font-size: clamp(0.82rem, 0.9vw, 0.94rem);
  }

  body[data-page="home"] .realm-chat-dock__level {
    grid-template-columns: auto minmax(5.6rem, 9.3rem) auto;
    width: min(100%, 15.4rem);
    gap: 0.62rem;
    margin-top: 0.34rem;
  }

  body[data-page="home"] .realm-chat-dock__action {
    min-height: clamp(2.82rem, 4.8vh, 3.35rem);
    padding-inline: 0.62rem;
    font-size: clamp(0.58rem, 0.68vw, 0.72rem) !important;
  }
}

@media (max-height: 820px) and (min-width: 1061px) {
  body[data-page="home"] .realm-home__layout {
    grid-template-columns: clamp(31rem, 37vw, 35.5rem) minmax(14rem, 1fr) minmax(20rem, 25rem);
    padding-block: 0.72rem;
  }

  body[data-page="home"] .realm-hero-copy {
    gap: 0.58rem;
  }

  body[data-page="home"] .realm-hero-copy__crest {
    height: 3.8rem;
  }

  body[data-page="home"] .realm-hero-copy h1 {
    font-size: clamp(4.35rem, 5.45vw, 5.15rem);
  }

  body[data-page="home"] .realm-title-tagline {
    margin-top: 0.24rem;
    font-size: clamp(0.6rem, 0.74vw, 0.78rem);
  }

  body[data-page="home"] .realm-notification-panel {
    width: min(34.5rem, 100%);
    height: auto;
    grid-template-rows: auto auto auto;
    gap: 0.58rem;
  }

  body[data-page="home"] .realm-rina-chat-notice {
    min-height: 5.4rem;
    padding-block: 0.58rem;
  }

  body[data-page="home"] .realm-rina-chat-notice__avatar,
  body[data-page="home"] .realm-rina-chat-notice__avatar > img {
    width: 4rem;
    height: 4rem;
  }

  body[data-page="home"] .realm-rina-chat-notice::after {
    left: 4rem;
    bottom: 0.78rem;
  }

  body[data-page="home"] .realm-update-row {
    min-height: 9.15rem;
    padding-block: 0.62rem;
  }

  body[data-page="home"] .realm-update-row__mark {
    width: 3.55rem;
    height: 3.55rem;
  }

  body[data-page="home"] .realm-update-row__copy {
    gap: 0.24rem;
  }

  body[data-page="home"] .realm-update-row__copy strong {
    font-size: 0.82rem;
  }

  body[data-page="home"] .realm-update-row__copy span {
    font-size: 0.7rem;
  }

  body[data-page="home"] .realm-update-row__cta {
    min-height: 2.08rem;
    font-size: 0.52rem;
  }

  body[data-page="home"] .realm-notification-panel .realm-profile-dock {
    align-self: start;
    margin-top: 0.42rem;
    min-height: 5.75rem;
    grid-template-columns: 4.2rem minmax(0, 1fr) 9.3rem;
    padding-block: 0.62rem;
  }

  body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar,
  body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar > img,
  body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar .rina-user-avatar {
    width: 4.2rem;
    height: 4.2rem;
  }

  body[data-page="home"] .realm-notification-panel .realm-profile-dock::after {
    left: 4.1rem;
    bottom: 0.86rem;
  }

  body[data-page="home"] .realm-chat-dock__action {
    min-height: 2.65rem;
    font-size: 0.58rem !important;
  }
}

@media (min-width: 1061px) {
  body[data-page="home"] .realm-rina {
    left: 53.25%;
  }

  body[data-page="home"] .realm-notification-panel {
    height: 100%;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: stretch;
  }

  body[data-page="home"] .realm-notification-panel .realm-profile-dock {
    align-self: end;
    margin-top: clamp(1rem, 2.5vh, 2rem);
    margin-bottom: 0;
  }
}

@keyframes realmPortalAuraIdle {
  0%, 100% {
    opacity: 0.28;
    transform: scale(0.86);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.94);
  }
}

@keyframes realmPortalAuraSpark {
  0%, 100% {
    opacity: 0.34;
    transform: scale(0.9);
  }

  45% {
    opacity: 0.78;
    transform: scale(1.08);
  }
}

@keyframes realmPortalFloat {
  0%, 100% {
    transform: translate3d(0, -0.16rem, 0);
  }

  50% {
    transform: translate3d(0, 0.18rem, 0);
  }
}

@media (min-width: 1061px) {
  body[data-page="home"] .realm-portal-arc {
    left: auto;
    right: clamp(4.6rem, 8.8vw, 8.4rem);
    top: 50%;
    bottom: auto;
    width: auto;
    height: min(61rem, calc(100% - 1.4rem));
    aspect-ratio: 340 / 991;
    display: block;
    transform: translateY(-50%);
    --realm-planet-size: clamp(6.6rem, 8.15vw, 8.35rem);
  }

  body[data-page="home"] .realm-portal-arc::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("Pages/ouija-assets/realm-planets/portal-rail-line.png") center / contain no-repeat;
    filter:
      drop-shadow(0 0 8px rgba(176, 255, 199, 0.48))
      drop-shadow(0 0 20px rgba(72, 255, 128, 0.24));
    opacity: 0.86;
    pointer-events: none;
  }

  body[data-page="home"] .realm-portal {
    left: var(--portal-x);
    top: var(--portal-y);
    z-index: 2;
    width: var(--realm-planet-size);
    height: var(--realm-planet-size);
    isolation: isolate;
    transform: translate(-50%, -50%);
  }

  body[data-page="home"] .realm-portal:nth-of-type(1) {
    --portal-x: 34%;
    --portal-y: 12.1%;
  }

  body[data-page="home"] .realm-portal:nth-of-type(2) {
    --portal-x: 67.1%;
    --portal-y: 29.8%;
  }

  body[data-page="home"] .realm-portal:nth-of-type(3) {
    --portal-x: 75.4%;
    --portal-y: 48.2%;
  }

  body[data-page="home"] .realm-portal:nth-of-type(4) {
    --portal-x: 58.8%;
    --portal-y: 67.6%;
  }

  body[data-page="home"] .realm-portal:nth-of-type(5) {
    --portal-x: 35.3%;
    --portal-y: 85.4%;
  }

  body[data-page="home"] .realm-portal::before {
    content: "";
    position: absolute;
    inset: 11% 7%;
    z-index: 0;
    border-radius: 50%;
    background:
      radial-gradient(ellipse at 50% 52%, rgba(186, 255, 204, 0.5), rgba(80, 255, 139, 0.2) 35%, transparent 68%);
    filter: blur(12px);
    opacity: 0.3;
    transform: scale(0.9);
    animation: realmPortalAuraIdle 4.6s ease-in-out infinite;
    pointer-events: none;
  }

  body[data-page="home"] .realm-portal:nth-of-type(2)::before {
    animation-delay: -1.2s;
  }

  body[data-page="home"] .realm-portal:nth-of-type(3)::before {
    animation-delay: -2.4s;
  }

  body[data-page="home"] .realm-portal:nth-of-type(4)::before {
    animation-delay: -0.7s;
  }

  body[data-page="home"] .realm-portal:nth-of-type(5)::before {
    animation-delay: -3.1s;
  }

  body[data-page="home"] .realm-portal-arc.is-aura-paused .realm-portal::before {
    animation-play-state: paused;
  }

  body[data-page="home"] .realm-portal.is-aura-active::before {
    animation: realmPortalAuraSpark 1.35s ease-in-out;
  }

  body[data-page="home"] .realm-portal__orb {
    z-index: 1;
    width: 100%;
    height: 100%;
  }

  body[data-page="home"] .realm-portal__orb img {
    animation: realmPortalFloat 7s ease-in-out infinite;
    filter:
      drop-shadow(0 0 10px rgba(176, 255, 199, 0.32))
      drop-shadow(0 0 24px rgba(72, 255, 128, 0.16));
  }

  body[data-page="home"] .realm-portal:nth-of-type(2) .realm-portal__orb img {
    animation-delay: -1.5s;
  }

  body[data-page="home"] .realm-portal:nth-of-type(3) .realm-portal__orb img {
    animation-delay: -2.8s;
  }

  body[data-page="home"] .realm-portal:nth-of-type(4) .realm-portal__orb img {
    animation-delay: -0.9s;
  }

  body[data-page="home"] .realm-portal:nth-of-type(5) .realm-portal__orb img {
    animation-delay: -3.6s;
  }

  body[data-page="home"] .realm-portal:hover .realm-portal__orb img,
  body[data-page="home"] .realm-portal:focus-visible .realm-portal__orb img,
  body[data-page="home"] .realm-portal.is-active .realm-portal__orb img,
  body[data-page="home"] .realm-portal.is-aura-active .realm-portal__orb img {
    filter:
      drop-shadow(0 0 13px rgba(222, 255, 229, 0.72))
      drop-shadow(0 0 32px rgba(88, 255, 137, 0.42));
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .realm-portal::before,
  body[data-page="home"] .realm-portal__orb img {
    animation: none !important;
  }
}

@media (max-width: 1060px) {
  body[data-page="home"] .realm-portal-arc {
    left: auto;
    right: clamp(3.2rem, 8vw, 6rem);
    top: clamp(11.8rem, 24vh, 14.5rem);
    bottom: auto;
    width: clamp(9.2rem, 21.8vh, 12.4rem);
    height: clamp(26.8rem, 63.5vh, 36.2rem);
    aspect-ratio: auto;
    --realm-planet-size: clamp(5rem, 10.2vh, 6.55rem);
  }

  body[data-page="home"] .realm-portal-arc::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("Pages/ouija-assets/realm-planets/portal-rail-line.png") center / contain no-repeat;
    filter:
      drop-shadow(0 0 7px rgba(176, 255, 199, 0.42))
      drop-shadow(0 0 16px rgba(72, 255, 128, 0.2));
    opacity: 0.82;
    pointer-events: none;
  }

  body[data-page="home"] .realm-portal {
    left: var(--portal-x);
    top: var(--portal-y);
    width: var(--realm-planet-size);
    height: var(--realm-planet-size);
    transform: translate(-50%, -50%);
  }

  body[data-page="home"] .realm-portal:nth-of-type(1) {
    --portal-x: 34%;
    --portal-y: 12.1%;
  }

  body[data-page="home"] .realm-portal:nth-of-type(2) {
    --portal-x: 67.1%;
    --portal-y: 29.8%;
  }

  body[data-page="home"] .realm-portal:nth-of-type(3) {
    --portal-x: 75.4%;
    --portal-y: 48.2%;
  }

  body[data-page="home"] .realm-portal:nth-of-type(4) {
    --portal-x: 58.8%;
    --portal-y: 67.6%;
  }

  body[data-page="home"] .realm-portal:nth-of-type(5) {
    --portal-x: 35.3%;
    --portal-y: 85.4%;
  }
}

@media (max-width: 760px) {
  body[data-page="home"] .realm-portal-arc {
    right: clamp(5.1rem, 18vw, 7.2rem);
    top: clamp(23rem, 54vh, 28.5rem);
    width: clamp(5.45rem, 12.7vh, 6.85rem);
    height: clamp(16rem, 37vh, 20rem);
    --realm-planet-size: clamp(3.15rem, 7.8vh, 4.1rem);
  }
}

@media (max-width: 430px) {
  body[data-page="home"] .realm-portal-arc {
    right: clamp(5.4rem, 23vw, 7rem);
    height: clamp(15.5rem, 36vh, 19rem);
    width: clamp(5.2rem, 12.2vh, 6.45rem);
    --realm-planet-size: clamp(3rem, 7.4vh, 3.95rem);
  }
}

@media (min-width: 1061px) {
  body[data-page="home"] .realm-portal-arc::before {
    transform: translateX(-13%);
  }
}

@media (max-width: 1060px) {
  body[data-page="home"] .realm-portal-arc::before {
    transform: translateX(-10%);
  }
}


/* Homepage left-side surface polish only: no layout or behavior changes. */
body[data-page="home"] {
  --realm-left-clean-line: rgba(145, 255, 177, 0.14);
  --realm-left-clean-line-hover: rgba(196, 255, 214, 0.32);
  --realm-left-clean-fill: rgba(5, 18, 12, 0.5);
  --realm-left-clean-fill-hover: rgba(9, 31, 18, 0.66);
  --realm-left-clean-glow: rgba(118, 255, 162, 0.1);
}

body[data-page="home"] .realm-rina-chat-notice,
body[data-page="home"] .realm-update-row,
body[data-page="home"] .realm-notification-panel .realm-profile-dock {
  border-color: var(--realm-left-clean-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 30%),
    radial-gradient(circle at 14% 0%, rgba(153, 255, 185, 0.055), transparent 38%),
    linear-gradient(180deg, var(--realm-left-clean-fill), rgba(1, 10, 8, 0.62));
  box-shadow:
    inset 0 1px 0 rgba(230, 255, 236, 0.055),
    inset 0 0 22px rgba(104, 255, 151, 0.024),
    0 12px 30px rgba(0, 0, 0, 0.24);
}

body[data-page="home"] .realm-rina-chat-notice:hover,
body[data-page="home"] .realm-rina-chat-notice:focus-visible,
body[data-page="home"] .realm-rina-chat-notice[aria-expanded="true"],
body[data-page="home"] .realm-update-row:hover,
body[data-page="home"] .realm-update-row:focus-visible,
body[data-page="home"] .realm-notification-panel .realm-profile-dock:hover,
body[data-page="home"] .realm-notification-panel .realm-profile-dock:focus-visible {
  border-color: var(--realm-left-clean-line-hover);
  box-shadow:
    inset 0 1px 0 rgba(238, 255, 243, 0.075),
    inset 0 0 26px rgba(104, 255, 151, 0.028),
    0 0 0 1px rgba(145, 255, 177, 0.045),
    0 16px 38px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(117, 255, 156, 0.09);
}

body[data-page="home"] .realm-rina-chat-notice::before,
body[data-page="home"] .realm-update-row::before,
body[data-page="home"] .realm-profile-dock::before {
  border-color: rgba(205, 255, 221, 0.075);
  box-shadow: inset 0 1px 0 rgba(230, 255, 236, 0.025);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

body[data-page="home"] .realm-rina-chat-notice:hover::before,
body[data-page="home"] .realm-rina-chat-notice:focus-visible::before,
body[data-page="home"] .realm-rina-chat-notice[aria-expanded="true"]::before,
body[data-page="home"] .realm-update-row:hover::before,
body[data-page="home"] .realm-update-row:focus-visible::before,
body[data-page="home"] .realm-notification-panel .realm-profile-dock:hover::before,
body[data-page="home"] .realm-notification-panel .realm-profile-dock:focus-visible::before {
  border-color: rgba(218, 255, 230, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(239, 255, 244, 0.045),
    inset 0 0 18px rgba(120, 255, 157, 0.025);
}

body[data-page="home"] .realm-rina-chat-notice:hover .realm-rina-chat-notice__avatar > img,
body[data-page="home"] .realm-rina-chat-notice:focus-visible .realm-rina-chat-notice__avatar > img,
body[data-page="home"] .realm-rina-chat-notice[aria-expanded="true"] .realm-rina-chat-notice__avatar > img,
body[data-page="home"] .realm-update-row:hover .realm-update-row__mark,
body[data-page="home"] .realm-update-row:focus-visible .realm-update-row__mark,
body[data-page="home"] .realm-notification-panel .realm-profile-dock:hover .realm-chat-dock__avatar > img,
body[data-page="home"] .realm-notification-panel .realm-profile-dock:focus-visible .realm-chat-dock__avatar > img,
body[data-page="home"] .realm-notification-panel .realm-profile-dock:hover .realm-chat-dock__avatar .rina-user-avatar,
body[data-page="home"] .realm-notification-panel .realm-profile-dock:focus-visible .realm-chat-dock__avatar .rina-user-avatar {
  filter:
    drop-shadow(0 0 10px rgba(200, 255, 215, 0.22))
    drop-shadow(0 0 20px rgba(117, 255, 156, 0.1));
}

body[data-page="home"] .realm-rina-chat-notice__avatar > img,
body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar > img,
body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar .rina-user-avatar {
  border-color: rgba(181, 255, 204, 0.34);
  box-shadow:
    0 0 0 3px rgba(121, 255, 155, 0.055),
    0 0 18px rgba(115, 255, 161, 0.14);
}

body[data-page="home"] .realm-rina-chat-notice::after,
body[data-page="home"] .realm-notification-panel .realm-profile-dock::after,
body[data-page="home"] .realm-rina-chat-notice__eyebrow::after {
  box-shadow: 0 0 10px rgba(113, 255, 152, 0.5);
}

body[data-page="home"] .realm-rina-chat-notice__action,
body[data-page="home"] .realm-update-row__cta,
body[data-page="home"] .realm-chat-dock__action {
  border-color: rgba(145, 255, 177, 0.24);
  background: linear-gradient(180deg, rgba(18, 55, 31, 0.46), rgba(3, 18, 12, 0.62));
  box-shadow:
    inset 0 1px 0 rgba(230, 255, 236, 0.06),
    0 0 14px rgba(94, 255, 135, 0.06);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

body[data-page="home"] .realm-rina-chat-notice[aria-expanded="true"] .realm-rina-chat-notice__action,
body[data-page="home"] .realm-rina-chat-notice__action:hover,
body[data-page="home"] .realm-update-row__cta:focus-visible,
body[data-page="home"] .realm-update-row__cta:hover,
body[data-page="home"] .realm-chat-dock__action:focus-visible,
body[data-page="home"] .realm-chat-dock__action:hover {
  border-color: rgba(211, 255, 226, 0.48);
  color: rgba(250, 255, 252, 0.98) !important;
  background:
    linear-gradient(180deg, rgba(72, 140, 88, 0.58), rgba(14, 55, 28, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 16px rgba(208, 255, 222, 0.06),
    0 0 20px rgba(117, 255, 156, 0.16);
}

body[data-page="home"] .realm-rina-chat-notice strong,
body[data-page="home"] .realm-update-row__copy strong,
body[data-page="home"] .realm-notification-panel .realm-chat-dock strong {
  letter-spacing: 0;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.66);
}

body[data-page="home"] .realm-rina-chat-notice__copy > span:not(.realm-rina-chat-notice__eyebrow),
body[data-page="home"] .realm-update-row__copy span,
body[data-page="home"] .realm-notification-panel .realm-chat-dock span {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.54);
}

@media (min-width: 1061px) {
  body[data-page="home"] .realm-notification-panel {
    width: min(35.35rem, calc(100% - 0.45rem));
    transform: translateX(-0.5rem);
  }
}

body[data-page="home"] .topbar.home-topbar .rina-header-economy,
body[data-page="home"] .topbar.home-topbar .rina-header-balance,
body[data-page="home"] .topbar.home-topbar .rina-wallet-button,
body[data-page="home"] .topbar.home-topbar .rina-auth-button,
body[data-page="home"] .topbar.home-topbar .rina-auth-chip,
body[data-page="home"] .topbar.home-topbar .rina-account-trigger {
  border-color: var(--realm-left-clean-line) !important;
  color: var(--realm-mint-bright) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 34%),
    radial-gradient(circle at 18% 0%, rgba(153, 255, 185, 0.055), transparent 44%),
    linear-gradient(180deg, rgba(5, 18, 12, 0.56), rgba(1, 10, 8, 0.68)) !important;
  box-shadow:
    inset 0 1px 0 rgba(230, 255, 236, 0.055),
    inset 0 0 18px rgba(104, 255, 151, 0.024),
    0 10px 24px rgba(0, 0, 0, 0.24) !important;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    filter 160ms ease !important;
}

body[data-page="home"] .topbar.home-topbar .rina-header-economy:hover,
body[data-page="home"] .topbar.home-topbar .rina-header-economy:focus-within,
body[data-page="home"] .topbar.home-topbar .rina-header-balance:focus-within,
body[data-page="home"] .topbar.home-topbar .rina-account-menu.is-open .rina-account-trigger {
  border-color: var(--realm-left-clean-line-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 18px rgba(208, 255, 222, 0.035),
    0 0 0 1px rgba(145, 255, 177, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(117, 255, 156, 0.1) !important;
  filter: none;
}

body[data-page="home"] .topbar.home-topbar button.rina-header-balance:hover,
body[data-page="home"] .topbar.home-topbar button.rina-header-balance:focus-visible,
body[data-page="home"] .topbar.home-topbar .rina-wallet-button:hover,
body[data-page="home"] .topbar.home-topbar .rina-wallet-button:focus-visible,
body[data-page="home"] .topbar.home-topbar .rina-auth-button:hover,
body[data-page="home"] .topbar.home-topbar .rina-auth-button:focus-visible,
body[data-page="home"] .topbar.home-topbar .rina-auth-chip:hover,
body[data-page="home"] .topbar.home-topbar .rina-auth-chip:focus-visible,
body[data-page="home"] .topbar.home-topbar .rina-account-trigger:hover,
body[data-page="home"] .topbar.home-topbar .rina-account-trigger:focus-visible {
  border-color: rgba(211, 255, 226, 0.48) !important;
  color: rgba(250, 255, 252, 0.98) !important;
  background:
    linear-gradient(180deg, rgba(239, 255, 244, 0.11), transparent 36%),
    linear-gradient(180deg, rgba(72, 140, 88, 0.58), rgba(14, 55, 28, 0.72)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 16px rgba(208, 255, 222, 0.06),
    0 0 20px rgba(117, 255, 156, 0.16) !important;
}

/* Reference pass: homepage left panel stack only. */
body[data-page="home"] {
  --realm-left-panel-line: rgba(92, 255, 145, 0.24);
  --realm-left-panel-line-strong: rgba(142, 255, 177, 0.48);
  --realm-left-panel-fill: rgba(0, 7, 5, 0.94);
  --realm-left-panel-fill-deep: rgba(0, 3, 3, 0.96);
  --realm-left-panel-copy: rgba(224, 231, 226, 0.72);
}

body[data-page="home"] .realm-notification-panel {
  width: min(37.2rem, 100%) !important;
  height: auto !important;
  gap: clamp(0.98rem, 1.5vh, 1.24rem) !important;
  grid-template-rows: none !important;
  align-content: start !important;
  transform: none !important;
  z-index: 35 !important;
}

body[data-page="home"] .realm-rina-chat-notice,
body[data-page="home"] .realm-notification-updates,
body[data-page="home"] .realm-notification-panel .realm-profile-dock {
  overflow: hidden;
  border: 1px solid var(--realm-left-panel-line) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 18%),
    linear-gradient(180deg, var(--realm-left-panel-fill), var(--realm-left-panel-fill-deep)) !important;
  box-shadow:
    inset 0 1px 0 rgba(224, 255, 234, 0.045),
    inset 0 0 28px rgba(77, 255, 127, 0.018),
    0 16px 46px rgba(0, 0, 0, 0.52),
    0 0 18px rgba(75, 255, 129, 0.035) !important;
  backdrop-filter: blur(16px) saturate(112%);
}

body[data-page="home"] .realm-rina-chat-notice:hover,
body[data-page="home"] .realm-rina-chat-notice:focus-visible,
body[data-page="home"] .realm-rina-chat-notice[aria-expanded="true"],
body[data-page="home"] .realm-update-row:hover,
body[data-page="home"] .realm-update-row:focus-visible,
body[data-page="home"] .realm-notification-panel .realm-profile-dock:hover,
body[data-page="home"] .realm-notification-panel .realm-profile-dock:focus-visible {
  border-color: var(--realm-left-panel-line-strong) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), transparent 18%),
    linear-gradient(180deg, rgba(0, 9, 6, 0.96), rgba(0, 4, 3, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(237, 255, 242, 0.065),
    inset 0 0 28px rgba(77, 255, 127, 0.026),
    0 18px 54px rgba(0, 0, 0, 0.58),
    0 0 22px rgba(75, 255, 129, 0.075) !important;
}

body[data-page="home"] .realm-rina-chat-notice {
  min-height: clamp(6.8rem, 10vh, 7.35rem) !important;
  grid-template-columns: clamp(4.55rem, 5.25vw, 5.18rem) minmax(0, 1fr) 2.3rem !important;
  gap: clamp(0.86rem, 1.15vw, 1.08rem) !important;
  padding: clamp(0.72rem, 1.18vh, 0.9rem) clamp(1rem, 1.45vw, 1.32rem) !important;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.88) !important;
}

body[data-page="home"] .realm-rina-chat-notice::before,
body[data-page="home"] .realm-notification-panel .realm-profile-dock::before {
  inset: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 34%) !important;
  opacity: 1 !important;
}

body[data-page="home"] .realm-rina-chat-notice::after {
  left: clamp(4.16rem, 4.85vw, 4.78rem) !important;
  bottom: clamp(0.78rem, 1.18vh, 0.96rem) !important;
  width: 0.82rem !important;
  height: 0.82rem !important;
  border-width: 2px !important;
  background: #59ff88 !important;
  box-shadow: 0 0 14px rgba(89, 255, 136, 0.8) !important;
}

body[data-page="home"] .realm-rina-chat-notice__avatar,
body[data-page="home"] .realm-rina-chat-notice__avatar > img {
  width: clamp(4.55rem, 5.25vw, 5.18rem) !important;
  height: clamp(4.55rem, 5.25vw, 5.18rem) !important;
}

body[data-page="home"] .realm-rina-chat-notice__avatar {
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(126, 255, 170, 0.4),
    0 0 0 6px rgba(72, 255, 130, 0.045),
    0 0 30px rgba(72, 255, 130, 0.18);
}

body[data-page="home"] .realm-rina-chat-notice__avatar > img {
  border-color: rgba(139, 255, 177, 0.72) !important;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.45) !important;
}

body[data-page="home"] .realm-rina-chat-notice__copy {
  gap: 0.34rem !important;
}

body[data-page="home"] .realm-rina-chat-notice__eyebrow {
  color: #8dffae !important;
  font: 800 0.72rem/1 var(--font-ui) !important;
  letter-spacing: 0.045em !important;
}

body[data-page="home"] .realm-rina-chat-notice strong {
  color: #f4fff7 !important;
  font: 800 clamp(1.04rem, 1.22vw, 1.22rem)/1.1 var(--font-ui) !important;
}

body[data-page="home"] .realm-rina-chat-notice__copy > span:not(.realm-rina-chat-notice__eyebrow) {
  color: var(--realm-left-panel-copy) !important;
  font: 600 clamp(0.82rem, 0.93vw, 0.95rem)/1.38 var(--font-ui) !important;
}

body[data-page="home"] .realm-rina-chat-notice__action,
body[data-page="home"] .realm-update-row__cta {
  width: 2.15rem !important;
  min-width: 2.15rem !important;
  min-height: 2.15rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #9dffbb !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
}

body[data-page="home"] .realm-rina-chat-notice__action::before,
body[data-page="home"] .realm-update-row__cta::before {
  content: ">";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: currentColor;
  font: 400 2rem/1 var(--font-ui);
  text-shadow: 0 0 14px rgba(125, 255, 166, 0.58);
}

body[data-page="home"] .realm-update-row__cta::after {
  display: none !important;
}

body[data-page="home"] .realm-notification-updates {
  position: relative;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  margin-top: 1.08rem !important;
  padding: clamp(1.32rem, 2vh, 1.58rem) clamp(0.95rem, 1.35vw, 1.18rem) clamp(0.72rem, 1.1vh, 0.92rem) !important;
}

body[data-page="home"] .realm-notification-heading {
  position: absolute !important;
  left: 0 !important;
  top: -1.08rem !important;
  z-index: 3 !important;
  display: inline-flex !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-page="home"] .realm-notification-heading span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 2.12rem !important;
  padding: 0.24rem 1.05rem 0.18rem !important;
  border: 1px solid rgba(92, 255, 145, 0.24) !important;
  border-radius: 12px !important;
  color: #85f9a4 !important;
  background:
    linear-gradient(180deg, rgba(1, 14, 8, 0.96), rgba(0, 5, 4, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(225, 255, 234, 0.055),
    0 0 14px rgba(74, 255, 129, 0.045);
  font: 900 clamp(0.94rem, 1vw, 1.08rem)/1 var(--font-ui) !important;
  letter-spacing: 0.02em !important;
}

body[data-page="home"] .realm-update-row {
  min-height: clamp(4.45rem, 7.4vh, 5.08rem) !important;
  grid-template-columns: clamp(3.3rem, 4vw, 3.62rem) minmax(0, 1fr) 2rem !important;
  grid-template-rows: none !important;
  justify-items: stretch !important;
  align-items: center !important;
  gap: clamp(0.88rem, 1.2vw, 1.08rem) !important;
  padding: clamp(0.62rem, 0.98vh, 0.8rem) 0.18rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

body[data-page="home"] .realm-update-row + .realm-update-row {
  border-top: 1px solid rgba(104, 255, 151, 0.11) !important;
}

body[data-page="home"] .realm-update-row:hover,
body[data-page="home"] .realm-update-row:focus-visible {
  background: rgba(92, 255, 145, 0.025) !important;
  box-shadow: none !important;
}

body[data-page="home"] .realm-update-row::before {
  display: none !important;
}

body[data-page="home"] .realm-update-row__mark {
  width: clamp(2.82rem, 3.4vw, 3.18rem) !important;
  height: clamp(2.82rem, 3.4vw, 3.18rem) !important;
  border: 1px solid rgba(109, 255, 153, 0.36);
  border-radius: 50%;
  background-color: rgba(0, 8, 5, 0.86);
  background-size: 58% auto !important;
  box-shadow:
    inset 0 0 14px rgba(80, 255, 130, 0.045),
    0 0 0 5px rgba(63, 255, 121, 0.026),
    0 0 18px rgba(79, 255, 128, 0.1);
  filter: none !important;
}

body[data-page="home"] .realm-update-row__copy {
  align-self: center !important;
  gap: 0 !important;
  text-align: left !important;
}

body[data-page="home"] .realm-update-row__copy strong {
  color: #ffffff !important;
  font: 900 clamp(1.12rem, 1.32vw, 1.42rem)/1.08 var(--font-ui) !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
}

body[data-page="home"] .realm-update-row__copy span {
  color: var(--realm-left-panel-copy) !important;
  font: 600 clamp(0.78rem, 0.88vw, 0.9rem)/1.28 var(--font-ui) !important;
}

body[data-page="home"] .realm-notification-panel .realm-profile-dock {
  align-self: auto !important;
  min-height: clamp(6.9rem, 10.6vh, 7.65rem) !important;
  grid-template-columns: clamp(5.15rem, 5.75vw, 5.72rem) minmax(0, 1fr) clamp(8.6rem, 10vw, 9.92rem) !important;
  gap: clamp(0.84rem, 1.2vw, 1.12rem) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: clamp(0.82rem, 1.2vh, 1rem) clamp(1rem, 1.45vw, 1.3rem) !important;
}

body[data-page="home"] .realm-notification-panel .realm-profile-dock::after {
  left: clamp(4.62rem, 5.12vw, 5.12rem) !important;
  bottom: clamp(0.82rem, 1.24vh, 1.02rem) !important;
  width: 0.82rem !important;
  height: 0.82rem !important;
  background: #59ff88 !important;
}

body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar,
body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar > img,
body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar .rina-user-avatar {
  width: clamp(5.15rem, 5.75vw, 5.72rem) !important;
  height: clamp(5.15rem, 5.75vw, 5.72rem) !important;
}

body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar {
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(126, 255, 170, 0.36),
    0 0 0 7px rgba(72, 255, 130, 0.035),
    0 0 30px rgba(72, 255, 130, 0.16);
}

body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar > img,
body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar .rina-user-avatar {
  border-color: rgba(139, 255, 177, 0.62) !important;
}

body[data-page="home"] .realm-notification-panel .realm-chat-dock div {
  gap: 0.32rem !important;
}

body[data-page="home"] .realm-notification-panel .realm-chat-dock strong {
  color: #f4fff7 !important;
  font: 800 clamp(0.92rem, 1vw, 1.04rem)/1.15 var(--font-ui) !important;
}

body[data-page="home"] .realm-notification-panel .realm-chat-dock span {
  color: var(--realm-left-panel-copy) !important;
  font: 600 clamp(0.76rem, 0.86vw, 0.9rem)/1.25 var(--font-ui) !important;
}

body[data-page="home"] .realm-chat-dock__level {
  grid-template-columns: auto minmax(4.8rem, 1fr) auto !important;
  gap: 0.62rem !important;
  width: min(100%, 15rem) !important;
  margin-top: 0.24rem !important;
}

body[data-page="home"] .realm-chat-dock__meter {
  height: 0.34rem !important;
  background: rgba(226, 255, 235, 0.12) !important;
}

body[data-page="home"] .realm-chat-dock__action {
  min-height: clamp(2.68rem, 4.3vh, 3.12rem) !important;
  padding: 0.5rem 0.72rem !important;
  border: 1px solid rgba(92, 255, 145, 0.28) !important;
  border-radius: 9px !important;
  color: #edfff2 !important;
  background:
    linear-gradient(180deg, rgba(13, 58, 28, 0.82), rgba(0, 20, 10, 0.88)) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 255, 238, 0.08),
    0 0 22px rgba(74, 255, 129, 0.08) !important;
  font: 900 clamp(0.62rem, 0.68vw, 0.72rem)/1.1 var(--font-ui) !important;
  letter-spacing: 0.02em !important;
}

@media (max-width: 900px) {
  body[data-page="home"] .realm-hero-copy {
    z-index: 45 !important;
  }

  body[data-page="home"] .realm-notification-panel {
    width: min(34rem, calc(100vw - 2rem)) !important;
    justify-self: center !important;
  }

  body[data-page="home"] .realm-rina-chat-notice {
    grid-template-columns: 4.35rem minmax(0, 1fr) 2rem !important;
  }

  body[data-page="home"] .realm-rina-chat-notice__avatar,
  body[data-page="home"] .realm-rina-chat-notice__avatar > img {
    width: 4.35rem !important;
    height: 4.35rem !important;
  }

  body[data-page="home"] .realm-rina-chat-notice::after {
    left: 4rem !important;
  }

  body[data-page="home"] .realm-notification-panel .realm-profile-dock {
    display: grid !important;
    grid-template-columns: 4.55rem minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar copy"
      "action action" !important;
  }

  body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar {
    grid-area: avatar;
  }

  body[data-page="home"] .realm-notification-panel .realm-profile-dock > div {
    grid-area: copy;
  }

  body[data-page="home"] .realm-chat-dock__action {
    grid-area: action;
    justify-self: stretch;
  }

  body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar,
  body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar > img,
  body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar .rina-user-avatar {
    width: 4.55rem !important;
    height: 4.55rem !important;
  }
}

@media (max-width: 600px) {
  body[data-page="home"] .realm-notification-panel {
    width: calc(100vw - 2rem) !important;
    gap: 1rem !important;
  }

  body[data-page="home"] .realm-rina-chat-notice {
    grid-template-columns: 4.2rem minmax(0, 1fr) 1.8rem !important;
    gap: 0.74rem !important;
    padding-inline: 0.9rem !important;
  }

  body[data-page="home"] .realm-rina-chat-notice__avatar,
  body[data-page="home"] .realm-rina-chat-notice__avatar > img {
    width: 4.2rem !important;
    height: 4.2rem !important;
  }

  body[data-page="home"] .realm-rina-chat-notice::after {
    left: 3.9rem !important;
  }

  body[data-page="home"] .realm-update-row {
    grid-template-columns: 3.15rem minmax(0, 1fr) 1.6rem !important;
    gap: 0.74rem !important;
  }

  body[data-page="home"] .realm-update-row__mark {
    width: 2.72rem !important;
    height: 2.72rem !important;
  }
}

body[data-page="home"] .topbar.home-topbar .rina-header-balance img {
  filter:
    drop-shadow(0 0 7px var(--balance-glow, rgba(118, 255, 162, 0.26)))
    drop-shadow(0 0 12px rgba(118, 255, 162, 0.08)) !important;
  transition: filter 160ms ease, transform 160ms ease;
}

body[data-page="home"] .topbar.home-topbar .rina-header-economy:hover .rina-header-balance img,
body[data-page="home"] .topbar.home-topbar .rina-header-balance:hover img {
  filter:
    drop-shadow(0 0 9px var(--balance-glow, rgba(188, 255, 210, 0.36)))
    drop-shadow(0 0 18px rgba(173, 255, 198, 0.16)) !important;
}

/* Final hover contract: panels react with rim/glow; top-right controls get the light fill. */
body[data-page="home"] .realm-rina-chat-notice:hover,
body[data-page="home"] .realm-rina-chat-notice:focus-visible,
body[data-page="home"] .realm-rina-chat-notice[aria-expanded="true"],
body[data-page="home"] .realm-update-row:hover,
body[data-page="home"] .realm-update-row:focus-visible,
body[data-page="home"] .realm-notification-panel .realm-profile-dock:hover,
body[data-page="home"] .realm-notification-panel .realm-profile-dock:focus-visible,
body[data-page="home"] .topbar.home-topbar .rina-header-economy:hover,
body[data-page="home"] .topbar.home-topbar .rina-header-economy:focus-within {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 30%),
    radial-gradient(circle at 14% 0%, rgba(153, 255, 185, 0.055), transparent 38%),
    linear-gradient(180deg, var(--realm-left-clean-fill), rgba(1, 10, 8, 0.62)) !important;
}

body[data-page="home"] .realm-rina-chat-notice[aria-expanded="true"] .realm-rina-chat-notice__action,
body[data-page="home"] .realm-rina-chat-notice__action:hover,
body[data-page="home"] .realm-update-row__cta:focus-visible,
body[data-page="home"] .realm-update-row__cta:hover,
body[data-page="home"] .realm-chat-dock__action:focus-visible,
body[data-page="home"] .realm-chat-dock__action:hover,
body[data-page="home"] .topbar.home-topbar .rina-header-balance:not(button):hover,
body[data-page="home"] .topbar.home-topbar .rina-header-balance:not(button):focus-within,
body[data-page="home"] .topbar.home-topbar button.rina-header-balance:hover,
body[data-page="home"] .topbar.home-topbar button.rina-header-balance:focus-visible,
body[data-page="home"] .topbar.home-topbar .rina-wallet-button:hover,
body[data-page="home"] .topbar.home-topbar .rina-wallet-button:focus-visible,
body[data-page="home"] .topbar.home-topbar .rina-auth-button:hover,
body[data-page="home"] .topbar.home-topbar .rina-auth-button:focus-visible,
body[data-page="home"] .topbar.home-topbar .rina-auth-chip:hover,
body[data-page="home"] .topbar.home-topbar .rina-auth-chip:focus-visible,
body[data-page="home"] .topbar.home-topbar .rina-account-trigger:hover,
body[data-page="home"] .topbar.home-topbar .rina-account-trigger:focus-visible {
  border-color: rgba(211, 255, 226, 0.48) !important;
  color: rgba(250, 255, 252, 0.98) !important;
  background:
    linear-gradient(180deg, rgba(239, 255, 244, 0.11), transparent 36%),
    linear-gradient(180deg, rgba(72, 140, 88, 0.58), rgba(14, 55, 28, 0.72)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 16px rgba(208, 255, 222, 0.06),
    0 0 20px rgba(117, 255, 156, 0.16) !important;
}

/* Absolute final homepage theme and fit override. Rina artwork selectors are intentionally excluded. */
body[data-page="home"] {
  --home-theme-accent: var(--theme-accent, #9cf7b7);
  --home-theme-accent-tint: var(--theme-accent-tint, color-mix(in srgb, var(--home-theme-accent) 58%, #ffffff));
  --home-theme-secondary: var(--theme-secondary, #9b7cf7);
  --home-theme-panel: color-mix(in srgb, var(--theme-panel, rgba(2, 12, 9, 0.92)) 82%, rgba(0, 0, 0, 0.62));
  --home-theme-panel-deep: color-mix(in srgb, var(--theme-panel-deep, rgba(1, 8, 7, 0.96)) 88%, rgba(0, 0, 0, 0.72));
  --home-theme-line: color-mix(in srgb, var(--home-theme-accent) 24%, rgba(255, 255, 255, 0.08));
  --home-theme-line-strong: color-mix(in srgb, var(--home-theme-accent) 48%, rgba(255, 255, 255, 0.12));
  --home-theme-glow: color-mix(in srgb, var(--home-theme-accent) 18%, transparent);
  --home-theme-glow-soft: color-mix(in srgb, var(--home-theme-accent) 8%, transparent);
  --home-theme-copy: color-mix(in srgb, var(--home-theme-accent) 12%, rgba(236, 242, 239, 0.72));
  --realm-mint: color-mix(in srgb, var(--home-theme-accent) 74%, #ffffff);
  --realm-mint-bright: var(--home-theme-accent-tint);
  --realm-soft: var(--home-theme-copy);
  --realm-line: var(--home-theme-line);
  --realm-panel: var(--home-theme-panel);
  --realm-panel-deep: var(--home-theme-panel-deep);
  --realm-card-border: var(--home-theme-line);
  --realm-card-border-strong: var(--home-theme-line-strong);
  --realm-left-clean-line: color-mix(in srgb, var(--home-theme-accent) 18%, rgba(255, 255, 255, 0.08));
  --realm-left-clean-line-hover: var(--home-theme-line-strong);
  --realm-left-clean-fill: color-mix(in srgb, var(--home-theme-panel) 82%, transparent);
  --realm-left-clean-fill-hover: color-mix(in srgb, var(--home-theme-accent) 8%, var(--home-theme-panel));
  --realm-left-clean-glow: var(--home-theme-glow-soft);
  --realm-left-panel-line: var(--home-theme-line);
  --realm-left-panel-line-strong: var(--home-theme-line-strong);
  --realm-left-panel-fill: var(--home-theme-panel);
  --realm-left-panel-fill-deep: var(--home-theme-panel-deep);
  --realm-left-panel-copy: var(--home-theme-copy);
  background:
    radial-gradient(ellipse at 58% 44%, color-mix(in srgb, var(--home-theme-accent) 8%, transparent) 0 22%, transparent 48%),
    radial-gradient(ellipse at 14% 74%, color-mix(in srgb, var(--home-theme-secondary) 7%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--home-theme-panel-deep) 68%, transparent) 0%, transparent 32%, color-mix(in srgb, var(--home-theme-panel-deep) 78%, transparent) 100%),
    url("Pages/ouija-assets/home-scene/rinaverse-background-hq.png") center bottom / cover no-repeat fixed,
    color-mix(in srgb, var(--home-theme-panel-deep) 86%, #010705) !important;
}

body[data-page="home"] .realm-home {
  background:
    radial-gradient(ellipse at 58% 44%, color-mix(in srgb, var(--home-theme-accent) 7%, transparent) 0 24%, transparent 50%),
    radial-gradient(ellipse at 16% 72%, color-mix(in srgb, var(--home-theme-secondary) 6%, transparent), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--home-theme-panel-deep) 58%, transparent) 0%, transparent 32%, color-mix(in srgb, var(--home-theme-panel-deep) 78%, transparent) 100%),
    url("Pages/ouija-assets/home-scene/rinaverse-background-hq.png") center bottom / cover no-repeat,
    color-mix(in srgb, var(--home-theme-panel-deep) 86%, #010705) !important;
}

body[data-page="home"] .realm-home-bg {
  background: color-mix(in srgb, var(--home-theme-panel-deep) 86%, #010705) !important;
}

body[data-page="home"] .realm-home-bg__veil {
  background:
    radial-gradient(ellipse at 58% 44%, transparent 0 38%, color-mix(in srgb, var(--home-theme-accent) 4%, transparent) 62%, color-mix(in srgb, var(--home-theme-panel-deep) 22%, transparent) 100%),
    radial-gradient(ellipse at 18% 78%, color-mix(in srgb, var(--home-theme-secondary) 8%, transparent), transparent 44%),
    linear-gradient(90deg, color-mix(in srgb, var(--home-theme-panel-deep) 44%, transparent) 0%, rgba(0, 0, 0, 0.08) 20%, transparent 52%, rgba(0, 0, 0, 0.08) 78%, color-mix(in srgb, var(--home-theme-panel-deep) 48%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--home-theme-panel-deep) 24%, transparent) 0%, transparent 28%, color-mix(in srgb, var(--home-theme-panel-deep) 42%, transparent) 100%) !important;
}

body[data-page="home"] .realm-home::before {
  background:
    radial-gradient(circle at 12% 27%, color-mix(in srgb, var(--home-theme-accent) 78%, #ffffff) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 68%, color-mix(in srgb, var(--home-theme-accent) 42%, transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 18%, color-mix(in srgb, var(--home-theme-secondary) 48%, #ffffff) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 44%, color-mix(in srgb, var(--home-theme-accent) 36%, transparent) 0 1px, transparent 2px) !important;
  background-size: 15rem 12rem, 19rem 16rem, 22rem 18rem, 26rem 20rem !important;
}

body[data-page="home"] .realm-rina-chat-notice,
body[data-page="home"] .realm-notification-updates,
body[data-page="home"] .realm-notification-panel .realm-profile-dock {
  border-color: var(--home-theme-line) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), transparent 19%),
    radial-gradient(circle at 13% 0%, color-mix(in srgb, var(--home-theme-accent) 8%, transparent), transparent 38%),
    linear-gradient(180deg, var(--home-theme-panel), var(--home-theme-panel-deep)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0 28px color-mix(in srgb, var(--home-theme-accent) 3.5%, transparent),
    0 16px 46px rgba(0, 0, 0, 0.52),
    0 0 20px var(--home-theme-glow-soft) !important;
}

body[data-page="home"] .realm-rina-chat-notice:hover,
body[data-page="home"] .realm-rina-chat-notice:focus-visible,
body[data-page="home"] .realm-rina-chat-notice[aria-expanded="true"],
body[data-page="home"] .realm-update-row:hover,
body[data-page="home"] .realm-update-row:focus-visible,
body[data-page="home"] .realm-notification-panel .realm-profile-dock:hover,
body[data-page="home"] .realm-notification-panel .realm-profile-dock:focus-visible,
body[data-page="home"] .topbar.home-topbar .rina-header-economy:hover,
body[data-page="home"] .topbar.home-topbar .rina-header-economy:focus-within {
  border-color: var(--home-theme-line-strong) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), transparent 25%),
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--home-theme-accent) 11%, transparent), transparent 40%),
    linear-gradient(180deg, color-mix(in srgb, var(--home-theme-accent) 5%, var(--home-theme-panel)), var(--home-theme-panel-deep)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset 0 0 30px color-mix(in srgb, var(--home-theme-accent) 5%, transparent),
    0 18px 54px rgba(0, 0, 0, 0.58),
    0 0 24px var(--home-theme-glow) !important;
}

body[data-page="home"] .realm-notification-updates {
  overflow: visible !important;
  align-content: start !important;
  gap: 0 !important;
  margin-top: clamp(0.72rem, 1.1vh, 0.9rem) !important;
  padding: clamp(1.08rem, 1.58vh, 1.28rem) clamp(0.82rem, 1.12vw, 1rem) clamp(0.48rem, 0.8vh, 0.68rem) !important;
}

body[data-page="home"] .realm-notification-heading {
  top: calc(-1 * clamp(0.72rem, 1.1vh, 0.9rem)) !important;
}

body[data-page="home"] .realm-notification-heading span {
  min-height: clamp(1.78rem, 2.8vh, 2rem) !important;
  padding: 0.2rem clamp(0.82rem, 1vw, 1rem) 0.16rem !important;
  border-color: var(--home-theme-line) !important;
  color: var(--home-theme-accent-tint) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--home-theme-accent) 9%, var(--home-theme-panel)), var(--home-theme-panel-deep)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 16px var(--home-theme-glow-soft) !important;
  font-size: clamp(0.82rem, 0.92vw, 1rem) !important;
  text-shadow: 0 0 14px color-mix(in srgb, var(--home-theme-accent) 34%, transparent) !important;
}

body[data-page="home"] .realm-update-row {
  min-height: clamp(3.58rem, 5.72vh, 4.22rem) !important;
  grid-template-columns: clamp(2.6rem, 3.12vw, 3rem) minmax(0, 1fr) 1.72rem !important;
  gap: clamp(0.68rem, 0.9vw, 0.9rem) !important;
  padding: clamp(0.42rem, 0.68vh, 0.58rem) 0.12rem !important;
}

body[data-page="home"] .realm-update-row + .realm-update-row {
  border-top-color: color-mix(in srgb, var(--home-theme-accent) 16%, rgba(255, 255, 255, 0.08)) !important;
}

body[data-page="home"] .realm-update-row:hover,
body[data-page="home"] .realm-update-row:focus-visible {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--home-theme-accent) 5%, transparent), transparent 72%) !important;
}

body[data-page="home"] .realm-update-row__mark {
  width: clamp(2.32rem, 2.8vw, 2.72rem) !important;
  height: clamp(2.32rem, 2.8vw, 2.72rem) !important;
  border-color: color-mix(in srgb, var(--home-theme-accent) 36%, rgba(255, 255, 255, 0.12)) !important;
  background-color: color-mix(in srgb, var(--home-theme-accent) 6%, rgba(0, 0, 0, 0.78)) !important;
  box-shadow:
    inset 0 0 14px color-mix(in srgb, var(--home-theme-accent) 5%, transparent),
    0 0 0 5px color-mix(in srgb, var(--home-theme-accent) 2.8%, transparent),
    0 0 18px color-mix(in srgb, var(--home-theme-accent) 12%, transparent) !important;
}

body[data-page="home"] .realm-update-row__copy strong {
  font-size: clamp(0.96rem, 1.12vw, 1.2rem) !important;
  line-height: 1.04 !important;
}

body[data-page="home"] .realm-update-row__copy span,
body[data-page="home"] .realm-rina-chat-notice__copy > span:not(.realm-rina-chat-notice__eyebrow),
body[data-page="home"] .realm-notification-panel .realm-chat-dock span {
  color: var(--home-theme-copy) !important;
}

body[data-page="home"] .realm-rina-chat-notice::after,
body[data-page="home"] .realm-notification-panel .realm-profile-dock::after {
  background: var(--home-theme-accent-tint) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--home-theme-accent) 72%, transparent) !important;
}

body[data-page="home"] .realm-rina-chat-notice__eyebrow,
body[data-page="home"] .realm-rina-chat-notice__action,
body[data-page="home"] .realm-update-row__cta,
body[data-page="home"] .realm-chat-dock__action {
  color: var(--home-theme-accent-tint) !important;
}

body[data-page="home"] .realm-rina-chat-notice__action::before,
body[data-page="home"] .realm-update-row__cta::before {
  font-size: clamp(1.48rem, 1.72vw, 1.84rem) !important;
  text-shadow: 0 0 14px color-mix(in srgb, var(--home-theme-accent) 56%, transparent) !important;
}

body[data-page="home"] .realm-rina-chat-notice__avatar,
body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--home-theme-accent) 38%, rgba(255, 255, 255, 0.1)),
    0 0 0 6px color-mix(in srgb, var(--home-theme-accent) 4%, transparent),
    0 0 28px color-mix(in srgb, var(--home-theme-accent) 16%, transparent) !important;
}

body[data-page="home"] .realm-rina-chat-notice__avatar > img,
body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar > img,
body[data-page="home"] .realm-notification-panel .realm-chat-dock__avatar .rina-user-avatar {
  border-color: color-mix(in srgb, var(--home-theme-accent) 56%, rgba(255, 255, 255, 0.12)) !important;
}

body[data-page="home"] .realm-chat-dock__meter {
  background: color-mix(in srgb, var(--home-theme-accent) 10%, rgba(255, 255, 255, 0.08)) !important;
}

body[data-page="home"] .realm-chat-dock__meter i {
  background: linear-gradient(90deg, var(--home-theme-accent), var(--home-theme-accent-tint)) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--home-theme-accent) 34%, transparent) !important;
}

body[data-page="home"] .realm-chat-dock__action {
  border-color: var(--home-theme-line) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--home-theme-accent) 13%, rgba(255, 255, 255, 0.05)), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--home-theme-accent) 10%, var(--home-theme-panel)), var(--home-theme-panel-deep)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 22px var(--home-theme-glow-soft) !important;
}

body[data-page="home"] .realm-rina-chat-notice[aria-expanded="true"] .realm-rina-chat-notice__action,
body[data-page="home"] .realm-rina-chat-notice__action:hover,
body[data-page="home"] .realm-update-row__cta:focus-visible,
body[data-page="home"] .realm-update-row__cta:hover,
body[data-page="home"] .realm-chat-dock__action:focus-visible,
body[data-page="home"] .realm-chat-dock__action:hover,
body[data-page="home"] .topbar.home-topbar .rina-header-balance:not(button):hover,
body[data-page="home"] .topbar.home-topbar .rina-header-balance:not(button):focus-within,
body[data-page="home"] .topbar.home-topbar button.rina-header-balance:hover,
body[data-page="home"] .topbar.home-topbar button.rina-header-balance:focus-visible,
body[data-page="home"] .topbar.home-topbar .rina-wallet-button:hover,
body[data-page="home"] .topbar.home-topbar .rina-wallet-button:focus-visible,
body[data-page="home"] .topbar.home-topbar .rina-auth-button:hover,
body[data-page="home"] .topbar.home-topbar .rina-auth-button:focus-visible,
body[data-page="home"] .topbar.home-topbar .rina-auth-chip:hover,
body[data-page="home"] .topbar.home-topbar .rina-auth-chip:focus-visible,
body[data-page="home"] .topbar.home-topbar .rina-account-trigger:hover,
body[data-page="home"] .topbar.home-topbar .rina-account-trigger:focus-visible {
  border-color: var(--home-theme-line-strong) !important;
  color: var(--home-theme-accent-tint) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--home-theme-accent) 16%, rgba(255, 255, 255, 0.08)), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--home-theme-accent) 18%, var(--home-theme-panel)), var(--home-theme-panel-deep)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 16px color-mix(in srgb, var(--home-theme-accent) 6%, transparent),
    0 0 20px var(--home-theme-glow) !important;
}

@media (max-height: 820px) and (min-width: 1061px) {
  body[data-page="home"] .realm-notification-panel {
    gap: clamp(0.48rem, 0.92vh, 0.72rem) !important;
  }

  body[data-page="home"] .realm-notification-updates {
    margin-top: 0.68rem !important;
    padding: 0.98rem 0.76rem 0.42rem !important;
  }

  body[data-page="home"] .realm-notification-heading {
    top: -0.68rem !important;
  }

  body[data-page="home"] .realm-notification-heading span {
    min-height: 1.7rem !important;
    font-size: 0.78rem !important;
  }

  body[data-page="home"] .realm-update-row {
    min-height: clamp(3.18rem, 5vh, 3.72rem) !important;
    grid-template-columns: 2.5rem minmax(0, 1fr) 1.58rem !important;
    gap: 0.62rem !important;
    padding-block: 0.34rem !important;
  }

  body[data-page="home"] .realm-update-row__mark {
    width: 2.24rem !important;
    height: 2.24rem !important;
  }

  body[data-page="home"] .realm-update-row__copy strong {
    font-size: clamp(0.9rem, 1.02vw, 1.04rem) !important;
  }

  body[data-page="home"] .realm-rina-chat-notice {
    min-height: clamp(5.15rem, 8.6vh, 5.9rem) !important;
  }

  body[data-page="home"] .realm-notification-panel .realm-profile-dock {
    min-height: clamp(5.45rem, 8.8vh, 6.2rem) !important;
  }
}

@media (max-height: 700px) {
  body[data-page="home"] .realm-notification-panel {
    gap: clamp(0.42rem, 0.8vh, 0.6rem) !important;
  }

  body[data-page="home"] .realm-notification-updates {
    margin-top: 0.62rem !important;
    padding: 0.88rem 0.7rem 0.34rem !important;
  }

  body[data-page="home"] .realm-notification-heading {
    top: -0.62rem !important;
  }

  body[data-page="home"] .realm-notification-heading span {
    min-height: 1.55rem !important;
    font-size: 0.74rem !important;
  }

  body[data-page="home"] .realm-update-row {
    min-height: 2.92rem !important;
    grid-template-columns: 2.25rem minmax(0, 1fr) 1.42rem !important;
    gap: 0.54rem !important;
    padding-block: 0.28rem !important;
  }

  body[data-page="home"] .realm-update-row__mark {
    width: 2rem !important;
    height: 2rem !important;
  }

  body[data-page="home"] .realm-update-row__copy strong {
    font-size: clamp(0.84rem, 1vw, 0.98rem) !important;
  }

  body[data-page="home"] .realm-rina-chat-notice {
    min-height: clamp(4.65rem, 8vh, 5.25rem) !important;
  }

  body[data-page="home"] .realm-notification-panel .realm-profile-dock {
    min-height: clamp(4.95rem, 8.4vh, 5.7rem) !important;
  }
}

@media (max-width: 600px) {
  body[data-page="home"] .realm-notification-updates {
    margin-top: 0.72rem !important;
    padding: 1rem 0.72rem 0.48rem !important;
  }

  body[data-page="home"] .realm-update-row {
    min-height: 3.42rem !important;
    grid-template-columns: 2.52rem minmax(0, 1fr) 1.5rem !important;
    gap: 0.58rem !important;
  }

  body[data-page="home"] .realm-update-row__mark {
    width: 2.18rem !important;
    height: 2.18rem !important;
  }

  body[data-page="home"] .realm-update-row__copy strong {
    font-size: 0.9rem !important;
  }
}