@font-face { font-family:"Lilita One"; src:url('assets/inbox-pixel-v2/fonts/LilitaOne-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Nunito Sans"; src:url('assets/inbox-pixel-v2/fonts/NunitoSans-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Nunito Sans"; src:url('assets/inbox-pixel-v2/fonts/NunitoSans-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Nunito Sans"; src:url('assets/inbox-pixel-v2/fonts/NunitoSans-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Nunito Sans"; src:url('assets/inbox-pixel-v2/fonts/NunitoSans-Black.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"Silkscreen"; src:url('assets/inbox-pixel-v2/fonts/Silkscreen-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Silkscreen"; src:url('assets/inbox-pixel-v2/fonts/Silkscreen-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

/* V74 — Club Post: bright, toy-like pixel management desk. */
body.v20-ui {
  /* Keep the 16:9 game canvas untouched; only bleed its neutral surface into widescreen gutters. */
  background: linear-gradient(180deg, #f5f8fb 0%, var(--vm-bg, #edf2f6) 100%) !important;
}

body.v20-ui:has(.office-screen.is-active) {
  background:
    #078bdc url('assets/inbox-pixel-v2/office-viewport-landscape.png') center bottom / cover no-repeat fixed !important;
}

body.v20-ui:has(.office-screen.is-active)::before {
  content: "";
  position: fixed;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  height: calc(min(100vw, 177.777vh) * .0475);
  background: #fff;
  box-shadow: 0 1px 0 rgba(42, 62, 83, .08);
  pointer-events: none;
}

body.v20-ui:has(.office-screen.is-active) .app-root {
  position: relative;
  z-index: 1;
}

body.v20-ui .office-screen {
  --px-blue: #0878df;
  --px-blue-2: #0459bb;
  --px-cyan: #11c9ff;
  --px-navy: #072a65;
  --px-ink: #072653;
  --px-yellow: #ffe82d;
  --px-lime: #4be016;
  --px-paper: #fffdf2;
  --office-global-bar: var(--vm-topbar-h, clamp(48px, 3.35vw, 66px));
  font-family: "Nunito Sans", Arial, sans-serif;
  color: var(--px-ink);
  background: #0795ec url('assets/inbox-pixel-v2/office-world-bg.png') center/cover no-repeat;
}

body.v20-ui .office-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 208, 255, .12), transparent 22%, transparent 80%, rgba(0, 57, 139, .2));
  box-shadow: inset 0 0 0 2px rgba(119, 239, 255, .55), inset 0 0 34px rgba(0, 39, 113, .32);
  z-index: 1;
}

body.v20-ui .office-screen > .office-bg,
body.v20-ui .office-screen > .office-shade {
  display: none !important;
}

body.v20-ui .office-screen > .career-topbar {
  display: grid !important;
}

body.v20-ui .office-shell {
  position: absolute !important;
  z-index: 2;
  inset: calc(var(--office-global-bar) + 8px) .8% 1.4% !important;
  display: grid !important;
  grid-template-rows: 11.3% 5.4% minmax(0, 1fr) !important;
  gap: 5px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.v20-ui .office-heading {
  position: relative;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  padding: 7px 13px 6px 24px !important;
  border: 3px solid var(--px-cyan) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(90deg, rgba(0, 90, 208, .94) 0%, rgba(1, 126, 232, .35) 35%, rgba(0, 91, 196, .18) 70%, rgba(0, 92, 205, .78) 100%),
    url('assets/inbox-pixel-v2/office-header-campus.png') center 46%/cover no-repeat !important;
  color: white !important;
  box-shadow: inset 0 0 0 2px rgba(5, 44, 116, .65), 0 3px 0 #05265f, 0 5px 0 rgba(24, 210, 255, .85) !important;
  overflow: hidden !important;
}

body.v20-ui .office-heading::before {
  content: "★★★";
  position: absolute;
  left: 24px;
  top: 7px;
  color: var(--px-yellow);
  font: 700 15px/1 "Silkscreen", monospace;
  letter-spacing: -1px;
  -webkit-text-stroke: 1px #6f4100;
  text-shadow: 1px 2px 0 #563300;
}

body.v20-ui .office-title-lockup {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 13px !important;
  align-items: center !important;
  margin-top: 11px;
}

body.v20-ui .office-heading-badge {
  width: 64px !important;
  height: 64px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  filter: drop-shadow(0 3px 0 #03295c) drop-shadow(0 0 1px white);
}

body.v20-ui .office-heading-badge img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  transform: scale(1.72) !important;
  transform-origin: center !important;
}

body.v20-ui .office-title-lockup .eyebrow {
  color: var(--px-yellow) !important;
  font: 700 11px/1 "Silkscreen", monospace !important;
  letter-spacing: .02em !important;
  text-shadow: 1px 2px 0 #1a3872;
}

body.v20-ui .office-title-lockup h2 {
  margin: 1px 0 2px !important;
  color: white !important;
  font: 400 clamp(25px, 2.1vw, 39px)/.92 "Lilita One", Impact, sans-serif !important;
  letter-spacing: .015em !important;
  text-transform: uppercase;
  -webkit-text-stroke: 1px #07306c;
  text-shadow: 0 3px 0 #06265e, 2px 0 0 #06265e, -2px 0 0 #06265e !important;
}

body.v20-ui .office-title-lockup p {
  color: white !important;
  font: 800 12px/1.2 "Nunito Sans", sans-serif !important;
  text-shadow: 1px 2px 0 #06408d;
}

body.v20-ui .office-confidence-mini {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: minmax(135px, 1fr) 66px;
  grid-template-rows: auto auto auto;
  min-width: 248px !important;
  min-height: 80px !important;
  padding: 9px 10px 8px 17px !important;
  overflow: hidden !important;
  border: 2px solid #06265d !important;
  border-radius: 12px !important;
  background:
    linear-gradient(112deg, rgba(255,255,255,.98), rgba(245,252,255,.98) 64%, rgba(215,243,252,.98)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.95),
    inset 0 -8px 16px rgba(38,132,175,.09),
    0 4px 0 #062151,
    0 0 0 2px rgba(25,211,255,.88) !important;
}

body.v20-ui .office-confidence-mini::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 5px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(var(--px-cyan), #066ccc 58%, var(--px-yellow));
  box-shadow: 1px 0 0 rgba(4,38,91,.4);
}

body.v20-ui .office-confidence-mini > div:first-child {
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  transform: translateY(4px) !important;
}

body.v20-ui .office-confidence-mini .confidence-ring {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  justify-self: center;
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 3px solid white;
  border-radius: 50%;
  background: conic-gradient(from -62deg, #112f59 0 17%, #fff02c 17% 83%, #f0bd09 83% 100%) !important;
  color: var(--px-yellow);
  box-shadow: 0 0 0 2px var(--px-navy), 0 3px 0 rgba(4,31,74,.45), inset 0 0 0 1px rgba(255,255,255,.65) !important;
}

body.v20-ui .office-confidence-mini .confidence-ring::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 32%, #17487c, #072957 70%) !important;
  box-shadow: inset 0 -3px 0 rgba(0,12,43,.42) !important;
}

body.v20-ui .office-confidence-mini .confidence-ring b {
  position: relative !important;
  z-index: 2 !important;
  color: var(--px-yellow) !important;
  font: 400 18px/1 "Lilita One", Impact, sans-serif !important;
  text-shadow: 0 2px 0 #031b43 !important;
}

body.v20-ui .office-confidence-mini span {
  color: var(--px-navy) !important;
  font: 700 10px/1 "Silkscreen", monospace !important;
  letter-spacing: .02em !important;
}

body.v20-ui .office-confidence-mini strong {
  color: #0754be !important;
  font: 400 28px/.92 "Lilita One", Impact, sans-serif !important;
  text-shadow: 0 1px 0 white !important;
}

body.v20-ui .office-confidence-mini small {
  color: #008a5d !important;
  font: 900 11px/1 "Nunito Sans", sans-serif !important;
  text-transform: uppercase;
}

body.v20-ui .office-subnav {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 3px solid var(--px-navy) !important;
  border-radius: 10px !important;
  background: var(--px-blue-2) !important;
  box-shadow: inset 0 0 0 2px var(--px-cyan), 0 3px 0 #061d50 !important;
  overflow: hidden;
}

body.v20-ui .office-subnav button {
  border: 0 !important;
  border-right: 2px solid var(--px-navy) !important;
  border-radius: 0 !important;
  background: linear-gradient(#096bd2, #034aa5) !important;
  color: white !important;
  font: 400 clamp(12px, .9vw, 17px)/1 "Lilita One", Impact, sans-serif !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #052557;
  box-shadow: inset 0 1px 0 rgba(90, 220, 255, .85), inset 0 -3px 0 rgba(0, 34, 107, .5) !important;
}

body.v20-ui .office-subnav button:last-child { border-right: 0 !important; }

body.v20-ui .office-subnav button.is-active,
body.v20-ui .office-subnav button[aria-selected="true"] {
  color: var(--px-yellow) !important;
  background: linear-gradient(#087de9, #0450b2) !important;
  box-shadow: inset 0 0 0 2px var(--px-yellow), inset 0 -4px 0 #f4a900 !important;
  text-shadow: 0 2px 0 #4f3500 !important;
}

body.v20-ui .office-stage {
  min-height: 0 !important;
  padding: 4px !important;
  border: 3px solid var(--px-navy) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #0789eb, #0262c5) !important;
  box-shadow: inset 0 0 0 2px var(--px-cyan), 0 3px 0 #051f52 !important;
  overflow: hidden !important;
}

body.v20-ui #officeInboxPane .office-inbox-layout {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(390px, 34%) minmax(0, 66%) !important;
  gap: 5px !important;
  background: transparent !important;
}

body.v20-ui .office-message-column,
body.v20-ui .office-message-reader {
  min-height: 0 !important;
  border: 3px solid var(--px-navy) !important;
  border-radius: 9px !important;
  background: #edf7ff !important;
  box-shadow: inset 0 0 0 2px var(--px-cyan) !important;
  overflow: hidden !important;
}

body.v20-ui .office-message-column {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

body.v20-ui .office-message-toolbar {
  position: relative;
  z-index: 2;
  padding: 10px 10px 8px !important;
  border: 0 !important;
  border-bottom: 3px solid var(--px-navy) !important;
  background: linear-gradient(155deg, #0a98f1, #0668cf) !important;
  box-shadow: inset 0 0 0 2px rgba(75, 222, 255, .78) !important;
}

body.v20-ui .office-message-toolbar::before {
  content: "✉";
  position: absolute;
  left: 12px;
  top: 9px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid var(--px-navy);
  border-radius: 50%;
  background: var(--px-yellow);
  color: var(--px-navy);
  font-size: 18px;
  box-shadow: inset 0 -3px 0 #e5a900, 0 2px 0 #052654;
}

body.v20-ui .office-message-toolbar > div:first-child {
  min-height: 35px !important;
  padding-left: 40px !important;
}

body.v20-ui .office-message-toolbar .office-kicker {
  color: var(--px-yellow) !important;
  font: 700 9px/1 "Silkscreen", monospace !important;
  text-shadow: 1px 2px 0 #04509c;
}

body.v20-ui .office-message-toolbar h3 {
  color: white !important;
  font: 400 clamp(22px, 1.55vw, 30px)/1 "Lilita One", Impact, sans-serif !important;
  text-transform: uppercase;
  -webkit-text-stroke: 1px #083174;
  text-shadow: 0 2px 0 #05265c !important;
}

body.v20-ui .office-inbox-filters {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  margin-top: 6px !important;
}

body.v20-ui .office-inbox-filters button {
  min-height: 30px !important;
  padding: 4px 7px !important;
  border: 2px solid #063477 !important;
  border-radius: 5px !important;
  background: linear-gradient(#087ae0, #0356b5) !important;
  color: white !important;
  font: 700 9px/1 "Silkscreen", monospace !important;
  box-shadow: inset 0 1px 0 rgba(129, 236, 255, .82), 0 2px 0 #052559 !important;
}

body.v20-ui .office-inbox-filters button.is-active {
  border-color: #1a8300 !important;
  background: linear-gradient(#5bed1d, #27ba05) !important;
  color: white !important;
  box-shadow: inset 0 2px 0 #b8ff65, inset 0 -3px 0 #178300, 0 2px 0 #06335d !important;
  text-shadow: 0 1px 0 #0c5f00;
}

body.v20-ui .office-message-list {
  min-height: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: auto;
  scrollbar-color: var(--px-lime) var(--px-blue-2);
  padding: 7px 7px 20px !important;
  background: linear-gradient(90deg, #ccebff, #f7fcff 5%, #f7fcff 95%, #b7e0f8) !important;
}

body.v20-ui .office-message-list::-webkit-scrollbar { width: 13px; }
body.v20-ui .office-message-list::-webkit-scrollbar-track { background: var(--px-blue-2); border-left: 2px solid var(--px-navy); }
body.v20-ui .office-message-list::-webkit-scrollbar-thumb { background: var(--px-lime); border: 2px solid var(--px-navy); border-radius: 8px; }

body.v20-ui .office-sim-briefing {
  margin: 0 0 7px !important;
  padding: 9px 10px 10px !important;
  border: 2px solid #6c9dc6 !important;
  border-radius: 8px !important;
  background: white !important;
  box-shadow: 0 3px 0 #9cc0d9, inset 0 0 12px #eaf7ff !important;
}

body.v20-ui .office-sim-briefing header {
  display: grid !important;
  grid-template-columns: 45px 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 7px !important;
}

body.v20-ui .office-sim-briefing-badge {
  width: 45px !important;
  height: 45px !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
}

body.v20-ui .office-sim-briefing-badge > *,
body.v20-ui .office-sim-briefing-badge img,
body.v20-ui .office-sim-briefing-badge .avatar-art {
  width: 43px !important;
  height: 43px !important;
  max-width: 43px !important;
  max-height: 43px !important;
  object-fit: contain !important;
  image-rendering: pixelated;
}

body.v20-ui .office-sim-briefing-badge img.smart-avatar {
  position: absolute !important;
  left: 50% !important;
  top: -10% !important;
  width: 175% !important;
  height: 175% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  transform: translateX(-50%) !important;
  transform-origin: center top !important;
}

body.v20-ui .office-sim-briefing header > span:nth-child(2) span,
body.v20-ui .office-sim-lane-label {
  color: #0b417e !important;
  font: 700 8px/1 "Silkscreen", monospace !important;
}

body.v20-ui .office-sim-briefing header strong {
  display: block;
  margin-top: 4px;
  font: 900 15px/1 "Nunito Sans", sans-serif !important;
}

body.v20-ui .office-sim-briefing header time {
  align-self: start;
  color: #0b417e !important;
  font: 700 8px/1 "Silkscreen", monospace !important;
}

body.v20-ui .office-sim-briefing-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}

body.v20-ui .office-sim-briefing-grid > div {
  min-width: 0;
  padding: 7px 8px !important;
  border: 1px solid #89b4d7 !important;
  border-radius: 6px !important;
  background: #fbfdff !important;
  box-shadow: 0 2px 0 #c3d9e9 !important;
}

body.v20-ui .office-sim-briefing-grid span {
  color: #0a579c !important;
  font: 700 7px/1 "Silkscreen", monospace !important;
}

body.v20-ui .office-sim-briefing-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--px-ink) !important;
  font: 900 12px/1.05 "Nunito Sans", sans-serif !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v20-ui .office-sim-lane-label {
  display: flex !important;
  justify-content: space-between !important;
  padding: 3px 6px 5px !important;
}

body.v20-ui .v38-mail-row {
  position: relative !important;
  min-height: 92px !important;
  display: grid !important;
  grid-template-columns: 55px minmax(0, 1fr) !important;
  gap: 9px !important;
  margin: 0 0 4px !important;
  padding: 8px 10px !important;
  border: 2px solid #7ba4c3 !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: var(--px-ink) !important;
  box-shadow: 0 2px 0 #a6c3d8 !important;
  text-align: left !important;
}

body.v20-ui .v38-mail-row::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 2px;
  background: #e8483d;
}

body.v20-ui .v38-mail-row.is-selected {
  border-color: #3c8dbb !important;
  background: linear-gradient(100deg, #fffbe2, #fff98f) !important;
  box-shadow: inset 4px 0 0 var(--px-lime), 0 3px 0 #68a6c5 !important;
}

body.v20-ui .v38-mail-row.is-selected::after {
  content: "VIEWING";
  position: absolute;
  right: 9px;
  top: 7px;
  color: #07588c;
  font: 700 7px/1 "Silkscreen", monospace;
}

body.v20-ui .v38-mail-portrait {
  width: 52px !important;
  height: 58px !important;
  display: block !important;
  align-self: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.v20-ui .v37-mail-avatar,
body.v20-ui .v37-mail-avatar .avatar-art {
  width: 50px !important;
  height: 50px !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
  border-radius: 7px !important;
  background: linear-gradient(#eefaff, #cbeaff) !important;
  image-rendering: pixelated;
}

body.v20-ui .v37-mail-avatar img {
  position: absolute !important;
  left: 50% !important;
  top: -10% !important;
  width: 175% !important;
  height: 175% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  transform: translateX(-50%) !important;
  transform-origin: center top !important;
  image-rendering: pixelated;
}

body.v20-ui .v38-mail-emblem {
  right: -4px !important;
  bottom: -2px !important;
  width: 25px !important;
  height: 25px !important;
  border: 2px solid #07346b !important;
  border-radius: 6px !important;
  background: var(--px-blue-2) !important;
  color: white !important;
  box-shadow: 0 2px 0 #05214d !important;
}

body.v20-ui .v37-mail-copy { min-width: 0 !important; }

body.v20-ui .v38-mail-department {
  color: #087194 !important;
  font: 700 7px/1.15 "Silkscreen", monospace !important;
  letter-spacing: 0 !important;
}

body.v20-ui .v37-mail-sender {
  margin-top: 1px !important;
  color: #0b3c77 !important;
  font: 900 10px/1 "Nunito Sans", sans-serif !important;
}

body.v20-ui .v37-mail-copy > strong {
  display: block !important;
  color: var(--px-ink) !important;
  font: 900 14px/1.05 "Nunito Sans", sans-serif !important;
}

body.v20-ui .v37-mail-snippet {
  display: block !important;
  margin-top: 2px !important;
  color: #315879 !important;
  font: 700 9px/1.15 "Nunito Sans", sans-serif !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.v20-ui .office-sim-row-context { display: none !important; }

body.v20-ui .v37-mail-meta {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 4px !important;
}

body.v20-ui .v37-mail-meta time {
  color: #64819a !important;
  font: 800 8px/1 "Nunito Sans", sans-serif !important;
}

body.v20-ui .mail-priority {
  padding: 2px 5px !important;
  border: 1px solid currentColor !important;
  border-radius: 6px !important;
  background: white !important;
  color: #ee4b39 !important;
  font: 700 6px/1 "Silkscreen", monospace !important;
}

body.v20-ui .office-routine-toggle {
  border: 2px solid #367cae !important;
  border-radius: 6px !important;
  background: #dff4ff !important;
  color: var(--px-ink) !important;
}

body.v20-ui .office-message-reader {
  overflow-y: auto !important;
  scrollbar-color: var(--px-lime) var(--px-blue-2);
}

body.v20-ui .v38-letter {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0878df url('assets/inbox-pixel-v2/office-world-bg.png') center bottom / 100% auto no-repeat !important;
  box-shadow: none !important;
}

body.v20-ui .office-sim-scene {
  position: relative !important;
  min-height: clamp(178px, 21vh, 245px) !important;
  padding: 13px 16px 10px !important;
  border: 0 !important;
  border-bottom: 4px solid var(--px-navy) !important;
  background-image: linear-gradient(90deg, rgba(0, 16, 42, .82) 0%, rgba(0, 22, 54, .66) 40%, rgba(0, 22, 54, .12) 70%), var(--office-scene) !important;
  background-position: center !important;
  background-size: cover !important;
  color: white !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 2px rgba(48, 218, 255, .62) !important;
}

body.v20-ui .office-sim-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 128, 223, .08), transparent 68%, rgba(0, 5, 21, .34));
}

body.v20-ui .v38-letter-eyebrow,
body.v20-ui .v38-letter-intro,
body.v20-ui .v38-letter-address { position: relative; z-index: 1; }

body.v20-ui .v38-letter-eyebrow {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

body.v20-ui .v38-letter-eyebrow > span:first-child {
  color: white !important;
  font: 700 9px/1 "Silkscreen", monospace !important;
  text-shadow: 1px 2px 0 #041d43;
}

body.v20-ui .v37-mail-state {
  padding: 7px 9px !important;
  border: 2px solid #8eeaff !important;
  border-radius: 5px !important;
  background: #0754b1 !important;
  color: white !important;
  font: 800 10px/1 "Nunito Sans", sans-serif !important;
  box-shadow: 0 2px 0 #031f52 !important;
}

body.v20-ui .v38-letter-intro {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  min-height: 110px !important;
}

body.v20-ui .v38-letter-title > span {
  color: #cbf4ff !important;
  font: 800 10px/1 "Nunito Sans", sans-serif !important;
}

body.v20-ui .v38-letter-title h3 {
  max-width: 760px !important;
  margin: 4px 0 7px !important;
  color: white !important;
  font: 400 clamp(27px, 2.5vw, 45px)/.95 "Lilita One", Impact, sans-serif !important;
  letter-spacing: .01em !important;
  -webkit-text-stroke: 1px #041f4d;
  text-shadow: 0 3px 0 #031a3f, 2px 0 0 #031a3f !important;
}

body.v20-ui .v38-sender-line strong,
body.v20-ui .v38-sender-line span {
  color: white !important;
  font: 800 11px/1.2 "Nunito Sans", sans-serif !important;
}

body.v20-ui .office-sim-cast {
  display: flex !important;
  align-items: end !important;
  gap: 8px !important;
  padding-right: 8px;
}

body.v20-ui .office-sim-actor {
  display: grid !important;
  justify-items: center !important;
  gap: 3px !important;
}

body.v20-ui .office-sim-actor-portrait {
  position: relative !important;
  width: 72px !important;
  height: 72px !important;
  display: grid !important;
  place-items: center !important;
  border: 3px solid var(--px-yellow) !important;
  border-radius: 7px !important;
  background: rgba(8, 84, 152, .92) !important;
  box-shadow: inset 0 0 0 2px #052753, 0 4px 0 #02172f !important;
  overflow: hidden !important;
  contain: paint !important;
  isolation: isolate !important;
  clip-path: inset(0 round 5px) !important;
}

body.v20-ui .office-sim-actor-portrait .avatar-art,
body.v20-ui .office-sim-actor-portrait .avatar-art {
  width: 68px !important;
  height: 68px !important;
  position: relative !important;
  overflow: hidden !important;
  image-rendering: pixelated;
}

body.v20-ui .office-sim-actor-portrait img.smart-avatar {
  position: absolute !important;
  left: 50% !important;
  top: -10% !important;
  width: 175% !important;
  height: 175% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  transform: translateX(-50%) !important;
  transform-origin: center top !important;
  image-rendering: pixelated;
  clip-path: none !important;
}

body.v20-ui .office-sim-actor small {
  max-width: 82px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(3, 35, 78, .86);
  color: white !important;
  font: 700 8px/1 "Nunito Sans", sans-serif !important;
  text-align: center;
}

body.v20-ui .v38-letter-address {
  display: flex !important;
  justify-content: space-between !important;
  padding-top: 7px !important;
  border-top: 1px solid rgba(180, 240, 255, .65) !important;
  color: white !important;
  font: 800 10px/1 "Nunito Sans", sans-serif !important;
}

body.v20-ui .v38-letter-paper {
  position: relative !important;
  flex: 1 0 auto !important;
  min-height: 0 !important;
  padding: 10px 15px 82px !important;
  background:
    linear-gradient(90deg, #fff7df, #fffdf5 4%, #fffdf5 96%, #f7e5c5) top / 100% calc(100% - 70px) no-repeat,
    url('assets/inbox-pixel-v2/office-world-bg.png') center bottom / 100% auto no-repeat,
    #0878df !important;
}

body.v20-ui .v38-letter-paper::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 68px;
  height: 3px;
  background: linear-gradient(90deg, var(--px-cyan), var(--px-yellow), var(--px-cyan));
  box-shadow: 0 2px 0 var(--px-navy);
  pointer-events: none;
}

body.v20-ui .v38-letter-paper > * { position: relative; z-index: 1; }

body.v20-ui .office-sim-intel {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin: 0 0 9px !important;
}

body.v20-ui .office-sim-intel > div {
  min-width: 0 !important;
  padding: 8px 11px !important;
  border: 1px solid #6fa6d3 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .93) !important;
  box-shadow: 0 2px 0 #bfd0dc !important;
}

body.v20-ui .office-sim-intel span {
  display: block !important;
  color: #0a5597 !important;
  font: 700 7px/1 "Silkscreen", monospace !important;
}

body.v20-ui .office-sim-intel strong {
  display: block !important;
  margin-top: 4px !important;
  color: var(--px-ink) !important;
  font: 900 13px/1.05 "Nunito Sans", sans-serif !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v20-ui .office-sim-conversation {
  padding: 12px 14px !important;
  border: 2px solid #5c8fb7 !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 3px 0 #b6b8ae !important;
}

body.v20-ui .v37-letter-body p {
  color: #163e68 !important;
  font: 700 16px/1.42 "Nunito Sans", sans-serif !important;
}

body.v20-ui .v38-salutation { font-weight: 900 !important; }

body.v20-ui .v37-letter-signature strong {
  color: #0b3667 !important;
  font: 400 20px/1 "Lilita One", sans-serif !important;
}

body.v20-ui .v37-letter-signature small { color: #54718f !important; }

body.v20-ui .v38-reply-receipt,
body.v20-ui .v38-mail-replies {
  margin: 12px 0 !important;
  padding: 13px !important;
  border: 3px solid #2a8d69 !important;
  border-style: dashed !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, .97) !important;
  color: var(--px-ink) !important;
  box-shadow: inset 0 0 0 2px #b6eed9, 0 3px 0 #a4b9ad !important;
}

body.v20-ui .v38-reply-receipt header {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

body.v20-ui .v38-reply-crest {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

body.v20-ui .v38-reply-crest img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: scale(1.6) !important;
}

body.v20-ui .v38-reply-receipt header b,
body.v20-ui .v38-mail-replies h4 {
  color: var(--px-ink) !important;
  font: 900 16px/1.05 "Nunito Sans", sans-serif !important;
}

body.v20-ui .v38-reply-receipt > p {
  color: #193f67 !important;
  font: 700 16px/1.38 "Nunito Sans", sans-serif !important;
}

body.v20-ui .v38-reply-receipt > p:first-of-type {
  margin: 12px 0 8px !important;
  color: var(--px-navy) !important;
  font: 400 clamp(20px, 1.28vw, 25px)/1 "Lilita One", Impact, sans-serif !important;
  letter-spacing: .025em !important;
  text-transform: uppercase;
}

body.v20-ui .v38-reply-receipt header b { font: 900 17px/1.05 "Nunito Sans", sans-serif !important; }
body.v20-ui .v38-reply-receipt header small { font: 700 13px/1.2 "Nunito Sans", sans-serif !important; }

body.v20-ui .office-sim-outcome-label {
  display: inline-block !important;
  margin-top: 5px !important;
  color: #008a64 !important;
  font: 700 7px/1 "Silkscreen", monospace !important;
}

body.v20-ui .office-sim-consequences {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

body.v20-ui .office-sim-consequences span {
  padding: 3px 7px !important;
  border: 1px solid #4f9bc4 !important;
  border-radius: 9px !important;
  background: white !important;
  color: #0b568a !important;
  font: 800 9px/1 "Nunito Sans", sans-serif !important;
}

body.v20-ui .v38-mail-replies header > span {
  color: #00835c !important;
  font: 700 8px/1 "Silkscreen", monospace !important;
}

body.v20-ui .v38-mail-replies button {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 24px !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 7px !important;
  padding: 10px !important;
  border: 2px solid #70a7cc !important;
  border-left: 6px solid var(--choice-tone) !important;
  border-radius: 6px !important;
  background: white !important;
  color: var(--px-ink) !important;
  text-align: left !important;
  box-shadow: 0 2px 0 #b6cad8 !important;
}

body.v20-ui .v38-mail-replies button:hover {
  transform: translateY(-1px);
  border-color: #057dd2 !important;
  background: #effaff !important;
}

body.v20-ui .v38-reply-number {
  width: 31px !important;
  height: 31px !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid var(--px-navy) !important;
  border-radius: 5px !important;
  background: var(--px-yellow) !important;
  color: var(--px-navy) !important;
  font: 900 11px/1 "Nunito Sans", sans-serif !important;
}

body.v20-ui .office-sim-choice-tone,
body.v20-ui .office-sim-choice-impact {
  font: 700 7px/1 "Silkscreen", monospace !important;
}

body.v20-ui .office-sim-choice-tone { color: #00835b !important; }
body.v20-ui .office-sim-choice-impact { color: #61809a !important; }

body.v20-ui .v38-reply-copy > strong {
  color: var(--px-ink) !important;
  font: 900 13px/1.15 "Nunito Sans", sans-serif !important;
}

body.v20-ui .v38-reply-copy > span:last-child {
  color: #43627b !important;
  font: 700 10px/1.2 "Nunito Sans", sans-serif !important;
}

body.v20-ui .v38-letter-attachment {
  margin: 10px 0 !important;
  border: 2px solid #568fb8 !important;
  border-radius: 7px !important;
  background: #e9f7ff !important;
}

body.v20-ui .v38-letter-attachment button {
  border: 2px solid var(--px-navy) !important;
  border-radius: 5px !important;
  background: linear-gradient(#1596ef, #065cc0) !important;
  color: white !important;
  font-weight: 900 !important;
}

body.v20-ui .v38-letter-foot {
  margin-top: 13px !important;
  padding: 11px 1px 12px !important;
  border-top: 1px solid #d2cdbd !important;
  color: #335878 !important;
  font: 800 10px/1 "Nunito Sans", sans-serif !important;
}

body.v20-ui .v37-mail-history {
  border: 2px solid #75a2c2 !important;
  border-radius: 6px !important;
  background: white !important;
}

body.v20-ui .office-reader-empty {
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(rgba(0, 72, 138, .06) 1px, transparent 1px) 0 0/100% 28px, #fffdf3 !important;
}

body.v20-ui .office-reader-empty h3 {
  color: var(--px-ink) !important;
  font: 400 30px/1 "Lilita One", sans-serif !important;
}

body.v20-ui .office-reader-empty p { color: #52708d !important; }

@media (max-width: 1100px) {
  body.v20-ui .office-shell { inset: calc(var(--office-global-bar) + 7px) 7px 7px !important; }
  body.v20-ui .office-heading { padding-left: 12px !important; }
  body.v20-ui .office-heading::before { left: 12px; }
  body.v20-ui .office-title-lockup { grid-template-columns: 54px 1fr !important; }
  body.v20-ui .office-heading-badge,
  body.v20-ui .office-heading-badge .club-badge,
  body.v20-ui .office-heading-badge img { width: 48px !important; height: 48px !important; }
  body.v20-ui .office-confidence-mini { min-width: 185px !important; }
  body.v20-ui #officeInboxPane .office-inbox-layout { grid-template-columns: minmax(330px, 38%) minmax(0, 62%) !important; }
}

@media (max-width: 780px) {
  body.v20-ui .office-shell { grid-template-rows: 95px auto minmax(0, 1fr) !important; }
  body.v20-ui .office-confidence-mini { display: none !important; }
  body.v20-ui .office-subnav { grid-template-columns: repeat(3, 1fr) !important; overflow: visible !important; }
  body.v20-ui .office-stage { margin-top: 43px !important; }
  body.v20-ui #officeInboxPane .office-inbox-layout { display: block !important; overflow: auto !important; }
  body.v20-ui .office-message-column { min-height: 520px !important; }
  body.v20-ui .office-message-reader { min-height: 680px !important; margin-top: 7px !important; }
}

@media (prefers-reduced-motion: no-preference) {
  body.v20-ui .v38-mail-row.is-unread::before { animation: office-pixel-pulse 1.8s steps(2, end) infinite; }
  body.v20-ui .v38-mail-replies button { transition: transform 120ms ease, background-color 120ms ease; }
}

@keyframes office-pixel-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}