/* 
 * Use this in your page.
 *
 * <body class="bg"> 
 *
 * */

  <style>
    :root{
      --ink: #eaf2ff;
      --muted:#9fb7d4;
      --panel: rgba(11,39,64,.66);
      --glass: rgba(255,255,255,.10);
    }
    /* Page content sits above the fixed background slider (-1)  */
    body { margin:0; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--ink); }
    .page {
      position: relative; z-index: 0; /* stay above #background-slider-root */
      max-width: 1000px; margin: 48px auto; padding: 24px;
      background: var(--panel);
      border: 1px solid var(--glass);
      border-radius: 18px;
      backdrop-filter: blur(10px) saturate(120%);
      -webkit-backdrop-filter: blur(10px) saturate(120%);
      box-shadow: 0 12px 36px rgba(0,0,0,.40);
    }
    h1 { margin: 0 0 6px; }
    p.sub { margin: 0 0 18px; color: var(--muted); }
    .btn {
      display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid var(--glass);
      background: rgba(15,43,70,.65); color:var(--ink); text-decoration:none;
    }
    .btn:hover { background: rgba(20,62,100,.75); }
    .stack { display: grid; gap: 12px; }

    /* Theme toggle (optional) */
    .theme-toggle {
      position: fixed; top: 14px; right: 16px; z-index: 2;
      background: rgba(8,22,38,.45);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 12px; padding: 6px 10px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #d9e8ff;
    }
    .theme-toggle button {
      background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 18px;
    }

    /* Debug panel only when ?debug=1 */
    .debug {
      margin-top: 18px; padding:12px; border-radius:12px;
      background: rgba(0,0,0,.35); border:1px dashed rgba(255,255,255,.20);
      font-size: 14px; color:#cfe3ff;
      overflow:auto;
    }
    .debug table { border-collapse: collapse; }
    .debug td { padding: 4px 8px; border-bottom: 1px dotted rgba(255,255,255,.15); }
    .debug td:first-child { color:#9fb7d4; white-space:nowrap; }
  </style>
