.programming-head{padding-top:clamp(44px,7vw,76px);padding-bottom:0}.programming-head h1{margin:14px 0 16px}.programming-head .lead{max-width:760px}.code-tool-tabs{display:grid;grid-template-columns:repeat(6,1fr);margin-top:40px;border:1px solid var(--line);border-bottom:0}.code-tool-tabs button{min-height:78px;padding:12px 11px;border:0;border-right:1px solid var(--line);background:var(--surface);text-align:left;font:12px/1.35 var(--mono);color:var(--muted);cursor:pointer}.code-tool-tabs button:last-child{border-right:0}.code-tool-tabs button span{display:block;font-size:11px;margin-bottom:7px}.code-tool-tabs button:hover{color:var(--accent)}.code-tool-tabs button.on{background:var(--text);color:var(--text-inverse)}.code-panel{padding:clamp(42px,7vw,72px) 0;background:var(--surface-2)}.code-lab{border:1px solid var(--line);background:var(--surface)}.code-lab-head{display:grid;grid-template-columns:120px 1fr;border-bottom:1px solid var(--line)}.code-lab-head>div{padding:26px}.code-lab-head .tool-number{font:clamp(44px,7vw,76px)/1 var(--mono);color:var(--accent);border-right:1px solid var(--line);padding:22px}.code-lab-head h2{margin-bottom:8px}.code-lab-head p{max-width:700px}.tool-status{margin-left:auto;font:12px var(--mono);color:var(--muted)}.tool-status.error{color:var(--danger)}.tool-status.good{color:var(--success)}.io-grid{display:grid;grid-template-columns:1fr 1fr}.editor-label{display:block;min-width:0}.editor-label:first-child{border-right:1px solid var(--line)}.editor-label>span,.regex-row label>span{display:block;padding:10px 14px;border-bottom:1px solid var(--line);font:11px var(--mono);color:var(--muted)}.editor-label textarea,.code-output-box,.regex-result{display:block;width:100%;height:300px;border:0;resize:vertical;padding:18px;background:var(--surface);color:var(--text);font:13px/1.65 var(--mono);tab-size:2;overflow:auto}.editor-label textarea:focus,.regex-row input:focus{outline:2px solid var(--accent);outline-offset:-2px}.code-output-box{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.tool-actions{display:flex;align-items:center;gap:8px;min-height:66px;padding:10px 14px;border-top:1px solid var(--line);flex-wrap:wrap}.regex-row{display:grid;grid-template-columns:1fr 160px;border-bottom:1px solid var(--line)}.regex-row label:first-child{border-right:1px solid var(--line)}.regex-row input{width:100%;height:48px;border:0;padding:0 14px;font:14px var(--mono)}.regex-input{display:grid;grid-template-columns:30px 1fr 30px;align-items:center}.regex-input i{font:18px var(--mono);font-style:normal;text-align:center;color:var(--muted)}.regex-input input{padding:0}.regex-result{white-space:pre-wrap}.regex-result mark{background:var(--accent-tint);color:var(--accent);border-bottom:2px solid var(--accent)}.viz-examples{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--line);overflow-x:auto}.viz-examples>span{padding:11px 15px;font:11px var(--mono);color:var(--muted);white-space:nowrap}.viz-examples button{padding:11px 16px;border:0;border-left:1px solid var(--line);background:var(--surface);font:12px var(--mono);cursor:pointer;white-space:nowrap}.viz-examples button.on{background:var(--accent);color:var(--text-inverse)}.viz-toolbar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}.viz-toolbar label{display:flex;align-items:center;gap:10px;margin-left:8px;font:11px var(--mono);color:var(--muted)}.viz-toolbar input{accent-color:var(--accent)}.viz-workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr);min-height:430px}.viz-editor{border-right:1px solid var(--line);min-width:0}.pane-title{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--line);font:11px var(--mono);color:var(--muted)}.pane-title button{border:0;background:none;color:var(--muted);font:10px var(--mono);cursor:pointer}.viz-editor textarea{display:block;width:100%;height:388px;padding:18px 20px;border:0;resize:none;outline:0;font:14px/1.72 var(--mono);tab-size:2;color:var(--text)}.viz-editor textarea:focus{box-shadow:inset 3px 0 var(--accent)}.viz-code-view{height:388px;overflow:auto;padding:12px 0;font:14px/1.72 var(--mono)}.viz-code-view>div{display:grid;grid-template-columns:50px minmax(0,1fr);min-height:24px;border-left:3px solid transparent}.viz-code-view>div>span{padding-right:13px;text-align:right;color:var(--text-muted);user-select:none}.viz-code-view code{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}.viz-code-view>div.active{background:var(--accent-tint);border-left-color:var(--accent);color:var(--accent)}.viz-code-view>div.active>span{color:var(--accent)}.viz-side{display:grid;grid-template-rows:1fr 1fr;min-width:0}.viz-variables{border-bottom:1px solid var(--line);min-height:0;overflow:auto}.viz-variables>#vizVariables>div{display:grid;grid-template-columns:minmax(90px,.7fr) 1fr;border-bottom:1px solid var(--line)}.viz-variables>#vizVariables b,.viz-variables>#vizVariables code{padding:10px 13px;font:12px/1.4 var(--mono);overflow-wrap:anywhere}.viz-variables>#vizVariables b{font-weight:500;border-right:1px solid var(--line)}.viz-variables>#vizVariables code{color:var(--accent)}.variables-empty,.console-empty{padding:18px;color:var(--muted);font:12px/1.5 var(--mono)}.viz-console{min-height:0;overflow:hidden}.viz-console>#vizConsole{height:172px;overflow:auto}.viz-console>#vizConsole>div{display:grid;grid-template-columns:38px 1fr;padding:7px 12px;border-bottom:1px solid var(--line);font:12px/1.4 var(--mono)}.viz-console>#vizConsole>div span{color:var(--text-muted)}.viz-explain{display:grid;grid-template-columns:150px 1fr;border-top:1px solid var(--line);min-height:76px}.viz-explain>span{padding:17px;border-right:1px solid var(--line);font:11px var(--mono);color:var(--accent)}.viz-explain p{padding:15px 18px;font-size:14px}.coming-tool{display:grid;grid-template-columns:150px 1fr;min-height:260px}.coming-tool .tool-number{padding:26px;border-right:1px solid var(--line);font:clamp(50px,9vw,92px)/1 var(--mono);color:var(--accent)}.coming-tool>div:last-child{align-self:center;padding:30px}.coming-tool h2{margin-bottom:12px}.code-cta{display:flex;align-items:center;justify-content:space-between;gap:36px}.code-cta>div{max-width:700px}.code-cta h2{margin-bottom:12px}
@media(max-width:820px){.code-tool-tabs{grid-template-columns:repeat(3,1fr)}.code-tool-tabs button:nth-child(3n){border-right:0}.code-tool-tabs button:nth-child(-n+3){border-bottom:1px solid var(--line)}.viz-workspace{grid-template-columns:1fr}.viz-editor{border-right:0;border-bottom:1px solid var(--line)}.viz-side{grid-template-columns:1fr 1fr;grid-template-rows:260px}.viz-variables{border-right:1px solid var(--line);border-bottom:0}}
@media(max-width:560px){.code-tool-tabs{grid-template-columns:1fr 1fr}.code-tool-tabs button:nth-child(3n){border-right:1px solid var(--line)}.code-tool-tabs button:nth-child(2n){border-right:0}.code-tool-tabs button:nth-child(-n+4){border-bottom:1px solid var(--line)}.code-lab-head{grid-template-columns:76px 1fr}.code-lab-head>div{padding:20px}.code-lab-head .tool-number{padding:18px 12px}.io-grid{grid-template-columns:1fr}.editor-label:first-child{border-right:0;border-bottom:1px solid var(--line)}.editor-label textarea,.code-output-box,.regex-result{height:230px}.regex-row{grid-template-columns:1fr 104px}.viz-toolbar label{width:100%;margin:4px 0 0}.viz-toolbar .tool-status{width:100%;margin:4px 0 0}.viz-side{grid-template-columns:1fr;grid-template-rows:220px 220px}.viz-variables{border-right:0;border-bottom:1px solid var(--line)}.viz-explain{grid-template-columns:1fr}.viz-explain>span{border-right:0;border-bottom:1px solid var(--line);padding:10px 14px}.coming-tool{grid-template-columns:76px 1fr}.coming-tool .tool-number{padding:18px 10px}.coming-tool>div:last-child{padding:22px 18px}.code-cta{align-items:flex-start;flex-direction:column}}

