#sysadmin-day-main-container {
  font-size: 13px;
  font-family: work-sans-regular, Arial, Helvetica, sans-serif;
  color: #363636;
  overflow-x: hidden;
  position: relative;
}

#sysadmin-day-main-container h1,
#sysadmin-day-main-container h2,
#sysadmin-day-main-container h3,
#sysadmin-day-main-container h4,
#sysadmin-day-main-container h5,
#sysadmin-day-main-container h6 {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

#sysadmin-day-main-container .sad-fx {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}

#sysadmin-day-main-container .sad-section {
  position: relative;
  overflow: hidden;
}

#sysadmin-day-main-container .sad-hl-red {
  color: #05d3ff;
}

#sysadmin-day-main-container .sad-hl-red-dk {
  color: #d8342b;
}

#sysadmin-day-main-container .sad-hl-gold {
  color: #ffc857;
}

#sysadmin-day-main-container .sad-title-light {
  color: #1a2140;
}

#sysadmin-day-main-container .sad-title-dark {
  color: rgba(255, 255, 255, .94);
}

#sysadmin-day-main-container .sad-desc-light {
  color: #4a5568;
}

/* The letter is written by an AI, so it is set in the same UI sans a chat
   assistant renders in rather than a handwriting face. ChatGPT ships Söhne,
   which is licensed and cannot be redistributed here, so this is the system
   stack it falls back to: Segoe UI on Windows, SF Pro on macOS, Roboto on
   Android. Weight and tracking drop to normal — 600 with 1px of letter-spacing
   was tuned for a script face and reads as shouting in a UI sans. */
#sysadmin-day-main-container .sad-hand {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  letter-spacing: normal;
}

#sysadmin-day-main-container .sad-web {
  position: absolute;
  fill: none;
  stroke-linecap: round;
  pointer-events: none;
  z-index: 0;
}

#sysadmin-day-main-container .sad-web-radial {
  stroke: rgba(127, 176, 255, .34);
  stroke-width: 1.1;
}

#sysadmin-day-main-container .sad-web-radial-soft {
  stroke: rgba(47, 111, 237, .16);
  stroke-width: 1.1;
}

@keyframes sad-draw {
  from {
    stroke-dashoffset: 1400;
  }
  to {
    stroke-dashoffset: 0;
  }
}

#sysadmin-day-main-container .sad-web-draw {
  stroke-dasharray: 1400;
  animation: sad-draw 2.6s ease-out both;
}

#sysadmin-day-main-container .sad-banner-section {
  background: radial-gradient(64% 78% at 94% 8%, rgb(168 45 51 / 54%) 0%, rgba(216, 24, 34, 0) 68%), linear-gradient(104deg, #0a1240 0%, #14235f 40%, #4d2256 66%, #79323d 100%);
  color: rgba(255, 255, 255, .92);
}

#sysadmin-day-main-container .sad-banner-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .15) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

#sysadmin-day-main-container .sad-canopy {
  top: -70px;
  right: -90px;
  width: 460px;
  height: 460px;
  stroke: rgba(206, 224, 255, .46);
  opacity: .2;
}

#sysadmin-day-main-container .sad-canopy-sm {
  top: 38%;
  left: -110px;
  width: 300px;
  height: 300px;
  opacity: .8;
  stroke: rgba(255, 106, 94, .34);
}

#sysadmin-day-main-container .sad-banner-container {
  position: relative;
  text-align: center;
  padding: 70px 15px 40px;
}

#sysadmin-day-main-container .sad-banner-container > div {
  display: inline-block;
  vertical-align: middle;
}

#sysadmin-day-main-container .sad-banner-copy,
#sysadmin-day-main-container .sad-banner-panels {
  width: 45%;
  min-width: 280px;
  margin: 20px 12px;
  text-align: left;
}

#sysadmin-day-main-container .sad-banner-copy {
  max-width: 640px;
}

#sysadmin-day-main-container .sad-banner-panels {
  max-width: 590px;
}

#sysadmin-day-main-container .sad-banner-title {
  padding-top: 0;
  color: rgba(255, 255, 255, .96);
}

#sysadmin-day-main-container .sad-banner-lead {
  margin: 0 0 26px;
}

#sysadmin-day-main-container .sad-banner-ink {
  background-image: linear-gradient(96deg, #ff7a63 4%, #ff4438 58%, #e2102a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#sysadmin-day-main-container .sad-banner-code {
  color: #ff8f80;
  white-space: nowrap;
}

