*{box-sizing:border-box}body{margin:0;background:#f6f6f7;color:#1e1e1c;font-family:Arial,Helvetica,sans-serif}main{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 0 12px;gap:12px}.screen-wrap{width:393px;height:852px;position:relative;flex-shrink:0}#screen{width:393px;height:852px;position:absolute;transform-origin:top left;background:white;overflow:hidden;box-shadow:0 8px 48px #00000008;border-radius:24px}.profile-pill{position:absolute;left:15.75px;top:54.45px;width:74px;height:40px;border-radius:22px;background:#ffffffde;box-shadow:0 3px 16px #00000012;display:flex;align-items:center;padding:4px;gap:15px}.profile-pill>img:first-child{width:32px;height:32px;border-radius:50%;object-fit:cover;filter:brightness(.88)}.dots{width:12px;height:2px;transform:rotate(90deg)}.featured{position:absolute;top:146.2px;width:112px;height:138px}.mitchell{left:48px}.gamers{left:233px}.portrait-shadow{position:absolute;left:-20px;top:-15px;width:152px;height:152px}.featured>span{position:absolute;top:124px;width:100%;text-align:center;color:#909093;font-size:14px;line-height:14px;letter-spacing:-.2px}.group-circle{position:relative;width:112px;height:112px;border-radius:50%;background:#f4f4f4a3;box-shadow:0 2.545px 22.909px -5.091px #0000000a,inset 0 0 0 .636px white;overflow:hidden}.group-circle img{position:absolute}.messages{position:absolute;left:16px;top:336.45px;width:361px;display:flex;flex-direction:column;gap:32px}.row{height:48px;position:relative;display:flex;align-items:center;gap:12px;padding-left:16px}.avatars{position:relative;width:48px;height:48px;flex-shrink:0}.avatars img{position:absolute}.copy{display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:14px;letter-spacing:-.2px;min-width:0}.copy p{font-size:12px;line-height:14px;margin:0;letter-spacing:-.1px}.study .copy p{width:204px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unread{position:absolute;left:0;top:20px;width:8px;height:8px}.now{position:absolute;right:0;top:25px;font-size:13px}.elisa{gap:16px}.elisa .copy,.run .copy{font-size:15px}.elisa .copy p{font-size:13px}.chat{position:absolute;right:3.33px;top:15px;width:19.333px;height:18px}.run{padding-left:12px;gap:16px}.run .avatars img{width:30px;height:30px}nav{position:absolute;left:106px;top:761.38px;width:180px;height:52px;border:1px solid #f4f4f4;background:#fcfcfcce;border-radius:26px;display:flex;gap:3px;padding:2px}nav>img{width:56px;height:46px}.selected{width:56px;height:46px;border-radius:23px;background:#f0f0f0;display:grid;place-items:center}canvas,#targets,#fallback{position:absolute;inset:0;width:393px;height:852px;pointer-events:none}#targets{z-index:3}.target{position:absolute;border:0;border-radius:50%;background:transparent;pointer-events:auto;touch-action:none;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;user-select:none}.target:focus-visible{outline:2px solid #ff6a70;outline-offset:4px}.target.holding{box-shadow:0 0 0 2px #ef797e44}.hint{margin:0;color:#858589;font-size:12px;letter-spacing:.1px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#fallback span{position:absolute;color:#db4547;font-size:28px;text-shadow:1px 2px 3px #8f162733;transform:translate(-50%,-50%)}@media(max-width:450px){body{background:white}#screen{border-radius:0;box-shadow:none}main{padding:0;gap:4px}.hint{font-size:11px}}
:root {
  --avatar-dur: 380ms;
  --avatar-press-dur: 150ms;
  --avatar-press-scale: 0.94;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 2.2, 0.64, 1);
}
.t-avatar {
  transform-origin: center;
  transform:
    translateY(var(--shift, 0px))
    scale(var(--scale-active, 1));
  transition: transform var(--avatar-dur) var(--avatar-ease-in);
  will-change: transform;
}
.target.holding { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .t-avatar { transition: none !important; transform: none !important; }
}
.setting{display:flex;align-items:center;gap:10px;color:#77777e;font-size:12px}.setting select{font:inherit;font-size:12px;color:#333338;background:white;border:1px solid #e4e4e8;border-radius:9px;padding:7px 28px 7px 10px;cursor:pointer}.setting select:focus-visible{outline:2px solid #df2589;outline-offset:2px}#flat-hearts{pointer-events:none}
/* Full-viewport layout; reaction coordinates follow the actual avatar bounds. */
html,body{width:100%;min-height:100%;background:#fff}main{display:block;min-height:100dvh;padding:0}.screen-wrap{width:100%;height:100dvh;min-height:568px}#screen{position:relative;width:100%;height:100%;border-radius:0;box-shadow:none;transform:none}.profile-pill{top:max(24px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left))}.featured{top:clamp(104px,17dvh,160px)}.mitchell{left:calc(50% - min(25vw, 150px) - 56px)}.gamers{left:calc(50% + min(25vw, 150px) - 56px)}.messages{top:clamp(286px,39.5dvh,365px);left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:600px}.copy{flex:1}.study .copy{padding-right:42px}.study .copy p{width:100%;max-width:350px}.copy p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now{right:0}nav{top:auto;bottom:calc(96px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%)}canvas,#targets,#fallback{width:100%;height:100%}.controls{position:fixed;z-index:5;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1.4fr;gap:5px 12px;padding:10px max(16px,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#ffffffed;backdrop-filter:blur(16px);border-top:1px solid #f2f2f4}.setting{display:flex;gap:4px;flex-direction:column;align-items:stretch;font-size:10px;min-width:0}.setting select{width:100%;min-height:36px;font-size:16px;padding:5px 22px 5px 9px}.hint{grid-column:1/-1;text-align:center;font-size:10px;margin-top:2px}@media(min-width:700px){.controls{left:50%;right:auto;transform:translateX(-50%);width:520px;border-radius:18px 18px 0 0}.setting{font-size:12px}}@media(max-height:700px){.featured{top:92px}.messages{top:254px;gap:12px}.profile-pill{top:max(18px,env(safe-area-inset-top))}nav{bottom:calc(92px + env(safe-area-inset-bottom))}}
/* Side-by-side recipient preview is limited to desktop pointer devices. */
.recipient-panel,.sender-heading{display:none}
.recipient-view .controls{display:none}.recipient-view nav{bottom:24px}.recipient-view .sender-portrait{left:0;top:0;width:112px;height:112px;border-radius:50%;object-fit:cover;transform-origin:center!important}
.desktop-simulation body{display:flex;justify-content:center;align-items:flex-start;gap:48px;padding:32px 24px;background:#f5f5f7}
.desktop-simulation main{position:relative;width:393px;min-height:0;padding:0 0 92px;background:white;border-radius:24px;overflow:hidden;box-shadow:0 8px 40px #25202b0b}
.desktop-simulation .screen-wrap{height: min(760px, calc(100dvh - 200px));min-height:568px}
.desktop-simulation .featured{top:104px}.desktop-simulation .mitchell{left:42px}.desktop-simulation .gamers{left:239px}.desktop-simulation .messages{top:294px}.desktop-simulation nav{bottom:20px}
.desktop-simulation .controls{position:absolute;width:100%;left:0;bottom:0;transform:none;border-radius:0}
.desktop-simulation .recipient-panel{display:block;width:393px}
.desktop-simulation .sender-heading{display:flex}
.phone-heading{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:14px;background:#fff}.phone-heading span{font-size:12px;color:#929099}
.recipient-panel .phone-heading{border-radius:24px 24px 0 0}.recipient-device{position:relative;height:min(760px,calc(100dvh - 200px));min-height:568px;background:white;overflow:hidden;border-radius:0 0 24px 24px}.recipient-device iframe{border:0;width:100%;height:100%;display:block}
.recipient-cover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#fbf7fa}.recipient-cover[hidden]{display:none}.cover-icon{font-size:60px;color:#ed4b95}.recipient-cover h2{font-size:20px;font-weight:500;margin:14px 0 0}.recipient-cover p{color:#87808a;font-size:13px;margin:12px 0 24px}.recipient-cover button{background:#ec4c94;color:white;border:0;border-radius:24px;padding:12px 28px;font:inherit;cursor:pointer}
.recipient-actions{display:flex;justify-content:center;gap:12px;padding:20px 0}.recipient-actions button,.sender-heading button{border:1px solid #e6dce2;background:white;color:#b92d6b;padding:9px 14px;border-radius:18px;font-size:12px;cursor:pointer}.recipient-actions button:disabled{opacity:.4;cursor:default}
/* Simulated iOS notification: contained inside the recipient phone. */
.recipient-cover.ios-lock{justify-content:flex-start;color:#fff;background:radial-gradient(ellipse at 16% 15%,#eab2c8 0%,transparent 55%),radial-gradient(ellipse at 100% 62%,#7b659d 0%,transparent 65%),linear-gradient(155deg,#b995b2,#535879 75%,#383e59);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:22px 15px}
.lock-status{display:flex;justify-content:space-between;width:100%;padding:0 10px;font-size:15px;letter-spacing:2px;opacity:.9}.lock-symbol{margin:22px 0 13px}.lock-date{font-size:18px;font-weight:500;letter-spacing:-.3px}.lock-time{font-size:82px;line-height:1.14;font-weight:650;letter-spacing:-4px;font-variant-numeric:tabular-nums;color:#ffe5ef}.notification-area{width:100%;margin-top:42px}
.recipient-cover .ios-notification{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border-radius:23px;padding:14px 12px;background:#fff9;color:#24222b;box-shadow:0 6px 24px #34243d12,inset 0 1px 0 #ffffff59;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);animation:notification-in .32s ease-out;font-size:13px;cursor:pointer}.ios-notification[hidden]{display:none!important}.friends-app-icon{width:37px;height:37px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,#ff8bbd,#e8428d);color:white;font-size:24px;box-shadow:inset 0 1px 1px #ffffff80}.notification-content{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px;line-height:1.3}.notification-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:1px}.notification-heading strong{font-size:12px;font-weight:600}.notification-heading>span{font-size:11px;color:#625a66}.notification-title{font-size:13px;font-weight:600}.notification-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}.recipient-cover p.lock-empty{color:#fff9;font-size:13px;margin-top:10px}.recipient-cover .lock-open{margin-top:auto;margin-bottom:28px;font-size:13px;font-weight:500;background:#ffffff1f;color:#fff;border:1px solid #ffffff30;backdrop-filter:blur(12px);padding:11px 23px}.home-indicator{position:absolute;bottom:9px;width:128px;height:5px;border-radius:5px;background:#fff}.ios-notification:focus-visible,.lock-open:focus-visible{outline:3px solid white;outline-offset:4px}@keyframes notification-in{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.recipient-cover .ios-notification{animation:none}}
.sound-toggle{font:inherit;color:#b92d6b;background:none;border:0;padding:2px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.sound-toggle:focus-visible{outline:2px solid #e8428d;outline-offset:2px;border-radius:3px}