@charset "UTF-8";
.sf-story{grid-template-columns:1fr 1fr;gap:80px;padding-block:64px}
.sf-showcase{--sf-accent:#f04766;--sf-progress:0;max-width:100%;min-width:0;display:flex;flex-direction:column;align-items:center;gap:20px;outline-offset:8px}
.sf-platform-switch{display:flex;gap:8px;align-items:center;padding:4px;border-radius:16px;background:#e9e2d1}
.sf-platform-switch button{display:flex;align-items:center;gap:8px;padding:8px 12px;min-height:40px;border-radius:12px;font-size:12px;line-height:20px;color:#827965;transition:background .3s cubic-bezier(.22,1,.36,1),color .3s cubic-bezier(.22,1,.36,1)}
.sf-platform-switch button[aria-pressed=true]{background:#fffdf7;color:#272727;box-shadow:0 2px 4px #594e2b12}
.sf-platform-switch img{width:20px;height:20px;border-radius:4px}
.sf-phone{width:336px;max-width:100%;padding:7px;border-radius:40px;background:#24241f;box-shadow:0 24px 40px -16px #4b3a2866,0 0 0 2px #77715e,0 0 0 5px #e8dfca;position:relative}
.sf-screen{height:644px;position:relative;border-radius:32px;overflow:hidden;background:#121317;isolation:isolate;touch-action:pan-y}
.sf-icon{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sf-slide{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(72px);transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .5s cubic-bezier(.22,1,.36,1),visibility .65s;pointer-events:none}
.sf-slide.is-active{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;z-index:2}
.sf-slide.is-leaving{visibility:visible;transform:translateY(-56px);opacity:0;z-index:1}
.sf-showcase[data-direction=back] .sf-slide{transform:translateY(-72px)}
.sf-showcase[data-direction=back] .sf-slide.is-active{transform:translateY(0)}
.sf-showcase[data-direction=back] .sf-slide.is-leaving{transform:translateY(56px)}
.sf-video{color:#fff;background:#1d1a15}
.sf-video-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.15) contrast(1.04);transform:scale(1.05);animation:sf-food-close 5.2s cubic-bezier(.22,1,.36,1) both;animation-play-state:paused}
.sf-showcase[data-running=true] .sf-slide.is-active .sf-video-photo{animation-play-state:running}
.sf-steam{position:absolute;top:64px;left:0;width:100%;height:420px;pointer-events:none;mix-blend-mode:screen;filter:blur(5px)}.sf-steam path{fill:none;stroke:#fff;stroke-width:12px;stroke-linecap:round;opacity:0;animation:sf-steam-rise 5.2s cubic-bezier(.22,1,.36,1) infinite;animation-play-state:paused}.sf-steam path:nth-child(2){animation-delay:-1.8s}.sf-steam path:nth-child(3){animation-delay:-3.6s}.sf-showcase[data-running=true] .sf-slide.is-active .sf-steam path{animation-play-state:running}
.sf-video.is-active .sf-video-photo{animation-name:sf-food-close}
.sf-video:not(.is-active) .sf-video-photo{animation-name:none}
.sf-video-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:24px;padding:20px 16px 12px;font-size:14px;line-height:24px;text-shadow:0 1px 8px #000;background:#12131735}
.sf-video-top>span{opacity:.7}.sf-video-top>b{font-weight:600;border-bottom:2px solid #fff;padding-bottom:4px}.sf-video-top>.sf-icon{position:absolute;right:16px;width:20px;height:20px}
.sf-video-side{position:absolute;right:12px;bottom:236px;display:grid;gap:20px;justify-items:center;text-shadow:0 1px 6px #0008}
.sf-video-side>span{display:grid;justify-items:center;gap:4px}.sf-video-side .sf-icon{width:28px;height:28px;fill:#ffffffeb;stroke:#fff;stroke-width:1.5}.sf-video-side .sf-icon path{filter:drop-shadow(0 1px 2px #0003)}.sf-video-side small{font-size:10px;line-height:16px}
.sf-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e7d1a8;color:#68523b;font-size:12px;font-weight:600;flex-shrink:0}
.sf-avatar-video{position:relative;width:40px;height:40px;border:2px solid white;font-size:16px;background:#9a7350;color:white}.sf-avatar-video i{position:absolute;bottom:-8px;left:11px;background:#fa365a;color:#fff;border-radius:50%;width:16px;height:16px;display:grid;place-items:center;font-size:16px;font-style:normal;line-height:16px}
.sf-video-copy{position:absolute;left:0;right:0;bottom:46px;padding:20px 56px 12px 16px;background:transparent;text-shadow:0 1px 5px #000b}
.sf-video-copy>b{font-size:14px;line-height:24px;font-weight:600}.sf-video-copy h3{font-size:16px;line-height:24px;font-weight:500;color:#fff;margin-top:4px;letter-spacing:0;max-width:240px}.sf-video-copy>p{font-size:12px;line-height:20px;margin-top:8px;color:#fff}.sf-music{display:flex;gap:8px;font-size:10px;line-height:20px;margin-top:12px;align-items:center;white-space:nowrap;overflow:hidden}.sf-music>span:first-child{font-size:18px}.sf-music i{display:block;width:16px;height:16px;flex:none;margin-left:auto;border:4px solid #eee;border-radius:50%;opacity:.7}
.sf-video-timeline{position:absolute;bottom:45px;left:8px;right:8px;height:2px;background:#ffffff50}.sf-video-timeline>i{display:block;width:100%;height:2px;background:#fff;transform:scaleX(var(--sf-progress));transform-origin:left}
.sf-video-nav{position:absolute;bottom:0;left:0;right:0;height:44px;background:#111216;display:flex;justify-content:space-around;align-items:center;font-size:12px;line-height:20px;color:#aaa}.sf-video-nav>b{color:#fff;font-weight:600}.sf-video-create{display:grid;place-items:center;height:24px;width:36px;border:2px solid white;border-radius:6px;color:#fff;font-size:24px;box-shadow:2px 0 #f04766,-2px 0 #2be6df}
.sf-note{background:#fffdf9;color:#252525}
.sf-note-header{height:52px;display:flex;align-items:center;gap:8px;padding:12px;font-size:12px;line-height:20px;background:#fffdf9}.sf-note-header>.sf-icon{width:20px;height:20px}.sf-note-header>.sf-icon:first-child{margin-right:2px}.sf-note-follow{margin-left:auto;color:#e4475d;border:1px solid #ea657a;border-radius:16px;padding:2px 12px;font-size:10px;line-height:20px}
.sf-note-photo{height:328px;position:relative;overflow:hidden;background:#f4eada}.sf-note-photo>img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02);transform:scale(1.01)}
.sf-note-photo{display:block;width:100%;text-align:left;border-radius:0;padding:0}
.sf-album-page{position:absolute;inset:0;display:block;opacity:0;transform:translateX(24px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.sf-album-page.is-album-active{opacity:1;transform:translateX(0)}
.sf-album-page>img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02)}
.sf-album-close>img{transform:scale(1.38);object-position:center 60%}
.sf-album-ingredients{background:#f7f0df}.sf-album-ingredients>img{height:52%;object-position:center 58%}.sf-album-ingredients>span{display:block;padding:16px}.sf-album-ingredients small{display:block;font-size:10px;line-height:16px;color:#92816c}.sf-album-ingredients strong{display:block;font-size:20px;line-height:28px;color:#4f503b;margin-top:8px}.sf-album-ingredients>span>span{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.sf-album-ingredients b{display:block;font-size:12px;line-height:20px;font-weight:500;background:#fffdf6;padding:4px 8px;border-radius:4px;color:#7e715d}
.sf-album-count{position:absolute;right:12px;top:12px;background:#27272766;border-radius:16px;padding:2px 8px;color:white;font-size:10px;line-height:16px}
.sf-note-sticker{position:absolute;left:16px;bottom:16px;padding:12px 16px;background:#fff9ebeb;transform:rotate(-3deg);max-width:calc(100% - 32px);box-shadow:0 4px 12px #30200814}.sf-note-sticker small{display:block;font-size:10px;line-height:16px;color:#8f7358}.sf-note-sticker strong{display:block;font-size:18px;line-height:28px;font-weight:600;margin-top:4px}
.sf-note-page-dots{display:flex;gap:4px;justify-content:center;padding:10px}.sf-note-page-dots i{width:4px;height:4px;border-radius:50%;background:#d9d5cc}.sf-note-page-dots i.is-album-active{background:#ee4864}
.sf-note-copy{padding:0 16px}.sf-note-copy h3{font-size:16px;line-height:24px;font-weight:600;color:#272727;letter-spacing:0}.sf-note-copy>p{font-size:12px;line-height:20px;color:#59554c;margin-top:8px}.sf-note-copy>small{display:block;font-size:10px;line-height:16px;color:#517485;margin-top:8px}.sf-note-ingredients{display:block;font-size:10px;line-height:20px;padding:4px 8px;background:#f5efdf;color:#827258;margin-top:8px;width:fit-content;border-radius:4px}
.sf-note-footer{height:48px;position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:8px 64px 8px 12px;background:#fffdf9;border-top:1px solid #eee9df}.sf-note-footer>span:first-child{flex:1;background:#f3f1ec;color:#aaa399;border-radius:16px;padding:4px 12px;font-size:10px;line-height:20px;white-space:nowrap}.sf-note-footer .sf-icon{width:22px;height:22px}
.sf-save{position:absolute;z-index:6;right:10px;bottom:166px;color:white;display:grid;justify-items:center;gap:4px;min-width:36px;min-height:40px;padding:4px;text-shadow:0 1px 6px #0006}
.sf-save>.sf-icon{width:26px;height:26px;fill:#fff;stroke:#fff;transition:transform .5s cubic-bezier(.22,1,.36,1),color .3s cubic-bezier(.22,1,.36,1)}.sf-save>small{font-size:10px;line-height:16px}.sf-save[aria-pressed=true]>.sf-icon{fill:#f7c84d;stroke:#f7c84d;transform:scale(1.12)}
.sf-showcase[data-platform=xiaohongshu] .sf-save{bottom:4px;right:10px;color:#36332e;text-shadow:none;min-width:36px}.sf-showcase[data-platform=xiaohongshu] .sf-save>.sf-icon{width:22px;height:22px;fill:none;stroke:currentColor}.sf-showcase[data-platform=xiaohongshu] .sf-save[aria-pressed=true]>.sf-icon{fill:#f8cb67;stroke:#d9a140}.sf-showcase[data-platform=xiaohongshu] .sf-save>small{display:none}
.sf-save-toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-40%);z-index:7;background:#fffdf4f5;color:#383329;border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none;font-size:12px;line-height:20px;white-space:nowrap;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .3s cubic-bezier(.22,1,.36,1)}.sf-save-toast .sf-icon{width:16px;height:16px;color:#687d4c}.sf-showcase.is-saved-feedback .sf-save-toast{opacity:1;transform:translate(-50%,-50%)}
.sf-heart-burst{display:grid;place-items:center;position:absolute;inset:0;pointer-events:none;opacity:0;color:#fa4767}.sf-heart-burst>.sf-icon{width:80px;height:80px;fill:currentColor;stroke:currentColor;filter:drop-shadow(0 4px 12px #7e103733)}.sf-showcase.is-saved-feedback .sf-slide.is-active .sf-heart-burst{animation:sf-heart .7s cubic-bezier(.22,1,.36,1) both}
.sf-controls{display:flex;justify-content:center;align-items:center;gap:12px;color:#746e5c}
.sf-controls>button{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;transition:background .3s cubic-bezier(.22,1,.36,1)}.sf-controls>button:hover{background:#e9dfc8}.sf-controls .sf-icon{width:16px;height:16px}
.sf-dots{display:flex;gap:0;align-items:center}.sf-dots button{display:grid;place-items:center;width:24px;height:36px}.sf-dots i{display:block;width:6px;height:6px;background:#d6ccb5;border-radius:50%;transition:transform .5s cubic-bezier(.22,1,.36,1),background .3s cubic-bezier(.22,1,.36,1)}.sf-dots button[aria-pressed=true] i{background:#56613f;transform:scale(1.35)}
@keyframes sf-food-close{from{transform:scale(1.025) translateY(0)}to{transform:scale(1.13) translateY(-8px)}}
@keyframes sf-steam-rise{0%{opacity:0;transform:translate(0,32px) scaleX(.9)}30%{opacity:.16}80%{opacity:.07}100%{opacity:0;transform:translate(12px,-32px) scaleX(1.1)}}
@keyframes sf-heart{0%{opacity:0;transform:scale(.5) rotate(-12deg)}25%{opacity:1;transform:scale(1.12) rotate(8deg)}60%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(1.3) translateY(-24px)}}
@media(max-width:1100px) and (min-width:721px){.sf-story{gap:40px}.sf-phone{width:312px}.sf-screen{height:610px}.sf-note-photo{height:300px}.sf-note-copy>p{font-size:12px;line-height:20px}}
@media(max-width:720px){.sf-story{grid-template-columns:1fr;padding-block:56px;gap:40px}.sf-phone{width:312px}.sf-screen{height:610px}.sf-note-photo{height:300px}.sf-showcase{gap:16px}.sf-controls{gap:8px}}
@media(max-width:360px){.sf-phone{width:280px;padding:6px;border-radius:36px}.sf-screen{height:592px;border-radius:30px}.sf-note-photo{height:280px}.sf-platform-switch button{font-size:12px;padding:8px}.sf-note-copy{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.sf-slide,.sf-album-page,.sf-save>.sf-icon,.sf-save-toast,.sf-dots i{transition:none}.sf-video-photo,.sf-steam path,.sf-heart-burst{animation:none!important}.sf-slide,.sf-slide.is-active,.sf-slide.is-leaving,.sf-showcase[data-direction=back] .sf-slide{transform:none}.sf-showcase.is-saved-feedback .sf-slide.is-active .sf-heart-burst{opacity:0}}