#sysadmin-day-main-container .sad-banner-punch {
  margin: 24px 0 0;
  font-size: 2.05em;
  line-height: 1.35em;
  color: rgba(255, 255, 255, .96);
}

#sysadmin-day-main-container .sad-banner-aside {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 1.02em;
  line-height: 1.62em;
  max-width: 56ch;
}

#sysadmin-day-main-container .sad-banner-slider {
  position: relative;
  width: 100%;
}

@media (max-width: 1120px) {
  #sysadmin-day-main-container .sad-banner-slider.feature-img {
    display: block !important;
  }
}

#sysadmin-day-main-container .sad-slider-frame {
  position: relative;
}

#sysadmin-day-main-container .sad-banner-slider .slide-wrapper {
  position: relative;
  overflow: visible !important;
}

#sysadmin-day-main-container .sad-banner-slider .slide-wrapper img {
  display: none;
}

#sysadmin-day-main-container .sad-banner-slider .slidesjs-container {
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(206, 224, 255, .3), 0 30px 60px -34px rgba(4, 8, 24, .9);
}

#sysadmin-day-main-container .sad-banner-slider .slidesjs-control {
  cursor: zoom-in;
}

#sysadmin-day-main-container .sad-banner-slider .slidesjs-control img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  cursor: zoom-in;
}

#sysadmin-day-main-container .sad-banner-slider .slidesjs-pagination {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

#sysadmin-day-main-container .sad-banner-slider .slidesjs-pagination li {
  margin: 0;
  pointer-events: auto;
}

#sysadmin-day-main-container .sad-banner-slider .slidesjs-pagination li a {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(127, 176, 255, .6);
  background: transparent;
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}

#sysadmin-day-main-container .sad-banner-slider .slidesjs-pagination li a.active,
#sysadmin-day-main-container .sad-banner-slider .slidesjs-pagination li a:hover.active {
  background: #ff4438;
  border-color: #ff4438;
  transform: scale(1.22);
}

#sysadmin-day-main-container .sad-banner-slider .slidesjs-pagination li a:focus-visible {
  outline: 2px solid #cfe1ff;
  outline-offset: 3px;
}

#sysadmin-day-main-container .sad-banner-slider .slidesjs-navigation {
  position: absolute;
  right: 6px;
  bottom: -6px;
  left: auto;
  top: auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 1.15em;
  line-height: 1;
  color: rgba(206, 224, 255, .7);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease;
}

#sysadmin-day-main-container .sad-banner-slider .slidesjs-previous {
  right: 34px;
}

#sysadmin-day-main-container .sad-banner-slider .slidesjs-navigation:hover {
  color: #ff4438;
}

#sysadmin-day-main-container .sad-banner-slider .slidesjs-navigation:focus-visible {
  outline: 2px solid #cfe1ff;
  outline-offset: 3px;
}

#sysadmin-day-main-container .sad-banner-slider .slidesjs-play,
#sysadmin-day-main-container .sad-banner-slider .slidesjs-stop {
  display: none !important;
}

#sysadmin-day-main-container .sad-banner-slider .close-btn {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgb(0 105 177 / 98%);
  color: #ffffff;
  font-size: 1.7em;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease;
}

#sysadmin-day-main-container .sad-banner-slider.expanded .close-btn {
  display: block;
}

#sysadmin-day-main-container .sad-banner-slider .close-btn:hover {
  background: #d8342b;
}

#sysadmin-day-main-container .sad-banner-slider .close-btn:focus-visible {
  outline: 2px solid #ffc857;
  outline-offset: 2px;
}

#sysadmin-day-main-container .sad-banner-slider.feature-img.expanded {
  position: fixed !important;
  top: 40px;
  left: 0;
  z-index: 12;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100vw !important;
  max-width: 100vw;
  height: calc(100vh - 40px) !important;
  background: rgba(6, 10, 26, .86);
  cursor: zoom-out;
}

/* 124vh caps the frame so a 16:9 image still fits vertically (0.5625 x 124 = 70vh,
   the same vertical budget the square layout had) */
#sysadmin-day-main-container .sad-banner-slider.expanded .sad-slider-frame {
  width: min(70%, 124vh);
  padding: 20px 20px 10px;
  border-radius: 14px;
  border: 1px solid rgba(206, 224, 255, .3);
  background: rgba(240, 248, 255, .1);
}

#sysadmin-day-main-container .sad-banner-slider.expanded .slidesjs-container,
#sysadmin-day-main-container .sad-banner-slider.expanded .slidesjs-control {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  cursor: zoom-out;
}

