/* Easy Eyes Puzzles — single stylesheet. The block between CRITICAL-START/END is inlined into every page . After editing it, run: python "материалы/tools/sync_critical_css.py" */ /* CRITICAL-START */ @font-face{font-family:'Atkinson Hyperlegible';src:url('/fonts/atkinson-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Atkinson Hyperlegible';src:url('/fonts/atkinson-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Atkinson Hyperlegible';src:url('/fonts/atkinson-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Bitter';src:url('/fonts/bitter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Bitter';src:url('/fonts/bitter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Atkinson Fallback';src:local('Arial');size-adjust:99.86%;ascent-override:95.13%;descent-override:29.04%;line-gap-override:0%;font-weight:100 900} @font-face{font-family:'Bitter Fallback';src:local('Georgia');size-adjust:106.37%;ascent-override:87.90%;descent-override:24.91%;line-gap-override:0%;font-weight:100 900} :root{--paper:#FAF7EF;--card:#FFFDF6;--blue:#2C4A6E;--blue-dark:#233C5B;--yellow:#F5C84C;--ink:#26241F;--ink-soft:#5B564B;--line:#E8E0CD;--font-body:'Atkinson Hyperlegible','Atkinson Fallback',Arial,sans-serif;--font-head:'Bitter','Bitter Fallback',Georgia,serif} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink);font:400 20px/1.65 var(--font-body)} img{max-width:100%;height:auto;display:block} a{color:var(--blue)} h1,h2,h3{font-family:var(--font-head);line-height:1.2;margin:0 0 .5em} h1{font-size:46px;font-weight:700;letter-spacing:-.01em} .wrap{max-width:1120px;margin-inline:auto;padding-inline:24px} .skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:var(--ink);padding:10px 18px;border-radius:10px;font-weight:700;z-index:10} .skip:focus{left:8px} .site-head{border-bottom:1px solid var(--line);background:var(--paper)} .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:18px} .brand{display:flex;align-items:center;gap:12px;font:700 24px var(--font-head);color:var(--ink);text-decoration:none} .brand-tile{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;background:var(--yellow);color:var(--blue);border-radius:10px;font:700 26px var(--font-head)} .site-head nav{display:flex;gap:8px 26px;flex-wrap:wrap} .site-head nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:17.5px;padding:6px 2px;border-bottom:3px solid transparent} .site-head nav a:hover{border-bottom-color:var(--yellow)} .hl{background:linear-gradient(180deg,transparent 58%,var(--yellow) 58%,var(--yellow) 94%,transparent 94%);padding:0 3px} .eyebrow{display:block;color:var(--blue);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px} .lead{font-size:23px;color:var(--ink-soft)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 30px;background:var(--blue);color:#fff;border-radius:12px;font:700 19px var(--font-body);text-decoration:none;border:2px solid var(--blue)} .btn:hover{background:var(--blue-dark);border-color:var(--blue-dark)} .btn:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:2px} .btn-ghost{background:transparent;color:var(--blue)} .btn-ghost:hover{background:#EFE9DA} .hero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding-block:64px 72px} .hero .actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px} .sheet{background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 22px 44px -26px rgba(38,36,31,.4);aspect-ratio:816/1056} .crumbs{font-size:16px;color:var(--ink-soft);padding-top:26px} .crumbs a{color:var(--ink-soft)} .page-meta{color:var(--ink-soft);font-size:17px;margin:2px 0 26px} @media (max-width:920px){.hero{grid-template-columns:1fr;gap:36px;padding-block:44px}h1{font-size:36px}.lead{font-size:21px}} @media (max-width:640px){body{font-size:18.5px}h1{font-size:31px}.brand{font-size:21px}} /* CRITICAL-END */ /* ---------- shared below-the-fold ---------- */ main{min-height:60vh} section{padding-block:34px} h2{font-size:33px;font-weight:600} h3{font-size:23px;font-weight:600} p{margin:0 0 1.1em} ul,ol{margin:0 0 1.2em;padding-left:1.3em} li{margin-bottom:.55em} .center{text-align:center} .section-head{max-width:720px;margin-bottom:10px} .trust{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;padding:0;list-style:none;color:var(--ink-soft);font-size:17.5px} .trust li{margin:0;display:flex;align-items:center;gap:9px} .trust li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--yellow);flex:none} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} @media (max-width:920px){.grid-2,.grid-3{grid-template-columns:1fr}} .card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px} .pack-card{display:flex;flex-direction:column;gap:20px} .pack-card img{border:1px solid var(--line);border-radius:6px;width:100%} .pack-card .meta{color:var(--ink-soft);font-size:16.5px} .pack-card h3{font-size:27px;margin:0} .pack-card .btn{align-self:flex-start} .feature h3{display:flex;align-items:center;gap:12px} .feature h3::before{content:"";width:16px;height:16px;border-radius:5px;background:var(--yellow);flex:none} .dl-card{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:start;background:var(--card);border:2px solid var(--blue);border-radius:20px;padding:34px;margin:36px 0} .dl-card img{border:1px solid var(--line);border-radius:6px} .dl-card .free-line{color:var(--ink-soft);font-size:16.5px;margin-top:12px} @media (max-width:760px){.dl-card{grid-template-columns:1fr}} .specs{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px} .specs li{margin:0;padding-left:24px;position:relative} .specs li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:11px;border-radius:3px;background:var(--yellow)} .note{background:#F7EFD8;border-left:6px solid var(--yellow);border-radius:0 12px 12px 0;padding:18px 22px;margin:26px 0} .note p:last-child{margin-bottom:0} .prose{max-width:760px} .prose h2{margin-top:1.6em} .prose h3{margin-top:1.3em} .themes{columns:2;column-gap:44px;padding-left:1.2em} @media (max-width:640px){.themes{columns:1}} .faq{max-width:760px} .faq h3{margin-top:1.4em} .cta-band{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:38px;text-align:center;margin-block:30px 50px} .cta-band h2{margin-bottom:.35em} .cta-band p{max-width:560px;margin:0 auto 24px;color:var(--ink-soft)} .cta-band .actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} footer{border-top:1px solid var(--line);background:#F4EEDF;margin-top:40px} .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px;padding-block:44px} @media (max-width:760px){.foot-grid{grid-template-columns:1fr}} footer h3{font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)} footer ul{list-style:none;padding:0;margin:0} footer li{margin-bottom:10px} footer a{color:var(--ink)} footer .blurb{color:var(--ink-soft);font-size:17.5px} .foot-bottom{border-top:1px solid var(--line);padding-block:18px;font-size:16px;color:var(--ink-soft);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} ::selection{background:var(--yellow);color:var(--ink)}