/* SEO-страницы заданий (/ege/): единый дизайн сайта.
   Токены — те же, что в about.html/status.html (источник правды — about.html).
   Шрифты — общие вендорные. Шапка/подвал — site-header.css/footer.css.
   Окно примера задания повторяет единое окно практики приложения
   (css/styles.css: .task-card, .hint-box, .feedback, .answer-row) —
   те же состояния, чуть адаптированные под страницу без входа. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/vendor/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/vendor/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/vendor/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/vendor/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD;}

:root,
:root[data-theme="light"]{
  --surface-0:#F3F5FA;--surface-1:#FFFFFF;--surface-2:#FFFFFF;
  --text:#0E1526;--text-dim:#48536B;--text-faint:#5B6579;
  --accent:#0277B6;--accent-dim:rgba(2,119,182,0.10);
  --green:#16a34a;--green-dim:rgba(21,128,61,0.10);--brand:#16a34a;
  --danger:#dc2626;--danger-dim:rgba(220,38,38,0.08);
  --gold:#B45309;--gold-dim:rgba(180,83,9,0.08);
  --hairline:rgba(15,23,42,0.08);
  --card-border:rgba(15,23,42,0.10);--card-border-hover:rgba(15,23,42,0.20);
  --sheen:rgba(15,23,42,0.03);--inset-line:rgba(15,23,42,0.05);
  --muted-bg:rgba(15,23,42,0.06);--muted-border:rgba(15,23,42,0.12);
  --glow-accent:rgba(2,119,182,0.14);--glow-green:rgba(22,163,74,0.12);
  --hint-bg:rgba(180,83,9,0.06);--hint-border:rgba(180,83,9,0.22);--hint-ink:#7C4A03;
  --shadow-sm:0 1px 2px rgba(15,23,42,0.06),0 16px 32px -20px rgba(15,23,42,0.22);
  --shadow-lg:0 1px 2px rgba(15,23,42,0.05),0 32px 64px -28px rgba(15,23,42,0.28);
  --radius-pill:999px;--radius-lg:20px;--radius-md:14px;--radius-xl:26px;
  --font-body:'Inter',-apple-system,system-ui,sans-serif;
  --font-display:'Manrope',var(--font-body);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}
:root[data-theme="dark"]{
  --surface-0:#05070C;--surface-1:#0A0D12;--surface-2:#0F131C;
  --text:#F8F9FB;--text-dim:#A0A6B8;--text-faint:#666D82;
  --accent:#38BDF8;--accent-dim:rgba(56,189,248,0.15);
  --green:#6EE7B7;--green-dim:rgba(110,231,183,0.15);--brand:#6EE7B7;
  --danger:#F87171;--danger-dim:rgba(248,113,113,0.12);
  --gold:#FBBF24;--gold-dim:rgba(251,191,36,0.10);
  --hairline:rgba(255,255,255,0.06);
  --card-border:rgba(255,255,255,0.08);--card-border-hover:rgba(255,255,255,0.12);
  --sheen:rgba(255,255,255,0.04);--inset-line:rgba(255,255,255,0.06);
  --muted-bg:rgba(255,255,255,0.06);--muted-border:rgba(255,255,255,0.1);
  --glow-accent:rgba(56,189,248,0.15);--glow-green:rgba(110,231,183,0.10);
  --hint-bg:rgba(251,191,36,0.07);--hint-border:rgba(251,191,36,0.22);--hint-ink:#FCD34D;
  --shadow-sm:0 20px 40px -20px rgba(0,0,0,0.5);
  --shadow-lg:0 32px 64px -28px rgba(0,0,0,0.6);
  --radius-pill:999px;--radius-lg:20px;--radius-md:14px;--radius-xl:26px;
  --font-body:'Inter',-apple-system,system-ui,sans-serif;
  --font-display:'Manrope',var(--font-body);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;color-scheme:light;-webkit-font-smoothing:antialiased;}
html[data-theme="dark"]{color-scheme:dark;}
body{margin:0;background:var(--surface-0);color:var(--text);
  font-family:var(--font-body);font-size:clamp(15px,1.8vw,17px);
  line-height:1.6;overflow-x:hidden;min-width:0;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}
.wrap{max-width:960px;margin:0 auto;padding:0 clamp(20px,4vw,32px);min-width:0;}
main{padding-bottom:clamp(48px,8vw,80px);}
.seo-page{min-width:0;}

/* ---------- подшапка: хлебные крошки под общей шапкой сайта ----------
   Врезная карточка ровно по ширине контента (те же поля, что у .wrap),
   а не полоса во всю ширину: край не упирается в экран. */
