*{box-sizing:border-box}body{margin:0;background:#ffffff;color:#252339;font:15px Lato,Arial,sans-serif}.promo{background:#472269;color:white;text-align:center;padding:10px}.promo a{color:#fff;font-weight:700}header{background:linear-gradient(110deg,#31154f,#74418c);box-shadow:0 3px 12px #26123b24}.head{max-width:1550px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:17px 25px;gap:20px}.head img{width:221px;max-width:100%;height:auto}.head nav{display:flex;gap:24px;flex-wrap:wrap}.head nav a{color:#fff;text-decoration:none;font-weight:700}.subnav{background:#9dfb06;color:#63397b;text-align:center;padding:12px;font-weight:700}main{max-width:1550px;margin:auto;padding:25px 22px}.crumb{font-size:13px;color:#777}.crumb a{color:#78469b;text-decoration:none}h1{font-size:30px;margin:18px 0 8px}.intro{color:#666;margin:0 0 23px;line-height:1.6}.workspace{display:grid;grid-template-columns:minmax(220px,265px) minmax(0,1fr) minmax(230px,280px);gap:18px;align-items:start}.panel,.stage{background:white;border:1px solid #e9e5ef;border-radius:15px;box-shadow:0 5px 24px #4023580d;overflow:hidden}.panel{padding:18px}.panel h2{font-size:18px;display:flex;align-items:center;gap:8px;margin:3px 0 17px}.panel h2 .material-icons{color:#8a4ba8}.section{border-top:1px solid #eeeaf2;padding:17px 0}.label{font-weight:700;font-size:13px;margin-bottom:11px}.colorline{display:flex;gap:12px;align-items:center;margin-bottom:20px;font-weight:700;color:#6a4c7d}.colorline input{width:65px;height:42px;border:0;background:transparent;cursor:pointer}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.swatch{border:2px solid #fff;outline:1px solid #dedbe3;aspect-ratio:1;border-radius:50%;cursor:pointer}.swatch.active{outline:3px solid #7d419e}.toolgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tool,.buttons button,.full,.stage-bottom button{border:1px solid #ded5e7;border-radius:9px;background:#faf8fc;color:#503765;padding:11px 8px;cursor:pointer;font:700 13px Lato,Arial}.tool.active{background:#eee2f6;border-color:#955cb4}.range-label{display:flex;justify-content:space-between;margin:19px 0 7px}input[type=range]{width:100%;accent-color:#8742a4}.buttons{display:flex;gap:8px;margin:9px 0}.buttons button{flex:1}.full{display:block;width:100%;margin:9px 0;padding:13px 8px}.primary{background:#8240a0;color:white;border-color:#8240a0}.danger{color:#b34159;background:#fff6f8}.ghost{background:white}.tip,.small{font-size:12px;color:#777;line-height:1.6}.stage-top,.stage-bottom{padding:14px 18px;display:flex;justify-content:space-between;gap:12px;align-items:center;color:#6b6073;font-size:13px}.stage-top{border-bottom:1px solid #eee}.stage-bottom{border-top:1px solid #eee;flex-wrap:wrap}.status{font-weight:700;color:#795096}.canvas-scroller{height:min(75vh,940px);min-height:420px;overflow:auto;background:#f0edf3;display:flex;align-items:flex-start;justify-content:center;padding:22px}.canvas-wrap{position:relative;flex:none;box-shadow:0 7px 25px #28203424;background:white;line-height:0;transform-origin:top center}canvas{position:absolute;left:0;top:0;width:100%;height:100%}#paint{touch-action:none;cursor:none}#lines{pointer-events:none}.recording{font-size:13px;color:#6d6074;display:flex;align-items:center;gap:9px;margin-bottom:14px}.dot{height:9px;width:9px;background:#de5b83;border-radius:50%}.backlink{display:block;color:#8240a0;text-decoration:none;text-align:center;margin-top:19px;font-weight:700}.footer-note{text-align:center;color:#888;font-size:12px;padding:26px 0}@media(max-width:1050px){.workspace{grid-template-columns:220px minmax(0,1fr)}.workspace>.panel:last-child{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.workspace>.panel:last-child h2{grid-column:1/-1}}@media(max-width:700px){.head{flex-direction:column}.head nav{justify-content:center;gap:12px}.workspace{display:flex;flex-direction:column}.workspace>*{width:100%}.workspace>.panel:last-child{display:block}.canvas-scroller{min-height:350px;height:60vh}h1{font-size:25px}main{padding:18px 12px}}

/* Search-friendly instructional content beneath the coloring workspace */
.seo-content{max-width:960px;margin:35px auto 0;background:#fff;border:1px solid #e9e5ef;border-radius:15px;padding:24px 30px;line-height:1.75;color:#4d4655}.seo-content h2{font-size:21px;color:#30213d;margin:20px 0 8px}.seo-content h2:first-child{margin-top:0}.seo-content ol{padding-left:23px}.seo-content li{margin:7px 0}.seo-content a{color:#78469b;font-weight:700}@media(max-width:700px){.seo-content{padding:18px}}

/* Brush diameter follows the cursor; pointer events pass through to the paint canvas. */
.brush-preview{position:fixed;z-index:9999;display:none;pointer-events:none;transform:translate(-50%,-50%);border:1.5px solid rgba(35,24,48,.85);border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.55)}
.brush-preview.eraser-preview{border-style:dashed;border-color:#8a4ba8}