/* A media canvas with floating tools, not a caption form. */
#ovl:has(.guest-story-compose),#ovl:has(.wedding-live){background:#fff8e8;color:#365663;overflow:hidden;padding:0}
.guest-story-compose{position:relative;width:100%;height:100%;min-height:0;display:flex;flex:1;flex-direction:column;background:#fff8e8;color:#365663;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}
.guest-story-stage{position:relative;flex:1;min-height:0;background:linear-gradient(145deg,#d8edf4,#fff2d3);overflow:hidden;border-radius:0 0 16px 16px;isolation:isolate;container-type:inline-size}
.guest-story-preview,.story-camera-view{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;background:transparent}.story-camera-view{object-fit:cover;opacity:0}.guest-story-compose.camera-ready .story-camera-view{opacity:1}.guest-story-compose.camera-ready .guest-story-preview{visibility:hidden}.guest-story-preview img,.guest-story-preview video{display:block;width:100%;height:100%;object-fit:var(--story-fit,cover);background:transparent}
.story-empty{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;color:#4e7180}.story-empty>span{display:grid;place-items:center;width:66px;height:66px;border:1px solid #c5a25b;border-radius:50%;background:#fff9e7}.story-empty svg{width:28px;height:28px}.story-empty b{font:400 30px var(--serif);color:#876632}
.story-create-header{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 13px 28px;z-index:5;background:linear-gradient(#fffaf04d,transparent);pointer-events:none}.story-create-header>div{display:flex;gap:8px}.story-create-header button{pointer-events:auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fffaf0e8;color:#493e2e;border:0;font:600 20px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 1px 5px #765e3620}.story-create-header svg{width:21px;height:21px}
.story-create-footer{flex:none;padding:12px 18px max(14px,env(safe-area-inset-bottom));background:#fff8e8}.story-camera-controls{display:flex;align-items:center;justify-content:space-between;height:76px}.story-camera-controls>button{width:40px;height:40px;display:grid;place-items:center;border:1px solid #cfb77d;border-radius:10px;background:#fffdf4;color:#7c5e2d}.story-camera-controls svg{width:23px;height:23px}.story-camera-controls .story-shutter{width:70px;height:70px;padding:5px;border:2px solid #ad8641;border-radius:50%;background:transparent}.story-shutter>span{width:100%;height:100%;border-radius:50%;background:#fffdf4;box-shadow:inset 0 0 0 1px #d8b665}.story-shutter:active>span{background:#f0d291}.story-share-row{display:flex;align-items:center;justify-content:center;padding-top:8px}.story-mode{font:700 10px var(--sans);letter-spacing:.16em;color:#8c6d35}.story-share-row>button{display:none}.has-media .story-camera-controls{height:38px}.has-media .story-shutter,.has-media #guestStoryCamera,.has-media .story-mode{display:none}.has-media .story-create-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:10px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.has-media .story-share-row{padding:0;flex:1;justify-content:flex-end}.has-media .story-share-row>button{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;padding:8px 17px;border-radius:99px;min-height:40px;min-width:150px;background:#9e2432;color:#fffaf0;border:0;box-shadow:none;font:600 13px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0;text-transform:none}.story-share-avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid #fff9;background:#fff4d8;color:#7b5723;font-size:11px}
.guest-story-compose button:disabled{opacity:.45;cursor:default}.guest-story-status{position:absolute;bottom:0;left:0;right:0;background:#fffaf0ed;color:#9e2432;z-index:8;font:500 11px/1.5 var(--sans);padding:8px 16px;text-align:center}.guest-story-status:empty{display:none}.guest-story-compose [hidden]{display:none!important}.guest-story-compose button:focus-visible{outline:2px solid #9e2432;outline-offset:2px}
/* Text is a movable layer on both photographs and video. */
.story-text-layers{position:absolute;inset:0;z-index:3;pointer-events:none;container-type:inline-size}.story-text-layer{position:absolute;width:max-content;max-width:88%;padding:5px 8px;line-height:1.2;font-weight:600;white-space:pre-wrap;overflow-wrap:anywhere;text-shadow:0 1px 3px #36566399;touch-action:none;user-select:none;box-sizing:border-box;pointer-events:none}.story-text-layers .story-text-layer{pointer-events:auto;cursor:grab}.story-text-layer:active{cursor:grabbing}.story-text-layer>span{box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:5px}
.font-classic{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}.font-modern{font-family:Inter,Arial,sans-serif!important;font-weight:600}.font-strong{font-family:"Arial Black",Arial,sans-serif!important;font-weight:900}.font-serif{font-family:Georgia,"Times New Roman",serif!important;font-weight:400}.font-typewriter{font-family:"Courier New",monospace!important;font-weight:600}.font-signature{font-family:"Segoe Script","Bradley Hand",cursive!important;font-weight:400}
.fill-ivory>span,.story-type-editor textarea.fill-ivory{background:#fffaf0;box-shadow:4px 0 #fffaf0,-4px 0 #fffaf0;text-shadow:none}.fill-sindoor>span,.story-type-editor textarea.fill-sindoor{background:#9e2432;box-shadow:4px 0 #9e2432,-4px 0 #9e2432;text-shadow:none}.fill-gold>span,.story-type-editor textarea.fill-gold{background:#f5d379;box-shadow:4px 0 #f5d379,-4px 0 #f5d379;text-shadow:none}
/* Aa opens its own editing mode: direct text, font rail, palette, size, Done. */
.story-type-editor{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;background:#36566355;container-type:inline-size}.story-type-top{position:absolute;inset:14px 13px auto;display:flex;gap:10px;align-items:center}.story-type-top button{width:36px;height:36px;border:0;background:#fffaf0e8;color:#493e2e;border-radius:50%;font:700 18px var(--sans);display:grid;place-items:center}.story-type-top svg{width:20px;height:20px}.story-type-top #storyTextDone{margin-left:auto;background:none;color:#fffaf0;text-shadow:0 1px 3px #365663;width:auto;padding:0 7px;border-radius:0;font:600 15px var(--sans)}
#guestStoryForm #guestStoryCaption{display:block;position:relative;width:77%;min-height:100px;max-height:40%;resize:none;margin:0;padding:8px 5px;border:0!important;border-radius:0!important;background:transparent;box-shadow:none;outline:none;color:#fffaf0;text-align:center;line-height:1.2;font-size:7.78cqw;font-weight:600;text-shadow:0 1px 3px #36566399;caret-color:#fffaf0}#guestStoryForm #guestStoryCaption::placeholder{color:#fffaf0a6;font-weight:400}#guestStoryForm #guestStoryCaption:focus{outline:none;border:0;box-shadow:none}
.story-text-size{position:absolute;left:9px;top:26%;height:35%;width:24px;padding:0!important;margin:0;border:0;background:transparent;writing-mode:vertical-lr;direction:rtl;accent-color:#fffaf0;touch-action:none}
.story-type-bottom{position:absolute;bottom:18px;left:0;right:0;display:flex;flex-direction:column;gap:18px;align-items:center}.story-fonts{display:flex;gap:13px;max-width:100%;padding:4px 20px;overflow:auto;scrollbar-width:none}.story-fonts button{flex:none;width:40px;height:40px;border:1px solid #fff9;border-radius:50%;background:transparent;color:#fffaf0;font-size:19px}.story-fonts button[aria-pressed=true]{background:#fffaf0;color:#493e2e;border-color:#fffaf0}.story-colours{display:flex;gap:15px}.story-colours button{width:25px;height:25px;background:var(--swatch);border:2px solid #fffaf0;border-radius:50%;box-shadow:0 1px 3px #36566355}#storyDeleteText{font:500 11px var(--sans);color:#fffaf0;padding:5px 10px;border:0;background:transparent}
@media(max-height:560px){.story-type-bottom{gap:9px;bottom:9px}.story-fonts button{width:32px;height:32px}.story-type-editor #guestStoryCaption{min-height:70px}.story-create-footer{padding-top:8px}}
/* The live canvas fills the viewport; landscape footage fits on an ivory surround. */
.wedding-live{position:relative;flex:1;width:100%;height:100%;min-height:0;isolation:isolate;background:#fff5dc;font-family:var(--sans);overflow:hidden}.wedding-live-media{position:absolute;inset:0;background:linear-gradient(150deg,#d9edf5,#fff2d1);overflow:hidden}.wedding-live-media>video{display:block;width:100%;height:100%;object-fit:contain;background:transparent}.wedding-live-media>img{display:block;width:100%;height:100%;object-fit:cover}.wedding-live-media::after{content:'';position:absolute;inset:0;background:linear-gradient(#fffaf0cb,transparent 25%,transparent 55%,#fffaf0ed);pointer-events:none}.wedding-live-media:has(video)::after{background:linear-gradient(#fffaf0bf,transparent 20%,transparent 60%,#fffaf0db)}
.wedding-live-header{position:absolute;inset:0 0 auto;z-index:2;display:flex;align-items:center;gap:9px;padding:20px 15px;color:#493e2e}.live-host-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;border:1px solid #c9a45d;flex:none}.live-host-avatar img{width:100%;height:100%;object-fit:cover}.wedding-live-header>div{min-width:0;flex:1}.wedding-live-header b{display:block;font-size:12px}.wedding-live-header small{display:block;font-size:10px;margin-top:3px}.live-status{padding:6px 9px;border-radius:6px;background:#9e2432;color:#fffaf0;font-size:10px;letter-spacing:.06em;font-weight:700}.live-viewers{font-size:10px;padding:6px;background:#fff9e8dd;border-radius:6px}.wedding-live-header>button{width:30px;height:35px;background:transparent;font-size:27px;color:#493e2e}.live-waiting{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:center;gap:10px;padding:13px 18px;border:1px solid #d3b97a;border-radius:99px;background:#fffaf0ed;color:#765e36;font-size:11px;white-space:nowrap}
.wedding-live-bottom{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:20px 16px max(20px,env(safe-area-inset-bottom));color:#493e2e}.live-comment{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px;max-width:85%}.live-comment>span{width:30px;height:30px;display:grid;place-items:center;flex:none;border-radius:50%;background:#dfebed;border:1px solid #c9b37a;font-size:9px;color:#456b77}.live-comment p{font-size:11px;line-height:1.5}.live-comment p>b{display:block;font-size:11px}.live-comment p>span{display:block;margin-top:3px}.live-actions{display:flex;align-items:center;gap:12px}.live-blessing{flex:1;min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border:1px solid #bfa469;border-radius:99px;background:#fffaf0d9;color:#765e36;font-size:12px}.live-heart{width:40px;height:44px;font-size:34px;background:none;color:#9e2432}.wedding-live .hart{z-index:4;color:#9e2432}
.demo-story-header .story-sound svg{width:18px;height:18px}.wedding-live-header>.live-sound{font-size:19px;background:#fffaf0dd;border-radius:50%;width:30px;height:30px}
.cam{background:#fff8e8;color:#365663}.camfall{background:#fffaf0ed;border-color:#ccb783;color:#365663}.camctl button{color:#765e36}
/* Share and camera controls float over the same canvas used when viewing. */
.guest-story-compose .story-create-footer{position:absolute;bottom:0;left:0;right:0;z-index:5;background:linear-gradient(transparent,#fff8e8e8);padding-top:24px}.guest-story-compose.has-media .story-create-footer{padding-top:15px;background:linear-gradient(transparent,#fff8e8b3)}.guest-story-compose.has-media .guest-story-stage{border-radius:0}