.seo-bar{background:none;border-bottom:none;}
.seo-bar__inner{max-width:calc(960px - 2*clamp(20px,4vw,32px));
  width:calc(100% - 2*clamp(20px,4vw,32px));
  margin:clamp(12px,2.5vw,18px) auto 0;padding:10px clamp(14px,2.5vw,20px);
  background:linear-gradient(180deg,var(--sheen) 0%,transparent 100%),var(--surface-1);
  border:1px solid var(--hairline);border-radius:var(--radius-md);
  box-shadow:0 1px 0 var(--inset-line) inset;min-width:0;}
.seo-crumb{display:flex;gap:4px;flex-wrap:wrap;align-items:center;
  font-size:clamp(12.5px,1.6vw,14px);color:var(--text-faint);}
.seo-crumb a{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--radius-pill);
  color:var(--text-dim);border:1px solid transparent;white-space:nowrap;
  transition:color 0.2s var(--ease-out),background 0.2s var(--ease-out),border-color 0.2s var(--ease-out);}
.seo-crumb a:hover{color:var(--text);background:var(--muted-bg);border-color:var(--hairline);}
.seo-crumb__sep{color:var(--text-faint);opacity:0.7;user-select:none;}
.seo-crumb__here{padding:6px 12px;border-radius:var(--radius-pill);white-space:nowrap;
  background:var(--accent-dim);border:1px solid var(--muted-border);
  color:var(--accent);font-weight:600;}

/* ---------- hero ---------- */
.seo-hero{position:relative;padding:clamp(36px,6vw,64px) 0 clamp(20px,3vw,28px);
  /* overflow:clip (а не hidden): свечения ::before/::after шире hero
     (640/520px) и без обрезки расползали layout до 660px на мобильном —
     документ становился шире экрана: Chrome разрешал pinch-zoom-out до
     0.59 с серыми полями, хотя страница и так влезает. clip, в отличие
     от банального среза, ещё и не создаёт scroll-контейнер. */
  overflow:clip;}
.seo-hero::before{content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:min(640px,100%);height:640px;max-height:120%;
  background:radial-gradient(circle,var(--glow-green) 0%,transparent 70%);
  filter:blur(90px);pointer-events:none;}
.seo-hero::after{content:'';position:absolute;top:10%;right:0;
  width:min(520px,80%);height:520px;max-height:100%;
  background:radial-gradient(circle,var(--glow-accent) 0%,transparent 70%);
  filter:blur(90px);pointer-events:none;}
.seo-hero>*{position:relative;z-index:1;}
.seo-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(14px,2.5vw,20px);}
.seo-badge{display:inline-flex;align-items:center;padding:8px 16px;border-radius:var(--radius-pill);
  background:var(--surface-1);border:1px solid var(--muted-border);color:var(--text-dim);
  font-size:clamp(12.5px,1.6vw,14px);font-weight:600;box-shadow:0 1px 0 var(--inset-line) inset;}
.seo-badge--accent{background:var(--accent-dim);border-color:var(--muted-border);color:var(--accent);}
h1{font-family:var(--font-display);font-size:clamp(28px,6vw,46px);font-weight:700;line-height:1.14;
  letter-spacing:-0.02em;margin:0 0 clamp(14px,2.5vw,20px);overflow-wrap:anywhere;}
h2{font-family:var(--font-display);font-size:clamp(22px,4vw,30px);font-weight:700;letter-spacing:-0.02em;
  margin:clamp(28px,5vw,44px) 0 clamp(10px,2vw,14px);overflow-wrap:anywhere;}
