/* ============================================================
   REELS STYLES
   Reel-specific styles and templates
   ============================================================ */

.reel-tag{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:var(--font-size-xs);
  letter-spacing:0.1em; text-transform:uppercase; padding:var(--space-2) var(--space-3); border-radius:var(--radius-full);
  margin-bottom:var(--space-6); border:1px solid currentColor;
}
.reel-headline{
  font-family:var(--font-family-serif); font-weight:var(--font-weight-bold); font-size:var(--font-size-6xl); line-height:var(--line-height-tight);
  letter-spacing:var(--letter-spacing-tight); margin:0 0 var(--space-6); max-width:9.5ch;
}
.reel-body{
  font-family:var(--font-family-sans); font-size:var(--font-size-lg); line-height:var(--line-height-relaxed); color:var(--color-text-secondary);
  max-width:52ch; font-weight:var(--font-weight-regular);
}
.reel-index{
  position:absolute; bottom:var(--space-8); left:46px; font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs); color:var(--color-text-tertiary); letter-spacing:0.06em;
}

.reel.skeleton .sk-line{ height:var(--space-4); border-radius:var(--radius-sm); background:linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-elevated) 50%, var(--color-bg-secondary) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; margin-bottom:var(--space-3); }
.sk-headline{ height:44px; width:70%; margin-bottom:var(--space-6); border-radius:var(--radius-md); }
.sk-body{ width:100%; }
.sk-body.short{ width:60%; }

/* User data reels loading skeleton */
.reels-loading {
  padding: var(--space-8) 0;
  text-align: center;
}
.loading-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.skeleton-card {
  height: 120px;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-elevated) 50%, var(--color-bg-secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.loading-text {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin: 0;
}
.completion-text {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0;
  padding: var(--space-4);
}

/* Per-reel AI explanation */
.reel-ai-actions { margin-top: var(--space-6); }
.reel-ai-explanation {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-brand-primary) 25%, var(--color-border));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-brand-subtle) 68%, transparent), var(--color-bg-secondary));
  animation: reel-explanation-in 220ms var(--ease-out);
}
.reel-ai-explanation-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-3);
  color: var(--color-brand-primary);
  font: 600 var(--font-size-sm)/1 var(--font-family-sans);
}
.reel-ai-explanation-copy {
  white-space: pre-wrap;
  color: var(--color-text-secondary);
  font: var(--font-size-base)/var(--line-height-relaxed) var(--font-family-sans);
}
.reel-ai-error { margin: 0; color: var(--color-danger); font-size: var(--font-size-sm); }
.reel-ai-loading {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 1.4rem;
  margin: var(--space-2) 0;
}
.reel-ai-loading span,
.reel-loading-mark span {
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 0.1rem;
  background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
  transform: rotate(45deg);
  animation: reel-loading-dance 1.25s var(--ease-in-out) infinite;
}
.reel-ai-loading span:nth-child(2), .reel-loading-mark span:nth-child(2) { animation-delay: 0.13s; }
.reel-ai-loading span:nth-child(3), .reel-loading-mark span:nth-child(3) { animation-delay: 0.26s; }
.reel-ai-loading-copy { margin: 0; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }

/* Reel generation placeholder */
.reel.skeleton {
  min-height: 22rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-brand-primary) 15%, var(--color-border));
  background: linear-gradient(145deg, var(--color-bg-secondary), var(--color-bg));
}
.reel-loading-card { padding-top: clamp(2rem, 7vw, 4rem); }
.reel-loading-mark {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  height: 2.2rem;
  margin-bottom: var(--space-5);
}
.reel-loading-mark span { width: 0.65rem; height: 0.65rem; box-shadow: 0 0.35rem 1.2rem color-mix(in srgb, var(--color-brand-primary) 30%, transparent); }
.reel-loading-kicker {
  margin: 0 0 var(--space-5);
  color: var(--color-brand-primary);
  font: 600 var(--font-size-xs)/1 var(--font-family-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.reel.skeleton .sk-line { animation: reel-shimmer 1.5s ease-in-out infinite; }
.reel-loading-progress {
  height: 0.25rem;
  margin: var(--space-6) 0 var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
}
.reel-loading-progress span {
  display: block;
  width: 35%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-secondary));
  animation: reel-loading-progress 1.7s var(--ease-in-out) infinite;
}
.reel-loading-card .loading-message { margin: 0; text-align: left; font-size: var(--font-size-sm); }

