:root {
      --bg: #08090b;
      --bg2: #0e1015;
      --panel: rgba(255,255,255,.055);
      --panel2: rgba(255,255,255,.085);
      --ink: #f7f8f4;
      --muted: #a9b1c0;
      --muted2: #7f8797;
      --line: rgba(255,255,255,.13);
      --line2: rgba(255,255,255,.24);
      --green: #b7f36a;
      --blue: #a7bcff;
      --amber: #f6cf76;
      --shadow: 0 28px 90px rgba(0,0,0,.42);
      --radius-xl: 28px;
      --radius-lg: 20px;
      --radius-md: 14px;
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background:
        radial-gradient(circle at 14% 8%, rgba(183,243,106,.13), transparent 28%),
        radial-gradient(circle at 88% 10%, rgba(167,188,255,.11), transparent 30%),
        radial-gradient(circle at 55% 78%, rgba(246,207,118,.07), transparent 30%),
        linear-gradient(180deg, #08090b 0%, #0d0f14 48%, #08090b 100%);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
    }

    body:before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 58px 58px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.28) 72%, transparent 100%);
    }

    body:after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background: linear-gradient(180deg, transparent 0%, rgba(8,9,11,.42) 55%, rgba(8,9,11,.94) 100%);
    }

    a { color: inherit; }
    .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(8,9,11,.78);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--line);
    }

    .nav {
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .robot-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(183,243,106,.55);
      border-radius: 16px;
      background: rgba(183,243,106,.045);
      color: var(--green);
      text-decoration: none;
      box-shadow: 0 16px 48px rgba(183,243,106,.06);
      transition: transform .16s ease, background .16s ease, border .16s ease;
      flex: 0 0 auto;
    }

    .robot-link:hover {
      transform: translateY(-1px);
      background: rgba(183,243,106,.085);
      border-color: rgba(183,243,106,.75);
    }

    .robot-link svg {
      width: 27px;
      height: 27px;
      display: block;
    }

    .robot-link rect,
    .robot-link path,
    .robot-link circle,
    .robot-link line {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .navlinks { display: flex; gap: 6px; color: var(--muted); font-size: 14px; }
    .navlinks a { text-decoration: none; padding: 8px 11px; border-radius: 999px; }
    .navlinks a:hover { color: var(--ink); background: rgba(255,255,255,.08); }

    .hero { padding: 78px 0 40px; }
    .icon-badge {
      width: 42px;
      height: 42px;
      color: var(--green);
      margin-bottom: 18px;
    }
    .icon-badge svg { width: 100%; height: 100%; }
    .icon-badge path, .icon-badge circle { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

    h1 {
      margin: 0 0 14px;
      font-size: clamp(46px, 7vw, 82px);
      line-height: .96;
      letter-spacing: -.075em;
      font-weight: 820;
      text-wrap: balance;
    }

    .subtitle {
      margin: 0;
      color: #c8ced8;
      font-size: clamp(18px, 2vw, 21px);
      max-width: 710px;
    }

    .rule { height: 1px; background: var(--line); margin-top: 34px; }

    .timeline {
      position: relative;
      display: grid;
      gap: 16px;
      padding: 28px 0 16px;
    }

    .timeline:before {
      content: "";
      position: absolute;
      top: 38px;
      bottom: 55px;
      left: 178px;
      width: 2px;
      background: linear-gradient(180deg, transparent, rgba(183,243,106,.85) 8%, rgba(183,243,106,.75) 88%, transparent);
      box-shadow: 0 0 22px rgba(183,243,106,.18);
    }

    .entry {
      display: grid;
      grid-template-columns: 150px 32px minmax(0, 1fr);
      gap: 16px;
      align-items: center;
    }

    .when {
      color: var(--green);
      font-size: 20px;
      line-height: 1.05;
      letter-spacing: -.04em;
      font-weight: 760;
    }
    .when small { display: block; color: var(--muted); font-size: 14px; margin-top: 3px; font-weight: 560; letter-spacing: 0; }

    .node {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--green);
      border: 1px solid rgba(255,255,255,.35);
      box-shadow: 0 0 0 8px rgba(183,243,106,.08), 0 0 24px rgba(183,243,106,.18);
      z-index: 2;
      justify-self: center;
    }

    .quest-card {
      border: 1px solid var(--line);
      background:
        radial-gradient(circle at 94% 0%, rgba(183,243,106,.08), transparent 32%),
        rgba(255,255,255,.052);
      border-radius: var(--radius-lg);
      box-shadow: 0 20px 70px rgba(0,0,0,.28);
      padding: 14px;
      display: grid;
      grid-template-columns: 136px minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      transition: transform .16s ease, border .16s ease, background .16s ease;
    }

    .quest-card:hover {
      transform: translateY(-2px);
      border-color: rgba(183,243,106,.32);
      background:
        radial-gradient(circle at 94% 0%, rgba(183,243,106,.12), transparent 32%),
        rgba(255,255,255,.068);
    }

    .thumb {
      width: 136px;
      height: 112px;
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255,255,255,.06);
      border: 1px solid var(--line);
    }
    .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .thumb.magic img, .thumb.wow img { object-fit: contain; background: #111; padding: 7px; }
    .thumb.ultra img { object-position: center 47%; }

    .quest-copy h2 {
      margin: 0 0 3px;
      font-size: 21px;
      line-height: 1.12;
      letter-spacing: -.04em;
      font-weight: 790;
    }
    .quest-copy h3 {
      margin: 0 0 8px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 660;
      letter-spacing: -.01em;
    }
    .quest-copy p {
      margin: 0 0 9px;
      color: #cfd4dc;
      font-size: 14px;
    }
    .lesson {
      display: flex;
      gap: 8px;
      color: #eef1f5;
      font-size: 13.5px;
    }
    .lesson b { color: var(--green); font-weight: 760; white-space: nowrap; }

    .card-btn {
      text-decoration: none;
      border: 1px solid rgba(183,243,106,.34);
      color: var(--green);
      background: rgba(183,243,106,.04);
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 13px;
      font-weight: 780;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }
    .card-btn:hover { background: rgba(183,243,106,.09); }

    .closing-quote {
      margin: 20px 0 0 198px;
      border: 1px solid var(--line);
      background:
        radial-gradient(circle at 10% 0%, rgba(183,243,106,.10), transparent 35%),
        rgba(255,255,255,.052);
      border-radius: var(--radius-lg);
      padding: 28px 32px;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 18px;
      align-items: start;
      box-shadow: var(--shadow);
    }
    .quote-mark { color: var(--green); font-size: 48px; line-height: .82; font-weight: 900; }
    .closing-quote p { margin: 0; font-size: clamp(22px, 3vw, 32px); line-height: 1.18; letter-spacing: -.055em; }

    footer { padding: 44px 0 54px; color: var(--muted); font-size: 14px; }
    .footer-inner { border-top: 1px solid var(--line); padding-top: 18px; display: flex; gap: 20px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
    .back-link { color: var(--green); text-decoration: none; font-weight: 780; }
    .back-link:hover { text-decoration: underline; }

    @media (max-width: 960px) {
      .timeline:before { left: 20px; }
      .entry { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
      .when { grid-column: 2; font-size: 17px; }
      .node { grid-column: 1; grid-row: 1 / span 2; margin-top: 8px; }
      .quest-card { grid-column: 2; grid-template-columns: 110px minmax(0, 1fr); }
      .card-btn { grid-column: 2; justify-self: start; margin-top: -4px; }
      .thumb { width: 110px; height: 100px; }
      .closing-quote { margin-left: 0; }
    }

    @media (max-width: 680px) {
      .wrap { padding: 0 18px; }
      .navlinks { display: none; }
      h1 { font-size: 44px; }
      .hero { padding-top: 48px; }
      .quest-card { grid-template-columns: 1fr; }
      .thumb { width: 100%; height: 190px; }
      .card-btn { grid-column: auto; }
      .lesson { display: block; }
      .lesson b { display: block; margin-bottom: 3px; }
      .closing-quote { grid-template-columns: 1fr; padding: 24px; }
      .quote-mark { font-size: 40px; }
    }