/* ===== Машинное обучение для людей — интерфейс курса ===== */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;800&family=Golos+Text:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --paper:#f6f5ef;
  --card:#ffffff;
  --ink:#12203a;
  --ink-soft:#5a6478;
  --line:rgba(18,32,58,.10);
  --grid:rgba(18,32,58,.045);
  --c:#c98a1b;                 /* переопределяется на part/lesson */
  --disp:'Unbounded',system-ui,sans-serif;
  --body:'Golos Text',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--body); color:var(--ink); background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px; -webkit-font-smoothing:antialiased; line-height:1.5;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== header ===== */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;background:rgba(246,245,239,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px}
.brand-mark{font-family:var(--disp);font-weight:800;color:var(--c);font-size:19px;letter-spacing:-1px}
.brand-txt{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.3px}
.top-right{display:flex;align-items:center;gap:10px}
.whoami{font-size:20px}
.ring{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--line);stroke-width:4}
.ring-fg{fill:none;stroke:var(--c);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.ring-txt{transform:rotate(90deg);transform-origin:22px 22px;font-family:var(--mono);font-size:11px;font-weight:600;fill:var(--ink);text-anchor:middle}

.wrap{max-width:760px;margin:0 auto;padding:0 18px 60px}

/* ===== hero ===== */
.hero{padding:34px 0 26px;border-bottom:2px solid var(--ink)}
.hero-eyebrow{font-family:var(--mono);font-size:13px;color:var(--ink-soft);margin-bottom:14px}
.hero-title{font-family:var(--disp);font-weight:800;font-size:clamp(30px,8vw,46px);line-height:1.02;letter-spacing:-1.5px;margin:0 0 14px}
.hero-sub{font-size:16px;color:var(--ink-soft);max-width:52ch;margin:0 0 22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-btn{background:var(--ink);color:#fff;padding:13px 20px;border-radius:12px;font-weight:600;font-size:15px;transition:transform .12s}
.hero-btn:active{transform:translateY(1px)}
.hero-btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.hero-btn.lock{color:var(--ink-soft);cursor:default}

/* ===== parts / modules ===== */
.parts{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.part{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--c);border-radius:var(--r);
  padding:16px 16px 8px;box-shadow:0 1px 0 rgba(18,32,58,.03)}
.part-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.part-tag{font-family:var(--mono);font-weight:600;color:var(--c);font-size:13px}
.part-title{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.3px;margin:0;flex:1}
.part-prog{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.part-mods{display:flex;flex-direction:column}
.m-row{display:flex;align-items:center;gap:11px;padding:11px 6px;text-align:left;border-top:1px solid var(--line);width:100%}
.m-row:first-child{border-top:none}
.m-dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--c);flex:none}
.m-row.m-done .m-dot{background:var(--c)}
.m-name{flex:1;font-size:15px;font-weight:500}
.m-row.m-done .m-name{color:var(--ink-soft)}
.m-score{font-family:var(--mono);font-size:12px;color:var(--c)}
.m-row:active{background:rgba(18,32,58,.03)}

/* ===== lesson ===== */
.lesson,.exam{padding:26px 0 10px}
.l-crumb{font-family:var(--mono);font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;margin-bottom:8px}
.l-crumb-tag{color:var(--c);font-weight:600}
.l-title{font-family:var(--disp);font-weight:800;font-size:clamp(24px,6.5vw,34px);line-height:1.06;letter-spacing:-.8px;margin:0 0 18px}
.l-body>*{margin:14px 0}
.l-p{font-size:16.5px;line-height:1.62}
.l-quote{font-family:var(--disp);font-weight:500;font-size:19px;line-height:1.35;font-style:normal;
  border-left:4px solid var(--c);margin:18px 0;padding:4px 0 4px 16px;color:var(--ink)}
.l-def{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:16px;line-height:1.55}
.l-term{font-family:var(--mono);font-weight:600;color:var(--c)}
.l-nn{background:linear-gradient(180deg,rgba(224,90,77,.06),rgba(224,90,77,.03));border:1px solid rgba(224,90,77,.25);
  border-radius:12px;padding:14px 16px;font-size:15.5px;line-height:1.55}
.l-nn-tag{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
  color:#e05a4d;background:rgba(224,90,77,.12);padding:3px 8px;border-radius:20px;margin-right:8px;margin-bottom:4px}
.l-note{background:rgba(201,138,27,.08);border:1px dashed rgba(201,138,27,.4);border-radius:12px;padding:13px 16px;font-size:15px;line-height:1.55}
.l-list{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.l-list-t{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);margin-bottom:6px}
.l-list ul{margin:0;padding-left:18px}
.l-list li{font-size:15.5px;margin:3px 0}

/* ===== demo panels ===== */
.l-demo{background:var(--card);border:1px solid var(--ink);border-radius:14px;padding:14px;position:relative;
  box-shadow:4px 4px 0 rgba(18,32,58,.08)}
.l-demo-tag{position:absolute;top:-11px;left:14px;font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.6px;background:var(--ink);color:#fff;padding:3px 9px;border-radius:20px}
.l-demo-mount{margin-top:6px}
.demo-canvas{width:100%;display:block;border-radius:8px;background:#fdfdfb;border:1px solid var(--line);touch-action:none}
.demo-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.demo-btn{background:var(--ink);color:#fff;font-family:var(--mono);font-size:13px;padding:8px 12px;border-radius:9px}
.demo-btn:active{transform:translateY(1px)}
.demo-info{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-top:8px}
.demo-info b{color:var(--ink)}
.demo-ctrls{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin:10px 0}
.demo-slider{display:flex;align-items:center;gap:8px}
.demo-slider label{font-family:var(--mono);font-size:12px;color:var(--ink-soft);width:66px;flex:none}
.demo-slider input{flex:1;accent-color:var(--c)}
.demo-val{font-family:var(--mono);font-size:12px;width:30px;text-align:right}
@media(max-width:440px){.demo-ctrls{grid-template-columns:1fr}}

/* tree */
.tree-q{margin-top:6px}
.tree-question{font-family:var(--disp);font-weight:500;font-size:17px;margin-bottom:10px}
.tree-leaf{font-family:var(--disp);font-weight:800;font-size:24px;margin:6px 0}
.tree-path{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.tree-step{font-family:var(--mono);font-size:11px;background:rgba(18,32,58,.06);padding:4px 8px;border-radius:20px;color:var(--ink-soft)}

/* conv */
.conv-wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.conv-col{flex:1;min-width:130px}
.conv-title{font-family:var(--mono);font-size:11px;color:var(--ink-soft);text-align:center;margin-bottom:6px}
.conv-grid{display:grid;gap:2px;aspect-ratio:1;touch-action:none}
.conv-cell{aspect-ratio:1;border-radius:2px}

/* bagging */
.bag-wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.bag-tree{font-family:var(--mono);font-size:14px;font-weight:600;padding:7px 9px;border-radius:9px;border:1.5px solid}
.bag-res{flex-basis:100%;font-family:var(--disp);font-weight:700;font-size:16px;margin-top:6px}

/* ===== quiz ===== */
.l-quizmount{margin-top:22px}
.quiz{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.quiz-head{font-family:var(--disp);font-weight:700;font-size:17px;display:flex;align-items:center;gap:9px;margin-bottom:6px}
.quiz-tag{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:#fff;background:var(--c);padding:3px 9px;border-radius:20px}
.q{padding:14px 0;border-top:1px solid var(--line)}
.q:first-of-type{border-top:none}
.q-text{font-size:15.5px;font-weight:500;margin-bottom:9px}
.q-num{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.q-opts{display:flex;flex-direction:column;gap:7px}
.q-opt{text-align:left;padding:10px 13px;border:1.5px solid var(--line);border-radius:10px;font-size:14.5px;transition:.12s}
.q-opt.pick{border-color:var(--c);background:rgba(18,32,58,.03)}
.q-opt.correct{border-color:#2f9e6f;background:rgba(47,158,111,.12);font-weight:600}
.q-opt.wrong{border-color:#e05a4d;background:rgba(224,90,77,.1)}
.q-opt:disabled{cursor:default}
.q-ex{font-size:13.5px;color:var(--ink-soft);margin-top:8px;line-height:1.5}
.q-ex:empty{display:none}
.quiz-submit{margin-top:14px;width:100%;background:var(--c);color:#fff;padding:13px;border-radius:11px;font-weight:600;font-size:15px}
.quiz-submit:disabled{background:var(--ink);opacity:.85;cursor:default}
.quiz-result{margin-top:12px;font-size:15px;opacity:0;max-height:0;overflow:hidden;transition:.3s}
.quiz-result.show{opacity:1;max-height:400px}

/* cert */
.cert{margin-top:10px;border:2px solid var(--ink);border-radius:14px;padding:22px;text-align:center;background:var(--card);box-shadow:5px 5px 0 rgba(18,32,58,.1)}
.cert-score{font-family:var(--disp);font-weight:800;font-size:40px;letter-spacing:-1px}
.cert-grade{font-family:var(--disp);font-weight:700;font-size:18px;margin:6px 0}
.cert-sub{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}

/* nav */
.l-nav{display:flex;justify-content:space-between;gap:10px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
.l-navbtn{font-family:var(--body);font-weight:600;font-size:14px;color:var(--c);text-align:left;max-width:48%}

/* footer */
.foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.foot-reset{align-self:flex-start;font-family:var(--mono);font-size:12px;color:var(--ink-soft);text-decoration:underline}
.foot-note{font-size:12px;color:var(--ink-soft)}

/* ===== onboarding ===== */
.onboard{max-width:520px;margin:0 auto;padding:40px 22px 60px}
.ob-badge{font-family:var(--mono);font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}
.ob-title{font-family:var(--disp);font-weight:800;font-size:clamp(32px,9vw,50px);line-height:1;letter-spacing:-1.6px;margin:0 0 16px}
.ob-title span{color:var(--c)}
.ob-sub{font-size:16px;color:var(--ink-soft);line-height:1.55;margin:0 0 26px}
.ob-form{background:var(--card);border:1px solid var(--ink);border-radius:16px;padding:20px;box-shadow:5px 5px 0 rgba(18,32,58,.08)}
.ob-label{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px}
.ob-input{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:11px;font-size:16px;font-family:var(--body);margin-bottom:18px}
.ob-input:focus{outline:none;border-color:var(--c)}
.ob-animals{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:20px}
.ob-animal{font-size:24px;padding:8px 0;border:1.5px solid var(--line);border-radius:11px;transition:.12s}
.ob-animal.sel{border-color:var(--c);background:rgba(201,138,27,.1);transform:scale(1.05)}
.ob-go{width:100%;background:var(--ink);color:#fff;padding:15px;border-radius:12px;font-weight:600;font-size:16px}
.ob-go:disabled{opacity:.7}
.ob-mode{font-size:12px;color:var(--ink-soft);text-align:center;margin-top:12px}

:focus-visible{outline:2.5px solid var(--c);outline-offset:2px}