@keyframes reel-explanation-in { from { opacity: 0; transform: translateY(-0.35rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes reel-loading-dance { 0%, 60%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.45; } 30% { transform: rotate(45deg) translateY(-0.45rem); opacity: 1; } }
@keyframes reel-loading-progress { from { transform: translateX(-120%); } to { transform: translateX(390%); } }
@keyframes reel-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .reel-ai-loading span, .reel-loading-mark span, .reel-loading-progress span, .reel.skeleton .sk-line { animation: none; }
}

.reel.error .reel-headline{ color:var(--color-danger); }
.retry-btn{
  margin-top:var(--space-5); background:none; border:1px solid var(--color-brand-primary); color:var(--color-brand-primary);
  font-family:'JetBrains Mono',monospace; font-size:var(--font-size-xs); padding:var(--space-2) var(--space-4); border-radius:var(--radius-md);
  cursor:pointer; letter-spacing:0.04em;
}
.retry-btn:hover{ background:var(--color-brand-subtle); }

.reel.completed-msg .reel-headline{ color:var(--color-success); }

/* ----- QUIZ REEL ----- */
.quiz-card .reel-headline{ font-size:var(--font-size-3xl); max-width:none; }
.quiz-options{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-2); }
.quiz-option{
  display:flex; align-items:center; gap:var(--space-3); text-align:left; width:100%;
  padding:var(--space-4) var(--space-4); border-radius:var(--radius-lg); border:1px solid var(--color-border, #333);
  background:transparent; color:inherit; font-family:var(--font-family-sans); font-size:var(--font-size-base);
  cursor:pointer; transition:background var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
}
.quiz-option:hover:not(:disabled){ background:rgba(255,255,255,0.05); }
.quiz-option:disabled{ cursor:default; }
.quiz-option-letter{
  font-family:'JetBrains Mono',monospace; font-size:var(--font-size-xs); font-weight:var(--font-weight-bold);
  width:22px; height:22px; border-radius:var(--radius-full); border:1px solid currentColor;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.quiz-option.quiz-correct{ border-color:#4fb8a8; background:rgba(79,184,168,0.12); }
.quiz-option.quiz-wrong{ border-color:#d1495b; background:rgba(209,73,91,0.12); }
.quiz-feedback{
  margin-top:var(--space-4); font-family:var(--font-family-sans); font-size:var(--font-size-sm); line-height:var(--line-height-relaxed);
  color:var(--color-text-secondary);
}
.quiz-feedback-correct{ color:#4fb8a8; }
.quiz-feedback-wrong{ color:#d1495b; }
.quiz-feedback-hint{ color:#e8a33d; }

/* ----- CODE VISUALIZATION REEL ----- */
.reel.code-viz .code-block{
  background:var(--color-bg-elevated); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-4); margin:var(--space-4) 0; font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-sm); line-height:var(--line-height-relaxed); overflow-x:auto; position:relative;
}
.reel.code-viz .code-block::before{
  content:'CODE'; position:absolute; top:var(--space-2); right:var(--space-3);
  font-size:var(--font-size-xs); color:var(--color-text-tertiary); letter-spacing:0.1em;
}
.reel.code-viz .code-line{ display:block; padding:var(--space-1) 0; }
.reel.code-viz .code-line.highlight{ background:rgba(232,163,61,0.15); border-radius:var(--radius-sm); padding:var(--space-1) var(--space-2); margin:0 calc(-1 * var(--space-2)); }
.reel.code-viz .code-comment{ color:var(--color-text-tertiary); font-style:italic; }
.reel.code-viz .code-keyword{ color:var(--color-brand-primary); }
.reel.code-viz .code-string{ color:var(--color-success); }
.reel.code-viz .code-function{ color:var(--color-warning); }

/* ----- INTERACTIVE CALCULATION REEL ----- */
.reel.calc-viz .calc-container{
  background:var(--color-bg-secondary); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-5); margin:var(--space-4) 0;
}
.reel.calc-viz .calc-input-group{ display:flex; gap:var(--space-3); margin-bottom:var(--space-3); flex-wrap:wrap; }
.reel.calc-viz .calc-input{
  flex:1; min-width:120px; background:var(--color-bg-elevated); border:1px solid var(--color-border);
  border-radius:var(--radius-md); color:var(--color-text-primary); font-family:var(--font-family-sans);
  font-size:var(--font-size-base); padding:var(--space-3) var(--space-3); outline:none; transition:border-color var(--duration-normal) var(--ease-out);
}
.reel.calc-viz .calc-input:focus{ border-color:var(--color-warning); }
.reel.calc-viz .calc-btn{
  background:var(--color-warning); border:none; border-radius:var(--radius-md); padding:var(--space-3) var(--space-5);
  color:#1c1305; font-weight:var(--font-weight-semibold); cursor:pointer; font-size:var(--font-size-base);
  transition:transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.reel.calc-viz .calc-btn:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(232,163,61,0.25); }
.reel.calc-viz .calc-result{
  background:var(--color-success-subtle); border:1px solid var(--color-success); border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-4); margin-top:var(--space-3); font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-base); color:var(--color-success); display:none;
}
.reel.calc-viz .calc-result.show{ display:block; animation:fadeUp var(--duration-normal) var(--ease-out); }

/* ----- MYTH VS FACT REEL ----- */
.reel.myth-fact .myth-box::before{
  content:'❌ MYTH'; position:absolute; top:-10px; left:var(--space-3);
  background:var(--color-danger); color:#fff; font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs); letter-spacing:0.1em; padding:var(--space-1) var(--space-3); border-radius:var(--radius-full);
}
.reel.myth-fact .fact-box::before{
  content:'✅ FACT'; position:absolute; top:-10px; left:var(--space-3);
  background:var(--color-success); color:var(--color-bg-primary); font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs); letter-spacing:0.1em; padding:var(--space-1) var(--space-3); border-radius:var(--radius-full);
}
/* ----- SIMULATION REEL ----- */
.reel.simulation .sim-container{
  background:var(--color-bg-secondary); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-5); margin:var(--space-4) 0;
}
.reel.simulation .sim-visual{
  background:var(--color-bg-elevated); border-radius:var(--radius-md); height:180px; margin-bottom:var(--space-4);
  display:flex; align-items:center; justify-content:center; position:relative;
  overflow:hidden;
}
.reel.simulation .sim-element{
  position:absolute; transition:all var(--duration-normal) var(--ease-out);
}
.reel.simulation .sim-controls{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.reel.simulation .sim-slider{
  flex:1; min-width:100px; -webkit-appearance:none; appearance:none;
  height:var(--space-2); background:var(--color-border); border-radius:var(--radius-sm); outline:none;
}
.reel.simulation .sim-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:var(--space-5); height:var(--space-5);
  background:var(--color-warning); border-radius:var(--radius-full); cursor:pointer;
}
.reel.simulation .sim-slider::-moz-range-thumb{
  width:var(--space-5); height:var(--space-5); background:var(--color-warning); border-radius:var(--radius-full); cursor:pointer; border:none;
}
.reel.simulation .sim-btn{
  background:var(--color-brand-primary); border:none; border-radius:var(--radius-md); padding:var(--space-2) var(--space-4);
  color:#fff; font-weight:var(--font-weight-semibold); cursor:pointer; font-size:var(--font-size-sm);
  transition:transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.reel.simulation .sim-btn:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(148,130,201,0.25); }
.reel.simulation .sim-output{
  margin-top:var(--space-3); font-family:'JetBrains Mono',monospace; font-size:var(--font-size-sm);
  color:var(--color-success); text-align:center;
}

/* ----- CASE STUDY REEL ----- */
.reel.case-study .case-container{ margin:var(--space-4) 0; }
.reel.case-study .case-header{
  display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3);
}
.reel.case-study .case-company{
  background:var(--color-warning); color:var(--color-bg-primary); padding:var(--space-1) var(--space-3); border-radius:var(--radius-full);
  font-family:'JetBrains Mono',monospace; font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold);
}
.reel.case-study .case-industry{
  background:var(--color-bg-secondary); border:1px solid var(--color-border); padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full); font-family:'JetBrains Mono',monospace; font-size:var(--font-size-xs); color:var(--color-text-secondary);
}
.reel.case-study .case-section{
  background:var(--color-bg-secondary); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-4); margin-bottom:var(--space-3);
}
.reel.case-study .case-section:last-child{ margin-bottom:0; }
.reel.case-study .case-section-title{
  font-family:'JetBrains Mono',monospace; font-size:var(--font-size-xs); letter-spacing:0.1em;
  text-transform:uppercase; color:var(--color-warning); margin-bottom:var(--space-2);
}
.reel.case-study .case-content{
  font-size:var(--font-size-sm); line-height:var(--line-height-relaxed); color:var(--color-text-secondary);
}
.reel.case-study .case-key-takeaway{
  background:var(--color-warning-subtle); border-left:3px solid var(--color-warning);
  padding:var(--space-3) var(--space-4); margin-top:var(--space-3); font-size:var(--font-size-sm); line-height:var(--line-height-normal);
  color:var(--color-text-primary); font-style:italic;
}

/* ----- NEW REEL TEMPLATES ----- */
/* 1. HOOK_REEL */
.reel.hook{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.reel.hook .hook-headline{
  font-family:var(--font-family-serif);
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-7xl);
  line-height:var(--line-height-tight);
  margin:0 0 var(--space-6);
  max-width:12ch;
  letter-spacing:var(--letter-spacing-tight);
}
.reel.hook .hook-sub{
  font-family:var(--font-family-sans);
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
  margin-bottom:var(--space-8);
}
.reel.hook .tap-continue{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-warning);
  animation:pulse var(--duration-slow) infinite;
}

