/* БЛОГ квиза «Угадай, подумай, удивись»: те же шрифты, цвета и толстые обводки, что на лендинге */
@font-face{font-family:"Nunito";src:url(../fonts/nunito-cyrillic-wght-normal.woff2) format("woff2");font-weight:200 1000;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Nunito";src:url(../fonts/nunito-latin-wght-normal.woff2) format("woff2");font-weight:200 1000;font-display:swap;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+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Pangolin";src:url(../fonts/pangolin-cyrillic-400-normal.woff2) format("woff2");font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
:root{--ink:#1F2140;--paper:#FFFDF6;--muted:#5B6190;--ok:#22C55E;--bad:#FF4D5E;--gold:#FFC23D;--pink:#FF5FA2;--blue:#3D8BFF;--violet:#8E44AD}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Nunito",system-ui,sans-serif;font-weight:600;color:var(--ink);background:linear-gradient(180deg,#4FBBFF 0,#BFE8FF 520px,#EAF8FF 1100px,#F4FBFF 100%);-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.hand{font-family:"Pangolin","Nunito",cursive;font-weight:400}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border:4px solid var(--ink);border-radius:999px;box-shadow:0 6px 0 var(--ink);background:var(--gold);color:var(--ink);font:inherit;font-weight:1000;font-size:19px;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--ink)}
.btn.ghost{background:#fff}

header{position:sticky;top:0;z-index:20;background:#4FBBFFE6;backdrop-filter:blur(6px);border-bottom:4px solid var(--ink)}
header .in{max-width:1160px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:18px;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-weight:1000;font-size:20px;text-decoration:none;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink);white-space:nowrap}
.logo span{font-size:28px;-webkit-text-stroke:0;text-shadow:none}
nav{display:flex;gap:20px;margin-left:auto}
nav a{text-decoration:none;font-weight:900}
nav a:hover{text-decoration:underline}
header .btn{padding:9px 16px;font-size:16px}

/* статья */
.art{max-width:820px;margin:0 auto;padding:30px 20px 40px}
.crumbs{font-size:14px;font-weight:800;color:#1F2140c0;margin-bottom:14px}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.art h1{margin:0 0 14px;font-size:clamp(32px,4.6vw,50px);line-height:1.08;font-weight:1000;color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}
.meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.meta span{background:#fff;border:3px solid var(--ink);border-radius:999px;padding:3px 12px;font-weight:900;font-size:14px;box-shadow:0 3px 0 var(--ink)}
.body{background:var(--paper);border:4px solid var(--ink);border-radius:28px;box-shadow:0 8px 0 var(--ink);padding:34px 40px}
.lead{font-size:21px;font-weight:800;line-height:1.5;margin:0 0 20px}
.body h2{font-size:30px;line-height:1.15;font-weight:1000;margin:38px 0 12px}
.body h3{font-size:22px;font-weight:1000;margin:26px 0 8px}
.body p,.body li{font-size:18px}
.body ul,.body ol{padding-left:24px}
.body li{margin:6px 0}
.body figure{margin:26px 0}
.body figure img{border-radius:18px;border:3px solid var(--ink)}
.body figure figcaption{font-size:14px;color:var(--muted);font-weight:800;margin-top:6px}
.toc{background:#fff;border:3px solid var(--ink);border-radius:20px;padding:14px 20px;margin:0 0 24px}
.toc b{display:block;margin-bottom:4px}
.toc ol{margin:0;padding-left:22px}
.toc a{text-decoration:none;font-weight:800}.toc a:hover{text-decoration:underline}
details.ans-list{border:3px solid var(--ink);border-radius:16px;background:#fff;padding:0 16px;margin:10px 0}
details.ans-list summary{cursor:pointer;padding:12px 0;font-weight:900;font-size:18px;list-style:none}
details.ans-list summary::-webkit-details-marker{display:none}
details.ans-list summary::after{content:" 👀 ответ";color:var(--muted);font-size:14px}
details.ans-list[open] summary::after{content:""}
details.ans-list p{margin:0 0 12px}

/* призыв сыграть */
.cta{margin:34px 0 6px;padding:24px 26px;border:4px solid var(--ink);border-radius:26px;box-shadow:0 7px 0 var(--ink);background:linear-gradient(135deg,#FFE9A8,#FFD1E6);display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.cta h3{margin:0 0 6px;font-size:23px}
.cta p{margin:0;font-size:16.5px;font-weight:800}
.cta img{grid-column:1/-1;border-radius:16px;border:3px solid var(--ink)}

/* похожие статьи */
.more{max-width:1160px;margin:0 auto;padding:10px 20px 50px}
.more h2{text-align:center;font-size:32px;font-weight:1000;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.acard{display:flex;flex-direction:column;gap:8px;padding:20px;background:#fff;border:4px solid var(--ink);border-radius:24px;box-shadow:0 6px 0 var(--ink);text-decoration:none}
.acard:hover{transform:translateY(-2px)}
.acard .e{font-size:42px;line-height:1}
.acard b{font-size:20px;font-weight:1000;line-height:1.2}
.acard small{color:var(--muted);font-weight:800;font-size:15px}

footer{background:var(--ink);color:#fff;padding:36px 0 44px;margin-top:30px}
footer .in{max-width:1160px;margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between}
footer p{margin:0 0 6px;opacity:.85;font-weight:700;font-size:15px}
footer a{color:#fff}

/* ===== ИНФОГРАФИКА (оживает при прокрутке — blog.js) ===== */
.ig{margin:28px 0;padding:22px 22px 18px;border:4px solid var(--ink);border-radius:24px;background:#fff;box-shadow:0 6px 0 var(--ink)}
.ig figcaption,.ig .cap{font-weight:1000;font-size:19px;margin-bottom:14px}
.ig .src{font-size:13px;color:var(--muted);font-weight:800;margin:10px 0 0}

/* полосы */
.ig-bars .bar{display:grid;grid-template-columns:minmax(120px,32%) 1fr auto;align-items:center;gap:10px;margin:10px 0;font-weight:900;font-size:16px}
.ig-bars .lbl{display:flex;align-items:center;gap:8px;line-height:1.15}
.ig-bars .lbl i{font-style:normal;font-size:24px}
.ig-bars .track{display:block;height:26px;border:3px solid var(--ink);border-radius:999px;background:#F1F4FF;overflow:hidden}
.ig-bars .fill{display:block;height:100%;width:0;border-radius:999px;background:var(--c,var(--blue));transition:width 1.4s cubic-bezier(.2,.9,.3,1)}
.ig-bars .val{min-width:64px;text-align:right;font-weight:1000;font-size:17px}

/* счётчики */
.ig-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.ig-counts figcaption,.ig-counts .src{grid-column:1/-1;margin-bottom:0}
.ig-counts .cnt{text-align:center;padding:14px 10px;border:3px solid var(--ink);border-radius:20px;background:var(--c,#FFF1B8)}
.ig-counts .cnt i{display:block;font-style:normal;font-size:38px;line-height:1.1}
.ig-counts .cnt .n{display:block;font-size:40px;font-weight:1000;line-height:1.1;margin:4px 0}
.ig-counts .cnt .t{display:block;font-size:15px;font-weight:800;line-height:1.3}

/* лента времени */
.ig-timeline .line{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;padding-top:34px}
.ig-timeline .line::before{content:"";position:absolute;left:0;right:0;top:15px;height:6px;border-radius:3px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1.2s ease}
.ig-timeline.on .line::before{transform:scaleX(1)}
.ig-timeline .ev{position:relative;text-align:center;font-size:15px;font-weight:800;line-height:1.25;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s cubic-bezier(.3,1.6,.4,1)}
.ig-timeline .ev::before{content:"";position:absolute;left:50%;top:-27px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--gold);border:3px solid var(--ink)}
.ig-timeline .ev i{display:block;font-style:normal;font-size:30px}
.ig-timeline .ev b{display:block;font-size:19px;font-weight:1000}
.ig-timeline.on .ev{opacity:1;transform:none}

/* сравнение размеров */
.ig-compare .row{display:flex;align-items:flex-end;justify-content:center;gap:18px;flex-wrap:wrap;min-height:120px}
.ig-compare .c{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:900;font-size:15px;text-align:center}
.ig-compare .dot{border-radius:50%;border:3px solid var(--ink);background:var(--c,var(--blue));transform:scale(0);transition:transform 1s cubic-bezier(.3,1.5,.4,1)}
.ig-compare.on .dot{transform:scale(1)}
/* рост — столбиками, растут снизу вверх */
.ig-compare.tall{--hmax:230px}
.ig-compare.tall .row{gap:26px;flex-wrap:nowrap;padding-bottom:4px}
.ig-compare .col{display:block;width:66px;height:calc(var(--h) * var(--hmax));min-height:10px;border:3px solid var(--ink);border-radius:14px 14px 4px 4px;background:var(--c,var(--blue));box-shadow:0 4px 0 var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform 1s cubic-bezier(.3,1.25,.4,1)}
.ig-compare.tall.on .col{transform:scaleY(1)}

/* мини-викторина */
.ig-quiz .q{font-size:20px;font-weight:1000;margin:0 0 12px}
.ig-quiz ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ig-quiz li{margin:0}
.ig-quiz li button{width:100%;text-align:left;padding:12px 14px;border:3px solid var(--ink);border-radius:16px;background:#fff;font:inherit;font-weight:900;font-size:16px;cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform .12s}
.ig-quiz li button:hover{transform:translateY(-2px)}
.ig-quiz.done li button{cursor:default;transform:none}
.ig-quiz li.ok button{background:#BBF7D0}
.ig-quiz li.no button{background:#FECACA}
.ig-quiz .ans{display:none;margin-top:14px;padding:12px 16px;border-radius:16px;background:#FFF6D6;border:3px dashed var(--ink);font-size:16.5px;font-weight:700}
.ig-quiz.done .ans{display:block;animation:pop .45s cubic-bezier(.3,1.6,.4,1)}
@keyframes pop{from{transform:scale(.9);opacity:0}}

/* шаги */
.ig-steps{list-style:none;padding:0!important;display:grid;gap:12px}
.ig-steps li{position:relative;padding:14px 16px 14px 70px;border:3px solid var(--ink);border-radius:18px;background:#fff;box-shadow:0 4px 0 var(--ink);margin:0!important;opacity:0;transform:translateX(-14px);transition:opacity .5s,transform .5s}
.ig-steps li::before{content:attr(data-e);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;font-size:24px;border-radius:50%;background:var(--gold);border:3px solid var(--ink)}
.ig-steps.on li{opacity:1;transform:none}

/* вау-факт */
.ig-fact{display:flex;gap:16px;align-items:flex-start;background:linear-gradient(135deg,#E8E1FF,#D6F2FF)}
.ig-fact::before{content:attr(data-e);font-size:44px;line-height:1;flex:none}
.ig-fact.on::before{animation:wob 1s ease}
@keyframes wob{25%{transform:rotate(-12deg) scale(1.2)}50%{transform:rotate(10deg)}75%{transform:rotate(-5deg)}}
.ig-fact p{margin:0;font-size:17.5px}

@media (max-width:760px){
  nav{display:none}
  .body{padding:22px 18px;border-radius:22px}
  .cta{grid-template-columns:1fr}
  .ig-quiz ol{grid-template-columns:1fr}
  .ig-bars .bar{grid-template-columns:1fr auto;grid-template-areas:"l v" "t t";row-gap:4px}
  .ig-bars .lbl{grid-area:l}.ig-bars .val{grid-area:v}.ig-bars .track{grid-area:t}
  .ig-timeline .line{grid-auto-flow:row;grid-auto-columns:auto;padding:0 0 0 34px;gap:14px}
  .ig-timeline .line::before{left:14px;right:auto;top:0;bottom:0;width:6px;height:auto;transform:scaleY(0);transform-origin:top}
  .ig-timeline.on .line::before{transform:scaleY(1)}
  .ig-timeline .ev{text-align:left}
  .ig-timeline .ev::before{left:-27px;top:6px;margin-left:0}
}
@media (max-width:520px){
  header .in{gap:10px;padding:0 12px}
  .logo{font-size:15px;-webkit-text-stroke:2.5px var(--ink)}
  .logo span{font-size:22px}
  header .btn{font-size:14px;padding:7px 12px;margin-left:auto;white-space:nowrap}
  .art h1{-webkit-text-stroke:4px var(--ink)}
}
@media (max-width:380px){ .logo{font-size:13px} }
header .btn{white-space:nowrap}
@media (max-width:760px){ header .btn{margin-left:auto} }  /* меню спрятано — кнопку к правому краю */
@media (max-width:960px){ header .btn .hp{display:none} }
@media (max-width:340px){ .logo{font-size:12px} }  /* на узком телефоне в шапке просто «Купить» */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* «Крокодил» онлайн (blog.js): слово на телефоне, минута на показ */
[id]{scroll-margin-top:90px}
.ig-croc{background:linear-gradient(135deg,#E3F5D8,#FFF1B8)}
.croc-top{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.croc-top>b{font-size:22px;font-weight:1000;white-space:nowrap}
.croc-lvl{display:flex;gap:4px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:4px}
.croc-lvl button{border:0;background:none;font:inherit;font-weight:900;font-size:15px;padding:6px 14px;border-radius:999px;cursor:pointer;color:var(--ink)}
.croc-lvl button.on{background:var(--gold)}
.croc-card{margin-top:14px;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:18px;border:4px solid var(--ink);border-radius:22px;background:#fff;box-shadow:0 5px 0 var(--ink);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.croc-card .e{font-size:84px;line-height:1.05}
.croc-card .w{font-size:36px;font-weight:1000;line-height:1.1}
.croc-card small{font-size:15px;color:var(--muted);font-weight:800}
.croc-card.cover{background:repeating-linear-gradient(45deg,#fff 0 16px,#F3F6FF 16px 32px)}
.croc-card.win{background:#BBF7D0}
.croc-card.late{background:#FECACA}
.croc-card.pop{animation:pop .4s cubic-bezier(.3,1.6,.4,1)}
.croc-time{position:relative;height:26px;margin:16px 0 0;border:3px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.croc-time span{display:block;height:100%;width:100%;background:var(--ok);transition:width .25s linear}
.croc-time.low span{background:var(--bad)}
.croc-time b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:1000}
.croc-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.croc-btns .btn{flex:1 1 180px;padding:12px 16px;font-size:18px;box-shadow:0 4px 0 var(--ink)}
.croc-btns .btn:disabled{opacity:.45;cursor:default;transform:none}
.croc-list{margin-top:16px;border:3px solid var(--ink);border-radius:16px;background:#fff;padding:0 16px}
.croc-list summary{cursor:pointer;font-weight:900;padding:10px 0}
.croc-cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;padding-bottom:12px}
.croc-cols b{font-size:16px}
.body .croc-cols ol{margin:6px 0 0;padding:0;list-style:none;columns:2;column-gap:14px}
.body .croc-cols li{margin:0 0 3px;font-size:15.5px;line-height:1.35;break-inside:avoid}
.croc-cols li::before{content:attr(data-e) " "}
@media (max-width:760px){.croc-cols{grid-template-columns:1fr}}
@media (max-width:520px){
  .art{padding-left:12px;padding-right:12px}
  .body{padding:20px 14px}
  .ig-croc{padding:16px 12px 14px}
  .croc-top>b{font-size:19px}
  .croc-lvl{width:100%}
  .croc-lvl button{flex:1;font-size:14px;padding:7px 4px;white-space:nowrap}
  .croc-card .e{font-size:70px}.croc-card .w{font-size:30px}
  .croc-list{padding:0 10px}
  .ig-compare .row{gap:10px}.ig-compare .c{font-size:13.5px}
  .ig-compare.tall{--hmax:170px}.ig-compare.tall .row{gap:12px}.ig-compare .col{width:46px}
  .body .croc-cols li{font-size:14.5px}
}
@media print{header,footer,.more,.cta,.croc-play,.croc-lvl{display:none}.croc-list{border:0}}

/* ещё темы квиза в конце статьи — как карточки тем на лендинге */
.more-themes{margin-top:34px}
.body .more-themes h2{margin:0 0 16px}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px}
.more-themes .theme{position:relative;display:flex;gap:12px;align-items:center;padding:12px 14px;background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--ink);text-decoration:none;color:var(--ink);transition:transform .12s}
.more-themes .theme:hover{transform:translateY(-2px)}
.more-themes .ic{flex:none;width:52px;height:52px;border-radius:14px;background:var(--tc);border:3px solid var(--ink);display:grid;place-items:center;font-size:28px}
.more-themes .theme b{display:block;font-size:17px;font-weight:1000;line-height:1.15}
.more-themes .theme small{display:block;color:var(--muted);font-size:13.5px;font-weight:800;line-height:1.25;margin-top:2px}
.more-themes .new{position:absolute;top:-12px;right:10px;background:var(--pink);color:#fff;border:3px solid var(--ink);border-radius:999px;padding:1px 10px;font-size:13px;font-weight:1000;transform:rotate(3deg)}
.body .more-themes .all{text-align:center;margin:22px 0 4px}
@media (max-width:560px){.tgrid{grid-template-columns:1fr}}

/* картинка внутри ответа мини-викторины (видна только после ответа) */
.ig-quiz .ans img{display:block;width:100%;margin-top:12px;border-radius:14px;border:3px solid var(--ink)}
.ig-quiz .ans small{display:block;margin-top:6px;font-size:13px;color:var(--muted);font-weight:800}

/* итог мини-викторин: «вы ответили верно на N из M» (blog.js) */
.ig-score{background:linear-gradient(135deg,#FFE9A8,#E3F5D8);display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:start}
.ig-score::before{content:attr(data-e);font-size:44px;line-height:1;grid-row:1/span 2}
.body .ig-score>p{margin:0;font-size:17.5px}
.ig-score .res b{font-size:20px}
.ig-score.win::before{animation:wob 1s ease}