:root{--paper:#f5ecdc;--paper-warm:#efe3cd;--paper-deep:#e8d8b8;--ink:#1d2b4f;--ink-soft:#2d3b5f;--ink-muted:#5a6585;--coral:#e8654a;--coral-deep:#c14a30;--gold:#d4a648;--sage:#7a8c5a;--plum:#6b3a5c;--sky:#4a7ba8;--cat-greeting:#d4a648;--cat-attendance:#7a8c5a;--cat-communication:#4a7ba8;--cat-question:#6b3a5c;--cat-permission:#b85c8e;--cat-apology:#e8654a;--cat-actions:#3a6b7b;--cat-instructions:#5a4a8a;--cat-praise:#c9893a;--cat-feelings:#8a4a4a;--shadow-paper:0 1px 0 #1d2b4f0a, 0 2px 4px #1d2b4f0f, 0 8px 24px #1d2b4f0d;--shadow-lift:0 2px 0 #1d2b4f0f, 0 4px 12px #1d2b4f1a, 0 16px 40px #1d2b4f14;--shadow-deep:0 4px 0 #1d2b4f14, 0 12px 24px #1d2b4f24, 0 32px 64px #1d2b4f1f;--radius:6px;--radius-lg:14px;--font-display:"Fraunces", Georgia, serif;--font-thai:"IBM Plex Sans Thai Looped", "Noto Sans Thai", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--paper);min-height:100%;color:var(--ink);font-family:var(--font-thai);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-size:16px;line-height:1.55}body{background-image:radial-gradient(at 20% 10%,#e8654a0f 0,#0000 50%),radial-gradient(at 85% 90%,#4a7ba812 0,#0000 50%),radial-gradient(#d4a6480a 0,#0000 60%);background-attachment:fixed}body:before{content:"";pointer-events:none;opacity:.5;mix-blend-mode:multiply;z-index:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.17 0 0 0 0 0.31 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/></svg>");position:fixed;inset:0}#root{z-index:1;flex-direction:column;min-height:100vh;display:flex;position:relative}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}input,select,textarea{font:inherit;color:inherit}a{color:inherit}.display{font-family:var(--font-display);letter-spacing:-.02em;font-weight:700;line-height:1.05}.serif{font-family:var(--font-display)}.mono{font-family:var(--font-mono)}.eyebrow{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted);font-size:.7rem}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes flip-in{0%{opacity:0;transform:rotateY(-90deg)}to{opacity:1;transform:rotateY(0)}}@keyframes pulse-coral{0%,to{box-shadow:0 0 #e8654a66}50%{box-shadow:0 0 0 14px #e8654a00}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}.anim-fade-up{animation:.5s cubic-bezier(.2,.8,.2,1) both fade-up}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.karaoke-text{display:inline}.karaoke-word{transition:color .18s ease-out,transform .2s ease-out;display:inline-block;position:relative}.karaoke-word.is-pending{color:inherit;opacity:.55}.karaoke-word.is-active{color:var(--coral-deep);text-shadow:0 0;transform:translateY(-2px)scale(1.04)}.karaoke-word.is-active:after{content:"";background:linear-gradient(90deg, var(--coral), var(--gold));border-radius:3px;height:4px;animation:.25s cubic-bezier(.2,.8,.2,1) both karaoke-pop;position:absolute;bottom:-4px;left:0;right:0;box-shadow:0 2px 8px #e8654a66}.karaoke-word.is-sung{color:var(--ink);opacity:1}.karaoke-on-dark .karaoke-word.is-pending{color:#f5ecdc80}.karaoke-on-dark .karaoke-word.is-active{color:#ffd58b}.karaoke-on-dark .karaoke-word.is-active:after{background:linear-gradient(90deg, #ffd58b, var(--coral))}.karaoke-on-dark .karaoke-word.is-sung{color:var(--paper)}@keyframes karaoke-pop{0%{transform-origin:0;opacity:0;transform:scaleX(0)}to{transform-origin:0;opacity:1;transform:scaleX(1)}}.fc-wrap{flex-direction:column;gap:28px;width:100%;max-width:720px;margin:0 auto;animation:.5s cubic-bezier(.2,.8,.2,1) both fade-up;display:flex}.fc-meta{grid-template-columns:auto 1fr auto;align-items:center;gap:24px;display:grid}.fc-counter{align-items:baseline;gap:10px;display:flex}.fc-num{color:var(--ink);font-variant-numeric:tabular-nums;font-size:3.4rem;line-height:.85}.fc-divider{background:var(--ink-muted);width:16px;height:1px;display:inline-block}.fc-total{color:var(--ink-muted);font-size:1rem}.fc-progressbar{background:#1d2b4f14;border-radius:3px;height:6px;position:relative;overflow:hidden}.fc-progressbar-fill{background:linear-gradient(90deg, var(--coral) 0%, var(--gold) 100%);border-radius:3px;transition:width .4s cubic-bezier(.2,.8,.2,1);position:absolute;inset:0 auto 0 0}.fc-mastered{color:var(--ink);flex-direction:column;align-items:flex-end;gap:2px;display:flex}.fc-card{aspect-ratio:3/2;perspective:1600px;cursor:pointer;width:100%;position:relative}.fc-card:focus-visible{outline:none}.fc-card:focus-visible .fc-card-inner{outline:2px solid var(--coral);outline-offset:6px;border-radius:var(--radius-lg)}.fc-card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1);position:relative}.fc-card.is-flipped .fc-card-inner{transform:rotateY(180deg)}.fc-face{backface-visibility:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-deep);background-blend-mode:multiply;background-color:#fbf5e8;background-image:linear-gradient(#fbf5e8 0%,#f5ecdc 100%),repeating-linear-gradient(#0000 0 47px,#1d2b4f0d 47px 48px);background-position:0 0;background-repeat:repeat;background-size:auto;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;border:1px solid #1d2b4f14;flex-direction:column;justify-content:center;padding:40px 48px;display:flex;position:absolute;inset:0}.fc-front{z-index:2}.fc-back{background:var(--ink);color:var(--paper);background-image:radial-gradient(at 30% 20%,#e8654a2e 0,#0000 50%),radial-gradient(at 80% 90%,#d4a6481f 0,#0000 50%);border-color:#f5ecdc14;transform:rotateY(180deg)}.fc-content{flex-direction:column;align-items:flex-start;gap:18px;display:flex}.fc-english{color:var(--ink);font-feature-settings:"ss01" 1, "ss02" 1;letter-spacing:-.02em;font-size:clamp(2rem,5vw,3.4rem);font-style:italic;font-weight:600}.fc-pronunciation{color:var(--ink-muted);border-top:1px dashed #1d2b4f2e;padding:6px 0;font-size:1.1rem}.fc-thai{color:var(--paper);letter-spacing:-.01em;font-size:clamp(1.7rem,4.2vw,2.6rem);font-weight:600;line-height:1.25}.fc-pronunciation-back{color:var(--gold);border-bottom:1px dashed #f5ecdc33;width:100%;padding-bottom:12px;font-size:1rem}.fc-english-small{font-family:var(--font-display);color:#f5ecdcb3;font-size:1rem;font-style:italic}.fc-corner{font-size:.7rem;position:absolute}.fc-corner.top-left{top:20px;left:24px}.fc-corner.top-right{color:var(--ink-muted);font-size:.85rem;top:20px;right:24px}.fc-back .fc-corner.top-right{color:#f5ecdc80}.fc-corner.bottom-center{color:var(--ink-muted);opacity:.6;bottom:16px;left:50%;transform:translate(-50%)}.fc-back .fc-corner.bottom-center{color:#f5ecdc80}.fc-cat{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;background:0 0;border:1px solid;border-radius:999px;padding:4px 10px;font-size:.7rem;font-weight:500}.cat-greeting{color:var(--cat-greeting)}.cat-attendance{color:var(--cat-attendance)}.cat-communication{color:var(--cat-communication)}.cat-question{color:var(--cat-question)}.cat-permission{color:var(--cat-permission)}.cat-apology{color:var(--cat-apology)}.cat-classroom-actions{color:var(--cat-actions)}.cat-instructions{color:var(--cat-instructions)}.cat-praise{color:var(--cat-praise)}.cat-feelings{color:var(--cat-feelings)}.fc-audio{background:var(--ink);color:var(--paper);border-radius:999px;align-items:center;gap:8px;margin-top:6px;padding:10px 16px;font-size:.85rem;font-weight:500;transition:transform .2s,background .2s;display:inline-flex}.fc-audio:hover{background:var(--coral);transform:translateY(-1px)}.fc-audio.is-playing{background:var(--coral);animation:1.4s ease-in-out infinite pulse-coral}.fc-controls{grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;display:grid}.btn-ghost{color:var(--ink);background:#ffffff80;border:1px solid #1d2b4f26;border-radius:999px;justify-self:start;align-items:center;gap:8px;padding:12px 18px;font-size:.95rem;font-weight:500;transition:all .2s;display:inline-flex}.fc-controls .btn-ghost:last-of-type{justify-self:end}.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-1px)}.btn-mastered{background:var(--ink);color:var(--paper);letter-spacing:.01em;white-space:nowrap;border-radius:999px;padding:12px 22px;font-size:.95rem;font-weight:600;transition:all .2s}.btn-mastered:hover{background:var(--ink-soft);transform:translateY(-1px)}.btn-mastered.is-on{background:var(--sage);color:var(--paper)}.btn-mastered.is-on:hover{background:#678a4a}.fc-shortcuts{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-top:8px;display:flex}.btn-link{color:var(--coral-deep);letter-spacing:.01em;border-bottom:1px dashed;padding-bottom:1px;font-size:.9rem;font-weight:500;transition:opacity .2s}.btn-link:hover{opacity:.7}.fc-keys{color:var(--ink-muted)}.fc-keys kbd{font-family:var(--font-mono);color:var(--ink);background:#1d2b4f14;border:1px solid #1d2b4f1a;border-radius:4px;margin:0 1px;padding:2px 6px;font-size:.7rem}@media (width<=720px){.fc-face{padding:28px 28px 36px}.fc-meta{grid-template-columns:1fr 1fr;gap:16px}.fc-progressbar{order:3;grid-column:1/-1}.fc-controls{grid-template-columns:1fr}.fc-controls .btn-ghost,.fc-controls .btn-ghost:last-of-type{justify-content:center;justify-self:stretch}.fc-keys{display:none}}.quiz-wrap{flex-direction:column;gap:24px;width:100%;max-width:720px;margin:0 auto;display:flex}.quiz-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.quiz-modes{background:#1d2b4f0d;border:1px solid #1d2b4f14;border-radius:999px;padding:4px;display:inline-flex}.quiz-mode{color:var(--ink-muted);border-radius:999px;padding:8px 18px;font-size:.85rem;font-weight:500;transition:all .2s}.quiz-mode:hover{color:var(--ink)}.quiz-mode.is-active{background:var(--ink);color:var(--paper);box-shadow:var(--shadow-paper)}.quiz-stats{gap:24px;display:flex}.quiz-stat-num{color:var(--ink);font-variant-numeric:tabular-nums;margin-top:4px;font-size:1.4rem;line-height:1}.quiz-progressbar{grid-template-columns:repeat(10,1fr);gap:4px;display:grid}.quiz-pip{background:#1d2b4f1a;border-radius:2px;height:4px;transition:all .3s}.quiz-pip.done{background:var(--sage)}.quiz-pip.current{background:var(--coral);box-shadow:0 0 0 2px #e8654a33}.quiz-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-lift);background:#fbf5e8;border:1px solid #1d2b4f14;flex-direction:column;gap:24px;padding:36px 40px 32px;display:flex}.quiz-prompt-label{text-align:center;margin:-4px 0 -8px}.quiz-prompt{text-align:center;border-bottom:1px dashed #1d2b4f26;padding:18px 0 8px}.quiz-prompt-en{color:var(--ink);font-size:clamp(1.8rem,4vw,2.6rem);font-style:italic;font-weight:600}.quiz-prompt-th{color:var(--ink);font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:600;line-height:1.3}.quiz-prompt-sub{color:var(--ink-muted);margin-top:8px;font-size:.95rem}.quiz-audio-stage{flex-direction:column;align-items:stretch;gap:18px;display:flex}.quiz-audio-reveal{text-align:center;color:var(--ink);padding:12px 0;font-size:clamp(1.4rem,3vw,2rem);font-style:italic;font-weight:600}.quiz-audio-prompt{border-radius:var(--radius-lg);color:var(--ink-muted);background:#fff6;border:2px dashed #1d2b4f33;justify-content:center;align-items:center;gap:16px;width:100%;padding:24px;font-size:1rem;transition:all .2s;display:flex}.quiz-audio-prompt:hover{border-color:var(--coral);color:var(--coral-deep);background:#e8654a0d}.quiz-audio-icon{background:var(--ink);width:56px;height:56px;color:var(--paper);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;animation:1.6s ease-in-out infinite pulse-coral;display:inline-flex}.quiz-options{grid-template-columns:1fr 1fr;gap:12px;display:grid}.quiz-option{text-align:left;color:var(--ink);background:#ffffffa6;border:1.5px solid #1d2b4f1a;border-radius:10px;justify-content:space-between;align-items:center;gap:8px;min-height:64px;padding:18px 22px;font-size:1.05rem;font-weight:500;line-height:1.35;transition:all .2s;display:flex;position:relative}.quiz-option:hover:not(:disabled){border-color:var(--ink);box-shadow:var(--shadow-paper);background:#fff;transform:translateY(-1px)}.quiz-option:disabled{cursor:default}.quiz-option.is-correct{background:var(--sage);color:var(--paper);border-color:var(--sage)}.quiz-option.is-wrong{background:var(--coral);color:var(--paper);border-color:var(--coral);animation:.4s shake}.quiz-option.is-dim{opacity:.45}.quiz-en-option{font-style:italic;font-weight:600}.quiz-mark{font-size:1.4rem;font-weight:800}.quiz-feedback{background:#ffffffb3;border:1px solid #1d2b4f1a;border-radius:10px;align-items:center;gap:16px;padding:16px 18px;animation:.3s both fade-up;display:flex}.quiz-feedback.is-good{border-color:var(--sage);background:#7a8c5a1f}.quiz-feedback.is-bad{border-color:var(--coral);background:#e8654a1a}.quiz-feedback-icon{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.1rem;font-weight:700;display:inline-flex}.quiz-feedback.is-good .quiz-feedback-icon{background:var(--sage);color:var(--paper)}.quiz-feedback.is-bad .quiz-feedback-icon{background:var(--coral);color:var(--paper)}.quiz-feedback strong{font-weight:600}.quiz-feedback-detail{color:var(--ink-muted);margin-top:2px;font-size:.9rem}.quiz-feedback>div:not(:has(.quiz-feedback-icon)){flex:1}.quiz-next{white-space:nowrap;margin-left:auto}.btn-primary{background:var(--ink);color:var(--paper);border-radius:999px;align-items:center;gap:8px;padding:12px 22px;font-size:.95rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary:hover{background:var(--coral);box-shadow:var(--shadow-paper);transform:translateY(-1px)}.quiz-prev-result{text-align:center;color:var(--ink-muted)}.quiz-finished{text-align:center}.quiz-result{border-radius:var(--radius-lg);box-shadow:var(--shadow-deep);background:#fbf5e8;border:1px solid #1d2b4f14;padding:56px 36px 48px;position:relative;overflow:hidden}.quiz-result:before{content:"";background:radial-gradient(circle,#e8654a26 0%,#0000 70%);border-radius:50%;width:200px;height:200px;position:absolute;top:-40px;right:-40px}.quiz-medal{margin-bottom:8px;font-size:4rem;animation:1s ease-in-out wiggle;display:inline-block}.quiz-result-title{color:var(--ink);margin-bottom:8px;font-size:2.4rem;font-style:italic}.quiz-result-sub{color:var(--ink-muted);margin-bottom:32px}.quiz-score-big{align-items:baseline;gap:8px;margin-bottom:8px;display:inline-flex}.quiz-score-big .display{color:var(--coral);font-size:5rem;line-height:1}.quiz-score-divider{color:var(--ink-muted);font-size:2.5rem}.quiz-score-big .mono{color:var(--ink-muted);font-size:2rem}.quiz-result-pct{color:var(--ink-muted);margin-bottom:32px;font-size:.9rem}.quiz-result-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.quiz-streak{color:var(--coral-deep);margin-top:28px;font-size:.9rem;font-weight:600}@media (width<=640px){.quiz-card{padding:24px 22px}.quiz-options{grid-template-columns:1fr}.quiz-modes{border-radius:var(--radius-lg);background:0 0;border:none;flex-direction:column;gap:6px;width:100%;padding:0}.quiz-mode{background:#ffffff80;border:1px solid #1d2b4f1a}.quiz-feedback{flex-direction:column;align-items:flex-start}.quiz-next{justify-content:center;align-self:stretch;margin:0}}.browse-wrap{flex-direction:column;gap:24px;width:100%;display:flex}.browse-toolbar{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.browse-search{flex:1;align-items:center;min-width:240px;display:flex;position:relative}.browse-search svg{color:var(--ink-muted);pointer-events:none;position:absolute;left:18px}.browse-search input{width:100%;color:var(--ink);background:#fbf5e8;border:1.5px solid #1d2b4f1f;border-radius:999px;padding:14px 18px 14px 46px;font-size:.95rem;transition:all .2s}.browse-search input::placeholder{color:var(--ink-muted)}.browse-search input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 4px #1d2b4f0f}.browse-search-clear{width:24px;height:24px;color:var(--ink-muted);background:#1d2b4f14;border-radius:50%;justify-content:center;align-items:center;font-size:.7rem;transition:all .2s;display:inline-flex;position:absolute;right:14px}.browse-search-clear:hover{background:var(--coral);color:var(--paper)}.browse-toggle{cursor:pointer;background:#fff6;border:1px solid #1d2b4f1a;border-radius:999px;align-items:center;gap:8px;padding:10px 16px;font-size:.9rem;font-weight:500;transition:all .2s;display:inline-flex}.browse-toggle:hover{border-color:var(--ink)}.browse-toggle input{width:16px;height:16px;accent-color:var(--coral)}.browse-cats{flex-wrap:wrap;gap:8px;display:flex}.browse-cat{color:var(--ink);background:#fff6;border:1px solid #1d2b4f1a;border-radius:999px;align-items:center;gap:8px;padding:8px 16px;font-size:.85rem;font-weight:500;transition:all .2s;display:inline-flex}.browse-cat:hover{border-color:var(--ink);transform:translateY(-1px)}.browse-cat.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.browse-cat-count{color:var(--ink-muted);background:#1d2b4f1a;border-radius:999px;padding:1px 7px;font-size:.7rem}.browse-cat.is-active .browse-cat-count{color:var(--paper);background:#f5ecdc2e}.browse-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;display:grid}.browse-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-paper);background:#fbf5e8;border:1px solid #1d2b4f1a;flex-direction:column;gap:10px;padding:22px 22px 18px;transition:all .25s;display:flex;position:relative}.browse-card:before{content:"";background:linear-gradient(90deg,#0000,#1d2b4f26,#0000);border-radius:0 0 3px 3px;height:3px;position:absolute;top:-1px;left:24px;right:24px}.browse-card:hover{box-shadow:var(--shadow-lift);border-color:#1d2b4f33;transform:translateY(-3px)}.browse-card.is-mastered{background:linear-gradient(135deg,#fbf5e8 0%,#7a8c5a14 100%);border-color:#7a8c5a4d}.browse-card.is-mastered:after{content:"✓";background:var(--sage);width:22px;height:22px;color:var(--paper);border-radius:50%;justify-content:center;align-items:center;font-size:.75rem;font-weight:700;display:inline-flex;position:absolute;top:14px;right:14px}.browse-card-head{justify-content:space-between;align-items:center;display:flex}.browse-card-num{color:var(--ink-muted);font-size:.8rem}.browse-card.is-mastered .browse-card-num{visibility:hidden}.browse-card-en{color:var(--ink);letter-spacing:-.01em;margin-top:4px;font-size:1.35rem;font-style:italic;font-weight:600;line-height:1.2}.browse-card-pron{color:var(--ink-muted);border-bottom:1px dashed #1d2b4f1f;padding-bottom:6px;font-size:.85rem}.browse-card-th{color:var(--ink-soft);flex:1;font-size:1rem;font-weight:500;line-height:1.4}.browse-card-foot{justify-content:space-between;align-items:center;margin-top:6px;display:flex}.browse-play{color:var(--ink-muted);background:0 0;border-radius:999px;align-items:center;gap:6px;padding:6px 10px;transition:all .2s;display:inline-flex}.browse-play:hover{color:var(--coral-deep);background:#e8654a14}.browse-play.is-playing{color:var(--coral-deep);background:#e8654a14;animation:1.2s ease-in-out infinite pulse-coral}.browse-master{color:var(--ink-soft);background:#1d2b4f14;border-radius:999px;padding:6px 12px;font-size:.8rem;font-weight:500;transition:all .2s}.browse-master:hover{background:var(--ink);color:var(--paper)}.browse-master.is-on{background:var(--sage);color:var(--paper)}.browse-empty{text-align:center;color:var(--ink-muted);padding:60px 20px}.browse-empty .display{color:var(--ink-muted);font-size:3rem}.mistakes-section{border-top:1px dashed #1d2b4f33;margin-top:32px;padding-top:40px}.mistakes-head{text-align:center;margin-bottom:28px}.mistakes-title{margin:8px 0 6px;font-size:clamp(1.8rem,3.5vw,2.4rem);font-style:italic;font-weight:600}.mistakes-title em{color:var(--coral-deep);font-style:italic;font-weight:800}.mistakes-sub{color:var(--ink-muted);font-size:.95rem}.mistakes-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;display:grid}.mistake-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-paper);background:#fbf5e8;border:1px solid #1d2b4f1a;flex-direction:column;gap:12px;padding:22px 22px 18px;display:flex;position:relative}.mistake-wrong,.mistake-right{flex-direction:column;gap:6px;display:flex}.mistake-badge{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;border-radius:999px;align-self:flex-start;padding:3px 8px;font-size:.65rem;font-weight:600}.mistake-badge.bad{color:var(--coral-deep);background:#e8654a26}.mistake-badge.good{color:#4a5a30;background:#7a8c5a2e}.mistake-text{font-size:1.05rem;font-style:italic;font-weight:600;line-height:1.3}.mistake-wrong .mistake-text{color:var(--coral-deep);-webkit-text-decoration:line-through #e8654a66;text-decoration:line-through #e8654a66;text-decoration-thickness:2px}.mistake-right .mistake-text{color:var(--ink)}.mistake-arrow{color:var(--ink-muted);align-self:center;font-size:1.2rem;line-height:1}.mistake-note{color:var(--ink-muted);border-top:1px dashed #1d2b4f1a;padding-top:10px;font-size:.85rem;line-height:1.45}.mistake-play{align-self:flex-start;margin-top:4px}@media (width<=640px){.browse-toolbar{flex-direction:column;align-items:stretch}.browse-search{min-width:0}.browse-grid,.mistakes-grid{grid-template-columns:1fr}}.app-header{width:100%;max-width:1180px;margin:0 auto;padding:20px 36px 0}.home-link{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);background:#fff6;border:1px solid #1d2b4f14;border-radius:999px;align-items:center;gap:6px;margin-bottom:14px;padding:6px 12px 6px 8px;font-size:.72rem;text-decoration:none;transition:all .2s;display:inline-flex}.home-link:hover{color:var(--paper);background:var(--ink);border-color:var(--ink);transform:translate(-2px)}.brand-link{cursor:pointer;border-radius:12px;flex:1;align-items:flex-start;gap:18px;min-width:0;margin:-4px;padding:4px;text-decoration:none;transition:background .2s;display:flex}.brand-link:hover{background:#ffffff4d}.app-header-inner{border-bottom:1px dashed #1d2b4f33;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:32px;padding-bottom:28px;display:flex}.brand{flex:1;align-items:flex-start;gap:18px;min-width:0;display:flex}.brand-mark{filter:drop-shadow(0 4px 8px #1d2b4f26);flex-shrink:0;margin-top:6px;animation:.6s cubic-bezier(.2,.8,.2,1) both fade-up}.brand-text{flex-direction:column;gap:2px;min-width:0;display:flex}.brand-title{color:var(--ink);letter-spacing:-.025em;margin:4px 0 2px;font-size:clamp(2rem,4.5vw,3.2rem);font-weight:700;line-height:1}.brand-title em{color:var(--coral-deep);background:linear-gradient(120deg, var(--coral-deep), var(--gold));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-style:italic;font-weight:600}.brand-sub{color:var(--ink-muted);margin-top:4px;font-size:.92rem}.progress-meter{background:#ffffff80;border:1px solid #1d2b4f1a;border-radius:999px;flex-shrink:0;align-items:center;gap:14px;padding:10px 18px 10px 12px;animation:.6s cubic-bezier(.2,.8,.2,1) .1s both fade-up;display:flex;position:relative}.progress-ring{flex-shrink:0;display:block}.progress-meter-text{flex-direction:column;gap:0;line-height:1;display:flex}.progress-pct{color:var(--ink);font-variant-numeric:tabular-nums;font-size:1.4rem;line-height:1}.streak-pill{color:var(--coral-deep);background:#e8654a1f;border:1px solid #e8654a40;border-radius:999px;padding:4px 10px;font-size:.85rem;font-weight:600}.app-tabs{scrollbar-width:none;gap:12px;margin-bottom:-1px;padding:22px 0 0;display:flex;overflow-x:auto}.app-tabs::-webkit-scrollbar{display:none}.app-tab{color:var(--ink-muted);background:0 0;border-bottom:3px solid #0000;border-radius:14px 14px 0 0;flex-direction:column;flex-shrink:0;align-items:flex-start;gap:2px;padding:14px 26px 18px;transition:all .2s;display:flex;position:relative}.app-tab:hover{color:var(--ink);background:#ffffff4d}.app-tab.is-active{color:var(--ink);border-bottom-color:var(--coral);background:#fbf5e8d9}.app-tab.is-active:after{content:"";background:var(--coral);border-radius:3px 3px 0 0;height:3px;position:absolute;bottom:-3px;left:20%;right:20%}.app-tab-label{letter-spacing:-.01em;font-size:1.3rem;font-style:italic;font-weight:600}.app-tab-sub{color:var(--ink-muted);font-size:.8rem}.app-main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:40px 36px 60px}.app-main-inner{width:100%}.app-footer{background:#e8d8b84d;border-top:1px dashed #1d2b4f33;padding:24px 36px}.app-footer-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;max-width:1180px;margin:0 auto;display:flex}.footer-meta{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.footer-dot{color:var(--ink-muted)}.footer-reset{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted);border-bottom:1px dashed;padding-bottom:1px;font-size:.7rem;transition:color .2s}.footer-reset:hover{color:var(--coral-deep)}.footer-home{text-decoration:none;transition:color .2s}.footer-home:hover{color:var(--coral-deep)}@media (width<=768px){.app-header{padding:20px 20px 0}.app-header-inner{flex-direction:column;align-items:stretch;gap:16px}.progress-meter{align-self:flex-start}.app-main{padding:24px 20px 40px}.app-footer{padding:20px}.app-footer-inner{text-align:center;flex-direction:column}.app-tab{padding:12px 18px 14px}.app-tab-label{font-size:1.1rem}}