:root {
  color-scheme: dark;
  --bg: #0c101b;
  --panel: #131a29;
  --border: #ffffff12;
  --text: #ecf0fc;
  --muted: #96a2bc;
  --accent: #b7a0ff;
  --green: #71e3bd;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at 88% 0%, #6240a915, transparent 55%); pointer-events: none; z-index: -1; }
button, input, textarea { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
button:focus-visible, a:focus-visible, summary:focus-visible, label:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
::selection { background: #ad8dff45; color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #3a435d transparent; }

/* Навигация и личный прогресс */
.sidebar { position: fixed; inset: 0 auto 0 0; width: 264px; border-right: 1px solid var(--border); background: #101522; display: flex; flex-direction: column; padding: 30px 16px 20px; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 23px; font-weight: 780; padding: 0 10px 30px; letter-spacing: -.8px; }
.brand small { display: block; font-size: 8px; font-weight: 500; color: #8290ac; letter-spacing: 2.1px; margin-top: 2px; }
.brand-icon { width: 45px; height: 47px; flex-shrink: 0; display: grid; place-content: center; font: 800 26px var(--mono); border: 1px solid #e5d9ff55; border-radius: 14px; background: linear-gradient(145deg, #cfb6ff, #8b68e8); color: #20143b; position: relative; box-shadow: 0 5px 24px #a78ae92b, inset 0 1px 0 #ffffff66; }
.brand-icon span { font-size: 10px; position: absolute; right: 4px; top: 4px; }
.course-label { font-size: 9px; font-weight: 650; letter-spacing: 1.9px; color: #73819e; padding: 8px 12px 14px; display: flex; justify-content: space-between; align-items: center; }
.course-label span { letter-spacing: .3px; font: 9px var(--mono); background: #ffffff05; border: 1px solid #ffffff15; border-radius: 5px; padding: 3px 5px; }
#roadmap { flex: 1; overflow-y: auto; min-height: 90px; }
.module { margin: 4px 0 12px; }
.module summary { list-style: none; padding: 9px 8px; cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: 10px; font-weight: 650; color: #cbd3e8; }
.module summary::-webkit-details-marker { display: none; }
.module summary::after { content: '⌄'; margin-left: auto; color: #6b7894; }
.module:not([open]) summary::after { content: '›'; }
.module-index { color: #baa2ff; background: #ad8dff12; border: 1px solid #ad8dff20; border-radius: 7px; font: 10px var(--mono); padding: 6px; }
.module:nth-child(2) .module-index { color: #72dfc2; background: #72dfc210; border-color: #72dfc220; }
.module:nth-child(3) .module-index { color: #7cbdff; background: #7cbdff10; border-color: #7cbdff20; }
.module:nth-child(4) .module-index { color: #f1c482; background: #f1c48210; border-color: #f1c48220; }
.lesson-link { border: 1px solid transparent; background: transparent; text-align: left; width: 100%; padding: 9px 10px 9px 13px; color: #8491ae; font-size: 11px; border-radius: 8px; display: flex; gap: 10px; align-items: center; line-height: 1.55; margin: 3px 0; transition: background .15s, color .15s; }
.lesson-link:hover { background: #ffffff05; color: var(--text); }
.lesson-link.active { background: linear-gradient(90deg, #a381ff22, #a381ff0c); color: #dacbff; border-color: #b593ff22; box-shadow: inset 3px 0 #b593ff; }
.lesson-link .step { width: 19px; height: 19px; border: 1px solid #ffffff20; border-radius: 50%; font: 9px/17px var(--mono); text-align: center; flex-shrink: 0; }
.lesson-link.active .step { color: #171126; background: #baa0fb; border-color: #baa0fb; }
.lesson-link.done .step { border-color: #71e3bd44; color: var(--green); background: #71e3bd12; }
.project-dot { color: #ebbf75; margin-left: auto; font-size: 13px; }
.journey-card { flex-shrink: 0; margin: 12px 3px 0; padding: 15px; background: linear-gradient(130deg, #a381ff12, #71e3bd04); border: 1px solid #b19aff20; border-radius: 12px; }
.journey-caption { display: flex; justify-content: space-between; align-items: center; color: #c7cfe2; font-size: 11px; }
.journey-caption strong { font: 700 13px var(--mono); color: #c8b4ff; }
.journey-card progress { width: 100%; height: 5px; margin: 12px 0 1px; display: block; }
.journey-card p { color: #8895b1; font-size: 10px; margin: 10px 0; }
.journey-tag { font-size: 9px; color: #b7a1dd; }
.sidebar-bottom { padding: 16px 7px 0; margin-top: 16px; border-top: 1px solid var(--border); font-size: 10px; color: var(--muted); }
.sidebar-bottom small { display: block; margin-left: 12px; font-size: 9px; color: #606e89; margin-top: 3px; }
.status-dot { width: 5px; height: 5px; background: var(--green); display: inline-block; border-radius: 50%; margin-right: 5px; box-shadow: 0 0 9px #71e3bd44; }

/* Обложка: маленький мир, который можно создать самому */
.workspace { margin-left: 264px; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 38px; border-bottom: 1px solid var(--border); gap: 15px; background: #0f142080; }
.breadcrumb { font-size: 12px; color: #7e8ba7; }
.breadcrumb span { padding: 0 15px; color: #46516a; }
.breadcrumb strong { font-weight: 500; color: #c7d0e7; }
.overall { display: flex; gap: 15px; align-items: center; color: #b0bbd2; font-size: 11px; white-space: nowrap; }
progress { width: 95px; height: 5px; border: 0; border-radius: 10px; overflow: hidden; background: #ffffff0c; }
progress::-webkit-progress-bar { background: #ffffff0c; }
progress::-webkit-progress-value { background: linear-gradient(90deg, #9d7deb, #c2aaff); border-radius: 10px; }
progress::-moz-progress-bar { background: #b69aff; border-radius: 10px; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; background: linear-gradient(135deg, #a78ae929, #a78ae909); border: 1px solid #a78ae947; border-radius: 11px; color: #cfbbff; font-weight: 700; }
main { max-width: 1560px; padding: 30px 38px 20px; margin: auto; }
.welcome { display: flex; align-items: center; justify-content: space-between; min-height: 310px; border-radius: 20px; border: 1px solid #b29aff25; padding: 35px 38px; gap: 20px; position: relative; isolation: isolate; background: radial-gradient(ellipse at 100% 45%, #643d9b30, transparent 60%), linear-gradient(110deg, #1d2238, #151b2c 60%, #1b2034); overflow: hidden; box-shadow: inset 0 1px 0 #ffffff06, 0 14px 55px #00000012; }
.welcome::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#b9a1ff05 1px, transparent 1px), linear-gradient(90deg, #b9a1ff05 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(90deg, transparent 20%, black); }
.hero-copy { max-width: 560px; z-index: 2; }
.hero-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 8px; letter-spacing: 1.4px; font-weight: 650; padding: 5px 10px; color: #c9bcdf; background: #ffffff04; border: 1px solid #ffffff12; border-radius: 6px; }
.hero-badge .status-dot { margin: 0; width: 4px; height: 4px; }
.badge-separator { color: #655d7f; margin: 0 3px; }
h1 { font-size: clamp(34px, 3.15vw, 52px); line-height: 1.13; letter-spacing: -1.8px; margin: 20px 0 16px; font-weight: 780; }
h1 span { color: #c6b2ff; background: linear-gradient(100deg, #d6c4ff, #b89aff 70%, #8ed9df); background-clip: text; -webkit-text-fill-color: transparent; }
.welcome p { font-size: 12px; line-height: 1.9; color: #a0aac2; margin: 0; max-width: 405px; }
.hero-facts { display: flex; gap: 16px; align-items: center; margin-top: 23px; color: #a2acc3; font-size: 10px; }
.hero-facts strong { color: #e1e6f7; font-weight: 700; font-size: 12px; margin-right: 3px; }
.hero-facts i { width: 1px; height: 12px; background: #ffffff1a; }
.hero-facts .fact-pace { color: #9edbc9; }
.fact-pace b { margin-left: 5px; }
.hero-scene { position: relative; width: 365px; height: 256px; flex-shrink: 0; perspective: 800px; }
.game-window { position: absolute; top: 27px; left: 24px; width: 294px; overflow: hidden; border: 1px solid #bda4f43d; border-radius: 12px; background: #121827; box-shadow: 0 18px 65px #0005, 0 0 40px #b88dff0c; transform: rotate(-5deg); animation: float-window 9s ease-in-out infinite; }
.window-bar { height: 30px; background: #262c42; border-bottom: 1px solid #ffffff0b; display: flex; align-items: center; padding: 0 11px; gap: 15px; font: 8px var(--mono); color: #9ea8c4; }
.window-dots { display: flex; gap: 4px; }
.window-dots i { width: 5px; height: 5px; border-radius: 50%; background: #fd939e; }
.window-dots i:nth-child(2) { background: #e4c17f; }
.window-dots i:nth-child(3) { background: #79d3b0; }
.window-language { margin-left: auto; color: #bca8f1; }
.pixel-world { height: 122px; position: relative; overflow: hidden; background: linear-gradient(#222944, #303451); }
.world-stars { position: absolute; inset: 8px 16px auto; font-size: 14px; letter-spacing: 8px; color: #d5c5ff9c; }
.pixel-moon { width: 24px; height: 24px; position: absolute; right: 35px; top: 24px; background: #e7d4ff; box-shadow: 0 0 30px #d3aaff40; clip-path: polygon(20% 0,80% 0,80% 20%,100% 20%,100% 80%,80% 80%,80% 100%,20% 100%,20% 80%,0 80%,0 20%,20% 20%); }
.mountain { position: absolute; bottom: 20px; width: 260px; height: 74px; clip-path: polygon(0 100%, 0 80%, 10% 80%, 10% 60%, 20% 60%, 20% 35%, 30% 35%, 30% 15%, 40% 15%, 40% 0, 50% 0, 50% 20%, 60% 20%, 60% 40%, 70% 40%, 70% 60%, 85% 60%, 85% 80%, 100% 80%, 100% 100%); }
.mountain-back { left: 40px; background: #6b5b9d55; }
.mountain-front { left: -40px; bottom: 12px; background: #7564a05c; transform: scale(.75); }
.pixel-ground { position: absolute; bottom: 0; height: 24px; width: 100%; background: repeating-linear-gradient(90deg, #3e3958 0 14px, #343047 14px 28px); border-top: 4px solid #81ccbd; box-shadow: 0 -2px 0 #81ccbd33; }
.pixel-hero { position: absolute; bottom: 24px; left: 92px; width: 18px; height: 24px; background: #bea1ff; box-shadow: -5px 6px 0 -2px #9c82df, 5px 6px 0 -2px #9c82df; clip-path: polygon(20% 0,80% 0,80% 15%,100% 15%,100% 65%,80% 65%,80% 100%,60% 100%,60% 80%,40% 80%,40% 100%,20% 100%,20% 65%,0 65%,0 15%,20% 15%); }
.pixel-hero i { position: absolute; top: 5px; left: 4px; width: 11px; height: 6px; background: #272b45; border-right: 3px solid #91f2dc; }
.pixel-coin { position: absolute; bottom: 44px; color: #f5d489; font-size: 19px; text-shadow: 0 0 15px #f5d48944; }
.coin-one { left: 155px; }
.coin-two { left: 197px; bottom: 60px; }
.world-caption { position: absolute; right: 9px; bottom: 6px; color: #d1c5ec90; font: 5px var(--mono); letter-spacing: 1.2px; }
.window-code { padding: 12px 17px; font: 9px/1.75 var(--mono); color: #d4cce8; }
.scene-orbit { position: absolute; border: 1px dashed #c1a1ff22; border-radius: 50%; width: 350px; height: 190px; left: 0; top: 36px; transform: rotate(-30deg); }
.orbit-b { transform: rotate(28deg); width: 250px; left: 62px; border-color: #bda1ff0e; }
.scene-star { position: absolute; color: #d5bcff; }
.star-a { top: 9px; right: 13px; font-size: 24px; }
.star-b { bottom: 8px; left: 17px; font-size: 20px; color: #8ee4d6; }
.scene-label { position: absolute; top: 2px; left: 40px; font: 7px var(--mono); letter-spacing: 1.2px; color: #a5a0bf; }
.scene-label span { color: #7bd6b6; margin-left: 12px; font-size: 6px; }
.floating-badge { position: absolute; border: 1px solid #bca1ff2b; border-radius: 10px; padding: 10px 14px; background: #252a3ef2; display: flex; gap: 10px; align-items: center; box-shadow: 0 8px 30px #0003; font-size: 10px; font-weight: 600; }
.floating-badge>span { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; background: #71e3bd15; color: #71e3bd; }
.floating-badge small { display: block; font-size: 7px; font-weight: 400; color: #9da6bf; margin-top: 1px; }
.badge-build { left: -7px; bottom: 9px; transform: rotate(-3deg); }
.badge-level { right: -5px; top: 59px; transform: rotate(5deg); }
.badge-level>span { background: #edc77c15; color: #edc77c; }
@keyframes float-window { 0%,100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-5px); } }

/* Маршрут обучения */
.section-caption { display: flex; justify-content: space-between; gap: 12px; color: #687895; margin: 26px 0 12px; font-size: 10px; }
.section-caption span:first-child { font-size: 9px; letter-spacing: 1.6px; color: #9ca9c6; font-weight: 650; }
.milestones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 34px; }
.milestones>div { padding: 17px 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(140deg, #1b2132, #141b29); position: relative; box-shadow: 0 5px 14px #0000000b; transition: transform .2s, border-color .2s; }
.milestones>div:hover { transform: translateY(-3px); border-color: #b99aff44; }
.milestone-icon { display: grid; place-items: center; background: #b49aff14; border: 1px solid #b49aff17; width: 36px; height: 38px; border-radius: 10px; color: #baa2f4; font-size: 21px; flex-shrink: 0; }
.milestones p { margin: 0; }
.milestones strong { display: flex; flex-direction: column; gap: 1px; color: #7685a4; font-size: 9px; font-weight: 500; white-space: nowrap; }
.milestones strong span { color: #dce3f5; font-size: 12px; font-weight: 650; }
.milestones small { font-size: 9px; color: #7b8ba7; white-space: nowrap; }
.milestones .featured { border-color: #75d9bc36; background: linear-gradient(130deg, #71e3bd0b, #141b29); }
.featured .milestone-icon { background: #71e3bd12; border-color: #71e3bd20; color: #71e3bd; }
.milestones>div:nth-child(3) .milestone-icon { color: #82bfff; border-color: #82bfff20; background: #82bfff10; }
.milestones>div:nth-child(4) .milestone-icon { color: #eac58c; border-color: #eac58c20; background: #eac58c10; }
.milestones .stage-current { border-color: #b69aff66; box-shadow: 0 0 0 1px #b69aff0b, 0 8px 20px #0001; }
.pill { position: absolute; right: 10px; top: -8px; background: #1d3c36; border: 1px solid #71e3bd25; color: #8fe8ca; padding: 1px 7px; font-size: 7px; letter-spacing: 1px; border-radius: 5px; }
.lesson-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-top: 4px; }
.eyebrow { color: #ac93f0; font-size: 9px; letter-spacing: 1.7px; font-weight: 650; }
.lesson-heading h2 { font-size: 27px; line-height: 1.3; letter-spacing: -.6px; margin: 8px 0 5px; }
.lesson-heading p { margin: 0; font-size: 12px; color: var(--muted); }
.duration { font-size: 11px; color: #b5c0d6; background: #ffffff04; border: 1px solid #ffffff12; padding: 6px 11px; border-radius: 8px; white-space: nowrap; }
.learning-grid { display: grid; grid-template-columns: minmax(290px, .85fr) minmax(360px, 1.15fr); gap: 20px; align-items: start; }
.lesson-card, .editor-card, .console-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 24px #00000012; }
.lesson-card { background: linear-gradient(135deg, #171f30, #131a29); }
.tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 22px; gap: 26px; background: #ffffff02; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: #60708d; font: 10px var(--mono); padding: 20px 0 17px; display: flex; align-items: center; gap: 9px; }
.tabs button span { font: 600 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #8a98b4; }
.tabs button[aria-selected=true] { border-color: #b49aff; color: #c8b2ff; }
.tabs button[aria-selected=true] span { color: #e0d5fa; }
.lesson-body { padding: 25px; }
.lesson-body p { font-size: 13px; line-height: 1.95; color: #a9b5ce; margin: 0 0 19px; }
.lesson-body p:first-child { color: #d1d9eb; }
.mini-label { display: block; font-size: 9px; letter-spacing: 1.3px; color: #7f90ae; font-weight: 600; }
.example { background: #0c121f; border: 1px solid #ffffff0d; border-left: 2px solid #aa8bf855; border-radius: 8px; padding: 16px; color: #c6cfe4; font: 12px/1.9 var(--mono); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 11px 0 19px; }
.text-button { padding: 0; border: 0; background: none; color: #bda4fa; font-size: 12px; line-height: 1.6; transition: color .15s; }
.text-button:hover { color: #e0d0ff; }
#to-task { display: block; padding: 10px 13px; background: #b49aff0d; border: 1px solid #b49aff25; border-radius: 7px; width: 100%; text-align: left; }
#to-task:hover { background: #b49aff16; }
.lesson-footer { display: flex; gap: 13px; align-items: center; border-top: 1px solid var(--border); padding: 17px 24px; background: #b49aff04; color: #b6a2db; }
.lesson-footer>span { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #b49aff17; background: #b49aff0b; border-radius: 9px; font-size: 23px; }
.lesson-footer p { margin: 0; font-size: 11px; color: #8d9bb6; line-height: 1.7; }
.task-badge { display: inline-block; background: #71e3bd0d; border: 1px solid #71e3bd20; color: #87ddc2; font-size: 8px; letter-spacing: 1.5px; padding: 4px 9px; border-radius: 5px; margin-bottom: 15px; }
.sample { background: #0c121f; border: 1px solid var(--border); border-radius: 8px; padding: 15px; }
.sample pre { font: 12px/1.8 var(--mono); white-space: pre-wrap; color: #c7d1e6; margin: 6px 0 15px; }
.sample pre:last-child { margin-bottom: 0; color: #8cdcc5; }
.lesson-body .check-note { font-size: 11px; line-height: 1.85; color: #7f90ae; margin-top: 16px; }
.hints p { border-left: 2px solid #b49aff88; background: #b49aff06; border-radius: 0 6px 6px 0; padding: 10px 13px; margin: 13px 0; font-size: 12px; color: #c3b5e4; }
#solution-details { margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--border); font-size: 11px; color: #8e9cba; }
#solution-details summary { cursor: pointer; }
#solution-details .example { max-height: 450px; overflow: auto; }

/* Редактор с настоящей подсветкой кода */
.coding-column { display: flex; flex-direction: column; gap: 17px; min-width: 0; }
.editor-card { border-color: #9b88cc2a; }
.editor-top { display: flex; justify-content: space-between; align-items: center; height: 48px; background: #1b2233; border-bottom: 1px solid var(--border); }
.file-tab { font: 11px var(--mono); display: flex; align-items: center; gap: 9px; padding: 16px 20px; background: #0d1421; border-right: 1px solid var(--border); border-top: 2px solid #b297fa; height: 48px; }
.file-tab>span { color: #93bbff; font-size: 15px; }
.editor-top>div { display: flex; align-items: center; gap: 7px; padding-right: 12px; }
.language { font: 9px var(--mono); color: #98a8c5; background: #ffffff04; border: 1px solid #ffffff0c; border-radius: 4px; padding: 3px 5px; margin-right: 6px; }
.icon-button { border: 0; background: none; color: #8c9bb8; font-size: 20px; width: 27px; height: 30px; border-radius: 6px; line-height: 1; }
.icon-button:hover { background: #ffffff08; color: #d7c9f5; }
.editor-area { height: 334px; display: flex; background: #0d1421; padding: 22px 0; overflow: hidden; position: relative; }
#line-numbers { padding: 0 16px 0 18px; color: #43516b; font: 13px/1.85 var(--mono); margin: 0; text-align: right; user-select: none; min-width: 48px; overflow: hidden; }
.code-shell { flex: 1; position: relative; min-width: 0; height: 100%; }
#code, #code-highlight { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; font: 13px/1.85 var(--mono); tab-size: 4; padding: 0 18px 0 1px; white-space: pre; letter-spacing: 0; border: 0; background: none; }
#code { resize: none; color: #d2dced; outline: 0; overflow: auto; caret-color: #e1d1ff; }
#code-highlight { overflow: hidden; pointer-events: none; color: #ccd6ea; }
.syntax-ready #code { color: transparent; -webkit-text-fill-color: transparent; }
.syntax-ready #code::selection { background: #b49aff33; -webkit-text-fill-color: transparent; }
.syntax-comment { color: #637b8f; font-style: italic; }
.syntax-string { color: #91ddc1; }
.syntax-keyword { color: #c5a4ff; }
.syntax-number { color: #f1c58c; }
.syntax-preprocessor { color: #e6a9c4; }
.syntax-function { color: #8fc5f5; }
.editor-bottom { background: #101827; color: #637492; font-size: 8px; display: flex; justify-content: space-between; padding: 9px 14px; gap: 8px; border-top: 1px solid #ffffff05; }
.actions { padding: 14px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--border); background: #171f2f; }
.button { border: 1px solid transparent; padding: 11px 17px; border-radius: 8px; font-size: 12px; font-weight: 650; transition: background .15s, transform .15s, box-shadow .15s; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.primary { background: linear-gradient(115deg, #b699fb, #a78af0); border-color: #d7c2ff33; color: #211638; box-shadow: 0 3px 13px #a180ff20, inset 0 1px 0 #ffffff33; }
.primary:hover { background: linear-gradient(115deg, #c9afff, #b79afa); box-shadow: 0 4px 20px #a180ff35; }
.secondary { background: #232e43; border-color: #ffffff12; color: #cbd5e8; }
.secondary:hover { background: #2b3850; }

/* Консоль и обратная связь */
.console-card { padding: 0 19px 19px; }
.console-heading { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 18px; gap: 10px; }
.console-heading h3 { font-size: 12px; font-weight: 650; margin: 0; }
.console-heading h3 span { font: 15px var(--mono); color: #96b8d5; padding-right: 7px; }
.console-heading>span { font-size: 9px; color: #8596b1; background: #ffffff04; border: 1px solid #ffffff08; border-radius: 5px; padding: 3px 6px; }
.console-card label span { font-size: 9px; letter-spacing: 0; font-weight: 400; color: #677b99; }
#stdin { width: 100%; background: #0c1320; color: #c7d2e8; border: 1px solid #ffffff10; border-radius: 7px; resize: vertical; padding: 10px 12px; font: 12px/1.7 var(--mono); margin-top: 8px; min-height: 60px; max-height: 230px; }
#stdin:focus { outline: 1px solid #b49aff77; }
#stdin::placeholder { font: 11px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #586b89; }
.output-label { display: flex; justify-content: space-between; align-items: center; margin: 15px 0 10px; }
.output-label button { color: #8493b0; font-size: 10px; }
.console-empty { color: #a4b0c7; font: 12px/1.9 var(--mono); margin: 0; padding: 7px 0; }
.console-empty span { font: 11px/1.9 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #7183a1; }
#output { max-height: 420px; overflow: auto; }
#output pre { margin: 5px 0 11px; font: 12px/1.85 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
#output .success { color: var(--green); }
#output .error { color: #f3a4b0; }
#output .info { color: #baa8ee; font-size: 11px; }
#output .test { border-top: 1px solid var(--border); padding: 11px 0; font-size: 11px; }
#output .test summary { cursor: pointer; }
#output .test .mini-label { margin-top: 10px; }
.completion { display: flex; align-items: center; gap: 17px; padding: 23px; margin-top: 24px; background: linear-gradient(110deg, #71e3bd0d, #71e3bd03); border: 1px solid #71e3bd33; border-radius: 14px; }
.completion-icon { width: 40px; height: 40px; background: #71e3bd16; border: 1px solid #71e3bd22; color: var(--green); border-radius: 12px; display: grid; place-items: center; font-size: 19px; }
.completion h3 { font-size: 16px; margin: 0; color: #abefd5; }
.completion p { font-size: 12px; margin: 3px 0; color: #8caeaa; }
.completion button { margin-left: auto; white-space: nowrap; }
.page-footer { display: flex; align-items: center; gap: 17px; padding: 27px 0 0; color: #667793; font-size: 10px; }
.page-footer>span { margin-right: auto; }
.page-footer .text-button { font-size: 10px; color: #9b91b6; white-space: nowrap; }
.import-label { cursor: pointer; }
.storage-note { color: #576985; font-size: 10px; margin: 9px 0 0; }
.mobile-menu { display: none; }
.notice { padding: 12px; border: 1px solid #f3a4b055; border-radius: 6px; color: #f3a4b0; }
.output-title { font-size: 12px; font-weight: 600; }

/* Адаптация под ноутбук, планшет и телефон */
@media (min-width: 1600px) {
  main { padding-top: 38px; }
  .welcome { padding: 42px 48px; }
  .hero-scene { margin-right: 35px; transform: scale(1.08); }
  .editor-area { height: 375px; }
  .lesson-body p { font-size: 14px; }
}
@media (max-width: 1250px) {
  .sidebar { width: 232px; padding-left: 12px; padding-right: 12px; }
  .workspace { margin-left: 232px; }
  main { padding: 25px; }
  .topbar { padding: 0 25px; }
  .brand { font-size: 21px; gap: 9px; }
  .welcome { padding: 28px; }
  .hero-scene { width: 290px; transform: scale(.85); transform-origin: center right; margin-left: -25px; }
  h1 { font-size: 38px; }
  .hero-facts { gap: 10px; font-size: 9px; }
  .hero-facts .fact-pace { display: none; }
  .hero-facts i:last-of-type { display: none; }
  .milestones { gap: 9px; }
  .milestones>div { padding: 13px 10px; gap: 8px; }
  .milestones small { font-size: 8px; }
  .milestone-icon { width: 30px; height: 34px; font-size: 19px; }
  .milestones strong span { font-size: 11px; }
  .learning-grid { grid-template-columns: minmax(250px, .85fr) minmax(320px, 1.15fr); gap: 16px; }
  .lesson-body { padding: 20px; }
  .editor-bottom span:last-child { display: none; }
  .breadcrumb span { padding: 0 8px; }
  .journey-card { padding: 12px; }
  .journey-tag { font-size: 8px; }
}
@media (max-width: 1050px) {
  .hero-scene { display: none; }
  .welcome { min-height: 285px; }
  .hero-copy { max-width: none; }
  h1 { font-size: 43px; }
  .hero-facts .fact-pace { display: inline; }
  .hero-facts i:last-of-type { display: block; }
  .milestones { grid-template-columns: repeat(2, 1fr); }
  .milestones strong { flex-direction: row; align-items: center; gap: 7px; }
  .milestones small { font-size: 10px; }
  .milestones>div { padding: 14px; gap: 12px; }
  .learning-grid { grid-template-columns: 1fr; }
  .editor-area { height: 370px; }
  .lesson-body p { font-size: 14px; }
  .page-footer { flex-wrap: wrap; }
  .page-footer>span { width: 100%; }
  .completion { flex-wrap: wrap; }
  .completion button { margin-left: 57px; }
}
@media (max-height: 820px) and (min-width: 651px) {
  .sidebar { padding-top: 22px; }
  .brand { padding-bottom: 19px; }
  .journey-card { padding: 10px 13px; }
  .journey-card p { margin-bottom: 0; }
  .journey-tag { display: none; }
  .sidebar-bottom { margin-top: 12px; padding-top: 11px; }
}
@media (max-width: 650px) {
  .sidebar { transform: translateX(-100%); width: 270px; transition: transform .2s; box-shadow: 15px 0 60px #0009; }
  .sidebar.open { transform: translateX(0); }
  .workspace { margin-left: 0; }
  .mobile-menu { display: block; }
  .topbar { height: 62px; padding: 0 17px; gap: 13px; }
  .breadcrumb { font-size: 11px; flex: 1; }
  .breadcrumb strong, .breadcrumb span { display: none; }
  .overall { gap: 9px; font-size: 9px; }
  .overall progress { width: 42px; }
  .avatar { display: none; }
  main { padding: 19px 16px 18px; }
  .welcome { border-radius: 15px; padding: 25px 22px; min-height: 284px; }
  .hero-badge { font-size: 7px; letter-spacing: 1px; padding: 5px 7px; }
  h1 { font-size: 37px; letter-spacing: -1.4px; margin: 20px 0 14px; }
  .welcome p { font-size: 11px; }
  .hero-facts { gap: 10px; margin-top: 20px; font-size: 9px; }
  .hero-facts strong { font-size: 11px; }
  .hero-facts .fact-pace, .hero-facts i:last-of-type { display: none; }
  .section-caption { margin-top: 23px; font-size: 8px; gap: 5px; }
  .section-caption span:first-child { font-size: 8px; letter-spacing: 1px; }
  .milestones { gap: 9px; margin-bottom: 29px; }
  .milestones>div { padding: 12px 10px; gap: 9px; }
  .milestone-icon { width: 28px; height: 32px; border-radius: 8px; font-size: 17px; }
  .milestones strong { flex-direction: column; align-items: start; gap: 0; font-size: 8px; }
  .milestones strong span { font-size: 10px; }
  .milestones small { display: none; }
  .pill { font-size: 6px; right: 6px; }
  .lesson-heading h2 { font-size: 25px; }
  .lesson-heading .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .lesson-heading p { font-size: 11px; }
  .duration { font-size: 9px; padding: 5px 8px; }
  .lesson-body { padding: 22px 20px; }
  .lesson-body p { font-size: 13px; }
  .tabs { padding: 0 20px; }
  .example { font-size: 11px; padding: 13px; }
  .editor-area { height: 350px; }
  #code, #code-highlight, #line-numbers { font-size: 12px; }
  .button { font-size: 11px; padding: 11px 13px; }
  .actions { justify-content: stretch; }
  .actions button { flex: 1; }
  .console-card { padding: 0 16px 17px; }
  .console-card label span { display: none; }
  .console-heading>span { font-size: 8px; }
  .completion { padding: 19px; gap: 12px; }
  .completion p { font-size: 11px; }
  .completion button { margin-left: 0; width: 100%; margin-top: 5px; }
  .completion-icon { flex-shrink: 0; }
  .page-footer { gap: 14px; font-size: 9px; }
  .storage-note { font-size: 9px; }
  .lesson-link { padding-top: 10px; padding-bottom: 10px; }
  .journey-card { margin-top: 10px; }
}
@media (max-width: 360px) {
  h1 { font-size: 32px; }
  .welcome { padding: 22px 18px; }
  .hero-facts { gap: 8px; }
  .milestones>div { padding: 11px 8px; gap: 6px; }
  .overall progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Понятный первый шаг: обучение важнее количества панелей. */
.hero-copy { min-width: 0; }
.welcome { padding-top: 33px; padding-bottom: 33px; background: radial-gradient(ellipse at 95% 30%, #7352b82d, transparent 55%), radial-gradient(ellipse at 0 100%, #539ea914, transparent 60%), linear-gradient(115deg, #1c2439, #171d31 65%, #1d2037); }
h1 { font-size: clamp(31px, 2.75vw, 46px); letter-spacing: -1.6px; line-height: 1.18; }
.hero-start { display: flex; gap: 15px; align-items: center; margin-top: 22px; }
.hero-start .button { font-size: 12px; padding: 12px 16px; white-space: nowrap; }
.hero-start .button span { margin-left: 13px; font-size: 16px; }
.hero-start>span { color: #91a2bc; font-size: 9px; line-height: 1.8; }
.hero-facts { margin-top: 21px; }
.focus-toggle { display: flex; align-items: center; gap: 7px; color: #aabbd4; background: #ffffff04; border: 1px solid #ffffff10; border-radius: 7px; padding: 6px 10px; font-size: 12px; }
.focus-toggle span { font-size: 10px; }
.focus-toggle[aria-pressed=true] { color: #ccbbff; background: #b59aff13; border-color: #b59aff44; }
.learning-promise { display: flex; align-items: center; gap: 13px; margin-top: 17px; padding: 15px 18px; border: 1px solid #8eb9d41b; border-radius: 12px; background: linear-gradient(100deg, #8eb9d407, transparent); }
.promise-icon { display: grid; place-items: center; width: 33px; height: 33px; flex-shrink: 0; font-size: 24px; color: #96d8d1; border: 1px solid #8ed3c91c; background: #8ed3c909; border-radius: 9px; }
.learning-promise strong { font-size: 12px; color: #d4e1ed; font-weight: 600; display: block; }
.learning-promise div>span { font-size: 10px; color: #91a4c0; }
.promise-end { margin-left: auto; font: 7px var(--mono); letter-spacing: 1.5px; color: #799ca9; white-space: nowrap; }
.lesson-heading-tools { display: flex; align-items: center; gap: 18px; }
.lesson-heading-tools .text-button { font-size: 10px; color: #a8a1c2; }
.lesson-goal { display: flex; align-items: center; gap: 13px; padding: 17px 20px; margin-bottom: 19px; border-radius: 12px; border: 1px solid #b09af32b; background: linear-gradient(100deg, #b09af30d, #b09af303); }
.goal-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid #b09af325; background: #b09af312; color: #cbb4ff; font-size: 21px; flex-shrink: 0; }
.lesson-goal .mini-label { color: #a295bf; font-size: 8px; }
.lesson-goal p { font-size: 13px; color: #d3dcef; margin: 3px 0 0; line-height: 1.7; }
.goal-tag { margin-left: auto; flex-shrink: 0; font: 7px var(--mono); letter-spacing: 1px; color: #958ab1; padding: 5px 8px; border-radius: 5px; border: 1px solid #b49aff16; }
.tabs { gap: 23px; }
.tabs button { gap: 7px; }
.tabs button span { font-size: 12px; }
.tabs button[aria-selected=true] { box-shadow: 0 8px 17px -10px #b49aff80; }
.analogy-card { padding: 15px 17px; background: linear-gradient(120deg, #e6c18709, #e6c18703); border: 1px solid #e6c18720; border-radius: 10px; margin-bottom: 22px; }
.analogy-card>span { display: block; font-size: 8px; letter-spacing: 1.4px; font-weight: 650; color: #d1b88e; margin-bottom: 7px; }
.lesson-body .analogy-card p { color: #c3bcb2; margin: 0; font-size: 12px; line-height: 1.9; }
.glossary, .technical-theory { border: 1px solid #a7bfd119; background: #0d142140; border-radius: 9px; margin-bottom: 18px; padding: 12px 14px; }
.glossary summary, .technical-theory summary { color: #b1c7de; font-size: 11px; cursor: pointer; }
.glossary summary span { float: right; border: 1px solid #8fb7dc25; border-radius: 5px; background: #8fb7dc10; color: #91badb; padding: 0 5px; font: 9px/1.7 var(--mono); }
.glossary dl { margin: 15px 0 0; }
.glossary dt { display: table; color: #a6d9d8; font: 11px/1.7 var(--mono); background: #8fcfd30b; border: 1px solid #8fcfd315; padding: 2px 7px; border-radius: 5px; overflow-wrap: anywhere; max-width: 100%; }
.glossary dd { font-size: 12px; line-height: 1.9; color: #97abc8; margin: 7px 0 15px; }
.glossary dd:last-child { margin-bottom: 2px; }
.technical-theory { border: 0; background: none; padding: 0 2px 5px; }
.technical-theory summary { color: #8c9fbc; font-size: 10px; }
.technical-theory div { margin-top: 15px; }
.lesson-body .technical-theory p { font-size: 12px; color: #8d9fbb; }
.panel-next, #to-task, #to-demo { display: block; padding: 12px 14px; background: #b49aff0d; border: 1px solid #b49aff25; border-radius: 8px; width: 100%; text-align: left; font-size: 11px; }
.panel-next:hover, #to-task:hover, #to-demo:hover { background: #b49aff18; }
.panel-intro h3, .practice-title { font-size: 17px; line-height: 1.6; font-weight: 650; letter-spacing: -.3px; margin: 0 0 10px; }
.panel-intro p { font-size: 12px; color: #96abc7; }
.walkthrough { overflow-x: auto; padding: 12px 0; border-radius: 9px 9px 0 0; border: 1px solid #9a88c52d; background: #0c1321; }
.walkthrough-line { display: flex; align-items: baseline; gap: 11px; width: max-content; min-width: 100%; background: transparent; border: 0; border-left: 2px solid transparent; padding: 3px 15px 3px 11px; text-align: left; line-height: 1.85; }
.walkthrough-line code { font: 11px/1.85 var(--mono); color: #bccce4; white-space: pre; }
.walkthrough-line:hover { background: #b59aff09; }
.walkthrough-line[aria-pressed=true] { background: #ad91ff16; border-left-color: #ad91ff; }
.walkthrough-line:focus-visible { outline-offset: -2px; }
.walkthrough-number { font: 9px/1.85 var(--mono); color: #526887; width: 16px; text-align: right; flex-shrink: 0; }
.walkthrough-line[aria-pressed=true] .walkthrough-number { color: #c9b6ff; }
.line-explanation { border: 1px solid #9a88c52d; border-top: 0; background: linear-gradient(130deg, #ad91ff12, #ad91ff06); border-radius: 0 0 9px 9px; padding: 15px; margin-bottom: 18px; }
.line-explanation .mini-label { color: #ad98d6; font-size: 8px; letter-spacing: 1px; }
.lesson-body .line-explanation p { font-size: 12px; color: #c7bedb; margin: 8px 0 0; min-height: 45px; }
.demo-io { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.demo-io>div { background: #0d1421; border: 1px solid #ffffff0a; border-radius: 8px; padding: 12px; min-width: 0; }
.demo-io .mini-label { font-size: 7px; letter-spacing: .8px; }
.demo-io pre { font: 11px/1.8 var(--mono); color: #b3c8df; margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.demo-io>div:last-child pre { color: #8edcc3; }
#demo-run { width: 100%; font-size: 11px; }
.demo-result { font-size: 11px; color: #9ecbbd; margin-top: 12px; }
.demo-result pre { font: 12px/1.8 var(--mono); border-left: 2px solid #71e3bd66; padding-left: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.demo-result .mini-label { color: #71e3bd; font-size: 7px; }
.quiz { padding: 18px 0; margin-top: 22px; border-top: 1px solid #ffffff0b; }
.quiz>.mini-label { font-size: 7px; letter-spacing: 1px; color: #7d92b0; }
.quiz h4 { font-size: 13px; font-weight: 600; line-height: 1.8; color: #d4ddef; margin: 10px 0 13px; }
.quiz-option { display: flex; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; background: #ffffff02; border: 1px solid #ffffff10; border-radius: 8px; color: #aabbd4; font-size: 11px; text-align: left; margin: 7px 0; line-height: 1.8; }
.option-letter { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border: 1px solid #ffffff14; border-radius: 5px; font: 9px var(--mono); color: #8698b7; }
.quiz-option:hover { background: #b49aff09; border-color: #b49aff40; }
.quiz-option.correct { color: #9ee1c9; border-color: #71e3bd55; background: #71e3bd09; }
.quiz-option.incorrect { color: #e6bb9b; border-color: #e6bb9b44; background: #e6bb9b08; }
.lesson-body #quiz-feedback { font-size: 11px; line-height: 1.9; margin: 13px 0 0; }
.lesson-body #quiz-feedback.correct { color: #9de0c8; }
.lesson-body #quiz-feedback.incorrect { color: #d0b897; }
.practice-title { margin-bottom: 15px; }
.practice-steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 22px; }
.practice-steps li { counter-increment: step; position: relative; padding: 0 0 20px 37px; font-size: 12px; line-height: 1.95; color: #b7c5dc; }
.practice-steps li::before { content: counter(step); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 24px; height: 24px; font: 10px var(--mono); color: #bda8ef; background: #b49aff10; border: 1px solid #b49aff25; border-radius: 8px; }
.practice-steps li:not(:last-child)::after { content: ''; position: absolute; top: 31px; bottom: 5px; left: 12px; border-left: 1px dashed #b49aff30; }
.practice-steps li:last-child { padding-bottom: 0; }
.full-task { margin-bottom: 20px; padding: 13px 15px; background: #ffffff02; border: 1px solid #ffffff0a; border-radius: 8px; }
.full-task summary { cursor: pointer; font-size: 11px; color: #a2b3cf; }
.lesson-body .full-task p { font-size: 12px; margin: 12px 0 0; color: #a9bbd4; }
.mistake-card { padding: 14px 15px; border-left: 2px solid #dbbb8655; background: #dbbb8607; border-radius: 0 8px 8px 0; margin: 19px 0; }
.mistake-card>span { font-size: 7px; letter-spacing: 1.2px; color: #c0a889; }
.lesson-body .mistake-card p { color: #b9afa6; font-size: 11px; line-height: 1.9; margin: 6px 0 0; }
.editor-helper { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid #90b7e11f; border-radius: 11px; background: #90b7e106; margin-bottom: -6px; }
.helper-number { display: grid; place-items: center; flex-shrink: 0; width: 29px; height: 29px; color: #92bcdd; border: 1px solid #90b7e12b; background: #90b7e10b; font: 12px var(--mono); border-radius: 9px; }
.editor-helper strong { display: block; font-size: 11px; font-weight: 600; color: #bed1e6; }
.editor-helper div>span { display: block; font-size: 9px; color: #7e96b5; margin-top: 2px; }
.editor-helper .text-button { margin-left: auto; font-size: 9px; white-space: nowrap; color: #8baccb; }
.console-heading h3 small { display: inline; font-weight: 400; color: #6f86a5; font-size: 9px; margin-left: 6px; }
.input-help { font-size: 10px; color: #8a9eb9; margin: 5px 0 1px; line-height: 1.8; }
.run-explainer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 0 3px; font-size: 9px; color: #6b83a3; }
.run-explainer b { color: #8ea6c4; font-weight: 500; }
.compiler-help { background: #efb59608; padding: 14px; border: 1px solid #efb59626; border-radius: 8px; margin-bottom: 15px; }
.compiler-help strong { color: #dec1ac; font-size: 12px; font-weight: 600; }
.compiler-help p { color: #bcaea6; font-size: 12px; line-height: 1.9; margin: 7px 0 10px; }
.compiler-help .text-button { font-size: 11px; color: #d4b5ee; }
.lesson-focus .welcome, .lesson-focus .learning-promise, .lesson-focus .section-caption, .lesson-focus .milestones { display: none; }
.lesson-focus .lesson-heading { padding-top: 0; }

/* Первое знакомство: три спокойных экрана вместо стены терминов. */
.intro-dialog { width: min(630px, calc(100% - 32px)); max-height: calc(100dvh - 36px); overflow: auto; padding: 35px; border-radius: 20px; color: #ecf0fc; border: 1px solid #c1a5ff40; background: radial-gradient(ellipse at 90% 0%, #8152bd22, transparent 60%), #151d2f; box-shadow: 0 30px 150px #0009, inset 0 1px 0 #ffffff0b; }
.intro-dialog::backdrop { background: #060b15bb; backdrop-filter: blur(9px); }
.intro-close { position: absolute; top: 16px; right: 15px; color: #8b9ab8; font-size: 25px; }
.intro-topline { display: flex; align-items: center; justify-content: space-between; padding-right: 27px; gap: 12px; }
.intro-topline .hero-badge { color: #b8a5de; font-size: 7px; }
#intro-counter { font: 9px var(--mono); color: #778baa; white-space: nowrap; }
.intro-visual { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 140px; margin: 26px 0 22px; border-radius: 14px; border: 1px solid #a8bdde14; background: linear-gradient(135deg, #b49aff08, #71e3bd06); background-image: linear-gradient(#a7baf406 1px, transparent 1px), linear-gradient(90deg, #a7baf406 1px, transparent 1px); background-size: 22px 22px; }
.intro-block { display: grid; place-items: center; min-height: 58px; padding: 12px 15px; border: 1px solid #c1a5ff2b; background: #292b44; border-radius: 11px; font-size: 11px; color: #d0bee9; box-shadow: 0 6px 15px #0002; }
.intro-block:last-child { border-color: #71e3bd30; background: #1b333b; color: #9edbc7; }
.intro-arrow { color: #7b789e; font-size: 16px; }
.intro-dialog h2 { font-size: 28px; line-height: 1.35; font-weight: 700; letter-spacing: -.8px; margin: 12px 0 15px; }
.intro-dialog>p { font-size: 14px; line-height: 1.95; color: #b1c0da; margin: 0 0 20px; }
.intro-detail { padding: 16px 18px; border: 1px solid #99bdd020; border-radius: 10px; background: #99bdd006; color: #91abc6; font-size: 12px; line-height: 1.9; }
.intro-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; gap: 12px; }
#intro-back { font-size: 11px; }
#intro-back:disabled { opacity: 0; pointer-events: none; }
.intro-dots { display: flex; gap: 5px; }
.intro-dots i { width: 5px; height: 5px; border-radius: 4px; background: #50617c; }
.intro-dots i.active { width: 16px; background: #bba2fb; }

@media (max-width: 1250px) {
  .hero-scene { width: 245px; transform: scale(.77); margin-left: -30px; }
  .hero-start>span { display: none; }
  .hero-facts { font-size: 9px; gap: 12px; }
  .hero-facts strong { font-size: 11px; }
  .hero-facts .fact-pace, .hero-facts i:last-of-type { display: none; }
  .tabs { gap: 15px; padding: 0 17px; }
  .tabs button { gap: 5px; }
  .tabs button span { font-size: 11px; }
  .goal-tag, .promise-end { display: none; }
  .editor-helper .text-button { display: none; }
  .lesson-heading-tools { gap: 10px; }
}
@media (max-width: 1050px) {
  .hero-scene { display: none; }
  h1 { font-size: 39px; }
  .hero-start>span { display: block; }
  .focus-toggle { padding: 5px 8px; }
  .focus-toggle span { display: none; }
  .editor-helper .text-button { display: block; }
  .lesson-focus .learning-grid { gap: 20px; }
}
@media (max-width: 650px) {
  h1 { font-size: 31px; letter-spacing: -1.2px; line-height: 1.2; }
  .welcome { padding: 25px 21px; }
  .hero-start { margin-top: 20px; }
  .hero-start>span { display: none; }
  .hero-start .button { font-size: 11px; padding: 11px 12px; }
  .hero-start .button span { font-size: 14px; }
  .hero-facts { gap: 12px; font-size: 8px; margin-top: 18px; }
  .learning-promise { padding: 12px; align-items: start; gap: 10px; }
  .learning-promise strong { font-size: 11px; }
  .learning-promise div>span { font-size: 10px; line-height: 1.8; display: block; margin-top: 3px; }
  .lesson-heading-tools { align-items: end; flex-direction: column-reverse; gap: 6px; }
  .lesson-heading-tools .text-button { font-size: 9px; }
  .lesson-goal { padding: 14px; gap: 11px; }
  .lesson-goal p { font-size: 12px; }
  .lesson-goal .mini-label { font-size: 7px; letter-spacing: 1px; }
  .tabs { padding: 0 16px; gap: 15px; }
  .tabs button { gap: 5px; font-size: 9px; }
  .tabs button span { font-size: 11px; }
  .lesson-body { padding: 20px 17px; }
  .analogy-card { padding: 14px; }
  .glossary { padding: 12px; }
  .glossary summary { font-size: 10px; }
  .glossary summary span { font-size: 8px; }
  .glossary dd { font-size: 11px; }
  .panel-intro h3, .practice-title { font-size: 16px; }
  .walkthrough-line { padding-right: 12px; padding-left: 8px; gap: 8px; }
  .walkthrough-line code { font-size: 10px; }
  .line-explanation { padding: 13px; }
  .lesson-body .line-explanation p { font-size: 11px; }
  .editor-helper { padding: 12px; gap: 10px; }
  .editor-helper .text-button { display: none; }
  .console-heading h3 small { display: none; }
  .focus-toggle { padding: 4px 6px; }
  .overall { gap: 7px; }
  .overall progress { display: none; }
  .run-explainer { font-size: 8px; }
  .intro-dialog { padding: 28px 22px 23px; border-radius: 16px; }
  .intro-topline { gap: 7px; padding-right: 15px; }
  .intro-topline .hero-badge { font-size: 6px; letter-spacing: .6px; padding: 4px 6px; }
  #intro-counter { font-size: 8px; }
  .intro-visual { gap: 7px; min-height: 110px; margin-top: 22px; padding: 10px; }
  .intro-block { padding: 10px 7px; min-height: 48px; font-size: 9px; text-align: center; }
  .intro-arrow { font-size: 12px; }
  .intro-dialog h2 { font-size: 24px; }
  .intro-dialog>p { font-size: 13px; }
  .intro-detail { padding: 13px; font-size: 11px; }
  .intro-bottom { gap: 9px; }
  #intro-back { font-size: 10px; }
  .intro-dots { gap: 4px; }
  #intro-next { padding: 10px 12px; font-size: 10px; }
}
@media (max-width: 360px) {
  h1 { font-size: 27px; }
  .hero-facts { font-size: 7px; gap: 9px; }
  .hero-facts strong { font-size: 10px; }
  .tabs { gap: 11px; padding: 0 13px; }
  .tabs button { gap: 4px; }
  .tabs button span { font-size: 10px; }
  .glossary summary { font-size: 9px; }
  .intro-visual { gap: 4px; padding: 7px; }
  .intro-block { font-size: 8px; padding: 9px 5px; }
}

/* Вход и личный кабинет. Учебное пространство открывается после входа. */
body:not(.signed-in)>.sidebar, body:not(.signed-in)>.workspace { display: none; }
.auth-screen { min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-story { display: flex; flex-direction: column; padding: 35px 48px 22px; border-right: 1px solid #b7a0ff18; background: radial-gradient(ellipse at 30% 20%, #8260bd20, transparent 65%), radial-gradient(ellipse at 0 100%, #6cb7c514, transparent 70%), #131a2b; position: relative; }
.auth-story::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#b6a1ff04 1px, transparent 1px), linear-gradient(90deg, #b6a1ff04 1px, transparent 1px); background-size: 40px 40px; }
.auth-story .brand { padding: 0; align-self: start; }
.auth-story-content { width: 100%; max-width: 560px; margin: auto; padding: 55px 0 40px; position: relative; }
.auth-story h1 { font-size: clamp(34px, 3.5vw, 58px); margin: 25px 0 20px; }
.auth-story-content>p { font-size: 14px; line-height: 1.95; color: #98acc7; max-width: 450px; margin-bottom: 27px; }
.auth-code-card { border: 1px solid #ad91ff28; border-radius: 13px; background: #0c1421; overflow: hidden; box-shadow: 0 15px 50px #0002; max-width: 440px; transform: rotate(-1deg); }
.auth-code-card .window-bar { height: 38px; font-size: 9px; }
.auth-code-card pre { font: 12px/2 var(--mono); color: #c7d6ed; padding: 22px; margin: 0; }
.auth-code-footer { display: flex; gap: 8px; justify-content: space-between; background: #71e3bd04; border-top: 1px solid #71e3bd13; padding: 10px 15px; font-size: 8px; color: #86b8ac; }
.auth-code-footer span:last-child { color: #6d829f; }
.auth-story-footer { color: #6a829f; font-size: 10px; letter-spacing: .4px; margin: 0; }
.auth-form-side { display: grid; place-items: center; padding: 55px 36px; background: radial-gradient(ellipse at 100% 0, #7351aa0d, transparent 60%); }
.auth-card { width: 100%; max-width: 378px; }
.auth-symbol { display: grid; place-items: center; width: 49px; height: 49px; font-size: 30px; background: linear-gradient(135deg, #b39aff19, #b39aff04); border: 1px solid #b39aff33; color: #c2abf7; border-radius: 14px; margin-bottom: 25px; }
.auth-card>.eyebrow { font-size: 8px; }
.auth-card h2 { font-size: 30px; letter-spacing: -.8px; margin: 9px 0 9px; line-height: 1.4; }
.auth-card>p { color: #8da3c0; font-size: 13px; line-height: 1.9; margin: 0 0 25px; }
.auth-tabs { display: flex; gap: 5px; border: 1px solid #ffffff10; border-radius: 10px; padding: 5px; background: #ffffff02; margin-bottom: 23px; }
.auth-tabs button { flex: 1; background: none; border: 1px solid transparent; border-radius: 7px; padding: 9px; color: #8197b5; font-size: 12px; }
.auth-tabs button[aria-selected=true] { background: #b49aff12; border-color: #b49aff25; color: #cab7f5; }
#auth-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
#auth-form label { display: block; font-size: 12px; color: #c2d0e5; margin-bottom: 8px; }
#auth-form input { display: block; width: 100%; background: #101827; border: 1px solid #ffffff14; color: #dae3f5; border-radius: 8px; padding: 13px 14px; font-size: 13px; outline: 0; }
#auth-form input::placeholder { color: #516c8c; font-size: 12px; }
#auth-form input:focus { border-color: #b49aff70; box-shadow: 0 0 0 3px #b49aff0b; }
.auth-field-help { display: block; font-size: 9px; color: #6a83a4; margin: 7px 0 20px; }
#confirm-password-field { margin-top: 18px; }
.auth-submit { margin-top: 24px; width: 100%; padding: 13px; font-size: 12px; }
#auth-message { min-height: 22px; margin: 13px 0 0; font-size: 11px; line-height: 1.9; color: #829dbc; }
#auth-message.auth-error { color: #f0adba; }
.auth-bottom-note { display: flex; gap: 11px; border-top: 1px solid #ffffff0d; margin-top: 20px; padding-top: 19px; }
.auth-bottom-note>span { color: #8bafc1; font-size: 18px; }
.auth-bottom-note p { margin: 0; font-size: 10px; color: #708aaa; line-height: 1.9; }
.legacy-export { margin-top: 19px; font-size: 10px; color: #a6a0bd; }
.account-chip { display: flex; align-items: center; gap: 10px; margin: 13px 3px 0; padding: 10px 11px; background: #ffffff03; border: 1px solid #ffffff0b; border-radius: 10px; }
.account-avatar { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #b49aff30; background: #b49aff14; color: #c8b4f6; font-size: 12px; border-radius: 8px; flex-shrink: 0; }
.account-chip>div { min-width: 0; }
.account-chip strong { display: block; color: #bfcee5; font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.account-chip small { font-size: 8px; color: #748cab; display: block; }
.account-chip button { margin-left: auto; flex-shrink: 0; font-size: 21px; }
.cloud-status { border: 1px solid #71e3bd18; border-radius: 6px; color: #8ac7b3; background: #71e3bd05; font-size: 9px; padding: 5px 8px; }
.cloud-status.sync-error { color: #edb398; border-color: #edb39830; background: #edb39808; }
.account-results { display: flex; align-items: center; gap: 28px; padding: 24px; border: 1px solid #8fbdd526; border-radius: 15px; background: linear-gradient(105deg, #8fbdd50b, #b49aff06); margin-bottom: 24px; }
.results-intro { margin-right: auto; }
.results-intro .eyebrow { color: #84b8c7; font-size: 8px; }
.results-intro h2 { font-size: 21px; letter-spacing: -.4px; margin: 5px 0 3px; }
.results-intro p { font-size: 10px; color: #7e99b6; margin: 0; }
.result-stat { flex-shrink: 0; padding-left: 20px; border-left: 1px solid #ffffff0d; }
.result-stat>strong { display: block; font: 600 26px/1.4 var(--mono); color: #c9b5fc; }
.result-stat>strong span { color: #59718e; font-size: 13px; font-weight: 400; }
.result-stat>span { display: block; font-size: 9px; color: #829cba; margin-top: 4px; }
.account-results .button { white-space: nowrap; font-size: 11px; }
.lesson-focus .account-results { padding: 17px 21px; }
@media (max-width: 1250px) {
  .auth-story { padding-left: 35px; padding-right: 35px; }
  .cloud-status { font-size: 8px; }
  .account-results { gap: 20px; padding: 20px; flex-wrap: wrap; }
  .account-results .button { display: none; }
  .results-intro h2 { font-size: 19px; }
  .result-stat { padding-left: 14px; }
}
@media (max-width: 900px) {
  .auth-screen { grid-template-columns: .85fr 1fr; }
  .auth-story { padding: 28px 25px; }
  .auth-story h1 { font-size: 37px; }
  .auth-story-content>p { font-size: 12px; }
  .auth-story .brand { font-size: 20px; }
  .auth-story .brand small { font-size: 6px; letter-spacing: 1.3px; }
  .auth-code-card pre { font-size: 9px; padding: 15px; }
  .auth-code-footer { flex-direction: column; font-size: 8px; gap: 2px; }
  .auth-form-side { padding: 40px 28px; }
  .cloud-status { display: none; }
  .results-intro { flex-basis: 100%; }
  .account-results { gap: 17px; }
  .result-stat { padding-left: 0; border: 0; padding-right: 25px; }
}
@media (max-width: 650px) {
  .auth-screen { grid-template-columns: 1fr; min-height: 100dvh; }
  .auth-story { padding: 22px 24px; border-right: 0; border-bottom: 1px solid #ffffff0b; }
  .auth-story .brand { font-size: 21px; }
  .auth-story .brand-icon { width: 36px; height: 39px; font-size: 22px; border-radius: 11px; }
  .auth-story-content { display: none; }
  .auth-story-footer { display: none; }
  .auth-form-side { display: block; padding: 30px 27px; }
  .auth-card { margin: 0 auto; }
  .auth-symbol { display: none; }
  .auth-card h2 { font-size: 28px; }
  .auth-card>p { font-size: 12px; margin-bottom: 20px; }
  .auth-tabs { margin-bottom: 20px; }
  .auth-tabs button { font-size: 11px; }
  .auth-bottom-note { margin-top: 15px; }
  .account-results, .lesson-focus .account-results { padding: 19px; gap: 17px; margin-bottom: 20px; }
  .results-intro h2 { font-size: 21px; }
  .results-intro p { font-size: 10px; }
  .result-stat>strong { font-size: 25px; }
  .result-stat>span { font-size: 9px; }
  .account-chip { margin-top: 10px; padding-top: 8px; padding-bottom: 8px; }
  .account-chip+.journey-card { margin-top: 9px; }
}