:root{
  --night:#101727; --night2:#18243b; --cream:#f7f1e8; --ink:#2f2a28;
  --gold:#f0be62; --gold2:#dba14a; --muted:#93a0bf; --card:#fffdf9; --line:#ffffff1a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Georgia,'Times New Roman',serif;
  background:
    radial-gradient(1px 1px at 20% 15%, #fff7 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 8%, #fff5 0, transparent 100%),
    radial-gradient(1px 1px at 85% 30%, #fff4 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 40%, #fff3 0, transparent 100%),
    radial-gradient(1px 1px at 10% 60%, #fff4 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 75%, #fff3 0, transparent 100%),
    radial-gradient(1px 1px at 90% 85%, #fff5 0, transparent 100%),
    linear-gradient(180deg, var(--night) 0%, var(--night2) 55%, #24304f 100%);
  background-attachment:fixed;
  color:var(--cream);
  min-height:100vh;
  line-height:1.72;
}
.wrap{max-width:40rem;margin:0 auto;padding:1.25rem 1.25rem 4rem}
a{color:inherit;text-decoration:none}
.cover{text-align:center;padding:3rem 0 2rem}
.cover .moon{font-size:3.6rem;display:block;filter:drop-shadow(0 0 18px #f0be6255)}
.cover h1{font-size:1.95rem;margin-top:1rem;font-weight:normal;font-style:italic;color:var(--gold)}
.cover p.sub{color:var(--muted);font-size:.97rem;margin-top:.6rem;font-family:-apple-system,'Segoe UI',sans-serif}
.cover .lead{margin:1rem auto 0;max-width:33rem;font-size:1.04rem;color:#f2eadc}
.start{
  display:inline-block;margin-top:1.5rem;background:var(--gold);color:#3a2400;
  padding:.82rem 2rem;border-radius:2rem;font-family:-apple-system,'Segoe UI',sans-serif;
  font-weight:600;box-shadow:0 4px 20px #f0be6240;transition:transform .15s;
}
.start:active{transform:scale(.97)}
.meta{
  margin-top:1rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;
  font-family:-apple-system,'Segoe UI',sans-serif;font-size:.78rem;color:var(--muted)
}
.meta span{background:#ffffff0d;border:1px solid var(--line);padding:.42rem .7rem;border-radius:999px}
.toc{margin-top:2.2rem;display:flex;flex-direction:column;gap:.7rem}
.toc a{
  display:flex;align-items:center;gap:.9rem;background:#ffffff0d;border:1px solid var(--line);
  border-radius:1rem;padding:.9rem 1rem;transition:background .15s;
}
.toc a:active{background:#ffffff1a}
.toc .em{font-size:1.55rem;flex-shrink:0}
.toc .num{font-family:-apple-system,'Segoe UI',sans-serif;font-size:.7rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.toc .t{font-size:1.03rem;color:var(--cream)}
.resources{margin-top:1.4rem;display:flex;gap:.6rem;flex-wrap:wrap}
.resources a{
  padding:.72rem 1rem;border-radius:1rem;background:#ffffff0d;border:1px solid var(--line);
  font-family:-apple-system,'Segoe UI',sans-serif;font-size:.88rem;color:var(--cream)
}
.chap-head{text-align:center;padding:2rem 0 1rem}
.chap-head .em{font-size:2.5rem;display:block;filter:drop-shadow(0 0 14px #f0be6250)}
.chap-head .num{font-family:-apple-system,'Segoe UI',sans-serif;font-size:.72rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;display:block;margin-top:.8rem}
.chap-head h1{font-size:1.55rem;font-weight:normal;font-style:italic;color:var(--gold);margin-top:.3rem}
.figure-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;
  aspect-ratio:4/3;border-radius:1.2rem;border:2px dashed #ffffff26;
  background:linear-gradient(160deg,#ffffff0c,#ffffff04);color:var(--muted);
  font-family:-apple-system,'Segoe UI',sans-serif;font-size:.84rem;text-align:center;padding:1rem;margin:1.4rem 0;
}
.figure-card .big{font-size:2.4rem}
.story{
  background:var(--card);color:var(--ink);border-radius:1.3rem;
  padding:1.6rem 1.4rem;box-shadow:0 10px 40px #00000040;
}
.story p{margin-bottom:1.02rem;font-size:1.05rem}
.story p:last-child{margin-bottom:0}
.story strong{color:#8a4c07}
.story em{color:#8f6430}
.nav{display:flex;gap:.6rem;margin-top:1.6rem;font-family:-apple-system,'Segoe UI',sans-serif}
.nav a{
  flex:1;text-align:center;padding:.85rem .5rem;border-radius:1rem;font-weight:600;font-size:.9rem;
  background:#ffffff0d;border:1px solid var(--line);color:var(--cream);
}
.nav a.next{background:var(--gold);color:#3a2400;border:none;box-shadow:0 4px 18px #f0be6233}
.nav a.home{flex:0 0 3.2rem}
.paws{display:flex;justify-content:center;gap:.45rem;margin-top:1.5rem}
.paws span{width:.45rem;height:.45rem;border-radius:50%;background:#ffffff2a}
.paws span.on{background:var(--gold)}
.fin{text-align:center;color:var(--muted);font-family:-apple-system,'Segoe UI',sans-serif;font-size:.8rem;margin-top:2rem}
@media(min-width:700px){
  .cover h1{font-size:2.35rem}
  .story{padding:2.2rem 2.4rem}
  .story p{font-size:1.11rem}
}