:root{--ink:#2b2b2b;--paper:#fffbf2;--paper-line:#efe7d3;--coral:#ff6b4a;--sun:#ffc93c;--sky:#4ea8de;--leaf:#4cb963;--lavender:#b79ced;--panel:#fff;--shadow:4px 4px 0 #2b2b2b1f}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--paper);background-image:repeating-linear-gradient(180deg, transparent 0 27px, var(--paper-line) 27px 28px);color:var(--ink);min-height:100vh;font-family:Nunito,sans-serif}.app{max-width:1080px;margin:0 auto;padding:0 0 40px}header{text-align:center;padding:22px 20px 14px}header h1{color:var(--ink);margin:0 0 4px;font-family:"Baloo 2",sans-serif;font-size:clamp(28px,6vw,40px);font-weight:800}header p{color:#6b6355;margin:0;font-size:15px;font-weight:700}.crayon-stripe{background:repeating-linear-gradient(90deg, var(--coral) 0 26px, var(--sun) 26px 52px, var(--sky) 52px 78px, var(--leaf) 78px 104px, var(--lavender) 104px 130px);border-radius:6px;width:100%;height:7px}.toast{background:var(--ink);color:#fff;opacity:0;pointer-events:none;z-index:50;border-radius:12px;padding:10px 18px;font-family:"Baloo 2",sans-serif;font-weight:700;transition:opacity .25s,transform .25s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(20px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.filters{flex-direction:column;gap:8px;padding:16px 20px 0;display:flex}.filter-row{-webkit-overflow-scrolling:touch;gap:8px;padding-bottom:4px;display:flex;overflow-x:auto}.filter-row::-webkit-scrollbar{height:6px}.filter-row::-webkit-scrollbar-thumb{background:#e3d9bf;border-radius:8px}.chip{background:var(--panel);border:3px solid var(--ink);cursor:pointer;white-space:nowrap;border-radius:20px;flex:none;padding:6px 14px;font-family:"Baloo 2",sans-serif;font-size:13px;font-weight:700}.chip.active{background:var(--ink);color:#fff}.chip.diff-facil.active{background:var(--leaf);color:#fff}.chip.diff-medio.active{background:var(--sun);color:var(--ink)}.chip.diff-dificil.active{background:var(--coral);color:#fff}.gallery{-webkit-overflow-scrolling:touch;gap:12px;padding:14px 20px 6px;display:flex;overflow-x:auto}.gallery::-webkit-scrollbar{height:8px}.gallery::-webkit-scrollbar-thumb{background:#e3d9bf;border-radius:8px}.empty-msg{color:#a89b7c;padding:20px;font-weight:800}.tut-card{background:var(--panel);border:3px solid var(--ink);cursor:pointer;text-align:center;width:86px;box-shadow:var(--shadow);border-radius:16px;flex:none;padding:8px 6px 6px;transition:transform .12s;position:relative}.tut-card:hover{transform:translateY(-2px)}.tut-card.active{background:var(--sun);border-color:var(--ink)}.tut-card svg{width:56px;height:56px}.tut-card span.tname{margin-top:2px;font-family:"Baloo 2",sans-serif;font-size:12px;font-weight:700;line-height:1.2;display:block}.diff-dots{justify-content:center;gap:3px;margin-top:4px;display:flex}.diff-dots i{background:#e0d8c3;border-radius:50%;width:6px;height:6px;display:inline-block}.diff-dots i.on.facil{background:var(--leaf)}.diff-dots i.on.medio{background:var(--sun)}.diff-dots i.on.dificil{background:var(--coral)}main.workspace{grid-template-columns:1fr 220px;align-items:start;gap:18px;padding:10px 20px 0;display:grid}@media (width<=720px){main.workspace{grid-template-columns:1fr}}.canvas-wrap{flex-direction:column;gap:12px;display:flex}.board{aspect-ratio:1;background:var(--panel);border:4px solid var(--ink);width:100%;box-shadow:var(--shadow);touch-action:none;border-radius:20px;position:relative;overflow:hidden}.board canvas{width:100%;height:100%;position:absolute;inset:0}.board svg{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.step-controls{background:var(--panel);border:3px solid var(--ink);box-shadow:var(--shadow);border-radius:16px;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;display:flex}.step-controls .dots{flex-wrap:wrap;flex:1;justify-content:center;gap:6px;display:flex}.dot{border:2px solid var(--ink);cursor:pointer;background:#e6ddc6;border-radius:50%;width:14px;height:14px}.dot.filled{background:var(--coral)}.dot.current{background:var(--sun)}.icon-btn{background:var(--sky);color:#fff;border:3px solid var(--ink);cursor:pointer;border-radius:12px;width:38px;height:38px;font-family:"Baloo 2",sans-serif;font-size:16px;font-weight:700;line-height:1}.icon-btn:active{transform:translateY(1px)}.play-btn{background:var(--coral);color:#fff;border:3px solid var(--ink);cursor:pointer;white-space:nowrap;border-radius:14px;padding:9px 14px;font-family:"Baloo 2",sans-serif;font-size:14px;font-weight:700}.play-btn:active{transform:translateY(1px)}.guide-toggle{align-items:center;gap:6px;font-size:13px;font-weight:700;display:flex}.toolbar{background:var(--panel);border:3px solid var(--ink);box-shadow:var(--shadow);border-radius:16px;flex-direction:column;gap:14px;padding:14px;display:flex}.toolbar h3{margin:0;font-family:"Baloo 2",sans-serif;font-size:15px}.swatches{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.swatch{aspect-ratio:1;border:3px solid var(--ink);cursor:pointer;border-radius:50%;width:100%;padding:0}.swatch.selected{outline:3px solid var(--ink);outline-offset:2px}.toolbar label{font-size:13px;font-weight:800}.toolbar input[type=range]{width:100%}.tool-btn{background:var(--paper);color:var(--ink);border:3px solid var(--ink);cursor:pointer;border-radius:12px;padding:9px;font-family:"Baloo 2",sans-serif;font-size:14px;font-weight:700}.tool-btn.active{background:var(--leaf);color:#fff}.tool-btn:active{transform:translateY(1px)}.save-btn{background:var(--sun)}.clear-btn{background:#ff8c7a}