#sysadmin-day-main-container .sad-banner-slider.expanded .slidesjs-navigation {
  bottom: 50%;
  width: 48px;
  height: 48px;
  font-size: 3.15em;
  color: rgba(255, 255, 255, .55);
}

#sysadmin-day-main-container .sad-banner-slider.expanded .slidesjs-previous {
  left: -70px;
  right: auto;
}

#sysadmin-day-main-container .sad-banner-slider.expanded .slidesjs-navigation.slidesjs-next {
  right: -70px;
}

#sysadmin-day-main-container .sad-banner-slider.expanded .slidesjs-pagination {
  display: none;
}

/* ==========================================================================
   SECTION 2 — "Every Generation Has Its SysAdmins" — COMMENTED OUT.
   Covers the era band, the six tone accents, the generation chips and the
   story modal. The matching markup and JS are commented in the view.
   Split into two blocks only because CSS comments cannot nest and there is
   an inline comment partway through.
   ========================================================================== */

/*
#sysadmin-day-main-container .sad-era-section {
  background: #f7f9ff;
}

#sysadmin-day-main-container .sad-tone-terminal {
  --sad-accent: #c25a10;
  --sad-accent-soft: #fff1e6;
}

#sysadmin-day-main-container .sad-tone-nt {
  --sad-accent: #b03a7c;
  --sad-accent-soft: #fdedf6;
}

#sysadmin-day-main-container .sad-tone-virtual {
  --sad-accent: #2f6fed;
  --sad-accent-soft: #e9f0ff;
}

#sysadmin-day-main-container .sad-tone-cloud {
  --sad-accent: #0c7f99;
  --sad-accent-soft: #e6f7fb;
}

#sysadmin-day-main-container .sad-tone-teams {
  --sad-accent: #237a1d;
  --sad-accent-soft: #eaf7e8;
}

#sysadmin-day-main-container .sad-tone-ai {
  --sad-accent: #7a22b5;
  --sad-accent-soft: #f5eafd;
}

#sysadmin-day-main-container .sad-gens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 860px;
  margin: auto;
  --sad-accent: #2f6fed;
  --sad-accent-soft: #e9f0ff;
}

#sysadmin-day-main-container .sad-gen {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px 40px 12px 14px;
  border-radius: 12px;
  border: 1px solid #dbe4f7;
  background: #fff;
  box-shadow: 0 12px 22px -22px rgba(16, 26, 58, .9);
  color: #4a5568;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

*/

/* accent wash for the picked chip, kept off the text */

