/* The same demonstrations are used in sequence: finetune, then steer. */
.transfer-story { padding:20px 0 0; container-type:inline-size; }
.transfer-topline { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px; color:var(--green); font:400 var(--type-label)/1.5 var(--serif); }
.transfer-topline button { border:0; border-bottom:1px solid var(--rule); background:none; padding:8px 0; color:var(--green); font:inherit; cursor:pointer; white-space:nowrap; }
.transfer-topline button[hidden] { display:none; }
.transfer-topline button:focus-visible { outline:2px solid var(--green); outline-offset:5px; }
.transfer-grid { --transfer-gap:44px; --transfer-cycle:8s; display:grid; grid-template-columns:1fr .94fr 1fr; align-items:start; gap:var(--transfer-gap); }
.transfer-person, .transfer-robot, .transfer-method { min-width:0; }
.transfer-robot { align-self:start; margin-top:0; }
/* Full video frames replace the old portrait cutouts. This also overrides the
   former fixed photo heights in typography.css without changing type rules. */
#overview .transfer-photo { height:auto; position:relative; isolation:isolate; }
.transfer-photo video { position:relative; z-index:2; display:block; width:100%; height:auto; aspect-ratio:854 / 480; object-fit:contain; background:var(--paper); }
.human-photo { padding:18px 12px 12px; background:#e6ebde; border-radius:0; overflow:hidden; }
.human-photo video { box-shadow:0 2px 12px #244c3b18; }
.demo-sheets { position:absolute; inset:23px 24px 64px; pointer-events:none; }
.demo-sheets i { position:absolute; inset:0; background:#f9faf3; border:1px solid #c7d3bc; border-radius:0; transform:rotate(-12deg); }
.demo-sheets i:nth-child(2) { transform:rotate(-6deg); }
.demo-sheets i:nth-child(3) { transform:rotate(6deg); }
.demo-sheets i:nth-child(4) { transform:rotate(12deg); }
.demo-count { position:relative; z-index:3; display:inline-flex; align-items:baseline; gap:7px; margin-top:12px; padding:4px 12px; border-radius:0; background:var(--paper); color:var(--green); font:400 var(--type-label)/1.5 var(--serif); }
.demo-count b { font:600 var(--type-subheading)/1 var(--heading); }
.transfer-grid h3 { margin:16px 0 0; font:600 var(--type-subheading)/1.25 var(--heading); }
.transfer-media-note { margin:8px 0 0; color:var(--muted); font:400 var(--type-label)/1.5 var(--serif); }
.transfer-method { display:grid; gap:var(--transfer-gap); }
.transfer-step { position:relative; min-height:178px; padding:18px 22px; border-radius:0; }
.tune-step { color:#faf8ee; background:#244c3b; box-shadow:0 12px 30px #244c3b16; }
.steer-step { color:var(--green); background:#e7ecdf; }
.transfer-number { position:absolute; top:15px; right:18px; font:400 var(--type-label)/1.5 var(--serif); opacity:.75; }
.transfer-step h3 { margin:10px 0 5px; color:inherit; }
.transfer-step p { margin:0; font:400 var(--type-label)/1.5 var(--serif); color:inherit; }
.tune-cells { height:52px; width:145px; max-width:calc(100% - 35px); display:grid; grid-template-columns:repeat(8,1fr); gap:5px; padding-block:3px; }
.tune-cells i { border:1px solid #bed5a57a; border-radius:0; background:#d5e8ba; opacity:.18; }
.tune-cells .is-adapter { opacity:.5; animation:learn-adapter var(--transfer-cycle) ease-in-out infinite; }
/* Schematic predicted action bends toward a fixed demonstration reference. */
.steer-flow { display:block; width:145px; max-width:calc(100% - 35px); height:52px; overflow:visible; }
.steer-flow > path { fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.steer-original { stroke:#244c3b; stroke-width:1.3; stroke-dasharray:3 4; opacity:.35; }
.steer-demo { stroke:#bd8335; stroke-width:2; }
.steer-prediction { stroke:#244c3b; stroke-width:2.4; }
.transfer-arrow { position:absolute; width:var(--transfer-gap); height:2px; top:50%; background:#acbca7; pointer-events:none; }
.transfer-arrow::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 25%,#244c3b 50%,transparent 75%); background-size:200% 100%; animation:flow-in var(--transfer-cycle) linear infinite; }
.transfer-arrow::after { content:''; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1.5px solid #748f72; border-right:1.5px solid #748f72; transform:rotate(45deg); }
.arrow-in { right:100%; }
.arrow-out { left:100%; }
.arrow-out::before { animation-name:flow-out; }
.transfer-arrow.arrow-next { width:2px; height:var(--transfer-gap); top:100%; left:50%; }
.transfer-arrow.arrow-next::before { background:linear-gradient(0deg,transparent 25%,#244c3b 50%,transparent 75%); background-size:100% 200%; animation-name:flow-between; }
.transfer-arrow.arrow-next::after { right:-3px; top:auto; bottom:0; transform:rotate(135deg); }
.robot-photo { border-radius:0; overflow:hidden; background:#e3e0d5; }
.transfer-caption { text-align:center; margin:32px 0 0; font:400 var(--type-body)/1.65 var(--serif); }
.transfer-caption strong { color:var(--green); font-weight:500; }
.transfer-story:not(.motion-running) *, .transfer-story:not(.motion-running) *::before, .transfer-story:not(.motion-running) *::after { animation-play-state:paused; }
/* One shared schematic cycle: input → adaptation → steering → execution. */
@keyframes learn-adapter { 0%,12%,44%,100% {opacity:.5;} 21%,36% {opacity:1;} }
@keyframes flow-in { 0% {background-position:200% 0; opacity:0;} 2% {opacity:1;} 11% {background-position:-200% 0; opacity:1;} 12%,100% {background-position:-200% 0; opacity:0;} }
@keyframes flow-between { 0%,42% {background-position:0 200%; opacity:0;} 43% {opacity:1;} 52% {background-position:0 -200%; opacity:1;} 53%,100% {background-position:0 -200%; opacity:0;} }
@keyframes flow-out { 0%,88% {background-position:200% 0; opacity:0;} 89% {opacity:1;} 99% {background-position:-200% 0; opacity:1;} 100% {background-position:-200% 0; opacity:0;} }
@keyframes flow-in-down { 0% {background-position:0 200%; opacity:0;} 2% {opacity:1;} 11% {background-position:0 -200%; opacity:1;} 12%,100% {background-position:0 -200%; opacity:0;} }
@keyframes flow-out-down { 0%,88% {background-position:0 200%; opacity:0;} 89% {opacity:1;} 99% {background-position:0 -200%; opacity:1;} 100% {background-position:0 -200%; opacity:0;} }
@container (max-width:800px) {
 .transfer-grid { grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
 .transfer-person, .transfer-robot, .transfer-method { grid-column:auto; grid-row:auto; }
 .transfer-method { grid-template-columns:1fr; }
 .transfer-robot { margin-top:0; }
 .transfer-step { padding:22px 26px; }
 .transfer-arrow.arrow-in, .transfer-arrow.arrow-out { left:50%; right:auto; width:2px; height:var(--transfer-gap); }
 .transfer-arrow.arrow-in { top:calc(-1 * var(--transfer-gap)); }
 .transfer-arrow.arrow-out { top:100%; }
 .transfer-arrow.arrow-in::before, .transfer-arrow.arrow-out::before { background:linear-gradient(0deg,transparent 25%,#244c3b 50%,transparent 75%); background-size:100% 200%; animation-name:flow-in-down; }
 .transfer-arrow.arrow-out::before { animation-name:flow-out-down; }
 .transfer-arrow.arrow-in::after, .transfer-arrow.arrow-out::after { right:-3px; top:auto; bottom:0; transform:rotate(135deg); }
 .transfer-caption { text-align:left; margin-top:26px; }
}
@container (max-width:480px) {
 .transfer-topline { flex-wrap:wrap; margin-bottom:22px; }
 .transfer-topline > span { flex:1 1 100%; }
 .transfer-topline button { margin-left:auto; }
 .transfer-step { padding:20px 24px; }
 .human-photo { padding:16px 10px 10px; }
}
/* Hover opens the demonstration stack without cropping or rescaling its video. */
.human-photo { transition:background-color 350ms ease, box-shadow 350ms ease; }
.human-photo video { transition:transform 550ms cubic-bezier(.2,.75,.25,1); }
.human-photo .demo-sheets i { transform-origin:50% 85%; transition:transform 600ms cubic-bezier(.2,.75,.25,1); }
.human-photo .demo-count { transition:transform 450ms cubic-bezier(.2,.75,.25,1), box-shadow 450ms ease; }
.human-photo:focus-within { outline:2px solid var(--green); outline-offset:5px; }
.human-photo:focus-within .demo-sheets i:nth-child(1) { transform:translateX(-6px) rotate(-18deg); }
.human-photo:focus-within .demo-sheets i:nth-child(2) { transform:translateX(-3px) rotate(-9deg); }
.human-photo:focus-within .demo-sheets i:nth-child(3) { transform:translateX(3px) rotate(9deg); }
.human-photo:focus-within .demo-sheets i:nth-child(4) { transform:translateX(6px) rotate(18deg); }
@media (hover:hover) and (pointer:fine) {
 .human-photo:hover { background-color:#dce5d2; box-shadow:0 12px 30px #244c3b12; }
 .human-photo:hover video { transform:translateY(-4px); }
 .human-photo:hover .demo-sheets i:nth-child(1) { transform:translateX(-6px) rotate(-18deg); }
 .human-photo:hover .demo-sheets i:nth-child(2) { transform:translateX(-3px) rotate(-9deg); }
 .human-photo:hover .demo-sheets i:nth-child(3) { transform:translateX(3px) rotate(9deg); }
 .human-photo:hover .demo-sheets i:nth-child(4) { transform:translateX(6px) rotate(18deg); }
 .human-photo:hover .demo-count { transform:translateY(-2px); box-shadow:0 5px 15px #244c3b18; }
}
@media (prefers-reduced-motion:reduce) {
 .transfer-story *, .transfer-story *::before, .transfer-story *::after { animation:none!important; transition:none!important; }
 .tune-cells i { opacity:.18; }
 .tune-cells .is-adapter { opacity:1; }
 .human-photo:is(:hover,:focus-within) video, .human-photo:is(:hover,:focus-within) .demo-count { transform:none; }
 .human-photo:is(:hover,:focus-within) .demo-sheets i:nth-child(1) { transform:rotate(-12deg); }
 .human-photo:is(:hover,:focus-within) .demo-sheets i:nth-child(2) { transform:rotate(-6deg); }
 .human-photo:is(:hover,:focus-within) .demo-sheets i:nth-child(3) { transform:rotate(6deg); }
 .human-photo:is(:hover,:focus-within) .demo-sheets i:nth-child(4) { transform:rotate(12deg); }
}