/* TAP_REVEAL_CARD */
.reel.tap-reveal{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.reel.tap-reveal .tap-headline{
  font-family:var(--font-family-serif);
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-5xl);
  line-height:var(--line-height-normal);
  margin:0 0 var(--space-8);
  max-width:20ch;
  letter-spacing:var(--letter-spacing-tight);
}
.reel.tap-reveal .tap-hidden{
  position:relative;
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-8);
  margin:0 0 var(--space-6);
  overflow:hidden;
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.reel.tap-reveal .tap-blur{
  position:absolute;
  inset:0;
  background:var(--color-bg);
  backdrop-filter:blur(8px);
  transition:opacity var(--duration-slow) var(--ease-out);
}
.reel.tap-reveal .tap-hidden.revealed .tap-blur{
  opacity:0;
  pointer-events:none;
}
.reel.tap-reveal .tap-content{
  font-family:var(--font-family-sans);
  font-size:var(--font-size-lg);
  line-height:var(--line-height-relaxed);
  color:var(--color-text-primary);
  position:relative;
  z-index:1;
  opacity:0;
  transition:opacity var(--duration-slow) var(--ease-out) var(--duration-normal);
}
.reel.tap-reveal .tap-hidden.revealed .tap-content{
  opacity:1;
}
.reel.tap-reveal .tap-context{
  font-family:var(--font-family-sans);
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
  margin-bottom:var(--space-4);
  max-width:40ch;
}
.reel.tap-reveal .tap-hint{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-warning);
  animation:pulse var(--duration-slow) infinite;
}

/* GUESS_FIRST_CARD */
.reel.guess-first{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.reel.guess-first .guess-question{
  font-family:var(--font-family-sans);
  font-size:var(--font-size-lg);
  line-height:var(--line-height-relaxed);
  margin:0 0 var(--space-6);
  max-width:40ch;
}
.reel.guess-first .guess-input{
  width:100%;
  max-width:320px;
  padding:var(--space-4);
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  color:var(--color-text-primary);
  font-family:var(--font-family-sans);
  font-size:var(--font-size-base);
  margin-bottom:var(--space-4);
  text-align:center;
}
.reel.guess-first .guess-input:focus{
  outline:none;
  border-color:var(--color-warning);
}
.reel.guess-first .guess-reveal{
  padding:var(--space-3) var(--space-8);
  background:var(--color-warning);
  border:none;
  border-radius:var(--radius-md);
  color:#13141b;
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-semibold);
  cursor:pointer;
  transition:transform var(--duration-normal) var(--ease-out);
}
.reel.guess-first .guess-reveal:hover{
  transform:scale(1.05);
}
.reel.guess-first .guess-answer{
  display:none;
  margin-top:var(--space-6);
  padding:var(--space-6);
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  animation:fadeUp var(--duration-normal) var(--ease-out);
}
.reel.guess-first .guess-answer.show{
  display:block;
}
.reel.guess-first .answer-text{
  font-family:var(--font-family-serif);
  font-size:var(--font-size-2xl);
  font-weight:var(--font-weight-semibold);
  color:var(--color-success);
  margin:0 0 var(--space-3);
}
.reel.guess-first .answer-explanation{
  font-family:var(--font-family-sans);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-relaxed);
  color:var(--color-text-secondary);
}

/* DECISION_CARD */
.reel.decision{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.reel.decision .decision-question{
  font-family:var(--font-family-sans);
  font-size:var(--font-size-lg);
  line-height:var(--line-height-relaxed);
  margin:0 0 var(--space-6);
  max-width:40ch;
}
.reel.decision .decision-branches{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  justify-content:center;
  margin-bottom:var(--space-4);
}
.reel.decision .decision-branch-btn{
  padding:var(--space-3) var(--space-6);
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  color:var(--color-text-primary);
  font-family:var(--font-family-sans);
  font-size:var(--font-size-sm);
  cursor:pointer;
  transition:all var(--duration-normal) var(--ease-out);
}
.reel.decision .decision-branch-btn:hover{
  border-color:var(--color-warning);
  transform:translateY(-2px);
}
.reel.decision .decision-branch-btn.selected{
  background:var(--color-warning);
  color:#13141b;
  border-color:var(--color-warning);
}
.reel.decision .decision-feedback{
  display:none;
  margin-top:var(--space-4);
  padding:var(--space-3) var(--space-5);
  background:var(--color-bg-secondary);
  border-radius:var(--radius-md);
  font-family:var(--font-family-sans);
  font-size:var(--font-size-sm);
  color:var(--color-success);
}
.reel.decision .decision-feedback.show{
  display:block;
  animation:fadeUp var(--duration-normal) var(--ease-out);
}
.reel.decision .decision-feedback.correct{
  color:var(--color-success);
}
.reel.decision .decision-feedback.incorrect{
  color:var(--color-danger);
}
.reel.decision .decision-explanation{
  display:none;
  margin-top:var(--space-4);
  padding:var(--space-4);
  background:var(--color-bg-secondary);
  border-left:3px solid var(--color-warning);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-family:var(--font-family-sans);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-relaxed);
  color:var(--color-text-secondary);
}
.reel.decision .decision-explanation.show{
  display:block;
  animation:fadeUp var(--duration-normal) var(--ease-out);
}

/* UNLOCK_CARD */
.reel.unlock{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.reel.unlock .unlock-puzzle{
  font-family:var(--font-family-sans);
  font-size:var(--font-size-lg);
  line-height:var(--line-height-relaxed);
  margin:0 0 var(--space-6);
  max-width:40ch;
}
.reel.unlock .unlock-input{
  width:100%;
  max-width:320px;
  padding:var(--space-4);
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  color:var(--color-text-primary);
  font-family:var(--font-family-sans);
  font-size:var(--font-size-base);
  margin-bottom:var(--space-4);
  text-align:center;
}
.reel.unlock .unlock-input:focus{
  outline:none;
  border-color:var(--color-warning);
}
.reel.unlock .unlock-input.error{
  border-color:var(--color-danger);
  animation:shake var(--duration-normal) var(--ease-out);
}
.reel.unlock .unlock-submit{
  padding:var(--space-3) var(--space-8);
  background:var(--color-success);
  border:none;
  border-radius:var(--radius-md);
  color:#13141b;
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-semibold);
  cursor:pointer;
  transition:transform var(--duration-normal) var(--ease-out);
}
.reel.unlock .unlock-submit:hover{
  transform:scale(1.05);
}
.reel.unlock .unlock-reward{
  display:none;
  margin-top:var(--space-6);
  padding:var(--space-6);
  background:var(--color-success-subtle);
  border:1px solid var(--color-success);
  border-radius:var(--radius-lg);
  animation:fadeUp var(--duration-normal) var(--ease-out);
}
.reel.unlock .unlock-reward.show{
  display:block;
}
.reel.unlock .reward-content{
  font-family:var(--font-family-sans);
  font-size:var(--font-size-base);
  line-height:var(--line-height-relaxed);
  color:var(--color-text-primary);
}

/* TIMELINE_CARD */
.reel.timeline{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.reel.timeline .timeline-container{
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
  margin-top:var(--space-6);
  max-width:400px;
}
.reel.timeline .timeline-event{
  display:flex;
  gap:var(--space-4);
  align-items:flex-start;
  opacity:0;
  transform:translateY(20px);
}
.reel.timeline .timeline-event.animate-in{
  animation:fadeUp var(--duration-normal) var(--ease-out) forwards;
}
.reel.timeline .timeline-year{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-semibold);
  color:var(--color-warning);
  background:var(--color-warning-subtle);
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-md);
  flex-shrink:0;
}
.reel.timeline .timeline-content{
  font-family:var(--font-family-sans);
  font-size:var(--font-size-base);
  line-height:var(--line-height-normal);
  color:var(--color-text-primary);
  text-align:left;
}