h3{font-family:var(--font-display);font-size:clamp(17px,2.4vw,20px);font-weight:600;margin:0 0 10px;}
p{overflow-wrap:anywhere;}
.seo-hero__lead{font-size:clamp(15px,2vw,18px);color:var(--text-dim);line-height:1.7;
  margin:0 0 clamp(20px,3vw,28px);max-width:640px;}
.seo-cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:clamp(20px,3vw,28px) 0;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:clamp(13px,2vw,16px) clamp(24px,4vw,32px);border-radius:var(--radius-pill);
  font-weight:600;font-size:clamp(14px,1.8vw,16px);cursor:pointer;border:none;white-space:nowrap;
  transition:transform 0.3s var(--ease-out),box-shadow 0.3s var(--ease-out);font-family:var(--font-body);}
.btn--sm{padding:9px 18px;font-size:clamp(13px,1.7vw,14.5px);}
.btn-primary{background:linear-gradient(135deg,#38BDF8 0%,#3B82F6 50%,#2563EB 100%);color:#fff;
  box-shadow:0 16px 32px -12px rgba(56,189,248,0.5);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-primary:disabled{opacity:0.55;cursor:default;transform:none;}
.btn-ghost{background:transparent;border:1px solid var(--muted-border);color:var(--text-dim);
  box-shadow:none;}
.btn-ghost:hover{color:var(--text);border-color:var(--card-border-hover);background:var(--muted-bg);}

/* ---------- «Что проверяется»: текст + панель фактов ---------- */
.seo-facts{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(12px,2vw,20px);margin-top:clamp(8px,2vw,14px);}
.seo-facts__about,.seo-facts__panel{
  background:linear-gradient(180deg,var(--sheen) 0%,transparent 100%),var(--surface-2);
  border:1px solid var(--card-border);border-radius:var(--radius-lg);
  padding:clamp(20px,3.5vw,28px);box-shadow:0 1px 0 var(--inset-line) inset,var(--shadow-sm);min-width:0;}
.seo-facts__about h2{margin:0 0 clamp(10px,2vw,14px);}
.seo-facts__about p{margin:0 0 10px;color:var(--text-dim);line-height:1.7;}
.seo-facts__note{font-size:clamp(13.5px,1.7vw,14.5px);}
.seo-facts__panel{display:flex;flex-direction:column;justify-content:center;gap:0;padding:clamp(8px,2vw,14px) clamp(16px,2.5vw,22px);}
.seo-fact{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:clamp(9px,1.6vw,12px) 0;border-bottom:1px solid var(--hairline);}
.seo-fact:last-child{border-bottom:none;}
.seo-fact span{color:var(--text-faint);font-size:clamp(12px,1.5vw,13px);white-space:nowrap;}
.seo-fact b{font-weight:600;font-size:clamp(13.5px,1.7vw,14.5px);text-align:right;overflow-wrap:anywhere;}

/* ---------- единое окно примера задания ---------- */
.seo-window{background:linear-gradient(180deg,var(--sheen) 0%,transparent 100%),var(--surface-2);
  border:1px solid var(--card-border);border-radius:var(--radius-lg);
  padding:clamp(20px,3.5vw,28px);margin:clamp(16px,3vw,24px) 0;
  box-shadow:0 1px 0 var(--inset-line) inset,var(--shadow-sm);}
.seo-window__tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.seo-tag{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--radius-pill);
  background:var(--muted-bg);border:1px solid var(--hairline);color:var(--text-dim);
  font-size:clamp(11.5px,1.5vw,13px);font-weight:600;white-space:nowrap;}
.seo-tag--accent{background:var(--accent-dim);border-color:var(--muted-border);color:var(--accent);}
.seo-tag--points{margin-left:auto;background:var(--green-dim);border-color:transparent;color:var(--green);}
.seo-stars{display:inline-flex;gap:2px;font-size:clamp(12px,1.6vw,14px);color:var(--gold);}
.seo-stars__off{color:var(--muted-border);}
.seo-window__text{font-size:clamp(15.5px,1.9vw,17px);line-height:1.7;white-space:pre-line;
  overflow-wrap:anywhere;}
.seo-window__note{font-size:clamp(12px,1.5vw,13px);color:var(--text-faint);
  margin-bottom:clamp(12px,2vw,16px);}
.seo-window__tools .seo-window__note{margin:0 0 0 auto;}
.seo-hints{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.seo-hint{padding:14px 18px;border-radius:var(--radius-md);
  background:var(--hint-bg);border:1px solid var(--hint-border);color:var(--hint-ink);
  font-size:clamp(13.5px,1.7vw,14.5px);line-height:1.65;overflow-wrap:anywhere;
  animation:seo-in 0.25s var(--ease-out);}
.seo-hint--first{background:var(--hint-bg);}
.seo-hint:not(.seo-hint--first){background:var(--accent-dim);border-color:var(--muted-border);
  color:var(--text-dim);}
.seo-hint b{color:inherit;}
@keyframes seo-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.seo-window__answer{margin-top:clamp(14px,2.5vw,18px);}
.answer-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.answer-input{flex:1 1 200px;max-width:320px;padding:12px 16px;
  border:1px solid var(--muted-border);border-radius:var(--radius-md);
  background:var(--surface-1);color:var(--text);font:inherit;
  transition:border-color 0.2s var(--ease-out),box-shadow 0.2s var(--ease-out);}
.answer-input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);}
.answer-input--correct{border-color:var(--green);box-shadow:0 0 0 3px var(--green-dim);}
.answer-input--wrong{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-dim);}
.seo-check__caption{font-size:clamp(11.5px,1.5vw,12.5px);color:var(--text-faint);margin-top:8px;}
.seo-reveal-btn{margin-top:2px;}
.seo-window__tools{margin-top:clamp(12px,2vw,16px);display:flex;gap:10px;flex-wrap:wrap;align-items:center;}

