:root{
  --bg:#f7fbf7; --ink:#102311; --accent:#2f5f2f; --soft:#fffdf6; --border:#cfe3cf;
  --tile:#fff; --hint:#eaf6ea; --balloon1:#ff6b6b; --balloon2:#ffd93d; --balloon3:#6bcbef; --balloon4:#9b72ff;
}
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Comic Sans MS",Arial,sans-serif;background:var(--bg);color:#102311}
header{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:5;background:linear-gradient(0deg,var(--accent),#3b7d3b);color:#fff;padding:12px 16px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
header .titles{display:flex;flex-direction:column}
header h1{margin:0;font-size:clamp(18px,4.5vw,26px)}
header .subtitle{margin:0;font-size:clamp(12px,3vw,14px);opacity:.9}
.logo{height:36px;border-radius:6px;background:#fff;padding:3px}
.hello{margin-left:auto;font-size:clamp(14px,3vw,18px)}
main{max-width:960px;margin:14px auto;padding:0 10px}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,.06);margin-bottom:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.input, select{padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#fff}
.btn{border:0;background:var(--accent);color:#fff;padding:10px 16px;border-radius:999px;font-size:16px;cursor:pointer}
.btn.light{background:#eaf6ea;color:#1f441f;border:1px solid var(--border)}
.btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:8px;text-align:left}
.hint{background:var(--hint);border:1px solid var(--border);padding:6px 10px;border-radius:10px;font-size:16px}

/* stairs fixed height + scroll */
.stairs{margin:16px 0;padding:14px;background:var(--soft);border:2px dashed #d8d0a8;border-radius:16px;
  min-height:200px; max-height:40vh; overflow:auto; display:flex; flex-direction:column; gap:6px; align-items:flex-start;}

.step{background:var(--tile);border:1px solid var(--border);border-radius:12px;padding:6px 12px;font-size:clamp(26px,5vw,48px);box-shadow:0 2px 6px rgba(0,0,0,.05);width:auto}
.final{display:flex;align-items:center;gap:12px;margin-top:10px}
.pic{width:84px;height:84px;background:#fff;border:1px solid var(--border);border-radius:14px;display:grid;place-items:center;font-size:50px}
.balloons{pointer-events:none;position:fixed;inset:0;overflow:hidden}
.balloon{position:absolute;bottom:-120px;width:46px;height:60px;border-radius:50% 50% 45% 45%;box-shadow:inset -8px -12px 0 rgba(0,0,0,.08);animation:rise 4.8s ease-in forwards}
.balloon::after{content:"";position:absolute;left:50%;bottom:-16px;width:2px;height:18px;background:#888;transform:translateX(-50%)}
.balloon::before{content:"";position:absolute;left:50%;top:58px;width:10px;height:10px;background:#fff;border-radius:2px;transform:translateX(-50%) rotate(45deg)}
@keyframes rise{0%{transform:translateY(0) rotate(0);opacity:.9}100%{transform:translateY(-110vh) rotate(12deg);opacity:0}}
.certificate{background:#fff;border:2px solid var(--border);border-radius:16px;padding:24px;margin-top:10px;text-align:center}
.certificate h3{font-size:28px;margin:6px 0 10px}
.ok{color:#1f7a1f;margin-top:8px}
footer{max-width:960px;margin:0 auto 18px auto;padding:8px 10px;color:#2d2d2d;opacity:.8}
.voicebar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.voicebar small{opacity:.8}

/* Print styles: show only the certificate */
@media print {
  header, nav, .row, .hint, .stairs, .final, main > :not(.card), footer { display: none !important; }
  body.print-cert header, body.print-cert nav, body.print-cert .stairs, body.print-cert .final, body.print-cert main > :not(.card) { display: none !important; }
  body.print-cert main .card { display: block !important; border: 0; box-shadow: none; }
  body.print-cert .certificate { display: block !important; border: 0; box-shadow: none; page-break-after: avoid; }
  @page { margin: 16mm; }
}