/* SPEED_CHALLENGE_CARD */
.reel.speed-challenge{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.reel.speed-challenge .speed-question{
  font-family:var(--font-family-sans);
  font-size:var(--font-size-lg);
  line-height:var(--line-height-relaxed);
  margin:0 0 var(--space-6);
  max-width:40ch;
}
.reel.speed-challenge .speed-input{
  width:100%;
  max-width:320px;
  padding:var(--space-4);
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  color:var(--color-text-primary);
  font-family:var(--font-family-sans);
  font-size:var(--font-size-base);
  margin-bottom:var(--space-4);
  text-align:center;
}
.reel.speed-challenge .speed-input:focus{
  outline:none;
  border-color:var(--color-warning);
}
.reel.speed-challenge .speed-submit{
  padding:var(--space-3) var(--space-8);
  background:var(--color-danger);
  border:none;
  border-radius:var(--radius-md);
  color:#fff;
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-semibold);
  cursor:pointer;
  transition:transform var(--duration-normal) var(--ease-out);
}
.reel.speed-challenge .speed-submit:hover{
  transform:scale(1.05);
}
.reel.speed-challenge .speed-result{
  display:none;
  margin-top:var(--space-6);
  padding:var(--space-6);
  background:var(--color-danger-subtle);
  border:1px solid var(--color-danger);
  border-radius:var(--radius-lg);
  animation:fadeUp var(--duration-normal) var(--ease-out);
}
.reel.speed-challenge .speed-result.show{
  display:block;
}
.reel.speed-challenge .result-answer{
  font-family:var(--font-family-serif);
  font-size:var(--font-size-2xl);
  font-weight:var(--font-weight-semibold);
  color:var(--color-danger);
}

/* SCRATCH_CARD */
.reel.scratch{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.reel.scratch .scratch-hint{
  font-family:var(--font-family-sans);
  font-size:var(--font-size-base);
  line-height:var(--line-height-relaxed);
  margin:0 0 var(--space-6);
  max-width:40ch;
  color:var(--color-text-secondary);
}
.reel.scratch .scratch-area{
  position:relative;
  width:100%;
  max-width:320px;
  height:180px;
  margin:0 auto;
}
.reel.scratch .scratch-surface{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--color-warning) 0%, var(--color-danger) 100%);
  border-radius:var(--radius-lg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:opacity var(--duration-slow) var(--ease-out);
  z-index:2;
}
.reel.scratch .scratch-surface:hover{
  transform:scale(1.02);
}
.reel.scratch .scratch-icon{
  font-size:var(--font-size-4xl);
  margin-bottom:var(--space-2);
}
.reel.scratch .scratch-text{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-sm);
  color:#fff;
}
.reel.scratch .scratch-content{
  position:absolute;
  inset:0;
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-6);
  opacity:0;
  transition:opacity var(--duration-slow) var(--ease-out);
  z-index:1;
}
.reel.scratch .scratch-content.show{
  opacity:1;
}
.reel.scratch .scratch-reveal{
  font-family:var(--font-family-sans);
  font-size:var(--font-size-base);
  line-height:var(--line-height-relaxed);
  color:var(--color-text-primary);
}

/* 2. STORY_REEL */
.reel.story{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:var(--space-6);
  align-items:start;
}
.reel.story .story-content{
  font-family:var(--font-family-sans);
  font-size:var(--font-size-base);
  line-height:var(--line-height-relaxed);
  color:var(--color-text-secondary);
}
.reel.story .story-chapter{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-warning);
  margin-bottom:var(--space-3);
  letter-spacing:0.1em;
}
.reel.story .story-twist{
  color:var(--color-danger);
  font-weight:var(--font-weight-semibold);
  background:var(--color-danger-subtle);
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-sm);
}
.reel.story .story-moral{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  color:var(--color-text-primary);
}
.reel.story .story-moral-label{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-success);
  margin-bottom:var(--space-2);
  letter-spacing:0.1em;
}

/* 3. MYTH_FACT_REEL (Enhanced) */
.reel.myth-fact .myth-fact-container{
  margin:var(--space-5) 0;
}
.reel.myth-fact .myth-box{
  background:var(--color-danger-subtle);
  border:1px solid var(--color-danger);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  margin-bottom:var(--space-4);
  position:relative;
  cursor:pointer;
  transition:transform var(--duration-normal) var(--ease-out);
}
.reel.myth-fact .myth-box:hover{
  transform:translateY(-2px);
}
.reel.myth-fact .myth-box::before{
  content:'❌ MYTH';
  position:absolute;
  top:-10px;
  left:var(--space-3);
  background:var(--color-danger);
  color:#fff;
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  letter-spacing:0.1em;
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full);
}
.reel.myth-fact .fact-box{
  background:var(--color-success-subtle);
  border:1px solid var(--color-success);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  position:relative;
  cursor:pointer;
  transition:transform var(--duration-normal) var(--ease-out);
}
.reel.myth-fact .fact-box:hover{
  transform:translateY(-2px);
}
.reel.myth-fact .fact-box::before{
  content:'✅ FACT';
  position:absolute;
  top:-10px;
  left:var(--space-3);
  background:var(--color-success);
  color:#13141b;
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  letter-spacing:0.1em;
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full);
}
.reel.myth-fact .myth-text, .reel.myth-fact .fact-text{
  font-size:var(--font-size-base);
  line-height:var(--line-height-relaxed);
  margin-top:var(--space-2);
}
.reel.myth-fact .myth-text{ color:var(--color-text-primary); }
.reel.myth-fact .fact-text{ color:var(--color-success); }

/* 4. COMPARISON_REEL */
.reel.comparison{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.reel.comparison .comparison-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
  position:relative;
}
.reel.comparison .comparison-side{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  position:relative;
}
.reel.comparison .comparison-side.winner{
  border-color:var(--color-success);
  box-shadow:0 0 20px rgba(79,184,168,0.2);
}
.reel.comparison .comparison-title{
  font-family:var(--font-family-serif);
  font-weight:var(--font-weight-semibold);
  font-size:var(--font-size-lg);
  margin-bottom:var(--space-3);
}
.reel.comparison .comparison-content{
  font-size:var(--font-size-sm);
  line-height:var(--line-height-relaxed);
  color:var(--color-text-secondary);
}
.reel.comparison .vs-badge{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:var(--color-warning);
  color:#1c1305;
  font-family:'JetBrains Mono',monospace;
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-base);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-full);
  z-index:1;
}

/* 5. TIMELINE_REEL */
.reel.timeline{
  overflow-x:auto;
  padding-bottom:var(--space-4);
}
.reel.timeline .timeline-track{
  display:flex;
  gap:var(--space-4);
  padding:var(--space-5) 0;
  min-width:max-content;
}
.reel.timeline .timeline-node{
  flex:0 0 200px;
  position:relative;
}
.reel.timeline .timeline-node::before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:12px;
  height:12px;
  background:var(--color-warning);
  border-radius:var(--radius-full);
}
.reel.timeline .timeline-node::after{
  content:'';
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  height:100%;
  background:var(--color-border);
}
.reel.timeline .timeline-node:last-child::after{
  display:none;
}
.reel.timeline .timeline-year{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-warning);
  margin-bottom:var(--space-2);
  text-align:center;
}
.reel.timeline .timeline-event{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  color:var(--color-text-secondary);
  margin-top:var(--space-4);
}
.reel.timeline .timeline-node.active .timeline-event{
  border-color:var(--color-success);
  box-shadow:0 0 16px rgba(79,184,168,0.2);
}

