/* Exercises inherit DesignHub tokens. All rules stay inside their own host. */
.learning-lab[data-learning-lab]{min-width:0;margin:24px 0;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg);overflow:hidden;color:var(--color-text);font:14px/1.7 var(--font-body)}
.learning-lab[data-learning-lab] .learning-lab__intro{padding:22px 24px 18px}
.learning-lab[data-learning-lab] .learning-lab__eyebrow{display:block;margin-bottom:7px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--color-accent)}
.learning-lab[data-learning-lab] .learning-lab__intro h3{margin:0 0 8px;font-size:18px;line-height:1.5;font-weight:650;letter-spacing:-.015em}
.learning-lab[data-learning-lab] .learning-lab__intro p{margin:0;font-size:14px;line-height:1.8;color:var(--color-secondary)}
.learning-lab[data-learning-lab] .learning-lab__stage{margin:0;padding:24px;background:var(--preview-bg);border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}
.learning-lab[data-learning-lab] .learning-lab__sample{width:100%;max-width:400px;margin:auto;padding:22px;border:1px solid var(--preview-border);border-radius:var(--preview-radius);background:var(--preview-panel);box-shadow:var(--preview-shadow);color:var(--preview-text)}
.learning-lab[data-learning-lab] .learning-lab__stage figcaption{margin-top:15px;text-align:center;font-size:11px;line-height:1.6;color:var(--color-muted)}
.learning-lab[data-learning-lab] .learning-lab__sample-heading{margin-bottom:18px;font-size:16px;line-height:1.5;font-weight:650;color:var(--color-text)}
.learning-lab[data-learning-lab] .learning-lab__sample-groups{display:flex;flex-direction:column;gap:var(--learning-group-gap,24px)}
.learning-lab[data-learning-lab] .learning-lab__sample-group{display:flex;flex-direction:column;gap:8px}
.learning-lab[data-learning-lab] .learning-lab__sample-row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;min-height:42px;padding:9px 12px;background:var(--preview-bg);border:1px solid var(--preview-border);border-radius:6px;font-size:12px;line-height:1.5}
.learning-lab[data-learning-lab] .learning-lab__sample-row>span{color:var(--preview-muted)}
.learning-lab[data-learning-lab] .learning-lab__sample-row>strong{min-width:0;font-size:12px;font-weight:500;color:var(--preview-text);overflow-wrap:anywhere}
.learning-lab[data-learning-lab] .learning-lab__sample-category{display:block;margin-bottom:12px;font-size:12px;line-height:1.5;color:var(--preview-muted)}
.learning-lab[data-learning-lab] .learning-lab__title-slot{height:96px;display:flex;align-items:flex-start}
.learning-lab[data-learning-lab] .learning-lab__sample-title{margin:0;font-size:var(--learning-title-size,26px);line-height:1.2;font-weight:650;letter-spacing:-.015em;color:var(--color-text);overflow-wrap:normal}
.learning-lab[data-learning-lab] .learning-lab__sample-description{margin:0;min-height:48px;font-size:14px;line-height:1.7;color:var(--preview-text)}
.learning-lab[data-learning-lab] .learning-lab__sample-meta{margin:16px 0 22px;font-size:12px;line-height:1.5;color:var(--preview-muted)}
.learning-lab[data-learning-lab] .learning-lab__sample-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.learning-lab[data-learning-lab] .learning-lab__sample-price{font-size:24px;font-weight:650;line-height:1.4;color:var(--color-text)}
.learning-lab[data-learning-lab] .learning-lab__sample-action{display:inline-block;padding:8px 12px;border:1px solid var(--preview-border);border-radius:6px;background:var(--preview-bg);font-size:12px;font-weight:600;line-height:1.5;color:var(--preview-text);white-space:nowrap}
.learning-lab[data-learning-lab] .learning-lab__controls{padding:18px 24px 22px}
.learning-lab[data-learning-lab] .learning-lab__control-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px}
.learning-lab[data-learning-lab] .learning-lab__control-heading label{font-size:14px;line-height:1.5;font-weight:600;color:var(--color-text)}
.learning-lab[data-learning-lab] .learning-lab__control-heading output{flex:none;font:13px/1.5 var(--font-mono);color:var(--color-accent)}
.learning-lab[data-learning-lab] input[type="range"][data-learning-lab-control]{display:block;width:100%;min-width:0;height:44px;margin:0;padding:0;accent-color:var(--color-accent);cursor:pointer}
.learning-lab[data-learning-lab] .learning-lab__control-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.learning-lab[data-learning-lab] .learning-lab__control-foot>span{font:11px/1.5 var(--font-mono);color:var(--color-muted)}
.learning-lab[data-learning-lab] button[data-learning-lab-action="reset"]{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:7px 10px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-bg);font-size:12px;line-height:1.5;color:var(--color-secondary)}
.learning-lab[data-learning-lab] button[data-learning-lab-action="reset"]:hover{border-color:var(--color-border-hover);background:var(--color-hover);color:var(--color-text)}
.learning-lab[data-learning-lab] button[data-learning-lab-action="reset"] svg{width:15px;height:15px}
.learning-lab[data-learning-lab] .learning-lab__fixed{margin:12px 0 0;font-size:12px;line-height:1.7;color:var(--color-muted)}
.learning-lab[data-learning-lab] .learning-lab__explanation{border-top:1px solid var(--color-line)}
.learning-lab[data-learning-lab] .learning-lab__explanation summary{min-height:44px;padding:13px 24px;font-size:13px;line-height:1.6;font-weight:550;color:var(--color-secondary)}
.learning-lab[data-learning-lab] .learning-lab__explanation summary:hover{background:var(--color-surface);color:var(--color-text)}
.learning-lab[data-learning-lab] .learning-lab__explanation>div{padding:0 24px 22px}
.learning-lab[data-learning-lab] .learning-lab__explanation p{margin:0;font-size:13px;line-height:1.8;color:var(--color-secondary)}
.learning-lab[data-learning-lab] .learning-lab__explanation strong{display:block;margin:16px 0 5px;font-size:12px;font-weight:600;color:var(--color-text)}
.learning-lab[data-learning-lab] :is(input,button,summary):focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
@media(max-width:480px){
  .learning-lab[data-learning-lab] .learning-lab__intro{padding:18px 16px 16px}
  .learning-lab[data-learning-lab] .learning-lab__intro h3{font-size:17px}
  .learning-lab[data-learning-lab] .learning-lab__stage{padding:20px 16px}
  .learning-lab[data-learning-lab] .learning-lab__sample{padding:16px}
  .learning-lab[data-learning-lab] .learning-lab__sample-row{grid-template-columns:36px minmax(0,1fr);gap:8px;padding:8px}
  .learning-lab[data-learning-lab] .learning-lab__controls{padding:16px 16px 18px}
  .learning-lab[data-learning-lab] .learning-lab__explanation summary{padding:13px 16px}
  .learning-lab[data-learning-lab] .learning-lab__explanation>div{padding:0 16px 18px}
}