/* ROLLI v0.9.5 — photo-first, playful native-feeling webapp. No API/camera logic changed. */
:root { --pink:#ffd6df;--peach:#faeadf;--butter:#ffde80;--mint:#dfecdc;--lilac:#e5d9f3;--brick:#bd4939;--navy:#25374c;--quiet:#526070;--stroke:#e8ded5;--paper:#fffefa;--surface:#ffffff; }
html,body{background:#fffefa;color:var(--navy);overflow-x:clip}
#app { overflow-x:clip; }
.app-topbar.site-nav{background:#fffefa;border-color:#eee5da;min-height:72px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.app-topbar .wordmark{font:900 39px/.95 Georgia,serif;color:#293246;letter-spacing:-2.4px}
.app-topbar .wordmark span{color:var(--brick)}
.app-topbar .nav-create{background:var(--brick);border-radius:16px;box-shadow:0 5px 15px #a84b3520}
.app-topbar .nav-link{color:#273b52}
.app-topbar-label{color:#8b6a7a}
.app-preview-tag{background:#faecdd;color:#b84f3f}
.btn{transition:transform .17s ease,background .17s ease,box-shadow .17s ease;cursor:pointer}
.btn.btn-coral{background:var(--brick);border-color:var(--brick);color:white;box-shadow:none;border-radius:16px;font-weight:850}
.btn.btn-coral:hover{background:#a53c2d;transform:translateY(-2px)}
.btn.btn-outline{border-color:#d8d6d1;border-radius:16px;color:#3e4c61;background:#ffffffdd}
.btn.btn-outline:hover{background:#fff3ed}
.rolli-featured{max-width:1270px;margin:32px auto 18px;display:grid;grid-template-columns:48% 52%;min-height:600px;padding:0 22px;isolation:isolate;}
.feature-copy{background:#ffe18a;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,5vw,75px) clamp(32px,4.6vw,67px);border-radius:34px 0 0 34px;min-width:0;overflow:hidden}
.feature-copy:before{content:'✳';position:absolute;font:140px sans-serif;top:-65px;right:-35px;color:#f8be73;opacity:.43;transform:rotate(16deg);pointer-events:none}
.feature-eyebrow,.feature-label{font-weight:900;font-size:11px;letter-spacing:1.3px;color:#9d583f;text-transform:uppercase}
.feature-eyebrow>span{font-size:19px;color:#be5143;margin-right:5px}
.feature-copy h1{font:700 clamp(48px,4.7vw,76px)/1.035 Georgia,serif;letter-spacing:-3.2px;color:#252d3c;max-width:640px;margin:27px 0 23px;position:relative}
.feature-copy h1 em{font-weight:500;color:var(--brick);font-style:italic}
.feature-copy>p{font-size:16px;line-height:1.68;color:#505268;max-width:420px;margin:0}
.feature-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.feature-actions .btn{padding:14px 21px;min-height:52px;font-size:13px}
.feature-proof{display:flex;flex-wrap:wrap;gap:9px 17px;margin-top:23px;font-size:11px;font-weight:800;color:#805752}
.feature-note{margin-top:38px;border-top:1px dashed #cdaa5c;padding-top:16px;display:flex;justify-content:space-between;font:800 10px/1.6 monospace;letter-spacing:1px;color:#a76c4a}
.feature-note span{font-size:18px}
.feature-art{height:100%;min-height:600px;border-radius:0 34px 34px 0;position:relative;background:#f8cad4;overflow:hidden;isolation:isolate}
.feature-art:before{content:'';position:absolute;width:65%;height:62%;border-radius:50%;background:#f6b4be;right:-12%;top:-19%;opacity:.7}
.feature-art:after{content:'';position:absolute;width:55%;height:45%;border-radius:55% 45% 20% 80%;background:#bad9df;left:-18%;bottom:-20%;opacity:.65;z-index:-1}
.art-phone{position:absolute;z-index:3;width:43%;height:78%;left:30%;top:12%;transform:rotate(-6deg);background:#253442;border:7px solid #253442;border-radius:33px;box-shadow:0 23px 35px #47364040;display:flex;flex-direction:column;overflow:hidden;color:white;max-width:260px}
.art-phone-bar{height:50px;display:flex;justify-content:space-between;align-items:center;padding:0 11px;gap:5px}
.art-phone-bar strong{font:900 22px Georgia,serif;letter-spacing:-1px}.art-phone-bar small{font:800 8px sans-serif;letter-spacing:.4px;white-space:nowrap;color:#ffd6a5}
.art-phone-view{flex:1;min-height:0;position:relative;background:#171b21;overflow:hidden}
.art-phone-view img{width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:saturate(1.08) contrast(1.08);display:block}
.art-shot-count{position:absolute;z-index:3;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#182333c9;color:#fffbf6;border:1px solid #ffffff66;padding:6px 9px;border-radius:50px;font:800 9px sans-serif;letter-spacing:.7px}
.art-corner{position:absolute;width:17px;height:17px;border:2px solid white;z-index:1}.art-tl{top:14px;left:13px;border-right:0;border-bottom:0}.art-tr{top:14px;right:13px;border-left:0;border-bottom:0}.art-bl{bottom:13px;left:13px;border-top:0;border-right:0}.art-br{bottom:13px;right:13px;border-top:0;border-left:0}
.art-phone-bottom{height:76px;display:flex;align-items:center;justify-content:space-around;font-size:16px}
.art-shutter{height:49px;width:49px;border:4px solid #fff;border-radius:50%;box-shadow:inset 0 0 0 4px #263441;background:#fff}
.art-polaroid{position:absolute;z-index:4;width:34%;max-width:192px;background:#fff;box-shadow:0 20px 22px #76596545;padding:8px 8px 12px;text-align:center}
.art-polaroid img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.art-polaroid span{display:block;color:#a55569;font:italic 16px Georgia,serif;margin-top:10px}
.art-photo-left{left:3%;top:10%;transform:rotate(-13deg)}
.art-photo-right{right:1%;bottom:10%;transform:rotate(11deg)}
.art-star{position:absolute;left:15%;bottom:8%;font:95px Georgia,serif;line-height:1;color:#fff1a4;transform:rotate(15deg);z-index:2}
.art-doodle{position:absolute;right:7%;top:8%;transform:rotate(10deg);font:italic 24px Georgia,serif;color:#b03d4a;z-index:5}
.art-sticker{position:absolute;z-index:5;right:4%;top:39%;width:104px;height:104px;border-radius:50%;background:#a8d8c4;border:3px dashed #fff7e6;box-shadow:0 5px 8px #8d536c22;display:grid;place-content:center;text-align:center;color:#294b50;font:800 15px/1.2 Georgia,serif;transform:rotate(10deg)}
.art-sticker span{font:29px Georgia,serif;line-height:1}
.art-tape{position:absolute;width:130px;height:27px;z-index:6;left:12%;top:6%;transform:rotate(-12deg);background:#d0edecbd;mask-image:repeating-linear-gradient(100deg,#000 0 7px,#000b 8px 14px)}
.art-disclaimer{position:absolute;right:14px;bottom:12px;font:750 8px monospace;color:#965968;letter-spacing:.5px}
.rolli-ribbon{max-width:1225px;margin:4px auto 56px;display:flex;justify-content:space-around;gap:15px;flex-wrap:wrap;padding:19px 22px;border-top:1px dashed #e7d8c7;border-bottom:1px dashed #e7d8c7;color:#ad5760;font:850 11px/1.5 sans-serif;letter-spacing:1px}
.rolli-how,.rolli-film-gallery{max-width:1225px;margin:0 auto;padding:24px 22px 88px}
.rolli-section-heading,.rolli-film-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;margin-bottom:28px}
.rolli-section-heading h2,.rolli-film-heading h2,.rolli-last-cta h2{font:700 clamp(42px,4vw,57px)/1.1 Georgia,serif;letter-spacing:-1.7px;color:#273346;margin:11px 0 0}
.rolli-section-heading h2 em,.rolli-film-heading h2 em,.rolli-last-cta h2 em{color:var(--brick);font-weight:500}
.rolli-section-heading p,.rolli-film-heading p{max-width:270px;line-height:1.7;color:#606e7b;font-size:14px;margin:0}
.rolli-step-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.rolli-step-card{border:1px solid #efe8e2;box-shadow:0 8px 23px #8a6d5b12;border-radius:25px;overflow:hidden;background:white;padding:0 22px 26px;min-width:0}
.step-art{height:230px;margin:0 -22px 21px;position:relative;display:grid;place-items:center;overflow:hidden}
.card-yellow .step-art{background:#fff0b7}.card-lilac .step-art{background:#eaddfa}.card-mint .step-art{background:#dbebd6}
.step-qr .qr-paper{width:164px;height:195px;background:#fffefa;border-radius:11px;transform:rotate(-7deg);box-shadow:0 15px 25px #b09b7838;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;color:#395476;padding:14px}
.qr-mark{font-size:84px;line-height:1;transform:scaleX(.85)}.qr-paper strong{font:italic 16px Georgia,serif}.qr-paper small{font:850 9px sans-serif;letter-spacing:1px;color:#bc5547}
.step-pop{position:absolute;z-index:2;font:800 13px sans-serif;letter-spacing:.2px;padding:12px;border-radius:14px;box-shadow:0 7px 13px #61515718}
.step-pop-one{right:11px;bottom:24px;background:#f9b3c6;color:#9a3856;transform:rotate(8deg)}
.shot-preview{width:155px;height:197px;background:#283442;border:8px solid #273545;border-radius:18px;transform:rotate(6deg);position:relative;overflow:hidden;box-shadow:0 14px 22px #544b6842}
.shot-preview img{width:100%;height:100%;object-fit:cover}.shot-dot{position:absolute;top:10px;left:11px;font:850 9px sans-serif;background:#29323db7;border-radius:20px;color:white;padding:5px}
.step-pop-two{left:7%;bottom:20px;background:#ffdb7f;color:#a74c48;transform:rotate(-10deg)}
.tiny-polaroid{position:absolute;width:145px;background:#fff;padding:9px 9px 27px;box-shadow:0 10px 21px #54685842}.tiny-polaroid img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.p1{left:18%;top:26px;transform:rotate(-14deg)}.p2{right:16%;bottom:10px;transform:rotate(12deg)}.reveal-spark{font-size:64px;color:#fe9db8;position:absolute;z-index:4;top:-8px;right:17%}
.step-num{font:850 10px sans-serif;letter-spacing:1.5px;color:#a7594c}.rolli-step-card h3{font:700 26px Georgia,serif;margin:9px 0;color:#2b3950}.rolli-step-card p{font:14px/1.7 sans-serif;color:#66707b;margin:0}
.rolli-film-gallery{padding-top:0}.rolli-film-heading h2{font-size:clamp(40px,4vw,56px)}
.film-look-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
.film-look-card{border-radius:20px;overflow:hidden;background:#fff;position:relative;min-width:0;box-shadow:0 9px 22px #182d3816}
.film-look-card>img{display:block;width:100%;height:230px;object-fit:cover;transition:transform .25s ease}
.film-look-card:hover>img{transform:scale(1.06)}
.film-look-card>div{padding:13px 11px 17px}.film-look-card strong{display:block;font:750 14px/1.5 sans-serif;color:#354052}.film-look-card small{display:block;font:12px/1.3 sans-serif;margin-top:4px;color:#757a84}
.fl-two img{filter:saturate(.81) brightness(1.07)}.fl-three img{filter:sepia(.12) saturate(1.12)}.fl-four img{filter:contrast(1.07) saturate(1.08) brightness(.87)}.fl-five img{filter:grayscale(1) contrast(1.1)}
.gallery-disclaimer{font:11px/1.5 sans-serif;text-align:right;color:#918781;margin:12px 0 0}
.rolli-last-cta{max-width:1181px;margin:0 auto 45px;padding:51px 65px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#ffe5e4;border-radius:30px;position:relative;overflow:hidden}
.rolli-last-cta h2{position:relative;z-index:2;margin:10px 0}.rolli-last-cta p{color:#636874;position:relative;z-index:2}.rolli-last-cta .btn{min-height:55px;white-space:nowrap;position:relative;z-index:2;padding:13px 22px}
.cta-doodle{position:absolute;right:29%;top:-55px;color:#ffc16f;font:300 210px Georgia,serif;transform:rotate(-12deg);pointer-events:none}
/* Make the rest of the working webapp share the visual language without touching its behavior. */
body:not(.rolli-camera-mode) .app-screen.scrapbook-workspace{max-width:1160px;padding-top:31px}
body:not(.rolli-camera-mode) .app-screen .work-title{font-size:clamp(42px,5vw,61px);color:#283449;font-weight:700;letter-spacing:-2.1px}
body:not(.rolli-camera-mode) .app-screen .work-title em{color:var(--brick)}
body:not(.rolli-camera-mode) .app-screen .work-sub{color:#606e7b;font-size:14px}
body:not(.rolli-camera-mode) .app-screen .surface,body:not(.rolli-camera-mode) .app-screen .event-card,body:not(.rolli-camera-mode) .app-screen .keybox,body:not(.rolli-camera-mode) .app-screen .privacy-settings{border-radius:25px;border-color:#e6dcd6;background:#fff;box-shadow:0 10px 25px #8e726110}
body:not(.rolli-camera-mode) .app-screen .surface .label-sm,body:not(.rolli-camera-mode) .app-screen .label-sm{color:#b24b3f}
body:not(.rolli-camera-mode) .app-screen .hint-box{background:#fff2ec;border-color:#f2dad1;color:#6a615d}
body:not(.rolli-camera-mode) .app-screen .event-card{background:#fff3ec}
body:not(.rolli-camera-mode) .app-screen .event-card .cover-preview{background:linear-gradient(to bottom,#ffffff00,#212b3e14),url('/images/friends-party-v2.webp') center 43% /cover!important;border-radius:17px;min-height:210px}
body:not(.rolli-camera-mode) .app-screen .stats .stat{border-color:#eadeda;background:#fff7ed}
body:not(.rolli-camera-mode) .app-screen .stats .stat:nth-child(2){background:#f5eafa}
body:not(.rolli-camera-mode) .app-screen .stats .stat:nth-child(3){background:#e7f0e5}
body:not(.rolli-camera-mode) .app-screen .empty{background:#fff5eb;border-color:#e7c6b6}
body:not(.rolli-camera-mode) .app-screen input:focus,body:not(.rolli-camera-mode) .app-screen select:focus{border-color:var(--brick);outline-color:#f4c2b5}
.app-tabbar{background:#fffefa;border-top:1px solid #e9ded6}.app-tabbar button[data-tab="create"]{color:var(--brick)}
body.rolli-camera-mode{background:#161c24}body.rolli-camera-mode .app-topbar.site-nav{background:#fffdf8}
/* Respect existing form layout and camera HUD; never overlay vital camera controls. */
@media(max-width:1080px){.rolli-featured{grid-template-columns:48% 52%;min-height:530px}.feature-art{min-height:530px}.feature-copy h1{font-size:clamp(43px,5vw,62px)}.art-phone{top:14%;height:75%}.rolli-step-card h3{font-size:22px}}
@media(max-width:800px){.rolli-featured{max-width:690px;display:flex;flex-direction:column;padding:0 15px;margin:15px auto 0}.feature-copy{border-radius:27px 27px 0 0;padding:34px 27px 29px}.feature-copy h1{font-size:clamp(41px,9.6vw,62px);letter-spacing:-2.1px;max-width:610px;margin:18px 0}.feature-art{min-height:480px;border-radius:0 0 27px 27px}.feature-note{margin-top:24px}.rolli-ribbon{margin:5px auto 39px;padding:12px 9px;gap:8px}.rolli-ribbon span{font-size:9px}.rolli-how,.rolli-film-gallery{padding:18px 18px 56px}.rolli-step-grid{gap:10px}.rolli-step-card{padding:0 13px 18px}.step-art{height:175px;margin:0 -13px 15px}.rolli-step-card h3{font-size:20px}.rolli-step-card p{font-size:12px}.rolli-film-heading p,.rolli-section-heading p{font-size:12px}.film-look-grid{gap:10px}.film-look-card>img{height:170px}.film-look-card strong{font-size:12px}.film-look-card small{font-size:10px}.rolli-last-cta{margin:0 15px 35px;padding:31px 30px}.rolli-last-cta h2{font-size:40px}}
@media(max-width:600px){
 .app-topbar.site-nav{min-height:61px}.rolli-featured{margin-top:9px}.feature-copy{padding:30px 24px 24px}.feature-eyebrow{font-size:9px;letter-spacing:1px}.feature-copy h1{font-size:clamp(41px,10.7vw,61px);letter-spacing:-1.9px}.feature-copy>p{font-size:13px;line-height:1.6}.feature-actions{display:grid;grid-template-columns:1fr 1fr;margin-top:19px;gap:8px}.feature-actions .btn{min-height:48px;font-size:11px;padding:12px 8px}.feature-proof{font-size:9px;margin-top:19px;gap:7px 11px}.feature-note{font-size:8px;margin-top:23px}.feature-art{min-height:350px;height:350px}.art-phone{height:303px;width:41%;min-width:154px;max-width:190px;border-width:5px;left:30%;top:7%;border-radius:25px}.art-phone-bar{height:35px;padding:0 7px}.art-phone-bar strong{font-size:17px}.art-phone-bar small{font-size:6px}.art-phone-bottom{height:52px}.art-shutter{height:38px;width:38px;border-width:3px}.art-polaroid{width:33%;padding:5px 5px 9px}.art-polaroid span{font-size:11px;margin-top:5px}.art-photo-left{top:7%;left:2%}.art-photo-right{right:1%;bottom:11%}.art-doodle{top:2%;font-size:14px}.art-star{font-size:50px}.art-sticker{width:66px;height:66px;font-size:10px;right:1%;top:39%}.art-sticker span{font-size:17px}.art-tape{width:75px;height:18px;top:3%}.art-disclaimer{font-size:6px}.rolli-ribbon{justify-content:center;column-gap:14px;row-gap:7px}.rolli-section-heading,.rolli-film-heading{display:block;margin-bottom:19px}.rolli-section-heading p,.rolli-film-heading p{margin-top:12px;max-width:none}.rolli-section-heading h2,.rolli-film-heading h2{font-size:clamp(38px,9.5vw,49px)}.rolli-step-grid{grid-template-columns:1fr;gap:12px}.rolli-step-card{display:grid;grid-template-columns:43% 1fr;column-gap:14px;padding:0 13px 0 0;align-items:center;min-height:170px}.step-art{grid-row:span 3;min-height:170px;height:100%;margin:0}.step-num{align-self:end;font-size:9px}.rolli-step-card h3{font-size:21px;line-height:1.1;margin:5px 0}.rolli-step-card p{font-size:11px;line-height:1.45;margin:0 0 16px}.step-qr .qr-paper{width:110px;height:138px}.qr-mark{font-size:57px}.step-pop{font-size:8px;padding:7px;right:1px;bottom:8px}.shot-preview{width:110px;height:150px;border-width:5px}.tiny-polaroid{width:80px;padding:5px 5px 13px}.p1{left:13%;top:20px}.p2{right:13%;bottom:21px}.reveal-spark{font-size:40px}.rolli-film-gallery{padding-top:0}.film-look-grid{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;padding:0 0 12px;overscroll-behavior-x:contain}.film-look-card{min-width:148px;width:43vw;max-width:190px;flex:0 0 auto;scroll-snap-align:start}.film-look-card>img{height:178px}.gallery-disclaimer{text-align:left;font-size:9px}.rolli-last-cta{display:flex;align-items:flex-start;flex-direction:column;gap:12px;padding:30px 25px}.rolli-last-cta h2{font-size:clamp(38px,9vw,49px)}.rolli-last-cta .btn{width:100%;min-height:50px}.cta-doodle{right:-4%;font-size:150px;top:-45px}
 body:not(.rolli-camera-mode) .app-screen.scrapbook-workspace{padding-top:20px}body:not(.rolli-camera-mode) .app-screen .work-title{font-size:clamp(35px,9vw,49px)}body:not(.rolli-camera-mode) .app-screen .surface,body:not(.rolli-camera-mode) .app-screen .event-card{padding:19px;border-radius:20px}
}
@media(max-width:370px){.feature-copy h1{font-size:39px}.feature-actions .btn{font-size:10px}.art-phone{left:29%}.art-sticker{right:0}.rolli-ribbon span{font-size:8px}}
@media(prefers-reduced-motion:reduce){.btn,.film-look-card>img{transition:none!important}}

/* Real-use phone walkthrough: QR invitation → guest camera → revealed album. */
.step-phone-scene{height:258px;isolation:isolate}
.step-phone-scene::before{content:"";position:absolute;width:184px;height:184px;border:1px solid #ffffff80;border-radius:50%;box-shadow:0 0 0 18px #ffffff20,0 0 0 38px #ffffff12}
.phone-mock{position:relative;z-index:1;width:152px;height:232px;padding:5px;border:5px solid #202633;border-radius:27px;background:#202633;box-shadow:0 17px 28px #1b223337;transform:rotate(-5deg)}
.phone-camera{transform:rotate(4deg)}.phone-album{transform:rotate(5deg)}
.phone-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:18px;background:#fffdf8;color:#19243a}
.phone-island{position:absolute;z-index:3;top:5px;left:50%;width:47px;height:11px;border-radius:0 0 9px 9px;background:#202633;transform:translateX(-50%)}
.phone-status{height:21px;padding:4px 9px 0;display:flex;justify-content:space-between;font:700 7px/1 Arial,sans-serif;color:#26344c}
.phone-browser{height:22px;margin:0 7px;border-radius:7px;background:#f0eee9;display:flex;align-items:center;justify-content:space-between;padding:0 7px;color:#536071;font:700 7px Arial,sans-serif}
.invite-screen{position:relative;height:calc(100% - 43px);padding:9px 10px 7px;display:flex;align-items:center;flex-direction:column;text-align:center}
.phone-eyebrow{font:900 6px Arial,sans-serif;letter-spacing:1.1px;color:#c84b4d}
.invite-screen>strong{margin-top:5px;font:700 16px/.98 Georgia,serif;letter-spacing:-.4px}
.invite-screen>small{margin-top:4px;color:#697488;font:600 6px Arial,sans-serif}
.invite-confetti{position:absolute;right:12px;top:10px;color:#e9a927;font-size:15px}
.invite-mini-photo{width:100%;height:58px;margin-top:7px;overflow:hidden;border-radius:8px;background:#ffe0bc}
.invite-mini-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 38%}
.phone-join-button{width:100%;margin-top:7px;padding:7px 4px;border-radius:7px;background:#ed4e58;color:white;font:800 7px Arial,sans-serif;box-shadow:0 4px 9px #ed4e5833}
.invite-screen .phone-safe-note{font-size:5px;margin-top:5px}
.phone-step-chip{position:absolute;z-index:2;right:4%;bottom:16px;padding:8px 10px;border:1px solid #ffffffb3;border-radius:999px;background:#fffdf0;color:#63430d;box-shadow:0 7px 17px #28304425;font:900 7px Arial,sans-serif;letter-spacing:.8px}
.card-lilac .phone-step-chip{background:#fff;color:#6336a1}.card-mint .phone-step-chip{background:#f2fff9;color:#17664f}
.phone-status-light{position:absolute;z-index:2;top:0;left:0;right:0;color:#fff;text-shadow:0 1px 3px #000}
.camera-screen{position:absolute;inset:0;background:#1b1a1d;color:#fff}
.camera-screen>img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 42%}
.camera-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#111b2a73 0%,transparent 34%,transparent 48%,#111722de 100%)}
.camera-topline,.camera-count,.camera-caption,.camera-controls{position:absolute;z-index:1}
.camera-topline{top:27px;left:8px;font:900 6px Arial,sans-serif;letter-spacing:.7px;text-shadow:0 1px 4px #000}
.camera-topline b{color:#ff696c}.camera-count{top:26px;right:8px;padding:5px 6px;border-radius:7px;background:#131922a8;font:900 12px Arial,sans-serif}
.camera-count small{font-size:5px;letter-spacing:.3px}.camera-caption{left:8px;bottom:38px;font:700 8px/1.15 Georgia,serif;text-shadow:0 1px 4px #000}
.camera-controls{left:0;right:0;bottom:5px;display:flex;align-items:center;justify-content:space-around;color:#fff;font:700 11px Arial,sans-serif}
.camera-shutter{width:27px;height:27px;border:3px solid #fff;border-radius:50%;background:#ffffff38;box-shadow:0 0 0 2px #ffffff50}
.album-screen{height:calc(100% - 21px);padding:7px 9px 8px;display:flex;flex-direction:column}
.album-topline{display:flex;justify-content:space-between;color:#ac4d42;font:900 5px Arial,sans-serif;letter-spacing:.7px}
.album-screen>strong{margin-top:6px;font:700 12px/.98 Georgia,serif;letter-spacing:-.3px}
.album-screen>small{margin-top:4px;color:#72798b;font:600 5px Arial,sans-serif}
.album-photo-grid{margin-top:7px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:47px 40px;gap:4px}
.album-photo-grid img{width:100%;height:100%;display:block;object-fit:cover;border-radius:5px}
.album-photo-grid img:first-child{grid-row:span 2;object-position:center 38%}
.album-reveal-pill{align-self:center;margin-top:6px;padding:5px 8px;border-radius:999px;background:#dff5e9;color:#17664f;font:900 5px Arial,sans-serif;letter-spacing:.45px}
@media(max-width:800px){.step-phone-scene{height:205px}.phone-mock{width:128px;height:188px;border-width:4px;border-radius:24px}.phone-screen{border-radius:17px}.invite-mini-photo{height:42px}.invite-screen>strong{font-size:13px}.album-photo-grid{grid-template-rows:39px 34px}}
@media(max-width:600px){.step-phone-scene{height:100%;min-height:170px}.phone-mock{width:clamp(86px,27vw,112px);height:156px;padding:4px;border-width:4px;border-radius:21px}.phone-screen{border-radius:14px}.phone-island{top:4px;width:35px;height:8px}.phone-status{height:17px;padding:4px 6px 0;font-size:6px}.phone-browser{height:18px;margin:0 5px;padding:0 5px;font-size:6px}.invite-screen{height:calc(100% - 35px);padding:7px 7px 5px}.phone-eyebrow{font-size:5px}.invite-screen>strong{font-size:11px;margin-top:4px}.invite-screen>small{font-size:5px}.invite-confetti{right:7px;top:7px;font-size:11px}.invite-mini-photo{height:34px;margin-top:5px}.phone-join-button{margin-top:5px;padding:6px 2px;font-size:6px}.phone-step-chip{right:0;bottom:9px;padding:6px 7px;font-size:5px}.camera-topline{top:21px;left:6px;font-size:5px}.camera-count{top:20px;right:5px;padding:4px 5px;font-size:9px}.camera-count small{font-size:4px}.camera-caption{left:6px;bottom:29px;font-size:6px}.camera-controls{bottom:4px;font-size:9px}.camera-shutter{width:21px;height:21px;border-width:2px}.album-screen{height:calc(100% - 17px);padding:5px 6px}.album-screen>strong{font-size:9px;margin-top:4px}.album-screen>small{font-size:4px;margin-top:3px}.album-photo-grid{margin-top:5px;grid-template-rows:31px 26px;gap:3px}.album-reveal-pill{margin-top:4px;padding:4px 6px;font-size:4px}}