/* CSS animation generator */
.code-tool-tabs{grid-template-columns:repeat(3,1fr)}
.animation-layout{display:grid;grid-template-columns:340px 1fr;min-height:390px;border-bottom:1px solid var(--line)}.animation-controls{border-right:1px solid var(--line)}.animation-controls label,.readme-form label,.trainer-controls label{display:block;padding:14px;border-bottom:1px solid var(--line);font:11px var(--mono);color:var(--muted)}.animation-controls select,.readme-form input,.readme-form textarea,.readme-form select,.trainer-controls select{display:block;width:100%;margin-top:7px;border:1px solid var(--line);background:var(--surface);padding:10px;font:13px var(--mono);color:var(--text)}.animation-controls input[type=range]{width:calc(100% - 76px);margin-top:12px;accent-color:var(--accent)}.animation-controls output{display:inline-block;width:70px;text-align:right;font:11px var(--mono);color:var(--text)}.animation-stage{display:grid;place-items:center;min-height:390px;background:repeating-linear-gradient(90deg,transparent 0 49px,color-mix(in srgb,var(--line) 35%,transparent) 49px 50px),repeating-linear-gradient(0deg,transparent 0 49px,color-mix(in srgb,var(--line) 35%,transparent) 49px 50px)}#animObject{display:grid;place-items:center;width:120px;height:120px;background:var(--accent);color:var(--text-inverse);font:18px var(--mono)}.animation-code{display:grid;grid-template-columns:1fr auto;align-items:end}.animation-code pre{min-height:170px;padding:18px;margin:0;white-space:pre-wrap;font:12px/1.55 var(--mono);overflow:auto}.animation-code>div{display:flex;gap:8px;padding:14px;flex-wrap:wrap}

