.sg-frame{position:relative;aspect-ratio:9 / 16;container-type:inline-size;background:var(--sg-ground);border-color:var(--sg-ground)}.sg-screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;padding:0 var(--sg-margin);color:#fff}.sg-progress{display:flex;gap:1cqw;margin-top:var(--sg-progress-top);height:var(--sg-progress-h);min-height:2px}.sg-progress i{flex:1 1 0;border-radius:999px;background:#fff;opacity:.35}.sg-progress i:first-child{opacity:.9}.sg-head{display:flex;align-items:center;gap:2cqw;margin-top:var(--sg-head-top);height:var(--sg-avatar);min-width:0}.sg-screen>.sg-head:first-child{margin-top:calc(var(--sg-progress-top) + var(--sg-progress-h) + var(--sg-head-top))}.sg-avatar{flex:0 0 auto;display:grid;place-items:center;width:var(--sg-avatar);height:var(--sg-avatar);border-radius:50%;background:#fff;color:var(--sg-ground);font-size:var(--sg-name);font-weight:700;line-height:1}.sg-handle{display:flex;flex-direction:column;min-width:0;line-height:1.2}.sg-handle b{font-size:max(var(--sg-name),8px);font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sg-handle em{font-style:normal;font-size:max(var(--sg-meta),7px);color:#ffffffb8}.sg-grid{display:grid;grid-template-columns:repeat(2,var(--sg-card));grid-auto-rows:var(--sg-card);gap:var(--sg-gutter);margin-top:var(--sg-grid-top)}.sg-card{overflow:hidden;border-radius:1cqw;background:#2a2a2a}.sg-card img{display:block;width:100%;height:100%;object-fit:cover}.sg-foot{flex:1 1 auto;display:grid;place-items:center}.sg-pill{display:grid;place-items:center;width:var(--sg-pill-w);height:var(--sg-pill-h);border-radius:999px;background:#fff;color:#111;font-size:max(var(--sg-pill),8px);font-weight:600;line-height:1;white-space:nowrap}