#moments.moments-figma{padding:63px 0 80px;background:repeating-linear-gradient(135deg,#00000006 0,#00000006 1px,transparent 1px,transparent 5px),#f9f9f9;color:#262626;overflow:hidden}
#moments .moments-shell{width:calc(100% - 48px);max-width:1300px;margin:auto;display:grid;grid-template-columns:539fr 679fr;gap:80px;align-items:center}
#moments .section-head{margin:0 0 73px}
#moments .eyebrow{display:inline-flex;align-items:center;gap:6px;background:white;padding:4px 13px 4px 4px;border-radius:100px;box-shadow:0 3px 3px #0000000d,0 1px 1px #00000026;font:400 14px/20px Arial,sans-serif;letter-spacing:0;color:#495057;margin:0 0 12px}
#moments .eyebrow img{width:18px;height:18px;object-fit:contain;flex:0 0 18px}
#moments #moments-heading{font:400 48px/1.2 Arial,'PingFang SC',sans-serif;letter-spacing:-2.4px;white-space:normal;margin:0 0 12px;color:#262626}
#moments .section-sub{font:400 14px/25.2px Arial,'PingFang SC',sans-serif;color:#595959;margin:0}
#moments .narrative-tabs{display:flex;flex-direction:column;gap:0;overflow:visible;border:0;border-right:1px solid #0000001a;padding:0;background:none;border-radius:0}
#moments .narrative-tabs button{display:flex;align-items:center;justify-content:flex-start;gap:14px;position:relative;flex:none;width:100%;min-width:0;min-height:88px;padding:22px 28px 22px 22px;border:0;border-radius:20px 0 0 20px;background:transparent;text-align:left;color:#000;white-space:normal;transition:background .25s,box-shadow .25s}
#moments .narrative-tabs button[aria-selected=true]{background:#fff;box-shadow:0 11px 23px #cfcfcf1a,0 42px 42px #cfcfcf17}
#moments .narrative-tabs button[aria-selected=true]::after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:7px;height:70px;border:2px solid #131313;border-radius:62px;background:linear-gradient(#fff 0 55%,#131313 55%)}
#moments .moment-tab-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:1px solid #e2e2e2;border-radius:10px}
#moments .moment-tab-icon img{width:24px;height:24px}
#moments button:last-child .moment-tab-icon{border:0}
#moments button:last-child .moment-tab-icon img{width:44px;height:44px}
#moments .moment-tab-copy{display:flex;flex-direction:column;gap:2px}
#moments .moment-tab-copy>span{font:500 20px/26px Arial,'PingFang SC',sans-serif}
#moments .moment-tab-copy small{font:400 16px/23px Arial,'PingFang SC',sans-serif;color:#667185}
#moments .moments-scene{width:100%;aspect-ratio:679/760;position:relative;container-type:inline-size}
#moments .moments-canvas{position:absolute;width:679px;height:760px;left:0;top:0;transform:scale(var(--scene-scale,1));transform-origin:top left}
#moments .moment-layer,#moments .moment-panel{position:absolute;width:367px;height:310px;transform:matrix(.866,.5,0,1,0,0);transform-origin:top left;border:1px solid #ccc;border-radius:6px;background:#c1c1c103}
#moments .moment-layer::before,#moments .moment-panel::before{content:"";position:absolute;left:-1px;right:-1px;top:-34px;height:33px;background:#e5e5e533;border:1px solid #ccc;transform:skewX(-45deg);transform-origin:bottom;border-radius:6px 6px 0 0}
#moments .moment-layer::after,#moments .moment-panel::after{content:"";position:absolute;right:-34px;top:-1px;bottom:-1px;width:33px;border:1px solid #ccc;background:#e5e5e533;transform:skewY(-45deg);transform-origin:left;border-radius:0 6px 6px 0}
#moments .layer-0{left:306px;top:120px}#moments .layer-1{left:259px;top:149px}#moments .layer-2{left:214px;top:175px}#moments .layer-3{left:168px;top:199px}#moments .layer-4{left:0;top:289px}
#moments .moment-panel{left:84px;top:22px;display:block;padding:14px;margin:0;min-height:0;background:white;box-shadow:25px 84px 26px #b8b7b70d,11px 37px 20px #b8b7b717;animation:none}
#moments .moment-panel::before,#moments .moment-panel::after{background:#fffdfd}
#moments .moment-details{height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:18px 14px;margin:0;background:#e8ecf3;border:1px solid #f2f2f2;border-radius:4px}
#moments .moment-details>div{position:relative;display:block;padding:0 0 0 29px}
#moments .detail-dot{position:absolute;left:0;top:4px;width:20px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#000;color:#fff;font:600 12px/1 Arial,sans-serif}
#moments .moment-details dt{font:500 12px/16px Arial,'PingFang SC',sans-serif;color:#667185;margin:0 0 3px}
#moments .moment-details dd{font:400 14px/18px Arial,'PingFang SC',sans-serif;color:#000;margin:0}
@media(max-width:1100px){#moments .moments-shell{gap:32px;grid-template-columns:1fr 1fr}#moments #moments-heading{font-size:40px}#moments .moment-tab-copy small{font-size:14px}#moments .section-head{margin-bottom:40px}}
@media(max-width:760px){#moments.moments-figma{padding:24px 0}#moments .moments-shell{grid-template-columns:1fr;gap:32px;width:calc(100% - 32px)}#moments .moments-scene{max-width:600px;margin:auto}#moments #moments-heading{font-size:34px;letter-spacing:-1.4px}#moments .eyebrow{font-size:11px}#moments .narrative-tabs button{padding:16px 28px 16px 14px}#moments .moment-tab-copy>span{font-size:18px}}
@media(prefers-reduced-motion:reduce){#moments .narrative-tabs button{transition:none}}

/* Figma 392:3763: left 20px corners and two inverse corners at the rail. */
#moments .moment-tab-corners{display:none}
#moments .narrative-tabs button[aria-selected=true]{z-index:1;overflow:visible}
#moments .narrative-tabs button[aria-selected=true] .moment-tab-corners{display:block;position:absolute;inset:0;pointer-events:none}
#moments .moment-tab-corners::before,#moments .moment-tab-corners::after{content:"";position:absolute;right:0;width:66.5px;height:38px;background:url('../img/paas-stack/corner.svg') center/100% 100% no-repeat;pointer-events:none}
#moments .moment-tab-corners::before{top:-37.8px;transform:scaleY(-1)}
#moments .moment-tab-corners::after{bottom:-37.2px}

/* Immutable depth order and slots. Every card lifts by the same vertical distance. */
#moments .moments-canvas .moment-panel{display:block!important;left:calc(var(--layer-index)*61px);top:calc(394px - var(--layer-index)*28px);transform:translateY(100px) matrix(.866,.5,0,1,0,0);z-index:calc(6 - var(--layer-index));background:rgba(193,193,193,.01);box-shadow:none;transition:transform .65s cubic-bezier(.22,1,.36,1),background .45s,box-shadow .45s;pointer-events:none}
#moments .moments-canvas .moment-panel .moment-details{opacity:0;transition:opacity .25s}
#moments .moments-canvas .moment-panel::before,#moments .moments-canvas .moment-panel::after{background:rgba(229,229,229,.2);transition:background .4s}
#moments .moments-canvas .moment-panel.is-raised{transform:translateY(-196px) matrix(.866,.5,0,1,0,0);background:white;box-shadow:25px 84px 26px #b8b7b70d,11px 37px 20px #b8b7b717;pointer-events:auto}
#moments .moments-canvas .moment-panel.is-raised .moment-details{opacity:1;transition-delay:.12s}
#moments .moments-canvas .moment-panel.is-raised::before,#moments .moments-canvas .moment-panel.is-raised::after{background:#fffdfd}
@media(prefers-reduced-motion:reduce){#moments .moments-canvas .moment-panel,#moments .moments-canvas .moment-panel .moment-details,#moments .moments-canvas .moment-panel::before,#moments .moments-canvas .moment-panel::after{transition:none}}

#moments .narrative-tabs button[aria-selected=true]::after{background:linear-gradient(to bottom,#fff 0 var(--moment-progress,0%),#131313 var(--moment-progress,0%) 100%)}

/* Reserve headroom and full card clearance while preserving fixed depth order. */
#moments .moments-scene{aspect-ratio:679/1000}
#moments .moments-canvas{height:1000px}

/* Figma 392:3699 — frosted, neutral inactive faces. Keep geometry and depth fixed. */
#moments .moments-canvas .moment-panel:not(.is-raised){border-color:#ccc;border-width:.89px;-webkit-backdrop-filter:blur(2.322px);backdrop-filter:blur(2.322px)}
#moments .moments-canvas .moment-panel:not(.is-raised)::before,
#moments .moments-canvas .moment-panel:not(.is-raised)::after{background:rgba(229,229,229,.2);border-color:#ccc;border-width:.89px;-webkit-backdrop-filter:blur(5.572px);backdrop-filter:blur(5.572px)}
