:root{
  --bg:#faf6ef;--card:#fff;--ink:#27302a;--muted:#78807a;--accent:#2e7a52;--accent-d:#resolve;--accent-soft:#e6f2ea;--line:#ece5d8;--warn:#c4492a;
  --shadow:0 1px 2px rgba(60,45,20,.06),0 8px 24px rgba(60,45,20,.07);--shadow-h:0 2px 4px rgba(60,45,20,.08),0 14px 32px rgba(60,45,20,.13);
  --l1:91%;--l2:80%;--s:80%;--radius:18px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
:root{--accent-d:#215c3b}
@media (prefers-color-scheme:dark){:root{
  --bg:#141714;--card:#1d211d;--ink:#eeece5;--muted:#a0a79f;--accent:#5fc08a;--accent-d:#86d6a8;--accent-soft:#233229;--line:#2e342d;--warn:#ef8a66;
  --shadow:0 1px 2px #0006,0 8px 24px #0004;--shadow-h:0 2px 4px #0007,0 14px 32px #0006;--l1:26%;--l2:19%;--s:45%}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
dialog:focus{outline:none}
body{margin:0;font:16px/1.55 var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);letter-spacing:-.01em}
h2{margin:.2em 0 .6em;font-size:1.6rem}h3{margin:.8em 0 .3em}

/* header + nav */
header{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:max(20px,env(safe-area-inset-top)) 16px 8px}
h1{font-size:1.7rem;margin:0;display:flex;align-items:center;gap:10px}
.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#ffd9a8,#ffb48a);font-size:1.4rem;box-shadow:var(--shadow)}
.who{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.9rem}
nav{max-width:1100px;margin:0 auto;display:flex;gap:6px;padding:8px 16px 4px;overflow-x:auto;position:sticky;top:0;z-index:5;background:linear-gradient(var(--bg) 80%,transparent)}
nav button{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:8px 18px;font:inherit;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap;transition:.15s}
nav button:hover{color:var(--ink)}
nav button.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:var(--shadow)}
main{max-width:1100px;margin:0 auto;padding:16px}

/* controls */
button,select,input,textarea{font:inherit;color:inherit}
select,input,textarea{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 13px;max-width:100%}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
input[type=checkbox]{accent-color:var(--accent)}
.btn{background:var(--accent);color:#fff;border:0;border-radius:12px;padding:9px 16px;font-weight:500;cursor:pointer;transition:.15s}
.btn:hover{background:var(--accent-d);transform:translateY(-1px)}
.btn.ghost{background:none;color:var(--accent);border:1px solid var(--line)}.btn.ghost:hover{background:var(--accent-soft);color:var(--accent)}
.btn.danger{background:none;color:var(--warn);border:1px solid var(--line)}.btn.danger:hover{background:none;border-color:var(--warn)}
.btn.small{padding:4px 11px;font-size:.84rem;border-radius:10px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.muted{color:var(--muted);font-size:.9rem}
.chip{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:6px 14px;cursor:pointer;font-size:.9rem;transition:.15s}
.chip:hover{border-color:var(--accent)}.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.empty{padding:40px 20px;text-align:center;color:var(--muted);grid-column:1/-1;background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);margin-bottom:14px}

/* art tiles */
.art{position:relative;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,hsl(var(--h) var(--s) var(--l1)),hsl(calc(var(--h) + 28) var(--s) var(--l2)))}
.art::before,.art::after{content:"";position:absolute;border-radius:50%;background:#fff;opacity:.28}
.art::before{width:70%;aspect-ratio:1;top:-30%;right:-18%}.art::after{width:45%;aspect-ratio:1;bottom:-25%;left:-10%;opacity:.18}
.art span{position:relative;font-size:3.6rem;filter:drop-shadow(0 4px 6px rgba(0,0,0,.18));transition:transform .25s}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.art.thumb{width:48px;height:48px;border-radius:14px;flex:none}.art.thumb span{font-size:1.5rem}
.art.thumb::before,.art.thumb::after{display:none}
.art.hero{height:170px;margin:-20px -20px 14px;border-radius:14px 14px 0 0}.art.hero span{font-size:5rem}

/* categories */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:12px;margin-bottom:18px}
.cat{position:relative;text-align:left;border:2px solid transparent;border-radius:var(--radius);padding:14px 14px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(135deg,hsl(var(--h) var(--s) var(--l1)),hsl(calc(var(--h) + 28) var(--s) var(--l2)));box-shadow:var(--shadow);transition:.18s;overflow:hidden}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
.cat.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-h)}
.cat .ce{font-size:2.2rem;line-height:1.1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.15))}
.cat b{font-family:var(--serif);font-size:1.05rem;margin-top:4px}.cat small{color:var(--ink);opacity:.65}
.shead{margin:6px 0 12px}
.filters input[type=search]{flex:1 1 220px;min-width:180px}

