:root{--teal-50: #f0fdfa;--teal-100: #ccfbf1;--teal-200: #99f6e4;--teal-300: #5eead4;--teal-400: #2dd4bf;--teal-500: #14b8a6;--teal-600: #0d9488;--teal-700: #0f766e;--teal-800: #115e59;--teal-900: #134e4a;--amber-400: #fbbf24;--amber-500: #f59e0b;--amber-600: #d97706;--rose-500: #f43f5e;--rose-600: #e11d48;--sky-500: #0ea5e9;--violet-500: #8b5cf6;--green-500: #22c55e;--bg: #f6f8fa;--bg-elevated: #ffffff;--bg-sunken: #eef1f5;--bg-paper: #fdfbf7;--card: #ffffff;--card-hover: #f8fafc;--border: #e2e8f0;--border-strong: #cbd5e1;--text: #0f172a;--text-2: #475569;--text-3: #64748b;--primary: var(--teal-700);--primary-strong: var(--teal-800);--primary-soft: #e6f5f3;--primary-contrast: #ffffff;--accent: var(--amber-600);--accent-soft: #fef3e2;--danger: var(--rose-600);--danger-soft: #ffe9ed;--success: #16a34a;--success-soft: #e9f9ef;--info: #0284c7;--info-soft: #e8f4fc;--shadow-sm: 0 1px 2px rgb(15 23 42 / .05);--shadow-md: 0 2px 8px -1px rgb(15 23 42 / .08), 0 1px 3px rgb(15 23 42 / .05);--shadow-lg: 0 12px 32px -8px rgb(15 23 42 / .14), 0 2px 8px rgb(15 23 42 / .06);--nav-bg: rgb(255 255 255 / .92);--ring: rgb(13 148 136 / .35);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 22px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;--font-serif: "Georgia", "Times New Roman", "Noto Serif TC", "PMingLiU", serif;--font-mono: "SFMono-Regular", "Cascadia Code", Consolas, "Roboto Mono", monospace;--font-phonetic: "Noto Sans", Roboto, "Segoe UI", -apple-system, BlinkMacSystemFont, "Noto Sans Symbols 2", "Noto Sans Symbols", "Arial Unicode MS", Arial, sans-serif;--nav-h: 64px;--bottom-nav-h: 62px;--safe-bottom: env(safe-area-inset-bottom, 0px);color-scheme:light}[data-theme=dark]{--bg: #0b1220;--bg-elevated: #101a2c;--bg-sunken: #080e19;--bg-paper: #101826;--card: #121e33;--card-hover: #16243d;--border: #23324d;--border-strong: #33466a;--text: #e8edf5;--text-2: #a8b6cc;--text-3: #7d8ba3;--primary: var(--teal-400);--primary-strong: var(--teal-300);--primary-soft: rgb(45 212 191 / .12);--primary-contrast: #06211e;--accent: var(--amber-400);--accent-soft: rgb(251 191 36 / .13);--danger: #fb7185;--danger-soft: rgb(251 113 133 / .14);--success: #4ade80;--success-soft: rgb(74 222 128 / .12);--info: #38bdf8;--info-soft: rgb(56 189 248 / .12);--shadow-sm: 0 1px 2px rgb(0 0 0 / .35);--shadow-md: 0 2px 10px -1px rgb(0 0 0 / .4);--shadow-lg: 0 14px 40px -10px rgb(0 0 0 / .55);--nav-bg: rgb(16 26 44 / .92);--ring: rgb(45 212 191 / .4);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior-y:none}h1,h2,h3,h4,h5,p{margin:0}h1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}h2{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}h3{font-size:1rem;font-weight:700}a{color:var(--primary);text-decoration:none}button{font-family:inherit;border:none;background:none;color:inherit;padding:0;cursor:pointer}input,textarea,select{font-family:inherit;font-size:1rem;color:var(--text)}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}::selection{background:var(--primary-soft)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.app-shell{display:flex;min-height:100dvh}.sidebar{display:none}.main-area{flex:1;min-width:0;display:flex;flex-direction:column;padding-bottom:calc(var(--bottom-nav-h) + var(--safe-bottom))}.page{width:100%;max-width:1080px;margin:0 auto;padding:16px 16px 48px;animation:page-in .28s ease both}@keyframes page-in{0%{opacity:0}to{opacity:1}}.page-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 18px}.page-title{display:flex;flex-direction:column;gap:2px}.page-title .subtitle{color:var(--text-3);font-size:.85rem}.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:space-around;background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--border);padding-bottom:var(--safe-bottom);height:calc(var(--bottom-nav-h) + var(--safe-bottom))}.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;font-size:.68rem;font-weight:600;color:var(--text-3);transition:color .2s}.bottom-nav a.active{color:var(--primary)}.bottom-nav a svg{width:23px;height:23px}@media(min-width:900px){.bottom-nav{display:none}.main-area{padding-bottom:0}.sidebar{display:flex;flex-direction:column;gap:4px;width:232px;flex-shrink:0;position:sticky;top:0;height:100dvh;padding:20px 14px;border-right:1px solid var(--border);background:var(--bg-elevated)}.sidebar .brand{display:flex;align-items:center;gap:10px;padding:6px 10px 20px;font-weight:800;font-size:1.05rem;letter-spacing:-.01em}.sidebar .brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--teal-500),var(--teal-700));display:grid;place-items:center;color:#fff;font-weight:800;font-size:.95rem;box-shadow:var(--shadow-md)}.sidebar a.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--radius-md);color:var(--text-2);font-weight:600;font-size:.92rem;transition:background .18s,color .18s}.sidebar a.nav-item:hover{background:var(--bg-sunken);color:var(--text)}.sidebar a.nav-item.active{background:var(--primary-soft);color:var(--primary)}.sidebar a.nav-item svg{width:20px;height:20px}.sidebar .sidebar-footer{margin-top:auto;padding:10px;font-size:.75rem;color:var(--text-3)}.page{padding:28px 32px 64px}}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:18px}.card.interactive{cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}.card.interactive:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);background:var(--card-hover)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--radius-md);font-weight:700;font-size:.95rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s,opacity .2s;user-select:none;-webkit-tap-highlight-color:transparent}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--primary);color:var(--primary-contrast)}.btn.primary:hover:not(:disabled){background:var(--primary-strong)}.btn.accent{background:var(--accent);color:#fff}[data-theme=dark] .btn.accent{color:#241a02}.btn.accent:hover:not(:disabled){filter:brightness(1.06)}.btn.ghost{background:transparent;border:1px solid var(--border-strong);color:var(--text-2)}.btn.ghost:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}.btn.soft{background:var(--primary-soft);color:var(--primary)}.btn.soft:hover:not(:disabled){filter:brightness(.97)}.btn.danger-soft{background:var(--danger-soft);color:var(--danger)}.btn.sm{min-height:36px;padding:0 14px;font-size:.85rem;border-radius:var(--radius-sm)}.btn.lg{min-height:52px;padding:0 28px;font-size:1.05rem;border-radius:var(--radius-lg)}.btn.icon-only{width:44px;padding:0}.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:700;background:var(--bg-sunken);color:var(--text-2);white-space:nowrap}.chip.teal{background:var(--primary-soft);color:var(--primary)}.chip.amber{background:var(--accent-soft);color:var(--accent)}.chip.rose{background:var(--danger-soft);color:var(--danger)}.chip.green{background:var(--success-soft);color:var(--success)}.chip.info{background:var(--info-soft);color:var(--info)}.input,textarea.input{width:100%;min-height:44px;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--bg-elevated);transition:border-color .2s,box-shadow .2s}.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}.seg{display:inline-flex;background:var(--bg-sunken);border-radius:var(--radius-md);padding:3px;gap:2px}.seg button{min-height:38px;padding:0 14px;border-radius:9px;font-weight:600;font-size:.85rem;color:var(--text-3);cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}.seg button.active{background:var(--card);color:var(--text);box-shadow:var(--shadow-sm)}.progress-track{height:8px;border-radius:999px;background:var(--bg-sunken);overflow:hidden}.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--teal-500),var(--teal-400));transition:width .5s cubic-bezier(.22,1,.36,1)}.grid{display:grid;gap:14px}@media(min-width:640px){.grid.cols-2{grid-template-columns:1fr 1fr}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-4{grid-template-columns:repeat(4,1fr)}}.muted{color:var(--text-3);font-size:.85rem}.divider{height:1px;background:var(--border);border:none;margin:14px 0}.modal-backdrop{position:fixed;inset:0;z-index:100;background:#0208148c;backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;animation:fade-in .2s ease}@media(min-width:640px){.modal-backdrop{align-items:center}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.modal{width:100%;max-width:480px;max-height:86dvh;overflow-y:auto;background:var(--bg-elevated);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:22px 20px calc(22px + var(--safe-bottom));animation:slide-up .28s cubic-bezier(.22,1,.36,1)}@media(min-width:640px){.modal{border-radius:var(--radius-xl);padding:26px;box-shadow:var(--shadow-lg)}}@keyframes slide-up{0%{transform:translateY(28px);opacity:.6}to{transform:none;opacity:1}}.study-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:28px 22px;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}.study-word{font-size:2.1rem;font-weight:800;letter-spacing:-.02em}.ipa,.phonetic{font-family:var(--font-phonetic);font-variant-ligatures:none;letter-spacing:0}.ipa{color:var(--text-3);font-size:1.02rem}.reader{background:var(--bg-paper);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 20px;font-family:var(--font-serif);font-size:1.05rem;line-height:1.85}@media(min-width:900px){.reader{padding:36px 40px}}.reader h3{font-family:var(--font-sans);margin-bottom:12px}.reader p{margin-bottom:1em;text-align:justify}.collectable-word{display:inline;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;line-height:inherit;letter-spacing:inherit;text-align:inherit;cursor:pointer;touch-action:manipulation;transition:background .15s,box-shadow .15s}.collectable-word:hover{background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)}.collectable-word:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}.reader.collect-mode{cursor:default}.reader.collect-mode .collectable-word{border-bottom:1px dotted var(--border-strong)}.auto-card-status{min-height:118px}.auto-card-loading,.auto-card-error,.auto-card-preview{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);padding:14px}.auto-card-loading-title{display:flex;align-items:center;gap:8px;margin-bottom:4px;color:var(--primary);font-size:.9rem}.auto-card-loading>p{font-size:.76rem}.auto-card-spinner{animation:auto-card-spin .85s linear infinite}@keyframes auto-card-spin{to{transform:rotate(360deg)}}.auto-card-skeleton{display:grid;gap:7px;margin-top:12px}.auto-card-skeleton span{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--bg-sunken) 20%,var(--border) 45%,var(--bg-sunken) 70%);background-size:220% 100%;animation:auto-card-shimmer 1.25s ease-in-out infinite}.auto-card-skeleton span:nth-child(1){width:58%}.auto-card-skeleton span:nth-child(2){width:91%}.auto-card-skeleton span:nth-child(3){width:74%}@keyframes auto-card-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.auto-card-ready-banner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:8px;color:var(--success);font-size:.78rem;font-weight:700}.auto-card-ready-banner>span:first-child{display:inline-flex;align-items:center;gap:5px}.auto-card-preview{background:var(--bg-sunken)}.auto-card-preview .chip{background:var(--card)}.auto-card-error{display:grid;grid-template-columns:22px 1fr;gap:9px;border-color:color-mix(in srgb,var(--danger) 32%,var(--border));background:var(--danger-soft);color:var(--danger)}.auto-card-error strong{font-size:.86rem}.auto-card-error p{margin:3px 0 9px;color:var(--text-2);font-size:.78rem}.auto-card-privacy-note{margin-top:9px;font-size:.68rem;line-height:1.45}.auto-card-inline-success,.auto-card-inline-error{display:flex;align-items:center;gap:5px;margin-top:8px;font-size:.75rem;font-weight:700}.auto-card-inline-success{color:var(--success)}.auto-card-inline-error{color:var(--danger)}.diff-ok{color:var(--success);font-weight:600}.diff-bad{color:var(--danger);font-weight:700;text-decoration:line-through;text-decoration-thickness:1.5px}.diff-missing{color:var(--accent);font-weight:700;border-bottom:2px dotted var(--accent)}.rec-pulse{position:relative}.rec-pulse:before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--danger);animation:rec-ring 1.4s ease-out infinite}@keyframes rec-ring{0%{transform:scale(.85);opacity:.9}to{transform:scale(1.35);opacity:0}}.ph-good{color:var(--success)}.ph-mid{color:var(--accent)}.ph-bad{color:var(--danger)}.pron-phoneme-token{display:inline-flex;align-items:center;min-height:31px;padding:4px 9px;border-radius:8px;font-size:.95rem;font-weight:700}.pron-phoneme-token.correct{background:var(--success-soft);color:var(--success)}.pron-phoneme-token.needs-work{background:var(--danger-soft);color:var(--danger)}button.pron-phoneme-token{border:1px solid color-mix(in srgb,var(--danger) 34%,transparent);cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}button.pron-phoneme-token:hover{border-color:var(--danger);box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 12%,transparent)}button.pron-phoneme-token:focus-visible{outline:3px solid var(--ring);outline-offset:2px}.pronunciation-coach{margin-top:4px;padding-top:12px;border-top:1px solid var(--border)}.pronunciation-coach-toggle{width:100%;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:8px;border-radius:var(--radius-md);color:var(--text);text-align:left;cursor:pointer;transition:background .18s ease,color .18s ease}.pronunciation-coach-toggle:hover{background:var(--primary-soft);color:var(--primary)}.pronunciation-coach-toggle:focus-visible{outline:3px solid var(--ring);outline-offset:2px}.pronunciation-coach-toggle>span:nth-child(2){min-width:0}.pronunciation-coach-toggle strong,.pronunciation-coach-toggle small{display:block}.pronunciation-coach-toggle strong{font-size:.83rem}.pronunciation-coach-toggle small{margin-top:1px;color:var(--text-3);font-size:.7rem}.pronunciation-coach-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:var(--primary-soft);color:var(--primary)}.pronunciation-coach-body{display:grid;gap:10px;margin-top:10px;animation:fade-in .18s ease-out}.speaking-articulation-warmup{padding:10px}.speaking-articulation-warmup .pronunciation-coach-body{padding:0 8px 8px}.phoneme-picker{display:flex;gap:6px;max-width:100%;padding:2px 1px 5px;overflow-x:auto;scrollbar-width:thin}.phoneme-picker-button{min-width:40px;height:38px;flex:0 0 auto;border:1px solid var(--border-strong);border-radius:10px;background:var(--card);color:var(--text-2);font-size:1rem;font-weight:700;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}.phoneme-picker-button:hover{border-color:var(--primary);color:var(--primary)}.phoneme-picker-button.active{border-color:var(--primary);background:var(--primary);color:var(--primary-contrast)}.phoneme-picker-button:focus-visible{outline:3px solid var(--ring);outline-offset:2px}.articulation-trainer{--articulation-skin-1: #f8d5bf;--articulation-skin-2: #e9a98e;--articulation-cavity: #63263a;--articulation-nasal: #bd6f79;--articulation-tongue: #eb6680;--articulation-tongue-edge: #aa3858;--articulation-anatomy-line: #843f4f;--articulation-air: #0b7f8c;--articulation-voice: #c47b09;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);overflow:hidden}[data-theme=dark] .articulation-trainer{--articulation-skin-1: #70443d;--articulation-skin-2: #4d2e31;--articulation-cavity: #281827;--articulation-nasal: #744653;--articulation-tongue: #d25a78;--articulation-tongue-edge: #f195aa;--articulation-anatomy-line: #cf8795;--articulation-air: #45c4cf;--articulation-voice: #f4b63f}.articulation-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;padding:12px 14px;border-bottom:1px solid var(--border)}.articulation-symbol{color:var(--text);font-size:1.35rem;font-weight:800}.articulation-example{margin-left:8px;font-size:.8rem}.articulation-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.articulation-tags .chip{font-size:.66rem}.articulation-stage{position:relative;background:radial-gradient(circle at 74% 16%,rgb(255 255 255 / .55),transparent 26%),var(--bg-sunken);border-bottom:1px solid var(--border)}[data-theme=dark] .articulation-stage{background:radial-gradient(circle at 74% 16%,rgb(255 255 255 / .06),transparent 28%),var(--bg-sunken)}.articulation-svg{display:block;width:100%;height:auto;max-height:300px;min-height:190px}.articulation-head{stroke:var(--articulation-anatomy-line);stroke-width:2}.articulation-nasal{fill:var(--articulation-nasal);opacity:.55;stroke:var(--articulation-anatomy-line);stroke-width:1.5}.articulation-mouth-cavity{fill:var(--articulation-cavity);opacity:.92}.articulation-palate,.articulation-throat,.articulation-velum{fill:none;stroke:var(--articulation-anatomy-line);stroke-linecap:round;stroke-linejoin:round}.articulation-palate{stroke-width:7}.articulation-throat{stroke-width:5}.articulation-velum{stroke-width:8;transition:d .18s ease-out}.articulation-teeth{fill:#fffdf4;stroke:#b88e83;stroke-width:1.3}[data-theme=dark] .articulation-teeth{fill:#e8e4d8;stroke:#a98582}.articulation-tongue{fill:var(--articulation-tongue);stroke:var(--articulation-tongue-edge);stroke-width:2.5;stroke-linejoin:round;filter:drop-shadow(0 2px 2px rgb(56 15 31 / .22))}.articulation-lip{fill:#c74d68;stroke:#8f304a;stroke-width:1.6}[data-theme=dark] .articulation-lip{fill:#d35f79;stroke:#f08ca1}.articulation-airflow{fill:none;color:var(--articulation-air);stroke:var(--articulation-air);stroke-width:4;stroke-linecap:round;stroke-dasharray:8 8;opacity:.16}.articulation-airflow.nasal{stroke-width:4.5}.articulation-airflow.lateral,.articulation-airflow.lateral-secondary{stroke-width:3.5}.articulation-airflow.active{opacity:.95}.articulation-stage.is-playing .articulation-airflow.active{animation:articulation-air .65s linear infinite}@keyframes articulation-air{to{stroke-dashoffset:-32}}.articulation-focus circle:first-child{fill:color-mix(in srgb,var(--accent) 18%,transparent);stroke:var(--accent);stroke-width:1.5;opacity:.22}.articulation-focus circle:last-child{fill:var(--accent);opacity:.25}.articulation-focus.active circle{opacity:.95}.articulation-stage.is-playing .articulation-focus.active circle:first-child{transform-origin:center;animation:articulation-focus 1s ease-out infinite}@keyframes articulation-focus{0%,to{transform:scale(.75);opacity:.9}60%{transform:scale(1.3);opacity:.28}}.articulation-voice{fill:none;stroke:var(--articulation-voice);stroke-width:3;stroke-linecap:round;opacity:.18}.articulation-voice.active{opacity:1}.articulation-stage.is-playing .articulation-voice.active{transform-origin:57px 143px;animation:articulation-voice .36s ease-in-out infinite alternate}@keyframes articulation-voice{0%{transform:scale(.92);opacity:.55}to{transform:scale(1.08);opacity:1}}.articulation-stage-label{position:absolute;left:10px;right:10px;bottom:8px;display:flex;justify-content:center;flex-wrap:wrap;gap:5px 12px;padding:5px 9px;border:1px solid rgb(255 255 255 / .52);border-radius:999px;background:#ffffffc7;color:#42242c;font-size:.63rem;font-weight:700;backdrop-filter:blur(5px)}[data-theme=dark] .articulation-stage-label{border-color:#ffffff1a;background:#111827c7;color:#f5e8eb}.articulation-key{width:7px;height:7px;margin-right:-8px;border-radius:50%;align-self:center}.tongue-key{background:var(--articulation-tongue)}.air-key{background:var(--articulation-air)}.voice-key{background:var(--articulation-voice)}.articulation-transport{padding:12px 14px 10px}.articulation-actions{display:flex;align-items:center;flex-wrap:wrap;gap:7px}.articulation-speed{margin-left:auto}.articulation-speed button{min-height:32px;padding:0 10px;font-size:.72rem}.articulation-scrubber{width:100%;height:20px;margin:8px 0 0;accent-color:var(--primary);cursor:pointer}.articulation-scrubber:focus-visible{outline:3px solid var(--ring);outline-offset:2px}.articulation-phase{color:var(--text-2);font-size:.72rem;font-weight:700;text-align:center}.articulation-motion-note{margin-top:6px;font-size:.68rem;text-align:center}.articulation-cues{display:grid;gap:0;margin:0;padding:0 14px 10px;list-style:none}.articulation-cues li{display:grid;grid-template-columns:24px 1fr;gap:9px;padding:9px 0;border-top:1px solid var(--border)}.articulation-cues li>span{width:23px;height:23px;display:grid;place-items:center;border-radius:8px;background:var(--primary-soft);color:var(--primary);font-size:.7rem;font-weight:800}.articulation-cues strong{display:block;margin-bottom:1px;font-size:.75rem}.articulation-cues p{color:var(--text-3);font-size:.72rem;line-height:1.45}.articulation-trainer.compact .articulation-heading{padding-block:10px}.articulation-trainer.compact .articulation-svg{max-height:260px}@media(max-width:420px){.articulation-heading{align-items:flex-start}.articulation-tags{justify-content:flex-start}.articulation-actions .btn{padding-inline:11px}.articulation-speed{width:100%;margin-left:0}.articulation-speed button{flex:1}.articulation-stage-label{gap:4px 10px}}.score-ring-label{font-size:1.9rem;font-weight:800;letter-spacing:-.03em}.heatmap-cell{rx:2.5px;transition:opacity .15s}.heatmap-cell:hover{opacity:.75}.table-wrap{overflow-x:auto}table.data{width:100%;border-collapse:collapse;font-size:.9rem}table.data th{text-align:left;color:var(--text-3);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--border)}table.data td{padding:10px;border-bottom:1px solid var(--border)}@media(min-width:900px){::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;border:2px solid var(--bg)}::-webkit-scrollbar-track{background:transparent}}