:root{--ink:#17243c;--muted:#6d778b;--purple:#7357df;--purple-dark:#5d43ca;--cream:#fff9ef;--line:#e7e8ee;--white:#fff;--green:#44b98a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;background:#fff}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.topbar{height:76px;max-width:1160px;margin:auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:20px;font-weight:800;text-decoration:none}.brand b,.eyebrow{color:var(--purple)}.brand-keys{display:flex;gap:3px;transform:rotate(-3deg)}.brand-keys i{width:27px;height:27px;border-radius:7px;display:grid;place-items:center;color:#fff;background:var(--purple);font-size:11px;font-style:normal;box-shadow:0 3px 0 rgba(65,43,145,.2)}.brand-keys i+ i{background:#fa9f45}.topbar nav{display:flex;align-self:stretch;align-items:center;gap:32px}.topbar nav a{position:relative;color:#687289;font-size:13px;font-weight:700;text-decoration:none}.topbar nav a:hover,.topbar nav a.active{color:var(--purple)}.topbar nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:-29px;height:3px;background:var(--purple);border-radius:3px}.profile-button{border:0;background:none;display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer}.profile-button>span:nth-child(2){display:flex;flex-direction:column}.profile-button b{font-size:12px}.profile-button small{color:var(--muted);font-size:10px}.avatar{width:37px;height:37px;border-radius:11px;display:grid;place-items:center;background:#dff1ff;color:#347fae;font-weight:900}.hero{min-height:410px;padding:56px max(22px,calc((100vw - 1110px)/2));display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:78px;background:radial-gradient(circle at 82% 15%,rgba(255,187,82,.2),transparent 27%),radial-gradient(circle at 10% 95%,rgba(115,87,223,.1),transparent 30%),var(--cream);border-block:1px solid #f2eadf}.eyebrow{font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.hero h1{margin:14px 0 16px;font-size:clamp(43px,5vw,62px);line-height:1;letter-spacing:-.045em}.hero h1 em{color:var(--purple);font-style:normal}.hero-copy>p{max-width:550px;margin:0;color:var(--muted);font-size:16px;line-height:1.6}.hero-actions{display:flex;align-items:center;gap:22px;margin-top:25px}.primary,.next-button{border:0;border-radius:12px;padding:14px 20px;display:inline-flex;align-items:center;justify-content:center;gap:24px;background:var(--purple);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 7px 18px rgba(115,87,223,.23)}.primary:hover,.next-button:hover{background:var(--purple-dark);transform:translateY(-1px)}.primary:disabled{opacity:.55}.full{width:100%}.timer-box{min-width:110px;padding-left:20px;border-left:1px solid #e2d7ca;display:flex;flex-direction:column}.timer-box small{color:var(--muted);font-size:9px}.timer-box b{color:var(--purple);font-size:23px;font-variant-numeric:tabular-nums}.timer-box b.urgent{color:#e85c67}.progress-card{padding:25px;border:1px solid #e4defa;border-radius:20px;background:rgba(255,255,255,.95);box-shadow:0 18px 44px rgba(73,61,112,.09)}.card-title{display:flex;justify-content:space-between;font-size:13px;font-weight:800}.card-title b{color:var(--purple)}.progress-line,.exercise-progress{overflow:hidden;background:#eeedf3}.progress-line{height:9px;margin:10px 0 22px;border-radius:10px}.progress-line i,.exercise-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7357df,#a980ee);transition:width .3s}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr)}.stats-grid div{padding:8px 10px;display:flex;align-items:center;gap:9px}.stats-grid div+div{border-left:1px solid var(--line)}.stats-grid strong{color:var(--purple);font-size:24px}.stats-grid span{color:var(--muted);font-size:9px;line-height:1.25}.notice{margin-top:18px;padding:12px;border-radius:12px;display:flex;align-items:center;gap:11px;background:#f1edff}.notice>span{width:37px;height:37px;border-radius:10px;display:grid;place-items:center;background:#fff;color:var(--purple)}.notice p{margin:0;color:#655a82;font-size:10px;line-height:1.45}.content{max-width:1110px;margin:auto;padding:62px 20px 70px}.section-title{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:21px}.section-title h2,.trainer-head h2,.mail-info h2,.modal h2{margin:5px 0 0;letter-spacing:-.025em}.section-title p{max-width:390px;margin:0;color:var(--muted);font-size:12px;line-height:1.5}.lesson-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.lesson-card{min-height:132px;border:1px solid var(--line);border-radius:15px;padding:16px;display:grid;grid-template-columns:auto 1fr auto;gap:11px;background:#fff;text-align:left;cursor:pointer;transition:.18s}.lesson-card:hover,.lesson-card.selected{border-color:var(--purple);transform:translateY(-3px);box-shadow:0 9px 23px rgba(50,43,78,.09)}.lesson-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#896bea;color:#fff;font-size:11px;font-weight:900}.lesson-card.blue .lesson-icon{background:#54a7e5}.lesson-card.orange .lesson-icon{background:#f1a44c}.lesson-card.green .lesson-icon{background:#48b98f}.lesson-copy{display:flex;flex-direction:column;gap:4px}.lesson-copy small{color:var(--purple);font-size:8px;font-weight:900;text-transform:uppercase}.lesson-copy b{font-size:13px}.lesson-copy em{color:var(--muted);font-size:9px;font-style:normal;line-height:1.4}.arrow{color:#abb1bd}.trainer{margin-top:44px;padding:28px;border:1px solid #e3e4ec;border-radius:21px;background:#fbfaff;box-shadow:0 16px 40px rgba(51,48,82,.06)}.trainer-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:19px}.live-stats{display:flex;align-items:center;gap:8px}.live-stats>span{min-width:94px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;display:flex;flex-direction:column;background:#fff;color:var(--muted);font-size:8px}.live-stats b{color:var(--ink);font-size:14px}.live-stats button{width:38px;height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--purple);font-size:19px;cursor:pointer}.exercise{position:relative;overflow:hidden;padding:31px 23px 17px;border:1px solid #dfdcf2;border-radius:13px;background:#fff;cursor:text}.exercise-progress{position:absolute;left:0;right:0;top:0;height:4px}.typing-text{min-height:43px;margin:0;color:#b6bbc6;font:700 clamp(18px,2.4vw,27px)/1.7 "Courier New",monospace;letter-spacing:.035em;text-align:center}.typing-text span{position:relative;border-radius:3px}.typing-text .correct{color:#42ad83}.typing-text .wrong{color:#e95d6d;background:#ffe9ec}.typing-text .current{color:var(--purple);background:#eee9ff}.typing-text .current:after{content:"";position:absolute;right:-2px;top:0;width:2px;height:1.1em;background:var(--purple);animation:blink .9s infinite}@keyframes blink{50%{opacity:0}}#typingInput{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.typing-hint{margin:9px 0 0;color:#99a1b0;font-size:9px;text-align:center}.keyboard{width:min(100%,775px);margin:23px auto 0;display:flex;flex-direction:column;gap:5px}.keyboard-row{display:flex;justify-content:center;gap:5px}.key{width:49px;height:38px;border:1px solid #dfe2e8;border-bottom:3px solid #a9a0d8;border-radius:7px;display:grid;place-items:center;background:#fff;font-size:10px;font-weight:800;transition:.1s}.key:nth-child(-n+2){border-bottom-color:#ed91a2}.key.target{transform:translateY(2px);border-color:var(--purple);background:#ede9ff;color:var(--purple);box-shadow:0 0 0 3px rgba(115,87,223,.12)}.key.space{width:285px;color:#8991a1;font-size:7px;letter-spacing:.18em}.result-banner{margin-top:21px;padding:16px;border-radius:14px;display:flex;align-items:center;gap:14px;background:#e9faf3}.result-star{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--green);color:#fff;font-size:22px}.result-banner small{color:#348566;font-size:9px;font-weight:900;text-transform:uppercase}.result-banner h3,.result-banner p{margin:2px 0 0}.result-banner p{color:var(--muted);font-size:10px}.next-button{margin-left:auto;background:var(--green);box-shadow:none}.hidden{display:none!important}.mail-info{margin-top:27px;padding:25px;border-radius:17px;display:flex;align-items:center;gap:17px;background:#f1eeff}.mail-icon{width:54px;height:54px;flex:none;border-radius:15px;display:grid;place-items:center;background:#fff;color:var(--purple);font-size:23px}.mail-info>div{flex:1}.mail-info small{color:var(--purple);font-size:8px;font-weight:900;text-transform:uppercase}.mail-info p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.5}.status-pill{padding:10px 13px;border-radius:20px;background:#fff;color:var(--muted);font-size:10px;white-space:nowrap}.status-pill.sent{background:#dbf6ea;color:#28805f}.status-pill.waiting{background:#fff2d9;color:#9a6823}footer{min-height:92px;padding:24px max(20px,calc((100vw - 1110px)/2));border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:10px}footer b{color:var(--purple)}.modal-backdrop{position:fixed;z-index:50;inset:0;padding:18px;display:grid;place-items:center;background:rgba(25,27,45,.65);backdrop-filter:blur(5px)}.modal{width:min(100%,430px);max-height:calc(100vh - 30px);overflow:auto;padding:30px;border-radius:22px;background:#fff;box-shadow:0 25px 80px rgba(29,25,61,.27);text-align:center;animation:rise .3s}@keyframes rise{from{opacity:0;transform:translateY(10px)}}.modal-keys{display:flex;justify-content:center;gap:4px;margin-bottom:18px}.modal-keys i{width:33px;height:33px;border:1px solid #dcd9eb;border-bottom:3px solid var(--purple);border-radius:8px;display:grid;place-items:center;color:var(--purple);font-size:11px;font-style:normal;font-weight:900}.modal>p{margin:8px auto 20px;color:var(--muted);font-size:12px}.modal label{margin-top:12px;display:flex;flex-direction:column;gap:5px;color:#586176;font-size:10px;font-weight:800;text-align:left}.modal input,.modal select{width:100%;height:44px;padding:0 12px;border:1px solid #dbdce4;border-radius:10px;background:#fff;outline:none;color:var(--ink)}.modal input:focus,.modal select:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(115,87,223,.1)}.modal .primary{margin-top:20px}.privacy{display:block;margin-top:11px;color:#99a1af;font-size:8px}.form-error{min-height:15px!important;margin:7px 0 -10px!important;color:#d94f5f!important}.finish-icon{width:58px;height:58px;margin:0 auto 18px;border-radius:18px;display:grid;place-items:center;background:#dcf7eb;color:#2c966d;font-size:28px;font-weight:900}.finish-stats{margin:20px 0 2px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.finish-stats span{padding:12px 5px;border-radius:10px;background:#f6f5fa;color:var(--muted);font-size:8px}.finish-stats b{display:block;color:var(--purple);font-size:17px}@media(max-width:900px){.topbar nav{display:none}.hero{grid-template-columns:1fr;gap:35px}.lesson-grid{grid-template-columns:repeat(2,1fr)}.key{width:calc((100vw - 95px)/13);min-width:24px}.mail-info{align-items:flex-start;flex-wrap:wrap}.status-pill{margin-left:70px}}@media(max-width:620px){.topbar{height:66px;padding:0 15px}.profile-button>span:nth-child(2){display:none}.hero{padding:45px 17px}.hero h1{font-size:41px}.hero-actions{align-items:flex-start;flex-direction:column}.timer-box{padding-left:0;border-left:0}.content{padding:43px 13px}.section-title,.trainer-head{align-items:flex-start;flex-direction:column}.lesson-grid{grid-template-columns:1fr}.trainer{padding:15px 9px}.typing-text{text-align:left}.keyboard{gap:3px;overflow:hidden}.keyboard-row{gap:3px}.key{width:calc((100vw - 55px)/13);height:31px;border-radius:5px;font-size:7px}.key.space{width:45%}.result-banner{align-items:flex-start;flex-wrap:wrap}.next-button{width:100%;margin-left:0}.mail-info{padding:20px}.mail-icon{width:41px;height:41px}.status-pill{width:100%;margin-left:0;text-align:center}footer{align-items:flex-start;flex-direction:column}.modal{padding:27px 21px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

.lesson-card{min-height:154px}
.lesson-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.lesson-card.pink .lesson-icon{background:#e47aa5}
.lesson-card.special .lesson-icon{background:#305c86}
.lesson-progress{height:4px;margin-top:5px;overflow:hidden;border-radius:5px;background:#ececf2}
.lesson-progress i{display:block;height:100%;border-radius:inherit;background:var(--purple);transition:width .2s}
.lesson-percent{color:#8b93a3;font-size:8px;font-weight:800}
.key{padding:0;color:var(--ink);cursor:pointer;appearance:none}
.key:hover{border-color:var(--purple);background:#f7f5ff}
.key:active{transform:translateY(2px)}
.key.backspace{width:70px;color:var(--purple);font-size:17px}
@media(max-width:620px){.key.backspace{width:45px}}

.live-stats{flex-wrap:wrap;justify-content:flex-end}
.live-stats .finish-early-button{width:auto;padding:0 13px;border-color:#efcfd4;color:#c84e5d;background:#fff7f8;font-size:10px;font-weight:800}
.live-stats .finish-early-button:hover{border-color:#dc7580;background:#fff0f2}

#registrationModal{overflow:hidden;background:
radial-gradient(circle at 18% 20%,rgba(255,174,82,.3),transparent 25%),
radial-gradient(circle at 82% 18%,rgba(115,87,223,.28),transparent 28%),
radial-gradient(circle at 75% 82%,rgba(72,185,143,.22),transparent 28%),
linear-gradient(135deg,#fff9ef 0%,#f5f1ff 48%,#edf8ff 100%);backdrop-filter:none}
#registrationModal:before,#registrationModal:after{position:absolute;z-index:0;color:rgba(115,87,223,.1);font-weight:900;letter-spacing:.15em;white-space:nowrap;pointer-events:none}
#registrationModal:before{content:"Q W E R T Y";top:8%;left:-4%;font-size:clamp(35px,7vw,92px);transform:rotate(-8deg)}
#registrationModal:after{content:"Ф Ы В А";right:-3%;bottom:7%;font-size:clamp(42px,8vw,105px);transform:rotate(7deg)}
#registrationModal .modal{z-index:1;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.92);box-shadow:0 28px 90px rgba(71,55,123,.2)}

.warning-icon{width:58px;height:58px;margin:0 auto 18px;border-radius:18px;display:grid;place-items:center;background:#fff0e0;color:#dc7b2d;font-size:28px;font-weight:900}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}
.cancel-button,.danger-button{min-height:45px;border-radius:11px;padding:10px 13px;font-size:10px;font-weight:800;cursor:pointer}
.cancel-button{border:1px solid var(--line);background:#fff;color:var(--ink)}
.danger-button{border:1px solid #d95362;background:#d95362;color:#fff}
.danger-button:hover{background:#be3f4e}
.danger-button:disabled{opacity:.55;cursor:wait}

@media(max-width:620px){
  .live-stats{justify-content:flex-start}
  .live-stats .finish-early-button{height:38px}
  .modal-actions{grid-template-columns:1fr}
}

#registrationModal{
  background-color:#f8f3ff;
  background-image:
    linear-gradient(rgba(255,255,255,.04),rgba(255,255,255,.04)),
    url("start-background-school-v3.webp");
  background-size:cover;
  background-position:center;
}
#registrationModal:before,#registrationModal:after{display:none}
#registrationModal .modal{
  border:1px solid rgba(255,255,255,.92);
  background:rgba(255,255,255,.94);
  box-shadow:0 30px 90px rgba(75,56,128,.18);
  backdrop-filter:blur(10px);
}
@media(max-width:620px){
  #registrationModal{background-position:center;background-size:auto 100%}
}

/* Палитра школьного фона: учебный синий, терракота, мята и тёплая бумага. */
:root{
  --ink:#183553;
  --muted:#6c7c8d;
  --purple:#294f7e;
  --purple-dark:#1c3f6c;
  --cream:#f7f1e7;
  --line:#d8e0e5;
  --green:#75a997;
  --school-orange:#d9743b;
  --school-plum:#70558c;
  --school-mint:#9bc4b4;
  --paper:#fffaf1;
  --pale-blue:#eef4f7;
}

body{background:var(--paper)}
.topbar{background:rgba(255,250,241,.96)}
.brand b,.eyebrow,.mini-label{color:var(--purple)}
.brand-mark i:first-child,.brand-keys i:first-child{background:var(--purple)}
.brand-mark i:last-child,.brand-keys i+ i{background:var(--school-orange)}
.main-nav a:hover,.main-nav a.active,.topbar nav a:hover,.topbar nav a.active{color:var(--purple)}
.main-nav a.active:after,.topbar nav a.active:after{background:var(--school-orange)}
.avatar{background:#e4f1ec;color:#3e7565}

.hero{
  background:
    radial-gradient(circle at 82% 18%,rgba(217,116,59,.15),transparent 28%),
    radial-gradient(circle at 10% 92%,rgba(155,196,180,.22),transparent 30%),
    linear-gradient(135deg,#fffaf1,#f1f5f5);
  border-color:#e9dfd2;
}
.hero h1 em{color:var(--school-orange)}
.primary{background:var(--purple);box-shadow:0 8px 20px rgba(28,63,108,.22)}
.primary:hover{background:var(--purple-dark)}
.primary span{color:#f4b081}
.timer-box b,.card-title b,.stats-grid strong{color:var(--purple)}
.progress-card{border-color:#d9e3e6;background:rgba(255,253,248,.96);box-shadow:0 18px 44px rgba(36,69,102,.09)}
.progress-line i,.exercise-progress i{background:linear-gradient(90deg,var(--purple),var(--school-mint))}
.notice{background:#f8eadf}
.notice>span{color:var(--school-orange)}
.notice p{color:#80573f}

.content{background:#fff}
.lesson-card{border-color:#dce3e6;background:#fffdf9}
.lesson-card:hover,.lesson-card.selected{border-color:var(--purple);box-shadow:0 9px 23px rgba(37,77,119,.1)}
.lesson-icon{background:var(--purple)}
.lesson-card.blue .lesson-icon{background:#4f8ba5}
.lesson-card.orange .lesson-icon{background:var(--school-orange)}
.lesson-card.green .lesson-icon{background:#6f9f8d}
.lesson-card.pink .lesson-icon{background:var(--school-plum)}
.lesson-progress i{background:linear-gradient(90deg,var(--purple),var(--school-mint))}
.trainer{border-color:#dce4e7;background:#f8faf9}
.exercise{border-color:#d6e0e4;background:#fff}
.typing-text .current{color:var(--purple);background:#e6eef5}
.typing-text .current:after{background:var(--school-orange)}
.key{background:#fffdf9;border-color:#d7dfe3;color:var(--ink)}
.key:hover{border-color:var(--purple);background:#f1f6f7}
.key.target{border-color:var(--school-orange);background:#fff0e5;color:#a34f20;box-shadow:0 0 0 3px rgba(217,116,59,.14)}
.result-banner{background:#e7f3ee}
.result-star,.next-button{background:#659b87}
.report-card,.mail-info{background:#eef3f5}
.report-icon,.mail-icon{color:var(--school-orange)}
.secondary-button{border-color:var(--purple);color:var(--purple)}
.status-pill.sent{background:#dcefe7;color:#356e5a}
footer{background:var(--paper);border-color:#e5ddd1}
footer b{color:var(--school-orange)}

#registrationModal .modal{
  position:relative;
  width:min(100%,470px);
  overflow:hidden;
  padding:38px 38px 32px;
  border:1px solid rgba(255,250,241,.96);
  border-radius:28px;
  background:rgba(255,253,248,.96);
  box-shadow:0 32px 95px rgba(24,53,83,.22);
}
#registrationModal .modal:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:7px;
  background:linear-gradient(90deg,var(--purple) 0 38%,var(--school-mint) 38% 63%,var(--school-orange) 63% 84%,var(--school-plum) 84%);
}
#registrationModal .modal-keys{margin-bottom:22px}
#registrationModal .modal-keys i{
  border:0;
  border-bottom:3px solid #173d68;
  background:var(--purple);
  color:#fff;
  box-shadow:0 4px 8px rgba(24,53,83,.14);
}
#registrationModal .modal-keys i:nth-child(2){border-bottom-color:#5c8d7b;background:var(--school-mint);color:#234f43}
#registrationModal .modal-keys i:nth-child(3){border-bottom-color:#a84f22;background:var(--school-orange)}
#registrationModal .modal-keys i:nth-child(4){border-bottom-color:#493664;background:var(--school-plum)}
#registrationModal .eyebrow{color:var(--school-orange);letter-spacing:.14em}
#registrationModal h2{margin-top:8px;color:var(--ink);font-size:29px}
#registrationModal>form>p{max-width:355px;line-height:1.55}
#registrationModal label{
  color:#294863;
  font-size:14px;
  font-weight:850;
}
#registrationModal input,#registrationModal select{
  height:56px;
  padding:0 15px;
  border-color:#ccd8de;
  background:#f9fbfa;
  color:var(--ink);
  font-size:17px;
  font-weight:750;
}
#registrationModal input:focus,#registrationModal select:focus{
  border-color:var(--purple);
  box-shadow:0 0 0 4px rgba(41,79,126,.1);
  background:#fff;
}
#registrationModal .primary{
  min-height:51px;
  margin-top:24px;
  background:linear-gradient(100deg,var(--purple),#376a95);
  box-shadow:0 10px 24px rgba(28,63,108,.22);
}
#registrationModal .primary:hover{background:linear-gradient(100deg,var(--purple-dark),var(--purple))}
#registrationModal .privacy{color:#8c918f}

.warning-icon{background:#f8e7dc;color:var(--school-orange)}
.danger-button{border-color:#b95a38;background:#b95a38}

@media(max-width:620px){
  #registrationModal .modal{padding:32px 22px 27px;border-radius:23px}
  #registrationModal h2{font-size:25px}
  #registrationModal label{font-size:13px}
  #registrationModal input,#registrationModal select{height:54px;font-size:16px}
}

/* Компактный первый экран. */
@media(min-width:901px){
  .topbar{height:66px}
  .topbar nav a.active:after{bottom:-24px}
  .hero{
    min-height:300px;
    padding-top:30px;
    padding-bottom:30px;
    gap:52px;
  }
  .hero h1{
    margin:9px 0 11px;
    font-size:clamp(38px,4.1vw,50px);
    line-height:.98;
  }
  .hero-copy>p,.hero>div:first-child>p{
    max-width:540px;
    font-size:14px;
    line-height:1.48;
  }
  .hero-actions{margin-top:18px}
  .hero .primary{padding:12px 18px}
  .timer-box b{font-size:20px}
  .progress-card,.hero-card{padding:19px 21px;border-radius:17px}
  .progress-line,.large-progress{margin:8px 0 14px}
  .stats-grid div,.progress-stats div{padding:5px 9px}
  .stats-grid strong,.progress-stats strong{font-size:21px}
  .notice,.streak-note{margin-top:12px;padding:9px 11px}
  .notice>span,.streak-note>span{width:33px;height:33px}
  .content{padding-top:45px}
}

.live-stats .finish-early-button:disabled{opacity:.45;cursor:not-allowed}

.training-content[hidden]{display:none!important}
body.waiting-to-start #startButton{
  padding:14px 24px;
  background:linear-gradient(100deg,var(--purple),#376a95);
  box-shadow:0 10px 27px rgba(28,63,108,.28);
  animation:start-attention 2.2s ease-in-out infinite;
}
body.waiting-to-start #startButton span{color:#ffd0a8}
body.waiting-to-start .hero{border-bottom-color:#d8e3e6}
@keyframes start-attention{
  0%,100%{transform:translateY(0);box-shadow:0 10px 27px rgba(28,63,108,.25)}
  50%{transform:translateY(-2px);box-shadow:0 14px 31px rgba(28,63,108,.34)}
}
@media(prefers-reduced-motion:reduce){
  body.waiting-to-start #startButton{animation:none}
}

.student-guide{
  max-width:1110px;
  margin:0 auto;
  padding:48px 20px 64px;
}
.guide-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:22px;
}
.guide-heading h2{
  margin:6px 0 0;
  color:var(--ink);
  font-size:28px;
  letter-spacing:-.025em;
}
.guide-heading>p{
  max-width:390px;
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.guide-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.guide-card{
  overflow:hidden;
  border:1px solid #dbe2e4;
  border-radius:18px;
  background:#fffdf9;
  box-shadow:0 10px 28px rgba(24,53,83,.07);
}
.guide-image{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  background:#eef3f3;
}
.guide-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .35s ease;
}
.guide-card:hover .guide-image img{transform:scale(1.025)}
.guide-image>span{
  position:absolute;
  left:14px;
  bottom:14px;
  width:34px;
  height:34px;
  border:3px solid rgba(255,255,255,.9);
  border-radius:11px;
  display:grid;
  place-items:center;
  background:var(--school-orange);
  color:#fff;
  font-size:13px;
  font-weight:900;
  box-shadow:0 5px 12px rgba(94,49,26,.2);
}
.guide-card:nth-child(2) .guide-image>span{background:var(--purple)}
.guide-card:nth-child(3) .guide-image>span{background:#659b87}
.guide-copy{padding:21px 20px 24px}
.guide-copy h3{
  margin:0 0 10px;
  color:var(--ink);
  font-size:19px;
  line-height:1.25;
}
.guide-copy p{
  margin:0;
  color:#405568;
  font-size:14px;
  font-weight:550;
  line-height:1.55;
}
.guide-tip{
  margin-top:16px;
  padding:13px 16px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#f7eee4;
  color:#76543e;
  font-size:11px;
}
.guide-tip p{margin:0}

@media(max-width:800px){
  .guide-grid{grid-template-columns:1fr}
  .guide-card{display:grid;grid-template-columns:minmax(180px,36%) 1fr}
  .guide-image{height:100%;min-height:180px}
}
@media(max-width:620px){
  .student-guide{padding:38px 14px 50px}
  .guide-heading{align-items:flex-start;flex-direction:column}
  .guide-heading h2{font-size:24px}
  .guide-card{display:block}
  .guide-image{min-height:0}
  .guide-copy{padding:18px}
  .guide-copy h3{font-size:18px}
  .guide-copy p{font-size:14px}
  .guide-tip{align-items:flex-start}
}

.typing-text .current:after{left:-2px;right:auto}
.typing-hint{color:#566b7d;font-size:10px;font-weight:700}

.typing-text.special-task{
  min-height:355px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:0;
}
.special-step-count{
  color:#6d778b;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.special-task-copy{
  color:var(--ink);
  font-size:clamp(17px,2.5vw,24px);
  font-weight:850;
  line-height:1.35;
}
.special-task-copy kbd{
  margin-left:5px;
  padding:6px 12px;
  border:1px solid #cfd9df;
  border-bottom:4px solid #7890a1;
  border-radius:9px;
  background:#fff;
  color:#305c86;
  font:800 .8em Inter,"Segoe UI",Arial,sans-serif;
  box-shadow:0 5px 10px rgba(32,66,92,.1);
}
.special-purpose{
  width:min(100%,620px);
  padding:13px 16px;
  border-left:5px solid #d8773f;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  background:#fff2e9;
  color:#3f4e5c;
  font-size:15px;
  font-weight:650;
  line-height:1.5;
  text-align:left;
}
.special-purpose b{
  color:#a64d23;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.special-entry{
  width:min(100%,520px);
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
}
.special-entry label{
  color:#305c86;
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
}
.special-entry input,.special-entry textarea{
  width:100%;
  padding:0 14px;
  border:2px solid #b9c8d2;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font:750 17px/1.2 "Courier New",monospace;
  outline:none;
  box-shadow:inset 0 1px 3px rgba(37,77,119,.05);
}
.special-entry input{height:48px}
.special-entry textarea{
  min-height:82px;
  padding-top:11px;
  resize:none;
  line-height:1.55;
}
.special-entry input:focus,.special-entry textarea:focus{
  border-color:#305c86;
  box-shadow:0 0 0 4px rgba(48,92,134,.12);
}
.special-entry input.ready,.special-entry textarea.ready{
  border-color:#48a47f;
  background:#f3fbf7;
  color:#286c53;
  box-shadow:0 0 0 4px rgba(72,164,127,.11);
}
.special-entry input.cursor-ready{
  border-color:#d8773f;
  box-shadow:0 0 0 4px rgba(216,119,63,.13);
}
.special-entry input:disabled{background:#eef1f3;color:#9ba4ab;cursor:not-allowed}
.special-entry input[readonly]{background:#f3fbf7;color:#286c53}
.double-entry{width:min(100%,620px)}
.manual-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.manual-field-grid label{display:flex;flex-direction:column;gap:6px}
.check-task-button{
  align-self:flex-end;
  padding:10px 16px;
  border:0;
  border-radius:9px;
  background:#305c86;
  color:#fff;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}
.check-task-button:disabled{background:#d7dde1;color:#89949c;cursor:not-allowed}
.special-result-title{
  color:#2f8062;
  font-size:clamp(21px,3vw,29px);
  font-weight:900;
}
.result-visual{
  min-height:72px;
  border:1px solid #cfe6dc;
  border-radius:12px;
  background:#f2fbf7;
}
.special-purpose.result-description{
  border-left-color:#48a47f;
  background:#eaf8f2;
  color:#315f4f;
}
.special-purpose.result-description b{color:#287557}
.special-next-button{
  min-width:220px;
  margin-top:3px;
  padding:12px 18px;
  border:0;
  border-radius:11px;
  background:#305c86;
  color:#fff;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 6px 15px rgba(37,77,119,.2);
}
.special-next-button:hover{background:#244a6f;transform:translateY(-1px)}
.special-next-button:disabled{opacity:.6;cursor:wait}
.special-next-button:disabled{cursor:not-allowed;box-shadow:none}
.typing-text.showing-result:has(.result-entry){min-height:455px}
.result-entry{margin-top:2px}
.keyboard.waiting-next-task .key{pointer-events:none;opacity:.5}
.keyboard.waiting-next-task .key.action-complete{
  opacity:1;
  border-color:#48a47f;
  border-bottom-color:#2f8062;
  background:#eaf8f2;
  color:#287557;
  box-shadow:0 0 0 4px rgba(72,164,127,.13);
}
.special-visual{
  width:min(100%,560px);
  min-height:82px;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  font-size:14px;
}
.task-dialog{
  width:min(100%,300px);
  padding:13px 16px;
  border:1px solid #cfdbe0;
  border-radius:11px;
  display:flex;
  flex-direction:column;
  background:#fff;
  box-shadow:0 9px 24px rgba(38,67,91,.12);
  text-align:left;
}
.task-dialog b{font-size:13px}
.task-dialog small{margin-top:4px;color:#6d778b;font-size:10px}
.task-empty-window{
  padding:12px 18px;
  border:2px dashed #79ad98;
  border-radius:10px;
  color:#2f8062;
  font-size:14px;
  font-weight:850;
}
.task-fields{width:min(100%,390px);display:grid;grid-template-columns:1fr 1fr;gap:8px}
.task-fields i,.task-answer{
  padding:9px 11px;
  border:1px solid #d8e0e4;
  border-radius:9px;
  display:flex;
  flex-direction:column;
  background:#fff;
  font-style:normal;
  text-align:left;
}
.task-fields i:first-child{border-color:#d8773f;box-shadow:0 0 0 3px rgba(216,119,63,.1)}
.task-fields-result i:first-child{border-color:#d8e0e4;box-shadow:none}
.task-fields-result i:last-child{border-color:#48a47f;box-shadow:0 0 0 3px rgba(72,164,127,.12)}
.task-fields small,.task-answer small{color:#7b8792;font-size:8px}
.task-fields b,.task-answer b{margin-top:2px;font-size:12px}
.task-transform{display:flex;align-items:center;gap:18px;font-size:21px}
.task-transform del{color:#9aa3ac}
.task-transform b{padding:7px 11px;border-radius:8px;background:#e8f3ef;color:#34735d}
.task-mode{
  padding:10px 15px;
  border-radius:10px;
  font-size:13px;
  font-weight:900;
}
.task-mode.on{background:#305c86;color:#fff}
.task-mode.off{border:1px solid #b9ccc4;background:#fff;color:#3e6858}
.task-symbol,.task-word{
  padding:10px 14px;
  border:1px solid #d8e0e4;
  border-radius:9px;
  background:#fff;
  font:700 18px/1.4 "Courier New",monospace;
}
.task-symbol b{margin-left:2px;color:#d8773f;font-size:24px}
.task-caret{
  width:2px;
  height:1.2em;
  display:inline-block;
  vertical-align:middle;
  background:#305c86;
  animation:blink .9s infinite;
}
.task-editor{
  width:min(100%,410px);
  padding:14px;
  border:1px solid #d8e0e4;
  border-radius:9px;
  background:#fff;
  color:#40546a;
  font:700 13px/1.5 "Courier New",monospace;
  text-align:left;
}
.multiline-result{min-height:62px;white-space:normal}
.selected-text{background:#305c86;color:#fff}
.task-language{display:flex;align-items:center;gap:12px}
.task-language b,.task-language strong{
  width:53px;
  height:42px;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:14px;
}
.task-language b{background:#305c86}
.task-language strong{background:#d8773f}
.task-language i{color:#82909b;font-style:normal}
.language-result b{opacity:.35}
.language-result strong{box-shadow:0 0 0 4px rgba(216,119,63,.15)}
.task-answer{width:min(100%,330px);position:relative}
.task-answer i{
  position:absolute;
  right:9px;
  top:9px;
  color:#43816b;
  font-size:8px;
  font-style:normal;
}
.task-answer-result{border-color:#48a47f;background:#f3fbf7}
.task-answer-result i{color:#287557;font-weight:900}
.task-word mark{
  padding:1px 2px;
  border-radius:3px;
  background:#ffe1d1;
  color:#b84e24;
}
.task-word-result{border-color:#79ad98;color:#287557}
.keyboard.special-keyboard{width:min(100%,900px)}
.special-keyboard-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
}
.key.special-key{
  width:auto;
  min-width:76px;
  padding:0 14px;
  border-bottom-color:#7890a1;
  font-size:11px;
}
.key.special-key.target{
  border-color:#d8773f;
  border-bottom-color:#b95a27;
  background:#fff0e6;
  color:#9d451d;
  box-shadow:0 0 0 4px rgba(216,119,63,.14);
}
@media(max-width:620px){
  .typing-text.special-task{min-height:430px;text-align:center}
  .special-purpose{padding:12px 13px;font-size:14px}
  .special-visual{padding:7px 0}
  .manual-field-grid{grid-template-columns:1fr}
  .check-task-button{width:100%}
  .task-fields{grid-template-columns:1fr}
  .special-keyboard-row{gap:6px}
  .key.special-key{min-width:calc(33.333% - 6px);height:38px;padding:0 7px;font-size:9px}
}

/* Крупная типографика для учеников 5–7 классов */
.brand-keys i{font-size:13px}
.topbar nav a{font-size:15px}
.profile-button b{font-size:14px}
.profile-button small{font-size:12px}
.eyebrow{font-size:13px}
.timer-box small{font-size:13px}
.card-title{font-size:16px}
.stats-grid span{font-size:12px;line-height:1.4}
.notice p{font-size:13px;line-height:1.5}
.section-title p{font-size:15px;line-height:1.55}
.lesson-icon{font-size:13px}
.lesson-copy small{font-size:12px}
.lesson-copy b{font-size:16px;line-height:1.3}
.lesson-copy em{font-size:13px;line-height:1.45}
.lesson-percent{font-size:12px}
.live-stats>span{font-size:12px;line-height:1.35}
.live-stats b{font-size:17px}
.live-stats .finish-early-button{font-size:13px}
.typing-hint{font-size:14px;line-height:1.5}
.key{font-size:12px}
.key.space{font-size:11px}
.result-banner small{font-size:12px}
.result-banner p{font-size:13px}
.mail-info small{font-size:12px}
.mail-info p{font-size:14px;line-height:1.55}
.status-pill{font-size:13px}
footer{font-size:13px}
.modal-keys i{font-size:13px}
.modal>p{font-size:14px;line-height:1.55}
.modal label{font-size:13px}
.privacy{font-size:12px;line-height:1.4}
.form-error{font-size:13px}
.finish-stats span{font-size:12px;line-height:1.4}
.cancel-button,.danger-button{font-size:13px}
.guide-heading p{font-size:15px;line-height:1.55}
.guide-tip{font-size:14px;line-height:1.5}
.special-step-count{font-size:12px}
.special-purpose b{font-size:12px}
.special-entry label{font-size:14px}
.task-dialog b{font-size:15px}
.task-dialog small{font-size:13px}
.task-fields small,.task-answer small{font-size:12px}
.task-fields b,.task-answer b{font-size:14px}
.task-answer i{font-size:11px}
.key.special-key{font-size:12px}
.check-task-button,.special-next-button{font-size:14px}

.keyboard{
  width:min(100%,900px);
  gap:7px;
}
.keyboard-row{gap:6px}
.key{
  width:56px;
  height:46px;
  border-radius:9px;
  font-size:16px;
  font-weight:900;
}
.key.space{
  width:330px;
  font-size:12px;
  font-weight:850;
}
.key.backspace{
  width:82px;
  font-size:22px;
}

@media(max-width:900px){
  .key{
    width:calc((100vw - 168px)/13);
    min-width:25px;
    height:43px;
    font-size:14px;
  }
  .key.space{width:48%;font-size:12px}
  .key.backspace{width:70px;font-size:20px}
}

@media(max-width:620px){
  .eyebrow{font-size:12px}
  .stats-grid span{font-size:11px}
  .lesson-copy small,.lesson-percent{font-size:11px}
  .lesson-copy em{font-size:12px}
  .keyboard{gap:5px}
  .keyboard-row{gap:3px}
  .key{
    width:calc((100vw - 82px)/13);
    min-width:21px;
    height:38px;
    font-size:12px;
  }
  .key.space{width:50%;font-size:11px}
  .key.backspace{width:62px;font-size:18px}
  .key.special-key{font-size:11px}
}