/*
#sysadmin-day-main-container .sad-gen::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--sad-accent);
  opacity: 0;
  transition: opacity .16s ease;
  pointer-events: none;
}

#sysadmin-day-main-container .sad-gen:hover {
  transform: translateY(-1px);
  border-color: var(--sad-accent);
  color: #1a2140;
  box-shadow: 0 18px 28px -24px rgba(16, 26, 58, .6);
}

#sysadmin-day-main-container .sad-gen:focus-visible {
  outline: 2px solid #2f6fed;
  outline-offset: 3px;
}

#sysadmin-day-main-container .sad-gen.is-picked {
  border-color: var(--sad-accent);
  color: #1a2140;
  box-shadow: 0 0 0 1px var(--sad-accent);
}

#sysadmin-day-main-container .sad-gen.is-picked::before {
  opacity: .07;
}

#sysadmin-day-main-container .sad-gen-art {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--sad-accent);
  transition: transform .16s ease;
}

#sysadmin-day-main-container .sad-gen:hover .sad-gen-art {
  transform: scale(1.1);
}

#sysadmin-day-main-container .sad-art-img {
  display: block;
  object-fit: contain;
}

#sysadmin-day-main-container .sad-gen-art .sad-art-img {
  width: 28px;
  height: 28px;
}

#sysadmin-day-main-container .sad-gmodal-art .sad-art-img {
  width: 32px;
  height: 32px;
}

#sysadmin-day-main-container .sad-gen-name {
  position: relative;
  flex: 1 1 auto;
  font-size: 1.08em;
  line-height: 1.25em;
  color: inherit;
}

#sysadmin-day-main-container .sad-gen-hint-ico {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 16px;
  height: 10px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--sad-accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity .16s ease;
}

#sysadmin-day-main-container .sad-gen:hover .sad-gen-hint-ico {
  opacity: 1;
}

#sysadmin-day-main-container .sad-gen.is-picked .sad-gen-hint-ico {
  opacity: 0;
}

#sysadmin-day-main-container .sad-gen-tick {
  position: absolute;
  top: 50%;
  right: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sad-accent);
  color: #fff;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .16s ease;
}

#sysadmin-day-main-container .sad-gen.is-picked .sad-gen-tick {
  opacity: 1;
}

#sysadmin-day-main-container .sad-gen-tick svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#sysadmin-day-main-container .sad-gmodal {
  position: fixed;
  inset: 0;
  z-index: 14;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(6, 10, 26, .82);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;

  --sad-accent: #2f6fed;
  --sad-accent-soft: #e9f0ff;
}

#sysadmin-day-main-container .sad-gmodal.is-open {
  opacity: 1;
  visibility: visible;
}

#sysadmin-day-main-container .sad-gmodal-card {
  position: relative;
  width: 100%;
  max-width: 660px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 50px 90px -40px rgba(4, 8, 24, .95);
  transform: translateY(26px) scale(.97);
  transition: transform .32s cubic-bezier(.2, .8, .3, 1);
  text-align: left;
}

#sysadmin-day-main-container .sad-gmodal.is-open .sad-gmodal-card {
  transform: none;
}

#sysadmin-day-main-container .sad-gmodal-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#sysadmin-day-main-container .sad-gmodal-head {
  position: relative;
  padding: 30px 34px 28px;
  background: linear-gradient(125deg, #0f1836 0%, #1b2a5e 54%, var(--sad-accent) 152%);
  color: #fff;
  overflow: hidden;
}

#sysadmin-day-main-container .sad-gmodal-web {
  position: absolute;
  right: -26px;
  top: -34px;
  width: 176px;
  height: 176px;
  fill: none;
  stroke: rgba(255, 255, 255, .2);
  stroke-width: 1.1;
  pointer-events: none;
}

#sysadmin-day-main-container .sad-gmodal-badge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

#sysadmin-day-main-container .sad-gmodal-art {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

#sysadmin-day-main-container .sad-gmodal-name {
  min-width: 0;
  font-size: .9em;
  letter-spacing: .22em;
  color: #ffc857;
}

#sysadmin-day-main-container .sad-gmodal-title {
  position: relative;
  color: #fff;
  margin-bottom: 0;
}

#sysadmin-day-main-container .sad-gmodal-body {
  position: relative;
  padding: 28px 34px 32px;
  overflow: hidden;
}

#sysadmin-day-main-container .sad-gmodal-halftone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 200px;
  background-image: radial-gradient(var(--sad-accent) 1.4px, transparent 1.4px);
  background-size: 12px 12px;
  opacity: .22;
  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 100% 100%, #000, transparent 70%);
  pointer-events: none;
}

#sysadmin-day-main-container .sad-gmodal-copy {
  position: relative;
  color: #4a5568;
}

#sysadmin-day-main-container .sad-gmodal-closer {
  position: relative;
  margin-top: 24px;
  padding: 15px 20px;
  border-left: 4px solid var(--sad-accent);
  border-radius: 0 12px 12px 0;
  background: var(--sad-accent-soft);
}

#sysadmin-day-main-container .sad-gmodal-cline {
  color: #1a2140;
  margin-bottom: 0;
}
*/
/* ===================== end of commented section 2 ===================== */

#sysadmin-day-main-container .sad-letter-section {
  background: radial-gradient(90% 120% at 24% 0%, #1c2b60 0%, #131f47 40%, #0d152f 100%);
  color: rgba(255, 255, 255, .92);
}

/* Hero illustration, dialled back so it reads as texture behind the copy.
   A real <img> like v1's .sad-ls-bg rather than a CSS background, so it can
   carry loading="lazy" and its intrinsic ratio. v1 anchors left; the copy sits
   left here, so this one anchors right. */
#sysadmin-day-main-container .sad-letter-bg {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 0;
  width: 62.7%;
  height: auto;
  transform: translateY(-50%);
  opacity: 0.38;
  pointer-events: none;
}

/* Below 1024 the two columns stack, so the band turns tall and narrow and a
   right-anchored panel would float in the middle of it. Pin the art full width
   to the top instead — height:auto keeps its own 2093x1221 ratio, so the whole
   illustration shows uncropped — and mask the lower edge into the gradient so
   there is no hard seam. */
@media (max-width: 1024px) {
  #sysadmin-day-main-container .sad-letter-bg {
    top: 0;
    width: 100%;
    transform: none;
    opacity: .32;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
}

/* On phones that full-width strip is only ~220px tall, which reduces the hero
   to a sliver. Give it a taller box and let object-fit crop to him instead. */
