@font-face{font-family:"General Sans";src:url("GeneralSans-Variable.woff2") format("woff2");font-weight:200 700;font-display:swap}
@font-face{font-family:"Manrope";src:url("Manrope-Variable.woff2") format("woff2");font-weight:200 800;font-display:swap}
:root{
  --ink:#1a1a18; --muted:#6b6b66; --faint:#a3a39c; --line:rgba(17,17,17,.07);
  --blue:#5b6fa8; --blue-2:#8d9cc6; --blue-3:#c9d1e8; --ok:#3f8a5f;
  --sans:"General Sans",ui-sans-serif,-apple-system,sans-serif;
  --body:"Manrope",ui-sans-serif,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased;background:#f9f9f5;display:grid;place-items:center;overflow:hidden}
body.embed{background:transparent}

/* Mireye frame: photo → 28px inset → clear glass */
.frame{position:relative;width:min(580px,96vw);height:520px;border-radius:20px;overflow:hidden;padding:28px;border:1px solid #dfded8}
.frame .photo{position:absolute;inset:-9px;background-size:cover;background-position:center}
.frame .dim{position:absolute;inset:0;background:rgba(17,17,17,.1)}
.glass{position:relative;height:100%;border-radius:20px;background:rgba(255,255,255,.7);border:1px solid rgba(243,243,241,.9);
  backdrop-filter:blur(22px) saturate(1.5) brightness(1.05);-webkit-backdrop-filter:blur(22px) saturate(1.5) brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 1px 0 0 rgba(255,255,255,.52),0 20px 44px -22px rgba(17,17,17,.32);
  display:flex;flex-direction:column;overflow:hidden}
.g-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 0;font-family:var(--mono);font-size:13px;line-height:22px;color:var(--muted);white-space:nowrap}
.g-head .who{display:flex;align-items:center;gap:8px}
.g-head .mk{width:14px;height:14px;color:var(--blue)}
.g-head .replay{cursor:pointer}
.g-view{flex:1;min-height:0;padding:22px 14px 16px 16px;display:flex;flex-direction:column;gap:10px;overflow:hidden}

/* the two Mireye surfaces */
.bub{align-self:flex-end;max-width:84%;background:rgba(255,255,255,.64);border:1px solid rgba(243,242,240,.9);border-radius:14px;padding:8px 14px;
  font-family:var(--sans);font-size:14.5px;line-height:22px;color:#222;
  backdrop-filter:blur(10px) saturate(1.35) brightness(1.04);-webkit-backdrop-filter:blur(10px) saturate(1.35) brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 1px 2px rgba(17,17,17,.04)}
.cur{opacity:.5;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ans{background:rgba(255,255,255,.64);border:1px solid rgba(243,242,240,.9);border-radius:10px;padding:10px 13px;font-size:14px;line-height:22px;
  backdrop-filter:blur(10px) saturate(1.35);-webkit-backdrop-filter:blur(10px) saturate(1.35)}
.ct{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--muted)}
.call{font-family:var(--mono);font-size:12.5px;line-height:1.55;color:#333}
.call .fn{color:var(--blue);font-weight:600}

/* reveal */
.rv{opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}}
.g-view>*{flex:none}
.g-view.scrolled{-webkit-mask:linear-gradient(180deg,transparent 0,#000 30px);mask:linear-gradient(180deg,transparent 0,#000 30px)}


/* bare: card content only, for embedding inside a host page's own photo frame + glass */
html:has(body.bare),body.bare{background:transparent;height:100%}
body.bare{display:block}
.bare .frame{width:100%;height:100%;padding:0;border:0;border-radius:0;background:none;overflow:visible}
.bare .frame .photo,.bare .frame .dim{display:none}
.bare .glass{background:transparent;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* fill: the whole card (photo frame + glass) stretches to the host box */
html:has(body.fill),body.fill{height:100%;background:transparent}
body.fill{display:block}
.fill .frame{width:100%;height:100%;border:0;border-radius:10px}
/* phone-sized cards (the site gives each demo ~330px on a phone): tighter header, interview footer stays on one line */
@media (max-width:380px){
.g-head{font-size:12px;padding:12px 14px 0}
.others{gap:4px}
.others img{width:20px;height:20px}
.others img:nth-of-type(n+7){display:none}
.others .ct{white-space:nowrap;margin-left:4px}
}