@import url('../styles.css');
body{margin:0;overflow-x:hidden}.demo-home{position:absolute;z-index:5;top:20px;left:20px;font:10px Arial;text-decoration:none;color:inherit;opacity:.7}.demo-order{position:fixed;z-index:9;bottom:16px;right:16px;padding:12px 18px;background:#fff;color:#222;border-radius:30px;font:11px Arial;box-shadow:0 6px 24px #0002}.embed .demo-home,.embed .demo-order{display:none}.kicker{font:10px/1.5 Arial;letter-spacing:2px;text-transform:uppercase}.display{font:400 76px/.9 Georgia,serif;letter-spacing:-4px}.mini{font:11px/1.6 Arial}.scene{position:relative;overflow:hidden}.scene button,.scene a{touch-action:manipulation}.wide-action{display:flex;align-items:center;justify-content:space-between;width:100%;padding:17px 20px;border:0;text-decoration:none;font:12px Arial;cursor:pointer}.scene h1,.scene h2,.scene p{margin:0}.section-label{display:flex;justify-content:space-between;font:10px Arial;letter-spacing:1px}.scene input{font-size:16px}.scene input,.scene select{width:100%;padding:13px;border:1px solid #8885;border-radius:0}.scene label{display:block;font:11px Arial;margin:12px 0}.scene form{margin-top:25px}.demo-status{font:12px/1.6 Arial;margin-top:12px}
/* WEDDING: restrained editorial grid, inset art and giant serif. */
.w-editorial{background:#f2f0e8;color:#253d30}.wed-top{padding:25px 24px 17px;border-bottom:1px solid #253d3033;display:flex;justify-content:space-between;font:10px Arial;letter-spacing:1px}.wed-hero{padding:25px 24px 22px}.wed-heading{display:flex;justify-content:space-between;align-items:end}.wed-heading h1{font:400 71px/.87 Georgia,serif;letter-spacing:-4px}.wed-heading h1 i{font:italic 43px Georgia;color:#7d8968}.wed-date{writing-mode:vertical-rl;font:10px Arial;letter-spacing:2px;padding-bottom:5px}.wed-art{height:245px;margin:22px 0 19px;position:relative;background:#e2dfd4;overflow:hidden}.wed-art img{width:100%;height:100%;object-fit:cover;object-position:center 42%}.wed-art .stamp{position:absolute;right:15px;bottom:15px;width:76px;height:76px;border-radius:50%;background:#253d30;color:#e9eecf;display:grid;place-content:center;text-align:center;font:italic 19px Georgia;transform:rotate(12deg)}.wed-caption{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:19px}.wed-caption p{font:12px/1.5 Arial}.wed-caption p:last-child{text-align:right;color:#6e7769}.w-editorial .wide-action{background:#253d30;color:#f2f0e8}.wed-bottom{padding:17px 24px;display:flex;gap:15px;justify-content:space-between;font:10px Arial;border-top:1px solid #253d3033}.wed-details{padding:50px 24px}.wed-details h2{font:43px/1 Georgia;margin:18px 0 25px}.wed-program{display:grid;grid-template-columns:70px 1fr;gap:20px 12px;border-top:1px solid #253d3033;padding-top:20px;font:12px/1.5 Arial}.wed-program b{font:27px Georgia}.color-dots{display:flex;gap:10px;margin-top:20px}.color-dots i{height:34px;width:34px;border-radius:50%;background:#253d30}.color-dots i:nth-child(2){background:#7d8968}.color-dots i:nth-child(3){background:#c4b9a0}.color-dots i:nth-child(4){background:#e7dfce}
/* LOVE: a music sleeve with a letter player, not a hero poster. */
.r-album{background:#111820;color:#f2eae0}.album-top{display:flex;justify-content:space-between;padding:25px 24px;font:10px Arial;letter-spacing:1px;color:#b5b9bc}.album-hero{padding:10px 24px 25px}.album-hero h1{font:400 59px/.93 Georgia;letter-spacing:-2px;margin:13px 0 24px}.album-hero h1 em{color:#d2ab82;font-weight:400}.album-cover{position:relative;height:246px;overflow:hidden;background:#273345}.album-cover img{width:100%;height:100%;object-fit:cover;object-position:center 65%}.album-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0008,transparent)}.album-cover small{position:absolute;bottom:16px;left:16px;z-index:1;font:9px Arial;letter-spacing:1px}.album-cover .disc{position:absolute;width:90px;height:90px;border-radius:50%;right:16px;bottom:16px;background:repeating-radial-gradient(circle,#111 0 2px,#282829 2px 3px);box-shadow:0 8px 16px #0006;z-index:1}.disc:after{content:'♥';display:grid;place-items:center;position:absolute;inset:32px;border-radius:50%;background:#d2ab82;color:#19171a;font-size:13px}.album-player{border-bottom:1px solid #fff2;padding:17px 0}.track-row{display:flex;justify-content:space-between;align-items:center}.track-row strong{font:15px Arial}.track-row p{font:10px Arial;color:#959ba3;margin-top:6px}.play-letter{border:0;background:#d2ab82;border-radius:50%;width:42px;height:42px;cursor:pointer;color:#111;font-size:16px}.track-line{height:2px;background:#fff3;margin:20px 0 8px}.track-line i{display:block;width:33%;height:2px;background:#d2ab82}.track-time{display:flex;justify-content:space-between;font:9px Arial;color:#959ba3}.track-list{padding:0 24px 24px}.track-list div{display:flex;justify-content:space-between;padding:14px 0;font:11px Arial;border-bottom:1px solid #fff1;color:#c2c7cc}.love-letter{padding:35px 24px;background:#e9dfd1;color:#362f29}.love-letter h2{font:35px Georgia;margin-bottom:20px}.love-letter p{font:17px/1.8 Georgia}.love-letter[hidden]{display:none}
/* PARTY: typographic festival ticket and a check-in interaction. */
.p-ticket{background:#f34d2c;color:#191919}.ticket-top{display:flex;justify-content:space-between;padding:25px 24px;border-bottom:1px solid #191919;font:10px Arial;letter-spacing:1px}.party-title{padding:23px 24px 15px}.party-title h1{font:900 84px/.78 Arial;letter-spacing:-7px;text-transform:uppercase}.party-title h1 em{font:italic 83px/.92 Georgia;letter-spacing:-5px}.ticket-star{position:absolute;top:150px;right:21px;color:#e8ff8b;font-size:79px;transform:rotate(10deg)}.party-photo{margin:10px 24px 0;height:182px;background:#142fb2;position:relative;overflow:hidden}.party-photo img{width:100%;height:100%;object-fit:cover;object-position:center 72%;mix-blend-mode:screen}.party-photo .tag{position:absolute;bottom:16px;left:16px;background:#e8ff8b;padding:9px 12px;font:bold 10px Arial;transform:rotate(-5deg)}.party-ticket{margin:0 24px 25px;background:#f2efd8;padding:18px 18px 14px;position:relative;border-top:2px dashed #191919}.party-ticket:before,.party-ticket:after{content:'';position:absolute;width:20px;height:20px;background:#f34d2c;border-radius:50%;top:-11px;left:-11px}.party-ticket:after{left:auto;right:-11px}.ticket-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-bottom:17px}.ticket-grid small{font:8px Arial;letter-spacing:1px;display:block;margin-bottom:5px}.ticket-grid strong{font:bold 24px Arial;letter-spacing:-1px}.p-ticket .wide-action{background:#191919;color:#e8ff8b}.barcode{height:18px;background:repeating-linear-gradient(90deg,#191919 0 1px,transparent 1px 3px,#191919 3px 6px,transparent 6px 9px);margin-top:14px}.party-details{padding:35px 24px;background:#e8ff8b}.party-details h2{font:900 43px/.94 Arial;letter-spacing:-2px;margin-bottom:22px}.party-details p{font:13px/1.6 Arial}.party-result{margin-top:20px;padding:20px;background:#191919;color:#e8ff8b;font:20px Arial}.party-result[hidden]{display:none}.confetti-piece{position:fixed;top:-15px;z-index:20;width:9px;height:16px;animation:fall 2s ease-in forwards}@keyframes fall{to{transform:translateY(105vh) rotate(450deg)}}
/* LETTER: split paper, a numbered reading path, no glossy 3D. */
.a-letter{background:#d6deeb;color:#1f3c61}.letter-top{padding:25px 24px;display:flex;justify-content:space-between;font:10px Arial;letter-spacing:1px}.letter-paper{margin:0 22px 28px;padding:28px 23px;background:#f7f2e9;position:relative;box-shadow:0 10px 30px #1f3c6122;transform:rotate(-1.3deg)}.letter-paper .letter-mark{display:flex;justify-content:space-between;font:9px Arial;margin-bottom:32px}.letter-mark i{font:italic 38px Georgia;line-height:.7}.letter-paper h1{font:400 57px/.96 Georgia;letter-spacing:-2px;margin-bottom:25px}.letter-paper h1 em{font-weight:400;color:#778fae}.letter-paper p{font:15px/1.75 Georgia;margin-bottom:17px}.letter-sign{font:italic 21px Georgia;padding-top:15px;margin:15px 0;border-top:1px solid #1f3c6122}.a-letter .wide-action{background:#1f3c61;color:white}.letter-notes{padding:0 25px 25px;font:10px/1.6 Arial}.letter-more{padding:35px 25px;background:#1f3c61;color:#e5ebf5}.letter-more h2{font:36px Georgia;margin-bottom:20px}.letter-more p{font:16px/1.8 Georgia}.letter-more[hidden]{display:none}
.party-title .kicker{margin-bottom:16px}.party-details h2,.party-details p{break-before:avoid;break-after:avoid}.wed-art .stamp{font-size:17px;line-height:1.1;display:flex;align-items:center;justify-content:center}.ticket-star{pointer-events:none}.letter-paper{box-sizing:border-box}.scene a:focus-visible,.scene button:focus-visible{outline:3px solid #ffb951;outline-offset:4px}
@media(min-width:600px){.scene{max-width:480px;margin:auto;box-shadow:0 0 100px #0001}.scene-shell{padding:40px 0}.demo-home{position:fixed}.scene .wed-art{height:285px}.scene .album-cover{height:300px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}