@media (max-width: 697px) {
  #sysadmin-day-main-container .sad-letter-bg {
    height: 78vw;
    object-fit: cover;
    object-position: 74% center;
    opacity: .28;
  }
}

#sysadmin-day-main-container .sad-spotlight {
  position: absolute;
  top: -120px;
  left: 6%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 87, .16), transparent 62%);
  pointer-events: none;
  z-index: 0;
}

#sysadmin-day-main-container .sad-letter-container {
  position: relative;
  z-index: 1;
}

#sysadmin-day-main-container .sad-letter-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;
  gap: 60px;
  text-align: left;
}

#sysadmin-day-main-container .sad-letter-copy {
  width: 44%;
  min-width: 280px;
  padding-left: 24px;
}

#sysadmin-day-main-container .sad-letter-lead {
  color: #c9d4e8;
  line-height: 1.8em;
  max-width: 46ch;
}

#sysadmin-day-main-container .sad-capsule-col {
  order: -1;
  position: relative;
  width: 40%;
  min-width: 300px;
  text-align: center;
  padding-top: 26px;
}

/* Out of flow like v1's .sad-mail-note, pinned to the envelope's top-right.
   The right offset tracks the shell's own centring (half of its 400px), so the
   note stays beside the envelope instead of drifting to the column edge when
   the column goes full width. */
#sysadmin-day-main-container .sad-note {
  position: absolute;
  top: 0;
  right: max(0px, calc(50% - 200px));
  z-index: 2;
  display: block;
  width: fit-content;
  font-size: 1.42em;
  color: #ffc857;
  transform: rotate(-7deg);
  padding-left: 50px;
}

#sysadmin-day-main-container .sad-note-arrow {
  position: absolute;
  left: 3px;
  top: 8px;
  width: 38px;
  height: 38px;
  fill: none;
  stroke: #ffc857;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: scaleX(-1.5);
}

/* Runs from the swing pivot (-46px, matching transform-origin) down to the top
   edge of the card, so it reads as the letter actually hanging from it. Sits
   inside the shell, so it swings with the envelope instead of staying rigid.
   The 7% must track .sad-env-card's top. */
#sysadmin-day-main-container .sad-thread {
  position: absolute;
  left: 50%;
  top: -46px;
  transform: translateX(-50%);
  width: 1px;
  height: calc(7% + 79px);
  background: linear-gradient(180deg, rgba(214, 230, 255, .05), rgba(214, 230, 255, .6));
}

#sysadmin-day-main-container .sad-capsule-shell {
  position: relative;
  width: 400px;
  max-width: 88%;
  min-height: 380px;
  margin: 0 auto;
  cursor: pointer;
  transform-origin: 50% -46px;
  animation: sad-hang 6.5s ease-in-out infinite;
}

@keyframes sad-hang {
  0%,
  100% {
    transform: rotate(-2.4deg);
  }
  50% {
    transform: rotate(2.4deg);
  }
}

/* Envelope, after the v1 .sad-env design. v1's panels are navy because they sit
   on a cream band; here the band is navy, so the paper tones are inverted:
   kraft body, lighter flap, near-white card, each a step apart so the folds
   still read. Layer order back(0) < card(1) < front(2) < seal(3). */
#sysadmin-day-main-container .sad-env-back {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 46%;
  bottom: 2%;
  border-radius: 16px;
  background: linear-gradient(180deg, #24338f, #1a2678);
  box-shadow: 0 44px 74px -44px rgba(4, 8, 24, .95);
}

#sysadmin-day-main-container .sad-env-card {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 3%;
  bottom: 20%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 26px 24px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 34px -16px rgba(4, 8, 24, .45);
}

/* the V is the flap's top edge, letting the card show through above it */
#sysadmin-day-main-container .sad-env-front {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 46%;
  bottom: 2%;
  z-index: 2;
  border-radius: 16px;
  background: linear-gradient(180deg, #2d3ea6 0%, #223192 100%);
  clip-path: polygon(0 0, 50% 34%, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .16);
  transition: background-color .25s ease;
}

#sysadmin-day-main-container .sad-capsule-shell:hover .sad-env-back {
  box-shadow: 0 48px 78px -42px rgba(87, 160, 255, 0.5);
}

#sysadmin-day-main-container .sad-capsule-title {
  color: #1a2140;
  font-size: 1.75em;
  line-height: 1.35em;
}

/* the hairline + diamond under the title in the reference; the white ring
   punches the gap in the rule rather than splitting it into two elements */
#sysadmin-day-main-container .sad-capsule-rule {
  position: relative;
  display: block;
  width: 74%;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, #dde3ee 22%, #dde3ee 78%, transparent);
}

