/* Self-hosted subset of Poppins/Source Sans 3 (latin + latin-ext, covering
   every language pack in ddns-notice.js) — avoids the site's
   style-src 'self' CSP blocking the Google Fonts stylesheet. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("webfonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("webfonts/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("webfonts/poppins-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("webfonts/poppins-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("webfonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("webfonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
  /* ---------------------------------------------------------
     Tokens — light palette is complete on bare :root.
     Colours sampled from www.asus.com:
       interactive / CTA blue  #006ce1
       logo blue               #0057b7
       light band              #f5f5f5
     Type: asus.com renders in a Frutiger-humanist face —
       Segoe UI natively on Windows. Source Sans 3 is the
       closest Google Fonts stand-in for other platforms.
     --------------------------------------------------------- */
  :root{
    --ground:#ffffff;
    --surface:#f5f5f5;
    --ink:#1a1a1a;
    --ink-2:#595959;
    --line:#e6e6e6;
    --line-strong:#cccccc;
    --accent:#006ce1;
    --accent-hover:#0057b7;
    --accent-ink:#ffffff;
    --nav-bg:#ffffff;
    --nav-ink:#1a1a1a;

    --font-ui:"Segoe UI","Source Sans 3",-apple-system,BlinkMacSystemFont,
              "Helvetica Neue","Microsoft JhengHei","PingFang TC",
              "Noto Sans TC",Arial,sans-serif;
    /* Headline face: geometric grotesque at Black weight, as used on
       ASUS news headlines. Latin from Poppins, CJK from JhengHei /
       PingFang locally or Noto Sans TC as the webfont fallback. */
    --font-display:"Poppins","Microsoft JhengHei","PingFang TC",
                   "Noto Sans TC","Segoe UI",Arial,sans-serif;

    color-scheme:light dark;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --ground:#101214;
      --surface:#1a1d21;
      --ink:#f0f2f4;
      --ink-2:#a0a8b0;
      --line:#2a2e33;
      --line-strong:#3c4247;
      --accent:#4d9fee;
      --accent-hover:#7ab8f3;
      --accent-ink:#06121d;
      --nav-bg:#000000;
      --nav-ink:#ffffff;
    }
  }
  :root[data-theme="dark"]{
    --ground:#101214;
    --surface:#1a1d21;
    --ink:#f0f2f4;
    --ink-2:#a0a8b0;
    --line:#2a2e33;
    --line-strong:#3c4247;
    --accent:#4d9fee;
    --accent-hover:#7ab8f3;
    --accent-ink:#06121d;
    --nav-bg:#000000;
    --nav-ink:#ffffff;
  }

  /* ---- reset ---- */
  *,*::before,*::after{box-sizing:border-box}
  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:var(--font-ui);
    font-size:16.5px;
    font-weight:400;
    line-height:1.72;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%}
  [hidden]{display:none!important}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

  /* ---- nav ---- */
  .nav{
    position:sticky;
    top:env(safe-area-inset-top,0px);
    z-index:20;
    background:var(--nav-bg);
    border-bottom:1px solid var(--line);
  }
  .nav-in{
    max-width:1080px;
    margin:0 auto;
    padding-block:14px;
    padding-inline:20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
  }
  /* Official ASUS corporate logo (press.asus.com), embedded so the page
     stays self-contained. Grey on light grounds, white on dark. */
  .brand{display:flex;align-items:center;text-decoration:none}
  .brand img{height:22px;width:auto;display:block}
  .logo-dark{display:none}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .logo-light{display:none}
    :root:not([data-theme="light"]) .logo-dark{display:block}
  }
  :root[data-theme="dark"] .logo-light{display:none}
  :root[data-theme="dark"] .logo-dark{display:block}
  .lang{display:flex;align-items:center;gap:9px}
  .lang-label{
    font-size:11.5px;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--ink-2);
    font-weight:600;
  }
  .lang select{
    font-family:var(--font-ui);
    font-size:14.5px;
    font-weight:400;
    color:var(--nav-ink);
    background:transparent;
    border:1px solid var(--line-strong);
    border-radius:3px;
    padding:6px 30px 6px 10px;
    appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-position:calc(100% - 15px) calc(50% + 1px),calc(100% - 10px) calc(50% + 1px);
    background-size:5px 5px,5px 5px;
    background-repeat:no-repeat;
    cursor:pointer;
  }

  /* ---- page ---- */
  main{
    max-width:760px;
    margin:0 auto;
    padding-inline:20px;
    padding-block:52px 76px;
  }
  .kicker{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    font-size:13px;
    font-weight:400;
    margin:0 0 14px;
    color:var(--ink-2);
  }
  .kicker .tag{
    color:var(--accent);
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  .kicker .sep{width:3px;height:3px;border-radius:50%;background:var(--line-strong);flex:0 0 auto}

  h1{
    font-family:var(--font-display);
    font-size:clamp(28px,5.1vw,42px);
    font-weight:800;
    line-height:1.18;
    letter-spacing:-.015em;
    text-wrap:balance;
    margin:0 0 38px;
  }

  /* Thai stacks vowel and tone marks above and below the line, so it
     needs more leading than Latin or CJK. `lang` is set by apply(). */
  :root[lang="th"] body{line-height:1.95}
  :root[lang="th"] h1{line-height:1.42}

  .body p{margin:0 0 20px;max-width:66ch}
  .body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
  .body a:hover{color:var(--accent-hover)}

  /* ---- buttons ---- */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-family:var(--font-ui);
    font-size:15.5px;
    font-weight:600;
    text-decoration:none;
    padding:12px 22px;
    border-radius:4px;
    border:1px solid transparent;
    cursor:pointer;
    transition:background-color .15s ease,color .15s ease;
  }
  .btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
  .btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
  .btn svg{flex:0 0 auto}

  .cta-row{margin-top:40px}
  .cta-url{
    margin:14px 0 0;
    font-size:13.5px;
    color:var(--ink-2);
    word-break:break-all;
  }

  /* ---- footnote ---- */
  .note{
    margin-top:56px;
    padding:16px 18px;
    background:var(--surface);
    border-left:2px solid var(--accent);
    font-size:14px;
    line-height:1.66;
    color:var(--ink-2);
  }
  .note p{margin:0}

  @media (prefers-reduced-motion:reduce){
    *{transition:none!important;animation:none!important}
  }
  @media (max-width:480px){
    .nav-in{padding-inline:16px}
    main{padding-inline:16px;padding-block:36px 56px}
  }