@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap";*,:before,:after{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-width:320px;margin:0}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#080d1a;--bg-subtle:#0a1222;--surface:#0f1729;--surface2:#1a2540;--surface3:#253050;--accent:#8b8bff;--accent-dim:#8b8bff24;--accent-glow:#8b8bff4d;--accent-soft:#8b8bff14;--green:#52e88c;--green-dim:#52e88c24;--green-border:#52e88c52;--red:#ff8a9a;--red-dim:#ff8a9a1f;--red-border:#ff8a9a47;--text:#f0f2f9;--text-muted:#8b9ab8;--text-faint:#5a6785;--radius-card:20px;--radius-btn:14px;--radius-sm:10px;--font-ui:"DM Sans", system-ui, sans-serif;--font-word:"Playfair Display", Georgia, serif;--shadow-soft:0 4px 24px #0006;--shadow-card:0 24px 48px #00000059}html,body{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-ui);overscroll-behavior-y:contain;-webkit-font-smoothing:antialiased;background-image:radial-gradient(80% 50% at 50% -20%,#8b8bff1f,#0000),radial-gradient(60% 40% at 100% 100%,#52e88c0a,#0000);min-height:100dvh}.app{min-height:100dvh;padding-top:max(.875rem, env(safe-area-inset-top));padding-right:max(1rem, env(safe-area-inset-right));padding-left:max(1rem, env(safe-area-inset-left));padding-bottom:max(1.25rem, env(safe-area-inset-bottom));flex-direction:column;gap:0;display:flex}.app__header{justify-content:space-between;align-items:center;padding:.5rem 0 .75rem;display:flex}.app__brand{align-items:center;gap:.5rem;display:flex}.app__brand-dot{background:var(--accent);width:8px;height:8px;box-shadow:0 0 10px var(--accent-glow), 0 0 20px #8b8bff26;border-radius:50%;flex-shrink:0}.app__title{font-family:var(--font-ui);letter-spacing:.01em;color:var(--text);font-size:.95rem;font-weight:700}.app__meta{align-items:center;gap:.875rem;padding-bottom:.875rem;display:flex}.app__progress-bar{background:var(--surface2);border-radius:99px;flex:1;height:4px;overflow:hidden}.app__progress-fill{background:linear-gradient(90deg, var(--accent) 0%, #a78bfa 100%);border-radius:99px;height:100%;transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px #8b8bff4d}.app__stats{color:var(--text-muted);white-space:nowrap;letter-spacing:.01em;flex-shrink:0;font-size:.75rem;font-weight:600}.card-scene{perspective:1200px;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:pan-y;flex:1;width:100%;min-height:0;max-height:560px;margin-top:clamp(4rem,12vw,6rem);margin-bottom:.75rem}.card{width:100%;height:100%;transform-style:preserve-3d;border-radius:var(--radius-card);transition:transform .5s cubic-bezier(.4,0,.2,1);position:relative}.card--flipped{transform:rotateY(180deg)}.card__face{backface-visibility:hidden;border-radius:var(--radius-card);background:var(--surface);border:1px solid var(--surface2);box-shadow:0 1px 0 0 #ffffff0d inset, var(--shadow-card), 0 0 0 1px #00000026;flex-direction:column;justify-content:center;align-items:center;gap:.6rem;padding:2.75rem 1.5rem 1.5rem;display:flex;position:absolute;inset:0}.card__face--back{border-color:var(--surface3);background:linear-gradient(165deg,#111d38 0%,#0c1428 50%,#090e1a 100%);transform:rotateY(180deg)}.card__face--front:before,.card__face--front:after{content:"";border-color:var(--surface3);opacity:.6;border-style:solid;width:24px;height:24px;position:absolute}.card__face--front:before{border-width:1px 0 0 1px;border-radius:4px 0 0;top:16px;left:16px}.card__face--front:after{border-width:0 1px 1px 0;border-radius:0 0 4px;bottom:16px;right:16px}.card__top-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;display:flex}.card__known-badge{text-transform:uppercase;letter-spacing:.1em;color:var(--green);background:var(--green-dim);border:1px solid var(--green-border);border-radius:99px;padding:.25rem .6rem;font-size:.62rem;font-weight:700}.card__category{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-glow);border-radius:99px;padding:.25rem .75rem;font-size:.65rem;font-weight:700}.card__word-row{justify-content:center;align-items:center;gap:.5rem;margin:.25rem 0;display:flex}.card__word-row--back{margin-bottom:.25rem}.card__word{font-family:var(--font-word);letter-spacing:-.02em;text-align:center;color:var(--text);font-size:clamp(2rem,10vw,3.2rem);font-weight:900;line-height:1.05}.card__word--back{color:var(--text);letter-spacing:.01em;font-size:clamp(1rem,5vw,1.35rem);font-weight:700;line-height:1.2}.card__speak{background:var(--accent-dim);border:1px solid var(--accent-glow);width:44px;height:44px;color:var(--accent);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s,transform .1s,color .15s;display:flex}.card__speak svg{width:20px;height:20px}.card__speak:active{background:#7c7fff40;transform:scale(.92)}@media (hover:hover){.card__speak:hover{background:#7c7fff33}}.card__pos{font-family:var(--font-ui);color:var(--text-muted);font-size:.82rem;font-style:italic;font-weight:400}.card__hint{color:var(--text-muted);letter-spacing:.04em;opacity:.8;margin-top:1.25rem;font-size:.72rem}.card__definition{font-family:var(--font-ui);text-align:center;color:var(--text);font-size:clamp(.95rem,3.8vw,1.1rem);font-weight:400;line-height:1.7}.card__definition-th{font-family:var(--font-ui);text-align:center;color:var(--text);letter-spacing:.01em;font-size:clamp(1.5rem,7vw,2.2rem);font-weight:700;line-height:1.3}.card__divider{background:linear-gradient(90deg, transparent, var(--accent), transparent);flex-shrink:0;width:28px;height:1px;margin:.4rem 0}.card__example{font-family:var(--font-word);color:var(--text-muted);text-align:center;font-size:clamp(.82rem,3.2vw,.95rem);font-style:italic;line-height:1.65}.app__nav{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.app__counter{color:var(--text-muted);letter-spacing:.04em;background:var(--surface);border:1px solid var(--surface2);text-align:center;border-radius:99px;flex:1;padding:.35rem 1rem;font-size:.8rem;font-weight:600;transition:color .2s,border-color .2s,background .2s}.app__counter--known{color:var(--green);border-color:var(--green-border);background:var(--green-dim)}.app__actions{flex-direction:column;gap:.625rem;display:flex}.btn{border-radius:var(--radius-btn);font-family:var(--font-ui);cursor:pointer;-webkit-tap-highlight-color:transparent;letter-spacing:.01em;border:none;font-size:.9rem;font-weight:600;transition:all .15s}.btn--arrow{background:var(--surface);border:1px solid var(--surface2);width:48px;height:48px;color:var(--text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;font-size:1.1rem;font-family:var(--font-ui);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:all .15s;display:flex}.btn--arrow:active{background:var(--surface2);color:var(--text);transform:scale(.93)}.btn--ghost{color:var(--text-muted);border:1px solid var(--surface2);background:0 0;min-height:36px;padding:.45rem .875rem;font-size:.8rem}.btn--ghost:active{background:var(--surface2);color:var(--text)}.btn--known{background:var(--green-dim);width:100%;height:58px;color:var(--green);border:1px solid var(--green-border);border-radius:var(--radius-btn);justify-content:center;align-items:center;gap:.5rem;font-size:1rem;transition:background .15s,transform .1s,box-shadow .15s;display:flex;box-shadow:0 2px 8px #52e88c1a}.btn--known:active{background:#52e88c38;transform:scale(.98)}.btn--unknown{background:var(--red-dim);width:100%;height:58px;color:var(--red);border:1px solid var(--red-border);border-radius:var(--radius-btn);justify-content:center;align-items:center;gap:.5rem;font-size:1rem;transition:background .15s,transform .1s;display:flex}.btn--unknown:active{background:#ff8a9a33;transform:scale(.98)}@media (hover:hover){.btn--arrow:hover,.btn--ghost:hover{color:var(--text);border-color:var(--surface3)}.btn--known:hover{background:#52e88c33}.btn--unknown:hover{background:#ff8a9a2e}}.app__level-badge{text-transform:uppercase;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-glow);border-radius:99px;padding:.2rem .55rem;font-size:.62rem;font-weight:700}@keyframes screenIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.screen{min-height:100dvh;padding-top:max(.875rem, env(safe-area-inset-top));padding-right:max(1.25rem, env(safe-area-inset-right));padding-left:max(1.25rem, env(safe-area-inset-left));padding-bottom:max(2rem, env(safe-area-inset-bottom));flex-direction:column;animation:.35s cubic-bezier(.4,0,.2,1) both screenIn;display:flex}.screen--category{height:100dvh;min-height:unset;padding-bottom:0;position:relative;overflow-y:auto}.screen__brand{align-items:center;gap:.5rem;padding:.5rem 0 0;display:flex}.screen__nav{justify-content:space-between;align-items:center;padding:.5rem 0 0;display:flex}.screen__goal-chip{text-transform:uppercase;letter-spacing:.1em;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-glow);border-radius:99px;padding:.3rem .75rem;font-size:.72rem;font-weight:700}.btn--back{color:var(--text-muted);font-family:var(--font-ui);cursor:pointer;-webkit-tap-highlight-color:transparent;letter-spacing:.01em;background:0 0;border:none;padding:.25rem 0;font-size:.85rem;font-weight:600}.btn--back:active{color:var(--text)}.screen__hero{flex-direction:column;flex:1;justify-content:center;max-height:220px;padding:1.5rem 0 1.25rem;display:flex}.screen__eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin-bottom:.5rem;font-size:.7rem;font-weight:700}.screen__title{font-family:var(--font-word);letter-spacing:-.02em;color:var(--text);margin-bottom:.6rem;font-size:clamp(2.4rem,10vw,3.4rem);font-weight:900;line-height:1.05}.screen__sub{color:var(--text-muted);font-size:.82rem;font-weight:400}.screen--goal-with-learned{min-height:unset;padding-bottom:max(2.5rem, env(safe-area-inset-bottom));overflow-y:auto}.goal-header{margin-bottom:.5rem}.goal-tagline{color:var(--text-muted);letter-spacing:.02em;margin-top:.4rem;padding-left:1.35rem;font-size:.8rem}.goal-hero{padding:2rem 0 1.5rem}.goal-eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--accent);margin-bottom:.5rem;font-size:.7rem;font-weight:700}.goal-title{font-family:var(--font-word);letter-spacing:-.03em;color:var(--text);font-size:clamp(2.5rem,12vw,3.6rem);font-weight:900;line-height:1.05}.goal-card{background:var(--surface);border:1px solid var(--surface2);border-radius:var(--radius-card);box-shadow:var(--shadow-soft);margin-bottom:1.25rem;padding:1.5rem;animation:.5s cubic-bezier(.4,0,.2,1) .1s both fadeInUp}.goal-presets{gap:.5rem;margin-bottom:1rem;display:flex}.goal-preset{background:var(--surface2);border-radius:var(--radius-sm);color:var(--text-muted);font-family:var(--font-ui);cursor:pointer;-webkit-tap-highlight-color:transparent;border:1px solid #0000;flex:1;padding:.7rem .5rem;font-size:.95rem;font-weight:600;transition:all .15s}.goal-preset:active{transform:scale(.97)}.goal-preset--on{background:var(--accent-dim);border-color:var(--accent-glow);color:var(--accent)}@media (hover:hover){.goal-preset:hover:not(.goal-preset--on){background:var(--surface3);color:var(--text)}}.goal-input-wrap{margin-bottom:1rem}.goal-input{text-align:center;width:100%;font-size:1.5rem;font-weight:700;font-family:var(--font-word);color:var(--text);background:var(--bg);border:1px solid var(--surface2);border-radius:var(--radius-btn);-webkit-tap-highlight-color:transparent;padding:1rem 1.25rem;transition:border-color .2s,box-shadow .2s}.goal-input::placeholder{color:var(--text-faint)}.goal-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);outline:none}.btn--primary-goal{background:linear-gradient(135deg, var(--accent) 0%, #7c5cf7 100%);color:#fff;border-radius:var(--radius-btn);width:100%;font-family:var(--font-ui);cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;padding:.9rem 1.75rem;font-size:1rem;font-weight:700;transition:opacity .15s,transform .1s,box-shadow .2s;box-shadow:0 4px 16px #8b8bff40}.btn--primary-goal:active{opacity:.95;transform:scale(.98)}@media (hover:hover){.btn--primary-goal:hover{box-shadow:0 6px 24px #8b8bff59}}.btn-learned-cta{background:linear-gradient(135deg, var(--green-dim) 0%, #52e88c0f 100%);border:1px solid var(--green-border);border-radius:var(--radius-card);width:100%;color:var(--green);font-family:var(--font-ui);cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:left;align-items:center;gap:.6rem;padding:1.1rem 1.35rem;font-size:.95rem;font-weight:600;transition:background .15s,transform .1s,border-color .15s;animation:.5s cubic-bezier(.4,0,.2,1) .2s both fadeInUp;display:flex}.btn-learned-cta:active{background:#52e88c33;transform:scale(.98)}.btn-learned-cta__icon{background:var(--green);width:28px;height:28px;color:var(--bg);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.85rem;font-weight:700;display:flex}.btn-learned-cta__label{flex:1}.btn-learned-cta__count{font-family:var(--font-word);color:var(--text);font-size:1.1rem;font-weight:900}.btn-learned-cta__arrow{opacity:.7;font-size:1rem}@media (hover:hover){.btn-learned-cta:hover{background:#52e88c2e;border-color:#52e88c66}}.screen--learned{min-height:unset;overflow-y:auto}.screen__nav--learned{flex-direction:column;align-items:stretch;gap:.75rem}.screen__learned-title{font-family:var(--font-word);color:var(--text);font-size:1.4rem;font-weight:700}.learned-page__hero{text-align:center;padding:1.5rem 0 1.75rem}.learned-page__badge{background:linear-gradient(135deg, var(--green-dim) 0%, #52e88c0f 100%);border:1px solid var(--green-border);border-radius:var(--radius-card);flex-direction:column;align-items:center;gap:.25rem;margin-bottom:.75rem;padding:1.15rem 1.75rem;display:inline-flex;box-shadow:0 4px 20px #52e88c14}.learned-page__count{font-family:var(--font-word);color:var(--green);font-size:2.5rem;font-weight:900;line-height:1}.learned-page__label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-size:.72rem;font-weight:700}.learned-page__sub{color:var(--text-muted);font-size:.8rem;line-height:1.5}.learned-empty{text-align:center;padding:3rem 1.5rem}.learned-empty__icon{opacity:.5;filter:grayscale(.3);margin-bottom:1rem;font-size:3.5rem}.learned-empty__title{font-family:var(--font-word);color:var(--text);margin-bottom:.5rem;font-size:1.3rem;font-weight:700}.learned-empty__text{color:var(--text-muted);max-width:260px;margin:0 auto;font-size:.9rem;line-height:1.6}.learned-page__list{padding-bottom:2rem}.learned-category{margin-bottom:1.5rem}.learned-category__title{text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:.6rem;padding-left:.25rem;font-size:.7rem;font-weight:700}.learned-category__cards{flex-direction:column;gap:.6rem;display:flex}.learned-card{background:var(--surface);border:1px solid var(--surface2);border-radius:var(--radius-btn);padding:1rem 1.25rem;transition:border-color .15s}.learned-card:hover{border-color:var(--surface3)}.learned-card__main{align-items:baseline;gap:.5rem;margin-bottom:.35rem;display:flex}.learned-card__word{font-family:var(--font-word);color:var(--text);font-size:1.1rem;font-weight:700}.learned-card__pos{color:var(--text-muted);font-size:.75rem;font-style:italic}.learned-card__def{color:var(--text-muted);margin-bottom:.75rem;font-size:.95rem;line-height:1.4}.learned-card__actions{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.learned-card__speak{background:var(--surface2);width:36px;height:36px;color:var(--text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;border-radius:50%;justify-content:center;align-items:center;transition:color .15s,background .15s,transform .1s;display:flex}.learned-card__speak:hover{color:var(--accent);background:var(--accent-dim)}.learned-card__speak:active{transform:scale(.92)}.learned-card__remove{border:1px solid var(--red-border);color:var(--red);font-family:var(--font-ui);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border-radius:99px;padding:.4rem .75rem;font-size:.78rem;font-weight:600;transition:background .15s,transform .1s}.learned-card__remove:hover{background:var(--red-dim)}.learned-card__remove:active{transform:scale(.96)}.goal-grid{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.goal-tile{background:var(--surface);border:1px solid var(--surface2);border-radius:var(--radius-card);cursor:pointer;-webkit-tap-highlight-color:transparent;font-family:var(--font-ui);flex-direction:column;justify-content:center;align-items:center;gap:.2rem;padding:1.5rem 1rem;transition:border-color .15s,background .15s,transform .12s;display:flex}.goal-tile:active{background:var(--surface2);border-color:var(--accent);transform:scale(.96)}.goal-tile__number{font-family:var(--font-word);color:var(--text);letter-spacing:-.03em;font-size:clamp(2.6rem,12vw,3.6rem);font-weight:900;line-height:1}.goal-tile__label{text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-top:.3rem;font-size:.78rem;font-weight:700}.goal-tile__sub{color:var(--text-faint);font-size:.68rem;font-weight:400}@media (hover:hover){.goal-tile:hover{border-color:var(--surface3);background:var(--surface2)}}.screen__hero--sm{flex:0;padding:.5rem 0}.cat-select-all{margin-bottom:.75rem}.cat-toggle-all{border:1px solid var(--surface2);color:var(--text-muted);font-family:var(--font-ui);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border-radius:99px;padding:.4rem 1rem;font-size:.78rem;font-weight:600;transition:all .15s}.cat-toggle-all--on{color:var(--accent);border-color:var(--accent-glow);background:var(--accent-dim)}.cat-grid{flex:1;grid-template-columns:1fr;align-content:start;gap:.6rem;margin-bottom:1rem;display:grid}@media (width>=480px){.cat-grid{grid-template-columns:1fr 1fr}}.cat-chip{background:var(--surface);border:1px solid var(--surface2);border-radius:var(--radius-btn);cursor:pointer;-webkit-tap-highlight-color:transparent;font-family:var(--font-ui);text-align:left;align-items:center;gap:.5rem;min-height:48px;padding:.6rem .75rem;transition:border-color .15s,background .15s,transform .1s;display:flex}.cat-chip:active{transform:scale(.96)}.cat-chip--on{background:var(--accent-dim);border-color:var(--accent-glow)}.cat-chip__icon{flex-shrink:0;font-size:1.1rem;line-height:1}.cat-chip__name{color:var(--text-muted);letter-spacing:.01em;flex:1;font-size:.82rem;font-weight:600}.cat-chip--on .cat-chip__name{color:var(--text)}.cat-chip__count{color:var(--text-faint);background:var(--surface2);border-radius:99px;flex-shrink:0;padding:.1rem .4rem;font-size:.68rem;font-weight:700}.cat-chip--on .cat-chip__count{color:var(--accent);background:#7c7fff26}.btn--start-wrap{padding:1rem 0 max(1.25rem, env(safe-area-inset-bottom));background:linear-gradient(to top, var(--bg) 0%, var(--bg) 55%, transparent 100%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);margin-top:1rem;position:sticky;bottom:0}.btn--start{background:linear-gradient(135deg, var(--accent) 0%, #7c5cf7 100%);color:#fff;border-radius:var(--radius-card);width:100%;height:56px;font-family:var(--font-ui);cursor:pointer;-webkit-tap-highlight-color:transparent;letter-spacing:.01em;border:none;font-size:1rem;font-weight:700;transition:opacity .15s,transform .12s,box-shadow .2s;display:block;box-shadow:0 4px 20px #8b8bff4d,0 8px 32px #0006}.btn--start:active{opacity:.95;transform:scale(.98)}.btn--start:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}@media (hover:hover){.cat-chip:hover:not(.cat-chip--on){border-color:var(--surface3);background:var(--surface2)}.btn--start:hover:not(:disabled){opacity:.95;box-shadow:0 6px 28px #8b8bff66}}.app__complete{background:linear-gradient(135deg, var(--green-dim) 0%, #52e88c14 100%);border:1px solid var(--green-border);border-radius:var(--radius-card);text-align:center;color:var(--text);flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;margin-top:.75rem;padding:1.25rem 1.5rem;font-size:.95rem;animation:.4s cubic-bezier(.4,0,.2,1) fadeInUp;display:flex}