/* Shared family: SnapX pearl, graphite, native blue. ClipFlow: a warmer current. */
:root{--paper:#f8f9fb;--ink:#25313e;--muted:#6b7785;--accent:#3475d6;--accent-deep:#245eb9;--ease:cubic-bezier(.16,1,.3,1);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC",sans-serif}
body{background:var(--paper)}
.navbar{background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.94);box-shadow:0 3px 8px #233c5d05,0 18px 38px #233c5d0c;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.primary{background:linear-gradient(170deg,#5385df,#2e61c2);box-shadow:inset 0 1px 1px #ffffff66,0 4px 12px #2d60be20;color:#fff}
.family-hero{margin:12px 12px 0;padding:144px 28px 40px;border:1px solid #ffffffb3;border-radius:34px;background:radial-gradient(ellipse at 14% 36%,#f1e7d75e,transparent 47%),radial-gradient(ellipse at 84% 40%,#e1eaf6a6,transparent 53%),linear-gradient(175deg,#fbfcfd,#f3f5f8);overflow:hidden;position:relative;min-height:0}
.family-hero .hero-heading{max-width:100%;margin:0 auto;text-align:center;transform:none!important;position:relative;z-index:1;pointer-events:auto}
.flow-brandline{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink);font-size:18px;font-weight:650;letter-spacing:-.5px}
.flow-brandline>img{border-radius:11px;filter:drop-shadow(0 3px 8px #38507410)}
.flow-brandline small{font-size:13px;font-weight:450;color:#78818d;margin-left:5px;letter-spacing:1px}
.flow-native{margin-left:8px;padding-left:18px;border-left:1px solid #a8b5c64d;font-size:11px;font-weight:450;letter-spacing:1px;color:#718093}
.family-hero h1{font-size:clamp(40px,4.65vw,68px);font-weight:650;line-height:1.22;letter-spacing:-2.8px;margin:25px 0 20px;color:var(--ink)}
.family-hero h1>span{color:#6984ac}
.mobile-break{display:none}
.flow-intro{font-size:15px;line-height:1.9;letter-spacing:.3px;color:#6b7785;margin:0}
.flow-hero-actions{display:flex;justify-content:center;align-items:center;gap:28px;margin:25px 0 13px}
.flow-hero-actions .button{min-height:48px;padding:0 24px;border-radius:30px;gap:10px;font-size:14px}
.flow-watch{font-size:13px;color:#45566e;display:flex;gap:12px;align-items:center}
.flow-watch>span{font-size:22px;color:#8296b0;transition:transform .3s var(--ease)}
.flow-watch:hover>span{transform:translate(3px,3px)}
.flow-compat{display:flex;align-items:center;justify-content:center;gap:12px;font-size:10px;letter-spacing:.3px;color:#7d8796;margin:0}
.flow-compat i{height:3px;width:3px;border-radius:50%;background:#b9c1cd}
.family-hero .hero-stage{width:min(1100px,100%);height:auto;min-height:0;margin:38px auto 0;padding:0;border:1px solid #ffffffed;border-radius:24px;perspective:none;background:linear-gradient(125deg,#eee6d838,#e2eaf53b);box-shadow:0 2px 6px #40536903,0 25px 70px #3f526514;overflow:hidden;isolation:isolate}
.family-hero .hero-artwork{position:relative;width:100%;height:400px;left:auto;top:auto;right:auto;bottom:auto;transform:none!important;transform-origin:center;background:radial-gradient(ellipse at 18% 70%,#f6ede0b3,transparent 52%),radial-gradient(ellipse at 83% 60%,#d4e3f2b3,transparent 56%)}
.flow-desktop-bar{height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #aab7c51c;font-size:10px;color:#7b8795;background:#ffffff36}
.flow-desktop-title{display:flex;align-items:center;gap:8px;letter-spacing:.5px}.flow-tiny-dot{width:5px;height:5px;background:#7fa4db;border-radius:50%}
.flow-safe{display:flex;align-items:center;gap:5px}.flow-safe .icon{width:12px;height:12px}
.flow-route{position:absolute;inset:40px 0 0;width:100%;height:calc(100% - 40px);pointer-events:none;opacity:.45}
.flow-route path{fill:none;stroke:#a5b9cc;stroke-width:1;stroke-dasharray:3 7}
.flow-source,.flow-destination{position:absolute;top:75px;width:28%;max-width:284px;border:1px solid #ffffffd9;border-radius:13px;background:#ffffffba;box-shadow:0 6px 16px #3e506109,0 20px 38px #3e50610a;overflow:hidden;transition:transform .65s var(--ease),opacity .5s}
.flow-source{left:4.2%;transform:rotate(-3deg) translateY(8px)}
.flow-destination{right:4.2%;transform:rotate(3deg) translateY(14px);background:#ffffffb8}
.flow-window-bar{height:30px;padding:0 11px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c9d1dc38;color:#7e8795;font-size:9px;background:#f9fafb99}
.traffic{display:flex;gap:4px}.traffic i{width:5px;height:5px;border-radius:50%;background:#d8b2ac}.traffic i:nth-child(2){background:#dfd0a5}.traffic i:nth-child(3){background:#adc6b3}
.flow-source-body{padding:21px 22px 14px}.flow-note-kicker{font-size:7px;letter-spacing:1.7px;font-weight:600;color:#8a97a5;margin:0 0 10px}
.flow-source h3,.flow-destination h3{font-size:22px;line-height:1.5;font-weight:600;letter-spacing:-.7px;margin:0 0 9px}
.flow-source-body>p:not(.flow-note-kicker){font-size:10px;line-height:1.8;color:#7e8794;margin:0 0 13px}
.flow-source-image{height:80px;overflow:hidden;border-radius:7px;background:#e4eaf1}.flow-source-image img{width:100%;height:100%;object-fit:cover}
.flow-collected{display:flex;align-items:center;gap:5px;font-size:8px;color:#7b8a99;margin-top:12px}.flow-collected .icon{width:11px;height:11px;color:#649780}
.flow-document{padding:22px 21px 15px}.flow-destination h3{font-size:21px}.flow-document-lines{display:grid;gap:7px;margin:16px 0}.flow-document-lines i{height:3px;background:#dce2e8;border-radius:3px}.flow-document-lines i:nth-child(2){width:72%}
.flow-output{min-height:84px;border:1px dashed #b8c7d9;border-radius:7px;padding:12px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:10px;line-height:1.8;color:#4b6280;background:#f0f5fb77;max-height:108px;overflow:auto}
.flow-output-placeholder{color:#9aa8b7;font-size:11px}.flow-doc-note{display:flex;gap:4px;align-items:center;font-size:7px;color:#8a96a4;margin:15px 0 0}.flow-doc-note .icon{width:10px;height:10px}
.flow-panel{position:absolute;z-index:3;width:332px;top:60px;left:50%;transform:translateX(-50%);border:1px solid #ffffff;border-radius:15px;background:rgba(248,250,253,.94);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 4px 10px #3a4c6310,0 22px 45px #34485f24;overflow:hidden;animation:panel-arrive .6s var(--ease) both}
.flow-panel-heading{height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 14px}.flow-panel-heading>span{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:650}.flow-panel-heading kbd{border:1px solid #d5dee9;border-radius:4px;padding:1px 5px;font-size:9px;color:#8090a4;background:#ffffffa8}
.flow-search{display:flex;align-items:center;gap:7px;background:#ffffffc9;border:1px solid #d6e1ee;border-radius:8px;margin:0 12px;padding:0 9px}.flow-search:focus-within{border-color:#85a9dc;box-shadow:0 0 0 3px #6494d410}.flow-search>.icon{width:14px;height:14px;color:#8799ad}
.flow-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;font-size:10px;height:33px;color:var(--ink)}.flow-search input::placeholder{color:#8997a6}.flow-list-label{display:flex;justify-content:space-between;padding:10px 15px 5px;font-size:8px;color:#8b97a6}
.flow-items{height:195px;overflow:auto;padding:0 8px 7px;scrollbar-width:thin;scrollbar-color:#c3cdda transparent}
.flow-item{display:flex;align-items:center;gap:9px;width:100%;border:1px solid transparent;border-radius:8px;padding:8px;text-align:left;background:transparent;margin:2px 0;min-height:48px;transition:background .2s}
.flow-item:hover{background:#eaf0f7}.flow-item[aria-pressed=true]{background:#e2ecfa;border-color:#c5d8f1}.flow-item-icon{display:grid;place-items:center;width:29px;height:31px;border-radius:7px;background:#fff9;color:#6c92c1;flex-shrink:0}.flow-item-icon>.icon{width:15px;height:15px}.flow-item-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.flow-item strong{display:block;font-size:10px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flow-item small{display:block;font-size:8px;font-weight:400;color:#7e8b9b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flow-item>.icon{width:12px;height:12px;color:#90a4bf}
.flow-empty{padding:24px 12px;color:#7c8b9e;text-align:center;font-size:11px}
.flow-panel-bottom{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-top:1px solid #d2dce950;font-size:8px;color:#8796a8}.flow-panel-bottom>span b{font-weight:400;margin-left:6px}.flow-panel-bottom button{padding:5px 8px;border-radius:5px;background:#e3ecf8;color:#4c72a6;font-size:9px}.flow-panel-bottom button:disabled{opacity:.45}
.flow-controls{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:14px 22px 5px;background:#ffffff80}.flow-steps{display:flex;align-items:center;gap:9px}.flow-steps>i{width:24px;height:1px;background:#ced8e4}.flow-steps button{background:transparent;font-size:10px;display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;color:#8b97a5}.flow-steps button>span{font-size:8px;color:inherit;font-variant-numeric:tabular-nums}.flow-steps button[aria-pressed=true]{color:#4774af;background:#e8eff9}.flow-playback{display:flex;align-items:center;gap:5px}.flow-playback button{font-size:9px;background:transparent;border:1px solid #d3dce750;border-radius:20px;padding:5px 10px;color:#6e819a}.flow-playback button:first-child{background:#e8eff9;color:#5378a9}.flow-playback button:hover{background:#e1eaf5}
.flow-live{font-size:10px;color:#7b899b;text-align:center;margin:0;padding:5px 12px 14px;background:#ffffff80;min-height:35px}.flow-progress{height:2px;background:linear-gradient(90deg,#d7af7c,#819fd5);width:33.333%;transition:width .6s var(--ease)}
#flow-demo[data-phase=find] .flow-source{opacity:.65;transform:rotate(-4deg) translate(-7px,12px)}
#flow-demo[data-phase=paste] .flow-destination{transform:rotate(0) translateY(3px);border-color:#c2d7f1;box-shadow:0 8px 45px #4b7ebc20}
#flow-demo[data-phase=paste] .flow-output{background:#eaf1fb;border-style:solid;border-color:#c4d7f0;color:#42648b}
#flow-demo[data-phase=find] .flow-progress{width:66.666%}#flow-demo[data-phase=paste] .flow-progress{width:100%}
.flow-demo-caption{font-size:10px;letter-spacing:.25px;color:#8793a1;text-align:center;margin:16px 0 22px}
.flow-down{font-size:10px;color:#8391a3;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px}.flow-down>span{font-size:16px}
@keyframes panel-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.content-details{padding:95px 0 85px}.content-details .section-intro{max-width:650px;margin:0 auto 50px;text-align:center}.content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}.content-card{min-width:0}.content-card h3{font-size:21px;line-height:1.5;font-weight:600;margin:10px 0}.content-card p{font-size:13px;color:var(--muted);margin:0 0 24px}.content-card img{height:340px;object-fit:cover;object-position:top;width:100%;border-radius:16px;border:1px solid #d9e2ee;box-shadow:0 8px 26px #40546d08}.content-card .eyebrow{font-size:10px}.content-card:nth-child(2){padding-top:45px}.content-card:nth-child(3){padding-top:90px}
.family-section{padding:28px 32px 48px}.family-inner{max-width:1104px;margin:auto;border-top:1px solid #dce3ed;display:grid;grid-template-columns:1.2fr 1fr 1fr;align-items:center;gap:26px;padding:32px 0}.family-inner h2,.family-inner h3{font-size:17px;letter-spacing:-.3px;margin:0 0 5px}.family-inner>div>p,.family-inner>p{font-size:12px;color:var(--muted);margin:0}.family-product{display:flex;align-items:center;gap:13px;min-width:0}.family-product img{width:44px;height:44px;object-fit:contain}.family-product strong{font-size:14px;font-weight:600;display:block}.family-product small{font-size:10px;color:var(--muted)}.family-product:hover strong{color:var(--accent)}
@media(min-width:1500px){.family-hero{padding-top:160px}.family-hero h1{font-size:72px}.family-hero .hero-stage{margin-top:44px}}
@media(max-width:1000px){.family-hero{padding-top:135px}.flow-native{display:none}.flow-source,.flow-destination{width:26%;top:85px}.flow-source{left:2.5%}.flow-destination{right:2.5%}.flow-source-body,.flow-document{padding:18px 14px 13px}.flow-source h3,.flow-destination h3{font-size:17px}.flow-panel{width:310px}.flow-hero-actions{margin-top:20px}.content-grid{gap:18px}}
@media(max-width:720px){.family-hero{margin:7px 7px 0;padding:115px 13px 27px;border-radius:25px}.flow-brandline{font-size:16px}.flow-brandline>img{width:35px;height:35px}.family-hero h1{font-size:44px;line-height:1.2;letter-spacing:-1.9px;margin:23px 0 17px}.mobile-break{display:block}.flow-intro{font-size:12px;line-height:1.9}.desktop-break{display:none}.flow-hero-actions{gap:20px;margin:23px 0 14px}.flow-hero-actions .button{min-height:44px;padding:0 17px;font-size:12px}.flow-watch{font-size:11px;gap:8px}.flow-compat{font-size:8px;gap:9px}.family-hero .hero-stage{margin-top:29px;border-radius:18px;overflow:hidden}.family-hero .hero-artwork{height:470px;width:100%;position:relative;left:auto;top:auto;transform:none!important}.flow-desktop-bar{height:34px;padding:0 13px;font-size:8px}.flow-safe{font-size:7px}.flow-safe .icon{width:9px}.flow-panel{top:51px;width:calc(100% - 28px);max-width:370px}.flow-source{display:none}.flow-destination{top:346px;left:14px;right:14px;width:calc(100% - 28px);max-width:none;transform:none;z-index:0;border-radius:10px}.flow-destination .flow-window-bar{height:23px}.flow-document{padding:12px 14px;display:grid;grid-template-columns:100px minmax(0,1fr);gap:4px 12px;align-items:center}.flow-document>.flow-note-kicker{grid-column:1/-1;font-size:6px;margin-bottom:1px}.flow-destination h3{font-size:13px;margin:0;grid-column:1}.flow-document-lines,.flow-doc-note{display:none}.flow-output{grid-column:2;grid-row:2;min-height:52px;max-height:68px;padding:8px;font-size:9px}.flow-output-placeholder{font-size:9px}.flow-panel-heading{height:38px}.flow-items{height:174px}.flow-item{min-height:43px;padding:6px}.flow-list-label{padding-top:8px}.flow-panel-bottom{padding:7px 12px}.flow-controls{padding:11px 9px 4px;gap:4px;flex-wrap:wrap;justify-content:center}.flow-steps{gap:4px}.flow-steps>i{width:15px}.flow-steps button{font-size:9px}.flow-playback{gap:3px}.flow-playback button{font-size:8px;padding:4px 7px}.flow-live{padding:7px 8px 11px;font-size:9px;min-height:35px}.flow-demo-caption{font-size:9px;line-height:1.8;max-width:300px;margin:14px auto 10px}.flow-route{display:none}#flow-demo[data-phase=paste] .flow-destination{transform:none}.content-details{padding:70px 0 55px}.content-grid{grid-template-columns:1fr;gap:40px}.content-card:nth-child(n){padding-top:0}.content-card img{height:370px;object-fit:contain;object-position:top;background:#eef2f8}.content-card h3{font-size:22px}.content-card p{font-size:13px}.family-section{padding:20px 24px 25px}.family-inner{grid-template-columns:1fr;gap:23px;padding:26px 0}.family-product img{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.family-hero .hero-heading,.family-hero .hero-artwork{transform:none!important}}
/* Neutralize the previous composition's flex headline and perspective reservation. */
.family-hero h1{display:block;white-space:normal;padding-top:0}
.family-hero .hero-stage{aspect-ratio:auto}
.flow-item-meta>span{display:block;font-size:9px;line-height:1.5;color:#74859b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content-card-visual{margin:0}
.flow-output[data-filled=false]::before{content:'等一段好内容，回到这里。';color:#8a9aae;font-size:10px}
.content-disclaimer{font-size:11px;color:var(--muted);text-align:center;line-height:1.9;margin:28px auto 0;max-width:730px}
@media(max-width:720px){.family-hero h1{font-size:clamp(34px,11.2vw,44px)}.flow-steps button,.flow-playback button{min-height:44px}.flow-search input{height:39px}.flow-item{min-height:44px}.family-hero .hero-artwork{height:482px}.flow-destination{top:355px}}
/* Motion refinement 02: one note, one continuous action. No numbered slide controls. */
.flow-source,.flow-destination{transform:none;transition:border-color .3s,box-shadow .3s}
#flow-demo[data-phase=find] .flow-source{opacity:1;transform:none}
#flow-demo[data-phase=paste] .flow-destination{transform:none}
.flow-source-quote{white-space:pre-wrap;border-radius:5px;transition:background .25s,box-shadow .25s;color:#526376!important;line-height:1.9!important}
/* Selection follows the text's glyphs, not the paragraph's rectangular bounds. */
.flow-source-selection{position:relative}
.flow-source-quote,.flow-copy-flight{font-size:10px;line-height:1.9;margin:0 0 13px;white-space:pre-wrap}
.flow-selection-char{position:relative;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.flow-selection-char.is-selected{background:rgba(203,223,249,.58);color:#294b70}
.flow-selection-char.is-selection-edge::after{content:'';position:absolute;right:-1px;top:0;bottom:0;width:1px;background:#547fae}
#flow-demo[data-source-selection=ready] .is-selection-edge::after,
#flow-demo[data-source-selection=copying] .is-selection-edge::after,
#flow-demo[data-source-selection=copied] .is-selection-edge::after{display:none}
#flow-demo[data-source-selection=copied] .flow-selection-char.is-selected{background:rgba(229,237,247,.58);color:inherit}
.flow-copy-flight{position:absolute;inset:0 0 auto;pointer-events:none;color:#345c8b;background:#dce9f9;box-shadow:0 0 0 4px #dce9f9,0 6px 16px #6483a92a;border-radius:3px;opacity:0}
.flow-collected{min-height:17px}
.flow-collected [data-flow-copy-icon]{display:flex;opacity:.45}
#flow-demo[data-source-selection=copying] [data-flow-copy-icon],
#flow-demo[data-source-selection=copied] [data-flow-copy-icon]{opacity:1}
.flow-copy-key{margin-left:auto;font:inherit;font-size:8px;padding:2px 4px;border:1px solid #c9d6e7;border-radius:4px;background:#f5f8fc;color:#577396;opacity:0}
#flow-demo[data-source-selection=selected] .flow-copy-key{opacity:1}
#flow-demo[data-source-selection=copying] .flow-copy-key{opacity:1;transform:translateY(1px);background:#dce9f9;border-color:#a8c4e5}
@media(prefers-reduced-motion:reduce){.flow-copy-flight{display:none}.flow-copy-key{transform:none!important}}
.flow-collected{margin-top:24px;color:#6d8e7e}
.flow-panel{animation:none;transition:box-shadow .35s,border-color .35s}
#flow-demo[data-moment=recall] .flow-panel{border-color:#b4cbea;box-shadow:0 4px 12px #3a4c6310,0 20px 45px #34485f24,0 0 0 4px #bfd3ed33}
#flow-demo[data-moment=recall] .flow-panel-heading kbd{background:#dbe8f8;color:#416fa9;border-color:#b1c9e8}
#flow-demo[data-moment=search] .flow-search{border-color:#9ebbdc;background:#fafdff}
#flow-demo[data-moment=paste] .flow-panel-bottom button{background:#bcd3ef;color:#2e5f9d}
.flow-instruction{display:flex;align-items:center;gap:7px;font-size:10px;color:#7e8da1}.flow-instruction kbd{font-size:9px;border:1px solid #d8e0eb;border-radius:4px;padding:1px 5px;background:#ffffff9e}.flow-instruction i{font-style:normal;color:#b3bdca;margin:0 4px}
.flow-mobile-source{display:none}
.flow-progress{width:100%!important;transform:scaleX(var(--flow-progress,0));transform-origin:left;transition:transform .12s linear;height:1px;opacity:.4}
.flow-route{display:none}
.flow-steps{display:none}
@media(max-width:720px){.flow-mobile-source{position:absolute;top:45px;left:15px;right:15px;display:flex;flex-direction:column;gap:3px;padding:0 5px;color:#6b7f98}.flow-mobile-source>span{font-size:8px;color:#8a98aa}.flow-mobile-source>strong{font-size:10px;font-weight:450;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flow-panel{top:94px}.flow-destination{top:423px}.family-hero .hero-artwork{height:551px}.flow-controls{padding:8px 12px;justify-content:space-between}.flow-instruction{font-size:9px;gap:4px}.flow-instruction kbd{font-size:8px}.flow-instruction i{margin:0}.flow-playback{gap:3px}.flow-playback button{font-size:9px;padding:4px 8px;min-height:40px}.flow-live{font-size:9px;padding-bottom:11px}}
@media(max-width:390px){.flow-controls{justify-content:center;gap:2px 14px}.flow-instruction{font-size:8px}}
@media(prefers-reduced-motion:reduce){.flow-source-quote,.flow-panel,.flow-progress{transition:none!important}}

/* A copied record enters only after source confirmation; selection is a later beat. */
.flow-item[data-flow-new-record]{transform-origin:center;transition:none}
.flow-item[data-flow-new-record][aria-pressed=false]{background:transparent;border-color:transparent}
.flow-item[data-flow-new-record][aria-pressed=true]{background:#dfebfb;border-color:#9cbee8;box-shadow:0 0 0 var(--flow-lock-ring,0px) rgb(117 157 210 / var(--flow-lock-alpha,0))}
#flow-demo[data-moment=lock] .flow-panel-bottom button{background:#d3e3f8;color:#355f98}
#flow-demo[data-record-stage=locked] .flow-panel{border-color:#bed1eb}
@media(prefers-reduced-motion:reduce){.flow-item[data-flow-new-record]{transform:none!important;opacity:1!important;box-shadow:none!important}}

/* Give the fixed-size demo cards clearance above the separate playback toolbar. */
@media (min-width: 721px) {
  .family-hero .hero-artwork { height: 456px; }
}
@media (max-width: 720px) {
  .family-hero .hero-artwork { height: 576px; }
}

/* Stepwise focus: completed cards become frosted, while the current action stays crisp.
   Values come from the story clock, so Pause freezes the blur as well as the demo. */
.flow-source > :not(.flow-focus-veil),
.flow-mobile-source > :not(.flow-focus-veil){filter:blur(var(--flow-source-blur,0px));opacity:var(--flow-source-ink,1)}
.flow-panel > :not(.flow-focus-veil){filter:blur(var(--flow-panel-blur,0px));opacity:var(--flow-panel-ink,1)}
.flow-focus-veil{position:absolute;inset:0;z-index:6;border-radius:inherit;background:#f8f9fb;pointer-events:none;user-select:none;opacity:0}
.flow-source > .flow-focus-veil,
.flow-mobile-source > .flow-focus-veil{opacity:var(--flow-source-veil,0)}
.flow-panel > .flow-focus-veil{opacity:var(--flow-panel-veil,0)}
/* A focused control must never remain visually obscured, including keyboard use. */
.flow-panel:focus-within > :not(.flow-focus-veil){filter:none;opacity:1}
.flow-panel:focus-within > .flow-focus-veil{opacity:0}

/* A full card lifecycle: parked -> rise/action -> sink/mute -> staggered return. */
#flow-demo{--flow-park-distance:28px}
#flow-demo[data-phase] .flow-source{transform:translateY(calc(var(--flow-source-park,1) * var(--flow-park-distance)))}
#flow-demo[data-phase] .flow-panel{transform:translate(-50%,calc(var(--flow-panel-park,1) * var(--flow-park-distance)))}
#flow-demo[data-phase] .flow-destination{transform:translateY(calc(var(--flow-destination-park,1) * var(--flow-park-distance)))}
#flow-demo .flow-mobile-source{transform:translateY(calc(var(--flow-source-park,1) * var(--flow-park-distance)))}
.flow-source > :not(.flow-focus-veil),
.flow-mobile-source > :not(.flow-focus-veil){filter:blur(var(--flow-source-blur,0px)) saturate(var(--flow-source-saturation,1))}
.flow-panel > :not(.flow-focus-veil){filter:blur(var(--flow-panel-blur,0px)) saturate(var(--flow-panel-saturation,1))}
.flow-destination > :not(.flow-focus-veil){filter:blur(var(--flow-destination-blur,0px)) saturate(var(--flow-destination-saturation,1));opacity:var(--flow-destination-ink,1)}
.flow-destination > .flow-focus-veil{opacity:var(--flow-destination-veil,0)}
@media(max-width:720px){#flow-demo{--flow-park-distance:12px}}
@media(prefers-reduced-motion:reduce){#flow-demo{--flow-park-distance:0px}}
/* Mobile stacking compensates for the moving panel and keeps its next card separate. */
@media(max-width:720px){
  #flow-demo[data-phase] .flow-destination{top:435px}
  #flow-demo .flow-mobile-source{transform:translateY(calc(var(--flow-source-park,1) * 8px))}
  .family-hero .hero-artwork{height:600px}
}

/* A slower, lower starting pose, with room left below the parked cards. */
#flow-demo{--flow-park-distance:64px}
@media(min-width:721px){.family-hero .hero-artwork{height:504px}}
@media(max-width:720px){
  #flow-demo{--flow-park-distance:20px}
  #flow-demo[data-phase] .flow-destination{top:448px}
  .family-hero .hero-artwork{height:624px}
}
/* The transition is visibly caused by a shortcut/button press, not an unexplained cut. */
.flow-collected{min-height:28px}
.flow-collected [data-flow-copy-label]{flex:1;min-width:0}
#flow-demo[data-phase] .flow-copy-key{font-size:10px;font-weight:600;min-height:24px;padding:3px 6px;flex-shrink:0;border-radius:5px;transform:translateY(calc(var(--flow-copy-press,0) * 2px)) scale(calc(1 - var(--flow-copy-press,0) * .1));box-shadow:0 0 0 calc(var(--flow-copy-press,0) * 5px) #84abe84d}
#flow-demo[data-trigger=copy] .flow-copy-key{background:#3f76c9;color:#fff;border-color:#2f66b7}
#flow-demo[data-phase] .flow-panel-bottom [data-flow-paste]{transform:translateY(calc(var(--flow-paste-press,0) * 2px)) scale(calc(1 - var(--flow-paste-press,0) * .07));box-shadow:0 0 0 calc(var(--flow-paste-press,0) * 5px) #84abe84d}
#flow-demo[data-trigger=paste] .flow-panel-bottom [data-flow-paste]{background:#3f76c9;color:#fff;border-color:#2f66b7}
@media(prefers-reduced-motion:reduce){#flow-demo{--flow-park-distance:0px}#flow-demo .flow-mobile-source{transform:none}}

/* The copied text sheet is a textured,curved ribbon,not another static trail. */
.flow-fluid-transfer{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none;user-select:none}
#flow-demo.has-fluid-transfer .flow-copy-flight{visibility:hidden}
.flow-item[data-fluid-receiving=true]{position:relative;background:transparent;border-color:transparent}

/* Paste consumes only the blue emphasis layer, never the text or record. */
.flow-item[data-flow-new-record]{position:relative}
.flow-item[data-demo-click=true]::after{content:'';position:absolute;left:58%;top:50%;width:18px;height:18px;border:1.5px solid #6f9dd8;border-radius:50%;opacity:var(--record-click,0);transform:translate(-50%,-50%) scale(calc(1.7 - var(--record-click,0)*.7));pointer-events:none}
.flow-item[data-flow-new-record][data-releasing=true]{background:transparent;border-color:transparent;box-shadow:none}
.flow-record-release{position:absolute;z-index:9;pointer-events:none;user-select:none;overflow:visible}
.flow-record-release-shell{position:absolute;inset:0;border-radius:8px;background:rgba(117,164,225,.25);border:1px solid #9cbee8;transform-origin:center}
.flow-record-particle{position:absolute;display:block;border-radius:50%;background:#80a9df;pointer-events:none}
@media(prefers-reduced-motion:reduce){.flow-record-release,.flow-item[data-demo-click=true]::after{display:none}}

/* White is the temporary vacancy; completed rows inherit the same surface as their siblings. */
.flow-record-slot{position:relative;margin:2px 0;isolation:isolate}
.flow-record-slot>.flow-item{position:relative;margin:0;z-index:1}
.flow-record-vacancy{position:absolute;inset:0;border-radius:8px;background:#fff;transform-origin:top;pointer-events:none}

/* Receiving is the inverse of releasing: the border condenses onto the measured output box. */
.flow-receive-layer{position:absolute;z-index:10;pointer-events:none;user-select:none;overflow:visible}
.flow-receive-shell{position:absolute;inset:0;box-sizing:border-box;border:1px solid #c4d7f0;transform-origin:center;pointer-events:none}
.flow-receive-particle{position:absolute;display:block;border-radius:50%;background:#80a9df;pointer-events:none}
.flow-output[data-receiving=true]{border-color:transparent!important}
@media(prefers-reduced-motion:reduce){.flow-receive-layer{display:none}}

/* Only the incoming text enters;the receiving border stays fixed. */
.flow-output-text{display:block;white-space:inherit;transform-origin:left top}