cnn-training-visual.css

.lecturePage .ctv{--flow:#078575;background:#f5faf8;border:2px solid #9ccbbd;border-radius:14px;padding:22px;margin:24px 0;color:#15353b}
.lecturePage .ctvHeader{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.lecturePage .ctvHeader h3{margin:4px 0;font-size:26px}.lecturePage .ctvHeader .eyebrow{margin:0}.lecturePage .ctvControls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:18px 0}.lecturePage .ctvControls label{font-size:15px}.lecturePage .ctvActual{padding:16px;background:white;border:1px solid #b6d2c8;border-radius:9px}.lecturePage .ctvActual progress{width:100%;height:20px;accent-color:#078575}.lecturePage .ctvActual p{margin:8px 0;font-size:16px;min-height:2.9em;line-height:1.5}.lecturePage .ctvActual label{font-weight:bold}
.lecturePage .ctvGraphScroll{overflow:auto;margin:26px 0 18px;padding:6px 8px 16px}.lecturePage .ctvNetwork{display:grid;grid-template-columns:repeat(7,minmax(108px,1fr));gap:23px;min-width:900px}.lecturePage .ctvNode{position:relative;display:flex;flex-direction:column;gap:12px;background:white;border:2px solid #b7cbc4;border-radius:10px;padding:13px 9px;text-align:center;min-height:245px}.lecturePage .ctvNode strong{font-size:16px;min-height:2.7em;line-height:1.35}.lecturePage .ctvNode b{font-size:14px;line-height:1.5;overflow-wrap:anywhere}.lecturePage .ctvNode small{font-size:12px;line-height:1.5}.lecturePage .ctvNode:not(:last-child)::after{content:'→';position:absolute;right:-24px;top:40%;width:22px;color:var(--flow);font-size:25px;font-weight:bold}.lecturePage .ctvNode.isActive{border-color:var(--flow);box-shadow:0 0 0 4px color-mix(in srgb,var(--flow) 20%,transparent)}.lecturePage .ctvNode.isActive:not(:last-child)::after{animation:ctv-forward .65s ease-in-out infinite}.lecturePage .ctv[data-direction=backward]{--flow:#8851b8}.lecturePage .ctv[data-direction=backward] .ctvNode:not(:last-child)::after{content:'←';animation-direction:reverse}.lecturePage .ctv[data-direction=update]{--flow:#bd6d12}.lecturePage .ctv[data-direction=update] .ctvNode.isActive{animation:ctv-update .7s ease-in-out infinite}.lecturePage .ctv[data-direction=repeat]{--flow:#4876b4}
.lecturePage .ctvSketch{position:relative;height:50px;width:65px;align-self:center}.lecturePage .ctvSketch span{position:absolute;left:calc(var(--map)*8px);top:calc(var(--map)*-3px + 9px);width:37px;height:37px;background:repeating-linear-gradient(0deg,#c7e7ddaa 0 8px,#7fb8a8aa 8px 9px),repeating-linear-gradient(90deg,transparent 0 8px,#7fb8a8 8px 9px);border:1px solid #7aa99a;transform:skewY(-7deg)}.lecturePage .ctvNode[data-node=scores] .ctvSketch span{width:12px;left:calc(var(--map)*21px);height:calc(20px + var(--map)*10px);top:auto;bottom:0;transform:none;background:#8bbdaa}.lecturePage .ctvNode[data-node=loss] .ctvSketch span{border-radius:50%;transform:none;background:#f2d3b4;border-color:#c17b3c}
.lecturePage .ctvStory{background:white;border-left:6px solid var(--flow);border-radius:7px;padding:18px 22px;min-height:195px}.lecturePage .ctvStory h4{font-size:24px;margin:8px 0}.lecturePage .ctvStory p{margin:8px 0;line-height:1.7}.lecturePage .ctvPhase{color:var(--flow);font-size:15px;font-weight:800;letter-spacing:.04em}.lecturePage .ctvLegend{font-size:13px;line-height:1.65}.lecturePage .ctvSnapshots{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:24px;background:white;padding:18px;border-radius:9px}.lecturePage .ctvSnapshots h4{font-size:18px;margin:0 0 12px}.lecturePage .ctvSnapshots p{font-size:13px;line-height:1.65}.lecturePage .ctv canvas{display:block!important;position:static!important;width:128px!important;height:128px!important;max-width:100%;background:#102d35;image-rendering:pixelated;border:2px solid #b7d9cf;border-radius:7px}.lecturePage .ctvWeights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:12px;max-width:300px}.lecturePage .ctvWeights span{font:15px/1.6 Consolas,monospace;padding:9px 3px;border:1px solid #afc7bd;border-radius:5px;text-align:center;background:#f5f8f7}.lecturePage .ctvWeights .increased{background:#d4f0e8;border-color:#078575}.lecturePage .ctvWeights .decreased{background:#eee0fa;border-color:#8851b8}.lecturePage .ctvSnapshot{font-size:16px;background:#e2f0eb;padding:15px;line-height:1.7}.lecturePage .ctvAdam{margin-bottom:8px}.lecturePage .ctv math{font-size:24px}
.lecturePage .ctvDialog{width:98vw;max-width:none;height:96vh;max-height:none;overflow:auto;padding:0;border:0;border-radius:12px;color:#15353b;background:#f5faf8}.lecturePage .ctvDialog::backdrop{background:#0f252de0}.lecturePage .ctvDialog .ctv{margin:0;border:0;padding:30px;min-height:100%}.lecturePage .ctvDialog .ctvHeader{position:sticky;top:-30px;z-index:2;background:#f5faf8;padding:15px 0;border-bottom:1px solid #b7d9cf}.lecturePage .ctvDialog .ctvHeader h3{font-size:32px}.lecturePage .ctvDialog .ctvNetwork{min-width:1050px}.lecturePage .ctvDialog .ctvNode strong{font-size:20px}.lecturePage .ctvDialog .ctvNode b{font-size:18px}.lecturePage .ctvDialog .ctvNode small{font-size:15px}.lecturePage .ctvDialog .ctvStory h4{font-size:29px}.lecturePage .ctvDialog .ctvStory p{font-size:22px}.lecturePage .ctvDialog .ctvWeights span{font-size:21px}.lecturePage .ctvDialog .ctvSnapshot{font-size:21px}.lecturePage .ctvDialog .ctvActual p{font-size:20px}.lecturePage .ctvDialog .ctv math{font-size:32px}
@keyframes ctv-forward{0%{transform:translateX(-3px);opacity:.4}100%{transform:translateX(3px);opacity:1}}@keyframes ctv-update{50%{background:#fff1d9}}@media(prefers-reduced-motion:reduce){.lecturePage .ctv *{animation:none!important}}@media(max-width:700px){.lecturePage .ctv{padding:14px}.lecturePage .ctvSnapshots{grid-template-columns:1fr}.lecturePage .ctvStory{min-height:250px}.lecturePage .ctvDialog .ctv{padding:18px}.lecturePage .ctvDialog .ctvHeader{top:-18px}.lecturePage .ctvDialog .ctvHeader h3{font-size:25px}}@media print{.lecturePage .ctvControls,.lecturePage .ctvHeader button,.lecturePage .ctvDialog{display:none}.lecturePage .ctvNetwork{min-width:0;grid-template-columns:repeat(3,1fr)}.lecturePage .ctvNode::after{display:none}.lecturePage .ctvSnapshots{break-inside:avoid}}

.lecturePage .ctvFocused .ctvIntro,.lecturePage .ctvFocused .ctvSnapshots,.lecturePage .ctvFocused .ctvSnapshot,.lecturePage .ctvFocused .ctvAdam,.lecturePage .ctvFocused>math,.lecturePage .ctvFocused>.ctvLegend:last-child{display:none}.lecturePage .ctvFocused .ctvHeader .eyebrow{display:none}.lecturePage .ctvFocused .ctvActual{padding:10px 14px}.lecturePage .ctvFocused .ctvActual p{min-height:0;margin:4px 0;font-size:15px}.lecturePage .ctvFocused .ctvActual label{font-size:14px}.lecturePage .ctvFocused .ctvActual progress{height:12px}.lecturePage .ctvFocused .ctvControls{margin:10px 0;gap:6px}.lecturePage .ctvFocused .ctvGraphScroll{margin:12px 0 8px}.lecturePage .ctvFocused .ctvNode{gap:8px;padding:10px 7px;min-height:210px}.lecturePage .ctvFocused .ctvNode small:last-child{display:none}.lecturePage .ctvFocused .ctvNode strong{font-size:18px;min-height:2.7em}.lecturePage .ctvFocused .ctvNode b{font-size:16px}.lecturePage .ctvFocused .ctvNode small{font-size:13px}.lecturePage .ctvFocused .ctvStory{padding:12px 18px;min-height:140px}.lecturePage .ctvFocused .ctvStory h4{font-size:25px;margin:4px 0}.lecturePage .ctvFocused .ctvStory p{font-size:18px;line-height:1.5;margin:4px 0}.lecturePage .ctvFocused .ctvHeader h3{font-size:27px}.lecturePage .ctvFocused .ctvHeader{padding:8px 0}.lecturePage .ctvDialog .ctvFocused{padding:18px}.lecturePage .ctvDialog .ctvFocused .ctvHeader{top:-18px}

.lecturePage .ctvFocused .ctvSketch{height:34px;width:54px}.lecturePage .ctvFocused .ctvSketch span{width:25px;height:25px}.lecturePage .ctvFocused .ctvNode{min-height:185px;gap:6px}.lecturePage .ctvFocused .ctvActual{padding:8px 12px}.lecturePage .ctvFocused .ctvActual p{font-size:14px;line-height:1.4;margin:3px 0}.lecturePage .ctvFocused .ctvGraphScroll{padding-bottom:8px}.lecturePage .ctvFocused .ctvStory{min-height:110px}.lecturePage .ctvFocused .ctvStory p{font-size:17px}.lecturePage .ctvFocused .ctvStory h4{font-size:23px}

.lecturePage .ctvEpochHistory{border:2px solid #91b7ca;border-radius:10px;padding:18px;margin:22px 0;background:#edf5fc}.lecturePage .ctvEpochHeading{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;align-items:center}.lecturePage .ctvEpochHeading label{font-size:20px;font-weight:bold}.lecturePage .ctvEpochHeading strong{font-size:23px;color:#254e80;font-variant-numeric:tabular-nums}.lecturePage #ctvEpoch{display:block;width:100%;height:32px;margin:15px 0;accent-color:#466b9b}.lecturePage .ctvEpochButtons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.lecturePage .ctvEpochButtons label{font-size:14px}.lecturePage .ctvEpochHistory p{font-size:15px;line-height:1.65;min-height:3.3em}.lecturePage .ctvEpochHistory #ctvEpochMetrics{font-weight:bold;min-height:1.8em}.lecturePage .ctvFocused .ctvEpochHistory{display:none}.lecturePage .ctvDialog .ctvEpochHistory p{font-size:20px}.lecturePage .ctvDialog .ctvEpochHeading strong{font-size:28px}

.lecturePage .ctvEpochHistory{scroll-margin-top:90px}

.lecturePage .ctvReview .ctvIntro,.lecturePage .ctvReview .ctvActual,.lecturePage .ctvReview .ctvGraphScroll,.lecturePage .ctvReview .ctvStory,.lecturePage .ctvReview>.ctvLegend,.lecturePage .ctvReview .ctvAdam,.lecturePage .ctvReview>math,.lecturePage .ctvReview .ctvHeader .eyebrow{display:none}.lecturePage .ctvReview .ctvControls button:not(#ctvTrain):not(#ctvCancel),.lecturePage .ctvReview .ctvControls label{display:none}.lecturePage .ctvReview .ctvControls{margin:8px 0}.lecturePage .ctvReview .ctvEpochHistory{margin:12px 0;padding:14px}.lecturePage .ctvReview .ctvEpochHistory p{font-size:17px;min-height:0;margin:8px 0;line-height:1.5}.lecturePage .ctvReview .ctvSnapshots{padding:14px;gap:20px}.lecturePage .ctvReview .ctvSnapshots h4{font-size:18px}.lecturePage .ctvReview .ctvSnapshot{margin:12px 0;font-size:18px;padding:12px}.lecturePage .ctvReview .ctvWeights{margin-top:6px}.lecturePage .ctvReview .ctvWeights span{padding:5px 3px;font-size:20px}.lecturePage .ctvDialog .ctvReview{padding:18px}.lecturePage .ctvDialog .ctvReview .ctvHeader{top:-18px;padding:8px 0}.lecturePage .ctvReview .ctvHeader h3{font-size:27px}