/* Slide 10. HTML type surrounds the shared Three.js training mechanism. */
.training .eyebrow { position:absolute; top:92px; left:110px; margin:0; }
.training .training-heading { position:absolute; left:110px; top:164px; width:1700px; }
.training .training-title { font-size:83px; line-height:1.12; letter-spacing:-.036em; max-width:1700px; }
.training .training-summary { margin-top:23px; font-size:35px; line-height:1.3; color:var(--soft); font-weight:400; }
.training .training-endpoint { position:absolute; top:515px; width:280px; }
.training .training-input { left:118px; text-align:right; }
.training .training-output { left:1554px; text-align:left; }
.training .training-endpoint-label { display:block; font-size:23px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--soft); transition:color .5s ease; }
.training .training-endpoint p { margin-top:13px; font-family:var(--serif); font-weight:600; font-size:37px; line-height:1.2; letter-spacing:-.02em; opacity:0; transform:translateY(10px); transition:opacity .55s ease,transform .75s cubic-bezier(.16,1,.3,1); }
.training .training-network-label { position:absolute; left:690px; top:382px; width:540px; text-align:center; font-size:23px; font-weight:500; color:var(--soft); letter-spacing:.06em; }
.training .training-feedback-label { position:absolute; left:1095px; top:816px; width:260px; text-align:center; color:var(--amber); font-size:31px; font-weight:500; opacity:0; transform:translateY(-9px); transition:opacity .55s ease,transform .75s ease; }
.training .training-weight-caption { position:absolute; left:420px; top:900px; width:1080px; text-align:center; font-size:31px; line-height:1.35; color:var(--paper); opacity:0; transform:translateY(12px); transition:opacity .55s ease,transform .75s cubic-bezier(.16,1,.3,1); }
.training .training-weight-caption span { color:var(--amber); text-decoration:underline; text-decoration-color:#e0a02890; text-decoration-thickness:1px; text-underline-offset:8px; }
.training .training-cycle { position:absolute; left:111px; top:971px; display:flex; align-items:center; gap:18px; color:var(--soft); font-size:19px; letter-spacing:.035em; }
.training .training-cycle i { display:block; width:20px; height:1px; background:#a3acc755; }
.training .training-cycle span { transition:color .5s; }
.training[data-training-step="1"] .training-input p,
.training[data-training-step="2"] .training-input p,
.training[data-training-step="3"] .training-input p,
.training[data-training-step="4"] .training-input p,
.training[data-training-step="2"] .training-output p,
.training[data-training-step="3"] .training-output p,
.training[data-training-step="4"] .training-output p { opacity:1; transform:none; }
.training[data-training-step="1"] .training-input .training-endpoint-label,
.training[data-training-step="2"] .training-output .training-endpoint-label { color:var(--amber); }
.training[data-training-step="3"] .training-feedback-label,
.training[data-training-step="4"] .training-feedback-label,
.training[data-training-step="4"] .training-weight-caption { opacity:1; transform:none; }
.training[data-training-step="1"] .training-cycle span:nth-of-type(1),
.training[data-training-step="2"] .training-cycle span:nth-of-type(2),
.training[data-training-step="3"] .training-cycle span:nth-of-type(3),
.training[data-training-step="4"] .training-cycle span:nth-of-type(4) { color:var(--amber); }
.training.training-instant *, .training.training-reduced * { transition:none !important; }
@media (prefers-reduced-motion:reduce) { .training * { transition:none !important; } }