/* 6. STEP_BY_STEP_REEL */
.reel.step-by-step .steps-container{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.reel.step-by-step .step-item{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:all var(--duration-normal) var(--ease-out);
}
.reel.step-by-step .step-header{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-4) var(--space-4);
  cursor:pointer;
}
.reel.step-by-step .step-number{
  font-family:'JetBrains Mono',monospace;
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-sm);
  width:28px;
  height:28px;
  background:var(--color-warning);
  color:#1c1305;
  border-radius:var(--radius-full);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.reel.step-by-step .step-title{
  font-weight:var(--font-weight-semibold);
  font-size:var(--font-size-base);
  flex:1;
}
.reel.step-by-step .step-content{
  padding:0 var(--space-4) var(--space-4);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-relaxed);
  color:var(--color-text-secondary);
  display:none;
}
.reel.step-by-step .step-item.expanded .step-content{
  display:block;
  animation:slideDown var(--duration-normal) var(--ease-out);
}
.reel.step-by-step .expand-all{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-warning);
  background:none;
  border:1px solid var(--color-warning);
  padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-md);
  cursor:pointer;
  margin-top:var(--space-3);
}

/* 7. QUOTE_REEL */
.reel.quote{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:var(--space-10) var(--space-5);
}
.reel.quote .quote-marks{
  font-size:var(--font-size-7xl);
  color:var(--color-warning);
  opacity:0.3;
  line-height:1;
  margin-bottom:var(--space-4);
}
.reel.quote .quote-text{
  font-family:var(--font-family-serif);
  font-style:italic;
  font-size:var(--font-size-4xl);
  line-height:var(--line-height-relaxed);
  max-width:28ch;
  margin:0 0 var(--space-5);
}
.reel.quote .quote-author{
  font-family:var(--font-family-sans);
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
}
.reel.quote .quote-context{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-success);
  margin-top:var(--space-2);
}

/* 8. PREDICTION_REEL */
.reel.prediction .prediction-question{
  font-family:var(--font-family-serif);
  font-size:var(--font-size-3xl);
  line-height:var(--line-height-normal);
  margin-bottom:var(--space-6);
  text-align:center;
}
.reel.prediction .prediction-input{
  width:100%;
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-4);
  font-size:var(--font-size-base);
  color:var(--color-text-primary);
  margin-bottom:var(--space-4);
}
.reel.prediction .prediction-reveal{
  background:var(--color-success);
  color:#13141b;
  border:none;
  border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-6);
  font-weight:var(--font-weight-semibold);
  font-size:var(--font-size-base);
  cursor:pointer;
  width:100%;
  transition:transform var(--duration-normal) var(--ease-out);
}
.reel.prediction .prediction-reveal:hover{
  transform:scale(1.02);
}
.reel.prediction .prediction-answer{
  background:var(--color-success-subtle);
  border:1px solid var(--color-success);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  margin-top:var(--space-4);
  font-size:var(--font-size-base);
  line-height:var(--line-height-normal);
  display:none;
}
.reel.prediction .prediction-answer.show{
  display:block;
  animation:fadeUp var(--duration-normal) var(--ease-out);
}

/* 9. PUZZLE_REEL */
.reel.puzzle .puzzle-container{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
}
.reel.puzzle .puzzle-question{
  font-size:var(--font-size-base);
  line-height:var(--line-height-normal);
  margin-bottom:var(--space-4);
}
.reel.puzzle .puzzle-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3);
}
.reel.puzzle .puzzle-option{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  font-size:var(--font-size-sm);
  cursor:pointer;
  transition:all var(--duration-normal) var(--ease-out);
}
.reel.puzzle .puzzle-option:hover{
  border-color:var(--color-warning);
  background:var(--color-warning-subtle);
}
.reel.puzzle .puzzle-option.correct{
  border-color:var(--color-success);
  background:var(--color-success-subtle);
}
.reel.puzzle .puzzle-option.wrong{
  border-color:var(--color-danger);
  background:var(--color-danger-subtle);
  animation:shake var(--duration-normal) var(--ease-out);
}
.reel.puzzle .puzzle-feedback{
  margin-top:var(--space-4);
  padding:var(--space-3);
  border-radius:var(--radius-md);
  font-size:var(--font-size-sm);
  display:none;
}
.reel.puzzle .puzzle-feedback.correct{
  background:var(--color-success-subtle);
  color:var(--color-success);
}
.reel.puzzle .puzzle-feedback.wrong{
  background:var(--color-danger-subtle);
  color:var(--color-danger);
}

/* 10. FILL_BLANK_REEL */
.reel.fill-blank .fill-sentence{
  font-size:var(--font-size-lg);
  line-height:var(--line-height-relaxed);
  margin-bottom:var(--space-5);
}
.reel.fill-blank .blank{
  display:inline-block;
  min-width:80px;
  height:36px;
  border-bottom:2px solid var(--color-warning);
  margin:0 var(--space-1);
  vertical-align:middle;
}
.reel.fill-blank .blank.filled{
  background:var(--color-warning-subtle);
  padding:0 var(--space-2);
  border-radius:var(--radius-sm);
}
.reel.fill-blank .word-bank{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}
.reel.fill-blank .word-option{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  padding:var(--space-2) var(--space-4);
  font-size:var(--font-size-sm);
  cursor:pointer;
  transition:all var(--duration-normal) var(--ease-out);
}
.reel.fill-blank .word-option:hover{
  border-color:var(--color-warning);
}
.reel.fill-blank .word-option.used{
  opacity:0.3;
  cursor:not-allowed;
}

/* 11. FLASHCARD_REEL */
.reel.flashcard{
  perspective:1000px;
}
.reel.flashcard .flashcard-inner{
  position:relative;
  width:100%;
  min-height:200px;
  transition:transform var(--duration-slow) var(--ease-out);
  transform-style:preserve-3d;
  cursor:pointer;
}
.reel.flashcard .flashcard-inner.flipped{
  transform:rotateY(180deg);
}
.reel.flashcard .flashcard-front,
.reel.flashcard .flashcard-back{
  position:absolute;
  width:100%;
  height:100%;
  backface-visibility:hidden;
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.reel.flashcard .flashcard-back{
  transform:rotateY(180deg);
  background:var(--color-success-subtle);
  border-color:var(--color-success);
}
.reel.flashcard .flashcard-term{
  font-family:var(--font-family-serif);
  font-size:var(--font-size-3xl);
  font-weight:var(--font-weight-semibold);
}
.reel.flashcard .flashcard-answer{
  font-size:var(--font-size-lg);
  line-height:var(--line-height-normal);
  color:var(--color-success);
}
.reel.flashcard .flashcard-hint{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-text-tertiary);
  margin-top:var(--space-4);
}
.reel.flashcard .flashcard-actions{
  display:flex;
  gap:var(--space-3);
  margin-top:var(--space-5);
}
.reel.flashcard .flashcard-btn{
  padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-full);
  border:1px solid var(--color-border);
  background:var(--color-bg);
  color:var(--color-text-secondary);
  cursor:pointer;
  font-size:var(--font-size-sm);
}
.reel.flashcard .flashcard-btn.know{
  border-color:var(--color-success);
  color:var(--color-success);
}
.reel.flashcard .flashcard-btn.review{
  border-color:var(--color-warning);
  color:var(--color-warning);
}

