.header{z-index:var(--z-header);align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);margin:var(--space-3) var(--space-3) 0;border-radius:var(--r-xl);grid-template-columns:auto 1fr auto;min-height:56px;display:grid;position:relative}.header-left,.header-right{align-items:center;gap:var(--space-2);display:flex}.header-btn,.header-btn-spacer{border-radius:var(--r-pill);width:44px;height:44px;color:var(--ink);background:var(--surface-strong);box-shadow:var(--shadow-1);justify-content:center;align-items:center;display:inline-flex}.header-btn-spacer{box-shadow:none;background:0 0}.header-title{background:0 0;justify-content:center;align-items:center;min-width:0;display:flex}.header-title-text{font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--text-lg);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.header-secret{opacity:.55}.header-offline{border-radius:var(--r-pill);background:var(--c-yellow);width:36px;height:36px;color:var(--ink);box-shadow:var(--shadow-1);justify-content:center;align-items:center;display:inline-flex}@media (max-width:480px){.header{padding:var(--space-2) var(--space-3);margin:var(--space-2) var(--space-2) 0;min-height:48px}.header-btn,.header-btn-spacer{width:40px;height:40px}}@media (orientation:landscape) and (max-height:500px){.header{margin:var(--space-1) var(--space-3) 0;padding:var(--space-1) var(--space-3);border-radius:var(--r-lg);min-height:40px}.header-btn,.header-btn-spacer{width:36px;height:36px}.header-title-text{font-size:var(--text-md)}}.tile{justify-content:center;align-items:center;gap:var(--space-2);aspect-ratio:1;width:100%;padding:var(--space-4) var(--space-3);border-radius:var(--r-xl);color:var(--ink);box-shadow:0 8px 24px #2a004d1f, var(--shadow-1), inset 0 1.5px 0 #fffffff2, inset 0 -1.5px 0 #2a004d0d, 0 1px 0 #fff9;isolation:isolate;cursor:pointer;transform:perspective(700px) rotateX(calc(var(--tilt-x,0deg) + var(--device-tilt-x,0deg))) rotateY(calc(var(--tilt-y,0deg) + var(--device-tilt-y,0deg)));transform-style:preserve-3d;transition:transform var(--tilt-dur,var(--dur-mid)) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);animation:5.5s ease-in-out infinite tile-breath;animation-delay:calc(var(--i,0) * .22s);background:linear-gradient(135deg,#fffffff5 0%,#ffffffe0 50%,#fffffff0 100%);border:1.5px solid #fffffff2;flex-direction:column;display:flex;position:relative}.tile:after{content:"";border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,-10%), #ffffff6b 0%, #ffffff14 40%, transparent 65%);z-index:3;transition:background 60ms linear;position:absolute;inset:0;overflow:hidden}@keyframes tile-breath{0%,to{box-shadow:0 8px 24px #2a004d1f, var(--shadow-1), inset 0 1.5px 0 #fffffff2, inset 0 -1.5px 0 #2a004d0d}50%{box-shadow:0 14px 34px #2a004d29, var(--shadow-1), inset 0 1.5px 0 #fffffff2, inset 0 -1.5px 0 #2a004d0d}}.tile-icon{aspect-ratio:1;background:var(--tile-icon-bg,var(--c-pink));width:clamp(56px,38%,104px);color:var(--tile-icon-fg,#fff);box-shadow:0 10px 22px var(--tile-icon-shadow,#2a004d40), 0 2px 6px #2a004d1f, inset 0 1.5px 0 #ffffff73, inset 0 -3px 0 #2a004d33, inset 2px 0 0 #ffffff1f, inset -2px 0 0 #2a004d1a;border-radius:28%;justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:hidden;transform:translateZ(8px)}.tile-icon-glyph{z-index:1;width:56%;height:56%;animation:3s ease-in-out infinite icon-dance;animation-delay:calc(var(--i,0) * .18s);justify-content:center;align-items:center;display:inline-flex;position:relative}@keyframes icon-dance{0%,to{transform:translateY(0)rotate(0)scale(1)}25%{transform:translateY(-5px)rotate(-5deg)scale(1.04)}50%{transform:translateY(0)rotate(0)scale(1)}75%{transform:translateY(-3px)rotate(5deg)scale(1.04)}}@media (prefers-reduced-motion:reduce){.tile-icon-glyph,.tile{animation:none!important}}.tile-icon-glyph>svg{filter:drop-shadow(0 1px 2px #2a004d38);width:100%;height:100%}.tile-icon-shine{pointer-events:none;mix-blend-mode:screen;background:radial-gradient(110% 55% at 50% -10%,#ffffff73,#0000 60%);position:absolute;inset:0}.tile-title{font-family:var(--font-display);font-weight:var(--w-bold);letter-spacing:-.01em;text-align:center;color:var(--ink);font-size:clamp(.95rem,2.3vw,1.25rem);line-height:1.1}.tile-subtitle{font-family:var(--font-text);font-weight:var(--w-medium);text-align:center;color:var(--ink-mute);padding:0 var(--space-1);font-size:clamp(.7rem,1.5vw,.85rem);line-height:1.2}.tile:active{transform:perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(.93) translateZ(-6px);box-shadow:var(--shadow-1), inset 0 1.5px 0 #ffffffb3, inset 0 2px 8px #2a004d12}.tile:active .tile-icon{box-shadow:0 4px 10px var(--tile-icon-shadow,#2a004d33), inset 0 1px 0 #ffffff59, inset 0 -2px 0 #2a004d24;transform:translateZ(3px)}@media (hover:hover){.tile:hover{transform:perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-4px) scale(1.02);box-shadow:var(--shadow-3), 0 0 0 1.5px #fff9, inset 0 1.5px 0 #ffffffe6}}.tile--pink{--tile-icon-bg:linear-gradient(135deg, var(--c-pink), var(--c-pink-2));--tile-icon-shadow:#ff61a652}.tile--rose{--tile-icon-bg:linear-gradient(135deg, var(--c-rose), var(--c-rose-2));--tile-icon-shadow:#e6457a4d}.tile--coral{--tile-icon-bg:linear-gradient(135deg, var(--c-coral), var(--c-coral-2));--tile-icon-shadow:#e645604d}.tile--orange{--tile-icon-bg:linear-gradient(135deg, var(--c-orange), var(--c-orange-2));--tile-icon-shadow:#f26d3352}.tile--yellow{--tile-icon-bg:linear-gradient(135deg, var(--c-yellow), var(--c-yellow-2));--tile-icon-fg:#4a2a00;--tile-icon-shadow:#f5a8004d}.tile--lime{--tile-icon-bg:linear-gradient(135deg, var(--c-lime), var(--c-lime-2));--tile-icon-fg:#1f3a00;--tile-icon-shadow:#92d1164d}.tile--green{--tile-icon-bg:linear-gradient(135deg, var(--c-green), var(--c-green-2));--tile-icon-shadow:#0ebc854d}.tile--aqua{--tile-icon-bg:linear-gradient(135deg, var(--c-aqua), var(--c-aqua-2));--tile-icon-shadow:#14c8b84d}.tile--teal{--tile-icon-bg:linear-gradient(135deg, var(--c-teal), var(--c-teal-2));--tile-icon-shadow:#1aa8d04d}.tile--blue{--tile-icon-bg:linear-gradient(135deg, var(--c-blue), var(--c-blue-2));--tile-icon-shadow:#3a64ff52}.tile--indigo{--tile-icon-bg:linear-gradient(135deg, var(--c-indigo), var(--c-indigo-2));--tile-icon-shadow:#4a3dd952}.tile--purple{--tile-icon-bg:linear-gradient(135deg, var(--c-purple), var(--c-purple-2));--tile-icon-shadow:#9632ff52}.tile--violet{--tile-icon-bg:linear-gradient(135deg, var(--c-violet), var(--c-violet-2));--tile-icon-shadow:#b533e652}.tile--dark{--tile-icon-bg:linear-gradient(135deg, #1f1f1f, #0f001c);--tile-icon-fg:var(--c-green);--tile-icon-shadow:#2a004d73}.home{-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior-y:contain;will-change:scroll-position;width:100%;height:100%;position:relative;overflow:hidden scroll;transform:translateZ(0);container-type:inline-size}.home-sections{width:100%;max-width:1200px;padding:var(--space-3) var(--space-5) var(--space-7);gap:var(--space-5);flex-direction:column;margin-inline:auto;display:flex}.home-section{gap:var(--space-3);flex-direction:column;display:flex}.home-section-title{align-items:center;gap:var(--space-2);padding:0 var(--space-2);font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--text-lg);letter-spacing:-.01em;color:var(--ink);margin:0;display:flex}.home-section-dot{background:linear-gradient(135deg, var(--c-pink), var(--c-pink-2));border-radius:50%;flex-shrink:0;width:10px;height:10px;display:inline-block;box-shadow:0 0 0 3px #ff61a62e}.home-section:nth-of-type(2) .home-section-dot{background:linear-gradient(135deg, var(--c-teal), var(--c-teal-2));box-shadow:0 0 0 3px #60d4f238}.home-grid{gap:var(--space-4);grid-template-columns:repeat(2,1fr);width:100%;display:grid}@container (width>=560px){.home-grid{gap:var(--space-5);grid-template-columns:repeat(3,1fr)}}@container (width>=900px){.home-grid{gap:var(--space-5);grid-template-columns:repeat(4,1fr)}}@media (max-width:480px) and (orientation:portrait){.home-sections{padding:var(--space-3) var(--space-4) var(--space-6);gap:var(--space-4)}.home-grid{gap:var(--space-3)}.home-section-title{font-size:var(--text-md)}}@media (orientation:landscape) and (max-height:500px){.home{overflow:hidden}.home-sections{height:100%;padding:var(--space-2) var(--space-5) var(--space-3);gap:var(--space-2);overflow-y:auto}.home-grid{gap:var(--space-2);grid-template-columns:repeat(5,1fr)}.home-section-title{font-size:var(--text-sm);padding:0}}@media (min-width:600px) and (max-width:900px) and (orientation:portrait){.home-sections{padding:var(--space-5) var(--space-6) var(--space-6)}.home-grid{gap:var(--space-5);grid-template-columns:repeat(3,1fr)}}@media (min-width:900px){.home-sections{padding:var(--space-5) var(--space-6) var(--space-6)}.home-grid{gap:var(--space-5);grid-template-columns:repeat(4,1fr)}}@media (min-width:1400px){.home-sections{max-width:1280px}.home-grid{gap:var(--space-6)}}.detail{gap:var(--space-2);grid-template-rows:auto auto 1fr auto;width:100%;height:100%;min-height:0;padding:0;display:grid;position:relative}.detail-filter-bar{grid-row:1}.detail-scrollbar{grid-row:2}.detail-track{grid-row:3}.detail-controls{grid-row:4}.detail-filter-bar{gap:var(--space-2);padding:0 var(--space-4);scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-shrink:0;display:flex;overflow-x:auto}.detail-filter-bar::-webkit-scrollbar{display:none}.detail-filter-pill{padding:var(--space-1) var(--space-3);border-radius:var(--r-pill);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--ink-soft);box-shadow:var(--shadow-1), inset 0 1px 0 #fff9;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);background:#ffffffe0;border:1.5px solid #fffffff2;flex-shrink:0}.detail-filter-pill.is-active{background:linear-gradient(135deg, var(--c-pink), var(--c-pink-2));color:#fff;box-shadow:var(--shadow-2), 0 0 0 2px #ff61a640, inset 0 1px 0 #ffffff59;border-color:#0000}.detail-filter-pill:active{transform:scale(.94)}.detail-scrollbar{height:14px;margin:0 var(--space-5);cursor:pointer;touch-action:none;padding:5px 0;position:relative}.detail-scrollbar:before{content:"";pointer-events:none;background:#2a004d1a;border-radius:2px;height:4px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.detail-scrollbar-thumb{background:linear-gradient(135deg, var(--c-pink), var(--c-pink-2));cursor:grab;height:10px;transition:left .18s var(--ease-out), width .18s var(--ease-out), transform .12s var(--ease-out);border-radius:999px;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 2px 6px #e63d8a66}.detail-scrollbar-thumb:active{cursor:grabbing;transform:translateY(-50%)scale(1.15)}.detail-track{scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;align-items:stretch;min-height:0;display:flex;position:relative;overflow:auto hidden}.detail-track::-webkit-scrollbar{display:none}.detail-slot{scroll-snap-align:center;scroll-snap-stop:always;width:80%;padding:0 var(--space-2);flex:0 0 80%;justify-content:center;align-items:stretch;min-height:0;display:flex}.detail-slot:first-child{margin-left:10%}.detail-slot:last-child{margin-right:10%}.detail-slot-ghost{border-radius:var(--r-2xl);background:#ffffff1f;width:100%;height:100%}.card{border-radius:var(--r-2xl);width:100%;max-width:min(560px,95%);min-height:0;padding:var(--space-4);gap:var(--space-3);background:var(--surface-strong);opacity:.62;transition:transform var(--dur-mid) var(--ease-out), opacity var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);flex-direction:column;flex:auto;display:flex;position:relative;transform:scale(.9)perspective(600px)}.card.is-active{opacity:1;box-shadow:var(--shadow-3), 0 0 0 1.5px #ffffff80, inset 0 1px 0 #fff9;transform:scale(1)perspective(600px)}@keyframes swipe-hint{0%{transform:scale(1)perspective(600px)translate(0)}18%{transform:scale(1)perspective(600px)translate(-12px)}36%{transform:scale(1)perspective(600px)translate(0)}54%{transform:scale(1)perspective(600px)translate(-8px)}72%{transform:scale(1)perspective(600px)translate(0)}to{transform:scale(1)perspective(600px)translate(0)}}.detail-track .detail-slot:first-child .card.is-active{animation:swipe-hint 1.4s var(--ease-out) .7s 1 both}.card-ear{top:var(--space-3);right:var(--space-3);z-index:2;border-radius:var(--r-pill);background:linear-gradient(135deg, var(--c-teal), var(--c-teal-2));width:48px;height:48px;color:var(--on-color);box-shadow:var(--shadow-2), inset 0 1px 0 #fff6, inset 0 -2px 0 #2a004d1a;justify-content:center;align-items:center;display:inline-flex;position:absolute}.card-image-btn{border-radius:var(--r-xl);background:#fff6;flex:auto;justify-content:center;align-items:center;width:100%;min-height:0;display:flex;overflow:hidden}.card-image{object-fit:contain;pointer-events:none;width:100%;height:100%}.card-image-placeholder{width:100%;height:100%;color:var(--ink-faint);place-items:center;display:grid}.card-image-dots{justify-content:center;gap:var(--space-2);padding:var(--space-1) 0;display:flex}.card-image-dot{border-radius:var(--r-pill);background:var(--ink-faint);opacity:.5;width:8px;height:8px;transition:all var(--dur-fast) var(--ease-out)}.card-image-dot.is-active{background:var(--brand);opacity:1;transform:scale(1.3)}.card-word{font-family:var(--font-display);font-weight:var(--w-black);letter-spacing:-.02em;color:var(--ink);padding:var(--space-3);text-align:center;border-radius:var(--r-lg);transition:background var(--dur-fast) var(--ease-out);background:0 0;flex:none;justify-content:center;align-items:center;font-size:clamp(2rem,8vw,4.5rem);line-height:1;display:flex}.card-word:active{background:var(--surface)}.detail-controls{justify-content:center;align-items:center;gap:var(--space-4);padding:0 var(--space-5) calc(var(--space-2));display:flex}.detail-arrow{border-radius:var(--r-pill);background:var(--surface-strong);width:56px;height:56px;color:var(--ink);box-shadow:var(--shadow-2), inset 0 1px 0 #ffffffe6;justify-content:center;align-items:center;display:inline-flex}.detail-arrow:disabled{opacity:.55;filter:saturate(.4);cursor:not-allowed;pointer-events:none}.detail-listen-stack{flex-direction:column;align-items:center;gap:4px;display:flex}.detail-listen{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--r-pill);background:linear-gradient(135deg, var(--c-pink), var(--c-pink-2));min-height:56px;color:var(--on-color);font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--text-lg);box-shadow:var(--shadow-3), inset 0 1px 0 #ffffff73, inset 0 -2px 0 #2a004d1a;display:inline-flex}.detail-page-indicator{font-family:var(--font-display);font-weight:var(--w-bold);color:var(--ink-mute);letter-spacing:.04em;-webkit-user-select:none;user-select:none;font-size:.75rem}.detail-page-of{font-weight:var(--w-regular);color:var(--ink-faint);margin:0 2px}.detail-empty{justify-content:center;align-items:center;gap:var(--space-3);height:100%;padding:var(--space-6);text-align:center;flex-direction:column;display:flex}.detail-empty-emoji{font-size:5rem;line-height:1;animation:3.2s ease-in-out infinite detail-empty-bob}@keyframes detail-empty-bob{0%,to{transform:translateY(0)rotate(-2deg)}50%{transform:translateY(-8px)rotate(2deg)}}.detail-empty-title{font-family:var(--font-display);font-weight:var(--w-bold);color:var(--ink);letter-spacing:-.01em;margin:0;font-size:clamp(1.3rem,3vw,1.8rem)}.detail-empty-sub{font-family:var(--font-text);font-size:var(--text-md);color:var(--ink-mute);max-width:32ch;margin:0;line-height:1.4}@media (prefers-reduced-motion:reduce){.detail-empty-emoji{animation:none}}@media (orientation:landscape) and (max-height:500px){.detail{gap:var(--space-2);padding:var(--space-2);grid-template:"filter filter""scroll scroll""track controls"1fr/1fr auto}.detail-filter-bar{grid-area:filter}.detail-scrollbar{grid-area:scroll}.detail-track{grid-area:track}.detail-controls{padding:0 var(--space-3);flex-direction:column;grid-area:controls}.card-word{font-size:clamp(1.5rem,4.5vh,3rem)}.num-digit{font-size:clamp(3rem,12vh,6rem)}.num-emoji-grid{gap:4px;max-width:240px}.card-ear{width:40px;height:40px}.detail-arrow{width:48px;height:48px}.detail-listen{padding:var(--space-2) var(--space-4);min-height:48px}}@media (min-width:1000px){.card{max-width:640px}}.num-card-body{gap:var(--space-3);padding:var(--space-4);cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column}.num-digit{font-family:var(--font-display);color:var(--num-color-dark,var(--c-blue-2));letter-spacing:-.04em;text-shadow:0 4px 16px var(--num-color-shadow,#3a64ff2e);-webkit-text-stroke:2px #ffffff80;paint-order:stroke fill;animation:num-pop .45s var(--ease-bounce) both;font-size:clamp(4rem,18cqh,9rem);font-weight:800;line-height:1}.num-emoji-grid{justify-content:center;gap:var(--space-1) var(--space-2);flex-wrap:wrap;max-width:100%;display:flex}.num-emoji{animation:num-pop .32s var(--ease-bounce) both;animation-delay:calc(var(--i,0) * 30ms);font-size:clamp(1.4rem,3.5cqh,2.2rem);line-height:1}@keyframes num-pop{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.card-color{border:none}.card-word-on-color{color:#fff;text-shadow:0 2px 8px #2a004d4d}.letras{gap:var(--space-2);width:100%;height:100%;padding:var(--space-3) 0;grid-template-rows:1fr auto;display:grid;position:relative}.letras-track{scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;align-items:stretch;min-height:0;display:flex;overflow:auto hidden}.letras-track::-webkit-scrollbar{display:none}.letras-slot{scroll-snap-align:center;scroll-snap-stop:always;width:86%;padding:0 var(--space-2);flex:0 0 86%;justify-content:center;align-items:stretch;min-height:0;display:flex}.letras-slot:first-child{margin-left:7%}.letras-slot:last-child{margin-right:7%}.letter-card{justify-content:space-around;align-items:center;gap:var(--space-4);width:100%;max-width:min(560px,95%);min-height:0;padding:var(--space-5) var(--space-5) var(--space-6);border-radius:var(--r-2xl);background:var(--surface-strong);opacity:.55;transition:transform var(--dur-mid) var(--ease-out), opacity var(--dur-mid) var(--ease-out);flex-direction:column;flex:auto;display:flex;transform:scale(.92)}.letter-card.is-active{opacity:1;transform:scale(1)}.letter-card:not(.is-active){pointer-events:none}.letter-pair{align-items:baseline;gap:clamp(var(--space-2), 2vw, var(--space-4));padding:var(--space-4) var(--space-5);isolation:isolate;display:flex;position:relative}.letter-pair-glow{z-index:-1;pointer-events:none;background:radial-gradient(circle,#ff61a638 0%,#ff61a614 50%,#0000 75%);border-radius:50%;position:absolute;inset:-10% -20%}.letter-upper{font-family:var(--font-display);font-weight:var(--w-black);letter-spacing:-.04em;color:var(--ink);text-shadow:0 6px 24px #2a004d1f;font-size:clamp(7rem,22vw,13rem);line-height:.85}.letter-lower{font-family:var(--font-display);font-weight:var(--w-black);letter-spacing:-.03em;color:var(--brand);text-shadow:0 4px 18px #ff61a64d;font-size:clamp(4.5rem,14vw,8.5rem);line-height:.85}.letter-actions{gap:var(--space-3);flex-wrap:wrap;justify-content:center;display:flex}.letter-btn{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--r-pill);min-height:52px;font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--text-lg);color:var(--on-color);box-shadow:var(--shadow-3), inset 0 1px 0 #fff6, inset 0 -2px 0 #2a004d1a;display:inline-flex}.letter-btn-name{background:linear-gradient(135deg, var(--c-pink), var(--c-pink-2))}.letter-btn-sound{background:linear-gradient(135deg, var(--c-teal), var(--c-teal-2))}.letter-syllables{gap:var(--space-2);grid-template-columns:repeat(5,1fr);width:100%;max-width:480px;display:grid}.letter-syllable{padding:var(--space-3) var(--space-2);border-radius:var(--r-md);background:linear-gradient(135deg, var(--c-yellow), var(--c-yellow-2));min-height:64px;font-family:var(--font-display);font-weight:var(--w-black);letter-spacing:-.02em;box-shadow:var(--shadow-2), inset 0 1px 0 #ffffff73, inset 0 -2px 0 #2a004d1a;justify-content:center;align-items:baseline;gap:2px;font-size:clamp(1.2rem,4vw,1.9rem);line-height:1;display:inline-flex}.syllable-cons{text-transform:uppercase;color:#4a2a00}.syllable-vowel{text-transform:uppercase;color:var(--c-pink-2)}.letras-controls{justify-content:center;align-items:center;gap:var(--space-5);padding:0 var(--space-5) calc(var(--space-3));display:flex}.letras-arrow{border-radius:var(--r-pill);background:var(--surface-strong);width:56px;height:56px;color:var(--ink);box-shadow:var(--shadow-2);justify-content:center;align-items:center;display:inline-flex}.letras-arrow:disabled{opacity:.35;pointer-events:none}.letras-counter{font-family:var(--font-display);color:var(--ink);flex-direction:column;align-items:center;min-width:96px;display:flex}.letras-counter>:first-child{font-weight:var(--w-black);font-size:var(--text-xl);color:var(--brand);line-height:1}.letras-counter small{font-weight:var(--w-medium);font-size:var(--text-xs);color:var(--ink-mute)}@media (orientation:landscape) and (max-height:500px){.letras{gap:var(--space-2);padding:var(--space-2);grid-template:"track controls"1fr/1fr auto}.letras-track{grid-area:track}.letras-controls{padding:0 var(--space-3);flex-direction:column;grid-area:controls}.letter-card{gap:var(--space-3);padding:var(--space-3);max-width:70vw}.letter-pair{padding:var(--space-2)}.letter-upper{font-size:clamp(4rem,14vh,8rem)}.letter-lower{font-size:clamp(3rem,9vh,5rem)}.letter-btn{min-height:44px;padding:var(--space-2) var(--space-4)}.letter-syllable{min-height:48px}.letras-arrow{width:48px;height:48px}}@media (max-width:380px){.letter-card{padding:var(--space-4) var(--space-3) var(--space-5)}.letter-syllables{gap:6px}.letter-syllable{min-height:56px}}@media (min-width:1000px){.letter-card{max-width:640px}.letter-syllables{max-width:540px}}@keyframes vt-from-right{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes vt-from-left{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}.vt-enter-right{animation:vt-from-right var(--dur-mid) var(--ease-out) both}.vt-enter-left{animation:vt-from-left var(--dur-mid) var(--ease-out) both}.view-transition-wrapper{flex-direction:column;width:100%;height:100%;display:flex}@font-face{font-family:Fredoka;font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/fredoka-latin-ext.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fredoka;font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/fredoka-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito;font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/nunito-latin-ext.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Nunito;font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/nunito-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--font-display:"Fredoka", system-ui, -apple-system, sans-serif;--font-text:"Nunito", system-ui, -apple-system, sans-serif;--text-xs:clamp(.72rem, .5vw + .6rem, .85rem);--text-sm:clamp(.85rem, .6vw + .7rem, 1rem);--text-md:clamp(1rem, .8vw + .8rem, 1.15rem);--text-lg:clamp(1.15rem, 1vw + .9rem, 1.4rem);--text-xl:clamp(1.4rem, 1.6vw + 1rem, 1.8rem);--text-2xl:clamp(1.8rem, 2.4vw + 1.2rem, 2.5rem);--text-3xl:clamp(2.4rem, 3.6vw + 1.6rem, 3.5rem);--text-hero:clamp(3.2rem, 6vw + 2rem, 5.5rem);--w-regular:500;--w-medium:600;--w-bold:700;--w-black:800;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--r-sm:12px;--r-md:20px;--r-lg:28px;--r-xl:36px;--r-2xl:48px;--r-pill:9999px;--c-pink:#ff61a6;--c-pink-2:#e63d8a;--c-rose:#ff8ab8;--c-rose-2:#e6457a;--c-coral:#ff7a8a;--c-coral-2:#e64560;--c-orange:#ff9b6a;--c-orange-2:#f26d33;--c-yellow:#ffd748;--c-yellow-2:#f5a800;--c-lime:#c8f060;--c-lime-2:#92d116;--c-green:#5ee6a8;--c-green-2:#0ebc85;--c-aqua:#80f0e0;--c-aqua-2:#14c8b8;--c-teal:#60d4f2;--c-teal-2:#1aa8d0;--c-blue:#7f9bff;--c-blue-2:#3a64ff;--c-indigo:#8a7eff;--c-indigo-2:#4a3dd9;--c-purple:#c78bff;--c-purple-2:#9632ff;--c-violet:#e07aff;--c-violet-2:#b533e6;--brand:var(--c-pink);--brand-2:var(--c-pink-2);--accent:var(--c-teal);--accent-2:var(--c-teal-2);--bg-base:#fff0f8;--bg-grad:linear-gradient(135deg, #ffd1ff 0%, #b5e8ff 50%, #fff1b8 100%);--surface:#ffffff8c;--surface-strong:#ffffffc7;--surface-soft:#ffffff4d;--ink:#2a004d;--ink-soft:#5c2480;--ink-mute:#8d66a5;--ink-faint:#b89cc8;--on-color:#fff;--border:#ffffffd9;--border-soft:#fff6;--border-ink:#2a004d1f;--glass-bg:#ffffff8c;--glass-border:1px solid #ffffffd9;--glass-blur:blur(18px) saturate(140%);--shadow-1:0 2px 8px #2a004d0f;--shadow-2:0 6px 20px #2a004d1a;--shadow-3:0 12px 32px #2a004d24;--shadow-4:0 20px 50px #2a004d2e;--shadow-glow:0 0 0 4px #ff61a62e;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--dur-fast:.15s;--dur-mid:.28s;--dur-slow:.48s;--z-base:0;--z-content:10;--z-header:100;--z-overlay:500;--z-modal:1000;--z-toast:2000;--z-confetti:9999;--sa-top:env(safe-area-inset-top,0px);--sa-bottom:env(safe-area-inset-bottom,0px);--sa-left:env(safe-area-inset-left,0px);--sa-right:env(safe-area-inset-right,0px)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none;overflow:hidden}body{font-family:var(--font-text);font-size:var(--text-md);font-weight:var(--w-medium);color:var(--ink);background:var(--bg-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;line-height:1.4}img,svg,video,canvas{max-width:100%;display:block}img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none;pointer-events:none}button{font:inherit;color:inherit;cursor:pointer;appearance:none;background:0 0;border:0}input,textarea,select{font:inherit;color:inherit}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:var(--w-bold);line-height:1.1}a{color:inherit;text-decoration:none}::selection{background:var(--brand);color:var(--on-color)}html,body{background:var(--bg-grad);overscroll-behavior:none;background-size:400% 400%;height:100dvh;animation:24s infinite gradient-shift}@keyframes gradient-shift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}html.game-open{animation-play-state:paused}body.nav-away .tile,body.nav-away .tile-icon-glyph{animation-play-state:paused!important}@media (prefers-reduced-motion:reduce){body,*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}:focus{outline:none}:focus-visible{outline:3px solid var(--c-blue-2);outline-offset:3px;border-radius:inherit}button:focus-visible,[role=button]:focus-visible,.tap:focus-visible{outline:3px solid var(--c-blue-2);outline-offset:3px}.app{padding-top:var(--sa-top);padding-bottom:var(--sa-bottom);padding-left:var(--sa-left);padding-right:var(--sa-right);background:0 0;grid-template-rows:auto 1fr;display:grid;position:fixed;inset:0}.app-main{position:relative;overflow:hidden}.glass{-webkit-backdrop-filter:blur(10px)saturate(140%);box-shadow:var(--shadow-2);background:#ffffffe0;border:1px solid #ffffffeb}.ambient{pointer-events:none;z-index:var(--z-base);position:fixed;inset:0;overflow:hidden}.ambient:before,.ambient:after{content:"";filter:blur(60px);opacity:.5;border-radius:50%;animation:18s ease-in-out infinite float-blob;position:absolute}.ambient:before{background:radial-gradient(circle, var(--c-pink) 0%, transparent 70%);width:40vmax;height:40vmax;top:-10vmax;left:-10vmax}.ambient:after{background:radial-gradient(circle, var(--c-teal) 0%, transparent 70%);width:35vmax;height:35vmax;animation-delay:-9s;bottom:-10vmax;right:-8vmax}@keyframes float-blob{0%,to{transform:translate(0)scale(1)}33%{transform:translate(4vw,-3vh)scale(1.1)}66%{transform:translate(-3vw,4vh)scale(.95)}}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.hidden{display:none!important}.loading-dots{justify-content:center;align-items:center;gap:10px;display:inline-flex}.loading-dots span{border-radius:50%;width:12px;height:12px;animation:1.2s ease-in-out infinite loading-bob;display:inline-block}.loading-dots span:first-child{background:var(--c-pink);animation-delay:0s}.loading-dots span:nth-child(2){background:var(--c-teal);animation-delay:.18s}.loading-dots span:nth-child(3){background:var(--c-yellow);animation-delay:.36s}@keyframes loading-bob{0%,80%,to{opacity:.35;transform:scale(.5)}40%{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.loading-dots span{opacity:.6;animation:none}}.empty-state{justify-content:center;align-items:center;gap:var(--space-3);height:100%;padding:var(--space-6);text-align:center;flex-direction:column;display:flex}.empty-state-emoji{font-size:5rem;line-height:1;animation:3.2s ease-in-out infinite empty-bob}@keyframes empty-bob{0%,to{transform:translateY(0)rotate(-2deg)}50%{transform:translateY(-8px)rotate(2deg)}}.empty-state-title{font-family:var(--font-display);font-weight:var(--w-bold);color:var(--ink);letter-spacing:-.01em;margin:0;font-size:clamp(1.3rem,3vw,1.8rem)}.empty-state-sub{font-family:var(--font-text);font-size:var(--text-md);color:var(--ink-mute);max-width:36ch;margin:0;line-height:1.4}@media (prefers-reduced-motion:reduce){.empty-state-emoji{animation:none}}.celebrate-tint{z-index:9998;pointer-events:none;animation:celebrate-tint-fade 1.6s var(--ease-out) forwards;mix-blend-mode:multiply;background:#5ee6a86b;position:fixed;inset:0}@keyframes celebrate-tint-fade{0%{opacity:0}15%{opacity:1}55%{opacity:1}to{opacity:0}}.tap{transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out)}.tap:active{filter:brightness(.97);transform:perspective(400px)scale(.94)translateZ(-4px)}@media (hover:hover){.tap:hover{transform:perspective(400px)translateY(-2px)translateZ(2px)}}