/* README generator */
.readme-layout{display:grid;grid-template-columns:360px 1fr}.readme-form{border-right:1px solid var(--line)}.readme-form textarea{min-height:72px;resize:vertical}.readme-preview{min-width:0}.readme-preview pre{height:530px;margin:0;padding:22px;overflow:auto;white-space:pre-wrap;font:13px/1.65 var(--mono)}

/* Flexbox / Grid trainer */
.trainer-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 22px;border-bottom:1px solid var(--line)}.trainer-head span,.trainer-label{font:11px var(--mono);color:var(--accent)}.trainer-head h3{margin:5px 0}.trainer-grid{display:grid;grid-template-columns:320px 1fr}.trainer-controls{border-right:1px solid var(--line)}.trainer-css{padding:16px;white-space:pre-wrap;font:12px/1.6 var(--mono);border-bottom:1px solid var(--line);color:var(--accent)}.trainer-controls>.btn{margin:14px}.trainer-controls>.tool-status{margin:0;padding:0 14px 16px}.trainer-label{padding:9px 14px;border-bottom:1px solid var(--line)}.trainer-stage{height:190px;padding:18px;gap:12px;border-bottom:1px solid var(--line);background:var(--surface-2)}.trainer-stage>div{display:grid;place-items:center;min-width:48px;min-height:48px;background:var(--surface);border:1px solid var(--accent);color:var(--accent);font:14px var(--mono)}.trainer-stage.target{background:var(--surface)}.trainer-stage.target>div{background:var(--accent);color:var(--text-inverse)}

@media(max-width:820px){.animation-layout{grid-template-columns:300px 1fr}.readme-layout{grid-template-columns:310px 1fr}.trainer-grid{grid-template-columns:280px 1fr}}
@media(max-width:620px){.animation-layout,.readme-layout,.trainer-grid{grid-template-columns:1fr}.animation-controls,.readme-form,.trainer-controls{border-right:0;border-bottom:1px solid var(--line)}.animation-stage{min-height:300px}.animation-code{grid-template-columns:1fr}.readme-preview pre{height:390px}.trainer-head{align-items:flex-start;flex-direction:column}.trainer-stage{height:210px}}
@media(max-width:820px){.code-tool-tabs{grid-template-columns:repeat(3,1fr)}}

/* Flexbox / Grid trainer — balanced workspace */
.layout-trainer .trainer-grid{grid-template-columns:1fr;align-items:start}
.layout-trainer .trainer-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(260px,.8fr);align-content:start;min-width:0;border-right:0;border-bottom:1px solid var(--line);background:var(--surface)}
.layout-trainer .trainer-controls label{min-width:0;padding:14px}
.layout-trainer .trainer-controls label i{display:none}
.layout-trainer .trainer-controls select{margin-top:10px}
.layout-trainer .trainer-controls label{border-right:1px solid var(--line)}
.layout-trainer .trainer-controls label:nth-of-type(1){grid-column:1;grid-row:1}
.layout-trainer .trainer-controls label:nth-of-type(2){grid-column:2;grid-row:1}
.layout-trainer .trainer-controls label:nth-of-type(3){grid-column:3;grid-row:1}
.layout-trainer .trainer-controls label:nth-of-type(4){grid-column:1;grid-row:2}
.layout-trainer .trainer-controls label:nth-of-type(5){grid-column:2;grid-row:2}
.layout-trainer .trainer-controls label:nth-of-type(6){grid-column:3;grid-row:2}
.layout-trainer .trainer-css{grid-column:4;grid-row:1/span 2;background:var(--surface-2);border-top:0}
.layout-trainer .run-row{grid-column:1/4;grid-row:3}
.layout-trainer .trainer-controls>.tool-status{grid-column:4;grid-row:3;align-self:center;padding:0 14px}
.layout-trainer .trainer-grid>div:last-child{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;min-width:0}
.layout-trainer .trainer-grid>div:last-child>:nth-child(1){grid-column:1;grid-row:1}
.layout-trainer .trainer-grid>div:last-child>:nth-child(2){grid-column:1;grid-row:2}
.layout-trainer .trainer-grid>div:last-child>:nth-child(3){grid-column:2;grid-row:1;border-left:1px solid var(--line)}
.layout-trainer .trainer-grid>div:last-child>:nth-child(4){grid-column:2;grid-row:2}
.layout-trainer .trainer-stage{height:360px;padding:24px;border-bottom:0}
.layout-trainer .trainer-stage.target{border-left:1px solid var(--line)}
.layout-trainer .trainer-stage>div{min-width:58px;min-height:58px}
@media(max-width:900px){.layout-trainer .trainer-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.layout-trainer .trainer-controls label:nth-of-type(n),.layout-trainer .trainer-css,.layout-trainer .run-row,.layout-trainer .trainer-controls>.tool-status{grid-column:auto;grid-row:auto}.layout-trainer .trainer-controls label:nth-of-type(odd){border-right:1px solid var(--line)}.layout-trainer .trainer-controls label:nth-of-type(even){border-right:0}.layout-trainer .trainer-css,.layout-trainer .run-row,.layout-trainer .trainer-controls>.tool-status{grid-column:1/-1}}
@media(max-width:620px){.layout-trainer .trainer-controls,.layout-trainer .trainer-grid>div:last-child{grid-template-columns:1fr}.layout-trainer .trainer-controls label,.layout-trainer .trainer-grid>div:last-child>:nth-child(3),.layout-trainer .trainer-stage.target{border-left:0;border-right:0}.layout-trainer .trainer-grid>div:last-child>:nth-child(3){grid-column:1;grid-row:3}.layout-trainer .trainer-grid>div:last-child>:nth-child(4){grid-column:1;grid-row:4}.layout-trainer .trainer-stage{height:240px}}

