:root {
        color-scheme: light dark;
        --bg: #f8fafc;
        --surface: #ffffff;
        --surface-soft: color-mix(in srgb, var(--surface) 76%, var(--bg));
        --text: #16181d;
        --muted: #5d6674;
        --line: #d8e0ea;
        --accent: #4f65d9;
        --accent-strong: #3041a6;
        --ring: color-mix(in srgb, var(--accent) 24%, transparent);
        --shadow: 0 20px 60px rgba(35, 42, 68, 0.12);
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background: var(--bg);
        color: var(--text);
        line-height: 1.6;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        overflow-x: clip;
        overscroll-behavior-y: contain;
      }
      a, button, summary { color: inherit; touch-action: manipulation; }
      a { text-underline-offset: 3px; }
      a:focus-visible, summary:focus-visible {
        outline: 3px solid var(--ring);
        outline-offset: 3px;
        border-radius: 8px;
      }
      .page { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
      .skip {
        position: absolute;
        inset-inline-start: 12px;
        top: 12px;
        z-index: 99;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 8px;
      }
      .skip:focus {
        width: auto;
        height: auto;
        padding: 10px;
        clip-path: none;
      }
      .site-header {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 14px 0;
        background: color-mix(in srgb, var(--bg) 86%, transparent);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
      }
      .brand, .nav, .language-row, .actions, .proof-row {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }
      .brand {
        min-height: 44px;
        font-weight: 850;
        text-decoration: none;
      }
      .brand img, .install-bar img { width: 42px; height: 42px; border-radius: 10px; }
      .nav a, .language-row a, footer a, .secondary-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        color: var(--muted);
        text-decoration: none;
      }
      .nav a { padding: 0 10px; border-radius: 8px; }
      .nav a:hover, .language-row a:hover, footer a:hover, .secondary-link:hover { color: var(--text); text-decoration: underline; }
      .breadcrumbs {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        margin: 12px 0 0;
        color: var(--muted);
        font-size: 14px;
        font-weight: 750;
        overflow: hidden;
      }
      .breadcrumbs a {
        color: var(--muted);
        text-decoration: none;
      }
      .breadcrumbs a:hover {
        color: var(--text);
        text-decoration: underline;
      }
      .breadcrumbs span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .breadcrumbs .separator { flex: 0 0 auto; color: var(--accent-strong); }
      .section-nav {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin: 14px 0 0;
        color: var(--muted);
        font-size: 14px;
        font-weight: 750;
      }
      .section-nav span {
        color: var(--text);
        font-weight: 850;
      }
      .section-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface-soft);
        color: var(--muted);
        text-decoration: none;
        white-space: nowrap;
      }
      .section-nav a:hover {
        color: var(--text);
        border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
      }
      .hero {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.95fr);
        gap: 48px;
        align-items: center;
        padding: 40px 0 58px;
      }
      .eyebrow {
        margin: 0 0 14px;
        color: var(--accent-strong);
        font-size: 14px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0;
      }
      h1 {
        margin: 0;
        font-size: 66px;
        line-height: 1;
        letter-spacing: 0;
      }
      h2 { margin: 0 0 16px; font-size: 38px; line-height: 1.12; letter-spacing: 0; }
      h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.25; letter-spacing: 0; }
      p { margin: 0; }
      .lede { max-width: 710px; margin-top: 24px; color: var(--muted); font-size: 21px; }
      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        padding: 0 22px;
        border-radius: 8px;
        background: var(--accent);
        color: #fff;
        font-weight: 850;
        text-decoration: none;
        box-shadow: var(--shadow);
        cursor: pointer;
        transition: background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
      }
      .button:hover { background: var(--accent-strong); }
      .secondary-link { color: var(--accent-strong); font-weight: 750; text-decoration: none; }
      .actions { margin-top: 32px; }
      .proof-row { margin-top: 22px; color: var(--muted); font-size: 15px; }
      .proof { display: inline-flex; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
      .quick-answer {
        max-width: 720px;
        margin-top: 26px;
        padding: 18px;
        border: 1px solid var(--line);
        border-left: 4px solid var(--accent);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: 0 12px 34px rgba(35, 42, 68, 0.08);
      }
      .quick-answer strong {
        display: block;
        margin-bottom: 6px;
        color: var(--text);
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0;
      }
      .quick-answer p { color: var(--muted); font-size: 17px; }
      .app-store-status {
        min-height: 24px;
        margin-top: 12px;
        color: var(--muted);
        font-size: 14px;
        font-weight: 700;
      }
      [data-app-store-open-state="opening"] .app-store-status,
      [data-app-store-open-state="fallback"] .app-store-status {
        color: var(--accent-strong);
      }
      .install-panel {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: var(--shadow);
        overflow: hidden;
      }
      .install-panel-top {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 22px;
        border-bottom: 1px solid var(--line);
      }
      .install-panel-top img {
        width: 74px;
        height: 74px;
        border-radius: 18px;
        box-shadow: 0 16px 32px rgba(35, 42, 68, 0.16);
      }
      .install-panel h2 { margin: 0; font-size: 28px; }
      .install-panel p {
        color: var(--muted);
      }
      .install-panel-body { padding: 22px; }
      .app-store-facts {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;
      }
      .app-store-facts span {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        padding: 0 10px;
        border-radius: 8px;
        background: var(--surface-soft);
        color: var(--text);
        font-size: 14px;
        font-weight: 800;
      }
      .panel-kicker {
        display: block;
        margin-bottom: 5px;
        color: var(--accent-strong);
        font-size: 13px;
        font-weight: 850;
        text-transform: uppercase;
      }
      .source-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 18px;
      }
      .source-chip {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0 11px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface-soft);
        color: var(--muted);
        font-size: 14px;
        font-weight: 700;
      }
      .install-panel .button { width: 100%; margin-top: 20px; }
      .file-chip { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--muted); overflow-wrap: anywhere; }
      .section { padding: 58px 0; border-top: 1px solid var(--line); }
      .section-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
      .section-copy { max-width: 780px; color: var(--muted); font-size: 18px; }
      .visual-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; margin-top: 26px; }
      .visual-card { margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; box-shadow: 0 18px 44px rgba(35, 42, 68, 0.1); }
      .visual-card picture { display: block; }
      .visual-card img { display: block; width: 100%; height: auto; aspect-ratio: 1242 / 2688; object-fit: contain; background: var(--surface-soft); }
      .visual-card figcaption { padding: 12px 14px; color: var(--muted); font-size: 14px; font-weight: 750; }
      .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
      .card { padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
      .card a { text-decoration: none; }
      .card a:hover { text-decoration: underline; }
      .card p, .faq-item p, .related p { color: var(--muted); }
      .answer-target-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
      .answer-target {
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
      }
      .answer-target h3 { font-size: 18px; }
      .answer-target p { color: var(--muted); }
      .intent-matrix-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 26px; }
      .intent-matrix-card { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
      .intent-matrix-card h3 { font-size: 18px; }
      .intent-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
      .intent-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 10px; border-radius: 8px; background: var(--surface-soft); color: var(--text); font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
      .intent-query-list { margin: 14px 0 0; padding-left: 20px; color: var(--muted); }
      .intent-query-list li { margin-top: 8px; overflow-wrap: anywhere; }
      .citation-card {
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
        gap: 22px;
        padding: 24px;
        border: 1px solid var(--line);
        border-left: 4px solid var(--accent);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: 0 18px 44px rgba(35, 42, 68, 0.08);
      }
      .citation-copy h2 { margin-bottom: 12px; }
      .citation-copy p { color: var(--muted); font-size: 18px; }
      .citation-facts {
        display: grid;
        gap: 10px;
        margin: 0;
      }
      .citation-facts div {
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface-soft);
      }
      .citation-facts dt {
        color: var(--accent-strong);
        font-size: 13px;
        font-weight: 850;
        text-transform: uppercase;
      }
      .citation-facts dd {
        margin: 0;
        color: var(--text);
        overflow-wrap: anywhere;
      }
      .citation-facts a { color: var(--accent-strong); font-weight: 800; }
      .steps { counter-reset: step; display: grid; gap: 14px; margin-top: 26px; }
      .step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
      .step::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 850; }
      .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
      .faq-item { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
      .article-body { display: grid; gap: 30px; }
      .article-body article { max-width: 820px; }
      .article-body p { color: var(--muted); font-size: 18px; }
      .related { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
      .related img { width: 72px; height: 72px; border-radius: 16px; }
      .language-menu {
        max-width: 860px;
        margin-top: 22px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
      }
      .language-menu summary {
        min-height: 52px;
        padding: 0 16px;
        cursor: pointer;
        font-weight: 850;
      }
      .language-row { padding: 0 16px 16px; font-size: 14px; }
      .language-row a { min-height: 44px; padding: 0 10px; border-radius: 8px; }
      .language-row a[aria-current="page"] { color: var(--text); font-weight: 850; background: var(--surface-soft); }
      footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px 0 42px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
      .install-bar { display: none; }
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          scroll-behavior: auto !important;
          transition-duration: 0.01ms !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
        }
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #111418;
          --surface: #1a1f26;
          --surface-soft: color-mix(in srgb, var(--surface) 78%, var(--bg));
          --text: #f6f8fb;
          --muted: #c5ced8;
          --line: #303844;
          --accent: #7d8dff;
          --accent-strong: #a8b2ff;
          --ring: color-mix(in srgb, var(--accent) 34%, transparent);
          --shadow: 0 22px 70px rgba(0, 0, 0, 0.3);
        }
      }
      @media (max-width: 900px) {
        .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 24px; }
        h1 { font-size: 52px; }
        h2 { font-size: 32px; }
        .cards, .faq, .visual-gallery, .answer-target-grid, .intent-matrix-grid, .citation-card { grid-template-columns: 1fr; }
        .related { grid-template-columns: 56px minmax(0, 1fr); }
        .related .button { grid-column: 1 / -1; }
        .related img { width: 56px; height: 56px; border-radius: 13px; }
      }
      @media (max-width: 720px) {
        body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
        .site-header, footer { align-items: flex-start; flex-direction: column; }
        .site-header { gap: 10px; padding: 10px 0; }
        .nav { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .nav a { justify-content: center; border: 1px solid var(--line); background: var(--surface); }
        .nav a:last-child { grid-column: 1 / -1; background: var(--accent); color: #fff; font-weight: 850; }
        .section-nav {
          flex-wrap: nowrap;
          overflow-x: auto;
          padding-bottom: 4px;
          scrollbar-width: none;
        }
        .section-nav::-webkit-scrollbar { display: none; }
        .page { width: min(100% - 28px, 1120px); }
        h1 { font-size: 38px; line-height: 1.05; }
        h2 { font-size: 28px; }
        .lede { font-size: 18px; }
        .hero { padding-bottom: 42px; }
        .quick-answer { padding: 16px; }
        .citation-card { padding: 18px; }
        .citation-facts div { grid-template-columns: 1fr; gap: 6px; }
        .button { width: 100%; }
        .section { padding: 42px 0; }
        .install-panel-top, .install-panel-body { padding: 18px; }
        .source-chip { min-height: 34px; }
        .install-bar {
          position: fixed;
          right: 12px;
          bottom: calc(12px + env(safe-area-inset-bottom));
          left: 12px;
          z-index: 30;
          display: grid;
          grid-template-columns: 44px minmax(0, 1fr) auto;
          gap: 12px;
          align-items: center;
          max-width: 520px;
          margin: 0 auto;
          padding: 12px;
          border: 1px solid var(--line);
          border-radius: 8px;
          background: var(--surface);
          box-shadow: var(--shadow);
          text-decoration: none;
          opacity: 0;
          pointer-events: none;
          transform: translateY(calc(100% + 24px));
          transition: opacity 180ms ease, transform 180ms ease;
        }
        .install-bar[data-visible="true"] {
          opacity: 1;
          pointer-events: auto;
          transform: translateY(0);
        }
        .install-copy { min-width: 0; }
        .install-copy strong, .install-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .install-copy small { color: var(--muted); font-size: 13px; }
        .install-action { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 850; }
      }