/* I use the same reading layout and controls throughout the site. */
:root{--mdx-ink:#22343b;--mdx-muted:#5c6d73;--mdx-teal:#08776f;--mdx-line:#dbe5e3;--mdx-soft:#f3f8f7}

html{scroll-behavior:smooth;scroll-padding-top:24px}
*{box-sizing:border-box}
body{margin:0!important;background:#fff!important;color:var(--mdx-ink)!important;font:18px/1.75 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
a{color:var(--mdx-teal)}
a:hover{color:#034c47;text-decoration:underline}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:inherit!important;color:var(--mdx-ink)!important;line-height:1.25;letter-spacing:-.025em}
h1{font-size:clamp(2rem,4.5vw,3.3rem)!important;margin:0 0 24px!important}
h2{font-size:clamp(1.5rem,3vw,1.9rem)!important;margin:38px 0 16px!important}
h3{font-size:1.25rem!important;margin:28px 0 12px!important}
p{margin:0 0 20px}
main,.page{width:100%;max-width:860px;margin:0 auto;padding:48px 24px}
.intro{font-size:1.2rem;line-height:1.65;color:var(--mdx-muted)}
.eyebrow{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mdx-teal);margin-bottom:14px}
.mdx-nav{display:flex!important;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:18px max(24px,calc((100% - 1120px)/2))!important;border-bottom:1px solid var(--mdx-line);background:#fff;position:relative!important;width:100%;font-size:1rem;line-height:1.4}
.mdx-brand{display:flex;align-items:center;gap:12px;font-weight:750;color:var(--mdx-ink);text-decoration:none}
.mdx-brand img{width:40px;height:40px;object-fit:contain}
.mdx-nav-links{display:flex;gap:24px;flex-wrap:wrap}
.mdx-nav-links a{text-decoration:none;padding:8px 0}
.mdx-nav-links a[aria-current]{font-weight:700;border-bottom:2px solid var(--mdx-teal)}
.mdx-footer{max-width:1120px;margin:50px auto 0!important;padding:28px 24px!important;border-top:1px solid var(--mdx-line);background:#fff!important;color:var(--mdx-muted);font-size:.84rem;line-height:1.7}
.mdx-footer p{margin:0 0 12px}
.mdx-footer-links{display:flex;gap:10px 22px;flex-wrap:wrap}
.mdx-wide{max-width:1168px}
.mdx-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:50px;align-items:center;padding:24px 0 55px}
.mdx-hero h1{font-size:clamp(2.4rem,4vw,3.8rem)!important}
.mdx-hero-picture{display:block;background:var(--mdx-soft);border:1px solid var(--mdx-line);border-radius:16px;padding:18px;text-decoration:none}
.mdx-hero-picture img{display:block;width:100%;border-radius:8px}
.mdx-hero-picture span{display:block;padding:16px 4px 0;font-weight:650}
.mdx-actions{display:flex;gap:14px;flex-wrap:wrap}
.mdx-button,button,input[type=submit]{display:inline-block;border:1px solid var(--mdx-teal);border-radius:6px;padding:10px 18px;background:var(--mdx-teal);color:white;font-size:1rem;font-weight:600;line-height:1.5;text-decoration:none;cursor:pointer}
.mdx-button:hover,button:hover{background:#045b55;color:white}
.mdx-secondary{background:white;color:var(--mdx-teal)}
.mdx-section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.mdx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.mdx-card{border:1px solid var(--mdx-line);border-radius:12px;background:#fff;overflow:hidden;transition:box-shadow .2s}
.mdx-card:hover{box-shadow:0 5px 22px #14342b0d}
.mdx-card>img{display:block;width:100%;aspect-ratio:1.6;object-fit:contain;background:var(--mdx-soft)}
.mdx-card-copy{padding:24px}
.mdx-card h2{font-size:1.3rem!important;line-height:1.35;margin:0 0 12px!important}
.mdx-card h2 a{color:var(--mdx-ink);text-decoration:none}
.mdx-card h2 a:hover{color:var(--mdx-teal);text-decoration:underline}
.mdx-card p{font-size:1rem;line-height:1.65;margin-bottom:0}
.mdx-card .eyebrow{font-size:.7rem;margin-bottom:12px}
.mdx-start{margin:64px 0;padding:32px;background:var(--mdx-soft);border-radius:14px}
.mdx-start h2{margin-top:0!important}
.mdx-path{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-left:24px}
.mdx-path a{font-weight:650}
.mdx-path span{display:block;font-size:1rem;color:var(--mdx-muted);margin-top:8px}
.mdx-about{max-width:820px}
.mdx-newsletter{border-top:1px solid var(--mdx-line);margin-top:45px;padding-top:10px}
.mdx-newsletter form{display:flex;gap:18px;flex-wrap:wrap;align-items:end}
.mdx-newsletter label{flex:1;min-width:200px}
.mdx-newsletter input,.mdx-library-tools input{display:block;width:100%;border:1px solid #9cafaa;border-radius:6px;padding:10px 12px;font:inherit;background:white;color:var(--mdx-ink);margin-top:7px}
.mdx-page-heading{max-width:760px;margin-bottom:32px}
.mdx-library-tools{display:flex;align-items:end;gap:24px;justify-content:space-between;margin:0 0 32px}
.mdx-library-tools label{width:min(100%,540px)}
.mdx-library-tools p{white-space:nowrap;font-size:.9rem;color:var(--mdx-muted)}
[hidden]{display:none!important}
.playground{border:1px solid var(--mdx-line);border-radius:12px;background:var(--mdx-soft);padding:24px}
.playground h2{margin-top:0!important}
.controls{gap:16px}
button,select,input{font-family:inherit}
select{background:white}
pre{max-width:100%;overflow-x:auto!important;white-space:pre!important;border:1px solid var(--mdx-line);border-radius:8px;padding:18px!important;background:#f5f7f7!important;font:14px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace!important}
pre code{background:none;padding:0;font:inherit}
summary{font-weight:650;cursor:pointer;color:var(--mdx-teal)}
details{border-top:1px solid var(--mdx-line);padding-top:18px;margin-top:28px}
.readout{background:white}
figure{margin:28px 0}
figcaption{font-size:.9rem;color:var(--mdx-muted)}
:focus-visible{outline:3px solid #d86836;outline-offset:4px}
.article-ad{margin:40px 0}

/* I normalize the old presentation tags without altering the lesson code. */
.mdx-legacy>.container,.mdx-legacy>div.container,.mdx-legacy>.column{max-width:860px!important;width:100%!important;margin:0 auto!important;padding:24px!important}
.mdx-legacy .container .container{padding:0!important}
.mdx-legacy .row{margin-left:0!important;margin-right:0!important}
.mdx-legacy [class*=col-md],.mdx-legacy [class*=col-lg],.mdx-legacy [class*=col-xl],.mdx-legacy [class*=col-xs]{max-width:100%!important;width:100%!important;padding-left:0!important;padding-right:0!important}
.mdx-legacy font{font-family:inherit!important;color:inherit!important;font-size:inherit!important}
.mdx-legacy h1{max-width:860px;margin:42px auto 24px!important;padding:0 24px;text-align:left!important}
.mdx-legacy center{text-align:left}
.mdx-legacy center img{display:block;margin:18px auto}
.mdx-legacy table{max-width:100%;display:block;overflow-x:auto;font-size:1rem}
.mdx-legacy td,.mdx-legacy th{padding:10px}
.mdx-legacy pre font{font-family:inherit!important}
.mdx-legacy hr{border:0;border-top:1px solid var(--mdx-line);max-width:812px;margin:30px auto}
.mdx-legacy>.mdx-nav,.mdx-legacy>.mdx-footer{max-width:none}
.mdx-modern .page{max-width:860px;padding:48px 24px}
.mdx-modern .mdx-footer{max-width:1120px}
.mdx-modern main .mdx-footer{padding-left:0!important;padding-right:0!important}
.mdx-modern .mdx-nav{max-width:none}

@media(max-width:850px){.mdx-hero{grid-template-columns:1fr;gap:28px}
.mdx-hero-picture{max-width:540px}
.mdx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.mdx-path{grid-template-columns:1fr}
.mdx-nav{gap:12px}
.mdx-nav-links{gap:22px}
}

@media(max-width:560px){body{font-size:17px!important}
main,.page{padding:30px 18px}
.mdx-nav{padding:16px 18px!important}
.mdx-brand{font-size:.98rem}
.mdx-nav-links{width:100%;font-size:.94rem}
.mdx-grid{grid-template-columns:1fr}
.mdx-card-copy{padding:22px}
.mdx-start{padding:24px}
.mdx-library-tools{display:block}
.mdx-library-tools p{margin-top:12px}
.mdx-hero{padding-top:10px}
.mdx-legacy>.container,.mdx-legacy>.column{padding:18px!important}
.playground{padding:16px}
.mdx-footer{padding:24px 18px!important}
.controls{align-items:stretch}
.intro{font-size:1.12rem}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.mdx-card{transition:none}
}

.mdx-legacy-reading{max-width:860px;padding:42px 24px}
.mdx-legacy-reading>.container,.mdx-legacy-reading .container{max-width:100%!important;width:100%!important;margin:0 auto!important;padding:0!important}
.mdx-legacy-reading h1{padding:0;margin-top:0!important}
.mdx-legacy-reading .column{max-width:100%!important}
.mdx-legacy-reading>center{display:block}
.mdx-legacy-reading>center>h4{font-size:.9rem!important;color:var(--mdx-muted)!important;font-weight:500}
.mdx-legacy-reading table img{max-width:100%;height:auto}
.mdx-legacy-reading>hr{margin:30px 0}

/* I keep a little of the original site's warm color alongside the quieter layout. */
.mdx-hero{background:linear-gradient(135deg,#fff 40%,#eef8f6 75%,#fff7e8);border-radius:18px;padding:38px 28px;margin-bottom:28px}
.mdx-hero-picture{background:#ffffffc9}
.mdx-card:nth-child(3n+1){border-top:3px solid #4d958b}
.mdx-card:nth-child(3n+2){border-top:3px solid #e0b15d}
.mdx-card:nth-child(3n){border-top:3px solid #b38da4}
.mdx-purpose{display:grid;grid-template-columns:1fr 1fr;gap:42px;margin:50px 0;border-top:1px solid var(--mdx-line);padding-top:30px}
.mdx-purpose h2{margin-top:0!important}
.mdx-purpose>div:nth-child(2){background:#fff9ef;padding:28px;border-radius:12px}
.mdx-legacy-reading h2{color:#076d66!important}
.mdx-legacy-reading h2 font{color:inherit!important}

@media(max-width:850px){.mdx-purpose{grid-template-columns:1fr;gap:24px}
}
@media(max-width:560px){.mdx-hero{padding:24px 18px}
.mdx-purpose>div:nth-child(2){padding:22px}
}


/* I preserve the original home-page title, image and yellow topic links. */
.mdx-home header.masthead .site-heading h1 {
  color: #fff !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 3rem !important;
  line-height: 1.2;
  letter-spacing: normal;
  margin-bottom: 0 !important;
}
.mdx-home header.masthead .subheading a { color: yellow; }
@media (min-width: 992px) {
  .mdx-home header.masthead .site-heading h1 { font-size: 5rem !important; }
}
@media (max-width: 560px) {
  .mdx-home header.masthead .site-heading h1 { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .mdx-home header.masthead .subheading { font-size: 1.1rem; line-height: 1.6; }
}

.mdx-title-word { white-space: nowrap; }
/* I keep the original title design in a more compact banner. */
.mdx-home header.masthead {
  padding: 52px 18px;
  margin-bottom: 12px;
}
.mdx-home header.masthead .container { max-width: 1120px; }
.mdx-home header.masthead .row > div { width: 100%; }
.mdx-home header.masthead .site-heading h1 {
  font-size: clamp(2rem, 4.4vw, 3.5rem) !important;
}
.mdx-home header.masthead .subheading { font-size: 1.15rem; }
.mdx-home header.masthead .mdx-hero-link { margin-top: 18px; padding: 9px 16px; }
.mdx-home > main { padding-top: 24px; }
@media (max-width: 560px) {
  .mdx-home header.masthead { padding: 36px 14px; }
  .mdx-home header.masthead .subheading { font-size: 1rem; }
  .mdx-home header.masthead .mdx-hero-link { font-size: .9rem; }
}