:root{
  --paper:#FFF7FA; --ink:#4A2340; --ink-2:#8A6A80; --line:#F6DDE7;
  --coral:#FF5C93; --sun:#F4C86A; --aqua:#F7A8C6; --violet:#C9A7F5; --mint:#FBD7E4; --blush:#FFE6EF; --gold:#D9B26F;
  --card:#FFFFFF; --shadow:0 6px 0 rgba(74,35,64,.07);
  box-sizing:border-box;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#2B1A26; --ink:#FFF0F5; --ink-2:#E2BFD0; --line:#5A3A4E; --card:#3A2434; --blush:#5A2E45; --shadow:0 6px 0 rgba(0,0,0,.25);} }
:root[data-theme="dark"]{ --paper:#2B1A26; --ink:#FFF0F5; --ink-2:#E2BFD0; --line:#5A3A4E; --card:#3A2434; --blush:#5A2E45; --shadow:0 6px 0 rgba(0,0,0,.25);}
*{box-sizing:border-box}
/* App shell: the page itself never scrolls. body is a fixed-height column (content scroller + tab bar), so the tab bar
   is an ordinary last row, not a position:fixed element — iOS moves fixed elements while rubber-banding and after the
   keyboard closes, which is how the bar used to drift up over the content. */
html{height:100%;overflow:hidden}
body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-top:env(safe-area-inset-top,0px);background:var(--paper);color:var(--ink);font-family:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.5}
h1,h2,h3,.disp{font-family:Fredoka,Nunito,system-ui,sans-serif;font-weight:600;letter-spacing:.01em;margin:0}
h1{font-size:2rem;line-height:1.05} h2{font-size:1.5rem;margin-bottom:.5rem} h3{font-size:1.15rem}
p{margin:.35rem 0}
a{color:var(--violet)}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%}
.wrap{flex:1 1 auto;min-height:0;width:100%;max-width:720px;margin:0 auto;padding:14px 14px 84px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
header.hero{position:relative;overflow:hidden;border-radius:22px;padding:22px 18px 18px;color:#4A2340;
  background:linear-gradient(135deg,#FFC2D6 0%,#FF7FAE 55%,#D9B3FF 100%);}
header.hero:after{content:"✿ ✧ ✿";position:absolute;left:18px;bottom:8px;color:rgba(255,255,255,.55);font-size:.8rem;letter-spacing:.4em}
header.hero h1{font-size:2.2rem;color:#fff;text-shadow:0 3px 0 rgba(74,35,64,.22)}
header.hero .sub{color:#fff;font-weight:700;opacity:.95;padding-right:84px}
.sticker{position:absolute;right:-6px;top:-8px;width:96px;height:96px;border-radius:50%;background:#FFF4F8;border:3px solid #FFD1E1;display:grid;place-items:center;transform:rotate(12deg);font-family:Fredoka;font-weight:700;color:#4A2340;text-align:center;font-size:.85rem;line-height:1.05;box-shadow:0 5px 0 rgba(74,35,64,.15)}
.sticker:before{content:"🎀";position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-12deg);font-size:1.1rem}
.sticker b{font-size:1.9rem;display:block}
.card{background:var(--card);border-radius:18px;padding:14px;margin:12px 0;box-shadow:var(--shadow);border:2px solid var(--line)}
.card.coral{border-color:var(--coral)} .card.aqua{border-color:var(--aqua)} .card.sun{border-color:var(--sun)} .card.violet{border-color:var(--violet)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1 1 auto}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-weight:800;font-size:.8rem;background:var(--blush);color:#4A2340}
.chip.aqua{background:#FFD6E5} .chip.sun{background:#FBEBC8} .chip.violet{background:#EBDDFF} .chip.mint{background:#FFE0EA} .chip.coral{background:#FF5C93;color:#fff}
.btn{border:0;border-radius:14px;padding:10px 14px;font-weight:800;background:#B98BEF;color:#fff;cursor:pointer;box-shadow:0 4px 0 rgba(74,35,64,.18)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(34,25,74,.2)}
.btn.coral{background:var(--coral)} .btn.aqua{background:#F7A8C6;color:#4A2340} .btn.sun{background:var(--gold);color:#4A2340} .btn.ghost{background:transparent;color:var(--ink);box-shadow:none;border:2px solid var(--line)}
.btn.sm{padding:6px 10px;font-size:.85rem;border-radius:10px}
input[type=text],input[type=date],input[type=number],input[type=time],select,textarea{width:100%;border:2px solid var(--line);border-radius:12px;padding:9px 11px;background:var(--card)}
textarea{min-height:44px;resize:none;overflow:hidden;line-height:1.4}
.ro{white-space:pre-wrap;overflow-wrap:anywhere;padding:6px 0;border-bottom:1px dashed var(--line);font-size:.95rem}
.ro:empty:before{content:"—";color:var(--ink-2)}
.ro ul{margin:0;padding-left:18px} .ro li{margin:2px 0}
.field-lab{font-weight:800;font-size:.75rem;color:var(--ink-2);margin-top:8px;text-transform:uppercase;letter-spacing:.04em}
label.f{display:block;font-weight:800;font-size:.8rem;color:var(--ink-2);margin:8px 0 3px}
.muted{color:var(--ink-2)} .small{font-size:.85rem}
ul.clean{list-style:none;padding:0;margin:0} ul.clean li{padding:6px 0;border-bottom:1px dashed var(--line)} ul.clean li:last-child{border:0}
.check{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed var(--line)}
.check input{width:22px;height:22px;accent-color:#FF5C93;margin-top:2px;flex:none}
.check.done span{text-decoration:line-through;color:var(--ink-2)}
.del{background:none;border:0;color:var(--ink-2);font-size:1.1rem;cursor:pointer;padding:0 4px}
.update-bar{flex:none;display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 14px;background:var(--blush);border-top:2px solid var(--line);font-weight:800;font-family:Fredoka} .update-bar .btn.sm{padding:6px 14px}
nav.tabs{flex:none;background:var(--card);border-top:2px solid var(--line);display:flex;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
nav.tabs button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.66rem;font-weight:800;color:var(--ink-2);padding:4px 5px 5px;border-radius:14px;min-width:52px;-webkit-tap-highlight-color:transparent}
nav.tabs button span.ic{font-size:1.25rem}
nav.tabs button.on{color:#FF5C93;background:var(--blush)}
/* Puffy icons: gradient fills live in the hidden <defs> svg before the nav; the shadow and the lift come from here. */
nav.tabs svg{width:36px;height:36px;overflow:visible;filter:drop-shadow(0 2.5px 0 rgba(74,35,64,.16)) drop-shadow(0 5px 7px rgba(255,92,147,.22));transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
nav.tabs button.on svg{transform:translateY(-3px) scale(1.12)}
nav.tabs button:active svg{transform:scale(.92)}
section.page{display:none} section.page.on{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.timeline{position:relative;padding-left:22px}
.timeline:before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:4px;border-radius:4px;background:linear-gradient(#FFC2D6,#FF5C93,#C9A7F5)}
.tl-item{position:relative;margin:0 0 14px}
.tl-item:before{content:"";position:absolute;left:-20px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--card);border:4px solid var(--coral)}
.tl-item.past{opacity:.6}
.tl-item.next:before{background:var(--sun);border-color:var(--violet)}
.week{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 0 8px;-webkit-overflow-scrolling:touch}
.day{flex:0 0 118px;scroll-snap-align:start;background:var(--paper);border-radius:12px;padding:6px 7px;min-height:92px;font-size:.78rem;border:2px solid var(--line);overflow-wrap:anywhere}
.day b{display:block;font-family:Fredoka;font-size:.85rem}
.day.today{border-color:#FF5C93;background:var(--blush)}
.day .ev{background:#EBDDFF;border-radius:6px;padding:2px 5px;margin-top:3px;font-weight:700;line-height:1.25}
.day .ev.comp{background:#FBEBC8} .day .ev.home{background:#FFD6E5} .day .ev.other{background:#FFE6EF}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal .hd{text-align:center;font-weight:800;font-size:.7rem;color:var(--ink-2)}
.cal .d{background:var(--card);border:1px solid var(--line);border-radius:8px;min-height:64px;padding:3px;font-size:.62rem;line-height:1.2}
.cal .d.off{opacity:.35} .cal .d.today{border:2px solid #FF5C93}
.cal .d b{font-family:Fredoka;font-size:.8rem;display:block}
.cal .d .ev{border-radius:4px;padding:0 3px;margin-top:2px;font-weight:700;background:#EBDDFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .d .ev.comp{background:#FBEBC8} .cal .d .ev.home{background:#FFD6E5} .cal .d .ev.other{background:#FFE6EF}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.photos .ph{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--line)}
.photos .ph img{width:100%;height:100%;object-fit:cover}
.photos .ph .cap{position:absolute;left:0;right:0;bottom:0;background:rgba(34,25,74,.7);color:#fff;font-size:.7rem;padding:2px 6px}
.photos .ph .del{position:absolute;top:2px;right:2px;color:#fff;background:rgba(0,0,0,.4);border-radius:50%}
details{border-top:1px dashed var(--line);padding:8px 0}
details summary{cursor:pointer;font-weight:800;font-family:Fredoka;font-size:1.05rem}
table{width:100%;border-collapse:collapse;font-size:.85rem} th,td{text-align:left;padding:6px 4px;border-bottom:1px dashed var(--line);vertical-align:top} th{color:var(--ink-2);font-size:.75rem}
.tot{font-family:Fredoka;font-size:1.3rem}
.big{font-family:Fredoka;font-size:2.6rem;line-height:1;color:#FF5C93}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:999px;font-weight:800;opacity:0;transition:opacity .2s;pointer-events:none;z-index:30}
.toast.on{opacity:1}
.overflow{overflow-x:auto}
.lock{text-align:center;padding:30px 10px}
.lock input{max-width:200px;text-align:center;letter-spacing:.3em;font-family:Fredoka;font-size:1.4rem}
.mapbar{display:flex;height:34px;border-radius:10px;overflow:hidden;border:2px solid var(--line);font-size:.7rem;font-weight:800}
.mapbar div{display:flex;align-items:center;justify-content:center;color:#4A2340}
.mapbar .soft{background:#FFE6EF;flex:48} .mapbar .loud{background:#FBEBC8;flex:64} .mapbar .fade{background:#EBDDFF;flex:12}
.progress{height:12px;border-radius:999px;background:var(--line);overflow:hidden} .progress i{display:block;height:100%;background:linear-gradient(90deg,#FFA3C7,#C9A7F5)}
.game-wrap{position:fixed;inset:0;background:var(--paper);z-index:50;display:none;flex-direction:column;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.game-wrap.on{display:flex}
.game-top{display:flex;align-items:center;gap:8px;padding:10px 14px}
.game-top .sc{font-family:Fredoka;font-size:1.4rem;color:#FF5C93}
canvas#gameCv{flex:1;width:100%;display:block;background:linear-gradient(#FFF7FA,#FFE6EF)}
.lanes{display:flex;gap:6px;padding:8px 10px}
.lanes button{flex:1;height:64px;border:0;border-radius:16px;font-size:1.8rem;background:#fff;box-shadow:0 4px 0 rgba(74,35,64,.15)}
.lanes button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(74,35,64,.15)}
.game-msg{position:absolute;left:0;right:0;top:40%;text-align:center;font-family:Fredoka;font-size:2rem;color:#FF5C93;pointer-events:none}
@media print{
  html,body{height:auto;overflow:visible;display:block} body{background:#fff;color:#000} nav.tabs,header.hero,.noprint{display:none!important}
  .wrap{padding:0;max-width:none;overflow:visible} section.page{display:none} section.page.print-target{display:block!important}
  .card{box-shadow:none;border:1px solid #999;break-inside:avoid} .cal .d{min-height:90px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* ---------- Added for the installable version: settings gear, family gate, week view, sync dot, media tiles ---------- */
header.hero .gear{position:absolute;right:12px;bottom:10px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.6);cursor:pointer;font-size:1rem;display:grid;place-items:center;box-shadow:0 3px 0 rgba(74,35,64,.12);z-index:2}
.code{font-family:Fredoka;font-size:1.2rem;letter-spacing:.1em;background:var(--blush);border-radius:12px;padding:10px;text-align:center;overflow-wrap:anywhere;margin:8px 0;user-select:all;-webkit-user-select:all;color:#4A2340}
.qr{max-width:200px;margin:8px auto;background:#fff;border-radius:12px;padding:6px} .qr svg{width:100%;height:auto;display:block}
.code-in{width:100%;border:2px solid var(--line);border-radius:12px;padding:10px;background:var(--card);font-family:Fredoka;font-size:1.05rem;letter-spacing:.08em;text-align:center;text-transform:uppercase}
.gate{position:fixed;inset:0;background:var(--paper);z-index:60;overflow:auto;padding:max(28px,env(safe-area-inset-top,0px)) 16px 24px}
.gate-card{max-width:420px;margin:0 auto;text-align:center}
.gate-bow{font-size:3.2rem;line-height:1} .gate h1{margin:6px 0 4px}
.gate-stack{display:flex;flex-direction:column;gap:10px;margin-top:14px} .gate-stack .row{justify-content:center}
#gateScanner video{width:100%;max-height:60vh;border-radius:14px;background:#000}
.spinner{width:34px;height:34px;border-radius:50%;border:4px solid var(--line);border-top-color:#FF5C93;margin:18px auto 6px;animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}}
body.gated{overflow:hidden}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;background:var(--ink-2);vertical-align:middle} .dot.ok{background:#2E9E6B} .dot.busy{background:var(--gold)} .dot.err{background:#FF5C93}
.weekgrid{display:grid;grid-template-columns:1fr;gap:6px}
.weekgrid .wd{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 8px;font-size:.8rem;line-height:1.3}
.weekgrid .wd.today{border:2px solid #FF5C93}
.weekgrid .wd>b{font-family:Fredoka;font-size:.95rem;display:block;margin-bottom:2px}
.weekgrid .ev{border-radius:6px;padding:2px 6px;margin-top:3px;background:#EBDDFF;color:#4A2340}
.weekgrid .ev.comp{background:#FBEBC8} .weekgrid .ev.home{background:#FFD6E5} .weekgrid .ev.other{background:#FFE6EF}
.photos .ph video{width:100%;height:100%;object-fit:cover;background:#000}
@media print{ .weekgrid{grid-template-columns:repeat(7,1fr);gap:4px} .weekgrid .wd{min-height:160px;font-size:.68rem;break-inside:avoid} header.hero .gear,.gate{display:none!important} }
[hidden]{display:none!important}

/* ---------- Kid mode (session 2A): Today card, covers, checklist ring, Me, Grown-ups hub, Show me, player ---------- */
.today .today-what{font-family:Fredoka;font-size:1.6rem;line-height:1.1}
.today .today-sub{margin-top:4px;font-size:.95rem}
.today-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 8px}
.big-btn{font-size:1.15rem;padding:14px 12px;border-radius:16px}
.today-meta{margin-top:4px}
.choice{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 4px}
.choice-card{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;cursor:pointer;box-shadow:var(--shadow);color:var(--ink);min-height:96px}
.choice-card .ic{font-size:1.9rem;line-height:1.1} .choice-card b{font-family:Fredoka;font-size:.95rem;line-height:1.1} .choice-card small{font-size:.68rem;color:var(--ink-2);line-height:1.15;overflow-wrap:anywhere}
.choice-card.done{border-color:var(--sun);background:var(--blush)}
.choice.four{grid-template-columns:repeat(2,1fr)} .choice.four .choice-card{min-height:90px;padding:10px 8px 8px} .choice.four .choice-card small{font-size:.74rem}
/* Memorize it (js/memo.js): the fold under a dance's cover actions */
details.memo{margin-top:6px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.5)} details.memo>summary{display:flex;align-items:center;gap:8px;font-family:Fredoka;font-size:1rem;color:var(--ink)} details.memo>summary .chip{margin-left:auto}
.memo-chips{gap:6px;margin:6px 0 8px;flex-wrap:wrap} .memo-chips .chip{cursor:pointer;border:0;font:inherit;font-weight:700;font-size:.78rem}
.dayplan .dp-head{align-items:center;gap:8px} .dayplan .dp-head b{font-family:Fredoka;font-size:1.1rem} .dp-classes{margin:4px 0 6px} .dp-list{display:flex;flex-direction:column}
.dp-item{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-top:1px dashed var(--line);font-size:.95rem;line-height:1.3} .dp-item input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:#FF5C93} .dp-item.opt{color:var(--ink-2)} .dp-item.opt input{opacity:.6} .dp-item.on{opacity:.6;text-decoration:line-through} .dp-item .lnk{flex:none;font-size:1rem}
.dp-tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);border:1px dashed var(--line);border-radius:999px;padding:1px 6px;white-space:nowrap} .dp-foot{margin-top:6px} .dp-note{margin-top:6px;padding:6px 8px;border:1.5px solid var(--line);border-radius:10px}
.wo-row{margin-top:10px} .wo-head{align-items:center;gap:10px} .wo-list{display:flex;flex-direction:column;gap:6px} .wo{display:flex;align-items:center;gap:8px;padding:8px 10px;border:2px solid var(--line);border-radius:14px;background:var(--card)} .wo.done{background:var(--blush)} .wo-open{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;color:var(--ink);text-decoration:none} .wo-ic{font-size:1.3rem;flex:none} .wo b{font-family:Fredoka} .wo .btn.sm,.wo .chip{white-space:nowrap;flex:none} .wo.sugg{border-style:dashed;background:transparent} .wo-sugg{margin-top:8px} .wo-sugg>summary{font-family:Fredoka;font-size:1rem;display:flex;align-items:center;gap:8px}
.memo-today{font-size:.92rem;margin:4px 0 8px;line-height:1.3} .memo-cp{margin:2px 0 6px;font-weight:700} .memo-vids{gap:6px;flex-wrap:wrap;margin:0 0 8px;align-items:center} .memo-vids .chip{text-decoration:none}
.memo-step{display:flex;gap:8px;align-items:flex-start;padding:7px 0;border-top:1px dashed var(--line)} .memo-step.done{opacity:.65} .memo-ic{font-size:1.25rem;line-height:1.2;flex:none;width:26px;text-align:center} .memo-step b{font-family:Fredoka;font-size:.98rem}
.memo-act{gap:6px;flex-wrap:wrap;margin-top:6px} .memo-act .btn.sm{padding:7px 11px;font-size:.82rem} .memo-rule{margin:8px 0 2px}
.tired{display:flex;flex-direction:column;gap:6px;margin-top:10px;font-size:.9rem;font-weight:700}
.today .pick{font-family:Fredoka;font-size:1.2rem;margin-top:10px}
.nudge{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding:8px 10px;border-radius:14px;background:var(--card);border:2px dashed var(--coral);font-size:.9rem}
.mm-canvas{display:block;width:100%;max-width:300px;margin:10px auto 0;border-radius:14px;box-shadow:var(--shadow);background:var(--blush)} .mm-canvas.post{max-width:320px}
.mm-stickers{margin-top:6px} .mm-star{position:absolute;left:4px;top:2px;font-size:1rem;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.day .ev.done{background:#DDF5E6}
.fix-text{font-family:Fredoka;font-size:1.15rem;line-height:1.25;margin:8px 0 0}
.cover-top{display:flex;gap:12px;align-items:center}
.cover-art{width:64px;height:64px;flex:none;border-radius:16px;background:var(--blush);display:grid;place-items:center;font-size:2rem;overflow:hidden}
.cover-art img{width:100%;height:100%;object-fit:cover}
.cover-art.sun{background:#FBEBC8} .cover-art.violet{background:#EBDDFF} .cover-art.aqua{background:#FFD6E5}
.cover-actions{margin:10px 0 8px} .cover-actions .btn{font-size:1.05rem;padding:12px 14px}
.fixchips{display:flex;flex-direction:column;gap:6px}
.fixchip{text-align:left;border:0;border-radius:12px;padding:9px 12px;background:var(--blush);color:var(--ink);font-weight:700;font-size:.95rem;line-height:1.3;cursor:pointer;box-shadow:0 3px 0 rgba(74,35,64,.08)}
.fixchip:active{transform:translateY(2px);box-shadow:none}
.pattern{background:#FBEBC8;color:#4A2340;border-radius:12px;padding:8px 10px;margin-top:8px;font-size:.9rem}
details.more{border-top:1px dashed var(--line);margin-top:10px;padding:6px 0 0}
details.more>summary{font-size:.9rem;color:var(--ink-2)} details.more[open]>summary{margin-bottom:4px}
.note-form{background:var(--blush);border-radius:14px;padding:10px;margin:0 0 10px}
.tagpick{display:flex;flex-wrap:wrap;gap:5px} .tagpick .chip{border:0;cursor:pointer}
.corr-list{margin:0;padding-left:0;list-style:none} .corr-list li{padding:5px 0;border-bottom:1px dashed var(--line)} .corr-list li.done{opacity:.6}
.lnk{background:none;border:0;color:var(--violet);font-weight:800;font-size:.8rem;cursor:pointer;padding:0 4px;text-decoration:underline}
.practice-head{gap:14px;flex-wrap:nowrap}
.ring{width:96px;height:96px;flex:none}
.ring-bg{fill:none;stroke:var(--line);stroke-width:9}
.ring-fg{fill:none;stroke:#FF5C93;stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .4s}
/* The arc starts at 12 o'clock via an SVG rotate() on .ring-fg (js); nothing rotates in CSS, because iPhone Safari pivots a CSS-rotated SVG label around the corner and the % vanished. */
.ring-txt{font-family:Fredoka;font-weight:700;font-size:22px;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.plist{margin-top:10px}
.plan-fold{margin-top:10px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.45)} .plan-fold>summary{display:flex;align-items:center;gap:8px;font-family:Fredoka;font-size:1rem;color:var(--ink)} .plan-fold>summary .chip{margin-left:auto} .plan-fold[open]>summary{margin-bottom:0}
/* The big banner belongs to Today. Every other tab gets a one-line version: name, days-to chip, gear. */
body:not(.pg-home) header.hero{display:flex;align-items:center;gap:10px;padding:10px 52px 10px 16px;border-radius:16px;min-height:44px}
body:not(.pg-home) header.hero:after,body:not(.pg-home) header.hero .sub,body:not(.pg-home) .sticker .st-to,body:not(.pg-home) .sticker #stickerWhat{display:none}
body:not(.pg-home) .sticker:before{position:static;transform:none;font-size:.9rem;margin-right:4px}
body:not(.pg-home) header.hero h1{order:0;flex:none;font-size:1.15rem;text-shadow:0 2px 0 rgba(74,35,64,.18);white-space:nowrap}
body:not(.pg-home) .sticker{order:1;margin-left:auto;flex:none;position:static;width:auto;height:auto;transform:none;border-radius:999px;padding:3px 10px;font-size:.78rem;line-height:1.3;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 0 rgba(74,35,64,.12)}
body:not(.pg-home) .sticker b{display:inline;font-size:.95rem} body:not(.pg-home) .sticker b:after{content:" days"}
body:not(.pg-home) header.hero .gear{top:50%;bottom:auto;transform:translateY(-50%);right:10px}
.pitem{display:flex;gap:10px;align-items:center;padding:11px 8px;border-bottom:1px dashed var(--line);font-size:1rem;line-height:1.3;cursor:pointer;border-radius:10px}
.pitem input{width:26px;height:26px;accent-color:#FF5C93;flex:none}
.pitem .pk{font-size:1.2rem;flex:none} .pitem.done{color:var(--ink-2);text-decoration:line-through;background:var(--blush)}
.ahow{border-top:0;margin:0 0 4px 44px;padding:2px 0 6px} .ahow p{margin:4px 0;line-height:1.4}
details.acc{padding:10px 14px} details.acc>summary{list-style:none;display:flex;align-items:center;gap:8px;font-family:Fredoka;font-size:1.1rem;cursor:pointer}
details.acc>summary::-webkit-details-marker{display:none} details.acc>summary:after{content:"\25B8";margin-left:auto;color:var(--ink-2);transition:transform .15s} details.acc[open]>summary:after{transform:rotate(90deg)}
details.acc[open]>summary{margin-bottom:8px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:10px;height:14px;border-radius:2px;animation:fall 2s ease-in forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.8}}
.avwrap{width:96px;height:150px;border-radius:14px;background:linear-gradient(#FFF7FA,#FFE6EF);flex:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
.avwrap svg{width:100%;height:100%}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.stat{background:var(--blush);border-radius:12px;padding:8px 10px;text-align:center} .stat b{display:block;font-family:Fredoka;font-size:1.5rem;line-height:1.1;color:#FF5C93} .stat span{font-size:.75rem;font-weight:800;color:var(--ink-2)}
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.badge{background:var(--blush);border-radius:14px;padding:8px 4px;text-align:center;opacity:.35;filter:grayscale(1)} .badge.on{opacity:1;filter:none;background:#FBEBC8;box-shadow:0 3px 0 rgba(74,35,64,.1)}
.badge span{display:block;font-size:1.7rem;line-height:1.2} .badge small{display:block;font-size:.62rem;font-weight:800;line-height:1.15;margin-top:2px}
.skill-rings{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.skill-ring{background:none;border:2px solid transparent;border-radius:12px;padding:2px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;color:var(--ink)} .skill-ring.on{border-color:var(--violet);background:var(--blush)}
.skill-ring small{font-size:.62rem;font-weight:800;line-height:1.1}
.mini-ring{width:54px;height:54px} .mini-ring .ring-bg,.mini-ring .ring-fg{stroke-width:7} .mini-ring .ring-fg{stroke:#B98BEF}
.ring-ic{font-size:22px;text-anchor:middle;dominant-baseline:central}
.skill{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-bottom:1px dashed var(--line);background:none;padding:9px 4px;font-size:.95rem;cursor:pointer;color:var(--ink)}
.skill .st{font-size:1.2rem;width:26px;text-align:center;color:var(--ink-2)} .skill small{font-size:.7rem;font-weight:800;color:var(--ink-2)}
.skill.learning .st{color:#B98BEF} .skill.clean .st{color:#FF5C93} .skill.checked .st{color:#D9B26F}
.grownup-link{color:var(--ink-2);font-weight:800}
.hub{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.hub-btn{border:2px solid var(--line);border-radius:16px;background:var(--card);padding:12px 8px;text-align:center;font-size:1.6rem;cursor:pointer;box-shadow:var(--shadow);color:var(--ink)}
.hub-btn span{display:block;font-family:Fredoka;font-size:1rem;margin-top:2px} .hub-btn small{display:block;font-size:.68rem;color:var(--ink-2);font-weight:700}
.hub-btn.sun{border-color:var(--sun)} .hub-btn.violet{border-color:var(--violet)} .hub-btn.aqua{border-color:var(--aqua)} .hub-btn.coral{border-color:var(--coral)}
.report-link{text-align:center;margin:26px 0 0} .report-link a{color:var(--ink-2)}
.err-state{border-color:#FF5C93} .err-pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--blush);border-radius:8px;padding:6px;font-size:.7rem;max-height:120px;overflow:auto}
.modal{position:fixed;inset:0;background:rgba(74,35,64,.45);z-index:57;display:flex;align-items:flex-end;justify-content:center;padding:env(safe-area-inset-top,0px) 0 0}
.modal-card{background:var(--paper);border-radius:22px 22px 0 0;width:100%;max-width:720px;max-height:92vh;overflow:auto;padding:14px 14px calc(16px + env(safe-area-inset-bottom,0px))}
body.modal{overflow:hidden}
.showme-stage{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.showme-svg{width:100%;border-radius:14px;background:linear-gradient(#FFF7FA,#FFE6EF)} .showme-svg.good{outline:3px solid #2E9E6B} .showme-svg.bad{outline:3px solid #FF5C93}
.showme-cue{text-align:center;font-family:Fredoka;font-size:1rem;margin-top:4px} .showme-cue.good{color:#2E9E6B} .showme-cue.bad{color:#FF5C93}
.player .modal-card{position:relative}
.pl-bar{height:14px;border-radius:999px;background:var(--line);overflow:hidden;margin:8px 0;cursor:pointer} .pl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#FFA3C7,#C9A7F5)}
.pl-play{font-size:1.6rem;width:72px;height:72px;border-radius:50%;padding:0}
.pl-speed{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px} .pl-speed .btn{font-size:1.3rem;padding:12px 0;background:var(--violet);color:#4A2340} .pl-speed .btn.coral{background:var(--coral);color:#fff}
#plRange{width:100%;accent-color:#FF5C93;margin:6px 0}
#plA,#plB{font-size:1.2rem;width:56px;background:var(--violet);color:#4A2340} #plA.sun,#plB.sun{background:var(--gold)}
#plCounts{background:var(--violet);color:#4A2340} #plCounts.coral{background:var(--coral);color:#fff}
#plV_off,#plV_click,#plV_voice{background:var(--line);color:var(--ink)} #plV_off.coral,#plV_click.coral,#plV_voice.coral{background:var(--coral);color:#fff}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .presets .chip{border:0;cursor:pointer}
.pl-count{font-family:Fredoka;font-size:6rem;line-height:1;text-align:center;color:#B98BEF;margin:4px 0} .pl-count.one{color:#FF5C93}
.bad{color:#FF5C93;font-weight:800}
.run-overlay{position:absolute;inset:0;background:rgba(255,247,250,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;border-radius:22px 22px 0 0}
.run-count{font-family:Fredoka;font-size:8rem;line-height:1;color:#FF5C93} .run-count.small-run{font-size:4rem}
.run-live{font-family:Fredoka;font-size:1.6rem;color:#B98BEF} .run-q{font-family:Fredoka;font-size:1.6rem;line-height:1.2} .run-yn .btn{font-size:1.2rem;padding:14px 22px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .badge.on{background:#5A4A2E} :root:not([data-theme="light"]) .pattern{background:#5A4A2E;color:var(--ink)} :root:not([data-theme="light"]) .day .ev.done{background:#2E5A45;color:var(--ink)} :root:not([data-theme="light"]) .run-overlay{background:rgba(43,26,38,.96)} }
:root[data-theme="dark"] .badge.on{background:#5A4A2E} :root[data-theme="dark"] .pattern{background:#5A4A2E;color:var(--ink)} :root[data-theme="dark"] .day .ev.done{background:#2E5A45;color:var(--ink)} :root[data-theme="dark"] .run-overlay{background:rgba(43,26,38,.96)}
.run-stop{margin-top:18px;font-size:1.05rem;padding:12px 26px}
.cue{background:var(--blush);border-radius:14px;padding:10px 12px;margin:6px 0;text-align:center;min-height:64px}
.cue .cue-move{font-family:Fredoka;font-size:1.5rem;line-height:1.15}
.cue .cue-lyric{font-style:italic;font-size:.95rem;margin-top:2px;color:var(--ink-2)}
.cue .cue-next{font-size:.8rem;font-weight:800;margin-top:6px;color:var(--ink-2)} .cue.soon .cue-next{color:#FF5C93}
.cue .cue-hidden{display:inline-block;background:var(--violet);color:#4A2340;border-radius:10px;padding:4px 14px;font-family:Fredoka;font-size:1.2rem;cursor:pointer}
.run-overlay .cue{width:100%;background:transparent;min-height:0} .run-overlay .cue .cue-move{font-size:2.4rem} .run-overlay .cue .cue-lyric{font-size:1.2rem}
.cuelist .check{align-items:center} .cuelist .cue-t{font-family:Fredoka;min-width:44px;color:#FF5C93;cursor:pointer}
.story{font-size:.9rem;line-height:1.3;margin-top:4px;font-style:italic;color:var(--ink)}
.stage{position:fixed;inset:0;background:var(--paper);z-index:56;display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.stage-top{display:flex;align-items:center;gap:8px;padding:10px 14px;font-family:Fredoka;font-size:1.15rem}
.stage-body{flex:1;overflow:auto;padding:0 12px} .stage-body>div{margin-top:0!important}
.stage-body svg{max-height:52vh;display:block;margin:0 auto}
.stage-actions{padding:10px 14px;justify-content:center;gap:10px;border-top:2px solid var(--line);background:var(--card)} .stage-actions .btn{font-size:1.05rem;padding:12px 18px}
.je-opt{font-size:1rem;padding:12px 8px}
.pm-body{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:6px}
.pm-top{display:flex;align-items:center;justify-content:center;gap:14px;width:100%}
.pm-dancer{width:120px;height:170px;background:linear-gradient(#FFF7FA,#FFE6EF);border-radius:14px;max-height:none!important;margin:0!important}
.pm-ring{width:110px;height:110px}
.pm-item{text-align:center;padding:6px 10px} .pm-kind{font-size:2.2rem;line-height:1} .pm-text{font-family:Fredoka;font-size:1.5rem;line-height:1.2;margin-top:4px} .pm-how{margin:8px auto 0;max-width:34rem;color:var(--ink-2);line-height:1.4}
.pm-timer{text-align:center} .pm-clock{font-family:Fredoka;font-size:3.4rem;line-height:1;color:#FF5C93} .pm-clock.paused{color:var(--ink-2)}
.pm-mode{justify-content:center}
.coach-line{font-family:Fredoka;font-size:1.2rem;margin:4px 0 10px}
.coach-pick{display:grid;gap:10px} .coach-busy{text-align:center;padding:20px 0}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0} .thumb img,.small-thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--line)} .thumb small{display:block;text-align:center;font-size:.65rem;color:var(--ink-2)}
.pose-lines{background:var(--blush);border-radius:12px;padding:8px 10px;font-size:.9rem;margin:6px 0}
.review .rv-loved p,.review .rv-fix p{font-family:Fredoka;font-size:1.15rem;line-height:1.25;margin:2px 0 6px}
.review .rv-loved{background:#DDF5E6;border-radius:12px;padding:8px 10px;margin-top:6px} .review .rv-fix{background:var(--blush);border-radius:12px;padding:8px 10px;margin-top:8px}
.chk{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px} .chk-row{background:var(--card);border:1px dashed var(--line);border-radius:10px;padding:6px 8px;font-size:.85rem} .chk-row b{display:block;font-weight:700}
.coach-btn{font-size:.95rem}
.goal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.goal-tile{background:var(--blush);border:0;border-radius:14px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;color:var(--ink)} .goal-tile small{font-size:.68rem;font-weight:800;line-height:1.1;text-align:center}
.goal-tile img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;margin-top:2px} .goal-empty{font-size:.7rem;color:var(--ink-2);padding:6px 0} .goal-tile.add{justify-content:center;border:2px dashed var(--line);background:transparent} .goal-plus{font-size:2rem;line-height:1}
.goal-ring .ring-fg{stroke:#F4C86A}
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .preset-grid .btn{font-size:.9rem;padding:10px 6px}
.goal-chart{width:100%;height:120px;background:var(--blush);border-radius:12px;margin:6px 0} .chart-line{fill:none;stroke:#FF5C93;stroke-width:2.5;vector-effect:non-scaling-stroke} .chart-dot{fill:#FF5C93} .chart-target{stroke:#B98BEF;stroke-width:1.5;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.compare{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--line)} .compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .compare-lab{position:absolute;left:6px;right:6px;bottom:6px;display:flex;justify-content:space-between;font-size:.7rem;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#goalSlider{width:100%;accent-color:#FF5C93}
.timeline-goal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .tl-media img,.tl-media video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--line)} .tl-meta{font-size:.72rem;text-align:center;margin-top:2px}
.pgroup{font-family:Fredoka;font-size:.95rem;color:var(--ink-2);margin:10px 0 0;padding:0 4px}
.pm-demo{width:150px;height:170px;border-radius:14px;overflow:hidden;background:#000;display:grid;place-items:center} .demo-media{width:100%;height:100%;object-fit:cover} .demo-link{color:#fff;font-weight:800;padding:10px;text-align:center}
.demo-now{width:100%;max-width:260px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#000;margin:0 auto 6px;display:grid;place-items:center}
.mg-body{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:4px}
.mg-say{font-family:Fredoka;font-size:1.5rem;line-height:1.15;text-align:center;min-height:36px;color:var(--ink)}
.mg-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:720px}
.mg-target,.mg-cam{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:linear-gradient(#FFF7FA,#FFE6EF)}
.mg-target svg{width:100%;height:100%} .mg-cam{background:#000} .mg-cam video,.mg-cam canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.mg-lab{position:absolute;left:8px;top:6px;background:rgba(255,255,255,.85);color:#4A2340;font-weight:800;font-size:.75rem;padding:2px 8px;border-radius:999px}
.mg-flash{position:absolute;inset:0;background:#2E9E6B;opacity:0;pointer-events:none} .mg-flash.on{animation:mgflash .6s ease-out} @keyframes mgflash{0%{opacity:.55}100%{opacity:0}}
.mg-count{position:absolute;right:8px;bottom:4px;font-size:3rem;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);margin:0}
.mg-meter{width:100%;max-width:720px;height:16px;border-radius:999px;background:var(--line);overflow:hidden} .mg-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#FFD23F,#2E9E6B);transition:width .1s}
@media (max-width:480px){ .mg-pair{grid-template-columns:1fr 1fr} .mg-say{font-size:1.25rem} }
.stars-card{text-align:center} .stars-big{font-family:Fredoka;font-size:2.2rem;line-height:1.1;color:#D9B26F}
.btn.locked{opacity:.55} .btn.locked small{font-size:.65rem}
.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 12px}
.game-tile{border:2px solid var(--line);border-radius:18px;background:var(--card);padding:14px 8px 10px;text-align:center;cursor:pointer;box-shadow:var(--shadow);color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:2px}
.game-tile:active{transform:translateY(2px);box-shadow:none}
.gt-emoji{font-size:2.4rem;line-height:1.1} .gt-name{font-family:Fredoka;font-size:1.05rem;line-height:1.1;margin-top:4px} .game-tile small{font-size:.7rem;color:var(--ink-2);font-weight:700;line-height:1.2} .gt-best{color:#FF5C93}
.game-tile:nth-child(1){border-color:var(--coral)} .game-tile:nth-child(2){border-color:var(--violet)} .game-tile:nth-child(3){border-color:var(--sun)} .game-tile:nth-child(4){border-color:var(--coral)} .game-tile:nth-child(5){border-color:var(--violet)} .game-tile:nth-child(6){border-color:var(--aqua)}
.mg-seen{min-height:20px;color:var(--ink-2);font-weight:800}
.al-video{background:#000} .al-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.al-judge{font-family:Fredoka;font-size:2rem;min-height:44px;text-align:center;line-height:1.1} .al-judge.perfect{color:#2E9E6B} .al-judge.good{color:#D9B26F} .al-judge.miss{color:var(--ink-2)} .al-judge.nobody{color:#FF5C93;font-size:1.1rem}
.hub-targets{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .hub-targets .chip{border:0;cursor:pointer;font-size:.85rem;padding:6px 10px}
.hub-filter{margin:8px 0;gap:6px} .hub-filter .chip{border:0;cursor:pointer}
.trend{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.trend-cell{background:var(--blush);border-radius:12px;padding:6px 4px;text-align:center} .trend-cell span{font-size:1.2rem;display:block} .trend-cell b{font-size:.8rem;display:block} .trend-cell small{font-size:.65rem;color:var(--ink-2);font-weight:800}
.dots{display:flex;gap:3px;justify-content:center;margin-top:3px} .dots i{width:7px;height:7px;border-radius:50%;background:var(--line);display:block} .dots i.on{background:#2E9E6B}
#coachHub .check .btn{white-space:nowrap;flex:none}
.trick-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line)}
.trick-state{width:40px;height:40px;flex:none;border-radius:50%;border:2px solid var(--line);background:var(--card);font-size:1.2rem;cursor:pointer;color:var(--ink-2)}
.trick-state.learning{border-color:#B98BEF;color:#B98BEF} .trick-state.clean{border-color:#FF5C93;color:#FF5C93;background:var(--blush)} .trick-state.checked{border-color:#D9B26F;color:#D9B26F;background:#FBEBC8}
.rc-cam{position:relative;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:3/4;max-height:58vh} .rc-cam video{width:100%;height:100%;object-fit:cover;display:block} .rc-cam video.mirrored{transform:scaleX(-1)}
.rc-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none} .rc-flash.on{animation:rcflash .35s ease-out} @keyframes rcflash{0%{opacity:.8}100%{opacity:0}}
.rc-big{position:absolute;inset:0;display:grid;place-items:center;font-family:Fredoka;font-weight:700;font-size:6rem;color:#fff;text-shadow:0 4px 16px rgba(0,0,0,.6)}
.rc-strip{display:flex;gap:4px;overflow-x:auto;margin-top:6px;min-height:52px} .rc-strip img{height:52px;border-radius:6px;flex:none}
.btn.violet{background:#EBDDFF;color:#4A2340}
.qs-bars{display:grid;gap:4px;margin:8px 0} .qs-bar{display:flex;align-items:center;gap:6px;font-size:.9rem} .qs-bar small{width:28px;text-align:right}
.qs-track{flex:1;height:12px;border-radius:6px;background:var(--line);overflow:hidden} .qs-fill{height:100%;background:linear-gradient(90deg,#FF5C93,#B98BEF);transition:width .4s}
.qs-boss{display:block;width:100%;text-align:left;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);padding:10px 12px;margin-top:8px;cursor:pointer;font:inherit}
:root[data-palette="ocean"]{--paper:#F3F8FF;--ink:#1F3350;--ink-2:#5F7A99;--line:#D8E6F7;--coral:#3D8BFF;--sun:#FFD27A;--aqua:#9AD2F5;--violet:#B9C4FF;--mint:#D6F0FF;--blush:#E3EEFF;--gold:#E0B85A;--shadow:0 6px 0 rgba(31,51,80,.08)}
:root[data-palette="mint"]{--paper:#F4FBF6;--ink:#1E3B2C;--ink-2:#5E8A6E;--line:#D5EEDD;--coral:#2FB37A;--sun:#FFE08A;--aqua:#A9E6C9;--violet:#C7D9FF;--mint:#DDF6E8;--blush:#E6F7EC;--gold:#D9B26F;--shadow:0 6px 0 rgba(30,59,44,.08)}
:root[data-palette="sunset"]{--paper:#FFF6F0;--ink:#4A2A1A;--ink-2:#946A55;--line:#F8DCCB;--coral:#FF7A45;--sun:#FFCF5C;--aqua:#FFB89B;--violet:#E9B7E8;--mint:#FFE4D3;--blush:#FFE9DD;--gold:#E0A84A;--shadow:0 6px 0 rgba(74,42,26,.08)}
:root[data-palette="grape"]{--paper:#F8F4FF;--ink:#2E1F4E;--ink-2:#73629A;--line:#E6DCF8;--coral:#8B5CF6;--sun:#FBD36B;--aqua:#C7B3FF;--violet:#D9CCFF;--mint:#EDE6FF;--blush:#EFE8FF;--gold:#D9B26F;--shadow:0 6px 0 rgba(46,31,78,.08)}
.bites .bite{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px dashed var(--line);font-weight:700} .bites .bite.done{opacity:.55;font-weight:500} .bites .bite.now{font-size:1.05rem}
.bites .cheer{font-family:Fredoka;font-size:1.15rem;line-height:1.2;margin:10px 0 4px} .bite-tips{font-size:.85rem;color:var(--ink-2);display:grid;gap:4px;margin-top:6px}
.prompter{text-align:left;margin:8px auto;max-width:520px} .prompter .pl{display:flex;gap:8px;align-items:baseline;padding:3px 0;transition:all .3s} .prompter .pl-t{font-size:.75rem;color:var(--ink-2);min-width:36px}
.prompter .pl.past{opacity:.4;font-size:.9rem} .prompter .pl.next{opacity:.75;font-size:.95rem} .prompter .pl.now .pl-m{font-family:Fredoka;font-size:1.6rem;line-height:1.15;color:#FF5C93} .prompter .pl-l{font-size:.8rem;color:var(--ink-2)}
.mind-steps{font-family:Fredoka;font-size:1.25rem;line-height:1.3;padding-left:24px;margin:10px 0} .mind-steps li{margin:6px 0}
/* Pastel backgrounds stay pastel in dark mode, so their text must stay dark too. */
.review .rv-loved,.review .rv-loved *,.day .ev,.cal .d .ev,.mapbar .soft,.mapbar .loud,.mapbar .fade,.cover-art.sun,.cover-art.violet,.cover-art.aqua{color:#4A2340}
.chip{color:var(--ink)} .chip.aqua,.chip.sun,.chip.violet,.chip.mint,.chip[style*="background:#fff"]{color:#4A2340} .chip.coral{color:#fff}

/* Who's dancing (js/who.js): the picker on Play, the friends card on Me */
.who-row{margin-top:8px} .who-chips{margin-top:6px}
.who-friend{margin-top:8px} .who-friend input{flex:1 1 120px;min-width:0}

/* Drill box (js/drills.js): saved posts as cards, thumbnails on skill pages, the post sheet, the technique book */
.drill-add{margin-bottom:8px} .drill-add input,.drill-add select{width:100%}
.drill-card{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--line)} .drill-card:last-child{border-bottom:0}
.drill-main{min-width:0;display:grid;gap:6px} .drill-note{font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.drill-open{background:none;border:0;padding:0;cursor:pointer;flex:none}
.drill-thumb{display:block;width:96px;height:72px;object-fit:cover;border-radius:12px;background:#000;box-shadow:var(--shadow)}
.drill-generic{display:grid;place-items:center;align-content:center;gap:0;background:linear-gradient(135deg,#FFC2D6,#D9B3FF);color:#4A2340} .drill-generic span{font-size:1.6rem;line-height:1.1} .drill-generic small{font-size:.62rem;font-weight:800}
.drill-dd{display:grid;gap:4px;font-size:.9rem;line-height:1.3} .dd-do{background:#E6F7EC;border-radius:10px;padding:6px 9px} .dd-dont{background:#FFE3E8;border-radius:10px;padding:6px 9px}
.drill-strip{margin:0 0 6px 44px;padding:4px 0 6px} .drill-thumbs{display:flex;gap:6px;overflow-x:auto;padding:4px 0} .drill-thumbs .drill-thumb{width:84px;height:63px}
.pm-demo .drill-strip,#qsArea .drill-strip{margin-left:0}
.drill-player{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000} .drill-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.drill-big{display:grid;place-items:center;gap:4px;padding:26px 10px;border-radius:14px;background:linear-gradient(135deg,#FFC2D6,#D9B3FF);color:#4A2340;text-decoration:none;font-family:Fredoka} .drill-big span{font-size:2.2rem}
.drill-ask{border-bottom:0;margin-top:6px} .drill-for{flex:1 1 160px;min-width:0} #drillTitle a{color:var(--ink);text-decoration:none}
.drill-card.book .drill-dd{font-size:1rem}

/* Dance pet (js/pet.js): the bunny on Today, its moves (CSS animations) and its sheet */
.pet-card{display:flex;gap:10px;align-items:center;padding:10px 12px}
.pet-stage{flex:none;width:96px;height:112px;border:0;background:none;padding:0;cursor:pointer}
.pet-svg{width:100%;height:100%;display:block;overflow:visible}
.pet-info{min-width:0;display:grid;gap:4px} .pet-name{font-family:Fredoka;font-size:1.15rem}
.pet-bubble{background:var(--card);border:2px solid var(--line);border-radius:14px 14px 14px 4px;padding:6px 10px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.pet-sheet-top{width:140px;height:160px;margin:0 auto 6px} .pet-list{display:flex;flex-wrap:wrap;gap:6px} .pet-sheet-top+.row input{width:100%}
.pet-fur{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);cursor:pointer} .pet-fur.on{border-color:var(--coral);box-shadow:0 0 0 2px var(--coral)}
.pet-stage .pet-svg{animation:pet-breathe 3.2s ease-in-out infinite}
.pet-stage.nap .pet-svg{animation:pet-breathe 5s ease-in-out infinite}
.pet-z{animation:pet-z 2.4s ease-in-out infinite} .pet-z.z2{animation-delay:.8s}
.move-wiggle .pet-svg{animation:pet-wiggle .4s ease-in-out 4}
.move-hop .pet-svg{animation:pet-hop .4s ease-out 4}
.move-sway .pet-svg{animation:pet-sway .8s ease-in-out 2}
.move-spin .pet-svg,.move-twirl .pet-svg,.move-pirouette .pet-svg{animation:pet-spin .8s ease-in-out 2}
.move-twirl .pet-svg{animation-duration:.55s;animation-iteration-count:3}
.move-pirouette .pet-svg{animation-duration:.45s;animation-iteration-count:3}
.move-jump .pet-svg,.move-leap .pet-svg{animation:pet-jump .55s ease-out 3}
.move-leap .pet-svg{animation-name:pet-leap}
.move-kick .pet-svg{animation:pet-kick .5s ease-in-out 3}
.move-moon .pet-svg{animation:pet-moon 1.5s linear 1}
.move-finale .pet-svg{animation:pet-spin .5s ease-in-out 2,pet-jump .5s ease-out 1s 1}
.move-stretch .pet-svg{animation:pet-stretch 1.4s ease-in-out 1}
@keyframes pet-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025,.985)}}
@keyframes pet-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes pet-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-16px)}}
@keyframes pet-sway{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-8px) rotate(-6deg)}75%{transform:translateX(8px) rotate(6deg)}}
@keyframes pet-spin{to{transform:rotateY(360deg)}}
@keyframes pet-jump{0%,100%{transform:translateY(0) scale(1)}15%{transform:translateY(0) scale(1.08,.9)}50%{transform:translateY(-22px) scale(.95,1.06)}}
@keyframes pet-leap{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(10px,-24px) rotate(10deg)}}
@keyframes pet-kick{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg) translateY(-6px)}}
@keyframes pet-moon{0%{transform:translateX(0)}50%{transform:translateX(-14px)}100%{transform:translateX(0)}}
@keyframes pet-stretch{0%,100%{transform:scale(1)}40%{transform:scale(.94,1.1)}}
@keyframes pet-z{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.pet-stage .pet-svg,.pet-z,[class*="move-"] .pet-svg{animation:none!important}}

/* Show countdown (js/advent.js): the Today row, the door grid, the reveal and the sticker book */
.advent-card{padding:10px 12px} .advent-ic{font-size:1.8rem;line-height:1}
.advent-reveal{background:linear-gradient(135deg,#FFE3EE,#EBDDFF);border-radius:16px;padding:14px;margin-bottom:10px;text-align:center}
.advent-reveal.pop{animation:advent-pop .6s cubic-bezier(.2,1.4,.4,1)} .advent-text{font-family:Fredoka;font-size:1.15rem;line-height:1.35;margin-top:4px}
.advent-book{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 10px;margin-bottom:10px}
.advent-stickers{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;font-size:1.5rem;line-height:1.2}
.advent-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding-bottom:10px}
.door{aspect-ratio:1;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;align-content:center;gap:0;padding:2px;cursor:pointer;font:inherit;position:relative}
.door-n{font-family:Fredoka;font-weight:700;font-size:.95rem;line-height:1} .door-ic{font-size:1.1rem;line-height:1.1}
.door.ready{background:linear-gradient(135deg,#FF8DB5,#C9A7F5);color:#fff;border-color:transparent;box-shadow:0 3px 0 rgba(74,35,64,.15)}
.door.ready.today{animation:advent-glow 1.8s ease-in-out infinite}
.door.open{background:var(--blush);opacity:.85} .door.locked{opacity:.45} .door.show{border-color:var(--gold)}
.door.today{outline:3px solid var(--coral);outline-offset:1px}
@keyframes advent-pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes advent-glow{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.advent-reveal.pop,.door.ready.today{animation:none}}

/* Dance Dares (js/dares.js): today's dare on Today, "I did it" and one reroll; calm when done */
.dare-card{padding:10px 12px;border-color:var(--violet)} .dare-card.done{border-color:var(--line);opacity:.9}
.dare-head{flex-wrap:nowrap;align-items:flex-start} .dare-head .grow{min-width:0} .dare-ic{font-size:1.8rem;line-height:1} .dare-text{font-family:Fredoka;font-size:1.05rem;line-height:1.3;margin-top:2px}
.dare-card.done .dare-text{color:var(--ink-2)} .dare-btns{margin-top:8px;flex-wrap:wrap;gap:6px} .dare-count{margin-top:6px}
/* Trick cards (js/cards.js): the binder grid, earned / shiny / locked cards and the big view */
.tc-group{margin:14px 0 6px;display:flex;align-items:center;gap:6px;border-left:5px solid var(--c);padding-left:8px}
.tc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tcard{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;min-height:150px;padding:5px 5px 6px;border-radius:12px;border:3px solid var(--c);background:linear-gradient(180deg,var(--c) 0 22%,#FFF8FB 22% 100%);color:#4A2340;font:inherit;text-align:center;cursor:pointer;box-shadow:0 3px 0 rgba(74,35,64,.15)}
.tc-top{display:flex;justify-content:space-between;width:100%;gap:2px;font-size:.62rem;font-weight:800;color:#fff;line-height:1.2}
.tc-style{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-ic{flex:1;display:flex;align-items:center;justify-content:center;font-size:2rem;line-height:1}
.tc-photo{flex:1;min-height:0;width:100%;object-fit:cover;border-radius:8px}
.tc-name{font-family:Fredoka;font-size:.78rem;line-height:1.15;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tc-foot{font-size:.6rem;font-weight:800;opacity:.75}
.tc-extra{display:flex;gap:6px;justify-content:center;font-size:.62rem;font-weight:800}
.tcard.tc-locked{border-style:dashed;border-color:#CBB8C4;background:#F3ECF0;box-shadow:none;color:#9A8592}
.tcard.tc-locked .tc-top{color:#9A8592} .tcard.tc-locked .tc-ic{font-family:Fredoka;font-size:1.8rem;color:#CBB8C4}
.tcard.tc-shiny{background:linear-gradient(180deg,var(--c) 0 22%,transparent 22%),linear-gradient(135deg,#FFE3EE,#FFF6D8 30%,#DFF3FF 55%,#EBDDFF 80%,#FFE3EE)}
.tcard.tc-shiny::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.8) 48%,rgba(255,255,255,0) 60%);background-size:260% 100%;background-position:100% 0;animation:tc-shine 3.2s ease-in-out infinite}
.tcard.tc-shiny .tc-foot{opacity:1;color:#B07A12} .tcard>*{position:relative;z-index:1}
@keyframes tc-shine{0%{background-position:100% 0}60%,100%{background-position:-60% 0}}
.tc-bigwrap{display:flex;justify-content:center;margin:8px 0}
.tcard.big{width:min(260px,72vw);min-height:350px;cursor:default;padding:10px 10px 12px;gap:6px;border-width:4px;border-radius:18px}
.tcard.big .tc-top{font-size:.8rem} .tcard.big .tc-ic{font-size:4.5rem} .tcard.big .tc-name{font-size:1.25rem;-webkit-line-clamp:4} .tcard.big .tc-foot,.tcard.big .tc-extra{font-size:.8rem}
@media (prefers-reduced-motion:reduce){.tcard.tc-shiny::after{animation:none;background-position:40% 0}}
/* Costume designer (js/costume.js) */
.cos-top{display:flex;gap:12px;align-items:flex-start} .cos-preview{flex:none;width:118px;height:226px;border-radius:16px;background:linear-gradient(#EBDDFF,#FFD6E5);overflow:hidden} .cos-preview svg{width:100%;height:100%;display:block}
.cos-side{flex:1 1 auto;min-width:0}
.cos-saved{display:flex;gap:8px;overflow-x:auto;padding:8px 0 4px;margin-top:4px}
.cos-thumb{flex:none;width:64px;border:2px solid var(--line);border-radius:12px;background:var(--card);padding:2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;color:var(--ink);font:inherit} .cos-thumb svg{width:56px;height:107px;display:block} .cos-thumb small{font-size:.68rem;line-height:1.15;max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700} .cos-thumb.on{border-color:var(--coral);box-shadow:0 0 0 2px var(--coral)} .cos-thumb.add{justify-content:center;font-size:1.6rem;min-height:111px;border-style:dashed}
.cos-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px} .cos-sw{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);cursor:pointer;font-size:.75rem;padding:0} .cos-sw.on{border-color:var(--coral);box-shadow:0 0 0 2px var(--coral)} .cos-sw.locked{opacity:.55}
/* Glow-Up Flipbook (js/glow.js): the Today nudge, the Me card, the flipbook stage and first vs now */
.glow-nudge{margin:0 0 10px;border-color:var(--violet)}
.glow-picks{display:grid;grid-template-columns:1fr;gap:6px;margin:6px 0}
.glow-pick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:8px 10px;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.glow-pick small{color:var(--ink-2);font-size:.8rem;line-height:1.3} .glow-pick.on{border-color:var(--coral)}
.glow-me{align-items:flex-start;gap:10px;flex-wrap:nowrap} .glow-pose{flex:none;width:64px;height:78px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.55);border-radius:14px}
.glow-av{width:64px;height:78px} .glow-pose-ic{font-size:2rem}
.glow-book{position:relative;width:100%;max-width:420px;margin:0 auto 10px;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:var(--blush)}
.glow-page{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .15s} .glow-page.on{opacity:1}
.glow-page img{width:100%;height:100%;object-fit:cover;display:block}
.glow-month{position:absolute;left:10px;bottom:10px;padding:4px 12px;border-radius:999px;background:rgba(74,35,64,.78);color:#fff;font-family:Fredoka;font-size:1.1rem}
.glow-ctl{gap:8px;align-items:center;margin-bottom:8px} .glow-ctl input[type=range]{min-width:0;accent-color:#FF5C93}
.glow-vs{display:grid;grid-template-columns:1fr 1fr;gap:6px} .glow-vs figure{margin:0;border-radius:14px;overflow:hidden;background:var(--blush)}
.glow-vs img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block} .glow-vs figcaption{text-align:center;font-weight:800;font-size:.85rem;padding:4px}
.glow-grown{text-align:center;font-family:Fredoka;font-size:1.15rem;margin:8px 0}
@media (prefers-reduced-motion:reduce){.glow-page{transition:none}}
/* Teach It (js/games/teach.js) */
.teach-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.teach-slot{display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 2px;border-radius:12px;border:2px dashed var(--line);background:var(--card);color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.teach-slot b{font-family:Fredoka;font-size:.85rem;color:var(--ink-2)} .teach-slot span{font-size:1.3rem;line-height:1.2} .teach-slot small{font-size:.58rem;line-height:1.1;overflow-wrap:break-word;max-width:100%;text-align:center}
.teach-slot.full{border-style:solid;border-color:var(--sun)} .teach-slot.on{border-color:var(--coral);background:var(--blush)}
.teach-moves{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.teach-move{display:flex;flex-direction:column;align-items:center;padding:6px 0;min-width:0} .teach-move span{font-size:1.3rem} .teach-move small{font-size:.58rem;line-height:1.1;letter-spacing:-.01em;overflow-wrap:break-word;max-width:100%}
.teach-view{position:relative}
.teach-count{position:absolute;top:6px;right:12px;font-family:Fredoka;font-size:3.6rem;font-weight:700;line-height:1;color:var(--coral);text-shadow:0 3px 0 rgba(74,35,64,.12)}
.teach-count.lead{color:#B98BEF}
/* Count Along (js/games/count.js): the eight counts and a big tap pad */
.ct-counts{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:8px 0}
.ct-counts span{font-family:Fredoka;font-size:1.35rem;text-align:center;padding:8px 0;border-radius:12px;background:var(--blush);color:var(--ink-2);transition:background .08s,color .08s}
.ct-counts span.one{font-weight:800} .ct-counts span.on{background:var(--aqua);color:#fff} .ct-counts span.on.one{background:var(--coral)}
.ct-pad{display:block;width:100%;min-height:180px;border:3px solid var(--aqua);border-radius:24px;background:var(--card);color:var(--ink);font-family:Fredoka;font-size:2.2rem;letter-spacing:.1em;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:var(--shadow)}
.ct-pad.hit{animation:cthit .18s ease-out} @keyframes cthit{0%{background:var(--aqua);color:#fff;transform:scale(.98)}100%{background:var(--card);transform:scale(1)}}
.ct-say{font-weight:700;min-height:22px;margin-top:8px;line-height:1.35}

/* What's new (js/news.js): the Today row and the sheet with "Show me how" steps */
.news-card .news-ic{font-size:1.8rem;line-height:1}
.news-intro{margin:0 0 10px}
.news-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.news-item .news-e{font-size:1.9rem;line-height:1;min-width:2.2rem;text-align:center}
.news-btns{margin-top:6px;flex-wrap:wrap;gap:6px}
.news-how{text-align:center;padding:4px 2px}
.news-how h3{margin:4px 0 2px}
.news-big{font-size:3.4rem;line-height:1.1}
.news-step{font-size:1.15rem;line-height:1.4;margin:14px 4px 16px;min-height:4.2em}
.news-dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.news-dots span{width:9px;height:9px;border-radius:50%;background:var(--line)} .news-dots span.on{background:var(--coral)}
.news-nav{flex-wrap:wrap;gap:6px}

/* The talking helper (js/buddy.js): her pet in the corner above the tabs, a speech bubble with one next step */
.buddy{position:fixed;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}
.buddy[hidden],body.modal .buddy{display:none}
.buddy-pet{pointer-events:auto;width:60px;height:68px;padding:0;border:0;background:var(--card);border-radius:50% 50% 46% 46%;box-shadow:0 3px 0 rgba(74,35,64,.14),0 6px 14px rgba(255,92,147,.25);-webkit-tap-highlight-color:transparent;cursor:pointer;animation:buddy-bob 3.2s ease-in-out infinite}
.buddy-pet svg{width:100%;height:100%}
.buddy.talking .buddy-pet{animation:buddy-hop .6s ease-out 2}
@keyframes buddy-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes buddy-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}}
.buddy-bubble{pointer-events:auto;position:relative;width:min(320px,calc(100vw - 36px));background:var(--card);border:2px solid var(--coral);border-radius:18px 18px 6px 18px;padding:12px 14px 8px;box-shadow:0 6px 18px rgba(74,35,64,.18);animation:buddy-pop .25s cubic-bezier(.34,1.56,.64,1)}
@keyframes buddy-pop{from{transform:scale(.7);opacity:0;transform-origin:bottom right}to{transform:scale(1);opacity:1}}
.buddy-x{position:absolute;top:4px;right:6px;border:0;background:none;color:var(--ink-2);font-size:1rem;padding:4px 6px;cursor:pointer}
.buddy-open{font-family:Fredoka;font-weight:700;color:var(--coral);padding-right:20px;margin-bottom:2px}
.buddy-text{font-weight:800;line-height:1.35}
.buddy-fact{margin-top:6px;font-size:.85rem;color:var(--ink-2)}
.buddy-btns{margin-top:8px;gap:6px;flex-wrap:wrap}
.buddy-quiet{display:block;margin:6px 0 0 auto;font-size:.75rem}
@media (prefers-reduced-motion:reduce){.buddy-pet,.buddy.talking .buddy-pet,.buddy-bubble{animation:none}}
.buddy-hint{margin-top:6px;font-size:.75rem;color:var(--ink-2)}