:root {
  --bg: #F4F0E6; --paper: #FBF9F3; --ink: #2A2420; --muted: #6B6158; --line: #DDD3C2; --wash: #EEE7DA;
  --accent: #5E1A28; --accent-hover: #47131E; --gold: #A8874E; --gold-text: #7C6232; --on-accent: #FBF9F3;
  --serif: "Crimson Pro", "Times New Roman", Times, serif;
  color-scheme: light;
}
:root[data-palette="oldmoney"] { --bg: #F4F0E6; --paper: #FBF9F3; --ink: #2A2420; --muted: #6B6158; --line: #DDD3C2; --wash: #EEE7DA; --accent: #5E1A28; --accent-hover: #47131E; --gold: #A8874E; --gold-text: #7C6232; --on-accent: #FBF9F3; }
:root[data-palette="navycamel"] { --bg: #F2EFE9; --paper: #FAF8F4; --ink: #1D2330; --muted: #5E6470; --line: #D9D3C8; --wash: #EAE6DE; --accent: #1C2B45; --accent-hover: #131E33; --gold: #A27C4E; --gold-text: #7A5C36; --on-accent: #FAF8F4; }
:root[data-palette="sage"] { --bg: #F1F0E9; --paper: #FAFAF5; --ink: #232A25; --muted: #5F6862; --line: #D6D9CF; --wash: #E8EAE1; --accent: #3F5E4A; --accent-hover: #2F4838; --gold: #AE7A56; --gold-text: #8A5C3D; --on-accent: #FAFAF5; }
:root[data-palette="dustyblue"] { --bg: #F3F1EC; --paper: #FBFAF7; --ink: #20262E; --muted: #5D6570; --line: #D8D6CF; --wash: #E9E8E2; --accent: #3B5873; --accent-hover: #2D4459; --gold: #A08455; --gold-text: #7E6640; --on-accent: #FBFAF7; }
:root[data-palette="inkstone"] { --bg: #F4F4F1; --paper: #FDFDFB; --ink: #161616; --muted: #5E5E5A; --line: #DCDCD6; --wash: #ECECE7; --accent: #1E1E1E; --accent-hover: #000000; --gold: #A3302F; --gold-text: #A3302F; --on-accent: #FDFDFB; }
:root[data-palette="midnight"] { --bg: #0F1626; --paper: #172036; --ink: #E9EBF1; --muted: #A3AABB; --line: #28334D; --wash: #1B2540; --accent: #D8C08A; --accent-hover: #E5D2A4; --gold: #8EA6C8; --gold-text: #A3B8D6; --on-accent: #141B2C; color-scheme: dark; }
:root[data-palette="charcoal"] { --bg: #18191B; --paper: #222427; --ink: #ECECEA; --muted: #A6A6A2; --line: #34363A; --wash: #2A2C30; --accent: #C9A46A; --accent-hover: #D8B783; --gold: #9AA5B1; --gold-text: #B4BDC7; --on-accent: #1A1A1A; color-scheme: dark; }
:root[data-palette="espresso"] { --bg: #1E1814; --paper: #29211B; --ink: #F0E8DD; --muted: #BCAD9E; --line: #41352C; --wash: #322820; --accent: #E6D5B8; --accent-hover: #F0E3CB; --gold: #C4935A; --gold-text: #D3A773; --on-accent: #241B15; color-scheme: dark; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: 19px; line-height: 1.55; padding: 0 max(16px, env(safe-area-inset-left, 0px)) 40px; min-height: 100vh; }
a { color: var(--accent); }
.wrap { max-width: 760px; margin: 0 auto; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.mark { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font-weight: 600; font-size: 1.2rem; text-decoration: none; }
.mark svg { width: 28px; height: 22px; }
.top .back { font-size: .95rem; color: var(--muted); }
h1 { color: var(--accent); font-weight: 600; font-size: clamp(2rem, 6vw, 2.6rem); line-height: 1.1; margin: 0 0 6px; }
h2 { color: var(--accent); font-weight: 600; font-size: 1.35rem; margin: 28px 0 6px; }
.updated { color: var(--muted); font-variant: small-caps; letter-spacing: .06em; margin: 0 0 18px; }
.lede { font-size: 1.12rem; }
ul { padding-left: 1.2em; } li { margin: 4px 0; }
.foot { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.foot a { color: var(--muted); }
.note { background: var(--wash); border-left: 3px solid var(--gold); padding: 10px 14px; border-radius: 3px; }

/* ---- skins: home page and account pages ---- */
:root[data-palette="gazette"] { --bg: #EFE3C8; --paper: #F7EDD8; --ink: #1D1A16; --muted: #5A4E3F; --line: #B9A684; --wash: #E6D6B4; --accent: #1D1A16; --accent-hover: #000000; --gold: #8A6A2E; --gold-text: #6E5322; --on-accent: #F7EDD8; --serif: "Old Standard TT", "Times New Roman", serif; --display: "IM Fell English SC", "Old Standard TT", serif; color-scheme: light; }
:root[data-palette="gazette"] h1, :root[data-palette="gazette"] h2, :root[data-palette="gazette"] h3, :root[data-palette="gazette"] .mark, :root[data-palette="gazette"] .brand, :root[data-palette="gazette"] .hello { font-family: var(--display); }
:root[data-palette="gazette"] body { background-image: radial-gradient(circle at 25% 15%, rgba(255,255,255,.45), transparent 55%), repeating-linear-gradient(0deg, rgba(60,40,10,.035) 0 1px, transparent 1px 3px); }
:root[data-palette="gazette"] *, :root[data-palette="gazette"] *::before, :root[data-palette="gazette"] *::after { border-radius: 0 !important; }
:root[data-palette="gazette"] h1, :root[data-palette="gazette"] h2 { letter-spacing: .02em; }
:root[data-palette="neon"] { --bg: #07060F; --paper: #110D24; --ink: #E8F7FF; --muted: #9AA3C7; --line: #2A2350; --wash: #171233; --accent: #5FF4FF; --accent-hover: #9FF8FF; --gold: #FF2BD6; --gold-text: #FF6BE6; --on-accent: #07060F; --serif: "Exo 2", "Segoe UI", sans-serif; --display: "Orbitron", "Exo 2", sans-serif; color-scheme: dark; }
:root[data-palette="neon"] h1, :root[data-palette="neon"] h2, :root[data-palette="neon"] h3, :root[data-palette="neon"] .mark, :root[data-palette="neon"] .brand, :root[data-palette="neon"] .hello { font-family: var(--display); }
:root[data-palette="neon"] body { background-image: radial-gradient(ellipse at 50% -10%, rgba(255,43,214,.18), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(95,244,255,.12), transparent 50%); background-attachment: fixed; }
:root[data-palette="neon"] h1, :root[data-palette="neon"] h2 { text-shadow: 0 0 8px rgba(95,244,255,.55), 0 0 22px rgba(24,168,255,.35); letter-spacing: .04em; }
:root[data-palette="neon"] .btn.primary, :root[data-palette="neon"] .pbtn:not(.ghost), :root[data-palette="neon"] .acctbtn:not(.me), :root[data-palette="neon"] .gchip.on { box-shadow: 0 0 12px rgba(95,244,255,.55); }
:root[data-palette="blueprint"] { --bg: #123D73; --paper: #164784; --ink: #EEF5FF; --muted: #B8CDE8; --line: #4A76AE; --wash: #1A4F90; --accent: #FFFFFF; --accent-hover: #DFEAFF; --gold: #9FD3FF; --gold-text: #CFE6FF; --on-accent: #123D73; --serif: "IBM Plex Sans", "Segoe UI", sans-serif; --display: "Space Mono", "Courier New", monospace; color-scheme: dark; }
:root[data-palette="blueprint"] h1, :root[data-palette="blueprint"] h2, :root[data-palette="blueprint"] h3, :root[data-palette="blueprint"] .mark, :root[data-palette="blueprint"] .brand, :root[data-palette="blueprint"] .hello { font-family: var(--display); }
:root[data-palette="blueprint"] body { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 22px); }
:root[data-palette="blueprint"] *, :root[data-palette="blueprint"] *::before, :root[data-palette="blueprint"] *::after { border-radius: 0 !important; }
:root[data-palette="blueprint"] h1, :root[data-palette="blueprint"] h2 { text-transform: uppercase; letter-spacing: .06em; }
:root[data-palette="arcade"] { --bg: #0E0B1F; --paper: #1B1636; --ink: #FFFFFF; --muted: #B7B0E0; --line: #3A3170; --wash: #241D48; --accent: #FFD84A; --accent-hover: #FFE680; --gold: #FF4F87; --gold-text: #FF8FB0; --on-accent: #0E0B1F; --serif: "VT323", "Courier New", monospace; --display: "Press Start 2P", "Courier New", monospace; color-scheme: dark; }
:root[data-palette="arcade"] h1, :root[data-palette="arcade"] h2, :root[data-palette="arcade"] h3, :root[data-palette="arcade"] .mark, :root[data-palette="arcade"] .brand, :root[data-palette="arcade"] .hello { font-family: var(--display); }
:root[data-palette="arcade"] body { font-size-adjust: .55; background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.6px); background-size: 38px 38px; }
:root[data-palette="arcade"] h1, :root[data-palette="arcade"] h2, :root[data-palette="arcade"] h3 { font-size-adjust: .38; line-height: 1.35; text-transform: uppercase; }
:root[data-palette="arcade"] h1 { text-shadow: 3px 3px 0 #FF4F87; }
:root[data-palette="arcade"] *, :root[data-palette="arcade"] *::before, :root[data-palette="arcade"] *::after { border-radius: 0 !important; }
:root[data-palette="arcade"] .btn, :root[data-palette="arcade"] .pbtn, :root[data-palette="arcade"] .gchip, :root[data-palette="arcade"] .acctbtn, :root[data-palette="arcade"] .themebtn { box-shadow: 3px 3px 0 #000; }
:root[data-palette="deco"] { --bg: #0F0F10; --paper: #18171A; --ink: #F3E7C9; --muted: #B9AB88; --line: #4A3F27; --wash: #1F1D1A; --accent: #D4AF5F; --accent-hover: #E6C57C; --gold: #D4AF5F; --gold-text: #E0C27A; --on-accent: #0F0F10; --serif: "Josefin Sans", "Segoe UI", sans-serif; --display: "Poiret One", "Josefin Sans", sans-serif; color-scheme: dark; }
:root[data-palette="deco"] h1, :root[data-palette="deco"] h2, :root[data-palette="deco"] h3, :root[data-palette="deco"] .mark, :root[data-palette="deco"] .brand, :root[data-palette="deco"] .hello { font-family: var(--display); }
:root[data-palette="deco"] body { background-image: repeating-conic-gradient(from 270deg at 50% 0%, rgba(212,175,95,.05) 0 3deg, transparent 3deg 9deg); background-attachment: fixed; }
:root[data-palette="deco"] h1, :root[data-palette="deco"] h2 { text-transform: uppercase; letter-spacing: .14em; font-weight: 400; }
:root[data-palette="terminal"] { --bg: #030603; --paper: #071007; --ink: #7DFFA3; --muted: #3FBF6A; --line: #1C4A2A; --wash: #0A170C; --accent: #36FF7A; --accent-hover: #7DFFA3; --gold: #36FF7A; --gold-text: #36FF7A; --on-accent: #030603; --serif: "IBM Plex Mono", "Courier New", monospace; --display: "VT323", "IBM Plex Mono", monospace; color-scheme: dark; }
:root[data-palette="terminal"] h1, :root[data-palette="terminal"] h2, :root[data-palette="terminal"] h3, :root[data-palette="terminal"] .mark, :root[data-palette="terminal"] .brand, :root[data-palette="terminal"] .hello { font-family: var(--display); }
:root[data-palette="terminal"] body { font-size-adjust: .52; text-shadow: 0 0 4px rgba(54,255,122,.45); }
:root[data-palette="terminal"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
:root[data-palette="terminal"] *, :root[data-palette="terminal"] *::before, :root[data-palette="terminal"] *::after { border-radius: 0 !important; }
:root[data-palette="terminal"] h1, :root[data-palette="terminal"] h2, :root[data-palette="terminal"] h3 { font-size-adjust: .62; }