/* фидбек — те же состояния, что .feedback в приложении */
.seo-feedback{margin-top:clamp(12px,2vw,16px);}
.seo-feedback__box{padding:16px 18px;border-radius:var(--radius-md);
  border:1px solid var(--card-border);background:var(--surface-1);
  animation:seo-in 0.25s var(--ease-out);overflow-wrap:anywhere;}
.seo-feedback__head{display:flex;align-items:center;gap:10px;font-weight:700;
  font-size:clamp(14px,1.8vw,15px);}
.seo-feedback--ok .seo-feedback__head{color:var(--green);}
.seo-feedback--bad .seo-feedback__head{color:var(--danger);}
.seo-feedback--shown .seo-feedback__head{color:var(--accent);}
.seo-feedback__body{margin-top:10px;font-size:clamp(13.5px,1.7vw,14.5px);
  color:var(--text-dim);line-height:1.65;}
.seo-feedback__solution{margin-top:12px;font-size:clamp(13.5px,1.7vw,14.5px);
  color:var(--text-dim);line-height:1.65;white-space:pre-line;}
.seo-feedback__solution b{color:var(--text);}
.seo-feedback__actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.seo-solution__row{margin-top:10px;line-height:1.65;}
.seo-solution__row b{color:var(--text);}
.seo-solution__row p{margin:4px 0 0;color:var(--text-dim);white-space:pre-line;}
.seo-solution{display:none;}
.seo-solution[hidden]{display:none;}

/* ---------- «Как устроена практика» — карточки вместо FAQ ---------- */
.seo-features{margin-top:clamp(8px,2vw,14px);}
.seo-features__grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2vw,20px);margin-top:clamp(10px,2vw,16px);}
.seo-feature{background:linear-gradient(180deg,var(--sheen) 0%,transparent 100%),var(--surface-2);
  border:1px solid var(--card-border);border-radius:var(--radius-md);
  padding:clamp(16px,2.5vw,22px);min-width:0;box-shadow:0 1px 0 var(--inset-line) inset,var(--shadow-sm);}
