.layered-demo{--layer-ink:#f9f1e1;--layer-gold:#e4c492;--layer-paper:#fbf5e8;--w-bg:#fbf6ea;--w-ink:#3b5546;--w-on-ink:#fffdf6;--w-accent:#a68d62;min-height:100svh;overflow:clip;color:var(--layer-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--layer-backdrop,#18392f) 94%,transparent),color-mix(in srgb,var(--layer-backdrop,#18392f) 98%,transparent)),url(/assets/decor/linen.webp) 50%/cover}.layered-demo a,.layered-demo button{-webkit-tap-highlight-color:transparent}.layered-demo [hidden]{display:none!important}.layered-demo-header{max-width:1320px;margin:auto;padding:18px 32px;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:16px}.layered-demo-header>svg{justify-self:center}.layered-demo-brand{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 14px;min-width:0;text-align:center}.layered-demo-brand .brand-logo{width:136px;max-width:100%;color:var(--layer-gold)}.layered-demo-brand>span:last-child{color:var(--layer-ink);font:600 10px/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase;overflow-wrap:anywhere}.layered-demo-icon{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid #e4c49244;border-radius:50%;color:var(--layer-ink);background:#fff3d607;cursor:pointer}.layered-demo-icon:hover{background:#fff3d61c;border-color:#e4c49299}.layered-demo-icon:disabled{opacity:.25;cursor:default}.layered-demo-heading{padding:14px 22px 0;text-align:center}.layered-demo-heading>p{margin-bottom:12px;font-size:8px;letter-spacing:.24em;color:var(--layer-gold)}.layered-demo-heading h1{display:flex;align-items:baseline;justify-content:center;gap:22px;margin:0 0 10px;font:500 clamp(38px,4.5vw,64px) /1.2 var(--script)}.layered-demo-heading h1 i{font:italic 500 .5em/1 var(--serif);color:var(--layer-gold)}.layered-demo-heading h1>span{min-width:0;overflow-wrap:anywhere}.layered-demo .w-gift-fab{display:none}.layered-demo-heading>span{font:500 10px/1.7 var(--sans);letter-spacing:.22em;color:color-mix(in srgb,var(--layer-ink) 80%,transparent)}.layered-demo-experience{max-width:1200px;margin:auto}.layered-demo-scene{--spread-x:clamp(70px,16vw,210px);--spread-y:clamp(52px,7vw,100px);--tilt-x:0;--tilt-y:0;position:relative;height:clamp(440px,43vw,590px);perspective:1400px;touch-action:pan-y}.layered-demo-scene:before{content:"";position:absolute;inset:8% 9%;border-radius:50%;background:radial-gradient(ellipse,#c5d2a921,transparent 68%);pointer-events:none}.layered-demo-table{position:absolute;z-index:2;inset:0;transform-style:preserve-3d;transform:rotateX(calc(var(--tilt-y) * -1deg)) rotateY(calc(var(--tilt-x) * 1deg));transition:transform .45s ease-out}.layered-demo-photo{--closed-x:0px;position:absolute;top:50%;left:50%;width:clamp(205px,24vw,300px);padding:0;border:0;background:transparent;color:var(--w-ink);z-index:var(--photo-order);transform:translate(-50%,-50%) rotate(var(--closed-rotation)) scale(.92);transition:transform 1.1s cubic-bezier(.22,.95,.25,1.08),filter .6s ease;cursor:pointer}.layered-demo-photo:disabled{opacity:1;cursor:default}.layered-demo-photo:focus-visible{z-index:20;outline:2px solid var(--layer-gold);outline-offset:6px}.layered-demo-photo-print{display:block;padding:9px 9px 0;background:var(--layer-paper);box-shadow:0 22px 45px #071d2380,0 2px 4px #071d2355;transform-origin:center}.layered-demo-photo-window{display:block;aspect-ratio:4/5;overflow:hidden;background:#d6dacd}.layered-demo-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%}.layered-demo-photo-caption{display:block;padding:13px 4px 15px;font:500 clamp(17px,1.65vw,22px) /1.2 var(--script);text-align:center}.layered-demo-photo-caption small{display:block;font:500 6px/1.5 var(--sans);letter-spacing:.16em;margin-top:9px;color:#8a846f}.layered-demo[data-phase=opening] .layered-demo-photo{transition-delay:var(--photo-delay)}.layered-demo:not([data-phase=closed]) .layered-demo-photo{transform:translate(calc(-50% + var(--photo-x) * var(--spread-x)),calc(-50% + var(--photo-y) * var(--spread-y))) translateZ(var(--photo-depth)) rotate(var(--photo-rotation)) scale(var(--photo-scale))}.layered-demo[data-phase=open] .layered-demo-photo-print{animation:layered-paper-breathe 6s ease-in-out infinite alternate;animation-delay:var(--float-delay)}.layered-demo[data-playing=false] .layered-demo-photo-print{animation-play-state:paused}.layered-demo[data-phase=open] .layered-demo-photo:not([aria-pressed=true]){filter:brightness(.9)}.layered-demo-photo[aria-pressed=true] .layered-demo-photo-print{box-shadow:0 32px 60px #061e2399,0 3px 8px #061e2355}.layered-demo-cover{position:absolute;left:50%;top:50%;z-index:30;width:clamp(225px,26vw,320px);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:35px 22px 22px;border:1px solid #eddec2;color:var(--w-ink);background:linear-gradient(color-mix(in srgb,var(--layer-paper) 94%,transparent),color-mix(in srgb,var(--layer-paper) 87%,transparent)),url(/assets/decor/linen.webp) 50%/cover;box-shadow:0 22px 60px #071d2370;transform:translate(-50%,-50%) rotate(-2deg) translateZ(130px);transform-origin:50% 0;transition:transform 1s cubic-bezier(.4,0,.2,1),opacity .65s ease,visibility 0s,top .7s ease;cursor:pointer}.layered-demo-cover:disabled{opacity:1;cursor:default}.layered-demo-cover-border{position:absolute;inset:12px;border:1px solid #8c97734a;pointer-events:none}.layered-demo-cover-eyebrow{font:500 7px/1.6 var(--sans);letter-spacing:.23em;color:#828666}.layered-demo-cover strong{margin-top:17px;font:500 clamp(35px,4vw,52px) /.98 var(--serif);letter-spacing:-.02em;text-align:center}.layered-demo-cover strong em{display:block;margin-top:4px;color:var(--w-ink);font:500 1.1em/1.15 var(--script)}.layered-demo-cover-line{width:36px;margin-top:17px;border-top:1px solid #8c97736e}.layered-demo-cover-invite{margin-top:17px;font:italic 14px/1.4 var(--serif);color:#808469}.layered-demo-cover-invite b{display:block;margin-top:3px;color:var(--w-ink);font-size:19px;font-weight:500}.layered-demo-wax{width:57px;height:57px;display:grid;place-items:center;flex:none;margin:19px 0 10px;border:3px double #dbc49b;border-radius:48% 52% 50% 46%;color:#a58351;background:#e9d9b8;box-shadow:inset 0 0 0 4px #f4e8d038,0 4px 7px #544f3929}.layered-demo-cover>small{font:500 6px/1.6 var(--sans);letter-spacing:.17em;color:#777e61}.layered-demo:not([data-phase=closed]) .layered-demo-cover{transform:translate(-50%,-110%) rotateX(58deg) rotate(-14deg) translateZ(180px);opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s,0s,1.1s}.layered-demo-paper-note{position:absolute;z-index:0;top:14%;left:12%;padding:20px 25px;color:#64735a;background:#eae8cf;font:italic 24px/1.4 var(--serif);transform:translate(30px,25px) rotate(-14deg);opacity:0;box-shadow:0 8px 25px #001d1c44;transition:transform 1.2s ease .5s,opacity 1s ease .5s}.layered-demo-paper-note em{font-family:var(--script);font-size:1.1em}.layered-demo:not([data-phase=closed]) .layered-demo-paper-note{transform:translate(0) rotate(-14deg);opacity:.9}.layered-demo-thread{position:absolute;top:12%;bottom:0;left:37%;width:23%;border:1px solid #ceb37a55;border-radius:45%;transform:rotate(35deg)}.layered-demo-bottom{position:relative;z-index:50;min-height:130px;padding:0 22px 15px;text-align:center}.layered-demo-hint{color:color-mix(in srgb,var(--layer-ink) 80%,transparent);font:italic 17px/1.5 var(--serif);margin:0 0 13px}.layered-demo-controls{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:5px}.layered-demo-counter{display:inline-flex;align-items:baseline;gap:10px;min-width:55px;justify-content:center;font:500 21px/1 var(--serif);color:var(--layer-gold)}.layered-demo-counter i{font:500 10px/1 var(--sans);color:#94a994}.layered-demo-read{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:44px;margin-top:20px;padding:10px 25px;border:1px solid #e4c49280;border-radius:99px;color:var(--layer-ink);background:transparent;font:500 11px/1.6 var(--sans)}.layered-demo-read:hover{background:#f1e4c911}.layered-demo-quick-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}.layered-demo-quick-actions .layered-demo-read{margin-top:0}.layered-demo-details{max-width:1060px;margin:35px auto 0;padding-inline:30px;color:var(--w-ink)}.layered-details-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-bottom:26px;color:var(--layer-gold);font-size:10px}.layered-details-nav a{min-height:38px;display:inline-flex;align-items:center;border-bottom:1px solid #e5d0ac55}.layered-details-section{border-radius:10px;padding:55px clamp(22px,5vw,66px);margin-bottom:18px;background:var(--w-bg);border:1px solid #d8cbb2;box-shadow:0 15px 45px #071d2326;scroll-margin-top:20px;text-align:center;overflow-wrap:anywhere}.layered-details-eyebrow{font:600 8px/1.7 var(--sans);color:#967a4d;letter-spacing:.2em;margin-bottom:14px}.layered-details-section h2{font:500 clamp(32px,4vw,45px) /1.1 var(--serif);margin:0 0 23px}.layered-details-section>p:not([class]){max-width:520px;margin:16px auto;font:12px/1.9 var(--sans);color:#71806a}.layered-details-couple{margin:30px 0;font:500 clamp(28px,4vw,43px) /1.3 var(--script)}.layered-details-couple>span{display:block}.layered-details-invitation{position:relative;background:linear-gradient(135deg,#ffffff32,transparent 65%),var(--w-bg)}.layered-details-invitation:before{content:"";position:absolute;inset:11px;border:1px solid color-mix(in srgb,var(--w-ink) 12%,transparent);border-radius:5px;pointer-events:none}.layered-details-couple i{display:block;color:#a68d62;font:italic 500 23px/1.4 var(--serif);margin-block:8px}.layered-details-note{display:block;margin-top:28px;font:italic 22px/1.4 var(--serif);color:#967a4d}.layered-family-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:35px;margin-top:35px}.layered-family-grid article{padding:8px 14px 0}.layered-family-grid article+article{border-left:1px solid #d8cbb2}.layered-family-grid small{font:600 9px/1.7 var(--sans);letter-spacing:.15em;color:#967a4d}.layered-family-grid h3{margin:16px 0 22px;font:500 28px/1.2 var(--serif)}.layered-family-grid dl{margin:0;font:12px/1.8 var(--sans)}.layered-family-grid dl>div{display:flex;gap:8px;justify-content:center}.layered-family-grid dt{color:#8b947c}.layered-family-grid dd{margin:0}.layered-family-grid p{font:11px/1.8 var(--sans);color:#7c866f;margin:17px 0 0}.layered-family-switch{display:flex;justify-content:center;gap:8px;margin:25px 0 10px}.layered-family-switch button{min-height:42px;padding:9px 22px;border:1px solid #b9b899;border-radius:99px;background:transparent;color:#617358;font:500 11px/1.6 var(--sans)}.layered-family-switch button[aria-pressed=true]{color:#fff9ec;background:var(--w-ink);border-color:var(--w-ink)}.layered-calendar-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:35px;align-items:start;margin-top:30px}.layered-calendar-layout .wedding-calendar{width:100%;margin:0;border-radius:3px}.layered-calendar-layout[data-has-calendar=false]{grid-template-columns:minmax(0,1fr);max-width:540px;margin-inline:auto}.layered-event-details{text-align:left;min-width:0}.layered-event-date{font:500 20px/1.4 var(--serif);color:#957a50;margin:0 0 14px}.layered-event-details>h3{font:500 24px/1.2 var(--serif);margin-bottom:10px}.layered-event-details>p:not([class]){font:11px/1.8 var(--sans);color:#7c866f}.layered-day-plan{list-style:none;padding:0;margin:27px 0}.layered-day-plan li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:13px;padding-block:11px;border-top:1px solid #d8cbb2}.layered-day-plan time{color:#957a50;font:500 19px/1.3 var(--serif)}.layered-day-plan h4{font:600 11px/1.5 var(--sans);margin:0 0 4px}.layered-day-plan p{font:10px/1.7 var(--sans);color:#7c866f;margin:0}.layered-event-actions{display:flex;flex-wrap:wrap;gap:10px 16px}.layered-event-actions>:is(a,button){display:inline-flex;align-items:center;gap:7px;min-height:40px;border:0;border-bottom:1px solid #b9b899;padding:5px 0;background:transparent;color:#52684d;font:500 10px/1.5 var(--sans)}.layered-shared-section>.w-section{padding:0;max-width:none;margin:0;color:var(--w-ink)}.layered-demo .w-eyebrow{color:#967a4d;font-size:8px}.layered-shared-section .w-rsvp form{max-width:540px;margin-inline:auto;text-align:left}.layered-shared-section .w-rsvp{background:transparent;border-radius:0}.layered-shared-section .w-rsvp :is(input,textarea,select){color:#3b5546;background:#fffdf6}.layered-demo .gift-dialog{background:var(--w-bg);color:var(--w-ink)}.layered-demo .gift-qr-button img{object-fit:contain;background:white}.layered-demo-letter-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding-top:22px;margin-top:20px;border-top:1px solid #d7c9ac}.layered-demo-letter-links button{display:inline-flex;align-items:center;gap:7px;min-height:40px;border:0;background:transparent;color:#617358;font:500 10px/1.5 var(--sans)}.layered-demo-qr-dialog{position:fixed;width:min(440px,calc(100vw - 28px));max-width:none;max-height:calc(100dvh - 28px);margin:auto;overflow-y:auto;padding:58px 20px 26px;border:1px solid #d7c9ac;border-radius:5px;background:#fffdf6;color:#3b5546;text-align:center}.layered-demo-qr-dialog::backdrop{background:#102f4599;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.layered-demo-qr-dialog>p{font:600 9px/1.5 var(--sans);letter-spacing:.1em;color:#967a4d}.layered-demo-qr-dialog>img{display:block;width:min(100%,340px);height:auto;margin:15px auto;background:white}.layered-demo-qr-dialog>a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:11px;border-bottom:1px solid #d7c9ac}.layered-demo-footer{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px 22px 30px;color:color-mix(in srgb,var(--layer-ink) 75%,transparent);font:9px/1.5 var(--sans);text-align:center}.layered-demo-footer svg{flex:none;color:#d5bc8b}.layered-demo-letter{width:min(480px,calc(100vw - 30px));max-height:calc(100dvh - 30px);margin:auto;overflow-y:auto;padding:62px 42px 35px;border:1px solid #d7c9ac;border-radius:3px;background:#fbf6ea;color:#3b5546;text-align:center;box-shadow:0 35px 100px #001d1c66}.layered-demo-letter::backdrop{background:#0b2723d6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.layered-demo-letter-close{position:absolute;right:12px;top:12px;width:36px;height:36px;display:grid;place-items:center;border:0;background:transparent;color:#61765a}.layered-demo-letter-eyebrow{font:600 8px/1.5 var(--sans);letter-spacing:.18em;color:#9a8058}.layered-demo-letter h2{margin:15px 0;font:italic 500 37px/1.1 var(--serif)}.layered-demo-letter>p:not([class]){font:12px/1.9 var(--sans);margin:20px 0;color:#738168}.layered-demo-letter>strong{display:block;margin:28px 0;font:500 45px/1.1 var(--script)}.layered-demo-letter>strong i{display:block;font:italic 20px/1.5 var(--serif);color:#a68d62;margin-block:8px}.layered-demo-letter-date{display:flex;justify-content:center;align-items:center;gap:15px;padding:17px 0;border-block:1px solid #d7c9ac;font:500 20px/1.2 var(--serif)}.layered-demo-letter-ending{display:block;font:italic 20px/1.5 var(--serif);margin:22px 0}.layered-demo-letter>svg{color:#a68d62}@keyframes layered-paper-breathe{0%{transform:translateY(-3px) rotate(-.4deg)}to{transform:translateY(3px) rotate(.4deg)}}@media (max-width:700px){.layered-demo-quick-actions{gap:8px}.layered-demo-quick-actions .layered-demo-read{padding:9px 13px;font-size:10px;gap:7px}.layered-demo-details{padding-inline:16px;margin-top:32px}.layered-details-nav{gap:6px 16px;font-size:9px}.layered-details-section{padding:37px 20px;margin-bottom:14px}.layered-details-section h2{font-size:32px}.layered-family-grid{grid-template-columns:minmax(0,1fr);gap:25px;margin-top:25px}.layered-family-grid article{padding:0}.layered-family-grid article+article{border-left:0;border-top:1px solid #d8cbb2;padding-top:25px}.layered-calendar-layout{grid-template-columns:minmax(0,1fr);gap:28px}.layered-calendar-layout .wedding-calendar{max-width:340px;margin-inline:auto}.layered-demo-header{padding:14px 18px;gap:12px}.layered-demo-brand>span:last-child{font-size:9px;letter-spacing:.1em}.layered-demo-brand .brand-logo{width:108px}.layered-demo-heading{padding-top:12px}.layered-demo-heading>p{font-size:7px;letter-spacing:.16em}.layered-demo-heading h1{gap:12px;font-size:clamp(32px,8.6vw,47px)}.layered-demo-heading>span{font-size:9px}.layered-demo-scene{--spread-x:clamp(55px,15.2vw,100px);--spread-y:66px;height:410px}.layered-demo-photo{width:clamp(170px,47vw,235px)}.layered-demo-photo-print{padding:6px 6px 0}.layered-demo-photo-caption{font-size:16px;padding:10px 3px 12px}.layered-demo-photo-caption small{font-size:5px;margin-top:6px}.layered-demo-cover{width:clamp(208px,54vw,275px);padding:25px 18px 18px}.layered-demo-cover strong{font-size:36px;margin-top:12px}.layered-demo-cover-invite{margin-top:12px;font-size:12px}.layered-demo-cover-invite b{font-size:17px}.layered-demo-cover-line{margin-top:13px}.layered-demo-wax{width:46px;height:46px;margin:13px 0 8px}.layered-demo-wax svg{width:22px}.layered-demo-paper-note{top:9%;left:8%;padding:13px 15px;font-size:16px}.layered-demo-bottom{min-height:105px}.layered-demo-hint{max-width:290px;margin-inline:auto;font-size:15px}.layered-demo-footer{font-size:8px}.layered-demo-letter{padding:55px 25px 28px}}@media (max-width:360px){.layered-demo-scene{--spread-x:46px;--spread-y:55px;height:370px}.layered-demo-photo{width:160px}.layered-demo-cover{width:205px}.layered-demo-heading h1{font-size:31px;gap:9px}}@media (prefers-reduced-motion:reduce){.layered-demo *,.layered-demo :after,.layered-demo :before{animation:none!important;transition:none!important}.layered-demo-table{transform:none}}.layered-music{position:fixed;right:20px;bottom:20px;z-index:60;background:var(--layer-backdrop);box-shadow:0 4px 18px #0002}.layered-demo .layered-demo-photo-print{box-shadow:0 22px 45px #071d2340,0 2px 4px #071d2333}.layered-scene-ornament{position:absolute;inset:3% 12%;pointer-events:none;color:var(--layer-gold);opacity:.55;transition:transform 2s ease,opacity 1s ease}.layered-scene-ornament span{position:absolute;display:block}.layered-demo[data-phase=closed] .layered-scene-ornament{transform:scale(.72) rotate(-15deg);opacity:.18}.layered-demo[data-motion=ribbon] .layered-scene-ornament span{width:92%;height:34%;left:4%;top:33%;border:22px solid color-mix(in srgb,var(--layer-gold) 27%,transparent);border-top-color:color-mix(in srgb,var(--layer-gold) 65%,transparent);border-radius:50%;box-shadow:inset 0 2px 0 #fff4,0 2px 0 #fff4;transform:rotate(-38deg)}.layered-demo[data-motion=ribbon] .layered-scene-ornament span:nth-child(2){transform:rotate(38deg);width:65%;left:17%}.layered-demo[data-motion=ribbon] .layered-scene-ornament span:nth-child(3){display:none}.layered-demo[data-motion=ribbon] .layered-demo-cover:after{content:"";position:absolute;left:8%;top:-3%;width:18px;height:106%;background:linear-gradient(90deg,#b9869755,#ecd2cfcc 40%,#b9869766);border-inline:1px solid #fff8;transform:rotate(-9deg);pointer-events:none}.layered-demo[data-motion=ribbon] .layered-demo-photo-print{border-radius:50% 50% 2px 2px/10% 10% 2px 2px}.layered-demo[data-motion=ribbon][data-phase=closed] .layered-demo-photo{transform:translate(-50%,-50%) rotate(-30deg) scale(.68)}.layered-demo[data-motion=ribbon]:not([data-phase=closed]) .layered-demo-cover{transform:translate(-140%,-90%) rotate(-45deg) translateZ(150px)}.layered-demo[data-motion=orbit] .layered-demo-scene:before{inset:-15% 0;background:radial-gradient(circle at 12% 25%,#f7e2b8 0 1px,transparent 2px),radial-gradient(circle at 85% 22%,#f7e2b8 0 2px,transparent 3px),radial-gradient(circle at 70% 80%,#f7e2b8 0 1px,transparent 2px),radial-gradient(ellipse,#c4d4ff19,transparent 65%)}.layered-demo[data-motion=orbit] .layered-scene-ornament span{inset:9% 3%;border:1px solid;border-radius:50%;transform:rotate(-24deg)}.layered-demo[data-motion=orbit] .layered-scene-ornament span:nth-child(2){inset:0 15%;transform:rotate(35deg);border-style:dashed}.layered-demo[data-motion=orbit] .layered-scene-ornament span:nth-child(3){width:11px;height:11px;border-radius:50%;top:26%;left:12%;background:currentColor;box-shadow:0 0 28px currentColor}.layered-demo[data-motion=orbit] .layered-demo-paper-note,.layered-demo[data-motion=orbit] .layered-demo-thread{display:none}.layered-demo[data-motion=orbit] .layered-demo-cover{border-radius:48% 48% 6px 6px}.layered-demo[data-motion=orbit] .layered-demo-cover-border{border-radius:inherit}.layered-demo[data-motion=orbit] .layered-demo-photo-window{border-radius:50% 50% 0 0}.layered-demo[data-motion=orbit] .layered-demo-photo-print{border-radius:50% 50% 2px 2px}.layered-demo[data-motion=orbit][data-phase=closed] .layered-demo-photo{transform:translate(-50%,-50%) rotate(-150deg) scale(.25)}.layered-demo[data-motion=orbit]:not([data-phase=closed]) .layered-demo-cover{transform:translate(-50%,-65%) rotateY(120deg) rotate(20deg) scale(.7)}.layered-demo[data-motion=journal] .layered-scene-ornament{inset:13% 17%;background:repeating-linear-gradient(transparent 0 26px,#88684b22 26px 27px),var(--layer-paper);border:8px solid color-mix(in srgb,var(--w-ink) 60%,var(--layer-paper));border-radius:3px 14px 14px 3px;transform:rotate(-5deg);box-shadow:7px 7px 0 #e1ccaa66,13px 13px 0 #e1ccaa33;opacity:.85}.layered-demo[data-motion=journal] .layered-scene-ornament:after{content:"";position:absolute;top:0;bottom:0;left:48%;border-left:1px solid #88684b66;box-shadow:8px 0 15px #88684b55}.layered-demo[data-motion=journal] .layered-demo-photo-print:before{content:"";position:absolute;z-index:1;width:38%;height:24px;left:31%;top:-10px;background:#d0ab6e77;border-inline:2px dashed #f0dab066;transform:rotate(-7deg)}.layered-demo[data-motion=journal] .layered-demo-cover{transform-origin:0 50%;border-left:12px solid #ad835b;border-radius:3px 12px 12px 3px}.layered-demo[data-motion=journal]:not([data-phase=closed]) .layered-demo-cover{transform:translate(-50%,-50%) rotateY(-115deg)}.layered-demo[data-motion=journal][data-phase=closed] .layered-demo-photo{transform:translate(-50%,-50%) rotateY(85deg) scale(.85);transform-origin:0 50%}.layered-demo[data-motion=journal] .layered-demo-photo{transition-duration:1.35s,.6s}.layered-demo[data-motion=bloom] .layered-demo-paper-note{display:none}.layered-demo[data-motion=bloom] .layered-demo-thread{border-radius:50% 50% 0 0;width:46%;left:27%;top:5%;bottom:7%;transform:none}.layered-demo[data-motion=bloom] .layered-scene-ornament span{width:44%;height:70%;left:28%;top:15%;border:1px solid;border-radius:50%;transform:rotate(0deg);box-shadow:inset 0 0 35px #dec9ed22}.layered-demo[data-motion=bloom] .layered-scene-ornament span:nth-child(2){transform:rotate(60deg)}.layered-demo[data-motion=bloom] .layered-scene-ornament span:nth-child(3){transform:rotate(-60deg)}.layered-demo[data-motion=bloom] .layered-demo-cover{border-radius:45% 45% 2px 2px;padding-top:50px}.layered-demo[data-motion=bloom] .layered-demo-cover-border{border-radius:inherit;border-style:double;border-width:3px}.layered-demo[data-motion=bloom] .layered-demo-cover strong{font-size:clamp(27px,3vw,41px)}.layered-demo[data-motion=bloom] .layered-demo-photo-print,.layered-demo[data-motion=bloom] .layered-demo-photo-window{border-radius:45% 45% 2px 2px}.layered-demo[data-motion=bloom][data-phase=closed] .layered-demo-photo{transform:translate(-50%,-50%) rotate(calc(var(--photo-rotation) * 2)) scale(.18)}.layered-demo[data-motion=bloom]:not([data-phase=closed]) .layered-demo-cover{transform:translate(-50%,-75%) scale(1.25) rotateX(35deg)}.layered-demo[data-motion=film] .layered-demo-heading h1{font-family:var(--serif);letter-spacing:-.025em}.layered-demo[data-motion=film] .layered-demo-photo{width:clamp(245px,29vw,370px)}.layered-demo[data-motion=film] .layered-demo-photo-window{aspect-ratio:3/2}.layered-demo[data-motion=film] .layered-demo-photo-print{padding:21px 9px 0;background:#292724;color:#eed9b5;border-block:8px solid #151513}.layered-demo[data-motion=film] .layered-demo-photo-print:before{content:"";position:absolute;left:10px;right:10px;top:7px;height:6px;background:repeating-linear-gradient(90deg,#d2c6ac 0 8px,transparent 8px 18px)}.layered-demo[data-motion=film] .layered-demo-photo-caption{font:500 clamp(14px,1.5vw,21px) /1.4 var(--serif)}.layered-demo[data-motion=film] .layered-demo-photo-caption small{color:#c9b794}.layered-demo[data-motion=film] .layered-demo-paper-note{display:none}.layered-demo[data-motion=film] .layered-scene-ornament{inset:20% 0;border-block:20px dotted currentColor;transform:rotate(-10deg);opacity:.15}.layered-demo[data-motion=film] .layered-demo-cover{aspect-ratio:1;border-width:10px 0;border-color:#b09567;background:#292724;color:#f6e6c7}.layered-demo[data-motion=film] .layered-demo-cover :is(strong em,.layered-demo-cover-invite b){color:#f6e6c7}.layered-demo[data-motion=film] .layered-demo-cover :is(.layered-demo-cover-eyebrow,.layered-demo-cover-invite,small){color:#cfb88e}.layered-demo[data-motion=film] .layered-demo-cover strong{font-size:clamp(27px,3vw,40px)}.layered-demo[data-motion=film] .layered-demo-cover-line,.layered-demo[data-motion=film] .layered-demo-wax{display:none}.layered-demo[data-motion=film][data-phase=closed] .layered-demo-photo{transform:translate(-150%,-50%) scale(.55)}.layered-demo[data-motion=film]:not([data-phase=closed]) .layered-demo-cover{transform:translate(40%,-50%) rotate(20deg) scale(.9)}@media (max-width:700px){.layered-demo[data-motion=film] .layered-demo-photo{width:clamp(190px,54vw,280px)}.layered-demo[data-motion=film] .layered-demo-scene{height:360px}.layered-demo[data-motion=film] .layered-demo-cover{width:230px}.layered-demo[data-motion=bloom] .layered-demo-cover{padding-top:38px}.layered-demo[data-motion=bloom] .layered-demo-cover strong{font-size:29px}.layered-demo[data-motion=journal] .layered-scene-ornament{inset-inline:8%}.layered-demo[data-motion=ribbon] .layered-scene-ornament{inset-inline:0}}@media (prefers-reduced-motion:reduce){.layered-demo .layered-demo-table{transform:none}}.layered-cover-art{position:absolute;inset:0;container-type:size;overflow:hidden;color:var(--lc-ink);background:radial-gradient(ellipse at 50% 42%,#ffffff12,transparent 70%),var(--lc-bg);text-align:center}.layered-cover-art-heading{position:absolute;top:8%;left:5%;right:5%}.layered-cover-art-heading small{display:block;font:500 2cqw/1.5 var(--sans);letter-spacing:.22em;opacity:.8}.layered-cover-art-heading strong{display:block;font:500 6.5cqw/1.2 var(--script);margin-top:4%}.layered-cover-art-heading i{font-family:var(--serif);font-size:.7em;margin-inline:.45em}.layered-cover-art-heading>span{display:block;font:500 2.3cqw/1.5 var(--sans);letter-spacing:.18em;margin-top:3%;opacity:.75}.layered-cover-art-scene{position:absolute;inset:31% 0 17%}.layered-cover-art-photo{position:absolute;top:50%;left:50%;width:54%;padding:2.2% 2.2% 0;background:var(--lc-paper);color:var(--lc-paper-ink);box-shadow:0 3cqw 7cqw #0005;transform:translate(-50%,-50%) rotate(-5deg)}.layered-cover-art-photo:first-of-type{transform:translate(-88%,-60%) rotate(-19deg) scale(.82)}.layered-cover-art-photo:nth-of-type(2){transform:translate(-11%,-62%) rotate(18deg) scale(.84)}.layered-cover-art-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}.layered-cover-art-photo>span{display:block;padding:9% 0 11%;font:500 3.4cqw/1.1 var(--script)}.layered-cover-art-seal{position:absolute;z-index:1;right:15%;bottom:7%;width:15%;aspect-ratio:1;display:grid;place-items:center;font:6cqw/1 var(--serif);border-radius:50%;border:3px double #a78e66;color:#806344;background:#ebd7b6;transform:rotate(14deg)}.layered-cover-art>p{position:absolute;bottom:6%;left:5%;right:5%;margin:0;font:500 5.3cqw/1.3 var(--serif)}.layered-cover-art>p small{display:block;margin-top:6%;font:500 1.8cqw/1.5 var(--sans);letter-spacing:.14em;opacity:.7}.layered-cover-art-orbit{position:absolute;inset:-9% 11%;border:1px solid;border-radius:50%;transform:rotate(35deg);opacity:.2}.layered-cover-art[data-motion=ribbon] .layered-cover-art-orbit{inset:18% 0;border-width:10px;box-shadow:0 1px 0 #fff4;transform:rotate(-40deg)}.layered-cover-art[data-motion=ribbon] .layered-cover-art-photo:first-of-type{transform:translate(-80%,-28%) rotate(-12deg) scale(.8)}.layered-cover-art[data-motion=ribbon] .layered-cover-art-photo:nth-of-type(2){transform:translate(-16%,-83%) rotate(12deg) scale(.8)}.layered-cover-art[data-motion=orbit] .layered-cover-art-orbit{border-style:dashed;opacity:.5;inset:-15% 2%}.layered-cover-art[data-motion=orbit] .layered-cover-art-photo,.layered-cover-art[data-motion=orbit] .layered-cover-art-photo img{border-radius:50% 50% 0 0}.layered-cover-art[data-motion=orbit] .layered-cover-art-seal{color:#b9ad8a;background:#18263d}.layered-cover-art[data-motion=journal] .layered-cover-art-orbit{inset:-5% 10%;border-radius:4px;border:5px solid #a1784f;background:repeating-linear-gradient(transparent 0 14px,#b9936522 14px 15px),#f3e4cb;opacity:.85;transform:rotate(-6deg)}.layered-cover-art[data-motion=journal] .layered-cover-art-photo:after{content:"";position:absolute;top:-3%;left:30%;width:40%;height:7%;background:#b9986888;transform:rotate(-8deg)}.layered-cover-art[data-motion=bloom] .layered-cover-art-photo,.layered-cover-art[data-motion=bloom] .layered-cover-art-photo img{border-radius:45% 45% 0 0}.layered-cover-art[data-motion=bloom] .layered-cover-art-orbit{inset:-16% 14%;border:3px double;border-radius:50%;transform:rotate(-45deg)}.layered-cover-art[data-motion=bloom] .layered-cover-art-seal{background:#e8daed;color:#7f648c;border-color:#b499c0}.layered-cover-art[data-motion=film] .layered-cover-art-photo{width:67%;background:#242320;color:#f6e6c7;padding-top:5%;border-block:1.3cqw dotted #aa926c}.layered-cover-art[data-motion=film] .layered-cover-art-photo img{aspect-ratio:3/2}.layered-cover-art[data-motion=film] .layered-cover-art-photo:first-of-type{transform:translate(-83%,-97%) rotate(-10deg) scale(.8)}.layered-cover-art[data-motion=film] .layered-cover-art-photo:nth-of-type(2){transform:translate(-18%,2%) rotate(10deg) scale(.8)}.layered-cover-art[data-motion=film] .layered-cover-art-seal{display:none}.layered-cover-art[data-motion=film] .layered-cover-art-heading strong{font-family:var(--serif)}@container (min-aspect-ratio: 4/5){.layered-cover-art-heading{top:15%}.layered-cover-art-scene{inset:37% 0 6%}.layered-cover-art-photo{width:min(54cqw,36cqh)}.layered-cover-art>p{display:none}.layered-cover-art[data-motion=film] .layered-cover-art-photo{width:min(62cqw,50cqh)}.layered-cover-art[data-motion=film] .layered-cover-art-photo:first-of-type{transform:translate(-80%,-75%) rotate(-10deg) scale(.75)}.layered-cover-art[data-motion=film] .layered-cover-art-photo:nth-of-type(2){transform:translate(-15%,-23%) rotate(8deg) scale(.75)}}.layered-demo{--cover-motion-state:paused;position:relative;isolation:isolate}.layered-demo[data-cover-motion=running]{--cover-motion-state:running}.layered-cover-motion{z-index:1;overflow:clip;container-type:size;-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);opacity:1;transition:opacity .6s ease,visibility 0s}.layered-cover-motion,.layered-demo-scenery{position:absolute;inset:0;pointer-events:none}.layered-demo-scenery{z-index:0}.layered-demo:not([data-phase=closed]) .layered-cover-motion{opacity:0;visibility:hidden;transition-delay:0s,.6s}.layered-demo[data-phase=closed] .layered-demo-photo{opacity:0}.cover-memory-card{--memory-spread:clamp(96px,20vw,270px);--memory-position-x:var(--memory-x);--memory-position-y:var(--memory-y);--memory-lift:92px;position:absolute;z-index:2;top:50%;left:50%;width:clamp(110px,16vw,185px);padding:7px 7px 0;background:var(--layer-paper);color:var(--w-ink);border:1px solid #fff5;box-shadow:0 15px 35px #061e2340;transform:translate(-50%,-50%) translate(calc(var(--memory-position-x) * var(--memory-spread)),calc(var(--memory-position-y) * var(--memory-lift))) rotate(var(--memory-rotation));animation:cover-memory-float 3.2s ease-in-out infinite alternate;animation-delay:var(--memory-delay)}.cover-memory-card>div{aspect-ratio:4/5;overflow:hidden;background:#e1d9cd}.cover-memory-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%}.cover-memory-card>span{display:block;padding:10px 0 12px;font:500 clamp(12px,1.4vw,18px) /1.2 var(--script);text-align:center}.layered-demo[data-motion=fan] .cover-memory-card[data-memory-index="2"],.layered-demo[data-motion=fan] .cover-memory-card[data-memory-index="3"]{animation-duration:4.2s}.layered-demo[data-motion=ribbon][data-phase=closed] .layered-scene-ornament{transform:scale(1) rotate(-8deg);opacity:.6}.layered-demo[data-motion=ribbon][data-phase=closed] .layered-scene-ornament span{animation:cover-silk-sway 3.6s ease-in-out infinite alternate}.layered-demo[data-motion=ribbon][data-phase=closed] .layered-scene-ornament span:nth-child(2){animation-name:cover-silk-return;animation-duration:4.5s}.layered-demo[data-motion=ribbon] .cover-memory-card:is([data-memory-index="2"],[data-memory-index="3"]){display:none}.layered-demo[data-motion=ribbon] .cover-memory-card{animation-name:cover-silk-memory;animation-duration:3.8s}.layered-demo[data-motion=orbit][data-phase=closed] .layered-scene-ornament{opacity:.5;transform:none}.layered-demo[data-motion=orbit][data-phase=closed] .layered-scene-ornament span:first-child{animation:cover-constellation-turn 18s linear infinite}.layered-demo[data-motion=orbit][data-phase=closed] .layered-scene-ornament span:nth-child(2){animation:cover-constellation-turn 24s linear infinite reverse}.layered-demo[data-motion=orbit][data-phase=closed] .layered-scene-ornament span:nth-child(3){animation:cover-star-breathe 2s ease-in-out infinite alternate}.layered-demo[data-motion=orbit] .cover-memory-card{width:clamp(88px,13vw,150px);padding:5px;border-radius:50%;animation-name:cover-orbit-drift;animation-duration:4.6s}.layered-demo[data-motion=orbit] .cover-memory-card>div{border-radius:50%;aspect-ratio:1}.layered-demo[data-motion=orbit] .cover-memory-card>span{display:none}.layered-demo[data-motion=orbit] .cover-memory-card[data-memory-index="2"]{--memory-spread:clamp(90px,18vw,250px);animation-direction:alternate-reverse}.cover-constellation{position:absolute;inset:0}.cover-constellation-sky{z-index:-1;overflow:clip;pointer-events:none;opacity:1;transition:opacity .45s ease,visibility 0s}.layered-demo:not([data-phase=closed]) .cover-constellation-sky{opacity:0;visibility:hidden;transition-delay:0s,.45s}.cover-constellation>span{position:absolute;left:calc(2% + mod(var(--sparkle-index) * 61.8034, 96) * 1%);top:calc(2% + mod(var(--sparkle-index) * 37.4142, 96) * 1%);width:calc(1px + mod(var(--sparkle-index) * 7, 4) * .65px);aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--layer-ink) 80%,var(--layer-gold));box-shadow:0 0 8px color-mix(in srgb,var(--layer-gold) 70%,transparent);animation:cover-star-breathe calc(1.7s + mod(var(--sparkle-index), 6) * .35s) ease-in-out infinite alternate;animation-delay:calc(var(--sparkle-index) * -.43s)}.cover-constellation>span:nth-child(12n):after,.cover-constellation>span:nth-child(12n):before{content:"";position:absolute;inset:-4px .8px;background:currentColor;border-radius:50%;color:var(--layer-gold);opacity:.65}.cover-constellation>span:nth-child(12n):after{transform:rotate(90deg)}.cover-shooting-star{position:absolute;left:calc(7% + var(--shooting-index) * 24%);top:calc(12% + var(--shooting-index) * 28%);width:clamp(45px,10vw,100px);height:1.5px;border-radius:50%;color:var(--layer-ink);background:linear-gradient(90deg,transparent,currentColor);transform:rotate(-28deg);opacity:0;animation:cover-shooting-star calc(5.2s + var(--shooting-index) * 1.4s) linear infinite;animation-delay:calc(-.45s - var(--shooting-index) * 2.1s)}.cover-journal-pages{position:absolute;z-index:1;inset:0;perspective:1100px}.cover-journal-pages>span{position:absolute;width:clamp(210px,27vw,328px);aspect-ratio:3/4;left:50%;top:50%;background:repeating-linear-gradient(transparent 0 22px,#a48b6626 22px 23px),#ebdcc2;border:1px solid #c5ab85;box-shadow:6px 8px 15px #0002;transform-origin:0 50%;transform:translate(-50%,-50%) rotate(-8deg) rotateY(-15deg);animation:cover-journal-turn 3.8s ease-in-out infinite}.cover-journal-pages>span:nth-child(2){animation-delay:-1.2s;background-color:#f5e9d5}.cover-journal-pages>span:nth-child(3){animation-delay:-2.4s;background-color:#dfcdb0}.layered-demo[data-motion=journal] .cover-memory-card{animation-name:cover-journal-memory;animation-duration:3.8s}.layered-demo[data-motion=journal] .cover-memory-card:is([data-memory-index="2"],[data-memory-index="3"]){display:none}.layered-demo[data-motion=journal][data-phase=closed] .layered-scene-ornament{opacity:.55;transform:rotate(-5deg) scale(1)}.layered-demo[data-motion=bloom][data-phase=closed] .layered-scene-ornament{opacity:.55;transform:none}.layered-demo[data-motion=bloom][data-phase=closed] .layered-scene-ornament span{animation:cover-flower-open 4s ease-in-out infinite alternate}.layered-demo[data-motion=bloom][data-phase=closed] .layered-scene-ornament span:nth-child(2){--petal-angle:60deg;animation-delay:-1.3s}.layered-demo[data-motion=bloom][data-phase=closed] .layered-scene-ornament span:nth-child(3){--petal-angle:-60deg;animation-delay:-2.6s}.layered-demo[data-motion=bloom] .cover-memory-card{border-radius:45% 45% 3px 3px;animation-duration:3.6s}.layered-demo[data-motion=bloom] .cover-memory-card>div{border-radius:45% 45% 0 0}.layered-demo[data-motion=bloom] .cover-memory-card:is([data-memory-index="2"],[data-memory-index="3"]){display:none}.cover-petals{position:absolute;inset:0}.cover-petals>span{position:absolute;top:-32px;left:calc(5% + mod(var(--petal-index) * 23, 91) * 1%);width:calc(11px + mod(var(--petal-index) * 3, 9) * 1px);aspect-ratio:.65;border-radius:70% 15% 75% 20%;background:linear-gradient(135deg,color-mix(in srgb,var(--layer-paper) 85%,#d1accf),#bf9dc3);box-shadow:inset 1px 1px 2px #fff5;opacity:.65;animation:cover-petal-fall calc(5s + mod(var(--petal-index), 5) * .65s) linear infinite;animation-delay:calc(var(--petal-index) * -.8s)}.cover-film-reel{--film-frame-width:clamp(132px,18vw,210px);--film-gap:12px;position:absolute;top:37%;left:50%;width:max(100%,560px);padding:15px 0;overflow:hidden;color:#dfc395;background:#1d1c19;border-block:1px solid #a98b594d;box-shadow:0 15px 30px #0004;transform:translate(-50%,-50%) rotate(-10deg)}.cover-film-reel:after,.cover-film-reel:before{content:"";position:absolute;left:0;right:0;height:6px;top:4px;background:repeating-linear-gradient(90deg,#d3c3a0 0 8px,transparent 8px 19px);opacity:.7}.cover-film-reel:after{top:auto;bottom:4px}.cover-film-reel[data-reel="1"]{top:70%;transform:translate(-50%,-50%) rotate(11deg);opacity:.65}.cover-film-track{display:flex;width:max-content;animation:cover-film-run 28s linear infinite}.cover-film-reel[data-reel="1"] .cover-film-track{animation-direction:reverse;animation-duration:36s}.cover-film-group{display:flex;flex:none;align-items:start;gap:var(--film-gap);padding-right:var(--film-gap)}.cover-film-frame{flex:none;width:var(--film-frame-width);margin:0;padding:0;background:#22201b}.cover-film-frame img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 60%;filter:sepia(.15) brightness(.83)}.cover-film-frame figcaption{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 3px 0;font:500 6px/1.4 var(--sans);letter-spacing:.12em}.cover-film-frame figcaption>span{opacity:.65;font-size:5px}.cover-projector-glow{position:absolute;inset:-10% -5%;background:radial-gradient(ellipse at 85% 14%,#edcf8720,transparent 57%);animation:cover-projector-breathe 8s ease-in-out infinite alternate}.layered-demo[data-motion=film][data-phase=closed] .layered-scene-ornament{opacity:0}.layered-demo[data-motion=film][data-phase=closed] .layered-demo-thread{opacity:.2}.layered-demo[data-motion=film][data-phase=closed] .layered-demo-cover{box-shadow:0 20px 75px #0009,0 0 60px #d4af6322}.cover-constellation-sky *,.layered-cover-motion *,.layered-demo[data-phase=closed] .layered-scene-ornament span{animation-play-state:var(--cover-motion-state)!important}@keyframes cover-film-run{0%{transform:translateX(0)}to{transform:translateX(-50%)}}@keyframes cover-projector-breathe{0%{opacity:.4}to{opacity:1}}@keyframes cover-memory-float{0%{transform:translate(-50%,-50%) translate(calc(var(--memory-position-x) * var(--memory-spread) * .92),calc(var(--memory-position-y) * var(--memory-lift) - 12px)) rotate(calc(var(--memory-rotation) - 6deg))}to{transform:translate(-50%,-50%) translate(calc(var(--memory-position-x) * var(--memory-spread) * 1.1),calc(var(--memory-position-y) * var(--memory-lift) + 18px)) rotate(calc(var(--memory-rotation) + 8deg))}}@keyframes cover-silk-memory{0%{transform:translate(-50%,-50%) translate(calc(var(--memory-position-x) * var(--memory-spread) * 1.08),calc(var(--memory-position-y) * var(--memory-lift) - 16px)) rotate(calc(var(--memory-rotation) + 7deg))}to{transform:translate(-50%,-50%) translate(calc(var(--memory-position-x) * var(--memory-spread) * .9),calc(var(--memory-position-y) * var(--memory-lift) + 22px)) rotate(calc(var(--memory-rotation) - 9deg))}}@keyframes cover-silk-sway{0%{transform:rotate(-52deg) scale(.88)}to{transform:rotate(-24deg) scale(1.1)}}@keyframes cover-silk-return{0%{transform:rotate(24deg) scale(.9)}to{transform:rotate(52deg) scale(1.13)}}@keyframes cover-constellation-turn{0%{transform:rotate(-24deg)}to{transform:rotate(336deg)}}@keyframes cover-orbit-drift{0%{transform:translate(-50%,-50%) translate(calc(var(--memory-position-x) * var(--memory-spread) * 1.13),calc(var(--memory-position-y) * var(--memory-lift) - 18px)) rotate(-15deg)}to{transform:translate(-50%,-50%) translate(calc(var(--memory-position-x) * var(--memory-spread) * .85),calc(var(--memory-position-y) * var(--memory-lift) + 24px)) rotate(15deg)}}@keyframes cover-star-breathe{0%{opacity:.32;transform:scale(.75)}to{opacity:1;transform:scale(1.35)}}@keyframes cover-journal-turn{0%,20%,to{transform:translate(-50%,-50%) rotate(-5deg) rotateY(-5deg)}50%,70%{transform:translate(-55%,-48%) rotate(-18deg) rotateY(-68deg)}}@keyframes cover-journal-memory{0%{transform:translate(-50%,-50%) translate(calc(var(--memory-position-x) * var(--memory-spread) * 1.08),calc(var(--memory-position-y) * var(--memory-lift) - 14px)) rotate(calc(var(--memory-rotation) + 7deg)) rotateY(-12deg)}to{transform:translate(-50%,-50%) translate(calc(var(--memory-position-x) * var(--memory-spread) * .9),calc(var(--memory-position-y) * var(--memory-lift) + 18px)) rotate(calc(var(--memory-rotation) - 8deg)) rotateY(14deg)}}@keyframes cover-flower-open{0%{transform:rotate(calc(var(--petal-angle, 0deg) - 10deg)) scale(.8)}to{transform:rotate(calc(var(--petal-angle, 0deg) + 20deg)) scale(1.14)}}@keyframes cover-petal-fall{0%{transform:translate3d(-15px,0,0) rotate(-20deg);opacity:0}12%{opacity:.7}85%{opacity:.55}to{transform:translate3d(45px,112cqh,0) rotate(230deg);opacity:0}}@keyframes cover-shooting-star{0%,6%{opacity:0;transform:translate(0) rotate(-28deg)}10%{opacity:.9}29%,to{opacity:0;transform:translate(150px,-80px) rotate(-28deg)}}@media (max-width:700px){.layered-demo-scene{transition:height .7s ease}.layered-demo:not([data-motion=film])[data-phase=closed] .layered-demo-scene{height:clamp(510px,135vw,560px)}.layered-demo:not([data-motion=film])[data-phase=closed] .layered-demo-cover{top:calc(50% + 80px)}.layered-demo[data-motion=bloom][data-phase=closed] .layered-demo-cover{top:calc(50% + 64px)}.layered-demo:not([data-motion=film]) .layered-demo-cover strong{font-size:32px}.layered-demo:not([data-motion=film]) .layered-demo-cover strong em{font-size:1.05em}.layered-demo[data-motion=bloom] .layered-demo-cover strong{font-size:27px}.layered-demo:not([data-motion=film])[data-phase=closed] .layered-demo-bottom{padding-top:12px}.cover-memory-card{--memory-position-x:var(--memory-mobile-x);--memory-position-y:var(--memory-mobile-y);--memory-spread:clamp(92px,25vw,118px);--memory-lift:145px;width:clamp(120px,35vw,154px);padding:5px 5px 0}.cover-memory-card:is([data-memory-index="2"],[data-memory-index="3"]){display:none}.layered-demo[data-motion=orbit] .cover-memory-card{width:clamp(106px,29vw,130px)}.cover-journal-pages>span{top:calc(50% + 70px)}.cover-memory-card>span{font-size:11px;padding-block:8px}.cover-film-reel{--film-frame-width:132px;--film-gap:9px;padding-block:13px}.cover-film-reel:after,.cover-film-reel:before{height:5px}.cover-film-frame figcaption{padding-top:5px;font-size:5px}.cover-film-frame figcaption>span{font-size:4px}}@media (prefers-reduced-motion:reduce){.layered-cover-motion{opacity:.65}.layered-demo:not([data-phase=closed]) .layered-cover-motion{opacity:0}}.layered-demo:is([data-motion=carousel],[data-motion=shutters],[data-motion=butterfly],[data-motion=vinyl],[data-motion=prism],[data-motion=airmail]) .layered-demo-cover strong{font-size:clamp(29px,3.4vw,44px)}.cover-memory-wheel{position:absolute;width:76%;height:72%;top:8%;left:12%;border:2px solid var(--layer-gold);border-radius:50%;opacity:.42;animation:keepsake-wheel-turn 12s linear infinite}.cover-memory-wheel>span{position:absolute;inset:10%;border:1px solid;color:var(--layer-gold);border-radius:50%}.cover-memory-wheel>span:nth-child(2),.cover-memory-wheel>span:nth-child(3){inset:49% 0;border:0;border-top:1px solid var(--layer-gold);border-radius:0;transform:rotate(60deg)}.cover-memory-wheel>span:nth-child(3){transform:rotate(-60deg)}.cover-memory-wheel i{position:absolute;inset:0;display:grid;place-items:center;font:34px/1 var(--serif);color:var(--layer-gold)}.layered-demo[data-motion=carousel] .cover-memory-card{animation:keepsake-carousel 6s linear infinite;animation-delay:calc(var(--memory-index) * -1.5s);border:2px solid #e3c18a}.layered-demo[data-motion=carousel] .layered-demo-cover{border:4px double #c49d66;border-radius:14px 14px 4px 4px}.layered-demo[data-motion=carousel] .layered-demo-cover-border{border-radius:6px}.layered-demo[data-motion=carousel]:not([data-phase=closed]) .layered-demo-cover{transform:translate(-85%,-55%) rotateY(-95deg) scale(.85)}.layered-demo[data-motion=carousel] .layered-demo-photo-print{border:2px solid #d5b883;border-radius:12px}.layered-demo[data-motion=carousel] .layered-demo-photo-window{border-radius:6px}.cover-shutter-doors{position:absolute;width:clamp(285px,65vw,460px);height:70%;top:58%;left:50%;transform:translate(-50%,-50%);perspective:900px}.cover-shutter-doors>span{position:absolute;inset:0 50% 0 0;border:4px double #b8a27d;border-radius:80% 0 0 4px/26% 0 0 4px;background:repeating-linear-gradient(90deg,transparent 0 17px,#fff1 17px 18px),color-mix(in srgb,var(--w-ink) 85%,#292c28);box-shadow:inset 0 0 0 8px #0001,0 8px 25px #0003;transform-origin:0 50%;animation:keepsake-door-left 2.8s ease-in-out infinite alternate}.cover-shutter-doors>span:nth-child(2){inset:0 0 0 50%;border-radius:0 80% 4px 0/0 26% 4px 0;transform-origin:100% 50%;animation-name:keepsake-door-right}.layered-demo[data-motion=shutters] .cover-memory-card{animation-name:keepsake-door-memory;animation-duration:3.2s;border-radius:45% 45% 2px 2px}.layered-demo[data-motion=shutters] .cover-memory-card>div{border-radius:45% 45% 0 0}.layered-demo[data-motion=shutters] .layered-demo-cover{border-radius:42% 42% 3px 3px;border:3px double #a59b7c;padding-top:42px}.layered-demo[data-motion=shutters] .layered-demo-cover-border{border-radius:inherit}.layered-demo[data-motion=shutters]:not([data-phase=closed]) .cover-shutter-doors>span{animation:none!important;transition:transform .8s ease;transform:rotateY(-110deg)}.layered-demo[data-motion=shutters]:not([data-phase=closed]) .cover-shutter-doors>span:nth-child(2){transform:rotateY(110deg)}.layered-demo[data-motion=shutters]:not([data-phase=closed]) .layered-cover-motion{transition-delay:.35s,.95s}.layered-demo[data-motion=shutters]:not([data-phase=closed]) .layered-demo-cover{transform:translate(-50%,-110%) rotateX(65deg) scale(.8)}.layered-demo[data-motion=shutters] .layered-demo-photo-print{border-radius:42% 42% 2px 2px}.layered-demo[data-motion=shutters] .layered-demo-photo-window{border-radius:42% 42% 0 0}.cover-butterflies{position:absolute;inset:0}.cover-butterfly{--butterfly-width:clamp(35px,5vw,57px);position:absolute;top:var(--butterfly-y);left:var(--butterfly-x);width:calc(var(--butterfly-width) * var(--butterfly-scale));aspect-ratio:1.32;translate:-50% -50%;filter:drop-shadow(0 2px 3px #10160c45);animation:keepsake-butterfly-flight 4.6s ease-in-out infinite alternate;animation-delay:var(--butterfly-delay)}.cover-butterfly-side{--wing-direction:1;position:absolute;inset:0 50% 0 0;transform-origin:right center;animation:keepsake-butterfly-wing 1.15s ease-in-out infinite;animation-delay:var(--butterfly-delay)}.cover-butterfly-side[data-side=right]{--wing-direction:-1}.cover-butterfly-wing{position:absolute;inset-inline:0}.cover-butterfly-upper{top:3%;height:58%;background:radial-gradient(circle at 17% 24%,#fff6e1 0 5%,transparent 7%),radial-gradient(circle at 12% 47%,#fff1cd 0 4%,transparent 6%),radial-gradient(ellipse at 77% 79%,#fff7dd 5%,#f0d093 50%,#af7d4b 92%);clip-path:polygon(100% 88%,84% 64%,66% 38%,46% 17%,26% 4%,12% 1%,5% 9%,1% 23%,2% 40%,8% 61%,18% 76%,31% 87%,48% 94%,69% 98%,88% 95%)}.cover-butterfly-lower{top:51%;height:43%;background:radial-gradient(ellipse at 26% 65%,#ae7349 0 7%,#f3d296 9% 16%,transparent 21%),radial-gradient(ellipse at 80% 17%,#fff1cc,#e8bd7e 62%,#a56d49);clip-path:polygon(100% 2%,80% 0,56% 7%,34% 18%,21% 35%,16% 53%,19% 70%,28% 83%,42% 88%,54% 84%,53% 99%,62% 96%,68% 81%,82% 65%,91% 42%)}.cover-butterfly-body{position:absolute;z-index:1;top:32%;left:48%;width:4%;height:46%;border-radius:50%;background:linear-gradient(#f2d9a6,#8c5e3b)}.cover-butterfly-body:after,.cover-butterfly-body:before{content:"";position:absolute;bottom:84%;width:calc(var(--butterfly-width) * .1);height:calc(var(--butterfly-width) * .13);border-top:1px solid #e4c28b;border-radius:55% 60% 0 0}.cover-butterfly-body:before{right:48%;transform:rotate(55deg)}.cover-butterfly-body:after{left:48%;transform:rotate(-55deg)}.layered-demo[data-motion=butterfly] .cover-memory-card{animation-duration:3s;border-radius:42% 42% 4px 4px}.layered-demo[data-motion=butterfly] .cover-memory-card>div{border-radius:42% 42% 0 0}.layered-demo[data-motion=butterfly] .layered-demo-cover{border-radius:22px;border:4px double #a9ad86}.layered-demo[data-motion=butterfly] .layered-demo-cover-border{border-radius:14px;border-style:dashed}.layered-demo[data-motion=butterfly]:not([data-phase=closed]) .layered-demo-cover{transform:translate(-50%,-110%) rotateX(70deg) rotate(12deg) scale(.75)}.layered-demo[data-motion=butterfly] .layered-demo-photo-print{border-radius:18px}.layered-demo[data-motion=butterfly] .layered-demo-photo-window{border-radius:11px}.cover-vinyl-disc{position:absolute;top:37%;left:50%;width:clamp(225px,32vw,350px);aspect-ratio:1;border:4px solid #151512;border-radius:50%;background:repeating-radial-gradient(circle,#171816 0 3px,#39352e 3px 4px,#1e201b 4px 6px);box-shadow:0 14px 35px #0005;transform:translate(-50%,-50%);animation:keepsake-record-spin 7s linear infinite}.cover-vinyl-disc>span{position:absolute;inset:36%;display:grid;place-items:center;border:3px double #b88e50;border-radius:50%;background:#d7b47e;color:#453c2d;font:30px/1 var(--serif)}.cover-vinyl-wave{position:absolute;display:flex;justify-content:space-between;align-items:center;gap:5px;left:5%;right:5%;top:64%;height:100px;opacity:.5}.cover-vinyl-wave>i{width:5px;height:calc(25px + mod(var(--wave-index) * 17, 65) * 1px);border-radius:8px;background:var(--layer-gold);animation:keepsake-equalizer 1.2s ease-in-out infinite alternate;animation-delay:calc(var(--wave-index) * -.17s)}.layered-demo[data-motion=vinyl] .cover-memory-card{padding:12px;border:5px double #a48b62;border-radius:50%;background:repeating-radial-gradient(circle,#171816 0 3px,#36352e 3px 4px,#171816 4px 6px);animation-duration:3.4s}.layered-demo[data-motion=vinyl] .cover-memory-card>div{border-radius:50%;aspect-ratio:1}.layered-demo[data-motion=vinyl] .cover-memory-card>span{display:none}.layered-demo[data-motion=vinyl] .layered-demo-cover{border:7px solid #af946b;border-radius:3px;background:linear-gradient(150deg,#fff8,transparent 65%),var(--layer-paper)}.layered-demo[data-motion=vinyl] .layered-demo-heading h1{font-family:var(--serif)}.layered-demo[data-motion=vinyl]:not([data-phase=closed]) .layered-demo-cover{transform:translate(15%,-65%) rotate(70deg) scale(.65)}.layered-demo[data-motion=vinyl] .layered-demo-photo-print{border:7px solid #373029}.layered-demo[data-motion=vinyl] .layered-demo-photo-window{border-radius:50%;aspect-ratio:1}.cover-prism-facets{position:absolute;inset:0}.cover-prism-facets>span{position:absolute;width:52%;height:65%;top:calc(8% + var(--facet-index) * 7%);left:calc(-12% + var(--facet-index) * 22%);clip-path:polygon(50% 0,100% 30%,76% 100%,5% 72%,0 25%);background:linear-gradient(calc(35deg + var(--facet-index) * 65deg),#d3d8ff22,#d9b9e46b,#addbda44);border:1px solid #fff6;animation:keepsake-prism-drift 3.6s ease-in-out infinite alternate;animation-delay:calc(var(--facet-index) * -.8s)}.layered-demo[data-motion=prism] .cover-memory-card{padding:7px;border:1px solid #e3d6ed;background:linear-gradient(145deg,#ead9ef,#e5f0ee,#eacfdc);clip-path:polygon(11% 0,100% 0,100% 89%,89% 100%,0 100%,0 11%);animation-duration:3.1s}.layered-demo[data-motion=prism] .cover-memory-card>div{clip-path:polygon(10% 0,100% 0,100% 90%,90% 100%,0 100%,0 10%)}.layered-demo[data-motion=prism] .layered-demo-cover{border:3px solid #c8b9d5;border-radius:3px;background:linear-gradient(145deg,#fff9,#efdcf033 48%,#d4eeee33),var(--layer-paper)}.layered-demo[data-motion=prism] .layered-demo-cover-border{border-color:#b9a9c65c}.layered-demo[data-motion=prism]:not([data-phase=closed]) .layered-demo-cover{transform:translate(-50%,-60%) rotateY(95deg) rotate(15deg) scale(1.2)}.layered-demo[data-motion=prism] .layered-demo-photo-print{border:2px solid #dacde3;clip-path:polygon(7% 0,100% 0,100% 93%,93% 100%,0 100%,0 7%)}.cover-airmail-route{position:absolute;inset:3%;color:var(--layer-gold)}.cover-airmail-route>svg:first-child{width:100%;height:100%;overflow:visible}.cover-airmail-route>svg:first-child path{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:3 8;opacity:.55;animation:keepsake-postal-route 7s linear infinite}.cover-paper-plane{position:absolute;width:34px;height:34px;top:30%;left:50%;fill:var(--layer-paper);stroke:var(--layer-gold);animation:keepsake-paper-flight 5.5s ease-in-out infinite}.cover-airmail-postmark{position:absolute;left:8%;top:65%;width:67px;aspect-ratio:1;display:grid;place-content:center;border:3px double;border-radius:50%;color:var(--layer-gold);font:500 9px/1.3 var(--sans);letter-spacing:.1em;text-align:center;transform:rotate(-14deg);opacity:.6}.layered-demo[data-motion=airmail] .cover-memory-card{border:5px solid transparent;background:linear-gradient(var(--layer-paper),var(--layer-paper)) padding-box,repeating-linear-gradient(135deg,#a96961 0 9px,#f7e9d0 9px 17px,#586a77 17px 26px,#f7e9d0 26px 34px) border-box;animation-duration:3.2s}.layered-demo[data-motion=airmail] .layered-demo-cover{border:6px solid transparent;background:linear-gradient(var(--layer-paper),var(--layer-paper)) padding-box,repeating-linear-gradient(135deg,#a96961 0 10px,#f7e9d0 10px 18px,#586a77 18px 28px,#f7e9d0 28px 36px) border-box;border-radius:7px}.layered-demo[data-motion=airmail] .layered-demo-cover-border{border-style:dashed}.layered-demo[data-motion=airmail]:not([data-phase=closed]) .layered-demo-cover{transform:translateY(-135%) rotate(-25deg) scale(.7)}.layered-demo[data-motion=airmail] .layered-demo-photo-print{border:4px solid transparent;background:linear-gradient(var(--layer-paper),var(--layer-paper)) padding-box,repeating-linear-gradient(135deg,#a96961 0 9px,#f7e9d0 9px 17px,#586a77 17px 26px,#f7e9d0 26px 34px) border-box}.layered-demo:is([data-motion=shutters],[data-motion=vinyl],[data-motion=prism],[data-motion=airmail]) .layered-demo-thread{display:none}.layered-cover-art[data-motion=carousel] .layered-cover-art-orbit{inset:-12% 2%;border:4px double #d9b97a;opacity:.6;background:repeating-conic-gradient(from 15deg,transparent 0 59deg,#d9b97a44 59deg 60deg)}.layered-cover-art[data-motion=carousel] .layered-cover-art-photo{border-radius:9px;border:1px solid #d9b97a}.layered-cover-art[data-motion=carousel] .layered-cover-art-photo:first-of-type{transform:translate(-90%,-75%) rotate(-17deg) scale(.74)}.layered-cover-art[data-motion=carousel] .layered-cover-art-photo:nth-of-type(2){transform:translate(-10%,-75%) rotate(17deg) scale(.74)}.layered-cover-art[data-motion=shutters] .layered-cover-art-orbit{inset:-8% 7%;border:4px double #bba37d;border-radius:45% 45% 1px 1px;opacity:.85;background:repeating-linear-gradient(90deg,#283e4a 0 18px,#6b766d 18px 19px);transform:none}.layered-cover-art[data-motion=shutters] .layered-cover-art-photo,.layered-cover-art[data-motion=shutters] .layered-cover-art-photo img{border-radius:45% 45% 1px 1px}.layered-cover-art[data-motion=butterfly] .layered-cover-art-orbit{inset:-15% 5%;border:1px solid #decda5;border-radius:70% 20% 70% 20%;transform:rotate(30deg);opacity:.4;box-shadow:0 0 0 12px #decda512}.layered-cover-art[data-motion=butterfly] .layered-cover-art-photo{border-radius:15px}.layered-cover-art[data-motion=butterfly] .layered-cover-art-photo img{border-radius:9px}.layered-cover-art[data-motion=butterfly] .layered-cover-art-seal{border-radius:70% 20% 70% 20%;transform:rotate(-15deg)}.layered-cover-art[data-motion=vinyl] .layered-cover-art-orbit{inset:-10% 4%;border-radius:50%;border:5px solid #151512;background:repeating-radial-gradient(circle,#151512 0 4px,#413a2d 4px 5px,#151512 5px 8px);opacity:.9}.layered-cover-art[data-motion=vinyl] .layered-cover-art-photo:nth-of-type(-n+2){border-radius:50%;padding:4%;background:#25251f;color:#e8cd9c}.layered-cover-art[data-motion=vinyl] .layered-cover-art-photo:nth-of-type(-n+2) img{border-radius:50%;aspect-ratio:1}.layered-cover-art[data-motion=vinyl] .layered-cover-art-photo:nth-of-type(-n+2)>span{display:none}.layered-cover-art[data-motion=vinyl] .layered-cover-art-heading strong{font-family:var(--serif)}.layered-cover-art[data-motion=prism]{background:linear-gradient(135deg,#e1cdf018,transparent 55%,#afd3e21a),var(--lc-bg)}.layered-cover-art[data-motion=prism] .layered-cover-art-orbit{inset:-16% -1%;border:0;border-radius:0;background:linear-gradient(140deg,#a4d4e844,#eac6e17a,#d0bfe966);clip-path:polygon(50% 0,100% 37%,73% 100%,0 68%,8% 25%);opacity:.8}.layered-cover-art[data-motion=prism] .layered-cover-art-photo{clip-path:polygon(10% 0,100% 0,100% 90%,90% 100%,0 100%,0 10%);background:linear-gradient(135deg,#f9eff9,#d1e7e3)}.layered-cover-art[data-motion=prism] .layered-cover-art-seal{border-radius:15%;background:#eadfee;color:#79678a;border-color:#b5a0c4}.layered-cover-art[data-motion=airmail] .layered-cover-art-orbit{inset:-12% -7%;border-style:dashed;border-radius:25% 65% 30% 65%;transform:rotate(18deg);opacity:.55}.layered-cover-art[data-motion=airmail] .layered-cover-art-photo{border:1.4cqw solid transparent;background:linear-gradient(var(--lc-paper),var(--lc-paper)) padding-box,repeating-linear-gradient(135deg,#a96961 0 5px,#f7e9d0 5px 10px,#586a77 10px 15px,#f7e9d0 15px 20px) border-box}.layered-cover-art[data-motion=airmail] .layered-cover-art-seal{border-radius:4px;border-style:dashed;transform:rotate(-12deg);font-size:5cqw}.layered-cover-motion :after,.layered-cover-motion :before{animation-play-state:var(--cover-motion-state)!important}@keyframes keepsake-wheel-turn{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes keepsake-carousel{0%,to{transform:translate(-50%,-50%) translate(calc(var(--memory-spread) * -1.05),calc(var(--memory-lift) * -1)) rotate(-10deg) scale(.92)}25%{transform:translate(-50%,-50%) translateY(calc(var(--memory-lift) * -1 - 34px)) rotate(0) scale(.76)}50%{transform:translate(-50%,-50%) translate(calc(var(--memory-spread) * 1.05),calc(var(--memory-lift) * -1)) rotate(10deg) scale(.92)}75%{transform:translate(-50%,-50%) translateY(calc(var(--memory-lift) * -1 + 30px)) rotate(0) scale(1.04)}}@keyframes keepsake-door-left{0%{transform:rotateY(-14deg)}to{transform:rotateY(-35deg)}}@keyframes keepsake-door-right{0%{transform:rotateY(14deg)}to{transform:rotateY(35deg)}}@keyframes keepsake-door-memory{0%{transform:translate(-50%,-50%) translate(calc(var(--memory-position-x) * var(--memory-spread)),calc(var(--memory-position-y) * var(--memory-lift) - 12px)) rotate(var(--memory-rotation)) rotateY(-15deg)}to{transform:translate(-50%,-50%) translate(calc(var(--memory-position-x) * var(--memory-spread) * .92),calc(var(--memory-position-y) * var(--memory-lift) + 16px)) rotate(calc(var(--memory-rotation) + 5deg)) rotateY(16deg)}}@keyframes keepsake-butterfly-wing{0%,52%,to{transform:scaleX(var(--wing-direction))}22%,76%{transform:scaleX(calc(var(--wing-direction) * .73))}}@keyframes keepsake-butterfly-flight{0%{transform:translate(-7px,7px) rotate(var(--butterfly-tilt))}55%{transform:translate(8px,-11px) rotate(calc(var(--butterfly-tilt) + 13deg))}to{transform:translate(1px,-22px) rotate(calc(var(--butterfly-tilt) - 7deg))}}@keyframes keepsake-record-spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(1turn)}}@keyframes keepsake-equalizer{0%{transform:scaleY(.3)}to{transform:scaleY(1)}}@keyframes keepsake-prism-drift{0%{transform:translate(-14px,-14px) rotate(-12deg);opacity:.5}to{transform:translate(20px,16px) rotate(12deg);opacity:.9}}@keyframes keepsake-postal-route{0%{stroke-dashoffset:0}to{stroke-dashoffset:-110}}@keyframes keepsake-paper-flight{0%,to{transform:translate(-135px,45px) rotate(-28deg)}30%{transform:translate(-45px,-75px) rotate(5deg)}60%{transform:translate(105px,-55px) rotate(36deg)}85%{transform:translate(130px,60px) rotate(78deg)}}@media (max-width:700px){.layered-demo[data-motion=carousel] .cover-memory-card{animation-delay:calc(var(--memory-index) * -3s - .5s)}.cover-memory-wheel{width:82%;left:9%;height:48%;top:8%}.cover-shutter-doors{top:62%;height:64%;width:78%}.layered-demo[data-motion=shutters] .layered-demo-cover{padding-top:32px}.layered-demo[data-motion=shutters] .layered-demo-cover strong{font-size:29px}.cover-butterfly{--butterfly-width:clamp(31px,8vw,40px)}.layered-demo[data-motion=vinyl] .layered-demo-cover{width:clamp(230px,60vw,300px)}.layered-demo[data-motion=vinyl] .cover-memory-card{width:clamp(110px,29vw,132px);padding:9px}.cover-vinyl-disc{top:32%;width:220px}.cover-vinyl-wave{height:85px;left:4%;right:4%}.cover-vinyl-wave>i{width:4px}.cover-paper-plane{width:27px;height:27px}}@media (prefers-reduced-motion:reduce){.layered-demo[data-motion=shutters]:not([data-phase=closed]) .cover-shutter-doors>span{transition:none}}.love-story-cover{--story-white:#fff4df;--story-night:color-mix(in srgb,var(--story-tint) 34%,#080a12);position:relative;isolation:isolate;display:grid;grid-template-rows:auto 1fr auto;min-height:max(35rem,100svh);padding:clamp(4.5rem,11svh,7.5rem) 1.25rem max(1.75rem,calc(env(safe-area-inset-bottom) + 1.25rem));overflow:hidden;color:var(--story-white);background:var(--story-night);text-align:center}.love-story-cover:after,.love-story-cover:before{position:absolute;z-index:-1;content:"";pointer-events:none}.love-story-cover:before{inset:-1.5rem;background:var(--story-art) center 62% /cover;filter:blur(28px);opacity:.46}.love-story-cover:after{inset:0;background:linear-gradient(to bottom,var(--story-night) 0,color-mix(in srgb,var(--story-night) 70%,transparent) 14%,transparent 38%,transparent 68%,color-mix(in srgb,var(--story-night) 85%,transparent) 95%,var(--story-night)),linear-gradient(90deg,#06081337,transparent 32% 68%,#06081337)}.love-story-landscape{position:absolute;z-index:-1;top:50%;left:50%;width:max(min(100%,52rem),min(63svh,155vw));aspect-ratio:2/3;translate:-50% -50%;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 17% 83%,transparent);mask-image:linear-gradient(90deg,transparent,#000 17% 83%,transparent)}.love-story-landscape img{display:block;width:100%;height:100%;object-fit:cover}.love-story-heading{grid-row:1;width:min(100%,65rem);margin-inline:auto;text-shadow:0 2px 22px #110916bb}.love-story-heading h1{margin:0;font:500 clamp(2.7rem,8.3vw,6rem) /.98 var(--serif,Georgia,serif);overflow-wrap:anywhere;text-wrap:balance}.love-story-cover[data-opened=true] h1{font-size:clamp(2.25rem,8.6vw,5.5rem)}.love-story-heading h1>*{display:inline-block}.love-story-heading h1 em{margin-inline:.1em;color:var(--story-accent);font-size:.68em}.love-story-heading time,.love-story-kicker{color:var(--story-accent);font-size:clamp(.68rem,1.7vw,.82rem);font-weight:600;letter-spacing:.14em;text-transform:uppercase}.love-story-kicker{margin:0 0 .8rem}.love-story-heading time{display:block;margin-top:.8rem}.love-story-action{grid-row:3;display:grid;justify-items:center;gap:.85rem;margin-inline:auto;width:min(100%,33rem);margin-top:min(32svh,16rem)}.love-story-guest,.love-story-line{margin:0;text-shadow:0 2px 12px #120b14}.love-story-guest small{display:block;margin-bottom:.24rem;color:var(--story-accent);font-size:.65rem;letter-spacing:.15em}.love-story-guest strong,.love-story-line{font:italic 500 clamp(1.18rem,4.8vw,1.6rem) /1.2 var(--serif,Georgia,serif);overflow-wrap:anywhere;text-wrap:balance}.love-story-button{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:46px;padding:.65rem 1.2rem;border:1px solid var(--story-accent);border-radius:50rem;background:var(--story-accent);color:var(--story-night);box-shadow:0 5px 24px #1006106b;font-size:.83rem;font-weight:600;text-decoration:none}.love-story-button:hover{background:var(--story-white);color:var(--story-night)}.love-story-controls{position:absolute;z-index:1;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:flex;gap:.5rem}.draft-banner~.love-story-cover .love-story-controls{top:max(38px,calc(env(safe-area-inset-top) + 28px))}.love-story-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid color-mix(in srgb,var(--story-accent) 48%,transparent);border-radius:50%;background:color-mix(in srgb,var(--story-night) 78%,transparent);color:var(--story-white)}.love-story-cover :focus-visible{outline:2px solid var(--story-white);outline-offset:4px}.love-story-effects,.love-story-glow{position:absolute;inset:0}.love-story-effects{--story-play-state:running;color:var(--story-accent);mix-blend-mode:screen}.love-story-cover:is([data-paused=true],[data-visible=false]) .love-story-effects{--story-play-state:paused}.love-story-glow,.love-story-particle{animation-play-state:var(--story-play-state)!important}.love-story-particle{position:absolute;left:var(--particle-x);top:var(--particle-y);scale:var(--particle-scale)}.love-story-glow{opacity:0;transition:opacity .6s ease}.love-story-cover[data-opened=true] .love-story-glow{opacity:.8}.love-story-cover[data-opened=true][data-paused=false] :is(.love-story-kicker,h1>*,time,.love-story-line,.love-story-button){animation:story-copy-rise .54s var(--story-copy-delay,.16s) cubic-bezier(.22,.7,.24,1) both}.love-story-heading h1>em{--story-copy-delay:230ms}.love-story-heading h1>span:last-child{--story-copy-delay:300ms}.love-story-heading time{--story-copy-delay:385ms}.love-story-line{--story-copy-delay:410ms}.love-story-action a{--story-copy-delay:490ms}@keyframes story-copy-rise{0%{opacity:0;translate:0 13px}}.love-story-bridge{position:absolute;top:49.8%;left:24%;width:55%;height:14%;border-radius:50%;border-top:2px solid;box-shadow:inset 0 5px 11px -8px currentColor,0 -6px 16px -12px currentColor;clip-path:inset(-10% 100% 53% 0);transition:clip-path .9s cubic-bezier(.23,.64,.24,1)}.love-story-cover[data-opened=true] .love-story-bridge{clip-path:inset(-10% 0 53% 0)}.love-story-cover[data-motion=bridge] .love-story-glow{background:radial-gradient(ellipse 31% 10% at 51% 52%,#ffe7a46a,transparent)}.love-story-cover[data-motion=bridge] .love-story-particle{width:clamp(11px,2.9vw,21px);aspect-ratio:1.7;background:#ffe6ac;clip-path:polygon(0 13%,24% 23%,46% 48%,54% 48%,76% 23%,100% 13%,80% 43%,60% 63%,53% 94%,47% 94%,40% 63%,20% 43%);transform:translate(-50%,-50%);opacity:.2;animation:story-wings 1.4s var(--particle-delay) ease-in-out infinite alternate}.love-story-cover[data-motion=bridge][data-opened=true] .love-story-particle{opacity:.93;animation:story-flock-arrival .52s var(--arrival-delay) ease-out both,story-wings 1.15s var(--particle-delay) ease-in-out infinite alternate}.love-story-shooting-star{position:absolute;top:32%;left:73%;width:clamp(42px,10vw,100px);height:2px;background:linear-gradient(90deg,#fff7dc,transparent);opacity:0;animation:story-shooting 4.8s -.7s ease-out infinite var(--story-play-state)}@keyframes story-wings{to{rotate:-8deg;scale:var(--particle-scale) .62}}@keyframes story-flock-arrival{0%{opacity:0;translate:-22px 13px}}@keyframes story-shooting{0%{opacity:0;transform:translate(25px,-20px) rotate(-33deg)}10%{opacity:.9}24%,to{opacity:0;transform:translate(-90px,52px) rotate(-33deg)}}.love-story-cover[data-motion=river] .love-story-particle{width:21%;height:2px;border-radius:50%;background:linear-gradient(90deg,transparent,#ffe7ac,transparent);opacity:.65;animation:story-ripple 2.8s var(--particle-delay) ease-in-out infinite}.love-story-cover[data-motion=river] .love-story-glow{background:radial-gradient(ellipse 33% 16% at 44% 75%,#ffc47968,transparent)}@keyframes story-ripple{0%,to{opacity:.18;transform:translateX(-65%) scaleX(.35)}55%{opacity:.78;transform:translateX(-28%) scaleX(1.3)}}.love-story-cover[data-motion=waltz] .love-story-glow{inset:47% 12% 17%;background:conic-gradient(from 25deg,transparent 0 15%,#ffd2985c 27%,transparent 40% 64%,#ffdda565 73%,transparent 87%);-webkit-mask-image:radial-gradient(ellipse,#000 6%,#0006 44%,transparent 70%);mask-image:radial-gradient(ellipse,#000 6%,#0006 44%,transparent 70%);animation:story-waltz 7s linear infinite}.love-story-cover[data-motion=balcony] .love-story-particle,.love-story-cover[data-motion=waltz] .love-story-particle{width:8px;aspect-ratio:1;background:currentColor;border-radius:50%;box-shadow:0 0 12px 2px currentColor;animation:story-firefly 3.6s var(--particle-delay) ease-in-out infinite}.love-story-cover[data-motion=waltz] .love-story-particle{border-radius:0;clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%)}.love-story-cover[data-motion=balcony] .love-story-glow{background:radial-gradient(ellipse 16% 13% at 86% 39%,#ffaf597d,transparent),radial-gradient(ellipse 24% 16% at 83% 67%,#ffc27d6e,transparent);animation:story-candlelight 2.5s ease-in-out infinite alternate}@keyframes story-waltz{to{rotate:1turn}}@keyframes story-firefly{0%,to{transform:translate(-10px,10px);opacity:.15}52%{transform:translate(9px,-14px);opacity:.86}}@keyframes story-candlelight{to{filter:brightness(1.55)}}.love-story-cover[data-motion=rose] .love-story-glow{background:radial-gradient(ellipse 27% 20% at 74% 75%,#fca1a86c,transparent)}.love-story-cover[data-motion=rose] .love-story-particle{width:clamp(10px,2.5vw,19px);aspect-ratio:1.5;border-radius:74% 30% 68% 35%;background:linear-gradient(145deg,#ffe4db,#db7d8e 78%,#95405d);animation:story-petal 4.8s var(--particle-delay) linear infinite}@keyframes story-petal{0%{transform:translate(-18px,-22px) rotate(-48deg);opacity:0}20%,72%{opacity:.8}to{transform:translate(40px,79px) rotate(148deg);opacity:0}}.love-story-cover[data-motion=lanterns] .love-story-glow{background:radial-gradient(ellipse 37% 21% at 54% 52%,#ffa45155,transparent)}.love-story-cover[data-motion=lanterns] .love-story-particle{width:clamp(14px,3.6vw,27px);aspect-ratio:.86;border:1px solid #ffd89a;border-bottom:3px solid #c47342;border-radius:44% 44% 35% 35%;background:linear-gradient(90deg,#d27c39bb,transparent 24% 76%,#d27c39bb),radial-gradient(ellipse at 48% 73%,#fff7b9 8%,#ffc175 52%,#e18457);box-shadow:0 0 18px #ffa653ad;animation:story-lantern 5.6s var(--particle-delay) linear infinite}.love-story-cover[data-motion=lanterns][data-opened=true] .love-story-effects{filter:brightness(1.22)}@keyframes story-lantern{0%{transform:translate(-9px,47px) rotate(-7deg);opacity:0}20%,72%{opacity:.95}to{transform:translate(18px,-100px) rotate(7deg);opacity:0}}.love-story-portrait{width:min(100%,26rem);margin:0 auto clamp(1.25rem,4vw,3rem)}.love-story-portrait>.hero-main-photo{display:block;width:100%;max-height:36rem;object-fit:cover;border-radius:45% 45% .6rem .6rem/34% 34% .6rem .6rem}.love-story-poster{position:relative;isolation:isolate;display:flex;justify-content:space-between;flex-direction:column;width:100%;height:100%;min-height:100%;padding:17% 8% 12%;color:#fff4df;text-align:center}.love-story-poster img,.love-story-poster:after{position:absolute;inset:0;z-index:-1;width:100%;height:100%}.love-story-poster img{object-fit:cover}.love-story-poster:after{content:"";background:linear-gradient(180deg,#130d24bf,transparent 43% 66%,#130d24cf)}.love-story-poster :is(small,strong,span){display:block;text-shadow:0 2px 10px #0e070f;text-wrap:balance}.love-story-poster small{margin-bottom:.5em;font-size:clamp(.55rem,1.4vw,.75rem);letter-spacing:.09em;text-transform:uppercase}.love-story-poster strong{font:500 clamp(1.45rem,3.3vw,2.7rem) /1 var(--serif,Georgia,serif)}.love-story-poster>span{font:italic 500 clamp(.85rem,2vw,1.4rem) /1.2 var(--serif,Georgia,serif)}@media (max-width:720px){.love-story-landscape{-webkit-mask-image:none;mask-image:none}.love-story-cover:after{background:linear-gradient(to bottom,var(--story-night),color-mix(in srgb,var(--story-night) 72%,transparent) 14%,transparent 35% 68%,color-mix(in srgb,var(--story-night) 88%,transparent) 95%,var(--story-night))}.love-story-line{max-width:calc(100% - 4.75rem)}}@media (prefers-reduced-motion:reduce){.love-story-cover .love-story-effects *,.love-story-cover[data-opened=true][data-paused=false] :is(.love-story-kicker,h1>*,time,.love-story-line,.love-story-button){animation:none!important;transition:none}.love-story-motion-toggle{display:none!important}}