#sysadmin-day-main-container .sad-capsule-rule::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #c3cde2;
  box-shadow: 0 0 0 4px #fff;
}

#sysadmin-day-main-container .sad-insert {
  position: relative;
}

#sysadmin-day-main-container .sad-insert::before {
  content: "Love";
  position: absolute;
  left: 90%;
  bottom: 1.55em;
  font-size: .78em;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(-16deg);
  color: #d8342b;
}

#sysadmin-day-main-container .sad-insert::after {
  content: "^";
  position: absolute;
  left: 122.3%;
  bottom: -.62em;
  transform: translateX(-50%);
  font-size: .72em;
  line-height: 1;
  color: #d8342b;
}

#sysadmin-day-main-container .sad-capsule-sub {
  color: #3d4457;
  margin: 0 auto;
  margin-top: 10px;
  font-family: 'work-sans-medium';
}

#sysadmin-day-main-container .sad-capsule-today {
  margin-top: 10px;
}

#sysadmin-day-main-container .sad-capsule-lead {
  display: inline-block;
  font-size: 1em;
  font-family: 'poppins-semibold';
  color: #2f6fed;
}

#sysadmin-day-main-container .sad-seal {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #e2564c, #b31f18);
  box-shadow: 0 10px 20px -8px rgba(4, 8, 24, .8), inset 0 -2px 6px rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .22s ease;
}

#sysadmin-day-main-container .sad-capsule-shell:hover .sad-seal {
  transform: translate(-50%, -50%) scale(1.08);
}

#sysadmin-day-main-container .sad-seal-art {
  width: 40px;
  height: 40px;
}

#sysadmin-day-main-container .sad-seal-legs {
  fill: none;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linecap: round;
}

#sysadmin-day-main-container .sad-seal-body {
  fill: #fff;
  stroke: none;
}

#sysadmin-day-main-container .sad-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 42px;
  padding: 11px 22px;
  border-radius: 30px;
  border: 1px solid #fff;
  background: #fff;
  color: #383838;
  letter-spacing: .13em;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

#sysadmin-day-main-container .sad-open-btn:hover {
  background: transparent;
  color: #fff;
  transform: translateY(-2px);
}

#sysadmin-day-main-container .sad-open-btn:focus-visible {
  outline: 2px solid #ffc857;
  outline-offset: 3px;
}

#sysadmin-day-main-container .sad-open-btn i {
  font-size: 1.2em;
  line-height: 1;
}

#sysadmin-day-main-container .sad-modal {
  position: fixed;
  inset: 0;
  z-index: 14;
  display: flex;
  align-items: flex-start;
  justify-content: center;

  padding: 96px 40px 48px;
  overflow-y: auto;

  overflow-x: hidden;
  overscroll-behavior: contain;
  background: rgba(6, 10, 26, .82);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}

#sysadmin-day-main-container .sad-modal.is-open {
  opacity: 1;
  visibility: visible;
  cursor: zoom-out;
}

#sysadmin-day-main-container .sad-letter-inner {
  position: relative;
  width: 100%;
  max-width: 1239px;
  margin: 0 auto;
  cursor: auto;
  border-radius: 10px;
  padding: 17px 50px 13px 70px;
  color: #26314f;
  text-align: left;
  background: repeating-linear-gradient(#fdf8ec 0 31px, #e4dcc652 31px 32px), #fdf8ec;
  border: 1px solid #e7ddc6;
  box-shadow: 0 46px 88px -46px rgba(4, 8, 24, .95), 0 2px 0 rgba(0, 0, 0, .07);
  transform: translateY(26px) rotate(-.4deg);
  transition: transform .32s cubic-bezier(.2, .8, .3, 1);
}

#sysadmin-day-main-container .sad-modal.is-open .sad-letter-inner {
  transform: rotate(-.4deg);
}

#sysadmin-day-main-container .sad-letter-inner::before {
  content: "";
  position: absolute;
  left: 44px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(216, 52, 43, .4);
}

#sysadmin-day-main-container .sad-letter-to {
  font-size: 2em;
  line-height: 32px;
  margin-bottom: 8px;
  color: #1e2c60;
}

#sysadmin-day-main-container .sad-letter-body {
  font-size: 1.07em;
}

#sysadmin-day-main-container .sad-letter-body p + p {
  margin-top: 17px;
}

#sysadmin-day-main-container .sad-letter-em {
  color: #d8342b;
}

#sysadmin-day-main-container .sad-letter-sig {
  margin-top: 32px;
  font-size: 2.08em;
  line-height: 32px;
  color: #c62b22;
}

#sysadmin-day-main-container .sad-letter-ps {
  margin-top: 32px;
  font-size: 1.54em;
  line-height: 32px;
  color: #5b6079;
}

#sysadmin-day-main-container .sad-letter-ps-link {
  color: #d8342b;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#sysadmin-day-main-container .sad-letter-ps-link:hover {
  color: #1e2c60;
}

#sysadmin-day-main-container .sad-letter-close {
  position: absolute;
  top: 82px;
  right: max(24px, calc(39% - 425px));
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  background: #1e2c60;
  color: #fff;
  font-size: 1.69em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .6);
  transition: background-color .2s ease, transform .15s ease;
}

#sysadmin-day-main-container .sad-letter-close:hover {
  background: #d8342b;
  transform: scale(1.06);
}

#sysadmin-day-main-container .sad-letter-close:focus-visible {
  outline: 2px solid #ffc857;
  outline-offset: 2px;
}

#sysadmin-day-main-container .sad-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: background-color .2s ease;
}

#sysadmin-day-main-container .sad-modal-close:hover {
  background: #d8342b;
}

#sysadmin-day-main-container .sad-modal-close:focus-visible {
  outline: 2px solid #ffc857;
  outline-offset: 2px;
}

#sysadmin-day-main-container .sad-pod-section {
  background: linear-gradient(180deg, #eef3fd 0%, #f7f9ff 100%);
}

#sysadmin-day-main-container .sad-pod-web {
  top: 30px;
  right: -120px;
  width: 300px;
  height: 300px;
}

#sysadmin-day-main-container .sad-pod-container {
  position: relative;
  z-index: 1;
}

#sysadmin-day-main-container .sad-title-emoji {
  font-size: 1.15em;
  line-height: 1;
  vertical-align: -.06em;
}

#sysadmin-day-main-container .sad-pod-callout {
  font-size: 1.45em;
  line-height: 1.5em;
  letter-spacing: .01em;
  color: #0068b7;
  margin-top: 14px;
}

#sysadmin-day-main-container .sad-pods {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}

#sysadmin-day-main-container .sad-pod {
  display: inline-block;
  padding: 6px;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 1;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
}

#sysadmin-day-main-container .sad-cookie-glyph {
  display: inline-block;
  font-size: 4.31em;
  line-height: 1;
}

#sysadmin-day-main-container .sad-pod:hover {
  transform: scale(1.12) rotate(6deg);
}

#sysadmin-day-main-container .sad-pod:focus-visible {
  outline: 2px solid #2f6fed;
  outline-offset: 4px;
  border-radius: 12px;
}

#sysadmin-day-main-container .sad-pod.is-open {
  animation: sad-crack .55s ease forwards;
  opacity: .55;
}

@keyframes sad-crack {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.22) rotate(-9deg);
  }
  60% {
    transform: scale(.84) rotate(7deg);
  }
  100% {
    transform: scale(.9);
  }
}

#sysadmin-day-main-container .sad-pod.is-active {
  opacity: 1;
  filter: drop-shadow(0 6px 12px rgba(16, 26, 58, .38)) drop-shadow(0 0 14px rgba(47, 111, 237, .7));
}

#sysadmin-day-main-container .sad-strip {
  position: relative;
  margin-top: 40px;
}

#sysadmin-day-main-container .sad-strip:empty {
  display: none;
}

#sysadmin-day-main-container .sad-paper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 600px;
  padding: 26px 54px;
  border-radius: 5px;
  color: #d8342b;
  background:
    repeating-linear-gradient(180deg, #fffdf6 0 5px, #faf3e2 5px 6px),
    linear-gradient(180deg, #fffef9, #f3ead2);
  box-shadow: 0 24px 46px -24px rgba(16, 26, 58, .55), inset 0 0 0 1px #e6dabb, 0 2px 0 rgba(16, 26, 58, .1);
  transform: scaleX(.04);
  transform-origin: center;
  opacity: 0;
  transition: transform .5s cubic-bezier(.55, 0, .2, 1), opacity .3s ease;
}

#sysadmin-day-main-container .sad-strip.is-shown .sad-paper {
  transform: scaleX(1);
  opacity: 1;
}

#sysadmin-day-main-container .sad-paper::before,
#sysadmin-day-main-container .sad-paper::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 70%;
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(180deg, #f0e6cb, #e2d5b2);
  box-shadow: inset 0 0 0 1px #d8caa6;
}

