@font-face { font-family:Geist;src:url("/assets/fonts/Geist-VariableFont_wght.ttf") format("truetype");font-weight:100 900;font-display:swap; }
* { box-sizing:border-box; }
html,body { width:100%;height:100%;margin:0; }
body { display:grid;place-items:center;background:transparent;font-family:Geist,Arial,sans-serif;color:#2b2b28; }
svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0; }
.scene { position:relative; }
strong { font-weight:600; }
small { display:block;color:#898177;font-size:13px;line-height:1.5;margin-top:4px; }
@keyframes appear { from { opacity:0;transform:translateY(10px); } to { opacity:1;transform:translateY(0); } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { *,*::after { animation:none!important; } }

.scene { width:min(620px,calc(100% - 44px));height:360px;transform:translateY(-20px); }
.opportunities { position:absolute;left:0;top:0;width:85%;height:276px;padding:20px;border:1px solid #ffffff5c;border-radius:24px;background:#ffffff14; }
.list-label { display:flex;align-items:center;justify-content:space-between;color:#fff5e9;font-size:16px;font-weight:500;margin-bottom:16px; }.list-label span { font-size:11px;opacity:.6; }
.ghost { display:flex;gap:14px;align-items:center;height:54px;border-radius:12px;background:#ffffff0d;margin-bottom:12px;padding:10px 14px; }
.ghost i { width:34px;height:34px;border-radius:50%;background:#ffffff23; }.ghost div { flex:1; }.ghost b { display:block;width:65%;height:7px;background:#ffffff30;border-radius:5px;margin:7px 0; }.ghost b+b { width:42%;opacity:.6; }
.opportunity { position:absolute;left:35px;right:0;top:125px;min-height:88px;display:flex;align-items:center;gap:15px;padding:18px 22px;border-radius:17px;background:#fffcf7;box-shadow:0 15px 35px #49351e14; }
.avatar { width:49px;height:49px;display:grid;place-items:center;border-radius:50%;background:#eaddca;color:#7b6547;font-size:21px;flex-shrink:0; }.opportunity strong { font-size:19px; }.opportunity small { font-size:14px; }
.overdue { display:flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;color:#9c7941;white-space:nowrap; }.overdue svg { width:17px;height:17px; }
.follow-path { position:absolute;left:0;top:214px;width:100%;height:85px;color:#efe2cf;stroke-dasharray:1; }
.sent { position:absolute;right:10px;top:304px;display:flex;align-items:center;gap:12px;padding:13px 17px;background:#f4f1e7;border-radius:14px;box-shadow:0 7px 20px #49351e0a; }.sent strong { font-size:15px;font-weight:500; }.sent>svg { color:#6b8058;width:18px; }.send-icon { color:#837151;display:flex; }
.playing .opportunity { animation:surface 800ms 450ms cubic-bezier(.22,1,.36,1) both; }.playing .follow-path { animation:draw 650ms 1300ms ease both; }.playing .sent { animation:appear 500ms 1950ms ease both; }
@keyframes surface { from { opacity:0;transform:translate(-20px,0) scale(.96); } to { opacity:1;transform:translate(0,0) scale(1); } }
@keyframes draw { from { stroke-dashoffset:1;opacity:0; } to { stroke-dashoffset:0;opacity:1; } }
@media(max-width:520px) { .scene { width:calc(100% - 36px);transform:translateY(-42px);height:320px; }.opportunities { width:94%;height:248px;padding:15px; }.opportunity { left:0;top:120px;padding:14px;gap:10px; }.opportunity strong { font-size:16px; }.opportunity small { font-size:12px; }.avatar { width:40px;height:40px;font-size:18px; }.overdue { font-size:10px;gap:3px; }.overdue svg { width:14px; }.sent { top:280px;right:0;padding:12px; }.sent strong { font-size:13px; }.follow-path { top:203px;height:76px; }.ghost { height:48px; }.list-label { font-size:14px; } }

body.standalone { background:#a58665; }

/* Preserve the vacant row so the other placeholders stay in place. */
.ghost.two { visibility: hidden; }
/* Geometry is measured from both cards, including after responsive changes. */
.follow-path { top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.playing .sent { animation-name: fade; }