:root {
      --bg-1: #f6efe6;
      --bg-2: #dce8e4;
      --ink: #1d2430;
      --muted: #4b5c62;
      --card: rgba(255, 255, 255, 0.75);
      --stroke: rgba(29, 36, 48, 0.14);
      --accent-frise: #ff7d46;
      --accent-tv: #198c82;
      --accent-train: #2678c5;
      --shadow: 0 18px 50px rgba(23, 30, 44, 0.12);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 15% 18%, rgba(255, 125, 70, 0.23), transparent 35%),
        radial-gradient(circle at 80% 20%, rgba(25, 140, 130, 0.2), transparent 38%),
        radial-gradient(circle at 50% 88%, rgba(38, 120, 197, 0.22), transparent 42%),
        linear-gradient(145deg, var(--bg-1), var(--bg-2));
      overflow-x: hidden;
    }

    .noise {
      position: fixed;
      inset: 0;
      opacity: 0.15;
      pointer-events: none;
      background-image: radial-gradient(rgba(17, 17, 17, 0.25) 0.6px, transparent 0.6px);
      background-size: 3px 3px;
      mix-blend-mode: soft-light;
    }

    .container {
      width: min(1120px, 92vw);
      margin: 0 auto;
      padding: 64px 0 70px;
    }

    .hero {
      max-width: 760px;
      opacity: 0;
      transform: translateY(16px);
      animation: rise 0.65s ease forwards;
    }

    .eyebrow {
      margin: 0;
      font-family: "Chakra Petch", "Verdana", sans-serif;
      font-size: 0.92rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: #2f5967;
    }

    h1 {
      margin: 10px 0 12px;
      font-size: clamp(2rem, 4.8vw, 3.7rem);
      line-height: 1.04;
      letter-spacing: -0.03em;
    }

    .lead {
      margin: 0;
      font-size: clamp(1.03rem, 1.2vw, 1.2rem);
      line-height: 1.55;
      color: var(--muted);
      max-width: 66ch;
    }

    .hero-actions {
      margin-top: 16px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    .resume-link {
      display: none;
      align-items: center;
      justify-content: center;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid rgba(29, 36, 48, 0.18);
      background: rgba(255, 255, 255, 0.68);
      color: #21313a;
      text-decoration: none;
      font-weight: 700;
      box-shadow: 0 10px 20px rgba(22, 31, 45, 0.1);
      transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
    }

    .resume-link:hover,
    .resume-link:focus-visible {
      transform: translateY(-1px);
      filter: brightness(1.03);
      box-shadow: 0 14px 24px rgba(22, 31, 45, 0.14);
      outline: none;
    }

    .shortcut-hint {
      margin: 0;
      color: #4f6167;
      font-size: 0.92rem;
      font-family: "Chakra Petch", "Verdana", sans-serif;
      letter-spacing: 0.02em;
    }

    .grid {
      display: grid;
      gap: 20px;
      margin-top: 34px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: stretch;
    }

    .card {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 22px;
      border-radius: 18px;
      border: 1px solid var(--stroke);
      background: var(--card);
      backdrop-filter: blur(8px);
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(24px);
      animation: rise 0.65s ease forwards;
    }

    .card:nth-child(1) { animation-delay: 0.12s; }
    .card:nth-child(2) { animation-delay: 0.2s; }
    .card:nth-child(3) { animation-delay: 0.28s; }

    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 18px;
      border-top: 5px solid var(--accent, #777);
      pointer-events: none;
    }

    .card h2 {
      margin: 2px 0 8px;
      font-size: 1.4rem;
      line-height: 1.15;
      letter-spacing: -0.015em;
    }

    .card-media {
      margin: 12px 0 10px;
      min-height: 58px;
      display: flex;
      align-items: center;
    }

    .card-media img,
    .card-media svg {
      display: block;
      width: auto;
      height: 56px;
      max-width: 100%;
      object-fit: contain;
    }

    .frise-media svg {
      filter: drop-shadow(0 4px 9px rgba(26, 31, 44, 0.18));
    }

    .badge {
      display: inline-block;
      width: fit-content;
      align-self: flex-start;
      padding: 4px 10px;
      border-radius: 999px;
      font-family: "Chakra Petch", "Verdana", sans-serif;
      font-size: 0.75rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #fff;
      background: var(--accent, #777);
    }

    .card.frise .badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 11px;
      border-radius: 10px;
      border: 2px solid #101624;
      transform: skew(-9deg);
      font-size: 0.74rem;
      letter-spacing: 0.1em;
      color: #141925;
      background: linear-gradient(180deg, #ffd12f 0%, #f6ba00 100%);
      box-shadow: 3px 3px 0 rgba(18, 22, 34, 0.26);
    }

    .card.frise {
      overflow: hidden;
      border: 2px solid #0f1728;
      background:
        radial-gradient(circle at 92% 88%, rgba(255, 125, 70, 0.2), transparent 30%),
        radial-gradient(circle at 12% 12%, rgba(255, 209, 47, 0.28), transparent 26%),
        repeating-linear-gradient(130deg, rgba(21, 29, 43, 0.055) 0 2px, transparent 2px 11px),
        linear-gradient(165deg, #fffdf7 0%, #f7f1e4 100%);
      box-shadow: 0 4px 0 rgba(15, 23, 40, 0.9), 0 20px 36px rgba(19, 28, 44, 0.19);
    }

    .card.frise::before {
      border-top: 8px solid #ff7d46;
    }

    .card.frise::after {
      content: "";
      position: absolute;
      right: 18px;
      top: 14px;
      width: 86px;
      height: 86px;
      border-radius: 50%;
      background:
        radial-gradient(rgba(16, 22, 36, 0.24) 1px, transparent 1px);
      background-size: 8px 8px;
      opacity: 0.16;
      pointer-events: none;
    }

    .card.frise h2 {
      margin-top: 10px;
      font-family: "Chakra Petch", "Bricolage Grotesque", sans-serif;
      font-size: clamp(1.5rem, 1.9vw, 1.9rem);
      line-height: 1.05;
      letter-spacing: -0.01em;
      color: #182132;
      text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.65);
    }

    .card.frise p:not(.card-version) {
      color: #3e5058;
      font-size: 1.01rem;
    }

    .card.frise a {
      padding: 12px 28px;
      border-radius: 20px;
      border: 2px solid #ff7d46;
      background: linear-gradient(180deg, #ff915b 0%, #ff7d46 100%);
      color: #ffffff;
      box-shadow: 0 5px 0 #cf5e2d;
    }

    .card.frise a:hover,
    .card.frise a:focus-visible {
      transform: translateY(-2px);
      filter: brightness(1.03);
      box-shadow: 0 7px 0 #cf5e2d;
    }

    .card.tv {
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background:
        radial-gradient(circle at 15% 8%, rgba(56, 211, 159, 0.2), transparent 36%),
        radial-gradient(circle at 88% 0%, rgba(47, 189, 224, 0.25), transparent 34%),
        linear-gradient(145deg, #09111f, #12233d);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 18px 34px rgba(2, 8, 17, 0.34);
    }

    .card.tv::before {
      border-top: 5px solid #2fbde0;
    }

    .card.tv::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.04) 0 1px,
          transparent 1px 7px
        );
      opacity: 0.2;
    }

    .card.tv .badge {
      display: inline-flex;
      align-items: center;
      border-radius: 10px;
      border: 1px solid rgba(56, 211, 159, 0.48);
      background: rgba(56, 211, 159, 0.16);
      color: #b8ffe8;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .card.tv h2 {
      margin-top: 10px;
      color: #edf4ff;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    }

    .card.tv p:not(.card-version) {
      color: #b0c0d8;
    }

    .card.tv a {
      border: 0;
      border-radius: 10px;
      background: linear-gradient(90deg, #38d39f, #2fbde0);
      color: #051019;
      box-shadow: 0 7px 18px rgba(12, 32, 53, 0.38);
    }

    .card.tv a:hover,
    .card.tv a:focus-visible {
      transform: translateY(-2px);
      filter: brightness(1.06);
    }

    .card.train {
      overflow: hidden;
      border: 1px solid rgba(21, 36, 52, 0.18);
      border-radius: 20px;
      background:
        radial-gradient(circle at 15% 16%, rgba(229, 122, 72, 0.2), transparent 35%),
        radial-gradient(circle at 86% 18%, rgba(45, 119, 191, 0.2), transparent 39%),
        radial-gradient(circle at 50% 90%, rgba(47, 155, 108, 0.18), transparent 42%),
        linear-gradient(145deg, #d7e4ec, #eef2e8);
      box-shadow: 0 18px 34px rgba(15, 25, 37, 0.15);
    }

    .card.train::before {
      border-top: 5px solid rgba(45, 119, 191, 0.75);
      border-radius: 20px;
    }

    .card.train::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.16;
      background:
        linear-gradient(117deg, transparent 0 47.9%, rgba(255, 255, 255, 0.52) 48% 48.45%, transparent 48.55%),
        linear-gradient(121deg, transparent 0 51.6%, rgba(21, 44, 72, 0.16) 51.7% 52.1%, transparent 52.2%);
    }

    .card.train .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0.34rem 0.72rem;
      border-radius: 10px;
      border: 1px solid rgba(16, 47, 77, 0.16);
      border-left: 5px solid #e57a48;
      color: #163e63;
      background: rgba(255, 255, 255, 0.65);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .card.train h2 {
      margin-top: 10px;
      font-family: "Chakra Petch", "Bricolage Grotesque", sans-serif;
      color: #103857;
    }

    .card.train p:not(.card-version) {
      color: #476174;
    }

    .card.train a {
      border: 1px solid rgba(16, 47, 77, 0.34);
      border-radius: 12px;
      text-transform: none;
      letter-spacing: normal;
      background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.16) 0 12%, transparent 12% 100%),
        linear-gradient(170deg, #3a8fdd 0%, #256eb4 100%);
      color: #f8fdff;
      box-shadow: 0 8px 18px rgba(19, 58, 96, 0.3);
    }

    .card.train a:hover,
    .card.train a:focus-visible {
      transform: translateY(-1px);
      filter: brightness(1.05);
      box-shadow: 0 12px 24px rgba(19, 58, 96, 0.34);
    }

    .card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
    }

    .card > p:not(.card-version) {
      min-height: 72px;
    }

    .card-version {
      width: fit-content;
      min-height: 0;
      line-height: 1.2;
      margin: 0;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid rgba(29, 36, 48, 0.18);
      font-size: 0.83rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      white-space: nowrap;
      color: #415159;
      background: rgba(255, 255, 255, 0.68);
    }

    .card-version[data-state="na"] {
      opacity: 0.8;
      font-weight: 600;
    }

    .card-version[data-state="coming"] {
      opacity: 0.9;
      font-weight: 700;
    }

    .card.frise .card-version {
      border-color: rgba(255, 125, 70, 0.35);
      background: rgba(255, 125, 70, 0.1);
      color: #8e3f1d;
    }

    .card.tv .card-version {
      border-color: rgba(56, 211, 159, 0.44);
      background: rgba(56, 211, 159, 0.14);
      color: #b8ffe8;
    }

    .card.train .card-version {
      border-color: rgba(45, 119, 191, 0.35);
      background: rgba(45, 119, 191, 0.12);
      color: #164f89;
    }

    .card-controls {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      min-height: 92px;
      justify-content: space-between;
    }

    .card a {
      display: inline-flex;
      margin-top: 0;
      padding: 10px 14px;
      border-radius: 10px;
      text-decoration: none;
      color: #ffffff;
      background: var(--accent, #777);
      font-weight: 700;
      transition: transform 160ms ease, filter 160ms ease;
      align-self: flex-start;
    }

    .card a:hover,
    .card a:focus-visible {
      transform: translateY(-1px);
      filter: brightness(1.08);
      outline: none;
    }

    .card a.disabled {
      background: #7f8e94;
      cursor: not-allowed;
      pointer-events: none;
      opacity: 0.8;
    }

    .frise { --accent: var(--accent-frise); }
    .tv { --accent: var(--accent-tv); }
    .train { --accent: var(--accent-train); }

    .external-games {
      margin-top: 22px;
      padding: 18px;
      border-radius: 16px;
      border: 1px solid rgba(29, 36, 48, 0.14);
      background: rgba(255, 255, 255, 0.64);
      box-shadow: 0 14px 30px rgba(23, 30, 44, 0.1);
    }

    .external-games p {
      margin: 0;
      color: #495b62;
      font-size: 0.95rem;
    }

    .external-grid {
      margin-top: 10px;
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .external-card {
      --external-accent: #2f5967;
      --external-accent-rgb: 47, 89, 103;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 180px;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid rgba(29, 36, 48, 0.16);
      background:
        radial-gradient(circle at 85% 10%, rgba(255, 255, 255, 0.45), transparent 40%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.82), rgba(244, 250, 246, 0.82));
      box-shadow: 0 10px 24px rgba(21, 30, 44, 0.11);
      overflow: hidden;
      color: #22323b;
    }

    .external-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 14px;
      border-top: 4px solid var(--external-accent);
      pointer-events: none;
    }

    .external-card h3 {
      margin: 0;
      font-family: "Chakra Petch", "Bricolage Grotesque", sans-serif;
      font-size: 1.2rem;
      line-height: 1.1;
    }

    .external-card p {
      margin: 0;
      font-size: 0.93rem;
      color: inherit;
      opacity: 0.92;
    }

    .external-meta {
      width: fit-content;
      margin-top: 2px;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(var(--external-accent-rgb), 0.35);
      background: rgba(var(--external-accent-rgb), 0.1);
      color: var(--external-accent);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.03em;
    }

    .external-card a {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      padding: 9px 13px;
      border-radius: 10px;
      border: 1px solid rgba(var(--external-accent-rgb), 0.45);
      background: rgba(var(--external-accent-rgb), 0.12);
      color: #1f2f3a;
      text-decoration: none;
      font-weight: 700;
      transition: transform 160ms ease, filter 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
    }

    .external-card a:hover,
    .external-card a:focus-visible {
      transform: translateY(-1px);
      filter: brightness(1.04);
      background: rgba(var(--external-accent-rgb), 0.2);
      border-color: rgba(var(--external-accent-rgb), 0.62);
      color: var(--external-accent);
      outline: none;
    }

    .external-card.transport {
      --external-accent: #ff7d46;
      --external-accent-rgb: 255, 125, 70;
    }

    .external-card.themepark {
      --external-accent: #2678c5;
      --external-accent-rgb: 38, 120, 197;
    }

    .footnote {
      margin-top: 18px;
      font-size: 0.9rem;
      color: #5f6f77;
      opacity: 0;
      transform: translateY(10px);
      animation: rise 0.65s ease 0.34s forwards;
    }

    @keyframes rise {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 980px) {
      .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 700px) {
      .container {
        padding: 44px 0 48px;
      }

      .hero-actions {
        align-items: flex-start;
      }

      .grid {
        grid-template-columns: 1fr;
      }

      .card p {
        min-height: 0;
      }

      .external-grid {
        grid-template-columns: 1fr;
      }
    }