/* Figma 563:81314, verified against the current design. */
.background-section { position:relative; margin-left:calc(var(--portfolio-content-left) + 16px); width:868.164px; height:calc(537.2px + var(--case-section-gap)); font-family:"PingFang SC",sans-serif; }
.background-heading { display:flex; flex-direction:column; gap:8px; color:var(--purple); height:77.398px; }
.background-number { font:400 22px/28.6px Mynerve,cursive; opacity:.6; height:28.602px; }
.background-heading h2 { font:400 34px/40.8px WHBNJZAQ,sans-serif; }
.background-summary { margin-top:8px; font-size:12px; line-height:27px; height:27px; color:#666; white-space:nowrap; }
.background-board { position:relative; height:343px; margin-top:20px; border:1px solid #e5e5e5; border-radius:24px; overflow:hidden; }
.ruled-paper { position:absolute; top:-1.5px; left:-6px; width:877px; height:343px; background:#fdfdfb; }
.fact-position { position:absolute; display:flex; align-items:center; justify-content:center; }
.fact-scene { left:40px; top:67.5px; width:248.921px; height:96.532px; --angle:-2deg; }
.fact-audience { left:305.93px; top:67.5px; width:248.921px; height:96.532px; --angle:2deg; }
.fact-moment { left:39.46px; top:192.36px; width:247.498px; height:92.28px; --angle:1deg; }
.fact-format { left:308px; top:192.36px; width:247.498px; height:92.28px; --angle:-1deg; }
.torn-fact { position:relative; width:246px; height:88px; padding:20px 24px; flex:none; transform:rotate(var(--angle)); filter:drop-shadow(8px 8px 0 rgba(0,0,0,.18)); }
.fact-paper { position:absolute; inset:0; width:246px; height:88px; }
.torn-fact h3 { position:relative; margin:0 0 4px; font-size:16px; font-weight:500; line-height:20px; letter-spacing:1.4px; color:#191510; }
.torn-fact p { position:relative; font-size:12px; line-height:24px; color:#191510bf; white-space:nowrap; }
.fact-tape { position:absolute; width:45.278px; height:13.731px; left:-11.798px; top:-.1445px; transform:rotate(-36deg); background:rgba(255,255,255,.6); box-shadow:0 1px 3px rgba(17,18,18,.15); }
/* Latest Figma corner tapes: each uses its own center and mirrored transform. */
.fact-audience .fact-tape { left:212.812px; top:-.1545px; transform:rotate(-144deg) scaleY(-1); }
.fact-moment .fact-tape { left:-10.5045px; top:-3.013px; transform:rotate(-39deg); }
.fact-format .fact-tape { left:215.3255px; top:1.057px; transform:rotate(-141deg) scaleY(-1); }
.background-phone { position:absolute; display:flex; align-items:center; justify-content:center; }
.phone-back { left:675.07px; top:78.72px; width:233.223px; height:329.449px; --phone-angle:20deg; }
.phone-front { left:585.54px; top:17.41px; width:191.974px; height:361.347px; --phone-angle:-5deg; }
.background-question { display:flex; align-items:center; gap:20px; padding:8px 24px; margin-top:26px; height:77.2px; border:1px solid #7f6cf699; border-radius:16px; }
.background-question>img { flex:none; width:32px; height:32px; }
.background-question>div { padding:4px; width:764px; flex:none; }
.background-question h3 { margin:0; font-size:14px; font-weight:500; line-height:25.6px; letter-spacing:-.25px; color:var(--purple); }
.background-question p { font-size:12px; line-height:25.6px; letter-spacing:-.25px; color:#666; white-space:nowrap; }
.background-question mark,.text-highlight { background:#ffe45c99; border-radius:4px; color:inherit; padding:4px 0; }
@media(max-width:1279.98px) { .background-section { margin-left:280px; } }

.background-phone img { display:block; flex:none; height:auto; transform:rotate(var(--phone-angle)); }
.phone-back img { width:139px; height:300px; }
.phone-front img { width:162.215px; height:348.536px; }

.text-purple { color:#7F6CF6; }

.background-phone img { object-fit:cover; object-position:center; background:#fff; border-radius:18px; outline:none; border:0; box-shadow:0 0 0 4px #fff, 8px 8px 0 4px rgba(0,0,0,.18); }


.background-section>.background-heading { height:36px; }
.background-section>.background-heading h2 { font:700 26px/36px DouyinSans,sans-serif; color:rgba(25,22,24,.9); }
.ruled-paper::before { content:""; position:absolute; left:5px; top:.5px; width:868px; height:343px; background:url("assets/svg/vibe 网站/Desktop 1440/s-Frame 2147243017.svg?v=d3dea2c73be3") center / 100% 100% no-repeat; }