/* SocketJack's palette, with compact, restrained Portal surfaces. */
:root {
  --sj-bg: #090b10 !important;
  --sj-surface: #11141b !important;
  --sj-surface-raised: #191d25 !important;
  --sj-line: #ffffff1c !important;
  --sj-text: #f0f2f5 !important;
  --sj-muted: #a5adba !important;
  --sj-accent: #bbff7b !important;
  --sj-radius: 6px !important;
  color-scheme: dark !important;
}
@scope ([data-sj-portal-page]) {
  :scope.motion-off *,
  :scope.motion-off *::before,
  :scope.motion-off *::after,
  micro-app-body.motion-off *,
  micro-app-body.motion-off *::before,
  micro-app-body.motion-off *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  :scope,
  body,
  micro-app-body {
    font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important;
    background-color: var(--sj-bg) !important;
    color: var(--sj-text) !important;
    letter-spacing: normal !important;
  }
  button,
  input,
  select,
  textarea {
    font-family: inherit !important;
  }
  button,
  a,
  input,
  select,
  textarea {
    outline-offset: 3px !important;
  }
  :focus-visible {
    outline: 2px solid var(--sj-accent) !important;
  }
  header {
    height: auto !important;
    min-height: 76px !important;
  }
  .brand {
    font-size: 23px !important;
    letter-spacing: -0.55px !important;
  }
  .brand-logo {
    border-radius: 4px !important;
  }
  .ambient .orb {
    filter: blur(100px) !important;
    opacity: 0.035 !important;
    transform: none !important;
  }
  .ambient .grid {
    opacity: 0.35 !important;
  }
  .hero-star {
    font-size: 72px !important;
    animation: none !important;
    opacity: 0.32 !important;
    top: 12px !important;
    right: 8% !important;
  }
  .intro {
    padding-top: 48px !important;
    padding-bottom: 38px !important;
  }
  .intro h1 {
    font-size: clamp(44px, 6vw, 78px) !important;
    letter-spacing: -2.8px !important;
    line-height: 1.08 !important;
    margin: 22px 0 !important;
  }
  .intro p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #a5adba !important;
  }
  .cards {
    gap: 16px !important;
    perspective: none !important;
  }
  .card {
    border-radius: 8px !important;
    transform: none !important;
    transition:
      border-color 140ms ease,
      box-shadow 140ms ease !important;
    background: #ffffff1c !important;
    min-height: 380px !important;
    box-shadow: none !important;
  }
  .card:before {
    display: none !important;
  }
  .card:hover {
    background: color-mix(in srgb, var(--accent) 45%, #ffffff20) !important;
  }
  .card-inner {
    border-radius: 7px !important;
    /* Keep the product screenshots and music artwork visible behind the copy. */
    background: linear-gradient(
      180deg,
      #0b0e1426 10%,
      #0b0e1455 45%,
      #0b0e14f5 100%
    ) !important;
    min-height: 378px !important;
    padding: 24px 26px !important;
  }
  .technology-card .card-inner {
    background: #11141b !important;
  }
  .card-screenshot {
    transform: none !important;
    transition: none !important;
  }
  .card-inner:after {
    display: none !important;
  }
  .card-visual {
    border-radius: 7px 7px 0 0 !important;
  }
  .card h2 {
    font-size: 28px !important;
    letter-spacing: -0.7px !important;
    font-weight: 600 !important;
  }
  .card h2 span {
    font-size: 22px !important;
  }
  .card p {
    color: #a1a9b6 !important;
  }
  .card-copy {
    margin-top: 130px !important;
  }
  .art {
    transform: none !important;
    transition: none !important;
    opacity: 0.85 !important;
  }
  .core,
  .fruity-playhead,
  .fruity-bars,
  .fruity-notes,
  .ring {
    animation: none !important;
    text-shadow: none !important;
  }
  .arrow {
    border-radius: 4px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 19px !important;
    transition:
      background 140ms ease,
      color 140ms ease !important;
  }
  .card:hover .arrow {
    transform: none !important;
  }
  .card:hover .launch span {
    transform: translateX(2px) !important;
  }
  .download,
  .feature-link,
  .technology-package,
  .technology-source,
  .explore,
  .launch {
    border-radius: 4px !important;
  }
  .product-badges span,
  .fruity-badges span,
  .category-badge,
  .status-badge {
    border-radius: 3px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }
  .product-badges,
  .fruity-badges {
    gap: 6px !important;
  }
  .technology-card,
  .technology,
  .feature-card,
  .gallery-card,
  .panel,
  .account-card,
  .auth-card,
  .legal-card,
  .status-card,
  .admin-card,
  .overview-card,
  .project-card,
  .release-card,
  .release-intro,
  .intro-strip {
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  .technology-card:before,
  .feature-card:before {
    animation: none !important;
  }
  .technology-card h3,
  .feature-card h3 {
    font-weight: 600 !important;
  }
  .technology-grid,
  .features-grid,
  .gallery-grid {
    gap: 16px !important;
  }
  button,
  .button,
  .btn,
  .primary,
  .secondary {
    border-radius: 4px !important;
    transition:
      background-color 120ms ease,
      border-color 120ms ease,
      color 120ms ease,
      opacity 120ms ease !important;
    box-shadow: none !important;
  }
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    border-radius: 4px !important;
  }
  dialog {
    border-radius: 8px !important;
    border: 1px solid #ffffff26 !important;
    box-shadow: 0 12px 40px #0006 !important;
  }
  .auth-hero,
  .account-hero,
  .page-hero {
    padding-top: 32px !important;
    padding-bottom: 28px !important;
  }
  .hero,
  .release-brand-preview {
    border-radius: 8px !important;
  }
  .hero h1,
  .page-hero h1,
  .auth-hero h1 {
    letter-spacing: -1.2px !important;
    line-height: 1.15 !important;
  }
  .tabs,
  .tab-bar,
  .tablist {
    border-radius: 4px !important;
  }
  .tabs button,
  .tab-bar button,
  [role="tab"] {
    border-radius: 3px !important;
  }
  .account-panel,
  .account-recovery-critical,
  .account-setting,
  .service,
  .metrics article,
  .legal .summary,
  .admin-tab-panel,
  main article,
  .admin-console section.admin-tab-panel,
  .usage-card,
  .admin-account-dialog {
    border-radius: 6px !important;
    box-shadow: none !important;
  }
  .period {
    border-radius: 4px !important;
  }
  .gallery img,
  .gallery-card img,
  .screenshot-card,
  .feature-screenshot {
    border-radius: 5px !important;
  }
  .outro {
    padding: 38px 0 !important;
    font-size: 25px !important;
    letter-spacing: -0.5px !important;
  }
  .outro-mark {
    font-size: 45px !important;
    opacity: 0.65 !important;
  }
  footer {
    min-height: 72px !important;
  }
  footer button {
    border-radius: 4px !important;
  }
  @media (max-width: 700px) {
    header {
      min-height: 68px !important;
    }
    .intro {
      padding-top: 32px !important;
    }
    .intro h1 {
      font-size: 48px !important;
      letter-spacing: -1.5px !important;
    }
    .hero-star {
      display: none !important;
    }
    .card-inner {
      padding: 22px !important;
    }
    .outro {
      font-size: 22px !important;
    }
    .art {
      opacity: 0.65 !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    :scope:scope *,
    :scope:scope *::before,
    :scope:scope *::after {
      animation-duration: 0.001ms !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }
}