/* Тренажёры v2 — статистика, вкладки, Python-тренажёр, геймификация */
.trainer-stats{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:26px;padding:16px 22px;border:1px solid var(--line);background:var(--surface)}
.trainer-stats b{font:24px/1 var(--mono);color:var(--accent)}
.trainer-stats .ts-cell span{display:block;margin-top:4px;font:11px var(--mono);color:var(--muted)}
.ts-progress{flex:1;min-width:170px}
.ts-bar{height:8px;background:var(--surface-sunken);border:1px solid var(--line);overflow:hidden;margin-bottom:7px}
.ts-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s ease}
.ts-progress span{font:11px var(--mono);color:var(--text)}
.trainer-stats .btn-sm{margin-left:auto}
.btn-sm{min-height:auto;padding:8px 13px;font-size:11px}
.trainer-tabs{display:flex;margin-top:30px;border:1px solid var(--line);border-bottom:0}
.trainer-tabs button{flex:1;min-height:56px;border:0;border-right:1px solid var(--line);background:var(--surface);font:13px var(--mono);color:var(--muted);cursor:pointer}
.trainer-tabs button:last-child{border-right:0}
.trainer-tabs button:hover{color:var(--accent)}
.trainer-tabs button.on{background:var(--text);color:var(--text-inverse)}
.trainer-solved-badge{display:inline-block;margin-left:10px;padding:2px 9px;font:11px var(--mono);background:var(--success);color:var(--text-inverse);vertical-align:middle}
.hint-toggle{display:inline-flex;align-items:center;min-height:30px;margin-top:3px;padding:6px 11px;border:1px solid var(--line);background:var(--surface);color:var(--accent);font:11px var(--mono);cursor:pointer}
.hint-toggle:hover{border-color:var(--accent);background:var(--surface-2)}
.hint-toggle[aria-expanded=true]{background:var(--accent);border-color:var(--accent);color:var(--text-inverse)}
.trainer-head p{max-width:760px;margin:9px 0 0;color:var(--muted)}
.trainer-head p[hidden]{display:none}
/* подписи свойств — понятные новичку */
.trainer-controls label b{display:block;font-weight:600;font-size:12px;color:var(--text)}
.trainer-controls label i{display:block;margin-top:4px;font-style:normal;font-size:11px;line-height:1.45;color:var(--muted)}
/* подсветка совпавших свойств layout-тренажёра */
.trainer-controls label.match{box-shadow:inset 3px 0 var(--success)}
.trainer-controls label.miss{box-shadow:inset 3px 0 var(--danger)}
.trainer-stage.win{animation:trainer-pop .5s ease}
@keyframes trainer-pop{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
/* Python-тренажёр */
.py-trainer-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr)}
.py-editor-col{display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0}
.py-editor-col textarea{display:block;width:100%;height:300px;border:0;resize:vertical;padding:16px 18px;outline:0;font:14px/1.7 var(--mono);tab-size:4;color:var(--text)}
.py-editor-col textarea:focus{box-shadow:inset 3px 0 var(--accent)}
.py-actions{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.py-actions .tool-status{margin:0}
.py-out-col{display:flex;flex-direction:column;min-width:0}
.py-console{flex:1;min-height:168px;margin:0;padding:16px 18px;white-space:pre-wrap;overflow:auto;background:var(--surface-2);font:13px/1.6 var(--mono);color:var(--text);border-bottom:1px solid var(--line)}
.py-console:empty::before{content:'Здесь появится вывод программы';color:var(--muted)}
.py-goal{padding:16px 18px;white-space:pre-wrap;font:13px/1.6 var(--mono);color:var(--accent);background:var(--surface);overflow:auto}
/* всплывающая награда */
.trainer-toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);background:var(--text);color:var(--text-inverse);padding:13px 22px;font:14px var(--mono);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:60}
.trainer-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:620px){.py-trainer-grid{grid-template-columns:1fr}.py-editor-col{border-right:0;border-bottom:1px solid var(--line)}.trainer-tabs button{font-size:11px;padding:0 6px}.trainer-stats{gap:18px}}
@media(max-width:560px){.code-tool-tabs{grid-template-columns:1fr 1fr}}

