.lrn-ex{display:flex;flex-direction:column;gap:var(--space-5);max-width:920px;margin:0 auto}.lrn-ex-head{display:flex;flex-direction:column;gap:var(--space-2)}.lrn-ex-title{margin:0;font-family:var(--font-display);font-size:var(--text-h2-size);font-weight:var(--text-h2-weight);letter-spacing:var(--text-h2-ls)}.lrn-ex-instruction{margin:0;color:var(--muted);font-size:var(--text-body-size);line-height:var(--text-body-lh)}.lrn-ex-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}.lrn-ex-toolbar{border-bottom:1px solid var(--border-soft);padding:var(--space-3) var(--space-4)}.lrn-ex-tools-toggle{display:none;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-size:var(--text-caption-size);font-family:var(--font-body);cursor:pointer;padding:var(--space-1) 0}.lrn-ex-tools-toggle .chev{transition:transform var(--dur-fast) var(--ease)}.lrn-ex-tools-toggle[aria-expanded=true] .chev{transform:rotate(180deg)}.lrn-ex-tool-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}.lrn-ex-tool-group{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.lrn-ex-tool-group-actions{border-left:1px solid var(--border-soft);padding-left:var(--space-3)}.lrn-ex-tool-group-zoom{margin-left:auto;border-left:1px solid var(--border-soft);padding-left:var(--space-3)}.lrn-ex-tool{display:flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:6px 10px;color:var(--text);cursor:pointer;font-size:var(--text-caption-size);font-family:var(--font-body);transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}.lrn-ex-tool:hover{background:var(--surface3)}.lrn-ex-tool.is-active{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}.lrn-ex-tool-lbl{display:inline}.lrn-ex-chart-host{position:relative;width:100%;height:440px}.lrn-chart-canvas-wrap{position:relative;width:100%;height:100%}.lrn-chart-canvas{position:absolute;inset:0;display:block;touch-action:none;cursor:crosshair}.lrn-draw-canvas{position:absolute;inset:0;display:block;touch-action:none}.lrn-ex-playback{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-top:1px solid var(--border-soft);flex-wrap:wrap}.lrn-ex-play-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;background:var(--surface2);border:1px solid var(--border-soft);border-radius:50%;color:var(--text);cursor:pointer}.lrn-ex-play-btn:hover{background:var(--surface3)}.lrn-ex-progress{flex:1;min-width:80px;height:6px;border-radius:var(--r-pill);background:var(--surface3);overflow:hidden}.lrn-ex-progress-fill{height:100%;border-radius:var(--r-pill);background:var(--blue);transition:width .2s linear}.lrn-ex-progress-lbl{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--text-caption-size);color:var(--muted);white-space:nowrap}.lrn-ex-speed{display:flex;gap:4px}.lrn-ex-speed-btn{background:var(--surface2);border:1px solid var(--border-soft);border-radius:var(--r-2xs);padding:4px 8px;font-size:var(--text-caption-size);font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--muted);cursor:pointer}.lrn-ex-speed-btn.is-active{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}.lrn-ex-actions{display:flex;justify-content:center}.lrn-ex-actions .btn{min-width:220px}.lrn-ex-feedback{display:none;flex-direction:column;gap:var(--space-3);border-radius:var(--r-lg);padding:var(--space-6);border:1px solid var(--border-soft);background:var(--surface)}.lrn-ex-feedback.is-visible{display:flex}.lrn-ex-feedback.is-correct{border-color:var(--green-soft-border);background:var(--green-soft)}.lrn-ex-feedback.is-improve{border-color:var(--amber-soft-border);background:var(--amber-soft)}.lrn-ex-feedback-tag{display:inline-block;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--text-label-size);letter-spacing:.08em;text-transform:uppercase;font-weight:700}.lrn-ex-feedback.is-correct .lrn-ex-feedback-tag{color:var(--green-text)}.lrn-ex-feedback.is-improve .lrn-ex-feedback-tag{color:var(--amber-text)}.lrn-ex-feedback-msg{margin:0;font-size:var(--text-body-size);line-height:var(--text-body-lh)}.lrn-ex-explain{border-top:1px solid var(--border-soft);padding-top:var(--space-3)}.lrn-ex-explain h4{margin:0 0 4px;font-size:var(--text-body-sm-size);font-weight:600}.lrn-ex-explain p{margin:0;color:var(--muted);font-size:var(--text-body-sm-size);line-height:var(--text-body-lh)}.lrn-ex-feedback-actions{display:flex;gap:var(--space-3);flex-wrap:wrap}.lrn-ex-cards{display:flex;flex-direction:column;gap:var(--space-3)}.lrn-ex-card{text-align:left;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--space-5) var(--space-6);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}.lrn-ex-card:hover{border-color:var(--blue);background:var(--surface2)}.lrn-ex-card-eyebrow{display:block;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--text-label-size);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}.lrn-ex-card h3{margin:0 0 4px;font-family:var(--font-display);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight)}.lrn-ex-card p{margin:0 0 var(--space-3);color:var(--muted);font-size:var(--text-body-sm-size);line-height:var(--text-body-lh)}.lrn-ex-card-cta{font-size:var(--text-caption-size);color:var(--text);font-weight:600}@media(prefers-reduced-motion:reduce){.lrn-ex-progress-fill,.lrn-hero-bar-fill{transition:none}}@media(max-width:640px){.lrn-ex-chart-host{height:320px}.lrn-ex-tool-lbl{display:none}.lrn-ex-tool{padding:8px}.lrn-ex-tools-toggle{display:flex}.lrn-ex-tool-row{display:none}.lrn-ex-tool-row:not(.is-collapsed){display:flex;margin-top:var(--space-3)}.lrn-ex-tool-group-zoom{margin-left:0;border-left:none;padding-left:0}.lrn-ex-actions .btn{min-width:0;width:100%}}