@font-face{font-family:"Lilita One";src:url(fonts/LilitaOne-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:Fredoka;src:url(fonts/Fredoka-Semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Fredoka;src:url(fonts/Fredoka-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Atkinson;src:url(fonts/AtkinsonHyperlegible-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Atkinson;src:url(fonts/AtkinsonHyperlegible-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --ink:#1B1433;--navy:#241447;--paper:#FFF8EF;--white:#fff;
  --coral:#FF4B6A;--coral-pale:#FFE0E6;--sun:#FFC107;--sun-pale:#FFF3C0;
  --teal:#00B4A8;--teal-pale:#D4F5F2;--violet:#7C4DFF;--violet-pale:#E8DEFF;
  --lime:#7ED321;--lime-pale:#E6F8C8;--blue:#3D7EFF;--blue-pale:#D9E6FF;--tang:#FF7A1A;
  --r:26px;--shadow:6px 6px 0 var(--ink);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font:400 18px/1.45 Atkinson,system-ui,sans-serif;color:var(--ink);background:var(--sun);
  background-image:radial-gradient(circle at 10% 20%,#FFD84D 0 120px,transparent 121px),radial-gradient(circle at 95% 60%,#FF9A3D 0 160px,transparent 161px);background-attachment:fixed}
h1,h2,h3{font-family:"Lilita One",Fredoka,sans-serif;font-weight:400;margin:0 0 .3em;line-height:1}
h2{font-size:clamp(2rem,7vw,2.6rem)}
h3{font-size:1.4rem;margin-top:1.2rem}
p{margin:.4em 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:12px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:4px solid var(--blue);outline-offset:3px;border-radius:10px}
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--ink);color:#fff}
.brand{font:700 1.1rem Fredoka,sans-serif;letter-spacing:.12em;color:var(--sun);text-decoration:none}
.chips{display:flex;gap:8px}
.chip{font:700 .95rem Fredoka,sans-serif;padding:6px 12px;border-radius:999px;color:var(--ink)}
.chip-sun{background:var(--sun)}.chip-violet{background:var(--violet-pale)}
main{max-width:760px;margin:0 auto;padding:0 14px 30px}
.hero{position:relative;text-align:left;padding:34px 6px 26px;overflow:hidden}
.hero h1{font-size:clamp(4.2rem,22vw,8rem);color:var(--navy);letter-spacing:.01em;position:relative}
.hero h1::after{content:"";display:block;width:min(70%,420px);height:12px;border-radius:12px;background:var(--coral);margin-top:12px}
.kicker{font:700 .95rem Fredoka,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--navy);margin:0 0 8px;position:relative}
.lead{font:600 clamp(1.25rem,5vw,1.6rem)/1.3 Fredoka,sans-serif;position:relative;max-width:30ch}
.tiny{font-size:.9rem;position:relative;opacity:.85}
.blob{position:absolute;border-radius:50%;z-index:0}
.b1{width:200px;height:200px;background:var(--coral);right:-70px;top:-20px}
.b2{width:74px;height:74px;background:var(--violet);right:22px;bottom:40px}
.b3{width:36px;height:36px;background:var(--teal);right:6px;bottom:2px}
.hero>*:not(.blob){position:relative;z-index:1}
.card,.hero{scroll-margin-top:64px}
.card{position:relative;border:4px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 18px 22px;margin:26px 0;background:#fff}
.c-coral{background:var(--coral-pale);border-top:16px solid var(--coral)}
.c-violet{background:var(--violet-pale);border-top:16px solid var(--violet)}
.c-teal{background:var(--teal-pale);border-top:16px solid var(--teal)}
.c-lime{background:var(--lime-pale);border-top:16px solid var(--lime)}
.c-sun{background:var(--sun-pale);border-top:16px solid var(--tang)}
.c-blue{background:var(--blue-pale);border-top:16px solid var(--blue)}
.step-tag{display:inline-block;font:700 .85rem Fredoka,sans-serif;text-transform:uppercase;letter-spacing:.1em;background:var(--ink);color:#fff;padding:4px 12px;border-radius:999px;margin-bottom:10px}
.sub{font-size:1.02rem}
textarea,input[type=text]{width:100%;font:400 1.05rem Atkinson,sans-serif;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:16px;padding:12px 14px;resize:vertical}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center}
.row.center{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font:700 1.08rem Fredoka,sans-serif;padding:10px 20px;border-radius:999px;border:3px solid var(--ink);cursor:pointer;text-decoration:none;transition:transform .12s, box-shadow .12s}
.btn:active{transform:translate(2px,2px)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--coral)}
.btn-ink:hover{box-shadow:6px 6px 0 var(--coral)}
.btn-ghost{background:#fff;color:var(--ink)}
.btn-coral{background:var(--coral);color:var(--ink)}
.btn-big{font-size:1.25rem;min-height:58px;padding:12px 28px}
.btn-sm{min-height:42px;font-size:.98rem;padding:6px 14px}
.tasks{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.task{display:flex;align-items:center;border:3px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.task:nth-child(6n+1){background:#FFD2DB}.task:nth-child(6n+2){background:#FFE7A0}.task:nth-child(6n+3){background:#C9F2EE}
.task:nth-child(6n+4){background:#DCCEFF}.task:nth-child(6n+5){background:#D6F5B0}.task:nth-child(6n){background:#CFE0FF}
.task button{border:0;background:transparent;font:600 1rem Fredoka,sans-serif;color:var(--ink);cursor:pointer;min-height:44px}
.task .pick{padding:8px 4px 8px 16px;text-align:left}
.task .x{padding:8px 14px;font-size:1.1rem}
.task.sel{outline:4px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.task.done .pick{text-decoration:line-through;opacity:.6}
.empty{font-style:italic;opacity:.7}
.dice-wrap{display:flex;justify-content:center;margin:10px 0}
.dice{display:flex;flex-direction:column;align-items:center;gap:6px;border:4px solid var(--ink);background:var(--violet);color:#fff;font:700 1.15rem Fredoka,sans-serif;border-radius:24px;padding:14px 26px;cursor:pointer;box-shadow:5px 5px 0 var(--ink)}
.die{font-size:3rem;line-height:1;display:inline-block}
.die.roll{animation:roll .7s cubic-bezier(.3,1.6,.6,1)}
@keyframes roll{0%{transform:rotate(0) scale(1)}50%{transform:rotate(540deg) scale(1.35)}100%{transform:rotate(720deg) scale(1)}}
.picked{background:#fff;border:3px dashed var(--violet);border-radius:20px;padding:14px;margin-top:12px}
.picked-label{font:700 .9rem Fredoka,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--violet)}
.picked-task{font:400 1.7rem/1.1 "Lilita One",sans-serif;margin:.1em 0 .4em;word-break:break-word}
.starters{display:grid;gap:8px;margin:8px 0}
.starter{text-align:left;border:3px solid var(--ink);border-radius:16px;background:var(--sun-pale);padding:10px 14px;font:600 1rem Fredoka,sans-serif;color:var(--ink);cursor:pointer;min-height:48px}
.starter:nth-child(2){background:var(--teal-pale)}.starter:nth-child(3){background:var(--coral-pale)}
.starter[aria-pressed=true]{background:var(--ink);color:#fff}
.lbl{display:block;font:700 1rem Fredoka,sans-serif;margin:12px 0 6px}
.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.pre{border:3px solid var(--ink);border-radius:18px;font:400 1.9rem/1 "Lilita One",sans-serif;color:var(--ink);padding:10px 4px;cursor:pointer;min-height:64px;display:flex;flex-direction:column;align-items:center}
.pre small{font:700 .8rem Fredoka,sans-serif}
.p-sun{background:var(--sun)}.p-coral{background:var(--coral)}.p-violet{background:#B79CFF}.p-lime{background:var(--lime)}
.pre[aria-pressed=true]{box-shadow:4px 4px 0 var(--ink);transform:translateY(-3px);outline:3px solid #fff;outline-offset:-7px}
.ring-wrap{position:relative;width:min(78vw,320px);aspect-ratio:1;margin:8px auto}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.track{fill:#fff;stroke:#fff;stroke-width:20}
.prog{fill:none;stroke:url(#g);stroke-width:20;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 18%}
.time{font:400 clamp(3rem,15vw,4.4rem)/1 "Lilita One",sans-serif;color:var(--navy);font-variant-numeric:tabular-nums}
.now{font:600 .95rem/1.2 Fredoka,sans-serif;margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ring-wrap.running .ring{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{filter:drop-shadow(0 0 10px rgba(255,75,106,.55))}}
.toggle{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:12px;font-weight:700}
.toggle input{width:22px;height:22px;accent-color:var(--ink)}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:620px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{border:3px solid var(--ink);border-radius:18px;padding:12px;text-align:center}
.stat b{display:block;font:400 2.4rem/1 "Lilita One",sans-serif}
.stat span{font:600 .9rem Fredoka,sans-serif}
.s-sun{background:var(--sun)}.s-coral{background:#FF8FA3}.s-violet{background:#B79CFF}.s-blue{background:#8FB5FF}
.xp{margin-top:14px}
.xp-top{display:flex;justify-content:space-between;font:700 1rem Fredoka,sans-serif}
.xp-bar{height:22px;border:3px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden;margin-top:6px}
.xp-fill{height:100%;width:0;background:linear-gradient(90deg,var(--coral),var(--tang),var(--sun),var(--lime));transition:width .6s}
.badges{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.badge{border:3px solid var(--ink);border-radius:16px;padding:10px;text-align:center;background:#fff;font:600 .9rem/1.2 Fredoka,sans-serif}
.badge .e{display:block;font-size:2rem}
.badge.locked{opacity:.45;filter:grayscale(1);border-style:dashed}
.cta-grid{display:grid;gap:16px;align-items:center}
@media(min-width:620px){.cta-grid{grid-template-columns:1fr 1.2fr}}
.cta img{width:100%;height:auto;border:4px solid var(--ink);border-radius:20px}
.kicker.dark{color:var(--coral)}
.ticks{list-style:none;padding:0;margin:10px 0 16px}
.ticks li{padding-left:34px;position:relative;margin:6px 0;font-weight:700}
.ticks li::before{content:"✓";position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:50%;background:var(--lime);border:2px solid var(--ink);display:grid;place-items:center;font-size:.85rem}
details{background:#fff;border:3px solid var(--ink);border-radius:16px;margin:10px 0;padding:0 14px}
summary{font:700 1.05rem Fredoka,sans-serif;cursor:pointer;padding:12px 0;min-height:44px;list-style-position:outside}
details p{margin:0 0 12px}
.foot{background:var(--ink);color:#fff;text-align:center;padding:26px 16px 40px;font-size:.95rem}
.brand-foot{font:700 1.2rem Fredoka,sans-serif;letter-spacing:.14em;color:var(--sun)}
.linkbtn{background:none;border:0;color:var(--sun);text-decoration:underline;font:inherit;cursor:pointer;padding:4px}
.modal{position:fixed;inset:0;z-index:50;background:rgba(27,20,51,.7);display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal-card{background:var(--sun);border:4px solid var(--ink);border-radius:28px;box-shadow:8px 8px 0 var(--coral);max-width:420px;width:100%;padding:22px 20px;text-align:center;animation:pop .45s cubic-bezier(.3,1.6,.6,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.big-emoji{font-size:3.4rem;margin:0}
.modal-card h2{font-size:2.6rem;color:var(--navy)}
.modal-cta{margin-top:16px;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:12px}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,200%);visibility:hidden;background:var(--ink);color:#fff;font:700 1rem Fredoka,sans-serif;padding:12px 20px;border-radius:999px;z-index:60;transition:transform .3s;max-width:92vw;text-align:center}
.toast.show{transform:translate(-50%,0);visibility:visible}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}