html.obs-transparent,html.obs-transparent body{background:0 0!important}.obs{width:100%;min-height:100dvh;font-family:var(--font-display);color:#fff;background:0 0;place-items:center;display:grid;container-type:inline-size}.obs[data-preview]{height:100%;min-height:0}.obs__dead{font-size:var(--t-sm);color:var(--muted-2);padding:var(--s-12) var(--s-16);border-radius:var(--r-card);border:1px solid var(--border);background:#0000008c}.obs__panel{border:calc(1 * var(--u)) solid #ffffff1f;box-shadow:0 calc(10 * var(--u)) calc(34 * var(--u)) #00000080;-webkit-backdrop-filter:blur(calc(8 * var(--u)));backdrop-filter:blur(calc(8 * var(--u)));background:linear-gradient(#0e1016d1,#08090de0);position:relative;overflow:hidden}.obs__panel:before{content:"";pointer-events:none;background:radial-gradient(120% 90% at 8% -20%,#ff2d6b38,#0000 60%);position:absolute;inset:0}.obs__panel--bar{--u:min(1px, calc(100cqw / 640));width:calc(640 * var(--u));height:calc(200 * var(--u));border-radius:calc(18 * var(--u));padding:calc(16 * var(--u)) calc(20 * var(--u));gap:calc(10 * var(--u));grid-template-rows:auto 1fr auto;display:grid}.obs__panel--circle{--u:min(1px, calc(100cqw / 400));width:calc(400 * var(--u));height:calc(400 * var(--u));padding:calc(28 * var(--u));align-content:center;justify-items:center;gap:calc(8 * var(--u));text-align:center;border-radius:50%;display:grid}.obs__head{align-items:center;gap:calc(14 * var(--u));display:flex}.obs__face{width:calc(56 * var(--u));height:calc(56 * var(--u));flex:none;position:relative}.obs__panel--circle .obs__face{width:calc(84 * var(--u));height:calc(84 * var(--u))}.obs__avatar{object-fit:cover;border-radius:calc(var(--av-radius-ratio) * 100%);background:#00000080;width:100%;height:100%}.obs__avatar--empty{font-size:calc(24 * var(--u));color:#ffffffb3;border:calc(1 * var(--u)) solid #ffffff24;place-items:center;font-weight:700;display:grid}.obs__frame{pointer-events:none;width:124%;height:124%;position:absolute;inset:-12%}.obs__ident{gap:calc(6 * var(--u));flex:auto;min-width:0;display:grid}.obs__nick{font-size:calc(22 * var(--u));white-space:nowrap;text-overflow:ellipsis;text-shadow:0 calc(2 * var(--u)) calc(8 * var(--u)) #0009;font-weight:700;line-height:1.1;overflow:hidden}.obs__panel--circle .obs__nick{font-size:calc(26 * var(--u));max-width:100%}.obs__nick[data-rainbow]{background:linear-gradient(90deg,#ff2d6b,#ffce3e 35%,#38e67a 65%,#4c8dff);color:#0000;text-shadow:none;-webkit-background-clip:text;background-clip:text}.obs__lvl{flex:none;justify-items:center;line-height:1;display:grid}.obs__lvl b{font-size:calc(30 * var(--u));color:var(--pink-soft)}.obs__lvl span{font-size:calc(9 * var(--u));letter-spacing:var(--tr-label);text-transform:uppercase;color:#ffffff80}.obs__band{align-items:center;gap:calc(8 * var(--u));width:100%;display:flex}.obs__bandcap{font-size:calc(11 * var(--u));color:#ffffff9e;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}.obs__track{height:calc(6 * var(--u));background:#ffffff1f;border-radius:999px;flex:auto;overflow:hidden}.obs__fill{background:linear-gradient(90deg, var(--pink-deep), var(--pink) 60%, var(--pink-soft));height:100%;transition:width var(--d-glide) var(--e-out);border-radius:999px;display:block}.obs__figs{justify-content:space-between;align-items:center;gap:calc(10 * var(--u));width:100%;display:flex}.obs__panel--circle .obs__figs{justify-content:center;gap:calc(18 * var(--u))}.obs__fig{gap:calc(2 * var(--u));justify-items:start;display:grid}.obs__panel--circle .obs__fig{justify-items:center}.obs__figk{font-size:calc(9 * var(--u));letter-spacing:var(--tr-label);text-transform:uppercase;color:#ffffff80}.obs__figv{font-size:calc(17 * var(--u));font-variant-numeric:tabular-nums;font-weight:700}.obs__figv--accent{color:var(--pink-soft)}.obs__figv--win{color:var(--green-soft)}.obs__figv--loss{color:var(--red)}.obs__foot{justify-content:space-between;align-items:center;gap:calc(10 * var(--u));width:100%;display:flex}.obs__panel--circle .obs__foot{justify-content:center;gap:calc(12 * var(--u))}.obs__rank{font-size:calc(11 * var(--u));color:#ffffff9e;font-variant-numeric:tabular-nums}.obs__mark{align-items:center;gap:calc(5 * var(--u));font-size:calc(10 * var(--u));letter-spacing:var(--tr-label);color:#ffffff6b;display:inline-flex}.obs__mark b{color:#ffffffb8}.obs__mark svg{width:calc(12 * var(--u));height:calc(13 * var(--u))}