/* generated by tools/vd-css.mjs — do not edit by hand */
.vd, .vd :not(:where(.vd-legacy, .vd-legacy *)){ box-sizing:border-box; border-color:#e7e5e4; }
.vd button:not(:where(.vd-legacy *)){ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
/* .vd-legacy = a real, unchanged part of the app (mini games, scenes, lessons, voices) moved into a designed page: it keeps its own styling, so the reset above skips it */
@keyframes vdpulse{50%{opacity:.5}}
.vd .align-middle{vertical-align:middle}
.vd .animate-pulse{animation:vdpulse 2s cubic-bezier(.4,0,.6,1) infinite}
.vd .backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.vd .backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.vd .bg-amber-100{background-color:#fef3c7}
.vd .bg-amber-400{background-color:#fbbf24}
.vd .bg-amber-50{background-color:#fffbeb}
.vd .bg-black\/20{background-color:rgba(0,0,0,0.2)}
.vd .bg-cyan-100{background-color:#cffafe}
.vd .bg-cyan-50{background-color:#ecfeff}
.vd .bg-cyan-500{background-color:#06b6d4}
.vd .bg-emerald-100{background-color:#d1fae5}
.vd .bg-emerald-400{background-color:#34d399}
.vd .bg-emerald-50{background-color:#ecfdf5}
.vd .bg-emerald-500{background-color:#10b981}
.vd .bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--vd-from,transparent),var(--vd-via,var(--vd-to,transparent)),var(--vd-to,transparent))}
.vd .bg-orange-50{background-color:#fff7ed}
.vd .bg-rose-100{background-color:#ffe4e6}
.vd .bg-rose-50{background-color:#fff1f2}
.vd .bg-rose-500{background-color:#f43f5e}
.vd .bg-rose-600{background-color:#e11d48}
.vd .bg-sky-50{background-color:#f0f9ff}
.vd .bg-stone-100{background-color:#f5f5f4}
.vd .bg-stone-200{background-color:#e7e5e4}
.vd .bg-stone-50{background-color:#fafaf9}
.vd .bg-stone-900{background-color:#1c1917}
.vd .bg-teal-100{background-color:#ccfbf1}
.vd .bg-teal-300{background-color:#5eead4}
.vd .bg-teal-50{background-color:#f0fdfa}
.vd .bg-teal-50\/60{background-color:rgba(240,253,250,0.6)}
.vd .bg-teal-500{background-color:#14b8a6}
.vd .bg-teal-600{background-color:#0d9488}
.vd .bg-teal-700{background-color:#0f766e}
.vd .bg-teal-800{background-color:#115e59}
.vd .bg-transparent{background-color:transparent}
.vd .bg-violet-100{background-color:#ede9fe}
.vd .bg-violet-50{background-color:#f5f3ff}
.vd .bg-white{background-color:#ffffff}
.vd .bg-white\/10{background-color:rgba(255,255,255,0.1)}
.vd .bg-white\/15{background-color:rgba(255,255,255,0.15)}
.vd .bg-white\/20{background-color:rgba(255,255,255,0.2)}
.vd .block{display:block}
.vd .border{border-width:1px;border-style:solid}
.vd .border-2{border-width:2px;border-style:solid}
.vd .border-amber-200{border-color:#fde68a}
.vd .border-amber-300{border-color:#fcd34d}
.vd .border-b{border-bottom-width:1px;border-bottom-style:solid}
.vd .border-cyan-200{border-color:#a5f3fc}
.vd .border-dashed{border-style:dashed}
.vd .border-emerald-200{border-color:#a7f3d0}
.vd .border-emerald-400{border-color:#34d399}
.vd .border-rose-200{border-color:#fecdd3}
.vd .border-rose-300{border-color:#fda4af}
.vd .border-stone-100{border-color:#f5f5f4}
.vd .border-stone-200{border-color:#e7e5e4}
.vd .border-stone-300{border-color:#d6d3d1}
.vd .border-t{border-top-width:1px;border-top-style:solid}
.vd .border-t-4{border-top-width:4px;border-top-style:solid}
.vd .border-teal-100{border-color:#ccfbf1}
.vd .border-teal-200{border-color:#99f6e4}
.vd .border-teal-300{border-color:#5eead4}
.vd .border-teal-500{border-color:#14b8a6}
.vd .border-teal-600{border-color:#0d9488}
.vd .border-teal-700{border-color:#0f766e}
.vd .border-white\/15{border-color:rgba(255,255,255,0.15)}
.vd .border-white\/20{border-color:rgba(255,255,255,0.2)}
.vd .cursor-pointer{cursor:pointer}
.vd .flex{display:flex}
.vd .flex-1{flex:1 1 0%}
.vd .flex-col{flex-direction:column}
.vd .flex-wrap{flex-wrap:wrap}
.vd .font-bold{font-weight:700}
.vd .font-extrabold{font-weight:800}
.vd .font-medium{font-weight:500}
.vd .font-semibold{font-weight:600}
.vd .from-teal-50{--vd-from:#f0fdfa}
.vd .from-teal-800{--vd-from:#115e59}
.vd .gap-0\.5{gap:0.125rem}
.vd .gap-1{gap:0.25rem}
.vd .gap-1\.5{gap:0.375rem}
.vd .gap-2{gap:0.5rem}
.vd .gap-2\.5{gap:0.625rem}
.vd .gap-3{gap:0.75rem}
.vd .gap-4{gap:1rem}
.vd .gap-5{gap:1.25rem}
.vd .gap-6{gap:1.5rem}
.vd .gap-8{gap:2rem}
.vd .gap-x-6{column-gap:1.5rem}
.vd .gap-y-3{row-gap:0.75rem}
.vd .grid{display:grid}
.vd .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.vd .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vd .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vd .h-10{height:2.5rem}
.vd .h-11{height:2.75rem}
.vd .h-12{height:3rem}
.vd .h-16{height:4rem}
.vd .h-2{height:0.5rem}
.vd .h-2\.5{height:0.625rem}
.vd .h-3{height:0.75rem}
.vd .h-40{height:10rem}
.vd .h-5{height:1.25rem}
.vd .h-8{height:2rem}
.vd .h-9{height:2.25rem}
.vd .h-full{height:100%}
.vd .hidden{display:none}
.vd .hover\:bg-amber-300:hover{background-color:#fcd34d}
.vd .hover\:bg-emerald-300:hover{background-color:#6ee7b7}
.vd .hover\:bg-rose-700:hover{background-color:#be123c}
.vd .hover\:bg-stone-100:hover{background-color:#f5f5f4}
.vd .hover\:bg-stone-200:hover{background-color:#e7e5e4}
.vd .hover\:bg-teal-50:hover{background-color:#f0fdfa}
.vd .hover\:bg-teal-800:hover{background-color:#115e59}
.vd .hover\:bg-white:hover{background-color:#ffffff}
.vd .hover\:bg-white\/20:hover{background-color:rgba(255,255,255,0.2)}
.vd .hover\:bg-white\/25:hover{background-color:rgba(255,255,255,0.25)}
.vd .hover\:bg-white\/30:hover{background-color:rgba(255,255,255,0.3)}
.vd .hover\:border-stone-300:hover{border-color:#d6d3d1}
.vd .hover\:border-teal-200:hover{border-color:#99f6e4}
.vd .hover\:border-teal-300:hover{border-color:#5eead4}
.vd .hover\:border-teal-500:hover{border-color:#14b8a6}
.vd .hover\:text-stone-900:hover{color:#1c1917}
.vd .hover\:text-teal-700:hover{color:#0f766e}
.vd .hover\:text-teal-900:hover{color:#134e4a}
.vd .inline-block{display:inline-block}
.vd .inline-flex{display:inline-flex}
.vd .italic{font-style:italic}
.vd .items-baseline{align-items:baseline}
.vd .items-center{align-items:center}
.vd .items-end{align-items:flex-end}
.vd .items-start{align-items:flex-start}
.vd .justify-between{justify-content:space-between}
.vd .justify-center{justify-content:center}
.vd .justify-end{justify-content:flex-end}
.vd .leading-none{line-height:1}
.vd .leading-relaxed{line-height:1.625}
.vd .leading-snug{line-height:1.375}
.vd .leading-tight{line-height:1.25}
.vd .line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vd .list-disc{list-style-type:disc}
.vd .max-w-2xl{max-width:42rem}
.vd .max-w-3xl{max-width:48rem}
.vd .max-w-\[120px\]{max-width:120px}
.vd .max-w-md{max-width:28rem}
.vd .max-w-xl{max-width:36rem}
.vd .mb-1{margin-bottom:0.25rem}
.vd .mb-2{margin-bottom:0.5rem}
.vd .min-w-0{min-width:0}
.vd .min-w-\[14px\]{min-width:14px}
.vd .ml-1{margin-left:0.25rem}
.vd .ml-auto{margin-left:auto}
.vd .mr-1{margin-right:0.25rem}
.vd .mt-0\.5{margin-top:0.125rem}
.vd .mt-1{margin-top:0.25rem}
.vd .mt-1\.5{margin-top:0.375rem}
.vd .mt-2{margin-top:0.5rem}
.vd .mt-3{margin-top:0.75rem}
.vd .mt-4{margin-top:1rem}
.vd .mt-8{margin-top:2rem}
.vd .mt-auto{margin-top:auto}
.vd .mx-auto{margin-left:auto;margin-right:auto}
.vd .opacity-60{opacity:0.6}
.vd .overflow-hidden{overflow:hidden}
.vd .overflow-x-auto{overflow-x:auto}
.vd .p-1{padding:0.25rem}
.vd .p-2{padding:0.5rem}
.vd .p-2\.5{padding:0.625rem}
.vd .p-3{padding:0.75rem}
.vd .p-4{padding:1rem}
.vd .p-5{padding:1.25rem}
.vd .p-6{padding:1.5rem}
.vd .p-8{padding:2rem}
.vd .pb-2{padding-bottom:0.5rem}
.vd .pb-3{padding-bottom:0.75rem}
.vd .pl-5{padding-left:1.25rem}
.vd .pr-1{padding-right:0.25rem}
.vd .pt-1{padding-top:0.25rem}
.vd .pt-2{padding-top:0.5rem}
.vd .pt-4{padding-top:1rem}
.vd .px-1{padding-left:0.25rem;padding-right:0.25rem}
.vd .px-1\.5{padding-left:0.375rem;padding-right:0.375rem}
.vd .px-2{padding-left:0.5rem;padding-right:0.5rem}
.vd .px-2\.5{padding-left:0.625rem;padding-right:0.625rem}
.vd .px-3{padding-left:0.75rem;padding-right:0.75rem}
.vd .px-4{padding-left:1rem;padding-right:1rem}
.vd .px-5{padding-left:1.25rem;padding-right:1.25rem}
.vd .px-6{padding-left:1.5rem;padding-right:1.5rem}
.vd .py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.vd .py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.vd .py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.vd .py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.vd .py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.vd .py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.vd .rounded{border-radius:0.25rem}
.vd .rounded-2xl{border-radius:1rem}
.vd .rounded-3xl{border-radius:1.5rem}
.vd .rounded-full{border-radius:9999px}
.vd .rounded-lg{border-radius:0.5rem}
.vd .rounded-md{border-radius:0.375rem}
.vd .rounded-t-lg{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}
.vd .rounded-xl{border-radius:0.75rem}
.vd .self-start{align-self:flex-start}
.vd .shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)}
.vd .shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)}
.vd .shadow-sm{box-shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)}
.vd .shrink-0{flex-shrink:0}
.vd .space-y-0\.5 > :not([hidden]) ~ :not([hidden]){margin-top:0.125rem}
.vd .space-y-1 > :not([hidden]) ~ :not([hidden]){margin-top:0.25rem}
.vd .space-y-1\.5 > :not([hidden]) ~ :not([hidden]){margin-top:0.375rem}
.vd .space-y-2 > :not([hidden]) ~ :not([hidden]){margin-top:0.5rem}
.vd .space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top:0.75rem}
.vd .space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:1rem}
.vd .space-y-5 > :not([hidden]) ~ :not([hidden]){margin-top:1.25rem}
.vd .space-y-6 > :not([hidden]) ~ :not([hidden]){margin-top:1.5rem}
.vd .space-y-8 > :not([hidden]) ~ :not([hidden]){margin-top:2rem}
.vd .text-2xl{font-size:1.5rem;line-height:2rem}
.vd .text-3xl{font-size:1.875rem;line-height:2.25rem}
.vd .text-\[10px\]{font-size:0.625rem}
.vd .text-\[11px\]{font-size:0.6875rem}
.vd .text-amber-600{color:#d97706}
.vd .text-amber-700{color:#b45309}
.vd .text-amber-800{color:#92400e}
.vd .text-amber-900{color:#78350f}
.vd .text-amber-950{color:#451a03}
.vd .text-base{font-size:1rem;line-height:1.5rem}
.vd .text-center{text-align:center}
.vd .text-cyan-700{color:#0e7490}
.vd .text-cyan-800{color:#155e75}
.vd .text-cyan-900{color:#164e63}
.vd .text-emerald-700{color:#047857}
.vd .text-emerald-800{color:#065f46}
.vd .text-emerald-900{color:#064e3b}
.vd .text-left{text-align:left}
.vd .text-lg{font-size:1.125rem;line-height:1.75rem}
.vd .text-right{text-align:right}
.vd .text-rose-600{color:#e11d48}
.vd .text-rose-700{color:#be123c}
.vd .text-rose-800{color:#9f1239}
.vd .text-rose-900{color:#881337}
.vd .text-sky-800{color:#075985}
.vd .text-sm{font-size:0.875rem;line-height:1.25rem}
.vd .text-stone-400{color:#a8a29e}
.vd .text-stone-500{color:#78716c}
.vd .text-stone-600{color:#57534e}
.vd .text-stone-700{color:#44403c}
.vd .text-stone-800{color:#292524}
.vd .text-stone-900{color:#1c1917}
.vd .text-teal-100{color:#ccfbf1}
.vd .text-teal-200{color:#99f6e4}
.vd .text-teal-50{color:#f0fdfa}
.vd .text-teal-600{color:#0d9488}
.vd .text-teal-700{color:#0f766e}
.vd .text-teal-800{color:#115e59}
.vd .text-teal-900{color:#134e4a}
.vd .text-teal-950{color:#042f2e}
.vd .text-violet-700{color:#6d28d9}
.vd .text-white{color:#ffffff}
.vd .text-xl{font-size:1.25rem;line-height:1.75rem}
.vd .text-xs{font-size:0.75rem;line-height:1rem}
.vd .to-emerald-900{--vd-to:#064e3b}
.vd .to-white{--vd-to:#ffffff}
.vd .tracking-tight{letter-spacing:-0.025em}
.vd .tracking-wider{letter-spacing:0.05em}
.vd .transition{transition:all .15s cubic-bezier(.4,0,.2,1)}
.vd .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vd .uppercase{text-transform:uppercase}
.vd .w-10{width:2.5rem}
.vd .w-11{width:2.75rem}
.vd .w-12{width:3rem}
.vd .w-16{width:4rem}
.vd .w-2{width:0.5rem}
.vd .w-2\.5{width:0.625rem}
.vd .w-20{width:5rem}
.vd .w-24{width:6rem}
.vd .w-3{width:0.75rem}
.vd .w-8{width:2rem}
.vd .w-9{width:2.25rem}
.vd .w-full{width:100%}
.vd .whitespace-nowrap{white-space:nowrap}
@media (min-width:640px){
.vd .sm\:flex-row{flex-direction:row}
.vd .sm\:gap-4{gap:1rem}
.vd .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vd .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.vd .sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.vd .sm\:items-center{align-items:center}
.vd .sm\:p-4{padding:1rem}
.vd .sm\:p-6{padding:1.5rem}
.vd .sm\:p-8{padding:2rem}
.vd .sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}
.vd .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
.vd .sm\:text-base{font-size:1rem;line-height:1.5rem}
}
@media (min-width:768px){
.vd .md\:flex-row{flex-direction:row}
.vd .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vd .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vd .md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.vd .md\:items-center{align-items:center}
}
@media (min-width:1024px){
.vd .lg\:col-span-2{grid-column:span 2 / span 2}
.vd .lg\:col-span-3{grid-column:span 3 / span 3}
.vd .lg\:col-span-4{grid-column:span 4 / span 4}
.vd .lg\:col-span-8{grid-column:span 8 / span 8}
.vd .lg\:flex-row{flex-direction:row}
.vd .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.vd .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vd .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vd .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.vd .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.vd .lg\:items-center{align-items:center}
.vd .lg\:items-end{align-items:flex-end}
.vd .lg\:w-80{width:20rem}
.vd .lg\:w-96{width:24rem}
}
@media (min-width:1280px){
.vd .xl\:flex-row{flex-direction:row}
.vd .xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vd .xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.vd .xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.vd .xl\:items-center{align-items:center}
}