/* Тренажёр Цвет · HSL */
.trainer-tabs{flex-wrap:wrap}
.color-trainer-grid{display:grid;grid-template-columns:340px 1fr}
.color-controls{border-right:1px solid var(--line)}
.color-controls label{display:block;padding:14px;border-bottom:1px solid var(--line);font:11px var(--mono);color:var(--muted)}
.color-controls label b{display:block;font-weight:600;font-size:12px;color:var(--text)}
.color-controls label i{display:block;margin-top:4px;font-style:normal;font-size:11px;line-height:1.45;color:var(--muted)}
.color-controls>.btn{margin:14px}
.color-controls>.tool-status{margin:0;padding:0 14px 16px}
.color-controls .range-row{display:flex;align-items:center;gap:12px;margin-top:10px}
.color-controls input[type=range]{flex:1;accent-color:var(--accent)}
.color-controls output{width:46px;text-align:right;font:12px var(--mono);color:var(--text)}
#colorCode{border-bottom:1px solid var(--line)}
.color-swatch{height:150px;border-bottom:1px solid var(--line)}
.color-swatch.target{border-bottom:0}
/* Тренажёр Теория · квиз */
.quiz-topics{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.quiz-topics button{border:0;border-right:1px solid var(--line);background:var(--surface);padding:13px 18px;font:12px var(--mono);color:var(--muted);cursor:pointer}
.quiz-topics button:hover{color:var(--accent)}
.quiz-topics button.on{background:var(--accent);color:var(--text-inverse)}
.quiz-body{padding:22px}
.quiz-options{display:grid;gap:10px;margin-bottom:18px}
.quiz-options button{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);padding:14px 16px;font:13px/1.4 var(--mono);color:var(--text);cursor:pointer;transition:border-color .15s,background .15s}
.quiz-options button:hover{border-color:var(--accent)}
.quiz-options button.sel{border-color:var(--accent);box-shadow:inset 3px 0 var(--accent)}
.quiz-options button.correct{border-color:var(--success);background:var(--success-tint);box-shadow:inset 3px 0 var(--success)}
.quiz-options button.wrong{border-color:var(--danger);background:var(--danger-tint);box-shadow:inset 3px 0 var(--danger)}
.quiz-options button:disabled{cursor:default}
.quiz-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#quizCheck{order:1}
.quiz-actions .btn-next{order:2;margin-left:0}
.quiz-actions .mono{order:3}
.quiz-actions .tool-status{order:4}
.quiz-actions .tool-status{margin:0}
.quiz-explain{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--surface-2);font:13px/1.55 var(--mono);color:var(--text)}
@media(max-width:620px){.color-trainer-grid{grid-template-columns:1fr}.color-controls{border-right:0;border-bottom:1px solid var(--line)}}

/* кнопка «дальше» рядом с «Проверить» */
.btn-next{min-width:52px;min-height:44px;font:20px/1 var(--mono);padding:0 16px}
/* строка с «Проверить» + «→» (layout/color, где кнопка в колонке) */
.run-row{display:flex;gap:10px;align-items:center;margin:14px}
.run-row .btn{margin:0}
.run-row .btn-fill{flex:1}
/* в горизонтальных строках действий «→» уходит вправо */
.py-actions .btn-next{margin-left:auto}
/* иконочные кнопки (звук и т.п.) */
.btn-icon{min-width:44px;padding-left:12px;padding-right:12px;font-size:15px}
/* мелкие текст-кнопки в шапках панелей → иконка */
.icon-link{border:0;background:none;color:var(--muted);font:15px var(--mono);line-height:1;cursor:pointer;padding:2px 4px}
.icon-link:hover{color:var(--accent)}
/* метр совпадения цвета */
.color-meter{padding:16px 18px}
.color-meter-num{font:30px/1 var(--mono);color:var(--accent);transition:color .2s}
.color-meter-num.good{color:var(--success)}
.color-meter-bar{height:8px;margin:10px 0 7px;background:var(--surface-sunken);border:1px solid var(--line);overflow:hidden}
.color-meter-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .12s linear}
.color-meter-bar i.good{background:var(--success)}
.color-meter-cap{font:11px var(--mono);color:var(--muted)}

