/* Model Forge: the AI Labs look (deep green, gold, mint), with big cards,
   one step at a time, and big, clearly labelled controls. */
.mf-page button, .mf-page .btn, .mf-page select, .mf-page input:not([type=range]):not([type=checkbox]):not([type=radio]) { min-height: 44px; }
.mf-page :focus-visible { outline: 3px solid var(--chalk); outline-offset: 2px; }

/* ---------- hero ---------- */
.mf-hero {
  position: relative; overflow: hidden; display: flex; gap: 24px; align-items: center;
  background: radial-gradient(circle at 88% 12%, rgb(244 200 66 / .35), transparent 38%),
              radial-gradient(circle at 8% 100%, rgb(45 190 143 / .35), transparent 42%),
              linear-gradient(135deg, #0E4D3E, #137A5E);
  color: #FFFFFF; border-radius: 24px; padding: 34px 32px; margin-bottom: 22px; box-shadow: 0 18px 50px rgb(14 77 62 / .18);
}
.mf-hero img { flex: none; border-radius: 22px; }
.mf-hero h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.1; margin: 8px 0 10px; color: #FFFFFF; }
.mf-hero .hl { background: linear-gradient(transparent 64%, rgb(244 200 66 / .85) 64%, rgb(244 200 66 / .85) 90%, transparent 90%); }
.mf-hero p { margin: 0; font-size: 1.12rem; color: #DDF1E9; max-width: 720px; }
.mf-flag { display: inline-block; background: #F4C842; color: #0E4D3E !important; font-weight: 700; border-radius: 999px; padding: 5px 14px; font-size: .92rem !important; }

/* ---------- big cards and numbered titles ---------- */
.mf-card-big { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 26px; margin-bottom: 20px; box-shadow: 0 12px 34px rgb(14 77 62 / .08); }
.mf-card-big > h2 { display: flex; gap: 12px; align-items: center; font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin: 0 0 6px; }
.mf-num { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 1.15rem; }
.mf-sub { color: var(--muted); margin: 0 0 16px; }
.mf-token-form { display: grid; gap: 6px; max-width: 560px; }
.mf-token-form label { font-weight: 600; }
.mf-token-form div { display: flex; gap: 10px; flex-wrap: wrap; }
.mf-token-form input { flex: 1 1 220px; min-width: 0; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.mf-privacy { text-align: center; max-width: 760px; margin: 8px auto 0; }

.mf-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.mf-card { background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mf-card h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 0; }
.mf-card p { margin: 0; }
.mf-card > button { margin-top: auto; align-self: flex-start; }
.mf-card-icon { font-size: 2.2rem; line-height: 1; }
.mf-card.locked { opacity: .9; }
.mf-card.locked .mf-card-icon { filter: grayscale(.6); }
.mf-meta { color: var(--muted); font-size: .92rem; }
.mf-lock { margin-top: auto !important; background: var(--soft); border-radius: 12px; padding: 10px 12px; font-weight: 600; font-size: .95rem; }
.mf-done { font-weight: 700; color: var(--accent); }
.mf-bar { height: 10px; background: var(--soft); border-radius: 999px; overflow: hidden; }
.mf-bar span { display: block; height: 100%; background: var(--mint); }

/* ---------- a project ---------- */
.mf-project-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.mf-project-head h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin: 0; }
.mf-level { background: var(--chalk); color: #0E4D3E; font-weight: 700; border-radius: 999px; padding: 4px 12px; }
.mf-save { margin-left: auto; }
.mf-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; align-items: start; }
.mf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; position: sticky; top: 78px; }
.mf-steps button { width: 100%; text-align: left; display: flex; gap: 10px; align-items: center; border-radius: 14px; background: var(--surface); font-weight: 600; }
.mf-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--accent); font-weight: 700; }
.mf-steps .done .mf-n { background: var(--accent); color: var(--accent-ink); }
.mf-steps .now button { border: 2px solid var(--chalk); background: rgb(244 200 66 / .16); }
.mf-steps .now .mf-n { background: var(--chalk); color: #0E4D3E; }

.mf-step { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; box-shadow: 0 12px 34px rgb(14 77 62 / .08); min-width: 0; }
.mf-step h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 12px; }
.mf-count { margin: 0 0 4px; font-weight: 700; color: var(--gold-text); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.mf-text { font-size: 1.14rem; max-width: 760px; margin: 0 0 12px; }
.mf-widget { margin: 18px 0; padding: 18px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line); min-width: 0; }
.mf-widget textarea, .mf-reflect textarea { width: 100%; border-radius: 12px; border: 1px solid var(--line); padding: 12px; background: var(--surface); }
.mf-stuck { margin-top: 18px; background: var(--soft); border-radius: 16px; padding: 4px 16px; }
.mf-stuck summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.mf-stuck p { margin: 0 0 12px; }
.mf-nav { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; }
.mf-nav button { min-width: 150px; font-size: 1.05rem; }

