#consent-banner{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;margin:0 auto;max-width:680px;background:#FFFFFF;border:1px solid #D8DEEC;border-radius:14px;box-shadow:0 8px 30px rgba(27,35,54,.18);padding:14px 18px;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:14px;color:#3A4253}
#consent-banner .consent-actions{display:flex;gap:8px;flex-shrink:0}
#consent-banner button{border-radius:9px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer}
#consent-banner .consent-accept{background:#006b7a;border:1px solid #006b7a;color:#fff}
#consent-banner .consent-decline{background:#fff;border:1px solid #C2CAD9;color:#3A4253}

.task-widget{background:#fff;border:1px solid #D8DEEC;border-radius:14px;padding:20px 22px;margin:26px 0;box-shadow:0 2px 10px rgba(27,35,54,.05)}
.tw-type{font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#008799;margin-bottom:6px}
.tw-head h3{margin:0 0 6px;font-size:19px;color:#1B2336}
.tw-intro{margin:0 0 14px;color:#5A6478;font-size:14.5px;line-height:1.55}
.tw-prev{display:inline-block;font-size:12.5px;color:#247A52;background:#F0F9F4;border:1px solid #CDE9D9;border-radius:8px;padding:4px 10px;margin-bottom:12px}
.tw-prog{font-family:var(--font-mono,ui-monospace,monospace);font-size:12px;color:#7E88A8;margin-bottom:10px}
.tw-card{display:block;background:#F7F8FC;border:1px solid #E3E7F0;border-radius:10px;padding:14px 16px;font-size:15.5px;line-height:1.6;color:#1B2336;margin-bottom:14px}
.tw-opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tw-opts.tw-vert{flex-direction:column;align-items:stretch}
.tw-opt{background:#fff;border:1.5px solid #C2CAD9;border-radius:10px;padding:10px 14px;font:inherit;font-size:14.5px;color:#1B2336;cursor:pointer;text-align:left;transition:border-color .12s,background .12s}
.tw-opt:hover:not(:disabled){border-color:#008799;background:#F2FAFB}
.tw-opt:disabled{cursor:default;opacity:.75}
.tw-opt.sel{border-color:#008799;background:#E5F6F7}
.tw-opt.ok{border-color:#2F9E69;background:#F0F9F4;color:#247A52;opacity:1}
.tw-opt.no{border-color:#C0392B;background:#FDF2F0;color:#8C2B20;opacity:1}
.tw-opt.shake{animation:twShake .35s}
@keyframes twShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.tw-fb{display:none;border-radius:10px;padding:12px 14px;font-size:14.5px;line-height:1.55;margin-bottom:12px}
.tw-fb.show{display:block;background:#F7F8FC;border:1px solid #E3E7F0;color:#3A4253}
.tw-fb.show.ok{background:#F0F9F4;border-color:#CDE9D9;color:#24503C}
.tw-fb.show.no{background:#FDF2F0;border-color:#F0C9C2;color:#6E2A21}
.tw-fb.show.mid{background:#FFFBEC;border-color:#F2D98E;color:#5A4A1E}
.tw-next,.tw-redo{background:#008799;border:1px solid #008799;color:#fff;border-radius:9px;padding:9px 16px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.tw-redo{background:#fff;color:#008799}
.tw-seq{margin:0 0 14px;padding-left:26px}
.tw-seq li{background:#F0F9F4;border:1px solid #CDE9D9;border-radius:8px;padding:8px 12px;margin-bottom:6px;font-size:14.5px;color:#24503C}
.tw-match{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-bottom:12px}
.tw-col{display:flex;flex-direction:column;gap:8px}
.tw-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #E3E7F0;padding-top:12px;margin-top:4px}
.tw-score{font-family:var(--font-mono,ui-monospace,monospace);font-size:13px;color:#3A4253}
@media(max-width:640px){.tw-match{grid-template-columns:1fr}}
.tw-spottext{background:#F7F8FC;border:1px solid #E3E7F0;border-radius:10px;padding:14px 16px;line-height:2;margin-bottom:12px}
.tw-seg{display:inline;background:transparent;border:none;border-bottom:2px dotted #C2CAD9;border-radius:0;padding:2px 1px;font:inherit;font-size:15px;color:#1B2336;cursor:pointer;text-align:left}
.tw-seg:hover:not(:disabled){background:#EEF7F8}
.tw-seg.sel{background:#E5F6F7;border-bottom:2px solid #008799}
.tw-seg.ok{background:#F0F9F4;border-bottom:2px solid #2F9E69}
.tw-seg.miss{background:#FDF2F0;border-bottom:2px solid #C0392B}
.tw-seg.fa{background:#FFFBEC;border-bottom:2px solid #C79100}
.tw-seg:disabled{cursor:default}
.tw-notes{margin:8px 0 0;padding-left:20px}
.tw-notes li{margin-bottom:6px}
.tw-ta{width:100%;box-sizing:border-box;border:1.5px solid #C2CAD9;border-radius:10px;padding:12px 14px;font:inherit;font-size:15px;line-height:1.6;color:#1B2336;margin-bottom:8px;resize:vertical}
.tw-ta:focus{outline:none;border-color:#008799}
.tw-checkwrap{margin-top:10px}
.tw-check{display:block;margin:8px 0;cursor:pointer}
.tw-check input{margin-right:8px}
.tw-fb .tw-next{margin-top:10px}


:root{
  --hero:#0B0F1A;--hero-2:#11182a;--hero-line:#232c44;
  --blue:oklch(0.66 0.15 264);--violet:oklch(0.66 0.15 305);--teal:oklch(0.66 0.13 208);
  --bc-primary:oklch(0.55 0.17 266);--bc-dark:oklch(0.46 0.15 266);
  --bg-paper:#F4F6FB;--bg-white:#FFFFFF;
  --border-soft:#E2E5EE;--border-light:#EAEDF4;
  --text-dark:#15171E;--text-muted:#5A6072;--text-light:#9AA1B4;
  --r:14px;--r-sm:10px;
  --font-sans:'Hanken Grotesk',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --font-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --font-mono:'JetBrains Mono','SF Mono',Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  font-family:var(--font-sans);
  background:var(--bg-paper);
  color:var(--text-dark);
  line-height:1.6;
}

/* ============ TOP NAVIGATION ============ */
.topbar{
  background:var(--bg-white);
  border-bottom:1px solid var(--border-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:17px 40px;
  gap:20px;
  position:sticky;
  top:0;
  z-index:100;
}
.logo-group{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  cursor:pointer;
}
.brand-mark{width:28px;height:28px;color:var(--blue);flex-shrink:0;display:block}
.logo-text{flex-direction:row;align-items:center;gap:0}
.logo-text .logo-main{
  font-family:var(--font-serif);
  font-size:21px;
  font-weight:500;
  color:var(--text-dark);
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.logo-text .logo-main b{font-weight:600}
.topbar-title{display:none}
.topbar-right{
  display:flex;
  align-items:center;
  gap:20px;
  margin-left:auto;
}
.progress-bar{
  width:120px;
  height:5px;
  background:var(--border-light);
  border-radius:3px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--blue),var(--violet));
  width:0;
  transition:width 0.4s ease;
  border-radius:3px;
}
.progress-text{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  color:var(--text-muted);
  white-space:nowrap;
  letter-spacing:0.04em;
}

/* ============ MAIN LAYOUT ============ */
.container{
  max-width:1080px;
  margin:0 auto;
  padding:64px 40px 80px;
}

/* ============ HERO (HOME) — dark two-tone block ============ */
.hero{
  background:var(--hero);
  color:#fff;
  padding:60px 40px 84px;
  border-radius:0 0 28px 28px;
  margin-bottom:0;
}
.hero-inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.hero-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:0.3em;
  margin-bottom:22px;
}
.hero-title{
  font-family:var(--font-serif);
  font-size:60px;
  font-weight:500;
  color:#fff;
  line-height:1.03;
  letter-spacing:-0.025em;
  margin-bottom:22px;
}
.hero-title em{font-style:italic;color:var(--violet)}
.hero-subtitle{
  font-size:18px;
  color:#9aa3bd;
  margin-bottom:34px;
  line-height:1.55;
  max-width:40ch;
}
.hero-author{
  font-size:14px;color:#8b93a7;margin:14px 0 0;
}
.hero-author a{color:var(--violet);text-decoration:underline;text-underline-offset:3px}
.hero-stats{
  display:flex;
  gap:36px;
  flex-wrap:wrap;
}
.stat-chip{
  background:none;
  border:none;
  border-radius:0;
  padding:0;
  text-align:left;
  min-width:0;
}
.stat-value{
  font-family:var(--font-serif);
  font-size:36px;
  font-weight:600;
  color:#fff;
  line-height:1;
}
.stat-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:#7e88a8;
  margin-top:8px;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
/* hero demo console */
.hero-demo{
  background:var(--hero-2);
  border:1px solid var(--hero-line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.hd-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid #1d2540}
.hd-bar i{width:10px;height:10px;border-radius:50%;background:#2c3552}
.hd-bar span{margin-left:8px;font-family:var(--font-mono);font-size:11px;color:#6f7aa0}
.hd-body{padding:22px 22px 24px;min-height:184px}
.hd-prompt{font-family:var(--font-mono);font-size:13.5px;color:#8b94b3;margin-bottom:16px}
.hd-prompt b{color:#cdd4ec;font-weight:400}
.hd-resp{font-family:var(--font-serif);font-size:22px;line-height:1.5;color:#fff}
.hd-resp .w{opacity:.15;animation:hdWord 5s ease-in-out infinite}
@keyframes hdWord{0%,5%{opacity:.15}15%{opacity:1}90%{opacity:1}100%{opacity:.15}}
.hd-cur{display:inline-block;width:9px;height:21px;background:var(--violet);margin-left:4px;vertical-align:-3px;animation:hdCaret .85s step-end infinite}
@keyframes hdCaret{50%{opacity:0}}
.hd-meta{margin-top:22px;font-family:var(--font-mono);font-size:10.5px;color:#5a6488;letter-spacing:0.04em;white-space:nowrap}
.hd-meta b{color:var(--teal);font-weight:400}

/* ============ OSP CARDS (ACCORDION) ============ */
.osp-cards{
  margin:60px 0;
}
.osp-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:18px;
}
.osp-card{
  background:var(--bg-white);
  border:1px solid var(--border-soft);
  border-radius:var(--r);
  margin-bottom:16px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(20,30,60,0.04);
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.osp-card:hover{
  box-shadow:0 16px 40px -24px rgba(20,30,60,0.45);
  border-color:var(--osp-color);
}
.osp-card-head{
  position:relative;
  padding:26px 30px 26px 36px;
  display:flex;
  align-items:center;
  gap:22px;
  cursor:pointer;
  user-select:none;
  transition:background 0.18s;
}
.osp-card-head::before{
  content:'';
  position:absolute;
  left:0; top:18px; bottom:18px;
  width:5px; border-radius:0 5px 5px 0;
  background:var(--osp-color);
}
.osp-card-head:hover{
  background:color-mix(in srgb, var(--osp-color) 5%, transparent);
}
.osp-icon{
  width:54px; height:54px;
  color:var(--osp-color);
  flex-shrink:0;
}
.osp-icon svg{width:100%;height:100%;overflow:visible;display:block}
.osp-card-info{
  flex:1;
  text-align:left;
}
.osp-kn{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.16em;
  color:var(--osp-color);
  margin-bottom:6px;
}
.osp-title{
  font-family:var(--font-serif);
  font-size:27px;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--text-dark);
  margin-bottom:3px;
}
.osp-subtitle{
  font-size:14.5px;
  color:var(--text-muted);
  line-height:1.4;
}
.osp-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  flex-shrink:0;
}
.osp-count{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-muted);
  letter-spacing:0.06em;
  white-space:nowrap;
}
.acc-chevron{
  font-size:11px;
  color:var(--text-light);
  transition:transform 0.3s ease;
}
.osp-card-head[onclick].open .acc-chevron{
  transform:rotate(180deg);
}
.osp-card-lessons{
  border-top:1px solid var(--border-light);
  display:flex;
  flex-direction:column;
  max-height:0;
  overflow:hidden;
}
.osp-card-lessons.open{
  max-height:2000px;
}
.acc-lesson{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 24px;
  border:none;
  background:none;
  text-align:left;
  cursor:pointer;
  border-bottom:1px solid var(--border-light);
  font-size:14px;
  color:var(--text-dark);
  transition:background 0.1s;
}
.acc-lesson:last-child{
  border-bottom:none;
}
.acc-lesson:hover{
  background:color-mix(in srgb, var(--osp-color) 5%, transparent);
}
.acc-lesson.done{
  color:var(--text-light);
}
.acc-l-num{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:32px;
  background:var(--osp-color,var(--bc-primary));
  color:#fff;
  border-radius:50%;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:500;
  flex-shrink:0;
}
.acc-l-title{
  flex:1;
  font-weight:500;
}
.acc-lesson.done .acc-l-title{
  text-decoration:line-through;
}
.acc-l-icon{
  display:none;
}
.acc-l-check{
  width:20px;
  height:20px;
  border:2px solid var(--border-soft);
  border-radius:3px;
  flex-shrink:0;
  transition:all 0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  color:var(--bg-white);
}
.acc-lesson.done .acc-l-check{
  background:#059669;
  border-color:#059669;
}
.acc-lesson.done .acc-l-check::after{
  content:'✓';
}
.acc-l-check{cursor:pointer}
.acc-l-check:hover{
  border-color:#059669;
  box-shadow:0 0 0 3px color-mix(in srgb,#059669 18%,transparent);
}
.acc-lesson.done .acc-l-check:hover{
  background:#04734f;
  border-color:#04734f;
}
.osp-card-progress{
  padding:16px 24px;
  border-top:1px solid var(--border-light);
  display:flex;
  align-items:center;
  gap:12px;
}
.prog-bar{
  flex:1;
  height:6px;
  background:var(--border-light);
  border-radius:3px;
  overflow:hidden;
}
.prog-fill{
  height:100%;
  width:0;
  transition:width 0.5s ease;
}
.prog-text{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-muted);
  font-weight:500;
  min-width:60px;
  text-align:right;
}

/* ============ ANIMATED TRACK ICONS ============ */
.aic-ring,.aic-line,.aic-spin,.aic-orbit{transform-box:fill-box}
.aic-ring{transform-origin:center;animation:aicPulse 2.8s ease-out infinite}
.aic-ring:nth-child(2){animation-delay:.93s}.aic-ring:nth-child(3){animation-delay:1.86s}
@keyframes aicPulse{0%{transform:scale(.28);opacity:1}100%{transform:scale(1);opacity:0}}
.aic-line{transform-origin:left center;animation:aicType 3.4s ease-in-out infinite}
.aic-line.l2{animation-delay:.45s}.aic-line.l3{animation-delay:.9s}
@keyframes aicType{0%,6%{transform:scaleX(0)}32%,68%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
.aic-caret{animation:aicBlink 1.05s steps(1) infinite}
@keyframes aicBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
.aic-spin,.aic-orbit{transform-box:view-box;transform-origin:24px 24px}
.aic-spin{animation:aicSpin 9s linear infinite}
.aic-orbit{animation:aicSpin 3.6s linear infinite}
@keyframes aicSpin{to{transform:rotate(360deg)}}

/* ============ LESSON VIEW ============ */
.lesson-view{
  display:none;
}
.lesson-view.active{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.lesson-header{
  background:var(--bg-white);
  border-bottom:1px solid var(--border-soft);
  padding:40px 32px;
  margin-bottom:0;
}
.breadcrumb{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--text-muted);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.bc-link{
  color:var(--bc-primary);
  cursor:pointer;
  font-weight:600;
}
.bc-link:hover{
  text-decoration:underline;
}
.lesson-title{
  font-family:var(--font-serif);
  font-size:40px;
  font-weight:500;
  color:var(--text-dark);
  line-height:1.12;
  letter-spacing:-0.02em;
  margin-bottom:16px;
  overflow-wrap:anywhere;
}
.lesson-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  padding:6px 12px;
  border-radius:20px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  white-space:nowrap;
}
.lesson-badges .badge{
  box-sizing:border-box;
  max-width:100%;
  white-space:normal;
  line-height:1.45;
}
.badge-osp{
  background:color-mix(in srgb, var(--bc-primary) 12%, transparent);
  color:var(--bc-primary);
}
.badge-type{
  background:#EFF6FF;
  color:#1D4ED8;
}
.badge-assess{
  background:#FEF3C7;
  color:#92400E;
}

/* ============ AJATTELUN SELKÄRANKA ============ */
.thinking-path{
  --thinking-accent:var(--bc-primary);
}
.module-notice{
  margin:30px 0;
  padding:20px 22px;
  border:1px solid color-mix(in srgb,var(--teal) 34%,var(--border-soft));
  border-left:5px solid var(--teal);
  border-radius:var(--r);
  background:color-mix(in srgb,var(--teal) 6%,#fff);
  box-shadow:0 1px 3px rgba(20,30,60,.04);
}
.module-notice__label{
  margin-bottom:7px;
  color:#006B7A;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.module-notice p{
  max-width:78ch;
  margin:0;
  color:var(--text-dark);
  font-size:15px;
  line-height:1.65;
}
.thinking-path--course,.thinking-path--module{
  background:var(--bg-white);
  border:1px solid var(--border-soft);
  border-radius:var(--r);
  padding:24px 26px;
  box-shadow:0 1px 3px rgba(20,30,60,.04);
  margin:30px 0;
}
.thinking-path--lesson{
  width:100%;
  padding:0 40px;
  border-bottom:1px solid var(--border-soft);
  background:#F8FAFC;
}
.thinking-path__lesson-inner{
  display:grid;
  grid-template-columns:minmax(430px,.9fr) minmax(0,1.1fr);
  align-items:center;
  gap:26px;
  width:100%;
  max-width:1080px;
  min-height:72px;
  margin:0 auto;
}
.thinking-path__eyebrow{
  margin-bottom:7px;
  color:var(--thinking-accent);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.thinking-path h2{
  margin:0 0 8px;
  color:var(--text-dark);
  font-family:var(--font-serif);
  font-size:25px;
  font-weight:600;
  line-height:1.2;
}
.thinking-path__lead{
  max-width:76ch;
  margin:0 0 18px;
  color:var(--text-muted);
  font-size:14.5px;
  line-height:1.65;
}
.thinking-path__scroller{max-width:100%;overflow-x:auto;padding:2px 2px 8px}
.thinking-path__scroller:focus-visible{outline:3px solid var(--thinking-accent);outline-offset:4px;border-radius:8px}
.thinking-path__steps{
  display:grid;
  grid-template-columns:repeat(5,minmax(142px,1fr));
  gap:8px;
  min-width:760px;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:thinking-step;
}
.thinking-step{
  counter-increment:thinking-step;
  min-width:0;
  padding:13px 14px;
  border:1px solid var(--border-soft);
  border-radius:10px;
  background:#F7F8FC;
}
.thinking-step__name{
  display:block;
  margin-bottom:5px;
  color:var(--text-dark);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
}
.thinking-step__name::before{
  content:counter(thinking-step) '. ';
  color:var(--thinking-accent);
}
.thinking-step__desc{display:block;color:var(--text-muted);font-size:12.5px;line-height:1.42}
.thinking-step.is-active{
  border-color:color-mix(in srgb,var(--thinking-accent) 56%,#fff);
  background:color-mix(in srgb,var(--thinking-accent) 9%,#fff);
  box-shadow:inset 0 3px 0 var(--thinking-accent);
}
.thinking-step.is-active .thinking-step__name{color:color-mix(in srgb,var(--thinking-accent) 72%,#111827)}
.course-thinking-demo{margin:20px 0 2px}
.course-thinking-graph{
  position:relative;
  width:900px;
  height:282px;
  font-family:var(--font-mono);
  animation:courseThinkingTimeline 13.5s 1 forwards;
}
.course-thinking-flow{
  position:absolute;
  top:42px;
  left:0;
  display:grid;
  grid-template-columns:repeat(4,150px 37.5px) 150px;
  align-items:center;
  width:900px;
}
.course-thinking-node{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  min-height:132px;
  padding:16px 14px 14px;
  border:1px solid #34415F;
  border-radius:13px;
  color:#EAEEF8;
  background:#172038;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  opacity:1;
  transform:none;
  animation:courseThinkingNode 1.65s cubic-bezier(.2,.8,.2,1) var(--ctg-delay) 1 both;
}
.course-thinking-node::after{
  content:'';
  position:absolute;
  inset:-1px;
  border:1px solid var(--ctg-accent);
  border-radius:13px;
  opacity:0;
  animation:courseThinkingGlow 1.65s ease-out var(--ctg-delay) 1 both;
}
.course-thinking-node__index{
  display:block;
  margin-bottom:12px;
  color:var(--ctg-accent);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
}
.course-thinking-node strong{
  display:block;
  margin-bottom:7px;
  color:#fff;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.2;
}
.course-thinking-node>span:last-child{display:block;color:#B9C2DA;font-size:11px;line-height:1.45}
.course-thinking-edge{
  position:relative;
  z-index:0;
  display:block;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,#34415F,#46C7CF);
  transform:scaleX(0);
  transform-origin:left center;
  animation:courseThinkingEdge .75s ease-out var(--ctg-delay) 1 both;
}
.course-thinking-edge::after{
  content:'';
  position:absolute;
  top:-4px;
  right:-1px;
  width:0;
  height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:7px solid #46C7CF;
}
.course-thinking-return{
  position:absolute;
  left:0;
  top:164px;
  width:900px;
  height:94px;
  overflow:visible;
  opacity:0;
  animation:courseThinkingReturnVisible 2.5s ease-out 10.2s 1 forwards;
}
.course-thinking-return__path{
  fill:none;
  stroke:#46C7CF;
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:courseThinkingReturnDraw 2.25s ease-in-out 10.2s 1 forwards;
}
.course-thinking-return__label{
  position:absolute;
  left:474px;
  top:239px;
  color:#7FD0A8;
  font-size:11px;
  letter-spacing:.02em;
  opacity:0;
  animation:courseThinkingLabel .8s ease-out 12s 1 forwards;
}
@keyframes courseThinkingTimeline{0%,100%{opacity:1}}
@keyframes courseThinkingNode{
  0%{opacity:1;transform:none;border-color:#34415F}
  52%{opacity:1;transform:translateY(-3px) scale(1.025)}
  100%{opacity:1;transform:none;border-color:var(--ctg-accent)}
}
@keyframes courseThinkingGlow{0%{opacity:0;box-shadow:0 0 0 rgba(70,199,207,0)}55%{opacity:.8;box-shadow:0 0 24px color-mix(in srgb,var(--ctg-accent) 44%,transparent)}100%{opacity:.16;box-shadow:none}}
@keyframes courseThinkingEdge{0%{opacity:0;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}
@keyframes courseThinkingReturnVisible{0%{opacity:0}12%,100%{opacity:1}}
@keyframes courseThinkingReturnDraw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes courseThinkingLabel{0%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:none}}
.lesson-thinking-steps{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
  min-width:0;
  margin:0;
  padding:0;
  list-style:none;
}
.lesson-thinking-step{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
  padding:7px 5px;
  border-radius:999px;
  color:var(--text-muted);
  font-family:var(--font-mono);
  font-size:10.5px;
  line-height:1;
  white-space:nowrap;
}
.lesson-thinking-step__index{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  flex:0 0 18px;
  border:1px solid #CBD5E1;
  border-radius:50%;
  color:#64748B;
  background:#fff;
  font-size:9.5px;
  font-weight:650;
}
.lesson-thinking-step.is-active{
  color:color-mix(in srgb,var(--thinking-accent) 76%,#111827);
  background:color-mix(in srgb,var(--thinking-accent) 9%,#fff);
  font-weight:650;
}
.lesson-thinking-step.is-active .lesson-thinking-step__index{
  border-color:var(--thinking-accent);
  color:#fff;
  background:var(--thinking-accent);
}
.thinking-path__question{
  display:grid;
  gap:3px;
  margin:0;
  padding:0 0 0 22px;
  border-left:1px solid var(--border-soft);
  color:var(--text-dark);
  font-size:13.5px;
  line-height:1.4;
}
.thinking-path__question-label{
  color:var(--thinking-accent);
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:650;
  letter-spacing:.11em;
  line-height:1.2;
  text-transform:uppercase;
}

@media(max-width:900px){
  .thinking-path--lesson{padding:0 24px}
  .thinking-path__lesson-inner{
    grid-template-columns:1fr;
    gap:9px;
    padding:11px 0 12px;
  }
  .thinking-path__question{
    padding:9px 0 0;
    border-top:1px solid var(--border-soft);
    border-left:0;
  }
}

@media(max-width:768px){
  .module-notice{padding:18px}
  .thinking-path--course,.thinking-path--module{padding:20px 18px}
  .thinking-path--lesson{padding:0 16px}
  .thinking-path--course h2,.thinking-path--module h2{font-size:22px}
  .thinking-path__scroller{overflow-x:visible}
  .thinking-path__steps{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}
  .thinking-step:last-child{grid-column:1/-1}
  .lesson-thinking-step{
    flex-direction:column;
    gap:4px;
    padding:5px 1px;
    font-size:9.5px;
  }
}

@media(max-width:680px){
  .course-thinking-demo .ai-demo__mobile-node{
    display:block;
    padding:10px 12px;
    border:1px solid #34415f;
    border-radius:9px;
    background:#172038;
    color:#fff;
    font:500 13px/1.45 var(--font-sans);
    position:relative;
  }
  .course-thinking-demo .ai-demo__mobile-node strong{color:#fff}
  .course-thinking-mobile.ai-demo__mobile-model--loop .ai-demo__mobile-node:last-child::after{
    content:'↻ uusi havainto voi palauttaa aiempaan vaiheeseen';
  }
}

@media(prefers-reduced-motion:reduce){
  .course-thinking-graph,.course-thinking-graph *{animation-delay:0s!important}
  .course-thinking-node{opacity:1;transform:none}
  .course-thinking-edge{opacity:1;transform:scaleX(1)}
  .course-thinking-return,.course-thinking-return__label{opacity:1}
  .course-thinking-return__path{stroke-dashoffset:0}
}

/* ============ TABS ============ */
.lesson-tabs{
  display:flex;
  border-bottom:2px solid var(--border-soft);
  background:var(--bg-white);
  padding:0 32px;
  overflow-x:auto;
  gap:0;
}
.tab-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:14px 18px;
  border:none;
  background:none;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  color:var(--text-muted);
  border-bottom:3px solid transparent;
  margin-bottom:-2px;
  transition:all 0.2s;
  white-space:nowrap;
}
.tab-btn:hover{
  color:var(--bc-primary);
}
.tab-btn.active{
  color:var(--bc-primary);
  border-bottom-color:var(--bc-primary);
}
.tab-btn svg{width:15px;height:15px;flex-shrink:0}

/* ============ LESSON CONTENT ============ */
.lesson-panels{
  flex:1;
  padding:40px 32px;
  overflow-y:auto;
}
.panel{
  display:none;
  max-width:780px;
  margin:0 auto;
}
.panel.active{
  display:block;
}
.slides-container{
  position:relative;
  width:100%;
  padding-top:8px;
}
.slides-container iframe{
  width:100%;
  height:min(569px,56vw);
  border:1px solid var(--border-soft);
  border-radius:var(--r-sm);
}
.deck-wrap{margin-top:6px}
.deck-hint{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-muted);margin-bottom:8px}
.deck{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:12px}
.deck::-webkit-scrollbar{height:8px}
.deck::-webkit-scrollbar-thumb{background:var(--border-soft);border-radius:8px}
.deck-slide{flex:0 0 100%;scroll-snap-align:center;border:1px solid var(--border-soft);border-radius:var(--r-sm);overflow:hidden;background:#FAFBFE}
.deck-slide svg{display:block;width:100%;height:auto}
.deck-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.deck-full-btn{font-family:var(--font-mono);font-size:12px;color:var(--bc-primary);background:none;border:1px solid var(--border-soft);border-radius:8px;padding:9px 12px;min-width:44px;min-height:44px;cursor:pointer;white-space:nowrap}
.deck-full-btn:hover{background:color-mix(in srgb,var(--bc-primary) 8%,transparent)}
.deck-wrap:fullscreen{background:#0B0F1A;padding:0;margin:0;display:flex;flex-direction:column;justify-content:center}
.deck-wrap:fullscreen .deck-bar{position:fixed;top:14px;right:18px;margin:0;z-index:5}
.deck-wrap:fullscreen .deck-hint{display:none}
.deck-wrap:fullscreen .deck-full-btn{color:#EAEEF8;border-color:#44517A;background:rgba(255,255,255,.08)}
.deck-wrap:fullscreen .deck{gap:0;padding:0;height:100vh;align-items:center}
.deck-wrap:fullscreen .deck-slide{flex:0 0 100%;height:100vh;display:flex;align-items:center;justify-content:center;border:none;border-radius:0;background:#0B0F1A}
.deck-wrap:fullscreen .deck-slide svg{width:min(100vw,177.78vh);height:auto}
.panel h1{
  font-family:var(--font-serif);
  font-size:27px;
  font-weight:600;
  margin:28px 0 12px;
  color:var(--text-dark);
  letter-spacing:-0.01em;
}
.panel h1:first-child{
  margin-top:0;
}
.panel h2{
  font-family:var(--font-serif);
  font-size:20px;
  font-weight:600;
  margin:24px 0 10px;
  color:var(--text-dark);
}
.panel h3{
  font-size:15px;
  font-weight:700;
  margin:16px 0 8px;
  color:var(--text-dark);
}
.panel p{
  margin:0 0 14px;
  color:var(--text-muted);
  line-height:1.75;
}
.panel strong{
  color:var(--text-dark);
  font-weight:700;
}
.panel em{
  font-style:italic;
}
.panel a{
  color:var(--bc-primary);
  text-decoration:none;
  font-weight:600;
}
.panel a:hover{
  text-decoration:underline;
}
.panel ul,.panel ol{
  margin:10px 0 14px 22px;
}
.panel li{
  margin-bottom:6px;
  color:var(--text-muted);
  line-height:1.7;
}
.panel code{
  background:#F3F4F6;
  padding:3px 8px;
  border-radius:4px;
  font-family:"Fira Code","SF Mono",Consolas,monospace;
  font-size:13px;
  color:var(--bc-dark);
}
.panel pre{
  background:#1E293B;
  color:#E2E8F0;
  padding:16px 20px;
  border-radius:var(--r-sm);
  overflow-x:auto;
  margin:16px 0 18px;
  font-family:"Fira Code","SF Mono",Consolas,monospace;
  font-size:13px;
  line-height:1.6;
}
.panel pre code{
  background:none;
  padding:0;
  color:inherit;
  font-size:inherit;
  font-family:inherit;
}
.panel table{
  border-collapse:collapse;
  width:100%;
  margin:14px 0 18px;
  font-size:14px;
}
.panel th{
  background:#F8FAFC;
  padding:10px 14px;
  text-align:left;
  border:1px solid var(--border-soft);
  font-weight:700;
  font-size:12px;
  color:var(--text-dark);
}
.panel td{
  padding:10px 14px;
  border:1px solid var(--border-soft);
  color:var(--text-muted);
}
.panel hr{
  border:none;
  border-top:1px solid var(--border-light);
  margin:24px 0;
}
.panel blockquote{
  border-left:4px solid var(--border-light);
  padding:14px 18px;
  background:#F9FAFB;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  margin:16px 0;
  color:var(--text-muted);
}
.panel blockquote.pause{
  background:#FEF9EC;
  border-left-color:#F59E0B;
  padding:16px 20px;
}
.panel blockquote.pause p{
  color:#78350F;
  font-weight:600;
  margin:0;
}
.panel .solo-note{
  background:#ECFDF5;
  border-left:4px solid #10B981;
  padding:14px 18px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:13px;
  color:#065F46;
  margin:14px 0;
}
.panel h2.task-header{
  background:#F7F8FA;
  border-left:4px solid var(--bc-primary);
  padding:12px 16px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--bc-primary);
  font-size:15px;
  margin:20px 0 12px;
}

/* ============ TASK CARDS ============ */
.task-card{
  background:var(--bg-white);
  border:1px solid var(--border-soft);
  border-radius:12px;
  margin:24px 0;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
  transition:box-shadow 0.2s;
}
.task-card:hover{
  box-shadow:0 3px 12px rgba(0,0,0,0.08);
}
.task-card-header{
  padding:16px 20px 14px;
  border-bottom:1px solid var(--border-soft);
  display:flex;
  align-items:center;
  gap:10px;
}
.task-card-header h2{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--text-dark);
  line-height:1.3;
}
.task-card-body{
  padding:20px 24px;
}
.task-card-body > :first-child{
  margin-top:0;
}
.task-card-body > :last-child{
  margin-bottom:0;
}

/* Task type: regular task — purple-ish left accent */
.task-card--task{
  border-left:4px solid var(--bc-primary);
}
.task-card--task .task-card-header{
  background:linear-gradient(135deg, #F1F4FE 0%, #EAEFFD 100%);
}
.task-card--task .task-card-header h2{
  color:var(--bc-primary);
}
.task-card--task .task-card-header::before{
  content:'';width:10px;height:10px;border-radius:3px;flex-shrink:0;
  background:var(--bc-primary);
}

/* Task type: info — blue accent (väärinkäsitykset, osaamistavoitteet, CFU) */
.task-card--info{
  border-left:4px solid #8E7BE6;
}
.task-card--info .task-card-header{
  background:linear-gradient(135deg, #F5F2FE 0%, #EFEAFD 100%);
}
.task-card--info .task-card-header h2{
  color:#6A48C9;
}
.task-card--info .task-card-header::before{
  content:'';width:10px;height:10px;border-radius:3px;flex-shrink:0;
  background:#6A48C9;
}

/* Task type: assessment — amber accent */
.task-card--assessment{
  border-left:4px solid #D97706;
}
.task-card--assessment .task-card-header{
  background:linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
}
.task-card--assessment .task-card-header h2{
  color:#92400E;
}
.task-card--assessment .task-card-header::before{
  content:'';width:10px;height:10px;border-radius:3px;flex-shrink:0;
  background:#D97706;
}

/* Task type: resource — green accent */
.task-card--resource{
  border-left:4px solid #059669;
}
.task-card--resource .task-card-header{
  background:linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
}
.task-card--resource .task-card-header h2{
  color:#065F46;
}
.task-card--resource .task-card-header::before{
  content:'';width:10px;height:10px;border-radius:3px;flex-shrink:0;
  background:#059669;
}

/* Remove hr separators inside card panels — cards do the separating now */
.task-card + hr,
.task-card-body hr{
  display:none;
}

/* Small cards (h3-level) — slightly less prominent */
.task-card--sm{
  margin:16px 0;
  border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,0.03);
}
.task-card--sm .task-card-header{
  padding:12px 16px 10px;
}
.task-card--sm .task-card-header h3{
  margin:0;
  font-size:14px;
  font-weight:700;
  line-height:1.3;
}
.task-card--sm .task-card-body{
  padding:14px 18px;
}
.task-card--sm .task-card-header::before{
  width:8px;height:8px;
}

/* Nested h3 inside task cards (when not a card themselves) */
.task-card-body h3{
  font-size:14px;
  font-weight:700;
  color:var(--text-dark);
  margin:18px 0 8px;
  padding-bottom:6px;
  border-bottom:1px solid #ECEFF6;
}

/* ============ LESSON FOOTER ============ */
.lesson-footer{
  border-top:1px solid var(--border-soft);
  padding:24px 32px;
  background:var(--bg-white);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.nav-buttons{
  display:flex;
  gap:12px;
}
.btn{
  padding:10px 20px;
  border:1px solid var(--border-soft);
  border-radius:var(--r-sm);
  background:var(--bg-white);
  color:var(--text-muted);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s;
  display:flex;
  align-items:center;
  gap:6px;
}
.btn:hover:not(:disabled){
  background:color-mix(in srgb, var(--bc-primary) 6%, transparent);
  color:var(--bc-primary);
  border-color:var(--bc-primary);
}
.btn:disabled{
  opacity:0.4;
  cursor:not-allowed;
}
.btn-primary{
  background:var(--bc-primary);
  color:var(--bg-white);
  border-color:var(--bc-primary);
}
.btn-primary:hover{
  background:var(--bc-dark);
  border-color:var(--bc-dark);
}
.done-btn{
  padding:10px 20px;
  border:2px solid var(--border-soft);
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--text-muted);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s;
}
.done-btn.marked{
  background:#ECFDF5;
  border-color:#059669;
  color:#059669;
}
.done-btn:hover{
  background:#ECFDF5;
  border-color:#059669;
  color:#059669;
}

/* ============ MERMAID DIAGRAMS ============ */
.mermaid{
  margin:32px 0;
  padding:24px 20px;
  background:linear-gradient(135deg, #FBFCFF 0%, #EEF1FA 100%);
  border:1px solid var(--border-soft);
  border-left:4px solid var(--bc-primary);
  border-radius:12px;
  text-align:center;
  overflow-x:auto;
  box-shadow:0 2px 8px rgba(20,30,60,0.06);
}
.mermaid svg{
  max-width:100%;
  height:auto;
  filter:saturate(0.9);
}
/* Override mermaid node styles for course brand */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon{
  stroke-width:1.5px !important;
  rx:8 !important;
  ry:8 !important;
}
.mermaid .edgePath .path{
  stroke-width:1.8px !important;
  stroke:#6B5B73 !important;
}
.mermaid .edgeLabel{
  font-size:13px !important;
  background:#FDFCFA !important;
  padding:2px 6px !important;
}
.mermaid .cluster rect{
  rx:12 !important;
  ry:12 !important;
  stroke:#C4CCF2 !important;
  fill:#F2F5FE !important;
}
.mermaid .label{
  font-size:14px !important;
  color:#2D2D2D !important;
}

/* ============ READER MODERNIZATION (v2) — contrast, rhythm, hierarchy ============ */
:root{
  --text-muted:#4A5161;
  --reader-body:#363C4C;
}
.lesson-panels{padding:48px 32px 72px}
.panel{max-width:744px}
.panel h1{font-family:var(--font-serif);font-size:31px;font-weight:600;letter-spacing:-0.018em;color:var(--text-dark);margin:0 0 20px}
.panel h2{font-family:var(--font-serif);font-size:23px;font-weight:600;letter-spacing:-0.01em;color:var(--text-dark);margin:40px 0 12px}
.panel h3{font-family:var(--font-sans);font-size:15px;font-weight:700;letter-spacing:0.005em;color:var(--text-dark);margin:26px 0 8px}
.panel p,.panel li{color:var(--reader-body);font-size:15.5px;line-height:1.8}
.panel li{margin-bottom:8px}
.panel ul,.panel ol{margin:12px 0 16px 22px}
.panel strong{color:var(--text-dark);font-weight:600}
.panel a{color:var(--bc-dark);text-decoration-thickness:1px;text-underline-offset:2px}
.panel hr{border-top:1px solid var(--border-soft);margin:30px 0}
.panel table{font-size:14.5px;border:1px solid var(--border-soft);border-radius:10px;overflow:hidden}
.panel table:focus-visible{outline:3px solid var(--bc-dark);outline-offset:3px}
.panel th{background:#EBEEF7;color:var(--text-dark);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.03em;text-transform:uppercase;border-color:var(--border-soft)}
.panel td{color:var(--reader-body);border-color:var(--border-soft)}
.panel code{font-family:var(--font-mono);background:#EEF1FA;color:#3A3FA6;border:1px solid #E2E6F3;border-radius:5px;text-decoration:none}
.panel pre{font-family:var(--font-mono);background:#0E1320;border:1px solid #1C2438;border-radius:12px;color:#E6EAF5;white-space:pre-wrap;word-break:break-word;text-decoration:none;line-height:1.65;font-size:13px}
.panel pre code{font-family:var(--font-mono);white-space:pre-wrap;text-decoration:none;border:none;background:none;padding:0}
.panel blockquote{border-left:3px solid var(--border-soft);background:#F6F8FC;color:var(--reader-body);border-radius:0 10px 10px 0}
.panel blockquote.pause{background:#FFF8EC;border-left-color:#E0982E}
.panel blockquote.pause p{color:#7A4E12}
.panel .solo-note{background:#E9F7F0;border-left-color:#23A578;color:#175C44}

/* Task cards — flatter, cleaner, stronger header type */
.task-card{border:1px solid var(--border-soft);border-radius:14px;box-shadow:0 1px 2px rgba(20,30,60,.045);margin:22px 0}
.task-card:hover{box-shadow:0 10px 30px -18px rgba(20,30,60,.35)}
.task-card-header{padding:15px 22px;border-bottom:1px solid var(--border-soft);gap:11px}
.task-card-header h2{font-family:var(--font-sans);font-size:16.5px;font-weight:700;line-height:1.35;color:var(--text-dark);flex:1}
.task-card-header h3{flex:1}
.task-card-body{padding:20px 24px}
.task-card-body p,.task-card-body li{color:var(--reader-body)}
.task-card--task .task-card-header{background:#EEF1FD}
.task-card--info .task-card-header{background:#F2EFFD}
.task-card--info{border-left-color:#8E7BE6}
.task-card--assessment .task-card-header{background:#FFF6E6}
.task-card--assessment{border-left-color:#D9930B}
.task-card--resource .task-card-header{background:#E9F7F0}
.task-card--resource{border-left-color:#14A06F}

/* Small (h3) cards — nested look under their section heading */
.task-card--sm{margin:11px 0 11px 24px;background:#FBFCFE;box-shadow:none;border-radius:11px}
.task-card--sm .task-card-header{padding:12px 18px;border-bottom-color:var(--border-light)}
.task-card--sm .task-card-header h3{font-size:14.5px;font-weight:700;color:var(--text-dark)}
.task-card--sm .task-card-body{padding:14px 18px}

/* Header-only cards (empty body) → render as a SECTION HEADING, not a card */
.task-card.is-sectionhead{
  border:none;background:none;box-shadow:none;overflow:visible;border-radius:0;margin:44px 0 8px;
}
.task-card.is-sectionhead:hover{box-shadow:none}
.task-card.is-sectionhead > .task-card-body{display:none}
.task-card.is-sectionhead .task-card-header{
  background:none;border:none;border-bottom:2px solid var(--border-soft);padding:0 0 10px;border-radius:0;gap:12px;
}
.task-card.is-sectionhead .task-card-header h2{
  font-family:var(--font-serif);font-size:23px;font-weight:600;color:var(--text-dark);
}
.task-card.is-sectionhead .task-card-header::before{width:11px;height:11px;border-radius:3px}
.task-card--info.is-sectionhead .task-card-header{border-bottom-color:#C9BEF1}
.task-card--info.is-sectionhead .task-card-header::before{background:#8E7BE6}
.task-card--task.is-sectionhead .task-card-header::before{background:var(--bc-primary)}

/* Status pills (Suositeltu / Syventävä) */
.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;padding:3px 10px 3px 9px;border-radius:999px;white-space:nowrap;line-height:1.5;margin-left:4px;position:relative;top:-1px}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.pill--rec{background:#E1F4EA;color:#0E7D55}
.pill--adv{background:#EFEAFB;color:#6A48C9}

@media (prefers-reduced-motion: reduce){
  .hd-resp .w{opacity:1 !important;animation:none}
  .hd-cur{animation:none}
}

/* —— Variant: KORTIT (soft, rounded, colourful) —— */

/* —— Variant: LEHTI (editorial, ruled, minimal chrome) —— */

/* —— Variant: KONSOLI (technical, mono, crisp) —— */
#lesson-panels.rv-tech{background:#ECEFF7}
#lesson-panels.rv-tech .panel > h2{font-family:var(--font-mono);font-size:17px;font-weight:500;letter-spacing:0;color:var(--text-dark);margin-top:38px}
#lesson-panels.rv-tech .panel > h2::before{content:'## ';color:var(--blue)}
#lesson-panels.rv-tech .panel > h3{font-family:var(--font-mono);font-size:13.5px;font-weight:500}
#lesson-panels.rv-tech .panel > h3::before{content:'# ';color:var(--violet)}
#lesson-panels.rv-tech .task-card:not(.is-sectionhead){border-radius:8px;border:1px solid #D3D9E8;box-shadow:none;background:#fff;position:relative;overflow:hidden}
#lesson-panels.rv-tech .task-card:not(.is-sectionhead)::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--bc-primary)}
#lesson-panels.rv-tech .task-card--info:not(.is-sectionhead)::after{background:#8E7BE6}
#lesson-panels.rv-tech .task-card--assessment:not(.is-sectionhead)::after{background:#D9930B}
#lesson-panels.rv-tech .task-card--resource:not(.is-sectionhead)::after{background:#14A06F}
#lesson-panels.rv-tech .task-card:not(.is-sectionhead) .task-card-header{background:#F5F8FD!important;border-bottom:1px solid #E4E8F2}
#lesson-panels.rv-tech .task-card:not(.is-sectionhead) .task-card-header h2,#lesson-panels.rv-tech .task-card:not(.is-sectionhead) .task-card-header h3{font-family:var(--font-mono);font-size:14px;font-weight:500;letter-spacing:0}
#lesson-panels.rv-tech .task-card:not(.is-sectionhead) .task-card-header::before{border-radius:2px}
#lesson-panels.rv-tech .task-card--sm{border-radius:6px;margin-left:24px}
#lesson-panels.rv-tech .panel pre{border-radius:8px}
#lesson-panels.rv-tech .panel table{border-radius:6px}
#lesson-panels.rv-tech .panel th{font-family:var(--font-mono)}
#lesson-panels.rv-tech .panel blockquote{border-radius:6px}
#lesson-panels.rv-tech .task-card.is-sectionhead .task-card-header h2{font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:.01em}
#lesson-panels.rv-tech .task-card.is-sectionhead .task-card-header::before{border-radius:2px}

/* ============ LESSON FRAME — cohesive with the home editorial look ============ */
.lesson-header{
  background:var(--hero);
  border:none;
  border-radius:0 0 26px 26px;
  padding:40px 40px 32px;
}
.lesson-header .breadcrumb{color:#8b94b3;margin-bottom:16px}
.lesson-header .bc-link{color:var(--blue)}
.lesson-header .bc-link:hover{color:#aeb9ff}
.lesson-header .lesson-title{color:#fff;font-size:38px}
.badge-osp{background:rgba(124,141,240,.16);color:#aeb9ff}
.badge-type{background:rgba(255,255,255,.09);color:#c3cbe6}
.badge-assess{background:rgba(217,147,11,.2);color:#f0c071}

.lesson-tabs{
  background:transparent;
  border-bottom:1px solid var(--border-soft);
  padding:10px 40px 0;
  margin-top:4px;
}
.tab-btn{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--text-muted);border-bottom-width:2px;padding:12px 16px}
.tab-btn:hover{color:var(--text-dark)}
.tab-btn.active{color:var(--bc-primary);border-bottom-color:var(--bc-primary)}

.lesson-footer{border-top:1px solid var(--border-soft);padding:22px 40px}
.btn{border-radius:999px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.02em;padding:11px 20px;white-space:nowrap}
.btn-primary{background:var(--bc-primary);border-color:var(--bc-primary);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--bc-dark);border-color:var(--bc-dark);color:#fff}
.done-btn{border-radius:999px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.03em;white-space:nowrap}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:36px}
  .hero{padding:48px 24px 60px}
  .hero-title{font-size:46px}
}
@media (max-width:768px) {
  .topbar{padding:12px 16px}
  .container{padding:40px 16px}
  .hero{padding:40px 18px 52px}
  .hero-title{font-size:36px}
  .hero-subtitle{font-size:15px}
  .hero-stats{gap:24px}
  .osp-card-head{padding:18px 18px 18px 24px;gap:16px}
  .osp-title{font-size:22px}
  .acc-lesson{padding-left:18px;padding-right:18px}
  .lesson-header{padding:24px 16px}
  .lesson-title{font-size:28px}
  .lesson-panels{padding:24px 16px}
  .lesson-footer{padding:16px;flex-direction:column-reverse}
}

/* ============ ANIMATED CONCEPT FIGURES (.ai-demo wrapper) ============ */
.ai-demo{margin:28px 0;border-radius:16px;overflow:hidden;border:1px solid #232C44;
  background:radial-gradient(120% 120% at 70% 10%,#161C2E 0%,#0B0F1A 60%)}
.ai-demo__tag{display:block;padding:16px 20px 0;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#7E88A8}
.ai-demo__stage{position:relative;height:230px;overflow:hidden}
.ai-demo__viewport,.ai-demo__interaction{position:relative;max-inline-size:100%;overflow:hidden}
.ai-demo svg{display:block;max-inline-size:100%;block-size:auto}
.ai-demo__mobile-model{display:none}
.ai-demo__cap{padding:14px 20px;margin:0;font-family:var(--font-mono);font-size:13px;line-height:1.55;
  color:#8B94B3;border-top:1px solid #1C2438;background:#0B0F1A}
.ai-demo label:focus-visible,.ai-demo label.demo-focus{outline:3px solid #fff;outline-offset:3px}


/* ---- Demo-ohjaimet ---- */
.ai-demo__ctrl{display:flex;gap:10px;padding:10px 14px 12px;border-top:1px solid #1C2438;background:#0B0F1A}
.ad-btn{min-width:44px;min-height:44px;padding:8px 18px;font-family:var(--font-mono);font-size:12.5px;font-weight:600;
  color:#EAEEF8;background:#171F33;border:1px solid #2B3552;border-radius:9px;cursor:pointer;transition:border-color .15s}
.ad-btn:hover{border-color:#46C7CF}
.ad-btn:focus-visible{outline:2px solid #46C7CF;outline-offset:2px}
.ad-btn[disabled]{opacity:.55;cursor:default}
.ai-demo.ad-paused .ai-demo__stage *,.ai-demo.ad-paused .ai-demo__stage *::before,.ai-demo.ad-paused .ai-demo__stage *::after{animation-play-state:paused!important}
.ad-reset *,.ad-reset *::before,.ad-reset *::after{animation:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.ai-demo__ctrl{display:none}}
@media (max-width:680px){.ai-demo[data-demo-kind="static"] .ai-demo__ctrl{display:none}}

/* ============ SITE FOOTER ============ */
.site-footer{
  margin-top:56px;
  padding:26px 20px 34px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.05em;
  color:var(--text-muted);
  border-top:1px solid var(--border-light);
}
.site-footer a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--border-soft);
  transition:color .2s,border-color .2s;
}
.site-footer a:hover{
  color:var(--text-dark);
  border-color:currentColor;
}

/* ============ MOBILE ============ */
@media (max-width:680px){
  .ai-demo__stage{
    inline-size:100%;
    max-inline-size:100%;
    overflow:hidden;
  }
  .ai-demo__stage>*{max-inline-size:100%;margin-inline:auto;flex-shrink:1}
  .ai-demo__cap{font-size:13px}
  /* JS-skaalausfallback (fitAiDemos): reflowatut interaktiivit ohitetaan JS:ssä,
     staattisilla skaalaus kattaa 431–680 px -välin; ≤430 px reflow-kortti korvaa sen */
  .ai-demo__stage>.ai-demo__fit{max-inline-size:none;flex-shrink:0}
  .ai-demo.is-fitted .ai-demo__stage{overflow:hidden;justify-content:center!important}
  .panel table{display:block;max-width:100%;overflow-x:auto}
}
@media (max-width:680px){
  .ai-demo[data-demo-kind="static"] .ai-demo__stage{
    display:grid!important;height:auto!important;min-height:190px;padding:18px!important;
    align-items:stretch!important;justify-content:stretch!important;overflow:visible
  }
  .ai-demo[data-demo-kind="static"] .ai-demo__stage > :not(.ai-demo__mobile-model){display:none!important}
  .ai-demo[data-demo-kind="static"] .ai-demo__mobile-model{
    display:grid;inline-size:100%;max-inline-size:100%;min-block-size:154px;align-content:center;gap:9px;
    padding:16px;border:1px solid #34415f;border-radius:12px;background:#11182a;color:#eaeef8
  }
  .ai-demo__mobile-kicker{font:600 11px/1.3 var(--font-mono);letter-spacing:.09em;color:#7fd0a8}
  .ai-demo__mobile-steps{display:grid;gap:22px;margin:0!important;padding:0!important;list-style:none;counter-reset:demo-step}
  .panel .ai-demo__mobile-node{display:block;padding:10px 12px;border:1px solid #34415f;border-radius:9px;
    background:#172038;font:600 13px/1.45 var(--font-sans);color:#fff;position:relative;counter-increment:demo-step}
  .ai-demo__mobile-model--flow .ai-demo__mobile-node:not(:last-child)::after,
  .ai-demo__mobile-model--loop .ai-demo__mobile-node:not(:last-child)::after{content:'↓';position:absolute;left:50%;bottom:-22px;
    transform:translateX(-50%);color:#46c7cf;font-size:18px;line-height:22px}
  .ai-demo__mobile-model--loop .ai-demo__mobile-node:last-child::after{content:'↻ sykli palaa alkuun';display:block;margin-top:9px;
    color:#46c7cf;font-size:12px;font-family:var(--font-mono)}
  .ai-demo__mobile-model--compare .ai-demo__mobile-steps,.ai-demo__mobile-model--layers .ai-demo__mobile-steps,
  .ai-demo__mobile-model--axes .ai-demo__mobile-steps{gap:10px}
  .ai-demo__mobile-model--branch .ai-demo__mobile-steps{gap:12px}
  .ai-demo__mobile-model--branch .ai-demo__mobile-node:first-child{border-left:4px solid #f7c873}
  .ai-demo__mobile-model--branch .ai-demo__mobile-node:not(:first-child):not(:last-child){margin-left:22px;position:relative}
  .ai-demo__mobile-model--branch .ai-demo__mobile-node:not(:first-child):not(:last-child)::before{content:'└';position:absolute;left:-17px;top:9px;color:#f7c873;font-size:13px}
  .ai-demo__mobile-model--branch .ai-demo__mobile-node:last-child{border-top:1px dashed #34415f;padding-top:12px}
  .ai-demo__mobile-model--layers .ai-demo__mobile-node::before{content:'≡ ';color:#c9b7f1}
  .ai-demo__mobile-model--compare .ai-demo__mobile-node{border-left:4px solid #46c7cf}
  .ai-demo__mobile-model--layers .ai-demo__mobile-node{border-left:4px solid #c9b7f1}
  .ai-demo__mobile-model--branch .ai-demo__mobile-node{border-left:4px solid #f7c873}
  .ai-demo__mobile-model--axes .ai-demo__mobile-node{border-left:4px solid #7fd0a8}
}
@media (prefers-reduced-motion:reduce){
  .ai-demo *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media (max-width:360px){
  .view-switch{flex-wrap:wrap;row-gap:4px}
  .view-switch a{font-size:10.5px;padding:5px 10px}
  .view-switch .vs-lab{font-size:10px}
}
@media (max-width:480px){
  .topbar{padding:10px 14px;gap:10px}
  .topbar .progress-text{display:none}
  .topbar .progress-bar{width:56px}
  .breadcrumb{flex-wrap:wrap;white-space:normal;line-height:1.45}
}
@media (max-width:240px){
  .topbar{position:static;flex-wrap:wrap;justify-content:center;padding:10px 8px}
  .logo-group{max-width:100%;gap:7px}
  .logo-text .logo-main{font-size:17px;white-space:normal;overflow-wrap:anywhere}
  .topbar-right{width:100%;justify-content:center;margin-left:0}
  .topbar .progress-bar{width:100%;max-width:120px}
  .lesson-header{padding-left:10px!important;padding-right:10px!important}
  .lesson-panels{padding-left:10px!important;padding-right:10px!important}
  .view-switch{display:grid!important;grid-template-columns:1fr;width:100%;box-sizing:border-box;border-radius:14px!important}
  .view-switch .vs-lab,.view-switch a{text-align:center;white-space:normal;padding:7px 5px}
  .lesson-footer{padding:10px!important}
  .nav-buttons{width:100%;flex-direction:column}
  .nav-buttons .btn,.done-btn{box-sizing:border-box;width:100%;justify-content:center;white-space:normal;text-align:center}
  #consent-banner{left:6px;right:6px;bottom:6px;padding:10px}
  #consent-banner .consent-actions{width:100%;flex-direction:column}
  #consent-banner button{width:100%}
}


/* ============ RAKENNEUUDISTUS 2 — monisivuiset komponentit ============ */

/* Breadcrumb-linkit <a>-elementteinä (sama ilme kuin bc-link) */
.breadcrumb a.bc-link{text-decoration:none}
.breadcrumb a.bc-link:hover{text-decoration:underline}

/* Näkymävaihtaja headerissa */
.view-switch{display:inline-flex;align-items:center;gap:2px;margin-top:16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:4px}
.view-switch a{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.03em;
  color:#c3cbe6;text-decoration:none;padding:6px 14px;border-radius:999px;white-space:nowrap;transition:background .15s,color .15s}
.view-switch a:hover{color:#fff}
.view-switch a.on{background:var(--bc-primary);color:#fff}
.view-switch .vs-lab{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#7e88a8;padding:0 8px 0 10px}

/* Valintasivu — kolme ovea */
.valinta{max-width:1080px;margin:0 auto;padding:56px 40px 40px}
.valinta-lead{max-width:76ch;margin:0 0 40px}
.valinta-lead p{font-size:17px;color:var(--text-muted);line-height:1.7;margin-bottom:14px}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.door{display:flex;flex-direction:column;gap:10px;background:var(--bg-white);border:1px solid var(--border-soft);
  border-radius:var(--r);padding:28px 26px 26px;text-decoration:none;color:inherit;position:relative;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.door:hover{transform:translateY(-3px);box-shadow:0 18px 44px -26px rgba(20,30,60,.5);border-color:var(--bc-primary)}
.door--primary{border-color:var(--bc-primary);box-shadow:0 2px 10px rgba(20,30,60,.06)}
.door--remembered::after{content:'Viimeksi valittu';position:absolute;top:14px;right:16px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bc-primary)}
.door-ic{font-size:30px;line-height:1}
.door-title{font-family:var(--font-serif);font-size:23px;font-weight:600;color:var(--text-dark)}
.door-desc{font-size:14px;color:var(--text-muted);line-height:1.55}
.door-cta{margin-top:auto;font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--bc-primary);letter-spacing:.02em}
@media(max-width:820px){.doors{grid-template-columns:1fr}}

/* "Miten tämä kurssi on tehty" -tietolohko valintasivulla */
.made-note{margin:34px 0 4px;background:rgba(20,30,60,.03);border:none;
  border-radius:var(--r);padding:20px 26px}
.made-note-kn{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:8px}
/* Kaksi tekstipalstaa: laatikon koko leveys käyttöön ilman että rivistä tulee
   liian pitkä lukea (~58 merkkiä/palsta) — samalla lohkon korkeus puolittuu */
.made-note{column-count:2;column-gap:48px}
.made-note-kn{column-span:all}
.made-note p{font-size:14px;color:var(--text-muted);line-height:1.65;margin:0 0 10px;
  break-inside:avoid;-webkit-column-break-inside:avoid}
.made-note p:last-child{margin-bottom:0}

/* Lisenssifooteri (valintasivun alalaita) */
.license-footer{max-width:1080px;margin:0 auto;padding:8px 40px 48px}
.license-footer p{font-size:13px;color:var(--text-muted);line-height:1.65;max-width:100ch;margin:0}
.license-footer a{color:var(--text-muted);text-decoration:none;border-bottom:1px solid var(--border-soft);
  transition:color .2s,border-color .2s}
.license-footer a:hover{color:var(--text-dark);border-color:currentColor}
@media(max-width:820px){.license-footer{padding:8px 24px 40px}.valinta{padding:40px 24px 24px}}

/* Yleiskuva / moduulikortit (linkit, ei accordionia) */
.mod-grid{display:flex;flex-direction:column;gap:16px;margin:36px 0}
.mod-card{display:block;background:var(--bg-white);border:1px solid var(--border-soft);border-radius:var(--r);
  padding:26px 30px;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(20,30,60,.04);
  border-left:5px solid var(--osp-color,var(--bc-primary));transition:transform .2s,box-shadow .2s}
.mod-card:hover{transform:translateY(-2px);box-shadow:0 16px 40px -24px rgba(20,30,60,.45)}
.mod-kn{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:color-mix(in srgb,var(--osp-color,var(--bc-primary)) 65%,#111827);margin-bottom:6px}
.mod-title{font-family:var(--font-serif);font-size:26px;font-weight:500;color:var(--text-dark);margin-bottom:4px}
.mod-sub{font-size:14.5px;color:var(--text-muted);margin-bottom:16px}
.mod-foot{display:flex;align-items:center;gap:12px;margin-top:6px}
.mod-foot .prog-bar{flex:1}
.mod-count{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}

/* Tuntilista (moduulisivu, luokka-index) */
.lesson-list{background:var(--bg-white);border:1px solid var(--border-soft);border-radius:var(--r);
  overflow:hidden;box-shadow:0 1px 3px rgba(20,30,60,.04);margin:20px 0}
.ll-row{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--border-light);
  text-decoration:none;color:var(--text-dark);transition:background .12s}
.ll-row:last-child{border-bottom:none}
.ll-row:hover{background:color-mix(in srgb,var(--osp-color,var(--bc-primary)) 5%,transparent)}
.ll-num{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;
  background:color-mix(in srgb,var(--osp-color,var(--bc-primary)) 65%,#111827);color:#fff;border-radius:50%;font-family:var(--font-mono);font-size:11.5px;flex-shrink:0}
.ll-title{flex:1;font-weight:500;font-size:14.5px}
.ll-done{width:20px;height:20px;border:2px solid var(--border-soft);border-radius:3px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}
.ll-done.done{background:#059669;border-color:#059669}
.ll-done.done::after{content:'✓'}
.ll-group-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted);margin:36px 0 6px}

/* Lopputyö-CTA moduuli-/indeksisivuilla */
.final-cta{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#FFFBEB 0%,#FEF3C7 100%);
  border:1px solid #F2D98E;border-radius:var(--r);padding:20px 24px;text-decoration:none;color:#5A4A1E;margin:8px 0 20px}
.final-cta .fc-star{font-size:22px}
.final-cta .fc-txt{flex:1}
.final-cta .fc-txt b{display:block;font-size:15.5px;color:#7A4E12}
.final-cta .fc-txt span{font-size:13.5px;color:#8a6a2e}

/* Sisältösivut (valinta/overview/moduuli/sanasto/opettaja) — kehys */
.page-hero{background:var(--hero);color:#fff;padding:48px 40px 40px;border-radius:0 0 26px 26px}
.page-hero-inner{max-width:1080px;margin:0 auto}
.page-hero .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.page-hero h1{font-family:var(--font-serif);font-size:44px;font-weight:500;line-height:1.06;letter-spacing:-0.02em;margin-bottom:14px}
.page-hero p{font-size:16.5px;color:#9aa3bd;max-width:76ch;line-height:1.6}
/* Etusivun hero: kaksi kappaletta rinnakkain työpöydällä — rivinpituus pysyy
   luettavana (~55 merkkiä), mutta 1080 px:n leveys hyödynnetään ja korkeus puolittuu */
.page-hero--intro .page-hero-inner{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;row-gap:2px}
.page-hero--intro .eyebrow,.page-hero--intro h1{grid-column:1/-1}
.page-hero--intro p{max-width:none}
.page-body{max-width:1080px;margin:0 auto;padding:44px 40px 72px}
.page-body .reading{max-width:760px}
.info-note{background:#EEF1FA;border:1px dashed #B9C2DD;border-radius:var(--r);padding:20px 24px;
  color:var(--text-muted);font-size:14.5px;line-height:1.6;margin:24px 0}
.info-note b{color:var(--text-dark)}

/* Sanastosivu */
.sanasto-term{border-top:1px solid var(--border-soft);padding:18px 0 8px}
.sanasto-term h2{font-family:var(--font-serif);font-size:21px;font-weight:600;color:var(--text-dark);margin:0 0 6px}
.sanasto-term .st-src{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-muted);
  text-decoration:none;border-bottom:1px solid var(--border-soft)}
.sanasto-term .st-src:hover{color:var(--bc-dark)}
.sanasto-term p{color:var(--reader-body);line-height:1.75;margin:6px 0 0}

/* Opettaja: jaa opiskelijoille */
.share-box{background:var(--bg-white);border:1px solid var(--border-soft);border-radius:var(--r);
  padding:18px 22px;margin:8px 0 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.share-box .sb-txt{flex:1;min-width:200px}
.share-box .sb-txt b{display:block;font-size:14.5px;color:var(--text-dark)}
.share-box .sb-txt span{font-size:13px;color:var(--text-muted)}
.share-box a,.share-box button{font-family:var(--font-mono);font-size:12px;font-weight:500;border-radius:999px;
  padding:9px 16px;cursor:pointer;text-decoration:none;border:1px solid var(--bc-primary);background:#fff;color:var(--bc-primary)}
.share-box .sb-go{background:var(--bc-primary);color:#fff}

/* Kapealla näytöllä palstoitus puretaan — yksi palsta on ainoa luettava vaihtoehto */
@media(max-width:880px){
  .page-hero--intro .page-hero-inner{display:block}
  .made-note{column-count:1}
}

@media(max-width:768px){
  .valinta,.page-body{padding-left:16px;padding-right:16px}
  .page-hero{padding:36px 18px 32px}
  .page-hero h1{font-size:32px}
  .mod-card{padding:20px 20px}
}

/* Opettajan tuntisivun jakostrippi (header ja tabit väliin) */
.lesson-strip{background:var(--bg-white);border-bottom:1px solid var(--border-soft);padding:16px 40px}
.lesson-strip .share-box{margin:0}
@media(max-width:768px){.lesson-strip{padding:14px 16px}}

/* ============ AI-STARTTI — erillinen kahden tunnin sisääntulo ============ */
.startti-topbar-label{margin-left:auto;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.startti-home-card{display:grid;grid-template-columns:1fr auto;gap:6px 28px;align-items:center;
  margin:0 0 46px;padding:22px 26px;border-radius:14px;text-decoration:none;color:var(--text-dark);
  background:#FFFFFF;border:1px solid var(--border-soft);border-left:4px solid #26828B;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.startti-home-card:hover{transform:translateY(-2px);border-color:#2F7B82;border-left-color:#26828B;
  box-shadow:0 14px 34px -26px rgba(11,66,73,.55)}
.startti-home-card__eyebrow{grid-column:1/-1;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:#1D7680}
.startti-home-card__title{font-family:var(--font-serif);font-size:25px;font-weight:600;line-height:1.1}
.startti-home-card__desc{grid-column:1;max-width:70ch;font-size:14px;line-height:1.55;color:var(--text-muted)}
.startti-home-card__cta{grid-column:2;grid-row:2/4;align-self:center;padding:10px 16px;border-radius:999px;
  background:#F2FAFA;border:1px solid #9CCBCE;color:#14515A;font-family:var(--font-mono);font-size:11.5px;
  font-weight:500;white-space:nowrap;transition:background-color .15s,border-color .15s}
.startti-home-card:hover .startti-home-card__cta{background:#1D7680;border-color:#1D7680;color:#fff}
.course-path-label{margin:0 0 12px}.course-path-label span{font-family:var(--font-mono);font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted)}
.course-path-label h2{font-family:var(--font-serif);font-size:33px;font-weight:600;color:var(--text-dark);margin:4px 0}

.startti-hero{background:linear-gradient(135deg,#0D172A 0%,#112B3B 58%,#153F45 100%)}
.startti-hero .page-hero-inner{position:relative}
.startti-hero h1{max-width:820px;font-size:50px}
.startti-hero p{max-width:70ch;color:#C0CBDF}
.startti-switch{margin-top:24px}
.startti-shell{max-width:1080px;margin:0 auto;padding:40px 40px 80px}
.startti-timeline{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 22px}
.startti-timeline a{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;
  min-height:58px;padding:12px 18px;background:#fff;border:1px solid var(--border-soft);border-radius:12px;
  text-decoration:none;color:var(--text-dark);font-size:14.5px;font-weight:650;transition:border-color .15s,transform .15s}
.startti-timeline a:hover{border-color:#238993;transform:translateY(-1px)}
.startti-timeline a>span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:#DFF4F4;color:#12616B;font-family:var(--font-mono);font-size:11px;font-weight:500}
.startti-timeline small{font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--text-muted)}
.startti-mode-note{margin:0 0 42px;padding:17px 20px;background:#F3F7FA;border-left:4px solid #238993;
  color:var(--text-muted);font-size:14.5px;line-height:1.6}
.startti-part{scroll-margin-top:84px;margin:0 0 58px;background:#fff;border:1px solid var(--border-soft);
  border-radius:18px;overflow:hidden;box-shadow:0 10px 38px -34px rgba(20,30,60,.55)}
.startti-part-header{padding:28px 42px 24px;background:linear-gradient(110deg,#13213A,#173D49);color:#fff}
.startti-part-index{margin-bottom:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#82D7DB}
.startti-part-header h2{margin:0;font-family:var(--font-serif);font-size:35px;font-weight:550;line-height:1.15}
.startti-block{max-width:850px;margin:0 auto;padding:38px 42px}
.startti-block+.startti-block{border-top:1px solid var(--border-soft)}
.startti-block.reading{max-width:850px}
/* Lukutypografia: sama kuin kurssin .panel-sisällössä (ks. rivi ~1382) */
.startti-block h2{font-family:var(--font-serif);font-size:23px;font-weight:600;letter-spacing:-0.01em;
  color:var(--text-dark);margin:36px 0 12px}
.startti-block h2:first-child,.startti-block-kicker+h2{margin-top:0}
.startti-block h3{font-family:var(--font-sans);font-size:15px;font-weight:700;letter-spacing:0.005em;
  color:var(--text-dark);margin:26px 0 8px}
.startti-block p{margin:0 0 14px;color:var(--reader-body);font-size:15.5px;line-height:1.8}
.startti-block li{color:var(--reader-body);font-size:15.5px;line-height:1.8;margin-bottom:8px}
.startti-block ul,.startti-block ol{margin:12px 0 16px 22px}
.startti-block strong{color:var(--text-dark);font-weight:600}
.startti-block a{color:var(--bc-dark);text-decoration-thickness:1px;text-underline-offset:2px}
.startti-block blockquote{border-left:3px solid var(--border-soft);background:#F6F8FC;color:var(--reader-body);
  border-radius:0 10px 10px 0;padding:14px 18px;margin:16px 0}
.startti-block blockquote p:last-child{margin-bottom:0}
.startti-block-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#14727C;margin-bottom:20px}
.startti-extra-note{max-width:780px;margin:-8px auto 20px;padding:12px 15px;border-radius:10px;
  background:#EAF4F4;color:#4E666A;font-size:13.5px;line-height:1.5}
.startti-block--class{max-width:none;background:#F6F8FC}
.startti-block--practice{max-width:none;background:#F8FBFB}
.startti-block--class>.task-card,.startti-block--practice>.task-widget,.startti-block--practice>h2,
.startti-block--practice>p{max-width:780px;margin-left:auto;margin-right:auto}
.startti-block--practice .task-widget{background:#fff}
.startti-next{display:block;padding:20px 42px;background:#EAF6F6;border-top:1px solid #CFE7E8;
  text-align:right;text-decoration:none;color:#135C65;font-family:var(--font-mono);font-size:12px;font-weight:500}
.startti-next:hover{background:#DFF1F2}
.startti-slides{padding-bottom:28px}.startti-slides>.deck-wrap{margin:28px 34px 0}
.startti-share{margin:0 0 28px}

.startti-concept-map{margin:30px 0;padding:24px;background:#F6F8FC;border:1px solid #D9DFEC;border-radius:16px}
.startti-figure-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#5E6982;margin-bottom:18px}
.concept-field{display:flex;flex-direction:column;align-items:center;gap:10px}
.concept-role-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.concept-node{display:flex;flex-direction:column;gap:3px;justify-content:center;min-height:76px;padding:12px 16px;
  text-align:center;background:#fff;border:1px solid #C8D0E1;border-radius:12px;color:#273149}
.concept-node small{font-family:var(--font-mono);font-size:9.5px;line-height:1.35;letter-spacing:.08em;
  text-transform:uppercase;color:#65718A}
.concept-node strong{font-size:16px}.concept-node span{font-size:12.5px;line-height:1.35;color:#68738B}
.concept-node--wide{width:min(360px,100%);background:#17223C;border-color:#17223C;color:#fff}
.concept-node--wide span{color:#C8D0E3}.concept-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.concept-interface-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:68%}
.concept-node--interface{border-color:#A997E5;background:#F5F2FD}.concept-node--system{border-color:#62BDC5;background:#EBF8F8}
.concept-branches{height:14px;width:68%;border-top:2px solid #BAC4D8;position:relative}
.concept-branches::before{content:'';position:absolute;top:-16px;left:50%;height:16px;border-left:2px solid #BAC4D8}
.concept-branches span{position:absolute;top:0;height:14px;border-left:2px solid #BAC4D8}.concept-branches span:first-child{left:0}
.concept-branches span:nth-child(2){left:50%}.concept-branches span:last-child{right:0}
.startti-concept-map figcaption{margin-top:16px;color:#5C677F;font-size:13px;line-height:1.5}
.startti-tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px 0}
.startti-tool-grid>div{display:flex;flex-direction:column;gap:4px;padding:17px 18px;border:1px solid #D7DEEB;
  border-radius:12px;background:#fff}.startti-tool-grid strong{font-size:15px;color:#273149}
.startti-tool-grid span{font-size:13px;line-height:1.45;color:#657087}
.startti-tool-grid .startti-tool-card--optional{border-style:dashed;border-color:#6DB8BE;background:#F0FAFA}
.startti-tool-card--optional small{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#24727A}
.startti-example{margin:20px 0;padding:0;border:1px solid #CCD5E5;border-radius:12px;background:#FAFBFD;overflow:hidden}
.startti-example summary{padding:14px 18px;cursor:pointer;color:#1E626A;font-weight:650}
.startti-example[open] summary{border-bottom:1px solid #DDE3EE}.startti-example-body{padding:16px 18px}
.startti-example-body>:first-child{margin-top:0}.startti-example-body>:last-child{margin-bottom:0}
.startti-chat-guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0 18px}
.startti-chat-card{display:flex;flex-direction:column;padding:20px;border:1px solid #D2DAE8;border-top:4px solid #26828B;
  border-radius:14px;background:#fff;box-shadow:0 10px 28px -26px rgba(23,44,73,.7)}
.startti-chat-card__header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.startti-chat-card__header span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#26717A}
.startti-chat-card__header h3{margin:0;font-family:var(--font-serif);font-size:25px;font-weight:600;color:#17243C}
.startti-chat-card figure{margin:0 0 8px}.startti-chat-card img{display:block;width:100%;height:auto;border:1px solid #CCD5E5;
  border-radius:9px;background:#F5F7FA}.startti-chat-card figcaption{margin-top:8px;color:#657087;font-size:12px;line-height:1.45}
.startti-chat-card__zoom{align-self:flex-start;margin-bottom:10px;font-family:var(--font-mono);font-size:11px;color:#176974}
.startti-chat-card ol{margin:8px 0 14px;padding-left:24px}.startti-chat-card li{margin-bottom:8px;font-size:14px;line-height:1.5}
.startti-chat-card__note{margin:auto 0 0;padding:12px 13px;border-radius:9px;background:#F1F5F8;color:#526174;font-size:12.5px;line-height:1.5}
.startti-chat-safety{margin:18px 0;padding:16px 18px;border-left:4px solid #D5962D;border-radius:9px;background:#FFF7E7;
  color:#664C20;font-size:14px;line-height:1.55}.startti-chat-safety strong{color:#584015}
.startti-chat-sources{margin:14px 0 24px;color:#5D687B;font-size:12.5px;line-height:1.55}
.startti-chat-sources small{display:inline;font:inherit;color:inherit}
.startti-page code{font-family:var(--font-mono);font-size:.9em;background:#EEF1FA;color:#3A3FA6;
  border:1px solid #E2E6F3;border-radius:5px;padding:1px 5px}
/* Taulukot startti-sivujen korteissa ja lohkoissa: sama tyyli kuin kurssin .panel-taulukoissa */
.startti-page .task-card-body table,.startti-block table{width:100%;border-collapse:collapse;margin:14px 0 16px;
  font-size:14px;border:1px solid var(--border-soft);border-radius:10px;overflow:hidden}
.startti-page .task-card-body th,.startti-block th{background:#EBEEF7;color:var(--text-dark);
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--border-soft)}
.startti-page .task-card-body td,.startti-block td{padding:9px 12px;border-bottom:1px solid var(--border-soft);
  color:var(--reader-body);font-size:14px;line-height:1.55;vertical-align:top}
.startti-page .task-card-body tr:last-child td,.startti-block tr:last-child td{border-bottom:none}
.startti-page .task-card-body td:first-child,.startti-page .task-card-body th:first-child{white-space:nowrap}

/* --- AI-startin täydentävät tehtävät: vaiheet, kuvakorostukset ja kopioitavat pyynnöt --- */
.startti-task{margin:26px 0;border:1px solid #D2DAE8;border-top:4px solid #26828B;border-radius:14px;
  background:#fff;overflow:hidden}
.startti-task__header{padding:20px 24px 4px}
.startti-task__header span{display:block;margin-bottom:6px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:#26717A}
.startti-task__header h3{margin:0;font-family:var(--font-serif);font-size:24px;font-weight:600;color:#17243C}
.startti-task__intro{padding:8px 24px 0;color:#4E5A70;font-size:14.5px;line-height:1.55}
.startti-task__step{padding:18px 24px}
.startti-task__step+.startti-task__step{border-top:1px solid #E7EBF3}
.startti-task__stepnum{margin-bottom:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#1D7680}
.startti-task__step>p{margin:0 0 12px;font-size:14.5px;line-height:1.6}
.startti-task__step>p:last-child{margin-bottom:0}
.startti-copyblock{margin:0 0 10px;padding:14px 16px;border:1px solid #CFDAE8;border-left:4px solid #26828B;
  border-radius:10px;background:#F5F9FA;color:#2B3A50;font-size:14px;line-height:1.6}
.startti-copy{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin:0 0 6px;padding:9px 16px;
  border:none;border-radius:9px;background:#1D7680;color:#fff;font-family:var(--font-sans);font-size:14px;
  font-weight:600;cursor:pointer;transition:background-color .15s}
.startti-copy:hover{background:#145761}
.startti-copy:focus-visible{outline:3px solid #F0B84B;outline-offset:2px}
.startti-copy.is-copied{background:#177B54}
.startti-shot{margin:14px 0 0}
.startti-shot__frame{position:relative;overflow:hidden;border:1px solid #CCD5E5;border-radius:9px;background:#F5F7FA}
.startti-shot__frame img{display:block;width:100%;height:auto}
.startti-shot__hl{position:absolute;border:3px solid #1D7F89;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(29,127,137,.5)}
.startti-shot__hl--alt{border-color:#C4861F;box-shadow:0 0 0 0 rgba(196,134,31,.5)}
.startti-shot__hl i{position:absolute;top:-13px;left:-13px;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:#1D7F89;color:#fff;font-family:var(--font-mono);
  font-style:normal;font-size:12px;font-weight:500;box-shadow:0 2px 6px rgba(15,30,40,.35)}
.startti-shot__hl--alt i{background:#C4861F}
@media (prefers-reduced-motion: no-preference){
  .startti-shot__hl{animation:starttiHlPulse 2.6s ease-out infinite}
  .startti-shot__hl--alt{animation-name:starttiHlPulseAlt;animation-delay:.65s}
}
@keyframes starttiHlPulse{0%{box-shadow:0 0 0 0 rgba(29,127,137,.5)}
  60%{box-shadow:0 0 0 11px rgba(29,127,137,0)}100%{box-shadow:0 0 0 0 rgba(29,127,137,0)}}
@keyframes starttiHlPulseAlt{0%{box-shadow:0 0 0 0 rgba(196,134,31,.5)}
  60%{box-shadow:0 0 0 11px rgba(196,134,31,0)}100%{box-shadow:0 0 0 0 rgba(196,134,31,0)}}
.startti-shot figcaption{margin-top:8px;color:#657087;font-size:12px;line-height:1.45}
.startti-task__note{margin:14px 24px 20px;padding:12px 14px;border-radius:9px;background:#F1F5F8;
  color:#526174;font-size:12.5px;line-height:1.5}
.startti-prompt-formula{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:stretch;margin:26px 0}
.startti-prompt-formula>span{display:flex;align-items:center;gap:10px;padding:16px;border-radius:12px;background:#EEF1FD;
  color:#27345B;font-weight:650;line-height:1.3}.startti-prompt-formula>span[aria-hidden]{padding:0;background:none;color:#6878C7;font-size:24px}
.startti-prompt-formula strong{display:flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;
  background:#5B68C6;color:#fff;font-family:var(--font-mono);font-size:11px;font-weight:500;flex:0 0 auto}
.startti-three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0}
.startti-three>div{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid #C8DCCF;border-top:4px solid #248C68;
  border-radius:12px;background:#F5FBF8}.startti-three strong{color:#1F5B45;line-height:1.35}
.startti-three span{font-size:13.5px;line-height:1.5;color:#557065}
.startti-course-bridge{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:30px 0;padding:22px 24px;
  background:#10192D;color:#fff;border-radius:14px}.startti-course-bridge strong{font-family:var(--font-serif);font-size:22px;font-weight:600}
.startti-course-bridge span{flex:1;min-width:230px;color:#ACB7CF;font-size:13.5px}.startti-course-bridge .btn{background:#fff;border-color:#fff;color:#173D49}
.startti-inline-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:0 0 34px;
  padding:22px 24px;background:#EEF8F8;border:1px solid #C4E5E7;border-radius:14px}
.startti-inline-cta>div{display:flex;flex-direction:column;gap:3px;flex:1;min-width:260px}.startti-inline-cta__eyebrow{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#19727A}
.startti-inline-cta strong{font-family:var(--font-serif);font-size:21px;color:#173D49}.startti-inline-cta>div>span:last-child{font-size:13.5px;color:#5E6B7D}
.startti-inline-cta .btn{background:#165C65;border-color:#165C65}

.startti-need-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.startti-need-grid details{border:1px solid #D2DAE8;border-radius:12px;background:#fff;overflow:hidden}
.startti-need-grid summary{min-height:78px;padding:16px;cursor:pointer;font-weight:650;line-height:1.4;color:#28334A}
.startti-need-grid p{margin:0;padding:0 16px 16px;font-size:13.5px;line-height:1.5;color:#5E6B7D}
.startti-more{margin:28px 0;padding:0;border:1px solid #D3DBE9;border-radius:12px;background:#F7F8FC;overflow:hidden}
.startti-more summary{padding:15px 18px;cursor:pointer;font-weight:650;color:#245F68}
.startti-more>p,.startti-more>ul{margin:0;padding:0 18px 16px}.startti-more>ul{padding-left:38px}

.startti-viz{margin:26px 0;padding:22px;border:1px solid #C9D5E5;border-radius:16px;background:#F7FAFC}
.startti-viz__title{margin-bottom:16px;font-family:var(--font-serif);font-size:23px;font-weight:600;color:#17243C}
.startti-viz__actions{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0}
.startti-viz__button{min-height:42px;padding:9px 14px;border:1px solid #176974;border-radius:9px;background:#fff;color:#145761;
  font:500 12px var(--font-mono);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.startti-viz__button:hover,.startti-viz__button.is-active{background:#165F69;color:#fff;border-color:#165F69}
.startti-viz__button:focus-visible{outline:3px solid #F0B84B;outline-offset:2px}
.startti-viz__button:disabled{cursor:default;opacity:.65;background:#E5EAED;color:#56636D;border-color:#C6D0D5}
.startti-viz__button--quiet{border-color:#BAC6D6;color:#566277}
.startti-viz__status{margin:14px 0 0;padding:11px 13px;border-radius:9px;background:#E9F1F5;color:#435567;font-size:13.5px;line-height:1.5}
.startti-viz__status.is-ok{background:#E6F5EE;color:#1E654B}.startti-viz__status.is-alert{background:#FFF1E4;color:#7B4A14}
.startti-step-chain{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:0;padding:0;list-style:none}
.startti-step-chain li{position:relative;display:flex;flex-direction:column;gap:6px;min-height:112px;padding:15px;border:2px solid #D7DFEA;
  border-radius:12px;background:#fff;color:#617086;opacity:.72}
.startti-step-chain li::after{content:'→';position:absolute;right:-15px;top:42%;z-index:2;color:#6B7A90;font-weight:700}
.startti-step-chain li:last-child::after{display:none}.startti-step-chain strong{font-size:14px;color:#2B354B;line-height:1.35}
.startti-step-chain span{font-size:12.5px;line-height:1.4}.startti-step-chain li.is-current{border-color:#16818B;background:#EAF7F7;color:#395D62;opacity:1}
.startti-step-chain li.is-done{border-color:#8EC6AF;background:#F2FAF6;opacity:1}
.startti-check{display:flex;align-items:flex-start;gap:10px;margin:9px 0;padding:11px 13px;border:1px solid #D7DFEA;border-radius:10px;background:#fff;line-height:1.45}
.startti-check input{width:19px;height:19px;margin-top:1px;accent-color:#16747D;flex:0 0 auto}
.startti-compare-panel{padding:18px;border-left:4px solid #6678C8;border-radius:8px;background:#fff;color:#3C4860}
.startti-compare-panel strong{color:#26345D}.startti-compare-panel p{margin-bottom:0}
.startti-compare-panel mark{padding:1px 3px;background:#FFF0A6;color:inherit}
.startti-compare-panel--alert{border-left-color:#B86255;background:#FFF7F5}.startti-compare-panel--alert strong{color:#863C33}
.startti-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}
.startti-choice-grid>section{padding:20px;border:1px solid #D3DBE9;border-radius:14px;background:#fff}
.startti-choice-grid h3{margin-top:0;color:#1E5861}.startti-choice-grid>:first-child{border-top:4px solid #4386B5}
.startti-choice-grid>:last-child{border-top:4px solid #8B70BE}.startti-choice-grid blockquote{font-size:13.5px}
.startti-evidence-source{padding:15px;border:1px solid #AFC8D5;border-radius:10px;background:#fff;color:#3D5060;line-height:1.55}
.startti-evidence-result{display:flex;flex-direction:column;gap:5px;padding:15px;border-left:4px solid #20806A;border-radius:8px;background:#EDF8F4}
.startti-evidence-result strong{color:#1F654F}.startti-evidence-result span{font-size:13.5px;color:#49685F}
.startti-use-loop{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:25px 0;padding:0;list-style:none}
.startti-use-loop li{display:flex;flex-direction:column;gap:6px;padding:15px 13px;border-top:4px solid #20808A;border-radius:10px;background:#EFF7F8}
.startti-use-loop strong{font-size:13px;color:#1D5D65}.startti-use-loop span{font-size:12.5px;line-height:1.4;color:#526D71}

@media(max-width:820px){
  .startti-home-card{grid-template-columns:1fr}.startti-home-card__cta{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}
  .startti-timeline{grid-template-columns:1fr}.startti-prompt-formula{grid-template-columns:1fr}
  .startti-prompt-formula>span[aria-hidden]{justify-content:center;padding:0;line-height:1}
  .startti-three,.startti-tool-grid,.startti-need-grid,.startti-choice-grid,.startti-chat-guide{grid-template-columns:1fr}
  .startti-step-chain{grid-template-columns:1fr}.startti-step-chain li{min-height:auto}
  .startti-step-chain li::after{content:'↓';right:auto;left:50%;top:auto;bottom:-17px}
  .startti-use-loop{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .startti-shell{padding:28px 14px 54px}.startti-hero h1{font-size:34px}.startti-hero .view-switch{align-items:stretch;flex-wrap:wrap;border-radius:12px}
  .startti-hero .view-switch .vs-lab{width:100%;padding:4px 8px}.startti-hero .view-switch a{flex:1;text-align:center;padding:8px 10px}
  .startti-part{border-radius:14px}.startti-part-header{padding:24px 20px 20px}.startti-part-header h2{font-size:29px}
  .startti-block{padding:28px 20px}.startti-next{padding:18px 20px}.startti-slides>.deck-wrap{margin:20px 12px 0}
  .concept-role-grid,.concept-row,.concept-interface-row{grid-template-columns:1fr;width:100%}.concept-branches{display:none}
  .startti-home-card{padding:20px 18px}.startti-home-card__title{font-size:22px}.startti-topbar-label{font-size:9.5px}
  .startti-use-loop{grid-template-columns:1fr}.startti-viz{padding:17px}
}

@media(prefers-reduced-motion:reduce){
  .startti-viz__button,.startti-step-chain li{transition:none}
}

/* ---- Harjoittele-ohjaus: silta teorian lopussa, footer-chip, tab-laskuri
   ja valmistumiskortti. Pehmeä ohjaus — nappeja ei disabloida, vain
   visuaalinen hierarkia elää bcai-practice-tilan mukaan (practice.js). ---- */
.practice-bridge{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:#EEF1FA;border:1px solid #D7DEF2;border-radius:var(--r);padding:18px 22px;margin:36px 0 4px}
.practice-bridge .pb-txt b{display:block;font-size:15px;color:var(--text-dark);margin-bottom:2px}
.practice-bridge .pb-txt span{font-size:13.5px;color:var(--text-muted)}
.practice-bridge.all-done{background:#E9F7F0;border-color:#C4E6D4}
.practice-bridge.all-done .pb-txt span{color:#175C44}
/* Pikkupainikkeiden 12px teksti vaatii 4.5:1 — bc-primary jaa 4.4:iin,
   siksi uudet elementit kayttavat bc-darkia (~6.6:1) */
.practice-bridge .btn-primary,.pc-actions .btn-primary{background:var(--bc-dark);border-color:var(--bc-dark)}
.practice-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--bc-primary);
  background:var(--bg-white);color:var(--bc-dark);border-radius:999px;padding:10px 18px;cursor:pointer;
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.practice-chip:hover{background:var(--bc-dark);border-color:var(--bc-dark);color:#fff}
.practice-chip[hidden]{display:none}
/* Kun tehtäviä on tekemättä, Seuraava putoaa toissijaiseksi (ääriviivatyyli) —
   linkki toimii silti normaalisti, mitään ei estetä */
/* transition:none — luokka lisataan JS:lla latauksen jalkeen, ja ilman tata
   axe mittaisi varit kesken .btn:n transition:all -siirtyman */
.lesson-footer.guide-practice .nav-buttons .btn-primary{transition:none;background:transparent;color:var(--bc-dark)}
.lesson-footer.guide-practice .nav-buttons .btn-primary:hover:not(:disabled){background:var(--bc-primary);color:#fff}
.practice-complete{background:#E9F7F0;border:1px solid #C4E6D4;border-radius:var(--r);padding:20px 24px;margin:28px 0 4px}
.practice-complete>b{display:block;font-size:16px;color:#175C44;margin-bottom:4px}
.practice-complete>span{display:block;font-size:14px;line-height:1.6;color:#2C6E52}
.pc-actions{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
/* .panel a -värisääntö yliajaisi btn-primaryn — palautetaan painikeväri */
.panel .pc-actions a.btn-primary{color:#fff;text-decoration:none}
.tab-count{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted)}
.tab-btn.active .tab-count{color:inherit}
@media(max-width:640px){
  .practice-bridge{flex-direction:column;align-items:stretch}
  .practice-bridge .btn{text-align:center}
  .practice-chip{width:100%;justify-content:center;box-sizing:border-box}
  .pc-actions{flex-direction:column;align-items:stretch}
  .pc-actions .btn,.pc-actions .done-btn{width:100%;box-sizing:border-box;text-align:center}
}