/* Общая палитра: синий, белый и чёрный. */
:root{--primary:#245ce8;--primary-hover:#1644bb;--secondary:#0b1020;--accent:#4e83ff;--bg-main:#fff;--surface:#fff;--border:#dce3ef;--text-main:#101725;--text-muted:#617087;--success:#245ce8}
body{color:#101725;background:#fff}.top-bar{background:#f0f4fc;color:#66758d;border-color:#e1e7f0}.role-selector select{color:#294977}.navbar{border-color:#e1e6ee}.logo-mark{border-color:#386ce7;color:#245ce8}.logo-mark:before{border-color:#7aa0ff}.logo small{color:#6b7a92}
.hero{background-color:#245ce8;background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);border-color:#245ce8;color:#fff}
.hero h1{color:white}.hero h1 span{color:#090e1b}.hero .eyebrow,.hero-bottom p,.hero-caption{color:#edf3ff}.hero .status-dot{background:white}.hero .btn-primary{background:#fff;color:#101725;border-color:#fff}.hero .btn-primary:hover{background:#e4ecff;color:#101725}.hero-art{color:#fff}.hero-art img{filter:grayscale(1) contrast(1.07)}.hero-art picture{filter:drop-shadow(0 25px 25px #05102d38)}
.art-topline,.art-bottomline{color:#e5edff}.art-bottomline button{color:white;border-color:#bdd1ff}.art-bottomline button:hover{background:#ffffff24}.hero-coordinate-rings span{border-color:#ffffff32}.hero-dots span{background:#e7efff}
.programs-section{background:#f3f6fc}.course-cover{background:#e4edff;color:#245ce8}.cover-data{background:#f1f4fa;color:#101725}.cover-frontend{background:#101725;color:#f7f9ff}.course-description i{color:#245ce8}.learning-numbers strong{color:#245ce8}.feature-icon{color:#245ce8}.teacher-avatar-placeholder,.profile-avatar-placeholder{background:#edf2ff;color:#245ce8;border-color:#d7e1fa}
.cta-panel{background:#0b1020}.cta-panel .eyebrow{color:#8aafff}.cta-panel h2{color:#fff}.cta-panel h2 span{color:#6795ff}.cta-panel p{color:#b7c5e0}.cta-panel .btn-light{border-color:#7d9ad2}.cta-panel .btn-light:hover{background:#fff;color:#1644bb}.footer{background:#0a0f1b;border-color:#0a0f1b}.footer-brand{color:#fff}.footer-dot{color:#4a7dff}.footer .text-link{color:#c2d4ff;border-color:#455572}.footer-inner{border-color:#2b354a;color:#9baac3}
.explorer-right{background:#245ce8;color:#fff}.explorer-right .eyebrow,.explorer-description,.explorer-meta,.explorer-meta>span:last-child,.explorer-teacher small,.explorer-teacher p,.teacher-experience,.fit-note,.explorer-footnote{color:#e0eaff}.explorer-meta,.explorer-teacher{border-color:#8aafff77}.teacher-monogram{background:#fff;color:#245ce8;border-color:#b7ceff}.course-fit li:before{color:#fff}.explorer-enroll{background:#0b1020;border-color:#0b1020;color:#fff}.explorer-enroll:hover{background:#18243d}.explorer-left{background:#f6f8fc;border-color:#dce3ef}.explorer-left h3 span{color:#245ce8}.explorer-course.is-selected{background:#e5edff}.explorer-goals button[aria-pressed=true],.journey-tracks button[aria-pressed=true]{background:#245ce8;border-color:#245ce8;color:#fff}
.learning-journey{border-color:#cbd8ef;background:#fff}.journey-top{border-color:#dbe3f0}.journey-scene{background:#f0f5ff}.journey-visual{background:radial-gradient(ellipse at 50% 35%,#dce8ff,transparent 75%);border-color:#d7e2f7}.knowledge-progress{stroke:#245ce8}.knowledge-bar path:first-of-type{fill:#9fbdff}.knowledge-bar path:last-of-type{fill:#204bc0}.knowledge-node.is-reached>circle:first-child{fill:#245ce8;stroke:#245ce8}.knowledge-node.is-reached text{fill:#143d93}.node-halo{stroke:#245ce8}.journey-level strong{color:#245ce8}.journey-task{border-color:#c7d7f5}.journey-stages button[aria-pressed=true]{background:#245ce8;color:#fff}.journey-stages button[aria-pressed=true] small{color:#d5e2ff}.journey-stages .is-complete{background:#e6edff;color:#254c9d}.journey-code-window strong{color:#245ce8}.window-code-line{background:#7ca2fa}.window-code-line.short{background:#becff5}
.cursor-ring{border-color:#3269e9;background:#ffffff10;box-shadow:0 0 0 1px #ffffff80}.cursor-dot{background:#245ce8;box-shadow:0 0 0 1px #ffffffb0}.cursor-trail.is-interactive .cursor-ring{border-color:#245ce8;background:#719bff20}

/* Монитор — настоящий HTML-экран внутри объёмной рамки. */
.monitor-scene{position:relative;perspective:1800px;padding:14px 20px 30px;isolation:isolate}
.monitor-scene:after{content:'';position:absolute;bottom:4px;left:19%;right:15%;height:38px;border-radius:50%;background:#0d225724;filter:blur(23px);z-index:-2}
.monitor-shell{position:relative;padding:22px 18px 0;background:linear-gradient(145deg,#30394b,#0b101b 42%,#171d2c);border:1px solid #424c60;border-radius:27px;transform:rotateX(3deg) rotateY(-3deg);transform-style:preserve-3d;box-shadow:14px 17px 0 #080b13,20px 30px 50px #07153425,inset 1px 1px 0 #77839866;z-index:2;transition:transform .65s ease}
.monitor-shell:before{content:'';position:absolute;top:9px;left:50%;width:5px;height:5px;background:#080b12;border:1px solid #4a566a;border-radius:50%;box-shadow:0 0 0 2px #0c111c}
.monitor-screen{position:relative;border:1px solid #050912;border-radius:9px;overflow:hidden;background:#f4f7ff;box-shadow:inset 0 0 0 1px #ffffff2b}
.monitor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 23px;background:#e9effb;border-bottom:1px solid #d0dcf3;color:#536987;font-size:9px;letter-spacing:1px;line-height:1.5}
.monitor-window-dots{display:flex;gap:6px;flex-shrink:0}.monitor-window-dots i{width:6px;height:6px;border-radius:50%;background:#a6b9e0}.monitor-window-dots i:first-child{background:#245ce8}.monitor-window-dots i:nth-child(2){background:#101725}
.monitor-shell .about-graphic-panel{background-color:#f5f8ff;background-image:radial-gradient(#245ce812 .8px,transparent .8px);border:0;border-radius:0;padding:33px 37px 8px;overflow:hidden}
.monitor-shell .about-graphic-panel:before,.monitor-shell .about-graphic-panel:after{border-color:#245ce80c}
.monitor-shell .about-graphic-panel .section-kicker{color:#6b7c98;border-color:#cfdaf0;margin-bottom:32px}
.monitor-shell .about-graphic-panel h2{color:#101725;font-size:clamp(30px,3vw,47px)}.monitor-shell .about-graphic-panel h2 span{color:#245ce8;font-size:inherit}
.monitor-shell .about-graphic-panel .intro-layout{gap:38px}.monitor-shell .about-graphic-panel .intro-copy p{color:#526580;font-size:16px}.monitor-shell .about-graphic-panel .text-link{color:#245ce8;border-color:#9eb7eb}
.monitor-shell .about-graphic-panel .learning-numbers{margin-top:30px;border-color:#cbd7ed}.monitor-shell .about-graphic-panel .learning-numbers>div+div{border-color:#cbd7ed}.monitor-shell .about-graphic-panel .learning-numbers strong{color:#245ce8;font-size:63px}.monitor-shell .about-graphic-panel .number-caption{color:#314564}.monitor-shell .about-graphic-panel .learning-numbers small{color:#70819b}
.monitor-chin{height:39px;display:flex;align-items:center;justify-content:center;position:relative;color:#8390aa;font-size:10px;letter-spacing:2px}.monitor-power{position:absolute;right:15px;top:17px;width:4px;height:4px;border-radius:50%;background:#5d92ff;box-shadow:0 0 8px #4b80ff}
.monitor-neck{height:80px;width:160px;background:linear-gradient(90deg,#151d2d,#444f65 45%,#222c40 75%,#111827);clip-path:polygon(28% 0,72% 0,90% 100%,10% 100%);margin:-3px auto 0;position:relative;z-index:1}
.monitor-base{height:27px;width:38%;max-width:430px;border-radius:50%;margin:-6px auto 0;background:linear-gradient(#47536a,#111827 65%,#050810);box-shadow:0 8px 10px #0a173028;border-bottom:4px solid #080d17;position:relative;z-index:2;transform:rotateX(25deg)}
.monitor-power-button{position:absolute;right:0;top:0;width:44px;height:39px;padding:0;border:0;background:transparent;border-radius:5px}
.monitor-power-button .monitor-power{right:20px;transition:background .35s,box-shadow .35s}
.monitor-power-button:hover .monitor-power{box-shadow:0 0 15px 3px #4b80ff88}
.monitor-screen:before,.monitor-screen:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0}
.monitor-screen:before{background:linear-gradient(135deg,#0a1020,#020408 55%,#0a1120)}
.monitor-screen:after{z-index:6;background:radial-gradient(ellipse,#ffffff 0,#bed5ff 30%,#3c78fb 65%,transparent 85%);transform-origin:center;transform:scale(.02,.003)}
.monitor-armed:not(.monitor-on) .monitor-screen:before{opacity:1}
.monitor-armed:not(.monitor-on) .monitor-toolbar,.monitor-armed:not(.monitor-on) .about-graphic-panel{opacity:0;pointer-events:none}
.monitor-armed:not(.monitor-on) .monitor-power{background:#3c4659;box-shadow:none}
.monitor-armed.is-booting .monitor-screen:before{animation:monitor-blackout 1.8s .45s ease both}
.monitor-armed.is-booting .monitor-screen:after{animation:monitor-backlight 1.6s .45s ease both}
.monitor-armed.is-booting .monitor-toolbar,.monitor-armed.is-booting .about-graphic-panel{opacity:1;transition:opacity .75s 1.15s ease;pointer-events:auto}
.monitor-armed.is-booting .monitor-power,.monitor-on .monitor-power{background:#5d92ff;box-shadow:0 0 12px #4b80ff}
.monitor-on .monitor-toolbar,.monitor-on .about-graphic-panel{opacity:1;pointer-events:auto}
@keyframes monitor-blackout{0%,28%{opacity:1}55%{opacity:.8}100%{opacity:0}}
@keyframes monitor-backlight{0%{opacity:0;transform:scale(.03,.003)}20%{opacity:.9;transform:scale(.85,.004)}47%{opacity:.6;transform:scale(1,.8)}100%{opacity:0;transform:scale(1.15,1.1)}}
@media(max-width:768px){.monitor-power-button{height:33px}}
@media(prefers-reduced-motion:reduce){.monitor-screen:before,.monitor-screen:after{display:none!important}.monitor-armed .monitor-toolbar,.monitor-armed .about-graphic-panel{opacity:1!important;pointer-events:auto!important;transition:none!important}}
@media(min-width:769px) and (hover:hover) and (pointer:fine){.monitor-scene:hover .monitor-shell{transform:rotateX(1deg) rotateY(1deg)}}
@media(max-width:1100px){.monitor-scene{padding:10px 13px 25px}.monitor-shell{padding:19px 14px 0;border-radius:22px;box-shadow:9px 12px 0 #080b13,17px 26px 40px #07153422}.monitor-shell .about-graphic-panel{padding:27px 26px 5px}.monitor-shell .about-graphic-panel h2{font-size:34px}.monitor-shell .about-graphic-panel .intro-layout{gap:28px}}
@media(max-width:768px){.monitor-scene{padding:5px 5px 22px;perspective:none}.monitor-shell{transform:none;padding:18px 10px 0;border-radius:18px;box-shadow:5px 7px 0 #080b13,10px 18px 28px #07153422}.monitor-toolbar{padding:11px 12px;font-size:7px;letter-spacing:.4px;gap:10px}.monitor-window-dots{gap:4px}.monitor-window-dots i{width:4px;height:4px}.monitor-toolbar>span:last-child{display:none}.monitor-shell .about-graphic-panel{padding:22px 15px 4px}.monitor-shell .about-graphic-panel .intro-layout{grid-template-columns:1fr;gap:23px}.monitor-shell .about-graphic-panel .section-kicker{font-size:9px;margin-bottom:23px}.monitor-shell .about-graphic-panel h2{font-size:clamp(25px,6.8vw,39px)}.monitor-shell .about-graphic-panel .intro-copy p{font-size:15px}.monitor-shell .about-graphic-panel .text-link{font-size:11px;gap:12px}.monitor-shell .about-graphic-panel .learning-numbers{margin-top:24px}.monitor-shell .about-graphic-panel .learning-numbers strong{font-size:43px}.monitor-shell .about-graphic-panel .learning-numbers>div+div{border-color:#cbd7ed}.monitor-shell .about-graphic-panel .learning-numbers small{font-size:11px}.monitor-shell .about-graphic-panel .number-caption{font-size:12px}.monitor-chin{height:33px;font-size:8px}.monitor-power{top:14px;right:9px}.monitor-neck{height:56px;width:110px}.monitor-base{height:20px;width:57%}.hero h1 span{color:#090e1b}.footer-brand .text-link{color:#c2d4ff}}

.demo-note{font-size:12px;line-height:1.35;color:#425575;max-width:270px}.role-selector{flex-wrap:wrap}@media(max-width:700px){.demo-note{max-width:none;width:100%;text-align:center}}