Spaces:

roxopastel
/

app

Running

File size: 83,094 Bytes

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>✦ DOODLES AI — Manual Completo</title>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700&display=swap" rel="stylesheet">
<style>
:root {
  --petal-pink:   #FFB3E6;
  --lemon-yellow: #FFE780;
  --orange-sorbet:#FFC897;
  --touch-grass:  #B3FFC7;
  --clear-skies:  #A1E9FF;
  --grape-jelly:  #C5C5FF;
  --peach-puff:   #FFEAD2;
  --rosy-cheeks:  #FFD0B8;
  --caramel:      #E8A68B;
  --lavender:     #A4A4F4;
  --white:        #FFFFFF;
  --outline:      #1A1014;
  --bg:           #F5F0F8;
  --grad-rainbow: linear-gradient(90deg, #FFB3E6, #FFC897, #FFE780, #B3FFC7, #A1E9FF, #C5C5FF);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --shadow:    3px 3px 0 var(--outline);
  --shadow-lg: 5px 5px 0 var(--outline);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--outline);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ── ANIMATED BACKGROUND ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 10%, var(--petal-pink) 0%, transparent 40%),
    radial-gradient(circle at 90% 5%,  var(--clear-skies) 0%, transparent 35%),
    radial-gradient(circle at 85% 90%, var(--grape-jelly) 0%, transparent 40%),
    radial-gradient(circle at 5%  85%, var(--touch-grass) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, var(--lemon-yellow) 0%, transparent 50%);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  animation: bgPulse 8s ease-in-out infinite;
}

@keyframes bgPulse {
  0%,100% { opacity: 0.18; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(1.03); }
}

/* ── FLOATING PARTICLES (canvas) ── */
#particles-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ── RAINBOW STRIP ── */
.rainbow-bar {
  height: 6px;
  background: linear-gradient(90deg, #FFB3E6, #FFC897, #FFE780, #B3FFC7, #A1E9FF, #C5C5FF, #FFB3E6);
  background-size: 200% 100%;
  animation: rainbowSlide 3s linear infinite;
  position: relative;
  z-index: 10;
}

@keyframes rainbowSlide {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ════════════════════════
   XP BAR (progress gamification)
════════════════════════ */
.xp-bar-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 200;
  background: rgba(26,16,20,0.15);
}
.xp-bar-fill {
  height: 100%;
  background: var(--grad-rainbow);
  background-size: 200% 100%;
  animation: rainbowSlide 2s linear infinite;
  transition: width 0.4s ease;
  width: 0%;
}

/* ════════════════════════
   HEADER
════════════════════════ */
header {
  background: var(--outline);
  padding: 2.5rem 1.25rem 2.2rem;
  text-align: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -55deg,
    transparent, transparent 14px,
    rgba(255,255,255,0.03) 14px, rgba(255,255,255,0.03) 28px
  );
  animation: stripeMove 20s linear infinite;
  pointer-events: none;
}

@keyframes stripeMove {
  0%   { background-position: 0 0; }
  100% { background-position: 100px 100px; }
}

/* Floating doodle emojis in header */
.header-floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.header-floater {
  position: absolute;
  font-size: 1.4rem;
  opacity: 0.18;
  animation: headerFloat linear infinite;
}

@keyframes headerFloat {
  0%   { transform: translateY(100%) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.18; }
  90%  { opacity: 0.18; }
  100% { transform: translateY(-100%) rotate(360deg); opacity: 0; }
}

.header-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--lemon-yellow);
  color: var(--outline);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 50px;
  border: 3px solid var(--outline);
  box-shadow: var(--shadow);
  margin-bottom: 1.1rem;
  position: relative;
  z-index: 1;
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-6px) rotate(1deg); }
}

header h1 {
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  font-weight: 900;
  line-height: 1.0;
  color: var(--white);
  letter-spacing: -1px;
  position: relative;
  z-index: 1;
}

header h1 .accent  { color: var(--petal-pink); }
header h1 .accent2 { color: var(--lemon-yellow); animation: textGlow 2s ease-in-out infinite; }

@keyframes textGlow {
  0%,100% { text-shadow: 0 0 10px rgba(255,231,128,0.3); }
  50%     { text-shadow: 0 0 25px rgba(255,231,128,0.8), 0 0 50px rgba(255,231,128,0.4); }
}

.header-rainbow-text {
  font-size: clamp(0.85rem, 2.5vw, 1.05rem);
  font-weight: 800;
  background: var(--grad-rainbow);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowSlide 3s linear infinite;
  margin-top: 0.7rem;
  position: relative;
  z-index: 1;
  letter-spacing: 0.5px;
}

.header-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 1.3rem;
  position: relative;
  z-index: 1;
}

.tag {
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
  padding: 4px 13px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  animation: tagPop 0.5s ease backwards;
}
.tag:nth-child(1) { animation-delay: 0.1s; }
.tag:nth-child(2) { animation-delay: 0.2s; }
.tag:nth-child(3) { animation-delay: 0.3s; }
.tag:nth-child(4) { animation-delay: 0.4s; }

@keyframes tagPop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── LEVEL BADGE ── */
.level-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 1rem;
  position: relative;
  z-index: 1;
}

.level-pill {
  background: var(--petal-pink);
  border: 3px solid var(--outline);
  border-radius: 50px;
  padding: 5px 14px;
  font-size: 0.75rem;
  font-weight: 900;
  box-shadow: var(--shadow);
  animation: float 3.5s ease-in-out infinite;
  animation-delay: 0.5s;
}

.stars-row {
  display: flex;
  gap: 2px;
}
.star {
  font-size: 1rem;
  animation: starSpin 4s linear infinite;
}
.star:nth-child(2) { animation-delay: 0.3s; }
.star:nth-child(3) { animation-delay: 0.6s; }
@keyframes starSpin {
  0%,80%,100% { transform: scale(1) rotate(0deg); }
  85%   { transform: scale(1.4) rotate(20deg); color: #FFE780; }
}

/* ════════════════════════
   WRAPPER
════════════════════════ */
.wrapper {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.75rem 1rem 5rem;
  position: relative;
  z-index: 1;
}

/* ════════════════════════
   STATS ROW (gamification)
════════════════════════ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 1.25rem;
}

.stat-card {
  background: var(--outline);
  border-radius: var(--radius-md);
  border: 3px solid var(--outline);
  box-shadow: var(--shadow);
  padding: 0.9rem 0.75rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background: repeating-linear-gradient(45deg, #fff 0px, #fff 2px, transparent 2px, transparent 10px);
}

.stat-icon { font-size: 1.4rem; display: block; margin-bottom: 2px; }
.stat-value {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--lemon-yellow);
  display: block;
  line-height: 1;
}
.stat-label {
  font-size: 0.6rem;
  font-weight: 800;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: block;
  margin-top: 2px;
}

/* count-up animation */
.stat-value.counting { animation: countPop 0.3s ease; }
@keyframes countPop {
  0%   { transform: scale(1.5); color: var(--petal-pink); }
  100% { transform: scale(1);   color: var(--lemon-yellow); }
}

/* ════════════════════════
   TICKER TAPE
════════════════════════ */
.ticker-wrap {
  background: var(--outline);
  border: 3px solid var(--outline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
  position: relative;
}
.ticker-label {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--lemon-yellow);
  color: var(--outline);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  padding: 0 10px;
  z-index: 2;
  border-right: 3px solid var(--outline);
  white-space: nowrap;
}
.ticker-track {
  display: flex;
  padding: 0.5rem 0;
  padding-left: 90px;
  overflow: hidden;
}
.ticker-inner {
  display: flex;
  gap: 0;
  animation: tickerMove 70s linear infinite;
  white-space: nowrap;
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.75);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0 20px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.ticker-item span { color: var(--touch-grass); }

@keyframes tickerMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ════════════════════════
   TOC CARD
════════════════════════ */
.toc-card {
  background: var(--outline);
  border-radius: var(--radius-lg);
  border: 3px solid var(--outline);
  box-shadow: var(--shadow-lg);
  padding: 1.6rem 1.5rem;
  margin: 0 0 1.25rem;
  overflow: hidden;
  position: relative;
}

.toc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FFB3E6, #FFC897, #FFE780, #B3FFC7, #A1E9FF, #C5C5FF, #FFB3E6);
  background-size: 200%;
  animation: rainbowSlide 3s linear infinite;
}

.toc-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--lemon-yellow);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 5px;
}

.toc-grid a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.3;
}

.toc-grid a:hover,
.toc-grid a:active {
  background: rgba(255,255,255,0.1);
  border-color: var(--lemon-yellow);
  color: var(--lemon-yellow);
  transform: translateX(3px);
}

/* ════════════════════════
   TOOLBAR
════════════════════════ */
.toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.btn-tool {
  background: var(--white);
  border: 3px solid var(--outline);
  border-radius: var(--radius-sm);
  font-family: 'Nunito', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 7px 14px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all 0.12s;
  color: var(--outline);
  display: flex;
  align-items: center;
  gap: 5px;
  touch-action: manipulation;
}

.btn-tool:hover   { transform: translateY(-2px); box-shadow: 4px 6px 0 var(--outline); }
.btn-tool:active  { transform: translateY(2px);  box-shadow: 1px 1px 0 var(--outline); }
.btn-tool.pink    { background: var(--petal-pink); }
.btn-tool.yellow  { background: var(--lemon-yellow); }
.btn-tool.purple  { background: var(--grape-jelly); }
.btn-tool.green   { background: var(--touch-grass); }

