/* Scoped to Reading 10; Reading 11 also uses the shared model-explorer styles. */
.logistic-landscape .logistic-panels { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.2rem; }
.logistic-landscape .logistic-panel-title { display: flex; justify-content: space-between; margin: .2rem 1rem .4rem; font-size: .85rem; font-weight: 600; }
.logistic-landscape .logistic-panel-title span { color: #74747c; font-weight: 400; }
.logistic-landscape svg { display: block; width: 100%; height: auto; overflow: visible; }
.logistic-landscape [data-loss-plane] { cursor: crosshair; touch-action: none; }
.logistic-landscape [data-loss-plane]:focus-visible { outline: 3px solid #332288; outline-offset: 2px; border-radius: 6px; }
.logistic-landscape .logistic-key { display: flex; align-items: center; justify-content: center; gap: 1.4rem; font-size: .74rem; }
.logistic-landscape .logistic-key span { display: inline-flex; align-items: center; gap: .4rem; }
.logistic-landscape .logistic-key i { display: inline-block; width: 10px; height: 10px; }
.logistic-landscape .logistic-zero { background: #332288; border-radius: 50%; }
.logistic-landscape .logistic-one { background: #218576; }
.logistic-landscape .logistic-weight-key { color: #aa4058; font-weight: 600; }
.logistic-landscape .logistic-loss-key { display: flex; align-items: center; gap: .65rem; font-size: .7rem; margin: 0 1rem; }
.logistic-landscape .logistic-loss-key i { flex: 1; height: 8px; border-radius: 8px; background: linear-gradient(90deg,#24566a,#85b5af,#f8edd2); }
.logistic-landscape .logistic-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid #e7e5e0; margin-top: 1.2rem; padding-top: 1rem; }
.logistic-landscape .logistic-loss-value { font-size: .78rem; white-space: nowrap; }
.logistic-landscape .logistic-loss-value output { display: inline-block; min-width: 3.4rem; margin-left: .5rem; color: #24566a; font-size: 1.25rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.logistic-landscape .model-note { margin: .85rem 0 0; }
@media (max-width: 650px) {
  .logistic-landscape .logistic-panels { grid-template-columns: 1fr; gap: 1.6rem; }
  .logistic-landscape .logistic-controls { flex-wrap: wrap; justify-content: center; }
}

/* Match the reading's typeface, including SVG labels and control text. */
.sigmoid-explorer,
.logistic-landscape {
  font-family: var(--bs-body-font-family, "Source Sans Pro", sans-serif);
}
.logistic-landscape h4,
.logistic-landscape svg {
  font-family: inherit;
}
.logistic-landscape [data-loss-plane] {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.logistic-landscape [data-loss-plane][data-pointer-focus]:focus-visible {
  outline: none;
}

.sigmoid-explorer {
  margin: 1.7rem 0 2.3rem;
  padding: 1.2rem 1.5rem .6rem;
  border: 1px solid #e5e8e7;
  border-radius: 16px;
  background: linear-gradient(155deg, #f8fbfa, #fff 62%);
  color: #33413e;
  font-variant-numeric: tabular-nums;
}
.sigmoid-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .65rem;
}
.sigmoid-explorer h4 {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}
.sigmoid-readout { text-align: right; }
.sigmoid-readout > span {
  display: block;
  color: #74817c;
  font-size: .72rem;
  line-height: 1.5;
}
.sigmoid-readout output {
  display: block;
  color: #246f63;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.sigmoid-explorer svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  cursor: crosshair;
}
.sigmoid-axis { fill: none; stroke: #cfd8d4; stroke-width: 1; }
.sigmoid-tick { fill: #78847f; font-size: 13px; }
.sigmoid-axis-label { fill: #495a53; font-size: 14px; }
.sigmoid-threshold { stroke: #dce3df; stroke-width: 1; stroke-dasharray: 3 5; }
.sigmoid-curve { fill: none; stroke-width: 3; stroke-linecap: round; }
.sigmoid-negative { stroke: #66569e; }
.sigmoid-positive { stroke: #278474; }
.sigmoid-projection { stroke: #669d90; stroke-width: 1; stroke-dasharray: 3 4; opacity: .55; }
.sigmoid-point-halo { fill: #278474; fill-opacity: .13; }
.sigmoid-point-core { fill: #278474; stroke: white; stroke-width: 3; }
.sigmoid-focus-ring { fill: none; stroke: #332288; stroke-width: 2; opacity: 0; }
.sigmoid-explorer [data-sigmoid-point] { cursor: grab; outline: none; }
.sigmoid-explorer.is-dragging [data-sigmoid-point] { cursor: grabbing; }
.sigmoid-explorer [data-sigmoid-point]:focus-visible .sigmoid-focus-ring { opacity: 1; }
.sigmoid-explorer[data-pointer-focus] .sigmoid-focus-ring { opacity: 0; }
.sigmoid-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .45rem;
  color: #78847f;
  font-size: .75rem;
}
.sigmoid-footer button {
  padding: .35rem .55rem;
  min-height: 36px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #65746d;
  font: inherit;
  cursor: pointer;
}
.sigmoid-footer button:hover { background: #edf4f1; }
.sigmoid-footer button:focus-visible { outline: 2px solid #332288; outline-offset: 2px; }
@media (max-width: 480px) {
  .sigmoid-explorer { padding: 1rem .7rem .45rem; }
  .sigmoid-explorer h4 { font-size: 1rem; }
  .sigmoid-readout output { font-size: 1.15rem; }
}
@media print {
  .sigmoid-footer { display: none; }
  .sigmoid-explorer { break-inside: avoid; }
}

.logistic-landscape .logistic-weight-readout { font-size: .9rem; color: #65716e; white-space: nowrap; }
.logistic-landscape .logistic-weight-readout output { float: none; color: #a8475a; font-size: 1.05rem; font-weight: 500; }

.mnist-flattening {
  margin: 1.7rem 0 2.3rem;
  padding: 1.2rem 1.5rem 1.5rem;
  border: 1px solid #e5e8e7;
  border-radius: 16px;
  background: linear-gradient(155deg, #f8fbfa, #fff 62%);
  color: #33413e;
  font-family: var(--bs-body-font-family, "Source Sans Pro", sans-serif);
  font-variant-numeric: tabular-nums;
}
.mnist-flattening h4 { margin: 0 0 1.4rem; font-family: inherit; font-size: 1.05rem; font-weight: 600; }
.mnist-flatten-layout { display: grid; grid-template-columns: minmax(0,280px) 110px minmax(0,190px); justify-content: center; align-items: center; gap: 1.2rem; }
.mnist-flattening figure { margin: 0; }
.mnist-flattening figcaption { margin: 0 0 .8rem; text-align: center; font-size: .82rem; color: #65746d; }
.mnist-flattening svg { display: block; width: 100%; height: auto; font-family: inherit; }
.mnist-image svg { border-radius: 8px; }
.mnist-flatten-arrow { display: flex; flex-direction: column; align-items: center; color: #73817c; font-size: .73rem; white-space: nowrap; }
.mnist-flatten-arrow > :last-child { color: #278474; font-size: 2.2rem; font-weight: 300; line-height: 1.3; }
.mnist-brackets { fill: none; stroke: #9caaa4; stroke-width: 1.2; }
.mnist-entry-label { font-size: 15px; }
.mnist-entry-value { fill: #33413e; font-size: 17px; }
.mnist-ellipsis { fill: #9caaa4; font-size: 20px; }
@media (max-width: 680px) {
  .mnist-flattening { padding: 1rem .9rem 1.2rem; }
  .mnist-flatten-layout { grid-template-columns: minmax(0,280px); gap: 1.1rem; }
  .mnist-flattening .mnist-vector { width: 190px; justify-self: center; }
  .mnist-flatten-arrow > :last-child { transform: rotate(90deg); }
}
@media print { .mnist-flattening { break-inside: avoid; } }
.mnist-interactive .mnist-image svg { cursor: crosshair; touch-action: none; user-select: none; }
.mnist-interactive .mnist-image svg:focus-visible:not([data-pointer-focus]) { outline: 3px solid #278474; outline-offset: 5px; }
.mnist-interactive .mnist-image svg[data-pointer-focus]:focus { outline: none; }
.mnist-selection, .mnist-drag-hint { text-align: center; font-size: .85rem; line-height: 1.5; }
.mnist-selection { margin: 1.2rem 0 0; }
.mnist-drag-hint { margin: .45rem 0 0; color: #65746d; }
@media print { .mnist-drag-hint { display: none; } }