.sentinel-learn {
  --learn-bg: #061411;
  --learn-panel: #09201b;
  --learn-border: #174d43;
  --learn-mint: #43efbd;
  --learn-cyan: #45ccf2;
  --learn-gold: #e7bd55;
  --learn-text: #effffb;
  --learn-muted: #9fb4ae;
  box-sizing: border-box;
  width: min(1180px, calc(100% - 32px));
  margin: 56px auto 24px;
  padding: clamp(24px, 4vw, 48px);
  color: var(--learn-text);
  background: linear-gradient(145deg, rgba(9, 32, 27, .98), rgba(3, 10, 9, .98));
  border: 1px solid var(--learn-border);
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
}

.sentinel-learn *, .sentinel-learn *::before, .sentinel-learn *::after { box-sizing: border-box; }
.sentinel-learn__eyebrow { margin: 0 0 10px; color: var(--learn-mint); font-weight: 800; letter-spacing: .18em; }
.sentinel-learn h2 { margin: 0; max-width: 24ch; font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.05; }
.sentinel-learn h3 { margin: 0 0 8px; font-size: 1.05rem; }
.sentinel-learn__lead { max-width: 76ch; margin: 18px 0 28px; color: var(--learn-muted); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.65; }
.sentinel-learn__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sentinel-learn__panel { background: rgba(5, 22, 19, .9); border: 1px solid var(--learn-border); border-radius: 16px; padding: 0 18px; }
.sentinel-learn__panel summary { cursor: pointer; padding: 18px 0; color: var(--learn-cyan); font-weight: 800; }
.sentinel-learn__panel ul { margin: 0 0 20px; padding-left: 20px; color: var(--learn-muted); line-height: 1.55; }
.sentinel-learn__panel li + li { margin-top: 9px; }
.sentinel-learn__practice { margin-top: 18px; padding: 20px; border-left: 4px solid var(--learn-gold); background: rgba(231, 189, 85, .07); border-radius: 0 14px 14px 0; }
.sentinel-learn__practice strong { color: var(--learn-gold); }
.sentinel-learn__practice p { margin: 6px 0 0; color: var(--learn-text); line-height: 1.55; }
.sentinel-learn__buddy { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 18px; padding: 22px; border: 1px solid rgba(67, 239, 189, .42); border-radius: 18px; background: rgba(67, 239, 189, .06); }
.sentinel-learn__buddy p { margin: 0; color: var(--learn-muted); line-height: 1.5; }
.sentinel-learn__fox-button { flex: 0 0 auto; min-height: 48px; padding: 0 22px; color: #03100d; background: var(--learn-mint); border: 0; border-radius: 999px; font: inherit; font-weight: 900; cursor: pointer; }
.sentinel-learn__fox-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.sentinel-learn__fox-button:focus-visible, .sentinel-learn a:focus-visible, .sentinel-learn summary:focus-visible { outline: 3px solid var(--learn-gold); outline-offset: 3px; }
.sentinel-learn__links { margin-top: 24px; }
.sentinel-learn__links ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sentinel-learn__links a { display: inline-flex; padding: 10px 14px; color: var(--learn-cyan); text-decoration: none; border: 1px solid rgba(69, 204, 242, .35); border-radius: 999px; }
.sentinel-learn__links a:hover { background: rgba(69, 204, 242, .08); }
.sentinel-learn__note { margin: 26px 0 0; padding-top: 18px; color: #718b84; border-top: 1px solid var(--learn-border); font-size: .86rem; line-height: 1.5; }

@media (max-width: 820px) {
  .sentinel-learn { width: min(100% - 20px, 1180px); margin-top: 36px; border-radius: 20px; }
  .sentinel-learn__grid { grid-template-columns: 1fr; }
  .sentinel-learn__buddy { align-items: stretch; flex-direction: column; }
  .sentinel-learn__fox-button { width: 100%; }
  .sentinel-learn__links ul { display: grid; }
  .sentinel-learn__links a { justify-content: space-between; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .sentinel-learn *, .sentinel-learn *::before, .sentinel-learn *::after { scroll-behavior: auto !important; transition: none !important; }
}
.sentinel-learn { width: calc(100% - 32px); max-width: 1280px; min-width: 0; }
.sentinel-learn pre { max-width: 100%; overflow-x: auto; padding: 16px; border-radius: 8px; background: #061017; text-align: left; white-space: pre; }
.sentinel-learn code { font: 13px/1.65 ui-monospace, monospace; }
.sentinel-learn p, .sentinel-learn li, .sentinel-learn a { overflow-wrap: anywhere; }