:root{--paper:#f4bed6;--ink:#681633;--display:'Anton';--weight:400;--tracking:-.025em;--case:uppercase;--tilt:-2deg;--title-size:140px;--text-line-gap:calc(var(--title-size) * .04);color-scheme:light;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;transition:background-color .35s,color .35s;background:var(--paper)}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid currentColor;outline-offset:6px}button{color:inherit}a{color:inherit;text-decoration:none}.page{min-height:100svh;padding:32px 44px 24px;display:flex;flex-direction:column}header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.wordmark{white-space:nowrap;font-size:17px;font-weight:800;line-height:1.04;letter-spacing:-.065em;position:relative}.brand-dot{font-size:11px;vertical-align:top;margin-left:5px;letter-spacing:0}.top-note{font-size:12px;font-weight:700;letter-spacing:.12em;padding-top:3px}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:420px;padding:55px 0 35px;gap:48px}.poster{width:min(100%,1250px);text-align:center;transform:rotate(var(--tilt));transform-origin:center}.poster.animate{animation:serve .4s cubic-bezier(.2,.8,.3,1)}h1{font-family:var(--display),Impact,sans-serif;font-weight:var(--weight);font-size:var(--title-size);display:flex;flex-direction:column;gap:var(--text-line-gap);line-height:1;letter-spacing:var(--tracking);text-transform:var(--case);margin:0}.line{display:block;white-space:nowrap}.recipient{position:relative;width:fit-content;font:var(--weight) calc(var(--title-size) * .82)/1 var(--display),sans-serif;letter-spacing:-.035em;margin:var(--text-line-gap) auto 0;max-width:90%;overflow-wrap:anywhere;padding:0 .06em .28em;text-wrap:balance}.recipient::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.24em;min-height:10px;background:currentColor;-webkit-mask:url("underline.svg") center / 100% 100% no-repeat;mask:url("underline.svg") center / 100% 100% no-repeat;pointer-events:none}.recipient[hidden]{display:none}.shuffle-area{display:flex;align-items:center;flex-direction:column;gap:17px}.shuffle{min-width:148px;min-height:58px;background:transparent;border:2px solid currentColor;border-radius:100px;display:flex;align-items:center;justify-content:center;gap:24px;font-size:20px;font-weight:700;padding:14px 28px;box-shadow:3px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}.shuffle:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--ink)}.shuffle:active{transform:translate(3px,4px);box-shadow:0 0 0 var(--ink)}.shuffle-icon{width:23px;height:23px}.shuffle-note{font-size:13px}footer{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;min-height:100px}footer>span{font-size:13px;padding-bottom:5px}.share-trigger{display:flex;align-items:center;gap:12px;background:none;border:0;padding:0}.share-trigger img{width:100px;height:100px;object-fit:contain;transition:transform .25s}.share-trigger:hover img{transform:rotate(12deg) scale(1.08)}.share-label{font-size:14px;font-weight:600;display:flex;gap:10px;align-items:center}.share-label>span{font-size:25px}dialog{width:min(480px,calc(100% - 32px));max-height:calc(100svh - 40px);overflow:auto;background:#fffaf4;color:#29221f;border:2px solid #29221f;border-radius:24px;padding:44px 32px 20px;box-shadow:8px 8px 0 #29221f;margin:auto}dialog::backdrop{background:#21151f66;backdrop-filter:blur(8px)}dialog[open]{animation:modal-in .2s ease-out}.close{position:absolute;right:14px;top:12px;width:40px;height:40px;font-size:30px;line-height:1;border:0;background:transparent;border-radius:50%}.close:hover{background:#29221f0d}.eyebrow{font-size:12px;letter-spacing:.1em;font-weight:700}h2{font-size:40px;letter-spacing:-.065em;line-height:1.1;margin:14px 0 12px}.intro{font-size:16px;line-height:1.5;margin:0 0 25px}label{font-size:14px;font-weight:600;display:block;margin:0 0 10px}input{font-size:16px;border:1.5px solid #29221f55;background:#fffdf9;border-radius:10px;padding:15px;width:100%;color:#29221f;min-width:0}input:focus{outline:2px solid #681633;outline-offset:2px}.message-preview{font-size:19px;font-weight:600;line-height:1.4;overflow-wrap:anywhere;border-left:3px solid #f2a08d;padding-left:16px;margin:22px 0}.url-label{margin-top:24px}#share-url{font-size:14px;color:#605951}.copy-button{margin-top:14px;width:100%;border:0;background:#29221f;color:#fffaf4;display:flex;justify-content:space-between;border-radius:10px;padding:17px 20px;font-weight:700;font-size:16px}.copy-button:hover{background:#4b353b}.native-share{background:none;border:1px solid #29221f;border-radius:10px;padding:13px;width:100%;margin-top:10px;font-size:16px}.share-status{font-size:14px;min-height:21px;margin:13px 0 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes serve{0%{opacity:.2;transform:translateY(12px) rotate(calc(var(--tilt) - 2deg)) scale(.96)}100%{opacity:1;transform:translateY(0) rotate(var(--tilt)) scale(1)}}@keyframes modal-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1400px){main{gap:56px}.page{padding:36px 56px 28px}}@media(max-width:600px){.page{padding:24px 22px 20px}.wordmark{font-size:15px}.top-note{font-size:12px;letter-spacing:.08em;max-width:100px;text-align:right;line-height:1.5}main{min-height:380px;padding:60px 0 40px;gap:45px}.poster{width:100%}.share-trigger img{width:82px;height:82px}.share-label{font-size:13px;gap:5px}footer{min-height:82px;gap:10px}footer>span{max-width:110px;font-size:12px;line-height:1.6;padding-bottom:8px}.share-trigger{gap:3px}.shuffle{font-size:18px;min-height:56px}.shuffle-note{font-size:12px}dialog{padding:42px 24px 18px}h2{font-size:36px}}@media(max-height:650px) and (min-width:601px){main{padding:24px 0;min-height:280px;gap:25px}footer{min-height:75px}.share-trigger img{width:75px;height:75px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.share-trigger{position:fixed;right:38px;bottom:22px;z-index:2}footer{padding-right:210px}@media(max-width:600px){.share-trigger{right:16px;bottom:14px}footer{padding-right:180px}}