/* RB ML Studio — цвета redbees.ru: красный и белый, графитовый текст, соты как знак марки. */
:root {
  --red: #cc0000;        /* пчелиный красный: главные действия, текущий шаг */
  --red-hi: #ea0001;     /* наведение */
  --red-deep: #aa000d;   /* нажатие */
  --wine: #56030d;       /* номера шагов, крупные цифры */
  --ink: #434446;        /* текст */
  --ink-2: #6f7175;      /* пояснения */
  --line: #e3e3e5;
  --paper: #ffffff;
  --mist: #f4f4f5;       /* фон подсказок */
  --rose: #fbeaea;       /* мягкая красная подложка */
  --ok: #2f7d32;         /* только для «верно / готово» в таблицах */
  --display: "Roboto Condensed", "Bahnschrift SemiCondensed", "Bahnschrift", "Arial Narrow", sans-serif;
  --body: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 var(--body); }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); font-weight: 400; letter-spacing: .005em; }
h1 { font-size: 34px; line-height: 1.15; margin: 6px 0 6px; }
h2 { font-size: 23px; line-height: 1.2; margin: 0 0 10px; }
h3 { font-size: 18px; margin: 18px 0 6px; }
p { margin: 6px 0 10px; max-width: 78ch; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }

/* ---------- шапка ---------- */
header.top { border-bottom: 3px solid var(--red); background: var(--paper); }
header.top .in { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font: 400 22px/1 var(--display); }
.brand:hover { text-decoration: none; }
.brand .hex { width: 26px; height: 30px; background: var(--red); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
header.top nav { margin-left: auto; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
header.top nav a { color: var(--ink); }
header.top form { display: inline; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--ink-2); font: inherit; cursor: pointer; }
.linkbtn:hover { color: var(--red); }

main { max-width: 1240px; margin: 0 auto; padding: 18px 16px 70px; min-width: 0; }
code { overflow-wrap: anywhere; }

/* ---------- соты-шаги ---------- */
.project-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.project-head h1 { margin: 0; }
.project-head .task { color: var(--ink-2); }
.project-head .tools { margin-left: auto; display: flex; gap: 14px; }
ol.comb { list-style: none; display: flex; gap: 0; padding: 0; margin: 14px 0 22px; flex-wrap: nowrap; }
ol.comb li { flex: 1 1 0; min-width: 0; position: relative; }
ol.comb li::before { content: ""; position: absolute; top: 31px; left: 0; right: 0; height: 2px; background: var(--line); z-index: 0; }
ol.comb li:first-child::before { left: 50%; }
ol.comb li:last-child::before { right: 50%; }
ol.comb li.done::before, ol.comb li.now::before { background: var(--red); }
ol.comb a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink-2); padding-bottom: 4px; }
ol.comb a:hover { text-decoration: none; color: var(--ink); }
ol.comb .cell { width: 56px; height: 64px; display: grid; place-items: center; font: 400 26px/1 var(--display);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--line); color: var(--ink-2); }
ol.comb .cell i { font-style: normal; display: grid; place-items: center; width: 50px; height: 58px; background: var(--paper);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
ol.comb li.done .cell { background: var(--red); }
ol.comb li.done .cell i { color: var(--red); }
ol.comb li.now .cell { background: var(--red); color: #fff; }
ol.comb li.now .cell i { background: var(--red); color: #fff; }
ol.comb li.here a { color: var(--ink); font-weight: 600; }
ol.comb li.here .cell { transform: scale(1.08); }
ol.comb .name { font: 400 17px/1.1 var(--display); text-align: center; }
ol.comb .state { font-size: 12px; color: var(--ink-2); }
ol.comb li.done .state { color: var(--red); }

/* ---------- шаг: работа слева, подсказка справа ---------- */
.step { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.step > .work { min-width: 0; }
aside.guide { position: sticky; top: 12px; background: var(--mist); border-left: 4px solid var(--red); padding: 14px 16px; }
aside.guide h2 { font-size: 20px; margin-bottom: 6px; }
aside.guide h3 { font-size: 16px; margin: 14px 0 4px; color: var(--wine); }
aside.guide ol, aside.guide ul { margin: 4px 0; padding-left: 20px; }
aside.guide li { margin: 3px 0; }
aside.guide .ex { background: var(--paper); border: 1px solid #f0c4c4; padding: 4px 12px 6px; margin: 0 0 12px; }
aside.guide .ex h3 { margin-top: 8px; color: var(--red); }
.choice .tags { margin-top: 6px; }
.choice .pro, .choice .con { font-size: 13px; margin: 3px 0 0; }
.choice .pro b { color: var(--ok); font-weight: 600; }
.choice .con b { color: var(--red); font-weight: 600; }
.choice .like { font-style: italic; color: var(--ink); font-size: 14px; margin: 4px 0 0; }
table.pick td, table.pick th { font-size: 14px; }
table.pick td:first-child { font-weight: 600; width: 55%; }
.step-title { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.step-title .num { width: 40px; height: 46px; flex: none; display: grid; place-items: center; background: var(--red); color: #fff;
  font: 400 22px/1 var(--display); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.step-title h1 { margin: 0; }
.lead { font-size: 17px; color: var(--ink); margin: 4px 0 18px; }

section.part { border-top: 1px solid var(--line); padding: 18px 0 8px; }
section.part:first-of-type { border-top: 0; padding-top: 4px; }
section.part > h2 { display: flex; align-items: baseline; gap: 10px; }

.next { margin-top: 26px; padding: 16px 18px; border: 2px solid var(--red); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.next p { margin: 0; flex: 1 1 260px; }
.next.wait { border-color: var(--line); }

/* ---------- поля ---------- */
label { display: block; color: var(--ink); font-weight: 600; font-size: 14px; margin: 12px 0 3px; }
.hint { display: block; color: var(--ink-2); font-size: 13px; font-weight: 400; margin: 3px 0 0; max-width: 72ch; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid #cfd0d3; border-radius: 3px;
  padding: 7px 9px; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--red); outline: none; box-shadow: 0 0 0 2px var(--rose); }
input[type=checkbox], input[type=radio] { width: auto; margin: 0 7px 0 0; accent-color: var(--red); }
label.inline { display: inline-flex; align-items: center; font-weight: 400; margin: 6px 16px 6px 0; }
textarea { font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.row > * { flex: 1 1 170px; min-width: 0; }
.row > .shrink { flex: 0 0 auto; }

button, .btn { font: 600 15px/1.2 var(--body); border: 2px solid var(--red); background: var(--paper); color: var(--red);
  border-radius: 3px; padding: 8px 16px; cursor: pointer; display: inline-block; white-space: nowrap; }
button:hover, .btn:hover { background: var(--rose); text-decoration: none; }
button.primary, .btn.primary { background: var(--red); color: #fff; }
button.primary:hover, .btn.primary:hover { background: var(--red-hi); border-color: var(--red-hi); }
button.primary:active, .btn.primary:active { background: var(--red-deep); border-color: var(--red-deep); }
button.big, .btn.big { font-size: 17px; padding: 12px 22px; }
button.quiet, .btn.quiet { border-color: #cfd0d3; color: var(--ink); }
button.quiet:hover, .btn.quiet:hover { border-color: var(--red); background: var(--paper); color: var(--red); }
button:disabled { opacity: .45; cursor: default; }
button.danger { border-color: #cfd0d3; color: var(--ink-2); }
button.danger:hover { border-color: var(--red); color: var(--red); background: var(--paper); }

/* ---------- выбор блока: строки с шестиугольником вместо радиокнопки ---------- */
.choices { display: flex; flex-direction: column; gap: 8px; }
.choice { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border: 1px solid var(--line);
  cursor: pointer; background: var(--paper); margin: 0; font-weight: 400; }
.choice:hover { border-color: var(--red); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .mark { width: 26px; height: 30px; background: #cfd0d3; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: grid; place-items: center; margin-top: 2px; }
.choice .mark::after { content: ""; width: 20px; height: 24px; background: var(--paper);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.choice.on { border-color: var(--red); background: #fffafa; }
.choice.on .mark { background: var(--red); }
.choice.on .mark::after { background: var(--red); }
.choice .t { font: 400 19px/1.2 var(--display); color: var(--ink); }
.choice .d { margin: 2px 0 0; }
.choice .when { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.choice .when b { color: var(--ink); font-weight: 600; }
.choices.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* ---------- числа и таблицы ---------- */
.facts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 4px 0 14px; }
.fact .v { font: 400 32px/1.1 var(--display); color: var(--wine); }
.fact .k { font-size: 13px; color: var(--ink-2); }
.fact.bad .v { color: var(--red); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
th { color: var(--ink-2); font-weight: 600; font-size: 13px; }
th.sort { cursor: pointer; }
th.sort:hover { color: var(--red); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.off td { opacity: .45; }
tr.best td { background: #fffafa; }
.chip { display: inline-block; border: 1px solid var(--line); border-radius: 12px; padding: 0 9px; font-size: 13px; margin: 1px 3px 1px 0; }
.chip.red { border-color: var(--red); color: var(--red); }
.ok { color: var(--ok); }
.bad { color: var(--red); }
.flash { padding: 10px 14px; margin-bottom: 16px; border-left: 4px solid var(--red); background: var(--mist); }
.flash.err { background: var(--rose); color: var(--red-deep); }
.plot { width: 100%; min-height: 320px; }
.plot.tall { min-height: 520px; }
pre.log { background: var(--mist); padding: 8px 10px; max-height: 240px; overflow: auto; font-size: 12px; margin: 0; }
code { background: var(--mist); padding: 0 4px; border-radius: 2px; }
details > summary { cursor: pointer; color: var(--red); margin: 6px 0; font-weight: 600; }
.steps-list .stp { border: 1px solid var(--line); padding: 8px 10px; margin-bottom: 8px; }
.scroll { max-height: 520px; overflow: auto; }
.bar { height: 8px; background: var(--mist); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--red); }

/* ---------- вход и список проектов ---------- */
.welcome { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; margin-top: 18px; }
.welcome .pitch h1 { font-size: 44px; }
.comb-art { display: flex; gap: 6px; margin: 18px 0; flex-wrap: wrap; }
.comb-art span { width: 64px; height: 74px; display: grid; place-items: center; text-align: center; padding: 6px; background: var(--red); color: #fff;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); font: 400 13px/1.1 var(--display); }
.authbox { border: 2px solid var(--red); padding: 18px 20px; }
.tabs2 { display: flex; gap: 0; margin-bottom: 8px; }
.tabs2 a { flex: 1; text-align: center; padding: 8px; border-bottom: 2px solid var(--line); color: var(--ink-2); }
.tabs2 a.on { border-bottom-color: var(--red); color: var(--ink); font-weight: 600; }
.tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.task-card { border: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.task-card .q { font: 400 24px/1.1 var(--display); color: var(--wine); }
.task-card.data { border-color: var(--red); }
.gallery h2 { margin-top: 26px; }
.task-card .chips { display: flex; flex-wrap: wrap; gap: 2px; }
.task-card .src { font-size: 13px; color: var(--ink-2); }
.projects td:first-child a { font: 400 19px/1.2 var(--display); }

@media (max-width: 980px) {
  .step, .welcome { grid-template-columns: 1fr; }
  aside.guide { position: static; order: -1; }
}
@media (max-width: 640px) {
  h1 { font-size: 28px; }
  ol.comb { flex-wrap: wrap; }
  ol.comb li { flex: 0 0 33.33%; margin-bottom: 10px; }
  ol.comb li::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }