:root{color:#171a17;background:#f3f1ea;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased;--green:#174f3d;--ink:#171a17;--muted:#6d706a;--line:rgba(23,26,23,.14)}*{box-sizing:border-box}html,body{width:100%;min-width:320px;min-height:100%;margin:0;overflow-x:hidden}button,input,select{font:inherit}.flow-header{position:relative;z-index:50;display:flex;align-items:center;justify-content:space-between;width:min(1480px,calc(100% - 32px));min-height:72px;margin:auto;border-bottom:1px solid var(--line)}.flow-brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.flow-brand .youyou-logo-mark{width:38px;height:38px}.flow-brand img{width:100%;height:100%;object-fit:contain}.flow-brand>span:last-child{display:grid}.flow-brand b{font-size:14px}.flow-brand small{color:var(--muted);font-size:10px;letter-spacing:.12em}.flow-header nav{display:flex;align-items:center;gap:18px}.flow-header nav>a{color:var(--muted);font-size:13px;text-decoration:none}.sound-toggle{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer}.sound-toggle span{color:#28a76d}.sound-toggle[aria-pressed="true"] span{color:#aaa}.flow-main{padding:clamp(18px,3vw,38px) 16px 30px}.flow-intro{display:flex;align-items:end;justify-content:space-between;gap:30px;width:min(1400px,100%);margin:auto}.eyebrow{margin:0 0 6px;color:var(--green);font-size:10px;font-weight:850;letter-spacing:.16em}.flow-intro h1{margin:0;font-size:clamp(42px,6vw,82px);line-height:.92;letter-spacing:-.065em}.flow-intro>div>p:last-child{max-width:620px;margin:12px 0 0;color:var(--muted);font-size:13px;line-height:1.65}.flow-filters{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,.7fr) auto;align-items:end;gap:8px;min-width:min(680px,52vw)}.flow-filters label{display:grid;gap:6px}.flow-filters label span{color:var(--muted);font-size:10px;font-weight:700}.flow-filters input,.flow-filters select,.flow-filters button{height:46px;border:1px solid var(--line);border-radius:10px;background:#fff;color:inherit}.flow-filters input,.flow-filters select{width:100%;padding:0 13px}.flow-filters button{padding:0 15px;cursor:pointer}.flow-shell{position:relative;width:min(1480px,100%);margin:18px auto 0;overflow:hidden;border:1px solid var(--line);border-radius:26px;background:radial-gradient(circle at 50% 21%,rgba(64,108,84,.13),transparent 31%),linear-gradient(132deg,#111714,#070b09 52%,#141612);box-shadow:0 30px 90px rgba(33,42,36,.16);color:#f6f5ef}.flow-stage{position:relative;height:clamp(520px,67vh,690px);min-height:520px;overflow:hidden;perspective:1800px;touch-action:pan-y;cursor:grab;outline:none;user-select:none;-webkit-user-select:none}.flow-stage.is-dragging{cursor:grabbing}.flow-stage::after{content:"";position:absolute;inset:0;z-index:100;pointer-events:none;background:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.43) 100%)}.flow-orbit{position:absolute;left:50%;top:51%;width:350px;height:480px;transform:translate3d(-50%,-50%,0);transform-style:preserve-3d}.flow-card{position:absolute;inset:0;width:350px;height:480px;padding:0;border:0;border-radius:18px;background:#101310;color:#fff;box-shadow:0 28px 70px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.17);cursor:pointer;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity,filter;overflow:visible}.flow-card__frame{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border-radius:18px;background:#111512}.flow-card img{display:block;width:100%;height:100%;object-fit:contain;background:#0c0e0c;pointer-events:none}.flow-card__fallback{position:absolute;inset:0;display:none;place-items:center;padding:30px;background:linear-gradient(145deg,#243329,#0d120f);text-align:center}.flow-card.is-error .flow-card__fallback{display:grid}.flow-card.is-error img{visibility:hidden}.flow-card__reflection{position:absolute;left:2%;top:calc(100% + 8px);width:96%;height:34%;border-radius:14px;background-image:var(--reflection);background-position:center;background-size:contain;background-repeat:no-repeat;opacity:.13;transform:scaleY(-1);transform-origin:top;filter:blur(1px);mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 72%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 72%);pointer-events:none}.flow-card__badge{position:absolute;z-index:2;left:13px;bottom:12px;max-width:calc(100% - 26px);padding:7px 9px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(7,10,8,.72);backdrop-filter:blur(10px);font-size:10px;line-height:1.25;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stage-arrow{position:absolute;z-index:250;top:50%;width:48px;height:48px;margin-top:-24px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(5,8,6,.58);color:#fff;font-size:30px;cursor:pointer;backdrop-filter:blur(12px)}.stage-arrow--prev{left:18px}.stage-arrow--next{right:18px}.flow-meta{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:104px;padding:16px clamp(18px,3vw,44px);border-top:1px solid rgba(255,255,255,.11);background:rgba(5,7,6,.68)}.flow-meta>div:first-child{min-width:0}.flow-meta span{color:#9fb6a8;font-size:10px;font-weight:800;letter-spacing:.12em}.flow-meta h2{max-width:720px;margin:4px 0 2px;font-size:clamp(20px,2.2vw,32px);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flow-meta p{margin:0;color:rgba(246,245,239,.5);font-size:11px}.flow-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.flow-actions button,.flow-actions a,.detail-actions button,.detail-actions a,.empty-state button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 15px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;text-decoration:none;cursor:pointer}.primary-action{border-color:#d6efe2!important;background:#eaf5ef!important;color:#164b3a!important;font-weight:800}.flow-help{margin:0;padding:9px 20px;color:rgba(246,245,239,.39);font-size:9px;text-align:center}.flow-diagnostics{position:absolute;z-index:300;right:16px;top:13px;color:rgba(246,245,239,.35);font:9px ui-monospace,monospace}.load-state,.empty-state{position:absolute;inset:0;z-index:600;display:grid;place-content:center;gap:8px;background:#0b100d;color:#fff;text-align:center}.load-state[hidden],.empty-state[hidden]{display:none}.empty-state p{margin:0;color:rgba(255,255,255,.55)}.empty-state button{margin:8px auto 0}.detail-dialog{width:min(1180px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:20px;background:#f7f7f3;color:var(--ink);box-shadow:0 35px 120px rgba(0,0,0,.42)}.detail-dialog::backdrop{background:rgba(5,8,6,.78);backdrop-filter:blur(10px)}.detail-shell{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.75fr);min-height:min(720px,calc(100dvh - 24px))}.detail-close{position:absolute;z-index:4;top:14px;right:14px;width:44px;height:44px;border:1px solid rgba(0,0,0,.12);border-radius:50%;background:rgba(255,255,255,.9);font-size:26px;cursor:pointer}.detail-shell figure{position:relative;display:grid;place-items:center;min-height:420px;margin:0;padding:20px;background:#111512}.detail-shell figure img{max-width:100%;max-height:calc(100dvh - 64px);object-fit:contain}.image-fallback{display:grid;gap:7px;color:#fff;text-align:center}.image-fallback[hidden]{display:none}.detail-shell aside{padding:clamp(28px,4vw,54px);overflow:auto}.detail-shell h2{margin:0;font-size:clamp(26px,3vw,44px);line-height:1.05;letter-spacing:-.04em}.detail-shell aside>p:not(.eyebrow){color:var(--muted);font-size:12px;line-height:1.7}.detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.detail-actions button,.detail-actions a{border-color:var(--line);background:#fff;color:var(--ink)}.prompt-box{padding:16px;border:1px solid var(--line);border-radius:12px;background:#eeeee9}.prompt-box b{font-size:11px}.prompt-box p{max-height:220px;overflow:auto;margin:8px 0 0;color:#545851;font-size:11px;line-height:1.65;white-space:pre-wrap}.toast{position:fixed;z-index:1000;left:50%;bottom:24px;transform:translate(-50%,20px);padding:11px 15px;border-radius:999px;background:#17251e;color:#fff;font-size:12px;opacity:0;pointer-events:none;transition:transform .2s,opacity .2s}.toast.show{transform:translate(-50%,0);opacity:1}.no-js{margin:20px;text-align:center}
:focus-visible{outline:3px solid #61c695;outline-offset:3px}.flow-card:focus-visible{outline-offset:8px}
@media(max-width:900px){.flow-intro{display:grid}.flow-filters{min-width:0;width:100%;grid-template-columns:1fr 1fr auto}.flow-header nav>a:nth-child(2){display:none}.flow-meta{align-items:flex-start}.flow-actions{max-width:45%}}
@media(max-width:640px){.flow-header{width:calc(100% - 20px);min-height:62px}.flow-header nav>a{display:none}.flow-brand .youyou-logo-mark{width:34px;height:34px}.sound-toggle{padding:0 11px}.flow-main{padding:12px 10px 22px}.flow-intro{gap:10px}.flow-intro h1{font-size:40px}.flow-intro>div>p:last-child{margin-top:6px;font-size:10px;line-height:1.45}.flow-filters{grid-template-columns:1fr 1fr}.flow-filters button{display:none}.flow-shell{margin-top:10px;border-radius:20px}.flow-stage{height:500px;min-height:500px}.flow-orbit{width:280px;height:390px}.flow-card{width:280px;height:390px;border-radius:15px}.flow-card__frame{border-radius:15px}.stage-arrow{top:auto;bottom:108px;width:44px;height:44px;margin:0}.stage-arrow--prev{left:12px}.stage-arrow--next{right:12px}.flow-meta{position:absolute;z-index:410;left:0;right:0;bottom:0;display:grid;gap:8px;min-height:106px;padding:12px 60px 12px 16px;background:linear-gradient(to top,rgba(5,7,6,.98),rgba(5,7,6,.83))}.flow-meta h2{font-size:19px}.flow-meta p{display:none}.flow-actions{max-width:none;justify-content:flex-start;flex-wrap:nowrap}.flow-actions button,.flow-actions a{padding:0 10px;font-size:10px}.flow-actions a{display:none}.flow-help{display:none}.flow-diagnostics{display:none}.detail-shell{display:block;min-height:0}.detail-shell figure{min-height:46dvh;height:46dvh;padding:10px}.detail-shell figure img{max-height:44dvh}.detail-shell aside{max-height:48dvh;padding:22px 18px}.detail-shell h2{font-size:26px}.detail-actions{margin:14px 0}.prompt-box{padding:12px}}
@media(max-width:380px){.flow-card{width:260px;height:365px}.flow-orbit{width:260px;height:365px}.flow-stage{height:475px;min-height:475px}.flow-filters{grid-template-columns:1fr}.flow-filters button{grid-column:auto}.flow-actions a{display:none}}
@media(prefers-reduced-motion:reduce){.flow-card{will-change:auto}.toast{transition:none}}

/* V2 transparent floating gallery: visual layer only; motion physics remains unchanged. */
body{background:radial-gradient(circle at 50% 34%,rgba(255,255,255,.92),transparent 40%),linear-gradient(180deg,#f7f5ef 0%,#f1eee5 100%)}
.flow-main{padding-top:32px}.flow-intro{display:grid;align-items:start;justify-content:initial;gap:24px}.flow-intro h1{font-size:clamp(48px,4.8vw,74px);line-height:1.05;letter-spacing:-.03em}.flow-intro>div>p:last-child{max-width:760px}.flow-filters{width:min(1080px,100%);min-width:0;grid-template-columns:minmax(280px,1.3fr) minmax(240px,.8fr) auto}.flow-filters input,.flow-filters select,.flow-filters button{border-color:rgba(40,47,42,.12);background:rgba(255,255,255,.67);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 28px rgba(55,61,56,.06);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15)}
.flow-shell{overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--ink)}.flow-stage{height:clamp(560px,64vh,660px);min-height:560px;overflow:hidden;background:transparent}.flow-stage::after{display:none}.flow-orbit{top:47%;width:0;height:0}.flow-card{inset:auto;left:0;top:0;border:0;border-radius:14px;background:transparent;box-shadow:0 28px 64px rgba(48,52,48,.18),0 4px 14px rgba(48,52,48,.08),0 0 0 1px rgba(255,255,255,.84);overflow:visible}.flow-card__frame{border-radius:14px;background:transparent;box-shadow:inset 0 0 0 1px rgba(31,38,33,.08)}.flow-card img{position:absolute;display:block;max-width:none;max-height:none;object-fit:cover;background:transparent}.flow-card__reflection,.flow-card__badge{display:none}.flow-card__fallback{border-radius:14px;background:linear-gradient(145deg,#e4e6df,#f7f5ef);color:#455047}.stage-arrow{border-color:rgba(42,48,43,.12);background:rgba(255,255,255,.68);color:#27322b;box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 12px 30px rgba(49,55,50,.12);backdrop-filter:blur(18px) saturate(1.18);-webkit-backdrop-filter:blur(18px) saturate(1.18)}
.flow-meta{position:absolute;z-index:420;left:clamp(22px,4vw,64px);bottom:28px;width:min(560px,calc(100% - 150px));min-height:0;padding:14px 16px;border:1px solid rgba(255,255,255,.88);border-radius:20px;background:rgba(250,250,247,.69);box-shadow:inset 0 1px 0 #fff,0 18px 50px rgba(53,59,54,.12);color:var(--ink);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2)}.flow-meta span{color:#47745f}.flow-meta h2{max-width:100%;margin-top:3px;font-size:clamp(18px,1.5vw,24px)}.flow-meta p{color:rgba(35,42,37,.58)}.flow-actions{justify-content:flex-start}.flow-actions button,.flow-actions a{border-color:rgba(42,48,43,.11);background:rgba(255,255,255,.6);color:#243229;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}.primary-action{border-color:rgba(30,94,68,.14)!important;background:rgba(228,242,234,.78)!important}.flow-help{padding:10px 20px;color:#777c76}.flow-diagnostics{top:10px;color:rgba(43,51,45,.42)}
@media(max-width:900px){.flow-main{padding-top:24px}.flow-intro{gap:18px}.flow-intro h1{font-size:52px}.flow-filters{grid-template-columns:1fr 1fr auto}.flow-stage{height:590px}.flow-meta{width:min(500px,calc(100% - 120px))}}
@media(max-width:640px){.flow-main{padding-top:18px}.flow-intro{gap:12px}.flow-intro h1{font-size:40px;line-height:1.06;letter-spacing:-.025em}.flow-filters{grid-template-columns:1fr 1fr}.flow-stage{height:470px;min-height:470px}.flow-orbit{top:43%}.flow-meta{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:-28px 8px 0;padding:12px 14px;border-radius:17px;background:rgba(255,255,255,.72)}.flow-meta p{display:none}.flow-actions{flex-wrap:wrap}.flow-actions a{display:none}.stage-arrow{bottom:80px}.flow-help{display:block;padding:9px 20px;font-size:8px}.flow-card{border-radius:12px}.flow-card__frame{border-radius:12px}}
@media(max-width:380px){.flow-intro h1{font-size:36px}.flow-stage{height:440px;min-height:440px}.flow-filters{grid-template-columns:1fr}.flow-filters label:nth-child(2){display:none}.flow-meta{margin-top:-24px}}

/* V3 composition correction: complete images and a quiet corner utility. */
.flow-orbit{top:45%}.flow-card img{object-fit:contain}.flow-card{box-shadow:0 20px 46px rgba(48,52,48,.15),0 3px 10px rgba(48,52,48,.07),0 0 0 1px rgba(255,255,255,.84)}
.flow-meta{left:18px;bottom:16px;display:grid;width:320px;max-width:calc(100% - 90px);gap:7px;padding:10px 11px;border-radius:15px}.flow-meta h2{margin:2px 0 0;font-size:15px;line-height:1.2}.flow-meta p{display:none}.flow-meta span{font-size:9px}.flow-actions{gap:6px;flex-wrap:nowrap}.flow-actions button{min-height:44px;padding:0 10px;font-size:11px;white-space:nowrap}.flow-meta .flow-actions a{display:none}
@media(max-width:640px){.flow-orbit{top:42%}.flow-meta{left:auto;bottom:auto;width:min(286px,calc(100% - 56px));max-width:none;margin:-20px 28px 0;padding:9px 10px}.flow-meta h2{font-size:14px}.flow-actions button{padding:0 9px;font-size:10px}}

/* V4 direct-view mode: the gallery starts immediately below the site header. */
.flow-intro{display:none!important}.flow-main{padding:0 16px 14px}.flow-shell{margin-top:0}.flow-stage{height:calc(100dvh - 73px);min-height:620px}.flow-orbit{top:310px}.stage-arrow{top:310px;bottom:auto}
@media(max-width:640px){.flow-main{padding:0 10px 12px}.flow-stage{height:calc(100dvh - 63px);min-height:540px}.flow-orbit{top:245px}.stage-arrow{top:245px;bottom:auto}.flow-meta{position:absolute;left:14px;bottom:12px;width:270px;margin:0}}