/* Степпер заданий (общий для всех тренажёров) */
.trainer-steps{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px;border-bottom:1px solid var(--line)}
.trainer-steps .step{width:30px;height:30px;border:1px solid var(--line);background:var(--surface);font:12px var(--mono);color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:border-color .15s,background .15s}
.trainer-steps .step:hover{border-color:var(--accent);color:var(--accent)}
.trainer-steps .step.done{border-color:var(--success);color:var(--success)}
.trainer-steps .step.cur{background:var(--text);border-color:var(--text);color:var(--text-inverse)}
.trainer-steps .step.cur.done{background:var(--success);border-color:var(--success);color:var(--text-inverse)}
/* счётчик прогресса во вкладках */
.trainer-tabs button small{display:block;margin-top:3px;font-size:11px;opacity:.75}

/* Тренажёр HTML · вёрстка */
.html-trainer-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr)}
.html-editor-col{display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0}
.html-editor-col textarea{display:block;width:100%;height:300px;border:0;resize:vertical;padding:16px 18px;outline:0;font:14px/1.7 var(--mono);tab-size:2;color:var(--text)}
.html-editor-col textarea:focus{box-shadow:inset 3px 0 var(--accent)}
.html-out-col{display:flex;flex-direction:column;min-width:0}
.html-frame{width:100%;height:148px;border:0;border-bottom:1px solid var(--line);background:var(--surface)}
.html-out-col .trainer-label:last-of-type{}
/* Тренажёр SQL · запросы */
.sql-schema{padding:12px 18px;border-bottom:1px solid var(--line);font:12px var(--mono);color:var(--text);background:var(--surface-2)}
.sql-schema b{color:var(--accent)}.sql-schema span{color:var(--muted)}
.sql-trainer-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr)}
.sql-editor-col{display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0}
.sql-editor-col textarea{display:block;width:100%;height:170px;border:0;resize:vertical;padding:16px 18px;outline:0;font:14px/1.7 var(--mono);tab-size:2;color:var(--text)}
.sql-editor-col textarea:focus{box-shadow:inset 3px 0 var(--accent)}
.sql-out-col{display:flex;flex-direction:column;min-width:0}
.sql-result,.sql-goal{flex:1;min-height:96px;overflow:auto;padding:0;background:var(--surface)}
.sql-result{border-bottom:1px solid var(--line)}
.sql-result table,.sql-goal table{border-collapse:collapse;width:100%;font:12px/1.4 var(--mono)}
.sql-result th,.sql-result td,.sql-goal th,.sql-goal td{border:1px solid var(--line);padding:7px 10px;text-align:left;white-space:nowrap}
.sql-result th,.sql-goal th{background:var(--surface-2);color:var(--accent);position:sticky;top:0}
.sql-goal td{color:var(--accent)}
.sql-empty{padding:16px 18px;font:12px var(--mono);color:var(--muted)}
@media(max-width:620px){.html-trainer-grid,.sql-trainer-grid{grid-template-columns:1fr}.html-editor-col,.sql-editor-col{border-right:0;border-bottom:1px solid var(--line)}}

