:root{--bg:#F8FAFC;--card:#fff;--tx:#202124;--tx2:#5F6368;--blue:#4285F4;--green:#34A853;--yel:#FBBC04;--red:#EA4335;--vio:#A142F4;--line:#E3E8EF;--r:18px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:18px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--blue)}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header.top{background:#fff;border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;gap:16px;align-items:center;justify-content:space-between;min-height:56px;flex-wrap:wrap}
header.top a{text-decoration:none;font-weight:600;color:var(--tx)}
nav.crumbs{font-size:15px;color:var(--tx2);padding:14px 0 0}
section{padding:36px 0}
h1{font-size:clamp(28px,5vw,42px);line-height:1.2;margin:.4em 0}
h2{font-size:clamp(24px,3.5vw,30px);line-height:1.25;margin:0 0 .6em}
h3{font-size:20px;margin:1.2em 0 .4em}
p{margin:.6em 0}
.lead{font-size:20px;color:var(--tx2);max-width:760px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.btn{display:inline-block;border:0;border-radius:14px;background:var(--blue);color:#fff;font:600 18px inherit;font-family:inherit;padding:14px 26px;cursor:pointer;text-decoration:none;min-height:50px}
.btn:hover{filter:brightness(.95)}
.btn.sec{background:#E8F0FE;color:#1967D2}
.btn.ok{background:var(--green)}
.btn.warn{background:#FEF7E0;color:#B06000}
.note{font-size:15px;color:var(--tx2)}
.mode .ico{font-size:34px}.mode h3{margin:.3em 0}.mode p{color:var(--tx2);font-size:16px;flex:1}
.mode{display:flex;flex-direction:column;align-items:flex-start}
.adv .card{padding:16px}.adv b{font-size:20px}
.pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:12px 0}
.pair{background:#E8F0FE;border-radius:12px;padding:8px 12px;text-align:center;font-weight:600;border:0;font-size:18px;font-family:inherit;color:#174EA6}
button.pair{cursor:pointer}button.pair.on{background:var(--blue);color:#fff}
.house{width:210px;margin:10px auto;text-align:center}
.house .roof{background:var(--yel);clip-path:polygon(50% 0,100% 100%,0 100%);height:100px;display:flex;align-items:flex-end;justify-content:center;font-size:44px;font-weight:700;padding-bottom:6px;color:var(--tx)}
.house .rooms{display:flex;gap:6px;margin-top:4px}
.house .cell{flex:1;background:#fff;border:3px solid var(--blue);border-radius:12px;font-size:36px;font-weight:700;height:68px;display:flex;align-items:center;justify-content:center}
.house .q{background:#FEF7E0;border-color:var(--yel);color:var(--red)}
.house.lg{width:260px}
table{border-collapse:collapse;width:100%;background:#fff;border-radius:12px;overflow:hidden}
th,td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:center}
th{background:#E8F0FE}
.tablewrap{overflow-x:auto}
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:10px 0}
summary{cursor:pointer;font-weight:600}
.numgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
.num{display:block;text-align:center;text-decoration:none;color:var(--tx);background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 6px}
.num b{display:block;font-size:34px;color:var(--blue)}.num span{font-size:14px;color:var(--tx2)}
.num:hover,.num.cur{border-color:var(--blue);background:#E8F0FE}
.xcard h3{margin-top:0}.xcard .pairs{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.cta{background:#E8F0FE;border-radius:24px;text-align:center;padding:36px 20px}
footer{padding:30px 0;color:var(--tx2);font-size:15px;border-top:1px solid var(--line);margin-top:20px}
ul.clean{padding-left:22px}
/* trainer overlay */
#sc-ov{position:fixed;inset:0;background:rgba(32,33,36,.55);display:none;align-items:center;justify-content:center;z-index:100}
#sc-ov.open{display:flex}
#sc-box{background:#fff;border-radius:24px;width:min(560px,100%);max-height:100vh;overflow:auto;padding:22px;position:relative}
.sc-x{position:absolute;right:12px;top:10px;border:0;background:none;font-size:28px;cursor:pointer;color:var(--tx2);padding:8px}
.sc-seg{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.sc-seg button{flex:1 1 40%;border:2px solid var(--line);background:#fff;border-radius:14px;padding:12px;font:600 17px inherit;font-family:inherit;cursor:pointer;min-height:50px}
.sc-seg button.on{border-color:var(--blue);background:#E8F0FE}
.sc-bar{height:12px;background:var(--line);border-radius:6px;overflow:hidden;margin:8px 0}
.sc-bar i{display:block;height:100%;background:var(--green);width:0;transition:width .3s}
.sc-top{display:flex;justify-content:space-between;font-size:16px;color:var(--tx2);flex-wrap:wrap;gap:4px;padding-right:34px}
.sc-q{text-align:center;font-size:48px;font-weight:700;margin:18px 0;min-height:130px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.sc-q .ask{font-size:18px;font-weight:400;color:var(--tx2);margin-bottom:6px}
.sc-q em{font-style:normal;color:var(--red);background:#FEF7E0;border-radius:12px;padding:0 14px}
.sc-ans{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sc-ans button{font:700 34px inherit;font-family:inherit;border:3px solid var(--blue);background:#fff;color:var(--blue);border-radius:18px;padding:16px;cursor:pointer;min-height:72px}
.sc-ans button.bad{border-color:var(--line);color:#bbb;background:#f3f3f3}
.sc-ans button.good{background:var(--green);border-color:var(--green);color:#fff;animation:pop .4s}
@keyframes pop{50%{transform:scale(1.08)}}
.sc-fb{min-height:56px;text-align:center;font-size:19px;font-weight:600;margin:12px 0}
.sc-fb.g{color:var(--green)}.sc-fb.b{color:#B06000}
.sc-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.sc-res{text-align:center}.sc-res .big{font-size:56px}
@media(max-width:760px){.g4,.g3{grid-template-columns:repeat(2,1fr)}body{font-size:17px}}
@media(max-width:520px){.g4,.g3,.g2{grid-template-columns:1fr}#sc-ov{align-items:stretch}#sc-box{border-radius:0;min-height:100%}.btn{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}