/* ════════════════════════
   SECTION COLORS MAP
════════════════════════ */
.s1  .section-header { background: var(--petal-pink); }
.s2  .section-header { background: var(--lemon-yellow); }
.s3  .section-header { background: var(--orange-sorbet); }
.s4  .section-header { background: var(--touch-grass); }
.s5  .section-header { background: var(--clear-skies); }
.s6  .section-header { background: var(--grape-jelly); }
.s7  .section-header { background: var(--peach-puff); }
.s8  .section-header { background: var(--rosy-cheeks); }
.s9  .section-header { background: var(--caramel); }
.s10 .section-header { background: var(--lavender); }
.s11 .section-header { background: var(--petal-pink); }
.s12 .section-header { background: var(--lemon-yellow); }
.s13 .section-header { background: var(--touch-grass); }
.s14 .section-header { background: var(--clear-skies); }
.s15 .section-header { background: var(--grape-jelly); }
.s16 .section-header { background: var(--orange-sorbet); }
.s17 .section-header { background: var(--petal-pink); }
.s18 .section-header { background: var(--lemon-yellow); }
.s19 .section-header { background: var(--rosy-cheeks); }

.s1  .section-num { background: var(--outline); color: var(--petal-pink); }
.s2  .section-num { background: var(--outline); color: var(--lemon-yellow); }
.s3  .section-num { background: var(--outline); color: var(--orange-sorbet); }
.s4  .section-num { background: var(--outline); color: var(--touch-grass); }
.s5  .section-num { background: var(--outline); color: var(--clear-skies); }
.s6  .section-num { background: var(--outline); color: var(--grape-jelly); }
.s7  .section-num { background: var(--outline); color: var(--peach-puff); }
.s8  .section-num { background: var(--outline); color: var(--rosy-cheeks); }
.s9  .section-num { background: var(--outline); color: var(--caramel); }
.s10 .section-num { background: var(--outline); color: var(--lavender); }
.s11 .section-num { background: var(--outline); color: var(--petal-pink); }
.s12 .section-num { background: var(--outline); color: var(--lemon-yellow); }
.s13 .section-num { background: var(--outline); color: var(--touch-grass); }
.s14 .section-num { background: var(--outline); color: var(--clear-skies); }
.s15 .section-num { background: var(--outline); color: var(--grape-jelly); }
.s16 .section-num { background: var(--outline); color: var(--orange-sorbet); }
.s17 .section-num { background: var(--outline); color: var(--petal-pink); }
.s18 .section-num { background: var(--outline); color: var(--lemon-yellow); }
.s19 .section-num { background: var(--outline); color: var(--rosy-cheeks); }

/* ════════════════════════
   SECTIONS
════════════════════════ */
.section {
  background: var(--white);
  border: 3px solid var(--outline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
}

.section:hover {
  transform: translateY(-2px);
  box-shadow: 6px 8px 0 var(--outline);
}

.section-header {
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.1s;
}

.section-header:active { filter: brightness(0.94); }

.section-num {
  font-size: 1rem;
  font-weight: 900;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--outline);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 2px 2px 0 var(--outline);
}

.section-title {
  font-size: 1rem;
  font-weight: 900;
  flex: 1;
  color: var(--outline);
  line-height: 1.25;
}

.section-toggle {
  font-size: 1rem;
  color: var(--outline);
  opacity: 0.55;
  transition: transform 0.25s;
  flex-shrink: 0;
}