#sysadmin-day-main-container .sad-paper::before { left: -5px; }
#sysadmin-day-main-container .sad-paper::after { right: -5px; }

#sysadmin-day-main-container .sad-fwish {
  display: block;

  margin-bottom: 0;
  font-size: 1.62em;
  line-height: 1.4em;
  text-wrap: balance;
  opacity: 0;
  transition: opacity .4s ease .22s;
}

#sysadmin-day-main-container .sad-fnote {
  display: block;
  margin-top: 10px;
  line-height: 1.7em;
  color: #7c6a48;
  opacity: 0;
  transition: opacity .4s ease .36s;
}

#sysadmin-day-main-container .sad-strip.is-shown .sad-fwish,
#sysadmin-day-main-container .sad-strip.is-shown .sad-fnote {
  opacity: 1;
}

@media (max-width: 1024px) {
  #sysadmin-day-main-container .sad-letter-copy,
  #sysadmin-day-main-container .sad-capsule-col {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  #sysadmin-day-main-container .sad-letter-copy {
    text-align: center;
  }

  #sysadmin-day-main-container .sad-letter-lead {
    margin: 0 auto;
  }

  #sysadmin-day-main-container .sad-capsule-col {
    order: 0;
    margin-top: 40px;
  }

  /* section 2 commented out
  #sysadmin-day-main-container .sad-gens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  */
}

@media (max-width: 767px) {
  /* section 2 commented out
  #sysadmin-day-main-container .sad-gens {
    grid-template-columns: 1fr;
  }
  */

  #sysadmin-day-main-container .sad-pods {
    gap: 16px;
  }

  #sysadmin-day-main-container .sad-cookie-glyph {
    font-size: 3.2em;
  }

  /* section 2 commented out
  #sysadmin-day-main-container .sad-gmodal-head {
    padding: 24px 20px 22px;
  }

  #sysadmin-day-main-container .sad-gmodal-title {
    font-size: 1.75em;
  }

  #sysadmin-day-main-container .sad-gmodal-body {
    padding: 22px 20px 26px;
  }
  */
}

@media (max-width: 697px) {
  #sysadmin-day-main-container .sad-banner-container {
    padding: 50px 15px 84px;
  }

  #sysadmin-day-main-container .sad-banner-container > .sad-banner-copy,
  #sysadmin-day-main-container .sad-banner-container > .sad-banner-panels {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
  }

  #sysadmin-day-main-container .sad-banner-lead,
  #sysadmin-day-main-container .sad-banner-aside {
    margin-left: auto;
    margin-right: auto;
  }

  #sysadmin-day-main-container .sad-canopy-sm {
    display: none;
  }

  #sysadmin-day-main-container .sad-canopy {
    width: 290px;
    height: 290px;
    top: -50px;
    right: -80px;
    opacity: .6;
  }

  #sysadmin-day-main-container .sad-paper {
    padding: 18px 26px;
  }

  #sysadmin-day-main-container .sad-fwish {
    font-size: 1.3em;
  }

  #sysadmin-day-main-container .sad-modal {
    padding: 90px 14px 32px;
  }

  #sysadmin-day-main-container .sad-letter-close {
    top: 76px;
    right: 14px;
  }

  #sysadmin-day-main-container .sad-letter-inner {
    padding: 26px 26px 26px 42px;
  }

  #sysadmin-day-main-container .sad-letter-inner::before {
    left: 26px;
  }

  #sysadmin-day-main-container .sad-letter-to {
    font-size: 1.62em;
  }

  #sysadmin-day-main-container .sad-letter-body {
    font-size: 1.46em;
  }

  #sysadmin-day-main-container .sad-letter-sig {
    font-size: 1.69em;
  }

  #sysadmin-day-main-container .sad-letter-ps {
    font-size: 1.23em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sysadmin-day-main-container .sad-web-draw,
  #sysadmin-day-main-container .sad-capsule-shell,
  #sysadmin-day-main-container .sad-pod.is-open {
    animation: none;
  }

  #sysadmin-day-main-container .sad-web-draw {
    stroke-dasharray: none;
  }

  #sysadmin-day-main-container .sad-paper,
  #sysadmin-day-main-container .sad-pod /* section 2 commented out:,
  #sysadmin-day-main-container .sad-gen,
  #sysadmin-day-main-container .sad-gen-art,
  #sysadmin-day-main-container .sad-gmodal-card */ {
    transition: none;
  }

  #sysadmin-day-main-container .sad-letter-inner {
    transition: none;
    transform: rotate(-.4deg);
  }
}