/* A contained visual on the homepage; no scroll-linked or global motion. */
.handoff-visual{--handoff-radius:6px;--handoff-frame-radius:12px;--handoff-clarity:1;--handoff-progress:0;container-type:inline-size;min-width:0;margin:0;background:#f9f7f4;border:1px solid #c9c6c0;border-radius:var(--handoff-frame-radius);padding:1.45rem;box-shadow:0 24px 64px -40px #0b224055;position:relative;overflow:hidden}
.handoff-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap}.handoff-toolbar>.micro{font-size:.59rem;letter-spacing:.08em;margin:0}.handoff-controls{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.handoff-controls[hidden]{display:none}.handoff-compare{display:flex;border:1px solid #b8bbb9;padding:3px;border-radius:var(--handoff-radius);gap:3px}.handoff-compare button{padding:.35rem .65rem;min-height:36px;font-size:.65rem;border-radius:calc(var(--handoff-radius) - 3px);background:transparent;white-space:nowrap}.handoff-compare button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.handoff-play{background:transparent;display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;min-width:60px;padding:.4rem;font-size:.65rem}.handoff-play[hidden]{display:none}.handoff-play>[data-play-icon]{font-size:1rem;line-height:1;width:1rem}.handoff-controls button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.handoff-scene{height:350px;position:relative;margin-block:1rem .7rem;isolation:isolate}.handoff-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.handoff-static-line{position:absolute;top:50%;left:18%;right:18%;height:1px;background:var(--orange);opacity:.45}.handoff-visual.is-enhanced .handoff-static-line{display:none}
.handoff-note{position:absolute;top:50%;left:18%;width:28%;transform:translate(-50%,-50%);padding:1rem .8rem;border:1px solid color-mix(in srgb,var(--ink) 27%,transparent);border-radius:var(--handoff-radius);background:linear-gradient(145deg,#fffffff7,#f5f1eef5);box-shadow:0 12px 24px -18px #0b224050;color:var(--ink);text-align:left;will-change:transform;backdrop-filter:blur(5px)}.handoff-note:nth-child(2){left:50%}.handoff-note:nth-child(3){left:82%;border-color:var(--orange)}.handoff-note-top{display:flex;align-items:center;justify-content:space-between;gap:.25rem;margin-bottom:.7rem}.handoff-note-top span{font-family:var(--mono,monospace);font-size:.5rem;letter-spacing:.04em;line-height:1.4;text-transform:uppercase}.handoff-note-top svg{width:20px;height:24px;flex-shrink:0;opacity:.7}.handoff-note strong{display:block;overflow-wrap:anywhere;font-size:.92rem;font-weight:600;line-height:1.3;min-height:2.6em}.handoff-note small{display:block;overflow-wrap:anywhere;font-size:.65rem;line-height:1.5;margin-top:.6rem;color:var(--muted);min-height:3em}
.handoff-caption{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--line);padding-top:1rem;min-height:64px}.handoff-caption p{font-size:.82rem;line-height:1.55;margin:0;max-width:36em;min-height:3.1em}.handoff-phase{font-size:.48rem;white-space:nowrap;color:var(--orange);margin:0}.handoff-visual figcaption{font-size:.54rem;color:var(--muted);margin-top:.35rem;line-height:1.7}.handoff-loop{position:absolute;height:2px;bottom:0;left:0;right:0;background:transparent}.handoff-loop>span{display:block;height:100%;background:var(--orange);transform:scaleX(var(--handoff-progress));transform-origin:left center;opacity:.55}
@container(max-width:440px){.handoff-scene{height:460px}.handoff-toolbar>.micro{font-size:.57rem}.handoff-controls{justify-content:space-between;width:100%}.handoff-note{left:50%;top:18%;width:78%;padding:.85rem 1rem}.handoff-note:nth-child(2){left:50%;top:50%}.handoff-note:nth-child(3){left:50%;top:82%}.handoff-note-top{margin-bottom:.4rem}.handoff-note-top span{font-size:.53rem}.handoff-note-top svg{height:20px}.handoff-note strong{font-size:1rem;min-height:0}.handoff-note small{font-size:.69rem;margin-top:.35rem;min-height:0}.handoff-static-line{top:18%;bottom:18%;left:50%;width:1px;height:auto;right:auto}.handoff-caption{align-items:flex-start;gap:.6rem}.handoff-caption p{font-size:.8rem}.handoff-phase{font-size:.45rem;padding-top:.2rem}}
@media(max-width:600px){.handoff-visual{padding:1rem}}
.handoff-compare{max-width:100%;min-width:0}.handoff-compare button{min-width:0;white-space:normal}.handoff-note-top span{min-width:0;overflow-wrap:anywhere}
/* A little color carries the transformation: scattered warmth becomes a calm spectrum. */
.handoff-visual{background:radial-gradient(ellipse at 100% 0%,#e9e5dd88,transparent 52%),linear-gradient(155deg,#faf8f5,#f4f1eb)}
.handoff-scene::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 18% 50%,#b9ccde66,transparent 42%),radial-gradient(ellipse at 50% 50%,#b2d5d04d,transparent 40%),radial-gradient(ellipse at 82% 50%,#ecc3ae66,transparent 42%);opacity:calc(.2 + var(--handoff-clarity)*.8);transform:scale(calc(.94 + var(--handoff-clarity)*.06))}
.handoff-note{--step-tint:#dfe9f1;--step-ink:#425f7a;background:linear-gradient(145deg,#fffffff7,color-mix(in srgb,var(--step-tint) calc(35% + var(--handoff-clarity)*65%),#f5f1ee));border-color:color-mix(in srgb,var(--step-ink) 42%,transparent);box-shadow:0 16px 32px -20px #0b224066,inset 0 1px 0 #ffffffcc}
.handoff-note:nth-child(2){--step-tint:#dfedeb;--step-ink:#3d7474}.handoff-note:nth-child(3){--step-tint:#f2dfd3;--step-ink:#b74319}.handoff-note-top svg{color:var(--step-ink);opacity:.9}
@container(max-width:440px){.handoff-scene::before{background:radial-gradient(ellipse at 50% 18%,#b9ccde66,transparent 40%),radial-gradient(ellipse at 50% 50%,#b2d5d04d,transparent 40%),radial-gradient(ellipse at 50% 82%,#ecc3ae66,transparent 40%)}}
.handoff-visual:not(.is-enhanced) .handoff-scene{height:auto;min-height:350px;display:grid;align-items:center}.handoff-visual:not(.is-enhanced) .handoff-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding-block:3rem}.handoff-visual:not(.is-enhanced) .handoff-note{position:relative;inset:auto;width:auto;transform:none}
@container(max-width:440px){.handoff-visual:not(.is-enhanced) .handoff-notes{grid-template-columns:1fr;gap:2rem;padding-block:2rem}}
@media(prefers-reduced-motion:reduce){.handoff-note{will-change:auto}.handoff-loop{display:none}}
@media print{.handoff-controls,.handoff-art,.handoff-loop{display:none!important}.handoff-note{will-change:auto}}