/* ── SECTION BADGES (unlocked indicator) ── */
.section-badge {
  font-size: 0.6rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 50px;
  border: 2px solid var(--outline);
  background: var(--outline);
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.5px;
  flex-shrink: 0;
  transition: all 0.3s;
}
.section.open .section-badge {
  background: var(--lemon-yellow);
  color: var(--outline);
  animation: badgePop 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes badgePop {
  0%   { transform: scale(0.5) rotate(-15deg); }
  60%  { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.section.open .section-header {
  border-bottom: 3px solid var(--outline);
}

.section.open .section-toggle {
  transform: rotate(180deg);
  opacity: 0.85;
}

.section-body {
  display: none;
  padding: 1.25rem 1.1rem;
  animation: slideDown 0.25s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section.open .section-body { display: block; }

/* ── SECTION READ CHECKMARK ── */
.section.read .section-num::after {
  content: '✓';
  position: absolute;
  font-size: 0.65rem;
  right: -4px;
  top: -4px;
  background: var(--touch-grass);
  border: 2px solid var(--outline);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-num { position: relative; }

/* ════════════════════════
   BODY CONTENT STYLES
════════════════════════ */
.section-body h3 {
  font-size: 0.95rem;
  font-weight: 900;
  margin: 1.2rem 0 0.5rem;
  color: var(--outline);
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-body h3:first-child { margin-top: 0; }

.section-body p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #2a2028;
  margin-bottom: 0.6rem;
}

.section-body ul,
.section-body ol {
  padding-left: 1.3rem;
  margin-bottom: 0.7rem;
}

.section-body li {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #2a2028;
  margin-bottom: 0.15rem;
}

/* ── PRE COPY ── */
.section-body pre {
  background: var(--outline);
  color: var(--touch-grass);
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  padding: 1rem 1rem;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin: 0.7rem 0;
  border: 2px solid var(--outline);
  box-shadow: var(--shadow);
  white-space: pre-wrap;
  word-break: break-word;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s;
}

.section-body pre::after {
  content: '📋 copiar';
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.6rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: color 0.2s;
}

.section-body pre:hover::after { color: var(--lemon-yellow); }
.section-body pre:hover { border-color: var(--lemon-yellow); }
.section-body pre.copied { border-color: var(--touch-grass) !important; }
.section-body pre.copied::after { content: '✓ copiado!'; color: var(--touch-grass) !important; }

.section-body code {
  background: var(--outline);
  color: var(--lemon-yellow);
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  padding: 2px 7px;
  border-radius: 6px;
}

.section-body blockquote {
  border-left: 4px solid var(--grape-jelly);
  background: rgba(197,197,255,0.15);
  padding: 0.75rem 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0.7rem 0;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.6;
}

/* ════════════════════════
   PILL BADGES
════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 50px;
  border: 2px solid var(--outline);
  font-size: 0.75rem;
  font-weight: 800;
  box-shadow: 2px 2px 0 var(--outline);
  margin: 2px;
  transition: transform 0.1s;
}
.badge:hover { transform: scale(1.08) rotate(-2deg); }
.badge-pink   { background: var(--petal-pink); }
.badge-yellow { background: var(--lemon-yellow); }
.badge-green  { background: var(--touch-grass); }
.badge-blue   { background: var(--clear-skies); }
.badge-purple { background: var(--grape-jelly); }
.badge-orange { background: var(--orange-sorbet); }

/* ════════════════════════
   COLOR SWATCHES
════════════════════════ */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin: 0.75rem 0;
}

.swatch {
  border: 3px solid var(--outline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.swatch:hover {
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: 4px 6px 0 var(--outline);
}

.swatch-color {
  height: 52px;
  transition: height 0.2s;
}
.swatch:hover .swatch-color { height: 60px; }

.swatch-info {
  padding: 5px 7px;
  background: var(--white);
  border-top: 2px solid var(--outline);
}

.swatch-name {
  font-size: 0.65rem;
  font-weight: 900;
  display: block;
  line-height: 1.3;
  color: var(--outline);
}

.swatch-hex {
  font-size: 0.7rem;
  font-weight: 700;
  color: #555;
  font-family: 'Courier New', monospace;
}

/* ════════════════════════
   TABLE
════════════════════════ */
.table-wrap { overflow-x: auto; margin: 0.7rem 0; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 340px;
}

th {
  background: var(--outline);
  color: var(--lemon-yellow);
  font-weight: 900;
  font-size: 0.75rem;
  padding: 8px 10px;
  text-align: left;
  letter-spacing: 0.5px;
}

td {
  padding: 7px 10px;
  border-bottom: 2px solid rgba(0,0,0,0.07);
  line-height: 1.45;
}

tr:nth-child(even) td { background: rgba(0,0,0,0.025); }
tr:hover td           { background: rgba(197,197,255,0.2); transition: background 0.15s; }

/* ════════════════════════
   DIVIDER
════════════════════════ */
.divider {
  height: 3px;
  background: var(--grad-rainbow);
  background-size: 200%;
  animation: rainbowSlide 3s linear infinite;
  border-radius: 99px;
  margin: 1rem 0;
}

/* ════════════════════════
   CALLOUT BOXES
════════════════════════ */
.callout {
  border: 3px solid var(--outline);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin: 0.7rem 0;
  font-size: 0.86rem;
  line-height: 1.6;
  box-shadow: var(--shadow);
}

.callout-tip    { background: rgba(179,255,199,0.35); border-left: 5px solid var(--touch-grass); }
.callout-warn   { background: rgba(255,200,151,0.35); border-left: 5px solid var(--orange-sorbet); }
.callout-info   { background: rgba(161,233,255,0.35); border-left: 5px solid var(--clear-skies); }
.callout-purple { background: rgba(197,197,255,0.35); border-left: 5px solid var(--grape-jelly); }
.callout strong { font-weight: 900; }

/* ════════════════════════
   TOAST NOTIFICATION
════════════════════════ */
.toast {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--outline);
  color: var(--lemon-yellow);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 50px;
  border: 3px solid var(--lemon-yellow);
  box-shadow: var(--shadow-lg);
  z-index: 300;
  transition: transform 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97), opacity 0.3s;
  opacity: 0;
  white-space: nowrap;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ════════════════════════
   CONFETTI BURST (js-driven)
════════════════════════ */
.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 500;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ════════════════════════
   ACHIEVEMENT POPUP
════════════════════════ */
.achievement-pop {
  position: fixed;
  top: 1.5rem;
  right: 1rem;
  background: var(--outline);
  border: 3px solid var(--lemon-yellow);
  border-radius: var(--radius-md);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
  padding: 0.75rem 1rem;
  z-index: 400;
  transform: translateX(120%);
  transition: transform 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  min-width: 220px;
  max-width: 280px;
}
.achievement-pop.show { transform: translateX(0); }
.achievement-title {
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lemon-yellow);
  margin-bottom: 3px;
}
.achievement-name {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 6px;
}
.achievement-desc {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}

/* ════════════════════════
   SCROLL TRACK
════════════════════════ */
.scroll-track {
  position: fixed;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 50;
}
.scroll-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(26,16,20,0.2);
  border: 2px solid rgba(26,16,20,0.3);
  transition: all 0.2s;
  cursor: pointer;
}
.scroll-dot.active {
  background: var(--outline);
  transform: scale(1.6);
}

/* ════════════════════════
   FOOTER
════════════════════════ */
footer {
  text-align: center;
  padding: 1.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(26,16,20,0.45);
  position: relative;
  z-index: 1;
}

/* ════════════════════════
   RESPONSIVE
════════════════════════ */
@media (max-width: 480px) {
  .palette-grid    { grid-template-columns: repeat(3, 1fr); }
  .toc-grid        { grid-template-columns: 1fr 1fr; }
  .toolbar         { gap: 6px; }
  .btn-tool        { font-size: 0.75rem; padding: 6px 11px; }
  header h1        { letter-spacing: -2px; }
  .stats-row       { grid-template-columns: repeat(3,1fr); }
  .scroll-track    { display: none; }
  .achievement-pop { max-width: 240px; }
}

@media (max-width: 360px) {
  .toc-grid        { grid-template-columns: 1fr; }
  .palette-grid    { grid-template-columns: repeat(2, 1fr); }
  .stats-row       { grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
}

/* ════════════════════════
   SCROLL TO TOP
════════════════════════ */
#scrolltop {
  position: fixed;
  bottom: 1.5rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  background: var(--outline);
  color: var(--lemon-yellow);
  border: 3px solid var(--outline);
  border-radius: 50%;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s;
  touch-action: manipulation;
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%,100% { box-shadow: 3px 3px 0 var(--outline); }
  50% { box-shadow: 5px 5px 0 var(--outline), 0 0 15px rgba(255,231,128,0.3); }
}

#scrolltop.visible { opacity: 1; transform: translateY(0); }

/* ─── PULSE on first open ── */
@keyframes sectionPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,231,128,0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(255,231,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,231,128,0); }
}
.section.just-opened {
  animation: sectionPulse 0.6s ease;
}
</style>
</head>
<body>

<!-- XP PROGRESS BAR -->
<div class="xp-bar-wrap"><div class="xp-bar-fill" id="xpBar"></div></div>

<!-- PARTICLES CANVAS -->
<canvas id="particles-canvas"></canvas>

<!-- TOAST -->
<div class="toast" id="toast"></div>

<!-- ACHIEVEMENT POPUP -->
<div class="achievement-pop" id="achievement">
  <div class="achievement-title">🏆 Conquista desbloqueada!</div>
  <div class="achievement-name" id="achievementName">—</div>
  <div class="achievement-desc" id="achievementDesc">—</div>
</div>

<!-- SCROLL DOTS -->
<div class="scroll-track" id="scrollTrack"></div>

<!-- RAINBOW TOP BAR -->
<div class="rainbow-bar"></div>

<!-- HEADER -->
<header>
  <div class="header-floaters" id="headerFloaters"></div>
  <div class="header-eyebrow">✦ FIELD GUIDE v.01 · 2025/2026</div>
  <h1>DOODLES<span class="accent">.</span><span class="accent2">AI</span></h1>
  <div class="header-rainbow-text">Manual Completo do Gerador de Imagens</div>
  <div class="header-tags">
    <span class="tag">🎨 LoRA Doodles</span>
    <span class="tag">📱 Mobile First</span>
    <span class="tag">✦ 19 Seções</span>
    <span class="tag">🌈 Paleta Oficial</span>
  </div>
  <div class="level-badge">
    <div class="level-pill">⚡ NÍVEL <span id="levelNum">1</span></div>
    <div class="stars-row">
      <span class="star">⭐</span>
      <span class="star">⭐</span>
      <span class="star">⭐</span>
    </div>
  </div>
</header>

<!-- RAINBOW BOTTOM BAR -->
<div class="rainbow-bar"></div>

<div class="wrapper">

  <!-- STATS ROW -->
  <div class="stats-row">
    <div class="stat-card">
      <span class="stat-icon">📖</span>
      <span class="stat-value" id="statRead">0</span>
      <span class="stat-label">Seções lidas</span>
    </div>
    <div class="stat-card">
      <span class="stat-icon">📋</span>
      <span class="stat-value" id="statCopied">0</span>
      <span class="stat-label">Prompts copiados</span>
    </div>
    <div class="stat-card">
      <span class="stat-icon">⚡</span>
      <span class="stat-value" id="statXP">0</span>
      <span class="stat-label">XP Total</span>
    </div>
  </div>

  <!-- TICKER TAPE -->
  <div class="ticker-wrap">
    <div class="ticker-label">💡 DICA</div>
    <div class="ticker-track">
      <div class="ticker-inner" id="tickerInner">
        <span class="ticker-item">Abra uma seção para ganhar <span>+10 XP</span></span>
        <span class="ticker-item">Copie um prompt e ganhe <span>+25 XP</span></span>
        <span class="ticker-item">Roupa SEMPRE com cor no prompt</span>
        <span class="ticker-item">Use <span>chubby doodle</span> ou <span>slim doodle</span> para definir o corpo</span>
        <span class="ticker-item">Fundo sempre no FINAL da descrição da cena</span>
        <span class="ticker-item">Máximo <span>2 objetos</span> de destaque por cena</span>
        <span class="ticker-item">Fixe a <span>seed</span> para consistência de personagens</span>
        <span class="ticker-item">Efeito X OFF para product shots e stickers</span>
        <span class="ticker-item">Use <span>Rápido (6 steps)</span> para testar e Máximo para arte final</span>
        <span class="ticker-item">Sombras: mova o seletor <span>horizontalmente</span>, não verticalmente</span>
        <!-- duplicate for seamless loop -->
        <span class="ticker-item">Abra uma seção para ganhar <span>+10 XP</span></span>
        <span class="ticker-item">Copie um prompt e ganhe <span>+25 XP</span></span>
        <span class="ticker-item">Roupa SEMPRE com cor no prompt</span>
        <span class="ticker-item">Use <span>chubby doodle</span> ou <span>slim doodle</span> para definir o corpo</span>
        <span class="ticker-item">Fundo sempre no FINAL da descrição da cena</span>
        <span class="ticker-item">Máximo <span>2 objetos</span> de destaque por cena</span>
        <span class="ticker-item">Fixe a <span>seed</span> para consistência de personagens</span>
        <span class="ticker-item">Efeito X OFF para product shots e stickers</span>
        <span class="ticker-item">Use <span>Rápido (6 steps)</span> para testar e Máximo para arte final</span>
        <span class="ticker-item">Sombras: mova o seletor <span>horizontalmente</span>, não verticalmente</span>
      </div>
    </div>
  </div>

  <!-- TABLE OF CONTENTS -->
  <div class="toc-card">
    <div class="toc-title">📋 Índice</div>
    <div class="toc-grid">
      <a href="#s1">1. O que é o Doodles AI</a>
      <a href="#s2">2. Interface do App</a>
      <a href="#s3">3. Estilos Base</a>
      <a href="#s4">4. Modos de Geração</a>
      <a href="#s5">5. Fórmula do Prompt</a>
      <a href="#s6">6. Paleta Oficial</a>
      <a href="#s7">7. Tokens de Personagem</a>
      <a href="#s8">8. Roupas & Acessórios</a>
      <a href="#s9">9. Poses & Enquadramentos</a>
      <a href="#s10">10. Fundos & Cenários</a>
      <a href="#s11">11. Texto Meme</a>
      <a href="#s12">12. Efeito X</a>
      <a href="#s13">13. Resoluções</a>
      <a href="#s14">14. Prompt Negativo</a>
      <a href="#s15">15. Consistência de Personagens</a>
      <a href="#s16">16. Sweet Spots por Conteúdo</a>
      <a href="#s17">17. Combinações Avançadas</a>
      <a href="#s18">18. Template para IA</a>
      <a href="#s19">19. Troubleshooting</a>
    </div>
  </div>

  <!-- TOOLBAR -->
  <div class="toolbar">
    <button class="btn-tool yellow" onclick="toggleAll(true)">▼ Expandir tudo</button>
    <button class="btn-tool" onclick="toggleAll(false)">▲ Recolher tudo</button>
    <button class="btn-tool pink" onclick="scrollToTop()">↑ Topo</button>
    <button class="btn-tool green" onclick="resetProgress()">🔄 Reset XP</button>
  </div>

  <!-- SECTION 1 -->
  <div class="section s1" id="s1">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">1</div>
      <div class="section-title">O que é o Doodles AI</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <p>O <strong>Doodles AI</strong> é um gerador de imagens baseado em <strong>Stable Diffusion</strong> com uma LoRA customizada treinada no estilo visual oficial da Doodles — cartoon flat 2D com outline, paleta pastel vibrante e personagens expressivos.</p>
      <div class="callout callout-info">
        <strong>LoRA</strong> (Low-Rank Adaptation) é uma técnica de fine-tuning que ensina o modelo a gerar imagens dentro de um estilo específico sem precisar retreinar tudo do zero.
      </div>
      <h3>✦ O que o app consegue gerar</h3>
      <ul>
        <li>Personagens humanos e animais no estilo Doodles</li>
        <li>Cenários e backgrounds pastéis</li>
        <li>Objetos e produtos estilizados</li>
        <li>Imagens com texto (lettering)</li>
        <li>Conteúdo com meme/texto sobreposto</li>
        <li>Material para redes sociais (feed, stories, reels)</li>
      </ul>
      <h3>✦ O que o app NÃO faz bem</h3>
      <ul>
        <li>Rostos hiper-realistas</li>
        <li>Textos longos ou com acentuação complexa</li>
        <li>Estilos que fogem muito do universo Doodles</li>
      </ul>
    </div>
  </div>

  <!-- SECTION 2 -->
  <div class="section s2" id="s2">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">2</div>
      <div class="section-title">Interface do App</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <div class="table-wrap"><table>
        <thead><tr><th>Campo</th><th>Função</th></tr></thead>
        <tbody>
          <tr><td><strong>Estilo Base</strong></td><td>Define o "sabor" visual geral da geração</td></tr>
          <tr><td><strong>Modo</strong></td><td>Orienta o modelo para tipo de conteúdo</td></tr>
          <tr><td><strong>Base do Personagem</strong></td><td>Descrição fixa do personagem (opcional)</td></tr>
          <tr><td><strong>Sua Cena</strong></td><td>A cena/ação principal — onde você controla mais</td></tr>
          <tr><td><strong>Prompt Negativo</strong></td><td>O que você quer evitar na geração</td></tr>
          <tr><td><strong>Seed</strong></td><td>Número para repetir/variar resultados</td></tr>
          <tr><td><strong>Qualidade</strong></td><td>Rápido (6 steps) / Equilibrado (12) / Máximo (16)</td></tr>
          <tr><td><strong>Resolução</strong></td><td>Formato da imagem final</td></tr>
          <tr><td><strong>Efeito X</strong></td><td>Adiciona ruído/distorção artística</td></tr>
          <tr><td><strong>Texto Meme</strong></td><td>Texto sobreposto à imagem gerada</td></tr>
          <tr><td><strong>Watermark</strong></td><td>Slots para marca d'água personalizável</td></tr>
        </tbody>
      </table></div>
      <div class="callout callout-tip">
        <strong>Dica:</strong> O campo <strong>Sua Cena</strong> é onde você gasta mais atenção. A Base do Personagem serve como ancora — mude apenas a Cena entre gerações da mesma série.
      </div>
    </div>
  </div>

  <!-- SECTION 3 -->
  <div class="section s3" id="s3">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">3</div>
      <div class="section-title">Estilos Base</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <div class="table-wrap"><table>
        <thead><tr><th>Estilo</th><th>Característica</th><th>Melhor para</th></tr></thead>
        <tbody>
          <tr><td>🎨 <strong>Doodles Bruto</strong></td><td>Traço mais solto, cores vibrantes, outline bold</td><td>Personagens, cenas dinâmicas</td></tr>
          <tr><td>✦ <strong>DOOD</strong></td><td>Mais refinado, backgrounds elaborados, cinematográfico</td><td>Artes finais, cenários</td></tr>
          <tr><td>🎮 <strong>Pixel ART</strong></td><td>Estética retrô 8-bit/16-bit com paleta Doodles</td><td>Games, nostalgia, conteúdo temático</td></tr>
          <tr><td>🖼️ <strong>Sticker Pack</strong></td><td>Fundo branco/transparente, traço clean</td><td>Figurinhas, elementos isolados</td></tr>
          <tr><td>🌌 <strong>Dark Mode</strong></td><td>Fundo escuro, neons, contraste alto</td><td>Night vibes, eventos, misterioso</td></tr>
        </tbody>
      </table></div>
      <div class="callout callout-warn">
        <strong>Atenção:</strong> O estilo DOOD tende a gerar fundos mais elaborados mesmo em cenas simples. Para fundos limpos, prefira <strong>Doodles Bruto</strong> + termos como <code>simple background</code>.
      </div>
    </div>
  </div>

  <!-- SECTION 4 -->
  <div class="section s4" id="s4">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">4</div>
      <div class="section-title">Modos de Geração</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <div class="table-wrap"><table>
        <thead><tr><th>Modo</th><th>Função</th><th>Dica de uso</th></tr></thead>
        <tbody>
          <tr><td>👤 <strong>Personagens</strong></td><td>Foco em figuras humanas/animais</td><td>Use tokens chubby/slim</td></tr>
          <tr><td>🌄 <strong>Cenários</strong></td><td>Paisagens, interiores, ambientes</td><td>Add <code>no people</code> se quiser vazio</td></tr>
          <tr><td>📦 <strong>Objetos</strong></td><td>Produtos, itens isolados</td><td>Use <code>product shot, isolated</code></td></tr>
          <tr><td>✏️ <strong>Lettering</strong></td><td>Foco em texto ilustrado</td><td>Palavras curtas, sem acentos</td></tr>
          <tr><td>🎭 <strong>Misto</strong></td><td>Personagem + cenário + objeto</td><td>Máximo 2 elementos destaque</td></tr>
        </tbody>
      </table></div>
    </div>
  </div>

  <!-- SECTION 5 -->
  <div class="section s5" id="s5">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">5</div>
      <div class="section-title">Fórmula do Prompt</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <h3>🔑 Estrutura completa do prompt final</h3>
      <pre>[reinforce do estilo] + [modo] + [base do personagem] + [cena] + [estilo base]</pre>
      <h3>🎯 Fórmula da Cena (o que você escreve)</h3>
      <pre>[personagem] + [cabelo] + [roupa com cor] + [pose/ação] + [enquadramento] + [fundo]</pre>
      <h3>✅ Exemplo prático</h3>
      <pre>a slim doodle woman with pink curly hair,
wearing a mint green oversized hoodie and white wide-leg pants,
sitting cross-legged holding a coffee cup,
medium shot, soft lavender pastel background</pre>
      <h3>📌 Regras de ouro</h3>
      <ul>
        <li><strong>Sempre em inglês</strong></li>
        <li>Roupa sempre com cor especificada (ex: <code>dark navy jacket</code>)</li>
        <li>Fundo sempre no final da cena</li>
        <li>Máximo 2 objetos de destaque por cena</li>
        <li>Evite frases negativas dentro da cena — use o campo Negativo</li>
      </ul>
    </div>
  </div>

  <!-- SECTION 6 -->
  <div class="section s6" id="s6">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">6</div>
      <div class="section-title">Paleta Oficial Doodles</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <p>Paleta exata extraída do <strong>Doodles Field Guide v.01</strong>. Clique em uma cor para copiar o HEX!</p>
      <h3>Core Palette</h3>
      <div class="palette-grid">
        <div class="swatch" onclick="copySwatch('#FFB3E6','Petal Pink')">
          <div class="swatch-color" style="background:#FFB3E6"></div>
          <div class="swatch-info"><span class="swatch-name">Petal Pink</span><span class="swatch-hex">#FFB3E6</span></div>
        </div>
        <div class="swatch" onclick="copySwatch('#FFE780','Lemon Yellow')">
          <div class="swatch-color" style="background:#FFE780"></div>
          <div class="swatch-info"><span class="swatch-name">Lemon Yellow</span><span class="swatch-hex">#FFE780</span></div>
        </div>
        <div class="swatch" onclick="copySwatch('#FFC897','Orange Sorbet')">
          <div class="swatch-color" style="background:#FFC897"></div>
          <div class="swatch-info"><span class="swatch-name">Orange Sorbet</span><span class="swatch-hex">#FFC897</span></div>
        </div>
        <div class="swatch" onclick="copySwatch('#B3FFC7','Touch Grass')">
          <div class="swatch-color" style="background:#B3FFC7"></div>
          <div class="swatch-info"><span class="swatch-name">Touch Grass</span><span class="swatch-hex">#B3FFC7</span></div>
        </div>
        <div class="swatch" onclick="copySwatch('#A1E9FF','Clear Skies')">
          <div class="swatch-color" style="background:#A1E9FF"></div>
          <div class="swatch-info"><span class="swatch-name">Clear Skies</span><span class="swatch-hex">#A1E9FF</span></div>
        </div>
        <div class="swatch" onclick="copySwatch('#C5C5FF','Grape Jelly')">
          <div class="swatch-color" style="background:#C5C5FF"></div>
          <div class="swatch-info"><span class="swatch-name">Grape Jelly</span><span class="swatch-hex">#C5C5FF</span></div>
        </div>
        <div class="swatch" onclick="copySwatch('#FFEAD2','Peach Puff')">
          <div class="swatch-color" style="background:#FFEAD2"></div>
          <div class="swatch-info"><span class="swatch-name">Peach Puff</span><span class="swatch-hex">#FFEAD2</span></div>
        </div>
        <div class="swatch" onclick="copySwatch('#FFD0B8','Rosy Cheeks')">
          <div class="swatch-color" style="background:#FFD0B8"></div>
          <div class="swatch-info"><span class="swatch-name">Rosy Cheeks</span><span class="swatch-hex">#FFD0B8</span></div>
        </div>
        <div class="swatch" onclick="copySwatch('#E8A68B','Caramel Cream')">
          <div class="swatch-color" style="background:#E8A68B"></div>
          <div class="swatch-info"><span class="swatch-name">Caramel Cream</span><span class="swatch-hex">#E8A68B</span></div>
        </div>
      </div>
      <h3>Background Colors</h3>
      <div class="palette-grid">
        <div class="swatch" onclick="copySwatch('#FFB3E6','Petal Pink BG')"><div class="swatch-color" style="background:#FFB3E6"></div><div class="swatch-info"><span class="swatch-name">Petal Pink BG</span><span class="swatch-hex">#FFB3E6</span></div></div>
        <div class="swatch" onclick="copySwatch('#FFEA8F','Lemon Yellow BG')"><div class="swatch-color" style="background:#FFEA8F"></div><div class="swatch-info"><span class="swatch-name">Lemon Yellow BG</span><span class="swatch-hex">#FFEA8F</span></div></div>
        <div class="swatch" onclick="copySwatch('#FFC897','Orange Sorbet BG')"><div class="swatch-color" style="background:#FFC897"></div><div class="swatch-info"><span class="swatch-name">Orange Sorbet BG</span><span class="swatch-hex">#FFC897</span></div></div>
        <div class="swatch" onclick="copySwatch('#83FFC1','Touch Grass BG')"><div class="swatch-color" style="background:#83FFC1"></div><div class="swatch-info"><span class="swatch-name">Touch Grass BG</span><span class="swatch-hex">#83FFC1</span></div></div>
        <div class="swatch" onclick="copySwatch('#A1E9FF','Clear Skies BG')"><div class="swatch-color" style="background:#A1E9FF"></div><div class="swatch-info"><span class="swatch-name">Clear Skies BG</span><span class="swatch-hex">#A1E9FF</span></div></div>
        <div class="swatch" onclick="copySwatch('#C5C5FF','Grape Jelly BG')"><div class="swatch-color" style="background:#C5C5FF"></div><div class="swatch-info"><span class="swatch-name">Grape Jelly BG</span><span class="swatch-hex">#C5C5FF</span></div></div>
      </div>
      <div class="callout callout-purple">
        <strong>Shadow Theory:</strong> Nunca use preto puro para sombras. As sombras devem ser versões <em>mais saturadas</em> da cor base. Ao ajustar sombras, mova o seletor de cor horizontalmente (saturação), nunca verticalmente (escurecimento).
      </div>
    </div>
  </div>

  <!-- SECTION 7 -->
  <div class="section s7" id="s7">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">7</div>
      <div class="section-title">Tokens de Personagem</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <h3>Corpo</h3>
      <div style="margin-bottom:0.7rem">
        <span class="badge badge-pink">chubby doodle</span>
        <span class="badge badge-blue">slim doodle</span>
        <span class="badge badge-green">medium doodle</span>
      </div>
      <h3>Animal antropomórfico</h3>
      <pre>chubby/slim anthropomorphic [animal] doodle</pre>
      <h3>Gênero</h3>
      <div style="margin-bottom:0.7rem">
        <span class="badge badge-pink">doodle man</span>
        <span class="badge badge-purple">doodle woman</span>
        <span class="badge badge-yellow">doodle person</span>
      </div>
      <h3>Modificadores de força</h3>
      <div class="table-wrap"><table>
        <thead><tr><th>Token</th><th>Efeito</th></tr></thead>
        <tbody>
          <tr><td><code>very chubby round-bodied</code></td><td>Reforça corpo gordo quando o modelo dilui</td></tr>
          <tr><td><code>very slim thin-bodied</code></td><td>Reforça corpo magro</td></tr>
          <tr><td><code>chibi</code></td><td>Proporções infantis, cabeça grande</td></tr>
          <tr><td><code>cute</code></td><td>Amplifica traços fofinhos</td></tr>
        </tbody>
      </table></div>
    </div>
  </div>

  <!-- SECTION 8 -->
  <div class="section s8" id="s8">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">8</div>
      <div class="section-title">Roupas & Acessórios</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <div class="callout callout-warn">
        <strong>Regra absoluta:</strong> Roupa SEMPRE com cor. Nunca escreva apenas "jacket" — escreva "dark navy jacket" ou "mint green oversized hoodie".
      </div>
      <h3>Paleta de cores para roupas nos prompts</h3>
      <div class="table-wrap"><table>
        <thead><tr><th>Nome no prompt</th><th>Corresponde a</th></tr></thead>
        <tbody>
          <tr><td><code>soft pink</code></td><td>Petal Pink #FFB3E6</td></tr>
          <tr><td><code>pastel yellow</code></td><td>Lemon Yellow #FFE780</td></tr>
          <tr><td><code>peach orange</code></td><td>Orange Sorbet #FFC897</td></tr>
          <tr><td><code>mint green</code></td><td>Touch Grass #B3FFC7</td></tr>
          <tr><td><code>sky blue / baby blue</code></td><td>Clear Skies #A1E9FF</td></tr>
          <tr><td><code>lavender purple</code></td><td>Grape Jelly #C5C5FF</td></tr>
          <tr><td><code>teal / dark teal</code></td><td>Verde escuro para contraste</td></tr>
          <tr><td><code>dark navy</code></td><td>Escuro sem ser preto puro</td></tr>
        </tbody>
      </table></div>
      <h3>Peças frequentes no estilo Doodles</h3>
      <ul>
        <li>Oversized hoodie / turtleneck sweater</li>
        <li>Wide-leg pants / baggy jeans</li>
        <li>Track jacket (estilo adidas)</li>
        <li>Crop top / sports bra</li>
        <li>Bucket hat / baseball cap</li>
        <li>Chunky sneakers / platform shoes</li>
        <li>Statement jewelry (correntes, brincos grandes)</li>
      </ul>
    </div>
  </div>

  <!-- SECTION 9 -->
  <div class="section s9" id="s9">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">9</div>
      <div class="section-title">Poses & Enquadramentos</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <h3>Poses</h3>
      <div class="table-wrap"><table>
        <thead><tr><th>Token</th><th>Efeito visual</th></tr></thead>
        <tbody>
          <tr><td><code>standing relaxed</code></td><td>Em pé, pose cool</td></tr>
          <tr><td><code>sitting cross-legged</code></td><td>Sentado no chão</td></tr>
          <tr><td><code>jumping mid-air</code></td><td>No ar, dinâmico</td></tr>
          <tr><td><code>running</code></td><td>Correndo, membros esticados</td></tr>
          <tr><td><code>lying down</code></td><td>Deitado, relaxado</td></tr>
          <tr><td><code>waving</code></td><td>Acenando para câmera</td></tr>
          <tr><td><code>pointing at camera</code></td><td>Aponta para quem olha</td></tr>
          <tr><td><code>peace sign</code></td><td>V com os dedos</td></tr>
          <tr><td><code>arms crossed</code></td><td>Braços cruzados, atitude</td></tr>
          <tr><td><code>floating in mid-air</code></td><td>Flutuando com gravidade zero</td></tr>
        </tbody>
      </table></div>
      <h3>Enquadramentos</h3>
      <div class="table-wrap"><table>
        <thead><tr><th>Token</th><th>Câmera</th></tr></thead>
        <tbody>
          <tr><td><code>close-up portrait</code></td><td>Rosto/busto</td></tr>
          <tr><td><code>medium shot</code></td><td>Cintura para cima</td></tr>
          <tr><td><code>full body shot</code></td><td>Corpo inteiro</td></tr>
          <tr><td><code>wide establishing shot</code></td><td>Plano geral, ambiente</td></tr>
          <tr><td><code>from above / bird's eye view</code></td><td>Câmera de cima</td></tr>
          <tr><td><code>from below / worm's eye view</code></td><td>Câmera de baixo</td></tr>
          <tr><td><code>direct front view</code></td><td>Frontal direto (bom para placa)</td></tr>
          <tr><td><code>3/4 profile</code></td><td>Vista lateral em 3/4</td></tr>
        </tbody>
      </table></div>
    </div>
  </div>

  <!-- SECTION 10 -->
  <div class="section s10" id="s10">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">10</div>
      <div class="section-title">Fundos & Cenários</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <h3>Fundos simples (para personagens/produtos)</h3>
      <div class="table-wrap"><table>
        <thead><tr><th>Token</th><th>Visual</th></tr></thead>
        <tbody>
          <tr><td><code>soft pink pastel background</code></td><td>Petal Pink sólido/suave</td></tr>
          <tr><td><code>lavender purple background</code></td><td>Grape Jelly</td></tr>
          <tr><td><code>mint green background</code></td><td>Touch Grass</td></tr>
          <tr><td><code>sky blue background</code></td><td>Clear Skies</td></tr>
          <tr><td><code>clean white background</code></td><td>Para stickers</td></tr>
          <tr><td><code>gradient pastel background</code></td><td>Degradê suave entre cores</td></tr>
          <tr><td><code>simple pastel shapes background</code></td><td>Formas geométricas minimalistas</td></tr>
        </tbody>
      </table></div>
      <h3>Cenários elaborados (para modo DOOD)</h3>
      <ul>
        <li><code>colorful pastel landscape with rolling hills and rainbows</code></li>
        <li><code>retro cityscape at golden hour</code></li>
        <li><code>cozy bedroom with pastel furniture and fairy lights</code></li>
        <li><code>outer space with colorful planets and stars</code></li>
        <li><code>tropical beach at sunset with palm trees</code></li>
        <li><code>neon-lit city street at night</code></li>
      </ul>
    </div>
  </div>

  <!-- SECTION 11 -->
  <div class="section s11" id="s11">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">11</div>
      <div class="section-title">Texto Meme</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <h3>Posições disponíveis</h3>
      <div class="table-wrap"><table>
        <thead><tr><th>Posição</th><th>Onde aparece</th><th>Usar quando</th></tr></thead>
        <tbody>
          <tr><td><strong>Topo</strong></td><td>Borda superior</td><td>Contexto/setup</td></tr>
          <tr><td><strong>Base</strong></td><td>Borda inferior</td><td>Punch line, reação</td></tr>
          <tr><td><strong>Placa</strong></td><td>Dentro da placa branca na imagem</td><td>Quando gerar placa na cena</td></tr>
          <tr><td><strong>Tarja</strong></td><td>Faixa estilo GC/TV</td><td>Estética de noticiário</td></tr>
          <tr><td><strong>Flutuante</strong></td><td>Centralizado no meio</td><td>Arte/lettering</td></tr>
        </tbody>
      </table></div>
      <h3>Fontes disponíveis</h3>
      <div style="margin-bottom:0.7rem">
        <span class="badge badge-yellow">Impact</span>
        <span class="badge badge-pink">Bebas Neue</span>
        <span class="badge badge-blue">Bangers</span>
        <span class="badge badge-green">Comic Sans</span>
        <span class="badge badge-purple">Arial Black</span>
      </div>
      <h3>Setup de cena para Placa</h3>
      <pre>a slim doodle man with blue hair, wearing a dark teal hoodie and black pants,
holding a blank white sign with both hands at chest level,
direct front view, colorful pastel background</pre>
      <h3>Setup de cena para GC/Tarja</h3>
      <pre>a [personagem] with [cabelo escuro], wearing [roupa ESCURA — sem branco],
[expressão dramática] looking at camera, [fundo saturado escuro],
white horizontal banner bar at the bottom of the image, no white in scene</pre>
      <div class="callout callout-warn">
        <strong>Por quê sem branco na cena?</strong> O detector de placa procura regiões de alta luminância e baixa saturação. Branco na roupa ou fundo pode confundir o detector.
      </div>
    </div>
  </div>

  <!-- SECTION 12 -->
  <div class="section s12" id="s12">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">12</div>
      <div class="section-title">Efeito X</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <p>O <strong>Efeito X</strong> adiciona uma camada de ruído e distorção artística sobre a imagem gerada, criando uma estética mais suja, analógica ou glitchy.</p>
      <h3>Quando ativar</h3>
      <ul>
        <li>Conteúdo com vibe lo-fi, vintage ou underground</li>
        <li>Posts com tema de "erro", "glitch" ou tech-art</li>
        <li>Quando o resultado ficou bom mas parece limpo demais</li>
      </ul>
      <h3>Quando desativar</h3>
      <ul>
        <li>Product shots — o ruído interfere na leitura do produto</li>
        <li>GC/Tarja — o efeito pode atrapalhar a detecção do banner</li>
        <li>Stickers — precisa de bordas limpas</li>
        <li>Quando o texto meme é a prioridade visual</li>
      </ul>
      <div class="callout callout-info">
        Combine Efeito X + Pixel ART para um resultado de jogo retro degradado — estética muito específica e marcante.
      </div>
    </div>
  </div>

  <!-- SECTION 13 -->
  <div class="section s13" id="s13">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">13</div>
      <div class="section-title">Resoluções</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <div class="table-wrap"><table>
        <thead><tr><th>Resolução</th><th>Formato</th><th>Uso ideal</th></tr></thead>
        <tbody>
          <tr><td>📷 <strong>Feed IG</strong></td><td>1080 × 1080</td><td>Posts quadrados</td></tr>
          <tr><td>📱 <strong>Stories/Reels</strong></td><td>1080 × 1920</td><td>Vertical 9:16</td></tr>
          <tr><td>🖥️ <strong>Wallpaper</strong></td><td>1920 × 1080</td><td>Desktop/YouTube</td></tr>
          <tr><td>🐦 <strong>Twitter/X</strong></td><td>1200 × 675</td><td>Post horizontal</td></tr>
          <tr><td>📌 <strong>Pinterest</strong></td><td>1000 × 1500</td><td>Pin vertical</td></tr>
          <tr><td>🎴 <strong>Card</strong></td><td>800 × 1200</td><td>Formato card geral</td></tr>
        </tbody>
      </table></div>
      <div class="callout callout-tip">
        <strong>Performance:</strong> Resoluções maiores + qualidade Máximo = geração mais lenta. Use <strong>Rápido</strong> para testes de conceito e <strong>Máximo</strong> apenas na arte final.
      </div>
    </div>
  </div>

  <!-- SECTION 14 -->
  <div class="section s14" id="s14">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">14</div>
      <div class="section-title">Prompt Negativo</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <h3>Negativo padrão recomendado</h3>
      <pre>ugly, deformed, blurry, low quality, watermark, text, signature,
extra limbs, missing limbs, bad anatomy, bad proportions,
realistic, photorealistic, 3d render, hyper-detailed</pre>
      <h3>Para personagens</h3>
      <pre>ugly face, crossed eyes, bad hands, extra fingers, missing fingers,
deformed body, flat design, simple shapes only</pre>
      <h3>Para product shots</h3>
      <pre>people, characters, busy background, noise, grain, blur, artifacts</pre>
      <h3>Para GC / Placa</h3>
      <pre>white clothing, white background, bright elements, high-key lighting,
extra text, blurry text, deformed letters</pre>
      <h3>Para lettering</h3>
      <pre>blurry text, deformed letters, misspelled, extra characters,
unclear text, distorted font</pre>
    </div>
  </div>

  <!-- SECTION 15 -->
  <div class="section s15" id="s15">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">15</div>
      <div class="section-title">Consistência de Personagens</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <h3>Estratégia recomendada</h3>
      <ol>
        <li>Cole a descrição completa do personagem no campo <strong>Base do Personagem</strong> — <strong>nunca mexa</strong></li>
        <li>Varie apenas o campo <strong>Sua Cena</strong> entre gerações</li>
        <li>Fixe a <strong>seed</strong> para máxima consistência visual</li>
        <li>Use sempre o mesmo <strong>Estilo Base</strong> na série</li>
      </ol>
      <h3>Bases prontas para uso</h3>
      <p><strong>HAP + MELLO:</strong></p>
      <pre>HAP chibi boy short lavender hair blue turtleneck sweater pink wide-leg pants blue sneakers,
and MELLO small white fluffy cat big round eyes long curly tail</pre>
      <p><strong>Captain Stoke:</strong></p>
      <pre>Captain Stoke cute chibi skeleton purple eye sockets white captain hat blue band
yellow button blue round shoes yellow accent bones on ribcage and one leg</pre>
      <p><strong>Hue:</strong></p>
      <pre>Hue chibi alien large round mint green head two small round antennae big black oval eyes
mint green skin white turtleneck blue diamond on chest dark gray wide-leg pants
white sneakers purple wristwatch left wrist</pre>
      <h3>Estilo recomendado por personagem</h3>
      <div class="table-wrap"><table>
        <thead><tr><th>Personagem</th><th>Estilo</th></tr></thead>
        <tbody>
          <tr><td>HAP</td><td>🎨 Doodles Bruto</td></tr>
          <tr><td>MELLO</td><td>🎨 Doodles Bruto</td></tr>
          <tr><td>Hue</td><td>🎨 Doodles Bruto</td></tr>
          <tr><td>Captain Stoke</td><td>✦ DOOD</td></tr>
          <tr><td>Deysi</td><td>✦ DOOD</td></tr>
        </tbody>
      </table></div>
    </div>
  </div>

  <!-- SECTION 16 -->
  <div class="section s16" id="s16">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">16</div>
      <div class="section-title">Sweet Spots por Tipo de Conteúdo</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <h3>Personagem segurando produto</h3>
      <pre>a [chubby/slim] doodle [man/woman] with [cabelo],
wearing [roupa colorida],
holding [descrição do produto] [posição],
[enquadramento], [fundo pastel]</pre>
      <h3>Animal antropomórfico</h3>
      <pre>a [chubby/slim] anthropomorphic [animal] doodle
wearing [roupa], [ação], [expressão], [fundo pastel]</pre>
      <h3>Produto isolado (product shot)</h3>
      <pre>[descrição detalhada do produto],
floating on [fundo pastel], product shot, soft shadow below, no people</pre>
      <h3>Cenário sem personagem</h3>
      <pre>a [ambiente detalhado], [elementos específicos],
[iluminação], no people, wide establishing shot</pre>
      <h3>Lettering</h3>
      <pre>bold [estilo] lettering that says [TEXTO EM CAPS],
[efeito visual], isolated on [fundo escuro/branco]</pre>
      <h3>GC / Tarja estilo telejornal</h3>
      <pre>a [personagem] with [cabelo escuro], wearing [roupa ESCURA — sem branco],
[expressão dramática] looking at camera, [fundo saturado escuro],
white horizontal banner bar at the bottom of the image, no white in scene</pre>
    </div>
  </div>

  <!-- SECTION 17 -->
  <div class="section s17" id="s17">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">17</div>
      <div class="section-title">Combinações Avançadas</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <h3>Modo Placa + Personagem</h3>
      <pre>Estilo: 🎨 Doodles Bruto
Modo: 👤 Personagens
Cena: a slim doodle man with blue hair, wearing a dark teal hoodie and black pants,
      holding a blank white sign with both hands at chest level,
      direct front view, colorful pastel background
Texto Meme Posição: Placa</pre>
      <h3>Pixel ART + Cenário + Lettering</h3>
      <pre>Estilo: 🎮 Pixel ART
Modo: 🌄 Cenários
Cena: a retro pixel art city skyline at sunset, orange and purple sky,
      tall buildings with lit windows, no people, wide establishing shot
Texto Meme Posição: Flutuante
Fonte: Bangers</pre>
      <h3>Efeito X + Feed + Produto</h3>
      <pre>Resolução: 📷 Feed IG 1080×1080
Efeito X: ✅ Ativado
Modo: 📦 Objetos
WM: Slot 1 em Inf. Dir.</pre>
      <h3>GC / Tarja + Texto Meme Base</h3>
      <ol>
        <li>Gerar com fundo escuro + <code>white horizontal banner bar at the bottom of the image</code></li>
        <li>Texto Meme → <strong>Posição: Placa</strong></li>
        <li>Fonte: <strong>Impact</strong> ou <strong>Bebas Neue</strong></li>
        <li>O detector identifica a faixa branca e encaixa o texto dentro dela</li>
      </ol>
      <h3>Série de Personagem Consistente</h3>
      <pre>Base do Personagem: [descrição fixa do personagem]
Seed: [fixar o mesmo número]
Estilo: [mesmo estilo em todas as gerações]
Sua Cena: [variar a pose/ação]</pre>
    </div>
  </div>

  <!-- SECTION 18 -->
  <div class="section s18" id="s18">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">18</div>
      <div class="section-title">Template para IA</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <p>Cole no <strong>ChatGPT</strong>, <strong>Claude</strong> ou qualquer IA para gerar prompts automaticamente no formato correto:</p>
      <pre>Você é um especialista em criar prompts para o DOODLES AI, gerador de imagens
com LoRA customizada em estilo cartoon flat 2D, traço com outline, paleta pastel
vibrante, personagens expressivos estilo Doodles NFT.

SISTEMA DE PROMPT:
O app tem dois campos:
1. "Base do Personagem" — descrição fixa do personagem (opcional)
2. "Sua Cena" — ação/pose/ambiente que varia

O prompt final é montado assim:
[reinforce do estilo] + [modo] + [base do personagem] + [cena] + [estilo base]

FÓRMULA DA CENA:
[personagem] + [cabelo] + [roupa com cor] + [pose/ação] + [enquadramento] + [fundo]

TOKENS DE PERSONAGEM:
- Gordo: "chubby doodle"
- Magro: "slim doodle"
- Animal: "chubby/slim anthropomorphic [animal] doodle"

REGRAS OBRIGATÓRIAS:
1. Sempre em inglês
2. Roupa SEMPRE com cor (ex: "dark navy jacket")
3. Fundo SEMPRE no final
4. Máximo 2 objetos destacados por cena
5. Para GC/Tarja: fundo escuro + roupa colorida + SEM branco
6. Para Placa: placa branca + fundo colorido + roupa sem branco</pre>
    </div>
  </div>

  <!-- SECTION 19 -->
  <div class="section s19" id="s19">
    <div class="section-header" onclick="toggle(this)">
      <div class="section-num">19</div>
      <div class="section-title">Troubleshooting</div>
      <div class="section-badge">LOCKED</div>
      <div class="section-toggle">▼</div>
    </div>
    <div class="section-body">
      <h3>❌ O texto meme não aparece na placa</h3>
      <div class="callout callout-warn">
        <strong>Causa:</strong> A arte tem elementos brancos além da placa (roupa branca, fundo claro).<br>
        <strong>Solução:</strong> Regere com roupas coloridas/escuras e fundo saturado. Adicione <code>no white clothing</code> ao negativo.
      </div>
      <h3>❌ O personagem saiu diferente do esperado</h3>
      <div class="callout callout-warn">
        <strong>Causa:</strong> O token foi diluído por outros tokens muito descritivos.<br>
        <strong>Solução:</strong> Reforce no início com <code>a very chubby round-bodied doodle man...</code>
      </div>
      <h3>❌ O lettering saiu errado</h3>
      <ul>
        <li>Use palavras curtas (1–2 palavras)</li>
        <li>Evite acentos: <code>ACAI</code> em vez de <code>AÇAÍ</code></li>
        <li>Adicione ao negativo: <code>blurry text, deformed letters, misspelled</code></li>
        <li>Gere múltiplas vezes com seeds diferentes</li>
      </ul>
      <h3>❌ A imagem ficou com fundo muito carregado</h3>
      <div class="callout callout-info">
        Adicione ao prompt: <code>clean background, minimal background, simple pastel shapes</code> — ou use <strong>🎨 Doodles Bruto</strong>.
      </div>
      <h3>❌ O produto não apareceu ou saiu diferente</h3>
      <ul>
        <li>Use o modo 📦 Objetos para focar no produto</li>
        <li>Descreva o produto no <strong>início</strong> da cena</li>
        <li>Use <code>product shot, centered, isolated</code> para reforçar</li>
      </ul>
      <h3>❌ A geração está lenta</h3>
      <div class="callout callout-tip">
        Use <strong>Rápido</strong> (6 steps) para testes e <strong>Equilibrado</strong> (12 steps) para uso geral. Reserve <strong>Máximo</strong> (16 steps) para artes finais.
      </div>
      <h3>❌ A consistência do personagem está quebrando</h3>
      <ul>
        <li>Use o campo <strong>Base do Personagem</strong> e mantenha-o fixo</li>
        <li>Fixe a <strong>seed</strong> entre gerações da mesma série</li>
        <li>Mantenha o mesmo <strong>Estilo Base</strong> em toda a série</li>
        <li>Não altere a ordem ou redação da Base do Personagem</li>
      </ul>
    </div>
  </div>

</div><!-- /wrapper -->

<!-- FOOTER -->
<div class="rainbow-bar"></div>
<footer>
  Manual DOODLES AI · Autor: <strong>Silas G.</strong> · Paleta oficial Field Guide v.01 · 2025
</footer>

<!-- SCROLL TO TOP -->
<div id="scrolltop" onclick="scrollToTop()">↑</div>

<script>
// ══════════════════════════════
// STATE
// ══════════════════════════════
let xp = 0;
let sectionsRead = 0;
let promptsCopied = 0;

const ACHIEVEMENTS = [
  { id:'first_open',   icon:'🔓', name:'Primeira Abertura',  desc:'Abriu a primeira seção',      xpNeeded: 0,  condition: () => sectionsRead >= 1 },
  { id:'explorer',     icon:'🗺️', name:'Explorador',         desc:'Abriu 5 seções',              xpNeeded: 0,  condition: () => sectionsRead >= 5 },
  { id:'master',       icon:'🧠', name:'Mestre do Manual',   desc:'Abriu todas as 19 seções',    xpNeeded: 0,  condition: () => sectionsRead >= 19 },
  { id:'copy_first',   icon:'📋', name:'Primeiro Prompt',    desc:'Copiou o primeiro prompt',    xpNeeded: 0,  condition: () => promptsCopied >= 1 },
  { id:'copy_pro',     icon:'🚀', name:'Prompt Pro',          desc:'Copiou 5 prompts',            xpNeeded: 0,  condition: () => promptsCopied >= 5 },
  { id:'xp_100',       icon:'⚡', name:'Carregando...',       desc:'Chegou a 100 XP',             xpNeeded: 100, condition: () => xp >= 100 },
  { id:'xp_500',       icon:'💎', name:'Diamond Doodler',    desc:'Chegou a 500 XP',             xpNeeded: 500, condition: () => xp >= 500 },
];

const earned = new Set();

function addXP(amount) {
  xp += amount;
  document.getElementById('statXP').textContent = xp;
  document.getElementById('statXP').classList.add('counting');
  setTimeout(() => document.getElementById('statXP').classList.remove('counting'), 300);

  // Level = floor(xp/50)+1
  const level = Math.floor(xp / 50) + 1;
  document.getElementById('levelNum').textContent = level;

  // XP bar (cap at 100% for visual)
  const pct = Math.min(100, (xp % 50) / 50 * 100);
  document.getElementById('xpBar').style.width = pct + '%';

  checkAchievements();
}

function checkAchievements() {
  ACHIEVEMENTS.forEach(a => {
    if (!earned.has(a.id) && a.condition()) {
      earned.add(a.id);
      showAchievement(a.icon + ' ' + a.name, a.desc);
      burst(window.innerWidth / 2, 80);
    }
  });
}

// ══════════════════════════════
// SECTION TOGGLE
// ══════════════════════════════
function toggle(header) {
  const section = header.parentElement;
  const wasOpen = section.classList.contains('open');
  section.classList.toggle('open');
  const badge = header.querySelector('.section-badge');

  if (!wasOpen) {
    // Opening
    section.classList.add('just-opened');
    setTimeout(() => section.classList.remove('just-opened'), 700);

    if (!section.classList.contains('read')) {
      section.classList.add('read');
      badge.textContent = 'LIDO ✓';
      sectionsRead++;
      document.getElementById('statRead').textContent = sectionsRead;
      document.getElementById('statRead').classList.add('counting');
      setTimeout(() => document.getElementById('statRead').classList.remove('counting'), 300);
      addXP(10);
      showToast('+10 XP 🎉');
    }
  }

  updateScrollDots();
}

function toggleAll(open) {
  document.querySelectorAll('.section').forEach(s => {
    const badge = s.querySelector('.section-badge');
    if (open) {
      s.classList.add('open');
      if (!s.classList.contains('read')) {
        s.classList.add('read');
        badge.textContent = 'LIDO ✓';
        sectionsRead++;
        addXP(10);
      }
    } else {
      s.classList.remove('open');
    }
  });
  document.getElementById('statRead').textContent = sectionsRead;
  updateScrollDots();
}

// ══════════════════════════════
// SCROLL
// ══════════════════════════════
function scrollToTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

window.addEventListener('scroll', () => {
  const btn = document.getElementById('scrolltop');
  btn.classList.toggle('visible', window.scrollY > 300);
  updateScrollDots();
}, { passive: true });

// ══════════════════════════════
// SCROLL DOTS
// ══════════════════════════════
function buildScrollDots() {
  const track = document.getElementById('scrollTrack');
  const sections = document.querySelectorAll('.section');
  sections.forEach((s, i) => {
    const dot = document.createElement('div');
    dot.className = 'scroll-dot';
    dot.title = 'Seção ' + (i+1);
    dot.onclick = () => s.scrollIntoView({ behavior: 'smooth', block: 'start' });
    track.appendChild(dot);
  });
}

function updateScrollDots() {
  const dots = document.querySelectorAll('.scroll-dot');
  const sections = document.querySelectorAll('.section');
  const scrollY = window.scrollY + window.innerHeight / 2;

  sections.forEach((s, i) => {
    const rect = s.getBoundingClientRect();
    const top = rect.top + window.scrollY;
    dots[i].classList.toggle('active', scrollY >= top && scrollY < top + s.offsetHeight);
  });
}

// ══════════════════════════════
// COPY PRE BLOCKS
// ══════════════════════════════
document.querySelectorAll('pre').forEach(pre => {
  pre.title = 'Toque para copiar';
  pre.addEventListener('click', () => {
    if (navigator.clipboard) {
      navigator.clipboard.writeText(pre.textContent.trim()).then(() => {
        pre.classList.add('copied');
        setTimeout(() => pre.classList.remove('copied'), 1200);
        promptsCopied++;
        document.getElementById('statCopied').textContent = promptsCopied;
        document.getElementById('statCopied').classList.add('counting');
        setTimeout(() => document.getElementById('statCopied').classList.remove('counting'), 300);
        addXP(25);
        showToast('+25 XP 📋 Prompt copiado!');
        burst(pre.getBoundingClientRect().left + pre.offsetWidth/2,
              pre.getBoundingClientRect().top + pre.offsetHeight/2);
        checkAchievements();
      });
    }
  });
});

// ══════════════════════════════
// SWATCH COPY
// ══════════════════════════════
function copySwatch(hex, name) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(hex).then(() => {
      showToast('🎨 ' + name + ' copiado: ' + hex);
      addXP(5);
    });
  }
}

