:root{
  --saffron:#F28C1B;--saffron-d:#B45309;--maroon:#7A1F1F;--maroon-d:#5A1212;
  --gold:#D9A13A;--cream:#FFF6E3;--ink:#3B1A0E;--muted:#8a6a50;--line:#EBC98A;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);
  background:#FFF6E3 radial-gradient(120% 50% at 50% 0%,#FFD98A 0%,#FFF6E3 60%) no-repeat;min-height:100vh;overflow-x:hidden;line-height:1.5}
img,canvas{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:var(--maroon)}
button{font:inherit;color:inherit}

/* top garland + brand */
.garland{height:58px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='58'><line x1='0' y1='6' x2='64' y2='6' stroke='%238B5A2B' stroke-width='2.5'/><path d='M16 6 Q28 24 16 48 Q4 24 16 6Z' fill='%232F7A3A'/><path d='M16 9 L16 45' stroke='%2378B66E' stroke-width='1.2'/><circle cx='48' cy='18' r='10' fill='%23E8730C'/><circle cx='48' cy='18' r='7.5' fill='%23F59E0B'/><circle cx='48' cy='18' r='4.5' fill='%23FBBF24'/><circle cx='48' cy='38' r='8' fill='%23E8730C'/><circle cx='48' cy='38' r='5.5' fill='%23F59E0B'/><circle cx='48' cy='38' r='3' fill='%23FBBF24'/></svg>") repeat-x center top}
.top{max-width:460px;margin:-6px auto 0;padding:0 16px;display:flex;justify-content:center}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:14px;color:var(--maroon)}
.brand img{border-radius:8px;box-shadow:0 2px 6px rgba(90,40,10,.25)}
.brand em{font-style:normal;color:var(--saffron-d)}

/* app column */
main{max-width:460px;margin:0 auto;padding:12px 16px 24px}
.screen{display:none;flex-direction:column;align-items:center;text-align:center;gap:16px;animation:fade .35s ease}
.screen.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1{font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;color:var(--maroon);font-size:clamp(32px,9vw,42px);line-height:1.05}
h1 small{display:block;font-size:.48em;font-weight:600;color:var(--saffron-d);margin-top:6px;line-height:1.3}
.kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--saffron-d);font-weight:600}
.lead{font-size:15px;line-height:1.55;color:#5b3a26;max-width:36ch}
#hero{width:190px;height:190px}
.field{width:100%;text-align:left}
.label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;color:var(--maroon)}
.muted{font-size:13px;color:var(--muted);padding:10px 0}
.err{font-size:13px;color:#B91C1C;font-weight:600;margin-top:6px}
input[type=text]{width:100%;font:600 18px Poppins,system-ui,sans-serif;padding:14px 16px;border-radius:14px;border:2px solid var(--line);background:#fff;color:var(--ink);outline:none}
input[type=text]:focus{border-color:var(--saffron)}

/* language picker */
.langs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.lang{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-decoration:none;
  border:2px solid var(--line);background:#fff;border-radius:14px;padding:8px 2px 6px;min-height:60px;transition:transform .1s}
.lang:active{transform:scale(.96)}
.lang b{font-family:system-ui,-apple-system,"Noto Sans",sans-serif;font-size:16px;font-weight:700;color:var(--maroon);line-height:1.35;white-space:nowrap}
.lang small{font-size:10.5px;color:var(--muted);font-weight:500}
.lang.on{background:var(--maroon);border-color:var(--maroon)}
.lang.on b{color:#FFE7B0}.lang.on small{color:#F4CF8C}
@media (max-width:380px){.langs{grid-template-columns:repeat(3,1fr)}}

/* letter chips */
.chips{display:flex;gap:10px}
.chip{flex:1;font-size:26px;font-weight:700;padding:8px 0 4px;border-radius:14px;border:2px solid var(--line);background:#fff;color:var(--maroon);cursor:pointer;line-height:1.4}
.chip.on{background:var(--maroon);border-color:var(--maroon);color:#FFE7B0}

/* buttons */
.btn{width:100%;border:0;border-radius:16px;padding:16px;font:600 17px Poppins,system-ui,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s,opacity .2s}
.btn:active{transform:scale(.98)}
.primary{background:linear-gradient(180deg,#9A2A2A,var(--maroon-d));color:#FFE9B8;box-shadow:0 6px 16px rgba(122,31,31,.3)}
.primary:disabled{opacity:.4;box-shadow:none;cursor:default}
.wa{background:#1FA855;color:#fff;box-shadow:0 6px 16px rgba(31,168,85,.3)}
.ghost{background:transparent;color:var(--maroon);border:2px solid #E2B871}
.link{background:none;border:0;color:var(--maroon);font-size:14px;padding:6px;cursor:pointer;font-weight:500}
.row{display:flex;gap:10px;width:100%}
.row .btn{padding:12px;font-size:15px}
.privacy{font-size:12px;color:var(--muted)}

/* trace screen */
.bar-top{width:100%;display:flex;justify-content:space-between;align-items:center}
/* the plate blocks scrolling (touch-action:none on #ink), so s2 must fit on one screen */
body[data-screen="s2"] .garland,body[data-screen="s2"] .top{display:none}
body[data-screen="s2"] main{padding-bottom:12px}
#s2{gap:10px}
#s2 .sub{margin-top:-6px}
#instr{font-size:28px;line-height:1.25}
@media (max-height:760px){
  #instr{font-size:21px}
  #s2 .btn{padding:11px}
}
/* 330px = everything on s2 except the plate; the floor keeps it usable in landscape */
#plateWrap{position:relative;aspect-ratio:1;
  width:min(88vw,400px,max(200px,calc(100vh - 330px)));
  width:min(88vw,400px,max(200px,calc(100svh - 330px)))}
#plateWrap canvas{position:absolute;inset:0;width:100%;height:100%}
#ink{touch-action:none;cursor:crosshair}
.progress{width:100%;display:flex;align-items:center;gap:12px}
.bar{flex:1;height:10px;border-radius:99px;background:#F1DDB3;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--saffron),#FBBF24);border-radius:inherit;transition:width .25s}
.stars span{font-size:22px;color:#E9D3A6;transition:color .2s,transform .2s;display:inline-block}
.stars span.on{color:var(--saffron);transform:scale(1.2)}
#hint{font-size:14px;color:#6b4a33;min-height:21px;font-weight:500}
.sub{font-size:13px;color:var(--muted);margin-top:-10px}

/* card screen */
#cardImg{width:100%;height:auto;border-radius:18px;box-shadow:0 14px 40px rgba(90,40,10,.25);-webkit-touch-callout:default}
.tip{font-size:12px;color:var(--muted);margin-top:-6px}

/* SEO / info content */
.info{max-width:640px;margin:8px auto 0;padding:28px 20px 8px;border-top:1px dashed #E2B871}
.info h2{font-family:"Baloo 2",system-ui,sans-serif;font-size:24px;font-weight:700;color:var(--maroon);margin:22px 0 8px;line-height:1.2}
.info h2:first-child{margin-top:0}
.info p,.info li{font-size:15px;color:#4d3122}
.info p+p{margin-top:10px}
.info .native{font-size:16px;background:#FFF0CF;border-left:4px solid var(--gold);padding:12px 14px;border-radius:0 12px 12px 0;margin:10px 0 12px}
.steps{padding-left:20px;display:grid;gap:6px}
details{border:1px solid #EFD6A5;background:#FFFBF2;border-radius:12px;padding:12px 14px;margin-top:8px}
summary{cursor:pointer;font-weight:600;color:var(--maroon);font-size:15px}
details p{margin-top:8px}

footer{max-width:640px;margin:0 auto;padding:22px 20px 36px;text-align:center;font-size:12.5px;color:var(--muted)}
.lang-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-bottom:12px}
.lang-links a{font-size:13px;font-weight:500}
.noscript{max-width:460px;margin:12px auto;padding:12px;background:#FDE2E2;border-radius:12px;text-align:center}

/* hide the long-read content while the child is writing and on the card screen
   (the footer's language links stay on the card screen) */
body[data-screen="s2"] .info,body[data-screen="s2"] footer,
body[data-screen="s3"] .info{display:none}

/* effects */
.petal{position:fixed;top:-20px;width:12px;height:16px;border-radius:50% 50% 50% 0;pointer-events:none;animation:fall linear forwards;z-index:9}
@keyframes fall{to{transform:translateY(112vh) rotate(720deg)}}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.screen{animation:none}}

/* bigger screens: a little more air */
@media (min-width:768px){
  main{padding-top:20px}
  .info{padding-top:36px}
}