/* recipe cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.rcard{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.2s}
.rcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-h)}
.rimg{position:relative;cursor:pointer;aspect-ratio:16/10;display:block}.rimg .art{position:absolute;inset:0}
.rcard:hover .art span{transform:scale(1.12) rotate(-4deg)}
.badge{position:absolute;top:10px;left:10px;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.92);color:#333;backdrop-filter:blur(4px)}
.badge.vegan{color:#166a3a}.badge.vegetarian{color:#476a16}.badge.pescatarian{color:#17598a}.badge.meat{color:#8a3416}
.badge.inline{position:static;background:var(--accent-soft)}
.rbody{padding:14px 16px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.rbody h3{margin:0;font-size:1.08rem;line-height:1.3;cursor:pointer}.rbody h3:hover{color:var(--accent)}
.meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.84rem}
.meta.big{font-size:.92rem;margin-bottom:6px;align-items:center}
.rfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto}
.allergens{display:flex;flex-wrap:wrap;gap:4px}
.tag{display:inline-block;font-size:.7rem;padding:2px 9px;border-radius:99px;background:var(--line)}
.tag.allergen{background:#fbecc9;color:#7a5410}
@media (prefers-color-scheme:dark){.tag.allergen{background:#4a3a14;color:#f1d089}.badge{background:rgba(30,33,30,.85);color:#eee}.badge.inline{background:var(--accent-soft)}}

/* planner */
.week{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:16px}
.day{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.day h3{margin:0 0 6px;font-size:1.15rem}
.left{margin:2px 0 10px;font-size:.92rem}.left b{color:var(--accent)}.left.over b{color:var(--warn)}
.bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:5px}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#8fd0a8);transition:width .3s}
.left.over .bar i{background:var(--warn)}
.slot{border-top:1px solid var(--line);padding:10px 0}
.slot .lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:5px;font-weight:600}
.srow{display:flex;gap:10px;align-items:center}
.slot a{color:var(--ink);font-weight:600;cursor:pointer;text-decoration:none;line-height:1.25;display:block}.slot a:hover{color:var(--accent)}
.slot .muted{font-size:.8rem}
.acts{display:flex;gap:6px;margin-top:6px}.day>.acts{margin-top:10px}

/* dialogs */
dialog{border:0;border-radius:20px;background:var(--card);color:var(--ink);max-width:660px;width:calc(100% - 24px);padding:20px;max-height:90vh;max-height:90dvh;box-shadow:0 30px 80px #0006}
dialog::backdrop{background:#1a1a14a8;backdrop-filter:blur(3px)}
dialog h2{margin-top:0}
dialog ul,dialog ol{padding-left:1.3em}dialog li{margin:.35em 0}
dialog ol li::marker{color:var(--accent);font-weight:700}
#picker{max-width:560px}#plist{max-height:50vh;overflow:auto}
.prow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.prow a{font-weight:600;cursor:pointer}

/* shopping + forms */
.shop{background:var(--card);border-radius:var(--radius);padding:8px 20px 16px;box-shadow:var(--shadow);columns:260px;column-gap:32px}
.aisle{break-inside:avoid;margin-bottom:10px}
.shop .aisle h3{margin:0 0 6px;padding-top:12px}
.shop h3{border-bottom:1px solid var(--line);padding-bottom:4px;font-size:1rem;break-after:avoid;color:var(--accent)}
.shop label{display:flex;gap:10px;align-items:center;padding:4px 0;cursor:pointer;break-inside:avoid}
.shop input:checked+span{text-decoration:line-through;color:var(--muted)}
.form{display:grid;gap:14px;max-width:580px;background:var(--card);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.form label{display:grid;gap:5px;font-weight:600}.form .row{display:flex;gap:16px;flex-wrap:wrap}
.checks{display:flex;gap:8px 16px;flex-wrap:wrap}.checks label{display:flex;gap:6px;align-items:center;font-weight:400}

@media (max-width:640px){
  h1{font-size:1.4rem}.logo{width:36px;height:36px;font-size:1.2rem}
  nav{gap:4px;padding:8px 12px 4px}nav button{flex:1;padding:8px 6px;font-size:.84rem;text-align:center}
  main{padding:12px}
  .cats{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 12px;gap:10px;margin:0 -12px 14px;padding:4px 12px 10px;-webkit-overflow-scrolling:touch}
  .cat{flex:0 0 112px;scroll-snap-align:start;padding:10px 12px;gap:0}
  .cat .ce{font-size:1.7rem}.cat b{font-size:.95rem;margin-top:2px}.cat small{font-size:.75rem}
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .rimg{aspect-ratio:4/3}.art span{font-size:2.6rem}
  .rbody{padding:10px 12px 12px}.rbody h3{font-size:.95rem}.meta{gap:8px;font-size:.76rem}
  .rfoot .allergens{display:none}.rfoot .btn{width:100%}
  .week{grid-template-columns:1fr}
  .art.hero{height:130px}
  dialog{padding:16px;border-radius:18px}.art.hero{margin:-16px -16px 12px}
}
@media (max-width:360px){.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{header,nav,.toolbar,.acts,.btn{display:none!important}main{padding:0}body{background:#fff}.day,.shop{box-shadow:none;border:1px solid #ddd}}

.cuis-label{font-family:var(--serif);font-weight:600;margin:2px 2px 8px;color:var(--muted);font-size:.95rem}
.cuisines{margin-bottom:18px}
.cuisines .cat{padding:10px 12px}.cuisines .cat .ce{font-size:1.7rem}

/* nav labels */
nav .short{display:none}
@media (max-width:640px){nav .full{display:none}nav .short{display:inline}}
/* meal builder */
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.bcard{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);min-width:0}
.bcard h2{font-size:1.2rem;margin:0 0 12px}.bcard h3{font-size:1rem;margin:14px 0 6px}
.bigscan{width:100%;padding:14px;font-size:1.05rem;margin-bottom:12px}
form.inline{display:flex;gap:8px;margin-bottom:10px}form.inline input{flex:1;min-width:0}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;padding:2px 0;font:inherit;text-decoration:underline}
.bmsg{margin:10px 0;font-size:.92rem;min-height:1.2em}
.small{font-size:.82rem}.warn{color:var(--warn);font-size:.85rem}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.mform{display:grid;gap:10px;border:1px dashed var(--line);border-radius:14px;padding:12px;margin-top:8px}
.mform label,.bcard label{display:grid;gap:4px;font-weight:600;font-size:.88rem}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.row2{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-bottom:10px}
.bcard input,.bcard select,.bcard textarea{width:100%;font-weight:400}
.block{margin-bottom:12px}
.item{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.iname{min-width:0}.imac{font-size:.8rem}
.iamt{display:flex;align-items:center;gap:6px;flex:none}.iamt input{width:76px;padding:6px 8px}
.x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1rem;padding:6px}.x:hover{color:var(--warn)}
.totals{background:var(--accent-soft);border-radius:14px;padding:12px;margin:14px 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.stats b{display:block;font-family:var(--serif);font-size:1.3rem}.stats small{color:var(--muted)}
.split{display:flex;height:10px;border-radius:99px;overflow:hidden;margin:10px 0 6px;background:var(--line)}
.sp{background:#e07a5f}.sc{background:#f2cc8f}.sf{background:#81b29a}.split i{display:block;height:100%}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 2px 0 6px}
#scanner{max-width:460px}
.vwrap{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:4/3}
.vwrap video{width:100%;height:100%;object-fit:cover;display:block}
.reticle{position:absolute;inset:25% 10%;border:3px solid #ffffffcc;border-radius:12px;box-shadow:0 0 0 999px #0005;pointer-events:none}
@media (max-width:760px){.bgrid{grid-template-columns:1fr}.row4{grid-template-columns:1fr 1fr}.item{flex-direction:column;align-items:stretch}.iamt{justify-content:flex-end}}

.mform .checks{display:flex;flex-wrap:wrap;gap:4px 12px}.mform .checks label{display:flex;gap:5px;align-items:center;font-weight:400}.mform .checks input{width:auto}

/* macros */
.macros{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.78rem;color:var(--muted);align-items:center}
.macros em{font-style:normal;opacity:.7}.macros .dot{margin:0 3px 0 0}
.dmac{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:.82rem;margin:-4px 0 10px;align-items:center}
.dmac .dot{margin:0 3px 0 0}.dmac .est{color:var(--muted);cursor:help}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:3px;margin-bottom:14px}
.seg button{border:0;background:none;border-radius:99px;padding:7px 16px;cursor:pointer;color:var(--muted);font-weight:500}
.seg button.on{background:var(--accent);color:#fff}
.pending{background:var(--accent-soft);border-radius:14px;padding:12px;margin:12px 0}

/* floating log button + quick log dialog */
#fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--accent),#3f9a68);color:#fff;border:0;border-radius:99px;padding:14px 20px 14px 16px;font:600 1rem var(--sans);cursor:pointer;
  box-shadow:0 6px 20px rgba(30,90,60,.4),0 2px 4px rgba(0,0,0,.2);transition:transform .15s}
#fab:hover{transform:translateY(-2px) scale(1.03)}#fab:active{transform:scale(.97)}
#fab .fi{font-size:1.5rem;line-height:1;font-weight:400}
@media (max-width:640px){#fab{padding:14px 16px}#fab .ft{display:none}#fab .fi{font-size:1.7rem}}
main{padding-bottom:96px}
#quicklog{max-width:480px}
.qlhead{display:flex;justify-content:space-between;align-items:center}.qlhead h2{margin:0}
.qlday{display:grid;gap:4px;font-weight:600;font-size:.88rem;margin:10px 0}.qlday select{width:100%;font-weight:400}
#quicklog .totals{margin:10px 0}#quicklog .bigscan{width:100%;padding:14px;font-size:1.05rem;margin:6px 0 12px}
#quicklog form.inline input{flex:1;min-width:0}
#quicklog .mform label{display:grid;gap:4px;font-weight:600;font-size:.88rem}#quicklog .mform input,#quicklog .mform select{width:100%;font-weight:400}
@media print{#fab{display:none!important}}

/* quick add chips */
.qh{margin:6px 0 8px;font-size:1rem}.qgroup{margin-bottom:10px}.qlabel{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;margin-bottom:5px}
.qchips{display:flex;flex-wrap:wrap;gap:6px}
.qchip{position:relative;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:7px 12px 7px 9px;cursor:pointer;text-align:left;transition:.12s;line-height:1.15}
.qchip:hover{border-color:var(--accent)}.qchip:active{transform:scale(.96)}
.qchip.on{background:var(--accent-soft);border-color:var(--accent)}
.qi{font-size:1.25rem}.qn{font-size:.85rem;font-weight:600}.qchip small{display:block;font-size:.7rem;color:var(--muted);font-weight:400}
.qt{display:flex;flex-direction:column;min-width:0}.qchip .qn{display:block}.qchip .qb{position:absolute;top:-7px;right:-5px;background:var(--accent);color:#fff;border-radius:99px;font-size:.72rem;padding:1px 7px}
.qdiv{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.8rem;margin:14px 0 8px}
.qdiv:before,.qdiv:after{content:"";flex:1;height:1px;background:var(--line)}

@media (max-width:640px){.qchip{flex:1 1 calc(50% - 6px);min-width:0}.qchip .qn{font-size:.8rem}}
#quicklog .bmsg{min-height:0;margin:6px 0}

/* health tab */
#health .seg{margin-bottom:8px}.hbar2{margin-bottom:12px;min-height:30px}
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
.hcard{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);min-width:0}
.hcard h2{font-size:1.2rem;margin:0 0 10px}.hcard h3{font-size:1rem;margin:14px 0 6px}
.hlist{margin-top:8px}.hchk{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);cursor:pointer}
.hchk input{width:20px;height:20px;flex:none}.hchk input:checked+span{text-decoration:line-through;color:var(--muted)}
.hcan{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:6px 0 10px}
.hcan b{font-family:var(--serif);font-size:2.4rem;line-height:1}.hcan b.over{color:var(--warn)}
.hcan .btn{width:52px;height:52px;font-size:1.5rem;padding:0;border-radius:99px}
.hrows,.hstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hrows>div,.hstat{display:flex;flex-direction:column;gap:1px;background:var(--accent-soft);border-radius:14px;padding:10px 12px;min-width:0}
.hrows b,.hstat b{font-family:var(--serif);font-size:1.1rem}.hrows small,.hstat small{color:var(--muted);font-size:.74rem}
.hrows .muted,.hstat .muted{font-size:.78rem}
.hwk{padding-left:1.2em;margin:4px 0}.hwk li{margin:.25em 0;font-size:.92rem}
.hchart svg{width:100%;height:auto;display:block;margin-top:4px}
.hbar{fill:var(--accent)}.hbar.over{fill:var(--warn)}.hline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.hdot{fill:var(--accent)}.hnull{fill:var(--line)}.hguide{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.hlab{fill:var(--muted);font-size:9px;font-family:var(--sans)}
.htable{width:100%;border-collapse:collapse;font-size:.94rem}.htable th{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:4px 6px}
.htable td{padding:7px 6px;border-top:1px solid var(--line)}.htable td:nth-child(n+2),.htable th:nth-child(n+2){text-align:right}
.hsum{width:100%;min-height:180px;resize:vertical;font:.86rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.hform{display:grid;gap:10px;margin:10px 0}.hform label{display:grid;gap:5px;font-weight:600;font-size:.88rem}.hform input{width:100%;font-weight:400}
.hurl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;word-break:break-all}.hurl code,.hsteps code{background:var(--accent-soft);border-radius:6px;padding:1px 6px;font-size:.84rem}
.hsteps{padding-left:1.2em;margin:6px 0}.hsteps li{margin:.5em 0}.hmsg{min-height:1.2em}
.hchip{font-size:.82rem;color:var(--muted);margin:-4px 0 10px}
@media (max-width:640px){.hgrid{grid-template-columns:1fr}.hrows,.hstats{grid-template-columns:1fr 1fr}}
@media print{#health{display:none!important}}

/* Home screen creature */
.chome{text-align:center;max-width:520px;margin:0 auto}
.cpetbtn{background:none;border:0;padding:0;cursor:pointer;width:100%;max-width:440px;-webkit-tap-highlight-color:transparent}
.cpet{width:100%;height:auto;display:block;overflow:visible}
.cbody{transform-origin:50% 92px;animation:cbob 3s ease-in-out infinite}
.cjump .cbody{animation:cjump .5s ease-out}
@keyframes cbob{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,.97)}}
@keyframes cjump{0%{transform:scale(1.1,.85)}40%{transform:translateY(-14px) scale(.95,1.08)}100%{transform:none}}
.cbubble{display:inline-block;background:var(--bg,#faf6ef);border:2px solid #e5533d;border-radius:16px;padding:8px 14px;margin:8px 0 12px;font-weight:600}
.cname{margin:4px 0}
.cbar{height:10px;background:rgba(0,0,0,.1);border-radius:6px;margin:14px 0 10px;overflow:hidden}
.cbar span{display:block;height:100%;background:#e5533d;border-radius:6px;transition:width .4s}
.cparts{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.cpart{font-size:.85rem;padding:3px 10px;border-radius:12px;background:rgba(0,0,0,.06)}
.cpart.on{background:rgba(255,154,60,.25)}
.cwing{animation:cflap 1.6s ease-in-out infinite}
@keyframes cflap{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.cbody,.cjump .cbody,.cwing{animation:none}}

.cscene{width:100%;height:auto;display:block;border-radius:18px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.cfire{transform-box:fill-box;transform-origin:50% 100%;animation:cflick .5s ease-in-out infinite alternate}
@keyframes cflick{from{transform:scale(1,1)}to{transform:scale(.9,1.12)}}
@media (prefers-reduced-motion:reduce){.cfire{animation:none}}
.cscene .cpet{width:80px;height:80px}