@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Nunito:wght@600;700;800;900&display=swap');
/* Shared visual languages are shared by Studio and every product home. */
html[data-style=strong]{--ink:#202a35;--muted:#4d5964;--paper:#fafaf7;--radius:4px;--shadow:none;--display:'Arial Black',Impact,system-ui,sans-serif;--theme-surface:#eceeea;--theme-accent:#202a35}
html[data-style=playful-green]{--ink:#263d2f;--muted:#465b4b;--paper:#d6edc8;--line:#d5decd;--radius:22px;--shadow:0 6px 0 #263d2f;--display:'Lilita One','Arial Rounded MT Bold','Trebuchet MS',sans-serif;--theme-surface:#e5f4d8;--theme-accent:#f4cf59}
html[data-style=playful-blue]{--ink:#1e2448;--muted:#4b5782;--paper:#bfe3ff;--line:#1e2448;--radius:28px;--shadow:0 6px 0 #1e2448;--display:'Lilita One','Arial Rounded MT Bold','Trebuchet MS',sans-serif;--theme-surface:#f1f4ff;--theme-accent:#ffc93c}
html[data-style^=playful] body{font-family:'Nunito',system-ui,sans-serif}
html[data-style^=playful] .hero h1,html[data-style^=playful] h2{font-family:var(--display);font-weight:900}
html[data-style=playful-blue] .hero h1,html[data-style=playful-blue] h2{font-weight:400;letter-spacing:.005em}
html[data-style^=playful] .hero p,html[data-style^=playful] .section p,html[data-style^=playful] footer p{color:var(--muted)}
html[data-style^=playful] .button{background:var(--theme-accent);color:var(--ink);border:3px solid var(--ink);border-radius:20px;box-shadow:var(--shadow);font-weight:900}
html[data-style^=playful] .hero-visual,html[data-style^=playful] .before-after article:last-child{background-color:var(--theme-surface)}
html[data-style^=playful] .story,html[data-style^=playful] .example{background:var(--theme-surface)}
html[data-style^=playful] .pricing{background:var(--theme-surface)}
html[data-style^=playful] .step-number,html[data-style^=playful] .demo-choices button[aria-selected=true]{background:var(--theme-accent)}
html[data-style^=playful] .benefits article{border-color:var(--theme-accent)}
html[data-style^=playful] .product-logo span{background:var(--theme-accent)}
html[data-style^=playful] .closing{background:var(--ink)}
html[data-style^=playful] .card-art{background:var(--theme-surface)}
html[data-style^=playful] .card:nth-child(3n+2) .card-art{background:color-mix(in srgb,var(--theme-accent) 38%,white)}
html[data-style^=playful] .art{background:var(--theme-surface)}
html[data-style^=playful] h1 em{color:var(--ink);text-decoration:underline;text-decoration-color:var(--theme-accent);text-decoration-thickness:9px;text-underline-offset:7px}
html[data-style=playful-blue] .hero-visual,html[data-style=playful-blue] .art{background-image:radial-gradient(circle,#1e244812 0 6px,transparent 7px);background-size:40px 40px}
html[data-style=playful-blue] .card,html[data-style=playful-blue] .price-card,html[data-style=playful-blue] .demo-panels{border-width:3px;box-shadow:var(--shadow)}
html[data-style=playful-blue] .brick:nth-child(3n){background:#3a7bff}
html[data-style=playful-blue] .brick:nth-child(4n){background:#ffc93c}
html[data-style=strong] .card,html[data-style=strong] .art,html[data-style=strong] .button,html[data-style=strong] .brand b{border-radius:4px;box-shadow:none;transform:none}
html[data-style=strong] h1,html[data-style=strong] h2{font-family:var(--display);font-weight:900}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Brickyards typography and tactile shapes throughout every playful theme. */
html[data-style=playful-multicolor]{--ink:#1e2448;--muted:#4b5782;--paper:#fff5d6;--line:#1e2448;--radius:28px;--shadow:0 6px 0 #1e2448;--display:'Lilita One','Arial Rounded MT Bold','Trebuchet MS',sans-serif;--theme-surface:#e5dafa;--theme-accent:#ffc93c}
html[data-style^=playful] :is(h1,h2,h3,.product-logo,.brand){font-family:var(--display);font-weight:400;letter-spacing:.005em}
html[data-style^=playful] .hero h1{font-weight:400;letter-spacing:.005em;line-height:1.05}
html[data-style^=playful] :is(.hero-visual,.art,.card,.price-card,.demo-panels,.before-after article){border:3px solid var(--ink);border-radius:28px;box-shadow:var(--shadow)}
html[data-style^=playful] .hero-visual,html[data-style^=playful] .art{background-image:radial-gradient(circle,color-mix(in srgb,var(--ink) 9%,transparent) 0 6px,transparent 7px);background-size:40px 40px}
html[data-style^=playful] .hero-visual::after{content:'LET’S BUILD!';position:absolute;right:14px;top:-20px;background:var(--theme-accent);border:3px solid var(--ink);border-radius:16px;padding:8px 14px;font:900 12px 'Nunito',sans-serif;box-shadow:0 4px 0 var(--ink);transform:rotate(5deg)}
html[data-style^=playful] .button{transition:transform .12s,box-shadow .12s}
html[data-style^=playful] .button:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--ink);background:var(--theme-accent)}
html[data-style^=playful] .button:active{transform:translateY(5px);box-shadow:none}
html[data-style^=playful] .product-logo span,html[data-style^=playful] .brand b{border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);background:var(--theme-accent);color:var(--ink)}
html[data-style^=playful] .benefits article{background:white;border:3px solid var(--ink);border-radius:24px;padding:26px;box-shadow:0 5px 0 var(--ink)}
html[data-style^=playful] .faq details{background:white;border:3px solid var(--ink);border-radius:20px;padding:20px 24px;margin-bottom:14px;box-shadow:0 4px 0 var(--ink)}
html[data-style^=playful] .signup form{background:white;border:3px solid var(--ink);border-radius:28px;padding:24px;box-shadow:var(--shadow)}
html[data-style=playful-green] .brick:nth-child(3n){background:#2dbe6c}
html[data-style=playful-green] .brick:nth-child(4n){background:#ffc93c}
html[data-style=playful-multicolor] .story{background:#d5edff}
html[data-style=playful-multicolor] .example{background:#e5dafa}
html[data-style=playful-multicolor] .pricing{background:#ffe0e9}
html[data-style=playful-multicolor] .hero-visual,html[data-style=playful-multicolor] .art{background-color:#bfe3ff}
html[data-style=playful-multicolor] .card:nth-child(6n+1) .card-art,html[data-style=playful-multicolor] .benefits article:nth-child(3n+1){background:#bfe3ff}
html[data-style=playful-multicolor] .card:nth-child(6n+2) .card-art,html[data-style=playful-multicolor] .benefits article:nth-child(3n+2){background:#ffe29a}
html[data-style=playful-multicolor] .card:nth-child(6n+3) .card-art,html[data-style=playful-multicolor] .benefits article:nth-child(3n+3){background:#d6edc8}
html[data-style=playful-multicolor] .card:nth-child(6n+4) .card-art{background:#ffcbdc}
html[data-style=playful-multicolor] .card:nth-child(6n+5) .card-art{background:#dcccff}
html[data-style=playful-multicolor] .card:nth-child(6n+6) .card-art{background:#ffd5bc}
html[data-style=playful-multicolor] .steps li:nth-child(3n+2) .step-number,html[data-style=playful-multicolor] .demo-choices button:nth-child(3n+2){background:#d6edc8}
html[data-style=playful-multicolor] .steps li:nth-child(3n+3) .step-number,html[data-style=playful-multicolor] .demo-choices button:nth-child(3n+3){background:#ffcbdc}
html[data-style=playful-multicolor] .brick:nth-child(5n+1){background:#3a7bff}html[data-style=playful-multicolor] .brick:nth-child(5n+2){background:#ffc93c}html[data-style=playful-multicolor] .brick:nth-child(5n+3){background:#2dbe6c}html[data-style=playful-multicolor] .brick:nth-child(5n+4){background:#ff8fb1}html[data-style=playful-multicolor] .brick:nth-child(5n){background:#8d5cf6}
@media(prefers-reduced-motion:reduce){html[data-style^=playful] .button{transition:none}}