/* The look of every page except the home page (which carries its own copy inline).
   Same clay sky, sun, drifting clouds and hill, with one glass card of words on top. */
@font-face{font-family:"Fredoka";font-style:normal;font-display:swap;font-weight:300 700;src:url(/assets/fonts/fredoka.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-display:swap;font-weight:200 1000;src:url(/assets/fonts/nunito.woff2) format("woff2")}
:root{
  --sky-top:#5DB4F5; --sky-low:#BFE6FF;
  --ink:#16324A; --ink-soft:#3E5A72;
  --blue:#1F7FB8; --blue-deep:#155E8C;
  --display:"Fredoka","Nunito",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  --body:"Nunito",ui-rounded,system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
html,body{height:100%}
body{background:var(--sky-low);color:var(--ink);font-family:var(--body);margin:0;overflow-x:hidden}
.sky{position:fixed;inset:0;background:linear-gradient(180deg,var(--sky-top) 0%,#8ECDFB 45%,var(--sky-low) 80%);overflow:hidden;z-index:0}
.sun{position:absolute;top:7%;right:9%;width:min(16vw,140px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#FFF7D6 0 18%,#FFE38A 46%,#FFCB4D 100%);
  box-shadow:inset -10px -14px 22px rgba(214,140,20,.35),0 0 60px rgba(255,222,120,.55)}
.cloud{position:absolute;left:0;width:var(--w);aspect-ratio:300/140;background:center/contain no-repeat;
  animation:drift var(--t) linear infinite;animation-delay:var(--d);will-change:transform;opacity:var(--o,1);
  filter:drop-shadow(0 10px 14px rgba(60,110,160,.18))}
@keyframes drift{from{transform:translateX(-40vw)}to{transform:translateX(120vw)}}
.c1{--w:min(34vw,300px);--t:95s;--d:-20s;--x0:8vw;top:8%;background-image:url(/assets/cloud-a.svg)}
.c2{--w:min(22vw,190px);--t:70s;--d:-55s;--x0:60vw;top:24%;background-image:url(/assets/cloud-b.svg)}
.c3{--w:min(28vw,240px);--t:120s;--d:-80s;--x0:36vw;top:3%;background-image:url(/assets/cloud-c.svg)}
.c4{--w:min(26vw,230px);--t:105s;--d:-40s;--x0:20vw;top:17%;--o:.92;background-image:url(/assets/cloud-c.svg)}
.c5{--w:min(18vw,150px);--t:85s;--d:-5s;--x0:82vw;top:33%;background-image:url(/assets/cloud-b.svg)}
.ground{position:fixed;left:0;right:0;bottom:0;height:44vh;min-height:250px;z-index:1;pointer-events:none}
.ground img{width:100%;height:100%;display:block}

.stage{position:relative;z-index:2;min-height:100%;display:flex;flex-direction:column;align-items:center;
  padding-inline:16px;padding-block:28px calc(10px + env(safe-area-inset-bottom,0px));box-sizing:border-box}
.card{width:100%;max-width:640px;margin-block:auto;box-sizing:border-box;padding:30px;border-radius:32px;
  background:rgba(255,255,255,.62);border:1.5px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 24px 60px rgba(30,80,130,.22),inset 0 1px 0 rgba(255,255,255,.75)}
@media (max-width:760px){.card{padding:24px 20px}}
.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;margin-bottom:14px}
.brand img{width:44px;height:44px;filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 4px 6px rgba(10,50,85,.45))}
.brand b{font-family:var(--display);font-weight:600;font-size:1.35rem;letter-spacing:.01em}
h1{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.1rem);line-height:1.1;margin:0 0 12px;text-wrap:balance}
h2{font-family:var(--display);font-weight:600;font-size:1.15rem;margin:22px 0 6px}
p,li{font-size:1rem;line-height:1.55;color:var(--ink-soft)}
p{margin:0 0 10px}
ul{margin:0 0 10px;padding-left:1.2em}
li{margin-bottom:4px}
strong{color:var(--ink)}
a{color:var(--blue-deep);font-weight:700}
a:focus-visible{outline:3px solid rgba(76,201,240,.65);outline-offset:2px;border-radius:4px}
.draft{display:inline-block;margin:0 0 14px;padding:6px 12px;border-radius:12px;background:#FFE38A;color:#5A4300;font-size:.82rem;font-weight:800;letter-spacing:.02em}
.small{font-size:.85rem}
pre{margin:0 0 10px;padding:12px 14px;border-radius:14px;background:#F7FBFF;border:1.5px solid rgba(22,50,74,.10);overflow-x:auto;
  font:600 .9rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
/* The links sit at the foot of the page, over the hill. */
form{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.check{display:flex;align-items:center;gap:10px;font-size:.95rem;font-weight:700;color:var(--ink);cursor:pointer}
.check input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--blue);cursor:pointer}
button{font:600 1.1rem var(--display);letter-spacing:.02em;color:#fff;border:0;border-radius:18px;padding:14px 18px;cursor:pointer;
  background:linear-gradient(180deg,#36A6E4 0%,var(--blue) 55%,var(--blue-deep) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -5px 0 rgba(10,60,95,.35),0 10px 18px rgba(21,94,140,.35);
  transition:transform .12s ease,box-shadow .12s ease}
button:hover{transform:translateY(-1px)}
button:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(10,60,95,.35),0 4px 10px rgba(21,94,140,.3)}
button:focus-visible{outline:3px solid #fff;outline-offset:2px}
footer{position:relative;z-index:3;margin-top:max(22px,12vh);padding:10px 0;display:flex;justify-content:center;flex-wrap:wrap;gap:18px;font-size:.78rem;font-weight:700}
footer a{color:#F4FFF0;text-decoration:none;text-shadow:0 1px 2px rgba(30,70,30,.5)}
footer a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.cloud{animation:none;transform:translateX(var(--x0))}button{transition:none}}