.tc-demo{--tc-bg:#F8F6F0;--tc-card:#FFFFFF;--tc-text:#2C2A25;--tc-text-2:#5A574E;--tc-text-3:#8C887A;--tc-border:#E8E4D9;--tc-input:#FAFAF7;--tc-shadow-sm:0 2px 8px rgba(44,42,37,0.04);--tc-shadow-md:0 8px 24px rgba(44,42,37,0.06);font-family:var(--font-jakarta),"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;background:var(--tc-bg);color:var(--tc-text);border-radius:16px;padding:18px;border:1px solid var(--tc-border);box-shadow:var(--tc-shadow-md);-webkit-font-smoothing:antialiased}.tc-demo,.tc-demo[data-accent=blue]{--accent:#3B82F6;--accent-bg:#EFF6FF;--accent-border:#BFDBFE}.tc-demo[data-accent=sky]{--accent:#0284C7;--accent-bg:#F0F9FF;--accent-border:#BAE6FD}.tc-demo[data-accent=emerald]{--accent:#059669;--accent-bg:#ECFDF5;--accent-border:#A7F3D0}.tc-demo[data-accent=rose]{--accent:#E11D48;--accent-bg:#FFF1F2;--accent-border:#FECDD3}.tc-demo[data-accent=amber]{--accent:#D97706;--accent-bg:#FFFBEB;--accent-border:#FDE68A}.tc-demo[data-accent=cyan]{--accent:#0891B2;--accent-bg:#ECFEFF;--accent-border:#A5F3FC}.tc-demo[data-accent=indigo]{--accent:#4F46E5;--accent-bg:#EEF2FF;--accent-border:#C7D2FE}.tc-demo h2,.tc-demo h3,.tc-demo h4{font-family:Souvenir,Lora,Georgia,serif;font-weight:700;color:var(--tc-text);margin:0;letter-spacing:-.01em}.tc-demo h2{font-size:18px;line-height:1.2}.tc-demo h3{font-size:15px;line-height:1.25}.tc-demo h4{font-size:13px;line-height:1.3}.tc-demo p{margin:0;line-height:1.5;font-size:12px;color:var(--tc-text-2)}.tc-demo strong{font-weight:700;color:var(--tc-text)}.tc-demo em{font-style:italic}.tc-demo .muted{color:var(--tc-text-3);font-size:11px}.tc-demo .secondary{color:var(--tc-text-2);font-size:12px}.tc-demo .subtitle{color:var(--tc-text-2);font-size:11px;line-height:1.4}.tc-demo .section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--tc-text-3);margin:10px 0 6px}.tc-demo .accent-text{color:var(--accent)}.tc-demo .accent-em{color:var(--accent);font-weight:600}.tc-demo .color-blue{color:#3B82F6}.tc-demo .color-rose{color:#E11D48}.tc-demo .color-emerald{color:#059669}.tc-demo .color-amber{color:#D97706}.tc-demo .card{background:var(--tc-card);border:1px solid var(--tc-border);border-radius:10px;padding:10px 12px;box-shadow:var(--tc-shadow-sm);position:relative}.tc-demo .card.accent-left{border-left:3px solid var(--accent);padding-left:11px}.tc-demo .card.accent-bg{background:var(--accent-bg);border-color:var(--accent-border)}.tc-demo .example-box{background:var(--tc-input);border-radius:6px;padding:6px 8px;font-size:11px;color:var(--tc-text-2);line-height:1.45}.tc-demo .highlight-box{background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:8px;padding:8px 10px}.tc-demo .flex{display:flex}.tc-demo .stack{display:flex;flex-direction:column}.tc-demo .between{justify-content:space-between;align-items:center}.tc-demo .items-start{align-items:flex-start}.tc-demo .items-center{align-items:center}.tc-demo .gap-1{gap:4px}.tc-demo .gap-2{gap:6px}.tc-demo .gap-3{gap:8px}.tc-demo .gap-4{gap:12px}.tc-demo .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tc-demo .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.tc-demo .mb-1{margin-bottom:4px}.tc-demo .mb-2{margin-bottom:6px}.tc-demo .mb-3{margin-bottom:10px}.tc-demo .mb-4{margin-bottom:14px}.tc-demo .q-num{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--accent-bg);color:var(--accent);font-size:10px;font-weight:700}.tc-demo .q-text{font-size:12px;color:var(--tc-text);line-height:1.5;margin:0}.tc-demo .word-pill{display:inline-block;background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600}.tc-demo .word-translation{color:var(--accent);font-weight:600;font-size:11px}.tc-demo .speech-row{display:flex;align-items:flex-end;gap:6px;margin-bottom:6px}.tc-demo .speech-row-right{flex-direction:row-reverse}.tc-demo .speech{background:#ECE6D6;border:1px solid #ded7c5;border-radius:10px 10px 10px 2px;padding:6px 10px;font-size:11px;color:var(--tc-text);max-width:85%;line-height:1.4}.tc-demo .speech-right{background:var(--accent-bg);border:1px solid var(--accent-border);color:var(--tc-text);border-radius:10px 10px 2px 10px}.tc-demo .speaker{font-weight:700;color:var(--tc-text-3);letter-spacing:.4px;padding-bottom:2px}.tc-demo .badge,.tc-demo .speaker{font-size:9px;text-transform:uppercase}.tc-demo .badge{display:inline-block;font-weight:600;letter-spacing:.5px;padding:2px 6px;border-radius:4px;background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border)}.tc-demo .badge-easy{background:#ECFDF5;color:#059669;border-color:#A7F3D0}.tc-demo .badge-medium{background:#FFFBEB;color:#D97706;border-color:#FDE68A}.tc-demo .badge-hard{background:#FFF1F2;color:#E11D48;border-color:#FECDD3}.tc-demo .option{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;border:1px solid var(--tc-border);background:var(--tc-card);font-size:11px;color:var(--tc-text-2)}.tc-demo .option.selected{border-color:var(--accent);background:var(--accent-bg);color:var(--tc-text)}.tc-demo .option-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--tc-border);flex-shrink:0}.tc-demo .option.selected .option-dot{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 2px var(--tc-card)}.tc-demo .reveal-btn{display:inline-flex;align-items:center;gap:4px;background:transparent;border:1px dashed var(--accent);color:var(--accent);padding:5px 10px;border-radius:6px;font-size:10px;font-weight:600}.tc-demo .answer-key{background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:8px;padding:8px 10px}.tc-demo .answer-num{font-size:9px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.4px}.tc-demo .answer-correct{font-size:11px;color:var(--tc-text);font-weight:600}.tc-demo .bar-track{height:4px;border-radius:2px;background:var(--tc-border);overflow:hidden}.tc-demo .bar-fill{height:100%;background:var(--accent);border-radius:2px}.tc-demo .input-inline{border:none;border-bottom:1px dashed var(--accent);background:transparent;color:var(--accent);font-size:11px;font-weight:600;font-family:inherit;padding:0 4px;margin:0 2px;min-width:50px}.tc-demo .letter-xl{font-family:Souvenir,serif;font-size:22px;font-weight:700;color:var(--accent);line-height:1}.tc-demo .ai-pill{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:600;background:var(--accent-bg);color:var(--accent);padding:2px 7px;border-radius:999px}