/* Layout: coluna de celular em clima de colagem (identidade da Mari): adesivos inclinados, setas desenhadas, marca-texto; tema claro único, por escolha */
:root{
  --green:#608657; --green-deep:#3e5a37; --mint:#e4f6c4; --beige:#faf0e0;
  --peach:#f6a477; --peach-soft:#fde0cc; --white:#ffffff; --ink:#262626; --ink-soft:#5f5a50;
  --serif:"Lora", Georgia, "Times New Roman", serif;
  --mono:"Courier Prime", "Courier New", Courier, monospace;
  --hand:"Caveat", "Segoe Print", "Comic Sans MS", cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--beige);color:var(--ink)}
body{font-family:var(--serif);font-size:16px;line-height:1.55;min-height:100%;overflow-x:hidden;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:0 8px}
.grain{position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.app{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:22px;padding-block:18px 10px}
h1,h2,h3{font-weight:700;line-height:1.15;text-wrap:balance;margin:0}
h1 em,h2 em,h3 em{font-weight:400}
p{margin:0}
.hl{background:linear-gradient(transparent 38%, var(--mint) 38%, var(--mint) 92%, transparent 92%);padding:0 3px}
.hl-p{background:linear-gradient(transparent 38%, var(--peach-soft) 38%, var(--peach-soft) 92%, transparent 92%);padding:0 3px}
.hand{font-family:var(--hand);font-size:24px;line-height:1.1;color:var(--green-deep)}
.muted{color:var(--ink-soft)}
.small{font-size:14.5px}
.center{text-align:center}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}

.brand{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand-name{font-size:23px;font-weight:700;display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;font-family:var(--serif);color:var(--ink);cursor:pointer}
.brand-name em{font-weight:400}
.brand-name svg{width:34px;height:34px}
.brand-by{font-family:var(--hand);font-size:21px;color:var(--green-deep)}

.box{background:var(--white);border:1px solid var(--ink);padding:18px}
.label-box{display:inline-block;border:1px solid var(--ink);background:var(--beige);padding:6px 14px;font-size:20px;font-weight:600}
.label-box em{font-weight:400}
.tag{display:inline-block;background:var(--peach);border:1px solid var(--ink);font-size:12px;padding:1px 8px;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.sticker{border:1px solid var(--ink);outline:1.5px dashed rgba(38,38,38,.3);outline-offset:-8px;padding:20px;position:relative}
.c-peach{background:var(--peach)}.c-soft{background:var(--peach-soft)}.c-mint{background:var(--mint)}.c-white{background:var(--white)}.c-beige{background:var(--beige)}
.c-green{background:var(--green);color:var(--white);outline-color:rgba(255,255,255,.45)}
.c-green .muted{color:#eaf2e3}.c-green .tag{color:var(--ink)}
.tilt-l,.tilt-r{transform:none}

.btn{font-family:var(--serif);font-size:16px;font-weight:700;border:1.5px solid var(--ink);background:var(--green);color:var(--white);padding:11px 18px;cursor:pointer;line-height:1.2;text-align:center;box-shadow:3px 3px 0 var(--ink);transition:transform .08s, box-shadow .08s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn svg{width:20px;height:20px;flex:none}
.btn-peach{background:var(--peach);color:var(--ink)}
.btn-white{background:var(--white);color:var(--ink)}
.btn-sm{font-size:14.5px;padding:8px 12px;box-shadow:2px 2px 0 var(--ink)}
.btn-block{width:100%}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row > *{flex:1 1 auto}
.linkish{background:none;border:0;font-family:var(--serif);font-size:14.5px;color:var(--green-deep);text-decoration:underline;cursor:pointer;padding:0;font-weight:600}
.linkish.quiet{color:var(--ink-soft);font-weight:400}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:2.5px solid var(--peach);outline-offset:2px}

.f{display:flex;flex-direction:column;gap:6px}
.f-l{font-weight:700}
.f-h{font-size:14.5px;color:var(--ink-soft);font-style:italic}
input[type=text],textarea{font-family:var(--serif);font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--ink);padding:10px 12px;width:100%;border-radius:0}
textarea{resize:vertical;min-height:92px;line-height:1.5}
input[type=range]{width:100%;accent-color:var(--green);height:28px}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--green);flex:none}
.stack{display:flex;flex-direction:column;gap:18px}
.stack-sm{display:flex;flex-direction:column;gap:10px}

