:root{
  --green:#4CAF50;
  --fresh:#b5e7b0;
  --dark:#1b5e20;
  --ink:#111;
}
*{box-sizing:border-box}
body{ margin:0; font-family: 'Trebuchet MS', system-ui, Segoe UI, Roboto, Arial, sans-serif; background:linear-gradient(135deg,#eaffee,#f7fff9); color:var(--ink); }
header{
  display:flex; align-items:center; justify-content:center; position:sticky; top:0; z-index:10;
  background:var(--fresh); padding:10px 16px; border-bottom:4px solid var(--green);
}
header .logo{ position:absolute; left:16px; height:60px }
.title{ margin:0; font-size: clamp(22px, 4.2vw, 34px); color:var(--dark); text-shadow:2px 2px 0 #c8f5c8, -2px -2px 0 #c8f5c8; letter-spacing:1px }
.graffiti{ font-weight:900; text-transform:uppercase }
main{ max-width: 1100px; margin: 18px auto; padding: 0 16px }
.card{ background:#fff; border:1px solid #e6f5e6; border-radius:18px; padding:16px; box-shadow:0 8px 18px rgba(0,0,0,.08); margin-bottom:14px }
.smallnote{ font-size:14px; color:#2e7d32 }
.controls{ display:flex; flex-direction:column; gap:10px; margin-bottom:8px }
.controls .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
button,.ghost,select,label input[type="range"]{
  border:none; border-radius:14px; padding:10px 14px; background:var(--green); color:#fff; font-weight:700; cursor:pointer;
  box-shadow:0 6px 12px rgba(0,0,0,.12); transition: transform .12s ease, background .2s ease;
}
button:hover{ transform: translateY(-1px); background:#43a047 }
.ghost{ background:#a5d6a7; color:#08340f }
a.ghost{ text-decoration:none; margin: 0 8px; display:inline-block }
select{ background:#fff; color:#111; border:2px solid #bde7bd }
label{ display:inline-flex; align-items:center; gap:8px; font-weight:600 }
.badge{ background:#e8f5e9; color:#1b5e20; border:2px solid #bde7bd; border-radius:12px; padding:8px 12px; font-weight:800 }
.player{ width: min(520px, 100%) }
.task{ font-size: 18px; text-align:center }
.feedback{ font-size: 18px; text-align:center; min-height: 24px; margin-top:8px }
.viz{ width:100%; overflow:auto; display:flex; justify-content:center; padding:10px 0; background:#fff; border-radius:14px; border:2px solid #e0e0e0 }
svg{ max-width:100%; height:auto; }
.line{ stroke:#000; stroke-width:4 }
.tickline{ stroke:#333; stroke-width:2 }
.label{ font-weight:900; fill:#000 }
.label10{ fill:#d32f2f; font-weight:1000 }  /* tens red */
.label5{ fill:#1565c0; font-weight:800 }   /* fives blue */
.startDot, .endDot{ fill:#fdd835; stroke:#f9a825; stroke-width:2 } /* yellow */
#speed, #size{ accent-color: var(--green) }

/* Celebration overlay */
.celebrate { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; z-index: 9999; }
.celebrate.show { display: flex; }
.graffiti-pop { font-weight: 900; text-transform: uppercase; font-size: clamp(42px, 10vw, 120px); color: #1b5e20; letter-spacing: 2px; text-shadow: 3px 3px 0 #a5d6a7, -3px -3px 0 #c8f5c8, 0 0 24px #7ee787; animation: bouncePop 900ms ease-out; }
@keyframes bouncePop { 0% { transform: scale(0.3) rotate(-6deg); opacity: 0; } 60% { transform: scale(1.08) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.balloon { position: absolute; bottom: -120px; width: 48px; height: 64px; border-radius: 50% 50% 45% 45%; box-shadow: inset -6px -12px 0 rgba(0,0,0,.08); animation: flyUp 4.5s ease-in forwards; }
.balloon::after { content: ''; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); width: 2px; height: 36px; background: #666; }
@keyframes flyUp { 0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: .9; } 100% { transform: translateY(-120vh) translateX(var(--dx, 0)) rotate(10deg); opacity: 0; } }
.confetti { position: absolute; top: -10px; width: 10px; height: 14px; opacity: .9; animation: fall 2.2s linear forwards; }
@keyframes fall { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(110vh) rotate(540deg); opacity: 0; } }

/* Worksheet shared */
.pv{ display:grid; grid-template-columns: 1.4em 1.4em 1.4em; gap:4px; justify-content: end; align-items:center; }
.pv .box{ width:1.4em; height:1.8em; border:2px solid #bde7bd; border-radius:6px; display:flex; align-items:center; justify-content:center; font-variant-numeric: tabular-nums; font-weight:900; }
.pv-labels{ display:grid; grid-template-columns: 1.4em 1.4em 1.4em; gap:4px; justify-content:end; margin-bottom:2px; font-size:12px; color:#2e7d32 }