/*
 * READING ATLAS — Dreamy Evergreen & Amethyst
 * Portable, offline-first design system. No fonts, libraries, or network calls.
 * Inspired by The Hundred reading library. MIT-style permission to reuse/modify.
 */
:root {
  color-scheme: dark;
  --atlas-bg: #101917;
  --atlas-surface: #17231f;
  --atlas-surface-raised: #1b2a26;
  --atlas-text: #eef4ed;
  --atlas-muted: #b4c5bc;
  --atlas-border: #35483f;
  --atlas-mint: #b8f0be;
  --atlas-purple: #c8acff;
  --atlas-lavender: #e2d6ff;
  --atlas-gold: #e7d59d;
  --atlas-shadow: 0 18px 60px #0005;
  --atlas-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --atlas-font-display: Georgia, "Times New Roman", serif;
  --atlas-radius-sm: 11px;
  --atlas-radius-md: 13px;
  --atlas-radius-lg: 20px;
  --atlas-radius-xl: 21px;
  --atlas-container: 1270px;
  --atlas-focus: 0 0 0 3px #aa80ff29;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.atlas {
  margin: 0; min-width: 320px;
  font: 17px/1.58 var(--atlas-font-body);
  color: var(--atlas-text);
  background:
    radial-gradient(ellipse 70% 700px at 92% -5%, #583a7850, transparent),
    radial-gradient(ellipse 65% 650px at -8% 12%, #256d4b44, transparent),
    var(--atlas-bg);
  min-height: 100vh;
}
.atlas button, .atlas input, .atlas select, .atlas textarea { font: inherit; }
.atlas button { cursor: pointer; }
.atlas a { color: var(--atlas-mint); }
.atlas :focus-visible { outline: 2px solid var(--atlas-purple); outline-offset: 3px; }
.atlas-container { width: min(100%, var(--atlas-container)); margin-inline: auto; padding: 34px 25px 80px; }
.atlas-topbar { display:flex;align-items:center;justify-content:space-between;gap:18px; }
.atlas-brand { font-size:.83rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--atlas-mint); }
.atlas-eyebrow { color:var(--atlas-purple);font-size:.83rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700; }
.atlas-stars { color:var(--atlas-purple);letter-spacing:.55em;font-size:22px; }
.atlas-hero { margin:45px 0 32px; }
.atlas-hero h1 { font-family:var(--atlas-font-display);font-weight:normal;font-size:clamp(3.8rem,10vw,8.5rem);line-height:.96;letter-spacing:-.075em;margin:12px 0 20px;background:linear-gradient(110deg,#f4fff2 16%,#b5edba 52%,#cbb4ff 92%);background-clip:text;-webkit-background-clip:text;color:transparent; }
.atlas-lead { color:var(--atlas-muted);max-width:780px;font-size:1.11rem;margin:0; }
.atlas-lead strong { color:#fff;font-weight:600; }
.atlas-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.atlas-stats { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:30px 0; }
.atlas-stat, .atlas-panel { background:linear-gradient(150deg,#1b2a26ee,#16211fe8);border:1px solid var(--atlas-border);border-radius:var(--atlas-radius-xl); }
.atlas-stat { padding:20px 24px; }
.atlas-stat small { display:block;color:var(--atlas-muted);font-size:.85rem; }
.atlas-stat strong { display:block;font-size:2rem;color:#f0fff0;font-weight:650;font-variant-numeric:tabular-nums; }
.atlas-panel { padding:24px 27px; }
.atlas-panel h2 { margin:0 0 8px;font-size:1.16rem; }
.atlas-panel p { margin:0;color:var(--atlas-muted); }
.atlas-section-heading { display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:33px 0 19px;border-bottom:1px solid var(--atlas-border);padding-bottom:14px; }
.atlas-section-heading h2 { font-family:var(--atlas-font-display);font-size:clamp(1.65rem,4vw,2.15rem);font-weight:normal;letter-spacing:-.02em;margin:0; }
.atlas-section-heading span { color:var(--atlas-purple);font-size:.92rem; }
.atlas-card { min-width:0;background:linear-gradient(145deg,#1b2a26,#16211f);border:1px solid var(--atlas-border);border-radius:var(--atlas-radius-lg);padding:21px 23px;transition:background .2s,border-color .2s; }
.atlas-card:hover { border-color:#7b9d80; }
.atlas-card h3 { font:normal 1.34rem/1.24 var(--atlas-font-display);margin:0 0 8px; }
.atlas-card p { margin:0 0 12px;color:#e0eae1; }
.atlas-meta { color:#c8d5cd;font-size:.91rem; }
.atlas-number { color:var(--atlas-purple);font-size:.8rem;letter-spacing:.07em; }
.atlas-badge { display:inline-block;font-size:.79rem;letter-spacing:.02em;color:#decfff;background:#422f594d;border:1px solid #78608a6a;padding:3px 9px;border-radius:999px; }
.atlas-reflection { border-left:2px solid #ac91df;padding-left:12px;color:#c7b9e3;font-size:.93rem;margin:13px 0 0; }
.atlas-reflection strong { color:var(--atlas-lavender); }
.atlas-actions { display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0 24px; }
.atlas-btn { display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;border:1px solid #66816f;background:#22372e;color:var(--atlas-text);padding:11px 15px;min-height:46px;text-decoration:none;white-space:normal; }
.atlas-btn:hover { background:#31483e; }
.atlas-btn--purple { background:#282438;border-color:#6e5e91; }
.atlas-btn--purple:hover { background:#39314f; }
.atlas-btn--ghost { background:transparent;border-color:var(--atlas-border); }
.atlas-input, .atlas-select, .atlas-textarea { width:100%;border:1px solid #4b6257;border-radius:13px;color:var(--atlas-text);background:#1b2a26;padding:12px 15px;outline:none;min-width:0; }
.atlas-input, .atlas-select { min-height:51px; }
.atlas-input:focus, .atlas-select:focus, .atlas-textarea:focus { border-color:var(--atlas-purple);box-shadow:var(--atlas-focus); }
.atlas-label { display:block;font-size:.9rem;margin:0 0 6px;color:var(--atlas-muted); }
.atlas-meter { height:10px;border-radius:50px;background:#34463f;overflow:hidden;margin:18px 0 4px; }
.atlas-meter > span { display:block;height:100%;background:linear-gradient(90deg,#a7ebac,#bd98fd);border-radius:50px; }
.atlas-check { appearance:none;width:26px;height:26px;margin:0;border:2px solid #8eb89a;border-radius:8px;position:relative;cursor:pointer;background:#102019;vertical-align:middle;flex-shrink:0; }
.atlas-check:checked { background:var(--atlas-mint);border-color:var(--atlas-mint); }
.atlas-check:checked::after { content:'✓';position:absolute;inset:-5px 0 0;text-align:center;color:#183324;font-size:23px;font-weight:900; }
.atlas-callout { border-left:3px solid var(--atlas-purple);padding:10px 15px;color:var(--atlas-muted);background:#261f322b;border-radius:0 10px 10px 0; }
.atlas-footer { border-top:1px solid var(--atlas-border);padding-top:25px;color:var(--atlas-muted);font-size:.91rem;margin-top:55px; }
.atlas-footer strong { color:#e9e6ff; }
@media (max-width:900px) { .atlas-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .atlas-grid { grid-template-columns:1fr; } .atlas-hero h1 { font-size:clamp(3.2rem,10vw,6rem); } }
@media (max-width:560px) { body.atlas { font-size:16px; } .atlas-container { padding:23px 15px 65px; } .atlas-hero { margin-top:38px; } .atlas-lead { font-size:1.04rem; } .atlas-stat { padding:16px; } .atlas-stat strong { font-size:1.7rem; } .atlas-card { padding:19px 17px; } .atlas-card h3 { font-size:1.27rem; } .atlas-actions .atlas-btn { flex:1; } .atlas-stars { font-size:16px; } }
@media print { body.atlas { background:#fff;color:#111; } .atlas-container { max-width:none; } .atlas-card,.atlas-panel,.atlas-stat { break-inside:avoid;background:#fff;color:#111;border-color:#bbb; } .atlas-hero h1 { color:#111;background:none; } .atlas-meta,.atlas-card p,.atlas-lead,.atlas-reflection { color:#222; } .atlas-actions { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important;transition:none!important; } }