:root{
  color-scheme: light;
  --paper:#F7F5FF;
  --card:#FFFFFF;
  --ink:#2B2340;
  --ink-soft:#5E5578;
  --line:#E4DEF7;
  --tomato:#FF5A5F;
  --sun:#FFC93D;
  --grass:#22B573;
  --sky:#3A9BFF;
  --grape:#8B5CF6;
  --bubble:#FF78C4;
  --orange:#FF9F1C;
  --teal:#2EC4B6;
  --tint-sun:#FFF4CC;
  --tint-sky:#DDEEFF;
  --tint-pink:#FFE3F2;
  --tint-grass:#DDF6E8;
  --tint-grape:#ECE3FF;
  --tint-orange:#FFE9CF;
  --display:"Grandstander","Baloo 2","Comic Sans MS","Chalkboard SE",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --pop:0 5px 0 var(--ink);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.55;
  background-image:radial-gradient(circle at 1px 1px, #DCD4F3 1.2px, transparent 1.4px);
  background-size:26px 26px;
}
h1,h2,h3,h4{font-family:var(--display); line-height:1.1; margin:0; text-wrap:balance; letter-spacing:-.01em}
p{margin:0}
button{font:inherit; color:inherit}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:4px solid var(--sky); outline-offset:3px; border-radius:12px}
.wrap{max-width:1180px; margin:0 auto; padding-inline:20px}
@media (max-width:480px){.wrap{padding-inline:16px}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--display); font-weight:800; font-size:1.05rem; letter-spacing:.02em;
  padding:.8em 1.4em; border-radius:999px; border:3px solid var(--ink);
  background:var(--card); color:var(--ink); cursor:pointer; text-decoration:none;
  box-shadow:var(--pop); transition:transform .15s cubic-bezier(.3,1.6,.5,1), box-shadow .15s;
  min-height:48px; white-space:nowrap;
}
.btn:hover{transform:translateY(-3px) rotate(-1.5deg); box-shadow:0 8px 0 var(--ink)}
.btn:active{transform:translateY(3px); box-shadow:0 2px 0 var(--ink)}
.btn.big{font-size:1.25rem; padding:.9em 1.7em; min-height:60px}
.btn.sun{background:var(--sun)} .btn.pink{background:var(--bubble)} .btn.sky{background:var(--sky); color:#fff}
.btn.grass{background:var(--grass); color:#fff} .btn.tomato{background:var(--tomato); color:#fff} .btn.grape{background:var(--grape); color:#fff}
.btn.small{font-size:.92rem; padding:.45em .9em; min-height:40px; box-shadow:0 3px 0 var(--ink); border-width:2.5px}
.btn.small:hover{box-shadow:0 5px 0 var(--ink)}
.btn svg{width:1.2em; height:1.2em; flex:none}

/* ---------- Header ---------- */
.site-head{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:rgba(247,245,255,.92); backdrop-filter:blur(8px); border-bottom:3px solid var(--ink)}
.head-row{display:flex; align-items:center; gap:16px; min-height:74px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--display); font-weight:900; font-size:1.6rem; flex:none; cursor:pointer; background:none; border:0; padding:0}
.logo-mark{width:44px; height:44px}
.logo-word span{display:inline-block; transition:transform .2s}
.logo:hover .logo-word span{transform:translateY(-3px) rotate(-6deg)}
.logo:hover .logo-word span:nth-child(even){transform:translateY(2px) rotate(5deg)}
.main-nav{display:flex; gap:2px; margin-left:auto; flex-wrap:nowrap; justify-content:flex-end}
.main-nav a{font-family:var(--display); font-weight:700; font-size:.98rem; text-decoration:none; padding:.4em .7em; white-space:nowrap; border-radius:999px; border:2.5px solid transparent; transition:background .15s, transform .15s}
.main-nav a:hover{background:var(--tint-sun); transform:translateY(-2px)}
.main-nav a.active{background:var(--sun); border-color:var(--ink)}
.main-nav a.book{background:var(--bubble); border-color:var(--ink); color:var(--ink)}
.menu-btn{display:none; margin-left:auto}
@media (max-width:1359px){
  .menu-btn{display:inline-flex}
  .main-nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--paper); border-bottom:3px solid var(--ink); padding:14px 16px 20px; flex-direction:column; gap:8px}
  .main-nav.open{display:flex}
  .main-nav a{font-size:1.2rem; padding:.7em 1em; background:var(--card); border-color:var(--ink)}
}

/* ---------- Views ---------- */
.view{display:none; padding-block:28px 60px}
.view.show{display:block; animation:pop-in .35s ease-out}
@keyframes pop-in{from{transform:translateY(8px)}to{transform:none}}
.section{padding-block:36px}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.section-head h2{font-size:clamp(1.8rem,4vw,2.5rem); font-weight:900}
.section-head p{color:var(--ink-soft); max-width:56ch; margin-top:6px}
.squiggle{display:block; width:140px; height:14px; margin-top:6px}
.squiggle path{fill:none; stroke-width:5; stroke-linecap:round}
.eyebrow{font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:.85rem; color:var(--grape)}

/* ---------- Hero ---------- */
.hero{display:grid; grid-template-columns:1.05fr 1fr; gap:24px; align-items:center; padding-block:20px 30px}
.hero h1{font-size:clamp(2.6rem,6.6vw,4.9rem); font-weight:900; line-height:1}
.hero h1 .rainbow span{display:inline-block}
.hero .tagline{font-size:clamp(1.15rem,2.2vw,1.45rem); color:var(--ink-soft); margin-top:18px; max-width:30ch; font-weight:700}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-top:30px}
.hero-art{width:100%; max-width:560px; justify-self:center}
.hero-art svg{width:100%; height:auto; display:block; overflow:visible}
.float-a{animation:bob 4s ease-in-out infinite}
.float-b{animation:bob 5s ease-in-out -1.5s infinite}
.float-c{animation:bob 4.5s ease-in-out -3s infinite}
.spin-slow{animation:twirl 9s linear infinite; transform-box:fill-box; transform-origin:center}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes twirl{to{transform:rotate(360deg)}}
.trust{display:flex; gap:10px 18px; flex-wrap:wrap; margin-top:26px; font-weight:800; color:var(--ink-soft); font-size:.95rem}
.trust span{display:inline-flex; align-items:center; gap:6px}
.trust i{width:12px; height:12px; border-radius:50%; border:2px solid var(--ink); display:inline-block}
@media (max-width:860px){.hero{grid-template-columns:1fr} .hero-art{max-width:460px; order:-1}}

/* ---------- Featured ---------- */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.feat-grid{grid-template-columns:1fr}}
.feat{background:var(--card); border:3px solid var(--ink); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 6px 0 var(--ink); transition:transform .2s cubic-bezier(.3,1.5,.5,1); display:flex; flex-direction:column}
.feat:hover{transform:translateY(-6px) rotate(-.8deg)}
.feat:nth-child(even):hover{transform:translateY(-6px) rotate(.8deg)}
.feat .pic{aspect-ratio:1/0.82; display:grid; place-items:center; border-bottom:3px solid var(--ink); padding:14px}
.feat .pic svg{width:78%; height:auto; max-height:100%}
.feat .body{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px}
.feat h3{font-size:1.35rem; font-weight:800}
.feat small{display:block; color:var(--ink-soft); font-weight:700; font-size:.88rem; margin-top:2px}

/* ---------- Color of the day ---------- */
.cotd{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:0; background:var(--card); border:3px solid var(--ink); border-radius:34px; overflow:hidden; box-shadow:0 8px 0 var(--ink)}
.cotd .art{background:var(--tint-sky); display:grid; place-items:center; padding:26px; border-right:3px solid var(--ink); position:relative}
.cotd .art svg{width:100%; max-width:340px; height:auto; border-radius:22px; border:3px solid var(--ink); background:#fff}
.cotd .info{padding:clamp(22px,4vw,44px); display:flex; flex-direction:column; gap:16px; justify-content:center}
.cotd h2{font-size:clamp(1.9rem,4vw,2.7rem); font-weight:900}
.cotd h3{font-size:1.5rem; font-weight:800}
.day-chip{align-self:flex-start; font-family:var(--display); font-weight:800; background:var(--tint-sun); border:2.5px solid var(--ink); border-radius:999px; padding:.3em .9em; font-size:.95rem}
.swatch-row{display:flex; align-items:center; gap:12px; font-weight:800}
.swatch-row .blob{width:46px; height:46px; border-radius:50% 46% 52% 48%; border:3px solid var(--ink)}
.meta-row{display:flex; gap:8px; flex-wrap:wrap}
@media (max-width:760px){.cotd{grid-template-columns:1fr} .cotd .art{border-right:0; border-bottom:3px solid var(--ink)}}

/* ---------- Steps + parents ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{padding:22px; border-radius:var(--r-md); border:3px dashed var(--ink); background:var(--card); display:flex; gap:16px; align-items:flex-start}
.step .num{flex:none; width:52px; height:52px; border-radius:50%; border:3px solid var(--ink); display:grid; place-items:center; font-family:var(--display); font-weight:900; font-size:1.5rem}
.step h3{font-size:1.3rem; margin-bottom:4px}
.step p{color:var(--ink-soft)}
.parent-band{display:grid; grid-template-columns:1.2fr 1fr; gap:26px; align-items:center; background:var(--tint-grass); border:3px solid var(--ink); border-radius:34px; padding:clamp(22px,4vw,40px)}
.parent-band ul{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.parent-band li{display:flex; gap:10px; align-items:flex-start; font-weight:700}
.parent-band li::before{content:""; flex:none; width:22px; height:22px; margin-top:2px; border-radius:50%; background:var(--grass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; border:2px solid var(--ink)}
.parent-band .cta-col{display:flex; flex-direction:column; gap:14px; align-items:flex-start}
@media (max-width:760px){.parent-band{grid-template-columns:1fr}}

/* ---------- Gallery ---------- */
.page-title{font-size:clamp(2.2rem,5vw,3.3rem); font-weight:900}
.page-lede{color:var(--ink-soft); font-size:1.12rem; margin-top:8px; max-width:60ch; font-weight:600}
.search{display:flex; align-items:center; gap:10px; background:var(--card); border:3px solid var(--ink); border-radius:999px; padding:6px 8px 6px 18px; box-shadow:0 4px 0 var(--ink); max-width:560px; margin-top:22px}
.search svg{width:26px; height:26px; flex:none}
.search input{flex:1; min-width:0; border:0; outline:none; font:inherit; font-size:1.15rem; font-weight:700; background:transparent; padding:.5em 0}
.filters{margin-top:22px; display:grid; gap:12px}
.chip-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.chip-row .label{font-family:var(--display); font-weight:800; margin-right:4px; font-size:.95rem; color:var(--ink-soft); min-width:56px}
.chip{font-family:var(--display); font-weight:700; font-size:1rem; border:2.5px solid var(--ink); background:var(--card); border-radius:999px; padding:.4em .95em; cursor:pointer; transition:transform .15s, background .15s; min-height:42px}
.chip:hover{transform:translateY(-2px) rotate(-2deg)}
.chip[aria-pressed="true"]{background:var(--c,var(--sun)); color:var(--ink); box-shadow:0 3px 0 var(--ink)}
.count-line{margin-top:18px; font-weight:800; color:var(--ink-soft)}
.gal-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:22px; margin-top:14px}
.gcard{background:var(--card); border:3px solid var(--ink); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 5px 0 var(--ink); transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.gcard:hover{transform:translateY(-5px)}
.gcard .pic{aspect-ratio:1; border-bottom:3px solid var(--ink); background:#fff; display:grid; place-items:center; cursor:pointer; padding:10px; position:relative}
.gcard .pic svg{width:100%; height:100%}
.gcard .body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; flex:1}
.gcard h3{font-size:1.25rem; font-weight:800}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{font-size:.8rem; font-weight:800; padding:.2em .65em; border-radius:999px; border:2px solid var(--ink); background:var(--tint-grape)}
.tag.easy{background:var(--tint-grass)} .tag.medium{background:var(--tint-sun)} .tag.detailed{background:var(--tint-pink)}
.tag.age{background:var(--tint-sky)}
.card-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto}
.card-actions .btn{flex:1 1 auto}
.empty{padding:40px 20px; text-align:center; background:var(--card); border:3px dashed var(--ink); border-radius:var(--r-lg); margin-top:14px; display:grid; gap:14px; justify-items:center}
.empty h3{font-size:1.6rem}

/* ---------- Studio ---------- */
.studio-top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.now-coloring{display:flex; align-items:center; gap:12px; margin-top:10px; font-weight:800; flex-wrap:wrap}
.now-coloring b{font-family:var(--display); font-size:1.3rem}
.studio{display:grid; grid-template-columns:108px minmax(0,640px) minmax(200px,250px); gap:20px; margin-top:20px; justify-content:center; align-items:start}
.toolbox,.palette-box{background:var(--card); border:3px solid var(--ink); border-radius:var(--r-lg); padding:14px; box-shadow:0 5px 0 var(--ink)}
.toolbox{display:flex; flex-direction:column; gap:10px; align-items:stretch}
.tool{display:flex; flex-direction:column; align-items:center; gap:2px; border:3px solid var(--ink); background:#fff; border-radius:20px; padding:10px 4px 6px; cursor:pointer; font-family:var(--display); font-weight:800; font-size:.9rem; transition:transform .15s}
.tool svg{width:36px; height:36px}
.tool:hover{transform:scale(1.06) rotate(-3deg)}
.tool[aria-pressed="true"]{background:var(--sun); box-shadow:0 4px 0 var(--ink)}
.sizes{display:flex; justify-content:space-around; align-items:center; padding:6px 0 2px; border-top:2.5px dashed var(--line); margin-top:4px}
.size{width:34px; height:34px; border-radius:50%; border:2.5px solid var(--ink); background:#fff; display:grid; place-items:center; cursor:pointer}
.size i{display:block; border-radius:50%; background:var(--ink)}
.size[aria-pressed="true"]{background:var(--sun)}
.sizes-label{font-size:.78rem; font-weight:800; text-align:center; color:var(--ink-soft)}
.board{position:relative}
.canvas-wrap{position:relative; width:100%; aspect-ratio:1; max-width:100%; border:4px solid var(--ink); border-radius:26px; overflow:hidden; background:#fff; touch-action:none; box-shadow:0 8px 0 var(--ink); cursor:crosshair}
.canvas-wrap canvas{position:absolute; inset:0; width:100%; height:100%}
#lineCanvas{pointer-events:none}
.hint{margin-top:18px; display:flex; align-items:center; gap:10px; justify-content:center; font-weight:800; color:var(--ink-soft); text-align:center}
.palette-box h3{font-size:1.1rem; margin-bottom:10px}
.swatches{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.sw{aspect-ratio:1; border-radius:50% 46% 52% 48%; border:3px solid var(--ink); cursor:pointer; transition:transform .15s; padding:0}
.sw:nth-child(3n){border-radius:48% 52% 46% 50%}
.sw:hover{transform:scale(1.12) rotate(8deg)}
.sw[aria-pressed="true"]{transform:scale(1.14); box-shadow:0 0 0 4px #fff, 0 0 0 7px var(--ink)}
.current{display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:12px; border-top:2.5px dashed var(--line); font-weight:800}
.current .blob{width:40px; height:40px; border-radius:50%; border:3px solid var(--ink); flex:none}
.actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:22px}
.confirm{display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px; background:var(--tint-pink); border:3px solid var(--ink); border-radius:999px; padding:10px 16px; font-weight:800; width:fit-content; max-width:100%; margin-inline:auto}
@media (max-width:1000px){
  .studio{grid-template-columns:1fr; max-width:640px; margin-inline:auto}
  .toolbox{flex-direction:row; flex-wrap:wrap; justify-content:center; order:2}
  .toolbox .tool{flex:1 1 80px}
  .sizes{flex:1 1 100%; border-top:0; margin-top:0; justify-content:center; gap:14px}
  .palette-box{order:3}
  .swatches{grid-template-columns:repeat(8,1fr); gap:8px}
  .board{order:1}
}
@media (max-width:420px){.swatches{grid-template-columns:repeat(6,1fr)}}

/* ---------- Book ---------- */
.book-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px; margin-top:22px}
.bcard{border:3px solid var(--ink); border-radius:var(--r-lg); background:var(--card); overflow:hidden; box-shadow:0 5px 0 var(--ink); display:flex; flex-direction:column; transition:transform .2s}
.bcard:nth-child(4n+1){transform:rotate(-1deg)} .bcard:nth-child(4n+2){transform:rotate(1deg)} .bcard:nth-child(4n+3){transform:rotate(-.5deg)}
.bcard:hover{transform:rotate(0) translateY(-4px)}
.bcard .frame{padding:12px; border-bottom:3px solid var(--ink)}
.bcard img{display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:14px; border:2.5px solid var(--ink); background:#fff; cursor:zoom-in}
.bcard .body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:10px}
.bcard h3{font-size:1.15rem}
.bcard .date{font-size:.85rem; color:var(--ink-soft); font-weight:700}
.bcard .example{align-self:flex-start; background:var(--tint-sun)}
.bcard .del-confirm{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-weight:800; font-size:.92rem}
.book-note{margin-top:16px; background:var(--tint-sky); border:2.5px solid var(--ink); border-radius:var(--r-md); padding:12px 16px; font-weight:700; max-width:720px}

/* ---------- Printables ---------- */
.print-hero{display:grid; grid-template-columns:1.3fr 1fr; gap:24px; align-items:center}
.print-tips{background:var(--card); border:3px solid var(--ink); border-radius:var(--r-lg); padding:18px 20px; box-shadow:0 5px 0 var(--ink)}
.print-tips h3{font-size:1.2rem; margin-bottom:8px}
.print-tips ul{margin:0; padding-left:1.2em; display:grid; gap:4px; font-weight:600}
@media (max-width:760px){.print-hero{grid-template-columns:1fr}}
.pcard .pic{background:#fff}
.pcard .paper-badge{position:absolute; top:10px; left:10px; font-family:var(--display); font-weight:800; font-size:.78rem; background:var(--tint-sun); border:2px solid var(--ink); border-radius:999px; padding:.15em .6em}

/* ---------- Info pages ---------- */
.info{max-width:760px}
.info h1{font-size:clamp(2.1rem,5vw,3rem); font-weight:900}
.info h2{font-size:1.5rem; margin-top:28px; margin-bottom:8px}
.info p,.info li{font-size:1.08rem; color:var(--ink)}
.info p + p{margin-top:12px}
.info ul{padding-left:1.2em; display:grid; gap:6px}
.info .card{background:var(--card); border:3px solid var(--ink); border-radius:var(--r-lg); padding:20px 22px; margin-top:20px; box-shadow:0 5px 0 var(--ink)}
.copy-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px}
.copy-row code{font-family:ui-monospace,Menlo,monospace; font-size:1.05rem; background:var(--tint-grape); padding:.3em .6em; border-radius:10px; user-select:all}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink); color:#F4F0FF; padding-block:44px 30px; margin-top:20px; position:relative}
.foot-wave{display:block; width:100%; height:34px; margin-bottom:-2px}
.foot-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:28px}
.site-foot h4{font-size:1.15rem; margin-bottom:10px; color:var(--sun)}
.site-foot p{color:#CFC8E6; max-width:34ch}
.site-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.site-foot a{color:#F4F0FF; text-decoration:none; font-weight:700}
.site-foot a:hover{color:var(--sun); text-decoration:underline wavy}
.foot-logo{font-family:var(--display); font-weight:900; font-size:1.7rem; margin-bottom:8px}
.copyright{border-top:2px dashed #544A70; margin-top:30px; padding-top:18px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color:#CFC8E6; font-weight:700; font-size:.95rem}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Overlays ---------- */
.overlay{position:fixed; inset:0; z-index:60; background:rgba(43,35,64,.55); display:grid; place-items:center; padding:16px; overflow:auto}
.modal{background:var(--card); border:3px solid var(--ink); border-radius:30px; box-shadow:0 8px 0 var(--ink); width:min(920px,100%); max-height:calc(100vh - 32px); overflow:auto; padding:22px}
.modal-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px}
.modal-head h2{font-size:1.6rem}
.x-btn{width:48px; height:48px; border-radius:50%; border:3px solid var(--ink); background:var(--tint-pink); cursor:pointer; font-size:1.5rem; font-weight:900; display:grid; place-items:center; flex:none}
.picker-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px}
.pick{border:3px solid var(--ink); border-radius:20px; background:#fff; cursor:pointer; padding:8px; display:flex; flex-direction:column; gap:6px; align-items:center; font-family:var(--display); font-weight:800; transition:transform .15s}
.pick:hover{transform:translateY(-3px) rotate(-1deg); background:var(--tint-sun)}
.pick svg{width:100%; height:auto; aspect-ratio:1}
.lightbox img{display:block; width:100%; max-width:640px; margin:0 auto; border-radius:20px; border:3px solid var(--ink)}
.lightbox .note{text-align:center; margin-top:12px; font-weight:800}
.sheet-wrap{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:22px; align-items:start}
@media (max-width:720px){.sheet-wrap{grid-template-columns:1fr}}
.sheet{aspect-ratio:210/297; background:#fff; border:2px solid #CFC8E6; border-radius:6px; box-shadow:0 10px 30px rgba(43,35,64,.18); padding:6% 7%; display:flex; flex-direction:column; gap:3%; max-width:520px; width:100%; margin-inline:auto}
.sheet .s-head{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--display); font-weight:800; color:#2B2340}
.sheet .s-head b{font-size:clamp(1rem,2.4vw,1.4rem)}
.sheet .s-head span{font-size:.8rem}
.sheet img{width:100%; aspect-ratio:1; object-fit:contain; border:2px solid #2B2340; border-radius:10px}
.sheet .s-foot{margin-top:auto; display:flex; justify-content:space-between; font-weight:700; font-size:clamp(.7rem,1.6vw,.9rem); color:#2B2340; gap:10px}
.sheet .name-line{flex:1; border-bottom:2px solid #2B2340; margin-left:6px}
.sheet-side{display:flex; flex-direction:column; gap:12px}
.sheet-side p{font-weight:600; color:var(--ink-soft); font-size:.95rem}

/* ---------- Toast ---------- */
.toast{position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%) translateY(20px); opacity:0; background:var(--ink); color:#fff; font-family:var(--display); font-weight:800; font-size:1.1rem; padding:.8em 1.4em; border-radius:999px; z-index:80; transition:opacity .25s, transform .25s; pointer-events:none; max-width:calc(100% - 32px); text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* ---------- Print ---------- */
@media print{
  body{background:#fff}
  body > *:not(#printOverlay){display:none !important}
  #printOverlay{position:static; background:#fff; padding:0; display:block}
  #printOverlay .modal{border:0; box-shadow:none; padding:0; max-height:none; width:100%}
  #printOverlay .modal-head, #printOverlay .sheet-side{display:none !important}
  #printOverlay .sheet-wrap{display:block}
  #printOverlay .sheet{box-shadow:none; border:0; max-width:none; aspect-ratio:auto; height:100vh; padding:10mm}
}

/* =================== v2 additions =================== */
.skip{position:absolute; left:-999px; top:8px; z-index:100; background:var(--sun); border:3px solid var(--ink); border-radius:12px; padding:.5em 1em; font-weight:800}
.skip:focus{left:12px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
main:focus{outline:none}
button[disabled]{opacity:.45; cursor:not-allowed}

/* ---- navigation with dropdowns ---- */
.main-nav{align-items:center}
.main-nav > a, .dd-btn{font-family:var(--display); font-weight:700; font-size:.95rem; text-decoration:none; padding:.45em .7em; border-radius:999px; border:2.5px solid transparent; background:none; cursor:pointer; white-space:nowrap; color:var(--ink); transition:background .15s, transform .15s; display:inline-flex; align-items:center; gap:4px}
.dd-btn:hover{background:var(--tint-sun); transform:translateY(-2px)}
.dd-btn.active{background:var(--sun); border-color:var(--ink)}
.dd{position:relative}
.dd-panel{display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:40; min-width:250px; background:var(--card); border:3px solid var(--ink); border-radius:20px; box-shadow:0 6px 0 var(--ink); padding:10px; flex-direction:column; gap:2px}
.dd.open .dd-panel{display:flex}
.dd-panel.wide{display:none; grid-template-columns:1fr 1fr; min-width:430px; left:-80px}
.dd.open .dd-panel.wide{display:grid}
.dd-panel a{display:flex; align-items:center; gap:10px; padding:.55em .8em; border-radius:12px; text-decoration:none; font-family:var(--display); font-weight:700; font-size:1rem}
.dd-panel a:hover, .dd-panel a:focus-visible{background:var(--tint-sun)}
.dd-panel small{font-family:var(--body); font-weight:700; color:var(--ink-soft); font-size:.8rem; margin-left:auto}
.age-dot{width:14px; height:14px; border-radius:50%; border:2px solid var(--ink); display:inline-block; flex:none}
@media (max-width:1359px){ .main-nav{flex-direction:column; align-items:stretch} }
@media (min-width:1360px){ .menu-btn{display:none} .main-nav{display:flex !important; position:static; flex-direction:row; border:0; padding:0; background:none} }
@media (max-width:1359px){
  .main-nav{max-height:calc(100vh - 90px); overflow:auto}
  .main-nav > a, .dd-btn{font-size:1.15rem; padding:.7em 1em; background:var(--card); border-color:var(--ink); border-radius:16px; justify-content:space-between; width:100%}
  .dd-panel, .dd-panel.wide{position:static; box-shadow:none; border-width:2.5px; min-width:0; margin-top:6px; left:0}
  .dd-panel.wide{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){ .dd-panel.wide{grid-template-columns:1fr} }

/* ---- home sections ---- */
.today-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:22px}
@media (max-width:860px){.today-grid{grid-template-columns:minmax(0,1fr)}}
.today-card{background:var(--card); border:3px solid var(--ink); border-radius:30px; box-shadow:0 7px 0 var(--ink); overflow:hidden; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.today-card .art{background:var(--tint-sky); display:grid; place-items:center; padding:20px; border-right:3px solid var(--ink)}
.today-card .art svg{width:100%; max-width:260px; height:auto; border:3px solid var(--ink); border-radius:18px; background:#fff}
.today-card .info{padding:22px; display:flex; flex-direction:column; gap:12px; justify-content:center}
.today-card h2{font-size:clamp(1.5rem,3vw,2rem)}
.today-card h3{font-size:1.3rem}
@media (max-width:560px){.today-card{grid-template-columns:minmax(0,1fr)} .today-card .art{border-right:0; border-bottom:3px solid var(--ink)}}
.game-card{background:var(--tint-grape); border:3px solid var(--ink); border-radius:30px; box-shadow:0 7px 0 var(--ink); padding:24px; display:flex; flex-direction:column; gap:12px; justify-content:center}
.game-card .big-emoji{font-size:4rem; line-height:1}
.age-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:760px){.age-grid{grid-template-columns:minmax(0,1fr)}}
.age-card{background:var(--card); border:3px solid var(--ink); border-radius:28px; overflow:hidden; box-shadow:0 6px 0 var(--ink); display:flex; flex-direction:column; text-decoration:none; transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.age-card:hover{transform:translateY(-6px) rotate(-.8deg)}
.age-card .top{padding:16px 20px; border-bottom:3px solid var(--ink); display:flex; align-items:center; gap:14px}
.age-card .num{font-family:var(--display); font-weight:900; font-size:2.4rem; line-height:1}
.age-card .top b{display:block; font-family:var(--display); font-size:1.2rem}
.age-card .top small{font-weight:700; color:var(--ink-soft)}
.age-card .pics{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px}
.age-card .pics svg{width:100%; height:auto; border:2px solid var(--line); border-radius:12px; display:block}
.age-card .go{margin:0 14px 14px; align-self:flex-start}
.topic-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px}
.topic-tile{background:var(--card); border:3px solid var(--ink); border-radius:22px; text-decoration:none; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 5px 0 var(--ink); transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.topic-tile:hover{transform:translateY(-5px) rotate(1deg)}
.topic-tile .pic{aspect-ratio:1/.8; display:grid; place-items:center; border-bottom:3px solid var(--ink)}
.topic-tile .pic svg{width:74%; height:auto}
.topic-tile .nm{padding:10px 12px; font-family:var(--display); font-weight:800; font-size:1.05rem; line-height:1.15}
.topic-tile .nm small{display:block; font-family:var(--body); color:var(--ink-soft); font-size:.82rem; margin-top:2px}
.princess-band{display:grid; grid-template-columns:1fr 1.2fr; gap:24px; align-items:center; background:var(--tint-pink); border:3px solid var(--ink); border-radius:34px; padding:clamp(20px,4vw,36px); box-shadow:0 7px 0 var(--ink)}
.princess-band h2{font-size:clamp(1.8rem,4vw,2.5rem); margin-top:6px}
.princess-band p{margin-top:10px; font-weight:600; color:var(--ink-soft)}
.pb-ctas{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.pb-pics{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.pb-pics a{display:block; background:#fff; border:3px solid var(--ink); border-radius:18px; overflow:hidden; text-decoration:none; transition:transform .2s}
.pb-pics a:hover{transform:translateY(-4px)}
.pb-pics svg{display:block; width:100%; height:auto}
.pb-pics span{display:block; text-align:center; font-family:var(--display); font-weight:800; padding:6px; border-top:2.5px solid var(--ink); background:var(--card)}
@media (max-width:820px){.princess-band{grid-template-columns:minmax(0,1fr)}}
.create-band{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; background:var(--tint-sun); border:3px solid var(--ink); border-radius:34px; padding:clamp(20px,4vw,36px); box-shadow:0 7px 0 var(--ink)}
.create-band h2{font-size:clamp(1.7rem,3.6vw,2.4rem); margin-top:6px}
.create-band p{margin-top:10px; font-weight:600; color:var(--ink-soft)}
.quick-name{display:flex; flex-direction:column; gap:12px}
.quick-name input, .text-input{font:inherit; font-family:var(--display); font-weight:800; font-size:1.5rem; padding:.55em .8em; border:3px solid var(--ink); border-radius:18px; background:#fff; color:var(--ink); width:100%; min-width:0; text-transform:uppercase}
.text-input.normal{text-transform:none}
@media (max-width:760px){.create-band{grid-template-columns:minmax(0,1fr)}}
.learn-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:980px){.learn-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.learn-grid{grid-template-columns:minmax(0,1fr)}}
.learn-card{background:var(--c); border:3px solid var(--ink); border-radius:26px; padding:20px; text-decoration:none; display:flex; flex-direction:column; gap:8px; box-shadow:0 6px 0 var(--ink); transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.learn-card:hover{transform:translateY(-6px) rotate(-1deg)}
.learn-card .lc-ic{font-size:2.6rem; line-height:1}
.learn-card h3{font-size:1.4rem}
.learn-card p{color:var(--ink-soft); font-weight:600; flex:1}
.learn-card .btn{align-self:flex-start}
.chal-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:760px){.chal-grid{grid-template-columns:minmax(0,1fr)}}
.chal-card{border:3px solid var(--ink); border-radius:28px; padding:22px; background:var(--card); box-shadow:0 6px 0 var(--ink); display:flex; flex-direction:column; gap:12px}
.chal-card.daily{background:var(--tint-orange)}
.chal-card.weekly{background:var(--tint-grape)}
.chal-card h3{font-size:1.5rem}
.chal-card .prompt{font-size:1.2rem; font-weight:800}
.chal-card .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.done-chip{font-family:var(--display); font-weight:800; background:var(--grass); color:#fff; border:2.5px solid var(--ink); border-radius:999px; padding:.3em .9em}
.book-strip{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; background:var(--card); border:3px dashed var(--ink); border-radius:28px; padding:22px}
.book-strip .thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.book-strip .thumbs img, .book-strip .thumbs .ph{width:84px; height:84px; border-radius:14px; border:2.5px solid var(--ink); object-fit:cover; background:#fff}
.book-strip .thumbs .ph{display:grid; place-items:center; font-size:2rem; background:var(--tint-sun)}
.star-row{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; font-size:1.5rem}
@media (max-width:640px){.book-strip{grid-template-columns:minmax(0,1fr)}}

/* ---- packs ---- */
.pack-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px}
.pack{background:var(--card); border:3px solid var(--ink); border-radius:26px; box-shadow:0 6px 0 var(--ink); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; transition:transform .2s}
.pack:hover{transform:translateY(-5px)}
.pack .fan{position:relative; height:150px; background:var(--pc,var(--tint-sun)); border-bottom:3px solid var(--ink)}
.pack .fan svg{position:absolute; width:100px; height:100px; top:22px; border:2.5px solid var(--ink); border-radius:10px; background:#fff; box-shadow:0 3px 0 var(--ink)}
.pack .fan svg:nth-child(1){left:calc(50% - 110px); transform:rotate(-10deg)}
.pack .fan svg:nth-child(2){left:calc(50% - 50px); z-index:2; top:14px}
.pack .fan svg:nth-child(3){left:calc(50% + 10px); transform:rotate(10deg)}
.pack .body{padding:14px 16px; display:flex; flex-direction:column; gap:6px}
.pack h3{font-size:1.2rem}
.pack small{color:var(--ink-soft); font-weight:700}
.pack-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:10px 0 18px}
.pack-head h2{font-size:clamp(1.6rem,3.5vw,2.2rem)}

/* ---- gallery extras ---- */
.fav-btn{position:absolute; top:8px; right:8px; width:44px; height:44px; border-radius:50%; border:2.5px solid var(--ink); background:#fff; font-size:1.3rem; display:grid; place-items:center; cursor:pointer; z-index:2; transition:transform .15s; padding:0}
.fav-btn:hover{transform:scale(1.12)}
.fav-btn[aria-pressed="true"]{background:var(--tint-pink)}
.gcard .pic .ph{width:100%; height:100%; background:repeating-linear-gradient(45deg,#fff,#fff 10px,#f7f5ff 10px,#f7f5ff 20px); border-radius:10px}
.gcard .desc{color:var(--ink-soft); font-size:.92rem; font-weight:600}
.tag.topic{background:#fff}
.tag.age-35{background:var(--tint-grass)} .tag.age-57{background:var(--tint-sun)} .tag.age-7{background:var(--tint-pink)}
.more-row{display:flex; justify-content:center; margin-top:26px}
.chip{min-height:44px}

/* ---- studio v2 ---- */
.canvas-viewport{position:relative; width:100%; aspect-ratio:1; max-width:100%; overflow:hidden; border:4px solid var(--ink); border-radius:26px; background:#fff; box-shadow:0 8px 0 var(--ink)}
.canvas-viewport .canvas-wrap{border:0; border-radius:0; box-shadow:none; position:absolute; left:0; top:0; width:100%; height:100%; aspect-ratio:auto; transform-origin:0 0}
.zoom-row{display:flex; gap:10px; justify-content:center; padding:4px 0}
.zbtn{font-family:var(--display); font-weight:900; font-size:1.3rem; width:44px; height:44px}
.reset-view{width:100%; margin-top:6px; font-size:.8rem !important; padding:.35em .5em !important}
.pal-tabs{display:flex; gap:4px; margin-bottom:10px}
.pal-tab{flex:1; font-family:var(--display); font-weight:800; font-size:.9rem; padding:.4em .2em; border:2.5px solid var(--ink); background:#fff; border-radius:999px; cursor:pointer}
.pal-tab[aria-selected="true"]{background:var(--sun)}
.swatches.more{grid-template-columns:repeat(5,1fr); gap:7px}
.picker-row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; font-weight:800; font-size:.92rem; cursor:pointer}
.picker-row input{width:52px; height:40px; border:2.5px solid var(--ink); border-radius:12px; padding:2px; background:#fff; cursor:pointer}
.challenge-banner{margin-top:14px; background:var(--tint-orange); border:3px solid var(--ink); border-radius:18px; padding:10px 16px; font-weight:800; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.studio-empty{font-weight:700; color:var(--ink-soft)}
@media (max-width:1000px){ .swatches.more{grid-template-columns:repeat(8,1fr)} }

/* ---- tabs ---- */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin:22px 0 18px}
.tabs button{font-family:var(--display); font-weight:800; font-size:1.05rem; padding:.55em 1.1em; border:3px solid var(--ink); border-radius:999px; background:var(--card); cursor:pointer; min-height:48px; transition:transform .15s}
.tabs button:hover{transform:translateY(-2px)}
.tabs button[aria-selected="true"]{background:var(--sun); box-shadow:0 4px 0 var(--ink)}
.card-pop{background:var(--card); border:3px solid var(--ink); border-radius:28px; box-shadow:0 6px 0 var(--ink); padding:clamp(18px,3vw,28px)}

/* ---- create ---- */
.create-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:start}
@media (max-width:860px){.create-layout{grid-template-columns:minmax(0,1fr)}}
.create-form{display:flex; flex-direction:column; gap:18px}
.field{display:flex; flex-direction:column; gap:8px}
.field-label{font-family:var(--display); font-weight:800; font-size:1.15rem}
.theme-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px}
.theme-grid .chip{display:flex; align-items:center; gap:6px; justify-content:center}
.create-go{width:100%}
.create-note{font-weight:700; color:var(--ink-soft); min-height:1.2em}
.create-result{display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center}
.create-result .preview{width:100%; max-width:420px; border:3px solid var(--ink); border-radius:20px; overflow:hidden; background:#fff}
.create-result .preview svg{display:block; width:100%; height:auto}
.create-result h2{font-size:1.6rem}
.create-result .row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.create-empty{padding:30px 10px; color:var(--ink-soft); font-weight:700}
.create-empty .big{font-size:4rem}
.made-strip{display:flex; gap:12px; overflow-x:auto; padding:6px 2px 12px}
.made-strip button{flex:none; width:130px; border:3px solid var(--ink); border-radius:16px; background:#fff; padding:6px; cursor:pointer; font-family:var(--display); font-weight:800; font-size:.8rem}
.made-strip svg{width:100%; height:auto; display:block}
.letter-keys{display:grid; grid-template-columns:repeat(9,1fr); gap:6px}
.letter-keys button{font-family:var(--display); font-weight:900; font-size:1.2rem; aspect-ratio:1; border:2.5px solid var(--ink); border-radius:12px; background:#fff; cursor:pointer; padding:0}
.letter-keys button[aria-pressed="true"]{background:var(--sun)}
@media (max-width:420px){.letter-keys{grid-template-columns:repeat(7,1fr)}}
.idea-examples{display:flex; gap:6px; flex-wrap:wrap}
.idea-examples button{font:inherit; font-weight:700; font-size:.9rem; border:2px dashed var(--ink); border-radius:999px; background:#fff; padding:.3em .8em; cursor:pointer}

/* ---- lab ---- */
.mixer{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:22px; align-items:start}
@media (max-width:860px){.mixer{grid-template-columns:minmax(0,1fr)}}
.pots{display:flex; flex-direction:column; gap:14px}
.pot{display:grid; grid-template-columns:54px 1fr auto; gap:12px; align-items:center}
.pot .tin{width:54px; height:54px; border-radius:14px 14px 20px 20px; border:3px solid var(--ink); position:relative}
.pot .tin::after{content:""; position:absolute; left:-4px; right:-4px; top:-7px; height:10px; border:3px solid var(--ink); border-radius:8px; background:#fff}
.pot label{font-family:var(--display); font-weight:800; display:block; margin-bottom:4px}
.pot input[type=range]{width:100%; accent-color:var(--ink); height:28px}
.pot .pot-step{display:flex; gap:6px}
.pot .pot-step button{width:44px; height:44px; border-radius:50%; border:2.5px solid var(--ink); background:#fff; font-family:var(--display); font-weight:900; font-size:1.3rem; cursor:pointer}
.pot .amt{font-family:var(--display); font-weight:800; font-size:.85rem; color:var(--ink-soft)}
.recipes{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.mix-result{display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center}
.mix-blob{width:min(240px,70vw); aspect-ratio:1; border:4px solid var(--ink); border-radius:46% 54% 50% 50% / 52% 46% 54% 48%; box-shadow:0 8px 0 var(--ink); transition:background .3s, border-radius .6s; display:grid; place-items:center; font-size:3rem}
.mix-blob.empty{background:repeating-linear-gradient(45deg,#fff,#fff 12px,#f1eefb 12px,#f1eefb 24px)}
.mix-name{font-family:var(--display); font-weight:900; font-size:1.8rem}
.codes{font-family:ui-monospace,Menlo,monospace; font-weight:700; background:var(--tint-grape); padding:.3em .7em; border-radius:10px}
.my-pal{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.my-pal span{width:40px; height:40px; border-radius:50%; border:3px solid var(--ink); display:inline-block}
.palettes{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px}
.palette-card{background:var(--card); border:3px solid var(--ink); border-radius:24px; padding:16px; box-shadow:0 5px 0 var(--ink); display:flex; flex-direction:column; gap:12px}
.palette-card h3{font-size:1.2rem}
.palette-card .sw-row{display:flex; gap:6px; flex-wrap:wrap}
.palette-card .sw-row span{flex:1; min-width:30px; height:44px; border-radius:12px; border:2.5px solid var(--ink)}
.guess{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:center}
@media (max-width:760px){.guess{grid-template-columns:minmax(0,1fr)}}
.target{display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap}
.target .col{display:flex; flex-direction:column; align-items:center; gap:6px; font-family:var(--display); font-weight:800}
.target .sw{width:120px; height:120px; border-radius:50%; border:4px solid var(--ink); aspect-ratio:auto}
.pot-picks{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.pot-pick{display:flex; flex-direction:column; align-items:center; gap:4px; border:3px solid var(--ink); border-radius:18px; background:#fff; padding:10px 12px; cursor:pointer; font-family:var(--display); font-weight:800; min-width:84px}
.pot-pick i{width:44px; height:44px; border-radius:50%; border:3px solid var(--ink); display:block}
.pot-pick[aria-pressed="true"]{background:var(--tint-sun); box-shadow:0 4px 0 var(--ink); transform:translateY(-3px)}

/* ---- games ---- */
.level-row{margin:18px 0}
.game{max-width:860px}
.g-top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.g-dots{display:flex; gap:6px; flex-wrap:wrap}
.g-dots i{width:16px; height:16px; border-radius:50%; border:2.5px solid var(--ink); background:#fff; display:block}
.g-dots i.ok{background:var(--grass)} .g-dots i.miss{background:var(--sun)} .g-dots i.now{box-shadow:0 0 0 3px var(--sky)}
.g-score{font-family:var(--display); font-weight:900; font-size:1.2rem}
.g-prompt{font-family:var(--display); font-weight:800; font-size:clamp(1.4rem,3.5vw,2rem); text-align:center; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap}
.speak-btn{width:48px; height:48px; border-radius:50%; border:2.5px solid var(--ink); background:var(--tint-sky); font-size:1.3rem; cursor:pointer; flex:none}
.q-visual{display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; margin:16px 0; font-size:3.4rem; line-height:1.2; text-align:center}
.q-many{display:inline-flex; flex-wrap:wrap; justify-content:center; gap:4px; max-width:440px; font-size:2.6rem}
.q-op{font-family:var(--display); font-size:2.6rem}
.q-seq{font-family:var(--display); font-weight:900; font-size:2.4rem; letter-spacing:.04em}
.q-seq b, .q-row b{color:var(--grape)}
.q-word{font-family:var(--display); font-weight:900; font-size:2.4rem; letter-spacing:.12em}
.q-sentence{font-family:var(--display); font-weight:800; font-size:1.7rem}
.q-passage{font-size:1.2rem; font-weight:600; max-width:60ch; margin:14px auto; background:var(--tint-sun); border:2.5px solid var(--ink); border-radius:18px; padding:14px 18px; line-height:1.6}
.q-row{display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-size:2.4rem}
.q-pair{display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-size:1.4rem}
.g-options{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:10px}
.g-opt{border:3px solid var(--ink); border-radius:22px; background:#fff; min-height:120px; padding:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; box-shadow:0 5px 0 var(--ink); transition:transform .15s; font:inherit}
.g-opt:hover{transform:translateY(-3px) rotate(-1deg)}
.g-opt.right{background:var(--tint-grass); border-color:#177A4E}
.g-opt.wrong{background:var(--tint-pink); animation:wobble .4s}
@keyframes wobble{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.q-blob{width:74px; height:74px; border-radius:50% 46% 52% 48%; border:3px solid var(--ink); display:block}
.q-blob.sm{width:40px; height:40px; display:inline-block}
.q-name{font-family:var(--display); font-weight:800; text-transform:capitalize}
.q-emoji{font-size:3.4rem; line-height:1}
.q-num{font-family:var(--display); font-weight:900; font-size:2.8rem; line-height:1}
.q-letter{font-family:var(--display); font-weight:900; font-size:3.2rem; line-height:1}
.q-text{font-family:var(--display); font-weight:800; font-size:1.3rem}
.q-shape{width:84px; height:84px}
.g-feedback{text-align:center; font-family:var(--display); font-weight:900; font-size:1.6rem; min-height:2.2em; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap}
.g-feedback.ok{color:#177A4E} .g-feedback.no{color:#B8327F}
.tiles-answer{min-height:74px; border:3px dashed var(--ink); border-radius:18px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:center; padding:10px; margin:10px 0; background:var(--tint-sun)}
.tiles{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.tile{font-family:var(--display); font-weight:900; font-size:1.6rem; min-width:56px; min-height:56px; padding:0 .5em; border:3px solid var(--ink); border-radius:14px; background:#fff; cursor:pointer; box-shadow:0 4px 0 var(--ink)}
.tile.words{font-size:1.2rem}
.tile[disabled]{opacity:.3; box-shadow:none}
.g-end{text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center; padding:10px}
.g-end .stars{font-size:3rem}
.g-end h2{font-size:2rem}

/* ---- book ---- */
.badge-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin-top:10px}
.badge{border:3px solid var(--ink); border-radius:24px; padding:16px; background:var(--card); display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; box-shadow:0 5px 0 var(--ink)}
.badge .ic{font-size:2.8rem; width:74px; height:74px; display:grid; place-items:center; border-radius:50%; border:3px solid var(--ink); background:var(--tint-sun)}
.badge.locked{background:#F1EEF9; box-shadow:none; border-style:dashed}
.badge.locked .ic{filter:grayscale(1); opacity:.45; background:#fff}
.badge h3{font-size:1.05rem}
.badge p{font-size:.88rem; color:var(--ink-soft); font-weight:700}
.badge .got{font-family:var(--display); font-weight:800; font-size:.85rem; color:#177A4E}
.book-filters{margin:4px 0 6px}

/* ---- celebrate ---- */
.celebrate{background:rgba(43,35,64,.6)}
#confetti{position:fixed; inset:0; width:100%; height:100%; pointer-events:none}
.celebrate-card{position:relative; text-align:center; width:min(520px,100%); display:flex; flex-direction:column; align-items:center; gap:12px; animation:boing .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes boing{from{transform:scale(.4) rotate(-8deg)}to{transform:none}}
.wow-stars{font-size:2.6rem; animation:bob 1.6s ease-in-out infinite}
#wowTitle{font-size:clamp(2rem,6vw,2.8rem); font-weight:900; background:linear-gradient(90deg,#FF5A5F,#FF9F1C,#E0A800,#22B573,#3A9BFF,#8B5CF6); -webkit-background-clip:text; background-clip:text; color:transparent}
#wowImg{width:min(260px,70vw); border:3px solid var(--ink); border-radius:18px}
.wow-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.badge-pop{pointer-events:none; position:fixed; top:calc(90px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); z-index:90; background:var(--sun); border:3px solid var(--ink); border-radius:22px; padding:12px 20px; box-shadow:0 6px 0 var(--ink); font-family:var(--display); font-weight:900; font-size:1.2rem; display:flex; align-items:center; gap:10px; animation:boing .5s cubic-bezier(.3,1.6,.5,1); max-width:calc(100% - 32px)}
.badge-pop span{font-size:2rem}

/* ---- picker ---- */
.picker-filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.picker-filters input{font:inherit; font-weight:700; border:3px solid var(--ink); border-radius:999px; padding:.5em 1em; min-width:0; flex:1 1 200px}
.pick small{font-family:var(--body); font-weight:700; color:var(--ink-soft); font-size:.75rem}

/* ---- parent area ---- */
.parent-toc{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px}
.parent-toc a{font-family:var(--display); font-weight:800; text-decoration:none; border:2.5px solid var(--ink); border-radius:999px; padding:.35em .9em; background:var(--tint-grass)}
.parent-area h2{scroll-margin-top:100px}

.pic-click{width:100%; height:100%; display:grid; place-items:center; cursor:pointer}
.pick .ph{width:100%; aspect-ratio:1}
.canvas-viewport{touch-action:none; cursor:crosshair}
@media (max-width:1359px){ .main-nav .dd-panel a{background:none; border-color:transparent; font-size:1.05rem; padding:.55em .8em} }
@media (min-width:1360px){
  .head-row{gap:10px}
  .logo{font-size:1.35rem} .logo-mark{width:38px; height:38px}
  .main-nav{gap:0}
  .main-nav > a, .dd-btn{font-size:.9rem; padding:.4em .55em}
}
.site-head .wrap{max-width:1400px}
.topic-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:1100px){.topic-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===================== v3: header tools ===================== */
.head-tools{display:flex; align-items:center; gap:8px; flex:none; order:3}
.main-nav{order:2} .menu-btn{order:4}
.age-pick{display:inline-flex; align-items:center; border:2.5px solid var(--ink); border-radius:999px; background:var(--card); padding:2px; gap:2px}
.age-pick .ap-l{font-family:var(--display); font-weight:800; font-size:.78rem; padding:0 4px 0 8px; color:var(--ink-soft)}
.age-pick button{font-family:var(--display); font-weight:800; font-size:.88rem; border:0; background:none; border-radius:999px; padding:.3em .6em; min-height:34px; cursor:pointer}
.age-pick button[aria-pressed="true"]{background:var(--sun); box-shadow:inset 0 0 0 2px var(--ink)}
.surprise-btn{background:var(--grape); color:#fff; white-space:nowrap}
.main-nav .sig-nav{font-weight:900}
.main-nav > a.world-nav{background:var(--tint-grass); border-color:var(--ink)}
.main-nav > a.world-nav.active{background:var(--grass); color:#fff}
@media (min-width:1360px){ .head-tools{margin-left:6px} .main-nav{margin-left:auto} }
@media (max-width:1500px) and (min-width:1360px){ .sb-t{display:none} .age-pick .ap-l{display:none} }
@media (max-width:1359px){ .head-tools{margin-left:auto} .menu-btn{margin-left:0} }
@media (max-width:640px){
  .head-row{flex-wrap:wrap; row-gap:6px; padding-block:6px}
  .head-tools{order:5; width:100%; justify-content:space-between; margin:0}
  .sb-t{display:inline}
}
.surprise-big{background:var(--grape); color:#fff}

/* ===================== friends (mascots) ===================== */
.host{display:flex; align-items:flex-end; gap:10px}
.host img{width:92px; height:92px; object-fit:contain; flex:none; filter:drop-shadow(0 4px 0 rgba(43,35,64,.12))}
.host .bubble{position:relative; background:var(--card); border:3px solid var(--ink); border-radius:20px; padding:.6em .9em; font-family:var(--display); font-weight:800; font-size:1.05rem; line-height:1.25; box-shadow:0 4px 0 var(--ink); max-width:26ch; margin-bottom:34px}
.host .bubble::before{content:""; position:absolute; left:-12px; bottom:14px; width:18px; height:18px; background:var(--card); border-left:3px solid var(--ink); border-bottom:3px solid var(--ink); transform:rotate(45deg)}
.host.big img{width:130px; height:130px}
.host.mini img{width:58px; height:58px} .host.mini .bubble{font-size:.9rem; margin-bottom:18px; padding:.4em .7em}
.host.wide .bubble{max-width:none; font-family:var(--body); font-weight:700; font-size:1.05rem; margin-bottom:10px}
.g-end .host{justify-content:center}
.x-head{display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:18px}
.x-head > div:first-child{flex:1 1 380px}
.back-link{display:inline-block; font-family:var(--display); font-weight:800; margin-bottom:10px; text-decoration:none}
.back-link:hover{text-decoration:underline}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.row.center{justify-content:center}
.linkish{background:none; border:0; font:inherit; font-weight:800; cursor:pointer; color:var(--grape); padding:0 .2em}
.done-chip{font-family:var(--display); font-weight:800}

/* ===================== surprise ===================== */
.surprise-card{text-align:center; position:relative; max-width:520px}
.surprise-card .x-btn{position:absolute; right:12px; top:12px}
.sp-dice{font-size:3.4rem; animation:dice 1s cubic-bezier(.3,1.5,.5,1)}
@keyframes dice{0%{transform:rotate(-200deg) scale(.4)} 100%{transform:none}}
.sp-lead{font-family:var(--display); font-weight:800; color:var(--ink-soft); font-size:1.2rem}
.sp-big{font-family:var(--display); font-weight:900; font-size:clamp(1.8rem,5vw,2.6rem); line-height:1.1; margin:6px 0 10px; animation:pop .5s .5s both}
@keyframes pop{0%{transform:scale(.3); opacity:0} 100%{transform:none; opacity:1}}
.sp-art svg{width:180px; height:auto; border:3px solid var(--ink); border-radius:16px; background:#fff}
.sp-sub{font-weight:700; margin:8px auto 14px; max-width:36ch}

/* ===================== home: what to do, signature, world today ===================== */
.todo-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px}
.todo{background:var(--c); border:3px solid var(--ink); border-radius:26px; box-shadow:0 6px 0 var(--ink); text-decoration:none; padding:12px 12px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.todo:hover{transform:translateY(-6px) rotate(-1.5deg)}
.todo-pic{height:118px; display:grid; place-items:center; width:100%}
.todo-pic img{max-height:118px; max-width:100%; object-fit:contain}
.todo-emoji{font-size:4rem}
.todo b{font-family:var(--display); font-weight:900; font-size:1.25rem; letter-spacing:.02em}
.todo small{font-weight:700; color:var(--ink-soft); font-size:.88rem; line-height:1.3}
@media (max-width:1100px){.todo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.todo-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px} .todo-pic{height:92px} .todo-pic img{max-height:92px}}
.sig-band{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.sig{position:relative; background:var(--c); border:3px solid var(--ink); border-radius:30px; box-shadow:0 7px 0 var(--ink); padding:22px 22px 20px; padding-right:120px; text-decoration:none; display:flex; flex-direction:column; gap:8px; min-height:210px; transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.sig:hover{transform:translateY(-5px)}
.sig img{position:absolute; right:10px; bottom:12px; width:110px; height:110px; object-fit:contain}
.sig h3{font-size:1.6rem}
.sig p{font-weight:600; color:var(--ink-soft)}
.sig .btn{align-self:flex-start; margin-top:auto}
@media (max-width:980px){.sig-band{grid-template-columns:minmax(0,1fr)} .sig{min-height:0}}
.wtoday{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); background:var(--card); border:3px solid var(--ink); border-radius:30px; box-shadow:0 7px 0 var(--ink); overflow:hidden}
.wt-flag{background:var(--tint-grass); border-right:3px solid var(--ink); display:grid; place-items:center; padding:24px; position:relative; gap:12px}
.wt-flag svg{width:100%; max-width:260px; height:auto; filter:drop-shadow(0 5px 0 rgba(43,35,64,.25))}
.wt-chip{font-family:var(--display); font-weight:800; background:var(--card); border:2.5px solid var(--ink); border-radius:999px; padding:.3em .8em}
.wt-body{padding:22px}
.wt-body h2{font-size:clamp(1.8rem,4vw,2.6rem); margin:4px 0 14px}
.wt-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.wt-grid > div{background:var(--paper); border:2.5px solid var(--ink); border-radius:18px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; align-items:flex-start}
.wt-grid b{font-family:var(--display); font-weight:900}
.wt-grid span{font-weight:700; font-size:.95rem; color:var(--ink-soft); flex:1}
@media (max-width:900px){.wtoday{grid-template-columns:minmax(0,1fr)} .wt-flag{border-right:0; border-bottom:3px solid var(--ink)} .wt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.wt-grid{grid-template-columns:minmax(0,1fr)}}
/* trail */
.trail{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; position:relative}
.trail li a{display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; text-align:center; font-family:var(--display); font-weight:800; font-size:.98rem; line-height:1.15}
.tr-dot{width:64px; height:64px; border-radius:50%; background:var(--card); border:3px solid var(--ink); display:grid; place-items:center; font-size:1.8rem; box-shadow:0 4px 0 var(--ink); transition:transform .2s}
.trail li a:hover .tr-dot{transform:translateY(-4px) rotate(-6deg)}
.trail li.done .tr-dot{background:var(--grass); color:#fff; font-size:1.8rem}
.trail li:not(:last-child)::after{content:""; position:absolute}
.trail-count{font-family:var(--display); font-weight:800; background:var(--tint-grass); border:2.5px solid var(--ink); border-radius:999px; padding:.3em .8em}
@media (max-width:860px){.trail{grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:18px}}
@media (max-width:420px){.trail{grid-template-columns:repeat(3,minmax(0,1fr))} .tr-dot{width:54px; height:54px}}
/* feed */
.feed{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.fd{background:var(--c); border:3px solid var(--ink); border-radius:22px; box-shadow:0 5px 0 var(--ink); padding:12px 14px 14px; text-decoration:none; display:flex; flex-direction:column; gap:8px; transition:transform .2s}
.fd:hover{transform:translateY(-4px) rotate(.8deg)}
.fd-t{font-family:var(--display); font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft)}
.fd-art{height:92px; display:grid; place-items:center}
.fd-art svg{height:92px; width:auto; max-width:100%; background:#fff; border:2.5px solid var(--ink); border-radius:12px}
.fd-flag svg{width:120px; height:auto; border-radius:6px; border:0}
.fd-emoji{font-size:3.4rem; line-height:1}
.fd-txt{font-weight:700; font-size:.95rem; line-height:1.35}
@media (max-width:900px){.feed{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chal-card.idea{background:var(--tint-sun)}
.chal-card .host{float:right; margin:-6px -4px 0 8px}
/* why */
.why{background:var(--tint-grass); border:3px solid var(--ink); border-radius:34px; padding:clamp(20px,4vw,36px)}
.why-head h2{font-size:clamp(1.7rem,3.5vw,2.3rem); margin:6px 0 8px}
.why-head p{font-weight:600; color:var(--ink-soft); max-width:64ch}
.why-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px}
.why-card{background:var(--card); border:2.5px solid var(--ink); border-radius:18px; padding:12px 14px}
.why-card span{font-size:1.6rem} .why-card b{font-family:var(--display); font-weight:900; font-size:1.1rem; display:block; margin:2px 0}
.why-card p{font-size:.95rem; color:var(--ink-soft); font-weight:600}
.parent-area .why{margin-top:26px}
@media (max-width:860px){.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.why-grid{grid-template-columns:minmax(0,1fr)}}
.learn-grid{row-gap:18px}

/* ===================== World Explorer ===================== */
.wx-hero{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; background:linear-gradient(135deg,var(--tint-grass),var(--tint-sky)); border:3px solid var(--ink); border-radius:34px; padding:clamp(18px,3vw,30px); box-shadow:0 7px 0 var(--ink); position:relative; overflow:hidden}
.wx-hero::after{content:"✈️"; position:absolute; top:14px; right:40%; font-size:2rem; opacity:.5; transform:rotate(-12deg)}
.wx-hero > div:first-child{flex:1 1 420px}
.wx-sub{font-family:var(--display); font-weight:900; font-size:clamp(1.3rem,3vw,1.8rem); color:#177A4E; margin-top:6px}
.wx-sig{font-weight:700; font-style:italic; color:var(--ink-soft); margin:8px 0 14px}
.wx-search{margin:0}
.journey{list-style:none; padding:0; margin:20px 0; display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.journey li{font-family:var(--display); font-weight:800; background:var(--card); border:2.5px solid var(--ink); border-radius:999px; padding:.3em .85em .3em .35em; display:flex; align-items:center; gap:6px; font-size:.95rem}
.journey li span{width:26px; height:26px; border-radius:50%; background:var(--sun); display:grid; place-items:center; border:2px solid var(--ink); font-size:.85rem}
.journey li:not(:last-child)::after{content:"→"; margin-left:6px; color:var(--ink-soft)}
.wx-mapcard{background:var(--card); border:3px solid var(--ink); border-radius:30px; box-shadow:0 7px 0 var(--ink); padding:clamp(12px,2vw,20px)}
.wmap{width:100%; height:auto; display:block}
.wm-sea{fill:#CFE8FF; stroke:var(--ink); stroke-width:2.5}
.wm-grid{stroke:#fff; stroke-width:1; stroke-dasharray:3 5; opacity:.8}
.wm-c{cursor:pointer; transition:opacity .2s, filter .2s}
.wm-c:hover{filter:brightness(1.08)}
.wm-c.dim{opacity:.3}
.wm-l{font-family:var(--display); font-weight:800; fill:var(--ink); pointer-events:none}
.wm-pin .pin-dot{fill:#FF5A5F; stroke:#fff; stroke-width:1.6}
.wm-pin.got .pin-dot{fill:#22B573}
.wm-pin:hover .pin-dot, .wm-pin:focus .pin-dot{fill:#8B5CF6}
.wm-pin.on .pin-dot{fill:#FF5A5F; stroke:var(--ink); stroke-width:2; animation:pinpulse 1.2s infinite}
@keyframes pinpulse{50%{stroke-width:6; stroke:#FFD23F}}
.wx-conts{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px}
.wx-conts .chip{background:var(--c)}
.wx-conts .chip.on{box-shadow:0 4px 0 var(--ink)}
.wx-contfact{text-align:center; font-weight:700; margin-top:10px; color:var(--ink-soft)}
.wx-quick{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-top:22px}
.wxq{background:var(--c); border:3px solid var(--ink); border-radius:22px; box-shadow:0 5px 0 var(--ink); padding:12px; text-decoration:none; display:flex; flex-direction:column; gap:2px; transition:transform .2s}
.wxq:hover{transform:translateY(-4px)}
.wxq span{font-size:2rem} .wxq b{font-family:var(--display); font-weight:900; line-height:1.15} .wxq small{font-weight:700; color:var(--ink-soft); font-size:.82rem}
@media (max-width:1000px){.wx-quick{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.wx-quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wx-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}
.wx-country{position:relative; background:var(--card); border:3px solid var(--ink); border-radius:20px; box-shadow:0 5px 0 var(--ink); padding:12px; text-decoration:none; display:flex; flex-direction:column; gap:4px; transition:transform .2s}
.wx-country:hover{transform:translateY(-4px) rotate(-1deg)}
.wx-country .fl svg{width:100%; height:auto; border-radius:6px}
.wx-country b{font-family:var(--display); font-weight:900; line-height:1.15}
.wx-country small{font-weight:700; color:var(--ink-soft)}
.wx-country .got{position:absolute; top:-10px; right:-10px; width:32px; height:32px; border-radius:50%; background:var(--grass); color:#fff; border:2.5px solid var(--ink); display:grid; place-items:center; font-style:normal; font-weight:900}
.aq-fl{font-size:2.6rem; display:grid; place-items:center; aspect-ratio:3/2; background:#DFF1FF; border-radius:8px}
.wx-colormap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:22px; align-items:center; background:var(--card); border:3px solid var(--ink); border-radius:30px; padding:20px; box-shadow:0 6px 0 var(--ink)}
.wx-mapbtn{border:0; background:none; padding:0; cursor:pointer}
.wx-mapbtn svg{width:100%; height:auto; border:3px solid var(--ink); border-radius:18px; background:#fff}
.wx-colormap h3{font-size:1.5rem} .wx-colormap p{font-weight:600; margin:6px 0}
.wx-tip{color:var(--ink-soft); font-weight:700}
@media (max-width:760px){.wx-colormap{grid-template-columns:minmax(0,1fr)}}
.wx-results{display:grid; gap:12px; margin-top:16px}
.wx-res{background:var(--card); border:3px solid var(--ink); border-radius:22px; padding:12px 14px; box-shadow:0 5px 0 var(--ink)}
.wx-res-h{display:flex; gap:12px; align-items:center; text-decoration:none}
.wx-res-h .fl svg{width:84px; height:auto; border-radius:5px}
.wx-res-h b{font-family:var(--display); font-size:1.3rem; display:block} .wx-res-h small{font-weight:700; color:var(--ink-soft)}
.wx-links{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.wx-links a, .wx-links button{font-family:var(--display); font-weight:800; font-size:.9rem; border:2px solid var(--ink); border-radius:999px; background:var(--paper); padding:.3em .75em; text-decoration:none; cursor:pointer}
.wx-links a:hover, .wx-links button:hover{background:var(--tint-sun)}
.wx-none, .wx-note{font-weight:700; margin-top:14px; background:var(--tint-sun); border:2.5px solid var(--ink); border-radius:16px; padding:10px 14px}
/* country page */
.cx-head{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,1fr); gap:20px; align-items:center; background:var(--card); border:3px solid var(--ink); border-radius:34px; box-shadow:0 7px 0 var(--ink); padding:clamp(16px,3vw,26px)}
.cx-flag svg{width:100%; height:auto; filter:drop-shadow(0 6px 0 rgba(43,35,64,.2))}
.aq-big{font-size:5rem; text-align:center}
.cx-title h1{font-size:clamp(2rem,4.6vw,3.2rem); line-height:1}
.cx-lede{font-weight:700; font-size:1.1rem; margin:10px 0 14px}
.cx-map{background:var(--tint-sky); border:2.5px solid var(--ink); border-radius:20px; padding:10px}
.cx-map-t{font-family:var(--display); font-weight:800; margin-bottom:6px}
@media (max-width:980px){.cx-head{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)} .cx-map{grid-column:1/-1}}
@media (max-width:600px){.cx-head{grid-template-columns:minmax(0,1fr)}}
.cx-steps{list-style:none; padding:0; margin:20px 0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px}
.cx-steps a{display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; font-family:var(--display); font-weight:800; background:var(--card); border:2.5px solid var(--ink); border-radius:18px; padding:10px 4px}
.cx-steps a span{font-size:1.4rem}
.cx-steps li.done a{background:var(--tint-grass)}
.cx-steps li.done a span{color:#177A4E; font-weight:900}
@media (max-width:640px){.cx-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cx-facts{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px}
.cxf{background:var(--c); border:2.5px solid var(--ink); border-radius:18px; padding:10px 12px}
.cxf span{font-size:1.6rem} .cxf b{display:block; font-family:var(--display); font-weight:900} .cxf p{font-weight:700; font-size:.92rem; line-height:1.3}
@media (max-width:1100px){.cx-facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.cx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cx-did{margin:22px 0}
.cx-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px}
@media (max-width:820px){.cx-two{grid-template-columns:minmax(0,1fr)}}
.cx-two h2{font-size:1.6rem; margin:4px 0 10px}
.cx-lm-art svg{width:100%; max-width:320px; height:auto; display:block; margin:0 auto 10px; border:3px solid var(--ink); border-radius:18px; background:#fff}
.cx-lm p{font-weight:600} .cx-where{color:var(--ink-soft); margin:6px 0 10px}
.words{display:grid; gap:10px; margin-bottom:14px}
.word{display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto auto; column-gap:12px; text-align:left; background:var(--paper); border:2.5px solid var(--ink); border-radius:18px; padding:10px 14px; cursor:pointer; font:inherit; transition:transform .15s}
.word:hover{transform:translateY(-2px); background:var(--tint-sun)}
.w-e{grid-row:1/4; font-size:2rem; align-self:center}
.w-en{font-weight:700; color:var(--ink-soft); font-size:.9rem}
.word b{font-family:var(--display); font-size:1.35rem; line-height:1.15}
.word small{font-weight:700; color:var(--ink-soft)}
.w-sp{grid-column:3; grid-row:1/4; align-self:center; font-size:1.5rem}
.cx-small{display:flex; gap:16px; align-items:flex-start}
.cx-big{font-size:3.6rem; line-height:1}
.cx-small h3{font-size:1.35rem; margin:2px 0 6px} .cx-small p{font-weight:600; margin-bottom:10px}
.cx-stamp-row{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.cx-next{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:26px 0 10px}
.stamp{width:130px; height:130px; flex:none}
.stamp.got{transform:rotate(-8deg)}
.stamp.thunk{animation:thunk .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes thunk{0%{transform:scale(2.2) rotate(10deg); opacity:0} 100%{transform:rotate(-8deg) scale(1); opacity:1}}
/* passport */
.pp-cover{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; background:#1D3F7A; color:#fff; border:3px solid var(--ink); border-radius:30px; padding:clamp(20px,4vw,34px); box-shadow:0 7px 0 var(--ink); background-image:radial-gradient(circle at 20px 20px, rgba(255,255,255,.12) 2px, transparent 3px); background-size:34px 34px}
.pp-cover h1{font-size:clamp(2rem,5vw,3rem); color:#FFE08A}
.pp-cover p{font-weight:700; max-width:48ch; margin-top:8px}
.pp-cover .host .bubble{color:var(--ink)}
.pp-n{font-family:var(--display); font-size:1.3rem}
.cont-badges{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px}
.cbadge{background:var(--card); border:3px dashed #B8B2CC; border-radius:22px; padding:12px 8px; text-align:center; display:flex; flex-direction:column; gap:4px; align-items:center; position:relative; overflow:hidden}
.cbadge span{font-size:2rem; filter:grayscale(.7)} .cbadge b{font-family:var(--display); font-size:.95rem; line-height:1.15} .cbadge small{font-weight:700; color:var(--ink-soft)}
.cbadge i{position:absolute; left:0; bottom:0; height:6px; width:calc(var(--p)*100%); background:var(--grass)}
.cbadge.got{border:3px solid var(--ink); background:var(--tint-sun); box-shadow:0 4px 0 var(--ink)} .cbadge.got span{filter:none}
@media (max-width:980px){.cont-badges{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.cont-badges{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pp-page{padding-block:18px}
.stamps{display:flex; flex-wrap:wrap; gap:14px}
.stamp-slot{display:flex; flex-direction:column; align-items:center; text-decoration:none; font-family:var(--display); font-weight:800; background:#FFFBF0; border:2.5px solid var(--line); border-radius:18px; padding:8px 10px}
.stamp-slot .stamp{width:110px; height:110px}
/* hubs, flags, food */
.hub-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:10px}
.hub{background:var(--c); border:3px solid var(--ink); border-radius:24px; box-shadow:0 6px 0 var(--ink); padding:16px; text-decoration:none; display:flex; flex-direction:column; gap:4px; transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.hub:hover{transform:translateY(-5px) rotate(-1deg)}
.hub span{font-size:2.4rem; line-height:1.1} .hub b{font-family:var(--display); font-weight:900; font-size:1.25rem; line-height:1.15} .hub small{font-weight:700; color:var(--ink-soft)}
@media (max-width:980px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.hub-grid{grid-template-columns:minmax(0,1fr)}}
.flag-pick{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px}
.flag-pick button{background:var(--card); border:2.5px solid var(--ink); border-radius:16px; padding:10px; cursor:pointer; display:flex; flex-direction:column; gap:6px; font:inherit; box-shadow:0 4px 0 var(--ink); transition:transform .15s}
.flag-pick button:hover{transform:translateY(-3px)}
.flag-pick svg{width:100%; height:auto}
.flag-pick b{font-family:var(--display); font-size:.95rem}
.food-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px}
.food{background:var(--card); border:3px solid var(--ink); border-radius:22px; padding:14px; box-shadow:0 5px 0 var(--ink); display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.fe{font-size:3rem; line-height:1} .food b{font-family:var(--display); font-size:1.3rem}
.fc{display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:800; text-decoration:none; font-size:.95rem}
.fc .fl svg{width:40px; height:auto; border-radius:3px} .fc .aq-fl{font-size:1.2rem; width:40px}
.food p{font-weight:600; font-size:.93rem; color:var(--ink-soft)}
.hab{font-weight:800; font-size:.85rem; background:var(--tint-grass); border:2px solid var(--ink); border-radius:999px; padding:.15em .6em}
/* quiz flags & explanations */
.q-flag svg{width:120px; height:auto; display:block; border-radius:4px}
.q-flag.big svg{width:min(240px,60vw)}
.g-options.many{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.g-options.many .g-opt{min-height:96px}
.g-feedback.has-explain{flex-direction:column; gap:8px}
.g-explain{display:block; font-family:var(--body); font-weight:700; font-size:1.05rem; color:var(--ink); background:var(--tint-sun); border:2.5px solid var(--ink); border-radius:16px; padding:.5em .9em; max-width:60ch}
.wow-flag svg{width:140px; height:auto; margin:6px auto 0; display:block}
/* studio learn panel */
.learn-panel{margin-top:18px; background:var(--tint-sky); border:3px solid var(--ink); border-radius:24px; padding:14px 18px; box-shadow:0 5px 0 var(--ink)}
.lp-head{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:900; font-size:1.2rem; margin-bottom:6px}
.lp-head img{width:54px; height:54px; object-fit:contain}
.lp-body p{font-weight:600; margin:4px 0}
.lp-row{display:flex; gap:14px; align-items:flex-start}
.lp-flag svg{width:120px; height:auto; border-radius:4px; flex:none}
.lp-chips{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0}
.lp-chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-weight:800; border:2.5px solid var(--ink); border-radius:999px; background:var(--card); padding:.3em .8em; cursor:pointer; min-height:40px}
.lp-chip i{width:18px; height:18px; border-radius:50%; border:2px solid var(--ink)}
.lp-chip.dot{width:40px; height:40px; padding:0}
.lp-info{font-weight:700; color:var(--ink-soft); min-height:1.4em}
.story-banner{background:var(--tint-grape)}
/* character & build */
.ch-layout, .bw-layout{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:20px; align-items:start}
@media (max-width:900px){.ch-layout, .bw-layout{grid-template-columns:minmax(0,1fr)}}
.ch-stage svg, #bwArt svg{width:100%; height:auto; border:3px solid var(--ink); border-radius:20px; background:#fff; display:block; margin-bottom:12px; touch-action:none}
.ch-tabs, .bw-cats{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.ch-tabs button, .bw-cats button{font-family:var(--display); font-weight:800; border:2.5px solid var(--ink); background:var(--card); border-radius:999px; padding:.35em .8em; cursor:pointer; min-height:40px}
.ch-tabs button[aria-selected="true"], .bw-cats button[aria-selected="true"]{background:var(--sun); box-shadow:0 3px 0 var(--ink)}
.ch-opts{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; min-height:120px; align-content:start}
.ch-opt{font-family:var(--display); font-weight:800; border:2.5px solid var(--ink); background:var(--paper); border-radius:16px; padding:.55em .6em; cursor:pointer; display:flex; align-items:center; gap:8px; min-height:48px}
.ch-opt i{width:24px; height:24px; border-radius:50%; background:var(--sw); border:2.5px solid var(--ink); flex:none}
.ch-opt[aria-pressed="true"]{background:var(--tint-sun); box-shadow:0 3px 0 var(--ink); transform:translateY(-2px)}
.ch-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.bw-bgs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.bw-count{font-weight:700; color:var(--ink-soft); text-align:center; margin-bottom:8px}
.bw-tools{display:flex; flex-wrap:wrap; gap:6px; justify-content:center}
.bw-tools .btn:disabled{opacity:.4; pointer-events:none}
.bw-stickers{display:grid; grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); gap:8px; max-height:300px; overflow:auto; padding:4px; margin-bottom:12px}
.bw-st{aspect-ratio:1; border:2.5px solid var(--ink); border-radius:14px; background:var(--card); cursor:pointer; padding:4px; transition:transform .15s}
.bw-st:hover{transform:scale(1.08) rotate(-3deg); background:var(--tint-sun)}
.bw-st svg{width:100%; height:100%}
.bw-item{cursor:grab}
.bw-selbox{fill:none; stroke:#8B5CF6; stroke-width:3; stroke-dasharray:8 6}
#bwArt:focus-visible{outline:4px solid var(--sky); outline-offset:4px; border-radius:20px}
/* story */
.story-list{display:grid; gap:18px}
.story-card{display:grid; grid-template-columns:200px minmax(0,1fr); gap:18px; background:var(--card); border:3px solid var(--ink); border-radius:28px; padding:16px; box-shadow:0 6px 0 var(--ink); text-decoration:none; align-items:center}
.story-card:hover{transform:translateY(-3px)}
.sc-art svg{width:100%; height:auto; border:2.5px solid var(--ink); border-radius:14px}
.story-card h2{font-size:1.6rem} .story-card p{font-weight:600; margin:6px 0 10px}
.sc-prog{display:flex; gap:6px; align-items:center; margin-bottom:10px; font-weight:700; color:var(--ink-soft)}
.sc-prog i{width:18px; height:18px; border-radius:50%; border:2px solid var(--ink); background:#fff} .sc-prog i.on{background:var(--sun)}
@media (max-width:560px){.story-card{grid-template-columns:minmax(0,1fr)}}
.story-pages{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px}
.sp-card{background:var(--card); border:3px solid var(--ink); border-radius:22px; padding:10px; position:relative; display:flex; flex-direction:column; gap:8px; box-shadow:0 5px 0 var(--ink)}
.sp-card.done{background:var(--tint-grass)}
.sp-num{position:absolute; top:-12px; left:-8px; width:34px; height:34px; border-radius:50%; background:var(--sun); border:2.5px solid var(--ink); display:grid; place-items:center; font-family:var(--display); font-weight:900}
.sp-pic svg, .sp-pic img{width:100%; height:auto; border:2px solid var(--ink); border-radius:12px; display:block; background:#fff}
.sp-card p{font-weight:700; font-size:.95rem; flex:1}
@media (max-width:1000px){.story-pages{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.story-pages{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mybook{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.mb-cover, .mb-end{background:var(--grape); color:#fff; border:3px solid var(--ink); border-radius:24px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:20px; min-height:260px; box-shadow:0 6px 0 var(--ink)}
.mb-cover h1{font-size:clamp(1.6rem,3.4vw,2.2rem); margin:8px 0}
.mb-end{background:var(--sun); color:var(--ink); font-family:var(--display); font-weight:900; font-size:2rem}
.mb-page{margin:0; background:var(--card); border:3px solid var(--ink); border-radius:24px; padding:10px; box-shadow:0 6px 0 var(--ink)}
.mb-page img{width:100%; height:auto; border-radius:14px; display:block}
.mb-page figcaption{font-weight:700; margin-top:8px; display:flex; gap:8px; align-items:flex-start}
.mb-page figcaption span{flex:none; width:28px; height:28px; border-radius:50%; background:var(--sun); border:2px solid var(--ink); display:grid; place-items:center; font-family:var(--display); font-weight:900}
@media (max-width:860px){.mybook{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.mybook{grid-template-columns:minmax(0,1fr)}}
/* book maker */
.bm-form{display:grid; gap:4px}
.bm-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
@media (max-width:700px){.bm-row{grid-template-columns:minmax(0,1fr)}}
.bm-preview{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px}
.bm-cover, .bm-pg{display:flex; flex-direction:column; gap:6px; font-weight:700; font-size:.85rem; text-align:center}
.bm-cover svg{width:100%; height:auto; border:3px solid var(--ink); border-radius:12px; box-shadow:0 4px 0 var(--ink)}
.bm-pg button{border:3px solid var(--ink); border-radius:12px; background:#fff; padding:0; aspect-ratio:3/4; display:grid; place-items:center; cursor:pointer; box-shadow:0 4px 0 var(--ink); overflow:hidden}
.bm-pg svg{width:100%; height:auto}
.bm-note{text-align:center; font-weight:800; margin-top:10px}
/* seasons */
.season-band{background:var(--c); border:3px solid var(--ink); border-radius:26px; padding:14px 18px}
.special{display:grid; gap:18px}
.sp-day{background:var(--card); border:3px solid var(--ink); border-radius:26px; padding:16px; box-shadow:0 5px 0 var(--ink)}
.sp-h{display:flex; gap:14px; align-items:flex-start; margin-bottom:12px}
.sp-h span{font-size:2.6rem; line-height:1} .sp-h h3{font-size:1.5rem} .sp-h p{font-weight:600; color:var(--ink-soft)}
.gal-grid.mini{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
/* languages */
.lang-pick{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px}
.lang-btn{background:var(--card); border:3px solid var(--ink); border-radius:20px; padding:10px; text-decoration:none; display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center; box-shadow:0 4px 0 var(--ink); transition:transform .15s}
.lang-btn:hover{transform:translateY(-3px)}
.lang-btn[aria-pressed="true"]{background:var(--sun); box-shadow:0 6px 0 var(--ink); transform:translateY(-3px)}
.lang-btn .fl svg{width:74px; height:auto; border-radius:4px}
.lang-btn b{font-family:var(--display); font-weight:900} .lang-btn small{font-weight:700}
@media (max-width:640px){.lang-pick{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lwords{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px}
.lword{position:relative; background:var(--card); border:3px solid var(--ink); border-radius:22px; padding:14px 10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; font:inherit; box-shadow:0 5px 0 var(--ink); transition:transform .15s}
.lword:hover{transform:translateY(-3px) rotate(-1deg); background:var(--tint-sun)}
.lw-e{font-size:2.6rem} .lword b{font-family:var(--display); font-size:1.4rem} .lw-en{font-weight:700; color:var(--ink-soft)} .lword small{font-weight:700; color:var(--grape)}
.lword .w-sp{position:absolute; top:8px; right:10px; font-size:1.1rem}
.lcompare{margin-top:20px} .lcompare h3{margin-bottom:10px}
.ltable{display:grid; gap:6px}
.ltable > div{display:grid; grid-template-columns:40px repeat(5,minmax(0,1fr)); gap:6px; align-items:center}
.ltable button{text-align:left; background:var(--paper); border:2px solid var(--line); border-radius:10px; padding:4px 8px; color:var(--ink)}
.ltable small{display:block; color:var(--ink-soft); font-size:.72rem}
@media (max-width:700px){.ltable > div{grid-template-columns:30px repeat(2,minmax(0,1fr))} .ltable > div > :nth-child(n+4){display:none}}
.hello-strip{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px}
.hello{background:var(--card); border:2.5px solid var(--ink); border-radius:16px; padding:8px; cursor:pointer; display:flex; flex-direction:column; gap:2px; align-items:center; font:inherit}
.hello:hover{background:var(--tint-sun)}
.hello .fl svg{width:48px; height:auto; border-radius:3px}
.hello b{font-family:var(--display); font-size:1rem; text-align:center; line-height:1.15} .hello small{font-weight:700; color:var(--ink-soft); font-size:.8rem}
/* trace */
.tab-a{font-family:var(--display); font-weight:800; font-size:1.05rem; padding:.55em 1.1em; border:3px solid var(--ink); border-radius:999px; background:var(--card); text-decoration:none; min-height:48px; display:inline-flex; align-items:center}
.tab-a[aria-selected="true"]{background:var(--sun); box-shadow:0 4px 0 var(--ink)}
.tr-items{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px}
.tr-items .chip[aria-pressed="true"]{background:var(--sun)}
.tr-layout{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; align-items:start}
@media (max-width:820px){.tr-layout{grid-template-columns:minmax(0,1fr)}}
.tr-board canvas{width:100%; height:auto; display:block; border:3px dashed var(--line); border-radius:18px; touch-action:none; cursor:crosshair; background:#fff}
.tr-side h2{font-size:clamp(2rem,6vw,3rem)}
.tr-cols{display:flex; gap:8px; flex-wrap:wrap}
.tr-cols .sw{width:44px; height:44px}
.tr-btns{display:flex; flex-direction:column; gap:10px; margin-top:16px; align-items:flex-start}
/* think mini games */
.mini-p{text-align:center; font-weight:700; font-size:1.1rem; margin-bottom:12px}
.mem{display:grid; grid-template-columns:repeat(var(--cols),minmax(0,110px)); gap:10px; justify-content:center}
.mem-c{aspect-ratio:1; border:3px solid var(--ink); border-radius:18px; background:var(--grape); cursor:pointer; font-size:2.6rem; box-shadow:0 4px 0 var(--ink); transition:transform .25s, background .25s}
.mem-c span{visibility:hidden}
.mem-c.up{background:var(--card); transform:rotateY(0)} .mem-c.up span{visibility:visible}
.mem-c.ok{background:var(--tint-grass)}
.sort-items, .sizes-row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:flex-end; min-height:90px}
.sort-it, .sz, .seq-b{border:2.5px solid var(--ink); border-radius:16px; background:var(--card); padding:6px; cursor:pointer; box-shadow:0 4px 0 var(--ink); transition:transform .15s}
.sort-it.sel{background:var(--tint-sun); transform:translateY(-6px)}
.baskets{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:18px}
.basket{border:3px solid var(--ink); border-radius:22px; background:var(--card); padding:10px 14px; min-width:130px; cursor:pointer; box-shadow:0 5px 0 var(--bc); display:flex; flex-direction:column; align-items:center; gap:2px; font:inherit}
.basket span{font-size:2.2rem} .basket b{font-family:var(--display); text-transform:capitalize; color:var(--bc); -webkit-text-stroke:.4px var(--ink)}
.basket .in{display:flex; flex-wrap:wrap; gap:2px; justify-content:center; min-height:28px}
.line-up{display:flex; gap:10px; justify-content:center; align-items:flex-end; min-height:80px; margin-top:16px; border-top:3px dashed var(--line); padding-top:12px}
.seq-b{display:flex; flex-direction:column; align-items:center; font-size:2.6rem; min-width:90px} .seq-b small{font-size:.85rem; font-weight:800}
.seq-got{font-size:2.4rem; display:flex; flex-direction:column; align-items:center} .seq-got small{font-size:.9rem; font-weight:900; font-family:var(--display)}
/* music */
.inst-grid{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px}
.inst{border:3px solid var(--ink); border-radius:20px; background:var(--card); padding:10px 4px; cursor:pointer; display:flex; flex-direction:column; align-items:center; font:inherit; box-shadow:0 4px 0 var(--ink); transition:transform .15s}
.inst span{font-size:2.4rem} .inst b{font-family:var(--display); text-transform:capitalize; font-size:.9rem}
.inst.pop{transform:scale(1.12) rotate(-4deg); background:var(--tint-sun)}
@media (max-width:820px){.inst-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rh-dots{display:flex; gap:8px; justify-content:center; min-height:26px; margin:10px 0}
.rh-dots i{width:22px; height:22px; border-radius:50%; border:2.5px solid var(--ink); background:#fff} .rh-dots i.on{background:var(--tomato)}
.drum-pad{width:110px; height:110px; border-radius:50%; border:4px solid var(--ink); background:var(--tint-orange); font-size:3.4rem; cursor:pointer; box-shadow:0 6px 0 var(--ink); transition:transform .08s}
.drum-pad.hit{transform:scale(.92) translateY(4px); box-shadow:0 2px 0 var(--ink)}
.xylo{display:flex; gap:8px; justify-content:center; align-items:flex-end; height:170px; margin:12px 0}
.bar{width:52px; height:var(--h); background:var(--c); border:3px solid var(--ink); border-radius:14px; cursor:pointer; box-shadow:0 5px 0 var(--ink); transition:transform .1s, filter .1s}
.bar.lit{filter:brightness(1.35) saturate(1.2); transform:translateY(-8px)}
/* discover */
.facts{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px}
.fact{background:var(--card); border:3px solid var(--ink); border-left:12px solid var(--c); border-radius:20px; padding:12px 14px; display:flex; gap:10px; align-items:flex-start}
.fact-n{flex:none; width:30px; height:30px; border-radius:50%; background:var(--sun); border:2px solid var(--ink); display:grid; place-items:center; font-family:var(--display); font-weight:900}
.fact p{font-weight:700; flex:1}
.dg{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:18px; align-items:start}
.dg-svg{width:100%; max-height:380px; background:var(--paper); border:2.5px solid var(--line); border-radius:18px}
.dg-part{cursor:pointer; transition:opacity .2s}
.dg-part:hover, .dg-part:focus{outline:none; filter:brightness(1.1) drop-shadow(0 0 6px #fff)}
.dg-svg:has(.dg-part.on) .dg-part:not(.on){opacity:.35}
.dg-labels{display:flex; flex-wrap:wrap; gap:6px}
.dg-labels .chip[aria-pressed="true"]{background:var(--sun)}
.dg-info{margin-top:12px; font-weight:700; font-size:1.1rem; background:var(--tint-sun); border:2.5px solid var(--ink); border-radius:16px; padding:10px 14px}
@media (max-width:760px){.dg{grid-template-columns:minmax(0,1fr)}}
.match{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:560px; margin:0 auto}
.m-col{display:flex; flex-direction:column; gap:8px}
.m-pic, .m-word{border:3px solid var(--ink); border-radius:16px; background:var(--card); padding:8px; cursor:pointer; font:inherit; box-shadow:0 4px 0 var(--ink); min-height:58px}
.m-pic{font-size:2rem} .m-word{font-family:var(--display); font-weight:800; font-size:1.15rem}
.m-pic.sel{background:var(--tint-sun); transform:translateX(6px)}
.m-pic.ok, .m-word.ok{background:var(--tint-grass); box-shadow:none; opacity:.8}
/* about */
.made-by{margin-top:22px; background:linear-gradient(160deg,var(--tint-pink),var(--tint-sun)); border:3px solid var(--ink); border-radius:30px; padding:clamp(20px,4vw,34px); box-shadow:0 7px 0 var(--ink); position:relative}
.made-by h2{margin-top:0; font-size:clamp(1.8rem,4vw,2.4rem)}
.made-by p{font-size:1.15rem; font-weight:600}
.mb-quote{font-family:var(--display); font-weight:800; font-size:clamp(1.25rem,2.6vw,1.5rem) !important}
.mb-lines{display:flex; flex-direction:column; gap:2px; font-family:var(--display); font-weight:900; font-size:1.35rem !important; margin:8px 0 !important}
.mb-lines span:nth-child(1){color:#D8373C} .mb-lines span:nth-child(2){color:#B86200} .mb-lines span:nth-child(3){color:#177A4E} .mb-lines span:nth-child(4){color:#6D3FD9}
.made-end{font-family:var(--display); font-weight:900; font-size:1.5rem !important}
.mb-badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.mb-badges span{font-family:var(--display); font-weight:800; font-size:.95rem; background:var(--card); border:2.5px solid var(--ink); border-radius:999px; padding:.35em .9em; box-shadow:0 3px 0 var(--ink)}
.friends{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:10px}
.friend{background:var(--card); border:3px solid var(--ink); border-radius:22px; padding:10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px}
.friend img{width:100px; height:100px; object-fit:contain}
.friend b{font-family:var(--display); font-size:1.2rem} .friend small{font-weight:700; color:var(--grape)} .friend p{font-size:.88rem !important; color:var(--ink-soft)}
@media (max-width:760px){.friends{grid-template-columns:repeat(2,minmax(0,1fr))}}
.idea-form{display:grid; gap:8px; background:var(--card); border:3px solid var(--ink); border-radius:22px; padding:16px; margin-top:10px}
.idea-form textarea{resize:vertical; font:inherit}
@media print{ .learn-panel, .story-banner, .head-tools{display:none !important} }

.wx-map{max-width:900px; margin:0 auto}
@media (max-width:860px){ .hero{grid-template-columns:minmax(0,1fr)} }
.hero-ctas{flex-wrap:wrap}
.row .btn, .hero-ctas .btn{max-width:100%; white-space:normal; text-align:center}
.lp-row > div{min-width:0; flex:1}
@media (max-width:520px){ .lp-row{flex-direction:column} .lp-flag svg{width:96px} }
@media (max-width:560px){ .journey{gap:5px} .journey li{font-size:.8rem; padding:.2em .6em .2em .25em} .journey li:not(:last-child)::after{display:none} .wx-hero::after{display:none} }

/* ================= v4: platform, activities, home ================= */
.note-small{font-size:.92rem; font-weight:600; color:var(--ink-soft); margin-top:16px}
.search-btn{min-width:44px; justify-content:center}
.age-pick button{min-height:40px}
:focus-visible{outline:4px solid var(--sky); outline-offset:3px}
.view.show{animation:viewIn .28s ease-out}
@keyframes viewIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
/* search */
.big-search{display:flex; align-items:center; gap:10px; background:var(--card); border:3px solid var(--ink); border-radius:999px; padding:6px 18px; box-shadow:0 5px 0 var(--ink); margin-top:10px}
.big-search svg{width:28px; height:28px; flex:none} .big-search input{border:0; outline:0; font:inherit; font-size:1.2rem; font-weight:700; flex:1; min-width:0; min-height:44px; background:transparent}
.gs-group{margin-top:20px} .gs-group h2{font-size:1.3rem; margin-bottom:10px}
.gs-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px}
.gs-item{display:flex; align-items:center; gap:10px; background:var(--card); border:2.5px solid var(--ink); border-radius:16px; padding:10px 12px; text-decoration:none; color:inherit; font:inherit; text-align:left; cursor:pointer; flex-wrap:wrap; min-height:52px}
.gs-item span{font-size:1.5rem} .gs-item b{flex:1; min-width:0} .gs-item small{width:100%; font-weight:700; color:var(--ink-soft)}
.gs-item:hover{background:#FFF4CC}
/* friendly states */
.oops{text-align:center; padding:30px 0; display:flex; flex-direction:column; align-items:center; gap:14px}
.studio-loading{position:absolute; inset:auto 0 45% 0; margin:auto; width:max-content; max-width:90%; background:var(--card); border:3px solid var(--ink); border-radius:999px; padding:10px 20px; font-family:var(--display); font-weight:800; box-shadow:0 4px 0 var(--ink); z-index:3}
.canvas-wrap{position:relative}
/* stickers, badges, collections */
.sticker-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px}
.stk{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; background:var(--card); border:3px dashed var(--line); border-radius:22px; padding:12px}
.stk.got{border:3px solid var(--ink); box-shadow:0 5px 0 var(--ink)} .stk small{font-weight:700; color:var(--ink-soft)}
.sticker{width:100px; height:100px}
.stk.got .sticker{animation:stickIn .5s cubic-bezier(.3,1.6,.5,1)} @keyframes stickIn{from{transform:scale(.6) rotate(-12deg)}}
.coll-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px}
.coll{background:var(--card); border:3px solid var(--ink); border-radius:22px; box-shadow:0 5px 0 var(--ink); padding:12px; font:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:4px}
.coll.new{cursor:default; box-shadow:none; border-style:dashed}
.coll-pic{display:block; aspect-ratio:1; border-radius:14px; overflow:hidden; background:#F7F5FF; display:grid; place-items:center} .coll-pic svg{width:100%; height:100%} .coll-e{font-size:3rem}
.coll-pick{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.coll-new{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px} .coll-new input{flex:1; min-width:180px}
.coll-modal{max-width:560px}
.card-actions .coll-btn,[data-collect]{cursor:pointer}
.recs{margin-top:14px; padding-top:12px; border-top:2px dashed var(--line)} .recs p{font-weight:800; margin-bottom:8px}
/* quiz timer */
.qtimer{height:10px; background:#EEE9FB; border-radius:99px; overflow:hidden; margin-bottom:12px; border:2px solid var(--ink)} .qtimer i{display:block; height:100%; width:100%; background:var(--grass); transition:width 1s linear}
.timer-toggle{margin-left:auto}
.q-sw{display:inline-block; width:54px; height:54px; border-radius:50%; border:3px solid var(--ink)} .q-sw.big{width:84px; height:84px}
.q-group{display:inline-flex; padding:6px 10px; margin:4px; border:3px dashed var(--grape); border-radius:18px}
/* memory cards (rich) */
.mem-c.rich{font-size:1rem; padding:6px; display:grid; place-items:center}
.mem-c.rich .fl svg,.mem-c.rich svg{width:100%; height:auto; display:block}
.mem-c.ok{background:#DDF6E8}
.mem-name{font-family:var(--display); font-size:1.05rem; line-height:1.1} .mem-e{font-size:2.6rem}
/* jigsaw */
.jg-layout{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:20px; align-items:start}
.jg{display:grid; grid-template-columns:repeat(var(--n),1fr); gap:3px; background:var(--ink); border:3px solid var(--ink); border-radius:12px; overflow:hidden; aspect-ratio:1; max-width:560px; margin:auto}
.jg-p{border:0; padding:0; cursor:pointer; background-repeat:no-repeat; aspect-ratio:1; min-height:44px}
.jg-p.sel{outline:5px solid var(--sun); outline-offset:-5px} .jg-peek svg{width:100%; height:auto}
/* maze */
.mz-layout{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center}
#mzArt svg{width:100%; max-width:560px; display:block; margin:auto; touch-action:manipulation} #mzArt [data-cell]{cursor:pointer}
.mz-pad{display:grid; grid-template-columns:repeat(3,64px); gap:8px; justify-content:center} .mz-pad .btn{padding:0; min-height:64px; justify-content:center} .mz-dog{display:grid; place-items:center; font-size:2rem} .mz-dog img{width:60px; height:60px}
/* dots, spot the difference */
.dt-card svg{width:100%; max-width:600px; display:block; margin:auto} .dt-dot{cursor:pointer} .dt-dot:focus-visible circle:last-of-type{stroke:var(--sky); stroke-width:6}
.sd-pair{display:grid; grid-template-columns:1fr 1fr; gap:14px} .sd-svg{width:100%; border:3px solid var(--ink); border-radius:18px; background:#fff; cursor:crosshair}
.sd-marks circle{fill:none; stroke-width:6} .sd-marks .found{stroke:var(--grass)} .sd-marks .hint{stroke:var(--sun); stroke-dasharray:10 8}
/* pixel */
.px-layout{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; align-items:start}
.px-grid{display:grid; grid-template-columns:repeat(var(--n),1fr); border:3px solid var(--ink); max-width:560px; margin:auto; touch-action:none}
.px{aspect-ratio:1; border:1px solid #D8D2EA; background:#fff; font-weight:800; font-size:clamp(.55rem,1.6vw,.95rem); color:var(--ink-soft); padding:0; cursor:pointer; min-width:0}
.px-pal{display:flex; flex-wrap:wrap; gap:8px} .px-sw{width:48px; height:48px; border-radius:14px; border:3px solid var(--ink); background:var(--c); cursor:pointer; display:grid; place-items:center} .px-sw[aria-pressed="true"]{box-shadow:0 0 0 4px var(--sun)} .px-sw b{background:#fff; border-radius:8px; padding:0 6px}
/* rainbow */
.rb-svg{width:100%; max-width:560px; display:block; margin:auto}
.rb-pots{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:12px}
.rb-pot{display:flex; flex-direction:column; align-items:center; gap:4px; background:var(--card); border:3px solid var(--ink); border-radius:18px; padding:8px 12px; font-family:var(--display); font-weight:800; cursor:pointer; min-width:64px; min-height:64px} .rb-pot i{width:34px; height:34px; border-radius:50%; background:var(--c); border:3px solid var(--ink)} .rb-pot:disabled{opacity:.35}
/* landmarks, animals */
.lm-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
.lm-card{display:flex; flex-direction:column; gap:10px; background:var(--card); border:3px solid var(--ink); border-radius:24px; padding:14px; box-shadow:0 5px 0 var(--ink)}
.lm-art{border:0; padding:0; background:#F7F5FF; border-radius:16px; overflow:hidden; cursor:pointer} .lm-art svg{width:100%; height:auto; display:block}
.lm-card h3{font-size:1.25rem}
.ax-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}
.ax{background:var(--card); border:3px solid var(--ink); border-radius:22px; padding:14px; box-shadow:0 5px 0 var(--ink); display:flex; flex-direction:column; gap:6px}
.ax-e{font-size:2.8rem; line-height:1} .ax-meta{font-weight:700; color:var(--ink-soft); font-size:.95rem}
/* creators */
.cr-layout,.sm-layout{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:20px; align-items:start}
.cr-stage{display:flex; flex-direction:column; gap:12px} #crArt svg{width:100%; height:auto; display:block; border-radius:16px}
.cr-tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.cr-tabs button{font-family:var(--display); font-weight:800; border:2.5px solid var(--ink); background:var(--card); border-radius:999px; padding:.35em .9em; min-height:42px; cursor:pointer} .cr-tabs button[aria-selected="true"]{background:var(--sun)}
.cr-opts{display:flex; flex-wrap:wrap; gap:8px; min-height:60px; padding:10px; background:#F7F5FF; border-radius:16px}
.cr-opts .sw{width:46px; height:46px} .cr-opts .sw[aria-pressed="true"],.tr-cols .sw[aria-pressed="true"]{box-shadow:0 0 0 4px var(--sun)}
.cr-name{margin:14px 0} .cr-name .row{flex-wrap:nowrap} .cr-name input{flex:1; min-width:0}
/* story maker */
.sm-row{border:0; padding:0; margin:0 0 10px} .sm-row .chip-row{gap:6px}
.sm-art svg{width:100%; height:auto; display:block; border-radius:16px; border:3px solid var(--ink)}
.sm-out h2{margin:12px 0 6px} .sm-text p{font-size:1.12rem; font-weight:600; line-height:1.55; margin-bottom:6px}
/* rangoli, calm, creative, weekly */
.rg-intro p{margin-top:8px; line-height:1.6}
.calm-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:20px; align-items:start}
.calm-breathe{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; background:#EAF6FF}
.bubble-wrap{width:200px; height:200px; display:grid; place-items:center}
.breath{width:90px; height:90px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff,#9CC9FF); border:4px solid var(--ink)}
.breath.on{animation:breathe 8s ease-in-out infinite} @keyframes breathe{0%,100%{transform:scale(1)} 50%{transform:scale(2)}}
.breath-t{font-family:var(--display); font-weight:800; font-size:1.3rem; min-height:1.6em}
.calm-links{grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:0}
.cc-card{background:linear-gradient(135deg,#FFF4CC,#FFE3F2); border:3px solid var(--ink); border-radius:28px; padding:20px; box-shadow:0 6px 0 var(--ink); display:flex; flex-direction:column; gap:10px}
.cc-card .prompt{font-family:var(--display); font-weight:800; font-size:clamp(1.3rem,3vw,1.8rem); line-height:1.25}
.cc-saved{display:flex; flex-direction:column; gap:8px} .cc-item{display:flex; justify-content:space-between; gap:10px; align-items:center; background:var(--card); border:2.5px solid var(--ink); border-radius:16px; padding:8px 12px} .cc-item .linkish{text-align:left; font-size:1.05rem}
.wk-grid{display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:12px}
.wk{background:var(--c); border:3px solid var(--ink); border-radius:20px; padding:12px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; justify-content:space-between}
.wk b{font-family:var(--display); font-weight:900} .wk-pic{border:0; padding:0; background:#fff; border-radius:12px; overflow:hidden; width:100%; cursor:pointer} .wk-pic svg{width:100%; height:auto; display:block} .wk span{font-weight:700; font-size:.9rem}
/* continents */
.ct-top{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; align-items:start} .ct-facts ul{margin:10px 0 0 18px; line-height:1.6; font-weight:600}
/* color lab learn + match */
.lab-quiz-link{display:flex; gap:8px; flex-wrap:wrap; margin:-6px 0 16px}
.cl-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.cl-card h2{font-size:1.4rem; margin:4px 0 8px} .cl-card p{line-height:1.55; margin-bottom:10px}
.cl-row{display:flex; flex-wrap:wrap; gap:12px} .cl-item{display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:0; font:inherit; cursor:pointer; padding:4px}
.cl-sw{display:inline-block; width:52px; height:52px; border-radius:50%; border:3px solid var(--ink); vertical-align:middle; flex:none}
.cl-eq{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0; font-weight:800} .cl-eq b{flex:1; min-width:140px}
.cl-ramp{display:flex; border:3px solid var(--ink); border-radius:14px; overflow:hidden; margin-bottom:10px} .cl-ramp span{flex:1; height:44px}
.cl-two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.cl-wheel{width:220px; max-width:100%; display:block; margin:auto}
.ml-card .chip-row{margin-bottom:6px} .ml-lv,.ml-tries{font-weight:700; color:var(--ink-soft)}
.ml-top{display:flex; justify-content:center; gap:clamp(20px,6vw,60px); margin:16px 0; flex-wrap:wrap}
.ml-col{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center}
.ml-sw{width:130px; height:130px; border-radius:50%; border:4px solid var(--ink); display:grid; place-items:center; font-size:2.4rem} .ml-sw.empty{background:repeating-linear-gradient(45deg,#fff,#fff 10px,#f1eefb 10px,#f1eefb 20px)}
.ml-pots{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin-bottom:16px}
.ml-pot{display:flex; align-items:center; gap:8px; background:#F7F5FF; border-radius:16px; padding:8px 10px} .ml-pot b{flex:1} .ml-pot .tin{width:34px; height:34px; border-radius:50%; border:3px solid var(--ink)} .ml-pot .btn{min-width:44px; justify-content:center; font-size:1.3rem}
.ml-n{font-family:var(--display); font-weight:900; font-size:1.3rem; min-width:1.6em; text-align:center}
/* discover extras */
.disc-list{margin:10px 0 12px 20px; line-height:1.6; font-weight:600}
/* home bands */
.surprise-band,.about-band,.explore-band{display:flex; align-items:center; gap:22px; border:3px solid var(--ink); border-radius:32px; padding:clamp(18px,3vw,30px); box-shadow:0 6px 0 var(--ink)}
.surprise-band{background:linear-gradient(120deg,#ECE3FF,#FFE3F2)} .surprise-band img{width:110px; height:110px; flex:none} .surprise-band div{flex:1} .surprise-band h2{font-size:clamp(1.6rem,3vw,2.1rem)}
.explore-band{background:#DDF6E8; align-items:stretch} .eb-text{flex:1.2; display:flex; flex-direction:column; gap:12px} .eb-text h2{font-size:clamp(1.4rem,3vw,2rem); line-height:1.2} .eb-map{flex:1; display:flex; align-items:center} .eb-map svg{width:100%; height:auto}
.lab-band{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px}
.about-band{background:#FFF4CC} .about-band > div:first-child{flex:1.3; display:flex; flex-direction:column; gap:10px; align-items:flex-start} .about-band .mb-badges{flex:1}
.why-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin:12px 0 20px} .why-list div{background:var(--card); border:2.5px solid var(--ink); border-radius:18px; padding:12px 14px; display:flex; flex-direction:column; gap:4px} .why-list span{font-weight:600; color:var(--ink-soft)}
.foot-lang{display:flex; align-items:center; gap:8px; margin-top:12px; font-weight:800} .foot-lang select{min-height:44px; width:auto}
@media (max-width:980px){.lab-band{grid-template-columns:repeat(2,minmax(0,1fr))} .wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .wk-grid .wk:first-child{grid-column:1/-1} .cl-grid{grid-template-columns:minmax(0,1fr)} .calm-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.jg-layout,.px-layout,.cr-layout,.sm-layout,.calm-grid,.ct-top{grid-template-columns:minmax(0,1fr)} .mz-layout{grid-template-columns:minmax(0,1fr)} .explore-band,.about-band{flex-direction:column; align-items:stretch} .surprise-band{flex-wrap:wrap; justify-content:center; text-align:center}}
@media (max-width:520px){.sd-pair{grid-template-columns:minmax(0,1fr)} .lab-band,.calm-links{grid-template-columns:minmax(0,1fr)} .cl-two{grid-template-columns:minmax(0,1fr)} .surprise-band img{width:80px; height:80px} .ml-sw{width:100px; height:100px}}
@media (prefers-reduced-motion: reduce){.view.show{animation:none} .breath.on{animation:none; transform:scale(1.5)}}
.wk .btn,.lm-card .btn,.ax .btn{white-space:normal; max-width:100%; text-align:center}
/* coins, streaks and treasure pictures */
.reward-chips{display:inline-flex; gap:6px; align-items:center; text-decoration:none}
.reward-chips .rc{display:inline-flex; align-items:center; border:3px solid var(--ink); border-radius:999px; background:#fff; padding:5px 11px; font-weight:900; font-size:.95rem; color:var(--ink); box-shadow:0 3px 0 var(--ink); white-space:nowrap}
.reward-chips .rc.coin{background:#FFE9A8}
.reward-chips .rc.fire{background:#fff} .reward-chips .rc.fire.on{background:#FFD9C2}
.reward-chips:hover .rc{transform:translateY(-2px)}
@media(max-width:700px){.reward-chips .rc{padding:4px 8px; font-size:.85rem}}
.gcard.locked .pic svg,.gcard.locked .pic .ph{filter:grayscale(1) brightness(1.05) contrast(.9); opacity:.55}
.lock-badge{position:absolute; left:10px; top:10px; z-index:3; background:#2B2340; color:#FFE08A; font-weight:900; font-size:.9rem; padding:5px 11px; border-radius:999px; border:2px solid #fff; box-shadow:0 3px 0 rgba(0,0,0,.25)}
.coin-pop{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:8px 0; padding:10px 14px; background:#FFF4CC; border:3px solid var(--ink); border-radius:18px; animation:coinPop .6s ease both}
.coin-pop.quiet{background:#F1EEF9; font-weight:700}
.coin-pop b{font-size:1.4rem} .coin-pop small{font-weight:800; color:var(--ink-soft)}
.coin-big{font-size:2rem; display:inline-block; animation:coinSpin 1.2s ease both}
.streak-pop{margin:8px 0; padding:9px 14px; background:#FFE3D4; border:3px solid var(--ink); border-radius:16px; font-weight:700}
.streak-pop.hit{background:#DDF6E8}
@keyframes coinPop{0%{transform:scale(.6); opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1); opacity:1}}
@keyframes coinSpin{0%{transform:rotateY(0)}100%{transform:rotateY(720deg)}}
@media(prefers-reduced-motion:reduce){.coin-pop,.coin-big{animation:none}}
.unlock-card{max-width:440px; text-align:center}
.unlock-pic{position:relative; width:min(260px,70%); aspect-ratio:1; margin:0 auto 10px; border:3px solid var(--ink); border-radius:18px; background:#fff; padding:8px; overflow:hidden}
.unlock-pic svg,.unlock-pic img{width:100%; height:100%; filter:grayscale(1); opacity:.5}
.unlock-lock{position:absolute; inset:0; display:grid; place-items:center; font-size:3.4rem}
.rw-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0}
@media(max-width:600px){.rw-grid{grid-template-columns:1fr}}
.rw-coins,.rw-streak{display:flex; gap:16px; align-items:center; padding:20px}
.rw-coins{background:#FFF4CC} .rw-streak{background:#FFE3D4}
.rw-big{font-size:3.2rem} .rw-num{font-family:Grandstander,sans-serif; font-weight:900; font-size:3rem; line-height:1}
.rw-num small{font-size:1.1rem}
.rw-goal{padding:22px; margin-bottom:10px} .rw-goal h2{margin-bottom:6px}
.streak-days{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:14px 0}
.sd{display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px; border:3px solid var(--line); border-radius:14px; background:#faf9ff; font-weight:800}
.sd span{font-size:1.4rem} .sd small{font-size:.72rem; color:var(--ink-soft)}
.sd.on{background:#FFE3D4; border-color:var(--ink)} .sd.today{border-color:var(--ink); border-style:dashed}
.sd.today.on{border-style:solid}
.goal-bar{height:20px; border:3px solid var(--ink); border-radius:999px; background:#fff; overflow:hidden}
.goal-bar i{display:block; height:100%; background:linear-gradient(90deg,#FFC93D,#FF9F1C); border-right:3px solid var(--ink); border-radius:0 999px 999px 0; min-width:0; transition:width .5s}
.goal-bar i[style*="width:0%"]{border-right:0}
.goal-bar.mini{height:14px}
.goal-txt{margin:10px 0 14px; font-weight:700}
.goal-pick{display:flex; flex-wrap:wrap; gap:8px; align-items:center} .goal-pick span{font-weight:900; margin-right:4px}
.rw-note{display:block; margin-top:12px; color:var(--ink-soft); font-weight:700}
.rw-how{padding:22px} .rw-how ol{margin:10px 0 10px 22px; display:grid; gap:8px; font-weight:700}
.rw-band{display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; text-decoration:none; color:var(--ink); background:linear-gradient(90deg,#FFF4CC,#FFE3D4); border:3px solid var(--ink); border-radius:24px; padding:16px 22px; box-shadow:0 5px 0 var(--ink)}
.rw-band:hover{transform:translateY(-3px)}
.rb-l{display:flex; gap:12px; align-items:center} .rb-l b{font-size:1.3rem; display:block} .rb-l small,.rb-m small{font-weight:800; color:var(--ink-soft)}
.rb-coin{font-size:2.4rem}
.rb-m{display:grid; gap:6px}
@media(max-width:700px){.rw-band{grid-template-columns:1fr; gap:10px}}
@media(max-width:700px){
  .head-tools{flex-wrap:wrap; justify-content:flex-start; row-gap:8px; max-width:100%}
  .age-pick button{white-space:nowrap} .age-pick .ap-l{display:none}
  .reward-chips{flex:0 0 auto}
}
.cw-form{display:grid; gap:6px; max-width:620px}
.cw-form .field-label{margin-top:8px}
.cw-note{color:var(--ink-soft); font-weight:700; margin:0 0 4px}
.cw-err{color:#B3261E; font-weight:800; min-height:0}
.cw-err:empty{display:none}
.cw-form [aria-invalid="true"]{border-color:#B3261E}
.cw-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.cw-status{margin:10px 0 0; font-weight:800; min-height:1.2em}
.cw-status.ok{color:#1E7B3A; background:#DDF6E8; border:3px solid var(--ink); border-radius:14px; padding:10px 14px}
.cw-status.bad{color:#B3261E; background:#FFE3E0; border:3px solid var(--ink); border-radius:14px; padding:10px 14px}
.cw-status:empty{display:none}

/* ===== Optional family accounts (appended to style-v4.css) ===== */
.cwa-hdr{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cwa-hdr .cwa-lv{font-family:var(--display);font-weight:800;font-size:.85rem;background:var(--tint-sun);border:2px solid var(--ink);border-radius:999px;padding:0 .5em;line-height:1.5}
@media (max-width:640px){.cwa-hdr .cwa-hdr-t{display:none}}
.cwa-av{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--tint-sun);border:2.5px solid var(--ink);overflow:hidden;flex:none}
.cwa-av img{width:100%;height:100%;object-fit:cover}
.cwa-av-e{font-size:1.5em;line-height:1}
.cwa-av.sm{width:30px;height:30px;border-width:2px}.cwa-av.sm .cwa-av-e{font-size:1.05rem}
.cwa-av.md{width:56px;height:56px}
.cwa-av.lg{width:84px;height:84px}.cwa-av.lg .cwa-av-e{font-size:2.6rem}
.cwa-av.xl{width:112px;height:112px;border-width:3px}.cwa-av.xl .cwa-av-e{font-size:3.6rem}
.cwa-modal{width:min(560px,100%);position:relative;padding-top:8px}
#cwaModal .modal{background:var(--card);border:3px solid var(--ink);border-radius:30px;box-shadow:0 8px 0 var(--ink);padding:22px;max-height:calc(100vh - 32px);overflow:auto}
.cwa-x{position:absolute;top:12px;right:12px}
.cwa-modal h2{font-family:var(--display);margin:0 56px 6px 0;font-size:1.6rem}
.cwa-for{font-weight:800;color:var(--ink-soft);margin:0 0 12px}
.cwa-small{color:var(--ink-soft);font-size:.95rem}
.cwa-form{display:grid;gap:12px;margin:10px 0}
.cwa-form label{display:grid;gap:6px;font-weight:800}
.cwa-form label small{font-weight:600;color:var(--ink-soft)}
.cwa-form input[type=text],.cwa-form input:not([type]),.cwa-form input[type=email],.cwa-form input[type=password]{font:inherit;font-size:1.05rem;min-height:48px;padding:.5em .8em;border:2.5px solid var(--ink);border-radius:var(--r-sm);background:#fff;color:var(--ink)}
.cwa-form input:focus-visible,.cwa-kid:focus-visible,.cwa-avpick input:focus-visible+.cwa-av,.cwa-agepick input:focus-visible+span,.cwa-table tr:focus-visible{outline:4px solid var(--sky);outline-offset:2px}
.cwa-pin{letter-spacing:.5em;text-align:center;font-size:1.6rem!important;max-width:240px}
.cwa-check{display:flex!important;grid-template-columns:none;align-items:flex-start;gap:10px!important;font-weight:700!important}
.cwa-check input{width:26px;height:26px;flex:none;margin-top:2px;accent-color:var(--grape)}
.cwa-msg{min-height:1.2em;margin:0;font-weight:800;color:#C2272D}
.cwa-msg.ok{color:#14804A}
.cwa-hint{margin:-6px 0 0;font-weight:700;min-height:1.2em}.cwa-hint.ok{color:#14804A}.cwa-hint.bad{color:#C2272D}
.cwa-links{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:8px 0 0}
.cwa-link{background:none;border:0;padding:6px 2px;min-height:44px;font:inherit;font-weight:800;color:#2563c9;text-decoration:underline;cursor:pointer}
.cwa-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.cwa-busy{opacity:.6;cursor:progress}
.btn.tomato{background:var(--tomato);color:#fff}
.cwa-kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;margin:12px 0}
.cwa-kid{display:grid;justify-items:center;gap:6px;padding:14px 8px;border:3px solid var(--ink);border-radius:var(--r-md);background:var(--card);box-shadow:var(--pop);cursor:pointer;font:inherit;min-height:150px}
.cwa-kid b{font-family:var(--display);font-size:1.25rem}
.cwa-kid small{color:var(--ink-soft);font-weight:700}
.cwa-kid.on{background:var(--tint-grass)}
.cwa-kid:hover{transform:translateY(-2px)}
.cwa-avs,.cwa-ages{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.cwa-avs legend,.cwa-ages legend{font-weight:800;margin-bottom:6px;width:100%}
.cwa-avpick,.cwa-agepick{position:relative;cursor:pointer}
.cwa-avpick input,.cwa-agepick input{position:absolute;opacity:0;width:1px;height:1px}
.cwa-avpick .cwa-av{width:56px;height:56px}
.cwa-avpick input:checked+.cwa-av{box-shadow:0 0 0 4px var(--grape);background:var(--tint-grape)}
.cwa-agepick span{display:inline-grid;place-items:center;min-width:72px;min-height:48px;padding:0 14px;border:2.5px solid var(--ink);border-radius:999px;font-weight:800;background:#fff}
.cwa-agepick input:checked+span{background:var(--sun)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cwa-card{margin-top:18px}
.cwa-card h2{font-family:var(--display);margin-top:0}
.cwa-card h2 small{font-family:var(--body);font-size:.9rem;color:var(--ink-soft)}
.cwa-alert{background:var(--tint-sun)}
.cwa-ul{padding-left:1.1em;line-height:1.7}
.cwa-kidlist{display:grid;gap:10px;margin-bottom:14px}
.cwa-kidrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px;border:2px solid var(--line);border-radius:var(--r-md)}
.cwa-kidinfo{display:grid;flex:1 1 160px}
.cwa-kidinfo b{font-family:var(--display);font-size:1.2rem}
.cwa-kidinfo small{color:var(--ink-soft);font-weight:700}
.cwa-kidbtns{display:flex;flex-wrap:wrap;gap:6px}
.cwa-inline{grid-template-columns:1fr;max-width:520px}
.cwa-danger{margin-top:16px;border-top:2px dashed var(--line);padding-top:12px}
.cwa-danger summary{font-weight:800;color:#C2272D;cursor:pointer;min-height:44px;display:flex;align-items:center}
.cwa-hero{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:10px}
.cwa-hero-t{flex:1 1 220px}
.cwa-lvname{font-family:var(--display);font-size:clamp(1.4rem,4vw,2rem);font-weight:800}
.cwa-bar{height:26px;border:3px solid var(--ink);border-radius:999px;background:var(--tint-grape);overflow:hidden;margin:10px 0 6px}
.cwa-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sun),var(--bubble),var(--grape));border-radius:999px;transition:width .6s}
.cwa-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:18px}
.cwa-stat{display:grid;justify-items:center;text-align:center;gap:2px;padding:14px 8px;background:var(--card);border:3px solid var(--ink);border-radius:var(--r-md);box-shadow:var(--pop)}
.cwa-si{font-size:2rem}
.cwa-stat b{font-family:var(--display);font-size:1.8rem;line-height:1.1}
.cwa-stat span:last-child{font-weight:700;color:var(--ink-soft)}
.cwa-chips{display:flex;flex-wrap:wrap;gap:8px}
.cwa-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:2.5px solid var(--ink);border-radius:999px;background:var(--tint-sky);font-weight:800;font-size:1.05rem}
.cwa-chip b{background:#fff;border-radius:999px;padding:0 .5em}
.cwa-art{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.cwa-art figure{margin:0;border:3px solid var(--ink);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.cwa-art img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.cwa-art figcaption{padding:4px 8px;font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cwa-invite{background:var(--tint-grass)}
.cwa-lvl-pop{font-size:5rem;line-height:1;margin:6px 0 12px;animation:cwaPop .8s ease-out}
@keyframes cwaPop{0%{transform:scale(.2) rotate(-20deg)}70%{transform:scale(1.15) rotate(6deg)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.cwa-lvl-pop{animation:none}.cwa-bar i{transition:none}.cwa-kid:hover{transform:none}}
.cwa-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:0 18px}
.cwa-chart{width:100%;height:auto;display:block}
.cwa-top{padding-left:1.4em;margin:0}
.cwa-top li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px solid var(--line)}
.cwa-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cwa-table{border-collapse:collapse;width:100%;min-width:640px;font-size:.95rem}
.cwa-table th,.cwa-table td{text-align:left;padding:8px;border-bottom:1px solid var(--line)}
.cwa-table tbody tr{cursor:pointer}
.cwa-table tbody tr:hover{background:var(--tint-sky)}
.cwa-table tr.off{color:var(--ink-soft)}
.cwa-mfa img{display:block;margin:10px 0;background:#fff;border:3px solid var(--ink);border-radius:var(--r-sm)}
.cwa-mfa code{word-break:break-all}
.cwa-captcha{min-height:66px}

/* ===================== BRAIN PUZZLES ===================== */
.pz-head .eyebrow a{text-decoration:none}
.pz-host .mochi,.pzb-mochi .mochi{width:92px;height:auto;flex:none}
.pz-root{min-height:320px}
.pz-loading{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink-soft);padding:24px 0}
.pz-loading .mochi{width:56px;height:auto}
.pz-band-link{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,#FFF4CC,#ECE3FF);border:3px solid var(--ink);border-radius:24px;box-shadow:0 6px 0 var(--ink);padding:12px 18px;text-decoration:none;transition:transform .2s}
.pz-band-link:hover{transform:translateY(-2px)}
.pzb-mochi .mochi{width:70px}
.pzb-text{display:flex;flex-direction:column;flex:1;min-width:0}
.pzb-text b{font-family:var(--display);font-size:1.35rem}
.pzb-text small{color:var(--ink-soft);font-weight:700}
@media (max-width:520px){.pz-band-link{flex-wrap:wrap}.pzb-mochi .mochi{width:52px}}
.pz-today-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.pz-sub{color:var(--ink-soft);font-weight:700;margin-top:4px}
.pz-total{font-family:var(--display);font-weight:800;background:var(--card);border:2.5px solid var(--ink);border-radius:999px;padding:.35em 1em;display:flex;gap:8px;align-items:center}
.pz-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.pz-card{background:var(--c);border:3px solid var(--ink);border-radius:24px;box-shadow:0 6px 0 var(--ink);padding:16px;display:flex;flex-direction:column;gap:8px}
.pz-card-top{display:flex;gap:10px;align-items:center}
.pz-card h3{font-size:1.3rem}
.pz-card small{color:var(--ink-soft);font-weight:800}
.pz-card p{font-weight:600;flex:1}
.pz-emoji{font-size:2.2rem;line-height:1}
.pz-card-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.pz-card-btns{display:flex;gap:6px}
.pz-tag{font-family:var(--display);font-weight:800;font-size:.85rem;border:2px solid var(--ink);border-radius:999px;padding:.1em .7em;background:#fff}
.pz-tag.go{background:var(--tint-sky)}
.pz-stars{display:inline-flex;gap:1px;font-size:1.1rem;line-height:1}
.pz-stars i{font-style:normal;color:#D9D3EA;-webkit-text-stroke:1px var(--ink)}
.pz-stars i.on{color:#FFC93D}
.pz-stars.big{font-size:2.6rem}
.pz-bigger{margin-top:18px}
.pz-bigger summary{font-family:var(--display);font-weight:800;cursor:pointer;min-height:44px;display:flex;align-items:center}
.pz-bigger .pz-cards{margin-top:10px}
.pz-all{display:flex;flex-direction:column;gap:12px}
.pz-allrow{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;background:var(--c);border:3px solid var(--ink);border-radius:20px;padding:12px 14px}
.pz-allname{display:flex;align-items:center;gap:8px;min-width:200px}
.pz-allname span{font-size:1.8rem}
.pz-allname b{font-family:var(--display);font-size:1.15rem}
.pz-allname small{color:var(--ink-soft);font-weight:800}
.pz-allsizes{display:flex;gap:14px;flex-wrap:wrap;flex:1}
.pz-band{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pz-band>small{font-weight:800;color:var(--ink-soft);width:100%}
.pz-sizepair{display:inline-flex}
.pz-sizepair .chip:first-child{border-radius:999px 0 0 999px}
.pz-sizepair .chip.ghost{border-radius:0 999px 999px 0;border-left:0;background:#fff}
.pz-parents ul{margin:8px 0 0;padding-left:20px;font-weight:600}
.pz-parents li{margin:4px 0}
.pz-pack{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;background:linear-gradient(120deg,#FFF4CC,#ECE3FF)}
.pz-pack p{font-weight:600;max-width:60ch}

/* game screen */
.pz-bar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.pz-sizes{display:flex;gap:6px;flex-wrap:wrap}
.pz-sizes .chip{flex-direction:column;gap:0;line-height:1.1;padding:.35em .9em}
.pz-sizes .chip small{font-family:var(--body);font-size:.72rem;font-weight:800;color:var(--ink-soft)}
.pz-sizes .chip[aria-pressed="true"]{background:var(--sun);box-shadow:0 3px 0 var(--ink)}
.pz-daybox{display:flex;flex-direction:column;text-align:right}
.pz-daybox b{font-family:var(--display);font-size:1.1rem}
.pz-daybox small{font-weight:700;color:var(--ink-soft)}
@media (max-width:600px){.pz-daybox{text-align:left}}
.pz-how{background:var(--card);border:3px solid var(--ink);border-radius:20px;margin:6px 0 14px;box-shadow:0 4px 0 var(--ink)}
.pz-how>summary{font-family:var(--display);font-weight:800;font-size:1.1rem;padding:10px 16px;cursor:pointer;min-height:48px;display:flex;align-items:center}
.pz-how-body{padding:0 16px 16px}
.pz-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.pz-steps li{background:var(--tint-sun);border:2.5px solid var(--ink);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;font-weight:700}
.pz-how[open] .pz-steps li{animation:pz-in .5s both;animation-delay:calc(var(--d) * .9s)}
.pz-tip{margin:12px 0 10px;font-weight:700;color:var(--ink-soft)}
.pz-mini .mg{display:grid;grid-template-columns:repeat(var(--n),26px);gap:2px}
.pz-mini .mg i{width:26px;height:26px;border:2px solid var(--ink);border-radius:5px;background:#fff;position:relative;display:block}
.pz-mini .mg i.f{background:var(--ink)}
.pz-mini .mg i.nap::after{content:"🐱";position:absolute;inset:0;display:grid;place-items:center;font-size:15px}
.pz-mini .mg i.xx::after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:900;color:var(--ink-soft)}
.pz-mini .mg i.s1::after,.pz-mini .mg i.s2::after,.pz-mini .mg i.s3::after,.pz-mini .mg i.s4::after{position:absolute;inset:0;display:grid;place-items:center;font-size:15px}
.pz-mini .mg i.s1::after{content:"●";color:#E8473B}.pz-mini .mg i.s2::after{content:"■";color:#2D7DD2}.pz-mini .mg i.s3::after{content:"▲";color:#1E9E5A}.pz-mini .mg i.s4::after{content:"★";color:#F5B400}
.pz-mini .mg i.d1,.pz-mini .mg i.d2{background:#fff}
.pz-mini .mg i.d1::after,.pz-mini .mg i.d2::after{content:"";position:absolute;inset:4px;border-radius:50%;border:2px solid var(--ink)}
.pz-mini .mg i.d1::after{background:#E8473B}.pz-mini .mg i.d2::after{background:#2D7DD2;border-radius:3px}
.pz-mini .mg i.l1{background:#F8B4AE}.pz-mini .mg i.l2{background:#A9CBEF}
.pz-mini .mg i[class*="t"]:not(.gap){background:var(--tint-grape)}
.pz-mini .mg i.gap{background:repeating-linear-gradient(45deg,#eee 0 4px,#fff 4px 8px)}
.pz-mini .mg i.t1::after{content:"1"}.pz-mini .mg i.t2::after{content:"2"}.pz-mini .mg i.t3::after{content:"3"}.pz-mini .mg i.t4::after{content:"4"}.pz-mini .mg i.t5::after{content:"5"}.pz-mini .mg i.t6::after{content:"6"}.pz-mini .mg i.t7::after{content:"7"}.pz-mini .mg i.t8::after{content:"8"}
.pz-mini .mg i[class*="t"]::after{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:13px}
.pz-how[open] .pz-mini .pop{animation:pz-pop 1.2s both;animation-delay:calc(var(--d, 0) * .9s + .4s)}
.pz-steps li:nth-child(1) .pop{--d:0}.pz-steps li:nth-child(2) .pop{--d:1}.pz-steps li:nth-child(3) .pop{--d:2}
.pz-mini .mg i.rg0{background:#FBD9A6}.pz-mini .mg i.rg1{background:#C6E5F7}.pz-mini .mg i.rg2{background:#BFE8D3}
@keyframes pz-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pz-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}

.pz-play{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:18px;align-items:start}
@media (max-width:820px){.pz-play{grid-template-columns:1fr}}
.pz-board-col{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.pz-board{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.pz-status{display:flex;gap:14px;font-weight:800;color:var(--ink-soft);flex-wrap:wrap;justify-content:center}
.pz-timer{font-variant-numeric:tabular-nums}
.pz-msg{min-height:3.2em;width:100%;max-width:560px;background:var(--card);border:2.5px solid var(--line);border-radius:16px;padding:10px 14px;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pz-msg.hint{border-color:var(--sun);background:#FFFBEA}
.pz-msg.oops{border-color:#E07A3E;background:#FFF3EA}
.pz-msg.good{border-color:var(--grass);background:#EEFBF4}
.pz-tools{display:flex;flex-direction:column;gap:8px;position:sticky;top:90px}
.pz-tools .btn{width:100%;justify-content:flex-start}
.pz-tools .btn:disabled{opacity:.45;cursor:not-allowed}
.pz-hintcount{font-weight:800;color:var(--ink-soft);text-align:center}
@media (max-width:820px){.pz-tools{position:static;display:grid;grid-template-columns:repeat(3,1fr)}.pz-tools .btn{justify-content:center;padding-inline:.5em}.pz-hintcount,.pz-settings{grid-column:1 / -1}}
@media (max-width:420px){.pz-tools{grid-template-columns:repeat(2,1fr)}}
.pz-settings{background:var(--card);border:2.5px solid var(--ink);border-radius:16px}
.pz-settings summary{font-family:var(--display);font-weight:800;padding:8px 12px;cursor:pointer;min-height:44px;display:flex;align-items:center}
.pz-settings>div{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.pz-opt{display:flex;gap:8px;align-items:flex-start;font-weight:700;font-size:.95rem;flex-wrap:wrap}
.pz-opt input{width:22px;height:22px;flex:none;accent-color:var(--grape)}
.pz-opt .chip{min-height:36px;padding:.2em .7em;font-size:.9rem}
.pz-opt .chip[aria-pressed="true"]{background:var(--sun)}
.pz-days{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px}
.pz-day{flex:none;min-width:96px;min-height:64px;border:2.5px solid var(--ink);border-radius:16px;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font:inherit}
.pz-day b{font-family:var(--display);font-size:.95rem}
.pz-day small{color:var(--ink-soft);font-weight:700;font-size:.78rem}
.pz-day.on{background:var(--sun);box-shadow:0 3px 0 var(--ink)}

/* grids: big touch targets, sized to fit a 375px phone */
.pz-grid{--gap:3px;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:var(--gap);width:min(100%,calc(var(--n) * 64px));touch-action:none;user-select:none;-webkit-user-select:none;background:var(--ink);border:4px solid var(--ink);border-radius:14px;padding:0;overflow:hidden}
.pz-cell{aspect-ratio:1;border:0;padding:0;margin:0;background:#fff;display:grid;place-items:center;cursor:pointer;position:relative;font:inherit;min-width:0;min-height:30px}
.pz-cell:focus-visible{outline:4px solid var(--sky);outline-offset:-4px;z-index:2;border-radius:6px}
.pz-cell .xm{font-weight:900;font-size:clamp(14px,4.2vw,26px);color:#6E6489}
.pz-cell.auto-x .xm{opacity:.35}
.pz-cell.hint{box-shadow:inset 0 0 0 4px var(--sun),inset 0 0 0 7px var(--ink);animation:pz-pulse 1.2s ease-in-out 3}
.pz-cell.oops{outline:3px dashed #D9531E;outline-offset:-6px}
@keyframes pz-pulse{50%{filter:brightness(1.12)}}

/* Purrfect Cat areas: tint + pattern + thick outline (never colour alone) */
.pz-grid:has(.pz-cell.cat){gap:0;background:#fff}
.pz-cell.cat{border:1px solid #9C93B5}
.pz-cell.cat.bt{border-top:4px solid var(--ink)}.pz-cell.cat.bb{border-bottom:4px solid var(--ink)}.pz-cell.cat.bl{border-left:4px solid var(--ink)}.pz-cell.cat.br{border-right:4px solid var(--ink)}
.rg0{background:#FBD9A6 radial-gradient(#E9A84C 1.6px,transparent 1.8px) 0 0/10px 10px}
.rg1{background:#C6E5F7 repeating-linear-gradient(45deg,transparent 0 6px,#8CC5E8 6px 8px)}
.rg2{background:#BFE8D3 repeating-linear-gradient(0deg,transparent 0 7px,#86CDAA 7px 9px)}
.rg3{background:#FBF0A8 repeating-conic-gradient(#EED65C 0 25%,transparent 0 50%) 0 0/14px 14px}
.rg4{background:#BFD5F0 repeating-linear-gradient(90deg,transparent 0 7px,#8DB0DD 7px 9px)}
.rg5{background:#F8CDBE repeating-linear-gradient(0deg,transparent 0 9px,#E79E86 9px 10px),repeating-linear-gradient(90deg,transparent 0 9px,#E79E86 9px 10px)}
.rg6{background:#F3CDE2 repeating-linear-gradient(-45deg,transparent 0 6px,#DD94BC 6px 8px)}
.rg7{background:#E2E2E2 repeating-linear-gradient(45deg,transparent 0 5px,#B9B9B9 5px 6px),repeating-linear-gradient(-45deg,transparent 0 5px,#B9B9B9 5px 6px)}
.rg8{background:#DDD0F2 radial-gradient(circle,#B39BDF 3px,transparent 3.5px) 0 0/14px 14px}
.pz-cell.cat .nap{width:82%;height:auto;filter:drop-shadow(0 2px 0 rgba(43,35,64,.25))}
.pz-cell.cat.has-cat{background-color:#fff}
.pz-cell.won .nap{animation:pz-pop .6s both}
.pz-cell.cat .xm{background:rgba(255,255,255,.8);border-radius:8px;width:62%;height:62%;display:grid;place-items:center}

/* Picture Sudoku */
.pz-grid.sud{gap:0;background:#fff}
.pz-cell.sud{border:1px solid #B9B0D2}
.pz-cell.sud.bt{border-top:4px solid var(--ink)}.pz-cell.sud.bl{border-left:4px solid var(--ink)}.pz-cell.sud.bb{border-bottom:4px solid var(--ink)}.pz-cell.sud.br{border-right:4px solid var(--ink)}
.pz-cell.sud.given{background:#F1EDFB}
.pz-cell.sud.sel{background:#FFF1B8}
.pz-cell.sud.same{background:#E6F2FF}
.pz-cell.sud .shp{width:72%;height:72%}
.pz-cell.sud.given .shp{filter:drop-shadow(0 0 0 #000)}
.pz-cell .emo{font-size:clamp(18px,6vw,34px);line-height:1}
.pz-grid.n9 .pz-cell .emo{font-size:clamp(14px,4vw,26px)}
.pz-cell .num{font-family:var(--display);font-weight:800;font-size:clamp(18px,5.5vw,30px)}
.pz-cell.sud.given .num{color:var(--grape)}
.pz-cell.won{animation:pz-pop .5s both}
.pz-palette{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:560px}
.pz-pick{width:54px;height:54px;border:3px solid var(--ink);border-radius:14px;background:#fff;box-shadow:0 3px 0 var(--ink);display:grid;place-items:center;cursor:pointer;font-size:1.4rem;font-weight:900}
.pz-pick .shp{width:80%;height:80%}
.pz-pick:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}

/* Picture Cross */
.pz-grid.cross{grid-template-columns:auto repeat(var(--n),1fr);background:#fff;gap:0;width:min(100%,calc(var(--n) * 50px + 80px))}
.pz-grid.cross.n10{width:min(100%,560px)}
.pz-corner{background:#fff}
.pz-clue{background:#F6F2FF;font-weight:900;color:var(--ink);display:flex;gap:4px;align-items:flex-end;justify-content:center;padding:4px 2px;font-size:clamp(11px,2.8vw,16px)}
.pz-clue.col{flex-direction:column;align-items:center;justify-content:flex-end;border-left:1px solid #D8D0EE}
.pz-clue.row{justify-content:flex-end;align-items:center;padding-inline:6px;border-top:1px solid #D8D0EE}
.pz-clue.done{color:#A49BC0;background:#EFEAFB}
.pz-clue.done b{text-decoration:line-through}
.pz-cell.cross{border:1px solid #C9C0E2;min-height:26px}
.pz-cell.cross.g5r{border-right:3px solid var(--ink)}.pz-cell.cross.g5b{border-bottom:3px solid var(--ink)}
.pz-cell.cross.fill{background:var(--ink)}
.pz-mode{display:flex;gap:8px}
.pz-mode .chip[aria-checked="true"]{background:var(--sun);box-shadow:0 3px 0 var(--ink)}

/* Colour Flow */
.pz-flowwrap{position:relative;width:min(100%,calc(var(--n) * 66px))}
.pz-grid.flow{width:100%;background:#2B2340;gap:2px}
.pz-cell.flow{background:#fff}
.pz-cell.flow.on{background:color-mix(in srgb,var(--fc) 22%,#fff)}
.pz-cell.flow.held{box-shadow:inset 0 0 0 4px var(--sky)}
.pz-cell.flow .dotshape{width:74%;height:74%;position:relative;z-index:2;filter:drop-shadow(0 2px 0 rgba(43,35,64,.3))}
.pz-lines{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);pointer-events:none;z-index:1}
.pz-lines polyline{fill:none;stroke-width:.32;stroke-linecap:round;stroke-linejoin:round}

/* Slide Puzzle */
.pz-slide-wrap{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;justify-content:center;width:100%}
.pz-grid.slide{width:380px;max-width:100%;flex:0 1 380px;background:#fff;gap:3px;border-radius:16px}
.pz-tile{aspect-ratio:1;border:0;padding:0;background-color:#fff;background-image:var(--pic);background-size:calc(var(--n) * 100%) calc(var(--n) * 100%);cursor:pointer;position:relative;transition:transform .12s}
.pz-tile.gap{background:repeating-linear-gradient(45deg,#F1EDFB 0 8px,#fff 8px 16px);cursor:default}
.pz-tile:not(.gap):active{transform:scale(.96)}
.pz-tile:focus-visible{outline:4px solid var(--sky);outline-offset:-4px;z-index:2}
.pz-tile .tn{position:absolute;left:6px;top:6px;background:#fff;border:2px solid var(--ink);border-radius:999px;min-width:28px;height:28px;display:grid;place-items:center;font-family:var(--display);font-weight:800}
.pz-tile.home .tn{background:#D7F5E5}
.pz-goal{display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:800;color:var(--ink-soft)}
.pz-goal img{border:3px solid var(--ink);border-radius:12px;background:#fff}
@media (max-width:480px){.pz-goal{flex-direction:row}.pz-goal img{width:64px;height:64px}}

.pz-wow-stars{display:flex;flex-direction:column;align-items:center;gap:2px;margin:6px 0}
.pz-wow-stars small{font-weight:800;color:var(--ink-soft)}
.streak-pref{display:flex;gap:10px;align-items:flex-start;background:var(--tint-sun);border:2.5px solid var(--ink);border-radius:16px;padding:12px;margin:10px 0;font-weight:600}
.streak-pref input{width:24px;height:24px;flex:none;accent-color:var(--grape)}
@media (prefers-reduced-motion: reduce){.pz-how[open] .pz-steps li,.pz-how[open] .pz-mini .pop,.pz-cell.hint,.pz-cell.won,.pz-cell.won .nap{animation:none}.pz-band-link,.pz-tile{transition:none}}

/* Purrfect Cat v2: modes, top bar with hearts, round buttons, levels, nap, pops */
.pz-modes{display:flex;gap:8px;margin-bottom:10px}
.pz-modes .chip{font-size:1.05rem;padding:.45em 1.1em}
.pz-modes .chip[aria-selected="true"]{background:var(--sun);box-shadow:0 3px 0 var(--ink)}
.pz-catplay{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:620px;margin:0 auto}
.pz-catplay>.pz-sizes{align-self:stretch}
.pz-topbar{width:min(100%,620px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;background:var(--card);border:3px solid var(--ink);border-radius:18px;padding:8px 14px;box-shadow:0 4px 0 var(--ink)}
.pz-lvl{font-family:var(--display);font-size:1.25rem;font-weight:800}
.pz-goldtag{font-size:.8rem;background:#FFE7A3;border:2px solid var(--ink);border-radius:999px;padding:.05em .55em;margin-left:4px;white-space:nowrap}
.pz-hearts{display:flex;gap:2px;font-size:1.6rem;line-height:1}
.pz-hearts i{font-style:normal;transition:transform .2s}
.pz-hearts i.off{opacity:.55;transform:scale(.85)}
.pz-topinfo{display:flex;flex-direction:column;align-items:flex-end;font-weight:800;color:var(--ink-soft);line-height:1.2}
@media (max-width:480px){.pz-lvl{font-size:1.05rem}.pz-hearts{font-size:1.3rem}.pz-topbar{padding:6px 10px}}
.pz-board.cat{position:relative}
.pz-board.cat .pz-grid{width:min(100%,calc(var(--n) * 66px))}
.pz-roundbar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(100%,560px)}
.pz-round{font-family:var(--display);font-weight:800;font-size:1rem;min-height:64px;border:3px solid var(--ink);border-radius:999px;background:var(--card);box-shadow:0 4px 0 var(--ink);cursor:pointer;padding:.3em .4em;line-height:1.1}
.pz-round.sun{background:var(--sun)}
.pz-round[aria-pressed="true"]{background:#FFE3F2}
.pz-round:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.pz-round:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:420px){.pz-round{font-size:.85rem;min-height:58px}}
.pz-morebar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.pz-catplay .pz-settings{width:min(100%,560px)}
.pz-opt-note{font-weight:700;color:var(--ink-soft);font-size:.9rem;margin:0}
.pz-cell.cat.pop{animation:pz-cell-pop .38s ease-out both}
.pz-cell.cat.pop .xm{animation:pz-pop .38s ease-out both;animation-delay:inherit}
@keyframes pz-cell-pop{0%{transform:scale(1)}45%{transform:scale(.86)}100%{transform:scale(1)}}
.pz-cell.cat.wobble{animation:pz-wobble .45s ease-in-out}
@keyframes pz-wobble{20%{transform:translateX(-5px) rotate(-4deg);background-color:#FFD6D6}40%{transform:translateX(5px) rotate(4deg)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.pz-nap{position:absolute;inset:0;z-index:5;background:rgba(247,245,255,.94);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px}
.pz-nap .mochi{width:120px}
.pz-nap h2{font-size:1.6rem}
.pz-nap p{font-weight:700;max-width:32ch}
.pz-nap-btns{display:flex;flex-direction:column;gap:8px}
.pz-lvhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-weight:800}
.pz-lvpages{display:flex;gap:6px;flex-wrap:wrap}
.pz-lvpages .chip{min-height:38px;padding:.2em .8em;font-size:.9rem}
.pz-lvpages .chip[aria-pressed="true"]{background:var(--sun)}
.pz-lvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.pz-lv{position:relative;min-height:64px;border:2.5px solid var(--ink);border-radius:16px;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;font:inherit;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.pz-lv b{font-family:var(--display);font-size:1.2rem;line-height:1}
.pz-lv small{font-weight:800;color:var(--ink-soft);font-size:.72rem}
.pz-lv .pz-lvstars{color:#E8A500;letter-spacing:-1px}
.pz-lv.done{background:#EAF8EF}
.pz-lv.next{background:var(--sun);transform:scale(1.04)}
.pz-lv.gold{border-color:#C98A00}
.pz-lv:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.pz-yarn{position:absolute;top:-8px;right:-6px;font-style:normal;font-size:1rem}
@media (prefers-reduced-motion: reduce){.pz-cell.cat.pop,.pz-cell.cat.pop .xm,.pz-cell.cat.wobble{animation:none}.pz-lv.next{transform:none}}

.nav-new{font-family:var(--display);font-size:.7rem;font-weight:800;background:var(--tomato);color:#fff;border-radius:999px;padding:.1em .5em;margin-left:4px;vertical-align:middle}

#seo-static{max-width:900px;margin:0 auto;padding:24px 16px 48px;font-family:Nunito,system-ui,sans-serif;color:#2B2340}#seo-static h1{font-family:Grandstander,system-ui,sans-serif}#seo-static a{color:#2563c9}#seo-static ul{columns:2;padding-left:18px}@media(max-width:600px){#seo-static ul{columns:1}}