:root { color-scheme: dark; font-family: "Segoe UI", Arial, sans-serif; color: #f2f6ff; background: #060916; }
    * { box-sizing: border-box; }
    body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 20% 5%, #12204a 0, #0b1024 36%, #060916 76%); }
    a { color: #8adfff; text-underline-offset: 4px; }
    a:hover { color: #c2edff; }
    a:focus-visible { outline: 3px solid #c6adff; outline-offset: 5px; border-radius: 3px; }
    .shell { width: min(100%, 1120px); margin: 0 auto; padding: 0 32px; }
    .site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 26px; padding-bottom: 26px; border-bottom: 1px solid #22304d; }
    .brand { display: inline-flex; align-items: center; gap: 13px; color: #f2f6ff; font-weight: 700; font-size: 17px; letter-spacing: .1em; text-decoration: none; white-space: nowrap; }
    .brand img { display: block; width: 44px; height: auto; }
    .site-nav { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; font-size: 14px; }
    .site-nav a { color: #b8c8e2; text-decoration: none; }
    .site-nav a:hover, .site-nav [aria-current="page"] { color: #8adfff; }
    main { padding-top: 64px; padding-bottom: 52px; }
    .eyebrow { margin: 0 0 14px; color: #8adfff; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
    h1 { margin: 0 0 18px; font-size: clamp(36px, 7vw, 54px); line-height: 1.12; letter-spacing: -.025em; }
    .intro { max-width: 650px; margin: 0; color: #b8c8e2; font-size: 17px; line-height: 1.75; }
    .products { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; margin-top: 36px; align-items: stretch; }
    .product { display: flex; flex-direction: column; min-width: 0; padding: 30px; border: 1px solid #2b3d5e; border-radius: 16px; background: #0e1830; }
    .product.lite { border-top: 3px solid #73e4bf; }
    .product.native { border-top: 3px solid #9483ee; background: #0c1327; }
    .card-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 23px; }
    .edition { color: #a9bbd5; font-size: 13px; }
    .badge { display: inline-block; padding: 5px 10px; border: 1px solid #315c55; border-radius: 99px; color: #a9f3d9; font-size: 12px; font-weight: 600; }
    .native .badge { border-color: #514570; color: #d2c3ff; }
    h2 { margin: 0 0 15px; font-size: 28px; line-height: 1.2; letter-spacing: -.02em; }
    .product p { margin: 0 0 24px; color: #b8c8e2; font-size: 15px; line-height: 1.75; }
    dl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; margin: 2px 0 30px; }
    dl div { min-width: 0; }
    dt { margin-bottom: 7px; color: #91a4c3; font-size: 12px; }
    dd { margin: 0; color: #edf4ff; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
    .button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; width: 100%; padding: 13px 18px; border: 1px solid #8adfff; border-radius: 8px; background: #8adfff; color: #071626; font-size: 16px; font-weight: 700; text-align: center; text-decoration: none; line-height: 1.4; }
    .button:hover { background: #b5ebff; border-color: #b5ebff; color: #071626; }
    .product .download-note { margin: 10px 0 21px; color: #91a4c3; font-size: 12px; text-align: center; }
    .links { display: flex; flex-wrap: wrap; gap: 14px 24px; font-size: 14px; }
    .product .name-note { margin: 23px 0 0; padding-top: 18px; border-top: 1px solid #2b3d5e; color: #a3b5d0; font-size: 13px; overflow-wrap: anywhere; }
    .native .availability { margin: auto 0 0; padding-top: 30px; }
    .availability strong { display: block; margin-bottom: 8px; color: #ddd4ff; font-size: 17px; }
    .product .availability p { margin: 0; }
    .site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 25px; padding-bottom: 30px; border-top: 1px solid #22304d; color: #91a4c3; font-size: 13px; }
    @media (max-width: 740px) {
      .products { grid-template-columns: 1fr; }
      main { padding-top: 42px; }
      .site-header { align-items: flex-start; }
      .site-nav { gap: 13px; justify-content: flex-end; }
    }
    @media (max-width: 440px) {
      .shell { padding-left: 20px; padding-right: 20px; }
      .site-header { flex-direction: column; gap: 20px; }
      .site-nav { justify-content: flex-start; gap: 24px; }
      .product { padding: 24px; }
    }
  
    .skip { position:absolute;left:16px;top:-80px;padding:12px;background:#8adfff;color:#071626;z-index:5; }
    .skip:focus { top:12px; }
    .site-nav { gap:16px; }
    .lead { max-width:790px; }
    .hero-heading { display:flex;align-items:center;gap:20px; }
    .hero-heading img { width:88px;height:auto;flex-shrink:0; }
    .hero-heading h1 { margin-bottom:0; }
    .hero-actions { display:flex;flex-wrap:wrap;gap:14px;margin:26px 0;align-items:center; }
    .hero-actions .button { padding:14px 22px;text-decoration:none; }
    .secondary { padding:12px 0;font-size:15px; }
    figure { margin:32px 0 42px; }
    figure img { display:block;width:100%;height:auto;border:1px solid #31506a;border-radius:12px; }
    figcaption { margin-top:12px;color:#a3b5d0;font-size:13px;line-height:1.6; }
    .feature-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:26px 0 44px; }
    .feature { background:#0e1830;padding:24px;border:1px solid #2b3d5e;border-top:2px solid #73e4bf;border-radius:12px; }
    .feature h3 { font-size:20px;margin:0 0 12px; }
    .feature p { margin:0;line-height:1.75;color:#b8c8e2; }
    section { margin-top:40px; }
    section p,section li,article p,article li { color:#b8c8e2;line-height:1.8; }
    section h2,article h2 { margin-top:32px;font-size:27px; }
    .reading { max-width:780px; }
    .reading li+li { margin-top:12px; }
    .guide-list { display:grid;gap:20px;margin-top:30px; }
    .guide-card { display:block;padding:26px;border:1px solid #2b3d5e;background:#0e1830;border-radius:12px;text-decoration:none; }
    .guide-card h2 { margin:0 0 12px;font-size:23px;color:#8adfff; }
    .guide-card p { margin:0;color:#b8c8e2;line-height:1.75; }
    .note { border-left:3px solid #73e4bf;padding:14px 20px;background:#0e1830; }
    code { background:#15243b;border-radius:4px;padding:2px 5px;color:#dfebff;overflow-wrap:anywhere; }
    .meta { color:#91a4c3;font-size:13px;margin:18px 0 30px; }
    .breadcrumbs { color:#91a4c3;font-size:14px;margin-bottom:22px; }
    @media(max-width:850px) { .feature-grid { grid-template-columns:1fr; } .site-header { flex-wrap:wrap; } }
    @media(max-width:440px) { .hero-heading { align-items:flex-start;gap:14px; } .hero-heading img { width:60px; } .site-nav { gap:16px; } .guide-card { padding:22px; } }