/* Python compiler */
.compiler-workspace{grid-template-columns:minmax(0,1.45fr) minmax(330px,.85fr);min-height:520px}.compiler-editor{display:grid;grid-template-rows:42px minmax(330px,1fr) auto}.compiler-editor>textarea,.compiler-editor>.viz-code-view{height:100%;min-height:330px}.compiler-input{display:block;border-top:1px solid var(--line)}.compiler-input>span{display:block;padding:8px 13px;border-bottom:1px solid var(--line);font:11px var(--mono);color:var(--muted)}.compiler-input textarea{height:76px!important;min-height:76px!important;padding:11px 14px!important;background:var(--surface-2)!important;font-size:12px!important;resize:vertical!important}.compiler-inspector{min-width:0}.compiler-pane-tabs{display:grid;grid-template-columns:repeat(3,1fr);height:42px;border-bottom:1px solid var(--line)}.compiler-pane-tabs button{border:0;border-right:1px solid var(--line);background:var(--surface);color:var(--muted);font:11px var(--mono);cursor:pointer}.compiler-pane-tabs button:last-child{border-right:0}.compiler-pane-tabs button.on{background:var(--text);color:var(--text-inverse)}.compiler-pane-tabs span{display:inline-block;margin-left:4px}.compiler-pane{height:478px;overflow:auto;position:relative}.compiler-pane #vizConsole>div{display:grid;grid-template-columns:38px 1fr;padding:9px 13px;border-bottom:1px solid var(--line);font:12px/1.5 var(--mono)}.compiler-pane #vizConsole>div span{color:var(--text-muted)}.pane-clear{position:absolute;right:12px;bottom:12px;border:1px solid var(--line);background:var(--surface);padding:7px 10px;font:10px var(--mono);cursor:pointer}.compiler-pane #vizVariables>div{display:grid;grid-template-columns:minmax(90px,.65fr) 1fr 72px;border-bottom:1px solid var(--line)}.compiler-pane #vizVariables b,.compiler-pane #vizVariables code,.compiler-pane #vizVariables small{padding:11px 12px;font:12px/1.4 var(--mono);overflow-wrap:anywhere}.compiler-pane #vizVariables b{font-weight:500;border-right:1px solid var(--line)}.compiler-pane #vizVariables code{color:var(--accent)}.compiler-pane #vizVariables small{border-left:1px solid var(--line);color:var(--muted)}.errors-empty{padding:18px;color:var(--muted);font:12px/1.5 var(--mono)}#vizErrors strong,#vizErrors span{display:block;padding:14px;border-bottom:1px solid var(--line);font:12px/1.5 var(--mono)}#vizErrors strong{color:var(--danger)}#vizErrors pre{margin:0;padding:16px;white-space:pre-wrap;color:var(--danger);font:12px/1.6 var(--mono)}
@media(max-width:820px){.compiler-workspace{grid-template-columns:1fr}.compiler-editor{border-right:0;border-bottom:1px solid var(--line)}.compiler-pane{height:300px}}
@media(max-width:560px){.viz-toolbar .btn{padding:10px 12px;font-size:12px}.compiler-pane-tabs{height:auto;min-height:48px}.compiler-pane-tabs button{padding:8px 5px}.compiler-pane #vizVariables>div{grid-template-columns:90px 1fr}.compiler-pane #vizVariables small{grid-column:2;border-left:0;border-top:1px solid var(--line);padding-top:6px}.compiler-input textarea{height:88px!important}}

/* Tools density pass */
.code-panel{padding:clamp(52px,7vw,82px) 0}
.code-lab-head>div{padding:30px}
.viz-examples{gap:8px;padding:14px 16px;background:var(--surface)}
.viz-examples>span{padding:9px 0;margin-right:2px}
.viz-examples button{border:1px solid var(--line);padding:10px 14px}
.viz-toolbar{gap:10px 12px;padding:16px;border-bottom:1px solid var(--line);background:var(--surface)}
.viz-toolbar .btn{min-height:46px}
.viz-toolbar label{margin-left:0;padding-left:6px}
.compiler-workspace{border-top:0}
.compiler-editor>textarea,.compiler-editor>.viz-code-view{padding-top:22px}
.compiler-pane-tabs{height:48px}
.compiler-pane{height:500px}
.compiler-input>span{padding:10px 14px}
.compiler-input textarea{padding:14px 16px!important}
.animation-layout{grid-template-columns:minmax(280px,320px) minmax(0,1fr)}
.animation-controls label{padding:16px}
.animation-code>div{padding:16px}
.tool-actions{gap:10px;min-height:76px;padding:14px 16px}
@media(max-width:560px){
  .viz-examples{padding:12px;gap:7px}
  .viz-toolbar{padding:12px}
  .viz-toolbar label{width:100%;padding-left:0}
  .viz-toolbar .tool-status{width:100%;margin:0}
}

/* Trainer feedback panels */
[data-trainer-panel][hidden]{display:none!important}
.sequence-workspace{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);border:1px solid var(--line)}.sequence-builder{padding:26px;border-right:1px solid var(--line)}.sequence-row{display:grid;grid-template-columns:42px 1fr;align-items:center;margin-bottom:12px;border:1px solid var(--line)}.sequence-row>b{display:grid;place-items:center;align-self:stretch;border-right:1px solid var(--line);font:14px var(--mono);color:var(--accent)}.sequence-row select{min-width:0;min-height:52px;padding:10px 14px;border:0;background:var(--surface);color:var(--text);font:13px var(--mono)}.sequence-row.match{border-color:var(--accent);box-shadow:inset 3px 0 var(--accent)}.sequence-row.miss{border-color:var(--danger);box-shadow:inset 3px 0 var(--danger)}.sequence-guide{padding:32px}.sequence-guide>span{font:11px var(--mono);text-transform:uppercase;color:var(--accent)}.sequence-guide ol{margin:20px 0 30px;padding-left:20px}.sequence-guide li{margin:11px 0;color:var(--ink-soft)}
@media(max-width:760px){.sequence-workspace{grid-template-columns:1fr}.sequence-builder{border-right:0;border-bottom:1px solid var(--line)}.sequence-guide{padding:26px 20px}}
.error-explainer-grid textarea{min-height:330px}.error-explanation{min-height:330px;padding:32px;border:1px solid var(--line);background:var(--surface)}.error-explanation>span{font:11px var(--mono);text-transform:uppercase;color:var(--accent)}.error-explanation h3{margin:14px 0 10px}.error-explanation ol{margin:24px 0 0;padding-left:22px}.error-explanation li{margin:10px 0;color:var(--ink-soft)}.error-explanation.empty{display:grid;align-content:center}.sandbox-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}.sandbox-editors{display:grid;grid-template-rows:1fr 1fr;border-right:1px solid var(--line)}.sandbox-editors .editor-label:first-child{border-bottom:1px solid var(--line)}.sandbox-editors textarea{min-height:210px;border:0}.sandbox-preview{min-width:0;background:var(--surface)}.sandbox-preview .pane-title{padding:14px 18px;border-bottom:1px solid var(--line)}.sandbox-preview iframe{display:block;width:100%;height:100%;min-height:480px;border:0;background:#fff}
@media(max-width:760px){.sandbox-grid{grid-template-columns:1fr}.sandbox-editors{border-right:0;border-bottom:1px solid var(--line)}.sandbox-preview iframe{min-height:360px}.error-explanation{min-height:0}.code-tool-tabs{overflow-x:auto}.code-tool-tabs button{min-width:140px;flex:0 0 auto}}
.minecraft-command-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(320px,1.2fr);border:1px solid var(--line)}.minecraft-controls{padding:26px;border-right:1px solid var(--line)}.minecraft-controls label{display:grid;gap:7px;margin-bottom:18px}.minecraft-controls label b{font:12px var(--mono)}.minecraft-controls label i{font:11px/1.5 var(--mono);color:var(--muted)}.minecraft-controls input,.minecraft-controls select{width:100%;min-height:44px;padding:9px 11px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:13px var(--mono)}.mc-field-group,[data-mc-group]{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.minecraft-result{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(28px,5vw,64px)}.minecraft-result>span{font:11px var(--mono);text-transform:uppercase;color:var(--muted)}.minecraft-result pre{width:100%;margin:18px 0;padding:22px;overflow:auto;background:var(--text);color:var(--text-inverse);font:15px/1.6 var(--mono)}.minecraft-result p{max-width:520px;margin-bottom:24px}[data-mc-group][hidden],[data-mc-field][hidden]{display:none!important}
@media(max-width:760px){.minecraft-command-grid{grid-template-columns:1fr}.minecraft-controls{border-right:0;border-bottom:1px solid var(--line)}.minecraft-result{padding:28px 20px}.mc-field-group,[data-mc-group]{grid-template-columns:1fr}}
.trainer-feedback{min-height:88px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface);color:var(--muted);font:12px/1.55 var(--mono);white-space:pre-wrap;overflow:auto}
.py-console:empty::before{content:none!important}
.tool-status.loading{display:inline-flex;align-items:center;gap:7px;color:var(--accent)}.tool-status.loading::before{content:'';width:12px;height:12px;border:2px solid var(--accent-line);border-top-color:var(--accent);border-radius:50%;animation:zipka-spin .8s linear infinite}@keyframes zipka-spin{to{transform:rotate(360deg)}}
.viz-examples button,.pane-clear{color:var(--text)}
.trainer-feedback.good{color:var(--success);background:var(--success-tint)}
.trainer-feedback.error{color:var(--danger);background:var(--danger-tint)}
.py-out-col .trainer-feedback{max-height:160px}
.html-out-col .trainer-feedback{flex:1;min-height:104px}
.sql-out-col .trainer-feedback{min-height:104px;border-bottom:0}
@media(max-width:620px){
  .trainer-feedback{min-height:78px}
  .py-out-col .trainer-feedback{max-height:none}
}

