:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:transparent;overflow:hidden}
body{padding:8px}
#overlay{--ink:#19212b;--muted:#495565;--rule:#e7eaef;--radius:22px;--brand:24%;--padding:16px;--number:52px;--label:18px;--gap:6px;width:100%;height:100%;display:flex;align-items:stretch;background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:0 5px 14px #17263912;overflow:hidden}
.brand{flex:0 0 var(--brand);min-width:0;position:relative;display:flex;align-items:center;justify-content:center;gap:var(--brand-gap,12px);padding:var(--brand-padding,var(--padding))}
.brand:after{content:"";position:absolute;right:0;top:25%;height:50%;width:1px;background:var(--rule)}
.brand img{width:var(--logo,64px);height:auto;aspect-ratio:1;border-radius:22%;flex:none}
.wordmark{display:flex;flex-direction:column;min-width:0;gap:2px;font-size:var(--word,13px);font-weight:550;line-height:1.05;letter-spacing:.08em}
.wordmark strong{font-size:var(--word-strong,30px);font-weight:850;letter-spacing:.045em}
.wordmark small{font-size:var(--caption,9px);font-weight:550;letter-spacing:.055em;white-space:nowrap;margin-top:5px;color:var(--muted)}
.stage{flex:1;min-width:0;position:relative;overflow:hidden}
.screen-layer{position:absolute;inset:0;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .22s ease,transform .22s ease;will-change:opacity,transform}
.screen-layer.is-active{opacity:1;transform:translateY(0);pointer-events:auto}
.screen-layer.is-refreshing{opacity:0;transition-duration:.1s}
.metrics{display:grid;align-items:center;align-content:center;gap:var(--grid-gap,12px);padding:var(--padding)}
.metric{min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--gap);text-align:center}
.value{font-size:var(--number);font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.label{display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;color:var(--muted);font-weight:650;font-size:var(--label);line-height:1.15}
.dot{width:var(--dot,6px);height:var(--dot,6px);flex:none;border-radius:50%;background:var(--metric-color,#b1b8c1)}
.short-label{display:none}
#overlay.compact .wordmark{display:none}
#overlay.compact .dot{display:none}
#overlay.compact-labels .full-label{display:none}
#overlay.compact-labels .short-label{display:inline}
#overlay[data-status="offline"] .value{color:#8c949e}
#overlay[data-status="offline"] #caption{color:#9e6d28}
#overlay[data-state="convite"] #caption{color:var(--muted)}
.invitation{display:flex;align-items:center;justify-content:center;gap:var(--grid-gap,12px);padding:var(--padding)}
.invite-copy{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--invite-gap,6px);text-align:center}
.invite-title{font-size:var(--invite-title,26px);line-height:1.05;font-weight:800;letter-spacing:-.035em;white-space:nowrap}
.invite-subtitle{font-size:var(--invite-small,13px);line-height:1.15;color:var(--muted);white-space:nowrap}
.invite-link{font-size:var(--invite-link,20px);line-height:1.05;color:var(--ink);font-weight:750;text-decoration:none;letter-spacing:-.025em;white-space:nowrap}
.invite-qr{width:var(--invite-qr,108px);height:var(--invite-qr,108px);flex:none;object-fit:contain;image-rendering:pixelated}
.invitation.without-qr .invite-qr{display:none}
@media(prefers-reduced-motion:reduce){.screen-layer{transition:none;transform:none;will-change:auto}}