/* 12. BEFORE_AFTER_REEL (Enhanced) */
.reel.before-after .comparison-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
  margin:var(--space-5) 0;
}
.reel.before-after .comparison-side{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  position:relative;
}
.reel.before-after .comparison-side.before{ border-color:var(--color-danger); }
.reel.before-after .comparison-side.after{ border-color:var(--color-success); }
.reel.before-after .comparison-label{
  position:absolute;
  top:-10px;
  left:var(--space-3);
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full);
  font-weight:var(--font-weight-semibold);
}
.reel.before-after .comparison-side.before .comparison-label{
  background:var(--color-danger);
  color:#fff;
}
.reel.before-after .comparison-side.after .comparison-label{
  background:var(--color-success);
  color:#13141b;
}
.reel.before-after .comparison-content{
  font-size:var(--font-size-sm);
  line-height:var(--line-height-relaxed);
  color:var(--color-text-secondary);
  margin-top:var(--space-2);
}

/* 13. DECISION_TREE_REEL */
.reel.decision-tree .tree-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-4);
}
.reel.decision-tree .decision-node{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  text-align:center;
  max-width:300px;
  position:relative;
}
.reel.decision-tree .decision-node.question{
  border-color:var(--color-warning);
}
.reel.decision-tree .decision-node.outcome{
  border-color:var(--color-success);
  background:var(--color-success-subtle);
}
.reel.decision-tree .decision-text{
  font-size:var(--font-size-base);
  line-height:var(--line-height-normal);
}
.reel.decision-tree .decision-branches{
  display:flex;
  gap:var(--space-4);
  justify-content:center;
}
.reel.decision-tree .decision-branch{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-2);
}
.reel.decision-tree .branch-line{
  width:2px;
  height:20px;
  background:var(--color-border);
}
.reel.decision-tree .branch-btn{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  padding:var(--space-2) var(--space-4);
  font-size:var(--font-size-sm);
  cursor:pointer;
  transition:all var(--duration-normal) var(--ease-out);
}
.reel.decision-tree .branch-btn:hover{
  border-color:var(--color-warning);
}
.reel.decision-tree .branch-btn.selected{
  background:var(--color-warning);
  color:#1c1305;
  border-color:var(--color-warning);
}

/* 14. MINI_CHALLENGE_REEL */
.reel.mini-challenge .challenge-container{
  background:linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-warning-subtle) 100%);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
  text-align:center;
}
.reel.mini-challenge .challenge-badge{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-warning);
  background:var(--color-warning-subtle);
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full);
  display:inline-block;
  margin-bottom:var(--space-4);
}
.reel.mini-challenge .challenge-text{
  font-family:var(--font-family-serif);
  font-size:var(--font-size-2xl);
  line-height:var(--line-height-normal);
  margin-bottom:var(--space-5);
}
.reel.mini-challenge .challenge-input{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-3) var(--space-4);
  font-size:var(--font-size-base);
  width:100%;
  max-width:280px;
  margin-bottom:var(--space-3);
}
.reel.mini-challenge .challenge-submit{
  background:var(--color-warning);
  color:#1c1305;
  border:none;
  border-radius:var(--radius-lg);
  padding:var(--space-3) var(--space-6);
  font-weight:var(--font-weight-semibold);
  cursor:pointer;
  font-size:var(--font-size-base);
}
.reel.mini-challenge .challenge-success{
  display:none;
  margin-top:var(--space-4);
}
.reel.mini-challenge .challenge-success.show{
  display:block;
  animation:celebrate 0.6s ease;
}
.reel.mini-challenge .reward-badge{
  font-size:var(--font-size-5xl);
  margin-bottom:var(--space-2);
}
.reel.mini-challenge .reward-text{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-success);
}

/* 15. CODE_WALKTHROUGH_REEL */
.reel.code-walkthrough .code-container{
  background:var(--color-bg-elevated);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  margin:var(--space-4) 0;
}
.reel.code-walkthrough .code-line{
  display:flex;
  gap:var(--space-3);
  padding:var(--space-2) 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.reel.code-walkthrough .code-line:last-child{
  border-bottom:none;
}
.reel.code-walkthrough .line-number{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-text-tertiary);
  width:24px;
  flex-shrink:0;
}
.reel.code-walkthrough .line-code{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-sm);
  color:var(--color-text-primary);
  flex:1;
}
.reel.code-walkthrough .line-code.highlight{
  background:rgba(232,163,61,0.15);
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-sm);
}
.reel.code-walkthrough .line-annotation{
  font-size:var(--font-size-xs);
  color:var(--color-success);
  margin-top:var(--space-1);
  padding-left:36px;
}
.reel.code-walkthrough .code-explanation{
  font-family:var(--font-family-sans);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-relaxed);
  color:var(--color-text-secondary);
  margin-top:var(--space-4);
  padding:var(--space-4);
  background:var(--color-bg-secondary);
  border-left:3px solid var(--color-warning);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.reel.code-walkthrough .walkthrough-controls{
  display:flex;
  justify-content:center;
  gap:var(--space-3);
  margin-top:var(--space-4);
}
.reel.code-walkthrough .walkthrough-btn{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-4);
  font-size:var(--font-size-sm);
  cursor:pointer;
}
.reel.code-walkthrough .walkthrough-btn:hover{
  border-color:var(--color-warning);
}

/* 16. FORMULA_BREAKDOWN_REEL */
.reel.formula-breakdown .formula-display{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-4xl);
  text-align:center;
  padding:var(--space-6);
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  margin:var(--space-4) 0;
  line-height:var(--line-height-normal);
}
.reel.formula-breakdown .formula-part{
  cursor:pointer;
  padding:var(--space-1) var(--space-1);
  border-radius:var(--radius-sm);
  transition:background var(--duration-normal) var(--ease-out);
}
.reel.formula-breakdown .formula-part:hover{
  background:var(--color-warning-subtle);
}
.reel.formula-breakdown .formula-part.active{
  background:var(--color-success-subtle);
  color:var(--color-success);
}
.reel.formula-breakdown .part-explanation{
  background:var(--color-success-subtle);
  border:1px solid var(--color-success);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  margin-top:var(--space-3);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  display:none;
}
.reel.formula-breakdown .part-explanation.show{
  display:block;
  animation:fadeUp var(--duration-normal) var(--ease-out);
}
.reel.formula-breakdown .part-label{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-success);
  margin-bottom:var(--space-2);
}

