:root{
  --ground:#EDEAE3;--card:#F6F4EE;--ink:#2E2A22;--muted:#6E6558;
  --accent:#7B1113;--gold:#C9962E;--bead:#C9962E;--line:#D9D4C9;
  --shadow1:#C7C1B4;--shadow2:#FFFFFF
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#201C18;--card:#2A2520;--ink:#EDE7DC;--muted:#A79D8D;
    --accent:#E8C46A;--gold:#E8C46A;--bead:#E8C46A;--line:#3C352C;
    --shadow1:#161310;--shadow2:#302B25
  }
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Myanmar Sangam MN","Noto Sans Myanmar",system-ui,sans-serif;
  line-height:1.75;font-size:17px;
  -webkit-font-smoothing:antialiased
}
main{max-width:720px;margin:0 auto;padding:36px 18px 64px}

nav{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:28px}
nav a{font-weight:600;text-decoration:none;color:var(--muted);letter-spacing:.02em;font-size:.95rem}
nav a[aria-current="page"]{color:var(--accent)}

/* --- hero --- */
.hero{text-align:center;margin-bottom:8px}
h1{font-size:2rem;line-height:1.35;margin:.3em 0 .1em;color:var(--accent);letter-spacing:-.01em}
.tagline{color:var(--muted);font-size:1.02rem;max-width:46ch;margin:0 auto 6px}
.muted{color:var(--muted);font-weight:400}

/* --- the bead ring: a static 27-bead ring with one gold bead orbiting,
   echoing the app's own counter --- */
.bead-ring{position:relative;width:120px;height:120px;margin:0 auto 22px}
.bead-ring-dots{
  position:absolute;width:6px;height:6px;opacity:.55;
  box-shadow:
    57.0px 3.0px 0 0 var(--bead),
    69.5px 4.5px 0 0 var(--bead),
    81.2px 8.7px 0 0 var(--bead),
    91.7px 15.6px 0 0 var(--bead),
    100.3px 24.8px 0 0 var(--bead),
    106.6px 35.6px 0 0 var(--bead),
    110.2px 47.6px 0 0 var(--bead),
    110.9px 60.1px 0 0 var(--bead),
    108.7px 72.5px 0 0 var(--bead),
    103.8px 84.0px 0 0 var(--bead),
    96.3px 94.1px 0 0 var(--bead),
    86.7px 102.1px 0 0 var(--bead),
    75.5px 107.7px 0 0 var(--bead),
    63.3px 110.6px 0 0 var(--bead),
    50.7px 110.6px 0 0 var(--bead),
    38.5px 107.7px 0 0 var(--bead),
    27.3px 102.1px 0 0 var(--bead),
    17.7px 94.1px 0 0 var(--bead),
    10.2px 84.0px 0 0 var(--bead),
    5.3px 72.5px 0 0 var(--bead),
    3.1px 60.1px 0 0 var(--bead),
    3.8px 47.6px 0 0 var(--bead),
    7.4px 35.6px 0 0 var(--bead),
    13.7px 24.8px 0 0 var(--bead),
    22.3px 15.6px 0 0 var(--bead),
    32.8px 8.7px 0 0 var(--bead),
    44.5px 4.5px 0 0 var(--bead);
}
.bead-ring-spin{
  position:absolute;inset:0;
  animation:orbit 9s linear infinite;
}
.bead-ring-active{
  position:absolute;top:0;left:50%;width:10px;height:10px;margin-left:-5px;
  border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px 1px color-mix(in srgb, var(--accent) 55%, transparent);
  animation:tap 1.125s steps(1) infinite;
}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes tap{
  0%,92%{transform:scale(1)}
  96%{transform:scale(1.45)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .bead-ring-spin{animation:none}
  .bead-ring-active{animation:none}
}

/* --- cards --- */
.card{
  background:var(--card);border-radius:26px;padding:22px 22px 8px;margin:18px 0;
  box-shadow:8px 8px 18px var(--shadow1),-8px -8px 18px var(--shadow2)
}
h2{font-size:1.2rem;line-height:1.5;margin:1.1em 0 .3em;color:var(--ink)}
.card h2:first-child{margin-top:.1em}
p,li{margin:.4em 0}
a{color:var(--accent)}
ul{padding-left:1.2em}

footer{margin-top:32px;color:var(--muted);font-size:.9rem;text-align:center}