/* WeTeachMath v1.5.7 Examples deep-dive experience.
   Priority: the complete solution is always the dominant readable surface.
   Visuals are optional. Every small mathematical move can be opened for explanation. */

.phase57-worked-grid{
  position:relative;
  grid-template-columns:minmax(270px,.58fr) minmax(0,1.62fr)!important;
  gap:12px!important;
  min-height:0;
}
.worked-control-column{
  position:relative;
  display:block!important;
  min-width:0;
  min-height:0;
  overflow:auto!important;
  scrollbar-width:thin;
  scrollbar-gutter:stable;
}
.worked-control-column .worked-method-card{
  min-height:100%;
  overflow:visible!important;
  padding:14px!important;
  gap:10px!important;
}
.worked-control-column .worked-method-card h3{
  font-size:18px!important;
  line-height:1.28!important;
  margin:0;
}
.worked-method-summary-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-top:2px;
}
.worked-method-summary-head>span{
  color:#0c887d;
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.worked-visual-toggle{
  border:1px solid #bba8ff;
  background:#fff;
  color:#5f38df;
  min-height:32px;
  padding:6px 10px;
  border-radius:10px;
  font:800 11.5px/1.1 inherit;
  cursor:pointer;
  white-space:nowrap;
}
.worked-visual-toggle:hover,.worked-visual-toggle:focus-visible{background:#f7f3ff;outline:2px solid rgba(107,63,240,.25);outline-offset:2px}
.worked-visual-toggle-secondary{display:inline-flex;align-items:center;justify-content:center}

.worked-control-column .worked-static-stack{display:grid!important;grid-template-columns:1fr!important;gap:6px!important}
.worked-control-column .worked-static-step{
  display:grid;
  grid-template-columns:28px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:start;
  min-height:0!important;
  padding:7px 8px!important;
  border:1px solid #e3e8f1;
  border-radius:11px;
  background:#fff;
}
.worked-control-column .worked-static-step strong{font-size:13.5px!important;line-height:1.3!important}
.worked-control-column .worked-static-step p{display:block!important;font-size:12px!important;line-height:1.4!important;margin:2px 0 0!important}
.worked-summary-math{font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;color:#5c36de!important;font-weight:700}

/* Visual is present in the DOM for exactness and assistive metadata, but consumes no layout until requested. */
.worked-control-column .worked-visual-drawer{
  margin-top:9px;
  min-height:250px!important;
  max-height:360px;
  padding:8px!important;
  overflow:auto;
  transition:opacity .18s ease,transform .18s ease;
}
.worked-control-column .worked-visual-drawer.is-visual-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  max-height:1px!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  clip-path:inset(50%);
  opacity:0;
  pointer-events:none;
  left:-10000px;
  top:0;
}
.worked-control-column .worked-visual-drawer.is-visual-open{position:relative!important;left:auto;top:auto;opacity:1;pointer-events:auto}
.worked-control-column .worked-visual-drawer svg{min-height:210px;max-height:300px}

.worked-solution-column{min-width:0;min-height:0;display:flex}
.phase57-worked-grid .worked-notebook-large{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  border-radius:15px;
  box-shadow:0 10px 30px rgba(31,42,82,.05);
}
.phase57-worked-grid .notebook-top{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 12px!important;
}
.phase57-worked-grid .notebook-top>div{min-width:0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.phase57-worked-grid .notebook-top span{font-size:11px!important}
.phase57-worked-grid .notebook-top small{font-size:12px!important;color:#5f38df;font-weight:800}

.worked-method-tabs{
  display:flex;
  gap:6px;
  padding:7px 10px 8px;
  border-bottom:1px solid #e2e7f0;
  background:#fbfcff;
  overflow-x:auto;
  scrollbar-width:thin;
}
.worked-method-tab{
  flex:0 0 auto;
  min-width:145px;
  border:1px solid #e0e5ef;
  background:#fff;
  color:#102347;
  padding:7px 10px;
  border-radius:10px;
  text-align:left;
  cursor:pointer;
}
.worked-method-tab strong{display:block;font-size:12px;line-height:1.18}
.worked-method-tab small{display:block;margin-top:2px;font-size:10px;color:#6f7c91}
.worked-method-tab.is-active{border-color:#8f6cff;background:#f3efff;color:#5630d7;box-shadow:inset 0 -2px 0 #6b3ff0}
.worked-method-tab:focus-visible{outline:3px solid rgba(107,63,240,.28);outline-offset:2px}
.worked-single-method{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid #e2e7f0;background:#fbfcff}
.worked-single-method span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:#7b69a8}.worked-single-method strong{font-size:12px}.worked-single-method small{font-size:10px;color:#6f7c91}

.phase57-worked-grid .notebook-paper{
  min-height:0;
  overflow:auto!important;
  scrollbar-width:thin;
  scrollbar-gutter:stable;
  padding:18px 22px 22px 46px!important;
}
.phase57-worked-grid .notebook-question{
  font-size:18.5px!important;
  line-height:1.5!important;
  margin-bottom:13px!important;
}
.phase57-worked-grid .worked-step-trigger.notebook-line{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:start;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  padding:8px 10px 9px 3px;
  margin:5px 0 7px!important;
  color:#4932bd;
  text-align:left;
  cursor:pointer;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.phase57-worked-grid .worked-step-trigger:hover{background:rgba(247,243,255,.72);border-color:#d8cbff}
.phase57-worked-grid .worked-step-trigger:focus-visible{outline:3px solid rgba(107,63,240,.26);outline-offset:1px;background:#f8f5ff}
.phase57-worked-grid .worked-step-trigger.is-selected{background:#f3efff;border-color:#a68dff;box-shadow:0 5px 16px rgba(107,63,240,.08)}
.phase57-worked-grid .notebook-step-number{width:27px!important;height:27px!important;font-size:12px!important;margin-top:1px}
.worked-step-copy{min-width:0;display:block}
.phase57-worked-grid .worked-step-copy strong{font-size:17px!important;line-height:1.35!important;color:#4d34bd}
.phase57-worked-grid .worked-step-copy p{font-size:16px!important;line-height:1.5!important;margin:3px 0 0!important;color:#4d3cb2}
.worked-step-math{
  display:block;
  width:max-content;
  max-width:100%;
  margin-top:6px;
  padding:6px 10px;
  border-radius:9px;
  background:linear-gradient(90deg,rgba(113,71,242,.10),rgba(20,160,146,.08));
  color:#4f2fd0;
  font-size:18px;
  line-height:1.42;
  font-weight:800;
  white-space:normal;
  overflow-wrap:anywhere;
}
.worked-step-explain-hint{display:block;margin-top:5px;font-family:Arial,sans-serif;font-size:9.5px!important;font-weight:800;color:#8a78b9;letter-spacing:.02em}
.phase57-worked-grid .notebook-answer{margin-top:12px!important;padding:11px 13px!important}
.phase57-worked-grid .notebook-answer span{font-size:9.5px!important}
.phase57-worked-grid .notebook-answer strong{font-size:25px!important}

/* Step explanation dialog */
.worked-step-modal[hidden]{display:none!important}
.worked-step-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:18px}
.worked-step-modal-backdrop{position:absolute;inset:0;background:rgba(4,17,41,.48);backdrop-filter:blur(3px)}
.worked-step-dialog{
  position:relative;
  z-index:1;
  width:min(720px,calc(100vw - 32px));
  max-height:min(760px,calc(100dvh - 36px));
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
  border:1px solid #d8dfea;
  border-radius:18px;
  background:#fff;
  box-shadow:0 28px 80px rgba(4,17,41,.28);
  color:#0b1d3a;
}
.worked-step-dialog:focus{outline:none}
.worked-step-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid #e5e9f1;background:#fbfcff}
.worked-step-dialog-head span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:900;color:#6b3ff0}.worked-step-dialog-head h3{margin:3px 0 0;font-size:21px;line-height:1.2}
.worked-step-dialog-body{overflow:auto;padding:18px;scrollbar-width:thin}
.worked-modal-focus{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;padding:14px;border-radius:14px;background:linear-gradient(135deg,#f5f1ff,#f5fffd);border:1px solid #d8cbff}
.worked-modal-number{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#6b3ff0;color:#fff;font-size:15px;font-weight:900}.worked-modal-focus strong{display:block;font-size:17px}.worked-modal-focus p{margin:4px 0 0;font-size:14px;line-height:1.5;color:#46546a}.worked-modal-math{margin-top:9px;padding:9px 11px;border-radius:10px;background:#fff;border:1px solid #ddd4ff;font-size:20px;font-weight:850;color:#4d2bd1;overflow-wrap:anywhere}
.worked-modal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}.worked-modal-grid article{padding:12px;border:1px solid #e1e6ef;border-radius:12px;background:#fff}.worked-modal-grid article span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:900;color:#0a887d}.worked-modal-grid article:nth-child(2) span{color:#bd6c1a}.worked-modal-grid article:nth-child(3) span{color:#5b3bd2}.worked-modal-grid p{margin:5px 0 0;font-size:13px;line-height:1.48;color:#48566b}
.worked-step-dialog-actions{display:flex;justify-content:space-between;gap:10px;padding:13px 18px;border-top:1px solid #e5e9f1;background:#fbfcff}.worked-step-dialog-actions button{min-height:38px;padding:8px 13px;border-radius:10px;font-weight:800;cursor:pointer}.worked-step-dialog-actions button:disabled{opacity:.4;cursor:not-allowed}.secondary-button{border:1px solid #d6dce7;background:#fff;color:#243654}.primary-button{border:0;background:#6b3ff0;color:#fff}
html.worked-modal-open{overflow:hidden}

@media (min-width:1101px) and (max-width:1365px){
  .phase57-worked-grid{grid-template-columns:minmax(255px,.55fr) minmax(0,1.65fr)!important;gap:9px!important}
  .worked-control-column .worked-method-card{padding:9px!important;gap:7px!important}
  .worked-control-column .worked-method-card h3{font-size:17px!important}
  .worked-control-column .worked-static-step{grid-template-columns:25px minmax(0,1fr)!important;padding:5px 6px!important;gap:6px!important}
  .worked-control-column .worked-static-step strong{font-size:13px!important}.worked-control-column .worked-static-step p{font-size:11.8px!important;line-height:1.36!important}
  .worked-control-column .phase3-stage-note{font-size:10.5px!important}
  .phase57-worked-grid .notebook-paper{padding:14px 15px 18px 39px!important}
  .phase57-worked-grid .notebook-question{font-size:17px!important}
  .phase57-worked-grid .worked-step-copy strong{font-size:15.5px!important}.phase57-worked-grid .worked-step-copy p{font-size:15px!important;line-height:1.45!important}.worked-step-math{font-size:16.5px}
  .phase57-worked-grid .worked-step-trigger.notebook-line{padding:5px 7px 6px 2px;margin:3px 0 4px!important;gap:9px!important}
  .phase57-worked-grid .notebook-answer strong{font-size:23px!important}
  .worked-method-tab{min-width:132px;padding:6px 8px}.worked-method-tab strong{font-size:11.5px}.worked-method-tab small{font-size:9.5px}
}

@media (min-width:1101px) and (max-height:680px){
  .worked-control-column .worked-static-step p{display:none!important}
  .worked-control-column .worked-static-step{min-height:29px!important;align-items:center}
  .worked-control-column .phase3-stage-note{display:none!important}
  .worked-control-column .worked-method-card h3{font-size:17px!important}
  .phase57-worked-grid .notebook-question{font-size:17.5px!important;margin-bottom:8px!important}
  .phase57-worked-grid .worked-step-copy strong{font-size:16px!important}.phase57-worked-grid .worked-step-copy p{font-size:15.5px!important}.worked-step-math{font-size:16px;padding:4px 8px;margin-top:4px}.worked-step-explain-hint{font-size:9px!important;margin-top:3px}
  .worked-method-tabs{padding:5px 8px 6px}.worked-method-tab{padding:5px 7px}
  .phase57-worked-grid .notebook-top{min-height:39px;padding:5px 9px!important}
}

@media (max-width:1100px){
  .phase57-worked-grid{grid-template-columns:1fr!important;height:auto!important}
  .worked-control-column{overflow:visible!important}
  .worked-control-column .worked-method-card{min-height:auto}
  .worked-solution-column{min-height:560px}
  .worked-method-tabs{position:sticky;top:0;z-index:2}
  .phase57-worked-grid .worked-step-copy strong{font-size:17.5px!important}.phase57-worked-grid .worked-step-copy p{font-size:16.5px!important}.worked-step-math{font-size:18px}
  .worked-modal-grid{grid-template-columns:1fr}
}

@media (max-width:640px){
  .worked-control-column .worked-method-card h3{font-size:18px!important}
  .worked-method-tabs{gap:5px}.worked-method-tab{min-width:150px}
  .phase57-worked-grid .notebook-paper{padding-left:38px!important;padding-right:12px!important}
  .phase57-worked-grid .notebook-question{font-size:18px!important}
  .phase57-worked-grid .worked-step-trigger.notebook-line{grid-template-columns:30px minmax(0,1fr)!important;gap:9px!important;padding-right:3px}
  .phase57-worked-grid .worked-step-copy strong{font-size:17px!important}.phase57-worked-grid .worked-step-copy p{font-size:16px!important}.worked-step-math{font-size:17.5px}
  .worked-step-explain-hint{font-size:9.5px!important}
  .worked-step-modal{padding:8px}.worked-step-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:14px}.worked-step-dialog-head,.worked-step-dialog-body,.worked-step-dialog-actions{padding-left:13px;padding-right:13px}.worked-step-dialog-head h3{font-size:19px}.worked-step-dialog-actions{gap:6px}.worked-step-dialog-actions button{font-size:12px;padding:7px 9px}
}

/* Short-laptop overview mode: show every solution step at once. The modal carries the detailed prose. */
@media (min-width:1101px) and (max-height:680px){
  .phase57-worked-grid .notebook-paper{padding-top:1px!important;padding-bottom:1px!important}
  .phase57-worked-grid .notebook-question{display:none!important}
  .phase57-worked-grid .worked-step-trigger.notebook-line{
    grid-template-columns:27px minmax(0,1fr)!important;
    gap:7px!important;
    min-height:30px;
    padding:3px 6px 3px 2px!important;
    margin:0 0 1px!important;
  }
  .phase57-worked-grid .notebook-step-number{width:22px!important;height:22px!important;font-size:10.5px!important}
  .phase57-worked-grid .worked-step-copy{
    display:grid;
    grid-template-columns:minmax(155px,.82fr) minmax(0,1.18fr);
    gap:8px;
    align-items:center;
  }
  .phase57-worked-grid .worked-step-copy strong{font-size:15.5px!important;line-height:1.2!important}
  .phase57-worked-grid .worked-step-trigger.has-math .worked-step-copy p{display:none!important}
  .phase57-worked-grid .worked-step-trigger.no-math .worked-step-copy p{
    display:block!important;
    margin:0!important;
    font-size:15.5px!important;
    line-height:1.22!important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .phase57-worked-grid .worked-step-math{
    margin:0!important;
    padding:3px 7px!important;
    width:auto;
    font-size:15.5px!important;
    line-height:1.2!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .phase57-worked-grid .worked-step-explain-hint{display:none!important}
  .phase57-worked-grid .notebook-answer{margin-top:2px!important;padding:2px 8px!important;min-height:29px;display:flex;align-items:center;gap:10px}
  .phase57-worked-grid .notebook-answer span{margin:0}.phase57-worked-grid .notebook-answer strong{font-size:23px!important;margin:0}
}

@media (max-width:1100px){
  .phase57-worked-grid .notebook-question{display:block!important}
  .phase57-worked-grid .worked-step-copy{display:block}
}