/* Início */
.hero{display:grid;grid-template-columns:1fr 130px;gap:12px;align-items:center}
.hero h1{font-size:32px}
.hero svg{width:100%;height:auto}
.group-head{display:flex;align-items:center;gap:12px}
.group-head::after{content:"";flex:1;border-top:1px dashed rgba(38,38,38,.35)}
.lib{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.lib-card{display:flex;flex-direction:column;gap:8px;text-align:left;font-family:var(--serif);color:var(--ink);cursor:pointer;padding:16px;transition:transform .15s;height:100%;min-height:150px;width:100%}
.lib-card:hover{transform:translateY(-2px)}
.lib-card span:last-child{margin-top:auto}
.lib-card .ico{width:48px;height:48px}
.lib-card b{font-size:16.5px;line-height:1.2}
.lib-card span{font-family:var(--mono);font-size:12px}
.lib-card.c-green{color:var(--white)}

/* Área da Mari */
.panel-row{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:start;padding-block:14px;border-bottom:1px dashed rgba(38,38,38,.3)}
.panel-row:last-child{border-bottom:0}
.panel-row > div{min-width:0}
.panel-row .ico{width:52px;height:52px}
.panel-row h3{font-size:18px}
.panel-row .acts{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}

/* Ferramenta */
.back{align-self:flex-start}
.task-head{display:grid;grid-template-columns:1fr 84px;gap:12px;align-items:center}
.task-head h1{font-size:30px}
.task-head svg{width:84px;height:84px}
.privacy{font-size:14px;display:flex;gap:8px;align-items:flex-start;color:var(--ink-soft)}
.privacy svg{flex:none;margin-top:3px}
.intro{font-size:15.5px}
.sec{display:flex;flex-direction:column;gap:16px}
.sec-title{display:flex;align-items:center;gap:12px}
.sec-title .letter{font-size:40px;font-weight:700;font-style:italic;line-height:1}
.sec-title h2{font-size:21px}
.info{background:var(--mint);border:1px solid var(--ink);padding:14px 16px;font-size:15px;display:flex;flex-direction:column;gap:8px}
.info ul,.info ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.q{font-size:24px;font-weight:700;line-height:1.2}
.q em{font-weight:400}
.scale-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.big-num{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ends{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--serif);font-size:15px;border:1px solid var(--ink);background:var(--white);color:var(--ink);padding:6px 12px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--peach);font-weight:700}
.chip-group{display:flex;flex-direction:column;gap:6px}
.chip-group b{font-size:14px;letter-spacing:.04em;text-transform:uppercase;font-family:var(--mono);font-weight:400}
.check{display:flex;gap:8px;align-items:center;font-size:15px;cursor:pointer;font-weight:600}
.dots{display:flex;gap:6px}
.dot{width:28px;height:28px;border:1.5px solid var(--ink);background:var(--white);cursor:pointer;padding:0;border-radius:50%}
.dot.on{background:var(--green)}
.dots.pl .dot.on{background:var(--peach)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.two > *{min-width:0}
.col-head{border:1px solid var(--ink);text-align:center;padding:5px 8px;font-weight:700;background:var(--green);color:var(--white)}
.col-head.pe{background:var(--peach);color:var(--ink)}
.list{display:flex;flex-direction:column;gap:16px}
.item{display:flex;flex-direction:column;gap:12px;padding:16px}
.item-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.item-head b{font-family:var(--hand);font-size:24px;font-weight:700;color:var(--green-deep)}
.chain-arrow{display:flex;justify-content:center;margin:-6px 0}
.chain-arrow svg{width:70px;height:40px}
.matrix{display:flex;flex-direction:column;gap:14px}
.mrow{display:flex;flex-direction:column;gap:4px;padding-bottom:12px;border-bottom:1px dashed rgba(38,38,38,.3)}
.mrow:last-child{border-bottom:0}
.mrow .mcols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mrow label{font-size:13.5px;color:var(--ink-soft);display:flex;justify-content:space-between}
.mrow label b{color:var(--ink);font-variant-numeric:tabular-nums}

/* Assistente */
.path svg{width:100%;height:auto;display:block}
.step-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.nav{display:flex;gap:12px}
.nav .btn{flex:1}
.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;text-align:center}
.curl svg{width:80px;height:46px}
.done-art svg{width:170px;height:auto;margin:0 auto;display:block}

/* Saída */
.out-box{display:flex;flex-direction:column;gap:12px}
.toast{font-size:14.5px;color:var(--green-deep);font-weight:700;min-height:1.3em}
.btn.is-empty{opacity:.45;box-shadow:none;filter:grayscale(.5)}
.btn.is-empty:hover{transform:none;box-shadow:none}
.empty-hint{color:var(--ink-soft);font-style:italic}
.lock-box{display:flex;flex-direction:column;gap:12px;max-width:440px}
.lock-ico{width:56px;height:56px}
input[type=password]{font-family:var(--serif);font-size:16px;border:1px solid var(--ink);padding:10px 12px;background:var(--white);color:var(--ink);width:100%;border-radius:0}
.confirm{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:14.5px}
.crisis{font-size:13.5px;color:var(--ink-soft);text-align:center;border-top:1px dashed rgba(38,38,38,.3);padding-top:12px}

