:root {
      color-scheme: dark;
      --bg: #07090d;
      --panel: rgba(255,255,255,.055);
      --panel-2: rgba(255,255,255,.085);
      --line: rgba(255,255,255,.13);
      --text: #fffaf0;
      --muted: rgba(255,250,240,.66);
      --gold: #f3c45f;
      --gold-2: #ec8b38;
      --gold-3: #ffe6a3;
      --menu-bg: rgba(15, 18, 26, .96);
      --menu-hover: rgba(255,255,255,.08);
    }
    html[data-theme="light"] {
      color-scheme: light;
      --bg: #f4eee4;
      --panel: rgba(255,255,255,.74);
      --panel-2: rgba(120,84,33,.08);
      --line: rgba(88,66,26,.12);
      --text: #1d160d;
      --muted: rgba(29,22,13,.68);
      --gold: #d49327;
      --gold-2: #b46b18;
      --gold-3: #8f5f0f;
      --menu-bg: rgba(255, 251, 245, .98);
      --menu-hover: rgba(180, 107, 24, .08);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      font-family: "Plus Jakarta Sans", "Noto Sans SC", "Microsoft YaHei", sans-serif;
      background:
        radial-gradient(circle at 50% -10%, rgba(243,196,95,.20), transparent 34%),
        radial-gradient(circle at 12% 18%, rgba(236,139,56,.12), transparent 28%),
        radial-gradient(circle at 86% 20%, rgba(255,230,163,.08), transparent 26%),
        linear-gradient(180deg, #0c1018 0%, #07090d 48%, #030405 100%);
      overflow-x: hidden;
    }
    html[data-theme="light"] body {
      background:
        radial-gradient(circle at 50% -10%, rgba(243,196,95,.24), transparent 34%),
        radial-gradient(circle at 12% 18%, rgba(236,139,56,.10), transparent 28%),
        radial-gradient(circle at 86% 20%, rgba(255,230,163,.12), transparent 26%),
        linear-gradient(180deg, #fffaf3 0%, #f4eee4 48%, #ede4d6 100%);
    }
    .ambient-orb {
      position: fixed;
      pointer-events: none;
      z-index: 0;
      border-radius: 999px;
      filter: blur(32px);
      opacity: 0.28;
      mix-blend-mode: screen;
      background: radial-gradient(circle, rgba(243,196,95,.34) 0%, rgba(243,196,95,.12) 34%, rgba(236,139,56,.06) 58%, transparent 74%);
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
    .ambient-orb.orb-a {
      width: 420px;
      height: 420px;
      top: 14vh;
      left: -80px;
      animation-name: orbFloatA;
      animation-duration: 19s;
    }
    .ambient-orb.orb-b {
      width: 360px;
      height: 360px;
      top: 48vh;
      right: -70px;
      animation-name: orbFloatB;
      animation-duration: 23s;
    }
    .ambient-orb.orb-c {
      width: 300px;
      height: 300px;
      top: 74vh;
      left: 42vw;
      animation-name: orbFloatC;
      animation-duration: 17s;
    }
    body:before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .28;
      background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(to bottom, #000, transparent 72%);
    }
    body:after {
      content: "";
      position: fixed;
      left: var(--glow-x, 50vw);
      top: var(--glow-y, 22vh);
      width: 440px;
      height: 440px;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 0;
      background: radial-gradient(circle, rgba(243,196,95,.22), rgba(236,139,56,.10) 34%, transparent 68%);
      filter: blur(8px);
      opacity: .9;
      transition: opacity 180ms ease;
    }
    .wrap {
      width: min(1180px, calc(100vw - 32px));
      margin: 0 auto;
      padding: 54px 0 70px;
      position: relative;
      z-index: 1;
    }
    .landing-toolbar {
      position: fixed;
      top: 18px;
      right: 18px;
      z-index: 20;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .xhalo-global-brand {
      position: fixed;
      top: 18px;
      left: 18px;
      z-index: 20;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 40px;
      border-radius: 8px;
      text-decoration: none;
      white-space: nowrap;
      transition: opacity 180ms ease;
    }
    .xhalo-global-brand:hover { opacity: .84; }
    .xhalo-global-brand:focus-visible {
      outline: 2px solid var(--gold-2);
      outline-offset: 4px;
    }
    .xhalo-global-brand-mark {
      display: block;
      flex: 0 0 auto;
      width: 47px;
      height: 34px;
    }
    .xhalo-global-brand-word {
      font-family: Inter, "Segoe UI", "Plus Jakarta Sans", Arial, sans-serif;
      font-size: 28px;
      font-weight: 500;
      letter-spacing: -0.7px;
      line-height: 1;
      color: var(--text);
    }
    .locale-menu {
      position: relative;
      z-index: 40;
    }
    .lang-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 999px;
      color: var(--text);
      background: rgba(255,255,255,.08);
      font-weight: 800;
      cursor: pointer;
      backdrop-filter: blur(18px);
    }
    .theme-toggle-btn {
      justify-content: center;
      min-width: 38px;
      padding: 0;
      font-size: 18px;
      line-height: 1;
    }
    .locale-caret {
      color: var(--text-soft);
      font-size: 11px;
    }
    .locale-dropdown {
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      width: max-content;
      min-width: 156px;
      padding: 8px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 16px;
      background: var(--menu-bg);
      box-shadow: 0 22px 70px rgba(0,0,0,.42);
      backdrop-filter: blur(18px);
    }
    .locale-dropdown[hidden] {
      display: none;
    }
    .locale-option {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 36px;
      padding: 0 12px;
      border-radius: 11px;
      color: var(--text);
      text-decoration: none;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }
    .locale-option:hover,
    .locale-option.is-active {
      background: var(--menu-hover);
      color: #f6d992;
    }
    .hero {
      min-height: 620px;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 44px 0 34px;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(243,196,95,.34);
      border-radius: 999px;
      color: var(--gold-3);
      background: rgba(243,196,95,.10);
      padding: 8px 13px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .03em;
    }
    h1 {
      margin: 22px 0 0;
      font-size: clamp(48px, 7vw, 96px);
      line-height: .95;
      letter-spacing: -.06em;
      text-shadow: 0 18px 70px rgba(243,196,95,.18);
    }
    .subtitle {
      margin: 20px auto 0;
      max-width: 760px;
      color: var(--muted);
      font-size: clamp(18px, 2.2vw, 25px);
      line-height: 1.7;
    }
    .player-card {
      width: min(560px, 100%);
      margin: 34px auto 0;
      border: 1px solid var(--line);
      border-radius: 26px;
      background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
      box-shadow: 0 28px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.13);
      padding: 22px;
      backdrop-filter: blur(24px);
    }
    .player-card,
    .feature,
    .ai-feature,
    .faq details {
      transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
    }
    .player-card:hover,
    .player-card:focus-within,
    .feature:hover,
    .feature:focus-within,
    .ai-feature:hover,
    .ai-feature:focus-within,
    .faq details:hover,
    .faq details:focus-within {
      transform: translateY(-4px) scale(1.015);
      box-shadow: 0 24px 72px rgba(0,0,0,.28), 0 0 0 1px rgba(243,196,95,.12);
      border-color: rgba(243,196,95,.22);
    }
    .fake-player {
      display: grid;
      grid-template-columns: 44px 48px minmax(0,1fr) 48px;
      gap: 14px;
      align-items: center;
      color: rgba(255,255,255,.75);
      font-size: 13px;
    }
    .time-start {
      justify-self: start;
      font-variant-numeric: tabular-nums;
    }
    .time-end {
      justify-self: end;
      font-variant-numeric: tabular-nums;
    }
    .play {
      appearance: none;
      cursor: pointer;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      color: #261602;
      background: linear-gradient(135deg, var(--gold), var(--gold-2));
      box-shadow: 0 0 34px rgba(243,196,95,.32);
    }
    .play.loading {
      opacity: .72;
      cursor: wait;
    }
    .wave {
      position: relative;
      height: 12px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,.08);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 26px rgba(243,196,95,.26);
    }
    .wave:before {
      content: "";
      position: absolute;
      inset: -2px -35%;
      border-radius: inherit;
      background:
        linear-gradient(90deg,
          #ff6b35 0%,
          #ffb627 14%,
          #ffe66d 28%,
          #60d394 42%,
          #00c2ff 58%,
          #6c63ff 74%,
          #d65db1 88%,
          #ff6b35 100%);
      background-size: 220% 100%;
      animation: rainbowFlow 4.8s linear infinite, rainbowGlow 2s ease-in-out infinite;
    }
    .wave:after {
      content: "";
      position: absolute;
      inset: 2px;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
      mix-blend-mode: screen;
    }
    @keyframes rainbowFlow {
      from { background-position: 0% 50%; }
      to { background-position: 220% 50%; }
    }
    @keyframes rainbowGlow {
      0%, 100% { transform: scaleY(1); filter: saturate(1) brightness(1); }
      50% { transform: scaleY(1.08); filter: saturate(1.16) brightness(1.08); }
    }
    .speaker-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: fit-content;
      margin: 18px auto 0;
      padding: 10px 18px;
      border: 1px solid rgba(243,196,95,.34);
      border-radius: 999px;
      background: rgba(243,196,95,.13);
      color: var(--gold-3);
      font-weight: 800;
      box-shadow: 0 12px 44px rgba(243,196,95,.16);
    }
    .actions {
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 26px;
    }
    .btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 0 24px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      color: var(--text);
      background: rgba(255,255,255,.08);
      text-decoration: none;
      font-weight: 900;
      overflow: visible;
      cursor: pointer;
    }
    .btn.primary {
      border-color: rgba(243,196,95,.62);
      color: #1f1302;
      background: linear-gradient(135deg, #ffe6a3, #f3c45f 45%, #ec8b38);
      box-shadow: 0 18px 54px rgba(243,196,95,.26);
    }
    .burst {
      position: fixed;
      left: 0;
      top: 0;
      width: 8px;
      height: 8px;
      pointer-events: none;
      z-index: 50;
    }
    .spark {
      position: absolute;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--gold);
      box-shadow: 0 0 18px rgba(243,196,95,.8);
      animation: explode 760ms cubic-bezier(.16,.9,.24,1) forwards;
    }
    @keyframes explode {
      to {
        transform: translate(var(--x), var(--y)) scale(.12);
        opacity: 0;
      }
    }
    .section-title {
      margin: 10px 0 28px;
      text-align: center;
      font-size: clamp(30px, 4vw, 44px);
      letter-spacing: -.04em;
    }
    .ai-features {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      margin-bottom: 52px;
    }
    .ai-feature {
      min-height: 220px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
      padding: 28px;
      box-shadow: 0 20px 70px rgba(0,0,0,.22);
    }
    .ai-feature h3 {
      margin: 0;
      font-size: 20px;
      line-height: 1.4;
    }
    .ai-feature p {
      margin: 18px 0 0;
      color: var(--muted);
      line-height: 1.7;
      font-size: 15px;
    }
    .features {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }
    .feature {
      min-height: 220px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
      padding: 28px;
      box-shadow: 0 20px 70px rgba(0,0,0,.22);
    }
    .icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: var(--gold-3);
      background: rgba(243,196,95,.12);
      border: 1px solid rgba(243,196,95,.24);
      font-size: 22px;
      margin-bottom: 24px;
    }
    .feature h3 {
      margin: 0;
      font-size: 20px;
      line-height: 1.4;
    }
    .feature p {
      margin: 18px 0 0;
      color: var(--muted);
      line-height: 1.7;
      font-size: 15px;
    }
    .statement {
      margin: 48px auto 80px;
      max-width: 900px;
      text-align: center;
      color: rgba(255,250,240,.78);
      font-size: 20px;
      line-height: 1.8;
    }
    .statement strong {
      display: block;
      margin-top: 18px;
      color: var(--gold-3);
      font-size: 23px;
    }
    .landing-pricing {
      margin: 0 0 72px;
    }
    .landing-pricing .pricing-section {
      margin-top: 0;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      padding: 24px;
      box-shadow: 0 22px 72px rgba(0,0,0,.18);
    }
    .landing-pricing .pricing-hero {
      display: grid;
      justify-items: center;
      gap: 12px;
      text-align: center;
      margin-bottom: 2px;
    }
    .landing-pricing .pricing-hero h3 {
      margin: 0;
      text-align: center;
    }
    .landing-pricing .pricing-hero p {
      margin: 0;
      max-width: 960px;
      text-align: center;
      line-height: 1.7;
      color: var(--muted);
    }
    .landing-pricing .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      align-items: stretch;
      margin-top: 18px;
    }
    .landing-pricing .pricing-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 0 14px;
      border: 1px solid rgba(243, 196, 95, 0.35);
      background: rgba(243, 196, 95, 0.15);
      color: #ffe8a8;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.02em;
    }
    .landing-pricing .plan-card {
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      isolation: isolate;
      min-height: 100%;
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }
    .landing-pricing .plan-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(115deg, transparent 0%, transparent 34%, rgba(255,255,255,.02) 44%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.03) 56%, transparent 66%, transparent 100%);
      transform: translateX(-155%);
      opacity: 0;
      pointer-events: none;
    }
    .landing-pricing .plan-card::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border: 1.5px solid transparent;
      border-radius: inherit;
      box-sizing: border-box;
      opacity: 0;
    }
    .landing-pricing .plan-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 26px 80px rgba(0,0,0,.28);
    }
    .landing-pricing .plan-card:hover::before {
      opacity: 1;
      animation: landingPlanSweep 2s linear infinite;
    }
    .landing-pricing .plan-card:hover::after,
    .landing-pricing .plan-card:focus-within::after,
    .landing-pricing .plan-card.plan-highlight::after {
      opacity: 1;
      animation: landingPlanBorderCycle 2.4s linear infinite;
    }
    .landing-pricing .plan-card.plan-highlight {
      box-shadow: 0 28px 90px rgba(243, 196, 95, 0.12);
      border-color: rgba(243, 196, 95, 0.18);
    }
    .landing-pricing .plan-card-header {
      display: grid;
      gap: 6px;
      justify-items: center;
      text-align: center;
    }
    .landing-pricing .plan-card-title-row {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      text-align: center;
    }
    .landing-pricing .plan-card.has-tag {
      padding-top: 48px;
    }
    .landing-pricing .plan-card h4 {
      margin: 0;
      font-size: 16px;
      line-height: 1.2;
      text-align: center;
    }
    .landing-pricing .plan-card p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.65;
      text-align: center;
    }
    .landing-pricing .plan-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      padding: 0 10px;
      border: 1px solid rgba(243, 196, 95, 0.22);
      background: rgba(243, 196, 95, 0.12);
      color: #ffe3a1;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
    }
    .landing-pricing .plan-features {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 8px;
    }
    .landing-pricing .plan-features li {
      display: grid;
      grid-template-columns: 16px minmax(0, 1fr);
      gap: 8px;
      align-items: start;
      font-size: 12px;
      line-height: 1.6;
    }
    .landing-pricing .plan-features li::before {
      content: "✓";
      color: #f6d992;
      font-weight: 800;
    }
    .landing-pricing .plan-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      height: 48px;
      width: 100%;
      border: 1px solid rgba(243, 196, 95, 0.3);
      background: rgba(255,255,255,.02);
      color: #fff4cf;
      text-decoration: none;
      font-weight: 700;
      position: relative;
      overflow: visible;
      margin-top: auto;
      transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    }
    .landing-pricing .plan-action:hover {
      background: rgba(243, 196, 95, 0.14);
      color: #fff;
      border-color: rgba(243, 196, 95, 0.62);
    }
    .landing-pricing .plan-action[aria-disabled="true"] {
      pointer-events: none;
      opacity: 0.66;
      background: rgba(243, 196, 95, 0.12);
    }
    .landing-pricing .pricing-compare {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }
    .landing-pricing .pricing-compare-title {
      margin: 0;
      font-size: 20px;
      text-align: center;
    }
    .landing-pricing .pricing-compare-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 13px;
    }
    .landing-pricing .pricing-compare-table th,
    .landing-pricing .pricing-compare-table td {
      border: 1px solid var(--line);
      padding: 12px 10px;
      vertical-align: top;
      text-align: left;
      overflow-wrap: anywhere;
    }
    .landing-pricing .pricing-compare-table th {
      color: #fff2c6;
      background: rgba(255,255,255,.03);
    }
    .landing-pricing .pricing-compare-table td {
      color: var(--muted);
      line-height: 1.65;
    }
    .landing-pricing .pricing-compare-table thead th:nth-child(n+2),
    .landing-pricing .pricing-compare-table tbody td {
      text-align: center;
    }
    .landing-pricing .pricing-compare-table tbody td:nth-child(1),
    .landing-pricing .pricing-compare-table tbody th:nth-child(1) {
      text-align: left;
    }
    .landing-pricing .pricing-contact {
      display: grid;
      justify-items: center;
      gap: 10px;
      margin-top: 16px;
      text-align: center;
    }
    .landing-pricing .pricing-contact p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
    }
    @keyframes landingPlanSweep {
      0% { transform: translateX(-155%); }
      100% { transform: translateX(155%); }
    }
    @keyframes landingPlanBorderCycle {
      0% { border-color: #f3c45f; }
      34% { border-color: #22d3ee; }
      67% { border-color: #f97316; }
      100% { border-color: #f3c45f; }
    }
    .faq {
      width: min(760px, 100%);
      margin: 0 auto;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(255,255,255,.06);
      padding: 12px;
    }
    details {
      border-radius: 16px;
      background: rgba(0,0,0,.18);
      padding: 16px 18px;
    }
    details + details { margin-top: 8px; }
    summary {
      cursor: pointer;
      font-weight: 800;
      list-style: none;
    }
    summary::-webkit-details-marker { display: none; }
    details p {
      margin: 12px 0 0;
      color: var(--muted);
      line-height: 1.7;
    }
    .footer {
      margin-top: 56px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      color: rgba(255,250,240,.58);
      font-size: 14px;
    }
    .footer a {
      color: var(--gold-3);
      text-decoration: none;
      font-weight: 800;
    }
    .footer-nav {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }
    html[data-theme="light"] .player-card,
    html[data-theme="light"] .feature,
    html[data-theme="light"] .ai-feature,
    html[data-theme="light"] .faq,
    html[data-theme="light"] details,
    html[data-theme="light"] .landing-pricing .plan-card,
    html[data-theme="light"] .landing-pricing .table-shell {
      background: rgba(255, 255, 255, 0.78);
      box-shadow: 0 18px 52px rgba(125, 95, 44, 0.12);
    }
    html[data-theme="light"] .wave,
    html[data-theme="light"] .landing-pricing .pricing-compare-table th {
      background: rgba(120, 84, 33, 0.06);
      box-shadow: inset 0 0 0 1px rgba(120, 84, 33, 0.08);
    }
    html[data-theme="light"] .footer {
      color: rgba(29, 22, 13, 0.62);
    }
    @media (max-width: 920px) {
      .ai-features,
      .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .landing-pricing .pricing-grid { grid-template-columns: 1fr; }
      .hero { min-height: auto; }
    }
    @media (max-width: 560px) {
      .xhalo-global-brand {
        top: 20px;
        left: 14px;
        gap: 4px;
        height: 32px;
      }
      .xhalo-global-brand-mark {
        width: 38px;
        height: 27px;
      }
      .xhalo-global-brand-word {
        font-size: 22px;
        letter-spacing: -0.55px;
      }
      .landing-toolbar {
        top: 16px;
        right: 14px;
      }
      .ai-features,
      .features { grid-template-columns: 1fr; }
      .player-card {
        padding: 18px;
        border-radius: 22px;
      }
      .fake-player {
        grid-template-columns: minmax(44px, 1fr) 52px minmax(44px, 1fr);
        grid-template-areas:
          "time-start play time-end"
          "wave wave wave";
        gap: 14px 12px;
      }
      .play { grid-area: play; justify-self: center; }
      .time-start { grid-area: time-start; justify-self: start; }
      .time-end { grid-area: time-end; justify-self: end; display: block; }
      .wave {
        grid-area: wave;
        width: 100%;
      }
    }
    @keyframes orbFloatA {
      0% { transform: translate3d(0, 0, 0) scale(1); opacity: .22; }
      50% { transform: translate3d(70px, 36px, 0) scale(1.08); opacity: .3; }
      100% { transform: translate3d(24px, -30px, 0) scale(.94); opacity: .18; }
    }
    @keyframes orbFloatB {
      0% { transform: translate3d(0, 0, 0) scale(1); opacity: .16; }
      50% { transform: translate3d(-86px, 32px, 0) scale(1.09); opacity: .28; }
      100% { transform: translate3d(-28px, -24px, 0) scale(.95); opacity: .2; }
    }
    @keyframes orbFloatC {
      0% { transform: translate3d(0, 0, 0) scale(.92); opacity: .18; }
      50% { transform: translate3d(48px, -42px, 0) scale(1.06); opacity: .24; }
      100% { transform: translate3d(-34px, 24px, 0) scale(1); opacity: .16; }
    }