:root {
  --bg:#0b0d10; --panel:#15181e; --text:#eceff4; --mute:#8b93a1;
  --line:#2a313c; --accent:#5ee0c8; --chip:#5ee0c8;
  --font: ui-sans-serif, system-ui, "PingFang SC", "Noto Sans SC", sans-serif;
  --display: ui-sans-serif, system-ui, sans-serif;
  --radius: 14px; --radius-sm: 8px;
}
html[data-theme="light"] {
  --bg:#f4f5f7; --panel:#ffffff; --text:#1a1d24; --mute:#5c6570;
  --line:#d8dde4; --accent:#0f766e; --chip:#0f766e;
}
html[data-theme="beige"] {
  --bg:#f3ead8; --panel:#fbf6ea; --text:#3a3226; --mute:#7a6e5c;
  --line:#e0d3b8; --accent:#9a6b2f; --chip:#9a6b2f;
}
html[data-theme="eyegreen"] {
  --bg:#c7edcc; --panel:#d9f3dc; --text:#1e3a24; --mute:#3d5c42;
  --line:#9dca9f; --accent:#2f6b38; --chip:#2f6b38;
}

* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--text); font:15px/1.45 var(--font); min-height:100%; }
body { position:relative; isolation:isolate; }
button { font:inherit; cursor:pointer; }
.chooser { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:8px 16px; display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; }
.chooser .row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.chooser span { color:var(--mute); font-size:12px; margin-right:4px; }
.chooser button { border:1px solid var(--line); background:transparent; color:var(--text); padding:4px 10px; border-radius:999px; font-size:13px; }
.chooser button.on { background:var(--text); color:var(--bg); border-color:var(--text); }

.top { max-width:1080px; margin:0 auto; padding:22px 20px 8px; }
.logo { color:inherit; text-decoration:none; font-family:var(--display); font-size:22px; letter-spacing:.12em; }
.tag { margin:4px 0 0; color:var(--mute); font-size:12px; }
.mods { display:flex; gap:8px; overflow-x:auto; padding:10px 0 14px; }
.mods button { flex:0 0 auto; border:1px solid var(--line); background:transparent; color:var(--mute); border-radius:999px; padding:5px 12px; }
.mods button.on { color:var(--bg); background:var(--text); border-color:var(--text); }

