/* Figma 413:82179: updated historical results and Learning composition. */
@font-face { font-family:KeLaiYinLanDeYeWan; src:url("assets/fonts/KeLaiYinLanDeYeWan-callouts.woff2") format("woff2"); font-weight:400; font-display:swap; }
.history-section { position:relative; width:868px; margin-left:calc(var(--portfolio-content-left) + 16px); padding-bottom:var(--case-section-gap); font-family:"PingFang SC",sans-serif; }
.history-heading h2 { margin:0; font:700 26px/34px DouyinSans,sans-serif; color:rgba(25,22,24,.9); }
.history-heading h2 span { color:var(--purple); }
.history-metrics { display:flex; gap:10px; margin-top:22px; }
.history-metrics li { flex:none; width:281.336px; height:108px; border:1px solid #0c131b1a; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.history-metrics li:first-child { width:281.328px; }
.history-metrics p { font-size:14px; line-height:22.4px; color:var(--muted); }
.history-metrics .metric-value { font:400 30px/36px "PingFang SC",sans-serif; color:var(--ink); }
.history-board { position:relative; margin-top:26px; height:471px; border:1px solid #0c131b1a; border-radius:18px; overflow:hidden; }
.history-backdrop { position:absolute; left:-2.93px; top:-1px; width:869.927px; height:471px; opacity:.5; overflow:hidden; }
.history-phone { position:absolute; left:48px; top:29.35px; width:190px; height:410.302px; }
.history-phone img { display:block; width:100%; height:100%; object-fit:cover; border-radius:18px; background:white; box-shadow:0 0 0 4px white,12px 16px 0 4px rgba(0,0,0,.05); }
.history-detail { position:absolute; left:117.84px; top:134.89px; width:173.8px; height:223.175px; }
.history-detail img { display:block; width:100%; height:100%; object-fit:cover; border-radius:17.6px; box-shadow:0 0 0 1.1px #d1d1d1,14px 18px 0 1.1px rgba(0,0,0,.05); }
.history-callout { position:absolute; left:301px; padding-left:6px; white-space:nowrap; font:400 16px/25px KeLaiYinLanDeYeWan,sans-serif; color:rgba(25,22,24,.9); }
.history-callout::before { content:""; position:absolute; left:0; top:4.67px; width:1px; height:15.661px; border-radius:1px; background:rgba(25,22,24,.5); }
.callout-one { top:172.39px; } .callout-two { top:262.39px; }
.history-learning { position:absolute; left:471.8px; top:81.72px; width:329px; padding:24px; background:rgba(255,255,255,.9); box-shadow:12px 18px 0 rgba(0,0,0,.05); }
.history-learning header { display:flex; align-items:flex-start; }
.history-learning h3 { margin:0; padding:4px 8px; border-radius:100px; background:#7f6cf64d; color:var(--purple); font-size:20px; line-height:19.2px; letter-spacing:-.25px; font-weight:600; }
.history-learning ol { list-style:none; margin:40px 0 0; padding:0; display:flex; flex-direction:column; gap:32px; }
.history-learning h4 { position:relative; display:block; padding-left:25px; margin:0 0 5px; font-size:16px; line-height:25.6px; font-weight:400; letter-spacing:-.25px; color:#191618; white-space:nowrap; }
.history-learning h4 span { position:absolute; left:0; top:2.8px; width:20px; height:20px; border-radius:50%; background:#b09fff; color:white; text-align:center; font:400 14px/20px Inter,sans-serif; }
.history-learning li p { font-size:14px; line-height:22.4px; letter-spacing:-.95px; color:#0b131b4d; }
.history-learning li:first-child p { width:261.5px; }
.history-learning li:last-child p { width:293px; }
.history-learning mark { color:inherit; background:#ffe45c99; border-radius:4px; padding:3px 0; }
.history-tape { position:absolute; left:-29.2335px; top:1.8995px; width:64px; height:20px; transform:rotate(144deg) scaleY(-1); background:rgba(234,230,255,.8); box-shadow:0 1px 3px rgba(17,18,18,.15); }
@media(max-width:1279.98px) { .history-section { margin-left:280px; } }

/* Supplied cropped PNG: display at Figma logical size, no second crop. */
.history-backdrop img { position:absolute; width:100%; height:100%; left:0; top:0; object-fit:cover; }
.history-phone img { opacity:.8; }