:root{color-scheme:light;--paper:#f5f2e9;--green:#173e34}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:12px}
body{margin:0;background:var(--green);color:var(--green);font-family:sans-serif}
main{max-width:540px;margin:0 auto;background:var(--paper);padding-bottom:max(100px,env(safe-area-inset-bottom));box-shadow:0 0 80px #0002}
section,img{display:block;width:100%;height:auto;margin:0}
a{color:inherit}
.cta{display:block;transition:filter .18s}
.cta:hover{filter:brightness(.96)}
a:focus-visible{outline:4px solid #173e34;outline-offset:-4px}
#course-details:focus{outline:none}
#course-details:focus-visible{outline:3px solid #173e34;outline-offset:-3px}
.follow{position:fixed;bottom:0;left:0;right:0;z-index:10;padding-bottom:env(safe-area-inset-bottom);pointer-events:none;transition:transform .2s,opacity .2s,visibility .2s}
.follow a{display:block;width:min(92vw,500px);margin:0 auto 14px;pointer-events:auto}
.follow img{filter:drop-shadow(0 5px 10px #0003)}
.follow.hide{transform:translateY(110%);opacity:0;visibility:hidden}
.follow.hide a{pointer-events:none}
footer{text-align:center;padding:20px;font-size:14px}
footer a{display:inline-block;padding:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:12px;left:12px;z-index:30;background:var(--paper);padding:16px;transform:translateY(-160%)}
.skip:focus{transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.follow,.cta{transition:none}}