:root{
  --bg0:#0b0f14;
  --bg1:#0e131a;

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);

  --border: rgba(255,255,255,.10);
  --shadow: 0 18px 48px rgba(0,0,0,.58);
  --radius: 18px;
  --max: 1120px;
  --ease: cubic-bezier(.2,.8,.2,1);

  --page-banner: none;
  --page-banner-opacity: .28; /* increased so you can actually see it */
  --page-banner-darken: .58;  /* controls readability */
  --page-texture: none;
  --page-texture-opacity: .03; /* very subtle */

  /* Light theme variables */
  --bg0-light: #f8f9fa;
  --bg1-light: #ffffff;
  --text-light: rgba(33,37,41,.92);
  --muted-light: rgba(33,37,41,.70);
  --border-light: rgba(33,37,41,.10);
  --shadow-light: 0 18px 48px rgba(0,0,0,.12);
  --page-banner-darken-light: .20;
  --page-texture-opacity-light: .02; /* even more subtle in light mode */
}

*{ box-sizing:border-box; }
html{ height:100%; }
body{ min-height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);

  /* Base background - solid color that extends full page */
  background: var(--bg0);
  background-attachment: scroll;

  overflow-x:hidden;

  user-select: none;
  -webkit-user-select: none;

  /* Theme transition */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ambient glow effects - fixed position */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;

  background:
    radial-gradient(1200px 900px at 14% 10%, rgba(110,165,255,.10), transparent 62%),
    radial-gradient(1100px 900px at 88% 14%, rgba(255,125,195,.08), transparent 62%);
}

/* Light theme */
body.light-theme {
  --bg0: var(--bg0-light);
  --bg1: var(--bg1-light);
  --text: var(--text-light);
  --muted: var(--muted-light);
  --border: var(--border-light);
  --shadow: var(--shadow-light);
  --page-banner-darken: var(--page-banner-darken-light);
  --page-texture-opacity: var(--page-texture-opacity-light);

  background: var(--bg0);
}

body.light-theme::before {
  background:
    radial-gradient(1200px 900px at 14% 10%, rgba(110,165,255,.05), transparent 62%),
    radial-gradient(1100px 900px at 88% 14%, rgba(255,125,195,.04), transparent 62%);
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }

.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

.page{ padding: 18px 0 36px; }

img{ display:block; max-width:100%; }

/* allow selection where it matters */
input, textarea, select{
  user-select: text;
  -webkit-user-select: text;
}
button{ user-select:none; -webkit-user-select:none; }