/* Codeforces-style profile card. Deliberately keeps Codeforces' own light look, in both themes. */
.cf { background:#fff; color:#222; border:1px solid #b9b9b9; font:13px/1.5 Verdana, Arial, sans-serif; text-align:left; }
.cf a { text-decoration:none; } .cf a:hover { text-decoration:underline; }
.cf :focus-visible { outline-color:#3b5998; }
.cf-head { display:flex; align-items:center; gap:8px; padding:6px 12px; background:#e1e1e1; border-bottom:1px solid #b9b9b9; font-size:14px; color:#3b5998; }
.cf-head img { display:block; }
.cf-body { display:grid; grid-template-columns:230px 1fr; gap:14px; padding:14px 14px 4px; align-items:start; }
.cf-rank { font-size:13px; font-weight:bold; line-height:1.2; }
.cf-handle { font-size:20px; font-weight:bold; line-height:1.2; margin-bottom:8px; overflow-wrap:anywhere; }
.cf-info ul { margin:0; padding:0; list-style:none; } .cf-info li { margin:2px 0; }
.cf-dim { color:#666; }
/* the graph is drawn at its real width by codeforces.js; this only keeps it in its box while it catches up */
.cf-graph svg { display:block; width:100%; height:auto; touch-action:pan-y; }
.cf-graph circle[tabindex] { cursor:pointer; }
.cf-graph circle:focus { outline:none; } .cf-graph circle:focus-visible { stroke:#0000ff; stroke-width:3; }
.cf-ax { font:11px Verdana, Arial, sans-serif; fill:#555; }
.cf-tip { min-height:2.9em; margin:4px 14px 0; padding:4px 8px; background:#f7f7f7; border:1px solid #e1e1e1; font-size:12px; color:#444; }
.cf-up { color:#008000; font-weight:bold; } .cf-down { color:#c00; font-weight:bold; }
.cf-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 12px; padding:6px 14px 10px; font-size:11px; color:#666; } .cf-foot a { color:#3b5998; }
@media (max-width:640px) { .cf-body { grid-template-columns:1fr; } .cf-tip { min-height:4.6em; } }
.cf-body > * { min-width:0; }