/* Entrain v3 chrome: the top bar and the footer, shared by every page. */
.e-bar { position: sticky; top: 0; z-index: 50; background: rgba(251, 249, 245, .84); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); border-bottom: 1px solid rgba(16, 26, 46, .07); color: #101A2E; font-family: "Satoshi", "Helvetica Neue", Arial, sans-serif; }
.e-bar-in { display: flex; align-items: center; gap: 1.5rem; max-width: 1240px; margin: 0 auto; padding: .95rem clamp(1.25rem, 4vw, 2.5rem); }
.e-bar.is-over { position: absolute; left: 0; right: 0; background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-scene="night"] .e-bar.is-over { color: #EEF1F7; }
.e-mark { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; font-family: "Newsreader", Georgia, serif; font-size: 1.35rem; letter-spacing: -.01em; margin-right: auto; }
.e-mark svg { width: 26px; height: 26px; flex: none; }
.e-nav { display: flex; align-items: center; gap: 1.55rem; font-size: .93rem; }
.e-nav a { color: inherit; text-decoration: none; opacity: .78; transition: opacity .3s; position: relative; }
.e-nav a:hover, .e-nav a[aria-current="page"] { opacity: 1; }
.e-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; border-radius: 2px; background: #E08A52; }
.e-pill { display: inline-flex; align-items: center; border: 1px solid currentColor; padding: .45rem 1rem; border-radius: 99px; color: inherit; text-decoration: none; font-size: .93rem; white-space: nowrap; transition: background .3s, color .3s; }
.e-pill:hover { background: #101A2E; color: #fff; border-color: #101A2E; }
[data-scene="night"] .is-over .e-pill:hover { background: #F2F4F8; color: #0B1224; border-color: #F2F4F8; }
.e-menu { display: none; width: 40px; height: 40px; border: 0; background: transparent; color: inherit; border-radius: 50%; cursor: pointer; place-items: center; }
.e-menu svg { width: 22px; height: 22px; }
.e-sheet { display: none; }
@media (max-width: 900px) {
  .e-nav { display: none; }
  .e-menu { display: grid; }
  .e-sheet[data-open="true"] { display: block; position: absolute; left: .75rem; right: .75rem; top: calc(100% + .25rem); background: #FBF9F5; color: #101A2E; border-radius: 22px; padding: .6rem; box-shadow: 0 30px 60px -20px rgba(16, 26, 46, .35); }
  .e-sheet a { display: block; padding: .85rem 1rem; border-radius: 14px; text-decoration: none; color: inherit; font-size: 1.05rem; }
  .e-sheet a:hover { background: #F0EBE2; }
}
@media (max-width: 420px) { .e-pill { padding: .4rem .8rem; font-size: .86rem; } }

.e-foot { background: #0E1628; color: #A9B1C2; font-family: "Satoshi", "Helvetica Neue", Arial, sans-serif; font-size: .93rem; line-height: 1.6; }
.e-foot-in { max-width: 1240px; margin: 0 auto; padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 2.5rem) 2.5rem; }
.e-foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 900px) { .e-foot-top { grid-template-columns: 1fr 1fr; } .e-foot-brand { grid-column: 1 / -1; } }
.e-foot .e-mark { color: #F2F4F8; margin: 0; }
.e-foot-brand p { margin: 1rem 0 0; max-width: 24rem; color: #C9D0DD; font-family: "Newsreader", Georgia, serif; font-size: 1.2rem; line-height: 1.4; }
.e-foot h3 { margin: 0 0 .9rem; font-family: "Satoshi", sans-serif; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: #7D8394; }
.e-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.e-foot a { color: #C9D0DD; text-decoration: none; }
.e-foot a:hover { color: #fff; }
.e-foot-legal { margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: .82rem; color: #7D8394; }
.e-foot-legal p { margin: 0; max-width: 46rem; }

/* Entrain v3 skin for the tool and library pages that keep their v2 layouts:
   warmer paper, night ink, gold in place of cobalt. */
:root {
  --paper: #FBF9F5;
  --surface: #FFFFFF;
  --ink: #101A2E;
  --graphite: #3A4256;
  --mist: #5E6576;
  --hair: #EAE3D8;
  --hair-strong: #D6CCBD;
  --cobalt: #9A5A26;
  --cobalt-ink: #7E4717;
  --cobalt-tint: #F6EADB;
  --ink-band: #0E1628;
  --ink-band-text: #EEF1F6;
  --ink-band-muted: #A9B1C2;
}
body { background: var(--paper); color: var(--ink); }
.btn-primary { background: #101A2E; border-color: #101A2E; color: #fff; }
.btn-primary:hover { background: #1B2440; border-color: #1B2440; }
.page-title { letter-spacing: -.028em; }
.e-bar { position: sticky; }