*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--font-serif: "Nunito", system-ui, sans-serif;--font-sans: "Nunito", system-ui, sans-serif;--font-mono: "Nunito", system-ui, sans-serif;--bg: #EFF6FF;--surface: #FFFFFF;--card: #F5FAFF;--border: #BFDBFE;--text: #1E3A5F;--muted: #5E87AA;--hint: #93C5FD;--amber: #1CB0F6;--amber-light:#E0F5FF;--amber-dark: #0284C7;--success-bg: #DCFCE7;--success-fg: #16A34A;--danger-bg: #FEE2E2;--danger-fg: #DC2626;--timer-ok: #16A34A;--timer-warn: #D97706;--timer-crit: #DC2626;--radius-sm: 14px;--radius-md: 18px;--radius-lg: 24px}.dark-vars{--bg: #0D1B2A;--surface: #1A2D3E;--card: #1E3448;--border: #2A4A6A;--text: #E8F4FF;--muted: #7AA8C8;--hint: #3A6080;--amber: #1CB0F6;--amber-light:#0D3550;--amber-dark: #7DD8FC;--success-bg: #14532D;--success-fg: #86EFAC;--danger-bg: #4C0519;--danger-fg: #FCA5A5}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #0D1B2A;--surface: #1A2D3E;--card: #1E3448;--border: #2A4A6A;--text: #E8F4FF;--muted: #7AA8C8;--hint: #3A6080;--amber: #1CB0F6;--amber-light:#0D3550;--amber-dark: #7DD8FC;--success-bg: #14532D;--success-fg: #86EFAC;--danger-bg: #4C0519;--danger-fg: #FCA5A5}}:root[data-theme=dark]{--bg: #0D1B2A;--surface: #1A2D3E;--card: #1E3448;--border: #2A4A6A;--text: #E8F4FF;--muted: #7AA8C8;--hint: #3A6080;--amber: #1CB0F6;--amber-light:#0D3550;--amber-dark: #7DD8FC;--success-bg: #14532D;--success-fg: #86EFAC;--danger-bg: #4C0519;--danger-fg: #FCA5A5}:root[data-theme=light]{--bg: #EFF6FF;--surface: #FFFFFF;--card: #F5FAFF;--border: #BFDBFE;--text: #1E3A5F;--muted: #5E87AA;--hint: #93C5FD;--amber: #1CB0F6;--amber-light:#E0F5FF;--amber-dark: #0284C7;--success-bg: #DCFCE7;--success-fg: #16A34A;--danger-bg: #FEE2E2;--danger-fg: #DC2626}input[type=range]{accent-color:var(--amber);-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--border);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--amber);cursor:pointer}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--amber);border:none;cursor:pointer}body{font-family:var(--font-sans);font-weight:500;background:var(--bg);color:var(--text);line-height:1.6;min-height:100svh;display:flex;align-items:center;justify-content:center}#root{width:100%;max-width:480px;padding:1.5rem 1.25rem;min-height:100svh;display:flex;flex-direction:column;justify-content:center}.card-scene{perspective:1100px;height:260px;margin:1.25rem 0}.card-3d{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1)}.card-3d.flipped{transform:rotateY(180deg)}.card-3d.instant{transition:none}.card-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius-lg);border:2px solid var(--border);box-shadow:0 4px 0 var(--border);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.75rem;text-align:center}.card-back{transform:rotateY(180deg)}.word-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--hint);margin-bottom:.6rem}.word-dutch{font-family:var(--font-serif);font-size:2.6rem;font-weight:800;color:var(--text);line-height:1.2}.word-english{font-family:var(--font-serif);font-size:1.8rem;font-weight:700;color:var(--text);margin-bottom:.5rem}.word-meaning{font-size:13px;color:var(--muted);line-height:1.55}.input-field{width:100%;padding:13px 16px;font-size:15px;font-family:var(--font-sans);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s;margin-bottom:.75rem}.input-field:focus{border-color:var(--amber);box-shadow:0 0 0 3px #1cb0f62e}.btn-primary{width:100%;padding:14px;border-radius:var(--radius-sm);border:none;border-bottom:4px solid var(--amber-dark);background:var(--amber);color:#fff;font-size:15px;font-weight:700;font-family:var(--font-sans);cursor:pointer;transition:filter .15s,transform .1s,border-bottom-width .1s;letter-spacing:.02em}.btn-primary:hover{filter:brightness(1.07)}.btn-primary:active{border-bottom-width:2px;transform:translateY(2px)}.btn-ghost{background:none;border:2px solid var(--border);padding:10px 20px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;font-family:var(--font-sans);transition:background .15s,border-color .15s}.btn-ghost:hover{background:var(--amber-light);border-color:var(--amber)}.stats-row{display:flex;gap:.75rem;justify-content:center;margin-bottom:1.75rem}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:.9rem;text-align:center;width:118px;height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center}.stat-card .number{font-size:1.65rem;font-weight:500;color:var(--text)}.stat-card .label{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--hint);margin-bottom:3px}.timer-row{display:flex;align-items:center;gap:10px;margin-bottom:1.25rem}.timer-track{flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden}.timer-fill{height:100%;border-radius:3px;transition:width 1s linear,background .5s}.timer-text{font-family:var(--font-mono);font-size:12px;font-weight:500;min-width:30px}.result-badge{font-size:11px;font-weight:500;letter-spacing:.06em;padding:4px 12px;border-radius:6px;margin-bottom:.6rem;display:inline-block}.badge-correct{background:var(--success-bg);color:var(--success-fg)}.badge-incorrect{background:var(--danger-bg);color:var(--danger-fg)}.history-list{display:flex;flex-direction:column;gap:.5rem}.history-row{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}.history-date{font-size:14px;font-weight:500;color:var(--text)}.history-time{font-size:11px;color:var(--hint);margin-top:2px}.history-score{display:flex;flex-direction:column;align-items:flex-end}.history-pct{font-size:1.25rem;font-weight:500}.history-detail{font-size:11px;color:var(--hint);margin-top:2px}.speak-btn{background:none;border:none;font-size:1.3rem;cursor:pointer;margin-top:.6rem;opacity:.6;transition:opacity .15s,transform .15s;line-height:1}.speak-btn:hover{opacity:1;transform:scale(1.15)}.speak-btn:active{transform:scale(.95)}.goal-picker{display:flex;gap:.5rem;justify-content:center;margin-bottom:1rem}.goal-pill{padding:5px 14px;border-radius:99px;border:2px solid var(--border);background:var(--surface);font-size:13px;font-weight:700;font-family:var(--font-sans);color:var(--muted);cursor:pointer;transition:background .15s,border-color .15s,color .15s}.goal-pill.active{background:var(--amber);border-color:var(--amber);color:#fff}.goal-pill:hover:not(.active){border-color:var(--amber);color:var(--amber)}.text-center{text-align:center}.text-muted{color:var(--muted);font-size:15px}.done-pill{display:inline-block;font-size:14px;padding:5px 14px;border-radius:99px;background:var(--success-bg);color:var(--success-fg);margin-bottom:1.25rem}.how-it-works{border-top:1px solid var(--border);padding-top:1.25rem;margin-top:.25rem}.how-it-works p{font-size:14px;color:var(--muted);line-height:2}.pt-wrapper{width:100%}.pt-zoom-entering,.pt-zoom-exiting{will-change:opacity,transform;backface-visibility:hidden;transform:translateZ(0)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.pt-fade-entering{animation:fadeIn .35s ease forwards}.pt-fade-exiting{animation:fadeOut .25s ease forwards}@keyframes slideInRight{0%{opacity:0;transform:translate(48px)}to{opacity:1;transform:translate(0)}}@keyframes slideOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-48px)}}.pt-slide-entering{animation:slideInRight .35s cubic-bezier(.25,.46,.45,.94) forwards}.pt-slide-exiting{animation:slideOutLeft .25s cubic-bezier(.55,0,1,.45) forwards}@keyframes slideUpIn{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUpOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-30px)}}.pt-slideup-entering{animation:slideUpIn .35s cubic-bezier(.25,.46,.45,.94) forwards}.pt-slideup-exiting{animation:slideUpOut .25s cubic-bezier(.55,0,1,.45) forwards}@keyframes zoomIn{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1)}}.pt-zoom-entering{animation:zoomIn .18s cubic-bezier(.22,1,.36,1) forwards}.pt-zoom-exiting{animation:zoomOut .1s ease-in forwards}@keyframes settingsSlideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes settingsSlideOut{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}@keyframes backdropFadeOut{0%{opacity:1}to{opacity:0}}.settings-panel{animation:settingsSlideIn .25s ease forwards}.settings-panel-out{animation:settingsSlideOut .25s ease forwards}.settings-backdrop{animation:backdropFadeIn .25s ease forwards}.settings-backdrop-out{animation:backdropFadeOut .25s ease forwards}@keyframes popupIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes popupOut{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.7)}}@keyframes popupBgIn{0%{opacity:0}to{opacity:1}}@keyframes popupBgOut{0%{opacity:1}to{opacity:0}}@keyframes coinPop{0%{transform:scale(1)}40%{transform:scale(1.45)}to{transform:scale(1)}}@keyframes coinGlow{0%{color:#f5c518}40%{color:#fff;text-shadow:0 0 8px #F5C518,0 0 16px #F5C518}to{color:#f5c518;text-shadow:none}}.coin-pop{animation:coinPop .35s cubic-bezier(.22,1,.36,1) forwards}.coin-glow{animation:coinGlow .5s ease-out forwards}.modal-backdrop{position:fixed;inset:0;background:#00000073;z-index:90;animation:popupBgIn .18s ease forwards}.modal-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.5rem;max-width:320px;width:90%;text-align:center;animation:popupIn .2s cubic-bezier(.22,1,.36,1) forwards}