/* Presentation refinements only; retain the approved v3 glyph silhouettes. */
:root{--gray:#427682;--paper:#fffdf8}
@font-face{font-family:Tajawal;src:url('../../../piconi_visual_identity/11-brand-fonts/Tajawal-Regular.ttf');font-weight:400;font-display:swap}
body{background:#fffdf8}.lab-intro{margin-block:28px}.lab-intro h1{font-size:34px;line-height:1.5}.lab-intro p:last-child{line-height:1.8}
html.embedded .lab-intro{display:none}.toolbar{padding:12px max(18px,calc((100vw - 1320px)/2));gap:10px;box-shadow:0 4px 15px #42768208}.modes{gap:2px}.modes button{padding:10px 11px}.modes button span{font-size:13px}.tools button{padding:10px;font-size:11px;min-height:38px}.tools #pause[aria-pressed=true]{background:#f4daab77}.scene{top:var(--scene-top,90px)}
.demo-guide{line-height:1.8}.demo-guide p{font-size:13px}.all-colors{flex:none}.scene-footer{line-height:1.8}.scene-brand{white-space:nowrap}
.grow-canvas{background:color-mix(in srgb,#abccd2 23%,#fffdf8)}
.float-canvas{background:color-mix(in srgb,#f3d9a2 22%,#fffdf8)}
.gather-canvas{background:color-mix(in srgb,#bfd6ae 27%,#fffdf8)}
.gather-canvas .age-tabs button.selected{background:#bfd6ae99}
.gift-canvas{background:color-mix(in srgb,#f4daab 48%,#fffdf8)}.gift-canvas h2 span{color:#738e4c}
.draw-canvas{background:color-mix(in srgb,#b0cfd1 15%,#fffdf8)}.draw-canvas h2{color:#427682}
.magnet-canvas{background:color-mix(in srgb,#abccd2 32%,#fffdf8)}
.envelope-back{background:#dea653}.envelope-flap{background:#f3d9a2}.envelope-front{background:#f4c75a}.seal{background:#f4daab}
.primary{background:#427682;color:#fff}.float-cta{background:#f4c75a;color:#427682}
.primary span,.choice-action b{display:inline-block;width:20px;height:22px;flex:none;font-size:0;background:currentColor;mask:url('../../../images/brand/motifs/najdi-direction.svg') center/contain no-repeat;transform:rotate(180deg)}
#grow-more span{transform:rotate(90deg)}#open-gift span{transform:rotate(225deg)}#open-gift[aria-expanded=true] span{transform:rotate(45deg)}
.choice:nth-child(2){background:color-mix(in srgb,#f4daab 36%,white)}.choice:nth-child(3){background:color-mix(in srgb,#bfd6ae 26%,white)}
.choice-action b{color:#738e4c}.choice:first-child .choice-action b{color:#427682}.choice:nth-child(2) .choice-action b{color:#dea653}
.identity-library{max-width:1280px;margin:0 auto 45px;padding:0 24px}.library-heading{margin-bottom:25px}.library-heading h2{font-size:29px;line-height:1.6;margin-bottom:8px}.library-heading>p:last-child{font-size:14px;line-height:1.9}
.approved-palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.palette-family h3{font-size:14px;font-weight:700;margin-bottom:13px}.palette-family>div{display:flex;gap:8px}.approved-swatch{flex:1;min-width:0}.approved-swatch>span{display:block;height:55px;border-radius:8px}.approved-swatch code{display:block;font-size:10px;text-align:center;margin-top:9px;direction:ltr}
.motif-samples{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;align-items:end;border-block:1px solid #42768222;margin-top:35px;padding:28px 0}.motif-samples figure{margin:0;text-align:center}.motif-samples img{height:65px;width:65px;object-fit:contain;margin:0 auto 14px;display:block}.motif-samples figcaption{font-size:12px}
.alphabet-disclosure{margin-top:25px}.alphabet-disclosure summary{font-size:14px;font-weight:700;cursor:pointer;padding:16px 0;line-height:1.7}.alphabet-disclosure .alphabet-section{padding:15px 0 0;margin:0}.alphabet-heading h2{font-size:23px}.alphabet-heading p:last-child{font-size:13px;max-width:760px}.alphabet-grid button{height:100px}.credits{font-size:11px;margin-bottom:25px}
@media(max-width:1150px){.toolbar{justify-content:center}.modes{width:100%}.scene{top:var(--scene-top,115px)}}
@media(max-width:700px){.toolbar{display:block;padding:8px 9px}.modes{width:100%;gap:2px}.modes button{padding:9px 10px}.modes button span{font-size:12px}.tools{justify-content:space-between;padding-top:5px}.tools button{padding:8px 11px;min-height:36px}.stage-track{margin-inline:8px;margin-bottom:30px}.demo-guide{padding:0 14px}.demo-guide p{font-size:11px}.all-colors{gap:4px}.lab-intro h1{font-size:25px}.canvas h2{line-height:1.5}.grow-canvas .hero-copy{top:22px}.grow-canvas .hero-copy h2{font-size:34px}.grow-canvas .hero-copy p{font-size:15px}.grow-picture{top:316px;height:200px}.gift-canvas .hero-copy h2{font-size:32px}.gift-canvas .hero-copy p{font-size:14px}.gift-stage{top:380px}.gift-caption{top:168px}.gather-canvas .center-title h2{font-size:29px}.magnet-canvas .center-title h2{font-size:28px}.identity-library{padding:0 18px}.library-heading h2{font-size:24px}.library-heading>p:last-child{font-size:12px}.approved-palette{grid-template-columns:1fr;gap:22px}.approved-swatch>span{height:44px}.motif-samples{grid-template-columns:repeat(3,1fr);row-gap:25px;margin-top:28px;padding:22px 0}.motif-samples img{height:50px;width:50px}.motif-samples figcaption{font-size:10px}.alphabet-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.alphabet-grid button{height:78px}.alphabet-disclosure summary{font-size:12px}.alphabet-heading p:last-child{font-size:12px}.alphabet-heading h2{font-size:21px}.ink-copy h2{font-size:36px}.credits{font-size:10px}}
@media(max-width:360px){.canvas h2{font-size:28px}.grow-canvas .hero-copy h2{font-size:30px}.gift-canvas .hero-copy h2{font-size:29px}.age-tabs button{font-size:9px;padding:10px 7px}.age-story{gap:10px}.age-story h3{font-size:20px}.age-story p{font-size:12px}.responsive-cards{right:9%;left:9%}.choice{padding:13px}.choice h3{font-size:15px}.choice p{font-size:10px}.alphabet-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Keep all six choices discoverable on a touch screen. */
@media(max-width:700px){.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;padding-bottom:4px;gap:4px}.modes button{justify-content:center;gap:5px;padding:10px 5px;font-size:9px}.modes button span{font-size:11px}.canvas .hero-copy{z-index:4}}
@media(max-width:700px){
 .responsive-cards{top:185px}.choice{height:108px;padding:12px 14px;grid-template-columns:1.15fr 1fr;grid-template-rows:14px auto 14px;gap:4px}.choice h3{font-size:15px;line-height:1.35}.choice strong{font-size:9px;line-height:1.4}.choice-no{line-height:14px}
 .gather-canvas .center-title{top:24px}.gather-canvas .center-title h2{font-size:26px;line-height:1.4}.age-tabs{top:138px}.constellation-caption{top:465px}.constellation-caption strong{font-size:24px;line-height:1.3;margin:5px 0}.constellation-caption>span{display:none}
 .toy>img{object-fit:contain;background:#fffdf8}.toy{background:#fffdf8}
}
.original-letter{object-fit:contain;filter:none}
.alphabet-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.alphabet-grid button{height:145px;padding:22px}
.draw-canvas .original-letter{opacity:0;clip-path:inset(100% 0 0 0)}
.draw-canvas.drawing .original-letter{animation:original-ink 2.2s ease both;animation-delay:var(--draw-delay,0s)}
.draw-canvas.settled .original-letter,.is-paused .draw-canvas .original-letter{opacity:1;clip-path:none;animation:none}
@keyframes original-ink{0%{opacity:0;clip-path:inset(100% 0 0 0)}25%{opacity:.55}100%{opacity:1;clip-path:inset(0)}}
@media(max-width:700px){.alphabet-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.alphabet-grid button{height:116px;padding:20px}.magnet-caption{bottom:12px;right:16%;left:16%;font-size:10px}.magnet-canvas .center-title{top:26px}.magnet-canvas .center-title h2{font-size:25px;line-height:1.4}}
@media(prefers-reduced-motion:reduce){.draw-canvas .original-letter{opacity:1;clip-path:none}}