*{box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact}html{font-size:21px}
:root{--ink:#2d2a6e}
body{margin:0;font-family:Nunito,ui-rounded,"Trebuchet MS",system-ui,sans-serif;font-size:21px;line-height:1.55;color:var(--ink);background:radial-gradient(circle at 8% 0,#fff3b0,transparent 40%),radial-gradient(circle at 100% 18%,#ffd0ec,transparent 45%),linear-gradient(180deg,#d9f3ff,#fff4d6);min-height:100vh;background-attachment:fixed}
h1,h2,.crumb,button,.chip{font-family:Fredoka,"Baloo 2","Arial Rounded MT Bold",ui-rounded,"Trebuchet MS",sans-serif}
#app{max-width:780px;margin:0 auto;padding:16px 14px 110px}
h1{font-size:34px;line-height:1.15;margin:8px 0;color:#6a3fd1;text-shadow:0 3px 0 #fff;font-weight:700}
h2{font-family:"Baloo 2",Fredoka,"Arial Rounded MT Bold",ui-rounded,sans-serif;font-size:27px;line-height:1.2;color:#e2570f;margin:4px 0 8px;font-weight:800}
p,li{margin:8px 0}.s{font-size:19px}.ins{font-size:23px;font-weight:700}.q{font-size:24px;font-weight:800;line-height:1.35}.big{font-size:72px;line-height:1}.big2{font-size:25px;font-weight:800}
.story{font-size:23px;line-height:1.75}.crumb{font-size:19px;color:#7c4dff;font-weight:700;margin-top:6px}
mark{background:linear-gradient(transparent 55%,#ffe066 55%);color:inherit;padding:0 3px;font-weight:800;border-radius:4px}
.card{background:#fff;border:3px solid #fff;border-radius:28px;padding:16px;margin:12px 0;box-shadow:0 8px 22px #4a35a830}
button,.btn{--a:#4cc9f0;--b:#2f86e8;--sh:#1f62b8;font-weight:600;font-size:20px;min-height:56px;padding:10px 18px;border:0;border-radius:20px;color:#fff;background:linear-gradient(180deg,var(--a),var(--b));box-shadow:0 5px 0 var(--sh),0 10px 18px #2d2a6e33;cursor:pointer;margin:6px 0;max-width:100%;text-shadow:0 1px 1px #0003;transition:transform .08s,box-shadow .08s}
button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--sh),0 3px 6px #2d2a6e33}
button:disabled{opacity:.5;box-shadow:0 2px 0 var(--sh)}
button.p{--a:#ffa05a;--b:#ff5a3c;--sh:#c93a1f;font-size:23px;min-height:64px;width:100%}
button.g{--a:#6ee79a;--b:#1fb26a;--sh:#12814c}button.p.g{--a:#6ee79a;--b:#1fb26a;--sh:#12814c}
button.v{--a:#b894ff;--b:#7c4dff;--sh:#5632c9}button.c{--a:#ff93a8;--b:#ff4f7a;--sh:#c42e55}
button.y{--a:#ffe066;--b:#ffb703;--sh:#c98600;color:#5a3b00;text-shadow:none}button.r{--a:#5eead4;--b:#14b8a6;--sh:#0d8576}
.opt{display:block;width:100%;text-align:left;background:#fff;color:var(--ink);text-shadow:none;border:3px solid #cfe3ff;--sh:#cfe3ff;margin:8px 0}
.opt.ok{background:#c9f7dc;border-color:#27b46b;--sh:#27b46b}.opt.no{background:#fff1d6;border-color:#f0b050;--sh:#f0b050}
.row,.acts,.lis{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1 1 150px}.acts>*{flex:1 1 200px}
.lis{background:#f3eaff;border-radius:22px;padding:6px 10px;margin:10px 0;align-items:center}.lis button{flex:1 1 130px;margin:2px 0}
select{font:inherit;font-size:19px;min-height:56px;border:3px solid #cfd2ff;border-radius:16px;padding:6px;background:#fff;color:var(--ink);flex:1 1 130px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px}.grid .card{margin:0;text-align:center;padding:10px}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:10px 0}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:116px;font-size:20px;line-height:1.2;text-align:center;padding:12px 8px;margin:0}.tile b{font-size:42px;line-height:1.1}
.tile:nth-child(8n+1){--a:#4cc9f0;--b:#2f86e8;--sh:#1f62b8}.tile:nth-child(8n+2){--a:#ffa05a;--b:#ff5a3c;--sh:#c93a1f}.tile:nth-child(8n+3){--a:#b894ff;--b:#7c4dff;--sh:#5632c9}.tile:nth-child(8n+4){--a:#6ee79a;--b:#1fb26a;--sh:#12814c}.tile:nth-child(8n+5){--a:#ffe066;--b:#ffb703;--sh:#c98600;color:#5a3b00;text-shadow:none}.tile:nth-child(8n+6){--a:#ff93a8;--b:#ff4f7a;--sh:#c42e55}.tile:nth-child(8n+7){--a:#5eead4;--b:#14b8a6;--sh:#0d8576}.tile:nth-child(8n+8){--a:#7dd3fc;--b:#6366f1;--sh:#3f41b8}
.ph{position:relative;width:100%;aspect-ratio:4/3;border-radius:28px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--c),#fff8);margin:10px 0;border:5px solid #fff;box-shadow:0 10px 24px #3a2a8a40}
.hc .ph{border-radius:20px;border-width:4px;margin:0 0 8px}.ph span{font-size:64px;font-weight:800;color:#fff;text-shadow:0 3px 6px #0004}.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc h2{margin:2px 0}.chip{display:inline-block;color:#fff;border-radius:16px;padding:2px 12px;font-size:17px;font-weight:600;text-shadow:0 1px 2px #0005}.lock{filter:grayscale(1);opacity:.55}
.msg{padding:12px;border-radius:18px;background:#ece8ff;margin:10px 0}.msg.ok{background:#d9f9e6}
.bar{height:24px;background:#e9eaff;border-radius:14px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#27b46b,#ffcf33)}
.dots{display:flex;gap:5px;margin:6px 0}.dots i{flex:1;height:10px;border-radius:6px;background:#dcd3ff}.dots i.on{background:linear-gradient(90deg,#7c4dff,#4cc9f0)}
input,textarea{font:inherit;font-size:21px;width:100%;min-height:58px;padding:10px;border:3px solid #cfd2ff;border-radius:16px;margin:6px 0}textarea{min-height:100px}label{font-weight:800;display:block;margin-top:8px}
#nav{position:fixed;bottom:0;left:0;right:0;display:flex;gap:5px;justify-content:center;padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));background:#fffffff0;backdrop-filter:blur(6px);border-radius:24px 24px 0 0;box-shadow:0 -6px 20px #4a35a826}
#nav button{--a:#f1ebff;--b:#e4dbff;--sh:#cbbdf5;color:#5632c9;text-shadow:none;flex:1;max-width:120px;margin:0;min-height:60px;padding:4px 2px;font-size:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
#nav button b{font-size:26px}#nav button.on{--a:#b894ff;--b:#7c4dff;--sh:#5632c9;color:#fff}
#t{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);background:linear-gradient(180deg,#b894ff,#7c4dff);color:#fff;padding:12px 18px;border-radius:18px;opacity:0;transition:.3s;pointer-events:none;max-width:90%;text-align:center;z-index:9}#t.on{opacity:1}
.mem{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mem button{min-height:84px;font-size:19px;margin:0;--a:#b894ff;--b:#7c4dff;--sh:#5632c9;padding:4px}.mem button.f{--a:#fff;--b:#fff;--sh:#cfe3ff;color:var(--ink);text-shadow:none}.mem button.d{--a:#c9f7dc;--b:#9bf0bf;--sh:#27b46b;color:var(--ink);text-shadow:none}
.view{animation:in .35s}@keyframes in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
#pa{display:none}
@media print{#nav,.noprint,#t{display:none!important}body{background:#fff}.card{box-shadow:none;border:1px solid #bbb}body.pm #app{display:none}body.pm #pa{display:block;padding:10px;color:#000}body.pm .ph{max-width:420px}}