@font-face {
      font-family: 'Newsreader';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('/assets/fonts/newsreader-regular.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Newsreader';
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url('/assets/fonts/newsreader-italic.woff2') format('woff2');
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Newsreader', serif;
      font-size: 16px;
      line-height: 1.5;
      color: #000000;
      background: #FFFFFF;
      max-width: 800px;
      margin: 0 auto;
      padding: 40px;
    }
    h1 { font-size: 28px; font-weight: 700; margin-bottom: 12px; }
    h2 { font-size: 20px; font-weight: 700; margin-top: 28px; margin-bottom: 12px; }
    p { margin-bottom: 12px; }
    a { color: #0000EE; text-decoration: none; padding: 4px 0; }
    a:visited { color: #551A8B; }
    a:hover { text-decoration: underline; }
    a:focus { outline: 2px solid #0000EE; outline-offset: 2px; }
    hr { border: none; border-top: 1px solid #000000; margin: 24px 0; }
    hr.major { border-top-width: 2px; }
    ul { list-style: disc; padding-left: 20px; margin-bottom: 12px; line-height: 1.7; }
    .back-nav { margin-bottom: 24px; font-size: 16px; }
    .footer-text { color: #4A4A4A; font-size: 14px; }
    .theme-toggle {
      position: fixed; top: 16px; right: 16px;
      background: none; border: 1px solid #000000; border-radius: 50%;
      width: 44px; height: 44px; font-size: 1rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      z-index: 1000; transition: background-color 0.2s, border-color 0.2s;
      color: #000000;
    }
    .theme-toggle:hover { background-color: #F0F0F0; }
    @media (max-width: 768px) {
      body { padding: 30px 30px; }
      h1 { font-size: 26px; }
    }
    @media (max-width: 600px) {
      body { padding: 20px; }
      h1 { font-size: 24px; }
      .header-row nav a { padding: 12px 4px; }
    }

    html[data-theme="dark"] body { background-color: #111111; color: #FAFAFA; }
    html[data-theme="dark"] a { color: #6cb4ee; }
    html[data-theme="dark"] a:visited { color: #9b8ec4; }
    html[data-theme="dark"] a:focus { outline-color: #6cb4ee; }
    html[data-theme="dark"] hr { border-top-color: #2A2A2A; }
    html[data-theme="dark"] .footer-text { color: #888888; }
    html[data-theme="dark"] .theme-toggle { color: #FAFAFA; border-color: #2A2A2A; }
    html[data-theme="dark"] .theme-toggle:hover { background-color: #2A2A2A; }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) body { background-color: #111111; color: #FAFAFA; }
      html:not([data-theme]) a { color: #6cb4ee; }
      html:not([data-theme]) a:visited { color: #9b8ec4; }
      html:not([data-theme]) a:focus { outline-color: #6cb4ee; }
      html:not([data-theme]) hr { border-top-color: #2A2A2A; }
      html:not([data-theme]) .footer-text { color: #888888; }
      html:not([data-theme]) .theme-toggle { color: #FAFAFA; border-color: #2A2A2A; }
      html:not([data-theme]) .theme-toggle:hover { background-color: #2A2A2A; }
    }
  
    html { scroll-behavior: smooth; }
    body { max-width: 880px; }
    h1 { font-size: 38px; line-height: 1.13; letter-spacing: -.5px; }
    h2 { font-size: 26px; margin-top: 36px; }
    h3 { font-size: 20px; line-height: 1.3; margin: 24px 0 8px; }
    p, li { font-size: 18px; }
    .back-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-right: 32px; }
    .back-nav a { display: inline-block; padding: 10px 0; }
    .skip-link { position: absolute; left: -9999px; }
    .skip-link:focus { position: static; display: block; padding: 12px; }
    .eyebrow, .meta, .caption, figcaption { color: #4A4A4A; font-size: 15px; }
    .eyebrow { letter-spacing: 1px; text-transform: uppercase; }
    .hero { display: grid; grid-template-columns: 1fr 230px; gap: 34px; align-items: center; margin: 30px 0 40px; }
    .hero p { margin-top: 16px; }
    .hero img { width: 230px; height: auto; border-radius: 24px; display: block; }
    .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
    .brand img { width: 48px; height: 48px; border-radius: 11px; }
    .brand p { margin: 0; }
    .store-badge { display: inline-block; padding: 10px 0; line-height: 0; }
    .store-badge svg { width: 180px; height: auto; }
    .contents { display: flex; flex-wrap: wrap; gap: 0 22px; padding: 8px 0; border-top: 1px solid; border-bottom: 1px solid; }
    .contents a { padding: 10px 0; }
    section { scroll-margin-top: 20px; }
    .feature-list { list-style: none; padding: 0; }
    .feature-list li { padding: 12px 0; border-bottom: 1px solid #dddddd; }
    .screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 25px 0; }
    figure { min-width: 0; }
    .screens img { width: 100%; height: auto; border-radius: 18px; display: block; }
    figcaption { margin-top: 12px; line-height: 1.4; }
    .table-scroll { overflow-x: auto; margin: 20px 0; }
    table { width: 100%; border-collapse: collapse; text-align: left; font-size: 16px; line-height: 1.5; }
    th, td { padding: 14px 12px; border-bottom: 1px solid #cccccc; vertical-align: top; }
    th { border-top: 1px solid; }
    .comparison { min-width: 620px; }
    .comparison th:first-child { width: 20%; }
    .comparison th:nth-child(2) { width: 30%; }
    caption { text-align: left; padding-bottom: 12px; font-size: 15px; color: #4A4A4A; }
    ol { padding-left: 26px; }
    .steps li { margin: 18px 0; padding-left: 5px; }
    .steps h3 { display: inline; font-size: 18px; }
    .steps p { margin: 4px 0 0; }
    .faq-item { padding-bottom: 8px; border-bottom: 1px solid #dddddd; }
    .note { border-left: 3px solid; padding: 4px 0 4px 18px; margin: 22px 0; }
    .article-lead { font-size: 21px; }
    code { font-size: .85em; overflow-wrap: anywhere; }
    footer { margin-top: 30px; }
    html[data-theme="dark"] { background: #111111; }
    html[data-theme="dark"] .eyebrow, html[data-theme="dark"] .meta,
    html[data-theme="dark"] figcaption, html[data-theme="dark"] caption { color: #aaaaaa; }
    html[data-theme="dark"] td, html[data-theme="dark"] .feature-list li,
    html[data-theme="dark"] .faq-item { border-bottom-color: #444444; }
    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) { background: #111111; }
      html:not([data-theme]) .eyebrow, html:not([data-theme]) .meta,
      html:not([data-theme]) figcaption, html:not([data-theme]) caption { color: #aaaaaa; }
      html:not([data-theme]) td, html:not([data-theme]) .feature-list li,
      html:not([data-theme]) .faq-item { border-bottom-color: #444444; }
    }
    @media (max-width: 600px) {
      h1 { font-size: 32px; }
      h2 { font-size: 25px; }
      .hero { grid-template-columns: 1fr; gap: 24px; }
      .hero > figure { max-width: 230px; margin: 0 auto; }
      .screens { gap: 12px; }
      .screens img { border-radius: 10px; }
      figcaption { font-size: 14px; }
      th, td { padding: 10px 8px; }
    }
    @media (max-width: 390px) { .screens { grid-template-columns: 1fr; max-width: 250px; margin: 24px auto; } }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }