:root{
  --bg:#12110f;
  --bg-soft:#171816;
  --surface:#1e211f;
  --surface-2:#272c29;
  --surface-3:#303733;
  --text:#f4f4ef;
  --muted:#b8beb7;
  --muted-2:#899189;
  --line:#3a423e;
  --teal:#32c6a6;
  --teal-dark:#123d35;
  --amber:#f2b84b;
  --amber-dark:#4a3512;
  --rose:#ef6b73;
  --blue:#7aa7ff;
  --green:#78d17d;
  --shadow:0 18px 48px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    linear-gradient(180deg,#12110f 0%,#171816 42%,#111210 100%);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
p{margin:8px 0;color:#d8ddd5}
h1,h2,h3,h4{margin:0;color:var(--text);letter-spacing:0}
h1{font-size:clamp(2.15rem,4.2vw,4rem);line-height:1}
h2{font-size:clamp(1.55rem,2.5vw,2.35rem);line-height:1.12}
h3{font-size:1.16rem;line-height:1.25}
h4{font-size:1rem;line-height:1.25}
button,input,select{font:inherit}
.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;
}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px clamp(18px,4vw,48px);
  background:rgba(18,17,15,.88);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:850;
  font-size:1.04rem;
}
.brand::before{
  content:"";
  width:13px;
  height:13px;
  border-radius:4px;
  background:linear-gradient(135deg,var(--teal),var(--amber));
  box-shadow:0 0 0 4px rgba(50,198,166,.13);
}
.main-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.main-nav a,.button,.tab-list button,.rail-toggle,.question-option,.flashcard{
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.045);
  color:var(--text);
  border-radius:8px;
  cursor:pointer;
}
.main-nav a{
  padding:8px 12px;
  font-weight:760;
  font-size:.9rem;
  line-height:1;
}
.main-nav a:hover,.main-nav a.active{
  background:var(--teal);
  border-color:var(--teal);
  color:#07110f;
}
main{
  width:min(1180px,calc(100% - 36px));
  margin:0 auto;
}
.study-hero{
  min-height:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,.78fr);
  gap:34px;
  align-items:center;
  padding:42px 0 24px;
}
.hero-copy h1{font-size:clamp(2.2rem,4vw,4.25rem)}
.hero-copy p{
  max-width:760px;
  color:#d5dbd2;
  font-size:1.08rem;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.button{
  display:inline-flex;
  min-height:40px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 13px;
  font-weight:800;
  font-size:.9rem;
}
.button.primary{
  background:var(--teal);
  border-color:var(--teal);
  color:#07110f;
}
.button.quiet{background:rgba(255,255,255,.035)}
.button:hover{border-color:var(--amber)}
.dashboard-panel{
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),var(--surface);
  border-radius:8px;
  padding:18px;
  box-shadow:var(--shadow);
}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat{
  min-height:94px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  padding:14px;
  background:var(--surface-2);
}
.stat strong{display:block;font-size:2rem;line-height:1}
.stat span{display:block;margin-top:8px;color:var(--muted);font-size:.86rem}
.process-strip{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin-top:18px;
}
.process-strip::before{
  content:"";
  position:absolute;
  left:6%;
  right:6%;
  top:19px;
  height:2px;
  background:linear-gradient(90deg,var(--teal),var(--amber),var(--rose));
  opacity:.68;
}
.process-strip span{
  position:relative;
  display:grid;
  min-height:76px;
  place-items:end center;
  text-align:center;
  color:#e7ece6;
  font-size:.78rem;
  font-weight:760;
}
.process-strip span::before{
  content:"";
  position:absolute;
  top:8px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--bg);
  border:3px solid var(--teal);
}
.process-strip span:nth-child(3)::before{border-color:var(--amber)}
.process-strip span:nth-child(4)::before,.process-strip span:nth-child(5)::before{border-color:var(--rose)}
.section-shell{padding:22px 0 46px}
.section-shell.no-x-padding{padding-left:0;padding-right:0}
.section-shell.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:22px;
}
.section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
.section-heading p{max-width:620px;color:var(--muted)}
.compact-heading{display:block}
.lesson-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.lesson-card,.content-card,.activity-card,.question-card,.comparison-card,.issue-card{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.014)),var(--surface);
  border-radius:8px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.lesson-card{
  min-height:226px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
}
.lesson-card:hover{border-color:rgba(50,198,166,.62);transform:translateY(-1px)}
.lesson-card small,.source,.source-tag,.meta-line{
  color:var(--muted);
  font-size:.81rem;
}
.lesson-card h3{min-height:58px}
.lesson-card p{font-size:.92rem;color:#d6ddd4}
.source-tag{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:7px;
  padding:3px 8px;
  line-height:1.2;
  font-weight:820;
}
.source-tag.base{
  color:#dff9f2;
  background:rgba(50,198,166,.14);
  border-color:rgba(50,198,166,.32);
}
.source-tag.extra{
  color:#ffe7af;
  background:rgba(242,184,75,.14);
  border-color:rgba(242,184,75,.35);
}
.source-tag.risk{
  color:#ffd6da;
  background:rgba(239,107,115,.13);
  border-color:rgba(239,107,115,.34);
}
.tag-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.issue-list,.comparison-mini{display:grid;gap:10px}
.issue-card{padding:14px}
.issue-card h3{font-size:1rem}
.issue-card p{color:var(--muted);font-size:.92rem}
.comparison-mini .comparison-card{padding:14px}
.comparison-card strong{display:block;color:var(--teal);margin-bottom:4px}
.app-layout{
  display:grid;
  grid-template-columns:306px minmax(0,1fr);
  gap:22px;
  align-items:start;
  width:min(1480px,calc(100% - 28px));
  padding:24px 0 54px;
  transition:grid-template-columns .2s ease;
}
.app-layout.rail-collapsed{grid-template-columns:58px minmax(0,1fr)}
.rail{
  position:sticky;
  top:72px;
  max-height:calc(100vh - 92px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(30,33,31,.92);
  border-radius:8px;
  padding:16px;
  transition:padding .2s ease;
}
.rail h1{font-size:1.55rem}
.rail p{font-size:.92rem;color:var(--muted)}
.rail-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rail-toggle{
  flex:0 0 auto;
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  background:rgba(255,255,255,.055);
}
.rail-toggle:hover{border-color:var(--teal);background:rgba(50,198,166,.15)}
.rail-toggle-lines,.rail-toggle-lines::before,.rail-toggle-lines::after{
  display:block;
  width:16px;
  height:2px;
  border-radius:3px;
  background:#edf5ef;
}
.rail-toggle-lines{position:relative}
.rail-toggle-lines::before,.rail-toggle-lines::after{content:"";position:absolute;left:0}
.rail-toggle-lines::before{top:-6px}
.rail-toggle-lines::after{top:6px}
.rail-content{transition:opacity .15s ease,transform .15s ease}
.rail.is-collapsed{padding:12px 8px;overflow:hidden}
.rail.is-collapsed .rail-head{justify-content:center}
.rail.is-collapsed .rail-title,.rail.is-collapsed .rail-content{
  width:0;
  height:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transform:translateX(-8px);
}
.tab-list{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.tab-list button{
  width:100%;
  padding:9px 11px;
  text-align:left;
  color:#dce3db;
  line-height:1.22;
  font-size:.9rem;
  font-weight:760;
}
.tab-list button:hover,.tab-list button.active{
  background:var(--teal);
  border-color:var(--teal);
  color:#07110f;
}
.content-stage{min-width:0;max-width:100%}
.content-card{
  padding:18px;
  margin-bottom:16px;
}
.intro-card{border-color:rgba(242,184,75,.28)}
.content-card h2{margin:8px 0}
.content-card h3{margin-top:18px}
.content-card ul,.content-card ol,.activity-card ul,.activity-card ol{
  color:#d7ddd5;
  padding-left:20px;
}
.content-card li,.activity-card li{margin:6px 0}
.lesson-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:16px;
}
.note-panel{
  border-left:4px solid var(--amber);
  background:rgba(242,184,75,.1);
  border-radius:8px;
  padding:12px 14px;
}
.note-panel.risk{
  border-left-color:var(--rose);
  background:rgba(239,107,115,.1);
}
.section-block{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:16px;
  margin-top:16px;
}
.section-block p{color:#dce2da}
.concept-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.concept-note{
  min-width:0;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  border-radius:8px;
  padding:12px;
}
.concept-note strong{
  display:block;
  color:var(--amber);
  margin-bottom:4px;
}
.concept-note p{
  margin:0;
  color:#e4e9e1;
}
.data-table-wrap{
  margin-top:14px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.035);
}
.data-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
}
.data-table th,.data-table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
  text-align:left;
}
.data-table th{
  color:#101714;
  background:var(--teal);
  font-size:.88rem;
  font-weight:850;
}
.data-table td{
  color:#e3e8e0;
  font-size:.93rem;
}
.data-table tr:last-child td{border-bottom:0}
.data-table td:first-child{
  color:var(--amber);
  font-weight:850;
}
.activity-list,.question-list-wrap{display:grid;gap:14px;min-width:0}
.activity-card{padding:18px;min-width:0;max-width:100%;overflow-wrap:anywhere}
.activity-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:start;
  margin-bottom:10px;
}
.activity-head > *{min-width:0}
.activity-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
  min-width:0;
}
.deliverable-box{
  border:1px solid rgba(255,255,255,.08);
  background:var(--surface-2);
  border-radius:8px;
  padding:14px;
  min-width:0;
  max-width:100%;
}
.example-box{
  margin-top:14px;
  border:1px solid rgba(50,198,166,.26);
  background:rgba(50,198,166,.08);
  border-radius:8px;
  padding:14px;
  min-width:0;
  max-width:100%;
}
.example-box h4,.deliverable-box h4{margin-bottom:8px}
.example-box pre{
  white-space:pre-wrap;
  margin:10px 0 0;
  color:#eef5ef;
  font:500 .9rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;
}
.diagram-box{
  margin-top:14px;
  border:1px solid rgba(122,167,255,.28);
  background:rgba(122,167,255,.07);
  border-radius:8px;
  padding:14px;
  overflow:auto;
}
.diagram-note,.diagram-caption{
  color:var(--muted);
  font-size:.92rem;
}
.usecase-svg{
  display:block;
  min-width:760px;
  width:100%;
  height:auto;
  margin-top:12px;
}
.system-boundary{
  fill:rgba(18,17,15,.62);
  stroke:rgba(244,244,239,.38);
  stroke-width:2;
}
.system-title{
  fill:#f4f4ef;
  font-size:18px;
  font-weight:800;
}
.usecase-oval{
  fill:rgba(50,198,166,.14);
  stroke:#32c6a6;
  stroke-width:2;
}
.usecase-label,.actor-label,.link-label{
  fill:#eef5ef;
  font-size:14px;
  font-weight:760;
}
.actor-stroke{
  fill:none;
  stroke:#f2b84b;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.diagram-link{
  stroke:rgba(244,244,239,.64);
  stroke-width:2;
}
.include-link{
  stroke:#7aa7ff;
  stroke-dasharray:8 7;
}
.link-label{
  fill:#cfe0ff;
  paint-order:stroke;
  stroke:#12110f;
  stroke-width:5;
  stroke-linejoin:round;
}
.diagram-arrow{fill:#7aa7ff}
.review-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.question-card{padding:16px;min-width:0;max-width:100%;overflow-wrap:anywhere}
.question-card h3{font-size:1.04rem;margin:8px 0 12px}
.question-options{
  display:grid;
  gap:8px;
}
.question-option{
  width:100%;
  min-height:42px;
  padding:10px 12px;
  text-align:left;
  color:#edf3eb;
  background:rgba(255,255,255,.04);
}
.question-option:hover{border-color:var(--teal)}
.question-option.correct{
  border-color:rgba(120,209,125,.78);
  background:rgba(120,209,125,.15);
}
.question-option.wrong{
  border-color:rgba(239,107,115,.72);
  background:rgba(239,107,115,.14);
}
.answer-feedback{
  margin-top:12px;
  border-left:4px solid var(--teal);
  padding:10px 12px;
  border-radius:8px;
  background:rgba(50,198,166,.1);
  color:#e8f2ec;
}
.comparison-grid,.flashcard-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.comparison-grid .comparison-card{padding:16px}
.comparison-columns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}
.comparison-columns div{
  border:1px solid rgba(255,255,255,.08);
  background:var(--surface-2);
  border-radius:8px;
  padding:12px;
}
.comparison-columns h4{margin-bottom:6px;color:var(--amber)}
.flashcard{
  min-height:148px;
  display:block;
  padding:16px;
  text-align:left;
}
.flashcard:hover{border-color:var(--amber)}
.flashcard strong{display:block;margin-bottom:8px;color:var(--teal)}
.flashcard .answer{display:none;color:#eef5ef}
.flashcard.is-open .answer{display:block}
.flashcard.is-open .question{display:none}
.footer{
  width:min(1180px,calc(100% - 36px));
  margin:0 auto;
  padding:28px 0 42px;
  color:var(--muted-2);
  border-top:1px solid rgba(255,255,255,.08);
}
@media (max-width:1100px){
  .lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .study-hero{grid-template-columns:1fr;min-height:auto}
  .dashboard-panel{max-width:720px}
}
@media (max-width:920px){
  main,.app-layout{width:min(100% - 24px,760px)}
  .app-layout,.app-layout.rail-collapsed{grid-template-columns:1fr}
  .rail{
    position:relative;
    top:0;
    max-height:none;
  }
  .rail.is-collapsed{
    padding:12px;
  }
  .rail.is-collapsed .rail-head{justify-content:space-between}
  .rail.is-collapsed .rail-title{
    width:auto;
    height:auto;
    opacity:1;
    overflow:visible;
    transform:none;
  }
  .section-shell.split,.activity-grid,.comparison-grid,.flashcard-grid,.lesson-meta{
    grid-template-columns:1fr;
  }
  .concept-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .topbar{align-items:flex-start;flex-direction:column}
  .main-nav{justify-content:flex-start}
  .study-hero{padding-top:36px}
  .lesson-grid,.stat-grid{grid-template-columns:1fr}
  .process-strip{
    grid-template-columns:1fr;
  }
  .process-strip::before{
    left:11px;
    right:auto;
    top:8px;
    bottom:8px;
    width:2px;
    height:auto;
  }
  .process-strip span{
    min-height:48px;
    place-items:center start;
    text-align:left;
    padding-left:42px;
  }
  .process-strip span::before{left:0;top:13px}
  .section-heading,.activity-head,.review-toolbar{
    display:block;
  }
  .review-toolbar .button{margin-top:10px}
  h1{font-size:2.42rem}
}