@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Nunito+Sans:wght@400;500;600;700&display=swap');
:root { --navy:#001e2e; --teal:#007d79; --aqua:#3ddbd9; --ink:#161616; --muted:#6f6f6f; --line:#e0e0e0; --paper:#f5f7fa; color-scheme:light; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.375 'Nunito Sans',sans-serif; }
a { color:var(--teal); text-underline-offset:3px; }
a:hover { color:#005d59; }
button,input,select { font:inherit; }
button,a,input,select { outline-offset:4px; }
:focus-visible { outline:3px solid #0f62fe; }
h1,h2,h3,h4 { font-family:Figtree,sans-serif; }
h1,h2,h3,h4,p { margin-top:0; }
h1 { font-size:32px; line-height:40px; margin-bottom:8px; }
h2 { font-size:24px; line-height:30px; }
h3 { font-size:24px; line-height:38px; }
.wrap { max-width:1280px; margin:auto; padding:0 40px; }
.skip { position:absolute; top:-70px; background:white; padding:12px; z-index:10; }
.skip:focus { top:0; }
.icon { display:block; flex:none; }
.topbar { background:white; box-shadow:0 4px 12px #0000001a; position:relative; z-index:2; }
.topbar .wrap { min-height:72px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; }
.brand img { display:block; }
.app-name { padding:12px 0 12px 24px; border-left:1px solid var(--line); color:var(--ink); text-decoration:none; font-weight:700; }
.visit-topcoder { display:flex; align-items:center; gap:8px; margin-left:auto; font-size:14px; font-weight:700; text-decoration:none; }
.subnav { background:#f4f4f4; }
.subnav .wrap { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.archive-name { color:var(--ink); text-decoration:none; font-weight:700; }
.subnav nav { display:flex; align-items:center; }
.subnav nav a { color:var(--ink); padding:16px; text-decoration:none; font-size:16px; }
.subnav nav a:last-child { padding-right:0; }
.subnav nav a[aria-current] { font-weight:700; }
.subnav nav a:hover { text-decoration:underline; }
.hero { position:relative; overflow:hidden; background:var(--navy); color:white; min-height:250px; padding:0 0 44px; }
.hero .wrap { position:relative; z-index:1; }
.hero-art { position:absolute; width:760px; height:420px; right:max(0px,calc((100vw - 1360px)/2)); top:-86px; opacity:.6; pointer-events:none; }
.hero-art img { position:absolute; }
.hero-dots { left:53.6px; top:5.6px; }
.hero-highlights { left:400px; top:96px; }
.hero h1 { overflow-wrap:anywhere; max-width:100%; }
.hero p { max-width:600px; margin-bottom:0; }
.crumb { display:flex; align-items:center; gap:8px; padding:24px 0 22px; font-size:14px; line-height:20px; flex-wrap:wrap; }
.crumb a { color:#a8b5bd; text-decoration:none; }
.crumb a:hover { color:white; text-decoration:underline; }
.eyebrow { font-family:Figtree,sans-serif; font-size:18px; font-weight:700; line-height:30px; color:var(--aqua); }
.hero-meta { display:flex; gap:8px; align-items:center; color:#a8b5bd; font-size:14px; margin-bottom:16px; }
.hero-meta .track { background:transparent; border:1px solid currentColor; }
.hero-meta .srm { color:#ffb784; }
.hero-meta .tco { color:#d4bbff; }
.hero-meta .other { color:#a7f0ba; }
.page-problem .hero { padding-bottom:32px; }
main.wrap { padding-top:72px; padding-bottom:96px; min-height:30vh; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.card,.panel { background:white; border:1px solid var(--line); border-radius:8px; padding:24px; }
.card { display:flex; flex-direction:column; align-items:flex-start; }
.card h2 { margin-bottom:8px; line-height:28px; }
.card p { margin-bottom:16px; }
.card .button { margin-top:auto; }
.card-icon { width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:#e5f2f1; margin-bottom:16px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:38px; padding:7px 24px; border:1px solid var(--teal); border-radius:4px; background:var(--teal); color:white; text-decoration:none; font-weight:700; cursor:pointer; }
.button:hover { color:white; background:#005d59; }
.button.secondary { background:transparent; color:var(--teal); }
.button.secondary:hover { background:#e5f2f1; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:32px; }
.section-heading h2 { font-size:32px; line-height:40px; margin:0; }
.section-heading p { margin:0; color:var(--muted); font-size:14px; }
.note { font-size:14px; line-height:20px; margin:32px 0 0; }
#search-status:empty { display:none; }
#search-status:not(:empty) { margin:0 0 32px; }
.filterbar { display:grid; grid-template-columns:minmax(0,1fr) 240px 240px; gap:16px; padding:24px; background:white; border-radius:8px; margin-bottom:32px; }
.field { min-width:0; }
.field label { display:block; font-size:14px; font-weight:700; line-height:22px; margin-bottom:4px; }
.field input,.field select { width:100%; border:1px solid var(--line); border-radius:4px; background:white; height:48px; padding:10px 16px; color:var(--ink); }
.field select,#page-size { appearance:none; background:white url('/assets/pm6556/d1356.svg') no-repeat right 12px center; padding-right:40px; }
.search-input { position:relative; }
.search-input>.icon { position:absolute; left:16px; top:14px; pointer-events:none; }
.search-input input { padding-left:40px; }
.listing { display:grid; gap:8px; }
.problem-card { display:grid; grid-template-columns:minmax(0,324fr) minmax(0,358fr) minmax(0,178fr) auto; align-items:center; gap:24px; min-height:106px; padding:24px; background:white; border:1px solid var(--line); border-radius:8px; text-decoration:none; color:var(--ink); transition:border-color .15s,box-shadow .15s; }
.problem-card:hover { border-color:var(--teal); box-shadow:0 3px 12px #001e2e10; color:var(--ink); }
.problem-card h2 { font-size:20px; line-height:30px; margin:0 0 8px; overflow-wrap:anywhere; }
.problem-summary { min-width:0; }
.problem-card .open { display:flex; align-items:center; gap:4px; color:var(--teal); font-weight:700; white-space:nowrap; }
.meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:14px; line-height:20px; }
.track { display:inline-flex; align-items:center; justify-content:center; flex:none; padding:2px 4px; border-radius:2px; font-size:11px; line-height:16px; font-weight:600; }
.track.srm { background:#ffd9be; color:#5e2900; }
.track.tco { background:#e8daff; color:#491d8b; }
.track.other { background:#a7f0ba; color:#044317; }
.topic-tags { display:flex; gap:8px; flex-wrap:wrap; min-width:0; }
.topic-tags span { display:inline-block; padding:4px; border-radius:2px; background:#e9ecef; font-size:14px; line-height:16px; overflow-wrap:anywhere; }
.difficulty-tags { display:flex; gap:6px; flex-wrap:wrap; }
.badge { display:inline-block; font-size:14px; line-height:20px; }
.problem-card .difficulty-tags { flex-direction:column; }
.pagination-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:16px; }
.page-info { display:flex; align-items:center; gap:16px; font-size:12px; line-height:16px; }
.page-info label { display:flex; align-items:center; gap:8px; padding-right:16px; border-right:1px solid var(--line); }
#page-size { font-size:12px; font-weight:700; width:52px; padding:10px 24px 10px 4px; border:0; background-color:transparent; background-position:right center; }
.pagination { display:flex; align-items:center; gap:8px; }
.pagination a,.pagination button,.pagination>span { display:flex; align-items:center; justify-content:center; min-width:32px; min-height:32px; padding:2px 6px; border:1px solid var(--line); border-radius:4px; background:white; text-decoration:none; font-size:14px; color:var(--ink); }
.pagination a,.pagination button { cursor:pointer; }
.pagination [aria-current] { background:var(--teal); color:white; border-color:var(--teal); }
.pagination button:disabled,.pagination [aria-disabled] { opacity:.45; cursor:default; background:#f4f4f4; }
.pagination .ellipsis { border:0; background:transparent; padding:0; min-width:16px; }
.year-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.year-card { background:white; border:1px solid var(--line); border-radius:8px; padding:24px; text-decoration:none; color:var(--ink); }
.year-card:hover { border-color:var(--teal); }
.year-card h2 { color:var(--teal); margin-bottom:12px; }
.year-card p { font-size:14px; margin:0; }
.problem-layout { display:grid; grid-template-columns:minmax(0,1fr) 286px; gap:24px; align-items:start; }
.problem-body { min-width:0; }
.problem-body article>div { background:white; border:1px solid var(--line); border-radius:8px; padding:24px; margin-bottom:16px; overflow-wrap:anywhere; }
.problem-body article h3 { margin-bottom:16px; }
.problem-body article h4 { margin:24px 0 12px; }
.problem-body article img { max-width:100%; height:auto; }
.problem-body article table { max-width:100%; border-collapse:collapse; display:block; overflow-x:auto; }
.problem-body article td,.problem-body article th { border:1px solid var(--line); padding:8px 12px; }
.problem-body article pre { font:16px/1.375 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; background:var(--paper); border-radius:4px; padding:8px; margin:16px 0; }
.problem-body article code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.9em; }
.problem-body article dl { display:grid; grid-template-columns:194px minmax(0,1fr); gap:24px 16px; margin:0; }
.problem-body article dt { font-weight:700; }
.problem-body article dd { margin:0; overflow-wrap:anywhere; }
.problem-body article ul,.problem-body article ol { padding-left:24px; }
.problem-body article li { margin-bottom:12px; }
.problem-body article ol>li { padding:0 0 24px 16px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.problem-body article ol>li:last-child { border:0; margin-bottom:0; padding-bottom:0; }
.problem-body article ol>li>div>div { white-space:pre-wrap; }
.sidebar { position:sticky; top:24px; display:flex; flex-direction:column; gap:16px; }
.sidebar .toc { order:-1; }
.sidebar h2 { font-size:20px; line-height:30px; margin-bottom:16px; }
.sidebar ul { list-style:none; padding:0; margin:0; }
.sidebar li { margin:12px 0; }
.sidebar a { font-size:14px; text-decoration:none; }
.sidebar a:hover { text-decoration:underline; }
.sidebar p { font-size:14px; margin-bottom:12px; }
.sidebar dl { font-size:14px; margin:0; }
.sidebar dt { font-weight:700; margin-top:16px; }
.sidebar dt:first-child { margin-top:0; }
.sidebar dd { margin:4px 0 0; }
.sidebar dl+h2 { font-family:'Nunito Sans',sans-serif; font-size:14px; line-height:20px; margin:16px 0 4px; }
.sidebar .difficulty-tags { margin-top:4px; }
.legal { font-size:12px; line-height:20px; margin:16px 0; }
.empty { padding:50px 24px; text-align:center; background:white; border:1px solid var(--line); border-radius:8px; }
.footer { background:var(--navy); color:white; padding:80px 0; }
.footer-brand { display:block; position:relative; width:218px; height:52px; margin-bottom:40px; }
.footer-brand img { position:absolute; display:block; }
.footer-wordmark { left:40.26%; top:5.08%; }
.footer-symbol { left:0; top:.13%; }
.footer-company { left:76.63%; top:80.92%; }
.footer-wipro { left:59.54%; top:75.76%; }
.footer-a { left:55.23%; top:80.92%; }
.footer-columns { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:40px; border-top:1px solid #ffffff66; border-bottom:1px solid #ffffff66; padding:40px 0; }
.footer h2 { font:400 16px/22px 'Nunito Sans',sans-serif; margin:0 0 16px; }
.footer p { font-size:14px; line-height:20px; margin-bottom:24px; }
.footer-about p:last-child { margin:0; }
.footer nav>a { display:block; color:white; text-decoration:none; font-size:14px; line-height:20px; margin-bottom:8px; padding:8px 0; }
.footer nav>a:hover { text-decoration:underline; }
.footer nav>.button { padding:8px 24px; font-size:16px; }
.social-links { display:flex; align-items:center; gap:8px; margin:16px 0; }
.social-links a { display:flex; align-items:center; justify-content:center; min-height:24px; min-width:24px; }
.footer .copyright { margin:40px 0 0; font-size:16px; line-height:22px; }
[hidden] { display:none!important; }
@media(max-width:1050px) {
  .filterbar { grid-template-columns:minmax(0,1fr) 190px 190px; }
  .problem-card { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.7fr) auto; gap:16px; }
  .footer-columns { grid-template-columns:repeat(3,1fr); gap:24px; }
  .footer-about { grid-column:1/-1; }
  .hero-art { right:-180px; opacity:.6; }
}
@media(max-width:850px) {
  .wrap { padding-left:24px; padding-right:24px; }
  .problem-layout { grid-template-columns:1fr; }
  .sidebar { position:static; order:-1; }
  .sidebar .toc { display:none; }
  .sidebar dl { display:flex; gap:24px; flex-wrap:wrap; }
  .sidebar dt { margin-top:0; }
  .filterbar { grid-template-columns:1fr 1fr; }
  .filterbar .field:first-child { grid-column:1/-1; }
  .problem-card { grid-template-columns:minmax(0,1fr) auto; gap:12px 20px; }
  .problem-summary { grid-column:1; }
  .problem-card .open { grid-column:2; grid-row:1/4; }
  .problem-card .topic-tags,.problem-card .difficulty-tags { grid-column:1; }
  .problem-card .difficulty-tags { flex-direction:row; gap:8px 16px; }
  .year-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pagination-bar { align-items:flex-start; flex-direction:column; gap:16px; }
  .pagination { align-self:flex-end; }
}
@media(max-width:560px) {
  .wrap { padding-left:20px; padding-right:20px; }
  .topbar .wrap { gap:16px; }
  .app-name { padding-left:16px; }
  .visit-topcoder { font-size:12px; gap:4px; }
  .visit-topcoder .icon { display:none; }
  .archive-name { display:none; }
  .subnav .wrap { justify-content:center; }
  .subnav nav { width:100%; justify-content:space-between; }
  .subnav nav a { padding:16px 4px; font-size:14px; }
  .hero { padding-bottom:32px; min-height:0; }
  .hero-art { right:-450px; opacity:.25; }
  h1 { font-size:28px; line-height:36px; }
  .crumb { padding-top:20px; padding-bottom:20px; }
  main.wrap { padding-top:32px; padding-bottom:48px; }
  .grid,.year-grid { grid-template-columns:1fr; }
  .card,.panel { padding:24px; }
  .filterbar { padding:20px; grid-template-columns:1fr; gap:16px; }
  .filterbar .field:first-child { grid-column:auto; }
  .section-heading { margin-bottom:24px; flex-direction:column; align-items:flex-start; gap:8px; }
  .section-heading h2 { font-size:28px; line-height:36px; }
  .problem-card { padding:20px; gap:12px; }
  .problem-card h2 { font-size:20px; }
  .problem-card .open { font-size:0; }
  .meta { font-size:12px; }
  .problem-body article>div { padding:20px; }
  .problem-body article dl { grid-template-columns:1fr; gap:4px; }
  .problem-body article dd { margin-bottom:12px; }
  .pagination { align-self:stretch; justify-content:center; gap:4px; flex-wrap:wrap; }
  .pagination a,.pagination button,.pagination>span { min-width:30px; }
  .page-info { gap:12px; flex-wrap:wrap; }
  .footer { padding:48px 0; }
  .footer-columns { grid-template-columns:1fr 1fr; }
  .footer nav:last-child { grid-column:1/-1; }
  .footer nav>.button { width:max-content; }
}