/* ---------------------------------------------------------- palette --- */
  :root, html[data-bg="white"]{
    --bg:#ffffff; --fg:#111111; --dim:#adb1b6;
    --panel:#fafbfb; --bar:rgba(255,255,255,.92);
    --line:rgba(0,0,0,.09); --ph:#ededef;
    --cur:#0b0b0d; --g1:rgba(10,10,12,.22); --g2:rgba(10,10,12,.10); --g3:rgba(10,10,12,0);
    --next:#0f0f10;
  }
  html[data-bg="black"]{
    --bg:#0f0f10; --fg:#f1f2f3; --dim:#6c7075;
    --panel:#171718; --bar:rgba(26,26,28,.92);
    --line:rgba(255,255,255,.15); --ph:#1f1f21;
    --cur:#f1f2f3; --g1:rgba(255,255,255,.20); --g2:rgba(255,255,255,.09); --g3:rgba(255,255,255,0);
    --next:#cde571;
  }
  html[data-bg="lime"]{
    --bg:#cde571; --fg:#14170c; --dim:#7a8a49;
    --panel:rgba(255,255,255,.44); --bar:rgba(255,255,255,.66);
    --line:rgba(20,23,12,.15); --ph:#c4dd67;
    --cur:#14170c; --g1:rgba(20,23,12,.22); --g2:rgba(20,23,12,.10); --g3:rgba(20,23,12,0);
    --next:#ffffff;
  }

  /* ------------------------------------------------------- bg toggle --- */
  #bgToggle{
    position:fixed; left:16px; bottom:16px; z-index:400;
    width:15px; height:15px; padding:0; border:0; border-radius:1px;
    background:var(--next);
    box-shadow:0 0 0 1px var(--line);
    transition:background .35s ease, transform .2s ease;
  }
  #bgToggle:hover{ transform:scale(1.15); }

  /* ---------------------------------------------------------- cursor --- */
  #cur, #curGlow{
    position:fixed; left:0; top:0; width:0; height:0;
    z-index:9999; pointer-events:none;
    opacity:0; transition:opacity .35s ease;
  }
  #curGlow i{
    display:block; width:64px; height:64px; margin:-32px 0 0 -32px;
    background:radial-gradient(circle closest-side, var(--g1) 0%, var(--g2) 44%, var(--g3) 100%);
    transition:transform .3s ease;
  }
  #cur i{
    display:block; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
    background:var(--cur); border-radius:50%;
    transition:transform .25s ease;
  }
  body.cursor-on #cur, body.cursor-on #curGlow{ opacity:1; }
  body.cursor-hot #cur i{ transform:scale(1.9); }
  body.cursor-hot #curGlow i{ transform:scale(1.3); }
  body.has-cursor, body.has-cursor *{ cursor:none; }
  @media (pointer:coarse){
    #cur,#curGlow{ display:none; }
    body.has-cursor, body.has-cursor *{ cursor:auto; }
  }

  /* ---------------------------------------------------------- top bar --- */
  header{
    position:fixed; top:14px; left:0; right:0; z-index:200;
    display:flex; justify-content:center; padding:0 16px;
    pointer-events:none;
  }
  header .bar{
    pointer-events:auto;
    width:100%; max-width:620px;
    display:flex; align-items:center; justify-content:space-between;
    background:var(--bar);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-radius:6px; padding:11px 18px;
    box-shadow:0 0 0 1px var(--line), 0 2px 10px rgba(20,24,30,.05);
  }
  header nav{ display:flex; gap:18px; }
  header nav a{ color:var(--dim); transition:color .22s ease; }
  header nav a:hover, header nav a.on{ color:var(--fg); }