// ══════════════════════════════
// TOAST
// ══════════════════════════════
let toastTimer;
function showToast(msg) {
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.classList.add('show');
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => t.classList.remove('show'), 2000);
}

// ══════════════════════════════
// ACHIEVEMENT POPUP
// ══════════════════════════════
let achTimer;
function showAchievement(name, desc) {
  const pop = document.getElementById('achievement');
  document.getElementById('achievementName').textContent = name;
  document.getElementById('achievementDesc').textContent = desc;
  pop.classList.add('show');
  clearTimeout(achTimer);
  achTimer = setTimeout(() => pop.classList.remove('show'), 3500);
}

// ══════════════════════════════
// CONFETTI BURST
// ══════════════════════════════
const colors = ['#FFB3E6','#FFE780','#FFC897','#B3FFC7','#A1E9FF','#C5C5FF'];
function burst(cx, cy) {
  for (let i = 0; i < 18; i++) {
    const el = document.createElement('div');
    el.className = 'confetti-piece';
    el.style.cssText = `
      left: ${cx + (Math.random()-0.5)*60}px;
      top: ${cy}px;
      background: ${colors[Math.floor(Math.random()*colors.length)]};
      border-radius: ${Math.random() > 0.5 ? '50%' : '2px'};
      animation-duration: ${0.8 + Math.random()*1}s;
      width: ${6+Math.random()*8}px;
      height: ${6+Math.random()*8}px;
    `;
    document.body.appendChild(el);
    setTimeout(() => el.remove(), 2000);
  }
}

