.demo-post-head{display:flex;align-items:center;gap:10px;padding:13px 14px}.demo-post-head>img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1px solid #c8b17d}.demo-post-head>div{flex:1;min-width:0}.demo-post-head b{display:block;font:600 12px var(--sans);color:#395a64}.demo-post-head small{display:block;color:#7d8886;font-size:9px;margin-top:4px}.demo-pov{font-size:7px;letter-spacing:.09em;color:#8c7149;background:#f6f0df;border-radius:8px;padding:5px;white-space:nowrap}
.demo-media{position:relative;overflow:hidden;background:#e7eeee;isolation:isolate}.demo-media img,.demo-media video{display:block;width:100%;height:100%;object-fit:cover}.demo-post-media{aspect-ratio:4/5;width:100%}.demo-film-label{position:absolute;top:12px;left:12px;padding:5px 8px;border:1px solid #fff8df88;border-radius:20px;background:#fff9edeb;color:#765d3d;font-size:8px;letter-spacing:.14em;pointer-events:none}.demo-post-caption{font:400 13px/1.6 var(--sans);padding:12px 14px 4px;color:#385661;margin:0}.demo-post-reactions{padding:6px 13px}.demo-comments{margin:0 14px 13px;border-top:1px solid #d7dfd9;padding-top:9px}.demo-comments>summary{cursor:pointer;font-size:10px;color:#817453;padding:3px 0 9px}.demo-comments .cmt{font-size:11px;line-height:1.5}.demo-comment-time{display:block;margin-top:3px;font-size:8px;color:#8c9692}.demo-comments .cmt b{margin-right:5px}.demo-fallback-photo{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}.rxpill{font-family:var(--sans);cursor:pointer}.rxpill:focus-visible{outline:2px solid #9e2432;outline-offset:3px}.demo-new-moments{position:sticky;top:4px;z-index:9;display:block;background:#9e2432;color:#fff9ef;padding:10px 14px;border-radius:24px;margin:6px auto;font-size:11px;box-shadow:0 4px 18px #9e24322b}.demo-new-moments[hidden]{display:none}
/* Reels are a full-bleed media surface, including behind their navigation. */
#phone.reels-mode #app{padding-bottom:0}
#phone.reels-mode #cont{padding:0;overflow:hidden}
.reelwrap{position:relative;height:100%;width:100%;min-height:0;overflow:hidden;background:#dce9ec}
.reelwrap .pf{position:absolute;inset:0;width:100%;height:100%;transform:none;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;touch-action:pan-y;scrollbar-width:none}
.demo-reel{height:100%;min-height:100%;width:100%;padding:0;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate}
.demo-reel .demo-media{position:absolute;inset:0;width:100%;height:100%}
.demo-reel .demo-media video{object-fit:cover;width:100%;height:100%}
.demo-reel::after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#233d46a8);pointer-events:none}
.demo-reel .demo-film-label{display:none}
.reel-topbar{position:absolute;inset:0 0 auto;z-index:6;display:flex;align-items:center;gap:18px;padding:20px 65px 28px 18px;color:#fffdf7;background:linear-gradient(#263e4c7a,transparent);pointer-events:none;text-shadow:0 1px 5px #263e4c77}
.reel-topbar h1{font:600 23px/1.2 var(--sans);letter-spacing:-.5px}
.reel-topbar select{pointer-events:auto;max-width:150px;width:auto;margin:0;padding:5px 2px;border:0;border-radius:0;background:transparent;color:inherit;font-size:11px;box-shadow:none;outline-offset:4px;cursor:pointer}
.reel-topbar option{color:#365663;background:#fffaf0}
.demo-reel-caption{position:absolute;bottom:90px;left:18px;right:80px;z-index:4;color:#fffdf5;text-shadow:0 1px 5px #243c4970}
.reel-author{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:13px}
.reel-author img{width:32px;height:32px;object-fit:cover;border:1px solid #fffcf3d9;border-radius:50%}
.reel-author>span{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#e9d4a4;color:#496774;font-size:10px;text-shadow:none}
.demo-reel-caption>p{font-size:12px;line-height:1.5;margin:0 0 8px}
.demo-reel-caption>small{font-size:10px;opacity:.9;letter-spacing:.01em}
.reel-actions{position:absolute;right:13px;bottom:142px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:21px;width:43px}
.reel-actions>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:43px;min-height:43px;padding:0;border:0;border-radius:0;background:none;color:#fffdf5;font-size:11px;text-shadow:0 1px 5px #243c49a0;box-shadow:none}
.reel-actions svg{display:block;width:28px;height:28px;filter:drop-shadow(0 1px 2px #243c4980)}
.reel-actions .reel-like.mine svg{fill:#b52840;stroke:#b52840}
.reel-sound{position:absolute;right:16px;top:16px;z-index:7;width:36px;height:36px;padding:7px;border:0;border-radius:50%;color:#fffdf5;background:#36566340;backdrop-filter:blur(4px)}
.reel-sound svg{display:block;width:22px;height:22px}
.reel-play-toggle{position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,-50%);display:none;width:70px;height:70px;place-items:center;border:0;border-radius:50%;background:#fffaf044;color:#fffdf5;backdrop-filter:blur(3px)}
.reel-play-toggle.is-paused{display:grid}
.reel-play-toggle svg{width:34px;height:34px;fill:currentColor;stroke-width:0}
.reelwrap .pf:focus-visible{outline:2px solid #e9d4a4;outline-offset:-2px}
#phone.reels-mode #footerNav{padding:0 0 env(safe-area-inset-bottom);background:linear-gradient(transparent,#263e4c66)}
#phone.reels-mode #footerNav .wedding-dock{height:66px;padding:0 10px;border:0;border-radius:0;background:transparent;backdrop-filter:none;box-shadow:none}
#phone.reels-mode #footerNav .wedding-dock button{height:66px;padding:9px 0 8px;grid-template-rows:25px 14px;align-content:center;gap:4px;color:#fffdf5}
#phone.reels-mode #footerNav .wedding-dock button::before{display:none}
#phone.reels-mode #footerNav .wedding-dock button svg{width:24px;height:24px;color:#fffdf5;filter:drop-shadow(0 1px 3px #263e4c66)}
#phone.reels-mode #footerNav .wedding-dock button>span{color:#fffdf5;font-size:9px;line-height:14px;text-shadow:0 1px 3px #263e4c88}
#phone.reels-mode #footerNav .wedding-dock button.on svg{stroke-width:2.5}
#phone.reels-mode #footerNav .wedding-dock button.on>span{text-decoration:underline;text-underline-offset:4px}
#ovl:has(.demo-story-canvas){isolation:isolate;background:#e8eff0;overflow:hidden}.demo-story-canvas{position:absolute;inset:0;z-index:-1}.demo-story-canvas img,.demo-story-canvas video{display:block;width:100%;height:100%;object-fit:cover}.demo-story-canvas::after{content:'';position:absolute;inset:0;background:linear-gradient(#fffaf0bd,transparent 22%,transparent 58%,#fff9edfa)}.demo-story-header{position:relative;z-index:5;margin-top:8px;background:#fffaf0dc;border-radius:12px;color:#395d65!important;font-size:10px!important}.demo-story-next{position:absolute;inset:14% 0 28%;z-index:1;background:transparent}.demo-story-caption{position:absolute;bottom:24px;left:20px;right:20px;z-index:4;background:#fffaf1e8;border:1px solid #d6c18d;border-radius:18px;padding:18px;color:#395b65}.demo-story-caption>small{font-size:9px;letter-spacing:.06em;color:#88714b}.demo-story-caption>p{font:400 19px/1.3 var(--serif);margin:9px 0 15px}.demo-story-reactions{display:flex;justify-content:space-between;gap:10px}.demo-story-reactions button{font-size:11px;color:#9e2432;padding:8px 10px;background:#fffdf6;border:1px solid #ddcbb5;border-radius:20px}.demo-story-reactions button:disabled{opacity:.6}.storybars{position:relative;z-index:7}.storybars .sb i{transition-duration:6.5s!important}.tray .rin>img{width:100%;height:100%;border-radius:50%;object-fit:cover}.group-time-note{padding:10px 0;font-size:10px;color:#6f858a}.group-media img,.group-media video{object-fit:cover!important;max-height:430px;background:#e8eeec}.group-post .demo-film-label{position:static;display:inline-block;margin:8px 13px 0}.demo-source-link{display:block;text-align:center;padding:10px;font-size:9px;color:#72878b}
@media(prefers-reduced-motion:reduce){.storybars .sb i{transition:none!important}}
.demo-video-pending{position:relative;min-height:250px;background:#e6eeee}.demo-video-pending>img{width:100%;height:100%;object-fit:cover;filter:blur(3px);opacity:.28}.video-pending-copy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center;padding:25px;color:#395e68;pointer-events:none}.video-pending-copy>span{font-size:46px;line-height:1;border:1px solid #bba77d;border-radius:50%;width:76px;height:76px;display:grid;place-items:center;background:#fffaf0}.video-pending-copy>b{font:400 26px/1.2 var(--serif)}.video-pending-copy>small{font-size:11px;line-height:1.5}.demo-reel:has(.demo-video-pending) .demo-reel-caption{bottom:14px}.demo-media:not(:has(video)) .demo-film-label{background:#fffaf0ed;color:#596e70;border-color:#d6c9a6}

.demo-filled-placeholder{position:relative;overflow:hidden;isolation:isolate}.demo-filled-placeholder>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}.demo-filled-placeholder>span{padding:5px 8px;border-radius:10px;background:#fffaf0e8;color:#466775;font-size:10px}.demo-filled-placeholder::before,.demo-filled-placeholder::after{display:none!important}

.demo-live-stream{position:relative;overflow:hidden;background:#e6eded}.demo-live-stream video{display:block;width:100%;height:100%;object-fit:cover}.demo-live-stream>.demo-film-label{position:absolute;top:12px;left:12px}.demo-live-stream .hearts{pointer-events:none}


.feed-reel-preview{display:block;border:0;text-align:left;cursor:pointer}.feed-reel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border:1px solid #d6c18d;border-radius:50%;background:#fff9efdf;color:#9e2432;font-size:25px;padding-left:4px}.feed-reel-preview:focus-visible{outline:3px solid #9e2432;outline-offset:-3px}

/* Shared conversation layout for feed posts and reel sheets. */
.post-comments{margin:8px 14px 0;border-top:1px solid #dbe4e2;padding-top:10px}
.view-comments{display:flex;align-items:center;gap:4px;padding:3px 0 10px;width:100%;text-align:left;font-size:11px;color:#71848a}
.view-comments>span:last-child{margin-left:auto;color:#9e2432;font-size:16px}
.comment-row{display:flex;align-items:flex-start;gap:10px;padding:12px 0;text-align:left}
.comment-avatar{flex:none;display:block;width:34px;height:34px;object-fit:cover;border-radius:50%;border:1px solid #d8e1df;background:#e3eef0}
.comment-initials{display:grid;place-items:center;color:#58717a;font-size:10px}
.comment-copy{flex:1;min-width:0}
.comment-meta{display:flex;align-items:baseline;gap:8px;line-height:1.4}
.comment-meta b{font-size:11px;color:#365663}
.comment-meta time{font-size:9px;color:#8a9699;white-space:nowrap}
.comment-copy p{font:400 12px/1.6 var(--sans);color:#4c646c;overflow-wrap:anywhere;margin:4px 0 0;white-space:pre-wrap}
.comment-compose{display:flex;align-items:center;gap:10px;padding:13px 0 15px;margin:0;border-top:1px solid #e0e7e4}
.comment-input-wrap{display:flex;align-items:center;flex:1;min-width:0;border:1px solid #d5e1df;border-radius:25px;background:#f5f8f5;padding:4px 5px 4px 12px}
.comment-input-wrap input{flex:1;width:0;min-width:0;border:0;background:transparent;box-shadow:none;outline:none;margin:0;padding:7px 0;color:#365663;font-size:12px;border-radius:0}
.comment-input-wrap:focus-within{border-color:#aebfc3;box-shadow:0 0 0 2px #dce9ec77}
.comment-input-wrap button{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#9e2432;color:#fffaf0}
.comment-input-wrap button svg{width:16px;height:16px}
.comment-input-wrap:has(input:placeholder-shown) button{background:#dce5e3;color:#7a8e94}
#ovl:has(.comments-sheet){overflow:hidden;background:transparent;justify-content:flex-end;animation:none;color:#365663}
.comments-backdrop{position:absolute;inset:0;background:#36566338;backdrop-filter:blur(2px);border:0;width:100%;height:100%}
.comments-sheet{position:relative;z-index:1;display:flex;flex-direction:column;min-height:0;height:74%;max-height:calc(100% - 50px);background:#fffdf6;border:1px solid #e3d9bf;border-bottom:0;border-radius:25px 25px 0 0;box-shadow:0 -10px 40px #36566326;animation:sheetUp .28s var(--ease);overflow:hidden}
.comment-sheet-handle{flex:none;width:34px;height:4px;border-radius:10px;background:#cbd7d6;margin:10px auto 4px}
.comment-sheet-header{flex:none;display:flex;align-items:center;justify-content:space-between;padding:13px 20px 16px;border-bottom:1px solid #e1e8e5}
.comment-sheet-header h2{font:600 16px/1.4 var(--sans);color:#365663;display:flex;align-items:center;gap:8px}
.comment-sheet-header h2 span{font-size:10px;font-weight:400;color:#8a9699}
.comment-sheet-header p{font-size:10px;font-weight:400;color:#8a9699;margin-top:3px}
.comment-sheet-header button{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#edf3f1;color:#68828a;font-size:22px}
.comment-sheet-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:5px 20px 15px;scrollbar-width:thin;scrollbar-color:#cfdad7 transparent}
.comment-sheet-scroll .comment-row{padding:15px 0}
.comment-sheet-scroll .comment-avatar{width:38px;height:38px}
.comment-sheet-scroll .comment-meta b{font-size:12px}
.comment-sheet-scroll .comment-copy p{font-size:13px}
.sheet-comment-compose{flex:none;padding:13px 18px calc(15px + env(safe-area-inset-bottom));background:#fffdf6;box-shadow:0 -3px 15px #36566305}
.comment-empty{padding:50px 15px;text-align:center;color:#58717a}
.comment-empty b{font:400 22px var(--serif)}
.comment-empty p{font-size:11px;margin-top:8px;color:#8a9699}
@media(prefers-reduced-motion:reduce){.comments-sheet{animation:none}}

.mobile-dev-panel{display:none}
@media(max-width:980px){
 #gear,#dbg{display:none!important}
 .mobile-dev-panel{display:block;margin:24px 14px 20px;border:1px solid #d7c8a3;border-radius:16px;background:linear-gradient(135deg,#fffaf0,#eaf2f3);color:#526e79;overflow:hidden}
 .mobile-dev-panel>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:15px 16px;cursor:pointer;font-size:12px}
 .mobile-dev-panel>summary::-webkit-details-marker{display:none}
 .mobile-dev-panel>summary>span:last-child{font-size:20px;transition:transform .2s}
 .mobile-dev-panel[open]>summary>span:last-child{transform:rotate(180deg)}
 .mobile-dev-body{padding:0 16px 16px;border-top:1px solid #dce4df}
 .mobile-dev-body>label{display:block;margin:14px 0;font-size:11px}
 .mobile-dev-body select{display:block;width:100%;margin:7px 0 14px;padding:9px;border:1px solid #d3dedc;background:#fffdf6;border-radius:9px;color:#526e79}
 #tlMobile{width:100%;accent-color:#9e2432;padding:0;margin:12px 0;border:0;background:transparent}
 .mobile-dev-date{font-size:12px;margin-bottom:12px;color:#365663}
 .mobile-dev-stops,.mobile-dev-actions{display:flex;gap:7px;flex-wrap:wrap}
 .mobile-dev-stops button{padding:8px 10px;font-size:10px;border:1px solid #d2c39f;border-radius:20px;background:#fffdf4;color:#6e817f}
 .mobile-dev-stops button.cur{background:#9e2432;border-color:#9e2432;color:#fffaf0}
 .mobile-dev-actions{margin-top:15px;border-top:1px solid #dce4df;padding-top:10px}
 .mobile-dev-actions .btn{margin:4px 0;padding:8px 10px;text-decoration:none;font-size:10px}
}

/* Independent chronological controls, shared story/post order on Feed. */
.feed-sortbar{display:flex;justify-content:flex-end;padding:10px 15px 3px}.moment-sort{display:flex;align-items:center;gap:9px;font:500 11px var(--sans);color:#765e36}.moment-sort>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.moment-sort select{width:auto;max-width:140px;min-height:36px;margin:0;padding:7px 25px 7px 12px;border:1px solid #cfb77d;border-radius:20px;background:#fff9e9;color:#684f30;font:500 11px var(--sans);cursor:pointer}.moment-sort select:focus-visible{outline:2px solid #9e2432;outline-offset:2px}
.reel-topbar{flex-wrap:wrap;gap:8px;padding-top:16px}.reel-topbar h1{width:100%}.reel-filters{display:flex;align-items:center;gap:12px;min-width:0;max-width:100%;pointer-events:auto}.reel-filters>select{max-width:125px}.reel-topbar .moment-sort select{max-width:125px;min-height:32px;border:1px solid #fff8;background:#fffaf0e8;color:#493c2a;padding:5px 6px;font-size:10px;text-shadow:none}.reel-topbar .moment-sort option{color:#493c2a}

/* Stories: media first, with all copy and controls overlaid directly. */
#ovl:has(.demo-story-canvas){background:#fff7e3;color:#365663;padding:0;isolation:isolate}.demo-story-canvas{background:linear-gradient(145deg,#deeff5,#fff3d7);z-index:0}.demo-story-canvas img{object-fit:cover}.demo-story-canvas video{object-fit:contain;background:transparent}.demo-story-canvas::after{background:linear-gradient(#fffaf0b8,transparent 22%,transparent 65%,#fffaf033);pointer-events:none}
#ovl:has(.demo-story-canvas) .storybars{position:absolute;top:9px;left:0;right:0;z-index:7;padding:0 11px;gap:4px}#ovl:has(.demo-story-canvas) .sb{height:3px;background:#fff8}#ovl:has(.demo-story-canvas) .sb i{background:#fffaf0}
#ovl:has(.demo-story-canvas) .demo-story-header{position:absolute;top:22px;left:0;right:0;margin:0;padding:0 13px;gap:10px;background:none;border:0;border-radius:0;display:flex;align-items:center;letter-spacing:0;text-transform:none;z-index:6}.story-profile-avatar{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:#fff5d9;border:1px solid #c7a15c;font-size:10px;color:#6b532f}.story-profile-avatar img{width:100%;height:100%;object-fit:cover}.demo-story-header>div{flex:1;min-width:0;color:#493e2e}.demo-story-header b{display:block;font:600 12px var(--sans)}.demo-story-header small{display:block;font:400 9px var(--sans);margin-top:3px}.demo-story-header>button{font-size:26px!important;width:32px!important;height:34px!important;background:#fffaf0cc!important;border:0!important;color:#6b532f!important}
.demo-story-prev,.demo-story-next{position:absolute;top:82px;bottom:135px;width:50%;z-index:2;background:transparent;border:0}.demo-story-prev{left:0}.demo-story-next{left:50%;right:0;inset-block:82px 135px}
.demo-story-caption{position:absolute;left:25px;right:25px;bottom:105px;z-index:3;padding:0;background:none;border:0;border-radius:0;text-align:center;pointer-events:none}.demo-story-caption>p{font:600 clamp(17px,4.8vw,23px)/1.35 var(--sans);color:#fffdf6;text-shadow:0 1px 3px #40535b,0 0 12px #40535b99;margin:0;overflow-wrap:anywhere;max-height:30vh;overflow:auto;white-space:pre-wrap;pointer-events:auto}
.demo-story-reactions{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));right:17px;left:17px;z-index:5;display:flex;justify-content:flex-end;align-items:center;gap:12px}.demo-story-reactions button{min-width:42px;min-height:42px;padding:8px;background:#fffaf0d9;border:1px solid #d8be82;color:#9e2432;border-radius:99px;font-size:24px}.demo-story-reactions button[aria-label="Remove story"]{font-size:11px;padding:8px 14px}
/* Use the posted text-layer geometry for photos and videos alike. */
#ovl .story-view-layers{z-index:3;pointer-events:none}#ovl .story-view-layers .story-text-layer{pointer-events:none}.demo-story-canvas[data-story-fit="contain"] img,.demo-story-canvas[data-story-fit="contain"] video{object-fit:contain}.demo-story-canvas[data-story-fit="cover"] video{object-fit:cover}