main { max-width:1080px; margin:0 auto; padding:0 20px 80px; }
.feed { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:860px){ .feed { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .feed { grid-template-columns:1fr; } }

.card { display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; cursor:pointer; color:inherit; text-align:left; padding:0; }
.card .pic { aspect-ratio:16/10; background-size:cover; background-position:center; }
.card h2 { margin:0; padding:10px 12px 4px; font-size:15px; font-weight:600; }
.card .meta { padding:0 12px 12px; color:var(--mute); font-size:11px; letter-spacing:.04em; }

.mask { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:30; }
.detail { position:fixed; top:0; right:0; bottom:0; width:min(460px,100vw); background:var(--panel); z-index:31; overflow:auto; border-left:1px solid var(--line); }
.detail .x { position:sticky; top:10px; float:right; margin:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:999px; padding:4px 10px; }
.detail .hero { aspect-ratio:16/9; background-size:cover; background-position:center; }
.detail .body { padding:18px 20px 40px; }
.kicker { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 6px; }
.detail h1 { font-size:22px; margin:0 0 12px; font-family:var(--display); font-weight:600; }
.detail a { color:var(--accent); }
.why { color:var(--mute); font-size:13px; }
.atlas-box { margin-top:18px; border:1px solid var(--line); padding:12px; border-radius:var(--radius-sm); }
.atlas-preview { height:180px; border-radius:8px; background:
  radial-gradient(circle at 30% 40%, #e8c36a55, transparent 40%),
  radial-gradient(circle at 70% 60%, #6a8cff44, transparent 45%),
  #05060a; position:relative; overflow:hidden; }
.atlas-preview::after { content:"✦  星图预览  ·  点星体看细节"; position:absolute; inset:auto 12px 10px; color:#e8c36a; font-size:12px; letter-spacing:.12em; }
.note { color:var(--mute); font-size:12px; margin:8px 0 0; }

/* —— styles —— */
html[data-style="tech"] { --display: "DIN Alternate","Avenir Next Condensed",ui-sans-serif,sans-serif; }
html[data-style="tech"] .card { border-radius:4px; }
html[data-style="tech"] .logo { letter-spacing:.22em; text-transform:uppercase; font-size:18px; }

html[data-style="industrial"] { --radius:2px; --font:"Barlow Condensed","Arial Narrow",ui-sans-serif,sans-serif; --display:"Arial Black","Impact",sans-serif; }
html[data-style="industrial"] .card { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
html[data-style="industrial"] .logo { text-transform:uppercase; letter-spacing:.16em; }
html[data-style="industrial"] .mods button, html[data-style="industrial"] .chooser button { border-radius:2px; }

html[data-style="stardew"] { --radius:10px; --display: "Georgia","Songti SC",serif; }
html[data-style="stardew"] .card { box-shadow: 0 2px 0 color-mix(in srgb, var(--text) 12%, transparent); }
html[data-style="stardew"] .logo { letter-spacing:.04em; font-family:Georgia,"Songti SC",serif; }
html[data-style="stardew"] .card h2 { font-family:Georgia,"Songti SC",serif; font-weight:500; }

html[data-style="atlas"] { --font: Palatino, "Iowan Old Style", "Songti SC", serif; --display: Palatino, Georgia, serif; --radius:2px; --accent:#e8c36a; }
html[data-style="atlas"][data-theme="dark"] { --bg:#05060a; --panel:#0c0d12; --text:#efe6c9; --mute:#8a8368; --line:#3a3420; }
html[data-style="atlas"] .logo { letter-spacing:.22em; font-size:13px; }
html[data-style="atlas"] .logo::before { content:"STAR ATLAS · "; color:var(--accent); }
html[data-style="atlas"] .card { background:color-mix(in srgb, var(--panel) 88%, transparent); }
html[data-style="atlas"] .card h2 { font-weight:500; }

html[data-style="editorial"] { --display: "Iowan Old Style", Palatino, "Songti SC", serif; --radius:0; }
html[data-style="editorial"] .feed { gap:28px 22px; }
html[data-style="editorial"] .card { background:transparent; border:0; }
html[data-style="editorial"] .card h2 { font-family:var(--display); font-size:18px; font-weight:500; padding-left:0; }
html[data-style="editorial"] .card .meta { padding-left:0; }
html[data-style="editorial"] .logo { font-family:var(--display); font-style:italic; letter-spacing:0; }

.search { flex:1; min-width:180px; max-width:280px; }
.search input { width:100%; background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:var(--radius-sm); padding:8px 10px; font:inherit; }
.empty { color:var(--mute); text-align:center; padding:48px 8px; }
.top-row { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }

.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.cols { display:flex; gap:8px; overflow-x:auto; padding:0 0 14px; }
.cols[hidden] { display:none; }
.cols button { flex:0 0 auto; border:1px solid var(--accent); background:transparent; color:var(--accent); border-radius:999px; padding:5px 12px; }
.cols button.on { color:var(--bg); background:var(--accent); }

.figs { display:flex; flex-direction:column; gap:10px; margin:14px 0; }
.figs img { width:100%; border-radius:var(--radius-sm); border:1px solid var(--line); }

.part-chip { display:inline-block; border:1px solid var(--accent); color:var(--accent); border-radius:999px; padding:2px 10px; font-size:11px; letter-spacing:.08em; margin:0 0 12px; }
.lens .beat { margin:0 0 14px; }
.lens .en { color:var(--mute); font-size:13px; margin-top:4px; }

.card { position:relative; }
.card .pic { position:relative; }
.badge { position:absolute; top:8px; right:8px; z-index:1; font-size:10px; letter-spacing:.08em; font-weight:650; padding:3px 8px; border-radius:999px; background:rgba(8,9,12,.78); color:#efe6c9; border:1px solid #e8c36a88; }
.badge.llm { color:#8bb4ff; border-color:#8bb4ff88; }
.badge.context { color:#f0c36a; border-color:#f0c36a88; }
.badge.harness { color:#7dd3c0; border-color:#7dd3c088; }
.badge.mixed { color:#d4a1ff; border-color:#d4a1ff88; }


.feed.spine-feed { display:block; max-width:960px; margin:0 auto; }
.spine { padding:8px 0 32px; }
.spine-lead { margin:0 0 28px; color:var(--mute); font-size:15px; line-height:1.5; text-align:left; max-width:42em; }
.spine-stage {
  border:0;
  background:transparent;
  border-radius:0;
  padding:0 0 8px;
}
.spine-stage h3 {
  margin:0 0 18px;
  font-family: Georgia, "Iowan Old Style", "Songti SC", ui-serif, serif;
  font-size: clamp(28px, 4.2vw, 42px);
  letter-spacing:-.03em;
  line-height:1.15;
  color:var(--text);
  font-weight:500;
  text-align:left;
}
.spine-nodes {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
}
.spine-node {
  min-width:0;
  max-width:none;
  width:100%;
  flex:none;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  border-radius:12px;
  padding:0;
  overflow:hidden;
  text-align:left;
}
.spine-node:hover { border-color:var(--accent); }
.spine-node .node-art {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  height:180px;
  background:#0b0d10;
}
.spine-node .node-art img { width:100%; height:180px; object-fit:cover; display:block; }
.spine-node .node-art.marks { background:#10141c; }
.spine-node .node-art.marks img { object-fit:contain; padding:28px 18px; filter:brightness(0) invert(1); }
.spine-node .node-cap { display:block; padding:16px 18px 18px; }
.spine-node b { display:block; font-size:20px; font-weight:600; letter-spacing:-.02em; }
.spine-node em { display:block; margin-top:6px; color:var(--mute); font-size:13px; font-style:normal; line-height:1.4; }
.spine-node small { display:none; }
.spine-edge {
  width:1px;
  height:36px;
  margin:8px auto 20px;
  background:color-mix(in srgb, var(--text) 22%, transparent);
}
.spine-kicker { margin:36px 0 10px; font-size:13px; letter-spacing:.04em; color:var(--mute); text-align:left; text-transform:none; }
.spine-layers { display:flex; gap:8px; align-items:center; justify-content:flex-start; flex-wrap:wrap; }
.spine-layers .badge { position:static; }

.hang-bar {
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:4px;
}
.hang-back {
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  border-radius:999px;
  padding:4px 12px;
  font-size:13px;
}
.hang-back:hover { border-color:var(--accent); }
.hang-bar span { color:var(--mute); font-size:13px; }

html[data-style="tech"] .spine-node { border-radius:6px; }
html[data-style="industrial"] .spine-node,
html[data-style="industrial"] .hang-back { border-radius:2px; }
html[data-style="stardew"] .spine-node { border-radius:14px; }
html[data-style="atlas"] .spine-stage h3 { font-family: Palatino, Georgia, "Songti SC", serif; }

/* Claude-like header: same voice as the spine */
.chooser { border-bottom:0; padding:10px 20px 0; background:transparent; backdrop-filter:none; }
.chooser span { font-size:11px; }
.chooser button { border:0; padding:2px 8px; border-radius:0; font-size:12px; color:var(--mute); }
.chooser button.on { background:transparent; color:var(--text); border:0; box-shadow:inset 0 -1px 0 var(--text); }

.top, main { max-width:960px; position:relative; z-index:1; }
.top { padding:36px 20px 0; }
.top-row { align-items:flex-start; margin-bottom:8px; }
.logo {
  color:inherit;
  text-decoration:none;
  font-family: Georgia, "Iowan Old Style", "Songti SC", ui-serif, serif;
  font-size: clamp(34px, 5vw, 48px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.05;
  text-transform:none;
}
.tag { margin:10px 0 0; color:var(--mute); font-size:15px; font-family: Georgia, "Iowan Old Style", "Songti SC", ui-serif, serif; line-height:1.45; }
.search { max-width:220px; }
.search input {
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding:8px 0;
  font-size:15px;
}
.search input:focus { outline:none; border-bottom-color:var(--text); }

.mods { gap:4px 22px; overflow-x:auto; padding:18px 0 0; border-bottom:1px solid var(--line); margin:8px 0 0; }
.mods button {
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:var(--mute);
  border-radius:0;
  padding:10px 0 12px;
  font-size:15px;
}
.mods button.on {
  color:var(--text);
  background:transparent;
  border:0;
  box-shadow:inset 0 -2px 0 var(--text);
}
.cols { padding:12px 0 8px; }
.cols button { border:0; border-radius:0; padding:6px 0; margin-right:16px; color:var(--mute); }
.cols button.on { background:transparent; color:var(--text); box-shadow:inset 0 -2px 0 var(--text); }

.spine-lead { display:none; }

html[data-style="tech"] .logo,
html[data-style="industrial"] .logo,
html[data-style="stardew"] .logo,
html[data-style="atlas"] .logo {
  font-family: Georgia, "Iowan Old Style", "Songti SC", ui-serif, serif;
  font-size: clamp(34px, 5vw, 48px);
  letter-spacing:-.035em;
  text-transform:none;
}
html[data-style="atlas"] .logo::before { content:none; }
html[data-style="tech"] .logo::before { content:none; }
html[data-style="industrial"] .mods button, html[data-style="industrial"] .chooser button { border-radius:0; }

@media (max-width: 640px) {
  .chooser { display:none; }
  .top { padding:22px 16px 0; }
  .top-row { flex-direction:column; gap:12px; }
  .search { max-width:none; width:100%; }
  main { padding:0 16px 64px; }
  .spine-nodes { grid-template-columns:1fr; gap:12px; }
  .spine-node .node-art,
  .spine-node .node-art img { height:148px; }
  .spine-stage h3 { margin-bottom:12px; }
  .mods { gap:16px; }
}

/* —— page grounds (texture only; IA / cards / JSON untouched) —— */
.page-ground {
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  --ground-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ground-glow: #5ee0c8;
  --ground-glow-2: #3aa7c4;
  --ground-warm: #c4a06a;
  --ground-fiber: #6b4a28;
}
.page-ground-wash,
.page-ground-motif,
.page-ground-grain {
  position:absolute;
  inset:0;
}
.page-ground-grain {
  opacity:.22;
  background-image:var(--ground-noise);
  background-size:180px 180px;
  mix-blend-mode:overlay;
}
.page-ground-grain::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, transparent 45%, color-mix(in srgb, var(--bg) 55%, #000) 100%);
  mix-blend-mode:multiply;
  opacity:.55;
}

/* cool / warm glow follows 色板: dark+light+eyegreen stay cool; beige is warm */
html[data-theme="dark"] { --ground-glow:#54d1db; --ground-glow-2:#00c4cc; }
html[data-theme="light"] { --ground-glow:#0f766e; --ground-glow-2:#3aa7c4; }
html[data-theme="beige"] { --ground-glow:#c48a3a; --ground-glow-2:#9a6b2f; }
html[data-theme="eyegreen"] { --ground-glow:#2f6b38; --ground-glow-2:#4a8f55; }

html[data-style="tech"][data-theme="dark"] { --bg:#0d0e14; }
html[data-style="tech"][data-theme="light"] { --bg:#eef2f4; }
html[data-style="industrial"][data-theme="dark"] { --bg:#12110e; }
html[data-style="industrial"][data-theme="light"] { --bg:#eae8e3; }
html[data-style="stardew"][data-theme="dark"] { --bg:#1a1c16; }
html[data-style="stardew"][data-theme="light"] { --bg:#f3efe4; }

/* TECH · cybercore / glitch-ui: phosphor bloom, CRT scan, grain — not a flat notebook grid */
html[data-style="tech"] .page-ground-wash {
  background:
    radial-gradient(ellipse 80% 50% at 50% 108%, color-mix(in srgb, var(--ground-glow) 16%, transparent), transparent 62%),
    radial-gradient(ellipse 42% 28% at 12% 0%, color-mix(in srgb, var(--ground-glow-2) 10%, transparent), transparent 70%),
    radial-gradient(ellipse 36% 24% at 92% 8%, color-mix(in srgb, var(--ground-glow) 8%, transparent), transparent 68%),
    var(--bg);
}
html[data-style="tech"] .page-ground-motif {
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0 3px,
      color-mix(in srgb, var(--ground-glow) 7%, transparent) 3px 4px
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      color-mix(in srgb, var(--ground-glow) 5%, transparent) 48%,
      color-mix(in srgb, var(--ground-glow) 11%, transparent) 50%,
      color-mix(in srgb, var(--ground-glow) 5%, transparent) 52%,
      transparent 100%
    );
  background-size: auto, 100% 100%;
}
html[data-style="tech"] .page-ground-motif::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 2px,
      color-mix(in srgb, var(--ground-glow) 4%, transparent) 2px 3px
    );
  opacity:.35;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 38%, #000 62%, transparent 100%);
}
html[data-style="tech"] .page-ground-motif::after {
  content:"";
  position:absolute;
  left:0; right:0;
  top:18%;
  height:2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--ground-glow) 0%, transparent) 8%,
    color-mix(in srgb, var(--ground-glow) 28%, transparent) 42%,
    color-mix(in srgb, var(--ground-glow) 8%, transparent) 70%,
    transparent 100%
  );
  opacity:.45;
  animation: tech-glitch-line 11s steps(2, end) infinite;
}
html[data-style="tech"] .page-ground-grain { opacity:.28; }
html[data-theme="light"][data-style="tech"] .page-ground-motif,
html[data-theme="beige"][data-style="tech"] .page-ground-motif,
html[data-theme="eyegreen"][data-style="tech"] .page-ground-motif { opacity:.55; }
html[data-theme="light"][data-style="tech"] .page-ground-grain,
html[data-theme="beige"][data-style="tech"] .page-ground-grain,
html[data-theme="eyegreen"][data-style="tech"] .page-ground-grain { opacity:.12; mix-blend-mode:multiply; }

@keyframes tech-glitch-line {
  0%, 86%, 100% { transform:translateY(0); opacity:.2; }
  88% { transform:translateY(42vh); opacity:.55; }
  90% { transform:translateY(18vh); opacity:.15; }
  93% { transform:translateY(61vh); opacity:.4; }
}

/* INDUSTRIAL · brutalist / workshop: concrete, rust, blueprint ticks — not brick clipart */
html[data-style="industrial"] .page-ground-wash {
  background:
    radial-gradient(ellipse 55% 40% at 8% 92%, color-mix(in srgb, #8a4a22 22%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 32% at 96% 12%, color-mix(in srgb, #6a5340 14%, transparent), transparent 68%),
    radial-gradient(ellipse 70% 28% at 50% 100%, color-mix(in srgb, #3a3228 28%, transparent), transparent 72%),
    var(--bg);
}
html[data-theme="light"][data-style="industrial"] .page-ground-wash,
html[data-theme="beige"][data-style="industrial"] .page-ground-wash,
html[data-theme="eyegreen"][data-style="industrial"] .page-ground-wash {
  background:
    radial-gradient(ellipse 50% 36% at 6% 94%, color-mix(in srgb, #a34e00 10%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 28% at 94% 8%, color-mix(in srgb, #54674a 8%, transparent), transparent 68%),
    var(--bg);
}
html[data-style="industrial"] .page-ground-motif {
  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0 79px,
      color-mix(in srgb, var(--text) 10%, transparent) 79px 80px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 79px,
      color-mix(in srgb, var(--text) 10%, transparent) 79px 80px
    ),
    repeating-linear-gradient(
      -18deg,
      transparent 0 11px,
      color-mix(in srgb, #8a4a22 7%, transparent) 11px 12px
    );
  opacity:.55;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, transparent 28%, #000 78%);
}
html[data-style="industrial"] .page-ground-motif::before {
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 22%, transparent) 0.55px, transparent 0.7px);
  background-size: 5px 5px;
  opacity:.28;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 36%, transparent 42%, #000 100%);
}
html[data-style="industrial"] .page-ground-motif::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:14px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, #c45a12 55%, transparent) 0 18px,
    color-mix(in srgb, var(--bg) 0%, #1a140e) 18px 36px
  );
  opacity:.22;
}
html[data-theme="light"][data-style="industrial"] .page-ground-motif::after,
html[data-theme="beige"][data-style="industrial"] .page-ground-motif::after,
html[data-theme="eyegreen"][data-style="industrial"] .page-ground-motif::after {
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, #c45a12 40%, transparent) 0 18px,
    color-mix(in srgb, var(--text) 12%, transparent) 18px 36px
  );
  opacity:.14;
}
html[data-style="industrial"] .page-ground-grain { opacity:.34; }
html[data-theme="light"][data-style="industrial"] .page-ground-grain,
html[data-theme="beige"][data-style="industrial"] .page-ground-grain,
html[data-theme="eyegreen"][data-style="industrial"] .page-ground-grain {
  opacity:.16;
  mix-blend-mode:multiply;
}

/* RURAL · cottagecore: paper, watercolor, gingham, wood — not a cartoon farm */
html[data-style="stardew"] .page-ground-wash {
  background:
    radial-gradient(ellipse 46% 34% at 10% 8%, color-mix(in srgb, #54674a 22%, transparent), transparent 72%),
    radial-gradient(ellipse 40% 30% at 92% 14%, color-mix(in srgb, #a34e00 12%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 28% at 70% 100%, color-mix(in srgb, #6b4a28 16%, transparent), transparent 72%),
    radial-gradient(ellipse 36% 24% at 28% 88%, color-mix(in srgb, #54674a 14%, transparent), transparent 68%),
    var(--bg);
}
html[data-theme="light"][data-style="stardew"] .page-ground-wash,
html[data-theme="beige"][data-style="stardew"] .page-ground-wash {
  background:
    radial-gradient(ellipse 48% 36% at 8% 6%, color-mix(in srgb, #54674a 14%, transparent), transparent 72%),
    radial-gradient(ellipse 42% 30% at 94% 12%, color-mix(in srgb, #a34e00 9%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 26% at 60% 100%, color-mix(in srgb, #c4a06a 16%, transparent), transparent 74%),
    var(--bg);
}
html[data-theme="eyegreen"][data-style="stardew"] .page-ground-wash {
  background:
    radial-gradient(ellipse 48% 36% at 10% 8%, color-mix(in srgb, #2f6b38 16%, transparent), transparent 72%),
    radial-gradient(ellipse 40% 28% at 90% 16%, color-mix(in srgb, #9a6b2f 8%, transparent), transparent 70%),
    var(--bg);
}
html[data-style="stardew"] .page-ground-motif {
  background-image:
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, #6b4a28 7%, transparent) 0 1px,
      transparent 1px 22px
    ),
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, #6b4a28 7%, transparent) 0 1px,
      transparent 1px 22px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 21px,
      color-mix(in srgb, #54674a 6%, transparent) 21px 44px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 21px,
      color-mix(in srgb, #54674a 6%, transparent) 21px 44px
    );
  opacity:.55;
  mask-image: radial-gradient(ellipse 78% 72% at 50% 38%, transparent 22%, #000 82%);
}
html[data-theme="dark"][data-style="stardew"] .page-ground-motif { opacity:.28; }
html[data-style="stardew"] .page-ground-motif::before {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:min(28vh, 240px);
  background:
    repeating-linear-gradient(
      86deg,
      transparent 0 6px,
      color-mix(in srgb, #6b4a28 10%, transparent) 6px 7px,
      transparent 8px 13px,
      color-mix(in srgb, #3d2a18 8%, transparent) 13px 14px
    ),
    linear-gradient(
      to top,
      color-mix(in srgb, #6b4a28 22%, transparent) 0%,
      color-mix(in srgb, #6b4a28 8%, transparent) 42%,
      transparent 100%
    );
  opacity:.55;
  mask-image: linear-gradient(to top, #000 0%, #000 28%, transparent 100%);
}
html[data-theme="dark"][data-style="stardew"] .page-ground-motif::before { opacity:.35; }
html[data-style="stardew"] .page-ground-motif::after {
  content:"";
  position:absolute;
  width:42vw;
  height:32vh;
  left:-8vw;
  top:-6vh;
  border-radius:40% 60% 70% 30% / 50% 40% 60% 50%;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, #54674a 18%, transparent), transparent 68%);
  filter:blur(8px);
  opacity:.55;
}
html[data-style="stardew"] .page-ground-grain { opacity:.2; mix-blend-mode:multiply; }
html[data-theme="dark"][data-style="stardew"] .page-ground-grain { opacity:.3; mix-blend-mode:overlay; }

/* ATLAS · passed nebula: sparse starfield on a deep cool void */
html[data-style="atlas"] .page-ground-wash {
  background:
    radial-gradient(ellipse 70% 40% at 50% 120%, #12142a 0%, transparent 60%),
    linear-gradient(180deg, #05060a 0%, #070814 58%, #0b1020 100%);
}
html[data-theme="light"][data-style="atlas"] .page-ground-wash,
html[data-theme="beige"][data-style="atlas"] .page-ground-wash,
html[data-theme="eyegreen"][data-style="atlas"] .page-ground-wash {
  background:
    radial-gradient(ellipse 70% 40% at 50% 120%, color-mix(in srgb, #3a3420 10%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, #1a1c28) 100%);
}
html[data-style="atlas"] .page-ground-motif {
  background:transparent;
}
html[data-style="atlas"] .page-ground-motif::before,
html[data-style="atlas"] .page-ground-motif::after {
  content:"";
  position:absolute;
  width:1px;
  height:1px;
  background:transparent;
  border-radius:50%;
}
html[data-style="atlas"] .page-ground-motif::before {
  box-shadow:
    1309px 228px rgba(255,255,255,.13),
    563px 501px rgba(255,255,255,.18),
    1508px 209px rgba(255,255,255,.30),
    1827px 1116px rgba(255,255,255,.14),
    864px 65px rgba(255,255,255,.13),
    447px 476px rgba(255,255,255,.25),
    54px 1149px rgba(255,255,255,.17),
    1330px 1116px rgba(255,255,255,.23),
    919px 569px rgba(255,255,255,.33),
    13px 326px rgba(255,255,255,.30),
    696px 569px rgba(255,255,255,.16),
    1563px 689px rgba(255,255,255,.15),
    778px 198px rgba(255,255,255,.21),
    704px 541px rgba(255,255,255,.33),
    1494px 940px rgba(255,255,255,.26),
    1888px 775px rgba(255,255,255,.14),
    600px 740px rgba(255,255,255,.27),
    1442px 142px rgba(255,255,255,.13),
    466px 592px rgba(255,255,255,.38),
    1751px 476px rgba(255,255,255,.35),
    778px 569px rgba(255,255,255,.24),
    1708px 747px rgba(255,255,255,.16),
    727px 429px rgba(255,255,255,.29),
    1437px 146px rgba(255,255,255,.28),
    350px 1093px rgba(255,255,255,.31),
    334px 946px rgba(255,255,255,.22),
    1895px 1140px rgba(255,255,255,.18),
    664px 114px rgba(255,255,255,.18),
    65px 646px rgba(255,255,255,.22),
    135px 432px rgba(255,255,255,.36),
    1161px 644px rgba(255,255,255,.18),
    1022px 810px rgba(255,255,255,.35),
    1316px 939px rgba(255,255,255,.16),
    285px 505px rgba(255,255,255,.31),
    1103px 538px rgba(255,255,255,.31),
    877px 1195px rgba(255,255,255,.22),
    449px 283px rgba(255,255,255,.25),
    186px 96px rgba(255,255,255,.34),
    313px 327px rgba(255,255,255,.33),
    864px 130px rgba(255,255,255,.22),
    1220px 958px rgba(255,255,255,.26),
    1133px 23px rgba(255,255,255,.30),
    234px 1099px rgba(255,255,255,.32),
    1574px 696px rgba(255,255,255,.15),
    890px 323px rgba(255,255,255,.24),
    1478px 539px rgba(255,255,255,.37),
    1560px 365px rgba(255,255,255,.25),
    217px 611px rgba(255,255,255,.34),
    1039px 407px rgba(255,255,255,.16),
    1561px 330px rgba(255,255,255,.26),
    1594px 1086px rgba(255,255,255,.36),
    1226px 663px rgba(255,255,255,.25),
    229px 743px rgba(255,255,255,.35),
    1703px 629px rgba(255,255,255,.18),
    493px 1161px rgba(255,255,255,.37),
    175px 995px rgba(255,255,255,.33),
    1557px 1090px rgba(255,255,255,.32),
    262px 973px rgba(255,255,255,.37),
    338px 542px rgba(255,255,255,.26),
    1242px 866px rgba(255,255,255,.37),
    1902px 1104px rgba(255,255,255,.32),
    1412px 411px rgba(255,255,255,.31),
    817px 764px rgba(255,255,255,.23),
    1059px 924px rgba(255,255,255,.15),
    460px 131px rgba(255,255,255,.21),
    1204px 1134px rgba(255,255,255,.18),
    451px 14px rgba(255,255,255,.14),
    1292px 120px rgba(255,255,255,.18),
    1854px 64px rgba(255,255,255,.34),
    145px 1052px rgba(255,255,255,.18),
    1370px 994px rgba(255,255,255,.18),
    270px 1169px rgba(255,255,255,.27),
    497px 968px rgba(255,255,255,.33),
    389px 193px rgba(255,255,255,.15),
    882px 725px rgba(255,255,255,.23),
    956px 110px rgba(255,255,255,.30),
    1323px 201px rgba(255,255,255,.14),
    1491px 694px rgba(255,255,255,.33),
    223px 509px rgba(255,255,255,.17),
    1098px 918px rgba(255,255,255,.16),
    375px 570px rgba(255,255,255,.24),
    1790px 154px rgba(255,255,255,.24),
    1764px 1127px rgba(255,255,255,.15),
    1335px 1107px rgba(255,255,255,.34),
    191px 484px rgba(255,255,255,.16),
    994px 985px rgba(255,255,255,.18),
    821px 120px rgba(255,255,255,.16),
    4px 799px rgba(255,255,255,.19),
    1605px 931px rgba(255,255,255,.19),
    1426px 1138px rgba(255,255,255,.29);
}
html[data-style="atlas"] .page-ground-motif::after {
  box-shadow:
    996px 317px rgba(255,255,255,.51),
    445px 119px rgba(255,255,255,.64),
    1110px 124px rgba(255,255,255,.70),
    117px 102px rgba(255,255,255,.64),
    1029px 1087px rgba(255,255,255,.50),
    1040px 164px rgba(255,255,255,.73),
    140px 139px rgba(255,255,255,.67),
    481px 826px rgba(255,255,255,.49),
    1823px 1166px rgba(255,255,255,.53),
    1217px 81px rgba(255,255,255,.65),
    858px 1195px rgba(255,255,255,.64),
    647px 534px rgba(255,255,255,.52),
    1466px 643px rgba(255,255,255,.53),
    810px 268px rgba(255,255,255,.67),
    614px 936px rgba(255,255,255,.55),
    1539px 148px rgba(255,255,255,.45),
    1272px 1153px rgba(255,255,255,.78),
    150px 1101px rgba(255,255,255,.52),
    543px 271px rgba(255,255,255,.76),
    1804px 140px rgba(255,255,255,.74),
    756px 583px rgba(255,255,255,.50),
    1707px 1112px rgba(255,255,255,.68),
    1252px 1083px rgba(255,255,255,.45),
    1673px 1135px rgba(255,255,255,.55),
    1358px 212px rgba(255,255,255,.76),
    275px 541px rgba(255,255,255,.49),
    219px 1133px rgba(255,255,255,.50),
    577px 431px rgba(255,255,255,.69);
}
html[data-theme="light"][data-style="atlas"] .page-ground-motif,
html[data-theme="beige"][data-style="atlas"] .page-ground-motif,
html[data-theme="eyegreen"][data-style="atlas"] .page-ground-motif { opacity:.35; }
html[data-style="atlas"] .page-ground-grain { opacity:.12; }

@media (prefers-reduced-motion: reduce) {
  html[data-style="tech"] .page-ground-motif::after { animation:none; }
}