// ══════════════════════════════
// PARTICLES CANVAS
// ══════════════════════════════
(function() {
  const canvas = document.getElementById('particles-canvas');
  const ctx = canvas.getContext('2d');
  let W, H;
  const particles = [];
  const EMOJIS = ['✦','🌈','⭐','🎨','✨','💫','🌸','🎮'];

  function resize() {
    W = canvas.width  = window.innerWidth;
    H = canvas.height = window.innerHeight;
  }
  resize();
  window.addEventListener('resize', resize);

  for (let i = 0; i < 22; i++) {
    particles.push({
      x: Math.random() * window.innerWidth,
      y: Math.random() * window.innerHeight,
      vy: -0.3 - Math.random() * 0.5,
      vx: (Math.random()-0.5) * 0.3,
      size: 10 + Math.random() * 14,
      alpha: 0.04 + Math.random() * 0.08,
      emoji: EMOJIS[Math.floor(Math.random()*EMOJIS.length)],
      rot: Math.random() * Math.PI * 2,
      rotV: (Math.random()-0.5)*0.01
    });
  }

  function draw() {
    ctx.clearRect(0, 0, W, H);
    particles.forEach(p => {
      ctx.save();
      ctx.globalAlpha = p.alpha;
      ctx.font = p.size + 'px serif';
      ctx.translate(p.x, p.y);
      ctx.rotate(p.rot);
      ctx.fillText(p.emoji, -p.size/2, p.size/2);
      ctx.restore();

      p.x  += p.vx;
      p.y  += p.vy;
      p.rot += p.rotV;

      if (p.y < -p.size*2) {
        p.y = H + p.size;
        p.x = Math.random() * W;
      }
    });
    requestAnimationFrame(draw);
  }
  draw();
})();

