@font-face{font-family:Jersey;src:url(jersey10.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--pink:#eeb7ca;--ink:#242631;--paper:#fff1d8;--red:#9b3050;--ice:#e2edf2;--line:#ab7d8e}
*{box-sizing:border-box}html{background:var(--pink)}body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,a,[role=slider]{-webkit-tap-highlight-color:transparent}button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,[role=slider]:focus-visible{outline:3px solid var(--ink);outline-offset:5px}button:disabled{cursor:default}button{color:inherit}p{margin:0}a{color:inherit}button,a{min-height:44px}button{border:0;background:transparent}.poster{border:2px solid var(--ink);margin:16px;min-height:calc(100svh - 32px);padding:18px 26px 22px;display:flex;flex-direction:column;position:relative;overflow:hidden}.poster::before,.poster::after{content:'+';font:20px monospace;position:absolute;top:3px}.poster::before{left:4px}.poster::after{right:4px}.masthead{display:flex;justify-content:space-between;align-items:center;gap:18px}.edition{display:flex;align-items:center;gap:18px;font:11px/1.4 monospace;letter-spacing:.06em}.edition b{font-family:Jersey;font-weight:400;font-size:28px;letter-spacing:0}.motion-control{display:flex;align-items:center;gap:4px;font:12px monospace}.motion-control>span{margin-right:16px;color:#633b49;font-size:11px}.motion-control button{padding:0 13px;border:1px solid var(--ink);min-height:44px}.motion-control button[aria-pressed=true]{background:var(--ink);color:var(--pink)}.motion-control button:hover{box-shadow:3px 3px 0 var(--ink)}.artboard{position:relative;flex:1;min-height:570px;display:flex;flex-direction:column;align-items:center}h1{font:clamp(100px,12.4vw,196px)/.78 Jersey,Impact,sans-serif;letter-spacing:-.025em;margin:28px 0 0;text-align:center;white-space:nowrap;position:relative;z-index:2}h1 span:not(.title-dot){color:var(--paper);text-shadow:3px 3px 0 var(--ink)}.title-dot{color:var(--red)}.subline{text-align:center;font:13px/1.5 monospace;margin-top:22px;color:#593843}.playfield{width:min(940px,100%);height:430px;position:relative;margin:5px auto 0}.sprite-wrap{position:absolute;left:30px;top:-2px;width:455px;height:455px;animation:reach 1.65s steps(3,end) infinite;transform-origin:55% 92%}#leopard{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block}.margin-note{position:absolute;top:220px;left:-44px;writing-mode:vertical-rl;transform:rotate(180deg);font:10px monospace;letter-spacing:.15em;color:#744759}.invitation{position:absolute;top:44px;left:490px;min-width:340px;padding:18px 22px 0;background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);transform:rotate(-3deg);z-index:3}.invitation:before{content:'';position:absolute;left:25px;bottom:-18px;width:22px;height:22px;background:var(--paper);border:solid var(--ink);border-width:0 2px 2px 0;transform:skewY(-35deg)}.bubble-label{font:12px monospace;color:#754754;margin-bottom:6px}#invite-text{font:42px/.95 Jersey,monospace;min-height:42px}#next-invite{display:flex;justify-content:space-between;width:100%;gap:12px;align-items:center;border-top:1px solid #c8bfae;margin-top:12px;font:11px monospace;position:relative;text-align:left}#next-invite:hover{color:var(--red)}.reply-area{position:absolute;top:232px;left:500px;width:350px}.reply-instruction{font:11px monospace;letter-spacing:.04em;margin-bottom:12px}.reply-track{height:76px;position:relative;border:2px dashed #875a6b;background:#e8a9bf;max-width:100%;touch-action:pan-y}.paw-destination{position:absolute;left:8px;top:12px;font:20px/.9 Jersey;opacity:.75;display:grid;place-content:center;width:52px;height:46px;text-align:center}.track-dashes{position:absolute;top:21px;left:87px;letter-spacing:5px;color:#7f5063}.reply-slider{width:76px;height:64px;position:absolute;top:4px;left:calc(100% - 80px);background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;gap:5px;font:23px Jersey;cursor:grab;touch-action:none;user-select:none;box-shadow:3px 3px 0 #a7677e;z-index:2}.reply-slider:active{cursor:grabbing}.reply-slider:focus-visible{outline-offset:3px}.reply-slider.complete{background:var(--paper);color:var(--red);box-shadow:3px 3px 0 var(--ink)}#keyboard-hint{font:10px/1.5 monospace;margin-top:8px;color:#734455}.reply-result{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-top:7px;min-height:44px}#reply-status{font:12px/1.4 monospace;max-width:235px}#reply-reset{font:11px monospace;text-decoration:underline;text-underline-offset:4px;padding:0 4px;flex-shrink:0}.small-star{position:absolute;color:var(--red);pointer-events:none;font-family:Jersey}.star-one{font-size:50px;top:56px;left:5px}.star-two{font-size:40px;top:360px;left:445px}.poster-bottom{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-top:12px}.signoff>p{font:38px/.95 Jersey;color:var(--red)}.signoff>p span{color:var(--ink)}.signoff nav{margin-top:14px}#social-x{display:inline-flex;gap:10px;align-items:center;text-decoration:none;font:12px monospace;padding:0 8px 0 0}#social-x svg{fill:currentColor}#social-x:hover span:first-of-type{text-decoration:underline}.contract{width:365px;background:var(--paper);border:1px solid var(--ink);padding:14px 16px;position:relative;box-shadow:4px 4px 0 #c78b9f}.contract:before{content:'';position:absolute;top:-6px;left:20px;right:20px;height:5px;border:1px solid var(--ink);background:var(--pink)}.contract-label{display:flex;justify-content:space-between;gap:10px;font:9px/1.4 monospace;letter-spacing:.03em}.contract-label span{color:#685b59}#contract-address{font:17px/1.35 monospace;margin-top:9px;overflow-wrap:anywhere;user-select:text;cursor:text}.contract-actions{display:flex;gap:8px;margin-top:7px;align-items:center}.contract-actions button,.contract-actions a{font:11px monospace;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--ink);padding:0 10px;min-height:44px;text-decoration:none}.contract-actions a[aria-disabled=true],.contract-actions button:disabled{color:#756f67;border-color:#b1a89a;cursor:default}.contract-actions a[href]{background:var(--ink);color:var(--paper)}#contract-status{font:10px/1.45 monospace;color:#655959;margin-top:7px}.no-script{font:12px monospace;max-width:320px;padding:12px}.poster.paused .sprite-wrap{animation-play-state:paused}.poster.connected .invitation{background:var(--ice)}.poster.connected .invitation:before{background:var(--ice)}.poster.connected .paw-destination{color:var(--red)}
@keyframes reach{0%,100%{transform:translateX(0) rotate(0deg)}50%{transform:translateX(7px) rotate(1deg)}}
@media(min-width:1500px){.artboard{justify-content:center}.playfield{margin-top:18px}.poster-bottom{margin-top:25px}}
@media(max-width:1050px){.poster{padding:14px 20px 18px}.artboard{min-height:590px}h1{font-size:13vw;margin-top:32px}.playfield{max-width:720px}.sprite-wrap{width:385px;height:385px;left:-4px;top:34px}.invitation{left:365px;top:56px;min-width:0;width:290px;padding:15px 18px 0}#invite-text{font-size:36px}.reply-area{left:370px;top:248px;width:285px}.reply-instruction{font-size:10px}.margin-note{left:0;top:380px;writing-mode:horizontal-tb;transform:none}.star-one{left:10px;top:30px}.star-two{left:320px;top:390px}.motion-control>span{display:none}.subline{max-width:530px}.poster-bottom{margin-top:0}.contract{width:340px}.signoff>p{font-size:32px}.edition{gap:12px;font-size:10px}}
@media(max-width:700px){.poster{margin:8px;padding:12px 12px 16px;min-height:calc(100svh - 16px)}.masthead{gap:5px}.edition{display:block}.edition b{font-size:25px}.edition span{display:none}.motion-control{gap:4px}.motion-control button{padding:0 9px;font-size:10px;min-height:44px}.artboard{min-height:0;flex:1}h1{font-size:clamp(66px,17vw,115px);white-space:normal;line-height:.79;margin-top:24px;letter-spacing:-.025em;max-width:100%}h1 span:not(.title-dot){display:block;text-shadow:2px 2px 0 var(--ink)}.title-dot{display:none}.subline{font:11px/1.4 monospace;max-width:255px;margin-top:12px}.playfield{height:405px;width:100%;margin-top:3px}.sprite-wrap{width:260px;height:260px;left:calc(50% - 166px);top:38px}.invitation{left:auto;right:0;top:7px;width:178px;min-width:0;padding:10px 12px 0;box-shadow:4px 4px 0 var(--ink);transform:rotate(-4deg)}.bubble-label{font-size:10px;margin-bottom:3px}#invite-text{font-size:27px;min-height:26px}#next-invite{font-size:9px;line-height:1.25;margin-top:5px;gap:4px;min-height:44px}.invitation:before{left:20px;bottom:-13px;width:15px;height:15px}.reply-area{left:8px;top:282px;width:calc(100% - 16px)}.reply-instruction{font-size:10px;margin-bottom:7px}.reply-track{height:62px}.reply-slider{height:50px;width:68px;left:calc(100% - 72px);font-size:21px}.paw-destination{height:40px;top:8px;font-size:18px}.track-dashes{top:15px}.reply-result{margin-top:0;gap:6px;min-height:44px}#reply-status{font-size:10px}#keyboard-hint{font-size:9px;margin-top:5px}.margin-note{top:246px;left:auto;right:2px;font-size:8px;writing-mode:vertical-rl;transform:rotate(180deg)}.star-one{top:37px;left:2px;font-size:32px}.star-two{top:202px;left:auto;right:17px;font-size:34px}.poster-bottom{margin-top:15px;display:grid;grid-template-columns:1fr;width:100%;gap:12px}.signoff{display:flex;align-items:center;justify-content:space-between;gap:10px}.signoff>p{font-size:22px}.signoff nav{margin-top:0}#social-x{font-size:10px;gap:6px;padding:0}#social-x svg{width:16px;height:16px}.contract{width:100%;padding:10px 12px;box-shadow:3px 3px 0 #c78b9f}.contract-label{font-size:8px}#contract-address{font-size:15px;margin-top:5px}.contract-actions{gap:6px;margin-top:5px}.contract-actions button,.contract-actions a{font-size:10px;padding:0 10px}#contract-status{font-size:9px;margin-top:4px}}
@media(max-width:350px){.poster{padding-left:10px;padding-right:10px}.sprite-wrap{width:236px;height:236px;left:calc(50% - 145px);top:49px}.invitation{width:162px;right:0}#next-invite{font-size:8.5px}.signoff>p{font-size:20px}#social-x{font-size:9px;gap:5px}.reply-area{left:2px;width:calc(100% - 4px)}.reply-instruction{font-size:9px}.contract-label{font-size:7px;gap:5px}.contract-actions button,.contract-actions a{font-size:9px;padding:0 8px}.subline{max-width:245px}.margin-note{font-size:7px}.playfield{height:403px}}
@media(prefers-reduced-motion:reduce){.sprite-wrap{animation:none!important;transform:none!important}*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
/* Keep the face clear of the invitation at every breakpoint. */
@media(min-width:1051px){.playfield{height:410px}.sprite-wrap{width:430px;height:430px;left:44px}.artboard{min-height:540px}.poster-bottom{margin-top:4px}}
@media(min-width:701px) and (max-width:1050px){.margin-note{top:424px;left:8px}}
@media(max-width:700px){
 h1{margin-top:16px}.subline{display:none}.playfield{height:450px;margin-top:14px}
 .invitation{left:5px;right:5px;top:0;width:auto;transform:rotate(-2deg);padding:9px 14px 0}
 #invite-text{font-size:29px;min-height:28px}.bubble-label{font-size:11px}#next-invite{font-size:10px;margin-top:4px}
 .sprite-wrap{width:220px;height:220px;left:calc(50% - 125px);top:112px}
 .reply-area{top:326px}.margin-note{display:none}.star-one{top:155px;left:12px}.star-two{top:246px;right:22px}
 .poster-bottom{margin-top:10px}.signoff>p{font-size:24px}#social-x{font-size:11px}.contract-label{font-size:9px}#contract-status{font-size:10px}
}
@media(max-width:350px){.sprite-wrap{width:215px;height:215px;left:calc(50% - 118px);top:112px}#invite-text{font-size:27px}#next-invite{font-size:10px}.signoff>p{font-size:21px}#social-x{font-size:10px}.contract-label{font-size:8px}.contract-actions button,.contract-actions a{font-size:10px;padding:0 7px}}
