@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
  @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Geist:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,300..800;1,6..72,300..800&family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

  .mosica-wp-landing,
  .mosica-wp-landing * {
    box-sizing: border-box;
  }

  .mosica-wp-landing {
    --paper: color-mix(in srgb, var(--accent) 2.4%, #fbfaf6);
    --paper-2: color-mix(in srgb, var(--accent) 1.2%, #ffffff);
    --ink: #151711;
    --muted: #5b6158;
    --soft: #8b9287;
    --line: rgba(21, 23, 17, 0.12);
    /* Theme accent hub: Salient/Nectar colors first, plugin color as fallback. */
    --mosica-setting-accent: #2f7d4a;
    --accent: var(
      --mosica-shortcode-accent,
      var(
        --nectar-accent-color,
        var(
          --nectar-extra-color-1,
          var(
            --nectar-extra-color-2,
            var(--nectar-extra-color-3, var(--mosica-setting-accent))
          )
        )
      )
    );
    --accent-soft: color-mix(in srgb, var(--accent) 64%, #ffffff);
    --accent-deep: color-mix(in srgb, var(--accent) 78%, #000000);
    --green: var(--accent);
    --green-2: var(--accent-soft);
    --gold: #d7a93b;
    --rose: #d86b8a;
    --violet: #8b7bd8;
    --sky: #5d9ed9;
    --earth-land: #79ad69;
    --earth-land-deep: #3a8f68;
    --space: #090b10;
    --space-2: #11161d;
    --space-ink: #f5f1e6;
    --radius: 8px;
    --font-body: "Geist", "Noto Sans KR", "Pretendard", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
    --font-display: "Playfair Display", "Cormorant Garamond", serif;
    --font-brand: "Playfair Display", "Cormorant Garamond", serif;
    --font-mono: "JetBrains Mono", "Geist", ui-monospace, monospace;
    width: 100%;
    max-width: none;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01", "ss02";
  }

  .mosica-wp-landing.mosica-is-fullbleed {
    display: block;
    width: 100vw;
    max-width: 100vw;
    inline-size: 100vw;
    max-inline-size: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* Salient/Nectar page builders often leave a white content padding above shortcodes. */
  body:has(.mosica-wp-landing.mosica-is-fullbleed) #ajax-content-wrap .container-wrap {
    padding-top: 0 !important;
  }

  body:has(.mosica-wp-landing.mosica-is-fullbleed) #ajax-content-wrap .container-wrap > .container,
  body:has(.mosica-wp-landing.mosica-is-fullbleed) #ajax-content-wrap .container-wrap > .container.main-content,
  body:has(.mosica-wp-landing.mosica-is-fullbleed) .main-content > .row:has(.mosica-wp-landing.mosica-is-fullbleed),
  body:has(.mosica-wp-landing.mosica-is-fullbleed) .wpb_text_column:has(.mosica-wp-landing.mosica-is-fullbleed),
  body:has(.mosica-wp-landing.mosica-is-fullbleed) .wpb_wrapper:has(> .mosica-wp-landing.mosica-is-fullbleed),
  body:has(.mosica-wp-landing.mosica-is-fullbleed) .vc_column-inner:has(.mosica-wp-landing.mosica-is-fullbleed) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body:has(.mosica-wp-landing.mosica-is-fullbleed) .wpb_wrapper:has(> .mosica-wp-landing.mosica-is-fullbleed) > p:empty {
    display: none !important;
  }

  .mosica-wp-landing.mosica-is-boxed {
    width: 100%;
    max-width: 100%;
    inline-size: 100%;
    max-inline-size: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .mosica-wp-landing::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    background:
      radial-gradient(circle at 58% 42%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 36%),
      var(--space);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease, visibility 0s linear 0.12s;
  }

  .mosica-wp-landing.is-page-leaving::after {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.12s ease;
  }

  .mosica-wp-landing a {
    color: inherit;
    text-decoration: none;
  }

  .mosica-wp-landing button,
  .mosica-wp-landing input {
    font: inherit;
  }

  .mosica-wp-landing.is-tab-paused *,
  .mosica-wp-landing.is-tab-paused *::before,
  .mosica-wp-landing.is-tab-paused *::after {
    animation-play-state: paused !important;
  }

  .mosica-shell {
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto;
  }

  .mypd-langbar {
    position: relative;
    z-index: 12;
    border-top: 1px solid color-mix(in srgb, var(--accent) 10%, rgba(21, 23, 17, 0.08));
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 14%, rgba(21, 23, 17, 0.1));
    background: color-mix(in srgb, var(--accent) 2.4%, #fbfaf6);
    box-shadow: 0 10px 28px rgba(21, 23, 17, 0.035);
  }

  .mypd-langbar__inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 28px;
    padding-block: 14px;
  }

  .mypd-langbar__hint {
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--accent) 26%, #74776f);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.34em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mypd-langbar__chips {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .mypd-langbar__chips::-webkit-scrollbar {
    display: none;
  }

  .mypd-langbar__chip {
    flex: 0 0 auto;
    display: inline-flex;
  }

  .mypd-langbar__chip > a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 10%, rgba(21, 23, 17, 0.16));
    border-radius: 999px;
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.92),
        color-mix(in srgb, var(--accent) 1.6%, #f8f7f2));
    color: color-mix(in srgb, var(--accent) 22%, #676b66);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    padding: 5px 15px 5px 11px;
    white-space: nowrap;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      0 8px 22px rgba(21, 23, 17, 0.045);
    transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
    touch-action: manipulation;
  }

  .mypd-langbar__chip > a:hover,
  .mypd-langbar__chip > a:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 28%, rgba(21, 23, 17, 0.14));
    color: color-mix(in srgb, var(--accent) 58%, #252923);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      0 12px 28px color-mix(in srgb, var(--accent) 9%, rgba(21, 23, 17, 0.08));
  }

  .mypd-langbar__chip > a > .flag.size24 {
    flex: 0 0 auto;
    width: 24px;
    height: 18px;
    display: inline-block;
    pointer-events: none;
    border-radius: 2px;
    box-shadow:
      0 0 0 1px rgba(21, 23, 17, 0.12),
      0 2px 5px rgba(21, 23, 17, 0.1);
  }

  .mosica-hero {
    position: relative;
    min-height: clamp(560px, min(86svh, calc(100vw * 0.633333)), 780px);
    display: grid;
    align-items: center;
    background: var(--space);
    color: var(--space-ink);
    isolation: isolate;
  }

  .mosica-wp-landing.is-detail-open .mosica-hero {
    z-index: 80;
  }

  .mosica-wp-landing.is-detail-open .mosica-search-band.is-search-floating {
    z-index: 20;
  }

  .mosica-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
      radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 28%),
      radial-gradient(circle at 18% 76%, rgba(216, 107, 138, 0.13), transparent 28%),
      linear-gradient(135deg, #090b10 0%, #121418 58%, #08120d 100%);
  }

  .mosica-scene {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.92;
  }

  .mosica-system {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: auto;
  }

  .mosica-system .mosica-stars,
  .mosica-system .mosica-orbits,
  .mosica-system .mosica-center-planet,
  .mosica-system .mosica-dog-notes,
  .mosica-system > circle {
    pointer-events: none;
  }

  .mosica-mobile-constellation {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    width: 100%;
    height: 100%;
    pointer-events: auto;
  }

  .mosica-mobile-constellation .mobile-orbit {
    fill: none;
    stroke: rgba(245, 241, 230, 0.14);
    stroke-width: 1;
    stroke-dasharray: 4 10;
  }

  .mosica-mobile-constellation .mobile-line {
    fill: none;
    stroke: rgba(245, 241, 230, 0.34);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mosica-mobile-constellation .mobile-line.is-accent {
    stroke: color-mix(in srgb, var(--accent-soft) 62%, transparent);
  }

  .mosica-mobile-constellation .mobile-planet-link {
    fill: none;
    stroke: rgba(245, 241, 230, 0.12);
    stroke-width: 0.62;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.86;
    vector-effect: non-scaling-stroke;
  }

  .mosica-mobile-constellation .mobile-planet-link.is-accent {
    stroke: color-mix(in srgb, var(--accent-soft) 16%, transparent);
  }

  .mosica-mobile-constellation .mobile-node {
    fill: rgba(245, 241, 230, 0.78);
    filter: drop-shadow(0 0 8px rgba(245, 241, 230, 0.22));
  }

  .mosica-mobile-constellation .mobile-node.is-accent {
    fill: var(--accent-soft);
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-soft) 52%, transparent));
  }

  .mosica-mobile-constellation .mobile-node.is-core {
    fill: url(#mosicaMobileCore);
    filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 44%, transparent));
  }

  .mosica-mobile-constellation .mobile-main-planet {
    filter: drop-shadow(0 0 26px color-mix(in srgb, var(--accent) 48%, transparent));
  }

  .mosica-mobile-constellation .mobile-main-logo {
    opacity: 0.2;
    mix-blend-mode: multiply;
    filter: blur(0.08px) contrast(1.08);
    transform-box: fill-box;
    transform-origin: center;
    animation: mosica-mobile-main-spin 24s linear infinite;
  }

  @keyframes mosica-mobile-main-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .mosica-mobile-constellation .mobile-main-dog-orbit,
  .mosica-mobile-constellation .mobile-main-dog {
    pointer-events: none;
    cursor: pointer;
  }

  .mosica-mobile-constellation .mobile-main-dog,
  .mosica-mobile-constellation .mobile-main-dog * {
    cursor: pointer;
  }

  @media (hover: hover), (pointer: fine) {
    .mosica-mobile-constellation .mobile-main-dog-orbit,
    .mosica-mobile-constellation .mobile-main-dog {
      pointer-events: auto;
    }
  }

  .mosica-mobile-constellation .mobile-main-dog {
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.46));
  }

  .mosica-mobile-constellation .mobile-main-dog .mosica-dog-leg {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    animation: mosica-dog-step 0.26s ease-in-out infinite alternate;
  }

  .mosica-mobile-constellation .mobile-main-dog .mosica-dog-leg.is-back {
    animation-direction: alternate-reverse;
  }

  .mosica-mobile-constellation .mobile-label {
    fill: rgba(245, 241, 230, 0.58);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-anchor: middle;
    text-transform: uppercase;
  }

  .mosica-system .orbit {
    fill: none;
    stroke: rgba(245, 241, 230, 0.18);
    stroke-width: 1;
    stroke-dasharray: 4 8;
  }

  .mosica-system .mosica-star {
    animation: mosica-star-twinkle var(--star-duration, 4s) ease-in-out infinite;
    animation-delay: var(--star-delay, 0s);
    opacity: var(--star-opacity, 0.5);
    transform-origin: center;
  }

  .mosica-system .planet-node {
    cursor: pointer;
    pointer-events: auto;
  }

  .mosica-system .planet-halo {
    opacity: 0.28;
    transition: opacity 0.2s ease;
  }

  .mosica-system .planet-body {
    stroke: rgba(255, 255, 255, 0.72);
    stroke-width: 1.2;
    transition: r 0.2s ease, filter 0.2s ease;
  }

  .mosica-system .planet-label {
    fill: rgba(245, 241, 230, 0.82);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    pointer-events: none;
  }

  .mosica-center-logo {
    pointer-events: none;
    opacity: 0.18;
    mix-blend-mode: multiply;
    filter: blur(0.12px) contrast(1.08);
  }

  .mosica-center-planet {
    pointer-events: none;
    will-change: transform;
  }

  .mosica-center-dog-orbit {
    pointer-events: auto;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mosica-center-dog-orbit *,
  .mosica-center-dog,
  .mosica-center-dog * {
    cursor: pointer;
  }

  .mosica-center-dog-orbit:focus,
  .mosica-center-dog-orbit:focus-visible {
    outline: none;
  }

  .mosica-center-dog {
    pointer-events: auto;
  }

  .mosica-dog-notes {
    pointer-events: none;
  }

  .mosica-dog-hit {
    fill: #000000;
    fill-opacity: 0.001;
    stroke: none;
    pointer-events: all;
    cursor: pointer;
  }

  .mosica-bark-waves {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
  }

  .mosica-bark-wave {
    position: absolute;
    left: var(--bark-wave-x, 50%);
    top: var(--bark-wave-y, 50%);
    width: 20px;
    height: 20px;
    border: 0.55px solid rgba(245, 241, 230, 0.26);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(240, 195, 106, 0.08);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.04);
    animation: mosica-bark-wave var(--bark-wave-duration, 5.2s) linear forwards;
    animation-delay: var(--bark-wave-delay, 0ms);
    will-change: transform, opacity;
  }

  .mosica-bark-wave.is-second {
    border-color: rgba(240, 195, 106, 0.76);
  }

  .mosica-bark-wave.is-third {
    border-color: color-mix(in srgb, var(--accent-soft) 58%, transparent);
  }

  .mosica-center-dog .mosica-dog-leg {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    animation: mosica-dog-step 0.26s ease-in-out infinite alternate;
  }

  .mosica-center-dog .mosica-dog-leg.is-back {
    animation-direction: alternate-reverse;
  }

  .mosica-dog-note {
    font-family: var(--font-display);
    font-size: var(--note-size, 24px);
    fill: rgba(245, 241, 230, 0.94);
    filter: drop-shadow(0 0 7px rgba(240, 195, 106, 0.78)) drop-shadow(0 0 14px rgba(245, 241, 230, 0.34));
    transform-box: fill-box;
    transform-origin: center;
    animation: mosica-dog-note var(--note-duration, 3.25s) ease-out infinite;
    animation-delay: var(--note-delay, 0s);
    will-change: transform, opacity;
  }

  .mosica-system .planet-node:hover .planet-halo,
  .mosica-system .planet-node.is-active .planet-halo {
    opacity: 0.58;
  }

  .mosica-system .planet-node:hover .planet-body,
  .mosica-system .planet-node.is-active .planet-body {
    filter: drop-shadow(0 0 12px currentColor);
  }

  .mosica-html-planets {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: auto;
  }

  .mosica-planet-button {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(96px, var(--moon-orbit-size, 96px));
    height: max(96px, var(--moon-orbit-size, 96px));
    display: block;
    border: 0;
    background: transparent;
    color: var(--space-ink);
    padding: 0;
    transform: translate3d(var(--planet-x, 0px), var(--planet-y, 0px), 0) translate(-50%, -50%);
    backface-visibility: hidden;
    contain: layout style;
    will-change: transform;
    cursor: pointer;
    pointer-events: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.62);
  }

  .mosica-planet-button *,
  .mosica-planet-button *::before,
  .mosica-planet-button *::after {
    -webkit-tap-highlight-color: transparent;
  }

  @media (hover: hover) and (pointer: fine) {
    .mosica-planet-button:focus-visible {
      outline: 2px solid var(--green-2);
      outline-offset: 4px;
      border-radius: 999px;
    }
  }

  .mosica-planet-core {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: var(--planet-size, 34px);
    height: var(--planet-size, 34px);
    border-radius: 50%;
    background: transparent;
    box-shadow:
      0 0 calc(var(--planet-radius, 20px) * 1.25) color-mix(in srgb, var(--planet-color) 56%, transparent),
      0 10px 24px rgba(0, 0, 0, 0.3);
    overflow: visible;
    transform: translate(-50%, -50%);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    pointer-events: auto;
  }

  .mosica-planet-core::before {
    display: none;
  }

  .mosica-planet-button[data-category="piano"] .mosica-planet-core {
    box-shadow:
      0 0 calc(var(--planet-radius, 20px) * 0.9) rgba(245, 241, 230, 0.42),
      0 0 calc(var(--planet-radius, 20px) * 1.8) rgba(240, 195, 106, 0.34),
      0 0 calc(var(--planet-radius, 20px) * 3.1) rgba(240, 195, 106, 0.18),
      0 12px 28px rgba(0, 0, 0, 0.48);
  }

  .mosica-planet-button[data-category="piano"] .mosica-planet-core::before {
    content: "";
    position: absolute;
    inset: -64%;
    display: block;
    z-index: -1;
    border-radius: 50%;
    background:
      radial-gradient(circle,
        rgba(245, 241, 230, 0.26) 0 18%,
        rgba(240, 195, 106, 0.18) 34%,
        rgba(240, 195, 106, 0.08) 52%,
        transparent 72%);
    filter: blur(1px);
    opacity: 0.82;
    animation: mosica-piano-glow 2.8s ease-in-out infinite;
    pointer-events: none;
  }

  .mosica-planet-button[data-category="piano"] .mosica-planet-rings {
    opacity: 0.8;
    filter:
      drop-shadow(0 0 10px rgba(245, 241, 230, 0.42))
      drop-shadow(0 0 16px rgba(240, 195, 106, 0.3));
  }

  .mosica-planet-spin {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: 50%;
    overflow: hidden;
    background:
      radial-gradient(circle at 28% 26%,
        color-mix(in srgb, #ffffff 34%, var(--planet-color)) 0%,
        var(--planet-color) 42%,
        color-mix(in srgb, var(--planet-color) 74%, #050509) 100%);
    box-shadow:
      inset calc(var(--planet-radius, 20px) * -0.34) calc(var(--planet-radius, 20px) * -0.34) calc(var(--planet-radius, 20px) * 0.72) rgba(0, 0, 0, 0.24),
      inset calc(var(--planet-radius, 20px) * 0.22) calc(var(--planet-radius, 20px) * 0.2) calc(var(--planet-radius, 20px) * 0.42) rgba(255, 255, 255, 0.5);
    filter: brightness(1.12) saturate(1.18);
    transform: rotate(var(--planet-spin, 0rad));
    will-change: transform, filter;
  }

  .mosica-planet-spin::before,
  .mosica-planet-spin::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }

  .mosica-planet-spin::before {
    background:
      radial-gradient(ellipse 36% 16% at 30% 34%, rgba(255, 255, 255, 0.18), transparent 66%),
      radial-gradient(ellipse 34% 14% at 62% 72%, rgba(0, 0, 0, 0.18), transparent 62%),
      radial-gradient(circle at 64% 34%, rgba(255, 255, 255, 0.14) 0 6%, transparent 7%),
      radial-gradient(circle at 37% 68%, rgba(0, 0, 0, 0.12) 0 8%, transparent 9%);
    mix-blend-mode: screen;
    opacity: 0.56;
  }

  .mosica-planet-spin::after {
    background: radial-gradient(circle at 74% 78%, rgba(0, 0, 0, 0.3), transparent 54%);
    mix-blend-mode: multiply;
    opacity: 0.68;
  }

  .mosica-planet-button[data-category="mypage"] .mosica-planet-spin {
    background:
      radial-gradient(circle at 30% 24%, rgba(245, 241, 230, 0.36) 0%, transparent 24%),
      radial-gradient(circle at 52% 52%, #4fa2d5 0%, #2f80c4 48%, #17365f 100%);
    box-shadow:
      inset calc(var(--planet-radius, 20px) * -0.34) calc(var(--planet-radius, 20px) * -0.34) calc(var(--planet-radius, 20px) * 0.72) rgba(4, 13, 30, 0.34),
      inset calc(var(--planet-radius, 20px) * 0.18) calc(var(--planet-radius, 20px) * 0.16) calc(var(--planet-radius, 20px) * 0.4) rgba(245, 241, 230, 0.46);
    filter: brightness(1.1) saturate(1.18);
  }

  .mosica-planet-button[data-category="mypage"] .mosica-planet-spin::before {
    background:
      radial-gradient(ellipse 32% 18% at 30% 42%, color-mix(in srgb, var(--earth-land) 74%, transparent) 0 58%, transparent 62%),
      radial-gradient(ellipse 26% 15% at 67% 30%, color-mix(in srgb, var(--earth-land-deep) 68%, transparent) 0 56%, transparent 60%),
      radial-gradient(ellipse 30% 18% at 64% 74%, color-mix(in srgb, var(--earth-land) 58%, transparent) 0 54%, transparent 58%),
      radial-gradient(ellipse 52% 9% at 54% 58%, rgba(245, 241, 230, 0.32) 0 44%, transparent 50%),
      radial-gradient(ellipse 46% 7% at 40% 28%, rgba(255, 255, 255, 0.22) 0 42%, transparent 50%);
    mix-blend-mode: screen;
    opacity: 0.72;
  }

  .mosica-planet-button[data-category="mypage"] .mosica-planet-spin::after {
    background:
      radial-gradient(circle at 75% 78%, rgba(3, 10, 24, 0.42), transparent 56%),
      radial-gradient(circle at 50% 50%, transparent 58%, rgba(245, 241, 230, 0.22) 62%, transparent 68%);
    mix-blend-mode: multiply;
    opacity: 0.62;
  }

  .mosica-planet-button[data-category="mypage"] .mosica-moon-orbit {
    border-color: rgba(105, 169, 192, 0.48);
  }

  .mosica-planet-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: var(--planet-logo-size, 86%);
    height: var(--planet-logo-size, 86%);
    border-radius: 50%;
    background: var(--planet-logo-image) center / contain no-repeat;
    opacity: var(--planet-logo-opacity, 0.4);
    mix-blend-mode: var(--planet-logo-blend, multiply);
    filter: var(--planet-logo-filter, contrast(1.06));
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(var(--planet-spin, 0rad));
    transform-origin: center;
    clip-path: circle(50% at 50% 50%);
  }

  .mosica-planet-rings {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 182%;
    height: 62%;
    border-radius: 50%;
    opacity: 0.54;
    transform: translate(-50%, -50%) rotate(var(--planet-ring-angle, -13deg));
    transform-origin: center;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--planet-color) 48%, transparent));
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .mosica-planet-rings span {
    position: absolute;
    inset: 0;
    border: 2px solid color-mix(in srgb, var(--planet-color) 68%, transparent);
    border-left-color: color-mix(in srgb, var(--gold) 64%, transparent);
    border-right-color: color-mix(in srgb, #ffffff 48%, transparent);
    border-radius: 50%;
    box-shadow:
      0 0 10px color-mix(in srgb, var(--planet-color) 34%, transparent),
      inset 0 0 8px color-mix(in srgb, var(--gold) 18%, transparent);
    transform: rotate(var(--planet-spin, 0rad));
  }

  .mosica-planet-rings span:nth-child(2) {
    inset: 17% 6%;
    border-width: 1px;
    opacity: 0.72;
    transform: rotate(var(--planet-spin-alt, 0rad));
  }

  .mosica-planet-hit {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 7;
    width: max(38px, calc(var(--planet-size, 34px) * 1.1));
    height: max(38px, calc(var(--planet-size, 34px) * 1.1));
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }

  .mosica-moon-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: var(--moon-orbit-size, calc(var(--planet-size, 34px) * 2.28));
    height: var(--moon-orbit-size, calc(var(--planet-size, 34px) * 2.28));
    border: 1px dashed color-mix(in srgb, var(--planet-color) 34%, transparent);
    border-radius: 50%;
    opacity: 0.44;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .mosica-planet-moon {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: var(--moon-size, 8px);
    height: var(--moon-size, 8px);
    border-radius: 50%;
    background:
      radial-gradient(circle at 35% 35%,
        color-mix(in srgb, #ffffff 52%, var(--moon-color, var(--planet-color))),
        var(--moon-color, var(--planet-color)) 54%,
        color-mix(in srgb, var(--moon-color, var(--planet-color)) 46%, #020205) 100%);
    box-shadow:
      0 0 12px color-mix(in srgb, var(--moon-color, var(--planet-color)) 82%, transparent),
      inset -2px -2px 5px rgba(0, 0, 0, 0.36),
      inset 2px 2px 4px rgba(255, 255, 255, 0.34);
    transform: translate3d(var(--moon-push-x, 0px), var(--moon-push-y, 0px), 0) translate(-50%, -50%) rotate(var(--moon-current-angle, var(--moon-angle, 0deg))) translateX(var(--moon-radius, 40px));
    transform-origin: 0 0;
    will-change: transform;
    pointer-events: auto;
  }

  .mosica-planet-moon.is-decorative {
    z-index: 2;
    opacity: 0.72;
    filter: saturate(0.9);
    pointer-events: none;
  }

  .mosica-planet-label {
    position: absolute;
    left: 50%;
    top: calc(50% + (var(--planet-size, 34px) / 2) + 6px);
    z-index: 5;
    max-width: 130px;
    color: var(--planet-label-color, var(--planet-color));
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 0 6px color-mix(in srgb, var(--planet-label-color, var(--planet-color)) 54%, transparent);
    transform: translate3d(-50%, 0, 0);
    pointer-events: auto;
  }

  .mosica-planet-button:hover .mosica-planet-core {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow:
      0 0 calc(var(--planet-radius, 20px) * 1.4) color-mix(in srgb, var(--planet-color) 86%, transparent),
      0 0 calc(var(--planet-radius, 20px) * 2.4) color-mix(in srgb, var(--planet-color) 42%, transparent),
      0 12px 28px rgba(0, 0, 0, 0.34);
  }

  .mosica-planet-button.is-wave-hit .mosica-planet-core {
    filter: brightness(1.36) saturate(1.25);
    box-shadow:
      0 0 calc(var(--planet-radius, 20px) * 1.7) rgba(245, 241, 230, 0.72),
      0 0 calc(var(--planet-radius, 20px) * 2.7) color-mix(in srgb, var(--planet-color) 58%, transparent),
      0 12px 28px rgba(0, 0, 0, 0.34);
  }

  .mosica-planet-button[data-category="piano"]:hover .mosica-planet-core,
  .mosica-planet-button[data-category="piano"].is-active .mosica-planet-core {
    box-shadow:
      0 0 calc(var(--planet-radius, 20px) * 1.2) rgba(245, 241, 230, 0.6),
      0 0 calc(var(--planet-radius, 20px) * 2.3) rgba(240, 195, 106, 0.48),
      0 0 calc(var(--planet-radius, 20px) * 3.7) rgba(240, 195, 106, 0.25),
      0 14px 32px rgba(0, 0, 0, 0.5);
  }

  .mosica-planet-button:hover .mosica-planet-spin,
  .mosica-planet-button.is-active .mosica-planet-spin {
    filter: brightness(1.15) saturate(1.2);
  }

  .mosica-planet-button:hover .mosica-planet-rings,
  .mosica-planet-button.is-active .mosica-planet-rings {
    opacity: 0.86;
  }

  .mosica-planet-button.is-dragging {
    z-index: 8;
    cursor: grabbing;
  }

  .mosica-planet-button.is-active .mosica-moon-orbit,
  .mosica-planet-button:hover .mosica-moon-orbit {
    opacity: 0.72;
  }

  @keyframes mosica-mobile-planet-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes mosica-mobile-logo-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }

  @keyframes mosica-mobile-ring-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes mosica-mobile-ring-spin-reverse {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
  }

  @keyframes mosica-mobile-moon-orbit {
    from {
      transform: translate3d(var(--moon-push-x, 0px), var(--moon-push-y, 0px), 0) translate(-50%, -50%) rotate(var(--moon-angle, 0deg)) translateX(var(--moon-radius, 40px));
    }
    to {
      transform: translate3d(var(--moon-push-x, 0px), var(--moon-push-y, 0px), 0) translate(-50%, -50%) rotate(calc(var(--moon-angle, 0deg) + 360deg)) translateX(var(--moon-radius, 40px));
    }
  }

  .mosica-collision-particles {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
  }

  .mosica-collision-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--particle-size, 4px);
    height: var(--particle-size, 4px);
    border-radius: 50%;
    background: var(--particle-color, #f0c36a);
    box-shadow:
      0 0 8px var(--particle-color, #f0c36a),
      0 0 16px color-mix(in srgb, var(--particle-color, #f0c36a) 58%, transparent);
    transform: translate3d(var(--particle-start-x), var(--particle-start-y), 0) scale(1);
    animation: mosica-particle-burst 680ms ease-out forwards;
    will-change: transform, opacity;
  }

  @keyframes mosica-particle-burst {
    0% {
      opacity: 0.95;
      transform: translate3d(var(--particle-start-x), var(--particle-start-y), 0) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate3d(var(--particle-end-x), var(--particle-end-y), 0) scale(0.18);
    }
  }

  @keyframes mosica-piano-glow {
    0%, 100% {
      opacity: 0.58;
      transform: scale(0.92);
    }
    50% {
      opacity: 0.96;
      transform: scale(1.08);
    }
  }

  @keyframes mosica-dog-bob {
    0%, 100% {
      transform: translate(765px, 334.2px) scale(0.58) translateY(0.18px);
    }
    50% {
      transform: translate(765px, 334.2px) scale(0.58) translateY(0.62px);
    }
  }

  @keyframes mosica-dog-step {
    from {
      transform: rotate(-16deg);
    }
    to {
      transform: rotate(18deg);
    }
  }

  @keyframes mosica-dog-note {
    0% {
      opacity: 0;
      transform: translate(var(--note-start-x, 0px), var(--note-start-y, 0px)) scale(0.58) rotate(var(--note-rotate, 0deg));
    }
    12% {
      opacity: 0.96;
    }
    48% {
      opacity: 0.82;
      transform: translate(var(--note-mid-x, -14px), var(--note-mid-y, -8px)) scale(1.02) rotate(var(--note-mid-rotate, 5deg));
    }
    78% {
      opacity: 0.52;
    }
    100% {
      opacity: 0;
      transform: translate(var(--note-end-x, -34px), var(--note-end-y, -18px)) scale(1.38) rotate(var(--note-end-rotate, 12deg));
    }
  }

  @keyframes mosica-bark-wave {
    0% {
      opacity: 0.28;
      transform: translate(-50%, -50%) scale(0.04);
    }
    68% {
      opacity: 0.18;
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(var(--bark-wave-scale, 80));
    }
  }

  @keyframes mosica-moon-orbit {
    from { transform: translate(-50%, -50%) rotate(var(--moon-current-angle, var(--moon-angle, 0deg))) translateX(var(--moon-radius, 40px)); }
    to { transform: translate(-50%, -50%) rotate(var(--moon-current-angle, var(--moon-angle, 0deg))) translateX(var(--moon-radius, 40px)); }
  }

  .mosica-shooting {
    position: absolute;
    z-index: 1;
    width: 130px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--accent-soft) 46%, transparent), transparent);
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
  }

  .mosica-shooting::after {
    content: "";
    position: absolute;
    right: 0;
    top: -1.5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 8px #ffffff, 0 0 16px var(--green-2);
  }

  .mosica-shooting.one {
    animation: mosica-shoot-one 12s linear infinite;
    animation-delay: 1.4s;
  }

  .mosica-shooting.two {
    animation: mosica-shoot-two 14s linear infinite;
    animation-delay: 5s;
  }

  .mosica-shooting.three {
    animation: mosica-shoot-three 17s linear infinite;
    animation-delay: 8s;
  }

  @keyframes mosica-star-twinkle {
    0%,
    100% {
      opacity: calc(var(--star-opacity, 0.5) * 0.46);
      transform: scale(0.82);
    }
    48% {
      opacity: var(--star-opacity, 0.5);
      transform: scale(1.16);
    }
  }

  @keyframes mosica-shoot-one {
    0% { transform: translate(-160px, 96px) rotate(20deg); opacity: 0; }
    5% { opacity: 1; }
    24% { transform: translate(980px, 316px) rotate(20deg); opacity: 0; }
    100% { opacity: 0; }
  }

  @keyframes mosica-shoot-two {
    0%,
    100% { transform: translate(1240px, 80px) rotate(160deg); opacity: 0; }
    42% { opacity: 0; }
    47% { opacity: 0.95; }
    68% { transform: translate(160px, 348px) rotate(160deg); opacity: 0; }
  }

  @keyframes mosica-shoot-three {
    0%,
    100% { transform: translate(340px, -46px) rotate(72deg); opacity: 0; }
    74% { opacity: 0; }
    79% { opacity: 0.88; }
    95% { transform: translate(690px, 620px) rotate(72deg); opacity: 0; }
  }

  .mosica-hero-copy {
    position: relative;
    z-index: 3;
    max-width: 680px;
    padding: 88px 0 64px;
    text-shadow: 0 8px 30px rgba(0, 0, 0, 0.62);
    pointer-events: none;
  }

  .mosica-hero-copy a,
  .mosica-hero-copy button {
    pointer-events: auto;
  }

  .mosica-kicker {
    margin: 0 0 18px;
    color: var(--accent-soft);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .mosica-hero h1 {
    margin: 0;
    font-family: var(--font-brand);
    font-size: clamp(50px, 9vw, 126px);
    font-weight: 500;
    font-style: italic;
    line-height: 0.94;
    letter-spacing: 0;
  }

  .mosica-hero h1 span {
    color: var(--accent-soft);
    font-style: italic;
    font-weight: 500;
  }

  .mosica-hero-sub {
    max-width: 560px;
    margin: 24px 0 0;
    color: rgba(245, 241, 230, 0.76);
    font-size: clamp(16px, 1.6vw, 20px);
    word-break: keep-all;
  }

  .mosica-mobile-brief {
    display: none;
  }

  .mosica-actions {
    --mosica-action-radius: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
  }

  .mosica-btn {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1px solid rgba(245, 241, 230, 0.34);
    border-radius: var(--mosica-action-radius) !important;
    padding: 11px 18px;
    background: rgba(9, 11, 16, 0.48);
    color: var(--space-ink);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.035),
      0 14px 34px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    overflow: hidden;
    clip-path: inset(0 round var(--mosica-action-radius));
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }

  .mosica-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent-soft) 70%, rgba(245, 241, 230, 0.38));
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.055),
      0 18px 44px rgba(0, 0, 0, 0.24),
      0 0 26px color-mix(in srgb, var(--accent-soft) 16%, transparent);
  }

  .mosica-btn.primary {
    border-radius: var(--mosica-action-radius) !important;
    border-color: var(--accent-soft);
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, #101217), color-mix(in srgb, var(--accent-soft) 48%, rgba(9, 11, 16, 0.72)));
    color: #ffffff;
  }

  .mosica-btn.primary[data-search-trigger] {
    border-radius: var(--mosica-action-radius) !important;
    border-color: color-mix(in srgb, var(--accent-soft) 68%, rgba(255, 255, 255, 0.26));
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 82%, #111318), color-mix(in srgb, var(--accent-soft) 42%, #0b0e10));
    color: #ffffff;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent),
      0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
      0 14px 34px color-mix(in srgb, var(--accent) 24%, transparent);
  }

  .mosica-btn.ghost {
    border-radius: var(--mosica-action-radius) !important;
    color: var(--space-ink);
    border-color: rgba(245, 241, 230, 0.36);
    background: rgba(245, 241, 230, 0.055);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.035),
      0 14px 34px rgba(0, 0, 0, 0.18);
  }

  .mosica-constellation-detail {
    --detail-readable: color-mix(in srgb, var(--detail-color, var(--green-2)) 34%, #ffffff);
    position: absolute;
    right: max(18px, calc((100vw - 1180px) / 2));
    bottom: 38px;
    z-index: 6;
    width: min(342px, calc(100% - 36px));
    max-height: calc(100% - 60px);
    border: 1px solid color-mix(in srgb, var(--detail-color, var(--green-2)) 62%, rgba(255, 255, 255, 0.18));
    border-radius: var(--radius);
    background: rgba(14, 8, 18, 0.92);
    backdrop-filter: blur(16px);
    color: #ffffff;
    padding: 18px 22px 18px;
    overscroll-behavior: contain;
    box-shadow:
      0 0 40px color-mix(in srgb, var(--detail-color, var(--green-2)) 24%, transparent),
      inset 0 0 24px rgba(255, 255, 255, 0.05);
    animation: mosica-detail-in 0.22s ease-out;
  }

  .mosica-constellation-detail[hidden] {
    display: none;
  }

  .mosica-detail-close {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.52);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  .mosica-detail-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }

  .mosica-detail-eyebrow {
    margin: 0;
    color: var(--detail-readable);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .mosica-detail-title {
    margin: 6px 0 0;
    color: var(--detail-readable);
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-shadow: 0 0 10px color-mix(in srgb, var(--detail-readable) 42%, transparent);
    word-break: keep-all;
  }

  .mosica-detail-title a {
    border-bottom: 1px dashed color-mix(in srgb, var(--detail-readable) 42%, transparent);
    padding-bottom: 1px;
  }

  .mosica-detail-title span {
    margin-left: 8px;
    opacity: 0.56;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
  }

  .mosica-detail-copy {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    word-break: keep-all;
  }

  .mosica-detail-line {
    height: 1px;
    margin: 10px 0 12px;
    background: rgba(255, 255, 255, 0.15);
  }

  .mosica-detail-stats {
    display: none;
    gap: 16px;
    margin-bottom: 14px;
  }

  .mosica-detail-stat-label {
    display: block;
    color: rgba(255, 255, 255, 0.52);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .mosica-detail-stat-value {
    display: block;
    margin-top: 3px;
    color: var(--detail-readable);
    font-family: var(--font-display);
    font-size: 23px;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0;
  }

  .mosica-detail-list {
    display: grid;
    align-content: start;
    gap: 0;
    max-height: 330px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: color-mix(in srgb, var(--detail-color, var(--green-2)) 68%, rgba(245, 241, 230, 0.72)) rgba(245, 241, 230, 0.1);
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px 0 -8px;
    padding: 0 14px 10px 8px;
  }

  .mosica-detail-list::-webkit-scrollbar {
    width: 10px;
  }

  .mosica-detail-list::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(245, 241, 230, 0.08);
    box-shadow: inset 0 0 0 1px rgba(245, 241, 230, 0.07);
  }

  .mosica-detail-list::-webkit-scrollbar-thumb {
    min-height: 48px;
    border: 2px solid rgba(14, 8, 18, 0.82);
    border-radius: 999px;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--detail-readable) 82%, #ffffff),
        color-mix(in srgb, var(--detail-color, var(--green-2)) 76%, rgba(245, 241, 230, 0.55)));
    box-shadow:
      0 0 14px color-mix(in srgb, var(--detail-color, var(--green-2)) 36%, transparent),
      inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  }

  .mosica-constellation-detail.is-detail-scrollable {
    padding-bottom: 34px;
  }

  .mosica-constellation-detail.is-detail-scrollable::after {
    content: "아래로 더 보기";
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 48px;
    padding-bottom: 8px;
    background:
      linear-gradient(0deg,
        rgba(14, 8, 18, 0.98) 0%,
        rgba(14, 8, 18, 0.82) 46%,
        rgba(14, 8, 18, 0) 100%);
    color: color-mix(in srgb, var(--detail-readable) 82%, rgba(255, 255, 255, 0.72));
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    pointer-events: none;
    text-shadow: 0 0 14px color-mix(in srgb, var(--detail-color, var(--green-2)) 54%, transparent);
    opacity: 0.95;
    transition: opacity 0.18s ease;
  }

  .mosica-constellation-detail.is-detail-scrollable.is-detail-at-bottom::after {
    opacity: 0;
  }

  .mosica-detail-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 9px 0;
  }

  .mosica-constellation-detail.is-detail-opening .mosica-detail-row {
    pointer-events: none;
  }

  .mosica-detail-row:last-child {
    border-bottom: 0;
  }

  .mosica-detail-coming-soon {
    margin-top: 12px;
    border: 1px dashed color-mix(in srgb, var(--detail-readable) 34%, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    padding: 13px 14px;
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--detail-color, var(--green-2)) 14%, rgba(255, 255, 255, 0.035)),
        rgba(255, 255, 255, 0.025));
    color: color-mix(in srgb, var(--detail-readable) 78%, rgba(255, 255, 255, 0.72));
  }

  .mosica-detail-coming-soon span {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
  }

  .mosica-detail-coming-soon small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.54);
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.45;
  }

  .mosica-detail-num {
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .mosica-detail-row-title {
    overflow: hidden;
    color: #ffffff;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mosica-detail-bar {
    height: 3px;
    margin-top: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
  }

  .mosica-detail-bar span {
    display: block;
    width: var(--bar-width, 60%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--detail-readable), var(--gold));
    box-shadow: 0 0 10px var(--detail-readable);
  }

  .mosica-detail-go {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--detail-readable) 52%, rgba(255, 255, 255, 0.2));
    border-radius: 10px;
    color: var(--detail-readable);
    background:
      linear-gradient(145deg, rgba(245, 241, 230, 0.065), rgba(245, 241, 230, 0.018));
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.035),
      0 0 18px color-mix(in srgb, var(--detail-color, var(--green-2)) 12%, transparent);
    font-size: 20px;
  }

  .mosica-detail-go:hover {
    background: color-mix(in srgb, var(--detail-color, var(--green-2)) 16%, rgba(255, 255, 255, 0.04));
  }

  .mosica-hero-hint {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 4;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(245, 241, 230, 0.13);
    border-radius: 999px;
    background: rgba(9, 11, 16, 0.54);
    color: rgba(245, 241, 230, 0.66);
    backdrop-filter: blur(10px);
    padding: 6px 7px 6px 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  .mosica-sound-toggle {
    min-height: 24px;
    border: 1px solid rgba(245, 241, 230, 0.18);
    border-radius: 8px;
    background: rgba(245, 241, 230, 0.08);
    color: rgba(245, 241, 230, 0.78);
    padding: 0 9px;
    font: inherit;
    font-size: 9px;
    letter-spacing: 0;
    cursor: pointer;
  }

  .mosica-sound-toggle:hover,
  .mosica-sound-toggle:focus-visible {
    background: rgba(240, 195, 106, 0.18);
    color: var(--space-ink);
    outline: none;
  }

  .mosica-sound-toggle[aria-pressed="true"] {
    border-color: rgba(240, 195, 106, 0.38);
    color: var(--gold);
  }

  @keyframes mosica-detail-in {
    from {
      opacity: 0;
      transform: translateX(8px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .mosica-search-band {
    padding: 26px 0 0;
    background: var(--paper);
  }

  .mosica-search-band.is-search-floating {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 40;
    width: min(720px, calc(100% - 32px));
    padding: 0;
    background: transparent;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .mosica-search-band.is-search-floating .mosica-shell {
    width: 100%;
  }

  .mosica-search-box {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-2);
    padding: 10px;
    box-shadow: 0 18px 50px rgba(21, 23, 17, 0.06);
    isolation: isolate;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }

  .mosica-search-box > * {
    position: relative;
    z-index: 1;
  }

  .mosica-search-box::before,
  .mosica-search-box::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0;
  }

  .mosica-search-box::before {
    inset: -8px;
    z-index: -1;
    border: 1px solid color-mix(in srgb, var(--accent-soft) 62%, transparent);
    border-radius: calc(var(--radius) + 8px);
    background:
      radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--accent-soft) 28%, transparent), transparent 42%),
      color-mix(in srgb, var(--accent-soft) 10%, transparent);
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--accent-soft) 12%, transparent),
      0 0 42px color-mix(in srgb, var(--accent-soft) 34%, transparent);
    transform: scale(0.985);
  }

  .mosica-search-box::after {
    inset: -16px;
    z-index: -2;
    border: 1.5px solid rgba(240, 195, 106, 0.78);
    border-radius: calc(var(--radius) + 16px);
    box-shadow: 0 0 42px rgba(240, 195, 106, 0.22);
    transform: scale(0.96);
  }

  .mosica-search-band.is-search-floating .mosica-search-box {
    pointer-events: auto;
    border-color: color-mix(in srgb, var(--green-2) 58%, rgba(255, 255, 255, 0.22));
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent-soft) 16%, transparent),
      0 18px 58px rgba(0, 0, 0, 0.24),
      0 0 34px color-mix(in srgb, var(--accent-soft) 20%, transparent);
    backdrop-filter: blur(12px);
  }

  .mosica-search-band.is-search-cue .mosica-search-box {
    animation: mosica-search-cue 560ms cubic-bezier(0.22, 0.82, 0.28, 1) both;
  }

  .mosica-search-band.is-search-cue .mosica-search-box::before {
    animation: mosica-search-glow 1.45s ease both;
  }

  .mosica-search-band.is-search-repeat .mosica-search-box::after {
    animation: mosica-search-ring 720ms ease-out both;
  }

  @keyframes mosica-search-cue {
    0% {
      border-color: var(--line);
      box-shadow: 0 18px 50px rgba(21, 23, 17, 0.06);
      transform: translateX(0);
    }
    20% {
      border-color: var(--green-2);
      box-shadow:
        0 0 0 7px color-mix(in srgb, var(--accent-soft) 18%, transparent),
        0 22px 64px color-mix(in srgb, var(--accent) 26%, transparent);
      transform: translateX(-4px);
    }
    42% {
      transform: translateX(3px);
    }
    64% {
      transform: translateX(-2px);
    }
    82% {
      transform: translateX(1px);
    }
    100% {
      border-color: color-mix(in srgb, var(--green-2) 72%, var(--line));
      box-shadow:
        0 0 0 5px color-mix(in srgb, var(--accent-soft) 12%, transparent),
        0 18px 58px color-mix(in srgb, var(--accent) 18%, transparent),
        0 0 34px color-mix(in srgb, var(--accent-soft) 18%, transparent);
      transform: translateX(0);
    }
  }

  @keyframes mosica-search-glow {
    0% {
      opacity: 0;
      transform: scale(0.985);
    }
    22% {
      opacity: 1;
      transform: scale(1.015);
    }
    100% {
      opacity: 0.72;
      transform: scale(1);
    }
  }

  @keyframes mosica-search-ring {
    0% {
      opacity: 0.9;
      transform: scale(0.96);
    }
    100% {
      opacity: 0;
      transform: scale(1.08);
    }
  }

  .mosica-search-box input[type="search"] {
    width: 100%;
    min-height: 48px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    padding: 0 12px;
    font-size: 16px;
  }

  .mosica-search-box button {
    min-width: 118px;
    min-height: 48px;
    border: 1px solid color-mix(in srgb, var(--accent-soft) 54%, rgba(255, 255, 255, 0.26));
    border-radius: 10px;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 84%, #101217), color-mix(in srgb, var(--accent-soft) 38%, #0c1010));
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, #ffffff 7%, transparent),
      0 8px 22px color-mix(in srgb, var(--accent) 22%, transparent);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  }

  .mosica-search-box button:hover,
  .mosica-search-box button:focus-visible {
    border-color: color-mix(in srgb, var(--accent-soft) 72%, rgba(255, 255, 255, 0.36));
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent-deep) 82%, #111318), color-mix(in srgb, var(--accent-soft) 42%, #0c1010));
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, #ffffff 9%, transparent),
      0 10px 28px color-mix(in srgb, var(--accent) 30%, transparent),
      0 0 24px color-mix(in srgb, var(--accent-soft) 18%, transparent);
    outline: none;
    transform: translateY(-1px);
  }

  .mosica-search-box button:disabled {
    cursor: progress;
    opacity: 0.72;
    transform: none;
  }

  .mosica-section {
    padding: 72px 0;
  }

  .mosica-section.alt {
    background:
      radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 34%),
      color-mix(in srgb, var(--accent) 4.2%, #fbfaf6);
  }

  .mosica-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
  }

  .mosica-section-kicker {
    margin: 0 0 8px;
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .mosica-section h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 500;
    font-style: italic;
    line-height: 1.05;
    letter-spacing: 0;
    word-break: keep-all;
  }

  .mosica-section h2 em {
    color: var(--green);
    font-style: italic;
    font-weight: 500;
  }

  .mosica-section-note {
    max-width: 330px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    word-break: keep-all;
  }

  .mosica-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--line);
    gap: 1px;
  }

  .mosica-card {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--paper-2);
    padding: 24px;
    color: var(--ink);
    transition: background 0.18s ease, transform 0.18s ease;
  }

  .mosica-card:hover {
    background: color-mix(in srgb, var(--accent) 3.4%, #ffffff);
  }

  .mosica-card.is-placeholder {
    cursor: default;
    background:
      radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--accent-soft) 16%, transparent), transparent 34%),
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent) 2.6%, #ffffff) 0%,
        color-mix(in srgb, var(--accent) 6%, #fbfaf6) 100%
      );
  }

  .mosica-card.is-placeholder:hover {
    background:
      radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--accent-soft) 18%, transparent), transparent 34%),
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent) 3.2%, #ffffff) 0%,
        color-mix(in srgb, var(--accent) 7%, #fbfaf6) 100%
      );
  }

  .mosica-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .mosica-card-no {
    color: var(--soft);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .mosica-card-dot {
    position: relative;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 50%;
    background:
      radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.72), transparent 24%),
      radial-gradient(circle at 68% 74%, rgba(0, 0, 0, 0.28), transparent 54%),
      color-mix(in srgb, var(--planet-color) 82%, #ffffff);
    box-shadow:
      inset -10px -12px 18px rgba(0, 0, 0, 0.24),
      inset 7px 7px 14px rgba(255, 255, 255, 0.28),
      0 0 0 7px color-mix(in srgb, var(--planet-color) 12%, transparent),
      0 12px 26px rgba(21, 23, 17, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .mosica-card-dot::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: var(--card-logo-image, none) center / contain no-repeat;
    opacity: var(--card-logo-opacity, 0.42);
    mix-blend-mode: var(--card-logo-blend, multiply);
    filter: var(--card-logo-filter, contrast(1.08));
    transform: rotate(var(--card-spin-start, -8deg));
    transform-origin: center;
    animation: mosica-card-logo-spin var(--card-spin-duration, 18s) linear infinite;
    animation-direction: var(--card-spin-direction, normal);
    transition: opacity 0.2s ease, filter 0.2s ease;
    clip-path: circle(50% at 50% 50%);
  }

  @keyframes mosica-card-logo-spin {
    from {
      transform: rotate(var(--card-spin-start, -8deg));
    }
    to {
      transform: rotate(calc(var(--card-spin-start, -8deg) + 360deg));
    }
  }

  .mosica-card-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 23px;
    border: 1.4px solid color-mix(in srgb, var(--planet-color) 46%, rgba(21, 23, 17, 0.2));
    border-radius: 50%;
    opacity: 0.58;
    transform: translate(-50%, -50%) rotate(var(--card-ring-angle, -12deg));
  }

  .mosica-card:not(.has-ring) .mosica-card-dot::after {
    display: none;
  }

  .mosica-card.is-placeholder .mosica-card-dot {
    background:
      radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.82), transparent 28%),
      radial-gradient(circle at 58% 62%, color-mix(in srgb, var(--accent-soft) 34%, transparent), transparent 40%),
      color-mix(in srgb, var(--accent) 12%, #deded5);
    box-shadow:
      inset -9px -12px 18px rgba(21, 23, 17, 0.16),
      inset 7px 7px 14px rgba(255, 255, 255, 0.5),
      0 0 0 7px color-mix(in srgb, var(--accent-soft) 8%, transparent),
      0 12px 26px rgba(21, 23, 17, 0.08);
  }

  .mosica-card.is-placeholder .mosica-card-dot::before {
    inset: 13px;
    background:
      linear-gradient(90deg, transparent 46%, color-mix(in srgb, var(--accent) 54%, transparent) 47% 53%, transparent 54%),
      linear-gradient(0deg, transparent 46%, color-mix(in srgb, var(--accent) 34%, transparent) 47% 53%, transparent 54%),
      radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 42%, transparent) 0 28%, transparent 30%);
    opacity: 0.58;
    mix-blend-mode: multiply;
  }

  .mosica-card:hover .mosica-card-dot {
    transform: translateY(-2px) scale(1.04);
    box-shadow:
      inset -10px -12px 18px rgba(0, 0, 0, 0.24),
      inset 7px 7px 14px rgba(255, 255, 255, 0.28),
      0 0 0 8px color-mix(in srgb, var(--planet-color) 16%, transparent),
      0 16px 30px rgba(21, 23, 17, 0.16);
  }

  .mosica-card:hover .mosica-card-dot::before {
    opacity: var(--card-logo-hover-opacity, 0.58);
    filter: var(--card-logo-hover-filter, var(--card-logo-filter, contrast(1.14)));
  }

  .mosica-card h3 {
    margin: 8px 0 0;
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0;
  }

  .mosica-card h3 span {
    margin-left: 8px;
    color: var(--soft);
    font-size: 17px;
    font-style: italic;
    font-weight: 400;
  }

  .mosica-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    word-break: keep-all;
  }

  .mosica-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .mosica-feature-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .mosica-feature {
    border-top: 1.5px solid var(--ink);
    padding-top: 18px;
  }

  .mosica-feature strong {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0;
  }

  .mosica-feature p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    word-break: keep-all;
  }

  .mosica-feature-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  .mosica-feature-actions a,
  .mosica-feature-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--green) 32%, var(--line));
    border-radius: 8px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.84), color-mix(in srgb, var(--accent-soft) 8%, #ffffff));
    color: var(--green);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.62),
      0 8px 20px rgba(21, 23, 17, 0.055);
    font-size: 12.5px;
    font-weight: 900;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  }

  .mosica-feature-actions a:hover,
  .mosica-feature-actions button:hover {
    transform: translateY(-1px);
    border-color: var(--green);
    background:
      linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--accent-soft) 14%, #ffffff));
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.72),
      0 10px 24px color-mix(in srgb, var(--accent) 12%, transparent);
  }

  .mosica-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
    gap: 18px;
    align-items: stretch;
  }

  .mosica-faq {
    display: grid;
    gap: 10px;
  }

  .mosica-faq details {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-2);
    padding: 16px 18px;
  }

  .mosica-faq summary {
    cursor: pointer;
    color: var(--ink);
    font-weight: 900;
  }

  .mosica-faq p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 14px;
    word-break: keep-all;
  }

  .mosica-faq-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }

  .mosica-faq-links a,
  .mosica-faq-links button {
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line));
    border-radius: 8px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--accent-soft) 7%, #ffffff));
    color: var(--ink);
    padding: 7px 11px;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.64),
      0 8px 20px rgba(21, 23, 17, 0.045);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  }

  .mosica-faq-links a:hover,
  .mosica-faq-links button:hover {
    border-color: color-mix(in srgb, var(--green) 48%, var(--line));
    color: var(--green);
    transform: translateY(-1px);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.72),
      0 10px 24px color-mix(in srgb, var(--accent) 12%, transparent);
  }

  .mosica-contact {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background:
      radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent-soft) 14%, transparent), transparent 30%),
      radial-gradient(circle at 18% 84%, rgba(93, 158, 217, 0.12), transparent 34%),
      linear-gradient(145deg, #080a0f 0%, #101319 58%, #07090d 100%);
    color: var(--space-ink);
    padding: 24px;
  }

  .mosica-contact::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background:
      radial-gradient(circle at 18% 38%, color-mix(in srgb, var(--accent-soft) 16%, transparent), transparent 36%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 44%);
    pointer-events: none;
  }

  .mosica-contact::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
      radial-gradient(circle at 18px 24px, rgba(245, 241, 230, 0.46) 0 1px, transparent 1.6px),
      radial-gradient(circle at 92px 76px, rgba(245, 241, 230, 0.24) 0 1.2px, transparent 1.8px),
      radial-gradient(circle at 134px 42px, color-mix(in srgb, var(--accent-soft) 34%, transparent) 0 1px, transparent 1.7px);
    background-position: 0 0, 22px 18px, 44px 8px;
    background-size: 150px 132px, 216px 178px, 264px 222px;
    opacity: 0.4;
    pointer-events: none;
  }

  .mosica-contact.is-compact {
    min-height: 100%;
    align-self: stretch;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    align-content: center;
    gap: 20px;
    padding: 22px 24px;
  }

  .mosica-contact-logo {
    position: relative;
    z-index: 1;
    width: 68px;
    height: 68px;
    margin: 0 0 16px;
    border-radius: 50%;
    background: var(--paper) url("../support-center-logo.png") center / 68% auto no-repeat;
    box-shadow: 0 0 22px rgba(240, 195, 106, 0.18), inset 0 0 0 1px rgba(26, 26, 22, 0.08);
  }

  .mosica-contact.is-compact .mosica-contact-logo {
    position: relative;
    z-index: 1;
    width: 68px;
    height: 68px;
    margin: 0;
    grid-row: 1 / span 2;
  }

  .mosica-contact h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 500;
    font-style: italic;
  }

  .mosica-contact.is-compact h3 {
    position: relative;
    z-index: 1;
    grid-column: 2;
    margin: 0 0 8px;
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1;
  }

  .mosica-contact p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgba(245, 241, 230, 0.7);
    word-break: keep-all;
  }

  .mosica-contact.is-compact p {
    position: relative;
    z-index: 1;
    grid-column: 2;
    max-width: 330px;
    font-size: 14px;
    line-height: 1.6;
  }

  .mosica-guide-modal {
    --mosica-setting-accent: #2f7d4a;
    --accent: var(
      --mosica-shortcode-accent,
      var(
        --nectar-accent-color,
        var(
          --nectar-extra-color-1,
          var(
            --nectar-extra-color-2,
            var(--nectar-extra-color-3, var(--mosica-setting-accent))
          )
        )
      )
    );
    --accent-soft: color-mix(in srgb, var(--accent) 64%, #ffffff);
    --accent-deep: color-mix(in srgb, var(--accent) 78%, #000000);
    --green-2: var(--accent-soft);
    --gold: #d7a93b;
    --space: #090b10;
    --space-ink: #f5f1e6;
    --radius: 8px;
    --font-body: "Geist", "Noto Sans KR", "Pretendard", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --font-display: "Playfair Display", "Cormorant Garamond", serif;
    --font-mono: "JetBrains Mono", "Geist", ui-monospace, monospace;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--space-ink);
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .mosica-guide-modal[hidden] {
    display: none;
  }

  .mosica-guide-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background:
      radial-gradient(circle at 52% 32%, color-mix(in srgb, var(--accent-soft) 20%, transparent), transparent 36%),
      rgba(5, 8, 10, 0.76);
    backdrop-filter: blur(12px);
    cursor: pointer;
    overflow: hidden;
    touch-action: none;
  }

  .mosica-guide-backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 5% 12%, rgba(245, 241, 230, 0.48) 0 0.7px, transparent 1.5px),
      radial-gradient(circle at 14% 68%, rgba(147, 181, 202, 0.34) 0 0.8px, transparent 1.7px),
      radial-gradient(circle at 21% 34%, color-mix(in srgb, var(--accent-soft) 42%, transparent) 0 0.8px, transparent 1.8px),
      radial-gradient(circle at 31% 8%, rgba(245, 241, 230, 0.36) 0 0.6px, transparent 1.5px),
      radial-gradient(circle at 43% 78%, rgba(245, 241, 230, 0.38) 0 0.8px, transparent 1.7px),
      radial-gradient(circle at 57% 23%, rgba(147, 181, 202, 0.26) 0 0.7px, transparent 1.6px),
      radial-gradient(circle at 66% 61%, color-mix(in srgb, var(--accent-soft) 34%, transparent) 0 0.8px, transparent 1.8px),
      radial-gradient(circle at 74% 14%, rgba(245, 241, 230, 0.42) 0 0.7px, transparent 1.5px),
      radial-gradient(circle at 88% 82%, rgba(147, 181, 202, 0.32) 0 0.8px, transparent 1.7px),
      radial-gradient(circle at 97% 44%, rgba(245, 241, 230, 0.34) 0 0.6px, transparent 1.5px),
      radial-gradient(circle at 18% 86%, rgba(240, 195, 106, 0.22), transparent 11%),
      radial-gradient(circle at 72% 72%, rgba(147, 181, 202, 0.16), transparent 16%),
      radial-gradient(circle at 48% 52%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 34%),
      radial-gradient(circle at 84% 34%, rgba(86, 122, 147, 0.18), transparent 28%);
    opacity: 0.5;
    pointer-events: none;
  }

  .mosica-guide-panel {
    position: relative;
    z-index: 1;
    width: min(980px, 100%);
    max-height: min(820px, calc(100svh - 42px));
    max-height: min(820px, calc(100dvh - 42px));
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid rgba(245, 241, 230, 0.18);
    border-radius: var(--radius);
    background:
      radial-gradient(circle at 18% 16%, rgba(245, 241, 230, 0.055) 0 1px, transparent 1.7px),
      radial-gradient(circle at 78% 22%, rgba(245, 241, 230, 0.05) 0 1px, transparent 1.8px),
      radial-gradient(circle at 62% 78%, color-mix(in srgb, var(--accent-soft) 8%, transparent), transparent 32%),
      linear-gradient(145deg, rgba(14, 18, 16, 0.96), rgba(8, 10, 14, 0.97)),
      var(--space);
    box-shadow: 0 26px 90px rgba(0, 0, 0, 0.52);
  }

  .mosica-guide-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(circle at 8% 18%, rgba(245, 241, 230, 0.26) 0 0.7px, transparent 1.6px),
      radial-gradient(circle at 19% 52%, rgba(147, 181, 202, 0.2) 0 0.7px, transparent 1.5px),
      radial-gradient(circle at 27% 31%, color-mix(in srgb, var(--accent-soft) 22%, transparent) 0 0.8px, transparent 1.8px),
      radial-gradient(circle at 37% 73%, rgba(245, 241, 230, 0.2) 0 0.65px, transparent 1.5px),
      radial-gradient(circle at 48% 24%, rgba(245, 241, 230, 0.24) 0 0.75px, transparent 1.6px),
      radial-gradient(circle at 61% 58%, rgba(147, 181, 202, 0.16) 0 0.7px, transparent 1.5px),
      radial-gradient(circle at 73% 12%, rgba(245, 241, 230, 0.22) 0 0.7px, transparent 1.6px),
      radial-gradient(circle at 84% 44%, color-mix(in srgb, var(--accent-soft) 20%, transparent) 0 0.8px, transparent 1.8px),
      radial-gradient(circle at 91% 79%, rgba(245, 241, 230, 0.2) 0 0.65px, transparent 1.5px),
      radial-gradient(circle at 53% 89%, rgba(147, 181, 202, 0.18) 0 0.7px, transparent 1.6px),
      radial-gradient(circle at 64% 84%, color-mix(in srgb, var(--accent-soft) 24%, transparent), transparent 26%),
      radial-gradient(circle at 12% 42%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 31%),
      radial-gradient(circle at 18% 76%, rgba(86, 122, 147, 0.15), transparent 30%);
    opacity: 0.5;
    pointer-events: none;
  }

  .mosica-guide-panel > * {
    position: relative;
    z-index: 1;
  }

  .mosica-guide-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 26px 18px;
    border-bottom: 1px solid rgba(245, 241, 230, 0.1);
  }

  .mosica-guide-kicker {
    margin: 0 0 8px;
    color: var(--green-2);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .mosica-guide-head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 500;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0;
  }

  .mosica-guide-head p:last-child {
    max-width: 680px;
    margin: 10px 0 0;
    color: rgba(245, 241, 230, 0.68);
    font-size: 14px;
    word-break: keep-all;
  }

  .mosica-guide-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(245, 241, 230, 0.18);
    border-radius: 50%;
    background: rgba(245, 241, 230, 0.05);
    color: rgba(245, 241, 230, 0.82);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  .mosica-guide-close:hover {
    background: rgba(245, 241, 230, 0.12);
    color: #ffffff;
  }

  .mosica-guide-close:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-soft) 78%, rgba(245, 241, 230, 0.24));
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--accent-soft) 22%, transparent),
      0 0 20px color-mix(in srgb, var(--accent-soft) 18%, transparent);
  }

  .mosica-guide-body {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 22px 26px 28px;
    scrollbar-color: color-mix(in srgb, var(--accent-soft) 68%, rgba(245, 241, 230, 0.32)) rgba(245, 241, 230, 0.06);
    scrollbar-width: thin;
  }

  .mosica-guide-body::-webkit-scrollbar {
    width: 10px;
  }

  .mosica-guide-body::-webkit-scrollbar-track {
    background: rgba(245, 241, 230, 0.055);
    border-left: 1px solid rgba(245, 241, 230, 0.08);
  }

  .mosica-guide-body::-webkit-scrollbar-thumb {
    min-height: 80px;
    border: 2px solid rgba(8, 10, 14, 0.78);
    border-radius: 999px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 78%, rgba(245, 241, 230, 0.52)), color-mix(in srgb, var(--accent) 54%, rgba(245, 241, 230, 0.36)));
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent-soft) 24%, transparent);
  }

  .mosica-guide-jump {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -2px -6px 18px;
    padding: 6px 6px 12px;
    border-bottom: 1px solid rgba(245, 241, 230, 0.055);
    background:
      radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--accent-soft) 12%, transparent), transparent 45%),
      linear-gradient(180deg, rgba(11, 14, 16, 0.94), rgba(11, 14, 16, 0.82) 72%, rgba(11, 14, 16, 0.24));
    backdrop-filter: blur(14px) saturate(1.08);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
  }

  .mosica-guide-jump a {
    border: 1px solid rgba(245, 241, 230, 0.13);
    border-radius: 8px;
    padding: 8px 12px;
    background:
      linear-gradient(145deg, rgba(245, 241, 230, 0.055), rgba(245, 241, 230, 0.018));
    color: rgba(245, 241, 230, 0.82);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.018),
      0 8px 18px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px);
    font-size: 13px;
    font-weight: 800;
  }

  .mosica-guide-jump a:hover {
    border-color: color-mix(in srgb, var(--accent-soft) 62%, rgba(245, 241, 230, 0.18));
    background: color-mix(in srgb, var(--accent-soft) 10%, rgba(245, 241, 230, 0.055));
    color: #ffffff;
  }

  .mosica-guide-section {
    scroll-margin-top: 72px;
    border: 1px solid rgba(245, 241, 230, 0.12);
    border-radius: var(--radius);
    background: rgba(245, 241, 230, 0.045);
    padding: 20px;
  }

  .mosica-guide-section + .mosica-guide-section {
    margin-top: 16px;
  }

  .mosica-guide-section h4 {
    margin: 0 0 14px;
    color: var(--green-2);
    font-size: 18px;
    font-weight: 900;
  }

  .mosica-guide-table-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .mosica-guide-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid rgba(245, 241, 230, 0.12);
    border-radius: var(--radius);
    background:
      linear-gradient(145deg, rgba(245, 241, 230, 0.065), rgba(245, 241, 230, 0.022));
    color: rgba(245, 241, 230, 0.78);
    font-size: 14px;
  }

  .mosica-guide-table th,
  .mosica-guide-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(245, 241, 230, 0.1);
    background: rgba(245, 241, 230, 0.03);
    color: rgba(245, 241, 230, 0.76);
    text-align: left;
    vertical-align: top;
  }

  .mosica-guide-table tr:nth-child(even) td {
    background: rgba(245, 241, 230, 0.045);
  }

  .mosica-guide-table tr:last-child td {
    border-bottom: 0;
  }

  .mosica-guide-table th {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 22%, rgba(245, 241, 230, 0.06)), rgba(245, 241, 230, 0.04));
    color: #ffffff;
    font-weight: 900;
  }

  .mosica-guide-code {
    color: #f0c36a;
    font-family: var(--font-mono);
    font-weight: 800;
  }

  .mosica-guide-example {
    margin: 14px 0 0;
    color: rgba(245, 241, 230, 0.68);
    font-size: 13px;
    line-height: 1.7;
    word-break: keep-all;
  }

  .mosica-guide-badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .mosica-guide-badge {
    min-height: 168px;
    border: 1px solid rgba(245, 241, 230, 0.13);
    border-radius: var(--radius);
    padding: 14px;
    background: rgba(255, 255, 255, 0.045);
  }

  .mosica-guide-badge img {
    width: 56px;
    height: 56px;
    display: block;
    margin-bottom: 12px;
    object-fit: contain;
  }

  .mosica-guide-badge strong {
    display: block;
    margin-bottom: 7px;
    color: #ffffff;
    font-size: 15px;
  }

  .mosica-guide-badge p {
    margin: 0;
    color: rgba(245, 241, 230, 0.68);
    font-size: 13px;
    line-height: 1.6;
    word-break: keep-all;
  }

  .mosica-guide-note {
    margin: 14px 0 0;
    color: rgba(245, 241, 230, 0.58);
    font-size: 12.5px;
    line-height: 1.7;
  }

  .mosica-product-search-panel {
    width: min(860px, 100%);
  }

  .mosica-product-scroll-cue {
    display: none !important;
  }

  .mosica-product-search-body {
    display: grid;
    gap: 14px;
    min-height: 0;
    max-height: calc(100svh - 148px);
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-color: color-mix(in srgb, var(--accent-soft) 56%, rgba(245, 241, 230, 0.28)) rgba(245, 241, 230, 0.035);
    scrollbar-width: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 24px 26px;
  }

  .mosica-product-search-body::-webkit-scrollbar {
    width: 10px;
  }

  .mosica-product-search-body::-webkit-scrollbar-track {
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(245, 241, 230, 0.04), rgba(245, 241, 230, 0.018));
    box-shadow: inset 0 0 0 1px rgba(245, 241, 230, 0.055);
  }

  .mosica-product-search-body::-webkit-scrollbar-thumb {
    border: 2px solid rgba(7, 10, 11, 0.78);
    border-radius: 999px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 72%, #ffffff), color-mix(in srgb, var(--accent) 56%, #1b211d));
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
      0 0 14px color-mix(in srgb, var(--accent-soft) 26%, transparent);
  }

  .mosica-product-search-body::-webkit-scrollbar-thumb:hover {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 86%, #ffffff), color-mix(in srgb, var(--accent) 68%, #101412));
  }

  .mosica-product-search-status {
    margin: 0;
    border: 1px solid rgba(245, 241, 230, 0.1);
    border-radius: 8px;
    background: rgba(245, 241, 230, 0.045);
    color: rgba(245, 241, 230, 0.72);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    word-break: keep-all;
  }

  .mosica-product-search-status[data-state="loading"] {
    border-color: color-mix(in srgb, var(--accent-soft) 28%, rgba(245, 241, 230, 0.12));
    color: var(--space-ink);
  }

  .mosica-product-search-status[data-state="error"] {
    border-color: rgba(216, 107, 138, 0.42);
    color: #ffd9e1;
  }

  .mosica-product-results {
    display: grid;
    gap: 10px;
    min-height: 0;
  }

  .mosica-product-result {
    display: grid;
    grid-template-columns: 34px 72px minmax(0, 1fr) minmax(92px, auto) 34px;
    align-items: start;
    gap: 12px;
    min-height: 108px;
    border: 1px solid rgba(245, 241, 230, 0.12);
    border-radius: 10px;
    background:
      radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--accent-soft) 9%, transparent), transparent 30%),
      rgba(245, 241, 230, 0.045);
    padding: 14px 12px;
    color: var(--space-ink);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  }

  .mosica-product-result:hover,
  .mosica-product-result:focus-visible {
    border-color: color-mix(in srgb, var(--accent-soft) 54%, rgba(245, 241, 230, 0.14));
    background:
      radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--accent-soft) 16%, transparent), transparent 32%),
      rgba(245, 241, 230, 0.07);
    transform: translateY(-1px);
    outline: none;
  }

  .mosica-product-result-no {
    align-self: center;
    color: rgba(245, 241, 230, 0.42);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
  }

  .mosica-product-result-thumb {
    width: 72px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(245, 241, 230, 0.11);
    border-radius: 9px;
    background:
      linear-gradient(145deg, rgba(245, 241, 230, 0.08), rgba(245, 241, 230, 0.025));
  }

  .mosica-product-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mosica-product-result-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-soft) 26%, rgba(245, 241, 230, 0.1));
    color: var(--space-ink);
    font-family: var(--font-display);
    font-size: 25px;
    font-style: italic;
  }

  .mosica-product-result-body {
    align-self: center;
    min-width: 0;
    display: grid;
    gap: 6px;
  }

  .mosica-product-result-body strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mosica-product-result-copy {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(245, 241, 230, 0.64);
    font-size: 12.5px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
  }

  .mosica-product-result-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 100%;
    padding-top: 1px;
  }

  .mosica-product-result-labels span {
    max-width: 154px;
    overflow: hidden;
    border: 1px solid rgba(245, 241, 230, 0.12);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 9%, transparent);
    color: rgba(245, 241, 230, 0.74);
    padding: 3px 7px;
    font-size: 11px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mosica-product-result-price {
    align-self: center;
    justify-self: end;
    color: var(--accent-soft);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    text-align: right;
    white-space: nowrap;
  }

  .mosica-product-result-price-inline {
    display: none;
  }

  .mosica-product-result-go {
    align-self: center;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(245, 241, 230, 0.18);
    border-radius: 8px;
    color: rgba(245, 241, 230, 0.78);
    font-size: 20px;
  }

  .mosica-product-result-go::before {
    content: "\2197\FE0E";
    font-family: var(--font-mono), Arial, sans-serif;
    font-size: 20px;
    line-height: 1;
  }

  .mosica-product-empty {
    display: grid;
    gap: 6px;
    border: 1px dashed rgba(245, 241, 230, 0.16);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
  }

  .mosica-product-empty strong {
    color: #ffffff;
    font-size: 16px;
  }

  .mosica-product-empty span {
    color: rgba(245, 241, 230, 0.62);
    font-size: 13px;
  }

  .mosica-email-panel {
    width: min(720px, 100%);
  }

  .mosica-email-form {
    display: grid;
    gap: 14px;
    padding: 22px 26px 28px;
  }

  .mosica-email-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .mosica-email-field {
    display: grid;
    gap: 7px;
  }

  .mosica-email-field label {
    color: rgba(245, 241, 230, 0.7);
    font-size: 12px;
    font-weight: 800;
  }

  .mosica-email-field input,
  .mosica-email-field textarea {
    width: 100%;
    border: 1px solid rgba(245, 241, 230, 0.16);
    border-radius: 10px;
    background: rgba(245, 241, 230, 0.065);
    color: #ffffff;
    padding: 12px 13px;
    font: inherit;
    font-size: 14px;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  }

  .mosica-email-field textarea {
    min-height: 150px;
    resize: vertical;
  }

  .mosica-email-field input::placeholder,
  .mosica-email-field textarea::placeholder {
    color: rgba(245, 241, 230, 0.38);
  }

  .mosica-email-field input:focus,
  .mosica-email-field textarea:focus {
    border-color: color-mix(in srgb, var(--accent-soft) 64%, rgba(255, 255, 255, 0.2));
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--accent-soft) 12%, transparent),
      0 0 0 3px color-mix(in srgb, var(--accent-soft) 12%, transparent);
  }

  .mosica-email-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
  }

  .mosica-email-actions button {
    min-height: 42px;
    border: 1px solid rgba(245, 241, 230, 0.18);
    border-radius: 10px;
    padding: 0 16px;
    background: rgba(245, 241, 230, 0.055);
    color: rgba(245, 241, 230, 0.84);
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
  }

  .mosica-email-actions button[type="submit"] {
    border-color: color-mix(in srgb, var(--accent-soft) 64%, rgba(255, 255, 255, 0.22));
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, #101217), color-mix(in srgb, var(--accent-soft) 34%, #0c1010));
    color: #ffffff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent);
  }

  .mosica-email-actions button:hover,
  .mosica-email-actions button:focus-visible {
    border-color: var(--accent-soft);
    color: #ffffff;
    outline: none;
  }

  .mosica-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 78px 0;
    background:
      radial-gradient(circle at 78% 24%, color-mix(in srgb, var(--accent-soft) 14%, transparent), transparent 34%),
      radial-gradient(circle at 18% 78%, rgba(240, 195, 106, 0.1), transparent 30%),
      linear-gradient(135deg, #07090d 0%, #10151a 54%, #07100c 100%);
    color: var(--space-ink);
  }

  .mosica-cta::before,
  .mosica-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .mosica-cta::before {
    z-index: 0;
    background-image:
      radial-gradient(circle at 20px 28px, rgba(245, 241, 230, 0.42) 0 1px, transparent 1.7px),
      radial-gradient(circle at 118px 86px, rgba(245, 241, 230, 0.22) 0 1.2px, transparent 1.9px),
      radial-gradient(circle at 176px 40px, color-mix(in srgb, var(--accent-soft) 32%, transparent) 0 1px, transparent 1.8px);
    background-position: 0 0, 28px 12px, 68px 18px;
    background-size: 172px 146px, 244px 204px, 318px 252px;
    opacity: 0.44;
  }

  .mosica-cta::after {
    z-index: 0;
    background:
      radial-gradient(ellipse at 74% 50%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 44%),
      radial-gradient(ellipse at 26% 44%, rgba(255, 255, 255, 0.045), transparent 38%);
    opacity: 0.82;
  }

  .mosica-cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
  }

  .mosica-cta h2 {
    max-width: 760px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(34px, 5vw, 70px);
    font-weight: 500;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0;
    word-break: keep-all;
  }

  .mosica-cta h2 em {
    color: var(--green-2);
    font-style: italic;
    font-weight: 500;
  }

  @media (max-width: 920px) {
    .mosica-hero {
      min-height: clamp(520px, calc(100vw * 0.633333), 640px);
    }

    .mosica-scene {
      opacity: 0.9;
    }

    .mosica-constellation-detail {
      position: absolute;
      left: auto;
      right: clamp(16px, 4vw, 30px);
      top: auto;
      bottom: clamp(58px, 8vh, 86px);
      width: clamp(300px, 42vw, 340px);
      height: min(390px, calc(100% - 88px));
      max-height: min(390px, calc(100% - 88px));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      margin: 0;
      padding: 18px 18px 16px;
    }

    .mosica-detail-copy {
      font-size: 13px;
      line-height: 1.55;
    }

    .mosica-detail-line {
      margin: 12px 0;
    }

    .mosica-detail-list {
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
    }

    .mosica-wp-landing.is-detail-open .mosica-hero-hint {
      opacity: 0;
      pointer-events: none;
    }

    .mosica-hero-copy {
      padding-bottom: 32px;
    }

    .mosica-section-head,
    .mosica-cta-inner {
      align-items: flex-start;
      flex-direction: column;
    }

    .mosica-category-grid,
    .mosica-feature-row,
    .mosica-faq-grid,
    .mosica-guide-table-wrap,
    .mosica-guide-badges {
      grid-template-columns: 1fr;
    }
  }

  @media (min-width: 621px) and (max-width: 1100px) {
    .mosica-hero-copy {
      max-width: min(500px, 48vw);
      padding-top: clamp(72px, 9vw, 96px);
      padding-bottom: 42px;
    }

    .mosica-hero-sub {
      max-width: min(420px, 42vw);
      font-size: clamp(15px, 1.7vw, 18px);
      line-height: 1.68;
      text-wrap: balance;
    }

    .mosica-actions {
      max-width: min(420px, 42vw);
    }
  }

  @media (min-width: 621px) and (max-width: 920px) and (max-height: 560px) {
    .mosica-hero {
      min-height: clamp(420px, calc(100vw * 0.633333), 540px);
    }

    .mosica-hero-copy {
      max-width: min(390px, 46vw);
      padding-top: clamp(34px, 7vw, 58px);
      padding-bottom: 24px;
    }

    .mosica-hero h1 {
      font-size: clamp(46px, 8vw, 74px);
    }

    .mosica-hero-sub {
      margin-top: 12px;
      font-size: 14px;
      line-height: 1.55;
    }

    .mosica-actions {
      margin-top: 18px;
    }

    .mosica-hero-hint {
      display: none;
    }
  }

  @media (max-width: 620px) {
    .mosica-shell {
      width: min(100% - 28px, 1180px);
    }

    .mypd-langbar {
      overflow: hidden;
      background: color-mix(in srgb, var(--accent) 2.8%, #fbfaf6);
    }

    .mypd-langbar__inner {
      min-height: 58px;
      gap: 14px;
      padding-block: 10px;
    }

    .mypd-langbar__hint {
      color: color-mix(in srgb, var(--accent) 72%, #6a7069);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.28em;
    }

    .mypd-langbar__chips {
      gap: 8px;
      padding: 2px 18px 2px 0;
      mask-image: none;
    }

    .mypd-langbar__chip > a {
      min-height: 30px;
      gap: 7px;
      padding: 5px 13px 5px 10px;
      font-size: 12px;
    }

    .mypd-langbar__chip > a > .flag.size24 {
      width: 23px;
      height: 17px;
    }

    @media (max-width: 480px) {
      .mypd-langbar__inner {
        min-height: 52px;
        gap: 8px;
        padding-block: 8px;
      }

      .mypd-langbar__hint {
        display: inline-flex;
        color: color-mix(in srgb, var(--accent) 78%, #596058);
        font-size: 8px;
        letter-spacing: 0.2em;
      }

      .mypd-langbar__chips {
        flex: 1 1 auto;
        width: auto;
        justify-content: flex-start;
        gap: 7px;
        padding: 2px 10px 2px 0;
        mask-image: none;
        overflow: visible;
        -webkit-overflow-scrolling: auto;
      }

      .mypd-langbar__chip > a {
        width: 46px;
        min-width: 46px;
        min-height: 36px;
        justify-content: center;
        gap: 0;
        padding: 0;
        font-size: 0;
      }

      .mypd-langbar__chip > a > .flag.size24 {
        width: 25px;
        height: 18px;
      }
    }

    .mosica-hero {
      min-height: clamp(600px, min(84svh, calc(100vw * 1.82)), 724px);
      display: block;
    }

    .mosica-wp-landing.is-detail-open .mosica-hero::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 110;
      background: rgba(4, 4, 7, 0.24);
      backdrop-filter: blur(1px);
      pointer-events: auto;
      touch-action: none;
    }

    .mosica-scene {
      opacity: 0.88;
      transform: none;
      transform-origin: center;
    }

    .mosica-system {
      display: none;
    }

    .mosica-html-planets {
      display: block;
      inset: 8px 0 clamp(218px, 32svh, 276px);
      z-index: 4;
      pointer-events: none;
    }

    .mosica-mobile-constellation {
      display: block;
      inset: 8px 0 clamp(218px, 32svh, 276px);
      height: auto;
      z-index: 2;
    }

    .mosica-mobile-constellation .mobile-label {
      display: none;
    }

    .mosica-mobile-constellation .mobile-line {
      display: none;
    }

    .mosica-mobile-constellation .mobile-node:not(.is-core) {
      display: none;
    }

    .mosica-shooting,
    .mosica-bark-waves,
    .mosica-collision-particles {
      display: none;
    }

    .mosica-planet-button {
      width: max(82px, calc(var(--moon-orbit-size, 96px) * 0.78));
      height: max(82px, calc(var(--moon-orbit-size, 96px) * 0.78));
      transform: translate3d(var(--mobile-planet-x, 0px), var(--mobile-planet-y, 0px), 0) translate(-50%, -50%) scale(var(--mobile-planet-scale, 0.84));
      pointer-events: auto;
      cursor: pointer;
      touch-action: none;
      text-shadow: 0 3px 14px rgba(0, 0, 0, 0.7);
    }

    .mosica-planet-button[data-category="piano"] { --mobile-planet-x: -112px; --mobile-planet-y: -126px; --mobile-planet-scale: 0.86; --mobile-spin-duration: 15s; }
    .mosica-planet-button[data-category="inst"] { --mobile-planet-x: 86px; --mobile-planet-y: -126px; --mobile-planet-scale: 0.91; --mobile-spin-duration: 16s; }
    .mosica-planet-button[data-category="guitar"] { --mobile-planet-x: -104px; --mobile-planet-y: -48px; --mobile-planet-scale: 0.9; --mobile-spin-duration: 18s; }
    .mosica-planet-button[data-category="score"] { --mobile-planet-x: 8px; --mobile-planet-y: -58px; --mobile-planet-scale: 0.91; --mobile-spin-duration: 17s; }
    .mosica-planet-button[data-category="vocal"] { --mobile-planet-x: -142px; --mobile-planet-y: 30px; --mobile-planet-scale: 0.9; --mobile-spin-duration: 19s; }
    .mosica-planet-button[data-category="mypage"] { --mobile-planet-x: 120px; --mobile-planet-y: -44px; --mobile-planet-scale: 0.84; --mobile-spin-duration: 20s; }
    .mosica-planet-button[data-category="etude"] { --mobile-planet-x: -48px; --mobile-planet-y: 30px; --mobile-planet-scale: 0.89; --mobile-spin-duration: 21s; }
    .mosica-planet-button[data-category="flute"] { --mobile-planet-x: 130px; --mobile-planet-y: 36px; --mobile-planet-scale: 0.9; --mobile-spin-duration: 18s; }
    .mosica-planet-button[data-category="point"] { --mobile-planet-x: -126px; --mobile-planet-y: 108px; --mobile-planet-scale: 0.89; --mobile-spin-duration: 22s; }
    .mosica-planet-button[data-category="support"] { --mobile-planet-x: 18px; --mobile-planet-y: 106px; --mobile-planet-scale: 0.88; --mobile-spin-duration: 19s; }
    .mosica-planet-button[data-category="studio"] { --mobile-planet-x: 132px; --mobile-planet-y: 128px; --mobile-planet-scale: 0.88; --mobile-spin-duration: 23s; }

    .mosica-planet-core {
      z-index: 4;
    }

    .mosica-moon-orbit {
      z-index: 0;
    }

    .mosica-planet-moon {
      z-index: 1;
      pointer-events: none;
    }

    .mosica-planet-spin {
      animation: mosica-mobile-planet-spin var(--mobile-spin-duration, 18s) linear infinite;
    }

    .mosica-planet-logo {
      animation: mosica-mobile-logo-spin var(--mobile-spin-duration, 18s) linear infinite;
    }

    .mosica-planet-rings span {
      animation: mosica-mobile-ring-spin calc(var(--mobile-spin-duration, 18s) * 1.35) linear infinite;
    }

    .mosica-planet-rings span:nth-child(2) {
      animation-name: mosica-mobile-ring-spin-reverse;
    }

    .mosica-planet-moon {
      animation: mosica-mobile-moon-orbit calc(var(--mobile-spin-duration, 18s) * 0.72) linear infinite;
    }

    .mosica-planet-label {
      top: calc(50% + (var(--planet-size, 34px) / 2) + 9px);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      opacity: 0.96;
      color: color-mix(in srgb, var(--planet-label-color, var(--planet-color)) 72%, #ffffff);
      text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.92),
        0 0 8px color-mix(in srgb, var(--planet-label-color, var(--planet-color)) 58%, transparent);
    }

    .mosica-hero > .mosica-shell {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 20px;
      z-index: 6;
      width: auto;
      margin: 0;
      pointer-events: none;
    }

    .mosica-hero-copy {
      max-width: 320px;
      padding: 0;
      z-index: 6;
      pointer-events: none;
    }

    .mosica-kicker {
      margin-bottom: 10px;
      font-size: 10px;
      letter-spacing: 0.14em;
    }

    .mosica-hero h1 {
      font-size: clamp(42px, 16vw, 66px);
    }

    .mosica-hero-sub {
      max-width: 270px;
      margin-top: 12px;
      font-size: 14px;
      line-height: 1.55;
    }

    .mosica-desktop-copy {
      display: none;
    }

    .mosica-mobile-brief {
      display: inline;
    }

    .mosica-actions {
      gap: 8px;
      margin-top: 18px;
      pointer-events: auto;
    }

    .mosica-btn {
      min-height: 42px;
      padding: 9px 14px;
      font-size: 13px;
    }

    .mosica-constellation-detail {
      position: fixed;
      left: 50%;
      right: auto;
      top: var(--detail-mobile-top, max(18px, env(safe-area-inset-top, 0px)));
      bottom: auto;
      z-index: 120;
      display: flex;
      flex-direction: column;
      width: min(322px, calc(100vw - 44px));
      max-height: var(--detail-mobile-max-height, min(560px, calc(100svh - 76px)));
      padding: 12px 18px 14px;
      transform: translateX(-50%);
      overflow: hidden;
      border-radius: 10px;
      animation: mosica-mobile-detail-in 0.22s ease-out;
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--detail-color, var(--accent-soft)) 32%, transparent),
        0 18px 70px rgba(0, 0, 0, 0.58),
        0 0 42px color-mix(in srgb, var(--detail-color, var(--accent-soft)) 22%, transparent);
    }

    @keyframes mosica-mobile-detail-in {
      from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px) scale(0.985);
      }
      to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
      }
    }

    .mosica-constellation-detail[hidden] {
      display: none;
    }

    .mosica-detail-close {
      top: 0;
      right: 0;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 58px;
      height: 58px;
      border-radius: 10px;
      font-size: 28px;
      line-height: 1;
      pointer-events: auto;
      touch-action: none;
      -webkit-tap-highlight-color: transparent;
      -webkit-user-select: none;
      user-select: none;
      transform: translateZ(0);
    }

    .mosica-detail-title {
      padding-right: 24px;
      font-size: 18px;
    }

    .mosica-detail-copy {
      font-size: 13px;
      line-height: 1.55;
    }

    .mosica-detail-line {
      margin: 8px 0 10px;
    }

    .mosica-detail-list {
      flex: 1 1 auto;
      min-height: 0;
      max-height: var(--detail-mobile-list-max, 300px);
    }

    .mosica-hero-hint {
      display: none;
    }

    .mosica-search-box {
      grid-template-columns: 1fr;
    }

    .mosica-search-box button {
      width: 100%;
    }

    .mosica-section {
      padding: 54px 0;
    }

    .mosica-card {
      min-height: 170px;
      padding: 20px;
    }

    .mosica-guide-modal {
      align-items: center;
      padding:
        max(6px, env(safe-area-inset-top))
        6px
        max(8px, env(safe-area-inset-bottom));
    }

    .mosica-guide-panel {
      width: min(100%, calc(100vw - 12px));
      max-height: calc(100svh - 18px);
      max-height: calc(100dvh - 18px);
      grid-template-rows: auto minmax(0, 1fr);
      border-radius: 10px;
    }

    .mosica-guide-head {
      gap: 10px;
      padding: 14px 14px 10px;
    }

    .mosica-guide-head h3 {
      font-size: clamp(26px, 10vw, 38px);
      line-height: 0.98;
    }

    .mosica-guide-head p:last-child {
      max-width: 100%;
      margin-top: 6px;
      font-size: 12.5px;
      line-height: 1.45;
    }

    .mosica-guide-close {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      font-size: 24px;
    }

    .mosica-guide-body {
      padding: 12px;
    }

    .mosica-guide-jump {
      gap: 6px;
      margin: -2px -4px 12px;
      padding: 5px 4px 10px;
    }

    .mosica-guide-jump a {
      padding: 7px 9px;
      font-size: 12px;
    }

    .mosica-guide-section {
      min-width: 0;
      overflow: hidden;
      padding: 14px;
    }

    .mosica-guide-table {
      width: 100%;
      table-layout: fixed;
      font-size: 13px;
    }

    .mosica-guide-table th,
    .mosica-guide-table td {
      min-width: 0;
      padding: 9px 10px;
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }

    .mosica-guide-table th:first-child,
    .mosica-guide-table td:first-child {
      width: 40% !important;
    }

    .mosica-guide-example,
    .mosica-guide-note,
    .mosica-guide-badge,
    .mosica-guide-badge strong,
    .mosica-guide-badge p {
      min-width: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
    }

    .mosica-guide-badge {
      min-height: 0;
      overflow: hidden;
    }

    .mosica-product-search-panel {
      width: min(100%, calc(100vw - 16px));
      max-height: min(560px, calc(76svh - 12px));
      max-height: min(560px, calc(76dvh - 12px));
      grid-template-rows: auto minmax(0, 1fr);
    }

    .mosica-product-search-modal .mosica-guide-head {
      position: sticky;
      top: 0;
      z-index: 4;
      padding: 8px 10px 7px;
      background:
        radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--accent-soft) 10%, transparent), transparent 34%),
        linear-gradient(180deg, rgba(8, 10, 14, 0.98), rgba(8, 10, 14, 0.92));
    }

    .mosica-product-search-modal .mosica-guide-head h3 {
      font-size: clamp(22px, 7.6vw, 30px);
    }

    .mosica-product-search-modal .mosica-guide-head p:last-child {
      display: -webkit-box;
      overflow: hidden;
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.35;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .mosica-product-search-modal .mosica-guide-close {
      width: 42px;
      height: 42px;
      font-size: 26px;
    }

    .mosica-product-search-body {
      gap: 10px;
      min-height: 0;
      max-height: none;
      overflow-x: hidden;
      overflow-y: scroll;
      scrollbar-gutter: stable;
      scrollbar-width: auto;
      padding: 12px 14px 18px 12px;
    }

    .mosica-product-search-body::-webkit-scrollbar {
      width: 10px;
      height: 10px;
      display: block;
    }

    .mosica-product-search-body::-webkit-scrollbar-track {
      border-radius: 999px;
      background: rgba(245, 241, 230, 0.08);
      box-shadow: inset 0 0 0 1px rgba(245, 241, 230, 0.06);
    }

    .mosica-product-search-body::-webkit-scrollbar-thumb {
      min-height: 54px;
      border: 2px solid rgba(8, 10, 14, 0.86);
      border-radius: 999px;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--accent-soft) 82%, rgba(245, 241, 230, 0.86)),
          color-mix(in srgb, var(--accent) 58%, rgba(245, 241, 230, 0.28)));
      box-shadow:
        0 0 14px color-mix(in srgb, var(--accent-soft) 22%, transparent),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    }

    .mosica-product-result {
      grid-template-columns: 54px minmax(0, 1fr) 38px;
      grid-template-rows: auto;
      align-items: center;
      gap: 8px;
      min-height: 126px;
      height: auto !important;
      max-height: none !important;
      overflow: hidden;
      padding: 11px 10px;
      line-height: 1.35;
    }

    .mosica-product-result-no {
      display: none;
    }

    .mosica-product-result-thumb {
      width: 54px;
      grid-column: 1;
      grid-row: 1;
      align-self: start;
    }

    .mosica-product-result-body {
      grid-column: 2;
      grid-row: 1;
      align-self: start;
      min-width: 0;
      overflow: hidden;
      gap: 5px;
    }

    .mosica-product-result-body strong {
      display: -webkit-box;
      overflow: hidden;
      font-size: 14px !important;
      line-height: 1.34 !important;
      overflow-wrap: anywhere;
      text-overflow: clip;
      white-space: normal;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .mosica-product-result-copy {
      display: -webkit-box;
      overflow: hidden;
      font-size: 11.5px !important;
      line-height: 1.35 !important;
      overflow-wrap: anywhere;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    .mosica-product-result-labels {
      max-height: 24px;
      overflow: hidden;
    }

    .mosica-product-result-labels span {
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
      text-overflow: clip;
    }

    .mosica-product-result-price {
      max-width: 100%;
      margin: 0 0 1px;
      font-size: 12px !important;
      line-height: 1.25 !important;
      text-align: left;
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }

    .mosica-product-result-price-side {
      display: none !important;
    }

    .mosica-product-result-body .mosica-product-result-price-inline {
      display: block !important;
      grid-column: auto !important;
      grid-row: auto !important;
      justify-self: start;
      align-self: auto;
      order: 2;
    }

    .mosica-product-result-body strong {
      order: 1;
    }

    .mosica-product-result-copy {
      order: 3;
    }

    .mosica-product-result-labels {
      order: 4;
    }

    .mosica-product-result-go {
      grid-column: 3;
      grid-row: 1;
      align-self: center;
      width: 38px;
      height: 38px;
    }

    .mosica-email-form {
      padding: 18px;
    }

    .mosica-email-row {
      grid-template-columns: 1fr;
    }

    .mosica-email-actions {
      flex-direction: column-reverse;
    }
  }

  /* WordPress theme color guard: Salient can assign dark colors directly to headings/paragraphs. */
  .mosica-hero h1 {
    color: var(--space-ink) !important;
  }

  .mosica-hero h1 span,
  .mosica-kicker {
    color: var(--accent-soft) !important;
  }

  .mosica-hero-sub,
  .mosica-mobile-brief {
    color: rgba(245, 241, 230, 0.76) !important;
  }

  .mosica-btn,
  .mosica-btn.ghost {
    color: var(--space-ink) !important;
  }

  .mosica-btn.primary,
  .mosica-btn.primary[data-search-trigger],
  .mosica-search-box button {
    color: #ffffff !important;
  }

  .mosica-hero-hint {
    color: rgba(245, 241, 230, 0.66) !important;
  }

  .mosica-sound-toggle {
    color: rgba(245, 241, 230, 0.78) !important;
  }

  .mosica-sound-toggle:hover,
  .mosica-sound-toggle:focus-visible {
    color: var(--space-ink) !important;
  }

  .mosica-sound-toggle[aria-pressed="true"] {
    color: var(--gold) !important;
  }

  .mosica-constellation-detail,
  .mosica-contact,
  .mosica-guide-modal,
  .mosica-guide-panel,
  .mosica-cta {
    color: var(--space-ink) !important;
  }

  .mosica-detail-eyebrow,
  .mosica-detail-title,
  .mosica-detail-title a,
  .mosica-detail-stat-value {
    color: var(--detail-readable) !important;
  }

  .mosica-detail-title span,
  .mosica-detail-copy,
  .mosica-detail-row-title {
    color: rgba(255, 255, 255, 0.68) !important;
  }

  .mosica-detail-stat-label,
  .mosica-detail-num {
    color: rgba(255, 255, 255, 0.52) !important;
  }

  .mosica-contact h3,
  .mosica-cta h2,
  .mosica-guide-head h3 {
    color: var(--space-ink) !important;
  }

  .mosica-product-result-body strong,
  .mosica-product-empty strong {
    color: #ffffff !important;
  }

  .mosica-product-result-copy,
  .mosica-product-empty span {
    color: rgba(245, 241, 230, 0.64) !important;
  }

  .mosica-contact p,
  .mosica-guide-head p:last-child {
    color: rgba(245, 241, 230, 0.7) !important;
  }

  .mosica-cta h2 em,
  .mosica-guide-kicker {
    color: var(--green-2) !important;
  }

  .mosica-guide-close {
    color: rgba(245, 241, 230, 0.82) !important;
  }

  .mosica-guide-close:hover {
    color: #ffffff !important;
  }

  .mosica-guide-section {
    background:
      radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--accent-soft) 8%, transparent), transparent 32%),
      linear-gradient(145deg, rgba(245, 241, 230, 0.055), rgba(245, 241, 230, 0.022)) !important;
    color: rgba(245, 241, 230, 0.76) !important;
  }

  .mosica-guide-table,
  .mosica-guide-table thead,
  .mosica-guide-table tbody,
  .mosica-guide-table tr {
    background-color: transparent !important;
    color: rgba(245, 241, 230, 0.78) !important;
  }

  .mosica-guide-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background:
      linear-gradient(145deg, rgba(245, 241, 230, 0.065), rgba(245, 241, 230, 0.022)) !important;
  }

  .mosica-guide-table th {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 22%, rgba(245, 241, 230, 0.06)), rgba(245, 241, 230, 0.04)) !important;
    color: #ffffff !important;
  }

  .mosica-guide-table td {
    background: rgba(245, 241, 230, 0.03) !important;
    color: rgba(245, 241, 230, 0.76) !important;
  }

  .mosica-guide-table tr:nth-child(even) td {
    background: rgba(245, 241, 230, 0.045) !important;
  }

  .mosica-guide-code {
    color: #f0c36a !important;
  }

  .mosica-guide-example,
  .mosica-guide-note,
  .mosica-guide-badge p {
    color: rgba(245, 241, 230, 0.68) !important;
  }

  .mosica-guide-section h4 {
    color: var(--green-2) !important;
  }

  .mosica-guide-badge strong {
    color: #ffffff !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .mosica-wp-landing *,
    .mosica-wp-landing *::before,
    .mosica-wp-landing *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }