:root {
      --font-body: "Tahoma", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
      --text-color: #000080;
      --bg-alt: #f2f2f2;
      --header-bg: #7733ff;
      --header-fg: #ffffff;
  }

  * {
      box-sizing: border-box;
  }

  body {
      font-family: var(--font-body);
      color: var(--text-color);
      max-width: 80rem;
      margin: 0 auto;
      padding: 0.75rem;
      line-height: 1.6;
  }

  h1,
  h2,
  h3 {
      margin: 0.9em 0 0.45em;
      line-height: 1.2;
      font-weight: 700;
      text-wrap: pretty;
  }

h1 { font-size: clamp(1.45rem, 2.4vw, 2.05rem); }
h2 { font-size: clamp(1.2rem, 1.95vw, 1.65rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }


  .lc {
      color: #0000ff;
      font-weight: inherit;
      font-size: inherit;
      line-height: inherit;
      white-space: nowrap;
  }

  img {
      max-width: 100%;
      height: auto;
      width: auto;
      display: block;
  }

  .auto-style1 {
      font-family: var(--font-body);
      font-size: 1.125rem;
  }

  .auto-style2 {
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 700;
  }

  .viastar {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
  }

  .viastar table {
      width: auto;
      max-width: 100%;
      border-collapse: collapse;
      margin: 0 auto;
  }

  .viastar th,
  .viastar td {
      text-align: left;
      padding: 0.25rem 0.35rem;
      vertical-align: top;
      word-break: normal;
      overflow-wrap: anywhere;
  }

  .viastar tr:nth-child(4n-2),
  .viastar tr:nth-child(4n-3) {
      background-color: #f2f2f2;
  }

  .viastar th {
      background-color: var(--header-bg);
      color: var(--header-fg);
      cursor: pointer;
      font-weight: 700;
      font-size: 14px;
  }

  @media (max-width: 40rem) {
      body {
          padding: 0.6rem;
      }

      .viastar th,
      .viastar td {
          padding: 0.25rem 0.3rem;
      }
  }