/* quick check: big answers with a shape each */
.mf-check { margin-top: 20px; border-top: 2px dashed var(--line); padding-top: 16px; }
.mf-check h3 { margin: 0 0 4px; font-family: var(--font-display); }
.mf-q { font-size: 1.12rem; font-weight: 600; margin: 0 0 12px; }
.mf-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.mf-opt { text-align: left; display: flex; gap: 12px; align-items: center; font-size: 1.04rem; padding: 14px 16px; border-radius: 16px; border: 2px solid transparent; min-height: 60px; }
.mf-opt span { font-size: 1.3rem; }
.mf-opt-0 { background: #0E4D3E; color: #FFFFFF; }
.mf-opt-1 { background: #137A5E; color: #FFFFFF; }
.mf-opt-2 { background: #F4C842; color: #0E4D3E; }
.mf-opt-3 { background: #FFFFFF; color: #0E4D3E; border-color: #0E4D3E; }
.mf-opt:disabled { opacity: .5; cursor: default; }
.mf-opt.right { opacity: 1; outline: 4px solid var(--mint); outline-offset: 2px; }
.mf-opt.right::after { content: "✓"; margin-left: auto; font-size: 1.4rem; }
.mf-opt.wrong { opacity: .85; text-decoration: line-through; }
.mf-why { margin: 12px 0 0; font-size: 1.05rem; }
.mf-reflect { margin-top: 20px; display: grid; gap: 8px; }
.mf-reflect label { display: grid; gap: 4px; }
.mf-reflect label span { color: var(--muted); }
.mf-finish { text-align: center; padding: 10px 0; }
.mf-finish .lab-actions { justify-content: center; }
.mf-big { font-size: 3.4rem; margin: 0; }

/* ---------- widgets ---------- */
.mf-chart { width: 100%; max-width: 440px; display: block; margin: 0 auto; touch-action: manipulation; cursor: crosshair; }
.mf-plot { fill: var(--surface); stroke: var(--line); }
.mf-axis { fill: var(--muted); font-size: 14px; font-weight: 600; }
.mf-fruit { font-size: 22px; }
.mf-fruit.faint { opacity: .35; }
.mf-mystery { font-size: 26px; }
.mf-link { stroke: #B8870F; stroke-width: 2; stroke-dasharray: 5 4; }
.mf-ok { fill: rgb(45 190 143 / .25); stroke: #137A5E; stroke-width: 3; }
.mf-bad { fill: rgb(179 38 30 / .12); stroke: #B3261E; stroke-width: 3; stroke-dasharray: 4 3; }
.mf-boundary { stroke: #B8870F; stroke-width: 4; }
.mf-pos { fill: #F4C842; stroke: #0E4D3E; stroke-width: 2; }
.mf-neg { fill: #0E4D3E; }
.mf-pt { font-weight: 700; font-size: 15px; fill: #FFFFFF; }
.mf-pos + .mf-pt { fill: #0E4D3E; }
.mf-key { color: var(--muted); font-size: .95rem; margin: 8px 0 0; text-align: center; }
.mf-result { font-size: 1.12rem; font-weight: 700; margin: 12px 0 0; }
.mf-slider { display: grid; gap: 4px; margin: 0 0 12px; max-width: 420px; }
.mf-slider input { width: 100%; accent-color: var(--accent); height: 32px; }
.mf-field { display: grid; gap: 4px; margin: 0 0 12px; font-weight: 600; max-width: 420px; }
.mf-field select { border-radius: 10px; border: 1px solid var(--line); padding: 8px; background: var(--surface); }
.mf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 14px 0 0; }
.mf-stats div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: grid; }
.mf-stats span { color: var(--muted); font-size: .88rem; }
.mf-stats b { font-family: var(--font-display); font-size: 1.45rem; }
.mf-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.mf-seg { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; align-items: center; }
.mf-seg label { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; cursor: pointer; }
.mf-seg label:has(input:checked) { border: 2px solid var(--chalk); background: rgb(244 200 66 / .16); }
.mf-data summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.mf-data ul, .mf-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.mf-list li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 6px 10px; border-radius: 10px; background: var(--surface); border-left: 5px solid var(--line); }
.mf-list li.ok { border-left-color: var(--mint); }
.mf-list li.bad { border-left-color: var(--danger); }
.mf-list small { color: var(--muted); margin-left: auto; }
.mf-tag { font-size: .8rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: var(--soft); color: var(--accent); }
.mf-tag.spam { background: rgb(244 200 66 / .3); color: #6B4E00; }
.mf-words { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.mf-words h4 { margin: 0 0 6px; }
.mf-words ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.mf-words li { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; }
.mf-words li span:first-child { font-family: var(--font-mono); overflow-wrap: anywhere; }
.mf-wbar { display: block; height: 14px; border-radius: 6px; min-width: 4px; }
.mf-wbar.spam { background: #F4C842; }
.mf-wbar.ham { background: #137A5E; }
.mf-meter { height: 18px; border-radius: 999px; background: var(--soft); overflow: hidden; margin-top: 12px; }
.mf-meter span { display: block; height: 100%; background: linear-gradient(90deg, #2DBE8F, #F4C842); }
.mf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-w { font-family: var(--font-mono); border-radius: 8px; padding: 3px 8px; border: 2px solid var(--line); }
.mf-w.spam { border-color: #B8870F; background: rgb(244 200 66 / .25); }
.mf-w.spam::before { content: "▲ "; font-size: .75em; }
.mf-w.ham { border-color: #137A5E; background: var(--soft); }
.mf-w.ham::before { content: "● "; font-size: .75em; }
.mf-w.unknown { opacity: .6; border-style: dashed; }
.mf-cm { border-collapse: collapse; margin: 12px 0 0; width: 100%; max-width: 560px; background: var(--surface); border-radius: 12px; overflow: hidden; }
.mf-cm caption { text-align: left; font-weight: 700; padding-bottom: 6px; }
.mf-cm th, .mf-cm td { border: 1px solid var(--line); padding: 8px 10px; text-align: center; }
.mf-cm td.ok { background: rgb(45 190 143 / .16); font-weight: 600; }
.mf-cm td.bad { background: rgb(244 200 66 / .22); font-weight: 600; }
.mf-cm tr.ok td:last-child { color: var(--accent); font-weight: 700; }
.mf-cm tr.bad td:last-child { color: var(--danger); font-weight: 700; }
.mf-field-canvas { width: 100%; max-width: 420px; aspect-ratio: 1; border-radius: 16px; border: 1px solid var(--line); display: block; margin: 0 auto; }
.mf-loss { width: 100%; max-width: 360px; height: auto; background: var(--surface); border-radius: 10px; border: 1px solid var(--line); margin-top: 12px; }
.mf-loss polyline { fill: none; stroke-width: 2.5; }
.mf-loss .tr { stroke: #137A5E; }
.mf-loss .te { stroke: #B8870F; stroke-dasharray: 6 4; }
.mf-feats { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.mf-feats legend { font-weight: 700; padding: 0 6px; }
.mf-feats label { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.mf-feats input { width: 22px; height: 22px; accent-color: var(--accent); }

@media (max-width: 900px) {
  .mf-layout { grid-template-columns: minmax(0, 1fr); }
  .mf-layout > nav { min-width: 0; }
  .mf-steps { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 6px; }
  .mf-steps button { width: auto; }
  .mf-two { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .mf-hero { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .mf-hero img { width: 64px; height: 64px; }
  .mf-card-big, .mf-step { padding: 18px; border-radius: 20px; }
  .mf-widget { padding: 12px; }
  .mf-nav button { min-width: 0; flex: 1; }
  .mf-cm th, .mf-cm td { padding: 6px 4px; font-size: .88rem; }
  .mf-words li { grid-template-columns: 90px 1fr; }
}
body.a11y-contrast .mf-step, body.a11y-contrast .mf-card-big { border: 2px solid var(--ink); }

/* ---------- teacher page ---------- */
.mf-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.mf-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; text-decoration: none; color: var(--ink); }
.mf-jump a:hover { border-color: var(--accent); }
.mf-grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mf-access { margin: 18px 0 0; background: var(--soft); border-radius: 14px; padding: 12px 16px; }
.mf-access:empty { display: none; }
.mf-class { border: 1px solid var(--line); border-radius: 18px; padding: 4px 18px; margin-bottom: 12px; background: var(--bg); }
.mf-class > summary { cursor: pointer; min-height: 52px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 1.08rem; }
.mf-class[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.mf-class h4 { margin: 14px 0 6px; font-family: var(--font-display); }
.mf-table-wrap { overflow-x: auto; margin-bottom: 12px; }
.mf-progress { max-width: none; min-width: 640px; }
.mf-progress td { text-align: left; }
.mf-progress td small { display: block; color: var(--muted); }
.mf-progress td.mf-complete { background: rgb(45 190 143 / .16); }
.mf-progress td.mf-none { color: var(--muted); text-align: center; }
.mf-progress th[scope=row] { text-align: left; white-space: nowrap; }
.mf-answers li { margin-bottom: 8px; }
.mf-answer { display: inline-block; background: rgb(244 200 66 / .3); border-left: 4px solid #F4C842; border-radius: 6px; padding: 1px 8px; font-weight: 600; }
.mf-answer::before { content: "✓ "; }
.mf-tick { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; font-weight: 600; margin-bottom: 8px; }
.mf-tick input { width: 22px; height: 22px; accent-color: var(--accent); }
.mf-train-bar { margin-bottom: 14px; }

/* ---------- Phase 2: modern AI, the notebook, live sessions and certificates ---------- */
.mf-new { display: inline-block; vertical-align: middle; background: var(--chalk); color: #0E4D3E; font-family: var(--font-body); font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; margin-left: 6px; }
.mf-livebar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: #0E4D3E; color: #FFFFFF; border-radius: 16px; padding: 10px 16px; margin-bottom: 16px; border-bottom: 4px solid #F4C842; }
.mf-livebar button { background: #FFFFFF; color: #0E4D3E; }
.mf-pause { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgb(14 77 62 / .94); color: #FFFFFF; text-align: center; padding: 24px; }
.mf-pause h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 3rem); margin: 0 0 8px; color: #FFFFFF; }
.mf-pause p { font-size: 1.2rem; margin: 0; }
.mf-keep { text-align: left; max-width: 620px; margin: 20px auto 0; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px; }
.mf-keep h3 { margin: 0 0 10px; font-family: var(--font-display); }
.mf-keep input { width: 100%; border-radius: 10px; border: 1px solid var(--line); padding: 8px 12px; background: var(--surface); }

.mf-hbars { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.mf-hbars li { display: grid; grid-template-columns: minmax(80px, 140px) 1fr minmax(48px, auto); gap: 10px; align-items: center; }
.mf-hb-l { font-weight: 600; overflow-wrap: anywhere; }
.mf-hb-t { height: 16px; background: var(--soft); border-radius: 999px; overflow: hidden; }
.mf-hb-f { display: block; height: 100%; background: linear-gradient(90deg, #137A5E, #2DBE8F); border-radius: 999px; }
.mf-hbars b { font-family: var(--font-mono); font-size: .9rem; text-align: right; }
.mf-mono { font-family: var(--font-mono); font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.mf-gen { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.mf-gen li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.mf-field input:not([type]) , .mf-field input[type=text] { border-radius: 10px; border: 1px solid var(--line); padding: 8px 12px; background: var(--surface); font-weight: 400; }
.mf-seg2 { display: flex; flex-wrap: wrap; gap: 12px; }
.mf-seg2 .mf-field { min-width: 160px; }

/* pixel grids */
.mf-px { display: grid; grid-template-columns: repeat(12, 1fr); width: min(100%, 420px); aspect-ratio: 1; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; touch-action: none; }
.mf-pxc { display: grid; place-items: center; font-family: var(--font-mono); font-size: clamp(.55rem, 1.6vw, .8rem); border: 0; border-right: 1px solid rgb(128 128 128 / .25); border-bottom: 1px solid rgb(128 128 128 / .25); padding: 0; min-height: 0 !important; border-radius: 0; box-shadow: none; }
.mf-px.edit .mf-pxc { cursor: crosshair; }
.mf-px.edit .mf-pxc:focus-visible { outline: 3px solid #F4C842; outline-offset: -3px; position: relative; z-index: 1; }
.mf-conv { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.mf-conv figure { margin: 0; display: grid; gap: 6px; justify-items: center; min-width: 0; }
.mf-conv figure > div { width: 100%; display: grid; justify-items: center; }
.mf-conv .mf-px { width: min(100%, 300px); }
.mf-conv figcaption, .mf-kin legend { font-weight: 700; }
.mf-ker { border-collapse: collapse; font-family: var(--font-mono); font-size: 1.05rem; }
.mf-ker td { border: 2px solid #0E4D3E; width: 52px; height: 44px; text-align: center; background: var(--surface); }
.mf-kin { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 60px); gap: 6px; justify-content: center; }
.mf-kin input { width: 60px; min-height: 44px; text-align: center; font-family: var(--font-mono); font-size: 1.05rem; border: 2px solid #0E4D3E; border-radius: 8px; background: var(--surface); }
.mf-big-shape { font-size: 2rem; color: #0E4D3E; }

/* embeddings and attention */
.mf-wlab { font-size: 13px; fill: var(--muted); }
.mf-wlab.now { fill: #0E4D3E; font-weight: 700; font-size: 15px; }
.mf-analogy { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 1.2rem; }
.mf-analogy select { min-height: 44px; border-radius: 10px; border: 1px solid var(--line); padding: 6px 10px; background: var(--surface); font-size: 1.05rem; }
.mf-sentence { font-size: 1.25rem; line-height: 2.2; }
.mf-sentence .att { padding: 3px 6px; border-radius: 6px; background: rgb(244 200 66 / var(--w)); }
.mf-sentence mark.q { background: #0E4D3E; color: #FFFFFF; padding: 3px 8px; border-radius: 6px; }

/* the grid world */
.mf-gw { display: grid; grid-template-columns: repeat(5, 1fr); width: min(100%, 340px); aspect-ratio: 1; border: 3px solid #0E4D3E; border-radius: 12px; overflow: hidden; background: var(--surface); }
.mf-gwc { display: grid; place-items: center; font-size: clamp(1rem, 4vw, 1.6rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mf-gwc b { color: #0E4D3E; }
.mf-gwc.path { box-shadow: inset 0 0 0 4px #F4C842; }
.mf-rc { margin: 10px 0 0; }
.mf-loss .zero { stroke: var(--line); stroke-dasharray: 4 4; }

/* the Python notebook */
.mf-nb-status { font-weight: 700; margin: 0 0 8px; }
.mf-nb-status.ok { color: var(--accent); }
.mf-nb-label { font-weight: 700; display: block; margin-bottom: 4px; }
.mf-widget .mf-code, .mf-code { width: 100%; font-family: var(--font-mono); font-size: .95rem; line-height: 1.5; tab-size: 4; background: #0C1613; color: #E7EFEC; border: 2px solid #0E4D3E; border-radius: 12px; padding: 12px 14px; white-space: pre; overflow-x: auto; }
.mf-code:focus-visible { outline: 3px solid #F4C842; outline-offset: 2px; }
.mf-out { font-family: var(--font-mono); font-size: .9rem; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--mint); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; }
.mf-out.bad { border-left-color: var(--danger); }

/* teacher: live sessions */
.mf-livecode { font-family: var(--font-mono); font-size: clamp(2.4rem, 8vw, 4rem); letter-spacing: .14em; color: #0E4D3E; background: #FFF6D6; border: 3px solid #F4C842; border-radius: 18px; padding: 8px 20px; display: inline-block; margin: 6px 0; }
.mf-live-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 10px 0; }
.mf-live-tools .mf-field { margin: 0; }
.mf-pbar { height: 12px; background: var(--soft); border-radius: 999px; overflow: hidden; min-width: 120px; }
.mf-pbar span { display: block; height: 100%; background: var(--mint); }

@media (max-width: 700px) {
  .mf-conv { grid-template-columns: minmax(0, 1fr); }
  .mf-hbars li { grid-template-columns: 90px 1fr 52px; gap: 6px; }
}
.mf-live-list { display: grid; gap: 18px; margin-top: 12px; }
.mf-live-list .mf-card { padding: 22px; }
.mf-live-list .mf-livecode { max-width: 100%; overflow-wrap: anywhere; align-self: flex-start; }

/* ---------- a project, laid out like Turtle Range (see CLAUDE.md) ---------- */
.mf-project { display: grid; gap: 18px; padding-block: 8px 40px; }
.mf-project > * { min-width: 0; }
.mf-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 600; }
.mf-crumbs a { color: var(--accent); min-height: 44px; display: inline-flex; align-items: center; }
.mf-crumbs b { color: var(--deep); }
.mf-project .panel { border-radius: 24px; padding: 20px 22px; box-shadow: 0 8px 26px rgb(14 77 62 / .07); min-width: 0; background: var(--surface); border: 1px solid var(--line); }
.mf-icon .ico.mf-glyph { width: 52px; height: 52px; color: var(--deep); stroke-width: 1.8; }
.mf-tile { width: 72px; height: 72px; border-radius: 20px; background: var(--soft); border: 3px solid var(--accent); display: grid; place-items: center; }
.mf-tile .ico.mf-glyph { width: 42px; height: 42px; color: var(--deep); }
.mf-card.locked .mf-tile { border-color: var(--line); filter: grayscale(.4); }
.mf-switch { display: grid; gap: 4px; justify-items: end; font-weight: 600; font-size: .92rem; }
.mf-switch select { min-height: 44px; border-radius: 12px; border: 1px solid var(--line); padding: 6px 10px; background: var(--surface); max-width: 260px; }
.mf-path li { display: contents; }
.mf-path .mf-path-now { display: list-item; list-style: none; margin-left: 8px; color: var(--deep); }
.mf-work { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.6fr); gap: 18px; align-items: start; }
.mf-work.solo { grid-template-columns: minmax(0, 1fr); }
.mf-project h2 { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 14px; }
.mf-project .labs-num { width: 36px; height: 36px; font-size: 1.05rem; flex: none; }
.mf-brief .mf-text { font-size: 1.08rem; }
.mf-todo { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; counter-reset: todo; }
.mf-todo li { counter-increment: todo; display: flex; gap: 10px; align-items: center; background: var(--bg); border-radius: 14px; padding: 10px 12px; font-weight: 600; }
.mf-todo li::before { content: counter(todo); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: #FFFFFF; font-size: .9rem; }
.mf-todo .ico { width: 22px; height: 22px; color: var(--accent); flex: none; }
.mf-bench .mf-widget { margin: 0; border: 0; padding: 0; background: transparent; }
.mf-notebook { display: grid; gap: 14px; }
.mf-notebook h2 { margin-bottom: 0; }
.mf-aim { margin: 0; font-size: 1.08rem; display: flex; gap: 8px; align-items: flex-start; }
.mf-aim .ico, .mf-conclude .ico, .mf-predict legend .ico { width: 22px; height: 22px; color: var(--accent); flex: none; }
.mf-predict { border: 2px solid var(--chalk); border-radius: 18px; padding: 12px 16px 16px; background: #FFFBEA; margin: 0; }
.mf-predict legend { font-weight: 700; padding: 0 6px; display: flex; gap: 6px; align-items: center; }
.mf-predict-opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.mf-popt { min-height: 48px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); font-weight: 600; text-align: left; }
.mf-popt[aria-pressed="true"] { background: var(--deep); color: #FFFFFF; border-color: var(--deep); box-shadow: inset 0 -4px 0 var(--chalk); }
.mf-record { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mf-record button { min-height: 52px; font-size: 1.05rem; }
.mf-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.mf-results { width: 100%; border-collapse: collapse; font-size: 1rem; }
.mf-results th, .mf-results td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.mf-results thead th { background: var(--soft); color: var(--deep); font-size: .9rem; white-space: nowrap; }
.mf-results tbody tr:last-child > * { border-bottom: 0; }
.mf-results tbody tr:hover { background: var(--bg); }
.mf-del { min-width: 44px; }
.mf-conclude { display: grid; gap: 4px; }
.mf-conclude b { display: flex; gap: 6px; align-items: center; }
.mf-conclude span { color: var(--muted); }
.mf-notebook textarea { width: 100%; border-radius: 12px; border: 1px solid var(--line); padding: 12px; background: var(--surface); font-size: 1.05rem; }
.mf-checks .mf-check { margin: 0; border: 0; padding: 0; }
.mf-checks .mf-reflect { margin-top: 0; }
.mf-addmsg { border: 2px dashed var(--accent); border-radius: 18px; padding: 12px 16px; margin: 14px 0; background: var(--bg); }
.mf-addmsg legend { font-weight: 700; padding: 0 6px; color: var(--deep); }
.mf-addmsg input { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); padding: 8px 12px; margin-top: 8px; }
.mf-mine { margin: 6px 0 0; padding-left: 1.1em; }
.mf-finish { text-align: left; }
.mf-finish .mf-big { margin: 0; }
.mf-ican { list-style: none; padding: 0; display: grid; gap: 8px; }
.mf-ican li { border-radius: 14px; padding: 10px 14px; border: 1px solid var(--line); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mf-ican .lv-0 { background: #F3FAF6; } .mf-ican .lv-1 { background: #E1F4EB; } .mf-ican .lv-2 { background: #D2EEDF; border-color: #2DBE8F; } .mf-ican .lv-3 { background: #FFF6D6; border-color: var(--chalk); }
.mf-lv { font-weight: 700; color: var(--deep); min-width: 120px; }
.mf-project .mf-keep { max-width: none; margin: 0; background: var(--surface); }
.mf-downloads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.mf-dl { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 16px 10px; border-radius: 20px; border: 2px solid var(--line); background: var(--bg); min-height: 140px; }
.mf-dl .ico.big { width: 44px; height: 44px; color: var(--deep); }
.mf-dl b { font-size: 1.05rem; color: var(--deep); }
.mf-dl span { font-size: .88rem; color: var(--muted); font-weight: 400; }
.mf-dl:hover { border-color: var(--accent); background: var(--soft); }
.mf-finish-nav { justify-content: center; }
.mf-out-links { margin: 0; }
@media (max-width: 1000px) { .mf-work { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .mf-switch { grid-column: 1 / -1; justify-items: stretch; }
  .mf-switch select { max-width: none; }
  .mf-path .mf-path-now { display: none; }
  .mf-downloads { grid-template-columns: minmax(0, 1fr); }
  .mf-dl { min-height: 0; }
  .mf-project .panel { padding: 16px; }
  .mf-icon .ico.mf-glyph { width: 38px; height: 38px; }
}
.mf-predict legend { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: var(--deep); }
.mf-addmsg legend { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1.02rem; }
.mf-seg label { white-space: nowrap; }
.mf-seg input[type="radio"] { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }

/* ---------- Teacher slides: the presenter view (approved AI Labs slide style) ---------- */
dialog.pv { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #F3FAF6; color: #10211C; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
dialog.pv:not([open]) { display: none; }
dialog.pv::backdrop { background: #0E4D3E; }
.pv-slide { overflow: auto; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.pv-head { display: flex; align-items: center; gap: 18px; background: #0E4D3E; color: #FFFFFF; padding: 16px clamp(16px, 3vw, 40px); border-bottom: 8px solid #F4C842; }
.pv-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1.1; flex: 1; }
.pv-ico { width: 64px; height: 64px; border-radius: 50%; background: #137A5E; border: 3px solid #F4C842; display: grid; place-items: center; font-size: 2rem; flex: none; }
.pv-count { font-family: var(--font-mono); color: #F4C842; }
.pv-title { background: radial-gradient(circle at 85% 20%, rgb(244 200 66 / .25), transparent 40%), radial-gradient(circle at 10% 90%, rgb(45 190 143 / .3), transparent 45%), #0E4D3E; color: #FFFFFF; place-content: center; padding: 6vw; grid-template-rows: none; }
.pv-title h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 5rem); margin: 10px 0 24px; }
.pv-flag { display: inline-block; justify-self: start; background: #F4C842; color: #0E4D3E; border-radius: 999px; padding: 6px 16px; font-weight: 700; margin: 0; }
.pv-hook { font-size: clamp(1.4rem, 2.6vw, 2.1rem); background: rgb(255 255 255 / .1); border: 2px solid #2DBE8F; border-radius: 24px; padding: 18px 24px; margin: 0; }
.pv-teach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(16px, 3vw, 40px); padding: clamp(16px, 3vw, 40px); align-items: start; }
.pv-say p { font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.3; margin: 0 0 16px; }
.pv-say .pv-word { font-size: clamp(1.05rem, 1.6vw, 1.35rem); background: #FFF6D6; border: 2px solid #F4C842; border-radius: 18px; padding: 12px 16px; }
.pv-say .pv-ask { font-size: clamp(1.05rem, 1.6vw, 1.35rem); background: #FFFFFF; border: 2px solid #B8E6CF; border-radius: 18px; padding: 12px 16px; }
.pv-visual { min-width: 0; }
.pv-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pv-box { flex: 1 1 140px; min-height: 110px; display: grid; place-items: center; text-align: center; padding: 12px; border-radius: 20px; background: #E1F4EB; border: 3px solid #B8E6CF; font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.3rem); }
.pv-box.gold { background: #FFF6D6; border-color: #F4C842; }
.pv-arrow { font-size: 2rem; color: #137A5E; font-weight: 700; }
.pv-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pv-col { background: #E1F4EB; border: 3px solid #B8E6CF; border-radius: 22px; padding: 16px 20px; }
.pv-col.gold { background: #FFF6D6; border-color: #F4C842; }
.pv-col h3 { margin: 0 0 8px; font-family: var(--font-display); color: #0E4D3E; font-size: clamp(1.1rem, 1.8vw, 1.5rem); }
.pv-col li { font-size: clamp(1rem, 1.6vw, 1.3rem); margin: 6px 0; }
.pv-bars { display: grid; gap: 12px; }
.pv-bar { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 600; }
.pv-track { height: 30px; background: #FFFFFF; border: 2px solid #B8E6CF; border-radius: 999px; overflow: hidden; }
.pv-track span { display: block; height: 100%; background: #137A5E; border-radius: 999px; }
.pv-bar:nth-child(even) .pv-track span { background: #F4C842; }
.pv-grid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 64px)); gap: 4px; justify-content: center; }
.pv-grid span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; font-weight: 700; font-size: clamp(.9rem, 1.6vw, 1.3rem); border: 1px solid #B8E6CF; }
.pv-big .pv-formula { background: #0E4D3E; color: #FFFFFF; border: 3px solid #F4C842; border-radius: 22px; padding: 18px; text-align: center; font-size: clamp(1.2rem, 2.4vw, 2rem); font-weight: 700; margin: 0 0 14px; }
.pv-big dl { display: grid; gap: 8px; margin: 0; }
.pv-big dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; }
.pv-big dt { background: #FFF6D6; border: 2px solid #F4C842; border-radius: 12px; text-align: center; font-weight: 700; padding: 6px; font-size: 1.2rem; }
.pv-big dd { margin: 0; font-size: clamp(1rem, 1.6vw, 1.3rem); }
.pv-table { width: 100%; border-collapse: collapse; font-size: clamp(1rem, 1.6vw, 1.3rem); background: #FFFFFF; border-radius: 16px; overflow: hidden; }
.pv-table th { background: #E1F4EB; color: #0E4D3E; }
.pv-table th, .pv-table td { padding: 10px 14px; border: 1px solid #B8E6CF; text-align: left; }
.pv-scatter { width: 100%; max-height: 62vh; }
.pv-levels, .pv-words { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: clamp(16px, 3vw, 40px); }
.pv-lv, .pv-words > div { border-radius: 22px; padding: 16px 20px; border: 3px solid #B8E6CF; background: #E1F4EB; }
.pv-lv b, .pv-words b { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.7rem); color: #0E4D3E; }
.pv-lv p, .pv-words p { font-size: clamp(1.05rem, 1.8vw, 1.45rem); margin: 6px 0 0; }
.pv-lv.lv-0 { background: #F3FAF6; } .pv-lv.lv-2 { background: #D2EEDF; border-color: #2DBE8F; } .pv-lv.lv-3, .pv-words > div:nth-child(even) { background: #FFF6D6; border-color: #F4C842; }
.pv-do { padding: clamp(16px, 3vw, 40px); }
.pv-aim { font-size: clamp(1.2rem, 2.2vw, 1.8rem); background: #FFF6D6; border: 3px solid #F4C842; border-radius: 22px; padding: 14px 20px; margin: 0 0 16px; }
.pv-do ol { font-size: clamp(1.1rem, 2vw, 1.6rem); display: grid; gap: 10px; }
.pv-step { display: inline-block; background: #137A5E; color: #FFFFFF; font-weight: 700; border-radius: 999px; padding: 8px 18px; font-size: 1.15rem; }
.pv-hinge { padding: clamp(16px, 3vw, 40px) clamp(16px, 3vw, 40px) 0 calc(clamp(16px, 3vw, 40px) + 1.4em); display: grid; gap: 18px; }
.pv-hinge p { font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 700; margin: 0 0 8px; color: #0E4D3E; }
.pv-hinge div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pv-hinge span { background: #E1F4EB; border: 2px solid #B8E6CF; border-radius: 14px; padding: 10px 12px; font-size: clamp(.95rem, 1.4vw, 1.15rem); }
.pv-hinge span:nth-child(even) { background: #FFF6D6; border-color: #F4C842; }
.pv-bar-bottom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px clamp(12px, 2vw, 28px); background: #FFFFFF; border-top: 1px solid #B8E6CF; }
.pv-bar-bottom button { min-height: 48px; }
.pv-dots { flex: 1; display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.pv-dots i { width: 10px; height: 10px; border-radius: 50%; background: #B8E6CF; }
.pv-dots i.done { background: #137A5E; } .pv-dots i.on { background: #F4C842; outline: 2px solid #0E4D3E; }
.pv-notes { position: fixed; right: 16px; bottom: 84px; width: min(460px, calc(100vw - 32px)); max-height: 55vh; overflow: auto; background: #FFFFFF; border: 3px solid #F4C842; border-radius: 20px; padding: 14px 18px; box-shadow: 0 18px 40px rgb(14 77 62 / .25); }
.pv-notes h3 { margin: 0 0 6px; color: #0E4D3E; }
.pv-notes p { margin: 0 0 8px; font-size: 1rem; }
@media (max-width: 820px) {
  .pv-teach, .pv-compare, .pv-levels, .pv-words { grid-template-columns: minmax(0, 1fr); }
  .pv-hinge div { grid-template-columns: 1fr 1fr; }
  .pv-ico { width: 48px; height: 48px; font-size: 1.5rem; }
}
.mf-slides-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }