:root{
      --bg0:#070A12;
      --bg1:#0B1020;
      --card: rgba(0,0,0,0.5);
      --card2: rgba(255,255,255,0.08);
      --stroke: rgba(255,255,255,0.14);
      --text: rgba(255,255,255,0.92);
      --muted: rgba(255,255,255,0.68);
      --muted2: rgba(255,255,255,0.54);
      --brand1:#6EE7FF;
      --brand2:#A78BFA;
      --brand3:#34D399;
      --danger:#FB7185;
      --shadow: 0 20px 70px rgba(0,0,0,0.45);
      --radius: 18px;
      --radius2: 28px;
      --maxw: 1120px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }
    [data-theme="light"]{
      --bg0:#F7F8FC;
      --bg1:#EEF1FF;
      --card: rgba(0,0,0,0.04);
      --card2: rgba(0,0,0,0.06);
      --stroke: rgba(0,0,0,0.10);
      --text: rgba(0,0,0,0.88);
      --muted: rgba(0,0,0,0.62);
      --muted2: rgba(0,0,0,0.50);
      --shadow: 0 16px 50px rgba(15,23,42,0.12);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--sans);
      color:var(--text);
      background:
        radial-gradient(1200px 500px at 10% -10%, rgba(167,139,250,0.28), transparent 55%),
        radial-gradient(900px 520px at 90% 0%, rgba(110,231,255,0.22), transparent 56%),
        radial-gradient(1200px 600px at 50% 110%, rgba(52,211,153,0.18), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      min-height:100vh;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    .container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
    .pill{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 12px;border:1px solid var(--stroke);
      border-radius:999px;background:var(--card);
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow);
      font-size:13px;color:var(--muted);
    }
    .dot{
      width:8px;height:8px;border-radius:99px;
      background: linear-gradient(90deg, var(--brand1), var(--brand2));
      box-shadow: 0 0 0 3px rgba(167,139,250,0.18);
    }



#float-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;   
}
body > *:not(#float-layer){
  position: relative;
  z-index: 2;   
}
.float-item{ position:absolute; opacity: 0.85; }
.float-item img{ width:220px; border-radius:14px; }