*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:Arial, Helvetica, sans-serif;background:linear-gradient(180deg,#dff6ff 0%,#fff8dd 45%,#ffe1ef 100%);color:#333;min-height:100vh}
.app{max-width:760px;margin:0 auto;padding:28px 18px 40px;text-align:center}
.topo h1{font-size:clamp(30px,7vw,52px);color:#4d7fd9;margin:10px 0 4px;font-weight:800}
.topo h2{font-size:clamp(20px,5vw,32px);color:#9d7b05;margin:0 0 36px;font-weight:800}
.card{background:#fff;border-radius:34px;padding:34px 24px;box-shadow:0 18px 38px rgba(0,0,0,.12);margin:0 auto 38px}
.tela{display:none}
.tela.ativa{display:block}
#home h3{font-size:clamp(32px,7vw,52px);line-height:1.15;margin:10px 0 28px}
#home p,#lista p{font-size:clamp(20px,4.5vw,30px);line-height:1.25;margin:0 auto 28px;max-width:640px}
.botao-principal{width:min(560px,92%);min-height:120px;border:0;border-radius:28px;background:#4f7edb;color:#fff;font-size:clamp(26px,5vw,40px);font-weight:800;box-shadow:0 14px 25px rgba(0,0,0,.18);cursor:pointer}
small{display:block;margin-top:28px;color:#777;font-size:clamp(17px,4vw,24px)}
#lista h3,.leitor h3{font-size:clamp(32px,7vw,52px);margin:10px 0 24px}
.grade-paginas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:28px auto 34px;max-width:620px}
.grade-paginas button,.botao,.nav button,.botoes-linha button{border:0;border-radius:22px;background:#fff;color:#111;font-weight:800;box-shadow:0 8px 18px rgba(0,0,0,.14);cursor:pointer}
.grade-paginas button{min-height:92px;font-size:clamp(20px,4.5vw,30px)}
.botao{font-size:clamp(22px,4.8vw,32px);padding:22px 32px}
.ferramentas{margin:8px 0 22px}
.cores{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:8px 0 22px}
.cor{width:58px;height:58px;border-radius:50%;border:7px solid #fff;box-shadow:0 5px 12px rgba(0,0,0,.25);cursor:pointer}
.cor.ativa{outline:4px solid #333}
.botoes-linha{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:14px 0}
.botoes-linha button{font-size:clamp(20px,4vw,30px);padding:18px 26px}
.botoes-linha .salvar{background:#51cf66;color:#fff}
.quadro{border:10px solid #ffd84d;border-radius:24px;overflow:hidden;background:white;margin:0 auto;max-width:620px;box-shadow:0 10px 20px rgba(0,0,0,.13)}
canvas{display:block;width:100%;height:auto;touch-action:none;background:#fff}
.nav{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:26px 0 4px}
.nav button{font-size:clamp(20px,4vw,30px);padding:18px 24px}
footer{font-size:clamp(20px,4vw,28px);color:#777;margin-top:20px}
@media (max-width:520px){
  .app{padding:22px 12px 35px}
  .card{border-radius:28px;padding:28px 14px}
  .grade-paginas{gap:14px}
  .grade-paginas button{min-height:76px}
  .cor{width:50px;height:50px}
  .quadro{border-width:7px}
}