/* Delta curves lesson: native diagrams and examples, scoped to this page. */
.dc-lesson { --dc-blue:#8acbff; --dc-cyan:#8be0e3; }
.dc-definition { display:flex; gap:1rem; align-items:flex-start; margin:1.5rem 0; padding:1.1rem 1.2rem; border:1px solid #36546c; border-radius:15px; background:linear-gradient(120deg,#152b3a,#191e31); }
.dc-delta-symbol { display:grid; place-items:center; flex:0 0 42px; height:42px; border:1px solid #70b6ef; border-radius:12px; background:#24415c; color:#b8e0ff; font:600 1.3rem/1 var(--mono); }
.dc-definition strong { color:#c3e5ff; }
.dc-lesson .dc-definition p { margin:.45rem 0 0; font-size:.94rem; }
.dc-illustration { margin:1.4rem 0; border:1px solid #3d536c; border-radius:18px; overflow:hidden; background:radial-gradient(ellipse at 80% 0,#3c80b626,transparent 65%),#121c2c; }
.dc-figure-heading { display:grid; gap:.45rem; padding:1.2rem 1.25rem .2rem; }
.dc-figure-heading > span,.dc-step { color:#9bceef; font-size:.7rem; font-weight:800; letter-spacing:.055em; text-transform:uppercase; }
.dc-figure-heading > strong { font-size:1.22rem; line-height:1.4; color:#edf6ff; }
.dc-illustration picture,.dc-illustration img { display:block; width:100%; }
.dc-illustration img { height:auto; }
.dc-wings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin:0 1.25rem; }
.dc-wings > div { min-width:0; padding:.9rem 1rem; border:1px solid #3c6688; border-radius:12px; background:#1b2b40; }
.dc-wings > div:last-child { border-color:#39777e; background:#192e3b; }
.dc-wings span { display:block; font-size:.76rem; color:#b8d0e5; }
.dc-wings strong { display:block; color:#b4ddff; font:600 1.65rem/1.5 var(--mono); }
.dc-wings > div:last-child strong { color:#a8e9ec; }
.dc-wings small { display:block; font-size:.8rem; color:#c0ccdf; }
.dc-illustration figcaption { margin:0; padding:1rem 1.25rem 1.15rem; color:#b8c6da; font-size:.86rem; line-height:1.7; }
.dc-illustration figcaption strong { color:#dfeafb; }
.dc-interpolation { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.3rem 0; }
.dc-interpolation > section { min-width:0; padding:1.1rem; border:1px solid #3d6584; border-top:3px solid #79bffa; border-radius:14px; background:linear-gradient(145deg,#1a2c40,#171d2c); }
.dc-interpolation > section:last-child { border-color:#3b6d78; border-top-color:#85d7da; background:linear-gradient(145deg,#19333c,#171d2c); }
.dc-lesson .dc-interpolation h3 { margin:.6rem 0 1rem; font-size:1rem; }
.dc-interpolation dl { margin:0; border:1px solid #45556d; border-radius:9px; overflow:hidden; font-size:.85rem; }
.dc-interpolation dl > div { display:grid; grid-template-columns:1fr 1fr; }
.dc-interpolation dl > div + div { border-top:1px solid #45556d; }
.dc-interpolation :is(dt,dd) { margin:0; padding:.45rem .6rem; }
.dc-interpolation dd { border-left:1px solid #45556d; color:#c4e3fb; font-family:var(--mono); }
.dc-lesson .dc-interpolation p { font-size:.88rem; color:#b7c5d7; margin:.9rem 0; }
.dc-interpolation > section > code { display:block; padding:.6rem; font-size:.74rem; line-height:1.8; color:#d7e8fa; overflow-wrap:anywhere; }
.dc-result { display:block; margin-top:.7rem; color:#aedaff; font:600 1.6rem/1.5 var(--mono); }
.dc-result small { display:block; color:#b6c7da; font-family:inherit; font-size:.75rem; font-weight:500; line-height:1.5; }
.dc-interpolation > section:last-child .dc-result { color:#a2e5e7; }
.dc-ladder { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.55rem; margin:1.2rem 0; }
.dc-ladder span { display:grid; place-items:center; padding:.7rem .3rem; border:1px solid #42698d; border-radius:9px; color:#bbdfff; background:linear-gradient(145deg,#233d59,#182537); font:600 .96rem/1.5 var(--mono); }
.dc-control-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,310px); gap:1.35rem; margin:1.7rem 0; align-items:start; }
.dc-control-copy { min-width:0; }
.dc-lesson .dc-control-copy h3 { margin:.5rem 0 .9rem; }
.dc-lesson .dc-control-copy p { font-size:.94rem; }
.dc-control-copy > a { display:inline-block; margin-top:.3rem; font-size:.9rem; }
.dc-product-shot { margin:0; padding:.55rem; border:1px solid #3e6575; border-radius:15px; background:#141e2e; }
.dc-product-shot img { display:block; width:100%; max-width:356px; height:auto; margin:auto; border-radius:10px; }
.dc-product-shot figcaption { padding:.65rem .35rem .3rem; font-size:.78rem; line-height:1.6; color:#b9cadb; }
.dc-change-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin:1.3rem 0; }
.dc-change-grid > section { --dc-accent:#91caff; min-width:0; padding:1rem; border:1px solid #3c506c; border-radius:13px; background:linear-gradient(145deg,#1c2c40,#141c2a); }
.dc-change-grid > section:nth-child(2) { --dc-accent:#bfa4ff; background:linear-gradient(145deg,#29233e,#171c2b); border-color:#55466d; }
.dc-change-grid > section:nth-child(3) { --dc-accent:#8edcd1; background:linear-gradient(145deg,#193335,#151e2a); border-color:#3e655f; }
.dc-change-grid section > span { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--dc-accent); border-radius:10px; color:var(--dc-accent); font:600 .83rem/1 var(--mono); }
.dc-lesson .dc-change-grid h3 { margin:.8rem 0 .5rem; font-size:.98rem; }
.dc-lesson .dc-change-grid p { margin:0; color:#b8c6d8; font-size:.86rem; line-height:1.65; }
.dc-probability { margin:1.3rem 0; padding:1.1rem 1.2rem; border:1px solid #6b5c45; border-left:3px solid #e5bf7b; border-radius:0 14px 14px 0; background:linear-gradient(120deg,#30291f,#201e2d); }
.dc-probability > strong { color:#f0d5a3; }
.dc-lesson .dc-probability p { margin:.65rem 0 0; font-size:.94rem; }
.dc-reading strong { color:#c7dff4; }
.dc-lesson .dc-source { padding-top:1rem; border-top:1px solid #35445c; font-size:.84rem; color:#afbed3; }
@media(max-width:900px) {
  .dc-control-grid { grid-template-columns:minmax(0,1fr); }
  .dc-product-shot { max-width:356px; justify-self:center; }
}
@media(max-width:600px) {
  .dc-definition { gap:.75rem; padding:.95rem; }
  .dc-delta-symbol { flex-basis:32px; height:32px; font-size:1rem; }
  .dc-figure-heading { padding:1rem 1rem .2rem; }
  .dc-figure-heading > strong { font-size:1.1rem; }
  .dc-wings { gap:.6rem; margin:0 .9rem; }
  .dc-wings > div { padding:.7rem; }
  .dc-wings strong { font-size:1.4rem; }
  .dc-wings small { font-size:.74rem; }
  .dc-illustration figcaption { padding:.9rem 1rem 1rem; }
  .dc-interpolation,.dc-change-grid { grid-template-columns:minmax(0,1fr); }
  .dc-ladder { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dc-control-grid { gap:1rem; }
}