.example-gallery { container-type:inline-size; color:#192f43; margin:24px 0 28px; }
.ex-head,.ex-filters,.ex-techs,.ex-meta,.ex-title,.ex-footer { display:flex; align-items:center; }
.ex-head { justify-content:space-between; gap:18px; flex-wrap:wrap; }
.ex-head h2,.home-study h2 { margin:0; color:var(--ui-ink,#192d40); font-size:clamp(20px,2.1vw,27px); font-weight:650; letter-spacing:-.04em; }
.ex-search { position:relative; flex:0 1 240px; }
.ex-search svg { position:absolute; top:50%; left:11px; transform:translateY(-50%); width:16px;height:16px;color:#536d83;pointer-events:none; }
.ex-search input { background:#fff;border:1px solid #bbcbd6;color:#1a344c;border-radius:7px;padding:9px 10px 9px 34px;font:inherit;font-size:13px;width:100%; }
.ex-filters { margin:14px 0 13px; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; }
.ex-techs { flex-wrap:wrap; gap:4px; }
.ex-selects { display:flex; gap:6px; flex-wrap:wrap; }
.ex-pages .ex-page { border:1px solid #c8d6e1; background:white; border-radius:6px; padding:5px 7px; max-width:100%; cursor:pointer; }
.ex-object[hidden] { display:none; }
.ex-filter,.ex-filters select,.ex-pages button { border:1px solid #c8d6e1; border-radius:6px; background:#fff;color:#3b566c;font:600 12px/1.2 var(--sans,sans-serif);cursor:pointer; }
.ex-filter { padding:6px 9px; }
.ex-filter[aria-pressed="true"] { background:#243f59;border-color:#243f59;color:#fff; }
.ex-filter:hover,.ex-pages button:hover { border-color:#466c8c; }
.ex-filters select { padding:6px 7px; max-width:100%; }
.ex-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ex-card {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  margin:0;
  padding:10px 12px 8px;
  border:1px solid #cbd9e3;
  border-radius:8px;
  background:#fff;
}
.ex-card:hover,.ex-card:focus-within { border-color:#7796b0; }
.ex-primary {
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  background:transparent;
  border:0;
  padding:0;
  color:inherit;
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.ex-primary::after { content:""; position:absolute; inset:0; border-radius:8px; }
.ex-primary:hover,.ex-primary:focus-visible { background:transparent; }
.ex-primary:focus-visible { outline:none; }
.ex-primary:focus-visible::after { outline:2px solid #356697; outline-offset:1px; }
.ex-primary[aria-busy="true"] { cursor:progress; opacity:.72; }
.ex-cover { display:block; flex:none; width:68px; height:38px; border-radius:4px; object-fit:cover; background:#e4edf3; }
.ex-body { display:grid; min-width:0; gap:3px; }
.ex-meta { column-gap:7px; row-gap:2px; flex-wrap:wrap; font:550 10px/1.25 var(--mono,monospace); color:#526c81; }
.ex-tech { color:#2f506b; font-weight:700; }
.ex-title { display:block; color:#18334b; font-size:15px; line-height:1.23; font-weight:650; letter-spacing:-.022em; }
.ex-desc { color:#496175; font-size:12px; line-height:1.4; margin:2px 0 0; }
.ex-guide-link {
  z-index:1; align-self:flex-start; margin-top:auto; padding:3px 0 0; background:none; border:0;
  color:#305e85; font:600 11.5px/1.4 var(--sans,sans-serif); cursor:pointer;
}
.ex-guide-link:hover,.ex-guide-link:focus-visible { text-decoration:underline; background:none; }
.ex-footer { justify-content:space-between; margin-top:12px; gap:12px; flex-wrap:wrap; }
.ex-count,.ex-page { font:500 12px var(--mono,monospace); margin:0; color:#506a7c; }
.ex-pages { display:flex; align-items:center; gap:9px; }
.ex-pages[hidden] { display:none; }
.ex-pages button { padding:6px 10px; }
.ex-pages button:disabled { opacity:.5; cursor:default; }
.ex-error { color:#9e302b; font-size:13px; }
.ex-guide-dialog {
  width:min(calc(100% - 32px),610px); max-height:85dvh; overflow:auto; border:1px solid #a8bdcc; padding:0; border-radius:11px; background:#fff;
  color:#1d374b; box-shadow:0 15px 55px #0e26353b;
}
.ex-guide-dialog::backdrop { background:#182d4270; }
.ex-guide-body { padding:18px 22px 22px; }
.ex-guide-body header { display:flex;align-items:center;justify-content:space-between; gap:12px; font-size:13px; font-weight:600; color:#52718b; }
.ex-guide-dialog h3 { margin:12px 0; color:#203a50; font-size:21px; line-height:1.25; }
.ex-guide-explanation { margin:0 0 16px; color:#354f62; font-size:15px; line-height:1.55; overflow-wrap:anywhere; }
.ex-guide-explanation:empty { display:none; }
.ex-guide-subtitle { margin:0 0 8px; color:#203a50; font-size:14px; font-weight:680; }
.ex-guide-steps { margin:0 0 18px; padding-left:21px; font-size:14px; line-height:1.55; }
.ex-guide-steps li+li { margin-top:6px; }
.ex-guide-body button { border:1px solid #afc2d0; border-radius:5px; background:#fff; color:#34536c; padding:5px 9px; font:600 12px/1.45 var(--sans,sans-serif); }
.ex-guide-body .ex-guide-open { background:#294b69; border-color:#294b69; color:#fff; padding:7px 12px; }

.home-study {
  container-type:inline-size;
  margin: 24px 0 28px;
}
.study-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-bottom:12px;
}
.study-open {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 0;
  background:transparent;
  border:0;
  color:#254b6e;
  font:600 12px/1.4 var(--sans,sans-serif);
}
.study-open:hover { color:#103457; background:transparent; }
.study-open svg { width:16px; height:16px; }
.home-study-list {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:9px;
}
.study-card {
  --course-color:#305c85;
  --course-tint:#e4eff8;
  --course-line:#bed2e3;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  padding:14px 14px 10px;
  color:#203b52;
  background:linear-gradient(145deg,#fff 10%,var(--course-tint) 195%);
  border:1px solid var(--course-line);
  border-radius:9px;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.study-card[data-track="cortex"] { --course-color:#535b90; --course-tint:#ededf8; --course-line:#cbd0e2; }
.study-card[data-track="peripherals"] { --course-color:#32687c; --course-tint:#e4f1f4; --course-line:#bed6db; }
.study-card[data-track="freertos"] { --course-color:#285b8d; --course-tint:#dcebf8; --course-line:#b3cce2; }
.study-card[data-track="zephyr"] { --course-color:#5749a1; --course-tint:#eeeafa; --course-line:#c6c0e4; }
.study-card[data-track="games"] { --course-color:#745875; --course-tint:#f2ebf3; --course-line:#dccddd; }
.study-card:hover,.study-card:focus-visible {
  border-color:var(--course-color);
  background:linear-gradient(145deg,#fff,var(--course-tint));
  box-shadow:0 3px 12px #20385118;
}
.study-card:focus-visible,.study-open:focus-visible {
  outline:2px solid #356697;
  outline-offset:2px;
}
.study-symbol {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  margin-bottom:9px;
  border-radius:8px;
  background:var(--course-tint);
  color:var(--course-color);
}
.study-symbol i,.study-card-footer i,.study-open i { display:inline-flex; }
.study-symbol svg { width:20px; height:20px; }
.study-card strong { color:#1e374f; font-size:16px; line-height:1.24; letter-spacing:-.027em; }
.study-topic { margin:5px 0 11px; font-size:12px; line-height:1.4; font-weight:450; color:#4a6176; }
.study-card-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  margin-top:auto;
  padding-top:8px;
  border-top:1px solid var(--course-line);
  color:var(--course-color);
  font:550 10px/1.4 var(--mono,monospace);
}
.study-card-footer svg { width:15px; height:15px; }
@container (max-width:850px) {
  .home-study-list { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .study-card { grid-column:span 2; }
  .ex-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container (max-width:560px) {
  .study-card { grid-column:auto; }
  .home-study-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .study-card { padding:10px 12px 8px; }
  .ex-grid { grid-template-columns:1fr; gap:7px; }
  .ex-cover { width:60px; height:35px; }
  .ex-head { gap:10px; }
  .ex-search { flex:1 1 100%; }
  .ex-filters { margin:10px 0; }
}