/* ==========================================================
   satele logbooks — shared theme (all pages)
   ========================================================== */
:root{
  --sky1:#cfe9ff; --sky2:#fde7f3; --sky3:#fff6dc;
  --ink:#4a3f5c; --ink-soft:#8a7f9c; --card:#ffffffd9; --line:#efe3f4;
  --pink:#ff9ec7; --pink-d:#f472a8; --mint:#9be7c4; --mint-d:#4cc794;
  --lav:#c9b6ff; --lav-d:#9b83f0; --butter:#ffe08a; --peach:#ffc2a1; --sky:#9fd5ff;
  --radius:22px;
  --font-display:Fredoka,Nunito,system-ui,sans-serif;
  --font-body:Nunito,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); color:var(--ink);
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 55%,var(--sky3) 100%) fixed;
  min-height:100vh; overflow-x:hidden; display:flex; flex-direction:column;
}
h1,h2,h3,.fred{font-family:var(--font-display)}
a{color:var(--lav-d)}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--lav);outline-offset:2px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* floating clouds & islands */
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.cloud{position:absolute;background:#fff;border-radius:999px;opacity:.75;animation:drift linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:55%;height:160%;left:15%;bottom:20%}
.cloud::after{width:40%;height:130%;right:12%;bottom:25%}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
.island{position:absolute;animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){ .cloud,.island,.mascot{animation:none!important} }

/* site header */
.site-head{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:#ffffff8c;border-bottom:2px solid #ffffffb0}
.site-head .in{max-width:1080px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:19px}
.brand .spark{color:var(--pink-d)}
.site-nav{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.site-nav a{text-decoration:none;color:var(--ink);font-weight:800;font-size:14px;padding:7px 12px;border-radius:12px}
.site-nav a:hover,.site-nav a[aria-current="page"]{background:#fff}

.page{position:relative;z-index:1;flex:1;width:100%;max-width:1080px;margin:0 auto;padding:22px 16px 60px}

/* site footer */
.site-foot{position:relative;z-index:1;text-align:center;font-size:12.5px;color:var(--ink-soft);font-weight:700;padding:18px 16px 28px;line-height:1.7}
.site-foot a{color:var(--lav-d)}

/* shared bits */
.panel{background:var(--card);backdrop-filter:blur(8px);border-radius:var(--radius);padding:18px;box-shadow:0 8px 30px #b48fc522, 0 4px 0 #f0e0f2}
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:14px;font-weight:800;background:#f5eef8;text-decoration:none;color:var(--ink)}
.btn.primary{background:var(--pink);color:#fff;box-shadow:0 3px 0 var(--pink-d)}
.btn.primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--pink-d)}
.btn.danger{background:#ffe3e6;color:#c2405a}
.btn.ghost{background:transparent}
.mascot{width:76px;height:76px;flex:none;animation:bob 4s ease-in-out infinite}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(120px);background:#fff;padding:10px 18px;border-radius:999px;font-weight:800;box-shadow:0 8px 24px #b48fc544;transition:transform .35s cubic-bezier(.3,1.5,.5,1);z-index:60;max-width:92vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}

@media (max-width:560px){
  .page{padding:14px 10px 50px}
  .mascot{width:58px;height:58px}
  .brand{font-size:17px}
}