:root{
      --bg:#09111d;
      --bg2:#0d1726;
      --panel:#101d2e;
      --panel2:#13243a;
      --text:#eaf2ff;
      --muted:#94a8c4;
      --line:#243854;
      --cyan:#68d8ff;
      --green:#7ce6b3;
      --yellow:#ffd479;
      --red:#ff8f91;
      --purple:#b6a1ff;
      --shadow:0 24px 70px rgba(0,0,0,.34);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 18% -5%, rgba(104,216,255,.14), transparent 34rem),
        radial-gradient(circle at 90% 5%, rgba(182,161,255,.11), transparent 30rem),
        linear-gradient(180deg,var(--bg),#07101a 60%,#050b12);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      min-height:100vh;
    }
    .wrap{width:min(1440px,calc(100% - 40px));margin:auto}
    header{padding:64px 0 28px}
    .eyebrow{
      display:inline-flex;gap:8px;align-items:center;
      padding:7px 11px;border:1px solid var(--line);border-radius:999px;
      color:var(--cyan);background:rgba(104,216,255,.05);
      font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase
    }
    h1{font-size:clamp(38px,5vw,74px);line-height:.98;letter-spacing:-.055em;margin:20px 0 18px;max-width:1050px}
    .lead{font-size:clamp(16px,2vw,21px);line-height:1.6;color:var(--muted);max-width:940px;margin:0}
    .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px 0}
    .metric{
      border:1px solid var(--line);background:linear-gradient(180deg,rgba(19,36,58,.88),rgba(12,24,39,.88));
      border-radius:18px;padding:18px 20px;box-shadow:var(--shadow)
    }
    .metric b{display:block;font-size:23px;letter-spacing:-.03em}
    .metric span{display:block;color:var(--muted);font-size:12px;margin-top:5px}
    .toolbar{
      display:flex;gap:12px;justify-content:space-between;align-items:center;
      margin:28px 0 12px
    }
    .toolbar h2{font-size:22px;margin:0}
    .note{font-size:12px;color:var(--muted)}
    .table-shell{
      overflow:auto;border:1px solid var(--line);border-radius:20px;
      background:rgba(11,21,35,.78);box-shadow:var(--shadow)
    }
    table{width:100%;border-collapse:separate;border-spacing:0;min-width:1180px}
    th,td{padding:15px 14px;border-bottom:1px solid rgba(36,56,84,.82);vertical-align:middle}
    th{
      position:sticky;top:0;z-index:2;text-align:left;background:#0d1929;
      color:#b9c8dc;font-size:11px;text-transform:uppercase;letter-spacing:.09em
    }
    td{font-size:14px}
    tbody tr{transition:.18s ease}
    tbody tr:hover{background:rgba(104,216,255,.045)}
    tbody tr:last-child td{border-bottom:0}
    .gpu{font-weight:850;font-size:15px;white-space:nowrap}
    .sub{display:block;color:var(--muted);font-size:11px;margin-top:3px;font-weight:500}
    .pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:800;white-space:nowrap}
    .consumer{color:#a8e9ff;background:rgba(104,216,255,.09);border:1px solid rgba(104,216,255,.18)}
    .pro{color:#c9bcff;background:rgba(182,161,255,.09);border:1px solid rgba(182,161,255,.18)}
    .dc{color:#9af0c7;background:rgba(124,230,179,.09);border:1px solid rgba(124,230,179,.18)}
    .speed{font-weight:900;font-size:16px;color:var(--green);white-space:nowrap}
    .fit{color:#dbe8f8}
    .yes{color:var(--green)}
    .warn{color:var(--yellow)}
    .cards{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin:22px 0 48px}
    .card{
      border:1px solid var(--line);background:linear-gradient(180deg,rgba(16,29,46,.91),rgba(10,20,33,.91));
      border-radius:20px;padding:22px
    }
    .card h3{margin:0 0 12px;font-size:18px}
    .card p,.card li{color:var(--muted);line-height:1.65;font-size:14px}
    .legend{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
    .legend div{border:1px solid var(--line);border-radius:14px;padding:13px}
    .legend b{display:block;margin-bottom:4px}
    footer{padding:0 0 44px;color:#7187a4;font-size:12px;line-height:1.6}
    footer a{color:#9fdfff}
    code{font-family:"SFMono-Regular",Consolas,monospace;color:#ccecff}
    @media(max-width:900px){
      header{padding-top:42px}
      .metrics{grid-template-columns:repeat(2,1fr)}
      .cards{grid-template-columns:1fr}
      .wrap{width:min(100% - 24px,1440px)}
    }