/* 17. COMMON_MISTAKE_REEL */
.reel.common-mistake .mistake-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
}
.reel.common-mistake .mistake-side{
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  position:relative;
}
.reel.common-mistake .mistake-side.wrong{
  background:var(--color-danger-subtle);
  border:1px solid var(--color-danger);
}
.reel.common-mistake .mistake-side.right{
  background:var(--color-success-subtle);
  border:1px solid var(--color-success);
}
.reel.common-mistake .mistake-label{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  margin-bottom:var(--space-3);
  letter-spacing:0.1em;
}
.reel.common-mistake .mistake-side.wrong .mistake-label{
  color:var(--color-danger);
}
.reel.common-mistake .mistake-side.right .mistake-label{
  color:var(--color-success);
}
.reel.common-mistake .mistake-content{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-sm);
  line-height:var(--line-height-relaxed);
}
.reel.common-mistake .mistake-explanation{
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  color:var(--color-text-secondary);
  margin-top:var(--space-3);
}

/* 18. ANALOGY_REEL */
.reel.analogy .analogy-container{
  background:linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-brand-subtle) 100%);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
}
.reel.analogy .analogy-hook{
  font-family:var(--font-family-serif);
  font-size:var(--font-size-2xl);
  margin-bottom:var(--space-4);
  color:var(--color-brand-primary);
}
.reel.analogy .analogy-statement{
  font-size:var(--font-size-base);
  line-height:var(--line-height-relaxed);
  margin-bottom:var(--space-5);
}
.reel.analogy .analogy-visual{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-sm);
  text-align:center;
  margin-bottom:var(--space-4);
}
.reel.analogy .analogy-connection{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin-top:var(--space-3);
}
.reel.analogy .connection-line{
  flex:1;
  height:2px;
  background:linear-gradient(90deg, var(--color-brand-primary), var(--color-success));
}
.reel.analogy .analogy-explanation{
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  color:var(--color-text-secondary);
  margin-top:var(--space-3);
}

/* 19. REAL_WORLD_REEL */
.reel.real-world .scenario-container{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
}
.reel.real-world .scenario-badge{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-success);
  background:var(--color-success-subtle);
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full);
  display:inline-block;
  margin-bottom:var(--space-3);
}
.reel.real-world .scenario-text{
  font-size:var(--font-size-base);
  line-height:var(--line-height-relaxed);
  margin-bottom:var(--space-4);
}
.reel.real-world .scenario-application{
  background:var(--color-warning-subtle);
  border-left:3px solid var(--color-warning);
  padding:var(--space-4) var(--space-4);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
}
.reel.real-world .scenario-label{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-warning);
  margin-bottom:var(--space-2);
  letter-spacing:0.1em;
}

/* 20. MENTAL_MODEL_REEL */
.reel.mental-model .model-container{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
}
.reel.mental-model .model-name{
  font-family:var(--font-family-serif);
  font-size:var(--font-size-2xl);
  margin-bottom:var(--space-5);
  text-align:center;
}
.reel.mental-model .model-diagram{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  text-align:center;
  margin-bottom:var(--space-4);
  line-height:var(--line-height-relaxed);
}
.reel.mental-model .model-components{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:var(--space-3);
}
.reel.mental-model .model-component{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-3);
  text-align:center;
  cursor:pointer;
  transition:all var(--duration-normal) var(--ease-out);
}
.reel.mental-model .model-component:hover{
  border-color:var(--color-warning);
}
.reel.mental-model .component-name{
  font-weight:var(--font-weight-semibold);
  font-size:var(--font-size-sm);
  margin-bottom:var(--space-2);
}
.reel.mental-model .component-desc{
  font-size:var(--font-size-xs);
  color:var(--color-text-secondary);
  line-height:var(--line-height-normal);
}

/* 21. DID_YOU_KNOW_REEL */
.reel.did-you-know .dyk-container{
  text-align:center;
  padding:var(--space-8) var(--space-5);
}
.reel.did-you-know .dyk-question{
  font-size:var(--font-size-7xl);
  margin-bottom:var(--space-5);
  animation:spinIn var(--duration-normal) var(--ease-out);
}
.reel.did-you-know .dyk-text{
  font-family:var(--font-family-serif);
  font-size:var(--font-size-lg);
  line-height:var(--line-height-normal);
  margin-bottom:var(--space-4);
}
.reel.did-you-know .dyk-reveal{
  background:var(--color-warning);
  color:#1c1305;
  border:none;
  border-radius:var(--radius-full);
  padding:var(--space-3) var(--space-6);
  font-weight:var(--font-weight-semibold);
  cursor:pointer;
  font-size:var(--font-size-sm);
}
.reel.did-you-know .dyk-fact{
  display:none;
  margin-top:var(--space-5);
  padding:var(--space-4);
  background:var(--color-warning-subtle);
  border-radius:var(--radius-lg);
  font-size:var(--font-size-base);
  line-height:var(--line-height-normal);
}
.reel.did-you-know .dyk-fact.show{
  display:block;
  animation:popIn var(--duration-normal) var(--ease-out);
}
.reel.did-you-know .dyk-reaction{
  font-size:var(--font-size-4xl);
  margin-top:var(--space-3);
}

/* 22. INTERACTIVE_CHOICE_REEL */
.reel.interactive-choice .choice-container{
  text-align:center;
}
.reel.interactive-choice .choice-question{
  font-family:var(--font-family-serif);
  font-size:var(--font-size-3xl);
  line-height:var(--line-height-normal);
  margin-bottom:var(--space-6);
}
.reel.interactive-choice .choice-options{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.reel.interactive-choice .choice-option{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  font-size:var(--font-size-base);
  cursor:pointer;
  transition:all var(--duration-normal) var(--ease-out);
  text-align:left;
}
.reel.interactive-choice .choice-option:hover{
  border-color:var(--color-warning);
  transform:translateX(4px);
}
.reel.interactive-choice .choice-option.selected{
  border-color:var(--color-success);
  background:var(--color-success-subtle);
}
.reel.interactive-choice .choice-feedback{
  margin-top:var(--space-4);
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  display:none;
}
.reel.interactive-choice .choice-feedback.show{
  display:block;
  animation:fadeUp var(--duration-normal) var(--ease-out);
}
.reel.interactive-choice .choice-feedback.correct{
  background:var(--color-success-subtle);
  color:var(--color-success);
}
.reel.interactive-choice .choice-feedback.incorrect{
  background:var(--color-danger-subtle);
  color:var(--color-danger);
}

/* 23. THIS_OR_THAT_REEL */
.reel.this-or-that .tot-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
  margin:var(--space-5) 0;
}
.reel.this-or-that .tot-option{
  background:var(--color-bg-secondary);
  border:2px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
  text-align:center;
  cursor:pointer;
  transition:all var(--duration-normal) var(--ease-out);
}
.reel.this-or-that .tot-option:hover{
  border-color:var(--color-warning);
  transform:scale(1.02);
}
.reel.this-or-that .tot-option.selected{
  border-color:var(--color-success);
  background:var(--color-success-subtle);
}
.reel.this-or-that .tot-label{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-text-tertiary);
  margin-bottom:var(--space-3);
  letter-spacing:0.1em;
}
.reel.this-or-that .tot-value{
  font-family:var(--font-family-serif);
  font-size:var(--font-size-2xl);
  font-weight:var(--font-weight-semibold);
}
.reel.this-or-that .tot-prompt{
  text-align:center;
  font-family:var(--font-family-sans);
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
  margin-bottom:var(--space-4);
}
.reel.this-or-that .tot-result{
  text-align:center;
  padding:var(--space-4);
  background:var(--color-bg-secondary);
  border-radius:var(--radius-lg);
  margin-top:var(--space-4);
  display:none;
}
.reel.this-or-that .tot-result.show{
  display:block;
}