/* Swiss consistency */
.code-panel,.trainer-stage,.py-console,.sql-schema,.compiler-input textarea,.trainer-feedback.good,.trainer-feedback.error{background:var(--soft);}
.editor-label textarea,.code-output-box,.regex-result,.viz-editor textarea,.viz-code-view,.animation-code pre,.readme-preview pre,.trainer-css,.py-editor-col textarea,.py-console,.py-goal,.html-editor-col textarea,.sql-editor-col textarea,.sql-result table,.sql-goal table,.compiler-input textarea,.compiler-pane #vizConsole>div,.compiler-pane #vizVariables b,.compiler-pane #vizVariables code,.compiler-pane #vizVariables small,#vizErrors pre{font-family:var(--code);}
.regex-result mark,.viz-code-view>div.active{background:var(--accent-tint);color:var(--accent);}
.ts-bar,.color-meter-bar{background:var(--soft);}
.quiz-options button.correct,.trainer-feedback.good{border-color:var(--accent);box-shadow:inset 3px 0 var(--accent);color:var(--ink);}
.quiz-options button.wrong,.trainer-feedback.error{border-color:var(--danger);box-shadow:inset 3px 0 var(--danger);color:var(--ink);}
.tool-status.error,#vizErrors strong,#vizErrors span,#vizErrors pre{color:var(--danger);}
.tool-status.good,.trainer-solved-badge,.trainer-controls label.match,.trainer-steps .step.done{color:var(--accent);}
.trainer-solved-badge{background:var(--accent);}