/* Humor */
.mood-chart svg{width:100%;height:auto;display:block}
.day{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;padding-block:8px;border-bottom:1px dashed rgba(38,38,38,.25)}
.day:last-child{border-bottom:0}
.faces{display:flex;gap:4px;justify-content:space-between}
.face-btn{background:none;border:0;padding:2px;cursor:pointer;opacity:.35;filter:grayscale(.6);transition:transform .15s, opacity .15s}
.face-btn svg{width:38px;height:38px;display:block}
.face-btn[aria-pressed="true"]{opacity:1;filter:none;transform:scale(1.15)}
.day-note{grid-column:2}
.day-note input{font-size:14.5px;padding:6px 10px;background:transparent;border:0;border-bottom:1px solid var(--ink-soft)}

/* Escada */
.stairs{display:flex;flex-direction:column;padding-top:46px}
.stair{margin-left:auto;border:1px solid var(--ink);border-bottom:0;padding:10px 12px;display:flex;justify-content:space-between;gap:10px;align-items:center;position:relative;font-size:14.5px;background:var(--peach-soft)}
.stair:last-child{border-bottom:1px solid var(--ink)}
.stair.done{background:var(--mint)}
.stair b{font-family:var(--mono);font-weight:400;flex:none}
.stair .who{position:absolute;left:8px;bottom:100%;width:30px;height:44px}
.stair .flag{position:absolute;right:10px;bottom:100%;width:26px;height:40px}

/* Respiração e relaxamento */
.breath{display:flex;flex-direction:column;align-items:center;gap:14px;padding-block:10px}
.orb-wrap{width:220px;height:220px;display:grid;place-items:center;position:relative}
.orb-ring{position:absolute;inset:0;border:1.5px dashed rgba(38,38,38,.35);border-radius:50%}
.orb{width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 35% 35%, var(--mint), #b9dca9);border:1.5px solid var(--ink);transform:scale(.45);transition-property:transform;transition-timing-function:ease-in-out;display:grid;place-items:center}
.orb-text{position:absolute;font-size:24px;font-weight:700;text-align:center;line-height:1.1}
.orb-text small{display:block;font-family:var(--mono);font-size:14px;font-weight:400}
.counter{font-family:var(--hand);font-size:26px;color:var(--green-deep)}
.rmp-steps{display:flex;gap:4px;flex-wrap:wrap}
.rmp-steps i{flex:1;min-width:14px;height:8px;border:1px solid var(--ink);background:var(--white)}
.rmp-steps i.on{background:var(--green)}
.rmp-steps i.cur{background:var(--peach)}
.timer{font-size:56px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;text-align:center}
.phase{font-size:22px;font-weight:700;text-align:center}

/* Cartões */
.flip{min-height:200px;display:flex;flex-direction:column;justify-content:center;gap:10px;text-align:center;cursor:pointer;padding:28px 22px}
.flip .side{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
.flip p{font-size:21px;font-weight:600;line-height:1.3}
.flip-nav{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* Ciclo da ansiedade */
.cycle{display:grid;grid-template-columns:1fr;gap:6px;counter-reset:c}
.cycle div{border:1px solid var(--ink);background:var(--white);padding:8px 12px;font-size:14.5px;position:relative}
.cycle div b{color:var(--green-deep)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(38,38,38,.45);z-index:60;display:flex;align-items:flex-end;justify-content:center;
  padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
@media (min-width:640px){.modal{align-items:center}}
.sheet{background:var(--beige);border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);width:100%;max-width:560px;max-height:100%;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sheet-head h2{font-size:21px}
.x{background:var(--white);border:1px solid var(--ink);width:36px;height:36px;font-size:20px;cursor:pointer;font-family:var(--serif);flex:none;color:var(--ink)}
.msg{background:var(--mint);min-height:190px}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:65}
footer{text-align:center;font-family:var(--mono);font-size:15px;color:#000;padding-block:16px 8px}
@media (max-width:480px){
  .hero{grid-template-columns:1fr 100px}.hero h1{font-size:27px}
  .task-head{grid-template-columns:1fr 66px}.task-head h1{font-size:25px}.task-head svg{width:66px;height:66px}
  .q{font-size:21px}
  .two{grid-template-columns:1fr}
  .lib{gap:12px}.lib-card{padding:12px}.lib-card b{font-size:15px}
}
@media (prefers-reduced-motion:no-preference){
  .sheet{animation:up .22s ease-out}
  .pop{animation:pop .3s ease-out}
  @keyframes up{from{transform:translateY(16px);opacity:.6}to{transform:none;opacity:1}}
  @keyframes pop{from{transform:scale(.97);opacity:.5}to{transform:none;opacity:1}}
}