// ══════════════════════════════
// HEADER FLOATERS
// ══════════════════════════════
(function() {
  const container = document.getElementById('headerFloaters');
  const emojis = ['🎨','✨','🌈','⭐','💫','🎮','🖌️','🌸'];
  for (let i = 0; i < 12; i++) {
    const el = document.createElement('div');
    el.className = 'header-floater';
    el.textContent = emojis[Math.floor(Math.random()*emojis.length)];
    el.style.left = (Math.random()*100) + '%';
    el.style.animationDuration = (4 + Math.random()*5) + 's';
    el.style.animationDelay = (Math.random()*6) + 's';
    el.style.fontSize = (1 + Math.random()*1.5) + 'rem';
    container.appendChild(el);
  }
})();

// ══════════════════════════════
// RESET
// ══════════════════════════════
function resetProgress() {
  xp = 0; sectionsRead = 0; promptsCopied = 0;
  earned.clear();
  document.getElementById('statXP').textContent = 0;
  document.getElementById('statRead').textContent = 0;
  document.getElementById('statCopied').textContent = 0;
  document.getElementById('xpBar').style.width = '0%';
  document.getElementById('levelNum').textContent = 1;
  document.querySelectorAll('.section').forEach(s => {
    s.classList.remove('read','open');
    s.querySelector('.section-badge').textContent = 'LOCKED';
  });
  showToast('🔄 Progresso resetado');
}

// ══════════════════════════════
// INIT
// ══════════════════════════════
buildScrollDots();
updateScrollDots();
</script>
</body>
</html>