.seo-feature b{display:block;font-family:var(--font-display);
  font-size:clamp(15px,2vw,17px);font-weight:700;margin-bottom:8px;overflow-wrap:anywhere;}
.seo-feature p{margin:0;color:var(--text-dim);font-size:clamp(13px,1.7vw,14.5px);line-height:1.65;}

/* ---------- финальный CTA — как блок .cta на about.html ---------- */
.seo-cta{margin-top:clamp(28px,5vw,48px);position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--sheen) 0%,transparent 100%),var(--surface-2);
  border:1px solid var(--card-border);border-radius:var(--radius-xl);
  padding:clamp(32px,6vw,56px) clamp(20px,4vw,36px);text-align:center;
  box-shadow:0 1px 0 var(--inset-line) inset,var(--shadow-lg);}
.seo-cta::before{content:'';position:absolute;top:-50%;left:20%;width:60%;height:100%;
  background:radial-gradient(ellipse,var(--glow-accent) 0%,transparent 60%);
  filter:blur(60px);pointer-events:none;}
.seo-cta__inner{position:relative;z-index:1;max-width:560px;margin:0 auto;}
.seo-cta__title{font-family:var(--font-display);font-size:clamp(22px,4.5vw,34px);
  font-weight:700;letter-spacing:-0.02em;margin-bottom:10px;overflow-wrap:anywhere;}
.seo-cta__text{color:var(--text-dim);margin:0 0 clamp(20px,4vw,28px);overflow-wrap:anywhere;}
.seo-cta__row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}

/* ---------- хаб предмета: карточки номеров ---------- */
.seo-nums{list-style:none;margin:clamp(10px,2vw,18px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.8vw,14px);min-width:0;}
.seo-num,.seo-subj{display:flex;align-items:center;gap:clamp(12px,2vw,16px);
  background:linear-gradient(180deg,var(--sheen) 0%,transparent 100%),var(--surface-2);
  border:1px solid var(--card-border);border-radius:var(--radius-md);
  padding:clamp(12px,2vw,16px) clamp(14px,2.5vw,18px);min-width:0;
  box-shadow:0 1px 0 var(--inset-line) inset,var(--shadow-sm);
  transition:border-color 0.3s var(--ease-out),transform 0.3s var(--ease-out),box-shadow 0.3s var(--ease-out);}
.seo-num:hover,.seo-subj:hover{border-color:var(--card-border-hover);transform:translateY(-2px);
  box-shadow:0 1px 0 var(--inset-line) inset,var(--shadow-sm),0 0 0 4px var(--accent-dim);}
.seo-num__badge,.seo-subj__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:clamp(40px,5.5vw,48px);height:clamp(40px,5.5vw,48px);border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--accent-dim),var(--green-dim));
  color:var(--accent);font-family:var(--font-display);font-weight:700;
  font-size:clamp(15px,2.2vw,18px);box-shadow:0 0 0 1px var(--inset-line) inset;}
.seo-num__body,.seo-subj__body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.seo-num__name,.seo-subj__name{font-weight:600;font-size:clamp(13.5px,1.8vw,15.5px);
  overflow-wrap:anywhere;}
.seo-num__meta,.seo-subj__meta{color:var(--text-faint);font-size:clamp(11.5px,1.5vw,13px);
  overflow-wrap:anywhere;}
.seo-num__arrow{margin-left:auto;flex-shrink:0;color:var(--text-faint);
  transition:transform 0.3s var(--ease-out),color 0.3s var(--ease-out);}
.seo-num:hover .seo-num__arrow,.seo-subj:hover .seo-num__arrow{transform:translateX(4px);color:var(--accent);}

@media (max-width:720px){
  .seo-facts{grid-template-columns:1fr;}
  .seo-features__grid{grid-template-columns:1fr;}
  .seo-nums{grid-template-columns:1fr;}
  .seo-tag--points{margin-left:0;}
}
@media (max-width:480px){
  .seo-cta-row .btn{width:100%;}
  .seo-cta__row .btn{width:100%;}
  .answer-row .btn{width:100%;}
  .answer-input{max-width:none;flex-basis:100%;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
}