:root {
  --ink: #101010;
  --paper: #fffdf5;
  --readable-bg: #ffffff;
  --shadow: 0 8px 30px rgba(0,0,0,0.15);
  --c1: #ff3bbf; /* hot pink */
  --c2: #00e5ff; /* neon cyan */
  --c3: #ffe600; /* lemon */
  --c4: #5bff4d; /* toxic lime */
  --c5: #ff7a00; /* orange */
  --crayon-width: 5px;
  --wobble: 1.5deg;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper) url('paper_bg.png') center/600px repeat;
  image-rendering: -webkit-optimize-contrast;
}
.noise { pointer-events:none; position:fixed; inset:0; background:
  repeating-linear-gradient(90deg, transparent 0 2px, rgba(0,0,0,0.02) 2px 3px),
  repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.02) 2px 3px);
  mix-blend-mode: multiply; opacity:.3; }
.hero {
  position: relative; padding: 56px 20px 24px; text-align: center;
}
.crayon-title {
  font-family: "Noto Sans", "Space Mono", sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 8vw, 96px);
  letter-spacing: 1px;
  display: inline-block;
  transform: rotate(-1deg);
  animation: shimmy 2.4s infinite cubic-bezier(.2,.8,.2,1) alternate;
}
.tagline {
  display:block; margin-top:6px; font-size: clamp(12px, 2.2vw, 16px);
  color:#000; background: linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4));
  -webkit-background-clip:text; background-clip:text; color: transparent;
  text-shadow: none; transform: rotate(0.4deg);
}
@keyframes shimmy { from { transform: rotate(-2deg) translateY(0); } to { transform: rotate(2deg) translateY(-2px); } }

.wonky-nav { margin: 18px auto 8px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.btn {
  position: relative;
  border: none;
  background: var(--c3);
  color: #000;
  padding: 12px 16px;
  font-weight: 800;
  box-shadow: -3px 3px 0 #000;
  transform: rotate(-1deg);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, filter .1s;
  outline: 3px solid #000;
}
.btn.wonky:nth-child(2){ background: var(--c1); transform: rotate(3deg); }
.btn.wonky:nth-child(3){ background: var(--c4); transform: rotate(-4deg); }
.btn.wonky:nth-child(4){ background: var(--c2); transform: rotate(2deg); filter: grayscale(.9) contrast(1.2); }
.btn:disabled { opacity:.8; cursor:not-allowed; }
.btn:hover { transform: translate(-2px, -2px) rotate(var(--wobble)); box-shadow: 0 0 0 3px #000, -6px 6px 0 #000; }
.btn:active { transform: translate(0,0) rotate(0deg); box-shadow: -2px 2px 0 #000; }
.btn.chunky { background: var(--c5); }
.btn.outline { background: #fff; outline-offset: -4px; }
[data-jiggle] { animation: jiggle 1.6s infinite ease-in-out alternate; }
@keyframes jiggle { from{ transform: rotate(-1.8deg); } to{ transform: rotate(1.8deg); } }

.scribble { position:absolute; width:min(60%,760px); opacity:.6; pointer-events:none; }
.scribble-top { top:-20px; left:50%; transform: translateX(-50%) rotate(-6deg); }

.doodles { position:absolute; inset:0; pointer-events:none; }
.doodle { position:absolute; width:90px; filter: drop-shadow(0 2px 0 #000) drop-shadow(-2px 0 0 #000); }
.floaty { animation: float 5s ease-in-out infinite; }
@keyframes float { 0%{ transform: translateY(0) rotate(-4deg);} 50%{ transform: translateY(-8px) rotate(4deg);} 100%{ transform: translateY(0) rotate(-4deg);} }
.star { top: 20px; left: 8%; }
.zap { top: 40%; left: 4%; transform: rotate(12deg); }
.swirl { top: 18%; right: 6%; }
.splat { bottom: 0; right: 12%; transform: rotate(-8deg); }

.container { max-width: 920px; margin: 0 auto; padding: 16px; }
.card {
  position: relative;
  background: var(--readable-bg);
  border: var(--crayon-width) solid #000;
  box-shadow: var(--shadow);
  padding: 18px;
  transform: rotate(-.7deg);
  background-image:
    linear-gradient(transparent 97%, rgba(0,0,0,.08) 98%),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(255,230,0,.18) 30px 31px);
}
.readable { line-height: 1.45; }
.tape { position:absolute; width:90px; opacity:.9; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.tape-1 { top:-24px; left:-18px; transform: rotate(-14deg); }
.tape-2 { top:-26px; right:-12px; transform: rotate(7deg) scaleX(-1); }

.crayon-heading {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  display: inline-block;
  background: linear-gradient(90deg, var(--c2), var(--c1), var(--c4));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000;
  transform: rotate(-1.2deg);
  margin: 6px 0 12px;
}

.exp h3 {
  margin: 6px 0 6px;
  font-size: 1.25rem;
  transform: rotate(.6deg);
  text-decoration: underline wavy var(--c1);
  text-underline-offset: 4px;
}
.badge {
  display: inline-block;
  padding: 4px 8px;
  background: repeating-linear-gradient(135deg,var(--c3),var(--c3) 8px, var(--c1) 8px, var(--c1) 16px);
  color: #000; border: 3px solid #000; transform: rotate(-3deg);
  font-weight: 900; box-shadow: -3px 3px 0 #000;
}

.exp .row { display:flex; gap:10px; align-items: center; flex-wrap:wrap; }
.exp .meta { font-size: .9rem; opacity:.85; }

.actions { display:flex; gap:10px; margin: 14px 0 8px; flex-wrap: wrap; }
details summary { cursor: pointer; list-style: none; }
details summary::marker, details summary::-webkit-details-marker { display:none; }
details summary { display:inline-block; padding: 8px 10px; background:#fff; border:3px solid #000; transform: rotate(-1deg); }
.history { margin: 8px 0 0; padding-left: 18px; }
.history li { margin: 4px 0; }

.footer { text-align:center; padding: 24px; font-size: 12px; opacity:.9; }

@media (prefers-reduced-motion: reduce) {
  [data-jiggle], .floaty, .crayon-title { animation: none !important; }
  .btn { transition: none; }
}