*{box-sizing:border-box}
:root{--bg:#1c2420;--text:#e6e1d1;--muted:#98a395;--accent:#b5c48f;--line:#33403a}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font:1.125rem/1.75 "Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif}
header,main,footer{max-width:38rem;margin:0 auto;padding:1rem 1.25rem}
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1.5rem;padding-top:1.5rem}
.logo{color:var(--text);font-size:1.25rem;letter-spacing:.06em}
nav a{margin-left:1.25rem}
a{color:var(--accent);text-underline-offset:.2em}
a:hover{color:var(--text)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
nav a[aria-current]{color:var(--text);text-decoration:none}
h1{font-size:clamp(2.4rem,9vw,3.6rem);line-height:1.1;font-weight:400;margin:2.5rem 0 1rem;text-wrap:balance}
h2{font-size:1.45rem;font-weight:400;margin:2.25rem 0 .4rem}
.lead{font-size:1.3rem;color:var(--muted);text-wrap:balance}
.hero{position:relative;isolation:isolate;padding:2rem 0 1rem}
.hero::before{content:"";position:absolute;z-index:-1;right:-7rem;top:-3rem;width:24rem;height:24rem;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 .5rem,var(--line) .5rem .6rem);-webkit-mask-image:radial-gradient(circle,#000 35%,transparent 70%);mask-image:radial-gradient(circle,#000 35%,transparent 70%)}
article{border-top:1px solid var(--line);margin-top:1.5rem}
footer{color:var(--muted);font-size:.9rem;margin-top:3rem;padding-bottom:2.5rem}
.big{font-size:2.4rem;margin:1rem 0 0;line-height:1.2}
.bar{height:.5rem;background:var(--line);border-radius:.25rem;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent)}
button{font:inherit;color:var(--text);background:#26322c;border:1px solid var(--line);border-radius:.4rem;padding:.6rem 1rem;cursor:pointer}
button:hover:not(:disabled){border-color:var(--accent)}
button:disabled{opacity:.5;cursor:default}
button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#play{width:100%;font-size:1.4rem;padding:1.1rem;margin:1.25rem 0}
.up{display:block;width:100%;text-align:left;margin:.5rem 0}
.ghost{background:none;color:var(--muted);font-size:.9rem}