.header{top:calc(var(--sa-top) + var(--space-2));left:var(--space-2);right:var(--space-2);z-index:var(--z-header);justify-content:space-between;align-items:center;gap:var(--space-3);padding:0 var(--space-4);border-radius:var(--r-xl);height:48px;display:flex;position:absolute}.header-left{align-items:center;gap:var(--space-3);flex:1;min-width:0;display:flex}.header-right{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.header-btn{border-radius:var(--r-pill);width:36px;height:36px;color:var(--ink);background:var(--surface-strong);box-shadow:var(--shadow-1);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.header-title{background:0 0;border:none;align-items:center;min-width:0;padding:0;display:flex}.header-title-text{font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--text-md);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.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{top:calc(var(--sa-top) + var(--space-1-5));left:var(--space-1-5);right:var(--space-1-5);padding:0 var(--space-2-5);height:42px}.header-left{gap:var(--space-2)}.header-btn{width:32px;height:32px}.header-title-text{font-size:var(--text-md)}.header-offline{width:32px;height:32px}}@media (orientation:landscape) and (max-height:500px){.header{top:calc(var(--sa-top) + var(--space-1));left:var(--space-2);right:var(--space-2);padding:0 var(--space-2);border-radius:var(--r-lg);height:36px}.header-left{gap:var(--space-2)}.header-btn{width:28px;height:28px}.header-title-text{font-size:var(--text-sm)}.header-offline{width:28px;height:28px}}.tile{justify-content:center;align-items:center;gap:var(--space-2-5);aspect-ratio:1;width:100%;padding:var(--space-4) var(--space-3);border-radius:var(--r-2xl);color:var(--ink);background:var(--tile-surface,var(--surface-strong));border:1.5px solid var(--tile-border,var(--border));box-shadow:var(--shadow-2), var(--inset-hi);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), border-color var(--dur-fast) var(--ease-out);flex-direction:column;display:flex;position:relative;overflow:hidden}.tile:before{content:"";background:radial-gradient(60% 55% at 50% 32%, var(--tile-halo,transparent) 0%, transparent 70%);pointer-events:none;z-index:0;position:absolute;inset:0}.tile:active{transform:perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(.95);box-shadow:var(--shadow-1), var(--inset-hi)}@media (hover:hover){.tile:hover{transform:perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-4px);box-shadow:var(--shadow-3), var(--inset-hi)}}.tile-icon{z-index:1;aspect-ratio:1;clip-path:url(#squircle-tile);background:var(--tile-icon-bg,var(--brand));width:clamp(56px,38%,108px);color:var(--tile-icon-fg,#fff);box-shadow:0 6px 14px var(--tile-icon-shadow,#52b78852), inset 0 2px 0 #ffffff8c, inset 0 -10px 16px #00000024;animation:6s ease-in-out infinite tile-breath;animation-delay:calc(var(--i,0) * .14s);border-radius:0;justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:hidden;transform:translateZ(10px)}@keyframes tile-breath{0%,to{transform:translateZ(10px)scale(1)}50%{transform:translateZ(10px)scale(1.03)}}@media (prefers-reduced-motion:reduce){.tile-icon{animation:none}}.tile-icon-shine{z-index:2;pointer-events:none;mix-blend-mode:soft-light;background:linear-gradient(155deg,#ffffffb3 0%,#ffffff47 26%,#fff0 55%);position:absolute;inset:0}.tile-icon-glyph{z-index:1;filter:drop-shadow(0 2px 2px #0003);justify-content:center;align-items:center;width:58%;height:58%;display:inline-flex;position:relative}.tile-icon-glyph>svg{width:100%;height:100%}.tile-title{z-index:1;font-family:var(--font-display);font-weight:var(--w-bold);letter-spacing:-.01em;text-align:center;color:var(--ink);font-size:clamp(1.05rem,2.4vw,1.35rem);line-height:1.1;position:relative}.tile-subtitle{z-index:1;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(.72rem,1.5vw,.88rem);line-height:1.25;position:relative}.tile--pink{--tile-surface:#fff0f5;--tile-border:#ffd3e1;--tile-halo:#ffafcc59;--tile-icon-bg:linear-gradient(135deg, var(--c-pink), var(--c-pink-2));--tile-icon-shadow:#f06ba559}.tile--rose{--tile-surface:#fff3f7;--tile-border:#ffdce8;--tile-halo:#ffc8dd66;--tile-icon-bg:linear-gradient(135deg, var(--c-rose), var(--c-rose-2));--tile-icon-shadow:#e48db459}.tile--coral{--tile-surface:#fff2ee;--tile-border:#ffd6c8;--tile-halo:#ffb4a25c;--tile-icon-bg:linear-gradient(135deg, var(--c-coral), var(--c-coral-2));--tile-icon-shadow:#e8807059}.tile--orange{--tile-surface:#fff5e8;--tile-border:#ffe0bb;--tile-halo:#ffd6a56b;--tile-icon-bg:linear-gradient(135deg, var(--c-orange), var(--c-orange-2));--tile-icon-shadow:#f5a05a59}.tile--yellow{--tile-surface:#fffae0;--tile-border:#fcecab;--tile-halo:#fff3b08c;--tile-icon-bg:linear-gradient(135deg, var(--c-yellow), var(--c-yellow-2));--tile-icon-fg:#4a2a00;--tile-icon-shadow:#f4c54261}.tile--lime{--tile-surface:#f5fbe4;--tile-border:#deefb8;--tile-halo:#d8f3a87a;--tile-icon-bg:linear-gradient(135deg, var(--c-lime), var(--c-lime-2));--tile-icon-fg:#2e4a10;--tile-icon-shadow:#9bcf5359}.tile--green{--tile-surface:#ecf7ef;--tile-border:#c8e6d3;--tile-halo:#95d5b280;--tile-icon-bg:linear-gradient(135deg, var(--c-green), var(--c-green-2));--tile-icon-shadow:#52b78861}.tile--aqua{--tile-surface:#eff8f4;--tile-border:#cbe7db;--tile-halo:#b8e0d273;--tile-icon-bg:linear-gradient(135deg, var(--c-aqua), var(--c-aqua-2));--tile-icon-shadow:#6fc2a059}.tile--teal{--tile-surface:#edf5fe;--tile-border:#c7dff8;--tile-halo:#bde0fe7a;--tile-icon-bg:linear-gradient(135deg, var(--c-teal), var(--c-teal-2));--tile-icon-shadow:#7fb3e859}.tile--blue{--tile-surface:#eaf3ff;--tile-border:#c4dfff;--tile-halo:#a2d2ff7a;--tile-icon-bg:linear-gradient(135deg, var(--c-blue), var(--c-blue-2));--tile-icon-shadow:#5ba5e859}.tile--indigo{--tile-surface:#f1f2fb;--tile-border:#d5d8ee;--tile-halo:#c7ceea7a;--tile-icon-bg:linear-gradient(135deg, var(--c-indigo), var(--c-indigo-2));--tile-icon-shadow:#8b96d659}.tile--purple{--tile-surface:#f6effb;--tile-border:#e5d2f5;--tile-halo:#d6b8f573;--tile-icon-bg:linear-gradient(135deg, var(--c-purple), var(--c-purple-2));--tile-icon-shadow:#a87ae059}.tile--violet{--tile-surface:#f9f1fd;--tile-border:#ecd8f7;--tile-halo:#e4c1f973;--tile-icon-bg:linear-gradient(135deg, var(--c-violet), var(--c-violet-2));--tile-icon-shadow:#b77fdc59}.tile--dark{--tile-surface:#ecf0ee;--tile-border:#cdd6d2;--tile-halo:#2d4a3e2e;--tile-icon-bg:linear-gradient(135deg, var(--c-dark-plum-2), var(--c-dark-plum));--tile-icon-fg:var(--c-green);--tile-icon-shadow:#1f2e2873}@media (max-width:480px) and (orientation:portrait){.tile{padding:var(--space-3) var(--space-2);gap:var(--space-2);border-radius:var(--r-xl)}.tile-subtitle{display:none}.tile-title{font-size:var(--text-sm);line-height:1.1}}.home-dock{bottom:var(--space-3);left:var(--space-3);right:var(--space-3);z-index:10;justify-content:space-evenly;align-items:center;gap:var(--space-3);padding:var(--space-2);border-radius:var(--r-2xl);background:var(--surface-strong);border:1px solid var(--border);box-shadow:var(--shadow-3);display:flex;position:absolute}.dock-item{clip-path:url(#squircle-dock);color:#fff;border-radius:0;flex-shrink:0;justify-content:center;align-items:center;width:60px;height:60px;display:inline-flex;position:relative;box-shadow:0 4px 10px #0003,inset 0 1px #ffffff59,inset 0 -8px 14px #00000029}.dock-item:before{content:"";z-index:0;pointer-events:none;mix-blend-mode:soft-light;background:linear-gradient(155deg,#fff9 0%,#ffffff38 28%,#fff0 52%);position:absolute;inset:0}.dock-item svg{z-index:1;filter:drop-shadow(0 1.5px 1.5px #00000038);position:relative}.dock-item--gray{background:linear-gradient(135deg,#9aa0a6,#6e7378)}.dock-item--lime{background:linear-gradient(135deg, var(--c-lime), var(--c-lime-2));color:#1f3a00}.dock-item--spotilisa{color:var(--c-green-2);background:#0b0b0c}.dock-item--accent{background:linear-gradient(135deg, var(--accent), var(--accent-2))}.dock-item:disabled{opacity:.7;cursor:not-allowed}.dock-badge{background:var(--c-coral-2);border:2px solid var(--surface-strong);border-radius:50%;width:14px;height:14px;position:absolute;top:-2px;right:-2px}@keyframes dock-spin{to{transform:rotate(360deg)}}.dock-item.is-updating svg{animation:.7s linear infinite dock-spin}@media (prefers-reduced-motion:reduce){.dock-item.is-updating svg{animation:none}}@media (max-width:480px) and (orientation:portrait){.dock-item{width:52px;height:52px}}@media (orientation:landscape) and (max-height:500px){.home-dock{padding:var(--space-1) var(--space-2);gap:var(--space-2)}.dock-item{width:40px;height:40px}.dock-badge{width:12px;height:12px}}.home{background:radial-gradient(120% 55% at 15% 8%,#ffc3dc8c 0%,#0000 60%),radial-gradient(110% 60% at 92% 12%,#bde0fe99 0%,#0000 62%),radial-gradient(140% 70% at 50% 108%,#95d5b2a6 0%,#0000 65%),linear-gradient(#fff8f0 0%,#fdf3e7 100%);flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.home:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(60% 100% at 20% 100%,#52b78847 0%,#0000 70%),radial-gradient(55% 100% at 80% 100%,#9bcf533d 0%,#0000 70%),radial-gradient(70% 100% at 50% 115%,#40966f38 0%,#0000 65%);height:42%;position:absolute;inset:auto 0 0}.home:after{content:"";pointer-events:none;z-index:0;background:radial-gradient(28px 12px at 18% 22%,#ffffffe6 0%,#0000 70%),radial-gradient(40px 14px at 22% 24%,#ffffffbf 0%,#0000 70%),radial-gradient(30px 10px at 72% 14%,#ffffffd9 0%,#0000 70%),radial-gradient(46px 16px at 78% 16%,#ffffffb3 0%,#0000 70%);height:30%;animation:22s ease-in-out infinite alternate cloud-drift;position:absolute;inset:0 0 auto}@keyframes cloud-drift{0%{transform:translate(-6px)}to{transform:translate(6px)}}@media (prefers-reduced-motion:reduce){.home:after{animation:none}}.home-scroll-container{-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior-y:contain;will-change:scroll-position;clip-path:inset(0);z-index:1;flex:1;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-5) var(--space-5) var(--space-9);margin-inline:auto}.home-grid{gap:var(--space-5);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-6);grid-template-columns:repeat(4,1fr)}}@media (max-width:480px) and (orientation:portrait){.home-sections{padding:var(--space-4) var(--space-4) var(--space-9)}.home-grid{gap:var(--space-4);grid-template-columns:repeat(2,1fr)}}@media (orientation:landscape) and (max-height:500px){.home:before{display:none}.home-sections{padding:var(--space-3) var(--space-5) var(--space-8)}.home-grid{gap:var(--space-3);grid-template-columns:repeat(5,1fr)}}@media (min-width:600px) and (max-width:900px) and (orientation:portrait){.home-sections{padding:var(--space-5) var(--space-6) var(--space-9)}.home-grid{gap:var(--space-5);grid-template-columns:repeat(3,1fr)}}@media (min-width:900px){.home-sections{padding:var(--space-6) var(--space-6) var(--space-9)}.home-grid{gap:var(--space-6);grid-template-columns:repeat(4,1fr)}}@media (min-width:1400px){.home-sections{max-width:1280px}.home-grid{gap:var(--space-7)}}.sound-button{cursor:pointer;font-family:var(--font-display);font-weight:var(--w-bold);color:var(--on-color);box-shadow:var(--shadow-2);border:none;justify-content:center;align-items:center;display:inline-flex}.sound-button--pill{gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--r-pill);min-height:52px;font-size:var(--text-lg)}.sound-button--compact{border-radius:var(--r-pill);width:48px;height:48px;position:relative}.sound-button--brand{background:var(--brand)}.sound-button--accent{background:var(--accent)}.sound-button-badge{border-radius:var(--r-pill);background:var(--c-coral-2);min-width:20px;height:20px;color:var(--on-color);border:2px solid var(--surface-strong);font-family:var(--font-display);font-size:11px;font-weight:var(--w-bold);justify-content:center;align-items:center;padding:0 5px;line-height:1;display:inline-flex;position:absolute;top:-4px;right:-4px}@media (max-width:480px) and (orientation:portrait){.sound-button--pill{padding:var(--space-2) var(--space-4);min-height:48px}.sound-button--compact{width:40px;height:40px}}.card-carousel-scrollbar{height:14px;margin:0 var(--space-5);cursor:pointer;touch-action:none;padding:5px 0;position:relative}.card-carousel-scrollbar:before{content:"";background:var(--border);pointer-events:none;border-radius:2px;height:4px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.card-carousel-scrollbar-thumb{background:var(--brand);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%)}.card-carousel-scrollbar-thumb:active{cursor:grabbing;transform:translateY(-50%)scale(1.15)}.card-carousel-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}.card-carousel-track::-webkit-scrollbar{display:none}.card-carousel-slot{flex:0 0 var(--slot-width,86%);width:var(--slot-width,86%);scroll-snap-align:center;scroll-snap-stop:always;padding:0 var(--space-2);justify-content:center;align-items:stretch;min-height:0;display:flex}.card-carousel-slot:first-child{margin-left:calc((100% - var(--slot-width,86%)) / 2)}.card-carousel-slot:last-child{margin-right:calc((100% - var(--slot-width,86%)) / 2)}.card-carousel-slot-ghost{border-radius:var(--r-2xl);background:var(--surface-soft);width:100%;height:100%}.card-carousel-controls{justify-content:center;align-items:center;gap:var(--space-4);padding:0 var(--space-5) calc(var(--space-2));display:flex}.card-carousel-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}.card-carousel-arrow:disabled{opacity:.55;filter:saturate(.4);cursor:not-allowed;pointer-events:none}.card-carousel-listen-stack{align-items:center;gap:var(--space-3);flex-direction:row;display:flex}.card-carousel-page-indicator{font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--text-xs);color:var(--ink-mute);letter-spacing:.04em;-webkit-user-select:none;user-select:none}.card-carousel-page-of{font-weight:var(--w-regular);color:var(--ink-faint);margin:0 2px}@media (max-width:480px) and (orientation:portrait){.card-carousel-controls{padding:0 var(--space-3)}.card-carousel-arrow{width:48px;height:48px}}.card-shell{border-radius:var(--r-2xl);background-color:var(--surface-strong);border:var(--border-sticker);opacity:.55;width:100%;max-width:min(560px,95%);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;align-self:stretch;display:flex;position:relative;transform:scale(.96)}.card-shell.is-active{opacity:1;box-shadow:var(--shadow-2);transform:scale(1)}.card-shell--compact{padding:var(--space-4);gap:var(--space-3)}.card-shell--spacious{justify-content:center;align-items:center;gap:var(--space-6);padding:var(--space-6) var(--space-5);overflow:hidden}@media (min-width:1000px){.card-shell{max-width:640px}}.flag-toggle{border-radius:var(--r-pill);background:var(--surface-strong);width:32px;height:32px;box-shadow:var(--shadow-1);cursor:pointer;transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);border:2px solid #ffffffe6;justify-content:center;align-items:center;padding:0;font-size:16px;line-height:1;display:inline-flex}.flag-toggle:active{transform:scale(.9)}.flag-toggle.is-active{box-shadow:var(--shadow-2), 0 0 0 2px #0d215259;border-color:#0d2152}@media (hover:hover){.flag-toggle:hover{transform:scale(1.08)}}.detail{gap:var(--space-2);width:100%;height:100%;padding:calc(var(--space-2) + 52px) 0 0;grid-template-rows:auto auto 1fr auto;min-height:0;display:grid;position:relative}.detail-filter-bar{grid-row:1}.detail .card-carousel-scrollbar{grid-row:2}.detail .card-carousel-track{grid-row:3}.detail .card-carousel-controls{grid-row:4}.detail-filter-bar{gap:var(--space-2);padding:var(--space-3) var(--space-4) 0;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);background:var(--surface-strong);border:1px solid var(--border);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--w-bold);color:var(--ink-soft);cursor:pointer;transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);flex-shrink:0}.detail-filter-pill.is-active{background:var(--brand);color:var(--on-color);border-color:var(--brand)}.detail-filter-pill:active{transform:scale(.94)}@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 .card-carousel-track .card-carousel-slot:first-child .card-shell.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;position:absolute}.card-flag-toggle{top:var(--space-3);left:var(--space-3);z-index:3;position:absolute}.card-shell.card-english .card-word{font-family:Georgia,Iowan Old Style,Times New Roman,serif}.card-shell.card-english:before{content:"";z-index:-2;border-radius:inherit;background-image:repeating-linear-gradient(#bf0a3024 0 12px,#0000 12px 24px);position:absolute;inset:0}.card-shell.card-english:after{content:"";z-index:-1;border-top-left-radius:inherit;border-bottom-right-radius:var(--r-xl);background-color:#0d2152e6;background-image:radial-gradient(circle,#ffffffe6 1.5px,#0000 1.6px);background-position:6px 6px;background-size:16px 16px;width:40%;height:28%;position:absolute;top:0;left:0}.card-image-btn{border-radius:var(--r-xl);background:var(--surface-soft);width:100%;min-height:120px;box-shadow:var(--shadow-inset-frame);flex:auto;justify-content:center;align-items:center;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-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:calc(var(--space-2) + 38px) var(--space-2) var(--space-2);grid-template:"filter filter""scroll scroll""track controls"1fr/1fr auto}}@media (max-width:480px) and (orientation:portrait){.detail{padding-top:calc(var(--space-1-5) + 42px)}.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}}.num-card-body{gap:var(--space-3);padding:var(--space-4);cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--surface-soft);box-shadow: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,#4361d02e);-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:var(--on-color);text-shadow:0 2px 8px #1b43324d}.letras{gap:var(--space-2);width:100%;height:100%;padding:calc(var(--space-3) + 52px) 0 var(--space-3);grid-template-rows:auto 1fr auto;display:grid;position:relative}.letras .card-carousel-scrollbar{grid-row:1}.letras .card-carousel-track{grid-row:2}.letras .card-carousel-controls{grid-row:3}.letras .card-shell: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{display:none}.letter-upper{font-family:var(--font-display);font-weight:var(--w-black);letter-spacing:-.04em;color:var(--ink);font-size:clamp(7rem,22vw,13rem);line-height:.85}.letter-lower{font-family:var(--font-display);font-style:italic;font-weight:var(--w-black);letter-spacing:-.03em;color:var(--brand-light);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-syllables{gap:var(--space-2);grid-template-columns:repeat(5,1fr);width:100%;max-width:480px;display:grid}.letter-syllable{min-width:0;padding:var(--space-2) var(--space-1);border-radius:var(--r-md);background:var(--brand-pale);border:1px solid var(--brand-light);min-height:56px;font-family:var(--font-display);font-weight:var(--w-black);letter-spacing:-.02em;justify-content:center;align-items:center;gap:2px;font-size:clamp(1rem,3.5vw,1.9rem);line-height:1;display:flex}.syllable-cons{text-transform:uppercase;color:var(--brand)}.syllable-vowel{text-transform:uppercase;color:var(--c-pink-2)}@media (orientation:landscape) and (max-height:500px){.letras{gap:var(--space-2);padding:calc(var(--space-2) + 38px) var(--space-2) var(--space-2);grid-template:"scroll scroll""track controls"1fr/1fr auto}}@media (max-width:480px) and (orientation:portrait){.letras{padding-top:calc(var(--space-2) + 42px)}.letras .card-shell{gap:var(--space-3);padding:var(--space-3) var(--space-2);max-width:90%}.letter-pair{padding:var(--space-2)}.letter-upper{font-size:clamp(4rem,14vh,8rem)}.letter-lower{font-size:clamp(3rem,9vh,5rem)}.letras .sound-button--pill{min-height:44px;padding:var(--space-2) var(--space-4)}.letter-syllables{gap:var(--space-1)}.letter-syllable{min-height:44px;font-size:clamp(.9rem,3vw,1.4rem)}}@media (max-width:380px){.letras .card-shell{padding:var(--space-4) var(--space-3) var(--space-5)}.letter-syllables{gap:6px}.letter-syllable{min-height:56px}}@media (min-width:1000px){.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}::view-transition-group(tile-morph){animation-duration:var(--dur-mid);animation-timing-function:var(--ease-out)}@font-face{font-family:Fredoka Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(/fonts/fredoka-latin.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--font-display:"Fredoka Variable", "SF Pro Rounded", -apple-system, system-ui, sans-serif;--font-text:-apple-system, system-ui, "SF Pro Text", sans-serif;--text-xs:clamp(.78rem, .55vw + .65rem, .9rem);--text-sm:clamp(.92rem, .65vw + .75rem, 1.05rem);--text-md:clamp(1.05rem, .85vw + .85rem, 1.22rem);--text-lg:clamp(1.25rem, 1.1vw + .95rem, 1.55rem);--text-xl:clamp(1.55rem, 1.8vw + 1.05rem, 2.05rem);--text-2xl:clamp(2rem, 2.6vw + 1.3rem, 2.8rem);--text-3xl:clamp(2.6rem, 3.8vw + 1.7rem, 3.8rem);--text-hero:clamp(3.4rem, 6.2vw + 2.2rem, 6rem);--w-regular:400;--w-medium:500;--w-bold:600;--w-black:700;--space-1:4px;--space-1-5:6px;--space-2:8px;--space-2-5:10px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--r-sm:14px;--r-md:20px;--r-lg:28px;--r-xl:36px;--r-2xl:44px;--r-pill:9999px;--c-pink:#ffafcc;--c-pink-2:#f06ba5;--c-rose:#ffc8dd;--c-rose-2:#e48db4;--c-coral:#ffb4a2;--c-coral-2:#e88070;--c-orange:#ffd6a5;--c-orange-2:#f5a05a;--c-yellow:#fff3b0;--c-yellow-2:#f4c542;--c-lime:#d8f3a8;--c-lime-2:#9bcf53;--c-green:#95d5b2;--c-green-2:#52b788;--c-aqua:#b8e0d2;--c-aqua-2:#6fc2a0;--c-teal:#bde0fe;--c-teal-2:#7fb3e8;--c-blue:#a2d2ff;--c-blue-2:#5ba5e8;--c-indigo:#c7ceea;--c-indigo-2:#8b96d6;--c-purple:#d6b8f5;--c-purple-2:#a87ae0;--c-violet:#e4c1f9;--c-violet-2:#b77fdc;--brand:#52b788;--brand-2:#40966f;--brand-light:#95d5b2;--brand-pale:#e8f5ec;--brand-ghost:#f4faf6;--accent:#f06ba5;--accent-2:#d1477f;--bg-base:#fff8f0;--page-bg:#fff8f0;--surface:#fff;--surface-strong:#fff;--surface-soft:#fdf3e7;--ink:#2d4a3e;--ink-soft:#4e6b5e;--ink-mute:#7d9084;--ink-faint:#b5c2ba;--on-color:#fff;--c-dark-plum:#1f2e28;--c-dark-plum-2:#2c3f37;--border:#efe4d2;--border-soft:#f5eee0;--border-ink:#2d4a3e1a;--border-sticker:1.5px solid #f0e4d0;--glass-bg:#fff8f0d1;--glass-border:1px solid #f0e4d2d9;--glass-blur:blur(24px) saturate(180%);--shadow-1:0 2px 6px #52b7881a;--shadow-2:0 6px 18px #52b78824;--shadow-3:0 14px 32px #52b7882e;--shadow-4:0 22px 44px #52b78838;--shadow-glow:0 0 0 6px #f06ba538;--shadow-inset-frame:inset 0 2px 12px #52b78814;--inset-hi:inset 0 1.5px 0 #ffffffa6;--inset-lo:inset 0 -2px 0 #2d4a3e0f;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-bounce:cubic-bezier(.34, 1.75, .6, 1);--dur-fast:.16s;--dur-mid:.32s;--dur-slow:.52s;--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{height:var(--app-vh,100dvh);background:var(--page-bg);overscroll-behavior:none}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;grid-template-areas:"header""main";display:grid;position:fixed;inset:0}body:not(.nav-away) .app{padding-bottom:calc(var(--sa-bottom) * .45)}.app-main{z-index:var(--z-content);grid-area:main;position:relative;overflow:hidden}.glass{background:var(--glass-bg);border:var(--glass-border);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-2)}.ambient{pointer-events:none;z-index:var(--z-base);position:fixed;inset:0;overflow:hidden}.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(--brand);animation-delay:0s}.loading-dots span:nth-child(2){background:var(--brand-light);animation-delay:.18s}.loading-dots span:nth-child(3){background:var(--accent);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:#62cf9d6b;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(1.03,.9)translateZ(-4px)}@media (hover:hover){.tap:hover{transform:perspective(400px)translateY(-2px)translateZ(2px)}}