:root{color:#24304f;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at 10% 12%,#ffe16ab8,#0000 28%),radial-gradient(circle at 84% 15%,#78c8ff9e,#0000 32%),radial-gradient(circle at 74% 92%,#ff82a980,#0000 28%),linear-gradient(135deg,#fff5bc 0%,#d9fbec 48%,#e7f4ff 100%);font-family:Nunito,Inter,ui-rounded,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}#root{place-items:center;min-height:100vh;padding:12px;display:grid}@media (width<=620px){body{min-height:100dvh}#root{place-items:start center;min-height:100dvh;padding:6px}}:root{--font-display:"Fredoka", ui-rounded, "Nunito", "Segoe UI", system-ui, sans-serif;--font-body:"Nunito", "Inter", "Segoe UI", system-ui, sans-serif;--color-primary-grad:linear-gradient(135deg, #ff689a 0%, #ffb16c 100%);--color-secondary-grad:linear-gradient(145deg, #78c8ff 0%, #b998ff 100%);--color-success-grad:linear-gradient(135deg, #69d7b1 0%, #78c8ff 100%);--color-accent-grad:linear-gradient(135deg, #fff2b0 0%, #ffd6c4 100%);--color-bear-grad:linear-gradient(145deg, #fff4a0 0%, #ffb16c 58%, #ff82a9 100%);--color-soft-grad:linear-gradient(135deg, #ff82a9 0%, #ffb16c 100%);--shadow-premium:0 28px 70px #47538029;--shadow-button:0 16px 28px #ff689a38;--shadow-speaker:0 16px 30px #78c8ff3d;--shadow-card:inset 0 -8px 0 #ffb16c1f, 0 16px 26px #40476821;--shadow-card-hover:inset 0 -4px 0 #ffb16c1f, 0 22px 36px #4047682e;--transition-smooth:all .22s cubic-bezier(.34, 1.56, .64, 1);--transition-fast:all .12s ease-out}.app-shell{grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr) 330px;gap:14px;width:min(1220px,100vw - 24px);min-height:min(620px,100vh - 24px);display:grid}.hero-panel,.game-panel,.side-panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffc7;border:2px solid #ffffffc7;border-radius:28px;box-shadow:0 28px 70px #47538029}.hero-panel{grid-column:1/2;justify-content:space-between;align-items:center;gap:18px;padding:18px 22px;display:flex}.brand-row{align-items:center;gap:14px;display:flex}.bear-mark{background:linear-gradient(145deg,#fff4a0,#ffb16c 58%,#ff82a9);border-radius:20px;place-items:center;width:58px;height:58px;font-size:33px;display:grid;box-shadow:0 16px 28px #ff82a938}.app-shell h1,.app-shell h2,.app-shell p{margin:0}.brand-info{flex-direction:column;gap:5px;display:flex}.hero-stats-row{align-items:center;gap:8px;display:flex}.stat-pill{border-radius:999px;align-items:center;padding:4px 10px;font-size:13px;font-weight:800;display:inline-flex;box-shadow:0 4px 10px #00000008}.seen-pill{color:#1e3a8a;background:#78c8ff38;border:1px solid #78c8ff59}.accuracy-pill{color:#065f46;background:#69d7b138;border:1px solid #69d7b159}.hero-hint{color:#627095;margin-top:2px;font-size:17px;font-weight:750}.daily-goal{width:min(260px,100%);margin-top:6px}.daily-goal-row{color:#52607f;justify-content:space-between;align-items:center;gap:10px;font-size:13px;font-weight:950;display:flex}.daily-goal-row strong{color:#2f8b72;font-variant-numeric:tabular-nums;font-size:15px}.daily-goal-track{background:#e8f4ff;border-radius:999px;height:8px;margin-top:5px;overflow:hidden}.daily-goal-track span{border-radius:inherit;background:linear-gradient(135deg,#69d7b1,#78c8ff);height:100%;display:block}.hero-actions{grid-template-columns:minmax(0,1fr) 138px;align-items:center;gap:10px;min-width:430px;display:grid}.mode-tabs{background:#ffffffa3;border-radius:16px;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:5px;display:grid}.mode-tab{color:#53607d;cursor:pointer;background:0 0;border:0;border-radius:12px;min-height:34px;font-size:13px;font-weight:950}.mode-tab.active{color:#55380b;background:linear-gradient(135deg,#fff2b0,#ffd6c4)}.start-button,.speaker-button,.word-card,.category,.soft-button,.mode-tab{font:inherit;cursor:pointer;border:0}.start-button{color:#fff;background:linear-gradient(135deg,#ff689a,#ffb16c);border-radius:18px;min-width:132px;min-height:50px;font-size:17px;font-weight:950;box-shadow:0 18px 34px #ff689a3d}.game-panel{grid-column:1/2;align-content:start;gap:12px;padding:18px;display:grid}.game-topline{background:linear-gradient(135deg,#ffffffe0,#fff7dbc7);border-radius:24px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;min-height:142px;padding:18px 20px;display:grid}.section-label{color:#6b77a0;margin-bottom:8px;font-size:15px;font-weight:950;display:block}.section-label.review-badge{color:#e06c20;background:linear-gradient(135deg,#fff3e0,#ffe0b2);border-radius:12px;align-items:center;gap:10px;padding:5px 14px;font-size:14px;display:inline-flex}.exit-review-button{all:unset;cursor:pointer;color:#c62828;background:#c6282814;border-radius:8px;padding:3px 10px;font-size:13px;font-weight:700;transition:background .15s}.exit-review-button:hover{background:#c628282e}h2{font-family:var(--font-display);color:#24304f;font-size:clamp(52px,7vw,86px);font-weight:500;line-height:.95}h2.prompt-text{font-family:var(--font-body);font-size:clamp(20px,3.2vw,38px);font-weight:850;line-height:1.25}.game-topline p{color:#53607d;margin-top:10px;font-size:23px;font-weight:900}.target-meaning{color:#7b86a8;min-height:32px;font-size:18px}.target-meaning.revealed{color:#53607d;font-size:23px}.speaker-button{color:#fff;background:linear-gradient(145deg,#78c8ff,#b998ff);border-radius:28px;width:84px;height:84px;font-size:37px;box-shadow:0 16px 30px #78c8ff3d}.feedback,.next-button,.previous-button{color:#55380b;text-align:center;background:#fff2b0;border-radius:16px;place-items:center;min-height:44px;padding:8px 16px;font-size:17px;font-weight:950;display:grid}.round-actions{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;display:grid}.next-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#69d7b1,#78c8ff);border:0;box-shadow:0 16px 28px #69d7b138}.previous-button{color:#25304e;cursor:pointer;background:#edf7ff;border:0;box-shadow:0 12px 22px #78c8ff29}.feedback.good{color:#126044;background:#dff8ec}.feedback.try{color:#7b2143;background:#ffe2ee}.choice-grid{grid-template-columns:repeat(4,minmax(132px,1fr));gap:10px;display:grid}.start-button,.speaker-button,.word-card,.category,.soft-button,.mode-tab,.next-button,.previous-button,.exit-review-button,.mobile-drawer-toggle{transition:var(--transition-smooth)}.word-card{color:#24304f;min-height:162px;box-shadow:var(--shadow-card);background:linear-gradient(145deg,#fff,#fff0d8);border-radius:24px;grid-template-rows:1fr auto auto;place-items:center;gap:8px;padding:14px;display:grid}.word-card:hover,.word-card:focus-visible{box-shadow:var(--shadow-card-hover);transform:translateY(-4px)}.category:hover,.category:focus-visible,.soft-button:hover,.soft-button:focus-visible,.start-button:hover,.start-button:focus-visible,.speaker-button:hover,.speaker-button:focus-visible,.next-button:hover,.next-button:focus-visible,.previous-button:hover,.previous-button:focus-visible,.mobile-drawer-toggle:hover,.mobile-drawer-toggle:focus-visible{outline-offset:3px;outline:3px solid #ff82a95c;transform:translateY(-2px)}.start-button:active,.speaker-button:active,.word-card:active,.category:active,.soft-button:active,.next-button:active,.previous-button:active,.mobile-drawer-toggle:active{transform:translateY(1px)scale(.97);box-shadow:0 4px 10px #00000014!important}.word-card:disabled{cursor:wait}.picture{aspect-ratio:1;background:linear-gradient(145deg,#fff9e6,#e8fbff);border-radius:30px;place-items:center;width:min(88px,64%);font-size:clamp(42px,5.4vw,66px);display:grid;box-shadow:inset 0 5px #ffffffc7,0 10px 20px #4047681a}.picture-with-image{padding:6px;overflow:hidden}.picture-number-badge{border:2px solid #fffffff2;background:linear-gradient(135deg,#78c8ff 0%,#b998ff 100%)!important;box-shadow:inset 0 -4px #00000029,0 10px 20px #78c8ff40!important}.picture-number-badge .digit-text{font-family:var(--font-display);color:#fff;text-shadow:0 2px 4px #00000026;font-weight:700;line-height:1;display:inline-block}.picture-number-badge .digit-text[data-length="1"],.picture-number-badge .digit-text[data-length="2"]{font-size:clamp(28px,4.2vw,38px)}.picture-number-badge .digit-text[data-length="3"],.picture-number-badge .digit-text[data-length="4"]{font-size:clamp(20px,3.2vw,28px)}.picture-number-badge .digit-text[data-length="5"],.picture-number-badge .digit-text[data-length="6"],.picture-number-badge .digit-text[data-length="7"],.picture-number-badge .digit-text[data-length="8"],.picture-number-badge .digit-text[data-length="9"]{font-size:clamp(14px,2.2vw,18px)}.picture img{object-fit:contain;width:100%;height:100%;display:block}.text-choice{color:#24304f;background:linear-gradient(145deg,#fff9e6,#e8fbff);border-radius:24px;place-items:center;min-width:min(140px,82%);min-height:72px;padding:0 14px;font-size:clamp(34px,4.4vw,54px);font-weight:950;line-height:1;display:grid;box-shadow:inset 0 5px #ffffffc7,0 10px 20px #4047681a}.word-card strong{font-size:26px;line-height:1}.word-card span:last-child,.card-meaning{color:#687395;font-size:16px;font-weight:850}.card-meaning{color:#53607d;place-items:center;min-height:48px;font-size:20px;font-weight:950;display:grid}.card-meaning.revealed{min-height:auto;font-size:16px;font-weight:850}.side-panel{flex-direction:column;grid-area:1/2/3/3;gap:12px;min-height:0;padding:16px;display:flex}.score-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;display:grid}.metric{background:#fff8e8;border:1px solid #ffb16c5c;border-radius:17px;min-height:56px;padding:9px 11px}.metric-wide{align-content:center;min-height:66px;display:grid}.metric-group{background:#ffffff73;border:1px solid #ffb16c26;border-radius:22px;flex-direction:column;gap:8px;padding:10px;display:flex}.metric-group .metric-wide{background:0 0;border:none;min-height:auto;padding:4px 6px}.metric-sub-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.metric-sub-item{text-align:center;background:#fffcf2;border:1px solid #ffb16c33;border-radius:14px;padding:6px 4px;box-shadow:inset 0 -3px #ffb16c0f}.metric-sub-item span{color:#6e789b;margin-bottom:2px;font-size:18px;font-weight:850;display:block}.metric-sub-item strong{color:#24304f;font-size:20px;font-weight:950;display:block}.metric span{color:#6e789b;font-size:12px;font-weight:950;display:block}.metric strong{color:#24304f;font-variant-numeric:tabular-nums;margin-top:4px;font-size:24px;line-height:1;display:block}.metric-wide strong{font-size:30px}.drawer-section-title{color:#687395;margin-top:10px;margin-bottom:4px;padding-left:2px;font-size:14px;font-weight:850}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:6px;min-height:0;display:grid;overflow:hidden}.learning-stats{background:#ffffff94;border-radius:17px;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:9px;display:grid}.learning-stat-row{background:#f0fbff;border-radius:13px;place-items:center;min-height:48px;display:grid}.learning-stat-row span,.difficult-list>span{color:#6e789b;font-size:14px;font-weight:950}.learning-stat-row strong{color:#24304f;font-variant-numeric:tabular-nums;font-size:24px;line-height:1}.difficult-list{flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:6px;min-height:36px;display:flex}.difficult-list em{color:#7b86a8;font-size:14px;font-style:normal;font-weight:850}.difficult-chip{color:#55380b;background:#fff2b0;border-radius:999px;align-items:center;gap:4px;min-height:25px;padding:4px 8px;font-size:14px;font-weight:950;display:inline-flex}.difficult-chip b{color:#7b2143;font-variant-numeric:tabular-nums}.category{color:#44506f;text-align:left;background:#ffffffb8;border-radius:12px;min-height:31px;padding:5px 9px;font-size:14px;font-weight:950}.category.active{color:#55380b;background:linear-gradient(135deg,#fff2b0,#ffd6c4)}.volume-settings{background:#ffffff94;border:1px solid #ffb16c33;border-radius:17px;align-items:center;gap:10px;margin-top:4px;padding:10px 14px;display:flex}.mute-toggle-button{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;font-size:20px;transition:transform .15s;display:flex}.mute-toggle-button:active{transform:scale(.85)}.volume-slider{appearance:none;cursor:pointer;background:#e8f4ff;border-radius:999px;outline:none;flex:1;height:10px}.volume-slider::-webkit-slider-runnable-track{background:#e8f4ff;border-radius:999px;height:10px}.volume-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#ffb16c;border:3px solid #fff;border-radius:50%;width:20px;height:20px;margin-top:-5px;transition:transform .15s,background-color .15s;box-shadow:0 3px 8px #ffb16c66}.volume-slider::-webkit-slider-thumb:hover{background:#ff9f43;transform:scale(1.2)}.volume-slider::-moz-range-track{background:#e8f4ff;border-radius:999px;height:10px}.volume-slider::-moz-range-thumb{cursor:pointer;background:#ffb16c;border:3px solid #fff;border-radius:50%;width:14px;height:14px;transition:transform .15s,background-color .15s;box-shadow:0 3px 8px #ffb16c66}.volume-slider::-moz-range-thumb:hover{background:#ff9f43;transform:scale(1.2)}.volume-slider:disabled{opacity:.5;cursor:not-allowed}.volume-slider:disabled::-webkit-slider-thumb{box-shadow:none;cursor:not-allowed;background:#cbd5e1;border-color:#f1f5f9}.volume-slider:disabled::-moz-range-thumb{box-shadow:none;cursor:not-allowed;background:#cbd5e1;border-color:#f1f5f9}.volume-value{color:#52607f;text-align:right;font-variant-numeric:tabular-nums;min-width:48px;font-size:13px;font-weight:950}.sound-panel{grid-template-columns:1fr 1fr;gap:8px;display:grid}.soft-button{color:#fff;background:linear-gradient(135deg,#ff82a9,#ffb16c);border-radius:15px;min-height:38px;font-size:15px;font-weight:950}.soft-button.review:disabled{opacity:.58;cursor:not-allowed}@media (width<=980px){.app-shell{grid-template-rows:auto auto auto;grid-template-columns:1fr}.hero-panel,.game-panel,.side-panel{grid-column:1}.hero-panel{grid-row:1}.game-panel{grid-row:2}.side-panel{grid-row:3}}@media (width<=620px){.app-shell{grid-template-rows:auto minmax(0,1fr);gap:8px;width:min(100vw - 12px,430px);height:calc(100dvh - 12px);min-height:0}.hero-panel,.game-panel,.side-panel{border-radius:20px}.hero-panel{flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px;position:relative}.hero-actions{grid-template-columns:1fr;gap:7px;min-width:0}.mode-tabs{border-radius:14px;order:2;gap:4px;padding:4px}.mode-tab{border-radius:10px;min-height:28px;font-size:12px}.bear-mark{border-radius:16px;width:44px;height:44px;font-size:26px}.brand-row{gap:10px;padding-right:100px}.brand-info{gap:3px}.stat-pill{padding:3px 8px;font-size:11px}.hero-hint{margin-top:1px;font-size:15px;line-height:1.2}.metric-sub-item span{font-size:13px}.metric-sub-item strong{font-size:18px}.daily-goal{margin-top:4px}.start-button{border-radius:15px;width:100%;min-height:42px;font-size:15px}.game-panel{flex-direction:column;gap:8px;min-height:0;padding:10px;display:flex;overflow-y:auto}.game-panel>*{flex-shrink:0}.game-topline{border-radius:18px;grid-template-columns:1fr auto;gap:10px;min-height:0;padding:11px 12px}.section-label{margin-bottom:4px;font-size:13px}h2{font-size:clamp(38px,14vw,54px)}h2.prompt-text{font-size:clamp(16px,5.2vw,24px)}.game-topline p,.target-meaning.revealed{margin-top:6px;font-size:18px}.target-meaning{min-height:24px;font-size:15px}.speaker-button{border-radius:19px;width:58px;height:58px;font-size:27px}.feedback,.next-button,.previous-button{border-radius:13px;min-height:36px;padding:6px 10px;font-size:14px;line-height:1.2}.round-actions{gap:7px}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.word-card{border-radius:18px;grid-template-rows:minmax(0,1fr) auto auto;gap:5px;min-height:0;padding:10px}.picture{border-radius:22px;width:min(66px,58%);font-size:clamp(32px,11vw,48px)}.text-choice{border-radius:20px;min-width:min(116px,82%);min-height:54px;font-size:clamp(28px,9vw,40px)}.word-card strong{font-size:19px}.card-meaning{min-height:30px;font-size:16px}.card-meaning.revealed{font-size:14px}.side-panel{display:none}}.drawer-close-button,.mobile-drawer-toggle,.drawer-backdrop{display:none}@media (width<=620px){.drawer-close-button{cursor:pointer;z-index:10;background:#24304f14;border:0;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:14px;display:flex;position:absolute;top:14px;right:14px}.drawer-close-button:active{transform:scale(.9)}.mobile-drawer-toggle{color:#fff;z-index:100;cursor:pointer;background:linear-gradient(135deg,#ff689a,#ffb16c);border:2px solid #fff;border-radius:18px;justify-content:center;align-items:center;gap:5px;min-width:90px;height:36px;padding:0 12px;font-size:13px;font-weight:950;transition:transform .2s,box-shadow .2s;display:flex;position:absolute;top:10px;right:10px;box-shadow:0 8px 20px #ff689a40}.mobile-drawer-toggle:active{transform:scale(.92);box-shadow:0 4px 10px #ff689a26}.drawer-backdrop{-webkit-backdrop-filter:blur(4px);z-index:950;background:#24304f66;width:100vw;height:100vh;animation:.2s ease-out fadeIn;display:block;position:fixed;top:0;left:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.side-panel{z-index:1000;background:#fffffff7;border:0;border-left:2px solid #ffffffd9;border-radius:24px 0 0 24px;flex-direction:column;gap:12px;width:320px;height:100vh;padding:24px 20px 20px;transition:right .3s cubic-bezier(.16,1,.3,1);position:fixed;top:0;right:-340px;overflow-y:auto;box-shadow:-10px 0 40px #24304f2e;display:flex!important}.side-panel.open{right:0}.side-panel .category-grid{align-content:start;max-height:none;margin-top:8px;overflow-y:visible}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}.grammar-tip-card{text-align:left;background:#ffffffb8;border:1px solid #ffb16c38;border-radius:20px;margin-top:14px;margin-bottom:14px;padding:18px 20px;animation:.25s cubic-bezier(.16,1,.3,1) slideDown;box-shadow:0 10px 25px #4047680d}.tip-header{color:#f77f00;letter-spacing:.5px;align-items:center;margin-bottom:12px;font-size:15px;font-weight:950;display:flex}.tip-body{color:#3b4868}.tip-sentence{color:#1e293b;margin:0 0 6px;font-size:20px;font-weight:850}.tip-translation{color:#64748b;margin:0 0 12px;font-size:16px;font-weight:750}.tip-divider{border:none;border-top:1px dashed #ffb16c47;margin:12px 0}.tip-explanation{color:#475569;margin:0;font-size:15px;font-weight:750;line-height:1.6}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.word-card.text-layout{border-radius:20px;grid-template-rows:1fr auto;align-content:space-between;gap:6px;min-height:98px;padding:12px 10px}.word-card.text-layout .text-choice{box-shadow:none;color:#24304f;text-align:center;word-break:break-word;-webkit-line-clamp:3;background:0 0;-webkit-box-orient:vertical;min-width:auto;min-height:auto;padding:0;font-size:clamp(14px,4vw,19px);font-weight:800;line-height:1.35;display:-webkit-box;overflow:hidden}@media (width<=980px){.word-card.text-layout{border-radius:16px;gap:4px;min-height:84px;padding:8px 6px}.word-card.text-layout .text-choice{font-size:clamp(12px,3.8vw,15px);line-height:1.25}.word-card.text-layout .card-meaning{min-height:auto;font-size:11px;font-weight:850}.word-card.text-layout .card-meaning.revealed{font-size:11px}}