:root{
  --bg:#1b1040;
  --ink:#10092b;
  --fg:#fff6ea;
  --muted:#d3c9f0;
  --coral:#ff5d4a;
  --coral2:#ff8a5c;
  --mint:#5ef2c0;
  --sun:#ffd23f;
  --card:#2b1a63;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  display:flex;flex-direction:column;
  font-family:ui-rounded,"Nunito","Chalkboard SE","Comic Sans MS","Trebuchet MS",system-ui,sans-serif;
  color:var(--fg);
  line-height:1.6;
  background:
    radial-gradient(circle at 15% 20%,#ffd23f 0 3px,transparent 4px),
    radial-gradient(circle at 70% 35%,#5ef2c0 0 3px,transparent 4px),
    radial-gradient(circle at 40% 80%,#ff8a5c 0 3px,transparent 4px),
    radial-gradient(circle at 90% 85%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 55% 10%,#fff 0 2px,transparent 3px),
    radial-gradient(ellipse at 80% 0%,#4b1f8f 0%,transparent 55%),
    radial-gradient(ellipse at 0% 100%,#0f5a73 0%,transparent 55%),
    var(--bg);
  background-size:260px 260px,310px 310px,230px 230px,200px 200px,280px 280px,auto,auto,auto;
  background-attachment:fixed;
}
a{color:var(--sun);text-decoration:none;font-weight:700}
a:hover{text-decoration:underline wavy}

/* header / menu */
header{
  position:sticky;top:0;z-index:10;
  background:var(--coral);
  border-bottom:4px solid var(--ink);
}
.bar{
  max-width:960px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1.2rem;
}
.logo{font-weight:900;font-size:1.3rem;color:var(--ink);letter-spacing:.5px}
.logo:hover{text-decoration:none;transform:rotate(-2deg)}
nav ul{list-style:none;display:flex;gap:.5rem}
nav a{
  display:block;padding:.4rem 1rem;border-radius:999px;
  color:var(--ink);background:var(--fg);
  border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);
  transition:transform .12s,box-shadow .12s;
}
nav a:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
nav a.active{background:var(--sun)}
nav a:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}

#burger,.burger{display:none}

/* content */
main{flex:1;max-width:960px;width:100%;margin:0 auto;padding:2.5rem 1.2rem}
.hero{text-align:center;padding:2rem 0 1.5rem}
.crab{width:170px;height:auto;display:inline-block;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-14px) rotate(-3deg)}}
h1{font-size:clamp(2rem,6vw,3.4rem);margin:1rem 0 .6rem;line-height:1.15;
   text-shadow:3px 3px 0 var(--ink)}
h1 span{color:var(--mint)}
h2{font-size:1.8rem;margin-bottom:.8rem;text-shadow:2px 2px 0 var(--ink)}
.lead{color:var(--muted);max-width:600px;margin:0 auto 1.5rem;font-size:1.15rem}
.btn{
  display:inline-block;padding:.8rem 1.8rem;border-radius:999px;
  background:var(--sun);color:var(--ink);font-weight:900;font-size:1.1rem;
  border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);
  transition:transform .12s,box-shadow .12s;
}
.btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 0 var(--ink)}
.btn:active{transform:translateY(6px);box-shadow:0 0 0 var(--ink)}

.grid{
  display:grid;gap:1.2rem;margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.card{
  background:var(--card);border:4px solid var(--ink);
  border-radius:22px;padding:1.3rem;box-shadow:6px 6px 0 var(--ink);
}
.card:nth-child(3n+1){background:#3a2380}
.card:nth-child(3n+2){background:#0f5a73}
.card:nth-child(3n){background:#7a2b5e}
.card .ico{font-size:2.2rem}
.card h3{margin:.3rem 0}
.card p{color:var(--muted);font-size:.98rem}

ul.plain{margin:1.2rem 0 0 1.3rem;color:var(--muted)}
ul.plain li{margin:.3rem 0}

.tablewrap{overflow-x:auto;margin-top:1.2rem;border:4px solid var(--ink);
  border-radius:20px;box-shadow:6px 6px 0 var(--ink);background:var(--card)}
table{width:100%;border-collapse:collapse}
th,td{padding:.8rem 1rem;text-align:left;border-bottom:2px dashed rgba(255,255,255,.2)}
tr:last-child td{border-bottom:0}
th{background:var(--coral);color:var(--ink);font-weight:900}
td{color:var(--muted)}

footer{
  text-align:center;padding:1.3rem 1rem;
  color:var(--ink);font-weight:700;font-size:.9rem;
  background:var(--mint);border-top:4px solid var(--ink);
}

/* mobile menu (CSS-only) */
@media(max-width:640px){
  .burger{display:block;cursor:pointer;font-size:1.6rem;user-select:none;
    background:var(--fg);color:var(--ink);border:3px solid var(--ink);
    border-radius:12px;padding:0 .6rem;box-shadow:0 3px 0 var(--ink)}
  nav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--coral);
    max-height:0;overflow:hidden;transition:max-height .3s;
    border-bottom:4px solid var(--ink);
  }
  nav ul{flex-direction:column;padding:.6rem 1.2rem 1.2rem}
  #burger:checked ~ nav{max-height:320px}
}
@media(prefers-reduced-motion:reduce){
  .crab{animation:none}
  *{transition:none!important}
}