:root:root {
  color-scheme:light;
  --background-l0:#f0f3f8; --background-l1:#fff; --background-l2:#e6edf6;
  --background-l3:#d8e4f2; --background-l4:#ccdced; --background-l5:#b8cce2;
  --foreground-l0:#142841; --foreground-l1:#4c6178; --foreground-l2:#536b84;
  --foreground-l3:#5a7189; --foreground-l4:#5a7189; --foreground-l5:#5a7189;
  --foreground-prose:#4c6178; --foreground-prose-link:#255acc;
  --background-accent:#e0eaff; --background-accent-hover:#cfddfc; --foreground-accent:#2555b2;
  --border:#d9e2ed; --ring:#335fce;
  --radius-sm:6px; --radius-md:10px; --radius-lg:12px;
}
:root:root[data-theme='dark'] {
  color-scheme:dark;
  --background-l0:#0d1726; --background-l1:#152338; --background-l2:#1c3049;
  --background-l3:#28405b; --background-l4:#344e69; --background-l5:#415f7e;
  --foreground-l0:#edf3fc; --foreground-l1:#b6c6da; --foreground-l2:#a2b7d0;
  --foreground-l3:#94abc5; --foreground-l4:#94abc5; --foreground-l5:#94abc5;
  --foreground-prose:#b6c6da; --foreground-prose-link:#a2bfff;
  --background-accent:#233c68; --background-accent-hover:#2d4d85; --foreground-accent:#b3cdff;
  --border:#2c3d56; --ring:#96b6ff;
}
body { background:var(--background-l0); color:var(--foreground-l0); }
header[class] { background:var(--background-l1); border-bottom:1px solid var(--border); }
header nav a::after { font:500 14px var(--font-sans); margin-left:9px; }
header nav a[aria-label='Home']::after { content:'Главная'; }
header nav a[aria-label='Challenges']::after { content:'Задания'; }
header nav a[aria-label='Scoreboard']::after { content:'Рейтинг'; }
header nav-end > a[aria-label='Login']::after { content:'Войти'; font:500 14px var(--font-sans); margin-left:9px; }
header nav a svg { font-size:20px; }
home-page[class][class] { inline-size:min(1240px,100%); max-inline-size:none; width:min(1240px,100%); margin:0 auto; padding:56px 36px 24px; }
home-page > ui-card[class][class] { inline-size:100%; max-inline-size:none; width:100%; max-width:none; border:0; border-radius:0; background:transparent; padding:0; }
home-page prose-content { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); column-gap:64px; }
home-page prose-content > h1 { grid-column:1; grid-row:1; font-size:clamp(40px,4.8vw,62px); font-weight:600; letter-spacing:-.045em; line-height:1.08; margin:24px 0; text-wrap:balance; }
home-page prose-content > p:first-of-type { grid-column:1; grid-row:2; font-size:18px; line-height:1.7; max-width:560px; margin:0 0 28px; }
home-page prose-content > p:has(a[href='/challenges']) { grid-column:1; grid-row:3; display:flex; flex-wrap:wrap; gap:12px; align-items:start; margin:0 0 18px; }
home-page prose-content > p:has(a[href='/challenges']) a { background:#2859ce; color:white; border:1px solid #2859ce; padding:12px 22px; font-size:15px; font-weight:500; min-height:48px; border-radius:8px; text-decoration:none; }
home-page prose-content > p:has(a[href='/challenges']) a:hover { background:#1c46ad; }
home-page prose-content > p:has(a[href='/challenges']) a+a { color:var(--foreground-l0); background:var(--background-l1); border-color:var(--border); }
home-page prose-content > blockquote { grid-column:2; grid-row:1 / span 3; border:0; border-radius:18px; background:#172d4d; padding:30px 32px; margin:0; align-self:stretch; display:flex; flex-direction:column; justify-content:center; box-shadow:0 14px 32px #10284812; }
home-page prose-content > blockquote strong { font-size:15px; font-weight:500; color:#afc2e0; }
home-page prose-content > blockquote p { color:#f5f8ff; font-size:24px; line-height:1.2; letter-spacing:-.02em; padding:15px 0; margin:0; border-bottom:1px solid #314767; }
home-page prose-content > blockquote p:first-child { padding-top:0; border:0; }
home-page prose-content > blockquote p:last-child { color:#afc2e0; font-size:13px; padding-bottom:0; border:0; letter-spacing:0; }
home-page prose-content > h2 { grid-column:1/-1; font-size:23px; font-weight:550; letter-spacing:-.025em; margin:46px 0 22px; }
home-page prose-content > ul { grid-column:1/-1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; list-style:none; padding:0; margin:0; }
home-page prose-content > ul li { position:relative; background:var(--background-l1); border:1px solid var(--border); border-radius:12px; padding:24px 20px; font-size:14px; line-height:1.65; margin:0; }
home-page prose-content > ul li::before { display:flex; width:34px; height:34px; justify-content:center; align-items:center; color:var(--foreground-accent); background:var(--background-accent); border-radius:8px; margin-bottom:20px; font:500 17px var(--font-mono); }
home-page prose-content > ul li:nth-child(1)::before { content:'</>'; }
home-page prose-content > ul li:nth-child(2)::before { content:'#'; }
home-page prose-content > ul li:nth-child(3)::before { content:'{}'; }
home-page prose-content > ul li:nth-child(4)::before { content:'[]'; }
home-page prose-content > ul li:nth-child(5)::before { content:'*'; }
home-page prose-content > ul li:has(a:hover) { border-color:var(--ring); }
home-page prose-content > ul strong { display:block; font-size:19px; margin-bottom:9px; }
home-page prose-content > ul a { color:var(--foreground-l0); text-decoration:none; }
home-page prose-content > ul a::after { content:''; position:absolute; inset:0; border-radius:12px; }
home-page prose-content > ol { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; list-style:decimal; padding:0 0 22px 20px; margin:0; }
home-page prose-content > ol li { padding-left:5px; margin:0; font-size:14px; line-height:1.7; }
home-page prose-content > ol li strong { font-size:15px; display:block; margin-bottom:4px; }
home-page prose-content > p:last-child { grid-column:1/-1; font-size:13px; color:var(--foreground-l2); border-top:1px solid var(--border); padding-top:20px; margin:14px 0 0; }
home-page footer[class] { font-size:12px; color:var(--foreground-l3); margin:24px 0 0; text-align:left; }
:focus-visible { outline:2px solid var(--ring); outline-offset:4px; }
::selection { background:#b8cfff; color:#142841; }
@media(max-width:1100px) { header nav a::after { display:none; } home-page prose-content { column-gap:36px; } home-page prose-content > ul { gap:10px; } home-page prose-content > ul li { padding:20px 15px; } }
@media(max-width:900px) { home-page prose-content > ul { grid-template-columns:repeat(3,minmax(0,1fr)); } home-page prose-content { column-gap:28px; } }
@media(max-width:700px) {
  home-page[class][class] { padding:28px 20px 24px; }
  home-page prose-content { display:block; }
  home-page prose-content > h1 { font-size:clamp(28px,8.5vw,36px); margin:10px 0 22px; }
  home-page prose-content > p:first-of-type { font-size:17px; }
  home-page prose-content > p:has(a[href='/challenges']) { margin-bottom:28px; }
  home-page prose-content > blockquote { padding:24px; }
  home-page prose-content > blockquote p { font-size:21px; }
  home-page prose-content > ul { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  home-page prose-content > ul li { padding:20px 16px; }
  home-page prose-content > ol { grid-template-columns:1fr; gap:18px; }
  home-page prose-content > h2 { margin-top:32px; }
}