/* 24. RANKING_REEL */
.reel.ranking .ranking-container{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
}
.reel.ranking .ranking-prompt{
  font-size:var(--font-size-base);
  margin-bottom:var(--space-4);
}
.reel.ranking .ranking-items{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.reel.ranking .ranking-item{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);
  display:flex;
  align-items:center;
  gap:var(--space-3);
  cursor:grab;
}
.reel.ranking .ranking-item:active{
  cursor:grabbing;
}
.reel.ranking .rank-number{
  font-family:'JetBrains Mono',monospace;
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-sm);
  width:24px;
  height:24px;
  background:var(--color-warning);
  color:#1c1305;
  border-radius:var(--radius-full);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.reel.ranking .rank-text{
  font-size:var(--font-size-sm);
  flex:1;
}
.reel.ranking .ranking-check{
  background:var(--color-success);
  color:#13141b;
  border:none;
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-5);
  font-weight:var(--font-weight-semibold);
  cursor:pointer;
  margin-top:var(--space-4);
  width:100%;
}
.reel.ranking .ranking-feedback{
  margin-top:var(--space-3);
  padding:var(--space-3);
  border-radius:var(--radius-md);
  font-size:var(--font-size-sm);
  display:none;
}
.reel.ranking .ranking-feedback.correct{
  background:var(--color-success-subtle);
  color:var(--color-success);
}
.reel.ranking .ranking-feedback.incorrect{
  background:var(--color-danger-subtle);
  color:var(--color-danger);
}

/* 25. CAUSE_EFFECT_REEL */
.reel.cause-effect .ce-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-4);
}
.reel.cause-effect .ce-box{
  background:var(--color-bg-secondary);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  width:100%;
  max-width:320px;
  text-align:center;
}
.reel.cause-effect .ce-box.cause{
  border-color:var(--color-danger);
}
.reel.cause-effect .ce-box.effect{
  border-color:var(--color-success);
}
.reel.cause-effect .ce-label{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  margin-bottom:var(--space-2);
  letter-spacing:0.1em;
}
.reel.cause-effect .ce-box.cause .ce-label{
  color:var(--color-danger);
}
.reel.cause-effect .ce-box.effect .ce-label{
  color:var(--color-success);
}
.reel.cause-effect .ce-text{
  font-size:var(--font-size-base);
  line-height:var(--line-height-normal);
}
.reel.cause-effect .ce-arrow{
  font-size:var(--font-size-5xl);
  color:var(--color-warning);
  animation:arrowPulse var(--duration-slow) infinite;
}
.reel.cause-effect .ce-steps{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  margin-top:var(--space-3);
}
.reel.cause-effect .ce-step{
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
  padding:var(--space-2) var(--space-3);
  background:var(--color-bg);
  border-radius:var(--radius-sm);
}

/* 26. ASCII_DIAGRAM_REEL */
.reel.ascii-diagram .ascii-container{
  background:var(--color-bg-elevated);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  margin:var(--space-4) 0;
}
.reel.ascii-diagram .ascii-art{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  line-height:var(--line-height-relaxed);
  color:var(--color-text-primary);
  white-space:pre;
  overflow-x:auto;
  margin-bottom:var(--space-4);
}
.reel.ascii-diagram .ascii-legend{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  padding-top:var(--space-4);
  border-top:1px solid var(--color-border);
}
.reel.ascii-diagram .legend-item{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--font-size-xs);
  color:var(--color-text-secondary);
}
.reel.ascii-diagram .legend-color{
  width:12px;
  height:12px;
  border-radius:var(--radius-sm);
}
.reel.ascii-diagram .ascii-annotations{
  margin-top:var(--space-3);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  color:var(--color-text-secondary);
}

/* 27. MEMORY_TRICK_REEL */
.reel.memory-trick .trick-container{
  background:linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-success-subtle) 100%);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
}
.reel.memory-trick .trick-name{
  font-family:var(--font-family-serif);
  font-size:var(--font-size-2xl);
  margin-bottom:var(--space-4);
  color:var(--color-success);
}
.reel.memory-trick .trick-explanation{
  font-size:var(--font-size-base);
  line-height:var(--line-height-relaxed);
  margin-bottom:var(--space-5);
}
.reel.memory-trick .trick-example{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  margin-bottom:var(--space-4);
}
.reel.memory-trick .example-label{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-warning);
  margin-bottom:var(--space-2);
}
.reel.memory-trick .example-text{
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
}
.reel.memory-trick .trick-practice{
  background:var(--color-warning-subtle);
  border:1px solid var(--color-warning);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
}
.reel.memory-trick .practice-label{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--font-size-xs);
  color:var(--color-warning);
  margin-bottom:var(--space-2);
}
.reel.memory-trick .practice-text{
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
}

/* 28. SURPRISE_REEL */
.reel.surprise .surprise-container{
  text-align:center;
  padding:var(--space-10) var(--space-5);
}
.reel.surprise .surprise-hook{
  font-family:var(--font-family-serif);
  font-size:var(--font-size-4xl);
  line-height:var(--line-height-normal);
  margin-bottom:var(--space-8);
  color:var(--color-text-secondary);
}
.reel.surprise .surprise-reveal{
  background:var(--color-danger);
  color:#fff;
  border:none;
  border-radius:var(--radius-full);
  padding:var(--space-4) var(--space-8);
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-base);
  cursor:pointer;
  transition:transform var(--duration-normal) var(--ease-out);
}
.reel.surprise .surprise-reveal:hover{
  transform:scale(1.05);
}
.reel.surprise .surprise-content{
  display:none;
  margin-top:var(--space-6);
}
.reel.surprise .surprise-content.show{
  display:block;
  animation:explodeIn var(--duration-normal) var(--ease-out);
}
.reel.surprise .surprise-text{
  font-family:var(--font-family-serif);
  font-size:var(--font-size-5xl);
  line-height:var(--line-height-tight);
  margin-bottom:var(--space-4);
  color:var(--color-warning);
}
/* Reel Action Buttons - Left Side Container */
.reel-actions-container {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10;
}

.reel-actions-container button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}

.reel-actions-container button:hover {
  background: var(--color-brand-primary);
  color: #fff;
  border-color: var(--color-brand-primary);
  transform: scale(1.1);
}

.reel-actions-container button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.reel-actions-container button svg {
  width: 20px;
  height: 20px;
}

.reel-actions-container .bookmark-btn.bookmarked {
  background: var(--color-warning);
  color: #13141b;
  border-color: var(--color-warning);
}

.reel-actions-container .speaker-btn.speaking {
  background: var(--color-success);
  color: #13141b;
  border-color: var(--color-success);
}

.reel-actions-container .reel-ai-explain-btn {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.reel-ai-explanation {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-brand-primary) 25%, var(--color-border));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-brand-subtle) 68%, transparent), var(--color-bg-secondary));
  animation: reel-explanation-in 220ms var(--ease-out);
}