/* The silhouette comes byte-for-byte from the earlier outlined alphabet.
   Paint details are clipped inside it, so they never redraw or thin the glyph. */
.letter-fill{stroke-width:.007;stroke-opacity:.58}
.paint-edge{fill:none;stroke:var(--ink);stroke-width:.013;stroke-opacity:.58;stroke-linejoin:round;stroke-dasharray:.15 .026 .048 .013}
.paint-light{fill:none;stroke:white;stroke-width:.007;stroke-opacity:.62;stroke-linejoin:round;stroke-dasharray:.095 .042 .027 .011}
.flat-letters .paint-detail{display:none}
.draw-canvas .paint-detail{opacity:0}
.draw-canvas.drawing .paint-detail{animation:paint-appear 2.8s ease forwards;animation-delay:var(--draw-delay,0s)}
.draw-canvas.settled .paint-detail,.is-paused .draw-canvas .paint-detail{opacity:1;animation:none}
@keyframes paint-appear{0%,70%{opacity:0}100%{opacity:1}}
.grow-canvas{background:#eaf4f7}.grow-canvas .eyebrow:before{background:var(--blue)}
.float-canvas{background:#f7f7f6}.float-canvas .eyebrow:before{background:var(--gray)}
.gather-canvas{background:#f0f5e9}.gather-canvas .age-tabs button.selected{background:#dce9cc}
.gift-canvas{background:#fff4d4}.gift-canvas .eyebrow:before{background:var(--yellow)}.gift-canvas h2 span{color:#937225}
.draw-canvas{background:#f2f2f3}.draw-canvas h2{color:var(--gray)}.draw-canvas .eyebrow:before{background:var(--gray)}
.magnet-canvas{background:#eaf1f2}.magnet-canvas h2 span{color:var(--ink)}.magnet-canvas .eyebrow:before{background:var(--ink)}
.alphabet-heading{align-items:flex-start}.alphabet-heading>div:first-child{max-width:760px}
.material-compare{border:1px solid #4276822a;border-radius:10px;background:#edf3f4;padding:24px;margin-bottom:20px}
.compare-top{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:22px}
.compare-top p{font-size:14px;line-height:1.8;max-width:780px;color:var(--gray)}
#material-toggle{border:1px solid #42768255;border-radius:7px;padding:12px 17px;color:var(--ink);background:white;font-size:13px;font-weight:700;white-space:nowrap}
.compare-rows{display:grid;grid-template-columns:1fr 1fr;gap:25px}.compare-row{background:#fff;border-radius:8px;padding:15px 20px 20px;text-align:center}
.compare-row>span{font-size:13px;color:var(--gray)}.compare-samples{display:flex;justify-content:center;gap:22px;direction:rtl;margin-top:15px}
.compare-samples>div{width:64px;height:90px}.compare-row:first-child .paint-detail{display:none}
.alphabet-grid button{height:126px;padding-top:20px}
.palette-section{max-width:1280px;margin:0 auto 55px;padding:0 12px}.palette-section h2{font-size:29px;margin-bottom:12px}
.palette-section>p{font-size:14px;line-height:1.8;color:var(--gray);margin-bottom:24px}.palette-grid{display:grid;gap:10px}
.palette-row{display:grid;grid-template-columns:95px repeat(7,1fr);gap:8px;align-items:center}.palette-row>strong{font-size:14px}
.swatch{height:59px;border-radius:7px;display:grid;place-content:center;text-align:center;gap:5px;font-size:10px}.swatch code{font-size:11px}
@media(max-width:700px){.compare-top{display:block;margin-bottom:16px}.compare-top p{font-size:12px}#material-toggle{margin-top:13px;padding:10px 13px;font-size:11px}.material-compare{padding:14px}.compare-rows{gap:12px;grid-template-columns:1fr}.compare-row{padding:13px}.compare-row>span{font-size:11px}.compare-samples{gap:25px;margin-top:10px}.compare-samples>div{width:39px;height:57px}.alphabet-grid button{height:82px;padding-top:13px}.palette-section{margin:0 10px 40px}.palette-section h2{font-size:25px}.palette-section>p{font-size:12px}.palette-row{grid-template-columns:repeat(7,1fr);gap:4px}.palette-row>strong{grid-column:1/-1;font-size:12px}.swatch{font-size:8px;height:54px;border-radius:4px}.swatch code{font-size:8px}}
@media(prefers-reduced-motion:reduce){.draw-canvas .paint-detail{animation:none!important;opacity:1!important}}