/* Figma: 415:83656, 415:83753, 415:83847. */
.anchor-section,.output-section,.reflection-section { position:relative; width:868px; margin-left:calc(var(--portfolio-content-left) + 16px); font-family:"PingFang SC",sans-serif; }
.anchor-section { height:711px; }.output-section { height:788px; }.reflection-section { height:357px; }
.ending-subheading { position:absolute; top:10px; width:100%; }.ending-subheading h3 { margin:0 0 8px; font-size:20px; font-weight:500; line-height:27px; color:#343434; }.ending-subheading p { font-size:12px; line-height:27px; color:#666; }
.anchor-diagram { position:absolute; left:.164px; top:97.172px; width:637px; height:413px; }
.anchor-screen { position:absolute; top:89.875px; left:675.633px; width:192.368px; height:416.54px;  }
.anchor-meaning { position:absolute; top:535.345px; left:0; display:flex; gap:24px; width:868px; height:90.2px; padding:16px 24px; border:1px solid #0c131b1a; border-radius:16px; background:linear-gradient(white,#fbfdff); }
.anchor-meaning>img { width:32px; height:32px; flex:none; }.anchor-meaning h4 { margin:0 0 8px; display:table; padding:4px 8px; border-radius:100px; color:var(--purple); background:#7f6cf633; font-size:12px; font-weight:500; line-height:19.2px; letter-spacing:-.15px; }.anchor-meaning p { font-size:14px; line-height:22.4px; letter-spacing:-.25px; color:#0c131b99; }
.output-panel { position:absolute; top:131.04px; height:545.917px; background:#f6f6f5; border-radius:18px; overflow:hidden; }
.panel-old { left:.164px; width:257.414px; }.panel-new { left:282.444px; width:590.684px; }
.output-panel h3 { position:absolute; margin:0; top:34.15px; left:0; right:0; text-align:center; font:400 30px/39px Mynerve,cursive; color:black; }.panel-new h3 { top:38.5px; }
.output-underline { position:absolute; left:58.37px; top:86.37px; width:152.334px; height:9.327px; }.panel-new .output-underline { left:224.127px; top:90.727px; }
.output-spark { position:absolute; top:52.942px; left:404.923px; width:35.493px; height:28.887px; }
.output-phone { position:absolute; top:147.84px; width:211.403px; height:434.619px; filter:drop-shadow(12.435px 12.435px 9.327px #00000040); }
.phone-old { left:23.01px; }.phone-new-one { left:58.45px; }.phone-new-two { left:318.35px; }
.output-phone-body { position:absolute; inset:0 .492px 0 0; background:white; border-radius:33.431px; box-shadow:inset 0 0 0 .492px #26394c,inset 0 0 0 1.475px white; }
.output-glass { position:absolute; top:2.95px; left:2.95px; width:205.503px; height:428.72px; }
.output-screen { position:absolute; left:9.83px; top:9.83px; width:191.737px; height:414.939px; mask-size:100% 100%; mask-repeat:no-repeat; background:white; }.output-screen>img { display:block; width:100%; height:100%; object-fit:cover; }
.output-camera { position:absolute; top:11.31px; left:73.253px; width:7.866px; height:7.866px; }
.output-speaker { position:absolute; top:2.95px; left:87.511px; width:36.381px; height:4.425px; background:#131313; border-radius:0 0 2.458px 2.458px; box-shadow:inset 0 0 .983px #ffffff26; }
.output-button { position:absolute; width:1.967px; background:white; border-radius:.983px; box-shadow:inset 0 0 .492px #26394c; }.button-power { right:-1.475px; top:129.79px; height:50.147px; }.button-volume { left:-1.967px; top:117.99px; height:31.465px; }
.output-fade { position:absolute; top:361.48px; left:0; right:0; height:184.435px; background:linear-gradient(to bottom,#f6f6f500,#f6f6f5 64.861%); pointer-events:none; }
.reflection-cards { position:absolute; top:105px; left:.164px; display:flex; gap:24px; }
.reflection-cards article { width:422px; height:176px; padding:24px; border:1px solid #0c131b1a; border-radius:16px; background:linear-gradient(white,#fbfdff); }
.reflection-cards article>img { display:block; width:32px; height:32px; margin-bottom:12px; }
.reflection-cards blockquote { margin:0 0 5px; width:374px; height:57.2px; font:400 22px/28.6px WHBNJZAQ,sans-serif; color:var(--ink); }
.reflection-cards article>p { font-size:14px; line-height:22.4px; letter-spacing:-.25px; color:#0c131b5c; white-space:nowrap; }
.reflection-sticker { position:absolute; left:778.9px; top:69.54px; width:126.144px; height:95.533px; object-fit:contain; transform:rotate(6deg); }
@media(max-width:1279.98px) { .anchor-section,.output-section,.reflection-section { margin-left:280px; } }

.anchor-diagram>img { display:block; width:100%; height:100%; object-fit:contain; }
.anchor-player { border-radius:18px; background:#f5f5f5; box-shadow:0 0 0 4px white,0 9px 18px 4px #00000014; overflow:hidden; }
.anchor-player video { display:block; width:100%; height:100%; object-fit:contain; }
.anchor-video-controls { position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; gap:6px; padding:18px 9px 9px; background:linear-gradient(transparent,rgba(255,255,255,.96)); opacity:0; transition:opacity 160ms ease; }
.anchor-video-controls[hidden] { display:none; }
.anchor-player:hover .anchor-video-controls,.anchor-player:focus-within .anchor-video-controls,.anchor-player.is-paused .anchor-video-controls { opacity:1; }
.anchor-video-controls button { flex:none; border:0; border-radius:4px; padding:4px 2px; background:transparent; color:#555; font:10px/16px "PingFang SC",sans-serif; cursor:pointer; }
.anchor-video-controls input { min-width:0; width:100%; height:18px; margin:0; accent-color:#9b88f5; cursor:pointer; }
.anchor-video-controls output { flex:none; font:9px/16px Inter,sans-serif; color:#666; }
.anchor-video-controls :focus-visible { outline:2px solid #9b88f5; outline-offset:2px; }
@media(hover:none) { .anchor-video-controls { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .anchor-video-controls { transition:none; } }

/* Supplied phone PNGs include the device frame and shadow (3× export). */
.output-phone { display:block; height:404.333px; width:252.333px; object-fit:contain; filter:none; top:142.84px; }
.phone-old { width:242.667px; left:16.343px; }
.phone-new-one { left:51.783px; }
.phone-new-two { left:311.683px; }

.anchor-diagram { border-radius:18px; overflow:hidden; }
.anchor-diagram>img { border-radius:18px; }

/* Figma 455:115867: upper-right accent beside NEW, rotated 180 degrees. */
.output-spark { left:60.85%; top:4.41%; width:6.01%; height:5.29%; transform:rotate(180deg); }

/* One-time sticker placement when the reflection enters view. */
.reflection-sticker { transform-origin:55% 65%; }
.reflection-sticker.sticker-pending { opacity:0; }
.reflection-sticker.sticker-placed { animation:place-reflection-sticker 650ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes place-reflection-sticker {
 0% { opacity:0; transform:translate(5px,-24px) rotate(15deg) scale(1.16); filter:drop-shadow(0 14px 9px #00000026); }
 18% { opacity:1; }
 66% { opacity:1; transform:translate(0,1px) rotate(5deg) scale(.98); filter:drop-shadow(0 1px 1px #0000000a); }
 84% { transform:translate(0,-1px) rotate(6.5deg) scale(1.01); }
 100% { opacity:1; transform:translate(0,0) rotate(6deg) scale(1); filter:drop-shadow(0 0 0 transparent); }
}
@media(prefers-reduced-motion:reduce) { .reflection-sticker.sticker-pending { opacity:1; }.reflection-sticker.sticker-placed { animation:none; } }

/* Figma 415:83656: typography only; supplied media geometry is retained. */
.anchor-section .ending-subheading h3 { font:700 22px/27px DouyinSans,sans-serif; color:rgba(25,22,24,.9); }
.anchor-meaning h4 { font-size:14px; font-weight:600; }
.anchor-meaning .text-purple { font-weight:500; }

/* Figma 415:83753: title, 24px title gap, and freshly exported hard shadows. */
.output-heading { height:34px; }
.output-heading h2 { margin:0; font:700 26px/34px DouyinSans,sans-serif; color:rgba(25,22,24,.9); }
.output-panel { top:58px; }
.panel-new { left:277.578px; }
/* 3× exports include side buttons, the 8px/18px hard shadow and parent clipping. */
.output-phone { top:147.667px; width:223px; height:398.333px; filter:none; }
.phone-old { left:21px; width:223px; }
.phone-new-one { left:56.333px; }
.phone-new-two { left:316.667px; }

/* Figma 415:83847: revised summary and retrospective. */
@font-face { font-family:KeLaiYinReflection; src:url("assets/fonts/KeLaiYinLanDeYeWan-reflection.woff2") format("woff2"); font-weight:400; font-display:swap; }
.reflection-section { height:333px; }
.reflection-heading { height:34px; }
.reflection-heading h2 { margin:0; font:700 26px/34px DouyinSans,sans-serif; color:rgba(25,22,24,.9); }
.reflection-cards { top:62px; left:0; }
.reflection-cards article { position:relative; overflow:hidden; }
.reflection-badge { position:absolute; top:23px; left:23px; margin:0; padding:4px 8px; height:28px; border-radius:100px; background:rgba(127,108,246,.3); color:var(--purple); font:600 18px/20px "PingFang SC",sans-serif; letter-spacing:-.25px; }
.reflection-cards article>.reflection-copy { position:absolute; top:63px; left:23px; width:374px; height:84.6px; margin:0; overflow:hidden; font:400 16px/28.6px KeLaiYinReflection,sans-serif; color:#0c131b; letter-spacing:normal; white-space:normal; }