:root {
      color-scheme: light;
      --surface: #f8f9fb;
      --surface-dim: #d8dadc;
      --surface-container-lowest: #ffffff;
      --surface-container-low: #f2f4f6;
      --surface-container: #eceef0;
      --surface-container-high: #e6e8ea;
      --surface-container-highest: #e0e3e5;
      --on-surface: #191c1e;
      --on-surface-variant: #424751;
      --outline: #727782;
      --outline-variant: #c2c6d2;
      --primary: #00356a;
      --primary-rail: #002d5a;
      --primary-container: #004b93;
      --primary-soft: #d6e3ff;
      --primary-soft-dim: #a8c8ff;
      --secondary: #006d38;
      --secondary-bright: #00a14b;
      --secondary-hover: #008d41;
      --secondary-fixed: #86faaa;
      --tertiary: #725c00;
      --atg-yellow: #ffcc00;
      --error: #ba1a1a;
      --white: #ffffff;
      --black: #000000;
      --shadow-card: 0 4px 12px rgb(0 0 0 / 0.05);
      --shadow-popover: 0 8px 24px rgb(0 0 0 / 0.12);
      --radius-sm: 0.25rem;
      --radius: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-full: 9999px;
      --sidebar-width: 20rem;
      --rail-width: 5rem;
      --content-max: 90rem;
      --page-gutter: clamp(1rem, 0.65rem + 1.5vw, 2.5rem);
      --header-info: 2.5rem;
      --header-brand: 4rem;
      --sticky-offset: calc(var(--header-info) + var(--header-brand));
      --anchor-offset: calc(var(--sticky-offset) + 5rem);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    html {
      min-inline-size: 20rem;
      background: var(--surface);
      scroll-behavior: smooth;
    }

    body {
      min-block-size: 100dvh;
      margin: 0;
      background: var(--surface);
      color: var(--on-surface);
      font: 400 1rem/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    button {
      font: inherit;
    }

    img {
      display: block;
      max-inline-size: 100%;
      block-size: auto;
    }

    table {
      inline-size: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
    }

    th,
    td {
      padding: 0.875rem 1rem;
      border-block-end: 1px solid var(--outline-variant);
      text-align: start;
      vertical-align: top;
    }

    th {
      color: var(--primary);
      font-weight: 800;
      background: var(--surface-container-low);
    }

    :focus-visible {
      outline: 3px solid var(--atg-yellow);
      outline-offset: 3px;
    }

    .material-symbols-outlined {
      display: inline-block;
      vertical-align: middle;
      font-family: "Material Symbols Outlined";
      font-weight: normal;
      font-style: normal;
      font-size: 1.5rem;
      line-height: 1;
      text-transform: none;
      white-space: nowrap;
      direction: ltr;
      font-feature-settings: "liga";
      -webkit-font-feature-settings: "liga";
      font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
    }

    .skip-link {
      position: fixed;
      inset-block-start: 0.75rem;
      inset-inline-start: 0.75rem;
      z-index: 90;
      padding: 0.75rem 1rem;
      border-radius: var(--radius);
      background: var(--atg-yellow);
      color: var(--primary);
      font-weight: 800;
      transform: translateY(-140%);
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    .sr-only {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .layout {
      min-block-size: 100dvh;
    }

    .sidebar {
      position: fixed;
      inset: 0 auto 0 0;
      z-index: 60;
      display: flex;
      inline-size: var(--sidebar-width);
      block-size: 100dvh;
      background: var(--primary);
      color: var(--white);
    }

    .rail {
      inline-size: var(--rail-width);
      flex: 0 0 var(--rail-width);
      padding-block: 1rem;
      border-inline-end: 1px solid rgb(255 255 255 / 0.1);
      background: var(--primary-rail);
      color: var(--primary-soft-dim);
    }

    .rail-button,
    .rail-link {
      display: flex;
      inline-size: 100%;
      min-block-size: 4.5rem;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 0.35rem;
      border: 0;
      background: transparent;
      color: inherit;
      cursor: pointer;
      font-size: 0.72rem;
      font-weight: 800;
    }

    .rail-button:hover,
    .rail-link:hover {
      background: rgb(255 255 255 / 0.08);
      color: var(--white);
      text-decoration: none;
    }

    .rail-link.is-active {
      color: var(--secondary-fixed);
    }

    .sidebar-panel {
      min-inline-size: 0;
      flex: 1;
      padding: 1.5rem 1rem 5.5rem;
      overflow-y: auto;
      scrollbar-color: rgb(255 255 255 / 0.35) transparent;
      scrollbar-width: thin;
    }

    .sidebar-title {
      margin: 0 0 1rem;
      padding-inline: 0.75rem;
      color: var(--primary-soft-dim);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .side-nav {
      display: grid;
      gap: 0.25rem;
      margin-block-end: 2rem;
    }

    .side-nav a,
    .side-nav button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-block-size: 2.5rem;
      padding: 0.55rem 0.75rem;
      border: 0;
      border-radius: var(--radius-sm);
      background: transparent;
      color: var(--primary-soft-dim);
      font-size: 0.95rem;
      font-weight: 600;
      text-align: start;
      cursor: pointer;
    }

    .side-nav a:hover,
    .side-nav button:hover {
      background: rgb(255 255 255 / 0.07);
      color: var(--white);
      text-decoration: none;
    }

    .side-nav .is-active {
      background: var(--primary-container);
      color: var(--white);
      font-weight: 800;
    }

    .mini-gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.5rem;
      margin-block: 1rem 2.75rem;
    }

    .mini-gallery img {
      aspect-ratio: 1;
      inline-size: 100%;
      border-radius: var(--radius-sm);
      object-fit: cover;
      background: rgb(255 255 255 / 0.1);
    }

    .support-list {
      display: grid;
      gap: 0.35rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .support-list a {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      min-block-size: 2.4rem;
      padding: 0.45rem 0.75rem;
      border-radius: var(--radius-sm);
      color: var(--primary-soft-dim);
      font-size: 0.9rem;
      font-weight: 600;
    }

    .support-list a:hover,
    .support-list a[aria-current="page"] {
      background: rgb(255 255 255 / 0.07);
      color: var(--white);
      text-decoration: none;
    }

    .main-shell {
      min-block-size: 100dvh;
      margin-inline-start: var(--sidebar-width);
      padding-block-end: 4.75rem;
    }

    .topbar {
      position: sticky;
      inset-block-start: 0;
      z-index: 50;
      background: var(--primary);
      color: var(--white);
      box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
    }

    .info-strip {
      display: flex;
      min-block-size: var(--header-info);
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding-inline: var(--page-gutter);
      background: var(--black);
      color: var(--white);
      font-size: 0.78rem;
    }

    .info-strip span {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .info-strip button {
      display: inline-flex;
      min-inline-size: 2rem;
      min-block-size: 2rem;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: var(--radius);
      background: transparent;
      color: rgb(255 255 255 / 0.7);
      cursor: pointer;
    }

    .info-strip button:hover {
      color: var(--white);
    }

    .brand-bar {
      display: grid;
      min-block-size: var(--header-brand);
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 1rem;
      padding-inline: var(--page-gutter);
    }

    .mobile-menu {
      display: none;
      grid-column: 1;
      inline-size: 2.75rem;
      block-size: 2.75rem;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: var(--radius);
      background: rgb(255 255 255 / 0.1);
      color: var(--white);
      cursor: pointer;
    }

    .brand-logo {
      grid-column: 2;
      justify-self: center;
    }

    .brand-logo img {
      inline-size: 7rem;
      block-size: auto;
      max-block-size: 3.15rem;
      object-fit: contain;
    }

    .account-actions {
      grid-column: 3;
      display: flex;
      justify-content: flex-end;
      gap: 1rem;
    }

    .btn {
      display: inline-flex;
      min-block-size: 2.7rem;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      border: 0;
      border-radius: var(--radius-full);
      padding: 0.75rem 1.35rem;
      cursor: pointer;
      font-size: 0.82rem;
      font-weight: 900;
      line-height: 1.15;
      text-align: center;
      transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease;
      user-select: none;
    }

    .btn:hover {
      text-decoration: none;
      transform: translateY(-1px);
    }

    .btn:active {
      transform: translateY(1px) scale(0.99);
    }

    .btn-primary {
      background: var(--secondary-bright);
      color: var(--white);
    }

    .btn-primary:hover {
      background: var(--secondary-hover);
    }

    .btn-secondary {
      background: rgb(255 255 255 / 0.12);
      color: var(--white);
      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
    }

    .btn-secondary:hover {
      background: rgb(255 255 255 / 0.18);
    }

    .hero {
      position: relative;
      min-block-size: clamp(31rem, 46dvh, 35rem);
      overflow: hidden;
      background: var(--primary);
      color: var(--white);
    }

    .hero-media {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      object-position: center;
    }

    .hero::after {
      position: absolute;
      inset: 0;
      content: "";
      background:
        linear-gradient(90deg, rgb(0 25 54 / 0.88) 0%, rgb(0 25 54 / 0.74) 35%, rgb(0 25 54 / 0.18) 72%, rgb(0 25 54 / 0.45) 100%),
        linear-gradient(0deg, rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.05));
    }

    .hero-content {
      position: relative;
      z-index: 1;
      display: flex;
      min-block-size: inherit;
      max-inline-size: var(--content-max);
      flex-direction: column;
      justify-content: center;
      gap: 1.35rem;
      margin-inline: auto;
      padding: 3.25rem var(--page-gutter) 3.75rem;
    }

    .overline {
      margin: 0;
      color: var(--primary-soft);
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .hero h1 {
      max-inline-size: 38rem;
      margin: 0;
      color: var(--atg-yellow);
      font-size: clamp(3.3rem, 2.3rem + 4.5vw, 6.1rem);
      font-weight: 900;
      line-height: 0.95;
      text-transform: uppercase;
      text-wrap: balance;
    }

    .hero-lead {
      max-inline-size: 42rem;
      margin: 0;
      font-size: clamp(1.1rem, 1rem + 0.45vw, 1.45rem);
      font-weight: 600;
      line-height: 1.45;
      text-shadow: 0 2px 8px rgb(0 0 0 / 0.28);
      text-wrap: pretty;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.85rem;
    }

    .hero .btn {
      min-block-size: 3.6rem;
      padding-inline: 2rem;
      font-size: 0.98rem;
    }

    .hero-facts {
      display: flex;
      max-inline-size: 52rem;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin: 0.4rem 0 0;
      padding: 0;
    }

    .hero-facts div {
      display: flex;
      min-inline-size: 8rem;
      flex-direction: column;
      gap: 0.15rem;
      padding: 0.75rem 0.9rem;
      border: 1px solid rgb(255 255 255 / 0.18);
      border-radius: var(--radius);
      background: rgb(0 0 0 / 0.22);
      backdrop-filter: blur(8px);
    }

    .hero-facts dt {
      color: var(--primary-soft-dim);
      font-size: 0.68rem;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .hero-facts dd {
      margin: 0;
      color: var(--white);
      font-size: 0.92rem;
      font-weight: 800;
    }

    .category-bar {
      position: sticky;
      inset-block-start: var(--sticky-offset);
      z-index: 40;
      border-block-end: 1px solid var(--outline-variant);
      background: var(--white);
    }

    .category-scroll {
      display: flex;
      max-inline-size: var(--content-max);
      gap: clamp(1.15rem, 1rem + 1.6vw, 3rem);
      margin-inline: auto;
      padding: 0.8rem var(--page-gutter) 0.65rem;
      overflow-x: auto;
      scrollbar-width: thin;
    }

    .category-link {
      display: inline-flex;
      min-inline-size: 4.5rem;
      flex: 0 0 auto;
      flex-direction: column;
      align-items: center;
      gap: 0.28rem;
      border-block-end: 3px solid transparent;
      padding-block-end: 0.4rem;
      color: var(--on-surface-variant);
      font-size: 0.78rem;
      font-weight: 800;
      text-align: center;
    }

    .category-link:hover {
      color: var(--primary);
      text-decoration: none;
    }

    .category-link.is-active {
      border-color: var(--primary);
      color: var(--primary);
    }

    .content {
      overflow: clip;
    }

    .section {
      max-inline-size: var(--content-max);
      margin-inline: auto;
      padding: 3rem var(--page-gutter) 0;
      scroll-margin-block-start: var(--anchor-offset);
    }

    .section.deferred {
      content-visibility: auto;
      contain-intrinsic-size: auto 48rem;
    }

    .section-header {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 1rem;
      margin-block-end: 1.35rem;
    }

    .section-header h2,
    .article h2 {
      margin: 0;
      color: var(--on-surface);
      font-size: clamp(1.45rem, 1.25rem + 0.7vw, 2rem);
      font-weight: 900;
      line-height: 1.2;
      text-wrap: balance;
    }

    .section-header p {
      max-inline-size: 39rem;
      margin: 0.35rem 0 0;
      color: var(--on-surface-variant);
      font-size: 1rem;
      text-wrap: pretty;
    }

    .section-link {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      color: var(--primary-container);
      font-weight: 900;
      white-space: nowrap;
    }

    .quick-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
    }

    .fact-tile {
      min-block-size: 5.1rem;
      padding: 1rem;
      border: 1px solid var(--outline-variant);
      border-radius: var(--radius);
      background: var(--surface-container-lowest);
      box-shadow: var(--shadow-card);
    }

    .fact-tile span {
      color: var(--primary);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .fact-tile strong {
      display: block;
      margin-block-start: 0.35rem;
      color: var(--on-surface);
      font-size: 1.02rem;
      font-weight: 900;
      line-height: 1.2;
    }

    .game-carousel-shell {
      position: relative;
    }

    .carousel-controls {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .carousel-btn {
      display: inline-flex;
      inline-size: 2.75rem;
      block-size: 2.75rem;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--outline-variant);
      border-radius: var(--radius-full);
      background: var(--surface-container-lowest);
      color: var(--primary);
      cursor: pointer;
      box-shadow: var(--shadow-card);
    }

    .carousel-btn:hover {
      background: var(--primary);
      color: var(--white);
    }

    .game-carousel {
      display: flex;
      gap: 1rem;
      margin-inline: calc(var(--page-gutter) * -0.15);
      padding: 0.25rem calc(var(--page-gutter) * 0.15) 0.65rem;
      overflow-x: auto;
      scroll-padding-inline: calc(var(--page-gutter) * 0.15);
      scroll-snap-type: x mandatory;
      scrollbar-color: var(--outline) transparent;
      scrollbar-width: thin;
    }

    .game-card {
      position: relative;
      flex: 0 0 clamp(10rem, 15vw, 13.25rem);
      scroll-snap-align: start;
      border-radius: var(--radius);
      color: var(--white);
      text-decoration: none;
      container-type: scroll-state;
    }

    .game-card:hover {
      text-decoration: none;
    }

    .game-thumb {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4 / 3;
      border-radius: var(--radius);
      background: var(--surface-container);
      box-shadow: var(--shadow-card);
    }

    .game-thumb img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      transition: transform 180ms ease;
    }

    .game-card:hover .game-thumb img {
      transform: scale(1.045);
    }

    .game-card .favorite {
      position: absolute;
      inset-block-start: 0.5rem;
      inset-inline-end: 0.5rem;
      display: inline-flex;
      inline-size: 2rem;
      block-size: 2rem;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-full);
      background: rgb(0 0 0 / 0.52);
      color: var(--white);
    }

    .game-card .game-badge {
      position: absolute;
      inset-block-start: 0.5rem;
      inset-inline-start: 0.5rem;
      display: inline-flex;
      inline-size: 2rem;
      block-size: 2rem;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      background: var(--atg-yellow);
      color: var(--black);
    }

    .game-meta {
      padding-block-start: 0.55rem;
      color: var(--on-surface);
    }

    .game-meta strong {
      display: block;
      font-size: 0.95rem;
      font-weight: 900;
      line-height: 1.2;
    }

    .game-meta span {
      display: block;
      margin-block-start: 0.2rem;
      color: var(--on-surface-variant);
      font-size: 0.78rem;
      font-weight: 600;
    }

    @supports (container-type: scroll-state) {
      @media (prefers-reduced-motion: no-preference) {
        @container scroll-state(snapped: x) {
          .game-thumb {
            outline: 3px solid var(--atg-yellow);
            outline-offset: 2px;
          }
        }
      }
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }

    .feature-card {
      position: relative;
      display: flex;
      min-block-size: 18rem;
      overflow: hidden;
      border-radius: var(--radius);
      background: var(--primary);
      color: var(--white);
      box-shadow: var(--shadow-card);
      isolation: isolate;
    }

    .feature-card:hover {
      text-decoration: none;
    }

    .feature-card img {
      position: absolute;
      inset: 0;
      z-index: -2;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      transition: transform 220ms ease;
    }

    .feature-card:hover img {
      transform: scale(1.04);
    }

    .feature-card::after {
      position: absolute;
      inset: 0;
      z-index: -1;
      content: "";
      background: linear-gradient(0deg, rgb(0 16 38 / 0.9), rgb(0 28 62 / 0.4) 55%, rgb(0 28 62 / 0.08));
    }

    .feature-content {
      align-self: end;
      padding: 1rem;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      min-block-size: 1.75rem;
      margin-block-end: 0.75rem;
      padding: 0.35rem 0.55rem;
      border-radius: var(--radius-sm);
      background: var(--atg-yellow);
      color: var(--primary);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .feature-card h3 {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 900;
      line-height: 1.18;
    }

    .feature-card p {
      margin: 0.45rem 0 0;
      color: rgb(255 255 255 / 0.88);
      font-size: 0.92rem;
    }

    .article-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.48fr);
      gap: 1.25rem;
      align-items: start;
    }

    .article {
      border-radius: var(--radius);
      background: var(--surface-container-lowest);
      box-shadow: var(--shadow-card);
    }

    .article-body {
      padding: clamp(1.1rem, 0.9rem + 1vw, 2rem);
    }

    .article-body p,
    .article-body li {
      color: var(--on-surface-variant);
      font-size: 1rem;
      line-height: 1.65;
      text-wrap: pretty;
    }

    .article-body p:first-of-type {
      color: var(--on-surface);
      font-size: 1.08rem;
      font-weight: 500;
    }

    .article-body ul,
    .article-body ol {
      padding-inline-start: 1.15rem;
    }

    .table-wrap {
      overflow-x: auto;
      border: 1px solid var(--outline-variant);
      border-radius: var(--radius);
      background: var(--white);
    }

    .info-panel {
      display: grid;
      gap: 1rem;
    }

    .info-block {
      padding: 1.1rem;
      border: 1px solid var(--outline-variant);
      border-radius: var(--radius);
      background: var(--surface-container-lowest);
      box-shadow: var(--shadow-card);
    }

    .info-block h3 {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 0.75rem;
      color: var(--primary);
      font-size: 1.05rem;
      font-weight: 900;
    }

    .info-block p,
    .info-block li {
      color: var(--on-surface-variant);
      font-size: 0.92rem;
      line-height: 1.55;
    }

    .info-block ul {
      margin: 0;
      padding-inline-start: 1rem;
    }

    .split {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 1.25rem;
      align-items: stretch;
    }

    .media-panel {
      overflow: hidden;
      border-radius: var(--radius);
      background: var(--primary);
      box-shadow: var(--shadow-card);
    }

    .media-panel img {
      inline-size: 100%;
      block-size: 100%;
      min-block-size: 22rem;
      object-fit: cover;
    }

    .step-list {
      display: grid;
      gap: 0.85rem;
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: steps;
    }

    .step-list li {
      display: grid;
      grid-template-columns: 2.5rem minmax(0, 1fr);
      gap: 0.85rem;
      align-items: start;
      padding: 1rem;
      border: 1px solid var(--outline-variant);
      border-radius: var(--radius);
      background: var(--surface-container-lowest);
      counter-increment: steps;
    }

    .step-list li::before {
      display: inline-flex;
      inline-size: 2.5rem;
      block-size: 2.5rem;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-full);
      background: var(--primary);
      color: var(--white);
      content: counter(steps);
      font-weight: 900;
    }

    .step-list strong {
      display: block;
      color: var(--on-surface);
      font-weight: 900;
    }

    .step-list span {
      display: block;
      margin-block-start: 0.25rem;
      color: var(--on-surface-variant);
      line-height: 1.55;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }

    .product-card {
      display: grid;
      min-block-size: 15rem;
      align-content: start;
      gap: 0.85rem;
      padding: 1.15rem;
      border: 1px solid var(--outline-variant);
      border-radius: var(--radius);
      background: var(--surface-container-lowest);
      box-shadow: var(--shadow-card);
    }

    .product-card .material-symbols-outlined {
      display: inline-flex;
      inline-size: 2.75rem;
      block-size: 2.75rem;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius);
      background: var(--primary-soft);
      color: var(--primary);
      font-size: 1.55rem;
    }

    .product-card h3 {
      margin: 0;
      font-size: 1.18rem;
      font-weight: 900;
      line-height: 1.25;
    }

    .product-card p {
      margin: 0;
      color: var(--on-surface-variant);
      line-height: 1.6;
    }

    .notice {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 1rem;
      align-items: start;
      padding: 1rem;
      border: 1px solid #f0c56b;
      border-radius: var(--radius);
      background: #fff8df;
      color: #3c2f00;
    }

    .notice .material-symbols-outlined {
      color: var(--tertiary);
    }

    .content-article {
      padding: clamp(1.1rem, 0.9rem + 1vw, 2rem);
      border-radius: var(--radius);
      background: var(--surface-container-lowest);
      box-shadow: var(--shadow-card);
    }

    .content-article h2,
    .content-article h3 {
      margin: 2.25rem 0 0.85rem;
      color: var(--on-surface);
      font-size: clamp(1.35rem, 1.1rem + 0.75vw, 1.9rem);
      font-weight: 900;
      line-height: 1.2;
      text-wrap: balance;
    }

    .content-article h2:first-child,
    .content-article h3:first-child {
      margin-block-start: 0;
    }

    .content-article p,
    .content-article li {
      color: var(--on-surface-variant);
      line-height: 1.68;
      text-wrap: pretty;
    }

    .content-article strong {
      color: var(--on-surface);
      font-weight: 900;
    }

    .content-article a {
      color: var(--primary-container);
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 0.18em;
    }

    .content-article blockquote {
      margin: 1.5rem 0 0;
      padding: 1rem;
      border-inline-start: 5px solid var(--atg-yellow);
      border-radius: var(--radius);
      background: #fff8df;
      color: #3c2f00;
      font-weight: 700;
    }

    .sitemap-grid {
      column-count: 2;
      column-gap: 1rem;
    }

    .sitemap-card {
      margin-block-end: 1rem;
      padding: 1.15rem;
      border: 1px solid var(--outline-variant);
      border-radius: var(--radius);
      background: var(--surface-container-lowest);
      box-shadow: var(--shadow-card);
      break-inside: avoid;
    }

    .sitemap-card h3 {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 0.85rem;
      color: var(--primary);
      font-size: 1.08rem;
      font-weight: 900;
    }

    .sitemap-card ul {
      display: grid;
      gap: 0.5rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .sitemap-card a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      min-block-size: 2.65rem;
      padding: 0.65rem 0.75rem;
      border: 1px solid var(--outline-variant);
      border-radius: var(--radius-sm);
      background: var(--surface-container);
      color: var(--on-surface);
      font-weight: 800;
    }

    .sitemap-card a::after {
      flex: 0 0 auto;
      color: var(--primary-container);
      font-family: "Material Symbols Outlined";
      font-size: 1.1rem;
      line-height: 1;
      content: "arrow_forward";
    }

    .sitemap-card a:hover {
      border-color: var(--primary-container);
      color: var(--primary-container);
      text-decoration: none;
    }

    .calculator-tool {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.48fr);
      gap: 1.25rem;
      align-items: start;
    }

    .calc-panel {
      padding: clamp(1.1rem, 0.9rem + 1vw, 2rem);
      border: 1px solid var(--outline-variant);
      border-radius: var(--radius);
      background: var(--surface-container-lowest);
      box-shadow: var(--shadow-card);
    }

    .calc-panel h2,
    .calc-panel h3 {
      margin: 0;
      color: var(--on-surface);
      font-size: clamp(1.35rem, 1.1rem + 0.75vw, 1.9rem);
      font-weight: 900;
      line-height: 1.2;
    }

    .calc-panel p {
      color: var(--on-surface-variant);
      line-height: 1.62;
    }

    .calc-form {
      display: grid;
      gap: 1rem;
      margin-block-start: 1.1rem;
    }

    .calc-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.85rem;
    }

    .v75-legs {
      grid-template-columns: repeat(7, minmax(3.75rem, 1fr));
    }

    .calc-field {
      display: grid;
      gap: 0.35rem;
      min-inline-size: 0;
    }

    .calc-field label {
      color: var(--primary);
      font-size: 0.76rem;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .calc-field input {
      inline-size: 100%;
      box-sizing: border-box;
      min-block-size: 2.9rem;
      border: 1px solid var(--outline-variant);
      border-radius: var(--radius-sm);
      padding: 0.65rem 0.75rem;
      background: var(--white);
      color: var(--on-surface);
      font: inherit;
      font-weight: 750;
    }

    .calc-field input:focus {
      border-color: var(--primary);
      outline: 3px solid var(--primary-soft);
      outline-offset: 0;
    }

    .calc-result-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.75rem;
      margin-block-start: 0.25rem;
    }

    .calc-result {
      min-block-size: 4.75rem;
      padding: 0.85rem;
      border-radius: var(--radius);
      background: var(--primary);
      color: var(--white);
    }

    .calc-result span {
      display: block;
      color: var(--primary-soft-dim);
      font-size: 0.68rem;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .calc-result output {
      display: block;
      margin-block-start: 0.3rem;
      color: var(--atg-yellow);
      font-size: clamp(1.05rem, 0.9rem + 0.65vw, 1.45rem);
      font-weight: 900;
      line-height: 1.15;
      overflow-wrap: anywhere;
    }

    .calc-note {
      margin: 0.15rem 0 0;
      color: var(--on-surface-variant);
      font-size: 0.88rem;
    }

    .faq-list {
      display: grid;
      gap: 0.75rem;
    }

    .faq-list details {
      border: 1px solid var(--outline-variant);
      border-radius: var(--radius);
      background: var(--surface-container-lowest);
      box-shadow: var(--shadow-card);
    }

    .faq-list summary {
      display: flex;
      min-block-size: 3.5rem;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.9rem 1rem;
      color: var(--primary);
      cursor: pointer;
      font-weight: 900;
      list-style: none;
    }

    .faq-list summary::-webkit-details-marker {
      display: none;
    }

    .faq-list summary::after {
      font-family: "Material Symbols Outlined";
      content: "expand_more";
      font-size: 1.5rem;
      font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
      transition: transform 160ms ease;
    }

    .faq-list details[open] summary::after {
      transform: rotate(180deg);
    }

    .faq-list p {
      margin: 0;
      padding: 0 1rem 1rem;
      color: var(--on-surface-variant);
      line-height: 1.65;
    }

    .footer {
      margin-block-start: 4rem;
      border-block-start: 1px solid var(--outline-variant);
      background: var(--surface-container-low);
    }

    .footer-inner {
      display: flex;
      max-inline-size: var(--content-max);
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      margin-inline: auto;
      padding: 2rem var(--page-gutter);
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .footer-brand img {
      inline-size: 4.5rem;
      block-size: auto;
    }

    .footer-brand p {
      margin: 0;
      color: var(--on-surface-variant);
      font-size: 0.88rem;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem 1.5rem;
      color: var(--on-surface-variant);
      font-size: 0.82rem;
      font-weight: 800;
    }

    .responsible-bar {
      position: fixed;
      inset: auto 0 0;
      z-index: 70;
      display: flex;
      justify-content: center;
      gap: clamp(1.2rem, 0.7rem + 3vw, 4rem);
      min-block-size: 3rem;
      padding: 0.55rem var(--page-gutter);
      border-block-start: 1px solid rgb(255 255 255 / 0.2);
      background: var(--primary-container);
      color: var(--white);
      overflow-x: auto;
      scrollbar-width: thin;
    }

    .responsible-bar a {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 0.5rem;
      color: var(--white);
      font-size: 0.82rem;
      font-weight: 900;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .responsible-bar a:hover {
      color: var(--primary-soft);
      text-decoration: none;
    }

    .sidebar-backdrop {
      position: fixed;
      inset: 0;
      z-index: 55;
      display: none;
      background: rgb(0 0 0 / 0.42);
    }

    .mobile-only {
      display: none;
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      .btn,
      .feature-card img,
      .faq-list summary::after {
        transition: none;
      }
    }

    @media (max-width: 74rem) {
      .quick-row,
      .feature-grid,
      .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .article-grid,
      .calculator-tool,
      .split {
        grid-template-columns: 1fr;
      }

      .media-panel img {
        max-block-size: 24rem;
      }
    }

    @media (max-width: 60rem) {
      :root {
        --sticky-offset: var(--header-brand);
        --anchor-offset: calc(var(--sticky-offset) + 1rem);
      }

      body.sidebar-open {
        overflow: hidden;
      }

      .sidebar {
        transform: translateX(-100%);
        transition: transform 180ms ease;
      }

      body.sidebar-open .sidebar {
        transform: translateX(0);
      }

      body.sidebar-open .sidebar-backdrop {
        display: block;
      }

      .main-shell {
        margin-inline-start: 0;
        padding-block-end: calc(4.5rem + env(safe-area-inset-bottom));
      }

      .mobile-menu {
        display: inline-flex;
      }

      .brand-bar {
        grid-template-columns: auto 1fr auto;
      }

      .brand-logo {
        grid-column: 2;
        justify-self: start;
      }

      .account-actions {
        grid-column: 3;
      }

      .account-actions .btn-secondary {
        display: none;
      }

      .info-strip {
        display: none;
      }

      .category-bar {
        position: static;
      }

      .hero {
        min-block-size: 34rem;
      }
    }

    @media (max-width: 42rem) {
      .rail {
        inline-size: 4.25rem;
        flex-basis: 4.25rem;
      }

      .sidebar {
        inline-size: min(90vw, 20rem);
      }

      .rail-link,
      .rail-button {
        min-block-size: 4.15rem;
        font-size: 0.66rem;
      }

      .brand-logo img {
        inline-size: 5.8rem;
      }

      .account-actions .btn {
        min-block-size: 2.45rem;
        padding-inline: 0.95rem;
      }

      .responsible-bar {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        justify-content: initial;
        gap: 0;
        min-block-size: 3.25rem;
        padding: 0.35rem 0.35rem calc(0.35rem + env(safe-area-inset-bottom));
        overflow: hidden;
      }

      .responsible-bar a {
        min-inline-size: 0;
        flex-direction: column;
        justify-content: center;
        gap: 0.08rem;
        font-size: 0.56rem;
        letter-spacing: 0;
        line-height: 1.05;
        text-align: center;
        white-space: nowrap;
      }

      .responsible-bar .material-symbols-outlined {
        font-size: 1.05rem;
      }

      .hero {
        min-block-size: 36rem;
      }

      .app-page .hero {
        min-block-size: 34rem;
      }

      .hero-content {
        padding-block: 2.35rem 2.85rem;
      }

      .hero h1 {
        font-size: 2.7rem;
      }

      .app-page .hero h1 {
        font-size: 2.45rem;
      }

      .hero-facts div {
        box-sizing: border-box;
        inline-size: calc(50% - 0.25rem);
        min-inline-size: 0;
      }

      .quick-row,
      .calc-form-grid,
      .calc-result-grid,
      .feature-grid,
      .product-grid {
        grid-template-columns: 1fr;
      }

      .sitemap-grid {
        column-count: 1;
      }

      .v75-legs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .section-header {
        align-items: start;
        flex-direction: column;
      }

      .carousel-controls {
        inline-size: 100%;
        justify-content: flex-start;
      }

      .game-card {
        flex-basis: 10.75rem;
      }

      .feature-card {
        min-block-size: 15rem;
      }

      .footer-inner {
        align-items: start;
        flex-direction: column;
      }

      .mobile-only {
        display: inline-flex;
      }
    }