@font-face{font-family:Fredoka;src:url('/simulations/vendor/fonts/fredoka-400-latin.woff2') format('woff2');font-weight:400 650;font-display:swap}
:root{font-family:'Nunito',ui-rounded,'Segoe UI',system-ui,sans-serif;color:#23352d;background:#f8f7f1;font-synthesis:none;--green:#256647;--muted:#6d766f;--line:#e2e5da;--honey:#f4c86a}
*{box-sizing:border-box}body{margin:0}button,select{font:inherit;color:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #ae792b;outline-offset:3px}button{border:1px solid var(--line);background:#fff;border-radius:10px;min-height:42px;padding:10px 14px;font-size:13px;font-weight:650;transition:background .15s,border-color .15s}button:hover{background:#f0f3e9;border-color:#b5c6b8}button[aria-pressed=true]{background:#e5efdf;border-color:#b8cbb0;color:#21563d}button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}h1,h2,h3,p{margin:0}h1,h2{font-family:Fredoka,ui-rounded,'Segoe UI',sans-serif}h1{font-size:39px;line-height:1.08;letter-spacing:-1.5px;font-weight:650}h2{font-size:18px}h3{font-size:12px;letter-spacing:.02em}p{line-height:1.65}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
#lab{min-height:100svh;max-width:1920px;margin:auto;background:#f8f7f1}.topbar{height:76px;padding:0 32px;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--line)}.brand{color:#24392e;font-size:23px;font-weight:800;text-decoration:none;letter-spacing:-1px;display:flex;align-items:center}.brand span{color:#66863d}.brand svg{margin-inline-start:8px;width:26px;fill:#f2cd78;stroke:#8c692b;stroke-width:1.5}.collection{font-size:10px;font-weight:750;letter-spacing:2.4px;color:#687463}.language{margin-inline-start:auto}.language select{background:transparent;border:1px solid var(--line);border-radius:8px;padding:8px;max-width:160px;font-size:12px}
.workspace{display:grid;grid-template-columns:244px minmax(0,1fr) 270px;min-height:calc(100svh - 76px)}.explorer{padding:32px 22px 22px;border-inline-end:1px solid var(--line);display:flex;flex-direction:column}.eyebrow{text-transform:uppercase;color:#54734c;font-size:9px;font-weight:800;letter-spacing:1.6px}.intro h1{margin:12px 0}.intro p{font-size:13px;color:var(--muted);max-width:200px}.mode-switch{display:flex;gap:3px;background:#eaece3;padding:4px;border-radius:12px;margin:26px 0}.mode-switch button{border:0;flex:1;padding:7px 4px;min-height:36px;font-size:12px;background:transparent;white-space:nowrap}.mode-switch button[aria-pressed=true]{background:#fff;box-shadow:0 1px 4px #283c2312}.parts-heading{display:flex;align-items:center;justify-content:space-between}.parts-heading h2{font-size:13px;font-weight:700}.parts-heading>span{background:#e9ecdf;padding:2px 6px;border-radius:4px;font-size:10px;color:#56694d}.select-hint{font-size:10px;color:var(--muted);margin:6px 0 13px}#parts{display:flex;flex-direction:column;gap:3px}.part-button{border:1px solid transparent;text-align:start;background:transparent;display:flex;align-items:center;gap:11px;padding:7px 10px;min-height:38px;font-size:12px;font-weight:550}.part-button .num{font-size:9px;color:#8b9286;font-variant-numeric:tabular-nums;width:16px}.part-button .check{margin-inline-start:auto;font-size:10px;color:#517843}.part-button[aria-pressed=true]{border-color:#d4dfc8;background:#e9efdf;font-weight:750}.part-button[aria-pressed=true] .num{color:#567842}.discovery{margin-top:auto;padding-top:25px;color:#65745e;font-size:10px}.progress-track{height:3px;background:#e2e7da;margin-top:9px;overflow:hidden;border-radius:2px}#progress-fill{height:100%;width:10%;background:#719252;transition:width .25s}
.stage{position:relative;min-width:0;min-height:740px;background:radial-gradient(ellipse at 50% 50%,#f1f2e5 0%,#e9ecdc 62%,#e8ebdb 100%);display:flex;flex-direction:column;overflow:hidden}.stage-top{z-index:3;display:flex;align-items:center;justify-content:space-between;padding:22px 24px;gap:12px}.species{font-size:10px;display:flex;align-items:center;gap:7px;color:#516548}.species .dot{width:5px;height:5px;border-radius:50%;background:#6b8a56}.species i{font-size:10px;color:#7f8979;font-weight:400;margin-inline-start:6px}.icon-button{width:38px;height:38px;min-height:38px;padding:8px;display:grid;place-items:center;background:#f8f9f080;border-color:#d9dfcd;border-radius:10px}.icon-button svg{width:16px;height:16px}#viewport{position:relative;width:100%;flex:1;min-height:440px}#cat-canvas{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none;cursor:grab}#cat-canvas:active{cursor:grabbing}#leader-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}#leader-lines path{fill:none;stroke:#8c9c7c;stroke-width:1;opacity:.55}#leader-lines path.active{stroke:#567e3b;stroke-width:1.5;opacity:1}#labels{position:absolute;inset:0;pointer-events:none}.model-label{position:absolute;left:0;top:0;pointer-events:auto;font-size:10px;min-height:29px;padding:6px 9px;border-radius:7px;border:1px solid #dce1d1;background:#fafbf4ed;box-shadow:0 3px 10px #3a542508;white-space:nowrap;color:#506244}.model-label.active{background:#315f3e;color:#fff;border-color:#315f3e}.model-label .label-dot{display:inline-block;width:4px;height:4px;background:#819168;border-radius:50%;margin-inline-end:6px}.model-label.active .label-dot{background:#d6e8a9}#loading{position:absolute;inset:40% 20px auto;text-align:center;color:#566a4b;font-size:13px}#fallback{padding:50px 32px;text-align:center;color:#516548}#fallback>span{font-size:80px}#fallback p{max-width:360px;margin:auto}
.view-bar{display:flex;align-items:center;justify-content:center;gap:20px;z-index:2;margin:10px 18px}.view-presets{display:flex;gap:3px;border:1px solid #d7ddca;background:#f7f8ef90;padding:4px;border-radius:11px}.view-presets button{font-size:11px;background:transparent;border:0;padding:7px 13px;min-height:32px}.view-presets button[aria-pressed=true]{background:#fff;box-shadow:0 1px 4px #22351c0a}.zoom-controls{display:flex;align-items:center;gap:8px}.zoom-controls>span{font-size:19px;color:#6b7e5e}.zoom-controls .icon-button{font-size:18px;width:32px;height:32px;min-height:32px;padding:3px}.gesture-hint{font-size:10px;color:#7d8870;text-align:center;margin-top:2px;line-height:1.4}.stage-controls{display:flex;justify-content:center;gap:7px;padding:24px 16px 18px}.stage-controls button{display:flex;align-items:center;gap:7px;background:#f6f8ee9c;border-color:#d6deca;font-size:11px;min-height:37px;padding:8px 11px}.stage-controls button[aria-pressed=true]{background:#e0e9d2;border-color:#bacba7}.stage-controls button svg{width:15px;height:15px}.model-note{text-align:center;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:#839172;margin-bottom:21px}
.details{padding:35px 26px 24px;display:flex;flex-direction:column;border-inline-start:1px solid var(--line)}.part-illustration{margin:24px 0 20px;width:74px;height:74px;background:#ede9dc;border:1px solid #e5dfcd;border-radius:23px;display:grid;place-items:center;color:#8b673e}.part-illustration svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}#part-name{font-size:33px;font-weight:600;letter-spacing:-.7px}.tiny-rule{width:25px;height:3px;background:#d8b779;display:block;margin:20px 0 27px}.details h3{margin-bottom:8px;color:#3c5141}.details p{font-size:12px;color:#6d776c}#part-description{margin-bottom:26px}.fact{padding:19px 16px;background:#f0eee1;border:1px solid #e5e3d4;border-radius:12px;position:relative}.fact h3{font-size:11px;padding-inline-start:16px}.fact .fact-star{position:absolute;top:18px;inset-inline-start:15px;color:#a48044}.fact p{font-size:11px;color:#72755e}.primary{background:#2e6346!important;color:#fff!important;border-color:#2e6346!important;min-height:42px}.primary:hover{background:#214d35!important}#next-explore{margin-top:22px;width:100%;font-size:11px}.anatomy-note{margin-top:auto!important;padding-top:32px;font-size:9px!important;line-height:1.6!important;color:#8a9083!important}.quiz-symbol{display:grid;place-items:center;width:70px;height:70px;border-radius:24px;font:500 42px Fredoka,sans-serif;color:#8c6c34;background:#f5e5b9;margin:24px 0}#quiz-question{font-size:29px;line-height:1.2;margin-bottom:15px}#quiz-feedback{min-height:48px;padding-top:20px;color:#287044;font-weight:700}.quiz-score{margin-top:23px}.quiz-active .model-label{font-size:0!important;width:25px;height:25px;min-height:25px;padding:0;border-radius:50%;background:#f9faf1cf}.quiz-active .label-dot{width:5px;height:5px;margin:0}.quiz-active #leader-lines{display:none}.quiz-active .model-label.active{background:#315f3e}.quiz-active #labels{display:none}
html[data-kb-host=offload] .workspace{grid-template-columns:1fr 250px;min-height:100svh}html[data-kb-host=offload] .explorer,html[data-kb-host=offload] .topbar,html[data-kb-host=offload] .stage-controls,html[data-kb-host=offload] .view-bar,html[data-kb-host=offload] #fullscreen{display:none}html[data-kb-host=offload] .stage{min-height:100svh}html[data-kb-host=offload] .gesture-hint{padding-bottom:20px}
@media(min-width:1550px){.workspace{grid-template-columns:280px minmax(0,1fr) 310px}.explorer{padding:40px 32px}.details{padding:42px 32px}h1{font-size:44px}.part-button{min-height:42px}.details p{font-size:14px}.fact p{font-size:12px}}
@media(max-width:1100px){.workspace{grid-template-columns:210px minmax(0,1fr) 230px}.explorer{padding:27px 17px}.details{padding:30px 18px}h1{font-size:34px}.stage-top{padding:18px 15px}.species i{display:none}.stage-controls{gap:4px;padding-inline:8px}.stage-controls button{padding:7px;font-size:10px}.view-bar{gap:9px;margin-inline:8px}.view-presets button{padding-inline:8px}.model-label{font-size:9px}.stage{min-height:725px}}
@media(max-width:850px){.workspace{grid-template-columns:200px minmax(0,1fr)}.details{grid-column:2;border-top:1px solid var(--line);padding:22px}.explorer{grid-row:1/3}.stage{min-height:610px}#viewport{min-height:350px}.part-illustration{display:none}#part-name{font-size:26px;margin:10px 0}.tiny-rule{display:none}.details h3{margin-top:16px}.details p{font-size:12px}#part-description{margin-bottom:16px}.fact{padding:14px}.fact h3{margin-top:0}.fact .fact-star{top:13px}.anatomy-note{padding-top:22px}.quiz-symbol{width:45px;height:45px;margin:12px 0;font-size:28px}html[data-kb-host=offload] .workspace{grid-template-columns:1fr}html[data-kb-host=offload] .details{grid-column:1}html[data-kb-host=offload] .stage{min-height:70svh}}
@media(max-width:580px){.topbar{height:58px;padding:0 16px;gap:14px}.brand{font-size:19px}.brand svg{width:21px}.collection{font-size:8px;letter-spacing:1px}.language select{max-width:93px;font-size:10px;padding:6px}.workspace{display:flex;flex-direction:column}.explorer{display:contents}.intro{padding:24px 20px 12px}.intro h1{font-size:34px;margin:8px 0}.intro p{max-width:none;font-size:12px}.intro .eyebrow{font-size:8px}.mode-switch{order:1;margin:0 18px 16px;max-width:320px}.stage{order:2;min-height:535px;border-block:1px solid var(--line)}#viewport{min-height:310px}.stage-top{padding:13px 16px}.species i{display:inline}.view-bar{gap:15px;margin-top:4px}.stage-controls{padding:17px 10px 12px}.stage-controls button{font-size:10px;padding:8px 10px}.model-note{margin-bottom:12px;font-size:7px}.gesture-hint{font-size:9px}.parts-heading{order:3;padding:22px 20px 0}.select-hint{order:4;padding:0 20px;margin:6px 0 12px}#parts{order:5;padding:0 15px;display:grid;grid-template-columns:1fr 1fr;gap:4px}.part-button{background:#f0f1e8;border-color:#e6e8dd;min-height:42px}.discovery{order:6;padding:19px 20px 24px;margin-top:0}.details{order:7;border-top:1px solid var(--line);border-inline-start:0;padding:24px 20px}.part-illustration{display:grid;float:inline-end;width:58px;height:58px;margin:0 0 12px 12px;border-radius:18px}.part-illustration svg{width:36px;height:36px}#part-name{margin:9px 0 18px}.details h3{margin-top:0}.details p{font-size:13px}.fact p{font-size:12px}.anatomy-note{font-size:10px!important}.quiz-active .details{order:2}.quiz-active .stage{order:3}.quiz-active .anatomy-note{display:none}.quiz-symbol{display:none}#quiz-question{font-size:25px;margin:8px 0}#quiz-feedback{min-height:30px;padding-top:10px}.quiz-score{margin-top:10px}.quiz-active .details{padding-block:18px}html[data-kb-host=offload] .workspace{display:flex}html[data-kb-host=offload] .parts-heading,html[data-kb-host=offload] .select-hint,html[data-kb-host=offload] #parts,html[data-kb-host=offload] .discovery,html[data-kb-host=offload] .intro,html[data-kb-host=offload] .mode-switch{display:none}html[data-kb-host=offload] .stage{min-height:560px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

.library-picker{display:flex;align-items:center;gap:10px;margin-inline-start:auto}.library-picker label{font-size:10px;color:#69775f}.library-picker select{background:#fff;border:1px solid #d8dfcf;border-radius:9px;min-height:36px;padding:7px 28px 7px 10px;min-width:145px;font-size:12px}.language{margin-inline-start:0}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-block:19px}.mode-switch #match{grid-column:1/-1}

/* Matching keeps its named cards and the unlabelled anatomical targets in the
   same viewport. The original sidebar remains available in Explore and Quiz. */
.match-active #parts,
.match-active .parts-heading,
.match-active .select-hint,
.match-active .discovery{display:none!important}
.match-active #labels-toggle{display:none}
.match-active #quiz-question{font-size:27px}
.match-active .quiz-symbol{background:#e4ebd7;color:#446d3c;font-size:0}
.match-active .quiz-symbol::after{content:'↔';font-size:35px}
.match-active #viewport{isolation:isolate}
.match-active #leader-lines{z-index:1}
.match-active #labels{z-index:3}

.model-label.match-label{
  display:flex;align-items:center;gap:8px;width:max-content;max-width:28%;
  min-width:64px;min-height:38px;padding:8px 11px;border-radius:9px;
  background:#fffdf6;border:1px solid #c7cfb8;color:#42583d;
  box-shadow:0 3px 10px #3548220d;font-size:11px;font-weight:700;
  line-height:1.25;text-align:start;white-space:normal;overflow-wrap:anywhere;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
}
.model-label.match-label .label-dot{
  display:block;flex:0 0 8px;width:8px;height:8px;margin:0;
  border:2px solid #8a9c6b;background:#fffdf6;border-radius:50%;
}
.model-label.match-label:hover{background:#f5f7eb;border-color:#8a9c6b}
.model-label.match-label.pending,
.model-label.match-label.active,
.model-label.match-label.dragging{
  background:#fff1c9;border-color:#b38a39;color:#5f461c;
  box-shadow:0 0 0 3px #d8b25b26,0 4px 12px #5c472318;
}
.model-label.match-label.pending .label-dot,
.model-label.match-label.active .label-dot,
.model-label.match-label.dragging .label-dot{border-color:#b38a39;background:#d6ac50}
.model-label.match-label:active,
.model-label.match-label.dragging{cursor:grabbing}
.model-label.match-label.matched,
.model-label.match-label.matched:disabled{
  opacity:1;background:#e6f0df;border-color:#78a16a;color:#2b5d3c;
  box-shadow:none;cursor:default;
}
.model-label.match-label.matched .label-dot{background:#438056;border-color:#438056}

#targets{position:absolute;inset:0;z-index:2;pointer-events:none}
.match-target{
  position:absolute;display:grid;place-items:center;width:var(--target-size,32px);height:var(--target-size,32px);
  min-width:var(--target-size,32px);min-height:var(--target-size,32px);padding:0;border:0;border-radius:50%;
  transform:translate(-50%,-50%);background:transparent;box-shadow:none;
  pointer-events:auto;touch-action:none;cursor:crosshair;
}
.match-target::before{
  content:'';width:var(--dot-size,14px);height:var(--dot-size,14px);border-radius:50%;
  background:#fffdf6;border:2px solid #8c7849;
  box-shadow:0 1px 5px #243b3a40,0 0 0 3px #fffdf62e;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.match-target:hover,
.match-target[aria-pressed=true]{background:transparent;border:0}
.match-target:hover::before,
.match-target.active::before,
.match-target.pending::before,
.match-target.hovered::before,
.match-target.over::before{
  background:#f4cf75;border-color:#a27525;
  box-shadow:0 0 0 5px #f4cf754d,0 1px 5px #243b3a40;
}
.match-target.matched,
.match-target.matched:disabled{opacity:1;cursor:default;background:transparent}
.match-target.matched::before{
  background:#438056;border-color:#fffdf6;
  box-shadow:0 0 0 2px #438056,0 1px 5px #243b3a30;
}
.match-target.matched::after{
  content:'✓';position:absolute;color:white;font-size:9px;font-weight:900;line-height:1;
}
.match-active #leader-lines path{
  fill:none;stroke:#4b875c;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;opacity:.9;vector-effect:non-scaling-stroke;
}
.match-active #leader-lines path.matched{stroke:#4b875c;stroke-width:2;opacity:.9}
.match-active #connection-preview{
  fill:none;stroke:#b88a32;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:5 4;opacity:1;pointer-events:none;
}
.match-active #connection-preview.invalid{stroke:#b56b55}

@media(max-width:850px){
  .library-picker label{display:none}.topbar{gap:15px}.collection{display:none}
  .model-label.match-label{max-width:29%;min-width:58px;padding:7px 9px;font-size:10px}
}
@media(max-width:580px){
  .library-picker{gap:0}.library-picker select{min-width:110px;max-width:125px;padding:6px;font-size:11px}.topbar{gap:9px}
  .mode-switch{grid-template-columns:repeat(3,1fr);max-width:none;margin:0 18px 16px}
  .mode-switch #match{grid-column:auto}.mode-switch button{font-size:10px;padding:7px 3px;white-space:normal}
  .match-active .details{order:2;padding:16px 20px}
  .match-active .stage{order:3;min-height:545px}
  .match-active #viewport{min-height:340px}
  .match-active .anatomy-note,.match-active .quiz-symbol{display:none}
  .match-active #quiz-question{font-size:23px}
  .match-active .details #game-hint{font-size:11px}
  .match-active .details #quiz-feedback{font-size:11px;min-height:26px}
  .match-active .details .quiz-score{font-size:10px;margin-top:8px}
  .model-label.match-label{max-width:27%;min-width:55px;min-height:36px;gap:6px;padding:7px 8px;font-size:10px}
  .model-label.match-label .label-dot{flex-basis:7px;width:7px;height:7px}
  .match-active #leader-lines path{stroke-width:1.7}
  .match-active #connection-preview{stroke-width:2}
}