@font-face{font-family:Nunito;src:url('assets/nunito-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Nunito;src:url('assets/nunito-500.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Nunito;src:url('assets/nunito-600.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Nunito;src:url('assets/nunito-700.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Nunito;src:url('assets/nunito-800.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Nunito;src:url('assets/nunito-900.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
:root{
  --brand:#C45117;
  --brand-hover:#A73E0D;
  --brand-bright:#F47A35;
  --brand-soft:#FFF0E6;
  --ink:#293C38;
  --muted:#60716D;
  --paper:#F7F9FA;
  --white:#FFFFFF;
  --line:#DFE6E5;
  --green:#207258;
  --mint:#E9F5EE;
  --blue:#276EA8;
  --sky:#EAF4FC;
  --yellow:#FFDA73;
  --gold-ink:#805A0D;
  --gold-soft:#FFF4D5;
  --coral:var(--brand);
  --pink:#AA4E74;
  --pink-soft:#FBEAF1;
  --danger:#B33F36;
  --pot-spend:var(--brand-bright);
  --pot-save:var(--blue);
  --pot-invest:var(--green);
  --pot-give:var(--pink);
  --radius:8px;
  --control-radius:6px;
  --space-xs:8px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:32px;
  --font-family:Nunito,'Segoe UI',sans-serif;
  font-family:var(--font-family);
}
body{background:var(--paper);color:var(--ink)}
.brand{color:var(--ink);font-weight:900;white-space:nowrap}
.brand em{color:var(--brand)}
.brand-name{display:block;font-size:19px;line-height:1.1;font-weight:900;white-space:nowrap}
.brand-name small{display:block;font-size:12px;color:var(--brand);margin-top:3px;font-weight:900}
.brand-example .brand-name{font-size:25px}
.brand-example.dark .brand-name small{color:var(--yellow)}
.brand-mark{background:var(--brand-bright);color:var(--ink);border-radius:var(--radius)}
.topbar,.sidebar{background:var(--white);border-color:var(--line)}
.mode-switch{background:var(--paper);border-color:var(--line)}
.mode-switch button.active{background:var(--brand);color:var(--white)}
.profile-select{background:var(--paper);border-color:var(--line)}
.nav button.active{color:var(--brand);background:var(--brand-soft)}
.nav button:hover{background:var(--brand-soft)}
.nav button.active svg{stroke-width:2.2}
.eyebrow{color:var(--brand);font-weight:900;letter-spacing:0}
.btn,.btn.coral{background:var(--brand);color:var(--white);border-radius:var(--control-radius)}
.btn:hover,.btn.coral:hover{background:var(--brand-hover)}
.btn.secondary{background:var(--white);color:var(--ink);border-color:var(--line)}
.btn.secondary:hover{background:var(--paper);border-color:var(--muted)}
.btn.yellow{background:var(--yellow);color:var(--ink)}
.btn.yellow:hover{background:#F7CD59}
.text-link,.back-link{color:var(--brand)}
.icon-btn{border-radius:var(--control-radius)}
.icon-btn:hover{background:var(--brand-soft);color:var(--brand)}
.welcome{background:var(--sky);border-bottom-color:#C6DFF1;padding:28px 32px}
.welcome .eyebrow{color:var(--blue)}
.welcome h2{color:var(--ink)}
.welcome p{color:var(--muted)}
.welcome .characters{content:url('assets/ben-e-lalu-oficiais.jpeg');width:210px;height:235px;mix-blend-mode:normal;object-fit:cover;object-position:center 55%;border:0;box-shadow:none;transform:none;border-radius:8px}
.characters-example img{width:180px;height:230px;object-fit:cover;object-position:center 55%;flex-shrink:0}
.progress{background:var(--mint)}
.progress>span{background:var(--green)}
.avatar{background:var(--mint);color:var(--green)}
.pill.gold{background:var(--gold-soft);border-color:#EDCF7D;color:var(--gold-ink)}
.medal-icon{background:var(--gold-soft);border-color:#E5BE55;color:var(--gold-ink)}
.medal.locked{opacity:1;color:var(--muted)}
.medal.locked .medal-icon{background:var(--paper);border-color:var(--line);color:var(--muted)}
.achievement.locked{opacity:1;background:var(--paper)}
.achievement.locked .medal-icon{background:var(--paper);border-color:var(--line);color:var(--muted)}
.tile-icon{background:var(--gold-soft);color:var(--gold-ink)}
.tile-icon.blue{background:var(--sky);color:var(--blue)}
.tile-icon.green{background:var(--mint);color:var(--green)}
.summary{border-left-color:var(--brand)}
.summary:nth-child(2){border-left-color:var(--blue)}
.summary:nth-child(3){border-left-color:var(--green)}
.positive,.mission-status{color:var(--green)}
.negative,.error{color:var(--danger)}
.pot .jar{background:var(--paper)}
.pot .jar-fill{opacity:.7}
.history-table th{background:var(--paper)}
.plain-art{background:var(--mint);color:var(--green)}
.coming{background:var(--pink-soft);color:var(--pink)}
.switch input:checked+span{background:var(--brand)}
.field input,.field select{border-color:var(--line);border-radius:var(--control-radius)}
.notice{background:var(--sky);color:#315974;border-radius:var(--control-radius)}
.feedback{background:var(--mint)}
.feedback.wrong{background:var(--gold-soft)}
.game-stage .question-art{background:var(--sky);color:var(--blue)}
.answers button:hover{border-color:var(--brand);background:var(--brand-soft)}
.parent .main{background:var(--paper)}
.parent-picker button.active{background:var(--brand-soft);border-color:#EFBEA2;color:var(--brand)}
.certificate svg{color:var(--gold-ink)}
.card{border-radius:var(--radius);border-color:var(--line)}
.card.pot{border-top-color:var(--pot-color)}
.card.summary{border-left-color:var(--brand)}
.card.summary:nth-child(2){border-left-color:var(--blue)}
.card.summary:nth-child(3){border-left-color:var(--green)}
dialog{border-color:var(--line);border-radius:var(--radius)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.switch input:focus-visible+span{outline-color:var(--blue)}
@media(max-width:800px){.heading h1{font-size:24px}.welcome{padding:22px}.welcome .characters{height:155px;width:115px;right:12px;bottom:25px}.parent .nav button{font-size:12px}.parent .nav{padding-bottom:max(8px,env(safe-area-inset-bottom))}}
@media(max-width:400px){.welcome{padding:20px}.welcome .characters{width:92px;height:145px;right:9px}.welcome-text{max-width:70%}}
@media print{body>.print-certificate{border-color:var(--brand);font-family:var(--font-family);color:var(--ink)}}
@media(max-width:800px){.topbar .brand-name{font-size:16px}.topbar .brand-name small{font-size:12px}.brand-example .brand-name{font-size:22px}}
@media(max-width:400px){.topbar .brand-name{font-size:14px}.topbar .brand-mark{margin-right:6px}}