/* Served from assets/styles because the integrated 8788 surface only exposes approved static roots. */
:root {
  --m29-ink: #1f2926;
  --m29-ink-soft: #485651;
  --m29-ink-faint: #68756f;
  --m29-paper: #f7f3ea;
  --m29-paper-strong: rgba(255, 253, 247, 0.94);
  --m29-paper-soft: rgba(245, 240, 230, 0.86);
  --m29-line: rgba(31, 41, 38, 0.18);
  --m29-line-strong: rgba(31, 41, 38, 0.34);
  --m29-cinnabar: #963f32;
  --m29-jade: #3e665b;
  --m29-night: #0b2138;
  --m29-night-soft: #173957;
  --m29-night-ink: #eaf0f3;
  --m29-ease: cubic-bezier(0.22, 0.78, 0.24, 1);
  --m29-shadow-paper: 0 18px 50px rgba(24, 36, 33, 0.1);
  --m29-rail-width: 4.9rem;
}

@media (min-width: 761px) {
  .m29-scene-layout {
    position: relative;
    min-height: 100svh;
    isolation: isolate;
  }

  .m29-page-heading {
    position: relative;
    z-index: 3;
    text-shadow: none;
  }

  .m29-page-heading h1 {
    color: var(--m29-ink);
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-wrap: balance;
  }

  .m29-page-heading > p {
    color: var(--m29-ink-soft);
    font-family: var(--serif);
    letter-spacing: 0.025em;
    line-height: 1.75;
  }

  .topbar {
    height: 5rem;
    padding-top: 0.78rem;
    padding-bottom: 0.78rem;
  }

  .topbar::after {
    opacity: 0.76;
    background: linear-gradient(
      180deg,
      rgba(255, 253, 247, 0.9) 0%,
      rgba(255, 253, 247, 0.54) 54%,
      transparent 100%
    );
  }

  .topbar .brand {
    gap: 0.66rem;
  }

  .topbar .brand-mark {
    width: 2.25rem;
    height: 2.25rem;
  }

  .topbar .brand-copy strong {
    letter-spacing: 0.16em;
  }

  .ink-rail {
    border-right-color: rgba(31, 41, 38, 0.12);
    background: linear-gradient(
      90deg,
      rgba(255, 253, 247, 0.98),
      rgba(248, 245, 238, 0.94)
    );
    box-shadow: 8px 0 28px rgba(24, 36, 33, 0.045);
  }

  .ink-rail::after {
    background: linear-gradient(90deg, rgba(248, 245, 238, 0.9), transparent);
  }

  .rail-link {
    border-radius: 0.58rem;
  }

  .rail-link.is-active {
    background: rgba(245, 240, 230, 0.9);
    box-shadow: inset 0 0 0 1px rgba(31, 41, 38, 0.15);
  }

  .rail-link.is-active::before {
    background: var(--m29-cinnabar);
  }

  .rail-link.is-active .rail-glyph i {
    background: var(--m29-cinnabar);
  }

  html[data-view="share"] {
    --ink: var(--m29-night-ink);
    --ink-950: var(--m29-night-ink);
    --ink-800: #d6e0e5;
    --ink-700: #bdcbd3;
    --ink-600: #9fb0bb;
    --ink-soft: rgba(234, 240, 243, 0.78);
    --ink-faint: rgba(234, 240, 243, 0.58);
    --border-soft: rgba(223, 233, 238, 0.2);
    --border-strong: rgba(223, 233, 238, 0.38);
    --focus-ring: rgba(236, 222, 184, 0.52);
    color: var(--m29-night-ink);
  }

  html[data-view="share"] .topbar::after {
    background: linear-gradient(
      180deg,
      rgba(6, 24, 42, 0.86) 0%,
      rgba(6, 24, 42, 0.42) 58%,
      transparent 100%
    );
  }

  html[data-view="share"] .topbar .brand,
  html[data-view="share"] .topbar-actions,
  html[data-view="share"] .top-icon-button,
  html[data-view="share"] .profile-trigger,
  html[data-view="share"] .quota-dual span,
  html[data-view="share"] .quota-dual b {
    color: var(--m29-night-ink);
  }

  html[data-view="share"] .top-icon-button:hover,
  html[data-view="share"] .profile-trigger:hover,
  html[data-view="share"] .quota-dual button:hover {
    background: rgba(234, 240, 243, 0.09);
  }

  html[data-view="share"] .ink-rail {
    border-right-color: rgba(223, 233, 238, 0.15);
    background: linear-gradient(
      90deg,
      rgba(5, 20, 35, 0.95),
      rgba(9, 29, 48, 0.9)
    );
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.18);
  }

  html[data-view="share"] .ink-rail::after {
    background: linear-gradient(90deg, rgba(9, 29, 48, 0.86), transparent);
  }

  html[data-view="share"] .rail-link,
  html[data-view="share"] .rail-top {
    color: rgba(234, 240, 243, 0.72);
  }

  html[data-view="share"] .rail-link:hover {
    color: #fff;
    background: rgba(234, 240, 243, 0.08);
  }

  html[data-view="share"] .rail-link.is-active {
    color: #172535;
    background: rgba(249, 244, 230, 0.96);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.34),
      0 8px 24px rgba(0, 0, 0, 0.18);
  }

  html[data-view="share"] .rail-label {
    color: #172535;
    border-color: rgba(234, 240, 243, 0.22);
    background: rgba(247, 243, 233, 0.97);
  }
}