:root{
    --sky-top:#4EA6E8;
    --sky-bottom:#eaf6ff;
    --page:#eaf6ff;
    --panel:#ffffff;
    --line:#cfe6f7;
    --ink:#182541;
    --ink-dim:#4c6079;
    --ink-faint:#7d91a8;
    --red:#e3350d;
    --red-dark:#b32307;
    --yellow:#ffcb05;
    --blue:#2f6dc4;
    --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light;
  }

  :root[data-theme="dark"]{
    --sky-top:#0c1f3d; --sky-bottom:#0a1730; --page:#0a1730;
    --panel:#122142; --line:#22345c;
    --ink:#eef3ff; --ink-dim:#a9bbd6; --ink-faint:#7488a8;
    --yellow:#ffd23f; --blue:#5b9bf0;
    color-scheme: dark;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --sky-top:#0c1f3d; --sky-bottom:#0a1730; --page:#0a1730;
      --panel:#122142; --line:#22345c;
      --ink:#eef3ff; --ink-dim:#a9bbd6; --ink-faint:#7488a8;
      --yellow:#ffd23f; --blue:#5b9bf0;
      color-scheme: dark;
    }
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--page);
    color:var(--ink);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
  }
  a{color:inherit;}
  img,svg{display:block; max-width:100%;}

  .wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

  /* ---------- NAV ---------- */
  nav.top{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 24px; max-width:1080px; margin:0 auto;
  }
  .brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-.01em;}
  .brand .ball{width:26px; height:26px; flex:none;}
  .navlinks{display:flex; gap:28px; font-weight:600; font-size:14.5px;}
  .navlinks a{text-decoration:none; color:var(--ink-dim); border-bottom:2px solid transparent; padding-bottom:3px; transition:color .15s,border-color .15s;}
  .navlinks a:hover, .navlinks a:focus-visible{color:var(--ink); border-color:var(--red);}
  .navlinks a:focus-visible{outline:2px solid var(--blue); outline-offset:4px;}
  @media (max-width:640px){ .navlinks{display:none;} }

  /* ---------- HERO ---------- */
  .hero-sky{
    background:linear-gradient(180deg, var(--sky-top), var(--sky-bottom) 85%);
    border-radius:0 0 40px 40px;
    padding-bottom:70px;
    position:relative;
    overflow:hidden;
  }
  .cloud{position:absolute; background:rgba(255,255,255,.55); border-radius:50%; filter:blur(1px);}
  :root[data-theme="dark"] .cloud, @media (prefers-color-scheme:dark){ .cloud{background:rgba(255,255,255,.06);} }

  .hero{padding:44px 0 0; text-align:center;}
  .ball-spin{width:64px; height:64px; margin:0 auto 22px; animation:float 4s ease-in-out infinite;}
  @keyframes float{0%,100%{transform:translateY(0) rotate(-6deg);} 50%{transform:translateY(-8px) rotate(6deg);}}

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.7); color:var(--red-dark);
    font-weight:800; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
    padding:7px 16px; border-radius:999px; margin:0 0 22px;
    border:1px solid rgba(227,53,13,.25);
  }
  :root[data-theme="dark"] .eyebrow{ background:rgba(18,33,66,.7); color:var(--yellow); border-color:rgba(255,210,63,.3);}

  h1{
    font-weight:800; letter-spacing:-.02em; text-wrap:balance;
    font-size:clamp(32px,5.2vw,54px); line-height:1.06; color:var(--ink);
    margin:0 0 22px;
  }
  h1 .hl{color:var(--red);}
  :root[data-theme="dark"] h1 .hl{color:var(--yellow);}

  .textbox{
    position:relative;
    max-width:56ch; margin:0 auto 34px;
    background:var(--panel); border:3px solid var(--ink);
    border-radius:16px; padding:20px 26px;
    text-align:left; font-size:16.5px; line-height:1.6; color:var(--ink-dim);
    box-shadow:0 10px 0 -4px rgba(0,0,0,.08);
  }
  .textbox b{color:var(--ink); font-weight:700;}
  .textbox .arrow{
    position:absolute; right:22px; bottom:-11px;
    width:0; height:0;
    border-left:9px solid transparent; border-right:9px solid transparent;
    border-top:11px solid var(--ink);
    animation:blink2 1.1s steps(1) infinite;
  }
  .textbox .arrow::after{
    content:""; position:absolute; left:-6px; top:-14px;
    border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid var(--panel);
  }
  @keyframes blink2{50%{opacity:.15;}}

  .cta-row{display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-bottom:52px;}
  .btn{
    font-weight:800; font-size:15px; text-decoration:none;
    padding:15px 26px; border-radius:999px;
    display:inline-flex; align-items:center; gap:10px;
    transition:transform .15s, box-shadow .15s;
  }
  .btn:focus-visible{outline:3px solid var(--blue); outline-offset:3px;}
  .btn-primary{background:var(--red); color:#fff; box-shadow:0 6px 0 var(--red-dark);}
  .btn-primary:hover{transform:translateY(2px); box-shadow:0 4px 0 var(--red-dark);}
  .btn-primary:active{transform:translateY(6px); box-shadow:0 0 0 var(--red-dark);}
  .btn-ghost{background:var(--panel); color:var(--ink); border:2px solid var(--line); box-shadow:0 6px 0 var(--line);}
  .btn-ghost:hover{transform:translateY(2px); box-shadow:0 4px 0 var(--line);}
  .btn svg{width:16px; height:16px; flex:none;}

  /* ---------- POKEDEX MOCK ---------- */
  .dex{
    max-width:640px; margin:0 auto; text-align:left;
    background:linear-gradient(160deg,#ff4a30,var(--red) 40%);
    border-radius:22px 22px 16px 16px;
    padding:18px 18px 22px;
    box-shadow:0 30px 60px -25px rgba(180,40,10,.55), inset 0 2px 0 rgba(255,255,255,.25);
    position:relative;
  }
  .dex::before{
    content:""; position:absolute; top:-14px; left:24px;
    width:36px; height:36px; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, #bfe9ff, var(--blue) 60%, #1c4f8f 100%);
    border:4px solid #f4f8fb;
    box-shadow:0 4px 10px rgba(0,0,0,.35);
  }
  .dex-lights{display:flex; gap:7px; margin:6px 0 14px 68px;}
  .dex-lights span{width:9px; height:9px; border-radius:50%; display:block;}
  .dex-lights span:nth-child(1){background:#ffd23f;}
  .dex-lights span:nth-child(2){background:#3fd672;}
  .dex-lights span:nth-child(3){background:#ff5d4e;}

  .dex-screen{
    background:var(--panel); border-radius:12px; border:3px solid #6e1004;
    padding:18px; min-height:250px;
  }
  .dex-screen-head{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
    flex-wrap:wrap; gap:10px;
  }
  .dex-screen-head span.file{font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); font-weight:600;}
  .toggle-group{display:flex; gap:4px; background:var(--page); padding:3px; border-radius:999px; border:1px solid var(--line);}
  .toggle-group button{
    font-weight:700; font-size:12px; padding:7px 13px; border-radius:999px; border:none;
    background:transparent; color:var(--ink-faint); cursor:pointer;
  }
  .toggle-group button[aria-pressed="true"]{background:var(--red); color:#fff;}
  .toggle-group button:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}

  .view{display:none;}
  .view.active{display:block; animation:fadein .25s ease;}
  @keyframes fadein{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

  pre.code{font-family:var(--mono); font-size:13px; line-height:1.85; color:var(--ink-dim); margin:0; white-space:pre-wrap;}
  pre.code .k{color:var(--ink-faint);}
  pre.code .v{color:var(--ink); font-weight:600;}
  pre.code .tag{color:var(--red); font-weight:700;}
  pre.code .cursor{display:inline-block; width:7px; height:14px; background:var(--red); vertical-align:text-bottom; animation:blink2 1s steps(1) infinite;}

  .shot-inline{width:100%; height:auto; display:block; border-radius:8px; border:1px solid var(--line);}
  .gallery-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
  .gallery-tabs button{font-weight:700; font-size:13.5px; padding:9px 16px; border-radius:999px; border:1.5px solid var(--line); background:var(--panel); color:var(--ink-dim); cursor:pointer;}
  .gallery-tabs button[aria-pressed="true"]{background:var(--red); border-color:var(--red); color:#fff;}
  .gallery-tabs button:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  .gallery-frame{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel); box-shadow:0 3px 0 var(--line);}
  .gallery-bar{display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--page); border-bottom:1px solid var(--line);}
  .gallery-bar .dot{width:10px; height:10px; border-radius:50%; background:var(--line); display:block;}
  .gallery-bar .dot:nth-child(3){background:#3fae5c;}
  .gallery-bar .url{margin-left:8px; font-family:var(--mono); font-size:12px; color:var(--ink-faint);}
  .gallery-shot{display:none;}
  .gallery-shot.active{display:block; animation:fadein .3s ease;}
  .gallery-shot img{width:100%; height:auto; display:block;}
  .gallery-caption{padding:14px 18px; font-size:13.5px; color:var(--ink-dim); border-top:1px solid var(--line); margin:0;}

  /* ---------- MARQUEE ---------- */
  .strip{overflow:hidden; padding:26px 0 8px; margin:0 auto 8px; max-width:1080px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .strip-track{display:flex; gap:14px; width:max-content; animation:scroll 32s linear infinite;}
  .strip:hover .strip-track{animation-play-state:paused;}
  @keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  .strip-track span{
    font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--ink-dim);
    white-space:nowrap; display:flex; align-items:center; gap:7px;
    background:var(--panel); border:1.5px solid var(--line); border-radius:999px; padding:7px 15px;
  }
  .strip-track span::before{content:""; width:9px; height:9px; border-radius:50%; background:linear-gradient(180deg,var(--red) 50%,#fff 50%); border:1px solid var(--ink); flex:none;}

  /* ---------- SECTIONS ---------- */
  section{padding:56px 0;}
  .section-head{margin:0 0 34px; max-width:60ch;}
  .kicker{font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); margin:0 0 8px;}
  :root[data-theme="dark"] .kicker{color:var(--yellow);}
  h2{font-size:clamp(24px,3.4vw,32px); font-weight:800; letter-spacing:-.01em; margin:0 0 10px; text-wrap:balance;}
  .section-head p{color:var(--ink-dim); line-height:1.6; margin:0; font-size:15.5px;}

  .grid-features{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px;}
  .feature{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:12px; box-shadow:0 2px 0 var(--line);}
  .icon-badge{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none;}
  .icon-badge svg{width:22px; height:22px; color:#fff;}
  .feature h3{font-size:15px; font-weight:800; margin:0;}
  .feature p{font-size:13.5px; line-height:1.55; color:var(--ink-dim); margin:0;}

  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  @media (max-width:760px){ .steps{grid-template-columns:1fr;} .grid-features{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .grid-features{grid-template-columns:1fr;} }
  .step{border:1px solid var(--line); border-radius:16px; padding:24px; background:var(--panel); box-shadow:0 2px 0 var(--line);}
  .step .n{font-weight:800; font-size:12.5px; color:var(--red); font-variant-numeric:tabular-nums; letter-spacing:.04em; display:block; margin-bottom:10px;}
  :root[data-theme="dark"] .step .n{color:var(--yellow);}
  .step h3{font-size:15px; font-weight:800; margin:0 0 8px;}
  .step p{font-size:13.5px; color:var(--ink-dim); line-height:1.6; margin:0;}
  .step code{font-family:var(--mono); background:var(--page); border:1px solid var(--line); padding:1px 6px; border-radius:4px; font-size:12.5px;}

  .download-panel{
    border:1px solid var(--line); border-radius:20px; background:var(--panel);
    padding:38px; display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap;
    box-shadow:0 3px 0 var(--line);
  }
  .dl-left{max-width:50ch;}
  .version-badge{display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:12px; color:var(--red-dark); background:rgba(227,53,13,.08); border:1px solid rgba(227,53,13,.25); padding:6px 13px; border-radius:999px; margin-bottom:14px;}
  :root[data-theme="dark"] .version-badge{color:var(--yellow); background:rgba(255,210,63,.1); border-color:rgba(255,210,63,.3);}
  .version-badge b{font-variant-numeric:tabular-nums;}
  .req-list{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px;}
  .req-list li{font-size:13.5px; color:var(--ink-dim); display:flex; gap:9px; align-items:flex-start;}
  .req-list li::before{content:"✓"; color:#3fae5c; font-weight:800; flex:none;}
  .dl-right{display:flex; flex-direction:column; gap:10px; justify-content:center; min-width:250px;}
  .dl-right .fine{font-size:11.5px; color:var(--ink-faint); text-align:center;}

  .community{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  @media (max-width:640px){ .community{grid-template-columns:1fr;} }
  .comm-card{border:1px solid var(--line); border-radius:16px; padding:22px; background:var(--panel); display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--ink); transition:transform .15s,box-shadow .15s; box-shadow:0 2px 0 var(--line);}
  .comm-card:hover{transform:translateY(-3px); box-shadow:0 6px 0 var(--line);}
  .comm-card .icon-badge svg{width:22px; height:22px;}
  .comm-card h3{margin:0 0 4px; font-size:14.5px; font-weight:800;}
  .comm-card p{margin:0; font-size:12.5px; color:var(--ink-faint);}

  .credits{margin-top:24px; font-size:12.5px; color:var(--ink-faint); line-height:1.8;}
  .credits b{color:var(--ink-dim);}

  footer{border-top:1px solid var(--line); padding:26px 0 40px; font-size:12px; color:var(--ink-faint); line-height:1.7;}
  footer a{text-decoration:underline; text-underline-offset:2px;}
  .foot-row{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}

  .scam-notice{
    display:flex; align-items:flex-start; gap:12px;
    background:rgba(227,53,13,.08); border:1px solid rgba(227,53,13,.3);
    border-radius:12px; padding:16px 18px; margin:22px 0 26px;
    font-size:13px; line-height:1.6; color:var(--ink-dim);
  }
  .scam-notice svg{width:20px; height:20px; color:var(--red); flex:none; margin-top:1px;}
  .scam-notice b{color:var(--red-dark);}
  :root[data-theme="dark"] .scam-notice b{color:var(--yellow);}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .scam-notice b{color:var(--yellow);} }

  .av-notice{
    display:flex; align-items:flex-start; gap:12px;
    background:rgba(47,109,196,.08); border:1px solid rgba(47,109,196,.3);
    border-radius:12px; padding:16px 18px; margin:18px 0 0;
    font-size:13px; line-height:1.6; color:var(--ink-dim);
  }
  .av-notice svg{width:20px; height:20px; color:var(--blue); flex:none; margin-top:1px;}
  .av-notice b{color:var(--ink);}

  .theme-toggle{
    display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
    background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:6px 12px; cursor:pointer; color:var(--ink-dim);
  }